@tmagic/editor 1.8.0-beta.2 → 1.8.0-beta.20

package/dist/es/Editor.vue_vue_type_script_setup_true_lang.js

@@ -3,28 +3,31 @@ import history_default from "./services/history.js";
 import storage_default from "./services/storage.js";
 import editor_default from "./services/editor.js";
 import ui_default from "./services/ui.js";
+import codeBlock_default from "./services/codeBlock.js";
+import dataSource_default from "./services/dataSource.js";
+import events_default from "./services/events.js";
 import Framework_default from "./layouts/Framework.js";
 import NavMenu_default from "./layouts/NavMenu.js";
+import { ENABLE_PROPS_FORM_VALIDATE, defaultEditorProps } from "./editorProps.js";
 import PropsPanel_default from "./layouts/props-panel/PropsPanel.js";
 import keybinding_config_default from "./utils/keybinding-config.js";
 import Sidebar_default from "./layouts/sidebar/Sidebar.js";
 import Workspace_default from "./layouts/workspace/Workspace.js";
-import codeBlock_default from "./services/codeBlock.js";
 import componentList_default from "./services/componentList.js";
-import dataSource_default from "./services/dataSource.js";
 import dep_default from "./services/dep.js";
-import events_default from "./services/events.js";
 import keybinding_default from "./services/keybinding.js";
 import stageOverlay_default from "./services/stageOverlay.js";
-import { defaultEditorProps } from "./editorProps.js";
 import { initServiceEvents, initServiceState } from "./initService.js";
-import { createBlock, createVNode, defineComponent, mergeDefaults, openBlock, provide, renderSlot, unref, withCtx } from "vue";
+import { M_THEME_KEY } from "@tmagic/design";
+import { computed, createBlock, createVNode, defineComponent, mergeDefaults, openBlock, provide, ref, renderSlot, unref, withCtx } from "vue";
 import { EventEmitter } from "events";
 //#region packages/editor/src/Editor.vue?vue&type=script&setup=true&lang.ts
-var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditor",
 	__name: "Editor",
