@tmagic/editor 1.8.0-beta.11 → 1.8.0-beta.12

package/dist/es/layouts/sidebar/data-source/DataSourceConfigPanel.vue_vue_type_script_setup_true_lang.js

@@ -39,6 +39,7 @@ var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 		const dataSourceConfig = ref([]);
 		const { height: editorHeight } = useEditorContentHeight();
 		const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, inject("parentFloating", ref(null)));
+		const frameworkWidth = computed(() => uiService.get("frameworkRect")?.width || 0);
 		/** 供「方法定义」tab 内的字段消费，用于打开数据源详情后自动打开指定方法 */
 		provide("editingDataSourceMethodName", computed(() => props.editMethodName));
 		/** 供「数据定义」tab 内的字段消费，用于打开数据源详情后自动打开指定字段 */
@@ -77,6 +78,7 @@ var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FloatingBox_default, {
+				"body-style": { padding: "0 16px" },
 				visible: boxVisible.value,
 				"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => boxVisible.value = $event),
 				width: width.value,
@@ -84,6 +86,7 @@ var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 				height: unref(editorHeight),
 				"onUpdate:height": _cache[2] || (_cache[2] = ($event) => isRef(editorHeight) ? editorHeight.value = $event : null),
 				title: __props.title,
+				"framework-width": frameworkWidth.value,
 				position: unref(boxPosition)
 			}, {
 				body: withCtx(() => [createVNode(unref(MFormBox), {
@@ -107,6 +110,7 @@ var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 				"width",
 				"height",
 				"title",
+				"framework-width",
 				"position"
 			]);
 		};

package/dist/es/layouts/sidebar/data-source/DataSourceListPanel.vue_vue_type_script_setup_true_lang.js

@@ -85,8 +85,8 @@ var DataSourceListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 		eventBus?.on("remove-data-source", (id) => {
 			removeHandler(id);
 		});
-		const { nodeContentMenuHandler, menuData: contentMenuData, contentMenuHideHandler } = useContentMenu();
-		const menuData = computed(() => props.customContentMenu(contentMenuData, "data-source"));
+		const { nodeContentMenuHandler, menuData: contentMenuData, contentMenuHideHandler, getTarget } = useContentMenu();
+		const menuData = computed(() => props.customContentMenu(contentMenuData, "data-source", getTarget));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [
 				createVNode(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {

package/dist/es/layouts/sidebar/data-source/useContentMenu.js

@@ -6,6 +6,14 @@ var useContentMenu = () => {
 	const eventBus = inject("eventBus");
 	const menuRef = useTemplateRef("menu");
 	let selectId = "";
+	let selectData = null;
+	const getTarget = () => {
+		if (!selectId) return null;
+		return {
+			id: selectId,
+			data: selectData ?? void 0
+		};
+	};
 	const menuData = [
 		{
 			type: "button",
@@ -42,17 +50,24 @@ var useContentMenu = () => {
 		event.preventDefault();
 		if (data.type === "ds") {
 			menuRef.value?.show(event);
-			if (data.id) selectId = `${data.id}`;
-			else selectId = "";
+			if (data.id) {
+				selectId = `${data.id}`;
+				selectData = data;
+			} else {
+				selectId = "";
+				selectData = null;
+			}
 		}
 	};
 	const contentMenuHideHandler = () => {
 		selectId = "";
+		selectData = null;
 	};
 	return {
 		menuData,
 		nodeContentMenuHandler,
-		contentMenuHideHandler
+		contentMenuHideHandler,
+		getTarget
 	};
 };
 //#endregion

package/dist/es/layouts/sidebar/layer/LayerNodeContent.js

@@ -0,0 +1,5 @@
+import LayerNodeContent_vue_vue_type_script_setup_true_lang_default from "./LayerNodeContent.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/sidebar/layer/LayerNodeContent.vue
+var LayerNodeContent_default = LayerNodeContent_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { LayerNodeContent_default as default };

package/dist/es/layouts/sidebar/layer/LayerNodeContent.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,46 @@
+import { useServices } from "../../../hooks/use-services.js";
+import Icon_default from "../../../components/Icon.js";
+import { TMagicTooltip, stripValidateSuggestion } from "@tmagic/design";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, withCtx } from "vue";
+import { WarningFilled } from "@element-plus/icons-vue";
+//#region packages/editor/src/layouts/sidebar/layer/LayerNodeContent.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "m-editor-layer-node-label" };
+var _hoisted_2 = ["innerHTML"];
+var LayerNodeContent_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "MEditorLayerNodeContent",
+	__name: "LayerNodeContent",
+	props: { data: {} },
+	setup(__props) {
+		const props = __props;
+		const { editorService } = useServices();
+		const label = computed(() => `${props.data.name} (${props.data.id})`);
+		/** 读取集中存储的校验错误状态，建立响应式依赖 */
+		const invalidInfo = computed(() => editorService.get("invalidNodeIds").get(props.data.id));
+		const hasError = computed(() => Boolean(invalidInfo.value?.props || invalidInfo.value?.style));
+		/**
+		* 去掉单条校验文案中的「修改建议」部分。
+		*
+		* 错误文案可能是多条错误以 `<br>` 拼接的 HTML，每条本身形如 `主文案\n\n建议`。
+		* 组件树 tooltip 仅展示错误描述，不展示修改建议（建议仅在错误汇总面板展示），
+		* 故先按 `<br>` 拆分，每段用 `stripValidateSuggestion` 截断建议后再拼回。
+		*/
+		const stripSuggestion = (text) => String(text ?? "").split(/<br\s*\/?>/i).map((segment) => stripValidateSuggestion(segment)).join("<br>");
+		/** 合并属性表单与样式表单的错误文案（去掉建议，本身可能仍是含 <br> 的 HTML） */
+		const errorMessage = computed(() => [stripSuggestion(invalidInfo.value?.props), stripSuggestion(invalidInfo.value?.style)].filter(Boolean).join("<br>"));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", { class: normalizeClass(["m-editor-layer-node-content", { "is-invalid": hasError.value }]) }, [createElementVNode("span", _hoisted_1, toDisplayString(label.value), 1), hasError.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
+				key: 0,
+				placement: "top"
+			}, {
+				content: withCtx(() => [createElementVNode("span", { innerHTML: errorMessage.value }, null, 8, _hoisted_2)]),
+				default: withCtx(() => [createVNode(Icon_default, {
+					class: "m-editor-layer-node-error-icon",
+					icon: unref(WarningFilled)
+				}, null, 8, ["icon"])]),
+				_: 1
+			})) : createCommentVNode("v-if", true)], 2);
+		};
+	}
+});
+//#endregion
+export { LayerNodeContent_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/sidebar/layer/LayerPanel.vue_vue_type_script_setup_true_lang.js

@@ -3,6 +3,7 @@ import { useFilter } from "../../../hooks/use-filter.js";
 import SearchInput_default from "../../../components/SearchInput.js";
 import Tree_default from "../../../components/Tree.js";
 import LayerMenu_default from "./LayerMenu.js";
+import LayerNodeContent_default from "./LayerNodeContent.js";
 import LayerNodeTool_default from "./LayerNodeTool.js";
 import { useClick } from "./use-click.js";
 import { useDrag } from "./use-drag.js";
@@ -83,7 +84,7 @@ var LayerPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					}, {
 						"tree-node-content": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "layer-node-content", { data: nodeData })]),
 						"tree-node-tool": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "layer-node-tool", { data: nodeData }, () => [createVNode(LayerNodeTool_default, { data: nodeData }, null, 8, ["data"])])]),
