feat: save

src/view/media/index.scss

@@ -33,15 +33,48 @@
       height: 235px;
       justify-content: center;
       flex-direction: column;
+
       &:hover {
         cursor: pointer;
+        .actions {
+          display: flex !important;
+        }
       }
       .title {
         text-align: center;
         line-height: 48px;
       }
-      img {
-        object-fit: scale-down;
+      .img {
+        width: 300px;
+        height: 212px;
+        position: relative;
+
+        .actions {
+          width: 100%;
+          display: none;
+          flex-direction: row;
+          position: absolute;
+
+          bottom: 0;
+          > :deep(.el-button) {
+            flex: 1;
+            color: white;
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 0;
+            &:hover {
+              background: rgba(0, 0, 0, 0.6);
+            }
+          }
+          :deep(.el-button + .el-button) {
+            margin: 0;
+          }
+        }
+        img {
+          width: 300px;
+          height: 212px;
+          overflow: hidden;
+          object-fit: cover;
+        }
       }
     }
   }

src/view/media/index.vue

@@ -23,12 +23,18 @@
           :name="sub.value"
         >
           <div class="media-list" v-if="files.length">
-            <div
-              v-for="file in files"
-              class="cover"
-              @click="handerPhotoEdit(file)"
-            >
-              <img :src="file.filesUrl" />
+            <div v-for="file in files" class="cover">
+              <div class="img">
+                <img :src="file.filesUrl" />
+                <div class="actions">
+                  <el-button type="text" @click="handerPhotoEdit(file)">
+                    编辑</el-button
+                  >
+                  <el-button type="text" @click="handerPhotoDelete(file)">
+                    删除</el-button
+                  >
+                </div>
+              </div>
               <span class="title">{{ file.filesTitle }}</span>
             </div>
           </div>
@@ -42,7 +48,7 @@
 import { onMounted, ref, computed, watchEffect, watch } from "vue";
 import comHead from "@/components/head/index.vue";
 import { title, desc } from "@/store/system";
-
+import { confirm } from "@/helper/message";
 import {
   CaseFile,
   CaseFileType,
@@ -85,6 +91,14 @@ const handerPhotoEdit = (file: CaseFile) => {
     query: { filesTypeId: file.filesTypeId },
   });
 };
+
+const handerPhotoDelete = async (file: CaseFile) => {
+  console.log("handerPhotoDelete", file);
+  if (await confirm("确定要删除此数据？")) {
+    await delCaseFile({ caseId: caseId.value!, filesId: file.filesId });
+    refresh();
+  }
+};
 const initDefaultData = async () => {
   const data = await getCaseFileTypesQuery("library");
   const rootList = data.map((item) => {