-	props: /* @__PURE__ */ mergeDefaults({
+	props: /*@__PURE__*/ mergeDefaults({
+		isLargeStageContainer: { type: Boolean },
+		theme: {},
 		modelValue: {},
 		componentGroupList: {},
 		datasourceList: {},
@@ -47,6 +50,7 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		containerHighlightClassName: {},
 		containerHighlightDuration: {},
 		containerHighlightType: {},
+		containerHighlightAddOnly: { type: Boolean },
 		stageRect: {},
 		codeOptions: {},
 		disabledDragStart: { type: Boolean },
@@ -54,7 +58,9 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		disabledMultiSelect: { type: Boolean },
 		alwaysMultiSelect: { type: Boolean },
 		disabledPageFragment: { type: Boolean },
+		disabledFlashTip: { type: Boolean },
 		disabledStageOverlay: { type: Boolean },
+		enablePropsFormValidate: { type: Boolean },
 		disabledShowSrc: { type: Boolean },
 		disabledDataSource: { type: Boolean },
 		disabledCodeBlock: { type: Boolean },
@@ -70,6 +76,7 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		beforeDblclick: { type: Function },
 		beforeLayerNodeDblclick: { type: Function },
 		extendFormState: { type: Function },
+		historyListExtraTabs: {},
 		pageBarSortOptions: {},
 		pageFilterFunction: { type: Function }
 	}, defaultEditorProps),
@@ -114,28 +121,53 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 			containerHighlightClassName: props.containerHighlightClassName,
 			containerHighlightDuration: props.containerHighlightDuration,
 			containerHighlightType: props.containerHighlightType,
+			containerHighlightAddOnly: props.containerHighlightAddOnly,
 			disabledDragStart: props.disabledDragStart,
 			renderType: props.renderType,
 			guidesOptions: props.guidesOptions,
 			disabledMultiSelect: props.disabledMultiSelect,
 			alwaysMultiSelect: props.alwaysMultiSelect,
+			disabledFlashTip: props.disabledFlashTip,
 			beforeDblclick: props.beforeDblclick
 		};
 		stageOverlay_default.set("stageOptions", stageOptions);
+		const propsPanelRef = ref(null);
 		provide("services", services);
 		provide("codeOptions", props.codeOptions);
 		provide("stageOptions", stageOptions);
+		/** 是否启用「属性配置表单校验」联动能力，供 PropsPanel / FormPanel 判断校验失败时是否仍更新节点并记录错误 */
+		provide(ENABLE_PROPS_FORM_VALIDATE, props.enablePropsFormValidate ?? false);
 		/**
 		* 把顶层 `extendFormState` 提供给非 PropsPanel 链路上的组件使用（例如历史差异对话框 HistoryDiffDialog
 		* 内部的 CompareForm）。这样所有依赖业务上下文的表单 filterFunction 都能拿到一致的扩展状态，
 		* 与 PropsPanel 通过 `:extend-state` 显式传入的方式保持等价。
 		*/
 		provide("extendFormState", props.extendFormState);
+		provide("isLargeStageContainer", computed(() => props.isLargeStageContainer));
+		/**
+		* 提供 PropsPanel 主属性表单的 formState getter，供历史差异弹窗复用，
+		* 让 CompareForm 与 PropsPanel 的 filterFunction 上下文保持一致。
+		*/
+		provide("getPropsPanelFormState", () => propsPanelRef.value?.configForm?.formState);
+		/**
+		* 把历史记录面板的自定义扩展 tab 提供给深层的 HistoryListPanel（它挂在 NavMenu 中，
+		* 以 markRaw component 形式渲染，无法直接通过 props 透传）。业务方可借此在历史记录
+		* 面板内追加自定义模块的历史 tab。
+		*/
+		provide("historyListExtraTabs", props.historyListExtraTabs);
 		provide("eventBus", new EventEmitter());
+		/**
+		* 把当前主题以响应式 ref 形式 provide 给后代，供包含 `Teleport` 的组件
+		* （如 `TMagicPopover` / `FloatingBox` / `ContentMenu`）在传送目标上挂 `m-theme--<theme>`
+		* 类，让主题级 CSS 变量在 portal 节点上也能命中。详见 `@tmagic/design/theme.ts`。
+		*/
+		provide(M_THEME_KEY, computed(() => props.theme ?? ""));
 		const propsPanelMountedHandler = (e) => {
+			propsPanelRef.value = e;
 			emit("props-panel-mounted", e);
 		};
 		const propsPanelUnmountedHandler = () => {
+			propsPanelRef.value = null;
 			emit("props-panel-unmounted");
 		};
 		const propsPanelSubmitErrorHandler = (e) => {
@@ -153,7 +185,8 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 				"disabled-page-fragment": __props.disabledPageFragment,
 				"page-bar-sort-options": __props.pageBarSortOptions,
 				"page-filter-function": __props.pageFilterFunction,
-				"hide-sidebar": __props.hideSidebar
+				"hide-sidebar": __props.hideSidebar,
+				theme: __props.theme
 			}, {
 				header: withCtx(() => [renderSlot(_ctx.$slots, "header")]),
 				nav: withCtx(() => [renderSlot(_ctx.$slots, "nav", { editorService: unref(editor_default) }, () => [createVNode(NavMenu_default, { data: __props.menu }, null, 8, ["data"])])]),
@@ -234,7 +267,8 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 				"disabled-page-fragment",
 				"page-bar-sort-options",
 				"page-filter-function",
-				"hide-sidebar"
+				"hide-sidebar",
+				"theme"
 			]);
 		};
 	}

package/dist/es/components/CodeBlockEditor.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,9 @@
 import { getEditorConfig } from "../utils/config.js";
+import { getCodeBlockFormConfig } from "../utils/code-block.js";
 import { useServices } from "../hooks/use-services.js";
 import { useWindowRect } from "../hooks/use-window-rect.js";
 import { useEditorContentHeight } from "../hooks/use-editor-content-height.js";
 import { useNextFloatBoxPosition } from "../hooks/use-next-float-box-position.js";
-import { getCodeBlockFormConfig } from "../utils/code-block.js";
 import CodeEditor_default from "../layouts/CodeEditor.js";
 import FloatingBox_default from "./FloatingBox.js";
 import { MFormBox } from "@tmagic/form";
