style(接口测试): 定义预览-基本信息和按钮样式修改

frontend/src/components/business/ms-environment-select/index.vue

@@ -3,13 +3,14 @@
     <a-select
       v-model:model-value="currentEnv"
       :options="envOptions"
-      class="!w-[200px] pl-0 pr-[8px]"
+      :class="[`${props.size === 'mini' ? '!w-[113px]' : '!w-[200px]'} pl-0 pr-[8px]`]"
       :loading="envLoading"
       allow-search
+      :size="props.size"
       @popup-visible-change="popupVisibleChange"
     >
       <template #prefix>
-        <div class="flex cursor-pointer p-[8px]" @click.stop="goEnv">
+        <div :class="[`flex cursor-pointer ${props.size === 'mini' ? 'p-[4px]' : 'p-[8px]'}`]" @click.stop="goEnv">
           <svg-icon width="14px" height="14px" :name="'icon_env'" class="text-[var(--color-text-4)]" />
         </div>
       </template>
@@ -27,6 +28,7 @@
 
   const props = defineProps<{
     env?: string;
+    size?: 'mini' | 'small' | 'medium' | 'large';
   }>();
 
   const appStore = useAppStore();

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

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

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

@@ -1,6 +1,7 @@
 <template>
   <a-dropdown-button
     v-if="hasLocalExec && !props.executeLoading"
+    :size="props.size"
     type="primary"
     @click="() => execute(isPriorityLocalExec ? 'localExec' : 'serverExec')"
     @select="execute"
@@ -15,7 +16,12 @@
       </a-doption>
     </template>
   </a-dropdown-button>
-  <a-button v-else-if="!hasLocalExec && !props.executeLoading" type="primary" @click="() => execute('serverExec')">
+  <a-button
+    v-else-if="!hasLocalExec && !props.executeLoading"
+    :size="props.size"
+    type="primary"
+    @click="() => execute('serverExec')"
+  >
     {{ t('apiTestDebug.serverExec') }}
   </a-button>
   <a-button v-else type="primary" @click="emit('stopDebug')">
@@ -30,6 +36,7 @@
 
   const props = defineProps<{
     executeLoading?: boolean;
+    size?: 'mini' | 'small' | 'medium' | 'large';
   }>();
 
   const emit = defineEmits<{

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

@@ -24,28 +24,28 @@
       >
         <template v-if="activeApiTab.definitionActiveKey === 'preview'" #extra>
           <div class="flex gap-[12px] pr-[16px]">
-            <executeButton v-permission="['PROJECT_API_DEFINITION:READ+EXECUTE']" @execute="toExecuteDefinition" />
-            <a-dropdown-button
+            <a-button
+              v-permission="['PROJECT_API_DEFINITION:READ+DELETE']"
+              type="outline"
+              class="arco-btn-outline--secondary"
+              size="small"
+              @click="handleDelete"
+            >
+              {{ t('common.delete') }}
+            </a-button>
+            <a-button
               v-permission="['PROJECT_API_DEFINITION:READ+UPDATE']"
               type="outline"
+              size="small"
               @click="toEditDefinition"
             >
               {{ t('common.edit') }}
-              <template #icon>
-                <icon-down />
-              </template>
-              <template #content>
-                <a-doption
-                  v-permission="['PROJECT_API_DEFINITION:READ+DELETE']"
-                  value="delete"
-                  class="error-6 text-[rgb(var(--danger-6))]"
-                  @click="handleDelete"
-                >
-                  <MsIcon type="icon-icon_delete-trash_outlined1" class="text-[rgb(var(--danger-6))]" />
-                  {{ t('common.delete') }}
-                </a-doption>
-              </template>
-            </a-dropdown-button>
+            </a-button>
+            <executeButton
+              v-permission="['PROJECT_API_DEFINITION:READ+EXECUTE']"
+              size="small"
+              @execute="toExecuteDefinition"
+            />
           </div>
         </template>
         <a-tab-pane
@@ -578,12 +578,6 @@
   }
   :deep(.ms-api-tab-nav) {
     @apply h-full;
-    .arco-tabs {
-      @apply border-b-0;
-    }
-    .arco-tabs-nav {
-      border-bottom: 1px solid var(--color-text-n8);
-    }
     .arco-tabs-content {
       @apply pt-0;
 

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

@@ -1,11 +1,11 @@
 <template>
   <div class="preview">
     <div class="px-[18px] pt-[16px]">
-      <MsDetailCard
-        :title="`【${previewDetail.num}】${previewDetail.name}`"
-        :description="description"
-        :simple-show-count="4"
-      >
+      <MsDetailCard :title="`[${previewDetail.num}] ${previewDetail.name}`" :description="description">
+        <template #titlePrefix>
+          <apiStatus :status="previewDetail.status" size="small" />
+          <apiMethodName :method="previewDetail.method as RequestMethods" tag-size="small" is-tag />
+        </template>
         <template #titleAppend>
           <a-tooltip :content="t(previewDetail.follow ? 'common.forked' : 'common.notForked')">
             <MsIcon
@@ -26,10 +26,6 @@
               @click="share"
             />
           </a-tooltip>
-          <apiStatus :status="previewDetail.status" size="small" />
-        </template>
-        <template #type="{ value }">
-          <apiMethodName :method="value as RequestMethods" tag-size="small" is-tag />
         </template>
       </MsDetailCard>
     </div>
@@ -111,11 +107,6 @@
   );
 
   const description = computed(() => [
-    {
-      key: 'type',
-      locale: 'apiTestManagement.apiType',
-      value: previewDetail.value.method,
-    },
     {
       key: 'path',
       locale: 'apiTestManagement.path',
@@ -130,7 +121,6 @@
       key: 'description',
       locale: 'common.desc',
       value: previewDetail.value.description,
-      width: '100%',
     },
     {
       key: 'belongModule',
@@ -190,8 +180,22 @@
   .preview {
     @apply h-full w-full overflow-y-auto overflow-x-hidden;
     .ms-scroll-bar();
+    :deep(.arco-tabs-nav) {
+      border-bottom: 1px solid var(--color-text-n8);
+    }
     :deep(.arco-tabs-pane) {
       @apply h-auto;
     }
   }
+  :deep(.ms-detail-card) {
+    gap: 12px;
+    .ms-detail-card-desc {
+      column-gap: 24px;
+      row-gap: 8px;
+      & > div:nth-of-type(n) {
+        width: auto;
+        max-width: 300px;
+      }
+    }
+  }
 </style>

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

@@ -1,6 +1,12 @@
 <template>
   <div class="flex gap-[8px] px-[16px] pt-[16px]">
-    <a-select v-model:model-value="currentTab" class="w-[80px]" :options="tabOptions" @change="currentTabChange" />
+    <a-select
+      v-model:model-value="currentTab"
+      class="w-[80px] focus-within:!bg-[var(--color-text-n8)] hover:!bg-[var(--color-text-n8)]"
+      :bordered="false"
+      :options="tabOptions"
+      @change="currentTabChange"
+    />
     <MsEditableTab
       v-model:active-tab="activeApiTab"
       v-model:tabs="apiTabs"
@@ -33,6 +39,7 @@
       v-show="activeApiTab.id !== 'all'"
       ref="environmentSelectRef"
       :env="activeApiTab.environmentId"
+      size="mini"
     />
   </div>
   <api