bus

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

@@ -46,6 +46,7 @@ export const CompTreeMain = defineComponent({
             return {
               key: comp.id,
               title:
+                comp.layout.cusName ||
                 comp.title ||
                 compUICtrl.state.components.get(comp.compKey)?.name ||
                 "未命名",
@@ -243,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/module/actions/edit.tsx

@@ -23,70 +23,68 @@ const ctrlState = {
 };
 
 export const editActions = EditorModule.action({
-  
   async addImageToDesign(url) {
-      queenApi.showLoading("图片加载中")
-      const maxW = this.controls.screenCtrl.getCurrScreenWidth();
-      try {
-        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;
-        await this.actions.clickCompToDesign("Image", (comp)=>{
-
-          comp.setSize(W,  H );
-          comp.value.url = url;
-        })
-      } catch(e) {
-        queenApi.hideLoading();
-        queenApi.messageError("图片加载失败");
-        return
-      }
+    queenApi.showLoading("图片加载中");
+    const maxW = this.controls.screenCtrl.getCurrScreenWidth();
+    try {
+      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;
+      await this.actions.clickCompToDesign("Image", (comp) => {
+        comp.setSize(W, H);
+        comp.value.url = url;
+      });
+    } catch (e) {
       queenApi.hideLoading();
+      queenApi.messageError("图片加载失败");
+      return;
+    }
+    queenApi.hideLoading();
   },
-  async dragAddImageToDesign(e:MouseEvent, url) {
-      const page = this.controls.pageCtrl;
-      if (!page.currStreamCardId) {
-          queenApi.messageError("请先选中一个卡片");
-          return;
-      }
+  async dragAddImageToDesign(e: MouseEvent, url) {
+    const page = this.controls.pageCtrl;
+    if (!page.currStreamCardId) {
+      queenApi.messageError("请先选中一个卡片");
+      return;
+    }
 
-      queenApi.showLoading("图片加载中")
-      const maxW = this.controls.screenCtrl.getCurrScreenWidth();
-      try {
-        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 currCard = page.currStreamCard;
-        const currComp = createObj({compKey:"Image"}, false);
-        currComp.setSize(W,  H );
-        currComp.value.url = url;
-        page.designData.compMap[currComp.id] = currComp;
-        // page.setCompPid(currComp.id, page.currStreamCardId);
-        const childIds = [...page.currStreamCard.children.default];
-        childIds.push(currComp.id);
-        currCard.children.setDefault(childIds);
-        this.controls.editorCtrl.clickPickComp(currComp.id);
-        this.actions.centerLastComp(e);
-      } catch(e) {
-        queenApi.hideLoading();
-        queenApi.messageError("图片加载失败");
-        return
-      }
+    queenApi.showLoading("图片加载中");
+    const maxW = this.controls.screenCtrl.getCurrScreenWidth();
+    try {
+      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 currCard = page.currStreamCard;
+      const currComp = createObj({ compKey: "Image" }, false);
+      currComp.setSize(W, H);
+      currComp.value.url = url;
+      page.designData.compMap[currComp.id] = currComp;
+      // page.setCompPid(currComp.id, page.currStreamCardId);
+      const childIds = [...page.currStreamCard.children.default];
+      childIds.push(currComp.id);
+      currCard.children.setDefault(childIds);
+      this.controls.editorCtrl.clickPickComp(currComp.id);
+      this.actions.centerLastComp(e);
+    } catch (e) {
       queenApi.hideLoading();
-      history.submit();
+      queenApi.messageError("图片加载失败");
+      return;
+    }
+    queenApi.hideLoading();
+    history.submit();
   },
 
-  async dragAddVideoToDesign(e:MouseEvent, url) {
+  async dragAddVideoToDesign(e: MouseEvent, url) {
     const page = this.controls.pageCtrl;
     if (!page.currStreamCardId) {
-        queenApi.messageError("请先选中一个卡片");
-        return;
+      queenApi.messageError("请先选中一个卡片");
+      return;
     }
 
-    queenApi.showLoading("视频加载中")
+    queenApi.showLoading("视频加载中");
     // const maxW = this.controls.screenCtrl.getCurrScreenWidth();
     try {
       // const temImg :any = await this.helper.loadImage(url);
@@ -95,7 +93,7 @@ export const editActions = EditorModule.action({
       // const H = W / ratio;
 
       const currCard = page.currStreamCard;
-      const currComp = createObj({compKey:"Video"}, false);
+      const currComp = createObj({ compKey: "Video" }, false);
       // currComp.setSize(W,  H );
       currComp.value.url = url;
       page.designData.compMap[currComp.id] = currComp;
@@ -105,22 +103,26 @@ export const editActions = EditorModule.action({
       currCard.children.setDefault(childIds);
       this.controls.editorCtrl.clickPickComp(currComp.id);
       this.actions.centerLastComp(e);
-    } catch(e) {
+    } catch (e) {
       queenApi.hideLoading();
       queenApi.messageError("图片加载失败");
-      return
+      return;
     }
     queenApi.hideLoading();
     history.submit();
-},
+  },
 
   // 通过点击添加组件到画布
-  async clickCompToDesign(compKey: ICompKeys, cb?: (comp: DesignComp) => void, history=true) {
+  async clickCompToDesign(
+    compKey: ICompKeys,
+    cb?: (comp: DesignComp) => void,
+    history = true
+  ) {
     const page = this.controls.pageCtrl;
 
     if (!page.currStreamCardId) {
-        queenApi.messageError("请先选中一个卡片");
-        return;
+      queenApi.messageError("请先选中一个卡片");
+      return;
     }
 
     let yOffset = 0;
@@ -133,15 +135,15 @@ export const editActions = EditorModule.action({
     }
     let currCard = page.currStreamCard;
 
-    const currComp = createObj({compKey}, false);
+    const currComp = createObj({ compKey }, false);
     // debugger
     //@ts-ignore
-    const objs :any[] = currComp.children.objs || [];
+    const objs: any[] = currComp.children.objs || [];
     if (objs.length > 0) {
-      objs.forEach(o=>{
+      objs.forEach((o) => {
         page.designData.compMap[o.id] = o;
         page.setCompPid(o.id, currComp.id);
-      })
+      });
     }
     page.designData.compMap[currComp.id] = currComp;
     page.setCompPid(currComp.id, currCard.id);
@@ -180,7 +182,6 @@ export const editActions = EditorModule.action({
 
   // 通过点击添加组件到画布
   async clickCompUserToDesign(id: string, isSys) {
-
     const page = this.controls.pageCtrl;
 
     if (!page.currStreamCardId) {
@@ -199,11 +200,10 @@ export const editActions = EditorModule.action({
 
     page.setCompPid(compId, currCard.id);
 
-
     this.actions.initAddedCompPos(this.store.currCompId, compId, currCard.id);
 
     this.controls.editorCtrl.clickPickComp(compId);
-    
+
     history.submit();
   },
 
@@ -241,7 +241,6 @@ export const editActions = EditorModule.action({
 
   // 通过拖拽添加组件到画布
   async dragCompToDesign(event: MouseEvent, compKey: string, data: any) {
-    
     const page = this.controls.pageCtrl;
 
     if (compKey == "CompCard") {
@@ -257,13 +256,12 @@ export const editActions = EditorModule.action({
       page.setCompPid(compId, currCard.id);
 
       this.controls.editorCtrl.clickPickComp(compId);
-    
     } else {
       await this.actions.addCompToDesign(compKey as any);
     }
 
     setTimeout(() => {
-      this.actions.centerLastComp(event)
+      this.actions.centerLastComp(event);
       const currComp = this.controls.pageCtrl.currComp;
       if (compKey == "Text") {
         this.actions.textFocus(currComp.id, true);
@@ -273,10 +271,10 @@ export const editActions = EditorModule.action({
     }, 100);
   },
 
-  centerLastComp(event:MouseEvent) {
+  centerLastComp(event: MouseEvent) {
     const currCardDom = this.controls.pageCtrl.currStreamCard.$el;
     const cardPoints = this.helper.getPointOffsetWith(event, currCardDom);
-    const page  = this.controls.pageCtrl;
+    const page = this.controls.pageCtrl;
     let selCtrl = this.controls.selectCtrl;
 
     const w = this.controls.screenCtrl.getCurrScreenWidth();
@@ -299,7 +297,7 @@ export const editActions = EditorModule.action({
       return;
     }
     if (compKey == "Container") {
-      const  compId = page.insertDesignCard(index);
+      const compId = page.insertDesignCard(index);
       this.controls.editorCtrl.clickPickComp(compId);
       return;
     }
@@ -324,7 +322,7 @@ export const editActions = EditorModule.action({
     ctrlState.selected = [];
     const children = page.currStreamCard.children.default || [];
     const gizmo = this.controls.selectCtrl.gizmo;
-    const selected = gizmo.selected.map(item=>item.comp.id);
+    const selected = gizmo.selected.map((item) => item.comp.id);
 
     children.forEach((c) => {
       if (selected.indexOf(c) > -1) {
@@ -359,14 +357,14 @@ export const editActions = EditorModule.action({
 
     const w = this.controls.screenCtrl.getCurrScreenWidth();
     if (this.selected.length == 1) {
-      const size :any = layout.size.slice(0);
+      const size: any = layout.size.slice(0);
       let isSame = false;
       if (isWidth) {
-        isSame = w == size[0]
+        isSame = w == size[0];
         size[0] = w;
-      }
-      else {
-        isSame = size[1] == this.controls.pageCtrl.currStreamCard.layout.size[1]
+      } else {
+        isSame =
+          size[1] == this.controls.pageCtrl.currStreamCard.layout.size[1];
         size[1] = this.controls.pageCtrl.currStreamCard.layout.size[1];
       }
       if (!isSame) {
@@ -375,7 +373,7 @@ export const editActions = EditorModule.action({
       }
       return;
     }
-    
+
     const anchorBox = this.helper.findComp(gizmo.state.lastId);
     if (!anchorBox) return;
 
@@ -413,14 +411,13 @@ export const editActions = EditorModule.action({
     ctrlState.screenId = this.controls.screenCtrl.currScreenId;
     ctrlState.cardId = page.currStreamCardId;
     ctrlState.type = 3;
-
   },
   ctrlx() {
     //console.log("ctrlv ", this.store.selected);
     //console.log("ctrlv ", this.store.selected);
-    const page =  this.controls.pageCtrl;
+    const page = this.controls.pageCtrl;
     const gizmo = this.controls.selectCtrl.gizmo;
-    const selected = gizmo.selected.map(item=>item.comp.id);
+    const selected = gizmo.selected.map((item) => item.comp.id);
 
     //保持图层顺序
     ctrlState.selected = [];
@@ -477,51 +474,52 @@ export const editActions = EditorModule.action({
     this.controls.selectCtrl.gizmo.selectObjs(news);
 
     //剪辑
- 
-      if (ctrlState.type == 2) {
-        //剪辑删除原来的组件
-        const card = this.helper.findComp(ctrlState.cardId) as DesignComp;
-        const childs = card.children.default?.slice(0) || [];
-        ctrlState.selected.forEach((s) => {
-          let i = childs.indexOf(s);
-          if (i != -1) {
-            childs.splice(i, 1);
-          }
-        });
-        card.children.default = childs;
-        this.helper.extendStreamCard(ctrlState.cardId);
-        ctrlState.selected = [];
-      }
 
-      //获取当前选中的内容
-      if (ctrlState.cardId != ctrl.currStreamCardId) {
-        //跨卡片拷贝
-        let pox = this.helper.getCardNextPosY(
-          ctrl.currStreamCardId,
-          ctrlState.selWidth
-        );
-        this.controls.selectCtrl.translate(0, pox.y - ctrlState.selY);
-        return;
-      }
+    if (ctrlState.type == 2) {
+      //剪辑删除原来的组件
+      const card = this.helper.findComp(ctrlState.cardId) as DesignComp;
+      const childs = card.children.default?.slice(0) || [];
+      ctrlState.selected.forEach((s) => {
+        let i = childs.indexOf(s);
+        if (i != -1) {
+          childs.splice(i, 1);
+        }
+      });
+      card.children.default = childs;
+      this.helper.extendStreamCard(ctrlState.cardId);
+      ctrlState.selected = [];
+    }
 
-      if (ctrlState.screenId == this.controls.screenCtrl.currScreenId) {
-        this.controls.selectCtrl.translate(20, 20);
-      }
+    //获取当前选中的内容
+    if (ctrlState.cardId != ctrl.currStreamCardId) {
+      //跨卡片拷贝
+      let pox = this.helper.getCardNextPosY(
+        ctrl.currStreamCardId,
+        ctrlState.selWidth
+      );
+      this.controls.selectCtrl.translate(0, pox.y - ctrlState.selY);
+      return;
+    }
 
-      history.submit();
+    if (ctrlState.screenId == this.controls.screenCtrl.currScreenId) {
+      this.controls.selectCtrl.translate(20, 20);
+    }
+
+    history.submit();
   },
 
   addComps(ids: string[]) {
-    const childs = this.controls.pageCtrl.currStreamCard.children.default.slice(0);
+    const childs =
+      this.controls.pageCtrl.currStreamCard.children.default.slice(0);
     childs.push(...ids);
     this.controls.pageCtrl.currStreamCard.children.setDefault(childs);
   },
 
   ctrlAndA() {
-    const childrens = (this.controls.pageCtrl.currStreamCard.children.default || []).slice(
-      0
-    );
-    this.controls.selectCtrl.gizmo.selectObjs(childrens)
+    const childrens = (
+      this.controls.pageCtrl.currStreamCard.children.default || []
+    ).slice(0);
+    this.controls.selectCtrl.gizmo.selectObjs(childrens);
   },
 
   // 删除组件
@@ -536,9 +534,9 @@ export const editActions = EditorModule.action({
   },
 
   // 删除组件
-  removeComp(compId: string, submitHistory= false) {
+  removeComp(compId: string, submitHistory = false) {
     const ctrl = this.controls.pageCtrl;
-    
+
     const paths = this.helper.getCompTrees(compId);
     if (!paths[2]) {
       if (this.helper.isStreamCard(compId)) {
@@ -578,7 +576,7 @@ export const editActions = EditorModule.action({
     let nextCard = ctrl.currStreamCardId;
     if (compId == ctrl.currStreamCardId) {
       const i = ctrl.streamCardIds.indexOf(compId);
-      nextCard =ctrl.streamCardIds[i + 1];
+      nextCard = ctrl.streamCardIds[i + 1];
       if (!nextCard) {
         nextCard = ctrl.streamCardIds[i - 1];
       }
@@ -688,7 +686,7 @@ export const editActions = EditorModule.action({
       }
 
       queenApi.showLoading("保存中");
-      
+
       await this.controls.uploader.uploadBlobs(ctrl.designData);
       if (this.store.isWk) {
         await this.https[this.store.isEditPage ? "saveWkDesign" : "saveComp"](
@@ -710,7 +708,7 @@ export const editActions = EditorModule.action({
   // 截屏保存封面
   async updateThumbnailByScreenshot(autoSave?: boolean) {
     const ctrl = this.controls.pageCtrl;
-    
+
     try {
       const rootComp = ctrl.rootPage;
       if (!rootComp) return;
@@ -743,7 +741,6 @@ export const editActions = EditorModule.action({
     comp.layout.transformMatrix = transformMatrix;
   },
 
-
   // 设置组件显示隐藏
   setCompVisible(comp: DesignComp) {
     comp.layout.visible = comp.layout.visible === false ? true : false;
@@ -752,10 +749,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) {
@@ -768,8 +765,7 @@ export const editActions = EditorModule.action({
   },
   // 设置组件层级
   setCompLayer(comp: DesignComp, offset: number) {
-
-    const currCard = this.controls.pageCtrl.currStreamCard
+    const currCard = this.controls.pageCtrl.currStreamCard;
     const cards = currCard.children.default.slice(0);
 
     const i = cards.indexOf(comp.id);
@@ -795,7 +791,6 @@ export const editActions = EditorModule.action({
   },
   //横向对齐
   setAlignX(flag: 0 | 1 | 2 | 3, isGroup = false) {
-    
     console.log("alignX");
 
     const selectCtrl = this.controls.selectCtrl;
@@ -805,7 +800,6 @@ export const editActions = EditorModule.action({
     const gizmo = selectCtrl.gizmo;
 
     if (gizmo.selected.length == 1 || isGroup) {
-    
       const box = gizmo.getBound();
 
       switch (flag) {
@@ -921,7 +915,6 @@ export const editActions = EditorModule.action({
     const anchorBox = this.helper.findComp(gizmo.state.lastId);
     if (!anchorBox) return;
 
-
     const anchor = new CompObject(anchorBox);
     const anchorRect = anchor.getBox();
 
@@ -965,7 +958,7 @@ export const editActions = EditorModule.action({
       });
 
       gizmo.parent.updateTransform();
-      history.submit()
+      history.submit();
       return;
     }
 
@@ -1002,7 +995,7 @@ export const editActions = EditorModule.action({
     const gizmo = this.controls.selectCtrl.gizmo;
 
     const parentMtrx = gizmo.parent.worldTransform.clone();
-    gizmo.selectObjs([]);//取消选择
+    gizmo.selectObjs([]); //取消选择
 
     childs.forEach((o) => {
       const obj = this.helper.findComp(o) as DesignComp;
@@ -1020,9 +1013,9 @@ export const editActions = EditorModule.action({
     );
     parentChilds.push(...childs);
     const page = this.controls.pageCtrl;
-    childs.forEach(item=>{
+    childs.forEach((item) => {
       page.setCompPid(item, card.id);
-    })
+    });
     card.children.setDefault(parentChilds);
     this.controls.editorCtrl.clickPickComp(childs[0]);
 
@@ -1030,11 +1023,10 @@ export const editActions = EditorModule.action({
   },
 
   createGroupComps() {
- 
     const gizmo = this.controls.selectCtrl.gizmo;
     const page = this.controls.pageCtrl;
 
-    const sels = gizmo.selected.map(item=>item.comp.id);
+    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;
@@ -1050,14 +1042,14 @@ export const editActions = EditorModule.action({
     newChilds.push(id);
 
     //更新节点的新位置
-    const newMatrixMap:any= {};
+    const newMatrixMap: any = {};
     gizmo.parent.children.forEach((obj) => {
       const cobj = obj as CompObject;
       const comp = cobj.comp;
       newMatrixMap[comp.id] = cobj.localTransform.getMatrixStr();
     });
     page.currStreamCard.children.setDefault(newChilds);
- 
+
     //再添加新的节点
     comp.layout.setSize([
       this.helper.pxToDesignSize(gizmo.width),
@@ -1067,10 +1059,10 @@ export const editActions = EditorModule.action({
 
     this.controls.selectCtrl.gizmo.selectObjs([]);
 
-    groupChilds.forEach((c)=> {
-        const comp = this.helper.findComp(c) as DesignComp;
-        comp.layout.setTransformMatrix(newMatrixMap[c]);
-        page.setCompPid(c, id);
+    groupChilds.forEach((c) => {
+      const comp = this.helper.findComp(c) as DesignComp;
+      comp.layout.setTransformMatrix(newMatrixMap[c]);
+      page.setCompPid(c, id);
     });
     comp.children.setDefault(groupChilds);
 
@@ -1114,11 +1106,11 @@ export const editActions = EditorModule.action({
       content: "要替换正在编辑的内容？",
     });
     if (!res) return;
-    
+
     const frameData = await this.https.getDesignDetail(record._id, {
       isSys: true,
     });
-    const { compMap, content, desc, thumbnail, title , _id} = frameData.result;
+    const { compMap, content, desc, thumbnail, title, _id } = frameData.result;
 
     const designData = {
       _id: ctrl.designData._id,

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/h5/share/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>
       );