fix

src/components/FileBoxAD/index.less

@@ -4,10 +4,12 @@
   overflow-y: auto;
   position: relative;
 }
+
 .flex_box_img {
   width: 100px;
   cursor: pointer;
 }
+
 .flex_box {
   width: 200px;
   height: 200px;
@@ -18,17 +20,20 @@
   padding: 10px 0;
   position: relative;
   font-size: 12px;
+
   &:hover {
     background-color: #c5d8f0;
     border-radius: 5px;
     border: 1px solid #c5d8f0;
     box-sizing: border-box;
+
     .select {
       display: flex;
       background-color: #7cc6ee;
     }
   }
 }
+
 .flex_box_name {
   width: 100%;
   overflow: hidden;
@@ -36,10 +41,12 @@
   white-space: nowrap;
   cursor: pointer;
   text-align: center;
+
   &:hover {
     color: #1890ff;
   }
 }
+
 .flex_box_id {
   width: 85%;
   overflow: hidden;
@@ -47,27 +54,33 @@
   white-space: nowrap;
   cursor: pointer;
   text-align: center;
+
   &:hover {
     color: #1890ff;
   }
 }
+
 .rt {
   margin: 0 5px;
   color: #c5d8f3;
 }
+
 .path {
   margin-bottom: 15px;
   //   margin-top: 10px;
 }
+
 .path_color {
   color: #09aaff;
   cursor: pointer;
 }
