@tmagic/editor 1.8.0-beta.14 → 1.8.0-beta.16

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

@@ -66,15 +66,29 @@ var ContentMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			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(() => {
@@ -103,10 +117,12 @@ var ContentMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			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);
 		});

package/dist/es/fields/Code.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,6 @@
 import CodeEditor_default from "../layouts/CodeEditor.js";
-import { computed, createBlock, defineComponent, openBlock } from "vue";
+import { FORM_SILENT_MODE_KEY } from "@tmagic/form";
+import { computed, createBlock, createCommentVNode, defineComponent, inject, openBlock, unref } from "vue";
 //#region packages/editor/src/fields/Code.vue?vue&type=script&setup=true&lang.ts
 var Code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsVsCode",
@@ -24,6 +25,12 @@ var Code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {
+		/**
+		* 静默模式（submitForm/validateForm 隐藏挂载）下跳过 monaco 渲染：
+		* 校验由 FormItem 针对 model 中的值完成，与编辑器实例无关；本组件挂载无值副作用
+		* （save 仅由用户操作/编辑器内容变更触发），跳过可省去 monaco worker/model 的无谓实例化。
+		*/
+		const silentMode = inject(FORM_SILENT_MODE_KEY, false);
 		const emit = __emit;
 		const props = __props;
 		/**
@@ -41,7 +48,8 @@ var Code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			emit("change", v);
 		};
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(CodeEditor_default, {
+			return !unref(silentMode) ? (openBlock(), createBlock(CodeEditor_default, {
+				key: 0,
 				height: __props.config.height,
 				type: diffMode.value ? "diff" : void 0,
 				"init-values": diffMode.value ? (__props.lastValues || {})[__props.name] : __props.model[__props.name],
@@ -65,7 +73,7 @@ var Code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 				"autosize",
 				"parse",
 				"editor-custom-type"
-			]);
+			])) : createCommentVNode("v-if", true);
 		};
 	}
 });

package/dist/es/index.js

@@ -2,7 +2,7 @@ import { CODE_DRAFT_STORAGE_KEY, CodeDeleteErrorType, ColumnLayout, DragType, Ke
 import { useCodeBlockEdit } from "./hooks/use-code-block-edit.js";
 import { getEditorConfig, isGlobalFlat, setEditorConfig } from "./utils/config.js";
 import { getCodeBlockFormConfig } from "./utils/code-block.js";
-import { advancedTabConfig, arrayOptions, booleanOptions, displayTabConfig, eqOptions, eventTabConfig, fillConfig, getCondOpOptionsByFieldType, numberOptions, removeStyleDisplayConfig, styleTabConfig, validatePropsForm } from "./utils/props.js";
+import { advancedTabConfig, arrayOptions, booleanOptions, displayTabConfig, eqOptions, eventTabConfig, fillConfig, getCondOpOptionsByFieldType, numberOptions, removeStyleDisplayConfig, styleTabConfig } from "./utils/props.js";
 import { useCompareForm } from "./hooks/use-compare-form.js";
 import props_default from "./services/props.js";
 import { UndoRedo } from "./utils/undo-redo.js";
@@ -92,4 +92,4 @@ export * from "@tmagic/table";
 export * from "@tmagic/stage";
 export * from "@tmagic/design";
 export * from "@tmagic/utils";
-export { ALL_COND_OPS, CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, CodeBlockEditor_default as CodeBlockEditor, CodeBlockList_default as CodeBlockList, CodeBlockListPanel_default as CodeBlockListPanel, CodeDeleteErrorType, CodeSelect_default as CodeSelect, CodeSelectCol_default as CodeSelectCol, ColumnLayout, CompareForm_default as CompareForm, ComponentListPanel_default as ComponentListPanel, CondOpSelect_default as CondOpSelect, ContentMenu_default as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, DataSourceAddButton_default as DataSourceAddButton, DataSourceConfigPanel_default as DataSourceConfigPanel, Index_default as DataSourceFieldSelect, DataSourceFields_default as DataSourceFields, DataSourceInput_default as DataSourceInput, DataSourceMethodSelect_default as DataSourceMethodSelect, DataSourceMethods_default as DataSourceMethods, DataSourceMocks_default as DataSourceMocks, DataSourceSelect_default as DataSourceSelect, DepTargetType, DisplayConds_default as DisplayConds, DragType, EVENT_NAME_VALUE_SEPARATOR, EventSelect_default as EventSelect, Fixed2Other, FloatingBox_default as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, HistoryDiffDialog_default as HistoryDiffDialog, Bucket_default as HistoryListBucket, BucketTab_default as HistoryListBucketTab, Icon_default as Icon, IdleTask, KeyBindingCommand, KeyValue_default as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerNodeContent_default as LayerNodeContent, LayerOffset, LayerPanel_default as LayerPanel, Layout, SplitView_default as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, PageFragmentSelect_default as PageFragmentSelect, FormPanel_default as PropsFormPanel, PropsPanel_default as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, Resizer_default as Resizer, ScrollViewer, SideItemKey, SplitView_default as SplitView, StageCore, Index_default$1 as StyleSetter, CodeEditor_default as TMagicCodeEditor, Editor_default as TMagicEditor, ToolButton_default as ToolButton, Tree_default as Tree, TreeNode_default as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, ViewForm_default as ViewForm, advancedTabConfig, arrayOptions, beforePaste, booleanOptions, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, canUsePluginMethods, change2Fixed, classifyDragSources, codeBlock_default as codeBlockService, collectEventNameOptionValues, collectRelatedNodes, componentList_default as componentListService, confirmHistoryAction, createStackStep, dataSource_default as dataSourceService, debug, plugin_default as default, defaultIsExpandable, dep_default as depService, describeRevertStep, describeStepForRevert, deserializeStacks, designPlugin, detectStackOpType, detectTargetId, detectTargetName, displayTabConfig, editorNodeMergeCustomizer, editor_default as editorService, editorTypeMatchRules, eqOptions, error, eventTabConfig, events_default as eventsService, fillConfig, fixNodeLeft, fixNodePosition, formPlugin, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getCodeBlockFormConfig, getCompActionAllowedValues, getCompActionOptions, getCondOpOptionsByFieldType, getDefaultConfig, getDisplayField, getEditorConfig, getEventNameAllowedValues, getEventNameOptions, getFieldType, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getLastPushedHistoryIds, getNodeIndex, getOrCreateStack, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, history_default as historyService, idbDelete, idbGet, idbSet, info, isEventNameCheckStrictly, isGlobalFlat, isIncludeDataSource, isIndexedDBSupported, keybinding_default as keybindingService, monaco_editor_default as loadMonaco, log, markStackSaved, mergeSteps, moveItemsInContainer, normalizeCompActionValue, numberOptions, openIndexedDB, props_default as propsService, removeStyleDisplayConfig, resolveFieldByPath, resolveSelectedNode, serializeConfig, serializeStacks, setChildrenLayout, setEditorConfig, setLayout, stageOverlay_default as stageOverlayService, storage_default as storageService, styleTabConfig, tablePlugin, toggleFixedPosition, ui_default as uiService, undoFloor, updateStatus, useCodeBlockEdit, useCompareForm, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useHistoryRevert, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, validatePropsForm, warn };
+export { ALL_COND_OPS, CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, CodeBlockEditor_default as CodeBlockEditor, CodeBlockList_default as CodeBlockList, CodeBlockListPanel_default as CodeBlockListPanel, CodeDeleteErrorType, CodeSelect_default as CodeSelect, CodeSelectCol_default as CodeSelectCol, ColumnLayout, CompareForm_default as CompareForm, ComponentListPanel_default as ComponentListPanel, CondOpSelect_default as CondOpSelect, ContentMenu_default as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, DataSourceAddButton_default as DataSourceAddButton, DataSourceConfigPanel_default as DataSourceConfigPanel, Index_default as DataSourceFieldSelect, DataSourceFields_default as DataSourceFields, DataSourceInput_default as DataSourceInput, DataSourceMethodSelect_default as DataSourceMethodSelect, DataSourceMethods_default as DataSourceMethods, DataSourceMocks_default as DataSourceMocks, DataSourceSelect_default as DataSourceSelect, DepTargetType, DisplayConds_default as DisplayConds, DragType, EVENT_NAME_VALUE_SEPARATOR, EventSelect_default as EventSelect, Fixed2Other, FloatingBox_default as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, HistoryDiffDialog_default as HistoryDiffDialog, Bucket_default as HistoryListBucket, BucketTab_default as HistoryListBucketTab, Icon_default as Icon, IdleTask, KeyBindingCommand, KeyValue_default as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerNodeContent_default as LayerNodeContent, LayerOffset, LayerPanel_default as LayerPanel, Layout, SplitView_default as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, PageFragmentSelect_default as PageFragmentSelect, FormPanel_default as PropsFormPanel, PropsPanel_default as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, Resizer_default as Resizer, ScrollViewer, SideItemKey, SplitView_default as SplitView, StageCore, Index_default$1 as StyleSetter, CodeEditor_default as TMagicCodeEditor, Editor_default as TMagicEditor, ToolButton_default as ToolButton, Tree_default as Tree, TreeNode_default as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, ViewForm_default as ViewForm, advancedTabConfig, arrayOptions, beforePaste, booleanOptions, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, canUsePluginMethods, change2Fixed, classifyDragSources, codeBlock_default as codeBlockService, collectEventNameOptionValues, collectRelatedNodes, componentList_default as componentListService, confirmHistoryAction, createStackStep, dataSource_default as dataSourceService, debug, plugin_default as default, defaultIsExpandable, dep_default as depService, describeRevertStep, describeStepForRevert, deserializeStacks, designPlugin, detectStackOpType, detectTargetId, detectTargetName, displayTabConfig, editorNodeMergeCustomizer, editor_default as editorService, editorTypeMatchRules, eqOptions, error, eventTabConfig, events_default as eventsService, fillConfig, fixNodeLeft, fixNodePosition, formPlugin, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getCodeBlockFormConfig, getCompActionAllowedValues, getCompActionOptions, getCondOpOptionsByFieldType, getDefaultConfig, getDisplayField, getEditorConfig, getEventNameAllowedValues, getEventNameOptions, getFieldType, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getLastPushedHistoryIds, getNodeIndex, getOrCreateStack, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, history_default as historyService, idbDelete, idbGet, idbSet, info, isEventNameCheckStrictly, isGlobalFlat, isIncludeDataSource, isIndexedDBSupported, keybinding_default as keybindingService, monaco_editor_default as loadMonaco, log, markStackSaved, mergeSteps, moveItemsInContainer, normalizeCompActionValue, numberOptions, openIndexedDB, props_default as propsService, removeStyleDisplayConfig, resolveFieldByPath, resolveSelectedNode, serializeConfig, serializeStacks, setChildrenLayout, setEditorConfig, setLayout, stageOverlay_default as stageOverlayService, storage_default as storageService, styleTabConfig, tablePlugin, toggleFixedPosition, ui_default as uiService, undoFloor, updateStatus, useCodeBlockEdit, useCompareForm, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useHistoryRevert, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, warn };

package/dist/es/layouts/props-panel/FormPanel.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,9 @@
-import { validatePropsForm } from "../../utils/props.js";
 import { useServices } from "../../hooks/use-services.js";
 import { useEditorContentHeight } from "../../hooks/use-editor-content-height.js";
 import Icon_default from "../../components/Icon.js";
 import CodeEditor_default from "../CodeEditor.js";
 import { ENABLE_PROPS_FORM_VALIDATE } from "../../editorProps.js";
-import { MForm } from "@tmagic/form";
+import { MForm, validateForm } from "@tmagic/form";
 import { TMagicButton, TMagicScrollbar, tMagicMessage } from "@tmagic/design";
 import { filterXSS } from "@tmagic/utils";
 import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, getCurrentInstance, inject, normalizeClass, onMounted, onUnmounted, openBlock, ref, renderSlot, unref, useTemplateRef, watchEffect, withCtx } from "vue";
@@ -82,14 +81,18 @@ var FormPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				return;
 			}
 			try {
-				const error = await validatePropsForm({
+				const error = await validateForm({
 					config: props.config,
-					values: newValues,
-					appContext: internalInstance?.appContext ?? null,
-					services,
-					stage: stage.value,
 					typeMatchValid: true,
-					extendState: props.extendState
+					initValues: newValues,
+					appContext: internalInstance?.appContext ? {
+						...internalInstance?.appContext,
+						provides: { services }
+					} : null,
+					extendState: (state) => {
+						if (configFormRef.value?.formState) return { ...configFormRef.value?.formState || {} };
+						return props.extendState?.(state) || {};
+					}
 				});
 				if (error) tMagicMessage({
 					type: "error",

package/dist/es/layouts/props-panel/PropsPanel.vue_vue_type_script_setup_true_lang.js

@@ -72,14 +72,14 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					...v,
 					style: {}
 				};
-				if (v.style) {
+				if (v.style) if (eventData) {
 					Object.entries(v.style).forEach(([key, value]) => {
 						if (value !== "" && newValue.style) newValue.style[key] = value;
 					});
-					eventData?.changeRecords?.forEach((record) => {
+					eventData.changeRecords?.forEach((record) => {
 						if (record.propPath?.startsWith("style") && record.value === "") setValueByKeyPath(record.propPath, record.value, newValue);
 					});
-				}
+				} else newValue.style = { ...v.style };
 				const historySource = eventData ? "props" : "code";
 				editorService.update(newValue, {
 					changeRecords: eventData?.changeRecords,

package/dist/es/services/editor.js

@@ -351,6 +351,11 @@ var Editor = class extends BaseService {
 			historySource,
 			doNotPushHistory
 		});
+		const addedPages = newNodes.filter((node) => isPage(node) || isPageFragment(node));
+		if (addedPages.length) history_default.notifyPageStructureChange({
+			add: addedPages,
+			remove: []
+		});
 		return Array.isArray(addNode) ? newNodes : newNodes[0];
 	}
 	async doRemove(node, { doNotSelect = false, doNotSwitchPage = false } = {}) {
@@ -454,6 +459,11 @@ var Editor = class extends BaseService {
 			historySource,
 			doNotPushHistory
 		});
+		const removedPages = nodes.filter((node) => isPage(node) || isPageFragment(node));
+		if (removedPages.length) history_default.notifyPageStructureChange({
+			add: [],
+			remove: removedPages
+		});
 	}
 	async doUpdate(config, { changeRecords = [], historySource } = {}) {
 		if (!this.get("root")) throw new Error("root为空");
@@ -1238,24 +1248,35 @@ var Editor = class extends BaseService {
 		const prevMap = new Map(prevPages.map((p) => [`${p.id}`, p]));
 		const nextMap = new Map(nextPages.map((p) => [`${p.id}`, p]));
 		const indexInItems = (root, id) => (root.items ?? []).findIndex((item) => `${item.id}` === `${id}`);
+		const addedPages = [];
+		const removedPages = [];
 		nextPages.forEach((nextPage) => {
 			const prevPage = prevMap.get(`${nextPage.id}`);
-			if (!prevPage) this.pushPageDiffStep("add", nextPage, {
-				newSchema: cloneDeep$1(toRaw(nextPage)),
-				parentId: nextRoot.id,
-				index: indexInItems(nextRoot, nextPage.id)
-			}, source);
-			else if (!isEqual(toRaw(prevPage), toRaw(nextPage))) this.pushPageDiffStep("update", nextPage, {
+			if (!prevPage) {
+				this.pushPageDiffStep("add", nextPage, {
+					newSchema: cloneDeep$1(toRaw(nextPage)),
+					parentId: nextRoot.id,
+					index: indexInItems(nextRoot, nextPage.id)
+				}, source);
+				addedPages.push(nextPage);
+			} else if (!isEqual(toRaw(prevPage), toRaw(nextPage))) this.pushPageDiffStep("update", nextPage, {
 				oldSchema: cloneDeep$1(toRaw(prevPage)),
 				newSchema: cloneDeep$1(toRaw(nextPage))
 			}, source);
 		});
 		prevPages.forEach((prevPage) => {
-			if (!nextMap.has(`${prevPage.id}`)) this.pushPageDiffStep("remove", prevPage, {
-				oldSchema: cloneDeep$1(toRaw(prevPage)),
-				parentId: preRoot.id,
-				index: indexInItems(preRoot, prevPage.id)
-			}, source);
+			if (!nextMap.has(`${prevPage.id}`)) {
+				this.pushPageDiffStep("remove", prevPage, {
+					oldSchema: cloneDeep$1(toRaw(prevPage)),
+					parentId: preRoot.id,
+					index: indexInItems(preRoot, prevPage.id)
+				}, source);
+				removedPages.push(prevPage);
+			}
+		});
+		if (addedPages.length || removedPages.length) history_default.notifyPageStructureChange({
+			add: addedPages,
+			remove: removedPages
 		});
 	}
 	/**

package/dist/es/services/history.js

@@ -244,6 +244,22 @@ var History = class extends BaseService {
 		});
 	}
 	/**
+	* 派发「页面 / 页面片结构变更」事件（`page-structure-change`）。
+	*
+	* 常规 `editorService.add` / `remove` 页面节点不会写入 `page` 历史栈（见 editor.add / remove 中
+	* 对 isPage / isPageFragment 的分支），因此不会产生任何 historyService 事件。该方法用于在这些
+	* 场景（以及 setRoot 整体替换 DSL 增删页面）下，向外统一通知页面结构的增删变化，供业务方感知。
+	*
+	* 一次操作涉及多个页面时，调用方应把本次增删的页面**合并为一个 change 一次性传入**，
+	* 使一次操作只派发一个事件；`add` / `remove` 分别为本次新增与删除的页面列表（其一可为空数组）。
+	*
+	* @param change 本次结构变更：{ add: 新增的页面列表, remove: 删除的页面列表 }
+	*/
+	notifyPageStructureChange(change) {
+		if (!change.add.length && !change.remove.length) return;
+		this.emit("page-structure-change", change);
+	}
+	/**
 	* 把当前内存中的全部历史栈（页面 / 代码块 / 数据源 / 扩展类型）序列化后写入本地 IndexedDB。
 	*
 	* - 每个 UndoRedo 栈连同其游标、容量一并保存，恢复后可继续 undo/redo；

package/dist/es/style.css

@@ -103,6 +103,10 @@
   width: calc(var(--el-input-width, 100%) - 40px);
 }
 
+.tmagic-design-color-picker {
+  flex: 0 0 auto;
+}
+
 .m-table .el-button.action-btn + .el-button.action-btn {
   margin-left: 0;
 }

package/dist/es/utils/data-source/index.js

@@ -199,12 +199,14 @@ var resolveFieldByPath = (fields, fieldNames, options = {}) => {
 		if (options.skipNumberIndices && isNumber(name)) continue;
 		if (!currentFields.length) return {
 			ok: false,
-			fields: currentFields
+			fields: currentFields,
+			failedName: name
 		};
 		field = currentFields.find((item) => item.name === name);
 		if (!field) return {
 			ok: false,
-			fields: currentFields
+			fields: currentFields,
+			failedName: name
 		};
 		currentFields = field.fields || [];
 	}

package/dist/es/utils/props.js

@@ -1,4 +1,3 @@
-import { validateForm } from "@tmagic/form";
 import { tMagicMessage } from "@tmagic/design";
 import { HookType, NODE_CONDS_KEY, NODE_CONDS_RESULT_KEY, NODE_DISABLE_CODE_BLOCK_KEY, NODE_DISABLE_DATA_SOURCE_KEY } from "@tmagic/core";
 //#region packages/editor/src/utils/props.ts
@@ -314,48 +313,5 @@ var removeStyleDisplayConfig = (formConfig) => formConfig.map((item) => {
 		})
 	};
 });
-/**
-* 对一份「组件属性表单配置 + 值」做一次独立的校验，**不复用也不污染页面上正在展示的表单**。
-*
-* 内部基于 `@tmagic/form` 的 `validateForm` 另建一个独立的 MForm 实例完成校验，并统一处理
-* 编辑器场景所需的上下文注入：将当前组件实例的 provides 合入 appContext，并向 formState 注入
-* stage / services 及外部扩展状态，保证校验规则依赖的上下文可用。
-*
-* 常用于源码编辑器保存后，对最新配置做一次校验，并将校验结果（错误信息）随提交一并抛给上层记录，
-* 使源码保存的错误状态与表单编辑保持一致。
-*
-* @returns 校验通过返回空字符串 `''`，否则返回以 `<br>` 拼接的错误文案。
-*   仅在初始化超时或挂载失败等异常情况下才会 reject。
-*
-* @example
-* ```ts
-* const error = await validatePropsForm({
-*   config,
-*   values,
-*   appContext: getCurrentInstance()?.appContext,
-*   services,
-*   stage: editorService.get('stage'),
-*   extendState,
-* });
-* if (error) {
-*   // 配置不合法，error 为错误文案
-* }
-* ```
-*/
-var validatePropsForm = ({ config, values, appContext = null, services, stage, extendState, debug, typeMatchValid }) => validateForm({
-	config,
-	debug,
-	typeMatchValid,
-	initValues: values,
-	appContext: appContext ? {
-		...appContext,
-		provides: { services }
-	} : null,
-	extendState: async (state) => ({
-		...await extendState?.(state) || {},
-		stage,
-		services
-	})
-});
 //#endregion
-export { advancedTabConfig, arrayOptions, booleanOptions, displayTabConfig, eqOptions, eventTabConfig, fillConfig, getCondOpOptionsByFieldType, numberOptions, removeStyleDisplayConfig, styleTabConfig, validatePropsForm };
+export { advancedTabConfig, arrayOptions, booleanOptions, displayTabConfig, eqOptions, eventTabConfig, fillConfig, getCondOpOptionsByFieldType, numberOptions, removeStyleDisplayConfig, styleTabConfig };

package/dist/es/utils/type-match-rules.js

@@ -3,6 +3,7 @@ import editor_default from "../services/editor.js";
 import { getFieldType, resolveFieldByPath } from "./data-source/index.js";
 import codeBlock_default from "../services/codeBlock.js";
 import dataSource_default from "../services/dataSource.js";
+import { validateTypeMatch } from "@tmagic/form";
 import { appendValidateSuggestion } from "@tmagic/design";
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, DATA_SOURCE_SET_DATA_METHOD_NAME, dataSourceTemplateRegExp, getKeysArray, removeDataSourceFieldPrefix } from "@tmagic/utils";
 import { NodeType } from "@tmagic/core";
