feat: 员工画像页面接入真实数据

替换 employeeProfile/index.vue 中的 Mock 数据为 API 调用，新增员工
姓名自动补全搜索，支持时间范围切换，雷达图/维度明细/获奖记录/考试
成绩均由后端接口驱动；score/index.js 补充 searchPortraitUsers 和
getEmployeePortrait 两个函数。

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/api/score/index.js

@@ -87,6 +87,14 @@ export function syncLedgerByType(type) {
   return request({ url: `/ledger/sync/${type}`, method: 'post' })
 }
 
+// ===== 员工画像 =====
+export function searchPortraitUsers(keyword) {
+  return request({ url: '/score/portrait/searchUsers', method: 'get', params: { keyword } })
+}
+export function getEmployeePortrait(params) {
+  return request({ url: '/score/portrait/employee', method: 'get', params })
+}
+
 // ===== 推送配置 =====
 export function listPushConfig(params) {
   return request({ url: '/score/pushConfig/list', method: 'get', params })

src/views/portraitManagement/employeeProfile/index.vue

@@ -7,8 +7,9 @@
         <el-button size="small" @click="selectTime('month')" :type="currentTime === 'month' ? 'primary' : 'default'">近一月</el-button>
         <el-button size="small" @click="selectTime('quarter')" :type="currentTime === 'quarter' ? 'primary' : 'default'">近三月</el-button>
         <el-button size="small" @click="selectTime('year')" :type="currentTime === 'year' ? 'primary' : 'default'">近一年</el-button>
-        <el-button size="small" type="default">自定义时间范围</el-button>
+        <el-button size="small" @click="selectTime('custom')" :type="currentTime === 'custom' ? 'primary' : 'default'">自定义</el-button>
         <el-date-picker
+          v-if="currentTime === 'custom'"
           v-model="dateRange"
           type="daterange"
           range-separator="至"
@@ -16,51 +17,68 @@
           end-placeholder="结束时间"
           size="small"
           style="margin-left: 10px;"
+          @change="loadPortrait"
         />
       </div>
-      <div class="org-selector">
-        <el-select v-model="selectedOrg" placeholder="请选择组织" size="small" style="width: 200px;">
-          <el-option label="旅检一科" value="dept1" />
-          <el-option label="旅检二科" value="dept2" />
-          <el-option label="旅检三科" value="dept3" />
-        </el-select>
+      <div class="person-selector">
+        <el-autocomplete
+          v-model="personName"
+          :fetch-suggestions="queryUsers"
+          placeholder="请搜索员工姓名"
+          size="small"
+          style="width: 240px;"
+          @select="handlePersonSelect"
+          @clear="portrait = null"
+          clearable
+        >
+          <template #suffix>
+            <el-icon><Search /></el-icon>
+          </template>
+          <template #default="{ item }">
+            <span>{{ item.nickName }}</span>
+            <span v-if="item.deptName" style="font-size:12px;color:#999;margin-left:8px">{{ item.deptName }}</span>
+          </template>
+        </el-autocomplete>
       </div>
     </div>
 
-    <div class="main-content">
+    <div v-if="!portrait" class="empty-tip">
+      <el-empty description="请在右上角搜索员工姓名以查看画像" />
+    </div>
+
+    <div v-else v-loading="loading" class="main-content">
+      <!-- 第一行：基本信息 + 综合评分 + 补充信息 -->
       <div class="row">
         <div class="card basic-info-card">
           <div class="avatar-section">
-            <img class="avatar" src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=portrait%20of%20asian%20male%20in%20business%20suit&image_size=square" alt="头像" />
+            <div v-if="portrait.avatar" class="avatar-img-wrap">
+              <img class="avatar" :src="portrait.avatar" alt="头像" />
+            </div>
+            <div v-else class="avatar-placeholder">{{ portrait.personName ? portrait.personName.charAt(0) : '?' }}</div>
           </div>
           <div class="info-section">
-            <h2 class="name">陈雨桐</h2>
+            <h2 class="name">{{ portrait.personName }}</h2>
             <div class="info-grid">
               <div class="info-item">
-                <span class="label">所属部门及队：</span>
-                <span class="value">旅检一科/雨桐班组/鹏飞小组</span>
-              </div>
-              <div class="info-item">
-                <span class="label">出生日期：</span>
-                <span class="value">1990年10月18日</span>
+                <span class="label">所属部门：</span>
+                <span class="value">{{ portrait.deptPath || '-' }}</span>
               </div>
               <div class="info-item">
                 <span class="label">技能等级：</span>
-                <span class="value">二级</span>
+                <span class="value">{{ portrait.qualificationLevelText || '-' }}</span>
               </div>
               <div class="info-item">
                 <span class="label">学历：</span>
-                <span class="value">本科</span>
+                <span class="value">{{ portrait.schooling || '-' }}</span>
               </div>
               <div class="info-item">
-                <span class="label">专业：</span>
-                <span class="value">物流运输</span>
+                <span class="label">安检岗位：</span>
+                <span class="value">{{ portrait.securityInspectionPosition || '-' }}</span>
+              </div>
+              <div class="info-item" v-if="portrait.phonenumber">
+                <span class="label">联系电话：</span>
+                <span class="value">{{ portrait.phonenumber }}</span>
               </div>
-            </div>
-            <div class="tags">
-              <span class="label">标签：</span>
-              <el-tag size="small" type="primary">通道组长</el-tag>
-              <el-tag size="small" type="warning">旅检</el-tag>
             </div>
           </div>
         </div>
@@ -68,31 +86,41 @@
         <div class="card score-card">
           <h3 class="card-title">综合评价</h3>
           <div class="score-display">
-            <span class="score">78<span class="plus">+2</span></span>
+            <span class="score" :style="scoreColor">{{ portrait.totalScore }}</span>
+            <div class="score-level" :style="scoreColor">{{ scoreLevel }}</div>
           </div>
         </div>
 
         <div class="card extra-info-card">
           <h3 class="card-title">补充信息</h3>
           <div class="extra-info-list">
-            <div class="extra-item"><span class="label">政治面貌：</span><span class="value">党员</span></div>
-            <div class="extra-item"><span class="label">性别：</span><span class="value">男</span></div>
-            <div class="extra-item"><span class="label">籍贯：</span><span class="value">重庆市</span></div>
-            <div class="extra-item"><span class="label">民族：</span><span class="value">汉族</span></div>
-            <div class="extra-item"><span class="label">年龄：</span><span class="value">28岁</span></div>
-            <div class="extra-item"><span class="label">司龄：</span><span class="value">6年</span></div>
-            <div class="extra-item"><span class="label">性格特征：</span><span class="value">检查员型</span></div>
-            <div class="extra-item"><span class="label">工作风格：</span><span class="value">尽责型</span></div>
+            <div class="extra-item"><span class="label">政治面貌：</span><span class="value">{{ portrait.politicalStatusText || '-' }}</span></div>
+            <div class="extra-item"><span class="label">性别：</span><span class="value">{{ portrait.sexText || '-' }}</span></div>
+            <div class="extra-item"><span class="label">司龄：</span><span class="value">{{ portrait.workYears != null ? portrait.workYears + '年' : '-' }}</span></div>
+            <div class="extra-item"><span class="label">开机年限：</span><span class="value">{{ portrait.securityCheckYears != null ? portrait.securityCheckYears + '年' : '-' }}</span></div>
+            <div class="extra-item"><span class="label">性格特征：</span><span class="value">{{ portrait.characterCharacteristics || '-' }}</span></div>
+            <div class="extra-item"><span class="label">工作风格：</span><span class="value">{{ portrait.workingStyle || '-' }}</span></div>
           </div>
         </div>
       </div>
 
+      <!-- 第二行：工作履历 + 雷达图 + 获奖记录 -->
       <div class="row">
         <div class="card work-experience-card">
           <h3 class="card-title">工作履历</h3>
           <div class="experience-list">
-            <div class="experience-item">2020.11入职/司龄6年/开机年限5年/现任班组长</div>
-            <div class="experience-item">2020.11入职/司龄6年/开机年限5年/现任班组长</div>
+            <div class="experience-item" v-if="portrait.startWorkingDate">
+              入职时间：{{ portrait.startWorkingDate }}
+              <span v-if="portrait.workYears != null"> / 司龄 {{ portrait.workYears }} 年</span>
+            </div>
+            <div class="experience-item" v-if="portrait.securityCheckStartDate">
+              开机时间：{{ portrait.securityCheckStartDate }}
+              <span v-if="portrait.securityCheckYears != null"> / 开机年限 {{ portrait.securityCheckYears }} 年</span>
+            </div>
+            <div class="experience-item" v-if="portrait.securityInspectionPosition">
+              现任岗位：{{ portrait.securityInspectionPosition }}
+            </div>
+            <div v-if="!portrait.startWorkingDate && !portrait.securityCheckStartDate" class="empty-text">暂无履历数据</div>
           </div>
         </div>
 
@@ -103,58 +131,81 @@
 
         <div class="card award-card">
           <h3 class="card-title">获奖记录</h3>
-          <table class="award-table">
+          <table class="award-table" v-if="portrait.awards && portrait.awards.length">
             <thead>
               <tr>
-                <th>站级</th>
-                <th>个人荣誉</th>
-                <th>航站楼加分</th>
-                <th>8分</th>
+                <th>类型</th>
+                <th>内容</th>
+                <th>分值</th>
+                <th>日期</th>
               </tr>
             </thead>
             <tbody>
-              <tr>
-                <td>站级</td>
-                <td>个人荣誉</td>
-                <td>小额奖励</td>
-                <td>100元</td>
-              </tr>
-              <tr>
-                <td>部门级</td>
-                <td>个人荣誉</td>
-                <td>小额奖励</td>
-                <td>100元</td>
-              </tr>
-              <tr>
-                <td>部门级</td>
-                <td>个人荣誉</td>
-                <td>小额奖励</td>
-                <td>100元</td>
+              <tr v-for="(award, idx) in portrait.awards" :key="idx">
+                <td>{{ award.type }}</td>
+                <td>{{ award.content }}</td>
+                <td style="color:#67c23a;font-weight:500">+{{ award.score }}</td>
+                <td>{{ award.date }}</td>
               </tr>
             </tbody>
           </table>
+          <div v-else class="empty-text">暂无获奖记录</div>
         </div>
       </div>
 
+      <!-- 第三行：维度明细 + 培训情况 -->
       <div class="row">
-        <div class="card position-card">
-          <h3 class="card-title">业务岗位</h3>
-          <div class="position-list">
-            <div class="position-item">证件检查岗位</div>
-            <div class="position-item">防爆检查岗位</div>
-            <div class="position-item">人身检查岗位</div>
-            <div class="position-item">开包检查岗位</div>
-            <div class="position-item">X射线安检仪操作岗位</div>
-          </div>
+        <div class="card dim-detail-card">
+          <h3 class="card-title">维度得分明细</h3>
+          <table class="award-table" v-if="portrait.dimensions && portrait.dimensions.length">
+            <thead>
+              <tr>
+                <th>维度</th>
+                <th>基础分</th>
+                <th>事项分</th>
+                <th>得分</th>
+                <th>权重</th>
+                <th>贡献分</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(dim, idx) in portrait.dimensions" :key="idx">
+                <td>{{ dim.name }}</td>
+                <td>{{ dim.baseScore }}</td>
+                <td :style="Number(dim.eventScore) > 0 ? 'color:#67c23a' : Number(dim.eventScore) < 0 ? 'color:#f56c6c' : ''">
+                  {{ Number(dim.eventScore) > 0 ? '+' + dim.eventScore : dim.eventScore }}
+                </td>
+                <td><strong>{{ dim.score }}</strong></td>
+                <td>{{ dim.weight }}%</td>
+                <td>{{ (Number(dim.score) * Number(dim.weight) / 100).toFixed(1) }}</td>
+              </tr>
+            </tbody>
+          </table>
         </div>
 
         <div class="card training-card">
-          <h3 class="card-title">培训情况</h3>
-          <div class="training-item">
-            <span class="item-label">季度考核：</span>
-            <span class="item-value">90分</span>
-            <span class="item-value">图像成绩 95分</span>
+          <h3 class="card-title">最新考试成绩</h3>
+          <div v-if="portrait.examDate || portrait.theoryScore != null">
+            <div class="training-item" v-if="portrait.examDate">
+              <span class="item-label">考试日期：</span>
+              <span class="item-value">{{ portrait.examDate }}</span>
+              <span class="item-label" style="margin-left:16px">类别：</span>
+              <span class="item-value">{{ portrait.examCategory || '-' }}</span>
+              <span class="item-label" style="margin-left:16px">期数：</span>
+              <span class="item-value">{{ portrait.examPeriod || '-' }}</span>
+            </div>
+            <div class="training-item" style="margin-top:12px">
+              <span class="item-label">理论成绩：</span>
+              <span class="item-value score-badge" :style="examScoreColor(portrait.theoryScore)">
+                {{ portrait.theoryScore != null ? portrait.theoryScore + '分' : '-' }}
+              </span>
+              <span class="item-label" style="margin-left:24px">图像成绩：</span>
+              <span class="item-value score-badge" :style="examScoreColor(portrait.imageScore)">
+                {{ portrait.imageScore != null ? portrait.imageScore + '分' : '-' }}
+              </span>
+            </div>
           </div>
+          <div v-else class="empty-text">暂无考试记录</div>
         </div>
       </div>
     </div>
@@ -162,105 +213,147 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
-import * as echarts from 'echarts';
-
-defineOptions({ name: 'EmployeeProfile' });
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { Search } from '@element-plus/icons-vue'
+import { searchPortraitUsers, getEmployeePortrait } from '@/api/score/index'
+
+defineOptions({ name: 'EmployeeProfile' })
+
+const currentTime = ref('year')
+const dateRange = ref([])
+const personName = ref('')
+const portrait = ref(null)
+const loading = ref(false)
+const abilityChart = ref(null)
+let chart = null
+
+const formatDate = (d) => {
+  const dt = new Date(d)
+  const y = dt.getFullYear()
+  const m = String(dt.getMonth() + 1).padStart(2, '0')
+  const dd = String(dt.getDate()).padStart(2, '0')
+  return `${y}-${m}-${dd}`
+}
 
-const currentTime = ref('year');
-const dateRange = ref([]);
-const selectedOrg = ref('dept1');
-const abilityChart = ref(null);
-let chart = null;
+const getTimeRange = () => {
+  if (currentTime.value === 'custom') {
+    if (dateRange.value && dateRange.value.length === 2) {
+      return { beginTime: formatDate(dateRange.value[0]), endTime: formatDate(dateRange.value[1]) }
+    }
+    return {}
+  }
+  const end = new Date()
+  const begin = new Date()
+  if (currentTime.value === 'week') begin.setDate(end.getDate() - 7)
+  else if (currentTime.value === 'month') begin.setMonth(end.getMonth() - 1)
+  else if (currentTime.value === 'quarter') begin.setMonth(end.getMonth() - 3)
+  else begin.setFullYear(end.getFullYear() - 1)
+  return { beginTime: formatDate(begin), endTime: formatDate(end) }
+}
 
 const selectTime = (time) => {
-  currentTime.value = time;
-};
+  currentTime.value = time
+  if (time !== 'custom') loadPortrait()
+}
+
+const queryUsers = async (query, cb) => {
+  if (!query || !query.trim()) { cb([]); return }
+  try {
+    const res = await searchPortraitUsers(query.trim())
+    cb((res.data || []).map(u => ({ ...u, value: u.nickName })))
+  } catch (_) {
+    cb([])
+  }
+}
+
+const handlePersonSelect = (item) => {
+  personName.value = item.nickName
+  loadPortrait()
+}
+
+const loadPortrait = async () => {
+  if (!personName.value) return
+  loading.value = true
+  try {
+    const params = { personName: personName.value, ...getTimeRange() }
+    const res = await getEmployeePortrait(params)
+    portrait.value = res.data || null
+  } catch (_) {
+    portrait.value = null
+  } finally {
+    loading.value = false
+  }
+}
+
+const scoreColor = computed(() => {
+  const s = Number(portrait.value?.totalScore)
+  if (!s) return 'color:#ff9900'
+  if (s < 75) return 'color:#f56c6c'
+  if (s > 85) return 'color:#67c23a'
+  return 'color:#ff9900'
+})
+
+const scoreLevel = computed(() => {
+  const s = Number(portrait.value?.totalScore)
+  if (!s) return ''
+  if (s < 75) return '较差'
+  if (s > 85) return '优秀'
+  return '良好'
+})
+
+const examScoreColor = (score) => {
+  const s = Number(score)
+  if (!s) return ''
+  if (s >= 98) return 'color:#67c23a;font-weight:bold'
+  if (s < 60) return 'color:#f56c6c'
+  return 'color:#409eff'
+}
 
 const initChart = () => {
-  if (!abilityChart.value) return;
-  chart = echarts.init(abilityChart.value);
+  if (!abilityChart.value || !portrait.value) return
+  if (chart) { chart.dispose(); chart = null }
+  chart = echarts.init(abilityChart.value)
+  const dims = portrait.value.dimensions || []
   const option = {
     radar: {
-      indicator: [
-        { name: '安全防控能力', max: 100 },
-        { name: '服务响应能力', max: 100 },
-        { name: '业务实操能力', max: 100 },
-        { name: '作风践行能力', max: 100 },
-        { name: '身心调节能力', max: 100 }
-      ],
+      indicator: dims.map(d => ({ name: d.name, max: 100 })),
       center: ['50%', '55%'],
       radius: '70%',
       splitNumber: 4,
-      axisLine: {
-        lineStyle: {
-          color: '#ddd'
-        }
-      },
-      splitArea: {
-        areaStyle: {
-          color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)']
-        }
-      },
-      splitLine: {
-        lineStyle: {
-          color: '#ddd'
-        }
-      },
-      name: {
-        textStyle: {
-          color: '#333',
-          fontSize: 12
-        }
-      }
+      axisLine: { lineStyle: { color: '#ddd' } },
+      splitArea: { areaStyle: { color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'] } },
+      splitLine: { lineStyle: { color: '#ddd' } },
+      name: { textStyle: { color: '#333', fontSize: 12 } }
     },
-    series: [
-      {
-        type: 'radar',
-        data: [
-          {
-            value: [84, 75, 68, 74, 80],
-            name: '个人能力',
-            areaStyle: {
-              color: 'rgba(80, 180, 255, 0.4)'
-            },
-            lineStyle: {
-              color: '#50b4ff',
-              width: 2
-            },
-            itemStyle: {
-              color: '#50b4ff'
-            }
-          }
-        ],
-        symbol: 'circle',
-        symbolSize: 6
-      }
-    ]
-  };
-  chart.setOption(option);
-};
-
-const handleResize = () => {
-  if (chart) {
-    chart.resize();
+    series: [{
+      type: 'radar',
+      data: [{
+        value: dims.map(d => Number(d.score)),
+        name: '个人能力',
+        areaStyle: { color: 'rgba(80, 180, 255, 0.4)' },
+        lineStyle: { color: '#50b4ff', width: 2 },
+        itemStyle: { color: '#50b4ff' }
+      }],
+      symbol: 'circle',
+      symbolSize: 6
+    }]
   }
-};
+  chart.setOption(option)
+}
+
+watch(portrait, (val) => {
+  if (val) nextTick(() => initChart())
+})
+
+const handleResize = () => { if (chart) chart.resize() }
 
