From e4b12ae5f537bcd41875a945168d16ff9dff44b6 Mon Sep 17 00:00:00 2001
From: SuperManTouX <93423476+SuperManTouX@users.noreply.github.com>
Date: Fri, 6 Mar 2026 10:08:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A8=A1=E5=9E=8BSelect=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E5=88=B0Sidebar=EF=BC=9B=E6=9B=B4=E6=94=B9=E6=96=B0?=
 =?UTF-8?q?=E5=BB=BA=E5=AF=B9=E8=AF=9DButton=E3=80=81=E6=A8=A1=E5=9E=8BSel?=
 =?UTF-8?q?ect=E7=9A=84=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=B8=A4=E4=B8=AA?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=BB=91=E5=A4=9C=E6=A8=A1=E5=BC=8F=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=EF=BC=9B=EF=BC=9B=E6=9B=B4=E6=94=B9Sidebar=E6=A0=87?=
 =?UTF-8?q?=E9=A2=98=E4=B8=BAKexue=EF=BC=9B=E6=9B=B4=E6=94=B9=E5=AF=B9?=
 =?UTF-8?q?=E8=AF=9D=E9=A6=96=E9=A1=B5=E6=A0=87=E9=A2=98=E4=B8=BAKexue?=
 =?UTF-8?q?=EF=BC=9B=E9=9A=90=E8=97=8FHeader=E4=B8=AD=E7=9A=84=E4=B8=A4?=
 =?UTF-8?q?=E4=B8=AA=E6=8C=89=E9=92=AE=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chat/ChatHeader.vue     | 189 +------------------
 src/components/chat/WelcomeScreen.vue  |   2 +-
 src/components/sidebar/ChatSidebar.vue | 241 +++++++++++++++++++++++--
 3 files changed, 235 insertions(+), 197 deletions(-)

diff --git a/src/components/chat/ChatHeader.vue b/src/components/chat/ChatHeader.vue
index 8119f81..64bbd86 100644
--- a/src/components/chat/ChatHeader.vue
+++ b/src/components/chat/ChatHeader.vue
@@ -19,48 +19,17 @@
       </div>
     </div>
 
-    <!-- 中间：模型选择（可选） -->
-    <div class="header-center">
-      <button class="model-selector" @click="showModelMenu = !showModelMenu">
-        <Sparkles :size="16" />
-        <span>{{ currentModel }}</span>
-        <ChevronDown :size="14" />
-      </button>
-
-      <Transition name="dropdown">
-        <div v-if="showModelMenu" class="model-menu">
-          <button
-            v-for="model in models"
-            :key="model.id"
-            class="model-option"
-            :class="{ active: model.id === currentModelId }"
-            @click="selectModel(model.id, model.name)"
-          >
-            <div class="model-info">
-              <span class="model-name">{{ model.name }}</span>
-              <span class="model-desc">{{ model.description }}</span>
-            </div>
-            <Check
-              v-if="model.id === currentModelId"
-              :size="16"
-              class="check-icon"
-            />
-          </button>
-        </div>
-      </Transition>
-    </div>
-
     <!-- 右侧：操作按钮 -->
     <div class="header-right">
       <!-- 对话大小切换 -->
-      <button
+      <!-- <button
         class="header-btn"
         :title="isWideMode ? '标准视图' : '宽屏视图'"
         @click="$emit('toggle-wide-mode')"
       >
         <Maximize2 v-if="!isWideMode" :size="18" />
         <Minimize2 v-else :size="18" />
-      </button>
+      </button> -->
 
       <!-- 清空对话 -->
       <button
@@ -83,13 +52,13 @@
       </button>
 
       <!-- 更多操作 -->
-      <button
+      <!-- <button
         class="header-btn"
         title="更多选项"
         @click="showMoreMenu = !showMoreMenu"
       >
         <MoreHorizontal :size="18" />
-      </button>
+      </button> -->
 
       <Transition name="dropdown">
         <div v-if="showMoreMenu" class="more-menu">
