fix: LLM选择器当前配置标签显示逻辑 [AC-ASA-14, AC-ASA-15]

- 修复placeholder动态显示当前配置提供者名称
- 添加computedPlaceholder计算属性
- 优化标签显示逻辑,区分'当前配置'和'已选择'
This commit is contained in:
MerCry 2026-02-25 14:46:24 +08:00
parent 10591ea8fd
commit eb45629b67
1 changed files with 42 additions and 3 deletions

View File

@ -1,14 +1,15 @@
<template> <template>
<el-select <el-select
:model-value="modelValue" :model-value="displayValue"
:loading="loading" :loading="loading"
:placeholder="placeholder" :placeholder="computedPlaceholder"
:disabled="disabled" :disabled="disabled"
:clearable="clearable" :clearable="clearable"
:teleported="true" :teleported="true"
:popper-class="popperClass" :popper-class="popperClass"
:popper-options="{ modifiers: [{ name: 'flip', enabled: true }, { name: 'preventOverflow', enabled: true }, { name: 'computeStyles', options: { adaptive: false, gpuAcceleration: false } }] }" :popper-options="{ modifiers: [{ name: 'flip', enabled: true }, { name: 'preventOverflow', enabled: true }, { name: 'computeStyles', options: { adaptive: false, gpuAcceleration: false } }] }"
@update:model-value="handleChange" @update:model-value="handleChange"
@clear="handleClear"
> >
<el-option <el-option
v-for="provider in providers" v-for="provider in providers"
@ -24,12 +25,16 @@
<el-tag v-if="provider.name === currentProvider" type="success" size="small" effect="plain" class="current-tag"> <el-tag v-if="provider.name === currentProvider" type="success" size="small" effect="plain" class="current-tag">
当前配置 当前配置
</el-tag> </el-tag>
<el-tag v-else-if="provider.name === modelValue" type="primary" size="small" effect="plain" class="selected-tag">
已选择
</el-tag>
</div> </div>
</el-option> </el-option>
</el-select> </el-select>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'
import type { LLMProviderInfo } from '@/api/llm' import type { LLMProviderInfo } from '@/api/llm'
const popperClass = 'llm-selector-popper' const popperClass = 'llm-selector-popper'
@ -59,22 +64,48 @@ const emit = defineEmits<{
change: [provider: LLMProviderInfo | undefined] change: [provider: LLMProviderInfo | undefined]
}>() }>()
const displayValue = computed(() => {
return props.modelValue || ''
})
const computedPlaceholder = computed(() => {
if (props.modelValue) {
return props.placeholder
}
if (props.currentProvider) {
const current = props.providers.find(p => p.name === props.currentProvider)
return `默认: ${current?.display_name || props.currentProvider}`
}
return props.placeholder
})
const handleChange = (value: string) => { const handleChange = (value: string) => {
emit('update:modelValue', value) emit('update:modelValue', value)
const selectedProvider = props.providers.find((p) => p.name === value) const selectedProvider = props.providers.find((p) => p.name === value)
emit('change', selectedProvider) emit('change', selectedProvider)
} }
const handleClear = () => {
emit('update:modelValue', '')
emit('change', undefined)
}
</script> </script>
<style> <style>
.llm-selector-popper { .llm-selector-popper {
min-width: 300px !important; min-width: 320px !important;
z-index: 9999 !important; z-index: 9999 !important;
} }
.llm-selector-popper .el-select-dropdown__wrap { .llm-selector-popper .el-select-dropdown__wrap {
max-height: 400px; max-height: 400px;
} }
.llm-selector-popper .el-select-dropdown__item {
height: auto;
padding: 8px 12px;
line-height: 1.5;
}
</style> </style>
<style scoped> <style scoped>
@ -93,6 +124,7 @@ const handleChange = (value: string) => {
line-height: 1.5; line-height: 1.5;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
overflow: hidden;
} }
.provider-name { .provider-name {
@ -116,5 +148,12 @@ const handleChange = (value: string) => {
.current-tag { .current-tag {
flex-shrink: 0; flex-shrink: 0;
margin-left: 8px; margin-left: 8px;
white-space: nowrap;
}
.selected-tag {
flex-shrink: 0;
margin-left: 8px;
white-space: nowrap;
} }
</style> </style>