Appearance
PRD：消息 messages-list
一句话：面向 C 端用户，集中展示与健管团队（健管师、医生、营养师等）的所有对话入口，并提供通知中心快速切换，是用户访问服务沟通和平台推送的统一入口。
0. 快速评审卡
| 项 | 内容 |
|---|---|
| 产品 | funde-client |
| 模块 | 消息 / 会话列表 |
| 页面/功能 | 消息 |
| 路由 | /messages |
| 页面类型 | 列表页 |
| 状态 | 已实现 / PRD 初版 |
| 产品负责人 | [待确认] |
| 研发负责人 | [待确认] |
| 测试负责人 | [待确认] |
| 关联原型 | funde-client/prototype/src/views/messages/MessagesView.vue |
| 关联 page-spec | funde-client/docs/page-specs/messages-list.page.yaml |
| 关联 mock | funde-client/prototype/src/mock/conversations.json |
1. 为什么做
1.1 背景
消息列表是"三好共管"服务理念在前端的核心触点之一。用户购买富德健康管理服务后，健管团队（健康管理师、主任医师、营养师、个案管理师、心理咨询师等）会通过 IM 渠道提供持续服务，消息列表即为用户访问这些对话的汇聚页。当前原型已实现会话列表与通知中心的分段切换、团队置顶横幅、多角色会话行渲染、角标显示等核心交互。
1.2 目标
- 业务目标：提升用户与健管团队的互动率，确保用户第一时间感知未读消息，强化"7×24 在线"的服务认知
- 用户/运营目标：进入消息 Tab 后快速找到有未读消息的会话角色，一键进入会话或切换至通知中心
- 交付目标：当前版本跑通会话列表浏览 → 进入单个会话的主路径，以及会话列表 ↔ 通知中心的切换路径
1.3 不解决的问题
- 会话搜索：当前用户会话数量少，不超过 8 个角色，搜索价值低
- 会话长按操作（置顶 / 删除 / 静音）：原型阶段不做管理操作，保持列表简洁
- 群组会话创建：群组会话由平台侧（funde-im）自动创建并推送，客户端不提供手动创建入口
- 通知按类型分类筛选：当前通知数量少，平铺展示足够
2. 当前交付切片
这里只写当前准备评审、开发和测试的内容。
2.1 做什么
| 能力 | 说明 | 优先级 |
|---|---|---|
| 顶部导航栏标题与副标题展示 | 标题"消息"，副标题"您的健管团队 7×24 在线"，传递服务在线感 | P0 |
| 分段选项卡切换 | 「团队对话」和「通知中心」两个 Tab，角标实时显示未读数 | P0 |
| 三好共管服务群置顶横幅 | 固定在会话列表最顶部，标注在线人数，点击进入团队群会话；视觉上使用品牌主色渐变卡片，与普通会话行区分 | P0 |
| 多角色会话列表 | 按序展示全部会话（AI 健康顾问、三好共管服务群、健管师、医生、营养师、家庭服务台、个案管理师、心理咨询师），每行展示头像、姓名、角色标签、最近消息预览、时间戳和未读角标 | P0 |
| 重要会话高亮 | 对标记为 important 的会话，左侧渲染主色竖条以区分优先级 | P1 |
| 通知列表快速预览 | 切换到「通知中心」Tab 时展示通知行（图标 + 标题 + 内容摘要 + 时间 + 未读红点），作为通知中心页面（/notifications）的内联预览版本，点击单条通知后续规划跳转到对应目标页 | P1 |
2.2 暂不做
| 暂不做 | 原因 | 后续处理 |
|---|---|---|
| 会话搜索 | 当前用户会话数量少，不超过 8 个角色，搜索价值低 | 后续用户量增加后再评估 |
| 会话长按操作（置顶 / 删除 / 静音） | 原型阶段不做管理操作，保持列表简洁 | [待确认] |
| 群组会话创建 | 群组会话由平台侧（funde-im）自动创建并推送，客户端不提供手动创建入口 | [待确认] |
| 通知按类型分类筛选 | 当前通知数量少，平铺展示足够 | 分类筛选在通知中心独立页面实现 |
2.3 后续候选
| 候选能力 | 触发条件 |
|---|---|
| 会话列表支持分组折叠（按角色类型 | 医疗组 / 健管组 / 服务组） |
| 消息免打扰设置入口（长按会话行） | [待确认] |
| 会话列表空状态引导（新用户首次进入，提示健管师将在 24h 内主动发起会话） | [待确认] |
3. 谁来用，怎么用
| 角色 | 场景 | 目标 |
|---|---|---|
| C 端用户（含大量中老年用户） | 用户从首页 Tab Bar 点击「消息」图标，看到健管师会话行上有红色角标"2"，点击进入会话 | 快速定位到健管师的最新消息并进行回复 |
| C 端用户 | 用户收到系统推送的血压偏高预警，点击通知后被带入健管师会话详情，回复后点击返回，回到消息列表 | 回到消息列表时维持 Tab 状态（「团队对话」仍激活），列表刷新最新已读状态 |
| C 端用户 | 用户在消息列表页看到「通知中心」Tab 上有数字角标，点击切换 | 切换后可浏览所有未读和已读系统通知，通知角标在切换后清零 |
4. 主流程与页面入口
4.1 入口与出口
| 类型 | 内容 |
|---|---|
| 从哪里进入 | 底部 Tab 「消息」-> 会话列表 |
| 可以去哪里 | 会话详情 /conversations/:id、通知中心 /notifications |
| 依赖数据 | Vue Router：/messages（本页）、/conversations/:id（会话详情）、/notifications（通知中心）、Mock 数据：prototype/src/mock/conversations.json（conversations 数组 + notifications 数组）、组件：FdSegment（分段控件）、fd-avatar--{role}（角色头像）、未来：GET /api/im/conversations、GET /api/notifications、WebSocket 未读数推送 |
4.2 主流程
4.3 异常场景
| 场景 | 系统表现 | 提示 |
|---|---|---|
| 网络断开时 | 列表展示本地缓存数据，顶部显示"当前离线，消息可能不是最新"提示条 | 恢复连接后自动刷新 |
| 所有会话均无未读时 | Tab 角标不显示（或显示 0），不渲染红点，避免误导老年用户 | - |
| 会话列表为空（新用户刚注册、健管团队尚未建立） | 展示空状态插图 + 文案"您的健管团队正在为您分配，将在 24 小时内主动联系您" | - |
5. 页面结构与字段
5.1 页面区块
| 区块 | 内容 | 说明 |
|---|---|---|
| segment-tabs | fd-segment / custom | FdSegment 分段控件，两个 Tab：「团队对话」（badge = totalUnread）和「通知中心」（badge = notiUnread）。 Tab 切换通过 v-model activeTab 控制下方内容区显示。 |
| team-banner | custom / banner | 三好共管服务群置顶横幅，品牌主色渐变卡片（135deg #FFF7F1 → #FFEDDF，橙色边框）。 展示「三好共管 · 您的专属团队」标签（品牌色心形图标）+ 在线人数 badge + 引导文案。 固定渲染在「团队对话」Tab 最顶部，不随会话列表滚动消失。 仅在 activeTab === 'chat' 时显示。 |
| conversation-list | fd-card / list | 多角色会话行列表，遍历 conversations 数组。 每行结构：[accent-bar（important）] [fd-avatar--{role} 46×46 + 未读 badge] [姓名 + roleLabel 标签 + 消息预览 + 时间]。 important=true 时，左侧渲染 3px 品牌色竖条（position: absolute, left: 0）。 unread > 0 时头像右上角显示红色角标（danger 色背景）。 仅在 activeTab === 'chat' 时显示。 |
| notification-inline | fd-card / list | 通知中心 Tab 的内联预览行列表，遍历 notifications 数组。 每行结构：[圆角方形图标区（iconBg + icon + iconColor）] [标题 + 未读红点 + 时间] [body 摘要] [tag badge]。 点击单条通知原型阶段静默（不跳转），后续接入精确路由。 仅在 activeTab === 'noti' 时显示。 |
5.3 页面功能说明
列出本页全部功能点，含说明、跳转目标、特殊情况与业务限制。
| 功能 | 说明 | 跳转/触发 | 特殊情况 | 特殊限制 |
|---|---|---|---|---|
| segment-tabs | FdSegment 分段控件，两个 Tab：「团队对话」（badge = totalUnread）和「通知中心」（badge = notiUnread）。 Tab 切换通过 v-model activeTab 控制下方内容区显示。 | - | - | - |
| team-banner | 三好共管服务群置顶横幅，品牌主色渐变卡片（135deg #FFF7F1 → #FFEDDF，橙色边框）。 展示「三好共管 · 您的专属团队」标签（品牌色心形图标）+ 在线人数 badge + 引导文案。 固定渲染在「团队对话」Tab 最顶部，不随会话列表滚动消失。 仅在 activeTab === 'chat' 时显示。 | tap→/conversations/conv-team | - | - |
| conversation-list | 多角色会话行列表，遍历 conversations 数组。 每行结构：[accent-bar（important）] [fd-avatar--{role} 46×46 + 未读 badge] [姓名 + roleLabel 标签 + 消息预览 + 时间]。 important=true 时，左侧渲染 3px 品牌色竖条（position: absolute, left: 0）。 unread > 0 时头像右上角显示红色角标（danger 色背景）。 仅在 activeTab === 'chat' 时显示。 | tap→/conversations/:id | - | - |
| notification-inline | 通知中心 Tab 的内联预览行列表，遍历 notifications 数组。 每行结构：[圆角方形图标区（iconBg + icon + iconColor）] [标题 + 未读红点 + 时间] [body 摘要] [tag badge]。 点击单条通知原型阶段静默（不跳转），后续接入精确路由。 仅在 activeTab === 'noti' 时显示。 | - | - | - |
5.4 后续字段候选
| 字段 | 为什么暂不进入当前交付 |
|---|---|
| conv.pinned | 置顶会话由后端控制时补充 |
| conv.onlineCount | 三好共管服务群在线人数由后端实时推送时补充 |
| noti.targetRoute | 通知精确路由跳转接入时补充 |
6. 业务规则
| ID | 规则 | 说明 |
|---|---|---|
| R1 | 分段 Tab「团队对话」角标 = 所有会话 unread 之和；「通知中心」角标 = 未读通知数 | 当前交付切片需遵守 |
| R2 | 三好共管服务群横幅固定置顶，不受会话列表排序影响；点击进入 /conversations/conv-team | 当前交付切片需遵守 |
| R3 | 会话行按数据源顺序渲染（原型阶段不做客户端排序），important 会话显示左侧品牌色竖条 | 当前交付切片需遵守 |
| R4 | 会话行最近消息预览单行截断（max-width: 220px，overflow: ellipsis），防止超长文本破坏布局 | 当前交付切片需遵守 |
| R5 | 角色标签（roleLabel）与头像颜色（fd-avatar--{role}）使用 design token，不硬编码颜色 | 当前交付切片需遵守 |
| R6 | 切换到「通知中心」Tab 后展示的通知行为只读内联预览；完整管理页为 /notifications | 当前交付切片需遵守 |
7. 数据、接口与权限
7.1 数据来源
| 类型 | 来源 |
|---|---|
| 产品级功能架构 | funde-client/docs/v0.1/02-feature-architecture.md |
| 产品级信息架构 | funde-client/docs/v0.1/03-information-architecture.md |
| 产品级页面清单 | funde-client/docs/v0.1/05-page-inventory.md |
| 模块说明 | funde-client/docs/v0.1/modules/messages.md |
| 源 PRD | funde-client/docs/v0.1/pages/messages/index.md |
| Page Spec | funde-client/docs/page-specs/messages-list.page.yaml |
| 页面实现 | funde-client/prototype/src/views/messages/MessagesView.vue |
| Mock 数据 | funde-client/prototype/src/mock/conversations.json |
| 路由源 | funde-client/prototype/src/router/index.ts |
| 应用入口 | funde-client/prototype/src/MobileApp.vue |
| source_route | /messages |
7.2 接口说明
| 接口 | 用途 | 备注 |
|---|---|---|
| 获取会话列表 | 返回当前用户全部 IM 会话（含未读数、最近消息） | 当前原型使用本地 mock conversations.json |
| 获取通知列表 | 返回当前用户通知列表（含未读状态） | 当前原型使用本地 mock conversations.json notifications 数组 |
| WebSocket / 长轮询 | 监听未读数变化，实时更新角标 | 原型阶段不接入 |
7.3 权限
| 操作 | 权限要求 | 当前处理 |
|---|---|---|
| 查看会话列表 | 已登录 C 端用户 | 未登录跳转登录页 |
| 进入会话详情 | 已登录且为该会话参与方 | 原型阶段不校验 |
8. 验收标准
| 编号 | 验收项 | 预期结果 |
|---|---|---|
| AC1 | 进入页面后，「团队对话」Tab 默认激活，角标数字与各会话 unread 之和一致 | 进入页面后，「团队对话」Tab 默认激活，角标数字与各会话 unread 之和一致 |
| AC2 | 三好共管服务群置顶横幅始终渲染在会话列表顶部，不被普通会话行遮盖 | 三好共管服务群置顶横幅始终渲染在会话列表顶部，不被普通会话行遮盖 |
| AC3 | 各会话行正确展示头像、姓名、角色标签、消息预览（单行截断）、时间和未读角标（unread > 0 时才显示） | 各会话行正确展示头像、姓名、角色标签、消息预览（单行截断）、时间和未读角标（unread > 0 时才显示） |
| AC4 | important 会话行左侧渲染品牌色竖条 | important 会话行左侧渲染品牌色竖条 |
| AC5 | 点击任意会话行，正确跳转至 /conversations/:id（id 与 conv.id 一致） | 点击任意会话行，正确跳转至 /conversations/:id（id 与 conv.id 一致） |
| AC6 | 切换到「通知中心」Tab，通知列表正确渲染，已读通知无红点，未读通知显示红点 | 切换到「通知中心」Tab，通知列表正确渲染，已读通知无红点，未读通知显示红点 |
| AC7 | 大字号辅助模式下（/me/settings/accessibility 开启），正文字号不小于 18sp，会话行高度自适应 | 大字号辅助模式下（/me/settings/accessibility 开启），正文字号不小于 18sp，会话行高度自适应 |
9. 待确认问题
| 问题 | 影响 | 负责人 |
|---|---|---|
| 团队服务群横幅上的"N 人在线"数量是否由后端实时推送，还是固定文案 | 影响前端轮询逻辑和展示时效性 | 后端 IM 团队 |
「通知中心」Tab 上的角标逻辑是否与 /notifications 页面的已读状态联动（在通知中心页面查看后角标是否清零） | 影响状态同步方案 | 产品负责人 |
| 会话行排序规则 | 是否支持后端返回固定置顶序，还是完全由最近消息时间决定：影响 important 字段的实际作用 | 后端 IM 团队 |
10. 变更记录
| 日期 | 变更 | 作者 |
|---|---|---|
| 2026-06-19 | 按需求源 PRD 模板创建 | Codex |