@tmagic/editor 1.8.0-manmanyu.21 → 1.8.0-manmanyu.23

package/src/fields/DataSourceFields.vue

@@ -8,10 +8,12 @@
     </div>
 
     <FloatingBox
+      :body-style="{ padding: '0 16px' }"
       v-model:visible="addDialogVisible"
       v-model:width="width"
       v-model:height="editorHeight"
       :title="fieldTitle"
+      :framework-width="frameworkWidth"
       :position="boxPosition"
     >
       <template #body>
@@ -28,10 +30,12 @@
     </FloatingBox>
 
     <FloatingBox
+      :body-style="{ padding: '0 16px' }"
       v-model:visible="addFromJsonDialogVisible"
       v-model:width="width"
       v-model:height="editorHeight"
       title="快速添加数据定义"
+      :framework-width="frameworkWidth"
       :position="boxPosition"
     >
       <template #body>
@@ -358,6 +362,7 @@ const { height: editorHeight } = useEditorContentHeight();
 
 const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
 const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
+const frameworkWidth = computed(() => uiService.get('frameworkRect')?.width || 0);
 
 /**
  * 由 DataSourceConfigPanel 注入：打开数据源详情后需要直接打开的字段路径（字段名数组）。

package/src/fields/DataSourceMocks.vue

@@ -7,10 +7,12 @@
     </div>
 
     <FloatingBox
+      :body-style="{ padding: '0 16px' }"
       v-model:visible="addDialogVisible"
       v-model:width="width"
       v-model:height="editorHeight"
       :title="drawerTitle"
+      :framework-width="frameworkWidth"
       :position="boxPosition"
     >
       <template #body>
@@ -254,4 +256,5 @@ const addDialogVisible = defineModel<boolean>('visible', { default: false });
 const { height: editorHeight } = useEditorContentHeight();
 const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
 const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
+const frameworkWidth = computed(() => uiService.get('frameworkRect')?.width || 0);
 </script>

package/src/layouts/Framework.vue

@@ -29,9 +29,9 @@
       right-class="m-editor-framework-right"
       :left="hideSidebar ? undefined : columnWidth.left"
       :right="columnWidth.right"
-      :min-left="hideSidebar ? 0 : MIN_LEFT_COLUMN_WIDTH"
-      :min-right="MIN_RIGHT_COLUMN_WIDTH"
-      :min-center="MIN_CENTER_COLUMN_WIDTH"
+      :min-left="hideSidebar ? 0 : minLeftColumnWidth"
+      :min-right="minRightColumnWidth"
+      :min-center="minCenterColumnWidth"
       :width="frameworkRect.width"
       @change="columnWidthChange"
     >
@@ -82,9 +82,6 @@ import { getEditorConfig } from '@editor/utils/config';
 import {
   DEFAULT_LEFT_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';
 
@@ -122,6 +119,10 @@ const showSrc = computed(() => uiService.get('showSrc'));
 
 const columnWidth = computed(() => uiService.get('columnWidth'));
 
+const minLeftColumnWidth = computed(() => uiService.get('minLeftColumnWidth'));
+const minCenterColumnWidth = computed(() => uiService.get('minCenterColumnWidth'));
+const minRightColumnWidth = computed(() => uiService.get('minRightColumnWidth'));
+
 watch(pageLength, () => {
   splitViewRef.value?.updateWidth();
 });

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

@@ -48,6 +48,7 @@
         :load-config="loadConfig"
         :self-diff-field-types="selfDiffFieldTypes"
         :services="props.services"
+        :size="props.size"
         height="70vh"
       />
 
@@ -77,7 +78,14 @@
 import { computed, ref, watch } from 'vue';
 import { isEqual } from 'lodash-es';
 
-import { TMagicButton, TMagicDialog, TMagicRadioButton, TMagicRadioGroup, TMagicTag } from '@tmagic/design';
+import {
+  type FieldSize,
+  TMagicButton,
+  TMagicDialog,
+  TMagicRadioButton,
+  TMagicRadioGroup,
+  TMagicTag,
+} from '@tmagic/design';
 import type { FormState } from '@tmagic/form';
 
 import CompareForm from '@editor/components/CompareForm.vue';
@@ -104,6 +112,8 @@ const props = withDefaults(
      */
     loadConfig?: CompareFormLoadConfig;
     width?: string;
