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

package/src/theme/history-list-panel.scss

@@ -0,0 +1,423 @@
+.m-editor-history-list-popover {
+  padding: 0 !important;
+
+  .m-editor-history-list {
+    position: relative;
+    padding: 4px 8px 8px;
+  }
+
+  // 关闭按钮悬浮在 tab 标题同一行（绝对定位，不占布局空间）。
+  // top 对齐容器顶部内边距，height 跟 el-tabs/t-tabs 头部默认高度一致，
+  // 再用 flex 居中让图标与 tab 标题视觉对齐。
+  .m-editor-history-list-close {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    height: 40px;
+    margin: 0;
+    color: #909399;
+
+    &:hover {
+      color: #409eff;
+    }
+  }
+
+  .m-editor-history-list-tabs {
+    .el-tabs__header,
+    .t-tabs__header {
+      margin-bottom: 4px;
+    }
+  }
+
+  .m-editor-history-list-empty {
+    padding: 24px 0;
+    text-align: center;
+    color: #909399;
+    font-size: 12px;
+  }
+
+  .m-editor-history-list-ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .m-editor-history-list-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    line-height: 1.4;
+    color: #303133;
+    cursor: default;
+
+    // 合并组（卡片）自己定义了 hover/active 视觉，跳过通用单步 hover 避免色彩叠加
+    &:not(.m-editor-history-list-group.is-merged):hover {
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+
+    &.is-undone {
+      color: #c0c4cc;
+
+      .m-editor-history-list-item-op {
+        opacity: 0.5;
+      }
+    }
+
+    // 当前所在的「单步」记录：左侧蓝条 + 浅蓝底；
+    // 合并组的当前态由 `.is-merged.is-current` 单独覆盖（border-left + 卡片背景），
+    // 故这里仅作用于「非合并组」的单步条目，避免与卡片样式互相干扰。
+    &.is-current:not(.m-editor-history-list-group.is-merged) {
+      background-color: rgba(64, 158, 255, 0.1);
+      box-shadow: inset 2px 0 0 #409eff;
+
+      &:hover {
+        background-color: rgba(64, 158, 255, 0.16);
+      }
+
+      .m-editor-history-list-item-desc {
+        font-weight: 600;
+        color: #409eff;
+      }
+    }
+  }
+
+  .m-editor-history-list-group {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+
+    .m-editor-history-list-group-head {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      cursor: default;
+
+      &.is-clickable {
+        cursor: pointer;
+      }
+    }
+
+    .m-editor-history-list-group-toggle {
+      flex: 0 0 auto;
+      width: 16px;
+      text-align: center;
+      color: #909399;
+      font-size: 12px;
+      user-select: none;
+      transition: transform 0.15s ease;
+      pointer-events: none;
+
+      &.is-expanded {
+        transform: rotate(180deg);
+      }
+    }
+
+    // 合并组（≥2 个连续同节点的修改被聚合）需要与单步条目明显区分：
+    // - 左侧 3px 紫色色条暗示「这是一组」；
+    // - 浅紫背景 + 边框把整个组视觉化为一张「卡片」；
+    // - 头部加 padding，避免和单步条目混在一起难以辨认。
+    &.is-merged {
+      margin: 4px 0;
+      padding: 4px 8px 6px;
+      background-color: rgba(144, 105, 219, 0.06);
+      border: 1px solid rgba(144, 105, 219, 0.18);
+      border-left: 3px solid #9069db;
+      border-radius: 4px;
+
+      // 卡片本体已经有背景色，hover 状态以更深的同色提示交互
+      &:hover {
+        background-color: rgba(144, 105, 219, 0.1);
+      }
+
+      .m-editor-history-list-group-head {
+        font-weight: 600;
+        color: #5b3fa5;
+      }
+
+      // 已撤销态：整张卡片去色
+      &.is-undone {
+        background-color: rgba(192, 196, 204, 0.08);
+        border-color: rgba(192, 196, 204, 0.4);
+        border-left-color: #c0c4cc;
+
+        .m-editor-history-list-group-head {
+          color: #c0c4cc;
+        }
+      }
+
+      // 当前组：卡片左条变蓝，与单步「当前」高亮一致
+      &.is-current {
+        background-color: rgba(64, 158, 255, 0.08);
+        border-color: rgba(64, 158, 255, 0.3);
+        border-left-color: #409eff;
+        box-shadow: none; // 覆盖 .is-current 公共的 inset 阴影
+
+        .m-editor-history-list-group-head {
+          color: #409eff;
+        }
+      }
+    }
+  }
+
+  .m-editor-history-list-substeps {
+    margin: 6px 0 0 6px;
+    padding: 0;
+    list-style: none;
+    border-left: 1px dashed rgba(144, 105, 219, 0.45);
+
+    li {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 3px 8px;
+      font-size: 11px;
+      color: #606266;
+      cursor: default;
+      border-radius: 3px;
+
+      &.is-clickable {
+        cursor: pointer;
+
+        &:hover {
+          background-color: rgba(144, 105, 219, 0.1);
+        }
+      }
+
+      &.is-undone {
+        color: #c0c4cc;
+      }
+
+      &.is-current {
+        color: #409eff;
+        font-weight: 600;
+        background-color: rgba(64, 158, 255, 0.08);
+        border-radius: 3px;
+      }
+    }
+  }
+
+  .m-editor-history-list-item-current {
+    flex: 0 0 auto;
+    padding: 0 6px;
+    border-radius: 2px;
+    font-size: 10px;
+    line-height: 16px;
+    color: #fff;
+    background-color: #409eff;
+    font-weight: 500;
+  }
+
+  .m-editor-history-list-item-index {
+    flex: 0 0 auto;
+    color: #909399;
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+    font-size: 11px;
+    font-weight: 400; // 防止被合并组头部的粗体继承
+    white-space: nowrap;
+  }
+
+  .m-editor-history-list-item-op {
+    flex: 0 0 auto;
+    padding: 0 6px;
+    border-radius: 2px;
+    font-size: 11px;
+    line-height: 18px;
+    color: #fff;
+    background-color: #909399;
+
+    &.op-add {
+      background-color: #67c23a;
+    }
+
+    &.op-remove {
+      background-color: #f56c6c;
+    }
+
+    &.op-update {
+      background-color: #409eff;
+    }
+
+    &.op-initial {
+      background-color: #909399;
+    }
+  }
+
+  .m-editor-history-list-initial {
+    cursor: default;
+    color: #606266;
+    border-top: 1px dashed #dcdfe6;
+    margin-top: 4px;
+    padding-top: 8px;
+
+    &.is-clickable {
+      cursor: pointer;
+    }
+
+    .m-editor-history-list-item-desc {
+      font-style: italic;
+    }
+  }
+
+  .m-editor-history-list-item-desc {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // 「合并 N 步」徽标：紫色实心胶囊，与合并组卡片色系一致，醒目区分单步条目。
+  .m-editor-history-list-item-merge {
+    flex: 0 0 auto;
+    padding: 0 8px;
+    border-radius: 8px;
+    font-size: 10px;
+    line-height: 16px;
+    color: #fff;
+    background-color: #9069db;
+    font-weight: 500;
+    letter-spacing: 0.2px;
+  }
+
+  .m-editor-history-list-item-diff {
+    flex: 0 0 auto;
+    padding: 0 6px;
+    border-radius: 2px;
+    font-size: 10px;
+    line-height: 16px;
+    color: #409eff;
+    background-color: rgba(64, 158, 255, 0.1);
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      background-color: rgba(64, 158, 255, 0.2);
+    }
+  }
+
+  // 「回滚」按钮：类 git revert，把目标 step 反向应用一次作为新提交。
+  // 使用与「查看差异」不同的色调（橙黄），用来区分"可逆操作"与"只读对比"。
+  .m-editor-history-list-item-revert {
+    flex: 0 0 auto;
+    padding: 0 6px;
+    border-radius: 2px;
+    font-size: 10px;
+    line-height: 16px;
+    color: #e6a23c;
+    background-color: rgba(230, 162, 60, 0.12);
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      background-color: rgba(230, 162, 60, 0.25);
+    }
+  }
+
+  .m-editor-history-list-substep-desc {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .m-editor-history-list-bucket {
+    margin-bottom: 8px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .m-editor-history-list-bucket-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    font-size: 12px;
+    font-weight: 500;
+    color: #606266;
+    background-color: #f5f7fa;
+    border-radius: 4px;
+
+    code {
+      flex: 1 1 auto;
+      font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+      font-size: 11px;
+      color: #409eff;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .m-editor-history-list-bucket-count {
+    flex: 0 0 auto;
+    color: #909399;
+    font-weight: 400;
+    font-size: 11px;
+  }
+}
+
+.m-editor-history-diff-dialog {
+  .m-editor-history-diff-dialog-body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .m-editor-history-diff-dialog-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    padding: 8px 12px;
+    background-color: #f5f7fa;
+    border-radius: 4px;
+    gap: 12px;
+  }
+
+  .m-editor-history-diff-dialog-controls {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+    gap: 8px;
+  }
+
+  .m-editor-history-diff-dialog-view,
+  .m-editor-history-diff-dialog-mode {
+    flex: 0 0 auto;
+  }
+
+  .m-editor-history-diff-dialog-target {
+    flex: 1 1 auto;
+    font-size: 13px;
+    font-weight: 500;
+    color: #303133;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .m-editor-history-diff-dialog-legend {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 12px;
+    padding: 0 4px;
+  }
+
+  .m-editor-history-diff-dialog-arrow {
+    color: #909399;
+    font-size: 12px;
+  }
+
+  .m-editor-history-diff-dialog-tip {
+    margin-left: 8px;
+    color: #e6a23c;
+    font-size: 12px;
+  }
+}

