@tmagic/editor 1.8.0-beta.1 → 1.8.0-beta.2

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

@@ -0,0 +1,271 @@
+<template>
+  <TMagicPopover
+    popper-class="m-editor-history-list-popover"
+    placement="bottom"
+    trigger="click"
+    :visible="visible"
+    :width="660"
+  >
+    <div class="m-editor-history-list">
+      <TMagicTooltip effect="dark" placement="top" content="关闭">
+        <TMagicButton class="m-editor-history-list-close" size="small" link @click="visible = false">
+          <template #icon>
+            <MIcon :icon="CloseIcon"></MIcon>
+          </template>
+        </TMagicButton>
+      </TMagicTooltip>
+
+      <TMagicTabs v-model="activeTab" class="m-editor-history-list-tabs">
+        <component
+          :is="tabPaneComponent?.component || 'el-tab-pane'"
+          v-bind="tabPaneComponent?.props({ name: 'page', label: `页面 (${pageGroups.length})` }) || {}"
+        >
+          <PageTab
+            :list="pageGroupsDisplay"
+            :expanded="expanded"
+            @toggle="toggleGroup"
+            @goto="onPageGoto"
+            @goto-initial="onPageGotoInitial"
+            @diff-step="onPageDiff"
+            @revert-step="onPageRevert"
+          />
+        </component>
+
+        <component
+          :is="tabPaneComponent?.component || 'el-tab-pane'"
+          v-bind="tabPaneComponent?.props({ name: 'data-source', label: `数据源 (${dataSourceGroups.length})` }) || {}"
+        >
+          <DataSourceTab
+            :buckets="dataSourceGroupsByTarget"
+            :expanded="expanded"
+            @toggle="toggleGroup"
+            @goto="onDataSourceGoto"
+            @goto-initial="onDataSourceGotoInitial"
+            @diff-step="onDataSourceDiff"
+            @revert-step="onDataSourceRevert"
+          />
+        </component>
+
+        <component
+          :is="tabPaneComponent?.component || 'el-tab-pane'"
+          v-bind="tabPaneComponent?.props({ name: 'code-block', label: `代码块 (${codeBlockGroups.length})` }) || {}"
+        >
+          <CodeBlockTab
+            :buckets="codeBlockGroupsByTarget"
+            :expanded="expanded"
+            @toggle="toggleGroup"
+            @goto="onCodeBlockGoto"
+            @goto-initial="onCodeBlockGotoInitial"
+            @diff-step="onCodeBlockDiff"
+            @revert-step="onCodeBlockRevert"
+          />
+        </component>
+      </TMagicTabs>
+    </div>
+
+    <template #reference>
+      <TMagicTooltip effect="dark" placement="bottom" content="历史记录">
+        <TMagicButton size="small" link @click="visible = !visible">
+          <template #icon>
+            <MIcon :icon="ClockIcon"></MIcon>
+          </template>
+        </TMagicButton>
+      </TMagicTooltip>
+    </template>
+  </TMagicPopover>
+
+  <HistoryDiffDialog ref="diffDialog" :extend-state="extendFormState" />
+</template>
+
+<script lang="ts" setup>
+/**
+ * 历史记录面板：在顶部 NavMenu 上点击图标打开 popover，分三个 tab：
+ * - 页面：当前活动页面的历史栈，连续修改同一节点的多步会被合并成一组
+ * - 数据源：以 dataSource.id 分组，每组内部相邻的连续 update 自动合并
+ * - 代码块：同上，按 codeBlock.id 分组并合并相邻 update
+ *
+ * 数据通过 historyService 暴露的聚合 API 读取，UI 仅用于只读展示，
+ * 同时支持点击任意一条记录跳转至该状态：
+ * - 页面 tab：调用 editorService.gotoPageStep(targetCursor)
+ * - 数据源 tab：调用 dataSourceService.goto(id, targetCursor)
+ * - 代码块 tab：调用 codeBlockService.goto(id, targetCursor)
+ *
+ * 这里的 targetCursor = 用户点击的 step.index + 1，即"应用至此步完成的状态"。
+ *
+ * 此外每条 step 上提供"查看差异"入口（仅在前后值都存在的 update 步骤显示），
+ * 点击后弹出 HistoryDiffDialog，使用 CompareForm 组件以表单形式展示新旧值差异。
+ *
+ * 各 tab 的内容拆分为独立的 SFC（PageTab / DataSourceTab / CodeBlockTab），
+ * 共享的描述生成与折叠状态在 composables.ts 中维护。
+ */
+import { inject, markRaw, ref, useTemplateRef } from 'vue';
+import { Clock, Close } from '@element-plus/icons-vue';
+
+import { getDesignConfig, TMagicButton, TMagicPopover, TMagicTabs, TMagicTooltip } from '@tmagic/design';
+import type { FormState } from '@tmagic/form';
+
+import MIcon from '@editor/components/Icon.vue';
+import { useServices } from '@editor/hooks/use-services';
+
+import CodeBlockTab from './CodeBlockTab.vue';
+import { useHistoryList } from './composables';
+import DataSourceTab from './DataSourceTab.vue';
+import HistoryDiffDialog from './HistoryDiffDialog.vue';
+import PageTab from './PageTab.vue';
+
+defineOptions({
+  name: 'MEditorHistoryListPanel',
+});
+
+const ClockIcon = markRaw(Clock);
+const CloseIcon = markRaw(Close);
+const activeTab = ref<'page' | 'data-source' | 'code-block'>('page');
+
+/** 面板显隐受控：reference 图标点击切换，右上角关闭按钮置为 false。 */
+const visible = ref(false);
+
+const tabPaneComponent = getDesignConfig('components')?.tabPane;
+
+const { editorService, dataSourceService, codeBlockService, historyService } = useServices();
+
+/**
+ * 通过 inject 拿到 Editor 顶层注入的 `extendFormState`，转交给 HistoryDiffDialog
+ * 内部的 CompareForm，使差异对比表单的 filterFunction 能拿到完整的业务上下文。
+ * 未提供时为 undefined，CompareForm/MForm 会跳过 extendState 处理。
+ */
+const extendFormState = inject<((_state: FormState) => Record<string, any> | Promise<Record<string, any>>) | undefined>(
+  'extendFormState',
+  undefined,
+);
+
+const {
+  expanded,
+  toggleGroup,
+  pageGroups,
+  dataSourceGroups,
+  codeBlockGroups,
+  pageGroupsDisplay,
+  dataSourceGroupsByTarget,
+  codeBlockGroupsByTarget,
+} = useHistoryList();
+
+/** 把"目标 step 索引"翻译成"目标 cursor"（已应用步骤数量）。 */
+const indexToCursor = (index: number) => index + 1;
+
+const onPageGoto = (index: number) => {
+  editorService.gotoPageStep(indexToCursor(index));
+};
+
+const onDataSourceGoto = (id: string | number, index: number) => {
+  dataSourceService.goto(id, indexToCursor(index));
+};
+
+const onCodeBlockGoto = (id: string | number, index: number) => {
+  codeBlockService.goto(id, indexToCursor(index));
+};
+
+/**
+ * "回到初始状态" = 把对应栈 cursor 移到 0（全部已撤销）。
+ * 复用 service.goto*(0) 即可，所有真实 step 的反向应用由 service 层的 undo 链路完成。
+ */
+const onPageGotoInitial = () => {
+  editorService.gotoPageStep(0);
+};
+
+const onDataSourceGotoInitial = (id: string | number) => {
+  dataSourceService.goto(id, 0);
+};
+
+const onCodeBlockGotoInitial = (id: string | number) => {
+  codeBlockService.goto(id, 0);
+};
+
+/**
+ * 「回滚」入口：把目标历史步骤的修改作为一次新操作反向应用（类 git revert），
+ * 不破坏原有栈结构。各 service 内部完成反向 + 入栈，并自带描述用于面板展示。
+ */
+const onPageRevert = (index: number) => {
+  editorService.revertPageStep(index);
+};
+
+const onDataSourceRevert = (id: string | number, index: number) => {
+  dataSourceService.revert(id, index);
+};
+
+const onCodeBlockRevert = (id: string | number, index: number) => {
+  codeBlockService.revert(id, index);
+};
+
+const diffDialogRef = useTemplateRef<InstanceType<typeof HistoryDiffDialog>>('diffDialog');
+
+/**
+ * 页面 step 差异：仅 update 单节点修改可对比，传入旧/新节点。
+ * 节点类型 `type` 优先取 newNode.type，再回退 oldNode.type。
+ * `currentValue` 取自 editorService 中该节点当前实际值，用于支持「与当前对比」。
+ */
+const onPageDiff = (index: number) => {
+  const groups = historyService.getPageHistoryGroups();
+  for (const group of groups) {
+    const entry = group.steps.find((s) => s.index === index);
+    if (!entry) continue;
+    const item = entry.step.updatedItems?.[0];
+    if (!item?.oldNode || !item?.newNode) return;
+    const type = (item.newNode.type as string) || (item.oldNode.type as string) || '';
+    const nodeId = item.newNode.id ?? item.oldNode.id;
+    const currentNode = nodeId !== undefined ? editorService.getNodeById(nodeId) : null;
+    diffDialogRef.value?.open({
+      category: 'node',
+      type,
+      lastValue: item.oldNode as Record<string, any>,
+      value: item.newNode as Record<string, any>,
+      currentValue: (currentNode as Record<string, any>) || null,
+      targetLabel: (item.newNode.name as string) || (item.oldNode.name as string) || type,
+      id: nodeId,
+    });
+    return;
+  }
+};
+
+const onDataSourceDiff = (id: string | number, index: number) => {
+  const groups = historyService.getDataSourceHistoryGroups();
+  for (const group of groups) {
+    if (group.id !== id) continue;
+    const entry = group.steps.find((s) => s.index === index);
+    if (!entry) continue;
+    const { oldSchema, newSchema } = entry.step;
+    if (!oldSchema || !newSchema) return;
+    const currentSchema = dataSourceService.getDataSourceById(`${id}`);
+    diffDialogRef.value?.open({
+      category: 'data-source',
+      type: newSchema.type || oldSchema.type || 'base',
+      lastValue: oldSchema as Record<string, any>,
+      value: newSchema as Record<string, any>,
+      currentValue: (currentSchema as Record<string, any>) || null,
+      targetLabel: newSchema.title || oldSchema.title || `${id}`,
+      id,
+    });
+    return;
+  }
+};
+
+const onCodeBlockDiff = (id: string | number, index: number) => {
+  const groups = historyService.getCodeBlockHistoryGroups();
+  for (const group of groups) {
+    if (group.id !== id) continue;
+    const entry = group.steps.find((s) => s.index === index);
+    if (!entry) continue;
+    const { oldContent, newContent } = entry.step;
+    if (!oldContent || !newContent) return;
+    const currentContent = codeBlockService.getCodeContentById(id);
+    diffDialogRef.value?.open({
+      category: 'code-block',
+      lastValue: oldContent as Record<string, any>,
+      value: newContent as Record<string, any>,
+      currentValue: (currentContent as Record<string, any>) || null,
+      targetLabel: newContent.name || oldContent.name || `${id}`,
+      id,
+    });
+    return;
+  }
+};
+</script>

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

