refactor(接口管理): 接口用例和回收站-布局重构

frontend/src/components/pure/ms-editable-tab/index.vue

@@ -52,7 +52,7 @@
       </MsButton>
     </a-tooltip>
     <a-tooltip
-      v-if="!props.readonly"
+      v-if="!props.readonly && showAdd"
       :content="t('ms.editableTab.limitTip', { max: props.limit })"
       :disabled="!props.limit || props.tabs.length >= props.limit"
     >
@@ -93,15 +93,21 @@
 
   import type { TabItem } from './types';
 
-  const props = defineProps<{
+  const props = withDefaults(
+    defineProps<{
       tabs: TabItem[];
       activeTab?: TabItem;
       moreActionList?: ActionsItem[];
+      showAdd?: boolean; // 是否展示增加tab按钮
       limit?: number; // 最多可打开的tab数量
       atLeastOne?: boolean; // 是否至少保留一个tab
       hideMoreAction?: boolean; // 是否隐藏更多操作
       readonly?: boolean; // 是否只读
-  }>();
+    }>(),
+    {
+      showAdd: true,
+    }
+  );
   const emit = defineEmits<{
     (e: 'update:tabs', tabs: TabItem[]): void;
     (e: 'update:activeTab', activeTab: TabItem): void;

frontend/src/views/api-test/management/components/management/case/caseTable.vue

@@ -260,7 +260,6 @@
 
   const props = defineProps<{
     activeModule: string;
-    offspringIds: string[];
     protocol: string; // 查看的协议类型
   }>();
 

frontend/src/views/api-test/management/components/management/case/index.vue

@@ -1,50 +1,22 @@
 <template>
   <div class="flex h-full flex-col">
-    <div class="border-b border-[var(--color-text-n8)] px-[22px] pb-[16px]">
+    <div v-show="activeApiTab.id === 'all'" class="flex-1">
-      <MsEditableTab v-model:active-tab="activeCaseTab" v-model:tabs="caseTabs">
+      <caseTable :active-module="props.activeModule" :protocol="props.protocol" />
-        <template #label="{ tab }">
-          <apiMethodName
-            v-if="tab.id !== 'all'"
-            :method="tab.protocol === 'HTTP' ? tab.method : tab.protocol"
-            class="mr-[4px]"
-          />
-          <a-tooltip :content="tab.name || tab.label" :mouse-enter-delay="500">
-            <div class="one-line-text max-w-[144px]">
-              {{ tab.name || tab.label }}
-            </div>
-          </a-tooltip>
-        </template>
-      </MsEditableTab>
-    </div>
-    <div v-show="activeCaseTab.id === 'all'" class="flex-1">
-      <caseTable :active-module="props.activeModule" :offspring-ids="props.offspringIds" :protocol="props.protocol" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import MsEditableTab from '@/components/pure/ms-editable-tab/index.vue';
   import caseTable from './caseTable.vue';
-  import apiMethodName from '@/views/api-test/components/apiMethodName.vue';
-
-  import { useI18n } from '@/hooks/useI18n';
 
   import type { RequestParam } from '@/views/api-test/components/requestComposition/index.vue';
 
   const props = defineProps<{
     activeModule: string;
-    offspringIds: string[];
     protocol: string;
   }>();
 
-  const { t } = useI18n();
+  const activeApiTab = defineModel<RequestParam>('activeApiTab', {
-
+    required: true,
-  const caseTabs = ref<RequestParam[]>([
+  });
-    {
-      id: 'all',
-      label: t('case.allCase'),
-      closable: false,
-    } as RequestParam,
-  ]);
-  const activeCaseTab = ref<RequestParam>(caseTabs.value[0] as RequestParam);
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="flex gap-[8px] px-[16px] pt-[16px]">
-    <a-select v-model:model-value="currentTab" class="w-[80px]" :options="tabOptions" />
+    <a-select v-model:model-value="currentTab" class="w-[80px]" :options="tabOptions" @change="currentTabChange" />
     <MsEditableTab
       v-model:active-tab="activeApiTab"
       v-model:tabs="apiTabs"
@@ -45,6 +45,12 @@
     :protocol="props.protocol"
     :module-tree="props.moduleTree"
   />
+  <apiCase
+    v-show="currentTab === 'case'"
+    v-model:active-api-tab="activeApiTab"
+    :active-module="props.activeModule"
+    :protocol="props.protocol"
+  />
 </template>
 
 <script setup lang="ts">
@@ -52,6 +58,7 @@
 
   import MsEditableTab from '@/components/pure/ms-editable-tab/index.vue';
   import api from './api/index.vue';
+  import apiCase from './case/index.vue';
   import apiMethodName from '@/views/api-test/components/apiMethodName.vue';
   import { RequestParam } from '@/views/api-test/components/requestComposition/index.vue';
 
@@ -102,6 +109,11 @@
   ]);
   const activeApiTab = ref<RequestParam>(apiTabs.value[0] as RequestParam);
 
