@tmagic/editor 1.8.0-beta.5 → 1.8.0-beta.7

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.5",
+  "version": "1.8.0-beta.7",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.0",
     "sortablejs": "^1.15.6",
-    "@tmagic/form": "1.8.0-beta.5",
-    "@tmagic/table": "1.8.0-beta.5",
-    "@tmagic/utils": "1.8.0-beta.5",
-    "@tmagic/design": "1.8.0-beta.5",
-    "@tmagic/stage": "1.8.0-beta.5"
+    "@tmagic/form": "1.8.0-beta.7",
+    "@tmagic/design": "1.8.0-beta.7",
+    "@tmagic/table": "1.8.0-beta.7",
+    "@tmagic/utils": "1.8.0-beta.7",
+    "@tmagic/stage": "1.8.0-beta.7"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -76,7 +76,7 @@
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
     "vue": "^3.5.34",
-    "@tmagic/core": "1.8.0-beta.5"
+    "@tmagic/core": "1.8.0-beta.7"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/fields/CodeSelectCol.vue

@@ -107,10 +107,12 @@ const isCompareMode = computed(() => Boolean(props.isCompare && props.lastValues
 
 const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
 
-const hasCodeBlockSidePanel = computed(() =>
+const codeBlockSidePanel = computed(() =>
   (uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.CODE_BLOCK),
 );
 
+const hasCodeBlockSidePanel = computed(() => codeBlockSidePanel.value);
+
 /**
  * 根据代码块id获取代码块参数配置
  * @param codeId 代码块ID
@@ -191,6 +193,10 @@ const onParamsChangeHandler = (value: any, eventData: ContainerChangeEventData)
 };
 
 const editCode = (id: string) => {
+  const sideBarItem = codeBlockSidePanel.value;
+  if (sideBarItem) {
+    uiService.set('sideBarActiveTabName', sideBarItem.text || sideBarItem.$key || SideItemKey.CODE_BLOCK);
+  }
   eventBus?.emit('edit-code', id);
 };
 </script>

package/src/fields/DataSourceFieldSelect/FieldSelect.vue

@@ -211,11 +211,25 @@ const onChangeHandler = (v: string[] = []) => {
   emit('change', v);
 };
 
-const hasDataSourceSidePanel = computed(() =>
+const dataSourceSidePanel = computed(() =>
   uiService.get('sideBarItems').find((item) => item.$key === SideItemKey.DATA_SOURCE),
 );
 
+const hasDataSourceSidePanel = computed(() => dataSourceSidePanel.value);
+
 const editHandler = (id: string) => {
-  eventBus?.emit('edit-data-source', removeDataSourceFieldPrefix(id));
+  const sideBarItem = dataSourceSidePanel.value;
+  if (sideBarItem) {
+    uiService.set('sideBarActiveTabName', sideBarItem.text || sideBarItem.$key || SideItemKey.DATA_SOURCE);
+  }
+
+  const dataSourceId = removeDataSourceFieldPrefix(id);
+  const fieldPath = selectFieldsId.value;
+
+  if (fieldPath.length) {
+    eventBus?.emit('edit-data-source-field', dataSourceId, [...fieldPath]);
+  } else {
+    eventBus?.emit('edit-data-source', dataSourceId);
+  }
 };
 </script>

package/src/fields/DataSourceFields.vue

@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, Ref, ref } from 'vue';
+import { computed, type ComputedRef, inject, onMounted, provide, Ref, ref } from 'vue';
 
 import type { DataSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
@@ -101,6 +101,16 @@ const newHandler = () => {
   addDialogVisible.value = true;
 };
 
+const editField = (row: Record<string, any>, index: number) => {
+  fieldValues.value = {
+    ...row,
+    index,
+  };
+  fieldTitle.value = `编辑${row.title}`;
+  calcBoxPosition();
+  addDialogVisible.value = true;
+};
+
 const fieldChange = ({ index, ...value }: Record<string, any>, data: ContainerChangeEventData) => {
   addDialogVisible.value = false;
 
@@ -158,13 +168,7 @@ const fieldColumns: ColumnConfig[] = [
       {
         text: '编辑',
         handler: (row: Record<string, any>, index: number) => {
-          fieldValues.value = {
-            ...row,
-            index,
-          };
-          fieldTitle.value = `编辑${row.title}`;
-          calcBoxPosition();
-          addDialogVisible.value = true;
+          editField(row, index);
         },
       },
       {
@@ -354,4 +358,29 @@ const { height: editorHeight } = useEditorContentHeight();
 
 const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
 const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
+
+/**
+ * 由 DataSourceConfigPanel 注入：打开数据源详情后需要直接打开的字段路径（字段名数组）。
+ * 当前层消费 path[0]，并把剩余路径下发给嵌套字段，实现逐层打开。
+ */
+const editingFieldPath = inject<ComputedRef<string[]>>(
+  'editingDataSourceFieldPath',
+  computed(() => []),
+);
+
+provide(
+  'editingDataSourceFieldPath',
+  computed(() => editingFieldPath.value.slice(1)),
+);
+
+onMounted(() => {
+  const path = editingFieldPath.value;
+  if (!path.length) return;
+
+  const fields: Record<string, any>[] = props.model[props.name] || [];
+  const index = fields.findIndex((field) => field.name === path[0]);
+  if (index === -1) return;
+
+  editField(fields[index], index);
+});
 </script>

package/src/fields/DataSourceMethodSelect.vue

@@ -13,7 +13,7 @@
       ></MCascader>
 
       <TMagicTooltip
-        v-if="model[name] && isCustomMethod && hasDataSourceSidePanel && !isCompare"
+        v-if="model[name] && isCustomMethod && dataSourceSidePanel && !isCompare"
         :content="notEditable ? '查看' : '编辑'"
       >
         <TMagicButton class="m-fields-select-action-button" :size="size" @click="editCodeHandler">
@@ -75,7 +75,7 @@ const props = withDefaults(defineProps<FieldProps<DataSourceMethodSelectConfig>>
   disabled: false,
 });
 
-const hasDataSourceSidePanel = computed(() =>
+const dataSourceSidePanel = computed(() =>
   (uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
 );
 
@@ -208,12 +208,17 @@ const onParamsChangeHandler = (value: any, eventData: ContainerChangeEventData)
 };
 
 const editCodeHandler = () => {
-  const [id] = props.model[props.name];
+  const [id, methodName] = props.model[props.name];
 
   const dataSource = dataSourceService.getDataSourceById(id);
 
   if (!dataSource) return;
 
-  eventBus?.emit('edit-data-source', id);
+  const sideBarItem = dataSourceSidePanel.value;
+  if (sideBarItem) {
+    uiService.set('sideBarActiveTabName', sideBarItem.text || sideBarItem.$key || SideItemKey.DATA_SOURCE);
+  }
+
+  eventBus?.emit('edit-data-source-method', id, methodName);
 };
 </script>

package/src/fields/DataSourceMethods.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, ref, useTemplateRef } from 'vue';
+import { computed, type ComputedRef, inject, nextTick, onMounted, ref, useTemplateRef } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { CodeBlockContent } from '@tmagic/core';
@@ -52,6 +52,29 @@ const codeBlockEditorRef = useTemplateRef<InstanceType<typeof CodeBlockEditor>>(
 
 let editIndex = -1;
 
+const editMethod = (method: CodeBlockContent, index: number) => {
+  let codeContent: string = '({ params, dataSource, app }) => {\n  // place your code here\n}';
+
+  if (method.content) {
+    if (typeof method.content !== 'string') {
+      codeContent = method.content.toString();
+    } else {
+      codeContent = method.content;
+    }
+  }
+
+  codeConfig.value = {
+    ...cloneDeep(method),
+    content: codeContent,
+  };
+
+  editIndex = index;
+
+  nextTick(() => {
+    codeBlockEditorRef.value?.show();
+  });
+};
+
 const methodColumns: ColumnConfig[] = [
   {
     label: '名称',
@@ -77,26 +100,7 @@ const methodColumns: ColumnConfig[] = [
       {
         text: '编辑',
         handler: (method: CodeBlockContent, index: number) => {
-          let codeContent: string = '({ params, dataSource, app }) => {\n  // place your code here\n}';
-
-          if (method.content) {
-            if (typeof method.content !== 'string') {
-              codeContent = method.content.toString();
-            } else {
-              codeContent = method.content;
-            }
-          }
-
-          codeConfig.value = {
-            ...cloneDeep(method),
-            content: codeContent,
-          };
-
-          editIndex = index;
-
-          nextTick(() => {
-            codeBlockEditorRef.value?.show();
-          });
+          editMethod(method, index);
         },
       },
       {
@@ -158,4 +162,21 @@ const submitCodeHandler = (value: CodeBlockContent, data: ContainerChangeEventDa
 
   codeBlockEditorRef.value?.hide();
 };
+
+/** 由 DataSourceConfigPanel 注入：打开数据源详情后需要直接打开的方法名 */
+const editingMethodName = inject<ComputedRef<string | undefined>>(
+  'editingDataSourceMethodName',
+  computed(() => ''),
+);
+
+onMounted(() => {
+  const methodName = editingMethodName.value;
+  if (!methodName) return;
+
+  const methods: CodeBlockContent[] = props.model[props.name] || [];
+  const index = methods.findIndex((method) => method.name === methodName);
+  if (index === -1) return;
+
+  editMethod(methods[index], index);
+});
 </script>

package/src/fields/StyleSetter/components/Border.vue

@@ -4,27 +4,31 @@
       <div class="border-icon-container-row">
         <div
           class="border-icon border-icon-top"
-          :class="{ active: direction === 'Top' }"
+          :class="{ active: direction === 'Top', configured: isConfigured('Top') }"
           @click="selectDirection('Top')"
         ></div>
       </div>
       <div class="border-icon-container-row">
         <div
           class="border-icon border-icon-left"
-          :class="{ active: direction === 'Left' }"
+          :class="{ active: direction === 'Left', configured: isConfigured('Left') }"
           @click="selectDirection('Left')"
         ></div>
-        <div class="border-icon" :class="{ active: direction === '' }" @click="selectDirection()"></div>
+        <div
+          class="border-icon"
+          :class="{ active: direction === '', configured: isConfigured('') }"
+          @click="selectDirection()"
+        ></div>
         <div
           class="border-icon border-icon-right"
-          :class="{ active: direction === 'Right' }"
+          :class="{ active: direction === 'Right', configured: isConfigured('Right') }"
           @click="selectDirection('Right')"
         ></div>
       </div>
       <div class="border-icon-container-row">
         <div
           class="border-icon border-icon-bottom"
-          :class="{ active: direction === 'Bottom' }"
+          :class="{ active: direction === 'Bottom', configured: isConfigured('Bottom') }"
           @click="selectDirection('Bottom')"
         ></div>
       </div>
@@ -98,7 +102,7 @@ const emit = defineEmits<{
   addDiffCount: [];
 }>();
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     model: FormValue;
     lastValues?: FormValue;
@@ -109,6 +113,11 @@ withDefaults(
   {},
 );
 
+const hasValue = (value: unknown) => value !== undefined && value !== null && value !== '';
+
+const isConfigured = (d: string) =>
+  ['Width', 'Color', 'Style'].some((key) => hasValue(props.model?.[`border${d}${key}`]));
+
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   eventData.changeRecords?.forEach((record) => {
     emit('change', record.value, {

package/src/layouts/history-list/HistoryListPanel.vue

@@ -100,8 +100,8 @@
 /**
  * 历史记录面板：在顶部 NavMenu 上点击图标打开 popover，分三个 tab：
  * - 页面：当前活动页面的历史栈，连续修改同一节点的多步会被合并成一组
- * - 数据源：以 dataSource.id 分组，每组内部相邻的连续 update 自动合并
- * - 代码块：同上，按 codeBlock.id 分组并合并相邻 update
+ * - 数据源：以 dataSource.id 分桶，每条操作记录独立展示
+ * - 代码块：同上，按 codeBlock.id 分桶，每条操作记录独立展示
  *
  * 数据通过 historyService 暴露的聚合 API 读取，UI 仅用于只读展示，
  * 同时支持点击任意一条记录跳转至该状态：
@@ -135,6 +135,7 @@ import type { FormState } from '@tmagic/form';
 import MIcon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
 import type {
+  BaseStepValue,
   CodeBlockStepValue,
   DataSourceStepValue,
   DiffDialogPayload,
@@ -143,15 +144,7 @@ import type {
 } from '@editor/type';
 
 import BucketTab from './BucketTab.vue';
-import {
-  describeCodeBlockGroup,
-  describeCodeBlockStep,
-  describeDataSourceGroup,
-  describeDataSourceStep,
-  isCodeBlockStepRevertable,
-  isDataSourceStepRevertable,
-  useHistoryList,
-} from './composables';
+import { describeStep, isSingleDiffStepRevertable, useHistoryList } from './composables';
 import HistoryDiffDialog from './HistoryDiffDialog.vue';
 import PageTab from './PageTab.vue';
 
@@ -223,34 +216,28 @@ const {
  */
 const pageMarker = computed(() => historyService.getPageMarker());
 
-/** 数据源 step 仅 update（前后 schema 都存在）时可查看差异。 */
-const isDataSourceStepDiffable = (step: DataSourceStepValue) =>
-  Boolean(step.diff?.[0]?.oldSchema && step.diff?.[0]?.newSchema);
-
 /** 代码块 step 仅 update（前后 content 都存在）时可查看差异。 */
-const isCodeBlockStepDiffable = (step: CodeBlockStepValue) =>
-  Boolean(step.diff?.[0]?.oldSchema && step.diff?.[0]?.newSchema);
+const isStepDiffable = (step: BaseStepValue) => Boolean(step.diff?.[0]?.oldSchema && step.diff?.[0]?.newSchema);
 
 /**
  * 数据源 / 代码块两类 bucket 历史的整体渲染配置：把 title / prefix 与各自的描述、
  * 可差异、可回滚判定收敛为单一对象整体注入 BucketTab，组件内部按需读取。
  */
+// 数据源/代码块不做相邻合并，每组恒为单步，省略 describeGroup，由 toRowGroup 回退到 describeStep。
 const dataSourceConfig: HistoryBucketConfig<DataSourceStepValue> = {
   title: '数据源',
   prefix: 'ds',
-  describeGroup: describeDataSourceGroup,
-  describeStep: describeDataSourceStep,
-  isStepDiffable: isDataSourceStepDiffable,
-  isStepRevertable: isDataSourceStepRevertable,
+  describeStep: (step: DataSourceStepValue): string => describeStep(step, (schema) => schema?.title, '数据源'),
+  isStepDiffable,
+  isStepRevertable: isSingleDiffStepRevertable,
 };
 
 const codeBlockConfig: HistoryBucketConfig<CodeBlockStepValue> = {
   title: '代码块',
   prefix: 'cb',
-  describeGroup: describeCodeBlockGroup,
-  describeStep: describeCodeBlockStep,
-  isStepDiffable: isCodeBlockStepDiffable,
-  isStepRevertable: isCodeBlockStepRevertable,
+  describeStep: (step: CodeBlockStepValue): string => describeStep(step, (content) => content?.name, '代码块'),
+  isStepDiffable,
+  isStepRevertable: isSingleDiffStepRevertable,
 };
 
 /** 把"目标 step 索引"翻译成"目标 cursor"（已应用步骤数量）。 */

package/src/layouts/history-list/InitialRow.vue

@@ -7,6 +7,7 @@
     <span class="m-editor-history-list-item-index" title="历史步骤编号 #0（未修改的初始状态）">#0</span>
     <span class="m-editor-history-list-item-op op-initial">初始</span>
     <span class="m-editor-history-list-item-desc">{{ desc }}</span>
+    <span v-if="saved" class="m-editor-history-list-item-saved" title="该记录为最近一次保存的状态">已保存</span>
     <span v-if="gotoEnabled && !isCurrent" class="m-editor-history-list-item-actions">
       <span class="m-editor-history-list-item-goto" title="回到该记录" @click.stop="onClick">回到</span>
     </span>
@@ -49,6 +50,8 @@ const props = withDefaults(
 );
 
 const desc = computed(() => props.marker?.historyDescription || '未修改的初始状态');
+/** 基线（初始状态）是否为最近一次保存点：仅页面栈的 `initial` 基线 step 会被 markSaved 标记。 */
+const saved = computed(() => Boolean(props.marker?.saved));
 const time = computed(() => formatHistoryTime(props.marker?.timestamp));
 const timeTitle = computed(() => formatHistoryFullTime(props.marker?.timestamp));
 const rowTitle = computed(() => {

package/src/layouts/history-list/composables.ts

@@ -5,10 +5,6 @@ import { datetimeFormatter } from '@tmagic/form';
 import { useServices } from '@editor/hooks/use-services';
 import type {
   BaseStepValue,
-  CodeBlockHistoryGroup,
-  CodeBlockStepValue,
-  DataSourceHistoryGroup,
-  DataSourceStepValue,
   HistoryOpSource,
   HistoryOpType,
   HistoryRowDescriptor,
@@ -227,12 +223,14 @@ export const toRowGroup = <T extends BaseStepValue = BaseStepValue>(
 ): HistoryRowGroup => {
   const { describeGroup, describeStep, isStepDiffable, isStepRevertable } = descriptor;
   const timestamp = groupTimestamp(group);
+  // 无 describeGroup 时回退到组内最后一步的 describeStep：数据源/代码块不做相邻合并，每组恒为单步，二者等价。
+  const lastStep = group.steps[group.steps.length - 1]?.step;
   return {
     key,
     applied: group.applied,
     isCurrent: Boolean(group.isCurrent),
     opType: group.opType,
-    desc: describeGroup(group),
+    desc: describeGroup ? describeGroup(group) : describeStep(lastStep),
     source: groupSource(group),
     time: formatHistoryTime(timestamp),
     timeTitle: formatHistoryFullTime(timestamp),
@@ -273,30 +271,43 @@ const pickLastDescription = (descs: (string | undefined)[]): string | undefined
   return undefined;
 };
 
-export const describePageStep = (step: StepValue) => {
+/**
+ * 页面 / 数据源 / 代码块三类历史共用的单步描述核心。
+ * 各类型只在「取展示名」与「实体单位名」上有差异，通过参数注入，文案模板完全一致：
+ * - 新增 / 删除：单实体展示「label」，多实体（仅页面可能出现）退化为「N 个X」；
+ * - 修改：展示「label · propPath」，无 diff 时兜底「X」，多实体退化为「N 个X」。
+ * 操作类型（新增 / 删除 / 修改）已由列表行的 op 徽标单独展示，故描述文案不再重复动词。
+ * 展示 id 统一取 schema.id；调用方显式传入的 historyDescription 永远优先。
+ */
+export const describeStep = <T>(
+  step: BaseStepValue<T>,
+  getLabel: (_schema?: T) => string | number | undefined,
+  unit: string,
+): string => {
   if (step.historyDescription) return step.historyDescription;
-  const { opType } = step;
   const items = step.diff ?? [];
-  if (opType === 'add') {
-    const count = items.length;
+  const label = (schema?: T) => labelWithId(getLabel(schema), (schema as { id?: string | number } | undefined)?.id);
+
+  if (step.opType === 'add') {
     const node = items[0]?.newSchema;
-    return `新增 ${count} 个节点${count === 1 && node ? `（${labelWithId(nameOf(node), node.id)}）` : ''}`;
+    return items.length === 1 && node ? label(node) : `${items.length} 个${unit}`;
   }
-  if (opType === 'remove') {
-    const count = items.length;
+  if (step.opType === 'remove') {
     const node = items[0]?.oldSchema;
-    return `删除 ${count} 个节点${count === 1 && node ? `（${labelWithId(nameOf(node), node.id)}）` : ''}`;
+    return items.length === 1 && node ? label(node) : `${items.length} 个${unit}`;
   }
-  if (!items.length) return '修改节点';
+  if (!items.length) return unit;
   if (items.length === 1) {
-    const { newSchema, changeRecords } = items[0];
-    const propPath = changeRecords?.[0]?.propPath;
-    const target = labelWithId(nameOf(newSchema), newSchema?.id);
-    return `修改 ${target}${propPath ? ` · ${propPath}` : ''}`;
+    const { newSchema, oldSchema, changeRecords } = items[0];
+    const propPath = changeRecords?.map((changeRecord) => changeRecord.propPath).join(',');
+    const target = label(newSchema ?? oldSchema);
+    return propPath ? `${target} · ${propPath}` : target;
   }
-  return `修改 ${items.length} 个节点`;
+  return `${items.length} 个${unit}`;
 };
 
+export const describePageStep = (step: StepValue): string => describeStep(step, (node) => nameOf(node), '节点');
+
 /**
  * 合并组的展示文案：
  * - 若组内任一步显式提供了 historyDescription：取最后一条非空 historyDescription（最近一次的描述更准确）；
@@ -307,68 +318,8 @@ export const describePageGroup = (group: PageHistoryGroup) => {
   const lastDesc = pickLastDescription(group.steps.map((s) => s.step.historyDescription));
   if (lastDesc) return lastDesc;
   if (group.steps.length === 1) return describePageStep(group.steps[0].step);
-  const paths = new Set<string>();
-  group.steps.forEach((s) => {
-    s.step.diff?.[0]?.changeRecords?.forEach((r) => r.propPath && paths.add(r.propPath));
-  });
-  const pathList = Array.from(paths).slice(0, 3).join(', ');
-  const target = labelWithId(
-    group.targetName ?? (group.targetId !== undefined ? `${group.targetId}` : '节点'),
-    group.targetId,
-  );
-  return pathList ? `修改 ${target} · ${pathList}${paths.size > 3 ? '…' : ''}` : `修改 ${target}`;
-};
 
-export const describeDataSourceStep = (step: DataSourceStepValue) => {
-  if (step.historyDescription) return step.historyDescription;
-  const { oldSchema: oldSchema, newSchema: newSchema, changeRecords } = step.diff?.[0] ?? {};
-  if (!oldSchema && newSchema) return `创建 ${labelWithId(newSchema.title, newSchema.id ?? step.id)}`;
-  if (!newSchema && oldSchema) return `删除 ${labelWithId(oldSchema.title, oldSchema.id ?? step.id)}`;
-  const propPath = changeRecords?.[0]?.propPath;
-  const title = labelWithId(newSchema?.title || oldSchema?.title, step.id);
-  return propPath ? `修改 ${title} · ${propPath}` : `修改 ${title}`;
-};
-
-export const describeDataSourceGroup = (group: DataSourceHistoryGroup) => {
-  const lastDesc = pickLastDescription(group.steps.map((s) => s.step.historyDescription));
-  if (lastDesc) return lastDesc;
-  if (group.steps.length === 1) return describeDataSourceStep(group.steps[0].step);
-  const paths = new Set<string>();
-  group.steps.forEach((s) => {
-    s.step.diff?.[0]?.changeRecords?.forEach((r) => r.propPath && paths.add(r.propPath));
-  });
-  const pathList = Array.from(paths).slice(0, 3).join(', ');
-  const rawTitle =
-    group.steps[group.steps.length - 1].step.diff?.[0]?.newSchema?.title ||
-    group.steps[0].step.diff?.[0]?.oldSchema?.title;
-  const target = labelWithId(rawTitle, group.id);
-  return pathList ? `修改 ${target} · ${pathList}${paths.size > 3 ? '…' : ''}` : `修改 ${target}`;
-};
-
-export const describeCodeBlockStep = (step: CodeBlockStepValue) => {
-  if (step.historyDescription) return step.historyDescription;
-  const { oldSchema: oldContent, newSchema: newContent, changeRecords } = step.diff?.[0] ?? {};
-  if (!oldContent && newContent) return `创建 ${labelWithId(newContent.name, newContent.id ?? step.id)}`;
-  if (!newContent && oldContent) return `删除 ${labelWithId(oldContent.name, oldContent.id ?? step.id)}`;
-  const propPath = changeRecords?.[0]?.propPath;
-  const title = labelWithId(newContent?.name || oldContent?.name, step.id);
-  return propPath ? `修改 ${title} · ${propPath}` : `修改 ${title}`;
-};
-
-export const describeCodeBlockGroup = (group: CodeBlockHistoryGroup) => {
-  const lastDesc = pickLastDescription(group.steps.map((s) => s.step.historyDescription));
-  if (lastDesc) return lastDesc;
-  if (group.steps.length === 1) return describeCodeBlockStep(group.steps[0].step);
-  const paths = new Set<string>();
-  group.steps.forEach((s) => {
-    s.step.diff?.[0]?.changeRecords?.forEach((r) => r.propPath && paths.add(r.propPath));
-  });
-  const pathList = Array.from(paths).slice(0, 3).join(', ');
-  const rawName =
-    group.steps[group.steps.length - 1].step.diff?.[0]?.newSchema?.name ||
-    group.steps[0].step.diff?.[0]?.oldSchema?.name;
-  const target = labelWithId(rawName, group.id);
-  return pathList ? `修改 ${target} · ${pathList}${paths.size > 3 ? '…' : ''}` : `修改 ${target}`;
+  return labelWithId(group.targetName ?? (group.targetId !== undefined ? `${group.targetId}` : '节点'), group.targetId);
 };
 
 /**
@@ -385,22 +336,11 @@ export const isPageStepRevertable = (step: StepValue): boolean => {
 };
 
 /**
- * 数据源 step 是否支持「回滚」：
- * - 新增（无 oldSchema）/ 删除（无 newSchema）：不依赖 changeRecords，始终可回滚；
- * - 更新（前后 schema 都存在）：必须有 changeRecords 才支持局部反向 patch，否则不支持回滚。
- */
-export const isDataSourceStepRevertable = (step: DataSourceStepValue): boolean => {
-  const item = step.diff?.[0];
-  if (!item?.oldSchema || !item?.newSchema) return true;
-  return Boolean(item.changeRecords?.length);
-};
-
-/**
- * 代码块 step 是否支持「回滚」：
+ * 单 diff 项历史（数据源 / 代码块）是否支持「回滚」：
  * - 新增（无 oldSchema）/ 删除（无 newSchema）：不依赖 changeRecords，始终可回滚；
- * - 更新（前后 content 都存在）：必须有 changeRecords 才支持局部反向 patch，否则不支持回滚。
+ * - 更新（前后内容都存在）：必须有 changeRecords 才支持局部反向 patch，否则不支持回滚。
  */
-export const isCodeBlockStepRevertable = (step: CodeBlockStepValue): boolean => {
+export const isSingleDiffStepRevertable = (step: BaseStepValue): boolean => {
   const item = step.diff?.[0];
   if (!item?.oldSchema || !item?.newSchema) return true;
   return Boolean(item.changeRecords?.length);

package/src/layouts/sidebar/Sidebar.vue

@@ -257,7 +257,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
       slots: {},
     },
     layer: {
-      $key: 'layer',
+      $key: SideItemKey.LAYER,
       type: 'component',
       icon: List,
       text: '已选组件',
@@ -277,7 +277,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
       slots: {},
     },
     [SideItemKey.CODE_BLOCK]: {
-      $key: 'code-block',
+      $key: SideItemKey.CODE_BLOCK,
       type: 'component',
       icon: EditPen,
       text: '代码编辑',