From 4d3b9f3c5c477cea55cf8c92ad0abde8e1c4d174 Mon Sep 17 00:00:00 2001
From: "xinxin.wu" <xinxin.wu@fit2cloud.com>
Date: Wed, 18 Dec 2024 16:26:55 +0800
Subject: [PATCH] =?UTF-8?q?style(=E6=B5=8B=E8=AF=95=E8=AE=A1=E5=88=92):=20?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E8=AE=A1=E5=88=92=E6=8A=A5=E5=91=8A=E6=9A=97?=
 =?UTF-8?q?=E9=BB=91=E6=A8=A1=E5=BC=8F=E6=A0=B7=E5=BC=8Fstyle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/testPlanExecuteResultDrawer.vue |  2 +-
 .../report/detail/component/config.vue        |  6 +--
 .../component/system-card/executeAnalysis.vue | 32 +++++++++++---
 .../report/detail/component/viewReport.vue    | 42 +++++++++++++++----
 frontend/src/views/test-plan/report/utils.ts  |  9 ----
 5 files changed, 66 insertions(+), 25 deletions(-)

diff --git a/frontend/src/views/taskCenter/component/testPlanExecuteResultDrawer.vue b/frontend/src/views/taskCenter/component/testPlanExecuteResultDrawer.vue
index fe0bab972d..a98c9408f5 100644
--- a/frontend/src/views/taskCenter/component/testPlanExecuteResultDrawer.vue
+++ b/frontend/src/views/taskCenter/component/testPlanExecuteResultDrawer.vue
@@ -33,7 +33,7 @@
         </SystemTrigger>
         <SystemTrigger :is-preview="true">
           <div class="analysis min-w-[330px]">
-            <ExecuteAnalysis :detail="detail" hide-title no-block />
+            <ExecuteAnalysis :detail="detail" hide-title no-block :animation="true" />
           </div>
           <template #content>
             <div class="arco-table-filters-content px-[8px] py-[4px]">
diff --git a/frontend/src/views/test-plan/report/detail/component/config.vue b/frontend/src/views/test-plan/report/detail/component/config.vue
index f2f7ce1044..04623eaa08 100644
--- a/frontend/src/views/test-plan/report/detail/component/config.vue
+++ b/frontend/src/views/test-plan/report/detail/component/config.vue
@@ -68,9 +68,9 @@
           >
             <a-tooltip :mouse-enter-delay="300" :content="t(item.label)" position="top">
               <div class="flex items-center justify-between">
-                <div :class="`${getLabelClass(item)} custom-card-item-label one-line-text max-w-[calc(100%-14px)]`">{{
-                  t(item.label)
-                }}</div>
+                <div :class="`${getLabelClass(item)} custom-card-item-label one-line-text max-w-[calc(100%-14px)]`">
+                  {{ t(item.label) }}
+                </div>
                 <icon-close
                   v-if="item.type !== FieldTypeEnum.SYSTEM"
                   :style="{ 'font-size': '14px' }"
diff --git a/frontend/src/views/test-plan/report/detail/component/system-card/executeAnalysis.vue b/frontend/src/views/test-plan/report/detail/component/system-card/executeAnalysis.vue
index c9ad43eb24..34b99f3dea 100644
--- a/frontend/src/views/test-plan/report/detail/component/system-card/executeAnalysis.vue
+++ b/frontend/src/views/test-plan/report/detail/component/system-card/executeAnalysis.vue
@@ -13,8 +13,10 @@
 
   import SetReportChart from '@/views/api-test/report/component/case/setReportChart.vue';
 
+  import getVisualThemeColor from '@/config/chartTheme';
   import { commonConfig, seriesConfig, statusConfig, toolTipConfig } from '@/config/testPlan';
   import { useI18n } from '@/hooks/useI18n';
+  import { useAppStore } from '@/store';
 
   import type { LegendData } from '@/models/apiTest/report';
   import type { PlanReportDetail, StatusListType } from '@/models/testPlan/testPlanReport';
@@ -23,6 +25,7 @@
 
   const { t } = useI18n();
 
