# H5 前端重构设计蓝本(v1.1 · 2026-07-05)

> 依据:BRD 选用育留主线 + `feedback/2026070423/ANALYSIS.md`(用户 13 条反馈解读)+ 2026-07-03/04 已落地的体验修复。
> 定位一句话:**每个一线员工口袋里的老师傅**(用户原话背书:"感觉像老带新的感觉",feedback 截图 10)。
> 本文是 P1 开工蓝本,每节可拆成独立执行规格;工程现状与红线见 `AGENTS.md` 移动端条目。
> v1.1 变更:新增 §2.0 数字师傅形象层(甲方构想:数字形象 + 今日安排/我的地图两面板 + 语音/文字/按钮三交互),员工端首页布局随之修订,路线表 P1/P2 更新。
> 视觉基准:`feedback/2026070423/design/` 5 张效果图 + 其 `REVIEW.md` 修正项(修正项优先于图面)。

## 0. 从"工具箱"到"随身师傅"

现状前端是**功能陈列**:知识库、对练、面试是并列工具,用户要自己想"该用哪个"。
"数字师傅"认知下,产品应像**一个人**:你问他答(言传)、他做给你看(身教)、
他安排你今天练什么(判断)、他记得你的成长。所有设计从这个心智推导。

主角色:**生活顾问**(英雄岗位,沟通密集型:日常小区服务/物业费停车费催缴/投诉处理)。
demo 数据、今日安排样例、问师傅 placeholder、对练入口场景,全部用生活顾问真实工作填充
(seed 人设"王敏·客服管家"即该岗位,内容口径钉死,不向泛化漂移)。
四保一服(保安/保洁/保绿/保修/客服)后置,以视频教学为主、对练为辅。

## 1. 六条设计铁律

全部从用户反馈和一线处境反推,不是审美偏好:

| # | 铁律 | 依据 |
|---|---|---|
| 1 | **媒介即答案**:规则数字→信息图卡;话术→语音+大字;动作流程→视频。文字是给办公室的,用户戴着手套站在地库里 | ANALYSIS 跃迁一 |
| 2 | **结论先行**:任何回答 3 秒内给可执行结论,深度内容层层下钻,永不倾泻原文 | 反馈 #1/#2 |
| 3 | **一屏一事**:导航一律整页切换;弹出/页内展开/底部追加不用 | 反馈 #3"页面一定要切换" |
| 4 | **可点即明显**:按钮长得像按钮,入口行行有色差;像介绍的就不该能点 | 反馈 #4 |
| 5 | **贵操作按需触发**:AI 生成类(总结图/视频)显式按钮+预期等待动画,点了才花钱 | 反馈 #2、G6 成本闸门 |
| 6 | **弱网可用**:高频 SOP 本地缓存;请求失败有可读兜底,绝不白屏 | 一线场景(地库/电梯间) |

## 2. 信息架构:三端三种形态

三端不是三份同构 tab 页,按各自使用心智取形态。

### 2.0 数字师傅形象层(v1.1 新增,甲方构想)

**构想**:前端做一个数字形象,配合「今日安排」「我的地图」两个面板,语音、文字、按钮三种交互。

**为什么对**:形象的真正价值不是好看,是**给所有系统行为一个"发出者"**——
"系统推送了 2 个任务"是监工,"师傅今天给你排了两件事"是带教。"老带新的感觉"靠信息
架构只能到 60 分,剩下 40 分在这个"人"身上:任务是师傅安排的、点评是师傅说的、话术
是师傅教的。同时直接化解 G4 员工接受度风险("被 AI 监考"→"师傅带我")。

**必须做轻(红线)**:BRD 一期明确不做数字人视频生成(慢且贵,G6)。本层 = **2D 插画
形象 + 四状态状态机**,与数字人视频成本差两个数量级:

