feat(工作台): 工作台可视化暗黑主题

frontend/src/config/chartTheme.ts

@@ -0,0 +1,61 @@
+import useAppStore from '@/store/modules/app';
+
+const appStore = useAppStore();
+
+const colorThemeConfig: Record<string, any> = {
+  xLabelColor: {
+    dark: '#C0C2CF',
+    bright: '#646466',
+  },
+  legendColor: {
+    dark: '#E3E6F3',
+    bright: '#323233',
+  },
+  splitLineColor: {
+    dark: '#434552',
+    bright: '#EDEDF1',
+  },
+  yLabelColor: {
+    dark: '#90929F',
+    bright: '#AEAEB2',
+  },
+  subtextStyleColor: {
+    dark: '#90929F',
+    bright: '#323233',
+  },
+  itemStyleBorderColor: {
+    dark: '#242633',
+    bright: '#ffffff',
+  },
+  initItemStyleColor: {
+    dark: '#434552',
+    bright: '#D4D4D8',
+  },
+  pageIconColor: {
+    dark: '#959598',
+    bright: '#959598',
+  },
+  pageIconInactiveColor: {
+    dark: '#959598',
+    bright: '#C7C7CB',
+  },
+  pageTextStyleColor: {
+    dark: '#C7C7CB',
+    bright: '#959598',
+  },
+  graphicBackgroundColor: {
+    dark: '#ADB0BC',
+    bright: '#F9F9FE',
+  },
+  graphicFillColor: {
+    dark: '#242633',
+    bright: '#959598',
+  },
+};
+
+function getVisualThemeColor(key: string): string {
+  const theme = appStore.isDarkTheme ? 'dark' : 'bright';
+  return colorThemeConfig[key]?.[theme];
+}
+
+export default getVisualThemeColor;

frontend/src/config/workbench.ts

@@ -1,5 +1,6 @@
 import { cloneDeep } from 'lodash-es';
 
+import getVisualThemeColor from '@/config/chartTheme';
 import { commonConfig, toolTipConfig } from '@/config/testPlan';
 
 import type { ModuleCardItem } from '@/models/workbench/homePage';
@@ -145,12 +146,13 @@ export const defaultLegacy = [
   },
 ];
 
-export const defaultValueMap: Record<string, any> = {
+export const defaultValueMap = (): Record<string, any> => {
+  return {
     // 用例数量
     [WorkCardEnum.CASE_COUNT]: {
       review: {
         defaultList: cloneDeep(defaultCover),
-      color: ['#00C261', '#D4D4D8'],
+        color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
         defaultName: 'workbench.homePage.reviewRate',
       },
       pass: {
@@ -163,7 +165,7 @@ export const defaultValueMap: Record<string, any> = {
     [WorkCardEnum.ASSOCIATE_CASE_COUNT]: {
       cover: {
         defaultList: cloneDeep(defaultCover),
-      color: ['#00C261', '#D4D4D8'],
+        color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
         defaultName: 'workbench.homePage.coverRate',
       },
     },
@@ -171,7 +173,7 @@ export const defaultValueMap: Record<string, any> = {
     [WorkCardEnum.REVIEW_CASE_COUNT]: {
       cover: {
         defaultList: cloneDeep(defaultCover),
-      color: ['#00C261', '#D4D4D8'],
+        color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
         defaultName: 'workbench.homePage.coverRate',
       },
     },
@@ -179,17 +181,17 @@ export const defaultValueMap: Record<string, any> = {
     [WorkCardEnum.TEST_PLAN_COUNT]: {
       execute: {
         defaultList: cloneDeep(defaultExecution),
-      color: ['#D4D4D8', '#00C261'],
+        color: [getVisualThemeColor('initItemStyleColor'), '#00C261'],
         defaultName: 'workbench.homePage.executeRate',
       },
       pass: {
         defaultList: cloneDeep(defaultPass),
-      color: ['#00C261', '#D4D4D8'],
+        color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
         defaultName: 'workbench.homePage.passRate',
       },
       complete: {
         defaultList: cloneDeep(defaultComplete),
-      color: ['#D4D4D8', '#3370FF', '#00C261', '#FF9964'],
+        color: [getVisualThemeColor('initItemStyleColor'), '#3370FF', '#00C261', '#FF9964'],
         defaultName: 'workbench.homePage.completeRate',
       },
     },
@@ -197,7 +199,7 @@ export const defaultValueMap: Record<string, any> = {
     [WorkCardEnum.PLAN_LEGACY_BUG]: {
       legacy: {
         defaultList: cloneDeep(defaultLegacy),
-      color: ['#00C261', '#D4D4D8'],
+        color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
         defaultName: 'workbench.homePage.legacyRate',
       },
     },
@@ -205,7 +207,7 @@ export const defaultValueMap: Record<string, any> = {
     [WorkCardEnum.BUG_COUNT]: {
       legacy: {
         defaultList: cloneDeep(defaultLegacy),
-      color: ['#00C261', '#D4D4D8'],
+        color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
         defaultName: 'workbench.homePage.legacyRate',
       },
     },
@@ -213,7 +215,7 @@ export const defaultValueMap: Record<string, any> = {
     [WorkCardEnum.HANDLE_BUG_BY_ME]: {
       legacy: {
         defaultList: cloneDeep(defaultLegacy),
-      color: ['#00C261', '#D4D4D8'],
+        color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
         defaultName: 'workbench.homePage.legacyRate',
       },
     },
@@ -221,12 +223,12 @@ export const defaultValueMap: Record<string, any> = {
     [WorkCardEnum.API_COUNT]: {
       cover: {
         defaultList: cloneDeep(defaultCover),
-      color: ['#00C261', '#D4D4D8'],
+        color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
         defaultName: 'workbench.homePage.coverRate',
       },
       complete: {
         defaultList: cloneDeep(defaultComplete),
-      color: ['#00C261', '#3370FF', '#D4D4D8'],
+        color: ['#00C261', '#3370FF', getVisualThemeColor('initItemStyleColor')],
         defaultName: 'workbench.homePage.completeRate',
       },
     },
@@ -234,10 +236,11 @@ export const defaultValueMap: Record<string, any> = {
     [WorkCardEnum.CREATE_BUG_BY_ME]: {
       legacy: {
         defaultList: cloneDeep(defaultLegacy),
-      color: ['#00C261', '#D4D4D8'],
+        color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
         defaultName: 'workbench.homePage.legacyRate',
       },
     },
+  };
 };
 
 // XX率饼图配置
@@ -257,7 +260,7 @@ export const commonRatePieOptions = {
     subtext: '0',
     subtextStyle: {
       fontSize: 12,
-      color: '#323233',
+      color: getVisualThemeColor('subtextStyleColor'),
       fontWeight: 'bold',
       align: 'center',
       lineHeight: 3,

frontend/src/views/workbench/homePage/components/apiAndScenarioCase.vue

@@ -90,6 +90,7 @@
   import RatioPie from './ratioPie.vue';
 
   import { workApiCaseCountDetail, workApiCountCoverRage, workScenarioCaseCountDetail } from '@/api/modules/workbench';
+  import getVisualThemeColor from '@/config/chartTheme';
   import { useI18n } from '@/hooks/useI18n';
   import useOpenNewPage from '@/hooks/useOpenNewPage';
   import useAppStore from '@/store/modules/app';
@@ -196,7 +197,7 @@
   const coverTitleConfig = computed(() => {
     return {
       name: t('workbench.homePage.apiCoverage'),
-      color: ['#D4D4D8', '#00C261'],
+      color: [getVisualThemeColor('initItemStyleColor'), '#00C261'],
       tooltipText:
         props.item.key === WorkCardEnum.API_CASE_COUNT
           ? t('workbench.homePage.apiCaseCountCoverRateTooltip')
@@ -208,12 +209,12 @@
     return props.item.key === WorkCardEnum.API_CASE_COUNT
       ? {
           name: t('workbench.homePage.caseExecutionRate'),
-          color: ['#D4D4D8', '#00C261'],
+          color: [getVisualThemeColor('initItemStyleColor'), '#00C261'],
           tooltipText: t('workbench.homePage.apiCaseCountExecuteRateTooltip'),
         }
       : {
           name: t('workbench.homePage.sceneExecutionRate'),
-          color: ['#D4D4D8', '#00C261'],
+          color: [getVisualThemeColor('initItemStyleColor'), '#00C261'],
           tooltipText: t('workbench.homePage.scenarioCaseCountExecuteRateTooltip'),
         };
   });

frontend/src/views/workbench/homePage/components/apiCount.vue

@@ -63,6 +63,7 @@
   import PassRatePie from './passRatePie.vue';
 
   import { workApiCountCoverRage, workApiCountDetail } from '@/api/modules/workbench';
+  import getVisualThemeColor from '@/config/chartTheme';
   import { useI18n } from '@/hooks/useI18n';
   import useAppStore from '@/store/modules/app';
 
@@ -195,7 +196,11 @@
         return {
           ...item,
           selected: true,
-          color: `${colorMapConfig[props.item.key][index]}`,
+          color: `${
+            colorMapConfig[props.item.key][index] !== 'initItemStyleColor'
+              ? colorMapConfig[props.item.key][index]
+              : getVisualThemeColor('initItemStyleColor')
+          }`,
         };
       });
 

frontend/src/views/workbench/homePage/components/caseCount.vue

@@ -59,6 +59,7 @@
   import PassRatePie from './passRatePie.vue';
 
   import { workCaseCountDetail } from '@/api/modules/workbench';
+  import getVisualThemeColor from '@/config/chartTheme';
   import { useI18n } from '@/hooks/useI18n';
   import useAppStore from '@/store/modules/app';
 
@@ -146,7 +147,11 @@
         return {
           ...item,
           selected: true,
-          color: `${colorMapConfig[props.item.key][index]}`,
+          color: `${
+            colorMapConfig[props.item.key][index] !== 'initItemStyleColor'
+              ? colorMapConfig[props.item.key][index]
+              : getVisualThemeColor('initItemStyleColor')
+          }`,
         };
       });
       hasPermission.value = detail.errorCode !== 109001;

frontend/src/views/workbench/homePage/components/caseReviewedCount.vue

@@ -58,6 +58,7 @@
   import PassRatePie from './passRatePie.vue';
 
   import { workCaseReviewDetail } from '@/api/modules/workbench';
+  import getVisualThemeColor from '@/config/chartTheme';
   import { useI18n } from '@/hooks/useI18n';
   import useAppStore from '@/store/modules/app';
 
@@ -137,7 +138,11 @@
         return {
           ...item,
           selected: true,
-          color: `${colorMapConfig[props.item.key][index]}`,
+          color: `${
+            colorMapConfig[props.item.key][index] !== 'initItemStyleColor'
+              ? colorMapConfig[props.item.key][index]
+              : getVisualThemeColor('initItemStyleColor')
+          }`,
         };
       });
 

frontend/src/views/workbench/homePage/components/defectCount.vue

@@ -63,6 +63,7 @@
     workBugHandleByMe,
     workPlanLegacyBug,
   } from '@/api/modules/workbench';
+  import getVisualThemeColor from '@/config/chartTheme';
   import { useI18n } from '@/hooks/useI18n';
   import useAppStore from '@/store/modules/app';
 
@@ -150,7 +151,11 @@
         return {
           ...item,
           selected: true,
-          color: `${colorMapConfig[props.item.key][index]}`,
+          color: `${
+            colorMapConfig[props.item.key][index] !== 'initItemStyleColor'
+              ? colorMapConfig[props.item.key][index]
+              : getVisualThemeColor('initItemStyleColor')
+          }`,
         };
       });
 

frontend/src/views/workbench/homePage/components/ratioPie.vue

@@ -54,6 +54,7 @@
 
   import MsChart from '@/components/pure/chart/index.vue';
 
+  import getVisualThemeColor from '@/config/chartTheme';
   import { toolTipConfig } from '@/config/testPlan';
   import { useI18n } from '@/hooks/useI18n';
   import useOpenNewPage from '@/hooks/useOpenNewPage';
@@ -92,7 +93,7 @@
       subtext: '',
       subtextStyle: {
         fontSize: 14,
-        color: '#323233',
+        color: getVisualThemeColor('subtextStyleColor'),
         fontWeight: 'bold',
         lineHeight: 3,
       },
@@ -118,29 +119,11 @@
       },
       y: 'bottom',
       bottom: 'center',
-      formatter: (name: any) => {
+
-        return `{a|${name}}  {b|${addCommasToNumber(1022220)}}`;
-      },
       tooltip: {
         show: false,
       },
     },
-    textStyle: {
-      rich: {
-        a: {
-          width: 60,
-          color: '#959598', // 状态名称颜色
-          fontSize: 12,
-        },
-        b: {
-          width: 60,
-          color: '#783887',
-          fontSize: 16,
-          fontWeight: 'bold',
-          padding: [0, 0, 0, 16],
-        },
-      },
-    },
     series: {
       name: '',
       type: 'pie',
@@ -188,13 +171,27 @@
           itemStyle: {
             color: color[i],
             borderWidth: pieBorderWidth,
-            borderColor: '#ffffff',
+            borderColor: getVisualThemeColor('itemStyleBorderColor'),
           },
         };
       })
       .filter((e) => e.value !== 0);
 
-    options.value.series.data = hasDataLength > 0 ? seriesData : [];
+    options.value.series.data =
+      hasDataLength > 0
+        ? seriesData
+        : [
+            {
+              name: '',
+              value: 1,
+              tooltip: {
+                show: false,
+              },
+              itemStyle: {
+                color: getVisualThemeColor('initItemStyleColor'),
+              },
+            },
+          ];
     legend.value = [...props.data.slice(1)].map((e, i) => {
       return {
         ...e,
@@ -211,7 +208,18 @@
     if (props.hasPermission) {
       options.value.title.subtext = `${props.data[0].value ?? 0}%`;
     } else {
-      options.value.series.data = [];
+      options.value.series.data = [
+        {
+          name: '',
+          value: 1,
+          tooltip: {
+            show: false,
+          },
+          itemStyle: {
+            color: getVisualThemeColor('initItemStyleColor'),
+          },
+        },
+      ];
       options.value.title.subtext = `-%`;
     }
 

frontend/src/views/workbench/homePage/components/testPlanCount.vue

@@ -57,6 +57,7 @@
   import PassRatePie from './passRatePie.vue';
 
   import { workTestPlanRage } from '@/api/modules/workbench';
+  import getVisualThemeColor from '@/config/chartTheme';
   import { useI18n } from '@/hooks/useI18n';
   import useAppStore from '@/store/modules/app';
 
@@ -179,7 +180,11 @@
         return {
           ...item,
           selected: true,
-          color: `${colorMapConfig[props.item.key][index]}`,
+          color: `${
+            colorMapConfig[props.item.key][index] !== 'initItemStyleColor'
+              ? colorMapConfig[props.item.key][index]
+              : getVisualThemeColor('initItemStyleColor')
+          }`,
           percentValue: total > 0 ? `${((item.count / total) * 100).toFixed(2)}%` : '0.00%',
         };
       });

frontend/src/views/workbench/homePage/components/testPlanOverview.vue

@@ -97,6 +97,7 @@
   import ThresholdProgress from './thresholdProgress.vue';
 
   import { getWorkTestPlanListUrl, workTestPlanOverviewDetail } from '@/api/modules/workbench';
+  import getVisualThemeColor from '@/config/chartTheme';
   import { commonRatePieOptions } from '@/config/workbench';
   import { useI18n } from '@/hooks/useI18n';
   import useAppStore from '@/store/modules/app';
@@ -250,24 +251,40 @@
       {
         name: t('common.unExecute'),
         value: totalCount - executeCount,
-        color: '#EDEDF1',
+        color: getVisualThemeColor('initItemStyleColor'),
       },
     ];
 
     const pieBorderWidth = executeData.filter((e) => Number(e.value) > 0).length === 1 ? 0 : 1;
 
-    execOptions.value.series.data = executeData
+    const lastExecuteData = executeData
       .map((e) => {
         return {
           ...e,
           itemStyle: {
             borderWidth: pieBorderWidth,
-            borderColor: '#ffffff',
+            borderColor: getVisualThemeColor('itemStyleBorderColor'),
             color: e.color,
           },
         };
       })
       .filter((e) => e.value !== 0);
+
+    execOptions.value.series.data =
+      lastExecuteData.length > 0
+        ? lastExecuteData
+        : [
+            {
+              name: '',
+              value: 1,
+              tooltip: {
+                show: false,
+              },
+              itemStyle: {
+                color: getVisualThemeColor('initItemStyleColor'),
+              },
+            },
+          ];
   }
 
   const showSkeleton = ref(false);

frontend/src/views/workbench/homePage/index.vue

@@ -345,6 +345,13 @@
     initDefaultList();
   });
 
+  watch(
+    () => appStore.isDarkTheme,
+    () => {
+      handleRefresh();
+    }
+  );
+
   const time = ref({ ...timeForm.value });
 
   watch(

frontend/src/views/workbench/homePage/utils.ts

@@ -1,5 +1,6 @@
 import { cloneDeep } from 'lodash-es';
 
+import getVisualThemeColor from '@/config/chartTheme';
 import { toolTipConfig } from '@/config/testPlan';
 import { commonRatePieOptions, defaultValueMap } from '@/config/workbench';
 import { useI18n } from '@/hooks/useI18n';
@@ -68,16 +69,22 @@ export function getColorScheme(dataLength: number): string[] {
 
 // 饼图颜色配置
 export const colorMapConfig: Record<string, string[]> = {
-  [WorkCardEnum.CASE_COUNT]: ['#ED0303', '#FFA200', '#3370FF', '#D4D4D8'],
+  [WorkCardEnum.CASE_COUNT]: ['#ED0303', '#FFA200', '#3370FF', 'initItemStyleColor'],
   [WorkCardEnum.ASSOCIATE_CASE_COUNT]: ['#00C261', '#3370FF'],
-  [WorkCardEnum.REVIEW_CASE_COUNT]: ['#D4D4D8', '#3370FF', '#00C261', '#ED0303', '#FFA200'],
+  [WorkCardEnum.REVIEW_CASE_COUNT]: [
-  [WorkCardEnum.TEST_PLAN_COUNT]: ['#D4D4D8', '#3370FF', '#00C261', '#FF9964'],
+    getVisualThemeColor('initItemStyleColor'),
-  [WorkCardEnum.PLAN_LEGACY_BUG]: ['#FFA200', '#3370FF', '#D4D4D8', '#00C261', ...getColorScheme(13)],
+    '#3370FF',
-  [WorkCardEnum.BUG_COUNT]: ['#FFA200', '#3370FF', '#D4D4D8', '#00C261', ...getColorScheme(13)],
+    '#00C261',
-  [WorkCardEnum.HANDLE_BUG_BY_ME]: ['#FFA200', '#3370FF', '#D4D4D8', '#00C261', ...getColorScheme(13)],
+    '#ED0303',
-  [WorkCardEnum.CREATE_BY_ME]: ['#9441B1', '#3370FF', '#00C261', '#D4D4D8'],
+    '#FFA200',
+  ],
+  [WorkCardEnum.TEST_PLAN_COUNT]: ['initItemStyleColor', '#3370FF', '#00C261', '#FF9964'],
+  [WorkCardEnum.PLAN_LEGACY_BUG]: ['#FFA200', '#3370FF', 'initItemStyleColor', '#00C261', ...getColorScheme(13)],
+  [WorkCardEnum.BUG_COUNT]: ['#FFA200', '#3370FF', 'initItemStyleColor', '#00C261', ...getColorScheme(13)],
+  [WorkCardEnum.HANDLE_BUG_BY_ME]: ['#FFA200', '#3370FF', 'initItemStyleColor', '#00C261', ...getColorScheme(13)],
+  [WorkCardEnum.CREATE_BY_ME]: ['#9441B1', '#3370FF', '#00C261', 'initItemStyleColor'],
   [WorkCardEnum.API_COUNT]: ['#811FA3', '#00C261', '#3370FF', '#FFA1FF', '#EE50A3', '#FF9964', '#F9F871', '#C3DD40'],
-  [WorkCardEnum.CREATE_BUG_BY_ME]: ['#FFA200', '#3370FF', '#D4D4D8', '#00C261', ...getColorScheme(13)],
+  [WorkCardEnum.CREATE_BUG_BY_ME]: ['#FFA200', '#3370FF', 'initItemStyleColor', '#00C261', ...getColorScheme(13)],
 };
 
 // 柱状图
@@ -129,8 +136,10 @@ export function getCommonBarOptions(
             paramsList = params;
           }
           const html = `
-        <div class="w-[186px] ms-scroll-bar max-h-[236px] overflow-y-auto p-[16px] gap-[8px] flex flex-col">
+        <div class="w-[186px] rounded ms-scroll-bar max-h-[236px] overflow-y-auto p-[16px] gap-[8px] flex flex-col bg-[var(--color-text-fff)]">
-        <div class="font-medium max-w-[150px] one-line-text" style="color:#323233">${params[0].axisValueLabel}</div>
+        <div class="font-medium max-w-[150px] text-[var(--color-text-1)] one-line-text">
+        ${params[0].axisValueLabel}
+        </div>
         ${testPlanHtml}
         ${paramsList
           .map(
@@ -168,7 +177,7 @@ export function getCommonBarOptions(
       triggerEvent: true,
       axisLabel: {
         show: true,
-        color: '#646466',
+        color: getVisualThemeColor('xLabelColor'),
         width: 100,
         overflow: 'truncate',
         ellipsis: '...',
@@ -188,7 +197,7 @@ export function getCommonBarOptions(
       },
       axisLine: {
         lineStyle: {
-          color: '#EDEDF1',
+          color: getVisualThemeColor('splitLineColor'),
         },
       },
     },
@@ -201,6 +210,9 @@ export function getCommonBarOptions(
           show: false,
           onZero: false, // 禁止 Y 轴强制显示在 0 位置
         },
+        axisLabel: {
+          color: getVisualThemeColor('yLabelColor'),
+        },
         offset: 0, // 第一个 Y 轴默认位置
         nameTextStyle: {
           fontSize: 12,
@@ -211,7 +223,7 @@ export function getCommonBarOptions(
         splitLine: {
           show: true, // 控制是否显示水平线
           lineStyle: {
-            color: '#EDEDF1', // 水平线颜色
+            color: getVisualThemeColor('splitLineColor'), // 水平线颜色
             width: 1, // 水平线宽度
             type: 'dashed', // 水平线线型，可选 'solid'、'dashed'、'dotted'
           },
@@ -227,8 +239,8 @@ export function getCommonBarOptions(
       style: {
         text: '',
         fontSize: 14,
-        fill: '#959598',
+        fill: getVisualThemeColor('graphicFillColor'),
-        backgroundColor: '#F9F9FE',
+        backgroundColor: getVisualThemeColor('graphicBackgroundColor'),
         padding: [6, 16, 6, 16],
         borderRadius: 4,
       },
@@ -246,15 +258,16 @@ export function getCommonBarOptions(
       left: 'center',
       pageButtonItemGap: 5,
       pageButtonGap: 5,
-      pageIconColor: '#00000099',
+      pageIconColor: getVisualThemeColor('pageIconColor'),
-      pageIconInactiveColor: '#00000042',
+      pageIconInactiveColor: getVisualThemeColor('pageIconInactiveColor'),
       pageIconSize: [10, 8],
       pageTextStyle: {
-        color: '#00000099',
+        color: getVisualThemeColor('pageTextStyleColor'),
         fontSize: 12,
       },
       textStyle: {
         width: 150,
+        color: getVisualThemeColor('legendColor'),
         overflow: 'truncate',
         ellipsis: '...',
       },
@@ -338,7 +351,7 @@ export function getPieCharOptions() {
       subtext: '100111',
       subtextStyle: {
         fontSize: 20,
-        color: '#323233',
+        color: getVisualThemeColor('subtextStyleColor'),
         fontWeight: 'bold',
         align: 'center',
       },
@@ -415,7 +428,8 @@ export function handlePieData(
   const pieBorderWidth = hasDataLength === 1 ? 0 : 2;
 
   const lastData = lastStatusPercentList
-    .map((item, color) => ({
+    .map((item, color) => {
+      return {
         name: item.status,
         value: item.count,
         tooltip: {
@@ -424,14 +438,32 @@ export function handlePieData(
           show: !!hasPermission,
         },
         itemStyle: {
-        color: colorMapConfig[key][color],
+          color:
+            colorMapConfig[key][color] === 'initItemStyleColor'
+              ? getVisualThemeColor('initItemStyleColor')
+              : colorMapConfig[key][color],
           borderWidth: pieBorderWidth,
-        borderColor: '#ffffff',
+          borderColor: getVisualThemeColor('itemStyleBorderColor'),
         },
-    }))
+      };
+    })
     .filter((e) => e.value !== 0);
 
-  options.series.data = hasDataLength > 0 ? lastData : [];
+  options.series.data =
+    hasDataLength > 0
+      ? lastData
+      : [
+          {
+            name: '',
+            value: 1,
+            tooltip: {
+              show: false,
+            },
+            itemStyle: {
+              color: getVisualThemeColor('initItemStyleColor'),
+            },
+          },
+        ];
 
   // 计算总数和图例格式
   const tempObject: Record<string, any> = {};
@@ -445,7 +477,18 @@ export function handlePieData(
   options.title.subtext = addCommasToNumber(totalCount);
   if (!hasPermission) {
     options.title.subtext = '-';
-    options.series.data = [];
+    options.series.data = [
+      {
+        name: '',
+        value: 1,
+        tooltip: {
+          show: false,
+        },
+        itemStyle: {
+          color: getVisualThemeColor('initItemStyleColor'),
+        },
+      },
+    ];
   }
 
   return options;
@@ -600,6 +643,18 @@ export function handleUpdateTabPie(
   const valueKey = key.split('-')[1];
   const countList = list || [];
   let lastCountList: { value: number | string; label: string; name: string }[] = [];
+  const defaultValueMapConfig = defaultValueMap();
+
+  const emptyData = {
+    name: '',
+    value: 1,
+    tooltip: {
+      show: false,
+    },
+    itemStyle: {
+      color: getVisualThemeColor('initItemStyleColor'),
+    },
+  };
   if (hasPermission) {
     const pieBorderWidth = countList.slice(1).filter((e) => Number(e.count) > 0).length === 1 ? 0 : 1;
 
@@ -609,26 +664,29 @@ export function handleUpdateTabPie(
         label: item.name,
         name: item.name,
         itemStyle: {
-          color: defaultValueMap[typeKey][valueKey].color[i],
+          color: defaultValueMapConfig[typeKey][valueKey].color[i],
           borderWidth: pieBorderWidth,
-          borderColor: '#ffffff',
+          borderColor: getVisualThemeColor('itemStyleBorderColor'),
         },
       };
     });
 
-    options.series.data = lastCountList.every((e) => e.value === 0) ? [] : lastCountList.filter((e) => e.value !== 0);
+    options.series.data = lastCountList.every((e) => e.value === 0)
+      ? [emptyData]
+      : lastCountList.filter((e) => e.value !== 0);
 
     options.title.text = countList[0].name ?? '';
     options.title.subtext = `${countList[0].count ?? 0}%`;
   } else {
-    options.series.data = [];
+    options.series.data = [emptyData];
-    lastCountList = defaultValueMap[typeKey][valueKey].defaultList.map((e: any) => {
+
+    lastCountList = defaultValueMapConfig[typeKey][valueKey].defaultList.map((e: any) => {
       return {
         ...e,
         label: t(e.label),
       };
     });
-    options.title.text = t(defaultValueMap[typeKey][valueKey].defaultName);
+    options.title.text = t(defaultValueMapConfig[typeKey][valueKey].defaultName);
     options.title.subtext = '-%';
   }
 
@@ -700,12 +758,12 @@ export function getSeriesData(
           enterable: true,
           formatter(params: any) {
             const html = `
-                <div class="w-[186px] h-[50px] p-[16px] flex items-center justify-between">
+                <div class="w-[186px] h-[50px] p-[16px] flex items-center justify-between bg-[var(--color-text-fff)]">
                 <div class=" flex items-center">
                 <div class="mb-[2px] mr-[8px] h-[8px] w-[8px] rounded-sm bg-[${params.color}]" style="background:${
               params.color
             }"></div>
-                <div class="one-line-text max-w-[100px]"" style="color:#959598">${params.name}</div>
+                <div class="one-line-text max-w-[100px] text-[var(--color-text-2)]">${params.name}</div>
                 </div>
                 <div class="text-[var(--color-text-1)] font-semibold">${addCommasToNumber(params.value)}</div>
                 </div>
@@ -778,7 +836,7 @@ export function createCustomTooltip(chartDom: InstanceType<typeof VCharts>) {
 
     customTooltip.style.maxWidth = '300px';
     customTooltip.style.padding = '5px';
-    customTooltip.style.background = 'rgba(0, 0, 0, 0.75)';
+    customTooltip.style.background = 'var(--color-text-2)';
     customTooltip.style.color = 'var(--color-text-fff)';
     customTooltip.style.borderRadius = '4px';