feat(edtior): 代码块使用依赖收集器改造

packages/editor/src/Editor.vue

@@ -68,7 +68,7 @@ import { defineComponent, onUnmounted, PropType, provide, reactive, toRaw, watch
 
 import { EventOption } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
-import type { MApp, MNode } from '@tmagic/schema';
+import { CodeBlockContent, Id, MApp, MNode, MPage } from '@tmagic/schema';
 import StageCore, {
   CONTAINER_HIGHLIGHT_CLASS_NAME,
   ContainerHighlightType,
@@ -84,12 +84,14 @@ import Sidebar from './layouts/sidebar/Sidebar.vue';
 import Workspace from './layouts/workspace/Workspace.vue';
 import codeBlockService from './services/codeBlock';
 import componentListService from './services/componentList';
+import depService from './services/dep';
 import editorService from './services/editor';
 import eventsService from './services/events';
 import historyService from './services/history';
 import propsService from './services/props';
 import storageService from './services/storage';
 import uiService from './services/ui';
+import { createCodeBlockTarget } from './utils/dep';
 import type { ComponentGroup, MenuBarData, MenuButton, MenuComponent, Services, SideBarData, StageRect } from './type';
 
 export default defineComponent({
@@ -227,7 +229,7 @@ export default defineComponent({
   emits: ['props-panel-mounted', 'update:modelValue'],
 
   setup(props, { emit }) {
-    const rootChangeHandler = (value: MApp, preValue?: MApp | null) => {
+    const rootChangeHandler = async (value: MApp, preValue?: MApp | null) => {
       const nodeId = editorService.get('node')?.id || props.defaultSelected;
       let node;
       if (nodeId) {
@@ -235,9 +237,9 @@ export default defineComponent({
       }
 
       if (node && node !== value) {
-        editorService.select(node.id);
+        await editorService.select(node.id);
       } else if (value?.items?.length) {
-        editorService.select(value.items[0]);
+        await editorService.select(value.items[0]);
       } else if (value?.id) {
         editorService.set('nodes', [value]);
         editorService.set('parent', null);
@@ -251,9 +253,57 @@ export default defineComponent({
       value.codeBlocks = value.codeBlocks || {};
 
       codeBlockService.setCodeDsl(value.codeBlocks);
+
+      depService.removeTargets('code-block');
+
+      Object.entries(value.codeBlocks).forEach(([id, code]) => {
+        depService.addTarget(createCodeBlockTarget(id, code));
+      });
+
+      if (value && Array.isArray(value.items)) {
+        depService.collect(value.items, true);
+      } else {
+        depService.clear();
+      }
     };
 
+    const nodeAddHandler = (nodes: MNode[]) => {
+      depService.collect(nodes);
+    };
+
+    const nodeUpdateHandler = (nodes: MNode[]) => {
+      depService.collect(nodes);
+    };
+
+    const nodeRemoveHandler = (nodes: MNode[]) => {
+      depService.clear(nodes);
+    };
+
+    const historyChangeHandler = (page: MPage) => {
+      depService.collect([page], true);
+    };
+
+    editorService.on('history-change', historyChangeHandler);
     editorService.on('root-change', rootChangeHandler);
+    editorService.on('add', nodeAddHandler);
+    editorService.on('remove', nodeRemoveHandler);
+    editorService.on('update', nodeUpdateHandler);
+
+    const codeBlockAddOrUpdateHandler = (id: Id, codeBlock: CodeBlockContent) => {
+      if (depService.hasTarget(id)) {
+        depService.getTarget(id)!.name = codeBlock.name;
+        return;
+      }
+
+      depService.addTarget(createCodeBlockTarget(id, codeBlock));
+    };
+
+    const codeBlockRemoveHandler = (id: Id) => {
+      depService.removeTarget(id);
+    };
+
+    codeBlockService.on('addOrUpdate', codeBlockAddOrUpdateHandler);
+    codeBlockService.on('remove', codeBlockRemoveHandler);
 
     // 初始值变化，重新设置节点信息
     watch(
@@ -325,17 +375,6 @@ export default defineComponent({
       },
     );
 
-    onUnmounted(() => {
-      editorService.resetState();
-      historyService.resetState();
-      propsService.resetState();
-      uiService.resetState();
-      componentListService.resetState();
-      codeBlockService.resetState();
-
-      editorService.off('root-change', rootChangeHandler);
-    });
-
     const services: Services = {
       componentListService,
       eventsService,
@@ -345,6 +384,7 @@ export default defineComponent({
       uiService,
       storageService,
       codeBlockService,
+      depService,
     };
 
     provide('services', services);
@@ -366,8 +406,24 @@ export default defineComponent({
         disabledDragStart: props.disabledDragStart,
       }),
     );
-    // 监听组件update
+
-    codeBlockService.addCodeRelationListener();
+    onUnmounted(() => {
+      editorService.resetState();
+      historyService.resetState();
+      propsService.resetState();
+      uiService.resetState();
+      componentListService.resetState();
+      codeBlockService.resetState();
+
+      editorService.off('history-change', historyChangeHandler);
+      editorService.off('root-change', rootChangeHandler);
+      editorService.off('add', nodeAddHandler);
+      editorService.off('remove', nodeRemoveHandler);
+      editorService.off('update', nodeUpdateHandler);
+
+      codeBlockService.off('addOrUpdate', codeBlockAddOrUpdateHandler);
+      codeBlockService.off('remove', codeBlockRemoveHandler);
+    });
 
     return services;
   },

packages/editor/src/index.ts

@@ -40,6 +40,7 @@ export { default as storageService } from './services/storage';
 export { default as eventsService } from './services/events';
 export { default as uiService } from './services/ui';
 export { default as codeBlockService } from './services/codeBlock';
+export { default as depService } from './services/dep';
 export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPanel.vue';
 export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
 export { default as CodeSelect } from './fields/CodeSelect.vue';

packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -19,190 +19,118 @@
     <!-- 代码块列表 -->
     <TMagicScrollbar>
       <TMagicTree
-        v-if="!isEmpty(state.codeList)"
         ref="tree"
+        class="magic-editor-layer-tree"
         node-key="id"
         empty-text="暂无代码块"
-        :data="state.codeList"
+        default-expand-all
+        :expand-on-click-node="false"
+        :data="codeList"
         :highlight-current="true"
         :filter-node-method="filterNode"
-        @node-click="toggleCombineRelation"
+        @node-click="clickHandler"
       >
         <template #default="{ data }">
           <div :id="data.id" class="list-container">
             <div class="list-item">
               <span class="code-name">{{ data.name }}（{{ data.id }}）</span>
               <!-- 右侧工具栏 -->
-              <div class="right-tool">
+              <div class="right-tool" v-if="data.type === 'code'">
                 <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
                   <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.id}`)"></Icon>
                 </TMagicTooltip>
-                <TMagicTooltip
-                  effect="dark"
-                  content="查看绑定关系"
-                  placement="bottom"
-                  v-if="data.combineInfo && data.combineInfo.length > 0"
-                >
-                  <Icon :icon="Link" class="edit-icon" @click.stop="toggleCombineRelation(data)"></Icon>
-                </TMagicTooltip>
                 <TMagicTooltip effect="dark" content="删除" placement="bottom" v-if="editable">
                   <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.id}`)"></Icon>
                 </TMagicTooltip>
                 <slot name="code-block-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
               </div>
             </div>
-            <!-- 展示代码块下绑定的组件 -->
-            <div
-              class="code-comp-map-wrapper"
-              v-if="data.showRelation && data.combineInfo && data.combineInfo.length > 0"
-            >
-              <svg class="arrow-left" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa="">
-                <path
-                  fill="currentColor"
-                  d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
-                ></path>
-              </svg>
-              <TMagicButton
-                v-for="(comp, index) in data.combineInfo"
-                :key="index"
-                class="code-comp"
-                size="small"
-                :plain="true"
-                @click.stop="selectComp(comp.compId)"
-                >{{ comp.compName }}</TMagicButton
-              >
-            </div>
           </div>
         </template>
       </TMagicTree>
     </TMagicScrollbar>
 
     <!-- 代码块编辑区 -->
-    <code-block-editor v-if="isShowCodeBlockEditor" :paramsColConfig="paramsColConfig">
+    <CodeBlockEditor v-if="isShowCodeBlockEditor" :paramsColConfig="paramsColConfig">
       <template #code-block-edit-panel-header="{ id }">
         <slot name="code-block-edit-panel-header" :id="id"></slot>
       </template>
-    </code-block-editor>
+    </CodeBlockEditor>
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorCodeBlockList">
+<script setup lang="ts" name="MEditorCodeBlockList">
-import { computed, inject, reactive, ref, watch } from 'vue';
+import { computed, inject, ref } from 'vue';
-import { Close, Edit, Link, View } from '@element-plus/icons-vue';
+import { Close, Edit, View } from '@element-plus/icons-vue';
-import { cloneDeep, forIn, isEmpty } from 'lodash-es';
 
 import { TMagicButton, TMagicInput, tMagicMessage, TMagicScrollbar, TMagicTooltip, TMagicTree } from '@tmagic/design';
 import { ColumnConfig } from '@tmagic/form';
 import { CodeBlockContent, Id } from '@tmagic/schema';
 
 import Icon from '../../../components/Icon.vue';
-import type { CodeRelation, CombineInfo, Services } from '../../../type';
+import { CodeDeleteErrorType, CodeDslItem, Services } from '../../../type';
-import { CodeDeleteErrorType, CodeDslItem, ListState } from '../../../type';
 
-import codeBlockEditor from './CodeBlockEditor.vue';
+import CodeBlockEditor from './CodeBlockEditor.vue';
 
 const props = defineProps<{
   customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
   paramsColConfig?: ColumnConfig;
 }>();
 
-const services = inject<Services>('services');
+const { codeBlockService, depService, editorService } = inject<Services>('services') || {};
 
 // 代码块列表
-const state = reactive<ListState>({
+const codeList = computed(() =>
-  codeList: [],
+  Object.values(depService?.targets['code-block'] || {}).map((target) => ({
-});
+    id: target.id,
+    name: target.name,
+    type: 'code',
+    children: Object.entries(target.deps).map(([id, dep]) => ({
+      name: dep.name,
+      type: 'node',
+      id,
+      children: dep.keys.map((key) => ({ name: key, id: key, type: 'key' })),
+    })),
+  })),
+);
 
-const editable = computed(() => services?.codeBlockService.getEditStatus());
+const editable = computed(() => codeBlockService?.getEditStatus());
 
 // 是否展示代码编辑区
-const isShowCodeBlockEditor = computed(() => services?.codeBlockService.getCodeEditorShowStatus() || false);
+const isShowCodeBlockEditor = computed(() => codeBlockService?.getCodeEditorShowStatus() || false);
-// 获取绑定关系
-const codeCombineInfo = ref<CodeRelation | null>(null);
-
-// 根据代码块ID获取其绑定的组件信息
-const getBindCompsByCodeId = (codeId: Id): CombineInfo[] => {
-  if (!codeCombineInfo.value) return [];
-  const bindsComp = [] as CombineInfo[];
-  forIn(codeCombineInfo.value, (codeIds, compId) => {
-    if (codeIds.includes(codeId)) {
-      bindsComp.push({
-        compId,
-        compName: getCompName(compId),
-      });
-    }
-  });
-  return bindsComp as CombineInfo[];
-};
-
-// 更新代码块列表
-const refreshCodeList = async () => {
-  const codeDsl = cloneDeep(await services?.codeBlockService.getCodeDsl()) || null;
-  codeCombineInfo.value = cloneDeep(services?.codeBlockService.getCombineInfo()) || null;
-  if (!codeDsl || !codeCombineInfo.value) return;
-  state.codeList = [];
-  forIn(codeDsl, (value: CodeBlockContent, codeId: Id) => {
-    state.codeList.push({
-      id: codeId,
-      name: value.name,
-      codeBlockContent: value,
-      showRelation: true,
-      combineInfo: getBindCompsByCodeId(codeId),
-    });
-  });
-};
-
-watch(
-  () => services?.editorService.get('root'),
-  () => {
-    services?.codeBlockService.refreshAllRelations();
-    refreshCodeList();
-  },
-  {
-    immediate: true,
-  },
-);
-
-watch(
-  [() => services?.codeBlockService.getCodeDsl(), () => services?.codeBlockService.getCombineInfo()],
-  () => {
-    refreshCodeList();
-  },
-  {
-    deep: true,
-  },
-);
 
 // 新增代码块
 const createCodeBlock = async () => {
-  const { codeBlockService } = services || {};
   if (!codeBlockService) {
     tMagicMessage.error('新增代码块失败');
     return;
   }
+
   const codeConfig: CodeBlockContent = {
     name: '代码块',
     content: `({app, params}) => {\n  // place your code here\n}`,
     params: [],
   };
+
   const id = await codeBlockService.getUniqueId();
+
   await codeBlockService.setCodeDslById(id, codeConfig);
   codeBlockService.setCodeEditorContent(true, id);
 };
 
 // 编辑代码块
 const editCode = async (key: Id) => {
-  services?.codeBlockService.setCodeEditorContent(true, key);
+  codeBlockService?.setCodeEditorContent(true, key);
 };
 
 // 删除代码块
 const deleteCode = (key: Id) => {
-  const currentCode = state.codeList.find((codeItem: CodeDslItem) => codeItem.id === key);
+  const currentCode = codeList.value.find((codeItem) => codeItem.id === key);
-  const existBinds = !isEmpty(currentCode?.combineInfo);
+  const existBinds = Boolean(currentCode?.children.length);
-  const undeleteableList = services?.codeBlockService.getUndeletableList() || [];
+  const undeleteableList = codeBlockService?.getUndeletableList() || [];
   if (!existBinds && !undeleteableList.includes(key)) {
     // 无绑定关系，且不在不可删除列表中
-    services?.codeBlockService.deleteCodeDslByIds([key]);
+    codeBlockService?.deleteCodeDslByIds([key]);
   } else {
     if (typeof props.customError === 'function') {
       props.customError(key, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
@@ -213,37 +141,31 @@ const deleteCode = (key: Id) => {
 };
 
 const filterText = ref('');
-const tree = ref();
+const tree = ref<InstanceType<typeof TMagicTree>>();
 
 const filterNode = (value: string, data: CodeDslItem): boolean => {
   if (!value) {
     return true;
   }
-  return `${data.name}${data.id}`.indexOf(value) !== -1;
+  return `${data.name}${data.id}`.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) !== -1;
 };
 
 const filterTextChangeHandler = (val: string) => {
   tree.value?.filter(val);
 };
 
-// 展示/隐藏组件绑定关系
-const toggleCombineRelation = (data: CodeDslItem) => {
-  const { id } = data;
-  const currentCode = state.codeList.find((item) => item.id === id);
-  if (!currentCode) return;
-  currentCode.showRelation = !currentCode?.showRelation;
-};
-
-// 获取组件名称展示到tag上
-const getCompName = (compId: Id): string => {
-  const node = services?.editorService.getNodeById(compId);
-  return node?.name || String(compId);
-};
-
 // 选中组件
 const selectComp = (compId: Id) => {
-  const stage = services?.editorService.get('stage');
+  const stage = editorService?.get('stage');
-  services?.editorService.select(compId);
+  editorService?.select(compId);
   stage?.select(compId);
 };
+
+const clickHandler = (data: any, node: any) => {
+  if (data.type === 'node') {
+    selectComp(data.id);
+  } else if (data.type === 'key') {
+    selectComp(node.parent.data.id);
+  }
+};
 </script>

packages/editor/src/services/codeBlock.ts

@@ -17,12 +17,11 @@
  */
 
 import { reactive } from 'vue';
-import { cloneDeep, forIn, isEmpty, keys, omit, pick, union } from 'lodash-es';
+import { keys, pick } from 'lodash-es';
 
-import { CodeBlockContent, CodeBlockDSL, HookType, Id, MNode, MPage } from '@tmagic/schema';
+import { CodeBlockContent, CodeBlockDSL, Id } from '@tmagic/schema';
 
-import editorService from '../services/editor';
+import type { CodeState } from '../type';
-import type { CodeRelation, CodeState, HookData } from '../type';
 import { CODE_DRAFT_STORAGE_KEY } from '../type';
 import { info } from '../utils/logger';
 
@@ -36,7 +35,6 @@ class CodeBlock extends BaseService {
     editable: true,
     combineIds: [],
     undeletableList: [],
-    relations: {},
   });
 
   constructor() {
@@ -112,6 +110,8 @@ class CodeBlock extends BaseService {
       ...existContent,
       ...codeConfigProcessed,
     };
+
+    this.emit('addOrUpdate', id, codeDsl[id]);
   }
 
   /**
@@ -213,56 +213,6 @@ class CodeBlock extends BaseService {
     return this.state.combineIds;
   }
 
-  /**
-   * 监听组件更新来更新代码块绑定关系
-   * @returns {void}
-   */
-  public addCodeRelationListener(): void {
-    // 监听组件更新
-    editorService.on('update', (nodes: MNode[]) => {
-      const relations: CodeRelation = cloneDeep(this.state.relations);
-      nodes.forEach((node: MNode) => {
-        if (node?.id) {
-          relations[node.id] = [];
-          this.getNodeRelation(node, relations);
-        }
-      });
-      this.state.relations = { ...relations };
-    });
-    // 监听组件删除
-    editorService.on('remove', (nodes: MNode[]) => {
-      nodes.forEach((node: MNode) => {
-        this.state.relations = this.deleteNodeRelation(node, this.state.relations);
-      });
-    });
-    // 监听历史记录，历史快照为页面整体，需要深层遍历更新
-    editorService.on('history-change', (page: MPage) => {
-      const relations: CodeRelation = {};
-      this.getNodeRelation(page, relations, true);
-      this.state.relations = relations;
-    });
-  }
-
-  /**
-   * 更新全部绑定关系
-   * @returns {void}
-   */
-  public refreshAllRelations(): void {
-    const root = editorService.get('root');
-    if (!root) return;
-    const relations: CodeRelation = {};
-    this.getNodeRelation(root, relations, true);
-    this.state.relations = relations;
-  }
-
-  /**
-   * 获取绑定关系
-   * @returns {CodeRelation}
-   */
-  public getCombineInfo(): CodeRelation {
-    return this.state.relations;
-  }
-
   /**
    * 获取不可删除列表
    * @returns {Id[]}
@@ -312,6 +262,8 @@ class CodeBlock extends BaseService {
 
     codeIds.forEach((id) => {
       delete currentDsl[id];
+
+      this.emit('remove', id);
     });
   }
 
@@ -342,65 +294,6 @@ class CodeBlock extends BaseService {
     this.removeAllListeners();
     this.removeAllPlugins();
   }
-
-  /**
-   * 递归遍历dsl中挂载了代码块的节点，并更新绑定关系数据
-   * @param {MNode} node 节点信息
-   * @param {CodeRelation} relation 关系数据
-   * @param {boolean} deep 是否深层遍历
-   * @returns void
-   */
-  private getNodeRelation(node: MNode, relation: CodeRelation, deep = false): void {
-    forIn(node, (value, key) => {
-      if (value?.hookType === HookType.CODE && !isEmpty(value.hookData)) {
-        value.hookData.forEach((relationItem: HookData) => {
-          if (relationItem.codeId) {
-            relation[node.id] = union(relation[node.id], [relationItem.codeId]);
-          }
-        });
-        // continue
-        return;
-      }
-      let isContinue = false;
-      try {
-        // 只遍历更新当前组件的关系，不再深层遍历容器包含的组件
-        isContinue = key !== 'items' && typeof value === 'object' && JSON.stringify(value).includes('hookType');
-      } catch (error) {
-        console.error(error);
-      }
-      if (isContinue) {
-        // 检查value内部是否有嵌套
-        const unConfirmedValue = {
-          id: node.id,
-          ...value,
-        };
-        this.getNodeRelation(unConfirmedValue, relation);
-      }
-      // 深层遍历用于代码列表初始化
-      if (key === 'items' && !isEmpty(value) && deep) {
-        value.forEach((item: MNode) => {
-          this.getNodeRelation(item, relation, deep);
-        });
-      }
-    });
-  }
-
-  /**
-   * 删除组件关系
-   * @param {MNode} node 节点信息
-   * @param {CodeRelation} relations 关系数据
-   * @returns CodeRelation
-   */
-  private deleteNodeRelation(node: MNode, relations: CodeRelation): CodeRelation {
-    if (!node.id) return {};
-    let newRelations = omit(relations, [node.id]);
-    if (!isEmpty(node.items)) {
-      node.items.forEach((item: MNode) => {
-        newRelations = this.deleteNodeRelation(item, newRelations);
-      });
-    }
-    return newRelations;
-  }
 }
 
 export type CodeBlockService = CodeBlock;

packages/editor/src/theme/code-block.scss

@@ -1,13 +1,6 @@
 .m-editor-code-block-list {
   height: 100%;
   margin-top: 5px;
-
-  .el-tree-node__content {
-    height: auto;
-  }
-  .el-tree-node__label {
-    width: 100%;
-  }
   .code-header-wrapper {
     display: flex;
     align-items: center;
@@ -32,45 +25,24 @@
   .list-container {
     width: 100%;
     overflow: hidden;
-    margin-left: -25px;
     .list-item {
       display: flex;
-      align-items: center;
+      width: 100%;
+
       .right-tool {
-        width: fit-content !important;
         display: flex;
-        align-items: center;
+        width: fit-content !important;
         .edit-icon {
           margin: 0 5px;
         }
       }
       .code-name {
-        font-size: 14px;
-        overflow: hidden;
         white-space: nowrap;
+        overflow: hidden;
         text-overflow: ellipsis;
-        padding: 10px 15px;
         width: 0 !important;
         flex: 1;
-      }
+        line-height: 18px;
-    }
-    .code-comp-map-wrapper {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      margin-left: 20px;
-      margin-bottom: 5px;
-      .arrow-left {
-        transform: rotate(-45deg);
-        width: 20px;
-        height: 20px;
-      }
-      .code-comp {
-        margin-left: 5px;
-        padding: 5px;
-        .comp-delete-icon {
-          margin-left: 3px;
-        }
       }
     }
   }

packages/editor/src/type.ts

@@ -30,6 +30,7 @@ import type {
 
 import type { CodeBlockService } from './services/codeBlock';
 import type { ComponentListService } from './services/componentList';
+import type { DepService } from './services/dep';
 import type { EditorService } from './services/editor';
 import type { EventsService } from './services/events';
 import type { HistoryService } from './services/history';
@@ -54,6 +55,7 @@ export interface Services {
   componentListService: ComponentListService;
   uiService: UiService;
   codeBlockService: CodeBlockService;
+  depService: DepService;
 }
 
 export interface StageOptions {
@@ -339,8 +341,6 @@ export type CodeState = {
   combineIds: string[];
   /** 为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除） */
   undeletableList: Id[];
-  /** 代码块和组件的绑定关系 */
-  relations: CodeRelation;
 };
 
 export type HookData = {