fix(接口测试): 修改接口测试报告平铺和tab统一展示控制台&替换关联文件关联用例icon

frontend/src/components/business/ms-case-associate/index.vue

@@ -50,20 +50,32 @@
             <a-option v-for="item of protocolOptions" :key="item" :value="item">{{ item }}</a-option>
           </a-select>
         </div>
-        <a-input
-          v-model:model-value="moduleKeyword"
-          :placeholder="t('caseManagement.caseReview.folderSearchPlaceholder')"
-          allow-clear
-          class="mb-[16px]"
-          :max-length="255"
-        />
+        <div class="mb-[8px] flex items-center gap-[8px]">
+          <a-input
+            v-model:model-value="moduleKeyword"
+            :placeholder="t('caseManagement.caseReview.folderSearchPlaceholder')"
+            allow-clear
+            :max-length="255"
+          />
+          <a-tooltip :content="isExpandAll ? t('apiScenario.collapseAll') : t('apiScenario.expandAllStep')">
+            <a-button
+              type="outline"
+              class="expand-btn arco-btn-outline--secondary"
+              @click="() => (isExpandAll = !isExpandAll)"
+            >
+              <MsIcon v-if="isExpandAll" type="icon-icon_comment_collapse_text_input" />
+              <MsIcon v-else type="icon-icon_comment_expand_text_input" />
+            </a-button>
+          </a-tooltip>
+        </div>
+
         <div class="folder">
           <div :class="getFolderClass('all')" @click="setActiveFolder('all')">
             <MsIcon type="icon-icon_folder_filled1" class="folder-icon" />
             <div class="folder-name">{{ t('caseManagement.featureCase.allCase') }}</div>
             <div class="folder-count">({{ modulesCount.total || modulesCount.all || 0 }})</div>
           </div>
-          <div class="ml-auto flex items-center">
+          <!-- <div class="ml-auto flex items-center">
             <a-tooltip
               :content="isExpandAll ? t('project.fileManagement.collapseAll') : t('project.fileManagement.expandAll')"
             >
@@ -71,7 +83,7 @@
                 <MsIcon :type="isExpandAll ? 'icon-icon_folder_collapse1' : 'icon-icon_folder_expansion1'" />
               </MsButton>
             </a-tooltip>
-          </div>
+          </div> -->
         </div>
         <a-divider class="my-[8px]" />
         <a-spin class="w-full" :loading="moduleLoading">
@@ -870,4 +882,17 @@
     padding: 12px 16px;
     box-shadow: 0 -1px 4px 0 rgb(31 35 41 / 10%);
   }
+  .expand-btn {
+    padding: 8px;
+    .arco-icon {
+      color: var(--color-text-4);
+    }
+    &:hover {
+      border-color: rgb(var(--primary-5)) !important;
+      background-color: rgb(var(--primary-1)) !important;
+      .arco-icon {
+        color: rgb(var(--primary-5));
+      }
+    }
+  }
 </style>

frontend/src/components/business/ms-link-file/associatedFileDrawer.vue

@@ -20,26 +20,36 @@
               <div class="folder-name">{{ t('project.fileManagement.allFile') }}</div>
               <div class="folder-count">({{ allFileCount }})</div>
             </div>
-            <div class="ml-auto flex items-center">
-              <a-tooltip
-                :content="isExpandAll ? t('project.fileManagement.collapseAll') : t('project.fileManagement.expandAll')"
-              >
-                <MsButton type="icon" status="secondary" class="!mr-0 p-[4px]" @click="changeExpand">
-                  <MsIcon :type="isExpandAll ? 'icon-icon_folder_collapse1' : 'icon-icon_folder_expansion1'" />
-                </MsButton>
-              </a-tooltip>
-            </div>
           </div>
           <a-divider class="my-[8px]" />
           <a-radio-group v-model:model-value="showType" type="button" class="file-show-type" @change="changeShowType">
             <a-radio value="Module">{{ t('project.fileManagement.module') }}</a-radio>
             <a-radio value="Storage">{{ t('project.fileManagement.storage') }}</a-radio>
           </a-radio-group>
+          <div class="mb-[8px] flex items-center gap-[8px]">
+            <a-input
+              v-model:model-value="moduleKeyword"
+              :placeholder="t('project.fileManagement.folderSearchPlaceholder')"
+              allow-clear
+              :max-length="255"
+            ></a-input>
+            <a-tooltip :content="isExpandAll ? t('apiScenario.collapseAll') : t('apiScenario.expandAllStep')">
+              <a-button
+                type="outline"
+                class="expand-btn arco-btn-outline--secondary"
+                @click="() => (isExpandAll = !isExpandAll)"
+              >
+                <MsIcon v-if="isExpandAll" type="icon-icon_comment_collapse_text_input" />
+                <MsIcon v-else type="icon-icon_comment_expand_text_input" />
+              </a-button>
+            </a-tooltip>
+          </div>
           <div v-show="showType === 'Module'">
             <FileTree
               ref="folderTreeRef"
               v-model:selected-keys="selectedKeys"
               v-model:active-folder="activeFolder"
+              v-model:group-keyword="moduleKeyword"
               :is-expand-all="isExpandAll"
               :modules-count="modulesCount"
               :show-type="showType"
