fmode-app/prototypes/fmode-mobile-20261102

fmode 移动端 UI Demo

一个可以直接点通的移动端 UI Demo，按 fmode-app-v2 桌面端的全部业务模块组织流程，视觉参考 WorkBuddy，配色与令牌走项目自己的 4 套整体配色。

打开方式

• 直接用浏览器打开 index.html（file:// 即可，无构建、无依赖、无 CDN）
• 手机访问：把整个目录放到任意静态服务器上，用手机打开
• 窗口宽度 ≥768px 时会提示"请用手机打开"，方便在桌面端走查时误开的情况

目录

index.html    App 外壳 + 内联 SVG 图标 sprite
styles.css    令牌层（来自 _base.scss / _palette.scss）+ 布局与组件样式
data.js       静态示例数据（字段对齐 src/app/core/api/models.ts）
app.js        hash 路由 + 各屏渲染 + 交互
assets/       占位素材（吉祥物已去白底）
verify.mjs    Playwright 验证脚本（截图 + 断言）
shots/        验证产物截图
DESIGN.md     设计说明：与 WorkBuddy 的取舍、逐屏对照 PC 模块

可点击的流程

登录(手机号 → 验证码 / Token) → 首页(新建对话)
首页 ─┬─ 最近会话 → 会话详情 ─┬─ 成果抽屉(任务/文件/成果/状态) → 文件预览
      │                       └─ 发消息（演示版只提示）
      ├─ 左上 ☰ → 抽屉 → 新建对话 / 功能入口 / 工作区·日常·已归档 会话树
      └─ TabBar：首页 / 会话 / 通讯录 / 工作台 / 我的

会话列表右上 ✎、抽屉顶部「新建对话」→ 底部弹层选择数字生命
通讯录 → 数字生命详情 ｜ 同事可展开名下数字生命
工作台 → 数字生命卡片 → 通道 bottom-sheet / 进入会话或详情
我的   → 4 套配色切换、深色模式、正文字号滑块、退出登录

底部输入坞与 TabBar 固定贴底，不随消息滚动（会话页消息区独立滚动）。

路由可以直接访问，例如 index.html#/tasks/t-1、index.html#/chat/s-2。

能做什么 / 不能做什么

能：登录（演示态）、页面跳转与浏览器后退、搜索、筛选、分段切换、抽屉与分组折叠、新建对话弹层、文件预览、配色与明暗与字号切换（都记在 localStorage）。

不能（"纯静态展示"范围）：发送消息、真正创建会话、删除、上传、真实登录（登录只校验手机号/验证码格式，不调接口）。这些按钮保留，点击会给出版式一致的提示："演示版：数据为静态示例"。

验证

node verify.mjs      # 需要项目根目录已安装 playwright；使用本机 Edge

断言：13 个路由全部渲染、无横向溢出、控制台 0 error、4 套配色 × 明暗背景色两两不同、设置页点击能切换配色与深色。

改数据

所有内容都在 data.js：

• agents 数字生命（状态覆盖 running/idle/error/offline）
• people 同事（带 agents 关联）
• sessions + messages 会话与消息（s-1 有完整过程折叠 + 表格，s-2 有附件）
• tasks 七态、projects、deliverables、events

字段名与 src/app/core/api/models.ts 对齐，将来接真实 service 时只需替换数据来源。