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

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/Page/component.tsx

@@ -14,30 +14,33 @@ export const Component = defineComponent({
   setup(props, { slots }) {
     const editor = useEditor();
     const { helper } = editor;
-    const { children, layout, value } = useCompData(props.compId);
     const compRef = useCompRef(props.compId);
-    const compMusic = value.music || "";
-    const curValue = MusicOptions.find((e) => {
-      return e.value == compMusic;
-    });
-    return () => (
-      <div
-        ref={compRef}
-        style={helper.createStyle(layout || { size: [750] })}
-        class={["!h-auto", editor.store.isEditMode ? pageEditStyle : ""]}
-      >
-        <div class="relative">
-          {slots.Container?.(
-            children.default.map((compId) => {
-              const comp = helper.findComp(compId);
-              if (!comp) return;
-              return slots.CompItem?.(comp);
-            })
-          )}
-          {curValue?.value && !editor.store.isEditMode && <PageMusic />}
+
+    return () => {
+      const { children, layout, value } = useCompData(props.compId);
+      const compMusic = value.music || "";
+      const curValue = MusicOptions.find((e) => {
+        return e.value == compMusic;
+      });
+      return (
+        <div
+          ref={compRef}
+          style={helper.createStyle(layout || { size: [750] })}
+          class={["!h-auto", editor.store.isEditMode ? pageEditStyle : ""]}
+        >
+          <div class="relative">
+            {slots.Container?.(
+              children.default.map((compId) => {
+                const comp = helper.findComp(compId);
+                if (!comp) return;
+                return slots.CompItem?.(comp);
+              })
+            )}
+            {curValue?.value && !editor.store.isEditMode && <PageMusic />}
+          </div>
         </div>
-      </div>
-    );
+      );
+    };
   },
 });
 

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

@@ -2,15 +2,25 @@ import { useEditor } from "@/modules/editor";
 import { Button, Dropdown } from "ant-design-vue";
 import { defineUI } from "queenjs";
 import { ShareBox } from "./ShareBox";
