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

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

@@ -0,0 +1,61 @@
+<template>
+  <div v-if="!buckets.length" class="m-editor-history-list-empty">暂无操作记录</div>
+  <TMagicScrollbar v-else max-height="360px">
+    <Bucket
+      v-for="bucket in buckets"
+      :key="`cb-${bucket.id}`"
+      title="代码块"
+      :bucket-id="bucket.id"
+      prefix="cb"
+      :groups="bucket.groups"
+      :describe-group="describeCodeBlockGroup"
+      :describe-step="describeCodeBlockStep"
+      :is-step-diffable="isCodeBlockStepDiffable"
+      :expanded="expanded"
+      @toggle="(key: string) => $emit('toggle', key)"
+      @goto="(id: string | number, index: number) => $emit('goto', id, index)"
+      @goto-initial="(id: string | number) => $emit('goto-initial', id)"
+      @diff-step="(id: string | number, index: number) => $emit('diff-step', id, index)"
+      @revert-step="(id: string | number, index: number) => $emit('revert-step', id, index)"
+    />
+  </TMagicScrollbar>
+</template>
+
+<script lang="ts" setup>
+import { TMagicScrollbar } from '@tmagic/design';
+
+import type { CodeBlockHistoryGroup, CodeBlockStepValue } from '@editor/type';
+
+import Bucket from './Bucket.vue';
+import { describeCodeBlockGroup, describeCodeBlockStep } from './composables';
+
+defineOptions({
+  name: 'MEditorHistoryListCodeBlockTab',
+});
+
+defineProps<{
+  /**
+   * 已按 codeBlock.id 聚拢成的 bucket 列表，每个 bucket 内部的 groups 已按时间倒序排好。
+   * 空数组时显示空态。
+   */
+  buckets: { id: string | number; groups: CodeBlockHistoryGroup[] }[];
+  /** 共享的折叠状态表（key -> 是否展开），由顶层 panel 统一维护。本 tab 使用 `cb-${id}-${idx}` 作为 key。 */
+  expanded: Record<string, boolean>;
+}>();
+
+defineEmits<{
+  /** 透传子组件 Bucket 的 toggle 事件给上层 panel，由其更新 expanded。 */
+  (_e: 'toggle', _key: string): void;
+  /** 透传 Bucket 的 goto 事件，携带 codeBlock id 与目标 step 索引。 */
+  (_e: 'goto', _codeBlockId: string | number, _index: number): void;
+  /** 透传 Bucket 的 goto-initial 事件，携带 codeBlock id（回到该代码块未修改时的状态）。 */
+  (_e: 'goto-initial', _codeBlockId: string | number): void;
+  /** 透传 Bucket 的 diff-step 事件，携带 codeBlock id 与 step 索引。 */
+  (_e: 'diff-step', _codeBlockId: string | number, _index: number): void;
+  /** 透传 Bucket 的 revert-step 事件，携带 codeBlock id 与 step 索引（类 git revert）。 */
+  (_e: 'revert-step', _codeBlockId: string | number, _index: number): void;
+}>();
+
+/** 仅 update（前后 content 都存在）时可查看差异。 */
+const isCodeBlockStepDiffable = (step: CodeBlockStepValue) => Boolean(step.oldContent && step.newContent);
+</script>

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

