fmode-app/docs/02-design/plans/2026-10-16-mobile-ui-polish.md

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 附件，用于验证窄屏长内容、列表分隔和下载交互。