feat(mirror):update

src/app/mirror/App.vue

@@ -3,11 +3,28 @@
     <!-- 图片预览 -->
     <el-dialog v-model="dialogVisible">
       <img
-        style="width: 100%"
+        v-if="checkSourceIsImage(dialogImageUrl)"
+        style="width: 100%;height: 500px;object-fit: scale-down;"
         w-full
         :src="dialogImageUrl"
         alt="Preview Image"
       />
+
+      <video
+        v-if="checkSourceIsVideo(dialogImageUrl)"
+        style="width: 100%"
+        w-full
+        controls
+        :src="dialogImageUrl"
+      />
+
+      <audio
+        v-if="checkSourceIsAudio(dialogImageUrl)"
+        style="width: 100%"
+        w-full
+        controls
+        :src="dialogImageUrl"
+      />
     </el-dialog>
     <!-- 分镜配置 -->
     <div class="project-title">
@@ -85,7 +102,7 @@
                 <div style="width: 100%">
                   <img
                     class="el-upload-list__item-thumbnail"
-                    :src="file.url"
+                    :src="getCoverUrl(file.url)"
                     alt=""
                   />
                   <span class="el-upload-list__item-actions">
@@ -158,7 +175,7 @@
 <script lang="ts" setup>
 import { vDragable } from "./dragable";
 import { ElMessage } from "element-plus";
-import { reactive, ref, onMounted } from "vue";
+import { reactive, ref, onMounted, computed } from "vue";
 import type { UploadFile } from "element-plus";
 import { uploadFile as uploadFileUrl } from "@/request";
 import {
@@ -166,6 +183,7 @@ import {
   CaseScriptSaveOrUpdate,
 } from "@/app/mirror/store/script";
 import linkIco from "@/assets/image/fire.ico";
+import musicHeadphones from "@/assets/image/music.png";
 
 const link = document.querySelector<HTMLLinkElement>("#app-icon")!;
 link.setAttribute("href", linkIco);
@@ -229,6 +247,28 @@ const columns = ref([
   { prop: "words", label: "台词文案" },
   { prop: "marks", label: "备注" },
 ]);
+const checkSourceIsVideo = computed(() => (url: string) => {
+  return url.includes(".mp4");
+});
+const checkSourceIsAudio = computed(() => (url: string) => {
+  return url.includes(".mp3");
+});
+const checkSourceIsImage = computed(() => (url: string) => {
+  return url.includes(".jpg") || url.includes(".png") || url.includes(".gif");
+});
+
+const getCoverUrl = computed(() => (url: string) => {
+  switch (true) {
+    case url.includes(".mp4"):
+      return (
+        url + "?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0,m_fast,ar_auto"
+      );
+    case url.includes(".mp3") || url.includes(".wmv"):
+      return musicHeadphones;
+    default:
+      return url;
+  }
+});
 
 const data = reactive({
   list: [{ id: 1, name: "", desc: "", fileList: [] }],
@@ -434,6 +474,7 @@ tbody {
     min-height: 73px;
     height: 73px;
     width: 100%;
+
   }
   .uploadImg,
   .el-upload-list__item {
@@ -443,6 +484,7 @@ tbody {
     line-height: 73px;
     .el-upload-list__item-thumbnail {
       width: 100%;
+      max-width: 100px;
       object-fit: cover;
     }
   }