@tmagic/editor 1.8.0-manmanyu.9 → 1.8.0

package/src/services/events.ts

@@ -20,7 +20,7 @@ import { reactive } from 'vue';
 import { cloneDeep } from 'lodash-es';
 import type { Writable } from 'type-fest';
 
-import { type EventOption, type Id } from '@tmagic/core';
+import type { EventOption, Id, MNode } from '@tmagic/core';
 import { toLine } from '@tmagic/utils';
 
 import type { AsyncHookPlugin, SyncHookPlugin } from '@editor/type';
@@ -35,8 +35,8 @@ const canUsePluginMethods = {
 type AsyncMethodName = Writable<(typeof canUsePluginMethods)['async']>;
 type SyncMethodName = Writable<(typeof canUsePluginMethods)['sync']>;
 
-let eventMap: Record<string, EventOption[]> = reactive({});
-let methodMap: Record<string, EventOption[]> = reactive({});
+const eventMap: Record<string, EventOption[]> = reactive({});
+const methodMap: Record<string, EventOption[]> = reactive({});
 
 class Events extends BaseService {
   constructor() {
@@ -56,7 +56,7 @@ class Events extends BaseService {
     eventMap[toLine(type)] = [...events];
   }
 
-  public getEvent(type: string): EventOption[] {
+  public getEvent(type: string, _data: { node?: MNode | null } = {}): EventOption[] {
     return cloneDeep(eventMap[toLine(type)]) || [];
   }
 
@@ -70,13 +70,14 @@ class Events extends BaseService {
     methodMap[toLine(type)] = [...method];
   }
 
-  public getMethod(type: string, _targetId: Id) {
+  public getMethod(type: string, _data: { node?: MNode | null; targetId?: Id } = {}) {
     return cloneDeep(methodMap[toLine(type)]) || [];
   }
 
   public resetState() {
-    eventMap = reactive({});
-    methodMap = reactive({});
+    // 原地清空而不是重新赋值，保留 reactive 代理身份，已建立的 computed / 渲染副作用才能收到更新
+    Object.keys(eventMap).forEach((type) => delete eventMap[type]);
+    Object.keys(methodMap).forEach((type) => delete methodMap[type]);
   }
 
   public destroy() {

package/src/services/history.ts

@@ -19,7 +19,7 @@
 import { reactive } from 'vue';
 import type { Writable } from 'type-fest';
 
-import type { Id } from '@tmagic/core';
+import type { Id, MPage, MPageFragment } from '@tmagic/core';
 import { guid } from '@tmagic/utils';
 
 import type {
@@ -353,6 +353,27 @@ class History extends BaseService {
     this.emit('mark-saved', { kind: stepType, id });
   }
 
+  /**
+   * 派发「页面 / 页面片结构变更」事件（`page-structure-change`）。
+   *
+   * 常规 `editorService.add` / `remove` 页面节点不会写入 `page` 历史栈（见 editor.add / remove 中
+   * 对 isPageOrFragment 的分支），因此不会产生任何 historyService 事件。该方法用于在这些
+   * 场景（以及 setRoot 整体替换 DSL 增删页面）下，向外统一通知页面结构的增删变化，供业务方感知。
+   *
+   * 一次操作涉及多个页面时，调用方应把本次增删的页面**合并为一个 change 一次性传入**，
+   * 使一次操作只派发一个事件；`add` / `remove` 分别为本次新增与删除的页面列表（其一可为空数组）。
+   *
+   * @param change 本次结构变更：{ add: 新增的页面列表, remove: 删除的页面列表 }
+   */
+  public notifyPageStructureChange(change: {
+    add: (MPage | MPageFragment)[];
+    remove: (MPage | MPageFragment)[];
+  }): void {
+    // 增删均为空时不派发，避免无意义通知
+    if (!change.add.length && !change.remove.length) return;
+    this.emit('page-structure-change', change);
+  }
+
   /**
    * 把当前内存中的全部历史栈（页面 / 代码块 / 数据源 / 扩展类型）序列化后写入本地 IndexedDB。
    *

package/src/services/keybinding.ts

@@ -1,6 +1,6 @@
 import KeyController, { KeyControllerEvent } from 'keycon';
 
-import { isPage, isPageFragment } from '@tmagic/utils';
+import { isPageOrFragment } from '@tmagic/utils';
 
 import { KeyBindingCacheItem, KeyBindingCommand, KeyBindingItem } from '@editor/type';
 
@@ -19,7 +19,7 @@ class Keybinding extends BaseService {
     [KeyBindingCommand.DELETE_NODE]: () => {
       const nodes = editorService.get('nodes');
 
-      if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0])) return;
+      if (!nodes || isPageOrFragment(nodes[0])) return;
       editorService.remove(nodes, { historySource: 'shortcut' });
     },
     [KeyBindingCommand.COPY_NODE]: () => {
@@ -29,7 +29,7 @@ class Keybinding extends BaseService {
     [KeyBindingCommand.CUT_NODE]: () => {
       const nodes = editorService.get('nodes');
 
-      if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0])) return;
+      if (!nodes || isPageOrFragment(nodes[0])) return;
       editorService.copy(nodes);
       editorService.remove(nodes, { historySource: 'shortcut' });
     },

package/src/services/ui.ts

@@ -27,6 +27,9 @@ import {
   DEFAULT_LEFT_COLUMN_WIDTH,
   DEFAULT_RIGHT_COLUMN_WIDTH,
   LEFT_COLUMN_WIDTH_STORAGE_KEY,
+  MIN_CENTER_COLUMN_WIDTH,
+  MIN_LEFT_COLUMN_WIDTH,
+  MIN_RIGHT_COLUMN_WIDTH,
   RIGHT_COLUMN_WIDTH_STORAGE_KEY,
 } from '@editor/utils/const';
 
@@ -46,14 +49,18 @@ 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,
+  minRightColumnWidth: MIN_RIGHT_COLUMN_WIDTH,
   showGuides: true,
   hasGuides: false,
   showRule: true,
@@ -77,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,40 +1,3 @@
 .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/display-conds.scss

@@ -1,3 +1,7 @@
+.m-fields-display-conds {
+  width: 100%;
+}
+
 .m-container-text.display-conds-title {
   .tmagic-design-form-item {
     .el-form-item__label {

package/src/theme/event.scss

@@ -1,43 +1,45 @@
 .m-fields-event-select {
   width: 100%;
+
   .fullWidth {
     width: 100%;
     box-sizing: border-box;
+    &.m-container-ui-event {
+      width: calc(100% - 32px);
+    }
   }
+
   .event-select-container {
     padding: 0 16px;
-    > .el-card.tmagic-design-card--flat {
-      > .el-card__header {
+
+    > .m-fields-group-list
+      > .m-fields-group-list-item.tmagic-design-card--flat {
+      > .el-card__header,
+      > .t-card__header {
         border-bottom: 1px solid #ebeef5;
       }
-      > .el-card__body {
+
+      > .el-card__body,
+      > .t-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 {
+
+        .el-card.tmagic-design-card--flat,
+        .t-card.tmagic-design-card--flat {
+          > .el-card__header,
+          > .t-card__header {
             padding: 16px 0;
           }
         }
       }
     }
   }
+
   .event-select-code {
     margin-left: 20px;
     width: auto;
   }
-
-  .m-form-panel {
-    margin: 10px 0px;
-  }
-
-  .el-card.is-always-shadow {
-    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
-  }
 }
+
 .m-fields-code-select-col,
 .m-fields-data-source-method-select {
   width: 100%;
@@ -57,10 +59,6 @@
   }
 }
 
-.event-select-container {
-  padding: 0 16px;
-}
-
 .event-select-header {
   display: flex;
   align-items: center;
@@ -73,19 +71,13 @@
     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;
+  .tmagic-design-form-item {
+    margin-bottom: 0;
   }
-  .event-item-delete-button {
-    position: absolute;
-    right: 0;
-    top: 0;
+  .el-form-item .el-form-item.is-error {
+    margin-bottom: 18px;
   }
 }

package/src/theme/floating-box.scss

@@ -25,10 +25,18 @@
   .m-editor-float-box-body {
     overflow: auto;
     flex: 1;
-    padding: 0 16px;
   }
 }
 
 .m-editor-floating-box-moveable {
   opacity: 0;
 }
+
+.m-editor-float-box-drag-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+}

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/layer-node-content.scss

@@ -0,0 +1,14 @@
+.m-editor-layer-node-content {
+  display: inline-flex;
+  align-items: center;
+
+  &.is-invalid .m-editor-layer-node-label {
+    color: var(--el-color-danger, #f56c6c);
+  }
+
+  .m-editor-layer-node-error-icon {
+    margin-left: 4px;
+    color: var(--el-color-danger, #f56c6c);
+    cursor: help;
+  }
+}

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

@@ -125,14 +125,28 @@
 .m-editor-props-form-panel-form {
   padding-right: 10px;
   padding-left: 10px;
+  // 吸顶标题避开绝对定位的 tabs header
+  --m-group-list-header-sticky-top: var(
+    --el-tabs-header-height,
+    var(--td-comp-size-xxl, 48px)
+  );
 
   > .m-container-tab {
     > .tmagic-design-tabs {
-      > .el-tabs__content {
-        margin-top: var(--el-tabs-header-height);
+      > .el-tabs__content,
+      > .t-tabs__content {
+        margin-top: var(--el-tabs-header-height, var(--td-comp-size-xxl, 48px));
         padding-top: 15px;
+        // 允许吸底按钮相对属性面板滚动容器定位（tabs 默认 overflow:hidden 会截断 sticky）
+        overflow: visible;
+
+        > .el-tab-pane,
+        > .t-tab-panel {
+          overflow: visible;
+        }
       }
-      > .el-tabs__header.is-top {
+      > .el-tabs__header.is-top,
+      > .t-tabs__header {
         position: absolute;
         top: 0;
         width: 100%;

package/src/theme/scroll-bar.scss

@@ -0,0 +1,64 @@
+.m-editor-scroll-bar {
+  position: absolute;
+  background-color: transparent;
+  opacity: 0.3;
+  transition:
+    background-color 0.2s linear,
+    opacity 0.2s linear;
+
+  .m-editor-scroll-bar-thumb {
+    background-color: #aaa;
+    border-radius: 6px;
+    position: absolute;
+  }
+
+  &.horizontal {
+    width: 100%;
+    height: 15px;
+    bottom: 0;
+
+    .m-editor-scroll-bar-thumb {
+      height: 6px;
+      transition:
+        background-color 0.2s linear,
+        height 0.2s ease-in-out;
+      bottom: 2px;
+    }
+  }
+
+  &.vertical {
+    height: 100%;
+    width: 15px;
+    right: 5px;
+
+    .m-editor-scroll-bar-thumb {
+      width: 6px;
+      transition:
+        background-color 0.2s linear,
+        width 0.2s ease-in-out;
+      right: 2px;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    background-color: #eee;
+    opacity: 0.9;
+
+    .m-editor-scroll-bar-thumb {
+      background-color: #999;
+    }
+
+    &.horizontal {
+      .m-editor-scroll-bar-thumb {
+        height: 11px;
+      }
+    }
+
+    &.vertical {
+      .m-editor-scroll-bar-thumb {
+        width: 11px;
+      }
+    }
+  }
+}

package/src/theme/theme.scss

@@ -28,4 +28,7 @@
 @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";
 @use "./style-setter/index.scss";

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

@@ -1,11 +1,10 @@
 // magic-admin 主题：所有规则均以 `.m-editor.m-editor--magic-admin` 为前缀，
 // 仅在 `<MEditor theme="magic-admin" />` 时生效，避免污染默认样式。
 
-@use "@tmagic/table/src/theme/index.scss" as tMagicTable;
-@use "../../theme.scss";
-
 @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 {
@@ -18,11 +17,77 @@
 // 仅作用于编辑器内部 DOM 的具体样式仍保留「双类」，避免误中 portal 上只挂 `m-theme--*`
 // 的节点。
 .m-editor.m-editor--magic-admin {
-  // 属性面板内的 input 圆角覆写：
-  // - 原默认主题里 `.m-editor-props-panel .el-input__wrapper { border-radius: 0; }`
-  //   specificity 为 (0, 2, 0)，已迁出（见 ../../props-panel.scss）；
-  // - 这里在前面再套一层 `.m-editor.m-editor--magic-admin`，specificity 升到 (0, 3, 0)，
-  //   保证主题启用时优先级一定能压过原规则及其它默认样式。
+  // 主题级 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;
   }
@@ -72,7 +137,8 @@
   .m-editor-props-form-panel-form {
     > .m-container-tab {
       > .tmagic-design-tabs {
-        > .el-tabs__content {
+        > .el-tabs__content,
+        > .t-tabs__content {
           background-color: #fafafa;
           border-radius: 8px;
           padding-left: 16px;
@@ -81,6 +147,16 @@
       }
     }
   }
+
+  .m-fields-group-list-footer.is-sticky-full {
+    --m-group-list-footer-bg: #fafafa;
+    background-color: #fafafa;
+  }
+
+  .m-fields-group-list-item .m-fields-group-list-footer.is-sticky-full {
+    --m-group-list-footer-bg: #fff;
+    background-color: #fff;
+  }
 }
 
 .m-editor.m-theme--magic-admin {
@@ -123,3 +199,27 @@
     }
   }
 }
+
+.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

@@ -0,0 +1,9 @@
+.m-fields-ui-select {
+  cursor: pointer;
+  i {
+    margin-right: 3px;
+  }
+  span {
+    color: var(--el-color-primary, #2882e0);
+  }
+}