style(测试计划): 调整测试计划报告统计图卡片自适应换行样式问题

frontend/src/views/api-test/report/component/case/setReportChart.vue

@@ -35,15 +35,13 @@
 
     <div class="chart-legend grid flex-1 gap-y-3">
       <!-- 图例开始 -->
-      <div v-for="item of legendData" :key="item.value" class="chart-legend-item">
+      <div v-for="item of legendData" :key="item.value" class="grid grid-cols-3">
-        <div class="chart-flag">
+        <div class="flex flex-nowrap items-center">
           <div class="mb-[2px] mr-[4px] h-[6px] w-[6px] rounded-full" :class="item.class"></div>
-          <div class="mr-2 text-[var(--color-text-4)]">{{ item.label }}</div>
+          <div class="text-[var(--color-text-4)]">{{ item.label }}</div>
         </div>
-        <div class="count text-center font-medium">{{ item.count || 0 }}</div>
+        <div class="text-center">{{ item.count || 0 }}</div>
-        <div class="count text-right font-medium"
+        <div class="text-right">{{ item.rote || 0 }} <span v-if="String(item.rote) !== 'Calculating'"></span></div>
-          >{{ item.rote || 0 }} <span v-if="String(item.rote) !== 'Calculating'"></span
-        ></div>
       </div>
     </div>
   </div>
@@ -79,12 +77,14 @@
 <style scoped lang="less">
   .chart-legend {
     .chart-legend-item {
-      @apply grid grid-cols-3;
+      @apply flex items-center justify-between;
     }
     .chart-flag {
+      width: 80px;
       @apply flex flex-nowrap items-center;
       .count {
         color: var(--color-text-1);
+        @apply flex-1;
       }
     }
   }

frontend/src/views/test-plan/report/detail/component/planDetail.vue

@@ -39,8 +39,7 @@
     </template>
   </MsCard>
   <div class="analysis-wrapper">
-    <div class="analysis">
+    <div class="analysis min-w-[238px]">
-      <div>
       <div class="block-title">{{ t('report.detail.api.requestAnalysis') }}</div>
       <ul class="report-analysis">
         <li class="report-analysis-item">
@@ -85,21 +84,17 @@
         </li>
       </ul>
     </div>
-    </div>
+    <div class="analysis min-w-[410px]">
-    <div class="analysis mx-4">
-      <div>
       <div class="block-title">{{ t('report.detail.executionAnalysis') }}</div>
       <SetReportChart
-          size="160px"
+        size="150px"
         offset="top-[34%] right-0 bottom-0 left-0"
         :legend-data="legendData"
         :options="charOptions"
         :request-total="getIndicators(detail.caseTotal) || 0"
       />
     </div>
-    </div>
+    <div class="analysis min-w-[297px]">
-    <div class="analysis">
-      <div>
       <div class="block-title">{{ t('report.detail.useCaseAnalysis') }}</div>
       <div class="flex">
         <div class="w-[70%]">
@@ -108,7 +103,7 @@
           <SingleStatusProgress :detail="detail" status="block" />
           <SingleStatusProgress :detail="detail" status="error" />
         </div>
-          <div class="relative w-[30%]">
+        <div class="relative w-[30%] min-w-[120px]">
           <div class="charts absolute w-full text-center">
             <div class="text-[12px] !text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
             <a-popover position="bottom" content-class="response-popover-content">
@@ -123,14 +118,13 @@
               </template>
             </a-popover>
           </div>
-            <div class="flex h-full w-full items-center justify-center">
+          <div class="flex h-full w-full min-w-[120px] items-center justify-center">
             <MsChart width="120px" height="120px" :options="functionCaseOptions"
           /></div>
         </div>
       </div>
     </div>
   </div>
-  </div>
   <MsCard class="mb-[16px]" simple auto-height>
     <div class="font-medium">{{ t('report.detail.reportSummary') }}</div>
     <div
@@ -482,12 +476,12 @@
     @apply mb-4 font-medium;
   }
   .analysis-wrapper {
-    height: 250px;
+    @apply mb-4 flex flex-wrap items-center gap-4;
-    @apply mb-4 flex items-center;
     .analysis {
       padding: 24px;
+      height: 250px;
       box-shadow: 0 0 10px rgba(120 56 135/ 5%);
-      @apply h-full flex-1 rounded-xl bg-white;
+      @apply flex-1 rounded-xl bg-white;
       .report-analysis {
         .report-analysis-item {
           padding: 4px 8px;
@@ -507,7 +501,7 @@
         }
       }
       .charts {
-        top: 34%;
+        top: 36%;
         right: 0;
         bottom: 0;
         left: 0;