Merge pull request #107 from xerrors/103-feat-add-switch-model-name

对话页面可以方便的修改模型

web/src/components/ChatComponent.vue

@@ -9,11 +9,29 @@
         >
           <MenuOutlined />
         </div>
-        <a-tooltip :title="configStore.config?.model_name" placement="rightTop">
-          <div class="newchat nav-btn" @click="$emit('newconv')">
-            <PlusCircleOutlined /> <span class="text">新对话</span>
-          </div>
-        </a-tooltip>
+
+        <div class="newchat nav-btn" @click="$emit('newconv')">
+          <PlusCircleOutlined /> <span class="text">新对话</span>
+        </div>
+        <a-dropdown>
+          <a class="model-select nav-btn" @click.prevent>
+            <BulbOutlined /> <span class="text">{{ configStore.config?.model_provider }}/{{ configStore.config?.model_name }}</span>
+          </a>
+          <template #overlay>
+            <a-menu class="scrollable-menu">
+              <a-menu-item-group v-for="(item, key) in modelKeys" :key="key" :title="modelNames[item]?.name">
+                <a-menu-item v-for="(model, idx) in modelNames[item]?.models" :key="`${item}-${idx}`" @click="selectModel(item, model)">
+                  {{ item }}/{{ model }}
+                </a-menu-item>
+              </a-menu-item-group>
+              <a-menu-item-group v-if="customModels.length > 0" title="自定义模型">
+                <a-menu-item v-for="(model, idx) in customModels" :key="`custom-${idx}`" @click="selectModel('custom', model.custom_id)">
+                  custom/{{ model.custom_id }}
+                </a-menu-item>
+              </a-menu-item-group>
+            </a-menu>
+          </template>
+        </a-dropdown>
       </div>
       <div class="header__right">
         <div class="nav-btn text" @click="opts.showPanel = !opts.showPanel">
@@ -165,7 +183,7 @@
 </template>
 
 <script setup>
-import { reactive, ref, onMounted, toRefs, nextTick, onUnmounted, watch } from 'vue'
+import { reactive, ref, onMounted, toRefs, nextTick, onUnmounted, watch, computed } from 'vue'
 import {
   SendOutlined,
   MenuOutlined,
@@ -185,7 +203,7 @@ import {
   FolderOpenOutlined,
   GlobalOutlined,
   FileTextOutlined,
-  RobotOutlined,
+  BulbOutlined,
   CaretRightOutlined,
   DeploymentUnitOutlined,
 } from '@ant-design/icons-vue'
@@ -607,6 +625,22 @@ watch(
   },
   { deep: true }
 );
+
+const modelNames = computed(() => configStore.config?.model_names)
+const modelStatus = computed(() => configStore.config?.model_provider_status)
+const customModels = computed(() => configStore.config?.custom_models || [])
+
+// 筛选 modelStatus 中为真的key
+const modelKeys = computed(() => {
+  return Object.keys(modelStatus.value || {}).filter(key => modelStatus.value?.[key])
+})
+
+// 选择模型的方法
+const selectModel = (provider, name) => {
+  configStore.setConfigValue('model_provider', provider)
+  configStore.setConfigValue('model_name', name)
+  message.success(`已切换到模型: ${provider}/${name}`)
+}
 </script>
 
 <style lang="less" scoped>
@@ -649,9 +683,9 @@ watch(
     border-radius: 8px;
     color: var(--gray-900);
     cursor: pointer;
-    font-size: 1rem;
+    // font-size: 1rem;
     width: auto;
-    padding: 0.5rem 1rem;
+    padding: 0.5rem 0.75rem;
 
     .text {
       margin-left: 10px;
@@ -662,6 +696,18 @@ watch(
     }
   }
 
+  .model-select {
+    // color: var(--gray-900);
+    max-width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    .text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
 }
 .metas {
   display: flex;
@@ -1109,6 +1155,29 @@ watch(
     margin-right: 8px;
   }
 }
+
+.scrollable-menu {
+  max-height: 300px;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--gray-400);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--gray-500);
+  }
+}
 </style>
 
 <style lang="less">
@@ -1161,4 +1230,14 @@ watch(
 }
 </style>
 
+<style lang="less">
+// 添加全局样式以确保滚动功能在dropdown内正常工作
+.ant-dropdown-menu {
+  &.scrollable-menu {
+    max-height: 300px;
+    overflow-y: auto;
+  }
+}
+</style>
+
 

web/src/views/SettingView.vue

@@ -94,7 +94,7 @@
       </div>
       <div class="setting" v-if="state.windowWidth <= 520 || state.section === 'model'">
         <h3>模型配置</h3>
-        <p>请在 <code>src/.env</code> 文件中配置对应的 APIKEY</p>
+        <p>请在 <code>src/.env</code> 文件中配置对应的 APIKEY，并重新启动服务</p>
         <div class="model-provider-card">
           <div class="card-header">
             <h3>自定义模型</h3>
@@ -167,9 +167,9 @@
                 <InfoCircleOutlined />
               </a>
             </div>
-            <a-button 
-              type="text" 
-              class="expand-button" 
+            <a-button
+              type="text"
+              class="expand-button"
               @click.stop="toggleExpand(item)"
             >
               <span class="icon-wrapper" :class="{'rotated': expandedModels[item]}">
@@ -550,7 +550,7 @@ const sendRestart = () => {
       .model-icon {
         width: 28px;
         height: 28px;
-        
+
         // 灰度
         filter: grayscale(100%);
         img {
@@ -627,7 +627,7 @@ const sendRestart = () => {
         .icon-wrapper {
           display: inline-flex;
           transition: transform 0.2s ease;
-          
+
           &.rotated {
             transform: rotate(180deg);
           }
@@ -639,7 +639,7 @@ const sendRestart = () => {
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.2s ease-out;  // 先快后慢
-      
+
       &.expanded {
         max-height: 700px; /* 设置一个足够大的值 */
       }
@@ -710,7 +710,7 @@ const sendRestart = () => {
               flex: 1;
               margin-right: 8px;
               position: relative;
-              
+
               &:hover::after {
                 content: attr(title);
                 position: absolute;