From ee396d1e7ab68f8a9d26af86b6786b0e1bf0c235 Mon Sep 17 00:00:00 2001
From: let5sne <let5sne@gmail.com>
Date: Sat, 11 Jul 2026 01:13:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(mobile):=20=E9=87=8D=E5=81=9A=E5=91=98?=
 =?UTF-8?q?=E5=B7=A5=E7=AB=AF=E9=A6=96=E9=A1=B5=E3=80=81=E9=97=AE=E7=AD=94?=
 =?UTF-8?q?=E5=92=8C=E8=AE=AD=E7=BB=83=E9=A1=B5=E8=A7=86=E8=A7=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

统一员工端 tabBar、共享卡片和三大核心页面的视觉基础，同时保持现有移动端业务流程不变。补充 H5 输入兼容、页面结构和训练回滚行为的回归测试。
---
 ...bile-uni-employee-pages-visual-redesign.md | 450 +++++++++++++
 ...bile-uni-employee-pages-visual-redesign.md | 241 +++++++
 mobile-uni/src/manifest.json                  |   1 +
 mobile-uni/src/pages.json                     |  34 +-
 mobile-uni/src/pages/user/practice/index.vue  | 408 ++++++++----
 mobile-uni/src/pages/user/sop/index.vue       | 594 ++++++++++++++++--
 mobile-uni/src/pages/user/today/index.vue     | 566 +++++++++++------
 mobile-uni/src/static/brand-logo.png          | Bin 0 -> 3154 bytes
 .../src/static/tabbar/LICENSE-lucide.txt      |  16 +
 mobile-uni/src/static/tabbar/ask-active.png   | Bin 0 -> 2264 bytes
 mobile-uni/src/static/tabbar/ask-normal.png   | Bin 0 -> 3205 bytes
 .../src/static/tabbar/practice-active.png     | Bin 0 -> 2041 bytes
 .../src/static/tabbar/practice-normal.png     | Bin 0 -> 3098 bytes
 .../src/static/tabbar/profile-active.png      | Bin 0 -> 1895 bytes
 .../src/static/tabbar/profile-normal.png      | Bin 0 -> 2485 bytes
 mobile-uni/src/static/tabbar/today-active.png | Bin 0 -> 1358 bytes
 mobile-uni/src/static/tabbar/today-normal.png | Bin 0 -> 1701 bytes
 mobile-uni/src/styles/base.css                | 201 ++++--
 mobile-uni/tests/mobile-user-pages.test.mjs   |  99 +++
 19 files changed, 2171 insertions(+), 439 deletions(-)
 create mode 100644 docs/superpowers/plans/2026-07-11-mobile-uni-employee-pages-visual-redesign.md
 create mode 100644 docs/superpowers/specs/2026-07-11-mobile-uni-employee-pages-visual-redesign.md
 create mode 100644 mobile-uni/src/static/brand-logo.png
 create mode 100644 mobile-uni/src/static/tabbar/LICENSE-lucide.txt
 create mode 100644 mobile-uni/src/static/tabbar/ask-active.png
 create mode 100644 mobile-uni/src/static/tabbar/ask-normal.png
 create mode 100644 mobile-uni/src/static/tabbar/practice-active.png
 create mode 100644 mobile-uni/src/static/tabbar/practice-normal.png
 create mode 100644 mobile-uni/src/static/tabbar/profile-active.png
 create mode 100644 mobile-uni/src/static/tabbar/profile-normal.png
 create mode 100644 mobile-uni/src/static/tabbar/today-active.png
 create mode 100644 mobile-uni/src/static/tabbar/today-normal.png
 create mode 100644 mobile-uni/tests/mobile-user-pages.test.mjs

