@tmagic/editor 1.8.0-beta.23 → 1.8.0-beta.25

package/dist/es/services/editor.js

@@ -12,6 +12,8 @@ import { NodeType } from "@tmagic/core";
 import { nextTick, reactive, toRaw } from "vue";
 import { cloneDeep as cloneDeep$1, isEmpty, isEqual, isObject, mergeWith, uniq } from "lodash-es";
 //#region packages/editor/src/services/editor.ts
+/** 历史插回时把记录的下标收敛到 [0, length]，越界（含未记录）一律追加到末尾 */
+var clampIndex = (index, length) => typeof index === "number" && index >= 0 && index <= length ? index : length;
 /**
 * 把「变更前后节点快照」列表归一成 update 类型的 {@link StepDiffItem} 列表，供 {@link StepValue.diff} 使用。
 * `changeRecords` 来自 form 端的 propPath/value 列表，撤销/重做时只对这些 propPath 做局部更新；
@@ -51,6 +53,11 @@ var Editor = class extends BaseService {
 	* 普通操作不会读取它，调用前由 *AndGetHistoryId 重置为 null。
 	*/
 	lastPushedHistoryId = null;
+	/**
+	* 上一次 doAdd 的插入记忆：nodeId 为插入的节点，selectedId 为当时的选中节点。
+	* 仅在选中节点未变化时复用（连续 add / doNotSelect / 批量粘贴），选中变化后自动失效，无需手动清理。
+	*/
+	lastAdded = null;
 	constructor() {
 		super(canUsePluginMethods.async.map((methodName) => ({
 			name: methodName,
@@ -246,24 +253,29 @@ var Editor = class extends BaseService {
 		this.set("stage", null);
 		this.set("highlightNode", null);
 	}
-	async doAdd(node, parent) {
+	async doAdd(node, parent, _options = {}) {
 		const root = this.get("root");
 		if (!root) throw new Error("root为空");
 		const curNode = this.get("node");
 		const stage = this.get("stage");
 		if (!curNode) throw new Error("当前选中节点为空");
 		if ((parent.type === NodeType.ROOT || curNode?.type === NodeType.ROOT) && !isPageOrFragment(node)) throw new Error("app下不能添加组件");
-		if (parent.id !== curNode.id && !isPageOrFragment(node)) {
-			const index = parent.items.indexOf(curNode);
-			parent.items?.splice(index + 1, 0, node);
-		} else parent.items?.push(node);
+		const anchorId = this.lastAdded?.selectedId === curNode.id ? this.lastAdded.nodeId : curNode.id;
+		const anchorIndex = isPageOrFragment(node) ? -1 : Math.max(getNodeIndex(anchorId, parent), getNodeIndex(curNode.id, parent));
+		const insertIndex = anchorIndex < 0 ? parent.items.length : anchorIndex + 1;
+		parent.items.splice(insertIndex, 0, node);
+		this.lastAdded = {
+			selectedId: curNode.id,
+			nodeId: node.id
+		};
 		const layout = await this.getLayout(toRaw(parent), node);
 		node.style = getInitPositionStyle(node.style, layout);
 		await stage?.add({
 			config: cloneDeep$1(node),
 			parent: cloneDeep$1(parent),
 			parentId: parent.id,
-			root: cloneDeep$1(root)
+			root: cloneDeep$1(root),
+			index: insertIndex
 		});
 		const newStyle = fixNodePosition(node, parent, stage);
 		if (newStyle && (newStyle.top !== node.style.top || newStyle.left !== node.style.left)) {
@@ -281,14 +293,12 @@ var Editor = class extends BaseService {
 	* 向指点容器添加组件节点
 	* @param addConfig 将要添加的组件节点配置
 	* @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
-	* @param options 可选配置
-	* @param options.doNotSelect 添加后是否不更新当前选中节点（默认 false，添加后会选中新增的节点）
-	* @param options.doNotSwitchPage 添加后是否不切换当前页面（默认 false；新增页面 / 跨页新增时为 true 会跳过会引发页面切换的选中操作）
-	* @param options.doNotPushHistory 是否不写入历史记录（默认 false）
+	* @param options 可选配置，见 {@link DslOpOptions}
 	* @returns 添加后的节点
 	*/
-	async add(addNode, parent, { doNotSelect = false, doNotSwitchPage = false, doNotPushHistory = false, historyDescription, historySource } = {}) {
+	async add(addNode, parent, options = {}) {
 		this.captureSelectionBeforeOp();
+		const { doNotSelect = false, doNotSwitchPage = false, doNotPushHistory = false, historyDescription, historySource } = options;
 		const stage = this.get("stage");
 		const addNodes = [];
 		if (!Array.isArray(addNode)) {
@@ -296,13 +306,13 @@ var Editor = class extends BaseService {
 			if (!type) throw new Error("组件类型不能为空");
 			addNodes.push({ ...toRaw(await props_default.getPropsValue(type, config)) });
 		} else addNodes.push(...addNode);
-		const newNodes = await Promise.all(addNodes.map((node) => {
+		const newNodes = [];
+		for (const node of addNodes) {
 			const root = this.get("root");
-			if (isPageOrFragment(node) && root) return this.doAdd(node, root);
-			const parentNode = parent ?? getAddParent(node);
+			const parentNode = isPageOrFragment(node) && root ? root : parent ?? getAddParent(node);
 			if (!parentNode) throw new Error("未找到父元素");
-			return this.doAdd(node, parentNode);
-		}));
+			newNodes.push(await this.doAdd(node, parentNode, options));
+		}
 		if (newNodes.length > 1) {
 			const wouldSwitchPage = newNodes.some((n) => this.isOnDifferentPage(n));
 			if (!doNotSelect && !(doNotSwitchPage && wouldSwitchPage)) {
@@ -418,7 +428,8 @@ var Editor = class extends BaseService {
 	* @param options.doNotSwitchPage 删除后是否不切换当前页面（默认 false；删除页面 / 页面片段时为 true 会跳过自动切换到首个剩余页面）
 	* @param options.doNotPushHistory 是否不写入历史记录（默认 false）
 	*/
-	async remove(nodeOrNodeList, { doNotSelect = false, doNotSwitchPage = false, doNotPushHistory = false, historyDescription, historySource } = {}) {
+	async remove(nodeOrNodeList, options = {}) {
+		const { doNotPushHistory = false, historyDescription, historySource } = options;
 		this.captureSelectionBeforeOp();
 		const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
 		const changeItems = nodes.map((node) => ({
@@ -442,10 +453,7 @@ var Editor = class extends BaseService {
 				});
 			}
 		}
-		await Promise.all(nodes.map((node) => this.doRemove(node, {
-			doNotSelect,
-			doNotSwitchPage
-		})));
+		await Promise.all(nodes.map((node) => this.doRemove(node, options)));
 		this.removeInvalidNodesBySubtree(nodes);
 		if (removedItems.length > 0 && pageForOp) if (!doNotPushHistory) this.pushOpHistory("remove", {
 			diff: removedItems,
@@ -467,7 +475,8 @@ var Editor = class extends BaseService {
 			remove: removedPages
 		});
 	}
-	async doUpdate(config, { changeRecords = [], historySource, replace = false } = {}) {
+	async doUpdate(config, data = {}) {
+		const { changeRecords = [], historySource, replace = false } = data;
 		if (!this.get("root")) throw new Error("root为空");
 		if (!config?.id) throw new Error("没有配置或者配置缺少id值");
 		const info = this.getNodeInfo(config.id, false);
@@ -516,24 +525,18 @@ var Editor = class extends BaseService {
 	* 更新节点
 	* update后会触发依赖收集，收集完后会掉stage.update方法
 	* @param config 新的节点配置，配置中需要有id信息
-	* @param data 额外数据
-	* @param data.changeRecords 单节点 form 端变更记录（多节点场景下被忽略，使用 changeRecordList）
-	* @param data.changeRecordList 多节点 form 端变更记录列表，按 config 数组同序对应每个节点；优先级高于 changeRecords
-	* @param data.doNotPushHistory 是否不写入历史记录（默认 false）
-	* @param data.historyDescription 入栈时附带的人类可读描述，用于历史面板展示（不影响 undo/redo 行为）
-	* @param data.replace 是否整节点替换：为 true 时跳过 mergeWith / toggleFixedPosition / setChildrenLayout，直接用传入配置覆盖（默认 false）
+	* @param data 额外数据，见 {@link UpdateOptions}
 	* @returns 更新后的节点配置
 	*/
 	async update(config, data = {}) {
 		this.captureSelectionBeforeOp();
-		const { doNotPushHistory = false, changeRecordList, changeRecords, historyDescription, historySource, replace = false, invalidInfo } = 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 ?? [];
 			return this.doUpdate(node, {
-				changeRecords: recordsForNode,
-				historySource,
-				replace
+				...data,
+				changeRecords: recordsForNode
 			});
 		}));
 		this.applyInvalidInfo(config, invalidInfo);
@@ -1376,14 +1379,15 @@ var Editor = class extends BaseService {
 						const parent = this.getNodeById(parentId, false);
 						if (parent?.items) {
 							const addedNode = cloneDeep$1(newSchema);
-							if (typeof index === "number" && index >= 0 && index < parent.items.length) parent.items.splice(index, 0, addedNode);
-							else parent.items.push(addedNode);
+							const insertIndex = clampIndex(index, parent.items.length);
+							parent.items.splice(insertIndex, 0, addedNode);
 							addedNodes.push(addedNode);
 							await stage?.add({
 								config: cloneDeep$1(newSchema),
 								parent: cloneDeep$1(parent),
 								parentId: parent.id,
-								root: cloneDeep$1(root)
+								root: cloneDeep$1(root),
+								index: insertIndex
 							});
 						}
 					}
@@ -1401,13 +1405,15 @@ var Editor = class extends BaseService {
 						const parent = this.getNodeById(parentId, false);
 						if (parent?.items) {
 							const addedNode = cloneDeep$1(oldSchema);
-							parent.items.splice(index ?? parent.items.length, 0, addedNode);
+							const insertIndex = clampIndex(index, parent.items.length);
+							parent.items.splice(insertIndex, 0, addedNode);
 							addedNodes.push(addedNode);
 							await stage?.add({
 								config: cloneDeep$1(oldSchema),
 								parent: cloneDeep$1(parent),
 								parentId,
-								root: cloneDeep$1(root)
+								root: cloneDeep$1(root),
+								index: insertIndex
 							});
 						}
 					}

package/dist/es/services/props.js

@@ -1,5 +1,5 @@
-import { fillConfig } from "../utils/props.js";
 import BaseService from "./BaseService.js";
+import { fillConfig } from "../utils/props.js";
 import editor_default from "./editor.js";
 import { getNodePath, getValueByKeyPath, guid, setValueByKeyPath, toLine } from "@tmagic/utils";
 import { Target, Watcher } from "@tmagic/core";

package/dist/es/style.css

@@ -572,7 +572,11 @@ fieldset.m-fieldset .m-form-tip {
 .m-form-box .el-box__header {
   margin: 0;
 }
+.m-form-box .m-box-body {
+  min-height: 0;
+}
 .m-form-box .dialog-footer {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;

package/dist/es/utils/event.js

@@ -19,7 +19,7 @@ var normalizeCompActionValue = (value) => {
 var getEventNameOptions = (src, formValue = {}) => {
 	if (!formValue.type) return [];
 	if (src === "component") {
-		const sourceNode = editor_default.getNodeById(formValue.id);
+		const sourceNode = editor_default.getNodeById(formValue.id) || formValue;
 		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);

package/dist/es/utils/props.js

@@ -62,7 +62,6 @@ var getCondOpOptionsByFieldType = (type) => {
 };
 var styleTabConfig = {
 	title: "样式",
-	lazy: true,
 	display: ({ services }) => !(services?.uiService?.get("showStylePanel") ?? true),
 	items: [{
 		name: "style",
@@ -127,7 +126,6 @@ var styleTabConfig = {
 };
 var eventTabConfig = {
 	title: "事件",
-	lazy: true,
 	items: [{
 		name: "events",
 		src: "component",
@@ -138,7 +136,6 @@ var eventTabConfig = {
 };
 var advancedTabConfig = {
 	title: "高级",
-	lazy: true,
 	items: [
 		{
 			name: NODE_DISABLE_CODE_BLOCK_KEY,
@@ -288,30 +285,5 @@ var fillConfig = (config = [], { labelWidth = "80px", disabledDataSource = false
 	if (!disabledDataSource) tabConfig.items.push({ ...displayTabConfig });
 	return [tabConfig];
 };
-/**
-* 将属性表单配置中「样式」tab-pane 的 `display` 强制置为 `true`。
-*
-* `propsService.getPropsConfig` 返回的样式 tab 默认带有
-* `display: ({ services }) => !(services?.uiService?.get('showStylePanel') ?? true)`，
-* 在对比 / 只读展示场景（CompareForm / ViewForm）下并不需要跟随 uiService 状态隐藏，
-* 这里统一放开，保证样式 tab 始终可见。
-*
-* @param formConfig 组件属性表单配置
-* @returns 处理后的表单配置（不修改入参，返回浅拷贝）
-*/
-var removeStyleDisplayConfig = (formConfig) => formConfig.map((item) => {
-	if (!("type" in item)) return item;
-	if (item?.type !== "tab" || !Array.isArray(item.items)) return item;
-	return {
-		...item,
-		items: item.items.map((tabPane) => {
-			if (tabPane?.title !== "样式" || !Array.isArray(tabPane.items)) return tabPane;
-			return {
-				...tabPane,
-				display: true
-			};
-		})
-	};
-});
 //#endregion
-export { advancedTabConfig, arrayOptions, booleanOptions, displayTabConfig, eqOptions, eventTabConfig, fillConfig, getCondOpOptionsByFieldType, numberOptions, removeStyleDisplayConfig, styleTabConfig };
+export { advancedTabConfig, arrayOptions, booleanOptions, displayTabConfig, eqOptions, eventTabConfig, fillConfig, getCondOpOptionsByFieldType, numberOptions, styleTabConfig };

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

@@ -152,24 +152,20 @@ var displayCondSuggestion = () => {
 };
 var validateDataSourceFieldPath = (path, options = {}) => {
 	if (!getDataSources().length) return;
-	let dsId = options.dataSourceId;
-	let fieldNames = path;
-	if (!dsId) {
-		if (!path.length) return defaultMessage(options.message, "值不在可选项中", dataSourceIdSuggestion());
-		const rawDsId = path[0];
-		dsId = options.valueMode === "key" || !`${rawDsId}`.startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX) ? `${rawDsId}` : removeDataSourceFieldPrefix(`${rawDsId}`);
-		fieldNames = path.slice(1);
-	}
+	const dsId = options.dataSourceId;
+	if (!dsId) return defaultMessage(options.message, "数据源不存在", dataSourceIdSuggestion());
 	const ds = findDataSource(`${dsId}`);
 	if (!ds) return defaultMessage(options.message, `数据源(${dsId})不存在`, dataSourceIdSuggestion());
-	if (!fieldNames.length) return;
-	const { field, ok, fields, failedName } = resolveFieldByPath(ds.fields, fieldNames);
+	if (!path.length) return;
+	const { field, ok, fields, failedName } = resolveFieldByPath(ds.fields, path);
 	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";
-	if (leafType === "any" || allowedTypes.includes(leafType)) return;
-	return defaultMessage(options.message, "值不在可选项中", dataSourceIdSuggestion());
+	if (leafType !== "any" && !allowedTypes.includes(leafType)) {
+		const fieldName = field?.name || path[path.length - 1];
+		return defaultMessage(options.message, `请选择类型为${allowedTypes.join("或")}的字段，字段(${fieldName})的类型为${leafType}`);
+	}
 };
 var validateDataSourceMethodTuple = (value, message) => {
 	if (!Array.isArray(value) || value.length !== 2 || value.some((item) => typeof item !== "string")) return defaultMessage(message, `${value}类型应为长度为 2 的字符串数组`, methodTupleSuggestion());
@@ -215,7 +211,7 @@ var validateCondOpSelect = (value, { message, props }) => {
 	const parentFields = props.config?.parentFields || [];
 	const fieldPath = Array.isArray(props.model?.field) ? props.model.field : [];
 	const [id, ...fieldNames] = [...parentFields, ...fieldPath];
-	const ds = id ? findDataSource(`${id}`) : void 0;
+	const ds = id ? findDataSource(removeDataSourceFieldPrefix(`${id}`)) : void 0;
 	const allowed = getCondOpsByFieldType(getFieldType(ds, fieldNames));
 	if (!allowed.has(value)) return defaultMessage(message, `${value} 不在可选项中`, listSuggestion([...allowed]));
 };
@@ -251,7 +247,7 @@ var isDataSourceFieldPathValue = (value, config) => {
 /**
 * data-source-field-select 的 typeMatch 校验逻辑，可供自定义 rules.validator 复用。
 */
-var validateDataSourceFieldSelectValue = (value, context, options) => {
+var validateDataSourceFieldSelect = (value, context, options) => {
 	const { mForm, message, props } = context;
 	const config = props.config || {};
 	if (!isDataSourceFieldPathValue(value, config)) {
@@ -265,14 +261,18 @@ var validateDataSourceFieldSelectValue = (value, context, options) => {
 		}, message);
 	}
 	if (!Array.isArray(value) || value.some((item) => typeof item !== "string")) return defaultMessage(message, `${value}类型应为字符串数组`, dataSourceFieldPathSuggestion());
-	return validateDataSourceFieldPath(value, {
-		dataSourceId: config.dataSourceId,
-		valueMode: config.value,
+	let dataSourceId = config.dataSourceId ? `${config.dataSourceId}` : void 0;
+	let fieldNames = value;
+	if (!dataSourceId) {
+		dataSourceId = value.length ? removeDataSourceFieldPrefix(value[0]) : void 0;
+		fieldNames = value.slice(1);
+	}
+	return validateDataSourceFieldPath(fieldNames, {
+		dataSourceId,
 		dataSourceFieldType: config.dataSourceFieldType,
 		message
 	});
 };
-var validateDataSourceFieldSelect = (value, context) => validateDataSourceFieldSelectValue(value, context);
 var validateDataSourceSelect = (value, { message, props }) => {
 	const config = props.config || {};
 	const dataSources = getDataSources();
@@ -342,7 +342,8 @@ var editorTypeMatchRules = {
 	"ui-select": validateUiSelect,
 	"data-source-input": validateDataSourceInput,
 	"data-source-method-select": validateDataSourceMethodSelect,
-	"data-source-field-select": validateDataSourceFieldSelect,
+	/** 注册进 typeMatch 规则表的入口，收窄为 TypeMatchValidator，避免调用方误传第三个参数 */
+	"data-source-field-select": (value, context) => validateDataSourceFieldSelect(value, context),
 	"data-source-select": validateDataSourceSelect,
 	"code-select": validateCodeSelect,
 	"data-source-fields": validateDataSourceFields,
@@ -352,4 +353,4 @@ var editorTypeMatchRules = {
 	"display-conds": validateDisplayConds
 };
 //#endregion
-export { ALL_COND_OPS, editorTypeMatchRules, validateDataSourceFieldSelectValue };
+export { ALL_COND_OPS, editorTypeMatchRules, validateDataSourceFieldSelect };

package/dist/style.css

@@ -572,7 +572,11 @@ fieldset.m-fieldset .m-form-tip {
 .m-form-box .el-box__header {
   margin: 0;
 }
+.m-form-box .m-box-body {
+  min-height: 0;
+}
 .m-form-box .dialog-footer {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;

package/dist/themes/magic-admin.css

@@ -603,7 +603,11 @@ fieldset.m-fieldset .m-form-tip {
 .m-form-box .el-box__header {
   margin: 0;
 }
+.m-form-box .m-box-body {
+  min-height: 0;
+}
 .m-form-box .dialog-footer {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;