fix(测试计划): 合并接口用例和场景用例明细table&任务中心style修改

frontend/src/views/project-management/taskCenter/component/taskCom.vue

@@ -4,7 +4,7 @@
       <div
         v-for="item of menuTab"
         :key="item.value"
-        :class="`${activeTask === item.value ? 'active' : ''} item flex items-center`"
+        :class="`${activeTask === item.value ? 'active' : ''} item`"
         @click="toggleTask(item.value)"
       >
         <div class="mr-2">
@@ -199,6 +199,8 @@
       height: 100%;
       border-right: 1px solid var(--color-text-n8);
       .item {
+        display: flex;
+        align-items: center;
         padding: 0 20px;
         height: 38px;
         font-size: 14px;

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

@@ -24,7 +24,12 @@
       /> -->
     </template>
   </MsBaseTable>
-  <CaseAndScenarioReportDrawer v-model:visible="reportVisible" :report-id="apiReportId" do-not-show-share />
+  <CaseAndScenarioReportDrawer
+    v-model:visible="reportVisible"
+    :is-scenario="props.activeTab === 'scenarioCase'"
+    :report-id="apiReportId"
+    do-not-show-share
+  />
 </template>
 
 <script setup lang="ts">
@@ -36,7 +41,7 @@
   import ExecuteResult from '@/components/business/ms-case-associate/executeResult.vue';
   import CaseAndScenarioReportDrawer from '@/views/api-test/components/caseAndScenarioReportDrawer.vue';
 
-  import { getApiPage, getShareApiPage } from '@/api/modules/test-plan/report';
+  import { getApiPage, getScenarioPage, getShareApiPage, getShareScenarioPage } from '@/api/modules/test-plan/report';
 
   import { ApiOrScenarioCaseItem } from '@/models/testPlan/report';
   import { LastExecuteResults } from '@/enums/caseEnum';
@@ -49,6 +54,7 @@
   const props = defineProps<{
     reportId: string;
     shareId?: string;
+    activeTab: string;
   }>();
 
   const columns: MsTableColumn = [
@@ -121,6 +127,9 @@
     },
   ];
   const reportApiList = () => {
+    if (props.activeTab === 'scenarioCase') {
+      return !props.shareId ? getShareScenarioPage : getScenarioPage;
+    }
     return !props.shareId ? getShareApiPage : getApiPage;
   };
   const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(
@@ -159,4 +168,11 @@
     reportVisible.value = true;
     apiReportId.value = record.reportId;
   }
+
+  watch(
+    () => props.activeTab,
+    () => {
+      loadCaseList();
+    }
+  );
 </script>

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

@@ -131,8 +131,12 @@
     />
     <BugTable v-if="activeTab === 'bug'" :report-id="detail.id" :share-id="shareId" />
     <FeatureCaseTable v-if="activeTab === 'featureCase'" :report-id="detail.id" :share-id="shareId" />
-    <ApiCaseTable v-if="activeTab === 'apiCase'" :report-id="detail.id" :share-id="shareId" />
-    <ScenarioCaseTable v-if="activeTab === 'scenarioCase'" :report-id="detail.id" :share-id="shareId" />
+    <ApiAndScenarioTable
+      v-if="activeTab === 'apiCase'"
+      :report-id="detail.id"
+      :share-id="shareId"
+      :active-tab="activeTab"
+    />
   </MsCard>
 </template>
 
@@ -149,11 +153,10 @@
   import ReportMetricsItem from './ReportMetricsItem.vue';
   import SetReportChart from '@/views/api-test/report/component/case/setReportChart.vue';
   import SingleStatusProgress from '@/views/test-plan/report/component/singleStatusProgress.vue';
-  import ApiCaseTable from '@/views/test-plan/report/detail/component/apiCaseTable.vue';
+  import ApiAndScenarioTable from '@/views/test-plan/report/detail/component/apiAndScenarioTable.vue';
   import BugTable from '@/views/test-plan/report/detail/component/bugTable.vue';
   import FeatureCaseTable from '@/views/test-plan/report/detail/component/featureCaseTable.vue';
   import ReportHeader from '@/views/test-plan/report/detail/component/reportHeader.vue';
-  import ScenarioCaseTable from '@/views/test-plan/report/detail/component/scenarioCaseTable.vue';
   import Summary from '@/views/test-plan/report/detail/component/summary.vue';
 
   import { updateReportDetail } from '@/api/modules/test-plan/report';