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

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

@@ -1,7 +1,7 @@
 import { cx } from "@linaria/core";
 import { Tag } from "ant-design-vue";
 import dayjs from "dayjs";
-import { onMounted, watch } from "vue";
+import { upperFirst } from "lodash";
 import { Container, Draggable } from "vue-dndrop";
 import { string } from "vue-types";
 
@@ -22,26 +22,18 @@ export default defineUI({
     const auth = useAuth();
     const resource = useResource();
 
-    const listCtrl = resource.controls.CustCompListCtrl;
+    const listCtrl = getCtrl();
     listCtrl.hasLimit = true;
+    listCtrl.loadPage(1);
 
     //@ts-ignore
     let isSys = (auth.store.userInfo.roles || []).indexOf("system") > -1;
 
-    onMounted(() => {
+    function getCtrl() {
+      const key = `cust${upperFirst(props.sourceType)}ListCtrl`;
       //@ts-ignore
-      listCtrl.state.query.type = props.sourceType;
-      listCtrl.loadPage(1);
-    });
-
-    watch(
-      () => props.sourceType,
-      () => {
-        //@ts-ignore
-        listCtrl.state.query.type = props.sourceType;
-        listCtrl.loadPage(1);
-      }
-    );
+      return resource.controls[key];
+    }
 
     return () => {
       const { sourceType } = props;
@@ -49,7 +41,7 @@ export default defineUI({
       if (listCtrl.state.list.length == 0) return <Empty class="pt-150px" />;
 
       return (
-        <div class="scrollbar">
+        <div>
           <Container
             class={cx(
               "grid gap-10px",

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

@@ -19,10 +19,10 @@ export const Sources = defineComponent({
     const resource = useResource();
 
     function getCurrCtrl() {
-      // sysImageListCtrl sysVideoListCtrl matImageListCtrl matVideoListCtrl
+      // sysImageListCtrl sysVideoListCtrl custImageListCtrl custVideoListCtrl
       if (props.sourceFrom == "user")
         return resource.controls[
-          props.sourceType === "Image" ? "matImageListCtrl" : "matVideoListCtrl"
+          props.sourceType === "Image" ? "custImageListCtrl" : "custVideoListCtrl"
         ];
       return resource.controls[
         props.sourceType === "Image" ? "sysImageListCtrl" : "sysVideoListCtrl"
@@ -57,7 +57,7 @@ export const Sources = defineComponent({
       const { sourceType } = props;
 
       return (
-        <div class="flex-1 overflow-x-hidden overflow-y-auto scrollbar">
+        <div>
           <Container
             class="grid grid-cols-2 gap-10px"
             behaviour="copy"

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

@@ -14,7 +14,7 @@ export default defineUI({
       const dataSource = ctrl.state.list;
 
       return (
-        <div class="flex-1 overflow-x-hidden overflow-y-auto scrollbar">
+        <div>
           <Container
             class="space-y-10px"
             behaviour="copy"

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

@@ -1,6 +1,7 @@
 import { cx } from "@linaria/core";
 import { Tooltip } from "ant-design-vue";
-import { computed, reactive } from "vue";
+import { defineComponent, reactive } from "vue";
+import { number, object } from "vue-types";
 
 import {
   IconAi,
@@ -115,70 +116,146 @@ const tabs = [
 
 export default defineUI({
   setup() {
-    // @ts-ignore
     const state = reactive({
       tabIndex: 0,
-      compIndexs: [0, 0, 0, 0, 0, 0, 0, 0, 0],
-      currentTab: computed(() => {
-        return tabs[state.tabIndex];
-      }),
-      currCompIndex: computed(() => {
-        return state.compIndexs[state.tabIndex];
-      }),
+      list: [0],
     });
 
     return () => {
-      const { tabIndex, currentTab, currCompIndex } = state;
-      const currComp = currentTab.component
-        ? currentTab
-        : currentTab.content?.[state.currCompIndex];
+      const { list, tabIndex } = state;
 
       return (
         <div class="h-full flex">
-          <div class="flex flex-col items-center w-70px py-10px border-right !border-2px overflow-x-hidden overflow-y-auto scrollbar">
-            {tabs.map((record, index) => {
-              return (
-                <>
-                  {index === tabs.length - 3 && <div class="flex-1"></div>}
-                  <div
-                    key={index}
-                    class={cx(
-                      "my-2px rounded cursor-pointer text-light-50 transition hover:(bg-[#1F1F1F] text-orange)",
-                      state.tabIndex == index && "bg-[#1F1F1F] text-orange"
-                    )}
-                    onClick={() => (state.tabIndex = index)}
-                  >
-                    <Tooltip title={record.title} placement="right">
-                      <record.icon class="px-15px py-10px text-28px" />
-                    </Tooltip>
-                  </div>
-                </>
-              );
-            })}
-          </div>
-          <div class="flex-1 h-1/1 overflow-hidden flex flex-col">
-            {currentTab.content && (
-              <div class="mt-15px mx-5px flex items-center justify-around space-x-1">
-                {currentTab.content?.map((item: any, index: number) => (
-                  <span
-                    class={cx(
-                      "px-14px py-9px transition cursor-pointer bg-[#303030] text-light-50 text-opacity-70 rounded-4px text-12px hover:(text-[#EA9E40])",
-                      currCompIndex == index &&
-                        "bg-[#EA9E40] bg-opacity-20 text-orange"
-                    )}
-                    onClick={() => (state.compIndexs[tabIndex] = index)}
-                  >
-                    {item?.title}
-                  </span>
-                ))}
-              </div>
-            )}
+          <PanelTabs
+            tabIndex={tabIndex}
+            onChange={(index) => {
+              if (!list.includes(index)) {
+                state.list.push(index);
+              }
+              state.tabIndex = index;
+            }}
+          />
+          {tabs.map((tab, index) => {
+            if (!list.includes(index)) return null;
+            return (
+              <PanelContent
+                key={index}
+                currentTab={tab}
+                class={tabIndex !== index && "hidden"}
+              />
+            );
+          })}
+        </div>
+      );
+    };
+  },
+});
+
+const PanelTabs = defineComponent({
+  props: {
+    tabIndex: number().isRequired,
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    return () => {
+      const { tabIndex } = props;
+      return (
+        <div class="flex flex-col items-center w-70px py-10px border-right !border-2px overflow-x-hidden overflow-y-auto scrollbar">
+          {tabs.map((record, index) => {
+            return (
+              <>
+                {index === tabs.length - 3 && <div class="flex-1"></div>}
+                <div
+                  key={index}
+                  class={cx(
+                    "my-2px rounded cursor-pointer text-light-50 transition hover:(bg-[#1F1F1F] text-orange)",
+                    tabIndex == index && "bg-[#1F1F1F] text-orange"
+                  )}
+                  onClick={() => emit("change", index)}
+                >
+                  <Tooltip title={record.title} placement="right">
+                    <record.icon class="px-15px py-10px text-28px" />
+                  </Tooltip>
+                </div>
+              </>
+            );
+          })}
+        </div>
+      );
+    };
+  },
+});
+
+const PanelContent = defineComponent({
+  props: {
+    currentTab: object().isRequired,
+  },
+  setup(props) {
+    const state = reactive({
+      currCompIndex: 0,
+      list: [0],
+    });
+
+    const SubTabs = () => {
+      const { currentTab } = props;
+      const { currCompIndex, list } = state;
+
+      if (!currentTab.content) return null;
+      return (
+        <div class="mt-15px mx-5px flex items-center justify-around space-x-1">
+          {currentTab.content?.map((item: any, index: number) => (
+            <span
+              class={cx(
+                "px-14px py-9px transition cursor-pointer bg-[#303030] text-light-50 text-opacity-70 rounded-4px text-12px hover:(text-[#EA9E40])",
+                currCompIndex == index &&
+                  "bg-[#EA9E40] bg-opacity-20 text-orange"
+              )}
+              onClick={() => {
+                if (!list.includes(index)) {
+                  state.list.push(index);
+                }
+                state.currCompIndex = index;
+              }}
+            >
+              {item?.title}
+            </span>
+          ))}
+        </div>
+      );
+    };
 
-            <currComp.component
-              class="flex-1 h-1/1 px-16px !my-10px overflow-y-auto"
-              {...currComp.props}
-            />
-          </div>
+    const Subcontent = () => {
+      const { currentTab } = props;
+      const { currCompIndex, list } = state;
+
+      const currComps = currentTab.component
+        ? [currentTab]
+        : currentTab.content;
+
+      return (
+        <>
+          {currComps.map((currComp: any, index: number) => {
+            if (!list.includes(index)) return null;
+            return (
+              <currComp.component
+                key={index}
+                class={cx(
+                  "flex-1 h-1/1 px-16px !my-10px overflow-x-hidden overflow-y-auto scrollbar",
+                  currCompIndex !== index && "hidden"
+                )}
+                {...currComp.props}
+              />
+            );
+          })}
+        </>
+      );
+    };
+
+    return () => {
+      return (
+        <div class="flex-1 h-1/1 overflow-hidden flex flex-col">
+          <SubTabs />
+          <Subcontent />
         </div>
       );
     };

src/modules/resource/index.ts

@@ -38,9 +38,11 @@ export class ResourceModule extends ModuleRoot {
     materialVideoListCtrl: new PageListController(this.config?.httpConfig),
 
     // 用户资源
-    matImageListCtrl: new PageListController(this.config?.httpConfig),
-    matVideoListCtrl: new PageListController(this.config?.httpConfig),
-    CustCompListCtrl: new PageListController(this.config?.httpConfig),
+    custImageListCtrl: new PageListController(this.config?.httpConfig),
+    custVideoListCtrl: new PageListController(this.config?.httpConfig),
+    custCompListCtrl: new PageListController(this.config?.httpConfig),
+    custTextListCtrl: new PageListController(this.config?.httpConfig),
+    custShapeListCtrl: new PageListController(this.config?.httpConfig),
 
     // 平台资源
     sysImageListCtrl: new PageListController(this.config?.httpConfig),
@@ -69,13 +71,13 @@ export class ResourceModule extends ModuleRoot {
     this.controls.materialVideoListCtrl.state.size = 18;
     this.controls.materialVideoListCtrl.state.query = { fileType: "video" };
 
-    this.controls.matImageListCtrl.setCrudPrefix("/source");
-    this.controls.matImageListCtrl.state.size = 20;
-    this.controls.matImageListCtrl.state.query = { fileType: "image" };
+    this.controls.custImageListCtrl.setCrudPrefix("/source");
+    this.controls.custImageListCtrl.state.size = 20;
+    this.controls.custImageListCtrl.state.query = { fileType: "image" };
 
-    this.controls.matVideoListCtrl.setCrudPrefix("/source");
-    this.controls.matVideoListCtrl.state.size = 20;
-    this.controls.matVideoListCtrl.state.query = { fileType: "video" };
+    this.controls.custVideoListCtrl.setCrudPrefix("/source");
+    this.controls.custVideoListCtrl.state.size = 20;
+    this.controls.custVideoListCtrl.state.query = { fileType: "video" };
 
     this.controls.sysImageListCtrl.setCrudPrefix("/sys/source");
     this.controls.sysImageListCtrl.state.size = 20;
@@ -90,9 +92,17 @@ export class ResourceModule extends ModuleRoot {
     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"};
+    this.controls.custCompListCtrl.setCrudPrefix("/frame");
+    this.controls.custCompListCtrl.state.size = 20;
+    this.controls.custCompListCtrl.state.query = { type: "comp"};
+
+    this.controls.custTextListCtrl.setCrudPrefix("/frame");
+    this.controls.custTextListCtrl.state.size = 20;
+    this.controls.custTextListCtrl.state.query = { type: "text"};
+    
+    this.controls.custShapeListCtrl.setCrudPrefix("/frame");
+    this.controls.custShapeListCtrl.state.size = 20;
+    this.controls.custShapeListCtrl.state.query = { type: "shape"};
 
     this.controls.sysCompListCtrl.setCrudPrefix("sys/frame");
     this.controls.sysCompListCtrl.state.size = 20;