深浅模式
社区内容组件
左侧组件库 「社区内容」 分类共 8 个组件，用于首页、发现页等场景的 话题、圈子、笔记 展示。在 UI管理 → 页面配置 中拖入画布，右侧 属性 Tab 调内容与开关，样式 Tab 调间距与背景。
使用前须知
数据来源
| 组件 | 线上数据来源 | 编辑器内 |
|---|---|---|
| 话题气泡、热门圈子、热门话题、我的圈子 | 发现页接口自动拉取 | 演示数据，仅预览布局 |
| 笔记列表、圈子列表、瀑布流 | 分页接口，支持下拉加载 | 可塞示例笔记预览样式 |
| 讨论短卡 | 您在属性里配置的卡片 | 与线上一致 |
改样式后须 保存 → 启用 页面，客户端才会生效。
列表类组件互斥（重要）
圈子列表、笔记列表、笔记瀑布流 三者 同一页面只能保留一种，且建议放在画布 最靠下：
text
轮播 / 金刚区 / 筛选标签
↓
话题气泡、榜单、讨论短卡 等运营模块
↓
圈子列表 或 笔记列表 或 瀑布流（三选一）
↓
结束文本（homeListFooter，可选）若同时添加两种，编辑器会 保留先出现的一种，自动移除另一种。
样式分层（列表 / 瀑布流 / 圈子列表）
这三类组件结构特殊，请区分 外层 与 卡片内（详见 样式与点击动作 · 列表 Section 的样式分层）：
| 配置位置 | 作用对象 |
|---|---|
| 样式 Tab → 尺寸、外边距 | 整个列表区域外壳 |
| 样式 Tab → 内边距、背景、圆角、边框 | 每一条 卡片 的外壳 |
| 属性 Tab 里的字号、颜色、开关等 | 卡片内部具体元素 |
圈子列表的卡片样式保存在 templateCardProps（模板卡片属性）中，与笔记列表、瀑布流同理：属性管「卡片长什么样」，样式 Tab 管「区域和卡片盒模型」。
话题气泡（xiaoyi-topic-bubbles）
说明
双行 横向滚动 的热门话题胶囊，带模块标题与「查看更多」。运行时拉取发现页 热门话题；标记为最热的话题显示 最热 标签，部分话题可显示 新奇 标签。点击气泡进入话题详情，「查看更多」默认进入热门话题榜。
适用页面
应用首页、发现页（放在列表区块 上方）。
属性配置
| 分组 | 主要字段 | 说明 |
|---|---|---|
| 标题栏 | 标题、标题字号/颜色 | 模块主标题，如「热门话题」 |
| HOT 角标、角标文字 | 标题旁小角标，可隐藏 | |
| 左侧图标 | 图片 URL / 图标名 | 标题左侧装饰；有图优先于图标 |
| 图标背景/颜色、边长 | 图标容器样式 | |
| 查看更多 | 显示/隐藏、文案、颜色/字号 | 右侧「查看更多 ›」 |
| 箭头图标、点击动作 | 未设置则进热门话题榜 | |
| 滚动 | 自动滚动、单圈时长 | 两行气泡是否自动横向滚动 |
| 第二行反向 | 第二行滚动方向是否与第一行相反 | |
| 气泡样式 | 圆角、背景色、话题字号 | 统一作用于每个话题胶囊 |
| 气泡间距、行间距 | 横向与纵向间距（rpx） | |
| 左侧小圆图标、背景/图标色 | 气泡内 # 或图标 | |
| 项点击动作 | 未设置则进话题详情 | |
| 标签样式 | 新奇/最热 文案、背景/文字色 | 话题上的强调标签 |
样式说明
模块整体宽高、外边距、背景在 样式 Tab 配置。气泡颜色多在 属性 → 气泡统一样式 中设置，便于与品牌色统一。
注意事项
- 话题 名单与排序 由平台算法下发，不能在编辑器里逐条增删。
- 关闭自动滚动后，用户仍可手动横滑浏览。
- 编辑器内为演示数据， HOT / 新奇 标签样式可在此调好，上线后由真实话题数据驱动显示。
圈子列表（xiaoyi-circle-list-section）
说明
首页 圈子 Feed 列表：每条展示圈子 logo、名称、简介、成员/帖子/人气统计、加入按钮、精选笔记等。数据 分页加载，可与上方 筛选标签 联动排序。
卡片外观配置保存在 templateCardProps（与属性面板中各项对应），列表区域外壳在 样式 Tab 编辑。
适用页面
应用首页、发现页（画布 底部，与笔记列表/瀑布流 互斥）。
属性配置
| 分组 | 主要字段 | 说明 |
|---|---|---|
| 筛选联动 | 联动标识 filterLinkKey | 与「筛选标签」相同则受 Tab 控制；默认 default |
| 信息展示 | 显示副标题、角标、置顶角标 | 控制描述文字与标签显隐 |
| 对齐方式 | 统计信息与标题对齐，或列表左对齐 | |
| 演示分类名 | 仅编辑器预览 角标分类用 | |
| 统计 | 成员/帖子/人气 显示开关 | 可单独隐藏某项 |
| 成员胶囊样式 | 成员数以胶囊或行内形式展示 | |
| 各统计文案、字号/颜色/字重 | 如「成员」「帖子」「人气」 | |
| 加入按钮 | 显示开关、文案、背景/字色/字号 | 未加入时「+ 加入」等 |
| 宽/高/圆角/内边距 | 按钮尺寸 | |
| 需审核时文案 | 如「申请加入」 | |
| 已加入 / 审核中 | 各状态文案与颜色 | 已加入、审核中按钮样式 |
| 精选区 | 显示精选条、更多 ⋮ | 圈子下精选笔记预览 |
| 精选模板 | 单行 或 卡片 两种样式 | |
| 精选卡片样式 | 选「卡片」模板时的背景、头像、内容等 | |
| 图标 | 更多/精选 图标名、字号、颜色 | 一般保持默认即可 |
| 卡片样式 | 内边距、圆角、logo 尺寸 | 单条圈子卡片外观 |
| 标题/副标题字号、角标/药丸颜色 | 文字与标签样式 | |
| 点击 | 卡片/精选区/加入按钮 点击动作 | 未设置时使用系统默认跳转 |
样式说明
遵循上文 样式分层：外边距 调列表与上方模块的距离；卡片背景、圆角、内边距 在样式 Tab 或属性中的卡片样式组配置，避免把卡片背景误设到最外层。
注意事项
- 与 笔记列表、瀑布流互斥，一页只能有一种主 Feed。
- filterLinkKey 须与筛选标签组件一致，否则切换 Tab 不会刷新圈子列表。
- 演示分类名 不影响线上；线上角标来自圈子真实分类。
- 加入按钮行为（直接加入 / 需审核）由圈子设置决定，此处只改 按钮文案与颜色。
笔记列表（xiaoyi-note-list-section）
说明
首页 笔记 Feed 列表（双列/多行卡片流），展示用户发布的图文、视频、音频笔记。列表数据来自接口；属性面板主要控制 卡片模板、显示项、样式，不修改笔记正文内容。
适用页面
应用首页、发现页（画布 底部，与圈子列表/瀑布流 互斥）。
模板选择
| 字段 | 选项 | 说明 |
|---|---|---|
| uiTemplate（底栏样式） | 1 传统双行 | 底部一行点赞、评论、浏览等互动数据 |
| 2 评论条 | 底部为装饰性「写评论…」输入条（不能真发评论） | |
| 3 简洁一行 | 互动区更紧凑，默认推荐 | |
| contentLayout（正文区域宽度） | 跟随底栏 | 正文与底栏同宽 |
| 与头像对齐 | 正文左缘与头像右缘对齐 | |
| 撑满整行 | 正文占满卡片宽度 | |
| thumbSize | 封面边长（rpx） | 列表右侧小缩略图尺寸，默认约 176 |
视频笔记详情页（需相应模块授权）：
| 选项 | 说明 |
|---|---|
| 平台详情页 | 进入标准笔记详情 |
| 视频播放页 | 纯视频笔记进入沉浸式播放页 |
显示开关
点属性里 显示哪些内容 区域的 pill 可快速开关（关闭后对应区域不显示，接口数据仍保留）：
| 分组 | 开关 | 说明 |
|---|---|---|
| 媒体 | 图片视频 showCover | 封面图、多图、视频、音频区域 |
| 多图横滑 multiImageScroll | 多图时横向滑动展示 | |
| 拼图样式 imageCollageTemplate | 多图拼图布局 | |
| 正文与话题 | 话题标签 hideTopic | 关闭即隐藏话题 |
| 正文摘要 hideContent | 关闭即隐藏正文预览 | |
| 热评预览 hideHotComment | 热门评论一条预览 | |
| 作者 | 昵称下行 authorSublineTimeCircle | 「日期 | 来自 · 圈子名」一行 |
| 认证标签 hideAuthorMetaRow | 性别、认证等用户标签 | |
| 位置圈子 hideLocationCircleRow | 正文下方位置/圈子行 | |
| 底栏 | 底栏时间 hideFooterTime | 底部时间文字 |
预览示例（仅编辑器）：可切换单图 / 多图 / 视频 / 音频示例，方便查看不同模板效果， 不影响线上数据。
筛选联动
| 字段 | 说明 |
|---|---|
| filterLinkKey | 与首页 筛选标签（笔记） 使用相同标识时，切换 Tab 会刷新本列表；默认填 default |
筛选标签侧须将 联动目标 设为笔记，且各 Tab 项配置好 note_order_by 等排序参数。
样式分层
| 层级 | 配置入口 | 典型项 |
|---|---|---|
| 列表外壳 | 样式 Tab → 尺寸、外边距 | 列表与上方模块间距 |
| 卡片外壳 | 样式 Tab → 内边距、背景、圆角、边框 | 单条笔记卡片背景 |
| 卡片内容 | 属性 Tab 各分组 | 见下表 |
属性 Tab 主要样式分组
| 分组 | 主要字段 |
|---|---|
| 作者区 | 头像大小/圆角、昵称字号/颜色/字重 |
| 昵称下行 | 字号/颜色/间距、圈子头像与名称、箭头、胶囊内边距（开启昵称下行时） |
| 标题与正文 | 标题/正文字号、颜色、字重、行高；次要文字颜色 mutedColor |
| 底栏互动 | 赞/评/浏览 文案、图标颜色、已赞色、数字字号 |
| 评论条（模板 2） | 占位提示、输入框背景/圆角、小头像、前置图标或 emoji |
| 位置与圈子行 | 圈子图标大小/圆角（正文下方一行） |
| 音频笔记 | 播放按钮文案、标题字号/颜色 |
| 图标（高级） | 评论/赞/分享 自定义图标名，一般保持默认 |
用户标签（性别、认证、热门等）样式由 UI管理 → 自定义标签 统一配置，不在此组件逐条设置。
注意事项
- 与 圈子列表、瀑布流互斥；请放在页面偏下并配合 结束文本（homeListFooter） 作页脚。
- uiTemplate 切换后，部分显示开关的默认组合会变，切换模板后建议再检查一遍开关。
- 预览作者信息 仅装修预览，线上以接口返回为准。
- 模板 2 的 评论条 仅为视觉引导，点击行为由客户端跳转详情评论。
笔记瀑布流（xiaoyi-waterfall-section）
说明
双列错落 的笔记瀑布流，适合图片社区、种草类首页。无图纯文笔记会以固定高度文字卡片展示；带图笔记按图片比例计算高度。
适用页面
应用首页、发现页（画布 底部，与圈子/笔记列表 互斥）。
属性配置
| 分组 | 主要字段 | 说明 |
|---|---|---|
| 筛选联动 | filterLinkKey | 同笔记列表，与筛选标签联动 |
| 视频详情 | 平台详情页 / 视频播放页 | 同笔记列表 |
| 布局 | 列间距 columnGap、卡片间距 cardGap | 双列之间的空隙（rpx） |
| 封面/媒体 | 媒体圆角、占位背景 | 图片/视频区域 |
| 竖图最大高度、横图最小高度 | 控制错落幅度 | |
| 显示置顶 | 置顶笔记角标 | |
| 文案 | 字号/颜色/字重/行高 | 卡片标题或摘要文字 |
| 话题标签 | 显示/隐藏、媒体毛玻璃 | 左下角话题胶囊 |
| 字号/颜色/圆角/位置 | 话题标签样式 | |
| 纯文/媒体/视频 背景与边框色 | 不同笔记类型下标签底色 | |
| 纯文卡片 | 内容区高度、背景、字号/颜色/行高 | 仅无媒体笔记 |
| 行间下划线类型 | 无/实线/虚线/点线/分段 | |
| 底栏 | 头像/昵称/点赞 字号颜色 | 卡片底部作者与赞 |
| 底栏高度、隐藏点赞 | ||
| 音频 | 去播放文案 | 音频笔记按钮文字 |
| 图标 | 多图/视频/音频角标、赞图标 | 高级自定义，一般默认即可 |
内容模板演示（仅编辑器）：纯文 / 竖图 / 音频示例，预览双列效果。
样式说明
同样遵循 样式分层：样式 Tab 管列表区域与卡片盒模型；属性 Tab 管封面圆角、话题胶囊、底栏文字等 卡片内部 元素。
注意事项
- 与圈子列表、笔记列表 三选一。
- 纯文卡片高度由 textOnlyHigh 等控制，过高会留白，过低会截断文字。
- 话题 毛玻璃 仅在有封面媒体时效果明显。
讨论短卡（xiaoyi-talk-cards）
说明
手动配置 的短话题/讨论入口卡，支持 网格 或 横滑 布局。每张卡片含标题、副文案（如讨论数）、可选角标与图标，适合运营位、频道入口、活动聚合。
适用页面
应用首页、发现页、自定义页面（放在列表区块 上方）。
属性配置
卡片列表（可多条）
| 字段 | 说明 |
|---|---|
| 标题 | 主文案 |
| 副文案 | 如 1563讨论 |
| 角标 | 可选，如「热」 |
| 图标名 / 图标图 | 需开启「图标」后生效 |
| 点击动作 | 点击整张卡片 |
布局
| 字段 | 说明 |
|---|---|
| 布局模式 | 网格 或 横滑 |
| 列数 | 网格时 1 / 2 / 3 列 |
| 卡片宽 | 横滑时每张卡片宽度（rpx） |
| 间距 itemGap | 卡片之间距离 |
卡片样式
| 字段 | 说明 |
|---|---|
| 背景色/背景图、边框、圆角 | 卡片外观 |
| 内边距、最小高度、阴影 |
标题 / 副文案
| 字段 | 说明 |
|---|---|
| 颜色、字号、字重、对齐、行数 | 标题 |
| 副文案颜色、字号、与标题间距 |
增强
| 字段 | 说明 |
|---|---|
| 角标 | 显示角标及角标底色/字色 |
| 图标 | 显示 lead 图标；位置 上方 或 标题前 |
| 右下箭头 | 可选箭头图标及颜色 |
样式说明
组件外层 margin、背景在 样式 Tab；卡片视觉主要在 属性 → 卡片样式 完成。
注意事项
- 内容 不会自动更新，活动结束请及时改文案或下架卡片。
- 横滑模式注意 卡片宽 + 间距，避免单屏只露出过窄一条。
- 图标图与图标名同时填时，展示优先级以客户端为准，建议 二选一。
我的圈子（xiaoyi-joined-circles）
说明
展示当前用户 已加入的圈子，末尾可带 创建圈子 入口。运行时拉取「我的圈子」接口；未登录时可能为空或隐藏。
适用页面
应用首页、发现页（通常放在中上部）。
属性配置
| 分组 | 主要字段 | 说明 |
|---|---|---|
| 模板 | 布局模板 | 圆头像横滑 或 双列信息格 |
| 列数 / 行间距 | 信息格模式下 2 或 3 列 | |
| 项间距、头像尺寸、头像底色 | ||
| 图文间距 | 头像与名称距离 | |
| 圈子文字 | 标题字号/颜色/字重 | 圈子名称 |
| 副标题、成员数后缀 | 信息格模式，如「人已加入」 | |
| 占位图标 | 无 logo 时的默认图标 | |
| 创建入口 | 显示策略 | 跟随权限 / 始终 / 隐藏 |
| 文案、图标名/颜色/字号 | 如「去创建」「+ 创建圈子」 | |
| 横滑模式 | 创建圆底色、描边、文案颜色 | |
| 信息格模式 | 胶囊底色/字色/圆角 | |
| 创建点击动作 | 未设置则跳创建申请页 |
样式说明
根容器 宽高、外边距、背景、圆角 在 样式 Tab 编辑（属性面板顶部有提示）。
注意事项
- 跟随权限 时，无创建圈子权限的用户看不到创建入口。
- 编辑器内为演示数据， 圈子数量与名称 以用户账号为准。
- 横滑模板适合圈子较多；信息格适合强调成员数与简介。
热门圈子（xiaoyi-hot-circles）
说明
展示平台 推荐圈子，运行时拉取发现页 recommended_circles。支持 横滑卡片 与 列表滑动 两种模板，带加入按钮。
适用页面
应用首页、发现页。
属性配置
| 分组 | 主要字段 | 说明 |
|---|---|---|
| 模板 | 布局模板 | 横滑卡片 或 列表滑动 |
| 项间距、成员数后缀 | 如「人已加入」 | |
| 头像底色 | 无 logo 时占位色 | |
| 横滑卡片 | 卡片宽/圆角/背景/内边距 | 单张推荐卡 |
| 头像尺寸、名称字号/颜色 | ||
| 底部条背景/字色/高度/对齐 | 卡片底部成员数条 | |
| 列表滑动 | 每列行数、单列宽、行间距 | 多列纵向滑动 |
| 列表背景/圆角/内边距 | 列表容器 | |
| 头像尺寸/圆角、名称/副标题样式 | 列表行 | |
| 加入按钮 | 文案、背景/字色、描边 | 如「+ 加入」 |
| 图标名/颜色、点击动作 | 未设置则进圈子详情 |
样式说明
模块整体在 样式 Tab；卡片与列表细节在 属性 各模板分组。
注意事项
- 推荐名单由 平台算法 下发，不能在编辑器里指定具体圈子。
- 列表滑动模式下单列宽度不宜超过屏幕宽，否则横滑体验变差。
- 加入逻辑（是否需审核）由圈子设置决定，此处只改按钮外观。
热门话题（xiaoyi-hot-topics）
说明
完整展示 发现页热门话题列表（无横向滑动，纵向排列）。每条含 # 标识、话题名、笔记数/浏览数等，可选叠头像展示参与用户。
适用页面
应用首页、发现页。
属性配置
| 分组 | 主要字段 | 说明 |
|---|---|---|
| 模板 | 布局模板 | 详情行 / 叠头像 / 紧凑行 |
| 行间距 | 话题行之间距离 | |
| 列数、列间距 | 紧凑行模式下多列 | |
| # 与标题 | # 强调色/字色/尺寸/字号 | 井号方块样式 |
| 标题/副文 字号颜色 | 话题名与统计文案 | |
| 热标图标/颜色/尺寸 | 热门标识 | |
| 笔记后缀、浏览后缀 | 如「笔记」「浏览」 | |
| 叠头像 | 头像尺寸、重叠量、底色 | 仅「叠头像」模板 |
| 点击 | 项点击动作 | 未设置则进话题详情 |
样式说明
外层容器用 样式 Tab；# 号与文字颜色在属性中微调即可与品牌色一致。
注意事项
- 与 话题气泡 不同：气泡偏动感横滑，本组件偏 榜单式完整列表。
- 紧凑行 适合话题多、屏效高的场景； 详情行 信息最全。
- 热标是否显示取决于话题是否被标记为热门，非每条都有。
首页组合参考
text
搜索栏 + 筛选标签（filterLinkKey = default）
↓
话题气泡
↓
我的圈子 + 热门圈子（可选）
↓
讨论短卡 / 首页榜单（运营模块，见下篇）
↓
笔记列表 或 瀑布流 或 圈子列表（三选一）
↓
结束文本（homeListFooter = true）