From e8b54a019ed3b2d0eada2b1c287e70dac85792bb Mon Sep 17 00:00:00 2001
From: Soulter <905617992@qq.com>
Date: Wed, 17 Dec 2025 22:57:32 +0800
Subject: [PATCH] refactor: replace ProviderModelSelector with
 ProviderModelMenu for improved UI and functionality

---
 dashboard/src/components/chat/ChatInput.vue   |  10 +-
 .../src/components/chat/ConfigSelector.vue    |   2 +-
 .../src/components/chat/ProviderModelMenu.vue | 205 +++++++++
 .../components/chat/ProviderModelSelector.vue | 405 ------------------
 4 files changed, 212 insertions(+), 410 deletions(-)
 create mode 100644 dashboard/src/components/chat/ProviderModelMenu.vue
 delete mode 100644 dashboard/src/components/chat/ProviderModelSelector.vue

diff --git a/dashboard/src/components/chat/ChatInput.vue b/dashboard/src/components/chat/ChatInput.vue
index 53e1e30c0..1f6e634b2 100644
--- a/dashboard/src/components/chat/ChatInput.vue
+++ b/dashboard/src/components/chat/ChatInput.vue
@@ -26,7 +26,9 @@
                         :initial-config-id="props.configId"
                         @config-changed="handleConfigChange"
                     />
-                    <ProviderModelSelector v-if="showProviderSelector" ref="providerModelSelectorRef" />
+                    
+                    <!-- Provider/Model Selector Menu -->
+                    <ProviderModelMenu v-if="showProviderSelector" ref="providerModelMenuRef" />
                     
                     <v-tooltip :text="enableStreaming ? tm('streaming.enabled') : tm('streaming.disabled')" location="top">
                         <template v-slot:activator="{ props }">
@@ -84,8 +86,8 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import { useModuleI18n } from '@/i18n/composables';
-import ProviderModelSelector from './ProviderModelSelector.vue';
 import ConfigSelector from './ConfigSelector.vue';
