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

src/assets/icons/index.ts

@@ -1,4 +1,3 @@
-
 export * from "./components/Icon3D";
 export * from "./components/IconAdd";
 export * from "./components/IconAi";

src/assets/imgs/add.svg

@@ -1 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><defs><style>.a{fill:#1f1f1f;}.b{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g transform="translate(-1489 -385)"><rect class="a" width="80" height="80" rx="4" transform="translate(1489 385)"/><g transform="translate(1514.754 410.754)"><path class="b" d="M24,16V33.666" transform="translate(-9.754 -10.587)"/><path class="b" d="M16,24H33.666" transform="translate(-10.587 -9.754)"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
+    <defs>
+        <style>
+            .a{fill:#262626;}.b{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style>
+    </defs>
+    <g transform="translate(-1489 -385)">
+        <rect class="a" width="80" height="80" rx="4" transform="translate(1489 385)" />
+        <g transform="translate(1514.754 410.754)">
+            <path class="b" d="M24,16V33.666" transform="translate(-9.754 -10.587)" />
+            <path class="b" d="M16,24H33.666" transform="translate(-10.587 -9.754)" />
+        </g>
+    </g>
+</svg>

src/assets/imgs/sliderClose.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.922" height="122.999" viewBox="0 0 15.922 122.999"><defs><style>.a{fill:#262626;}.b{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;opacity:0.7;}</style></defs><g transform="translate(-373.078 -511)"><path class="a" d="M15034.751,1997.21s-1.037,9.956,7.382,15.671,8.5,15.542,8.5,26.036v46.3s-1.732,12.7-8.5,16.881-7.382,13.138-7.382,17.974Z" transform="translate(-14661.633 -1486.21)"/><path class="b" d="M7.115,0,3.557,3.557,0,0" transform="translate(382.818 568.5) rotate(90)"/></g></svg>

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

@@ -64,6 +64,8 @@ export const Component = defineComponent({
           style.margin = "0 auto";
         }
       }
+      // ?
+      // style.transform = "matrix(1,0,0,1,0,0)";
       return style;
     };
 

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/CompUI/basicUI/Text/component.tsx

@@ -258,7 +258,7 @@ const textStyle = css`
   font-size: 14px;
   width: 100%;
   color: #666;
-  word-break: break-all;
+  word-break: break-word;
   h2 {
     color: #111;
     font-size: 24px;

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

@@ -219,7 +219,7 @@ const textStyle = css`
   font-size: 14px;
   width: 100%;
   color: #666;
-  word-break: break-all;
+  word-break: break-word;
   h2 {
     color: #111111;
     font-size: 24px;

src/modules/editor/components/CompUI/defines/createAttrsForm.tsx

@@ -158,7 +158,7 @@ export const bdColumns: ColumnItem[] = [
   },
   {
     label: "边框弧度",
-    dataIndex: "layout.border.radius",
+    dataIndex: "layout.border.radius2",
     component: Slider,
     getValue(v) {
       if (v == undefined) return 0;
@@ -309,7 +309,7 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
                 />
               </>
             )}
-            {["Text", "Image", "Map"].includes(component.compKey) ? (
+            {["Text", "Image", "Map", "Rectage"].includes(component.compKey) ? (
               <>
                 <Divider></Divider>
                 <div>

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

@@ -84,7 +84,7 @@ export const TipIcons = {
     tips: ["显示", "隐藏"],
   }),
   Lock: createTipIcon({
-    icons: [IconLock, IconUnlock],
+    icons: [IconUnlock, IconLock],
     tips: ["锁定", "未锁定"],
   }),
   Delete: createTipIcon({

src/modules/editor/components/Viewport/Content/index.tsx

@@ -89,6 +89,7 @@ export default defineUI({
                         onClick={() => {
                           actions.selectObjs([]);
                           actions.pickComp(item, false);
+
                           nextTick(() => {
                             controls.editorCtrl.autoInScreen();
                           });
@@ -327,7 +328,7 @@ const editLayerStyle = css`
 const cardList = css`
   width: 120px;
   height: 100%;
-  background: #262626;
+  background: #1f1f1f;
   overflow-x: hidden;
   pointer-events: auto;
   display: flex;

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,38 +12,64 @@ 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 { onMounted, watch } from "vue";
 
 export default defineUI({
   props: {
     sourceType: string<"comp" | "text" | "shape">().def("comp"),
+    currentIndex: number(),
+    contentIndex: number(),
   },
   setup(props) {
     const editor = useEditor();
     const auth = useAuth();
     const resource = useResource();
 
-    const listCtrl = getCtrl();
-    listCtrl.hasLimit = true;
-    listCtrl.loadPage(1);
-
+    function getData() {
+      const ctrl = getCtrl();
+      ctrl.hasLimit = true;
+      ctrl.loadPage(1);
+    }
     //@ts-ignore
     let isSys = (auth.store.userInfo.roles || []).indexOf("system") > -1;
-
+    onMounted(() => getData());
     function getCtrl() {
       const key = `cust${upperFirst(props.sourceType)}ListCtrl`;
       //@ts-ignore
       return resource.controls[key];
     }
-
+    watch(
+      () => props.currentIndex,
+      () => {
+        if (props.currentIndex == props.contentIndex) {
+          const ctrl = getCtrl();
+          if (ctrl.state.list.length == 0) getData();
+        }
+      }
+    );
+    const filterChange = (v: any) => {
+      const ctrl = getCtrl();
+      const query = ctrl.state.query || {};
+      ctrl.state.query = {
+        ...query,
+        categories: v,
+      };
+      ctrl.loadPage(1);
+    };
     return () => {
       const { sourceType } = props;
-
-      const dataSource = listCtrl.state.list;
-
-      if (dataSource.length == 0) return <Empty class="pt-150px" />;
+      const ctrl = getCtrl();
+      const dataSource = ctrl.state.list;
 
       return (
         <div>
+          <ListFilter
+            class={"my-16px"}
+            sourceType={sourceType}
+            isSys={false}
+            onChange={filterChange}
+          />
           <Container
             class={cx(
               "grid gap-10px",
@@ -60,7 +86,7 @@ export default defineUI({
             }}
           >
             {dataSource.map((item: compType) => {
-              const items = ["删除"];
+              const items = ["删除", "编辑"];
 
               if (isSys) {
                 item.published
@@ -76,12 +102,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,9 +121,9 @@ 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
@@ -104,20 +131,37 @@ export default defineUI({
                         onMenu={async (name) => {
                           console.log("name", name);
                           if (name == "删除") {
-                            await resource.actions.deleteCustomComp(item);
-                            listCtrl.fresh();
+                            const title = {
+                              comp: "组合",
+                              text: "文字",
+                              shape: "形状",
+                            };
+                            await resource.actions.deleteUserComp(
+                              item,
+                              title[sourceType]
+                            );
+                            ctrl.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("替换成功");
 
                             return;
                           }
+                          if (name == "编辑") {
+                            await resource.actions.editSource(item, sourceType);
+                            ctrl.fresh();
+                            return;
+                          }
 
                           const pub = name == "发布平台";
                           await resource.actions.publishFrame(item, pub);
@@ -135,9 +179,9 @@ export default defineUI({
           ) : (
             <Loadmore
               class="mt-20px"
-              loading={listCtrl.state.loading}
-              canLoad={listCtrl.state.canLoadNext}
-              onChange={listCtrl.loadNextPage}
+              loading={ctrl.state.loading}
+              canLoad={ctrl.state.canLoadNext}
+              onChange={ctrl.loadNextPage}
             />
           )}
         </div>

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={true}
+            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/CateFilter.tsx

@@ -0,0 +1,361 @@
+import { css } from "@linaria/core";
+
+import { RightOutlined, DownOutlined } from "@ant-design/icons-vue";
+import { Button, Checkbox, Tooltip } from "ant-design-vue";
+import { defineComponent, reactive, watch } from "vue";
+import { any, string } from "vue-types";
+import { cloneDeep } from "lodash";
+
+export default defineComponent({
+  props: {
+    options: any().isRequired,
+    value: any().isRequired,
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const state = reactive({
+      overlayVisible: false,
+      selected: [] as any,
+      indeterminate: [] as any,
+      categoryMap: new Map<string, any>(),
+      value: {} as any,
+    });
+    function toggleFilter(visible: boolean) {
+      state.overlayVisible = visible;
+    }
+    watch(
+      () => props.options,
+      () => {
+        initCateMap(props.options);
+      }
+    );
+    watch(
+      () => props.value,
+      () => {
+        state.value = cloneDeep(props.value);
+        state.indeterminate = [];
+        initIndeterminate(props.value);
+      }
+    );
+    const initCateMap = (options: any, parent = "") => {
+      options.map((e: any) => {
+        if (e.children) {
+          state.categoryMap.set(e.id, {
+            parent: parent,
+            children: e.children,
+          });
+          initCateMap(e.children, e.id);
+        }
+      });
+    };
+    initCateMap(props.options);
+    const initIndeterminate = (value: any) => {
+      const values = cloneDeep(value);
+      Object.keys(values).map((e: string) => {
+        const item = state.categoryMap.get(e);
+        if (!item || !item.children) {
+          return;
+        }
+        initInChildren(item.parent, item.children, values[e]);
+      });
+    };
+    const initInChildren = (parent: string, children: any, id: string) => {
+      for (let i = 0; i < children.length; i++) {
+        if (children[i].id == id) {
+          setIndeterminateVal(true, parent, id);
+          break;
+        }
+        children[i].children &&
+          initInChildren(children[i].id, children[i].children, id);
+      }
+    };
+    const getRootParent = (id: string): string => {
+      const item = state.categoryMap.get(id);
+      if (!item.parent) {
+        return id;
+      } else {
+        return getRootParent(item.parent);
+      }
+    };
+    function reset() {
+      state.overlayVisible = false;
+      state.selected = [];
+      state.indeterminate = [];
+      state.value = {};
+      emit("change", undefined);
+    }
+
+    function submit() {
+      state.overlayVisible = false;
+      emit("change", state.value);
+    }
+    const selectItem = (id: string | null, index: number) => {
+      let selected = [...state.selected];
+      if (index > selected.length - 1) {
+        selected.push(id);
+      } else {
+        if (selected[index + 1]) {
+          selected.splice(index + 1, selected.length - 1);
+        }
+        selected.splice(index, 1, id);
+      }
+
+      state.selected = selected;
+    };
+    const changeSelectValue = (e: any, id: string, parent: string) => {
+      const checked = e.target?.checked;
+      const rootParent = getRootParent(parent);
+      if (checked) {
+        state.value[rootParent] = id;
+      } else {
+        state.value[rootParent] = undefined;
+      }
+      setIndeterminateVal(checked, parent, id);
+    };
+    const setIndeterminateVal = (add: boolean, parent: string, id: string) => {
+      if (add) {
+        const sameLevel = state.categoryMap.get(parent);
+        if (sameLevel && sameLevel.children) {
+          sameLevel.children.map((e: any) => {
+            const index = state.indeterminate.indexOf(e.id);
+            if (index != -1) {
+              state.indeterminate.splice(index, 1);
+            }
+          });
+        }
+        const index = state.indeterminate.indexOf(id);
+        if (index != -1) {
+          state.indeterminate.splice(index, 1);
+          return;
+        }
+        if (state.indeterminate.includes(parent)) {
+          return;
+        }
+        state.indeterminate.push(parent);
+      } else {
+        const index = state.indeterminate.indexOf(parent);
+        if (index == -1) {
+          return;
+        }
+        state.indeterminate.splice(index, 1);
+      }
+    };
+
+    function renderOverlay() {
+      return (
+        <div class={OverlayStyle}>
+          <div class={"cate_wapper"}>
+            <div class={"wapper_item"}>
+              {props.options.map((category: any) => {
+                return (
+                  <div
+                    class="cate_item"
+                    onMouseenter={() => {
+                      selectItem(category.id, 0);
+                    }}
+                  >
+                    <div
+                      class={[
+                        "cate_text_item",
+                        state.value[category.id] ? "active" : null,
+                      ]}
+                    >
+                      {category.name}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+            {state.selected.map((select: string, index: number) => {
+              const categories = state.categoryMap.get(select);
+              return categories ? (
+                <div class={"wapper_item"}>
+                  {categories.children.map((item: any) => {
+                    const rootParent = getRootParent(select);
+                    return (
+                      <div
+                        class="cate_item"
+                        onMouseenter={() => {
+                          selectItem(item.id, index + 1);
+                        }}
+                      >
+                        <Checkbox
+                          checked={state.value[rootParent] == item.id}
+                          indeterminate={state.indeterminate.includes(item.id)}
+                          onChange={(e) => {
+                            changeSelectValue(e, item.id, select);
+                          }}
+                        >
+                          {item.name}
+                          {item.children && item.children.length > 0 && (
+                            <RightOutlined class={"arrow"} />
+                          )}
+                        </Checkbox>
+                      </div>
+                    );
+                  })}
+                </div>
+              ) : null;
+            })}
+          </div>
+
+          <div class="overlay_footer">
+            <Button class={"reset"} onClick={reset}>
+              重置
+            </Button>
+            <Button type="primary" onClick={submit}>
+              确定
+            </Button>
+          </div>
+        </div>
+      );
+    }
+
+    return () => {
+      return (
+        <div class={RootStyle}>
+          <Tooltip
+            visible={state.overlayVisible}
+            overlayClassName={OverlayClass}
+            destroyTooltipOnHide={true}
+            placement="rightTop"
+            trigger="click"
+            title={renderOverlay()}
+            onVisibleChange={toggleFilter}
+          >
+            <div
+              class={[
+                BtnStyle,
+                Object.keys(state.value).length != 0 ? "active" : null,
+              ]}
+            >
+              筛选 <DownOutlined style={{ fontSize: "12px" }} />
+            </div>
+          </Tooltip>
+        </div>
+      );
+    };
+  },
+});
+
+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;
+  } */
+`;
+const BtnStyle = css`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  height: 32px;
+  line-height: 30px;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.5);
+  border-radius: 2px;
+  border: 1px solid transparent;
+  background-color: #303030;
+  &.active {
+    background-color: rgba(234, 158, 64, 0.2);
+    color: @inf-primary-color;
+  }
+`;
+
+const OverlayClass = css`
+  max-width: 450px;
+  .ant-tooltip-arrow {
+    display: none;
+  }
+  .ant-tooltip-inner {
+    padding: 0;
+    background-color: #303030;
+  }
+`;
+const OverlayStyle = css`
+  .cate_wapper {
+    display: flex;
+    flex-wrap: nowrap;
+    .wapper_item {
+      flex: auto;
+      width: 150px;
+      height: 280px;
+      overflow: auto;
+      border-left: 1px solid #1f1f1f;
+      &:first-child {
+        border-left: none;
+      }
+      .cate_item {
+        .ant-checkbox-wrapper,
+        .cate_text_item {
+          position: relative;
+          width: 100%;
+          padding: 10px 20px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          &:hover {
+            background-color: #404040;
+          }
+          .arrow {
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+          }
+        }
+        .cate_text_item {
+          &.active {
+            &::after {
+              position: absolute;
+              top: 50%;
+              right: 30px;
+              width: 5px;
+              height: 9px;
+              display: block;
+              border: 1px solid #fff;
+              border-top: 0;
+              border-left: 0;
+              transform: rotate(45deg) scale(1) translateY(-9px);
+              opacity: 1;
+              transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+              content: " ";
+            }
+          }
+        }
+      }
+    }
+  }
+  .overlay_footer {
+    text-align: right;
+    padding: 16px 20px;
+    border-top: 1px solid #1f1f1f;
+    .reset {
+      margin-right: 16px;
+      background-color: rgba(64, 64, 64, 1);
+      border-color: rgba(64, 64, 64, 1);
+      color: rgba(255, 255, 255, 1);
+      &:hover {
+        background-color: rgba(64, 64, 64, 0.8);
+        border-color: rgba(64, 64, 64, 0.8);
+        color: rgba(255, 255, 255, 0.8);
+      }
+      &:active {
+        background-color: rgba(64, 64, 64, 1);
+        border-color: rgba(64, 64, 64, 1);
+        color: rgba(255, 255, 255, 1);
+      }
+    }
+  }
+`;

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

@@ -5,6 +5,7 @@ import { any, string } from "vue-types";
 
 export default defineComponent({
   props: {
+    label: string().isRequired,
     data: any().isRequired,
     value: any().isRequired,
   },
@@ -19,6 +20,7 @@ export default defineComponent({
       list = [...list];
       const item = list.pop();
       if (!item) return;
+
       if (item.id == value) {
         return [...pre, item];
       } else {
@@ -32,21 +34,19 @@ export default defineComponent({
       <Cascader
         class={rootStyle}
         options={props.data}
-        value={selected.value}
-        placeholder={"筛选"}
+        value={selected.value.map((d: any) => d.id)}
+        placeholder={props.label}
         expand-trigger="hover"
-        multiple={true}
-        // changeOnSelect={true}
+        changeOnSelect={true}
         fieldNames={{ label: "name", value: "id", children: "children" }}
         onChange={(values) => {
-          console.log(values);
-          emit("change", values);
+          emit("change", values ? values[values.length - 1] : undefined);
         }}
       >
         {{
           displayRender: () => {
             const value = selected.value[selected.value.length - 1]?.name;
-            return value ? value : "";
+            return value ? value : props.label;
           },
         }}
       </Cascader>
@@ -55,19 +55,16 @@ export default defineComponent({
 });
 
 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 {
+    .ant-select-selector {
+      background-color: #303030;
+      border-color: transparent;
+    }
+    .ant-select-selection-placeholder {
+      color: rgba(255, 255, 255, 0.5);
+    }
+    .ant-select-clear {
+      color: rgba(255, 255, 255, 1);
+    }
   }
-  .ant-cascader-picker-clear,
-  .ant-cascader-picker-arrow {
-    right: 10px;
-  } */
 `;

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

@@ -1,7 +1,9 @@
-import { useEditor } from "@/modules/editor";
+import { useResource } from "@/modules/resource";
 import { css } from "@linaria/core";
+import { cloneDeep } from "lodash";
 import { defineComponent, reactive } from "vue";
 import { bool, string } from "vue-types";
+import CateFilter from "./CateFilter";
 import CateSelect from "./CateSelect";
 
 export default defineComponent({
@@ -11,9 +13,10 @@ export default defineComponent({
   },
   emits: ["change"],
   setup(props, { emit }) {
-    const { controls } = useEditor();
+    const { controls } = useResource();
     const state = reactive({
-      values: [] as any,
+      limitLen: 2,
+      values: {} as any,
     });
     const getCate = () => {
       const categories = props.isSys
@@ -25,34 +28,64 @@ export default defineComponent({
 
       return currCate?.children || [];
     };
-    const cateChange = (v: string) => {
-      state.values = v;
+    const cateChange = (id: string, v: string) => {
+      const values = cloneDeep(state.values);
+      if (!v && values[id]) {
+        delete values[id];
+      } else {
+        values[id] = v;
+      }
+      state.values = values;
+      const categories = Object.values(values);
+      emit(
+        "change",
+        categories && categories.length > 0 ? categories : undefined
+      );
+    };
+    const filterChange = (v: any) => {
+      let values = cloneDeep(state.values);
+      if (!v) {
+        emit("change", undefined);
+        state.values = {};
+        return;
+      }
+      values = { ...values, ...v };
+      Object.keys(values).map((key: any) => {
+        if (values[key] == undefined) {
+          delete values[key];
+        }
+      });
+      state.values = values;
+      const categories = Object.values(values);
+      emit(
+        "change",
+        categories && categories.length > 0 ? categories : undefined
+      );
     };
     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" />
+          {/* {options.slice(0, state.limitLen).map((d: any, i: number) => (
+            <div class={"cate_item flex-1"}>
+              <CateSelect
+                key={i}
+                label={d.name}
+                data={d.children}
+                value={state.values[d.id]}
+                onChange={(v) => cateChange(d.id, v)}
+              />
             </div>
-          </Tooltip> */}
+          ))} */}
+
+          <div class={"flex-1"}>
+            <CateFilter
+              options={options}
+              value={state.values}
+              onChange={filterChange}
+            />
+          </div>
         </div>
       );
     };
@@ -62,12 +95,12 @@ export default defineComponent({
 const rootStyle = css`
   display: flex;
   align-items: center;
-  margin: 12px 0;
   .ant-cascader {
     width: 100%;
   }
   .cate_item {
     margin-left: 10px;
+    width: 90px;
     &:first-child {
       margin-left: 0;
     }

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({
@@ -48,14 +48,15 @@ export const Sources = defineComponent({
 
     onMounted(() => getData());
 
-    watch(
-      () => [props.sourceFrom, props.sourceType],
-      () => {
-        const ctrl = getCurrCtrl();
-        if (ctrl.state.list.length == 0) getData();
-      }
-    );
-
+    const filterChange = (v: any) => {
+      const ctrl = getCurrCtrl();
+      const query = ctrl.state.query || {};
+      ctrl.state.query = {
+        ...query,
+        categories: v,
+      };
+      ctrl.loadPage(1);
+    };
     return () => {
       const control = getCurrCtrl();
       const dataSource = control.state.list;
@@ -64,9 +65,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 () => {
@@ -79,13 +79,12 @@ export const Sources = defineComponent({
             </div>
           )}
           <div>
-            {/* <ListFilter
+            <ListFilter
+              class={"mb-16px"}
               sourceType={props.sourceType}
               isSys={props.sourceFrom == "user" ? false : true}
-              onChange={(v) => {
-                console.log(v);
-              }}
-            /> */}
+              onChange={filterChange}
+            />
             <Container
               class="grid grid-cols-2 gap-10px"
               behaviour="copy"
@@ -114,7 +113,11 @@ export const Sources = defineComponent({
                         queenApi.messageSuccess("删除成功!");
                         return;
                       }
-
+                      if (name == "edit") {
+                        await resource.actions.editSource(item, sourceType);
+                        control.fresh();
+                        return;
+                      }
                       if (name == "publish" || name == "unpublish") {
                         const pub = name == "publish";
                         await resource.actions.publishMaterial(item, pub);

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

@@ -144,7 +144,9 @@ export default defineUI({
                     <Menu.Item>
                       <div onClick={() => emit("menu", "delete")}>删除</div>
                     </Menu.Item>
-
+                    <Menu.Item>
+                      <div onClick={() => emit("menu", "edit")}>编辑</div>
+                    </Menu.Item>
                     {isSys && !record.published && (
                       <Menu.Item>
                         <div onClick={() => emit("menu", "publish")}>

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

@@ -6,9 +6,8 @@ import { Image, Loadmore } from "@queenjs/ui";
 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";
+import PreviewTplModal from "./PreviewTplModal";
 
 export default defineUI({
   setup() {
@@ -34,11 +33,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 +63,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

@@ -1,4 +1,4 @@
-import { cx } from "@linaria/core";
+import { css, cx } from "@linaria/core";
 import { Tooltip } from "ant-design-vue";
 import { defineComponent, reactive } from "vue";
 import { number, object } from "vue-types";
@@ -124,7 +124,7 @@ export default defineUI({
       const { list, tabIndex } = state;
 
       return (
-        <div class="h-full flex">
+        <div class="h-full flex  relative z-2">
           <PanelTabs
             tabIndex={tabIndex}
             onChange={(index) => {
@@ -134,16 +134,35 @@ export default defineUI({
               state.tabIndex = index;
             }}
           />
-          {tabs.map((tab, index) => {
-            if (!list.includes(index)) return null;
-            return (
-              <PanelContent
-                key={index}
-                currentTab={tab}
-                class={tabIndex !== index && "hidden"}
-              />
-            );
-          })}
+          <div
+            class={[
+              "flex flex-1 relative transition-all w-210px",
+              tabIndex != -1 ? "max-w-210px" : "max-w-0",
+            ]}
+          >
+            {tabs.map((tab, index) => {
+              if (!list.includes(index)) return null;
+              return (
+                <PanelContent
+                  key={index}
+                  currentTab={tab}
+                  currentIndex={tabIndex}
+                  contentIndex={index}
+                  class={tabIndex !== index && "hidden"}
+                />
+              );
+            })}
+            {tabIndex != -1 && (
+              <div
+                class={SliderClose}
+                onClick={() => {
+                  state.tabIndex = -1;
+                }}
+              >
+                <img src={require("@/assets/imgs/sliderClose.svg")} />
+              </div>
+            )}
+          </div>
         </div>
       );
     };
@@ -188,6 +207,8 @@ const PanelTabs = defineComponent({
 const PanelContent = defineComponent({
   props: {
     currentTab: object().isRequired,
+    currentIndex: number(),
+    contentIndex: number(),
   },
   setup(props) {
     const state = reactive({
@@ -201,7 +222,7 @@ const PanelContent = defineComponent({
 
       if (!currentTab.content) return null;
       return (
-        <div class="mt-15px mx-5px flex items-center justify-around space-x-1">
+        <div class="mt-15px px-10px grid gap-10px grid-cols-3">
           {currentTab.content?.map((item: any, index: number) => (
             <span
               class={cx(
@@ -224,7 +245,7 @@ const PanelContent = defineComponent({
     };
 
     const Subcontent = () => {
-      const { currentTab } = props;
+      const { currentTab, currentIndex, contentIndex } = props;
       const { currCompIndex, list } = state;
 
       const currComps = currentTab.component
@@ -238,8 +259,10 @@ const PanelContent = defineComponent({
             return (
               <currComp.component
                 key={index}
+                currentIndex={currentIndex}
+                contentIndex={contentIndex}
                 class={cx(
-                  "flex-1 h-1/1 px-16px !my-10px overflow-x-hidden overflow-y-auto scrollbar",
+                  "flex-1 h-1/1 px-10px !my-10px overflow-x-hidden overflow-y-auto scrollbar",
                   currCompIndex !== index && "hidden"
                 )}
                 {...currComp.props}
@@ -260,3 +283,14 @@ const PanelContent = defineComponent({
     };
   },
 });
+const SliderClose = css`
+  position: absolute;
+  right: -16px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  img {
+    width: 16px;
+    object-fit: contain;
+  }
+`;

src/modules/editor/components/Viewport/Slider/SliderRight/CompTree.tsx

@@ -226,26 +226,27 @@ const CompNode = defineComponent({
           : comp.thumbnail || compOpts?.thumbnail;
       const title =
         comp.compKey === "Text" ? textTitle(comp.value) : props.title;
+
       return (
         <div class={[nodeStyle, "flex"]}>
           <Image src={thumbnail} size={240} />
-          <span class="flex-1 w-0 whitespace-nowrap overflow-hidden overflow-ellipsis pr-10px">
+          <span class="flex-1 w-0 text-12px whitespace-nowrap overflow-hidden overflow-ellipsis pr-6px">
             {title}
           </span>
-          <span class="actions space-x-4px whitespace-nowrap transition">
-            {actions.map((action, i) =>
-              action.getVisible.call(editor, comp) ? (
+          <span class="actions space-x-2px whitespace-nowrap transition">
+            {actions.map((action, i) => {
+              return action.getVisible.call(editor, comp) ? (
                 <action.component
                   key={i}
-                  class="p-4px"
+                  class={["p-4px", action.getValue?.(comp) ? "active" : ""]}
                   value={action.getValue?.(comp)}
                   onClick={(e: MouseEvent) => {
                     e.stopPropagation();
                     action.onClick.call(editor, comp);
                   }}
                 />
-              ) : null
-            )}
+              ) : null;
+            })}
           </span>
         </div>
       );
@@ -256,32 +257,42 @@ const CompNode = defineComponent({
 const treeStyle = css`
   .ant-tree-switcher {
     display: flex;
+    width: 14px;
+    padding-right: 4px;
     justify-content: center;
     align-items: center;
   }
   .ant-tree-indent-unit {
-    width: 12px;
+    width: 4px;
   }
 `;
 
 const nodeStyle = css`
   display: flex;
   align-items: center;
-  padding: 6px;
+  padding: 6px 2px;
   @apply rounded;
 
   > img {
-    width: 24px;
-    height: 24px;
-    margin-right: 6px;
+    width: 20px;
+    height: 20px;
+    margin-right: 4px;
     object-fit: contain;
   }
   .actions {
-    opacity: 0;
+    .inficon {
+      opacity: 0;
+      font-size: 14px;
+      &.active {
+        opacity: 1;
+      }
+    }
   }
   &:hover {
     .actions {
-      opacity: 1;
+      .inficon {
+        opacity: 1;
+      }
     }
   }
 `;

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

@@ -15,8 +15,8 @@ export default defineUI({
           ?.Form || Empty;
       return (
         <div class="flex flex-col h-1/1">
-          <div class="p-16px border-bottom !border-2px">设置栏</div>
-          <div class="flex-1 p-16px scrollbar">
+          <div class="p-16px px-8px border-bottom !border-2px">设置栏</div>
+          <div class="flex-1 p-16px px-8px scrollbar">
             <Form component={currComp} />
           </div>
           {/* <div class="p-16px border-bottom !border-2px border-top">组件树</div>

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

@@ -19,12 +19,12 @@ export default defineUI({
       <div class="flex flex-col h-1/1">
         <slots.Header class="px-16px py-10px bg-component border-bottom !border-2px" />
         <div class="flex flex-1 h-0">
-          <slots.SliderLeft class="w-370px bg-component border-right !border-2px" />
+          <slots.SliderLeft class="bg-component border-right !border-2px" />
           <div class="flex-1 relative flex flex-col overflow-hidden">
             <slots.Toolbar />
             <slots.Content />
           </div>
-          <slots.SliderRight class="w-360px bg-component border-left !border-2px" />
+          <slots.SliderRight class="w-300px bg-component border-left !border-2px" />
         </div>
       </div>
     );

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/module/https/index.ts

@@ -48,20 +48,4 @@ export const https = EditorModule.http({
       data,
     });
   },
-  getCategories() {
-    return this.request("/category", {
-      method: "GET",
-    });
-  },
-  updateCategories(data: any) {
-    return this.request("/category", {
-      method: "POST",
-      data,
-    });
-  },
-  getSysCategories() {
-    return this.request("/sys/category", {
-      method: "GET",
-    });
-  },
 });

src/modules/editor/module/index.ts

@@ -13,21 +13,20 @@ import { initActions } from "./actions/init";
 import { helpers } from "./helpers";
 import { editHelpers } from "./helpers/edit";
 
-import { https } from "./https";
-import { store } from "./stores";
-import { DragAddCtrl } from "../controllers/DragAddCtrl";
-import { SelectCtrl } from "../controllers/SelectCtrl";
-import { CompObject } from "../controllers/SelectCtrl/compObj";
-import { manualActions } from "./actions/editWithManualHistory";
 import { wxController } from "@/controllers/wxController";
 import { ImageCropperCtrl } from "../controllers/CropperCtrl";
-import { MediaCtrl } from "../controllers/MediaCtrl/indext";
-import { TextEditorCtrl } from "../controllers/TextEditorCtrl";
-import { ScreenCtrl } from "../controllers/ScreenCtrl";
-import { EditorCtrl } from "../controllers/EditorCtrl";
 import { CtxMenuCtrl } from "../controllers/CtxMenuCtrl";
-import { CategoryCtrl } from "../controllers/CategoryCtrl";
+import { DragAddCtrl } from "../controllers/DragAddCtrl";
+import { EditorCtrl } from "../controllers/EditorCtrl";
+import { MediaCtrl } from "../controllers/MediaCtrl/indext";
 import { PreviewCtrl } from "../controllers/PreviewCtrl";
+import { ScreenCtrl } from "../controllers/ScreenCtrl";
+import { SelectCtrl } from "../controllers/SelectCtrl";
+import { CompObject } from "../controllers/SelectCtrl/compObj";
+import { TextEditorCtrl } from "../controllers/TextEditorCtrl";
+import { manualActions } from "./actions/editWithManualHistory";
+import { https } from "./https";
+import { store } from "./stores";
 
 export class EditorModule extends ModuleRoot {
   config = this.setConfig({
@@ -72,7 +71,6 @@ export class EditorModule extends ModuleRoot {
     screenCtrl: new ScreenCtrl(this),
     editorCtrl: new EditorCtrl(this),
     menuCtrl: new CtxMenuCtrl(this),
-    categoryCtrl: new CategoryCtrl(this),
     previewCtrl: new PreviewCtrl(this),
   };
 
@@ -82,7 +80,6 @@ export class EditorModule extends ModuleRoot {
     this.actions.init();
     this.controls.screenCtrl.initEvent();
     this.controls.menuCtrl.initEvent();
-    this.controls.categoryCtrl.init();
   }
 
   jumpIndexHtml(route = "#/") {

src/modules/editor/objects/DesignTemp/creates/createCompStyle.ts

@@ -10,7 +10,7 @@ export function createCompStyle(
   layout: Layout,
   comp: DesignComp
 ) {
-  const { designToNaturalSize, pxToDesignSize } = module.helper;
+  const { designToNaturalSize, pxToDesignSize , designSizeToPx} = module.helper;
   const style: any = {};
   const transform: any = {};
 
@@ -36,8 +36,12 @@ export function createCompStyle(
       style["border-radius"] = layout.border.radius / 2 + "%";
       style["overflow"] = "hidden";
     }
+    if (layout.border.radius2 !== undefined) {
+      style["border-radius"] = designSizeToPx(Math.min(layout.size[0], layout.size[1])) * layout.border.radius2 / 100.0 + "px";
+      style["overflow"] = "hidden";
+    }
   }
-
+  
   if (layout.radius !== undefined) {
     style["border-radius"] = layout.radius / 2 + "%";
     style["overflow"] = "hidden";

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) {
@@ -110,7 +112,7 @@ export const toolbars = createToolbars({
   // 锁定
   lock: {
     component: TipIcons.Lock,
-    getValue: (comp) => (comp.layout.locked ? 0 : 1),
+    getValue: (comp) => (comp.layout.locked ? 1 : 0),
     onClick(comp) {
       this.actions.setCompLock(comp);
     },

src/modules/editor/typings.ts

@@ -22,6 +22,7 @@ export type Layout = {
     width?: number;
     color?: string;
     radius?: number;
+    radius2?: number;
   };
   zIndex?: number;
   margin?: string;

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,43 @@ 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 editSource(record: any, sourceType: string, editCategory = true) {
+    // const itemRes = await this.https.detailComp(record._id);
+    // if (itemRes.errorNo != 200) {
+    //   queenApi.messageWarn("未查询到数据！");
+    //   return;
+    // }
+    let type = sourceType.toLowerCase();
+    const res = await this.showModal(
+      <this.components.SouceModal
+        item={record}
+        sourceType={type}
+        editCategory={editCategory}
+      />,
+      {
+        width: "360px",
+        title: "编辑",
+        maskClosable: false,
+      }
+    );
+
+    if (type == "image" || type == "video") {
+      await this.https.updateResouce(res);
+    } else if (type == "template") {
+      await this.https.updatePromotion(res);
+    } else {
+      await this.https.updateComp(res);
+    }
+    queenApi.messageSuccess("保存成功");
+  },
 
   async createPromotion() {
     const title = await queenApi.showInput({

src/modules/resource/components/SouceModal.tsx

@@ -0,0 +1,189 @@
+import { css } from "@linaria/core";
+import { Image } from "@queenjs/ui";
+import { Button, Form, Input, TreeSelect } from "ant-design-vue";
+import { useModal } from "queenjs";
+import { defineComponent, nextTick, onMounted, reactive, ref } from "vue";
+import { any, bool, string } from "vue-types";
+import { useResource } from "..";
+import { SelectOneImage } from "@/pages/website/Material2/modal";
+import Thumbnail from "@/components/Thumbnail";
+export default defineComponent({
+  props: {
+    item: any(),
+    sourceType: string().isRequired,
+    editCategory: bool(),
+  },
+  setup(props) {
+    const { controls } = useResource();
+    let data = props.item
+      ? { ...props.item }
+      : {
+          title: "",
+          categories: [],
+        };
+    if (!data.categories) {
+      data.categories = [];
+    }
+    const formState: { [name: string]: any } = reactive({ ...data });
+    const sourceTitle = ["comp", "shape", "text", "template", "v"];
+    const state = reactive({
+      categoriesVal: {} as any,
+      categoryList: [] as any,
+      categoryMap: new Map<string, any>(),
+    });
+
+    const getCate = () => {
+      const categories = controls.categoryCtrl.state.categories;
+      const currCate: any = categories.find((e: any) => {
+        return e.value == props.sourceType;
+      });
+      initCateMap(currCate?.children || []);
+      state.categoryList = currCate?.children || [];
+    };
+    const initCateMap = (options: any, parent = "") => {
+      options.map((e: any) => {
+        state.categoryMap.set(e.id, {
+          parent: parent,
+          children: e.children || undefined,
+        });
+        if (e.children) {
+          initCateMap(e.children, e.id);
+        }
+      });
+    };
+    onMounted(() => {
+      getCate();
+      nextTick(() => {
+        initCateValue();
+      });
+    });
+
+    const initCateValue = () => {
+      let values: any = {};
+      formState.categories.map((id: string) => {
+        const rootId = getRootParent(id);
+        if (rootId) {
+          values[rootId] || (values[rootId] = []);
+          values[rootId].push(id);
+        }
+      });
+
+      state.categoriesVal = values;
+    };
+    const getRootParent = (id: string): string => {
+      const item = state.categoryMap.get(id);
+      if (!item.parent) {
+        return id;
+      } else {
+        return getRootParent(item.parent);
+      }
+    };
+    const rules = ref({
+      title: [
+        {
+          required: props.sourceType != "image" ? true : false,
+          message: "名称不能为空！",
+        },
+      ],
+      thumbnail: [
+        {
+          required: props.sourceType != "image" ? true : false,
+          message: "封面图不能为空",
+        },
+      ],
+    });
+
+    const { validate, validateInfos } = Form.useForm(formState, rules);
+
+    const modal = useModal();
+
+    const submit = () => {
+      validate().then(async (values) => {
+        let categoriesVal: any = [];
+        Object.values(state.categoriesVal).forEach((e: any) => {
+          categoriesVal = [...categoriesVal, ...e];
+        });
+        formState.categories = categoriesVal;
+        modal.submit(formState);
+      });
+    };
+    const changeThumbnail = async () => {
+      if (props.sourceType == "image") {
+        return;
+      }
+      const url = await SelectOneImage();
+      if (!url) return;
+      formState.thumbnail = url;
+    };
+
+    return () => {
+      const thumbnail =
+        props.sourceType != "image" ? formState.thumbnail : formState.file.url;
+      return (
+        <div class={configFormStyle}>
+          <div class="modal_form">
+            <Form name="basic">
+              <Form.Item name="thumbnail" {...validateInfos.thumbnail}>
+                <div class={"h-180px bg-light-50"} onClick={changeThumbnail}>
+                  <Thumbnail
+                    src={thumbnail}
+                    class="h-1/1 w-1/1"
+                    objectContain={props.sourceType == "image" ? true : false}
+                  />
+                </div>
+              </Form.Item>
+              {sourceTitle.includes(props.sourceType) && (
+                <Form.Item name="title" {...validateInfos.title}>
+                  <Input v-model={[formState.title, "value"]} />
+                </Form.Item>
+              )}
+              {props.editCategory &&
+                state.categoryList.map((item: any, index: number) => {
+                  return (
+                    <Form.Item key={index} name={`categories.${index}`}>
+                      <TreeSelect
+                        value={state.categoriesVal[item.id]}
+                        allowClear
+                        treeCheckable
+                        dropdownStyle={{ maxHeight: "500px", overflow: "auto" }}
+                        placeholder={`请选择${item.name}`}
+                        treeData={item?.children}
+                        replaceFields={{
+                          children: "children",
+                          label: "name",
+                          value: "id",
+                        }}
+                        onChange={(v) => {
+                          state.categoriesVal[item.id] = v;
+                        }}
+                      />
+                    </Form.Item>
+                  );
+                })}
+            </Form>
+          </div>
+          <div class="modal_footer">
+            <Button onClick={modal.cancel}>取消</Button>
+            <Button type="primary" onClick={submit}>
+              确定
+            </Button>
+          </div>
+        </div>
+      );
+    };
+  },
+});
+
+const configFormStyle = css`
+  .thumb_wapper {
+    height: 180px;
+  }
+  .modal_footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: 10px 0;
+    .ant-btn + .ant-btn {
+      margin-left: 10px;
+    }
+  }
+`;

src/modules/resource/components/index.ts

@@ -1,6 +1,7 @@
 import MaterialItem from "./MaterialItem";
 import PromotionItem from "./PromotionItem";
 import ResourceManager from "./ResourceManager";
+import SouceModal from "./SouceModal";
 import CollectionEditModal from "./Collection/CollectionEditModal";
 import CollectionListModal from "./Collection/CollectionListModal";
 
@@ -10,4 +11,5 @@ export const compoents = {
   ResourceManager,
   CollectionEditModal,
   CollectionListModal,
+  SouceModal,
 };

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

@@ -1,8 +1,8 @@
 import { ModuleControl } from "queenjs";
 import { reactive } from "vue";
-import { EditorModule } from "../../module";
+import { ResourceModule } from "../../index";
 import { nanoid } from "nanoid";
-export class CategoryCtrl extends ModuleControl<EditorModule> {
+export class CategoryCtrl extends ModuleControl<ResourceModule> {
   state = reactive({
     result: {} as any,
     categories: [],

src/modules/resource/controllers/PromotionController.ts

@@ -5,8 +5,8 @@ export class PromotionController {
   createPromotion() {
     console.log("createPromotion");
   }
-  onMenuClick(menu: string, item: any) {
-    console.log("onMenuClick", menu, item);
+  onMenuClick(menu: string, item: any, isSys: boolean) {
+    console.log("onMenuClick", menu, item, isSys);
   }
   onEdit(item: any) {
     const _params = new URLSearchParams(decodeURIComponent(location.search));

src/modules/resource/http.ts

@@ -67,6 +67,9 @@ export const http = ResourceModule.http({
   updateComp(data: any) {
     return this.request("/frame/update", { method: "POST", data });
   },
+  detailComp(id: string) {
+    return this.request(`/frame/detail/${id}`, { method: "GET" });
+  },
 
   deleteComp(id: string) {
     return this.request(`/frame/delete/${id}`, { method: "POST" });
@@ -103,6 +106,22 @@ export const http = ResourceModule.http({
   deleteCommitData(data: any) {
     return this.request(`/wk/h5/delete`, { method: "POST", data });
   },
+  getCategories() {
+    return this.request("/category", {
+      method: "GET",
+    });
+  },
+  updateCategories(data: any) {
+    return this.request("/category", {
+      method: "POST",
+      data,
+    });
+  },
+  getSysCategories() {
+    return this.request("/sys/category", {
+      method: "GET",
+    });
+  },
 });
 
 /**

src/modules/resource/index.ts

@@ -8,6 +8,7 @@ import { compoents } from "./components";
 import { helper } from "./helper";
 import { http } from "./http";
 import { store } from "./store";
+import { CategoryCtrl } from "./controllers/CategoryCtrl";
 
 export class ResourceModule extends ModuleRoot {
   config = this.setConfig({
@@ -48,14 +49,22 @@ 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
+    ),
+    categoryCtrl: new CategoryCtrl(this),
   };
   natsBus = new BusController();
   treeController = new TreeController(this.natsBus);
 
   onReady() {
+    this.controls.categoryCtrl.init();
     this.controls.promotionListCtrl.setCrudPrefix("/h5");
     this.controls.promotionListCtrl.state.size = 12;
     this.controls.materialListCtrl.setCrudPrefix("/source");
@@ -83,39 +92,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();
   }

src/pages/h5/share/Promotion.tsx

@@ -43,6 +43,9 @@ export default defineComponent(() => {
   // }).then(data=>{
   //   console.log(data);
   // })
+  if ( !isPc() ) {
+      return ()=><editor.components.Preview />
+  } 
 
   function getPageH() {
     const rootPage = editor.store.rootPage;

src/pages/website/Category/CategoryTree.tsx

@@ -1,4 +1,4 @@
-import { useEditor } from "@/modules/editor";
+import { useResource } from "@/modules/resource";
 import {
   DeleteOutlined,
   FormOutlined,
@@ -52,7 +52,7 @@ const TreeNode = defineComponent({
     item: any().isRequired,
   },
   setup(props) {
-    const { controls } = useEditor();
+    const { controls } = useResource();
     const addItem = async (parent = "_") => {
       const name = await queenApi.showInput({
         title: "分类名称",

src/pages/website/Category/index.tsx

@@ -2,12 +2,12 @@ import { css } from "@linaria/core";
 
 import { defineComponent } from "vue";
 
-import { useEditor } from "@/modules/editor";
+import { useResource } from "@/modules/resource";
 import CategoryTree from "./CategoryTree";
 
 export default defineComponent({
   setup() {
-    const { controls } = useEditor();
+    const { controls } = useResource();
 
     return () => {
       return (

src/pages/website/Promotion2/components/PromotionItem.tsx

@@ -110,8 +110,11 @@ export default defineUI({
                     <div onClick={() => emit("menu", "stat")}>统计分析</div>
                   </Menu.Item>
                   <Menu.Item>
-                    <div onClick={() => emit("menu", "rename")}>重命名</div>
+                    <div onClick={() => emit("menu", "edit")}>编辑</div>
                   </Menu.Item>
+                  {/* <Menu.Item>
+                    <div onClick={() => emit("menu", "rename")}>重命名</div>
+                  </Menu.Item> */}
                   <Menu.Item>
                     <div onClick={() => emit("menu", "delete")}>删除</div>
                   </Menu.Item>
@@ -132,13 +135,13 @@ export default defineUI({
                     </Menu.Item>
                   )}
 
-                  {isSys && (
+                  {/* {isSys && (
                     <Menu.Item>
                       <div onClick={() => emit("menu", "thumbnail")}>
                         替换封面
                       </div>
                     </Menu.Item>
-                  )}
+                  )} */}
                 </Menu>
               }
             >

src/pages/website/Promotion2/components/index.tsx

@@ -5,6 +5,7 @@ import { onMounted } from "vue";
 import { any } from "vue-types";
 import Header from "./Header";
 import PromotionItem from "./PromotionItem";
+import { useAuth } from "@queenjs-modules/auth";
 
 export default defineUI({
   props: {
@@ -16,11 +17,15 @@ export default defineUI({
     List,
   },
   setup(props, { slots }) {
+    const auth = useAuth();
+
     onMounted(() => {
       props.Controller.ListCtrl.loadPage(1);
     });
 
     return () => {
+      //@ts-ignore
+      const isSys = (auth.store.userInfo.roles || []).indexOf("system") > -1;
       return (
         <div>
           <slots.Header onAdd={props.Controller.createPromotion} />
@@ -33,7 +38,7 @@ export default defineUI({
               <PromotionItem
                 record={record}
                 onMenu={(name) => {
-                  props.Controller.onMenuClick(name, record);
+                  props.Controller.onMenuClick(name, record, isSys);
                 }}
                 onEdit={(record) => props.Controller.onEdit(record)}
               />

src/pages/website/Promotion2/controller.tsx

@@ -44,7 +44,7 @@ export function createPromotinController(
     });
   }
   let url = "";
-  ctrl.onMenuClick = async (name, record) => {
+  ctrl.onMenuClick = async (name, record, isSys) => {
     switch (name) {
       case "stat":
         window.open("https://show.3dqueen.cloud/stat/#/count?id=" + record._id);
@@ -70,6 +70,10 @@ export function createPromotinController(
         await resource.actions.publishPromotion(record, false);
         break;
 
+      case "edit":
+        await resource.actions.editSource(record, "template", isSys);
+        ctrl.ListCtrl.fresh();
+        break;
       case "thumbnail":
         url = (await SelectOneImage()) as string;
         if (!url) return;

src/pages/website/components/layout/LeftContent.tsx

@@ -7,6 +7,7 @@ import {
   IconSettings,
 } from "@queenjs/icons";
 import { Avatar, Divider } from "ant-design-vue";
+import { AppstoreOutlined } from "@ant-design/icons-vue";
 import { defineUI, queenApi } from "queenjs";
 import { defineComponent } from "vue";
 import { array, object } from "vue-types";
@@ -46,7 +47,7 @@ export default defineUI({
       {
         link: "/workbench/category",
         label: "我的分类",
-        icon: IconCube,
+        icon: AppstoreOutlined,
         // suffix: "32",
       },
       {
@@ -68,8 +69,8 @@ export default defineUI({
 
     return () => {
       const { userInfo } = props.Controller.state;
-      const  isSys = (userInfo.roles || []).indexOf("system") > -1;
-    
+      const isSys = (userInfo.roles || []).indexOf("system") > -1;
+
       return (
         <div class={cx(rootStyles, "px-25px py-16px h-1/1 flex flex-col")}>
           <div>
@@ -78,7 +79,9 @@ export default defineUI({
           <div class="my-50px flex items-center">
             <Avatar size={76} src={userInfo.avatar} />
             <div class="ml-20px flex-1">
-              <p class="mb-10px text-16px font-bold">{userInfo.name} {isSys?"(平台账号)":""}</p>
+              <p class="mb-10px text-16px font-bold">
+                {userInfo.name} {isSys ? "(平台账号)" : ""}
+              </p>
               <div
                 class="text-12px text-gray cursor-pointer"
                 style={{ color: "#E88B00" }}