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

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

@@ -1,14 +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, TreeProps } from "ant-design-vue";
+import { Tree } from "ant-design-vue";
 import { defineComponent, nextTick, watch } from "vue";
-import { string, bool } from "vue-types";
+import { string } from "vue-types";
 import { useEditor } from "../../../..";
 import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
-import { TreeDataItem } from "ant-design-vue/lib/tree";
-import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
 
 type TreeItem = {
   key: string;
@@ -19,7 +18,17 @@ type TreeItem = {
 
 export const CompTree = defineComponent({
   setup() {
-    const { store, actions, helper, controls } = useEditor();
+    const { controls } = useEditor();
+    return () => {
+      const key = controls.pageCtrl.designData.title;
+      return <CompTreeMain key={key} />;
+    };
+  },
+});
+
+export const CompTreeMain = defineComponent({
+  setup() {
+    const { store, helper, controls } = useEditor();
     const { compUICtrl } = controls;
 
     const state = useReactive(() => ({
@@ -37,6 +46,7 @@ export const CompTree = defineComponent({
             return {
               key: comp.id,
               title:
+                comp.layout.cusName ||
                 comp.title ||
                 compUICtrl.state.components.get(comp.compKey)?.name ||
                 "未命名",
@@ -62,6 +72,7 @@ export const CompTree = defineComponent({
         });
       }
     );
+
     const onDrop = (info: any) => {
       const dragNode = info.dragNode; //被拖拽
       const dropNode = info.node; //拖拽落下
@@ -140,6 +151,7 @@ export const CompTree = defineComponent({
         helper.extendStreamCard(parentComp.id);
       });
     };
+
     const sortCompInCard = (
       parentComp: DesignComp,
       index: number,
@@ -232,7 +244,7 @@ const CompNode = defineComponent({
       return (
         <div class={[nodeStyle, "flex"]}>
           <Image src={thumbnail} size={240} />
-          <span class="flex-1 w-0 text-12px whitespace-nowrap overflow-hidden overflow-ellipsis pr-6px">
+          <span class="flex-1 w-0 text-12px whitespace-nowrap overflow-hidden overflow-ellipsis pr-6px leading-normal">
             {title}
           </span>
           <span class="actions space-x-2px whitespace-nowrap transition">

src/modules/editor/controllers/ScreenshotCtrl/index.ts

@@ -4,26 +4,28 @@ import { Matrix } from "../SelectCtrl/matrix";
 export class ScreenshotCtrl {
   async snap(options: { element: HTMLElement; ratio?: number }): Promise<Blob> {
     const dom = options.element;
+    const domW = dom.clientWidth;
     // const transferEl = document.querySelector(".transfer") as
     //   | HTMLElement
     //   | undefined;
     // if (transferEl) {
     //   transferEl.style.display = "none";
     // }
-    
+
     //清除dom上的
-    const transform =  dom.style.transform
+    const transform = dom.style.transform;
     if (transform) {
-       const m =  Matrix.createFromMatrixStr(transform);
-        m.tx = 0;
-        m.ty = 0;
-        dom.style.transform = m.getMatrixStr();
+      const m = Matrix.createFromMatrixStr(transform);
+      m.tx = 0;
+      m.ty = 0;
+      dom.style.transform = m.getMatrixStr();
     }
 
-    
     if (options.ratio) {
-
-      const result = await domtoimage.toJpeg(dom);
+      const result = await domtoimage.toJpeg(dom, {
+        style: { overflow: "hidden" },
+        width: domW,
+      });
       const img = await new Promise<HTMLImageElement>((resolve) => {
         const image = new Image();
         image.src = result;
@@ -63,7 +65,7 @@ export class ScreenshotCtrl {
         });
       });
     } else {
-      console.log( "xxxxxxxxxxxxxxxxxx" ,  dom );
+      // console.log("xxxxxxxxxxxxxxxxxx", dom);
       const w = await domtoimage.toBlob(dom);
       if (transform) {
         dom.style.transform = transform;

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

@@ -28,10 +28,10 @@ export const editActions = EditorModule.action({
       const temImg: any = await this.helper.loadImage(url);
       const ratio = temImg.width / temImg.height;
       const W = temImg.width > maxW ? maxW : temImg.width;
-      const H = W / ratio;     
+      const H = W / ratio;
       await this.actions.clickCompToDesign("Image", (comp) => {
         comp.setSize(W, H);
-        comp.value.url = url;       
+        comp.value.url = url;
       });
     } catch (e) {
       queenApi.hideLoading();
@@ -59,7 +59,7 @@ export const editActions = EditorModule.action({
       const currComp = createObj({ compKey: "Image" }, false);
       currComp.setSize(W, H);
       currComp.value.url = url;
-      page.designData.compMap[currComp.id] = currComp;     
+      page.designData.compMap[currComp.id] = currComp;
       // page.setCompPid(currComp.id, page.currStreamCardId);
       const childIds = [...page.currStreamCard.children.default];
       childIds.push(currComp.id);
@@ -845,10 +845,10 @@ export const editActions = EditorModule.action({
   async resetCompName(comp: DesignComp) {
     const res = await queenApi.showInput({
       title: "重命名",
-      defaultValue: comp.title,
+      defaultValue: comp.layout.cusName,
     });
     if (!res) return;
-    comp.title = res;
+    comp.layout.cusName = res;
   },
   // 清除组件变换
   // clearCompTransform(comp: DesignComp) {
@@ -1124,6 +1124,7 @@ export const editActions = EditorModule.action({
 
     const sels = gizmo.selected.map((item) => item.comp.id);
     const id = this.controls.compUICtrl.createCompId("Group");
+    page.setCompPid(id, page.currStreamCardId);
     const comp = this.helper.findComp(id) as DesignComp;
     const chils = this.controls.pageCtrl.currStreamCard.children.default || [];
     const newChilds: any = [];

src/modules/editor/objects/DesignTemp/DesignComp.ts

@@ -32,6 +32,7 @@ export class DesignCompObj<T extends {[key:string]: any}> extends Events {
       color: ""
     }),
     anim: "",
+    cusName: ""
   });
   children = RxValue.create({
     default:  [] as string[]

src/pages/share/h5/Promotion.tsx

@@ -2,7 +2,6 @@ import Empty from "@/components/Empty";
 import { initEditor } from "@/modules/editor";
 import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
 import { initResource } from "@/modules/resource";
-import { cx } from "@linaria/core";
 import { isPc } from "@queenjs/utils";
 import { defineComponent, provide } from "vue";
 
@@ -70,9 +69,14 @@ export default defineComponent(() => {
     if (!isPcDesign && isPc()) {
       const pegeH = getPageH();
       return (
-        <div class="h-100vh flex items-center justify-center">
-          <div class="scrollbar !overflow-x-hidden" style={{ height: pegeH }}>
-            <editor.components.Preview />
+        <div class="h-100vh ">
+          <div
+            class="flex items-center justify-center h-full"
+            style={{ minHeight: pegeH }}
+          >
+            <div class="scrollbar !overflow-x-hidden" style={{ height: pegeH }}>
+              <editor.components.Preview />
+            </div>
           </div>
         </div>
       );