diff --git a/docs/superpowers/specs/2026-03-29-wechat-conversations-me-ui-polish-design.md b/docs/superpowers/specs/2026-03-29-wechat-conversations-me-ui-polish-design.md new file mode 100644 index 0000000..6886e36 --- /dev/null +++ b/docs/superpowers/specs/2026-03-29-wechat-conversations-me-ui-polish-design.md @@ -0,0 +1,126 @@ +# 微信式会话页与我的页 UI 收口设计 + +## 背景 + +当前原生 Android 客户端已经完成了大部分微信式回退,但 `会话` 根页和 `我的` 根页仍然存在明显的产品语言不一致: + +- `会话` 页还保留较重的卡片感和控制台式信息密度 +- `我的` 页虽然已经是列表结构,但顶部仍然更像后台资料卡,而不是微信“我” +- 两页放在一起看时,像是两个不同产品,而不是同一套移动端体验 + +本轮目标不是改数据模型或功能范围,而是把这两页的视觉、层级、点击区和回退后的微信式产品语言彻底统一。 + +## 目标 + +1. `会话` 根页改成微信式一行一条聊天列表,不再是厚卡片流 +2. `我的` 根页改成微信“我”风格的大头像资料区 + 白底菜单列表 +3. 保持现有功能和数据结构不变,不为了收口 UI 去改坏线程、群聊、附件、登录、返回链路 +4. 把这两页的交互代码和 UI helper 一起校验,避免只换视觉、不修点击区和层级 + +## 非目标 + +- 不改会话数据模型 +- 不改线程名 / 文件夹名 / 后台数量动态图标规则 +- 不改主 Agent / 审计对话的置顶逻辑 +- 不重做设备页 +- 不动 Web UI,只收口原生 Android + +## 设计概览 + +### 1. 会话页 + +会话页要回到微信聊天列表的感觉: + +- 每个会话项从“白色厚卡片”改成“白底列表项” +- 保留现有三层文本信息,但重新压视觉层级: + - 第一行:线程名,主信息,粗体 + - 第二行:所属文件夹名,弱于主标题 + - 第三行:最后一条消息预览,进一步降权 +- 右侧保留两层: + - 最后消息时间 + - 后台活跃动态图标与未读信息 +- `主 Agent`、`审计对话` 继续作为普通置顶会话显示,不做特殊卡片 +- 列表项之间只保留轻分隔和留白,不再依赖阴影和大圆角强调层级 + +### 2. 我的页 + +我的页要改成微信“我”的结构: + +- 顶部改为一整块资料区,不再使用独立悬浮卡片 +- 资料区结构: + - 左侧大头像 + - 右侧昵称 + - 第二行账号 + - 第三行一条很轻的身份说明 +- 下面所有入口都收成纯白菜单列表 +- 当前保留入口不变: + - `账号与安全` + - `设置` + - `运维与修复` + - `AI 账号` + - `技能` + - `关于` +- `AI 账号 / 技能 / 运维与修复` 视觉上与其它入口完全同级,不再做“高级功能”强调 + +### 3. 交互与点击区 + +这轮不仅收视觉,也会校验功能入口的交互代码: + +- 会话列表整行可点,右侧时间和动态图标不应抢主点击 +- 我的页每一项整行可点,不允许只点文字有效 +- 会话进入、返回、底部 tab 切换逻辑保持现状,不因 UI 收口被破坏 +- 顶部安全区处理继续沿用 `BossWindowInsets` + +## 实现边界 + +### 直接重写的 UI helper + +- `BossUi.buildConversationRow` +- `BossUi.buildSimpleProfileHeader` +- `BossUi.buildWechatMenuRow` + +必要时允许新增更小的私有 helper,把“会话列表项”和“我的页列表项”拆成更清晰的两套结构,但不做无关重构。 + +### 保持不动的部分 + +- `WechatSurfaceMapper` 的字段语义 +- `MainActivity` 的根 tab 结构和会话/设备/我的数据来源 +- 会话置顶、群聊、附件、登录、SSE 等现有功能链 +- 服务器端 API 与文件型状态模型 + +## 验收标准 + +### 视觉验收 + +1. 会话页不再呈现厚卡片流,而是微信式聊天列表 +2. 我的页顶部不再像后台信息卡,而是微信“我”的资料区 +3. 会话页与我的页放在一起看时,明显属于同一套产品语言 +4. 页面不引入新的夸张色块、阴影或控制台式信息块 + +### 交互验收 + +1. 会话页点任意会话项都能正常进入聊天页 +2. 聊天页返回仍能回到会话列表 +3. 我的页各菜单项都整行可点 +4. `我的 > 关于`、`我的 > 设置`、`我的 > AI 账号`、`设备` tab 不因 UI 收口失效 +5. 顶部安全区与底部 tab 继续正常,不出现按钮进状态栏或点不到的问题 + +### 开发验证 + +- 原生 UI helper 单测覆盖会话项和我的页基础结构 +- Android 单测与 release 构建通过 +- OPPO 真机回归覆盖: + - 会话首页 + - 会话进入/返回 + - 我的首页 + - 我的 > 关于 + - 底部 tab 切换 + +## 风险与控制 + +- 风险:只改样式不改点击区,导致“看起来对了,用起来别扭” + - 控制:本轮把 UI helper 与根活动页绑定一起回归 +- 风险:为了压成微信式列表,误删了当前必要字段 + - 控制:线程名 / 文件夹名 / 最后一条消息 / 时间 / 动态图标全部保留,只调整层级 +- 风险:我的页改头像区时破坏顶部安全区 + - 控制:继续沿用 `BossWindowInsets`,不另起一套 inset 逻辑