-						"tree-node-label": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "layer-node-label", { data: nodeData })]),
+						"tree-node-label": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "layer-node-label", { data: nodeData }, () => [createVNode(LayerNodeContent_default, { data: nodeData }, null, 8, ["data"])])]),
 						_: 3
 					}, 8, [
 						"data",

package/dist/es/layouts/workspace/viewer/NodeListMenu.vue_vue_type_script_setup_true_lang.js

@@ -11,7 +11,8 @@ var NodeListMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 	__name: "NodeListMenu",
 	setup(__props) {
 		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);
 		const buttonEl = useTemplateRef("button");
@@ -71,6 +72,7 @@ var NodeListMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				visible: visible.value,
 				"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
 				title: "当前位置下的组件",
+				"framework-width": frameworkWidth.value,
 				position: menuPosition.value
 			}, {
 				body: withCtx(() => [createVNode(Tree_default, {
@@ -80,7 +82,11 @@ var NodeListMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 					onNodeClick: clickHandler
 				}, null, 8, ["data", "node-status-map"])]),
 				_: 1
-			}, 8, ["visible", "position"])) : createCommentVNode("v-if", true)], 64);
+			}, 8, [
+				"visible",
+				"framework-width",
+				"position"
+			])) : createCommentVNode("v-if", true)], 64);
 		};
 	}
 });

