圈子帖子列表
某个圈子的帖子列表页:顶部展示圈子名与简介,桌面端可按标签筛选和关键词搜索,列表以卡片展示帖子并支持分页。
1. 页面信息
- 网页地址:https://9kvr.cn/circle/list
- 所属模块:圈子
- 页面用途:某个圈子的帖子列表页。顶部是圈子名和圈子简介,下面是帖子卡片:封面图轮播、状态标记、标题、摘要、作者和发布时间。桌面端可以在上方按圈子标签筛选,也能点放大镜输入关键词回车搜索。列表底部是分页,可以一页页翻;右下角的「发布帖子」按钮可发新帖,没登录时会先带你完成登录。如果这个圈子还没有帖子,会显示「暂无内容哦~」并给出「发布第一条帖子」的入口。
- 适用用户:浏览某个圈子内容的访客
- 访问条件:公开访问(发帖需登录)
2. 功能说明
- 顶部展示圈子名称与圈子简介
- 桌面端按圈子标签筛选帖子
- 关键词搜索,输入框提示「请输入关键词按回车开始搜索」
- 帖子卡片展示多图自动轮播封面、状态标记、标题、摘要、作者与发布时间
- 封面图片加载失败时用渐变底色与标题前两个字兜底,不留空白
- 底部分页浏览,每页 20 条
- 加载时展示骨架卡片占位
- 无内容时展示「暂无内容哦~」并提供「发布第一条帖子」入口
- 「发布帖子」入口,未登录时会先走登录流程
3. 业务说明
界面结构
| 界面元素 | 类型 | 取值来源 | 说明 |
|---|---|---|---|
| 圈子名称 | 标题 | 圈子信息 | 页面主标题 |
| 圈子简介 | 文本 | 圈子信息 | 展示在名称下方 |
| 标签筛选 | 标签列表 | 圈子标签 | 点击切换标签并重新加载列表(桌面端提供) |
| 搜索框 | 输入框 | 用户输入 | 占位提示「请输入关键词按回车开始搜索」,回车后按关键词检索 |
| 发布帖子 | 按钮 | 页面入口 | 未登录先登录,登录后进入发帖页 |
| 帖子封面 | 图片轮播 | 帖子图片 | 多图自动轮播切换,加载失败用渐变底色与标题首字兜底 |
| 状态标记 | 标签 | 帖子状态 | 仅当帖子自带状态说明时显示 |
| 帖子标题与摘要 | 文本 | 帖子内容 | 展示在卡片中部 |
| 作者与发布时间 | 头像 + 昵称 + 时间 | 帖子作者 | 昵称可点击进入作者主页 |
| 查看详情 | 文字入口 | 帖子卡片 | 点击进入帖子详情 |
| 分页 | 分页控件 | 帖子总数 | 每页 20 条,可上一页与下一页 |
筛选与搜索
可按圈子标签筛选帖子,或在搜索框中输入关键词回车搜索,两者都会重新加载列表;搜索范围始终是当前圈子,不跨圈子检索。
封面兜底
当帖子图片加载失败时,会用与帖子相关的渐变底色与标题首字作为占位,保证列表不出现空白;没有帖子图片时展示圈子头像。
移动端差异
手机端不展示标签筛选、搜索入口与顶部导航,只保留帖子列表本身。
界面结构
- 界面分组:{{ info.circle_name }}
4. 使用说明
- 进入某个圈子的帖子列表页
- 在桌面端用标签筛选或输入关键词回车搜索,缩小范围
- 浏览帖子卡片,点击卡片或「查看详情」进入帖子详情
- 在底部翻页查看更多帖子
- 点击「发布帖子」发新帖(未登录会先完成登录)
5. 规则与限制
- 发布帖子需要登录,未登录时会先进入登录流程
- 标签筛选与关键词搜索仅在桌面端提供,手机端不展示
- 分页每页 20 条帖子,翻页时展示骨架卡片
- 关键词搜索只针对当前圈子,不跨圈子检索
- 帖子状态标记仅在帖子自带状态说明时显示
6. 状态与异常
- 加载中:展示 6 个骨架卡片占位
- 正常:展示帖子卡片列表
- 空态:暂无内容哦~,并提供「发布第一条帖子」入口
- 兜底态:封面图加载失败时显示渐变底色与标题前两个字
- 封面图加载失败不影响列表展示,仅替换为占位样式
- 列表请求失败时结束加载状态,列表保持原有内容
7. 相关文档
目录导航
- 所属目录索引:/circle
- 上一篇:帖子详情
- 下一篇:发布帖子(正文编辑)
同目录文档(5)
相关主题
8. 文档信息
- 事实来源:芊云全景官网页面核验
- 文档构建时间:2026-10-21 00:05:20
- 数据获取/快照时间:不适用(静态产品知识)
- 可信状态:已核验