+
 .file_news_content {
   width: 100%;
-  columns:300px 5;
+  columns: 300px 5;
   column-gap: 20px;
-  > div {
+
+  >div {
     width: 100%;
     break-inside: avoid;
     margin-bottom: 20px;
@@ -75,11 +88,13 @@
     justify-content: center;
   }
 }
+
 .file_content {
   width: 100%;
-  columns:200px 7;
+  columns: 200px 7;
   column-gap: 20px;
-  > div {
+
+  >div {
     width: 100%;
     break-inside: avoid;
     margin-bottom: 20px;
@@ -87,6 +102,7 @@
     justify-content: center;
   }
 }
+
 .select {
   position: absolute;
   left: 5px;
@@ -98,19 +114,23 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  > span {
+
+  >span {
     display: flex;
     justify-content: center;
     align-items: center;
   }
 }
+
 .select_btn {
   margin-bottom: 10px;
-  > span {
+
+  >span {
     color: #09aaff;
     cursor: pointer;
   }
 }
+
 .image_box,
 .video_box,
 .audio_box {
@@ -123,18 +143,21 @@
   padding: 10px 20px;
   position: relative;
   font-size: 12px;
+
   img {
     height: 100px;
     width: 130px;
     object-fit: contain;
   }
-  audio {
-  }
+
+  audio {}
+
   &:hover {
     background-color: #c5d8f0;
     border-radius: 5px;
     border: 1px solid #c5d8f0;
     box-sizing: border-box;
+
     .select {
       display: flex;
       background-color: #7cc6ee;
@@ -157,18 +180,21 @@
   border-radius: 5px;
   box-shadow: 0 0 8px #ccc;
   background-color: #fff;
-  > li {
+
+  >li {
     cursor: pointer;
     height: 30px;
     line-height: 30px;
     padding: 0 10px;
     text-align: center;
     width: 100%;
+
     &:hover {
       background-color: #a4d9f5;
     }
   }
 }
+
 .add {
   position: absolute;
   left: 0;
@@ -182,6 +208,7 @@
   align-items: center;
   justify-content: center;
 }
+
 .news_box {
   width: 280px;
   display: flex;
@@ -191,7 +218,8 @@
   padding: 15px 30px;
   box-sizing: border-box;
   position: relative;
-  > div {
+
+  >div {
     height: 60px;
     display: flex;
     flex-flow: row;
@@ -201,20 +229,24 @@
     width: 100%;
     justify-content: space-between;
     margin-top: 2px;
+
     &:hover {
-      > p {
+      >p {
         display: flex;
         cursor: pointer;
       }
     }
+
     div {
       order: 2;
     }
+
     img {
       object-fit: cover;
       width: 50px;
       height: 50px;
     }
+
     span {
       display: -webkit-box;
       -webkit-box-orient: vertical;
@@ -224,16 +256,19 @@
       height: 40px;
       width: 75%;
     }
+
     &:nth-child(2) {
       position: relative;
       height: 120px;
       overflow: hidden;
+
       img {
         object-fit: cover;
         width: 100%;
         height: 120px;
       }
-      > span {
+
+      >span {
         position: absolute;
         bottom: 0;
         left: 0;
@@ -250,17 +285,20 @@
       }
     }
   }
+
   &:hover {
     background-color: #c5d8f0;
     border-radius: 5px;
     // border: 1px solid #c5d8f0;
     box-sizing: border-box;
+
     .select {
       display: flex;
       background-color: #7cc6ee;
     }
   }
 }
+
 .knews_box {
   width: 300px;
   display: flex;
@@ -271,7 +309,8 @@
   box-sizing: border-box;
   position: relative;
   height: 200px;
-  > div {
+
+  >div {
     display: flex;
     justify-content: space-between;
     width: 100%;
@@ -280,17 +319,20 @@
     border-radius: 5px;
     height: 95px;
     box-sizing: border-box;
-    img{
+
+    img {
       width: 50px;
       height: 50px;
       margin-top: 25px;
       object-fit: cover;
     }
-    span{
+
+    span {
       font-weight: 500;
       margin-bottom: 5px;
     }
-    p{
+
+    p {
       font-size: 12px;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -302,40 +344,46 @@
       width: 160px;
     }
   }
+
   &:hover {
     background-color: #c5d8f0;
     border-radius: 5px;
     // border: 1px solid #c5d8f0;
     box-sizing: border-box;
+
     .select {
       display: flex;
       background-color: #7cc6ee;
     }
   }
 }
-.flex_box_font {
-}
+
+.flex_box_font {}
 
 .action {
   background-color: #c5d8f0;
   border-radius: 5px;
   // border: 1px solid #90d8ff;
   box-sizing: border-box;
+
   .select {
     background-color: #09aaff;
     display: flex;
   }
+
   &:hover {
     background-color: #c5d8f0;
     border-radius: 5px;
     // border: 1px solid #90d8ff;
     box-sizing: border-box;
+
     .select {
       display: flex;
       background-color: #09aaff;
     }
   }
 }
+
 .pagination {
   width: 100%;
   display: flex;
@@ -344,12 +392,40 @@
   margin-bottom: 10px;
   margin-top: 5px;
 }
-.wxSelect{
+
+.wxSelect {
   position: absolute;
-  top:0;
+  top: 0;
   right: 20px;
   width: 200px;
-  >div{
+
+  >div {
     margin-top: 0 !important;
   }
 }
+
+.pageVideo {
+  position: relative;
+
+  .pagePreview {
+    display: inline-block;
+    width: 130px;
+    height: 100px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    background-color: rgba(0, 0, 0, 0.6);
+    color: #FFF;
+    font-size: 14px;
+    text-align: center;
+    line-height: 100px;
+    opacity: 0;
+    transition: opacity 0.3s;
+    cursor: pointer;
+  }
+
+  &:hover .pagePreview {
+    opacity: 1;
+  }
+}

src/components/FileBoxAD/index.tsx

@@ -7,6 +7,7 @@ import { useModel } from "umi"
 import ImgModal from "./components/imgModal"
 import TreeBox from "./components/tree"
 import SortModal from "./components/fileModal/sortModal"
+import { EyeOutlined } from "@ant-design/icons"
 
 interface News {
     id: number,
@@ -77,7 +78,7 @@ function FlieBox(props: Props) {
                     isAll && <li onClick={allFile}>全选/反选</li>
                 }
                 {mediaType === 'PAGE' ? <>
-                    <li onClick={() => { setPage && setPage(1, rightClickPup.id) }}>查看</li>
+                    {/* <li onClick={() => { setPage && setPage(1, rightClickPup.id) }}>查看</li> */}
                     <li onClick={() => { setPage && setPage(2, rightClickPup.id) }}>复制</li>
                     <li onClick={() => { setPage && setPage(3, rightClickPup.id) }}>批量复制</li>
                 </> : <>
@@ -273,26 +274,29 @@ function FlieBox(props: Props) {
                                     switch (topPageElements?.elementType) {
                                         case 'TOP_IMAGE':
                                             topName = "顶部图片"
-                                            El = <Image src={topPageElements?.topImageSpec?.imageUrl} onClick={(e) => { e.stopPropagation() }} />
+                                            El = <Image src={topPageElements?.topImageSpec?.imageUrl} preview={{ visible: false }} onClick={(e) => { e.stopPropagation(); setPage && setPage(1, item.id) }} />
                                             break
                                         case 'TOP_SLIDER':
                                             topName = "顶部轮播图"
                                             El = <>
                                                 <Carousel autoplay style={{ width: 150, textAlign: 'center' }}>
-                                                    {topPageElements?.topSliderSpec?.imageUrlList?.map((item: string, index: number) => <div key={index}>
-                                                        <Image preview={{ visible: false }} src={item} onClick={(e) => { e.stopPropagation(); setImgVisible(true) }} />
+                                                    {topPageElements?.topSliderSpec?.imageUrlList?.map((url: string, index: number) => <div key={index}>
+                                                        <Image preview={{ visible: false }} src={url} onClick={(e) => { e.stopPropagation(); /*setImgVisible(true)*/ setPage && setPage(1, item.id) }} />
                                                     </div>)}
                                                 </Carousel>
-                                                <div style={{ display: 'none' }}>
+                                                {/* <div style={{ display: 'none' }}>
                                                     <Image.PreviewGroup preview={{ visible: imgVisible, onVisibleChange: vis => setImgVisible(vis) }}>
                                                         {topPageElements?.topSliderSpec?.imageUrlList?.map((item: string, index: number) => <Image src={item} key={index} />)}
                                                     </Image.PreviewGroup>
-                                                </div>
+                                                </div> */}
                                             </>
                                             break
                                         case 'TOP_VIDEO':
                                             topName = "顶部视频"
-                                            El = <video src={topPageElements?.topVideoSpec?.videoUrl} style={{ width: 130, height: 100 }} controls />
+                                            El = <div className={style.pageVideo}>
+                                                <span className={style.pagePreview} onClick={(e) => { e.stopPropagation(); setPage && setPage(1, item.id) }}><EyeOutlined /> 预览</span>
+                                                <video src={topPageElements?.topVideoSpec?.videoUrl} style={{ width: 130, height: 100 }} controls/>
+                                            </div>
                                             break
                                     }
                                 }