From 0a037a2f3bbb4c846a62d7007a6ac76744f50fd5 Mon Sep 17 00:00:00 2001
From: "xinxin.wu" <xinxin.wu@fit2cloud.com>
Date: Mon, 25 Nov 2024 18:07:32 +0800
Subject: [PATCH] =?UTF-8?q?style(=E5=B7=A5=E4=BD=9C=E5=8F=B0):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E5=B7=A5=E4=BD=9C=E5=8F=B0=E5=8D=A1=E7=89=87=E5=8F=96?=
 =?UTF-8?q?=E6=B6=88=E5=88=87=E6=8D=A2=E6=A8=A1=E5=BC=8F=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6=E8=87=AA=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../homePage/components/apiCount.vue          | 13 ++++++----
 .../homePage/components/caseCount.vue         | 26 +++++++++----------
 .../homePage/components/defectMemberBar.vue   |  2 +-
 .../homePage/components/overview.vue          |  2 +-
 .../homePage/components/overviewMember.vue    |  2 +-
 .../homePage/components/passRatePie.vue       |  4 +--
 .../homePage/components/testPlanCount.vue     | 22 +++++++---------
 .../src/views/workbench/homePage/index.vue    |  2 +-
 8 files changed, 35 insertions(+), 38 deletions(-)

diff --git a/frontend/src/views/workbench/homePage/components/apiCount.vue b/frontend/src/views/workbench/homePage/components/apiCount.vue
index 126b56ade0..22c0bcb946 100644
--- a/frontend/src/views/workbench/homePage/components/apiCount.vue
+++ b/frontend/src/views/workbench/homePage/components/apiCount.vue
@@ -22,8 +22,12 @@
         </div>
       </div>
       <div class="my-[16px]">
-        <TabCard :content-tab-list="apiCountTabList" not-has-padding hidden-border min-width="296px">
-          <template #item="{ item: tabItem }">
+        <div class="flex gap-[16px]">
+          <div
+            v-for="tabItem of apiCountTabList"
+            :key="tabItem.label"
+            :class="`flex-1  ${tabItem.value === 'complete' ? 'min-w-[300px]' : 'min-w-[197px]'}`"
+          >
             <PassRatePie
               :tooltip-text="tabItem.tooltip"
               :options="tabItem.options"
@@ -32,8 +36,8 @@
               :has-permission="hasPermission"
               :value-list="tabItem.valueList"
             />
-          </template>
-        </TabCard>
+          </div>
+        </div>
         <div class="h-[148px]">
           <MsChart :options="apiCountOptions" />
         </div>
@@ -52,7 +56,6 @@
   import MsSelect from '@/components/business/ms-select';
   import CardSkeleton from './cardSkeleton.vue';
   import PassRatePie from './passRatePie.vue';
-  import TabCard from './tabCard.vue';
 
   import { workApiCountCoverRage, workApiCountDetail } from '@/api/modules/workbench';
   import { useI18n } from '@/hooks/useI18n';
diff --git a/frontend/src/views/workbench/homePage/components/caseCount.vue b/frontend/src/views/workbench/homePage/components/caseCount.vue
index e40e6ea896..55cfb948a1 100644
--- a/frontend/src/views/workbench/homePage/components/caseCount.vue
+++ b/frontend/src/views/workbench/homePage/components/caseCount.vue
@@ -22,19 +22,18 @@
         </div>
       </div>
       <div class="mt-[16px]">
-        <TabCard :content-tab-list="caseCountTabList" not-has-padding hidden-border min-width="270px">
-          <template #item="{ item: tabItem }">
-            <div class="w-full">
-              <PassRatePie
-                :options="tabItem.options"
-                :tooltip-text="tabItem.tooltip"
-                :size="60"
-                :value-list="tabItem.valueList"
-                :has-permission="hasPermission"
-              />
-            </div>
-          </template>
-        </TabCard>
+        <div class="flex gap-[16px]">
+          <div v-for="tabItem of caseCountTabList" :key="tabItem.label" class="flex-1">
+            <PassRatePie
+              :options="tabItem.options"
+              :tooltip-text="tabItem.tooltip"
+              :size="60"
+              :value-list="tabItem.valueList"
+              :has-permission="hasPermission"
+            />
+          </div>
+        </div>
+
         <div class="h-[148px]">
           <MsChart :options="caseCountOptions" />
         </div>
@@ -53,7 +52,6 @@
   import MsSelect from '@/components/business/ms-select';
   import CardSkeleton from './cardSkeleton.vue';
   import PassRatePie from './passRatePie.vue';
-  import TabCard from './tabCard.vue';
 
   import { workCaseCountDetail } from '@/api/modules/workbench';
   import { useI18n } from '@/hooks/useI18n';
