soure

src/assets/icons/components/IconPlay.tsx

@@ -0,0 +1,10 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconPlay = createIcon(<svg viewBox="0 0 32 32">
+    <g transform="translate(-264 -415)">
+        <rect fill="none" opacity="0.2" width="32" height="32" transform="translate(264 415)" />
+        <path fill="currentColor" opacity="0.8"
+            d="M14.315,2.632a2,2,0,0,1,3.369,0L30.03,21.922A2,2,0,0,1,28.345,25H3.655A2,2,0,0,1,1.97,21.922Z"
+            transform="translate(296 415) rotate(90)" />
+    </g>
+</svg>)

src/assets/icons/components/IconPlay2.tsx

@@ -0,0 +1,10 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconPlay2 = createIcon(<svg viewBox="0 0 32 32">
+    <g transform="translate(-328 -415)">
+        <rect fill="none" opacity="0.2" width="32" height="32" transform="translate(328 415)" />
+        <path fill="currentColor" opacity="0.8"
+            d="M-17336-4851.31a2.026,2.026,0,0,1-1-.268l-11-6.344a2.009,2.009,0,0,1-1-1.733v-12.692a2.009,2.009,0,0,1,1-1.733l11-6.344a2.021,2.021,0,0,1,1-.268,2.021,2.021,0,0,1,1,.268l11,6.344a2.009,2.009,0,0,1,1,1.733v12.692a2.009,2.009,0,0,1-1,1.733l-11,6.344A2.026,2.026,0,0,1-17336-4851.31Zm-9.82-20.69a.7.7,0,0,0-.611.377.783.783,0,0,0,.26,1.023l9.471,5.773v11.543a.727.727,0,0,0,.7.749.727.727,0,0,0,.7-.749v-11.543l9.471-5.773a.783.783,0,0,0,.26-1.023.691.691,0,0,0-.607-.377.662.662,0,0,0-.346.1l-9.479,5.778-9.475-5.778A.663.663,0,0,0-17345.82-4872Z"
+            transform="translate(17680.004 5296.69)" />
+    </g>
+</svg>)

src/assets/icons/components/IconSave.tsx

@@ -0,0 +1,20 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconSave = createIcon(<svg viewBox="0 0 16 16">
+    <g transform="translate(-185 -225)">
+        <rect fill="none" opacity="0.2" width="16" height="16" transform="translate(185 225)" />
+        <g transform="translate(-10.671 -26.943)">
+            <g transform="translate(198 254.421)">
+                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                    d="M19,6.492V5.6a.6.6,0,0,1,.6-.6h5.97a.6.6,0,0,1,.6.6v6.567a.6.6,0,0,1-.6.6H24.373"
+                    transform="translate(-14.821 -5)" />
+                <rect fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="7.296"
+                    height="7.296" rx="1" transform="translate(0 3.748)" />
+                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M17,25v2.985"
+                    transform="translate(-13.418 -19.03)" />
+                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12,30h2.985"
+                    transform="translate(-9.911 -22.538)" />
+            </g>
+        </g>
+    </g>
+</svg>)

src/assets/icons/index.ts

@@ -18,10 +18,13 @@ export * from "./components/IconLayerUp";
 export * from "./components/IconLocked";
 export * from "./components/IconMove";
 export * from "./components/IconMusic";
+export * from "./components/IconPlay";
+export * from "./components/IconPlay2";
 export * from "./components/IconQueen";
 export * from "./components/IconResizeY";
 export * from "./components/IconRight";
 export * from "./components/IconRotate";
+export * from "./components/IconSave";
 export * from "./components/IconText";
 export * from "./components/IconVideo";
 export * from "./components/IconWechat";

src/assets/icons/svg/play.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 32 32">
+    <g transform="translate(-264 -415)">
+        <rect fill="none" opacity="0.2" width="32" height="32" transform="translate(264 415)" />
+        <path fill="currentColor" opacity="0.8"
+            d="M14.315,2.632a2,2,0,0,1,3.369,0L30.03,21.922A2,2,0,0,1,28.345,25H3.655A2,2,0,0,1,1.97,21.922Z"
+            transform="translate(296 415) rotate(90)" />
+    </g>
+</svg>

