@tmagic/editor 1.2.9 → 1.2.11

package/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">
-import { computed, inject, reactive, ref, watch } from 'vue';
-import { Close, Edit, Link, View } from '@element-plus/icons-vue';
-import { cloneDeep, forIn, isEmpty } from 'lodash-es';
+<script setup lang="ts" name="MEditorCodeBlockList">
+import { computed, inject, ref } from 'vue';
+import { Close, Edit, View } from '@element-plus/icons-vue';
 
 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, ListState } from '../../../type';
+import { CodeDeleteErrorType, CodeDslItem, Services } 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>({
-  codeList: [],
-});
+const codeList = computed(() =>
+  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 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.getCodeDslSync(), () => services?.codeBlockService.getCombineInfo()],
-  () => {
-    refreshCodeList();
-  },
-  {
-    deep: true,
-  },
-);
+const isShowCodeBlockEditor = computed(() => codeBlockService?.getCodeEditorShowStatus() || false);
 
 // 新增代码块
 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 existBinds = !isEmpty(currentCode?.combineInfo);
-  const undeleteableList = services?.codeBlockService.getUndeletableList() || [];
+  const currentCode = codeList.value.find((codeItem) => codeItem.id === key);
+  const existBinds = Boolean(currentCode?.children.length);
+  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');
-  services?.editorService.select(compId);
+  const stage = editorService?.get('stage');
+  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>

package/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 { CodeRelation, CodeState, HookData } from '../type';
+import type { CodeState } from '../type';
 import { CODE_DRAFT_STORAGE_KEY } from '../type';
 import { info } from '../utils/logger';
 
@@ -36,13 +35,10 @@ class CodeBlock extends BaseService {
     editable: true,
     combineIds: [],
     undeletableList: [],
-    relations: {},
   });
 
   constructor() {
     super([
-      'setCodeDsl',
-      'getCodeDsl',
       'getCodeContentById',
       'getCodeDslByIds',
       'getCurrentDsl',
@@ -62,7 +58,6 @@ class CodeBlock extends BaseService {
    */
   public async setCodeDsl(codeDsl: CodeBlockDSL): Promise<void> {
     this.state.codeDsl = codeDsl;
-    await editorService.setCodeDsl(this.state.codeDsl);
     info('[code-block]:code-dsl-change', this.state.codeDsl);
     this.emit('code-dsl-change', this.state.codeDsl);
   }
@@ -73,14 +68,7 @@ class CodeBlock extends BaseService {
    * @param {boolean} forceRefresh 是否强制从活动dsl拉取刷新
    * @returns {CodeBlockDSL | null}
    */
-  public async getCodeDsl(forceRefresh = false): Promise<CodeBlockDSL | null> {
-    return this.getCodeDslSync(forceRefresh);
-  }
-
-  public getCodeDslSync(forceRefresh = false): CodeBlockDSL | null {
-    if (!this.state.codeDsl || forceRefresh) {
-      this.state.codeDsl = editorService.getCodeDslSync();
-    }
+  public getCodeDsl(): CodeBlockDSL | null {
     return this.state.codeDsl;
   }
 
@@ -103,31 +91,27 @@ class CodeBlock extends BaseService {
    * @returns {void}
    */
   public async setCodeDslById(id: Id, codeConfig: CodeBlockContent): Promise<void> {
-    let codeDsl = await this.getCodeDsl();
+    const codeDsl = await this.getCodeDsl();
+
+    if (!codeDsl) {
+      throw new Error('dsl中没有codeBlocks');
+    }
+
     const codeConfigProcessed = codeConfig;
     if (codeConfig.content) {
       // 在保存的时候转换代码内容
       // eslint-disable-next-line no-eval
       codeConfigProcessed.content = eval(codeConfig.content);
     }
-    if (!codeDsl) {
-      // dsl中无代码块字段
-      codeDsl = {
-        [id]: {
-          ...codeConfigProcessed,
-        },
-      };
-    } else {
-      const existContent = codeDsl[id] || {};
-      codeDsl = {
-        ...codeDsl,
-        [id]: {
-          ...existContent,
-          ...codeConfigProcessed,
-        },
-      };
-    }
-    await this.setCodeDsl(codeDsl);
+
+    const existContent = codeDsl[id] || {};
+
+    codeDsl[id] = {
+      ...existContent,
+      ...codeConfigProcessed,
+    };
+
+    this.emit('addOrUpdate', id, codeDsl[id]);
   }
 
   /**
@@ -187,7 +171,7 @@ class CodeBlock extends BaseService {
 
   /**
    * 设置编辑状态
-   * @param {boolean} 是否可编辑
+   * @param {boolean} status 是否可编辑
    * @returns {void}
    */
   public async setEditStatus(status: boolean): Promise<void> {
@@ -229,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[]}
@@ -320,13 +254,17 @@ class CodeBlock extends BaseService {
   /**
    * 在dsl数据源中删除指定id的代码块
    * @param {Id[]} codeIds 需要删除的代码块id数组
-   * @returns {CodeBlockDSL} 删除后的code dsl
    */
-  public async deleteCodeDslByIds(codeIds: Id[]): Promise<CodeBlockDSL> {
+  public async deleteCodeDslByIds(codeIds: Id[]): Promise<void> {
     const currentDsl = await this.getCodeDsl();
-    const newDsl = omit(currentDsl, codeIds);
-    await this.setCodeDsl(newDsl);
-    return newDsl;
+
+    if (!currentDsl) return;
+
+    codeIds.forEach((id) => {
+      delete currentDsl[id];
+
+      this.emit('remove', id);
+    });
   }
 
   /**
@@ -356,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;