社区内容组件

左侧组件库 「社区内容」 分类共 8 个组件，用于首页、发现页等场景的 话题、圈子、笔记 展示。

社区内容分类共 8 个组件，用于首页、发现页等场景的话题、圈子、笔记展示。数据类组件在编辑器内为演示数据，线上由接口拉取。

UI管理 → 页面配置 → 设计 → 社区内容·运营 / UI 编辑人员

移动端宽度与左右留白

灵萌客户端基于 uni-app，移动端设计稿逻辑宽度为 750rpx，编辑器画布预览与真机一致。

只需设置宽度与左边距即可，不必再单独填右边距。适用于卡片、轮播、图片等需要距屏幕边缘一点距离的块级组件。

• 750rpx = 屏幕逻辑全宽
• 若希望组件两侧留空且整体居中：在样式 Tab 将宽度设为 720rpx，左边距设为 15rpx
• 720 + 15 + 15 = 750，即左右各 15rpx 边距

保存 → 启用 → 客户端验证

画布内改完不等于对用户生效，须按顺序完成以下三步。

多区域部署时，列表顶栏「区域筛选」决定配置归属；客户端区域不一致时会出现「保存了但 App 没变化」。

1. 1
   保存顶栏点击「保存」，可选勾选更新列表封面图
2. 2
   启用返回 UI管理 → 页面配置列表，对目标配置点击「启用」
3. 3
   客户端验证App 切换到与编辑时相同的区域，查看真实效果（工具栏预览仅为截图）

筛选标签与列表联动

切换 Tab 时，下方笔记列表 / 圈子列表 / 瀑布流按筛选条件刷新数据（API 联动模式）。

圈子页（forum）联动目标固定为笔记，不可改为圈子列表。

1. 1
   配置联动 Key列表 section 与筛选标签各配置相同的 filterLinkKey（如 home-feed）；默认 default
2. 2
   配置 Tab 参数筛选标签每个 Tab 可设排序 order_by、圈子 circle_id、话题 topic_id、笔记类型 type 等

• 画布上已添加筛选标签（全页最多 1 个）
• 下方已添加笔记列表 / 圈子列表 / 瀑布流（三选一）
• 筛选标签「下方内容模式」= 列表 API 联动
• 筛选标签「联动目标」与列表组件类型一致（笔记 / 圈子）
• 筛选标签 filterLinkKey = 列表 filterLinkKey（字符串完全一致）
• 筛选标签每个 Tab 已配置排序等筛选参数

样式与点击动作 — 筛选联动文档

使用前须知

样式与数据分离：属性 Tab 控制卡片长什么样；线上内容由接口下发，不能在编辑器里增删某条笔记/圈子。

圈子列表（xiaoyi-circle-list-section）、笔记列表（xiaoyi-note-list-section）、笔记瀑布流（xiaoyi-waterfall-section）三者同一页面只能保留一种，且建议放在画布最靠下。

样式 Tab → 尺寸、外边距整个列表区域外壳

样式 Tab → 内边距、背景、圆角、边框每一条卡片的外壳

属性 Tab 里的字号、颜色、开关等卡片内部具体元素

列表 Section 样式分层文档

轮播/金刚区/筛选标签 → 话题气泡、榜单、讨论短卡 → 圈子列表或笔记列表或瀑布流（三选一） → 结束文本（homeListFooter）

话题气泡（xiaoyi-topic-bubbles）

双行横向滚动的热门话题胶囊，带模块标题与「查看更多」。运行时拉取发现页热门话题。

• 话题名单与排序由平台算法下发，不能在编辑器里逐条增删
• 编辑器内为演示数据，HOT/新奇标签样式可在此调好

1. 1
   添加组件左侧社区内容 → 话题气泡（xiaoyi-topic-bubbles）
2. 2
   配置标题栏填写标题、HOT 角标；按需开启「查看更多」并配点击动作
3. 3
   调整气泡样式属性 Tab 调圆角、背景色、字号；样式 Tab 调外边距
