添加回收站移除组件

smsb-plus-ui/src/components/MediaFileSelector.vue

@@ -140,7 +140,8 @@ function handleSelectionFile(selection: MinioDataVO[]) {
             name: img.originalName,
             type: img.type,
             duration: 10,
-            order: 1
+            order: 1,
+            url: img.fileUrl
           }
         ];
       } else {
@@ -158,7 +159,8 @@ function handleSelectionFile(selection: MinioDataVO[]) {
           name: selection[0].originalName,
           type: selection[0].type,
           duration: selection[0].duration,
-          order: 1
+          order: 1,
+          url: selection[0].fileUrl
         }
       ];
     } else {
@@ -171,7 +173,8 @@ function handleSelectionFile(selection: MinioDataVO[]) {
       name: item.originalName,
       type: item.type,
       duration: item.duration,
-      order: idx + 1
+      order: idx + 1,
+      url: item.fileUrl
     }));
   }
 }

smsb-plus-ui/src/views/smsb/itemProgram/EditProgram.vue

@@ -13,7 +13,7 @@
         <div class="sidebar-item component-item"
           :class="{ 'selected': selectedComponent === item || (item.type === 'canvas' && selectedComponent && selectedComponent.type === 'canvas') }"
           @click="item.type === 'canvas' ? selectCanvasFromSidebar() : selectComponent(item)" draggable="true"
-          @dragstart="onSidebarDragStart(item, idx)" @dragover.prevent="onSidebarDragOver(item, idx, $event)"
+          @dragstart="onSidebarDragStart(item, idx, $event)" @dragover.prevent="onSidebarDragOver(item, idx, $event)"
           @drop.prevent="onSidebarDrop(item, idx, $event)">
           <div class="component-icon-text">
             <template v-if="item.type === 'canvas'">画布</template>
@@ -27,6 +27,16 @@
           </div>
         </div>
       </template>
+      <div class="sidebar-recycle-bin" @dragover.prevent @drop="onRecycleDrop($event)" title="拖动组件到此处删除">
+        <el-icon style="font-size: 28px; color: #bbb">
+          <svg viewBox="0 0 1024 1024" width="1em" height="1em">
+            <path
+              d="M320 896c0 35.2 28.8 64 64 64h256c35.2 0 64-28.8 64-64V320H320v576z m352-704V160c0-35.2-28.8-64-64-64H416c-35.2 0-64 28.8-64 64v32H160v64h704v-64H672z m-64 0H416V160h192v32z"
+              fill="currentColor"></path>
+          </svg>
+        </el-icon>
+        <div style="font-size: 12px; color: #bbb">回收站</div>
+      </div>
     </div>
 
     <!-- 中间编辑区 -->
@@ -267,8 +277,24 @@ function alignComponent(type: string) {
 // 拖拽排序相关
 const sidebarDrag = ref<{ item: any; idx: number } | null>(null);
 
-function onSidebarDragStart(item: any, idx: number) {
+// 回收站拖拽释放事件，移除对应组件
+function onRecycleDrop(e: DragEvent) {
+  const depth = e.dataTransfer?.getData('component-depth');
+  if (!depth) return;
+  // 不能删除画布类型
+  const idx = editorContent.value.elements.findIndex((el) => String(el.depth) === depth && el.type !== 'canvas');
+  if (idx > -1) {
+    editorContent.value.elements.splice(idx, 1);
+    ElMessage.success('组件已移除');
+  }
+}
+
+// 拖拽开始时，将组件depth放入dataTransfer
+function onSidebarDragStart(item: any, idx: number, e?: DragEvent) {
   sidebarDrag.value = { item, idx };
+  if (e && e.dataTransfer) {
+    e.dataTransfer.setData('component-depth', String(item.depth));
+  }
 }
 function onSidebarDragOver(targetItem: any, targetIdx: number, e: DragEvent) {
   e.preventDefault();
@@ -692,6 +718,18 @@ const goBack = () => {
   min-width: 900px;
 }
 
+.sidebar-recycle-bin {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+  padding: 8px 0 0 0;
+  border-top: 1px dashed #eee;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
 .sidebar {
   width: 90px;
   background: #232a36;