diff --git a/docs/superpowers/specs/2026-03-28-wechat-ui-restore-and-thread-group-chat-design.md b/docs/superpowers/specs/2026-03-28-wechat-ui-restore-and-thread-group-chat-design.md new file mode 100644 index 0000000..757e02a --- /dev/null +++ b/docs/superpowers/specs/2026-03-28-wechat-ui-restore-and-thread-group-chat-design.md @@ -0,0 +1,386 @@ +# Boss 原生 Android 旧版 UI 全量还原与线程群聊设计 + +## 1. 背景 + +当前 `Boss` 原生 Android 客户端虽然已经回退到微信式一级结构,但页面视觉、主入口取舍、线程展示方式和会话模型仍然没有完全回到用户确认过的旧版 UI。 + +本次工作的目标不是回滚底层实现,也不是退回 WebView,而是在保留现有原生 Android、现有 API、现有登录恢复、OTA、设备绑定和主 Agent 执行链路的前提下,把前台页面和交互完整拉回旧版 UI 语言,并补齐新的线程会话与群聊规则。 + +本次以 `design/exports/ui-codex-ops-mobile-v13/` 为唯一主视觉基准。图中出现的页面要求严格 1:1 还原;图中未出现但业务必须存在的页面,也必须延续同一套微信式轻界面、列表结构、按钮层级和信息密度,不能继续保留控制台式重面板风格。 + +## 2. 目标 + +本次改造完成后,APP 应满足以下目标: + +1. 一级导航固定为 `会话 / 设备 / 我的`,整体视觉回到旧版导出图的白底、浅灰卡片、轻绿色强调风格。 +2. 所有会话都按聊天工具模型理解,而不是项目卡片模型。 +3. APP 中每一个聊天窗口,对应某个设备、某个 Codex 文件夹里的一个线程;同一文件夹下多个线程,在 APP 中显示为多个独立聊天窗口。 +4. 会话列表主标题显示线程名;副信息指定位置显示线程所属文件夹名。 +5. 会话列表每一项右下角增加动态小图标,只表达“当前后台使用数量”,不展示文字,不展示名称。 +6. 线程名支持在 APP 内按微信最新逻辑修改,并同步回对应 Codex 线程。 +7. 支持从聊天页右上角发起群聊,把不同设备里的不同线程拉进同一个独立群聊。 +8. 群聊由主 Agent 发起和监督;开发任务状态下允许线程直接沟通,非开发任务状态下线程对话必须先经主 Agent 请求用户批准。 +9. `主 Agent` 与 `审计对话` 在会话首页固定置顶,但视觉上仍保持普通会话样式,只用顺序和轻量置顶标识区分。 +10. 图中未出现但必须保留的页面,例如 `AI 账号 / 技能 / 运维与修复 / 审计对话`,也要落到同一套微信式轻界面,不允许继续长成控制台风格。 + +## 3. 非目标 + +本次不做以下事项: + +1. 不回退到 WebView 壳路线。 +2. 不回退当前原生 Android 架构、登录恢复、OTA、设备绑定和主 Agent 执行链路。 +3. 不删除后端已有的线程预算、转发、运维、审计、AI 账号、Skill 等能力;只调整它们在前台的入口、视觉和层级。 +4. 不在本次设计里细化主 Agent 的最终执行策略,只先定义群聊的发起、监督和审批框架。 +5. 不恢复假的 `9:41 / 5G / 电量` 状态栏;状态栏由真机系统自己显示。 + +## 4. 视觉基准 + +### 4.1 主视觉来源 + +唯一主视觉来源: + +- `design/exports/ui-codex-ops-mobile-v13/` + +核心对照图: + +- 会话首页:`g8Qpr.png` +- 聊天页:`grcep.png` +- 设备页:`5iGU7.png` +- 我的页:`LQOJ0.png` +- 登录页:`i7IZ1.png` +- 总览图:`d5gpt.png` + +### 4.2 视觉原则 + +1. 以白底、浅灰面、圆角列表卡片、轻绿色主按钮为主。 +2. 页面主体必须是内容本身,不允许再堆重统计卡片、监控面板或控制台摘要。 +3. 顶部栏、列表、聊天输入区、轻按钮和 tab 结构必须尽量贴近旧版导出图。 +4. 不恢复假的系统状态栏,也不恢复桌面预览卡片壳。 +5. 图里存在的布局、间距、对齐、轻重层级,应优先向导出图靠拢,而不是向当前实现妥协。 + +## 5. 页面信息架构 + +### 5.1 一级导航 + +一级导航固定为: + +1. `会话` +2. `设备` +3. `我的` + +底部 tab 常驻,不滚动隐藏,不做额外复杂入口。 + +### 5.2 主 UI 保留页面 + +主 UI 需要保留并统一到旧版视觉语言的页面包括: + +- 登录 +- 注册 +- 忘记密码 +- 会话首页 +- 单线程聊天页 +- 群聊页 +- 项目目标 +- 版本迭代记录 +- 消息转发 +- 设备首页 +- 添加设备 +- 我的首页 +- 账号与安全 +- 设置 +- 关于 +- 运维与修复 +- 审计对话 +- AI 账号 +- 技能 + +### 5.3 主 UI 撤出的内容 + +以下内容不删除后端能力,但不再以控制台方式露出: + +- 线程预算大面板 +- handoff / 风险摘要大块说明 +- 配额和监控式状态卡 +- 审计、运维、转发、线程详情的大块控制台入口 + +它们若仍需存在,只能以轻量页面、列表项、二级入口或会话方式出现。 + +## 6. 会话模型 + +### 6.1 单线程会话 + +定义: + +- 一个聊天窗口对应一个线程。 +- 一个线程隶属于某个设备上的某个 Codex 文件夹。 +- 同一文件夹下多个线程,在 APP 中显示为多个独立聊天窗口。 + +列表字段: + +- 主标题:线程名 +- 副信息指定行:文件夹名 +- 预览行:最后一条消息 +- 右上:最后一次对话时间 +- 右下:动态小图标,表示当前后台使用数量 + +### 6.2 特殊会话 + +特殊会话包括: + +- `主 Agent` +- `审计对话` + +规则: + +1. 固定置顶在会话首页顶部。 +2. 视觉上与普通会话尽量一致。 +3. 只通过顺序和轻量置顶标识区分。 +4. 不做特殊大卡片。 + +### 6.3 群聊会话 + +定义: + +- 群聊是独立会话,不覆盖或替换原来的单线程会话。 +- 群成员可以来自不同设备、不同文件夹、不同线程。 +- 群头像按微信逻辑显示多头像组合。 + +命名规则: + +1. 创建群聊时自动生成默认群名。 +2. 创建完成后允许修改群名。 + +## 7. 会话列表设计 + +会话列表按旧版导出图风格统一,核心规则如下: + +1. 页面第一屏就是纯会话列表。 +2. `主 Agent` 和 `审计对话` 位于最上方。 +3. 普通会话按聊天工具列表排列,不再掺杂控制台说明。 +4. 每个会话 item 固定包含: + - 左侧头像 + - 主标题:线程名或群名 + - 指定副信息行:文件夹名 + - 最后一条消息预览 + - 最后一次对话时间 + - 右下动态小图标,表示后台使用数量 +5. 不再在列表主行显示线程预算、设备配额、风险摘要等重字段。 + +### 7.1 文件夹名显示位置 + +用户指定的文件夹名显示位置是聊天列表 item 中主标题下方的副信息行,位于最后一条消息预览之上或其同一信息层级位置,必须与用户给出的截图位置一致。 + +### 7.2 后台数量图标 + +规则如下: + +1. 只显示动态小图标,不显示数字文本,不显示说明文本。 +2. 图标位置在当前最后一次对话时间下方的右下区域。 +3. 图标表达的是当前线程后台使用数量。 +4. 不在列表里展示“后台窗口名”或“后台窗口描述”。 + +## 8. 聊天页设计 + +### 8.1 单线程聊天页 + +单线程聊天页按微信式聊天页构成: + +1. 顶部栏: + - 左返回 + - 中间标题:线程名 + - 右上角入口 +2. 顶部轻入口: + - `项目目标` + - `版本迭代记录` +3. 中部主体: + - 纯消息流 +4. 底部输入区: + - 文本输入为主 + - 图片 / 视频 / 转发作为轻入口 + +不允许在主聊天页继续出现: + +- 运维大面板 +- 线程预算块 +- handoff 摘要块 +- 控制台式状态卡 + +### 8.2 群聊页 + +群聊页整体结构与单线程聊天页保持一致,但: + +1. 标题显示群名。 +2. 头像显示群头像组合。 +3. 右上角进入群资料页。 +4. 群成员消息需区分来源线程。 +5. 主 Agent 在群里承担发起和监督角色。 + +## 9. 改名逻辑 + +改名行为必须遵循微信最新逻辑,而不是长按改名、左滑改名等旧交互。 + +### 9.1 线程改名 + +流程: + +1. 进入单线程聊天页。 +2. 点击右上角进入会话信息页。 +3. 在会话信息页中修改线程名。 +4. 保存后同步更新: + - APP 本地显示 + - 服务端状态账本 + - 对应 Codex 线程名称 + +### 9.2 群聊改名 + +流程: + +1. 进入群聊页。 +2. 点击右上角进入群聊信息页。 +3. 在群聊信息页中修改群名。 +4. 保存后更新群聊会话显示。 + +## 10. 群聊创建与沟通规则 + +### 10.1 发起方式 + +群聊创建从聊天页右上角 `+` 发起: + +1. 从单线程聊天页点击右上角 `+` +2. 选择 `发起群聊` +3. 进入线程选择页 +4. 选择任意设备里的任意线程 +5. 自动创建一个新的独立群聊 +6. 自动生成默认群名 +7. 创建成功后进入新群聊页 + +### 10.2 群聊会话与原会话关系 + +规则: + +1. 新建群聊后,原来的单线程会话保留。 +2. 新群聊作为独立聊天窗口出现在会话列表。 +3. 群聊不会覆盖原线程会话。 + +### 10.3 群聊治理规则 + +群聊中的线程协作遵循以下规则: + +1. 开发任务过程中: + - 允许不同线程直接在群聊内对话和协作。 +2. 非开发任务状态下: + - 线程之间不能直接自由对话。 + - 如需对话,必须先请求主 Agent。 + - 主 Agent 再向用户请求是否批准两个线程继续沟通。 + - 用户批准后,线程之间才可继续对话。 + +### 10.4 主 Agent 角色 + +主 Agent 在群聊中的角色是: + +1. 群聊发起者 +2. 群聊监督者 +3. 线程间对话的规则执行者 + +本次先落会话结构、入口和规则,不在本次设计内细化主 Agent 的最终执行策略。 + +## 11. 深层页补齐策略 + +导出图未直接覆盖的页面,也必须统一到这套 UI 语言: + +- AI 账号 +- 技能 +- 设置 +- 账号与安全 +- 运维与修复 +- 审计对话 +- 线程信息 / 会话信息 / 群聊信息 +- 群聊成员选择页 + +补齐原则: + +1. 统一白底、浅卡片、轻按钮风格。 +2. 统一列表式、表单式和信息页结构。 +3. 不再使用控制台式高密度状态块。 +4. 即使信息复杂,也优先拆成列表项或二级页,而不是堆在一个页面里。 + +## 12. 返回逻辑与导航逻辑 + +### 12.1 一级导航 + +底部 tab 固定显示: + +- 会话 +- 设备 +- 我的 + +### 12.2 返回规则 + +规则如下: + +1. 从二级页返回,回到上一页。 +2. 从聊天页返回,回到会话列表。 +3. 从设备详情返回,回到设备列表。 +4. 从我的二级页返回,回到我的首页。 +5. 在根级 tab 页按返回时,先回 `会话` tab。 +6. 已在 `会话` 根页时,再按一次返回进入后台。 + +## 13. 数据与同步要求 + +### 13.1 线程与会话映射 + +必须建立清晰映射: + +- 设备 +- 文件夹 +- 线程 +- 会话窗口 + +要求: + +1. 一个线程映射一个单线程会话。 +2. 一个文件夹下多个线程映射多个独立会话。 +3. 会话列表必须能拿到线程名、文件夹名、最后消息、最后时间、后台使用数量。 + +### 13.2 改名同步 + +线程改名必须同时影响: + +1. APP 会话标题 +2. 服务端状态 +3. 对应 Codex 线程名称 + +### 13.3 群聊同步 + +群聊需要持久化: + +1. 群聊 ID +2. 群名 +3. 群成员线程列表 +4. 群创建者 +5. 群内规则状态 +6. 是否为开发任务状态 + +## 14. 验收标准 + +本次工作完成后,必须满足以下验收条件: + +1. 图中已有页面可与导出图逐页对照,达到 1:1 视觉还原级别。 +2. 图中未出现但必须保留的页面,也统一成同一套微信式轻界面。 +3. 会话列表主标题显示线程名,指定副信息位显示文件夹名。 +4. 每个会话右下角都显示动态后台数量图标。 +5. `主 Agent` 和 `审计对话` 置顶,但视觉仍为普通会话。 +6. 聊天页右上角遵循微信最新逻辑,支持进入信息页改名。 +7. 线程改名后,Codex 对应线程也同步改名。 +8. 支持从聊天页右上角 `+` 发起群聊。 +9. 群聊为独立会话,保留原单线程会话。 +10. 群聊支持自动命名、后续改名、群头像组合显示。 +11. 开发任务状态与非开发任务状态下的线程沟通规则已落地。 +12. 主聊天面、设备面、我的页不再出现控制台式大面板。 + +## 15. 风险与约束 + +1. 导出图是主视觉基准,但不是全部页面的完整交互稿,因此深层页需要在同一套风格内补齐,而不是照当前实现继续延展。 +2. 线程名同步到 Codex 线程需要可靠的线程标识和回写能力,否则会产生 APP 名称与 Codex 名称不一致的问题。 +3. 群聊引入后,单线程会话、群聊会话和主 Agent / 审计对话会并存,需要明确排序、置顶和未读规则。 +4. 主 Agent 对线程间对话的审批与监督规则本次先定义边界,不在本次设计中进一步算法化。