From 67a6d135e0de9f20f3a71b7f3d530fcceab85405 Mon Sep 17 00:00:00 2001
From: teukkk <mengyuan.lv@fit2cloud.com>
Date: Mon, 12 Aug 2024 10:07:07 +0800
Subject: [PATCH] =?UTF-8?q?style(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):=20?=
 =?UTF-8?q?=E5=8D=8F=E8=AE=AE=E5=88=87=E6=8D=A2=E6=A0=B7=E5=BC=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/requestComposition/index.vue   | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/frontend/src/views/api-test/components/requestComposition/index.vue b/frontend/src/views/api-test/components/requestComposition/index.vue
index 4fa28c0321..540e7e2eea 100644
--- a/frontend/src/views/api-test/components/requestComposition/index.vue
+++ b/frontend/src/views/api-test/components/requestComposition/index.vue
@@ -13,10 +13,10 @@
       <div class="flex flex-wrap items-baseline justify-between gap-[12px]">
         <div class="flex flex-1 flex-wrap items-center gap-[16px]">
           <a-select
-            v-if="requestVModel.isNew"
+            v-if="requestVModel.isNew && !isHttpProtocol"
             v-model:model-value="requestVModel.protocol"
             :loading="protocolLoading"
-            class="w-[90px]"
+            class="w-[100px]"
             @change="(val) => handleActiveDebugProtocolChange(val as string)"
           >
             <a-tooltip
@@ -30,7 +30,7 @@
               </a-option>
             </a-tooltip>
           </a-select>
-          <div v-else class="flex items-center gap-[4px]">
+          <div v-else-if="!requestVModel.isNew" class="flex items-center gap-[4px]">
             <apiMethodName
               :method="(requestVModel.protocol as RequestMethods)"
               tag-background-color="rgb(var(--link-7))"
@@ -45,9 +45,27 @@
             </a-tooltip>
           </div>
           <a-input-group v-if="isHttpProtocol" class="flex-1">
+            <a-select
+              v-if="requestVModel.isNew"
+              v-model:model-value="requestVModel.protocol"
+              :loading="protocolLoading"
+              class="w-[100px] hover:z-10"
+              @change="(val) => handleActiveDebugProtocolChange(val as string)"
+            >
+              <a-tooltip
+                v-for="item of protocolOptions"
+                :key="item.value as string"
+                :content="item.label"
+                :mouse-enter-delay="300"
+              >
+                <a-option :value="item.value">
+                  {{ item.label }}
+                </a-option>
+              </a-tooltip>
+            </a-select>
             <apiMethodSelect
               v-model:model-value="requestVModel.method"
-              class="w-[140px]"
+              class="w-[120px]"
               @change="handleActiveDebugChange"
             />
             <a-input
@@ -57,7 +75,7 @@
                 props.isDefinition ? t('apiTestDebug.definitionUrlPlaceholder') : t('apiTestDebug.urlPlaceholder')
               "
               allow-clear
-              class="hover:z-10"
+              class="flex-1 hover:z-10"
               :style="isUrlError ? 'border: 1px solid rgb(var(--danger-6));z-index: 10' : ''"
               @input="() => (isUrlError = false)"
               @change="handleUrlChange"