深浅模式
笔记列表组件（完整手册）
路径：UI管理 → 页面配置 → 设计 → 左侧 社区内容 → 笔记列表
组件在编辑器中的名称是 笔记列表（xiaoyi-note-list-section）。它是首页、发现页、圈子页的 核心 Feed 组件，负责分页展示笔记/帖子，支持下拉加载、与 筛选标签 联动。
互斥规则
同一页面 只能有一个 笔记列表、圈子列表或瀑布流，三选一。建议放在画布 最底部。
一、数据从哪来
| 环境 | 数据来源 |
|---|---|
| 编辑器画布 | 演示笔记（可切换单图/多图/视频/音频预览） |
| 用户 App | 接口自动分页拉取，按区域、排序、筛选参数返回 |
你在属性里改的是 卡片长什么样、显示哪些字段，不能手动增删线上某条笔记。
二、属性面板结构（15 个分组）
选中笔记列表后，右侧 属性 Tab 从上到下依次为：
| 序号 | 分组名 | 作用 |
|---|---|---|
| ① | 预览示例 | 编辑器内看不同笔记类型效果 |
| ② | 筛选联动 | 与筛选标签配合刷新列表 |
| ②b | 视频笔记详情页 | 纯视频帖点击去向 |
| ③ | 整体布局 | 模板、正文宽度、封面尺寸 |
| ④ | 显示哪些内容 | 媒体/话题/正文/热评等开关 |
| ⑤ | 作者区 | 头像、昵称样式 |
| ⑥ | 昵称下方一行 | 时间 + 来自圈子胶囊 |
| ⑦ | 标题与正文 | 字号、颜色、行高 |
| ⑧ | 底栏互动区 | 赞/评/浏览文案与颜色 |
| ⑨ | 评论条外观 | 仅 模板 2 时显示 |
| ⑩ | 位置与圈子行 | 正文下方位置标签、圈子入口 |
| ⑪ | 音频笔记 | 音频帖播放区样式 |
| ⑫ | 图标（高级） | 自定义赞/评/分享图标 |
| ⑬ | 用户标签 | 说明：标签样式在 自定义标签 菜单配 |
| ⑭ | 预览作者信息 | 仅编辑器演示用 |
| ⑮ | 点击卡片 | 整条笔记点击跳转 |
样式 Tab（与属性分离）见 第十节。
三、① 预览示例
| 按钮 | 作用 |
|---|---|
| 单图 | 画布塞一条单图笔记演示 |
| 多图 | 三张配图演示 |
| 视频 | 视频帖 + 封面演示 |
| 音频 | 音频帖 + 时长演示 |
| 恢复默认 | 回到编辑器默认示例 |
TIP
预览只改画布演示内容，不会 覆盖你已配好的颜色、字号等样式；也不会影响线上数据。
四、② 筛选联动（与筛选标签配合）
联动标识 filterLinkKey
| 字段 | 说明 | 默认值 |
|---|---|---|
| 联动标识 | 须与上方 筛选标签 组件填 完全相同 的字符串 | default |
工作原理：
text
用户点击筛选标签某个 Tab
↓
标签把该 Tab 的排序/圈子/话题等参数发给接口
↓
下方 filterLinkKey 相同的笔记列表重新请求并刷新配置步骤（必做 checklist）
- [ ] 画布上方已添加 筛选标签（全页仅 1 个）
- [ ] 筛选标签 内容模式 = 列表 API 联动
- [ ] 筛选标签 联动目标 = 笔记
- [ ] 筛选标签 联动标识 = 例如
home-feed - [ ] 笔记列表 联动标识 = 同样填
home-feed - [ ] 筛选标签每个 Tab 已配置 排序 order_by（笔记） 等参数
筛选标签侧常用参数（供 Tab 配置参考）
在 筛选标签 → 选项 里，选中某个 Tab 后可配：
| 参数 | 说明 | 可选值示例 |
|---|---|---|
| 显示文字 label | Tab 上显示的名称 | 推荐、最新、视频 |
| 排序 order_by（笔记） | 列表排序字段 | 智能热度、个性化推荐、创建、点赞、浏览、评论 |
| 排序方向 | ASC / DESC | 最新一般用 DESC |
| 圈子 circle_id | 只显示某圈子笔记 | 留空=不限制；可点 选择 |
| 话题 topic_id | 只显示某话题下笔记 | 留空=不限制 |
| 笔记类型 type | 0 图文 / 1 视频 / 2 语音 | 视频 Tab 选 1 |
| 闲置 idle_only | 是否仅闲置帖 | 按需 |
| 排除置顶 exclude_pinned | 是否排除置顶帖 | 「最新」Tab 可开 |
排序说明：
| 排序值 | 含义 |
|---|---|
| 智能热度 smart | 默认，综合热度算法 |
| 个性化推荐 recommend | 需部署 Gorse；失败自动降级 smart |
| 创建 created_at | 按发布时间 |
| 点赞 like_count | 按点赞数 |
| 浏览 view_count | 按浏览量 |
五、②b 视频笔记详情页
| 选项 | 用户点击纯视频笔记后 |
|---|---|
| 平台详情页 | 进入标准笔记详情页 |
| 视频播放页 | 进入沉浸式视频播放页（需功能开通） |
圈子页一般与首页保持一致。
六、③ 整体布局
底栏样式 uiTemplate（三选一）
| 模板 | 名称 | 适用场景 | 底栏表现 |
|---|---|---|---|
| 1 | 传统双行 | 信息密度高、偏社区论坛 | 两行：互动数据 + 时间等 |
| 2 | 评论条 | 强调评论互动 | 底部假评论输入条（装饰） |
| 3 | 简洁一行 | 清爽信息流（默认） | 一行图标 + 数字 |
正文区域宽度 contentLayout
| 选项 | 效果 |
|---|---|
| 跟随底栏 | 与作者区对齐（默认） |
| 与头像对齐 | 正文左缘与头像对齐 |
| 撑满整行 | 正文占满卡片宽度 |
封面图边长 thumbSize
| 字段 | 默认 | 说明 |
|---|---|---|
| 封面图边长 | 176 rpx | 单图/视频封面正方形边长 |
七、④ 显示哪些内容（开关一览）
点击 pill 切换开/关。关闭后对应区域不渲染，接口仍返回该字段。
| 开关 | 属性 | 关闭后 |
|---|---|---|
| 图片视频 | showCover | 不显示封面/视频/多图 |
| 话题标签 | hideTopic=true | 不显示 #话题 |
| 正文摘要 | hideContent=true | 不显示正文文字 |
| 热评预览 | hideHotComment=true | 不显示热评条 |
| 昵称下行 | authorSublineTimeCircle | 不显示「日期 | 来自 · 圈子」行 |
| 认证标签 | hideAuthorMetaRow=true | 不显示认证/类型等标签行 |
| 位置圈子 | hideLocationCircleRow=true | 不显示位置+圈子行 |
| 底栏时间 | hideFooterTime=true | 底栏不显示时间 |
多图展示方式
| 开关 | 说明 |
|---|---|
| 多图横滑 multiImageScroll | 多图横向滑动展示 |
| 拼图样式 imageCollageTemplate | 九宫格/拼图布局 |
八、⑤～⑧ 样式类属性（属性 Tab 内）
作者区
| 字段 | 默认参考 | 说明 |
|---|---|---|
| 头像大小 avatarSize | 68 rpx | 作者头像边长 |
| 头像圆角 avatarRadius | 圆形 | 填大值=圆角矩形 |
| 昵称字号 nicknameFontSize | 26 rpx | — |
| 昵称字重 nicknameFontWeight | 700 | — |
| 昵称颜色 nicknameColor | — | 留空用主题默认 |
昵称下方一行（开启「昵称下行」后）
显示类似：07-21 | 来自 · 武汉大学 ›
| 字段 | 默认 | 说明 |
|---|---|---|
| 文字字号 authorSublineFontSize | 18 rpx | — |
| 与昵称间距 authorSublineMarginTop | 6 rpx | — |
| 文字颜色 authorSublineColor | — | — |
| 元素间距 authorSublineRowGap | 4 rpx | 日期与胶囊间距 |
| 圈子头像 authorSublineCircleLogoSize | 22 rpx | 胶囊内小 logo |
| 圈子名字号/颜色/字重 | 18 rpx 等 | — |
| 箭头大小 authorSublineArrowSize | 16 px | — |
| 胶囊内间距/内边距 | 6 / 2rpx 8rpx 2rpx 6rpx | — |
标题与正文
| 字段 | 默认 | 说明 |
|---|---|---|
| 标题字号 titleFontSize | 30 rpx | — |
| 标题字重 titleFontWeight | 600 | — |
| 标题颜色 titleColor | #111111 | — |
| 标题行高 titleLineHeight | 1.4 或 40rpx | — |
| 正文字号 contentFontSize | 26 rpx | — |
| 正文颜色 contentColor | #333333 | — |
| 正文行高 contentLineHeight | 36rpx 或 1.5 | — |
| 次要文字颜色 mutedColor | #999999 | 时间、位置等灰色小字 |
底栏互动区
| 字段 | 默认 | 说明 |
|---|---|---|
| 赞旁文字 likeLabel | 赞 | — |
| 评旁文字 commentLabel | 评 | — |
| 浏览前缀 browseLabel | 浏览 | — |
| 数字旁短字 viewLabel | 览 | 显示为「浏览 1.2k 览」类格式 |
| 图标默认色 actionIconColor | — | 未点赞态 |
| 已赞颜色 actionLikeActiveColor | — | 点赞后图标色 |
| 数字文字色 actionTextFontSize | 18 rpx | — |
| 浏览数颜色 viewCountColor | — | — |
九、⑨ 评论条外观（仅模板 2）
| 字段 | 说明 |
|---|---|
| 占位提示 commentPlaceholder | 如 写评论... |
| 左侧小头像 miniAvatarSize | 默认 48 rpx |
| 占位字号/颜色 | — |
| 输入框背景色/圆角/内边距 | 灰底圆角条 |
| 前置图标 / emoji | ✨ 等 |
INFO
评论条 仅装饰，用户点击会进详情页评论，不能在此直接发文。
十、样式 Tab 分层说明
笔记列表的 样式 与 属性 分工：
| 样式 Tab 分组 | 作用对象 |
|---|---|
| 尺寸、外边距 | 整个列表区域（section 外壳） |
| 内边距、背景、圆角、边框 | 每一条 卡片内部 的外壳 |
| 属性 Tab | 卡片里文字、图标、开关 |
推荐调法：
- 列表与上方模块间距 → 样式 marginTop 20～30
- 卡片白底圆角 → 样式 背景 #FFF、圆角 16、内边距 24
- 标题字号 → 属性 标题字号 30，不是样式 Tab
十一、⑮ 点击卡片
| 配置 | 说明 |
|---|---|
| 点击后执行 clickAction | 整条笔记点击跳转 |
默认行为： 留空时进入 笔记详情页。
可改为：跳转自定义页、预览图片等（一般用默认即可）。
十二、三套推荐配置方案
方案 A：标准校园首页（推荐）
| 项 | 值 |
|---|---|
| uiTemplate | 3 简洁一行 |
| 联动 Key | home-feed + 筛选标签三 Tab（推荐/最新/视频） |
| 显示 | 媒体、话题、正文、热评、位置圈子 全开 |
| 样式 | 卡片 marginTop 16，卡片背景 #FFF，圆角 16 |
方案 B：轻量瀑布信息流
| 项 | 值 |
|---|---|
| uiTemplate | 3 |
| hideHotComment | 开（关热评） |
| hideFooterTime | 开 |
| thumbSize | 200 |
方案 C：重互动社区
| 项 | 值 |
|---|---|
| uiTemplate | 2 评论条 |
| 评论条占位 | 说点什么... |
| 热评 | 开 |
十三、保存与验收
- 保存 页面 → 列表 启用
- App 切到对应 区域
- 验收：
| 检查 | 预期 |
|---|---|
| 首屏加载 | 出现笔记卡片 |
| 上拉 | 加载更多，底部「没有更多了」 |
| 切换筛选 Tab | 列表内容/排序变化 |
| 点击笔记 | 进详情 |
| 点赞 | 图标变已赞色 |
十四、常见问题
| 现象 | 原因 | 处理 |
|---|---|---|
| 切换 Tab 列表不变 | 联动 Key 不一致 | 标签与列表填相同标识 |
| 列表空白 | 区域无笔记 / 筛选过严 | 发测试帖；检查 circle_id、topic_id |
| 改了样式线上没变 | 未启用 / 区域不对 | 启用配置；核对区域 |
| 推荐排序无效 | Gorse 未部署 | 换「智能热度」或部署推荐服务 |
| 视频帖点击不对 | 视频详情页选项 | 检查「平台详情页/视频播放页」 |
| 认证标签样式不对 | 在笔记列表改不了 | 去 UI管理 → 自定义标签 |