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

src/modules/editor/components/CompUI/basicUI/Page/PageForm.tsx

@@ -32,7 +32,7 @@ const styleColumns = (muisc?: string): ColumnItem[] => {
     //   component: Select,
     //   props: {
     //     class: "w-full flex-1 overflow-hidden",
-    //     options: [{ label: "长页", value: "long" }, { label: "翻页", value: "short" }],
+    //     options: [{ label: "H5长页", value: "long" }, { label: "翻页", value: "short" }],
     //   },
     // },
     {

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

@@ -26,9 +26,10 @@ export const Component = defineComponent({
         return e.value == compMusic;
       });
       const style = helper.createStyle(layout || { size: [750] }, comp);
-      if (comp.value.pageMode == "short") {
-        style.height = "100%";
-      }
+      if (comp.value.pageMode == "short" && store.isDisplay) {
+        style.height = "100vh";
+        style.width = "100vw";
+      } 
 
       let contextStyle:any = null;
       if (store.rootPage.value.pageMode == "short" && !store.isEditMode) {

src/modules/editor/components/CompUI/basicUI/Page/screen.tsx

@@ -16,6 +16,9 @@ export default defineComponent({
                             const s = {useFor: v, pageMode: ctrl.state.screen.pageMode, pageSizeType: ctrl.state.screen.pageSizeType}
                             ctrl.saveScreenPage();
                             ctrl.state.setScreen(s as any);
+                            setTimeout(() => {
+                                editor.controls.editorCtrl.autoInScreen();
+                            }, 0);
 
                         }} class = "flex-1 overflow-hidden" options={[{ label: "手机", value: "mobile" }, { label: "PC", value: "pc" }]}  />
                     </div>
@@ -28,9 +31,11 @@ export default defineComponent({
                                 s.pageSizeType = "normal";
                             }
                             ctrl.state.setScreen(s as any);
-                            editor.controls.editorCtrl.autoInScreen();
+                            setTimeout(() => {
+                                editor.controls.editorCtrl.autoInScreen();
+                            }, 0);
 
-                        }} value={ctrl.state.screen.pageMode} class = "flex-1 overflow-hidden" options={[{ label: "长页", value: "long" }, { label: "翻页", value: "short" }]}  />
+                        }} value={ctrl.state.screen.pageMode} class = "flex-1 overflow-hidden" options={[{ label: "H5长页", value: "long" }, { label: "翻页", value: "short" }]}  />
                     </div>
                     {
                         ctrl.state.screen.pageMode == "short" && <div  class="flex items-center mt-5px">

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

@@ -96,7 +96,7 @@ export const View = defineComponent({
           ) as any;
           return (
             <div
-              class="absolute w-full h-150px"
+              class="absolute w-full h-150px pointer-events-none"
               style={{
                 bottom: style.height,
               }}
@@ -108,7 +108,7 @@ export const View = defineComponent({
                   style={{ position: "absolute", bottom: "0" }}
                 />
               </div> */}
-              <div class={maskStyleUp}></div>
+              {/* <div class={maskStyleUp}></div> */}
               <div class={[divideStyle, "bottom"]}>
                 {/* <span class="tip">上一页分割线</span> */}
               </div>
@@ -132,12 +132,12 @@ export const View = defineComponent({
             c.compKey
           ) as any;
           return (
-            <div class="relative">
+            <div class="relative pointer-events-none">
               {/* <div class="h-150px pointer-events-none overflow-hidden">
                 <AfterComp.Component compId={c.id} key={c.id} />
               </div> */}
 
-              <div class={maskStyle}></div>
+              {/* <div class={maskStyle}></div> */}
               <div class={[divideStyle, "top"]}>
                 {/* <span class="tip">下一页分割线</span> */}
               </div>

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

@@ -313,7 +313,7 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
                 />
               </>
             )}
-            {["Text", "Image", "Map"].includes(component.compKey) ? (
+            {["Text", "Image", "Map", "Rectage"].includes(component.compKey) ? (
               <>
                 <Divider></Divider>
                 <div>

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

@@ -48,7 +48,7 @@ import { FontSize } from "./TipIcon";
 export const TipIcons = {
   Move: createTipIcon({
     icons: [IconMove],
-    tips: ["移动模式"],
+    tips: ["平移"],
   }),
   Rename: createTipIcon({
     icons: [IconEdit],

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

@@ -1,7 +1,7 @@
 import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { css } from "@linaria/core";
 import { defineUI } from "queenjs";
-import { onUnmounted, reactive, ref } from "vue";
+import { onUnmounted, reactive, ref , nextTick} from "vue";
 import { Container, Draggable } from "vue-dndrop";
 import { useEditor } from "../../..";
 import { HotKeyCtrl } from "../../../controllers/HotKeyCtrl";
@@ -46,7 +46,7 @@ export default defineUI({
           actions.onViewReady(
             pageRoot.$el,
             refs.canvas.value,
-            refs.parent.value,
+            refs.parent.value
           );
           helper.initEditLayer(editLayerRef.value);
         }, 100);
@@ -54,129 +54,173 @@ export default defineUI({
 
       return (
         <div class="flex flex-1 relative">
-       
-            <div class={["scrollbar", cardList]}>
-                <div>
-                <Container  onDrop={(e: any) => {
-                            if (e.payload) {
-                              actions.addCompToDesign(e.payload, e.addedIndex);
-                            } else {
-                              actions.moveComp(e.removedIndex, e.addedIndex);
-                            }
-                  }} >
-                {
-                  store.streamCardIds.map(item=>{
-                    const c = helper.findComp(item) as DesignComp;
-                    const Comp = controls.compUICtrl.state.components.get(c.compKey)
+          <div class={["scrollbar", cardList]}>
+            <div>
+              <Container
+                onDrop={(e: any) => {
+                  if (e.payload) {
+                    actions.addCompToDesign(e.payload, e.addedIndex);
+                  } else {
+                    actions.moveComp(e.removedIndex, e.addedIndex);
+                  }
+                }}
+              >
+                {store.streamCardIds.map((item) => {
+                  const c = helper.findComp(item) as DesignComp;
+                  const Comp =
+                    controls.compUICtrl.state.components.get(c.compKey)
                       ?.Component || NotFoundComp;
-                  
-                    const r = c.layout.size[1] / c.layout.size[0];
-                    let h = (80 * r);
-                    if (h>80) h = 80;
-                    if (h <40 ) h = 40;
 
-                    const style:any = {height:h+ "px"}
-                    if (store.currStreamCardId == item) {
-                      style.border = "3px solid #EA9E40"
-                    }
-                  return (<Draggable>
-                      <div key={item + controls.screenCtrl.currScreenId} class={["card-item relative transition-opacity hover:opacity-80"]} style={style} onClick={()=>{
-                         actions.selectObjs([]);
-                         actions.pickComp(item, false);
-                         controls.editorCtrl.autoInScreen();
-                      }}>
-                          {
-                              store.streamCardIds.length > 1 && <IconDelete onClick={()=>{
+                  const r = c.layout.size[1] / c.layout.size[0];
+                  let h = 80 * r;
+                  if (h > 80) h = 80;
+                  if (h < 40) h = 40;
+
+                  const style: any = { height: h + "px" };
+                  if (store.currStreamCardId == item) {
+                    style.border = "3px solid #EA9E40";
+                  }
+                  return (
+                    <Draggable>
+                      <div
+                        key={item + controls.screenCtrl.currScreenId}
+                        class={[
+                          "card-item relative transition-opacity hover:opacity-80",
+                        ]}
+                        style={style}
+                        onClick={() => {
+                          actions.selectObjs([]);
+                          actions.pickComp(item, false);
+
+                          nextTick(()=>{
+                            controls.editorCtrl.autoInScreen();
+                          })
+                        }}
+                      >
+                        {store.streamCardIds.length > 1 && (
+                          <IconDelete
+                            onClick={() => {
                               actions.removeStreamCard(item);
-                            }} class="deleteitem absolute right-4px top-4px text-light-50" />
-                          }
-                          <div class="pointer-events-none">
-                              <Comp compId={c.id} style={{transformOrigin:"0 0", pointerEvent:"none", transform: `scale(${80.0 / helper.designSizeToPx(c.layout.size[0])})`}} />
-                          </div>
+                            }}
+                            class="deleteitem absolute right-4px top-4px text-light-50"
+                          />
+                        )}
+                        <div class="pointer-events-none">
+                          <Comp
+                            compId={c.id}
+                            style={{
+                              transformOrigin: "0 0",
+                              pointerEvent: "none",
+                              transform: `scale(${
+                                80.0 / helper.designSizeToPx(c.layout.size[0])
+                              })`,
+                            }}
+                          />
+                        </div>
                       </div>
-                    </Draggable>)
-                  })
-                }
-                <img class="mt-15px cursor-pointer" onClick={()=>{
-                      const index = store.streamCardIds.length;
-                      actions.addCompToDesign("Container", index);
-                      setTimeout(() => {
-                        controls.editorCtrl.autoInScreen();
-                      }, 200);
-                }} src={require("@/assets/imgs/add.svg")} alt="" />
-                </Container>
-              </div>
+                    </Draggable>
+                  );
+                })}
+                <img
+                  class="mt-15px cursor-pointer"
+                  onClick={() => {
+                    const index = store.streamCardIds.length;
+                    actions.addCompToDesign("Container", index);
+                    setTimeout(() => {
+                      controls.editorCtrl.autoInScreen();
+                    }, 200);
+                  }}
+                  src={require("@/assets/imgs/add.svg")}
+                  alt=""
+                />
+              </Container>
+            </div>
           </div>
-        <div ref={refs.parent} class={["absolute", viewportStyle]}>
-          <div ref={refs.editor}>
-            <div ref={refs.page}  class={"select-none " + contentCls}>
-              <CompUI.Page.Component compId={pageRoot.id}>
-                {{
-                  Container(children: any) {
-                    return (
-                      <>
-                        <Container behaiver="drop-zone"
-                        should-accept-drop={(
-                          sourceContainerOptions: any,
-                          payload: any
-                        ) => {
-                          if (sourceContainerOptions.groupName != "canvas") {
-                            return false;
-                          }
+          <div ref={refs.parent} class={["absolute", viewportStyle]}>
+            <div ref={refs.editor}>
+              <div ref={refs.page} class={"select-none " + contentCls}>
+                <CompUI.Page.Component compId={pageRoot.id}>
+                  {{
+                    Container(children: any) {
+                      return (
+                        <>
+                          <Container
+                            behaiver="drop-zone"
+                            should-accept-drop={(
+                              sourceContainerOptions: any,
+                              payload: any
+                            ) => {
+                              if (
+                                sourceContainerOptions.groupName != "canvas"
+                              ) {
+                                return false;
+                              }
 
-                          console.log("payload===>", "xxx", payload);
-                          
-                          if (typeof payload == "string") {
-                            controls.dragAddCtrl.updateCompKey(payload);
-                          } else {
-                            controls.dragAddCtrl.updateCompKey(payload.type);
-                            controls.dragAddCtrl.updateCompData(payload.data);
-                          }
-                          return false;
-                        }}
+                              console.log("payload===>", "xxx", payload);
 
-                        onDrop={(e: any) => {
-                            debugger;
-                            if (e.payload) {
-                              console.log("xx a")
-                              actions.addCompToDesign(e.payload, e.addedIndex);
-                            } 
-                          }}>
+                              if (typeof payload == "string") {
+                                controls.dragAddCtrl.updateCompKey(payload);
+                              } else {
+                                controls.dragAddCtrl.updateCompKey(
+                                  payload.type
+                                );
+                                controls.dragAddCtrl.updateCompData(
+                                  payload.data
+                                );
+                              }
+                              return false;
+                            }}
+                            onDrop={(e: any) => {
+                              debugger;
+                              if (e.payload) {
+                                console.log("xx a");
+                                actions.addCompToDesign(
+                                  e.payload,
+                                  e.addedIndex
+                                );
+                              }
+                            }}
+                          >
                             {children}
-                        </Container>
-                        {!state.draging && <SelectTransfer />}
-                      </>
-                    );
-                  },
-                  CompItem(comp: DesignComp) {
-                    const Comp =
-                      controls.compUICtrl.state.components.get(comp.compKey)
-                        ?.Component || NotFoundComp;
-                    return (
-                        <Comp compId={comp.id}  key={comp.id + controls.screenCtrl.currScreenId} showMask={true} />
-                    );
-                  },
-                }}
-              </CompUI.Page.Component>
+                          </Container>
+                          {!state.draging && <SelectTransfer />}
+                        </>
+                      );
+                    },
+                    CompItem(comp: DesignComp) {
+                      const Comp =
+                        controls.compUICtrl.state.components.get(comp.compKey)
+                          ?.Component || NotFoundComp;
+                      return (
+                        <Comp
+                          compId={comp.id}
+                          key={comp.id + controls.screenCtrl.currScreenId}
+                          showMask={true}
+                        />
+                      );
+                    },
+                  }}
+                </CompUI.Page.Component>
+              </div>
+              <div class={editLayerStyle} ref={editLayerRef}></div>
             </div>
-            <div class={editLayerStyle} ref={editLayerRef}></div>
-          </div>
-          <canvas class={selectCls} ref={refs.canvas} />
-          <div class={meatureStyle}>    
+            <canvas class={selectCls} ref={refs.canvas} />
+
+            {/* <div class={meatureStyle}>    
             <div class="ruler top" id="rulerTop"></div>
             <div class="ruler left" id="rulerLeft"></div>
-            {/* <div class="ruler right" id="rulerRight"></div>
-            <div class="ruler bottom" id="rulerBottom"></div> */}
+            <div class="ruler right" id="rulerRight"></div>
+            <div class="ruler bottom" id="rulerBottom"></div> 
+          </div> */}
           </div>
         </div>
-        </div>
       );
     };
   },
 });
 
 const contentCls = css`
-   position: absolute;
+  position: absolute;
   .dndrop-container.vertical > .dndrop-draggable-wrapper {
     overflow: unset;
   }
@@ -284,7 +328,6 @@ const editLayerStyle = css`
 `;
 
 const cardList = css`
-  
   width: 120px;
   height: 100%;
   background: #262626;
@@ -301,7 +344,7 @@ const cardList = css`
     margin-top: 15px;
     width: 80px;
     height: 80px;
-    background: #1F1F1F;
+    background: #1f1f1f;
     border-radius: 4px 4px 4px 4px;
     cursor: pointer;
     overflow: hidden;
@@ -315,16 +358,16 @@ const cardList = css`
     &:hover {
       .deleteitem {
         opacity: 1;
-        background: rgba(0,0,0,0.8);
+        background: rgba(0, 0, 0, 0.8);
       }
     }
   }
 `;
 
-const viewportStyle =  css`
+const viewportStyle = css`
   width: calc(100% - 120px);
   height: 100%;
   left: 120px;
   top: 0px;
   overflow: hidden;
-`
+`;

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

@@ -15,8 +15,8 @@ export default defineUI({
           ?.Form || Empty;
       return (
         <div class="flex flex-col h-1/1">
-          <div class="p-16px border-bottom !border-2px">设置栏</div>
-          <div class="flex-1 p-16px scrollbar">
+          <div class="p-16px px-8px border-bottom !border-2px">设置栏</div>
+          <div class="flex-1 p-16px px-8px scrollbar">
             <Form component={currComp} />
           </div>
           {/* <div class="p-16px border-bottom !border-2px border-top">组件树</div>

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

@@ -75,16 +75,17 @@ export default defineUI({
             <div
               class={cx(group, "flex items-center p-4px rounded bg-[#262626]")}
             >
-              <IconFit class="text-light-50 text-36px cursor-pointer rounded transition hover:bg-dark-800" 
-               onClick={() => editorCtrl.autoInScreen()}
+              <IconFit
+                class="text-light-50 text-36px cursor-pointer rounded transition hover:bg-dark-800"
+                onClick={() => editorCtrl.autoInScreen()}
               />
               <IconReduce
                 class="text-light-50 text-36px cursor-pointer rounded transition hover:bg-dark-800"
-                onClick={() => editorCtrl.setScale(scale - 0.1)}
+                onClick={() => editorCtrl.clickChangeScale(scale - 0.1)}
               />
               <IconPlus
                 class="text-light-50 text-36px cursor-pointer rounded transition hover:bg-dark-800"
-                onClick={() => editorCtrl.setScale(scale + 0.1)}
+                onClick={() => editorCtrl.clickChangeScale(scale + 0.1)}
               />
               <InputNumber
                 min={0.5}
@@ -96,11 +97,11 @@ export default defineUI({
                 formatter={(v: any) => Math.floor(v * 100) + "%"}
                 onPressEnter={(e: any) => {
                   const newScale = e.target.value.split("%")[0] / 100;
-                  editorCtrl.setScale(newScale);
+                  editorCtrl.clickChangeScale(newScale);
                 }}
               />
             </div>
-            <TipIcons.Move
+            {/* <TipIcons.Move
               class={cx(
                 "p-10px rounded text-18px cursor-pointer transition hover:opacity-70",
                 editorCtrl.state.moveMode
@@ -108,7 +109,7 @@ export default defineUI({
                   : "!text-light-50 bg-[#262626] !hover:(bg-[#262626])"
               )}
               onClick={() => editorCtrl.moveEditor()}
-            />
+            /> */}
             <TipIcons.QueenService
               class={bottomBtnStyles}
               onClick={() => {
@@ -138,6 +139,7 @@ const group = css`
   }
   .inficon {
     margin-right: -36px;
+    line-height: 0;
   }
   .ant-input-number-input {
     height: 36px;

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

@@ -24,7 +24,7 @@ export default defineUI({
             <slots.Toolbar />
             <slots.Content />
           </div>
-          <slots.SliderRight class="w-360px bg-component border-left !border-2px" />
+          <slots.SliderRight class="w-300px bg-component border-left !border-2px" />
         </div>
       </div>
     );

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

@@ -1,169 +1,207 @@
-import { Effect, ModuleControl } from "queenjs";
+import { ModuleControl } from "queenjs";
+import { onMounted, ref } from "vue";
 import { EditorModule } from "../../module";
-import { DesignComp } from "../../objects/DesignTemp/DesignComp";
-import { Matrix } from "../SelectCtrl/matrix";
-import {ref, onMounted, nextTick} from "vue";
 import { RxValue } from "../ReactCtrl/rxValue";
-import { DisplayObject } from "../SelectCtrl/objects/displayObject";
 import { ObjsContainer } from "../SelectCtrl/ObjsContainer";
-import { settingsStore } from "@queenjs-modules/queditor/module/stores/settings";
-
 
 const KeySpace = 32;
 
 export class EditorCtrl extends ModuleControl<EditorModule> {
-
-    parent: HTMLElement | undefined = undefined;
-
-
-    state = RxValue.create({
-        width: 1500,
-        height: 1000,
-        pos: {
-            x: 0, y:0
-        },
-        
-        scale:  1,
-        keyCode: -1,
-        moveMode: false,
-        page: {w: 375, h: 650}
-    })
-
-    doms:any = {};
+  state = RxValue.create({
+    width: 1500,
+    height: 1000,
+    pos: {
+      x: 0,
+      y: 0,
+    },
+    mouse: {
+      x: 0,
+      y: 0,
+    },
+    scale: 1,
+    keyCode: -1,
+    moveMode: false,
+    page: { w: 375, h: 650 },
+  });
+
+  doms: any = {};
 
   useEditor() {
-     const EditorRef = ref<HTMLElement>();
-     const ParentRef = ref<HTMLElement>();
-     const PageRef = ref<HTMLElement>();
-     const CanvasRef = ref<HTMLElement>();
-     let inited = false;
-
-     const init = () => {    
-        if (!EditorRef.value || !CanvasRef.value || !ParentRef.value  || inited) return;
-        
-        clearInterval(refInteral.value) 
-        refInteral.value = null;
-        inited = true;
-    
-        console.log("xxxxxxxx=>" , ParentRef.value, PageRef.value);
-        EditorRef.value.style.width = this.state.width + "px";
-        EditorRef.value.style.height = this.state.height + "px";
-        EditorRef.value.style.position = "absolute";
-        // EditorRef.value.style.backgroundColor = "greenyellow";
-        EditorRef.value.style.left = "0";
-        EditorRef.value.style.top = "0";
-
-        CanvasRef.value.style.width = "100%"
-        CanvasRef.value.style.height = "100%"
-        EditorRef.value.style.position = "absolute";
-
-        this.initEditorEvent(EditorRef.value, ParentRef.value as any);
-     }
-
-     const refInteral = ref();
-     onMounted(()=>{
-       refInteral.value = setInterval(init, 100);
-     })
-
-     this.doms = {editor:EditorRef, parent: ParentRef, page:PageRef, canvas: CanvasRef};
-     return this.doms;
+    const EditorRef = ref<HTMLElement>();
+    const ParentRef = ref<HTMLElement>();
+    const PageRef = ref<HTMLElement>();
+    const CanvasRef = ref<HTMLElement>();
+    let inited = false;
+
+    const init = () => {
+      if (!EditorRef.value || !CanvasRef.value || !ParentRef.value || inited)
+        return;
+
+      clearInterval(refInteral.value);
+      refInteral.value = null;
+      inited = true;
+
+      console.log("xxxxxxxx=>", ParentRef.value, PageRef.value);
+      EditorRef.value.style.width = this.state.width + "px";
+      EditorRef.value.style.height = this.state.height + "px";
+      EditorRef.value.style.position = "absolute";
+      // EditorRef.value.style.backgroundColor = "greenyellow";
+      EditorRef.value.style.left = "0";
+      EditorRef.value.style.top = "0";
+      CanvasRef.value.style.width = "100%";
+      CanvasRef.value.style.height = "100%";
+      EditorRef.value.style.position = "absolute";
+     setTimeout(() => {
+        this.autoInScreen();
+     }, 200);
+      this.initEditorEvent(EditorRef.value, ParentRef.value as any);
+    };
+
+    const refInteral = ref();
+    onMounted(() => {
+      refInteral.value = setInterval(init, 100);
+    });
+
+    this.doms = {
+      editor: EditorRef,
+      parent: ParentRef,
+      page: PageRef,
+      canvas: CanvasRef,
+    };
+    return this.doms;
   }
-  
-  isKeyDown( key:number) {
+
+  isKeyDown(key: number) {
     return this.state.keyCode === key;
   }
   isMoving() {
     return this.isKeyDown(KeySpace) || this.state.moveMode;
   }
 
-  moveEditor(){
-    if(!this.parent) return;
-    this.parent.style.cursor = this.state.moveMode ? "default" : "grab";
+  moveEditor() {
+    if (!this.doms.parent?.value) return;
+    this.doms.parent.value.style.cursor = this.state.moveMode
+      ? "default"
+      : "grab";
     this.state.setMoveMode(!this.state.moveMode);
   }
 
-  initEditorEvent(editorLayer:HTMLElement, parent:HTMLElement) {
-    this.parent = parent;
+  editRoot = new ObjsContainer([]);
+  initEditorEvent(editorLayer: HTMLElement, parent: HTMLElement) {
     // 监听键盘的 keydown 事件
-    document.addEventListener("keydown", (event)=>{
-        this.state.keyCode = event.keyCode;
-        if (this.isKeyDown(KeySpace)) {
-            parent.style.cursor = "grab";
-        }
+    document.addEventListener("keydown", (event) => {
+      this.state.keyCode = event.keyCode;
+      if (this.isKeyDown(KeySpace)) {
+        parent.style.cursor = "grab";
+      }
     });
 
     // 监听键盘的 keyup 事件
-    document.addEventListener("keyup", (event)=>{
-        this.state.keyCode = -1;
-        isMoving = false;
-        if(!this.isMoving()){
-            parent.style.cursor = "default";
-        }
+    document.addEventListener("keyup", (event) => {
+      this.state.keyCode = -1;
+      isMoving = false;
+      if (!this.isMoving()) {
+        parent.style.cursor = "default";
+      }
     });
-    
 
-    parent.addEventListener("wheel", (event:any)=>{
-        // 检查滚轮方向
-        let delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)))
-        console.log( delta );
+    parent.addEventListener("wheel", (event: any) => {
+      event.preventDefault();
+
+      // 检查滚轮方向
+      let delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail));
+      console.log(delta);
 
-        let s = this.state.scale +  0.1 * delta
-        if ( s < 0.5 ) s = 0.5;
+      if (event.ctrlKey) {//按住ctrl进行缩放
+        let s = this.state.scale + 0.1 * delta;
+        if (s < 0.5) s = 0.5;
         if (s > 2) s = 2.0;
-        this.state.setScale( s)
+        this.state.setScale(s);
+        return;
+      }
+      obj.translate(0,  30 * delta)
+      editorLayer.style.transform = obj.parent.worldTransform.getMatrixStr();
     });
 
     let isMoving = false;
-    let moveX = 0, moveY = 0;
-    parent.addEventListener("mousemove",(e:MouseEvent)=>{
-        //this.state.setMouse({x: e.offsetX, y: e.offsetY});
-        if (isMoving || e.button == 2) { //鼠标右键
-            e.preventDefault();
-            parent.style.cursor = "grab";
-            const xOffset = e.pageX - moveX;
-            const yOffset = e.pageY - moveY;
-            this.state.setPos({x: this.state.pos.x + xOffset, y: this.state.pos.y + yOffset});
-        }
-        moveX = e.pageX;
-        moveY = e.pageY;
+    let moveX = 0,
+      moveY = 0;
+
+    const obj = this.editRoot;
+    this.state.onWidthChanged(() => {
+      obj.rect.width = this.state.width;
+    });
+    this.state.onWidthChanged(() => {
+      obj.rect.height = this.state.height;
+    });
+
+    parent.addEventListener("mousemove", (e: MouseEvent) => {
+      const s = this.state.scale;
+      const b = editorLayer.getBoundingClientRect();
+      this.state.setMouse({
+        x: (e.clientX - b.left) / s,
+        y: (e.clientY - b.top) / s,
+      });
+
+      if (isMoving || e.button == 2) {
+        //鼠标右键
+        e.preventDefault();
+        parent.style.cursor = "grab";
+        const xOffset = e.pageX - moveX;
+        const yOffset = e.pageY - moveY;
+
+        obj.translate(xOffset, yOffset);
+        editorLayer.style.transform = obj.parent.worldTransform.getMatrixStr();
+        //this.state.setPos({x: this.state.pos.x + xOffset, y: this.state.pos.y + yOffset});
+      }
+      moveX = e.pageX;
+      moveY = e.pageY;
+    });
+
+    parent.addEventListener("mouseup", (e: MouseEvent) => {
+      if (this.state.moveMode) this.moveEditor();
+    });
+
+    document.addEventListener("mouseup", (e: MouseEvent) => {
+      if (!this.isMoving()) {
+        parent.style.cursor = "default";
+      } else if (isMoving) {
+        parent.style.cursor = "pointer";
+      }
+      isMoving = false;
+    });
+
+    this.state.onScaleChanged((v) => {
+      obj.setPivot2(this.state.mouse.x, this.state.mouse.y);
+      obj.scale(v, v);
+      editorLayer.style.transformOrigin = `0 0`;
+      editorLayer.style.transform = obj.parent.worldTransform.getMatrixStr();
+      //editorLayer.style.left
+    });
+
+    this.state.onPosChanged((v) => {
+      editorLayer.style.left = v.x + "px";
+      editorLayer.style.top = v.y + "px";
+    });
+
+    parent.addEventListener("mousedown", (e: MouseEvent) => {
+      isMoving = this.isMoving() || e.button == 2;
+      if (isMoving) {
+        parent.style.cursor = "grab";
+        e.preventDefault();
+        editorLayer.focus();
+      }
+      moveX = e.pageX;
+      moveY = e.pageY;
     });
 
-    document.addEventListener("mouseup",(e:MouseEvent)=>{
-        if(!this.isMoving()){
-            parent.style.cursor = "default";
-        } else if(isMoving) {
-            parent.style.cursor = "pointer";
-        }
-        isMoving = false;
-    })
-
-    this.state.onScaleChanged((v)=>{
-        editorLayer.style.transformOrigin = "50% 50%";
-        editorLayer.style.transform = `scale(${v})`;
-    })
-    this.state.onPosChanged((v)=>{
-        editorLayer.style.left= v.x + "px";
-        editorLayer.style.top = v.y + "px";
-    })
-
-    parent.addEventListener("mousedown", (e:MouseEvent)=>{
-        isMoving = this.isMoving() || e.button == 2;
-        if (isMoving) {
-            parent.style.cursor = "grab";
-            e.preventDefault();
-            editorLayer.focus();
-        }
-        moveX = e.pageX;
-        moveY = e.pageY;
-    })
-
-    window.addEventListener("resize", ()=>this.updateEditorSize());
-    this.state.onPageChanged(()=>this.updateCardSize());
+    window.addEventListener("resize", () => this.updateEditorSize());
+    this.state.onPageChanged(() => this.updateCardSize());
 
     setTimeout(() => {
-        this.updateEditorSize();
+      this.updateEditorSize();
     }, 1000);
-  } 
+  }
 
   updateCardSize() {
     const page = this.doms.page.value as HTMLElement;
@@ -179,15 +217,53 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
   updateEditorSize() {
     const state = this.state;
     const parent = this.doms.parent.value as HTMLElement;
-    const left = ( parent.clientWidth - state.width) / 2.0;
-    const top =  (parent.clientHeight - state.height) / 2.0;
+    const left = (parent.clientWidth - state.width) / 2.0;
+    const top = (parent.clientHeight - state.height) / 2.0;
 
-    this.state.setPos({x: left, y: top});
+    this.state.setPos({ x: left, y: top });
   }
 
   autoInScreen() {
-     this.updateEditorSize();
-     this.setScale(1);
+    let scale = 1;
+    const parent = this.doms.parent.value as HTMLElement;
+    const parentb = parent.getBoundingClientRect();
+
+    const designW =
+      this.helper.designSizeToPx(this.store.currStreamCard.layout.size[0]) + 200;
+    if (parentb.width < designW) {
+      scale = parentb.width / designW;
+    }
+    this.setScale(scale);
+
+    const bound = this.store.currStreamCard.$el.getBoundingClientRect();
+
+    const left = parentb.left + (parentb.width - bound.width) / 2.0; //屏幕坐标位置
+    const top = parentb.top + (parentb.height - bound.height) / 2.0;
+
+    let offsetX = left - bound.left;
+    let offsetY = top - bound.top;
+
+    this.editRoot.translate(offsetX, offsetY);
+
+    const editor = this.doms.editor.value as HTMLElement;
+    editor.style.transform = this.editRoot.parent.worldTransform.getMatrixStr();
+  }
+
+  clickChangeScale(scale: number) {
+    const parent = this.doms.parent.value as HTMLElement;
+    const parentb = parent.getBoundingClientRect();
+    const left = parentb.left + parentb.width / 2.0; //屏幕坐标位置
+    const top = parentb.top + parentb.height / 2.0;
+    const editor = this.doms.editor.value as HTMLElement;
+    const editorb = editor.getBoundingClientRect();
+
+    const leftE = left - editorb.left;
+    const topE = top - editorb.top;
+    this.state.setMouse({
+      x: leftE / this.state.scale,
+      y: topE / this.state.scale,
+    });
+    this.setScale(scale);
   }
 
   setScale(scale: number) {
@@ -196,5 +272,4 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
     else if (scale > 2) scale = 2.0;
     this.state.setScale(scale);
   }
-
 }

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

@@ -95,6 +95,14 @@ export class HotKeyCtrl extends ModuleControl<EditorModule> {
 
   init() {
     const { module, hotKeys } = this;
+    document.addEventListener('keydown',(event) =>{
+      // 判断按下的键是否是 Ctrl 键和 A 键
+      if (event.ctrlKey && event.key === 'a') {
+        event.preventDefault();
+        event.stopPropagation();
+        this.actions.ctrlAndA();
+      }
+    });
 
     hotkeys(
       hotKeys.map((d) => d.hotKey).join(","),

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

@@ -156,18 +156,19 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
    updateAdapterState() {
       if (!this.store.rootPage) return;
 
-    
-
       this.restorScreenPage();
-
+      let total = 0;
       this.store.streamCardIds.forEach(c=>{
          const card = this.helper.findComp(c) as DesignComp;
          card.setW(this.getCurrScreenWidth());
-         this.helper.extendStreamCard(card.id);
+         total += this.helper.extendStreamCard(card.id);
       })
       const w = this.helper.designSizeToPx(this.getCurrScreenWidth());
-      const h =  this.helper.designSizeToPx(this.getCurrScreenHeight());
-
+      let h =  this.helper.designSizeToPx(this.getCurrScreenHeight());
+      if (this.state.screen.pageMode == "long") {
+         h = this.helper.designSizeToPx(total)
+      }
+      
       this.controls.editorCtrl.state.setPage({w, h});
       this.store.rootPage.layout.size[0] = this.getCurrScreenWidth();
       this.store.rootPage.layout.size[1] = this.getCurrScreenHeight(); 

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

@@ -11,16 +11,15 @@ import { getKeyThenIncreaseKey } from "ant-design-vue/lib/message";
 import { Matrix } from "../../controllers/SelectCtrl/matrix";
 import { nanoid } from "nanoid";
 
-
 const ctrlState = {
   selected: [] as string[],
-  type: 0,  // 1 ctrlc 2 ctrlx
+  type: 0, // 1 ctrlc 2 ctrlx
   cardId: "", //当前的卡片Id
   screenId: "", //屏幕Id
   selWidth: 0,
   selX: 0,
-  selY: 0
-}
+  selY: 0,
+};
 
 export const editActions = EditorModule.action({
   pickComp(compId: string, selected = true) {
@@ -92,6 +91,7 @@ export const editActions = EditorModule.action({
         currCardIndex
       );
       currCard = this.helper.findComp(compId) as DesignComp;
+      currCard.layout.size[0] = this.controls.screenCtrl.getCurrScreenWidth();
     }
 
     const compId = await this.store.insertCompContainer(compKey, currCard);
@@ -105,7 +105,7 @@ export const editActions = EditorModule.action({
 
     //添加组件到当前选中的组件下面
     let xOffset = this.helper.designSizeToPx(
-      w / 2.0  - (currComp.layout.size?.[0] || w) / 2
+      w / 2.0 - (currComp.layout.size?.[0] || w) / 2
     );
     const obj = new CompObject(currComp);
     //没有选中组件添加到当前卡片最后
@@ -224,7 +224,7 @@ export const editActions = EditorModule.action({
 
       selCtrl.translate(
         this.helper.designSizeToPx(
-          w/2.0 - (currComp.layout.size?.[0] || w) / 2
+          w / 2.0 - (currComp.layout.size?.[0] || w) / 2
         ),
         cardPoints.y
       );
@@ -259,11 +259,11 @@ export const editActions = EditorModule.action({
       // index = this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
       const compId = await this.store.insertDesignContent(compKey, index);
       this.actions.pickComp(compId);
-      
+
       const c = this.helper.findComp(compId) as DesignComp;
       c.layout.size[0] = this.controls.screenCtrl.getCurrScreenWidth();
       c.layout.size[1] = this.controls.screenCtrl.getCurrScreenHeight();
-      
+
       this.helper.extendStreamCard(compId);
 
       this.actions.selectObjs([]);
@@ -327,20 +327,21 @@ export const editActions = EditorModule.action({
   },
 
   ctrlc() {
-    ctrlState.selected = []; 
+    ctrlState.selected = [];
     const children = this.store.currStreamCard.children.default || [];
-    children.forEach(c=>{
+    children.forEach((c) => {
       if (this.store.selected.indexOf(c) > -1) {
         ctrlState.selected.push(c);
       }
-    })
+    });
     ctrlState.screenId = this.controls.screenCtrl.currScreenId;
     ctrlState.cardId = this.store.currStreamCardId;
     ctrlState.type = 1;
     const objc = this.controls.selectCtrl.objContainer as ObjsContainer;
     ctrlState.selWidth = this.helper.pxToDesignSize(objc.width);
     objc.setPivot(0);
-    const currX = objc.parent.x, currY = objc.parent.y;
+    const currX = objc.parent.x,
+      currY = objc.parent.y;
     ctrlState.selX = currX;
     ctrlState.selY = currY;
     objc.setPivot(4);
@@ -360,7 +361,9 @@ export const editActions = EditorModule.action({
     const w = this.controls.screenCtrl.getCurrScreenWidth();
     if (this.store.selected.length == 1) {
       if (isWidth) this.store.currComp.layout.size[0] = w;
-      else this.store.currComp.layout.size[1] = this.store.currStreamCard.layout.size[1];
+      else
+        this.store.currComp.layout.size[1] =
+          this.store.currStreamCard.layout.size[1];
 
       objc.updateSize();
       selectCtrl.upgateGizmoStyle();
@@ -399,13 +402,13 @@ export const editActions = EditorModule.action({
     //console.log("ctrlv ", this.store.selected);
 
     //保持图层顺序
-    ctrlState.selected = []; 
+    ctrlState.selected = [];
     const children = this.store.currStreamCard.children.default || [];
-    children.forEach(c=>{
+    children.forEach((c) => {
       if (this.store.selected.indexOf(c) > -1) {
         ctrlState.selected.push(c);
       }
-    })
+    });
 
     ctrlState.cardId = this.store.currStreamCardId;
     ctrlState.type = 2;
@@ -413,7 +416,8 @@ export const editActions = EditorModule.action({
     const objc = this.controls.selectCtrl.objContainer as ObjsContainer;
     ctrlState.selWidth = this.helper.pxToDesignSize(objc.width);
     objc.setPivot(0);
-    const currX = objc.parent.x, currY = objc.parent.y;
+    const currX = objc.parent.x,
+      currY = objc.parent.y;
     ctrlState.selX = currX;
     ctrlState.selY = currY;
     objc.setPivot(4);
@@ -440,7 +444,6 @@ export const editActions = EditorModule.action({
       }
     };
 
-
     ctrlState.selected.forEach((c) => {
       const cp = this.helper.findComp(c) as DesignComp;
       const cp1 = cloneDeep(cp);
@@ -456,25 +459,30 @@ export const editActions = EditorModule.action({
     this.actions.selectObjs(news);
 
     setTimeout(() => {
-      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.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 != this.store.currStreamCardId) {//跨卡片拷贝
-          let pox = this.helper.getCardNextPosY(this.store.currStreamCardId, ctrlState.selWidth);
-          this.controls.selectCtrl.translate(0, pox.y - ctrlState.selY);
-          return;
+      if (ctrlState.cardId != this.store.currStreamCardId) {
+        //跨卡片拷贝
+        let pox = this.helper.getCardNextPosY(
+          this.store.currStreamCardId,
+          ctrlState.selWidth
+        );
+        this.controls.selectCtrl.translate(0, pox.y - ctrlState.selY);
+        return;
       }
 
       if (ctrlState.screenId == this.controls.screenCtrl.currScreenId) {
@@ -488,7 +496,15 @@ export const editActions = EditorModule.action({
     childs.push(...ids);
     this.store.currStreamCard.children.default = childs;
   },
-
+  ctrlAndA() {
+    const childrens = (this.store.currStreamCard.children.default || []).slice(
+      0
+    );
+    this.actions.selectObjs(childrens);
+    // this.controls.selectCtrl.
+    //objc.updateSize();
+    //selectCtrl.upgateGizmoStyle();
+  },
   // 删除组件
   removeSelectComps() {
     const selected = this.store.selected.slice(0);
@@ -633,7 +649,7 @@ export const editActions = EditorModule.action({
       root.value.useFor = c.state.screen.useFor;
       root.value.pageMode = c.state.screen.pageMode;
       root.value.pageSizeType = c.state.screen.pageSizeType;
-      
+
       // 封面截屏
       if (!this.store.designData.thumbnail) {
         await this.actions.updateThumbnailByScreenshot();
@@ -730,25 +746,26 @@ export const editActions = EditorModule.action({
   },
   // 设置组件锁定状态
   setCompLock(comp: DesignComp) {
-     comp.layout.locked = !comp.layout.locked
+    comp.layout.locked = !comp.layout.locked;
   },
   // 设置组件层级
   setCompLayer(comp: DesignComp, offset: number) {
-    const cards = (this.store.currStreamCard.children.default || []);
+    const cards = this.store.currStreamCard.children.default || [];
     const i = cards.indexOf(comp.id);
     if (i == -1) return;
 
-    if (offset < 0) {//向下移动
-       if (i== 0) return;
-      const temp = cards[i-1];
-      cards[i-1] = comp.id;
+    if (offset < 0) {
+      //向下移动
+      if (i == 0) return;
+      const temp = cards[i - 1];
+      cards[i - 1] = comp.id;
       cards[i] = temp;
       return;
     }
-    
-    if (i == cards.length -1) return;
-    const temp = cards[i+1];
-    cards[i+1] = comp.id;
+
+    if (i == cards.length - 1) return;
+    const temp = cards[i + 1];
+    cards[i + 1] = comp.id;
     cards[i] = temp;
 
     // comp.layout.zIndex = Math.min(
@@ -757,15 +774,17 @@ export const editActions = EditorModule.action({
     // );
   },
   //横向对齐
-  setAlignX(flag: 0 | 1 | 2 | 3, isGroup =false) {
+  setAlignX(flag: 0 | 1 | 2 | 3, isGroup = false) {
     console.log("alignX");
     const selectCtrl = this.controls.selectCtrl;
-    const w = this.helper.designSizeToPx(this.controls.screenCtrl.getCurrScreenWidth())
+    const w = this.helper.designSizeToPx(
+      this.controls.screenCtrl.getCurrScreenWidth()
+    );
 
     if (this.store.selected.length == 1 || isGroup) {
       const objc = selectCtrl.objContainer as ObjsContainer;
       const box = objc.getBound();
-      
+
       switch (flag) {
         case 0:
           selectCtrl.translate(-box.left, 0);

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

@@ -36,6 +36,7 @@ export const ImgCompActions = EditorModule.action({
     // }
   },
   previewImage(url, previewImageList) {
+    if (this.controls.screenCtrl.state.screen.useFor == "pc") return;
     if (isWeixinBrowser()) {
       this.controls.wxCtrl.setPreviewData(url, previewImageList);
     } else {

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

@@ -48,7 +48,9 @@ export const initActions = EditorModule.action({
     this.controls.screenCtrl.state.screen.pageMode = root.value.pageMode || "long"  
     this.controls.screenCtrl.state.screen.pageSizeType = root.value.pageSizeType || "normal"
 
-    
+    if (this.store.isEditMode) {
+      this.controls.screenCtrl.updateAdapterState();
+    }
   },
 
   async initWkDesign(id: string) {

src/modules/editor/module/helpers/index.ts

@@ -208,13 +208,14 @@ export const helpers = EditorModule.helper({
   },
 
   extendStreamCard(streamCardId: string) {
-    if (!streamCardId) return;
+    if (!streamCardId) return 0;
 
     const compMap = this.store.designData.compMap;
     const card = compMap[streamCardId];
     if (this.controls.screenCtrl.isShortPage) {
-       card.setH(this.controls.screenCtrl.getCurrScreenHeight());
-       return;
+      const  h = this.controls.screenCtrl.getCurrScreenHeight();
+       card.setH(h);
+       return h;
     }
     
     const childs = card.children.default || [];
@@ -231,6 +232,8 @@ export const helpers = EditorModule.helper({
       maxH = 200;
     }
     card.setH(maxH);
+    
+    return maxH;
   },
 
   getCardNextPosY(cardId:string, itemWidth:number) {

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

@@ -56,7 +56,6 @@ export default defineUI({
               class="h-1/1 w-1/1 !object-contain bg-[#ebebeb]"
               src={record?.thumbnail}
             />
-
             {isSys && (
               <Tag
                 color="#E88B00"
@@ -66,7 +65,6 @@ export default defineUI({
                 {record.published ? "已发布" : "未发布"}
               </Tag>
             )}
-
             <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
               <div
                 class="text-white icon_action w-60px leading-60px orange cursor-pointer rounded-1/2 text-center transition-opacity hover:opacity-90 active:opacity-80"
@@ -86,7 +84,9 @@ export default defineUI({
           </View>
           <div class="item_footer rounded-b-4px flex items-center justify-between p-15px">
             <div class="flex-1 w-0">
-              <div class="text-white text-bold truncate">{record.title}</div>
+              <div class="text-white text-bold truncate text-14px">
+                {record.title}
+              </div>
               <div class="flex items-center text-opacity-60 text-white text-12px mt-5px">
                 {dayjs(record.updateTime).format("YYYY.MM.DD")}
                 {/* 发布 */}
@@ -135,12 +135,10 @@ export default defineUI({
                   {isSys && (
                     <Menu.Item>
                       <div onClick={() => emit("menu", "thumbnail")}>
-                          替换封面
+                        替换封面
                       </div>
                     </Menu.Item>
                   )}
-
-
                 </Menu>
               }
             >
@@ -154,6 +152,13 @@ export default defineUI({
 });
 
 const itemStyles = css`
+  /* 修复hover时，页面滚动条抖动的bug */
+  > div {
+    font-size: 0;
+    > div * {
+      font-size: 14px;
+    }
+  }
   .item_footer {
     background: #414141;
   }