# P01 首页 · 设计说明（home.vue）

> 单元：`home` ｜ group=core ｜ P01 ｜ 依据：pages.json unit#1 + 规格表 P01 + 执行方案 §5.1
> 实现：`vue/src/pages/home.vue` ｜ 状态帧 fixtures：`design/fixtures/home.states.json`

## 1. 区块与密度对照（密度为可验收硬指标）

| 区块 | 实现落点 | 密度 | 达成 |
|---|---|---|---|
| ① 顶栏：logo「拍谷」+搜索框+铃铛未读红点 | `.topbar`（红点数=messages 未读推导=2，§0.1 消息中心入口） | — | ✓ |
| ② Banner 运营位 | `.banner`：左语义文字（banners.t/s）+右插画素材位（banner-character，home-banner-art 白名单槽）；第 2 帧 art=null→`.ph` 专场插画位；双指示点可点切 | 1–5 张后台可配语义 | ✓ |
| ③ 金刚区 8 宫格 | `.kgrid`=kingkong 8 项，樱粉/天蓝交替 icon 底（非单靠颜色区分列） | **8（≥6）** | ✓ |
| ④ 即将截拍横滑 6 卡 | `.strip`：endingSoon 6 张（图/成色角标/标题单行/当前价红/出价数/倒计时） | 6 卡×6 信息点 | ✓ |
| ⑤ 分类吸顶 tab + 双列瀑布流 | sticky SegmentTabs(cats) + ItemCard×8（共享组件 8 信息点：图/成色/标题两行/当前价/出价数/倒计时/卖家昵称/信用徽章+即将截拍 pill） | **卡 8 点（≥6）** | ✓ |
| ⑥ TabBar | active=home，中央发布→publish-sheet | — | ✓ |
| 首屏（375×812 未滚动） | 搜索+banner+金刚区+即将截拍首卡全部可见（hero.png 实测） | — | ✓ |

## 2. 状态帧（STATES 顺序=状态板帧序）

| 帧 | 渲染 | 数据 |
|---|---|---|
| normal | 全区块满数据 | banners/kingkong/items/endingSoon/users |
| empty | 仅拍品流空态「还没有竞拍中的拍品」+去发布第一件→publish-item；金刚区/banner/横滑常驻 | — |
| loading | 双列 SkeletonList×4（页面侧最短 400ms 防闪烁为交互语义） | — |
| extreme | 压测卡（金额 299999.99 由 fmtMoney 呈现/计数 999+/超长标题两行截断/倒计时跨天 3天HH:MM）置于横滑首位+瀑布流首位；横滑其余卡与压测卡按 itemId 去重防同卡重复上屏。**瀑布流压测卡为页内内联卡（.xcard，计数走 fmtCount=999+）**——共享 ItemCard 直出原始计数且本组不可改共享层，故 extreme 帧不用 ItemCard 渲染压测数据（验收修复项） | extremeItem=items[0] 覆写（压测样值，见 fixtures json） |
| error | ErrorRetry 顶部黄条「已保留缓存内容」+正常内容随后（缓存保留语义） | — |
| guest | N/A（pages.json na_reason：纯浏览页） | — |

## 3. 维度差异（未列者继承规格表 §0）

- B：下拉刷新=toast「已更新」（onRefresh）。
- C：N/A（搜索 30 字上限归 search 页，pages.json na 理由）。
- E：搜索→search｜铃铛→messages｜金刚区 8 目标：6 个注册 key 直达，「新人指南」「每日签到」无落地页→toast 占位（见 §5）。
- F：分享卡片「拍谷·今日好物竞拍中」为交付语义（本稿未画分享面板，属平台能力非页面区块）。
- 触达（§0.7）：顶栏搜索框/铃铛 44px；横滑卡标注字号统一 tokens 标注档 11px（原 9px 已修）。
- extreme 帧横滑压测卡价格与计数允许两行排布（wrap），计数不折行断词。
- I：GET /home/aggregate、GET /items?category&page（字段映射见 docs/字段映射.md）。

## 4. 走查规避对照（pitfall_avoid）

| 走查错误 | 本页规避 |
|---|---|
| 即将截拍两卡卖家示意重复 | 横滑 6 卡卖家由 items 数据轮换（me/ying/shichi/zhou/duhe/shichi），且横滑卡不渲染卖家行；同素材不重复上屏（extreme 帧按 id 去重） |
| banner 整图烤字 | banner 文字全部语义代码绘制，右侧仅插画素材位（banner-character 槽位白名单=home-banner-art） |

## 5. 占位与素材缺口（随交付占位清单）

- 【业务口径提示（验收提出，非红线）】banner 占位文案「新人首拍·保价护航／首单成交平台补贴运费」含补贴/保价承诺语义，虽带「运营位·后台可配」披露标签且未冒充鉴定/认证/真实成交，上线前需业务侧确认占位口径（数据源 mock.js.banners，共享层，本组不可改，提请底座/业务确认）。
- 空态沿用共享 EmptyState 图标式（粉色圆底+gavel），规格 §0.4 的「插画」位正式插画资产列素材缺口（需主代理批准）。
- 「新人指南」入口：toast 占位（无落地页，目标页不在 35 单元）。
- 「每日签到」：toast「今日已签到 · 信用分 +0.1」（数据自带 toast 文案，示意）。
- banners[1].art=null → `.ph` 专场插画位（素材缺口：第二张运营插画）。
- items 中 img=null 的 4 条（1003/1005/1007/1008）→ ItemCard 内建 `.ph` 角标占位。
- **给底座的冲突登记**：items[5]（1006 白鹭色纸）img=`wulu-post-shot`，其 manifest 槽位白名单=[post-image, post-thumb]，经共享 ItemCard 以 item-card-cover 语义渲染——属共享数据与素材清单的口径冲突，本组不改共享层，提请底座仲裁（换键或扩白名单）。

## 6. 压测样值声明（仅状态帧使用，非业务数据）

extremeItem：current=299999.99、bids/watchers=9999、endTs=items[0].endTs+3 天；标题=原题+「·限定特别版全球首弹特典付属超长标题压测示意」。数值均落在 fixtures json 内登记，页面文件零 ¥ 字面量（金额一律 fmtMoney 运行时格式化）。

## 7. 2026-10-10 五页剩余问题修复记录

- **extreme 压测卡「即将截拍」红 pill**：此前 home.vue 无条件硬编码，与同卡「3天02:12」倒计时直接矛盾，且同帧横滑压测卡（无 pill）语义倒置——改按 `countdown(extremeItem.endTs).urgent` 条件渲染（压测 endTs=+3天 → 恒不显），对齐共享 ItemCard `v-if="cd.urgent"` 契约与 §0.2（<10min 才红）。此前 fixtures/状态清单对该 pill 零登记即非有意设计佐证，本条即补充登记。
- 强检：scripts/repair_capture.py 断言「`.xflag` 数=0」「倒计时含『天』」，states-2.png 重拍复核通过。