@@ -17,10 +17,10 @@ var _hoisted_1 = { style: {
 var _hoisted_2 = { style: { "flex": "1" } };
 var _hoisted_3 = { style: { "flex": "1" } };
 var _hoisted_4 = { class: "dialog-footer" };
-var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorCodeBlockEditor",
 	__name: "CodeBlockEditor",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		content: {},
 		disabled: { type: Boolean },
 		isDataSource: { type: Boolean },
@@ -34,7 +34,7 @@ var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		},
 		"visibleModifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels([
+	emits: /*@__PURE__*/ mergeModels([
 		"submit",
 		"close",
 		"open"
@@ -120,6 +120,7 @@ var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 			changedValue.value = void 0;
 		};
 		const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, inject("parentFloating", ref(null)));
+		const frameworkWidth = computed(() => uiService.get("frameworkRect")?.width || 0);
 		watch(boxVisible, (visible) => {
 			nextTick(() => {
 				if (!visible) emit("close");
@@ -145,7 +146,9 @@ var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 					"onUpdate:width": _cache[2] || (_cache[2] = ($event) => width.value = $event),
 					height: unref(codeBlockEditorHeight),
 					"onUpdate:height": _cache[3] || (_cache[3] = ($event) => 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: unref(boxPosition),
 					"before-close": beforeClose
 				}, {
@@ -187,6 +190,7 @@ var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 					"width",
 					"height",
 					"title",
+					"framework-width",
 					"position"
 				]),
 				(openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(unref(TMagicDialog), {

package/dist/es/components/CodeParams.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import { error } from "../utils/logger.js";
 import { MForm } from "@tmagic/form";
 import { computed, createBlock, defineComponent, openBlock, unref, useTemplateRef } from "vue";
 //#region packages/editor/src/components/CodeParams.vue?vue&type=script&setup=true&lang.ts
-var CodeParams_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CodeParams_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorCodeParams",
 	__name: "CodeParams",
 	props: {
@@ -48,7 +48,8 @@ var CodeParams_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		*/
 		const onParamsChangeHandler = async (v, eventData) => {
 			try {
-				emit("change", await formRef.value?.submitForm(true), eventData);
+				const value = await formRef.value?.submitForm(true);
+				emit("change", value, eventData);
 			} catch (e) {
 				error(e);
 			}

package/dist/es/components/CompareForm.vue_vue_type_script_setup_true_lang.js

@@ -1,67 +1,35 @@
-import { useServices } from "../hooks/use-services.js";
-import { getCodeBlockFormConfig } from "../utils/code-block.js";
+import { useCompareForm } from "../hooks/use-compare-form.js";
 import { MForm } from "@tmagic/form";
 import { HookType } from "@tmagic/core";
-import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, inject, normalizeStyle, openBlock, ref, unref, useTemplateRef, watch, watchEffect } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeStyle, openBlock, unref } from "vue";
 import { isEqual } from "lodash-es";
 //#region packages/editor/src/components/CompareForm.vue?vue&type=script&setup=true&lang.ts
-var CompareForm_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CompareForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorCompareForm",
 	__name: "CompareForm",
 	props: {
 		value: {},
-		lastValue: {},
 		type: {},
 		category: { default: "node" },
 		dataSourceType: {},
 		labelWidth: { default: "120px" },
 		height: {},
-		extendState: {}
+		extendState: {},
+		baseFormState: {},
+		size: {},
+		loadConfig: {},
+		services: {},
+		lastValue: {},
+		selfDiffFieldTypes: {}
 	},
 	setup(__props, { expose: __expose }) {
-		/**
-		* 对比类型：
-		* - node: 节点组件，按 `type` 从 propsService 获取属性表单配置
-		* - data-source: 数据源，按 `type`(base/http/...) 从 dataSourceService 获取数据源表单配置
-		* - code-block: 数据源代码块，使用内置的代码块表单配置
-		*/
 		const props = __props;
-		const { propsService, dataSourceService, codeBlockService, editorService } = useServices();
-		const services = useServices();
-		const config = ref([]);
-		/** vs-code 编辑器的 monaco 配置项，沿用 Editor 顶层 provide('codeOptions', ...) 的注入。 */
-		const codeOptions = inject("codeOptions", {});
-		/** 将代码块的 content 字段统一成字符串，便于在表单/对比中展示 */
-		const normalizeCodeBlockValue = (v) => {
-			if (!v) return {};
-			const next = { ...v };
-			if (next.content && typeof next.content !== "string") try {
-				next.content = next.content.toString();
-			} catch {
-				next.content = "";
-			}
-			return next;
-		};
-		const currentValues = computed(() => {
-			if (props.category === "code-block") return normalizeCodeBlockValue(props.value);
-			return props.value || {};
-		});
+		const { config, currentValues, wrapperStyle, mergedExtendState, loadConfig, formRef, normalizeCodeBlockValue } = useCompareForm(props);
 		const lastValuesProcessed = computed(() => {
 			if (props.category === "code-block") return normalizeCodeBlockValue(props.lastValue);
 			return props.lastValue || {};
 		});
 		/**
-		* 外层包裹层的样式：当传入 `height` 时启用固定高度 + 内部滚动，
-		* 这样滚动条会出现在 CompareForm 内部，避免父容器（如 Dialog）自身也产生滚动。
-		*/
-		const wrapperStyle = computed(() => {
-			if (!props.height) return void 0;
-			return {
-				height: props.height,
-				overflow: "auto"
-			};
-		});
-		/**
 		* `code-select` 字段在历史数据中存在两种"语义为空"的形态：
 		* - 字符串 `''`（旧数据 / 用户从未配置过钩子）；
 		* - `{ hookType: HookType.CODE, hookData: [] }`（CodeSelect.vue 在挂载时
@@ -84,54 +52,6 @@ var CompareForm_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			}
 			return !isEqual(curValue, lastValue);
 		};
-		const loadConfig = async () => {
-			switch (props.category) {
-				case "node":
-					if (!props.type) {
-						config.value = [];
-						return;
-					}
-					config.value = await propsService.getPropsConfig(props.type);
-					break;
-				case "data-source":
-					config.value = dataSourceService.getFormConfig(props.type || "base");
-					break;
-				case "code-block":
-					config.value = getCodeBlockFormConfig({
-						paramColConfig: codeBlockService.getParamsColConfig(),
-						isDataSource: () => Boolean(props.dataSourceType),
-						dataSourceType: () => props.dataSourceType,
-						codeOptions,
-						editable: false
-					});
-					break;
-				default: config.value = [];
-			}
-		};
-		watch([
-			() => props.category,
-			() => props.type,
-			() => props.dataSourceType
-		], () => {
-			loadConfig();
-		}, { immediate: true });
-		const formRef = useTemplateRef("form");
-		/**
-		* 把 services / stage 注入 MForm 的 formState，避免 propsService 注入的表单配置中
-		* 形如 `display: ({ services }) => services.uiService.get(...)` 的 filterFunction
-		* 在执行时拿不到 `formState.services` 而报错。
-		*
-		* 与 props-panel/FormPanel.vue 中的注入方式保持一致：
-		* - services：整个 useServices() 返回的服务集合；
-		* - stage：当前 editorService.get('stage') 的最新值。
-		*/
-		const stage = computed(() => editorService.get("stage"));
-		watchEffect(() => {
-			if (formRef.value) {
-				formRef.value.formState.stage = stage.value;
-				formRef.value.formState.services = services;
-			}
-		});
 		__expose({
 			form: formRef,
 			config,
@@ -140,25 +60,29 @@ var CompareForm_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				class: "m-editor-compare-form-wrapper",
-				style: normalizeStyle(wrapperStyle.value)
-			}, [config.value.length ? (openBlock(), createBlock(unref(MForm), {
+				style: normalizeStyle(unref(wrapperStyle))
+			}, [unref(config).length ? (openBlock(), createBlock(unref(MForm), {
 				key: 0,
 				ref: "form",
 				class: "m-editor-compare-form",
-				config: config.value,
-				"init-values": currentValues.value,
+				config: unref(config),
+				"init-values": unref(currentValues),
 				"last-values": lastValuesProcessed.value,
 				"is-compare": true,
 				disabled: true,
 				"label-width": __props.labelWidth,
-				"extend-state": __props.extendState,
-				"show-diff": showDiff
+				"extend-state": unref(mergedExtendState),
+				"show-diff": showDiff,
+				"self-diff-field-types": __props.selfDiffFieldTypes,
+				size: __props.size
 			}, null, 8, [
 				"config",
 				"init-values",
 				"last-values",
 				"label-width",
-				"extend-state"
+				"extend-state",
+				"self-diff-field-types",
+				"size"
 			])) : createCommentVNode("v-if", true)], 4);
 		};
 	}

package/dist/es/components/ContentMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
 import ToolButton_default from "./ToolButton.js";
-import { useZIndex } from "@tmagic/design";
-import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveComponent, useTemplateRef, vShow, withCtx, withDirectives, withModifiers } from "vue";
+import { useThemeClass, useZIndex } from "@tmagic/design";
+import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveComponent, unref, useTemplateRef, vShow, withCtx, withDirectives, withModifiers } from "vue";
 //#region packages/editor/src/components/ContentMenu.vue?vue&type=script&setup=true&lang.ts
-var ContentMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ContentMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorContentMenu",
 	__name: "ContentMenu",
 	props: {
@@ -29,6 +29,13 @@ var ContentMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		const buttonRefs = useTemplateRef("buttons");
 		const subMenuRef = useTemplateRef("subMenu");
 		const visible = ref(false);
+		/**
+		* 主题修饰类（来自最近的 `<MEditor>` / `<MForm>` 祖先 provide）。
+		* - 顶层 `ContentMenu` 渲染在编辑器子树中，加上去是冗余但无害；
+		* - 子菜单（递归 `<content-menu :is-sub-menu="true">` 被 `<teleport to="body">` 送到 body）
+		*   不在编辑器子树中，必须显式挂上主题类，主题级 CSS 变量才能命中。
+		*/
+		const themeClass = useThemeClass();
 		const subMenuData = ref([]);
 		const zIndex = useZIndex();
 		const curZIndex = ref(0);
@@ -59,15 +66,29 @@ var ContentMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			if (contains(target)) return;
 			hide();
 		};
+		const fixPosition = () => {
+			const menu = menuEl.value;
+			if (!menu || !visible.value) return;
+			const menuHeight = menu.clientHeight;
+			const menuWidth = menu.clientWidth;
+			let { top, left } = menuPosition.value;
+			if (top + menuHeight > document.body.clientHeight) top = Math.max(0, document.body.clientHeight - menuHeight);
+			if (left + menuWidth > document.body.clientWidth) left = Math.max(0, document.body.clientWidth - menuWidth);
+			if (top !== menuPosition.value.top || left !== menuPosition.value.left) menuPosition.value = {
+				top,
+				left
+			};
+		};
 		const setPosition = (e) => {
-			const menuHeight = menuEl.value?.clientHeight || 0;
-			let top = e.clientY;
-			if (menuHeight + e.clientY > document.body.clientHeight) top = document.body.clientHeight - menuHeight;
 			menuPosition.value = {
-				top,
+				top: e.clientY,
 				left: e.clientX
 			};
+			fixPosition();
 		};
+		const resizeObserver = new ResizeObserver(() => {
+			fixPosition();
+		});
 		const show = (e) => {
 			visible.value = true;
 			nextTick(() => {
@@ -96,10 +117,12 @@ var ContentMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			emit("mouseenter");
 		};
 		onMounted(() => {
+			if (menuEl.value) resizeObserver.observe(menuEl.value);
 			if (props.isSubMenu) return;
 			globalThis.addEventListener("mousedown", outsideClickHideHandler, true);
 		});
 		onBeforeUnmount(() => {
+			resizeObserver.disconnect();
 			if (props.isSubMenu) return;
 			globalThis.removeEventListener("mousedown", outsideClickHideHandler, true);
 		});
@@ -118,8 +141,8 @@ var ContentMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				persisted: ""
 			}, {
 				default: withCtx(() => [withDirectives(createElementVNode("div", {
-					class: "magic-editor-content-menu",
 					ref: "menu",
+					class: normalizeClass(["magic-editor-content-menu", unref(themeClass)]),
 					style: normalizeStyle(menuStyle.value),
 					onMouseenter: _cache[0] || (_cache[0] = ($event) => mouseenterHandler()),
 					onContextmenu: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"]))
@@ -150,7 +173,7 @@ var ContentMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 						"is-sub-menu": true,
 						onHide: hide
 					}, null, 8, ["active", "menu-data"])) : createCommentVNode("v-if", true)]))
-				], 36), [[vShow, visible.value]])]),
+				], 38), [[vShow, visible.value]])]),
 				_: 3
 			});
 		};

