chore: update lockfile v1.8.0-beta.27

页面渲染完成后由 runtime 触发 mounted 事件，统一管理数据源 mounted 及 timing=mounted 的方法执行；支持异步注册数据源在 init 后补充 mounted。

.github/workflows/pages.yml

@@ -17,12 +17,14 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
+        with:
+          version: 11.21.0
 
       - name: Set node version to 22
         uses: actions/setup-node@v4
         with:
           node-version: 22
-          cache: 'pnpm'
+          cache: "pnpm"
 
       - run: pnpm bootstrap
 

.husky/pre-push

@@ -1 +1 @@
-npm run test
+npm run coverage

AGENTS.md

@@ -7,7 +7,11 @@
 
 TMagic Editor 是魔方平台的可视化编辑器核心库，提供拖拽式组件编辑、配置面板、预览发布等能力。支持 Vue 和 React 双框架 Runtime，采用 pnpm monorepo 管理多个核心包。开源项目，同时支持内部业务定制。
 
-**技术栈：** Vue 3, Element Plus, TypeScript, Vite, vitest, VitePress
+编辑器本体使用 Vue 3；UI 通过 `@tmagic/design` + adapter 接入 Element Plus 或 TDesign Vue Next。
+
+**技术栈：** Vue 3, TypeScript, Vite, rolldown, vitest, VitePress, Element Plus / TDesign Vue Next
+**环境：** Node.js `^20.19.0 || >=22.12.0`，pnpm `11.21.0`
+**当前版本：** `1.8.0-beta.25`
 **主仓库：** `https://git.woa.com/vft-magic/tmagic-editor.git`
 **开源仓库：** `https://github.com/Tencent/tmagic-editor.git`
 
@@ -15,10 +19,10 @@ TMagic Editor 是魔方平台的可视化编辑器核心库，提供拖拽式组
 
 关键目录：
 
-- `packages/` — 核心编辑器包
-- `runtime/` — Vue/React Runtime 实现
-- `vue-components/` — Vue 组件封装
-- `react-components/` — React 组件封装
+- `packages/` — 核心 npm 包（`editor`、`form`、`stage`、`core`、`cli`、`data-source`、`schema`、`form-schema`、`design`、`utils`、`dep`、`table`、`element-plus-adapter`、`tdesign-vue-next-adapter`）
+- `runtime/` — Vue/React Runtime，以及 `vue-runtime-help`、`react-runtime-help`、`tmagic-form`
+- `vue-components/` — Vue 业务组件封装
+- `react-components/` — React 业务组件封装
 - `playground/` — 演示 playground
 - `docs/` — VitePress 文档
 - `scripts/` — 构建和发布脚本
@@ -26,9 +30,12 @@ TMagic Editor 是魔方平台的可视化编辑器核心库，提供拖拽式组
 
 ## 开发约定
 
-**分支策略：** dev=dev, test/prod=master
-**提交规范：** commitlint + husky，`type: 描述`
-**测试覆盖率：** 新增或修改的代码必须补充单元测试，覆盖率不低于 85%
+**分支策略（内部约定）：** 日常开发走 `dev`；test/prod 对应 `master`。开源文档站与 playground 从 `dev` 发布。
+**提交规范：** commitlint（`@commitlint/config-conventional`）+ husky，格式 `type(scope): subject`，详见 `CONTRIBUTING.md`
+**测试：** 新增或修改的代码必须补充单元测试，覆盖率不低于 85%（lines）。`pnpm coverage` 执行两层硬门禁：
+1. 全仓 lines ≥ 85%（vitest `coverage.thresholds`）
+2. 工作区相对 HEAD 的 `packages/*/src` 变更逐文件 lines ≥ 85%（不含 design / UI adapter；未测新文件按 0% 计）
+pre-commit 跑 lint-staged 与 `pnpm check:type`，pre-push 跑 `pnpm coverage`。
 
 **禁止事项：**
 
@@ -43,14 +50,12 @@ TMagic Editor 是魔方平台的可视化编辑器核心库，提供拖拽式组
     pnpm pg:react         # 启动 React playground
     pnpm build            # 完整构建（DTS + 包）
     pnpm test             # 运行测试
+    pnpm coverage         # 运行测试、生成覆盖率，并执行 85% 门禁
+    pnpm check:type       # TypeScript 类型检查
     pnpm lint-fix         # ESLint 修复
     pnpm docs:dev         # 启动文档开发
     pnpm release          # 发版
 
-## 当前状态
-
-**当前里程碑：** {待人工填写}
-
 ## 深入阅读
 
 | 文档            | 说明             |

CHANGELOG.md