@@ -0,0 +1,41 @@
+<template>
+  <li
+    class="m-editor-history-list-item m-editor-history-list-initial"
+    :class="{ 'is-current': isCurrent, 'is-clickable': !isCurrent }"
+    :title="isCurrent ? '当前已回到未修改的初始状态' : '点击回到未修改的初始状态'"
+    @click="onClick"
+  >
+    <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">未修改的初始状态</span>
+    <span v-if="isCurrent" class="m-editor-history-list-item-current">当前</span>
+  </li>
+</template>
+
+<script lang="ts" setup>
+/**
+ * 「初始状态」记录行：渲染于历史列表底部，作为整个栈的"零点"。
+ * - 点击该行会把对应栈撤销到 cursor === 0（即没有任何已应用步骤），等同于回到所有修改之前。
+ * - 当对应栈本身已处于 cursor === 0 时（isCurrent=true），用户已在初始状态，点击不再触发动作。
+ *
+ * 该行不是真实 step，仅作为 UI 入口；上层负责把"点击"翻译为 `service.goto*(0)`。
+ */
+defineOptions({
+  name: 'MEditorHistoryListInitialRow',
+});
+
+const props = defineProps<{
+  /** 当前对应栈是否已经处于初始状态 (cursor === 0)。true 时用蓝条高亮并禁用点击。 */
+  isCurrent: boolean;
+}>();
+
+const emit = defineEmits<{
+  /** 点击非当前的初始项时触发，由上层调用对应 service 的 goto 把 cursor 移到 0。 */
+  (_e: 'goto-initial'): void;
+}>();
+
+const onClick = () => {
+  if (props.isCurrent) return;
+  emit('goto-initial');
+};
+</script>

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

