diff --git a/packages/editor/src/fields/CodeSelect.vue b/packages/editor/src/fields/CodeSelect.vue index 25b8f7b7..b1b9c774 100644 --- a/packages/editor/src/fields/CodeSelect.vue +++ b/packages/editor/src/fields/CodeSelect.vue @@ -8,7 +8,14 @@ :size="size" @change="changeHandler" > - 查看 + 查看 @@ -35,6 +42,9 @@ const props = defineProps<{ }>(); const changeHandler = (value: any) => { + // 记录组件与代码块的绑定关系 + const { id = '' } = services?.editorService.get('node') || {}; + services?.codeBlockService.setCompRelation(id, value); emit('change', value); }; diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue index 6071ddde..591cc99a 100644 --- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue +++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue @@ -7,13 +7,14 @@ :append-to-body="true" >
import { computed, inject, ref, watchEffect } from 'vue'; import { ElMessage } from 'element-plus'; +import { isEmpty } from 'lodash-es'; import type { CodeBlockContent, Services } from '../../../type'; import { EditorMode } from '../../../type'; @@ -70,11 +72,10 @@ const isShowCodeBlockEditor = computed(() => codeConfig.value && services?.codeB const mode = computed(() => services?.codeBlockService.getMode()); const id = computed(() => services?.codeBlockService.getId() || ''); const editable = computed(() => services?.codeBlockService.getEditStatus()); +// 当前选中组件绑定的代码块id数组 +const selectedIds = computed(() => services?.codeBlockService.getCombineIds() || []); // select选择的内容(CodeBlockDSL) -const selectedValue = computed(() => { - const selectedIds = services?.codeBlockService.getCombineIds() || []; - return services?.codeBlockService.getCodeDslByIds(selectedIds); -}); +const selectedValue = computed(() => services?.codeBlockService.getCodeDslByIds(selectedIds.value)); watchEffect(() => { codeConfig.value = services?.codeBlockService.getCodeContentById(id.value) ?? null; diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue index 8b9571b1..27faf375 100644 --- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue +++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue @@ -8,14 +8,17 @@ -
+
{{ value.name }}（{{ key }}）
- + + + +
@@ -33,8 +36,9 @@ diff --git a/packages/editor/src/services/codeBlock.ts b/packages/editor/src/services/codeBlock.ts index 8a3235be..baf7c7f4 100644 --- a/packages/editor/src/services/codeBlock.ts +++ b/packages/editor/src/services/codeBlock.ts @@ -17,9 +17,9 @@ */ import { reactive } from 'vue'; -import { keys, pick } from 'lodash-es'; +import { keys, omit, pick } from 'lodash-es'; -import type { CodeBlockContent, CodeBlockDSL, CodeState } from '../type'; +import type { CodeBlockContent, CodeBlockDSL, CodeState, CompRelation } from '../type'; import { EditorMode } from '../type'; import { info } from '../utils/logger'; @@ -33,6 +33,8 @@ class CodeBlock extends BaseService { editable: true, mode: EditorMode.EDITOR, combineIds: [], + compRelation: {}, + undeletableList: [], }); constructor() { @@ -185,7 +187,7 @@ class CodeBlock extends BaseService { } /** - * 设置当前已关联绑定的代码块id数组 + * 设置当前选中组件已关联绑定的代码块id数组 * @param {string[]} ids 代码块id数组 * @returns {void} */ @@ -194,13 +196,63 @@ class CodeBlock extends BaseService { } /** - * 获取当前已关联绑定的代码块id数组 + * 获取当前选中组件已关联绑定的代码块id数组 * @returns {string[]} */ public getCombineIds(): string[] { return this.state.combineIds; } + /** + * 设置组件与代码块的绑定关系 + * @param {number | string} compId 组件id + * @param {string[]} codeIds 代码块id数组 + * @returns {void} + */ + public setCompRelation(compId: number | string, codeIds: string[]) { + if (!compId) return; + this.state.compRelation = { + [compId]: codeIds, + }; + } + + /** + * 获取组件与代码块的绑定关系 + * @returns {CompRelation} + */ + public getCompRelation(): CompRelation { + return this.state.compRelation; + } + + /** + * 获取不可删除列表 + * @returns {string[]} + */ + public getUndeletableList(): string[] { + return this.state.undeletableList; + } + + /** + * 设置不可删除列表：为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除） + * @param {string[]} codeIds 代码块id数组 + * @returns {void} + */ + public setUndeleteableList(codeIds: string[]): void { + this.state.undeletableList = codeIds; + } + + /** + * 在dsl数据源中删除指定id的代码块 + * @param {string[]} codeIds 需要删除的代码块id数组 + * @returns {CodeBlockDSL} 删除后的code dsl + */ + public deleteCodeDslByIds(codeIds: string[]): CodeBlockDSL { + const currentDsl = this.getCodeDsl(); + const newDsl = omit(currentDsl, codeIds); + this.setCodeDsl(newDsl); + return newDsl; + } + /** * 生成代码块唯一id * @returns {string} 代码块唯一id diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts index 12fe67ab..d1085ecf 100644 --- a/packages/editor/src/type.ts +++ b/packages/editor/src/type.ts @@ -328,11 +328,23 @@ export type CodeState = { id: string; /** 代码块是否可编辑 */ editable: boolean; + /** 代码编辑面板的展示模式 */ mode: EditorMode; + /** list模式下左侧展示的代码列表 */ combineIds: string[]; + /** 组件和代码块的绑定关系 */ + compRelation: CompRelation; + /** 为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除） */ + undeletableList: string[]; }; export enum EditorMode { + /** 左侧菜单，右侧代码 */ LIST = 'list', + /** 全屏代码 */ EDITOR = 'editor', } + +export type CompRelation = { + [compId: string | number]: string[]; +};