# 组件映射表（设计元素 ↔ 共享组件；样板源码＝pages/spec.vue）

> 各组只允许用本表组件拼页；缺新共享件时在本表登记提案，由底座评估落入 components/（禁自行改共享层）。

## 家具（固定 UI）

| 设计元素 | 组件 | 关键 props | 状态 |
|---|---|---|---|
| 状态栏（9:41/信号） | `StatusBar.vue` | — | 静态示意 |
| 导航栏 | `NavBar.vue` | title / back / capsule / #right 插槽 | back 按压 tint |
| 小程序右上胶囊 | `Capsule.vue` | — | 纯 SVG 家具 |
| 底部导航 5 项 | `TabBar.vue` | active；emit navigate/publish | 中央凸起发布=grad-brand |
| 图标 | `Icon.vue` + `icons.js` | name/size | currentColor；唯一 SVG 家族，禁 emoji |

## 交互件

| 设计元素 | 组件 | 关键 props | 必备状态 |
|---|---|---|---|
| 按钮 | `AppButton.vue` | variant(primary/soft/line/ghost/danger/accent)、size(sm/md/lg)、block、disabled、loading | **disabled(降透明45%) 与 loading(转圈锁点) 必须成帧** |
| 表单字段 | `FormField.vue` | label/required/error/count | 错误红字+!号图标；错误时控件描边红 |
| 半屏弹层 | `Sheet.vue` | title/lockMask/open | lockMask=true 遮罩不可点关（bid-sheet 契约） |
| 动作面板 | `ActionSheet.vue` | items[{icon,label,desc,danger}] | 遮罩可点关（publish-sheet 契约） |
| 浮动按钮 | `Fab.vue` | label/icon | 页面负责 tail≥fab+24 避让 |
| 分段 tab | `SegmentTabs.vue` | tabs/active | 选中=加重+下划线双通道 |

## 数据展示件

| 设计元素 | 组件 | 关键 props | 备注 |
|---|---|---|---|
| 商品卡（8 信息点） | `ItemCard.vue` | item(mock) | 图=asset(key)，null→.ph 示意占位；成色角标/价格/出价数/倒计时/卖家信用/即将截拍 |
| 状态标记 | `Pill.vue` | tone(primary/red/green/gray/warn/blue)/icon | 6 tone 全部 ≥4.5 实测 |
| 金额 | `PriceText.vue` | value/big/label | fmtMoney 同源，¥+两位小数+千分位 |
| 倒计时 | `CountDown.vue` | endTs | ≥1天 x天HH:MM / <1天 HH:MM:SS / <10min 红+脉动+「即将截拍」/结束「已截拍」 |
| 空态 | `EmptyState.vue` | text/actionText/icon | 禁一片空白 |
| 错误重试 | `ErrorRetry.vue` | text/inline | 黄条+重试，非死白屏 |
| 骨架屏 | `SkeletonList.vue` | count | 页面保证最短 400ms 防闪烁 |
| 用户头像 | `AvatarUser.vue` | userKey/size | 登记素材图 / 缺口→首字符示意 |

## 页面 ↔ 组件装配对照（核心链路）

| 页面 | 装配要点 |
|---|---|
| home | StatusBar+自绘顶栏(搜索+铃铛)+Banner(左文右 banner-character 图)+金刚区 8 宫+endingSoon 横滑(ItemCard 复用)+分类瀑布流+TabBar |
| item | NavBar(capsule)+图集(点击→image-preview)+竞价面板(PriceText big+CountDown+AppButton×2)+参数表+卖家卡(AvatarUser)+bidLog+推荐+底部操作栏 |
| bid-sheet | 整页=Sheet(lockMask)+拍品缩略行+FormField(金额)+快捷档+AppButton(提交中 loading)——状态机见状态清单.md |
| circle | 顶栏+推荐圈横滑+SegmentTabs+PostCard*(组内自建，挂拍品卡价格单渲染点)+Fab(建圈)+TabBar |
| info | SegmentTabs(出物绿/求购橙/资讯蓝)+InfoCard*(组内自建)+Fab(发布) |
| orders | SegmentTabs(6 状态)+OrderCard*(组内自建，待支付倒计时超时前 1h 红) |
| mine | 用户卡(AvatarUser+信用徽章+实名标识[开关显隐])+资产只读行+订单 4 入口(角标 99+)+工具区 |

*组内自建卡组件一律内联在各页 .vue 文件内（文件隔离规则），数据仍取自 mock.js。

## 核心 6 页契约基线（2026-10-10 已构建+渲染验证，后续分组照此执行）

core 组 home/bid/item/bid-sheet/publish-item/my-auctions 已通过：`npm run build`（各自成 chunk）→ `render.py --only 六页`（0 报错 0 console error）→ 截图逐张 Read 目检。由此固化的稳定契约：

1. **页面骨架**：`defineProps({ state: { type: String, default: 'normal' } })` + 普通 `<script>` 块 `export const STATES = [...]`；新状态帧**先登记 pages.json 再落帧**（样例：bid-sheet `buyout` 帧为本轮注册层同步项），帧名与 pages.json `states[].name` 一致，`v-if="state==='x'"` 真实成帧。
2. **数据入口（fixture）**：只 import `../data/mock.js` 既有导出（items/itemDetail/users/myBids/myItems/favorites/categories/conds/feeNote/drafts/banners/kingkong/endingSoon/cats/messages…）；素材 `asset(key)`（null→`.ph` 示意占位，绝不冒充实拍）；金额一律 `fmtMoney`（页面零 ¥ 字面量，门禁 6 强制）。
3. **素材槽位白名单是硬约束**：`detail-gallery-main` 当前对所有裁切素材禁入（均 <1080px），详情图集主位落 `.ph` 缺口占位+披露文案——后续分组遇大图位照此，不得自行放宽（放宽=改 docs/asset-manifest.json，属底座职权）。
4. **交互件既有范例**（可直接抄的页内用法）：`Sheet lockMask`（bid-sheet 遮罩不可点关 vs publish-sheet 可点关）、`Pill` 状态双通道、`CountDown` 紧迫脉动、`FormField` 错误红字+计数、`SegmentTabs` 吸顶、`ItemCard` 消费（home/bid/my-auctions 三处复用零改组件）、`Fab`+内容流 tail≥fab+24。
5. **注册与门禁**：新页面落盘 `src/pages/{key}.vue` 后无需改 App.vue（import.meta.glob 自动收编，构建各自成 chunk）；pages.json 为状态/密度真值；改 pages.json 后必须 `python3 scripts/gen_hashes.py` 刷新基线再跑 `verify.py`（哈希防漂移门禁 7）。
6. **作者页面文件本轮零改动**——注册层同步仅触及 pages.json / docs/状态清单.md / hashes.json。