4. 4
   保存并验收保存 → 启用 → App 验证话题滚动与点击进话题详情

什么时候用首页/发现页展示热门话题入口，营造「大家都在聊」氛围；适合放在 Feed 列表上方

标题栏标题、标题字号/颜色；HOT 角标、角标文字

左侧图标图片 URL / 图标名；有图优先于图标

查看更多显示/隐藏、文案、颜色/字号、箭头图标、点击动作

滚动自动滚动、单圈时长、第二行反向

气泡样式圆角、背景色、话题字号、气泡间距、行间距

标签样式新奇/最热 文案、背景/文字色

编辑器里话题和线上一致吗不一致 — 编辑器为演示布局；线上拉取发现页热门话题接口。

气泡不滚动检查「自动滚动」是否开启；话题数量过少时效果不明显。

改了样式 App 没变未保存或未启用 — 完成保存 → 启用 → 同区域客户端验证。

圈子列表（xiaoyi-circle-list-section）

首页圈子 Feed 列表，分页加载，可与上方筛选标签（xiaoyi-filter-tabs）联动排序。

• 与笔记列表、瀑布流互斥，一页只能有一种主 Feed
• filterLinkKey 须与筛选标签组件一致（见本页「筛选标签与列表联动」）
• 加入按钮行为（直接加入/需审核）由圈子设置决定，此处只改按钮文案与颜色

1. 1
   添加组件左侧社区内容 → 圈子列表（xiaoyi-circle-list-section），放在页面偏下
2. 2
   配置筛选联动（可选）若上方有筛选标签：双方 filterLinkKey 填相同值；标签选 API 联动 + 联动目标=圈子
3. 3
   调整卡片样式属性 Tab 调加入按钮、统计文案；样式 Tab 调卡片内外边距与背景
4. 4
   保存并验收保存 → 启用 → App 验证分页、加入按钮与 Tab 切换刷新

什么时候用发现页/功能页以圈子为主体的 Feed；与笔记列表、瀑布流三选一

filterLinkKey与筛选标签相同则受 Tab 控制；默认 default

信息展示显示副标题、角标、置顶角标、对齐方式

统计成员/帖子/人气显示开关、成员胶囊样式、各统计文案与样式

加入按钮显示开关、文案、背景/字色/字号、宽/高/圆角、需审核时文案

已加入/审核中各状态文案与颜色

精选区显示精选条、更多 ⋮、精选模板（单行/卡片）

卡片样式内边距、圆角、logo 尺寸、标题/副标题字号、角标/药丸颜色

切换筛选 Tab 列表不变filterLinkKey 不一致或未选 API 联动 — 对照联动清单逐项检查。

一页加了两个 Feed圈子列表与笔记列表/瀑布流互斥 — 删除多余列表组件。

加入按钮文案不对需审核圈子显示审核中文案 — 在属性里分别配置「已加入」「审核中」状态文案。

笔记列表（xiaoyi-note-list-section）

首页笔记 Feed 列表，分页展示图文、视频、音频笔记。完整手册见笔记列表组件详解。

• 与圈子列表、瀑布流互斥；请放在页面偏下并配合结束文本（homeListFooter）作页脚
• 用户标签样式由 UI管理 → 自定义标签 统一配置

1. 1
   添加组件左侧社区内容 → 笔记列表（xiaoyi-note-list-section），放在页面最靠下
2. 2
   配置筛选联动若上方有筛选标签：filterLinkKey 两端一致；标签 API 联动 + 联动目标=笔记
3. 3
   选模板与开关uiTemplate 选底栏样式；按需开关封面、话题、热评等
4. 4
   加结束文本页脚信息展示 → 结束文本，homeListFooter 开启，放在列表正下方
5. 5
   保存并验收保存 → 启用 → App 验证 Tab 切换、上拉加载、点击进详情

什么时候用首页/发现页/圈子页主 Feed；传统列表布局，信息密度高

uiTemplate（底栏样式）1 传统双行 / 2 评论条 / 3 简洁一行（默认）

