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

frontend/src/views/DataQuality.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
-      <h2 style="margin:0;">数据质量监控</h2>
+    <div class="flex-between section-gap">
+      <span class="page-title">数据质量监控</span>
       <div>
         <el-button type="primary" @click="runCheck" :loading="checking">执行全量检查</el-button>
         <el-button @click="loadLogs">刷新</el-button>
@@ -9,7 +9,7 @@
     </div>
 
     <!-- 统计卡片 -->
-    <el-row :gutter="16" style="margin-bottom:16px;">
+    <el-row :gutter="16" class="section-gap">
       <el-col :span="6">
         <el-card shadow="never">
           <div style="text-align:center;">
@@ -21,7 +21,7 @@
       <el-col :span="6">
         <el-card shadow="never">
           <div style="text-align:center;">
-            <div style="font-size:28px;font-weight:600;color:#e6a23c;">{{ stats.open_logs }}</div>
+            <div style="font-size:28px;font-weight:600;color:var(--bsc-learning);">{{ stats.open_logs }}</div>
             <div style="font-size:13px;color:#999;">未解决异常</div>
           </div>
         </el-card>
@@ -45,7 +45,7 @@
     </el-row>
 
     <!-- 异常类型分布 -->
-    <el-row :gutter="16" style="margin-bottom:16px;">
+    <el-row :gutter="16" class="section-gap">
       <el-col :span="24">
         <el-card shadow="never">
           <template #header>异常类型分布</template>
@@ -137,8 +137,8 @@ const typeChartOption = computed(() => ({
     type: 'pie',
     radius: ['40%', '70%'],
     data: [
-      { name: '数据缺失', value: stats.value.type_counts?.missing_data || 0, itemStyle: { color: '#f56c6c' } },
-      { name: '环比骤变', value: stats.value.type_counts?.abnormal_change || 0, itemStyle: { color: '#e6a23c' } },
+      { name: '数据缺失', value: stats.value.type_counts?.missing_data || 0, itemStyle: { color: 'var(--bsc-finance)' } },
+      { name: '环比骤变', value: stats.value.type_counts?.abnormal_change || 0, itemStyle: { color: 'var(--bsc-learning)' } },
       { name: '连续持平', value: stats.value.type_counts?.flat_data || 0, itemStyle: { color: '#409eff' } },
       { name: '值异常', value: stats.value.type_counts?.value_outlier || 0, itemStyle: { color: '#909399' } },
     ].filter(d => d.value > 0),