+import History from "../Toolbar/History";
 
 export default defineUI({
   setup() {
     const { store, actions, jumpIndexHtml } = useEditor();
+
     return () => (
-      <div class="flex justify-between">
-        <aside>
-          <img class="h-40px cursor-pointer" src={require("@/assets/imgs/Logo.png")} alt="logo" onClick={() => jumpIndexHtml()}/>
-        </aside>
+      <div class="relative flex justify-between">
+        <div class="flex items-center">
+          <aside>
+            <img
+              class="h-40px cursor-pointer"
+              src={require("@/assets/imgs/Logo.png")}
+              alt="logo"
+              onClick={() => jumpIndexHtml()}
+            />
+          </aside>
+          <History class="ml-100px" />
+        </div>
         {/* <Radio.Group
           value={store.mode}
           onChange={(e) => actions.switchMode(e.target.value)}
@@ -20,7 +30,11 @@ export default defineUI({
           </Radio.Button>
           <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 leading-normal">
+            {store.designData?.title}
+          </div>
+        </div>
         <aside class="space-x-10px">
           {store.isEditPage && (
             <Dropdown

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

@@ -0,0 +1,66 @@
+import { useEditor } from "@/modules/editor";
+import { Image, Loadmore } from "@queenjs/ui";
+import { defineUI } from "queenjs";
+import { Container, Draggable } from "vue-dndrop";
+import { any } from "vue-types";
+
+export default defineUI({
+  props: {
+    dataSource: any<
+      {
+        _id: string;
+        title: string;
+        thumbnail: string;
+      }[]
+    >().isRequired,
+  },
+  setup(props) {
+    const editor = useEditor();
+
+    return () => {
+      const { dataSource } = props;
+
+      return (
+        // <div class="flex flex-col overflow-hidden">
+        <Container
+          class="space-y-10px scrollbar"
+          behaviour="copy"
+          group-name="canvas"
+          animation-duration={0}
+          get-child-payload={(index: number) => {
+            return {
+              type: "tpl",
+              data: dataSource[index],
+            };
+          }}
+        >
+          {dataSource.map((item) => {
+            return (
+              <Draggable key={item._id}>
+                <div
+                  class="text-center leading-50px bg-dark-50 rounded draggable-item"
+                  key={item._id}
+                  title={item.title}
+                  onClick={() => editor.actions.clickFrameToDesign(item)}
+                >
+                  <Image
+                    class="w-full rounded pointer-events-none"
+                    src={item.thumbnail}
+                    size={240}
+                  />
+                </div>
+              </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>
+        // </div>
+      );
+    };
+  },
+});

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

@@ -1,27 +1,29 @@
 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 Frames from "./Frames";
 import { MySources } from "./MySources";
 
 export default defineUI({
   setup() {
     const editor = useEditor();
-    const { compUICtrl } = editor.controls;
+    const { compUICtrl, frameControl } = editor.controls;
 
     const tabs = [
-      { label: "模块组件", value: "senior" },
+      { label: "模板", value: "frame" },
+      { label: "平台组件", value: "senior" },
       { label: "我的组件", value: "user" },
       { label: "我的素材", value: "source" },
     ];
 
     const state = useReactive(() => ({
-      currTabType: "senior",
+      currTabType: "frame",
       basicComps() {
-        return ["Text", "Image", "Video", "Web3D"].map(key => compUICtrl.state.components.get(key) as any);
+        return ["Text", "Image", "Video", "Web3D"].map(
+          (key) => compUICtrl.state.components.get(key) as any
+        );
       },
       currComps() {
         return Array.from(compUICtrl.state.components.values()).filter(
@@ -33,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 (
@@ -82,13 +48,19 @@ export default defineUI({
               );
             })}
           </div>
-
-          {state.currTabType !== "source" ? (
+          {state.currTabType == "frame" && (
+            <Frames
+              class="flex-1 -mx-16px p-16px"
+              dataSource={frameControl.listCtrl.state.list}
+            />
+          )}
+          {(state.currTabType == "user" || state.currTabType == "senior") && (
             <CustomComps
               class="flex-1 -mx-16px p-16px"
               components={state.currComps}
             />
-          ) : (
+          )}
+          {state.currTabType == "source" && (
             <MySources class="flex-1 -mx-16px p-16px" />
           )}
         </div>
@@ -97,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/History.tsx

@@ -0,0 +1,42 @@
+import { useEditor } from "@/modules/editor";
+import { css } from "@linaria/core";
+import { defineUI } from "queenjs";
+import { TipIcons } from "../../TipIcons";
+
+export default defineUI({
+  setup() {
+    const { controls } = useEditor();
+
+    const { history } = controls.historyCtrl;
+
+    return () => {
+      return (
+        <div class="space-x-20px z-999">
+          <TipIcons.Undo
+            disable={
+              !controls.historyCtrl.state.enable || !history.state.canUndo
+            }
+            class={btnCls}
+            onClick={() => history.undo()}
+          />
+          <TipIcons.Redo
+            disable={
+              !controls.historyCtrl.state.enable || !history.state.canRedo
+            }
+            class={btnCls}
+            onClick={() => history.redo()}
+          />
+        </div>
+      );
+    };
+  },
+});
+
+const btnCls = css`
+  color: #fff;
+  font-size: 22px;
+  &.icon_disable {
+    color: #fff;
+    opacity: 0.5;
+  }
+`;

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

@@ -1,35 +1,28 @@
 import { useEditor } from "@/modules/editor";
+import { useLauncher } from "@/modules/launcher";
+import { css, cx } from "@linaria/core";
+import { Dropdown } from "ant-design-vue";
 import { defineUI } from "queenjs";
+import { reactive } from "vue";
 import { TipIcons } from "../../TipIcons";
-import { Dropdown } from "ant-design-vue";
-import { css } from "@linaria/core";
-import { useLauncher } from "@/modules/launcher";
+import BaseComp from "../Slider/SliderLeft/BaseComp";
 import AiText from "./AiText";
-import { reactive } from "vue";
+
 export default defineUI({
   setup() {
-    const { actions, controls } = useEditor();
+    const { actions } = useEditor();
     const launcher = useLauncher();
-    const { history } = controls.historyCtrl;
+
     const state = reactive({
       aiVisible: false,
     });
+
     return () => (
-      <>
-        <div class="absolute top-20px left-20px space-x-10px z-999">
-          <TipIcons.Undo
-            disable={ !controls.historyCtrl.state.enable || !history.state.canUndo}
-            class={btnCls}
-            onClick={() => history.undo()}
-          />
-          <TipIcons.Redo
-            disable={ !controls.historyCtrl.state.enable || !history.state.canRedo}
-            class={btnCls}
-            onClick={() => history.redo()}
-          />
-        </div>
-        <div class="absolute top-20px right-20px space-x-10px z-999">
+      <div class="flex items-center justify-between px-15px py-12px">
+        <div class="space-x-10px z-999 flex items-center">
+          <BaseComp />
           <Dropdown
+            overlayClassName={dropdownStyles}
             overlay={
               <AiText
                 onVisible={(v) => {
@@ -38,16 +31,18 @@ export default defineUI({
               />
             }
             destroyPopupOnHide={true}
-            placement="bottom"
+            placement="bottomLeft"
             visible={state.aiVisible}
           >
             <TipIcons.AiText
-              class={btnCls}
+              class={cx(btnCls, state.aiVisible && "active")}
               onClick={() => {
                 state.aiVisible = !state.aiVisible;
               }}
             />
           </Dropdown>
+        </div>
+        <div class="space-x-10px z-999">
           <TipIcons.Screenshot
             class={btnCls}
             onClick={() => actions.updateThumbnailByScreenshot(true)}
@@ -55,7 +50,7 @@ export default defineUI({
         </div>
         <div class="absolute bottom-20px right-20px z-999">
           <TipIcons.QueenService
-            class={btnCls}
+            class={bottomBtnStyles}
             onClick={() => {
               launcher.showModal(<launcher.components.Viewport />, {
                 width: "400px",
@@ -63,14 +58,26 @@ export default defineUI({
             }}
           />
         </div>
-      </>
+      </div>
     );
   },
 });
 
 const btnCls = css`
+  padding: 6px;
+  font-size: 18px;
+  &.active {
+    background-color: darken(@inf-component-bg, 3%);
+  }
+`;
+
+const bottomBtnStyles = css`
   padding: 10px;
   border-radius: 50%;
   background-color: #333;
   @apply shadow;
 `;
+
+const dropdownStyles = css`
+  /* transform: translateY(-20px); */
+`;

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

@@ -13,14 +13,14 @@ export default defineUI({
     Content,
     Toolbar,
   },
-  
+
   setup(props, { slots }) {
     return () => (
       <div class="flex flex-col h-1/1">
         <slots.Header class="p-16px bg-component border-bottom !border-2px" />
         <div class="flex flex-1 h-0">
           <slots.SliderLeft class="w-300px bg-component border-right !border-2px" />
-          <div class="flex-1 relative">
+          <div class="flex-1 relative flex flex-col">
             <slots.Toolbar />
             <slots.Content />
           </div>

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/controllers/FrameCtrl/index.ts

@@ -0,0 +1,23 @@
+import { ModuleControl } from "queenjs";
+import { EditorModule } from "../../module";
+import { PageListController } from "@queenjs/controllers";
+import { reactive } from "vue";
+
+export class FrameControl extends ModuleControl<EditorModule> {
+  state = reactive({});
+
+  listCtrl = new PageListController<
+    { _id: string; title: string; thumbnail: string },
+    any
+  >(this.module.config.httpConfig);
+
+  init() {
+    this.initData();
+  }
+
+  private async initData() {
+    this.listCtrl.setCrudPrefix("/sys/h5");
+    this.listCtrl.state.size = 10000;
+    await this.listCtrl.loadPage(1);
+  }
+}

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

@@ -422,9 +422,7 @@ export const editActions = EditorModule.action({
     this.store.setCurrComp(groupComp.children.default?.[0] as string);
   },
 
- 
-
-  handleSelectMoving(key:string) {
+  handleSelectMoving(key: string) {
     if (this.store.selected.length < 1) return;
     let x = 0,
       y = 0;
@@ -445,4 +443,31 @@ export const editActions = EditorModule.action({
     this.controls.selectCtrl.translate(x * 0.5, y * 0.5);
     this.controls.selectCtrl.assistCtrl?.flashDrawCardDists();
   },
+
+  // clickFrameToDesign 点击模板到组件
+  async clickFrameToDesign(record) {
+    const res = await queenApi.showConfirm({
+      title: "",
+      content: "要替换正在编辑的内容？",
+    });
+    if (!res) return;
+    const frameData = await this.https.getDesignDetail(record._id, {
+      isSys: true,
+    });
+    const { compMap, content, desc, thumbnail, title } = frameData.result;
+
+    const designData = {
+      ...this.store.designData,
+      compMap,
+      content,
+      desc,
+      thumbnail,
+      title,
+    };
+
+    this.actions.selectObjs([]);
+    this.store.setCurrComp("root");
+    this.store.setDesignData(designData);
+    this.store.currStreamCardId = this.store.streamCardIds[0];
+  },
 });

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({
   // 模块初始化
@@ -13,6 +13,7 @@ export const initActions = EditorModule.action({
     const { historyCtrl } = this.controls;
     historyCtrl.bindActions(Object.keys(editActions));
     this.controls.compUICtrl.init();
+    this.controls.frameControl.init();
     this.controls.mediaCtrl.init();
     createProxyEffect(this.store, (type, paths, value, oldValue) => {
       if (
@@ -28,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) {

src/modules/editor/module/index.ts

@@ -22,6 +22,7 @@ import { manualActions } from "./actions/editWithManualHistory";
 import { wxController } from "@/controllers/wxController";
 import { ImageCropperCtrl } from "../controllers/CropperCtrl";
 import { MediaCtrl } from "../controllers/MediaCtrl/indext";
+import { FrameControl } from "../controllers/FrameCtrl";
 
 export class EditorModule extends ModuleRoot {
   config = this.setConfig({
@@ -42,7 +43,7 @@ export class EditorModule extends ModuleRoot {
     transform: (state) => createProxy(state),
   });
   helper = this.createHelper([helpers, editHelpers]);
-    
+
   controls = {
     uploader: new UploadController({
       httpConfig: {
@@ -59,6 +60,7 @@ export class EditorModule extends ModuleRoot {
     historyCtrl: new HistoryCtrl(this),
     pickCtrl: new ImagePickController(),
     compUICtrl: new CompUICtrl(this),
+    frameControl: new FrameControl(this),
     selectCtrl: new SelectCtrl(this),
     cropCtrl: new ImageCropperCtrl(this),
     mediaCtrl: new MediaCtrl(this),

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