| 要素 | 方案 |
|---|---|
| 形象 | 一张"老师傅"人设插画:可亲、专业、40+ 岁感(用户是中年一线员工,不要二次元吉祥物);用 B3 文生图快速出候选给甲方选 |
| 状态机 | **待机**(呼吸/眨眼,CSS 动画)/ **聆听**(录音中,波纹)/ **思考**(检索中)/ **说话**(TTS 播放中,音波);驱动状态的代码已存在——`sopRecording`/`sopLoading`/`sopSpeaking` 即状态源,只差绑一个可视化形象。不做嘴型同步、不做视频、不加依赖 |
| 三交互 | **按钮**(最高频):快捷问题 chips 按岗位配置(生活顾问:催费话术/投诉应对/收费标准)+ 今日安排 CTA + 地图入口,零打字路径;**语音**(现场急用):长按师傅说话→ASR→答案卡+师傅读话术,链路全部已通;**文字**(安静环境/精确提问):查SOP面板已有 |

**两条克制原则**:
1. **形象是氛围不是路障**:默认占屏 ≤1/5,滚动收缩为右下悬浮小头像(即原"问师傅"
   悬浮球的升维合体);老用户要效率;形象加载失败时静态头像兜底(铁律 6)。
2. **人格一致**:气泡文案、答案卡口吻("你可以这么说")、对练点评、TTS 音色统一为
   同一个"师傅"——人格不一致比没有人格更出戏。**师傅人设卡**(名字/语气/口头禅)
   邀甲方参与定稿。

**分阶段**:P1 静态形象+四状态+快捷 chips;P2 配合语音对手戏,师傅"演业主"时明示
人设切换(避免角色混乱);数字人视频远期视试点反馈再议(维持 BRD 决策)。

### 2.1 员工端(核心,几千日活)——师傅形象 + 双引擎首页

```
┌──────────────────────────┐
│  ┌────┐ 「王敏,今天给你    │ ← 师傅形象+气泡(≤1/5屏)
│  │师傅 │   排了两件事」     │   滚动收缩为右下悬浮头像
│  └────┘ 🎤长按说话 ⌨️打字  │   状态机:待机/聆听/思考/说话
│  [催费话术][投诉应对][...]  │ ← 快捷 chips,按岗位配置
│                            │
│ ▍今日安排(师傅排的)       │ ← 引擎一:回答"我该干什么"
│  ● 每日小训:催费沟通 8min │    叙述者=师傅
│  ● 待复盘:昨天的投诉对练  │
│                            │
│ ▍我的地图(全量菜单)       │ ← 引擎二:回答"我能干什么"
│  [问] 查SOP  求助话术      │    生活顾问视图:[问][练]为大区
│  [练] 场景模拟  错题重练   │    每区专属色,按钮化(铁律4)
│  [学] 岗前课程  每日小训   │
│  [报] 上报案例  拍照记录   │
└──────────────────────────┘
 tab: 今日 | 练 | 问 | 我
```

**为什么双引擎分开**:用户既要"AI 分析该让他们看什么"(安排),又要"很明确看到我可以
对哪几个方面操作"(地图,反馈 #5)——两个不同心理诉求,混在一起谁都不满足。
师傅形象层(§2.0)统摄两个面板:今日安排以师傅口吻叙述,问答从师傅气泡发起。

**职责地图按岗位配置渲染**(不写死布局):岗位 → 模块权重/排序/入口集,查配置表。
生活顾问以「问」「练」为主；保安/保洁后续以「学（视频）」为主。
这张配置表即分发引擎规则版 v1 的第一块积木(见 §4)。

**「问师傅」= 产品灵魂交互**(入口即 §2.0 形象层的语音/文字/chips)。回答统一用**答案卡系统**:

```
[话术卡]  你可以这么说 → 2-3 条直接能开口的话(大字,语音可播)
[要点卡]  记住这 3 点  → 信息图式排版(徽章数字/色块分区)
[依据]    折叠,点开看原文片段(现有分层已实现)
[视频]    有相关演示则给时间戳跳转
操作:听一遍 | 跟读练一遍 | 生成总结图(按需,反馈 #2 小窗)
```

**"跟读练一遍"把问和练焊接**:刚问完催费话术,一键进催费对练场景——师傅的教法,
说完就让你练。这也是"问→练"数据闭环的入口(§4)。

### 2.2 候选人端——线性漏斗,不用 tab

低频、目标单一(通过面试入职):进度条驱动的流程页
**面试 → 补资料 → 岗前学习 → 等通知**,每步只有一个主按钮。不加社交/个人中心。