src/assets/icons/svg/play2.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 32 32">
+    <g transform="translate(-328 -415)">
+        <rect fill="none" opacity="0.2" width="32" height="32" transform="translate(328 415)" />
+        <path fill="currentColor" opacity="0.8"
+            d="M-17336-4851.31a2.026,2.026,0,0,1-1-.268l-11-6.344a2.009,2.009,0,0,1-1-1.733v-12.692a2.009,2.009,0,0,1,1-1.733l11-6.344a2.021,2.021,0,0,1,1-.268,2.021,2.021,0,0,1,1,.268l11,6.344a2.009,2.009,0,0,1,1,1.733v12.692a2.009,2.009,0,0,1-1,1.733l-11,6.344A2.026,2.026,0,0,1-17336-4851.31Zm-9.82-20.69a.7.7,0,0,0-.611.377.783.783,0,0,0,.26,1.023l9.471,5.773v11.543a.727.727,0,0,0,.7.749.727.727,0,0,0,.7-.749v-11.543l9.471-5.773a.783.783,0,0,0,.26-1.023.691.691,0,0,0-.607-.377.662.662,0,0,0-.346.1l-9.479,5.778-9.475-5.778A.663.663,0,0,0-17345.82-4872Z"
+            transform="translate(17680.004 5296.69)" />
+    </g>
+</svg>

src/assets/icons/svg/save.svg

@@ -0,0 +1,18 @@
+<svg viewBox="0 0 16 16">
+    <g transform="translate(-185 -225)">
+        <rect fill="none" opacity="0.2" width="16" height="16" transform="translate(185 225)" />
+        <g transform="translate(-10.671 -26.943)">
+            <g transform="translate(198 254.421)">
+                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                    d="M19,6.492V5.6a.6.6,0,0,1,.6-.6h5.97a.6.6,0,0,1,.6.6v6.567a.6.6,0,0,1-.6.6H24.373"
+                    transform="translate(-14.821 -5)" />
+                <rect fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="7.296"
+                    height="7.296" rx="1" transform="translate(0 3.748)" />
+                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M17,25v2.985"
+                    transform="translate(-13.418 -19.03)" />
+                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12,30h2.985"
+                    transform="translate(-9.911 -22.538)" />
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -1,13 +1,13 @@
-import { Icon3D } from "@/assets/icons";
+import { IconPlay2 } from "@/assets/icons";
 import { useEditor } from "@/modules/editor";
 import { css } from "@linaria/core";