diff --git a/frontend/src/views/workbench/homePage/components/defectMemberBar.vue b/frontend/src/views/workbench/homePage/components/defectMemberBar.vue
index a88d615e6e..f1771bcb5b 100644
--- a/frontend/src/views/workbench/homePage/components/defectMemberBar.vue
+++ b/frontend/src/views/workbench/homePage/components/defectMemberBar.vue
@@ -26,7 +26,7 @@
             allow-clear
             allow-search
             :search-keys="['label']"
-            class="!w-[200px]"
+            class="!w-[220px]"
             :prefix="t('workbench.homePage.staff')"
             :multiple="true"
             :has-all-select="true"
diff --git a/frontend/src/views/workbench/homePage/components/overview.vue b/frontend/src/views/workbench/homePage/components/overview.vue
index 8e7ff1f1e4..7b516a579a 100644
--- a/frontend/src/views/workbench/homePage/components/overview.vue
+++ b/frontend/src/views/workbench/homePage/components/overview.vue
@@ -15,7 +15,7 @@
             value-key="id"
             label-key="name"
             :search-keys="['name']"
-            class="!w-[200px]"
+            class="!w-[230px]"
             :prefix="t('workbench.homePage.project')"
             :multiple="true"
             :has-all-select="true"
diff --git a/frontend/src/views/workbench/homePage/components/overviewMember.vue b/frontend/src/views/workbench/homePage/components/overviewMember.vue
index f50e94b106..b79ccfd3dd 100644
--- a/frontend/src/views/workbench/homePage/components/overviewMember.vue
+++ b/frontend/src/views/workbench/homePage/components/overviewMember.vue
@@ -29,7 +29,7 @@
             value-key="value"
             label-key="label"
             :search-keys="['label']"
-            class="!w-[200px]"
+            class="!w-[220px]"
             :prefix="t('workbench.homePage.staff')"
             :multiple="true"
             :has-all-select="true"
diff --git a/frontend/src/views/workbench/homePage/components/passRatePie.vue b/frontend/src/views/workbench/homePage/components/passRatePie.vue
index 3eaf43b65e..bd2a95b232 100644
--- a/frontend/src/views/workbench/homePage/components/passRatePie.vue
+++ b/frontend/src/views/workbench/homePage/components/passRatePie.vue
@@ -13,7 +13,7 @@
     </div>
     <div class="pass-rate-title flex-1">
       <div v-for="item of props.valueList" :key="item.label" class="flex-1">
-        <div class="mb-[8px] text-[var(--color-text-4)]">{{ item.label }}</div>
+        <div class="one-line-text mb-[8px] text-[var(--color-text-4)]">{{ item.label }}</div>
         <div class="pass-rate-count">{{ hasPermission ? addCommasToNumber(item.value as number) : '-' }}</div>
       </div>
     </div>
@@ -21,8 +21,6 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
-
   import MsChart from '@/components/pure/chart/index.vue';
 
   import { useI18n } from '@/hooks/useI18n';
diff --git a/frontend/src/views/workbench/homePage/components/testPlanCount.vue b/frontend/src/views/workbench/homePage/components/testPlanCount.vue
index 0dde77d863..4c49630587 100644
--- a/frontend/src/views/workbench/homePage/components/testPlanCount.vue
+++ b/frontend/src/views/workbench/homePage/components/testPlanCount.vue
@@ -22,18 +22,16 @@
         </div>
       </div>
       <div class="mt-[16px]">
-        <TabCard :content-tab-list="testPlanTabList" not-has-padding hidden-border min-width="290px">
-          <template #item="{ item: tabItem }">
-            <div class="w-full">
-              <PassRatePie
-                :has-permission="hasPermission"
-                :options="tabItem.options"
-                :size="60"
-                :value-list="tabItem.valueList"
-              />
-            </div>
-          </template>
-        </TabCard>
+        <div class="flex gap-[16px]">
+          <div v-for="tabItem of testPlanTabList" :key="tabItem.label" class="flex-1">
+            <PassRatePie
+              :has-permission="hasPermission"
+              :options="tabItem.options"
+              :size="60"
+              :value-list="tabItem.valueList"
+            />
+          </div>
+        </div>
         <div class="h-[148px]">
           <MsChart :options="testPlanCountOptions" />
         </div>
diff --git a/frontend/src/views/workbench/homePage/index.vue b/frontend/src/views/workbench/homePage/index.vue
index dbc8df21ef..85f0f2eb6b 100644
--- a/frontend/src/views/workbench/homePage/index.vue
+++ b/frontend/src/views/workbench/homePage/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="`work-bench-content ${defaultWorkList.length ? 'min-w-[1000px]' : ''}`">
+  <div :class="`work-bench-content ${defaultWorkList.length ? 'min-w-[1200px]' : ''}`">
     <div class="header-setting pb-[4px]">
       <div
         class="setting sticky top-0 z-[999] mb-[-16px] flex items-center justify-between bg-[var(--color-bg-3)] pb-[16px]"