添加card的删除

src/modules/editor/components/CompUI/basicUI/Container/component.tsx

@@ -19,7 +19,7 @@ export const Component = defineComponent({
         {children.default?.map((compId) => {
           const compItem = helper.findComp(compId) as DesignComp;
           const Comp =
-            controls.compUICtrl.state.components.get(compItem.compKey)
+            controls.compUICtrl.state.components.get(compItem?.compKey)
               ?.Component || CompUI.Container.Component;
 
           return <Comp key={compItem.id} compId={compItem.id} />;

src/modules/editor/components/Viewport/Content/index.tsx

@@ -9,6 +9,7 @@ import { CompUI } from "../../CompUI";
 
 import { SelectTransfer } from "../../CompUI/basicUI/Transfer/select";
 import { TipIcons } from "../../TipIcons";
+import { IconDelete } from "@/assets/icons";
 
 export default defineUI({
   setup() {
@@ -71,16 +72,21 @@ export default defineUI({
                       style.border = "2px solid #EA9E40"
                     }
                   return (<Draggable>
-                      <div class="card-item" style={style} onClick={()=>{
+                      <div key={item} class={["card-item relative transition-opacity hover:opacity-80"]} style={style} onClick={()=>{
                           actions.pickComp(item, false);
                       }}>
+                          <IconDelete onClick={()=>{
+                             actions.removeStreamCard(item);
+                          }} class="deleteitem absolute right-4px top-4px text-black" />
+
                           <Comp compId={c.id} style={{transformOrigin:"0 0", transform: `scale(${80.0 / helper.designSizeToPx(c.layout.size[0])})`}} />
                       </div>
                     </Draggable>)
                   })
                 }
                 <img class="mt-15px cursor-pointer" onClick={()=>{
-                   console.log("add card");
+                      const index = store.streamCardIds.length;
+                      actions.addCompToDesign("Container", index);
                 }} src={require("@/assets/imgs/add.svg")} alt="" />
                 </Container>
               </div>
@@ -257,6 +263,19 @@ const cardList = css`
     border-radius: 4px 4px 4px 4px;
     cursor: pointer;
     overflow: hidden;
+    color: white;
+    .deleteitem {
+      z-index: 1000;
+      opacity: 0;
+      font-size: 20px;
+    }
+
+    &:hover {
+      .deleteitem {
+        opacity: 1;
+        background: rgba(0,0,0,0.8);
+      }
+    }
   }
 `;
 

src/modules/editor/module/actions/edit.tsx

@@ -441,7 +441,7 @@ export const editActions = EditorModule.action({
   },
 
   async removeStreamCard(compId: string) {
-    await queenApi.showConfirm({ title: "删除", content: "确认删除当前内容?" });
+    await queenApi.showConfirm({ title: "删除", content: "确认删除当前页面?" });
 
     // if (this.store.streamCardIds.length < 2) {
     //   queenApi.messageError("")
@@ -457,9 +457,9 @@ export const editActions = EditorModule.action({
     }
     this.controls.selectCtrl.selecteObjs([]);
 
-    this.store.deleteComp(compId);
-
     this.store.setCurrComp(nextCard);
+
+    this.store.deleteComp(compId);
   },
   // 移动组件顺序
   moveComp(selIndex: number, targetIndex: number) {

src/modules/editor/module/stores/index.ts

@@ -171,7 +171,7 @@ export const store = EditorModule.store({
     setCurrComp(compId: string) {
       this.store.currCompId = compId;
       const comps = this.helper.getCompTrees(compId);
-      
+
       if (compId == "root") {
         return;
       }
@@ -200,11 +200,12 @@ export const store = EditorModule.store({
       }
 
       if (deleteOK) {
-        const comp = this.helper.findComp(compId) as DesignComp;
-        const ids = comp.getChildIds();
-        [compId, ...ids].forEach((id) => {
-          delete compMap[id];
-        });
+        //不删除孩子节点
+        // const comp = this.helper.findComp(compId) as DesignComp;
+        // const ids = comp.getChildIds();
+        // [compId, ...ids].forEach((id) => {
+        //   delete compMap[id];
+        // });
         delete this.store.compPids[compId];
       }
     },