text align

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

@@ -328,7 +328,7 @@ export const TextStroke = defineComponent({
       }
     );
     const formatVal = (value: any) => {
-      if (!value) {
+      if (!value || value == "undefined") {
         state.visible = false;
         state.color = "#666666";
         state.width = 1;
@@ -367,6 +367,7 @@ export const TextStroke = defineComponent({
     };
     const buildValueSub = () => {
       if (!state.visible) {
+        emit("change", undefined);
         return;
       }
       const value = `${state.width}px ${state.color}`;

src/modules/editor/components/Viewport/Slider/SliderLeft/ListFilter/CateSelect.tsx

@@ -0,0 +1,73 @@
+import { css } from "@linaria/core";
+import { Cascader } from "ant-design-vue";
+import { computed, defineComponent } from "vue";
+import { any, string } from "vue-types";
+
+export default defineComponent({
+  props: {
+    data: any().isRequired,
+    value: any().isRequired,
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const selected = computed(() => {
+      return getCheckedArr(props.data, props.value, []) || [];
+    });
+
+    function getCheckedArr(list: any, value: any, pre: any): any {
+      if (!list || !list.length) return;
+      list = [...list];
+      const item = list.pop();
+      if (!item) return;
+      if (item.id == value) {
+        return [...pre, item];
+      } else {
+        return (
+          getCheckedArr(item.children, value, [...pre, item]) ||
+          getCheckedArr(list, value, pre)
+        );
+      }
+    }
+    return () => (
+      <Cascader
+        class={rootStyle}
+        options={props.data}
+        value={selected.value}
+        placeholder={"筛选"}
+        expand-trigger="hover"
+        multiple={true}
+        // changeOnSelect={true}
+        fieldNames={{ label: "name", value: "id", children: "children" }}
+        onChange={(values) => {
+          console.log(values);
+          emit("change", values);
+        }}
+      >
+        {{
+          displayRender: () => {
+            const value = selected.value[selected.value.length - 1]?.name;
+            return value ? value : "";
+          },
+        }}
+      </Cascader>
+    );
+  },
+});
+
+const rootStyle = css`
+  /* .ant-cascader-input.ant-input {
+    outline: none;
+    box-shadow: none;
+    border: 1px solid transparent;
+    padding-top: 2px;
+    padding-bottom: 2px;
+  }
+  .ant-cascader-picker-label {
+    font-size: 12px;
+    color: #4c4c4c;
+  }
+  .ant-cascader-picker-clear,
+  .ant-cascader-picker-arrow {
+    right: 10px;
+  } */
+`;

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

@@ -0,0 +1,75 @@
+import { useEditor } from "@/modules/editor";
+import { css } from "@linaria/core";
+import { defineComponent, reactive } from "vue";
+import { bool, string } from "vue-types";
+import CateSelect from "./CateSelect";
+
+export default defineComponent({
+  props: {
+    sourceType: string(),
+    isSys: bool().def(true),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const { controls } = useEditor();
+    const state = reactive({
+      values: [] as any,
+    });
+    const getCate = () => {
+      const categories = props.isSys
+        ? controls.categoryCtrl.state.syscategories
+        : controls.categoryCtrl.state.categories;
+      const currCate: any = categories.find((e: any) => {
+        return e.value == props.sourceType?.toLowerCase();
+      });
+
+      return currCate?.children || [];
+    };
+    const cateChange = (v: string) => {
+      state.values = v;
+    };
+    return () => {
+      const options = getCate();
+      if (options.length == 0) return null;
+      return (
+        <div class={rootStyle}>
+          <CateSelect
+            data={options}
+            value={state.values}
+            onChange={(v) => cateChange(v)}
+          />
+          {/* {options.slice(0, 2).map((d: any, i: number) => (
+            <div class={"cate_item flex-1"}></div>
+          ))} */}
+          {/* <Tooltip
+            visible={state.overlayVisible}
+            placement="rightTop"
+            trigger="click"
+            title={renderOverlay()}
+            onVisibleChange={toggleFilter}
+          >
+            <div class={btnStyle}>
+              筛选
+              <Icon type="filter" size="0.14rem" />
+            </div>
+          </Tooltip> */}
+        </div>
+      );
+    };
+  },
+});
+
+const rootStyle = css`
+  display: flex;
+  align-items: center;
+  margin: 12px 0;
+  .ant-cascader {
+    width: 100%;
+  }
+  .cate_item {
+    margin-left: 10px;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+`;

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

@@ -9,6 +9,8 @@ import { Loadmore } from "@queenjs/ui";
 import { queenApi } from "queenjs";
 import SourceItem from "./SourceItem";
 import { Button } from "ant-design-vue";
+import List from "@queenjs/ui/list";
+import ListFilter from "../ListFilter";
 
 export const Sources = defineComponent({
   props: {
@@ -77,6 +79,13 @@ export const Sources = defineComponent({
             </div>
           )}
           <div>
+            {/* <ListFilter
+              sourceType={props.sourceType}
+              isSys={props.sourceFrom == "user" ? false : true}
+              onChange={(v) => {
+                console.log(v);
+              }}
+            /> */}
             <Container
               class="grid grid-cols-2 gap-10px"
               behaviour="copy"

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

@@ -7,6 +7,8 @@ import { defineUI, queenApi } from "queenjs";
 import Modal from "queenjs/adapter/vue/components/modal";
 import { Container, Draggable } from "vue-dndrop";
 import PreviewTplModal from "./PreviewTplModal";
+import { string } from "vue-types";
+import ListFilter from "../ListFilter";
 
 export default defineUI({
   setup() {
@@ -35,7 +37,6 @@ export default defineUI({
 
     return () => {
       const dataSource = ctrl.state.list;
-
       return (
         <div>
           <Container
@@ -50,6 +51,13 @@ export default defineUI({
               };
             }}
           >
+            {/* <ListFilter
+              cateKey={props.title}
+              isSys={true}
+              onChange={(v) => {
+                console.log(v);
+              }}
+            /> */}
             {dataSource.map((item: any) => {
               return (
                 <Draggable key={item._id}>

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

@@ -1,7 +1,7 @@
 import { ModuleControl } from "queenjs";
 import { reactive } from "vue";
 import { EditorModule } from "../../module";
-
+import { nanoid } from "nanoid";
 export class CategoryCtrl extends ModuleControl<EditorModule> {
   state = reactive({
     result: {} as any,
@@ -44,7 +44,7 @@ export class CategoryCtrl extends ModuleControl<EditorModule> {
           name: changeItem.name,
           value: changeItem.name,
           type: item.type,
-          id: Date.now() + "",
+          id: nanoid(),
         });
       }
       if (item.id == changeItem?.id) {

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

@@ -90,7 +90,7 @@ export class TextEditorCtrl extends ModuleControl<EditorModule> {
     }
     if (pStyleReg.test(item)) {
       const addStyleReg = /(<p[\s|\s]*style=[\s|\S]*?)(">[\s|\S]*)/;
-      blockStr = item.replace(addStyleReg, `$${stylesKey[key]}:${e.value};$2`);
+      blockStr = item.replace(addStyleReg, `$1${stylesKey[key]}:${e.value};$2`);
     } else {
       const noStyleReg = /(<p[\s|\s]*)(>[\s|\S]*)/;
       blockStr = item.replace(

src/pages/website/Category/config.ts

@@ -1,18 +0,0 @@
-export const category_label: { [key: string]: string } = {
-  template: "模板",
-  combo: "组合",
-  text: "文字",
-  image: "图片",
-  video: "视频",
-  geometry: "形状",
-};
-
-export const admin_types = [
-  "template",
-  "combo",
-  "text",
-  "image",
-  "video",
-  "geometry",
-];
-export const user_types = ["combo", "text", "image", "video", "geometry"];