package/src/theme/theme.scss

@@ -1,5 +1,6 @@
 @use "./search-input.scss";
 @use "./nav-menu.scss";
+@use "./history-list-panel.scss";
 @use "./framework.scss";
 @use "./sidebar.scss";
 @use "./layer-panel.scss";

package/src/type.ts

@@ -22,7 +22,17 @@ import type * as Monaco from 'monaco-editor';
 import type { default as Sortable, Options, SortableEvent } from 'sortablejs';
 import type { PascalCasedProperties, Writable } from 'type-fest';
 
-import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/core';
+import type {
+  CodeBlockContent,
+  CodeBlockDSL,
+  DataSourceSchema,
+  Id,
+  MApp,
+  MContainer,
+  MNode,
+  MPage,
+  MPageFragment,
+} from '@tmagic/core';
 import type { ChangeRecord, FormConfig, TableColumnConfig, TypeFunction } from '@tmagic/form';
 import type StageCore from '@tmagic/stage';
 import type {
@@ -138,7 +148,7 @@ export interface EditorInstallOptions {
   customCreateMonacoDiffEditor: (
     monaco: typeof import('monaco-editor'),
     codeEditorEl: HTMLElement,
-    options: Monaco.editor.IStandaloneEditorConstructionOptions & { editorCustomType?: string },
+    options: Monaco.editor.IStandaloneDiffEditorConstructionOptions & { editorCustomType?: string },
   ) => Promise<Monaco.editor.IStandaloneDiffEditor> | Monaco.editor.IStandaloneDiffEditor;
   [key: string]: any;
 }
@@ -407,6 +417,7 @@ export interface MenuComponent {
  * 'rule': 显示隐藏标尺
  * 'scale-to-original': 缩放到实际大小
  * 'scale-to-fit': 缩放以适应
+ * 'history-list': 历史记录面板（按 页面 / 数据源 / 代码块 三个 tab 展示，相邻同目标修改自动合并）
  */
 // #region MenuItem
 export type MenuItem =
@@ -421,6 +432,7 @@ export type MenuItem =
   | 'rule'
   | 'scale-to-original'
   | 'scale-to-fit'
+  | 'history-list'
   | MenuButton
   | MenuComponent
   | string;
@@ -627,18 +639,161 @@ export interface StepValue {
   indexMap?: Record<string, number>;
   /** opType 'remove': 被删除的节点及其位置信息 */
   removedItems?: { node: MNode; parentId: Id; index: number }[];
-  /** opType 'update': 变更前后的节点快照 */
-  updatedItems?: { oldNode: MNode; newNode: MNode }[];
+  /**
+   * opType 'update': 变更前后的节点快照
+   *
+   * `changeRecords` 来自 form 端的 propPath/value 列表，撤销/重做时只对这些 propPath 做局部更新；
+   * 缺省（未传 / 空数组）才退化为整节点替换。
+   */
+  updatedItems?: { oldNode: MNode; newNode: MNode; changeRecords?: ChangeRecord[] }[];
+  /**
+   * 调用方可选传入的人类可读描述（如「调整按钮颜色」），用于历史面板展示。
+   * 不影响 undo/redo 行为；缺省时面板会根据节点 / propPath 自动生成描述。
+   */
+  historyDescription?: string;
 }
 // #endregion StepValue
 
+// #region CodeBlockStepValue
+/**
+ * 代码块历史记录条目。按 codeBlock.id 分组保存到 historyState.codeBlockState。
+ * - 新增：oldContent = null，newContent = 新内容
+ * - 更新：oldContent / newContent 都为对应内容
+ * - 删除：newContent = null，oldContent = 删除前内容
+ */
+export interface CodeBlockStepValue {
+  /** 关联的代码块 id */
+  id: Id;
+  /** 变更前的代码块内容，新增时为 null */
+  oldContent: CodeBlockContent | null;
+  /** 变更后的代码块内容，删除时为 null */
+  newContent: CodeBlockContent | null;
+  /**
+   * form 端 propPath/value 列表。撤销/重做时若有则按 propPath 局部更新；
+   * 缺省才退化为整内容替换。新增/删除场景通常无 changeRecords。
+   */
+  changeRecords?: ChangeRecord[];
+  /** 调用方可选传入的人类可读描述，用于历史面板展示；不影响 undo/redo 行为。 */
+  historyDescription?: string;
+}
+// #endregion CodeBlockStepValue
+
+// #region DataSourceStepValue
+/**
+ * 数据源历史记录条目。按 dataSource.id 分组保存到 historyState.dataSourceState。
+ * - 新增：oldSchema = null，newSchema = 新 schema
+ * - 更新：oldSchema / newSchema 都为对应 schema
+ * - 删除：newSchema = null，oldSchema = 删除前 schema
+ */
+export interface DataSourceStepValue {
+  /** 关联的数据源 id */
+  id: Id;
+  /** 变更前的数据源 schema，新增时为 null */
+  oldSchema: DataSourceSchema | null;
+  /** 变更后的数据源 schema，删除时为 null */
+  newSchema: DataSourceSchema | null;
+  /**
+   * form 端 propPath/value 列表。撤销/重做时若有则按 propPath 局部更新；
+   * 缺省才退化为整 schema 替换。新增/删除场景通常无 changeRecords。
+   */
+  changeRecords?: ChangeRecord[];
+  /** 调用方可选传入的人类可读描述，用于历史面板展示；不影响 undo/redo 行为。 */
+  historyDescription?: string;
+}
+// #endregion DataSourceStepValue
+
 export interface HistoryState {
   pageId?: Id;
   pageSteps: Record<Id, UndoRedo<StepValue>>;
   canRedo: boolean;
   canUndo: boolean;
+  /**
+   * 代码块历史栈，按 codeBlock.id 分组（每个代码块独立一份 UndoRedo）。
+   * 与页面/节点无关，支持独立 undo/redo。
+   */
+  codeBlockState: Record<Id, UndoRedo<CodeBlockStepValue>>;
+  /**
+   * 数据源历史栈，按 dataSource.id 分组（每个数据源独立一份 UndoRedo）。
+   * 与页面/节点无关，支持独立 undo/redo。
+   */
+  dataSourceState: Record<Id, UndoRedo<DataSourceStepValue>>;
 }
 
+// #region HistoryListEntry
+/**
+ * 历史面板用：当前页面的一条历史步骤（包含位置和是否已应用）。
+ */
+export interface PageHistoryStepEntry {
+  /** 步骤内容 */
+  step: StepValue;
+  /** 在所属栈中的索引（0 为最早） */
+  index: number;
+  /** 是否处于"已应用"段（即位于栈游标之前）。撤销后变为 false。 */
+  applied: boolean;
+  /** 是否为当前所在的步骤（栈中最近一次已应用的那一步，即 index === cursor - 1）。 */
+  isCurrent?: boolean;
+}
+
+/**
+ * 页面历史面板分组。
+ * - 连续修改同一目标节点（updatedItems[0].oldNode.id 一致）的 'update' 步骤合并成一组；
+ * - 多节点更新 / add / remove 始终独立成组（无法明确归属单一目标）。
+ * - targetId 为 undefined 表示"无明确目标"（如 add/remove/多节点 update），不参与合并。
+ */
+export interface PageHistoryGroup {
+  kind: 'page';
+  /** 所属页面 id */
+  pageId: Id;
+  /** 该分组的操作类型 */
+  opType: HistoryOpType;
+  /**
+   * 合并的目标节点 id；只有"单节点 update"才有值，并按此 id 与相邻同 id 的 update 合并。
+   * undefined 表示该分组不可被合并（add / remove / 多节点 update）。
+   */
+  targetId?: Id;
+  /** 目标节点的可读名（取最后一步的 newNode.name/type/id） */
+  targetName?: string;
+  /** 组内所有步骤，按时间正序 */
+  steps: PageHistoryStepEntry[];
+  /** 组内最后一步是否已应用 */
+  applied: boolean;
+  /** 是否为当前所在的分组（包含栈中最近一次已应用步骤的那一组）。 */
+  isCurrent?: boolean;
+}
+
+/**
+ * 代码块历史面板分组。
+ * - 同一 codeBlockId 的栈内，相邻的 'update' 操作会合并成一个 group；
+ * - 'add' / 'remove' 始终独立成组（语义上是一次性事件）。
+ */
+export interface CodeBlockHistoryGroup {
+  kind: 'code-block';
+  /** 关联的 codeBlock id */
+  id: Id;
+  /** 该分组的操作类型 */
+  opType: HistoryOpType;
+  /** 组内所有步骤，按时间正序 */
+  steps: { step: CodeBlockStepValue; index: number; applied: boolean; isCurrent?: boolean }[];
+  /** 组内最后一步是否已应用，用于整组的状态展示 */
+  applied: boolean;
+  /** 是否为当前所在的分组（包含该栈最近一次已应用步骤的那一组）。 */
+  isCurrent?: boolean;
+}
+
+/**
+ * 数据源历史面板分组，结构同 CodeBlockHistoryGroup。
+ */
+export interface DataSourceHistoryGroup {
+  kind: 'data-source';
+  id: Id;
+  opType: HistoryOpType;
+  steps: { step: DataSourceStepValue; index: number; applied: boolean; isCurrent?: boolean }[];
+  applied: boolean;
+  /** 是否为当前所在的分组（包含该栈最近一次已应用步骤的那一组）。 */
+  isCurrent?: boolean;
+}
+// #endregion HistoryListEntry
+
 export enum KeyBindingCommand {
   /** 复制 */
   COPY_NODE = 'tmagic-system-copy-node',
@@ -874,12 +1029,30 @@ export const canUsePluginMethods = {
 
 export type AsyncMethodName = Writable<(typeof canUsePluginMethods)['async']>;
 
+/**
+ * 历史记录写入相关的通用配置（codeBlock / dataSource / editor 共用）
+ * - doNotPushHistory: 操作完成后是否不要将本次操作压入历史栈（撤销/重做记录），默认 false
+ * - historyDescription: 入栈时附带的人类可读描述，用于历史面板展示；不影响 undo/redo 行为，缺省时面板会自动生成描述
+ */
+export interface HistoryOpOptions {
+  doNotPushHistory?: boolean;
+  historyDescription?: string;
+}
+
+/**
+ * 在 HistoryOpOptions 基础上携带 form 端 propPath/value 变更记录，
+ * 用于历史记录的精细化撤销/重做（按 propPath 局部 patch）。
+ */
+export interface HistoryOpOptionsWithChangeRecords extends HistoryOpOptions {
+  changeRecords?: ChangeRecord[];
+}
+
 /**
  * DSL 修改类操作的通用配置
  * - doNotSelect: 操作后是否不要自动触发选中（不调用 this.select / this.multiSelect / stage.select / stage.multiSelect）
  * - doNotSwitchPage: 操作若会引发当前页面切换（如新增 / 删除 / 跨页移动），是否跳过这次切换
  */
-export type DslOpOptions = {
+export interface DslOpOptions extends HistoryOpOptions {
   doNotSelect?: boolean;
   doNotSwitchPage?: boolean;
-};
+}