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

package/dist/es/Editor.vue_vue_type_script_setup_true_lang.js

@@ -18,13 +18,16 @@ import dep_default from "./services/dep.js";
 import keybinding_default from "./services/keybinding.js";
 import stageOverlay_default from "./services/stageOverlay.js";
 import { initServiceEvents, initServiceState } from "./initService.js";
-import { createBlock, createVNode, defineComponent, mergeDefaults, openBlock, provide, ref, renderSlot, unref, withCtx } from "vue";
+import { M_THEME_KEY } from "@tmagic/design";
+import { computed, createBlock, createVNode, defineComponent, mergeDefaults, openBlock, provide, ref, renderSlot, unref, withCtx } from "vue";
 import { EventEmitter } from "events";
 //#region packages/editor/src/Editor.vue?vue&type=script&setup=true&lang.ts
 var Editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditor",
 	__name: "Editor",
 	props: /*@__PURE__*/ mergeDefaults({
+		isLargeStageContainer: { type: Boolean },
+		theme: {},
 		modelValue: {},
 		componentGroupList: {},
 		datasourceList: {},
@@ -138,6 +141,7 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		* 与 PropsPanel 通过 `:extend-state` 显式传入的方式保持等价。
 		*/
 		provide("extendFormState", props.extendFormState);
+		provide("isLargeStageContainer", computed(() => props.isLargeStageContainer));
 		/**
 		* 提供 PropsPanel 主属性表单的 formState getter，供历史差异弹窗复用，
 		* 让 CompareForm 与 PropsPanel 的 filterFunction 上下文保持一致。
@@ -150,6 +154,12 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		*/
 		provide("historyListExtraTabs", props.historyListExtraTabs);
 		provide("eventBus", new EventEmitter());
+		/**
+		* 把当前主题以响应式 ref 形式 provide 给后代，供包含 `Teleport` 的组件
+		* （如 `TMagicPopover` / `FloatingBox` / `ContentMenu`）在传送目标上挂 `m-theme--<theme>`
+		* 类，让主题级 CSS 变量在 portal 节点上也能命中。详见 `@tmagic/design/theme.ts`。
+		*/
+		provide(M_THEME_KEY, computed(() => props.theme ?? ""));
 		const propsPanelMountedHandler = (e) => {
 			propsPanelRef.value = e;
 			emit("props-panel-mounted", e);
@@ -173,7 +183,8 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 				"disabled-page-fragment": __props.disabledPageFragment,
 				"page-bar-sort-options": __props.pageBarSortOptions,
 				"page-filter-function": __props.pageFilterFunction,
-				"hide-sidebar": __props.hideSidebar
+				"hide-sidebar": __props.hideSidebar,
+				theme: __props.theme
 			}, {
 				header: withCtx(() => [renderSlot(_ctx.$slots, "header")]),
 				nav: withCtx(() => [renderSlot(_ctx.$slots, "nav", { editorService: unref(editor_default) }, () => [createVNode(NavMenu_default, { data: __props.menu }, null, 8, ["data"])])]),
@@ -254,7 +265,8 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 				"disabled-page-fragment",
 				"page-bar-sort-options",
 				"page-filter-function",
-				"hide-sidebar"
+				"hide-sidebar",
+				"theme"
 			]);
 		};
 	}

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

@@ -1,9 +1,9 @@
 import { getEditorConfig } from "../utils/config.js";
+import { getCodeBlockFormConfig } from "../utils/code-block.js";
 import { useServices } from "../hooks/use-services.js";
 import { useWindowRect } from "../hooks/use-window-rect.js";
 import { useEditorContentHeight } from "../hooks/use-editor-content-height.js";
 import { useNextFloatBoxPosition } from "../hooks/use-next-float-box-position.js";
-import { getCodeBlockFormConfig } from "../utils/code-block.js";
 import CodeEditor_default from "../layouts/CodeEditor.js";
 import FloatingBox_default from "./FloatingBox.js";
 import { MFormBox } from "@tmagic/form";

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

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

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

@@ -1,6 +1,6 @@
 import ToolButton_default from "./ToolButton.js";
