# P09 帖子详情 · 设计说明（post.vue）

> 单元：`post` ｜ group=community ★★★ ｜ P09 ｜ 依据：pages.json unit#14 + 规格表 P09 + 执行方案 §5.14
> 实现：`vue/src/pages/post.vue` ｜ 挂拍品卡＝`components/community/PostCard.vue` mode=attach（价格单渲染点）
> 状态帧 fixtures：`design/fixtures/community.states.json`

## 1. 区块与密度对照

| 区块 | 实现落点 | 密度 | 达成 |
|---|---|---|---|
| ① 楼主卡 | 头像（→seller-profile）+昵称+圈名标签+相对时间+「+关注」按钮（busy 期禁用=防连点，已关注切实心底） | 区块 8（≥7） | ✓ |
| ② 标题 | 20px/800 单行块 | — | ✓ |
| ③ 正文图文 | postDetail.paragraphs 三段（图文正文） | — | ✓ |
| ④ 九宫格图 | 3 缩略（post-image/post-thumb 白名单素材；null→.ph）→image-preview 全屏层 | — | ✓ |
| ⑤ 挂拍品卡 | **PostCard mode=attach**：图+题+当前价+倒计时+去出价 = **5 点（≥4）**；卡身→item，「去出价」→bid-sheet；**价格只渲染一处（PriceText 唯一实例，走查规避「当前价残字重复」）** | 5 点 | ✓ |
| ⑥ 话题标签 ≤3 | tags 3 枚（点击 notify 占位：话题聚合页不在本轮范围） | ≤3 | ✓ |
| ⑦ 点赞/收藏/举报 | 点赞双通道（心形+数字，>999→999+）；收藏/分享；举报在 NavBar「···」ActionSheet→report | — | ✓ |
| ⑧ 评论区两级 | 评论+楼中楼回复（「作者」徽章）；头「评论 N」；输入条 confirm「发送」+发送中禁言锁（按钮+输入禁用）+200 字计数 | — | ✓ |

## 2. 状态帧（board_parts=3）

| 帧 | 渲染 |
|---|---|
| normal | 满数据（挂拍品卡=item1001，与首页/详情/圈子同图同价同源） |
| empty | 评论区「还没有评论，来抢首评」（正文/楼主卡常驻）；**评论计数同步归 0**（「评论 0」「0 条评论」，2026-10-10 验收看查修复：原帧计数与空态同屏矛盾） |
| loading | 内容骨架（楼主行+正文行+三图块） |
| error | ErrorRetry 黄条「已保留缓存内容」 |
| deleted | 整页 EmptyState「该内容已被删除或下架」+去逛逛→circle（§0.4 内容删除态） |
| guest | 浏览免登录；点赞/收藏/关注/举报点击 notify 引导；**底部评论栏切换为「登录后参与评论」登录入口帧**（→login） |
| extreme | 赞/评论 9999→999+；新增超长评论（共享评文派生，验证长评自动换行） |

## 3. 九维度

- **A**：评论区空态+帖子删除态为差异态；guest=互动拦截呈现。
- **B**：点赞双通道；关注防连点（busy 禁用+「处理中」文案）；举报=ActionSheet→report；发送中禁言锁成帧（submitting 文案+禁用）。
- **C**：评论 200 字+计数器（输入后显示 n/200）；confirm 键=发送（enter-key-hint）。
- **D**：相对时间；长评自动换行不截断（extreme 帧验证）；评论数=详情评论数组长度（postDetail.comments 覆盖流卡计数字段，口径见 fixtures）。
- **E**：九宫格→image-preview；挂拍卡「去出价」→bid-sheet（帖内直参拍）；卡身→item；举报 ActionSheet→report；物理返回与页面栈一致（NavBar back→circle）。
- **F**：分享卡片＝帖子标题+首图（分享钮 notify 语义）。
- **G**：九宫格懒加载；大图浏览为独立全屏层。
- **H**：点赞/收藏/关注均图标+文字；作者徽章双通道。**触点尺寸（2026-10-10 验收看查修正声明）**：关注钮视觉高 30px、发送钮视觉高 40px（输入条同步 40px）、挂拍卡「去出价」视觉高 32px，三者命中区均经 `::after` 外扩至 ≥44pt（post.vue `.follow::after`/`.send::after`、PostCard.vue `.abtn::after`）；静态截图只呈现视觉高度，热区以代码为准。发送钮禁用/发送中呈深粉字浅粉底（5.38:1），不再用白字 opacity .45（实测 1.48:1）。
- **I**：GET /post/{id}、POST /post/{id}/comments、POST /post/{id}/like（全部 toast 演示，不接真实接口）。

## 4. 决策触点 → 字段/组件

| 决策点 | 落点 |
|---|---|
| 帖内即可参拍 | 挂拍品卡 5 点直给，「去出价」直跳 bid-sheet |
| 这帖可信吗/作者是谁 | 楼主卡（头像/圈名/关注）+评论区作者徽章 |

## 5. 占位与走查规避

- 走查规避：挂拍品卡价格**只渲染一处**（PostCard mode=attach 内 PriceText 唯一实例；本页无第二个金额渲染点）。
- 挂拍图 item1001 img=wulu-figure-banner 以 item-card-cover 槽位语义渲染（白名单内）。
- 回复评文含预期价（共享 mock 数据层自带，非本页字面量）；「复制链接/不感兴趣」=notify 占位动作。
- 评论回复行内「回复」按钮=notify 占位（回复输入器不在本轮帧清单，交互语义登记 fixtures）。