prop-ai-hr/docs/FIGMA_ONLINE_DELTA.md

Figma 与线上 H5 差异矩阵

2026-07-13 基于线上 https://peilian.njzhmj.top/h5/ 实测截图、现有 mobile-uni 实现与 Figma 文件 银城员工端与个人 AI 助理设计 整理。

使用口径

• 线上版本是行为、接口、路由和真实数据状态的基线。
• Figma 是视觉、信息层级和完整状态覆盖的目标基线。
• 不以静态设计替代未实现的后端能力；所有新增状态必须对应现有接口或明确的建设中状态。
• 本批先收敛登录页与员工训练主链路，主管端角色路由单独作为阻塞项处理。

差异矩阵

页面/流程	线上实测	Figma 目标	当前判断	调整动作	验收口径
登录页	浅蓝灰背景、青绿色主按钮、卡片下方留白较大	银城红主色、紧凑表单、明确验证码行和状态反馈	视觉 token 未统一	主色统一为 #E60012；收紧卡片和纵向留白；保留手机号、验证码、发送中/失败/成功状态	390×844 无横向滚动；输入、验证码和登录按钮均可操作；错误文案不跳布局
员工今日首页	首屏突出问答入口，今日安排和地图在下方；线上包体仍是蓝/绿/橙多色旧视觉	师傅区 → 今日安排 → 我的地图 → 成长摘要；红白轻卡片体系	行为已可用，线上发布包落后于当前源码/Figma	保留真实问答和任务接口；以当前源码的员工端 token 为准，逐步替换线上旧包	“开始训练”进入独立训练页，不在首页插入训练面板
员工训练入口	首页任务按钮已有 switchTab('/pages/user/practice/index')	训练中心首屏为场景模拟、开始练习、最近练过，每日三题后置	路由方向正确，首屏优先级需守住	保持独立训练页；场景卡和开始练习固定在首屏，最近练过紧随其后，每日三题后置	点击开始练习后进入 active 对话区；提交/结束/结果链路不回归
训练中	真实对练、录音/文件兜底、SOP 求助、结束评分均已存在	角色对话、教练提示、结果卡分层展示	行为完整，视觉层级需统一	只调整卡片层级、按钮状态和提示区域，不改 /start、/turn、/finish 契约	开始、提交回应、求助、结束评分、失败回滚均可验证
主管端	本次以主管手机号登录后仍落到员工端，未能进入主管首页	已有主管工作台、待复盘、复盘详情、能力与派发页面	角色/岗位路由是阻塞项	先排查线上岗位识别与路由分流，再进行主管视觉迁移	主管账号可稳定进入主管首页；普通员工仍被拒绝主管接口
个人资料库/问题榜	线上当前入口未能从员工首页验证	Figma 已有资料库、引用回答、问题榜和激励状态	属于后续建设目标，不伪造上线	等对应 API/入口具备后再实现；当前保留建设中或既有真实入口	有真实接口和权限边界后再纳入线上验收

本批实施边界

1. 登录页只改视觉 token、间距和状态表现，不改短信登录接口、认证存储和原路跳转。
2. 员工训练页只强化入口和状态层级，不重写训练状态机，不新增后端字段。
3. 主管端不通过前端硬编码角色解决；先以真实手机号、岗位快照和路由结果取证。
4. Figma 的 LXGW WenKai TC 与线上系统字体存在实现差异。本批代码继续使用现有系统字体栈，避免未加载字体造成线上回退；如要全面采用 Figma 字体，另开字体资源与性能评估。

当前验收证据

• 线上登录页和员工首页截图：/Users/yuanjiantsui/.codex/visualizations/2026/07/13/019f5984-0790-7c01-91f2-e93cca023ae0/
• Figma 员工训练前、主管工作台、个人资料库、问题榜截图：同一目录下的 figma-*.png
• 设计资产总清单：docs/FIGMA_DESIGN_INVENTORY.md