Merge branch 'dev' of http://124.70.149.18:10880/lianghj/queenshow into dev

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

@@ -80,7 +80,7 @@ export const Component = defineComponent({
         const target = e.target as HTMLElement;
         if (
           editorInstance.ui.view.toolbar.element?.contains(target) ||
-          comp.$el.contains(target)
+          editorInstance.ui.view.editable.element?.contains(target)
         ) {
           return;
         }

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,31 +79,39 @@ export const Hudop = defineComponent({
   setup(props) {
     const { store, actions, helper, controls } = useEditor();
 
-    const opref= ref();
-    onMounted(()=>{
-        opref.value.editable = "hudop";
-    })
-    return ()=>(
-      <div class="hudop" ref={opref}>
-              {store.streamCardIds.length > 1 && (
-                <IconMove class="draganchor" />
-              )}
-              {store.streamCardIds.length > 1 && (
-                <IconDelete
-                  onClick={() => actions.removeStreamCard(props.compId)}
-                />
-              )}
-              <IconAdd
-                onClick={() => {
-                  const index = store.streamCardIds.indexOf(props.compId) + 1;
-                  actions.addCompToDesign("Container", index);
+    const opref = ref();
 
-                }}
-              />
-        </div>
-    )
-  } 
-})
+    onMounted(() => {
+      opref.value.editable = "hudop";
+    });
+
+    return () => (
+      <div class="hudop" ref={opref}>
+        {store.streamCardIds.length > 1 && (
+          <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) => {
+            e.stopPropagation();
+            const index = store.streamCardIds.indexOf(props.compId) + 1;
+            actions.addCompToDesign("Container", index);
+          }}
+        />
+      </div>
+    );
+  },
+});
 
 const viewStyle = css`
   position: relative;
@@ -133,7 +138,7 @@ const viewStyle = css`
     .inficon {
       padding: 8px;
     }
