component-architect

name	component-architect
description	审计并收敛 Vue3 + Vant 项目与 Pencil `.pen` 设计稿中的重复 UI 结构，判断哪些应该复用为同一组件、哪些适合做同源变体、哪些必须拆分。用于用户提到组件抽取、组件统一、组件架构、复用评审、Top Bar、状态栏、底部导航、商品卡片、搜索栏、空态、订单行，或要求同时检查设计稿与代码里还有哪些可合并组件时。

Component Architect

Overview

用于做“组件层面的架构收敛”，而不是宏观分层设计。目标是先识别真实重复，再把设计稿里的可复用引用和代码里的共享组件统一起来，避免误把“看起来相似”当成“已经复用”。

Workflow

1. 先分别审计设计稿与代码，不要只看其中一侧就下结论。
2. 先确认重复结构是否来自同一个组件源，再判断是“已统一”“可合并”“应保持分离”。
3. 优先收敛高频且稳定的页面壳层结构，再处理业务块。
4. 优先复用现有组件来源；只有现有来源不合适时才创建新组件。
5. 收敛后必须验证设计稿引用关系和代码构建结果，不能只做结构改写。

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

输出时直接给出：

1. 哪些结构已经是同一个组件，哪些只是看起来像同一个。
2. 哪些应合并为一个组件加变体，哪些应继续拆开。
3. 合并后的组件归属目录与命名建议。
4. 仍未落地的重复项、风险点与验证结果。