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

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

@@ -0,0 +1,231 @@
+<template>
+  <Teleport to="body">
+    <TMagicDialog
+      v-model="visible"
+      class="m-editor-history-diff-dialog"
+      :title="dialogTitle"
+      top="5vh"
+      destroy-on-close
+      append-to-body
+      :width="width"
+      @close="onClose"
+    >
+      <div v-if="payload" class="m-editor-history-diff-dialog-body">
+        <div v-if="onConfirm" class="m-editor-history-diff-dialog-notice">仅回滚有差异的字段</div>
+
+        <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"
+          :load-config="loadConfig"
+          :self-diff-field-types="selfDiffFieldTypes"
+          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>
+        <template v-if="onConfirm">
+          <TMagicButton size="small" @click="visible = false">取消</TMagicButton>
+          <TMagicButton size="small" type="primary" @click="onConfirmClick">确定回滚</TMagicButton>
+        </template>
+        <TMagicButton v-else 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 from '@editor/components/CompareForm.vue';
+import CodeEditor from '@editor/layouts/CodeEditor.vue';
+import type { CompareCategory, CompareFormLoadConfig, DiffDialogPayload } from '@editor/type';
+
+defineOptions({
+  name: 'MEditorHistoryDiffDialog',
+});
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * 来自 Editor 顶层的 `extendFormState`，用于扩展 MForm.formState。
+     * 透传给 CompareForm，从而让差异对比时表单 item 中依赖业务上下文的
+     * `display` / `disabled` 等 filterFunction 正常工作。
+     */
+    extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+    /**
+     * 自定义 FormConfig 加载逻辑，透传给 CompareForm。传入后将接管内置的按 `category`
+     * 取配置逻辑，可通过 `ctx.defaultLoadConfig()` 复用默认结果再做二次加工。
+     */
+    loadConfig?: CompareFormLoadConfig;
+    width?: string;
+    onConfirm?: () => void;
+    selfDiffFieldTypes?: string[];
+  }>(),
+  {
+    width: '900px',
+  },
+);
+
+const emit = defineEmits(['close']);
+
+/**
+ * 差异对比模式：
+ * - 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 dialogTitle = computed(() => (props.onConfirm ? '确认回滚' : '查看修改差异'));
+
+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 onConfirmClick = () => {
+  const cb = props.onConfirm;
+
+  cb?.();
+
+  visible.value = false;
+};
+
+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;
+  }
+});
+
+const onClose = () => {
+  emit('close');
+};
+
+defineExpose({
+  open,
+  close,
+});
+</script>

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

@@ -0,0 +1,380 @@
+<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
+          v-if="!disabledDataSource"
+          :is="tabPaneComponent?.component || 'el-tab-pane'"
+          v-bind="tabPaneComponent?.props({ name: 'data-source', label: `数据源 (${dataSourceGroups.length})` }) || {}"
+        >
+          <BucketTab
+            title="数据源"
+            prefix="ds"
+            :buckets="dataSourceGroupsByTarget"
+            :expanded="expanded"
+            :describe-group="describeDataSourceGroup"
+            :describe-step="describeDataSourceStep"
+            :is-step-diffable="isDataSourceStepDiffable"
+            @toggle="toggleGroup"
+            @goto="onDataSourceGoto"
+            @goto-initial="onDataSourceGotoInitial"
+            @diff-step="onDataSourceDiff"
+            @revert-step="onDataSourceRevert"
+          />
+        </component>
+
+        <component
+          v-if="!disabledCodeBlock"
+          :is="tabPaneComponent?.component || 'el-tab-pane'"
+          v-bind="tabPaneComponent?.props({ name: 'code-block', label: `代码块 (${codeBlockGroups.length})` }) || {}"
+        >
+          <BucketTab
+            title="代码块"
+            prefix="cb"
+            :buckets="codeBlockGroupsByTarget"
+            :expanded="expanded"
+            :describe-group="describeCodeBlockGroup"
+            :describe-step="describeCodeBlockStep"
+            :is-step-diffable="isCodeBlockStepDiffable"
+            @toggle="toggleGroup"
+            @goto="onCodeBlockGoto"
+            @goto-initial="onCodeBlockGotoInitial"
+            @diff-step="onCodeBlockDiff"
+            @revert-step="onCodeBlockRevert"
+          />
+        </component>
+
+        <component
+          v-for="tab in extraTabs"
+          :key="tab.name"
+          :is="tabPaneComponent?.component || 'el-tab-pane'"
+          v-bind="tabPaneComponent?.props({ name: tab.name, label: resolveTabLabel(tab) }) || {}"
+        >
+          <component :is="tab.component" v-bind="tab.props || {}" v-on="tab.listeners || {}" />
+        </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"
+    :on-confirm="onConfirmRevert"
+    @close="onDiffDialogClose"
+  />
+</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，数据源 / 代码块复用通用的 BucketTab
+ * （通过 title / prefix / describe* / isStepDiffable 注入差异）。
+ * 共享的描述生成与折叠状态在 composables.ts 中维护。
+ */
+import { computed, inject, markRaw, ref, shallowRef, useTemplateRef, watch } 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 type { CodeBlockStepValue, DataSourceStepValue, DiffDialogPayload, HistoryListExtraTab } from '@editor/type';
+
+import BucketTab from './BucketTab.vue';
+import {
+  describeCodeBlockGroup,
+  describeCodeBlockStep,
+  describeDataSourceGroup,
+  describeDataSourceStep,
+  useHistoryList,
+} from './composables';
+import HistoryDiffDialog from './HistoryDiffDialog.vue';
+import PageTab from './PageTab.vue';
+
+defineOptions({
+  name: 'MEditorHistoryListPanel',
+});
+
+const ClockIcon = markRaw(Clock);
+const CloseIcon = markRaw(Close);
+const activeTab = ref<string>('page');
+
+/** 面板显隐受控：reference 图标点击切换，右上角关闭按钮置为 false。 */
+const visible = ref(false);
+
+const tabPaneComponent = getDesignConfig('components')?.tabPane;
+
+/**
+ * 业务方自定义的扩展 tab，由 Editor 顶层通过 `historyListExtraTabs` 注入。
+ * 追加在内置「页面 / 数据源 / 代码块」三个 tab 之后，未提供时为空数组。
+ */
+const extraTabs = inject<HistoryListExtraTab[]>('historyListExtraTabs', []);
+
+/** label 支持字符串或函数，函数形式便于展示动态数量等内容。 */
+const resolveTabLabel = (tab: HistoryListExtraTab) => (typeof tab.label === 'function' ? tab.label() : tab.label);
+
+const { editorService, dataSourceService, codeBlockService, historyService, propsService } = useServices();
+
+/**
+ * 数据源 / 代码块功能可被业务方通过 `disabledDataSource` / `disabledCodeBlock` 禁用，
+ * 禁用后对应的历史记录 tab 不再展示。若当前激活的 tab 恰好被禁用，则回退到「页面」tab。
+ */
+const disabledDataSource = computed(() => propsService.getDisabledDataSource());
+const disabledCodeBlock = computed(() => propsService.getDisabledCodeBlock());
+
+watch([disabledDataSource, disabledCodeBlock], ([dsDisabled, cbDisabled]) => {
+  if ((activeTab.value === 'data-source' && dsDisabled) || (activeTab.value === 'code-block' && cbDisabled)) {
+    activeTab.value = 'page';
+  }
+});
+
+/**
+ * 通过 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 仅 update（前后 schema 都存在）时可查看差异。 */
+const isDataSourceStepDiffable = (step: DataSourceStepValue) => Boolean(step.oldSchema && step.newSchema);
+
+/** 代码块 step 仅 update（前后 content 都存在）时可查看差异。 */
+const isCodeBlockStepDiffable = (step: CodeBlockStepValue) => Boolean(step.oldContent && step.newContent);
+
+/** 把"目标 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);
+};
+
+const diffDialogRef = useTemplateRef<InstanceType<typeof HistoryDiffDialog>>('diffDialog');
+
+/**
+ * 构造页面 step 的差异弹窗入参：仅 update 单节点修改可对比，传入旧/新节点。
+ * 节点类型 `type` 优先取 newNode.type，再回退 oldNode.type。
+ * `currentValue` 取自 editorService 中该节点当前实际值，用于支持「与当前对比」。
+ * 无可对比内容（如多节点 / add / remove）时返回 null。
+ */
+const buildPageDiffPayload = (index: number): DiffDialogPayload | null => {
+  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 null;
+    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;
+    return {
+      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 null;
+};
+
+/**
+ * 在指定分组列表中按 id / index 查找命中的 step，命中后交由 build 构造差异弹窗入参。
+ * 用于统一数据源、代码块两类历史的查找逻辑。
+ */
+const findGroupStep = <G extends { id: string | number; steps: { index: number; step: any }[] }>(
+  groups: G[],
+  id: string | number,
+  index: number,
+  build: (_step: G['steps'][number]['step']) => DiffDialogPayload | null,
+): DiffDialogPayload | null => {
+  for (const group of groups) {
+    if (group.id !== id) continue;
+    const entry = group.steps.find((s) => s.index === index);
+    if (!entry) continue;
+    return build(entry.step);
+  }
+  return null;
+};
+
+const buildDataSourceDiffPayload = (id: string | number, index: number): DiffDialogPayload | null =>
+  findGroupStep(historyService.getDataSourceHistoryGroups(), id, index, ({ oldSchema, newSchema }) => {
+    if (!oldSchema || !newSchema) return null;
+    const currentSchema = dataSourceService.getDataSourceById(`${id}`);
+    return {
+      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,
+    };
+  });
+
+const buildCodeBlockDiffPayload = (id: string | number, index: number): DiffDialogPayload | null =>
+  findGroupStep(historyService.getCodeBlockHistoryGroups(), id, index, ({ oldContent, newContent }) => {
+    if (!oldContent || !newContent) return null;
+    const currentContent = codeBlockService.getCodeContentById(id);
+    return {
+      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,
+    };
+  });
+
+const onPageDiff = (index: number) => {
+  const payload = buildPageDiffPayload(index);
+  if (payload) diffDialogRef.value?.open(payload);
+};
+
+const onDataSourceDiff = (id: string | number, index: number) => {
+  const payload = buildDataSourceDiffPayload(id, index);
+  if (payload) diffDialogRef.value?.open(payload);
+};
+
+const onCodeBlockDiff = (id: string | number, index: number) => {
+  const payload = buildCodeBlockDiffPayload(id, index);
+  if (payload) diffDialogRef.value?.open(payload);
+};
+
+const onConfirmRevert = shallowRef();
+
+/**
+ * 「回滚」入口：把目标历史步骤的修改作为一次新操作反向应用（类 git revert），
+ * 不破坏原有栈结构。各 service 内部完成反向 + 入栈，并自带描述用于面板展示。
+ *
+ * 交互：先弹出该步骤的差异弹窗供用户确认，点击「确定回滚」后再真正执行回滚；
+ * 对没有可对比内容的步骤（如 add / remove / 多节点更新）则直接回滚。
+ */
+const onPageRevert = (index: number) => {
+  const payload = buildPageDiffPayload(index);
+  onConfirmRevert.value = () => editorService.revertPageStep(index);
+  if (payload) {
+    diffDialogRef.value?.open({ ...payload });
+  } else {
+    onConfirmRevert.value();
+  }
+};
+
+const onDataSourceRevert = (id: string | number, index: number) => {
+  const payload = buildDataSourceDiffPayload(id, index);
+  onConfirmRevert.value = () => dataSourceService.revert(id, index);
+  if (payload) {
+    diffDialogRef.value?.open({ ...payload });
+  } else {
+    onConfirmRevert.value();
+  }
+};
+
+const onCodeBlockRevert = (id: string | number, index: number) => {
+  const payload = buildCodeBlockDiffPayload(id, index);
+  onConfirmRevert.value = () => codeBlockService.revert(id, index);
+  if (payload) {
+    diffDialogRef.value?.open({ ...payload });
+  } else {
+    onConfirmRevert.value();
+  }
+};
+
+const onDiffDialogClose = () => {
+  onConfirmRevert.value = undefined;
+};
+</script>

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

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