-import { useZIndex } from "@tmagic/design";
-import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveComponent, useTemplateRef, vShow, withCtx, withDirectives, withModifiers } from "vue";
+import { useThemeClass, useZIndex } from "@tmagic/design";
+import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveComponent, unref, useTemplateRef, vShow, withCtx, withDirectives, withModifiers } from "vue";
 //#region packages/editor/src/components/ContentMenu.vue?vue&type=script&setup=true&lang.ts
 var ContentMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorContentMenu",
@@ -29,6 +29,13 @@ var ContentMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		const buttonRefs = useTemplateRef("buttons");
 		const subMenuRef = useTemplateRef("subMenu");
 		const visible = ref(false);
+		/**
+		* 主题修饰类（来自最近的 `<MEditor>` / `<MForm>` 祖先 provide）。
+		* - 顶层 `ContentMenu` 渲染在编辑器子树中，加上去是冗余但无害；
+		* - 子菜单（递归 `<content-menu :is-sub-menu="true">` 被 `<teleport to="body">` 送到 body）
+		*   不在编辑器子树中，必须显式挂上主题类，主题级 CSS 变量才能命中。
+		*/
+		const themeClass = useThemeClass();
 		const subMenuData = ref([]);
 		const zIndex = useZIndex();
 		const curZIndex = ref(0);
@@ -118,8 +125,8 @@ var ContentMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				persisted: ""
 			}, {
 				default: withCtx(() => [withDirectives(createElementVNode("div", {
-					class: "magic-editor-content-menu",
 					ref: "menu",
+					class: normalizeClass(["magic-editor-content-menu", unref(themeClass)]),
 					style: normalizeStyle(menuStyle.value),
 					onMouseenter: _cache[0] || (_cache[0] = ($event) => mouseenterHandler()),
 					onContextmenu: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"]))
@@ -150,7 +157,7 @@ var ContentMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 						"is-sub-menu": true,
 						onHide: hide
 					}, null, 8, ["active", "menu-data"])) : createCommentVNode("v-if", true)]))
-				], 36), [[vShow, visible.value]])]),
+				], 38), [[vShow, visible.value]])]),
 				_: 3
 			});
 		};

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

@@ -1,5 +1,5 @@
 import Icon_default from "./Icon.js";
-import { TMagicButton, useZIndex } from "@tmagic/design";
+import { TMagicButton, useThemeClass, useZIndex } from "@tmagic/design";
 import { Teleport, computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeStyle, onBeforeUnmount, openBlock, provide, ref, renderSlot, toDisplayString, unref, useModel, useTemplateRef, watch, withCtx } from "vue";
 import { Close } from "@element-plus/icons-vue";
 import VanillaMoveable from "moveable";
@@ -43,6 +43,11 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		const props = __props;
 		const targetEl = useTemplateRef("target");
 		const titleEl = useTemplateRef("title");
+		/**
+		* 主题修饰类（来自最近的 `<MEditor>` / `<MForm>` 祖先 provide）。
+		* 挂在 `Teleport` 出去的浮动面板根节点上，让主题级 CSS 变量在 portal 节点上也能命中。
+		*/
+		const themeClass = useThemeClass();
 		const zIndex = useZIndex();
 		const curZIndex = ref(0);
 		const titleHeight = ref(0);
