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

package/dist/tmagic-editor.umd.cjs

@@ -8182,7 +8182,7 @@
 	var PROPS_PANEL_WIDTH_STORAGE_KEY = "$MagicEditorPropsPanelWidthData";
 	var DEFAULT_LEFT_COLUMN_WIDTH = 310;
 	var DEFAULT_RIGHT_COLUMN_WIDTH = 480;
-	var MIN_LEFT_COLUMN_WIDTH = 252;
+	var MIN_LEFT_COLUMN_WIDTH = 260;
 	var MIN_CENTER_COLUMN_WIDTH = 400;
 	var MIN_RIGHT_COLUMN_WIDTH = 300;
 	var H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
@@ -8207,6 +8207,9 @@
 			center: 0,
 			right: storage_default.getItem("$MagicEditorRightColumnWidthData", { protocol: Protocol.NUMBER }) || 480
 		},
+		minLeftColumnWidth: 260,
+		minCenterColumnWidth: 400,
+		minRightColumnWidth: 300,
 		showGuides: true,
 		hasGuides: false,
 		showRule: true,
@@ -10360,6 +10363,9 @@
 			const pageLength = (0, vue.computed)(() => editorService.get("pageLength") || 0);
 			const showSrc = (0, vue.computed)(() => uiService.get("showSrc"));
 			const columnWidth = (0, vue.computed)(() => uiService.get("columnWidth"));
+			const minLeftColumnWidth = (0, vue.computed)(() => uiService.get("minLeftColumnWidth"));
+			const minCenterColumnWidth = (0, vue.computed)(() => uiService.get("minCenterColumnWidth"));
+			const minRightColumnWidth = (0, vue.computed)(() => uiService.get("minRightColumnWidth"));
 			(0, vue.watch)(pageLength, () => {
 				splitViewRef.value?.updateWidth();
 			});
@@ -10426,9 +10432,9 @@
 						"right-class": "m-editor-framework-right",
 						left: __props.hideSidebar ? void 0 : columnWidth.value.left,
 						right: columnWidth.value.right,
-						"min-left": __props.hideSidebar ? 0 : (0, vue.unref)(252),
-						"min-right": (0, vue.unref)(300),
-						"min-center": (0, vue.unref)(400),
+						"min-left": __props.hideSidebar ? 0 : minLeftColumnWidth.value,
+						"min-right": minRightColumnWidth.value,
+						"min-center": minCenterColumnWidth.value,
 						width: frameworkRect.value.width,
 						onChange: columnWidthChange
 					}, (0, vue.createSlots)({
@@ -12949,8 +12955,9 @@
 				columnWidth.center += propsPanelWidth.value;
 			}
 			if (columnWidth.center < 0) {
-				columnWidth.right = columnWidth.right + columnWidth.center - 400;
-				columnWidth.center = 400;
+				const minCenterColumnWidth = uiService.get("minCenterColumnWidth");
+				columnWidth.right = columnWidth.right + columnWidth.center - minCenterColumnWidth;
+				columnWidth.center = minCenterColumnWidth;
 				propsPanelWidth.value = columnWidth.right / 2;
 			}
 			storageService.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, columnWidth.right, { protocol: Protocol.NUMBER });
@@ -13160,6 +13167,9 @@
 				top: 0
 			}) },
 			title: { default: "" },
+			bodyStyle: {},
+			initialStyle: { default: () => ({}) },
+			frameworkWidth: { default: 0 },
 			beforeClose: {}
 		}, {
 			"width": { default: 0 },
@@ -13197,19 +13207,51 @@
 				if (targetEl.value) return targetEl.value.clientHeight - titleHeight.value;
 				return "auto";
 			});
-			const { uiService } = useServices();
-			const frameworkWidth = (0, vue.computed)(() => uiService.get("frameworkRect").width || 0);
 			const style = (0, vue.computed)(() => {
 				let { left } = props.position;
-				if (width.value) left = left + width.value > frameworkWidth.value ? frameworkWidth.value - width.value : left;
+				const frameworkWidth = props.frameworkWidth || globalThis.window?.innerWidth || 0;
+				if (width.value && frameworkWidth) left = left + width.value > frameworkWidth ? frameworkWidth - width.value : left;
 				return {
 					left: `${left}px`,
 					top: `${props.position.top}px`,
 					width: width.value ? `${width.value}px` : "auto",
-					height: height.value ? `${height.value}px` : "auto"
+					height: height.value ? `${height.value}px` : "auto",
+					...props.initialStyle
 				};
 			});
 			let moveable$1 = null;
