# fmode 移动端 UI Demo · 设计说明

> 版本：2026-11-02 · 形态：**全屏移动端可交互 Demo**（非手机壳展示）
> 视觉参考：WorkBuddy（uinotes 收录截图）· 配色与令牌：本项目《设计令牌.md》v3.0
> 数据：静态示例（`data.js`），不发起任何写请求

## 一、为什么要做

PC 端（`src/app/desktop/**`）已经有完整业务：左栏三段式会话树、多会话、任务七态看板、项目、成果、事件、工作台、数字生命详情、我的设置。
移动端（`src/app/mobile/**`）只有 5 个 Tab 的骨架页面。这份 Demo 的目的，是**先用一份可直接点通的 UI 验证移动端的版式与交互**，作为之后逐屏搬进 Angular 的基线。

## 二、取 WorkBuddy 的"形"，换项目的"色"

| 维度 | 来自 WorkBuddy | 按项目调整 |
|---|---|---|
| 版式 | 顶部圆形浮动图标按钮、居中大标题、分段胶囊、底部大圆角输入坞 | 保留 |
| 对话 | "过程分段折叠 + 步骤条 + 参数表格 + 内容由 AI 生成" | 保留，表格/状态改走语义色 |
| 导航 | 左侧滑出抽屉 | 抽屉内容改为 PC 会话树的三段分组（工作区 / 日常对话 / 已归档）+ 一级菜单 |
| 主色 | 黑色按钮 + 薄荷绿 `#17b58b` | **删除薄荷绿**；主操作/选中/链接一律 `--primary`（随 4 套配色变化） |
| 状态色 | 绿色表示"已完成/选中"混用 | 状态一律走语义色：running=success、idle=warning、error/offline/blocked=danger、执行中=info |
| 字号 | 目测 17/30 等 | 项目 8 档 `--fs-11/12/13/15/17/20/26/42`，输入 ≥ `--fs-17`(16px) |
| 圆角 | 26px 输入坞 | 项目 4 档 `--r-sm 6 / --r-md 10 / --r-lg 16 / --r-tag 999` |
| 间距 | 目测 | `--sp-1..8`（4/8/12/16/20/24/32） |
| 手机壳 | 390×844 模拟器 | 去掉；`100dvh` 实屏 + 安全区 |

## 三、令牌来源

| 内容 | 来源文件 |
|---|---|
| 中性色 / 主色 / 导航 / 头像 / 遮罩（4 套 × 明暗） | `src/app/core/styles/_palette.scss` 原样搬运到 `styles.css` 的 `:root[data-palette='x']` / `.dark[data-palette='x']` |
| 语义色 / 字号 / 圆角 / 间距 / z-index / 动效 / 阴影 / 布局 | `src/app/core/styles/_base.scss` |
| 状态色映射 | 《设计令牌.md》§5.1 |
| 持久化键 | `fmode_palette` / `fmode_theme` / `fmode_fs`（与项目一致） |

`styles.css` 里只有令牌块出现色值，其余全部 `var(--xx)`。

## 四、逐屏对照 PC 模块

| Demo 路由 | 页面 | PC 对应 | 说明 |
|---|---|---|---|
| `#/login` | 登录 | `pages/login` | 手机号 → 验证码 / `r:` Token 两路；协议勾选；未登录访问任意页都落到这里 |
| `#/home` | 新建对话引导 | 桌面"新建对话"入口 + `mobile/pages/home` | 落地态；最近会话 3 条；输入坞 |
| `#/messages` | 会话列表 | `mobile/pages/messages` | 搜索 + 未读/工作区筛选 + 状态点 |
| `#/chat/:id` | 会话详情 | `desktop/pages/chat` | 用户气泡、过程分段折叠、Markdown 表格、附件卡、AI 脚注 |
| 会话内的成果抽屉 | 任务/文件/成果/状态 | 桌面右侧四标签栏 | 底部弹层 |
| 文件预览层 | 预览 | `components/preview/*` | pdf/xlsx/md 三种骨架 |
| `#/contacts` | 通讯录 | `desktop/pages/contacts` | 数字生命 / 同事分组，同事可展开 |
| `#/agent/:id` | 数字生命详情 | `desktop/pages/agent` | 指标、KV、权限开关、最近交付 |
| `#/projects` `#/projects/:id` | 项目 | `desktop/pages/projects` | 列表↔详情同页切换 |
| `#/tasks` `#/tasks/:id` | 任务看板 / 详情 | `desktop/pages/tasks` | 七态筛选 chips、阻塞显著标记、运行流水、评论 |
| `#/deliverables` | 成果 | `desktop/pages/deliverables` | 按项目 / 按时间线 |
| `#/events` | 事件 | `desktop/pages/events` | 按天分组，交付/执行/告警三类 |
| `#/workbench` | 工作台 | `desktop/pages/workbench` | 每个数字生命一卡：状态、当前任务、CPU/内存、通道、充值 |
| `#/mine` | 我的 | `desktop/pages/mine` | 配色 4 套、深色、正文字号、Token、退出确认 |
| 抽屉 | 会话树 | `components/domain/session-tree` | 顶部「新建对话」→ 选择数字生命；功能入口；工作区 / 日常对话 / 已归档（原地折叠，不重建 DOM） |

## 五、与 WorkBuddy 的已知差异

1. 品牌与文案全部换成 fmode 的（"fmode 人机共生中枢""数字生命"），不照搬 WorkBuddy 文案。
2. 吉祥物沿用 WorkBuddy 截图裁出的机器人（已去白底），仅作占位；正式版应替换为 fmode 自有素材。
3. 群聊/工作组（PC 已下线）、语音通话（PRD 明确不做）不在 Demo 内。
4. 系统键盘、真机状态栏未模拟。