# Web企信聊天窗口一键到底能力优化 PRD > 版本：v1.2 | 创建日期：2026-04-23 | 本次调整：2026-06-25 > 需求来源：客户反馈 + 线上现状 + 飞书竞品截图 + 最终设计图 > 优先级：P1 > 文档状态：草稿 --- ## 一、需求概述 ### 1.1 背景 企信聊天窗口目前已有“底部新消息提醒”能力：用户停留在历史消息位置时，如果会话产生新消息，右下角会展示 `有N条新消息`，点击后可回到新消息/底部位置。 但当用户只是上滑查看历史消息，且当前没有新消息产生时，页面缺少一个快速回到最新消息位置的入口。用户只能拖动滚动条或持续下滑，咨询群、服务群、客户群等长消息场景下操作成本较高。 本期需求只补齐这个缺口：**在现有“有N条新消息”提醒能力不变的基础上，新增“无新消息时一键跳转到最新消息”的快捷入口。** ### 1.2 反馈客户 | 反馈客户 | 客户级别 | 业务场景 | | -------------------- | -------------- | ------------------------------------------------------------------ | | 锐捷网络股份有限公司 | TOP / 重要客户 | 咨询客群消息量大，用户上滑查看历史消息后，无法快速回到最新消息位置 | | 江西联盛医药有限公司 | 重要客户 | 客服/顾问群消息持续流入，用户查看历史消息后，拖动滚动条回底成本高 | ### 1.3 现状依据 | 依据类型 | 结论 | 来源 | | -------- | ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | 线上现状 | 当前企信在用户离开底部且有新消息时，统一展示 `有N条新消息`，不区分普通消息和 `@我` 消息 | 用户提供线上截图 | | 本地源码 | 当前底部提示只在 `newAtBottom.length > 0` 时展示 `有{{count}}条新消息`；否则隐藏 | `/Users/soren/Desktop/work/Qixin/src/js/qx/message/panel.js` | | 本地源码 | 底部提示节点已存在，可复用现有 `.f-qx-msg-list-tip-bottom` / `.j-msg-list-bottom-tip` 容器 | `/Users/soren/Desktop/work/Qixin/src/js/web/app.html`、`/Users/soren/Desktop/work/Qixin/src/js/desktop/window.html` | | 本地源码 | 底部提示样式已有右下角浮层、箭头、展示/隐藏机制 | `/Users/soren/Desktop/work/Qixin/src/scss/qx/_message.scss` | ### 1.4 竞品与现有交互参考 #### 飞书：底部快捷入口参考 飞书在会话历史位置下方提供底部快捷入口，按状态呈现不同形态： | 场景 | 参考截图 | 参考点 | | ---------------------- | ------------------------------------------------------------------ | -------------------------------------------------------- | | 有 `@you` 消息 | ![飞书 @you 底部提示](images/feishu-at-you-bottom-tip.png) | 右下角浮层承载未处理消息提醒 | | 有普通新消息 | ![飞书普通新消息底部提示](images/feishu-new-messages-bottom-tip.png) | 新消息状态使用文案提示，用户点击后回到新消息区域 | | 无新消息，仅需回到底部 | ![飞书纯图标回到底部提示](images/feishu-icon-only-bottom-tip.png) | 无新消息时可使用纯图标入口，避免文案过长和多语言适配压力 | 本期不照搬飞书的 `@you` 区分能力，只参考“底部快捷入口按状态切换”的交互思路。 #### 工作圈：本期视觉参考 ![工作圈回到顶部入口参考](images/work-circle-back-top-reference.png) 工作圈已有白底、空心、圆形的回到顶部入口。本期企信“回到底部”入口建议参考该样式： - 使用白底圆形按钮。 - 使用空心箭头图标。 - 箭头方向改为向下。 - 不展示文字，降低多语言文案适配成本。 - 与现有蓝色 `有N条新消息` 胶囊形成区分：一个是“操作入口”，一个是“新消息提醒”。 ### 1.5 需求目标 1. 用户离开聊天底部查看历史消息时，如果当前没有新消息，右下角提供一个可点击的“回到底部”图标入口。 2. 当前已有 `有N条新消息` 能力保持不变：有新消息时继续展示现有蓝色新消息提醒。 3. 不新增 `@我` 独立底部提醒，不改变现有 `@我` 与普通新消息统一计入 `有N条新消息` 的现状。 4. 回到底部入口不使用文字，避免多语言环境下文案长度影响样式。 --- ## 二、产品方案 ### 2.1 方案结论 本期方案是在现有底部新消息提醒上增加一种无新消息状态： | 用户位置 | 是否有新消息 | 底部入口状态 | 本期是否新增 | | ------------ | ------------ | -------------------------------------- | ---------------- | | 已在聊天底部 | 无 / 有 | 不展示入口；新消息正常自动贴底 | 否 | | 离开聊天底部 | 有新消息 | 展示现有 `有N条新消息` 蓝色胶囊 | 否，沿用现有能力 | | 离开聊天底部 | 无新消息 | 展示白底圆形向下箭头按钮，点击回到底部 | 是，本期新增 | ### 2.2 入口样式 #### 最终设计图 ![企信聊天置底最终设计图](images/qixin-scroll-to-bottom-final-design.png) | 状态 | 样式 | 文案 | 点击结果 | | ---------------------- | --------------------------- | --------------- | ------------------------------------- | | 无新消息，用户离开底部 | 白底圆形按钮 + 空心向下箭头 | 无 | 消息列表滚动到最新消息位置，入口隐藏 | | 有新消息，用户离开底部 | 沿用现有蓝色新消息胶囊 | `有N条新消息` | 沿用现有点击逻辑，回到新消息/底部位置 | | 用户已在底部 | 不展示 | 无 | 无 | 样式说明： 1. “回到底部”入口不展示文字，只展示图标。 2. 图标使用图标库内“双箭头-下”，颜色为 Dark。 3. 图标按钮尺寸为 `40px * 40px`。 4. 按钮为白底、空心、圆形样式；边框颜色为分割线色，底色为标题背景色。 5. 入口在企信聊天框内最高级显示，悬浮在消息区右下角、输入框上方。 6. 位置规则：与高频操作 / 回复区域下间距 `4px`，右间距 `12px`。 7. 本需求只涉及 Web 端，最终样式以该设计图为准。 ### 2.4 规则说明 | 规则项 | 规则 | | ---------------- | ------------------------------------------------------------------------------------ | | 触发条件 | 用户当前不在聊天底部，且当前没有待处理的新消息提醒 | | 隐藏条件 | 用户点击入口回到底部，或用户手动滚动回到底部 | | 与新消息提醒关系 | `有N条新消息` 优先级高于“回到底部”图标；只要存在新消息提醒，就展示现有新消息胶囊 | --- ## 四、其他说明 ### 4.1 多语能力支持 无 ### 4.2 埋点 无 ### 4.3 沙盒 / 更改集能力 | 模块 | 功能点 | 是否支持沙盒 | 是否支持更改集 | | ------------ | -------------------- | ------------ | -------------- | | 企信聊天窗口 | 底部回底入口交互优化 | 否 | 否 | ### 4.4 新对象 / 新字段 / BI 分析申请 | 对象/字段 | 是否已做流程支持申请 | 是否已做 BI 分析申请 | 内容 | | -------------- | -------------------- | -------------------- | ---------------------------- | | 无新增业务对象 | 否 | 否 | 本需求仅涉及聊天窗口前端交互 | ### 4.5 操作日志说明 本需求为聊天窗口前端交互优化，不涉及对象数据新增、删除、修改，不新增操作日志记录要求。 ### 4.6 上线策略 #### 收费标准 - [X] 不收费 - [ ] 收费 #### 上线节奏 - [X] 全网 - [ ] 灰度 | 灰度发布的原因 | 聊天窗口为高频模块，建议先验证入口展示、点击回底和遮挡问题 | | -------------- | ---------------------------------------------------------- | | 预计全网时机 | 待确认 | | 灰度范围 | 建议先在 Web 端内部试用，再灰度高频咨询群/服务群客户 | #### 适应版本 | 资源名称 | 标准版 | 专业版 | 旗舰版 | 无限版 | 扩展资源包 | | ------------------------ | ------ | ------ | ------ | ------ | ---------- | | 企信聊天窗口一键到底能力 | 是 | 是 | 是 | 是 | - | --- ## 附1：需求变更记录 | 变更日期 | 变更人 | 变更内容 | | ---------- | ------ | --------------------------------------------------------------- | | 2026-04-23 | Codex | 生成 PRD 初稿，基于用户反馈、线上截图、竞品结论与交互 DEMO 整理 | --- ## 附2：需求 Story 列表 | ID | 需求描述 | 涉及端与开发人员 | 是否有依赖项 | | -------- | --------------------------------------------------------------- | ------------------------ | ------------ | | STORY-01 | 用户离开聊天底部且无新消息时，展示白底圆形向下箭头入口 | 企信前端 Web，研发待确认 | 否 | | STORY-02 | 点击白底圆形向下箭头后，消息列表回到最新消息位置并隐藏入口 | 企信前端 Web，研发待确认 | 否 | | STORY-03 | 新增入口与现有 `有N条新消息` 胶囊互斥展示，确保新消息提醒优先 | 企信前端 Web，研发待确认 | 否 | --- ## 附3：后续可演进方向 以下能力不纳入本期，仅作为后续独立评估方向： 1. `@我` 消息独立底部提醒。 2. 跳转第一条未读消息。 3. 未读分割线联动。 4. 回复我 / 引用消息定位。 5. 键盘快捷键回到底部。