@tmagic/editor 1.8.0-beta.13 → 1.8.0-beta.15

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";

package/src/theme/themes/magic-admin/index.scss

@@ -0,0 +1,214 @@
+// magic-admin 主题：所有规则均以 `.m-editor.m-editor--magic-admin` 为前缀，
+// 仅在 `<MEditor theme="magic-admin" />` 时生效，避免污染默认样式。
+
+@use "@tmagic/design/src/theme/themes/magic-admin/index.scss" as tMagicDesign;
+@use "@tmagic/table/src/theme/index.scss" as tMagicTable;
+@use "@tmagic/form/src/theme/themes/magic-admin/index.scss" as tMagicForm;
+@use "../../theme.scss";
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+
+// 仅作用于编辑器内部 DOM 的具体样式仍保留「双类」，避免误中 portal 上只挂 `m-theme--*`
+// 的节点。
+.m-editor.m-editor--magic-admin {
+  // 主题级 CSS 变量入口：想覆盖 nav 高度等 token 时，改这里一行即可；
+  // 走 CSS 级联，运行时切主题（换 `.m-editor--magic-admin` class）即可即时生效，
+  // 不受 SCSS `@use` 加载顺序限制。fallback 值定义在 common/var.scss，未启用主题
+  // 时自动回落 35px。
+  --editor-nav-height: 40px;
+
+  .m-editor-sidebar {
+    .m-editor-sidebar-header {
+      // padding: 8px 0;
+      width: 61px;
+      padding-top: 4px;
+      // sidebar 父容器是 `display: flex` (row)，同级 `.m-editor-sidebar-content` 的 width
+      // 是 `calc(100% - 40px)`（sidebar.scss:52，40 是老 header 宽度）。当 header 改成 61px
+      // 后，两者之和会溢出 21px 左右，默认 `flex-shrink: 1` 会按权重压缩 header，最终渲染
+      // 出 56.3px 而非 61px。这里强制 `flex-shrink: 0` 让 header 守住宽度，多余的部分由
+      // content 侧承担（content 的 `100% - 40` 会自然让出）。
+      flex-shrink: 0;
+      border-right: 1px solid rgba(0, 84, 225, 0.1);
+      display: flex;
+      background-color: #fff;
+      box-sizing: border-box;
+      flex-direction: column;
+      align-items: center;
+      .m-editor-sidebar-header-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border-radius: 4px;
+        padding: 4px 2px;
+        width: 52px;
+        margin-bottom: 4px;
+        box-sizing: border-box;
+        background-color: transparent;
+        color: #84909d;
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.05);
+        }
+        > i {
+          color: #84909d;
+          font-size: 20px;
+        }
+        &.is-active {
+          background-color: var(--el-button-hover-bg-color, rgb(230, 238, 253));
+          color: var(--el-color-primary);
+          &:hover {
+            background-color: var(
+              --el-button-hover-bg-color,
+              rgb(230, 238, 253)
+            );
+          }
+          > i {
+            color: var(--el-color-primary);
+          }
+          .magic-editor-tab-panel-title {
+            color: var(--el-color-primary);
+          }
+        }
+        .magic-editor-tab-panel-title {
+          font-size: 12px;
+          line-height: 14px;
+          font-weight: 400;
+          margin: 0 4px;
+          width: 52px;
+          text-align: center;
+        }
+      }
+    }
+    .m-editor-sidebar-content {
+      width: calc(100% - 61px);
+    }
+  }
+  .m-editor-props-panel .el-input__wrapper {
+    border-radius: 4px;
+  }
+
+  .border-box-container .border-icon-container .border-icon {
+    border-color: #ccc;
+    --unuse-border-style: solid;
+    &.configured {
+      border-color: var(--el-color-success, var(--td-success-color, #2ba471));
+    }
+
+    &.active {
+      border-color: var(--el-color-primary);
+      background-color: rgba(0, 84, 225, 0.1);
+      &.center {
+        border-width: 2px;
+      }
+      // 命中 `.border-icon-<side>` 时只保留该侧 2px，其余三边清零。
+      // 用 `@each` 循环避免四面手抄；后续要加禁用、hover 等状态也可以照搬这套结构。
+      @each $side in (top, right, bottom, left) {
+        &.border-icon-#{$side} {
+          border-width: 0;
+          border-#{$side}-width: 2px;
+        }
+      }
+    }
+
+    &.center {
+      border-width: 2px;
+    }
+    border-radius: 2px;
+  }
+
+  .m-container-code-select {
+    > .el-form-item:first-child {
+      > .el-form-item__label:first-child > :not(.m-form-tip) {
+        color: #111;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 24px;
+      }
+    }
+  }
+}
+
+.m-editor.m-theme--magic-admin {
+  .m-editor-props-form-panel-form {
+    > .m-container-tab {
+      > .tmagic-design-tabs {
+        > .el-tabs__content {
+          background-color: #fafafa;
+          border-radius: 8px;
+          padding-left: 16px;
+          padding-right: 16px;
+        }
+      }
+    }
+  }
+}
+
+.m-editor.m-theme--magic-admin {
+  .m-fields-style-setter {
+    border: 0;
+    .tmagic-design-collapse-item {
+      .el-collapse-item__wrap {
+        padding: 16px;
+      }
+    }
+  }
+}
+
+.m-editor.m-theme--magic-admin {
+  .magic-right-panel-tabs-top {
+    > .el-tabs {
+      > .el-tabs__header {
+        .el-tabs__nav-wrap.is-top {
+          .el-tabs__nav.is-top {
+            .el-tabs__active-bar {
+              display: none;
+            }
+            .el-tabs__item {
+              &:not(:last-child)::after {
+                content: "";
+                position: absolute;
+                right: 0;
+                top: 50%;
+                transform: translateY(-50%);
+                height: 12px;
+                border-right: 1px solid #e6e6e6;
+              }
+            }
+          }
+          &::after {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+.m-editor.m-theme--magic-admin {
+  .m-editor-nav-menu {
+    .menu-right,
+    .menu-left {
+      > .menu-item {
+        > button {
+          color: #111;
+        }
+      }
+    }
+    .menu-item {
+      margin-right: 8px;
+      .el-button--small {
+        font-size: 14px;
+      }
+      > button {
+        > i {
+          font-size: 16px;
+        }
+      }
+    }
+  }
+}

package/src/theme/ui-select.scss

@@ -4,6 +4,6 @@
     margin-right: 3px;
   }
   span {
-    color: #2882e0;
+    color: var(--el-color-primary, #2882e0);
   }
 }

package/src/type.ts

@@ -140,6 +140,7 @@ export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> |
 export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
 
 export interface EditorInstallOptions {
+  flat?: boolean;
   parseDSL: <T = any>(dsl: string) => T;
   customCreateMonacoEditor: (
     monaco: typeof import('monaco-editor'),
@@ -1338,17 +1339,37 @@ export interface EditorUpdateChangeItem {
   page: StoreState['page'];
 }
 
+/** {@link EditorEvents.change} 各操作类型共有的历史相关字段。 */
+export interface EditorChangeEventHistoryMeta {
+  /**
+   * 本次变更的「历史来源」（调用 DSL 操作时传入的 {@link HistoryOpOptions.historySource}，
+   * 撤销 / 重做时则为被应用 step 上记录的 `source`），未携带时为 undefined。
+   */
+  historySource?: HistoryOpSource;
+  /**
+   * 本次操作是否未写入历史记录（即调用时传入的 {@link HistoryOpOptions.doNotPushHistory}，缺省为 false）；
+   * 撤销 / 重做路径补发的事件恒为 true（撤销/重做本身不再入栈）。
+   */
+  doNotPushHistory?: boolean;
+}
+
 /**
  * {@link EditorEvents.change} 的回调参数：以 `type` 区分操作类型，并携带对应的操作内容。
  * `data` 为本次变更的节点列表，每项包含 node 及其所属的 page（可能为 null）；
- * `move-layer` 额外带层级偏移 `offset`，`drag-to` 额外带目标位置 `targetIndex` / `targetParent`。
+ * `move-layer` 额外带层级偏移 `offset`，`drag-to` 额外带目标位置 `targetIndex` / `targetParent`；
+ * 历史相关字段（historySource / doNotPushHistory）见 {@link EditorChangeEventHistoryMeta}。
  */
 export type EditorChangeEvent =
-  | { type: 'add'; data: EditorChangeItem[] }
-  | { type: 'remove'; data: EditorChangeItem[] }
-  | { type: 'update'; data: EditorUpdateChangeItem[] }
-  | { type: 'move-layer'; data: EditorChangeItem[]; offset: number | LayerOffset }
-  | { type: 'drag-to'; data: EditorChangeItem[]; targetIndex: number; targetParent: MContainer };
+  | ({ type: 'add'; data: EditorChangeItem[] } & EditorChangeEventHistoryMeta)
+  | ({ type: 'remove'; data: EditorChangeItem[] } & EditorChangeEventHistoryMeta)
+  | ({ type: 'update'; data: EditorUpdateChangeItem[] } & EditorChangeEventHistoryMeta)
+  | ({ type: 'move-layer'; data: EditorChangeItem[]; offset: number | LayerOffset } & EditorChangeEventHistoryMeta)
+  | ({
+      type: 'drag-to';
+      data: EditorChangeItem[];
+      targetIndex: number;
+      targetParent: MContainer;
+    } & EditorChangeEventHistoryMeta);
 // #endregion EditorChangeEvent
 
 export interface HistoryEvents {
@@ -1364,6 +1385,12 @@ export interface HistoryEvents {
   'mark-saved': [{ kind: HistoryStepType; id?: Id }];
   clear: [{ id: Id; stepType: HistoryStepType }];
   'marker-change': [{ id: Id; marker: StepValue; stepType: HistoryStepType }];
+  /**
+   * 页面 / 页面片结构变更（新增 / 删除）时派发，见 {@link HistoryService.notifyPageStructureChange}。
+   * 一次操作（add / remove / setRoot 整体替换）涉及多个页面时合并为**一个**事件；
+   * `add` / `remove` 分别为本次新增与删除的页面列表（其一可为空数组）。
+   */
+  'page-structure-change': [change: { add: (MPage | MPageFragment)[]; remove: (MPage | MPageFragment)[] }];
 }
 
 export const canUsePluginMethods = {

package/src/utils/config.ts

@@ -16,14 +16,22 @@
  * limitations under the License.
  */
 
+import { ref } from 'vue';
+
 import { EditorInstallOptions } from '@editor/type';
 
 let $TMAGIC_EDITOR: EditorInstallOptions = {} as any;
 
+// 用 ref 持有 flat 全局开关：const 引用本身不可变，符合 `import/no-mutable-exports`；
+// 通过 `.value` 改值仍保持模块级响应式语义，与 editor/plugin.ts、design/index.ts 里
+// 的同名变量写法对齐。
+const isGlobalFlat = ref(false);
+
 const setEditorConfig = (option: EditorInstallOptions): void => {
   $TMAGIC_EDITOR = option;
+  isGlobalFlat.value = option.flat ?? false;
 };
 
 const getEditorConfig = <K extends keyof EditorInstallOptions>(key: K): EditorInstallOptions[K] => $TMAGIC_EDITOR[key];
 
-export { getEditorConfig, setEditorConfig };
+export { getEditorConfig, isGlobalFlat, setEditorConfig };