Update

src/modules/editor/components/CompUI/basicUI/Transfer/select.tsx

@@ -64,7 +64,7 @@ export const SelectTransfer = defineComponent({
       return (
         <div
           class={[
-            "absolute transfer z-1000",
+            "absolute transfer z-998",
             transferStyle.showGizmo && transferStyle.mode != 2 ? showgizmo : hideGizmo,
           ]}
           style={{

src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -1,11 +1,11 @@
 import { IconAdd, IconMove } from "@/assets/icons";
+import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
 import { css } from "@linaria/core";
 import { IconDelete } from "@queenjs/icons";
-import { defineComponent , onMounted, ref} from "vue";
+import { defineComponent, onMounted, ref } from "vue";
 import { string } from "vue-types";
 import { useEditor } from "../../..";
 import { useCompRef } from "./hooks";
-import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
 
 export const View = defineComponent({
   props: {
@@ -21,7 +21,7 @@ export const View = defineComponent({
       if (!comp) return store.isEditMode ? <div>无效组件</div> : null;
       const isStreamCard = helper.isStreamCard(props.compId);
       const isGroupComp = helper.isGroupComp(props.compId);
-      const obj =new CompObject(store.compMap[props.compId])
+      const obj = new CompObject(store.compMap[props.compId]);
       const m = obj.worldTransform.clone();
       m.invert();
 
@@ -32,7 +32,7 @@ export const View = defineComponent({
             viewStyle,
             store.isEditMode && editCompStyle,
             isGroupComp && groupCompCls,
-            store.currStreamCardId == props.compId && CurrCompStyle
+            store.currStreamCardId == props.compId && CurrCompStyle,
           ]}
           style={helper.createStyle(comp.layout)}
           onClick={(e) => {
@@ -63,12 +63,9 @@ export const View = defineComponent({
               actions.pickComp(props.compId);
             }}
           >
-            
             {slots.default?.()}
           </div>
-          {
-            store.isEditMode && isStreamCard && <Hudop compId={props.compId} />
-          }
+          {store.isEditMode && isStreamCard && <Hudop compId={props.compId} />}
         </div>
       );
     };
@@ -82,32 +79,39 @@ export const Hudop = defineComponent({
   setup(props) {
     const { store, actions, helper, controls } = useEditor();
 
-    const opref= ref();
-    onMounted(()=>{
+    const opref = ref();
+
+    onMounted(() => {
       opref.value.editable = "hudop";
-    })
-    return ()=>(
+    });
+
+    return () => (
       <div class="hudop" ref={opref}>
         {store.streamCardIds.length > 1 && (
-                <IconMove class="draganchor" />
-              )}
-              {store.streamCardIds.length > 1 && (
-                <IconDelete
-                  onClick={() => actions.removeStreamCard(props.compId)}
-                />
+          <IconMove
+            class="draganchor"
+            onMousedown={() => actions.pickComp(props.compId)}
+          />
+        )}
+        {store.streamCardIds.length > 1 && (
+          <IconDelete
+            onClick={(e: any) => {
+              e.stopPropagation();
+              actions.removeStreamCard(props.compId);
+            }}
+          />
         )}
         <IconAdd
-          onClick={(e:any) => {
+          onClick={(e: any) => {
             e.stopPropagation();
             const index = store.streamCardIds.indexOf(props.compId) + 1;
             actions.addCompToDesign("Container", index);
-
           }}
         />
       </div>
-    )
-  } 
-})
+    );
+  },
+});
 
 const viewStyle = css`
   position: relative;
@@ -134,7 +138,7 @@ const viewStyle = css`
     .inficon {
       padding: 8px;
     }
-    z-index: 1001;
+    z-index: 999;
   }
 `;
 
@@ -144,12 +148,11 @@ const editCompStyle = css`
   }
 `;
 
-
 const CurrCompStyle = css`
   position: relative;
   outline: 1px solid @inf-primary-color;
   box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
-  z-index: 1000;
+  z-index: 998;
 `;
 
 const groupCompCls = css`

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

@@ -9,7 +9,7 @@ export default defineUI({
     const { history } = controls.historyCtrl;
     return () => (
       <>
-        <div class="absolute top-20px left-20px space-x-10px z-1001">
+        <div class="absolute top-20px left-20px space-x-10px z-999">
           <TipIcons.Undo
             disable={!history.state.canUndo}
             class={btnCls}
@@ -21,7 +21,7 @@ export default defineUI({
             onClick={() => history.redo()}
           />
         </div>
-        <div class="absolute top-20px right-20px z-1001">
+        <div class="absolute top-20px right-20px z-999">
           <TipIcons.Screenshot
             class={btnCls}
             onClick={() => actions.updateThumbnailByScreenshot(true)}

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

@@ -30,7 +30,7 @@ export const editActions = EditorModule.action({
 
     let yOffset = 0;
     if (this.store.currCompId != this.store.currStreamCardId && !isCreatCard) {
-        const bound = this.helper.getCardCompBound(this.store.currCompId);
+      const bound = this.helper.getCardCompBound(this.store.currCompId);
         yOffset = bound.y + bound.h
     }
 
@@ -125,17 +125,20 @@ export const editActions = EditorModule.action({
   },
   // 删除组件
   removeComp(compId: string) {
-
     if (this.helper.isCompCanDelete(compId)) {
+      if (this.helper.isStreamCard(compId)) {
+        this.actions.removeStreamCard(compId);
+        return;
+      }
 
-      const cardid = this.store.currStreamCardId
-      if (compId === this.store.currCompId) { 
+      const cardid = this.store.currStreamCardId;
+      if (compId === this.store.currCompId) {
         this.store.setCurrComp(this.store.currStreamCardId);
       }
       this.store.deleteComp(compId);
 
       this.helper.extendStreamCard(cardid);
-      
+
       this.controls.selectCtrl.selecteObjs([]);
     }
   },
@@ -155,7 +158,7 @@ export const editActions = EditorModule.action({
         nextCard = this.store.streamCardIds[i - 1];
       }
     }
-    this.controls.selectCtrl.selecteObjs([])
+    this.controls.selectCtrl.selecteObjs([]);
 
     this.store.deleteComp(compId);
 
@@ -268,9 +271,9 @@ export const editActions = EditorModule.action({
     comp.layout.transformMatrix = transformMatrix;
   },
 
-   // 设置组件浮动
-   setCompPositionFloat(comp: DesignComp) {
-    comp.layout.position = "absolute"
+  // 设置组件浮动
+  setCompPositionFloat(comp: DesignComp) {
+    comp.layout.position = "absolute";
   },
 
   // 设置组件浮动