@@ -83,6 +93,7 @@
 
 <script setup lang="ts">
   import { ref } from 'vue';
+  import { useVModel } from '@vueuse/core';
 
   import MsButton from '@/components/pure/ms-button/index.vue';
   import MsDrawer from '@/components/pure/ms-drawer/index.vue';
@@ -129,7 +140,7 @@
   }
 
   const activeFolderType = ref<'folder' | 'module' | 'storage'>('module');
-
+  const moduleKeyword = ref<string>('');
   const selectedKeys = computed({
     get: () => [activeFolder.value],
     set: (val) => val,
@@ -295,4 +306,18 @@
   :deep(.arco-drawer-body) {
     padding: 0 16px !important;
   }
+  // TODO 这个后边可以提取一个全局样式
+  .expand-btn {
+    padding: 8px;
+    .arco-icon {
+      color: var(--color-text-4);
+    }
+    &:hover {
+      border-color: rgb(var(--primary-5)) !important;
+      background-color: rgb(var(--primary-1)) !important;
+      .arco-icon {
+        color: rgb(var(--primary-5));
+      }
+    }
+  }
 </style>

frontend/src/components/business/ms-link-file/fileTree.vue

@@ -1,11 +1,4 @@
 <template>
-  <a-input
-    v-model:model-value="moduleKeyword"
-    :placeholder="t('project.fileManagement.folderSearchPlaceholder')"
-    allow-clear
-    :max-length="255"
-    class="mb-[16px]"
-  ></a-input>
   <a-spin class="min-h-[400px] w-full" :loading="loading">
     <MsTree
       v-model:focus-node-key="focusNodeKey"
@@ -41,6 +34,7 @@
 
 <script setup lang="ts">
   import { computed, ref, watch } from 'vue';
+  import { useVModel } from '@vueuse/core';
 
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
   import MsTree from '@/components/business/ms-tree/index.vue';
@@ -63,14 +57,20 @@
     showType?: string; // 显示类型
     getTreeRequest: (params: any) => Promise<ModuleTreeNode[]>; // 获取模块树接口
     activeFolder: string | number;
+    groupKeyword: string; // 搜索关键字
   }>();
 
-  const emit = defineEmits(['update:selectedKeys', 'init', 'folderNodeSelect', 'update:activeFolder']);
+  const emit = defineEmits([
+    'update:selectedKeys',
+    'init',
+    'folderNodeSelect',
+    'update:activeFolder',
+    'update:groupKeyword',
+  ]);
 
-  const moduleKeyword = ref('');
   const folderTree = ref<ModuleTreeNode[]>([]);
   const focusNodeKey = ref<string | number>('');
-
+  const moduleKeyword = useVModel(props, 'groupKeyword', emit);
   const loading = ref(false);
 
   const virtualListProps = computed(() => {

frontend/src/views/api-test/components/requestComposition/response/result/tiledDisplay.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="resContent">
     <!-- 展开折叠列表 -->
-    <div class="tiledList">
+    <div v-if="props.requestResult?.responseResult.responseCode" class="tiledList">
       <div v-for="item of props.menuList" :key="item.value" class="menu-list-wrapper">
         <div v-if="isShowContent(item.value)" class="menu-list">
           <div class="flex items-center">
@@ -52,6 +52,14 @@
         <a-divider v-if="isShowContent(item.value)" type="dashed" :margin="0"></a-divider>
       </div>
     </div>
+    <a-empty v-else class="flex h-[150px] items-center gap-[16px] p-[16px]">
+      <template #image>
+        <img :src="noDataSvg" class="!h-[60px] w-[78px]" />
+      </template>
+      <div class="flex items-center">
+        {{ t('report.detail.api.noResponseContent') }}
+      </div>
+    </a-empty>
   </div>
 </template>
 
@@ -83,6 +91,7 @@
     reportId?: string;
   }>();
 
+  const noDataSvg = `${import.meta.env.BASE_URL}images/noResponse.svg`;
   const expandIds = ref<string[]>([]);
   function changeExpand(value: string) {
     const isExpand = expandIds.value.indexOf(value) > -1;
@@ -121,7 +130,7 @@
       case ResponseComposition.REAL_REQUEST:
         return showRealRequest.value;
       case ResponseComposition.CONSOLE:
-        return props?.console?.trim();
+        return props?.console?.trim() && props.requestResult?.responseResult.responseCode;
       case ResponseComposition.EXTRACT:
         return showExtract.value;
       case ResponseComposition.ASSERTION:

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

@@ -67,4 +67,5 @@ export default {
   'report.detail.api.defaultEnv': 'Default environment',
   'report.detail.api.caseSaveEnv': 'Case saved environment',
   'report.detail.api.scenarioSavedEnv': 'Scenario saved environment',
+  'report.detail.api.noResponseContent': 'There is no response',
 };

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

@@ -66,4 +66,5 @@ export default {
   'report.detail.api.defaultEnv': '默认环境',
   'report.detail.api.caseSaveEnv': '用例保存的环境',
   'report.detail.api.scenarioSavedEnv': '场景保存的环境',
+  'report.detail.api.noResponseContent': '暂无响应内容',
 };