feat(mobile): 重做员工端首页、问答和训练页视觉

统一员工端 tabBar、共享卡片和三大核心页面的视觉基础，同时保持现有移动端业务流程不变。补充 H5 输入兼容、页面结构和训练回滚行为的回归测试。

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>