调整pc端的设计，在小屏幕下，进行缩放以便适配不同设备的屏幕宽度

public/index.html

@@ -40,7 +40,7 @@
         continue.</strong
       >
     </noscript>
-    <div id="app"></div>
+    <div id="app" class="scrollbar"></div>
     <!-- built files will be auto injected -->
   </body>
 </html>

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

@@ -2,7 +2,7 @@ import { css, cx } from "@linaria/core";
 import "swiper/css";
 // import "swiper/css/navigation";
 import "swiper/css/pagination";
-import { defineComponent, nextTick, onMounted, onUnmounted } from "vue";
+import { defineComponent, nextTick, onMounted,reactive, onUnmounted } from "vue";
 import { string } from "vue-types";
 
 import { IconArrowUp, IconNext, IconPrev } from "@/assets/icons";
@@ -23,6 +23,8 @@ export const Component = defineComponent({
     const compRef = useCompRef(props.compId);
     const resource = useResource();
     const ctrl = resource.controls.materialAudioListCtrl;
+    
+
     const getCustomMusic = async () => {
       await ctrl.loadPage(1, 1);
       if (ctrl.state.list.length > 0) {
@@ -82,6 +84,11 @@ export const Component = defineComponent({
         if (isPcDesign) {
           // pc
           style.margin = "0 auto";
+          const docW = controls.screenCtrl.state.docWidth;
+          const dw = helper.designSizeToPx(layout.size[0])
+          if (docW < dw) {
+            style["transform"] += ` scale(${docW / dw})`
+          }
         }
       }
       // ?

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

@@ -60,7 +60,9 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
    
    initEvent() {
       window.addEventListener("resize", ()=>{
-          if (!this.store.isDisplay || this.state.screen.useFor =='pc') return;
+         this.state.docWidth = window.innerWidth;
+         this.state.docHeight = window.innerHeight;
+         if (!this.store.isDisplay || this.state.screen.useFor =='pc') return;
           this.applyScreen();
       })
 

src/pages/h5/share/Promotion.tsx

@@ -3,7 +3,7 @@ import { initEditor } from "@/modules/editor";
 import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
 import { initResource } from "@/modules/resource";
 import { isPc } from "@queenjs/utils";
-import { defineComponent, provide } from "vue";
+import { defineComponent, provide, reactive } from "vue";
 
 export default defineComponent(() => {
   const editor = initEditor();
@@ -12,11 +12,14 @@ export default defineComponent(() => {
   const id = params.get("id");
   const isSys = params.get("isSys");
   const isWk = params.get("isWk");
+  const state = reactive({useForPc: false})
 
   provide("isPreview", true);
 
   editor.actions.switchMode("display");
 
+  const { helper, store, controls } = editor;
+
   if (id) {
     if (isWk) {
       editor.actions.initWkDesign(id);
@@ -35,6 +38,8 @@ export default defineComponent(() => {
         imgUrl: data.thumbnail || "",
         desc: data.desc,
       };
+      state.useForPc = editor.controls.pageCtrl.rootPage.value.useFor == "pc";
+      alert(1);
       editor.controls.wxCtrl.setShareData(shareData);
       editor.controls.wxCtrl.setShare(shareData);
 
@@ -46,9 +51,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;
@@ -60,11 +65,9 @@ export default defineComponent(() => {
 
   return () => {
     const rootPage = editor.controls.pageCtrl.rootPage;
-    const isPcDesign = rootPage?.value.useFor == "pc";
-
-    // pc in mobile
-    if (isPcDesign && !isPc()) return <Empty />;
-
+    const isPcDesign = state.useForPc;
+    // const isShort = rootPage?.value.pageMode == "short";
+    
     // mobile in pc
     if (!isPcDesign && isPc()) {
       const pegeH = getPageH();
@@ -82,7 +85,23 @@ export default defineComponent(() => {
       );
     }
 
-    // mobile in mobile
+    // mobile in mobile or pc in pc
+    if (isPcDesign) {
+      const docW = editor.controls.screenCtrl.state.docWidth;
+      const dw = helper.designSizeToPx(rootPage.layout.size[0])
+      const dh =  helper.designSizeToPx(rootPage.layout.size[1]);
+      let wrapH = 0;
+      const style= {"height": "auto"}
+      if (docW < dw) {
+         const s = docW / dw;
+         wrapH  =  Math.ceil(dh*s);
+         style["height"] = wrapH + "px"
+      }
+      return <div class="pc-web" style={style}>
+        <editor.components.Preview />
+      </div>;
+    }
+
     return <editor.components.Preview />;
   };
 });

src/pages/h5/share/style.less

@@ -5,7 +5,25 @@
   min-width: 0;
   min-height: 100%;
   background-color: #fff;
-  overflow: auto;
+  overflow-x: hidden;
+}
+
+.scrollbar {
+  overflow: overlay; // 滚动条不会占用宽度
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #404040;
+    border-radius: 8px;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: #606060;
+  }
 }
 
 @keyframes arrow {