@tmagic/editor 1.8.0-beta.12 → 1.8.0-beta.14

package/src/services/editor.ts

@@ -550,6 +550,8 @@ class Editor extends BaseService {
     this.emit('change', {
       type: 'add',
       data: newNodes.map((node) => ({ node, page: this.getPageOfNode(node.id) })),
+      historySource,
+      doNotPushHistory,
     });
 
     return Array.isArray(addNode) ? newNodes : newNodes[0];
@@ -692,7 +694,7 @@ class Editor extends BaseService {
     }
 
     this.emit('remove', nodes);
-    this.emit('change', { type: 'remove', data: changeItems });
+    this.emit('change', { type: 'remove', data: changeItems, historySource, doNotPushHistory });
   }
 
   public async doUpdate(
@@ -846,6 +848,8 @@ class Editor extends BaseService {
     this.emit('change', {
       type: 'update',
       data: updateData.map((node) => ({ node, page: this.getPageOfNode(node.newNode.id) })),
+      historySource,
+      doNotPushHistory,
     });
     return Array.isArray(config) ? updateData.map((item) => item.newNode) : updateData[0].newNode;
   }
@@ -1092,6 +1096,8 @@ class Editor extends BaseService {
       type: 'move-layer',
       data: [{ node, page: this.getPageOfNode(node.id) }],
       offset,
+      historySource,
+      doNotPushHistory,
     });
   }
 
@@ -1277,6 +1283,8 @@ class Editor extends BaseService {
       data: configs.map((node) => ({ node, page: this.getPageOfNode(node.id) })),
       targetIndex,
       targetParent,
+      historySource,
+      doNotPushHistory,
     });
   }
 
