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

frontend/src/views/Dashboard.vue

@@ -3,7 +3,7 @@
     <!-- 顶部导航条 -->
     <div class="dash-header">
       <div class="header-left">
-        <el-tag size="large" :type="roleTagType">{{ roleLabel }}驾驶舱</el-tag>
+        <h3 class="page-title">{{ roleLabel }}驾驶舱</h3>
         <el-radio-group v-model="periodType" size="small" @change="onPeriodChange">
           <el-radio-button value="month">本月</el-radio-button>
           <el-radio-button value="quarter">本季</el-radio-button>
@@ -112,7 +112,7 @@
                 <div class="pred-row-val">
                   <span class="pred-cur">{{ fmtValue(p.last_value, p.kpi_code) }}</span>
                   <span class="pred-sep">→</span>
-                  <span class="pred-fut" :style="{ color: p.trend === 'down' ? '#f56c6c' : '#67c23a' }">
+                  <span class="pred-fut" :style="{ color: p.trend === 'down' ? 'var(--bsc-finance)' : 'var(--bsc-process)' }">
                     {{ fmtValue(p.predicted_value, p.kpi_code) }}
                   </span>
                 </div>
@@ -449,10 +449,10 @@ onMounted(() => { loadData() })
 .summary-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:14px; margin-bottom:20px; }
 .stat-card { background:#fff; border-radius:10px; padding:16px 20px; box-shadow:0 1px 3px rgba(0,0,0,0.05); border-top:3px solid #ccc; transition:transform .15s; cursor:default; }
 .stat-card:hover { transform:translateY(-1px); box-shadow:0 3px 10px rgba(0,0,0,0.08); }
-.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.blue { border-top-color:var(--bsc-customer); }
+.stat-card.red { border-top-color:var(--bsc-finance); }
+.stat-card.green { border-top-color:var(--bsc-process); }
+.stat-card.yellow { border-top-color:var(--bsc-learning); }
 .stat-card.gray { border-top-color:#909399; }
 .stat-val { font-size:28px; font-weight:700; color:#1a1a2e; letter-spacing:-1px; }
 .stat-label { font-size:13px; color:#888; margin-top:2px; }
@@ -470,11 +470,11 @@ onMounted(() => { loadData() })
 .spotlight-list { display:flex; flex-direction:column; gap:6px; }
 .spotlight-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; cursor:pointer; transition:background .15s; font-size:13px; }
 .spotlight-item:hover { background:rgba(245,108,108,0.08); }
-.spotlight-item.level-red { border-left:3px solid #f56c6c; }
-.spotlight-item.level-yellow { border-left:3px solid #e6a23c; }
+.spotlight-item.level-red { border-left:3px solid var(--bsc-finance); }
+.spotlight-item.level-yellow { border-left:3px solid var(--bsc-learning); }
 .spotlight-badge { font-size:11px; font-weight:600; padding:2px 8px; border-radius:4px; white-space:nowrap; }
-.spotlight-item.level-red .spotlight-badge { background:#fef0f0; color:#f56c6c; }
-.spotlight-item.level-yellow .spotlight-badge { background:#fdf6ec; color:#e6a23c; }
+.spotlight-item.level-red .spotlight-badge { background:#fef0f0; color:var(--bsc-finance); }
+.spotlight-item.level-yellow .spotlight-badge { background:#fdf6ec; color:var(--bsc-learning); }
 .spotlight-msg { flex:1; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .spotlight-item .el-icon { color:#ccc; flex-shrink:0; }
 
@@ -501,22 +501,22 @@ onMounted(() => { loadData() })
 .pred-list { display:flex; flex-direction:column; gap:12px; }
 .pred-row { padding:12px; border-radius:8px; border:1px solid #f0f0f0; transition:border-color .15s; }
 .pred-row:hover { border-color:#d0d0d0; }
-.pred-row.trend-down { border-left:3px solid #f56c6c; }
-.pred-row.trend-up { border-left:3px solid #67c23a; }
+.pred-row.trend-down { border-left:3px solid var(--bsc-finance); }
+.pred-row.trend-up { border-left:3px solid var(--bsc-process); }
 .pred-row.trend-stable { border-left:3px solid #909399; }
 .pred-row-top { display:flex; justify-content:space-between; margin-bottom:6px; }
 .pred-name { font-size:13px; font-weight:500; color:#333; }
 .pred-arrow { font-size:14px; font-weight:700; color:#999; }
-.pred-row.trend-down .pred-arrow { color:#f56c6c; }
-.pred-row.trend-up .pred-arrow { color:#67c23a; }
+.pred-row.trend-down .pred-arrow { color:var(--bsc-finance); }
+.pred-row.trend-up .pred-arrow { color:var(--bsc-process); }
 .pred-row-val { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
 .pred-cur { font-size:16px; font-weight:600; color:#555; }
 .pred-sep { color:#ccc; font-size:12px; }
 .pred-fut { font-size:18px; font-weight:700; }
 .pred-row-info { font-size:11px; }
-.pred-conf { padding:1px 6px; border-radius:3px; }
-.pred-conf.high { background:#f0f9eb; color:#67c23a; }
-.pred-conf.medium { background:#fdf6ec; color:#e6a23c; }
+.pred-row.trend-up .pred-arrow { color:var(--bsc-process); }
+.pred-conf.high { background:#f0f9eb; color:var(--bsc-process); }
+.pred-conf.medium { background:#fdf6ec; color:var(--bsc-learning); }
 .pred-conf.low { background:#f4f4f5; color:#909399; }
 
 /* ========== 业务/财务KPI卡片 ========== */