contentLayout（正文区域宽度）跟随底栏 / 与头像对齐 / 撑满整行

thumbSize封面边长 rpx，默认约 176

显示开关showCover、hideTopic、hideContent、hideHotComment、authorSublineTimeCircle 等

filterLinkKey与筛选标签相同标识时切换 Tab 会刷新本列表

笔记列表组件（完整手册）文档

切换 Tab 列表不变filterLinkKey 不一致 — 与筛选标签填相同字符串，如 home-feed。

列表空白区域无笔记或筛选过严 — 发测试帖；检查 Tab 的 circle_id、topic_id。

认证标签样式不对去 UI管理 → 自定义标签 按 tag_name 配置，非本组件属性。

笔记瀑布流（xiaoyi-waterfall-section）

双列错落的笔记瀑布流，适合图片社区、种草类首页。

• 与圈子列表、笔记列表三选一
• 纯文卡片高度由 textOnlyHigh 等控制，过高会留白，过低会截断文字

1. 1
   添加组件左侧社区内容 → 笔记瀑布流（xiaoyi-waterfall-section）
2. 2
   配置筛选联动若上方有筛选标签：filterLinkKey 与标签一致
3. 3
   调布局与卡片列间距、媒体圆角、纯文卡片高度、底栏样式
4. 4
   保存并验收保存 → 启用 → App 验证双列布局与上拉加载

什么时候用种草/图片社区首页，强调封面视觉；与圈子列表、笔记列表三选一

filterLinkKey同笔记列表，与筛选标签联动

布局列间距 columnGap、卡片间距 cardGap（rpx）

封面/媒体媒体圆角、占位背景、竖图最大高度、横图最小高度、显示置顶

话题标签显示/隐藏、媒体毛玻璃、字号/颜色/圆角/位置

纯文卡片内容区高度、背景、字号/颜色/行高、行间下划线类型

底栏头像/昵称/点赞字号颜色、底栏高度、隐藏点赞

纯文笔记显示异常调 textOnlyHigh 等纯文卡片高度；过低会截断，过高留白。

双列高度不齐瀑布流特性 — 竖图/横图混排时列高自然错落，可限制竖图最大高度。

和笔记列表怎么选瀑布流偏视觉种草；笔记列表偏信息流密度与互动数据展示。

讨论短卡（xiaoyi-talk-cards）

手动配置的短话题/讨论入口卡，支持网格或横滑布局。

• 内容不会自动更新，活动结束请及时改文案或下架卡片
• 图标图与图标名同时填时，建议二选一

1. 1
   添加组件左侧社区内容 → 讨论短卡（xiaoyi-talk-cards）
2. 2
   添加卡片属性 → + 添加卡片：标题、副文案、角标、图标、点击动作
3. 3
   选布局网格或横滑；设置列数、卡片宽与样式
4. 4
   保存并验收保存 → 启用 → App 点击各卡片验证跳转

什么时候用运营配置的讨论区/话题入口、活动分会场；内容须手动维护

卡片列表标题、副文案（如 1563讨论）、角标、图标名/图标图、点击动作

布局模式网格或横滑；列数 1/2/3；卡片宽（横滑时 rpx）

卡片样式背景色/背景图、边框、圆角、内边距、最小高度、阴影

标题/副文案颜色、字号、字重、对齐、行数

增强角标、图标（上方/标题前）、右下箭头

副文案讨论数不会变须手动填写 — 本组件不拉取实时讨论数，活动期定期更新文案。

横滑卡片宽度不对横滑模式下在属性 Tab 调「卡片宽」（rpx）。

卡片点了没反应该项未配点击动作 — 展开卡片配置跳转。

我的圈子（xiaoyi-joined-circles）

展示当前用户已加入的圈子，末尾可带创建圈子入口。运行时拉取「我的圈子」接口。

• 跟随权限时，无创建圈子权限的用户看不到创建入口
• 横滑模板适合圈子较多；信息格适合强调成员数与简介

1. 1
   添加组件左侧社区内容 → 我的圈子（xiaoyi-joined-circles）
