IM直播 / 消息列表优化

【IM】列表 /一键已读+区分群/个聊 原型+PRD

本需求包含两个独立功能:`一键已读` 用于处理当前 `訊息` 列表全部未读会话; `群聊 icon` 用于在群聊头像右下角增加群组标识,个聊不展示该标识。

01 一键已读 起始静止与下滑不展示;上滑及上滑停住时展示 `一键已读`,处理完成后显示成功 toast。
02 群聊 icon 群聊展示群组标识;个聊不展示。会话类型以服务端数据为准。
01

一键已读

原型图与本功能 PRD 连续展示;左侧为上滑过程,右侧为一键已读入口与处理完成后的成功 toast。

原型页面 / 一键已读展示状态 左侧为上滑过程;右侧展示一键已读入口,并在处理完成后显示成功 toast。
聊天列表上滑展示一键已读与成功 toast 原型

1. 需求说明

  • 目的:用户可一次处理当前 `訊息` 列表全部未读会话,不需逐条进入。
  • 作用范围:入口位于 `訊息` 页签;点击后更新本地数据库,并刷新 `訊息`、`聯絡`、`群組` 中对应会话的未读状态。
  • 展示规则:起始静止与下滑不展示;上滑时展示,上滑停住后持续展示。
  • 完成反馈:本地处理完成后显示成功 toast,文案中的数量取本次实际标记为已读的消息数。

2. 交互流程

01 起始静止 进入 `訊息` 列表且未执行手势时,不展示入口。
02 下滑 列表向下滑动时不展示入口。
03 上滑 列表向上滑动时展示未读总数、`一键已读` 与 `X`。
04 上滑停住 上滑后停止操作时,入口持续展示。
05 点击处理 点击 `一键已读` 后更新本地数据库、刷新未读状态并显示成功 toast;点击 `X` 仅关闭入口。

3. 原型 PRD

字段名称交互说明
起始静止不展示进入 `訊息` 列表且未执行手势时,不展示一键已读提示条。
下滑不展示列表向下滑动时不展示一键已读提示条。
上滑展示本地未读总数大于 `0` 时,列表向上滑动即展示提示条,不设置像素阈值。
上滑停住持续展示上滑后停止操作时保留提示条,直到点击 `X`、点击 `一键已读`、切换页签或离开页面。
提示文案展示本地未读总数`当前有 {list_unread_total} 条未读消息`;大于 `999` 仍展示实际数值。
关闭点击 `X`仅关闭当前提示条,不修改本地未读;再次上滑可重新展示。
提交点击 `一键已读`在单次本地数据库事务中,将当前消息列表既有未读会话标记为已读;不发起网络请求,不展示 loading。
完成同步刷新未读状态读取本地数据库最新结果,并刷新 `訊息`、`聯絡`、`群組` 中对应会话、提示条及底部聊天角标。
成功 toast展示 2 秒或点击 `X`文案为 `已将 {read_all_success_count} 条消息标记为已读`;左侧展示成功 icon,右侧展示 `X`。2 秒后自动关闭;点击 `X` 立即关闭,不回滚本地已读状态。
底部角标同步更新小于等于 `999` 展示实际数值;大于 `999` 展示 `999+`。

4. 其他

边界条件
  • 本地未读数为 `0`、起始静止、下滑或切换页签时不展示入口。
  • 上滑时展示,上滑停住后持续展示;`X` 仅关闭当前入口,不修改本地未读。
断网
  • 未读数量与一键已读均由本地数据库管理,断网不影响入口展示与已读处理。
  • 网络状态不触发额外提示;本地处理完成后直接刷新未读状态。
读取不到未读数
  • 本地数据库尚未完成初始化,或 list_unread_total 缺失、不合法时,不展示入口。
  • 保留现有会话红点;本地数据库恢复后,于下次列表刷新重新计算。
