# P09 圈子详情 · 设计说明（circle-detail.vue）

> 单元：`circle-detail` ｜ group=community ｜ P09 ｜ 依据：pages.json unit#13 + 规格表 P09 + 执行方案 §5.13
> 实现：`vue/src/pages/circle-detail.vue` ｜ 状态帧 fixtures：`design/fixtures/community.states.json`
> 演示圈＝GK手办圈（circles[4]，唯一带封面素材键）

## 1. 区块与密度对照

| 区块 | 实现落点 | 密度 | 达成 |
|---|---|---|---|
| ① 圈头部 | 封面（素材键→img / null→.ph）+ 圈名 + 「成员 2.4万 · 帖子 N（示意）· 今日 53 帖」+ 加入/已加入双通道按钮 | 区块 5 | ✓ |
| ② 公告栏 | 浅粉卡：公告 Pill + 圈规文案 + 「圈主发布 · 后台可管」来源注 | — | ✓ |
| ③ 精华帖置顶 2 条 | 「精」标＝star 图标+文字双通道（Pill warn），行＝标题+相对时间→post | **精华 2** | ✓ |
| ④ 帖子流（最新） | PostCard 列表（8 点，同广场）；locked 帧只显示前 3 帖 | — | ✓ |
| ⑤ 底部发帖按钮 | AppButton block→publish-post（预选本圈为接口语义，注释登记）；脚注随 joined 切换 | — | ✓ |

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

| 帧 | 渲染 |
|---|---|
| normal | 已加入视角：全量帖子流+「已加入」实心底+「没有更多了」 |
| locked | 入圈门槛【后台开关】：前 3 帖 + 蓝底屏障「未加入圈子，仅可浏览前 3 帖」+「加入后查看更多」按钮；头部按钮切「+ 加入」描边态 |
| empty | 圈内无帖 EmptyState「这个圈子还很安静，来发第一帖」→publish-post |
| loading | 帖子流骨架 ×3 |
| error | ErrorRetry 黄条「已保留缓存内容」+缓存帖子随后 |
| guest | N/A（pages.json na_reason：浏览免登录，门槛语义已由 locked 帧承载） |

## 3. 九维度

- **A**：locked 为本页特色态（入圈门槛≠登录态）；empty/loading/error 按基线。
- **B**：加入按钮同广场语义（toast 示意）；屏障按钮=加入引导；精华行/帖子卡按压态。
- **C**：N/A——发帖表单在 publish-post（pages.json na 同口径）。
- **D**：成员/帖子/今日帖数 tabular；「帖子 4（示意）」明示为共享池演示口径。
- **E**：帖子卡→post；头像→seller-profile（PostCard 内建）；NavBar 返回→circle；发帖→publish-post。
- **F**：分享＝圈卡片（右上分享钮 notify 语义）。
- **G**：封面/帖图懒加载；按 §0.6。
- **H**：精华「精」标=图标+文字双通道；locked 屏障=图标+文字+按钮（非单靠颜色）；胶囊位按平台示意。
- **I**：GET /circle/{id}、GET /posts?circle={id}；加入 POST（toast 示意）。

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

| 决策点 | 落点 |
|---|---|
| 这个圈值不值得加入 | 头部（成员数/今日帖）+公告栏圈规+精华 2 条直给 |
| 加入获得完整浏览 | locked 帧 3 帖后屏障【后台开关】 |

## 5. 占位与数据缺口（登记于 fixtures）

- **数据缺口（提请底座扩展 mock）**：mock 无按圈分组帖子与帖子总数——本稿以共享帖子池演示密度（真实接口按圈过滤），帖子总数=池长派生并显式标注「（示意）」。
- 公告文案=页内示意占位（真实为后台/圈主发布字段）。
- 圈封面 wulu-figure-banner 白名单无 circle-cover 槽位（同 circle 页冲突登记）。
- 精华帖=池内示意 picks（真实接口按 circle+featured 过滤）。