+			let dragMask = null;
+			let dragMaskVisible = false;
+			const bindDragMaskSafety = () => {
+				globalThis.window?.addEventListener("pointerup", hideDragMask, true);
+				globalThis.window?.addEventListener("blur", hideDragMask);
+				globalThis.document?.addEventListener("visibilitychange", hideDragMask);
+			};
+			const unbindDragMaskSafety = () => {
+				globalThis.window?.removeEventListener("pointerup", hideDragMask, true);
+				globalThis.window?.removeEventListener("blur", hideDragMask);
+				globalThis.document?.removeEventListener("visibilitychange", hideDragMask);
+			};
+			const showDragMask = () => {
+				if (dragMaskVisible) return;
+				if (!dragMask) {
+					dragMask = globalThis.document.createElement("div");
+					dragMask.className = "m-editor-float-box-drag-mask";
+				}
+				globalThis.document.body.appendChild(dragMask);
+				dragMaskVisible = true;
+				bindDragMaskSafety();
+				const setMaskZIndex = () => {
+					if (dragMask) dragMask.style.zIndex = `${curZIndex.value + 1}`;
+				};
+				setMaskZIndex();
+				(0, vue.nextTick)(setMaskZIndex);
+			};
+			const hideDragMask = () => {
+				unbindDragMaskSafety();
+				dragMask?.parentNode?.removeChild(dragMask);
+				dragMaskVisible = false;
+			};
 			const initMoveable = () => {
 				moveable$1 = new moveable.default(globalThis.document.body, {
 					className: "m-editor-floating-box-moveable",
@@ -13232,6 +13274,10 @@
 						position: "css"
 					}
 				});
+				moveable$1.on("drag", showDragMask);
+				moveable$1.on("resize", showDragMask);
+				moveable$1.on("dragEnd", hideDragMask);
+				moveable$1.on("resizeEnd", hideDragMask);
 				moveable$1.on("drag", (e) => {
 					e.target.style.transform = e.transform;
 				});
@@ -13244,6 +13290,7 @@
 				});
 			};
 			const destroyMoveable = () => {
+				hideDragMask();
 				moveable$1?.destroy();
 				moveable$1 = null;
 			};
@@ -13283,15 +13330,16 @@
 				return visible.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, {
 					key: 0,
 					to: "body"
-				}, [(0, vue.createElementVNode)("div", {
+				}, [(0, vue.createElementVNode)("div", (0, vue.mergeProps)({
 					ref: "target",
-					class: (0, vue.normalizeClass)(["m-editor-float-box", (0, vue.unref)(themeClass)]),
-					style: (0, vue.normalizeStyle)({
+					class: ["m-editor-float-box", (0, vue.unref)(themeClass)]
+				}, _ctx.$attrs, {
+					style: {
 						...style.value,
 						zIndex: curZIndex.value
-					}),
+					},
 					onMousedown: nextZIndex
-				}, [(0, vue.createElementVNode)("div", _hoisted_1$56, [(0, vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(__props.title), 1)]), (0, vue.createElementVNode)("div", null, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
+				}), [(0, vue.createElementVNode)("div", _hoisted_1$56, [(0, vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(__props.title), 1)]), (0, vue.createElementVNode)("div", null, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
 					link: "",
 					size: "small",
 					onClick: closeHandler
@@ -13300,8 +13348,11 @@
 					_: 1
 				})])], 512), (0, vue.createElementVNode)("div", {
 					class: "m-editor-float-box-body",
-					style: (0, vue.normalizeStyle)({ height: `${bodyHeight.value}px` })
-				}, [(0, vue.renderSlot)(_ctx.$slots, "body")], 4)], 38)])) : (0, vue.createCommentVNode)("v-if", true);
+					style: (0, vue.normalizeStyle)({
+						height: `${bodyHeight.value}px`,
+						...__props.bodyStyle
+					})
+				}, [(0, vue.renderSlot)(_ctx.$slots, "body")], 4)], 16)])) : (0, vue.createCommentVNode)("v-if", true);
 			};
 		}
 	});
@@ -13423,6 +13474,7 @@
 				changedValue.value = void 0;
 			};
 			const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, (0, vue.inject)("parentFloating", (0, vue.ref)(null)));