@@ -20,7 +21,7 @@ var stringifyExampleValue = (value) => {
 	}
 	return String(value);
 };
-var MAX_SUGGESTION_OPTIONS = 5;
+var MAX_SUGGESTION_OPTIONS = 20;
 /**
 * 生成「请使用以下某一个值：xxx；xxx」形式的参考建议；无可选值时返回空字符串（不追加建议）。
 */
@@ -181,10 +182,10 @@ var validateDataSourceFieldPath = (path, options = {}) => {
 		fieldNames = path.slice(1);
 	}
 	const ds = findDataSource(`${dsId}`);
-	if (!ds) return defaultMessage(options.message, "值不在可选项中", dataSourceIdSuggestion());
+	if (!ds) return defaultMessage(options.message, `数据源(${dsId})不存在`, dataSourceIdSuggestion());
 	if (!fieldNames.length) return;
-	const { field, ok } = resolveFieldByPath(ds.fields, fieldNames);
-	if (!ok) return defaultMessage(options.message, "值不在可选项中", dataSourceIdSuggestion());
+	const { field, ok, fields, failedName } = resolveFieldByPath(ds.fields, fieldNames);
+	if (!ok) return defaultMessage(options.message, `数据源字段(${failedName})不存在`, listSuggestion(fields.map((item) => item.name)));
 	const allowedTypes = options.dataSourceFieldType || ["any"];
 	if (!allowedTypes.length || allowedTypes.includes("any")) return;
 	const leafType = field?.type || "any";
@@ -267,9 +268,15 @@ var isDataSourceFieldPathValue = (value, config) => {
 	if (config.value === "key") return true;
 	return `${value[0]}`.startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);
 };
-var validateDataSourceFieldSelect = (value, { message, props }) => {
+var validateDataSourceFieldSelect = (value, { mForm, message, props }) => {
 	const config = props.config || {};
-	if (config.fieldConfig && !isDataSourceFieldPathValue(value, config)) return;
+	if (config.fieldConfig && !isDataSourceFieldPathValue(value, config)) return validateTypeMatch(value, mForm, {
+		...props,
+		config: {
+			name: config.name,
+			...config.fieldConfig
+		}
+	}, message);
 	if (!Array.isArray(value) || value.some((item) => typeof item !== "string")) return defaultMessage(message, `${value}类型应为字符串数组`, dataSourceFieldPathSuggestion());
 	return validateDataSourceFieldPath(value, {
 		dataSourceId: config.dataSourceId,

package/dist/style.css

@@ -103,6 +103,10 @@
   width: calc(var(--el-input-width, 100%) - 40px);
 }
 
+.tmagic-design-color-picker {
+  flex: 0 0 auto;
+}
+
 .m-table .el-button.action-btn + .el-button.action-btn {
   margin-left: 0;
 }

package/dist/themes/magic-admin.css

@@ -103,6 +103,10 @@
   width: calc(var(--el-input-width, 100%) - 40px);
 }
 
+.tmagic-design-color-picker {
+  flex: 0 0 auto;
+}
+
 .m-form.m-form--magic-admin .el-collapse-item__header {
   background-color: transparent;
   padding: 0;