+import ProviderModelMenu from './ProviderModelMenu.vue';
 import type { Session } from '@/composables/useSessions';
 
 interface StagedFileInfo {
@@ -141,7 +143,7 @@ const { tm } = useModuleI18n('features/chat');
 
 const inputField = ref<HTMLTextAreaElement | null>(null);
 const imageInputRef = ref<HTMLInputElement | null>(null);
-const providerModelSelectorRef = ref<InstanceType<typeof ProviderModelSelector> | null>(null);
+const providerModelMenuRef = ref<InstanceType<typeof ProviderModelMenu> | null>(null);
 const showProviderSelector = ref(true);
 
 const localPrompt = computed({
@@ -234,7 +236,7 @@ function getCurrentSelection() {
     if (!showProviderSelector.value) {
         return null;
     }
-    return providerModelSelectorRef.value?.getCurrentSelection();
+    return providerModelMenuRef.value?.getCurrentSelection();
 }
 
 onMounted(() => {
diff --git a/dashboard/src/components/chat/ConfigSelector.vue b/dashboard/src/components/chat/ConfigSelector.vue
index 9cb5eeaac..73c207985 100644
--- a/dashboard/src/components/chat/ConfigSelector.vue
+++ b/dashboard/src/components/chat/ConfigSelector.vue
@@ -17,7 +17,7 @@
             </template>
         </v-tooltip>
 
-        <v-dialog v-model="dialog" max-width="480" persistent>
+        <v-dialog v-model="dialog" max-width="480">
             <v-card>
                 <v-card-title class="d-flex align-center justify-space-between">
                     <span>选择配置文件</span>
diff --git a/dashboard/src/components/chat/ProviderModelMenu.vue b/dashboard/src/components/chat/ProviderModelMenu.vue
new file mode 100644
index 000000000..a5a606045
--- /dev/null
+++ b/dashboard/src/components/chat/ProviderModelMenu.vue
@@ -0,0 +1,205 @@
+<template>
+    <v-menu :close-on-content-click="false" location="top">
+        <template v-slot:activator="{ props: menuProps }">
+            <v-chip v-bind="menuProps" class="text-none provider-chip" variant="tonal" size="x-small">
+                <v-icon start size="14">mdi-creation</v-icon>
+                <span v-if="selectedProviderId">
+                    {{ selectedProviderId }}
+                </span>
+                <span v-else>Model</span>
+            </v-chip>
+        </template>
+        <v-card class="provider-menu-card" min-width="280" max-width="400">
+            <v-card-text class="pa-2">
+                <v-text-field
+                    v-model="searchQuery"
+                    placeholder="Search..."
+                    hide-details
+                    variant="plain"
+                    flat
+                    density="compact"
+                    prepend-inner-icon="mdi-magnify"
+                    class="ml-2 mb-2 mr-2"
+                    clearable
+                />
+                <v-list density="compact" nav class="provider-menu-list">
+                    <v-list-item v-for="provider in filteredProviders" :key="provider.id"
+                        :active="selectedProviderId === provider.id" @click="selectProvider(provider)" rounded="lg"
+                        class="provider-menu-item">
+                        <v-list-item-title class="text-body-2">{{ provider.id }}</v-list-item-title>
+                        <v-list-item-subtitle class="provider-subtitle">
+                            <span class="model-name">{{ provider.model }}</span>
+                            <span class="meta-icons">
+                                <v-tooltip text="支持图像输入" location="top" v-if="supportsImageInput(provider)">
+                                    <template v-slot:activator="{ props: tipProps }">
+                                        <v-icon v-bind="tipProps" size="12" color="grey">mdi-eye-outline</v-icon>
+                                    </template>
+                                </v-tooltip>
+                                <v-tooltip text="支持工具调用" location="top" v-if="supportsToolCall(provider)">
+                                    <template v-slot:activator="{ props: tipProps }">
+                                        <v-icon v-bind="tipProps" size="12" color="grey">mdi-wrench</v-icon>
+                                    </template>
+                                </v-tooltip>
+                                <v-tooltip text="支持推理" location="top" v-if="supportsReasoning(provider)">
+                                    <template v-slot:activator="{ props: tipProps }">
+                                        <v-icon v-bind="tipProps" size="12" color="grey">mdi-brain</v-icon>
+                                    </template>
+                                </v-tooltip>
+                            </span>
+                        </v-list-item-subtitle>
+                    </v-list-item>
+                </v-list>
+                <div v-if="providerConfigs.length === 0" class="empty-hint">
+                    No available models
+                </div>
+            </v-card-text>
+        </v-card>
+    </v-menu>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import axios from 'axios';
+
+interface ModelMetadata {
+    modalities?: { input?: string[] };
+    tool_call?: boolean;
+    reasoning?: boolean;
+}
+
+interface ProviderConfig {
+    id: string;
+    model: string;
+    api_base?: string;
+    model_metadata?: ModelMetadata;
+}
+
+const providerConfigs = ref<ProviderConfig[]>([]);
+const selectedProviderId = ref('');
+const searchQuery = ref('');
+
+const filteredProviders = computed(() => {
+    if (!searchQuery.value) {
+        return providerConfigs.value;
+    }
+    const query = searchQuery.value.toLowerCase();
+    return providerConfigs.value.filter(p => 
+        p.id.toLowerCase().includes(query) || 
+        p.model.toLowerCase().includes(query)
+    );
+});
+
+function loadFromStorage() {
+    const savedProvider = localStorage.getItem('selectedProvider');
+    if (savedProvider) {
+        selectedProviderId.value = savedProvider;
+    }
+}
+
+function saveToStorage() {
+    if (selectedProviderId.value) {
+        localStorage.setItem('selectedProvider', selectedProviderId.value);
+    }
+}
+
+function loadProviderConfigs() {
+    axios.get('/api/config/provider/list', {
+        params: { provider_type: 'chat_completion' }
+    }).then(response => {
+        if (response.data.status === 'ok') {
+            providerConfigs.value = response.data.data || [];
+        }
+    }).catch(error => {
+        console.error('获取提供商列表失败:', error);
+    });
+}
+
+function selectProvider(provider: ProviderConfig) {
+    selectedProviderId.value = provider.id;
+    saveToStorage();
+}
+
+function supportsImageInput(provider: ProviderConfig): boolean {
+    const inputs = provider.model_metadata?.modalities?.input || [];
+    return inputs.includes('image');
+}
+
+function supportsToolCall(provider: ProviderConfig): boolean {
+    return Boolean(provider.model_metadata?.tool_call);
+}
+
+function supportsReasoning(provider: ProviderConfig): boolean {
+    return Boolean(provider.model_metadata?.reasoning);
+}
+
+function getCurrentSelection() {
+    const provider = providerConfigs.value.find(p => p.id === selectedProviderId.value);
+    return {
+        providerId: selectedProviderId.value,
+        modelName: provider?.model || ''
+    };
+}
+
+onMounted(() => {
+    loadFromStorage();
+    loadProviderConfigs();
+});
+
+defineExpose({
+    getCurrentSelection
+});
+</script>
+
+<style scoped>
+.provider-chip {
+    cursor: pointer;
+}
+
+.provider-menu-card {
+    border-radius: 12px !important;
+}
+
+.provider-menu-list {
+    max-height: 280px;
+    overflow-y: auto;
+}
+
+.provider-menu-item {
+    margin-bottom: 2px;
+    border-radius: 8px !important;
+    min-height: 44px !important;
+}
+
+.provider-menu-item:hover {
+    background-color: rgba(103, 58, 183, 0.05);
+}
+
+.provider-menu-item.v-list-item--active {
+    background-color: rgba(103, 58, 183, 0.1);
+}
+
+.provider-subtitle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.model-name {
+    font-size: 12px;
+    color: var(--v-theme-secondaryText);
+}
+
+.meta-icons {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.empty-hint {
+    font-size: 12px;
+    color: var(--v-theme-secondaryText);
+    text-align: center;
+    padding: 16px;
+    opacity: 0.6;
+}
+</style>
diff --git a/dashboard/src/components/chat/ProviderModelSelector.vue b/dashboard/src/components/chat/ProviderModelSelector.vue
deleted file mode 100644
index 5e4ad11aa..000000000
--- a/dashboard/src/components/chat/ProviderModelSelector.vue
+++ /dev/null
@@ -1,405 +0,0 @@
-<template>
-    <div>
-        <!-- 选择提供商和模型按钮 -->
-        <v-chip class="text-none" variant="tonal" size="x-small"
-            v-if="selectedProviderId && selectedModelName" @click="openDialog">
-            <v-icon start size="14">mdi-creation</v-icon>
-            {{ selectedProviderId }} / {{ selectedModelName }}
-        </v-chip>
-        <v-chip variant="tonal" rounded="xl" size="x-small" v-else @click="openDialog">
-            选择模型
-        </v-chip>
-
-        <!-- 选择提供商和模型对话框 -->
-        <v-dialog v-model="showDialog" max-width="800">
-            <v-card style="padding: 8px;">
-                <v-card-title class="dialog-title">
-                    <span>选择提供商和模型</span>
-                </v-card-title>
-                <v-card-text class="pa-0">
-                    <div class="provider-model-container">
-                        <!-- 左侧提供商列表 -->
-                        <div class="provider-list-panel">
-                            <div class="panel-header">
-                                <h4>提供商</h4>
-                            </div>
-                            <v-list density="compact" nav class="provider-list">
-                                <v-list-item v-for="provider in providerConfigs" :key="provider.id" :value="provider.id"
-                                    @click="selectProvider(provider)" :active="tempSelectedProviderId === provider.id"
-                                    rounded="lg" class="provider-item">
-                                    <v-list-item-title>{{ provider.id }}</v-list-item-title>
-                                    <v-list-item-subtitle v-if="provider.api_base">{{ provider.api_base
-                                        }}</v-list-item-subtitle>
-                                </v-list-item>
-                            </v-list>
-                            <div v-if="providerConfigs.length === 0" class="empty-state">
-                                <v-icon icon="mdi-cloud-off-outline" size="large" color="grey-lighten-1"></v-icon>
-                                <div class="empty-text">暂无可用提供商</div>
-                            </div>
-                        </div>
-
-                        <!-- 右侧模型列表 -->
-                        <div class="model-list-panel">
-                            <div class="panel-header">
-                                <h4>模型</h4>
-                                <v-btn v-if="tempSelectedProviderId" icon="mdi-refresh" size="small" variant="text"
-                                    @click="refreshModels" :loading="loadingModels">
-                                </v-btn>
-                            </div>
-                            <v-list density="compact" nav class="model-list" v-if="tempSelectedProviderId">
-
-                                <v-text-field v-model="tempSelectedModelName" placeholder="自定义模型" hide-details solo variant="outlined" density="compact" class="mb-2 mx-2"></v-text-field>
-
-                                <v-list-item v-for="model in modelList" :key="model.name" :value="model.name"
-                                    @click="selectModel(model.name)" :active="tempSelectedModelName === model.name" rounded="lg"
-                                    class="model-item">
-                                    <v-list-item-title>{{ model.name }}</v-list-item-title>
-                                    <v-list-item-subtitle v-if="model.metadata" class="text-caption text-grey metadata-line">
-                                        <v-icon v-if="supportsImageInput(model.metadata)" size="14" color="grey">
-                                            mdi-eye-outline
-                                        </v-icon>
-                                        <v-icon v-if="supportsToolCall(model.metadata)" size="14" color="grey">
-                                            mdi-wrench
-                                        </v-icon>
-                                        <v-icon v-if="supportsReasoning(model.metadata)" size="14" color="grey">
-                                            mdi-brain
-                                        </v-icon>
-                                        <span v-if="formatContextLimit(model.metadata)">{{ formatContextLimit(model.metadata) }}</span>
-                                    </v-list-item-subtitle>
-                                </v-list-item>
-                            </v-list>
-                            <div v-else class="empty-state">
-                                <v-icon icon="mdi-robot-outline" size="large" color="grey-lighten-1"></v-icon>
-                                <div class="empty-text">请先选择提供商</div>
-                            </div>
-                            <div v-if="tempSelectedProviderId && modelList.length === 0 && !loadingModels"
-                                class="empty-state">
-                                <v-icon icon="mdi-robot-off-outline" size="large" color="grey-lighten-1"></v-icon>
-                                <div class="empty-text">该提供商暂无可用模型</div>
-                            </div>
-                        </div>
-                    </div>
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn text @click="closeDialog" color="grey-darken-1">取消</v-btn>
-                    <v-btn text @click="confirmSelection" color="primary"
-                        :disabled="!tempSelectedProviderId || !tempSelectedModelName">
-                        确认选择
-                    </v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
-    </div>
-</template>
-
-<script>
-import axios from 'axios';
-
-export default {
-    name: 'ProviderModelSelector',
-    props: {
-        initialProvider: {
-            type: String,
-            default: ''
-        },
-        initialModel: {
-            type: String,
-            default: ''
-        }
-    },
-    emits: ['selection-changed'],
-    data() {
-        return {
-            showDialog: false,
-            providerConfigs: [],
-            modelList: [],
-            modelMetadata: {},
-            selectedProviderId: '',
-            selectedModelName: '',
-            // 临时选择状态，用于对话框内的选择
-            tempSelectedProviderId: '',
-            tempSelectedModelName: '',
-            loadingModels: false
-        };
-    },
-    mounted() {
-        // 从localStorage加载保存的选择
-        this.loadFromStorage();
-        // 初始化临时选择
-        this.resetTempSelection();
-        // 获取提供商列表
-        this.loadProviderConfigs();
-        // 如果有保存的选择，加载对应的模型列表
-        if (this.selectedProviderId) {
-            this.getProviderModels(this.selectedProviderId);
-        }
-    },
-    methods: {
-        // 从localStorage加载保存的选择
-        loadFromStorage() {
-            const savedProvider = localStorage.getItem('selectedProvider');
-            const savedModel = localStorage.getItem('selectedModel');
-
-            if (savedProvider) {
-                this.selectedProviderId = savedProvider;
-            } else if (this.initialProvider) {
-                this.selectedProviderId = this.initialProvider;
-            }
-
-            if (savedModel) {
-                this.selectedModelName = savedModel;
-            } else if (this.initialModel) {
-                this.selectedModelName = this.initialModel;
-            }
-        },
-
-        // 保存到localStorage
-        saveToStorage() {
-            if (this.selectedProviderId) {
-                localStorage.setItem('selectedProvider', this.selectedProviderId);
-            }
-            if (this.selectedModelName) {
-                localStorage.setItem('selectedModel', this.selectedModelName);
-            }
-        },
-
-        // 获取提供商配置列表
-        loadProviderConfigs() {
-            axios.get('/api/config/provider/list', {
-                params: {
-                    provider_type: 'chat_completion'
-                }
-            })
-                .then(response => {
-                    if (response.data.status === 'ok') {
-                        this.providerConfigs = response.data.data || [];
-                    } else {
-                        console.error('获取聊天完成提供商列表失败:', response.data.message);
-                    }
-                })
-                .catch(error => {
-                    console.error('获取聊天完成提供商列表失败:', error);
-                });
-        },
-
-        // 获取指定提供商的模型列表
-        getProviderModels(providerId) {
-            this.loadingModels = true;
-            axios.get('/api/config/provider/model_list', {
-                params: {
-                    provider_id: providerId
-                }
-            })
-                .then(response => {
-                    if (response.data.status === 'ok') {
-                        const metadataMap = response.data.data.model_metadata || {};
-                        this.modelMetadata = metadataMap;
-                        this.modelList = (response.data.data.models || []).map(name => ({
-                            name,
-                            metadata: metadataMap[name] || null
-                        }));
-                    } else {
-                        console.error('获取模型列表失败:', response.data.message);
-                        this.modelList = [];
-                        this.modelMetadata = {};
-                    }
-                })
-                .catch(error => {
-                    console.error('获取模型列表失败:', error);
-                    this.modelList = [];
-                    this.modelMetadata = {};
-                })
-                .finally(() => {
-                    this.loadingModels = false;
-                });
-        },
-
-        // 选择提供商
-        selectProvider(provider) {
-            this.tempSelectedProviderId = provider.id;
-            this.tempSelectedModelName = ''; // 清空已选择的模型
-            this.modelList = []; // 清空模型列表
-            this.modelMetadata = {};
-            this.getProviderModels(provider.id); // 获取该提供商的模型列表
-        },
-
-        // 选择模型
-        selectModel(model) {
-            this.tempSelectedModelName = model;
-        },
-
-        // 刷新模型列表
-        refreshModels() {
-            if (this.tempSelectedProviderId) {
-                this.getProviderModels(this.tempSelectedProviderId);
-            }
-        },
-
-        // 确认选择
-        confirmSelection() {
-            if (this.tempSelectedProviderId && this.tempSelectedModelName) {
-                // 将临时选择应用到正式选择
-                this.selectedProviderId = this.tempSelectedProviderId;
-                this.selectedModelName = this.tempSelectedModelName;
-
-                // 保存到localStorage
-                this.saveToStorage();
-
-                // 触发事件通知父组件
-                this.$emit('selection-changed', {
-                    providerId: this.selectedProviderId,
-                    modelName: this.selectedModelName
-                });
-
-                this.closeDialog();
-            }
-        },
-
-        // 关闭对话框
-        closeDialog() {
-            this.showDialog = false;
-            // 重置临时选择为当前选择
-            this.resetTempSelection();
-        },
-
-        // 重置临时选择
-        resetTempSelection() {
-            this.tempSelectedProviderId = this.selectedProviderId;
-            this.tempSelectedModelName = this.selectedModelName;
-            // 如果有临时选择的提供商，重新加载模型列表
-            if (this.tempSelectedProviderId) {
-                this.getProviderModels(this.tempSelectedProviderId);
-            }
-        },
-
-        // 打开对话框
-        openDialog() {
-            this.resetTempSelection();
-            this.showDialog = true;
-        },
-
-        supportsImageInput(meta) {
-            const inputs = meta?.modalities?.input || [];
-            return inputs.includes('image');
-        },
-
-        supportsToolCall(meta) {
-            return Boolean(meta?.tool_call);
-        },
-
-        supportsReasoning(meta) {
-            return Boolean(meta?.reasoning);
-        },
-
-        formatContextLimit(meta) {
-            const ctx = meta?.limit?.context;
-            if (!ctx || typeof ctx !== 'number') return '';
-            if (ctx >= 1_000_000) return `${Math.round(ctx / 1_000_000)}M`;
-            if (ctx >= 1_000) return `${Math.round(ctx / 1_000)}K`;
-            return `${ctx}`;
-        },
-
-        // 公开方法：获取当前选择
-        getCurrentSelection() {
-            return {
-                providerId: this.selectedProviderId,
-                modelName: this.selectedModelName
-            };
-        }
-    }
-};
-</script>
-
-<style scoped>
-/* 对话框标题样式 */
-.dialog-title {
-    font-size: 18px;
-    font-weight: 500;
-    padding-bottom: 8px;
-}
-
-/* 提供商和模型选择对话框样式 */
-.provider-model-container {
-    display: flex;
-    height: 500px;
-    border: 1px solid var(--v-theme-border);
-    border-radius: 8px;
-    overflow: hidden;
-}
-
-.provider-list-panel,
-.model-list-panel {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    background-color: var(--v-theme-surface);
-}
-
-.provider-list-panel {
-    border-right: 1px solid var(--v-theme-border);
-}
-
-.panel-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 16px;
-    border-bottom: 1px solid var(--v-theme-border);
-    background-color: var(--v-theme-containerBg);
-}
-
-.panel-header h4 {
-    margin: 0;
-    font-size: 16px;
-    font-weight: 500;
-    color: var(--v-theme-primaryText);
-}
-
-.provider-list,
-.model-list {
-    flex: 1;
-    overflow-y: auto;
-    padding: 8px;
-}
-
-.provider-item,
-.model-item {
-    margin-bottom: 4px;
-    border-radius: 8px !important;
-    transition: all 0.2s ease;
-    cursor: pointer;
-}
-
-.provider-item:hover,
-.model-item:hover {
-    background-color: rgba(103, 58, 183, 0.05);
-}
-
-.provider-item.v-list-item--active,
-.model-item.v-list-item--active {
-    background-color: rgba(103, 58, 183, 0.1);
-    color: var(--v-theme-secondary);
-}
-
-.empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 200px;
-    opacity: 0.6;
-    gap: 12px;
-}
-
-.empty-text {
-    font-size: 14px;
-    color: var(--v-theme-secondaryText);
-}
-
-.metadata-line {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-}
-</style>