Lesson 05 · 表单引擎

schema 驱动的表单引擎

这是本项目最核心的抽象。看懂它，「加个字段」这类需求就变成十分钟的活。

为什么排在这个位置

课 04 已经把两条链分开了：store/modules/ 是状态，store/config/ 是描述。这一课把描述那条链走到底 —— 一份 ConfigModel 到底怎么变成屏幕上的输入框、下拉、开关。

排在第 5 位是因为它的投资回报率最高。项目里 18 个配置模块共用同一套渲染机制，搞懂一次，18 个模块的需求你都会改了。而且这类需求在日常占比最大。

前置

• 课 03 —— props、slot、computed
• 课 04 —— 两类 store 的区别，import.meta.glob 的装载机制
• 架构图 FIG.04 —— 数据链与描述链的汇合点

会讲什么

1. 一份字段定义的完整字段表。type / summary / desc / editor / options / meta / condition，各管什么，证据在 src/components/PropEditor/types/config.d.ts
2. PropEditor/index.vue 怎么派发。它 import 了十几个控件组件，按 editor 字段决定渲染哪一个
3. 控件全集速览。PropEditor/Components/ 下每个组件适合什么场景：Select / Switch / Time / TimeWeek / MapPoint / RelateDialog / GroupModel / SepGroup
4. 联动显示。checkCondition()（PropEditor/helper/handler.ts）怎么让「只有类型是 X 时才显示字段 Y」生效。store/config/Npc.ts 里有大量实例
5. 字段分组与标签页。views/GameEditor/Npc/view.ts 的 Groups —— 全项目只有 NPC 模块这么做，其余模块直接把分组写死在页面里
6. 动手：给一张表加一个字段。从确认后端字段存在，到 schema 加定义，到验证 excel_modify 的 payload 带上了它
7. 动手：加一个新控件类型。照着 Switch.vue 写一个，接进 PropEditor/index.vue 的派发
8. 三档评级。这套设计哪里值得学（schema 与渲染分离），哪里别学（prop 传回调代替 emit、Item.ts 5647 行单文件、大段注释掉的死代码）

学完之后你应该能

• 拿到「配置表加个字段 / 改个下拉选项」的需求，不看别的文件就知道该改哪里
• 看到一个陌生的编辑页，能说出它的字段定义在哪个文件
• 判断一个需求是「改 schema」还是「改页面」——这决定工作量差十倍
• 知道 condition 联动的坑：条件字段本身被隐藏时会发生什么

在正文出来之前，你可以先做这些

• 打开 src/store/config/Box.ts（最短的一份，可以整个读完），对照 /game/box 页面，逐个字段确认「这一行对应界面上哪个控件」
• 打开 src/components/PropEditor/index.vue，看它 import 了哪些控件 —— 那个 import 列表就是可用控件的全集
• 在界面上随便找一个字段标签，全局搜那几个字，确认能落到某个 summary
• 先别急着改。写操作会真的落到配置表，在拿到「哪些环境可以安全操作」的答复前只读不写