feat: 更新 Chat 页面

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/views/Chat.vue

@@ -1,8 +1,85 @@
 <script setup lang="ts">
-import { ref, nextTick } from 'vue'
+import { ref, nextTick, onMounted, onUnmounted } from 'vue'
 
 const API_BASE = 'http://localhost:8082'
 
+// 模型列表
+interface ChatModel {
+  id: string
+  name: string
+  model_type: string
+  provider: string
+  model: string
+  status: string
+}
+
+const chatModels = ref<ChatModel[]>([])
+const selectedModel = ref<ChatModel | null>(null)
+const modelsLoading = ref(false)
+const showModelDropdown = ref(false)
+
+// 根据 provider 获取图标
+const getModelIcon = (provider: string) => {
+  const icons: Record<string, string> = {
+    'OpenAI': '🤖',
+    'Claude': '🧠',
+    'Google': '✨',
+    'Gemini': '✨',
+    'Ollama': '🦙',
+    'DeepSeek': '🔮',
+    'Moonshot': '🌙',
+    'Kimi': '🌙',
+    'Baidu': '🐉',
+    '文心一言': '🐉',
+    'Aliyun': '☁️',
+    'Ali': '☁️',
+    '通义千问': '☁️',
+    'Azure': '⬛',
+    'Anthropic': '🧠',
+  }
+  return icons[provider] || '💬'
+}
+
+// 获取模型列表
+const fetchModels = async () => {
+  modelsLoading.value = true
+  try {
+    const response = await fetch(`${API_BASE}/model/list`)
+    const data = await response.json()
+    if (data.list) {
+      // 过滤出 chat 类型且 active 状态的模型
+      chatModels.value = data.list.filter((m: ChatModel) => m.model_type === 'chat' && m.status === 'active')
+      console.log('Chat models:', chatModels.value)
+      // 默认选择第一个
+      if (chatModels.value.length > 0 && !selectedModel.value) {
+        selectedModel.value = chatModels.value[0]
+      }
+    }
+  } catch (error) {
+    console.error('Failed to fetch models:', error)
+  } finally {
+    modelsLoading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchModels()
+  // 点击外部关闭下拉框
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+
+// 点击外部关闭下拉框
+const handleClickOutside = (e: MouseEvent) => {
+  const target = e.target as HTMLElement
+  if (!target.closest('.model-dropdown')) {
+    showModelDropdown.value = false
+  }
+}
+
 interface ChatMessage {
   id: number
   role: 'user' | 'assistant'
@@ -162,16 +239,24 @@ const sendMessage = async () => {
   isLoading.value = true
 
   try {
+    // 构建请求体，包含模型信息
+    const requestBody: any = {
+      agent_id: selectedAgent.value?.id || 1,
+      message: userContent,
+    }
+
+    // 如果选择了模型，只传递 model_id（后端会根据 id 查询 api_key 和 base_url）
+    if (selectedModel.value) {
+      requestBody.model_id = selectedModel.value.id
+    }
+
     // 调用后端 API
     const response = await fetch(`${API_BASE}/api/agent/chat`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({
+      body: JSON.stringify(requestBody),
-        agent_id: selectedAgent.value?.id || 1,
-        message: userContent,
-      }),
     })
 
     const data = await response.json()
@@ -294,6 +379,18 @@ const toggleSidebar = () => {
   background: rgba(255, 255, 255, 0.15);
 }
 
+/* 下拉框动画 */
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.2s ease;
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
 @keyframes messageSlideIn {
   from {
     opacity: 0;
@@ -356,8 +453,59 @@ const toggleSidebar = () => {
         <!-- 中间：空白 -->
         <div class="flex-1"></div>
 
-        <!-- 右侧：折叠按钮 -->
+        <!-- 右侧：模型选择和折叠按钮 -->
-        <div class="flex items-center">
+        <div class="flex items-center gap-3">
+          <!-- 模型选择下拉框 -->
+          <div class="relative model-dropdown" v-if="chatModels.length > 0">
+            <button
+              @click="showModelDropdown = !showModelDropdown"
+              class="flex items-center gap-2 px-3 py-1.5 rounded-lg border border-white/[0.08] bg-[#1a1a24] hover:border-orange-500/30 transition-all duration-200"
+            >
+              <div class="flex items-center gap-2">
+                <!-- 动态获取模型图标 -->
+                <span class="text-base">{{ getModelIcon(selectedModel?.provider || '') }}</span>
+                <span class="text-sm text-white">{{ selectedModel?.name || 'Select Model' }}</span>
+              </div>
+              <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
+              <svg class="w-3.5 h-3.5 text-white/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+              </svg>
+            </button>
+
+            <!-- 下拉菜单 -->
+            <Transition name="dropdown">
+              <div
+                v-if="showModelDropdown"
+                class="absolute right-0 top-full mt-2 w-64 bg-[#1a1a24] border border-white/[0.08] rounded-xl shadow-2xl shadow-black/50 overflow-hidden z-50"
+              >
+                <div class="p-2">
+                  <div class="text-xs text-white/40 px-2 py-1 mb-1">Select Chat Model</div>
+                  <button
+                    v-for="model in chatModels"
+                    :key="model.id"
+                    @click="selectedModel = model; showModelDropdown = false"
+                    class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-150"
+                    :class="selectedModel?.id === model.id
+                      ? 'bg-orange-500/15 border border-orange-500/30'
+                      : 'hover:bg-white/5'"
+                  >
+                    <span class="text-lg">{{ getModelIcon(model.provider) }}</span>
+                    <div class="flex-1 text-left">
+                      <div class="text-sm text-white">{{ model.name }}</div>
+                      <div class="text-xs text-white/40">{{ model.provider }} · {{ model.model }}</div>
+                    </div>
+                    <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
+                  </button>
+                </div>
+              </div>
+            </Transition>
+          </div>
+          <!-- 没有模型时的提示 -->
+          <div v-else class="text-xs text-white/30 px-2 flex items-center gap-2">
+            <span class="w-2 h-2 rounded-full bg-white/20"></span>
+            No models
+          </div>
+
           <button
             @click="toggleSidebar"
             class="p-2.5 rounded-xl hover:bg-white/[0.06] text-white/35 hover:text-white/80 transition-all duration-200"