-import { Effect, queenApi, useModal } from "queenjs";
-import { defineComponent, reactive, watch, watchEffect } from "vue";
+import { IconClose } from "@queenjs/icons";
+import { Image } from "@queenjs/ui";
+import { queenApi, useModal } from "queenjs";
+import { defineComponent, reactive, watch } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
-import { IconClose } from "@queenjs/icons";
-import { Image } from "@queenjs/ui";
 
 export const Component = defineComponent({
   props: {
@@ -62,7 +62,7 @@ export const Component = defineComponent({
                 size={480}
                 src={value.poster}
               />
-              <Icon3D
+              <IconPlay2
                 class={iconCls}
                 onClick={!store.isEditMode ? showWeb3D : undefined}
               />
@@ -93,7 +93,8 @@ const iconCls = css`
   position: absolute;
   top: 50%;
   left: 50%;
-  font-size: 75px;
+  padding: 15px;
+  font-size: 50px;
   color: #666;
   transform: translate(-50%, -50%);
   border-radius: 50%;

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

@@ -12,6 +12,7 @@ import {
   IconQueen,
   IconRight,
   IconAi,
+  IconSave,
 } from "@/assets/icons";
 import {
   IconCamera,
@@ -22,7 +23,6 @@ import {
   IconEyeOn,
   IconLock,
   IconRedo,
-  IconSave,
   IconUndo,
   IconUnlock,
 } from "@queenjs/icons";

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

@@ -1,13 +1,11 @@
 import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { css } from "@linaria/core";
 import { defineUI } from "queenjs";
-import { onUnmounted, reactive, ref, onMounted } from "vue";
+import { onUnmounted, reactive, ref } from "vue";
 import { Container, Draggable } from "vue-dndrop";
 import { useEditor } from "../../..";
 import { HotKeyCtrl } from "../../../controllers/HotKeyCtrl";
 import { CompUI } from "../../CompUI";
-import { Transfer } from "../../CompUI/basicUI/Transfer";
-import { Transforms } from "../../CompUI/basicUI/Transfer/transform";
 
 import { SelectTransfer } from "../../CompUI/basicUI/Transfer/select";
 import { TipIcons } from "../../TipIcons";
@@ -38,9 +36,9 @@ export default defineUI({
     return () => {
       const pageRoot = helper.findRootComp();
       if (!pageRoot) return;
-      const streamCardIndex = store.streamCardIds.indexOf(
-        store.currStreamCardId
-      );
+      // const streamCardIndex = store.streamCardIds.indexOf(
+      //   store.currStreamCardId
+      // );
       if (!flagRef.value) {
         flagRef.value = true;
         setTimeout(() => {
@@ -52,7 +50,7 @@ export default defineUI({
           helper.initEditLayer(editLayerRef.value);
         }, 0);
       }
-      
+
       return (
         <div class="scrollbar overflow-y-auto h-1/1" ref={viewportRef}>
           <div class="relative">
@@ -74,9 +72,9 @@ export default defineUI({
                             if (sourceContainerOptions.groupName != "canvas") {
                               return false;
                             }
-                            if (typeof payload == "string")
+                            if (typeof payload == "string") {
                               controls.dragAddCtrl.updateCompKey(payload);
-                            else {
+                            } else {
                               controls.dragAddCtrl.updateCompKey(payload.type);
                               controls.dragAddCtrl.updateCompData(payload.data);
                             }
@@ -111,7 +109,6 @@ export default defineUI({
                           !state.draging && controls.cropCtrl.state.visible && <Transforms ctrl={ controls.cropCtrl.modifyCtrl} />
                         } */}
 
-
                         {!state.draging && <SelectTransfer />}
                       </>
                     );
@@ -129,9 +126,8 @@ export default defineUI({
                 }}
               </CompUI.Page.Component>
             </div>
-            
-            <div class={editLayerStyle} ref={editLayerRef}>
-            </div>
+
+            <div class={editLayerStyle} ref={editLayerRef}></div>
             <canvas class={selectCls} ref={selectCanvasRef} />
           </div>
           <div class={meatureStyle}>
@@ -211,4 +207,4 @@ const editLayerStyle = css`
   width: 100%;
   height: 100%;
   z-index: 1000;
-`
+`;

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

@@ -31,7 +31,7 @@ export default defineUI({
           <Radio.Button value="preview">预览</Radio.Button>
         </Radio.Group> */}
         <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
-          <div class="text-16px font-bold text-light-50 max-w-240px truncate">
+          <div class="text-16px font-bold text-light-50 max-w-240px truncate leading-normal">
             {store.designData?.title}
           </div>
         </div>

src/modules/editor/components/Viewport/Slider/SliderLeft/BaseComp.tsx

@@ -0,0 +1,71 @@
+import { useEditor } from "@/modules/editor";
+import { ICompKeys } from "@/modules/editor/typings";
+import { css } from "@linaria/core";
+import { useReactive } from "@queenjs/use";
+import { Tooltip } from "ant-design-vue";
+import { defineComponent } from "vue";
+import { Container, Draggable } from "vue-dndrop";
+
+export default defineComponent({
+  setup() {
+    const editor = useEditor();
+    const { compUICtrl } = editor.controls;
+
+    const state = useReactive(() => ({
+      basicComps() {
+        return ["Text", "Image", "Video", "Web3D"].map(
+          (key) => compUICtrl.state.components.get(key) as any
+        );
+      },
+    }));
+
+    return () => {
+      return (
+        <Container
+          class={basicStyle}
+          orientation="horizontal"
+          behaviour="copy"
+          group-name="canvas"
+          get-child-payload={(index: number) => {
+            return state.basicComps[index].compKey;
+          }}
+        >
+          {state.basicComps.map((item) => {
+            return (
+              <Draggable key={item.compKey} class="!leading-0">
+                <div
+                  class="draggable-item"
+                  onClick={() =>
+                    editor.actions.clickCompToDesign(item.compKey as ICompKeys)
+                  }
+                >
+                  <Tooltip title={item.name}>
+                    <span>
+                      <img
+                        class="h-24px m-4px pointer-events-none"
+                        src={item.thumbnail}
+                      />
+                    </span>
+                  </Tooltip>
+                </div>
+              </Draggable>
+            );
+          })}
+        </Container>
+      );
+    };
+  },
+});
+
+const basicStyle = css`
+  display: flex;
+  align-items: center;
+  .draggable-item {
+    border-radius: 4px;
+    margin: 0 4px;
+    cursor: pointer;
+    &:hover {
+      background-color: darken(@inf-component-bg, 3%);
+    }
+  }
+`;

src/modules/editor/components/Viewport/Slider/SliderLeft/Frames.tsx

@@ -27,13 +27,16 @@ export default defineUI({
           behaviour="copy"
           group-name="canvas"
           animation-duration={0}
-          // get-child-payload={(index: number) => {
-          //   return props.components[index].compKey;
-          // }}
+          get-child-payload={(index: number) => {
+            return {
+              type: "tpl",
+              data: dataSource[index],
+            };
+          }}
         >
           {dataSource.map((item) => {
             return (
-              <Draggable>
+              <Draggable key={item._id}>
                 <div
                   class="text-center leading-50px bg-dark-50 rounded draggable-item"
                   key={item._id}
@@ -49,13 +52,13 @@ export default defineUI({
               </Draggable>
             );
           })}
+          {/* <Loadmore
+            class="mt-20px"
+            loading={editor.controls.frameControl.listCtrl.state.loading}
+            canLoad={editor.controls.frameControl.listCtrl.state.canLoadNext}
+            onChange={editor.controls.frameControl.listCtrl.loadNextPage}
+          /> */}
         </Container>
-        //   <Loadmore
-        //     class="mt-20px"
-        //     loading={editor.controls.frameControl.listCtrl.state.loading}
-        //     canLoad={editor.controls.frameControl.listCtrl.state.canLoadNext}
-        //     onChange={editor.controls.frameControl.listCtrl.loadNextPage}
-        //   />
         // </div>
       );
     };

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

@@ -1,12 +1,10 @@
 import { useEditor } from "@/modules/editor";
-import { ICompKeys } from "@/modules/editor/typings";
 import { css } from "@linaria/core";
 import { useReactive } from "@queenjs/use";
 import { defineUI } from "queenjs";
-import { Container, Draggable } from "vue-dndrop";
 import CustomComps from "./CustomComps";
-import { MySources } from "./MySources";
 import Frames from "./Frames";
+import { MySources } from "./MySources";
 
 export default defineUI({
   setup() {
@@ -15,7 +13,7 @@ export default defineUI({
 
     const tabs = [
       { label: "模板", value: "frame" },
-      { label: "组件", value: "senior" },
+      { label: "平台组件", value: "senior" },
       { label: "我的组件", value: "user" },
       { label: "我的素材", value: "source" },
     ];
@@ -37,43 +35,7 @@ export default defineUI({
     return () => (
       <div class="h-full flex flex-col">
         <div class="p-16px border-bottom !border-2px">资源中心</div>
-
         <div class="m-16px flex-1 flex flex-col h-0">
-          {/* <Radio.Group>
-            <Radio.Button>模板</Radio.Button>
-            <Radio.Button>组件</Radio.Button>
-          </Radio.Group> */}
-          <div class="text-16px font-bold mb-16px">基础组件</div>
-          <Container
-            class={basicStyle}
-            orientation="horizontal"
-            behaviour="copy"
-            group-name="canvas"
-            get-child-payload={(index: number) => {
-              return state.basicComps[index].compKey;
-            }}
-          >
-            {state.basicComps.map((item) => {
-              return (
-                <Draggable key={item.compKey}>
-                  <div
-                    class="draggable-item p-4px text-center"
-                    onClick={() =>
-                      editor.actions.clickCompToDesign(
-                        item.compKey as ICompKeys
-                      )
-                    }
-                  >
-                    <img
-                      class="h-30px my-4px pointer-events-none"
-                      src={item.thumbnail}
-                    />
-                    <div>{item.name}</div>
-                  </div>
-                </Draggable>
-              );
-            })}
-          </Container>
           <div class={tabStyle}>
             {tabs.map((item) => {
               return (
@@ -107,19 +69,6 @@ export default defineUI({
   },
 });
 
-const basicStyle = css`
-  /* margin: -10px; */
-  /* border-spacing: 10px; */
-
-  .draggable-item {
-    border-radius: 4px;
-    cursor: pointer;
-    &:hover {
-      background-color: darken(@inf-component-bg, 3%);
-    }
-  }
-`;
-
 const tabStyle = css`
   @apply text-16px my-16px space-x-10px;
 

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

@@ -5,11 +5,12 @@ import { Dropdown } from "ant-design-vue";
 import { defineUI } from "queenjs";
 import { reactive } from "vue";
 import { TipIcons } from "../../TipIcons";
+import BaseComp from "../Slider/SliderLeft/BaseComp";
 import AiText from "./AiText";
 
 export default defineUI({
   setup() {
-    const { actions, controls } = useEditor();
+    const { actions } = useEditor();
     const launcher = useLauncher();
 
     const state = reactive({
@@ -18,7 +19,8 @@ export default defineUI({
 
     return () => (
       <div class="flex items-center justify-between px-15px py-12px">
-        <div class="space-x-10px z-999">
+        <div class="space-x-10px z-999 flex items-center">
+          <BaseComp />
           <Dropdown
             overlayClassName={dropdownStyles}
             overlay={
@@ -62,9 +64,10 @@ export default defineUI({
 });
 
 const btnCls = css`
-  padding: 5px;
+  padding: 6px;
+  font-size: 18px;
   &.active {
-    background: #1d1d1d;
+    background-color: darken(@inf-component-bg, 3%);
   }
 `;
 

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

@@ -30,6 +30,24 @@ export class DragAddCtrl extends ModuleControl<EditorModule> {
     this.dragingCompData = data;
   }
 
+  async dragComp(e: MouseEvent) {
+    const scope = this;
+    await scope.actions.dragCompToDesign(e, scope.dragingCompKey as any);
+    if (
+      scope.dragingCompData?._id &&
+      (scope.dragingCompKey == "Image" || scope.dragingCompKey == "Video")
+    ) {
+      scope.store.currComp.value.url = scope.dragingCompData?.file?.url;
+      scope.dragingCompData = {};
+    }
+    scope.dragingCompKey = "";
+  }
+
+  async dragTpl() {
+    await this.actions.clickFrameToDesign(this.dragingCompData);
+    this.dragingCompKey = "";
+  }
+
   initEvent() {
     const scope = this;
 
@@ -41,17 +59,13 @@ export class DragAddCtrl extends ModuleControl<EditorModule> {
       }, 1000);
 
       if (scope._cancel) scope._cancel();
-
       if (!scope.dragingCompKey) return;
-      await scope.actions.dragCompToDesign(e, scope.dragingCompKey as any);
-      if (
-        scope.dragingCompData?._id &&
-        (scope.dragingCompKey == "Image" || scope.dragingCompKey == "Video")
-      ) {
-        scope.store.currComp.value.url = scope.dragingCompData?.file?.url;
-        scope.dragingCompData = {};
+
+      if (scope.dragingCompKey == "tpl") {
+        scope.dragTpl();
+      } else {
+        scope.dragComp(e);
       }
-      scope.dragingCompKey = "";
     }
 
     document.addEventListener("mouseup", mouseup);

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

@@ -451,7 +451,9 @@ export const editActions = EditorModule.action({
       content: "要替换正在编辑的内容？",
     });
     if (!res) return;
-    const frameData = await this.https.getFrameDetail(record._id);
+    const frameData = await this.https.getDesignDetail(record._id, {
+      isSys: true,
+    });
     const { compMap, content, desc, thumbnail, title } = frameData.result;
 
     const designData = {

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

@@ -1,3 +1,4 @@
+import { cookieStorage } from "@/utils/cookieStorage";
 import { nanoid } from "nanoid";
 import { EditorModule } from "..";
 import { CompObject } from "../../controllers/SelectCtrl/compObj";
@@ -5,7 +6,6 @@ import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { createProxyEffect } from "../../objects/ProxyStore/create";
 import { EditorMode } from "../../typings";
 import { editActions } from "./edit";
-import { cookieStorage } from "@/utils/cookieStorage";
 
 export const initActions = EditorModule.action({
   // 模块初始化
@@ -29,9 +29,9 @@ export const initActions = EditorModule.action({
   },
 
   // 初始化数据
-  async initDesign(id: string) {
+  async initDesign(id: string, isSys = false) {
     this.actions.setCookieClientId();
-    const ret = await this.https.getDesignDetail(id);
+    const ret = await this.https.getDesignDetail(id, { isSys });
     this.store.setDesignData(ret.result);
   },
   // 切换模式

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

@@ -2,9 +2,10 @@ import { EditorModule } from "..";
 import { DesignTemp } from "../../objects/DesignTemp";
 
 export const https = EditorModule.http({
-  getDesignDetail(id: string) {
+  getDesignDetail(id: string, params?: { isSys: boolean }) {
     return this.request("/h5/detail/" + id, {
       method: "GET",
+      params,
     });
   },
   getCompDetail(id: string) {
@@ -27,11 +28,4 @@ export const https = EditorModule.http({
   createComp(data: any) {
     return this.request("/frame/create", { method: "POST", data });
   },
-
-  getFrameDetail(id: string) {
-    return this.request("/h5/detail/" + id, {
-      method: "GET",
-      params: { isSys: true },
-    });
-  },
 });

src/pages/editor/EditPage/index.tsx

@@ -2,20 +2,27 @@ import { initEditor } from "@/modules/editor";
 import { EditorMode } from "@/modules/editor/typings";
 import { useResource } from "@/modules/resource";
 import { SelectOneImage } from "@/pages/website/Material2/modal";
+import { useAuth } from "@queenjs-modules/auth";
 import { defineComponent } from "vue";
 
 export default defineComponent(() => {
   const editor = initEditor();
   const resource = useResource();
+  const auth = useAuth();
 
   const params = new URLSearchParams(location.hash.split("?")[1]);
   editor.actions.switchMode((params.get("mode") || "editPage") as EditorMode);
   const prodId = params.get("id");
-  if (prodId) {
-    editor.actions.initDesign(prodId);
-  } else {
-    editor.jumpIndexHtml();
-  }
+
+  auth.actions.on("getUserInfo:success", () => {
+    if (prodId) {
+      const userInfo: any = auth.store.userInfo;
+      const isSys = userInfo.roles?.includes("system");
+      editor.actions.initDesign(prodId, isSys);
+    } else {
+      editor.jumpIndexHtml();
+    }
+  });
 
   editor.controls.pickCtrl.onPickImage = async (maxCount: number) => {
     if (maxCount <= 1) {

src/pages/h5/share/Promotion.tsx

@@ -31,7 +31,7 @@ export default defineComponent(() => {
   // }).then(data=>{
   //   console.log(data);
   // })
-  
+
   return () => (
     <div class="flex items-center justify-center h-100vh bg-gray-100">
       <div class={isPc() ? `h-668px scrollbar` : `h-full`}>

src/pages/website/Promotion2/controller.tsx

@@ -4,8 +4,10 @@ import { PromotionController } from "@/modules/resource/controllers/PromotionCon
 import { PageListController } from "@queenjs/controllers";
 import { queenApi } from "queenjs";
 import ShareModal from "./components/ShareModal";
+import { AuthModule } from "@queenjs-modules/auth";
 
 export function createPromotinController(
+  auth: AuthModule,
   resource: ResourceModule,
   editor: EditorModule
 ) {
@@ -34,7 +36,9 @@ export function createPromotinController(
   };
 
   async function sharePromotion(record: any) {
-    await editor.actions.initDesign(record._id);
+    const userInfo: any = auth.store.userInfo;
+    const isSys = userInfo.roles?.includes("system");
+    await editor.actions.initDesign(record._id, isSys);
     editor.actions.switchMode("preview");
     resource.showModal(
       <ShareModal record={record} controller={ctrl}>

src/pages/website/Promotion2/index.tsx

@@ -3,13 +3,15 @@ import { useResource } from "@/modules/resource";
 import { defineComponent } from "vue";
 import PromotionUI from "./components";
 import { createPromotinController } from "./controller";
+import { useAuth } from "@queenjs-modules/auth";
 
 export default defineComponent({
   setup() {
     const resource = useResource();
     const editor = useEditor();
+    const auth = useAuth();
 
-    const ctrl = createPromotinController(resource, editor);
+    const ctrl = createPromotinController(auth, resource, editor);
 
     return () => (
       <PromotionUI