-    z-index: 1000;
+    z-index: 999;
   }
 `;
 
@@ -143,11 +148,12 @@ 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: 998;
+`;
 
 const groupCompCls = css`
   outline: 2px solid @inf-primary-color !important;

src/modules/editor/components/Preview/index.tsx

@@ -1,25 +1,24 @@
 import { defineUI } from "queenjs";
 import { useEditor } from "../..";
 import { CompUI } from "../CompUI";
+import { useCompRef } from "../CompUI/basicUI/hooks";
 
 export default defineUI({
   setup() {
     const { store, helper } = useEditor();
+    const rootRef = useCompRef("root");
     return () => (
       <div
-        class="overflow-hidden min-h-100vh"
-        style={helper.createStyle(helper.findRootComp()?.layout || {size: [750, 800]})}
+        ref={rootRef}
+        class="overflow-hidden min-h-100vh !h-auto"
+        style={helper.createStyle(
+          helper.findRootComp()?.layout || { size: [750, 800] }
+        )}
       >
         {store.pageCompIds.map((id) => {
           const compKey = store.designData.compMap[id]?.compKey;
           const Comp: any = (CompUI[compKey] || CompUI.Container).Component;
-          return (
-            Comp && (
-              <div class="flex flex-col" key={id}>
-                <Comp compId={id} />
-              </div>
-            )
-          );
+          return Comp && <Comp key={id} compId={id} />;
         })}
       </div>
     );

src/modules/editor/components/Viewport/Slider/SliderRight/CompTree.tsx

@@ -1,13 +1,13 @@
+import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
 import { TreeToolbars } from "@/modules/editor/objects/Toolbars";
 import { css } from "@linaria/core";
 import { Image } from "@queenjs/ui";
 import { useReactive } from "@queenjs/use";
 import { Tree } from "ant-design-vue";
-import { defineComponent, effect } from "vue";
+import { defineComponent, watch } from "vue";
 import { string } from "vue-types";
 import { useEditor } from "../../../..";
 import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
-import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
 
 type TreeItem = {
   key: string;
@@ -25,7 +25,7 @@ export const CompTree = defineComponent({
       expandedKeys: [] as string[],
       treeData() {
         const rootComp = helper.findRootComp();
-      
+
         function getCompChildren(ids: string[]): TreeItem[] {
           return ids.map((id) => {
             const comp = helper.findComp(id) as DesignComp;
@@ -44,35 +44,44 @@ export const CompTree = defineComponent({
       },
     }));
 
-   
+    watch(
+      () => store.currCompId,
+      () => {
+        state.expandedKeys = store.currCompId
+          ? helper.getCompTrees(store.currCompId).map((comp) => comp.id)
+          : [];
+      }
+    );
 
     return () => {
-
-      state.expandedKeys = store.currCompId  ? helper.getCompTrees(store.currCompId).map((comp) => comp.id):[];
       return (
-      <Tree
-        class={treeStyle}
-        treeData={ state.treeData}
-        v-model={[state.expandedKeys, "expandedKeys"]}
-        selectedKeys={[store.currCompId]}
-        blockNode={true}
-        onSelect={(ids) =>{
-          const id = ids[0] as string || state.expandedKeys.at(-2) || "root";
-          if (helper.isStreamCardChild(id)) {
-            controls.selectCtrl.selecteObjs([new CompObject(store.compMap[id])])
-            return;
-          } 
-          actions.pickComp(id)
-        }}
-      >
-        {{
-          title: (data: any) => {
-            return <CompNode title={data.title} id={data.key} />;
-          },
-        }}
-      </Tree>
-    );
-  }},
+        <Tree
+          class={treeStyle}
+          treeData={state.treeData}
+          v-model={[state.expandedKeys, "expandedKeys"]}
+          selectedKeys={[store.currCompId]}
+          blockNode={true}
+          onSelect={(ids) => {
+            const id =
+              (ids[0] as string) || state.expandedKeys.at(-2) || "root";
+            if (helper.isStreamCardChild(id)) {
+              controls.selectCtrl.selecteObjs([
+                new CompObject(store.compMap[id]),
+              ]);
+              return;
+            }
+            actions.pickComp(id);
+          }}
+        >
+          {{
+            title: (data: any) => {
+              return <CompNode title={data.title} id={data.key} />;
+            },
+          }}
+        </Tree>
+      );
+    };
+  },
 });
 
 const CompNode = defineComponent({

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-10">
+        <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-10">
+        <div class="absolute top-20px right-20px z-999">
           <TipIcons.Screenshot
             class={btnCls}
             onClick={() => actions.updateThumbnailByScreenshot(true)}

src/modules/editor/controllers/TransferCtrl/GroupCtrl.ts

@@ -103,7 +103,7 @@ export class GroupActionCtrl extends ModuleControl<EditorModule> {
       const originArr = window
         .getComputedStyle(groupComp.$el)
         .transformOrigin.split(" ")
-        .map(parseFloat);
+        .map((v) => parseFloat(v));
 
       const porigin = new Matrix();
       porigin.translate(originArr[0], originArr[1]);
@@ -113,7 +113,7 @@ export class GroupActionCtrl extends ModuleControl<EditorModule> {
       const childOrigArr = window
         .getComputedStyle(comp.$el)
         .transformOrigin.split(" ")
-        .map(parseFloat);
+        .map((v) => parseFloat(v));
       const corigin = new Matrix();
       corigin.translate(childOrigArr[0], childOrigArr[1]);
       const cinvOrigin = new Matrix();

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";
   },
 
   // 设置组件浮动

src/pages/website/Promotion2/components/ShareModal.tsx

@@ -35,7 +35,7 @@ export default defineComponent({
       return (
         <div class="flex items-start">
           <div>
-            <div class="scrollbar w-375px h-600px pr-10px overflow-y-auto">
+            <div class="scrollbar h-600px pr-10px overflow-y-auto">
               {slots.preview?.()}
             </div>
             <div class="mt-20px text-center">