package/dist/es/plugin.js

@@ -1,4 +1,5 @@
 import { setEditorConfig } from "./utils/config.js";
+import { editorTypeMatchRules } from "./utils/type-match-rules.js";
 import CodeEditor_default from "./layouts/CodeEditor.js";
 import Editor_default from "./Editor.js";
 import CodeSelect_default from "./fields/CodeSelect.js";
@@ -20,7 +21,7 @@ import Code_default from "./fields/Code.js";
 import CodeLink_default from "./fields/CodeLink.js";
 import UISelect_default from "./fields/UISelect.js";
 /* empty css            */
-import formPlugin from "@tmagic/form";
+import formPlugin, { registerTypeMatchRules } from "@tmagic/form";
 import tablePlugin from "@tmagic/table";
 import designPlugin from "@tmagic/design";
 //#region packages/editor/src/plugin.ts
@@ -34,6 +35,7 @@ var plugin_default = { install: (app, opt) => {
 	app.use(designPlugin, opt || {});
 	app.use(formPlugin, opt || {});
 	app.use(tablePlugin);
+	registerTypeMatchRules(editorTypeMatchRules);
 	app.config.globalProperties.$TMAGIC_EDITOR = option;
 	setEditorConfig(option);
 	app.component(`${Editor_default.name || "MEditor"}`, Editor_default);

package/dist/es/services/editor.js

@@ -7,7 +7,7 @@ import storage_default, { Protocol } from "./storage.js";
 import { COPY_STORAGE_KEY, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, classifyDragSources, collectRelatedNodes, describeStepForRevert, editorNodeMergeCustomizer, fixNodePosition, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, moveItemsInContainer, resolveSelectedNode, setChildrenLayout, setLayout, toggleFixedPosition } from "../utils/editor.js";
 import { beforePaste, getAddParent } from "../utils/operator.js";
 import { isFixed } from "@tmagic/stage";
-import { getNodeInfo, getNodePath, getValueByKeyPath, guid, isPage, isPageFragment, setValueByKeyPath } from "@tmagic/utils";
+import { getNodeInfo, getNodePath, getValueByKeyPath, guid, isPage, isPageFragment, setValueByKeyPath, traverseNode } from "@tmagic/utils";
 import { NodeType } from "@tmagic/core";
 import { reactive, toRaw } from "vue";
 import { cloneDeep as cloneDeep$1, isEmpty, isEqual, isObject, mergeWith, uniq } from "lodash-es";
@@ -33,6 +33,7 @@ var Editor = class extends BaseService {
 		stageLoading: true,
 		highlightNode: null,
 		modifiedNodeIds: /* @__PURE__ */ new Map(),
+		invalidNodeIds: /* @__PURE__ */ new Map(),
 		pageLength: 0,
 		pageFragmentLength: 0,
 		disabledMultiSelect: false,
@@ -40,6 +41,11 @@ var Editor = class extends BaseService {
 	});
 	selectionBeforeOp = null;
 	/**
+	* 操作前的节点校验错误快照，与 selectionBeforeOp 同时在 captureSelectionBeforeOp 中捕获，
+	* 供 pushOpHistory 写入 step.extra.invalidNodeIdsBefore，用于撤销时还原到「操作前」的错误状态。
+	*/
+	invalidNodeIdsBeforeOp = null;
+	/**
 	* 最近一次 pushOpHistory 写入的历史记录 uuid。
 	* 供 *AndGetHistoryId 系列方法在调用普通操作后取回本次产生的历史记录 id；
 	* 普通操作不会读取它，调用前由 *AndGetHistoryId 重置为 null。
@@ -57,7 +63,7 @@ var Editor = class extends BaseService {
 	}
 	/**
 	* 设置当前指点节点配置
-	* @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength
+	* @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'invalidNodeIds' | 'pageLength' | 'pageFragmentLength
 	* @param value MNode
 	* @param options.historySource 设置 root 时，本次变更写入历史记录的「操作来源」（仅 name === 'root' 时生效）
 	*/
@@ -85,11 +91,12 @@ var Editor = class extends BaseService {
 				this.state.stageLoading = false;
 			}
 			this.emit("root-change", value, preValue, options);
+			this.pruneInvalidNodeIds();
 		}
 	}
 	/**
 	* 获取当前指点节点配置
-	* @param name  'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength'
+	* @param name  'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'invalidNodeIds' | 'pageLength' | 'pageFragmentLength'
 	* @returns MNode
 	*/
 	get(name) {
@@ -430,6 +437,7 @@ var Editor = class extends BaseService {
 			doNotSelect,
 			doNotSwitchPage
 		})));
