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

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,27 @@
         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;
         }
         &.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 +68,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;
   }

package/src/type.ts

@@ -297,6 +297,12 @@ export interface UiState {
   stageRect: StageRect;
   /** 编辑器列布局每一列的宽度，分为左中右三列 */
   columnWidth: GetColumnWidth;
+  /** 编辑器列布局左侧列最小宽度 */
+  minLeftColumnWidth: number;
+  /** 编辑器列布局中间列最小宽度 */
+  minCenterColumnWidth: number;
+  /** 编辑器列布局右侧列最小宽度 */
+  minRightColumnWidth: number;
   /** 是否显示画布参考线，true: 显示，false: 不显示，默认为true */
   showGuides: boolean;
   /** 画布上是否存在参考线 */

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

@@ -4,7 +4,7 @@ import StageCore, { CanDropIn, ContainerHighlightType, CustomizeMoveableOptions,
 import designPlugin, { ButtonProps, DesignPluginOptions } 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;
   /** 画布上是否存在参考线 */
@@ -3279,7 +3285,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";
@@ -6334,6 +6340,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 +6372,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;