From 059effe8d9cd73cb2db3cc0dfc32bc18f1ca9ab9 Mon Sep 17 00:00:00 2001
From: teukkk <mengyuan.lv@fit2cloud.com>
Date: Tue, 6 Aug 2024 15:28:36 +0800
Subject: [PATCH] =?UTF-8?q?style(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):=20?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E9=A2=84=E8=A7=88-=E5=9F=BA=E6=9C=AC?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E5=92=8C=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../business/ms-environment-select/index.vue  |  6 ++-
 .../src/components/pure/ms-tag/ms-tag.vue     |  1 +
 .../api-test/components/executeButton.vue     |  9 ++++-
 .../components/management/api/index.vue       | 40 ++++++++-----------
 .../management/api/preview/index.vue          | 34 +++++++++-------
 .../components/management/index.vue           |  9 ++++-
 6 files changed, 57 insertions(+), 42 deletions(-)

diff --git a/frontend/src/components/business/ms-environment-select/index.vue b/frontend/src/components/business/ms-environment-select/index.vue
index 1f2ce4183e..f2b0b0e02b 100644
--- a/frontend/src/components/business/ms-environment-select/index.vue
+++ b/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();
diff --git a/frontend/src/components/pure/ms-tag/ms-tag.vue b/frontend/src/components/pure/ms-tag/ms-tag.vue
index 80b45079d6..49fd1b8b79 100644
--- a/frontend/src/components/pure/ms-tag/ms-tag.vue
+++ b/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;
     }
diff --git a/frontend/src/views/api-test/components/executeButton.vue b/frontend/src/views/api-test/components/executeButton.vue
index 9c1b2716d3..63d69fbb5d 100644
--- a/frontend/src/views/api-test/components/executeButton.vue
+++ b/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<{
diff --git a/frontend/src/views/api-test/management/components/management/api/index.vue b/frontend/src/views/api-test/management/components/management/api/index.vue
index cd7ae2face..9337e586a4 100644
--- a/frontend/src/views/api-test/management/components/management/api/index.vue
+++ b/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;
 
diff --git a/frontend/src/views/api-test/management/components/management/api/preview/index.vue b/frontend/src/views/api-test/management/components/management/api/preview/index.vue
index 5728cd04a7..197daca772 100644
--- a/frontend/src/views/api-test/management/components/management/api/preview/index.vue
+++ b/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>
diff --git a/frontend/src/views/api-test/management/components/management/index.vue b/frontend/src/views/api-test/management/components/management/index.vue
index 72cf767c4f..98976d9b7f 100644
--- a/frontend/src/views/api-test/management/components/management/index.vue
+++ b/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