From aeaeaad9098f8638da4b2885bdd0702d3b550322 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Sun, 18 May 2025 17:39:11 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E4=B8=80?=
 =?UTF-8?q?=E4=BA=9B=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

（1）设置页面添加模型选择
（2）输入框添加自动Focus
（3）优化模型选择器的样式
---
 web/src/components/ChatComponent.vue          |  2 +-
 web/src/components/MessageInputComponent.vue  | 17 ++++++-
 web/src/components/ModelSelectorComponent.vue | 16 ++++++-
 web/src/views/SettingView.vue                 | 46 ++++++++++++-------
 4 files changed, 61 insertions(+), 20 deletions(-)

diff --git a/web/src/components/ChatComponent.vue b/web/src/components/ChatComponent.vue
index 298411e9..ee320809 100644
--- a/web/src/components/ChatComponent.vue
+++ b/web/src/components/ChatComponent.vue
@@ -17,7 +17,7 @@
             <PlusCircleOutlined />
           </a-tooltip>
         </div>
-        <ModelSelectorComponent @select-model="handleModelSelect" />
+        <ModelSelectorComponent class="nav-btn borderless" @select-model="handleModelSelect" />
       </div>
       <div class="header__right">
         <div class="nav-btn text" @click="opts.showPanel = !opts.showPanel">
diff --git a/web/src/components/MessageInputComponent.vue b/web/src/components/MessageInputComponent.vue
index 108ddccc..b10a2ad0 100644
--- a/web/src/components/MessageInputComponent.vue
+++ b/web/src/components/MessageInputComponent.vue
@@ -2,6 +2,7 @@
   <div class="input-box" :class="customClasses">
     <div class="input-area">
       <a-textarea
+        ref="inputRef"
         class="user-input"
         v-model:value="inputValue"
         @keydown="handleKeyPress"
@@ -32,7 +33,7 @@
 </template>
 
 <script setup>
-import { ref, computed, toRefs } from 'vue';
+import { ref, computed, toRefs, onMounted } from 'vue';
 import {
   SendOutlined,
   ArrowUpOutlined,
@@ -40,6 +41,8 @@ import {
   PauseOutlined
 } from '@ant-design/icons-vue';
 
+
+const inputRef = ref(null);
 const props = defineProps({
   modelValue: {
     type: String,
@@ -107,6 +110,18 @@ const handleKeyPress = (e) => {
 const handleSendOrStop = () => {
   emit('send');
 };
+
+
+// Wait for component to mount before setting up onStartTyping
+onMounted(() => {
+  // Use the template ref element for onStartTyping
+  setTimeout(() => {
+    if (inputRef.value) {
+      inputRef.value.focus();
+    }
+  }, 100);
+});
+
 </script>
 
 <style lang="less" scoped>
diff --git a/web/src/components/ModelSelectorComponent.vue b/web/src/components/ModelSelectorComponent.vue
index 66b67b20..a6ee8230 100644
--- a/web/src/components/ModelSelectorComponent.vue
+++ b/web/src/components/ModelSelectorComponent.vue
@@ -1,6 +1,6 @@
 <template>
   <a-dropdown>
-    <a class="model-select nav-btn" @click.prevent>
+    <a class="model-select" @click.prevent>
       <BulbOutlined />
       <a-tooltip :title="configStore.config?.model_name" placement="right">
         <span class="model-text text"> {{ configStore.config?.model_name }} </span>
@@ -54,11 +54,25 @@ const handleSelectModel = (provider, name) => {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  padding: 0.25rem 0.5rem;
+  cursor: pointer;
+  border: 1px solid var(--gray-300);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background-color: white;
+
+  &.borderless {
+    border: none;
+  }
 
   .model-text {
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+
 }
 
 .nav-btn {
diff --git a/web/src/views/SettingView.vue b/web/src/views/SettingView.vue
index 8435ee92..a91cdbf5 100644
--- a/web/src/views/SettingView.vue
+++ b/web/src/views/SettingView.vue
@@ -17,25 +17,12 @@
         <a-button type="text" :class="{ activesec: state.section === 'user'}" @click="state.section='user'" :icon="h(UserOutlined)" v-if="userStore.isAdmin"> 用户管理 </a-button>
       </div>
       <div class="setting" v-if="state.windowWidth <= 520 || state.section === 'base'">
-        <h3>功能配置</h3>
-        <div class="section">
-          <div class="card">
-            <span class="label">{{ items?.enable_knowledge_base.des }}</span>
-            <a-switch
-              :checked="configStore.config.enable_knowledge_base"
-              @change="handleChange('enable_knowledge_base', !configStore.config.enable_knowledge_base)"
-            />
-          </div>
-          <div class="card">
-            <span class="label">{{ items?.enable_knowledge_graph.des }}</span>
-            <a-switch
-              :checked="configStore.config.enable_knowledge_graph"
-              @change="handleChange('enable_knowledge_graph', !configStore.config.enable_knowledge_graph)"
-            />
-          </div>
-        </div>
         <h3>检索配置</h3>
         <div class="section">
+          <div class="card card-select">
+            <span class="label">对话模型</span>
+            <ModelSelectorComponent @select-model="handleChatModelSelect" />
+          </div>
           <div class="card card-select">
             <span class="label">{{ items?.embed_model.des }}</span>
             <a-select style="width: 300px"
@@ -81,6 +68,23 @@
             </a-select>
           </div>
         </div>
+        <h3>功能配置</h3>
+        <div class="section">
+          <div class="card">
+            <span class="label">{{ items?.enable_knowledge_base.des }}</span>
+            <a-switch
+              :checked="configStore.config.enable_knowledge_base"
+              @change="handleChange('enable_knowledge_base', !configStore.config.enable_knowledge_base)"
+            />
+          </div>
+          <div class="card">
+            <span class="label">{{ items?.enable_knowledge_graph.des }}</span>
+            <a-switch
+              :checked="configStore.config.enable_knowledge_graph"
+              @change="handleChange('enable_knowledge_graph', !configStore.config.enable_knowledge_graph)"
+            />
+          </div>
+        </div>
       </div>
       <div class="setting" v-if="state.windowWidth <= 520 || state.section === 'model'">
         <h3>模型配置</h3>
@@ -121,6 +125,7 @@ import ModelProvidersComponent from '@/components/ModelProvidersComponent.vue';
 import UserManagementComponent from '@/components/UserManagementComponent.vue';
 import { notification, Button } from 'ant-design-vue';
 import { systemConfigApi } from '@/apis/admin_api'
+import ModelSelectorComponent from '@/components/ModelSelectorComponent.vue';
 
 const configStore = useConfigStore()
 const userStore = useUserStore()
@@ -185,6 +190,13 @@ const updateWindowWidth = () => {
   state.windowWidth = window?.innerWidth || 0
 }
 
+const handleChatModelSelect = ({ provider, name }) => {
+  configStore.setConfigValues({
+    model_provider: provider,
+    model_name: name,
+  })
+}
+
 onMounted(() => {
   updateWindowWidth()
   window.addEventListener('resize', updateWindowWidth)