fmode-app/prototypes/fmode-mvp-20261014

Fmode 独立交互 Demo

仅依据指定的 PRD、SPEC 和用户画像设计，演示数据已获用户授权。不修改生产 src，不连接真实账号或后端。

预览

在项目根目录执行：

node prototypes/fmode-mvp-20261014/server.mjs

• 桌面会话：http://localhost:4300/desktop/chat
• PC 设置：http://localhost:4300/desktop/mine
• 手机首页：http://localhost:4300/mobile/home
• 手机设置：http://localhost:4300/mobile/mine

手机布局建议使用 390×844 的浏览器设备预览；也可在「我的」中切换端。 登录演示：手机号 13800138000，验证码 123456，Token 为 demo-fmode；不发送短信。 顶部「演示控制台」可切换空态、加载、错误、权限不足，以及消息发送失败和断线状态。

本次视觉修订

• 新增铂金曜黑、冰白靛蓝、暖瓷陶橘、岩灰鸢紫四套完整配色，可在「我的 - 界面外观」即时切换。
• 每套配色支持浅色 / 深色模式；导航、背景、内容面、文字、边框、操作状态和浏览器主题色成组更新，选择会跨刷新保留。
• 主操作使用配套品牌色；成功、告警、失败等语义色保持独立，避免颜色含义随配色改变。
• PC 设置改为账号 / 设置两栏，窄窗自动收为单列。
• PC 内容在工作区内统一居中，达到最大宽度后均分左右留白；会话四栏和手机布局保持不变。
• 页面只在导航时播放轻量过渡，搜索与筛选保留节点、焦点和滚动。
• 抽屉按端分别从右侧 / 底部进出；支持减少动态效果。

验证

在本目录执行：

npm install
npm test
npm run test:layout
npm run test:motion

测试使用本机 Chromium。可通过 DEMO_CHROME 指定浏览器路径；独立测试不影响主工程依赖。

2026-10-14 已验证：

• 53 项双端路由与核心交互检查。
• 131 项布局检查，桌面宽度 768 / 940 / 1024 / 1150 / 1280 / 1440 / 1920 / 2560，手机宽度 360 / 390 / 430；桌面内容左右留白差不超过 1px。
• 9 项开启动画时的切换、快速连续操作、焦点与 reduced-motion 检查。
• 四套配色的浅深模式、偏好持久化、语义色稳定和文字对比度检查。
• PC 设置基线 1440×900；页面宽度溢出、设置控件重叠检查均通过。

报告与截图位于 test-results/。测试结果不代表所有浏览器、设备或生产后端验收。 设计说明见 DESIGN.md。