+			const frameworkWidth = (0, vue.computed)(() => uiService.get("frameworkRect")?.width || 0);
 			(0, vue.watch)(boxVisible, (visible) => {
 				(0, vue.nextTick)(() => {
 					if (!visible) emit("close");
@@ -13448,7 +13500,9 @@
 						"onUpdate:width": _cache[2] || (_cache[2] = ($event) => width.value = $event),
 						height: (0, vue.unref)(codeBlockEditorHeight),
 						"onUpdate:height": _cache[3] || (_cache[3] = ($event) => (0, vue.isRef)(codeBlockEditorHeight) ? codeBlockEditorHeight.value = $event : null),
+						"body-style": { padding: "0 16px" },
 						title: __props.content.name ? `${__props.disabled ? "查看" : "编辑"}${__props.content.name}` : "新增代码",
+						"framework-width": frameworkWidth.value,
 						position: (0, vue.unref)(boxPosition),
 						"before-close": beforeClose
 					}, {
@@ -13490,6 +13544,7 @@
 						"width",
 						"height",
 						"title",
+						"framework-width",
 						"position"
 					]),
 					((0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, { to: "body" }, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicDialog), {
@@ -14377,6 +14432,7 @@
 			const dataSourceConfig = (0, vue.ref)([]);
 			const { height: editorHeight } = useEditorContentHeight();
 			const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, (0, vue.inject)("parentFloating", (0, vue.ref)(null)));
+			const frameworkWidth = (0, vue.computed)(() => uiService.get("frameworkRect")?.width || 0);
 			/** 供「方法定义」tab 内的字段消费，用于打开数据源详情后自动打开指定方法 */
 			(0, vue.provide)("editingDataSourceMethodName", (0, vue.computed)(() => props.editMethodName));
 			/** 供「数据定义」tab 内的字段消费，用于打开数据源详情后自动打开指定字段 */
@@ -14415,6 +14471,7 @@
 			});
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)(FloatingBox_default, {
+					"body-style": { padding: "0 16px" },
 					visible: boxVisible.value,
 					"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => boxVisible.value = $event),
 					width: width.value,
@@ -14422,6 +14479,7 @@
 					height: (0, vue.unref)(editorHeight),
 					"onUpdate:height": _cache[2] || (_cache[2] = ($event) => (0, vue.isRef)(editorHeight) ? editorHeight.value = $event : null),
 					title: __props.title,
+					"framework-width": frameworkWidth.value,
 					position: (0, vue.unref)(boxPosition)
 				}, {
 					body: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MFormBox), {
@@ -14445,6 +14503,7 @@
 					"width",
 					"height",
 					"title",
+					"framework-width",
 					"position"
 				]);
 			};
@@ -15774,6 +15833,7 @@
 			const taskLength = (0, vue.computed)(() => depService.get("taskLength"));
 			const tipsBarVisible = (0, vue.ref)(true);
 			const columnLeftWidth = (0, vue.computed)(() => uiService.get("columnWidth")[ColumnLayout.LEFT]);
+			const frameworkWidth = (0, vue.computed)(() => uiService.get("frameworkRect")?.width || 0);
 			const { height: editorContentHeight } = useEditorContentHeight();
 			const columnLeftHeight = (0, vue.ref)(0);
 			const unWatchEditorContentHeight = (0, vue.watch)(editorContentHeight, (height) => {
@@ -16014,6 +16074,7 @@
 						"onUpdate:height": _cache[2] || (_cache[2] = ($event) => columnLeftHeight.value = $event),
 						width: columnLeftWidth.value,
 						title: config.text,
+						"framework-width": frameworkWidth.value,
 						position: {
 							left: (0, vue.unref)(floatBoxStates)[config.$key].left,
 							top: (0, vue.unref)(floatBoxStates)[config.$key].top
@@ -16030,6 +16091,7 @@
 						"height",
 						"width",
 						"title",
+						"framework-width",
 						"position"
 					])) : (0, vue.createCommentVNode)("v-if", true)], 64);
 				}), 256))]))], 64);