@@ -1878,10 +1886,12 @@ class Editor extends BaseService {
   /**
    * 应用历史操作（撤销 / 重做）
    *
-   * 所有 DSL 修改都走 `editor.add / remove / update`，并通过 `doNotPushHistory` 阻止再次入栈、
-   * `doNotSelect / doNotSwitchPage` 让选区由方法末尾的统一逻辑兜底。
+   * 删除 / 更新类修改走 `editor.remove / update`，并通过 `doNotPushHistory` 阻止再次入栈、
+   * `doNotSelect / doNotSwitchPage` 让选区由方法末尾的统一逻辑兜底；
+   * 「重新插回节点」（撤销 remove / 重做 add）需按 step 记录的 parentId / index 精确还原，
+   * 不走 this.add，由手工 splice + stage.add 完成后补发等价的 add / change 事件（见 emitHistoryInsertEvents）。
    *
-   * 注意：这些公开方法会发出 add / remove / update 事件，业务侧若需要区分"用户操作"与"撤销重做触发"，
+   * 注意：这些路径都会发出 add / remove / update / change 事件，业务侧若需要区分"用户操作"与"撤销重做触发"，
    * 请监听 `history-change` 事件配合判断。
    *
    * @param step 操作记录
@@ -1894,7 +1904,14 @@ class Editor extends BaseService {
     const stage = this.get('stage');
     if (!root) return;
 
-    const commonOpts = { doNotSelect: true, doNotSwitchPage: true, doNotPushHistory: true } as const;
+    // 撤销/重做内部复用 add/remove/update，透传被应用 step 上记录的 source，
+    // 使其触发的 change 事件同样携带「历史来源」
+    const commonOpts = {
+      doNotSelect: true,
+      doNotSwitchPage: true,
+      doNotPushHistory: true,
+      historySource: step.source,
+    } as const;
 
     switch (step.opType) {
       case 'add': {
@@ -1910,17 +1927,22 @@ class Editor extends BaseService {
           }
         } else {
           // 重做 add：按记录的 parentId / index 把节点重新插回父容器。
-          // 按目标 index 升序逐个插入，先小后大避免索引漂移
+          // 按目标 index 升序逐个插入，先小后大避免索引漂移。
+          // 不走 this.add：doAdd 依赖当前选中节点（无选区时直接抛错），且只能插到选中节点之后 / 末尾，
+          // 无法按 step 记录的 parentId / index 精确还原，还会重算 style 破坏已记录的终态位置。
           const sorted = [...items].sort((a, b) => (a.index ?? 0) - (b.index ?? 0));
+          const addedNodes: MNode[] = [];
           for (const { newSchema, parentId, index } of sorted) {
             if (!newSchema || parentId === undefined) continue;
             const parent = this.getNodeById(parentId, false) as MContainer | null;
             if (parent?.items) {
+              const addedNode = cloneDeep(newSchema);
               if (typeof index === 'number' && index >= 0 && index < parent.items.length) {
-                parent.items.splice(index, 0, cloneDeep(newSchema));
+                parent.items.splice(index, 0, addedNode);
               } else {
-                parent.items.push(cloneDeep(newSchema));
+                parent.items.push(addedNode);
               }
+              addedNodes.push(addedNode);
               await stage?.add({
                 config: cloneDeep(newSchema),
                 parent: cloneDeep(parent),
@@ -1929,19 +1951,23 @@ class Editor extends BaseService {
               });
             }
           }
+          this.emitHistoryInsertEvents(addedNodes, step.source);
         }
         break;
       }
       case 'remove': {
         const items = step.diff ?? [];
         if (reverse) {
-          // 撤销 remove：按原 index 升序逐个插回（先小后大避免索引漂移）
+          // 撤销 remove：按原 index 升序逐个插回（先小后大避免索引漂移）；不走 this.add 的原因同上
           const sorted = [...items].sort((a, b) => (a.index ?? 0) - (b.index ?? 0));
+          const addedNodes: MNode[] = [];
           for (const { oldSchema, parentId, index } of sorted) {
             if (!oldSchema || parentId === undefined) continue;
             const parent = this.getNodeById(parentId, false) as MContainer | null;
             if (parent?.items) {
-              parent.items.splice(index ?? parent.items.length, 0, cloneDeep(oldSchema));
+              const addedNode = cloneDeep(oldSchema);
+              parent.items.splice(index ?? parent.items.length, 0, addedNode);
+              addedNodes.push(addedNode);
               await stage?.add({
                 config: cloneDeep(oldSchema),
                 parent: cloneDeep(parent),
@@ -1950,6 +1976,7 @@ class Editor extends BaseService {
               });
             }
           }
+          this.emitHistoryInsertEvents(addedNodes, step.source);
         } else {
           // 重做 remove：再删一次
           for (const { oldSchema } of items) {
@@ -1989,7 +2016,7 @@ class Editor extends BaseService {
             return cloneDeep(reverse ? oldNode : newNode);
           });
         if (configs.length) {
-          await this.update(configs, { doNotPushHistory: true });
+          await this.update(configs, { doNotPushHistory: true, historySource: step.source });
         }
         break;
       }
@@ -2028,6 +2055,22 @@ class Editor extends BaseService {
   private selectedConfigExceptionHandler(config: MNode | Id): EditorNodeInfo {
     return resolveSelectedNode(config, (id) => this.getNodeInfo(id), this.state.root?.id);
   }
+
+  /**
+   * 撤销 remove / 重做 add 通过手工 splice 按 step 记录的 parentId / index 精确还原节点（不走 this.add，原因见调用处注释），
+   * 这里补齐与 this.add 等价的 add / change 事件，保证撤销/重做路径的事件行为与正向操作一致。
+   */
+  private emitHistoryInsertEvents(nodes: MNode[], source?: HistoryOpSource) {
+    if (!nodes.length) return;
+    this.emit('add', nodes);
+    this.emit('change', {
+      type: 'add',
+      data: nodes.map((node) => ({ node, page: this.getPageOfNode(node.id) })),
+      historySource: source,
+      // 撤销/重做本身不再写入历史记录
+      doNotPushHistory: true,
+    });
+  }
 }
 
 export type EditorService = Editor;

