feat(测试计划&接口测试): 优化测试计划报告&接口报告选中高亮

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

@@ -5,6 +5,7 @@
         ref="treeRef"
         v-model:selected-keys="selectedKeys"
         v-model:expanded-keys="innerExpandedKeys"
+        v-model:focus-node-key="focusStepKey"
         v-model:data="steps"
         :expand-all="props.expandAll"
         :field-names="{ title: 'name', key: 'stepId', children: 'children' }"
@@ -66,16 +67,9 @@
                   <div v-if="props.showType === 'API' && showCondition.includes(step.stepType)" class="flex-shrink-0">
                     <ConditionStatus class="mx-1" :status="step.stepType || ''" />
                   </div>
-
-                  <a-tooltip :content="step.name" position="tl">
-                    <div
-                      class="step-name-container"
-                      :class="{
-                        'w-full flex-grow': showApiType.includes(step.stepType),
-                      }"
-                      @click="showDetail($event, step)"
-                    >
-                      <div class="one-line-text mx-[4px] max-w-[300px] text-[var(--color-text-1)]">
+                  <a-tooltip :content="step.name" :disabled="!step.name">
+                    <div class="step-name-container" @click="showDetail($event, step)">
+                      <div class="step-name-text one-line-text ml-[4px] font-normal">
                         {{ step.name }}
                       </div>
                     </div>
@@ -317,7 +311,6 @@
     }
     activeItem.value = cloneDeep(item);
     emit('detail', activeItem.value);
-    event.stopPropagation();
   }
 
   // 响应状态码对应颜色
@@ -390,10 +383,9 @@
         @apply flex w-full flex-1 items-center;
 
         gap: 8px;
-        margin-right: 6px;
       }
       .step-name-container {
-        @apply flex items-center;
+        @apply flex flex-1 items-center overflow-hidden;
 
         margin-right: 16px;
         &:hover {
@@ -422,7 +414,7 @@
     }
     .ms-tree-node-extra {
       gap: 4px;
-      background-color: white !important;
+      background-color: var(--color-text-n9) !important;
     }
   }
   :deep(.arco-tree-node-selected) {
@@ -433,11 +425,8 @@
       }
     }
   }
-  :deep(.step-tree-node-focus) {
-    background-color: white !important;
-    .arco-tree-node-title {
-      background-color: white;
-    }
+  :deep(.step-tree-node-title) {
+    @apply w-full;
   }
   .resTime,
   .resSize,
@@ -484,11 +473,14 @@
       border-radius: 6px;
     }
   }
-  :deep(.ms-tree-container .ms-tree .arco-tree-node .arco-tree-node-title) {
-    background: white;
-  }
-  :deep(.ms-tree-container .ms-tree .arco-tree-node-selected) {
-    background: white;
+  :deep(.step-tree-node-focus) {
+    background-color: var(--color-text-n9) !important;
+    .arco-tree-node-title {
+      background-color: var(--color-text-n9) !important;
+    }
+    .ms-tree-node-extra {
+      @apply !visible !w-auto;
+    }
   }
   .line {
     position: absolute;
@@ -497,7 +489,4 @@
     height: 1px;
     background: var(--color-text-n8);
   }
-  :deep(.step-tree-node-title) {
-    width: 100%;
-  }
 </style>

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

@@ -1,6 +1,10 @@
 <template>
   <div :class="`${props.enabledTestSet ? 'test-set-wrapper' : ''}`">
-    <MsBaseTable v-bind="currentCaseTable.propsRes.value" v-on="currentCaseTable.propsEvent.value">
+    <MsBaseTable
+      v-bind="currentCaseTable.propsRes.value"
+      :row-class="getRowClass"
+      v-on="currentCaseTable.propsEvent.value"
+    >
       <template #num="{ record }">
         <MsButton type="text" @click="toDetail(record)">{{ record.num }}</MsButton>
       </template>
@@ -240,6 +244,7 @@
   const reportVisible = ref(false);
 
   const apiReportId = ref<string>('');
+  const selectedReportId = ref<string>('');
 
   function showReport(record: ApiOrScenarioCaseItem) {
     if (!record.reportId) {
@@ -248,6 +253,11 @@
     if (!record.executeResult || record.executeResult === 'STOPPED') return;
     reportVisible.value = true;
     apiReportId.value = record.reportId;
+    selectedReportId.value = record.reportId;
+  }
+
+  function getRowClass(record: ApiOrScenarioCaseItem) {
+    return record.reportId === selectedReportId.value ? 'selected-row-class' : '';
   }
 
   // 去接口用例详情页面

frontend/src/views/test-plan/report/detail/component/system-card/featureCaseTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="`${props.enabledTestSet ? 'test-set-wrapper' : ''}`">
-    <MsBaseTable v-bind="propsRes" v-on="propsEvent">
+    <MsBaseTable v-bind="propsRes" :row-class="getRowClass" v-on="propsEvent">
       <template #num="{ record }">
         <MsButton :disabled="!props.isPreview" type="text" @click="toDetail(record)">{{ record.num }}</MsButton>
       </template>
@@ -276,12 +276,18 @@
     }
   }
 
+  const selectedId = ref<string>('');
   function openExecuteHistory(record: FeatureCaseItem) {
     executeReportId.value = record.reportId;
+    selectedId.value = record.reportId;
     showDetailVisible.value = true;
     getExecuteStep();
   }
 
+  function getRowClass(record: FeatureCaseItem) {
+    return record.reportId === selectedId.value ? 'selected-row-class' : '';
+  }
+
   watch(
     () => props.isPreview,
     (val) => {

frontend/src/views/test-plan/report/detail/component/system-card/testTableIndex.vue

@@ -135,4 +135,10 @@
     @apply overflow-y-auto bg-white;
     .ms-scroll-bar();
   }
+  :deep(.selected-row-class.arco-table-tr) {
+    background: var(--color-fill-1) !important;
+    .arco-table-td {
+      background: var(--color-fill-1) !important;
+    }
+  }
 </style>