resource

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

@@ -1,40 +1,108 @@
+import { Tag } from "ant-design-vue";
+import dayjs from "dayjs";
+import { defineComponent } from "vue";
 import { Container, Draggable } from "vue-dndrop";
-import { any, bool, string } from "vue-types";
+import { any, array, bool } from "vue-types";
 
+import Empty from "@/components/Empty";
 import { useEditor } from "@/modules/editor";
 import { ICompKeys } from "@/modules/editor/typings";
 import { useResource } from "@/modules/resource";
 import { useAuth } from "@queenjs-modules/auth";
-import { Image } from "@queenjs/ui";
+import { Image, Loadmore } from "@queenjs/ui";
 import { useReactive } from "@queenjs/use";
-import { Tag } from "ant-design-vue";
-import dayjs from "dayjs";
 import { defineUI, queenApi } from "queenjs";
 import Menu from "./Menu";
-import Empty from "@/components/Empty";
 
 export default defineUI({
-  props: {
-    compType: string<"user" | "senior">(),
-  },
-  setup(props) {
+  setup() {
     const editor = useEditor();
+    const resource = useResource();
+    const { sysCompListCtrl } = resource.controls;
     const { compUICtrl } = editor.controls;
+    sysCompListCtrl.loadPage(1);
 
     const state = useReactive(() => ({
       currComps() {
         return Array.from(compUICtrl.state.components.values()).filter(
-          (item) => props.compType === item.compType
+          (item) => "senior" === item.compType
         );
       },
     }));
 
     return () => {
+      const dataSource = sysCompListCtrl.state.list;
       return (
-        <Comp
-          components={state.currComps}
-          taggable={props.compType == "user"}
-        />
+        <div>
+          <Comp components={state.currComps} taggable={false} />
+          <UserComps dataSource={dataSource} />
+          {dataSource.length == 0 ? null : (
+            <Loadmore
+              class="mt-20px"
+              loading={sysCompListCtrl.state.loading}
+              canLoad={sysCompListCtrl.state.canLoadNext}
+              onChange={sysCompListCtrl.loadNextPage}
+            />
+          )}
+        </div>
+      );
+    };
+  },
+});
+
+export const UserComps = defineComponent({
+  props: {
+    dataSource: array<{
+      createTime?: string;
+      thumbnail?: string;
+      title?: string;
+      updateTime?: string;
+      _id?: string;
+    }>().isRequired,
+  },
+
+  setup(props) {
+    const editor = useEditor();
+
+    return () => {
+      const { dataSource } = props;
+      return (
+        <Container
+          class="grid gap-10px mt-10px"
+          behaviour="copy"
+          group-name="canvas"
+          animation-duration={0}
+          get-child-payload={(index: number) => {
+            return {
+              type: "CompCard",
+              data: { id: dataSource[index]._id, isSys: true },
+            };
+          }}
+        >
+          {dataSource.map((comp) => {
+            return (
+              <Draggable>
+                <div
+                  class="text-center leading-50px bg-dark-50 rounded draggable-item relative"
+                  key={comp._id}
+                  title={comp.title}
+                >
+                  <Image
+                    class="w-full rounded"
+                    src={comp.thumbnail}
+                    onClick={() => {
+                      editor.actions.clickCompUserToDesign(
+                        comp._id || "",
+                        true
+                      );
+                    }}
+                    size={240}
+                  />
+                </div>
+              </Draggable>
+            );
+          })}
+        </Container>
       );
     };
   },

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

@@ -1,14 +1,22 @@
+import Empty from "@/components/Empty";
 import { useEditor } from "@/modules/editor";
 import { ICompKeys } from "@/modules/editor/typings";
+import { useResource } from "@/modules/resource";
+import { Loadmore } from "@queenjs/ui";
 import { useReactive } from "@queenjs/use";
 import { defineComponent } from "vue";
 import { Container, Draggable } from "vue-dndrop";
+import { UserComps } from "./CustomComps";
 
 export default defineComponent({
   setup() {
     const editor = useEditor();
     const { compUICtrl } = editor.controls;
 
+    const resource = useResource();
+    const { sysShapeListCtrl } = resource.controls;
+    sysShapeListCtrl.loadPage(1);
+
     const state = useReactive(() => ({
       basicComps() {
         return [
@@ -25,8 +33,10 @@ export default defineComponent({
     }));
 
     return () => {
+      const dataSource = sysShapeListCtrl.state.list;
       return (
         <div class="flex-1 overflow-x-hidden overflow-y-auto scrollbar">
+          <div class="my-10px">默认</div>
           <Container
             class="grid grid-cols-3 gap-10px"
             behaviour="copy"
@@ -53,6 +63,18 @@ export default defineComponent({
               );
             })}
           </Container>
+          <div class="my-20px">组合</div>
+          <UserComps dataSource={dataSource} />
+          {dataSource.length == 0 ? (
+            <Empty />
+          ) : (
+            <Loadmore
+              class="mt-20px"
+              loading={sysShapeListCtrl.state.loading}
+              canLoad={sysShapeListCtrl.state.canLoadNext}
+              onChange={sysShapeListCtrl.loadNextPage}
+            />
+          )}
         </div>
       );
     };

src/modules/editor/components/Viewport/Slider/SliderLeft/Shapes.v1.tsx

@@ -1,67 +0,0 @@
-import { Container, Draggable } from "vue-dndrop";
-
-import { useEditor } from "@/modules/editor";
-import { useResource } from "@/modules/resource";
-import { Image, Loadmore } from "@queenjs/ui";
-import Empty from "@queenjs/ui/empty";
-import { defineUI } from "queenjs";
-
-export default defineUI({
-  setup() {
-    const editor = useEditor();
-    const resource = useResource();
-    resource.controls.sysSvgListCtrl.hasLimit = true;
-    resource.controls.sysSvgListCtrl.loadPage(1);
-
-    return () => {
-      const ctrl = resource.controls.sysSvgListCtrl;
-      const dataSource = ctrl.state.list;
-
-      return (
-        <div class="flex-1 overflow-x-hidden overflow-y-auto scrollbar">
-          <Container
-            class="grid grid-cols-4 gap-8px"
-            behaviour="copy"
-            group-name="canvas"
-            animation-duration={0}
-            get-child-payload={(index: number) => {
-              return {
-                type: "svg",
-                data: dataSource[index],
-              };
-            }}
-          >
-            {dataSource.map((item: any) => {
-              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.clickTplToDesign(item)}
-                  >
-                    <Image
-                      class="w-full p-10px rounded pointer-events-none"
-                      src={item.file.url}
-                      // size={240}
-                    />
-                  </div>
-                </Draggable>
-              );
-            })}
-          </Container>
-          {dataSource.length == 0 ? (
-            <Empty />
-          ) : (
-            <Loadmore
-              class="mt-20px"
-              loading={ctrl.state.loading}
-              canLoad={ctrl.state.canLoadNext}
-              onChange={ctrl.loadNextPage}
-            />
-          )}
-        </div>
-      );
-    };
-  },
-});

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

@@ -3,11 +3,20 @@ import { Button } from "ant-design-vue";
 import { defineUI } from "queenjs";
 import { css } from "@linaria/core";
 import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { useResource } from "@/modules/resource";
+import { UserComps } from "./CustomComps";
+import { Loadmore } from "@queenjs/ui";
+import Empty from "@/components/Empty";
 export default defineUI({
   setup() {
     const editor = useEditor();
 
+    const resource = useResource();
+    const { sysTextListCtrl } = resource.controls;
+    sysTextListCtrl.loadPage(1);
+
     return () => {
+      const dataSource = sysTextListCtrl.state.list;
       return (
         <div class="pt-20px">
           <Button
@@ -67,6 +76,18 @@ export default defineUI({
               </div>
             </div>
           </div>
+          <div class="my-20px">组合</div>
+          <UserComps dataSource={dataSource} />
+          {dataSource.length == 0 ? (
+            <Empty />
+          ) : (
+            <Loadmore
+              class="mt-20px"
+              loading={sysTextListCtrl.state.loading}
+              canLoad={sysTextListCtrl.state.canLoadNext}
+              onChange={sysTextListCtrl.loadNextPage}
+            />
+          )}
         </div>
       );
     };

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

@@ -38,7 +38,6 @@ const tabs = [
     title: "组合",
     icon: IconCombination,
     component: CustomComps,
-    props: { compType: "senior" },
   },
   {
     title: "文字",
@@ -117,8 +116,8 @@ const tabs = [
 export default defineUI({
   setup() {
     const state = reactive({
-      tabIndex: 0,
-      list: [0],
+      tabIndex: 6,
+      list: [6],
     });
 
     return () => {

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

@@ -35,9 +35,9 @@ export class CompUICtrl extends ModuleControl<EditorModule> {
   init() {
     this.state.components.clear();
     this.initDefaultUI();
-    if (this.store.isEditMode) {
-      this.initUserUI();
-    }
+    // if (this.store.isEditMode) {
+    //   this.initUserUI();
+    // }
   }
   private initDefaultUI() {
     Object.entries({ ...basicUI, ...customUI }).forEach(([key, value]) => {
@@ -52,33 +52,33 @@ export class CompUICtrl extends ModuleControl<EditorModule> {
       });
     });
   }
-  private async initUserUI() {
-    const listCtrl = new PageListController<
-      { _id: string; title: string; thumbnail: string },
-      any
-    >(this.module.config.httpConfig);
-    listCtrl.setCrudPrefix("/frame");
-    listCtrl.state.size = 999;
-    listCtrl.state.query = {type: "comp"};
+  // private async initUserUI() {
+  //   const listCtrl = new PageListController<
+  //     { _id: string; title: string; thumbnail: string },
+  //     any
+  //   >(this.module.config.httpConfig);
+  //   listCtrl.setCrudPrefix("/frame");
+  //   listCtrl.state.size = 999;
+  //   listCtrl.state.query = {type: "comp"};
 
-    await listCtrl.loadPage(1);
+  //   await listCtrl.loadPage(1);
 
-    listCtrl.state.list.forEach((d:any) => {
-      const compItem: CompItem = {
-        compKey: d._id,
-        _id: d._id,
-        compType: "user",
-        name: d.title,
-        createTime: d.createTime,
-        published: d.published,
-        thumbnail: d.thumbnail || Dict_Imgs.Default,
-        Component: markRaw(basicUI.Container.Component),
-        Form: markRaw(basicUI.Container.Form),
-        createComp: basicUI.Container.createComp,
-      };
-      this.state.components.set(d._id, compItem);
-    });
-  }
+  //   listCtrl.state.list.forEach((d:any) => {
+  //     const compItem: CompItem = {
+  //       compKey: d._id,
+  //       _id: d._id,
+  //       compType: "user",
+  //       name: d.title,
+  //       createTime: d.createTime,
+  //       published: d.published,
+  //       thumbnail: d.thumbnail || Dict_Imgs.Default,
+  //       Component: markRaw(basicUI.Container.Component),
+  //       Form: markRaw(basicUI.Container.Form),
+  //       createComp: basicUI.Container.createComp,
+  //     };
+  //     this.state.components.set(d._id, compItem);
+  //   });
+  // }
 
 
   createCompId(compKey: ICompKeys) {

src/modules/resource/index.ts

@@ -48,8 +48,9 @@ export class ResourceModule extends ModuleRoot {
     sysTplListCtrl: new PageListController(this.config?.httpConfig),
     sysImageListCtrl: new PageListController(this.config?.httpConfig),
     sysVideoListCtrl: new PageListController(this.config?.httpConfig),
-    sysSvgListCtrl: new PageListController(this.config?.httpConfig),
     sysCompListCtrl: new PageListController(this.config?.httpConfig),
+    sysShapeListCtrl: new PageListController(this.config?.httpConfig),
+    sysTextListCtrl: new PageListController(this.config?.httpConfig),
   };
   natsBus = new BusController();
   treeController = new TreeController(this.natsBus);
@@ -80,23 +81,6 @@ export class ResourceModule extends ModuleRoot {
     this.controls.custVideoListCtrl.state.size = 20;
     this.controls.custVideoListCtrl.state.query = { fileType: "video" };
 
-    this.controls.sysTplListCtrl.setCrudPrefix("/sys/h5");
-    this.controls.sysTplListCtrl.state.size = 20;
-    this.controls.sysTplListCtrl.state.query = { published: true};
-
-    this.controls.sysImageListCtrl.setCrudPrefix("/sys/source");
-    this.controls.sysImageListCtrl.state.size = 20;
-    this.controls.sysImageListCtrl.state.query = { fileType: "image" , isSvg: {$ne: true}, published: true};
-
-    this.controls.sysVideoListCtrl.setCrudPrefix("/sys/source");
-    this.controls.sysVideoListCtrl.state.size = 20;
-    this.controls.sysVideoListCtrl.state.query = { fileType: "video" , published: true};
-
-    this.controls.sysSvgListCtrl.setCrudPrefix("/sys/source");
-    this.controls.sysSvgListCtrl.state.size = 20;
-    this.controls.sysSvgListCtrl.state.query = { fileType: "image" , isSvg: true};
-    this.controls.sysSvgListCtrl.state.query = { published: true};
-
     this.controls.custCompListCtrl.setCrudPrefix("/frame");
     this.controls.custCompListCtrl.state.size = 20;
     this.controls.custCompListCtrl.state.query = { type: "comp"};
@@ -109,9 +93,30 @@ export class ResourceModule extends ModuleRoot {
     this.controls.custShapeListCtrl.state.size = 20;
     this.controls.custShapeListCtrl.state.query = { type: "shape"};
 
+    this.controls.sysTplListCtrl.setCrudPrefix("/sys/h5");
+    this.controls.sysTplListCtrl.state.size = 20;
+    this.controls.sysTplListCtrl.state.query = { published: true};
+
+    this.controls.sysImageListCtrl.setCrudPrefix("/sys/source");
+    this.controls.sysImageListCtrl.state.size = 20;
+    this.controls.sysImageListCtrl.state.query = { fileType: "image" , isSvg: {$ne: true}, published: true};
+
+    this.controls.sysVideoListCtrl.setCrudPrefix("/sys/source");
+    this.controls.sysVideoListCtrl.state.size = 20;
+    this.controls.sysVideoListCtrl.state.query = { fileType: "video" , published: true};
+
     this.controls.sysCompListCtrl.setCrudPrefix("sys/frame");
     this.controls.sysCompListCtrl.state.size = 20;
+    this.controls.sysCompListCtrl.state.query = { type: "comp", published: true};
+   
+    this.controls.sysShapeListCtrl.setCrudPrefix("/sys/frame");
+    this.controls.sysShapeListCtrl.state.size = 20;
+    this.controls.sysShapeListCtrl.state.query = { type: "shape", published: true};
    
+    this.controls.sysTextListCtrl.setCrudPrefix("/sys/frame");
+    this.controls.sysTextListCtrl.state.size = 20;
+    this.controls.sysTextListCtrl.state.query = { type: "text", published: true};
+
     this.natsBus.init();
   }
 }