模板

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/Viewport/Slider/SliderLeft/Frames.tsx

@@ -0,0 +1,63 @@
+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 props.components[index].compKey;
+          // }}
+        >
+          {dataSource.map((item) => {
+            return (
+              <Draggable>
+                <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>
+            );
+          })}
+        </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

@@ -6,22 +6,26 @@ import { defineUI } from "queenjs";
 import { Container, Draggable } from "vue-dndrop";
 import CustomComps from "./CustomComps";
 import { MySources } from "./MySources";
+import Frames from "./Frames";
 
 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(
@@ -82,13 +86,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>

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,29 @@ 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.getFrameDetail(record._id);
+    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

@@ -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 (

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

@@ -27,4 +27,11 @@ 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/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),