### 2.3 主管端——监工驾驶舱

主管不是来"使用功能"的,是来**看人和派活**的(反馈 #7):
- 今日团队动态流:谁练了什么、效果如何(时间线形态);
- 待办:复盘 / 指派;
- 团队短板热力图 → 点短板一键给相关员工指派专项。
衔接 BACKLOG B5 四维画像、视频观看时长统计(心跳+区间合并)。

## 3. 答案卡的知识类型分层

知识模型加类型维度(ANALYSIS 跃迁二),检索输出按类型供给:

| 类型 | 定位 | 呈现 |
|---|---|---|
| 话术 | 直接能说的话 | 话术卡(大字+语音),生活顾问最高频 |
| SOP | 标准 | 要点卡(信息图式) |
| 案例 | 参照 | 折叠区"看看别人怎么处理" |
| 经验策略 | 火候 | 融入话术卡备注("如果业主还是不满意,再…") |

digest prompt 增加 `scripts`(话术 2-3 条)字段;案例沉淀链路是隐性知识采集入口,
供给侧战略地位上调。

## 4. 贯穿闭环:问 → 学 → 练 → 评 → 再分发

员工一周内问了 3 次催费相关问题 → 分发引擎把"催费沟通专项"排进他明天的今日安排
→ 练完评分入画像 → 主管端看到短板收敛。
**问答行为是最真实的短板信号**——这条数据回流是产品从"工具"变"师傅"的分水岭。

**克制**:分发引擎 v1 用**规则表**(岗位 × 阶段 × 近期问题类目查表),不上真 AI 排序。
规则版一周能落地、可解释、可演示;数据够了再换模型。

## 5. 前置依赖:岗位身份

整个岗位化设计(内容口径/模块权重/场景过滤)依赖岗位字段,而 H5 登录只有手机号。
**轻方案(必须进 P1)**:首次登录后选一次岗位(生活顾问/保安/保洁/保修/客服),
存用户 profile;组织快照(`aihr_org_snapshot`)同步后自动带出,选择页仅对无快照记录者出现。

## 6. 视觉方向:蓝领工具感

不是企业 SaaS 后台感。参照美团骑手端/顺丰小哥端(已验证一线作业者可用性范式):
- 正文 ≥16px,触点 ≥44px,高对比度(阳光下可读);
- 实心按钮+箭头,可点元素与介绍文字视觉分离(铁律 4);
- 每情境区专属强调色;
- 「建设中」提示从 toast 升级为整页/居中大提示(反馈 #3)。

## 7. 工程还债(与 P1 并行,先行)

`mobile/src/App.vue` 已 2500+ 行,是所有改动越来越贵的根因:
- 重构为 vue-router 多路由 + 组件化(按端拆目录)+ design tokens;
- 高频 SOP 进 localStorage(铁律 6);
- 为小程序迁移(uni-app/Taro,AGENTS.md 既定方向)留接缝;
- 迁移期间 demo-check.sh 标记与三端演示流不可回归。

## 8. 路线与度量(尊重 2 人团队)

| 阶段 | 交付 | 验证信号 |
|---|---|---|
| P0(立即) | 发布现有版本上线 | 用户基于新版的下一轮反馈 |
| P1(约一周) | 员工端新 IA(师傅形象层:静态形象+四状态+快捷 chips;今日安排+职责地图+问师傅答案卡)、岗位选择、工程拆分 | 问答采纳率(点"听/练"的比例) |
| P2 | 语音对手戏(师傅"演业主"人设切换)+ **生活顾问场景库做深**(日常服务/催费/投诉三大类) | 人均对练次数(验收 D2≥10 次) |
| P3 | 主管驾驶舱 + 规则版分发引擎 | 每日小训完成率(验收 D3 完训 80%) |
| P3 后 | 四保一服场景做广(视频为主) | — |

**刻意砍掉的**(每加一个模块都在稀释"师傅"心智):
- 案例学习不做独立模块(折进"练"与"问"的供给侧);
- 候选人端不加社交/个人中心;
- 积分商城不碰(B5 画像先行,激励规则后置)。