+    /** 差异对比表单内组件的尺寸（透传给 CompareForm 的 `size`），可选 'large' | 'default' | 'small'。 */
+    size?: FieldSize;
     isConfirm?: boolean;
     onConfirm?: () => void;
     selfDiffFieldTypes?: string[];

package/src/layouts/history-list/useHistoryRevert.ts

@@ -95,6 +95,7 @@ const mountHistoryDiffDialog = async (
     selfDiffFieldTypes: options.selfDiffFieldTypes,
     compareFormState: options.compareFormState,
     width: options.width,
+    size: options.size ?? options.services?.uiService?.get('propsPanelSize'),
     onClose: options.onClose,
   });
   if (options.appContext) {
@@ -223,6 +224,7 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
         services,
         ...extra,
         width: extra?.width ?? dialogWidth,
+        size: extra?.size,
       });
     }
     return confirmRevert();
@@ -382,6 +384,7 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
       loadConfig: revertOptions.loadConfig,
       selfDiffFieldTypes: revertOptions.selfDiffFieldTypes,
       width: revertOptions.width,
+      size: revertOptions.size,
     });
     if (!confirmed) return null;
     return await revertOptions.revert();
@@ -399,6 +402,7 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
         services,
         ...extra,
         width: extra?.width ?? dialogWidth,
+        size: extra?.size,
       });
   };
 

package/src/layouts/props-panel/use-style-panel.ts

@@ -2,7 +2,7 @@ import { computed, type Ref, watch } from 'vue';
 
 import { Protocol } from '@editor/services/storage';
 import { Services } from '@editor/type';