2. 2
   选布局模板圆头像横滑 或 双列信息格；调列数、头像尺寸
3. 3
   配置创建入口显示策略、文案、图标与点击动作（通常跳创建圈子）
4. 4
   保存并验收保存 → 启用 → 登录 App 验证已加入圈子与创建入口

什么时候用首页个性化模块，展示用户已加入圈子；未登录或新用户可能为空

布局模板圆头像横滑 或 双列信息格

列数 / 行间距 / 项间距 / 头像尺寸信息格模式下 2 或 3 列

圈子文字标题字号/颜色/字重；副标题、成员数后缀

创建入口显示策略（跟随权限/始终/隐藏）、文案、图标、点击动作

编辑器里有圈子线上没有编辑器为演示数据 — 线上按当前登录用户已加入圈子拉取。

创建入口不显示显示策略为「跟随权限」且用户无权限 — 或改为「始终显示」测试。

新用户模块空白正常 — 未加入任何圈子时区域为空，可配合热门圈子组件。

热门圈子（xiaoyi-hot-circles）

展示平台推荐圈子，运行时拉取发现页 recommended_circles。支持横滑卡片与列表滑动两种模板。

• 推荐名单由平台算法下发，不能在编辑器里指定具体圈子
• 加入逻辑（是否需审核）由圈子设置决定，此处只改按钮外观

1. 1
   添加组件左侧社区内容 → 热门圈子（xiaoyi-hot-circles）
2. 2
   选模板横滑卡片 或 列表滑动；调卡片宽、头像与加入按钮样式
3. 3
   保存并验收保存 → 启用 → App 验证推荐圈子与加入交互

什么时候用首页/发现页推荐圈子曝光，引导用户加入；名单由平台算法下发

布局模板横滑卡片 或 列表滑动

横滑卡片卡片宽/圆角/背景/内边距、头像尺寸、名称字号/颜色、底部条样式

列表滑动每列行数、单列宽、行间距、列表背景/圆角/内边距

加入按钮文案、背景/字色、描边、图标名/颜色、点击动作

想指定展示某几个圈子不支持 — 本组件拉取推荐接口；可用讨论短卡手动配置入口。

加入按钮点了没变化需审核圈子会进入审核中状态 — 文案在属性里配置。

横滑卡片显示不全调卡片宽度与样式 Tab 外边距；避免与全宽组件叠压。

热门话题（xiaoyi-hot-topics）

完整展示发现页热门话题列表（无横向滑动，纵向排列）。与话题气泡不同，偏榜单式完整列表。

• 紧凑行适合话题多、屏效高的场景；详情行信息最全
• 热标是否显示取决于话题是否被标记为热门

1. 1
   添加组件左侧社区内容 → 热门话题（xiaoyi-hot-topics）
2. 2
   选布局模板详情行 / 叠头像 / 紧凑行
3. 3
   保存并验收保存 → 启用 → App 验证话题列表与点击进详情

什么时候用话题榜、发现页完整热门话题列表；信息比话题气泡更全

布局模板详情行 / 叠头像 / 紧凑行

# 与标题# 强调色/字色/尺寸/字号；标题/副文字号颜色

热标 / 后缀热标图标/颜色/尺寸；笔记后缀、浏览后缀

叠头像头像尺寸、重叠量、底色（仅叠头像模板）

项点击动作未设置则进话题详情

和话题气泡怎么选气泡偏氛围横滑；热门话题偏完整纵向榜单。

热标不显示该话题未被标记热门 — 由业务规则决定，非样式配置。

话题顺序能改吗不能 — 顺序由发现页热门话题接口下发。

首页组合参考

搭好后按「保存 → 启用 → 客户端验证」验收；筛选 Tab 切换须验证列表刷新。

搜索栏 + 筛选标签（filterLinkKey=home-feed） → 话题气泡 → 我的圈子 + 热门圈子 → 讨论短卡/首页榜单 → 笔记列表或瀑布流或圈子列表 → 结束文本（homeListFooter=true）

相关文档

运营模块组件