package/dist/es/components/FloatingBox.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,6 @@
-import { useServices } from "../hooks/use-services.js";
 import Icon_default from "./Icon.js";
-import { TMagicButton, useZIndex } from "@tmagic/design";
-import { Teleport, computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeStyle, onBeforeUnmount, openBlock, provide, ref, renderSlot, toDisplayString, unref, useModel, useTemplateRef, watch, withCtx } from "vue";
+import { TMagicButton, useThemeClass, useZIndex } from "@tmagic/design";
+import { Teleport, computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeStyle, onBeforeUnmount, openBlock, provide, ref, renderSlot, toDisplayString, unref, useModel, useTemplateRef, watch, withCtx } from "vue";
 import { Close } from "@element-plus/icons-vue";
 import VanillaMoveable from "moveable";
 //#region packages/editor/src/components/FloatingBox.vue?vue&type=script&setup=true&lang.ts
@@ -9,14 +8,17 @@ var _hoisted_1 = {
 	ref: "title",
 	class: "m-editor-float-box-title"
 };
-var FloatingBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var FloatingBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "FloatingBox",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		position: { default: () => ({
 			left: 0,
 			top: 0
 		}) },
 		title: { default: "" },
+		bodyStyle: {},
+		initialStyle: { default: () => ({}) },
+		frameworkWidth: { default: 0 },
 		beforeClose: {}
 	}, {
 		"width": { default: 0 },
@@ -41,6 +43,11 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		const props = __props;
 		const targetEl = useTemplateRef("target");
 		const titleEl = useTemplateRef("title");
+		/**
+		* 主题修饰类（来自最近的 `<MEditor>` / `<MForm>` 祖先 provide）。
+		* 挂在 `Teleport` 出去的浮动面板根节点上，让主题级 CSS 变量在 portal 节点上也能命中。
+		*/
+		const themeClass = useThemeClass();
 		const zIndex = useZIndex();
 		const curZIndex = ref(0);
 		const titleHeight = ref(0);
@@ -49,19 +56,51 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			if (targetEl.value) return targetEl.value.clientHeight - titleHeight.value;
 			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 {
 				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 = 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();
+			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",
@@ -84,6 +123,10 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 					position: "css"
 				}
 			});