+  // 下拉框切换
+  function currentTabChange(val: any) {
+    apiTabs.value[0].label = val === 'api' ? t('apiTestManagement.allApi') : t('case.allCase');
+  }
+
   watch(
     () => activeApiTab.value.id,
     () => {

frontend/src/views/api-test/management/components/recycle/index.vue

@@ -1,25 +1,50 @@
 <template>
-  <a-tabs v-model:active-key="activeTab" animation lazy-load class="ms-api-tab-nav">
+  <div class="flex gap-[8px] px-[16px] pt-[16px]">
-    <a-tab-pane key="api" title="API" class="ms-api-tab-pane">
+    <a-select v-model:model-value="currentTab" class="w-[80px]" :options="tabOptions" @change="currentTabChange" />
+    <MsEditableTab
+      v-model:active-tab="activeApiTab"
+      v-model:tabs="apiTabs"
+      :show-add="false"
+      class="flex-1 overflow-hidden"
+    >
+      <template #label="{ tab }">
+        <apiMethodName
+          v-if="tab.id !== 'all'"
+          :method="tab.protocol === 'HTTP' ? tab.method : tab.protocol"
+          class="mr-[4px]"
+        />
+        <a-tooltip :content="tab.name || tab.label" :mouse-enter-delay="500">
+          <div class="one-line-text max-w-[144px]">
+            {{ tab.name || tab.label }}
+          </div>
+        </a-tooltip>
+      </template>
+    </MsEditableTab>
+  </div>
   <api
+    v-show="currentTab === 'api'"
     ref="apiRef"
     :module-tree="props.moduleTree"
     :active-module="props.activeModule"
     :offspring-ids="props.offspringIds"
     :protocol="protocol"
   />
-    </a-tab-pane>
+  <api-case
-    <a-tab-pane key="case" title="CASE" class="ms-api-tab-pane">
+    v-show="currentTab === 'case'"
-      <api-case :active-module="props.activeModule" :offspring-ids="props.offspringIds" :protocol="protocol"></api-case>
+    :active-module="props.activeModule"
-    </a-tab-pane>
+    :offspring-ids="props.offspringIds"
-  </a-tabs>
+    :protocol="protocol"
+  ></api-case>
 </template>
 
 <script setup lang="ts">
+  import MsEditableTab from '@/components/pure/ms-editable-tab/index.vue';
   import api from './api/apiTable.vue';
   import apiCase from './case/caseTable.vue';
+  import apiMethodName from '@/views/api-test/components/apiMethodName.vue';
+  import { RequestParam } from '@/views/api-test/components/requestComposition/index.vue';
 
-  import useAppStore from '@/store/modules/app';
+  import { useI18n } from '@/hooks/useI18n';
 
   import { ModuleTreeNode } from '@/models/common';
 
@@ -30,27 +55,41 @@
     moduleTree: ModuleTreeNode[]; // 模块树
   }>();
 
-  const appStore = useAppStore();
+  const { t } = useI18n();
 
-  const activeTab = ref('api');
+  const currentTab = ref('api');
+  const tabOptions = [
+    { label: 'API', value: 'api' },
+    { label: 'CASE', value: 'case' },
+  ];
+
+  const apiTabs = ref<RequestParam[]>([
+    {
+      id: 'all',
+      label: t('apiTestManagement.allApi'),
+      closable: false,
+    } as RequestParam,
+  ]);
+  const activeApiTab = ref<RequestParam>(apiTabs.value[0] as RequestParam);
+
+  // 下拉框切换
+  function currentTabChange(val: any) {
+    apiTabs.value[0].label = val === 'api' ? t('apiTestManagement.allApi') : t('case.allCase');
+  }
 </script>
 
 <style lang="less" scoped>
   .ms-api-tab-nav {
     @apply h-full;
-
     :deep(.arco-tabs-content) {
       height: calc(100% - 51px);
-
       .arco-tabs-content-list {
         @apply h-full;
-
         .arco-tabs-pane {
           @apply h-full;
         }
       }
     }
-
     :deep(.arco-tabs-nav) {
       border-bottom: 1px solid var(--color-text-n8);
     }