category

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

@@ -0,0 +1,91 @@
+import { ModuleControl } from "queenjs";
+import { reactive } from "vue";
+import { EditorModule } from "../../module";
+
+export class CategoryCtrl extends ModuleControl<EditorModule> {
+  state = reactive({
+    result: {} as any,
+    categories: [],
+    syscategories: [],
+  });
+
+  init() {
+    this.getUserCate();
+    this.getSystemCate();
+  }
+  async getUserCate() {
+    const res = await this.https.getCategories();
+    if (res.errorNo != 200) {
+      return;
+    }
+    this.state.result = res.result;
+    this.state.categories = res.result.categories;
+  }
+  async getSystemCate() {
+    const res = await this.https.getSysCategories();
+    if (res.errorNo != 200) {
+      return;
+    }
+    this.state.syscategories = res.result.categories;
+  }
+  buildCateData(
+    data: any,
+    changeItem: { id?: string; name: string; parent?: string }
+  ) {
+    let res = [] as any;
+    data?.map((item: any, index: number) => {
+      res[index] = {};
+
+      if (item.id == changeItem.parent) {
+        if (!item?.children) {
+          item.children = [];
+        }
+        item.children.push({
+          name: changeItem.name,
+          value: changeItem.name,
+          type: item.type,
+          id: Date.now() + "",
+        });
+      }
+      if (item.id == changeItem?.id) {
+        item.value = changeItem.name;
+        item.name = changeItem.name;
+      }
+      res[index] = { ...item };
+      let arr = [] as any;
+      if (Array.isArray(item.children) && item.children.length > 0) {
+        arr = this.buildCateData(item.children, changeItem);
+        res[index].children = arr;
+      }
+    });
+    return res;
+  }
+  delCateData(data: any, id: string) {
+    data?.map((item: any, index: number) => {
+      if (item.id == id) {
+        data.splice(index, 1);
+        return;
+      }
+      if (Array.isArray(item.children) && item.children.length > 0) {
+        this.delCateData(item.children, id);
+      }
+    });
+    return data;
+  }
+
+  async updateCate(data: { id?: string; name: string; parent?: string }) {
+    const categories: any = [...this.state.categories];
+    const resData = this.buildCateData(categories, data);
+    this.state.result.categories = resData;
+    await this.https.updateCategories(this.state.result);
+    this.state.categories = categories;
+  }
+
+  async deleteCate(id: string) {
+    const categories: any = [...this.state.categories];
+    const resData = this.delCateData(categories, id);
+    this.state.result.categories = resData;
+    await this.https.updateCategories(this.state.result);
+    this.state.categories = categories;
+  }
+}

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