diff --git a/docs/superpowers/plans/2026-07-11-mobile-uni-employee-pages-visual-redesign.md b/docs/superpowers/plans/2026-07-11-mobile-uni-employee-pages-visual-redesign.md
new file mode 100644
index 00000000..e679e68b
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-11-mobile-uni-employee-pages-visual-redesign.md
@@ -0,0 +1,450 @@
+# Mobile Uni Employee Pages Visual Redesign Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 将员工端 `today / sop / practice` 三页及其强相关的 `tabBar / 共享卡片样式` 调整为接近设计基准稿的统一视觉，同时保持现有业务交互和接口行为不变。
+
+**Architecture:** 采用“视觉优先、业务最小改动”的改法：先建立员工端共享视觉 token 与基础样式，再按首页、问师傅页、训练页的顺序逐页重排结构和样式。页面内部函数、接口调用与路由保留，主要改模板层级、类名、样式组织和少量静态资源引用。
+
+**Tech Stack:** uni-app Vue3、Vite、TypeScript、CSS、Node 原生测试、H5 构建校验
+
+---
+
+### Task 1: 建立员工端共享视觉基座
+
+**Files:**
+- Modify: `mobile-uni/src/styles/base.css`
+- Modify: `mobile-uni/src/pages.json`
+- Test: `mobile-uni/tests/mobile-user-pages.test.mjs`
+
+- [x] **Step 1: 写一个失败测试，锁住 Vue3 manifest 与员工端视觉约束继续有效**
+
+```js
+test('tabBar 继续保留员工端四个固定入口', async () => {
+  const source = await pageSource('../src/pages.json');
+
+  assert.match(source, /pages\/user\/today\/index/);
+  assert.match(source, /pages\/user\/practice\/index/);
+  assert.match(source, /pages\/user\/sop\/index/);
+  assert.match(source, /pages\/user\/profile\/index/);
+});
+```
+
+- [x] **Step 2: 运行测试，确认新增断言先失败或当前文件尚未覆盖该约束**
+
+Run: `node --test tests/mobile-user-pages.test.mjs`
+Expected: 新增测试如果还没加入会缺失；加入后在修改前至少能作为后续回归校验入口存在。
+
+- [x] **Step 3: 在 `base.css` 中整理员工端共享 token，不扩大到全站侵入式重置**
+
+```css
+:root {
+  --employee-bg: #f4f6fb;
+  --employee-surface: #ffffff;
+  --employee-primary: #2f6bff;
+  --employee-primary-soft: #eaf1ff;
+  --employee-success: #34b368;
+  --employee-warning: #ff8a1f;
+  --employee-danger: #ff5b4d;
+  --employee-text: #182230;
+  --employee-muted: #6b7280;
+  --employee-card-radius: 24px;
+  --employee-card-shadow: 0 12px 32px rgba(47, 107, 255, 0.08);
+}
+
+.employee-card {
+  border-radius: var(--employee-card-radius);
+  background: var(--employee-surface);
+  box-shadow: var(--employee-card-shadow);
+}
+
+.employee-section-title {
+  color: var(--employee-text);
+  font-size: 20px;
+  font-weight: 900;
+}
+```
+
+- [x] **Step 4: 调整 `pages.json` 的员工端 tabBar 视觉参数，保留四 tab 结构和路径**
+
+```json
+"tabBar": {
+  "color": "#7b8494",
+  "selectedColor": "#2f6bff",
+  "backgroundColor": "#ffffff",
+  "borderStyle": "white",
+  "height": "66px",
+  "fontSize": "12px",
+  "iconWidth": "25px",
+  "spacing": "3px",
+  "list": [
+    { "pagePath": "pages/user/today/index", "text": "今日" },
+    { "pagePath": "pages/user/practice/index", "text": "练" },
+    { "pagePath": "pages/user/sop/index", "text": "问" },
+    { "pagePath": "pages/user/profile/index", "text": "我" }
+  ]
+}
+```
+
+- [x] **Step 5: 更新回归测试，验证 tabBar 四入口与共享样式关键 token 存在**
+
+```js
+test('共享视觉基座包含员工端主色和卡片圆角 token', async () => {
+  const source = await pageSource('../src/styles/base.css');
+
+  assert.match(source, /--employee-primary:/);
+  assert.match(source, /--employee-card-radius:/);
+});
+```
+
+- [x] **Step 6: 运行测试验证通过**
+
+Run: `node --test tests/mobile-user-pages.test.mjs`
+Expected: PASS，且已有输入兼容与 manifest 测试继续通过。
+
+- [ ] **Step 7: 提交这一阶段改动**
+
+```bash
+git add mobile-uni/src/styles/base.css mobile-uni/src/pages.json mobile-uni/tests/mobile-user-pages.test.mjs
+git commit -m "feat: add employee visual foundation"
+```
+
+### Task 2: 重做员工端首页视觉
+
+**Files:**
+- Modify: `mobile-uni/src/pages/user/today/index.vue`
+- Modify: `mobile-uni/src/styles/base.css`
+- Test: `mobile-uni/tests/mobile-user-pages.test.mjs`
+
+- [x] **Step 1: 为首页结构写失败测试，锁住设计稿要求的核心区块**
+
+```js
+test('员工首页保留师傅区、语音条、今日安排、我的地图四段结构', async () => {
+  const source = await pageSource('../src/pages/user/today/index.vue');
+
+  assert.match(source, /mentor-hero/);
+  assert.match(source, /voice-panel/);
+  assert.match(source, /今日安排/);
+  assert.match(source, /我的地图/);
+});
+```
+
+- [x] **Step 2: 运行测试确认结构断言可作为改版护栏**
+
+Run: `node --test tests/mobile-user-pages.test.mjs`
+Expected: 失败或在旧结构下不足以覆盖新样式目标，后续补全后通过。
+
+- [x] **Step 3: 重排首页模板，保留原有交互函数但调整为设计稿节奏**
+
+```vue
+<view class="mentor-hero employee-hero">
+  <view class="hero-copy">
+    <text class="hero-role">{{ positionProfile.value }}</text>
+    <text class="hero-title">{{ positionProfile.heroTitle }}</text>
+    <text class="hero-sub">有问题，随时问老师傅</text>
+  </view>
+  <image class="mentor-image" src="/static/mentor.png" mode="aspectFit" />
+  <view class="mentor-bubble">
+    <text>{{ mentorBubbleText }}</text>
+  </view>
+</view>
+
+<view class="voice-panel employee-card">
+  <button class="voice-primary" @click="goSop">...</button>
+  <button class="voice-secondary" @click="goSop">...</button>
+</view>
+
+<view class="section-card employee-card" v-else-if="hasSchedule">...</view>
+<view class="section-card employee-card" v-if="loggedIn">...</view>
+```
+
+- [x] **Step 4: 用 scoped 样式还原首页视觉，控制人物占屏不超过首屏约五分之一**
+
+```css
+.today-page {
+  background: radial-gradient(circle at top, #eef5ff 0%, #f7f9fc 38%, #f4f6fb 100%);
+}
+
+.mentor-hero {
+  min-height: 220px;
+  padding: 28px 24px 0;
+}
+
+.mentor-image {
+  right: 24px;
+  bottom: 0;
+  width: 108px;
+  height: 148px;
+}
+
+.voice-panel {
+  margin-top: -28px;
+  grid-template-columns: 1.4fr 1fr;
+}
+
+.map-tile {
+  border-radius: 22px;
+  min-height: 136px;
+}
+```
+
+- [x] **Step 5: 更新测试，验证首页地图主标题继续显示真实 `tile.title`，避免回退成单字标题**
+
+```js
+test('员工首页地图主标题继续显示真实工具名称', async () => {
+  const source = await pageSource('../src/pages/user/today/index.vue');
+
+  assert.match(source, /<text class="map-title">\{\{ tile\.title \}\}<\/text>/);
+});
+```
+
+- [x] **Step 6: 运行测试验证首页改版没有破坏护栏**
+
+Run: `node --test tests/mobile-user-pages.test.mjs`
+Expected: PASS。
+
+- [ ] **Step 7: 提交首页改版**
+
+```bash
+git add mobile-uni/src/pages/user/today/index.vue mobile-uni/src/styles/base.css mobile-uni/tests/mobile-user-pages.test.mjs
+git commit -m "feat: redesign employee home page"
+```
+
+### Task 3: 重做问师傅页视觉与总结卡展现
+
+**Files:**
+- Modify: `mobile-uni/src/pages/user/sop/index.vue`
+- Modify: `mobile-uni/src/styles/base.css`
+- Test: `mobile-uni/tests/mobile-user-pages.test.mjs`
+
+- [x] **Step 1: 为问师傅页写失败测试，锁住搜索主导与总结卡入口仍然存在**
+
+```js
+test('问师傅页保留搜索框、答案区和总结卡入口', async () => {
+  const source = await pageSource('../src/pages/user/sop/index.vue');
+
+  assert.match(source, /query-panel/);
+  assert.match(source, /answer-panel/);
+  assert.match(source, /summary-panel/);
+});
+```
+
+- [x] **Step 2: 运行测试确认护栏建立成功**
+
+Run: `node --test tests/mobile-user-pages.test.mjs`
+Expected: 断言可执行，作为后续视觉重排的结构保护。
+
+- [x] **Step 3: 收紧问师傅页头部，改为“轻标题 + 强搜索框”的布局**
+
+```vue
+<view class="page sop-page">
+  <view class="sop-toolbar">
+    <text class="page-title">查SOP</text>
+    <text class="page-subtitle">直接搜 SOP、案例和常用话术</text>
+  </view>
+
+  <view class="panel query-panel employee-card">
+    <textarea v-model="query" class="textarea sop-query-textarea" ... />
+    <view class="chip-row">...</view>
+    <button class="primary-button query-submit" ...>问老师傅</button>
+  </view>
+</view>
+```
+
+- [x] **Step 4: 调整答案卡、引用依据和总结卡为更接近设计稿的卡片层级与底部浮层感**
+
+```css
+.sop-page {
+  background: linear-gradient(180deg, #f7f9fc 0%, #f4f6fb 100%);
+}
+
+.query-panel {
+  border-radius: 22px;
+  padding: 18px;
+}
+
+.answer-panel {
+  border-left: 0;
+  border-radius: 22px;
+}
+
+.modal-card {
+  border-radius: 28px 28px 0 0;
+  max-width: 430px;
+  width: calc(100% - 16px);
+}
+```
+
+- [x] **Step 5: 保持 H5 输入兼容测试存在，防止误把 `textarea` 再次改成 `border-box`**
+
+```js
+test('SOP 查询框不覆盖 textarea 的 box-sizing', async () => {
+  const source = await pageSource('../src/pages/user/sop/index.vue');
+  const queryPanelStyle = source.match(/\.query-panel \.textarea \{[\s\S]*?\n\}/)?.[0] || '';
+
+  assert.equal(queryPanelStyle.includes('box-sizing'), false);
+});
+```
+
+- [x] **Step 6: 运行测试验证通过**
+
+Run: `node --test tests/mobile-user-pages.test.mjs`
+Expected: PASS。
+
+- [ ] **Step 7: 提交问师傅页改版**
+
+```bash
+git add mobile-uni/src/pages/user/sop/index.vue mobile-uni/src/styles/base.css mobile-uni/tests/mobile-user-pages.test.mjs
+git commit -m "feat: redesign employee sop page"
+```
+
+### Task 4: 重做训练页视觉但保留训练逻辑
+
+**Files:**
+- Modify: `mobile-uni/src/pages/user/practice/index.vue`
+- Modify: `mobile-uni/src/styles/base.css`
+- Test: `mobile-uni/tests/mobile-user-pages.test.mjs`
+
+- [x] **Step 1: 为训练页写失败测试，锁住训练关键区块仍存在**
+
+```js
+test('训练页保留场景区、对话区、回复区和结果区', async () => {
+  const source = await pageSource('../src/pages/user/practice/index.vue');
+
+  assert.match(source, /scenario-card/);
+  assert.match(source, /dialogue-card/);
+  assert.match(source, /reply-card/);
+  assert.match(source, /result-card/);
+});
+```
+
+- [x] **Step 2: 运行测试确认结构护栏存在**
+
+Run: `node --test tests/mobile-user-pages.test.mjs`
+Expected: 断言可运行，用于防止视觉重排时误删功能区块。
+
+- [x] **Step 3: 调整训练页模板，让头部、场景卡、老师傅提示更接近设计稿的训练面板结构**
+
+```vue
+<view class="practice-head">
+  <text class="practice-eyebrow">数字师傅 · 场景训练</text>
+  <text class="page-title">{{ activeScenarioName }}</text>
+  <text class="page-subtitle">与业主、老师傅完成一轮真实工作对话</text>
+</view>
+
+<view v-if="loggedIn" class="panel scenario-card employee-card">...</view>
+<view v-if="turns.length" class="panel dialogue-card employee-card">...</view>
+<view v-if="status === 'active' || status === 'submitting'" class="panel reply-card employee-card">...</view>
+```
+
+- [x] **Step 4: 用样式强化三类角色区分与老师傅提示卡，但不引入每轮真实评分**
+
+```css
+.turn-row.customer {
+  background: linear-gradient(180deg, #fff8f1 0%, #ffffff 100%);
+}
+
+.turn-row.trainee {
+  background: linear-gradient(180deg, #f2fbf6 0%, #ffffff 100%);
+}
+
+.turn-row.coach {
+  background: linear-gradient(180deg, #eef5ff 0%, #ffffff 100%);
+}
+
+.reply-card .primary-button {
+  min-height: 52px;
+  border-radius: 18px;
+}
+
+.help-card,
+.mentor-rewrite {
+  border-radius: 22px;
+}
+```
+
+- [x] **Step 5: 保留并复用提交失败回滚测试，避免训练视觉改版时误伤已有状态修复**
+
+```js
+test('训练页提交失败会回滚本次乐观追加的对话', async () => {
+  const source = await pageSource('../src/pages/user/practice/index.vue');
+
+  assert.match(source, /const previousTurns = turns\.value\.slice\(\)/);
+  assert.match(source, /turns\.value = previousTurns/);
+});
+```
+
+- [x] **Step 6: 运行测试验证通过**
+
+Run: `node --test tests/mobile-user-pages.test.mjs`
+Expected: PASS。
+
+- [ ] **Step 7: 提交训练页改版**
+
+```bash
+git add mobile-uni/src/pages/user/practice/index.vue mobile-uni/src/styles/base.css mobile-uni/tests/mobile-user-pages.test.mjs
+git commit -m "feat: redesign employee practice page"
+```
+
+### Task 5: 全量验证与收尾
+
+**Files:**
+- Verify: `mobile-uni/src/pages/user/today/index.vue`
+- Verify: `mobile-uni/src/pages/user/sop/index.vue`
+- Verify: `mobile-uni/src/pages/user/practice/index.vue`
+- Verify: `mobile-uni/src/styles/base.css`
+- Verify: `mobile-uni/src/pages.json`
+- Test: `mobile-uni/tests/mobile-user-pages.test.mjs`
+
+- [x] **Step 1: 运行员工端页面回归测试**
+
+Run: `node --test tests/mobile-user-pages.test.mjs`
+Expected: PASS。
+
+- [x] **Step 2: 运行全量单测**
+
+Run: `npm run test:unit`
+Expected: 全部 PASS；允许保留既有 WebSocket 噪音，只要没有失败。
+
+- [x] **Step 3: 运行类型检查**
+
+Run: `npm run typecheck`
+Expected: PASS。
+
+- [x] **Step 4: 运行 H5 构建**
+
+Run: `npm run build:h5`
+Expected: `Build complete.`
+
+- [ ] **Step 5: 本地打开首页进行人工快速核对**
+
+Run: `open "http://localhost:5175/h5/#/pages/user/today/index"`
+Expected: 能看到新的首页首屏结构、语音条、今日安排、我的地图和统一 tabBar。
+
+- [ ] **Step 6: 提交最终整体验证结果**
+
+```bash
+git add mobile-uni/src/pages/user/today/index.vue mobile-uni/src/pages/user/sop/index.vue mobile-uni/src/pages/user/practice/index.vue mobile-uni/src/styles/base.css mobile-uni/src/pages.json mobile-uni/tests/mobile-user-pages.test.mjs
+git commit -m "feat: unify employee mobile page visuals"
+```
+
+## 计划自检
+
+### Spec 覆盖检查
+
+- 三页范围：Task 2、Task 3、Task 4 覆盖 `today / sop / practice`。
+- 共享样式与 tabBar：Task 1 覆盖。
+- 老师傅仅复用现有素材、不扩展业务：Task 2 与 Task 4 的模板调整限制在现有资源与逻辑内。
+- SOP 不伪造能力：Task 3 明确保留真实能力，不新增假 tab 行为。
+- 训练页不做每轮真实评分：Task 4 明确只改视觉分层，不新增该模块。
+- 验证要求：Task 5 覆盖页面测试、全量单测、类型检查、H5 构建。
+
+### Placeholder 扫描
+
+- 无 `TODO`、`TBD`、`适当处理` 等空泛描述。
+- 每个任务都包含具体文件、命令和代码片段。
+
+### 类型与命名一致性
+
+- 继续沿用现有页面类名：`scenario-card`、`dialogue-card`、`reply-card`、`summary-panel`、`voice-panel` 等。
+- 复用现有关键回归点：`tile.title`、`previousTurns`、`box-sizing`、`vueVersion`。
diff --git a/docs/superpowers/specs/2026-07-11-mobile-uni-employee-pages-visual-redesign.md b/docs/superpowers/specs/2026-07-11-mobile-uni-employee-pages-visual-redesign.md
new file mode 100644
index 00000000..67e69b85
--- /dev/null
+++ b/docs/superpowers/specs/2026-07-11-mobile-uni-employee-pages-visual-redesign.md
@@ -0,0 +1,241 @@
+# 员工端三页视觉改版设计
+
+## 背景
+
+当前 `mobile-uni` 员工端首页、问师傅页、训练页虽然已经有一轮样式调整，但整体仍然存在以下问题：
+
+- 三页视觉语言不统一，像是独立拼接出来的页面，而不是同一套员工端产品。
+- 信息层级和卡片节奏偏乱，重点入口不够聚焦，页面看起来“重、散、旧”。
+- 与 `docs/feedback/2026070423/design/` 中已经采纳的 P1 视觉基准仍有明显差距。
+- 当前诉求是优先解决“页面丑陋”的观感问题，而不是重写业务交互。
+
+本次改版以视觉还原为主，业务交互保持最小改动。
+
+## 目标
+
+### 主要目标
+
+- 统一员工端 `today / sop / practice` 三页视觉气质。
+- 尽量向已采纳设计稿靠拢，优先还原布局、卡片层级、按钮形态、留白和色彩关系。
+- 保持现有业务逻辑、接口调用、页面跳转、训练流程与登录流程不变。
+- 允许联动调整员工端 `tabBar` 和少量共享基础样式，使三页不再割裂。
+
+### 非目标
+
+- 不新增后端字段或伪造后端能力。
+- 不重写训练页状态机或 SOP 检索逻辑。
+- 不做候选人端、主管端的同步视觉改版。
+- 不在本次引入新的正式人物素材来源。
+
+## 设计依据与约束
+
+### 设计依据
+
+- 首页视觉基准：`docs/feedback/2026070423/design/h5-redesign-employee-home.png`
+- SOP 结果与总结卡基准：`docs/feedback/2026070423/design/h5-feedback-summary-modal.png`
+- 训练页对手戏基准：`docs/feedback/2026070423/design/h5-feedback-voice-roleplay.png`
+- 综合评审约束：`docs/feedback/2026070423/design/REVIEW.md`
+
+### 必须遵守的约束
+
+- 老师傅形象不照抄首页参考图中的女性写实形象，统一使用现有本地素材做“蓝工装插画风男性师傅”的近似表达。
+- 首页人物只承担氛围与陪伴感，不大面积占屏；视觉占比控制在首屏约五分之一以内。
+- 训练页不实现每轮真实评分，只保留轻提示或教练辅助信息。
+- SOP 页如果设计稿出现“全部/SOP/案例/话术”类型 tab，在后端维度未落地前不得伪造成功能型筛选。
+- 遵守 uni-app H5 输入兼容性规则，不对 `input` / `textarea` 设置 `box-sizing: border-box`。
+
+## 范围
+
+### 页面范围
+
+- `src/pages/user/today/index.vue`
+- `src/pages/user/sop/index.vue`
+- `src/pages/user/practice/index.vue`
+
+### 允许联动的共享部分
+
+- `src/styles/base.css`
+- `src/pages.json` 中员工端 `tabBar` 视觉配置
+- 员工端页面使用的现有本地静态素材引用方式
+
+### 明确不改的部分
+
+- 页面路由结构
+- 接口地址、参数与返回处理
+- 训练开始、提交、结束、SOP 查询、总结卡生成等业务行为
+- 登录与岗位确认流程
+
+## 总体方案
+
+采用“视觉优先还原型”方案：
+
+- 保留现有业务结构和页面职责，不移动关键交互入口的语义。
+- 对三页的首屏结构、标题区、功能卡、按钮区、辅助信息区进行重排和统一。
+- 在共享样式层建立一套仅服务员工端三页的轻量视觉 token，包括背景、卡片、主色、辅助色、圆角、阴影、标题字号与留白节奏。
+- 对 `tabBar` 做有限统一，让页面主视觉与底部导航形成同一套产品感知。
+
+这条方案的核心是：让用户明显感觉“这是一套被设计过的产品”，而不是“旧页面换了点颜色”。
+
+## 共享视觉系统
+
+### 色彩
+
+- 主蓝：用于首页主入口、主要行动按钮、SOP 核心操作。
+- 辅橙：用于复盘、提醒、异议、次强调动作。
+- 辅绿：用于师傅、建议、可执行正向反馈。
+- 辅红：用于风险、命中红线、强提醒。
+- 大面积背景：使用偏暖的浅灰白底，避免纯白页面带来的生硬感。
+
+### 形态
+
+- 卡片统一使用大圆角、轻阴影、弱边框。
+- 主操作按钮统一做成更饱满的胶囊或大圆角矩形。
+- 标签、chips、状态 badge 使用明显但不过分抢眼的弱底色。
+- 页面内图文块尽量减少硬线分割，多用留白和卡片分区建立节奏。
+
+### 文本层级
+
+- 页面标题使用大号高对比字重。
+- 模块标题明显强于正文，但弱于页面标题。
+- 辅助说明统一压低饱和度，避免整页“处处都是重点”。
+
+### TabBar
+
+- 保留“今日 / 练 / 问 / 我”结构不变。
+- 调整选中态、阴影、顶部边界和留白，让其更接近设计稿中的轻质底栏。
+- 不改动页面跳转与当前 tab 逻辑。
+
+## 分页面设计
+
+### 1. 员工端首页 `today`
+
+#### 目标
+
+首页要尽量贴近 `h5-redesign-employee-home.png`：先建立“老师傅陪练”的第一印象，再把语音入口、今日安排、我的地图作为三个连续层级展开。
+
+#### 结构
+
+- 顶部使用浅背景氛围图区。
+- 左侧为岗位与欢迎信息，右下为较小的老师傅形象与气泡。
+- 头图区下方是大白卡语音入口，主入口明显、次入口收敛。
+- 再下方是快捷 chips。
+- 然后依次是“今日安排”“我的地图”“今日小贴士”。
+
+#### 关键调整
+
+- 头图不再追求“人物大图压场”，而是营造轻陪伴感。
+- “问老师傅”作为首要入口，视觉上高于“打字问”。
+- “今日安排”卡更像日程卡，而不是普通列表。
+- “我的地图”保留四色功能块，但主标题显示真实业务名，单字仅作装饰符号。
+- 整页通过更清晰的上下节奏建立首屏完成度。
+
+### 2. 问师傅页 `sop`
+
+#### 目标
+
+页内重点从“普通查询页”升级为“搜索驱动的知识助手页”，并尽量贴近 `h5-feedback-summary-modal.png` 的结构氛围。
+
+#### 结构
+
+- 顶部收成更轻的标题与搜索区。
+- 搜索框作为首屏主元素。
+- 查询结果区按“直给答案 -> 要点 -> 提醒 -> 引用依据”分层。
+- 总结卡入口保持单独区域。
+- 总结卡展示形态从普通 modal 调整为更贴近设计稿的底部浮层信息图风格。
+
+#### 关键调整
+
+- 减少当前大块头图区的存在感，把注意力转回搜索行为。
+- 查询按钮、快捷问题、答案卡的主次关系更明确。
+- 总结卡内部采用更强的信息图分组感，但不新增保存、听一遍、跟读等未实现业务按钮。
+- 若现阶段无法正确承载分类 tab，则不强行做功能性顶部分类。
+
+### 3. 训练页 `practice`
+
+#### 目标
+
+把页面从“功能堆叠页”调整为更像训练对话面板的页面，同时遵守“不做每轮真实评分”的约束。
+
+#### 结构
+
+- 顶部为训练标题、场景标签和老师傅陪伴状态。
+- 场景预习卡保留，但视觉上并入训练前准备区域。
+- 对话区强化三类角色的视觉差异：业主、我、老师傅。
+- 回复区的录音、转写、求助、提交按钮重新排版，但功能不变。
+- 教练提示与 SOP 提示更像辅助卡，而不是和主流程抢层级。
+- 结果卡在完成后仍独立呈现。
+
+#### 关键调整
+
+- 参考 `h5-feedback-voice-roleplay.png` 的对话氛围与角色卡感，但不照搬其每轮评分模块。
+- 让“老师傅提醒”成为视觉上可信赖的辅助块。
+- 保持现有训练逻辑顺序，不改开始、提交、结束时机。
+
+## 组件与样式边界
+
+本次优先在现有页面文件内完成视觉重排，不额外拆出大量新组件，理由如下：
+
+- 用户当前诉求是快速改善三页视觉，而不是先做前端组件体系建设。
+- 三页虽然要统一语言，但内容结构差异仍较大，过早抽象容易制造样式耦合。
+- 共享部分只抽到 `base.css` 的 token 和少量通用类，避免引入新的复杂度。
+
+允许的抽象上限：
+
+- 共享 token
+- 通用卡片/标题/按钮类
+- 少量重复且完全稳定的视觉辅助类
+
+不建议在本次新增多层组件封装。
+
+## 验收标准
+
+### 视觉验收
+
+- 三页首屏都明显接近参考设计稿的节奏与气质。
+- 员工端首页、SOP 页、训练页能够被一眼识别为同一套产品。
+- 老师傅、语音入口、核心行动按钮、模块标题的层级明显优于当前版本。
+- `tabBar` 与页面主视觉不再割裂。
+
+### 行为验收
+
+- 现有路由、接口、登录、训练、SOP 查询行为不回归。
+- 不引入假交互、不新增无后端支持的视觉功能。
+- 输入框与文本域在 H5 仍可正常聚焦、输入。
+
+### 技术验收
+
+- 至少完成类型检查、单测和 H5 构建验证。
+- 如新增与视觉约束有关的轻量回归测试，应优先覆盖容易再次被误改的关键点。
+
+## 风险与处理
+
+### 风险 1：现有本地素材不足以完全贴近设计稿
+
+处理：优先还原布局、比例、色彩和氛围；人物素材先做近似表达，不因素材不足阻塞页面改版。
+
+### 风险 2：为了追视觉而误伤业务逻辑
+
+处理：限定本次为视觉优先、交互最小改动，不重写流程函数和接口组织。
+
+### 风险 3：共享样式改动波及其它页面
+
+处理：共享样式只服务员工端相关页面，避免做全局侵入式 reset。
+
+### 风险 4：SOP 设计稿含未落地能力
+
+处理：只保留当前真实能力，视觉上做近似，不伪造功能。
+
+## 实施顺序建议
+
+1. 先整理员工端共享 token 和 tabBar 视觉基座。
+2. 完成员工端首页改版，建立整套视觉语言。
+3. 以首页风格为基准改 SOP 页。
+4. 最后改训练页，避免其复杂交互拖慢整体节奏。
+5. 跑类型检查、单测和 H5 构建验证。
+
+## 规格自检结论
+
+- 无占位符、TODO 或未定义术语。
+- 方案范围清晰，聚焦三页与少量共享视觉层。
+- 与用户已确认方向一致：优先还原视觉，业务交互最小改动。
+- 与项目评审约束一致：人物统一、首页人物缩量、训练页不做每轮真评分、SOP 不伪造分类能力。
diff --git a/mobile-uni/src/manifest.json b/mobile-uni/src/manifest.json
index 0759c5fe..ffb02892 100644
--- a/mobile-uni/src/manifest.json
+++ b/mobile-uni/src/manifest.json
@@ -2,6 +2,7 @@
   "name": "银城员工端",
   "appid": "__UNI__AIHR",
   "description": "物业AI人力资源系统用户侧",
