# 消息中心 · 设计说明（messages.vue）

> 单元：`messages` ｜ group=account ｜ P 依据：§0.1「消息中心＝首页铃铛＋我的页入口」+ 需求卡通用行
> 实现：`vue/src/pages/messages.vue` ｜ 组状态帧 fixtures：`design/fixtures/account.states.json`

## 1. 区块与密度对照

| 区块 | 实现落点 | 密度 | 达成 |
|---|---|---|---|
| ① 顶栏：全部已读 | NavBar 右侧「全部已读」→ 二次确认 Sheet（防误触，dims B） | — | ✓ |
| ② 分组列表 3 组 | `.groups`：交易/圈子/系统（messages mock），行=类型图标+标题+摘要+相对时间+未读红点 | **组 3 · 样例 5 条** | ✓ |
| ③ 点击跳对应页 | 交易→item（含拍品名消息）、圈子→post/circle、系统→toast 占位（to=null） | — | ✓ |
| 未读双通道 | 未读=红点+标题加粗（不单靠颜色，dims H） | — | ✓ |

## 2. 状态帧

| 帧 | 渲染 |
|---|---|
| normal | 3 组满数据（未读 2 条由数据推导） |
| empty | EmptyState「暂无消息，有新动态会第一时间告诉你」+去逛逛→home |
| loading | SkeletonList×4 |
| error | ErrorRetry 黄条+保留缓存内容 |
| extreme | 顶部未读压测条「未读 999+」（>99 折叠 99+ 语义，dims B） |
| guest | 登录引导 EmptyState→login（消息需登录 §0.4） |

## 3. 九维 A–I

- **A**：分组空态=empty 帧（全组无消息口径）；guest 必出。
- **B**：全部已读二次确认；消息点击即置已读（本地示意，正式 POST /messages/read）。
- **C**：N/A（无表单，pages.json na_reason）。
- **D**：相对时间（刚刚/x分钟前/昨天）；未读红点+加粗双通道。
- **E**：深链按消息类型（item/post/circle）；物理返回=回上一页。
- **F**：按 §0.5（交易三时机订阅推送，拒绝→本中心兜底——兜底载体即本页）。
- **G**：按 §0.6（分页 10/页语义）。
- **H**：未读双通道；行点击区 44pt+。
- **I**：`GET /messages?group`；`POST /messages/read`（占位）。

## 4. 决策点

| 决策触点 | 对应 |
|---|---|
| 第一时间知道被超价/中标/回复 | 交易组消息（被超出/已领先）置顶+未读双通道 |

## 5. 占位

- 消息数据全部为 mock 示意（messages）；「系统通知详情」入口 toast 占位（无落地页）。
- 时间分隔/相对时间为样值【占位】。