# 22 个组件页 EP 模式合规基线（2026-04-28） ## 评估方法 对 22 个组件页（含已认可样板 BreadcrumbPage 作锚点）按 5 个维度打分（0/10/20）总分 100： - **A1**：5 段固定结构（Figma Coverage / Real Members / `` Capability / Development Usage / `` API） - **A2**：引入 canonical 而非 runtime - **A3**：API 三表齐全（Attributes / Slots / Events，None 也显式写） - **A4**：真交互 demo（v-model + 实时回显） - **A5**：无 `:deep()` 视觉补丁 由 4 个并行只读 Explore agent 完成，每个负责 5-6 页，对照 [BreadcrumbPage.vue](../../playground/docs/pages/BreadcrumbPage.vue)。 ## 总览：22 页评分表 | 排名 | 页 | A1 | A2 | A3 | A4 | A5 | 总分 | 备注 | |---:|---|:-:|:-:|:-:|:-:|:-:|:---:|---| | — | **Breadcrumb** | 20 | 20 | 20 | 20 | 20 | **100** | **样板锚点（用户认可）** | | 1 | Switch | 20 | 20 | 20 | 20 | 20 | **100** | 合规对等者 | | 2 | InputNumber | 20 | 20 | 10 | 20 | 20 | **90** | 仅缺 Slots/Events 显式表 | | 2 | Rating | 20 | 20 | 10 | 20 | 20 | **90** | 同上 | | 2 | Tabs | 20 | 20 | 10 | 20 | 20 | **90** | 同上 | | 5 | Button | 10 | 20 | 10 | 20 | 20 | **80** | | | 5 | Input | 10 | 20 | 10 | 20 | 20 | **80** | | | 5 | Checkbox | 10 | 20 | 10 | 20 | 20 | **80** | | | 5 | Radio | 10 | 20 | 10 | 20 | 20 | **80** | | | 5 | Select | 10 | 20 | 10 | 20 | 20 | **80** | | | 5 | DateTime | 10 | 20 | 10 | 20 | 20 | **80** | | | 5 | Pagination | 20 | 20 | 0 | 20 | 20 | **80** | | | 5 | Slider | 10 | 20 | 10 | 20 | 20 | **80** | | | 5 | Steps | 0 | 20 | 20 | 20 | 20 | **80** | 用户 WIP，结构非标 | | 14 | Badge | 20 | 20 | 10 | 0 | 20 | **70** | **无任何交互** | | 14 | Tooltip | 20 | 20 | 0 | 10 | 20 | **70** | | | 14 | FormItem | 20 | 10 | 20 | 20 | 0 | **70** | 用户 WIP，5 处 :deep + Select runtime | | 17 | Notification | 20 | 20 | 0 | 0 | 20 | **60** | **无交互** | | 17 | Progress | 10 | 20 | 10 | 0 | 20 | **60** | **无交互** | | 17 | Table | 10 | 20 | 10 | 0 | 20 | **60** | **无交互** | | 17 | TopBar | 10 | 20 | 10 | 0 | 20 | **60** | **无交互** | | 17 | PromptMessage | 10 | 20 | 10 | 0 | 20 | **60** | **无交互**，依赖 dirty PromptMessage runtime | **整体均分：77.3 / 100** ## 分布 ``` ≥90 优秀: 5 页 (Breadcrumb, Switch, InputNumber, Rating, Tabs) 80-89 合格: 9 页 (Button, Input, Checkbox, Radio, Select, DateTime, Pagination, Slider, Steps) 70-79 待修: 3 页 (Badge, Tooltip, FormItem) 60-69 重修: 5 页 (Notification, Progress, Table, TopBar, PromptMessage) ``` 要达成 M1 里程碑（**所有页 ≥ 80**）需要把后 8 页升上去。 ## 按维度统计 gap | 维度 | 满分页 (20) | 部分 (10) | 不达 (0) | 痛点 | |---|:--:|:--:|:--:|---| | **A1** 5 段结构 | 10 | 11 | 1 | Steps 全错；11 页缺独立 "Real Members" 段 | | A2 canonical | 21 | 1 | 0 | 仅 FormItem（用 runtime Select） | | **A3** API 三表 | 4 | 15 | 3 | **18 页缺 Slots/Events 显式表**——最高杠杆修复 | | **A4** 真交互 | 15 | 1 | **6** | **6 页完全没 v-model**（Badge / Notification / Progress / Table / TopBar / PromptMessage） | | A5 无 :deep | 21 | 0 | 1 | 仅 FormItem（5 处，根因在 FormItem 组件本体） | ## 三大主要 gap pattern ### Pattern P1：A3 全库性缺 Slots/Events 表（影响 18 页） 绝大多数组件页只有 Attributes 表，缺 Slots / Events 显式表（即使是 None 也没写）。 修复方式：添加显式 Slots / Events 表，无 slot/event 时填 "None / 无" 行。 **优先级：最高**——一个 Codex prompt 批量加 18 页 API 段，杠杆最大。 ### Pattern P2：A4 完全摆拍页（影响 6 页） 6 页没有任何交互 demo：Badge / Notification / Progress / Table / TopBar / PromptMessage。 修复方式：每页加至少 1 个 v-model 绑定 + 实时回显的 demo card。 **优先级：高**——直接拉 6 页过 80 分线。 ### Pattern P3：A1 5 段结构不齐（影响 11 页 + 1 页全错） 11 页缺独立的 "Real Members" 段（混在其它段里），1 页（Steps）完全脱离 5 段模式。 修复方式：新加或重命名一段，让 5 段顺序完整。 **优先级：中**——A1 单独 +10 分不能跨过 80 分门槛，需配合 P1 / P2 一起。 ## 特殊 case ### FormItem（70 分） **双重问题**： - 5 处 `:deep()` 视觉补丁（[FormItemPage.vue:458-474](../../playground/docs/pages/FormItemPage.vue#L458-L474)） - Select 用 runtime 而非 canonical（[line 7](../../playground/docs/pages/FormItemPage.vue#L7)） 按 spec §5（修复层级判定）：`:deep` 是组件本体 [FormItem.vue](../../src/components/FormItem/FormItem.vue) layout 错的标志，不是 docs page 的 patch。**必须改组件本体**才能消掉 :deep。 **当前状态**：用户 WIP 中——`src/canonical/Steps.vue / StepItem.vue` 等 8 个 dirty 文件显示用户已经在按这个原则操作。FormItem 类似的修复**预期会在用户 commit 后体现**。 ### Steps（80 分但 A1=0） **结构异常**： 不按 5 段模板，使用 hero + example + API 的另一套结构。但 API 三表齐全（Attributes / Slots / Events 都有），交互也真，所以总分还有 80。 **当前状态**：用户 WIP——可能正按 EP 模式重组。等用户 commit 后再评估。 ### PromptMessage（60 分） 依赖的 [src/components/PromptMessage/PromptMessage.vue](../../src/components/PromptMessage/PromptMessage.vue) 是用户 dirty WIP——评估的当前状态可能不是用户最终意图。 ## 建议的修复批次（Phase D 输入） 按 ROI 顺序： | 批次 | 修复内容 | 影响页数 | 难度 | 预期分数提升 | |---|---|---:|---|---| | **D1** | 全库加 Slots/Events 显式表（None 也写） | 18 页 | 低 | 平均 +10 | | **D2** | 6 页加真交互 demo | 6 页 | 中 | 这 6 页 +20 | | **D3** | 11 页加独立 "Real Members" 段 | 11 页 | 低-中 | 这 11 页 +10 | | **D4** | FormItem 组件本体 layout 修复 + Select 切 canonical | 1 页 | 中 | +30 | | **D5** | Steps 结构对齐 5 段 | 1 页（用户 WIP） | 取决于 WIP 走向 | 等用户 commit 后再判 | **预期 M1 落地后**：22 页全部 ≥ 80，整体均分 ≥ 90。 ## 需要校准的评分一致性问题 Agent 之间对"A3 = 20 分"的标准不一致： - Agent 4 给 Breadcrumb / FormItem A3 = 20，理由是"Attributes 完整，组件不需要 Slots/Events" - Agent 1 给 BadgePage A3 = 10，理由是"缺 Events 表" - 实际 BreadcrumbPage 也没有显式 None 写在 Slots/Events 处 **spec 定义模糊**：到底 "Attributes only + 组件确实无 slot/event" 算合规（20）还是不合规（10）？ **建议**：spec 收敛时明确——必须显式 "None / 无" 行。这样**Breadcrumb 自己也只能拿 90 分**，倒逼样板更新。这才符合 "spec 跟着现实走"——发现样板有 gap 时，先修样板再立 spec。 ## 数据出处 本基线由 4 个并行 Explore agent 在 2026-04-28 18:30 左右生成，每个 agent 评估范围： - Batch 1（agent 1）：Button / Badge / Input / InputNumber / Checkbox / Radio - Batch 2（agent 2）：Switch / Select / DateTime / Notification / Tooltip / Pagination - Batch 3（agent 3）：Progress / Slider / Rating / Table / TopBar - Batch 4（agent 4）：Breadcrumb（锚点）/ FormItem / PromptMessage / Steps / Tabs 数据未保存到 `figma-data/` 因为本次评估属于人工辅助盘点，不是机器化 audit。Phase D 后会写正式 audit 脚本，届时数据落 [audit-docs-page-conformance.json] 等机器产物。 --- 下一步走向：[Phase D Codex prompt 批量设计](_prompts/) — 详见 [long-term-plan-2026-04-28.md](long-term-plan-2026-04-28.md) Phase D 节。