# P08 圈子广场 · 设计说明（circle.vue）

> 单元：`circle` ｜ group=community ｜ P08 ｜ 依据：pages.json unit#12 + 规格表 P08 + 执行方案 §5.12
> 实现：`vue/src/pages/circle.vue` ｜ 组内私有组件：`components/community/CircleCard.vue`（圈卡）、`PostCard.vue`（帖卡，feed 模式）
> 状态帧 fixtures：`design/fixtures/community.states.json`（本组单文件）

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

| 区块 | 实现落点 | 密度 | 达成 |
|---|---|---|---|
| ① 顶栏：搜圈子 + 「我的圈子」入口 | `.topbar`：搜索胶囊→search；「我的圈子」按钮→页内半屏抽屉（Sheet，无独立路由不进注册表，pages.json notes） | — | ✓ |
| ② 推荐圈子横滑卡组 | `.strip`：circles 6 张（封面/圈名/成员数/今日新帖/加入按钮 = **圈卡 5 点 ≥4**）；加入/已加入双通道（描边+加入 vs 实心底+✓） | 5 点 | ✓ |
| ③ 圈子分类 tab | SegmentTabs(circleCats) 6 项：推荐/手办/谷子/卡牌/模型/盲盒 | **6（≥5）** | ✓ |
| ④ 帖子流 | PostCard ×4：作者头像/昵称/圈名标签/标题单行/摘要两行/图 1–3 缩略/点赞·评论数/相对时间 = **帖卡 8 点（≥7）**；含 itemId 追加「含挂拍品」引导行（不渲染价格） | 8 点 | ✓ |
| ⑤ 右下建圈 fab | Fab「建圈」→create-circle；**走查规避**：内容流底部 tail=72px（fab 高 46+24，TabBar 上方折算），fab 不压末帖图（hero/normal 实测） | — | ✓ |
| ⑥ TabBar | active=circle，中央发布→publish-sheet | — | ✓ |

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

| 帧 | 渲染 | 数据/说明 |
|---|---|---|
| normal | 全区块满数据 | circles/circleCats/posts/users |
| empty-posts | 帖子流 EmptyState「圈子还安静，发第一帖」→发第一帖→publish-post；推荐圈/分类常驻 | — |
| empty-mine | 「我的圈子」抽屉强制展开 + EmptyState「还没有加入圈子，去逛逛 →」（抽屉空态即本帧） | — |
| loading | 帖子流列表形骨架 ×3（.sk，页面侧最短 400ms 防闪烁为交互语义） | — |
| error | ErrorRetry 顶部黄条「已保留缓存内容」+缓存帖子随后 | — |
| extreme | 压测：circles[0] 覆写成员 12.8万/今日帖 1288→999+；posts[0] 覆写赞·评 9999→999+ 与超长标题（两行/单行截断） | 压测样值见 fixtures extreme_fixture_values；圈卡/抽屉行 today 截断经 CircleCard fmtCount 实现（2026-10-10 验收看查修复项） |
| guest | 浏览免登录=正常内容；「加入」→登录引导 Sheet（一键登录→login；遮罩可点关，与 bid-sheet lockMask 对照） | — |

## 3. 九维度（未列者继承规格表 §0 全局基线）

- **A**：双空态（empty-posts 帖子流 / empty-mine 抽屉）+ 六态全成帧；guest=浏览态+登录引导。
- **B**：「加入」点击即切实心底+toast「已加入 XX（原型示意）」（本地 Set，不改共享数据池）；fab 避让数值化（本文件 §1⑤）；卡片按压 scale 0.96/0.98。
- **C**：N/A——建圈表单在 create-circle（pages.json na 同口径）；搜索词上限在 search 页。
- **D**：成员数/今日帖数按 §0.9 万位口径（谷子展示柜 6.8万 等，**不搬参照图 3268**，走查规避②）；计数 >999 显示 999+（CircleCard fmtCount，卡/抽屉两形态统一）；时间相对化。
- **D（口径偏差登记）**：规格表 P08 原文分类 tab 为「…盲盒/**综合**」，本包统一为「**推荐**」（mock.js circleCats[0]、circle.vue active='推荐'），与底座数据底稿/首页金刚区口径自洽；密度 6≥5 不受影响。规格表与 pages.json 非本组可改文件，偏差在此登记待底座同步。
- **E**：帖子卡整体→post；头像→seller-profile（事件冒泡隔离）；圈卡→circle-detail；「我的圈子」=页内半屏抽屉；搜索→search；fab→create-circle；TabBar 发布→publish-sheet。
- **F**：分享卡片＝圈名+成员数+封面（平台能力语义，未画分享面板）。
- **G**：图片懒加载（img loading=lazy）；横滑/瀑布流同屏无重复素材（走查规避①）。
- **H**：加入/已加入双通道（底色+✓+文字）；可点区域：圈卡整卡可点达标；「加入」钮视觉高 26px、「我的圈子」入口视觉高 34px，**命中区经 ::after 外扩均 ≥44pt**（CircleCard.vue `.join::after` inset -6/-6/-12、circle.vue `.mine::after` inset -5，2026-10-10 验收看查修复项，静态截图不呈现热区、以代码为准）；.ph 缺口位带「示意图」角标不冒充实拍；圈卡「今日新帖」行对比度由 --text-3（3.26:1）统一升 --text-2（5.44:1，与成员数同档）。
- **I**：GET /circles/recommend、GET /posts?circle&page、POST /circles；加入动作正式实现 POST（本稿 toast 示意）。

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

| 决策点 | 落点 |
|---|---|
| 找到同好圈（推荐+分类） | 推荐圈横滑（CircleCard 5 点）+ circleCats 6 分类 tab |
| 有什么新帖（热帖流直给） | PostCard 流（8 点直读）+「含挂拍品」行直通 item |
| 加入门槛 | guest 引导弹层/empty-mine 抽屉 |

## 5. 占位与素材缺口（随交付占位清单；详见 fixtures placeholderEntries/assetConflicts）

- 5/6 圈封面 img=null → CircleCard 内建 `.ph`「示意图」角标（缺口：各圈专属封面素材）。
- GK手办圈 img=wulu-figure-banner：manifest 白名单无 **circle-cover** 槽位 → 按共享数据渲染，冲突登记提请底座仲裁（本组不改共享层）。
- 「发现更多圈子」抽屉行 = notify 占位（无落地页）。
- 分类 tab 切换 = notify「列表刷新示意」（mock 无按分类帖子字段，缺口登记）。