@tmagic/editor 1.8.0-beta.7 → 1.8.0-manmanyu.10

package/dist/es/Editor.vue_vue_type_script_setup_true_lang.js

@@ -18,13 +18,15 @@ import keybinding_default from "./services/keybinding.js";
 import stageOverlay_default from "./services/stageOverlay.js";
 import { defaultEditorProps } from "./editorProps.js";
 import { initServiceEvents, initServiceState } from "./initService.js";
-import { createBlock, createVNode, defineComponent, mergeDefaults, openBlock, provide, renderSlot, unref, withCtx } from "vue";
+import { M_THEME_KEY } from "@tmagic/design";
+import { computed, createBlock, createVNode, defineComponent, mergeDefaults, openBlock, provide, 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({
+var Editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditor",
 	__name: "Editor",
-	props: /* @__PURE__ */ mergeDefaults({
+	props: /*@__PURE__*/ mergeDefaults({
+		theme: {},
 		modelValue: {},
 		componentGroupList: {},
 		datasourceList: {},
@@ -141,6 +143,12 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		*/
 		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) => {
 			emit("props-panel-mounted", e);
 		};
@@ -162,7 +170,8 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 				"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"])])]),
@@ -243,7 +252,8 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 				"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

@@ -17,10 +17,10 @@ var _hoisted_1 = { style: {
 var _hoisted_2 = { style: { "flex": "1" } };
 var _hoisted_3 = { style: { "flex": "1" } };
 var _hoisted_4 = { class: "dialog-footer" };
-var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorCodeBlockEditor",
 	__name: "CodeBlockEditor",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		content: {},
 		disabled: { type: Boolean },
 		isDataSource: { type: Boolean },
@@ -34,7 +34,7 @@ var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		},
 		"visibleModifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels([
+	emits: /*@__PURE__*/ mergeModels([
 		"submit",
 		"close",
 		"open"

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

@@ -2,7 +2,7 @@ import { error } from "../utils/logger.js";
 import { MForm } from "@tmagic/form";
 import { computed, createBlock, defineComponent, openBlock, unref, useTemplateRef } from "vue";
 //#region packages/editor/src/components/CodeParams.vue?vue&type=script&setup=true&lang.ts
-var CodeParams_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CodeParams_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorCodeParams",
 	__name: "CodeParams",
 	props: {

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

@@ -2,10 +2,10 @@ import { useServices } from "../hooks/use-services.js";
 import { getCodeBlockFormConfig } from "../utils/code-block.js";
 import { MForm } from "@tmagic/form";
 import { HookType } from "@tmagic/core";
-import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, inject, normalizeStyle, openBlock, ref, unref, useTemplateRef, watch, watchEffect } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, inject, normalizeStyle, openBlock, provide, ref, unref, useTemplateRef, watch, watchEffect } 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({
+var CompareForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorCompareForm",
 	__name: "CompareForm",
 	props: {
@@ -17,12 +17,13 @@ var CompareForm_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		labelWidth: { default: "120px" },
 		height: {},
 		extendState: {},
-		loadConfig: {}
+		loadConfig: {},
+		services: { default: () => useServices() }
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
-		const { propsService, dataSourceService, codeBlockService, editorService } = useServices();
-		const services = useServices();
+		const { propsService, dataSourceService, codeBlockService, editorService } = props.services;
+		provide("services", props.services);
 		const config = ref([]);
 		/** vs-code 编辑器的 monaco 配置项，沿用 Editor 顶层 provide('codeOptions', ...) 的注入。 */
 		const codeOptions = inject("codeOptions", {});
@@ -102,7 +103,10 @@ var CompareForm_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				case "node":
 					if (!props.type) return [];
 					return removeStyleDisplayConfig(await propsService.getPropsConfig(props.type, { node: props.value }));
-				case "data-source": return dataSourceService.getFormConfig(props.type || "base");
+				case "data-source": return dataSourceService.getFormConfig(props.type || "base").map((item) => "type" in item && item.type === "tab" ? {
+					...item,
+					active: "fields"
+				} : item);
 				case "code-block": return getCodeBlockFormConfig({
 					paramColConfig: codeBlockService.getParamsColConfig(),
 					isDataSource: () => Boolean(props.dataSourceType),
@@ -147,7 +151,7 @@ var CompareForm_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		watchEffect(() => {
 			if (formRef.value) {
 				formRef.value.formState.stage = stage.value;
-				formRef.value.formState.services = services;
+				formRef.value.formState.services = props.services;
 			}
 		});
 		__expose({

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

@@ -1,8 +1,8 @@
 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({
+var ContentMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorContentMenu",
 	__name: "ContentMenu",
 	props: {
@@ -29,6 +29,13 @@ var ContentMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		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__ */ de
 				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__ */ de
 						"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,7 +1,7 @@
 import { useServices } from "../hooks/use-services.js";
 import Icon_default from "./Icon.js";
-import { TMagicButton, useZIndex } from "@tmagic/design";
-import { Teleport, computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeStyle, onBeforeUnmount, openBlock, provide, ref, renderSlot, toDisplayString, unref, useModel, useTemplateRef, watch, withCtx } from "vue";
+import { TMagicButton, useThemeClass, useZIndex } from "@tmagic/design";
+import { Teleport, computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, 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";
 //#region packages/editor/src/components/FloatingBox.vue?vue&type=script&setup=true&lang.ts
@@ -9,9 +9,9 @@ var _hoisted_1 = {
 	ref: "title",
 	class: "m-editor-float-box-title"
 };
-var FloatingBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var FloatingBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "FloatingBox",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		position: { default: () => ({
 			left: 0,
 			top: 0
@@ -41,6 +41,11 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		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);
@@ -137,7 +142,7 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				to: "body"
 			}, [createElementVNode("div", {
 				ref: "target",
-				class: "m-editor-float-box",
+				class: normalizeClass(["m-editor-float-box", unref(themeClass)]),
 				style: normalizeStyle({
 					...style.value,
 					zIndex: curZIndex.value
@@ -153,7 +158,7 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			})])], 512), createElementVNode("div", {
 				class: "m-editor-float-box-body",
 				style: normalizeStyle({ height: `${bodyHeight.value}px` })
-			}, [renderSlot(_ctx.$slots, "body")], 4)], 36)])) : createCommentVNode("v-if", true);
+			}, [renderSlot(_ctx.$slots, "body")], 4)], 38)])) : createCommentVNode("v-if", true);
 		};
 	}
 });

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

