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

package/dist/tmagic-editor.umd.cjs

@@ -7818,14 +7818,14 @@
 				remove: removedPages
 			});
 		}
-		async doUpdate(config, { changeRecords = [], historySource } = {}) {
+		async doUpdate(config, { changeRecords = [], historySource, replace = false } = {}) {
 			if (!this.get("root")) throw new Error("root为空");
 			if (!config?.id) throw new Error("没有配置或者配置缺少id值");
 			const info = this.getNodeInfo(config.id, false);
 			if (!info.node) throw new Error(`获取不到id为${config.id}的节点`);
 			const node = (0, vue.toRaw)(info.node);
-			let newConfig = await toggleFixedPosition((0, vue.toRaw)(config), node, info.path, this.getLayout);
-			newConfig = mergeWith(cloneDeep$1(node), newConfig, editorNodeMergeCustomizer);
+			let newConfig = replace ? cloneDeep$1((0, vue.toRaw)(config)) : await toggleFixedPosition((0, vue.toRaw)(config), node, info.path, this.getLayout);
+			if (!replace) newConfig = mergeWith(cloneDeep$1(node), newConfig, editorNodeMergeCustomizer);
 			if (!newConfig.type) throw new Error("配置缺少type值");
 			if (newConfig.type === _tmagic_core.NodeType.ROOT) {
 				this.set("root", newConfig, { historySource });
@@ -7840,9 +7840,11 @@
 			const parentNodeItems = parent.items;
 			const index = getNodeIndex(newConfig.id, parent);
 			if (!parentNodeItems || typeof index === "undefined" || index === -1) throw new Error("更新的节点未找到");
-			const newLayout = await this.getLayout(newConfig);
-			const layout = await this.getLayout(node);
-			if (Array.isArray(newConfig.items) && newLayout !== layout) newConfig = setChildrenLayout(newConfig, newLayout);
+			if (!replace) {
+				const newLayout = await this.getLayout(newConfig);
+				const layout = await this.getLayout(node);
+				if (Array.isArray(newConfig.items) && newLayout !== layout) newConfig = setChildrenLayout(newConfig, newLayout);
+			}
 			parentNodeItems[index] = newConfig;
 			const selectedNodes = this.get("nodes");
 			const targetIndex = selectedNodes.findIndex((nodeItem) => `${nodeItem.id}` === `${newConfig.id}`);
@@ -7870,17 +7872,19 @@
 		* @param data.changeRecordList 多节点 form 端变更记录列表，按 config 数组同序对应每个节点；优先级高于 changeRecords
 		* @param data.doNotPushHistory 是否不写入历史记录（默认 false）
 		* @param data.historyDescription 入栈时附带的人类可读描述，用于历史面板展示（不影响 undo/redo 行为）
+		* @param data.replace 是否整节点替换：为 true 时跳过 mergeWith / toggleFixedPosition / setChildrenLayout，直接用传入配置覆盖（默认 false）
 		* @returns 更新后的节点配置
 		*/
 		async update(config, data = {}) {
 			this.captureSelectionBeforeOp();
-			const { doNotPushHistory = false, changeRecordList, changeRecords, historyDescription, historySource, invalidInfo } = data;
+			const { doNotPushHistory = false, changeRecordList, changeRecords, historyDescription, historySource, replace = false, invalidInfo } = data;
 			const nodes = Array.isArray(config) ? config : [config];
 			const updateData = await Promise.all(nodes.map((node, index) => {
 				const recordsForNode = changeRecordList ? changeRecordList[index] ?? [] : changeRecords ?? [];
 				return this.doUpdate(node, {
 					changeRecords: recordsForNode,
-					historySource
+					historySource,
+					replace
 				});
 			}));
 			this.applyInvalidInfo(config, invalidInfo);
@@ -9647,6 +9651,16 @@
 	};
 	//#endregion
 	//#region packages/editor/src/utils/dep/idle-task.ts
+	/**
+	* 回调因 timeout 触发（主线程一直没有空闲）时，单次回调执行任务的时间预算，单位 ms
+	* 参考一帧内可让出的余量：既保证队列有进展，又不长时间阻塞主线程
+	*/
+	var TIMEOUT_RUN_BUDGET = 5;
+	/**
+	* 回调因 timeout 触发时，每两次读取时钟之间执行的任务数
+	* 与空闲时间 <=5ms 时的批量保持一致，避免每个任务都读一次时钟
+	*/
+	var TIMEOUT_BATCH_SIZE = 10;
 	globalThis.requestIdleCallback = globalThis.requestIdleCallback || function(cb) {
 		const start = Date.now();
 		return setTimeout(() => {
@@ -9698,6 +9712,13 @@
 		runTaskQueue(deadline) {
 			this.taskHandle = null;
 			try {
+				if (deadline.didTimeout) {
+					const start = Date.now();
+					do
+						this.runTaskBatch(TIMEOUT_BATCH_SIZE);
+					while (this.getTaskLength() && Date.now() - start < TIMEOUT_RUN_BUDGET);
+					return;
+				}
 				while (deadline.timeRemaining() > 0 && this.getTaskLength()) {
 					const timeRemaining = deadline.timeRemaining();
 					let times = 0;
@@ -9705,17 +9726,23 @@
 					else if (timeRemaining <= 10) times = 100;
 					else if (timeRemaining <= 15) times = 300;
 					else times = 600;
-					for (let i = 0; i < times; i++) {
-						const task = this.hightLevelTaskList.length > 0 ? this.hightLevelTaskList.shift() : this.taskList.shift();
-						if (task) this.runTask(task);
-						if (!this.getTaskLength()) break;
-					}
+					this.runTaskBatch(times);
 				}
 			} finally {
 				this.finishRun();
 			}
 		}
 		/**
+		* 执行一批任务，队列被清空时提前结束
+		*/
+		runTaskBatch(times) {
+			for (let i = 0; i < times; i++) {
+				const task = this.hightLevelTaskList.length > 0 ? this.hightLevelTaskList.shift() : this.taskList.shift();
+				if (task) this.runTask(task);
+				if (!this.getTaskLength()) break;
+			}
+		}
+		/**
 		* 单个任务失败不能中断整个队列，否则后续任务永远不会被执行，
 		* 依赖收集会停在半路（收集中状态与剩余任务数都不再变化）
 		*/
@@ -11066,15 +11093,22 @@
 		if (config.value === "key") return true;
 		return `${value[0]}`.startsWith(_tmagic_utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);
 	};
-	var validateDataSourceFieldSelect = (value, { mForm, message, props }) => {
+	/**
+	* data-source-field-select 的 typeMatch 校验逻辑，可供自定义 rules.validator 复用。
+	*/
+	var validateDataSourceFieldSelectValue = (value, context, options) => {
+		const { mForm, message, props } = context;
 		const config = props.config || {};
-		if (config.fieldConfig && !isDataSourceFieldPathValue(value, config)) return (0, _tmagic_form.validateTypeMatch)(value, mForm, {
-			...props,
-			config: {
-				name: config.name,
-				...config.fieldConfig
-			}
-		}, message);
+		if (!isDataSourceFieldPathValue(value, config)) {
+			if (options?.validatePlainValue) return options.validatePlainValue(value, context);
+			if (config.fieldConfig) return (0, _tmagic_form.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,
@@ -11083,6 +11117,7 @@
 			message
 		});
 	};
+	var validateDataSourceFieldSelect = (value, context) => validateDataSourceFieldSelectValue(value, context);
 	var validateDataSourceSelect = (value, { message, props }) => {
 		const config = props.config || {};
 		const dataSources = getDataSources();
@@ -11193,7 +11228,7 @@
 		setEvent(type, events) {
 			eventMap[(0, _tmagic_utils.toLine)(type)] = [...events];
 		}
-		getEvent(type) {
+		getEvent(type, _data = {}) {
 			return cloneDeep$1(eventMap[(0, _tmagic_utils.toLine)(type)]) || [];
 		}
 		setMethods(methods) {
@@ -11204,7 +11239,7 @@
 		setMethod(type, method) {
 			methodMap[(0, _tmagic_utils.toLine)(type)] = [...method];
 		}
-		getMethod(type, _targetId) {
+		getMethod(type, _data = {}) {
 			return cloneDeep$1(methodMap[(0, _tmagic_utils.toLine)(type)]) || [];
 		}
 		resetState() {
@@ -11238,7 +11273,8 @@
 	var getEventNameOptions = (src, formValue = {}) => {
 		if (!formValue.type) return [];
 		if (src === "component") {
-			let events = events_default.getEvent(formValue.type) || [];
+			const sourceNode = editor_default.getNodeById(formValue.id);
+			let events = events_default.getEvent(formValue.type, { node: sourceNode }) || [];
 			if (formValue.type === "page-fragment-container" && formValue.pageFragmentId) {
 				const pageFragment = editor_default.get("root")?.items?.find((page) => page.id === formValue.pageFragmentId);
 				if (!pageFragment) return [];
@@ -11247,9 +11283,11 @@
 					value: pageFragment.id,
 					children: events
 				}];
-				(pageFragment.items || []).forEach((node) => {
-					(0, _tmagic_utils.traverseNode)(node, (current) => {
-						const nodeEvents = current.type && events_default.getEvent(current.type) || [];
+				(pageFragment.items || []).forEach((item) => {
+					(0, _tmagic_utils.traverseNode)(item, (current) => {
+						if (!current.type) return;
+						const node = editor_default.getNodeById(current.id) || current;
+						const nodeEvents = events_default.getEvent(current.type, { node }) || [];
 						events.push({
 							label: `${current.name}_${current.id}`,
 							value: `${current.id}`,
@@ -11308,15 +11346,24 @@
 		if (typeof toId === "undefined" || toId === null || toId === "") return [];
 		const node = editor_default.getNodeById(toId);
 		if (!node?.type) return [];
-		let methods = events_default.getMethod(node.type, toId) || [];
+		let methods = events_default.getMethod(node.type, {
+			targetId: toId,
+			node
+		}) || [];
 		if (node.type === "page-fragment-container" && node.pageFragmentId) {
 			const pageFragment = editor_default.get("root")?.items?.find((page) => page.id === node.pageFragmentId);
 			if (!pageFragment) return [];
 			methods = [];
 			(pageFragment.items || []).forEach((item) => {
 				(0, _tmagic_utils.traverseNode)(item, (current) => {
-					const nodeMethods = current.type && events_default.getMethod(current.type, current.id) || [];
-					if (nodeMethods.length) methods.push({
+					const node = editor_default.getNodeById(current.id) || current;
+					if (!current.type) return;
+					const nodeMethods = events_default.getMethod(current.type, {
+						targetId: current.id,
+						node
+					}) || [];
+					if (!nodeMethods.length) return;
+					methods.push({
 						label: `${current.name}_${current.id}`,
 						value: `${current.id}`,
 						children: nodeMethods
@@ -15113,22 +15160,33 @@
 			const submit = async (v, eventData, error, source = "props") => {
 				try {
 					if (!v.id) v.id = values.value.id;
-					const newValue = {
-						...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) => {
-							if (record.propPath?.startsWith("style") && record.value === "") (0, _tmagic_utils.setValueByKeyPath)(record.propPath, record.value, newValue);
-						});
-					} else newValue.style = { ...v.style };
 					const historySource = eventData ? "props" : "code";
+					const replace = historySource === "code";
+					let newValue;
+					if (replace) if (source === "style") newValue = {
+						...values.value,
+						id: v.id || values.value.id,
+						style: { ...v.style || {} }
+					};
+					else newValue = { ...v };
+					else {
+						newValue = {
+							...v,
+							style: {}
+						};
+						if (v.style) {
+							Object.entries(v.style).forEach(([key, value]) => {
+								if (value !== "" && newValue.style) newValue.style[key] = value;
+							});
+							eventData?.changeRecords?.forEach((record) => {
+								if (record.propPath?.startsWith("style") && record.value === "") (0, _tmagic_utils.setValueByKeyPath)(record.propPath, record.value, newValue);
+							});
+						}
+					}
 					editorService.update(newValue, {
 						changeRecords: eventData?.changeRecords,
 						historySource,
+						replace,
 						...enablePropsFormValidate && error ? { invalidInfo: {
 							id: newValue.id,
 							source,
@@ -17771,7 +17829,7 @@
 				let name = "";
 				if (data.name) name = data.name;
 				else if (data.items) name = "container";
-				return `${data.id}${name}${data.type}`.includes(v);
+				return `${data.id}${name}${data.type || ""}`.toLocaleLowerCase().includes(v.toLocaleLowerCase());
 			};
 			const { filterTextChangeHandler } = useFilter(nodeData, nodeStatusMap, filterNodeMethod);
 			const collapseAllHandler = () => {
@@ -17866,7 +17924,7 @@
 			const stage = (0, vue.computed)(() => editorService.get("stage"));
 			const list = (0, vue.computed)(() => componentListService.getList().map((group) => ({
 				...group,
-				items: group.items.filter((item) => item.text.includes(searchText.value))
+				items: group.items.filter((item) => `${item.text || ""}${item.desc || ""}${item.type}`.toLocaleLowerCase().includes(searchText.value.toLocaleLowerCase()))
 			})));
 			const collapseValue = (0, vue.ref)();
 			(0, vue.watch)(list, () => {
@@ -23003,7 +23061,7 @@
 						name: "name",
 						label: "事件名",
 						type: eventNameConfig.value.type,
-						options: (mForm, { formValue }) => eventsService.getEvent(formValue.type).map((option) => ({
+						options: (mForm, { formValue }) => eventsService.getEvent(formValue.type, { node: editorService.getNodeById(formValue.id) }).map((option) => ({
 							text: option.label,
 							value: option.value
 						}))
@@ -23020,7 +23078,10 @@
 						options: (mForm, { model }) => {
 							const node = editorService.getNodeById(model.to);
 							if (!node?.type) return [];
-							return eventsService.getMethod(node.type, model.to).map((option) => ({
+							return eventsService.getMethod(node.type, {
+								targetId: model.to,
+								node
+							}).map((option) => ({
 								text: option.label,
 								value: option.value
 							}));
@@ -24016,7 +24077,11 @@
 					text: "背景色",
 					labelWidth: "68px",
 					type: "data-source-field-select",
-					fieldConfig: { type: "colorPicker" }
+					fieldConfig: { type: "colorPicker" },
+					rules: [{
+						typeMatch: true,
+						message: (0, _tmagic_design.appendValidateSuggestion)("背景色应为字符串", "请参考以下示例值：\"#000000\"")
+					}]
 				},
 				{
 					name: "backgroundImage",
@@ -24194,7 +24259,11 @@
 						name: "fontSize",
 						text: "字号",
 						type: "data-source-field-select",
-						fieldConfig: { type: "text" }
+						fieldConfig: { type: "text" },
+						rules: [{
+							typeMatch: true,
+							message: (0, _tmagic_design.appendValidateSuggestion)("字号应为字符串或数字", "请参考以下示例值：24 或 \"24\"")
+						}]
 					}, {
 						labelWidth: "68px",
 						name: "lineHeight",
@@ -24208,20 +24277,46 @@
 					text: "字重",
 					labelWidth: "68px",
 					type: "data-source-field-select",
+					dataSourceFieldType: ["string", "number"],
 					fieldConfig: {
 						type: "select",
+						allowCreate: true,
 						options: ["normal", "bold"].concat(Array(7).fill(1).map((x, i) => `${i + 1}00`)).map((item) => ({
 							value: item,
 							text: item
 						}))
-					}
+					},
+					rules: [{ typeMatch: false }, { validator: ({ value, callback }, { config, model, prop }, mForm) => {
+						if (value === "" || value === null || value === void 0) return callback();
+						const result = validateDataSourceFieldSelectValue(value, {
+							fieldType: "data-source-field-select",
+							mForm,
+							props: {
+								config,
+								model,
+								prop
+							}
+						}, { validatePlainValue: (plainValue) => {
+							if (typeof plainValue === "string" || typeof plainValue === "number" && !Number.isNaN(plainValue)) return;
+							return "字重应为字符串或数字";
+						} });
+						if (result && typeof result.then === "function") {
+							result.then((error) => callback(error), (error) => callback(error));
+							return;
+						}
+						return callback(result);
+					} }]
 				},
 				{
 					labelWidth: "68px",
 					name: "color",
 					text: "颜色",
 					type: "data-source-field-select",
-					fieldConfig: { type: "colorPicker" }
+					fieldConfig: { type: "colorPicker" },
+					rules: [{
+						typeMatch: true,
+						message: (0, _tmagic_design.appendValidateSuggestion)("颜色应为字符串", "请参考以下示例值：\"#000000\"")
+					}]
 				},
 				{
 					name: "textAlign",
@@ -24293,7 +24388,7 @@
 	};
 	var _hoisted_3$1 = { class: "next-input" };
 	var _hoisted_4$1 = [
-		"model-value",
+		"value",
 		"title",
 		"disabled",
 		"onChange"
@@ -24355,7 +24450,7 @@
 						key: index,
 						class: (0, vue.normalizeClass)(item.class)
 					}, [item.text ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$1, (0, vue.toDisplayString)(item.text), 1)) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createElementVNode)("span", _hoisted_3$1, [(0, vue.createElementVNode)("input", {
-						"model-value": __props.model[item.name],
+						value: __props.model[item.name],
 						placeholder: "0",
 						title: __props.model[item.name],
 						disabled: __props.disabled,
@@ -25194,12 +25289,20 @@
 						name: "left",
 						type: "data-source-field-select",
 						text: "left",
-						fieldConfig: { type: "text" }
+						fieldConfig: { type: "text" },
+						rules: [{
+							typeMatch: true,
+							message: (0, _tmagic_design.appendValidateSuggestion)("left 应为字符串", "请参考以下示例值：\"10\"")
+						}]
 					}, {
 						name: "top",
 						type: "data-source-field-select",
 						text: "top",
-						fieldConfig: { type: "text" }
+						fieldConfig: { type: "text" },
+						rules: [{
+							typeMatch: true,
+							message: (0, _tmagic_design.appendValidateSuggestion)("top 应为字符串", "请参考以下示例值：\"10\"")
+						}]
 					}]
 				},
 				{
@@ -25210,12 +25313,20 @@
 						name: "right",
 						type: "data-source-field-select",
 						text: "right",
-						fieldConfig: { type: "text" }
+						fieldConfig: { type: "text" },
+						rules: [{
+							typeMatch: true,
+							message: (0, _tmagic_design.appendValidateSuggestion)("right 应为字符串", "请参考以下示例值：\"10\"")
+						}]
 					}, {
 						name: "bottom",
 						type: "data-source-field-select",
 						text: "bottom",
-						fieldConfig: { type: "text" }
+						fieldConfig: { type: "text" },
+						rules: [{
+							typeMatch: true,
+							message: (0, _tmagic_design.appendValidateSuggestion)("bottom 应为字符串", "请参考以下示例值：\"10\"")
+						}]
 					}]
 				},
 				{
@@ -25223,7 +25334,11 @@
 					name: "zIndex",
 					text: "zIndex",
 					type: "data-source-field-select",
-					fieldConfig: { type: "text" }
+					fieldConfig: { type: "text" },
+					rules: [{
+						typeMatch: true,
+						message: (0, _tmagic_design.appendValidateSuggestion)("zIndex 应为数字", "请参考以下示例值：10")
+					}]
 				}
 			]);
 			const change = (value, eventData) => {
@@ -26188,6 +26303,7 @@
 	exports.useServices = useServices;
 	exports.useStage = useStage;
 	exports.useWindowRect = useWindowRect;
+	exports.validateDataSourceFieldSelectValue = validateDataSourceFieldSelectValue;
 	exports.warn = warn;
 	Object.keys(_tmagic_form).forEach(function(k) {
 		if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.20",
+  "version": "1.8.0-beta.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-beta.20",
-    "@tmagic/form": "1.8.0-beta.20",
-    "@tmagic/stage": "1.8.0-beta.20",
-    "@tmagic/table": "1.8.0-beta.20",
-    "@tmagic/utils": "1.8.0-beta.20"
+    "@tmagic/design": "1.8.0-beta.22",
+    "@tmagic/form": "1.8.0-beta.22",
+    "@tmagic/utils": "1.8.0-beta.22",
+    "@tmagic/table": "1.8.0-beta.22",
+    "@tmagic/stage": "1.8.0-beta.22"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -76,7 +76,7 @@
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
     "vue": "^3.5.40",
-    "@tmagic/core": "1.8.0-beta.20"
+    "@tmagic/core": "1.8.0-beta.22"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/fields/EventSelect.vue

@@ -311,10 +311,12 @@ const tableConfig = computed(
           label: '事件名',
           type: eventNameConfig.value.type,
           options: (mForm: FormState, { formValue }: any) =>
-            eventsService.getEvent(formValue.type).map((option: any) => ({
-              text: option.label,
-              value: option.value,
-            })),
+            eventsService
+              .getEvent(formValue.type, { node: editorService.getNodeById(formValue.id) })
+              .map((option: any) => ({
+                text: option.label,
+                value: option.value,
+              })),
         },
         {
           name: 'to',
@@ -329,7 +331,7 @@ const tableConfig = computed(
             const node = editorService.getNodeById(model.to);
             if (!node?.type) return [];
 
-            return eventsService.getMethod(node.type, model.to).map((option: any) => ({
+            return eventsService.getMethod(node.type, { targetId: model.to, node }).map((option: any) => ({
               text: option.label,
               value: option.value,
             }));

package/src/fields/StyleSetter/components/Box.vue

@@ -4,7 +4,7 @@
       <span class="help-txt" v-if="item.text">{{ item.text }}</span>
       <span class="next-input">
         <input
-          :model-value="model[item.name]"
+          :value="model[item.name]"
           placeholder="0"
           :title="model[item.name]"
           :disabled="disabled"

package/src/fields/StyleSetter/components/Position.vue

@@ -3,7 +3,7 @@
     <div v-for="(item, index) in list" :key="index" :class="item.class">
       <span class="next-input">
         <input
-          :model-value="model[item.name]"
+          :value="model[item.name]"
           placeholder="0"
           :title="model[item.name]"
           :disabled="disabled"

package/src/fields/StyleSetter/pro/Background.vue

@@ -17,6 +17,7 @@
 <script lang="ts" setup>
 import { markRaw } from 'vue';
 
+import { appendValidateSuggestion } from '@tmagic/design';
 import { type ContainerChangeEventData, defineFormConfig, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
@@ -47,6 +48,12 @@ const formConfig = defineFormConfig([
     fieldConfig: {
       type: 'colorPicker',
     },
+    rules: [
+      {
+        typeMatch: true,
+        message: appendValidateSuggestion('背景色应为字符串', '请参考以下示例值："#000000"'),
+      },
+    ],
   },
   {
     name: 'backgroundImage',

package/src/fields/StyleSetter/pro/Font.vue

@@ -17,9 +17,12 @@
 <script lang="ts" setup>
 import { markRaw } from 'vue';
 
+import { appendValidateSuggestion } from '@tmagic/design';
 import { type ContainerChangeEventData, defineFormConfig, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
+import { validateDataSourceFieldSelectValue } from '@editor/utils/type-match-rules';
+
 import { AlignCenter, AlignLeft, AlignRight } from '../icons/text-align';
 
 defineProps<{
@@ -48,6 +51,12 @@ const formConfig = defineFormConfig([
         fieldConfig: {
           type: 'text',
         },
+        rules: [
+          {
+            typeMatch: true,
+            message: appendValidateSuggestion('字号应为字符串或数字', '请参考以下示例值：24 或 "24"'),
+          },
+        ],
       },
       {
         labelWidth: '68px',
@@ -65,8 +74,10 @@ const formConfig = defineFormConfig([
     text: '字重',
     labelWidth: '68px',
     type: 'data-source-field-select',
+    dataSourceFieldType: ['string', 'number'],
     fieldConfig: {
       type: 'select',
+      allowCreate: true,
       options: ['normal', 'bold']
         .concat(
           Array(7)
@@ -78,6 +89,46 @@ const formConfig = defineFormConfig([
           text: item,
         })),
     },
+    rules: [
+      {
+        typeMatch: false,
+      },
+      {
+        validator: ({ value, callback }, { config, model, prop }, mForm) => {
+          if (value === '' || value === null || value === undefined) {
+            return callback();
+          }
+
+          const result = validateDataSourceFieldSelectValue(
+            value,
+            {
+              fieldType: 'data-source-field-select',
+              mForm,
+              props: { config, model, prop },
+            },
+            {
+              // 字重允许 string（含可创建项）与 number（如 700）
+              validatePlainValue: (plainValue) => {
+                if (typeof plainValue === 'string' || (typeof plainValue === 'number' && !Number.isNaN(plainValue))) {
+                  return undefined;
+                }
+                return '字重应为字符串或数字';
+              },
+            },
+          );
+
+          if (result && typeof (result as Promise<string | undefined>).then === 'function') {
+            (result as Promise<string | undefined>).then(
+              (error) => callback(error),
+              (error) => callback(error),
+            );
+            return;
+          }
+
+          return callback(result);
+        },
+      },
+    ],
   },
   {
     labelWidth: '68px',
@@ -87,6 +138,12 @@ const formConfig = defineFormConfig([
     fieldConfig: {
       type: 'colorPicker',
     },
+    rules: [
+      {
+        typeMatch: true,
+        message: appendValidateSuggestion('颜色应为字符串', '请参考以下示例值："#000000"'),
+      },
+    ],
   },
   {
     name: 'textAlign',