feat: 🚀 图片增加删除功能

src/components/Editor/index.vue

@@ -120,13 +120,9 @@
                         <div class="image-preview-container">
                             <div class="image-order-badge">{{ img.sortOrder + 1 }}</div>
                             <img :src="img.tempUrl" :alt="`图片 ${img.sortOrder + 1}`" class="preview-img" />
-                            <el-button
-                                :icon="Delete"
-                                size="small"
-                                type="default"
-                                class="circle-delete-btn"
-                                @click.stop="removeImage(img.customUid)"
-                            ></el-button>
+                            <div style="display: flex; justify-content: flex-end; padding: 6px">
+                                <el-button size="small" type="default" @click.stop="removeImage(img.customUid)">删除</el-button>
+                            </div>
                         </div>
                         <div class="image-info">
                             <span class="image-name">{{ img.name }}</span>
@@ -150,7 +146,7 @@
 </template>
 
 <script setup name="Editor">
-import { Delete } from "@element-plus/icons-vue";
+// import { Delete } from "@element-plus/icons-vue";
 import { QuillEditor, Quill } from "@vueup/vue-quill";
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
 import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted, nextTick } from "vue";
@@ -781,33 +777,33 @@ defineExpose({
 }
 
 // 圆形删除按钮
-.circle-delete-btn {
-    position: absolute;
-    top: -8px;
-    right: -8px;
-    z-index: 500;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    margin: 0;
-    color: white;
-    background-color: #ff4d4f;
-    border: none;
-    border-radius: 50%;
-    box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
-    transition: all 0.2s;
-    &:hover {
-        color: white;
-        background-color: #d93025;
-        transform: scale(1.1);
-    }
-    .el-icon {
-        font-size: 14px;
-    }
-}
+// .circle-delete-btn {
+//     position: absolute;
+//     top: -8px;
+//     right: -8px;
+//     z-index: 500;
+//     display: flex;
+//     align-items: center;
+//     justify-content: center;
+//     width: 28px;
+//     height: 28px;
+//     padding: 0;
+//     margin: 0;
+//     color: white;
+//     background-color: #ff4d4f;
+//     border: none;
+//     border-radius: 50%;
+//     box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
+//     transition: all 0.2s;
+//     &:hover {
+//         color: white;
+//         background-color: #d93025;
+//         transform: scale(1.1);
+//     }
+//     .el-icon {
+//         font-size: 14px;
+//     }
+// }
 .image-info {
     display: flex;
     align-items: center;