同步/并发
  • 一键已读以单次本地数据库事务处理,当前事务只标记点击前已存在的未读消息。
  • 事务期间收到的新消息维持未读;事务完成后重新计算三个页签与底部聊天角标。
02

群聊 icon

原型图与本功能 PRD 连续展示;用于区分 `訊息` 列表中的群聊与个聊。

原型页面 / 群聊与个聊区分 群聊头像右下角展示群组标识;个聊不展示。
聊天列表区分群聊与个聊原型
位置规则: 群组标识固定在头像右下角,与头像左上方未读角标分区,不新增独立点击区域。

1. 需求说明

  • 目的:用户可在群聊与个聊混排时快速识别会话类型。
  • 群聊:头像右下角展示群组标识。
  • 个聊:不展示群组标识,沿用现有头像与在线状态。
  • 数据来源:会话类型以服务端 conversation_type 为准,前端不得推断。

2. 交互流程

01 加载列表 读取每笔会话的 conversation_type
02 判断类型 group 进入群聊样式;direct 进入个聊样式。
03 输出样式 群聊显示群组标识;个聊不显示。
04 点击会话 群聊进入群聊天室;个聊进入一对一聊天室。

3. 原型 PRD

字段名称交互说明
识别范围`訊息` 页签会话行不改变 `聯絡`、`群組` 页签与既有排序。
类型来源读取 conversation_typegroup 为群聊;direct 为个聊。
群聊 icon头像右下角展示使用原型群组标识;不得覆盖头像主体、未读角标或会话文字。
个聊不展示群聊 icon沿用既有头像、昵称、摘要、时间与在线状态。
未读角标沿用头像左上角可与群聊 icon 同时展示,二者不得重叠。
点击区域点击整行群聊进入对应群聊天室;个聊进入对应一对一聊天室。
更新字段随列表刷新使用 conversation_type_version 避免旧类型覆盖新类型。

4. 其他

边界条件
  • 群聊 icon 仅为类型识别,不可点击,也不改变会话排序、权限或未读数。
  • 退出群聊或群聊失效后,以服务端最新列表结果决定移除会话或 icon。
断网/弱网
  • 有缓存时沿用最后一次有效的会话类型与 icon 状态。
  • 无缓存时按读取失败处理;重连后刷新列表并校正状态。
读取不到会话类型
  • conversation_type 缺失或不合法时不展示群聊 icon。
  • 不得根据名称、头像或成员数推断;记录异常并于下次刷新重取。
图片/资源异常
  • 群聊头像失败:展示默认头像并保留群聊 icon。
  • icon 资源失败:不阻断列表与会话进入;暂不显示,资源恢复后随刷新补回。

版本记录

版本 日期 作者 说明
V1.0 2026-09-08 Tilly
  • 需求调整为 `【IM】列表 /一键已读+区分群/个聊`。
  • H5 原型替换为本次图1、图2,并保持原始图片比例。
  • 两个原型页面分别接续对应 PRD,统一为 `需求说明 / 交互流程 / 原型 PRD / 其他`。
  • 一键已读改为手势上滑后展示,移除像素阈值;成功后同步刷新三个页签的对应未读状态。
  • 两张原型图缩小为原展示尺寸的 `75%`,并移除群聊 icon 的颜色描述。
  • 一键已读原型更新为正常入口/操作失败对照;失败时保留未读,并显示红色失败 icon、`一键已读失败,请稍后重试` 与关闭 `X`。
V1.1 2026-09-10 Tilly
  • 一键已读交互明确为:起始静止不展示、下滑不展示、上滑展示、上滑停住持续展示。
  • 未读数量与已读操作改由本地数据库管理,移除网络请求、loading、幂等参数与操作失败情境。
  • 一键已读原型恢复为上滑过程/入口展示图,不再展示操作失败画面。
  • 一键已读原型补充成功 toast `已将1380条消息标记为已读`,并明确自动关闭与 `X` 手动关闭规则。