@@ -179,7 +184,7 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				to: "body"
 			}, [createElementVNode("div", mergeProps({
 				ref: "target",
-				class: "m-editor-float-box"
+				class: ["m-editor-float-box", unref(themeClass)]
 			}, _ctx.$attrs, {
 				style: {
 					...style.value,

package/dist/es/components/ViewForm.js

@@ -0,0 +1,5 @@
+import ViewForm_vue_vue_type_script_setup_true_lang_default from "./ViewForm.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/components/ViewForm.vue
+var ViewForm_default = ViewForm_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ViewForm_default as default };

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

@@ -0,0 +1,58 @@
+import { useCompareForm } from "../hooks/use-compare-form.js";
+import { MForm } from "@tmagic/form";
+import { createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeStyle, openBlock, unref } from "vue";
+//#region packages/editor/src/components/ViewForm.vue?vue&type=script&setup=true&lang.ts
+var ViewForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "MEditorViewForm",
+	__name: "ViewForm",
+	props: {
+		value: {},
+		type: {},
+		category: { default: "node" },
+		dataSourceType: {},
+		labelWidth: { default: "120px" },
+		height: {},
+		extendState: {},
+		baseFormState: {},
+		size: {},
+		loadConfig: {},
+		services: {},
+		disabled: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const { config, currentValues, wrapperStyle, mergedExtendState, loadConfig, formRef } = useCompareForm(__props);
+		__expose({
+			form: formRef,
+			config,
+			reload: loadConfig
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "m-editor-view-form-wrapper",
+				style: normalizeStyle(unref(wrapperStyle))
+			}, [unref(config).length ? (openBlock(), createBlock(unref(MForm), {
+				key: 0,
+				ref: "form",
+				class: "m-editor-view-form",
+				config: unref(config),
+				"init-values": unref(currentValues),
+				disabled: __props.disabled,
+				"label-width": __props.labelWidth,
+				"extend-state": unref(mergedExtendState),
+				size: __props.size
+			}, null, 8, [
+				"config",
+				"init-values",
+				"disabled",
+				"label-width",
+				"extend-state",
+				"size"
+			])) : createCommentVNode("v-if", true)], 4);
+		};
+	}
+});
+//#endregion
+export { ViewForm_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -17,7 +17,10 @@ var Code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		},
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {

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

@@ -15,7 +15,10 @@ var CodeLink_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		disabled: { type: Boolean },
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {

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

@@ -1,9 +1,10 @@
 import { useServices } from "../hooks/use-services.js";
 import { MContainer } from "@tmagic/form";
-import { TMagicCard } from "@tmagic/design";
+import { TMagicButton, TMagicCard } from "@tmagic/design";
 import { HookCodeType, HookType } from "@tmagic/core";
-import { computed, createElementBlock, createVNode, defineComponent, normalizeClass, openBlock, unref, watch, withCtx } from "vue";
+import { computed, createElementBlock, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, watch, withCtx } from "vue";
 import { isEmpty } from "lodash-es";
+import { Plus } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/CodeSelect.vue?vue&type=script&setup=true&lang.ts
 var CodeSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsCodeSelect",
@@ -18,7 +19,10 @@ var CodeSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		disabled: { type: Boolean },
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {
@@ -39,11 +43,21 @@ var CodeSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		* 仅当存在历史值时才启用对比，避免 lastValues 缺失时退化为「全部新增」的空对比。
 		*/
 		const isCompareMode = computed(() => Boolean(props.isCompare && props.lastValues));
+		const newHandler = () => {
+			const defaultCode = {
+				codeType: HookCodeType.CODE,
+				codeId: ""
+			};
+			const name = props.config.name || "";
+			const hookData = props.model[name]?.hookData || [];
+			emit("change", defaultCode, { modifyKey: `hookData.${hookData.length}` });
+		};
 		const codeConfig = computed(() => ({
 			type: "group-list",
 			name: "hookData",
 			enableToggleMode: false,
 			expandAll: true,
+			addable: () => false,
 			title: (mForm, { model, index }) => {
 				if (model.codeType === HookCodeType.DATA_SOURCE_METHOD) {
 					if (Array.isArray(model.codeId)) {
@@ -56,57 +70,54 @@ var CodeSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				if (codeContent) return codeContent.name;
 				return model.codeId || index;
 			},
-			items: [{
-				type: "row",
-				items: [
-					{
-						type: "select",
-						name: "codeType",
-						span: 6,
-						options: [{
-							value: HookCodeType.CODE,
-							text: "代码块"
-						}, {
-							value: HookCodeType.DATA_SOURCE_METHOD,
-							text: "数据源方法"
-						}],
-						rules: [{
-							typeMatch: true,
-							trigger: "change"
-						}],
-						defaultValue: HookCodeType.CODE,
-						onChange: (_mForm, v, { setModel }) => {
-							if (v === HookCodeType.DATA_SOURCE_METHOD) setModel("codeId", []);
-							else setModel("codeId", "");
-							return v;
-						}
-					},
-					{
-						type: "code-select-col",
-						name: "codeId",
-						span: 18,
-						labelWidth: 0,
-						display: (_mForm, { model }) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
-						notEditable: () => !codeBlockService.getEditStatus(),
-						rules: [{
-							typeMatch: true,
-							trigger: "change"
-						}]
-					},
-					{
-						type: "data-source-method-select",
-						name: "codeId",
-						span: 18,
-						labelWidth: 0,
-						display: (_mForm, { model }) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
-						notEditable: () => !dataSourceService.get("editable"),
-						rules: [{
-							typeMatch: true,
-							trigger: "change"
-						}]
+			titlePrefix: props.config.name === void 0 ? void 0 : String(props.config.name),
+			items: [
+				{
+					text: "代码类型",
+					type: "select",
+					name: "codeType",
+					labelPosition: "right",
+					rules: [{
+						typeMatch: true,
+						trigger: "change"
+					}],
+					options: [{
+						value: HookCodeType.CODE,
+						text: "代码块"
+					}, {
+						value: HookCodeType.DATA_SOURCE_METHOD,
+						text: "数据源方法"
+					}],
+					defaultValue: HookCodeType.CODE,
+					onChange: (_mForm, v, { setModel }) => {
+						if (v === HookCodeType.DATA_SOURCE_METHOD) setModel("codeId", []);
+						else setModel("codeId", "");
+						return v;
 					}
-				]
-			}]
+				},
+				{
+					type: "code-select-col",
+					name: "codeId",
+					text: "代码块",
+					rules: [{
+						typeMatch: true,
+						trigger: "change"
+					}],
+					display: (_mForm, { model }) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
+					notEditable: () => !codeBlockService.getEditStatus()
+				},
+				{
+					type: "data-source-method-select",
+					name: "codeId",
+					text: "数据源字段",
+					rules: [{
+						typeMatch: true,
+						trigger: "change"
+					}],
+					display: (_mForm, { model }) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
+					notEditable: () => !dataSourceService.get("editable")
+				}
+			]
 		}));
 		watch(() => props.model[props.name], (value) => {
 			if (isEmpty(value)) props.model[props.name] = {
@@ -116,10 +127,11 @@ var CodeSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		}, { immediate: true });
 		const changeHandler = (v, eventData) => emit("change", v, eventData);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(["m-fields-code-select", __props.config.className]) }, [createVNode(unref(TMagicCard), null, {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["m-fields-code-select", __props.config.className]) }, [createVNode(unref(TMagicCard), { flat: __props.config.flat }, {
 				default: withCtx(() => [createVNode(unref(MContainer), {
 					config: codeConfig.value,
 					size: __props.size,
+					class: "code-select-content",
 					prop: __props.prop,
 					disabled: __props.disabled,
 					"is-compare": isCompareMode.value,
@@ -134,9 +146,22 @@ var CodeSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					"is-compare",
 					"last-values",
 					"model"
+				]), createVNode(unref(TMagicButton), {
+					class: "create-button fullWidth",
+					icon: unref(Plus),
+					size: __props.size,
+					disabled: __props.disabled,
+					onClick: _cache[0] || (_cache[0] = ($event) => newHandler())
+				}, {
+					default: withCtx(() => [createTextVNode("添加" + toDisplayString(__props.config.text), 1)]),
+					_: 1
+				}, 8, [
+					"icon",
+					"size",
+					"disabled"
 				])]),
 				_: 1
-			})], 2);
+			}, 8, ["flat"])], 2);
 		};
 	}
 });

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

@@ -26,7 +26,10 @@ var CodeSelectCol_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		},
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {
@@ -72,6 +75,7 @@ var CodeSelectCol_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			type: "select",
 			name: props.name,
 			disabled: props.disabled,
+			text: props.config.text,
 			options: () => {
 				if (codeDsl.value) return map(codeDsl.value, (value, key) => ({
 					text: `${value.name}（${key}）`,

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

@@ -17,7 +17,10 @@ var CondOpSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		disabled: { type: Boolean },
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {