feat(接口测试): 优化接口测试报告可通过name检索

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

@@ -162,12 +162,17 @@
     <!-- 报告明细开始 -->
     <div class="report-info">
       <reportInfoHeader
+        v-model:keywordName="keywordName"
         v-model:keyword="cascaderKeywords"
         v-model:active-tab="activeTab"
         show-type="CASE"
         :is-export="props.isExport"
+        @search="searchHandler"
+        @reset="resetHandler"
       />
       <TiledList
+        ref="tiledListRef"
+        v-model:keyword-name="keywordName"
         :key-words="cascaderKeywords"
         show-type="CASE"
         :active-type="activeTab"
@@ -245,6 +250,7 @@
   });
 
   const cascaderKeywords = ref<string>('');
+  const keywordName = ref<string>('');
 
   const getTotalTime = computed(() => {
     if (detail.value) {
@@ -401,6 +407,15 @@
     });
   }
 
+  const tiledListRef = ref<InstanceType<typeof TiledList>>();
+  function searchHandler() {
+    tiledListRef.value?.updateDebouncedSearch();
+  }
+
+  function resetHandler() {
+    tiledListRef.value?.initStepTree();
+  }
+
   watchEffect(() => {
     if (props.detailInfo) {
       detail.value = props.detailInfo;

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

@@ -36,12 +36,17 @@
     <!-- 报告明细开始 -->
     <div class="report-info">
       <reportInfoHeader
+        v-model:keywordName="keywordName"
         v-model:keyword="cascaderKeywords"
         v-model:active-tab="activeTab"
         show-type="API"
         :is-export="props.isExport"
+        @search="searchHandler"
+        @reset="resetHandler"
       />
       <TiledList
+        ref="tiledListRef"
+        v-model:keyword-name="keywordName"
         :key-words="cascaderKeywords"
         show-type="API"
         :get-report-step-detail="props.getReportStepDetail"
@@ -144,6 +149,7 @@
     }
     return '';
   });
+  const keywordName = ref<string>('');
 
   const reportAnalysisList = computed<ReportMetricsItemModel[]>(() => [
     {
@@ -319,6 +325,15 @@
     });
   }
 
+  const tiledListRef = ref<InstanceType<typeof TiledList>>();
+  function searchHandler() {
+    tiledListRef.value?.updateDebouncedSearch();
+  }
+
+  function resetHandler() {
+    tiledListRef.value?.initStepTree();
+  }
+
   watchEffect(() => {
     if (props.detailInfo) {
       detail.value = props.detailInfo;

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

@@ -8,7 +8,16 @@
         </a-radio>
       </a-radio-group>
     </div>
-    <div v-if="!props.isExport" class="w-[240px]">
+    <div v-if="!props.isExport" class="grid grid-cols-2">
+      <a-input-search
+        v-model:model-value="innerKeywordName"
+        :placeholder="t('report.detail.api.placeHolderName')"
+        allow-clear
+        class="mx-[8px] w-[240px]"
+        @search="searchList"
+        @press-enter="searchList"
+        @clear="reset"
+      />
       <MsCascader
         v-model:model-value="innerKeyword"
         mode="native"
@@ -58,14 +67,24 @@
   const props = defineProps<{
     activeTab: 'tiled' | 'tab';
     keyword: string;
+    keywordName: string;
     showType: 'API' | 'CASE';
     isExport?: boolean; // 是否是导出pdf预览
   }>();
 
-  const emit = defineEmits(['update:activeTab', 'update:keyword']);
+  const emit = defineEmits(['update:activeTab', 'update:keyword', 'update:keywordName', 'search', 'reset']);
 
   const innerActiveTab = useVModel(props, 'activeTab', emit);
   const innerKeyword = useVModel(props, 'keyword', emit);
+  const innerKeywordName = useVModel(props, 'keywordName', emit);
+
+  function searchList() {
+    emit('search');
+  }
+
+  function reset() {
+    emit('reset');
+  }
 
   const methods = ref([
     {

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

@@ -82,6 +82,10 @@
 
   const tiledList = ref<ScenarioItemType[]>([]);
 
+  const innerKeyword = defineModel<string>('keywordName', {
+    default: '',
+  });
+
   const isExpandAll = ref(false); // 是否展开全部
 
   const showStepDrawer = ref<boolean>(false);
@@ -156,21 +160,44 @@
     ScenarioStepType.CUSTOM_REQUEST,
     ScenarioStepType.SCRIPT,
   ]);
+
   function searchStep() {
     const splitLevel = props.keyWords.split('-');
-    const stepTypeStatus = splitLevel[1];
+    const stepTypeStatus = splitLevel[1] || '';
     const stepType = splitLevel[0] === 'CUSTOM_REQUEST' ? ['API', 'API_CASE', 'CUSTOM_REQUEST'] : splitLevel[0];
+    const nameSearch = innerKeyword.value?.toLowerCase(); // 传入的 name 检索关键字
 
     const search = (_data: ScenarioItemType[]) => {
       const result: ScenarioItemType[] = [];
 
       _data.forEach((item) => {
         const isStepChildren = item.children && item?.children.length && showApiType.value.includes(item.stepType);
-        if (
+
-          stepType.includes(item.stepType) &&
+        // 匹配步骤类型
-          ((item.status && item.status === stepTypeStatus && stepTypeStatus !== 'scriptIdentifier') ||
+        const matchStepType = stepType.includes(item.stepType);
-            (stepTypeStatus.includes('scriptIdentifier') && item.scriptIdentifier))
+
-        ) {
+        // 匹配步骤状态
+        const matchStepStatus =
+          (item.status && item.status === stepTypeStatus && stepTypeStatus !== 'scriptIdentifier') ||
+          (stepTypeStatus.includes('scriptIdentifier') && item.scriptIdentifier);
+
+        // 条件匹配逻辑
+        let matchesStepCondition;
+
+        // 如果传入了 name 且有状态
+        if (nameSearch && stepTypeStatus) {
+          matchesStepCondition = matchStepType && matchStepStatus && item.name?.toLowerCase().includes(nameSearch);
+        }
+        // 仅传入了 name 没有状态或类型
+        else if (nameSearch) {
+          matchesStepCondition = item.name?.toLowerCase().includes(nameSearch);
+        }
+        // 没有传入 name 只按状态和类型检索
+        else {
+          matchesStepCondition = matchStepType && matchStepStatus;
+        }
+
+        if (matchesStepCondition) {
           const resItem = {
             ...item,
             expanded: false,
@@ -189,14 +216,12 @@
 
             if (isStepChildren) {
               filterItem.stepChildren = cloneDeep(item.children);
-
               filterItem.children = [];
             }
             result.push(filterItem);
           }
         }
       });
-
       return result;
     };
 
@@ -205,7 +230,7 @@
 
   // 防抖搜索
   const updateDebouncedSearch = debounce(() => {
-    if (props.keyWords) {
+    if (props.keyWords || innerKeyword.value) {
       tiledList.value = searchStep();
     }
   }, 300);
@@ -220,6 +245,11 @@
       }
     }
   );
+
+  defineExpose({
+    updateDebouncedSearch,
+    initStepTree,
+  });
 </script>
 
 <style scoped lang="less">

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

@@ -73,4 +73,5 @@ export default {
   'report.detail.api.caseSaveEnv': 'Case saved environment',
   'report.detail.api.scenarioSavedEnv': 'Scenario saved environment',
   'report.detail.api.noResponseContent': 'There is no response',
+  'report.detail.api.placeHolderName': 'To search by name',
 };

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

@@ -71,4 +71,5 @@ export default {
   'report.detail.api.caseSaveEnv': '用例保存的环境',
   'report.detail.api.scenarioSavedEnv': '场景保存的环境',
   'report.detail.api.noResponseContent': '暂无响应内容',
+  'report.detail.api.placeHolderName': '通过名称进行搜索',
 };