package/src/services/ui.ts

@@ -49,13 +49,14 @@ const state = shallowReactive<UiState>({
     width: 375,
     height: 817,
   },
+  // 先给 columnWidth 留占位，真正的 clamp 逻辑在 state 创建完成后
+  // 用 state.minLeftColumnWidth / state.minRightColumnWidth 作为下限重新赋值 —
+  // 这样以后从外部（比如 uiService.set('minLeftColumnWidth', ...)）动态改最小宽度，
+  // 只改一处 state 字段即可，不用同步 MIN_* 常量。
   columnWidth: {
-    left:
-      storageService.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) || DEFAULT_LEFT_COLUMN_WIDTH,
+    left: 0,
     center: 0,
-    right:
-      storageService.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) ||
-      DEFAULT_RIGHT_COLUMN_WIDTH,
+    right: 0,
   },
   minLeftColumnWidth: MIN_LEFT_COLUMN_WIDTH,
   minCenterColumnWidth: MIN_CENTER_COLUMN_WIDTH,
@@ -83,6 +84,20 @@ const state = shallowReactive<UiState>({
   },
 });
 
+// 左右两栏宽度延后初始化：
+// - 优先取 storage 里用户上次拖到的值；storage 空时回落到 DEFAULT_*；
+// - 再用 state.min*ColumnWidth 兜底，防止历史 storage 里存的是老版本或用户拖过头
+//   留下的"比当前 min 还小"的数值。放到 state 之后写是因为初始化时无法在同一个
+//   对象字面量里读到自己的其它字段。
+state.columnWidth.left = Math.max(
+  storageService.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) || DEFAULT_LEFT_COLUMN_WIDTH,
+  state.minLeftColumnWidth,
+);
+state.columnWidth.right = Math.max(
+  storageService.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) || DEFAULT_RIGHT_COLUMN_WIDTH,
+  state.minRightColumnWidth,
+);
+
 const canUsePluginMethods = {
   async: ['zoom', 'calcZoom'] as const,
   sync: [] as const,

package/src/theme/code-block.scss

@@ -1,3 +1,40 @@
 .m-fields-code-select {
   width: 100%;
+  > .el-card.tmagic-design-card--flat {
+    background-color: transparent;
+    margin-bottom: 10px;
+    > .el-card__body {
+      padding-left: 0;
+      .code-select-content {
+        > .m-fields-group-list {
+          > .tmagic-design-card--flat.el-card {
+            padding-left: 16px;
+            padding-right: 16px;
+            margin-bottom: 10px;
+            border: 0 !important;
+          }
+        }
+      }
+    }
+  }
+  .el-card__body {
+    .tmagic-design-form-item {
+      margin-bottom: 18px;
+    }
+  }
+  .code-select-content {
+    > .m-fields-group-list {
+      > .tmagic-design-card--flat {
+        > .el-card__header {
+          padding: 16px 0;
+        }
+      }
+    }
+  }
+  .create-button {
+    &.fullWidth {
+      width: 100%;
+      margin: 0 0 16px 0;
+    }
+  }
 }

package/src/theme/common/var.scss

@@ -1,4 +1,4 @@
-$theme-color: #2882e0;
+$theme-color: var(--el-color-primary, #2882e0);
 
 $font-color: #313a40;
 $border-color: #d9dbdd;

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

@@ -77,9 +77,9 @@
           margin-bottom: 5px;
 
           &:hover {
-            background: #2882e0;
+            background: var(--el-color-primary, #2882e0);
             color: #fff;
-            border-color: #4e8be1;
+            border-color: var(--el-color-primary, #4e8be1);
           }
         }
 

package/src/theme/data-source-field.scss

@@ -5,6 +5,10 @@
   width: 100%;
   display: flex;
   align-items: center;
+  &.data-source-field-img-upload,
+  &.data-source-field-big-img-upload {
+    align-items: flex-start;
+  }
 
   .m-fields-select-action-button {
     margin-left: 5px;

package/src/theme/display-conds.scss

@@ -0,0 +1,11 @@
+.m-container-text.display-conds-title {
+  .tmagic-design-form-item {
+    .el-form-item__label {
+      color: #111;
+      font-weight: 500;
+      font-size: 16px;
+    }
+    line-height: 24px;
+    margin-bottom: 10px;
+  }
+}

package/src/theme/event.scss

@@ -2,8 +2,29 @@
   width: 100%;
   .fullWidth {
     width: 100%;
+    box-sizing: border-box;
+  }
+  .event-select-container {
+    padding: 0 16px;
+    > .el-card.tmagic-design-card--flat {
+      > .el-card__header {
+        border-bottom: 1px solid #ebeef5;
+      }
+      > .el-card__body {
+        padding-bottom: 16px;
+        .m-fields-group-list-footer {
+          div {
+            justify-content: flex-start !important;
+          }
+        }
+        .el-card.tmagic-design-card--flat {
+          > .el-card__header {
+            padding: 16px 0;
+          }
+        }
+      }
+    }
   }
-
   .event-select-code {
     margin-left: 20px;
     width: auto;
@@ -36,10 +57,43 @@
   }
 }
 
-.el-form-item {
+.event-select-container {
+  padding: 0 16px;
+}
+
+.event-select-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  .event-select-title {
+    color: #0f1113;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+  }
+}
+.event-item-header {
+  position: relative;
+  width: 100%;
+  .event-item-title {
+    color: #0f1113;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    margin-bottom: 16px;
+  }
+  .event-item-delete-button {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
   .el-form-item {
-    &.is-error {
-      margin-bottom: 18px;
+    .el-form-item {
+      &.is-error {
+        margin-bottom: 18px;
+      }
     }
   }
 }

package/src/theme/framework.scss

@@ -6,7 +6,10 @@
   width: 100%;
 
   &-content {
-    height: calc(100% - #{$nav-height});
+    // 与 nav-menu.scss 的 `--editor-nav-height` 联动：默认 fallback 到 SCSS
+    // `$nav-height`（35px），主题覆盖时两处会同时切成同一个高度，保证 nav 和
+    // 主内容区总高度 = 100%。
+    height: calc(100% - var(--editor-nav-height, #{$nav-height}));
   }
 
   &-framework-center {

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

@@ -21,7 +21,7 @@
     color: #909399;
 
     &:hover {
-      color: #409eff;
+      color: var(--el-color-primary, #409eff);
     }
   }
 
@@ -96,7 +96,7 @@
     // 故这里仅作用于「非合并组」的单步条目，避免与卡片样式互相干扰。
     &.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;
+      box-shadow: inset 2px 0 0 var(--el-color-primary, #409eff);
 
       &:hover {
         background-color: rgba(64, 158, 255, 0.16);
@@ -104,7 +104,7 @@
 
       .m-editor-history-list-item-desc {
         font-weight: 600;
-        color: #409eff;
+        color: var(--el-color-primary, #409eff);
       }
     }
   }
@@ -177,11 +177,11 @@
       &.is-current {
         background-color: rgba(64, 158, 255, 0.08);
         border-color: rgba(64, 158, 255, 0.3);
-        border-left-color: #409eff;
+        border-left-color: var(--el-color-primary, #409eff);
         box-shadow: none; // 覆盖 .is-current 公共的 inset 阴影
 
         .m-editor-history-list-group-head {
-          color: #409eff;
+          color: var(--el-color-primary, #409eff);
         }
       }
     }
@@ -216,7 +216,7 @@
       }
 
       &.is-current {
-        color: #409eff;
+        color: var(--el-color-primary, #409eff);
         font-weight: 600;
         background-color: rgba(64, 158, 255, 0.08);
         border-radius: 3px;
@@ -231,7 +231,7 @@
     font-size: 10px;
     line-height: 16px;
     color: #fff;
-    background-color: #409eff;
+    background-color: var(--el-color-primary, #409eff);
     font-weight: 500;
   }
 
@@ -395,7 +395,7 @@
     border-radius: 2px;
     font-size: 10px;
     line-height: 16px;
-    color: #409eff;
+    color: var(--el-color-primary, #409eff);
     background-color: rgba(64, 158, 255, 0.1);
     cursor: pointer;
     user-select: none;
@@ -471,7 +471,7 @@
       flex: 1 1 auto;
       font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
       font-size: 11px;
-      color: #409eff;
+      color: var(--el-color-primary, #409eff);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;

package/src/theme/nav-menu.scss

@@ -13,7 +13,11 @@
   font-weight: 400;
   box-sizing: border-box;
   margin: 0px;
-  flex: 0 0 $nav-height;
+  // 用 CSS 变量做主题化开关：默认没设 `--editor-nav-height` 时回落到
+  // SCSS 变量 `$nav-height`（common/var.scss，35px）；主题（如 magic-admin）
+  // 只需在祖先节点声明 `--editor-nav-height: 40px` 即可运行时覆盖，避免
+  // 走 `@use with` 那条对加载顺序极敏感的 SCSS 模块配置路径。
+  flex: 0 0 var(--editor-nav-height, #{$nav-height});
   border-bottom: 1px solid #d8dee8;
 
   > div {

package/src/theme/props-panel.scss

@@ -129,7 +129,8 @@
   > .m-container-tab {
     > .tmagic-design-tabs {
       > .el-tabs__content {
-        padding-top: 55px;
+        margin-top: var(--el-tabs-header-height);
+        padding-top: 15px;
       }
       > .el-tabs__header.is-top {
         position: absolute;

package/src/theme/style-setter/border.scss

@@ -1,5 +1,6 @@
 .border-box-container {
   display: flex;
+  --unuse-border-style: dashed;
   .border-icon-container {
     display: flex;
     flex-direction: column;
@@ -28,24 +29,32 @@
         border-color: var(--el-color-success, var(--td-success-color, #2ba471));
       }
       &.active {
+        border-color: var(--el-color-primary);
+        border-width: 1px;
+        // border-color: var(--el-color-primary, var(--td-brand-color, #0052d9));
+      }
+      &.center {
         border-width: 1px;
-        border-color: var(--el-color-primary, var(--td-brand-color, #0052d9));
       }
       &.border-icon-top {
         border-top-width: 2px;
-        border-style: solid dashed dashed dashed;
+        border-style: solid var(--unuse-border-style) var(--unuse-border-style)
+          var(--unuse-border-style);
       }
       &.border-icon-right {
         border-right-width: 2px;
-        border-style: dashed solid dashed dashed;
+        border-style: var(--unuse-border-style) solid var(--unuse-border-style)
+          var(--unuse-border-style);
       }
       &.border-icon-bottom {
         border-bottom-width: 2px;
-        border-style: dashed dashed solid dashed;
+        border-style: var(--unuse-border-style) var(--unuse-border-style) solid
+          var(--unuse-border-style);
       }
       &.border-icon-left {
         border-left-width: 2px;
-        border-style: dashed dashed dashed solid;
+        border-style: var(--unuse-border-style) var(--unuse-border-style)
+          var(--unuse-border-style) solid;
       }
     }
   }

package/src/theme/theme.scss

@@ -27,6 +27,7 @@
 @use "./page-fragment-select.scss";
 @use "./data-source-field.scss";
 @use "./data-source-field-select.scss";
+@use "./display-conds.scss";
 @use "./scroll-bar.scss";
 @use "./ui-select.scss";
 @use "./layer-node-content.scss";