style(接口测试): 定义预览-tab样式

frontend/src/components/pure/ms-tag/ms-tag.vue

@@ -138,7 +138,6 @@
 
 <style lang="less">
   .arco-tag {
-    display: flex;
     .arco-icon {
       font-size: 14px !important;
     }

frontend/src/views/api-test/components/apiMethodName.vue

@@ -6,6 +6,7 @@
         border: `1px solid ${props.tagBackgroundColor || methodColor}`,
         color: props.tagTextColor || methodColor,
         backgroundColor: props.tagBackgroundColor || 'white',
+        display: 'flex',
       }"
       :size="props.tagSize"
     >

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

@@ -15,15 +15,16 @@
       />
     </div>
     <div v-else-if="activeApiTab.id !== 'all'" class="flex-1 overflow-hidden">
-      <a-tabs
-        v-model:active-key="activeApiTab.definitionActiveKey"
-        animation
-        lazy-load
+      <div class="mt-[8px] flex items-center justify-between px-[16px]">
+        <MsTab
+          v-model:activeKey="activeApiTab.definitionActiveKey"
+          :content-tab-list="contentTabList"
+          mode="button"
           class="ms-api-tab-nav"
+          button-size="small"
           @change="changeDefinitionActiveKey"
-      >
-        <template v-if="activeApiTab.definitionActiveKey === 'preview'" #extra>
-          <div class="flex gap-[12px] pr-[16px]">
+        />
+        <div v-if="activeApiTab.definitionActiveKey === 'preview'" class="flex gap-[12px]">
           <a-button
             v-permission="['PROJECT_API_DEFINITION:READ+DELETE']"
             type="outline"
@@ -47,27 +48,16 @@
             @execute="toExecuteDefinition"
           />
         </div>
-        </template>
-        <a-tab-pane
-          v-if="!activeApiTab.isNew"
-          key="preview"
-          :title="t('apiTestManagement.preview')"
-          class="ms-api-tab-pane"
-        >
+      </div>
+      <div class="h-[calc(100%-32px)]">
         <preview
           v-if="activeApiTab.definitionActiveKey === 'preview'"
           :detail="activeApiTab"
           :protocols="protocols"
           @update-follow="activeApiTab.follow = !activeApiTab.follow"
         />
-        </a-tab-pane>
-        <a-tab-pane
-          v-if="hasAnyPermission(['PROJECT_API_DEFINITION:READ+UPDATE', 'PROJECT_API_DEFINITION:READ+ADD'])"
-          key="definition"
-          :title="t('apiTestManagement.definition')"
-          class="ms-api-tab-pane"
-        >
         <requestComposition
+          v-if="activeApiTab.definitionActiveKey === 'definition'"
           ref="requestCompositionRef"
           v-model:detail-loading="loading"
           v-model:request="activeApiTab"
@@ -89,14 +79,8 @@
           is-definition
           @add-done="handleAddDone"
         />
-        </a-tab-pane>
-        <a-tab-pane
-          v-if="!activeApiTab.isNew && hasAnyPermission(['PROJECT_API_DEFINITION_CASE:READ'])"
-          key="case"
-          :title="t('apiTestManagement.case')"
-          class="ms-api-tab-pane"
-        >
         <caseTable
+          v-if="activeApiTab.definitionActiveKey === 'case'"
           ref="caseTableRef"
           :is-api="true"
           :active-module="props.activeModule"
@@ -104,26 +88,19 @@
           :api-detail="activeApiTab"
           :offspring-ids="props.offspringIds"
           :member-options="memberOptions"
-            :height-used="48"
+          :height-used="32"
         />
-        </a-tab-pane>
-        <a-tab-pane
-          v-if="!activeApiTab.isNew && activeApiTab.protocol === 'HTTP'"
-          key="mock"
-          title="MOCK"
-          class="ms-api-tab-pane"
-        >
         <mockTable
+          v-if="activeApiTab.definitionActiveKey === 'mock'"
           :active-module="props.activeModule"
           :offspring-ids="props.offspringIds"
           :definition-detail="activeApiTab"
           :selected-protocols="[activeApiTab.protocol]"
-            :height-used="48"
+          :height-used="32"
           is-api
           @debug="openApiTabAndDebugMock"
         />
-        </a-tab-pane>
-      </a-tabs>
+      </div>
     </div>
   </div>
 </template>
@@ -132,6 +109,7 @@
   import { cloneDeep } from 'lodash-es';
 
   import { TabItem } from '@/components/pure/ms-editable-tab/types';
+  import MsTab from '@/components/pure/ms-tab/index.vue';
   // import MsFormCreate from '@/components/pure/ms-form-create/formCreate.vue';
   import apiTable from './apiTable.vue';
   import executeButton from '@/views/api-test/components/executeButton.vue';
@@ -516,6 +494,24 @@
     refreshTableTimeStamp.value = Date.now();
   }
 
+  const contentTabList = computed(() => {
+    const { isNew, protocol } = activeApiTab.value;
+    const tabs = [
+      { condition: !isNew, value: 'preview', label: t('apiTestManagement.preview') },
+      {
+        condition: hasAnyPermission(['PROJECT_API_DEFINITION:READ+UPDATE', 'PROJECT_API_DEFINITION:READ+ADD']),
+        value: 'definition',
+        label: t('apiTestManagement.definition'),
+      },
+      {
+        condition: !isNew && hasAnyPermission(['PROJECT_API_DEFINITION_CASE:READ']),
+        value: 'case',
+        label: t('apiTestManagement.case'),
+      },
+      { condition: !isNew && protocol === 'HTTP', value: 'mock', label: 'MOCK' },
+    ];
+    return tabs.filter((tab) => tab.condition).map((tab) => ({ value: tab.value, label: tab.label }));
+  });
   function changeDefinitionActiveKey(val: string | number) {
     // 在定义可以添加用例，故需要切换到case时刷新数据
     if (val === 'case') {
@@ -568,26 +564,3 @@
     refreshTable,
   });
 </script>
-
-<style lang="less" scoped>
-  .error-6 {
-    color: rgb(var(--danger-6));
-    &:hover {
-      color: rgb(var(--danger-6));
-    }
-  }
-  :deep(.ms-api-tab-nav) {
-    @apply h-full;
-    .arco-tabs-content {
-      @apply pt-0;
-
-      height: calc(100% - 48px);
-      .arco-tabs-content-list {
-        @apply h-full;
-        .arco-tabs-pane {
-          @apply h-full;
-        }
-      }
-    }
-  }
-</style>