-import { MIN_CENTER_COLUMN_WIDTH, RIGHT_COLUMN_WIDTH_STORAGE_KEY } from '@editor/utils/const';
+import { RIGHT_COLUMN_WIDTH_STORAGE_KEY } from '@editor/utils/const';
 
 export const useStylePanel = (
   { uiService, storageService }: Pick<Services, 'uiService' | 'storageService'>,
@@ -47,8 +47,9 @@ export const useStylePanel = (
     }
 
     if (columnWidth.center < 0) {
-      columnWidth.right = columnWidth.right + columnWidth.center - MIN_CENTER_COLUMN_WIDTH;
-      columnWidth.center = MIN_CENTER_COLUMN_WIDTH;
+      const minCenterColumnWidth = uiService.get('minCenterColumnWidth');
+      columnWidth.right = columnWidth.right + columnWidth.center - minCenterColumnWidth;
+      columnWidth.center = minCenterColumnWidth;
 
       propsPanelWidth.value = columnWidth.right / 2;
     }

package/src/layouts/sidebar/Sidebar.vue

@@ -132,6 +132,7 @@
         v-model:height="columnLeftHeight"
         :width="columnLeftWidth"
         :title="config.text"
+        :framework-width="frameworkWidth"
         :position="{
           left: floatBoxStates[config.$key].left,
           top: floatBoxStates[config.$key].top,
@@ -221,6 +222,7 @@ const taskLength = computed(() => depService.get('taskLength'));
 const tipsBarVisible = ref(true);
 
 const columnLeftWidth = computed(() => uiService.get('columnWidth')[ColumnLayout.LEFT]);
+const frameworkWidth = computed(() => uiService.get('frameworkRect')?.width || 0);
 const { height: editorContentHeight } = useEditorContentHeight();
 const columnLeftHeight = ref(0);
 

package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue

@@ -1,9 +1,11 @@
 <template>
   <FloatingBox
+    :body-style="{ padding: '0 16px' }"
     v-model:visible="boxVisible"
     v-model:width="width"
     v-model:height="editorHeight"
     :title="title"
+    :framework-width="frameworkWidth"
     :position="boxPosition"
   >
     <template #body>
@@ -65,6 +67,7 @@ const { height: editorHeight } = useEditorContentHeight();
 
 const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
 const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
+const frameworkWidth = computed(() => uiService.get('frameworkRect')?.width || 0);
 
 /** 供「方法定义」tab 内的字段消费，用于打开数据源详情后自动打开指定方法 */
 provide(

package/src/layouts/workspace/viewer/NodeListMenu.vue

@@ -8,6 +8,7 @@
     ref="box"
     v-model:visible="visible"
     title="当前位置下的组件"
+    :framework-width="frameworkWidth"
     :position="menuPosition"
   >
     <template #body>
@@ -36,7 +37,9 @@ import { useNodeStatus } from '@editor/layouts/sidebar/layer/use-node-status';
 import type { TreeNodeData } from '@editor/type';
 
 const services = useServices();
-const { editorService } = services;
+const { editorService, uiService } = services;
+
+const frameworkWidth = computed(() => uiService.get('frameworkRect')?.width || 0);
 
 const visible = ref(false);
 const buttonVisible = ref(false);

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';
 
@@ -54,6 +57,9 @@ const state = shallowReactive<UiState>({
       storageService.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) ||
       DEFAULT_RIGHT_COLUMN_WIDTH,
   },
+  minLeftColumnWidth: MIN_LEFT_COLUMN_WIDTH,
+  minCenterColumnWidth: MIN_CENTER_COLUMN_WIDTH,
+  minRightColumnWidth: MIN_RIGHT_COLUMN_WIDTH,
   showGuides: true,
   hasGuides: false,
   showRule: true,

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/themes/magic-admin/index.scss

@@ -19,9 +19,18 @@
 .m-editor.m-editor--magic-admin {
   .m-editor-sidebar {
     .m-editor-sidebar-header {
-      padding: 8px 0;
-      width: 52px;
+      // 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;
@@ -29,22 +38,28 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        padding: 6px 0;
-        width: 40px;
+        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.1);
+          background-color: rgba(0, 0, 0, 0.05);
         }
         > i {
-          color: #ffffff;
+          color: #84909d;
+          font-size: 20px;
         }
         &.is-active {
-          background-color: #fff;
-          border-radius: 4px;
+          background-color: var(--el-button-hover-bg-color, rgb(230, 238, 253));
           color: var(--el-color-primary);
           &:hover {
-            background-color: #fff;
+            background-color: var(
+              --el-button-hover-bg-color,
+              rgb(230, 238, 253)
+            );
           }
           > i {
             color: var(--el-color-primary);
@@ -54,20 +69,19 @@
           }
         }
         .magic-editor-tab-panel-title {
-          font-size: 10px;
+          font-size: 12px;
           line-height: 14px;
-          font-weight: 600;
+          font-weight: 400;
+          margin: 0 4px;
+          width: 52px;
+          text-align: center;
         }
       }
     }
+    .m-editor-sidebar-content {
+      width: calc(100% - 61px);
+    }
   }
-  .m-editor-sidebar .m-editor-sidebar-header .m-editor-sidebar-header-item
-
-  // 属性面板内的 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)，
-  //   保证主题启用时优先级一定能压过原规则及其它默认样式。
   .m-editor-props-panel .el-input__wrapper {
     border-radius: 4px;
   }
@@ -168,3 +182,15 @@
     }
   }
 }
+
+.m-editor.m-theme--magic-admin {
+  .m-editor-nav-menu {
+    .menu-item {
+      > button {
+        > i {
+          font-size: 16px;
+        }
+      }
+    }
+  }
+}

package/src/type.ts

@@ -33,6 +33,7 @@ import type {
   MPage,
   MPageFragment,
 } from '@tmagic/core';