@@ -16219,7 +16281,8 @@
 		__name: "NodeListMenu",
 		setup(__props) {
 			const services = useServices();
-			const { editorService } = services;
+			const { editorService, uiService } = services;
+			const frameworkWidth = (0, vue.computed)(() => uiService.get("frameworkRect")?.width || 0);
 			const visible = (0, vue.ref)(false);
 			const buttonVisible = (0, vue.ref)(false);
 			const buttonEl = (0, vue.useTemplateRef)("button");
@@ -16279,6 +16342,7 @@
 					visible: visible.value,
 					"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
 					title: "当前位置下的组件",
+					"framework-width": frameworkWidth.value,
 					position: menuPosition.value
 				}, {
 					body: (0, vue.withCtx)(() => [(0, vue.createVNode)(Tree_default, {
@@ -16288,7 +16352,11 @@
 						onNodeClick: clickHandler
 					}, null, 8, ["data", "node-status-map"])]),
 					_: 1
-				}, 8, ["visible", "position"])) : (0, vue.createCommentVNode)("v-if", true)], 64);
+				}, 8, [
+					"visible",
+					"framework-width",
+					"position"
+				])) : (0, vue.createCommentVNode)("v-if", true)], 64);
 			};
 		}
 	});
@@ -19924,6 +19992,7 @@
 			const addFromJsonDialogVisible = (0, vue.useModel)(__props, "visible1");
 			const { height: editorHeight } = useEditorContentHeight();
 			const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, (0, vue.inject)("parentFloating", (0, vue.ref)(null)));