-onMounted(() => {
-  nextTick(() => {
-    initChart();
-    window.addEventListener('resize', handleResize);
-  });
-});
+onMounted(() => { window.addEventListener('resize', handleResize) })
 
 onBeforeUnmount(() => {
-  window.removeEventListener('resize', handleResize);
-  if (chart) {
-    chart.dispose();
-    chart = null;
-  }
-});
+  window.removeEventListener('resize', handleResize)
+  if (chart) { chart.dispose(); chart = null }
+})
 </script>
 
 <style scoped lang="scss">
@@ -284,6 +377,7 @@ onBeforeUnmount(() => {
     display: flex;
     align-items: center;
     gap: 10px;
+    flex-wrap: wrap;
 
     .label {
       font-size: 14px;
@@ -293,6 +387,20 @@ onBeforeUnmount(() => {
   }
 }
 
+.empty-tip {
+  background: #fff;
+  border-radius: 8px;
+  padding: 60px 20px;
+  text-align: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.empty-text {
+  color: #999;
+  font-size: 13px;
+  padding: 10px 0;
+}
+
 .main-content {
   display: flex;
   flex-direction: column;
@@ -340,14 +448,28 @@ onBeforeUnmount(() => {
 
   .avatar-section {
     flex-shrink: 0;
+  }
 
-    .avatar {
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
-      border: 3px solid #409eff;
-      object-fit: cover;
-    }
+  .avatar-img-wrap .avatar {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    border: 3px solid #409eff;
+    object-fit: cover;
+  }
+
+  .avatar-placeholder {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    border: 3px solid #409eff;
+    background: linear-gradient(135deg, #409eff, #66b1ff);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 36px;
+    font-weight: bold;
+    color: #fff;
   }
 
   .info-section {
@@ -364,30 +486,13 @@ onBeforeUnmount(() => {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 10px;
-      margin-bottom: 15px;
 
       .info-item {
         font-size: 14px;
         color: #666;
 
-        .label {
-          color: #999;
-        }
-        .value {
-          color: #333;
-          font-weight: 500;
-        }
-      }
-    }
-
-    .tags {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-
-      .label {
-        font-size: 14px;
-        color: #999;
+        .label { color: #999; }
+        .value { color: #333; font-weight: 500; }
       }
     }
   }
@@ -403,17 +508,19 @@ onBeforeUnmount(() => {
   .score-display {
     flex: 1;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
 
     .score {
-      font-size: 48px;
+      font-size: 52px;
       font-weight: bold;
-      color: #ff9900;
     }
-    .plus {
-      font-size: 24px;
-      color: #67c23a;
+
+    .score-level {
+      font-size: 16px;
+      margin-top: 8px;
+      font-weight: 500;
     }
   }
 }
@@ -428,17 +535,10 @@ onBeforeUnmount(() => {
       color: #666;
       border-bottom: 1px dashed #eee;
 
-      &:last-child {
-        border-bottom: none;
-      }
+      &:last-child { border-bottom: none; }
 
-      .label {
-        color: #999;
-      }
-      .value {
-        color: #333;
-        font-weight: 500;
-      }
+      .label { color: #999; }
+      .value { color: #333; font-weight: 500; }
     }
   }
 }
@@ -469,45 +569,33 @@ onBeforeUnmount(() => {
 
 .award-card {
   flex: 1;
+}
 
-  .award-table {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: 13px;
+.award-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
 
-    th, td {
-      padding: 10px 8px;
-      text-align: center;
-      border: 1px solid #ddd;
-    }
+  th, td {
+    padding: 10px 8px;
+    text-align: center;
+    border: 1px solid #ddd;
+  }
 
-    th {
-      background: #ffeae8;
-      color: #333;
-      font-weight: 500;
-    }
+  th {
+    background: #ffeae8;
+    color: #333;
+    font-weight: 500;
+  }
 
-    td {
-      background: #fff;
-      color: #666;
-    }
+  td {
+    background: #fff;
+    color: #666;
   }
 }
 
-.position-card {
-  flex: 1;
-
-  .position-list {
-    .position-item {
-      padding: 12px 15px;
-      background: #fceee7;
-      border-radius: 8px;
-      margin-bottom: 8px;
-      font-size: 14px;
-      color: #333;
-      text-align: center;
-    }
-  }
+.dim-detail-card {
+  flex: 1.5;
 }
 
 .training-card {
@@ -519,13 +607,11 @@ onBeforeUnmount(() => {
     border-radius: 8px;
     font-size: 14px;
 
-    .item-label {
-      color: #666;
-    }
-    .item-value {
-      color: #333;
-      font-weight: 500;
-      margin-left: 8px;
+    .item-label { color: #666; }
+    .item-value { color: #333; font-weight: 500; margin-left: 4px; }
+
+    .score-badge {
+      font-size: 16px;
     }
   }
 }