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

src/modules/editor/components/CompUI/basicUI/Text/TextToolbar.tsx

@@ -10,54 +10,50 @@ import { LinkOutlined } from "@ant-design/icons-vue";
 
 import { css } from "@linaria/core";
 import { Button, Divider, InputNumber, Select } from "ant-design-vue";
-import { defineComponent } from "vue";
+import { defineComponent, nextTick } from "vue";
 import { any } from "vue-types";
 
 import ToolbarsUI from "../../formItems/ToolbarsUI";
-import { AlignComp, LineHeightComp, TextColor } from "./ToolbarComp";
+import {
+  AlignComp,
+  LineHeightComp,
+  TextColor,
+  FontStyleComp,
+  FontFamily,
+  FontSize,
+} from "./ToolbarComp";
 
 export const TextToolbar = defineComponent({
   props: {
     component: any<DesignComp>().isRequired,
   },
   setup(props) {
-    const { actions } = useEditor();
+    const { store, actions, controls } = useEditor();
+
     const toolbarColumns = [
       {
         dataIndex: "fontFamily",
-        component: Select,
+        component: FontFamily,
         props: {
           class: "w-180px",
-          defaultValue: "",
-          options: [
-            { label: "默认字体", value: "" },
-            { label: "宋体", value: "宋体,Songti,STSong,serif" },
-            { label: "黑体", value: "黑体,Heiti,STHeiti,sans-serif" },
-            { label: "仿宋", value: "仿宋,FangSong,STFangsong,serif" },
-            { label: "楷体", value: "楷体,KaiTi,STKaiti,sans-serif" },
-          ],
         },
       },
       {
         label: "字号",
         dataIndex: "fontSize",
-        component: InputNumber,
-        props: {
-          class: "!w-66px",
-          defaultValue: 12,
-          min: 12,
-          max: 99,
-        },
+        component: FontSize,
       },
       {
         label: "字体颜色",
-        dataIndex: "color",
+        dataIndex: "fontColor",
         component: TextColor,
       },
       {
         label: "加粗",
         dataIndex: "bold",
-        component: () => <Button icon={<IconTextBold />} type="text"></Button>,
+        component: (props: any) => (
+          <FontStyleComp icon={<IconTextBold />} {...props} />
+        ),
         itemProps: {
           class: "!mx-2px",
         },
@@ -65,8 +61,8 @@ export const TextToolbar = defineComponent({
       {
         label: "斜体",
         dataIndex: "italic",
-        component: () => (
-          <Button icon={<IconTextItalic />} type="text"></Button>
+        component: (props: any) => (
+          <FontStyleComp icon={<IconTextItalic />} {...props} />
         ),
         itemProps: {
           class: "!mx-2px",
@@ -75,8 +71,8 @@ export const TextToolbar = defineComponent({
       {
         label: "下划线",
         dataIndex: "underline",
-        component: () => (
-          <Button icon={<IconTextUnderline />} type="text"></Button>
+        component: (props: any) => (
+          <FontStyleComp icon={<IconTextUnderline />} {...props} />
         ),
         itemProps: {
           class: "!mx-2px",
@@ -85,8 +81,8 @@ export const TextToolbar = defineComponent({
       {
         label: "删除线",
         dataIndex: "strikethrough",
-        component: () => (
-          <Button icon={<IconStrikethrough />} type="text"></Button>
+        component: (props: any) => (
+          <FontStyleComp icon={<IconStrikethrough />} {...props} />
         ),
         itemProps: {
           class: "!mx-2px",
@@ -102,7 +98,7 @@ export const TextToolbar = defineComponent({
       },
       {
         label: "对齐方式",
-        dataIndex: "align",
+        dataIndex: "alignment",
         component: AlignComp,
         itemProps: {
           class: "!mx-2px",
@@ -126,21 +122,48 @@ export const TextToolbar = defineComponent({
       },
       {
         label: "链接",
-        dataIndex: "align",
-        component: () => <Button icon={<LinkOutlined />} type="text"></Button>,
+        dataIndex: "link",
+        component: (props: any) => (
+          <Button
+            icon={<LinkOutlined />}
+            type="text"
+            onClick={() => {
+              console.log(props);
+            }}
+          ></Button>
+        ),
         itemProps: {
           class: "!mx-2px",
         },
       },
+      {
+        component: () => (
+          <Divider
+            type="vertical"
+            style={{ fontSize: "26px", borderColor: "#1f1f1f" }}
+          />
+        ),
+      },
     ];
-    function changeVal(e: { dataIndex: string; value: any }) {
-      actions.updateCompData(props.component, e.dataIndex, e.value);
-    }
+    const changeVal = (e: { dataIndex: string; value: any }) => {
+      const editor = controls.textEditor;
+      if (!editor) {
+        return;
+      }
+      // const command = editor ? editor.commands.get(e.dataIndex) : null;
+      // console.log(e, command);
+      editor.execute(e.dataIndex, { value: e.value });
+      editor.editing.view.focus();
+
+      // const command =  editor.commands.get(e.commandName)
+      // actions.updateCompData(props.component, e.dataIndex, e.value);
+    };
     return () => {
       const { component } = props;
       return (
-        <div class={[TextToolbarStyle, "flex items-center"]}>
+        <div class={[TextToolbarStyle, "flex items-center"]} id="text_toolbar">
           <ToolbarsUI
+            editor={controls.textEditor}
             data={component}
             columns={toolbarColumns}
             onChange={changeVal}

src/modules/editor/components/CompUI/basicUI/Text/ToolbarComp.tsx

@@ -1,17 +1,19 @@
 import {
+  IconLineHeight,
   IconTextCenter,
   IconTextJustify,
   IconTextLeft,
   IconTextRight,
-  IconLineHeight,
 } from "@/assets/icons";
 import { css } from "@linaria/core";
-import { Button, Dropdown, Menu, Tooltip } from "ant-design-vue";
+import { Button, Dropdown, InputNumber, Menu, Tooltip } from "ant-design-vue";
 
-import { defineComponent, onMounted } from "vue";
-import { string } from "vue-types";
 import Pickr from "@simonwep/pickr";
 import "@simonwep/pickr/dist/themes/nano.min.css";
+import { defineComponent, onMounted, reactive } from "vue";
+import { any, string } from "vue-types";
+import Select from "@queenjs-modules/queditor/components/FormUI/Items/Select";
+
 export const TextColor = defineComponent({
   props: {
     value: string().def("#666666"),
@@ -19,7 +21,6 @@ export const TextColor = defineComponent({
   emits: ["change"],
   setup(props, { emit }) {
     let picker: any = null;
-
     function initPicker() {
       picker = Pickr.create({
         el: ".color_picker",
@@ -68,54 +69,7 @@ export const TextColor = defineComponent({
     );
   },
 });
-const ColorPicker = css`
-  position: relative;
-  width: 32px;
-  height: 32px;
-  border-radius: 2px;
-  cursor: pointer;
-  .pickr {
-    width: 100%;
-    height: 100%;
 
-    .pcr-button {
-      width: 100%;
-      height: 100%;
-      border: 1px solid transparent;
-    }
-    border-radius: 2px;
-    input {
-      &:focus,
-      &.pcr-active {
-        border-color: @inf-primary-color;
-        box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
-      }
-    }
-    button {
-      &:focus,
-      &.pcr-active {
-        border-color: @inf-primary-color;
-        box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
-      }
-    }
-  }
-  .pcr-app {
-    input {
-      &:focus,
-      &.pcr-active {
-        border-color: @inf-primary-color;
-        box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
-      }
-    }
-    button {
-      &:focus,
-      &.pcr-active {
-        border-color: @inf-primary-color;
-        box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
-      }
-    }
-  }
-`;
 export const AlignComp = defineComponent({
   props: {
     value: string<"left" | "right" | "center" | "justify">().def("left"),
@@ -213,6 +167,127 @@ export const LineHeightComp = defineComponent({
     );
   },
 });
+
+export const FontStyleComp = defineComponent({
+  props: {
+    icon: any(),
+    value: any(),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const state = reactive({
+      isOn: props.value || false,
+    });
+    const triggerStyle = () => {
+      state.isOn = !state.isOn;
+      emit("change", state.isOn);
+    };
+    return () => (
+      <Button
+        type="text"
+        class={state.isOn ? currStyle : null}
+        icon={props.icon}
+        onClick={triggerStyle}
+      ></Button>
+    );
+  },
+});
+
+export const FontFamily = defineComponent({
+  props: {
+    value: any(),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const options = [
+      { label: "默认字体", value: "" },
+      { label: "宋体", value: "宋体,Songti,STSong,serif" },
+      { label: "黑体", value: "黑体,Heiti,STHeiti,sans-serif" },
+      { label: "仿宋", value: "仿宋,FangSong,STFangsong,serif" },
+      { label: "楷体", value: "楷体,KaiTi,STKaiti,sans-serif" },
+    ];
+    return () => (
+      <Select
+        options={options}
+        value={props.value || ""}
+        onChange={(v) => {
+          emit("change", v);
+        }}
+      ></Select>
+    );
+  },
+});
+export const FontSize = defineComponent({
+  props: {
+    value: any(),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    return () => (
+      <InputNumber
+        defaultValue={12}
+        min={12}
+        max={60}
+        value={parseInt(props.value) || 12}
+        onChange={(value: any) => {
+          emit("change", value + "px");
+        }}
+      />
+    );
+  },
+});
 const currStyle = css`
   color: @inf-primary-color;
+  &:hover,
+  &:focus {
+    color: @inf-primary-color;
+  }
+`;
+const ColorPicker = css`
+  position: relative;
+  width: 32px;
+  height: 32px;
+  border-radius: 2px;
+  cursor: pointer;
+  .pickr {
+    width: 100%;
+    height: 100%;
+
+    .pcr-button {
+      width: 100%;
+      height: 100%;
+      border: 1px solid transparent;
+    }
+    border-radius: 2px;
+    input {
+      &:focus,
+      &.pcr-active {
+        border-color: @inf-primary-color;
+        box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
+      }
+    }
+    button {
+      &:focus,
+      &.pcr-active {
+        border-color: @inf-primary-color;
+        box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
+      }
+    }
+  }
+  .pcr-app {
+    input {
+      &:focus,
+      &.pcr-active {
+        border-color: @inf-primary-color;
+        box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
+      }
+    }
+    button {
+      &:focus,
+      &.pcr-active {
+        border-color: @inf-primary-color;
+        box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
+      }
+    }
+  }
 `;

src/modules/editor/components/CompUI/basicUI/Text/component2.tsx

@@ -66,97 +66,126 @@ const EditorComp = defineComponent({
   emits: ["lost"],
 
   setup(props, { emit }) {
-    const inputRef = ref();
     let editorRefVal = ref<HeadlessEditor>().value;
     const comp = useCompData(props.compId);
     const { store, actions, helper, controls } = useEditor();
 
     let blurCanceler: any = null;
-    // onMounted(() => {
-    //   blurCanceler = blurHandle();
-    //   nextTick(() => {
-    //     initHeight();
-    //   });
-    // });
+
     // onUnmounted(() => {
     //   blurCanceler?.();
     // });
-    // const preHeight = ref<number>(0);
-    // const initHeight = () => {
-    //   const h = helper.pxToDesignSize(inputRef.value?.$el.clientHeight);
-    //   const isChange = Math.abs(preHeight.value - h) > 1;
-    //   preHeight.value = h;
-    //   actions.updateCompData(comp, "layout.size.1", preHeight.value);
-    //   helper.extendStreamCard(store.currStreamCardId);
-    //   if (isChange) {
-    //     actions.selectObjs([]);
-    //     setTimeout(() => {
-    //       actions.selectObjs([props.compId]);
-    //     }, 0);
-    //   }
-    // };
-    // function isInCkBodyWrapper(dom: HTMLElement) {
-    //   if (editorInstance.value) {
-    //     const in1 =
-    //       editorInstance.value.ui.view.toolbar.element?.contains(dom) ||
-    //       editorInstance.value.ui.view.editable.element?.contains(dom);
-    //     if (in1) return true;
-
-    //     const ckBodyWrapper = document.querySelector(".ck-body-wrapper");
-    //     if (ckBodyWrapper === dom || ckBodyWrapper?.contains(dom)) {
-    //       return true;
-    //     }
-    //   }
-    //   return false;
-    // }
-
-    // function blurHandle() {
-    //   function blur(e: MouseEvent) {
-    //     const target = e.target as HTMLElement;
-
-    //     if (!editorInstance.value) return;
-
-    //     if (isInCkBodyWrapper(target)) {
-    //       e.stopPropagation();
-    //       return;
-    //     }
-    //     actions.submitUpdate();
-    //     emit("lost");
-    //   }
-    //   document.addEventListener("mousedown", blur, {
-    //     capture: true,
-    //   });
-    //   return () => {
-    //     document.removeEventListener("mousedown", blur, { capture: true });
-    //   };
-    // }
+    const preHeight = ref<number>(0);
+    const initHeight = () => {
+      const dom: HTMLElement | null = document.querySelector(
+        `#editor_${props.compId}`
+      );
+      if (!dom) {
+        return false;
+      }
+      const h = helper.pxToDesignSize(dom.clientHeight);
+      const isChange = Math.abs(preHeight.value - h) > 1;
+      preHeight.value = h;
+      actions.updateCompData(comp, "layout.size.1", preHeight.value);
+      helper.extendStreamCard(store.currStreamCardId);
+      if (isChange) {
+        actions.selectObjs([]);
+        setTimeout(() => {
+          actions.selectObjs([props.compId]);
+        }, 0);
+      }
+    };
+    function isInCkBodyWrapper(dom: HTMLElement) {
+      if (editorRefVal) {
+        const in1 =
+          editorRefVal.ui.view.toolbar.element?.contains(dom) ||
+          editorRefVal.ui.view.editable.element?.contains(dom);
+        if (in1) return true;
+
+        const toolbarWrapper = document.querySelector("#text_toolbar");
+        if (toolbarWrapper === dom || toolbarWrapper?.contains(dom)) {
+          return true;
+        }
+      }
+      return false;
+    }
+
+    function blurHandle() {
+      function blur(e: MouseEvent) {
+        const target = e.target as HTMLElement;
+
+        if (!editorRefVal) return;
+
+        if (isInCkBodyWrapper(target)) {
+          e.stopPropagation();
+          return;
+        }
+        actions.submitUpdate();
+        // emit("lost");
+      }
+      document.addEventListener("mousedown", blur, {
+        capture: true,
+      });
+      return () => {
+        document.removeEventListener("mousedown", blur, { capture: true });
+      };
+    }
     const initEditor = async () => {
       const dom: HTMLElement | null = document.querySelector(
-        `#${props.compId}`
+        `#editor_${props.compId}`
       );
-      if (dom) {
-        editorRefVal = await HeadlessEditor.create(dom);
-        editorRefVal.setData(comp.value);
-        editorRefVal.focus();
-        // const range = document.createRange();
-        // range.selectNodeContents(inputRef.value.$el);
-        // const selection = window.getSelection();
-        // selection?.removeAllRanges();
-        // selection?.addRange(range);
-        editorRefVal.on("input", (value: any) => {
-          if (comp.value !== value) {
-            actions.updateCompData(comp, "value", value);
-          }
-        });
-      
+      if (!dom) {
+        return;
       }
+      editorRefVal = await HeadlessEditor.create(dom);
+      editorRefVal.setData(comp.value);
+      editorRefVal.focus();
+      const range = document.createRange();
+      range.selectNodeContents(dom);
+      const selection = window.getSelection();
+      selection?.removeAllRanges();
+      selection?.addRange(range);
+
+      editorRefVal.model.document.on("change:data", () => {
+        const value = editorRefVal?.getData();
+        if (comp.value !== value) {
+          actions.updateCompData(comp, "value", value);
+          nextTick(() => {
+            const element = editorRefVal?.ui.view.editable.element || null;
+            if (!element) {
+              return;
+            }
+            const h = helper.pxToDesignSize(element.clientHeight);
+            const isChange = Math.abs(preHeight.value - h) > 1;
+            preHeight.value = h;
+            actions.updateCompDatas(
+              comp,
+              ["value", "layout.size.1"],
+              [value, preHeight.value]
+            );
+            helper.extendStreamCard(store.currStreamCardId);
+            if (isChange) {
+              console.log("changing=>", isChange);
+              actions.selectObjs([]);
+              setTimeout(() => {
+                actions.selectObjs([props.compId]);
+              }, 0);
+            }
+          });
+        }
+      });
+      controls.textEditor = editorRefVal;
     };
 
     onMounted(() => {
       initEditor();
+      // blurCanceler = blurHandle();
+      nextTick(() => {
+        initHeight();
+      });
     });
     return () => {
-      return <div class={textStyle} id={props.compId} ref={inputRef}></div>;
+      return <div class={textStyle} id={`editor_${props.compId}`}></div>;
     };
 
     // return () => (

src/modules/editor/components/CompUI/basicUI/Text/index.ts

@@ -2,7 +2,7 @@ import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn";
 import { createAttrsForm } from "../../defines/createAttrsForm";
 import { createCompHooks } from "../../defines/createCompHooks";
 import { TextToolbar } from "./TextToolbar";
-export { Component } from "./component";
+export { Component } from "./component2";
 
 export const options = {
   name: "文本",

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

@@ -22,6 +22,7 @@ export interface ColumnItem {
 export default defineComponent({
   props: {
     columns: array<ColumnItem>().isRequired,
+    editor: any(),
     data: any().isRequired,
     disabled: bool(),
     onChange: func(),
@@ -35,6 +36,7 @@ export default defineComponent({
 const FormUI = (props: {
   columns: ColumnItem[];
   data: any;
+  editor: any;
   disabled?: boolean;
   onChange?: (...arg: any) => void;
   onChangeEnd?: (...arg: any) => void;
@@ -75,12 +77,24 @@ export const renderFormItem = (props: {
   column: ColumnItem;
   index?: number;
   data: any;
+  editor: any;
   disabled?: boolean;
   onChange?: (...arg: any) => void;
   onChangeEnd?: (...arg: any) => void;
 }) => {
   const { column, data, index, onChange, onChangeEnd } = props;
 
+  // const compValue = computed(() => {
+  //   const { data, column } = props;
+  //   if (!column.dataIndex) return;
+  //   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 compValue = computed(() => {
     const { data, column } = props;
     if (!column.dataIndex) return;
@@ -106,17 +120,17 @@ export const renderFormItem = (props: {
     onChangeEnd?.(params);
   };
 
-  const isVisible = column.isVisible?.(compValue.value, data);
-  if (column.isVisible && !isVisible) return null;
+  // const isVisible = column.isVisible?.(compValue.value, data);
+  // if (column.isVisible && !isVisible) return null;
 
-  const disabled = props.disabled || column.isDisable?.(compValue.value, data);
+  // const disabled = props.disabled || column.isDisable?.(compValue.value, data);
 
   const component = column.component;
 
   return (
     <div
       key={index}
-      class={cx(formItemStyles, disabled && "disabled")}
+      class={formItemStyles}
       {...column.itemProps}
       onClick={(e) => e.stopPropagation()}
     >
@@ -125,7 +139,6 @@ export const renderFormItem = (props: {
           <component
             value={compValue.value}
             {...column.props}
-            disabled={disabled}
             loading={column.isLoading?.(compValue.value, data)}
             onChange={changeVal}
             onChangeEnd={changeValEnd}
@@ -135,7 +148,6 @@ export const renderFormItem = (props: {
         <component
           value={compValue.value}
           {...column.props}
-          disabled={disabled}
           loading={column.isLoading?.(compValue.value, data)}
           onChange={changeVal}
           onChangeEnd={changeValEnd}

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

@@ -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,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/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,10 +8,11 @@ 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 (
@@ -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

@@ -38,7 +38,6 @@ const tabs = [
     title: "组合",
     icon: IconCombination,
     component: CustomComps,
-    props: { compType: "senior" },
   },
   {
     title: "文字",

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/module/actions/edit.tsx

@@ -894,8 +894,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,10 +59,10 @@ 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),
+    textEditor: null as any,
   };
   compObjsMap = new Map<string, CompObject>();
 

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

@@ -122,37 +122,36 @@ export const store = EditorModule.store({
       return compId;
     },
 
-    addUserCard(detail:any) {
-        const { compMap } = this.store.designData;
-        const idMap = new Map<string, string>();
-        const nextCompMap: Record<string, DesignComp> = {};
-        Object.entries(detail.compMap as Record<string, DesignComp>).forEach(
-          ([key, comp]) => {
-            if (key === "root") {
-              idMap.set(key, nanoid());
-              comp.title = detail.title;
-              comp.thumbnail = detail.thumbnail;
-            }
-            const id = idMap.get(key) || nanoid();
-            idMap.set(key, id);
-            comp.id = id;
-            eachValuesAndPathsDeep(
-              comp.children,
-              (v) => typeof v === "string",
-              (v, paths) => {
-                const id = idMap.get(v) || nanoid();
-                idMap.set(v, id);
-                set(comp.children, paths, id);
-              }
-            );
-            nextCompMap[id] = new DesignComp(comp);
+    addUserCard(detail: any) {
+      const { compMap } = this.store.designData;
+      const idMap = new Map<string, string>();
+      const nextCompMap: Record<string, DesignComp> = {};
+      Object.entries(detail.compMap as Record<string, DesignComp>).forEach(
+        ([key, comp]) => {
+          if (key === "root") {
+            idMap.set(key, nanoid());
+            comp.title = detail.title;
+            comp.thumbnail = detail.thumbnail;
           }
-        );
-        Object.assign(compMap, nextCompMap);
-        return nextCompMap[idMap.get("root") as string];
+          const id = idMap.get(key) || nanoid();
+          idMap.set(key, id);
+          comp.id = id;
+          eachValuesAndPathsDeep(
+            comp.children,
+            (v) => typeof v === "string",
+            (v, paths) => {
+              const id = idMap.get(v) || nanoid();
+              idMap.set(v, id);
+              set(comp.children, paths, id);
+            }
+          );
+          nextCompMap[id] = new DesignComp(comp);
+        }
+      );
+      Object.assign(compMap, nextCompMap);
+      return nextCompMap[idMap.get("root") as string];
     },
 
-
     setCurrComp(compId: string) {
       this.store.currCompId = compId;
       const comps = this.helper.getCompTrees(compId);

src/modules/editor/objects/DesignTemp/DesignComp.ts

@@ -11,10 +11,9 @@ export class DesignComp {
   thumbnail = "";
   compKey: ICompKeys = "Text";
   value: any = undefined;
-  layout: Layout = {size: [200, 200]};
+  layout: Layout = { size: [200, 200] };
   background: Background = {};
   children: Record<string, any> & { default?: string[] } = {};
-
   constructor(data?: Partial<DesignComp>) {
     if (!data) return;
     if (data instanceof DesignComp) return data;
@@ -57,15 +56,15 @@ export class DesignComp {
     return this.layout.size?.[1] || 0;
   }
   getBoundRect() {
-    const out = {x:0, y: 0, w: 0, h:0}
+    const out = { x: 0, y: 0, w: 0, h: 0 };
     if (!this.$el) return out;
-    const r= this.$el.getBoundingClientRect();
+    const r = this.$el.getBoundingClientRect();
     out.w = r.width;
     out.h = r.height;
     out.x = r.left;
     out.y = r.top;
     return out;
- }
+  }
 
   setH(height: number) {
     if (!this.layout.size) this.layout.size = [];

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

@@ -9,4 +9,4 @@ export const Toolbars = createToolbars( {
             // this.actions.setCompLayer(comp, -1);
         },
     },
-});
+});

src/modules/resource/index.ts

@@ -45,10 +45,12 @@ export class ResourceModule extends ModuleRoot {
     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);
@@ -79,19 +81,6 @@ export class ResourceModule extends ModuleRoot {
     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;
-    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"};
@@ -104,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();
   }
 }

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