source

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

@@ -0,0 +1,59 @@
+import { cx } from "@linaria/core";
+import { defineComponent } from "vue";
+import { Container, Draggable } from "vue-dndrop";
+import { array, bool, number, string } from "vue-types";
+
+import { useEditor } from "@/modules/editor";
+import { Image } from "@queenjs/ui";
+
+export const CompList = defineComponent({
+  props: {
+    columns: number().def(1),
+    dataSource: array<compType>().isRequired,
+    gap: string().def("10px"),
+    isSys: bool().isRequired,
+  },
+
+  setup(props) {
+    const editor = useEditor();
+
+    return () => {
+      const { columns, dataSource, gap, isSys } = props;
+      return (
+        <Container
+          class={cx("grid", `grid-cols-${columns}`, `gap-${gap}`)}
+          behaviour="copy"
+          group-name="canvas"
+          animation-duration={0}
+          get-child-payload={(index: number) => {
+            return {
+              type: "CompCard",
+              data: { id: dataSource[index]._id, isSys },
+            };
+          }}
+        >
+          {dataSource.map((comp) => {
+            return (
+              <Draggable>
+                <div
+                  key={comp._id}
+                  title={comp.title}
+                  class="draggable-item h-1/1 bg-light-50 rounded-2px cursor-pointer transition overflow-hidden hover:(opacity-80)"
+                >
+                  <Image
+                    class="w-full h-1/1 !object-contain"
+                    src={comp.thumbnail}
+                    onClick={() => {
+                      editor.actions.clickCompUserToDesign(comp._id, isSys);
+                    }}
+                    size={240}
+                  />
+                </div>
+              </Draggable>
+            );
+          })}
+        </Container>
+      );
+    };
+  },
+});

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

@@ -9,7 +9,7 @@ import Empty from "@/components/Empty";
 import { useEditor } from "@/modules/editor";
 import { useResource } from "@/modules/resource";
 import { useAuth } from "@queenjs-modules/auth";
-import { Image } from "@queenjs/ui";
+import { Image, Loadmore } from "@queenjs/ui";
 import { defineUI, queenApi } from "queenjs";
 import Menu from "./Menu";
 
