From f60176c196a2dc373651da898c85ebf52440cb9a Mon Sep 17 00:00:00 2001
From: let5sne <let5sne@gmail.com>
Date: Tue, 14 Jul 2026 03:01:26 +0800
Subject: [PATCH] fix(mobile): align practice prep with figma

---
 mobile-uni/src/pages/user/practice/index.vue | 176 +++++++++++++++++--
 1 file changed, 164 insertions(+), 12 deletions(-)

diff --git a/mobile-uni/src/pages/user/practice/index.vue b/mobile-uni/src/pages/user/practice/index.vue
index 452c7936..f54614d4 100644
--- a/mobile-uni/src/pages/user/practice/index.vue
+++ b/mobile-uni/src/pages/user/practice/index.vue
@@ -1,8 +1,8 @@
 <template>
   <view class="page practice-page employee-page-shell">
     <view class="practice-head">
-      <text class="page-title">练</text>
-      <text class="page-subtitle">数字师傅 · 场景训练</text>
+      <text class="page-title">训练前预习</text>
+      <text class="page-subtitle">先掌握要点，再开始场景练习</text>
     </view>
 
     <view v-if="message" class="status-message">{{ message }}</view>
@@ -17,17 +17,30 @@
 
     <view v-if="loggedIn" class="panel scenario-card employee-card">
       <view class="scenario-headline">
-        <text class="scenario-title">场景模拟</text>
-        <text class="scenario-desc">先看预习卡，再开始练习</text>
+        <text class="scenario-title">{{ activeScenarioName }}</text>
+        <text class="scenario-desc">生活顾问 · 业主服务场景</text>
       </view>
-      <view class="scenario-visual" aria-hidden="true">
-        <view class="visual-sheet" />
-        <view class="visual-bubble"><text>•••</text></view>
+      <view class="scenario-persona">
+        <view class="persona-avatar">业</view>
+        <view class="persona-copy">
+          <text class="persona-title">待处理业主</text>
+          <text class="persona-desc">先听清诉求，再回应</text>
+        </view>
+        <text class="persona-state">待进入</text>
       </view>
-      <view v-if="prepCard" class="prep-card">
-        <view class="prep-mini"><text class="prep-label">要点</text><text>关键要点先掌握</text></view>
-        <view class="prep-mini"><text class="prep-label">红线</text><text>风险红线要注意</text></view>
-        <view class="prep-mini"><text class="prep-label">可说话术</text><text>有效话术可参考</text></view>
+      <view v-if="prepCard" class="prep-sections">
+        <view class="prep-section prep-section-points">
+          <text class="prep-section-title">要点</text>
+          <text v-for="item in prepCard.keyPoints.slice(0, 3)" :key="`point-${item}`" class="prep-line"><text class="prep-mark">✓</text>{{ item }}</text>
+        </view>
+        <view class="prep-section prep-section-redline">
+          <text class="prep-section-title">红线</text>
+          <text v-for="item in prepCard.redLines.slice(0, 3)" :key="`red-${item}`" class="prep-line"><text class="prep-mark">!</text>{{ item }}</text>
+        </view>
+        <view class="prep-section prep-section-script">
+          <text class="prep-section-title">可说话术</text>
+          <text v-for="item in prepCard.scripts.slice(0, 3)" :key="`script-${item}`" class="prep-line"><text class="prep-mark">✓</text>{{ item }}</text>
+        </view>
       </view>
       <text v-else-if="prepLoading" class="muted">预习卡加载中</text>
       <button
@@ -36,7 +49,7 @@
         :disabled="busy"
         @click="start()"
       >
-        {{ status === 'finished' ? '再练一次' : '开始练习' }}
+        {{ status === 'finished' ? '再练一次' : '我已准备好，开始练习' }}
       </button>
     </view>
 
@@ -1616,4 +1629,143 @@ onShow(() => {
   color: var(--employee-muted);
   font-size: 11px;
 }
+
+.practice-head .page-title {
+  color: #1f2024;
+  font-size: 29px;
+  letter-spacing: 0.5px;
+}
+
+.practice-head .page-subtitle {
+  color: #8a8d93;
+}
+
+.scenario-card {
+  padding: 20px 16px 16px;
+  border-radius: 24px;
+  background: #ffffff;
+  box-shadow: 0 10px 26px rgba(24, 28, 36, 0.06);
+}
+
+.scenario-headline {
+  max-width: none;
+  gap: 6px;
+}
+
+.scenario-title {
+  color: #25282d;
+  font-size: 27px;
+}
+
+.scenario-desc {
+  color: #8a8d93;
+  font-size: 14px;
+}
+
+.scenario-persona {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 2px;
+  padding: 14px;
+  border: 1px solid #ffd9dc;
+  border-radius: 16px;
+  background: #fff8f8;
+}
+
+.persona-avatar {
+  display: flex;
+  width: 48px;
+  height: 48px;
+  flex: 0 0 48px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #ffe1e4;
+  color: #e70014;
+  font-size: 19px;
+  font-weight: 900;
+}
+
+.persona-copy {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.persona-title {
+  color: #25282d;
+  font-size: 16px;
+  font-weight: 900;
+}
+
+.persona-desc {
+  color: #8a8d93;
+  font-size: 12px;
+}
+
+.persona-state {
+  padding: 6px 9px;
+  border-radius: 12px;
+  background: #fff0f1;
+  color: #e70014;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.prep-sections {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 2px;
+}
+
+.prep-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+  border: 1px solid #f0f1f3;
+  border-radius: 20px;
+  background: #ffffff;
+}
+
+.prep-section-title {
+  color: #25282d;
+  font-size: 19px;
+  font-weight: 900;
+}
+
+.prep-section-redline {
+  border-color: #ffe0e2;
+  background: #fffafa;
+}
+
+.prep-section-redline .prep-section-title,
+.prep-section-redline .prep-mark {
+  color: #e70014;
+}
+
+.prep-line {
+  display: block;
+  margin-top: 0;
+  color: #858990;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.prep-mark {
+  display: inline-block;
+  width: 17px;
+  color: #8c929a;
+  font-weight: 900;
+}
+
+.scenario-card .primary-button {
+  margin-top: 4px;
+  background: linear-gradient(135deg, #ed1f28, #ff4b4d);
+  box-shadow: 0 8px 16px rgba(231, 0, 20, 0.18);
+}
 </style>