update

src/modules/editor/actions/image.ts

@@ -1,38 +0,0 @@
-import { Exception } from "queenjs";
-import { EditorModule } from "..";
-import { DesignTemp } from "../defines/DesignTemp";
-import { editActions } from "./edit";
-
-export const ImgCompActions = EditorModule.action({
-  handleImageHotKey(key:string) {
-     if ( !this.store.isEditMode ) return;     
-     if (this.store.currComp?.compKey !== "Image") return;
-
-     console.log( this.store.currComp );
-     const value = this.store.currComp.value
-     if (key == "w") {
-        value.y = (parseFloat(value.y) - 0.5).toFixed(2)
-        return;
-     } 
-     if (key == "s") {
-        value.y = (parseFloat(value.y) + 0.5).toFixed(2)
-        return;
-     }
-     if (key == "a") {
-        value.x = (parseFloat(value.x) - 0.5).toFixed(2)
-        return;
-     }
-     if (key == "d") {
-        value.x = (parseFloat(value.x) + 0.5).toFixed(2)
-        return;
-     }
-     if (key == "q") {
-        value.s = (parseFloat(value.s) - 0.05).toFixed(2)
-        return;
-     }
-     if (key == "e") {
-        value.s = (parseFloat(value.s) + 0.05).toFixed(2)
-        return;
-     }
-  },
-});

src/modules/editor/actions/input.ts

@@ -1,36 +0,0 @@
-import { Exception } from "queenjs";
-import { EditorModule } from "..";
-import { DesignTemp } from "../defines/DesignTemp";
-import { editActions } from "./edit";
-
-export const InputEventActions = EditorModule.action({
-  // 模块初始化
-  initInputEvent() {
-
-      //lastFocusEvent
-
-      window.addEventListener("mousemove", (event)=>{
-           if ( !this.store.isEditMode ) return;
-      })
-
-      let dx = 0, dy=0, dt = 0;
-      window.addEventListener("mousedown", (event)=>{
-          console.log(event.clientX, event.clientY)
-          dx = event.clientX;
-          dy = event.clientY;
-          dt = Date.now();
-      })
-
-      window.addEventListener("mouseup", (event)=>{
-         const x = event.clientX - dx;
-         const y = event.clientY - dy;
-         const t = Date.now() - dt;
-         if ( !this.store.isEditMode ) return;
-         
-         if (Math.abs(x) < 3 && Math.abs(y) < 3  && t < 300 ) {
-           console.log("clicked");
-         }
-         
-      })
-  },
-});

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

@@ -3,7 +3,7 @@ import { string } from "vue-types";
 import { useCompData } from ".";
 import { CompUI } from "../..";
 import { useEditor } from "../../../..";
-import { DesignComp } from "../../../../defines/DesignTemp/DesignComp";
+import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
 import { Transfer } from "../Transfer";
 import { View } from "../View";
 

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

@@ -1,4 +1,4 @@
-import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
 import { set } from "lodash";
 import { defineComponent } from "vue";

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

@@ -1,4 +1,4 @@
-import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { computed, defineComponent } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";

src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -3,7 +3,7 @@ import { omit, upperFirst } from "lodash";
 import { defineComponent } from "vue";
 import { string } from "vue-types";
 import { useEditor } from "../../..";