@@ -0,0 +1,94 @@
+<template>
+  <div v-if="!list.length" class="m-editor-history-list-empty">暂无操作记录</div>
+  <TMagicScrollbar v-else max-height="360px">
+    <ul class="m-editor-history-list-ul">
+      <GroupRow
+        v-for="(group, gIdx) in list"
+        :key="`pg-${gIdx}`"
+        :group-key="`pg-${gIdx}`"
+        :applied="group.applied"
+        :merged="group.steps.length > 1"
+        :op-type="group.opType"
+        :desc="describePageGroup(group)"
+        :step-count="group.steps.length"
+        :sub-steps="
+          group.steps.map((s) => ({
+            index: s.index,
+            applied: s.applied,
+            isCurrent: s.isCurrent,
+            desc: describePageStep(s.step),
+            diffable: isPageStepDiffable(s.step),
+            revertable: s.applied,
+          }))
+        "
+        :is-current="group.isCurrent"
+        :expanded="!!expanded[`pg-${gIdx}`]"
+        @toggle="(key: string) => $emit('toggle', key)"
+        @goto="(index: number) => $emit('goto', index)"
+        @diff-step="(index: number) => $emit('diff-step', index)"
+        @revert-step="(index: number) => $emit('revert-step', index)"
+      />
+      <!--
+        初始状态项：永远位于列表底部（页面 tab 倒序展示，最底部=最早），
+        作为"未修改"零点。当所有 group 都未 applied 时它即为当前位置。
+      -->
+      <InitialRow :is-current="isInitial" @goto-initial="$emit('goto-initial')" />
+    </ul>
+  </TMagicScrollbar>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { TMagicScrollbar } from '@tmagic/design';
+
+import type { PageHistoryGroup, StepValue } from '@editor/type';
+
+import { describePageGroup, describePageStep } from './composables';
+import GroupRow from './GroupRow.vue';
+import InitialRow from './InitialRow.vue';
+
+defineOptions({
+  name: 'MEditorHistoryListPageTab',
+});
+
+const props = defineProps<{
+  /** 当前活动页面的历史分组列表，已按时间倒序排好（最新一组在最前）。空数组时显示空态。 */
+  list: PageHistoryGroup[];
+  /** 共享的折叠状态表（key -> 是否展开），由顶层 panel 统一维护。本 tab 使用 `pg-${idx}` 作为 key。 */
+  expanded: Record<string, boolean>;
+}>();
+
+defineEmits<{
+  /** 透传 GroupRow 的 toggle 事件给上层 panel，由其更新 expanded。 */
+  (_e: 'toggle', _key: string): void;
+  /** 透传 GroupRow 的 goto 事件，携带目标 step 在栈中的索引。 */
+  (_e: 'goto', _index: number): void;
+  /** 用户点击初始项希望回到未修改的状态（cursor=0）。 */
+  (_e: 'goto-initial'): void;
+  /** 用户点击"查看差异"按钮，携带目标 step 在栈中的索引。 */
+  (_e: 'diff-step', _index: number): void;
+  /** 用户点击"回滚"按钮，携带目标 step 在栈中的索引，类 git revert。 */
+  (_e: 'revert-step', _index: number): void;
+}>();
+
+/**
+ * 当前 step 是否可查看差异：
+ * - 仅 update 操作；
+ * - 单节点更新（updatedItems.length === 1），且 oldNode / newNode 都存在。
+ * 多节点更新难以选定单一对比目标，统一不展示差异入口。
+ */
+const isPageStepDiffable = (step: StepValue): boolean => {
+  if (step.opType !== 'update') return false;
+  const items = step.updatedItems ?? [];
+  if (items.length !== 1) return false;
+  return Boolean(items[0]?.oldNode && items[0]?.newNode);
+};
+
+/**
+ * 是否处于"初始状态"——即对应页面历史栈 cursor===0：
+ * 当 list 中所有 group 的 applied 都为 false 时即为该状态。
+ * 没有任何 group 的情况由外层"暂无操作记录"分支兜底，本计算可以不考虑。
+ */
+const isInitial = computed(() => props.list.length > 0 && props.list.every((g) => !g.applied));
+</script>

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

