@tmagic/editor 1.0.0-beta.10 → 1.0.0-beta.13

package/dist/types/src/layouts/sidebar/ComponentListPanel.vue.d.ts

@@ -7,6 +7,6 @@ declare const _default: DefineComponent<{}, {
         items: ComponentItem[];
         title: string;
     }[] | undefined>;
-    appendComponent({ text, type, ...config }: ComponentItem): void;
+    appendComponent({ text, type, data }: ComponentItem): void;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/types/src/layouts/sidebar/LayerPanel.vue.d.ts

@@ -2,7 +2,7 @@ import type { Translator } from 'element-plus';
 import type { Nullable } from 'element-plus/es/utils';
 import type { default } from 'element-plus/es/components/tree/src/model/node';
 import type { TreeOptionProps, TreeKey, LoadFunction, FilterNodeMethodFunction, TreeNodeData, FakeNode, TreeNodeLoadedDefaultProps, TreeData } from 'element-plus/es/components/tree/src/tree.type';
-import type { DebouncedFunc } from 'lodash';
+import type { DebouncedFunc } from 'lodash-es';
 import type { DefineComponent, ComputedRef, ComponentInternalInstance, ExtractPropTypes, PropType, Component, ComputedOptions, MethodOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, Slot, ComponentPublicInstance, ComponentOptionsBase, ComponentOptionsMixin, DebuggerEvent, nextTick, WatchOptions, WatchStopHandle, ShallowUnwrapRef, ComponentCustomProperties, EmitsOptions, Ref } from 'vue';
 import type { Id, MNode } from '@tmagic/schema';
 declare const _default: DefineComponent<{}, {

package/dist/types/src/layouts/workspace/Workspace.vue.d.ts

@@ -1,4 +1,4 @@
-import type { DefineComponent, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
 import type { MPage } from '@tmagic/schema';
 import type { MoveableOptions } from '@tmagic/stage';
 import StageCore from '@tmagic/stage';
@@ -14,6 +14,7 @@ declare const _default: DefineComponent<{
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
     };
 }, {
+    workspace: Ref<HTMLDivElement | undefined>;
     page: ComputedRef<MPage | undefined>;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     runtimeUrl: StringConstructor;

package/dist/types/src/services/editor.d.ts

@@ -41,13 +41,15 @@ declare class Editor extends BaseService {
     /**
      * 只有容器拥有布局
      */
-    getLayout(node: MNode): Promise<Layout>;
+    getLayout(parent: MNode, node?: MNode): Promise<Layout>;
     /**
      * 选中指定节点（将指定节点设置成当前选中状态）
      * @param config 指定节点配置或者ID
      * @returns 当前选中的节点配置
      */
     select(config: MNode | Id): Promise<MNode> | never;
+    selectNextNode(): Promise<MNode> | never;
+    selectNextPage(): Promise<MNode> | never;
     /**
      * 高亮指定节点
      * @param config 指定节点配置或者ID
@@ -60,7 +62,7 @@ declare class Editor extends BaseService {
      * @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
      * @returns 添加后的节点
      */
-    add({ type, ...config }: AddMNode, parent?: MContainer | null): Promise<MNode>;
+    add(addNode: AddMNode, parent?: MContainer | null): Promise<MNode>;
     /**
      * 删除组件
      * @param {Object} node
@@ -116,6 +118,7 @@ declare class Editor extends BaseService {
      * @returns 下一步数据
      */
     redo(): Promise<StepValue | null>;
+    move(left: number, top: number): Promise<void>;
     destroy(): void;
     resetModifiedNodeId(): void;
     private addModifiedNodeId;

package/dist/types/src/services/props.d.ts

@@ -29,7 +29,7 @@ declare class Props extends BaseService {
      * @param type 组件类型
      * @returns 组件初始值
      */
-    getPropsValue(type: string): Promise<MComponent>;
+    getPropsValue(type: string, defaultValue?: {}): Promise<MComponent>;
 }
 export declare type PropsService = Props;
 declare const _default: Props;

package/dist/types/src/services/ui.d.ts

@@ -24,6 +24,7 @@ declare class Ui extends BaseService {
     constructor();
     set<T = any>(name: keyof UiState, value: T): void;
     get<T>(name: keyof typeof state): T;
+    zoom(zoom: number): void;
     private setColumnWidth;
     private setStageRect;
     private calcZoom;

package/dist/types/src/type.d.ts

@@ -169,7 +169,9 @@ export interface ComponentItem {
     type: string;
     /** element-plus icon class */
     icon?: string | Component;
-    [key: string]: any;
+    data?: {
+        [key: string]: any;
+    };
 }
 export interface ComponentGroup {
     /** 显示文案 */

package/dist/types/src/utils/editor.d.ts

@@ -1,4 +1,5 @@
 import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import type StageCore from '@tmagic/stage';
 import { Layout } from '../type';
 export declare const COPY_STORAGE_KEY = "$MagicEditorCopyData";
 export declare const generateId: (type: string | number) => string;
@@ -36,9 +37,9 @@ export declare const setNewItemId: (config: MNode, parent?: MPage | undefined) =
  * @returns {boolean}
  */
 export declare const isFixed: (node: MNode) => boolean;
-export declare const getNodeIndex: (node: MNode, parent: MContainer) => number;
+export declare const getNodeIndex: (node: MNode, parent: MContainer | MApp) => number;
 export declare const toRelative: (node: MNode) => MNode;
-export declare const initPosition: (node: MNode, layout: Layout) => MNode;
+export declare const initPosition: (node: MNode, layout: Layout, parentNode: MNode, stage: StageCore) => MNode;
 export declare const setLayout: (node: MNode, layout: Layout) => MNode;
 export declare const change2Fixed: (node: MNode, root: MApp) => MNode;
-export declare const Fixed2Other: (node: MNode, root: MApp, getLayout: (node: MNode) => Promise<Layout>) => Promise<MNode>;
+export declare const Fixed2Other: (node: MNode, root: MApp, getLayout: (parent: MNode, node?: MNode | undefined) => Promise<Layout>) => Promise<MNode>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.10",
+  "version": "1.0.0-beta.13",
   "name": "@tmagic/editor",
   "sideEffects": false,
   "main": "dist/tmagic-editor.umd.js",
@@ -16,8 +16,11 @@
       "require": "./dist/style.css"
     }
   },
+  "license": "Apache-2.0",
   "scripts": {
-    "build": "vite build"
+    "build": "vite build",
+    "test": "jest --maxWorkers=8",
+    "test:coverage": "jest --maxWorkers=16 --coverage"
   },
   "engines": {
     "node": ">=14"
@@ -26,16 +29,26 @@
     "type": "git",
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
+  "homepage": "https://tencent.github.io/tmagic-editor/docs/",
+  "keywords": [
+    "editor",
+    "drag",
+    "resize",
+    "vue",
+    "vue3",
+    "typescript"
+  ],
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "^1.0.0-beta.10",
-    "@tmagic/form": "^1.0.0-beta.10",
-    "@tmagic/schema": "^1.0.0-beta.10",
-    "@tmagic/stage": "^1.0.0-beta.10",
-    "@tmagic/utils": "^1.0.0-beta.10",
+    "@tmagic/core": "^1.0.0-beta.13",
+    "@tmagic/form": "^1.0.0-beta.13",
+    "@tmagic/schema": "^1.0.0-beta.13",
+    "@tmagic/stage": "^1.0.0-beta.13",
+    "@tmagic/utils": "^1.0.0-beta.13",
     "color": "^3.1.3",
     "element-plus": "^2.1.7",
     "events": "^3.3.0",
+    "keycon": "^1.1.2",
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.32.1",
     "serialize-javascript": "^6.0.0",
@@ -43,18 +56,24 @@
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
+    "@types/jest": "^26.0.23",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/serialize-javascript": "^5.0.1",
     "@vitejs/plugin-vue": "^1.2.3",
     "@vitejs/plugin-vue-jsx": "^1.1.6",
     "@vue/compiler-sfc": "^3.2.0",
-    "@vue/test-utils": "^2.0.0-rc.12",
+    "@vue/test-utils": "^2.0.0-rc.20",
+    "@vue/vue3-jest": "^27.0.0-alpha.4",
+    "jest": "^27.5.1",
+    "jest-serializer-vue": "^2.0.2",
+    "jest-transform-stub": "^2.0.0",
     "sass": "^1.35.1",
+    "ts-jest": "^27.1.4",
     "typescript": "^4.3.4",
     "vite": "^2.3.7",
     "vite-plugin-dts": "^0.9.6",
     "vue-tsc": "^0.0.24"
   },
-  "gitHead": "fc39ecb4f5b117a4ebbfd115382887983cb8f9de"
+  "gitHead": "ca2b203614cbdaff580e5cb6f35630f50b827451"
 }

package/src/components/ScrollViewer.vue

@@ -55,7 +55,7 @@ export default defineComponent({
       style: computed(
         () => `
         width: ${props.width}px;
-        height: ${props.height}px;
+        height: ${(props.height || 0) - 40}px;
         position: absolute;
         margin-top: 30px;
       `,

package/src/components/ToolButton.vue

@@ -64,13 +64,13 @@ export default defineComponent({
     const services = inject<Services>('services');
     const uiService = services?.uiService;
 
-    const zoomInHandler = () => uiService?.set('zoom', zoom.value + 0.1);
-    const zoomOutHandler = () => uiService?.set('zoom', zoom.value - 0.1);
-
     const zoom = computed((): number => uiService?.get<number>('zoom') ?? 1);
     const showGuides = computed((): boolean => uiService?.get<boolean>('showGuides') ?? true);
     const showRule = computed((): boolean => uiService?.get<boolean>('showRule') ?? true);
 
+    const zoomInHandler = () => uiService?.zoom(0.1);
+    const zoomOutHandler = () => uiService?.zoom(-0.1);
+
     const item = computed((): MenuButton | MenuComponent => {
       if (typeof props.data !== 'string') {
         return props.data;

package/src/layouts/PropsPanel.vue

@@ -39,9 +39,9 @@ export default defineComponent({
         return;
       }
 
-      values.value = node.value;
       const type = node.value.type || (node.value.items ? 'container' : 'text');
       curFormConfig.value = (await services?.propsService.getPropsConfig(type)) || [];
+      values.value = node.value;
     };
 
     watchEffect(init);

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -56,11 +56,11 @@ export default defineComponent({
       collapseValue,
       list,
 
-      appendComponent({ text, type, ...config }: ComponentItem): void {
+      appendComponent({ text, type, data = {} }: ComponentItem): void {
         services?.editorService.add({
           name: text,
           type,
-          ...config,
+          ...data,
         });
       },
     };

package/src/layouts/sidebar/LayerMenu.vue

@@ -72,6 +72,7 @@ export default defineComponent({
         services?.editorService.add({
           name: config.text,
           type: config.type,
+          ...(config.data || {}),
         });
       },
 

package/src/layouts/workspace/Workspace.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor-workspace">
+  <div class="m-editor-workspace" tabindex="1" ref="workspace">
     <magic-stage
       :key="page?.id"
       :runtime-url="runtimeUrl"
@@ -18,11 +18,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, PropType } from 'vue';
+import { computed, defineComponent, inject, onMounted, onUnmounted, PropType, ref } from 'vue';
+import KeyController from 'keycon';
 
-import type { MPage } from '@tmagic/schema';
+import type { MNode, MPage } from '@tmagic/schema';
 import type { MoveableOptions } from '@tmagic/stage';
 import StageCore from '@tmagic/stage';
+import { isPage } from '@tmagic/utils';
 
 import type { Services } from '@editor/type';
 
@@ -55,8 +57,109 @@ export default defineComponent({
 
   setup() {
     const services = inject<Services>('services');
+    const workspace = ref<HTMLDivElement>();
+    const node = computed(() => services?.editorService.get<MNode>('node'));
+    let keycon: KeyController;
+
+    const mouseenterHandler = () => {
+      workspace.value?.focus();
+    };
+
+    onMounted(() => {
+      workspace.value?.addEventListener('mouseenter', mouseenterHandler);
+
+      keycon = new KeyController(workspace.value);
+
+      const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+
+      const ctrl = isMac ? 'meta' : 'ctrl';
+
+      keycon
+        .keyup('delete', (e) => {
+          e.inputEvent.preventDefault();
+          if (!node.value || isPage(node.value)) return;
+          services?.editorService.remove(node.value);
+        })
+        .keydown([ctrl, 'c'], (e) => {
+          e.inputEvent.preventDefault();
+          node.value && services?.editorService.copy(node.value);
+        })
+        .keyup([ctrl, 'v'], (e) => {
+          e.inputEvent.preventDefault();
+          node.value && services?.editorService.paste();
+        })
+        .keyup([ctrl, 'x'], (e) => {
+          e.inputEvent.preventDefault();
+          if (!node.value || isPage(node.value)) return;
+          services?.editorService.copy(node.value);
+          services?.editorService.remove(node.value);
+        })
+        .keydown([ctrl, 'z'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.undo();
+        })
+        .keydown([ctrl, 'shift', 'z'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.redo();
+        })
+        .keydown('up', (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(0, -1);
+        })
+        .keydown('down', (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(0, 1);
+        })
+        .keydown('left', (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(-1, 0);
+        })
+        .keydown('right', (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(1, 0);
+        })
+        .keydown([ctrl, 'up'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(0, -10);
+        })
+        .keydown([ctrl, 'down'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(0, 10);
+        })
+        .keydown([ctrl, 'left'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(-10, 0);
+        })
+        .keydown([ctrl, 'right'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(10, 0);
+        })
+        .keydown('tab', (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.selectNextNode();
+        })
+        .keydown([ctrl, 'tab'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.selectNextPage();
+        })
+        .keydown([ctrl, '='], (e) => {
+          e.inputEvent.preventDefault();
+          services?.uiService.zoom(0.1);
+        })
+        .keydown([ctrl, '-'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.uiService.zoom(-0.1);
+        });
+    });
+
+    onUnmounted(() => {
+      workspace.value?.removeEventListener('mouseenter', mouseenterHandler);
+      keycon.destroy();
+    });
 
     return {
+      workspace,
+
       page: computed(() => services?.editorService.get<MPage>('page')),
     };
   },

package/src/services/BaseService.ts

@@ -53,7 +53,7 @@ const doAction = async (
     let returnValue: any = await fn(beforeArgs, sourceMethod.bind(scope));
 
     for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
-      returnValue = await afterMethod(...beforeArgs, returnValue);
+      returnValue = await afterMethod(returnValue, ...beforeArgs);
 
       if (isError(returnValue)) throw returnValue;
     }

package/src/services/editor.ts

@@ -22,8 +22,8 @@ import serialize from 'serialize-javascript';
 
 import type { Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
-import type StageCore from '@tmagic/stage';
-import { getNodePath, isPop } from '@tmagic/utils';
+import StageCore from '@tmagic/stage';
+import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
 
 import historyService, { StepValue } from '@editor/services/history';
 import propsService from '@editor/services/props';
@@ -108,7 +108,7 @@ class Editor extends BaseService {
    * @returns {EditorNodeInfo}
    */
   public getNodeInfo(id: Id): EditorNodeInfo {
-    const root = this.get<MApp | null>('root');
+    const root = toRaw(this.get<MApp | null>('root'));
     if (!root) return {};
 
     if (id === root.id) {
@@ -159,13 +159,15 @@ class Editor extends BaseService {
   /**
    * 只有容器拥有布局
    */
-  public async getLayout(node: MNode): Promise<Layout> {
-    if (node.layout) {
-      return node.layout;
+  public async getLayout(parent: MNode, node?: MNode): Promise<Layout> {
+    if (node && typeof node !== 'function' && isFixed(node)) return Layout.FIXED;
+
+    if (parent.layout) {
+      return parent.layout;
     }
 
     // 如果该节点没有设置position，则认为是流式布局，例如获取root的布局时
-    if (!node.style?.position) {
+    if (!parent.style?.position) {
       return Layout.RELATIVE;
     }
 
@@ -191,6 +193,39 @@ class Editor extends BaseService {
     return node!;
   }
 
+  public async selectNextNode(): Promise<MNode> | never {
+    const node = toRaw(this.get('node'));
+
+    if (!node || isPage(node) || node.type === NodeType.ROOT) return node;
+
+    const parent = toRaw(this.getParentById(node.id));
+
+    if (!parent) return node;
+
+    const index = getNodeIndex(node, parent);
+
+    const nextNode = parent.items[index + 1] || parent.items[0];
+
+    await this.select(nextNode);
+    this.get<StageCore>('stage')?.select(nextNode.id);
+
+    return nextNode;
+  }
+
+  public async selectNextPage(): Promise<MNode> | never {
+    const root = toRaw(this.get<MApp>('root'));
+    const page = toRaw(this.get('page'));
+
+    const index = getNodeIndex(page, root);
+
+    const nextPage = root.items[index + 1] || root.items[0];
+
+    await this.select(nextPage);
+    this.get<StageCore>('stage')?.select(nextPage.id);
+
+    return nextPage;
+  }
+
   /**
    * 高亮指定节点
    * @param config 指定节点配置或者ID
@@ -209,7 +244,8 @@ class Editor extends BaseService {
    * @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
    * @returns 添加后的节点
    */
-  public async add({ type, ...config }: AddMNode, parent?: MContainer | null): Promise<MNode> {
+  public async add(addNode: AddMNode, parent?: MContainer | null): Promise<MNode> {
+    const { type, ...config } = addNode;
     const curNode = this.get<MContainer>('node');
 
     let parentNode: MNode | undefined;
@@ -227,8 +263,13 @@ class Editor extends BaseService {
 
     if (!parentNode) throw new Error('未找到父元素');
 
-    const layout = await this.getLayout(parentNode);
-    const newNode = initPosition({ ...toRaw(await propsService.getPropsValue(type)), ...config }, layout);
+    const layout = await this.getLayout(toRaw(parentNode), addNode as MNode);
+    const newNode = initPosition(
+      { ...toRaw(await propsService.getPropsValue(type, config)) },
+      layout,
+      parentNode,
+      this.get<StageCore>('stage'),
+    );
 
     if ((parentNode?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && newNode.type !== NodeType.PAGE) {
       throw new Error('app下不能添加组件');
@@ -339,9 +380,10 @@ class Editor extends BaseService {
 
     if (`${newConfig.id}` === `${this.get('node').id}`) {
       this.set('node', newConfig);
-      this.get<StageCore | null>('stage')?.update({ config: cloneDeep(newConfig), root: this.get('root') });
     }
 
+    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(newConfig), root: this.get('root') });
+
     if (newConfig.type === NodeType.PAGE) {
       this.set('page', newConfig);
     }
@@ -426,7 +468,7 @@ class Editor extends BaseService {
   public async alignCenter(config: MNode): Promise<MNode | void> {
     const parent = this.get<MContainer>('parent');
     const node = this.get<MNode>('node');
-    const layout = await this.getLayout(parent);
+    const layout = await this.getLayout(toRaw(parent), toRaw(node));
     if (layout === Layout.RELATIVE) {
       return;
     }
@@ -484,6 +526,26 @@ class Editor extends BaseService {
     return value;
   }
 
+  public async move(left: number, top: number) {
+    const node = toRaw(this.get('node'));
+    if (!node || isPage(node)) return;
+
+    const { style, id } = node;
+    if (!style || style.position !== 'absolute') return;
+
+    if (top && !isNumber(style.top)) return;
+    if (left && !isNumber(style.left)) return;
+
+    this.update({
+      id,
+      style: {
+        ...style,
+        left: Number(style.left) + left,
+        top: Number(style.top) + top,
+      },
+    });
+  }
+
   public destroy() {
     this.removeAllListeners();
     this.set('root', null);
@@ -520,7 +582,11 @@ class Editor extends BaseService {
     this.isHistoryStateChange = true;
     await this.update(value.data);
     this.set('modifiedNodeIds', value.modifiedNodeIds);
-    setTimeout(() => value.nodeId && this.select(value.nodeId), 0);
+    setTimeout(async () => {
+      if (!value.nodeId) return;
+      await this.select(value.nodeId);
+      this.get<StageCore | null>('stage')?.select(value.nodeId);
+    }, 0);
   }
 
   private async toggleFixedPosition(dist: MNode, src: MNode, root: MApp) {

package/src/services/props.ts

@@ -87,7 +87,7 @@ class Props extends BaseService {
    * @param type 组件类型
    * @returns 组件初始值
    */
-  public async getPropsValue(type: string) {
+  public async getPropsValue(type: string, defaultValue = {}) {
     if (type === 'area') {
       const value = (await this.getPropsValue('button')) as MComponent;
       value.className = 'action-area';
@@ -100,6 +100,7 @@ class Props extends BaseService {
 
     return cloneDeep({
       ...getDefaultPropsValue(type),
+      ...defaultValue,
       ...(this.state.propsValueMap[type] || {}),
     });
   }

package/src/services/ui.ts

@@ -91,6 +91,11 @@ class Ui extends BaseService {
     return (state as any)[name];
   }
 
+  public zoom(zoom: number) {
+    this.set('zoom', (this.get<number>('zoom') * 100 + zoom * 100) / 100);
+    if (this.get<number>('zoom') < 0.1) this.set('zoom', 0.1);
+  }
+
   private setColumnWidth({ left, center, right }: SetColumnWidth) {
     const columnWidth = {
       ...toRaw(this.get<GetColumnWidth>('columnWidth')),

package/src/theme/layer-panel.scss

@@ -52,6 +52,7 @@
 
 .magic-editor-layer-panel .cus-tree-node {
   width: 100%;
+  overflow: hidden;
 }
 
 .magic-editor-layer-panel .cus-tree-node-hover {

package/src/type.ts

@@ -220,7 +220,9 @@ export interface ComponentItem {
   type: string;
   /** element-plus icon class */
   icon?: string | Component;
-  [key: string]: any;
+  data?: {
+    [key: string]: any;
+  };
 }
 
 export interface ComponentGroup {