+			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;
 			});
@@ -96,6 +139,7 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			});
 		};
 		const destroyMoveable = () => {
+			hideDragMask();
 			moveable?.destroy();
 			moveable = null;
 		};
@@ -109,7 +153,10 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 					height.value = targetRect.height;
 					initMoveable();
 				}
-				if (titleEl.value) titleHeight.value = titleEl.value.getBoundingClientRect().height;
+				if (titleEl.value) {
+					const titleRect = titleEl.value.getBoundingClientRect();
+					titleHeight.value = titleRect.height;
+				}
 			} else destroyMoveable();
 		}, { immediate: true });
 		onBeforeUnmount(() => {
@@ -135,15 +182,16 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			return visible.value ? (openBlock(), createBlock(Teleport, {
 				key: 0,
 				to: "body"
-			}, [createElementVNode("div", {
+			}, [createElementVNode("div", mergeProps({
 				ref: "target",
-				class: "m-editor-float-box",
-				style: normalizeStyle({
+				class: ["m-editor-float-box", unref(themeClass)]
+			}, _ctx.$attrs, {
+				style: {
 					...style.value,
 					zIndex: curZIndex.value
-				}),
+				},
 				onMousedown: nextZIndex
-			}, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "title", {}, () => [createElementVNode("span", null, toDisplayString(__props.title), 1)]), createElementVNode("div", null, [createVNode(unref(TMagicButton), {
+			}), [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "title", {}, () => [createElementVNode("span", null, toDisplayString(__props.title), 1)]), createElementVNode("div", null, [createVNode(unref(TMagicButton), {
 				link: "",
 				size: "small",
 				onClick: closeHandler
@@ -152,8 +200,11 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				_: 1
 			})])], 512), createElementVNode("div", {
 				class: "m-editor-float-box-body",
-				style: normalizeStyle({ height: `${bodyHeight.value}px` })
-			}, [renderSlot(_ctx.$slots, "body")], 4)], 36)])) : createCommentVNode("v-if", true);
+				style: normalizeStyle({
+					height: `${bodyHeight.value}px`,
+					...__props.bodyStyle
+				})
+			}, [renderSlot(_ctx.$slots, "body")], 4)], 16)])) : createCommentVNode("v-if", true);
 		};
 	}
 });

package/dist/es/components/Icon.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { createBlock, createElementBlock, createElementVNode, createVNode, defin
 import { Edit } from "@element-plus/icons-vue";
 //#region packages/editor/src/components/Icon.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["src"];
-var Icon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Icon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorIcon",
 	__name: "Icon",
 	props: { icon: {} },

package/dist/es/components/Resizer.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { useGetSo } from "../hooks/use-getso.js";
 import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref, useTemplateRef } from "vue";
 //#region packages/editor/src/components/Resizer.vue?vue&type=script&setup=true&lang.ts
-var Resizer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Resizer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorResizer",
 	__name: "Resizer",
 	emits: ["change"],

package/dist/es/components/ScrollBar.js

@@ -1,5 +1,4 @@
 import ScrollBar_vue_vue_type_script_setup_true_lang_default from "./ScrollBar.vue_vue_type_script_setup_true_lang.js";
-/* empty css                                          */
 //#region packages/editor/src/components/ScrollBar.vue
 var ScrollBar_default = ScrollBar_vue_vue_type_script_setup_true_lang_default;
 //#endregion