feat(接口测试): 报告样式调整&导入同步 mock

frontend/src/models/apiTest/management.ts

@@ -229,6 +229,7 @@ export interface ImportApiDefinitionRequest {
   coverModule: boolean; // 是否覆盖子目录
   coverData: boolean; // 是否覆盖数据
   syncCase: boolean; // 是否同步导入用例
+  syncMock: boolean; // 是否同步导入mock
   protocol: string;
   authSwitch?: boolean;
   authUsername?: string;

frontend/src/views/api-test/management/components/import.vue

@@ -100,6 +100,13 @@
             <a-switch v-model:model-value="importForm.syncCase" size="small" />
             {{ t('apiTestManagement.syncImportCase') }}
           </div>
+          <div
+            v-if="importForm.platform === RequestImportFormat.MeterSphere"
+            class="mb-[16px] flex items-center gap-[4px]"
+          >
+            <a-switch v-model:model-value="importForm.syncMock" size="small" />
+            {{ t('apiTestManagement.syncImportMock') }}
+          </div>
           <a-form-item
             v-if="importForm.platform === RequestImportFormat.SWAGGER"
             :label="t('apiTestManagement.importMethod')"
@@ -395,6 +402,7 @@
     moduleId: '',
     coverData: false,
     syncCase: true,
+    syncMock: true,
     coverModule: false,
     swaggerUrl: '',
     authSwitch: false,
@@ -480,6 +488,7 @@
             coverModule: importForm.value.coverModule,
             coverData: importForm.value.coverData,
             syncCase: importForm.value.syncCase,
+            syncMock: importForm.value.syncMock,
             protocol: importForm.value.protocol,
             moduleId: importForm.value.moduleId,
             authSwitch: importForm.value.authSwitch,
@@ -496,6 +505,7 @@
             coverModule: importForm.value.coverModule,
             coverData: importForm.value.coverData,
             syncCase: importForm.value.syncCase,
+            syncMock: importForm.value.syncMock,
             protocol: importForm.value.protocol,
             moduleId: importForm.value.moduleId,
             swaggerUrl: importForm.value.swaggerUrl,
@@ -528,6 +538,7 @@
         coverModule: importForm.value.coverModule,
         coverData: importForm.value.coverData,
         syncCase: importForm.value.syncCase,
+        syncMock: importForm.value.syncMock,
         protocol: importForm.value.protocol,
         moduleId: importForm.value.moduleId,
         swaggerUrl: importForm.value.swaggerUrl,

frontend/src/views/api-test/management/locale/en-US.ts

@@ -84,6 +84,7 @@ export default {
   'apiTestManagement.exportCase': 'Synchronous export use case',
   'apiTestManagement.exportMock': 'Export Mock Synchronously',
   'apiTestManagement.syncImportCase': 'Sync Import API Cases',
+  'apiTestManagement.syncImportMock': 'Sync Import API Mock',
   'apiTestManagement.syncUpdateDirectory': 'Sync Update API Directory',
   'apiTestManagement.importSwaggerFileTip1': 'Supports Swagger 3.0 version JSON files,',
   'apiTestManagement.importSwaggerFileTip2': '2.0 files can be converted to 3.0 on the official website',

frontend/src/views/api-test/management/locale/zh-CN.ts

@@ -80,6 +80,7 @@ export default {
   'apiTestManagement.exportCase': '同步导出用例',
   'apiTestManagement.exportMock': '同步导出 Mock',
   'apiTestManagement.syncImportCase': '同步导入接口用例',
+  'apiTestManagement.syncImportMock': '同步导入 Mock',
   'apiTestManagement.syncUpdateDirectory': '同步更新接口所在目录',
   'apiTestManagement.importSwaggerFileTip1': '支持 Swagger 3.0 版本的 json 文件，',
   'apiTestManagement.importSwaggerFileTip2': '2.0 文件可以在官网一键转换 3.0',

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

@@ -34,7 +34,7 @@
       <!-- </a-popover> -->
     </div>
 
-    <div class="chart-legend grid flex-1 gap-y-3">
+    <div class="chart-legend grid flex-1 gap-y-[12px]">
       <!-- 图例开始 -->
       <div v-for="item of legendData" :key="item.value" class="grid grid-cols-3">
         <div class="flex flex-nowrap items-center">

frontend/src/views/api-test/report/component/caseReportCom.vue

@@ -4,10 +4,11 @@
     <ReportDetailHeader :detail="detail" show-type="CASE" />
     <!-- 报告参数结束 -->
     <!-- 报告分析开始 -->
-    <div class="analyze mb-1">
+    <div class="analyze">
       <!-- 请求分析 -->
-      <div class="request-analyze min-h-[110px]">
+      <div class="block-title">{{ t('report.detail.api.requestAnalysis') }}</div>
-        <div class="block-title mb-4">{{ t('report.detail.api.requestAnalysis') }}</div>
+      <div class="flex justify-between">
+        <div class="request-analyze">
           <SetReportChart
             :legend-data="legendData"
             :options="charOptions"
@@ -15,9 +16,9 @@
           />
         </div>
         <!-- 耗时分析 -->
-      <div class="time-analyze">
+        <div class="time-analyze gap-[12px]">
-        <div class="time-card mb-2 mt-[16px] h-[40px] flex-1 gap-4">
+          <div class="time-card flex-1 gap-[12px]">
-          <div class="time-card-item flex h-full">
+            <div class="time-card-item">
               <MsIcon type="icon-icon_time_outlined" class="mr-[4px] text-[var(--color-text-4)]" size="16" />
               <span class="time-card-item-title">{{ t('report.detail.api.totalTime') }}</span>
               <a-popover position="bottom" content-class="response-popover-content">
@@ -38,13 +39,13 @@
               <MsIcon type="icon-icon_time_outlined" class="mr-[4px] text-[var(--color-text-4)]" size="16" />
               <span class="time-card-item-title"> {{ t('report.detail.api.requestTotalTime') }}</span>
               <a-popover position="bottom" content-class="response-popover-content">
-              <div class="flex items-center">
+                <div class="flex items-end">
-                <div class="count">{{
+                  <div class="count">
-                  detail.requestDuration !== null ? formatDuration(detail.requestDuration).split('-')[0] : '0'
+                    {{ detail.requestDuration !== null ? formatDuration(detail.requestDuration).split('-')[0] : '0' }}
-                }}</div
+                  </div>
-                ><div class="time-card-item-title">{{
+                  <div class="time-card-item-title">
-                  detail.requestDuration !== null ? formatDuration(detail.requestDuration).split('-')[1] : 'ms'
+                    {{ detail.requestDuration !== null ? formatDuration(detail.requestDuration).split('-')[1] : 'ms' }}
-                }}</div>
+                  </div>
                 </div>
 
                 <template #content>
@@ -87,7 +88,9 @@
                         </div>
                         <div>
                           <span>{{ getIndicators(getRequestEacuteCount) }}</span>
-                        <span class="mx-1 text-[var(--color-text-4)]">/ {{ getIndicators(getRequestTotalCount) }}</span>
+                          <span class="mx-1 text-[var(--color-text-4)]"
+                            >/ {{ getIndicators(getRequestTotalCount) }}</span
+                          >
                         </div>
                       </div>
                     </div>
@@ -154,6 +157,7 @@
           </div>
         </div>
       </div>
+    </div>
     <!-- 报告步骤分析结束 -->
     <!-- 报告明细开始 -->
     <div class="report-info">
@@ -417,11 +421,12 @@
       @apply mb-4 bg-white;
     }
     .analyze {
-      height: 196px;
+      @apply mb-4  bg-white;
+
+      padding: 16px;
       border-radius: 4px;
-      @apply mb-4 flex justify-between  bg-white;
       .request-analyze {
-        @apply flex h-full flex-1 flex-col p-4;
+        @apply flex h-full flex-1 flex-col;
         .chart-legend {
           .chart-legend-item {
             @apply grid grid-cols-3 gap-2;
@@ -435,28 +440,36 @@
         }
       }
       .time-analyze {
-        @apply flex h-full flex-1 flex-col p-4;
+        @apply flex h-full flex-1 flex-col px-4;
         .time-card {
           @apply flex items-center justify-between;
           .time-card-item {
+            @apply flex flex-1 flex-grow items-end;
+
+            padding: 9px 12px;
             border-radius: 6px;
             background: var(--color-text-n9);
-            @apply mt-4 flex flex-1 flex-grow items-center px-4;
             .time-card-item-title {
               color: var(--color-text-4);
+              line-height: 16px;
             }
             .count {
-              font-size: 18px;
               @apply mx-2 font-medium;
+
+              line-height: 22px;
+              font-size: 18px;
             }
           }
           .time-card-item-rote {
+            @apply flex flex-1 flex-grow flex-col;
+
+            padding: 9px 12px;
             border-radius: 6px;
             background: var(--color-text-n9);
-            @apply mt-4 flex flex-1 flex-grow flex-col p-4;
             .time-card-item-rote-title {
+              @apply mb-2 flex items-center;
+
               color: var(--color-text-4);
-              @apply mb-2;
             }
             .count {
               font-size: 18px;
@@ -473,7 +486,9 @@
     }
   }
   .block-title {
-    font-size: 14px;
     @apply font-medium;
+
+    margin-bottom: 16px;
+    font-size: 14px;
   }
 </style>

frontend/src/views/api-test/report/component/scenarioCom.vue

@@ -48,6 +48,7 @@
         :active-type="activeTab"
         :report-detail="detail || []"
         :is-export="props.isExport"
+        class="p-[16px]"
       />
     </div>
     <!-- 报告明细结束 -->

frontend/src/views/api-test/report/component/step/stepTree.vue

@@ -382,7 +382,7 @@
     .arco-tree-node-title {
       @apply !cursor-pointer bg-white;
 
-      padding: 12px 4px;
+      padding: 8px 4px;
       &:hover {
         background-color: white !important;
       }

frontend/src/views/api-test/report/component/tiledList.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tiled-wrap p-4"
+    class="tiled-wrap"
     :class="{
       'border border-solid border-[var(--color-text-n8)]': props.showType === 'API',
       '!max-h-max': props.isExport,