+  const appStore = useAppStore();
   const props = defineProps<{
     detail: PlanReportDetail;
     hideTitle?: boolean;
@@ -33,7 +36,7 @@
   const legendData = ref<LegendData[]>([]);
 
   // 执行分析
-  const executeCharOptions = ref({
+  const executeCharOptions = ref<Record<string, any>>({
     ...commonConfig,
     tooltip: {
       ...toolTipConfig,
@@ -88,19 +91,38 @@
   function initExecuteOptions() {
     const pieBorderWidth =
       statusConfig.filter((e) => Number(props.detail.executeCount[e.value]) > 0).length === 1 ? 0 : 2;
-    executeCharOptions.value.series.data = statusConfig
+
+    const lastExecuteData: Record<string, any>[] = statusConfig
       .filter((item) => props.detail.executeCount[item.value] > 0)
       .map((item: StatusListType) => {
+        const color = item.color === '#D4D4D8' ? getVisualThemeColor('initItemStyleColor') : item.color;
+        const itemColor = props.animation ? color : item.color;
+
         return {
           value: props.detail.executeCount[item.value] || 0,
           name: t(item.label),
           itemStyle: {
-            color: item.color,
+            color: itemColor,
             borderWidth: pieBorderWidth,
-            borderColor: '#ffffff',
+            borderColor: props.animation ? getVisualThemeColor('itemStyleBorderColor') : '#ffffff',
           },
         };
       });
+
+    executeCharOptions.value.series.data = lastExecuteData.length
+      ? lastExecuteData
+      : [
+          {
+            value: 1,
+            tooltip: {
+              show: false,
+            },
+            itemStyle: {
+              color: props.animation ? getVisualThemeColor('initItemStyleColor') : '#D4D4D8',
+            },
+          },
+        ];
+
     legendData.value = statusConfig.map((item: StatusListType) => {
       const rate = (props.detail.executeCount[item.value] / props.detail.caseTotal) * 100;
       return {
@@ -122,7 +144,7 @@
   });
 
   watchEffect(() => {
-    if (Object.keys(props.detail).length > 0) {
+    if (Object.keys(props.detail).length > 0 || appStore.isDarkTheme) {
       initExecuteOptions();
     }
   });
diff --git a/frontend/src/views/test-plan/report/detail/component/viewReport.vue b/frontend/src/views/test-plan/report/detail/component/viewReport.vue
index 950d6de3d9..72facd741d 100644
--- a/frontend/src/views/test-plan/report/detail/component/viewReport.vue
+++ b/frontend/src/views/test-plan/report/detail/component/viewReport.vue
@@ -18,7 +18,7 @@
     </SystemTrigger>
     <SystemTrigger :is-preview="props.isPreview">
       <div :class="`${getAnalysisHover} analysis min-w-[410px]`">
-        <ExecuteAnalysis :detail="detail" />
+        <ExecuteAnalysis :detail="detail" :animation="true" />
       </div>
       <template #content>
         <div class="arco-table-filters-content px-[8px] py-[4px]">{{ t('report.detail.systemInternalTooltip') }}</div>
@@ -220,6 +220,7 @@
   import TestSetTableIndex from '@/views/test-plan/report/detail/component/system-card/testTableIndex.vue';
 
   import { getReportLayout, updateReportDetail } from '@/api/modules/test-plan/report';
+  import getVisualThemeColor from '@/config/chartTheme';
   import {
     commonConfig,
     defaultCount,
@@ -230,6 +231,7 @@
   } from '@/config/testPlan';
   import { useI18n } from '@/hooks/useI18n';
   import useLeaveUnSaveTip from '@/hooks/useLeaveUnSaveTip';
+  import { useAppStore } from '@/store';
   import { addCommasToNumber } from '@/utils';
 
   import { UpdateReportDetailParams } from '@/models/testPlan/report';
@@ -248,6 +250,8 @@
 
   const { t } = useI18n();
 
+  const appStore = useAppStore();
+
   const route = useRoute();
   const props = defineProps<{
     detailInfo: PlanReportDetail;
@@ -296,7 +300,7 @@
   const shareId = ref<string>(route.query.shareId as string);
 
   // 功能用例分析
-  const functionCaseOptions = ref({
+  const functionCaseOptions = ref<Record<string, any>>({
     ...commonConfig,
     tooltip: {
       ...toolTipConfig,
@@ -315,7 +319,7 @@
     },
   });
   // 接口用例分析
-  const apiCaseOptions = ref({
+  const apiCaseOptions = ref<Record<string, any>>({
     ...commonConfig,
     tooltip: {
       ...toolTipConfig,
@@ -334,7 +338,7 @@
     },
   });
   // 场景用例分析
-  const scenarioCaseOptions = ref({
+  const scenarioCaseOptions = ref<Record<string, any>>({
     ...commonConfig,
     tooltip: {
       ...toolTipConfig,
@@ -360,19 +364,35 @@
     const { success } = caseCountDetail;
     const valueList = success ? statusConfig : passRateData;
     const chartBorderWidth = valueList.filter((e) => Number(caseCountDetail[e.value]) > 0).length === 1 ? 0 : 2;
-    return valueList
+
+    const lastValueList = valueList
       .filter((item) => caseCountDetail[item.value] > 0)
       .map((item: StatusListType) => {
+        const color = item.color === '#D4D4D8' ? getVisualThemeColor('initItemStyleColor') : item.color;
         return {
           value: caseCountDetail[item.value] || 0,
           name: t(item.label),
           itemStyle: {
-            color: success ? item.color : '#D4D4D8',
+            color: success ? color : getVisualThemeColor('initItemStyleColor'),
             borderWidth: chartBorderWidth,
-            borderColor: '#ffffff',
+            borderColor: getVisualThemeColor('itemStyleBorderColor'),
           },
         };
       });
+
+    return lastValueList.length
+      ? lastValueList
+      : [
+          {
+            value: 1,
+            tooltip: {
+              show: false,
+            },
+            itemStyle: {
+              color: getVisualThemeColor('initItemStyleColor'),
+            },
+          },
+        ];
   }
 
   // 初始化图表
@@ -664,6 +684,14 @@
       handleUpdateReportDetail(newCurrentItem);
     }
   }
+
+  watch(
+    () => appStore.isDarkTheme,
+    () => {
+      initOptionsData();
+    }
+  );
+
   defineExpose({
     setIsSave,
   });
diff --git a/frontend/src/views/test-plan/report/utils.ts b/frontend/src/views/test-plan/report/utils.ts
index 9b18f0c2ae..76557ad86b 100644
--- a/frontend/src/views/test-plan/report/utils.ts
+++ b/frontend/src/views/test-plan/report/utils.ts
@@ -1,13 +1,4 @@
-import { TableSortable } from '@arco-design/web-vue';
-import { cloneDeep } from 'lodash-es';
-
-import type { MsTableColumn } from '@/components/pure/ms-table/type';
-
 import type { countDetail } from '@/models/testPlan/testPlanReport';
-import { FilterSlotNameEnum } from '@/enums/tableFilterEnum';
-
-import { casePriorityOptions, lastReportStatusListOptions } from '@/views/api-test/components/config';
-import { executionResultMap } from '@/views/case-management/caseManagementFeature/components/utils';
 
 export function getSummaryDetail(detailCount: countDetail) {
   if (detailCount) {