@@ -3,7 +3,7 @@ import { createBlock, createElementBlock, createElementVNode, createVNode, defin
 import { Edit } from "@element-plus/icons-vue";
 //#region packages/editor/src/components/Icon.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["src"];
-var Icon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Icon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorIcon",
 	__name: "Icon",
 	props: { icon: {} },

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

@@ -1,7 +1,7 @@
 import { useGetSo } from "../hooks/use-getso.js";
 import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref, useTemplateRef } from "vue";
 //#region packages/editor/src/components/Resizer.vue?vue&type=script&setup=true&lang.ts
-var Resizer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Resizer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorResizer",
 	__name: "Resizer",
 	emits: ["change"],

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

@@ -1,7 +1,7 @@
 import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, useTemplateRef } from "vue";
 import Gesto from "gesto";
 //#region packages/editor/src/components/ScrollBar.vue?vue&type=script&setup=true&lang.ts
-var ScrollBar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScrollBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorScrollBar",
 	__name: "ScrollBar",
 	props: {

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

@@ -7,7 +7,7 @@ var _hoisted_1 = {
 	class: "m-editor-scroll-viewer-container",
 	ref: "container"
 };
-var ScrollViewer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScrollViewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorScrollViewer",
 	__name: "ScrollViewer",
 	props: {

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

@@ -2,7 +2,7 @@ import { TMagicIcon, TMagicInput } from "@tmagic/design";
 import { createBlock, createVNode, defineComponent, openBlock, ref, unref, withCtx } from "vue";
 import { Search } from "@element-plus/icons-vue";
 //#region packages/editor/src/components/SearchInput.vue?vue&type=script&setup=true&lang.ts
-var SearchInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var SearchInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorSearchInput",
 	__name: "SearchInput",
 	emits: ["search"],

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

@@ -1,7 +1,7 @@
 import Resizer_default from "./Resizer.js";
 import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, useTemplateRef, watchEffect } from "vue";
 //#region packages/editor/src/components/SplitView.vue?vue&type=script&setup=true&lang.ts
-var SplitView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var SplitView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorSplitView",
 	__name: "SplitView",
 	props: {

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

@@ -9,7 +9,7 @@ var _hoisted_1 = {
 	class: "menu-item-text"
 };
 var _hoisted_2 = { class: "el-dropdown-link menubar-menu-button" };
-var ToolButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ToolButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorToolButton",
 	__name: "ToolButton",
 	props: {

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

@@ -5,7 +5,7 @@ var _hoisted_1 = {
 	key: 1,
 	class: "m-editor-tree-empty"
 };
-var Tree_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Tree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorTree",
 	__name: "Tree",
 	props: {

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

@@ -16,7 +16,7 @@ var _hoisted_4 = {
 	key: 0,
 	class: "m-editor-tree-node-children"
 };
-var TreeNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var TreeNode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorTreeNode",
 	__name: "TreeNode",
 	props: {

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

@@ -1,7 +1,7 @@
 import CodeEditor_default from "../layouts/CodeEditor.js";
 import { computed, createBlock, defineComponent, openBlock } 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({
+var Code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsVsCode",
 	__name: "Code",
 	props: {
@@ -17,7 +17,10 @@ var Code_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		},
 		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

@@ -2,7 +2,7 @@ import { getEditorConfig } from "../utils/config.js";
 import { serializeConfig } from "../utils/editor.js";
 import { computed, createBlock, defineComponent, openBlock, reactive, resolveComponent, watch } from "vue";
 //#region packages/editor/src/fields/CodeLink.vue?vue&type=script&setup=true&lang.ts
-var CodeLink_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CodeLink_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsCodeLink",
 	__name: "CodeLink",
 	props: {
@@ -15,7 +15,10 @@ var CodeLink_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 }) {

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

@@ -1,11 +1,12 @@
 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({
+var CodeSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsCodeSelect",
 	__name: "CodeSelect",
 	props: {
@@ -18,7 +19,10 @@ var CodeSelect_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 }) {
@@ -39,11 +43,21 @@ var CodeSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		* 仅当存在历史值时才启用对比，避免 lastValues 缺失时退化为「全部新增」的空对比。
 		*/
 		const isCompareMode = computed(() => Boolean(props.isCompare && props.lastValues));
+		const newHandler = () => {
+			const defaultCode = {
+				codeType: HookCodeType.CODE,
+				codeId: ""
+			};
+			const name = props.config.name || "";
+			emit("change", defaultCode, { modifyKey: `hookData.${(props.model[name]?.hookData || []).length}` });
+		};
 		const codeConfig = computed(() => ({
 			type: "group-list",
 			name: "hookData",
 			enableToggleMode: false,
 			expandAll: true,
+			flat: true,
+			addable: () => false,
 			title: (mForm, { model, index }) => {
 				if (model.codeType === HookCodeType.DATA_SOURCE_METHOD) {
 					if (Array.isArray(model.codeId)) {
@@ -56,45 +70,42 @@ var CodeSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				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: "数据源方法"
-						}],
-						defaultValue: "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()
-					},
-					{
-						type: "data-source-method-select",
-						name: "codeId",
-						span: 18,
-						labelWidth: 0,
-						display: (_mForm, { model }) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
-						notEditable: () => !dataSourceService.get("editable")
+			titlePrefix: props.config.name === void 0 ? void 0 : String(props.config.name),
+			items: [
+				{
+					text: "代码类型",
+					type: "select",
+					name: "codeType",
+					labelPosition: "right",
+					options: [{
+						value: HookCodeType.CODE,
+						text: "代码块"
+					}, {
+						value: HookCodeType.DATA_SOURCE_METHOD,
+						text: "数据源方法"
+					}],
+					defaultValue: "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: "代码块",
+					display: (_mForm, { model }) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
+					notEditable: () => !codeBlockService.getEditStatus()
+				},
+				{
+					type: "data-source-method-select",
+					name: "codeId",
+					text: "数据源字段",
+					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] = {
@@ -104,10 +115,11 @@ var CodeSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		}, { 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,
@@ -122,9 +134,22 @@ var CodeSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					"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

@@ -10,7 +10,7 @@ import { Edit, View } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/CodeSelectCol.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-fields-code-select-col" };
 var _hoisted_2 = { class: "code-select-container" };
-var CodeSelectCol_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CodeSelectCol_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsCodeSelectCol",
 	__name: "CodeSelectCol",
 	props: {
@@ -26,7 +26,10 @@ var CodeSelectCol_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		},
 		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__ */
 			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

@@ -4,7 +4,7 @@ import { getFieldType } from "../utils/data-source/index.js";
 import { TMagicSelect, getDesignConfig } from "@tmagic/design";
 import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, openBlock, renderList, resolveDynamicComponent, unref, withCtx } from "vue";
 //#region packages/editor/src/fields/CondOpSelect.vue?vue&type=script&setup=true&lang.ts
-var CondOpSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CondOpSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsCondOpSelect",
 	__name: "CondOpSelect",
 	props: {
@@ -17,7 +17,10 @@ var CondOpSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		disabled: { type: Boolean },
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {

package/dist/es/fields/DataSourceFieldSelect/FieldSelect.vue_vue_type_script_setup_true_lang.js

@@ -9,9 +9,9 @@ import { Fragment, computed, createBlock, createCommentVNode, createElementBlock
 import { Edit, View } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-editor-data-source-field-select" };
-var FieldSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var FieldSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "FieldSelect",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		value: {},
 		disabled: { type: Boolean },
 		checkStrictly: { type: Boolean },
@@ -23,7 +23,7 @@ var FieldSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		"modelValue": { default: [] },
 		"modelModifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels(["change"], ["update:modelValue"]),
+	emits: /*@__PURE__*/ mergeModels(["change"], ["update:modelValue"]),
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;