+			const frameworkWidth = (0, vue.computed)(() => uiService.get("frameworkRect")?.width || 0);
 			/**
 			* 由 DataSourceConfigPanel 注入：打开数据源详情后需要直接打开的字段路径（字段名数组）。
 			* 当前层消费 path[0]，并把剩余路径下发给嵌套字段，实现逐层打开。
@@ -19964,6 +20033,7 @@
 						_: 1
 					}, 8, ["disabled"])])) : (0, vue.createCommentVNode)("v-if", true),
 					(0, vue.createVNode)(FloatingBox_default, {
+						"body-style": { padding: "0 16px" },
 						visible: addDialogVisible.value,
 						"onUpdate:visible": _cache[2] || (_cache[2] = ($event) => addDialogVisible.value = $event),
 						width: width.value,
@@ -19971,6 +20041,7 @@
 						height: (0, vue.unref)(editorHeight),
 						"onUpdate:height": _cache[4] || (_cache[4] = ($event) => (0, vue.isRef)(editorHeight) ? editorHeight.value = $event : null),
 						title: fieldTitle.value,
+						"framework-width": frameworkWidth.value,
 						position: (0, vue.unref)(boxPosition)
 					}, {
 						body: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MFormBox), {
@@ -19993,9 +20064,11 @@
 						"width",
 						"height",
 						"title",
+						"framework-width",
 						"position"
 					]),
 					(0, vue.createVNode)(FloatingBox_default, {
+						"body-style": { padding: "0 16px" },
 						visible: addFromJsonDialogVisible.value,
 						"onUpdate:visible": _cache[5] || (_cache[5] = ($event) => addFromJsonDialogVisible.value = $event),
 						width: width.value,
@@ -20003,6 +20076,7 @@
 						height: (0, vue.unref)(editorHeight),
 						"onUpdate:height": _cache[7] || (_cache[7] = ($event) => (0, vue.isRef)(editorHeight) ? editorHeight.value = $event : null),
 						title: "快速添加数据定义",
+						"framework-width": frameworkWidth.value,
 						position: (0, vue.unref)(boxPosition)
 					}, {
 						body: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MFormBox), {
@@ -20016,6 +20090,7 @@
 						"visible",
 						"width",
 						"height",
+						"framework-width",
 						"position"
 					])
 				]);
@@ -20235,6 +20310,7 @@
 			const addDialogVisible = (0, vue.useModel)(__props, "visible");
 			const { height: editorHeight } = useEditorContentHeight();
 			const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, (0, vue.inject)("parentFloating", (0, vue.ref)(null)));
+			const frameworkWidth = (0, vue.computed)(() => uiService.get("frameworkRect")?.width || 0);
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$40, [
 					(0, vue.createVNode)((0, vue.unref)(_tmagic_table.MagicTable), {
@@ -20252,6 +20328,7 @@
 						_: 1
 					}, 8, ["disabled"])])) : (0, vue.createCommentVNode)("v-if", true),
 					(0, vue.createVNode)(FloatingBox_default, {
+						"body-style": { padding: "0 16px" },
 						visible: addDialogVisible.value,
 						"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => addDialogVisible.value = $event),
 						width: width.value,
@@ -20259,6 +20336,7 @@
 						height: (0, vue.unref)(editorHeight),
 						"onUpdate:height": _cache[3] || (_cache[3] = ($event) => (0, vue.isRef)(editorHeight) ? editorHeight.value = $event : null),
 						title: drawerTitle.value,
+						"framework-width": frameworkWidth.value,
 						position: (0, vue.unref)(boxPosition)
 					}, {
 						body: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MFormBox), {
@@ -20279,6 +20357,7 @@
 						"width",
 						"height",
 						"title",
+						"framework-width",
 						"position"
 					])
 				]);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-manmanyu.21",
+  "version": "1.8.0-manmanyu.22",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.0",
     "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.8.0-manmanyu.21",
-    "@tmagic/table": "1.8.0-manmanyu.21",
-    "@tmagic/form": "1.8.0-manmanyu.21",
-    "@tmagic/utils": "1.8.0-manmanyu.21",
-    "@tmagic/stage": "1.8.0-manmanyu.21"
+    "@tmagic/form": "1.8.0-manmanyu.22",
+    "@tmagic/table": "1.8.0-manmanyu.22",
+    "@tmagic/stage": "1.8.0-manmanyu.22",
+    "@tmagic/utils": "1.8.0-manmanyu.22",
+    "@tmagic/design": "1.8.0-manmanyu.22"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -76,7 +76,7 @@
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
     "vue": "^3.5.38",
-    "@tmagic/core": "1.8.0-manmanyu.21"
+    "@tmagic/core": "1.8.0-manmanyu.22"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/components/CodeBlockEditor.vue

@@ -4,7 +4,9 @@
     v-model:visible="boxVisible"
     v-model:width="width"
     v-model:height="codeBlockEditorHeight"
+    :body-style="{ padding: '0 16px' }"
     :title="content.name ? `${disabled ? '查看' : '编辑'}${content.name}` : '新增代码'"
+    :framework-width="frameworkWidth"
     :position="boxPosition"
     :before-close="beforeClose"
   >
@@ -206,6 +208,7 @@ const closedHandler = () => {
 
 const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
 const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
+const frameworkWidth = computed(() => uiService.get('frameworkRect')?.width || 0);
 
 watch(boxVisible, (visible) => {
   nextTick(() => {

package/src/components/FloatingBox.vue

@@ -3,6 +3,7 @@
     <div
       ref="target"
       :class="['m-editor-float-box', themeClass]"
+      v-bind="$attrs"
       :style="{ ...style, zIndex: curZIndex }"
       @mousedown="nextZIndex"
     >
@@ -14,7 +15,7 @@
           <TMagicButton link size="small" @click="closeHandler"><MIcon :icon="Close"></MIcon></TMagicButton>
         </div>
       </div>
-      <div class="m-editor-float-box-body" :style="{ height: `${bodyHeight}px` }">
+      <div class="m-editor-float-box-body" :style="{ height: `${bodyHeight}px`, ...bodyStyle }">
         <slot name="body"></slot>
       </div>
     </div>
@@ -22,14 +23,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, provide, ref, useTemplateRef, watch } from 'vue';
+import { computed, type CSSProperties, nextTick, onBeforeUnmount, provide, ref, useTemplateRef, watch } from 'vue';
 import { Close } from '@element-plus/icons-vue';
 import VanillaMoveable from 'moveable';
 
 import { TMagicButton, useThemeClass, useZIndex } from '@tmagic/design';
 
 import MIcon from '@editor/components/Icon.vue';
-import { useServices } from '@editor/hooks/use-services';
 
 interface Position {
   left: number;
@@ -44,11 +44,18 @@ const props = withDefaults(
   defineProps<{
     position?: Position;
     title?: string;
+    bodyStyle?: CSSProperties;
+    /** 浮窗初始样式，会与内部计算样式合并，外部传入优先 */
+    initialStyle?: CSSProperties;
+    /** 用于约束浮窗 left 的容器宽度，传入时按宽度收敛 left，避免超出右边界；默认取视窗宽度 */
+    frameworkWidth?: number;
     beforeClose?: (_done: (_cancel?: boolean) => void) => void;
   }>(),
   {
     title: '',
     position: () => ({ left: 0, top: 0 }),
+    initialStyle: () => ({}),
+    frameworkWidth: 0,
   },
 );
 
@@ -77,12 +84,11 @@ const bodyHeight = computed(() => {
   return 'auto';
 });
 
-const { uiService } = useServices();
-const frameworkWidth = computed(() => uiService.get('frameworkRect').width || 0);
 const style = computed(() => {
   let { left } = props.position;
-  if (width.value) {
-    left = left + width.value > frameworkWidth.value ? frameworkWidth.value - width.value : left;
+  const frameworkWidth = props.frameworkWidth || globalThis.window?.innerWidth || 0;
+  if (width.value && frameworkWidth) {
+    left = left + width.value > frameworkWidth ? frameworkWidth - width.value : left;
   }
 
   return {
@@ -90,11 +96,60 @@ const style = computed(() => {
     top: `${props.position.top}px`,
     width: width.value ? `${width.value}px` : 'auto',
     height: height.value ? `${height.value}px` : 'auto',
+    ...props.initialStyle,
   };
 });
 
 let moveable: VanillaMoveable | null = null;
 
+// 拖拽/缩放时用于覆盖 iframe 的遮罩，防止鼠标进入 iframe 区域后事件被 iframe 吞掉导致拖拽丢失
+let dragMask: HTMLDivElement | null = null;
+let dragMaskVisible = false;
+
+// 兜底：正常情况下遮罩由 moveable 的 dragEnd/resizeEnd 移除；但某些极端场景
+// （拖拽中鼠标移出窗口后松开、alt-tab 切走窗口失焦、标签页被隐藏等）结束事件不会触发，
+// 会导致全屏透明遮罩残留、整个编辑器无法点击。这里挂全局 pointerup/blur/visibilitychange 强制收尾。
+const bindDragMaskSafety = () => {
+  globalThis.window?.addEventListener('pointerup', hideDragMask, true);
+  globalThis.window?.addEventListener('blur', hideDragMask);
+  globalThis.document?.addEventListener('visibilitychange', hideDragMask);
+};
+
+const unbindDragMaskSafety = () => {
+  globalThis.window?.removeEventListener('pointerup', hideDragMask, true);
+  globalThis.window?.removeEventListener('blur', hideDragMask);
+  globalThis.document?.removeEventListener('visibilitychange', hideDragMask);
+};
+
+const showDragMask = () => {
+  if (dragMaskVisible) {
+    return;
+  }
+  if (!dragMask) {
+    dragMask = globalThis.document.createElement('div');
+    dragMask.className = 'm-editor-float-box-drag-mask';
+  }
+  globalThis.document.body.appendChild(dragMask);
+  dragMaskVisible = true;
+  bindDragMaskSafety();
+
+  // 拖拽标题时，root 上的 @mousedown="nextZIndex" 会把浮窗 z-index 抬高，
+  // 若此时才读取会拿到旧值导致遮罩被浮窗（及其内部 iframe）盖住，故用 nextTick 在 z-index 稳定后再设置到浮窗之上
+  const setMaskZIndex = () => {
+    if (dragMask) {
+      dragMask.style.zIndex = `${curZIndex.value + 1}`;
+    }
+  };
+  setMaskZIndex();
+  nextTick(setMaskZIndex);
+};
+
+const hideDragMask = () => {
+  unbindDragMaskSafety();
+  dragMask?.parentNode?.removeChild(dragMask);
+  dragMaskVisible = false;
+};
+
 const initMoveable = () => {
   moveable = new VanillaMoveable(globalThis.document.body, {
     className: 'm-editor-floating-box-moveable',
@@ -112,6 +167,14 @@ const initMoveable = () => {
     bounds: { left: 0, top: 0, right: 0, bottom: 0, position: 'css' },
   });
 
+  // 仅在真正发生拖拽/缩放位移时插入遮罩：moveable 的 dragStart/resizeStart 在 mousedown 时即触发，
+  // 若此时就盖遮罩，会盖住浮窗本身导致 mouseup 落在遮罩上、关闭按钮的 click 无法触发（点击关闭不了）。
+  // 改为在 drag/resize（实际位移）时才显示，纯点击不再触发遮罩。
+  moveable.on('drag', showDragMask);
+  moveable.on('resize', showDragMask);
+  moveable.on('dragEnd', hideDragMask);
+  moveable.on('resizeEnd', hideDragMask);
+
   moveable.on('drag', (e) => {
     e.target.style.transform = e.transform;
   });
@@ -126,6 +189,7 @@ const initMoveable = () => {
 };
 
 const destroyMoveable = () => {
+  hideDragMask();
   moveable?.destroy();
   moveable = null;
 };

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/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;
     }