ai-service-admin/src/components/rag/LLMSelector.vue

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