| name | component-architect |
| description | 审计并收敛 Vue3 + Vant 项目与 Pencil `.pen` 设计稿中的重复 UI 结构，判断哪些应该复用为同一组件、哪些适合做同源变体、哪些必须拆分。用于用户提到组件抽取、组件统一、组件架构、复用评审、Top Bar、状态栏、底部导航、商品卡片、搜索栏、空态、订单行，或要求同时检查设计稿与代码里还有哪些可合并组件时。 |
Component Architect
Overview
用于做“组件层面的架构收敛”，而不是宏观分层设计。目标是先识别真实重复，再把设计稿里的可复用引用和代码里的共享组件统一起来，避免误把“看起来相似”当成“已经复用”。
Workflow
- 先分别审计设计稿与代码，不要只看其中一侧就下结论。
- 先确认重复结构是否来自同一个组件源，再判断是“已统一”“可合并”“应保持分离”。
- 优先收敛高频且稳定的页面壳层结构，再处理业务块。
- 优先复用现有组件来源；只有现有来源不合适时才创建新组件。
- 收敛后必须验证设计稿引用关系和代码构建结果，不能只做结构改写。
Audit Order
- 先看高频稳定壳层：
Top Bar、状态栏、底部导航、搜索栏、空态。
- 再看跨页面业务展示块：商品卡片、订单店铺头、订单商品行、绑定面板、抽屉共用内容。
- 最后看只在单一流程中复用的局部块，避免过早提升到全局。
Merge Rules
- 文案、图标、右侧操作、插槽内容、显隐开关不同，但骨架一致时，优先合并为同一组件的变体。
- 页面头部与弹层头部如果只是高度、返回按钮、标题区配置不同，可以基于同一组件做变体。
- 布局骨架、交互模型、信息密度、间距体系明显不同，就不要强行合并。
- 先找现有组件源，再把手写重复节点替换为该组件实例；不要先新建一个几乎等价的新组件。
- 在 Pencil 中，只有
type: "ref" 且存在 ref 指向组件源，才算真的复用；视觉相似不算。
- 在代码中，只有真正共享同一实现或同一基础组件变体，才算统一；复制同样 JSX/Vue 模板不算。
Placement Rules
- 无业务语义的通用壳层组件放
shared/ui，例如 PageTopBar、MainBottomNav、SearchField、EmptyState。
- 带明确实体语义的展示块放
entities/*/ui，例如订单店铺头、订单商品行。
- 只服务单一用户动作或流程的复用块放
features/*/ui，例如会员卡绑定面板。
- 仅在某个页面成立、暂时没有稳定复用面的结构，先留在页面局部，不要过早抽到
shared。
Verification
- 设计稿侧：确认重复节点已替换为真实组件引用，而不是仅复制样式。
- 代码侧：确认旧重复实现已移除，没有残留平行版本。
- 命名侧：确认组件职责与目录层级一致，不把业务组件误放到
shared/ui。
- 结果侧：至少完成一次构建或等价校验，避免抽象后出现导入、插槽、样式回归问题。
Delivery Rule
输出时直接给出：
- 哪些结构已经是同一个组件，哪些只是看起来像同一个。
- 哪些应合并为一个组件加变体，哪些应继续拆开。
- 合并后的组件归属目录与命名建议。
- 仍未落地的重复项、风险点与验证结果。
