fix: LLM选择器当前配置标签显示逻辑 [AC-ASA-14, AC-ASA-15]
- 修复placeholder动态显示当前配置提供者名称 - 添加computedPlaceholder计算属性 - 优化标签显示逻辑,区分'当前配置'和'已选择'
This commit is contained in:
parent
10591ea8fd
commit
eb45629b67
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue