From a4bac8a86a06a959ce1a7e31069f260115bd8b10 Mon Sep 17 00:00:00 2001 From: "xinxin.wu" Date: Tue, 17 Dec 2024 19:00:19 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=B7=A5=E4=BD=9C=E5=8F=B0):=20=E5=B7=A5?= =?UTF-8?q?=E4=BD=9C=E5=8F=B0=E5=8F=AF=E8=A7=86=E5=8C=96=E6=9A=97=E9=BB=91?= =?UTF-8?q?=E4=B8=BB=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/config/chartTheme.ts | 61 ++++++ frontend/src/config/workbench.ts | 173 +++++++++--------- .../components/apiAndScenarioCase.vue | 7 +- .../homePage/components/apiCount.vue | 7 +- .../homePage/components/caseCount.vue | 7 +- .../homePage/components/caseReviewedCount.vue | 7 +- .../homePage/components/defectCount.vue | 7 +- .../homePage/components/ratioPie.vue | 54 +++--- .../homePage/components/testPlanCount.vue | 7 +- .../homePage/components/testPlanOverview.vue | 23 ++- .../src/views/workbench/homePage/index.vue | 7 + .../src/views/workbench/homePage/utils.ts | 146 ++++++++++----- 12 files changed, 343 insertions(+), 163 deletions(-) create mode 100644 frontend/src/config/chartTheme.ts diff --git a/frontend/src/config/chartTheme.ts b/frontend/src/config/chartTheme.ts new file mode 100644 index 0000000000..2d5a53b61b --- /dev/null +++ b/frontend/src/config/chartTheme.ts @@ -0,0 +1,61 @@ +import useAppStore from '@/store/modules/app'; + +const appStore = useAppStore(); + +const colorThemeConfig: Record = { + 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; diff --git a/frontend/src/config/workbench.ts b/frontend/src/config/workbench.ts index 4fe5fc9663..eadd0dc6ea 100644 --- a/frontend/src/config/workbench.ts +++ b/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,99 +146,101 @@ export const defaultLegacy = [ }, ]; -export const defaultValueMap: Record = { - // 用例数量 - [WorkCardEnum.CASE_COUNT]: { - review: { - defaultList: cloneDeep(defaultCover), - color: ['#00C261', '#D4D4D8'], - defaultName: 'workbench.homePage.reviewRate', +export const defaultValueMap = (): Record => { + return { + // 用例数量 + [WorkCardEnum.CASE_COUNT]: { + review: { + defaultList: cloneDeep(defaultCover), + color: ['#00C261', getVisualThemeColor('initItemStyleColor')], + defaultName: 'workbench.homePage.reviewRate', + }, + pass: { + defaultList: cloneDeep(defaultPass), + color: ['#00C261', '#ED0303'], + defaultName: 'workbench.homePage.passRate', + }, }, - pass: { - defaultList: cloneDeep(defaultPass), - color: ['#00C261', '#ED0303'], - defaultName: 'workbench.homePage.passRate', + // 关联用例数量 + [WorkCardEnum.ASSOCIATE_CASE_COUNT]: { + cover: { + defaultList: cloneDeep(defaultCover), + color: ['#00C261', getVisualThemeColor('initItemStyleColor')], + defaultName: 'workbench.homePage.coverRate', + }, }, - }, - // 关联用例数量 - [WorkCardEnum.ASSOCIATE_CASE_COUNT]: { - cover: { - defaultList: cloneDeep(defaultCover), - color: ['#00C261', '#D4D4D8'], - defaultName: 'workbench.homePage.coverRate', + // 用例评审数 + [WorkCardEnum.REVIEW_CASE_COUNT]: { + cover: { + defaultList: cloneDeep(defaultCover), + color: ['#00C261', getVisualThemeColor('initItemStyleColor')], + defaultName: 'workbench.homePage.coverRate', + }, }, - }, - // 用例评审数 - [WorkCardEnum.REVIEW_CASE_COUNT]: { - cover: { - defaultList: cloneDeep(defaultCover), - color: ['#00C261', '#D4D4D8'], - defaultName: 'workbench.homePage.coverRate', + // 测试计划数 + [WorkCardEnum.TEST_PLAN_COUNT]: { + execute: { + defaultList: cloneDeep(defaultExecution), + color: [getVisualThemeColor('initItemStyleColor'), '#00C261'], + defaultName: 'workbench.homePage.executeRate', + }, + pass: { + defaultList: cloneDeep(defaultPass), + color: ['#00C261', getVisualThemeColor('initItemStyleColor')], + defaultName: 'workbench.homePage.passRate', + }, + complete: { + defaultList: cloneDeep(defaultComplete), + color: [getVisualThemeColor('initItemStyleColor'), '#3370FF', '#00C261', '#FF9964'], + defaultName: 'workbench.homePage.completeRate', + }, }, - }, - // 测试计划数 - [WorkCardEnum.TEST_PLAN_COUNT]: { - execute: { - defaultList: cloneDeep(defaultExecution), - color: ['#D4D4D8', '#00C261'], - defaultName: 'workbench.homePage.executeRate', + // 测试计划遗留缺陷 + [WorkCardEnum.PLAN_LEGACY_BUG]: { + legacy: { + defaultList: cloneDeep(defaultLegacy), + color: ['#00C261', getVisualThemeColor('initItemStyleColor')], + defaultName: 'workbench.homePage.legacyRate', + }, }, - pass: { - defaultList: cloneDeep(defaultPass), - color: ['#00C261', '#D4D4D8'], - defaultName: 'workbench.homePage.passRate', + // 缺陷数 + [WorkCardEnum.BUG_COUNT]: { + legacy: { + defaultList: cloneDeep(defaultLegacy), + color: ['#00C261', getVisualThemeColor('initItemStyleColor')], + defaultName: 'workbench.homePage.legacyRate', + }, }, - complete: { - defaultList: cloneDeep(defaultComplete), - color: ['#D4D4D8', '#3370FF', '#00C261', '#FF9964'], - defaultName: 'workbench.homePage.completeRate', + // 待我处理的缺陷 + [WorkCardEnum.HANDLE_BUG_BY_ME]: { + legacy: { + defaultList: cloneDeep(defaultLegacy), + color: ['#00C261', getVisualThemeColor('initItemStyleColor')], + defaultName: 'workbench.homePage.legacyRate', + }, }, - }, - // 测试计划遗留缺陷 - [WorkCardEnum.PLAN_LEGACY_BUG]: { - legacy: { - defaultList: cloneDeep(defaultLegacy), - color: ['#00C261', '#D4D4D8'], - defaultName: 'workbench.homePage.legacyRate', + // 接口数量 + [WorkCardEnum.API_COUNT]: { + cover: { + defaultList: cloneDeep(defaultCover), + color: ['#00C261', getVisualThemeColor('initItemStyleColor')], + defaultName: 'workbench.homePage.coverRate', + }, + complete: { + defaultList: cloneDeep(defaultComplete), + color: ['#00C261', '#3370FF', getVisualThemeColor('initItemStyleColor')], + defaultName: 'workbench.homePage.completeRate', + }, }, - }, - // 缺陷数 - [WorkCardEnum.BUG_COUNT]: { - legacy: { - defaultList: cloneDeep(defaultLegacy), - color: ['#00C261', '#D4D4D8'], - defaultName: 'workbench.homePage.legacyRate', + // 我创建的缺陷 + [WorkCardEnum.CREATE_BUG_BY_ME]: { + legacy: { + defaultList: cloneDeep(defaultLegacy), + color: ['#00C261', getVisualThemeColor('initItemStyleColor')], + defaultName: 'workbench.homePage.legacyRate', + }, }, - }, - // 待我处理的缺陷 - [WorkCardEnum.HANDLE_BUG_BY_ME]: { - legacy: { - defaultList: cloneDeep(defaultLegacy), - color: ['#00C261', '#D4D4D8'], - defaultName: 'workbench.homePage.legacyRate', - }, - }, - // 接口数量 - [WorkCardEnum.API_COUNT]: { - cover: { - defaultList: cloneDeep(defaultCover), - color: ['#00C261', '#D4D4D8'], - defaultName: 'workbench.homePage.coverRate', - }, - complete: { - defaultList: cloneDeep(defaultComplete), - color: ['#00C261', '#3370FF', '#D4D4D8'], - defaultName: 'workbench.homePage.completeRate', - }, - }, - // 我创建的缺陷 - [WorkCardEnum.CREATE_BUG_BY_ME]: { - legacy: { - defaultList: cloneDeep(defaultLegacy), - color: ['#00C261', '#D4D4D8'], - 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, diff --git a/frontend/src/views/workbench/homePage/components/apiAndScenarioCase.vue b/frontend/src/views/workbench/homePage/components/apiAndScenarioCase.vue index 33f33c5785..14543d462e 100644 --- a/frontend/src/views/workbench/homePage/components/apiAndScenarioCase.vue +++ b/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'), }; }); diff --git a/frontend/src/views/workbench/homePage/components/apiCount.vue b/frontend/src/views/workbench/homePage/components/apiCount.vue index 83055ce679..8f817dbd9e 100644 --- a/frontend/src/views/workbench/homePage/components/apiCount.vue +++ b/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') + }`, }; }); diff --git a/frontend/src/views/workbench/homePage/components/caseCount.vue b/frontend/src/views/workbench/homePage/components/caseCount.vue index aa5431d263..8d9fd892a1 100644 --- a/frontend/src/views/workbench/homePage/components/caseCount.vue +++ b/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; diff --git a/frontend/src/views/workbench/homePage/components/caseReviewedCount.vue b/frontend/src/views/workbench/homePage/components/caseReviewedCount.vue index 40fab3afa6..ea10c7ee2c 100644 --- a/frontend/src/views/workbench/homePage/components/caseReviewedCount.vue +++ b/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') + }`, }; }); diff --git a/frontend/src/views/workbench/homePage/components/defectCount.vue b/frontend/src/views/workbench/homePage/components/defectCount.vue index 93fc389e91..ae0c998c54 100644 --- a/frontend/src/views/workbench/homePage/components/defectCount.vue +++ b/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') + }`, }; }); diff --git a/frontend/src/views/workbench/homePage/components/ratioPie.vue b/frontend/src/views/workbench/homePage/components/ratioPie.vue index bef10ce9c7..d6f5340c17 100644 --- a/frontend/src/views/workbench/homePage/components/ratioPie.vue +++ b/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 = `-%`; } diff --git a/frontend/src/views/workbench/homePage/components/testPlanCount.vue b/frontend/src/views/workbench/homePage/components/testPlanCount.vue index e05ff2ffbf..aa3ed88593 100644 --- a/frontend/src/views/workbench/homePage/components/testPlanCount.vue +++ b/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%', }; }); diff --git a/frontend/src/views/workbench/homePage/components/testPlanOverview.vue b/frontend/src/views/workbench/homePage/components/testPlanOverview.vue index 97ced3a68f..36691afead 100644 --- a/frontend/src/views/workbench/homePage/components/testPlanOverview.vue +++ b/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); diff --git a/frontend/src/views/workbench/homePage/index.vue b/frontend/src/views/workbench/homePage/index.vue index 90c0105b2a..4a563bb152 100644 --- a/frontend/src/views/workbench/homePage/index.vue +++ b/frontend/src/views/workbench/homePage/index.vue @@ -345,6 +345,13 @@ initDefaultList(); }); + watch( + () => appStore.isDarkTheme, + () => { + handleRefresh(); + } + ); + const time = ref({ ...timeForm.value }); watch( diff --git a/frontend/src/views/workbench/homePage/utils.ts b/frontend/src/views/workbench/homePage/utils.ts index 42893990bd..ae3516a1af 100644 --- a/frontend/src/views/workbench/homePage/utils.ts +++ b/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 = { - [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.TEST_PLAN_COUNT]: ['#D4D4D8', '#3370FF', '#00C261', '#FF9964'], - [WorkCardEnum.PLAN_LEGACY_BUG]: ['#FFA200', '#3370FF', '#D4D4D8', '#00C261', ...getColorScheme(13)], - [WorkCardEnum.BUG_COUNT]: ['#FFA200', '#3370FF', '#D4D4D8', '#00C261', ...getColorScheme(13)], - [WorkCardEnum.HANDLE_BUG_BY_ME]: ['#FFA200', '#3370FF', '#D4D4D8', '#00C261', ...getColorScheme(13)], - [WorkCardEnum.CREATE_BY_ME]: ['#9441B1', '#3370FF', '#00C261', '#D4D4D8'], + [WorkCardEnum.REVIEW_CASE_COUNT]: [ + getVisualThemeColor('initItemStyleColor'), + '#3370FF', + '#00C261', + '#ED0303', + '#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 = ` -
-
${params[0].axisValueLabel}
+
+
+ ${params[0].axisValueLabel} +
${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', - backgroundColor: '#F9F9FE', + fill: getVisualThemeColor('graphicFillColor'), + 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', - pageIconInactiveColor: '#00000042', + pageIconColor: getVisualThemeColor('pageIconColor'), + 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,23 +428,42 @@ export function handlePieData( const pieBorderWidth = hasDataLength === 1 ? 0 : 2; const lastData = lastStatusPercentList - .map((item, color) => ({ - name: item.status, - value: item.count, - tooltip: { - ...toolTipConfig, - position: 'right', - show: !!hasPermission, - }, - itemStyle: { - color: colorMapConfig[key][color], - borderWidth: pieBorderWidth, - borderColor: '#ffffff', - }, - })) + .map((item, color) => { + return { + name: item.status, + value: item.count, + tooltip: { + ...toolTipConfig, + position: 'right', + show: !!hasPermission, + }, + itemStyle: { + color: + colorMapConfig[key][color] === 'initItemStyleColor' + ? getVisualThemeColor('initItemStyleColor') + : colorMapConfig[key][color], + borderWidth: pieBorderWidth, + 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 = {}; @@ -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 = []; - lastCountList = defaultValueMap[typeKey][valueKey].defaultList.map((e: any) => { + options.series.data = [emptyData]; + + 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 = ` -
+
-
${params.name}
+
${params.name}
${addCommasToNumber(params.value)}
@@ -778,7 +836,7 @@ export function createCustomTooltip(chartDom: InstanceType) { 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';