@@ -38,7 +38,9 @@ export default defineUI({
     return () => {
       const { sourceType } = props;
 
-      if (listCtrl.state.list.length == 0) return <Empty class="pt-150px" />;
+      const dataSource = listCtrl.state.list;
+
+      if (dataSource.length == 0) return <Empty class="pt-150px" />;
 
       return (
         <div>
@@ -53,11 +55,11 @@ export default defineUI({
             get-child-payload={(index: number) => {
               return {
                 type: "CompCard",
-                data: { id: listCtrl.state.list[index]._id, isSys: isSys },
+                data: { id: dataSource[index]._id, isSys: isSys },
               };
             }}
           >
-            {listCtrl.state.list.map((item: any) => {
+            {dataSource.map((item: compType) => {
               const items = ["删除"];
 
               if (isSys) {
@@ -68,9 +70,9 @@ export default defineUI({
               return (
                 <Draggable>
                   <div
-                    class="text-center leading-50px bg-dark-50 rounded draggable-item relative"
-                    key={item.compKey}
-                    title={item.name}
+                    class="text-center leading-50px bg-dark-50 rounded draggable-item relative cursor-pointer"
+                    key={item._id}
+                    title={item.title}
                   >
                     <Image
                       class="w-full rounded"
@@ -89,7 +91,7 @@ export default defineUI({
                         {item.published ? "已发布" : "未发布"}
                       </Tag>
                     )}
-                    <div class="item_footer rounded-b-4px flex items-center justify-between p-4px">
+                    <div class="item_footer rounded-b-4px flex items-center justify-between p-4px bg-dark-50">
                       <div class="flex-1 w-0">
                         {/* <div class="text-white text-bold truncate">{record.title}</div> */}
                         <div class="flex items-center text-opacity-60 text-white text-12px">
@@ -117,6 +119,16 @@ export default defineUI({
               );
             })}
           </Container>
+          {dataSource.length == 0 ? (
+            <Empty class="pt-150px" />
+          ) : (
+            <Loadmore
+              class="mt-20px"
+              loading={listCtrl.state.loading}
+              canLoad={listCtrl.state.canLoadNext}
+              onChange={listCtrl.loadNextPage}
+            />
+          )}
         </div>
       );
     };

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

@@ -1,8 +1,7 @@
 import { Tag } from "ant-design-vue";
 import dayjs from "dayjs";
-import { defineComponent } from "vue";
 import { Container, Draggable } from "vue-dndrop";
-import { any, array, bool } from "vue-types";
+import { any, bool } from "vue-types";
 
 import Empty from "@/components/Empty";
 import { useEditor } from "@/modules/editor";
@@ -13,6 +12,7 @@ import { Image, Loadmore } from "@queenjs/ui";
 import { useReactive } from "@queenjs/use";
 import { defineUI, queenApi } from "queenjs";
 import Menu from "./Menu";
+import { CompList } from "./CompList";
 
 export default defineUI({
   setup() {
@@ -35,7 +35,7 @@ export default defineUI({
       return (
         <div>
           <Comp components={state.currComps} taggable={false} />
-          <UserComps dataSource={dataSource} />
+          <CompList dataSource={dataSource} isSys={true} />
           {dataSource.length == 0 ? null : (
             <Loadmore
               class="mt-20px"
@@ -50,64 +50,6 @@ export default defineUI({
   },
 });
 
-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>
-      );
-    };
-  },
-});
-
 const Comp = defineUI({
   props: {
     components: any<

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

@@ -6,7 +6,7 @@ import { Loadmore } from "@queenjs/ui";
 import { useReactive } from "@queenjs/use";
 import { defineComponent } from "vue";
 import { Container, Draggable } from "vue-dndrop";
-import { UserComps } from "./CustomComps";
+import { CompList } from "./CompList";
 
 export default defineComponent({
   setup() {
@@ -64,7 +64,7 @@ export default defineComponent({
             })}
           </Container>
           <div class="my-20px">组合</div>
-          <UserComps dataSource={dataSource} />
+          <CompList dataSource={dataSource} columns={3} isSys={true} />
           {dataSource.length == 0 ? (
             <Empty />
           ) : (

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

@@ -1,12 +1,12 @@
+import Empty from "@/components/Empty";
 import { useEditor } from "@/modules/editor";
-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 { css } from "@linaria/core";
 import { Loadmore } from "@queenjs/ui";
-import Empty from "@/components/Empty";
+import { Button } from "ant-design-vue";
+import { defineUI } from "queenjs";
+import { CompList } from "./CompList";
 export default defineUI({
   setup() {
     const editor = useEditor();
@@ -77,7 +77,7 @@ export default defineUI({
             </div>
           </div>
           <div class="my-20px">组合</div>
-          <UserComps dataSource={dataSource} />
+          <CompList dataSource={dataSource} columns={1} isSys={true} />
           {dataSource.length == 0 ? (
             <Empty />
           ) : (

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

@@ -116,8 +116,8 @@ const tabs = [
 export default defineUI({
   setup() {
     const state = reactive({
-      tabIndex: 6,
-      list: [6],
+      tabIndex: 0,
+      list: [0],
     });
 
     return () => {

src/modules/resource/index.ts

@@ -48,9 +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),
-    sysCompListCtrl: new PageListController(this.config?.httpConfig),
-    sysShapeListCtrl: new PageListController(this.config?.httpConfig),
-    sysTextListCtrl: new PageListController(this.config?.httpConfig),
+    sysCompListCtrl: new PageListController<compType, any>(this.config?.httpConfig),
+    sysShapeListCtrl: new PageListController<compType, any>(this.config?.httpConfig),
+    sysTextListCtrl: new PageListController<compType, any>(this.config?.httpConfig),
   };
   natsBus = new BusController();
   treeController = new TreeController(this.natsBus);

src/typings/pro.d.ts

@@ -21,4 +21,13 @@ declare module "vue-dndrop" {
   export const vueDndrop: any;
 }
 declare module "ckeditor5-line-height-latest/src/lineheight";
-declare module 'howler'
+declare module "howler";
+
+declare type compType = {
+  createTime?: string;
+  published?: boolean;
+  thumbnail?: string;
+  title?: string;
+  updateTime?: string;
+  _id: string;
+};