update

src/modules/editor/components/CompUI/defines/createAttrsForm.tsx

@@ -3,19 +3,16 @@ import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
 import { defineComponent } from "vue";
 import { any } from "vue-types";
-import { GroupNumber } from "../formItems/GroupNumber";
+import { Size } from "../formItems/Size";
 import Slider from "../formItems/Slider";
 import { createColorOpts } from "./formOpts/createColorOpts";
-import { Switch } from "ant-design-vue";
+import { Divider } from "ant-design-vue";
 
 export const layoutColumns: ColumnItem[] = [
   {
-    label: "尺寸",
+    // label: "尺寸",
     dataIndex: "layout.size",
-    component: GroupNumber,
-    props: {
-      labels: ["宽度", "高度"],
-    },
+    component: Size,
   },
   // {
   //   label: "对齐",
@@ -232,6 +229,7 @@ export function createAttrsForm(valueColumns: ColumnItem[]) {
                   columns={valueColumns}
                   onChange={changeVal}
                 />
+                <Divider></Divider>
               </>
             ) : null}
             <div>布局</div>
@@ -242,6 +240,7 @@ export function createAttrsForm(valueColumns: ColumnItem[]) {
             />
             {["Web3D", "Video", "Map"].includes(component.compKey) ? null : (
               <>
+                <Divider></Divider>
                 <div>背景</div>
                 <FormUI
                   data={component}
@@ -252,6 +251,7 @@ export function createAttrsForm(valueColumns: ColumnItem[]) {
             )}
             {["Text", "Image", "Map"].includes(component.compKey) ? (
               <>
+                <Divider></Divider>
                 <div>边框</div>
                 <FormUI
                   data={component}

src/modules/editor/components/CompUI/formItems/Size.tsx

@@ -0,0 +1,56 @@
+import { InputNumber, Select } from "ant-design-vue";
+import { defineComponent, reactive } from "vue";
+import { any } from "vue-types";
+
+const labels = ["宽度", "高度"];
+const selectOptions = [
+  { value: "px", label: "像素" },
+  { value: "%", label: "百分比" },
+];
+
+export const Size = defineComponent({
+  props: {
+    value: any<number[]>().def([]),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const state = reactive({
+      unit: "px",
+    });
+
+    function changeVal(index: number, v: any) {
+      // const { value } = props;
+      // value[index] = parseInt(v) || 0;
+      // emit("change", value);
+    }
+
+    return () => {
+      let values = [...props.value];
+
+      return (
+        <div class="flex space-x-10px">
+          {values.map((value, i) => (
+            <div key={i}>
+              <div class="mb-5px">{labels[i]}</div>
+              <InputNumber
+                controls={false}
+                value={value}
+                onChange={changeVal.bind(null, i)}
+              />
+            </div>
+          ))}
+          <div>
+            <div class="mb-5px">单位</div>
+            <Select
+              value={state.unit}
+              class="min-w-85px"
+              options={selectOptions}
+              // @ts-ignore
+              onChange={(v) => (state.unit = v)}
+            ></Select>
+          </div>
+        </div>
+      );
+    };
+  },
+});

src/modules/editor/components/TipIcons/index.ts

@@ -45,6 +45,10 @@ import { FontSize } from "./TipIcon";
 
 
 export const TipIcons = {
+  Rename: createTipIcon({
+    icons: [IconEdit],
+    tips: ["重命名"],
+  }),
   QueenService: createTipIcon({
     icons: [IconQueen],
     tips: ["3dqueen服务"],

src/modules/editor/components/Viewport/Slider/SliderLeft/Templates/PreviewTplModal.tsx

@@ -18,7 +18,7 @@ export default defineUI({
         <div class="flex">
           <div class="w-660px h-660px py-20px bg-[#1F1F1F]">
             <iframe
-              class="w-375px h-full mx-140px"
+              class="w-375px h-620px mx-140px"
               src={shareLink}
               frameborder="0"
               scrolling="no"

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

@@ -12,8 +12,7 @@ import { Matrix } from "../../controllers/SelectCtrl/matrix";
 import { nanoid } from "nanoid";
 import { string } from "vue-types";
 
-
-let ctrlcselected:string[] = [];
+let ctrlcselected: string[] = [];
 
 export const editActions = EditorModule.action({
   pickComp(compId: string, selected = true) {
@@ -118,30 +117,30 @@ export const editActions = EditorModule.action({
     this.controls.cropCtrl.close();
   },
 
- // 通过点击添加组件到画布
- async clickCompUserToDesign(id: string, isSys) {
-  if (!this.store.currStreamCardId) {
+  // 通过点击添加组件到画布
+  async clickCompUserToDesign(id: string, isSys) {
+    if (!this.store.currStreamCardId) {
       queenApi.messageError("请先选中一个卡片");
       return;
-  }
-  const { result } = await this.https.getCompDetail(id, isSys);
-
-  //先创建卡片
-  // const currCardIndex =  this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
-  // const cardId = await this.store.insertDesignContent(
-  //   "Container",
-  //   currCardIndex
-  // );
-  //  const currCard = this.helper.findComp(cardId) as DesignComp;
-    const currCard = this.store.currStreamCard;  
-    const comp =  this.store.addUserCard(result);
+    }
+    const { result } = await this.https.getCompDetail(id, isSys);
+
+    //先创建卡片
+    // const currCardIndex =  this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
+    // const cardId = await this.store.insertDesignContent(
+    //   "Container",
+    //   currCardIndex
+    // );
+    //  const currCard = this.helper.findComp(cardId) as DesignComp;
+    const currCard = this.store.currStreamCard;
+    const comp = this.store.addUserCard(result);
 
     const compId = comp.id;
     const childIds = [...(currCard.children.default || [])];
     childIds.push(compId);
     currCard.children.default = childIds;
 
-    this.store.setCompPid(compId,  currCard.id);
+    this.store.setCompPid(compId, currCard.id);
 
     const addedComp = this.store.compMap[compId];
     addedComp.layout.position = "absolute";
@@ -151,21 +150,16 @@ export const editActions = EditorModule.action({
     this.actions.pickComp(compId);
   },
 
-
-  initAddedCompPos(currId: string, addedId:string, cardId:string) {
-    
+  initAddedCompPos(currId: string, addedId: string, cardId: string) {
     let yOffset = 0;
-    if (
-      currId != this.store.currStreamCardId &&
-      currId != "root"
-    ) {
-      const paths = this.helper.getCompTrees(currId)
+    if (currId != this.store.currStreamCardId && currId != "root") {
+      const paths = this.helper.getCompTrees(currId);
       const bound = this.helper.getCardCompBound(paths[2].id);
       yOffset = bound.y + bound.h;
     }
 
     const currComp = this.helper.findComp(addedId) as DesignComp;
- 
+
     //添加组件到当前选中的组件下面
     let xOffset = this.helper.designSizeToPx(
       375 - (currComp.layout.size?.[0] || 750) / 2
@@ -187,60 +181,58 @@ export const editActions = EditorModule.action({
     this.controls.cropCtrl.close();
   },
 
-
   // 通过拖拽添加组件到画布
-  async dragCompToDesign(event: MouseEvent, compKey: string, data:any) {
-
+  async dragCompToDesign(event: MouseEvent, compKey: string, data: any) {
     const currCardDom = this.store.currStreamCard.$el;
 
     if (compKey == "CompCard") {
-        const { result } = await this.https.getCompDetail(data.id, data.isSys);
-        const comp =  this.store.addUserCard(result);
+      const { result } = await this.https.getCompDetail(data.id, data.isSys);
+      const comp = this.store.addUserCard(result);
 
-        const currCard = this.store.currStreamCard;
-        const compId = comp.id;
-        const childIds = [...(currCard.children.default || [])];
-        childIds.push(compId);
-        currCard.children.default = childIds;
-    
-        const addedComp = this.store.compMap[compId];
-        addedComp.layout.position = "absolute";
-        this.store.setCompPid(compId,  currCard.id);
+      const currCard = this.store.currStreamCard;
+      const compId = comp.id;
+      const childIds = [...(currCard.children.default || [])];
+      childIds.push(compId);
+      currCard.children.default = childIds;
 
-        this.actions.pickComp(compId);
+      const addedComp = this.store.compMap[compId];
+      addedComp.layout.position = "absolute";
+      this.store.setCompPid(compId, currCard.id);
 
+      this.actions.pickComp(compId);
     } else {
-        await this.actions.addCompToDesign(compKey as any);
+      await this.actions.addCompToDesign(compKey as any);
     }
 
-
     setTimeout(() => {
-      const cardPoints = this.helper.getPointOffsetWith(
-        event,
-        currCardDom
-      );
+      const cardPoints = this.helper.getPointOffsetWith(event, currCardDom);
       const { currComp } = this.store;
       let selCtrl = this.controls.selectCtrl;
       selCtrl.translate(
-        this.helper.designSizeToPx(375 - (currComp.layout.size?.[0] || 750) / 2),
+        this.helper.designSizeToPx(
+          375 - (currComp.layout.size?.[0] || 750) / 2
+        ),
         cardPoints.y
       );
-  
+
       this.helper.extendStreamCard(this.store.currStreamCardId);
-  
+
       if (compKey == "Text") {
         this.actions.selectObjs([]);
         this.actions.textFocus(currComp.id, true);
       }
       this.controls.cropCtrl.close();
-      
     }, 100);
   },
 
   async selectObjs(ids: string[], last = "") {
     this.store.selected = ids;
     this.store.selectId = ids.length > 1 ? Date.now() + "" : "";
-    this.store.lastSelected = last ? last : ( ids.length > 0 ? ids[ids.length-1] : "") 
+    this.store.lastSelected = last
+      ? last
+      : ids.length > 0
+      ? ids[ids.length - 1]
+      : "";
   },
 
   // 添加组件到画布
@@ -313,22 +305,21 @@ export const editActions = EditorModule.action({
 
   ctrlc() {
     //  console.log("contrc ", this.store.selected);
-     ctrlcselected = this.store.selected.slice(0);
+    ctrlcselected = this.store.selected.slice(0);
   },
   copyLastSelected() {
     if (this.store.currCompId && this.store.currCompId != "root") {
-      ctrlcselected = [this.store.currCompId]
+      ctrlcselected = [this.store.currCompId];
     }
   },
 
-  setSameSize(isWidth:boolean) {
-   
+  setSameSize(isWidth: boolean) {
     const selectCtrl = this.controls.selectCtrl;
     const objc = selectCtrl.objContainer as ObjsContainer;
-    if (this.store.selected.length == 1 ) {
+    if (this.store.selected.length == 1) {
       this.store.currComp.layout.size[0] = 750;
       objc.updateSize();
-  
+
       selectCtrl.upgateGizmoStyle();
       return;
     }
@@ -336,25 +327,23 @@ export const editActions = EditorModule.action({
     const anchorBox = this.helper.findComp(this.store.lastSelected);
     if (!anchorBox) return;
 
- 
-   
-    objc.parent.children.forEach((c)=>{
+    objc.parent.children.forEach((c) => {
       const child = c as CompObject;
       const r = child.getBox();
-      if (isWidth)  child.comp.layout.size[0] = anchorBox.layout.size[0];
+      if (isWidth) child.comp.layout.size[0] = anchorBox.layout.size[0];
       else child.comp.layout.size[1] = anchorBox.layout.size[1];
-    })
+    });
 
     objc.updateSize();
-    
+
     selectCtrl.upgateGizmoStyle();
   },
 
   toogleGroup() {
-     if (this.store.selected.length > 1) {
-        this.actions.createGroupComps();
-        return;
-     }
+    if (this.store.selected.length > 1) {
+      this.actions.createGroupComps();
+      return;
+    }
     if (this.store.selected.length == 1) {
       const c = this.helper.findComp(this.store.selected[0]) as DesignComp;
       if (c.compKey == "Group") {
@@ -366,49 +355,47 @@ export const editActions = EditorModule.action({
   ctrlv() {
     console.log("ctrlv ", this.store.selected);
     if (ctrlcselected.length < 1) return;
-    
-    const news :string[] = [];
-
-     const deepCopy = (c:DesignComp) => {
-        const childs = c.children.default || [];
-        if (childs.length > 0 ) {
-          childs.forEach((id, index)=>{
-            const cp = this.helper.findComp(id) as DesignComp;
-            const cp1 = cloneDeep(cp);
-            cp1.id = nanoid();
-            this.store.compMap[cp1.id] = cp1;
-            this.store.setCompPid(cp1.id, c.id);
-            childs[index] = cp1.id;
-            
-            deepCopy(cp);
-          })
-        } 
-     }
-
-
-    ctrlcselected.forEach(c=>{
-       const cp = this.helper.findComp(c) as DesignComp;
-       const cp1 = cloneDeep(cp);
-       cp1.id = nanoid();
-       news.push(cp1.id);
-
-       this.store.compMap[cp1.id] = cp1;
-       this.store.setCompPid(cp1.id, this.store.currStreamCardId);
-
-       deepCopy(cp);
-    })
+
+    const news: string[] = [];
+
+    const deepCopy = (c: DesignComp) => {
+      const childs = c.children.default || [];
+      if (childs.length > 0) {
+        childs.forEach((id, index) => {
+          const cp = this.helper.findComp(id) as DesignComp;
+          const cp1 = cloneDeep(cp);
+          cp1.id = nanoid();
+          this.store.compMap[cp1.id] = cp1;
+          this.store.setCompPid(cp1.id, c.id);
+          childs[index] = cp1.id;
+
+          deepCopy(cp);
+        });
+      }
+    };
+
+    ctrlcselected.forEach((c) => {
+      const cp = this.helper.findComp(c) as DesignComp;
+      const cp1 = cloneDeep(cp);
+      cp1.id = nanoid();
+      news.push(cp1.id);
+
+      this.store.compMap[cp1.id] = cp1;
+      this.store.setCompPid(cp1.id, this.store.currStreamCardId);
+
+      deepCopy(cp);
+    });
 
     this.actions.addComps(news);
 
     this.actions.selectObjs(news);
 
     setTimeout(() => {
-        this.controls.selectCtrl.translate(20, 20);
+      this.controls.selectCtrl.translate(20, 20);
     }, 100);
-
   },
 
-  addComps(ids:string[]) {
+  addComps(ids: string[]) {
     const childs = this.store.currStreamCard.children.default?.slice(0) || [];
     childs.push(...ids);
     this.store.currStreamCard.children.default = childs;
@@ -426,7 +413,6 @@ export const editActions = EditorModule.action({
 
   // 删除组件
   removeComp(compId: string) {
-
     const paths = this.helper.getCompTrees(compId);
     if (!paths[2]) {
       if (this.helper.isStreamCard(compId)) {
@@ -484,24 +470,25 @@ export const editActions = EditorModule.action({
   // 保存容器为组件
   async saveAsComp(comp: DesignComp) {
     try {
-
       const CompSave = this.components.CompSave as any;
       let title = "";
       let type = "comp";
 
       try {
-          const ret:any = await queenApi.dialog(<CompSave />, {width:"300px",  title: "保存到我的"});
+        const ret: any = await queenApi.dialog(<CompSave />, {
+          width: "300px",
+          title: "保存到我的",
+        });
         if (!ret) {
           return;
         }
         title = ret.title;
         type = ret.type;
-
       } catch (error) {
         return;
       }
 
-      console.log( title, type);
+      console.log(title, type);
 
       // 组件封面
       const blob = await new ScreenshotCtrl().snap({
@@ -515,7 +502,6 @@ export const editActions = EditorModule.action({
       //   )?.name,
       // });
 
-    
       const data = {
         title,
         type,
@@ -527,7 +513,9 @@ export const editActions = EditorModule.action({
       data.compMap.root.id = "root";
 
       //清除平移距离
-      const mtx = Matrix.createFromMatrixStr(data.compMap.root.layout.transformMatrix as string);
+      const mtx = Matrix.createFromMatrixStr(
+        data.compMap.root.layout.transformMatrix as string
+      );
       mtx.tx = 0;
       mtx.ty = 0;
       data.compMap.root.layout.transformMatrix = mtx.getMatrixStr();
@@ -630,6 +618,16 @@ export const editActions = EditorModule.action({
   setCompVisible(comp: DesignComp) {
     comp.layout.visible = comp.layout.visible === false ? true : false;
   },
+  // 组件重命名
+  async resetCompName(comp: DesignComp) {
+    console.log("comp.title: ", comp);
+    const res = await queenApi.showInput({
+      title: "重命名",
+      defaultValue: comp.title,
+    });
+    if (!res) return;
+    comp.title = res;
+  },
   // 清除组件变换
   clearCompTransform(comp: DesignComp) {
     comp.layout.margin = "";
@@ -648,28 +646,26 @@ export const editActions = EditorModule.action({
   },
   //横向对齐
   setAlignX(flag: 0 | 1 | 2 | 3) {
-    console.log("alignX")
+    console.log("alignX");
     const selectCtrl = this.controls.selectCtrl;
 
     if (this.store.selected.length == 1) {
-        const objc = selectCtrl.objContainer as ObjsContainer;  
-        const box = objc.getBound();
-        switch(flag) {
-            case 0:
-              selectCtrl.translate(-box.left ,  0);
-              break;
-            case 1:
-              selectCtrl.translate(-(box.center.x - 187.5) ,  0);
-              break;
-            case 2:
-              selectCtrl.translate(375 - box.right,  0);
-              break;
-        }
-        return;
+      const objc = selectCtrl.objContainer as ObjsContainer;
+      const box = objc.getBound();
+      switch (flag) {
+        case 0:
+          selectCtrl.translate(-box.left, 0);
+          break;
+        case 1:
+          selectCtrl.translate(-(box.center.x - 187.5), 0);
+          break;
+        case 2:
+          selectCtrl.translate(375 - box.right, 0);
+          break;
+      }
+      return;
     }
 
-    
-
     const anchorBox = this.helper.findComp(this.store.lastSelected);
     if (!anchorBox) return;
 
@@ -677,60 +673,65 @@ export const editActions = EditorModule.action({
     const anchorRect = anchor.getBox();
 
     const objc = selectCtrl.objContainer as ObjsContainer;
-    let min = 10000, max = -10000;
+    let min = 10000,
+      max = -10000;
     let step = 0;
-    if (flag == 3)  {//Y轴均匀排布
-      objc.parent.children.forEach((c)=>{
+    if (flag == 3) {
+      //Y轴均匀排布
+      objc.parent.children.forEach((c) => {
         const child = c as CompObject;
         const r = child.getBox();
         const x = r.x + r.w / 2.0;
-        if (x <min)  min = x;
-        if (x >max ) max = x;
-      })
+        if (x < min) min = x;
+        if (x > max) max = x;
+      });
       const stepCount = objc.parent.children.length;
 
       step = (max - min) / (stepCount - 1);
 
-      const stepIndexMap:any = {};
+      const stepIndexMap: any = {};
 
-      objc.parent.children.forEach((c)=>{
+      objc.parent.children.forEach((c) => {
         const child = c as CompObject;
         const r = child.getBox();
         const x = r.x + r.w / 2.0;
 
         let minIndex = -1;
         let minV = 10000;
-        for (let i=0; i<stepCount; i++) {
-           const ty = i*step + min;
-           if ( Math.abs(x - ty) < minV && !stepIndexMap[i]) {
-              minV = Math.abs(x - ty);
-              minIndex = i;
-           }
+        for (let i = 0; i < stepCount; i++) {
+          const ty = i * step + min;
+          if (Math.abs(x - ty) < minV && !stepIndexMap[i]) {
+            minV = Math.abs(x - ty);
+            minIndex = i;
+          }
         }
         stepIndexMap[minIndex] = true;
-        child.translate((minIndex*step + min) - x, 0);
-      })
+        child.translate(minIndex * step + min - x, 0);
+      });
       objc.updateSize();
       selectCtrl.upgateGizmoStyle();
       return;
     }
 
-   objc.parent.children.forEach((c)=>{
-        const child = c as CompObject;
-        if (child.comp.id  == this.store.lastSelected) return;
-        const r = child.getBox();
-        switch(flag) {
-          case 0:
-            child.translate(anchorRect.x -r.x,  0);
-            break;
-          case 1:
-            child.translate(anchorRect.x + anchorRect.w / 2.0 - (r.x + r.w/2.0),  0);
-            break;
-          case 2:
-            child.translate(anchorRect.x + anchorRect.w - (r.x + r.w),  0);
-            break;
-        }
-    })
+    objc.parent.children.forEach((c) => {
+      const child = c as CompObject;
+      if (child.comp.id == this.store.lastSelected) return;
+      const r = child.getBox();
+      switch (flag) {
+        case 0:
+          child.translate(anchorRect.x - r.x, 0);
+          break;
+        case 1:
+          child.translate(
+            anchorRect.x + anchorRect.w / 2.0 - (r.x + r.w / 2.0),
+            0
+          );
+          break;
+        case 2:
+          child.translate(anchorRect.x + anchorRect.w - (r.x + r.w), 0);
+          break;
+      }
+    });
     objc.updateSize();
     selectCtrl.upgateGizmoStyle();
   },
@@ -738,24 +739,24 @@ export const editActions = EditorModule.action({
   setAlignY(flag: 0 | 1 | 2 | 3) {
     const selectCtrl = this.controls.selectCtrl;
     if (this.store.selected.length == 1) {
-        const objc = selectCtrl.objContainer as ObjsContainer;
-        const box = objc.getBound();
-
-        const card = new CompObject(this.store.currStreamCard);
-        const cardBox = card.getBox();
-
-        switch(flag) {
-            case 0:
-              selectCtrl.translate(0,  -box.top);
-              break;
-            case 1:
-              selectCtrl.translate(0 ,  -(box.center.y - cardBox.h / 2.0));
-              break;
-            case 2:
-              selectCtrl.translate(0,  cardBox.h - box.bottom);
-              break;
-        }
-        return;
+      const objc = selectCtrl.objContainer as ObjsContainer;
+      const box = objc.getBound();
+
+      const card = new CompObject(this.store.currStreamCard);
+      const cardBox = card.getBox();
+
+      switch (flag) {
+        case 0:
+          selectCtrl.translate(0, -box.top);
+          break;
+        case 1:
+          selectCtrl.translate(0, -(box.center.y - cardBox.h / 2.0));
+          break;
+        case 2:
+          selectCtrl.translate(0, cardBox.h - box.bottom);
+          break;
+      }
+      return;
     }
 
     const anchorBox = this.helper.findComp(this.store.lastSelected);
@@ -770,58 +771,62 @@ export const editActions = EditorModule.action({
     let max = -10000;
     let step = 0;
 
-    if (flag == 3)  {//Y轴均匀排布
-      objc.parent.children.forEach((c)=>{
+    if (flag == 3) {
+      //Y轴均匀排布
+      objc.parent.children.forEach((c) => {
         const child = c as CompObject;
         const r = child.getBox();
         const y = r.y + r.h / 2.0;
-        if (y <min)  min = y;
-        if (y >max ) max = y;
-      })
+        if (y < min) min = y;
+        if (y > max) max = y;
+      });
       const stepCount = objc.parent.children.length;
 
       step = (max - min) / (stepCount - 1);
 
-      const stepIndexMap:any = {};
+      const stepIndexMap: any = {};
 
-      objc.parent.children.forEach((c)=>{
+      objc.parent.children.forEach((c) => {
         const child = c as CompObject;
         const r = child.getBox();
         const y = r.y + r.h / 2.0;
 
         let minIndex = -1;
         let minV = 10000;
-        for (let i=0; i<stepCount; i++) {
-           const ty = i*step + min;
-           if ( Math.abs(y - ty) < minV && !stepIndexMap[i]) {
-              minV = Math.abs(y - ty);
-              minIndex = i;
-           }
+        for (let i = 0; i < stepCount; i++) {
+          const ty = i * step + min;
+          if (Math.abs(y - ty) < minV && !stepIndexMap[i]) {
+            minV = Math.abs(y - ty);
+            minIndex = i;
+          }
         }
         stepIndexMap[minIndex] = true;
-        child.translate(0,  (minIndex*step + min) - y);
-      })
+        child.translate(0, minIndex * step + min - y);
+      });
       objc.updateSize();
       selectCtrl.upgateGizmoStyle();
       return;
     }
-  
-   objc.parent.children.forEach((c)=>{
-        const child = c as CompObject;
-        if (child.comp.id  == this.store.lastSelected) return;
-        const r = child.getBox();
-        switch(flag) {
-          case 0:
-            child.translate(0,  anchorRect.y -r.y);
-            break;
-          case 1:
-            child.translate(0, anchorRect.y + anchorRect.h / 2.0 - (r.y + r.h /2.0));
-            break;
-          case 2:
-            child.translate(0, anchorRect.y + anchorRect.h - (r.y + r.h));
-            break;
-        }
-    })
+
+    objc.parent.children.forEach((c) => {
+      const child = c as CompObject;
+      if (child.comp.id == this.store.lastSelected) return;
+      const r = child.getBox();
+      switch (flag) {
+        case 0:
+          child.translate(0, anchorRect.y - r.y);
+          break;
+        case 1:
+          child.translate(
+            0,
+            anchorRect.y + anchorRect.h / 2.0 - (r.y + r.h / 2.0)
+          );
+          break;
+        case 2:
+          child.translate(0, anchorRect.y + anchorRect.h - (r.y + r.h));
+          break;
+      }
+    });
     objc.updateSize();
     selectCtrl.upgateGizmoStyle();
   },
@@ -859,15 +864,19 @@ export const editActions = EditorModule.action({
     const childs = groupComp.children.default || [];
     const objC = this.controls.selectCtrl.objContainer as ObjsContainer;
     const parentMtrx = objC.parent.worldTransform.clone();
-    childs.forEach(o=>{
+    childs.forEach((o) => {
       const obj = this.helper.findComp(o) as DesignComp;
-      const mxt = Matrix.createFromMatrixStr(obj.layout.transformMatrix as string);
+      const mxt = Matrix.createFromMatrixStr(
+        obj.layout.transformMatrix as string
+      );
       mxt.prepend(parentMtrx);
       obj.layout.transformMatrix = mxt.getMatrixStr();
-    })
-    const paths = this.helper.getCompTrees(groupComp.id)
+    });
+    const paths = this.helper.getCompTrees(groupComp.id);
     const card = paths[1];
-    const parentChilds = (card.children.default || []).filter(item=>item != groupComp.id);
+    const parentChilds = (card.children.default || []).filter(
+      (item) => item != groupComp.id
+    );
     parentChilds.push(...childs);
     card.children.default = parentChilds;
 
@@ -884,32 +893,35 @@ export const editActions = EditorModule.action({
     //先删除现有的节点
     const sels = this.store.selected.slice(0);
     const chils = this.store.currStreamCard.children.default || [];
-    const newChilds  :any = [];
-    const groupChilds :any = [];
-    chils.forEach(c=>{
+    const newChilds: any = [];
+    const groupChilds: any = [];
+    chils.forEach((c) => {
       if (sels.indexOf(c) == -1) newChilds.push(c);
       else {
         groupChilds.push(c);
       }
-    })
+    });
 
     newChilds.push(id);
     this.store.currStreamCard.children.default = newChilds;
-    
+
     //更新节点的新位置
-    Objc.parent.children.forEach(obj=>{
+    Objc.parent.children.forEach((obj) => {
       const cobj = obj as CompObject;
       const comp = cobj.comp;
       comp.layout.transformMatrix = cobj.localTransform.getMatrixStr();
-    })
-     
+    });
+
     //再添加新的节点
-    comp.layout.size = [this.helper.pxToDesignSize(Objc.width), this.helper.pxToDesignSize(Objc.height)];
+    comp.layout.size = [
+      this.helper.pxToDesignSize(Objc.width),
+      this.helper.pxToDesignSize(Objc.height),
+    ];
     comp.layout.transformMatrix = selectCtrl.transferStyle.matrix;
-    
+
     comp.children.default = groupChilds;
 
-    this.actions.selectObjs([])
+    this.actions.selectObjs([]);
     setTimeout(() => {
       this.actions.pickComp(comp.id);
     }, 0);

src/modules/editor/objects/Toolbars/TreeToolbars.ts

@@ -5,6 +5,7 @@ export const TreeToolbars: ICompToolbars = {
     // toolbars.position.setVisible(function (comp) {
     //   return comp.isPostioned();
     // }),
+    toolbars.rename,
     toolbars.saveAsComp,
     toolbars.visible,
     toolbars.delete,

src/modules/editor/objects/Toolbars/default.ts

@@ -46,7 +46,7 @@ export function createToolbars<T extends Record<string, ItemParams>>(obj: T) {
 }
 
 export const multiSelToolbar = createToolbars({
-    // 删除
+  // 删除
   delete: {
     component: TipIcons.Delete,
     getVisible() {
@@ -86,9 +86,16 @@ export const multiSelToolbar = createToolbars({
   //     // this.actions.setCompLayer(comp, -1);
   //   },
   // },
-})
+});
 
 export const toolbars = createToolbars({
+  // 重命名
+  rename: {
+    component: TipIcons.Rename,
+    onClick(comp) {
+      this.actions.resetCompName(comp);
+    },
+  },
   // 显示/隐藏
   visible: {
     component: TipIcons.Visible,
@@ -138,14 +145,14 @@ export const toolbars = createToolbars({
       this.actions.setCompPosition(comp);
     },
   },
-   // 编辑模式
+  // 编辑模式
   editor: {
     component: TipIcons.Edit,
     getVisible(comp) {
-      return false;// comp.compKey == "Polygon" && !this.store.compEditMode 
+      return false; // comp.compKey == "Polygon" && !this.store.compEditMode
     },
     onClick(comp) {
-       console.log("clicked edit");
+      console.log("clicked edit");
       // this.actions.setCompPosition(comp);
       this.store.compEditMode = true;
       this.store.compEditReslut = -1;
@@ -155,11 +162,10 @@ export const toolbars = createToolbars({
   ok: {
     component: TipIcons.Right,
     getVisible(comp) {
-  
-      return this.store.compEditMode 
+      return this.store.compEditMode;
     },
     onClick(comp) {
-       console.log("clicked ok ");
+      console.log("clicked ok ");
       this.store.compEditReslut = 1;
       this.store.compEditMode = false;
     },
@@ -168,7 +174,7 @@ export const toolbars = createToolbars({
   cancel: {
     component: TipIcons.Cross,
     getVisible(comp) {
-      return this.store.compEditMode 
+      return this.store.compEditMode;
     },
     onClick(comp) {
       console.log("clicked cancel ");
@@ -189,7 +195,7 @@ export const toolbars = createToolbars({
   // 清除变换
   clearTransform: {
     component: TipIcons.ClearTransform,
-    getVisible: (comp) =>  !!comp && comp.isTransformed(),
+    getVisible: (comp) => !!comp && comp.isTransformed(),
     onClick(comp) {
       this.actions.clearCompTransform(comp);
     },
@@ -197,7 +203,7 @@ export const toolbars = createToolbars({
   // 定位图层上移
   layerUp: {
     component: TipIcons.LayerUp,
-    getVisible: (comp) =>true,
+    getVisible: (comp) => true,
     onClick(comp) {
       this.actions.setCompLayer(comp, 1);
     },
@@ -236,15 +242,20 @@ export const toolbars = createToolbars({
   cancelGroup: {
     component: TipIcons.CancelGroup,
     getVisible(comp) {
-      return !!comp && comp.compKey == "Group" && this.store.selected.length == 1 && this.helper.isStreamCardChild(comp.id);
+      return (
+        !!comp &&
+        comp.compKey == "Group" &&
+        this.store.selected.length == 1 &&
+        this.helper.isStreamCardChild(comp.id)
+      );
     },
     onClick(comp) {
       if (!comp) return;
       this.actions.cancelGroupComps(comp);
     },
   },
-   // 打组
-   createGroup: {
+  // 打组
+  createGroup: {
     component: TipIcons.CreateGroup,
     getVisible() {
       return this.store.selected.length > 1;
@@ -259,7 +270,7 @@ export const toolbars = createToolbars({
   imageCropper: {
     component: TipIcons.Cropper,
     getVisible(comp) {
-      return this.store.currComp.compKey == 'Image';
+      return this.store.currComp.compKey == "Image";
     },
     onClick(comp) {
       this.controls.cropCtrl.croppImage(this.store.currComp.id);

src/pages/h5/share/Promotion.tsx

@@ -41,7 +41,7 @@ export default defineComponent(() => {
 
   return () => (
     <div class="flex items-center justify-center h-100vh bg-gray-100">
-      <div class={isPc() ? `h-668px scrollbar` : `h-full overflow-x-hidden`}>
+      <div class={isPc() ? `h-620px scrollbar overflow-x-hidden` : `h-full overflow-x-hidden`}>
         <editor.components.Preview />
       </div>
     </div>