docs: add thread and group chat ui restore spec
This commit is contained in:
@@ -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 对线程间对话的审批与监督规则本次先定义边界,不在本次设计中进一步算法化。
|
||||
Reference in New Issue
Block a user