@@ -0,0 +1,61 @@
+<template>
+  <div v-if="!buckets.length" class="m-editor-history-list-empty">暂无操作记录</div>
+  <TMagicScrollbar v-else max-height="360px">
+    <Bucket
+      v-for="bucket in buckets"
+      :key="`ds-${bucket.id}`"
+      title="数据源"
+      :bucket-id="bucket.id"
+      prefix="ds"
+      :groups="bucket.groups"
+      :describe-group="describeDataSourceGroup"
+      :describe-step="describeDataSourceStep"
+      :is-step-diffable="isDataSourceStepDiffable"
+      :expanded="expanded"
+      @toggle="(key: string) => $emit('toggle', key)"
+      @goto="(id: string | number, index: number) => $emit('goto', id, index)"
+      @goto-initial="(id: string | number) => $emit('goto-initial', id)"
+      @diff-step="(id: string | number, index: number) => $emit('diff-step', id, index)"
+      @revert-step="(id: string | number, index: number) => $emit('revert-step', id, index)"
+    />
+  </TMagicScrollbar>
+</template>
+
+<script lang="ts" setup>
+import { TMagicScrollbar } from '@tmagic/design';
+
+import type { DataSourceHistoryGroup, DataSourceStepValue } from '@editor/type';
+
+import Bucket from './Bucket.vue';
+import { describeDataSourceGroup, describeDataSourceStep } from './composables';
+
+defineOptions({
+  name: 'MEditorHistoryListDataSourceTab',
+});
+
+defineProps<{
+  /**
+   * 已按 dataSource.id 聚拢成的 bucket 列表，每个 bucket 内部的 groups 已按时间倒序排好。
+   * 空数组时显示空态。
+   */
+  buckets: { id: string | number; groups: DataSourceHistoryGroup[] }[];
+  /** 共享的折叠状态表（key -> 是否展开），由顶层 panel 统一维护。本 tab 使用 `ds-${id}-${idx}` 作为 key。 */
+  expanded: Record<string, boolean>;
+}>();
+
+defineEmits<{
+  /** 透传子组件 Bucket 的 toggle 事件给上层 panel，由其更新 expanded。 */
+  (_e: 'toggle', _key: string): void;
+  /** 透传 Bucket 的 goto 事件，携带 dataSource id 与目标 step 索引。 */
+  (_e: 'goto', _dataSourceId: string | number, _index: number): void;
+  /** 透传 Bucket 的 goto-initial 事件，携带 dataSource id（回到该数据源未修改时的状态）。 */
+  (_e: 'goto-initial', _dataSourceId: string | number): void;
+  /** 透传 Bucket 的 diff-step 事件，携带 dataSource id 与 step 索引。 */
+  (_e: 'diff-step', _dataSourceId: string | number, _index: number): void;
+  /** 透传 Bucket 的 revert-step 事件，携带 dataSource id 与 step 索引（类 git revert）。 */
+  (_e: 'revert-step', _dataSourceId: string | number, _index: number): void;
+}>();
+
+/** 仅 update（前后 schema 都存在）时可查看差异。 */
+const isDataSourceStepDiffable = (step: DataSourceStepValue) => Boolean(step.oldSchema && step.newSchema);
+</script>

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

