catecory filter

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

@@ -318,7 +318,7 @@ export const TextStroke = defineComponent({
   setup(props, { emit }) {
     const state = reactive({
       visible: props.value ? true : false,
-      width: 1,
+      width: 0.5,
       color: "#666666",
     });
     watch(
@@ -331,7 +331,7 @@ export const TextStroke = defineComponent({
       if (!value || value == "undefined") {
         state.visible = false;
         state.color = "#666666";
-        state.width = 1;
+        state.width = 0.5;
         return;
       }
       state.visible = true;
@@ -343,14 +343,15 @@ export const TextStroke = defineComponent({
         color = "#666666";
       }
       state.color = color;
-      const widthReg = /\d+px/g;
+      const widthReg = /(\d+|\d+\.\d+)px/g;
       let width = value.match(widthReg);
       if (width) {
         width = width[0];
       } else {
-        width = 1;
+        width = 0.5;
       }
-      state.width = parseInt(width);
+
+      state.width = parseFloat(width);
     };
     const colorChange = (v: string) => {
       state.color = v;
@@ -386,9 +387,9 @@ export const TextStroke = defineComponent({
                   <Tooltip title={"描边宽度"} placement="top">
                     <InputNumber
                       class={StrokeStyle}
-                      min={1}
+                      min={0.1}
                       max={5}
-                      step={1}
+                      step={0.1}
                       value={state.width}
                       onChange={widthChange}
                     />
@@ -474,7 +475,6 @@ export const TextToolItem = defineComponent({
               return;
             }
             const h = helper.pxToDesignSize(element.clientHeight);
-            console.log(h);
             actions.updateCompData(store.currComp, "layout.size.1", h);
             helper.extendStreamCard(store.currStreamCardId);
             actions.selectObjs([]);

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

@@ -3,7 +3,7 @@ import { Tag } from "ant-design-vue";
 import dayjs from "dayjs";
 import { upperFirst } from "lodash";
 import { Container, Draggable } from "vue-dndrop";
-import { string } from "vue-types";
+import { number, string } from "vue-types";
 
 import Empty from "@/components/Empty";
 import { useEditor } from "@/modules/editor";
@@ -12,6 +12,8 @@ import { useAuth } from "@queenjs-modules/auth";
 import { Image, Loadmore } from "@queenjs/ui";
 import { defineUI, queenApi } from "queenjs";
 import Menu from "./Menu";
+import ListFilter from "./ListFilter";
+import { watch } from "vue";
 
 export default defineUI({
   props: {
@@ -35,15 +37,27 @@ export default defineUI({
       return resource.controls[key];
     }
 
+    const filterChange = (v: any) => {
+      const query = listCtrl.state.query || {};
+      listCtrl.state.query = {
+        ...query,
+        categories: v,
+      };
+      listCtrl.loadPage(1);
+    };
     return () => {
       const { sourceType } = props;
 
       const dataSource = listCtrl.state.list;
 
-      if (dataSource.length == 0) return <Empty class="pt-150px" />;
-
       return (
         <div>
+          <ListFilter
+            class={"my-16px"}
+            sourceType={props.sourceType}
+            isSys={false}
+            onChange={filterChange}
+          />
           <Container
             class={cx(
               "grid gap-10px",
@@ -76,12 +90,13 @@ export default defineUI({
                     title={item.title}
                   >
                     <Image
-                      class="w-full rounded"
+                      class="w-1/1 h-1/1 !object-contain"
                       src={item.thumbnail}
+                      style={{ aspectRatio: 1 }}
                       onClick={() => {
                         editor.actions.clickCompUserToDesign(item._id, isSys);
                       }}
-                      size={480}
+                      size={240}
                     />
                     {isSys && (
                       <Tag
@@ -94,25 +109,37 @@ export default defineUI({
                     )}
                     <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="text-white text-bold truncate">{item.title}</div> */}
                         <div class="flex items-center text-opacity-60 text-white text-12px">
-                          {dayjs(item.createTime).format("YYYY.MM.DD")}
+                          {item.title}
                         </div>
                       </div>
                       <Menu
                         items={items}
                         onMenu={async (name) => {
-                          console.log("name", name);
+                          console.log("name", item);
                           if (name == "删除") {
-                            await resource.actions.deleteCustomComp(item);
+                            const title = {
+                              comp: "组合",
+                              text: "文字",
+                              shape: "形状",
+                            };
+                            await resource.actions.deleteUserComp(
+                              item,
+                              title[sourceType]
+                            );
                             listCtrl.fresh();
                             queenApi.messageSuccess("删除成功!");
                             return;
                           }
                           if (name == "替换封面") {
-                            const url = await editor.controls.pickCtrl.pickOneImage();
+                            const url =
+                              await editor.controls.pickCtrl.pickOneImage();
                             if (!url) return;
-                            await resource.https.updateComp({_id: item._id, thumbnail: url});
+                            await resource.https.updateComp({
+                              _id: item._id,
+                              thumbnail: url,
+                            });
                             item.thumbnail = url;
                             queenApi.messageSuccess("替换成功");
 

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

@@ -13,6 +13,7 @@ import { useReactive } from "@queenjs/use";
 import { defineUI, queenApi } from "queenjs";
 import { CompList } from "./CompList";
 import Menu from "./Menu";
+import ListFilter from "./ListFilter";
 
 const compList = [
   // "Card2",
@@ -50,11 +51,24 @@ export default defineUI({
         return state.currComps.filter((d) => compList.includes(d.compKey));
       },
     }));
-
+    const filterChange = (v: any) => {
+      const query = sysCompListCtrl.state.query || {};
+      sysCompListCtrl.state.query = {
+        ...query,
+        categories: v,
+      };
+      sysCompListCtrl.loadPage(1);
+    };
     return () => {
       const dataSource = sysCompListCtrl.state.list;
       return (
         <div>
+          <ListFilter
+            class={"mb-16px"}
+            sourceType={"comp"}
+            isSys={false}
+            onChange={filterChange}
+          />
           <CompList dataSource={dataSource} isSys={true} />
           <Comp components={state.cusComps} taggable={false} class="mt-10px" />
           {dataSource.length == 0 ? null : (
@@ -89,7 +103,6 @@ const Comp = defineUI({
     const editor = useEditor();
     const auth = useAuth();
     const resource = useResource();
-
     return () => {
       //@ts-ignore
       const isSys = (auth.store.userInfo.roles || []).indexOf("system") > -1;

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

@@ -69,7 +69,7 @@ export default defineComponent({
       return (
         <div class={rootStyle}>
           {options.slice(0, state.limitLen).map((d: any, i: number) => (
-            <div class={"cate_item"}>
+            <div class={"cate_item flex-1"}>
               <CateSelect
                 key={i}
                 label={d.name}
@@ -80,7 +80,7 @@ export default defineComponent({
             </div>
           ))}
           {options.length > state.limitLen && (
-            <div class={"ml-10px flex-1"}>
+            <div class={"ml-10px w-65px"}>
               <CateFilter
                 options={options}
                 value={state.values}
@@ -97,7 +97,6 @@ export default defineComponent({
 const rootStyle = css`
   display: flex;
   align-items: center;
-  margin: 12px 0;
   .ant-cascader {
     width: 100%;
   }

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

@@ -7,6 +7,7 @@ import { useReactive } from "@queenjs/use";
 import { defineComponent } from "vue";
 import { Container, Draggable } from "vue-dndrop";
 import { CompList } from "./CompList";
+import ListFilter from "./ListFilter";
 
 export default defineComponent({
   setup() {
@@ -31,12 +32,19 @@ export default defineComponent({
         ].map((key) => compUICtrl.state.components.get(key) as any);
       },
     }));
-
+    const filterChange = (v: any) => {
+      const query = sysShapeListCtrl.state.query || {};
+      sysShapeListCtrl.state.query = {
+        ...query,
+        categories: v,
+      };
+      sysShapeListCtrl.loadPage(1);
+    };
     return () => {
       const dataSource = sysShapeListCtrl.state.list;
       return (
         <div class="flex-1 overflow-x-hidden overflow-y-auto scrollbar">
-          <div class="my-10px">默认</div>
+          <div class="my-16px">默认</div>
           <Container
             class="grid grid-cols-3 gap-10px"
             behaviour="copy"
@@ -63,7 +71,13 @@ export default defineComponent({
               );
             })}
           </Container>
-          <div class="my-20px">组合</div>
+          <div class="my-16px">组合</div>
+          <ListFilter
+            class={"mb-16px"}
+            sourceType={"shape"}
+            isSys={true}
+            onChange={filterChange}
+          />
           <CompList dataSource={dataSource} columns={3} isSys={true} />
           {dataSource.length == 0 ? (
             <Empty />

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

@@ -9,7 +9,7 @@ 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({
@@ -72,9 +72,8 @@ export const Sources = defineComponent({
       return (
         <div>
           {props.sourceFrom == "user" && (
-            <div class="sticky top-0 pb-12px z-11 bg-[#262626]">
+            <div class="sticky top-0 mt-6px mb-16px z-11 bg-[#262626]">
               <Button
-                class="mt-5px"
                 block
                 type="primary"
                 onClick={async () => {
@@ -88,6 +87,7 @@ export const Sources = defineComponent({
           )}
           <div>
             <ListFilter
+              class={"mb-16px"}
               sourceType={props.sourceType}
               isSys={props.sourceFrom == "user" ? false : true}
               onChange={filterChange}

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

@@ -34,11 +34,24 @@ export default defineUI({
         }
       );
     };
-
+    const filterChange = (v: any) => {
+      const query = ctrl.state.query || {};
+      ctrl.state.query = {
+        ...query,
+        categories: v,
+      };
+      ctrl.loadPage(1);
+    };
     return () => {
       const dataSource = ctrl.state.list;
       return (
         <div>
+          <ListFilter
+            class={"mb-16px"}
+            sourceType="template"
+            isSys={true}
+            onChange={filterChange}
+          />
           <Container
             class="space-y-10px"
             behaviour="copy"
@@ -51,13 +64,6 @@ 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/components/Viewport/Slider/SliderLeft/Text.tsx

@@ -7,6 +7,7 @@ import { Loadmore } from "@queenjs/ui";
 import { Button } from "ant-design-vue";
 import { defineUI } from "queenjs";
 import { CompList } from "./CompList";
+import ListFilter from "./ListFilter";
 export default defineUI({
   setup() {
     const editor = useEditor();
@@ -14,7 +15,14 @@ export default defineUI({
     const resource = useResource();
     const { sysTextListCtrl } = resource.controls;
     sysTextListCtrl.loadPage(1);
-
+    const filterChange = (v: any) => {
+      const query = sysTextListCtrl.state.query || {};
+      sysTextListCtrl.state.query = {
+        ...query,
+        categories: v,
+      };
+      sysTextListCtrl.loadPage(1);
+    };
     return () => {
       const dataSource = sysTextListCtrl.state.list;
       return (
@@ -76,7 +84,13 @@ export default defineUI({
               </div>
             </div>
           </div>
-          <div class="my-20px">组合</div>
+          <div class="my-16px">组合</div>
+          <ListFilter
+            class={"mb-16px"}
+            sourceType={"text"}
+            isSys={true}
+            onChange={filterChange}
+          />
           <CompList dataSource={dataSource} columns={1} isSys={true} />
           {dataSource.length == 0 ? (
             <Empty />

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

@@ -138,7 +138,7 @@ export default defineUI({
             if (!list.includes(index)) return null;
             return (
               <PanelContent
-                key={index}
+                key={Date.now()}
                 currentTab={tab}
                 class={tabIndex !== index && "hidden"}
               />

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

@@ -1,15 +1,13 @@
-import { cloneDeep, curry, pick } from "lodash";
+import { cloneDeep, pick } from "lodash";
+import { nanoid } from "nanoid";
 import { Exception, queenApi } from "queenjs";
 import { EditorModule } from "..";
 import { ScreenshotCtrl } from "../../controllers/ScreenshotCtrl";
+import { ObjsContainer } from "../../controllers/SelectCtrl/ObjsContainer";
 import { CompObject } from "../../controllers/SelectCtrl/compObj";
+import { Matrix } from "../../controllers/SelectCtrl/matrix";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { ICompKeys, Layout } from "../../typings";
-import CompSave from "../../components/CompSave";
-import { ObjsContainer } from "../../controllers/SelectCtrl/ObjsContainer";
-import { getKeyThenIncreaseKey } from "ant-design-vue/lib/message";
-import { Matrix } from "../../controllers/SelectCtrl/matrix";
-import { nanoid } from "nanoid";
 
 const ctrlState = {
   selected: [] as string[],

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

@@ -1,7 +1,9 @@
+import { useResource } from "@/modules/resource";
 import { TipIcons } from "../../components/TipIcons";
 import { EditorModule } from "../../module";
 import { ICompKeys } from "../../typings";
 import { DesignComp } from "../DesignTemp/DesignComp";
+import { upperFirst } from "lodash";
 
 function getVisible(this: EditorModule, comp: DesignComp) {
   return !!comp;
@@ -14,7 +16,7 @@ type ItemParams = Pick<ToolbarItem, "getValue" | "component" | "onClick"> & {
 export class ToolbarItem {
   component: any;
   getValue?: (c: DesignComp) => any;
-  onClick: (this: EditorModule, c: DesignComp, other?:any) => void;
+  onClick: (this: EditorModule, c: DesignComp, other?: any) => void;
   getVisible!: typeof getVisible;
 
   constructor(data: ItemParams) {

src/modules/resource/actions/promotion.tsx

@@ -12,7 +12,7 @@ export const promotionAction = ResourceModule.action({
     record.title = title;
   },
 
-  async publishPromotion(record:any, publish: boolean) {
+  async publishPromotion(record: any, publish: boolean) {
     await this.https.publishPromotion(record._id, publish);
     record.published = publish;
     queenApi.messageSuccess("操作成功!");
@@ -36,6 +36,14 @@ export const promotionAction = ResourceModule.action({
     if (!res) return;
     await this.https.deleteComp(record._id);
   },
+  async deleteUserComp(record: any, title: string) {
+    const res = await queenApi.showConfirm({
+      content: `删除后无法恢复，确定要删除当前${title}:${record.title}?`,
+      type: "danger",
+    });
+    if (!res) return;
+    await this.https.deleteComp(record._id);
+  },
 
   async createPromotion() {
     const title = await queenApi.showInput({

src/modules/resource/index.ts

@@ -48,9 +48,15 @@ export class ResourceModule extends ModuleRoot {
     sysTplListCtrl: new PageListController(this.config?.httpConfig),
     sysImageListCtrl: new PageListController(this.config?.httpConfig),
     sysVideoListCtrl: new PageListController(this.config?.httpConfig),
-    sysCompListCtrl: new PageListController<compType, any>(this.config?.httpConfig),
-    sysShapeListCtrl: new PageListController<compType, any>(this.config?.httpConfig),
-    sysTextListCtrl: new PageListController<compType, any>(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);
@@ -83,39 +89,55 @@ export class ResourceModule extends ModuleRoot {
 
     this.controls.custCompListCtrl.setCrudPrefix("/frame");
     this.controls.custCompListCtrl.state.size = 20;
-    this.controls.custCompListCtrl.state.query = { type: "comp"};
+    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.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.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.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.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.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.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.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.controls.sysTextListCtrl.state.query = {
+      type: "text",
+      published: true,
+    };
 
     this.natsBus.init();
   }