fix：明暗主题随机颜色方法修复

src/utils/generate-utils.ts

@@ -13,29 +13,41 @@ export function generateColorHEX(): string {
  * @returns rgb(24 144 255) / rgba(0,0,0,.85)
  */
 export function generateColorRGBA(hasAlpha: boolean = false) {
-  let red:number;
-  let green: number;
-  let blue:number;
-   red = Math.floor(Math.random() * 256)+100;//+100增加顏色亮度
-   green = Math.floor(Math.random() * 256)+100;
-   blue = Math.floor(Math.random() * 256)+100;
+  const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
 
-  const brightChannel = Math.floor(Math.random() * 3);
-  switch (brightChannel) {
-    case 0:
-      red = Math.min(255, red + 50);
-      break;
-    case 1:
-      green = Math.min(255, green + 50);
-      break;
-    case 2:
-      blue = Math.min(255, blue + 50);
-      break;
+  let red: number;
+  let green: number;
+  let blue: number;
+
+  if (isDark) {
+    // 暗色模式下生成较亮的颜色
+    red = Math.floor(Math.random() * 156) + 100;    // 100-255
+    green = Math.floor(Math.random() * 156) + 100;  // 100-255
+    blue = Math.floor(Math.random() * 156) + 100;   // 100-255
+
+    // 确保至少有一个通道的值较高，使颜色更明亮
+    const brightChannel = Math.floor(Math.random() * 3);
+    switch (brightChannel) {
+      case 0:
+        red = Math.min(255, red + 50);
+        break;
+      case 1:
+        green = Math.min(255, green + 50);
+        break;
+      case 2:
+        blue = Math.min(255, blue + 50);
+        break;
+    }
+  } else {
+    // 亮色模式下生成正常的颜色
+    red = Math.floor(Math.random() * 256);    // 0-255
+    green = Math.floor(Math.random() * 256);  // 0-255
+    blue = Math.floor(Math.random() * 256);   // 0-255
   }
 
   if (hasAlpha) {
-    const alpha = Math.floor(Math.random() * 100)+50;
-    return `rgb(${red}, ${green}, ${blue}, 0.${alpha})`;
+    const alpha = Math.floor(Math.random() * 100);
+    return `rgba(${red}, ${green}, ${blue}, 0.${alpha})`;
   }
 
   return `rgb(${red}, ${green}, ${blue})`;

src/views/perfManage/kpiOverView/index.vue

@@ -247,6 +247,7 @@ const fetchChartData = async () => {
 
     chartData.value = processChartData(allData);
     updateChart();
+    updateKpiStats();
   } catch (error) {
     console.error('Failed to fetch chart data:', error);
     message.error(t('common.getInfoFail'));
@@ -276,11 +277,31 @@ const getSplitLineColor = () => {
 // 添加主题变化的观察器
 const themeObserver = new MutationObserver(() => {
   if (chart) {
+    //清空颜色缓存
+    kpiColors.clear();
     // 获取当前的主题色
     const splitLineColor = getSplitLineColor();
 
     // 重新设置完整的图表配置并触发重新渲染
     requestAnimationFrame(() => {
+      // 先生成所有新的颜色并存储
+      selectedKPIs.value.forEach(kpiId => {
+        const color = generateColorRGBA();
+        kpiColors.set(kpiId, color);
+      });
+      // 使用存储的颜色更新图表系列
+      const series = selectedKPIs.value.map(kpiId => {
+        const kpi = kpiColumns.value.find(col => col.kpiId === kpiId);
+        if (!kpi) return null;
+
+        return {
+          name: kpi.title,
+          type: 'line',
+          data: chartData.value.map(item => item[kpiId] || 0),
+          itemStyle: { color: kpiColors.get(kpiId) },
+          ...getSeriesConfig(),
+        };
+      }).filter(Boolean);
       const option = {
         title: {
           text: t('views.perfManage.kpiOverView.kpiChartTitle'),
@@ -373,24 +394,17 @@ const themeObserver = new MutationObserver(() => {
           extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);'
         },
         // 重新设置系列数据
-        series: selectedKPIs.value.map(kpiId => {
-          const kpi = kpiColumns.value.find(col => col.kpiId === kpiId);
-          if (!kpi) return null;
-          const color = kpiColors.get(kpiId) || generateColorRGBA();
-          return {
-            name: kpi.title,
-            type: 'line',
-            data: chartData.value.map(item => item[kpiId] || 0),
-            itemStyle: { color },
-            ...getSeriesConfig(),
-          };
-        }).filter(Boolean)
+         series
       };
 
       // 使用新的配置更新图表
       chart!.setOption(option, true);
       // 强制重新渲染
       chart!.resize();
+      // 更新统计数据
+      nextTick(() => {
+        updateKpiStats();
+      });
     });
   }
 });
@@ -407,14 +421,6 @@ const updateChart = () => {
     const color = kpiColors.get(kpiId)||generateColorRGBA();
     kpiColors.set(kpiId, color);
 
-    // 获取数据数组
-    const data = chartData.value.map((item, index) => {
-      const value = item[kpiId] || 0;
-      // 如果是最后一个数据点，添加特殊样式
-
-      return value;
-    });
-
     return {
       name: kpi.title,
       type: 'line',
@@ -743,10 +749,16 @@ interface KPIStats {
 }
 
 // 添加计算属性，用于计算每个指标的最大值和最小值
-const kpiStats = computed((): KPIStats[] => {
-  if (!chartData.value.length || !kpiColumns.value.length) return [];
+// 将 kpiStats 从计算属性改为响应式引用
+const kpiStats = ref<KPIStats[]>([]);
 
-  return selectedKPIs.value.map(kpiId => {
+// 添加一个计算函数来更新统计数据
+const updateKpiStats = () => {
+  if (!chartData.value.length || !kpiColumns.value.length) {
+    kpiStats.value = [];
+    return;
+  }
+  kpiStats.value = selectedKPIs.value.map(kpiId => {
     // 找到对应的KPI标题
     const kpi = kpiColumns.value.find(col => col.kpiId === kpiId);
     if (!kpi) return null;
@@ -767,7 +779,8 @@ const kpiStats = computed((): KPIStats[] => {
       avg:avg
     };
   }).filter((item): item is KPIStats => item !== null);
-});
+};
+
 
 // 添加表格列定义
 const statsColumns: TableColumnType<KPIStats>[] = [
@@ -776,9 +789,12 @@ const statsColumns: TableColumnType<KPIStats>[] = [
     key: 'icon',
     width: 50,
     customRender: ({ record }: { record: KPIStats }) => {
+      // 获取当前主题下的颜色
+      // 直接使用 kpiColors 中存储的颜色
+      const color = kpiColors.get(record.kpiId);
       return h(LineOutlined, {
         style: {
-          color: kpiColors.get(record.kpiId) || '#000', // 使用与折线图相同的颜色
+          color: color || '#000', // 使用与折线图相同的颜色
           fontSize: '30px', // 增大图标尺寸到30px
           fontWeight: 'bold', // 加粗
         }