fmode-app/prototypes/fmode-mobile-20261102/DESIGN.md

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. 系统键盘、真机状态栏未模拟。