test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

style(接口测试): 协议切换样式优化

This commit is contained in:
teukkk 2024-08-12 10:07:07 +08:00 committed by Craftsman
parent 03bec3a7e6
commit 67a6d135e0
1 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/views/api-test/components/requestComposition/index.vue
View File

@ -13,10 +13,10 @@
<div class="flex flex-wrap items-baseline justify-between gap-[12px]"> <div class="flex flex-wrap items-baseline justify-between gap-[12px]">
<div class="flex flex-1 flex-wrap items-center gap-[16px]"> <div class="flex flex-1 flex-wrap items-center gap-[16px]">
<a-select <a-select
v-if="requestVModel.isNew" v-if="requestVModel.isNew && !isHttpProtocol"
v-model:model-value="requestVModel.protocol" v-model:model-value="requestVModel.protocol"
:loading="protocolLoading" :loading="protocolLoading"
class="w-[90px]" class="w-[100px]"
@change="(val) => handleActiveDebugProtocolChange(val as string)" @change="(val) => handleActiveDebugProtocolChange(val as string)"
> >
<a-tooltip <a-tooltip
@ -30,7 +30,7 @@
</a-option> </a-option>
</a-tooltip> </a-tooltip>
</a-select> </a-select>
<div v-else class="flex items-center gap-[4px]"> <div v-else-if="!requestVModel.isNew" class="flex items-center gap-[4px]">
<apiMethodName <apiMethodName
:method="(requestVModel.protocol as RequestMethods)" :method="(requestVModel.protocol as RequestMethods)"
tag-background-color="rgb(var(--link-7))" tag-background-color="rgb(var(--link-7))"
@ -45,9 +45,27 @@
</a-tooltip> </a-tooltip>
</div> </div>
<a-input-group v-if="isHttpProtocol" class="flex-1"> <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 <apiMethodSelect
v-model:model-value="requestVModel.method" v-model:model-value="requestVModel.method"
class="w-[140px]" class="w-[120px]"
@change="handleActiveDebugChange" @change="handleActiveDebugChange"
/> />
<a-input <a-input
@ -57,7 +75,7 @@
props.isDefinition ? t('apiTestDebug.definitionUrlPlaceholder') : t('apiTestDebug.urlPlaceholder') props.isDefinition ? t('apiTestDebug.definitionUrlPlaceholder') : t('apiTestDebug.urlPlaceholder')
" "
allow-clear allow-clear
class="hover:z-10" class="flex-1 hover:z-10"
:style="isUrlError ? 'border: 1px solid rgb(var(--danger-6));z-index: 10' : ''" :style="isUrlError ? 'border: 1px solid rgb(var(--danger-6));z-index: 10' : ''"
@input="() => (isUrlError = false)" @input="() => (isUrlError = false)"
@change="handleUrlChange" @change="handleUrlChange"