# 2026-10-16 移动端 UI 细节优化方案

## 目标

在不改变业务数据、路由契约和 ui-kit 底座的前提下，统一 mobile 端 11 个页面的视觉节奏与触达体验，重点处理首页、列表、详情、工作台、成果预览和底部导航。

## 设计决策

- 页面背景使用 `--canvas`，内容面使用 `--surface`，搜索框、筛选栏和信息块分别保留层级，不再连续使用同一背景色。
- 标题、区块和列表统一采用移动端间距令牌；列表优先使用轻分隔线，卡片只用于需要聚焦的任务、统计和预览内容。
- 所有按钮、返回、下载、刷新和关闭操作保持 `--touch-min` 触达尺寸，并补齐 active/focus-visible 状态。
- 二级页面继续使用统一的 `app-m-back-bar`；底部导航使用安全区和半透明表面，页面内容预留导航高度。
- 只调整模板中的展示结构和组件局部样式，不改服务层、数据字段和路由行为。

## 影响范围

`src/app/mobile/shell`、`src/app/mobile/components`、`src/app/mobile/pages` 下的移动端页面样式与少量展示标记。

## 验收口径

- 390px 宽视口下页面无横向溢出，底部导航不遮挡最后一项内容。
- 搜索、筛选、列表、详情返回、下载和底部 sheet 的触达区域不小于 44px。
- 亮色和暗色主题下文字、边界、选中态和错误态均沿用语义令牌。
- `npm run build` 通过，且不产生新增 TypeScript 模板错误。

## 第二轮交互收敛（2026-10-16）

- 工作台采用固定标题、搜索、摘要与告警区，数字生命卡片进入独立滚动容器；卡片压缩为移动端单列紧凑信息卡。
- 首页存在独立品牌顶栏时，不再让问候标题参与全局 sticky，避免下拉后两层顶栏互相覆盖。
- 全局移动 toast 统一从顶部进入，避开底部 TabBar 与安全区。
- mobile 页面内部导航固定使用 `/mobile` 路径，直接打开移动 URL 时不受桌面浏览器 UA 影响。

## 登录页双端综合优化（2026-10-16）

- 移动端采用「品牌说明 + 单一登录面板」：减少首屏空白，保留 Fmode、数字生命消息中枢和会话/任务/成果功能说明。
- 桌面端保持左右分区，但收紧品牌说明层级、登录面板宽度和表单间距，让登录动作成为右侧唯一主任务。
- 验证码与 Token 直登继续复用同一认证逻辑；按钮根据手机号、验证码和 Token 的有效状态明确启用/禁用。
- 发送验证码只在手机号格式正确时可用，登录按钮只在当前方式的必填项完成时可用；错误、发送中、倒计时和登录中状态保留明确反馈。
- 输入说明、错误提示和自动登录状态补充无障碍语义，所有颜色、字号、间距、圆角和阴影继续使用项目令牌。
- 审核阶段临时开启 AUTH_REVIEW_BYPASS，允许直接访问桌面和移动页面；正式发布前关闭该开关恢复登录守卫。

## 任务看板与移动弹层优化（2026-10-16）

- 任务看板采用固定页头、数字生命筛选和状态筛选，只有任务列表区域滚动；列表增加任务数量和阻塞状态的明确层级。
- 工作台通道详情统一为底部 sheet：顶部显示对象和连接状态，主体显示连接信息，打开时隐藏底部 TabBar，避免导航与弹层重叠。
- 会话成果弹层统一标题区、当前项目区、成果列表区和底部动作区；保留预览、下载和查看全部成果逻辑。
- 三类弹层继续使用语义颜色、移动触达尺寸和安全区，不修改 ui-kit 底座。

## 第三轮交互收敛（2026-10-16）

- 工作台刷新按钮补齐移动端按压缩放、刷新中主色态、旋转反馈和减少动效适配；刷新过程继续通过顶部全局 Toast 告知状态。
- 退出登录入口恢复为整行危险主按钮，确认弹层保持居中二次确认、遮罩关闭和安全区留白，避免纯文字危险按钮在页面底部被忽略。
- 通讯录采用与会话页一致的固定标题、搜索、筛选结构，只有联系人列表区域滚动；联系人展开动画保留在列表内部，不影响顶部操作区。

## 会话成果与任务详情路由（2026-10-16）

- **桌面功能基准**：任务看板对齐 `src/app/desktop/pages/tasks/tasks.ts`，保留七态筛选、任务更新时间排序、状态/阻塞信息、任务说明、运行流水、附件、历史评论和进入会话；一期只读。会话成果对齐 `src/app/desktop/pages/chat/chat.ts` 右侧成果栏及预览，保留当前项目、成果列表、预览/下载和查看全部。
- **移动任务列表**：标题、只读标识、数字生命选择、状态筛选、任务数量固定在顶部；仅列表内部滚动。保持卡片/行的状态信息、负责人、更新时间和阻塞提示。
- **移动任务详情**：任务从内联 signal 切换改为 `/mobile/tasks/:id?agent=:agentId` 独立路由。返回操作走路由历史，直接打开 URL 时以 `agent` 查询参数加载所属任务；详情固定返回栏，其余详情信息在唯一内容区滚动。布局用单列，信息顺序对应桌面详情，不新增写操作。
- **移动成果弹层**：采用视口内底部 Sheet，标题区与“查看全部成果”操作固定，当前项目与成果卡列表置于唯一滚动区；预览/下载保留为独立触控入口，适配安全区、窄宽、明暗主题和减少动效。
- **文件范围**：修改 `src/app/mobile/pages/tasks/tasks.ts`、`src/app/mobile/pages/tasks/task-detail.ts`、`src/app/mobile/mobile.routes.ts`、`src/app/mobile/pages/chat/chat.ts`；任务仍消费既有 `TasksService`，不修改数据模型和后端契约。
- **验收**：390×844 下任务标题与筛选不随列表滚动；列表点击和直达详情 URL 均显示同一任务；返回恢复列表路由；任务详情字段完整且只有内容区滚动；成果 Sheet 窄屏不横溢出，顶部/底部固定、成果列表可独立滚动；构建、UI 静态断言和现有测试通过。

## 跨端收尾优化（2026-10-16）

- 移动工作台手动刷新时，卡片区切换为语义骨架屏；刷新按钮保留旋转反馈，完成或失败通过顶部全局 Toast 告知。
- 移动通讯录的 AI 数字生命与同事区域分别使用固定可视高度和内部滚动，顶部标题、搜索和分类筛选保持固定。
- 移动与桌面个人页的退出动作改用业务层危险色按钮，文字使用 `--on-danger`，保证深色和浅色主题均有稳定对比；桌面个人页补充账户分区、入场动效和焦点/按压状态。
- 桌面侧栏折叠态的按钮改为品牌图标右上角悬浮定位，保持图标中心不被挤压。
- 移动外壳监听窗口宽度；宽度达到 768px 时显示桌面端切换提示，用户确认后写入端偏好并跳转桌面入口。桌面窄窗仍保留已有移动端切换提示。

## 任务详情与独立任务看板收敛（2026-10-16）

- 任务看板与任务详情移出 MobileShell 子路由，作为全屏移动页面加载，避免底部 TabBar 与任务操作区竞争空间；两页统一使用固定返回栏，任务看板默认返回工作台。
- 任务详情保持唯一纵向滚动主体；说明正文使用可换行的长文本块，不设置嵌套滚动，避免移动端滚动手势冲突。
- 任务详情的说明、运行流水、附件和历史评论使用独立表面、边界和语义图标区分；附件在存在 `url` 时提供符合触达尺寸的下载入口，无地址时明确显示不可下载状态。
- 演示任务 T-108 增加长说明、多个评论、运行记录和两个可下载的 data URL 附件，用于验证窄屏长内容、列表分隔和下载交互。