@@ -1,3 +1,153 @@
+# [1.8.0-beta.27](https://github.com/Tencent/tmagic-editor/compare/v1.8.0-beta.26...v1.8.0-beta.27) (2026-09-04)
+
+
+### Bug Fixes
+
+* **editor,form:** 合并宿主 FORM_CONTEXT 并修复 formState mForm 自引用 ([b0d43dc](https://github.com/Tencent/tmagic-editor/commit/b0d43dc2775a2241499de9ab1b165a5ad3febcf3))
+* **editor:** 修复 eventsService resetState 响应式失效并在编辑器重置时清空 ([959c032](https://github.com/Tencent/tmagic-editor/commit/959c0322b6885ee00c38bc830f58841ccbb42a40))
+* **form:** 避免 Select init 请求失败或路径缺失时抛出未处理异常 ([d1cb8c3](https://github.com/Tencent/tmagic-editor/commit/d1cb8c3853ac724b424dbe8de2d2a63bf6302324))
+
+
+### Features
+
+* **data-source:** 新增数据源 mounted 生命周期 ([092bc29](https://github.com/Tencent/tmagic-editor/commit/092bc2914d444c9527140a204ab8bc2776d31a1b))
+# [1.8.0-beta.26](https://github.com/Tencent/tmagic-editor/compare/v1.8.0-beta.25...v1.8.0-beta.26) (2026-09-01)
+
+
+### Bug Fixes
+
+* **editor:** inject eventBus 时提供 null 默认值 ([58f2a94](https://github.com/Tencent/tmagic-editor/commit/58f2a943b866a836817b12b93194eb0e13f82d16))
+* **editor:** 避免 defaultSelected 早于 root 就绪时 select 抛出未处理错误 ([08b610a](https://github.com/Tencent/tmagic-editor/commit/08b610a4f2de9c6c433ec792fc46039e6f57e7b0))
+* **form:** 避免 Tooltip 无合法触发器时报 ElOnlyChild ([90e4bec](https://github.com/Tencent/tmagic-editor/commit/90e4bec70b25194446b6b7c8453ac7c9dc32bff3))
+
+
+### Features
+
+* **editor:** 统一列表字段添加按钮样式并支持新增后自动滚动 ([02eeb2e](https://github.com/Tencent/tmagic-editor/commit/02eeb2e87f78f59d18baaf471704d3f574c5556c))
+* **form:** 容器透传 labelPosition ([c34ed6a](https://github.com/Tencent/tmagic-editor/commit/c34ed6aafc0542ea12ba7d32e0130eb227da1f81))
+* **form:** 新增无渲染校验入口，支持 Node/CI 环境执行表单校验 ([93dc0d2](https://github.com/Tencent/tmagic-editor/commit/93dc0d2187046d5d5da9409cc67e21afd01a0abe))
+* **form:** 用 FormContext 与 provide/inject 替代 extendState 钩子 ([a7999f5](https://github.com/Tencent/tmagic-editor/commit/a7999f50d542e3c369db4a1f6f42339ec0056e04))
+* **form:** 统一字段值 effect 机制并将 nested 重命名为 innerConfig ([f2ee7ae](https://github.com/Tencent/tmagic-editor/commit/f2ee7ae7b522d0fe78f354de531d6cbd6116ab4b))
+# [1.8.0-beta.25](https://github.com/Tencent/tmagic-editor/compare/v1.8.0-beta.24...v1.8.0-beta.25) (2026-08-13)
+
+
+### Bug Fixes
+
+* **editor:** 统一数据源字段路径解析并优化 typeMatch 校验 ([05fbdb1](https://github.com/Tencent/tmagic-editor/commit/05fbdb17b53e688f562202a32cdb748afae65347))
+# [1.8.0-beta.24](https://github.com/Tencent/tmagic-editor/compare/v1.8.0-beta.23...v1.8.0-beta.24) (2026-08-10)
+
+
+### Bug Fixes
+
+* **editor:** 修复连续 add 与批量插入时节点顺序错乱 ([a7198e2](https://github.com/Tencent/tmagic-editor/commit/a7198e273123484822987c4d1838b2cc4689fb86))
+* **editor:** 移除 removeStyleDisplayConfig 并取消属性 tab 懒加载 ([8550e6f](https://github.com/Tencent/tmagic-editor/commit/8550e6f854e1d0d0267b7064836f845aa2b004f9))
+* **editor:** 节点未注册时回退使用 formValue 加载事件与动作选项 ([53c4763](https://github.com/Tencent/tmagic-editor/commit/53c4763a596abfb355061db651dc56843e75cacc))
+
+
+### Features
+
+* **form,editor:** 静默校验模式下跳过叶子字段渲染以提升性能 ([44cd3d4](https://github.com/Tencent/tmagic-editor/commit/44cd3d480f5f3b76bb6ba6d2bc4b2632f6a5e957))
+# [1.8.0-beta.23](https://github.com/Tencent/tmagic-editor/compare/v1.8.0-beta.22...v1.8.0-beta.23) (2026-08-06)
+
+
+### Bug Fixes
+
+* **editor:** abort 时保留常驻依赖收集 worker，避免反复重建 ([efb637e](https://github.com/Tencent/tmagic-editor/commit/efb637e72e19c4c1ce5eb07a4c6dd9e6828778d1))
+* **form:** 优化可选项校验建议文案并导出供 editor 复用 ([0d1a17d](https://github.com/Tencent/tmagic-editor/commit/0d1a17dce3b8b912238f822ad7d67c1992af53f4))
+* **stage:** 修复切换页面后 mask 滚动重置与 scrollIntoView 失效 ([cf007f9](https://github.com/Tencent/tmagic-editor/commit/cf007f9082043589ce94fb3dd1c11dbf96ca0e1d))
+# [1.8.0-beta.22](https://github.com/Tencent/tmagic-editor/compare/v1.8.0-beta.21...v1.8.0-beta.22) (2026-08-04)
+
+
+### Bug Fixes
+
+* **editor:** 优化组件列表与图层面板搜索过滤 ([7777c20](https://github.com/Tencent/tmagic-editor/commit/7777c205b95429c80f7762510d46c6d98b5f73c5))
+* **editor:** 修复 StyleSetter Box/Position 输入框无法正确显示 model 值 ([af157fc](https://github.com/Tencent/tmagic-editor/commit/af157fcda96da817d1507cb93a564709b6d010b9))
+* **stage:** 修复切换页面后 StageMask 尺寸与滚动偏移异常 ([a9cda71](https://github.com/Tencent/tmagic-editor/commit/a9cda719bc85161039405dd3219139347638268e))
+
+
+### Features
+
+* **editor:** 完善样式设置器字段 typeMatch 校验 ([d5a2e25](https://github.com/Tencent/tmagic-editor/commit/d5a2e25e18a7eba980839224bf65ed8481901637))
+* **editor:** 支持 update replace 整节点替换，源码编辑走 replace 模式 ([6f0a41f](https://github.com/Tencent/tmagic-editor/commit/6f0a41f2db8add132943cf7b3e4d796f99106e6f))
+# [1.8.0-beta.21](https://github.com/Tencent/tmagic-editor/compare/v1.8.0-beta.20...v1.8.0-beta.21) (2026-08-04)
+
+
+### Bug Fixes
+
+* **editor:** 修复 IdleTask 在 requestIdleCallback timeout 时队列空转的问题 ([b544f05](https://github.com/Tencent/tmagic-editor/commit/b544f059173ff7807a421a98d4247d334bce5fbc))
+
+
+### Features
+
+* **editor:** getEvent/getMethod 支持节点上下文参数 ([d2a02e1](https://github.com/Tencent/tmagic-editor/commit/d2a02e16d26a4424681ac02592da1de850ebb78d))
+# [1.8.0-beta.20](https://github.com/Tencent/tmagic-editor/compare/v1.8.0-beta.19...v1.8.0-beta.20) (2026-07-30)
+
+
+### Bug Fixes
+
+* **editor:** 修复删除页面/页面片时画布被误清空的问题 ([aa42144](https://github.com/Tencent/tmagic-editor/commit/aa4214473858200c62b6efab79c0671e06cc3917))
+
+
+### Features
+
+* **editor,dep:** collectIdle 使用常驻 Web Worker 做依赖收集 ([4bbda35](https://github.com/Tencent/tmagic-editor/commit/4bbda354a987b0a409a01184e8511822a0384a13))
+# [1.8.0-beta.19](https://github.com/Tencent/tmagic-editor/compare/v1.8.0-beta.18...v1.8.0-beta.19) (2026-07-28)
+
+
+### Features
+
+* **form:** 新增 validateOnInit，默认关闭初始化时自动校验 ([b7c04ed](https://github.com/Tencent/tmagic-editor/commit/b7c04edcd518554d5117c2212bbfe8ef632a4b37))
+# [1.8.0-beta.18](https://github.com/Tencent/tmagic-editor/compare/v1.8.0-beta.17...v1.8.0-beta.18) (2026-07-28)
+
+
+### Bug Fixes
+
+* **editor:** 修复 IdleTask 任务异常或 clearTasks 时队列卡住的问题 ([3fe9cf9](https://github.com/Tencent/tmagic-editor/commit/3fe9cf9b664dc5b39c17b40efe1d3935c89f7553))
+
+
+### Features
+
+* **form:** 支持 typeMatch 异步校验与 validator 返回值约定 ([a123747](https://github.com/Tencent/tmagic-editor/commit/a123747e9d250166c2bb0f1d3ce3a39dd5baea9f))
+# [1.8.0-beta.17](https://github.com/Tencent/tmagic-editor/compare/v1.8.0-beta.16...v1.8.0-beta.17) (2026-07-27)
+
+
+### Bug Fixes
+
+* **editor:** 修复 collectIdle 批次结算与中断时 Promise 挂起问题 ([b5abf31](https://github.com/Tencent/tmagic-editor/commit/b5abf310663f0bc34bd2c51c2e1a28de0bdf6ab9))
+* **editor:** 切换动作类型时清空关联配置字段 ([b564c9e](https://github.com/Tencent/tmagic-editor/commit/b564c9e4aacd215dd46c4b839cf0033ceedc8047))
+* **form,table:** groupList分界线、空状态、actions只存在一个  ([dec4ebf](https://github.com/Tencent/tmagic-editor/commit/dec4ebfa20483f699a676e41e0541d23ebe24d81))
+* **form:** 完善 mountFormInstance 清理逻辑，避免临时表单实例泄漏 ([bf8df74](https://github.com/Tencent/tmagic-editor/commit/bf8df74864b78891a8820462062624702a1d33d3))
+* **table:** 列操作点击后关闭popover ([596d86f](https://github.com/Tencent/tmagic-editor/commit/596d86f2ab08d3d4e6548b5e4bd5759d18e4493d))
+
+
+### Features
+
+* **editor,stage:** 新增 containerHighlightAddOnly 配置 ([e6cf694](https://github.com/Tencent/tmagic-editor/commit/e6cf694a032652e4f2c05efbab4a07a252e2ffa1))
+# [1.8.0-beta.16](https://github.com/Tencent/tmagic-editor/compare/v1.8.0-beta.15...v1.8.0-beta.16) (2026-07-23)
+
+
+### Features
+
+* 参考建议可选值最多展示个数由 5 调整为 20 ([0e1986c](https://github.com/Tencent/tmagic-editor/commit/0e1986c81998e50461c294c1a27a8139e8ae9a13))
+# [1.8.0-beta.15](https://github.com/Tencent/tmagic-editor/compare/v1.8.0-beta.14...v1.8.0-beta.15) (2026-07-23)
+
+
+### Bug Fixes
+
+* **core:** 为背景图片 URL 添加引号 ([97e0cac](https://github.com/Tencent/tmagic-editor/commit/97e0cac44a2d6ceafaf95fbc4ae716bfe5d47f70))
+* **editor:** 使用属性面板中的源码删除样式无效 ([cde0805](https://github.com/Tencent/tmagic-editor/commit/cde08052924ddef1c51faeb68ce15d3195827adb))
+* **editor:** 右键菜单动态变化后修复菜单位置防止截断 ([6919a0a](https://github.com/Tencent/tmagic-editor/commit/6919a0a0b19efff92821fc8d52b61b2f7382a817))
+* 跳过无字段名称配置的类型校验 ([11bf037](https://github.com/Tencent/tmagic-editor/commit/11bf037054774937132743a40006364e49ee8fd5))
+
+
+### Features
+
+* **design:** 优化 FormItem 和 colorPicker 样式 ([2e031cc](https://github.com/Tencent/tmagic-editor/commit/2e031cc1346fb6ea739f0d45a89213b6577dc7ee))
+* **editor:** 数据源字段选择器校验提示细化并支持 fieldConfig 类型校验 ([fe9e754](https://github.com/Tencent/tmagic-editor/commit/fe9e754b50f14e6034170b2284553ec1c4536150))
+* **form,design:** 一行多个表单默认右靠齐label  ([48abab7](https://github.com/Tencent/tmagic-editor/commit/48abab7051b93b7ed336172c21ab3b908733f2e7))
+* **form,editor:** submitForm/validateForm 静默挂载时注入静默标记，vs-code 字段跳过 monaco 渲染 ([3b9d5da](https://github.com/Tencent/tmagic-editor/commit/3b9d5da0bc9f323e944c0e2adb4fc88642ce1915))
+* **form:** text 类型校验允许数字值，兼容数据源字段配置 ([1f389ff](https://github.com/Tencent/tmagic-editor/commit/1f389ff9fd77fb93ad749f3fdbbc8aa0fe8725ac))
+* 新增 page-structure-change 事件，支持页面增删统一通知 ([745f449](https://github.com/Tencent/tmagic-editor/commit/745f44939605528e8e2ccd0639478db98293a441))
 # [1.8.0-beta.14](https://github.com/Tencent/tmagic-editor/compare/v1.8.0-beta.13...v1.8.0-beta.14) (2026-07-23)
 
 

README.md

@@ -18,7 +18,7 @@ https://tencent.github.io/tmagic-editor/playground/index.html
 
 node.js ^20.19.0 || >=22.12.0
 
-pnpm >= 10
+pnpm 11.20.0
 
 先安装 pnpm
 

docs/.vitepress/config.ts

@@ -588,10 +588,13 @@ export default defineConfig({
     },
     resolve: {
       alias:[
+        { find: /^@form/, replacement: path.join(__dirname, '../../packages/form/src/') },
         { find: /^@tmagic\/form-schema/, replacement: path.join(__dirname, '../../packages/form-schema/src/index.ts') },
+        { find: /^@tmagic\/form\/headless$/, replacement: path.join(__dirname, '../../packages/form/src/headless.ts') },
         { find: /^@tmagic\/form/, replacement: path.join(__dirname, '../../packages/form/src/index.ts') },
         { find: /^@tmagic\/utils/, replacement: path.join(__dirname, '../../packages/utils/src/index.ts') },
         { find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../../packages/schema/src/index.ts') },
+        { find: /^@tmagic\/design\/headless$/, replacement: path.join(__dirname, '../../packages/design/src/headless.ts') },
         { find: /^@tmagic\/design/, replacement: path.join(__dirname, '../../packages/design/src/index.ts') },
         { find: /^@tmagic\/element-plus-adapter/, replacement: path.join(__dirname, '../../packages/element-plus-adapter/src/index.ts') },
       ]

docs/api/editor/editorServiceMethods.md

@@ -480,6 +480,8 @@ editorService.highlight("text_123");
   - {`MNode`} config 新的节点
   - `{Object}` data 可选配置
     - {`ChangeRecord`[]} changeRecords 变更记录
+    - `{boolean}` replace 是否整节点替换（默认 false）。为 `true` 时跳过 `mergeWith` / `toggleFixedPosition` / `setChildrenLayout`，直接用传入配置覆盖现有节点
+    - `{HistoryOpSource}` historySource 见[历史记录相关 options](#历史记录相关-options)
 
 - **返回：**
   - `{Promise<{ newNode: MNode; oldNode: MNode; changeRecords?: ChangeRecord[] }>}` 更新前后的节点信息
@@ -498,6 +500,8 @@ editorService.highlight("text_123");
   当被更新节点正好在当前选中列表中时，state 会自动同步到新的节点引用，无需调用方处理
 
   当被更新节点正好是当前页面时，state.page 也会同步到新的节点引用；更新非当前页面（不同 ID）时不会把编辑器切到该页
+
+  默认会将传入配置与现有节点深合并（保留未传入的字段）。若需要完整 DSL 覆盖（如源码编辑写回），传入 `replace: true`。
   :::
 
 ## update
@@ -512,6 +516,7 @@ editorService.highlight("text_123");
     - `{boolean}` doNotPushHistory 是否不写入历史记录（默认 false）
     - `{string}` historyDescription 见[历史记录相关 options](#历史记录相关-options)
     - `{HistoryOpSource}` historySource 见[历史记录相关 options](#历史记录相关-options)
+    - `{boolean}` replace 是否整节点替换（默认 false）。为 `true` 时跳过 `mergeWith` / `toggleFixedPosition` / `setChildrenLayout`，直接用传入配置覆盖现有节点；适用于源码编辑、完整 DSL 回写等场景
     - `{Object}` invalidInfo 启用 [enablePropsFormValidate](./props.md#enablepropsformvalidate) 时，属性面板提交携带的校验错误信息，在写入历史记录之前落库，使历史快照与本次变更对齐
       - `{Id}` id 节点 id
       - `{'props' | 'style'}` source 错误来源：属性表单 / 样式表单
@@ -546,6 +551,12 @@ editorService.highlight("text_123");
   才退化为整节点替换（如内部 `sort` / `moveLayer` / 拖动等纯快照场景）。
   :::
 
+  :::tip
+  **`replace: true` 整节点替换：** 默认 `update` 会将传入配置与现有节点深合并，未传入的字段会保留。
+  传入 `replace: true` 后跳过合并与布局相关变换，直接用传入配置覆盖，传入对象中不存在的字段会被删除。
+  属性面板局部改动请保持默认；源码编辑 / 完整 DSL 回写等场景使用 `replace: true`。
+  :::
+
 ## sort
 
 - **[扩展支持](../../guide/editor-expand#行为扩展)：** 是

docs/api/editor/eventsServiceMethods.md

@@ -16,7 +16,11 @@
 
 - **详情：**
 
-  批量设置多个组件类型的事件列表
+  批量设置多个组件类型的事件列表。增量合并语义：只写入入参中出现的类型，已有的其他类型保持不变。
+
+  ::: tip 切换 runtime 版本
+  不同版本的 runtime 事件表不同，直接调用 `setEvents` 会让上一个版本独有的类型残留。是否需要清掉上一个版本的数据由业务自行决定，需要清掉时先调用 [`resetState`](#resetstate) 再写入新表。
+  :::
 
 - **示例：**
 
@@ -47,7 +51,7 @@ eventsService.setEvents({
 
 - **详情：**
 
-  设置指定组件类型的事件列表
+  设置指定组件类型的事件列表，只影响该类型
 
 - **示例：**
 
@@ -65,6 +69,7 @@ eventsService.setEvent('button', [
 - **参数：**
 
   - `{string}` type 组件类型
+  - `{ node?: MNode | null }` data 可选上下文，便于插件按节点定制事件列表（默认 `{}`）
 
 - **返回：**
 
@@ -72,15 +77,25 @@ eventsService.setEvent('button', [
 
 - **详情：**
 
-  获取指定组件类型的事件列表
+  获取指定组件类型的事件列表。默认实现仅按 `type` 返回注册事件；可通过 `usePlugin` 的 `beforeGetEvent` / `afterGetEvent` 读取 `data.node` 做节点级过滤或扩展。
 
 - **示例：**
 
 ```js
 import { eventsService } from '@tmagic/editor';
 
-const events = eventsService.getEvent('button');
+const events = eventsService.getEvent('button', { node });
 console.log(events); // [{ label: '点击', value: 'click' }, ...]
+
+// 插件按节点定制
+eventsService.usePlugin({
+  afterGetEvent(events, type, data) {
+    if (data?.node?.id === 'btn_1') {
+      return events.filter((item) => item.value !== 'longpress');
+    }
+    return events;
+  },
+});
 ```
 
 ## setMethods
@@ -95,7 +110,7 @@ console.log(events); // [{ label: '点击', value: 'click' }, ...]
 
 - **详情：**
 
-  批量设置多个组件类型的方法列表
+  批量设置多个组件类型的方法列表。语义与 `setEvents` 一致：增量合并，入参中不存在的类型保持不变。
 
 - **示例：**
 
@@ -127,7 +142,7 @@ eventsService.setMethods({
 
 - **详情：**
 
-  设置指定组件类型的方法列表
+  设置指定组件类型的方法列表，只影响该类型
 
 - **示例：**
 
@@ -146,7 +161,9 @@ eventsService.setMethod('video', [
 - **参数：**
 
   - `{string}` type 组件类型
-  - `{string | number}` _targetId 目标节点id（保留参数，便于扩展时按节点定制）
+  - `{ node?: MNode | null; targetId?: Id }` data 可选上下文（默认 `{}`）
+    - `targetId`：目标节点 id
+    - `node`：目标节点配置，便于插件按节点定制方法列表
 
 - **返回：**
 
@@ -154,15 +171,36 @@ eventsService.setMethod('video', [
 
 - **详情：**
 
-  获取指定组件类型的方法列表
+  获取指定组件类型的方法列表。默认实现仅按 `type` 返回注册方法；可通过 `usePlugin` 的 `beforeGetMethod` / `afterGetMethod` 读取 `data` 做节点级过滤或扩展。
+
+  ::: warning 破坏性变更
+  第二参数已从 `targetId: Id` 调整为对象 `{ node?, targetId? }`。请同步更新调用方与插件钩子入参，例如：
+
+  ```js
+  // 旧
+  eventsService.getMethod('video', 'video_123');
+  // 新
+  eventsService.getMethod('video', { targetId: 'video_123', node });
+  ```
+  :::
 
 - **示例：**
 
 ```js
 import { eventsService } from '@tmagic/editor';
 
-const methods = eventsService.getMethod('video', 'video_123');
+const methods = eventsService.getMethod('video', { targetId: 'video_123', node });
 console.log(methods); // [{ label: '播放', value: 'play' }, ...]
+
+// 插件按节点定制
+eventsService.usePlugin({
+  afterGetMethod(methods, type, data) {
+    if (data?.targetId === 'video_123') {
+      return methods.filter((item) => item.value !== 'stop');
+    }
+    return methods;
+  },
+});
 ```
 
 ## resetState
@@ -175,14 +213,17 @@ console.log(methods); // [{ label: '播放', value: 'play' }, ...]
 
 - **详情：**
 
-  重置事件服务状态，清空所有事件和方法配置
+  重置事件服务状态，清空所有事件和方法配置。`setEvents` / `setMethods` 是增量合并，切换 runtime 版本这类需要丢弃上一份事件表的场景，由业务在写入新表前自行调用本方法。
 
 - **示例：**
 
 ```js
 import { eventsService } from '@tmagic/editor';
 
+// 切到另一个版本的 runtime：先清空，再写入该版本的事件表
 eventsService.resetState();
+eventsService.setEvents(nextVersionEvents);
+eventsService.setMethods(nextVersionMethods);
 ```
 
 ## destroy

docs/api/editor/props.md

@@ -630,6 +630,10 @@ const propsValues = {
   该属性最终会设置到[eventsService](./eventsServiceMethods.md)中，所以也可直接调用[eventsService.setEvents()](./eventsServiceMethods.md#setEvents)与[eventsService.setMethods()](./eventsServiceMethods.md#setMethods)方法来配置
   :::
 
+  :::warning
+  该属性每次变更都是增量合并，不会清掉上一次写入的类型。切换 runtime 版本时若需要丢弃旧版本的事件表，请自行调用 [eventsService.resetState()](./eventsServiceMethods.md#resetstate)
+  :::
+
 - **默认值：** `{}`
 
 - **类型：** `Record<string, { events: EventOption[]; methods: EventOption[] }>`
@@ -1019,6 +1023,18 @@ alt: 按住alt键启动识别
 
 
 - **类型：** `'default' | 'alt' | ''`
+
+## containerHighlightAddOnly
+
+- **详情：**
+
+是否只有新增组件（从组件列表拖入新组件）时才启用识别容器
+
+开启后，在画布中拖动已有组件时不再识别容器，即已有组件不能通过拖动加入其他容器；新增组件仍然按 [containerHighlightType](#containerHighlightType) 配置的方式识别
+
+- **默认值：** `false`
+
+- **类型：** `boolean`
   
 ## stageRect
 
@@ -1546,52 +1562,71 @@ const onLayerNodeDblclick = (event, data) => {
 - 返回 `false` 时，会同时阻断默认的"展开/收起"行为以及向上抛出的 [`layer-node-dblclick`](./events.md#layer-node-dblclick) 事件；返回其他值则继续触发默认行为并抛出事件。
 :::
 
-## extendFormState
+## 表单业务上下文
 
 - **详情：**
-  
-  扩展表单状态
 
-  用于在属性表单中注入自定义的状态数据，这些数据可以在表单配置的各个字段为函数时的第一个参数中获取
+  编辑器会把 `services` 与当前 `stage` 通过 `FORM_CONTEXT_KEY` provide 下去，编辑器内所有 `MForm`（属性面板、历史差异对比表单、侧边栏、以及 Link / FormBox 里的嵌套子表单）都自动继承。
 
-- **默认值：** `undefined`
-
-- **类型：** `(state: FormState) => Record<string, any> | Promise<Record<string, any>>`
-
-- **示例：**
+  业务方要往里追加自己的字段，在 `<m-editor>` 外层再 provide 一层即可，同名字段覆盖内置的：
 
 ```html
 <template>
-  <m-editor :extend-form-state="extendFormState"></m-editor>
+  <m-editor></m-editor>
 </template>
 
 <script setup>
-const extendFormState = async (state) => {
-  // 返回自定义的状态数据
-  return {
-    // 可以是同步数据
-    currentUser: {
-      name: 'Admin',
-      role: 'admin',
-    },
-    // 也可以是异步获取的数据
-    projectConfig: await fetchProjectConfig(),
-  };
-};
+import { computed, provide } from 'vue';
+import { FORM_CONTEXT_KEY } from '@tmagic/form';
+
+provide(
+  FORM_CONTEXT_KEY,
+  computed(() => ({
+    currentUser: store.currentUser,
+    env: store.env,
+  })),
+);
 </script>
 ```
 
-:::tip
-扩展的状态可以在表单配置中通过 `state` 访问，例如：
+  补类型用模块增强：
+
+```ts
+declare module '@tmagic/form-schema' {
+  interface FormContext {
+    currentUser?: { name: string; role: string };
+  }
+}
+```
+
+  表单配置里统一从第一个参数 `mForm` 读：formState 是读穿 Proxy，`mForm` 上没有的字段自动落到 context，所以回调签名不变，后端下发的存量配置无需改动。
 
 ```js
 {
   name: 'title',
   text: '标题',
-  // 根据扩展的状态动态设置
-  disabled: (state) => state.currentUser.role !== 'admin',
+  disabled: (mForm) => mForm.currentUser?.role !== 'admin',
+  display: (mForm) => mForm.env === 'prod',
 }
 ```
+
+::: warning 从 extendFormState 迁移
+`extendFormState` prop 已移除，同时移除的还有 `PropsPanel` / `FormPanel` / `HistoryDiffDialog` / `CompareForm` / `ViewForm` 的 `extendState`、`CompareForm` 的 `baseFormState`、`useHistoryRevert` 的 `extendState` 与 `getPropsPanelFormState`。
+
+改法是把「返回数据的函数」换成「数据本身」：
+
+```ts
+// before
+const extendFormState = (state) => ({ env: store.env });
+// <m-editor :extend-form-state="extendFormState" />
+
+// after
+provide(FORM_CONTEXT_KEY, computed(() => ({ env: store.env })));
+```
+
+原先返回 Promise 的写法，改由宿主自己决定挂载时机（`v-if="ready"`），或先 provide 一个空 context、数据到位后更新——后者不保证 `defaultValue` / `onInitValue` 首轮能读到。
+
+配置里的 `mForm.xxx` 读法不受影响，读穿 Proxy 保留。
 :::
 
 ## historyListExtraTabs

docs/api/form/form-props.md

@@ -219,8 +219,25 @@
 
 - **类型：** `boolean`
 
-## extendState
+## context
 
-- **详情：** 扩展 formState 的钩子函数，返回的对象会被合并到 formState 上
+- **详情：** 宿主业务上下文。可用本 prop 直接传，也可由祖先 `provide(FORM_CONTEXT_KEY)` 下发；同名字段本 prop 优先。
+
+  嵌套表单（Link 的子表单、`MFormBox`、`MFormDialog`）会自动继承最近祖先的 context，不需要层层透传。
+
+  配置回调统一通过第一个参数 `mForm` 读取：formState 是一个读穿 Proxy，`mForm` 上找不到的字段会自动落到 context。回调签名因此保持不变，后端 eval 下发的存量配置无需改动。
+
+- **类型：** `FormContext`
+
+- **示例：**
+
+```ts
+// 模板：<m-form :context="formContext" />
+const formContext = computed(() => ({ username: store.username }));
+
+// 配置回调：mForm.username 读穿到 context
+{
+  display: (mForm) => mForm.username === 'admin',
+}
+```
 
-- **类型：** `(state: FormState) => Record<string, any> | Promise<Record<string, any>>`

docs/api/form/submit-form.md

@@ -1,14 +1,107 @@
 # submitForm 函数
 
-以命令式方式调用 `MForm` 组件完成一次表单校验/提交，类似 `ElMessage` 的用法。
+以命令式方式对一份「表单配置 + 表单值」执行一次校验并取回表单值，类似 `ElMessage` 的用法。
 
-调用时函数内部会临时挂载一个不可见的 `MForm` 实例，把入参作为 props 透传给它，等待初始化完成后调用其 `submitForm` 方法。校验通过则 `resolve` 表单值，校验失败则 `reject` 错误信息，最后自动卸载实例并清理 DOM。
+走**无渲染**实现：不创建任何 DOM 容器、不实例化任何组件，而是直接遍历 `config` 树收集带规则的字段，交给 [`async-validator`](https://github.com/yiminghe/async-validator)（`element-plus` 内部用的也是它）执行。因此它可以在 Node / CI 等没有 DOM 的环境中使用，也省去了挂载整棵表单的开销。校验通过则 `resolve` 表单值，失败则 `reject` 错误信息。纯 Node 请从 `@tmagic/form/headless` 引入，避免加载 Vue 组件和样式。
 
 适用于一些没有合适的容器、但又需要复用 `MForm` 校验逻辑的场景，例如：
 
 - 通过快捷菜单/命令面板触发一次性表单
 - 在脚本/服务层完成一次表单值校验后再发请求
 - 把 `config` 配置当作"可执行的校验规则"使用
+- 在 Node 脚本 / CI 中批量校验组件配置
+
+## 无渲染校验与自定义字段登记
+
+无渲染实现按 `Container.vue` 及各容器组件的模板规则遍历配置树，产出的字段 `prop` 与规则与「挂载 `MForm` 后调用 `validate()`」等价。需要 UI 时传入 `dialog: true`，会把表单以弹层渲染出来供填写/确认。
+
+字段只要带了 `rules`（会包 FormItem），就会校验自身，不必先登记为叶子。配置里有 `items` 会下钻子项。内部再渲染 `MContainer` 的复合字段需要 `registerField(type, { innerConfig })`，把内部会挂到父表单上的配置交出来。innerConfig 回调自身抛错时，会以 `FieldInnerConfigError`（`code: 'FIELD_INNER_CONFIG'`）reject。
+
+innerConfig 回调在校验和表单值初始化两条链路上都会被调用（后者用于走到复合字段内部、找出需要执行 `effect` 的子字段），所以它应当只做配置派生、可重复调用、不要做重活。在表单值初始化链路上，回调抛错只会记录到 console 并跳过该子树，不会让表单渲染不出来。
+
+自定义字段的渲染组件和无渲染校验都通过 `registerField` / `registerFields` 一次登记。`component` 会写入字段注册表（`getFormField`）；传入 `app` 时同时 `app.component('m-fields-*')`。容器组件用 `container`，对应 `m-form-*`。
+
+字段对表单值的初始化写入统一登记为 `effect`，渲染与无渲染共用同一份登记表，执行点也只有一个：表单值初始化完成后（`MForm` 内部、`validateValues`、以及 tab / table 新增行时）各执行一次 `applyMountValueEffects`，字段组件自身不要在 `setup` 里改写 `model`。因此 effect 有两个约束：一是必须幂等，同一份值可能被执行多次（如 `initValues` 变化后重新初始化）；二是不看 `display`（`display: false` 或函数返回假的字段也会被规整，避免字段由隐藏转为显示时漏掉）。`type: 'hidden'` 不同：遍历在该节点停止、不往下分派，内部字段不会执行 effect。需要按路径跨层级写值时用上下文里的 `values`（本次处理的值根对象，`prop` 即以它为根），不要用 `mForm.values`——对比模式处理的是 `lastValues` 那一份，新增行处理的则是还没挂到表单上的一行值。单个 effect 抛错只会记录到 console，不影响其余字段与表单渲染。复合字段可以同时登记 `effect` 与 `innerConfig`：前者改本字段的值，后者只派生内部配置、不要在回调里改 `model`。
+
+| 字段形态                                                              | 登记方式                                    |
+| --------------------------------------------------------------------- | ------------------------------------------- |
+| 自身带 `rules`，内部没有嵌套的父表单 FormItem                         | 无需登记，直接校验                          |
+| 内部只渲染叶子 UI，或把子表单渲染在独立的 `MForm` / `MFormBox` 实例里 | `registerField('my-field')`（配置里有 `items` 但不属于父表单时，避免被当下钻） |
+| 同时需要渲染组件                                                      | `registerField('my-field', { component })`   |
+| 容器组件（`m-form-*`）                                                | `registerField('my-box', { container, walk })` |
+| 叶子字段，但需要改写表单值（类似 `display` 的 `initValue`）           | `registerField('my-field', { effect })`      |
+| 内部再渲染 `MContainer` / `MPanel` / `MGroupList`，向父表单注册字段    | `registerField('my-field', { innerConfig })`（需要改本字段的值时再加 `effect`） |
+| 自定义 `typeMatch` 类型校验                                           | `registerField('my-field', { typeMatch })`   |
+
+```ts
+import { registerField, registerFields } from '@tmagic/form';
+import MyColorPicker from './MyColorPicker.vue';
+
+// 叶子字段：内部没有嵌套的表单项；带 component 时即可渲染
+registerFields({ 'my-color-picker': { component: MyColorPicker } });
+// 需要挂到当前 app 时传入第二个参数
+registerFields({ 'my-color-picker': { component: MyColorPicker } }, app);
+
+// 叶子字段，但需要改写表单值：写成 effect，不要在组件 setup 里改 model
+registerField('my-status', {
+  effect: ({ config, model }) => {
+    if ((config as any).initValue && model) {
+      model[(config as any).name] = (config as any).initValue;
+    }
+  },
+});
+
+// 复合字段：把组件内部渲染的 MContainer 配置交出来
+registerField('my-composite', {
+  innerConfig: ({ config, model, prop }) => ({
+    // 对应组件内部 <MContainer :config="childConfig" :model="model[name]" :prop="prop">
+    config: childConfig,
+    model: model[config.name],
+    prop,
+  }),
+});
+
+// typeMatch：覆盖或扩展该 type 的类型匹配校验，可与 innerConfig / effect 同时登记
+registerField('my-status', {
+  typeMatch: (value, { message }) => (typeof value === 'string' ? undefined : message || '应为字符串'),
+});
+```
+
+返回的 `config` 的 `name` 会被追加到返回的 `prop` 上。因此当内部配置复用了字段自身的 `name`（例如内部渲染 `<MGroupList :config="{ name, items }" :model="model" :prop="prop">`）时，要返回 `parentProp` 而非 `prop`，否则 `name` 会被拼两次：
+
+```ts
+registerField('my-list', {
+  innerConfig: ({ config, parentProp }) => ({
+    config: { type: 'group-list', name: config.name, items: innerItems },
+    prop: parentProp,
+  }),
+});
+```
+
+编辑器侧四个复合字段（`code-select` / `display-conds` / `event-select` / `style-setter`）的登记可参考 `packages/editor/src/fields/headless-validation.ts`：innerConfig 与组件共用同一份配置工厂（`packages/editor/src/fields/configs/`），避免两条链路各写一份而逐渐跑偏。
+
+`type: 'component'` 会把 `config.component` 当任意 Vue 组件渲染。无渲染校验把它视为叶子，**不会**遍历内部结构。因此该组件不得再向父表单注册 FormItem；需要嵌套表单项时，应对该具体组件 `registerField(type, { innerConfig })`。
+
+### 重复登记与撤销
+
+同一个 type 多次登记按字段浅合并，后一次只覆盖自己传入的 key：
+
+```ts
+registerField('my-composite', { innerConfig });
+registerField('my-composite', { component: MyComposite }); // innerConfig 仍在
+```
+
+登记分「内置」与「业务」两层。`app.use(MagicForm)` / `registerBuiltInFields` 写内置层，`registerField` / `registerFields` 写业务层；读取时业务层优先，`unregisterField` / `clearFields` 只清业务层，内置字段不受影响（单测里 `clearFields` 之后仍能校验 `text`、`tab` 等内置 type）。
+
+因为是合并语义，把一个已登记 `innerConfig` 的 type 改成普通叶子，不能靠再传一次空对象，要先撤销：
+
+```ts
+registerField('my-composite', {}); // ✗ 合并后 innerConfig 还在，仍会下钻
+unregisterField('my-composite'); // ✓ 先清掉业务层登记
+registerField('my-composite', { component: MyComposite });
+```
+
+一次登记里同时传多个形态时的优先级：`walk` > `innerConfig` > `effect`（叶子），命中低优先级的那份会被忽略并在控制台给出告警。
 
 ## 签名
 
@@ -18,7 +111,7 @@ function submitForm(options: SubmitFormOptions): Promise<any>;
 
 ## 参数
 
-`options` 与 `MForm` 组件的 props 基本对齐，额外提供了 `native`、`returnChangeRecords`、`appContext`、`timeout` 等参数。
+`options` 与 `MForm` 组件的 props 基本对齐，额外提供了 `native`、`returnChangeRecords`、`dialog`、`signal` 等参数。`appContext` 仅 `dialog: true` 时生效。
 
 | 名称                   | 类型                                                    | 默认值     | 说明                                                                                                  |
 | ---------------------- | ------------------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
@@ -38,22 +131,23 @@ function submitForm(options: SubmitFormOptions): Promise<any>;
 | `popperClass`          | `string`                                                | —          | 弹层 className                                                                                        |
 | `preventSubmitDefault` | `boolean`                                               | —          | 是否阻止表单原生 submit                                                                               |
 | `useFieldTextInError`  | `boolean`                                               | `true`     | 校验失败时错误提示前缀是否使用字段的 `text` 文案；`false` 时直接使用字段 `name`                        |
-| `extendState`          | `(state: FormState) => Record<string, any> \| Promise<Record<string, any>>` | — | 扩展 `formState`                                                              |
+| `context`              | `FormContext`                                           | —          | 宿主业务上下文，与 MForm 的 `context` 语义一致；配置回调通过 `mForm.xxx` 读穿取用                    |
 | `native`               | `boolean`                                               | `false`    | 透传给 `Form.submitForm`。`true` 时返回内部响应式 `values`，否则返回 `cloneDeep(toRaw(values))`        |
 | `returnChangeRecords`  | `boolean`                                               | `false`    | `true` 时 resolve 结果为 `{ values, changeRecords }`，携带表单变更记录；否则仅 resolve `values`        |
-| `appContext`           | `AppContext \| null`                                    | `null`     | 父级 Vue 应用上下文。需要继承全局组件、指令、provide 等时传入，常通过 `app._context` 或 `getCurrentInstance()?.appContext` 获取 |
-| `timeout`              | `number`                                                | `10000`    | 等待表单初始化的最长时间（毫秒）。超时将以错误 reject。设为 `<= 0` 时关闭超时兜底                       |
+| `appContext`           | `AppContext \| null`                                    | `null`     | 父级 Vue 应用上下文。仅 `dialog: true` 时生效，用于继承全局组件、指令、provide 等，常通过 `app._context` 或 `getCurrentInstance()?.appContext` 获取 |
+| `dialog`               | `boolean`                                               | `false`    | `true` 时把表单以弹层形式渲染出来，点击「确定」才提交，「取消」则以 reject 中断；校验失败会保留弹层并展示错误，便于修正后重试。等待人工操作，可用 `signal` 中断 |
+| `title`                | `string`                                                | `'submitForm'` / `'validateForm'` | 弹层标题，仅 `dialog: true` 时生效 |
+| `signal`               | `AbortSignal`                                           | —          | 外部中断信号。abort 时立即以 `signal.reason` reject，并卸载 `dialog` 模式下已挂载的临时表单实例           |
 
 ## 返回值
 
 - `校验通过` — `Promise<any>` resolve 当前表单值（`native` 决定是否克隆）；当 `returnChangeRecords` 为 `true` 时，resolve `{ values, changeRecords }`
 - `校验失败` — `Promise<any>` reject 一个 `Error`，`message` 中包含逐条字段错误信息（格式 `${text} -> ${message}`，多条用 `<br>` 分隔）
-- `初始化超时` — `Promise<any>` reject `Error('submitForm timeout after ${timeout}ms: form is not initialized.')`
 
-无论成功或失败，函数都会在最后自动 `unmount` 内部 app 并移除挂载用的 DOM 容器，无需调用方手动清理。
+`dialog: true` 时无论成功或失败，函数都会在最后自动 `unmount` 内部 app 并移除挂载用的 DOM 容器，无需调用方手动清理。
 
 ::: tip 关于 changeRecords
-`changeRecords` 记录的是表单挂载后发生的字段变更（由各字段的 `change` 事件累积而来）。在 `submitForm` 这种命令式、无用户交互的场景下，通常为空数组；只有在 `extendState` 或字段联动等逻辑中触发了变更时才会有内容。`MForm` 内部的 `submitForm` 在校验通过后会清空变更记录，因此本函数会在调用前先对其做快照再返回。
+`changeRecords` 记录的是表单挂载后发生的字段变更（由各字段的 `change` 事件累积而来）。无渲染校验没有用户交互，因此固定返回空数组；只有 `dialog: true` 时才可能有内容（`MForm` 内部的 `submitForm` 在校验通过后会清空变更记录，因此本函数会在调用前先做快照）。
 :::
 
 ## 基础用法
@@ -99,9 +193,9 @@ console.log(values); // { username: 'foo' }
 console.log(changeRecords); // ChangeRecord[]
 ```
 
-## 在组件中继承父级应用上下文
+## 弹层模式（`dialog: true`）下继承父级应用上下文
 
-`MForm` 内部使用 `@tmagic/design` 的组件（背后可能是 `element-plus` 或 `tdesign`），需要宿主应用先完成相应的 `app.use(...)` 安装。在 `submitForm` 这种脱离常规组件树的命令式调用中，可通过 `appContext` 把父级应用上下文带过去：
+默认路径不挂载组件，不需要 `appContext`。只有 `dialog: true` 会渲染弹层，此时 `MForm` 要用到 `@tmagic/design` 的组件（背后可能是 `element-plus` 或 `tdesign`），需要把宿主应用的上下文带过去：
 
 ```vue
 <script setup lang="ts">
@@ -115,6 +209,8 @@ const onClick = async () => {
   const values = await submitForm({
     config: [{ type: 'text', name: 'text', text: '文本' }],
     initValues: { text: 'hello' },
+    dialog: true,
+    title: '编辑配置',
     appContext,
   });
   console.log(values);
@@ -158,65 +254,77 @@ try {
 }
 ```
 
-## 运行环境
+## validateForm 函数
 
-`submitForm` 内部依赖 `document` / `window` 来挂载临时 Vue 实例，因此**只能在浏览器或具备 DOM 环境的运行时中使用**。
-
-| 环境                                            | 是否可用 | 说明                                                                              |
-| ----------------------------------------------- | -------- | --------------------------------------------------------------------------------- |
-| 浏览器 / Electron 渲染进程 / 浏览器扩展         | ✅       | 直接可用                                                                          |
-| Vitest / Jest + `happy-dom` / `jsdom`           | ✅       | 项目自身的单测就跑在这种环境下                                                    |
-| 纯 Node.js / Bun / Deno（无 DOM polyfill）      | ❌       | 模块顶层就会读 `document`，会抛 `document is not defined`                         |
-| Node.js + 手动注入 `happy-dom` / `jsdom`        | ⚠️       | 可用，需要在 import `@tmagic/form` **之前**完成全局变量注入；校验行为不一定与浏览器完全一致 |
-
-### 在 Node.js 中使用（需要先准备 DOM）
-
-下面是一个在 Node 脚本里调用 `submitForm` 的完整例子，使用 [`happy-dom`](https://github.com/capricorn86/happy-dom) 作为 DOM polyfill：
+`validateForm` 与 `submitForm` 共用同一套无渲染校验实现，区别在于它是**静默**的：校验失败不抛异常、不返回表单值，而是以返回值形式给出错误文案。适合「只想探测这份配置是否合法」的场景，例如源码编辑器保存后校验、批量校验组件配置。
 
 ```ts
-// scripts/check-form.ts
-import { Window } from 'happy-dom';
+function validateForm(options: ValidateFormOptions): Promise<string>;
+```
 
-const window = new Window();
-Object.assign(globalThis, {
-  window,
-  document: window.document,
-  navigator: window.navigator,
-  HTMLElement: window.HTMLElement,
+`options` 取 `SubmitFormOptions` 中与校验相关的子集（`config`、`initValues`、`parentValues`、`labelWidth`、`keyProp`、`useFieldTextInError`、`extendState`、`typeMatchValid`、`appContext`、`dialog`、`title`、`signal`）。
+
+```ts
+import { validateForm } from '@tmagic/form';
+
+const error = await validateForm({
+  config: [{ type: 'text', name: 'username', text: '用户名', rules: [{ required: true, message: '请输入用户名' }] }],
+  initValues: { username: '' },
 });
 
-// 注意：DOM polyfill 必须先注入到 globalThis，再用动态 import
-// 加载业务模块，否则 @tmagic/design 等模块顶层执行时就会读 document
-const { createApp } = await import('vue');
-const ElementPlus = (await import('element-plus')).default;
-const MagicForm = (await import('@tmagic/form')).default;
-const { submitForm } = await import('@tmagic/form');
+if (error) {
+  // '用户名 -> 请输入用户名'
+}
+```
 
-const parentApp = createApp({ render: () => null });
-parentApp.use(ElementPlus);
-parentApp.use(MagicForm);
+校验通过返回空字符串 `''`，否则返回以 `<br>` 拼接的错误文案。无法完成校验时才会 reject（例如 innerConfig 回调失败抛出 `FieldInnerConfigError`）。
 
-const values = await submitForm({
-  config: [{ type: 'text', name: 'username', text: '用户名' }],
-  initValues: { username: 'foo' },
-  appContext: parentApp._context,
+## 运行环境
+
+无渲染实现不接触 `document` / `window`，因此在任何 JS 运行时中都可用：
+
+| 环境                                       | 是否可用 | 说明                                                                                  |
+| ------------------------------------------ | -------- | ------------------------------------------------------------------------------------- |
+| 浏览器 / Electron 渲染进程 / 浏览器扩展    | ✅       | 直接可用                                                                              |
+| Vitest / Jest + `happy-dom` / `jsdom`      | ✅       | 项目自身的单测就跑在这种环境下                                                        |
+| 纯 Node.js / Bun / Deno（无 DOM polyfill） | ✅       | 从 `@tmagic/form/headless` 引入，不要用 `@tmagic/form` 主入口 |
+
+```ts
+// scripts/check-form.ts —— 纯 Node 环境，无需任何 DOM polyfill
+import { builtInFields, registerBuiltInFields, registerFields, validateForm } from '@tmagic/form/headless';
+import { editorFields } from '@tmagic/editor/headless';
+
+// `builtInFields` 只是数据；未 `app.use(MagicForm)` 时要自己登记
+registerBuiltInFields(builtInFields);
+registerFields(editorFields);
+
+const error = await validateForm({
+  config: [{ type: 'text', name: 'username', text: '用户名', rules: [{ required: true }] }],
+  initValues: { username: '' },
 });
 
-console.log(values);
+if (error) {
+  console.error(error);
+  process.exit(1);
+}
 ```
 
 ::: warning 注意
-- DOM polyfill 必须在 **import 业务模块之前** 注入到 `globalThis`，否则模块顶层执行时仍会失败
-- 在 `happy-dom` / `jsdom` 中，`element-plus` 的部分 `validate()` 行为不一定能 1:1 复现真实浏览器（例如某些场景下必填规则可能不触发），建议关键校验使用自定义 `validator` 函数确保稳定
-- 如果只是想在 Node 端做一次纯校验，更稳妥的做法是直接复用 [`async-validator`](https://github.com/yiminghe/async-validator)（element-plus 内部用的就是它），绕开整个 Vue 渲染层
+`dialog: true` 依赖 DOM 与已安装的 UI 库（`element-plus` / `tdesign`），在纯 Node 环境中不可用。
+:::
+
+::: warning ESM 与 CJS 不要混用
+`@tmagic/form/headless` 的 ESM 产物与 `@tmagic/form` 共用同一批模块文件，字段注册表是同一份，两个入口可以混着 `import`。
+
+CJS 产物是两个各自独立的 bundle，注册表不共享。所以同一进程里不要同时 `require('@tmagic/form')` 和 `require('@tmagic/form/headless')`——在一边 `registerField` 另一边读不到，校验会因为「没登记过这个 type」而静默放过。`@tmagic/editor` 与 `@tmagic/design` 的 headless 子路径同理。
 :::
 
 ## 类型定义
 
 ::: details 查看 `SubmitFormOptions` 类型定义
-<<< @/../packages/form/src/submitForm.ts#SubmitFormOptions{ts}
+<<< @/../packages/form/src/utils/submitHeadless.ts#SubmitFormOptions{ts}
 :::
 
 ::: details 查看 `SubmitFormResult` 类型定义
-<<< @/../packages/form/src/submitForm.ts#SubmitFormResult{ts}
+<<< @/../packages/form/src/utils/submitHeadless.ts#SubmitFormResult{ts}
 :::

docs/api/stage/coreMethods.md

@@ -69,10 +69,11 @@
 
 ## delayedMarkContainer
 
-- **类型**：`(event: MouseEvent, excludeElList?: Element[]) => NodeJS.Timeout | undefined`
+- **类型**：`(event: MouseEvent, excludeElList?: Element[], isAdd?: boolean) => NodeJS.Timeout | undefined`
 - **参数**：
   - `event`：鼠标事件
   - `excludeElList`：计算鼠标所在容器时要排除的元素列表
+  - `isAdd`：当前操作是否为新增组件（从组件列表拖入新组件），`containerHighlightType` 为 `addOnly` 时只有新增才会标记容器
 - **详情**：
 
 鼠标拖拽着元素，在容器上方悬停，延迟一段时间后，对容器进行标记，如果悬停时间够长将标记成功，悬停时间短，调用方通过返回的timeoutId取消标记

docs/form-config/rules.md

@@ -69,6 +69,8 @@
 }
 ```
 
+`validator` 除了调用 `callback` 外，也兼容 async-validator 的返回值约定：返回 `false` 或 `Error` / 错误数组表示失败，返回 `true` 表示通过，返回 `Promise` 则以 resolve / reject 为结果，内部抛出的异常会转成校验失败。同步与异步 `typeMatch` 下这些约定行为一致，且只会上报一次结果（既调 `callback` 又返回 `Promise` 时以先到的为准）。
+
 ## 扩展自定义 type 规则
 
 业务可覆盖内置规则，或为自定义字段 type 注册校验。自定义规则优先于内置规则。
@@ -76,50 +78,76 @@
 ### 运行时注册
 
 ```ts
-import {
-  registerTypeMatchRule,
-  registerTypeMatchRules,
-  deleteTypeMatchRule,
-  clearTypeMatchRules,
-} from '@tmagic/form';
+import { registerField, registerFields, unregisterField, clearFields } from '@tmagic/form';
 
 // 覆盖内置 text
-registerTypeMatchRule('text', (value, { message }) => {
-  if (typeof value !== 'string') {
-    return message || '值类型应为字符串';
-  }
+registerField('text', {
+  typeMatch: (value, { message }) => {
+    if (typeof value !== 'string') {
+      return message || '值类型应为字符串';
+    }
+  },
 });
 
 // 扩展业务字段
-registerTypeMatchRule('vs-code', (value, { message }) => {
-  if (typeof value !== 'string') {
-    return message || '代码字段应为字符串';
-  }
+registerField('vs-code', {
+  typeMatch: (value, { message }) => {
+    if (typeof value !== 'string') {
+      return message || '代码字段应为字符串';
+    }
+  },
 });
 
 // 批量注册
-registerTypeMatchRules({
-  foo: (value) => (Array.isArray(value) ? undefined : '应为数组'),
+registerFields({
+  foo: { typeMatch: (value) => (Array.isArray(value) ? undefined : '应为数组') },
 });
 
-// 删除 / 清空
-deleteTypeMatchRule('foo');
-clearTypeMatchRules();
+// 删除 / 清空该 type 的全部登记（含 typeMatch）
+unregisterField('foo');
+clearFields();
 ```
 
-自定义校验器签名：`(value, context) => string | undefined`。返回错误文案表示失败，返回 `undefined` 表示通过。`context` 包含 `fieldType`、`mForm`、`props`、`message`。
+自定义校验器签名：`(value, context) => string | undefined | Promise<string | undefined>`。返回错误文案表示失败，返回 `undefined` 表示通过。`context` 包含 `fieldType`、`mForm`、`props`、`message`。
+
+### 异步校验
+
+自定义校验器可以返回 `Promise`，用于需要异步确认取值是否合法的场景（如请求接口校验 id 是否存在）。内置规则均为同步。
+
+```ts
+import { registerField } from '@tmagic/form';
+
+registerField('mod-select', {
+  typeMatch: async (value, { message }) => {
+    const exists = await checkModExists(value);
+    if (!exists) {
+      return message || `模块(${value})不存在`;
+    }
+  },
+});
+```
+
+异步校验器通过后才会执行同一条 rule 上的自定义 `validator`。需要注意几点：
+
+- **校验器自身失败不算校验失败。** Promise 被 reject（如接口异常）时只打印错误、该字段按通过处理，避免网络故障阻塞操作。需要把失败暴露给用户时请在校验器内部 catch 并返回错误文案。
+- **建议自行缓存请求结果。** 每次校验都会执行校验器，无缓存会导致逐次输入都发请求；也可以给 rule 配 `trigger: 'blur'` 降低触发频率。
+- **只有最新一轮校验的结论会被采用。** 新一轮校验开始后，上一轮针对旧值、尚未返回的校验不再使用自己的结论，而是等最新一轮出结论后一起结算，因此旧结论不会晚到覆盖新结论，`form.validate()` 也不会对一个尚未校验完的值返回成功。
 
 ### 安装时注册
 
 ```ts
 import MagicForm from '@tmagic/form';
+import MyField from './MyField.vue';
 
 app.use(MagicForm, {
-  typeMatchRules: {
-    'my-field': (value, { message }) => {
-      if (typeof value !== 'string') {
-        return message || 'my-field 应为字符串';
-      }
+  fields: {
+    'my-field': {
+      component: MyField,
+      typeMatch: (value, { message }) => {
+        if (typeof value !== 'string') {
+          return message || 'my-field 应为字符串';
+        }
+      },
     },
   },
 });
@@ -127,7 +155,7 @@ app.use(MagicForm, {
 
 ### Editor 字段内置规则
 
-安装 `@tmagic/editor` 时会自动 `registerTypeMatchRules` 注册编辑器自定义字段规则。服务数据（数据源 / 代码块 / 节点树）未就绪时，只做基础形态校验，不做枚举或存在性失败。
+安装 `@tmagic/editor` 时会把 `editorFields`（无 Vue 组件）叠上字段组件后作为 `fields` 传给 `@tmagic/form`。Node 里从 `@tmagic/form/headless` 与 `@tmagic/editor/headless` 引入即可。若安装时也传了 `fields`，会与编辑器字段按 type 浅合并：调用方传入的 key 覆盖对应项，未传的 key（如 `innerConfig` / `typeMatch`）保留。服务数据（数据源 / 代码块 / 节点树）未就绪时，只做基础形态校验，不做枚举或存在性失败。
 
 | 字段 type | 期望值 |
 | --- | --- |
@@ -146,7 +174,7 @@ app.use(MagicForm, {
 
 > 容器类字段（`event-select` / `code-select` / `display-conds`）遵循同一约定：容器级 typeMatch 只做结构校验，「枚举 / 存在性」下沉到内部单元格各自的 typeMatch/rules，避免单个子项非法导致整块表单标红。
 
-业务仍可用 `registerTypeMatchRule` 覆盖上述任一 type。
+业务仍可用 `registerField(type, { typeMatch })` 覆盖上述任一 type 的类型校验；多次 `registerField` 按字段浅合并，不会丢掉已登记的 `innerConfig` / `walk` / `effect`。
 
 ## 示例
 
@@ -201,6 +229,10 @@ app.use(MagicForm, {
 <<< @/../packages/form/src/utils/typeMatch.ts#TypeMatchValidateContext{ts}
 :::
 
+::: details 查看 FieldOptions 类型定义
+<<< @/../packages/form/src/utils/registerField.ts#FieldOptions{ts}
+:::
+
 ::: details 查看 FormInstallOptions 类型定义
 <<< @/../packages/form/src/plugin.ts#FormInstallOptions{ts}
 :::

docs/guide/advanced/history-list.md

@@ -101,7 +101,6 @@ onCodeBlockDiff(id, index);
 | 字段 | 必填 | 说明 |
 | --- | --- | --- |
 | `appContext` | 否 | 父级应用上下文，用于让动态挂载的差异确认弹窗继承全局组件 / 指令 / provide / 插件（Element Plus、`@tmagic/form` 字段组件等）。在组件 `setup` 中调用时会自动取当前组件的 `appContext`，无需手动传；仅当在组件 setup 之外调用时才需显式传入（如 `editorApp._context`）。 |
-| `extendState` | 否 | 透传给差异确认弹窗的 `extendState`（同 Editor 的 [`extendFormState`](#自定义对比判断)），使对比表单中依赖业务上下文的 `display` / `disabled` 等 `filterFunction` 正常工作。 |
 | `dialogWidth` | 否 | 内置页面 / 数据源 / 代码块的差异 / 回滚确认弹窗默认宽度（透传给 `TMagicDialog` 的 `width`），如 `'1200px'` / `'80%'`。缺省时使用弹窗内置默认宽度（`900px`）。业务自有历史可在 `viewDiff` / `confirmAndRevert` 调用时通过各自入参的 `width` 单独覆盖。 |
 
 > 若只需要无确认、无校验的静默回滚，直接用上面的 `editorService.revertPageStep` 等即可，无需 `useHistoryRevert`。
@@ -164,7 +163,7 @@ const historyListExtraTabs = [
 
 ## 自定义对比判断
 
-差异对话框中的「表单对比」最终透传到 `MForm`，你可以通过 Editor 顶层注入的 `extendFormState` 让对比表单拿到完整业务上下文，从而让依赖上下文的 `display` / `disabled` 等 `filterFunction` 正常工作。
+差异对话框中的「表单对比」最终透传到 `MForm`。Editor 会把 `services` / `stage` provide 为 `FORM_CONTEXT_KEY`，对比表单自动继承；业务字段在 `<m-editor>` 外层再 provide 一层即可，详见 [表单业务上下文](/api/editor/props.html#表单业务上下文)。配置回调通过 `mForm.xxx` 读穿取用。
 
 若某些字段语义上相等但结构不同（例如 `code-select` 字段中 `''` 与 `{ hookType: 'code', hookData: [] }` 应视为相等），可借助 `@tmagic/form` 的 [`showDiff`](/api/form/form-props.html#showdiff) 自定义判断函数避免被误判为差异。
 

docs/guide/advanced/tmagic-form.md

@@ -45,15 +45,20 @@ app.use(MagicForm);
 app.mount("#app");
 ```
 
-也可在安装时传入自定义 `typeMatch` 规则，详见[表单校验 - 扩展自定义 type 规则](../../form-config/rules.md#扩展自定义-type-规则)：
+也可在安装时传入自定义字段登记（叶子 / innerConfig / typeMatch / component），详见[表单校验 - 扩展自定义 type 规则](../../form-config/rules.md#扩展自定义-type-规则)：
 
 ```javascript
+import MyField from './MyField.vue';
+
 app.use(MagicForm, {
-  typeMatchRules: {
-    'my-field': (value, { message }) => {
-      if (typeof value !== 'string') {
-        return message || 'my-field 应为字符串';
-      }
+  fields: {
+    'my-field': {
+      component: MyField,
+      typeMatch: (value, { message }) => {
+        if (typeof value !== 'string') {
+          return message || 'my-field 应为字符串';
+        }
+      },
     },
   },
 });

docs/guide/index.md

@@ -69,11 +69,11 @@ $ npm install monaco-editor -S
 
 ```ts
 import { createApp } from "vue";
-import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
-import CssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
-import HtmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
-import JsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
-import TsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
+import EditorWorker from "monaco-editor/editor/editor.worker.js?worker";
+import CssWorker from "monaco-editor/language/css/css.worker.js?worker";
+import HtmlWorker from "monaco-editor/language/html/html.worker.js?worker";
+import JsonWorker from "monaco-editor/language/json/json.worker.js?worker";
+import TsWorker from "monaco-editor/language/typescript/ts.worker.js?worker";
 
 import editorPlugin from "@tmagic/editor";
 import MagicElementPlusAdapter from "@tmagic/element-plus-adapter";

docs/runtime-api/data-source/dataSource.md

@@ -43,6 +43,7 @@ new DataSource(options: DataSourceOptions)
 | `methods` | `CodeBlockContent[]` | 自定义方法配置 |
 | `data` | `any` | 当前数据 |
 | `isInit` | `boolean` | 是否已初始化 |
+| `isMounted` | `boolean` | 页面渲染后的 `mounted` 是否已执行 |
 
 ## 实例方法
 
@@ -172,6 +173,28 @@ ds.onDataChange('user.name', (payload) => {
 
   初始化数据源。
 
+### mounted
+
+- **返回：**
+  - `{Promise<void>}`
+
+- **详情：**
+
+  页面渲染完成后执行，执行后 `isMounted` 为 `true`。由 `DataSourceManager` 监听到 `mounted` 事件后统一调用，自定义数据源可以重写该方法实现「页面渲染后」的逻辑。
+
+- **示例：**
+
+```typescript
+class CustomDataSource extends DataSource {
+  public async mounted() {
+    // 页面渲染后再拉取数据，避免阻塞首屏
+    this.setData(await fetchSomething());
+
+    await super.mounted();
+  }
+}
+```
+
 ### destroy
 
 - **返回：**

docs/runtime-api/data-source/dataSourceManager.md

@@ -25,6 +25,7 @@ new DataSourceManager(options: DataSourceManagerOptions)
 | `data` | `DataSourceManagerData` | 所有数据源的数据 |
 | `initialData` | `DataSourceManagerData` | 初始化数据 |
 | `useMock` | `boolean` | 是否使用 Mock 数据 |
+| `isMounted` | `boolean` | 页面是否已渲染完成（收到过 `mounted` 事件） |
 
 ## 静态方法
 
@@ -109,6 +110,27 @@ if (ds) {
 }
 ```
 
+### mounted
+
+- **参数：**
+  - `{DataSource} ds` 单个数据源实例（必填）
+
+- **返回：**
+  - `{Promise<void>}`
+
+- **详情：**
+
+  页面渲染完成后执行单个数据源的 `mounted`：先调用 `ds.mounted()`，再依次执行 `methods` 中 `timing === 'mounted'` 的方法。当 `ds.isMounted` 为 `true`，或当前 `app.jsEngine` 命中 `ds.schema.disabledInitInJsEngine` 时直接跳过。
+
+  一般不需要手动调用，runtime 在顶层组件渲染完成后触发 `mounted` 事件，由 manager 统一对所有数据源调用该方法。
+
+- **示例：**
+
+```typescript
+// runtime 顶层组件渲染完成后
+app.dataSourceManager?.emit('mounted');
+```
+
 ### get
 
 - **参数：**
@@ -184,7 +206,7 @@ const ds = dataSourceManager.addDataSource({
 
 - **详情：**
 
-  同步更新数据源 DSL 配置：先按 `id` 移除已有数据源，再以 `cloneDeep` 重新 `addDataSource`，并对新建实例触发 `init`（异步执行，不会被该方法 `await`）。一般在编辑器中修改配置后调用。
+  同步更新数据源 DSL 配置：先按 `id` 移除已有数据源，再以 `cloneDeep` 重新 `addDataSource`，并对新建实例触发 `init`（异步执行，不会被该方法 `await`）；若此时 `isMounted` 已为 `true`，`init` 完成后还会补充执行 `mounted`。一般在编辑器中修改配置后调用。
 
 ### compiledNode
 
@@ -325,6 +347,7 @@ DataSourceManager 继承自 EventEmitter，支持以下事件：
 |--------|------|----------|
 | `change` | 单个数据源数据变化 | `(dsId: string, changeEvent: ChangeEvent)` |
 | `init` | 所有数据源初始化完成；现代分支携带 `(data, errors)`，旧 Promise.all 分支为 `(this.data)` | `(data, errors?)` |
+| `mounted` | 由 runtime 在顶层组件渲染完成后触发，manager 收到后统一执行各数据源的 `mounted` | 无 |
 | `registered-all` | 所有数据源注册完成 | 无 |
 | `update-data` | 由 `createDataSourceManager` 在数据变化后发出，用于通知节点重新渲染 | `(newNodes: MNode[], sourceId: string, changeEvent: ChangeEvent, pageId: Id)` |
 

eslint-config/flat/import-sort.mjs

@@ -22,7 +22,7 @@ export default {
           ['^(@tencent)(/.*|$)'],
           ['^(@tmagic)(/.*|$)'],
           // Internal packages.
-          ['^(@|src|editor-page|@editor|@data-source)(/.*|$)'],
+          ['^(@|src|editor-page|@editor|@form|@data-source)(/.*|$)'],
           // Side effect imports.
           ['^\\u0000'],
           // Parent imports. Put `..` last.

eslint-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tmagic/eslint-config",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "main": "index.mjs",
   "type": "module",
   "repository": {
@@ -10,17 +10,17 @@
   },
   "dependencies": {
     "@eslint/js": "^10.0.1",
-    "@typescript-eslint/parser": "^8.58.0",
-    "@typescript-eslint/eslint-plugin": "^8.58.0",
     "@stylistic/eslint-plugin": "^5.10.0",
+    "@typescript-eslint/eslint-plugin": "^8.66.0",
+    "@typescript-eslint/parser": "^8.66.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-simple-import-sort": "^13.0.0",
-    "eslint-plugin-vue": "^10.8.0",
-    "vue-eslint-parser": "^10.4.0",
-    "eslint-plugin-prettier": "^5.5.5",
-    "globals": "^17.4.0",
-    "typescript-eslint": "^8.58.0"
+    "eslint-plugin-prettier": "^5.5.6",
+    "eslint-plugin-simple-import-sort": "^14.0.0",
+    "eslint-plugin-vue": "^10.10.0",
+    "globals": "^17.9.0",
+    "typescript-eslint": "^8.66.0",
+    "vue-eslint-parser": "^10.4.1"
   },
   "peerDependencies": {
     "eslint": ">=10.0.0",

package.json

@@ -1,12 +1,12 @@
 {
-  "version": "1.8.0-beta.14",
+  "version": "1.8.0-beta.27",
   "name": "tmagic",
   "private": true,
   "type": "module",
-  "packageManager": "pnpm@10.33.4",
+  "packageManager": "pnpm@11.21.0",
   "scripts": {
     "bootstrap": "pnpm i && pnpm build",
-    "clean:top": "rimraf */**/dist */**/types */dist coverage dwt* temp packages/cli/lib",
+    "clean:top": "rimraf packages/*/dist packages/*/types runtime/*/dist runtime/*/types vue-components/*/dist vue-components/*/types react-components/*/dist react-components/*/types playground/dist coverage dwt* temp packages/cli/lib",
     "clean:modules": "rimraf node_modules **/node_modules **/**/node_modules",
     "clean:all": "pnpm clean:top && pnpm clean:modules",
     "lint": "eslint --cache .",
@@ -15,7 +15,8 @@
     "pg": "pnpm playground",
     "playground:react": "pnpm --filter \"runtime-react\" build:libs && pnpm --filter \"runtime-react\" --filter \"tmagic-playground\" dev:react",
     "pg:react": "pnpm playground:react",
-    "build": "pnpm build:dts && node scripts/build.mjs",
+    "build": "pnpm build:dts && node scripts/build.mjs && pnpm check:headless",
+    "check:headless": "node scripts/check-headless-dist.mjs",
     "build:dts": "pnpm --filter \"@tmagic/cli\" build && tsc -p tsconfig.build-browser.json && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build-vue.json && rolldown -c rolldown.dts.config.mjs && rimraf temp",
     "check:type": "node scripts/check-type.mjs",
     "build:playground": "pnpm --filter \"runtime-vue\" build && pnpm --filter \"tmagic-playground\" build",
@@ -24,7 +25,7 @@
     "docs:build": "vitepress build docs",
     "reinstall": "pnpm clean:all && pnpm bootstrap",
     "test": "vitest run",
-    "coverage": "vitest run --coverage",
+    "coverage": "vitest run --coverage && node scripts/check-coverage.mjs",
     "prepare": "husky",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "release": "node scripts/release.mjs"
@@ -40,44 +41,44 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "devDependencies": {
-    "@commitlint/cli": "^20.5.3",
-    "@commitlint/config-conventional": "^20.5.3",
+    "@commitlint/cli": "^21.2.1",
+    "@commitlint/config-conventional": "^21.2.0",
     "@tmagic/eslint-config": "workspace:*",
-    "@types/node": "24.0.10",
+    "@types/node": "26.1.2",
     "@vitejs/plugin-vue": "^6.0.8",
     "@vitest/coverage-v8": "^4.1.10",
     "@vue/compiler-sfc": "catalog:",
-    "c8": "^10.1.3",
+    "c8": "^12.0.0",
     "commitizen": "^4.3.2",
     "conventional-changelog-cli": "^5.0.0",
-    "cosmiconfig": "^9.0.2",
+    "cosmiconfig": "^10.0.0",
     "cz-conventional-changelog": "^3.3.0",
-    "element-plus": "^2.14.3",
+    "element-plus": "catalog:",
     "enquirer": "^2.4.1",
-    "eslint": "^10.7.0",
-    "execa": "^9.6.1",
-    "happy-dom": "^20.10.6",
+    "eslint": "^10.8.1",
+    "execa": "^10.0.1",
+    "happy-dom": "^20.11.2",
     "highlight.js": "^11.11.1",
     "husky": "^9.1.7",
-    "jsdom": "^27.4.0",
-    "lint-staged": "^16.4.0",
+    "jsdom": "^30.0.1",
+    "lint-staged": "^17.3.0",
     "minimist": "^1.2.8",
     "picocolors": "^1.1.1",
-    "prettier": "^3.9.5",
-    "recast": "^0.23.12",
-    "rimraf": "^3.0.2",
-    "rolldown": "^1.2.0",
-    "rolldown-plugin-dts": "^0.26.0",
+    "prettier": "^3.9.6",
+    "recast": "^0.23.20",
+    "rimraf": "^6.1.3",
+    "rolldown": "^1.2.3",
+    "rolldown-plugin-dts": "^0.28.1",
     "sass-embedded": "^1.100.0",
     "semver": "^7.8.5",
-    "serialize-javascript": "^7.0.7",
-    "shx": "^0.3.4",
+    "serialize-javascript": "^7.1.0",
+    "shx": "^0.4.0",
     "typescript": "catalog:",
     "vite": "catalog:",
-    "vitepress": "2.0.0-alpha.18",
+    "vitepress": "2.0.0-alpha.19",
     "vitest": "^4.1.10",
-    "vue": "catalog:",
-    "vue-tsc": "^3.3.7"
+    "vue": "^3.5.41",
+    "vue-tsc": "^3.3.9"
   },
   "config": {
     "commitizen": {

packages/cli/bin/tmagic.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-const { cli } = require('../lib');
+import { cli } from '../lib/index.js';
 
 cli({
   source: process.cwd(),

packages/cli/package.json

@@ -1,11 +1,12 @@
 {
-  "version": "1.8.0-beta.14",
+  "version": "1.8.0-beta.27",
   "name": "@tmagic/cli",
+  "type": "module",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "license": "Apache-2.0",
   "scripts": {
-    "build": "pnpm clean && tsc -b tsconfig.build.json",
+    "build": "pnpm clean && rolldown -c rolldown.config.mjs",
     "clean": "rimraf lib *.tsbuildinfo",
     "check:type": "tsc --noEmit --project tsconfig.build.json"
   },
@@ -26,25 +27,18 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "cac": "^6.7.14",
-    "chokidar": "^3.6.0",
-    "esbuild": "^0.21.5",
-    "fs-extra": "^11.2.0",
+    "cac": "^7.0.0",
+    "chokidar": "^5.0.0",
+    "fs-extra": "^11.4.0",
     "merge-options": "^3.0.4",
     "picocolors": "^1.1.1",
-    "recast": "^0.23.11",
-    "tslib": "^2.8.0"
+    "recast": "^0.23.19",
+    "typescript": "catalog:"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^24.0.10"
-  },
-  "peerDependencies": {
-    "typescript": "catalog:"
-  },
-  "peerDependenciesMeta": {
-    "typescript": {
-      "optional": true
-    }
+    "@types/node": "^26.1.2",
+    "rolldown": "^1.2.2",
+    "rolldown-plugin-dts": "^0.28.0"
   }
 }

packages/cli/rolldown.config.mjs

@@ -0,0 +1,36 @@
+import { builtinModules, createRequire } from 'node:module';
+
+import { defineConfig } from 'rolldown';
+import { dts } from 'rolldown-plugin-dts';
+
+const require = createRequire(import.meta.url);
+const packageJson = require('./package.json');
+const externalPackages = new Set([
+  ...builtinModules,
+  ...Object.keys(packageJson.dependencies ?? {}),
+  ...Object.keys(packageJson.peerDependencies ?? {}),
+]);
+
+export default defineConfig({
+  input: 'src/index.ts',
+  plugins: [dts()],
+  external: (id) => {
+    if (id.startsWith('node:') || externalPackages.has(id)) {
+      return true;
+    }
+
+    for (const packageName of externalPackages) {
+      if (id.startsWith(`${packageName}/`)) {
+        return true;
+      }
+    }
+
+    return false;
+  },
+  output: {
+    dir: 'lib',
+    format: 'es',
+    sourcemap: false,
+  },
+  codeSplitting: false,
+});

packages/cli/src/Core.ts

@@ -4,10 +4,10 @@ import fs from 'fs-extra';
 
 import { prepareEntryFile } from './utils/prepareEntryFile';
 import { resolveAppPackages } from './utils/resolveAppPackages';
+import { require } from './require';
 import { ModuleMainFilePath, UserConfig } from './types';
 
 export default class Core {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
   public version = require('../package.json').version;
 
   public options: UserConfig;

packages/cli/src/cli.ts

@@ -4,6 +4,7 @@ import { allowTs } from './utils/allowTs';
 import { error } from './utils/logger';
 import { scripts } from './commands';
 import App from './Core';
+import { require } from './require';
 import { UserConfig } from './types';
 
 /**
@@ -29,7 +30,7 @@ export const cli = (defaultAppConfig: UserConfig): void => {
   const program = cac('tmagic');
 
   // display core version and cli version
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
+
   const versionCli = require('../package.json').version;
   program.version(`tmagic/cli@${versionCli}`);
 

packages/cli/src/require.ts

@@ -0,0 +1,9 @@
+import { createRequire } from 'node:module';
+
+/**
+ * CJS `require()` in an ESM context, shared by the whole CLI so that
+ * `allowTs`'s `.ts` loader also applies to `loadUserConfig` requires.
+ * Bound to the package `src/` directory, so paths like `../package.json`
+ * resolve to the package root as before.
+ */
+export const require = createRequire(import.meta.url);

packages/cli/src/utils/allowTs.ts

@@ -1,23 +1,27 @@
-import { transformSync } from 'esbuild';
 import fs from 'fs-extra';
+import ts from 'typescript';
+
+import { require } from '../require';
 
 /**
  * Transform a ts file to cjs code
  */
 export const transformTsFileToCodeSync = (filename: string): string =>
-  transformSync(fs.readFileSync(filename).toString(), {
-    format: 'cjs',
-    loader: 'ts',
-    sourcefile: filename,
-    sourcemap: 'inline',
-    target: 'node18',
-  }).code;
+  ts.transpileModule(fs.readFileSync(filename).toString(), {
+    compilerOptions: {
+      inlineSourceMap: true,
+      inlineSources: true,
+      module: ts.ModuleKind.CommonJS,
+      target: ts.ScriptTarget.ES2022,
+    },
+    fileName: filename,
+  }).outputText;
 
 /**
  * Globally allow ts files to be loaded via `require()`
  */
 export const allowTs = (): void => {
-  require.extensions['.ts'] = (m: any, filename) => {
+  require.extensions['.ts'] = (m: any, filename: string) => {
     m._compile(transformTsFileToCodeSync(filename), filename);
   };
 };

packages/cli/src/utils/loadUserConfig.ts

@@ -1,3 +1,4 @@
+import { require } from '../require';
 import { UserConfig, UserConfigLoader } from '../types';
 
 export const isPlainObject = <T extends Record<any, any> = Record<any, any>>(val: unknown): val is T =>
@@ -10,7 +11,6 @@ export const hasExportDefault = <T = any>(mod: unknown): mod is { default: T } =
   isPlainObject(mod) && !!mod.__esModule && Object.prototype.hasOwnProperty.call(mod, 'default');
 
 export const loadUserConfigCjs: UserConfigLoader = async (userConfigPath) => {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
   const required = require(userConfigPath);
   return hasExportDefault(required) ? required.default : required;
 };

packages/cli/src/utils/prepareEntryFile.ts

@@ -1,6 +1,7 @@
 import * as recast from 'recast';
 
 import type App from '../Core';
+import { require } from '../require';
 import { EntryType } from '../types';
 
 export const prepareEntryFile = async (app: App) => {
@@ -138,7 +139,6 @@ export const generateContent = (
 };
 
 export const prettyCode = (code: string) =>
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
   recast.prettyPrint(recast.parse(code.replace(/\\/g, '/'), { parser: require('recast/parsers/typescript') }), {
     tabWidth: 2,
     trailingComma: true,

packages/cli/src/utils/resolveAppPackages.ts

@@ -2,10 +2,11 @@ import { execSync } from 'node:child_process';
 import path from 'node:path';
 import { exit } from 'node:process';
 
-import fs, { existsSync } from 'fs-extra';
+import fs from 'fs-extra';
 import * as recast from 'recast';
 
 import type App from '../Core';
+import { require } from '../require';
 import { EntryType, ModuleMainFilePath, NpmConfig, PackageType } from '../types';
 
 import { backupLock, backupPackageJson, restoreLock, restorePackageJson } from './backupPackageFile';
@@ -127,7 +128,7 @@ const typeAssertion = function ({
 
       if (isFile(defaultFile)) {
         const defaultCode = fs.readFileSync(defaultFile, { encoding: 'utf-8', flag: 'r' });
-        // eslint-disable-next-line @typescript-eslint/no-require-imports
+
         const ast = recast.parse(defaultCode, { parser: require('recast/parsers/typescript') });
         if (
           isDatasource(
@@ -294,7 +295,7 @@ const getComponentPackageImports = function ({
     if (propertyMatch) {
       let file = getIndexPath(path.resolve(path.dirname(indexPath), propertyMatch.source.value));
 
-      if (!existsSync(file)) {
+      if (!fs.existsSync(file)) {
         file = propertyMatch.source.value;
       }
 
@@ -518,7 +519,7 @@ const setPackages = (packages: ModuleMainFilePath, app: App, packagePath: string
     .replace('\n', '');
 
   const indexCode = fs.readFileSync(indexPath, { encoding: 'utf-8', flag: 'r' });
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
+
   const ast: Ast = recast.parse(indexCode, { parser: require('recast/parsers/typescript') });
   const result = typeAssertion({ ast, indexPath, componentFileAffix, datasoucreSuperClass });
 

packages/cli/tsconfig.build.json

@@ -2,12 +2,10 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "moduleResolution": "node16",
-    "module": "node16",
+    "moduleResolution": "bundler",
+    "module": "ESNext",
     "rootDir": "./src",
     "outDir": "./lib",
-    "declaration": true,
-    
     "types": ["node"],
   },
   "include": ["./src"],

packages/core/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.14",
+  "version": "1.8.0-beta.27",
   "name": "@tmagic/core",
   "type": "module",
   "sideEffects": false,
@@ -39,11 +39,11 @@
     "@tmagic/schema": "workspace:*",
     "@tmagic/utils": "workspace:*",
     "events": "^3.3.0",
-    "lodash-es": "^4.17.21"
+    "lodash-es": "^4.18.1"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
-    "@types/lodash-es": "^4.17.4"
+    "@types/lodash-es": "^4.17.12"
   },
   "peerDependencies": {
     "typescript": "catalog:"

packages/core/src/utils.ts

@@ -51,7 +51,7 @@ export const style2Obj = (style: string) => {
 
 export const fillBackgroundImage = (value: string) => {
   if (value && !/^url/.test(value) && !/^linear-gradient/.test(value)) {
-    return `url(${value})`;
+    return `url("${value}")`;
   }
   return value;
 };

packages/core/tests/App.spec.ts

@@ -341,6 +341,20 @@ describe('App 配置/方法/组件注册', () => {
     expect(app.page).toBeUndefined();
   });
 
+  test('deletePage 销毁当前 page', () => {
+    const app = new App({
+      config: {
+        type: NodeType.ROOT,
+        id: 'app',
+        items: [{ type: NodeType.PAGE, id: 'p1', items: [] }],
+      },
+    });
+    expect(app.page?.data.id).toBe('p1');
+
+    app.deletePage();
+    expect(app.page).toBeUndefined();
+  });
+
   test('runCode 执行代码块', async () => {
     const fn = vi.fn();
     const app = new App({

packages/core/tests/utils.spec.ts

@@ -50,7 +50,7 @@ describe('style2Obj', () => {
 
 describe('fillBackgroundImage', () => {
   test('裸路径会包裹 url()', () => {
-    expect(fillBackgroundImage('a.png')).toBe('url(a.png)');
+    expect(fillBackgroundImage('a.png')).toBe('url("a.png")');
   });
 
   test('已经是 url() 不重复包裹', () => {
@@ -127,7 +127,7 @@ describe('transformStyle', () => {
 
   test('backgroundImage: browser 下补全 url()', () => {
     expect(transformStyle({ backgroundImage: 'a.png' }, 'browser')).toEqual({
-      backgroundImage: 'url(a.png)',
+      backgroundImage: 'url("a.png")',
     });
   });
 

packages/data-source/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.14",
+  "version": "1.8.0-beta.27",
   "name": "@tmagic/data-source",
   "type": "module",
   "sideEffects": false,
@@ -32,9 +32,9 @@
     "data-source"
   ],
   "dependencies": {
-    "deep-state-observer": "^5.5.13",
+    "deep-state-observer": "^5.5.17",
     "events": "^3.3.0",
-    "lodash-es": "^4.17.21"
+    "lodash-es": "^4.18.1"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:*",
@@ -47,6 +47,6 @@
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
-    "@types/lodash-es": "^4.17.4"
+    "@types/lodash-es": "^4.17.12"
   }
 }

packages/data-source/src/DataSourceManager.ts

@@ -57,7 +57,7 @@ class DataSourceManager extends EventEmitter {
       for (let config = list.shift(); config; config = list.shift()) {
         const ds = app.addDataSource(config);
         if (ds) {
-          app.init(ds);
+          app.initAndMount(ds);
         }
       }
     });
@@ -84,6 +84,8 @@ class DataSourceManager extends EventEmitter {
   public data: DataSourceManagerData = {};
   public initialData: DataSourceManagerData = {};
   public useMock?: boolean = false;
+  /** 页面是否已经渲染完成 */
+  public isMounted = false;
 
   constructor({ app, useMock, initialData }: DataSourceManagerOptions) {
     super();
@@ -109,6 +111,12 @@ class DataSourceManager extends EventEmitter {
         this.callDsInit();
       });
     }
+
+    // 由runtime在顶层组件渲染完成后触发
+    this.on('mounted', () => {
+      this.isMounted = true;
+      this.callDsMounted();
+    });
   }
 
   public async init(ds: DataSource) {
@@ -137,6 +145,29 @@ class DataSourceManager extends EventEmitter {
     }
   }
 
+  /**
+   * 页面渲染完成后执行单个数据源的mounted
+   * @param {DataSource} ds 数据源实例
+   */
+  public async mounted(ds: DataSource) {
+    if (ds.isMounted) {
+      return;
+    }
+
+    if (this.app.jsEngine && ds.schema.disabledInitInJsEngine?.includes(this.app.jsEngine)) {
+      return;
+    }
+
+    await ds.mounted?.();
+
+    for (const method of ds.methods) {
+      if (typeof method.content !== 'function') return;
+      if (method.timing === 'mounted') {
+        await method.content({ params: {}, dataSource: ds, app: this.app });
+      }
+    }
+  }
+
   public get(id: string) {
     return this.dataSourceMap.get(id);
   }
@@ -219,7 +250,7 @@ class DataSourceManager extends EventEmitter {
       this.addDataSource(cloneDeep(schema));
       const newDs = this.get(schema.id);
       if (newDs) {
-        this.init(newDs);
+        this.initAndMount(newDs);
       }
     }
   }
@@ -390,6 +421,28 @@ class DataSourceManager extends EventEmitter {
         });
     }
   }
+
+  private callDsMounted() {
+    const promises = Array.from(this.dataSourceMap).map(([, ds]) => this.mounted(ds));
+
+    if (typeof Promise.allSettled === 'function') {
+      return Promise.allSettled(promises);
+    }
+
+    return Promise.all(promises.map((promise) => promise.catch(() => undefined)));
+  }
+
+  /**
+   * 初始化数据源，如果页面已经渲染完成（如异步注册的数据源类型），则在初始化后补充执行mounted
+   * @param {DataSource} ds 数据源实例
+   */
+  private async initAndMount(ds: DataSource) {
+    await this.init(ds);
+
+    if (this.isMounted) {
+      await this.mounted(ds);
+    }
+  }
 }
 
 export default DataSourceManager;

packages/data-source/src/data-sources/Base.ts

@@ -31,6 +31,7 @@ import type { ChangeEvent, DataSourceOptions } from '@data-source/types';
  */
 export default class DataSource<T extends DataSourceSchema = DataSourceSchema> extends EventEmitter {
   public isInit = false;
+  public isMounted = false;
 
   /** @tmagic/core 实例 */
   public app: TMagicApp;
@@ -152,6 +153,13 @@ export default class DataSource<T extends DataSourceSchema = DataSourceSchema> e
     this.isInit = true;
   }
 
+  /**
+   * 页面渲染后执行，由 DataSourceManager 监听到 mounted 事件后统一调用
+   */
+  public async mounted() {
+    this.isMounted = true;
+  }
+
   public destroy() {
     this.#fields = [];
     this.removeAllListeners();

packages/data-source/src/utils.ts

@@ -7,8 +7,7 @@ import {
   DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX,
   dataSourceTemplateRegExp,
   getValueByKeyPath,
-  isPage,
-  isPageFragment,
+  isPageOrFragment,
   NODE_CONDS_KEY,
   replaceChildNode,
 } from '@tmagic/core';
@@ -68,7 +67,7 @@ export const compliedConditions = (node: { [NODE_CONDS_KEY]?: DisplayCond[] }, d
 };
 
 export const updateNode = (node: MNode, dsl: MApp) => {
-  if (isPage(node) || isPageFragment(node)) {
+  if (isPageOrFragment(node)) {
     const index = dsl.items?.findIndex((child: MNode) => child.id === node.id);
     dsl.items.splice(index, 1, node as MPage | MPageFragment);
   } else {

packages/data-source/tests/DataSource.spec.ts

@@ -38,6 +38,25 @@ describe('DataSource', () => {
 
     expect(ds.isInit).toBeTruthy();
   });
+
+  test('mounted', async () => {
+    const ds = new DataSource({
+      schema: {
+        type: 'base',
+        id: '1',
+        fields: [{ name: 'name' }],
+        methods: [],
+        events: [],
+      },
+      app: new App({}),
+    });
+
+    expect(ds.isMounted).toBe(false);
+
+    await ds.mounted();
+
+    expect(ds.isMounted).toBe(true);
+  });
 });
 
 describe('DataSource setData', () => {

packages/data-source/tests/DataSourceMenager.spec.ts

@@ -302,6 +302,227 @@ describe('DataSourceManager - init 生命周期', () => {
   });
 });
 
+describe('DataSourceManager - mounted 生命周期', () => {
+  afterEach(() => {
+    DataSourceManager.clearDataSourceClass();
+  });
+
+  // 等待 mounted 事件触发的异步流程执行完
+  const flush = () => new Promise<void>((resolve) => setTimeout(resolve, 0));
+
+  const createApp = (id: string, dataSources: any[] = [], jsEngine?: any) =>
+    new TMagicApp({
+      ...(jsEngine ? { jsEngine } : {}),
+      config: {
+        type: NodeType.ROOT,
+        id,
+        items: [],
+        dataSources,
+      },
+    } as any);
+
+  test('mounted 事件会统一执行所有数据源的 mounted', async () => {
+    const app = createApp('app_mounted', [
+      { type: 'base', id: 'ds_m1', fields: [], methods: [], events: [] },
+      { type: 'base', id: 'ds_m2', fields: [], methods: [], events: [] },
+    ]);
+    const dsm = new DataSourceManager({ app });
+
+    expect(dsm.isMounted).toBe(false);
+    expect(dsm.get('ds_m1')?.isMounted).toBe(false);
+
+    dsm.emit('mounted');
+    await flush();
+
+    expect(dsm.isMounted).toBe(true);
+    expect(dsm.get('ds_m1')?.isMounted).toBe(true);
+    expect(dsm.get('ds_m2')?.isMounted).toBe(true);
+  });
+
+  test('methods 中 timing=mounted 的 content 会在 ds.mounted 之后调用', async () => {
+    const app = createApp('app_mounted_method');
+    const dsm = new DataSourceManager({ app });
+    const order: string[] = [];
+    const mountedContent = vi.fn(() => {
+      order.push('method');
+    });
+    const ds = new DataSource({
+      app,
+      schema: {
+        type: 'base',
+        id: 'ds_mounted_method',
+        fields: [],
+        events: [],
+        methods: [{ name: 'onMounted', content: mountedContent, timing: 'mounted', params: [] }],
+      } as any,
+    });
+    const origMounted = ds.mounted.bind(ds);
+    ds.mounted = async () => {
+      order.push('mounted');
+      await origMounted();
+    };
+
+    await dsm.mounted(ds);
+
+    expect(mountedContent).toHaveBeenCalledTimes(1);
+    const arg = mountedContent.mock.calls[0][0] as any;
+    expect(arg.dataSource).toBe(ds);
+    expect(arg.app).toBe(app);
+    expect(order).toEqual(['mounted', 'method']);
+  });
+
+  test('ds.isMounted 为 true 时直接跳过', async () => {
+    const app = createApp('app_mounted_skip');
+    const dsm = new DataSourceManager({ app });
+    const content = vi.fn();
+    const ds = new DataSource({
+      app,
+      schema: {
+        type: 'base',
+        id: 'ds_mounted_skip',
+        fields: [],
+        events: [],
+        methods: [{ name: 'onMounted', content, timing: 'mounted', params: [] }],
+      } as any,
+    });
+
+    await dsm.mounted(ds);
+    await dsm.mounted(ds);
+
+    expect(content).toHaveBeenCalledTimes(1);
+  });
+
+  test('jsEngine 命中 disabledInitInJsEngine 时跳过 mounted', async () => {
+    const app = createApp('app_mounted_disabled', [], 'nodejs');
+    const dsm = new DataSourceManager({ app });
+    const ds = new DataSource({
+      app,
+      schema: {
+        type: 'base',
+        id: 'ds_mounted_disabled',
+        fields: [],
+        methods: [],
+        events: [],
+        disabledInitInJsEngine: ['nodejs'],
+      } as any,
+    });
+
+    await dsm.mounted(ds);
+
+    expect(ds.isMounted).toBe(false);
+  });
+
+  test('method.content 非函数时提前返回', async () => {
+    const app = createApp('app_mounted_bad');
+    const dsm = new DataSourceManager({ app });
+    const content = vi.fn();
+    const ds = new DataSource({
+      app,
+      schema: {
+        type: 'base',
+        id: 'ds_mounted_bad',
+        fields: [],
+        events: [],
+        methods: [
+          { name: 'bad', content: 'not-a-function', timing: 'mounted', params: [] } as any,
+          { name: 'onMounted', content, timing: 'mounted', params: [] } as any,
+        ],
+      } as any,
+    });
+
+    await dsm.mounted(ds);
+
+    expect(ds.isMounted).toBe(true);
+    expect(content).not.toHaveBeenCalled();
+  });
+
+  test('mounted 抛错时不会产生未处理的异常', async () => {
+    const mountedSpy = vi.spyOn(DataSource.prototype, 'mounted').mockRejectedValue(new Error('mounted-boom'));
+
+    try {
+      const app = createApp('app_mounted_err', [{ type: 'base', id: 'ds_me', fields: [], methods: [], events: [] }]);
+      const dsm = new DataSourceManager({ app });
+
+      dsm.emit('mounted');
+      await flush();
+
+      expect(dsm.isMounted).toBe(true);
+    } finally {
+      mountedSpy.mockRestore();
+    }
+  });
+
+  test('Promise.allSettled 不可用时走 Promise.all 兼容分支', async () => {
+    const original = Promise.allSettled;
+    (Promise as any).allSettled = undefined;
+    const mountedSpy = vi.spyOn(DataSource.prototype, 'mounted').mockRejectedValueOnce(new Error('compat-boom'));
+
+    try {
+      const app = createApp('app_mounted_compat', [
+        { type: 'base', id: 'ds_mc1', fields: [], methods: [], events: [] },
+        { type: 'base', id: 'ds_mc2', fields: [], methods: [], events: [] },
+      ]);
+      const dsm = new DataSourceManager({ app });
+
+      dsm.emit('mounted');
+      await flush();
+
+      expect(mountedSpy).toHaveBeenCalledTimes(2);
+      expect(dsm.get('ds_mc2')?.isMounted).toBe(true);
+    } finally {
+      (Promise as any).allSettled = original;
+      mountedSpy.mockRestore();
+    }
+  });
+
+  test('页面渲染后注册的数据源类型会在 init 之后补充执行 mounted', async () => {
+    const app = createApp('app_mounted_register', [
+      { type: 'mounted-late', id: 'ds_late', fields: [], methods: [], events: [] },
+    ]);
+    const dsm = new DataSourceManager({ app });
+
+    expect(dsm.get('ds_late')).toBeUndefined();
+
+    dsm.emit('mounted');
+    await flush();
+
+    class LateDataSource extends DataSource {}
+    DataSourceManager.register('mounted-late', LateDataSource as any);
+    await flush();
+
+    expect(dsm.get('ds_late')?.isInit).toBe(true);
+    expect(dsm.get('ds_late')?.isMounted).toBe(true);
+  });
+
+  test('页面渲染后 updateSchema 重建的数据源会执行 mounted', async () => {
+    const app = createApp('app_mounted_update', [
+      { type: 'base', id: 'ds_up', fields: [{ name: 'a' }], methods: [], events: [] },
+    ]);
+    const dsm = new DataSourceManager({ app });
+
+    dsm.emit('mounted');
+    await flush();
+
+    dsm.updateSchema([{ type: 'base', id: 'ds_up', fields: [{ name: 'b' }], methods: [], events: [] }]);
+    await flush();
+
+    expect(dsm.get('ds_up')?.isMounted).toBe(true);
+  });
+
+  test('页面未渲染时 updateSchema 不会执行 mounted', async () => {
+    const app = createApp('app_update_not_mounted', [
+      { type: 'base', id: 'ds_nm', fields: [{ name: 'a' }], methods: [], events: [] },
+    ]);
+    const dsm = new DataSourceManager({ app });
+
+    dsm.updateSchema([{ type: 'base', id: 'ds_nm', fields: [{ name: 'b' }], methods: [], events: [] }]);
+    await flush();
+
+    expect(dsm.get('ds_nm')?.isInit).toBe(true);
+    expect(dsm.get('ds_nm')?.isMounted).toBe(false);
+  });
+});
+
 describe('DataSourceManager - addDataSource 边界', () => {
   afterEach(() => {
     DataSourceManager.clearDataSourceClass();

packages/dep/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.14",
+  "version": "1.8.0-beta.27",
   "name": "@tmagic/dep",
   "type": "module",
   "sideEffects": false,

packages/dep/src/Target.ts

@@ -1,6 +1,6 @@
 import type { DepData } from '@tmagic/schema';
 
-import { DepTargetType, type IsTarget, type TargetOptions } from './types';
+import { DepTargetType, type IsTarget, type TargetDescriptor, type TargetOptions } from './types';
 
 export interface DepUpdateOptions {
   id: string | number;
@@ -40,12 +40,17 @@ export default class Target {
    * 是否默认收集，默认为true，当值为false时需要传入type参数给collect方法才会被收集
    */
   public isCollectByDefault?: boolean;
+  /**
+   * 可序列化描述，有该描述的 target 可以在 worker 中重建，从而把依赖收集放到子线程执行
+   */
+  public descriptor?: TargetDescriptor;
 
   constructor(options: TargetOptions) {
     this.isTarget = options.isTarget;
     this.id = options.id;
     this.name = options.name;
     this.isCollectByDefault = options.isCollectByDefault ?? true;
+    this.descriptor = options.descriptor;
     if (options.type) {
       this.type = options.type;
     }

packages/dep/src/types.ts

@@ -1,4 +1,4 @@
-import type { DepData } from '@tmagic/schema';
+import type { CodeBlockContent, DataSourceSchema, DepData, Id } from '@tmagic/schema';
 
 import type Target from './Target';
 
@@ -17,6 +17,30 @@ export enum DepTargetType {
 
 export type IsTarget = (key: string | number, value: any, data?: Record<string, any>) => boolean;
 
+/** 创建代码块 target 只需要名称，Record 用于兼容直接传入完整代码块 */
+export type CodeBlockName = Pick<CodeBlockContent, 'name'> & Record<string, any>;
+
+/**
+ * target 的可序列化描述
+ *
+ * isTarget 是带闭包的函数，无法跨线程传递，只能在另一端用同样的入参重新创建。
+ * 内置的代码块/数据源 target 由工厂函数写入该描述，因此可以放到 worker 中收集；
+ * 业务自定义的 target 没有该描述，只能在主线程收集。
+ *
+ * 各类型只带 isTarget 真正用到的字段：
+ * - CODE_BLOCK: id + name
+ * - DATA_SOURCE / DATA_SOURCE_COND: id + 完整 fields（含 type / 嵌套，用于判断数组模板）
+ * - DATA_SOURCE_METHOD: id + 方法名/字段名（不序列化 content）
+ */
+export type TargetDescriptor =
+  | { type: DepTargetType.CODE_BLOCK; id: Id; codeBlock: CodeBlockName }
+  | { type: DepTargetType.DATA_SOURCE; ds: Pick<DataSourceSchema, 'id' | 'fields'> }
+  | { type: DepTargetType.DATA_SOURCE_COND; ds: Pick<DataSourceSchema, 'id' | 'fields'> }
+  | {
+      type: DepTargetType.DATA_SOURCE_METHOD;
+      ds: { id: Id; methods: Array<{ name?: string }>; fields: Array<{ name?: string }> };
+    };
+
 export interface TargetOptions {
   isTarget: IsTarget;
   id: string | number;
@@ -26,6 +50,8 @@ export interface TargetOptions {
   initialDeps?: DepData;
   /** 是否默认收集，默认为true，当值为false时需要传入type参数给collect方法才会被收集 */
   isCollectByDefault?: boolean;
+  /** 可序列化描述，用于在 worker 中重建该 target */
+  descriptor?: TargetDescriptor;
 }
 
 export interface TargetList {

packages/dep/src/utils.ts

@@ -1,5 +1,4 @@
 import {
-  type CodeBlockContent,
   type DataSchema,
   type DataSourceSchema,
   type DepData,
@@ -16,16 +15,17 @@ import {
 } from '@tmagic/utils';
 
 import Target from './Target';
-import { DepTargetType, type TargetList } from './types';
+import { type CodeBlockName, DepTargetType, type TargetDescriptor, type TargetList } from './types';
 
 const INTEGER_REGEXP = /^\d+$/;
 
-export const createCodeBlockTarget = (id: Id, codeBlock: CodeBlockContent, initialDeps: DepData = {}) =>
+export const createCodeBlockTarget = (id: Id, codeBlock: CodeBlockName, initialDeps: DepData = {}) =>
   new Target({
     type: DepTargetType.CODE_BLOCK,
     id,
     initialDeps,
     name: codeBlock.name,
+    descriptor: { type: DepTargetType.CODE_BLOCK, id, codeBlock: { name: codeBlock.name } },
     isTarget: (_key: string | number, value: any) => {
       if (id === value) {
         return true;
@@ -238,6 +238,8 @@ export const createDataSourceTarget = (ds: Pick<DataSourceSchema, 'id' | 'fields
     type: DepTargetType.DATA_SOURCE,
     id: ds.id,
     initialDeps,
+    // isTarget 需要完整 fields 结构（含 type / 嵌套 fields），但不必带上 methods 等无关字段
+    descriptor: { type: DepTargetType.DATA_SOURCE, ds: { id: ds.id, fields: ds.fields || [] } },
     isTarget: (key: string | number, value: any) => isDataSourceTarget(ds, key, value),
   });
 
@@ -246,6 +248,8 @@ export const createDataSourceCondTarget = (ds: Pick<DataSourceSchema, 'id' | 'fi
     type: DepTargetType.DATA_SOURCE_COND,
     id: ds.id,
     initialDeps,
+    // 与 DATA_SOURCE 相同，只序列化 isTarget 所需的 id + fields
+    descriptor: { type: DepTargetType.DATA_SOURCE_COND, ds: { id: ds.id, fields: ds.fields || [] } },
     isTarget: (key: string | number, value: any) => isDataSourceCondTarget(ds, key, value),
   });
 
@@ -257,6 +261,15 @@ export const createDataSourceMethodTarget = (
     type: DepTargetType.DATA_SOURCE_METHOD,
     id: ds.id,
     initialDeps,
+    // isTarget 只用方法名/字段名，不序列化 content 等函数，降低 idle 收集通信成本
+    descriptor: {
+      type: DepTargetType.DATA_SOURCE_METHOD,
+      ds: {
+        id: ds.id,
+        methods: (ds.methods || []).map((method) => ({ name: method.name })),
+        fields: (ds.fields || []).map((field) => ({ name: field.name })),
+      },
+    },
     isTarget: (_key: string | number, value: any) => {
       // 使用data-source-method-select 可以配置出来
       if (!Array.isArray(value)) {
@@ -282,6 +295,31 @@ export const createDataSourceMethodTarget = (
     },
   });
 
+/**
+ * 用可序列化描述重建 target，使依赖收集可以在 worker 等无法传递函数的环境中进行
+ * @param descriptor 由工厂函数写入 target 的描述
+ * @param initialDeps 初始依赖
+ * @returns Target
+ */
+export const createTargetByDescriptor = (descriptor: TargetDescriptor, initialDeps: DepData = {}): Target => {
+  switch (descriptor.type) {
+    case DepTargetType.CODE_BLOCK:
+      return createCodeBlockTarget(descriptor.id, descriptor.codeBlock, initialDeps);
+    case DepTargetType.DATA_SOURCE:
+      return createDataSourceTarget(descriptor.ds, initialDeps);
+    case DepTargetType.DATA_SOURCE_COND:
+      return createDataSourceCondTarget(descriptor.ds, initialDeps);
+    case DepTargetType.DATA_SOURCE_METHOD:
+      // descriptor 只保留名称，对 isTarget 已足够；重建时按同样结构传入
+      return createDataSourceMethodTarget(
+        descriptor.ds as Pick<DataSourceSchema, 'id' | 'methods' | 'fields'>,
+        initialDeps,
+      );
+    default:
+      throw new Error(`unknown target descriptor: ${JSON.stringify(descriptor)}`);
+  }
+};
+
 export const traverseTarget = (
   targetsList: TargetList,
   cb: (target: Target) => void,

packages/dep/tests/utils.spec.ts

@@ -266,6 +266,65 @@ describe('utils', () => {
     expect(t3.isTarget('k', ['ds_1', 'unknown'])).toBe(true);
   });
 
+  test('内置 target 带可序列化描述，可在 worker 中重建', () => {
+    const ds = { id: 'ds_1', fields: [{ name: 'name' }] as DataSchema[] };
+
+    expect(utils.createCodeBlockTarget('code_1', { name: 'fn', content: () => false, params: [] }).descriptor).toEqual({
+      type: DepTargetType.CODE_BLOCK,
+      id: 'code_1',
+      codeBlock: { name: 'fn' },
+    });
+    const dsWithMethods = {
+      ...ds,
+      methods: [{ name: 'load', content: () => undefined, params: [] } as any],
+    };
+    // DATA_SOURCE / COND 只带 id + fields，不透传完整数据源对象
+    expect(utils.createDataSourceTarget(dsWithMethods).descriptor).toEqual({
+      type: DepTargetType.DATA_SOURCE,
+      ds: { id: 'ds_1', fields: ds.fields },
+    });
+    expect(utils.createDataSourceCondTarget(dsWithMethods).descriptor).toEqual({
+      type: DepTargetType.DATA_SOURCE_COND,
+      ds: { id: 'ds_1', fields: ds.fields },
+    });
+    // METHOD 描述只保留名称，不带 content 等函数
+    expect(utils.createDataSourceMethodTarget(dsWithMethods).descriptor).toEqual({
+      type: DepTargetType.DATA_SOURCE_METHOD,
+      ds: { id: 'ds_1', methods: [{ name: 'load' }], fields: [{ name: 'name' }] },
+    });
+    // 自定义 target 无法序列化 isTarget，因此没有描述
+    expect(new Target({ id: 'custom', isTarget: () => true }).descriptor).toBeUndefined();
+  });
+
+  test('createTargetByDescriptor 用描述重建出等价的 target', () => {
+    const ds = { id: 'ds_1', fields: [{ name: 'name' }] as DataSchema[] };
+
+    const codeBlockTarget = utils.createTargetByDescriptor({
+      type: DepTargetType.CODE_BLOCK,
+      id: 'code_1',
+      codeBlock: { name: 'fn' },
+    });
+    expect(codeBlockTarget.type).toBe(DepTargetType.CODE_BLOCK);
+    expect(codeBlockTarget.name).toBe('fn');
+    expect(codeBlockTarget.isTarget('created', 'code_1')).toBe(true);
+
+    const dsTarget = utils.createTargetByDescriptor({ type: DepTargetType.DATA_SOURCE, ds });
+    expect(dsTarget.type).toBe(DepTargetType.DATA_SOURCE);
+    expect(dsTarget.isTarget('text', '${ds_1.name}')).toBe(true);
+
+    const condTarget = utils.createTargetByDescriptor({ type: DepTargetType.DATA_SOURCE_COND, ds });
+    expect(condTarget.isTarget(`${NODE_CONDS_KEY}_x`, ['ds_1', 'name'])).toBe(true);
+
+    const methodTarget = utils.createTargetByDescriptor(
+      { type: DepTargetType.DATA_SOURCE_METHOD, ds: { ...ds, methods: [] } },
+      { n1: { name: 'n1', keys: ['k'] } },
+    );
+    expect(methodTarget.isTarget('k', ['ds_1', 'load'])).toBe(true);
+    expect(methodTarget.deps.n1.keys).toEqual(['k']);
+
+    expect(() => utils.createTargetByDescriptor({ type: 'unknown' } as any)).toThrow();
+  });
+
   test('traverseTarget 遍历所有 / 指定 type', () => {
     const t1 = new Target({ id: '1', isTarget: () => true, type: 'a' });
     const t2 = new Target({ id: '2', isTarget: () => true, type: 'b' });

packages/design/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.14",
+  "version": "1.8.0-beta.27",
   "name": "@tmagic/design",
   "type": "module",
   "sideEffects": [
@@ -16,6 +16,11 @@
       "import": "./dist/es/index.js",
       "require": "./dist/tmagic-design.umd.cjs"
     },
+    "./headless": {
+      "types": "./types/headless.d.ts",
+      "import": "./dist/es/headless.js",
+      "require": "./dist/tmagic-design-headless.umd.cjs"
+    },
     "./*": "./*"
   },
   "files": [

packages/design/src/Card.vue

@@ -1,5 +1,9 @@
 <template>
-  <component :is="uiComponent" :class="['tmagic-design-card', { 'tmagic-design-card--flat': isFlat }]" v-bind="uiProps">
+  <component
+    :is="uiComponent"
+    :class="['tmagic-design-card', { 'tmagic-design-card--flat': isFlat, 'm-flat-hide-body': isHideBody }]"
+    v-bind="uiProps"
+  >
     <template #header v-if="$slots.header">
       <slot name="header" class="header"></slot>
     </template>
@@ -30,7 +34,7 @@ const uiComponent = ui?.component || 'el-card';
 // 当祖先 `<MEditor>` / `<MForm>` 的 theme 是 `magic-admin` 时，整套设计语言默认走「无卡片感」，
 // 因此这里自动等价于 `flat=true`；调用方仍可显式传 `flat` 强制开启。
 const isFlat = computed(() => !!props.flat || isGlobalFlat.value);
-
+const isHideBody = computed(() => isFlat.value && props.bodyStyle?.display === 'none');
 // 把 `flat` 从转发给底层 UI 库（el-card / t-card 等）的 props 中剥离：
 // 它仅作用于本组件的视觉修饰类，不需要也不应该作为属性落到底层组件 / DOM 上。
 const uiProps = computed<CardProps>(() => {

packages/design/src/FormItem.vue

@@ -47,12 +47,12 @@ const uiComponent = ui?.component || 'el-form-item';
 
 const adapterType = getDesignConfig('adapterType');
 
-const formInline = inject<boolean>('formInline');
-
+const formInline = inject<boolean>('formInline', false);
+const formInRow = inject<boolean>('isInRow', false);
 const uiProps = computed<FormItemProps>(() => {
   const { extra, extraTips, ...rest } = ui?.props(props) || props;
   if (isGlobalFlat.value && rest.labelPosition === undefined) {
-    return { ...rest, labelPosition: formInline ? 'right' : 'left' };
+    return { ...rest, labelPosition: formInline || formInRow ? 'right' : 'left' };
   }
   return rest;
 });

packages/design/src/Tooltip.vue

@@ -1,5 +1,11 @@
 <template>
-  <component class="tmagic-design-tooltip" :is="uiComponent" v-bind="uiProps">
+  <!-- ElTooltip 的 ElOnlyChild 要求默认插槽至少有一个真实节点；v-if 为 false 时插槽是 Comment，会报 no valid child node found。 -->
+  <component
+    v-if="isLegitTooltipTrigger($slots.default?.())"
+    class="tmagic-design-tooltip"
+    :is="uiComponent"
+    v-bind="uiProps"
+  >
     <template #content>
       <slot name="content"></slot>
     </template>
@@ -8,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { Comment, computed, Fragment, Text, type VNode } from 'vue';
 
 import { getDesignConfig } from './config';
 import type { TooltipProps } from './types';
@@ -24,4 +30,30 @@ const ui = getDesignConfig('components')?.tooltip;
 const uiComponent = ui?.component || 'el-tooltip';
 
 const uiProps = computed<TooltipProps>(() => ui?.props(props) || props);
+
+/** 与 Element Plus `findFirstLegitChild` 对齐：Comment / 空文本不算合法 trigger。 */
+const isLegitTooltipTrigger = (nodes: VNode[] | undefined): boolean => {
+  if (!nodes?.length) return false;
+
+  for (const child of nodes) {
+    if (!child) continue;
+
+    switch (child.type) {
+      case Comment:
+        continue;
+      case Text: {
+        const text = typeof child.children === 'string' ? child.children.trim() : '';
+        if (text) return true;
+        continue;
+      }
+      case Fragment:
+        if (isLegitTooltipTrigger(child.children as VNode[])) return true;
+        continue;
+      default:
+        return true;
+    }
+  }
+
+  return false;
+};
 </script>

packages/design/src/headless.ts

@@ -0,0 +1,35 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview `@tmagic/design/headless`：不含组件与样式的那部分 design 能力。
+ *
+ * 供 `@tmagic/form/headless` 这类无渲染链路引用，避免为了读一个全局配置
+ * 把整个组件库拉进包里。ES 产物保留模块结构，这里与 `@tmagic/design`
+ * 引用的是同一个 `config` 模块，`setDesignConfig` 的写入两侧都能读到。
+ *
+ * @module @tmagic/design/headless
+ */
+
+export { getDesignConfig, setDesignConfig } from './config';
+export {
+  appendValidateSuggestion,
+  stripValidateSuggestion,
+  VALIDATE_SUGGESTION_SEPARATOR,
+} from './formValidateMessage';
+export type { DesignPluginOptions } from './types';

packages/design/src/theme/card.scss

@@ -11,7 +11,11 @@
   border-right: 0;
   border-radius: 0;
   border-bottom: 0;
-
+  &.m-flat-hide-body {
+    .el-card__header {
+      border-bottom: 0 !important;
+    }
+  }
   &.m-fields-group-list-item {
     margin-bottom: 0;
   }
@@ -29,6 +33,10 @@
     }
   }
 
+  .m-fields-group-list-footer {
+    margin-bottom: 4px;
+    margin-top: 4px;
+  }
   .el-card__body {
     padding: 0 16px 0 16px;
     // 这里每个form-item应该要有一个16px间距，但是除了tbody中的form-item
@@ -61,7 +69,7 @@
     }
     > .el-card__body {
       background-color: #fff;
-      padding-top: 16px;
+      padding-top: 8px;
     }
   }
 }

packages/design/src/theme/colorPicker.scss

@@ -2,3 +2,7 @@
   margin-left: 8px;
   width: calc(var(--el-input-width, 100%) - 40px);
 }
+
+.tmagic-design-color-picker {
+  flex: 0 0 auto;
+}

packages/editor/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.14",
+  "version": "1.8.0-beta.27",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -17,6 +17,11 @@
       "import": "./dist/es/index.js",
       "require": "./dist/tmagic-editor.umd.cjs"
     },
+    "./headless": {
+      "types": "./types/headless.d.ts",
+      "import": "./dist/es/headless.js",
+      "require": "./dist/tmagic-editor-headless.umd.cjs"
+    },
     "./dist/style.css": {
       "import": "./dist/style.css",
       "require": "./dist/style.css"
@@ -59,17 +64,17 @@
     "events": "^3.3.0",
     "gesto": "^1.19.4",
     "keycon": "^1.4.0",
-    "lodash-es": "^4.17.21",
+    "lodash-es": "^4.18.1",
     "moveable": "^0.53.0",
-    "serialize-javascript": "^7.0.0",
-    "sortablejs": "^1.15.6"
+    "serialize-javascript": "^7.0.7",
+    "sortablejs": "^1.15.7"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
-    "@types/lodash-es": "^4.17.4",
+    "@types/lodash-es": "^4.17.12",
     "@types/serialize-javascript": "^5.0.4",
     "@types/sortablejs": "^1.15.9",
-    "@vue/test-utils": "^2.4.6"
+    "@vue/test-utils": "^2.4.11"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:*",

packages/editor/src/Editor.vue

@@ -101,7 +101,6 @@
     <template #props-panel>
       <slot name="props-panel">
         <PropsPanel
-          :extend-state="extendFormState"
           :disabled-show-src="disabledShowSrc"
           @mounted="propsPanelMountedHandler"
           @unmounted="propsPanelUnmountedHandler"
@@ -136,11 +135,13 @@
 <script lang="ts" setup>
 import { EventEmitter } from 'events';
 
-import { computed, provide, ref } from 'vue';
+import { computed, provide } from 'vue';
 
 import type { MApp } from '@tmagic/core';
 import { M_THEME_KEY } from '@tmagic/design';
+import { FORM_CONTEXT_KEY } from '@tmagic/form';
 
+import { useEditorFormContext } from './hooks/use-form-context';
 import Framework from './layouts/Framework.vue';
 import TMagicNavMenu from './layouts/NavMenu.vue';
 import FormPanel from './layouts/props-panel/FormPanel.vue';
@@ -218,6 +219,7 @@ const stageOptions: StageOptions = {
   containerHighlightClassName: props.containerHighlightClassName,
   containerHighlightDuration: props.containerHighlightDuration,
   containerHighlightType: props.containerHighlightType,
+  containerHighlightAddOnly: props.containerHighlightAddOnly,
   disabledDragStart: props.disabledDragStart,
   renderType: props.renderType,
   guidesOptions: props.guidesOptions,
@@ -229,8 +231,6 @@ const stageOptions: StageOptions = {
 
 stageOverlayService.set('stageOptions', stageOptions);
 
-const propsPanelRef = ref<InstanceType<typeof FormPanel> | null>(null);
-
 provide('services', services);
 
 provide('codeOptions', props.codeOptions);
@@ -238,11 +238,16 @@ provide('stageOptions', stageOptions);
 /** 是否启用「属性配置表单校验」联动能力，供 PropsPanel / FormPanel 判断校验失败时是否仍更新节点并记录错误 */
 provide(ENABLE_PROPS_FORM_VALIDATE, props.enablePropsFormValidate ?? false);
 /**
- * 把顶层 `extendFormState` 提供给非 PropsPanel 链路上的组件使用（例如历史差异对话框 HistoryDiffDialog
- * 内部的 CompareForm）。这样所有依赖业务上下文的表单 filterFunction 都能拿到一致的扩展状态，
- * 与 PropsPanel 通过 `:extend-state` 显式传入的方式保持等价。
+ * 编辑器注入给整棵表单树的业务上下文（`services` / `stage`），属性面板、对比表单、
+ * 侧边栏里的嵌套 MForm 都通过 inject 自动继承。
+ *
+ * 业务方要追加自己的字段，在 `<MEditor>` 外层再 `provide(FORM_CONTEXT_KEY, computed(...))`
+ * 即可，配置回调统一通过 `mForm.xxx` 读取。
  */
-provide('extendFormState', props.extendFormState);
+provide(
+  FORM_CONTEXT_KEY,
+  useEditorFormContext(() => services),
+);
 
 // 用 computed 包一层再 provide，否则传下去的是 provide 那一刻的值快照，
 // props.isLargeStageContainer 后续变化不会同步到子孙（如 @tmagic/design/ColorPicker）。
@@ -252,12 +257,6 @@ provide(
   'isLargeStageContainer',
   computed(() => props.isLargeStageContainer),
 );
-/**
- * 提供 PropsPanel 主属性表单的 formState getter，供历史差异弹窗复用，
- * 让 CompareForm 与 PropsPanel 的 filterFunction 上下文保持一致。
- */
-provide('getPropsPanelFormState', () => propsPanelRef.value?.configForm?.formState);
-
 /**
  * 把历史记录面板的自定义扩展 tab 提供给深层的 HistoryListPanel（它挂在 NavMenu 中，
  * 以 markRaw component 形式渲染，无法直接通过 props 透传）。业务方可借此在历史记录
@@ -278,11 +277,9 @@ provide(
 );
 
 const propsPanelMountedHandler = (e: InstanceType<typeof FormPanel>) => {
-  propsPanelRef.value = e;
   emit('props-panel-mounted', e);
 };
 const propsPanelUnmountedHandler = () => {
-  propsPanelRef.value = null;
   emit('props-panel-unmounted');
 };
 

packages/editor/src/components/CodeParams.vue

@@ -15,7 +15,13 @@
 <script lang="ts" setup>
 import { computed, useTemplateRef } from 'vue';
 
-import { type ContainerChangeEventData, type FormItemConfig, type FormValue, MForm } from '@tmagic/form';
+import {
+  type ContainerChangeEventData,
+  defineFormItem,
+  type FormItemConfig,
+  type FormValue,
+  MForm,
+} from '@tmagic/form';
 
 import type { CodeParamStatement } from '@editor/type';
 import { error } from '@editor/utils';
@@ -41,13 +47,13 @@ const emit = defineEmits(['change']);
 const formRef = useTemplateRef<InstanceType<typeof MForm>>('form');
 
 const getFormConfig = (items: FormItemConfig[] = []) => [
-  {
+  defineFormItem({
     type: 'fieldset',
     items,
     legend: '参数',
-    labelWidth: '120px',
+    labelPosition: 'top',
     name: props.name,
-  },
+  }),
 ];
 
 const codeParamsConfig = computed(() =>

packages/editor/src/components/CompareForm.vue

@@ -10,7 +10,7 @@
       :is-compare="true"
       :disabled="true"
       :label-width="labelWidth"
-      :extend-state="mergedExtendState"
+      :context="formContext"
       :show-diff="showDiff"
       :self-diff-field-types="selfDiffFieldTypes"
       :size="size"
@@ -47,7 +47,7 @@ const props = withDefaults(
   },
 );
 
-const { config, currentValues, wrapperStyle, mergedExtendState, loadConfig, formRef, normalizeCodeBlockValue } =
+const { config, currentValues, wrapperStyle, formContext, loadConfig, formRef, normalizeCodeBlockValue } =
   useCompareForm(props);
 
 const lastValuesProcessed = computed<FormValue>(() => {
@@ -60,9 +60,8 @@ const lastValuesProcessed = computed<FormValue>(() => {
 /**
  * `code-select` 字段在历史数据中存在两种"语义为空"的形态：
  * - 字符串 `''`（旧数据 / 用户从未配置过钩子）；
- * - `{ hookType: HookType.CODE, hookData: [] }`（CodeSelect.vue 在挂载时
- *   写入的默认结构，参见 packages/editor/src/fields/CodeSelect.vue 中
- *   `props.model[props.name] = { hookType: HookType.CODE, hookData: [] }`）。
+ * - `{ hookType: HookType.CODE, hookData: [] }`（`normalizeCodeSelectValue`
+ *   写入的默认结构）。
  *
  * 直接 `isEqual` 会把两者判为不等，从而在历史对比里对每个未配置过钩子的组件
  * 都展示一份"差异"，体验很糟糕。这里把它们视为相等，跳过对比。

packages/editor/src/components/ContentMenu.vue

@@ -128,20 +128,42 @@ const outsideClickHideHandler = (e: MouseEvent) => {
   hide();
 };
 
-const setPosition = (e: { clientY: number; clientX: number }) => {
-  const menuHeight = menuEl.value?.clientHeight || 0;
+// 根据菜单实际尺寸修正位置，避免超出可视范围
+const fixPosition = () => {
+  const menu = menuEl.value;
+  if (!menu || !visible.value) return;
 
-  let top = e.clientY;
-  if (menuHeight + e.clientY > document.body.clientHeight) {
-    top = document.body.clientHeight - menuHeight;
+  const menuHeight = menu.clientHeight;
+  const menuWidth = menu.clientWidth;
+
+  let { top, left } = menuPosition.value;
+
+  if (top + menuHeight > document.body.clientHeight) {
+    top = Math.max(0, document.body.clientHeight - menuHeight);
   }
 
+  if (left + menuWidth > document.body.clientWidth) {
+    left = Math.max(0, document.body.clientWidth - menuWidth);
+  }
+
+  if (top !== menuPosition.value.top || left !== menuPosition.value.left) {
+    menuPosition.value = { top, left };
+  }
+};
+
+const setPosition = (e: { clientY: number; clientX: number }) => {
   menuPosition.value = {
-    top,
+    top: e.clientY,
     left: e.clientX,
   };
+  fixPosition();
 };
 
+// 菜单大小动态变化（如菜单项更新）后重新修正位置
+const resizeObserver = new ResizeObserver(() => {
+  fixPosition();
+});
+
 const show = (e?: { clientY: number; clientX: number }) => {
   visible.value = true;
 
@@ -186,12 +208,18 @@ const mouseenterHandler = () => {
 };
 
 onMounted(() => {
+  if (menuEl.value) {
+    resizeObserver.observe(menuEl.value);
+  }
+
   if (props.isSubMenu) return;
 
   globalThis.addEventListener('mousedown', outsideClickHideHandler, true);
 });
 
 onBeforeUnmount(() => {
+  resizeObserver.disconnect();
+
   if (props.isSubMenu) return;
 
   globalThis.removeEventListener('mousedown', outsideClickHideHandler, true);

packages/editor/src/components/ViewForm.vue

@@ -8,7 +8,7 @@
       :init-values="currentValues"
       :disabled="disabled"
       :label-width="labelWidth"
-      :extend-state="mergedExtendState"
+      :context="formContext"
       :size="size"
     ></MForm>
   </div>
@@ -37,11 +37,10 @@ const props = withDefaults(
     category: 'node',
     labelWidth: '120px',
     disabled: true,
-    // extendState 的默认值由 useCompareForm 内部兜底（props.extendState ?? ...），此处无需重复提供
   },
 );
 
-const { config, currentValues, wrapperStyle, mergedExtendState, loadConfig, formRef } = useCompareForm(props);
+const { config, currentValues, wrapperStyle, formContext, loadConfig, formRef } = useCompareForm(props);
 
 defineExpose<{
   form: ShallowRef<InstanceType<typeof MForm> | null>;

packages/editor/src/editorProps.ts

@@ -1,7 +1,7 @@
 import type { InjectionKey } from 'vue';
 
 import type { DataSourceSchema, EventOption, Id, MApp, MNode, MPage, MPageFragment } from '@tmagic/core';
-import type { FormConfig, FormState } from '@tmagic/form';
+import type { FormConfig } from '@tmagic/form';
 import StageCore, {
   CONTAINER_HIGHLIGHT_CLASS_NAME,
   ContainerHighlightType,
@@ -82,6 +82,11 @@ export interface EditorProps {
   containerHighlightDuration?: number;
   /** 拖入画布中容器时，识别容器的操作类型 */
   containerHighlightType?: ContainerHighlightType;
+  /**
+   * 是否仅在新增组件（从组件列表拖入新组件）时才启用识别容器，
+   * 开启后在画布中拖动已有组件不会识别容器，默认 false
+   */
+  containerHighlightAddOnly?: boolean;
   /** 画布大小 */
   stageRect?: StageRect;
   /** monaco editor 的配置 */
@@ -144,7 +149,6 @@ export interface EditorProps {
   beforeDblclick?: (event: MouseEvent) => Promise<boolean | void> | boolean | void;
   /** 组件树节点双击前的钩子函数，返回 false 则阻止默认的双击行为 */
   beforeLayerNodeDblclick?: (event: MouseEvent, data: TreeNodeData) => Promise<boolean | void> | boolean | void;
-  extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   /** 历史记录面板的自定义扩展 tab，追加在内置的页面/数据源/代码块 tab 之后 */
   historyListExtraTabs?: HistoryListExtraTab[];
   /** 页面顺序拖拽配置参数 */
@@ -163,6 +167,7 @@ export const defaultEditorProps = {
   containerHighlightClassName: CONTAINER_HIGHLIGHT_CLASS_NAME,
   containerHighlightDuration: 800,
   containerHighlightType: ContainerHighlightType.DEFAULT,
+  containerHighlightAddOnly: false,
   disabledShowSrc: false,
   disabledDataSource: false,
   disabledCodeBlock: false,

packages/editor/src/fields/Code.vue

@@ -19,7 +19,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
-import type { CodeConfig, FieldProps } from '@tmagic/form';
+import { type CodeConfig, type FieldProps } from '@tmagic/form';
 
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
 

packages/editor/src/fields/CodeSelect.vue

@@ -1,36 +1,29 @@
 <template>
   <div class="m-fields-code-select" :class="config.className">
-    <TMagicCard :flat="config.flat">
-      <MContainer
-        :config="codeConfig"
-        :size="size"
-        class="code-select-content"
-        :prop="prop"
-        :disabled="disabled"
-        :is-compare="isCompareMode"
-        :last-values="lastValues?.[name]"
-        :model="model[name]"
-        @change="changeHandler"
-      >
-      </MContainer>
-      <TMagicButton class="create-button fullWidth" :icon="Plus" :size="size" :disabled="disabled" @click="newHandler()"
-        >添加{{ config.text }}</TMagicButton
-      >
-    </TMagicCard>
+    <MContainer
+      :config="codeConfig"
+      :size="size"
+      class="code-select-content"
+      :prop="prop"
+      :disabled="disabled"
+      :is-compare="isCompareMode"
+      :last-values="lastValues?.[name]"
+      :model="model[name]"
+      :label-position="config.labelPosition"
+      :label-width="config.labelWidth"
+      @change="changeHandler"
+    >
+    </MContainer>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
-import { Plus } from '@element-plus/icons-vue';
-import { isEmpty } from 'lodash-es';
 
-import { HookCodeType, HookType } from '@tmagic/core';
-import { TMagicButton, TMagicCard } from '@tmagic/design';
-import type { CodeSelectConfig, ContainerChangeEventData, FieldProps, GroupListConfig } from '@tmagic/form';
+import type { CodeSelectConfig, ContainerChangeEventData, FieldProps } from '@tmagic/form';
 import { MContainer } from '@tmagic/form';
 
-import { useServices } from '@editor/hooks/use-services';
+import { createCodeSelectConfig, normalizeCodeSelectValue } from '@editor/fields/configs/codeSelect';
 
 defineOptions({
   name: 'MFieldsCodeSelect',
@@ -40,8 +33,6 @@ const emit = defineEmits<{
   change: [v: any, eventData: ContainerChangeEventData];
 }>();
 
-const { dataSourceService, codeBlockService } = useServices();
-
 const props = withDefaults(defineProps<FieldProps<CodeSelectConfig>>(), {});
 
 /**
@@ -58,101 +49,14 @@ const props = withDefaults(defineProps<FieldProps<CodeSelectConfig>>(), {});
  * 仅当存在历史值时才启用对比，避免 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<GroupListConfig>(() => ({
-  type: 'group-list',
-  name: 'hookData',
-  enableToggleMode: false,
-  expandAll: true,
-  addable: () => false,
-  title: (mForm, { model, index }: any) => {
-    if (model.codeType === HookCodeType.DATA_SOURCE_METHOD) {
-      if (Array.isArray(model.codeId)) {
-        if (model.codeId.length < 2) {
-          return index;
-        }
 
-        const ds = dataSourceService.getDataSourceById(model.codeId[0]);
-        return `${ds?.title} / ${model.codeId[1]}`;
-      }
-
-      return Array.isArray(model.codeId) ? model.codeId.join('/') : index;
-    }
-
-    const codeContent = codeBlockService.getCodeContentById(model.codeId);
-
-    if (codeContent) {
-      return codeContent.name;
-    }
-
-    return model.codeId || index;
-  },
-  titlePrefix: props.config.name === undefined ? undefined : 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: HookCodeType, { 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'),
-    },
-  ],
-}));
+const codeConfig = computed(() => createCodeSelectConfig(props.config));
 
+// 挂载时的归一化由 applyMountValueEffects → code-select 的 effect 完成，这里只兜运行期被置空
 watch(
   () => props.model[props.name],
-  (value) => {
-    // 兼容旧的数据结构
-    if (isEmpty(value)) {
-      // 空值或者空数组
-      props.model[props.name] = {
-        hookType: HookType.CODE,
-        hookData: [],
-      };
-    }
-  },
-  {
-    immediate: true,
+  () => {
+    normalizeCodeSelectValue(props.model, props.name);
   },
 );
 

packages/editor/src/fields/CodeSelectCol.vue

@@ -84,7 +84,7 @@ defineOptions({
 
 const mForm = inject<FormState | undefined>('mForm');
 const { codeBlockService, uiService } = useServices();
-const eventBus = inject<EventBus>('eventBus');
+const eventBus = inject<EventBus | null>('eventBus', null);
 const emit = defineEmits<{
   change: [v: any, eventData: ContainerChangeEventData];
 }>();

packages/editor/src/fields/CondOpSelect.vue

@@ -31,6 +31,7 @@ import { computed } from 'vue';
 
 import { getDesignConfig, TMagicSelect } from '@tmagic/design';
 import type { CondOpSelectConfig, FieldProps } from '@tmagic/form';
+import { removeDataSourceFieldPrefix } from '@tmagic/utils';
 
 import { useServices } from '@editor/hooks/use-services';
 import { getCondOpOptionsByFieldType, getFieldType } from '@editor/utils';
@@ -50,8 +51,8 @@ const props = defineProps<FieldProps<CondOpSelectConfig>>();
 const optionComponent = getDesignConfig('components')?.option;
 
 const options = computed(() => {
-  const [id, ...fieldNames] = [...(props.config.parentFields || []), ...props.model.field];
-  const ds = dataSourceService.getDataSourceById(id);
+  const [id, ...fieldNames] = [...(props.config.parentFields || []), ...(props.model.field || [])];
+  const ds = id ? dataSourceService.getDataSourceById(removeDataSourceFieldPrefix(id)) : undefined;
   const type = getFieldType(ds, fieldNames);
   return getCondOpOptionsByFieldType(type);
 });

packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue

@@ -124,7 +124,7 @@ const optionComponent = getDesignConfig('components')?.option;
 
 const { dataSourceService, uiService } = useServices();
 const mForm = inject<FormState | undefined>('mForm');
-const eventBus = inject<EventBus>('eventBus');
+const eventBus = inject<EventBus | null>('eventBus', null);
 
 const allDataSources = computed(() => dataSourceService.get('dataSources') || []);
 

packages/editor/src/fields/DataSourceFieldSelect/Index.vue

@@ -141,7 +141,10 @@ const checkStrictly = computed(() => {
   if (typeof props.config.checkStrictly !== 'function') {
     value = props.config.checkStrictly;
   } else {
-    const dsId = removeDataSourceFieldPrefix(props.model[0]);
+    const fieldValue = props.model[props.name];
+    // 指定了 dataSourceId 时取值里只有字段名，数据源 id 只能取自 config
+    const rawDsId = props.config.dataSourceId ?? (Array.isArray(fieldValue) ? fieldValue[0] : fieldValue);
+    const dsId = removeDataSourceFieldPrefix(`${rawDsId}`);
     const dataSource = dataSources.value.find((ds) => ds.id === dsId);
 
     value = props.config.checkStrictly(mForm, {

packages/editor/src/fields/DataSourceFields.vue

@@ -89,7 +89,6 @@ const emit = defineEmits<{
 
 const { uiService } = useServices();
 const mForm = inject<FormState | undefined>('mForm');
-
 /** 对比模式下隐藏新增/编辑/删除等操作按钮，仅保留只读展示。 */
 const isCompare = computed(() => Boolean(mForm?.isCompare));
 

packages/editor/src/fields/DataSourceMethodSelect.vue

@@ -67,7 +67,7 @@ defineOptions({
 
 const { dataSourceService, uiService } = useServices();
 const mForm = inject<FormState | undefined>('mForm');
-const eventBus = inject<EventBus>('eventBus');
+const eventBus = inject<EventBus | null>('eventBus', null);
 
 const emit = defineEmits(['change']);
 

packages/editor/src/fields/DataSourceMethods.vue

@@ -26,7 +26,12 @@ import { cloneDeep } from 'lodash-es';
 
 import type { CodeBlockContent } from '@tmagic/core';
 import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
-import type { ContainerChangeEventData, DataSourceMethodsConfig, FieldProps, FormState } from '@tmagic/form';
+import {
+  type ContainerChangeEventData,
+  type DataSourceMethodsConfig,
+  type FieldProps,
+  type FormState,
+} from '@tmagic/form';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
@@ -43,7 +48,6 @@ const props = withDefaults(defineProps<FieldProps<DataSourceMethodsConfig>>(), {
 const emit = defineEmits(['change']);
 
 const mForm = inject<FormState | undefined>('mForm');
-
 /** 对比模式下隐藏新增/编辑/删除等操作按钮，仅保留只读展示。 */
 const isCompare = computed(() => Boolean(mForm?.isCompare));
 

packages/editor/src/fields/DataSourceSelect.vue

@@ -50,7 +50,7 @@ const props = withDefaults(defineProps<FieldProps<DataSourceSelect>>(), {
 
 const mForm = inject<FormState | undefined>('mForm');
 const { dataSourceService, uiService } = useServices();
-const eventBus = inject<EventBus>('eventBus');
+const eventBus = inject<EventBus | null>('eventBus', null);
 
 const dataSources = computed(() => dataSourceService.get('dataSources'));
 

packages/editor/src/fields/DisplayConds.vue

@@ -1,15 +1,17 @@
 <template>
-  <MGroupList
-    style="width: 100%"
-    :config="config"
-    :name="name"
-    :disabled="disabled"
-    :model="model"
-    :last-values="lastValues"
-    :prop="prop"
-    :size="size"
-    @change="changeHandler"
-  ></MGroupList>
+  <div class="m-fields-display-conds">
+    <MGroupList
+      :config="config"
+      :name="name"
+      :disabled="disabled"
+      :model="model"
+      :last-values="lastValues"
+      :is-compare="isCompareMode"
+      :prop="prop"
+      :size="size"
+      @change="changeHandler"
+    ></MGroupList>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -22,170 +24,32 @@ import {
   type FieldProps,
   filterFunction,
   type FormState,
-  type GroupListConfig,
   MGroupList,
 } from '@tmagic/form';
 
-import { useServices } from '@editor/hooks/use-services';
-import { getCascaderOptionsFromFields, getFieldType } from '@editor/utils';
+import { createDisplayCondsConfig } from '@editor/fields/configs/displayConds';
 
 defineOptions({
   name: 'm-fields-display-conds',
 });
 
 const emit = defineEmits<{
-  change: [value: DisplayCond[], eventData?: ContainerChangeEventData];
+  change: [value: DisplayCond | DisplayCond[], eventData?: ContainerChangeEventData];
 }>();
 
 const props = withDefaults(defineProps<FieldProps<DisplayCondsConfig>>(), {
   disabled: false,
 });
 
-const { dataSourceService } = useServices();
 const mForm = inject<FormState | undefined>('mForm');
 
 const parentFields = computed(() => filterFunction<string[]>(mForm, props.config.parentFields, props) || []);
 
-const fieldOnChange = (_formState: FormState | undefined, v: string[], { model }: { model: Record<string, any> }) => {
-  const [id, ...fieldNames] = [...parentFields.value, ...v];
-  const ds = dataSourceService.getDataSourceById(id);
-  const type = getFieldType(ds, fieldNames);
-  if (type === 'number') {
-    model.value = Number(model.value);
-  } else if (type === 'boolean') {
-    model.value = Boolean(model.value);
-  } else if (type === 'null') {
-    model.value = null;
-  } else {
-    model.value = `${model.value}`;
-  }
-  return v;
-};
+const config = computed(() => createDisplayCondsConfig(props.config, props.name, parentFields.value));
 
-const config = computed<GroupListConfig>(() => ({
-  type: 'groupList',
-  name: props.name,
-  titlePrefix: props.config.titlePrefix,
-  expandAll: true,
-  enableToggleMode: false,
-  flat: props.config.flat,
-  items: [
-    {
-      type: 'table',
-      name: 'cond',
-      operateColWidth: props.config.operateColWidth,
-      enableToggleMode: false,
-      fixed: props.config.fixed,
-      flat: props.config.flat,
-      items: [
-        parentFields.value.length
-          ? {
-              type: 'cascader',
-              options: () => {
-                const [dsId, ...keys] = parentFields.value;
-                const ds = dataSourceService.getDataSourceById(dsId);
-                if (!ds) {
-                  return [];
-                }
-
-                let fields = ds.fields || [];
-                keys.forEach((key) => {
-                  const field = fields.find((f) => f.name === key);
-                  fields = field?.fields || [];
-                });
-
-                return getCascaderOptionsFromFields(fields, ['string', 'number', 'boolean', 'any']);
-              },
-              name: 'field',
-              value: 'key',
-              label: '字段',
-              checkStrictly: false,
-              onChange: fieldOnChange,
-              defaultValue: () => [],
-              rules: [
-                { required: true, trigger: 'blur', message: '请选择字段' },
-                { typeMatch: true, trigger: 'change' },
-              ],
-            }
-          : {
-              type: 'data-source-field-select',
-              name: 'field',
-              value: 'key',
-              label: '字段',
-              checkStrictly: false,
-              dataSourceFieldType: ['string', 'number', 'boolean', 'any'],
-              onChange: fieldOnChange,
-              defaultValue: () => [],
-              rules: [
-                { required: true, trigger: 'blur', message: '请选择字段' },
-                { typeMatch: true, trigger: 'change' },
-              ],
-            },
-        {
-          type: 'cond-op-select',
-          parentFields: parentFields.value,
-          label: '条件',
-          width: 140,
-          name: 'op',
-          rules: [
-            { required: true, trigger: 'blur', message: '请选择条件' },
-            { typeMatch: true, trigger: 'change' },
-          ],
-        },
-        {
-          label: '值',
-          width: 160,
-          items: [
-            {
-              name: 'value',
-              type: (_mForm, { model }) => {
-                const [id, ...fieldNames] = [...parentFields.value, ...model.field];
-                const ds = dataSourceService.getDataSourceById(id);
-                const type = getFieldType(ds, fieldNames);
-
-                if (type === 'number') {
-                  return 'number';
-                }
-
-                if (type === 'boolean') {
-                  return 'select';
-                }
-
-                if (type === 'null') {
-                  return 'display';
-                }
-
-                return 'text';
-              },
-              options: [
-                { text: 'true', value: true },
-                { text: 'false', value: false },
-              ],
-              display: (_mForm, { model }) => !['between', 'not_between'].includes(model.op),
-              displayText: (_mForm: FormState | undefined, { model }: any) => {
-                if (model.value === null) {
-                  return 'null';
-                }
-                return model.value;
-              },
-            },
-            {
-              name: 'range',
-              type: 'number-range',
-              display: (vm, { model }) => ['between', 'not_between'].includes(model.op),
-            },
-          ],
-        },
-      ],
-    },
-  ],
-}));
+const isCompareMode = computed(() => Boolean(props.isCompare && props.lastValues));
 
 const changeHandler = (v: DisplayCond[], eventData?: ContainerChangeEventData) => {
-  if (!Array.isArray(props.model[props.name])) {
-    props.model[props.name] = [];
-  }
-
   emit('change', v, eventData);
 };
 </script>

packages/editor/src/fields/EventSelect.vue

@@ -15,101 +15,50 @@
     <div v-else class="fullWidth event-select-container">
       <div class="event-select-header">
         <div class="event-select-title">事件配置</div>
-        <TMagicButton
-          v-if="!isCompareMode && displayList.length > 0"
-          class="create-button"
-          text
-          type="primary"
-          :icon="Plus"
-          :size="size"
-          :disabled="disabled"
-          @click="addEvent()"
-          >添加事件</TMagicButton
-        >
       </div>
-      <MPanel
-        v-for="entry in displayList"
-        :key="entry.index"
+      <MGroupList
+        :config="eventConfig"
+        :name="name"
         :disabled="disabled"
-        :size="size"
-        :prop="`${prop}.${entry.index}`"
-        :config="actionsConfig"
-        :model="entry.cardItem"
-        :last-values="entry.lastCardItem"
+        :model="model"
+        :last-values="lastValues"
         :is-compare="isCompareMode"
-        :hide-expand="true"
-        :label-width="config.labelWidth || '100px'"
+        :prop="prop"
+        :size="size"
         @change="onChangeHandler"
       >
-        <template #header>
+        <template #title="{ model: itemModel, lastValues: itemLastValues, prop: itemProp }">
           <div class="event-item-header">
-            <div class="event-item-title">事件{{ Number(entry.index) + 1 }}</div>
             <MFormContainer
               class="fullWidth"
               :config="eventNameConfig"
-              :model="entry.cardItem"
-              :last-values="entry.lastCardItem"
+              :model="itemModel"
+              :last-values="itemLastValues"
               :is-compare="isCompareMode"
               :disabled="disabled"
               :size="size"
-              :prop="`${prop}.${entry.index}`"
-              @change="eventNameChangeHandler"
+              :prop="itemProp"
+              @change="onChangeHandler"
             ></MFormContainer>
-            <TMagicButton
-              class="event-item-delete-button"
-              v-if="!isCompareMode"
-              link
-              :icon="Delete"
-              :disabled="disabled"
-              :size="size"
-              @click="removeEvent(Number(entry.index))"
-            ></TMagicButton>
           </div>
         </template>
-      </MPanel>
-
-      <TMagicButton
-        v-if="!isCompareMode"
-        class="create-button fullWidth"
-        :icon="Plus"
-        :disabled="disabled"
-        @click="addEvent()"
-        >添加事件</TMagicButton
-      >
+      </MGroupList>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { Delete } from '@element-plus/icons-vue';
-import { Plus } from '@element-plus/icons-vue';
-import { has } from 'lodash-es';
 
-import { ActionType } from '@tmagic/core';
-import { TMagicButton } from '@tmagic/design';
-import type {
-  CodeSelectColConfig,
-  ContainerChangeEventData,
-  DataSourceMethodSelectConfig,
-  DynamicTypeConfig,
-  EventSelectConfig,
-  FieldProps,
-  FormState,
-  PanelConfig,
-  TableConfig,
-  UISelectConfig,
-} from '@tmagic/form';
-import { defineFormItem, MContainer as MFormContainer, MPanel, MTable } from '@tmagic/form';
+import type { ContainerChangeEventData, EventSelectConfig, FieldProps } from '@tmagic/form';
+import { MContainer as MFormContainer, MGroupList, MTable } from '@tmagic/form';
 
-import { useServices } from '@editor/hooks/use-services';
 import {
-  getCompActionAllowedValues,
-  getCompActionOptions,
-  getEventNameAllowedValues,
-  getEventNameOptions,
-  normalizeCompActionValue,
-} from '@editor/utils';
+  createEventNameConfig,
+  createEventSelectConfig,
+  createLegacyTableConfig,
+  isLegacyEventValue,
+} from '@editor/fields/configs/eventSelect';
 
 defineOptions({
   name: 'MFieldsEventSelect',
@@ -121,314 +70,25 @@ const emit = defineEmits<{
   change: [v: any, eventData?: ContainerChangeEventData];
 }>();
 
-const { editorService, dataSourceService, eventsService, codeBlockService, propsService } = useServices();
+const tableConfig = computed(() => createLegacyTableConfig(props.config));
 
-// 事件名称下拉框表单配置
-const eventNameConfig = computed(() => {
-  const defaultEventNameConfig = {
-    name: 'name',
-    text: '事件类型',
-    type: (mForm: FormState | undefined, { formValue }: any) => {
-      if (
-        props.config.src !== 'component' ||
-        (formValue.type === 'page-fragment-container' && formValue.pageFragmentId)
-      ) {
-        return 'cascader';
-      }
-      return 'select';
-    },
-    labelWidth: '70px',
-    checkStrictly: () => props.config.src !== 'component',
-    valueSeparator: '.',
-    options: (_mForm: FormState, { formValue }: any) => getEventNameOptions(props.config.src, formValue),
-    rules: [
-      {
-        validator: ({ value, callback }: any, { formValue }: any) => {
-          const allowedNames = getEventNameAllowedValues(props.config as any, formValue);
-          if (allowedNames && allowedNames.size > 0 && value && !allowedNames.has(value)) {
-            return callback(`事件名(${value})不存在`);
-          }
-          callback();
-        },
-        trigger: 'blur',
-      },
-    ],
-  };
-  return { ...defaultEventNameConfig, ...props.config.eventNameConfig };
-});
+const eventNameConfig = computed(() => createEventNameConfig(props.config));
 
-const actionTypeOptions = computed(() => {
-  const o: {
-    text: string;
-    label: string;
-    value: string;
-    disabled?: boolean;
-  }[] = [
-    {
-      text: '组件',
-      label: '组件',
-      value: ActionType.COMP,
-    },
-  ];
+const eventConfig = computed(() => createEventSelectConfig(props.config, props.name));
 
-  if (!propsService.getDisabledCodeBlock()) {
-    o.push({
-      text: '代码',
-      label: '代码',
-      disabled: !Object.keys(codeBlockService.getCodeDsl() || {}).length,
-      value: ActionType.CODE,
-    });
-  }
-
-  if (!propsService.getDisabledDataSource()) {
-    o.push({
-      text: '数据源',
-      label: '数据源',
-      value: ActionType.DATA_SOURCE,
-    });
-  }
-
-  return o;
-});
-
-// 联动类型
-const actionTypeConfig = computed(() => {
-  const defaultActionTypeConfig = {
-    name: 'actionType',
-    text: '联动类型',
-    type: 'select',
-    labelPosition: 'left',
-    defaultValue: ActionType.COMP,
-    options: actionTypeOptions.value,
-    rules: [
-      {
-        required: true,
-        message: '联动类型不能为空',
-      },
-      {
-        typeMatch: true,
-        trigger: 'blur',
-      },
-    ],
-  };
-  return { ...defaultActionTypeConfig, ...props.config.actionTypeConfig };
-});
-
-// 联动组件配置
-const targetCompConfig = computed(() => {
-  const defaultTargetCompConfig: UISelectConfig = {
-    name: 'to',
-    text: '联动组件',
-    type: 'ui-select',
-    labelPosition: 'left',
-    display: (_mForm, { model }) => model.actionType === ActionType.COMP,
-    onChange: (_MForm, _v, { setModel }) => {
-      setModel('method', '');
-    },
-    rules: [
-      {
-        typeMatch: true,
-        trigger: 'blur',
-      },
-    ],
-  };
-  return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
-});
-
-// 联动组件动作配置
-const compActionConfig = computed(() => {
-  const defaultCompActionConfig: DynamicTypeConfig = {
-    name: 'method',
-    text: '动作',
-    labelPosition: 'left',
-    type: (mForm: FormState | undefined, { model }: any) => {
-      const to = editorService.getNodeById(model.to);
-
-      if (to && to.type === 'page-fragment-container' && to.pageFragmentId) {
-        return 'cascader';
-      }
-
-      return 'select';
-    },
-    checkStrictly: () => props.config.src !== 'component',
-    display: (mForm: FormState | undefined, { model }: any) => model.actionType === ActionType.COMP,
-    options: (_mForm: FormState, { model }: any) => getCompActionOptions(model.to),
-    rules: [
-      {
-        trigger: 'blur',
-        validator: ({ value, callback }: any, { model }: any) => {
-          const allowedMethods = getCompActionAllowedValues(props.config as any, model);
-          const normalized = normalizeCompActionValue(value);
-          if (allowedMethods && allowedMethods.size > 0 && normalized && !allowedMethods.has(normalized)) {
-            return callback(`动作名(${normalized})不存在`);
-          }
-          callback();
-        },
-      },
-    ],
-  };
-  return { ...defaultCompActionConfig, ...props.config.compActionConfig };
-});
-
-// 代码联动配置
-const codeActionConfig = computed(() => {
-  const defaultCodeActionConfig: CodeSelectColConfig = {
-    type: 'code-select-col',
-    text: '代码块',
-    name: 'codeId',
-    notEditable: () => !codeBlockService.getEditStatus(),
-    display: (mForm, { model }) => model.actionType === ActionType.CODE,
-  };
-  return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
-});
-
-// 数据源联动配置
-const dataSourceActionConfig = computed(() => {
-  const defaultDataSourceActionConfig: DataSourceMethodSelectConfig = {
-    type: 'data-source-method-select',
-    text: '数据源方法',
-    name: 'dataSourceMethod',
-    notEditable: () => !dataSourceService.get('editable'),
-    display: (mForm, { model }) => model.actionType === ActionType.DATA_SOURCE,
-  };
-  return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig };
-});
-
-// 兼容旧的数据格式
-const tableConfig = computed(
-  () =>
-    defineFormItem({
-      type: 'table',
-      name: 'events',
-      items: [
-        {
-          name: 'name',
-          label: '事件名',
-          type: eventNameConfig.value.type,
-          options: (mForm: FormState, { formValue }: any) =>
-            eventsService.getEvent(formValue.type).map((option: any) => ({
-              text: option.label,
-              value: option.value,
-            })),
-        },
-        {
-          name: 'to',
-          label: '联动组件',
-          type: 'ui-select',
-        },
-        {
-          name: 'method',
-          label: '动作',
-          type: compActionConfig.value.type,
-          options: (mForm: FormState, { model }: any) => {
-            const node = editorService.getNodeById(model.to);
-            if (!node?.type) return [];
-
-            return eventsService.getMethod(node.type, model.to).map((option: any) => ({
-              text: option.label,
-              value: option.value,
-            }));
-          },
-        },
-      ],
-    }) as TableConfig,
-);
-
-// 组件动作组表单配置
-const actionsConfig = computed(
-  () =>
-    defineFormItem({
-      type: 'panel',
-      labelPosition: 'left',
-      items: [
-        {
-          type: 'group-list',
-          name: 'actions',
-          expandAll: true,
-          enableToggleMode: false,
-          titlePrefix: '动作',
-          labelPosition: 'left',
-          items: [
-            actionTypeConfig.value,
-            targetCompConfig.value,
-            compActionConfig.value,
-            codeActionConfig.value,
-            dataSourceActionConfig.value,
-          ],
-        },
-      ],
-    }) as PanelConfig,
-);
-
-// 是否为旧的数据格式
-const isOldVersion = computed(() => {
-  if (props.model[props.name].length === 0) return false;
-  return !has(props.model[props.name][0], 'actions');
-});
+const isOldVersion = computed(() => isLegacyEventValue(props.model[props.name]));
 
 /**
  * 对比模式判定：
  *
- * event-select 内部由「事件列表 + 嵌套子表单」组成，属于复合字段。父级 `MFormContainer` 已将其
- * 归入「自接管对比字段」（见 Container.vue 的 `SELF_DIFF_FIELD_TYPES`），即对比时只渲染一次本组件，
- * 并把当前值 `model` 与历史值 `lastValues` 一并传入，由本组件把 `is-compare`/`lastValues` 透传给
- * 内部的 MPanel / MFormContainer，逐项（事件名、动作）展示前后差异。
+ * event-select 内部是事件列表 group-list。父级 `MFormContainer` 已将其归入「自接管对比字段」
+ * （见 Container.vue 的 `SELF_DIFF_FIELD_TYPES`），对比时只渲染一次本组件，并把 `is-compare` /
+ * `lastValues` 透传给内部 MGroupList 与 title slot 里的事件名表单。
  *
  * 仅当存在历史值时才启用对比，避免 lastValues 缺失时退化为「全部新增」的空对比。
  */
 const isCompareMode = computed(() => Boolean(props.isCompare && props.lastValues));
 
-/**
- * 待渲染的事件卡片列表。
- *
- * - 非对比模式：直接映射当前事件列表，`lastCardItem` 为空；
- * - 对比模式：按索引对齐当前值与历史值，取两者长度的最大值，使得「新增」（仅当前有）与
- *   「删除」（仅历史有）的事件都能被渲染出来；缺失的一侧用空对象兜底，从而让子级正确高亮差异。
- */
-const displayList = computed<{ cardItem: any; lastCardItem: any; index: number }[]>(() => {
-  const current = props.model[props.name] || [];
-
-  if (!isCompareMode.value) {
-    return current.map((cardItem: any, index: number) => ({ cardItem, lastCardItem: undefined, index }));
-  }
-
-  const last = props.lastValues?.[props.name] || [];
-  const length = Math.max(current.length, last.length);
-
-  return Array.from({ length }, (_, index) => ({
-    cardItem: current[index] ?? {},
-    lastCardItem: last[index] ?? {},
-    index,
-  }));
-});
-
-// 添加事件
-const addEvent = () => {
-  const defaultEvent = {
-    name: '',
-    actions: [],
-  };
-
-  if (!props.model[props.name]) {
-    props.model[props.name] = [];
-  }
-
-  emit('change', defaultEvent, {
-    modifyKey: props.model[props.name].length,
-  });
-};
-
-// 删除事件
-const removeEvent = (index: number) => {
-  if (!props.name) return;
-  props.model[props.name].splice(index, 1);
-  emit('change', props.model[props.name]);
-};
-
-const eventNameChangeHandler = (v: any, eventData: ContainerChangeEventData) => {
-  emit('change', props.model[props.name], eventData);
-};
-
-const onChangeHandler = (v: any, eventData: ContainerChangeEventData) =>
+const onChangeHandler = (_v: any, eventData?: ContainerChangeEventData) =>
   emit('change', props.model[props.name], eventData);
 </script>

packages/editor/src/fields/KeyValue.vue

@@ -75,7 +75,7 @@ import { computed, inject, ref, watchEffect } from 'vue';
 import { Delete, Plus } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicInput } from '@tmagic/design';
-import type { FieldProps, FormState, KeyValueConfig } from '@tmagic/form';
+import { type FieldProps, type FormState, type KeyValueConfig } from '@tmagic/form';
 
 import CodeIcon from '@editor/icons/CodeIcon.vue';
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';

packages/editor/src/fields/StyleSetter/components/Border.vue

@@ -52,48 +52,14 @@
 import { computed, ref } from 'vue';
 
 import type { ContainerChangeEventData, FormValue } from '@tmagic/form';
-import { defineFormItem, MContainer } from '@tmagic/form';
+import { MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
+import { createBorderDirectionConfig } from '../configs';
+
 const direction = ref('');
 
-const config = computed(() =>
-  defineFormItem({
-    items: [
-      {
-        name: `border${direction.value}Width`,
-        text: '边框宽度',
-        labelWidth: '68px',
-        type: 'data-source-field-select',
-        fieldConfig: {
-          type: 'text',
-        },
-      },
-      {
-        name: `border${direction.value}Color`,
-        text: '边框颜色',
-        labelWidth: '68px',
-        type: 'data-source-field-select',
-        fieldConfig: {
-          type: 'colorPicker',
-        },
-      },
-      {
-        name: `border${direction.value}Style`,
-        text: '边框样式',
-        labelWidth: '68px',
-        type: 'data-source-field-select',
-        fieldConfig: {
-          type: 'select',
-          options: ['solid', 'dashed', 'dotted'].map((item) => ({
-            value: item,
-            text: item,
-          })),
-        },
-      },
-    ],
-  }),
-);
+const config = computed(() => createBorderDirectionConfig(direction.value));
 
 const selectDirection = (d?: string) => (direction.value = d || '');
 

packages/editor/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"

packages/editor/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"

packages/editor/src/fields/StyleSetter/configs.ts

@@ -0,0 +1,690 @@
+import { markRaw } from 'vue';
+
+import { appendValidateSuggestion } from '@tmagic/design/headless';
+import { defineFormItem, type FormConfig } from '@tmagic/form/headless';
+import type { StyleSchema } from '@tmagic/schema';
+
+import type { validateDataSourceFieldSelect } from '@editor/utils/type-match-rules';
+
+import BackgroundPosition from './components/BackgroundPosition.vue';
+import {
+  AlignItemsCenter,
+  AlignItemsFlexEnd,
+  AlignItemsFlexStart,
+  AlignItemsSpaceAround,
+  AlignItemsSpaceBetween,
+} from './icons/align-items';
+import { BackgroundNoRepeat, BackgroundRepeat, BackgroundRepeatX, BackgroundRepeatY } from './icons/background-repeat';
+import { DisplayBlock, DisplayFlex, DisplayInline, DisplayInlineBlock, DisplayNone } from './icons/display';
+import {
+  FlexDirectionColumn,
+  FlexDirectionColumnReverse,
+  FlexDirectionRow,
+  FlexDirectionRowReverse,
+} from './icons/flex-direction';
+import {
+  JustifyContentCenter,
+  JustifyContentFlexEnd,
+  JustifyContentFlexStart,
+  JustifyContentSpaceAround,
+  JustifyContentSpaceBetween,
+} from './icons/justify-content';
+import { AlignCenter, AlignLeft, AlignRight } from './icons/text-align';
+
+/**
+ * 「布局」面板配置。
+ *
+ * `theme` 需要由调用方从 `useTheme()` 解析后传入：magic-admin 主题下换行只能用普通
+ * radio，其余主题用 button。
+ */
+export const createLayoutConfig = (theme: string): FormConfig => [
+  defineFormItem({
+    name: 'display',
+    text: '模式',
+    type: 'radioGroup',
+    childType: 'button',
+    labelWidth: '90px',
+    iconSize: '24px',
+    options: [
+      {
+        value: 'inline',
+        icon: markRaw(DisplayInline),
+        tooltip: '内联布局 inline',
+      },
+      {
+        value: 'flex',
+        icon: markRaw(DisplayFlex),
+        tooltip: '弹性布局 flex',
+      },
+      {
+        value: 'block',
+        icon: markRaw(DisplayBlock),
+        tooltip: '块级布局 block',
+      },
+      {
+        value: 'inline-block',
+        icon: markRaw(DisplayInlineBlock),
+        tooltip: '内联块布局 inline-block',
+      },
+      {
+        value: 'none',
+        icon: markRaw(DisplayNone),
+        tooltip: '隐藏 none',
+      },
+    ],
+  }),
+  defineFormItem({
+    name: 'flexDirection',
+    text: '主轴方向',
+    type: 'radioGroup',
+    childType: 'button',
+    labelWidth: '90px',
+    iconSize: '24px',
+    options: [
+      { value: 'row', icon: markRaw(FlexDirectionRow), tooltip: '水平方向 起点在左侧 row' },
+      {
+        value: 'row-reverse',
+        icon: markRaw(FlexDirectionRowReverse),
+        tooltip: '水平方向 起点在右侧 row-reverse',
+      },
+      {
+        value: 'column',
+        icon: markRaw(FlexDirectionColumn),
+        tooltip: '垂直方向 起点在上沿 column',
+      },
+      {
+        value: 'column-reverse',
+        icon: markRaw(FlexDirectionColumnReverse),
+        tooltip: '垂直方向 起点在下沿 column-reverse',
+      },
+    ],
+    display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
+  }),
+  defineFormItem({
+    name: 'justifyContent',
+    text: '主轴对齐',
+    type: 'radioGroup',
+    childType: 'button',
+    labelWidth: '90px',
+    iconSize: '24px',
+    options: [
+      { value: 'flex-start', icon: markRaw(JustifyContentFlexStart), tooltip: '左对齐 flex-start' },
+      { value: 'flex-end', icon: markRaw(JustifyContentFlexEnd), tooltip: '右对齐 flex-end' },
+      { value: 'center', icon: markRaw(JustifyContentCenter), tooltip: '居中 center' },
+      {
+        value: 'space-between',
+        icon: markRaw(JustifyContentSpaceBetween),
+        tooltip: '两端对齐 space-between',
+      },
+      {
+        value: 'space-around',
+        icon: markRaw(JustifyContentSpaceAround),
+        tooltip: '横向平分 space-around',
+      },
+    ],
+    display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
+  }),
+  defineFormItem({
+    name: 'alignItems',
+    text: '辅轴对齐',
+    type: 'radioGroup',
+    childType: 'button',
+    labelWidth: '90px',
+    iconSize: '24px',
+    options: [
+      { value: 'flex-start', icon: markRaw(AlignItemsFlexStart), tooltip: '左对齐 flex-start' },
+      { value: 'flex-end', icon: markRaw(AlignItemsFlexEnd), tooltip: '右对齐 flex-end' },
+      { value: 'center', icon: markRaw(AlignItemsCenter), tooltip: '居中 center' },
+      {
+        value: 'space-between',
+        icon: markRaw(AlignItemsSpaceBetween),
+        tooltip: '两端对齐 space-between',
+      },
+      {
+        value: 'space-around',
+        icon: markRaw(AlignItemsSpaceAround),
+        tooltip: '横向平分 space-around',
+      },
+    ],
+    display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
+  }),
+  defineFormItem({
+    name: 'flexWrap',
+    text: '换行',
+    type: 'radioGroup',
+    childType: theme !== 'magic-admin' ? 'button' : 'default',
+    labelWidth: '90px',
+    iconSize: '24px',
+    options: [
+      { value: 'nowrap', text: '不换行', tooltip: '不换行 nowrap' },
+      { value: 'wrap', text: '正换行', tooltip: '第一行在上方 wrap' },
+      { value: 'wrap-reverse', text: '逆换行', tooltip: '第一行在下方 wrap-reverse' },
+    ],
+    display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
+  }),
+  defineFormItem({
+    type: 'row',
+    items: [
+      {
+        name: 'width',
+        text: '宽度（px）',
+        labelWidth: '90px',
+        type: 'data-source-field-select',
+        fieldConfig: {
+          type: 'text',
+        },
+      },
+    ],
+  }),
+  defineFormItem({
+    type: 'row',
+    items: [
+      {
+        name: 'height',
+        text: '高度（px）',
+        labelWidth: '90px',
+        type: 'data-source-field-select',
+        fieldConfig: {
+          type: 'text',
+        },
+      },
+    ],
+  }),
+  defineFormItem({
+    type: 'row',
+    items: [
+      {
+        type: 'data-source-field-select',
+        text: 'overflow',
+        name: 'overflow',
+        labelWidth: '90px',
+        checkStrictly: false,
+        dataSourceFieldType: ['string'],
+        fieldConfig: {
+          type: 'select',
+          clearable: true,
+          allowCreate: true,
+          options: [
+            { text: 'visible', value: 'visible' },
+            { text: 'hidden', value: 'hidden' },
+            { text: 'clip', value: 'clip' },
+            { text: 'scroll', value: 'scroll' },
+            { text: 'auto', value: 'auto' },
+            { text: 'overlay', value: 'overlay' },
+            { text: 'initial', value: 'initial' },
+          ],
+        },
+      },
+    ],
+  }),
+  defineFormItem({
+    type: 'row',
+    items: [
+      {
+        type: 'data-source-field-select',
+        text: '透明度（%）',
+        name: 'opacity',
+        labelWidth: '90px',
+        dataSourceFieldType: ['string', 'number'],
+        fieldConfig: {
+          type: 'text',
+        },
+      },
+    ],
+  }),
+];
+
+const positionText: Record<string, string> = {
+  static: '不定位',
+  relative: '相对定位',
+  absolute: '绝对定位',
+  fixed: '固定定位',
+  sticky: '粘性定位',
+};
+
+/**
+ * 「位置」面板配置。
+ *
+ * `values` 是当前 style 的 model：left/top/right/bottom 的 display 在求值时读取
+ * `values.position`，所以必须传入响应式对象本身，不能先解构。
+ */
+export const createPositionConfig = (values: Partial<StyleSchema>): FormConfig => [
+  defineFormItem({
+    name: 'position',
+    text: '定位',
+    labelWidth: '68px',
+    type: 'data-source-field-select',
+    fieldConfig: {
+      type: 'select',
+      options: Object.keys(positionText).map((item) => ({
+        value: item,
+        text: `${item}(${positionText[item]})`,
+      })),
+    },
+  }),
+  defineFormItem({
+    type: 'row',
+    labelWidth: '68px',
+    display: () => values.position !== 'static',
+    items: [
+      {
+        name: 'left',
+        type: 'data-source-field-select',
+        text: 'left',
+        fieldConfig: {
+          type: 'text',
+        },
+        rules: [
+          {
+            typeMatch: true,
+            message: appendValidateSuggestion('left 应为字符串', '请参考以下示例值："10"'),
+          },
+        ],
+      },
+      {
+        name: 'top',
+        type: 'data-source-field-select',
+        text: 'top',
+        fieldConfig: {
+          type: 'text',
+        },
+        rules: [
+          {
+            typeMatch: true,
+            message: appendValidateSuggestion('top 应为字符串', '请参考以下示例值："10"'),
+          },
+        ],
+      },
+    ],
+  }),
+  defineFormItem({
+    type: 'row',
+    labelWidth: '68px',
+    display: () => values.position !== 'static',
+    items: [
+      {
+        name: 'right',
+        type: 'data-source-field-select',
+        text: 'right',
+        fieldConfig: {
+          type: 'text',
+        },
+        rules: [
+          {
+            typeMatch: true,
+            message: appendValidateSuggestion('right 应为字符串', '请参考以下示例值："10"'),
+          },
+        ],
+      },
+      {
+        name: 'bottom',
+        type: 'data-source-field-select',
+        text: 'bottom',
+        fieldConfig: {
+          type: 'text',
+        },
+        rules: [
+          {
+            typeMatch: true,
+            message: appendValidateSuggestion('bottom 应为字符串', '请参考以下示例值："10"'),
+          },
+        ],
+      },
+    ],
+  }),
+  defineFormItem({
+    labelWidth: '68px',
+    name: 'zIndex',
+    text: 'zIndex',
+    type: 'data-source-field-select',
+    fieldConfig: {
+      type: 'text',
+    },
+    rules: [
+      {
+        typeMatch: true,
+        message: appendValidateSuggestion('zIndex 应为数字', '请参考以下示例值：10'),
+      },
+    ],
+  }),
+];
+
+/**
+ * 「背景」面板配置。
+ *
+ * 校验文案由 `@tmagic/design` 的 `appendValidateSuggestion` 生成，必须延迟到调用时
+ * 才执行，不能在模块顶层求值：本模块会被大量组件间接引入，而 design 层在部分场景下
+ * 才可用。
+ */
+export const createBackgroundConfig = (): FormConfig => [
+  defineFormItem({
+    name: 'backgroundColor',
+    text: '背景色',
+    labelWidth: '68px',
+    type: 'data-source-field-select',
+    fieldConfig: {
+      type: 'colorPicker',
+    },
+    rules: [
+      {
+        typeMatch: true,
+        message: appendValidateSuggestion('背景色应为字符串', '请参考以下示例值："#000000"'),
+      },
+    ],
+  }),
+  defineFormItem({
+    name: 'backgroundImage',
+    text: '背景图',
+    labelWidth: '68px',
+    type: 'data-source-field-select',
+    fieldConfig: {
+      type: 'img-upload',
+    } as any,
+  }),
+  defineFormItem({
+    name: 'backgroundSize',
+    text: '背景尺寸',
+    type: 'radioGroup',
+    childType: 'button',
+    labelWidth: '68px',
+    options: [
+      { value: 'auto', text: '默认', tooltip: '默认 auto' },
+      { value: 'contain', text: '等比填充', tooltip: '等比填充 contain' },
+      { value: 'cover', text: '等比覆盖', tooltip: '等比覆盖 cover' },
+    ],
+    rules: [
+      {
+        typeMatch: false,
+      },
+      {
+        validator: ({ value, callback }) => {
+          if (value === '' || value === null || value === undefined) {
+            return callback();
+          }
+
+          const keywords = ['auto', 'cover', 'contain', 'inherit', 'initial', 'revert', 'unset'];
+          // 单值：关键字 或 长度/百分比
+          const lengthPercent = /^-?\d+(\.\d+)?(px|em|rem|ex|ch|vw|vh|vmin|vmax|cm|mm|in|pt|pc|%)$/;
+          const singleValue = (v: string) => keywords.includes(v) || lengthPercent.test(v);
+
+          const str = String(value).trim();
+          const parts = str.split(/\s+/);
+
+          // cover / contain 不能与其他值组合
+          if (parts.length > 1 && (parts.includes('cover') || parts.includes('contain'))) {
+            return callback('cover/contain 不能与其他值组合');
+          }
+
+          // 多值最多两个
+          if (parts.length > 2) {
+            return callback('backgroundSize 最多支持两个值');
+          }
+
+          // 关键字 auto 在多值场景中允许与其他长度/百分比组合
+          if (parts.every((part) => singleValue(part))) {
+            return callback();
+          }
+
+          return callback('backgroundSize 值不合法');
+        },
+      },
+    ],
+  }),
+  defineFormItem({
+    name: 'backgroundRepeat',
+    text: '重复显示',
+    type: 'radioGroup',
+    childType: 'button',
+    labelWidth: '68px',
+    options: [
+      { value: 'no-repeat', icon: markRaw(BackgroundNoRepeat), tooltip: '不重复 no-repeat' },
+      { value: 'repeat-x', icon: markRaw(BackgroundRepeatX), tooltip: '水平方向重复 repeat-x' },
+      { value: 'repeat-y', icon: markRaw(BackgroundRepeatY), tooltip: '垂直方向重复 repeat-y' },
+      {
+        value: 'repeat',
+        icon: markRaw(BackgroundRepeat),
+        tooltip: '垂直和水平方向重复 repeat',
+      },
+    ],
+  }),
+  defineFormItem({
+    name: 'backgroundPosition',
+    text: '背景定位',
+    type: 'component',
+    component: BackgroundPosition,
+    labelWidth: '68px',
+  }),
+];
+
+/**
+ * 「文字」面板配置。
+ *
+ * 字重校验依赖编辑器服务（数据源/代码块），由调用方把 `type-match-rules` 的
+ * `validateDataSourceFieldSelect` 传进来：本模块只描述配置，不直接引用服务层，
+ * 否则会把整条服务依赖链拖进所有引用方。
+ */
+export const createFontConfig = (validateDataSourceField: typeof validateDataSourceFieldSelect): FormConfig => [
+  defineFormItem({
+    type: 'row',
+    items: [
+      {
+        labelWidth: '68px',
+        name: 'fontSize',
+        text: '字号',
+        type: 'data-source-field-select',
+        fieldConfig: {
+          type: 'text',
+        },
+        rules: [
+          {
+            typeMatch: true,
+            message: appendValidateSuggestion('字号应为字符串或数字', '请参考以下示例值：24 或 "24"'),
+          },
+        ],
+      },
+      {
+        labelWidth: '68px',
+        name: 'lineHeight',
+        text: '行高',
+        type: 'data-source-field-select',
+        fieldConfig: {
+          type: 'text',
+        },
+      },
+    ],
+  }),
+  defineFormItem({
+    name: 'fontWeight',
+    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 === undefined) {
+            return callback();
+          }
+
+          const result = validateDataSourceField(
+            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);
+        },
+      },
+    ],
+  }),
+  defineFormItem({
+    labelWidth: '68px',
+    name: 'color',
+    text: '颜色',
+    type: 'data-source-field-select',
+    fieldConfig: {
+      type: 'colorPicker',
+    },
+    rules: [
+      {
+        typeMatch: true,
+        message: appendValidateSuggestion('颜色应为字符串', '请参考以下示例值："#000000"'),
+      },
+    ],
+  }),
+  defineFormItem({
+    name: 'textAlign',
+    text: '对齐',
+    type: 'radioGroup',
+    childType: 'button',
+    labelWidth: '68px',
+    options: [
+      { value: 'left', icon: markRaw(AlignLeft), tooltip: '左对齐 row', text: '左对齐' },
+      { value: 'center', icon: markRaw(AlignCenter), tooltip: '居中对齐 center', text: '居中对齐' },
+      { value: 'right', icon: markRaw(AlignRight), tooltip: '右对齐 right', text: '右对齐' },
+    ],
+  }),
+];
+
+/** 「边框与圆角」面板中圆角部分的配置，边框四向配置见 `createBorderDirectionConfig`。 */
+export const borderRadiusConfig = defineFormItem({
+  labelWidth: '68px',
+  name: 'borderRadius',
+  text: '圆角',
+  type: 'data-source-field-select',
+  fieldConfig: {
+    type: 'text',
+  },
+});
+
+/** 「变形」面板配置。 */
+export const transformConfig = defineFormItem({
+  name: 'transform',
+  items: [
+    {
+      name: 'rotate',
+      text: '旋转角度',
+      labelWidth: '68px',
+      type: 'data-source-field-select',
+      checkStrictly: false,
+      dataSourceFieldType: ['string', 'number'],
+      fieldConfig: {
+        type: 'text',
+      },
+    },
+    {
+      name: 'scale',
+      text: '缩放',
+      labelWidth: '68px',
+      type: 'data-source-field-select',
+      checkStrictly: false,
+      dataSourceFieldType: ['string', 'number'],
+      fieldConfig: {
+        type: 'text',
+      },
+    },
+  ],
+});
+
+/**
+ * 把 6 个样式面板里会向父表单注册 FormItem 的配置按 `Index.vue` 的面板顺序拼成一份。
+ *
+ * 给无渲染校验的嵌套配置用：组件侧仍按面板各自渲染，这份合成配置只描述「父表单上
+ * 实际会出现哪些字段」。以下两处与组件一致、不纳入：
+ * - Layout 里的 Box（margin/padding）是裸 input，没有 MContainer；
+ * - Border 子组件的四向边框 MContainer 没传 `:prop`（路径从父表单脱落，本轮不修）。
+ *
+ * `theme` 只影响 flexWrap 的 UI `childType`，不影响校验字段。
+ */
+export const createStyleSetterConfig = (
+  values: Partial<StyleSchema>,
+  theme: string,
+  validateDataSourceField: typeof validateDataSourceFieldSelect,
+): FormConfig => [
+  ...createLayoutConfig(theme),
+  ...createPositionConfig(values),
+  ...createBackgroundConfig(),
+  ...createFontConfig(validateDataSourceField),
+  borderRadiusConfig,
+  transformConfig,
+];
+
+/**
+ * 边框配置，按当前选中的方向拼字段名。
+ *
+ * `direction` 取 ''(四向) / 'Top' / 'Right' / 'Bottom' / 'Left'，空串对应
+ * `borderWidth` 这类不带方向的字段。
+ */
+export const createBorderDirectionConfig = (direction: string) =>
+  defineFormItem({
+    items: [
+      {
+        name: `border${direction}Width`,
+        text: '边框宽度',
+        labelWidth: '68px',
+        type: 'data-source-field-select',
+        fieldConfig: {
+          type: 'text',
+        },
+      },
+      {
+        name: `border${direction}Color`,
+        text: '边框颜色',
+        labelWidth: '68px',
+        type: 'data-source-field-select',
+        fieldConfig: {
+          type: 'colorPicker',
+        },
+      },
+      {
+        name: `border${direction}Style`,
+        text: '边框样式',
+        labelWidth: '68px',
+        type: 'data-source-field-select',
+        fieldConfig: {
+          type: 'select',
+          options: ['solid', 'dashed', 'dotted'].map((item) => ({
+            value: item,
+            text: item,
+          })),
+        },
+      },
+    ],
+  });

packages/editor/src/fields/StyleSetter/pro/Background.vue

@@ -15,13 +15,12 @@
 </template>
 
 <script lang="ts" setup>
-import { markRaw } from 'vue';
+import { computed } from 'vue';
 
-import { type ContainerChangeEventData, defineFormConfig, MContainer } from '@tmagic/form';
+import { type ContainerChangeEventData, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
-import BackgroundPosition from '../components/BackgroundPosition.vue';
-import { BackgroundNoRepeat, BackgroundRepeat, BackgroundRepeatX, BackgroundRepeatY } from '../icons/background-repeat';
+import { createBackgroundConfig } from '../configs';
 
 defineProps<{
   values: Partial<StyleSchema>;
@@ -38,99 +37,7 @@ const emit = defineEmits<{
   addDiffCount: [];
 }>();
 
-const formConfig = defineFormConfig([
-  {
-    name: 'backgroundColor',
-    text: '背景色',
-    labelWidth: '68px',
-    type: 'data-source-field-select',
-    fieldConfig: {
-      type: 'colorPicker',
-    },
-  },
-  {
-    name: 'backgroundImage',
-    text: '背景图',
-    labelWidth: '68px',
-    type: 'data-source-field-select',
-    fieldConfig: {
-      type: 'img-upload',
-    } as any,
-  },
-  {
-    name: 'backgroundSize',
-    text: '背景尺寸',
-    type: 'radioGroup',
-    childType: 'button',
-    labelWidth: '68px',
-    options: [
-      { value: 'auto', text: '默认', tooltip: '默认 auto' },
-      { value: 'contain', text: '等比填充', tooltip: '等比填充 contain' },
-      { value: 'cover', text: '等比覆盖', tooltip: '等比覆盖 cover' },
-    ],
-    rules: [
-      {
-        typeMatch: false,
-      },
-      {
-        validator: ({ value, callback }) => {
-          if (value === '' || value === null || value === undefined) {
-            return callback();
-          }
-
-          const keywords = ['auto', 'cover', 'contain', 'inherit', 'initial', 'revert', 'unset'];
-          // 单值：关键字 或 长度/百分比
-          const lengthPercent = /^-?\d+(\.\d+)?(px|em|rem|ex|ch|vw|vh|vmin|vmax|cm|mm|in|pt|pc|%)$/;
-          const singleValue = (v: string) => keywords.includes(v) || lengthPercent.test(v);
-
-          const str = String(value).trim();
-          const parts = str.split(/\s+/);
-
-          // cover / contain 不能与其他值组合
-          if (parts.length > 1 && (parts.includes('cover') || parts.includes('contain'))) {
-            return callback('cover/contain 不能与其他值组合');
-          }
-
-          // 多值最多两个
-          if (parts.length > 2) {
-            return callback('backgroundSize 最多支持两个值');
-          }
-
-          // 关键字 auto 在多值场景中允许与其他长度/百分比组合
-          if (parts.every((part) => singleValue(part))) {
-            return callback();
-          }
-
-          return callback('backgroundSize 值不合法');
-        },
-      },
-    ],
-  },
-  {
-    name: 'backgroundRepeat',
-    text: '重复显示',
-    type: 'radioGroup',
-    childType: 'button',
-    labelWidth: '68px',
-    options: [
-      { value: 'no-repeat', icon: markRaw(BackgroundNoRepeat), tooltip: '不重复 no-repeat' },
-      { value: 'repeat-x', icon: markRaw(BackgroundRepeatX), tooltip: '水平方向重复 repeat-x' },
-      { value: 'repeat-y', icon: markRaw(BackgroundRepeatY), tooltip: '垂直方向重复 repeat-y' },
-      {
-        value: 'repeat',
-        icon: markRaw(BackgroundRepeat),
-        tooltip: '垂直和水平方向重复 repeat',
-      },
-    ],
-  },
-  {
-    name: 'backgroundPosition',
-    text: '背景定位',
-    type: 'component',
-    component: BackgroundPosition,
-    labelWidth: '68px',
-  },
-]);
+const formConfig = computed(() => createBackgroundConfig());
 
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);

packages/editor/src/fields/StyleSetter/pro/Border.vue

@@ -1,7 +1,7 @@
 <template>
   <MContainer
     :prop="prop"
-    :config="config"
+    :config="borderRadiusConfig"
     :model="values"
     :last-values="lastValues"
     :is-compare="isCompare"
@@ -22,10 +22,11 @@
 </template>
 
 <script lang="ts" setup>
-import { type ContainerChangeEventData, defineFormItem, MContainer } from '@tmagic/form';
+import { type ContainerChangeEventData, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
 import Border from '../components/Border.vue';
+import { borderRadiusConfig } from '../configs';
 
 defineProps<{
   values: Partial<StyleSchema>;
@@ -41,16 +42,6 @@ const emit = defineEmits<{
   addDiffCount: [];
 }>();
 
-const config = defineFormItem({
-  labelWidth: '68px',
-  name: 'borderRadius',
-  text: '圆角',
-  type: 'data-source-field-select',
-  fieldConfig: {
-    type: 'text',
-  },
-});
-
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);
 };

packages/editor/src/fields/StyleSetter/pro/Font.vue

@@ -15,12 +15,14 @@
 </template>
 
 <script lang="ts" setup>
-import { markRaw } from 'vue';
+import { computed } from 'vue';
 
-import { type ContainerChangeEventData, defineFormConfig, MContainer } from '@tmagic/form';
+import { type ContainerChangeEventData, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
-import { AlignCenter, AlignLeft, AlignRight } from '../icons/text-align';
+import { validateDataSourceFieldSelect } from '@editor/utils/type-match-rules';
+
+import { createFontConfig } from '../configs';
 
 defineProps<{
   values: Partial<StyleSchema>;
@@ -36,71 +38,7 @@ const emit = defineEmits<{
   addDiffCount: [];
 }>();
 
-const formConfig = defineFormConfig([
-  {
-    type: 'row',
-    items: [
-      {
-        labelWidth: '68px',
-        name: 'fontSize',
-        text: '字号',
-        type: 'data-source-field-select',
-        fieldConfig: {
-          type: 'text',
-        },
-      },
-      {
-        labelWidth: '68px',
-        name: 'lineHeight',
-        text: '行高',
-        type: 'data-source-field-select',
-        fieldConfig: {
-          type: 'text',
-        },
-      },
-    ],
-  },
-  {
-    name: 'fontWeight',
-    text: '字重',
-    labelWidth: '68px',
-    type: 'data-source-field-select',
-    fieldConfig: {
-      type: 'select',
-      options: ['normal', 'bold']
-        .concat(
-          Array(7)
-            .fill(1)
-            .map((x, i) => `${i + 1}00`),
-        )
-        .map((item) => ({
-          value: item,
-          text: item,
-        })),
-    },
-  },
-  {
-    labelWidth: '68px',
-    name: 'color',
-    text: '颜色',
-    type: 'data-source-field-select',
-    fieldConfig: {
-      type: 'colorPicker',
-    },
-  },
-  {
-    name: 'textAlign',
-    text: '对齐',
-    type: 'radioGroup',
-    childType: 'button',
-    labelWidth: '68px',
-    options: [
-      { value: 'left', icon: markRaw(AlignLeft), tooltip: '左对齐 row', text: '左对齐' },
-      { value: 'center', icon: markRaw(AlignCenter), tooltip: '居中对齐 center', text: '居中对齐' },
-      { value: 'right', icon: markRaw(AlignRight), tooltip: '右对齐 right', text: '右对齐' },
-    ],
-  },
-]);
+const formConfig = computed(() => createFontConfig(validateDataSourceFieldSelect));
 
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);

packages/editor/src/fields/StyleSetter/pro/Layout.vue

@@ -24,35 +24,15 @@
 </template>
 
 <script lang="ts" setup>
-import { markRaw } from 'vue';
+import { computed } from 'vue';
 
 import { useTheme } from '@tmagic/design';
 import type { ContainerChangeEventData } from '@tmagic/form';
-import { defineFormConfig, MContainer } from '@tmagic/form';
+import { MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
 import Box from '../components/Box.vue';
-import {
-  AlignItemsCenter,
-  AlignItemsFlexEnd,
-  AlignItemsFlexStart,
-  AlignItemsSpaceAround,
-  AlignItemsSpaceBetween,
-} from '../icons/align-items';
-import { DisplayBlock, DisplayFlex, DisplayInline, DisplayInlineBlock, DisplayNone } from '../icons/display';
-import {
-  FlexDirectionColumn,
-  FlexDirectionColumnReverse,
-  FlexDirectionRow,
-  FlexDirectionRowReverse,
-} from '../icons/flex-direction';
-import {
-  JustifyContentCenter,
-  JustifyContentFlexEnd,
-  JustifyContentFlexStart,
-  JustifyContentSpaceAround,
-  JustifyContentSpaceBetween,
-} from '../icons/justify-content';
+import { createLayoutConfig } from '../configs';
 
 const props = defineProps<{
   values: Partial<StyleSchema>;
@@ -71,202 +51,7 @@ const emit = defineEmits<{
 
 const displayTheme = useTheme(props);
 
-const formConfig = defineFormConfig([
-  {
-    name: 'display',
-    text: '模式',
-    type: 'radioGroup',
-    childType: 'button',
-    labelWidth: '90px',
-    iconSize: '24px',
-    options: [
-      {
-        value: 'inline',
-        icon: markRaw(DisplayInline),
-        tooltip: '内联布局 inline',
-      },
-      {
-        value: 'flex',
-        icon: markRaw(DisplayFlex),
-        tooltip: '弹性布局 flex',
-      },
-      {
-        value: 'block',
-        icon: markRaw(DisplayBlock),
-        tooltip: '块级布局 block',
-      },
-      {
-        value: 'inline-block',
-        icon: markRaw(DisplayInlineBlock),
-        tooltip: '内联块布局 inline-block',
-      },
-      {
-        value: 'none',
-        icon: markRaw(DisplayNone),
-        tooltip: '隐藏 none',
-      },
-    ],
-  },
-  {
-    name: 'flexDirection',
-    text: '主轴方向',
-    type: 'radioGroup',
-    childType: 'button',
-    labelWidth: '90px',
-    iconSize: '24px',
-    options: [
-      { value: 'row', icon: markRaw(FlexDirectionRow), tooltip: '水平方向 起点在左侧 row' },
-      {
-        value: 'row-reverse',
-        icon: markRaw(FlexDirectionRowReverse),
-        tooltip: '水平方向 起点在右侧 row-reverse',
-      },
-      {
-        value: 'column',
-        icon: markRaw(FlexDirectionColumn),
-        tooltip: '垂直方向 起点在上沿 column',
-      },
-      {
-        value: 'column-reverse',
-        icon: markRaw(FlexDirectionColumnReverse),
-        tooltip: '垂直方向 起点在下沿 column-reverse',
-      },
-    ],
-    display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
-  },
-  {
-    name: 'justifyContent',
-    text: '主轴对齐',
-    type: 'radioGroup',
-    childType: 'button',
-    labelWidth: '90px',
-    iconSize: '24px',
-    options: [
-      { value: 'flex-start', icon: markRaw(JustifyContentFlexStart), tooltip: '左对齐 flex-start' },
-      { value: 'flex-end', icon: markRaw(JustifyContentFlexEnd), tooltip: '右对齐 flex-end' },
-      { value: 'center', icon: markRaw(JustifyContentCenter), tooltip: '居中 center' },
-      {
-        value: 'space-between',
-        icon: markRaw(JustifyContentSpaceBetween),
-        tooltip: '两端对齐 space-between',
-      },
-      {
-        value: 'space-around',
-        icon: markRaw(JustifyContentSpaceAround),
-        tooltip: '横向平分 space-around',
-      },
-    ],
-    display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
-  },
-  {
-    name: 'alignItems',
-    text: '辅轴对齐',
-    type: 'radioGroup',
-    childType: 'button',
-    labelWidth: '90px',
-    iconSize: '24px',
-    options: [
-      { value: 'flex-start', icon: markRaw(AlignItemsFlexStart), tooltip: '左对齐 flex-start' },
-      { value: 'flex-end', icon: markRaw(AlignItemsFlexEnd), tooltip: '右对齐 flex-end' },
-      { value: 'center', icon: markRaw(AlignItemsCenter), tooltip: '居中 center' },
-      {
-        value: 'space-between',
-        icon: markRaw(AlignItemsSpaceBetween),
-        tooltip: '两端对齐 space-between',
-      },
-      {
-        value: 'space-around',
-        icon: markRaw(AlignItemsSpaceAround),
-        tooltip: '横向平分 space-around',
-      },
-    ],
-    display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
-  },
-  {
-    name: 'flexWrap',
-    text: '换行',
-    type: 'radioGroup',
-    childType: displayTheme.value !== 'magic-admin' ? 'button' : 'default',
-    labelWidth: '90px',
-    iconSize: '24px',
-    options: [
-      { value: 'nowrap', text: '不换行', tooltip: '不换行 nowrap' },
-      { value: 'wrap', text: '正换行', tooltip: '第一行在上方 wrap' },
-      { value: 'wrap-reverse', text: '逆换行', tooltip: '第一行在下方 wrap-reverse' },
-    ],
-    display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
-  },
-  {
-    type: 'row',
-    items: [
-      {
-        name: 'width',
-        text: '宽度（px）',
-        labelWidth: '90px',
-        type: 'data-source-field-select',
-        fieldConfig: {
-          type: 'text',
-        },
-      },
-    ],
-  },
-  {
-    type: 'row',
-    items: [
-      {
-        name: 'height',
-        text: '高度（px）',
-        labelWidth: '90px',
-        type: 'data-source-field-select',
-        fieldConfig: {
-          type: 'text',
-        },
-      },
-    ],
-  },
-  {
-    type: 'row',
-    items: [
-      {
-        type: 'data-source-field-select',
-        text: 'overflow',
-        name: 'overflow',
-        labelWidth: '90px',
-        checkStrictly: false,
-        dataSourceFieldType: ['string'],
-        fieldConfig: {
-          type: 'select',
-          clearable: true,
-          allowCreate: true,
-          options: [
-            { text: 'visible', value: 'visible' },
-            { text: 'hidden', value: 'hidden' },
-            { text: 'clip', value: 'clip' },
-            { text: 'scroll', value: 'scroll' },
-            { text: 'auto', value: 'auto' },
-            { text: 'overlay', value: 'overlay' },
-            { text: 'initial', value: 'initial' },
-          ],
-        },
-      },
-    ],
-  },
-  {
-    type: 'row',
-    items: [
-      {
-        type: 'data-source-field-select',
-        text: '透明度（%）',
-        name: 'opacity',
-        labelWidth: '90px',
-        dataSourceFieldType: ['string', 'number'],
-        fieldConfig: {
-          type: 'text',
-        },
-      },
-    ],
-  },
-]);
+const formConfig = computed(() => createLayoutConfig(displayTheme.value));
 
 const change = (value: string | StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);

packages/editor/src/fields/StyleSetter/pro/Position.vue

@@ -15,9 +15,13 @@
 </template>
 
 <script lang="ts" setup>
-import { type ContainerChangeEventData, defineFormConfig, MContainer } from '@tmagic/form';
+import { computed } from 'vue';
+
+import { type ContainerChangeEventData, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
+import { createPositionConfig } from '../configs';
+
 const props = defineProps<{
   values: Partial<StyleSchema>;
   lastValues?: Partial<StyleSchema>;
@@ -32,84 +36,7 @@ const emit = defineEmits<{
   addDiffCount: [];
 }>();
 
-const positionText: Record<string, string> = {
-  static: '不定位',
-  relative: '相对定位',
-  absolute: '绝对定位',
-  fixed: '固定定位',
-  sticky: '粘性定位',
-};
-
-const formConfig = defineFormConfig([
-  {
-    name: 'position',
-    text: '定位',
-    labelWidth: '68px',
-    type: 'data-source-field-select',
-    fieldConfig: {
-      type: 'select',
-      options: Object.keys(positionText).map((item) => ({
-        value: item,
-        text: `${item}(${positionText[item]})`,
-      })),
-    },
-  },
-  {
-    type: 'row',
-    labelWidth: '68px',
-    display: () => props.values.position !== 'static',
-    items: [
-      {
-        name: 'left',
-        type: 'data-source-field-select',
-        text: 'left',
-        fieldConfig: {
-          type: 'text',
-        },
-      },
-      {
-        name: 'top',
-        type: 'data-source-field-select',
-        text: 'top',
-        fieldConfig: {
-          type: 'text',
-        },
-      },
-    ],
-  },
-  {
-    type: 'row',
-    labelWidth: '68px',
-    display: () => props.values.position !== 'static',
-    items: [
-      {
-        name: 'right',
-        type: 'data-source-field-select',
-        text: 'right',
-        fieldConfig: {
-          type: 'text',
-        },
-      },
-      {
-        name: 'bottom',
-        type: 'data-source-field-select',
-        text: 'bottom',
-        fieldConfig: {
-          type: 'text',
-        },
-      },
-    ],
-  },
-  {
-    labelWidth: '68px',
-    name: 'zIndex',
-    text: 'zIndex',
-    type: 'data-source-field-select',
-    fieldConfig: {
-      type: 'text',
-    },
-  },
-]);
+const formConfig = computed(() => createPositionConfig(props.values));
 
 const change = (value: string | StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);

packages/editor/src/fields/StyleSetter/pro/Transform.vue

@@ -1,7 +1,7 @@
 <template>
   <MContainer
     :prop="prop"
-    :config="config"
+    :config="transformConfig"
     :model="values"
     :last-values="lastValues"
     :is-compare="isCompare"
@@ -13,9 +13,11 @@
 </template>
 
 <script lang="ts" setup>
-import { type ContainerChangeEventData, defineFormItem, MContainer } from '@tmagic/form';
+import { type ContainerChangeEventData, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
+import { transformConfig } from '../configs';
+
 defineProps<{
   values: Partial<StyleSchema>;
   lastValues?: Partial<StyleSchema>;
@@ -30,34 +32,6 @@ const emit = defineEmits<{
   addDiffCount: [];
 }>();
 
-const config = defineFormItem({
-  name: 'transform',
-  items: [
-    {
-      name: 'rotate',
-      text: '旋转角度',
-      labelWidth: '68px',
-      type: 'data-source-field-select',
-      checkStrictly: false,
-      dataSourceFieldType: ['string', 'number'],
-      fieldConfig: {
-        type: 'text',
-      },
-    },
-    {
-      name: 'scale',
-      text: '缩放',
-      labelWidth: '68px',
-      type: 'data-source-field-select',
-      checkStrictly: false,
-      dataSourceFieldType: ['string', 'number'],
-      fieldConfig: {
-        type: 'text',
-      },
-    },
-  ],
-});
-
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);
 };

packages/editor/src/fields/configs/codeSelect.ts

@@ -0,0 +1,127 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { isEmpty } from 'lodash-es';
+
+import { HookCodeType, HookType } from '@tmagic/core';
+import type { CodeSelectConfig, FormValue, GroupListConfig } from '@tmagic/form/headless';
+
+import codeBlockService from '@editor/services/codeBlock';
+import dataSourceService from '@editor/services/dataSource';
+
+import { stickyAddButton } from './stickyAddButton';
+
+/**
+ * `fields/CodeSelect.vue` 内部渲染的钩子列表配置。
+ *
+ * 由组件与无渲染校验的嵌套配置共用：组件用它渲染，嵌套配置用它让父表单校验到这些字段。
+ */
+export const createCodeSelectConfig = (config: CodeSelectConfig): GroupListConfig => {
+  const groupListConfig: GroupListConfig = {
+    type: 'group-list',
+    name: 'hookData',
+    enableToggleMode: false,
+    expandAll: true,
+    defaultAdd: () => ({
+      codeType: HookCodeType.CODE,
+      codeId: '',
+    }),
+    ...stickyAddButton(`添加${config.text || ''}`),
+    title: (_mForm: any, { model, index }: any) => {
+      if (model.codeType === HookCodeType.DATA_SOURCE_METHOD) {
+        if (Array.isArray(model.codeId)) {
+          if (model.codeId.length < 2) {
+            return index;
+          }
+
+          const ds = dataSourceService.getDataSourceById(model.codeId[0]);
+          return `${ds?.title} / ${model.codeId[1]}`;
+        }
+
+        return Array.isArray(model.codeId) ? model.codeId.join('/') : index;
+      }
+
+      const codeContent = codeBlockService.getCodeContentById(model.codeId);
+
+      if (codeContent) {
+        return codeContent.name;
+      }
+
+      return model.codeId || index;
+    },
+    titlePrefix: config.name === undefined ? undefined : String(config.name),
+    items: [
+      {
+        text: '代码类型',
+        type: 'select',
+        name: 'codeType',
+        rules: [{ typeMatch: true, trigger: 'change' }],
+        options: [
+          { value: HookCodeType.CODE, text: '代码块' },
+          { value: HookCodeType.DATA_SOURCE_METHOD, text: '数据源方法' },
+        ],
+        defaultValue: HookCodeType.CODE,
+        onChange: (_mForm: any, v: HookCodeType, { setModel }: any) => {
+          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: any, { model }: any) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
+        notEditable: () => !codeBlockService.getEditStatus(),
+      },
+      {
+        type: 'data-source-method-select',
+        name: 'codeId',
+        text: '数据源字段',
+        rules: [{ typeMatch: true, trigger: 'change' }],
+        display: (_mForm: any, { model }: any) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
+        notEditable: () => !dataSourceService.get('editable'),
+      },
+    ],
+  } as any as GroupListConfig;
+
+  return groupListConfig;
+};
+
+/**
+ * `code-select` 的旧数据兼容：钩子值可能是空值或空数组，改写成 `{ hookType, hookData }`。
+ *
+ * 表单值初始化时由 `code-select` 的 `effect` 执行（`applyMountValueEffects`）；
+ * 组件里的 `watch`（无 immediate）只兜运行期被置空。必须幂等。
+ */
+export const normalizeCodeSelectValue = (model: FormValue | undefined, name: string): void => {
+  if (!model) return;
+
+  // 空值或者空数组
+  if (isEmpty(model[name])) {
+    model[name] = {
+      hookType: HookType.CODE,
+      hookData: [],
+    };
+  }
+};

packages/editor/src/fields/configs/displayConds.ts

@@ -0,0 +1,184 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { DisplayCondsConfig, FormState, GroupListConfig } from '@tmagic/form/headless';
+import { removeDataSourceFieldPrefix } from '@tmagic/utils';
+
+import dataSourceService from '@editor/services/dataSource';
+import { getCascaderOptionsFromFields, getFieldType } from '@editor/utils/data-source';
+
+import { stickyAddButton } from './stickyAddButton';
+
+/**
+ * `fields/DisplayConds.vue` 内部渲染的条件列表配置。
+ *
+ * 外层是条件组，内层 `cond` 是组内条件（groupList，每个字段单独一行）。
+ * 由组件与无渲染校验的嵌套配置共用。
+ *
+ * `parentFields` 由调用方求值：有父级字段路径时用 cascader 在该路径下选字段，
+ * 没有时用 data-source-field-select 从头选。
+ */
+export const createDisplayCondsConfig = (
+  config: Pick<DisplayCondsConfig, 'titlePrefix' | 'flat' | 'defaultValue' | 'rules'>,
+  name: string,
+  parentFields: string[],
+): GroupListConfig => {
+  const resolveFieldPath = (path: string[]) => {
+    const [id, ...fieldNames] = path;
+    const ds = id ? dataSourceService.getDataSourceById(removeDataSourceFieldPrefix(`${id}`)) : undefined;
+    return { ds, fieldNames };
+  };
+
+  // 字段变更后按新字段的类型把已填的值转成对应类型，避免类型校验与运行期取值不一致
+  const fieldOnChange = (_formState: FormState | undefined, v: string[], { model }: { model: Record<string, any> }) => {
+    const { ds, fieldNames } = resolveFieldPath([...parentFields, ...v]);
+    const type = getFieldType(ds, fieldNames);
+    if (type === 'number') {
+      model.value = Number(model.value);
+    } else if (type === 'boolean') {
+      model.value = Boolean(model.value);
+    } else if (type === 'null') {
+      model.value = null;
+    } else {
+      model.value = `${model.value}`;
+    }
+    return v;
+  };
+
+  const fieldItem = parentFields.length
+    ? {
+        type: 'cascader',
+        options: () => {
+          const { ds, fieldNames } = resolveFieldPath(parentFields);
+          if (!ds) {
+            return [];
+          }
+
+          let fields = ds.fields || [];
+          fieldNames.forEach((key) => {
+            const field = fields.find((f) => f.name === key);
+            fields = field?.fields || [];
+          });
+
+          return getCascaderOptionsFromFields(fields, ['string', 'number', 'boolean', 'any']);
+        },
+        name: 'field',
+        value: 'key',
+        text: '字段',
+        checkStrictly: false,
+        onChange: fieldOnChange,
+        defaultValue: () => [],
+        rules: [
+          { required: true, trigger: 'blur', message: '请选择字段' },
+          { typeMatch: true, trigger: 'change' },
+        ],
+      }
+    : {
+        type: 'data-source-field-select',
+        name: 'field',
+        value: 'key',
+        text: '字段',
+        checkStrictly: false,
+        dataSourceFieldType: ['string', 'number', 'boolean', 'any'],
+        onChange: fieldOnChange,
+        defaultValue: () => [],
+        rules: [
+          { required: true, trigger: 'blur', message: '请选择字段' },
+          { typeMatch: true, trigger: 'change' },
+        ],
+      };
+
+  return {
+    type: 'groupList',
+    name,
+    titlePrefix: config.titlePrefix,
+    expandAll: true,
+    enableToggleMode: false,
+    defaultAdd: { cond: [] },
+    ...stickyAddButton(`新增${config.titlePrefix || '条件组'}`),
+    flat: config.flat,
+    defaultValue: config.defaultValue ?? [],
+    rules: config.rules ?? [{ typeMatch: true }],
+    items: [
+      {
+        type: 'groupList',
+        name: 'cond',
+        titlePrefix: '条件',
+        expandAll: true,
+        enableToggleMode: false,
+        copyable: true,
+        movable: false,
+        flat: true,
+        labelWidth: '80px',
+        ...stickyAddButton('新增条件'),
+        items: [
+          fieldItem,
+          {
+            type: 'cond-op-select',
+            parentFields,
+            text: '条件',
+            name: 'op',
+            rules: [
+              { required: true, trigger: 'blur', message: '请选择条件' },
+              { typeMatch: true, trigger: 'change' },
+            ],
+          },
+          {
+            name: 'value',
+            text: '值',
+            type: (_mForm: FormState | undefined, { model }: any) => {
+              const { ds, fieldNames } = resolveFieldPath([...parentFields, ...(model.field || [])]);
+              const type = getFieldType(ds, fieldNames);
+
+              if (type === 'number') {
+                return 'number';
+              }
+
+              if (type === 'boolean') {
+                return 'select';
+              }
+
+              if (type === 'null') {
+                return 'display';
+              }
+
+              return 'text';
+            },
+            options: [
+              { text: 'true', value: true },
+              { text: 'false', value: false },
+            ],
+            display: (_mForm: FormState | undefined, { model }: any) => !['between', 'not_between'].includes(model.op),
+            displayText: (_mForm: FormState | undefined, { model }: any) => {
+              if (model.value === null) {
+                return 'null';
+              }
+              return model.value;
+            },
+          },
+          {
+            name: 'range',
+            text: '值',
+            type: 'number-range',
+            display: (_mForm: FormState | undefined, { model }: any) => ['between', 'not_between'].includes(model.op),
+          },
+        ],
+      },
+    ],
+  } as any as GroupListConfig;
+};

packages/editor/src/fields/configs/eventSelect.ts

@@ -0,0 +1,309 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { has } from 'lodash-es';
+
+import { ActionType, type MNode } from '@tmagic/core';
+import type {
+  CodeSelectColConfig,
+  DataSourceMethodSelectConfig,
+  DynamicTypeConfig,
+  EventSelectConfig,
+  FormState,
+  GroupListConfig,
+  TableConfig,
+  UISelectConfig,
+} from '@tmagic/form/headless';
+import { defineFormItem } from '@tmagic/form/headless';
+
+import codeBlockService from '@editor/services/codeBlock';
+import dataSourceService from '@editor/services/dataSource';
+import editorService from '@editor/services/editor';
+import eventsService from '@editor/services/events';
+import propsService from '@editor/services/props';
+import {
+  getCompActionAllowedValues,
+  getCompActionOptions,
+  getEventNameAllowedValues,
+  getEventNameOptions,
+  normalizeCompActionValue,
+} from '@editor/utils';
+
+import { stickyAddButton } from './stickyAddButton';
+
+/**
+ * `fields/EventSelect.vue` 内部渲染的各段配置。
+ *
+ * 由组件与无渲染校验的嵌套配置共用：组件用它们渲染，嵌套配置用它们让父表单校验到这些字段。
+ * 每段都支持通过 `config.xxxConfig` 覆盖，覆盖逻辑也必须两边一致，因此一并收口在此。
+ */
+
+/** 事件名称下拉框配置，渲染在每张事件卡片的头部 */
+export const createEventNameConfig = (config: EventSelectConfig) => {
+  const defaultEventNameConfig = {
+    name: 'name',
+    text: '事件类型',
+    type: (_mForm: FormState | undefined, { formValue }: any) => {
+      if (config.src !== 'component' || (formValue.type === 'page-fragment-container' && formValue.pageFragmentId)) {
+        return 'cascader';
+      }
+      return 'select';
+    },
+    labelWidth: '70px',
+    checkStrictly: () => config.src !== 'component',
+    valueSeparator: '.',
+    options: (_mForm: FormState, { formValue }: any) => getEventNameOptions(config.src, formValue),
+    rules: [
+      {
+        validator: ({ value, callback }: any, { formValue }: any) => {
+          const allowedNames = getEventNameAllowedValues(config as any, formValue);
+          if (allowedNames && allowedNames.size > 0 && value && !allowedNames.has(value)) {
+            return callback(`事件名(${value})不存在`);
+          }
+          callback();
+        },
+        trigger: 'blur',
+      },
+    ],
+  };
+  return { ...defaultEventNameConfig, ...config.eventNameConfig };
+};
+
+const createActionTypeOptions = () => {
+  const o: {
+    text: string;
+    label: string;
+    value: string;
+    disabled?: boolean;
+  }[] = [
+    {
+      text: '组件',
+      label: '组件',
+      value: ActionType.COMP,
+    },
+  ];
+
+  if (!propsService.getDisabledCodeBlock()) {
+    o.push({
+      text: '代码',
+      label: '代码',
+      disabled: !Object.keys(codeBlockService.getCodeDsl() || {}).length,
+      value: ActionType.CODE,
+    });
+  }
+
+  if (!propsService.getDisabledDataSource()) {
+    o.push({
+      text: '数据源',
+      label: '数据源',
+      value: ActionType.DATA_SOURCE,
+    });
+  }
+
+  return o;
+};
+
+/** 联动类型 */
+const createActionTypeConfig = (config: EventSelectConfig) => {
+  const defaultActionTypeConfig = {
+    name: 'actionType',
+    text: '联动类型',
+    type: 'select',
+    defaultValue: ActionType.COMP,
+    options: createActionTypeOptions(),
+    rules: [
+      {
+        required: true,
+        message: '联动类型不能为空',
+      },
+      {
+        typeMatch: true,
+        trigger: 'blur',
+      },
+    ],
+    onChange: (_mForm: FormState, _v: string, { setModel }: any) => {
+      setModel('to', '');
+      setModel('method', '');
+      setModel('codeId', '');
+      setModel('dataSourceMethod', []);
+    },
+  };
+  return { ...defaultActionTypeConfig, ...config.actionTypeConfig };
+};
+
+/** 联动组件 */
+const createTargetCompConfig = (config: EventSelectConfig) => {
+  const defaultTargetCompConfig: UISelectConfig = {
+    name: 'to',
+    text: '联动组件',
+    type: 'ui-select',
+    display: (_mForm, { model }) => model.actionType === ActionType.COMP,
+    onChange: (_mForm, _v, { setModel }) => {
+      setModel('method', '');
+    },
+    rules: [
+      {
+        typeMatch: true,
+        trigger: 'blur',
+      },
+    ],
+  };
+  return { ...defaultTargetCompConfig, ...config.targetCompConfig };
+};
+
+/** 联动组件动作 */
+const createCompActionConfig = (config: EventSelectConfig) => {
+  const defaultCompActionConfig: DynamicTypeConfig = {
+    name: 'method',
+    text: '动作',
+    type: (_mForm: FormState | undefined, { model }: any) => {
+      const to = editorService.getNodeById(model.to);
+
+      if (to?.type === 'page-fragment-container' && to.pageFragmentId) {
+        return 'cascader';
+      }
+
+      return 'select';
+    },
+    checkStrictly: () => config.src !== 'component',
+    display: (_mForm: FormState | undefined, { model }: any) => model.actionType === ActionType.COMP,
+    options: (_mForm: FormState, { model }: any) => getCompActionOptions(model.to),
+    rules: [
+      {
+        trigger: 'blur',
+        validator: ({ value, callback }: any, { model }: any) => {
+          const allowedMethods = getCompActionAllowedValues(config as any, model);
+          const normalized = normalizeCompActionValue(value);
+          if (allowedMethods && allowedMethods.size > 0 && normalized && !allowedMethods.has(normalized)) {
+            return callback(`动作名(${normalized})不存在`);
+          }
+          callback();
+        },
+      },
+    ],
+  };
+  return { ...defaultCompActionConfig, ...config.compActionConfig };
+};
+
+/** 代码联动 */
+const createCodeActionConfig = (config: EventSelectConfig) => {
+  const defaultCodeActionConfig: CodeSelectColConfig = {
+    type: 'code-select-col',
+    text: '代码块',
+    name: 'codeId',
+    notEditable: () => !codeBlockService.getEditStatus(),
+    display: (_mForm, { model }) => model.actionType === ActionType.CODE,
+  };
+  return { ...defaultCodeActionConfig, ...config.codeActionConfig };
+};
+
+/** 数据源联动 */
+const createDataSourceActionConfig = (config: EventSelectConfig) => {
+  const defaultDataSourceActionConfig: DataSourceMethodSelectConfig = {
+    type: 'data-source-method-select',
+    text: '数据源方法',
+    name: 'dataSourceMethod',
+    notEditable: () => !dataSourceService.get('editable'),
+    display: (_mForm, { model }) => model.actionType === ActionType.DATA_SOURCE,
+  };
+  return { ...defaultDataSourceActionConfig, ...config.dataSourceActionConfig };
+};
+
+/** 单张事件里的动作组 */
+export const createActionsConfig = (config: EventSelectConfig): GroupListConfig =>
+  defineFormItem({
+    type: 'group-list',
+    name: 'actions',
+    expandAll: true,
+    enableToggleMode: false,
+    titlePrefix: '动作',
+    labelPosition: 'top',
+    flat: true,
+    ...stickyAddButton('新增动作'),
+    items: [
+      createActionTypeConfig(config),
+      createTargetCompConfig(config),
+      createCompActionConfig(config),
+      createCodeActionConfig(config),
+      createDataSourceActionConfig(config),
+    ],
+  }) as GroupListConfig;
+
+/** 事件列表（外层 group-list）。事件名走 title slot，body 只放动作组。 */
+export const createEventSelectConfig = (
+  config: EventSelectConfig,
+  name: string,
+  options?: { includeEventName?: boolean },
+): GroupListConfig =>
+  defineFormItem({
+    type: 'group-list',
+    name,
+    titlePrefix: '事件',
+    expandAll: true,
+    enableToggleMode: false,
+    movable: false,
+    defaultAdd: { name: '', actions: [] },
+    ...stickyAddButton('添加事件'),
+    items: [...(options?.includeEventName ? [createEventNameConfig(config)] : []), createActionsConfig(config)],
+  }) as GroupListConfig;
+
+/** 兼容旧数据格式（事件列表里没有 actions）时渲染的表格配置，本身不带校验规则 */
+export const createLegacyTableConfig = (config: EventSelectConfig): TableConfig =>
+  defineFormItem({
+    type: 'table',
+    name: 'events',
+    items: [
+      {
+        name: 'name',
+        label: '事件名',
+        type: createEventNameConfig(config).type,
+        options: (_mForm: FormState, { formValue }: any) =>
+          eventsService
+            .getEvent(formValue.type, { node: editorService.getNodeById(formValue.id) })
+            .map((option: any) => ({
+              text: option.label,
+              value: option.value,
+            })),
+      },
+      {
+        name: 'to',
+        label: '联动组件',
+        type: 'ui-select',
+      },
+      {
+        name: 'method',
+        label: '动作',
+        type: createCompActionConfig(config).type,
+        options: (_mForm: FormState, { model, formValue }: any) => {
+          const node = editorService.getNodeById(model.to) || (formValue as MNode);
+          if (!node?.type) return [];
+
+          return eventsService.getMethod(node.type, { targetId: model.to, node }).map((option: any) => ({
+            text: option.label,
+            value: option.value,
+          }));
+        },
+      },
+    ],
+  }) as TableConfig;
+
+/** 事件列表是否为旧数据格式（列表项里没有 actions） */
+export const isLegacyEventValue = (events: any): boolean => {
+  if (!Array.isArray(events) || events.length === 0) return false;
+  return !has(events[0], 'actions');
+};

packages/editor/src/fields/configs/stickyAddButton.ts

@@ -0,0 +1,31 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * 属性面板列表字段共用的吸底全宽「添加」按钮，展开到 group-list 配置上。
+ *
+ * 吸底按钮会盖住列表底部，新增的项必须同时滚进视口才看得见，两者一起给出避免漏配。
+ */
+export const stickyAddButton = (text: string) => ({
+  scrollLastItemIntoView: true as const,
+  addButtonConfig: {
+    sticky: true as const,
+    text,
+    props: { type: 'primary', plain: true, text: false },
+  },
+});

packages/editor/src/fields/headless-validation.ts

@@ -0,0 +1,177 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  type DisplayCondsConfig,
+  type EventSelectConfig,
+  type FieldInnerConfig,
+  type FieldMountValueEffect,
+  filterFunction,
+  type FormItemConfig,
+  type HeadlessFieldOptions,
+} from '@tmagic/form/headless';
+import type { StyleSchema } from '@tmagic/schema';
+
+import { editorTypeMatchRules, validateDataSourceFieldSelect } from '@editor/utils/type-match-rules';
+
+import { createCodeSelectConfig, normalizeCodeSelectValue } from './configs/codeSelect';
+import { createDisplayCondsConfig } from './configs/displayConds';
+import { createEventSelectConfig, isLegacyEventValue } from './configs/eventSelect';
+import { createStyleSetterConfig } from './StyleSetter/configs';
+
+const getName = (config: FormItemConfig): string => `${(config as any).name ?? ''}`;
+
+/** `code-select` 旧数据兼容：空值改写成 `{ hookType, hookData }`。 */
+const codeSelectEffect: FieldMountValueEffect = ({ config, model }) => {
+  normalizeCodeSelectValue(model, getName(config));
+};
+
+/** `event-select`：表单 init 对未声明 defaultValue 的自定义 type 会写成空串，统一收成数组。 */
+const eventSelectEffect: FieldMountValueEffect = ({ config, model }) => {
+  const name = getName(config);
+  if (model && !Array.isArray(model[name])) {
+    model[name] = [];
+  }
+};
+
+/**
+ * `code-select` 的内部配置。
+ *
+ * 对应 `fields/CodeSelect.vue` 内部
+ * `<MContainer :config="codeConfig" :model="model[name]" :prop="prop">`。
+ *
+ * @param ctx - innerConfig 回调入参
+ * @returns 内部容器的 config / model / prop
+ */
+const codeSelectInnerConfig: FieldInnerConfig = ({ config, model, prop }) => {
+  const name = getName(config);
+
+  return {
+    config: createCodeSelectConfig(config as any),
+    model: model?.[name],
+    prop,
+  };
+};
+
+/**
+ * `display-conds` 的内部配置。
+ *
+ * 对应 `fields/DisplayConds.vue` 内部把同一份 groupList 配置交给 `MGroupList`。
+ *
+ * @param ctx - innerConfig 回调入参
+ * @returns 内部 group-list 配置；prop 基准为 parentProp，避免 name 被拼两次
+ */
+const displayCondsInnerConfig: FieldInnerConfig = ({ config, model, prop, parentProp, mForm }) => {
+  const name = getName(config);
+  const parentFields =
+    filterFunction<string[]>(mForm, (config as DisplayCondsConfig).parentFields, {
+      model,
+      config,
+      prop,
+    }) || [];
+
+  return {
+    config: createDisplayCondsConfig(config as DisplayCondsConfig, name, parentFields),
+    // 内部 group-list 复用了字段自身的 name，prop 基准要退回父级，否则 name 会被拼两次
+    prop: parentProp,
+  };
+};
+
+/**
+ * `event-select` 的内部配置。
+ *
+ * 对应 `fields/EventSelect.vue`：列表走 group-list，事件名渲染在 title slot，
+ * 无渲染校验仍把事件名当作列表项字段，路径为 `<prop>.<index>.name`。
+ *
+ * @param ctx - innerConfig 回调入参
+ * @returns 合成的 group-list 配置；旧数据格式返回 null，不参与校验
+ */
+const eventSelectInnerConfig: FieldInnerConfig = ({ config, model, parentProp }) => {
+  const name = getName(config);
+  const events = model?.[name];
+
+  // 旧数据格式走的是另一套表格配置，其中不含任何 rules，不参与校验
+  if (!Array.isArray(events) || isLegacyEventValue(events)) return null;
+
+  return {
+    config: createEventSelectConfig(config as EventSelectConfig, name, { includeEventName: true }),
+    prop: parentProp,
+  };
+};
+
+/**
+ * `style-setter` 的内部配置。
+ *
+ * 对应 `fields/StyleSetter/Index.vue`：6 个面板共用 `:values="model[name]"`、`:prop="prop || name"`。
+ * `theme` 按 `useTheme` 缺省空串传入，只改 flexWrap 的 UI childType，不影响校验字段。
+ *
+ * @param ctx - innerConfig 回调入参
+ * @returns style 面板配置及 styleModel
+ */
+const styleSetterInnerConfig: FieldInnerConfig = ({ config, model, prop }) => {
+  const name = getName(config);
+  const styleModel = (model?.[name] ?? {}) as Partial<StyleSchema>;
+
+  return {
+    config: createStyleSetterConfig(styleModel, '', validateDataSourceFieldSelect),
+    model: styleModel,
+    prop,
+  };
+};
+
+/**
+ * 编辑器字段的无渲染登记表（不含 Vue 组件）。
+ *
+ * Node 里 `registerFields(editorFields)` 即可配合 `validateForm` / `submitForm`。
+ * 安装编辑器时由 plugin 把 `component` 叠上去再传给 `@tmagic/form`。
+ *
+ * - 叶子：内部只渲染叶子 UI，或把子表单渲染在独立的 MForm / MFormBox 实例里
+ * - innerConfig：内部再渲染 MContainer / MPanel / MGroupList，把运行期配置交出来
+ * - typeMatch：该 type 自身的类型匹配校验
+ *
+ * innerConfig 返回的 config / model / prop 与组件模板里传给内部容器的那一组保持一一对应，
+ * 且配置本身与组件共用同一份工厂（`fields/configs/`）。
+ */
+export const editorFields: Record<string, HeadlessFieldOptions> = {
+  'vs-code': {},
+  'code-link': {},
+  'ui-select': { typeMatch: editorTypeMatchRules['ui-select'] },
+  'cond-op-select': { typeMatch: editorTypeMatchRules['cond-op-select'] },
+  'page-fragment-select': { typeMatch: editorTypeMatchRules['page-fragment-select'] },
+  'data-source-select': { typeMatch: editorTypeMatchRules['data-source-select'] },
+  'data-source-input': { typeMatch: editorTypeMatchRules['data-source-input'] },
+  'key-value': { typeMatch: editorTypeMatchRules['key-value'] },
+  'code-select-col': { typeMatch: editorTypeMatchRules['code-select-col'] },
+  'data-source-fields': { typeMatch: editorTypeMatchRules['data-source-fields'] },
+  'data-source-mocks': { typeMatch: editorTypeMatchRules['data-source-mocks'] },
+  'data-source-methods': { typeMatch: editorTypeMatchRules['data-source-methods'] },
+  'data-source-method-select': { typeMatch: editorTypeMatchRules['data-source-method-select'] },
+  'data-source-field-select': { typeMatch: editorTypeMatchRules['data-source-field-select'] },
+  'code-select': {
+    effect: codeSelectEffect,
+    innerConfig: codeSelectInnerConfig,
+    typeMatch: editorTypeMatchRules['code-select'],
+  },
+  'display-conds': { innerConfig: displayCondsInnerConfig, typeMatch: editorTypeMatchRules['display-conds'] },
+  'event-select': {
+    effect: eventSelectEffect,
+    innerConfig: eventSelectInnerConfig,
+    typeMatch: editorTypeMatchRules['event-select'],
+  },
+  'style-setter': { innerConfig: styleSetterInnerConfig, typeMatch: editorTypeMatchRules['style-setter'] },
+};

packages/editor/src/headless.ts

@@ -0,0 +1,33 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview `@tmagic/editor/headless`：编辑器字段的无渲染登记表。
+ *
+ * 不加载编辑器界面（Editor.vue、各面板、monaco 等），可在无 DOM 的 Node 里 import。
+ * 配合 `@tmagic/form/headless`：`registerBuiltInFields(builtInFields); registerFields(editorFields);`
+ *
+ * 注意这里不是「零 Vue 依赖」：`style-setter` 的字段配置与编辑器 UI 共用同一份工厂
+ * （`fields/StyleSetter/configs.ts`），配置里的 `icon` / `component` 会带进来若干图标
+ * SFC；typeMatch 的提示文案要读画布与数据源，也会带进 editor services。这些都只在
+ * import 时定义、不访问 DOM，但产物体积明显大于 `@tmagic/form/headless`。
+ *
+ * @module @tmagic/editor/headless
+ */
+
+export { editorFields } from './fields/headless-validation';

packages/editor/src/hooks/use-compare-form.ts

@@ -16,20 +16,20 @@
  * limitations under the License.
  */
 
-import { computed, type ComputedRef, inject, provide, type Ref, ref, useTemplateRef, watch, watchEffect } from 'vue';
+import { computed, type ComputedRef, inject, provide, type Ref, ref, useTemplateRef, watch } from 'vue';
 
 import type { CodeBlockContent, MNode } from '@tmagic/core';
-import { type FormConfig, type FormState, type FormValue, MForm } from '@tmagic/form';
+import { type FormConfig, type FormContext, type FormValue, MForm } from '@tmagic/form';
 
+import { useEditorFormContext } from '@editor/hooks/use-form-context';
 import type { CompareFormBaseProps } from '@editor/type';
 import { getCodeBlockFormConfig } from '@editor/utils/code-block';
-import { removeStyleDisplayConfig } from '@editor/utils/props';
 
 export interface UseCompareFormReturn {
   config: Ref<FormConfig>;
   currentValues: ComputedRef<FormValue>;
   wrapperStyle: ComputedRef<Record<string, string> | undefined>;
-  mergedExtendState: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+  formContext: ComputedRef<FormContext>;
   loadConfig: () => Promise<void>;
   formRef: Readonly<Ref<InstanceType<typeof MForm> | null>>;
   normalizeCodeBlockValue: (v: Partial<CodeBlockContent> | Record<string, any> | undefined) => Record<string, any>;
@@ -40,7 +40,7 @@ export interface UseCompareFormReturn {
  * - 按 `category`(node / data-source / code-block) 加载 FormConfig（支持自定义 `loadConfig`）；
  * - 代码块 `content` 归一化为字符串；
  * - 外层容器固定高度 + 内部滚动的 `wrapperStyle`；
- * - 将 services / stage 注入 MForm.formState，保证 filterFunction 上下文一致。
+ * - 将 services / stage 作为 form context 传给 MForm，保证 filterFunction 上下文一致。
  *
  * 两个组件的差异仅在于是否做新旧值对比，这部分逻辑保留在各自组件中。
  */
@@ -88,10 +88,7 @@ export const useCompareForm = (props: CompareFormBaseProps): UseCompareFormRetur
     return style;
   });
 
-  const mergedExtendState = (state: FormState) => {
-    const extendState = props.extendState ?? ((s: FormState) => s);
-    return extendState(props.baseFormState || state);
-  };
+  const formContext = useEditorFormContext(() => props.services);
 
   /**
    * 内置的默认 FormConfig 加载逻辑：按 `category` 从对应 service / 工具取配置。
@@ -107,9 +104,7 @@ export const useCompareForm = (props: CompareFormBaseProps): UseCompareFormRetur
         if (!props.type) {
           return [];
         }
-        return removeStyleDisplayConfig(
-          await props.services.propsService.getPropsConfig(props.type, { node: props.value as unknown as MNode }),
-        );
+        return props.services.propsService.getPropsConfig(props.type, { node: props.value as unknown as MNode });
       }
       case 'data-source': {
         const config = props.services.dataSourceService.getFormConfig(props.type || 'base');
@@ -159,27 +154,11 @@ export const useCompareForm = (props: CompareFormBaseProps): UseCompareFormRetur
 
   const formRef = useTemplateRef<InstanceType<typeof MForm>>('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;
-    }
-  });
-
   return {
     config,
     currentValues,
     wrapperStyle,
-    mergedExtendState,
+    formContext,
     loadConfig,
     formRef,
     normalizeCodeBlockValue,

packages/editor/src/hooks/use-form-context.ts

@@ -0,0 +1,56 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { computed, type ComputedRef, inject, unref } from 'vue';
+
+import { FORM_CONTEXT_KEY, type FormContext, mergeFormContexts } from '@tmagic/form';
+
+import type { Services } from '@editor/type';
+
+/**
+ * 编辑器注入给表单的业务上下文：`services` 与当前画布 `stage`。
+ *
+ * 由 `Editor.vue`（provide `FORM_CONTEXT_KEY`）、`FormPanel.vue` 与 `useCompareForm`
+ * 共用。`stage` 走 computed 而非快照，保证切换画布后配置回调读到的是最新实例。
+ *
+ * 宿主可能在 `<MEditor>` 外层 provide 了自己的业务字段，这里必须把那一层合并进来：
+ * 否则编辑器再 provide 一次会把宿主整层遮蔽掉，属性面板、对比表单里的配置回调就
+ * 读不到宿主字段了。`services` / `stage` 由编辑器兜底，优先级高于宿主同名字段。
+ *
+ * 字段类型见 `@editor/type` 里对 `@tmagic/form-schema` 的 `FormContext` 模块增强。
+ */
+export const useEditorFormContext = (getServices: () => Services | undefined): ComputedRef<FormContext> => {
+  // inject 只能在 setup 期取值，因此本 hook 必须在 setup 中调用（`use` 前缀即此约定）。
+  // 返回的 computed 可以随便传递，但 hook 本身不能延迟到事件回调或 onMounted 里再调。
+  const hostContext = inject(FORM_CONTEXT_KEY, undefined);
+
+  return computed(() => {
+    const services = getServices();
+    const host = unref(hostContext);
+
+    // 上层（通常是 Editor.vue）已经用同一份 services 合并过了。FormPanel / useCompareForm
+    // 都是它的后代，再合并一次只会多套一层 Proxy，让每次属性 miss 多一轮线性查找。
+    // services 相同即可判定 stage 也相同——两边都是从同一个 editorService 读的。
+    if (host && host.services === services) return host;
+
+    return mergeFormContexts(host, {
+      services,
+      stage: services?.editorService.get('stage'),
+    });
+  });
+};

packages/editor/src/hooks/use-stage.ts

@@ -28,6 +28,7 @@ export const useStage = (stageOptions: StageOptions) => {
     containerHighlightClassName: stageOptions.containerHighlightClassName,
     containerHighlightDuration: stageOptions.containerHighlightDuration,
     containerHighlightType: stageOptions.containerHighlightType,
+    containerHighlightAddOnly: stageOptions.containerHighlightAddOnly,
     disabledDragStart: stageOptions.disabledDragStart,
     renderType: stageOptions.renderType,
     canSelect: (el, event, stop) => {

packages/editor/src/index.ts

@@ -91,4 +91,6 @@ export { default as DisplayConds } from './fields/DisplayConds.vue';
 export { default as CondOpSelect } from './fields/CondOpSelect.vue';
 export { default as StyleSetter } from './fields/StyleSetter/Index.vue';
 
+export { editorFields } from './fields/headless-validation';
+
 export { default } from './plugin';

packages/editor/src/initService.ts

@@ -29,6 +29,7 @@ import { getDepNodeIds, getNodes, isPage, isValueIncludeDataSource } from '@tmag
 
 import PropsPanel from './layouts/PropsPanel.vue';
 import { isIncludeDataSource } from './utils/editor';
+import { error as logError } from './utils/logger';
 import { EditorProps } from './editorProps';
 import { Services } from './type';
 
@@ -36,6 +37,19 @@ export declare type LooseRequired<T> = {
   [P in string & keyof T]: T[P];
 };
 
+/**
+ * select 为异步串行执行，节点不可选中（如已从 DSL 中移除）时会抛错。
+ * 在 watch 回调中调用不能把拒绝抛回调用方，否则会变成 Vue 的「Unhandled error during execution of watcher callback」，
+ * 这里统一兜底成日志。
+ */
+const selectNode = async (editorService: Services['editorService'], id: Id) => {
+  try {
+    await editorService.select(id);
+  } catch (e) {
+    logError(e);
+  }
+};
+
 export const initServiceState = (
   props: EditorProps,
   {
@@ -193,9 +207,17 @@ export const initServiceState = (
     },
   );
 
+  // defaultSelected 可能早于 modelValue 到位（immediate 首次执行时 root 还是空的，或节点尚未出现在 DSL 中），
+  // 此时 select 会因为「获取不到组件信息」而抛错，交由 root-change 中的选中逻辑在 root 就绪后补上即可。
   watch(
     () => props.defaultSelected,
-    (defaultSelected) => defaultSelected && editorService.select(defaultSelected),
+    (defaultSelected) => {
+      if (!defaultSelected || !editorService.getNodeById(defaultSelected)) {
+        return;
+      }
+
+      selectNode(editorService, defaultSelected);
+    },
     {
       immediate: true,
     },
@@ -232,6 +254,7 @@ export const initServiceState = (
     uiService.resetState();
     componentListService.resetState();
     codeBlockService.resetState();
+    eventsService.resetState();
     keybindingService.reset();
     depService.reset();
   });
@@ -333,11 +356,11 @@ export const initServiceEvents = (
     Promise.all(
       nodes.map((node) => {
         if (node.type === NodeType.ROOT) {
-          return Promise.resolve();
+          return Promise.resolve(true);
         }
         return depService.collectIdle([node], { pageId: getPageIdByNode(node) }, deep, type);
       }),
-    );
+    ).then((results) => results.every(Boolean));
 
   watch(
     () => editorService.get('stage'),
@@ -351,7 +374,7 @@ export const initServiceEvents = (
 
         if (!node) return;
 
-        await collectIdle([node], true, DepTargetType.DATA_SOURCE);
+        if (!(await collectIdle([node], true, DepTargetType.DATA_SOURCE))) return;
         updateStageNode(node);
       });
     },
@@ -494,8 +517,10 @@ export const initServiceEvents = (
 
   // 新增节点，收集依赖
   const nodeAddHandler = (nodes: MComponent[]) => {
-    collectIdle(nodes, true).then(() => {
-      updateStageNodes(nodes);
+    collectIdle(nodes, true).then((completed) => {
+      if (completed) {
+        updateStageNodes(nodes);
+      }
     });
   };
 
@@ -549,8 +574,8 @@ export const initServiceEvents = (
     if (needRecollectNodes.length) {
       // 有数据源依赖，需要等依赖重新收集完才更新stage
       const handler = async () => {
-        await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE);
-        await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE_COND);
+        if (!(await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE))) return;
+        if (!(await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE_COND))) return;
         updateStageNodes(needRecollectNodes);
       };
       handler();
@@ -572,8 +597,10 @@ export const initServiceEvents = (
 
   // 历史记录变化时，需要重新收集依赖
   const historyChangeHandler = (page: MPage | MPageFragment) => {
-    collectIdle([page], true).then(() => {
-      updateStageNode(page);
+    collectIdle([page], true).then((completed) => {
+      if (completed) {
+        updateStageNode(page);
+      }
     });
   };
 
@@ -654,7 +681,7 @@ export const initServiceEvents = (
       if (Array.isArray(root?.items)) {
         depService.clearIdleTasks();
 
-        let collectIdlePromises: Promise<void[]>[] = [];
+        let collectIdlePromises: Promise<boolean>[] = [];
         if (isModifyField) {
           depService.removeTarget(config.id, DepTargetType.DATA_SOURCE);
           depService.removeTarget(config.id, DepTargetType.DATA_SOURCE_COND);
@@ -679,10 +706,15 @@ export const initServiceEvents = (
 
           collectIdlePromises = [collectIdle(root.items, true, DepTargetType.DATA_SOURCE_METHOD)];
         }
-        Promise.all(collectIdlePromises)
-          .then(() => updateDataSourceSchema())
-          .then(() => updateDsData())
-          .then(() => updateStageNodes(root.items));
+        const handler = async () => {
+          const results = await Promise.all(collectIdlePromises);
+          if (!results.every(Boolean)) return;
+
+          updateDataSourceSchema();
+          await updateDsData();
+          updateStageNodes(root.items);
+        };
+        handler();
       }
     } else if (root?.dataSources) {
       updateDsData();
@@ -706,11 +738,12 @@ export const initServiceEvents = (
       const nodeIds = Object.keys(root.dataSourceDeps?.[id] || {});
       const nodes = getNodes(nodeIds, root.items);
 
-      await Promise.all([
+      const results = await Promise.all([
         collectIdle(nodes, false, DepTargetType.DATA_SOURCE),
         collectIdle(nodes, false, DepTargetType.DATA_SOURCE_COND),
         collectIdle(nodes, false, DepTargetType.DATA_SOURCE_METHOD),
       ]);
+      if (!results.every(Boolean)) return;
 
       updateDataSourceSchema();
 

packages/editor/src/layouts/history-list/HistoryDiffDialog.vue

@@ -43,8 +43,6 @@
         :data-source-type="payload.dataSourceType"
         :value="rightValue"
         :last-value="leftValue"
-        :base-form-state="compareFormState"
-        :extend-state="extendState"
         :load-config="loadConfig"
         :self-diff-field-types="selfDiffFieldTypes"
         :services="props.services"
@@ -86,7 +84,6 @@ import {
   TMagicRadioGroup,
   TMagicTag,
 } from '@tmagic/design';
-import type { FormState } from '@tmagic/form';
 
 import CompareForm from '@editor/components/CompareForm.vue';
 import CodeEditor from '@editor/layouts/CodeEditor.vue';
@@ -100,12 +97,6 @@ const props = withDefaults(
   defineProps<{
     /** 编辑器服务集合，由调用方传入（不再通过 inject('services') 获取）。 */
     services?: Services;
-    /**
-     * 来自 Editor 顶层的 `extendFormState`，用于扩展 MForm.formState。
-     * 透传给 CompareForm，从而让差异对比时表单 item 中依赖业务上下文的
-     * `display` / `disabled` 等 filterFunction 正常工作。
-     */
-    extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
     /**
      * 自定义 FormConfig 加载逻辑，透传给 CompareForm。传入后将接管内置的按 `category`
      * 取配置逻辑，可通过 `ctx.defaultLoadConfig()` 复用默认结果再做二次加工。
@@ -117,7 +108,6 @@ const props = withDefaults(
     isConfirm?: boolean;
     onConfirm?: () => void;
     selfDiffFieldTypes?: string[];
-    compareFormState?: FormState;
   }>(),
   {
     width: '900px',

packages/editor/src/layouts/history-list/HistoryListPanel.vue

@@ -133,7 +133,6 @@ import { computed, inject, markRaw, ref, watch } from 'vue';
 import { Clock, Close } from '@element-plus/icons-vue';
 
 import { getDesignConfig, TMagicButton, tMagicMessage, TMagicPopover, TMagicTabs, TMagicTooltip } from '@tmagic/design';
-import type { FormState } from '@tmagic/form';
 
 import MIcon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
@@ -193,17 +192,6 @@ watch([disabledDataSource, disabledCodeBlock], ([dsDisabled, cbDisabled]) => {
   }
 });
 
-/**
- * 通过 inject 拿到 Editor 顶层注入的 `extendFormState`，转交给 HistoryDiffDialog
- * 内部的 CompareForm，使差异对比表单的 filterFunction 能拿到完整的业务上下文。
- * 未提供时为 undefined，CompareForm/MForm 会跳过 extendState 处理。
- */
-const extendFormState = inject<((_state: FormState) => Record<string, any> | Promise<Record<string, any>>) | undefined>(
-  'extendFormState',
-  undefined,
-);
-const getPropsPanelFormState = inject<(() => FormState | undefined) | undefined>('getPropsPanelFormState', undefined);
-
 const {
   expanded,
   toggleGroup,
@@ -316,7 +304,7 @@ const onCodeBlockGotoInitial = (id: string | number) => {
  * 业务方亦可直接 import useHistoryRevert(options, services) 调用，无需自行挂载任何弹窗。
  */
 const { onPageRevert, onDataSourceRevert, onCodeBlockRevert, onPageDiff, onDataSourceDiff, onCodeBlockDiff } =
-  useHistoryRevert({ extendState: extendFormState, getPropsPanelFormState }, services);
+  useHistoryRevert({}, services);
 
 /**
  * 把内存中（已清空对应类别后的）历史状态重新写回 IndexedDB，

packages/editor/src/layouts/history-list/useHistoryRevert.ts

@@ -74,7 +74,7 @@ interface MountedDiffDialog {
  * 弹窗组件动态 import，避免拖累其它消费者。供「确认回滚」与「查看差异」两种交互共用。
  */
 const mountHistoryDiffDialog = async (
-  options: Pick<UseHistoryRevertOptions, 'appContext' | 'extendState'> &
+  options: Pick<UseHistoryRevertOptions, 'appContext'> &
     CustomDiffFormOptions & {
       services?: Services;
       isConfirm?: boolean;
@@ -90,10 +90,8 @@ const mountHistoryDiffDialog = async (
   const app = createApp(historyDiffDialog, {
     services: options.services,
     isConfirm: options.isConfirm,
-    extendState: options.extendState,
     loadConfig: options.loadConfig,
     selfDiffFieldTypes: options.selfDiffFieldTypes,
-    compareFormState: options.compareFormState,
     width: options.width,
     size: options.size ?? options.services?.uiService?.get('propsPanelSize'),
     onClose: options.onClose,
@@ -125,7 +123,7 @@ const mountHistoryDiffDialog = async (
  */
 const confirmRevertWithDiffDialog = async (
   payload: DiffDialogPayload,
-  options: Pick<UseHistoryRevertOptions, 'appContext' | 'extendState'> &
+  options: Pick<UseHistoryRevertOptions, 'appContext'> &
     CustomDiffFormOptions & {
       services?: Services;
     },
@@ -147,7 +145,7 @@ const confirmRevertWithDiffDialog = async (
  */
 const viewHistoryDiffDialog = async (
   payload: DiffDialogPayload,
-  options: Pick<UseHistoryRevertOptions, 'appContext' | 'extendState'> &
+  options: Pick<UseHistoryRevertOptions, 'appContext'> &
     CustomDiffFormOptions & {
       services?: Services;
     },
@@ -194,7 +192,7 @@ const viewHistoryDiffDialog = async (
 export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services?: Services) => {
   // 自动捕获调用方所在组件的 appContext（在 setup 中调用时），业务方亦可显式覆盖。
   const appContext = options.appContext ?? getCurrentInstance()?.appContext ?? null;
-  const { extendState, getPropsPanelFormState, dialogWidth } = options;
+  const { dialogWidth } = options;
 
   /** 目标数据已被删除、无法回滚时的统一提示。 */
   const showRevertTargetMissing = () => {
@@ -220,7 +218,6 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
     if (payload) {
       return confirmRevertWithDiffDialog(payload, {
         appContext,
-        extendState,
         services,
         ...extra,
         width: extra?.width ?? dialogWidth,
@@ -307,7 +304,7 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
       showRevertTargetMissing();
       return Promise.resolve(null);
     }
-    return runRevert(buildPageDiffPayload(index), { compareFormState: getPropsPanelFormState?.() }).then((result) =>
+    return runRevert(buildPageDiffPayload(index), {}).then((result) =>
       result ? services?.editorService.revertPageStep(index) : null,
     );
   };
@@ -341,22 +338,20 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
     if (payload) {
       return viewHistoryDiffDialog(payload, {
         appContext,
-        extendState,
         services,
         width: dialogWidth,
-        compareFormState: getPropsPanelFormState?.(),
       });
     }
   };
 
   const onDataSourceDiff = (id: string | number, index: number): Promise<void> | void => {
     const payload = buildDataSourceDiffPayload(id, index);
-    if (payload) return viewHistoryDiffDialog(payload, { appContext, extendState, services, width: dialogWidth });
+    if (payload) return viewHistoryDiffDialog(payload, { appContext, services, width: dialogWidth });
   };
 
   const onCodeBlockDiff = (id: string | number, index: number): Promise<void> | void => {
     const payload = buildCodeBlockDiffPayload(id, index);
-    if (payload) return viewHistoryDiffDialog(payload, { appContext, extendState, services, width: dialogWidth });
+    if (payload) return viewHistoryDiffDialog(payload, { appContext, services, width: dialogWidth });
   };
 
   /**
@@ -398,7 +393,6 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
     if (payload)
       return viewHistoryDiffDialog(payload, {
         appContext,
-        extendState,
         services,
         ...extra,
         width: extra?.width ?? dialogWidth,

packages/editor/src/layouts/props-panel/FormPanel.vue

@@ -13,7 +13,8 @@
         :init-values="values"
         :config="config"
         :type-match-valid="true"
-        :extend-state="extendState"
+        :context="formContext"
+        :validate-on-init="true"
         @change="submit"
         @error="errorHandler"
       ></MForm>
@@ -44,19 +45,19 @@
 </template>
 
 <script setup lang="ts">
-import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, useTemplateRef, watchEffect } from 'vue';
+import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
 import { Document as DocumentIcon } from '@element-plus/icons-vue';
 
 import { TMagicButton, tMagicMessage, TMagicScrollbar } from '@tmagic/design';
-import type { ContainerChangeEventData, FormConfig, FormState, FormValue } from '@tmagic/form';
-import { MForm } from '@tmagic/form';
+import type { ContainerChangeEventData, FormConfig, FormValue } from '@tmagic/form';
+import { MForm, validateForm } from '@tmagic/form';
 import { filterXSS } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
 import { ENABLE_PROPS_FORM_VALIDATE } from '@editor/editorProps';
 import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
+import { useEditorFormContext } from '@editor/hooks/use-form-context';
 import { useServices } from '@editor/hooks/use-services';
-import { validatePropsForm } from '@editor/utils/props';
 
 import CodeEditor from '../CodeEditor.vue';
 
@@ -74,8 +75,7 @@ const props = defineProps<{
   disabledShowSrc?: boolean;
   labelWidth?: string;
   codeValueKey?: string;
-  labelPosition?: string;
-  extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+  labelPosition?: 'top' | 'left' | 'right';
 }>();
 
 const emit = defineEmits<{
@@ -89,24 +89,18 @@ const emit = defineEmits<{
 const enablePropsFormValidate = inject(ENABLE_PROPS_FORM_VALIDATE, false);
 
 const services = useServices();
-const { editorService, uiService } = services;
+const { uiService } = services;
 
 const codeOptions = inject('codeOptions', {});
 
 const showSrc = ref(false);
 const propsPanelSize = computed(() => uiService.get('propsPanelSize') || 'small');
 const { height: editorContentHeight } = useEditorContentHeight();
-const stage = computed(() => editorService.get('stage'));
+
+const formContext = useEditorFormContext(() => services);
 
 const configFormRef = useTemplateRef<InstanceType<typeof MForm>>('configForm');
 
-watchEffect(() => {
-  if (configFormRef.value) {
-    configFormRef.value.formState.stage = stage.value;
-    configFormRef.value.formState.services = services;
-  }
-});
-
 const internalInstance = getCurrentInstance();
 onMounted(() => {
   emit('mounted', internalInstance?.proxy);
@@ -158,18 +152,17 @@ const saveCode = async (values: any) => {
     return;
   }
 
-  // 启用校验联动：源码编辑器保存的值未经过表单交互，这里另建一个独立的 MForm 实例对最新配置
-  // 做一次静默校验（不复用、也不污染页面上正在展示的表单），并将校验结果（错误信息）随提交
+  // 启用校验联动：源码编辑器保存的值未经过表单交互，这里对最新配置做一次无渲染的静默校验
+  // （不挂载任何组件，也不影响页面上正在展示的表单），并将校验结果（错误信息）随提交
   // 一并抛给上层记录，使源码保存的错误状态与表单编辑保持一致。
+  //
+  // 配置里的 display / rules 回调会从 formState 上读 services，因此必须带上 context。
   try {
-    const error = await validatePropsForm({
+    const error = await validateForm({
       config: props.config,
-      values: newValues,
-      appContext: internalInstance?.appContext ?? null,
-      services,
-      stage: stage.value,
       typeMatchValid: true,
-      extendState: props.extendState,
+      initValues: newValues,
+      context: formContext.value,
     });
 
     if (error) {
@@ -182,9 +175,10 @@ const saveCode = async (values: any) => {
 
     emit('submit', newValues, undefined, error ? new Error(error) : undefined);
   } catch (e: any) {
-    console.log('validateForm error', e);
-    // 静默校验本身出现异常（如初始化超时）时，退回到不携带错误信息的提交，避免阻塞源码保存
-    emit('submit', newValues);
+    console.error('validateForm error', e);
+    // 嵌套配置 / initValue 等机制故障不得当成「校验通过」，
+    // 把 error 交给上层记录，同时仍提交源码，避免阻塞保存。
+    emit('submit', newValues, undefined, e instanceof Error ? e : new Error(String(e)));
   }
 };
 

packages/editor/src/layouts/props-panel/PropsPanel.vue

@@ -8,7 +8,6 @@
       :config="curFormConfig"
       :values="values"
       :disabledShowSrc="disabledShowSrc"
-      :extendState="extendState"
       @submit="(v, eventData, error) => submit(v, eventData, error, 'props')"
       @submit-error="errorHandler"
       @form-error="errorHandler"
@@ -26,7 +25,6 @@
       :config="styleFormConfig"
       :values="values"
       :disabledShowSrc="disabledShowSrc"
-      :extendState="extendState"
       @submit="(v, eventData, error) => submit(v, eventData, error, 'style')"
       @submit-error="errorHandler"
       @form-error="errorHandler"
@@ -61,7 +59,7 @@ import type { OnDrag } from 'gesto';
 
 import { type MNode } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import type { ContainerChangeEventData, FormState, FormValue } from '@tmagic/form';
+import type { ContainerChangeEventData, FormValue } from '@tmagic/form';
 import { setValueByKeyPath } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
@@ -84,7 +82,6 @@ defineOptions({
 
 defineProps<{
   disabledShowSrc?: boolean;
-  extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
 }>();
 
 const emit = defineEmits<{
@@ -158,32 +155,54 @@ const submit = async (
       v.id = values.value.id;
     }
 
-    const newValue: MNode = {
-      ...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 === '') {
-          setValueByKeyPath(record.propPath, record.value, newValue);
-        }
-      });
-    }
-
     // 区分操作途径：表单字段编辑（MForm @change）会带上 eventData（含 changeRecords）；
     // 源码编辑器（CodeEditor @save → saveCode）保存时不带 eventData，据此标记为「源码编辑器」。
     const historySource = eventData ? 'props' : 'code';
+    // 源码编辑统一走整节点 replace，避免 merge 保留已删除字段。
+    const replace = historySource === 'code';
+
+    let newValue: MNode;
+
+    if (replace) {
+      if (source === 'style') {
+        // 样式面板源码仅提交 { style }：先把新 style 替换到原节点上，再整节点覆盖。
+        newValue = {
+          ...values.value,
+          id: v.id || values.value.id,
+          style: { ...(v.style || {}) },
+        };
+      } else {
+        // 属性面板源码提交完整节点 DSL
+        newValue = { ...v };
+      }
+    } else {
+      newValue = {
+        ...v,
+        style: {},
+      };
+
+      if (v.style) {
+        // 空字符串样式值表示「清除该样式」，需保留才能在 doUpdate 的 mergeWith 中覆盖旧值。
+        // 表单编辑：先过滤掉空字符串（避免表单默认空值污染 DSL），
+        // 再按 changeRecords 恢复被主动清空的字段。
+        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 === '') {
+            setValueByKeyPath(record.propPath, record.value, newValue);
+          }
+        });
+      }
+    }
 
     editorService.update(newValue, {
       changeRecords: eventData?.changeRecords,
       historySource,
+      replace,
       // 启用校验联动时，仅校验失败（error 存在）才把错误信息随更新传入 editorService 记录；
       // 其余情况（含表单校验成功、CodeEditor 源码保存）不携带 invalidInfo，由 editorService 在执行 update 时统一清除该节点错误。
       ...(enablePropsFormValidate && error ? { invalidInfo: { id: newValue.id, source, error: error?.message } } : {}),