+		this.removeInvalidNodesBySubtree(nodes);
 		if (removedItems.length > 0 && pageForOp) if (!doNotPushHistory) this.pushOpHistory("remove", {
 			diff: removedItems,
 			pageData: pageForOp,
@@ -499,7 +507,7 @@ var Editor = class extends BaseService {
 	*/
 	async update(config, data = {}) {
 		this.captureSelectionBeforeOp();
-		const { doNotPushHistory = false, changeRecordList, changeRecords, historyDescription, historySource } = data;
+		const { doNotPushHistory = false, changeRecordList, changeRecords, historyDescription, historySource, invalidInfo } = data;
 		const nodes = Array.isArray(config) ? config : [config];
 		const updateData = await Promise.all(nodes.map((node, index) => {
 			const recordsForNode = changeRecordList ? changeRecordList[index] ?? [] : changeRecords ?? [];
@@ -508,6 +516,7 @@ var Editor = class extends BaseService {
 				historySource
 			});
 		}));
+		this.applyInvalidInfo(config, invalidInfo);
 		if (updateData[0].oldNode?.type !== NodeType.ROOT) {
 			if (this.get("nodes").length) if (!doNotPushHistory) {
 				const pageForOp = this.getNodeInfo(nodes[0].id, false).page;
@@ -1078,6 +1087,7 @@ var Editor = class extends BaseService {
 		this.set("stage", null);
 		this.set("highlightNode", null);
 		this.set("modifiedNodeIds", /* @__PURE__ */ new Map());
+		this.set("invalidNodeIds", /* @__PURE__ */ new Map());
 		this.set("pageLength", 0);
 	}
 	destroy() {
@@ -1088,6 +1098,51 @@ var Editor = class extends BaseService {
 	resetModifiedNodeId() {
 		this.get("modifiedNodeIds").clear();
 	}
+	/**
+	* 记录（或覆盖）某个节点在指定来源（属性表单 / 样式表单）上的校验错误信息。
+	* @param id 节点 id
+	* @param source 错误来源：'props'（属性表单）| 'style'（样式表单）
+	* @param message 错误文案（可能是包含 <br> 的 HTML）
+	*/
+	setInvalidNode(id, source, message) {
+		const map = this.get("invalidNodeIds");
+		const info = { ...map.get(id) || {} };
+		info[source] = message;
+		map.set(id, info);
+		this.emit("invalid-node-change", map);
+	}
+	/**
+	* 删除节点的校验错误记录。
+	* @param id 节点 id
+	* @param source 指定来源则仅删除该来源；不传则删除该节点全部来源的错误
+	*/
+	deleteInvalidNode(id, source) {
+		const map = this.get("invalidNodeIds");
+		if (!map.has(id)) return;
+		if (!source) map.delete(id);
+		else {
+			const info = { ...map.get(id) || {} };
+			delete info[source];
+			if (info.props || info.style) map.set(id, info);
+			else map.delete(id);
+		}
+		this.emit("invalid-node-change", map);
+	}
+	/** 获取当前存在校验错误的节点错误 Map（key 为节点 id） */
+	getInvalidNodeIds() {
+		return this.get("invalidNodeIds");
+	}
+	/** 获取指定节点的校验错误信息 */
+	getInvalidNodeInfo(id) {
+		return this.get("invalidNodeIds").get(id);
+	}
+	/** 清空全部校验错误记录 */
+	resetInvalidNodeId() {
+		const map = this.get("invalidNodeIds");
+		if (map.size === 0) return;
+		map.clear();
+		this.emit("invalid-node-change", map);
+	}
 	usePlugin(options) {
 		super.usePlugin(options);
 	}
@@ -1100,6 +1155,43 @@ var Editor = class extends BaseService {
 	emit(eventName, ...args) {
 		return super.emit(eventName, ...args);
 	}
+	/**
+	* 应用一次属性面板提交携带的校验错误信息（在写入历史记录之前调用，使历史快照与本次变更对齐）。
+	* - invalidInfo 为空（调用方未携带）：认为本次更新对应的节点已无校验错误，清除其全部来源的错误；
+	* - error 非空则记录错误，为空则清除对应来源的错误。
+	*/
+	applyInvalidInfo(config, invalidInfo) {
+		if (!invalidInfo) {
+			(Array.isArray(config) ? config : [config]).map((node) => node.id).filter((id) => id !== void 0).forEach((id) => this.deleteInvalidNode(id));
+			return;
+		}
+		const { id, source, error } = invalidInfo;
+		if (error) this.setInvalidNode(id, source, error);
+		else this.deleteInvalidNode(id, source);
+	}
+	/** 删除被移除节点（含其子树）的校验错误记录，避免残留误报 */
+	removeInvalidNodesBySubtree(nodes) {
+		const map = this.get("invalidNodeIds");
+		if (map.size === 0) return;
+		let changed = false;
+		nodes.forEach((node) => {
+			traverseNode(node, (n) => {
+				if (n.id !== void 0 && map.delete(n.id)) changed = true;
+			});
+		});
+		if (changed) this.emit("invalid-node-change", map);
+	}
+	/** 清理不在当前 DSL 中的失效节点错误记录（用于整体替换 root 后） */
+	pruneInvalidNodeIds() {
+		const map = this.get("invalidNodeIds");
+		if (map.size === 0) return;
+		let changed = false;
+		for (const id of [...map.keys()]) if (!this.getNodeById(id, false)) {
+			map.delete(id);
+			changed = true;
+		}
+		if (changed) this.emit("invalid-node-change", map);
+	}
 	addModifiedNodeId(id) {
 		this.get("modifiedNodeIds").set(id, id);
 	}
@@ -1119,6 +1211,7 @@ var Editor = class extends BaseService {
 	captureSelectionBeforeOp() {
 		if (this.selectionBeforeOp) return;
 		this.selectionBeforeOp = this.get("nodes").map((n) => n.id);
+		this.invalidNodeIdsBeforeOp = new Map(this.get("invalidNodeIds"));
 	}
 	/**
 	* 比较「上一次 root」与「新 root」的页面 / 页面片，按页面粒度把整体替换拆成历史记录：
@@ -1191,7 +1284,9 @@ var Editor = class extends BaseService {
 			extra: {
 				selectedBefore: this.selectionBeforeOp ?? [],
 				selectedAfter: this.get("nodes").map((n) => n.id),
-				modifiedNodeIds: new Map(this.get("modifiedNodeIds"))
+				modifiedNodeIds: new Map(this.get("modifiedNodeIds")),
+				invalidNodeIdsBefore: new Map(this.invalidNodeIdsBeforeOp ?? this.get("invalidNodeIds")),
+				invalidNodeIdsAfter: new Map(this.get("invalidNodeIds"))
 			},
 			diff
 		};
@@ -1200,6 +1295,7 @@ var Editor = class extends BaseService {
 		const historyId = history_default.push("page", step, pageData.id) ? step.uuid : null;
 		this.lastPushedHistoryId = historyId;
 		this.selectionBeforeOp = null;
+		this.invalidNodeIdsBeforeOp = null;
 		return historyId;
 	}
 	/**
@@ -1299,6 +1395,9 @@ var Editor = class extends BaseService {
 			}
 		}
 		this.set("modifiedNodeIds", step.extra?.modifiedNodeIds ?? /* @__PURE__ */ new Map());
+		const invalidToRestore = (reverse ? step.extra?.invalidNodeIdsBefore : step.extra?.invalidNodeIdsAfter) ?? /* @__PURE__ */ new Map();
+		this.set("invalidNodeIds", new Map(invalidToRestore));
+		this.emit("invalid-node-change", this.get("invalidNodeIds"));
 		const page = toRaw(this.get("page"));
 		if (page) {
 			const selectIds = (reverse ? step.extra?.selectedBefore : step.extra?.selectedAfter) ?? [];

package/dist/es/services/props.js

@@ -187,7 +187,8 @@ var Props = class extends BaseService {
 			const targetConfig = path[path.length - 1];
 			if (!targetConfig) return;
 			target.deps[config.id]?.keys?.forEach((fullKey) => {
-				const relateTargetId = relateIdMap[getValueByKeyPath(fullKey, config)];
+				const relateOriginId = getValueByKeyPath(fullKey, config);
+				const relateTargetId = relateIdMap[relateOriginId];
 				if (!relateTargetId) return;
 				setValueByKeyPath(fullKey, relateTargetId, targetConfig);
 			});

package/dist/es/services/storage.js

@@ -124,4 +124,4 @@ var WebStorage = class extends BaseService {
 };
 var storage_default = new WebStorage();
 //#endregion
-export { Protocol, storage_default as default };
+export { Protocol, WebStorage, storage_default as default };

package/dist/es/services/ui.js

@@ -23,6 +23,9 @@ var state = shallowReactive({
 		center: 0,
 		right: storage_default.getItem("$MagicEditorRightColumnWidthData", { protocol: Protocol.NUMBER }) || 480
 	},
+	minLeftColumnWidth: 200,
+	minCenterColumnWidth: 400,
+	minRightColumnWidth: 300,
 	showGuides: true,
 	hasGuides: false,
 	showRule: true,

package/dist/es/style.css

@@ -1,55 +1,4 @@
-@charset "UTF-8";.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 .m-editor-scroll-bar-thumb {
-  background-color: #aaa;
-  border-radius: 6px;
-  position: absolute;
-}
-.m-editor-scroll-bar.horizontal {
-  width: 100%;
-  height: 15px;
-  bottom: 0;
-}
-.m-editor-scroll-bar.horizontal .m-editor-scroll-bar-thumb {
-  height: 6px;
-  transition: background-color 0.2s linear, height 0.2s ease-in-out;
-  bottom: 2px;
-}
-.m-editor-scroll-bar.vertical {
-  height: 100%;
-  width: 15px;
-  right: 5px;
-}
-.m-editor-scroll-bar.vertical .m-editor-scroll-bar-thumb {
-  width: 6px;
-  transition: background-color 0.2s linear, width 0.2s ease-in-out;
-  right: 2px;
-}
-.m-editor-scroll-bar:hover, .m-editor-scroll-bar:focus {
-  background-color: #eee;
-  opacity: 0.9;
-}
-.m-editor-scroll-bar:hover .m-editor-scroll-bar-thumb, .m-editor-scroll-bar:focus .m-editor-scroll-bar-thumb {
-  background-color: #999;
-}
-.m-editor-scroll-bar:hover.horizontal .m-editor-scroll-bar-thumb, .m-editor-scroll-bar:focus.horizontal .m-editor-scroll-bar-thumb {
-  height: 11px;
-}
-.m-editor-scroll-bar:hover.vertical .m-editor-scroll-bar-thumb, .m-editor-scroll-bar:focus.vertical .m-editor-scroll-bar-thumb {
-  width: 11px;
-}.m-fields-ui-select {
-  cursor: pointer;
-}
-.m-fields-ui-select i {
-  margin-right: 3px;
-}
-.m-fields-ui-select span {
-  color: #2882e0;
-}
+@charset "UTF-8";
 .tmagic-design-popper {
   min-width: 150px;
   line-height: 1.4;
@@ -115,6 +64,22 @@
   color: #999;
 }
 
+.tmagic-table-sub-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+}
+.tmagic-table-sub-actions .sub-action-btn {
+  width: 100%;
+}
+.tmagic-table-sub-actions .tmagic-design-button + .tmagic-design-button {
+  margin-left: 0;
+}
+.tmagic-table-sub-actions .tmagic-design-button {
+  justify-content: flex-start;
+}
+
 .tmagic-design-form-inline .m-form-container {
   display: inline-flex;
 }
@@ -139,7 +104,7 @@
 .m-form-dialog .m-dialog-body {
   padding: 0 20px;
 }
-.m-form-dialog .el-table .m-form-item .el-form-item {
+.m-form-dialog .el-table .m-form-item .el-form-item:not(.is-error) {
   margin-bottom: 0;
 }
 
@@ -363,6 +328,10 @@ fieldset.m-fieldset .m-form-tip {
   width: 95vw !important;
 }
 
+.el-form-item .m-fields-table .el-form-item.is-error {
+  margin-bottom: 18px;
+}
+
 .m-fields-table {
   width: 100%;
 }
@@ -385,7 +354,7 @@ fieldset.m-fieldset .m-form-tip {
 .m-fields-table .el-table__expanded-cell .m-form-tip {
   margin-left: 80px;
 }
-.m-fields-table .el-form-item {
+.m-fields-table .el-form-item:not(.is-error) {
   margin-bottom: 0;
 }
 .m-fields-table .tmagic-form-table-drag-target {
@@ -1808,6 +1777,10 @@ fieldset.m-fieldset .m-form-tip {
   margin-right: 5px;
 }
 
+.el-form-item .el-form-item.is-error {
+  margin-bottom: 18px;
+}
+
 .m-editor-layout {
   width: 100%;
   display: flex;
@@ -2020,13 +1993,21 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-float-box .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;
+}
+
 .m-fields-page-fragment-select {
   width: 100%;
 }
@@ -2076,6 +2057,74 @@ fieldset.m-fieldset .m-form-tip {
   padding: 5px 8px;
 }
 
+.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 .m-editor-scroll-bar-thumb {
+  background-color: #aaa;
+  border-radius: 6px;
+  position: absolute;
+}
+.m-editor-scroll-bar.horizontal {
+  width: 100%;
+  height: 15px;
+  bottom: 0;
+}
+.m-editor-scroll-bar.horizontal .m-editor-scroll-bar-thumb {
+  height: 6px;
+  transition: background-color 0.2s linear, height 0.2s ease-in-out;
+  bottom: 2px;
+}
+.m-editor-scroll-bar.vertical {
+  height: 100%;
+  width: 15px;
+  right: 5px;
+}
+.m-editor-scroll-bar.vertical .m-editor-scroll-bar-thumb {
+  width: 6px;
+  transition: background-color 0.2s linear, width 0.2s ease-in-out;
+  right: 2px;
+}
+.m-editor-scroll-bar:hover, .m-editor-scroll-bar:focus {
+  background-color: #eee;
+  opacity: 0.9;
+}
+.m-editor-scroll-bar:hover .m-editor-scroll-bar-thumb, .m-editor-scroll-bar:focus .m-editor-scroll-bar-thumb {
+  background-color: #999;
+}
+.m-editor-scroll-bar:hover.horizontal .m-editor-scroll-bar-thumb, .m-editor-scroll-bar:focus.horizontal .m-editor-scroll-bar-thumb {
+  height: 11px;
+}
+.m-editor-scroll-bar:hover.vertical .m-editor-scroll-bar-thumb, .m-editor-scroll-bar:focus.vertical .m-editor-scroll-bar-thumb {
+  width: 11px;
+}
+
+.m-fields-ui-select {
+  cursor: pointer;
+}
+.m-fields-ui-select i {
+  margin-right: 3px;
+}
+.m-fields-ui-select span {
+  color: #2882e0;
+}
+
+.m-editor-layer-node-content {
+  display: inline-flex;
+  align-items: center;
+}
+.m-editor-layer-node-content.is-invalid .m-editor-layer-node-label {
+  color: var(--el-color-danger, #f56c6c);
+}
+.m-editor-layer-node-content .m-editor-layer-node-error-icon {
+  margin-left: 4px;
+  color: var(--el-color-danger, #f56c6c);
+  cursor: help;
+}
+
 .border-box-container {
   display: flex;
 }