媒体库增加视频预览

src/style/main.scss

@@ -729,8 +729,7 @@ li {
 }
 
 .gva-media-box .el-icon {
-  color: var(--el-text-color-secondary);
-  font-size: 30px;
+  color: var(--el-text-color-placeholder);
 }
 
 .avatar-uploader .avatar {

src/view/mediaFile/index.vue

@@ -23,12 +23,12 @@
               style="width: 120px; height: 100px;" />
             <div v-else-if="isVideo(scope.row.tag)" class="gva-media-box" style="width: 120px; height: 100px;"
               @click="clickPreviewVideo(scope.row.url)">
-              <el-icon>
+              <el-icon :size="25">
                 <VideoPlay />
               </el-icon>
             </div>
             <div v-else class="gva-media-box" style="width: 120px; height: 80px;">
-              <el-icon>
+              <el-icon :size="25">
                 <Document />
               </el-icon>
             </div>
@@ -73,11 +73,14 @@
           @current-change="handleCurrentChange" @size-change="handleSizeChange" />
       </div>
     </div>
+    <el-dialog v-model="videoPreviewDialog" align-center>
+      <video :src="videoPreviewUrl" controls="controls" style="width: 100%; height: 100%" />
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { getUrl } from '@/utils/image'
+import { getUrl, isVideoExt } from '@/utils/image'
 import { getFileList, deleteFile, editFileName } from '@/api/mediaFile'
 import { downloadImage } from '@/utils/downloadImg'
 import UploadImage from '@/components/upload/image.vue'
@@ -88,7 +91,7 @@ import { ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 defineOptions({
-  name: 'Upload',
+  name: 'MediaFile',
 })
 
 const mediaFileCategoryOpts = ref([])
@@ -225,8 +228,12 @@ const editFileNameFunc = async (row) => {
   })
 }
 
-const clickPreviewVideo = () => {
+const videoPreviewDialog = ref(null)
+const videoPreviewUrl = ref('')
+const clickPreviewVideo = (url) => {
   console.log('clickPreviewVideo')
+  videoPreviewDialog.value = true
+  videoPreviewUrl.value = url
 }
 </script>