-import { DesignComp } from "../../../defines/DesignTemp/DesignComp";
+import { DesignComp } from "../../../objects/DesignTemp/DesignComp";
 
 export const View = defineComponent({
   props: {
@@ -18,10 +18,13 @@ export const View = defineComponent({
 
     function createStyle(): any {
       const style: any = {};
-      const { textAlign, margin, zIndex } = comp.layout || {};
+      const { textAlign, margin, zIndex, visible } = comp.layout || {};
       if (textAlign) {
         style.textAlign = textAlign;
       }
+      if (visible === false) {
+        style.display = "none";
+      }
       // if (offsetY) {
       //   style[`margin` + ((offsetY as number) > 0 ? "Top" : "Bottom")] =
       //     helper.designToNaturalSize(Math.abs(offsetY as number) * -1);

src/modules/editor/components/CompUI/customUI/Cards/CardList/index.tsx

@@ -6,7 +6,7 @@ import { createCompId } from "../../../defines/createCompId";
 
 export { Component } from "./component";
 
-const thumb  = require("@/assets/comps/cardList/thumnail.png")
+const thumb = require("@/assets/comps/cardList/thumnail.png");
 export const options = {
   name: "卡片列表",
   thumbnail: thumb,
@@ -21,20 +21,24 @@ export const { createComp, useCompData, useCreateChild } = createCompHooks({
     showDesc: true,
   },
   children: {
-    list: (defaultOpts:any, length = 3)=> {
+    list: (defaultOpts: any, length = 3) => {
       let i = 0;
       return Array.from({ length }, () => {
-        const offsets = [{x:32.50, y:3.00, s:3.60}, {x:0.50, y: 3.00, s: 3.50}, {x:-32.00, y:2.50, s:3.55}]
-        let offset = {x: 0, y: 0, s:1}
+        const offsets = [
+          { x: 32.5, y: 3.0, s: 3.6 },
+          { x: 0.5, y: 3.0, s: 3.5 },
+          { x: -32.0, y: 2.5, s: 3.55 },
+        ];
+        let offset = { x: 0, y: 0, s: 1 };
         if (defaultOpts.value.columns == 3) {
-            offset = offsets[i%3]
+          offset = offsets[i % 3];
         }
         i = i + 1;
         return {
           img: createCompId("Image", {
             value: {
               url: thumb,
-              ...offset
+              ...offset,
             },
           }),
           desc: createCompId("Text", {
@@ -43,13 +47,6 @@ export const { createComp, useCompData, useCreateChild } = createCompHooks({
         };
       });
     },
-
-    img1: () =>
-      createCompId("Image", {
-        value: {
-          url: Dict_Imgs.Default,
-        },
-      }),
   },
 });
 

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

@@ -1,4 +1,4 @@
-import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
 import { isEmpty, set } from "lodash";
 import { defineComponent } from "vue";

src/modules/editor/components/CompUI/defines/createCompHooks.ts

@@ -1,5 +1,5 @@
 import { useEditor } from "@/modules/editor";
-import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { Background, Layout } from "@/modules/editor/typings";
 import { cloneDeep, defaultsDeep } from "lodash";
 import { AnyFun } from "queenjs/typing";

src/modules/editor/components/CompUI/defines/createCompId.ts

@@ -1,4 +1,4 @@
-import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { CompUI } from "..";
 
 const cacheCompArr: DesignComp[] = [];

src/modules/editor/components/CompUI/defines/creator.ts

@@ -1,5 +1,5 @@
 import { useEditor } from "@/modules/editor";
-import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { cloneDeep } from "lodash";
 
 type CommPropType = Pick<

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

@@ -1,4 +1,4 @@
-import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { css } from "@linaria/core";
 import { defineUI } from "queenjs";
 import { onUnmounted } from "vue";

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

@@ -1,39 +1,124 @@
 import { useEditor } from "@/modules/editor";
-import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { css } from "@linaria/core";
 import { useReactive } from "@queenjs/use";
 import { Tree } from "ant-design-vue";
 import { defineComponent } from "vue";
+import { string } from "vue-types";
 import { CompUI } from "../../../CompUI";
 
+type TreeItem = {
+  key: string;
+  title: string;
+  value: string;
+  children: TreeItem[];
+};
+
 export const CompTree = defineComponent({
   setup() {
     const { store, actions, helper } = useEditor();
     const state = useReactive(() => ({
       treeData() {
-        const { pageCompIds } = store;
         const rootComp = helper.findRootComp();
+
+        function getCompChildren(ids: string[]): TreeItem[] {
+          return ids.map((id) => {
+            const comp = helper.findComp(id) as DesignComp;
+            return {
+              key: comp.id,
+              title: CompUI[comp.compKey].options.name,
+              value: comp.id,
+              children: getCompChildren(helper.getCompChildIds(comp)),
+            };
+          });
+        }
+
         return [
           {
             key: rootComp?.id || "",
             title: "页面",
-            children: pageCompIds.map((id) => {
-              const comp = helper.findComp(id) as DesignComp;
-              return {
-                key: comp.id,
-                title: CompUI[comp.compKey].options.name,
-                value: comp.id,
-              };
-            }),
+            children: getCompChildren(store.pageCompIds),
           },
         ];
       },
     }));
     return () => (
       <Tree
+        class={treeStyle}
         treeData={state.treeData}
         selectedKeys={[store.currCompId]}
+        blockNode={true}
         onSelect={(ids) => actions.pickComp(ids[0] as string)}
-      ></Tree>
+      >
+        {{
+          title: (data: any) => {
+            return <CompNode title={data.title} id={data.key} />;
+          },
+        }}
+      </Tree>
     );
   },
 });
+
+const CompNode = defineComponent({
+  props: {
+    id: string().isRequired,
+    title: string().isRequired,
+  },
+  setup(props) {
+    const editor = useEditor();
+    const { config, helper } = editor;
+    const comp = helper.findComp(props.id);
+    return () => {
+      if (!comp) return;
+      const compOpts = CompUI[comp.compKey].options;
+      const actions =
+        config.treeNodeActions[comp.compKey] || config.treeNodeActions.default;
+      const thumbnail =
+        comp.compKey === "Image" ? comp.value.url : compOpts.thumbnail;
+      return (
+        <div class={nodeStyle}>
+          <img src={thumbnail} />
+          <span class="flex-1">{props.title}</span>
+          <span class="space-x-4px">
+            {actions.map((action) => {
+              if (action.disable?.call(editor, comp)) return;
+              return (
+                <action.component
+                  class="p-4px"
+                  key={comp.id}
+                  value={action.getValue?.(comp)}
+                  onClick={(e: MouseEvent) => {
+                    e.stopPropagation();
+                    action.onClick.call(editor, comp);
+                  }}
+                />
+              );
+            })}
+          </span>
+        </div>
+      );
+    };
+  },
+});
+
+const treeStyle = css`
+  .ant-tree-switcher {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+`;
+
+const nodeStyle = css`
+  display: flex;
+  align-items: center;
+  padding: 6px;
+  @apply rounded;
+  > img {
+    width: 24px;
+    height: 24px;
+    margin-right: 6px;
+    object-fit: contain;
+  }
+`;

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

@@ -24,7 +24,7 @@ export default defineUI({
             )}
           </div>
           <div class="p-16px border-top border-bottom  !border-2px">组件树</div>
-          <div class="h-300px py-20px scrollbar">
+          <div class="h-300px py-20px pr-20px scrollbar">
             <CompTree />
           </div>
         </div>

src/modules/editor/configs/index.ts

@@ -0,0 +1,9 @@
+import { Dict_Apis } from "@/dict";
+import { treeNodeActions } from "./treeNodeActions";
+
+export const config = {
+  httpConfig: {
+    baseURL: Dict_Apis.promotion,
+  },
+  treeNodeActions,
+};

src/modules/editor/configs/treeNodeActions.ts

@@ -0,0 +1,35 @@
+import { EditorModule } from "../module";
+import { DesignComp } from "../objects/DesignTemp/DesignComp";
+import { tipIcons } from "../objects/TipIcons";
+import { ICompKeys } from "../typings";
+
+type Action = {
+  component: any;
+  getValue?: (c: DesignComp) => 0 | 1;
+  disable?: (this: EditorModule, c: DesignComp) => boolean;
+  onClick: (this: EditorModule, c: DesignComp) => void;
+};
+
+export const treeNodeActions: { [name in ICompKeys]?: Action[] } & {
+  default: Action[];
+} = {
+  default: [
+    {
+      component: tipIcons.visible,
+      getValue: (comp) => (comp.layout.visible !== false ? 0 : 1),
+      onClick(comp) {
+        this.actions.switchCompVisible(comp);
+      },
+    },
+    {
+      component: tipIcons.delete,
+      disable(comp) {
+        return !this.store.pageCompIds.includes(comp.id);
+      },
+      onClick(comp) {
+        this.actions.removeComp(comp.id);
+      },
+    },
+  ],
+  Page: [],
+};

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

@@ -1,6 +1,6 @@
 import { cloneDeep } from "lodash";
 import { AnyFun } from "queenjs/typing";
-import { EditorModule } from "../..";
+import { EditorModule } from "../../module";
 import { Action, HistoryController } from "./HistoryController";
 
 export class HistoryCtrl {

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

@@ -1,6 +1,6 @@
 import hotkeys from "hotkeys-js";
 import { ModuleControl } from "queenjs";
-import { EditorModule } from "../..";
+import { EditorModule } from "../../module";
 
 type IHotKeyItem = { hotKey: string; action: (this: EditorModule, key:string) => void };
 

src/modules/editor/index.ts

@@ -1,53 +1,3 @@
-import { Dict_Apis } from "@/dict";
-import { ModuleRoot } from "queenjs";
-import { editActions } from "./actions/edit";
-import { ImgCompActions } from "./actions/image";
-import { initActions } from "./actions/init";
-import { InputEventActions } from "./actions/input";
-import components from "./components";
-import { HistoryCtrl } from "./controllers/HistoryCtrl";
-import { ImagePickController } from "./controllers/ImagePickerController";
-import { helpers } from "./helpers";
-import { https } from "./https";
-import { store } from "./stores";
-import { useRoute } from "vue-router";
-
-export class EditorModule extends ModuleRoot {
-  config = this.setConfig({
-    httpConfig: {
-      baseURL: Dict_Apis.promotion,
-    },
-  });
-  components = this.useComponents(components);
-
-  actions = this.createActions([
-    initActions,
-    editActions,
-    ImgCompActions,
-    InputEventActions,
-  ]);
-  https = this.createHttps(https);
-  store = this.createStore(store);
-  helper = this.createHelper(helpers);
-
-  controls = {
-    historyCtrl: new HistoryCtrl(this),
-    pickCtrl: new ImagePickController(),
-  };
-
-  onReady() {
-    this.actions.init();
-  }
-
-  jumpIndexHtml(route = "#/") {
-    const _params = new URLSearchParams(decodeURIComponent(location.search));
-    const host = _params.get("host")
-    let link = `${location.origin}/index.html?host=${host}${route}`;
-    if (location.host == "www.infish.cn") {
-      link = `${location.origin}/projects/queenshow/index.html?host=${host}${route}`;
-    }
-    location.href = link;
-  }
-}
+import { EditorModule } from "./module";
 
 export const { useEditor, initEditor } = EditorModule.hook("Editor");

src/modules/editor/actions/edit.ts → src/modules/editor/module/actions/edit.ts

@@ -1,6 +1,7 @@
 import { Exception, queenApi } from "queenjs";
 import { EditorModule } from "..";
-import { ICompKeys } from "../typings";
+import { ICompKeys } from "../../typings";
+import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 
 export const editActions = EditorModule.action({
   // 添加组件到画布
@@ -34,6 +35,10 @@ export const editActions = EditorModule.action({
     if (selIndex === targetIndex) return;
     this.store.moveComp(selIndex, targetIndex);
   },
+  //
+  switchCompVisible(comp: DesignComp) {
+    comp.layout.visible = comp.layout.visible === false ? true : false;
+  },
   // 保存项目
   async saveDesign() {
     try {

src/modules/editor/module/actions/image.ts

@@ -0,0 +1,35 @@
+import { EditorModule } from "..";
+
+export const ImgCompActions = EditorModule.action({
+  handleImageHotKey(key: string) {
+    if (!this.store.isEditMode) return;
+    if (this.store.currComp?.compKey !== "Image") return;
+
+    console.log(this.store.currComp);
+    const value = this.store.currComp.value;
+    if (key == "w") {
+      value.y = (parseFloat(value.y) - 0.5).toFixed(2);
+      return;
+    }
+    if (key == "s") {
+      value.y = (parseFloat(value.y) + 0.5).toFixed(2);
+      return;
+    }
+    if (key == "a") {
+      value.x = (parseFloat(value.x) - 0.5).toFixed(2);
+      return;
+    }
+    if (key == "d") {
+      value.x = (parseFloat(value.x) + 0.5).toFixed(2);
+      return;
+    }
+    if (key == "q") {
+      value.s = (parseFloat(value.s) - 0.05).toFixed(2);
+      return;
+    }
+    if (key == "e") {
+      value.s = (parseFloat(value.s) + 0.05).toFixed(2);
+      return;
+    }
+  },
+});

src/modules/editor/actions/init.ts → src/modules/editor/module/actions/init.ts

@@ -1,8 +1,6 @@
-import { Exception } from "queenjs";
 import { EditorModule } from "..";
-import { DesignTemp } from "../defines/DesignTemp";
+import { EditorMode } from "../../typings";
 import { editActions } from "./edit";
-import { EditorMode } from "../typings";
 
 export const initActions = EditorModule.action({
   // 模块初始化
@@ -13,8 +11,6 @@ export const initActions = EditorModule.action({
     // createProxyEffect(this.store, (type, paths, value) => {
     //   historyCtrl.onChange(this.store, type, paths, value);
     // });
-
-    this.actions.initInputEvent();
   },
 
   // 初始化数据

src/modules/editor/helpers/index.ts → src/modules/editor/module/helpers/index.ts

@@ -1,6 +1,6 @@
 import { EditorModule } from "..";
-import { DesignComp } from "../defines/DesignTemp/DesignComp";
-import { Layout } from "../typings";
+import { DesignComp } from "../../objects/DesignTemp/DesignComp";
+import { Layout } from "../../typings";
 
 export const helpers = EditorModule.helper({
   designToNaturalSize(value: number) {
@@ -12,7 +12,6 @@ export const helpers = EditorModule.helper({
     if (comp) return comp;
   },
   findParentComp(compId: string): DesignComp | undefined {
-    const comp = this.helper.findComp(compId);
     const parentComp = Object.values(this.store.designData.compMap).find(
       (comp) => {
         const ids = this.helper.getCompChildIds(comp);

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

@@ -1,5 +1,5 @@
 import { EditorModule } from "..";
-import { DesignTemp } from "../defines/DesignTemp";
+import { DesignTemp } from "../../objects/DesignTemp";
 
 export const https = EditorModule.http({
   getDesignDetail(id: string) {

src/modules/editor/module/index.ts

@@ -0,0 +1,42 @@
+import { ModuleRoot } from "queenjs";
+import components from "../components";
+import { config } from "../configs";
+import { HistoryCtrl } from "../controllers/HistoryCtrl";
+import { ImagePickController } from "../controllers/ImagePickerController";
+import { editActions } from "./actions/edit";
+import { ImgCompActions } from "./actions/image";
+import { initActions } from "./actions/init";
+import { helpers } from "./helpers";
+import { https } from "./https";
+import { store } from "./stores";
+
+export class EditorModule extends ModuleRoot {
+  config = this.setConfig(config);
+  components = this.useComponents(components);
+
+  actions = this.createActions([initActions, editActions, ImgCompActions]);
+  https = this.createHttps(https);
+  store = this.createStore(store);
+  helper = this.createHelper(helpers);
+
+  controls = {
+    historyCtrl: new HistoryCtrl(this),
+    pickCtrl: new ImagePickController(),
+  };
+
+  onReady() {
+    this.actions.init();
+  }
+
+  jumpIndexHtml(route = "#/") {
+    const _params = new URLSearchParams(decodeURIComponent(location.search));
+    const host = _params.get("host");
+    let link = `${location.origin}/index.html?host=${host}${route}`;
+    if (location.host == "www.infish.cn") {
+      link = `${location.origin}/projects/queenshow/index.html?host=${host}${route}`;
+    }
+    location.href = link;
+  }
+}
+
+export const { useEditor, initEditor } = EditorModule.hook("Editor");

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

@@ -2,10 +2,10 @@ import { EditorModule } from "..";
 import {
   addCacheToMap,
   createCompId,
-} from "../components/CompUI/defines/createCompId";
-import { DesignTemp } from "../defines/DesignTemp";
-import { DesignComp } from "../defines/DesignTemp/DesignComp";
-import { EditorMode, ICompKeys } from "../typings";
+} from "../../components/CompUI/defines/createCompId";
+import { DesignTemp } from "../../objects/DesignTemp";
+import { DesignComp } from "../../objects/DesignTemp/DesignComp";
+import { EditorMode, ICompKeys } from "../../typings";
 
 export const store = EditorModule.store({
   state: () => ({

src/modules/editor/objects/TipIcons/TipIcon.tsx

@@ -0,0 +1,36 @@
+import { css } from "@linaria/core";
+import { Tooltip } from "ant-design-vue";
+
+export const TipIcon = (props: {
+  disable?: boolean;
+  value?: number;
+  icons: Array<(...args: any[]) => JSX.Element>;
+  tips: Array<string | JSX.Element>;
+}) => {
+  const { tips, icons, value = 0, disable } = props;
+
+  const tip = tips[value];
+  const Icon = icons[value];
+
+  return (
+    <Tooltip title={tip}>
+      <Icon class={[iconStyle, disable ? "icon_disable" : ""]} />
+    </Tooltip>
+  );
+};
+
+const iconStyle = css`
+  font-size: 16px;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &.icon_disable {
+    color: @inf-text-less-color;
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.1);
+  }
+`;

src/modules/editor/objects/TipIcons/create.ts

@@ -0,0 +1,12 @@
+import { IComponent } from "queenjs/typing";
+import { h } from "vue";
+import { TipIcon } from "./TipIcon";
+
+export function createTipIcon(options: {
+  icons: any[];
+  tips: Array<string | JSX.Element>;
+}): IComponent {
+  return (props: FuncProps<{ value?: number; disable?: boolean }>) => {
+    return h(TipIcon, { ...options, ...props });
+  };
+}

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

@@ -0,0 +1,44 @@
+import {
+  IconClear,
+  IconDelete,
+  IconEyeOff,
+  IconEyeOn,
+  IconLock,
+  IconRedo,
+  IconShadow,
+  IconShadowOff,
+  IconUndo,
+  IconUnlock,
+} from "@queenjs/icons";
+import { createTipIcon } from "./create";
+
+export const tipIcons = {
+  shadow: createTipIcon({
+    icons: [IconShadow, IconShadowOff],
+    tips: ["阴影-开", "阴影-关"],
+  }),
+  visible: createTipIcon({
+    icons: [IconEyeOn, IconEyeOff],
+    tips: ["显示", "隐藏"],
+  }),
+  lock: createTipIcon({
+    icons: [IconLock, IconUnlock],
+    tips: ["显示", "隐藏"],
+  }),
+  delete: createTipIcon({
+    icons: [IconDelete],
+    tips: ["删除"],
+  }),
+  clear: createTipIcon({
+    icons: [IconClear],
+    tips: ["清除材质"],
+  }),
+  undo: createTipIcon({
+    icons: [IconUndo],
+    tips: ["撤销"],
+  }),
+  redo: createTipIcon({
+    icons: [IconRedo],
+    tips: ["重做"],
+  }),
+};

src/modules/editor/typings.ts

@@ -5,6 +5,7 @@ export type ICompKeys = keyof typeof CompUI;
 export type EditorMode = "edit" | "preview";
 
 export type Layout = {
+  visible?: boolean;
   size?: number[]; // width height
   textAlign?: string;
   offsetX?: number;