share

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

@@ -132,7 +132,11 @@ export const Component = defineComponent({
           key={controls.pageCtrl.state.designId}
           ref={compRef}
           style={pageStyles}
-          class={cx(pageRootStyles, editor.store.isEditMode && pageEditStyle)}
+          class={cx(
+            "relative",
+            pageRootStyles,
+            editor.store.isEditMode && pageEditStyle
+          )}
         >
           {(store.isDisplay ||
             (store.isEditMode &&

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

@@ -1,5 +1,4 @@
 import { IconAdd, IconMove } from "@/assets/icons";
-import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
 import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { css, cx } from "@linaria/core";
 import { IconDelete } from "@queenjs/icons";
@@ -45,11 +44,10 @@ export const View = defineComponent({
       });
       intersectionObserver.observe(compRef.value);
     });
-   
+
     const pageCtrl = controls.pageCtrl;
 
     return () => {
-     
       const comp = helper.findComp(props.compId);
       if (!comp) return store.isEditMode ? <div>无效组件</div> : null;
       const isStreamCard = helper.isStreamCard(props.compId);
@@ -57,7 +55,8 @@ export const View = defineComponent({
       const page = controls.pageCtrl;
 
       let isFocus =
-        store.isEditMode && gizmo.state.transform.selected.length > 1 &&
+        store.isEditMode &&
+        gizmo.state.transform.selected.length > 1 &&
         gizmo.state.lastId == props.compId;
 
       const style = helper.createStyle(comp.layout, comp);
@@ -85,7 +84,9 @@ export const View = defineComponent({
           return;
         let i = pageCtrl.streamCardIds.indexOf(props.compId);
         if (i > 0) {
-          const c = helper.findComp(pageCtrl.streamCardIds[i - 1]) as DesignComp;
+          const c = helper.findComp(
+            pageCtrl.streamCardIds[i - 1]
+          ) as DesignComp;
           const PreComp = controls.compUICtrl.state.components.get(
             c.compKey
           ) as any;
@@ -122,7 +123,9 @@ export const View = defineComponent({
 
         let i = pageCtrl.streamCardIds.indexOf(props.compId);
         if (i < pageCtrl.streamCardIds.length - 1) {
-          const c = helper.findComp(pageCtrl.streamCardIds[i + 1]) as DesignComp;
+          const c = helper.findComp(
+            pageCtrl.streamCardIds[i + 1]
+          ) as DesignComp;
           const AfterComp = controls.compUICtrl.state.components.get(
             c.compKey
           ) as any;
@@ -146,11 +149,12 @@ export const View = defineComponent({
           ref={compRef}
           class={[
             comp.compKey,
-
             viewStyle,
-              page.state.currStreamCardId == props.compId && CurrCompStyle,
-              isFocus && AnchorCompStyle,
-              isFocus && groupCompCls,
+            page.state.currStreamCardId == props.compId &&
+              store.isEditMode &&
+              CurrCompStyle,
+            isFocus && AnchorCompStyle,
+            isFocus && groupCompCls,
           ]}
           style={style}
           onClick={(e) => {

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

@@ -74,6 +74,7 @@ export class PreviewCtrl extends ModuleControl<EditorModule> {
     if (isPcDesign) {
       options = {
         ...options,
+        direction: "horizontal",
         watchSlidesProgress: true,
         pagination: {
           el: ".swiper-pagination",

src/modules/editor/objects/DesignTemp/creates/createCompStyle.ts

@@ -13,7 +13,7 @@ export function createCompStyle(
   layout: Layout,
   comp: DesignComp
 ) {
-  const { designToNaturalSize, pxToDesignSize , designSizeToPx} = module.helper;
+  const { designToNaturalSize, pxToDesignSize, designSizeToPx } = module.helper;
   const style: any = {};
   const transform: any = {};
 
@@ -40,11 +40,15 @@ export function createCompStyle(
       style["overflow"] = "hidden";
     }
     if (layout.border.radius2 !== undefined) {
-      style["border-radius"] = designSizeToPx(Math.min(layout.size[0], layout.size[1])) * layout.border.radius2 / 100.0 + "px";
+      style["border-radius"] =
+        (designSizeToPx(Math.min(layout.size[0], layout.size[1])) *
+          layout.border.radius2) /
+          100.0 +
+        "px";
       style["overflow"] = "hidden";
     }
   }
-  
+
   if (layout.radius !== undefined) {
     style["border-radius"] = layout.radius / 2 + "%";
     style["overflow"] = "hidden";
@@ -70,38 +74,38 @@ export function createCompStyle(
     style.clipPath = compMasks[layout.mask]?.value || layout.mask;
   }
 
- 
-    
   const [w, h, sizeOpts] = layout.size;
 
   style.width = designToNaturalSize(w);
   style.height = designToNaturalSize(h, {
-      adaptiveH: sizeOpts?.unit === "%",
+    adaptiveH: sizeOpts?.unit === "%",
   });
 
   if (layout.transformMatrix) {
     //样式的scale转 width
     const m = Matrix.createFromMatrixStr(layout.transformMatrix);
     const t = new Transform();
-    t.setFromMatrix(m);  
+    t.setFromMatrix(m);
     const [w, h, sizeOpts] = layout.size;
     style.width = designToNaturalSize(w * t.scale.x);
     style.height = designToNaturalSize(h * t.scale.y, {
       adaptiveH: sizeOpts?.unit === "%",
     });
-    
+
     style.left = t.position.x + "px";
     style.top = t.position.y + "px";
-    style.transform = `rotate(${t.rotation * UnitAngle}deg)`
+    style.transform = `rotate(${t.rotation * UnitAngle}deg)`;
     style.transformOrigin = "0 0";
   }
-  
+
   if (layout.background) {
     if (layout.background.color) {
       style.background = formatColor(layout.background.color);
     }
   }
-  style.position = "absolute";
+  if (comp.compKey !== "Page") {
+    style.position = "absolute";
+  }
   return style;
 }
 

src/pages/h5/share/Promotion.tsx

@@ -1,12 +1,14 @@
 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 } from "vue";
 
 export default defineComponent(() => {
   const editor = initEditor();
+  initResource();
   const params = new URLSearchParams(location.href.split("?")[1].split("#")[0]);
   const id = params.get("id");
   const isSys = params.get("isSys");
@@ -43,9 +45,9 @@ export default defineComponent(() => {
   // }).then(data=>{
   //   console.log(data);
   // })
-  if ( !isPc() ) {
-      return ()=><editor.components.Preview />
-  } 
+  if (!isPc()) {
+    return () => <editor.components.Preview />;
+  }
 
   function getPageH() {
     const rootPage = editor.controls.pageCtrl.rootPage;
@@ -66,7 +68,7 @@ export default defineComponent(() => {
     if (!isPcDesign && isPc()) {
       const pegeH = getPageH();
       return (
-        <div class="h-100vh flex items-center justify-center bg-gray-100">
+        <div class="h-100vh flex items-center justify-center">
           <div class="scrollbar !overflow-x-hidden" style={{ height: pegeH }}>
             <editor.components.Preview />
           </div>

src/pages/h5/share/style.less

@@ -5,6 +5,7 @@
   min-width: 0;
   min-height: 100%;
   background-color: #fff;
+  overflow: auto;
 }
 
 @keyframes arrow {