+import type { FieldSize } from '@tmagic/design';
 import type { ChangeRecord, FormConfig, FormState, TableColumnConfig, TypeFunction } from '@tmagic/form';
 import type StageCore from '@tmagic/stage';
 import type {
@@ -297,6 +298,12 @@ export interface UiState {
   stageRect: StageRect;
   /** 编辑器列布局每一列的宽度，分为左中右三列 */
   columnWidth: GetColumnWidth;
+  /** 编辑器列布局左侧列最小宽度 */
+  minLeftColumnWidth: number;
+  /** 编辑器列布局中间列最小宽度 */
+  minCenterColumnWidth: number;
+  /** 编辑器列布局右侧列最小宽度 */
+  minRightColumnWidth: number;
   /** 是否显示画布参考线，true: 显示，false: 不显示，默认为true */
   showGuides: boolean;
   /** 画布上是否存在参考线 */
@@ -1448,6 +1455,11 @@ export interface CustomDiffFormOptions {
    * 如 `'1200px'` / `'80%'`。缺省时使用弹窗内置默认宽度（900px）。
    */
   width?: string;
+  /**
+   * 差异 / 确认回滚弹窗内 form 表单的尺寸（透传给 CompareForm 的 `size`），
+   * 可选 `'large' | 'default' | 'small'`，缺省时使用表单内置默认尺寸。
+   */
+  size?: FieldSize;
 }
 
 /**

package/src/utils/const.ts

@@ -8,8 +8,8 @@ export const PROPS_PANEL_WIDTH_STORAGE_KEY = '$MagicEditorPropsPanelWidthData';
 export const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 export const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 
-// 2026-06-11 设计稿修改，固定左侧栏存在时最小宽度为252
-export const MIN_LEFT_COLUMN_WIDTH = 252;
+// 2026-06-11 设计稿修改，固定左侧栏存在时最小宽度为260
+export const MIN_LEFT_COLUMN_WIDTH = 260;
 export const MIN_CENTER_COLUMN_WIDTH = 400;
 export const MIN_RIGHT_COLUMN_WIDTH = 300;
 

package/types/index.d.ts

@@ -1,10 +1,10 @@
 import formPlugin, { CascaderOption, ChangeRecord, CodeSelectColConfig, CodeSelectConfig, CondOpSelectConfig, ContainerChangeEventData, DataSourceFieldSelectConfig, DataSourceFieldsConfig, DataSourceInputConfig, DataSourceMethodSelectConfig, DataSourceMethodsConfig, DataSourceMocksConfig, DataSourceSelect, DisplayCondsConfig, EventSelectConfig, FieldProps, FormConfig, FormInstallOptions, FormState, FormValue, KeyValueConfig, MForm, PageFragmentSelectConfig, TabPaneConfig, TableColumnConfig, TypeFunction } from "@tmagic/form";
 import tablePlugin from "@tmagic/table";
 import StageCore, { CanDropIn, ContainerHighlightType, CustomizeMoveableOptions, GuidesOptions, RenderType, UpdateDragEl, default as StageCore$1 } from "@tmagic/stage";
-import designPlugin, { ButtonProps, DesignPluginOptions } from "@tmagic/design";
+import designPlugin, { ButtonProps, DesignPluginOptions, FieldSize } from "@tmagic/design";
 import Gesto, { OnDrag, OnDrag as OnDrag$1 } from "gesto";
 import { CodeBlockContent, CodeBlockDSL, DataSchema, DataSourceFieldType, DataSourceSchema, DepData, DepExtendedData, DepTargetType, DepTargetType as DepTargetType$1, DisplayCond, EventOption, Id, MApp, MContainer, MNode, MPage, MPageFragment, NodeType, Target, TargetOptions } from "@tmagic/core";
-import { App, AppContext, Component, ComputedRef, Ref, ShallowRef } from "vue";
+import { App, AppContext, CSSProperties, Component, ComputedRef, Ref, ShallowRef } from "vue";
 import EventEmitter$1, { EventEmitter } from "events";
 import * as Monaco from "monaco-editor";
 import Sortable, { Options, SortableEvent } from "sortablejs";
@@ -1742,6 +1742,12 @@ interface UiState {
   stageRect: StageRect;
   /** 编辑器列布局每一列的宽度，分为左中右三列 */
   columnWidth: GetColumnWidth;
+  /** 编辑器列布局左侧列最小宽度 */
+  minLeftColumnWidth: number;
+  /** 编辑器列布局中间列最小宽度 */
+  minCenterColumnWidth: number;
+  /** 编辑器列布局右侧列最小宽度 */
+  minRightColumnWidth: number;
   /** 是否显示画布参考线，true: 显示，false: 不显示，默认为true */
   showGuides: boolean;
   /** 画布上是否存在参考线 */
@@ -2680,6 +2686,11 @@ interface CustomDiffFormOptions {
    * 如 `'1200px'` / `'80%'`。缺省时使用弹窗内置默认宽度（900px）。
    */
   width?: string;
+  /**
+   * 差异 / 确认回滚弹窗内 form 表单的尺寸（透传给 CompareForm 的 `size`），
+   * 可选 `'large' | 'default' | 'small'`，缺省时使用表单内置默认尺寸。
+   */
+  size?: FieldSize;
 }
 /**
  * 业务自有历史复用「单步回滚」交互（{@link useHistoryRevert} 的 `confirmAndRevert`）的入参。
@@ -3279,7 +3290,7 @@ declare const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData
 declare const PROPS_PANEL_WIDTH_STORAGE_KEY = "$MagicEditorPropsPanelWidthData";
 declare const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 declare const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
-declare const MIN_LEFT_COLUMN_WIDTH = 252;
+declare const MIN_LEFT_COLUMN_WIDTH = 260;
 declare const MIN_CENTER_COLUMN_WIDTH = 400;
 declare const MIN_RIGHT_COLUMN_WIDTH = 300;
 declare const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
@@ -6117,6 +6128,11 @@ type __VLS_Props$8 = {
    */
   baseFormState?: FormState; /** 需要走 self diff 的字段类型（例如 mod-cond）。 */
   selfDiffFieldTypes?: string[];
+  /**
+   * 表单内组件的尺寸（透传给 MForm 的 `size`），可选 'large' | 'default' | 'small'。
+   * 缺省时使用 MForm 内置默认尺寸。
+   */
+  size?: FieldSize;
   /**
    * 自定义 FormConfig 加载逻辑。传入后将接管内置的按 `category`(node/data-source/code-block)
    * 取配置逻辑，调用方可根据业务自行返回（或异步返回）表单配置。可通过
@@ -6261,7 +6277,8 @@ type __VLS_Props$7 = {
    * 取配置逻辑，可通过 `ctx.defaultLoadConfig()` 复用默认结果再做二次加工。
    */
   loadConfig?: CompareFormLoadConfig;
-  width?: string;
+  width?: string; /** 差异对比表单内组件的尺寸（透传给 CompareForm 的 `size`），可选 'large' | 'default' | 'small'。 */
+  size?: FieldSize;
   isConfirm?: boolean;
   onConfirm?: () => void;
   selfDiffFieldTypes?: string[];
@@ -6334,6 +6351,9 @@ interface Position {
 type __VLS_Props$6 = {
   position?: Position;
   title?: string;
+  bodyStyle?: CSSProperties; /** 浮窗初始样式，会与内部计算样式合并，外部传入优先 */
+  initialStyle?: CSSProperties; /** 用于约束浮窗 left 的容器宽度，传入时按宽度收敛 left，避免超出右边界；默认取视窗宽度 */
+  frameworkWidth?: number;
   beforeClose?: (_done: (_cancel?: boolean) => void) => void;
 };
 type __VLS_ModelProps = {
@@ -6363,6 +6383,8 @@ declare const __VLS_base$2: import("@vue/runtime-core").DefineComponent<__VLS_Pu
 }>, {
   title: string;
   position: Position;
+  initialStyle: CSSProperties;
+  frameworkWidth: number;
 }, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$6: __VLS_WithSlots$2<typeof __VLS_base$2, __VLS_Slots$2>;
 declare const _default$20: typeof __VLS_export$6;