@@ -0,0 +1,207 @@
+<template>
+  <li
+    class="m-editor-history-list-item m-editor-history-list-group"
+    :class="{ 'is-undone': !applied, 'is-merged': merged, 'is-current': isCurrent }"
+  >
+    <div
+      class="m-editor-history-list-group-head"
+      :class="{ 'is-clickable': isHeadClickable }"
+      :title="headTitle"
+      @click="onHeadClick"
+    >
+      <span class="m-editor-history-list-item-index" :title="headIndexTitle">{{ headIndexLabel }}</span>
+      <span class="m-editor-history-list-item-op" :class="`op-${opType}`">{{ opLabel(opType) }}</span>
+      <span class="m-editor-history-list-item-desc">{{ desc }}</span>
+      <span v-if="isCurrent" class="m-editor-history-list-item-current">当前</span>
+      <span
+        v-if="!merged && headDiffable"
+        class="m-editor-history-list-item-diff"
+        title="查看修改差异"
+        @click.stop="onDiffClick(subSteps[0].index)"
+        >查看差异</span
+      >
+      <span v-if="merged" class="m-editor-history-list-item-merge">合并 {{ stepCount }} 步</span>
+      <span
+        v-if="!merged && headRevertable"
+        class="m-editor-history-list-item-revert"
+        title="将该步骤的修改作为一次新操作反向应用（不影响后续历史）"
+        @click.stop="onRevertClick(subSteps[0].index)"
+        >回滚</span
+      >
+      <span v-if="merged" class="m-editor-history-list-group-toggle" :class="{ 'is-expanded': expanded }">▾</span>
+    </div>
+
+    <ul v-if="merged && expanded" class="m-editor-history-list-substeps">
+      <li
+        v-for="s in subStepsDisplay"
+        :key="s.index"
+        :class="{ 'is-undone': !s.applied, 'is-current': s.isCurrent, 'is-clickable': !s.isCurrent }"
+        :title="s.isCurrent ? '当前所在记录' : '点击跳转到该记录'"
+        @click="onSubStepClick(s)"
+      >
+        <span class="m-editor-history-list-item-index">#{{ s.index + 1 }}</span>
+        <span class="m-editor-history-list-substep-desc">{{ s.desc }}</span>
+        <span v-if="s.isCurrent" class="m-editor-history-list-item-current">当前</span>
+        <span
+          v-if="s.diffable"
+          class="m-editor-history-list-item-diff"
+          title="查看修改差异"
+          @click.stop="onDiffClick(s.index)"
+          >查看差异</span
+        >
+        <span
+          v-if="s.revertable"
+          class="m-editor-history-list-item-revert"
+          title="将该步骤的修改作为一次新操作反向应用（不影响后续历史）"
+          @click.stop="onRevertClick(s.index)"
+          >回滚</span
+        >
+      </li>
+    </ul>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import type { HistoryOpType } from '@editor/type';
+
+import { opLabel } from './composables';
+
+defineOptions({
+  name: 'MEditorHistoryListGroupRow',
+});
+
+const props = defineProps<{
+  /** 唯一标识当前组的 key，作为 toggle 事件的 payload 回传给上层。形如 `pg-${idx}` / `ds-${id}-${idx}` / `cb-${id}-${idx}`。 */
+  groupKey: string;
+  /** 该组当前是否处于已应用状态（false 表示已被 undo 撤销，UI 会显示为灰态）。 */
+  applied: boolean;
+  /** 是否为合并组（即组内 step 数大于 1，由多次连续操作合并而来）。决定是否展示合并标记与可展开的子步列表。 */
+  merged: boolean;
+  /** 操作类型：`add` / `remove` / `update`，用于决定操作徽标的颜色和文案。 */
+  opType: HistoryOpType;
+  /** 组的整体描述文案，由上层根据 step / group 计算后传入，例如 "修改 button · style.color"。 */
+  desc: string;
+  /** 组内的 step 总数，仅在 merged 为 true 时显示为 "合并 N 步"。 */
+  stepCount: number;
+  /** 子步列表，用于在展开状态下逐条展示每个 step 的索引、应用状态与描述文案。 */
+  subSteps: {
+    index: number;
+    applied: boolean;
+    desc: string;
+    isCurrent?: boolean;
+    diffable?: boolean;
+    /** 是否可对该子步执行「回滚」（已应用 + 业务侧确认支持反向）。父级根据 step 与 applied 决定。 */
+    revertable?: boolean;
+  }[];
+  /** 当前组是否处于展开状态。仅在 merged 为 true 时生效，控制子步列表是否渲染。 */
+  expanded: boolean;
+  /** 是否为当前所在的分组（包含栈中最近一次已应用步骤的那一组），UI 高亮展示。 */
+  isCurrent?: boolean;
+}>();
+
+const emit = defineEmits<{
+  /**
+   * 用户点击合并组头部时触发，携带 groupKey；上层用其切换 expanded 状态。
+   * 对单步组（非合并）头部点击不会发该事件——因为单步组没有"展开"的概念。
+   */
+  (_e: 'toggle', _key: string): void;
+  /**
+   * 用户希望跳转到该记录时触发，携带"目标 step 在所属栈中的索引"——上层据此计算目标 cursor (= index + 1)。
+   * 触发场景：
+   * - 单步组（merged=false）头部：取该唯一 step 的 index；
+   * - 子步条目：取该子步的 index。
+   * 合并组头部不再触发 goto，避免与展开/收起冲突；用户应展开后点具体子步精准跳转。
+   * 当前所在的步骤（isCurrent）始终不会触发 goto。
+   */
+  (_e: 'goto', _index: number): void;
+  /**
+   * 用户希望查看该 step 的修改差异（旧值 vs 新值）。
+   * 只在 step 满足"前后值都存在"（如 update / 数据源、代码块的 update）时由父级标记 `diffable=true`。
+   * payload 为该 step 在所属栈中的索引，由上层根据 index 取 step 内容并展示对比。
+   */
+  (_e: 'diff-step', _index: number): void;
+  /**
+   * 用户希望「回滚」该 step——把它的修改作为一次新操作反向应用（类 git revert）。
+   * payload 为该 step 在所属栈中的索引。仅在单步组头部（headRevertable）或合并组的可回滚子步上触发。
+   */
+  (_e: 'revert-step', _index: number): void;
+}>();
+
+/** 单步组：头部可点击 goto；合并组：头部可点击切换展开。当前组（isCurrent）的单步组头部不可点击。 */
+const isHeadClickable = computed(() => {
+  if (props.merged) return true;
+  return !props.isCurrent;
+});
+
+const headTitle = computed(() => {
+  if (props.merged) return props.expanded ? '点击收起子步' : '点击展开子步';
+  if (props.isCurrent) return '当前所在记录';
+  return '点击跳转到该记录';
+});
+
+/**
+ * 头部点击行为分流：
+ * - 合并组：仅切换展开 / 收起，不触发 goto；
+ * - 单步组：跳转到该唯一步骤；当前组忽略点击。
+ */
+const onHeadClick = () => {
+  if (props.merged) {
+    emit('toggle', props.groupKey);
+    return;
+  }
+  if (props.isCurrent) return;
+  if (!props.subSteps.length) return;
+  emit('goto', props.subSteps[0].index);
+};
+
+const onSubStepClick = (s: { index: number; isCurrent?: boolean }) => {
+  if (s.isCurrent) return;
+  emit('goto', s.index);
+};
+
+/** 单步组头部是否展示"查看差异"入口：要求该唯一子步本身可对比。 */
+const headDiffable = computed(() => !props.merged && Boolean(props.subSteps[0]?.diffable));
+
+/** 单步组头部是否展示"回滚"入口：要求该唯一子步本身可回滚（已应用）。 */
+const headRevertable = computed(() => !props.merged && Boolean(props.subSteps[0]?.revertable));
+
+/**
+ * 合并组展开后的子步渲染顺序：与外层分组列表保持一致——倒序展示（最新的子步在最上方）。
+ * 外层 page tab / bucket 都已对 groups 做了 reverse，子步沿用同样的视觉规则更直观。
+ * 注意：仅用于渲染，原 `subSteps` 保持时间正序，`headIndexLabel` 等基于首尾索引的展示语义不变。
+ */
+const subStepsDisplay = computed(() => props.subSteps.slice().reverse());
+
+/**
+ * 头部索引展示：
+ * - 单步组（merged=false）：显示该唯一 step 的编号，如 `#5`；
+ * - 合并组：显示组内 step 的编号范围，如 `#3-#7`（首尾相同则退化为 `#5`）。
+ *
+ * 这里展示的是 step.index + 1（与子步列表 `#{{ s.index + 1 }}` 保持一致），从 1 起编号更符合直觉。
+ */
+const headIndexLabel = computed(() => {
+  const list = props.subSteps;
+  if (!list.length) return '';
+  const first = list[0].index + 1;
+  const last = list[list.length - 1].index + 1;
+  if (!props.merged || first === last) return `#${first}`;
+  return `#${first}-#${last}`;
+});
+
+const headIndexTitle = computed(() => {
+  if (!props.merged) return `历史步骤编号 #${props.subSteps[0]?.index + 1}`;
+  return `合并了第 ${props.subSteps[0]?.index + 1} 至第 ${
+    props.subSteps[props.subSteps.length - 1]?.index + 1
+  } 共 ${props.subSteps.length} 条历史步骤`;
+});
+
+const onDiffClick = (index: number) => {
+  emit('diff-step', index);
+};
+
+const onRevertClick = (index: number) => {
+  emit('revert-step', index);
+};
+</script>

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>