@@ -117,12 +86,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { ref } from "vue";
 import {
   Menu,
-  Sparkles,
-  ChevronDown,
-  Check,
   Maximize2,
   Minimize2,
   Trash2,
@@ -134,7 +100,6 @@ import {
   Settings,
 } from "@/components/icons";
 import { useSettingsStore } from "@/stores/settings.ts";
-import { chatApi } from "@/services/api.ts";
 
 const props = withDefaults(
   defineProps<{
@@ -165,37 +130,9 @@ const emit = defineEmits<{
   "conversation-settings": [];
 }>();
 
-const showModelMenu = ref(false);
 const showMoreMenu = ref(false);
 const settingsStore = useSettingsStore();
 
-const currentModel = ref(localStorage.getItem("modelSelect") || "");
-const currentModelId = ref(settingsStore.getSelectedModelId());
-const models: any = ref([]);
-
-onMounted(() => {
-  chatApi.getModels().then((res: any) => {
-    models.value = res;
-    // 初始化模型显示名称
-    const model = models.value?.find((m: any) => m.id === currentModelId.value);
-    if (model) {
-      currentModel.value = model.name;
-    } else if (models.value.length > 0) {
-      currentModel.value = models.value[0].name;
-      currentModelId.value = models.value[0].id;
-    }
-    localStorage.setItem("modelSelect", currentModel.value);
-  });
-});
-
-function selectModel(modelId: string, modelName: string) {
-  currentModel.value = modelName;
-  currentModelId.value = modelId;
-  localStorage.setItem("modelSelect", modelName);
-  settingsStore.setSelectedModelId(modelId); // 更新选中的模型 ID
-  showModelMenu.value = false;
-}
-
 function handleClear() {
   if (confirm("确定要清空当前对话吗？此操作不可恢复。")) {
     emit("clear");
@@ -220,9 +157,6 @@ function handleArchive() {
 // 点击外部关闭菜单
 function handleClickOutside(event: MouseEvent) {
   const target = event.target as HTMLElement;
-  if (!target.closest(".model-selector") && !target.closest(".model-menu")) {
-    showModelMenu.value = false;
-  }
   if (!target.closest(".header-btn") && !target.closest(".more-menu")) {
     showMoreMenu.value = false;
   }
@@ -306,114 +240,6 @@ if (typeof window !== "undefined") {
   color: #9ca3af;
 }
 
-.header-center {
-  position: relative;
-}
-
-.model-selector {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  background: white;
-  color: #374151;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  .dark & {
-    background: #2d2d3d;
-    border-color: #374151;
-    color: #e5e7eb;
-  }
-
-  &:hover {
-    border-color: #3b82f6;
-  }
-
-  svg:first-child {
-    color: #8b5cf6;
-  }
-}
-
-.model-menu {
-  position: absolute;
-  top: calc(100% + 8px);
-  left: 50%;
-  transform: translateX(-50%);
-  min-width: 280px;
-  padding: 8px;
-  background: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 14px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
-  z-index: 100;
-
-  .dark & {
-    background: #1e1e2e;
-    border-color: #2d2d3d;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
-  }
-}
-
-.model-option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 12px 14px;
-  border: none;
-  border-radius: 10px;
-  background: transparent;
-  text-align: left;
-  cursor: pointer;
-  transition: all 0.15s ease;
-
-  &:hover {
-    background: #f3f4f6;
-
-    .dark & {
-      background: #2d2d3d;
-    }
-  }
-
-  &.active {
-    background: rgba(59, 130, 246, 0.1);
-
-    .model-name {
-      color: #3b82f6;
-    }
-  }
-}
-
-.model-info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.model-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: #1f2937;
-
-  .dark & {
-    color: #f3f4f6;
-  }
-}
-
-.model-desc {
-  font-size: 12px;
-  color: #9ca3af;
-}
-
-.check-icon {
-  color: #3b82f6;
-}
-
 .header-right {
   display: flex;
   align-items: center;
@@ -522,9 +348,4 @@ if (typeof window !== "undefined") {
   opacity: 0;
   transform: translateY(-8px);
 }
-
-.header-center .dropdown-enter-from,
-.header-center .dropdown-leave-to {
-  transform: translateX(-50%) translateY(-8px);
-}
 </style>
diff --git a/src/components/chat/WelcomeScreen.vue b/src/components/chat/WelcomeScreen.vue
index c70e4a1..4610083 100644
--- a/src/components/chat/WelcomeScreen.vue
+++ b/src/components/chat/WelcomeScreen.vue
@@ -8,7 +8,7 @@
         </div>
         <div class="logo-glow"></div>
       </div>
-      <h1 class="title">AI 智能助手</h1>
+      <h1 class="title">Kexue AI 智能助手</h1>
       <p class="subtitle">我可以帮助你解答问题、生成内容、分析数据等</p>
     </div>
 
diff --git a/src/components/sidebar/ChatSidebar.vue b/src/components/sidebar/ChatSidebar.vue
index 5b38b81..88eb7ca 100644
--- a/src/components/sidebar/ChatSidebar.vue
+++ b/src/components/sidebar/ChatSidebar.vue
@@ -9,7 +9,7 @@
       <div class="sidebar-header">
         <div class="logo">
           <Bot :size="24" class="logo-icon" />
-          <span v-show="!isCollapsed" class="logo-text">AI Chat</span>
+          <span v-show="!isCollapsed" class="logo-text">Kexue AI Chat</span>
         </div>
         <button
           class="collapse-btn"
@@ -20,6 +20,37 @@
         </button>
       </div>
 
+      <!-- 模型选择 -->
+      <div v-show="!isCollapsed" class="model-selector-section">
+        <button class="model-selector" @click="showModelMenu = !showModelMenu">
+          <Sparkles :size="16" />
+          <span class="model-name-display">{{ currentModel }}</span>
+          <ChevronDown :size="14" />
+        </button>
+
+        <Transition name="dropdown">
+          <div v-if="showModelMenu" class="model-menu">
+            <button
+              v-for="model in models"
+              :key="model.id"
+              class="model-option"
+              :class="{ active: model.id === currentModelId }"
+              @click="selectModel(model.id, model.name)"
+            >
+              <div class="model-info">
+                <span class="model-name">{{ model.name }}</span>
+                <span class="model-desc">{{ model.description }}</span>
+              </div>
+              <Check
+                v-if="model.id === currentModelId"
+                :size="16"
+                class="check-icon"
+              />
+            </button>
+          </div>
+        </Transition>
+      </div>
+
       <!-- 新建对话按钮 -->
       <div class="new-chat-section">
         <button class="new-chat-btn" @click="handleNewChat">
@@ -114,10 +145,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { storeToRefs } from "pinia";
 import { useChatStore } from "@/stores/chat";
 import { useSettingsStore } from "@/stores/settings";
+import { chatApi } from "@/services/api.ts";
 import ConversationItem from "./ConversationItem.vue";
 import {
   Bot,
@@ -132,6 +164,9 @@ import {
   Keyboard,
   Settings,
   ChevronLeft,
+  Sparkles,
+  ChevronDown,
+  Check,
 } from "@/components/icons";
 
 const chatStore = useChatStore();
@@ -148,6 +183,35 @@ const {
 
 const currentTheme = computed(() => settings.value.theme);
 
+// 模型选择相关
+const showModelMenu = ref(false);
+const currentModel = ref(localStorage.getItem("modelSelect") || "");
+const currentModelId = ref(settingsStore.getSelectedModelId());
+const models: any = ref([]);
+
+onMounted(() => {
+  chatApi.getModels().then((res: any) => {
+    models.value = res;
+    // 初始化模型显示名称
+    const model = models.value?.find((m: any) => m.id === currentModelId.value);
+    if (model) {
+      currentModel.value = model.name;
+    } else if (models.value.length > 0) {
+      currentModel.value = models.value[0].name;
+      currentModelId.value = models.value[0].id;
+    }
+    localStorage.setItem("modelSelect", currentModel.value);
+  });
+});
+
+function selectModel(modelId: string, modelName: string) {
+  currentModel.value = modelName;
+  currentModelId.value = modelId;
+  localStorage.setItem("modelSelect", modelName);
+  settingsStore.setSelectedModelId(modelId); // 更新选中的模型 ID
+  showModelMenu.value = false;
+}
+
 // 方法
 function handleNewChat() {
   chatStore.createConversation();
@@ -211,13 +275,25 @@ function startResize(e: MouseEvent) {
   document.addEventListener("mousemove", handleMouseMove);
   document.addEventListener("mouseup", handleMouseUp);
 }
+
+// 点击外部关闭模型菜单
+function handleClickOutside(event: MouseEvent) {
+  const target = event.target as HTMLElement;
+  if (!target.closest(".model-selector") && !target.closest(".model-menu")) {
+    showModelMenu.value = false;
+  }
+}
+
+if (typeof window !== "undefined") {
+  document.addEventListener("click", handleClickOutside);
+}
 </script>
 
 <style lang="scss" scoped>
 .chat-sidebar {
   position: relative;
   height: 100vh;
-  background: #f8fafc;
+  background: #ffffff;
   border-right: 1px solid #e2e8f0;
   transition: width 0.3s ease;
   overflow: hidden;
@@ -310,8 +386,147 @@ function startResize(e: MouseEvent) {
   }
 }
 
+.model-selector-section {
+  position: relative;
+  padding: 12px 16px 6px;
+}
+
+.model-selector {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 12px;
+  border-radius: 10px;
+  background: #f3f4f5;
+  color: #374151;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  .dark & {
+    background: #2d2d3d;
+    border-color: #374151;
+    color: #e5e7eb;
+  }
+
+  &:hover {
+    border-color: #3b82f6;
+  }
+
+  svg:first-child {
+    color: #8b5cf6;
+    flex-shrink: 0;
+  }
+
+  .model-name-display {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.model-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 16px;
+  right: 16px;
+  min-width: 200px;
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 8px;
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 14px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+  z-index: 100;
+
+  .dark & {
+    background: #1e1e2e;
+    border-color: #2d2d3d;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
+  }
+}
+
+.model-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 12px 14px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: #f3f4f6;
+
+    .dark & {
+      background: #2d2d3d;
+    }
+  }
+
+  &.active {
+    background: rgba(59, 130, 246, 0.1);
+
+    .model-name {
+      color: #3b82f6;
+    }
+  }
+}
+
+.model-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: hidden;
+}
+
+.model-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #1f2937;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  .dark & {
+    color: #f3f4f6;
+  }
+}
+
+.model-desc {
+  font-size: 12px;
+  color: #9ca3af;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.check-icon {
+  color: #3b82f6;
+  flex-shrink: 0;
+}
+
+// 下拉动画
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.2s ease;
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
 .new-chat-section {
-  padding: 12px 16px;
+  padding: 6px 16px;
 }
 
 .new-chat-btn {
@@ -320,10 +535,9 @@ function startResize(e: MouseEvent) {
   justify-content: center;
   gap: 8px;
   width: 100%;
-  padding: 12px 16px;
-  border: 1px dashed #d1d5db;
+  padding: 6px 12px;
   border-radius: 12px;
-  background: transparent;
+  background: #f3f4f5;
   color: #374151;
   font-size: 14px;
   font-weight: 500;
@@ -331,19 +545,22 @@ function startResize(e: MouseEvent) {
   transition: all 0.2s ease;
 
   .dark & {
-    border-color: #4b5563;
+    background: #2d2d3d;
     color: #e5e7eb;
+    &:hover {
+      background: #0475ed;
+      color: #e5e7eb;
+    }
   }
 
   &:hover {
-    border-color: #3b82f6;
-    background: rgba(59, 130, 246, 0.05);
-    color: #3b82f6;
+    background: #000f33;
+    color: #e5e7eb;
   }
 }
 
 .search-section {
-  padding: 0 16px 12px;
+  padding: 6px 16px 12px;
 }
 
 .search-box {