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

src/modules/editor/components/CompUI/basicUI/Polygon/component.tsx

@@ -7,6 +7,8 @@ import { CompUI } from "../..";
 import { values } from "lodash";
 import { Angle } from "@/modules/editor/controllers/SelectCtrl/objects/mathUtils";
 
+import {editState} from "./toolbar"
+
 function findNearestPoint(points: number[][], w:number, h:number, sx:number, sy:number) {
    const n = points.length;
    let minv = 100000;
@@ -77,11 +79,11 @@ export const Component = defineComponent({
                 if (points.length < 4) {
                     return;
                 }
-
+                editState.index = 0;
             } else {
                 points.splice(ret.index+1, 0, [x / w, y / h]);
+                editState.index = ret.index + 1;
             }
-
             draw();
         })
 
@@ -124,6 +126,7 @@ export const Component = defineComponent({
                 if (isDragingIndex != -1) {
                     e.preventDefault();
                     e.stopPropagation();
+                    editState.index = isDragingIndex;
 
                     const move =  function (e:MouseEvent){
                         if ( isDragingIndex == -1) return;

src/modules/editor/components/CompUI/basicUI/Polygon/toolbar.tsx

@@ -0,0 +1,123 @@
+import { useEditor } from "@/modules/editor";
+import { css } from "@linaria/core";
+import { Button, Divider, InputNumber, Select } from "ant-design-vue";
+import { defineComponent, reactive , effect, watch} from "vue";
+import { any, array } from "vue-types";
+
+import ToolbarsUI from "../../formItems/ToolbarsUI";
+import Slider from "../../formItems/Slider";
+import { ToolbarItem } from "@/modules/editor/objects/Toolbars/default";
+import _ from "lodash";
+
+
+
+const PointsComp = defineComponent({
+    props: {
+        value: any<{points: number[][], index: number}>().isRequired
+    },
+    emits: ["change"],
+
+    setup(props, { emit }) {
+        const state = reactive({ index: 0 })
+
+        watch(()=>props.value.index, ()=>{
+            state.index = props.value.index;
+        })
+
+        return () => {
+            const options = props.value.points.map((item, index) => { return { label: "顶点" + (index + 1), value: index } });
+            return (
+                <div class="flex items-center">
+                    <Select class="w-82px" value={state.index} options={options} onChange={v => {
+                        state.index = v as number;
+                    }}>
+                    </Select>
+                    {
+                        props.value.points.length > 0 && <>
+                           <span class="ml-10px">X:</span> <Slider class="w-140px" value={props.value.points[state.index][0]} min={0} max={1} step={0.01} onChange={(v) => {
+                                const ps = props.value.points.slice(0);
+                                ps[state.index][0] = v;
+                                emit("change", ps);
+                            }} />
+
+                            <span  class="ml-10px">Y:</span> <Slider class="w-140px" value={props.value.points[state.index][1]} min={0} max={1} step={0.01} onChange={(v) => {
+                                const ps = props.value.points.slice(0);
+                                ps[state.index][1] = v;
+                                emit("change", ps);
+                            }} />
+                        </>
+                    }
+                </div>
+            )
+        }
+    },
+})
+
+const PolygonToolbar = defineComponent({
+    props: {
+        value: any<{ points: number[][] }>().isRequired,
+    },
+
+    setup(props) {
+        const { actions } = useEditor();
+
+        const toolbarColumns = [
+            {
+                component: () => (
+                    <Divider
+                        type="vertical"
+                        style={{ fontSize: "26px", borderColor: "#1f1f1f" }}
+                    />
+                ),
+            },
+            {
+                dataIndex: "value.points",
+                component: PointsComp,
+                getValue(points:any, data:any) {
+                    return {points, index: data.index};
+                }
+            },
+        ];
+
+        return () => {
+            console.log("prop value------------", props.value);
+
+            return (
+                <div class={[ToolbarStyle, "flex items-center"]}>
+                    <ToolbarsUI
+                        data={props.value}
+                        columns={toolbarColumns}
+                        onChange={(e: { dataIndex: string; value: any }) => {
+                            _.set(props.value, e.dataIndex,e.value);
+                        }}
+                    />
+                </div>
+            );
+        };
+    },
+});
+const ToolbarStyle = css``;
+
+const editState = reactive({
+    value: {},
+    index: 0
+})
+
+const toolbar = new ToolbarItem({
+        component: PolygonToolbar,
+        getVisible: (comp) =>  !!comp && comp.compKey == "Polygon",
+        
+        getValue: (comp)=>{
+                // editState.value = comp.value;
+                effect(()=>{
+                    editState.value = comp.value;
+                })
+                return editState;
+        },
+        onClick(comp) {
+            // this.actions.setCompLayer(comp, -1);
+            console.log("click");
+        },
+});
+
+export {toolbar, editState};

src/modules/editor/components/CompUI/defines/formOpts/createColorOpts.ts

@@ -1,10 +1,30 @@
 import { ColumnItem } from "@queenjs/components/FormUI";
 import BaseColorPicker from "../../formItems/BaseColorPicker";
-// import { colorToHex, hexToColor } from "@queenjs/utils";
+import { colorToHex, hexToColor } from "@queenjs/utils";
 
 export function createColorOpts(): Pick<
   ColumnItem,
   "getValue" | "changeExtra" | "component" | "itemProps"
+> {
+  return {
+    component: "ColorPicker",
+    getValue(v) {
+      try {
+        return hexToColor(v);
+      } catch (error) {
+        return [0, 0, 0];
+      }
+    },
+    changeExtra(data) {
+      data.value = colorToHex(data.value);
+      return data;
+    },
+  };
+}
+
+export function createColorOpts2(): Pick<
+  ColumnItem,
+  "getValue" | "changeExtra" | "component" | "itemProps"
 > {
   return {
     component: BaseColorPicker,
@@ -13,16 +33,9 @@ export function createColorOpts(): Pick<
     },
     getValue(v) {
       return v || "#ffffff";
-      // try {
-      //   return hexToColor(v);
-      // } catch (error) {
-      //   return [0, 0, 0];
-      // }
     },
     changeExtra(data) {
       return data || "#ffffff";
-      //   data.value = colorToHex(data.value);
-      //   return data;
     },
   };
 }

src/modules/editor/components/CompUI/formItems/BaseColorPicker.tsx

@@ -19,14 +19,14 @@ const defaultColor = [
   // "rgba(156, 39, 176, 1)",
   // "rgba(103, 58, 183, 1)",
   // "rgba(63, 81, 181, 1)",
-  "rgba(33, 150, 243, 1)",
+  // "#2196F3",
   // "rgba(3, 169, 244, 1)",
-  "rgba(0, 188, 212, 1)",
-  "rgba(0, 150, 136, 1)",
-  "rgba(76, 175, 80, 1)",
-  "rgba(139, 195, 74, 1)",
-  "rgba(205, 220, 57, 1)",
-  "rgba(255, 235, 59, 1)",
+  // "rgba(0, 188, 212, 1)",
+  // "rgba(0, 150, 136, 1)",
+  // "rgba(76, 175, 80, 1)",
+  // "rgba(139, 195, 74, 1)",
+  // "rgba(205, 220, 57, 1)",
+  // "#FFEB3B",
   // "rgba(255, 193, 7, 1)",
 ];
 

src/modules/editor/components/CompUI/formItems/ToolbarsUI.tsx

@@ -11,7 +11,7 @@ export interface ColumnItem {
   setterIndex?: string;
   props?: { [name: string]: any };
   itemProps?: { [name: string]: any };
-  getValue?: (v: any) => any;
+  getValue?: (v: any, data?:any) => any;
   isDisable?: (value: any, data: any) => boolean;
   isLoading?: (value: any, data: any) => boolean;
   isVisible?: (value: any, data: any) => boolean;
@@ -90,10 +90,18 @@ export const renderFormItem = (props: {
   //   const itemValue = _.get(data, column.dataIndex);
   //   return column.getValue ? column.getValue(itemValue) : itemValue;
   // });
-  const editor = props.editor;
-  const compValue = editor ? editor.commands.get(column.dataIndex) : "";
-  console.log(column.dataIndex, compValue.value);
+
+  // const editor = props.editor;
+  // const compValue = editor ? editor.commands.get(column.dataIndex) : "";
+  // console.log(column.dataIndex, compValue.value);
   
+  const compValue = computed(() => {
+    const { data, column } = props;
+    if (!column.dataIndex) return;
+    const itemValue = _.get(data, column.dataIndex);
+    return column.getValue ? column.getValue(itemValue, data) : itemValue;
+  });
+
   const changeVal = (value: any, ...args: any[]) => {
     const { column } = props;
     let params = {

src/modules/editor/components/TipIcons/index.ts

@@ -20,6 +20,7 @@ import {
   IconCamera,
   IconCube,
   IconDelete,
+  IconEdit,
   IconEyeOff,
   IconEyeOn,
   IconLock,
@@ -46,6 +47,11 @@ export const TipIcons = {
     icons: [IconAlignL, IconAlignC, IconAlignR],
     tips: ["左对齐", "居中", "右对齐"],
   }),
+  Edit: createTipIcon({
+    icons: [IconEdit],
+    tips: ["编辑"],
+  }),
+  
   Position: createTipIcon({
     icons: [IconFloatOff, IconFloatOn],
     tips: ["开启浮动", "关闭浮动"],

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-4px 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

@@ -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";
 
@@ -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";
 
@@ -22,34 +22,28 @@ 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;
 
-      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 class="scrollbar">
+        <div>
           <Container
             class={cx(
               "grid gap-10px",
@@ -61,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) {
@@ -76,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"
@@ -97,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">
@@ -125,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,40 +1,50 @@
+import { Tag } from "ant-design-vue";
+import dayjs from "dayjs";
 import { Container, Draggable } from "vue-dndrop";
-import { any, bool, string } from "vue-types";
+import { any, 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";
+import { CompList } from "./CompList";
 
 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} />
+          <CompList dataSource={dataSource} isSys={true} class="mt-10px" />
+          {dataSource.length == 0 ? null : (
+            <Loadmore
+              class="mt-20px"
+              loading={sysCompListCtrl.state.loading}
+              canLoad={sysCompListCtrl.state.canLoadNext}
+              onChange={sysCompListCtrl.loadNextPage}
+            />
+          )}
+        </div>
       );
     };
   },

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 { CompList } from "./CompList";
 
 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>
+          <CompList dataSource={dataSource} columns={3} isSys={true} />
+          {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.clickFrameToDesign(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/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 → src/modules/editor/components/Viewport/Slider/SliderLeft/Templates/index.tsx

@@ -1,5 +1,6 @@
 import Empty from "@/components/Empty";
 import { useEditor } from "@/modules/editor";
+import { useResource } from "@/modules/resource";
 import { Image, Loadmore } from "@queenjs/ui";
 import { defineUI } from "queenjs";
 import { Container, Draggable } from "vue-dndrop";
@@ -7,14 +8,15 @@ import { Container, Draggable } from "vue-dndrop";
 export default defineUI({
   setup() {
     const editor = useEditor();
-    const { frameControl } = editor.controls;
+    const source = useResource();
+    const ctrl = source.controls.sysTplListCtrl;
+    ctrl.loadPage(1);
 
     return () => {
-      const ctrl = frameControl.listCtrl;
       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"
@@ -27,7 +29,7 @@ export default defineUI({
               };
             }}
           >
-            {dataSource.map((item) => {
+            {dataSource.map((item: any) => {
               return (
                 <Draggable key={item._id}>
                   <div
@@ -35,7 +37,7 @@ export default defineUI({
                     key={item._id}
                     title={item.title}
                     style={{ aspectRatio: 1 }}
-                    onClick={() => editor.actions.clickFrameToDesign(item)}
+                    onClick={() => editor.actions.clickTplToDesign(item)}
                   >
                     <Image
                       class="w-full rounded pointer-events-none"

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

@@ -1,13 +1,22 @@
+import Empty from "@/components/Empty";
 import { useEditor } from "@/modules/editor";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { useResource } from "@/modules/resource";
+import { css } from "@linaria/core";
+import { Loadmore } from "@queenjs/ui";
 import { Button } from "ant-design-vue";
 import { defineUI } from "queenjs";
-import { css } from "@linaria/core";
-import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { CompList } from "./CompList";
 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>
+          <CompList dataSource={dataSource} columns={1} isSys={true} />
+          {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

@@ -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,
@@ -37,7 +38,6 @@ const tabs = [
     title: "组合",
     icon: IconCombination,
     component: CustomComps,
-    props: { compType: "senior" },
   },
   {
     title: "文字",
@@ -115,70 +115,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/editor/components/Viewport/Toolbar/index.tsx

@@ -4,7 +4,7 @@ import { css } from "@linaria/core";
 import { defineUI } from "queenjs";
 import { TipIcons } from "../../TipIcons";
 
-import { TopToolbars } from "@/modules/editor/objects/Toolbars/topToolbars";
+import { TopToolbarsLeft, TopToolbarsRight } from "@/modules/editor/objects/Toolbars/topToolbars";
 import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 
 export default defineUI({
@@ -15,13 +15,16 @@ export default defineUI({
     
     return () => {
       const comp = helper.findComp(store.selected[0])
-      const tools = comp ? TopToolbars.filter(t => t.getVisible.call(editor, comp)) : [];
+      const toolsLeft = comp ? TopToolbarsLeft.filter(t => t.getVisible.call(editor, comp)) : [];
+      const toolsRight = comp ? TopToolbarsRight.filter(t => t.getVisible.call(editor, comp)) : [];
+
       return (
         <div>
           {
-            <div class={"p-10px h-50px flex items-center"}>
+            <div class={"p-10px h-50px flex items-center justify-between"}>
+              <div class="flex-grow flex items-center">
               {
-                tools.map((item) => {
+                toolsLeft.map((item) => {
                   return (
                     <item.component
                       class="p-4px"
@@ -31,6 +34,20 @@ export default defineUI({
                   );
                 })
               }
+              </div>
+              <div class="flex items-center">
+                {
+                   toolsRight.map((item) => {
+                    return (
+                      <item.component
+                        class="p-4px"
+                        value={item.getValue?.(comp as DesignComp)}
+                        onClick={() => item.onClick.call(editor, comp as DesignComp)}
+                      />
+                    );
+                  })
+                }
+              </div>
             </div>
           }
           <div class="absolute right-25px top-80px space-x-10px z-1001">

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

@@ -44,7 +44,7 @@ export class DragAddCtrl extends ModuleControl<EditorModule> {
   }
 
   async dragTpl() {
-    await this.actions.clickFrameToDesign(this.dragingCompData);
+    await this.actions.clickTplToDesign(this.dragingCompData);
     this.dragingCompKey = "";
   }
 

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

@@ -1,24 +0,0 @@
-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 = 10;
-    this.listCtrl.hasLimit = true;
-    await this.listCtrl.loadPage(1);
-  }
-}

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

@@ -476,7 +476,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     if (isClick) {
       this._state = MODE_NONE;
-      this.actions.pickComp(this._downClickedCompId);
+      this._selectObjs(this._downClickedCompId?[this._downClickedCompId]:[], e)
+      // this.actions.pickComp(this._downClickedCompId);
     }
 
     if (this._state == MODE_SEL_RECT && !isClick) {
@@ -487,7 +488,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         this._lastSelRect[0] - box.left,
         this._lastSelRect[1] - box.top,
         this._lastSelRect[2],
-        this._lastSelRect[3]
+        this._lastSelRect[3],
+        e
       );
     }
 
@@ -559,11 +561,11 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     history.submit();
   }
 
-  rectSelect(x: number, y: number, width: number, height: number) {
+  rectSelect(x: number, y: number, width: number, height: number, e:MouseEvent) {
     const childs =
       this.compMap[this.store.currStreamCardId].children.default || [];
     let n = childs.length;
-    const outs = [];
+    const outs:string[] = [];
     while (n--) {
       const o = new CompObject(this.compMap[childs[n]]);
       if (o.testRect({ x, y, w: width, h: height }, true)) {
@@ -571,8 +573,28 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         outs.push(o.comp.id);
       }
     }
-    this.actions.selectObjs(outs);
-    if (outs.length < 1) {
+    this._selectObjs(outs, e);
+  }
+
+  _selectObjs( outs:string[], e:MouseEvent) {
+
+    let objs = this.store.selected.slice(0);
+    if (e.ctrlKey) {
+      objs.forEach(o=>{
+        if (outs.indexOf(o) == -1) {
+          outs.push(o);
+        }
+      })
+    }
+    let selected = outs;
+    if (e.shiftKey) {//反选
+      selected = [];
+      objs.forEach(o=>{
+         if (outs.indexOf(o) == -1) selected.push(o); 
+      })
+    }
+    this.actions.selectObjs(selected);
+    if (selected.length < 1) {
       this.actions.pickComp(this.store.currStreamCardId);
     }
   }

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

@@ -701,8 +701,8 @@ export const editActions = EditorModule.action({
     this.controls.selectCtrl.assistCtrl?.flashDrawCardDists();
   },
 
-  // clickFrameToDesign 点击模板到组件
-  async clickFrameToDesign(record) {
+  // 点击模板
+  async clickTplToDesign(record) {
     const res = await queenApi.showConfirm({
       title: "",
       content: "要替换正在编辑的内容？",

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

@@ -11,8 +11,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();
+      this.controls.mediaCtrl.init();
     createProxyEffect(this.store, (type, paths, value, oldValue) => {
       if (
         paths[0] === "designData" ||

src/modules/editor/module/index.ts

@@ -22,7 +22,6 @@ 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({
@@ -60,7 +59,6 @@ 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/modules/editor/module/stores/index.ts

@@ -22,6 +22,8 @@ export const store = EditorModule.store({
     selected: [] as string[], //选中的组件
     selectId: "", //选中的id唯一标识一次选中
     croppImage: "", //裁剪图片
+    compEditMode: false, //组件编辑模式
+    compEditReslut: 0 // -1 取消， 1 确定 
   }),
   getters: {
     isEditMode(): boolean {

src/modules/editor/objects/Toolbars/comps.ts

@@ -0,0 +1,12 @@
+import { createToolbars } from "./default";
+import { Toolbar } from "@/modules/editor/components/CompUI/basicUI/Text";
+
+export const Toolbars = createToolbars( {
+    text: {
+        component: Toolbar,
+        getVisible: (comp) =>  !!comp && comp.compKey == "Text",
+        onClick(comp) {
+            // this.actions.setCompLayer(comp, -1);
+        },
+    },
+});

src/modules/editor/objects/Toolbars/default.ts

@@ -13,7 +13,7 @@ type ItemParams = Pick<ToolbarItem, "getValue" | "component" | "onClick"> & {
 
 export class ToolbarItem {
   component: any;
-  getValue?: (c: DesignComp) => number;
+  getValue?: (c: DesignComp) => any;
   onClick: (this: EditorModule, c: DesignComp) => void;
   getVisible!: typeof getVisible;
 
@@ -138,6 +138,46 @@ export const toolbars = createToolbars({
       this.actions.setCompPosition(comp);
     },
   },
+   // 编辑模式
+  editor: {
+    component: TipIcons.Edit,
+    getVisible(comp) {
+      return false;// comp.compKey == "Polygon" && !this.store.compEditMode 
+    },
+    onClick(comp) {
+       console.log("clicked edit");
+      // this.actions.setCompPosition(comp);
+      this.store.compEditMode = true;
+      this.store.compEditReslut = -1;
+    },
+  },
+
+  ok: {
+    component: TipIcons.Right,
+    getVisible(comp) {
+  
+      return this.store.compEditMode 
+    },
+    onClick(comp) {
+       console.log("clicked ok ");
+      this.store.compEditReslut = 1;
+      this.store.compEditMode = false;
+    },
+  },
+
+  cancel: {
+    component: TipIcons.Cross,
+    getVisible(comp) {
+      return this.store.compEditMode 
+    },
+    onClick(comp) {
+      console.log("clicked cancel ");
+      // this.actions.setCompPosition(comp);
+      this.store.compEditReslut = -1;
+      this.store.compEditMode = false;
+    },
+  },
+
   // 全屏尺寸
   fullWidth: {
     component: TipIcons.FullWidth,

src/modules/editor/objects/Toolbars/text.ts

@@ -1,12 +0,0 @@
-import { createToolbars } from "./default";
-import { Toolbar } from "@/modules/editor/components/CompUI/basicUI/Text";
-
-export const TextToolbar = createToolbars({
-  editor: {
-    component: Toolbar,
-    getVisible: (comp) => !!comp && comp.compKey == "Text",
-    onClick(comp) {
-      // this.actions.setCompLayer(comp, -1);
-    },
-  },
-});

src/modules/editor/objects/Toolbars/topToolbars.ts

@@ -1,12 +1,21 @@
 import {toolbars, ToolbarItem } from "./default";
-import { TextToolbar } from "./text";
+import { Toolbars } from "./comps";
+import { toolbar } from "../../components/CompUI/basicUI/Polygon/toolbar";
 
-export const TopToolbars: ToolbarItem[] = [
+export const TopToolbarsLeft: ToolbarItem[] = [
 
-    TextToolbar.editor,
+    Toolbars.text,
     toolbars.layerUp,
     toolbars.layerDown,
     toolbars.align,
     toolbars.delete,
     toolbars.imageCropper,
+
+    toolbar,
+]
+
+export const TopToolbarsRight: ToolbarItem[] = [
+    toolbars.editor,
+    toolbars.ok,
+    toolbars.cancel,
 ]

src/modules/resource/index.ts

@@ -38,15 +38,19 @@ 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),
 
     // 平台资源
+    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),
+    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);
@@ -69,13 +73,29 @@ 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.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.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;
@@ -85,18 +105,18 @@ export class ResourceModule extends ModuleRoot {
     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"};
-
     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();
   }
 }

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;
+};