@@ -12,11 +12,11 @@ export const https = EditorModule.http({
     });
   },
   getCompDetail(id: string, isSys = false) {
-    const params:any = {};
+    const params: any = {};
     if (isSys) params.isSys = true;
     return this.request("/frame/detail/" + id, {
       method: "GET",
-      params
+      params,
     });
   },
   saveDesign(data: Partial<DesignTemp>) {
@@ -48,4 +48,20 @@ 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

@@ -27,6 +27,7 @@ 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";
 
 export class EditorModule extends ModuleRoot {
   config = this.setConfig({
@@ -72,6 +73,7 @@ export class EditorModule extends ModuleRoot {
     screenCtrl: new ScreenCtrl(this),
     editorCtrl: new EditorCtrl(this),
     menuCtrl: new CtxMenuCtrl(this),
+    categoryCtrl: new CategoryCtrl(this),
   };
 
   compObjsMap = new Map<string, CompObject>();
@@ -81,6 +83,7 @@ export class EditorModule extends ModuleRoot {
     this.controls.animCtrl.initEvent();
     this.controls.screenCtrl.initEvent();
     this.controls.menuCtrl.initEvent();
+    this.controls.categoryCtrl.init();
   }
 
   jumpIndexHtml(route = "#/") {

src/pages/editor/index.ts

@@ -2,11 +2,11 @@ import { startApp } from "@/App";
 import { initAuthDef } from "@/hooks/initAuthDef";
 import { initLauncher } from "@/modules/launcher";
 import { initResource } from "@/modules/resource";
-import CKEditor from "@ckeditor/ckeditor5-vue";
+// import CKEditor from "@ckeditor/ckeditor5-vue";
 import router from "./router";
 
 document.title = "推广编辑器";
 
 startApp(router, [initAuthDef, initResource, initLauncher], (app) => {
-  app.use(CKEditor);
+  // app.use(CKEditor);
 });

src/pages/website/Category/CategoryTree.tsx

@@ -0,0 +1,181 @@
+import { useEditor } from "@/modules/editor";
+import {
+  DeleteOutlined,
+  FormOutlined,
+  PlusSquareOutlined,
+} from "@ant-design/icons-vue";
+import { css } from "@linaria/core";
+import { Button, Tree } from "ant-design-vue";
+import { queenApi } from "queenjs";
+import { defineComponent } from "vue";
+import { any } from "vue-types";
+
+export default defineComponent({
+  props: {
+    data: any(),
+  },
+  setup(props) {
+    const formatTreeData = (data: any, level = 0) => {
+      let res = [] as any;
+      data?.map((item: any, index: number) => {
+        res[index] = {};
+        res[index].id = item.id;
+        res[index].level = level;
+        res[index].name = item.name;
+        let arr = [] as any;
+        if (Array.isArray(item.children) && item.children.length > 0) {
+          arr = formatTreeData(item.children, level + 1);
+          res[index].children = arr;
+        }
+      });
+      return res;
+    };
+
+    return () => (
+      <Tree.DirectoryTree
+        class={TreeRoot}
+        treeData={formatTreeData(props.data)}
+        showIcon={false}
+        blockNode={true}
+      >
+        {{
+          title: (data: any) => {
+            return <TreeNode item={data} />;
+          },
+        }}
+      </Tree.DirectoryTree>
+    );
+  },
+});
+const TreeNode = defineComponent({
+  props: {
+    item: any().isRequired,
+  },
+  setup(props) {
+    const { controls } = useEditor();
+    const addItem = async (parent = "_") => {
+      const name = await queenApi.showInput({
+        title: "分类名称",
+        placeholder: "请输入分类名称",
+      });
+      if (!name) return;
+      controls.categoryCtrl.updateCate({ name, parent });
+    };
+    const deleteItem = async (id: string) => {
+      let sure = await queenApi.showConfirm({
+        type: "danger",
+        title: "删除分类",
+        content: "确定删除该分类?",
+      });
+      if (!sure) return;
+      controls.categoryCtrl.deleteCate(id);
+    };
+    const updateItem = async (item: any) => {
+      let res = await queenApi.showInput({
+        title: "分类名称",
+        defaultValue: item.name,
+        placeholder: "请输入分类名称",
+      });
+      if (!res) return;
+      item.name = res;
+      controls.categoryCtrl.updateCate({ id: item.id, name: item.name });
+    };
+    return () => {
+      const { item } = props;
+      console.log(item);
+      return (
+        <div class={"tree_item"} key={item.id}>
+          <div class="item_txt">{item.name || "undefined"}</div>
+          <div class="item_btn">
+            {item.level != 3 && (
+              <Button
+                type="text"
+                class="tree_btn"
+                title="添加子分类"
+                icon={<PlusSquareOutlined />}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  addItem(item.id);
+                }}
+              ></Button>
+            )}
+
+            {item.level != 0 && (
+              <>
+                <Button
+                  type="text"
+                  class="tree_btn"
+                  title="编辑分类"
+                  icon={<FormOutlined />}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    updateItem(item);
+                  }}
+                ></Button>
+                <Button
+                  type="text"
+                  class="tree_btn"
+                  title="删除分类"
+                  icon={<DeleteOutlined />}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    deleteItem(item.id);
+                  }}
+                ></Button>
+              </>
+            )}
+          </div>
+        </div>
+      );
+    };
+  },
+});
+
+const TreeRoot = css`
+  width: 100%;
+  .ant-tree-node-selected {
+    .tree_item {
+      .item_btn {
+        .tree_btn {
+          color: #fff;
+          &:hover {
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+  .tree_item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    .item_txt {
+      display: flex;
+      align-items: center;
+      .item_tit {
+        font-size: 14px;
+      }
+    }
+    &:hover {
+      .item_btn {
+        display: block;
+      }
+    }
+    .item_btn {
+      flex: 1;
+      display: none;
+      margin-left: 0.2rem;
+      .tree_btn {
+        margin: 0 6px;
+        min-width: auto;
+        color: #666;
+        border: none;
+        background-color: transparent;
+        box-shadow: none;
+        &:hover {
+          color: @inf-primary-color;
+        }
+      }
+    }
+  }
+`;

src/pages/website/Category/config.ts

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

src/pages/website/Category/index.tsx

@@ -0,0 +1,29 @@
+import { css } from "@linaria/core";
+
+import { defineComponent } from "vue";
+
+import { useEditor } from "@/modules/editor";
+import CategoryTree from "./CategoryTree";
+
+export default defineComponent({
+  setup() {
+    const { controls } = useEditor();
+
+    return () => {
+      return (
+        <div>
+          <h3 class={"text-22px"}>我的分类</h3>
+          <div class={CategoryView}>
+            <CategoryTree data={controls.categoryCtrl.state.categories} />
+          </div>
+        </div>
+      );
+    };
+  },
+});
+
+const CategoryView = css`
+  display: flex;
+  margin-top: 30px;
+  background-color: @inf-component-bg;
+`;

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

@@ -43,6 +43,12 @@ export default defineUI({
         icon: IconCube,
         // suffix: "32",
       },
+      {
+        link: "/workbench/category",
+        label: "我的分类",
+        icon: IconCube,
+        // suffix: "32",
+      },
       {
         link: "/workstage/material",
         label: "我的素材",

src/pages/website/index.ts

@@ -3,7 +3,7 @@ import { initAuthDef } from "@/hooks/initAuthDef";
 import { initViewportSize } from "@/hooks/initViewportSize";
 import { initEditor } from "@/modules/editor";
 import { initResource } from "@/modules/resource";
-import CKEditor from "@ckeditor/ckeditor5-vue";
+// import CKEditor from "@ckeditor/ckeditor5-vue";
 import router from "./router";
 import { initRemSize } from "@/hooks/initRemSize";
 
@@ -12,6 +12,6 @@ startApp(
   router,
   [initViewportSize, initRemSize, initAuthDef, initResource, initEditor],
   (app) => {
-    app.use(CKEditor);
+    // app.use(CKEditor);
   }
 );

src/pages/website/router.ts

@@ -37,6 +37,11 @@ const routes: Array<RouteRecordRaw> = [
         name: "collection",
         component: () => import("./MyCollection"),
       },
+      {
+        path: "/workbench/category",
+        name: "category",
+        component: () => import("./Category"),
+      },
       {
         path: "/workstage/material",
         name: "material",