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

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

@@ -0,0 +1,212 @@
+<template>
+  <Teleport to="body">
+    <TMagicDialog
+      v-model="visible"
+      class="m-editor-history-diff-dialog"
+      title="查看修改差异"
+      width="900px"
+      top="5vh"
+      destroy-on-close
+      append-to-body
+    >
+      <div v-if="payload" class="m-editor-history-diff-dialog-body">
+        <div class="m-editor-history-diff-dialog-header">
+          <span class="m-editor-history-diff-dialog-target">{{ targetText }}</span>
+          <div class="m-editor-history-diff-dialog-controls">
+            <TMagicRadioGroup v-model="viewMode" size="small" class="m-editor-history-diff-dialog-view">
+              <TMagicRadioButton value="form">表单对比</TMagicRadioButton>
+              <TMagicRadioButton value="code">源码对比</TMagicRadioButton>
+            </TMagicRadioGroup>
+
+            <TMagicRadioGroup v-model="mode" size="small" class="m-editor-history-diff-dialog-mode">
+              <TMagicRadioButton value="before">与修改前对比</TMagicRadioButton>
+              <TMagicRadioButton value="current" :disabled="!hasCurrent">与当前对比</TMagicRadioButton>
+            </TMagicRadioGroup>
+          </div>
+        </div>
+
+        <div class="m-editor-history-diff-dialog-legend">
+          <TMagicTag size="small" type="danger">{{ leftLabel }}</TMagicTag>
+          <span class="m-editor-history-diff-dialog-arrow">→</span>
+          <TMagicTag size="small" type="success">{{ rightLabel }}</TMagicTag>
+          <span v-if="mode === 'current' && isSameAsCurrent" class="m-editor-history-diff-dialog-tip">
+            当前值与该步修改后一致，无差异
+          </span>
+        </div>
+
+        <CompareForm
+          v-if="viewMode === 'form'"
+          :category="payload.category"
+          :type="payload.type"
+          :data-source-type="payload.dataSourceType"
+          :value="rightValue"
+          :last-value="leftValue"
+          :extend-state="extendState"
+          height="70vh"
+        />
+
+        <CodeEditor
+          v-else
+          type="diff"
+          language="json"
+          :init-values="leftValue"
+          :modified-values="rightValue"
+          :options="codeDiffOptions"
+          disabled-full-screen
+          height="70vh"
+        />
+      </div>
+
+      <template #footer>
+        <TMagicButton size="small" @click="visible = false">关闭</TMagicButton>
+      </template>
+    </TMagicDialog>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import { isEqual } from 'lodash-es';
+
+import { TMagicButton, TMagicDialog, TMagicRadioButton, TMagicRadioGroup, TMagicTag } from '@tmagic/design';
+import type { FormState } from '@tmagic/form';
+
+import CompareForm, { type CompareCategory } from '@editor/components/CompareForm.vue';
+import CodeEditor from '@editor/layouts/CodeEditor.vue';
+
+defineOptions({
+  name: 'MEditorHistoryDiffDialog',
+});
+
+defineProps<{
+  /**
+   * 来自 Editor 顶层的 `extendFormState`，用于扩展 MForm.formState。
+   * 透传给 CompareForm，从而让差异对比时表单 item 中依赖业务上下文的
+   * `display` / `disabled` 等 filterFunction 正常工作。
+   */
+  extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+}>();
+
+/** 差异对话框的入参 */
+export interface DiffDialogPayload {
+  /** 表单类别 */
+  category: CompareCategory;
+  /** 节点类型 / 数据源类型 */
+  type?: string;
+  /** 代码块场景下的数据源类型 */
+  dataSourceType?: string;
+  /** 该 step 修改前的值（oldNode / oldSchema / oldContent） */
+  lastValue: Record<string, any>;
+  /** 该 step 修改后的值（newNode / newSchema / newContent） */
+  value: Record<string, any>;
+  /** 当前编辑器中实际的最新值；不传或为 null 时禁用「与当前对比」 */
+  currentValue?: Record<string, any> | null;
+  /** 用于标题展示的目标名称 */
+  targetLabel?: string;
+  /** 用于标题展示的目标 id */
+  id?: string | number;
+}
+
+/**
+ * 差异对比模式：
+ * - before：该步骤修改前 vs 该步骤修改后（默认行为，体现这一步带来的变化）
+ * - current：该步骤修改后 vs 当前最新值（用于查看「该步骤之后是否还被改过」）
+ */
+type DiffMode = 'before' | 'current';
+
+/**
+ * 展示形态：
+ * - form：以属性表单形式逐字段对比（默认，可读性更好）
+ * - code：以 JSON 源码形式做整体 diff（贴近"看原始数据差异"，可看到表单未覆盖的字段）
+ */
+type ViewMode = 'form' | 'code';
+
+const visible = ref(false);
+const payload = ref<DiffDialogPayload | null>(null);
+const mode = ref<DiffMode>('before');
+const viewMode = ref<ViewMode>('form');
+
+/**
+ * 源码对比始终只读，关闭小地图，强制左右并排（side-by-side）展示。
+ *
+ * monaco diff 编辑器在宽度低于 `renderSideBySideInlineBreakpoint`（默认 900px）时
+ * 会自动退化为 inline（上下/单栏）视图。本弹窗宽度约 900px，去掉内边距后编辑器实际
+ * 宽度小于该阈值，会被切到 inline。这里通过 `useInlineViewWhenSpaceIsLimited: false`
+ * 关闭该自动降级，确保始终保持左右两栏对比。
+ */
+const codeDiffOptions = {
+  readOnly: true,
+  tabSize: 2,
+  minimap: { enabled: false },
+  renderSideBySide: true,
+  useInlineViewWhenSpaceIsLimited: false,
+  scrollBeyondLastLine: false,
+  hideUnchangedRegions: {
+    enabled: true,
+  },
+};
+
+const hasCurrent = computed(() => payload.value?.currentValue !== undefined && payload.value?.currentValue !== null);
+
+/** 左侧（旧/参照）值 */
+const leftValue = computed<Record<string, any>>(() => {
+  if (!payload.value) return {};
+  if (mode.value === 'current') return payload.value.value;
+  return payload.value.lastValue;
+});
+
+/** 右侧（新/对比）值 */
+const rightValue = computed<Record<string, any>>(() => {
+  if (!payload.value) return {};
+  if (mode.value === 'current') return payload.value.currentValue || {};
+  return payload.value.value;
+});
+
+const leftLabel = computed(() => (mode.value === 'current' ? '该步修改后' : '修改前'));
+const rightLabel = computed(() => (mode.value === 'current' ? '当前' : '修改后'));
+
+/** 「与当前对比」模式下，若当前值与该步修改后值相等，则展示提示 */
+const isSameAsCurrent = computed(() => {
+  if (mode.value !== 'current' || !payload.value) return false;
+  return isEqual(payload.value.value, payload.value.currentValue);
+});
+
+const targetText = computed(() => {
+  if (!payload.value) return '';
+  const categoryText: Record<CompareCategory, string> = {
+    node: '节点',
+    'data-source': '数据源',
+    'code-block': '代码块',
+  };
+  const prefix = categoryText[payload.value.category] || '';
+  const label = payload.value.targetLabel || payload.value.type || '';
+  const { id } = payload.value;
+  const labelWithId = id !== undefined && id !== '' ? `${label}（${id}）` : label;
+  return [prefix, labelWithId].filter(Boolean).join('：');
+});
+
+const open = (p: DiffDialogPayload) => {
+  payload.value = p;
+  // 每次打开按需重置默认模式：有当前值时优先「与当前对比」更贴近"看现在差什么"，否则回退到默认
+  mode.value = 'before';
+  // 默认回到表单对比形态，避免残留上一次选择的源码模式
+  viewMode.value = 'form';
+  visible.value = true;
+};
+
+const close = () => {
+  visible.value = false;
+};
+
+// 关闭后清理 payload，避免下一次打开时残留旧值闪现
+watch(visible, (v) => {
+  if (!v) {
+    payload.value = null;
+  }
+});
+
+defineExpose({
+  open,
+  close,
+});
+</script>

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>