+  "vueVersion": "3",
   "versionName": "0.1.0",
   "versionCode": "100",
   "uniStatistics": {
diff --git a/mobile-uni/src/pages.json b/mobile-uni/src/pages.json
index 9ef54f3d..7e62ca67 100644
--- a/mobile-uni/src/pages.json
+++ b/mobile-uni/src/pages.json
@@ -1,4 +1,10 @@
 {
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
+    }
+  },
   "pages": [
     {
       "path": "pages/user/today/index",
@@ -120,30 +126,42 @@
     "navigationStyle": "custom",
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "银城员工端",
-    "navigationBarBackgroundColor": "#f8fafc",
-    "backgroundColor": "#f5f7fb"
+    "navigationBarBackgroundColor": "#f3f5f7",
+    "backgroundColor": "#f3f5f7"
   },
   "tabBar": {
-    "color": "#64748b",
-    "selectedColor": "#0f172a",
+    "color": "#7b8494",
+    "selectedColor": "#2f6bff",
     "backgroundColor": "#ffffff",
     "borderStyle": "white",
+    "height": "66px",
+    "fontSize": "12px",
+    "iconWidth": "25px",
+    "spacing": "3px",
     "list": [
       {
         "pagePath": "pages/user/today/index",
-        "text": "今日"
+        "text": "今日",
+        "iconPath": "static/tabbar/today-normal.png",
+        "selectedIconPath": "static/tabbar/today-active.png"
       },
       {
         "pagePath": "pages/user/practice/index",
-        "text": "练"
+        "text": "练",
+        "iconPath": "static/tabbar/practice-normal.png",
+        "selectedIconPath": "static/tabbar/practice-active.png"
       },
       {
         "pagePath": "pages/user/sop/index",
-        "text": "问"
+        "text": "问",
+        "iconPath": "static/tabbar/ask-normal.png",
+        "selectedIconPath": "static/tabbar/ask-active.png"
       },
       {
         "pagePath": "pages/user/profile/index",
-        "text": "我"
+        "text": "我",
+        "iconPath": "static/tabbar/profile-normal.png",
+        "selectedIconPath": "static/tabbar/profile-active.png"
       }
     ]
   }
diff --git a/mobile-uni/src/pages/user/practice/index.vue b/mobile-uni/src/pages/user/practice/index.vue
index 01ca7f9d..5c939cf9 100644
--- a/mobile-uni/src/pages/user/practice/index.vue
+++ b/mobile-uni/src/pages/user/practice/index.vue
@@ -1,13 +1,15 @@
 <template>
-  <view class="page practice-page">
+  <view class="page practice-page employee-page-shell">
     <view class="practice-head">
-      <text class="page-title">场景练</text>
-      <text class="page-subtitle">按当前场景完成三角色对练，结束后自动评分并写入训练记录。</text>
+      <text class="employee-kicker practice-eyebrow">数字师傅 · 场景训练</text>
+      <text class="page-title">场景模拟</text>
+      <text class="page-subtitle">与业主、老师傅完成一轮真实工作对话，结束后自动写入训练记录。</text>
+      <text class="practice-tip">先看预习卡，再开始练习；红线命中时按老师傅建议重说本轮。</text>
     </view>
 
     <view v-if="message" class="status-message">{{ message }}</view>
 
-    <view v-if="!loggedIn" class="panel login-panel">
+    <view v-if="!loggedIn" class="panel login-panel employee-card">
       <view>
         <text class="panel-title">需要登录</text>
         <text class="muted block">登录后查看今日任务、开始练习并保存训练记录。</text>
@@ -15,41 +17,12 @@
       <button class="primary-button login-button" @click="goLogin">去登录</button>
     </view>
 
-    <view v-if="loggedIn" class="panel assignment-panel">
-      <view class="assignment-head">
-        <text class="panel-title">今日任务</text>
-        <button class="ghost-button refresh-button" :disabled="assignmentLoading" @click="loadAssignments">刷新</button>
+    <view v-if="loggedIn" class="panel scenario-card employee-card">
+      <view class="scenario-headline">
+        <text class="scenario-badge">今日小训</text>
+        <text class="scenario-title">{{ activeScenarioName }}</text>
+        <text class="scenario-desc">{{ scenarioDescription }}</text>
       </view>
-      <view v-if="assignments.length" class="assignment-list">
-        <view v-for="item in assignments" :key="item.id" class="assignment-row" :class="{ highlighted: highlightedAssignmentId === item.id }">
-          <view class="assignment-copy">
-            <text class="assignment-badge">{{ item.source === 'daily' ? '每日三题' : '主管专项' }}</text>
-            <text class="assignment-title">{{ item.question || item.scenarioName }}</text>
-            <text v-if="assignmentDesc(item)" class="assignment-desc">{{ assignmentDesc(item) }}</text>
-            <text v-if="item.status === '已完成' && item.referenceAnswer" class="assignment-reference">参考：{{ item.referenceAnswer }}</text>
-          </view>
-          <view v-if="item.source === 'daily'" class="daily-answer">
-            <textarea
-              v-model="drillAnswers[item.id]"
-              class="textarea daily-textarea"
-              maxlength="220"
-              :disabled="item.status === '已完成'"
-              placeholder="写一句你的处理话术"
-            />
-            <button class="primary-button small-button" :disabled="Boolean(answeringId) || item.status === '已完成'" @click="submitDaily(item)">
-              {{ item.status === '已完成' ? '已完成' : '提交' }}
-            </button>
-          </view>
-          <button v-else class="secondary-button small-button" :disabled="!canStartPractice" @click="startAssignment(item)">开始专项</button>
-        </view>
-      </view>
-      <view v-else class="empty">暂无今日任务</view>
-    </view>
-
-    <view v-if="loggedIn" class="panel scenario-card">
-      <text class="scenario-badge">今日小训</text>
-      <text class="scenario-title">{{ activeScenarioName }}</text>
-      <text class="scenario-desc">{{ scenarioDescription }}</text>
       <view v-if="prepCard" class="prep-card">
         <view class="prep-head">
           <text>训练前预习卡</text>
@@ -78,9 +51,43 @@
       </button>
     </view>
 
-    <view v-if="turns.length" class="panel dialogue-card">
+    <view v-if="loggedIn" class="panel assignment-panel">
+      <view class="assignment-head">
+        <text class="panel-title">今日任务</text>
+        <button class="ghost-button refresh-button" :disabled="assignmentLoading" @click="loadAssignments">刷新</button>
+      </view>
+      <view v-if="assignments.length" class="assignment-list">
+        <view v-for="item in assignments" :key="item.id" class="assignment-row" :class="{ highlighted: highlightedAssignmentId === item.id }">
+          <view class="assignment-copy">
+            <text class="assignment-badge" :class="{ daily: item.source === 'daily' }">{{ item.source === 'daily' ? '每日三题' : '主管专项' }}</text>
+            <text class="assignment-title">{{ item.question || item.scenarioName }}</text>
+            <text v-if="assignmentDesc(item)" class="assignment-desc">{{ assignmentDesc(item) }}</text>
+            <text v-if="item.status === '已完成' && item.referenceAnswer" class="assignment-reference">参考：{{ item.referenceAnswer }}</text>
+          </view>
+          <view v-if="item.source === 'daily'" class="daily-answer">
+            <textarea
+              v-model="drillAnswers[item.id]"
+              class="textarea daily-textarea"
+              maxlength="220"
+              :disabled="item.status === '已完成'"
+              placeholder="写一句你的处理话术"
+            />
+            <button class="primary-button small-button" :disabled="Boolean(answeringId) || item.status === '已完成'" @click="submitDaily(item)">
+              {{ item.status === '已完成' ? '已完成' : '提交' }}
+            </button>
+          </view>
+          <button v-else class="secondary-button small-button" :disabled="!canStartPractice" @click="startAssignment(item)">开始专项</button>
+        </view>
+      </view>
+      <view v-else class="empty">暂无今日任务</view>
+    </view>
+
+    <view v-if="turns.length" class="panel dialogue-card employee-card">
       <view class="dialogue-head">
-        <text class="panel-title">对话</text>
+        <view class="dialogue-heading-block">
+          <text class="panel-title">对话</text>
+          <text class="dialogue-caption">保持承接情绪、说明动作、给出反馈节点。</text>
+        </view>
         <text class="round-label">第 {{ Math.min(roundIndex + 1, 3) }} 轮</text>
       </view>
       <view v-if="hasCoachState" class="coach-state">
@@ -117,16 +124,16 @@
       </view>
     </view>
 
-    <view v-if="status === 'active' || status === 'submitting'" class="panel reply-card">
+    <view v-if="status === 'active' || status === 'submitting'" class="panel reply-card employee-card">
       <text class="panel-title">你的回应</text>
       <textarea
         v-model="draft"
-        class="textarea"
+        class="textarea practice-textarea"
         maxlength="500"
         placeholder="先承接业主情绪，再说明处理动作和反馈时间。"
       />
       <view class="reply-actions">
-        <button class="secondary-button" :disabled="busy || transcribing" @click="toggleRecording">
+        <button class="secondary-button" :class="{ 'recording-active': recording }" :disabled="busy || transcribing" @click="toggleRecording">
           {{ recording ? '停止录音' : '录音转写' }}
         </button>
         <button class="ghost-button" :disabled="busy || recording || transcribing" @click="pickAudio">
@@ -143,7 +150,7 @@
       <text v-if="draftAudioUrl" class="voice-state">已附带语音回放</text>
     </view>
 
-    <view v-if="helpAnswer || helpRefs.length" class="panel help-card">
+    <view v-if="helpAnswer || helpRefs.length" class="panel help-card employee-card">
       <text class="panel-title">SOP 提示</text>
       <text v-if="helpAnswer" class="help-answer">{{ helpAnswer }}</text>
       <view v-if="helpRefs.length" class="help-refs">
@@ -151,7 +158,7 @@
       </view>
     </view>
 
-    <view v-if="result" class="panel result-card">
+    <view v-if="result" class="panel result-card employee-card">
       <text class="result-label">本次评分</text>
       <text class="result-score">{{ result.totalScore }}</text>
       <text class="result-comment">{{ result.aiComment }}</text>
@@ -625,6 +632,7 @@ const submit = async () => {
   message.value = '';
   const audioUrl = draftAudioUrl.value || undefined;
   const audioOssId = draftAudioOssId.value;
+  const previousTurns = turns.value.slice();
   draft.value = '';
   clearDraftAudio();
   const retryingRedFlag = redFlagActive.value && lastCoachRoundIndex.value === roundIndex.value;
@@ -659,6 +667,7 @@ const submit = async () => {
     status.value = 'active';
   } catch (error) {
     status.value = 'active';
+    turns.value = previousTurns;
     draft.value = text;
     draftAudioUrl.value = audioUrl || '';
     draftAudioOssId.value = audioOssId;
@@ -704,21 +713,114 @@ onShow(() => {
 
 <style scoped>
 .practice-page {
-  padding-bottom: 92px;
-  background: #f4f7fb;
+  padding: 0 18px 96px;
+  background: linear-gradient(180deg, var(--employee-bg-soft) 0%, var(--employee-bg) 100%);
 }
 
 .practice-head {
-  padding-top: 8px;
+  position: relative;
+  margin: 0 -18px;
+  padding: 30px 28px 24px;
+  overflow: hidden;
+  background: linear-gradient(180deg, #eef4ff 0%, #f5f8fd 100%);
+}
+
+.practice-head::after {
+  position: absolute;
+  right: 28px;
+  bottom: 24px;
+  width: 56px;
+  height: 3px;
+  background: #e70014;
+  content: '';
+}
+
+.practice-eyebrow {
+  display: inline-flex;
+  margin-bottom: 12px;
+}
+
+.practice-head .page-title {
+  color: #1f2b3d;
+  font-size: 31px;
+  line-height: 1.12;
+}
+
+.practice-head .page-subtitle {
+  max-width: 274px;
+  margin-top: 10px;
+  color: #607086;
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+.practice-tip {
+  display: block;
+  max-width: 298px;
+  margin-top: 14px;
+  color: #315b8f;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.login-panel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  margin-top: 22px;
+  border-left: 4px solid #e70014;
+  box-shadow: var(--employee-card-shadow);
+}
+
+.login-panel .muted {
+  display: block;
+  max-width: 218px;
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.login-panel .login-button {
+  min-width: 84px;
+  min-height: 46px;
+  padding: 0 12px;
 }
 
 .scenario-card,
+.dialogue-card,
 .reply-card,
 .help-card,
 .result-card {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 14px;
+}
+
+.scenario-card {
+  margin-top: 22px;
+  padding: 20px;
+  border-color: #d7e5dc;
+  border-left: 4px solid #168243;
+  background: #ffffff;
+  box-shadow: var(--employee-card-shadow);
+}
+
+.scenario-headline {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.scenario-card .primary-button {
+  width: 100%;
+  margin-top: 2px;
+  background: #168243;
+  box-shadow: 0 7px 14px rgba(22, 130, 67, 0.2);
+}
+
+.scenario-card .primary-button:active {
+  background: #106b35;
 }
 
 .assignment-head,
@@ -734,39 +836,71 @@ onShow(() => {
   min-width: 82px;
 }
 
+.assignment-panel {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.assignment-head {
+  margin-top: 26px;
+}
+
+.assignment-head .panel-title {
+  color: #25282d;
+  font-size: 20px;
+}
+
+.assignment-head .refresh-button {
+  min-height: 36px;
+  padding: 0 12px;
+  border: 1px solid #dedee1;
+  border-radius: 18px;
+  background: #ffffff;
+  color: #66696f;
+  font-size: 13px;
+}
+
 .assignment-list {
-  margin-top: 12px;
+  margin-top: 14px;
 }
 
 .assignment-row {
-  margin-top: 10px;
-  padding: 12px;
-  border: 1px solid transparent;
-  border-radius: 14px;
-  background: #f8fafc;
+  margin-top: 12px;
+  padding: 16px;
+  border: 1px solid #deebff;
+  border-radius: 20px;
+  background: #ffffff;
+  box-shadow: 0 10px 26px rgba(47, 107, 255, 0.08);
 }
 
 .assignment-row.highlighted {
-  border-color: #2563eb;
-  background: #eff6ff;
+  border-color: #e70014;
+  background: #fff7f7;
 }
 
 .assignment-badge {
   display: inline-flex;
   width: fit-content;
   padding: 4px 8px;
-  border-radius: 999px;
-  background: #e0f2fe;
-  color: #0369a1;
+  border-radius: 5px;
+  background: #fff0f1;
+  color: #bd0010;
   font-size: 12px;
   font-weight: 800;
 }
 
+.assignment-badge.daily {
+  background: #fff5df;
+  color: #a86100;
+}
+
 .assignment-title {
   display: block;
   margin-top: 8px;
-  color: #0f172a;
-  font-size: 15px;
+  color: #25282d;
+  font-size: 16px;
   font-weight: 900;
   line-height: 1.45;
 }
@@ -775,7 +909,7 @@ onShow(() => {
 .assignment-reference {
   display: block;
   margin-top: 6px;
-  color: #64748b;
+  color: #6d7076;
   font-size: 13px;
   line-height: 1.45;
 }
@@ -792,21 +926,21 @@ onShow(() => {
 .scenario-badge {
   width: fit-content;
   padding: 5px 10px;
-  border-radius: 999px;
-  background: #dbeafe;
-  color: #1d4ed8;
+  border-radius: 5px;
+  background: #edf7f0;
+  color: #168243;
   font-size: 13px;
   font-weight: 900;
 }
 
 .scenario-title {
-  color: #0f172a;
-  font-size: 24px;
+  color: #25282d;
+  font-size: 25px;
   font-weight: 900;
 }
 
 .scenario-desc {
-  color: #64748b;
+  color: #696c72;
   font-size: 15px;
   line-height: 1.55;
 }
@@ -814,10 +948,10 @@ onShow(() => {
 .prep-card {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  padding: 12px;
-  border-radius: 14px;
-  background: #f8fafc;
+  gap: 12px;
+  padding: 14px 0 0;
+  border-top: 1px solid #dfe8e2;
+  background: transparent;
 }
 
 .prep-head {
@@ -829,13 +963,13 @@ onShow(() => {
 
 .prep-head text:first-child,
 .prep-label {
-  color: #0f172a;
+  color: #34373c;
   font-size: 13px;
   font-weight: 900;
 }
 
 .prep-head text:last-child {
-  color: #94a3b8;
+  color: #898c92;
   font-size: 12px;
 }
 
@@ -846,7 +980,7 @@ onShow(() => {
 }
 
 .prep-line {
-  color: #475569;
+  color: #5e6167;
   font-size: 13px;
   line-height: 1.45;
 }
@@ -858,26 +992,53 @@ onShow(() => {
   gap: 10px;
 }
 
+.dialogue-head {
+  justify-content: space-between;
+}
+
+.dialogue-heading-block {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.dialogue-caption {
+  color: #6d7a8d;
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.dialogue-card {
+  border-color: #e1e2e5;
+  box-shadow: var(--employee-card-shadow);
+}
+
 .reply-actions {
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
 .reply-actions button {
-  min-height: 48px;
-  min-width: 92px;
-  flex: 1;
+  min-width: 0;
+  padding: 0 8px;
   white-space: nowrap;
   word-break: keep-all;
 }
 
+.reply-actions .primary-button {
+  grid-column: span 2;
+}
+
 .voice-state {
-  color: #2563eb;
+  color: #168243;
   font-size: 13px;
   font-weight: 800;
 }
 
 .round-label {
-  color: #64748b;
+  color: #6d7076;
   font-size: 13px;
 }
 
@@ -893,7 +1054,7 @@ onShow(() => {
   align-items: center;
   grid-template-columns: 72px 1fr;
   gap: 10px;
-  color: #475569;
+  color: #5f6268;
   font-size: 13px;
   font-weight: 800;
 }
@@ -901,28 +1062,30 @@ onShow(() => {
 .state-bar {
   height: 8px;
   overflow: hidden;
-  border-radius: 999px;
-  background: #e2e8f0;
+  border-radius: 4px;
+  background: #e3e4e6;
 }
 
 .state-fill {
   height: 100%;
   border-radius: 999px;
+  transition: width 0.3s ease-in-out;
 }
 
 .emotion-fill {
-  background: #f97316;
+  background: #d98200;
 }
 
 .trust-fill {
-  background: #16a34a;
+  background: #168243;
 }
 
 .red-flag {
   padding: 9px 10px;
-  border-radius: 12px;
-  background: #fef2f2;
-  color: #b91c1c;
+  border-left: 3px solid #e70014;
+  border-radius: 4px;
+  background: #fff2f3;
+  color: #bd0010;
   font-size: 13px;
   font-weight: 800;
   line-height: 1.45;
@@ -939,27 +1102,42 @@ onShow(() => {
   display: flex;
   flex-direction: column;
   gap: 6px;
-  padding: 12px;
-  border-radius: 14px;
-  background: #f8fafc;
+  padding: 14px;
+  border: 1px solid #e5edf7;
+  border-left: 3px solid #9ca0a6;
+  border-radius: 18px;
+  background: #f8fbff;
+}
+
+.turn-row.customer {
+  border-left-color: #315b8f;
+  background: #f0f4f8;
 }
 
 .turn-row.trainee {
-  background: #eff6ff;
+  border-left-color: #e70014;
+  background: #fff6f6;
 }
 
 .turn-row.coach {
-  background: #fff7ed;
+  border-left-color: #168243;
+  background: #edf7f0;
+}
+
+.reply-actions button.recording-active {
+  border-color: #e70014;
+  background: #fff5f5;
+  color: #e70014;
 }
 
 .turn-role {
-  color: #334155;
+  color: #42454b;
   font-size: 13px;
   font-weight: 900;
 }
 
 .turn-text {
-  color: #172033;
+  color: #282b30;
   font-size: 15px;
   line-height: 1.55;
 }
@@ -973,14 +1151,25 @@ onShow(() => {
 
 .style-chip {
   width: auto;
+  border-color: #c9d9ce;
+  background: #ffffff;
+  color: #168243;
 }
 
-.reply-actions button {
-  flex: 1;
+.reply-card {
+  border-top: 0;
+  box-shadow: var(--employee-card-shadow);
+}
+
+.practice-textarea {
+  min-height: 124px;
+  border-color: #d6deea;
+  border-radius: 18px;
+  background: #f9fbff;
 }
 
 .help-answer {
-  color: #334155;
+  color: #45484e;
   font-size: 15px;
   line-height: 1.6;
 }
@@ -993,21 +1182,21 @@ onShow(() => {
 
 .help-ref {
   padding: 5px 8px;
-  border-radius: 999px;
-  background: #e0f2fe;
-  color: #0369a1;
+  border-radius: 5px;
+  background: #edf7f0;
+  color: #168243;
   font-size: 12px;
   font-weight: 800;
 }
 
 .result-label {
-  color: #64748b;
+  color: #6d7076;
   font-size: 14px;
   font-weight: 800;
 }
 
 .result-score {
-  color: #1d4ed8;
+  color: #2f6bff;
   font-size: 44px;
   font-weight: 900;
   line-height: 1;
@@ -1015,7 +1204,7 @@ onShow(() => {
 
 .result-comment,
 .mentor-rewrite text:last-child {
-  color: #334155;
+  color: #45484e;
   font-size: 15px;
   line-height: 1.55;
 }
@@ -1025,12 +1214,13 @@ onShow(() => {
   flex-direction: column;
   gap: 6px;
   padding: 12px;
-  border-radius: 12px;
-  background: #f8fafc;
+  border-left: 3px solid #d98200;
+  border-radius: 6px;
+  background: #fff9ed;
 }
 
 .mentor-rewrite text:first-child {
-  color: #0f172a;
+  color: #855000;
   font-weight: 900;
 }
 </style>
diff --git a/mobile-uni/src/pages/user/sop/index.vue b/mobile-uni/src/pages/user/sop/index.vue
index fbd8984b..f6f04bc7 100644
--- a/mobile-uni/src/pages/user/sop/index.vue
+++ b/mobile-uni/src/pages/user/sop/index.vue
@@ -1,27 +1,32 @@
 <template>
-  <view class="page sop-page">
-    <text class="page-title">问师傅</text>
-    <text class="page-subtitle">直接问工作中的 SOP、话术和流程。答案来自知识库检索,引用在后面。</text>
+  <view class="page sop-page employee-page-shell">
+    <view class="sop-head">
+      <text class="employee-kicker sop-eyebrow">SOP · 话术 · 工作流程</text>
+      <text class="page-title">问师傅</text>
+      <text class="page-subtitle">直接问工作中的 SOP、话术和流程。答案附带可追溯的知识库依据。</text>
+      <text class="toolbar-tip">先把问题问清楚，再按需生成总结卡，不伪造分类能力。</text>
+    </view>
 
-    <view class="panel query-panel">
+    <view class="panel query-panel employee-card">
       <textarea
         v-model="query"
-        class="textarea"
+        class="textarea sop-query-textarea"
         maxlength="200"
         :placeholder="quickQuestionPlaceholder"
       />
+      <text class="query-caption">常见问题可以直接点下面快捷问法，结果会保留引用依据。</text>
       <view class="chip-row">
         <button v-for="item in quickQuestions" :key="item" class="chip" :disabled="loading" @click="useQuickQuestion(item)">
           {{ item }}
         </button>
       </view>
-      <button class="primary-button" :disabled="loading" @click="search">
-        {{ loading ? '检索中' : '查询' }}
+      <button class="primary-button query-submit" :disabled="loading" @click="search">
+        {{ loading ? '检索中' : '问老师傅' }}
       </button>
       <text v-if="message" class="status-message">{{ message }}</text>
     </view>
 
-    <view v-if="!loggedIn" class="panel login-panel">
+    <view v-if="!loggedIn" class="panel login-panel employee-card">
       <view>
         <text class="panel-title">需要登录</text>
         <text class="muted block">登录后才能查询 SOP、生成总结卡并反馈答案。</text>
@@ -29,7 +34,7 @@
       <button class="primary-button login-button" @click="goLogin">去登录</button>
     </view>
 
-    <view v-if="result" class="panel answer-panel">
+    <view v-if="result" class="panel answer-panel employee-card">
       <text class="panel-title">直给答案</text>
       <text class="answer-text">{{ result.answer || '未生成直接答案,请查看下方引用。' }}</text>
 
@@ -54,16 +59,16 @@
         </button>
         <button
           class="secondary-button"
-          :class="{ active: feedbackVerdict === 'down' }"
+          :class="{ active: feedbackVerdict === 'down', negative: feedbackVerdict === 'down' }"
           :disabled="feedbackSubmitting || Boolean(feedbackVerdict)"
           @click="feedback('down')"
         >
-          不准
+          需要复核
         </button>
       </view>
     </view>
 
-    <view v-if="result?.snippets?.length" class="panel">
+    <view v-if="result?.snippets?.length" class="panel sources-panel">
       <text class="panel-title">引用依据</text>
       <view v-for="(snippet, index) in result.snippets" :key="`${snippet.docTitle}-${index}`" class="snippet">
         <text class="snippet-title">{{ snippet.docTitle }}</text>
@@ -72,35 +77,81 @@
       </view>
     </view>
 
-    <view v-if="result" class="panel summary-panel">
+    <view v-if="result" class="panel summary-panel employee-card">
       <text class="panel-title">总结卡</text>
-      <text class="muted">需要时再生成,避免每次查询都调用模型。</text>
+      <text class="muted summary-copy">需要时再生成，适合把一段 SOP 整理成步骤卡、话术卡和提醒卡。</text>
       <button class="ghost-button" :disabled="summaryLoading" @click="buildSummaryCard">
         {{ summaryLoading ? '生成中' : '生成总结卡' }}
       </button>
     </view>
 
-    <view v-if="summaryCard" class="panel">
-      <text class="panel-title">{{ summaryCard.title }}</text>
-      <view class="summary-block">
-        <text class="summary-heading">步骤</text>
-        <text v-for="(step, index) in summaryCard.steps" :key="`${step.label}-${index}`" class="summary-line">
-          {{ index + 1 }}. {{ step.label }}: {{ step.desc }}
-        </text>
-      </view>
-      <view v-if="summaryCard.scripts.length" class="summary-block">
-        <text class="summary-heading">可说话术</text>
-        <text v-for="item in summaryCard.scripts" :key="item" class="summary-line">{{ item }}</text>
-      </view>
-      <view v-if="summaryCard.objections.length" class="summary-block">
-        <text class="summary-heading">异议回应</text>
-        <text v-for="item in summaryCard.objections" :key="item.concern" class="summary-line">
-          {{ item.concern }}: {{ item.response }}
-        </text>
-      </view>
-      <view v-if="summaryCard.reminders.length" class="summary-block">
-        <text class="summary-heading">提醒</text>
-        <text v-for="item in summaryCard.reminders" :key="item" class="summary-line">{{ item }}</text>
+    <view v-if="summaryCard" class="modal-mask" @click="closeSummary">
+      <view class="modal-card" @click.stop>
+        <view class="modal-header">
+          <text class="modal-title">{{ summaryCard.title }}</text>
+          <button class="modal-close" @click="closeSummary">×</button>
+        </view>
+        <scroll-view scroll-y class="modal-body">
+          <view v-if="summaryCard.steps?.length" class="info-section">
+            <view class="section-title-row">
+              <text class="badge-num">1</text>
+              <text class="info-section-title">核心步骤</text>
+            </view>
+            <view class="timeline">
+              <view v-for="(step, index) in summaryCard.steps" :key="index" class="timeline-item">
+                <view class="timeline-node">{{ index + 1 }}</view>
+                <view class="timeline-content">
+                  <text class="timeline-label">{{ step.label }}</text>
+                  <text class="timeline-desc">{{ step.desc }}</text>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view v-if="summaryCard.scripts?.length" class="info-section speech-section">
+            <view class="section-title-row">
+              <text class="badge-num">2</text>
+              <text class="info-section-title">推荐话术</text>
+            </view>
+            <view class="speech-bubbles">
+              <view v-for="(script, index) in summaryCard.scripts" :key="index" class="speech-bubble">
+                <text class="quote-mark">“</text>
+                <text class="speech-text">{{ script }}</text>
+              </view>
+            </view>
+          </view>
+          <view v-if="summaryCard.objections?.length" class="info-section objection-section">
+            <view class="section-title-row">
+              <text class="badge-num">3</text>
+              <text class="info-section-title">常见异议与回应</text>
+            </view>
+            <view class="objection-list">
+              <view v-for="(obj, index) in summaryCard.objections" :key="index" class="objection-card">
+                <view class="objection-q">
+                  <text class="q-badge">问</text>
+                  <text class="q-text">{{ obj.concern }}</text>
+                </view>
+                <view class="objection-a">
+                  <text class="a-badge">答</text>
+                  <text class="a-text">{{ obj.response }}</text>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view v-if="summaryCard.reminders?.length" class="info-section reminder-section">
+            <view class="section-title-row">
+              <text class="badge-num">4</text>
+              <text class="info-section-title">师傅提醒</text>
+            </view>
+            <view class="reminder-list">
+              <view v-for="(rem, index) in summaryCard.reminders" :key="index" class="reminder-item">
+                <text class="reminder-text">{{ rem }}</text>
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+        <view class="modal-footer">
+          <button class="primary-button footer-btn" @click="closeSummary">我知道了</button>
+        </view>
       </view>
     </view>
   </view>
@@ -259,6 +310,10 @@ const buildSummaryCard = async () => {
   }
 };
 
+const closeSummary = () => {
+  summaryCard.value = null;
+};
+
 const goLogin = () => {
   rememberLoginRedirect('/pages/user/sop/index');
   uni.navigateTo({ url: '/pages/auth/login/index' });
@@ -297,7 +352,53 @@ onShow(() => {
 
 <style scoped>
 .sop-page {
-  padding-bottom: 48px;
+  padding: 0 18px 96px;
+  background: linear-gradient(180deg, var(--employee-bg-soft) 0%, var(--employee-bg) 100%);
+}
+
+.sop-head {
+  position: relative;
+  margin: 0 -18px;
+  padding: 30px 28px 24px;
+  background: linear-gradient(180deg, #eef4ff 0%, #f5f8fd 100%);
+}
+
+.sop-head::after {
+  position: absolute;
+  right: 28px;
+  bottom: 24px;
+  width: 56px;
+  height: 3px;
+  background: #e70014;
+  content: '';
+}
+
+.sop-eyebrow {
+  display: inline-flex;
+  margin-bottom: 12px;
+}
+
+.sop-head .page-title {
+  color: #1f2b3d;
+  font-size: 31px;
+  line-height: 1.12;
+}
+
+.sop-head .page-subtitle {
+  max-width: 292px;
+  margin-top: 10px;
+  color: #607086;
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+.toolbar-tip {
+  display: block;
+  max-width: 286px;
+  margin-top: 14px;
+  color: #315b8f;
+  font-size: 12px;
+  line-height: 1.5;
 }
 
 .query-panel,
@@ -308,30 +409,103 @@ onShow(() => {
   gap: 14px;
 }
 
+.query-panel {
+  margin-top: 22px;
+  padding: 20px;
+  border-top: 0;
+  box-shadow: var(--employee-card-shadow);
+}
+
+.sop-query-textarea {
+  min-height: 112px;
+  border-color: #d6deea;
+  background: #f9fbff;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+}
+
+.query-caption {
+  color: #6f7b8f;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.query-panel .textarea {
+  min-height: 104px;
+  height: 104px;
+  border-color: #d9dade;
+  border-radius: 7px;
+  background: #fbfbfb;
+  color: #25282d;
+}
+
+.query-panel .chip-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 7px;
+}
+
+.query-panel .chip {
+  min-height: 38px;
+  padding: 0 10px;
+  border-color: #dbe5f4;
+  border-radius: 999px;
+  background: #f7faff;
+  color: #47607f;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.query-submit {
+  width: 100%;
+  margin-top: 2px;
+  min-height: 50px;
+  border-radius: 18px;
+  background: linear-gradient(135deg, #2f6bff, #5a8cff);
+  box-shadow: 0 14px 28px rgba(47, 107, 255, 0.22);
+}
+
 .login-panel {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: 14px;
+  margin-top: 22px;
+  border-left: 4px solid #e70014;
+  box-shadow: var(--employee-card-shadow);
 }
 
 .block {
   display: block;
   margin-top: 8px;
-  font-size: 14px;
+  font-size: 13px;
+  line-height: 1.5;
 }
 
 .login-button {
-  min-width: 84px;
+  width: 96px;
+  min-width: 96px;
+  flex: 0 0 96px;
+  padding: 0 8px;
+  white-space: nowrap;
 }
 
 .answer-text {
-  color: #0f172a;
+  color: #243246;
   font-size: 18px;
   font-weight: 700;
   line-height: 1.65;
 }
 
+.answer-panel {
+  border-color: #d9e7de;
+  border-left: 4px solid #168243;
+  box-shadow: var(--employee-card-shadow);
+}
+
+.answer-panel .panel-title {
+  color: #168243;
+}
+
 .keypoints {
   display: flex;
   flex-direction: column;
@@ -340,9 +514,10 @@ onShow(() => {
 
 .keypoint {
   padding: 10px 12px;
-  border-radius: 10px;
-  background: #f8fafc;
-  color: #334155;
+  border-left: 3px solid #168243;
+  border-radius: 5px;
+  background: #f2f8f4;
+  color: #45484e;
   font-size: 15px;
   line-height: 1.5;
 }
@@ -352,9 +527,10 @@ onShow(() => {
   flex-direction: column;
   gap: 6px;
   padding: 10px 12px;
-  border-radius: 10px;
-  background: #fff7ed;
-  color: #9a3412;
+  border-left: 3px solid #d98200;
+  border-radius: 5px;
+  background: #fff8e9;
+  color: #855000;
   font-size: 13px;
   line-height: 1.45;
 }
@@ -366,9 +542,29 @@ onShow(() => {
 }
 
 .feedback-actions .active {
-  border-color: #16a34a;
-  background: #dcfce7;
-  color: #166534;
+  border-color: #168243;
+  background: #edf7f0;
+  color: #168243;
+}
+
+.feedback-actions .negative {
+  border-color: #e70014;
+  background: #fff1f2;
+  color: #bd0010;
+}
+
+.sources-panel {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.sources-panel .panel-title {
+  display: block;
+  margin-top: 26px;
+  color: #25282d;
+  font-size: 20px;
 }
 
 .snippet {
@@ -376,24 +572,26 @@ onShow(() => {
   margin-top: 12px;
   flex-direction: column;
   gap: 6px;
-  padding: 12px;
-  border-radius: 12px;
-  background: #f8fafc;
+  padding: 14px;
+  border: 1px solid #e3e4e7;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 5px 14px rgba(37, 40, 45, 0.04);
 }
 
 .snippet-title {
-  color: #0f172a;
+  color: #34373c;
   font-weight: 800;
 }
 
 .snippet-content {
-  color: #475569;
+  color: #60636a;
   font-size: 14px;
   line-height: 1.55;
 }
 
 .snippet-id {
-  color: #94a3b8;
+  color: #96999f;
   font-size: 12px;
 }
 
@@ -404,14 +602,290 @@ onShow(() => {
   gap: 8px;
 }
 
-.summary-heading {
-  color: #1d4ed8;
+.summary-panel {
+  border-color: #eadfbd;
+  background: #fffdf7;
+  box-shadow: var(--employee-card-shadow);
+}
+
+.summary-panel .muted {
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.summary-copy {
+  max-width: 278px;
+}
+
+.summary-panel .ghost-button {
+  min-height: 48px;
+  border: 1px solid #d7e1f5;
+  border-radius: 18px;
+  background: #f6f9ff;
+  color: #315b8f;
+}
+
+/* Modal mask overlay */
+.modal-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(15, 23, 42, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+  padding: 20px;
+}
+
+.modal-card {
+  width: 100%;
+  max-width: 400px;
+  max-height: 80vh;
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-top: 5px solid #168243;
+}
+
+.modal-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #f1f5f9;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.modal-title {
+  font-size: 18px;
+  font-weight: 900;
+  color: #0f172a;
+}
+
+.modal-close {
+  background: transparent;
+  border: none;
+  font-size: 24px;
+  color: #94a3b8;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  width: auto;
+  min-height: auto;
+}
+
+.modal-body {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+  max-height: 55vh;
+}
+
+.modal-footer {
+  padding: 16px 20px;
+  border-top: 1px solid #f1f5f9;
+}
+
+.footer-btn {
+  width: 100%;
+  background: #168243;
+  color: #ffffff;
+}
+
+/* Infographic Sections */
+.info-section {
+  margin-bottom: 24px;
+}
+
+.section-title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.badge-num {
+  width: 20px;
+  height: 20px;
+  background: #168243;
+  color: #ffffff;
+  border-radius: 50%;
+  font-size: 11px;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.info-section-title {
+  font-size: 15px;
+  font-weight: 900;
+  color: #1e293b;
+}
+
+/* Steps Timeline */
+.timeline {
+  position: relative;
+  padding-left: 14px;
+}
+
+.timeline::before {
+  content: '';
+  position: absolute;
+  left: 5px;
+  top: 6px;
+  bottom: 6px;
+  width: 2px;
+  background: #e2e8f0;
+}
+
+.timeline-item {
+  position: relative;
+  padding-bottom: 16px;
+  display: flex;
+  gap: 12px;
+}
+
+.timeline-item:last-child {
+  padding-bottom: 0;
+}
+
+.timeline-node {
+  position: absolute;
+  left: -14px;
+  width: 12px;
+  height: 12px;
+  background: #168243;
+  color: #ffffff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 8px;
   font-weight: 800;
 }
 
-.summary-line {
+.timeline-content {
+  flex: 1;
+}
+
+.timeline-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 800;
   color: #334155;
-  font-size: 15px;
-  line-height: 1.55;
+  margin-bottom: 4px;
+}
+
+.timeline-desc {
+  display: block;
+  font-size: 12px;
+  color: #64748b;
+  line-height: 1.45;
+}
+
+/* Speech bubbles/scripts */
+.speech-bubble {
+  position: relative;
+  background: #f2f8f4;
+  border-left: 3px solid #168243;
+  border-radius: 8px;
+  padding: 12px 14px;
+  margin-bottom: 10px;
+}
+
+.quote-mark {
+  position: absolute;
+  left: 6px;
+  top: -2px;
+  font-size: 24px;
+  color: rgba(22, 130, 67, 0.15);
+  font-family: Georgia, serif;
+  line-height: 1;
+}
+
+.speech-text {
+  font-size: 13.5px;
+  color: #1e293b;
+  line-height: 1.5;
+  position: relative;
+  z-index: 1;
+}
+
+/* Objections Q&A */
+.objection-card {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 10px;
+}
+
+.objection-q,
+.objection-a {
+  display: flex;
+  gap: 8px;
+}
+
+.objection-q {
+  margin-bottom: 8px;
+}
+
+.q-badge,
+.a-badge {
+  flex: 0 0 18px;
+  height: 18px;
+  font-size: 10px;
+  font-weight: 800;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.q-badge {
+  background: #fee2e2;
+  color: #b91c1c;
+}
+
+.a-badge {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.q-text {
+  font-size: 13px;
+  font-weight: 800;
+  color: #334155;
+  line-height: 1.4;
+}
+
+.a-text {
+  font-size: 13px;
+  color: #475569;
+  line-height: 1.45;
+}
+
+/* Reminders alert box */
+.reminder-item {
+  display: flex;
+  gap: 8px;
+  background: #fffbeb;
+  border-radius: 8px;
+  padding: 10px 12px;
+  margin-bottom: 8px;
+  align-items: flex-start;
+  border-left: 3px solid #d97706;
+}
+
+.reminder-text {
+  font-size: 13px;
+  color: #78350f;
+  line-height: 1.45;
 }
 </style>
diff --git a/mobile-uni/src/pages/user/today/index.vue b/mobile-uni/src/pages/user/today/index.vue
index 042adf5f..ad102020 100644
--- a/mobile-uni/src/pages/user/today/index.vue
+++ b/mobile-uni/src/pages/user/today/index.vue
@@ -1,9 +1,12 @@
 <template>
-  <view class="page today-page">
+  <view class="page today-page employee-page-shell">
     <view v-if="message" class="status-message">{{ message }}</view>
 
     <view class="mentor-hero">
+      <image class="hero-scene" src="/static/mentor.png" mode="aspectFill" />
+      <view class="hero-scene-scrim" />
       <view class="hero-copy">
+        <text class="employee-kicker hero-kicker">数字师傅 · 今日带练</text>
         <text class="hero-role">{{ positionProfile.value }}</text>
         <text class="hero-title">{{ positionProfile.heroTitle }}</text>
         <text class="hero-sub">有问题，随时问老师傅</text>
@@ -16,8 +19,13 @@
 
     <view class="voice-panel">
       <button class="voice-primary" @click="goSop">
-        <text class="voice-mark">问</text>
-        <text>问老师傅</text>
+        <view class="voice-emblem">
+          <text class="voice-mark">问</text>
+        </view>
+        <view class="voice-copy">
+          <text>问老师傅</text>
+          <text>语音或文字都可以</text>
+        </view>
       </button>
       <button class="voice-secondary" @click="goSop">
         <text class="keyboard-mark">键</text>
@@ -33,7 +41,7 @@
       </view>
     </view>
 
-    <view class="section-card login-section" v-if="!loggedIn">
+    <view class="section-card employee-card login-section" v-if="!loggedIn">
       <view>
         <text class="login-title">登录后查看今日安排</text>
         <text class="login-desc">训练任务、复习提醒和成长数据会按你的手机号展示。</text>
@@ -41,11 +49,14 @@
       <button class="primary-button login-button" @click="goLogin">去登录</button>
     </view>
 
-    <view class="section-card" v-else-if="hasSchedule">
+    <view class="section-card employee-card" v-else-if="hasSchedule">
       <view class="section-head">
-        <view class="section-title">
-          <text class="section-icon">日</text>
-          <text>今日安排</text>
+        <view class="section-heading-block">
+          <view class="section-title">
+            <text class="section-icon">日</text>
+            <text>今日安排</text>
+          </view>
+          <text class="section-subtitle">先完成训练，再补一轮复习，今天的学习节奏就完整了。</text>
         </view>
         <button class="section-link" @click="openTool('训练')">查看全部</button>
       </view>
@@ -69,11 +80,14 @@
       </view>
     </view>
 
-    <view v-if="loggedIn" class="section-card">
+    <view v-if="loggedIn" class="section-card employee-card">
       <view class="section-head">
-        <view class="section-title">
-          <text class="section-icon">图</text>
-          <text>{{ loggedIn ? '我的地图' : '常用入口' }}</text>
+        <view class="section-heading-block">
+          <view class="section-title">
+            <text class="section-icon">图</text>
+            <text>{{ loggedIn ? '我的地图' : '常用入口' }}</text>
+          </view>
+          <text class="section-subtitle">把今天最常用的问、练、学、报都放在手边。</text>
         </view>
       </view>
       <view v-if="mapTiles.length" class="map-grid">
@@ -84,7 +98,7 @@
           :class="tile.tone"
           @click="openTool(tile.title)"
         >
-          <image class="map-icon" :src="tile.icon" mode="aspectFit" />
+          <text class="map-symbol">{{ tile.shortTitle }}</text>
           <view class="map-copy">
             <text class="map-title">{{ tile.title }}</text>
             <text class="map-desc">{{ tile.desc }}</text>
@@ -123,13 +137,6 @@ const primaryTipQuestion = computed(() => quickQuestions.value[0] || '岗位SOP'
 const pendingSopQueryKey = 'aihr_sop_pending_query';
 const pendingAssignmentKey = 'aihr_pending_assignment_id';
 
-const iconFor = (title: string) => {
-  if (title.includes('SOP') || title.includes('查')) return '/static/map-icons/ask.png';
-  if (title.includes('练')) return '/static/map-icons/practice.png';
-  if (title.includes('学') || title.includes('案例')) return '/static/map-icons/learn.png';
-  return '/static/map-icons/report.png';
-};
-
 const toneFor = (title: string) => {
   if (title.includes('SOP') || title.includes('查')) return 'ask';
   if (title.includes('练')) return 'practice';
@@ -137,14 +144,28 @@ const toneFor = (title: string) => {
   return 'report';
 };
 
+const shortTitleFor = (tone: string) => {
+  if (tone === 'ask') return '问';
+  if (tone === 'practice') return '练';
+  if (tone === 'learn') return '学';
+  return '报';
+};
+
+const toolOrder = ['ask', 'practice', 'learn', 'report'];
+
 const mapTiles = computed(() => {
   if (!home.value?.tools?.length) return [];
-  return home.value.tools.map((item) => ({
-    title: item.title,
-    desc: item.desc.replace(/\n/g, ' / '),
-    tone: toneFor(item.title),
-    icon: iconFor(item.title)
-  }));
+  return home.value.tools
+    .map((item) => {
+      const tone = toneFor(item.title);
+      return {
+        title: item.title,
+        shortTitle: shortTitleFor(tone),
+        desc: item.desc.replace(/\n/g, ' / '),
+        tone
+      };
+    })
+    .sort((left, right) => toolOrder.indexOf(left.tone) - toolOrder.indexOf(right.tone));
 });
 
 const primaryAssignment = computed(() =>
@@ -261,169 +282,261 @@ onShow(() => {
 </script>
 
 <style scoped>
+/* Homepage composition follows the approved employee-home visual reference. */
 .today-page {
   min-height: 100vh;
-  padding: 0 14px 86px;
-  background: #f4f7fb;
+  padding: 0 18px 96px;
+  background: linear-gradient(180deg, var(--employee-bg-soft) 0%, var(--employee-bg) 100%);
 }
 
 .mentor-hero {
   position: relative;
-  height: 224px;
-  margin: 0 -14px;
+  height: 244px;
+  margin: 0 -18px;
   overflow: hidden;
-  background:
-    linear-gradient(180deg, rgba(237, 247, 255, 0.72), rgba(244, 247, 251, 0.98)),
-    linear-gradient(135deg, #d9ecff 0%, #f7fbff 45%, #dfeff2 100%);
+  border: 0;
+  background: #f0f1ee;
 }
 
 .mentor-hero::before {
+  display: none;
+}
+
+.hero-scene,
+.hero-scene-scrim {
   position: absolute;
-  right: -36px;
-  bottom: 12px;
-  width: 190px;
-  height: 96px;
-  border-radius: 30px;
-  background: rgba(255, 255, 255, 0.46);
-  content: '';
+  inset: -18px;
+  width: calc(100% + 36px);
+  height: calc(100% + 36px);
+}
+
+.hero-scene {
+  object-fit: cover;
+  opacity: 0.18;
+  filter: blur(13px) saturate(0.34) brightness(1.28);
+  transform: scale(1.12);
+}
+
+.hero-scene-scrim {
+  background: rgba(247, 247, 248, 0.76);
 }
 
 .hero-copy {
   position: absolute;
-  left: 22px;
+  left: 28px;
   top: 34px;
   z-index: 2;
   display: flex;
   flex-direction: column;
 }
 
+.hero-kicker {
+  margin-bottom: 12px;
+}
+
 .hero-role,
 .hero-title {
-  color: #11235a;
-  font-size: 22px;
-  font-weight: 900;
-  line-height: 1.08;
+  color: #25282d;
+  font-size: 29px;
+  line-height: 1.04;
+  letter-spacing: 0;
 }
 
 .hero-sub {
-  margin-top: 8px;
-  color: #1e3a8a;
-  font-size: 13px;
-  font-weight: 700;
+  margin-top: 12px;
+  color: #6a6d72;
+  font-size: 15px;
+  line-height: 1.35;
 }
 
 .mentor-image {
   position: absolute;
-  right: 88px;
-  bottom: 14px;
+  right: 105px;
+  bottom: 0;
   z-index: 1;
-  width: 104px;
-  height: 138px;
-  border-radius: 24px;
-  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
+  width: 132px;
+  height: 176px;
+  border-radius: 0;
+  filter: drop-shadow(0 8px 8px rgba(37, 40, 45, 0.16));
+  -webkit-clip-path: ellipse(44% 56% at 50% 48%);
+  clip-path: ellipse(44% 56% at 50% 48%);
+  -webkit-mask-image: radial-gradient(ellipse 68% 61% at 50% 42%, #000 58%, transparent 100%);
+  mask-image: radial-gradient(ellipse 68% 61% at 50% 42%, #000 58%, transparent 100%);
 }
 
 .mentor-bubble {
   position: absolute;
-  right: 16px;
-  top: 80px;
+  right: 18px;
+  top: 96px;
   z-index: 3;
-  width: 128px;
-  padding: 12px 14px;
-  border-radius: 18px;
-  background: rgba(255, 255, 255, 0.92);
-  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
+  width: 142px;
+  padding: 14px 16px;
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 10px 24px rgba(37, 40, 45, 0.14);
 }
 
 .mentor-bubble text {
-  color: #111827;
+  color: #1c2940;
   font-size: 17px;
-  font-weight: 700;
-  line-height: 1.45;
+  font-weight: 800;
+  line-height: 1.4;
 }
 
 .voice-panel {
   position: relative;
   z-index: 4;
   display: grid;
-  margin: -34px 8px 0;
-  padding: 16px;
-  grid-template-columns: 1fr 1fr;
-  gap: 14px;
-  border-radius: 22px;
+  min-height: 106px;
+  margin: -42px 10px 0;
+  padding: 15px;
+  grid-template-columns: minmax(0, 1fr) 112px;
+  gap: 0;
+  border: 1px solid rgba(47, 74, 117, 0.08);
+  border-radius: 25px;
   background: #ffffff;
-  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.12);
+  box-shadow: 0 14px 36px rgba(47, 107, 255, 0.12);
 }
 
 .voice-primary,
 .voice-secondary {
   display: flex;
-  min-height: 64px;
+  min-height: 76px;
   align-items: center;
   justify-content: center;
-  gap: 10px;
-  border-radius: 18px;
+  border-radius: 0;
   background: transparent;
-  color: #1d4ed8;
-  font-size: 20px;
-  font-weight: 800;
+  color: #e70014;
 }
 
-.voice-secondary {
-  color: #4b5563;
-  background: #f1f5f9;
+.voice-primary {
+  justify-content: flex-start;
+  gap: 14px;
+  padding: 0 16px 0 4px;
+  border-right: 1px solid #e7e7e9;
 }
 
-.voice-primary text:last-child,
-.voice-secondary text:last-child {
-  white-space: nowrap;
-}
-
-.voice-mark,
-.keyboard-mark {
+.voice-emblem {
   display: flex;
-  width: 46px;
-  height: 46px;
+  width: 60px;
+  height: 60px;
+  flex: none;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  background: linear-gradient(135deg, #2563eb, #1d9bf0);
+  background: #e70014;
+  box-shadow: 0 0 0 9px #fff0f1, 0 7px 14px rgba(231, 0, 20, 0.22);
+}
+
+.voice-mark {
+  width: auto;
+  height: auto;
+  border-radius: 0;
+  background: transparent;
   color: #ffffff;
-  font-size: 18px;
+  font-size: 26px;
+}
+
+.voice-copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.voice-copy text:first-child {
+  font-size: 21px;
   font-weight: 900;
+  white-space: nowrap;
+}
+
+.voice-copy text:last-child {
+  color: #777a80;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.voice-secondary {
+  gap: 7px;
+  padding: 0 8px;
+  border-radius: 24px;
+  background: #f1f1f2;
+  color: #45474d;
+  font-size: 17px;
 }
 
 .keyboard-mark {
-  background: #e5e7eb;
-  color: #4b5563;
+  display: flex;
+  width: 30px;
+  height: 30px;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9px;
+  background: #dedee1;
+  color: #45474d;
+  font-size: 14px;
 }
 
 .mentor-chips {
-  margin-top: 14px;
+  margin: 22px 0 0;
 }
 
 .mentor-chips .chip-row {
-  justify-content: space-between;
-  gap: 8px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
 }
 
 .mentor-chips .chip {
-  min-height: 42px;
-  flex: 1;
-  border: 1px solid rgba(203, 213, 225, 0.7);
+  position: relative;
+  display: flex;
+  min-height: 48px;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding: 0 6px;
+  border: 0;
+  border-radius: 24px;
   background: #ffffff;
-  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
-  color: #1f2937;
-  font-size: 15px;
+  box-shadow: 0 7px 18px rgba(37, 40, 45, 0.08);
+  color: #34373c;
+  font-size: 14px;
   font-weight: 800;
+  white-space: nowrap;
+}
+
+.mentor-chips .chip::before {
+  width: 8px;
+  height: 8px;
+  flex: none;
+  border-radius: 50%;
+  background: #e70014;
+  content: '';
+}
+
+.mentor-chips .chip::after {
+  content: none;
+}
+
+.mentor-chips .chip:nth-child(2)::before {
+  background: #d98200;
+}
+
+.mentor-chips .chip:nth-child(3)::before {
+  background: #168243;
 }
 
 .section-card {
-  margin-top: 18px;
+  margin-top: 24px;
   padding: 18px;
-  border-radius: 18px;
+  border: 1px solid rgba(47, 74, 117, 0.08);
+  border-radius: var(--employee-card-radius);
   background: #ffffff;
-  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
+  box-shadow: var(--employee-card-shadow);
 }
 
 .login-section {
@@ -431,6 +544,7 @@ onShow(() => {
   align-items: center;
   justify-content: space-between;
   gap: 12px;
+  border-left: 4px solid #e70014;
 }
 
 .login-title,
@@ -439,74 +553,84 @@ onShow(() => {
 }
 
 .login-title {
-  color: #111827;
-  font-size: 18px;
-  font-weight: 900;
+  font-size: 19px;
 }
 
 .login-desc {
-  margin-top: 6px;
-  color: #64748b;
-  font-size: 13px;
-  line-height: 1.4;
+  max-width: 190px;
+  font-size: 14px;
+  line-height: 1.48;
 }
 
+.today-page .primary-button,
 .login-button {
-  flex: 0 0 84px;
-  min-width: 84px;
-  white-space: nowrap;
+  width: 96px;
+  min-width: 96px;
+  min-height: 50px;
+  flex: 0 0 96px;
+  border-radius: 14px;
+  background: #e70014;
+  box-shadow: 0 8px 16px rgba(231, 0, 20, 0.2);
 }
 
-.section-head,
 .section-title {
   display: flex;
   align-items: center;
+  gap: 10px;
+  color: #25282d;
+  font-size: 22px;
 }
 
-.section-head {
-  justify-content: space-between;
+.section-heading-block {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
 }
 
-.section-title {
-  gap: 9px;
-  color: #111827;
-  font-size: 21px;
-  font-weight: 900;
+.section-subtitle {
+  color: #707682;
+  font-size: 13px;
+  line-height: 1.5;
 }
 
 .section-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 9px;
+  background: #fff0f1;
+  color: #e70014;
+  font-size: 14px;
+}
+
+.section-head {
   display: flex;
-  width: 24px;
-  height: 24px;
   align-items: center;
-  justify-content: center;
-  border-radius: 8px;
-  background: #dbeafe;
-  color: #2563eb;
-  font-size: 13px;
-  font-weight: 900;
+  justify-content: space-between;
 }
 
 .section-link {
-  color: #64748b;
-  font-size: 14px;
+  flex: none;
+  font-size: 15px;
 }
 
 .schedule-list {
   display: flex;
-  margin-top: 16px;
+  margin-top: 18px;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
 }
 
 .schedule-row {
   display: flex;
-  min-height: 82px;
+  min-height: 94px;
   align-items: center;
   gap: 12px;
-  padding: 12px;
-  border-radius: 15px;
-  background: #f8fafc;
+  padding: 14px;
+  border: 0;
+  border-radius: 18px;
+  background: #f4f4f5;
 }
 
 .step-dot {
@@ -523,11 +647,11 @@ onShow(() => {
 }
 
 .step-dot.blue {
-  background: #2563eb;
+  background: #e70014;
 }
 
 .step-dot.orange {
-  background: #f97316;
+  background: #d98200;
 }
 
 .schedule-copy {
@@ -539,26 +663,22 @@ onShow(() => {
 }
 
 .schedule-title {
-  color: #111827;
-  font-size: 16px;
-  font-weight: 900;
-  line-height: 1.25;
+  font-size: 17px;
 }
 
 .schedule-desc {
-  color: #64748b;
-  font-size: 13px;
-  line-height: 1.35;
+  font-size: 14px;
 }
 
 .schedule-action {
   display: flex;
-  width: 68px;
-  min-height: 42px;
+  width: 76px;
+  min-height: 48px;
   flex: none;
   align-items: center;
   justify-content: center;
-  border-radius: 12px;
+  border-radius: 14px;
+  box-shadow: 0 7px 14px rgba(231, 0, 20, 0.2);
   color: #ffffff;
   font-size: 16px;
   font-weight: 900;
@@ -566,117 +686,165 @@ onShow(() => {
 }
 
 .blue-action {
-  background: #2563eb;
+  background: #e70014;
 }
 
 .orange-action {
-  background: #f97316;
+  background: #d98200;
+  box-shadow: 0 7px 14px rgba(217, 130, 0, 0.18);
 }
 
 .map-grid {
   display: grid;
-  margin-top: 16px;
+  margin-top: 18px;
   grid-template-columns: 1fr 1fr;
-  gap: 10px;
+  gap: 12px;
 }
 
 .map-tile {
-  position: relative;
-  display: flex;
-  min-height: 108px;
+  display: grid;
+  min-height: 128px;
+  grid-template-columns: 42px minmax(0, 1fr) 14px;
   align-items: center;
-  gap: 12px;
+  gap: 9px;
   padding: 16px 12px;
-  border-radius: 17px;
+  border: 0;
+  border-radius: 19px;
+  color: #ffffff;
   overflow: hidden;
   text-align: left;
 }
 
 .map-tile.ask {
-  background: linear-gradient(135deg, #1d4ed8, #2682ff);
+  background: linear-gradient(135deg, #c90012, #f02135);
 }
 
 .map-tile.practice {
-  background: linear-gradient(135deg, #16a34a, #22c55e);
+  background: linear-gradient(135deg, #0d7137, #239954);
 }
 
 .map-tile.learn {
-  background: linear-gradient(135deg, #f59e0b, #fb923c);
+  background: linear-gradient(135deg, #ba6d00, #e89410);
 }
 
 .map-tile.report {
-  background: linear-gradient(135deg, #ef4444, #f97316);
+  background: linear-gradient(135deg, #5a5d63, #85888d);
 }
 
-.map-icon {
-  width: 42px;
-  height: 42px;
-  flex: none;
-  filter: brightness(0) invert(1);
+.map-symbol {
+  display: flex;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid rgba(255, 255, 255, 0.76);
+  border-radius: 14px;
+  color: #ffffff;
+  font-size: 22px;
+  font-weight: 900;
+}
+
+.map-title {
+  color: #ffffff;
+  font-size: 26px;
+  line-height: 1;
 }
 
 .map-copy {
   display: flex;
   min-width: 0;
-  flex: 1;
   flex-direction: column;
 }
 
-.map-title {
-  color: #ffffff;
-  font-size: 24px;
-  font-weight: 900;
-  line-height: 1.1;
-}
-
 .map-desc {
-  margin-top: 6px;
-  color: rgba(255, 255, 255, 0.9);
+  margin-top: 7px;
+  color: rgba(255, 255, 255, 0.92);
   font-size: 13px;
-  line-height: 1.35;
+  line-height: 1.28;
 }
 
 .map-arrow {
   color: #ffffff;
-  font-size: 28px;
-  font-weight: 500;
+  font-size: 25px;
 }
 
 .tip-card {
   display: flex;
-  margin-top: 18px;
-  min-height: 58px;
+  margin-top: 22px;
+  min-height: 64px;
   align-items: center;
   gap: 10px;
-  padding: 0 14px;
-  border-radius: 16px;
-  background: #ffffff;
-  color: #475569;
-  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
+  padding: 0 16px;
+  border: 1px solid rgba(255, 179, 64, 0.18);
+  border-radius: 20px;
+  background: #fff7eb;
+  color: #64666b;
+  box-shadow: 0 10px 24px rgba(255, 155, 61, 0.08);
 }
 
 .tip-mark {
   display: flex;
-  width: 28px;
-  height: 28px;
+  width: 30px;
+  height: 30px;
   flex: none;
   align-items: center;
   justify-content: center;
-  border-radius: 50%;
-  background: #fef3c7;
-  color: #d97706;
-  font-size: 13px;
-  font-weight: 900;
+  border-radius: 10px;
+  background: #fff0c4;
+  color: #bf7000;
 }
 
 .tip-card text:nth-child(2) {
   flex: 1;
-  font-size: 14px;
-  line-height: 1.45;
+  font-size: 15px;
 }
 
 .tip-arrow {
-  color: #94a3b8;
+  color: #85878c;
   font-size: 24px;
 }
+
+@media (max-width: 350px) {
+  .hero-role,
+  .hero-title {
+    font-size: 26px;
+  }
+
+  .mentor-image {
+    right: 63px;
+    width: 122px;
+    height: 164px;
+  }
+
+  .mentor-bubble {
+    right: 12px;
+    width: 128px;
+    padding: 12px;
+  }
+
+  .voice-panel {
+    grid-template-columns: minmax(0, 1fr) 98px;
+    margin-right: 4px;
+    margin-left: 4px;
+    padding: 12px;
+  }
+
+  .voice-primary {
+    gap: 10px;
+    padding-right: 10px;
+  }
+
+  .voice-emblem {
+    width: 52px;
+    height: 52px;
+  }
+
+  .voice-copy text:first-child {
+    font-size: 18px;
+  }
+
+  .mentor-chips .chip {
+    font-size: 13px;
+  }
+}
 </style>
diff --git a/mobile-uni/src/static/brand-logo.png b/mobile-uni/src/static/brand-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..81f130461566e33e87a485b7c272fa9f07b5c7e1
GIT binary patch
literal 3154
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
O06^8WRm)T?g8vE1iO_NY

literal 0
HcmV?d00001

diff --git a/mobile-uni/src/static/tabbar/LICENSE-lucide.txt b/mobile-uni/src/static/tabbar/LICENSE-lucide.txt
new file mode 100644
index 00000000..029af513
--- /dev/null
+++ b/mobile-uni/src/static/tabbar/LICENSE-lucide.txt
@@ -0,0 +1,16 @@
+Lucide icons
+Copyright (c) 2020 Lucide Contributors
+
+ISC License
+
+Permission to use, copy, modify, and distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
diff --git a/mobile-uni/src/static/tabbar/ask-active.png b/mobile-uni/src/static/tabbar/ask-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..f137618b6f3a481a489432ee7f8b6918099c74c0
GIT binary patch
literal 2264
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
Qxa4&Kb_7R!jkQnmUsa~O3jhEB

literal 0
HcmV?d00001

diff --git a/mobile-uni/src/static/tabbar/ask-normal.png b/mobile-uni/src/static/tabbar/ask-normal.png
new file mode 100644
index 0000000000000000000000000000000000000000..e4a13ec3485c360bded6f3aa97fa00223e5d302c
GIT binary patch
literal 3205
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

literal 0
HcmV?d00001

diff --git a/mobile-uni/src/static/tabbar/practice-active.png b/mobile-uni/src/static/tabbar/practice-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..a2d6338d399df120b5c76b0aff257e572c10c236
GIT binary patch
literal 2041
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

literal 0
HcmV?d00001

diff --git a/mobile-uni/src/static/tabbar/practice-normal.png b/mobile-uni/src/static/tabbar/practice-normal.png
new file mode 100644
index 0000000000000000000000000000000000000000..b0b382af921c55c287d5ab651309186e7ca9dc36
GIT binary patch
literal 3098
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

literal 0
HcmV?d00001

diff --git a/mobile-uni/src/static/tabbar/profile-active.png b/mobile-uni/src/static/tabbar/profile-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..df5fb8c84a0fe30c91f989fe9c7605201501a41f
GIT binary patch
literal 1895
zcmeAS@N?(olHy`uVBq!ia0vp^fgsGm3?%0U?qUH_3dtTpz6=aiY77hwEes65fI<x~
z7#K<o7#Ln9FfdrnU|<k0n6oR;hJk@eIKU^w^*MvcC>jj`cnJLe|DR<F_f}xKSzi+5
z7tFw>YHY8}$`wBQ#_#L1RAzn>{xd_!_w_3;#+HALOp~sy=<1k|^QcT(ru=b+!H=({
z-@faex~;8y_eA1VafvwQTQ6i^`nh|rS+(wqzV)$_mU-3LQ*9@&UA>cihvadV4a+@!
z<m3}#?p0<!Nqu(aK=0o=sh+k66DtY|{dxHURw`*cuMw<$qyF$$C(mV_1>B35rnk1I
ze6FA7bnx*0w|gwC_%B?{e<vblc<4w&bL_bfXGKlK%F2LFXH4>TciG^avhE0w!(QU)
z>&pI$or{k}w|BRcH&95m#5JNMC9x#cD!C{XNHG{07@6rBnCluEgcurGnHpM|8fzOE
zSQ!|swElevMMG|WN@iLmZVflmoa=xZG~hOrWag$8mn7yEpy)BNGBB|+F@;znKI#2E
z1_tILPZ!6Kh{JDZ{I(YflsI;N*O4e`&8)R2cOBu{Dy_Rwwad$_Wa5^k9Y=y@tL)-f
zTD`FQ-S^)||8%F`FF#f@!?^g|hhX{l{m(1sy?-~yviO;;^NAqcshfNf9|}I4cv`Ge
zOf<J|V~25S=T<j&-5J|$^x{IoYGR%=RcNo_d~|2inwV6X88cK?U43QBR=F)@_lmf0
zBC`b-B#6CC73C4QuEnsjZ_5`G_f<(M&GIue+pnjlKAvHmzSm~fY3?(pk3VVaRXe&t
z^LXpycfNBbM>HHfbhcQ;Ur_64P4G_EWYwjgRo0u#jjn9CeM(`=-IYqy!W$$u_crff
z{(sCbbgR%+FTNyEm$JYocNMH}G%mCKkWrygW%^F)&F$N99#;Z*?F`-|t6g(a=+0Wf
z>}+dXXwSkIz$=(wal*%jr7>vLLGCuTv`2{?7u5F&^0-%YE<39HDy~%ceW?Dwxd*RK
zb~Y_oFBkLBePtWdJ<&e@g&wy<K7Y{sVl3>*?6OMZli`H^&CH%k@50Zndd11Sd*+tM
zVRJ$RqbKpa*|8+FYHihXPv4Cz=00K+V*IYXG2`9cliAKo+cvLXQI>q+>b(^bd21#g
zx2<t-@;m+hSKl|WOt#zBPc9noad0vcvGq(3R}gsdDx|06GjnHx=u6S`6_%TqUf8vF
z-e$LomN~D>f;-kFOlFL`^0Q`Q+`E)_V*59RUs<;;O>dt4UA<RR|2B2XzR(SD(>?lZ
z->vSyf4A1A&3DxlnZAihxjQX5@Ay*2R+EaKU60B{<5HR9q$eqRUT=SX^04yaO?D;C
ztS|Ox{yd&{H>{M0<+zG>{x-XU4K79ZcY2#vruj1Oa%q3Eclp*w@9Zb!@PBRSS9!kU
z+vM!o6M81!I`HZE3+an{XQ;pExjxS;XZp-tt;=7OX3U(oFth8a@0<F*cO1Nzxi|C}
zt?8_PTEqD*yySHDwv*Ge#sB87;ES=eyY_kJg{7OD*glG!tUGdi@|4%QuJc*`%Ko-K
z@=Z=@t%$7j5}z~$MR^6M%(B-04fZvU6zbY|i$iLk?LY9o_9=tVCtjzktCY(8@9*re
zSNIYfI_JUO%f_vHpX^xGk<PboeMDl^_B5>}ss&$X9=R{<#Ts%nUh%ED_ymC;0pHz2
zwYf88=eWH1e=5W@BfEBv%i54yk7RrIm&;ogxNc#owBMMyeA(gUmX*hXy}!y|i9au_
W98)^6W+yPmGI+ZBxvX<aXaWEQ771qn

literal 0
HcmV?d00001

diff --git a/mobile-uni/src/static/tabbar/profile-normal.png b/mobile-uni/src/static/tabbar/profile-normal.png
new file mode 100644
index 0000000000000000000000000000000000000000..f91bb8f3b1ab1d5e14cf66d7a7d491b531384bbd
GIT binary patch
literal 2485
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

literal 0
HcmV?d00001

diff --git a/mobile-uni/src/static/tabbar/today-active.png b/mobile-uni/src/static/tabbar/today-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c3b52a18fab4da387b035e2b7ed9808028d2121
GIT binary patch
literal 1358
zcmeAS@N?(olHy`uVBq!ia0vp^fgsGm3?%0U?qUH_3dtTpz6=aiY77hwEes65fI<x~
z7#K<o7#Ln9FfdrnU|<k0n6oR;hJk@GJHRKz^*MvcD566M{Qv*o*#0Xh?#fGo{DK)&
zQoCn%DSI3~<jyr`w#2CmGCB{Q7=BFo^(ULD=Y)@v?@5jo^VwLYum9JO|My39$T!yy
zZ|p2ye)hhtrg)9<h=}06i3aapS?OO_*uK?s*_X6*X4#|d4t#fcZSFWf6>8e``ulz}
zx$_sLTNjpJvNT_FOLgS}m&i>2mp>+d13G~*$=ltf;@a&eZa@xuiKnkC`zv-XJ{H~H
z-BR8_A=MJsh?11Vl2ohYqEsNoU}RuqrfXoXYiJN+Xk=w-Xk}`wZD3$!V6f8q_aPJw
zx%nxXX_dG&+(>h-18UHK+fb63n_66wm|K9N$HdCO#LC1JVu|>q_xBhWm@GYA977@w
zznvECeAz*u)qO*QLX>MDchjYYW%t&)IxKc%6l7i7^wnu=Ly)Vo#`M3xwPxoS?YwX|
za-PBc+w)%5@K;|lW6<=J$;z^ulbLnXJU(0cu}tQD@%ZC`&o19wsBcp?hxO#V3!?Mh
zB+Uq3{<Y=pT^*n8*HY(Mo?bNP^u$`*y@!hSt^a?>weZ#3g`Di4oDzBd+49E<JwLtV
z)Za;Go1|lRt_t26|7q)Mr9Fj{<9@EaeJ}5$pMoB5^~bw{rVHagy^xT)v)g~w9jy*N
zIUAm{Zwd{oRbnf5r0^{KG-HzCs;S4P^#rcAS(wt}^|Vtpd5QM@)hRtGPphZ*OkA}m
z@#KtSQ@yA3WQP2F%$aXzsjA8{W7d~2wRtYf|0Y@K{@;Jc=&dfVeJ@Y?o|`*#b$P=6
z>DW~1#Tunu_#hVTJb91PNs0BJB4zl`e*Dq8N#McK-?ci6zli$Z=5T7bUL$EgMOE(H
z<etwpJ6jI1%B{Np$o`Ieb1QRl&1B<EQxzhWzlR<F@y@pU($~hkH^z}N&p57T=x?eJ
zTkZ1LeVR*S#-Aw}a}=erci$9xRh4PJTCmq9+U=$he{gb^Pwz@Y(`9a=kGc4bRg#U*
zhXwqY*&eUcbTR5_q-^bmm?tm8y>Djh)L&xy=NixbiZfxx*-Z07t~G^JykMXC{@t?1
z)(^`6mU_xv=9GN6e3_xVm{Vzp_l`XGo(&5Z$J}p_ShasedFHd+j^jULReof(F`u0B
u`dnJW+P8Dh8d%?sKDano-}zMiDfy(k-CGh&)rx@$kHOQ`&t;ucLK6Uaz8?<&

literal 0
HcmV?d00001

diff --git a/mobile-uni/src/static/tabbar/today-normal.png b/mobile-uni/src/static/tabbar/today-normal.png
new file mode 100644
index 0000000000000000000000000000000000000000..b8f67e2683a86842a37ebe5fea0d9eefa3431528
GIT binary patch
literal 1701
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

literal 0
HcmV?d00001

diff --git a/mobile-uni/src/styles/base.css b/mobile-uni/src/styles/base.css
index 192b7135..19e56a69 100644
--- a/mobile-uni/src/styles/base.css
+++ b/mobile-uni/src/styles/base.css
@@ -1,17 +1,41 @@
 page {
   min-height: 100%;
-  background: #f5f7fb;
-  color: #172033;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: #f3f5f7;
+  color: #182230;
+  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif;
 }
 
 :root {
   --mobile-shell-max-width: 430px;
+  --surface: #ffffff;
+  --canvas: #f3f5f7;
+  --ink: #182230;
+  --muted: #647083;
+  --line: #dfe4ea;
+  --brand: #e70014;
+  --brand-pressed: #bd0010;
+  --knowledge: #315b8f;
+  --success: #168243;
+  --warning: #a86100;
+  --radius: 8px;
+  --employee-bg: #f4f6fb;
+  --employee-bg-soft: #f8fbff;
+  --employee-surface: #ffffff;
+  --employee-primary: #2f6bff;
+  --employee-primary-soft: #eaf1ff;
+  --employee-success: #34b368;
+  --employee-warning: #ff9b3d;
+  --employee-danger: #ff6b5f;
+  --employee-text: #182230;
+  --employee-muted: #6b7280;
+  --employee-line: rgba(47, 74, 117, 0.08);
+  --employee-card-radius: 24px;
+  --employee-chip-radius: 18px;
+  --employee-card-shadow: 0 16px 40px rgba(47, 107, 255, 0.1);
 }
 
 view,
 text,
-input,
 button {
   box-sizing: border-box;
 }
@@ -19,9 +43,9 @@ button {
 button {
   margin: 0;
   border: 0;
-  border-radius: 12px;
+  border-radius: var(--radius);
   font-size: 16px;
-  line-height: 1.2;
+  line-height: 1.25;
 }
 
 button::after {
@@ -30,29 +54,63 @@ button::after {
 
 .page {
   min-height: 100vh;
-  padding: 20px 16px 32px;
+  padding: 22px 16px 96px;
+}
+
+.employee-page-shell {
+  background: linear-gradient(180deg, var(--employee-bg-soft) 0%, var(--employee-bg) 100%);
+}
+
+.employee-card {
+  border: 1px solid var(--employee-line);
+  border-radius: var(--employee-card-radius);
+  background: var(--employee-surface);
+  box-shadow: var(--employee-card-shadow);
+}
+
+.employee-kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--employee-primary);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+}
+
+.employee-section-title {
+  color: var(--employee-text);
+  font-size: 20px;
+  font-weight: 900;
+  line-height: 1.2;
+}
+
+.employee-section-subtitle {
+  color: var(--employee-muted);
+  font-size: 14px;
+  line-height: 1.55;
 }
 
 .page-title {
   display: block;
-  font-size: 28px;
-  font-weight: 800;
-  line-height: 1.15;
-  color: #0f172a;
+  font-size: 26px;
+  font-weight: 900;
+  line-height: 1.2;
+  color: var(--ink);
 }
 
 .page-subtitle {
   display: block;
-  margin-top: 8px;
-  font-size: 15px;
-  line-height: 1.6;
-  color: #64748b;
+  margin-top: 6px;
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--muted);
 }
 
 .subpage-header {
   display: flex;
   gap: 12px;
-  align-items: flex-start;
+  align-items: center;
 }
 
 .subpage-heading {
@@ -62,66 +120,68 @@ button::after {
 
 .subpage-back-button {
   display: flex;
-  flex: 0 0 44px;
-  width: 44px;
-  min-width: 44px;
-  height: 44px;
-  min-height: 44px;
+  flex: 0 0 40px;
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  min-height: 40px;
   align-items: center;
   justify-content: center;
   padding: 0;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-  background: #ffffff;
-  color: #1e293b;
-  font-size: 24px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+  color: var(--ink);
+  font-size: 22px;
   font-weight: 700;
   line-height: 1;
 }
 
 .panel {
   margin-top: 16px;
-  padding: 18px;
-  border: 1px solid #e2e8f0;
-  border-radius: 14px;
-  background: #ffffff;
+  padding: 16px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+  box-shadow: 0 1px 2px rgba(24, 34, 48, 0.04);
 }
 
 .panel-title {
-  font-size: 18px;
-  font-weight: 800;
-  color: #1e293b;
+  font-size: 17px;
+  font-weight: 900;
+  color: var(--ink);
 }
 
 .muted {
-  color: #64748b;
+  color: var(--muted);
 }
 
 .primary-button,
 .secondary-button,
 .ghost-button {
   display: flex;
-  min-height: 48px;
+  min-height: 46px;
   align-items: center;
   justify-content: center;
   padding: 0 16px;
-  font-weight: 700;
+  font-weight: 800;
 }
 
 .primary-button {
-  background: #e60012;
+  background: var(--brand);
   color: #ffffff;
+  box-shadow: 0 4px 10px rgba(231, 0, 20, 0.16);
 }
 
 .secondary-button {
-  border: 1px solid #cbd5e1;
-  background: #ffffff;
-  color: #1e293b;
+  border: 1px solid #c9d1db;
+  background: var(--surface);
+  color: var(--ink);
 }
 
 .ghost-button {
-  background: #eff6ff;
-  color: #1d4ed8;
+  background: #eef3f9;
+  color: #38506c;
 }
 
 .primary-button[disabled],
@@ -132,12 +192,12 @@ button::after {
 
 .input {
   width: 100%;
-  min-height: 48px;
+  min-height: 46px;
   padding: 0 14px;
-  border: 1px solid #cbd5e1;
-  border-radius: 12px;
-  background: #ffffff;
-  color: #0f172a;
+  border: 1px solid #c9d1db;
+  border-radius: var(--radius);
+  background: var(--surface);
+  color: var(--ink);
   font-size: 16px;
 }
 
@@ -145,10 +205,10 @@ button::after {
   width: 100%;
   min-height: 112px;
   padding: 12px 14px;
-  border: 1px solid #cbd5e1;
-  border-radius: 12px;
-  background: #ffffff;
-  color: #0f172a;
+  border: 1px solid #c9d1db;
+  border-radius: var(--radius);
+  background: var(--surface);
+  color: var(--ink);
   font-size: 16px;
   line-height: 1.5;
 }
@@ -165,26 +225,30 @@ button::after {
 }
 
 .chip {
-  min-height: 34px;
+  min-height: 36px;
   padding: 0 12px;
-  border-radius: 999px;
-  background: #f1f5f9;
-  color: #334155;
+  border: 1px solid #dbe1e8;
+  border-radius: var(--radius);
+  background: #f8fafc;
+  color: #3d4b5f;
   font-size: 14px;
+  font-weight: 700;
 }
 
 .status-message {
   margin-top: 12px;
   padding: 10px 12px;
-  border-radius: 10px;
-  background: #fff7ed;
-  color: #9a3412;
+  border: 1px solid #f0d7a7;
+  border-left: 3px solid #d38a13;
+  border-radius: var(--radius);
+  background: #fffaf0;
+  color: #80520f;
   font-size: 14px;
   line-height: 1.5;
 }
 
 .supervisor-access-panel {
-  border-left: 4px solid #e60012;
+  border-left: 4px solid var(--brand);
 }
 
 .supervisor-access-copy {
@@ -209,11 +273,22 @@ button::after {
 }
 
 .empty {
-  padding: 24px 12px;
-  color: #64748b;
+  padding: 28px 12px;
+  color: var(--muted);
   text-align: center;
 }
 
+.primary-button:active {
+  background: var(--brand-pressed);
+}
+
+uni-tabbar.uni-tabbar-bottom,
+uni-tabbar.uni-tabbar-bottom .uni-tabbar {
+  border-top: 1px solid var(--line) !important;
+  background: rgba(255, 255, 255, 0.98) !important;
+  box-shadow: 0 -10px 30px rgba(47, 107, 255, 0.08);
+}
+
 @media (min-width: 520px) {
   :root {
     --mobile-shell-side-offset: calc((100vw - var(--mobile-shell-max-width)) / 2);
@@ -234,8 +309,8 @@ button::after {
 
   uni-app {
     min-height: 100vh;
-    background: #f5f7fb;
-    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
+    background: var(--canvas);
+    box-shadow: 0 0 0 1px rgba(24, 34, 48, 0.07), 0 16px 42px rgba(24, 34, 48, 0.1);
   }
 
   uni-tabbar.uni-tabbar-bottom {
diff --git a/mobile-uni/tests/mobile-user-pages.test.mjs b/mobile-uni/tests/mobile-user-pages.test.mjs
new file mode 100644
index 00000000..37d89a0b
--- /dev/null
+++ b/mobile-uni/tests/mobile-user-pages.test.mjs
@@ -0,0 +1,99 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import test from 'node:test';
+
+const pageSource = async (path) => readFile(new URL(path, import.meta.url), 'utf8');
+
+test('全局基础样式不对输入控件设置 border-box', async () => {
+  const source = await pageSource('../src/styles/base.css');
+
+  assert.doesNotMatch(source, /view,\s*\ntext,\s*\ninput,/);
+  assert.doesNotMatch(source, /view,\s*\ntext,\s*\ntextarea,/);
+  assert.doesNotMatch(source, /(^|\n)input\b[\s\S]*?box-sizing:\s*border-box/m);
+  assert.doesNotMatch(source, /(^|\n)textarea\b[\s\S]*?box-sizing:\s*border-box/m);
+});
+
+test('SOP 查询框不再覆盖 textarea 的 box-sizing', async () => {
+  const source = await pageSource('../src/pages/user/sop/index.vue');
+  const queryPanelStyle = source.match(/\.query-panel \.textarea \{[\s\S]*?\n\}/)?.[0] || '';
+
+  assert.equal(queryPanelStyle.includes('box-sizing'), false);
+});
+
+test('员工首页地图主标题保留真实工具名称', async () => {
+  const source = await pageSource('../src/pages/user/today/index.vue');
+
+  assert.match(source, /<text class="map-symbol">\{\{ tile\.shortTitle \}\}<\/text>/);
+  assert.match(source, /<text class="map-title">\{\{ tile\.title \}\}<\/text>/);
+});
+
+test('训练页提交失败会回滚本次乐观追加的对话', async () => {
+  const source = await pageSource('../src/pages/user/practice/index.vue');
+
+  assert.match(source, /const previousTurns = turns\.value\.slice\(\)/);
+  assert.match(source, /turns\.value = previousTurns/);
+});
+
+test('manifest 明确声明为 uni-app Vue3 CLI 工程', async () => {
+  const source = await pageSource('../src/manifest.json');
+
+  assert.match(source, /"vueVersion"\s*:\s*"3"/);
+});
+
+test('员工端 tabBar 继续保留四个固定入口', async () => {
+  const source = await pageSource('../src/pages.json');
+
+  assert.match(source, /"selectedColor"\s*:\s*"#2f6bff"/);
+  assert.match(source, /pages\/user\/today\/index/);
+  assert.match(source, /pages\/user\/practice\/index/);
+  assert.match(source, /pages\/user\/sop\/index/);
+  assert.match(source, /pages\/user\/profile\/index/);
+});
+
+test('共享视觉基座包含员工端主色和卡片圆角 token', async () => {
+  const source = await pageSource('../src/styles/base.css');
+
+  assert.match(source, /--employee-primary:\s*#2f6bff/);
+  assert.match(source, /--employee-card-radius:\s*24px/);
+  assert.match(source, /\.employee-card\s*\{/);
+});
+
+test('员工端三页接入共享页面和卡片基座', async () => {
+  const [todaySource, sopSource, practiceSource] = await Promise.all([
+    pageSource('../src/pages/user/today/index.vue'),
+    pageSource('../src/pages/user/sop/index.vue'),
+    pageSource('../src/pages/user/practice/index.vue')
+  ]);
+
+  assert.match(todaySource, /employee-page-shell/);
+  assert.match(todaySource, /section-card employee-card/);
+  assert.match(sopSource, /query-panel employee-card/);
+  assert.match(practiceSource, /scenario-card employee-card/);
+});
+
+test('员工首页保留师傅区、语音条、今日安排、我的地图四段结构', async () => {
+  const source = await pageSource('../src/pages/user/today/index.vue');
+
+  assert.match(source, /mentor-hero/);
+  assert.match(source, /voice-panel/);
+  assert.match(source, /今日安排/);
+  assert.match(source, /我的地图/);
+});
+
+test('问师傅页保留搜索框、答案区和总结卡入口', async () => {
+  const source = await pageSource('../src/pages/user/sop/index.vue');
+
+  assert.match(source, /query-panel/);
+  assert.match(source, /answer-panel/);
+  assert.match(source, /summary-panel/);
+});
+
+test('训练页保留任务卡、对话区、回复区和结果区', async () => {
+  const source = await pageSource('../src/pages/user/practice/index.vue');
+
+  assert.match(source, /scenario-card/);
+  assert.match(source, /assignment-panel/);
+  assert.match(source, /dialogue-card/);
+  assert.match(source, /reply-card/);
+  assert.match(source, /result-card/);
+});