@@ -0,0 +1,195 @@
+import { computed, reactive } from 'vue';
+
+import { useServices } from '@editor/hooks/use-services';
+import type {
+  CodeBlockHistoryGroup,
+  CodeBlockStepValue,
+  DataSourceHistoryGroup,
+  DataSourceStepValue,
+  HistoryOpType,
+  PageHistoryGroup,
+  StepValue,
+} from '@editor/type';
+
+/**
+ * 历史记录面板共享逻辑：
+ * - 暴露三类历史的聚合数据（页面 / 数据源 / 代码块）；
+ * - 提供折叠状态管理；
+ * - 提供操作描述文案生成器。
+ *
+ * 所有数据基于 historyService 的 reactive state 派生，自动跟随历史变化刷新。
+ */
+export const useHistoryList = () => {
+  const { historyService } = useServices();
+
+  /** 折叠状态：key 形如 `pg-${groupIdx}` / `ds-${id}-${groupIdx}` / `cb-${id}-${groupIdx}`。 */
+  const expanded = reactive<Record<string, boolean>>({});
+  const toggleGroup = (key: string) => {
+    expanded[key] = !expanded[key];
+  };
+
+  const pageGroups = computed(() => historyService.getPageHistoryGroups());
+  const dataSourceGroups = computed(() => historyService.getDataSourceHistoryGroups());
+  const codeBlockGroups = computed(() => historyService.getCodeBlockHistoryGroups());
+
+  /** 页面 tab 倒序展示（最新一组在最上面）。 */
+  const pageGroupsDisplay = computed(() => pageGroups.value.slice().reverse());
+
+  /**
+   * 把按时间正序的 group 列表，再按 id 聚拢成 bucket（同 id 的所有分组放一起）。
+   * 每个 bucket 内部仍然按时间倒序展示（最近的操作最先看到）。
+   */
+  const groupByTarget = <G extends { id: string | number }>(groups: G[]) => {
+    const map = new Map<string | number, G[]>();
+    groups.forEach((g) => {
+      const list = map.get(g.id) ?? [];
+      list.push(g);
+      map.set(g.id, list);
+    });
+    return Array.from(map.entries()).map(([id, gs]) => ({ id, groups: gs.slice().reverse() }));
+  };
+
+  const dataSourceGroupsByTarget = computed(() => groupByTarget(dataSourceGroups.value));
+  const codeBlockGroupsByTarget = computed(() => groupByTarget(codeBlockGroups.value));
+
+  return {
+    expanded,
+    toggleGroup,
+    pageGroups,
+    dataSourceGroups,
+    codeBlockGroups,
+    pageGroupsDisplay,
+    dataSourceGroupsByTarget,
+    codeBlockGroupsByTarget,
+  };
+};
+
+export const opLabel = (op: HistoryOpType) => {
+  switch (op) {
+    case 'add':
+      return '新增';
+    case 'remove':
+      return '删除';
+    case 'update':
+    default:
+      return '修改';
+  }
+};
+
+const nameOf = (node: { name?: string; id?: string | number; type?: string }) =>
+  node?.name || node?.type || `${node?.id ?? ''}`;
+
+/**
+ * 默认描述里展示「名称 (id: xxx)」，便于区分同名实体。
+ * - 当未传入 id，或 label 本身就是 id 字符串（即没有 name/type/title 可用）时，仅展示 label，避免出现「123 (id: 123)」。
+ */
+const labelWithId = (label: string | number | undefined, id: string | number | undefined): string => {
+  const labelStr = label === undefined || label === null ? '' : `${label}`;
+  if (id === undefined || id === null || id === '') return labelStr;
+  if (labelStr === '' || labelStr === `${id}`) return `${id}`;
+  return `${labelStr} (id: ${id})`;
+};
+
+/** 从一组可选 historyDescription 中取最后一条非空值；都为空时返回 undefined。 */
+const pickLastDescription = (descs: (string | undefined)[]): string | undefined => {
+  for (let i = descs.length - 1; i >= 0; i--) {
+    if (descs[i]) return descs[i];
+  }
+  return undefined;
+};
+
+export const describePageStep = (step: StepValue) => {
+  if (step.historyDescription) return step.historyDescription;
+  const { opType } = step;
+  if (opType === 'add') {
+    const count = step.nodes?.length ?? 0;
+    const node = step.nodes?.[0];
+    return `新增 ${count} 个节点${count === 1 && node ? `（${labelWithId(nameOf(node), node.id)}）` : ''}`;
+  }
+  if (opType === 'remove') {
+    const count = step.removedItems?.length ?? 0;
+    const node = step.removedItems?.[0]?.node;
+    return `删除 ${count} 个节点${count === 1 && node ? `（${labelWithId(nameOf(node), node.id)}）` : ''}`;
+  }
+  const updated = step.updatedItems ?? [];
+  if (!updated.length) return '修改节点';
+  if (updated.length === 1) {
+    const { newNode, changeRecords } = updated[0];
+    const propPath = changeRecords?.[0]?.propPath;
+    const target = labelWithId(nameOf(newNode), newNode?.id);
+    return `修改 ${target}${propPath ? ` · ${propPath}` : ''}`;
+  }
+  return `修改 ${updated.length} 个节点`;
+};
+
+/**
+ * 合并组的展示文案：
+ * - 若组内任一步显式提供了 historyDescription：取最后一条非空 historyDescription（最近一次的描述更准确）；
+ * - 单步组：复用 describePageStep；
+ * - 多步组（连续修改同一节点）：展示节点名 + 涉及的前几个 propPath。
+ */
+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.updatedItems?.[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;
+  if (step.oldSchema === null && step.newSchema)
+    return `创建 ${labelWithId(step.newSchema.title, step.newSchema.id ?? step.id)}`;
+  if (step.newSchema === null && step.oldSchema)
+    return `删除 ${labelWithId(step.oldSchema.title, step.oldSchema.id ?? step.id)}`;
+  const propPath = step.changeRecords?.[0]?.propPath;
+  const title = labelWithId(step.newSchema?.title || step.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.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.newSchema?.title || group.steps[0].step.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;
+  if (step.oldContent === null && step.newContent)
+    return `创建 ${labelWithId(step.newContent.name, step.newContent.id ?? step.id)}`;
+  if (step.newContent === null && step.oldContent)
+    return `删除 ${labelWithId(step.oldContent.name, step.oldContent.id ?? step.id)}`;
+  const propPath = step.changeRecords?.[0]?.propPath;
+  const title = labelWithId(step.newContent?.name || step.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.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.newContent?.name || group.steps[0].step.oldContent?.name;
+  const target = labelWithId(rawName, group.id);
+  return pathList ? `修改 ${target} · ${pathList}${paths.size > 3 ? '…' : ''}` : `修改 ${target}`;
+};

package/src/layouts/sidebar/layer/use-node-status.ts

@@ -9,12 +9,15 @@ import { updateStatus } from '@editor/utils/tree';
 const createPageNodeStatus = (page: MPage | MPageFragment, initialLayerNodeStatus?: Map<Id, LayerNodeStatus>) => {
   const map = new Map<Id, LayerNodeStatus>();
 
-  map.set(page.id, {
-    visible: true,
-    expand: true,
-    selected: true,
-    draggable: false,
-  });
+  map.set(
+    page.id,
+    initialLayerNodeStatus?.get(page.id) || {
+      visible: true,
+      expand: true,
+      selected: true,
+      draggable: false,
+    },
+  );
 
   page.items.forEach((node: MNode) =>
     traverseNode<MNode>(node, (node) => {