feat(ui): CMA前端UI优化P0 - BSC变量+公共类+统一标题+色值替换+内联style替换

frontend/src/views/ReportCenter.vue

@@ -2,7 +2,7 @@
   <div class="report-page">
     <!-- 顶部 -->
     <div class="report-header">
-      <h3 style="margin:0;">📊 CMA管理报表</h3>
+      <h3 class="page-title">📊 CMA管理报表</h3>
       <div class="header-right">
         <el-date-picker
           v-model="reportPeriod"
@@ -268,8 +268,8 @@ function dimLabel(d: string): string {
 }
 
 function bscScoreColor(score: number): string {
-  if (score >= 80) return '#67c23a'
-  if (score >= 60) return '#e6a23c'
+  if (score >= 80) return 'var(--bsc-process)'
+  if (score >= 60) return 'var(--bsc-learning)'
   return '#f56c6c'
 }
 
@@ -398,7 +398,7 @@ onMounted(() => {
 .stat-card.blue { border-top-color: #409eff; }
 .stat-card.red { border-top-color: #f56c6c; }
 .stat-card.green { border-top-color: #67c23a; }
-.stat-card.yellow { border-top-color: #e6a23c; }
+.stat-card.yellow { border-top-color: var(--bsc-learning); }
 .stat-card.gray { border-top-color: #909399; }
 .stat-val { font-size: 22px; font-weight: 700; color: #1a1a2e; }
 .stat-label { font-size: 12px; color: #888; margin-top: 2px; }
@@ -438,7 +438,7 @@ onMounted(() => {
 .bsc-kpi-mini { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 6px; background: #f9f9f9; border-radius: 4px; }
 .bsc-kpi-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
 .dot-green { background: #67c23a; }
-.dot-yellow { background: #e6a23c; }
+.dot-yellow { background: var(--bsc-learning); }
 .dot-red { background: #f56c6c; }
 .dot-gray { background: #ddd; }
 .bsc-kpi-name { flex: 1; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }