From 6984a09737353e0579cca2f031337c1a0e481730 Mon Sep 17 00:00:00 2001
From: SuperManTouX <93423476+SuperManTouX@users.noreply.github.com>
Date: Fri, 6 Mar 2026 09:23:39 +0800
Subject: [PATCH] =?UTF-8?q?perf(code):=20=E6=A0=BC=E5=BC=8F=E5=8C=96?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BB=A5=E6=8F=90=E5=8D=87=E5=8F=AF=E8=AF=BB?=
 =?UTF-8?q?=E6=80=A7=E4=B8=8E=E4=B8=80=E8=87=B4=E6=80=A7=EF=BC=8C=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=E4=BB=A3=E7=A0=81=E9=A3=8E=E6=A0=BC=20[=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=EF=BC=9A=E4=BD=BF=E7=94=A8=20Prettier=20=E8=BF=9B?=
 =?UTF-8?q?=E8=A1=8C=E6=A0=BC=E5=BC=8F=E5=8C=96]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |   17 +
 package.json                                  |    1 +
 src/App.vue                                   |  447 ++--
 src/components/chat/ChatHeader.vue            | 1060 ++++-----
 src/components/chat/ChatMain.vue              |  836 +++----
 src/components/chat/MessageList.vue           |  794 +++---
 src/components/chat/WelcomeScreen.vue         |  752 +++---
 src/components/icons/index.ts                 |  266 +--
 src/components/input/AttachmentPreview.vue    |  535 ++---
 src/components/input/ChatInput.vue            | 1348 ++++++-----
 src/components/message/CodeBlock.vue          |  444 ++--
 src/components/message/MessageActions.vue     |  640 ++---
 src/components/message/MessageBubble.vue      | 1676 ++++++-------
 .../components/EChartsContainerNode.vue       |  180 +-
 src/components/message/components/Loading.vue |  140 +-
 .../message/components/ThinkingNode.vue       |  431 ++--
 .../modals/ConversationSettingsModal.vue      | 1526 ++++++------
 src/components/modals/SearchModal.vue         |  740 +++---
 src/components/modals/SettingsModal.vue       | 2120 ++++++++---------
 src/components/modals/ShortcutsModal.vue      |  616 ++---
 src/components/sidebar/ChatSidebar.vue        |  990 ++++----
 src/components/sidebar/ConversationItem.vue   |  555 +++--
 src/components/ui/FormSelect.vue              |  484 ++--
 src/components/ui/FormSlider.vue              |  235 +-
 src/components/ui/FormSwitch.vue              |  162 +-
 src/composables/useKeyboard.ts                |  261 +-
 src/main.ts                                   |   52 +-
 src/services/api.ts                           |  605 ++---
 src/stores/chat.ts                            |  570 ++---
 src/stores/settings.ts                        |  614 ++---
 src/style.css                                 |  158 +-
 src/styles/main.scss                          |  162 +-
 src/types/chat.ts                             |  294 +--
 src/utils/helpers.ts                          |  296 +--
 34 files changed, 10043 insertions(+), 9964 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f8b708a..6573518 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
         "@vue/tsconfig": "^0.8.1",
         "autoprefixer": "^10.4.24",
         "postcss": "^8.5.6",
+        "prettier": "^3.8.1",
         "sass": "^1.97.3",
         "tailwindcss": "^4.1.18",
         "typescript": "~5.9.3",
@@ -4363,6 +4364,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/prettier": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmmirror.com/prettier/-/prettier-3.8.1.tgz",
+      "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/property-information": {
       "version": "7.1.0",
       "resolved": "https://registry.npmmirror.com/property-information/-/property-information-7.1.0.tgz",
diff --git a/package.json b/package.json
index 0be05b6..a2b929e 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "@vue/tsconfig": "^0.8.1",
     "autoprefixer": "^10.4.24",
     "postcss": "^8.5.6",
+    "prettier": "^3.8.1",
     "sass": "^1.97.3",
     "tailwindcss": "^4.1.18",
     "typescript": "~5.9.3",
diff --git a/src/App.vue b/src/App.vue
index e033c26..c33840c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,225 +1,222 @@
-<template>
-  <div class="app" :class="{ 'dark': isDark }">
-    <!-- 侧边栏 -->
-    <ChatSidebar />
-
-    <!-- 主内容区 -->
-    <ChatMain
-        ref="chatMainRef"
-        @toggle-sidebar="toggleSidebar"
-    />
-
-    <!-- 模态框 -->
-    <SearchModal />
-    <ShortcutsModal />
-    <SettingsModal />
-    <ConversationSettingsModal />
-
-    <!-- Toast 通知 -->
-    <Teleport to="body">
-      <TransitionGroup name="toast" tag="div" class="toast-container">
-        <div
-            v-for="toast in toasts"
-            :key="toast.id"
-            class="toast"
-            :class="toast.type"
-        >
-          <Check v-if="toast.type === 'success'" :size="18" />
-          <AlertCircle v-else-if="toast.type === 'error'" :size="18" />
-          <Info v-else :size="18" />
-          <span>{{ toast.message }}</span>
-        </div>
-      </TransitionGroup>
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useChatStore } from '@/stores/chat'
-import { useSettingsStore } from '@/stores/settings'
-import { useKeyboard, getDefaultShortcuts } from '@/composables/useKeyboard'
-import ChatSidebar from '@/components/sidebar/ChatSidebar.vue'
-import ChatMain from '@/components/chat/ChatMain.vue'
-import SearchModal from '@/components/modals/SearchModal.vue'
-import ShortcutsModal from '@/components/modals/ShortcutsModal.vue'
-import SettingsModal from '@/components/modals/SettingsModal.vue'
-import ConversationSettingsModal from '@/components/modals/ConversationSettingsModal.vue'
-import { Check, AlertCircle, Info } from '@/components/icons'
-
-// Stores
-const chatStore = useChatStore()
-const settingsStore = useSettingsStore()
-
-const { settings } = storeToRefs(settingsStore)
-
-// Refs
-const chatMainRef = ref<InstanceType<typeof ChatMain> | null>(null)
-
-// 计算属性
-const isDark = computed(() => {
-  if (settings.value.theme === 'system') {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches
-  }
-  return settings.value.theme === 'dark'
-})
-
-// Toast 通知系统
-interface Toast {
-  id: number
-  message: string
-  type: 'success' | 'error' | 'info'
-}
-
-const toasts = ref<Toast[]>([])
-let toastId = 0
-
-function showToast(message: string, type: Toast['type'] = 'info') {
-  const id = ++toastId
-  toasts.value.push({ id, message, type })
-
-  setTimeout(() => {
-    const index = toasts.value.findIndex(t => t.id === id)
-    if (index !== -1) {
-      toasts.value.splice(index, 1)
-    }
-  }, 3000)
-}
-
-// 方法
-function toggleSidebar() {
-  settingsStore.toggleSidebar()
-}
-
-function newChat() {
-  chatStore.createConversation()
-  showToast('已创建新对话', 'success')
-}
-
-function focusInput() {
-  chatMainRef.value?.focusInput()
-}
-
-// 快捷键
-useKeyboard(
-    getDefaultShortcuts({
-      newChat,
-      toggleSidebar,
-      focusInput,
-      sendMessage: () => {}, // 由 ChatInput 内部处理
-      cancelStream: () => {
-        if (chatStore.isStreaming) {
-          chatStore.stopStreaming()
-          showToast('已停止生成', 'info')
-        }
-      },
-      toggleTheme: () => {
-        settingsStore.toggleTheme()
-        showToast(`主题已切换为 ${settings.value.theme}`, 'success')
-      },
-      showShortcuts: () => {
-        settingsStore.openShortcutsModal()
-      },
-      searchConversations: () => {
-        settingsStore.openSearchModal()
-      },
-    })
-)
-
-// 初始化
-onMounted(() => {
-  // 如果没有对话，创建一个
-  if (chatStore.conversations.length === 0) {
-    chatStore.createConversation()
-  }
-})
-
-// 暴露给全局使用
-window.$toast = showToast
-</script>
-
-<style lang="scss">
-.app {
-  display: flex;
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-  background: #f5f5f5;
-
-  &.dark {
-    background: #11111b;
-    color: #e5e7eb;
-  }
-}
-
-// Toast 样式
-.toast-container {
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  z-index: 9999;
-  pointer-events: none;
-}
-
-.toast {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 14px 20px;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
-  font-size: 14px;
-  font-weight: 500;
-  color: #374151;
-  pointer-events: auto;
-
-  .dark & {
-    background: #2d2d3d;
-    color: #e5e7eb;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
-  }
-
-  &.success {
-    svg {
-      color: #10b981;
-    }
-  }
-
-  &.error {
-    svg {
-      color: #ef4444;
-    }
-  }
-
-  &.info {
-    svg {
-      color: #3b82f6;
-    }
-  }
-}
-
-// Toast 动画
-.toast-enter-active,
-.toast-leave-active {
-  transition: all 0.3s ease;
-}
-
-.toast-enter-from {
-  opacity: 0;
-  transform: translateX(100px);
-}
-
-.toast-leave-to {
-  opacity: 0;
-  transform: translateX(100px);
-}
-
-.toast-move {
-  transition: transform 0.3s ease;
-}
-</style>
\ No newline at end of file
+<template>
+  <div class="app" :class="{ dark: isDark }">
+    <!-- 侧边栏 -->
+    <ChatSidebar />
+
+    <!-- 主内容区 -->
+    <ChatMain ref="chatMainRef" @toggle-sidebar="toggleSidebar" />
+
+    <!-- 模态框 -->
+    <SearchModal />
+    <ShortcutsModal />
+    <SettingsModal />
+    <ConversationSettingsModal />
+
+    <!-- Toast 通知 -->
+    <Teleport to="body">
+      <TransitionGroup name="toast" tag="div" class="toast-container">
+        <div
+          v-for="toast in toasts"
+          :key="toast.id"
+          class="toast"
+          :class="toast.type"
+        >
+          <Check v-if="toast.type === 'success'" :size="18" />
+          <AlertCircle v-else-if="toast.type === 'error'" :size="18" />
+          <Info v-else :size="18" />
+          <span>{{ toast.message }}</span>
+        </div>
+      </TransitionGroup>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+import { storeToRefs } from "pinia";
+import { useChatStore } from "@/stores/chat";
+import { useSettingsStore } from "@/stores/settings";
+import { useKeyboard, getDefaultShortcuts } from "@/composables/useKeyboard";
+import ChatSidebar from "@/components/sidebar/ChatSidebar.vue";
+import ChatMain from "@/components/chat/ChatMain.vue";
+import SearchModal from "@/components/modals/SearchModal.vue";
+import ShortcutsModal from "@/components/modals/ShortcutsModal.vue";
+import SettingsModal from "@/components/modals/SettingsModal.vue";
+import ConversationSettingsModal from "@/components/modals/ConversationSettingsModal.vue";
+import { Check, AlertCircle, Info } from "@/components/icons";
+
+// Stores
+const chatStore = useChatStore();
+const settingsStore = useSettingsStore();
+
+const { settings } = storeToRefs(settingsStore);
+
+// Refs
+const chatMainRef = ref<InstanceType<typeof ChatMain> | null>(null);
+
+// 计算属性
+const isDark = computed(() => {
+  if (settings.value.theme === "system") {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+  return settings.value.theme === "dark";
+});
+
+// Toast 通知系统
+interface Toast {
+  id: number;
+  message: string;
+  type: "success" | "error" | "info";
+}
+
+const toasts = ref<Toast[]>([]);
+let toastId = 0;
+
+function showToast(message: string, type: Toast["type"] = "info") {
+  const id = ++toastId;
+  toasts.value.push({ id, message, type });
+
+  setTimeout(() => {
+    const index = toasts.value.findIndex((t) => t.id === id);
+    if (index !== -1) {
+      toasts.value.splice(index, 1);
+    }
+  }, 3000);
+}
+
+// 方法
+function toggleSidebar() {
+  settingsStore.toggleSidebar();
+}
+
+function newChat() {
+  chatStore.createConversation();
+  showToast("已创建新对话", "success");
+}
+
+function focusInput() {
+  chatMainRef.value?.focusInput();
+}
+
+// 快捷键
+useKeyboard(
+  getDefaultShortcuts({
+    newChat,
+    toggleSidebar,
+    focusInput,
+    sendMessage: () => {}, // 由 ChatInput 内部处理
+    cancelStream: () => {
+      if (chatStore.isStreaming) {
+        chatStore.stopStreaming();
+        showToast("已停止生成", "info");
+      }
+    },
+    toggleTheme: () => {
+      settingsStore.toggleTheme();
+      showToast(`主题已切换为 ${settings.value.theme}`, "success");
+    },
+    showShortcuts: () => {
+      settingsStore.openShortcutsModal();
+    },
+    searchConversations: () => {
+      settingsStore.openSearchModal();
+    },
+  }),
+);
+
+// 初始化
+onMounted(() => {
+  // 如果没有对话，创建一个
+  if (chatStore.conversations.length === 0) {
+    chatStore.createConversation();
+  }
+});
+
+// 暴露给全局使用
+window.$toast = showToast;
+</script>
+
+<style lang="scss">
+.app {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: #f5f5f5;
+
+  &.dark {
+    background: #11111b;
+    color: #e5e7eb;
+  }
+}
+
+// Toast 样式
+.toast-container {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+.toast {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 20px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  font-size: 14px;
+  font-weight: 500;
+  color: #374151;
+  pointer-events: auto;
+
+  .dark & {
+    background: #2d2d3d;
+    color: #e5e7eb;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
+  }
+
+  &.success {
+    svg {
+      color: #10b981;
+    }
+  }
+
+  &.error {
+    svg {
+      color: #ef4444;
+    }
+  }
+
+  &.info {
+    svg {
+      color: #3b82f6;
+    }
+  }
+}
+
+// Toast 动画
+.toast-enter-active,
+.toast-leave-active {
+  transition: all 0.3s ease;
+}
+
+.toast-enter-from {
+  opacity: 0;
+  transform: translateX(100px);
+}
+
+.toast-leave-to {
+  opacity: 0;
+  transform: translateX(100px);
+}
+
+.toast-move {
+  transition: transform 0.3s ease;
+}
+</style>
diff --git a/src/components/chat/ChatHeader.vue b/src/components/chat/ChatHeader.vue
index 105001b..8119f81 100644
--- a/src/components/chat/ChatHeader.vue
+++ b/src/components/chat/ChatHeader.vue
@@ -1,530 +1,530 @@
-<template>
-  <header class="chat-header">
-    <!-- 左侧：侧边栏切换和标题 -->
-    <div class="header-left">
-      <button
-        v-if="showSidebarToggle"
-        class="toggle-sidebar-btn"
-        title="切换侧边栏 (Ctrl+B)"
-        @click="$emit('toggle-sidebar')"
-      >
-        <Menu :size="20" />
-      </button>
-
-      <div class="conversation-info">
-        <h1 class="title">{{ title }}</h1>
-        <span v-if="messageCount > 0" class="message-count">
-          {{ messageCount }} 条消息
-        </span>
-      </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
-        class="header-btn"
-        :title="isWideMode ? '标准视图' : '宽屏视图'"
-        @click="$emit('toggle-wide-mode')"
-      >
-        <Maximize2 v-if="!isWideMode" :size="18" />
-        <Minimize2 v-else :size="18" />
-      </button>
-
-      <!-- 清空对话 -->
-      <button
-        class="header-btn"
-        title="清空对话"
-        :disabled="messageCount === 0"
-        @click="handleClear"
-      >
-        <Trash2 :size="18" />
-      </button>
-
-      <!-- 导出对话 -->
-      <button
-        class="header-btn"
-        title="导出对话"
-        :disabled="messageCount === 0"
-        @click="$emit('export')"
-      >
-        <Download :size="18" />
-      </button>
-
-      <!-- 更多操作 -->
-      <button
-        class="header-btn"
-        title="更多选项"
-        @click="showMoreMenu = !showMoreMenu"
-      >
-        <MoreHorizontal :size="18" />
-      </button>
-
-      <Transition name="dropdown">
-        <div v-if="showMoreMenu" class="more-menu">
-          <button class="menu-item" @click="handleShare">
-            <ExternalLink :size="16" />
-            <span>分享对话</span>
-          </button>
-          <button class="menu-item" @click="handlePin">
-            <Pin :size="16" />
-            <span>{{ isPinned ? "取消置顶" : "置顶对话" }}</span>
-          </button>
-          <button class="menu-item" @click="handleArchive">
-            <Archive :size="16" />
-            <span>归档对话</span>
-          </button>
-          <div class="menu-divider"></div>
-          <button class="menu-item" @click="handleSettings">
-            <Settings :size="16" />
-            <span>对话设置</span>
-          </button>
-        </div>
-      </Transition>
-    </div>
-  </header>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import {
-  Menu,
-  Sparkles,
-  ChevronDown,
-  Check,
-  Maximize2,
-  Minimize2,
-  Trash2,
-  Download,
-  MoreHorizontal,
-  ExternalLink,
-  Pin,
-  Archive,
-  Settings,
-} from "@/components/icons";
-import { useSettingsStore } from "@/stores/settings.ts";
-import { chatApi } from "@/services/api.ts";
-
-const props = withDefaults(
-  defineProps<{
-    title?: string;
-    messageCount?: number;
-    showSidebarToggle?: boolean;
-    isWideMode?: boolean;
-    isPinned?: boolean;
-  }>(),
-  {
-    title: "新对话",
-    messageCount: 0,
-    showSidebarToggle: true,
-    isWideMode: true,
-    isPinned: false,
-  },
-);
-
-const emit = defineEmits<{
-  "toggle-sidebar": [];
-  "toggle-wide-mode": [];
-  clear: [];
-  export: [];
-  share: [];
-  pin: [];
-  archive: [];
-  settings: [];
-  "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");
-  }
-}
-
-function handleShare() {
-  showMoreMenu.value = false;
-  emit("share");
-}
-
-function handlePin() {
-  showMoreMenu.value = false;
-  emit("pin");
-}
-
-function handleArchive() {
-  showMoreMenu.value = false;
-  emit("archive");
-}
-
-// 点击外部关闭菜单
-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;
-  }
-}
-
-function handleSettings() {
-  showMoreMenu.value = false;
-  settingsStore.openConversationSettingsModal();
-}
-
-if (typeof window !== "undefined") {
-  document.addEventListener("click", handleClickOutside);
-}
-</script>
-
-<style lang="scss" scoped>
-.chat-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 64px;
-  padding: 0 20px;
-  background: white;
-  border-bottom: 1px solid #e2e8f0;
-  flex-shrink: 0;
-
-  .dark & {
-    background: #1e1e2e;
-    border-bottom-color: #2d2d3d;
-  }
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.toggle-sidebar-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border: none;
-  border-radius: 10px;
-  background: transparent;
-  color: #6b7280;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background: #f3f4f6;
-    color: #374151;
-
-    .dark & {
-      background: #2d2d3d;
-      color: #e5e7eb;
-    }
-  }
-}
-
-.conversation-info {
-  display: flex;
-  flex-direction: column;
-}
-
-.title {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #1f2937;
-
-  .dark & {
-    color: #f3f4f6;
-  }
-}
-
-.message-count {
-  font-size: 12px;
-  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;
-  gap: 6px;
-  position: relative;
-}
-
-.header-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 38px;
-  height: 38px;
-  border: none;
-  border-radius: 10px;
-  background: transparent;
-  color: #6b7280;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover:not(:disabled) {
-    background: #f3f4f6;
-    color: #374151;
-
-    .dark & {
-      background: #2d2d3d;
-      color: #e5e7eb;
-    }
-  }
-
-  &:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-}
-
-.more-menu {
-  position: absolute;
-  top: calc(100% + 8px);
-  right: 0;
-  min-width: 180px;
-  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);
-  }
-}
-
-.menu-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 10px 12px;
-  border: none;
-  border-radius: 8px;
-  background: transparent;
-  color: #374151;
-  font-size: 14px;
-  text-align: left;
-  cursor: pointer;
-  transition: all 0.15s ease;
-
-  .dark & {
-    color: #e5e7eb;
-  }
-
-  &:hover {
-    background: #f3f4f6;
-
-    .dark & {
-      background: #2d2d3d;
-    }
-  }
-
-  svg {
-    color: #6b7280;
-  }
-}
-
-.menu-divider {
-  height: 1px;
-  margin: 6px 0;
-  background: #e2e8f0;
-
-  .dark & {
-    background: #374151;
-  }
-}
-
-// 下拉动画
-.dropdown-enter-active,
-.dropdown-leave-active {
-  transition: all 0.2s ease;
-}
-
-.dropdown-enter-from,
-.dropdown-leave-to {
-  opacity: 0;
-  transform: translateY(-8px);
-}
-
-.header-center .dropdown-enter-from,
-.header-center .dropdown-leave-to {
-  transform: translateX(-50%) translateY(-8px);
-}
-</style>
+<template>
+  <header class="chat-header">
+    <!-- 左侧：侧边栏切换和标题 -->
+    <div class="header-left">
+      <button
+        v-if="showSidebarToggle"
+        class="toggle-sidebar-btn"
+        title="切换侧边栏 (Ctrl+B)"
+        @click="$emit('toggle-sidebar')"
+      >
+        <Menu :size="20" />
+      </button>
+
+      <div class="conversation-info">
+        <h1 class="title">{{ title }}</h1>
+        <span v-if="messageCount > 0" class="message-count">
+          {{ messageCount }} 条消息
+        </span>
+      </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
+        class="header-btn"
+        :title="isWideMode ? '标准视图' : '宽屏视图'"
+        @click="$emit('toggle-wide-mode')"
+      >
+        <Maximize2 v-if="!isWideMode" :size="18" />
+        <Minimize2 v-else :size="18" />
+      </button>
+
+      <!-- 清空对话 -->
+      <button
+        class="header-btn"
+        title="清空对话"
+        :disabled="messageCount === 0"
+        @click="handleClear"
+      >
+        <Trash2 :size="18" />
+      </button>
+
+      <!-- 导出对话 -->
+      <button
+        class="header-btn"
+        title="导出对话"
+        :disabled="messageCount === 0"
+        @click="$emit('export')"
+      >
+        <Download :size="18" />
+      </button>
+
+      <!-- 更多操作 -->
+      <button
+        class="header-btn"
+        title="更多选项"
+        @click="showMoreMenu = !showMoreMenu"
+      >
+        <MoreHorizontal :size="18" />
+      </button>
+
+      <Transition name="dropdown">
+        <div v-if="showMoreMenu" class="more-menu">
+          <button class="menu-item" @click="handleShare">
+            <ExternalLink :size="16" />
+            <span>分享对话</span>
+          </button>
+          <button class="menu-item" @click="handlePin">
+            <Pin :size="16" />
+            <span>{{ isPinned ? "取消置顶" : "置顶对话" }}</span>
+          </button>
+          <button class="menu-item" @click="handleArchive">
+            <Archive :size="16" />
+            <span>归档对话</span>
+          </button>
+          <div class="menu-divider"></div>
+          <button class="menu-item" @click="handleSettings">
+            <Settings :size="16" />
+            <span>对话设置</span>
+          </button>
+        </div>
+      </Transition>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import {
+  Menu,
+  Sparkles,
+  ChevronDown,
+  Check,
+  Maximize2,
+  Minimize2,
+  Trash2,
+  Download,
+  MoreHorizontal,
+  ExternalLink,
+  Pin,
+  Archive,
+  Settings,
+} from "@/components/icons";
+import { useSettingsStore } from "@/stores/settings.ts";
+import { chatApi } from "@/services/api.ts";
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    messageCount?: number;
+    showSidebarToggle?: boolean;
+    isWideMode?: boolean;
+    isPinned?: boolean;
+  }>(),
+  {
+    title: "新对话",
+    messageCount: 0,
+    showSidebarToggle: true,
+    isWideMode: true,
+    isPinned: false,
+  },
+);
+
+const emit = defineEmits<{
+  "toggle-sidebar": [];
+  "toggle-wide-mode": [];
+  clear: [];
+  export: [];
+  share: [];
+  pin: [];
+  archive: [];
+  settings: [];
+  "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");
+  }
+}
+
+function handleShare() {
+  showMoreMenu.value = false;
+  emit("share");
+}
+
+function handlePin() {
+  showMoreMenu.value = false;
+  emit("pin");
+}
+
+function handleArchive() {
+  showMoreMenu.value = false;
+  emit("archive");
+}
+
+// 点击外部关闭菜单
+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;
+  }
+}
+
+function handleSettings() {
+  showMoreMenu.value = false;
+  settingsStore.openConversationSettingsModal();
+}
+
+if (typeof window !== "undefined") {
+  document.addEventListener("click", handleClickOutside);
+}
+</script>
+
+<style lang="scss" scoped>
+.chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 64px;
+  padding: 0 20px;
+  background: white;
+  border-bottom: 1px solid #e2e8f0;
+  flex-shrink: 0;
+
+  .dark & {
+    background: #1e1e2e;
+    border-bottom-color: #2d2d3d;
+  }
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.toggle-sidebar-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: #f3f4f6;
+    color: #374151;
+
+    .dark & {
+      background: #2d2d3d;
+      color: #e5e7eb;
+    }
+  }
+}
+
+.conversation-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f2937;
+
+  .dark & {
+    color: #f3f4f6;
+  }
+}
+
+.message-count {
+  font-size: 12px;
+  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;
+  gap: 6px;
+  position: relative;
+}
+
+.header-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover:not(:disabled) {
+    background: #f3f4f6;
+    color: #374151;
+
+    .dark & {
+      background: #2d2d3d;
+      color: #e5e7eb;
+    }
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+.more-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  min-width: 180px;
+  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);
+  }
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: #374151;
+  font-size: 14px;
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  .dark & {
+    color: #e5e7eb;
+  }
+
+  &:hover {
+    background: #f3f4f6;
+
+    .dark & {
+      background: #2d2d3d;
+    }
+  }
+
+  svg {
+    color: #6b7280;
+  }
+}
+
+.menu-divider {
+  height: 1px;
+  margin: 6px 0;
+  background: #e2e8f0;
+
+  .dark & {
+    background: #374151;
+  }
+}
+
+// 下拉动画
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.2s ease;
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  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/ChatMain.vue b/src/components/chat/ChatMain.vue
index 4e197c8..fe7d170 100644
--- a/src/components/chat/ChatMain.vue
+++ b/src/components/chat/ChatMain.vue
@@ -1,418 +1,418 @@
-<template>
-  <main class="chat-main" :class="{ 'wide-mode': isWideMode }">
-    <!-- 头部 -->
-    <ChatHeader
-      :title="currentConversation?.title || '新对话'"
-      :message-count="messages.length"
-      :show-sidebar-toggle="sidebarCollapsed"
-      :is-wide-mode="isWideMode"
-      :is-pinned="currentConversation?.pinned"
-      @toggle-sidebar="$emit('toggle-sidebar')"
-      @toggle-wide-mode="toggleWideMode"
-      @clear="handleClear"
-      @export="handleExport"
-      @pin="handlePin"
-    />
-
-    <!-- 消息列表 -->
-    <MessageList
-      ref="messageListRef"
-      :messages="messages"
-      :show-timestamp="settings.showTimestamp"
-      :compact="settings.compactMode"
-      :is-typing="isTyping"
-      @retry="handleRetry"
-      @regenerate="handleRegenerate"
-      @select-suggestion="handleSuggestion"
-    />
-
-    <!-- 输入区域 -->
-    <div class="input-wrapper">
-      <div class="input-container" :class="{ wide: isWideMode }">
-        <ChatInput
-          ref="chatInputRef"
-          :placeholder="inputPlaceholder"
-          :is-streaming="isStreaming"
-          :send-on-enter="settings.sendOnEnter"
-          :disabled="false"
-          @send="handleSend"
-          @stop="handleStop"
-        />
-      </div>
-    </div>
-  </main>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, nextTick } from "vue";
-import { storeToRefs } from "pinia";
-import { useChatStore } from "@/stores/chat";
-import { useSettingsStore } from "@/stores/settings";
-import ChatHeader from "./ChatHeader.vue";
-import MessageList from "./MessageList.vue";
-import ChatInput from "@/components/input/ChatInput.vue";
-import { MessageType, MessageRole } from "@/types/chat";
-import type { Attachment } from "@/types/chat";
-import { chatApi } from "@/services/api";
-
-defineEmits<{
-  "toggle-sidebar": [];
-}>();
-
-const chatStore = useChatStore();
-const settingsStore = useSettingsStore();
-
-const { currentConversation, isStreaming } = storeToRefs(chatStore);
-const { settings, sidebarCollapsed } = storeToRefs(settingsStore);
-
-const messageListRef = ref<InstanceType<typeof MessageList> | null>(null);
-const chatInputRef = ref<InstanceType<typeof ChatInput> | null>(null);
-const isWideMode = ref(true);
-const isTyping = ref(false);
-const currentStreamingMessageId = ref<string | null>(null);
-const abortController: any = ref<AbortController | null>(null);
-
-const messages: any = computed(() => currentConversation.value?.messages || []);
-
-const inputPlaceholder = computed(() => {
-  if (isStreaming.value) return "正在生成回复...";
-  return "输入你的问题，按 Ctrl+Enter 发送";
-});
-
-function toggleWideMode() {
-  isWideMode.value = !isWideMode.value;
-}
-
-function handleClear() {
-  if (currentConversation.value) {
-    chatStore.clearConversation(currentConversation.value.id);
-  }
-}
-
-function handleExport() {
-  if (!currentConversation.value) return;
-
-  const data = {
-    title: currentConversation.value.title,
-    messages: currentConversation.value.messages,
-    exportedAt: new Date().toISOString(),
-  };
-
-  const blob = new Blob([JSON.stringify(data, null, 2)], {
-    type: "application/json",
-  });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = `${currentConversation.value.title}.json`;
-  a.click();
-  URL.revokeObjectURL(url);
-}
-
-function handlePin() {
-  if (currentConversation.value) {
-    chatStore.togglePinConversation(currentConversation.value.id);
-  }
-}
-
-// 发送消息 - 使用真实 API
-async function handleSend(
-  text: string,
-  attachments: Attachment[],
-  options?: {
-    deepSearch?: boolean;
-    webSearch?: boolean;
-    deepThinking?: boolean;
-  },
-) {
-  console.log("handleSend", text, attachments, options);
-  // 检查是否还有正在上传的附件
-  const uploadingAttachments = attachments.filter((a) => a.uploading);
-  if (uploadingAttachments.length > 0) {
-    // 等待所有上传完成
-    const uploads = uploadingAttachments.map(async (attachment) => {
-      // 这里我们可以通过检查附件状态来判断是否上传完成
-      // 但更简单的方法是等待一小段时间，让上传有机会完成
-      return new Promise<void>((resolve) => {
-        const checkUpload = () => {
-          const stillUploading = attachments.some(
-            (a) => a.id === attachment.id && a.uploading,
-          );
-          if (!stillUploading) {
-            resolve();
-          } else {
-            setTimeout(checkUpload, 100); // 每100ms检查一次
-          }
-        };
-        checkUpload();
-      });
-    });
-
-    try {
-      await Promise.all(uploads);
-    } catch (error) {
-      console.error("等待上传完成时发生错误:", error);
-    }
-  }
-
-  // 如果没有当前对话，创建新对话
-  if (!currentConversation.value) {
-    chatStore.createConversation();
-  }
-
-  // 从当前会话中提取历史消息（用于上下文记忆），在添加新消息之前提取
-  const existingMessages = currentConversation.value?.messages || [];
-  const MAX_HISTORY_ROUNDS = 20; // 最多保留最近 20 轮（40 条消息）
-  const historyMessages = existingMessages
-    .filter(
-      (m: any) =>
-        m.role === MessageRole.USER || m.role === MessageRole.ASSISTANT,
-    )
-    .filter((m: any) => m.content?.text) // 过滤掉空消息
-    .slice(-(MAX_HISTORY_ROUNDS * 2))
-    .map((m: any) => ({ role: m.role, content: m.content.text }));
-
-  // 添加用户消息
-  chatStore.addMessage(MessageRole.USER, {
-    type: MessageType.TEXT,
-    text,
-    images: attachments.filter((a) => a.type === "image"),
-    files: attachments.filter((a) => a.type === "file"),
-  });
-
-  // 添加 AI 消息占位符
-  const aiMessage = chatStore.addMessage(MessageRole.ASSISTANT, {
-    type: MessageType.TEXT,
-    text: "",
-  });
-
-  currentStreamingMessageId.value = aiMessage.id;
-  chatStore.updateMessage(aiMessage.id, { isStreaming: true });
-  chatStore.startStreaming();
-  isTyping.value = true;
-
-  // 创建 AbortController
-  abortController.value = new AbortController();
-  try {
-    // 提取图片URL用于发送给API
-    const imageUrls = attachments
-      .filter((a) => a.type === "image")
-      .map((a) => a.url);
-
-    // 提取非图片文件URL（txt, pdf, docx 等）
-    const fileUrls = attachments
-      .filter((a) => a.type === "file")
-      .map((a) => a.url);
-
-    const stream = chatApi.streamChat(
-      {
-        message: text,
-        conversationId: currentConversation.value?.id || "",
-        images: imageUrls,
-        files: fileUrls,
-        model: settings.value.defaultModel,
-        stream: true,
-        history: historyMessages,
-        deepSearch: options?.deepSearch,
-        webSearch: options?.webSearch,
-        deepThinking: options?.deepThinking,
-      },
-      abortController.value.signal,
-    );
-
-    let fullText = "";
-    isTyping.value = false;
-
-    for await (const chunk of stream) {
-      if (abortController.value?.signal.aborted) break;
-      fullText += chunk;
-      chatStore.updateMessageContent(aiMessage.id, fullText);
-    }
-
-    if (!abortController.value?.signal.aborted) {
-      chatStore.updateMessage(aiMessage.id, {
-        isStreaming: false,
-        content: {
-          type: MessageType.TEXT,
-          text: fullText,
-        },
-      });
-    }
-  } catch (error: any) {
-    if (error.name !== "AbortError") {
-      chatStore.updateMessage(aiMessage.id, {
-        isStreaming: false,
-        isError: true,
-        errorMessage: error.message || "请求失败",
-      });
-    }
-  } finally {
-    chatStore.stopStreaming();
-    currentStreamingMessageId.value = null;
-  }
-}
-
-// 停止生成
-function handleStop() {
-  if (abortController.value) {
-    abortController.value.abort();
-    abortController.value = null;
-  }
-
-  chatStore.stopStreaming();
-  chatApi.stopChat(messages.value.at(-1)["messageId"]);
-  if (currentStreamingMessageId.value) {
-    chatStore.updateMessage(currentStreamingMessageId.value, {
-      isStreaming: false,
-    });
-    currentStreamingMessageId.value = null;
-  }
-}
-
-// 重试
-async function handleRetry(messageId: string) {
-  const message = messages.value.find((m: any) => m.id === messageId);
-  if (!message || message.role !== MessageRole.ASSISTANT) return;
-
-  const messageIndex = messages.value.findIndex((m: any) => m.id === messageId);
-  if (messageIndex <= 0) return;
-
-  const userMessage = messages.value[messageIndex - 1];
-  if (userMessage.role !== MessageRole.USER) return;
-
-  // 提取重试位置之前的历史消息（用于上下文记忆）
-  const MAX_HISTORY_ROUNDS = 20;
-  const priorMessages = messages.value
-    .slice(0, messageIndex - 1) // 不包含当前 user 消息和要重试的 assistant 消息
-    .filter(
-      (m: any) =>
-        m.role === MessageRole.USER || m.role === MessageRole.ASSISTANT,
-    )
-    .filter((m: any) => m.content?.text)
-    .slice(-(MAX_HISTORY_ROUNDS * 2))
-    .map((m: any) => ({ role: m.role, content: m.content.text }));
-
-  // 重置消息状态
-  chatStore.updateMessage(messageId, {
-    isError: false,
-    errorMessage: undefined,
-    isStreaming: true,
-    isEnd: true,
-    content: { type: MessageType.TEXT, text: "" },
-  });
-
-  currentStreamingMessageId.value = messageId;
-  chatStore.startStreaming();
-  abortController.value = new AbortController();
-
-  try {
-    const stream = chatApi.streamChat(
-      {
-        message: userMessage.content.text || "",
-        conversationId: currentConversation.value?.id,
-        model: settings.value.defaultModel,
-        stream: true,
-        history: priorMessages,
-      },
-      abortController.value.signal,
-    );
-
-    let fullText = "";
-
-    for await (const chunk of stream) {
-      if (abortController.value?.signal.aborted) break;
-      fullText += chunk;
-      chatStore.updateMessageContent(messageId, fullText);
-    }
-
-    if (!abortController.value?.signal.aborted) {
-      chatStore.updateMessage(messageId, {
-        isStreaming: false,
-        content: {
-          type: MessageType.TEXT,
-          text: fullText,
-        },
-      });
-    }
-  } catch (error: any) {
-    if (error.name !== "AbortError") {
-      chatStore.updateMessage(messageId, {
-        isStreaming: false,
-        isError: true,
-        errorMessage: error.message || "请求失败",
-      });
-    }
-  } finally {
-    chatStore.stopStreaming();
-    currentStreamingMessageId.value = null;
-  }
-}
-
-function handleRegenerate(messageId: string) {
-  handleRetry(messageId);
-}
-
-function handleSuggestion(text: string) {
-  handleSend(text, []);
-}
-
-function focusInput() {
-  chatInputRef.value?.focus();
-}
-
-defineExpose({
-  focusInput,
-  messageListRef,
-});
-
-watch(
-  () => currentConversation.value?.id,
-  () => {
-    nextTick(() => {
-      focusInput();
-    });
-  },
-);
-</script>
-
-<style lang="scss" scoped>
-.chat-main {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  height: 100vh;
-  background: #ffffff;
-  overflow: hidden;
-  border-radius: 15px;
-
-  .dark & {
-    background: #11111b;
-  }
-
-  &.wide-mode {
-    .input-container {
-      max-width: 1000px;
-    }
-  }
-}
-
-.input-wrapper {
-  flex-shrink: 0;
-  padding: 16px 24px 24px;
-  background: linear-gradient(to top, white 80%, transparent);
-
-  .dark & {
-    background: linear-gradient(to top, #11111b 80%, transparent);
-  }
-}
-
-.input-container {
-  max-width: 800px;
-  margin: 0 auto;
-  transition: max-width 0.3s ease;
-
-  &.wide {
-    max-width: 1000px;
-  }
-}
-</style>
+<template>
+  <main class="chat-main" :class="{ 'wide-mode': isWideMode }">
+    <!-- 头部 -->
+    <ChatHeader
+      :title="currentConversation?.title || '新对话'"
+      :message-count="messages.length"
+      :show-sidebar-toggle="sidebarCollapsed"
+      :is-wide-mode="isWideMode"
+      :is-pinned="currentConversation?.pinned"
+      @toggle-sidebar="$emit('toggle-sidebar')"
+      @toggle-wide-mode="toggleWideMode"
+      @clear="handleClear"
+      @export="handleExport"
+      @pin="handlePin"
+    />
+
+    <!-- 消息列表 -->
+    <MessageList
+      ref="messageListRef"
+      :messages="messages"
+      :show-timestamp="settings.showTimestamp"
+      :compact="settings.compactMode"
+      :is-typing="isTyping"
+      @retry="handleRetry"
+      @regenerate="handleRegenerate"
+      @select-suggestion="handleSuggestion"
+    />
+
+    <!-- 输入区域 -->
+    <div class="input-wrapper">
+      <div class="input-container" :class="{ wide: isWideMode }">
+        <ChatInput
+          ref="chatInputRef"
+          :placeholder="inputPlaceholder"
+          :is-streaming="isStreaming"
+          :send-on-enter="settings.sendOnEnter"
+          :disabled="false"
+          @send="handleSend"
+          @stop="handleStop"
+        />
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from "vue";
+import { storeToRefs } from "pinia";
+import { useChatStore } from "@/stores/chat";
+import { useSettingsStore } from "@/stores/settings";
+import ChatHeader from "./ChatHeader.vue";
+import MessageList from "./MessageList.vue";
+import ChatInput from "@/components/input/ChatInput.vue";
+import { MessageType, MessageRole } from "@/types/chat";
+import type { Attachment } from "@/types/chat";
+import { chatApi } from "@/services/api";
+
+defineEmits<{
+  "toggle-sidebar": [];
+}>();
+
+const chatStore = useChatStore();
+const settingsStore = useSettingsStore();
+
+const { currentConversation, isStreaming } = storeToRefs(chatStore);
+const { settings, sidebarCollapsed } = storeToRefs(settingsStore);
+
+const messageListRef = ref<InstanceType<typeof MessageList> | null>(null);
+const chatInputRef = ref<InstanceType<typeof ChatInput> | null>(null);
+const isWideMode = ref(true);
+const isTyping = ref(false);
+const currentStreamingMessageId = ref<string | null>(null);
+const abortController: any = ref<AbortController | null>(null);
+
+const messages: any = computed(() => currentConversation.value?.messages || []);
+
+const inputPlaceholder = computed(() => {
+  if (isStreaming.value) return "正在生成回复...";
+  return "输入你的问题，按 Ctrl+Enter 发送";
+});
+
+function toggleWideMode() {
+  isWideMode.value = !isWideMode.value;
+}
+
+function handleClear() {
+  if (currentConversation.value) {
+    chatStore.clearConversation(currentConversation.value.id);
+  }
+}
+
+function handleExport() {
+  if (!currentConversation.value) return;
+
+  const data = {
+    title: currentConversation.value.title,
+    messages: currentConversation.value.messages,
+    exportedAt: new Date().toISOString(),
+  };
+
+  const blob = new Blob([JSON.stringify(data, null, 2)], {
+    type: "application/json",
+  });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `${currentConversation.value.title}.json`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function handlePin() {
+  if (currentConversation.value) {
+    chatStore.togglePinConversation(currentConversation.value.id);
+  }
+}
+
+// 发送消息 - 使用真实 API
+async function handleSend(
+  text: string,
+  attachments: Attachment[],
+  options?: {
+    deepSearch?: boolean;
+    webSearch?: boolean;
+    deepThinking?: boolean;
+  },
+) {
+  console.log("handleSend", text, attachments, options);
+  // 检查是否还有正在上传的附件
+  const uploadingAttachments = attachments.filter((a) => a.uploading);
+  if (uploadingAttachments.length > 0) {
+    // 等待所有上传完成
+    const uploads = uploadingAttachments.map(async (attachment) => {
+      // 这里我们可以通过检查附件状态来判断是否上传完成
+      // 但更简单的方法是等待一小段时间，让上传有机会完成
+      return new Promise<void>((resolve) => {
+        const checkUpload = () => {
+          const stillUploading = attachments.some(
+            (a) => a.id === attachment.id && a.uploading,
+          );
+          if (!stillUploading) {
+            resolve();
+          } else {
+            setTimeout(checkUpload, 100); // 每100ms检查一次
+          }
+        };
+        checkUpload();
+      });
+    });
+
+    try {
+      await Promise.all(uploads);
+    } catch (error) {
+      console.error("等待上传完成时发生错误:", error);
+    }
+  }
+
+  // 如果没有当前对话，创建新对话
+  if (!currentConversation.value) {
+    chatStore.createConversation();
+  }
+
+  // 从当前会话中提取历史消息（用于上下文记忆），在添加新消息之前提取
+  const existingMessages = currentConversation.value?.messages || [];
+  const MAX_HISTORY_ROUNDS = 20; // 最多保留最近 20 轮（40 条消息）
+  const historyMessages = existingMessages
+    .filter(
+      (m: any) =>
+        m.role === MessageRole.USER || m.role === MessageRole.ASSISTANT,
+    )
+    .filter((m: any) => m.content?.text) // 过滤掉空消息
+    .slice(-(MAX_HISTORY_ROUNDS * 2))
+    .map((m: any) => ({ role: m.role, content: m.content.text }));
+
+  // 添加用户消息
+  chatStore.addMessage(MessageRole.USER, {
+    type: MessageType.TEXT,
+    text,
+    images: attachments.filter((a) => a.type === "image"),
+    files: attachments.filter((a) => a.type === "file"),
+  });
+
+  // 添加 AI 消息占位符
+  const aiMessage = chatStore.addMessage(MessageRole.ASSISTANT, {
+    type: MessageType.TEXT,
+    text: "",
+  });
+
+  currentStreamingMessageId.value = aiMessage.id;
+  chatStore.updateMessage(aiMessage.id, { isStreaming: true });
+  chatStore.startStreaming();
+  isTyping.value = true;
+
+  // 创建 AbortController
+  abortController.value = new AbortController();
+  try {
+    // 提取图片URL用于发送给API
+    const imageUrls = attachments
+      .filter((a) => a.type === "image")
+      .map((a) => a.url);
+
+    // 提取非图片文件URL（txt, pdf, docx 等）
+    const fileUrls = attachments
+      .filter((a) => a.type === "file")
+      .map((a) => a.url);
+
+    const stream = chatApi.streamChat(
+      {
+        message: text,
+        conversationId: currentConversation.value?.id || "",
+        images: imageUrls,
+        files: fileUrls,
+        model: settings.value.defaultModel,
+        stream: true,
+        history: historyMessages,
+        deepSearch: options?.deepSearch,
+        webSearch: options?.webSearch,
+        deepThinking: options?.deepThinking,
+      },
+      abortController.value.signal,
+    );
+
+    let fullText = "";
+    isTyping.value = false;
+
+    for await (const chunk of stream) {
+      if (abortController.value?.signal.aborted) break;
+      fullText += chunk;
+      chatStore.updateMessageContent(aiMessage.id, fullText);
+    }
+
+    if (!abortController.value?.signal.aborted) {
+      chatStore.updateMessage(aiMessage.id, {
+        isStreaming: false,
+        content: {
+          type: MessageType.TEXT,
+          text: fullText,
+        },
+      });
+    }
+  } catch (error: any) {
+    if (error.name !== "AbortError") {
+      chatStore.updateMessage(aiMessage.id, {
+        isStreaming: false,
+        isError: true,
+        errorMessage: error.message || "请求失败",
+      });
+    }
+  } finally {
+    chatStore.stopStreaming();
+    currentStreamingMessageId.value = null;
+  }
+}
+
+// 停止生成
+function handleStop() {
+  if (abortController.value) {
+    abortController.value.abort();
+    abortController.value = null;
+  }
+
+  chatStore.stopStreaming();
+  chatApi.stopChat(messages.value.at(-1)["messageId"]);
+  if (currentStreamingMessageId.value) {
+    chatStore.updateMessage(currentStreamingMessageId.value, {
+      isStreaming: false,
+    });
+    currentStreamingMessageId.value = null;
+  }
+}
+
+// 重试
+async function handleRetry(messageId: string) {
+  const message = messages.value.find((m: any) => m.id === messageId);
+  if (!message || message.role !== MessageRole.ASSISTANT) return;
+
+  const messageIndex = messages.value.findIndex((m: any) => m.id === messageId);
+  if (messageIndex <= 0) return;
+
+  const userMessage = messages.value[messageIndex - 1];
+  if (userMessage.role !== MessageRole.USER) return;
+
+  // 提取重试位置之前的历史消息（用于上下文记忆）
+  const MAX_HISTORY_ROUNDS = 20;
+  const priorMessages = messages.value
+    .slice(0, messageIndex - 1) // 不包含当前 user 消息和要重试的 assistant 消息
+    .filter(
+      (m: any) =>
+        m.role === MessageRole.USER || m.role === MessageRole.ASSISTANT,
+    )
+    .filter((m: any) => m.content?.text)
+    .slice(-(MAX_HISTORY_ROUNDS * 2))
+    .map((m: any) => ({ role: m.role, content: m.content.text }));
+
+  // 重置消息状态
+  chatStore.updateMessage(messageId, {
+    isError: false,
+    errorMessage: undefined,
+    isStreaming: true,
+    isEnd: true,
+    content: { type: MessageType.TEXT, text: "" },
+  });
+
+  currentStreamingMessageId.value = messageId;
+  chatStore.startStreaming();
+  abortController.value = new AbortController();
+
+  try {
+    const stream = chatApi.streamChat(
+      {
+        message: userMessage.content.text || "",
+        conversationId: currentConversation.value?.id,
+        model: settings.value.defaultModel,
+        stream: true,
+        history: priorMessages,
+      },
+      abortController.value.signal,
+    );
+
+    let fullText = "";
+
+    for await (const chunk of stream) {
+      if (abortController.value?.signal.aborted) break;
+      fullText += chunk;
+      chatStore.updateMessageContent(messageId, fullText);
+    }
+
+    if (!abortController.value?.signal.aborted) {
+      chatStore.updateMessage(messageId, {
+        isStreaming: false,
+        content: {
+          type: MessageType.TEXT,
+          text: fullText,
+        },
+      });
+    }
+  } catch (error: any) {
+    if (error.name !== "AbortError") {
+      chatStore.updateMessage(messageId, {
+        isStreaming: false,
+        isError: true,
+        errorMessage: error.message || "请求失败",
+      });
+    }
+  } finally {
+    chatStore.stopStreaming();
+    currentStreamingMessageId.value = null;
+  }
+}
+
+function handleRegenerate(messageId: string) {
+  handleRetry(messageId);
+}
+
+function handleSuggestion(text: string) {
+  handleSend(text, []);
+}
+
+function focusInput() {
+  chatInputRef.value?.focus();
+}
+
+defineExpose({
+  focusInput,
+  messageListRef,
+});
+
+watch(
+  () => currentConversation.value?.id,
+  () => {
+    nextTick(() => {
+      focusInput();
+    });
+  },
+);
+</script>
+
+<style lang="scss" scoped>
+.chat-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100vh;
+  background: #ffffff;
+  overflow: hidden;
+  border-radius: 15px;
+
+  .dark & {
+    background: #11111b;
+  }
+
+  &.wide-mode {
+    .input-container {
+      max-width: 1000px;
+    }
+  }
+}
+
+.input-wrapper {
+  flex-shrink: 0;
+  padding: 16px 24px 24px;
+  background: linear-gradient(to top, white 80%, transparent);
+
+  .dark & {
+    background: linear-gradient(to top, #11111b 80%, transparent);
+  }
+}
+
+.input-container {
+  max-width: 800px;
+  margin: 0 auto;
+  transition: max-width 0.3s ease;
+
+  &.wide {
+    max-width: 1000px;
+  }
+}
+</style>
diff --git a/src/components/chat/MessageList.vue b/src/components/chat/MessageList.vue
index 2645778..05f39b4 100644
--- a/src/components/chat/MessageList.vue
+++ b/src/components/chat/MessageList.vue
@@ -1,397 +1,397 @@
-<template>
-  <div ref="boxRef" style="flex: 1; position: relative">
-    <div ref="containerRef" class="message-list" @scroll="handleScroll">
-      <!-- 欢迎界面 -->
-      <WelcomeScreen
-        v-if="messages.length === 0"
-        @select="$emit('select-suggestion', $event)"
-      />
-
-      <!-- 消息列表 -->
-      <template v-else>
-        <div class="messages-wrapper">
-          <TransitionGroup name="message">
-            <MessageBubble
-              v-for="(message, index) in messages"
-              :key="message.id"
-              :message="message"
-              :show-timestamp="showTimestamp"
-              :compact="compact"
-              :is-New="index === messages.length - 1"
-              @retry="$emit('retry', message.id)"
-              @regenerate="$emit('regenerate', message.id)"
-              @copy="handleCopy(message)"
-              @like="handleLike(message)"
-              @dislike="handleDislike(message)"
-              @select-suggestion="$emit('select-suggestion', $event.text)"
-              @preview-image="handlePreviewImage"
-              @play-video="handlePlayVideo"
-              @download-file="handleDownloadFile"
-            />
-          </TransitionGroup>
-
-          <!-- 正在输入指示器 -->
-          <div v-if="isTyping" class="typing-indicator">
-            <div class="typing-avatar">
-              <Bot :size="20" />
-            </div>
-            <div class="typing-dots">
-              <span></span>
-              <span></span>
-              <span></span>
-            </div>
-            <span class="typing-text">AI 正在思考...</span>
-          </div>
-        </div>
-      </template>
-    </div>
-    <!-- 回到底部按钮 -->
-    <Transition name="fade">
-      <button
-        v-if="showScrollButton"
-        class="scroll-bottom-btn"
-        @click="handleScrollToBottom"
-      >
-        <ChevronDown :size="20" />
-        <span v-if="newMessageCount > 0" class="new-count">
-          {{ newMessageCount }}
-        </span>
-      </button>
-    </Transition>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, nextTick, onMounted } from "vue";
-import { useChatStore } from "@/stores/chat";
-import MessageBubble from "@/components/message/MessageBubble.vue";
-import WelcomeScreen from "./WelcomeScreen.vue";
-import { Bot, ChevronDown } from "@/components/icons";
-import type { Message, Attachment, VideoInfo } from "@/types/chat";
-
-const props = withDefaults(
-  defineProps<{
-    messages: Message[];
-    showTimestamp?: boolean;
-    compact?: boolean;
-    isTyping?: boolean;
-  }>(),
-  {
-    showTimestamp: true,
-    compact: false,
-    isTyping: false,
-  },
-);
-
-const emit = defineEmits<{
-  retry: [messageId: string];
-  regenerate: [messageId: string];
-  "select-suggestion": [text: string];
-  "preview-image": [image: Attachment, index: number];
-  "play-video": [video: VideoInfo];
-  "download-file": [file: Attachment];
-}>();
-
-const chatStore = useChatStore();
-
-// 响应式状态
-const boxRef: any = ref<HTMLElement | null>(null);
-const containerRef: any = ref<HTMLElement | null>(null);
-const showScrollButton = ref(false);
-const newMessageCount = ref(0);
-const isAutoScrolling = ref(true);
-const lastScrollTop = ref(0);
-
-onMounted(() => {
-  containerRef.value.style.height = boxRef.value?.clientHeight + "px";
-});
-
-// 滚动处理
-function handleScroll() {
-  const container = containerRef.value;
-  if (!container) return;
-
-  const { scrollTop, scrollHeight, clientHeight } = container;
-  const isAtBottom = scrollHeight - scrollTop - clientHeight < 100;
-
-  if (scrollTop < lastScrollTop.value && !isAtBottom) {
-    isAutoScrolling.value = false;
-    showScrollButton.value = true;
-  }
-
-  if (isAtBottom) {
-    isAutoScrolling.value = true;
-    showScrollButton.value = false;
-    newMessageCount.value = 0;
-  }
-
-  lastScrollTop.value = scrollTop;
-}
-
-// 滚动到底部
-function scrollToBottom(smooth = true) {
-  const container = containerRef.value;
-  if (!container) return;
-
-  container.scrollTo({
-    top: container.scrollHeight,
-    behavior: smooth ? "smooth" : "auto",
-  });
-
-  isAutoScrolling.value = true;
-  showScrollButton.value = false;
-  newMessageCount.value = 0;
-}
-
-// 按钮点击处理
-function handleScrollToBottom() {
-  scrollToBottom(true);
-}
-
-// 消息操作
-function handleCopy(message: Message) {
-  chatStore.setMessageCopied(message.id);
-}
-
-function handleLike(message: Message) {
-  const currentLiked = message.feedback?.liked;
-  chatStore.setMessageFeedback(message.id, currentLiked ? null : "like");
-}
-
-function handleDislike(message: Message) {
-  const currentDisliked = message.feedback?.disliked;
-  chatStore.setMessageFeedback(message.id, currentDisliked ? null : "dislike");
-}
-
-function handlePreviewImage(image: Attachment, index: number) {
-  emit("preview-image", image, index);
-}
-
-function handlePlayVideo(video: VideoInfo) {
-  emit("play-video", video);
-}
-
-function handleDownloadFile(file: Attachment) {
-  emit("download-file", file);
-}
-
-// 监听消息变化
-watch(
-  () => props.messages.length,
-  (newLen, oldLen) => {
-    if (newLen > oldLen) {
-      if (isAutoScrolling.value) {
-        nextTick(() => {
-          scrollToBottom(false);
-        });
-      } else {
-        newMessageCount.value++;
-      }
-    }
-  },
-);
-
-// 监听最后一条消息的内容变化
-watch(
-  () => props.messages[props.messages.length - 1]?.content.text,
-  () => {
-    if (isAutoScrolling.value) {
-      nextTick(() => {
-        const container = containerRef.value;
-        if (container) {
-          container.scrollTop = container.scrollHeight;
-        }
-      });
-    }
-  },
-);
-
-// 监听 isTyping 变化
-watch(
-  () => props.isTyping,
-  (typing) => {
-    if (typing && isAutoScrolling.value) {
-      nextTick(() => {
-        scrollToBottom(true);
-      });
-    }
-  },
-);
-
-// 暴露方法
-defineExpose({
-  scrollToBottom,
-});
-
-onMounted(() => {
-  scrollToBottom(false);
-});
-</script>
-
-<style lang="scss" scoped>
-.message-list {
-  height: 500px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.messages-wrapper {
-  display: flex;
-  flex-direction: column;
-  padding: 20px 0;
-  min-height: 100%;
-}
-
-.typing-indicator {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px 24px;
-  animation: fadeIn 0.3s ease;
-}
-
-.typing-avatar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
-  border-radius: 12px;
-  color: white;
-}
-
-.typing-dots {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 12px 16px;
-  background: #f3f4f6;
-  border-radius: 16px;
-
-  .dark & {
-    background: #2d2d3d;
-  }
-
-  span {
-    width: 8px;
-    height: 8px;
-    background: #9ca3af;
-    border-radius: 50%;
-    animation: typingBounce 1.4s infinite ease-in-out both;
-
-    &:nth-child(1) {
-      animation-delay: -0.32s;
-    }
-    &:nth-child(2) {
-      animation-delay: -0.16s;
-    }
-  }
-}
-
-.typing-text {
-  font-size: 13px;
-  color: #9ca3af;
-}
-
-.scroll-bottom-btn {
-  position: absolute;
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  border: none;
-  border-radius: 50%;
-  background: white;
-  color: #374151;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  z-index: 10;
-
-  .dark & {
-    background: #2d2d3d;
-    color: #e5e7eb;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-  }
-
-  &:hover {
-    transform: translateX(-50%) scale(1.1);
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
-  }
-
-  .new-count {
-    position: absolute;
-    top: -4px;
-    right: -4px;
-    min-width: 20px;
-    height: 20px;
-    padding: 0 6px;
-    background: #ef4444;
-    border-radius: 10px;
-    color: white;
-    font-size: 11px;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-// 消息过渡动画
-.message-enter-active,
-.message-leave-active {
-  transition: all 0.3s ease;
-}
-
-.message-enter-from {
-  opacity: 0;
-  transform: translateY(20px);
-}
-
-.message-leave-to {
-  opacity: 0;
-  transform: translateX(-20px);
-}
-
-// 淡入淡出动画
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-  transform: translateX(-50%) translateY(10px);
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes typingBounce {
-  0%,
-  80%,
-  100% {
-    transform: scale(0.7);
-    opacity: 0.5;
-  }
-  40% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-</style>
+<template>
+  <div ref="boxRef" style="flex: 1; position: relative">
+    <div ref="containerRef" class="message-list" @scroll="handleScroll">
+      <!-- 欢迎界面 -->
+      <WelcomeScreen
+        v-if="messages.length === 0"
+        @select="$emit('select-suggestion', $event)"
+      />
+
+      <!-- 消息列表 -->
+      <template v-else>
+        <div class="messages-wrapper">
+          <TransitionGroup name="message">
+            <MessageBubble
+              v-for="(message, index) in messages"
+              :key="message.id"
+              :message="message"
+              :show-timestamp="showTimestamp"
+              :compact="compact"
+              :is-New="index === messages.length - 1"
+              @retry="$emit('retry', message.id)"
+              @regenerate="$emit('regenerate', message.id)"
+              @copy="handleCopy(message)"
+              @like="handleLike(message)"
+              @dislike="handleDislike(message)"
+              @select-suggestion="$emit('select-suggestion', $event.text)"
+              @preview-image="handlePreviewImage"
+              @play-video="handlePlayVideo"
+              @download-file="handleDownloadFile"
+            />
+          </TransitionGroup>
+
+          <!-- 正在输入指示器 -->
+          <div v-if="isTyping" class="typing-indicator">
+            <div class="typing-avatar">
+              <Bot :size="20" />
+            </div>
+            <div class="typing-dots">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+            <span class="typing-text">AI 正在思考...</span>
+          </div>
+        </div>
+      </template>
+    </div>
+    <!-- 回到底部按钮 -->
+    <Transition name="fade">
+      <button
+        v-if="showScrollButton"
+        class="scroll-bottom-btn"
+        @click="handleScrollToBottom"
+      >
+        <ChevronDown :size="20" />
+        <span v-if="newMessageCount > 0" class="new-count">
+          {{ newMessageCount }}
+        </span>
+      </button>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick, onMounted } from "vue";
+import { useChatStore } from "@/stores/chat";
+import MessageBubble from "@/components/message/MessageBubble.vue";
+import WelcomeScreen from "./WelcomeScreen.vue";
+import { Bot, ChevronDown } from "@/components/icons";
+import type { Message, Attachment, VideoInfo } from "@/types/chat";
+
+const props = withDefaults(
+  defineProps<{
+    messages: Message[];
+    showTimestamp?: boolean;
+    compact?: boolean;
+    isTyping?: boolean;
+  }>(),
+  {
+    showTimestamp: true,
+    compact: false,
+    isTyping: false,
+  },
+);
+
+const emit = defineEmits<{
+  retry: [messageId: string];
+  regenerate: [messageId: string];
+  "select-suggestion": [text: string];
+  "preview-image": [image: Attachment, index: number];
+  "play-video": [video: VideoInfo];
+  "download-file": [file: Attachment];
+}>();
+
+const chatStore = useChatStore();
+
+// 响应式状态
+const boxRef: any = ref<HTMLElement | null>(null);
+const containerRef: any = ref<HTMLElement | null>(null);
+const showScrollButton = ref(false);
+const newMessageCount = ref(0);
+const isAutoScrolling = ref(true);
+const lastScrollTop = ref(0);
+
+onMounted(() => {
+  containerRef.value.style.height = boxRef.value?.clientHeight + "px";
+});
+
+// 滚动处理
+function handleScroll() {
+  const container = containerRef.value;
+  if (!container) return;
+
+  const { scrollTop, scrollHeight, clientHeight } = container;
+  const isAtBottom = scrollHeight - scrollTop - clientHeight < 100;
+
+  if (scrollTop < lastScrollTop.value && !isAtBottom) {
+    isAutoScrolling.value = false;
+    showScrollButton.value = true;
+  }
+
+  if (isAtBottom) {
+    isAutoScrolling.value = true;
+    showScrollButton.value = false;
+    newMessageCount.value = 0;
+  }
+
+  lastScrollTop.value = scrollTop;
+}
+
+// 滚动到底部
+function scrollToBottom(smooth = true) {
+  const container = containerRef.value;
+  if (!container) return;
+
+  container.scrollTo({
+    top: container.scrollHeight,
+    behavior: smooth ? "smooth" : "auto",
+  });
+
+  isAutoScrolling.value = true;
+  showScrollButton.value = false;
+  newMessageCount.value = 0;
+}
+
+// 按钮点击处理
+function handleScrollToBottom() {
+  scrollToBottom(true);
+}
+
+// 消息操作
+function handleCopy(message: Message) {
+  chatStore.setMessageCopied(message.id);
+}
+
+function handleLike(message: Message) {
+  const currentLiked = message.feedback?.liked;
+  chatStore.setMessageFeedback(message.id, currentLiked ? null : "like");
+}
+
+function handleDislike(message: Message) {
+  const currentDisliked = message.feedback?.disliked;
+  chatStore.setMessageFeedback(message.id, currentDisliked ? null : "dislike");
+}
+
+function handlePreviewImage(image: Attachment, index: number) {
+  emit("preview-image", image, index);
+}
+
+function handlePlayVideo(video: VideoInfo) {
+  emit("play-video", video);
+}
+
+function handleDownloadFile(file: Attachment) {
+  emit("download-file", file);
+}
+
+// 监听消息变化
+watch(
+  () => props.messages.length,
+  (newLen, oldLen) => {
+    if (newLen > oldLen) {
+      if (isAutoScrolling.value) {
+        nextTick(() => {
+          scrollToBottom(false);
+        });
+      } else {
+        newMessageCount.value++;
+      }
+    }
+  },
+);
+
+// 监听最后一条消息的内容变化
+watch(
+  () => props.messages[props.messages.length - 1]?.content.text,
+  () => {
+    if (isAutoScrolling.value) {
+      nextTick(() => {
+        const container = containerRef.value;
+        if (container) {
+          container.scrollTop = container.scrollHeight;
+        }
+      });
+    }
+  },
+);
+
+// 监听 isTyping 变化
+watch(
+  () => props.isTyping,
+  (typing) => {
+    if (typing && isAutoScrolling.value) {
+      nextTick(() => {
+        scrollToBottom(true);
+      });
+    }
+  },
+);
+
+// 暴露方法
+defineExpose({
+  scrollToBottom,
+});
+
+onMounted(() => {
+  scrollToBottom(false);
+});
+</script>
+
+<style lang="scss" scoped>
+.message-list {
+  height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+}
+
+.messages-wrapper {
+  display: flex;
+  flex-direction: column;
+  padding: 20px 0;
+  min-height: 100%;
+}
+
+.typing-indicator {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 24px;
+  animation: fadeIn 0.3s ease;
+}
+
+.typing-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
+  border-radius: 12px;
+  color: white;
+}
+
+.typing-dots {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 12px 16px;
+  background: #f3f4f6;
+  border-radius: 16px;
+
+  .dark & {
+    background: #2d2d3d;
+  }
+
+  span {
+    width: 8px;
+    height: 8px;
+    background: #9ca3af;
+    border-radius: 50%;
+    animation: typingBounce 1.4s infinite ease-in-out both;
+
+    &:nth-child(1) {
+      animation-delay: -0.32s;
+    }
+    &:nth-child(2) {
+      animation-delay: -0.16s;
+    }
+  }
+}
+
+.typing-text {
+  font-size: 13px;
+  color: #9ca3af;
+}
+
+.scroll-bottom-btn {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border: none;
+  border-radius: 50%;
+  background: white;
+  color: #374151;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  z-index: 10;
+
+  .dark & {
+    background: #2d2d3d;
+    color: #e5e7eb;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  }
+
+  &:hover {
+    transform: translateX(-50%) scale(1.1);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+  }
+
+  .new-count {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+    background: #ef4444;
+    border-radius: 10px;
+    color: white;
+    font-size: 11px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+// 消息过渡动画
+.message-enter-active,
+.message-leave-active {
+  transition: all 0.3s ease;
+}
+
+.message-enter-from {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.message-leave-to {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+
+// 淡入淡出动画
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(10px);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes typingBounce {
+  0%,
+  80%,
+  100% {
+    transform: scale(0.7);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+</style>
diff --git a/src/components/chat/WelcomeScreen.vue b/src/components/chat/WelcomeScreen.vue
index 406866a..c70e4a1 100644
--- a/src/components/chat/WelcomeScreen.vue
+++ b/src/components/chat/WelcomeScreen.vue
@@ -1,374 +1,378 @@
-<template>
-  <div class="welcome-screen">
-    <!-- Logo 和标题 -->
-    <div class="welcome-header">
-      <div class="logo-wrapper">
-        <div class="logo-icon">
-          <Bot :size="40" />
-        </div>
-        <div class="logo-glow"></div>
-      </div>
-      <h1 class="title">AI 智能助手</h1>
-      <p class="subtitle">我可以帮助你解答问题、生成内容、分析数据等</p>
-    </div>
-
-    <!-- 功能卡片 -->
-    <div class="feature-cards">
-      <div
-          v-for="feature in features"
-          :key="feature.title"
-          class="feature-card"
-      >
-        <div class="feature-icon" :style="{ background: feature.gradient }">
-          <component :is="feature.icon" :size="22" />
-        </div>
-        <h3>{{ feature.title }}</h3>
-        <p>{{ feature.description }}</p>
-      </div>
-    </div>
-
-    <!-- 快速开始建议 -->
-    <div class="quick-start">
-      <h4>试试这些问题</h4>
-      <div class="suggestions-grid">
-        <button
-            v-for="suggestion in suggestions"
-            :key="suggestion.text"
-            class="suggestion-card"
-            @click="$emit('select', suggestion.text)"
-        >
-          <component :is="suggestion.icon" :size="18" class="suggestion-icon" />
-          <span>{{ suggestion.text }}</span>
-          <ChevronRight :size="16" class="arrow-icon" />
-        </button>
-      </div>
-    </div>
-
-    <!-- 底部提示 -->
-    <div class="welcome-footer">
-      <div class="tip">
-        <Keyboard :size="14" />
-        <span>按 <kbd>Ctrl</kbd> + <kbd>/</kbd> 聚焦输入框</span>
-      </div>
-      <div class="tip">
-        <Zap :size="14" />
-        <span>支持 Markdown、代码高亮、LaTeX 公式</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import {
-  Bot,
-  MessageSquare,
-  Code,
-  Image,
-  FileText,
-  ChevronRight,
-  Keyboard,
-  Zap,
-  Globe,
-  Lightbulb,
-  PenTool,
-} from '@/components/icons'
-
-defineEmits<{
-  select: [text: string]
-}>()
-
-const features = computed(() => [
-  {
-    icon: MessageSquare,
-    title: '智能对话',
-    description: '自然流畅的对话体验，理解上下文',
-    gradient: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
-  },
-  {
-    icon: Code,
-    title: '代码助手',
-    description: '编写、解释、优化各种编程语言代码',
-    gradient: 'linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)',
-  },
-  {
-    icon: Image,
-    title: '图像理解',
-    description: '分析图片内容，提取关键信息',
-    gradient: 'linear-gradient(135deg, #ec4899 0%, #d946ef 100%)',
-  },
-  {
-    icon: FileText,
-    title: '文档处理',
-    description: '阅读、总结、翻译各类文档',
-    gradient: 'linear-gradient(135deg, #f59e0b 0%, #f97316 100%)',
-  },
-])
-
-const suggestions = computed(() => [
-  {
-    icon: Lightbulb,
-    text: '帮我写一个 Vue 3 组件示例',
-  },
-  {
-    icon: Globe,
-    text: '解释一下什么是机器学习',
-  },
-  {
-    icon: PenTool,
-    text: '帮我写一封商务邮件',
-  },
-  {
-    icon: Code,
-    text: '如何优化 React 应用性能',
-  },
-])
-</script>
-
-<style lang="scss" scoped>
-.welcome-screen {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 100%;
-  padding: 40px 24px;
-  animation: fadeIn 0.5s ease;
-}
-
-.welcome-header {
-  text-align: center;
-  margin-bottom: 48px;
-}
-
-.logo-wrapper {
-  position: relative;
-  display: inline-flex;
-  margin-bottom: 20px;
-}
-
-.logo-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 80px;
-  height: 80px;
-  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
-  border-radius: 24px;
-  color: white;
-  box-shadow: 0 20px 40px -12px rgba(59, 130, 246, 0.35);
-}
-
-.logo-glow {
-  position: absolute;
-  inset: -20px;
-  background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
-  pointer-events: none;
-}
-
-.title {
-  margin: 0 0 12px;
-  font-size: 32px;
-  font-weight: 700;
-  color: #1f2937;
-
-  .dark & {
-    color: #f3f4f6;
-  }
-}
-
-.subtitle {
-  margin: 0;
-  font-size: 16px;
-  color: #6b7280;
-
-  .dark & {
-    color: #9ca3af;
-  }
-}
-
-.feature-cards {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 20px;
-  max-width: 900px;
-  width: 100%;
-  margin-bottom: 48px;
-
-  @media (max-width: 900px) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @media (max-width: 500px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.feature-card {
-  padding: 24px;
-  background: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 16px;
-  text-align: center;
-  transition: all 0.3s ease;
-
-  .dark & {
-    background: #1e1e2e;
-    border-color: #2d2d3d;
-  }
-
-  &:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.1);
-
-    .dark & {
-      box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.4);
-    }
-  }
-
-  .feature-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    border-radius: 14px;
-    color: white;
-    margin-bottom: 16px;
-  }
-
-  h3 {
-    margin: 0 0 8px;
-    font-size: 16px;
-    font-weight: 600;
-    color: #1f2937;
-
-    .dark & {
-      color: #f3f4f6;
-    }
-  }
-
-  p {
-    margin: 0;
-    font-size: 13px;
-    color: #6b7280;
-    line-height: 1.5;
-
-    .dark & {
-      color: #9ca3af;
-    }
-  }
-}
-
-.quick-start {
-  max-width: 700px;
-  width: 100%;
-  margin-bottom: 40px;
-
-  h4 {
-    margin: 0 0 16px;
-    font-size: 14px;
-    font-weight: 600;
-    color: #6b7280;
-    text-align: center;
-
-    .dark & {
-      color: #9ca3af;
-    }
-  }
-}
-
-.suggestions-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
-
-  @media (max-width: 600px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.suggestion-card {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px 20px;
-  background: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 14px;
-  color: #374151;
-  font-size: 14px;
-  text-align: left;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  .dark & {
-    background: #1e1e2e;
-    border-color: #2d2d3d;
-    color: #e5e7eb;
-  }
-
-  &:hover {
-    border-color: #3b82f6;
-    background: rgba(59, 130, 246, 0.05);
-
-    .arrow-icon {
-      transform: translateX(4px);
-      color: #3b82f6;
-    }
-  }
-
-  .suggestion-icon {
-    flex-shrink: 0;
-    color: #3b82f6;
-  }
-
-  span {
-    flex: 1;
-  }
-
-  .arrow-icon {
-    flex-shrink: 0;
-    color: #9ca3af;
-    transition: all 0.2s ease;
-  }
-}
-
-.welcome-footer {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 24px;
-}
-
-.tip {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  color: #9ca3af;
-
-  kbd {
-    padding: 2px 8px;
-    background: #f3f4f6;
-    border-radius: 4px;
-    font-size: 12px;
-
-    .dark & {
-      background: #374151;
-    }
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-</style>
\ No newline at end of file
+<template>
+  <div class="welcome-screen">
+    <!-- Logo 和标题 -->
+    <div class="welcome-header">
+      <div class="logo-wrapper">
+        <div class="logo-icon">
+          <Bot :size="40" />
+        </div>
+        <div class="logo-glow"></div>
+      </div>
+      <h1 class="title">AI 智能助手</h1>
+      <p class="subtitle">我可以帮助你解答问题、生成内容、分析数据等</p>
+    </div>
+
+    <!-- 功能卡片 -->
+    <div class="feature-cards">
+      <div
+        v-for="feature in features"
+        :key="feature.title"
+        class="feature-card"
+      >
+        <div class="feature-icon" :style="{ background: feature.gradient }">
+          <component :is="feature.icon" :size="22" />
+        </div>
+        <h3>{{ feature.title }}</h3>
+        <p>{{ feature.description }}</p>
+      </div>
+    </div>
+
+    <!-- 快速开始建议 -->
+    <div class="quick-start">
+      <h4>试试这些问题</h4>
+      <div class="suggestions-grid">
+        <button
+          v-for="suggestion in suggestions"
+          :key="suggestion.text"
+          class="suggestion-card"
+          @click="$emit('select', suggestion.text)"
+        >
+          <component :is="suggestion.icon" :size="18" class="suggestion-icon" />
+          <span>{{ suggestion.text }}</span>
+          <ChevronRight :size="16" class="arrow-icon" />
+        </button>
+      </div>
+    </div>
+
+    <!-- 底部提示 -->
+    <div class="welcome-footer">
+      <div class="tip">
+        <Keyboard :size="14" />
+        <span>按 <kbd>Ctrl</kbd> + <kbd>/</kbd> 聚焦输入框</span>
+      </div>
+      <div class="tip">
+        <Zap :size="14" />
+        <span>支持 Markdown、代码高亮、LaTeX 公式</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import {
+  Bot,
+  MessageSquare,
+  Code,
+  Image,
+  FileText,
+  ChevronRight,
+  Keyboard,
+  Zap,
+  Globe,
+  Lightbulb,
+  PenTool,
+} from "@/components/icons";
+
+defineEmits<{
+  select: [text: string];
+}>();
+
+const features = computed(() => [
+  {
+    icon: MessageSquare,
+    title: "智能对话",
+    description: "自然流畅的对话体验，理解上下文",
+    gradient: "linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)",
+  },
+  {
+    icon: Code,
+    title: "代码助手",
+    description: "编写、解释、优化各种编程语言代码",
+    gradient: "linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)",
+  },
+  {
+    icon: Image,
+    title: "图像理解",
+    description: "分析图片内容，提取关键信息",
+    gradient: "linear-gradient(135deg, #ec4899 0%, #d946ef 100%)",
+  },
+  {
+    icon: FileText,
+    title: "文档处理",
+    description: "阅读、总结、翻译各类文档",
+    gradient: "linear-gradient(135deg, #f59e0b 0%, #f97316 100%)",
+  },
+]);
+
+const suggestions = computed(() => [
+  {
+    icon: Lightbulb,
+    text: "帮我写一个 Vue 3 组件示例",
+  },
+  {
+    icon: Globe,
+    text: "解释一下什么是机器学习",
+  },
+  {
+    icon: PenTool,
+    text: "帮我写一封商务邮件",
+  },
+  {
+    icon: Code,
+    text: "如何优化 React 应用性能",
+  },
+]);
+</script>
+
+<style lang="scss" scoped>
+.welcome-screen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  padding: 40px 24px;
+  animation: fadeIn 0.5s ease;
+}
+
+.welcome-header {
+  text-align: center;
+  margin-bottom: 48px;
+}
+
+.logo-wrapper {
+  position: relative;
+  display: inline-flex;
+  margin-bottom: 20px;
+}
+
+.logo-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+  border-radius: 24px;
+  color: white;
+  box-shadow: 0 20px 40px -12px rgba(59, 130, 246, 0.35);
+}
+
+.logo-glow {
+  position: absolute;
+  inset: -20px;
+  background: radial-gradient(
+    circle,
+    rgba(59, 130, 246, 0.2) 0%,
+    transparent 70%
+  );
+  pointer-events: none;
+}
+
+.title {
+  margin: 0 0 12px;
+  font-size: 32px;
+  font-weight: 700;
+  color: #1f2937;
+
+  .dark & {
+    color: #f3f4f6;
+  }
+}
+
+.subtitle {
+  margin: 0;
+  font-size: 16px;
+  color: #6b7280;
+
+  .dark & {
+    color: #9ca3af;
+  }
+}
+
+.feature-cards {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  max-width: 900px;
+  width: 100%;
+  margin-bottom: 48px;
+
+  @media (max-width: 900px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (max-width: 500px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.feature-card {
+  padding: 24px;
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  text-align: center;
+  transition: all 0.3s ease;
+
+  .dark & {
+    background: #1e1e2e;
+    border-color: #2d2d3d;
+  }
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.1);
+
+    .dark & {
+      box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.4);
+    }
+  }
+
+  .feature-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    border-radius: 14px;
+    color: white;
+    margin-bottom: 16px;
+  }
+
+  h3 {
+    margin: 0 0 8px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #1f2937;
+
+    .dark & {
+      color: #f3f4f6;
+    }
+  }
+
+  p {
+    margin: 0;
+    font-size: 13px;
+    color: #6b7280;
+    line-height: 1.5;
+
+    .dark & {
+      color: #9ca3af;
+    }
+  }
+}
+
+.quick-start {
+  max-width: 700px;
+  width: 100%;
+  margin-bottom: 40px;
+
+  h4 {
+    margin: 0 0 16px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #6b7280;
+    text-align: center;
+
+    .dark & {
+      color: #9ca3af;
+    }
+  }
+}
+
+.suggestions-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+
+  @media (max-width: 600px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.suggestion-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 14px;
+  color: #374151;
+  font-size: 14px;
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  .dark & {
+    background: #1e1e2e;
+    border-color: #2d2d3d;
+    color: #e5e7eb;
+  }
+
+  &:hover {
+    border-color: #3b82f6;
+    background: rgba(59, 130, 246, 0.05);
+
+    .arrow-icon {
+      transform: translateX(4px);
+      color: #3b82f6;
+    }
+  }
+
+  .suggestion-icon {
+    flex-shrink: 0;
+    color: #3b82f6;
+  }
+
+  span {
+    flex: 1;
+  }
+
+  .arrow-icon {
+    flex-shrink: 0;
+    color: #9ca3af;
+    transition: all 0.2s ease;
+  }
+}
+
+.welcome-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+}
+
+.tip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #9ca3af;
+
+  kbd {
+    padding: 2px 8px;
+    background: #f3f4f6;
+    border-radius: 4px;
+    font-size: 12px;
+
+    .dark & {
+      background: #374151;
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index b036a06..4c474aa 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -1,133 +1,133 @@
-export {
-  // 通用图标
-  Menu,
-  X,
-  Check,
-  Plus,
-  Minus,
-  Search,
-  Settings,
-  Info,
-  AlertCircle,
-  AlertTriangle,
-  Loader2,
-  MoreHorizontal,
-  MoreVertical,
-
-  // 主题图标
-  Moon,
-  Sun,
-  Monitor,
-
-  // 用户/角色
-  User,
-  Bot,
-  Users,
-
-  // 消息/对话
-  MessageSquare,
-  MessageCircle,
-  MessagesSquare,
-  Send,
-  SendHorizontal,
-
-  // 操作图标
-  Copy,
-  Clipboard,
-  ClipboardCheck,
-  Edit3,
-  Pencil,
-  Trash2,
-  Download,
-  Upload,
-  ExternalLink,
-  Link,
-  Share2,
-  RefreshCw,
-  RotateCcw,
-  Brain,
-
-  // 反馈图标
-  ThumbsUp,
-  ThumbsDown,
-  Heart,
-  Star,
-
-  // 导航图标
-  ChevronLeft,
-  ChevronRight,
-  ChevronDown,
-  ChevronUp,
-  ArrowLeft,
-  ArrowRight,
-  ArrowUp,
-  ArrowDown,
-
-  // 状态/标记
-  Pin,
-  PinOff,
-  Archive,
-  Bookmark,
-  Flag,
-  Clock,
-  Calendar,
-  History,
-
-  // 文件夹/文件
-  Folder,
-  FolderOpen,
-  File,
-  FileText,
-  FileCode,
-  FileImage,
-  Paperclip,
-
-  // 媒体图标
-  Image,
-  Video,
-  Play,
-  Pause,
-  Square,
-  StopCircle,
-  Mic,
-  MicOff,
-  Volume2,
-  VolumeX,
-  Camera,
-
-  // 功能图标
-  Sparkles,
-  Wand2,
-  Zap,
-  Globe,
-  Wifi,
-  Code,
-  Terminal,
-  Keyboard,
-  Command,
-  Hash,
-  AtSign,
-  Lightbulb,
-  PenTool,
-  Palette,
-
-  // 布局图标
-  Maximize2,
-  Minimize2,
-  Expand,
-  Shrink,
-  PanelLeft,
-  PanelRight,
-  LayoutGrid,
-  List,
-
-  // 其他
-  HelpCircle,
-  Eye,
-  EyeOff,
-  Lock,
-  Unlock,
-  Shield,
-  Bell,
-  BellOff,
-} from "lucide-vue-next";
+export {
+  // 通用图标
+  Menu,
+  X,
+  Check,
+  Plus,
+  Minus,
+  Search,
+  Settings,
+  Info,
+  AlertCircle,
+  AlertTriangle,
+  Loader2,
+  MoreHorizontal,
+  MoreVertical,
+
+  // 主题图标
+  Moon,
+  Sun,
+  Monitor,
+
+  // 用户/角色
+  User,
+  Bot,
+  Users,
+
+  // 消息/对话
+  MessageSquare,
+  MessageCircle,
+  MessagesSquare,
+  Send,
+  SendHorizontal,
+
+  // 操作图标
+  Copy,
+  Clipboard,
+  ClipboardCheck,
+  Edit3,
+  Pencil,
+  Trash2,
+  Download,
+  Upload,
+  ExternalLink,
+  Link,
+  Share2,
+  RefreshCw,
+  RotateCcw,
+  Brain,
+
+  // 反馈图标
+  ThumbsUp,
+  ThumbsDown,
+  Heart,
+  Star,
+
+  // 导航图标
+  ChevronLeft,
+  ChevronRight,
+  ChevronDown,
+  ChevronUp,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
+  ArrowDown,
+
+  // 状态/标记
+  Pin,
+  PinOff,
+  Archive,
+  Bookmark,
+  Flag,
+  Clock,
+  Calendar,
+  History,
+
+  // 文件夹/文件
+  Folder,
+  FolderOpen,
+  File,
+  FileText,
+  FileCode,
+  FileImage,
+  Paperclip,
+
+  // 媒体图标
+  Image,
+  Video,
+  Play,
+  Pause,
+  Square,
+  StopCircle,
+  Mic,
+  MicOff,
+  Volume2,
+  VolumeX,
+  Camera,
+
+  // 功能图标
+  Sparkles,
+  Wand2,
+  Zap,
+  Globe,
+  Wifi,
+  Code,
+  Terminal,
+  Keyboard,
+  Command,
+  Hash,
+  AtSign,
+  Lightbulb,
+  PenTool,
+  Palette,
+
+  // 布局图标
+  Maximize2,
+  Minimize2,
+  Expand,
+  Shrink,
+  PanelLeft,
+  PanelRight,
+  LayoutGrid,
+  List,
+
+  // 其他
+  HelpCircle,
+  Eye,
+  EyeOff,
+  Lock,
+  Unlock,
+  Shield,
+  Bell,
+  BellOff,
+} from "lucide-vue-next";
diff --git a/src/components/input/AttachmentPreview.vue b/src/components/input/AttachmentPreview.vue
index 7a689c2..d23f687 100644
--- a/src/components/input/AttachmentPreview.vue
+++ b/src/components/input/AttachmentPreview.vue
@@ -1,266 +1,269 @@
-<template>
-  <div class="attachment-preview">
-    <TransitionGroup name="attachment">
-      <div
-          v-for="attachment in attachments"
-          :key="attachment.id"
-          class="attachment-item"
-          :class="attachment.type"
-      >
-        <!-- 图片预览 -->
-        <template v-if="attachment.type === 'image'">
-          <img :src="attachment.url" :alt="attachment.name" class="preview-image" />
-        </template>
-
-        <!-- 视频预览 -->
-        <template v-else-if="attachment.type === 'video'">
-          <div class="preview-video">
-            <img
-                v-if="attachment.thumbnail"
-                :src="attachment.thumbnail"
-                :alt="attachment.name"
-            />
-            <div v-else class="video-placeholder">
-              <Video :size="24" />
-            </div>
-            <div class="video-badge">
-              <Play :size="12" />
-            </div>
-          </div>
-        </template>
-
-        <!-- 文件预览 -->
-        <template v-else>
-          <div class="preview-file">
-            <span class="file-emoji">{{ getFileEmoji(attachment.mimeType) }}</span>
-            <div class="file-details">
-              <span class="file-name">{{ truncateName(attachment.name) }}</span>
-              <span class="file-size">{{ formatSize(attachment.size) }}</span>
-            </div>
-          </div>
-        </template>
-
-        <!-- 删除按钮 -->
-        <button
-            class="remove-btn"
-            @click="$emit('remove', attachment.id)"
-        >
-          <X :size="14" />
-        </button>
-
-        <!-- 上传进度 -->
-        <div v-if="attachment.uploading" class="upload-progress">
-          <div
-              class="progress-bar"
-              :style="{ width: `${attachment.progress || 0}%` }"
-          />
-        </div>
-      </div>
-    </TransitionGroup>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { X, Video, Play } from '@/components/icons'
-import { formatFileSize, getFileIcon, truncateText } from '@/utils/helpers'
-
-interface AttachmentWithProgress {
-  id: string
-  name: string
-  type: 'image' | 'file' | 'video'
-  url: string
-  size?: number
-  mimeType?: string
-  thumbnail?: string
-  uploading?: boolean
-  progress?: number
-}
-
-defineProps<{
-  attachments: AttachmentWithProgress[]
-}>()
-
-defineEmits<{
-  remove: [id: string]
-}>()
-
-function getFileEmoji(mimeType?: string) {
-  return getFileIcon(mimeType || '')
-}
-
-function formatSize(size?: number) {
-  return size ? formatFileSize(size) : ''
-}
-
-function truncateName(name: string) {
-  return truncateText(name, 20)
-}
-</script>
-
-<style lang="scss" scoped>
-.attachment-preview {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  padding: 12px 16px;
-  border-bottom: 1px solid #e2e8f0;
-
-  .dark & {
-    border-bottom-color: #374151;
-  }
-}
-
-.attachment-item {
-  position: relative;
-  border-radius: 12px;
-  overflow: hidden;
-  background: #f3f4f6;
-
-  .dark & {
-    background: #374151;
-  }
-
-  &.image,
-  &.video {
-    width: 80px;
-    height: 80px;
-  }
-
-  &.file {
-    padding: 10px 40px 10px 12px;
-  }
-}
-
-.preview-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.preview-video {
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .video-placeholder {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: #e5e7eb;
-    color: #9ca3af;
-
-    .dark & {
-      background: #4b5563;
-    }
-  }
-
-  .video-badge {
-    position: absolute;
-    bottom: 6px;
-    left: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 22px;
-    height: 22px;
-    background: rgba(0, 0, 0, 0.7);
-    border-radius: 50%;
-    color: white;
-  }
-}
-
-.preview-file {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.file-emoji {
-  font-size: 24px;
-}
-
-.file-details {
-  display: flex;
-  flex-direction: column;
-}
-
-.file-name {
-  font-size: 13px;
-  font-weight: 500;
-  color: #374151;
-
-  .dark & {
-    color: #e5e7eb;
-  }
-}
-
-.file-size {
-  font-size: 11px;
-  color: #9ca3af;
-}
-
-.remove-btn {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  border: none;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.6);
-  color: white;
-  cursor: pointer;
-  opacity: 0;
-  transition: all 0.2s ease;
-
-  .attachment-item:hover & {
-    opacity: 1;
-  }
-
-  &:hover {
-    background: rgba(239, 68, 68, 0.9);
-  }
-}
-
-.upload-progress {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: rgba(0, 0, 0, 0.2);
-
-  .progress-bar {
-    height: 100%;
-    background: #3b82f6;
-    transition: width 0.3s ease;
-  }
-}
-
-// 过渡动画
-.attachment-enter-active,
-.attachment-leave-active {
-  transition: all 0.3s ease;
-}
-
-.attachment-enter-from {
-  opacity: 0;
-  transform: scale(0.8);
-}
-
-.attachment-leave-to {
-  opacity: 0;
-  transform: scale(0.8);
-}
-</style>
\ No newline at end of file
+<template>
+  <div class="attachment-preview">
+    <TransitionGroup name="attachment">
+      <div
+        v-for="attachment in attachments"
+        :key="attachment.id"
+        class="attachment-item"
+        :class="attachment.type"
+      >
+        <!-- 图片预览 -->
+        <template v-if="attachment.type === 'image'">
+          <img
+            :src="attachment.url"
+            :alt="attachment.name"
+            class="preview-image"
+          />
+        </template>
+
+        <!-- 视频预览 -->
+        <template v-else-if="attachment.type === 'video'">
+          <div class="preview-video">
+            <img
+              v-if="attachment.thumbnail"
+              :src="attachment.thumbnail"
+              :alt="attachment.name"
+            />
+            <div v-else class="video-placeholder">
+              <Video :size="24" />
+            </div>
+            <div class="video-badge">
+              <Play :size="12" />
+            </div>
+          </div>
+        </template>
+
+        <!-- 文件预览 -->
+        <template v-else>
+          <div class="preview-file">
+            <span class="file-emoji">{{
+              getFileEmoji(attachment.mimeType)
+            }}</span>
+            <div class="file-details">
+              <span class="file-name">{{ truncateName(attachment.name) }}</span>
+              <span class="file-size">{{ formatSize(attachment.size) }}</span>
+            </div>
+          </div>
+        </template>
+
+        <!-- 删除按钮 -->
+        <button class="remove-btn" @click="$emit('remove', attachment.id)">
+          <X :size="14" />
+        </button>
+
+        <!-- 上传进度 -->
+        <div v-if="attachment.uploading" class="upload-progress">
+          <div
+            class="progress-bar"
+            :style="{ width: `${attachment.progress || 0}%` }"
+          />
+        </div>
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { X, Video, Play } from "@/components/icons";
+import { formatFileSize, getFileIcon, truncateText } from "@/utils/helpers";
+
+interface AttachmentWithProgress {
+  id: string;
+  name: string;
+  type: "image" | "file" | "video";
+  url: string;
+  size?: number;
+  mimeType?: string;
+  thumbnail?: string;
+  uploading?: boolean;
+  progress?: number;
+}
+
+defineProps<{
+  attachments: AttachmentWithProgress[];
+}>();
+
+defineEmits<{
+  remove: [id: string];
+}>();
+
+function getFileEmoji(mimeType?: string) {
+  return getFileIcon(mimeType || "");
+}
+
+function formatSize(size?: number) {
+  return size ? formatFileSize(size) : "";
+}
+
+function truncateName(name: string) {
+  return truncateText(name, 20);
+}
+</script>
+
+<style lang="scss" scoped>
+.attachment-preview {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e2e8f0;
+
+  .dark & {
+    border-bottom-color: #374151;
+  }
+}
+
+.attachment-item {
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #f3f4f6;
+
+  .dark & {
+    background: #374151;
+  }
+
+  &.image,
+  &.video {
+    width: 80px;
+    height: 80px;
+  }
+
+  &.file {
+    padding: 10px 40px 10px 12px;
+  }
+}
+
+.preview-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.preview-video {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .video-placeholder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #e5e7eb;
+    color: #9ca3af;
+
+    .dark & {
+      background: #4b5563;
+    }
+  }
+
+  .video-badge {
+    position: absolute;
+    bottom: 6px;
+    left: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    background: rgba(0, 0, 0, 0.7);
+    border-radius: 50%;
+    color: white;
+  }
+}
+
+.preview-file {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.file-emoji {
+  font-size: 24px;
+}
+
+.file-details {
+  display: flex;
+  flex-direction: column;
+}
+
+.file-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: #374151;
+
+  .dark & {
+    color: #e5e7eb;
+  }
+}
+
+.file-size {
+  font-size: 11px;
+  color: #9ca3af;
+}
+
+.remove-btn {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.6);
+  color: white;
+  cursor: pointer;
+  opacity: 0;
+  transition: all 0.2s ease;
+
+  .attachment-item:hover & {
+    opacity: 1;
+  }
+
+  &:hover {
+    background: rgba(239, 68, 68, 0.9);
+  }
+}
+
+.upload-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: rgba(0, 0, 0, 0.2);
+
+  .progress-bar {
+    height: 100%;
+    background: #3b82f6;
+    transition: width 0.3s ease;
+  }
+}
+
+// 过渡动画
+.attachment-enter-active,
+.attachment-leave-active {
+  transition: all 0.3s ease;
+}
+
+.attachment-enter-from {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+.attachment-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
+</style>
diff --git a/src/components/input/ChatInput.vue b/src/components/input/ChatInput.vue
index ba2d560..45034bb 100644
--- a/src/components/input/ChatInput.vue
+++ b/src/components/input/ChatInput.vue
@@ -1,675 +1,673 @@
-<template>
-  <div
-    class="chat-input-container"
-    :class="{ 'is-focused': isFocused, 'is-expanded': isExpanded }"
-  >
-    <!-- 附件预览区 -->
-    <AttachmentPreview
-      v-if="attachments.length > 0"
-      :attachments="attachments"
-      @remove="removeAttachment"
-    />
-
-    <!-- 输入区域 -->
-    <div class="input-area">
-      <!-- 左侧功能按钮 -->
-      <div class="input-actions left">
-        <!-- 附件按钮 -->
-        <button class="action-btn" title="添加附件" @click="triggerFileInput">
-          <Paperclip :size="20" />
-        </button>
-
-        <!-- 图片按钮 -->
-        <button class="action-btn" title="添加图片" @click="triggerImageInput">
-          <Image :size="20" />
-        </button>
-
-        <!-- 隐藏的文件输入框 -->
-        <input
-          ref="fileInputRef"
-          type="file"
-          multiple
-          hidden
-          @change="handleFileSelect"
-        />
-        <input
-          ref="imageInputRef"
-          type="file"
-          accept="image/*"
-          multiple
-          hidden
-          @change="handleImageSelect"
-        />
-      </div>
-
-      <!-- 文本输入框 -->
-      <div class="textarea-wrapper">
-        <textarea
-          ref="textareaRef"
-          v-model="inputText"
-          :placeholder="placeholder"
-          :rows="1"
-          @input="autoResize"
-          @focus="isFocused = true"
-          @blur="isFocused = false"
-          @keydown="handleKeydown"
-          @paste="handlePaste"
-        />
-      </div>
-
-      <!-- 右侧功能按钮 -->
-      <div class="input-actions right">
-        <!-- 发送/停止按钮 -->
-        <button
-          v-if="isStreaming"
-          class="action-btn stop"
-          title="停止生成"
-          @click="$emit('stop')"
-        >
-          <StopCircle :size="20" />
-        </button>
-        <button
-          v-else
-          class="action-btn send"
-          :class="{ active: canSend, loading: isUploading }"
-          :disabled="!canSend"
-          :title="isUploading ? '上传中...' : '发送消息 (Ctrl+Enter)'"
-          @click="handleSend"
-        >
-          <Loader2 v-if="isUploading" :size="20" class="animate-spin" />
-          <Send v-else :size="20" />
-        </button>
-      </div>
-    </div>
-
-    <!-- 底部工具栏 -->
-    <div class="input-toolbar">
-      <div class="toolbar-left">
-        <!-- 深度思考开关 -->
-        <button
-          class="toolbar-btn"
-          :class="{ active: isDeepThinking }"
-          title="深度思考"
-          @click="toggleDeepThink"
-        >
-          <Brain :size="16" />
-          <span>深度思考</span>
-        </button>
-
-        <!-- 深度搜索开关 -->
-        <button
-          class="toolbar-btn"
-          :class="{ active: isDeepSearch }"
-          title="深度搜索"
-          @click="toggleDeepSearch"
-        >
-          <Sparkles :size="16" />
-          <span>深度搜索</span>
-        </button>
-
-        <!-- 联网搜索开关 -->
-        <button
-          class="toolbar-btn"
-          :class="{ active: isWebSearch }"
-          title="联网搜索"
-          @click="toggleWebSearch"
-        >
-          <Globe :size="16" />
-          <span>联网搜索</span>
-        </button>
-
-        <!-- 展开/收起 -->
-        <button class="toolbar-btn" title="展开输入框" @click="toggleExpand">
-          <Maximize2 v-if="!isExpanded" :size="16" />
-          <Minimize2 v-else :size="16" />
-        </button>
-      </div>
-
-      <div class="toolbar-right">
-        <span
-          class="char-count"
-          :class="{ warning: charCount > maxChars * 0.9 }"
-        >
-          {{ charCount }} / {{ maxChars }}
-        </span>
-        <span class="send-hint">
-          {{ sendOnEnter ? "Enter 发送, Shift+Enter 换行" : "Ctrl+Enter 发送" }}
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, nextTick, onMounted } from "vue";
-import {
-  Paperclip,
-  Image,
-  Send,
-  StopCircle,
-  Sparkles,
-  Globe,
-  Maximize2,
-  Minimize2,
-  Brain,
-  Loader2,
-} from "@/components/icons";
-import AttachmentPreview from "./AttachmentPreview.vue";
-import { generateId } from "@/utils/helpers";
-import type { Attachment } from "@/types/chat";
-import { chatApi } from "@/services/api";
-
-interface AttachmentWithProgress extends Attachment {
-  uploading?: boolean;
-  progress?: number;
-}
-
-const props = withDefaults(
-  defineProps<{
-    placeholder?: string;
-    isStreaming?: boolean;
-    sendOnEnter?: boolean;
-    maxChars?: number;
-    disabled?: boolean;
-  }>(),
-  {
-    placeholder: "输入你的问题...",
-    isStreaming: false,
-    sendOnEnter: false,
-    maxChars: 4000,
-    disabled: false,
-  },
-);
-
-const emit = defineEmits<{
-  send: [
-    text: string,
-    attachments: Attachment[],
-    options: { deepSearch: boolean; webSearch: boolean; deepThinking: boolean },
-  ];
-  stop: [];
-}>();
-
-// 响应式状态
-const inputText = ref("");
-const attachments = ref<AttachmentWithProgress[]>([]);
-const isFocused = ref(false);
-const isExpanded = ref(false);
-const isDeepSearch = ref(
-  JSON.parse(localStorage.getItem("isDeepSearch") || "false"),
-);
-const isDeepThinking = ref(
-  JSON.parse(localStorage.getItem("isDeepThinking") || "false"),
-);
-const isWebSearch = ref(
-  JSON.parse(localStorage.getItem("isWebSearch") || "false"),
-);
-// DOM引用
-const textareaRef = ref<HTMLTextAreaElement | null>(null);
-const fileInputRef = ref<HTMLInputElement | null>(null);
-const imageInputRef = ref<HTMLInputElement | null>(null);
-
-// 计算属性
-const charCount = computed(() => inputText.value.length);
-const isUploading = computed(() =>
-  attachments.value.some((a) => a.uploading),
-);
-const canSend = computed(() => {
-  return (
-    (inputText.value.trim().length > 0 || attachments.value.length > 0) &&
-    !props.disabled &&
-    charCount.value <= props.maxChars &&
-    !isUploading.value
-  );
-});
-
-// 自动调整高度
-function autoResize() {
-  const textarea = textareaRef.value;
-  if (!textarea) return;
-
-  textarea.style.height = "auto";
-  const maxHeight = isExpanded.value ? 400 : 160;
-  textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
-}
-
-// 处理键盘事件
-function handleKeydown(event: KeyboardEvent) {
-  // Ctrl+Enter 或 Cmd+Enter 发送
-  if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
-    event.preventDefault();
-    handleSend();
-    return;
-  }
-
-  // Enter 发送（如果开启了这个选项且没有按 Shift）
-  if (props.sendOnEnter && event.key === "Enter" && !event.shiftKey) {
-    event.preventDefault();
-    handleSend();
-    return;
-  }
-}
-
-// 发送消息
-function handleSend() {
-  if (!canSend.value) return;
-
-  emit("send", inputText.value.trim(), [...attachments.value], {
-    deepSearch: isDeepSearch.value,
-    webSearch: isWebSearch.value,
-    deepThinking: isDeepThinking.value,
-  });
-
-  // 重置状态
-  inputText.value = "";
-  attachments.value = [];
-  // isDeepSearch.value = false;
-  // isWebSearch.value = false;
-  // isDeepThinking.value = false;
-
-  nextTick(() => {
-    autoResize();
-  });
-}
-
-// 处理粘贴事件
-async function handlePaste(event: ClipboardEvent) {
-  const items = event.clipboardData?.items;
-  if (!items) return;
-
-  for (const item of items) {
-    if (item.type.startsWith("image/")) {
-      event.preventDefault();
-      const file = item.getAsFile();
-      if (file) {
-        await addFileAsAttachment(file, "image");
-      }
-    }
-  }
-}
-
-// 触发文件选择
-function triggerFileInput() {
-  fileInputRef.value?.click();
-}
-
-function triggerImageInput() {
-  imageInputRef.value?.click();
-}
-
-// 处理文件选择
-async function handleFileSelect(event: Event) {
-  const input = event.target as HTMLInputElement;
-  const files = input.files;
-  if (!files) return;
-
-  for (const file of files) {
-    await addFileAsAttachment(file, "file");
-  }
-
-  input.value = "";
-}
-
-async function handleImageSelect(event: Event) {
-  const input = event.target as HTMLInputElement;
-  const files = input.files;
-  if (!files) return;
-
-  for (const file of files) {
-    await addFileAsAttachment(file, "image");
-  }
-
-  input.value = "";
-}
-
-// 添加文件作为附件
-async function addFileAsAttachment(
-  file: File,
-  type: "image" | "file" | "video",
-) {
-  const id = generateId();
-
-  // 创建本地预览URL
-  const url = URL.createObjectURL(file);
-
-  const attachment: AttachmentWithProgress = {
-    id,
-    name: file.name,
-    type,
-    url,
-    size: file.size,
-    mimeType: file.type,
-    uploading: true,
-    progress: 0,
-  };
-
-  attachments.value.push(attachment);
-
-  // 实际上传文件到服务器
-  await uploadFileToServer(id, file);
-}
-
-// 上传文件到服务器
-async function uploadFileToServer(id: string, file: File) {
-  try {
-    const uploadResult = await chatApi.uploadFile(file);
-
-    const attachment = attachments.value.find((a) => a.id === id);
-    if (attachment) {
-      // 替换本地预览URL为服务器返回的真实URL
-      attachment.url = uploadResult.url;
-      attachment.uploading = false;
-      attachment.progress = 100;
-    }
-
-    // 显示上传成功提示
-    window.$toast && window.$toast('文件上传成功', 'success');
-  } catch (error) {
-    console.error('文件上传失败:', error);
-
-    const attachment = attachments.value.find((a) => a.id === id);
-    if (attachment) {
-      attachment.uploading = false;
-      // 设置错误状态或者移除附件
-      removeAttachment(id);
-    }
-
-    // 显示错误提示
-    window.$toast && window.$toast('文件上传失败，请重试', 'error');
-  }
-}
-
-// 移除附件
-function removeAttachment(id: string) {
-  const index = attachments.value.findIndex((a) => a.id === id);
-  if (index !== -1) {
-    // 释放 blob URL
-    URL.revokeObjectURL(attachments.value[index].url);
-    attachments.value.splice(index, 1);
-  }
-}
-
-// 切换功能（深度搜索与联网搜索互斥）
-function toggleDeepSearch() {
-  isDeepSearch.value = !isDeepSearch.value;
-  if (isDeepSearch.value) {
-    isWebSearch.value = false;
-    localStorage.setItem("isWebSearch", "false");
-  }
-  localStorage.setItem("isDeepSearch", String(isDeepSearch.value));
-}
-
-function toggleDeepThink() {
-  isDeepThinking.value = !isDeepThinking.value;
-  localStorage.setItem("isDeepThinking", String(isDeepThinking.value));
-}
-
-function toggleWebSearch() {
-  isWebSearch.value = !isWebSearch.value;
-  if (isWebSearch.value) {
-    isDeepSearch.value = false;
-    localStorage.setItem("isDeepSearch", "false");
-  }
-  localStorage.setItem("isWebSearch", String(isWebSearch.value));
-}
-
-function toggleExpand() {
-  isExpanded.value = !isExpanded.value;
-  nextTick(() => {
-    autoResize();
-  });
-}
-
-// 暴露方法给父组件
-function focus() {
-  textareaRef.value?.focus();
-}
-
-function clear() {
-  inputText.value = "";
-  attachments.value = [];
-  nextTick(() => {
-    autoResize();
-  });
-}
-
-defineExpose({
-  focus,
-  clear,
-});
-
-// 监听文本变化，自动调整高度
-watch(inputText, () => {
-  nextTick(() => {
-    autoResize();
-  });
-});
-
-onMounted(() => {
-  autoResize();
-});
-</script>
-
-<style lang="scss" scoped>
-.chat-input-container {
-  background: white;
-  border: 2px solid #e2e8f0;
-  border-radius: 20px;
-  overflow: hidden;
-  transition: all 0.2s ease;
-
-  .dark & {
-    background: #1e1e2e;
-    border-color: #374151;
-  }
-
-  &.is-focused {
-    border-color: #3b82f6;
-    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
-  }
-
-  &.is-expanded {
-    .textarea-wrapper textarea {
-      min-height: 200px;
-    }
-  }
-}
-
-.input-area {
-  display: flex;
-  align-items: flex-end;
-  gap: 8px;
-  padding: 12px 16px;
-}
-
-.input-actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding-bottom: 4px;
-
-  &.left {
-    flex-shrink: 0;
-  }
-
-  &.right {
-    flex-shrink: 0;
-  }
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 38px;
-  height: 38px;
-  border: none;
-  border-radius: 12px;
-  background: transparent;
-  color: #6b7280;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background: #f3f4f6;
-    color: #374151;
-
-    .dark & {
-      background: #374151;
-      color: #e5e7eb;
-    }
-  }
-
-  &.send {
-    background: #e5e7eb;
-    color: #9ca3af;
-
-    .dark & {
-      background: #374151;
-    }
-
-    &.active {
-      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-      color: white;
-
-      &:hover {
-        transform: scale(1.05);
-        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
-      }
-    }
-
-    &.loading {
-      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-      color: white;
-      cursor: wait;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 0.6;
-    }
-  }
-
-  &.stop {
-    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-    color: white;
-    animation: pulse 2s infinite;
-
-    &:hover {
-      transform: scale(1.05);
-    }
-  }
-}
-
-.textarea-wrapper {
-  flex: 1;
-  min-width: 0;
-
-  textarea {
-    width: 100%;
-    min-height: 24px;
-    max-height: 160px;
-    padding: 8px 0;
-    border: none;
-    outline: none;
-    background: transparent;
-    font-family: inherit;
-    font-size: 15px;
-    line-height: 1.5;
-    color: #1f2937;
-    resize: none;
-
-    .dark & {
-      color: #f3f4f6;
-    }
-
-    &::placeholder {
-      color: #9ca3af;
-    }
-  }
-}
-
-.input-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 16px;
-  border-top: 1px solid #f3f4f6;
-  background: #fafbfc;
-
-  .dark & {
-    border-top-color: #2d2d3d;
-    background: #181825;
-  }
-}
-
-.toolbar-left {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.toolbar-btn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  background: transparent;
-  color: #6b7280;
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background: #f3f4f6;
-    color: #374151;
-
-    .dark & {
-      background: #2d2d3d;
-      color: #e5e7eb;
-    }
-  }
-
-  &.active {
-    background: rgba(59, 130, 246, 0.1);
-    border-color: rgba(59, 130, 246, 0.3);
-    color: #3b82f6;
-
-    svg {
-      color: #3b82f6;
-    }
-  }
-}
-
-.toolbar-right {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.char-count {
-  font-size: 12px;
-  color: #9ca3af;
-
-  &.warning {
-    color: #f59e0b;
-  }
-}
-
-.send-hint {
-  font-size: 12px;
-  color: #9ca3af;
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
-  }
-  50% {
-    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
-  }
-}
-</style>
+<template>
+  <div
+    class="chat-input-container"
+    :class="{ 'is-focused': isFocused, 'is-expanded': isExpanded }"
+  >
+    <!-- 附件预览区 -->
+    <AttachmentPreview
+      v-if="attachments.length > 0"
+      :attachments="attachments"
+      @remove="removeAttachment"
+    />
+
+    <!-- 输入区域 -->
+    <div class="input-area">
+      <!-- 左侧功能按钮 -->
+      <div class="input-actions left">
+        <!-- 附件按钮 -->
+        <button class="action-btn" title="添加附件" @click="triggerFileInput">
+          <Paperclip :size="20" />
+        </button>
+
+        <!-- 图片按钮 -->
+        <button class="action-btn" title="添加图片" @click="triggerImageInput">
+          <Image :size="20" />
+        </button>
+
+        <!-- 隐藏的文件输入框 -->
+        <input
+          ref="fileInputRef"
+          type="file"
+          multiple
+          hidden
+          @change="handleFileSelect"
+        />
+        <input
+          ref="imageInputRef"
+          type="file"
+          accept="image/*"
+          multiple
+          hidden
+          @change="handleImageSelect"
+        />
+      </div>
+
+      <!-- 文本输入框 -->
+      <div class="textarea-wrapper">
+        <textarea
+          ref="textareaRef"
+          v-model="inputText"
+          :placeholder="placeholder"
+          :rows="1"
+          @input="autoResize"
+          @focus="isFocused = true"
+          @blur="isFocused = false"
+          @keydown="handleKeydown"
+          @paste="handlePaste"
+        />
+      </div>
+
+      <!-- 右侧功能按钮 -->
+      <div class="input-actions right">
+        <!-- 发送/停止按钮 -->
+        <button
+          v-if="isStreaming"
+          class="action-btn stop"
+          title="停止生成"
+          @click="$emit('stop')"
+        >
+          <StopCircle :size="20" />
+        </button>
+        <button
+          v-else
+          class="action-btn send"
+          :class="{ active: canSend, loading: isUploading }"
+          :disabled="!canSend"
+          :title="isUploading ? '上传中...' : '发送消息 (Ctrl+Enter)'"
+          @click="handleSend"
+        >
+          <Loader2 v-if="isUploading" :size="20" class="animate-spin" />
+          <Send v-else :size="20" />
+        </button>
+      </div>
+    </div>
+
+    <!-- 底部工具栏 -->
+    <div class="input-toolbar">
+      <div class="toolbar-left">
+        <!-- 深度思考开关 -->
+        <button
+          class="toolbar-btn"
+          :class="{ active: isDeepThinking }"
+          title="深度思考"
+          @click="toggleDeepThink"
+        >
+          <Brain :size="16" />
+          <span>深度思考</span>
+        </button>
+
+        <!-- 深度搜索开关 -->
+        <button
+          class="toolbar-btn"
+          :class="{ active: isDeepSearch }"
+          title="深度搜索"
+          @click="toggleDeepSearch"
+        >
+          <Sparkles :size="16" />
+          <span>深度搜索</span>
+        </button>
+
+        <!-- 联网搜索开关 -->
+        <button
+          class="toolbar-btn"
+          :class="{ active: isWebSearch }"
+          title="联网搜索"
+          @click="toggleWebSearch"
+        >
+          <Globe :size="16" />
+          <span>联网搜索</span>
+        </button>
+
+        <!-- 展开/收起 -->
+        <button class="toolbar-btn" title="展开输入框" @click="toggleExpand">
+          <Maximize2 v-if="!isExpanded" :size="16" />
+          <Minimize2 v-else :size="16" />
+        </button>
+      </div>
+
+      <div class="toolbar-right">
+        <span
+          class="char-count"
+          :class="{ warning: charCount > maxChars * 0.9 }"
+        >
+          {{ charCount }} / {{ maxChars }}
+        </span>
+        <span class="send-hint">
+          {{ sendOnEnter ? "Enter 发送, Shift+Enter 换行" : "Ctrl+Enter 发送" }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick, onMounted } from "vue";
+import {
+  Paperclip,
+  Image,
+  Send,
+  StopCircle,
+  Sparkles,
+  Globe,
+  Maximize2,
+  Minimize2,
+  Brain,
+  Loader2,
+} from "@/components/icons";
+import AttachmentPreview from "./AttachmentPreview.vue";
+import { generateId } from "@/utils/helpers";
+import type { Attachment } from "@/types/chat";
+import { chatApi } from "@/services/api";
+
+interface AttachmentWithProgress extends Attachment {
+  uploading?: boolean;
+  progress?: number;
+}
+
+const props = withDefaults(
+  defineProps<{
+    placeholder?: string;
+    isStreaming?: boolean;
+    sendOnEnter?: boolean;
+    maxChars?: number;
+    disabled?: boolean;
+  }>(),
+  {
+    placeholder: "输入你的问题...",
+    isStreaming: false,
+    sendOnEnter: false,
+    maxChars: 4000,
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<{
+  send: [
+    text: string,
+    attachments: Attachment[],
+    options: { deepSearch: boolean; webSearch: boolean; deepThinking: boolean },
+  ];
+  stop: [];
+}>();
+
+// 响应式状态
+const inputText = ref("");
+const attachments = ref<AttachmentWithProgress[]>([]);
+const isFocused = ref(false);
+const isExpanded = ref(false);
+const isDeepSearch = ref(
+  JSON.parse(localStorage.getItem("isDeepSearch") || "false"),
+);
+const isDeepThinking = ref(
+  JSON.parse(localStorage.getItem("isDeepThinking") || "false"),
+);
+const isWebSearch = ref(
+  JSON.parse(localStorage.getItem("isWebSearch") || "false"),
+);
+// DOM引用
+const textareaRef = ref<HTMLTextAreaElement | null>(null);
+const fileInputRef = ref<HTMLInputElement | null>(null);
+const imageInputRef = ref<HTMLInputElement | null>(null);
+
+// 计算属性
+const charCount = computed(() => inputText.value.length);
+const isUploading = computed(() => attachments.value.some((a) => a.uploading));
+const canSend = computed(() => {
+  return (
+    (inputText.value.trim().length > 0 || attachments.value.length > 0) &&
+    !props.disabled &&
+    charCount.value <= props.maxChars &&
+    !isUploading.value
+  );
+});
+
+// 自动调整高度
+function autoResize() {
+  const textarea = textareaRef.value;
+  if (!textarea) return;
+
+  textarea.style.height = "auto";
+  const maxHeight = isExpanded.value ? 400 : 160;
+  textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
+}
+
+// 处理键盘事件
+function handleKeydown(event: KeyboardEvent) {
+  // Ctrl+Enter 或 Cmd+Enter 发送
+  if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
+    event.preventDefault();
+    handleSend();
+    return;
+  }
+
+  // Enter 发送（如果开启了这个选项且没有按 Shift）
+  if (props.sendOnEnter && event.key === "Enter" && !event.shiftKey) {
+    event.preventDefault();
+    handleSend();
+    return;
+  }
+}
+
+// 发送消息
+function handleSend() {
+  if (!canSend.value) return;
+
+  emit("send", inputText.value.trim(), [...attachments.value], {
+    deepSearch: isDeepSearch.value,
+    webSearch: isWebSearch.value,
+    deepThinking: isDeepThinking.value,
+  });
+
+  // 重置状态
+  inputText.value = "";
+  attachments.value = [];
+  // isDeepSearch.value = false;
+  // isWebSearch.value = false;
+  // isDeepThinking.value = false;
+
+  nextTick(() => {
+    autoResize();
+  });
+}
+
+// 处理粘贴事件
+async function handlePaste(event: ClipboardEvent) {
+  const items = event.clipboardData?.items;
+  if (!items) return;
+
+  for (const item of items) {
+    if (item.type.startsWith("image/")) {
+      event.preventDefault();
+      const file = item.getAsFile();
+      if (file) {
+        await addFileAsAttachment(file, "image");
+      }
+    }
+  }
+}
+
+// 触发文件选择
+function triggerFileInput() {
+  fileInputRef.value?.click();
+}
+
+function triggerImageInput() {
+  imageInputRef.value?.click();
+}
+
+// 处理文件选择
+async function handleFileSelect(event: Event) {
+  const input = event.target as HTMLInputElement;
+  const files = input.files;
+  if (!files) return;
+
+  for (const file of files) {
+    await addFileAsAttachment(file, "file");
+  }
+
+  input.value = "";
+}
+
+async function handleImageSelect(event: Event) {
+  const input = event.target as HTMLInputElement;
+  const files = input.files;
+  if (!files) return;
+
+  for (const file of files) {
+    await addFileAsAttachment(file, "image");
+  }
+
+  input.value = "";
+}
+
+// 添加文件作为附件
+async function addFileAsAttachment(
+  file: File,
+  type: "image" | "file" | "video",
+) {
+  const id = generateId();
+
+  // 创建本地预览URL
+  const url = URL.createObjectURL(file);
+
+  const attachment: AttachmentWithProgress = {
+    id,
+    name: file.name,
+    type,
+    url,
+    size: file.size,
+    mimeType: file.type,
+    uploading: true,
+    progress: 0,
+  };
+
+  attachments.value.push(attachment);
+
+  // 实际上传文件到服务器
+  await uploadFileToServer(id, file);
+}
+
+// 上传文件到服务器
+async function uploadFileToServer(id: string, file: File) {
+  try {
+    const uploadResult = await chatApi.uploadFile(file);
+
+    const attachment = attachments.value.find((a) => a.id === id);
+    if (attachment) {
+      // 替换本地预览URL为服务器返回的真实URL
+      attachment.url = uploadResult.url;
+      attachment.uploading = false;
+      attachment.progress = 100;
+    }
+
+    // 显示上传成功提示
+    window.$toast && window.$toast("文件上传成功", "success");
+  } catch (error) {
+    console.error("文件上传失败:", error);
+
+    const attachment = attachments.value.find((a) => a.id === id);
+    if (attachment) {
+      attachment.uploading = false;
+      // 设置错误状态或者移除附件
+      removeAttachment(id);
+    }
+
+    // 显示错误提示
+    window.$toast && window.$toast("文件上传失败，请重试", "error");
+  }
+}
+
+// 移除附件
+function removeAttachment(id: string) {
+  const index = attachments.value.findIndex((a) => a.id === id);
+  if (index !== -1) {
+    // 释放 blob URL
+    URL.revokeObjectURL(attachments.value[index].url);
+    attachments.value.splice(index, 1);
+  }
+}
+
+// 切换功能（深度搜索与联网搜索互斥）
+function toggleDeepSearch() {
+  isDeepSearch.value = !isDeepSearch.value;
+  if (isDeepSearch.value) {
+    isWebSearch.value = false;
+    localStorage.setItem("isWebSearch", "false");
+  }
+  localStorage.setItem("isDeepSearch", String(isDeepSearch.value));
+}
+
+function toggleDeepThink() {
+  isDeepThinking.value = !isDeepThinking.value;
+  localStorage.setItem("isDeepThinking", String(isDeepThinking.value));
+}
+
+function toggleWebSearch() {
+  isWebSearch.value = !isWebSearch.value;
+  if (isWebSearch.value) {
+    isDeepSearch.value = false;
+    localStorage.setItem("isDeepSearch", "false");
+  }
+  localStorage.setItem("isWebSearch", String(isWebSearch.value));
+}
+
+function toggleExpand() {
+  isExpanded.value = !isExpanded.value;
+  nextTick(() => {
+    autoResize();
+  });
+}
+
+// 暴露方法给父组件
+function focus() {
+  textareaRef.value?.focus();
+}
+
+function clear() {
+  inputText.value = "";
+  attachments.value = [];
+  nextTick(() => {
+    autoResize();
+  });
+}
+
+defineExpose({
+  focus,
+  clear,
+});
+
+// 监听文本变化，自动调整高度
+watch(inputText, () => {
+  nextTick(() => {
+    autoResize();
+  });
+});
+
+onMounted(() => {
+  autoResize();
+});
+</script>
+
+<style lang="scss" scoped>
+.chat-input-container {
+  background: white;
+  border: 2px solid #e2e8f0;
+  border-radius: 20px;
+  overflow: hidden;
+  transition: all 0.2s ease;
+
+  .dark & {
+    background: #1e1e2e;
+    border-color: #374151;
+  }
+
+  &.is-focused {
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+  }
+
+  &.is-expanded {
+    .textarea-wrapper textarea {
+      min-height: 200px;
+    }
+  }
+}
+
+.input-area {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+}
+
+.input-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding-bottom: 4px;
+
+  &.left {
+    flex-shrink: 0;
+  }
+
+  &.right {
+    flex-shrink: 0;
+  }
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border: none;
+  border-radius: 12px;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: #f3f4f6;
+    color: #374151;
+
+    .dark & {
+      background: #374151;
+      color: #e5e7eb;
+    }
+  }
+
+  &.send {
+    background: #e5e7eb;
+    color: #9ca3af;
+
+    .dark & {
+      background: #374151;
+    }
+
+    &.active {
+      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+      color: white;
+
+      &:hover {
+        transform: scale(1.05);
+        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
+      }
+    }
+
+    &.loading {
+      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+      color: white;
+      cursor: wait;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+  }
+
+  &.stop {
+    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+    color: white;
+    animation: pulse 2s infinite;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+}
+
+.textarea-wrapper {
+  flex: 1;
+  min-width: 0;
+
+  textarea {
+    width: 100%;
+    min-height: 24px;
+    max-height: 160px;
+    padding: 8px 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-family: inherit;
+    font-size: 15px;
+    line-height: 1.5;
+    color: #1f2937;
+    resize: none;
+
+    .dark & {
+      color: #f3f4f6;
+    }
+
+    &::placeholder {
+      color: #9ca3af;
+    }
+  }
+}
+
+.input-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  border-top: 1px solid #f3f4f6;
+  background: #fafbfc;
+
+  .dark & {
+    border-top-color: #2d2d3d;
+    background: #181825;
+  }
+}
+
+.toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.toolbar-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: #6b7280;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: #f3f4f6;
+    color: #374151;
+
+    .dark & {
+      background: #2d2d3d;
+      color: #e5e7eb;
+    }
+  }
+
+  &.active {
+    background: rgba(59, 130, 246, 0.1);
+    border-color: rgba(59, 130, 246, 0.3);
+    color: #3b82f6;
+
+    svg {
+      color: #3b82f6;
+    }
+  }
+}
+
+.toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.char-count {
+  font-size: 12px;
+  color: #9ca3af;
+
+  &.warning {
+    color: #f59e0b;
+  }
+}
+
+.send-hint {
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
+  }
+}
+</style>
diff --git a/src/components/message/CodeBlock.vue b/src/components/message/CodeBlock.vue
index f2d1a4d..d18b812 100644
--- a/src/components/message/CodeBlock.vue
+++ b/src/components/message/CodeBlock.vue
@@ -1,212 +1,232 @@
-<template>
-  <div class="code-block" :class="{ 'is-expanded': isExpanded }">
-    <!-- 代码块头部 -->
-    <div class="code-header">
-      <div class="code-language">
-        <Code :size="14" />
-        <span>{{ language || 'code' }}</span>
-      </div>
-      <div class="code-actions">
-        <button
-            v-if="canExpand"
-            class="action-btn"
-            :title="isExpanded ? '收起' : '展开'"
-            @click="toggleExpand"
-        >
-          <Maximize2 v-if="!isExpanded" :size="14" />
-          <Minimize2 v-else :size="14" />
-        </button>
-        <button
-            class="action-btn"
-            :class="{ copied: isCopied }"
-            title="复制代码"
-            @click="handleCopy"
-        >
-          <Check v-if="isCopied" :size="14" />
-          <Copy v-else :size="14" />
-          <span v-if="isCopied">已复制</span>
-        </button>
-      </div>
-    </div>
-
-    <!-- 代码内容 -->
-    <div class="code-content">
-      <pre><code :class="`language-${language}`">{{ code }}</code></pre>
-    </div>
-
-    <!-- 行号（可选） -->
-    <div v-if="showLineNumbers" class="line-numbers">
-      <span v-for="n in lineCount" :key="n">{{ n }}</span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { Code, Copy, Check, Maximize2, Minimize2 } from '@/components/icons'
-import { copyToClipboard } from '@/utils/helpers'
-
-const props = withDefaults(defineProps<{
-  code: string
-  language?: string
-  showLineNumbers?: boolean
-  maxHeight?: number
-}>(), {
-  language: 'plaintext',
-  showLineNumbers: true,
-  maxHeight: 400,
-})
-
-const emit = defineEmits<{
-  copy: []
-}>()
-
-const isCopied = ref(false)
-const isExpanded = ref(false)
-
-const lineCount = computed(() => {
-  return props.code.split('\n').length
-})
-
-const canExpand = computed(() => {
-  return lineCount.value > 15
-})
-
-async function handleCopy() {
-  const success = await copyToClipboard(props.code)
-  if (success) {
-    isCopied.value = true
-    emit('copy')
-    setTimeout(() => {
-      isCopied.value = false
-    }, 2000)
-  }
-}
-
-function toggleExpand() {
-  isExpanded.value = !isExpanded.value
-}
-</script>
-
-<style lang="scss" scoped>
-.code-block {
-  position: relative;
-  margin: 12px 0;
-  border-radius: 12px;
-  overflow: hidden;
-  background: #1e1e2e;
-  border: 1px solid #2d2d3d;
-
-  &.is-expanded {
-    .code-content {
-      max-height: none;
-    }
-  }
-}
-
-.code-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 16px;
-  background: #181825;
-  border-bottom: 1px solid #2d2d3d;
-}
-
-.code-language {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  font-weight: 500;
-  color: #a6adc8;
-
-  svg {
-    opacity: 0.7;
-  }
-}
-
-.code-actions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 10px;
-  border: none;
-  border-radius: 6px;
-  background: rgba(255, 255, 255, 0.05);
-  color: #a6adc8;
-  font-size: 12px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: #cdd6f4;
-  }
-
-  &.copied {
-    background: rgba(166, 227, 161, 0.2);
-    color: #a6e3a1;
-  }
-}
-
-.code-content {
-  max-height: v-bind('maxHeight + "px"');
-  overflow: auto;
-
-  pre {
-    margin: 0;
-    padding: 16px;
-    overflow-x: auto;
-
-    code {
-      font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', monospace;
-      font-size: 13px;
-      line-height: 1.6;
-      color: #cdd6f4;
-      tab-size: 2;
-    }
-  }
-}
-
-.line-numbers {
-  position: absolute;
-  left: 0;
-  top: 49px;
-  bottom: 0;
-  width: 50px;
-  padding: 16px 0;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  padding-right: 12px;
-  background: rgba(0, 0, 0, 0.2);
-  border-right: 1px solid #2d2d3d;
-  user-select: none;
-  pointer-events: none;
-
-  span {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 12px;
-    line-height: 1.6;
-    color: #585b70;
-  }
-}
-
-:deep(.code-content) {
-  .keyword { color: #cba6f7; }
-  .string { color: #a6e3a1; }
-  .number { color: #fab387; }
-  .comment { color: #6c7086; font-style: italic; }
-  .function { color: #89b4fa; }
-  .operator { color: #89dceb; }
-  .punctuation { color: #9399b2; }
-  .class-name { color: #f9e2af; }
-}
-</style>
\ No newline at end of file
+<template>
+  <div class="code-block" :class="{ 'is-expanded': isExpanded }">
+    <!-- 代码块头部 -->
+    <div class="code-header">
+      <div class="code-language">
+        <Code :size="14" />
+        <span>{{ language || "code" }}</span>
+      </div>
+      <div class="code-actions">
+        <button
+          v-if="canExpand"
+          class="action-btn"
+          :title="isExpanded ? '收起' : '展开'"
+          @click="toggleExpand"
+        >
+          <Maximize2 v-if="!isExpanded" :size="14" />
+          <Minimize2 v-else :size="14" />
+        </button>
+        <button
+          class="action-btn"
+          :class="{ copied: isCopied }"
+          title="复制代码"
+          @click="handleCopy"
+        >
+          <Check v-if="isCopied" :size="14" />
+          <Copy v-else :size="14" />
+          <span v-if="isCopied">已复制</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- 代码内容 -->
+    <div class="code-content">
+      <pre><code :class="`language-${language}`">{{ code }}</code></pre>
+    </div>
+
+    <!-- 行号（可选） -->
+    <div v-if="showLineNumbers" class="line-numbers">
+      <span v-for="n in lineCount" :key="n">{{ n }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { Code, Copy, Check, Maximize2, Minimize2 } from "@/components/icons";
+import { copyToClipboard } from "@/utils/helpers";
+
+const props = withDefaults(
+  defineProps<{
+    code: string;
+    language?: string;
+    showLineNumbers?: boolean;
+    maxHeight?: number;
+  }>(),
+  {
+    language: "plaintext",
+    showLineNumbers: true,
+    maxHeight: 400,
+  },
+);
+
+const emit = defineEmits<{
+  copy: [];
+}>();
+
+const isCopied = ref(false);
+const isExpanded = ref(false);
+
+const lineCount = computed(() => {
+  return props.code.split("\n").length;
+});
+
+const canExpand = computed(() => {
+  return lineCount.value > 15;
+});
+
+async function handleCopy() {
+  const success = await copyToClipboard(props.code);
+  if (success) {
+    isCopied.value = true;
+    emit("copy");
+    setTimeout(() => {
+      isCopied.value = false;
+    }, 2000);
+  }
+}
+
+function toggleExpand() {
+  isExpanded.value = !isExpanded.value;
+}
+</script>
+
+<style lang="scss" scoped>
+.code-block {
+  position: relative;
+  margin: 12px 0;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #1e1e2e;
+  border: 1px solid #2d2d3d;
+
+  &.is-expanded {
+    .code-content {
+      max-height: none;
+    }
+  }
+}
+
+.code-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  background: #181825;
+  border-bottom: 1px solid #2d2d3d;
+}
+
+.code-language {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #a6adc8;
+
+  svg {
+    opacity: 0.7;
+  }
+}
+
+.code-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border: none;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.05);
+  color: #a6adc8;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #cdd6f4;
+  }
+
+  &.copied {
+    background: rgba(166, 227, 161, 0.2);
+    color: #a6e3a1;
+  }
+}
+
+.code-content {
+  max-height: v-bind('maxHeight + "px"');
+  overflow: auto;
+
+  pre {
+    margin: 0;
+    padding: 16px;
+    overflow-x: auto;
+
+    code {
+      font-family: "JetBrains Mono", "Fira Code", "Monaco", monospace;
+      font-size: 13px;
+      line-height: 1.6;
+      color: #cdd6f4;
+      tab-size: 2;
+    }
+  }
+}
+
+.line-numbers {
+  position: absolute;
+  left: 0;
+  top: 49px;
+  bottom: 0;
+  width: 50px;
+  padding: 16px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding-right: 12px;
+  background: rgba(0, 0, 0, 0.2);
+  border-right: 1px solid #2d2d3d;
+  user-select: none;
+  pointer-events: none;
+
+  span {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 12px;
+    line-height: 1.6;
+    color: #585b70;
+  }
+}
+
+:deep(.code-content) {
+  .keyword {
+    color: #cba6f7;
+  }
+  .string {
+    color: #a6e3a1;
+  }
+  .number {
+    color: #fab387;
+  }
+  .comment {
+    color: #6c7086;
+    font-style: italic;
+  }
+  .function {
+    color: #89b4fa;
+  }
+  .operator {
+    color: #89dceb;
+  }
+  .punctuation {
+    color: #9399b2;
+  }
+  .class-name {
+    color: #f9e2af;
+  }
+}
+</style>
diff --git a/src/components/message/MessageActions.vue b/src/components/message/MessageActions.vue
index cb834df..805cd3f 100644
--- a/src/components/message/MessageActions.vue
+++ b/src/components/message/MessageActions.vue
@@ -1,320 +1,320 @@
-<template>
-  <div class="message-actions" :class="{ visible: alwaysVisible || isHovered }">
-    <!-- 复制按钮 -->
-    <button
-      v-if="!isBreak"
-      class="action-btn"
-      :class="{ success: copied }"
-      title="复制内容"
-      @click="handleCopy"
-    >
-      <Check v-if="copied" :size="15" />
-      <Copy v-else :size="15" />
-    </button>
-
-    <!-- 点赞按钮 -->
-    <button
-      v-if="isNew && !isBreak"
-      class="action-btn"
-      :class="{ active: feedback?.liked }"
-      title="有帮助"
-      @click="handleLike"
-    >
-      <ThumbsUp :size="15" />
-    </button>
-
-    <!-- 点踩按钮 -->
-    <button
-      v-if="isNew && !isBreak"
-      class="action-btn"
-      :class="{ active: feedback?.disliked }"
-      title="没帮助"
-      @click="handleDislike"
-    >
-      <ThumbsDown :size="15" />
-    </button>
-
-    <!-- 重新生成（仅AI消息） -->
-    <button
-      v-if="(showRegenerate && isNew) || isBreak"
-      class="action-btn"
-      title="重新生成"
-      @click="handleRegenerate"
-    >
-      <RefreshCw :size="15" />
-    </button>
-
-    <!-- 更多操作 -->
-    <div class="more-menu" v-if="showMore">
-      <button class="action-btn" title="更多" @click="toggleMoreMenu">
-        <MoreHorizontal :size="15" />
-      </button>
-
-      <Transition name="dropdown">
-        <div v-if="showMoreMenu" class="dropdown-menu">
-          <button
-            v-if="isNew && !isBreak"
-            class="dropdown-item"
-            @click="handleEdit"
-          >
-            <Edit3 :size="14" />
-            <span>编辑</span>
-          </button>
-          <button v-if="!isBreak" class="dropdown-item" @click="handleShare">
-            <ExternalLink :size="14" />
-            <span>分享</span>
-          </button>
-          <button class="dropdown-item danger" @click="handleDelete">
-            <Trash2 :size="14" />
-            <span>删除</span>
-          </button>
-        </div>
-      </Transition>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import {
-  Copy,
-  Check,
-  ThumbsUp,
-  ThumbsDown,
-  RefreshCw,
-  MoreHorizontal,
-  Edit3,
-  ExternalLink,
-  Trash2,
-} from "@/components/icons";
-import { copyToClipboard } from "@/utils/helpers";
-import type { MessageFeedback } from "@/types/chat";
-
-const props = withDefaults(
-  defineProps<{
-    content: string;
-    feedback?: MessageFeedback;
-    showRegenerate?: boolean;
-    showMore?: boolean;
-    alwaysVisible?: boolean;
-    isHovered?: boolean;
-    isNew?: boolean;
-    isBreak?: boolean;
-  }>(),
-  {
-    showRegenerate: false,
-    showMore: true,
-    alwaysVisible: false,
-    isHovered: false,
-  },
-);
-
-const emit = defineEmits<{
-  copy: [];
-  like: [];
-  dislike: [];
-  regenerate: [];
-  edit: [];
-  share: [];
-  delete: [];
-}>();
-
-const copied = ref(false);
-const showMoreMenu = ref(false);
-
-async function handleCopy() {
-  const success = await copyToClipboard(props.content);
-  if (success) {
-    copied.value = true;
-    emit("copy");
-    setTimeout(() => {
-      copied.value = false;
-    }, 2000);
-  }
-}
-
-function handleLike() {
-  emit("like");
-}
-
-function handleDislike() {
-  emit("dislike");
-}
-
-function handleRegenerate() {
-  emit("regenerate");
-}
-
-function toggleMoreMenu() {
-  showMoreMenu.value = !showMoreMenu.value;
-}
-
-function handleEdit() {
-  showMoreMenu.value = false;
-  emit("edit");
-}
-
-function handleShare() {
-  showMoreMenu.value = false;
-  emit("share");
-}
-
-function handleDelete() {
-  showMoreMenu.value = false;
-  emit("delete");
-}
-
-// 点击外部关闭菜单
-function handleClickOutside(event: MouseEvent) {
-  const target = event.target as HTMLElement;
-  if (!target.closest(".more-menu")) {
-    showMoreMenu.value = false;
-  }
-}
-
-// 挂载时添加事件监听
-if (typeof window !== "undefined") {
-  document.addEventListener("click", handleClickOutside);
-}
-</script>
-
-<style lang="scss" scoped>
-.message-actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px;
-  border-radius: 10px;
-  background: white;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  opacity: 0;
-  transform: translateY(4px);
-  transition: all 0.2s ease;
-  pointer-events: none;
-
-  .dark & {
-    background: #2d2d3d;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-  }
-
-  &.visible {
-    opacity: 1;
-    transform: translateY(0);
-    pointer-events: auto;
-  }
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: 8px;
-  background: transparent;
-  color: #6b7280;
-  cursor: pointer;
-  transition: all 0.15s ease;
-
-  &:hover {
-    background: #f3f4f6;
-    color: #374151;
-
-    .dark & {
-      background: #374151;
-      color: #e5e7eb;
-    }
-  }
-
-  &.active {
-    color: #3b82f6;
-
-    &:hover {
-      background: rgba(59, 130, 246, 0.1);
-    }
-  }
-
-  &.success {
-    color: #10b981;
-
-    &:hover {
-      background: rgba(16, 185, 129, 0.1);
-    }
-  }
-}
-
-.more-menu {
-  position: relative;
-}
-
-.dropdown-menu {
-  position: absolute;
-  bottom: 100%;
-  right: 0;
-  margin-bottom: 8px;
-  min-width: 140px;
-  padding: 6px;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  z-index: 100;
-
-  .dark & {
-    background: #2d2d3d;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
-  }
-}
-
-.dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 10px 12px;
-  border: none;
-  border-radius: 8px;
-  background: transparent;
-  color: #374151;
-  font-size: 13px;
-  text-align: left;
-  cursor: pointer;
-  transition: all 0.15s ease;
-
-  .dark & {
-    color: #e5e7eb;
-  }
-
-  &:hover {
-    background: #f3f4f6;
-
-    .dark & {
-      background: #374151;
-    }
-  }
-
-  &.danger {
-    color: #ef4444;
-
-    &:hover {
-      background: rgba(239, 68, 68, 0.1);
-    }
-  }
-
-  svg {
-    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) scale(0.95);
-}
-</style>
+<template>
+  <div class="message-actions" :class="{ visible: alwaysVisible || isHovered }">
+    <!-- 复制按钮 -->
+    <button
+      v-if="!isBreak"
+      class="action-btn"
+      :class="{ success: copied }"
+      title="复制内容"
+      @click="handleCopy"
+    >
+      <Check v-if="copied" :size="15" />
+      <Copy v-else :size="15" />
+    </button>
+
+    <!-- 点赞按钮 -->
+    <button
+      v-if="isNew && !isBreak"
+      class="action-btn"
+      :class="{ active: feedback?.liked }"
+      title="有帮助"
+      @click="handleLike"
+    >
+      <ThumbsUp :size="15" />
+    </button>
+
+    <!-- 点踩按钮 -->
+    <button
+      v-if="isNew && !isBreak"
+      class="action-btn"
+      :class="{ active: feedback?.disliked }"
+      title="没帮助"
+      @click="handleDislike"
+    >
+      <ThumbsDown :size="15" />
+    </button>
+
+    <!-- 重新生成（仅AI消息） -->
+    <button
+      v-if="(showRegenerate && isNew) || isBreak"
+      class="action-btn"
+      title="重新生成"
+      @click="handleRegenerate"
+    >
+      <RefreshCw :size="15" />
+    </button>
+
+    <!-- 更多操作 -->
+    <div class="more-menu" v-if="showMore">
+      <button class="action-btn" title="更多" @click="toggleMoreMenu">
+        <MoreHorizontal :size="15" />
+      </button>
+
+      <Transition name="dropdown">
+        <div v-if="showMoreMenu" class="dropdown-menu">
+          <button
+            v-if="isNew && !isBreak"
+            class="dropdown-item"
+            @click="handleEdit"
+          >
+            <Edit3 :size="14" />
+            <span>编辑</span>
+          </button>
+          <button v-if="!isBreak" class="dropdown-item" @click="handleShare">
+            <ExternalLink :size="14" />
+            <span>分享</span>
+          </button>
+          <button class="dropdown-item danger" @click="handleDelete">
+            <Trash2 :size="14" />
+            <span>删除</span>
+          </button>
+        </div>
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import {
+  Copy,
+  Check,
+  ThumbsUp,
+  ThumbsDown,
+  RefreshCw,
+  MoreHorizontal,
+  Edit3,
+  ExternalLink,
+  Trash2,
+} from "@/components/icons";
+import { copyToClipboard } from "@/utils/helpers";
+import type { MessageFeedback } from "@/types/chat";
+
+const props = withDefaults(
+  defineProps<{
+    content: string;
+    feedback?: MessageFeedback;
+    showRegenerate?: boolean;
+    showMore?: boolean;
+    alwaysVisible?: boolean;
+    isHovered?: boolean;
+    isNew?: boolean;
+    isBreak?: boolean;
+  }>(),
+  {
+    showRegenerate: false,
+    showMore: true,
+    alwaysVisible: false,
+    isHovered: false,
+  },
+);
+
+const emit = defineEmits<{
+  copy: [];
+  like: [];
+  dislike: [];
+  regenerate: [];
+  edit: [];
+  share: [];
+  delete: [];
+}>();
+
+const copied = ref(false);
+const showMoreMenu = ref(false);
+
+async function handleCopy() {
+  const success = await copyToClipboard(props.content);
+  if (success) {
+    copied.value = true;
+    emit("copy");
+    setTimeout(() => {
+      copied.value = false;
+    }, 2000);
+  }
+}
+
+function handleLike() {
+  emit("like");
+}
+
+function handleDislike() {
+  emit("dislike");
+}
+
+function handleRegenerate() {
+  emit("regenerate");
+}
+
+function toggleMoreMenu() {
+  showMoreMenu.value = !showMoreMenu.value;
+}
+
+function handleEdit() {
+  showMoreMenu.value = false;
+  emit("edit");
+}
+
+function handleShare() {
+  showMoreMenu.value = false;
+  emit("share");
+}
+
+function handleDelete() {
+  showMoreMenu.value = false;
+  emit("delete");
+}
+
+// 点击外部关闭菜单
+function handleClickOutside(event: MouseEvent) {
+  const target = event.target as HTMLElement;
+  if (!target.closest(".more-menu")) {
+    showMoreMenu.value = false;
+  }
+}
+
+// 挂载时添加事件监听
+if (typeof window !== "undefined") {
+  document.addEventListener("click", handleClickOutside);
+}
+</script>
+
+<style lang="scss" scoped>
+.message-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 10px;
+  background: white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  opacity: 0;
+  transform: translateY(4px);
+  transition: all 0.2s ease;
+  pointer-events: none;
+
+  .dark & {
+    background: #2d2d3d;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  }
+
+  &.visible {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: #f3f4f6;
+    color: #374151;
+
+    .dark & {
+      background: #374151;
+      color: #e5e7eb;
+    }
+  }
+
+  &.active {
+    color: #3b82f6;
+
+    &:hover {
+      background: rgba(59, 130, 246, 0.1);
+    }
+  }
+
+  &.success {
+    color: #10b981;
+
+    &:hover {
+      background: rgba(16, 185, 129, 0.1);
+    }
+  }
+}
+
+.more-menu {
+  position: relative;
+}
+
+.dropdown-menu {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 8px;
+  min-width: 140px;
+  padding: 6px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  z-index: 100;
+
+  .dark & {
+    background: #2d2d3d;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+  }
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: #374151;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  .dark & {
+    color: #e5e7eb;
+  }
+
+  &:hover {
+    background: #f3f4f6;
+
+    .dark & {
+      background: #374151;
+    }
+  }
+
+  &.danger {
+    color: #ef4444;
+
+    &:hover {
+      background: rgba(239, 68, 68, 0.1);
+    }
+  }
+
+  svg {
+    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) scale(0.95);
+}
+</style>
diff --git a/src/components/message/MessageBubble.vue b/src/components/message/MessageBubble.vue
index 1d35763..7f02222 100644
--- a/src/components/message/MessageBubble.vue
+++ b/src/components/message/MessageBubble.vue
@@ -1,838 +1,838 @@
-<template>
-  <div
-    class="message-bubble"
-    :class="[
-      `role-${message.role}`,
-      {
-        'is-streaming': message.isStreaming,
-        'is-end': !message.isEnd && message.role !== 'user',
-        'is-error': message.isError,
-        compact: compact,
-      },
-    ]"
-    @mouseenter="isHovered = true"
-    @mouseleave="isHovered = false"
-  >
-    <!-- 头像 -->
-    <div class="avatar">
-      <div class="avatar-inner" :class="message.role">
-        <Bot v-if="message.role === 'assistant'" :size="20" />
-        <User v-else :size="20" />
-      </div>
-    </div>
-
-    <!-- 消息内容区域 -->
-    <div class="message-content-wrapper">
-      <!-- 角色名称 -->
-      <div class="message-header">
-        <span class="role-name">
-          {{ message.role === "assistant" ? "AI 助手" : "你" }}
-        </span>
-        <span v-if="showTimestamp" class="timestamp">
-          {{ formattedTime }}
-        </span>
-      </div>
-
-      <!-- 消息主体 -->
-      <div class="message-body">
-        <!-- 错误状态 -->
-        <div v-if="message.isError" class="error-content">
-          <AlertCircle :size="18" />
-          <span>{{ message.errorMessage || "消息发送失败" }}</span>
-          <button class="retry-btn" @click="$emit('retry')">
-            <RefreshCw :size="14" />
-            重试
-          </button>
-        </div>
-
-        <!-- 正常内容 -->
-        <template v-else>
-          <!-- 文本内容 - 使用 markstream-vue -->
-          <div v-if="message.content.text" class="text-content markstream-vue">
-            <MarkdownRender
-              v-if="message.role !== 'user'"
-              :content="message.content.text"
-              :custom-html-tags="['think']"
-              custom-id="playground-demo"
-              :escape-html-tags="['question', 'answer']"
-              @copy="textCopy"
-            />
-            <div v-else style="white-space: pre-wrap">
-              {{ message.content.text }}
-            </div>
-          </div>
-
-          <!-- 推荐选项 -->
-          <div
-            v-if="message.content.suggestions?.length && isNew"
-            class="suggestions"
-          >
-            <button
-              v-for="suggestion in message.content.suggestions"
-              :key="suggestion.id"
-              class="suggestion-btn"
-              @click="$emit('select-suggestion', suggestion)"
-            >
-              <Zap :size="14" />
-              {{ suggestion.text }}
-            </button>
-          </div>
-
-          <!-- 图片展示 -->
-          <div v-if="message.content.images?.length" class="images-grid">
-            <div
-              v-for="(image, index) in message.content.images"
-              :key="image.id"
-              class="image-item"
-              @click="$emit('preview-image', image, index)"
-            >
-              <img :src="image.url" :alt="image.name" loading="lazy" />
-              <div class="image-overlay">
-                <Maximize2 :size="18" />
-              </div>
-            </div>
-          </div>
-
-          <!-- 单个视频 -->
-          <div v-if="message.content.videos?.length === 1" class="single-video">
-            <video
-              :src="message.content.videos[0].url"
-              :poster="message.content.videos[0].poster"
-              controls
-              preload="metadata"
-            />
-          </div>
-
-          <!-- 多个视频 -->
-          <div
-            v-if="message.content.videos && message.content.videos.length > 1"
-            class="videos-grid"
-          >
-            <div
-              v-for="video in message.content.videos"
-              :key="video.id"
-              class="video-item"
-              @click="$emit('play-video', video)"
-            >
-              <img :src="video.poster" :alt="video.title" />
-              <div class="video-overlay">
-                <Play :size="32" />
-              </div>
-              <span v-if="video.duration" class="video-duration">
-                {{ formatDuration(video.duration) }}
-              </span>
-            </div>
-          </div>
-
-          <!-- 附件列表 -->
-          <div v-if="message.content.files?.length" class="files-list">
-            <div
-              v-for="file in message.content.files"
-              :key="file.id"
-              class="file-item"
-            >
-              <div class="file-icon">
-                {{ getFileEmoji(file.mimeType) }}
-              </div>
-              <div class="file-info">
-                <span class="file-name">{{ file.name }}</span>
-                <span class="file-size">{{ formatSize(file.size) }}</span>
-              </div>
-              <button
-                class="download-btn"
-                @click="$emit('download-file', file)"
-              >
-                <Download :size="16" />
-              </button>
-            </div>
-          </div>
-        </template>
-
-        <!-- 加载动画 -->
-        <div
-          v-if="message.isStreaming && !message.content.text"
-          class="loading-dots"
-        >
-          <span></span>
-          <span></span>
-          <span></span>
-        </div>
-      </div>
-
-      <!-- 操作栏 -->
-      <MessageActions
-        v-if="
-          message.role === 'assistant' &&
-          !message.isStreaming &&
-          !message.isError
-        "
-        :content="message.content.text || ''"
-        :feedback="message.feedback"
-        :show-regenerate="true"
-        :is-hovered="isHovered"
-        :is-new="isNew"
-        :is-break="message.isBreak"
-        @copy="handleCopy"
-        @like="handleLike"
-        @dislike="handleDislike"
-        @regenerate="$emit('regenerate')"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useClipboard } from "@vueuse/core";
-import { ref, computed } from "vue";
-// 正确导入 markstream-vue
-import MarkdownRender from "markstream-vue";
-import { setCustomComponents } from "markstream-vue";
-import {
-  Bot,
-  User,
-  AlertCircle,
-  RefreshCw,
-  Zap,
-  Maximize2,
-  Play,
-  Download,
-} from "@/components/icons";
-import MessageActions from "./MessageActions.vue";
-import { formatTimestamp, formatFileSize, getFileIcon } from "@/utils/helpers";
-import type { Message, Suggestion, Attachment, VideoInfo } from "@/types/chat";
-import ThinkingNode from "./components/ThinkingNode.vue";
-import EChartsContainerNode from "./components/EChartsContainerNode.vue";
-
-const props = withDefaults(
-  defineProps<{
-    message: Message;
-    showTimestamp?: boolean;
-    compact?: boolean;
-    isNew?: boolean;
-  }>(),
-  {
-    showTimestamp: true,
-    compact: false,
-  },
-);
-const { copy } = useClipboard({ legacy: true });
-const emit = defineEmits<{
-  retry: [];
-  regenerate: [];
-  copy: [];
-  like: [];
-  dislike: [];
-  "select-suggestion": [suggestion: Suggestion];
-  "preview-image": [image: Attachment, index: number];
-  "play-video": [video: VideoInfo];
-  "download-file": [file: Attachment];
-}>();
-
-const isHovered = ref(false);
-
-const formattedTime = computed(() => {
-  return formatTimestamp(props.message.timestamp);
-});
-
-function getFileEmoji(mimeType?: string) {
-  return getFileIcon(mimeType || "");
-}
-
-function formatSize(size?: number) {
-  return size ? formatFileSize(size) : "";
-}
-
-function formatDuration(seconds: number) {
-  const mins = Math.floor(seconds / 60);
-  const secs = Math.floor(seconds % 60);
-  return `${mins}:${secs.toString().padStart(2, "0")}`;
-}
-
-function textCopy(data: any) {
-  if (typeof data === "string") {
-    copy(data);
-  }
-}
-
-function handleCopy() {
-  emit("copy");
-}
-
-function handleLike() {
-  emit("like");
-}
-
-function handleDislike() {
-  emit("dislike");
-}
-
-setCustomComponents("playground-demo", {
-  think: ThinkingNode,
-  vmr_container: EChartsContainerNode,
-});
-</script>
-
-<style lang="scss" scoped>
-.message-bubble {
-  display: flex;
-  gap: 16px;
-  padding: 20px 24px;
-  animation: fadeIn 0.3s ease;
-
-  &.role-user {
-    flex-direction: row-reverse;
-
-    .message-content-wrapper {
-      align-items: flex-end;
-    }
-
-    .message-header {
-      flex-direction: row-reverse;
-    }
-
-    .message-body {
-      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-      color: white;
-      border-radius: 20px 20px 4px 20px;
-    }
-
-    .text-content {
-      :deep(a) {
-        color: #bfdbfe;
-      }
-
-      :deep(code) {
-        background: rgba(255, 255, 255, 0.15);
-        color: white;
-      }
-    }
-  }
-
-  &.role-assistant {
-    .message-body {
-      background: #f8fafc;
-      border-radius: 20px 20px 20px 4px;
-
-      .dark & {
-        background: #2d2d3d;
-      }
-    }
-  }
-
-  &.compact {
-    padding: 12px 20px;
-
-    .avatar {
-      width: 32px;
-      height: 32px;
-
-      svg {
-        width: 16px;
-        height: 16px;
-      }
-    }
-  }
-
-  // &.is-streaming {
-  //   .message-body {
-  //     position: relative;
-
-  //     &::after {
-  //       content: "";
-  //       position: absolute;
-  //       bottom: 12px;
-  //       right: 12px;
-  //       width: 8px;
-  //       height: 8px;
-  //       background: #3b82f6;
-  //       border-radius: 50%;
-  //       animation: pulse 1.5s infinite;
-  //     }
-  //   }
-  // }
-
-  &.is-end {
-    .message-body {
-      position: relative;
-
-      &::after {
-        content: "";
-        position: absolute;
-        bottom: 12px;
-        right: 12px;
-        width: 8px;
-        height: 8px;
-        background: #3b82f6;
-        border-radius: 50%;
-        animation: pulse 1.5s infinite;
-      }
-    }
-  }
-}
-
-.avatar {
-  flex-shrink: 0;
-}
-
-.avatar-inner {
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 12px;
-
-  &.assistant {
-    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
-    color: white;
-  }
-
-  &.user {
-    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-    color: white;
-  }
-}
-
-.message-content-wrapper {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  max-width: 75%;
-  min-width: 0;
-}
-
-.message-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.role-name {
-  font-size: 14px;
-  font-weight: 600;
-  color: #1f2937;
-
-  .dark & {
-    color: #f3f4f6;
-  }
-}
-
-.timestamp {
-  font-size: 12px;
-  color: #9ca3af;
-}
-
-.message-body {
-  padding: 16px 20px;
-  color: #1f2937;
-  line-height: 1.7;
-
-  .dark & {
-    color: #e5e7eb;
-  }
-}
-
-// markstream-vue 样式覆盖
-.text-content {
-  :deep(p) {
-    margin: 0 0 12px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  :deep(ul),
-  :deep(ol) {
-    margin: 12px 0;
-    padding-left: 24px;
-  }
-
-  :deep(code:not(pre code)) {
-    padding: 2px 6px;
-    border-radius: 4px;
-    background: rgba(0, 0, 0, 0.06);
-    font-family: "JetBrains Mono", monospace;
-    font-size: 0.9em;
-
-    .dark & {
-      background: rgba(255, 255, 255, 0.1);
-    }
-  }
-
-  :deep(pre) {
-    margin: 16px 0;
-    border-radius: 12px;
-    overflow: hidden;
-  }
-
-  :deep(a) {
-    color: #3b82f6;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  :deep(table) {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 16px 0;
-
-    th,
-    td {
-      border: 1px solid #e2e8f0;
-      padding: 8px 12px;
-      text-align: left;
-    }
-
-    th {
-      background: #f8fafc;
-      font-weight: 600;
-    }
-
-    .dark & {
-      th,
-      td {
-        border-color: #374151;
-      }
-
-      th {
-        background: #1e1e2e;
-      }
-    }
-  }
-
-  :deep(blockquote) {
-    margin: 16px 0;
-    padding: 12px 20px;
-    border-left: 4px solid #3b82f6;
-    background: rgba(59, 130, 246, 0.05);
-    border-radius: 0 8px 8px 0;
-
-    p {
-      margin: 0;
-    }
-  }
-
-  :deep(h1),
-  :deep(h2),
-  :deep(h3),
-  :deep(h4) {
-    margin: 20px 0 12px;
-    font-weight: 600;
-    line-height: 1.4;
-
-    &:first-child {
-      margin-top: 0;
-    }
-  }
-
-  :deep(h1) {
-    font-size: 1.5em;
-  }
-  :deep(h2) {
-    font-size: 1.3em;
-  }
-  :deep(h3) {
-    font-size: 1.15em;
-  }
-  :deep(h4) {
-    font-size: 1em;
-  }
-}
-
-.error-content {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 16px;
-  background: rgba(239, 68, 68, 0.1);
-  border-radius: 10px;
-  color: #ef4444;
-  font-size: 14px;
-
-  .retry-btn {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    margin-left: auto;
-    padding: 6px 12px;
-    border: none;
-    border-radius: 6px;
-    background: #ef4444;
-    color: white;
-    font-size: 13px;
-    cursor: pointer;
-    transition: background 0.2s ease;
-
-    &:hover {
-      background: #dc2626;
-    }
-  }
-}
-
-.suggestions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 16px;
-}
-
-.suggestion-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
-  border: 1px solid #e2e8f0;
-  border-radius: 20px;
-  background: white;
-  color: #374151;
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  .dark & {
-    background: #1e1e2e;
-    border-color: #374151;
-    color: #e5e7eb;
-  }
-
-  &:hover {
-    border-color: #3b82f6;
-    color: #3b82f6;
-    background: rgba(59, 130, 246, 0.05);
-  }
-
-  svg {
-    color: #f59e0b;
-  }
-}
-
-.images-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  gap: 8px;
-  margin-top: 12px;
-}
-
-.image-item {
-  position: relative;
-  aspect-ratio: 1;
-  border-radius: 12px;
-  overflow: hidden;
-  cursor: pointer;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: transform 0.3s ease;
-  }
-
-  .image-overlay {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(0, 0, 0, 0.4);
-    color: white;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-  }
-
-  &:hover {
-    img {
-      transform: scale(1.05);
-    }
-
-    .image-overlay {
-      opacity: 1;
-    }
-  }
-}
-
-.single-video {
-  margin-top: 12px;
-
-  video {
-    width: 100%;
-    max-width: 480px;
-    border-radius: 12px;
-  }
-}
-
-.videos-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 12px;
-  margin-top: 12px;
-}
-
-.video-item {
-  position: relative;
-  aspect-ratio: 16/9;
-  border-radius: 12px;
-  overflow: hidden;
-  cursor: pointer;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .video-overlay {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(0, 0, 0, 0.3);
-    color: white;
-    transition: background 0.2s ease;
-  }
-
-  .video-duration {
-    position: absolute;
-    bottom: 8px;
-    right: 8px;
-    padding: 2px 8px;
-    background: rgba(0, 0, 0, 0.7);
-    border-radius: 4px;
-    color: white;
-    font-size: 12px;
-  }
-
-  &:hover .video-overlay {
-    background: rgba(0, 0, 0, 0.5);
-  }
-}
-
-.files-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 12px;
-}
-
-.file-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  background: rgba(0, 0, 0, 0.03);
-  border-radius: 10px;
-
-  .dark & {
-    background: rgba(255, 255, 255, 0.05);
-  }
-}
-
-.file-icon {
-  font-size: 24px;
-}
-
-.file-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.file-name {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  color: #1f2937;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  .dark & {
-    color: #f3f4f6;
-  }
-}
-
-.file-size {
-  font-size: 12px;
-  color: #9ca3af;
-}
-
-.download-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border: none;
-  border-radius: 8px;
-  background: rgba(59, 130, 246, 0.1);
-  color: #3b82f6;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background: #3b82f6;
-    color: white;
-  }
-}
-
-.loading-dots {
-  display: flex;
-  gap: 6px;
-  padding: 8px 0;
-
-  span {
-    width: 8px;
-    height: 8px;
-    background: #9ca3af;
-    border-radius: 50%;
-    animation: pulseDot 1.4s infinite ease-in-out both;
-
-    &:nth-child(1) {
-      animation-delay: -0.32s;
-    }
-    &:nth-child(2) {
-      animation-delay: -0.16s;
-    }
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.5;
-    transform: scale(0.8);
-  }
-}
-
-@keyframes pulseDot {
-  0%,
-  80%,
-  100% {
-    transform: scale(0.6);
-    opacity: 0.5;
-  }
-  40% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-</style>
+<template>
+  <div
+    class="message-bubble"
+    :class="[
+      `role-${message.role}`,
+      {
+        'is-streaming': message.isStreaming,
+        'is-end': !message.isEnd && message.role !== 'user',
+        'is-error': message.isError,
+        compact: compact,
+      },
+    ]"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
+  >
+    <!-- 头像 -->
+    <div class="avatar">
+      <div class="avatar-inner" :class="message.role">
+        <Bot v-if="message.role === 'assistant'" :size="20" />
+        <User v-else :size="20" />
+      </div>
+    </div>
+
+    <!-- 消息内容区域 -->
+    <div class="message-content-wrapper">
+      <!-- 角色名称 -->
+      <div class="message-header">
+        <span class="role-name">
+          {{ message.role === "assistant" ? "AI 助手" : "你" }}
+        </span>
+        <span v-if="showTimestamp" class="timestamp">
+          {{ formattedTime }}
+        </span>
+      </div>
+
+      <!-- 消息主体 -->
+      <div class="message-body">
+        <!-- 错误状态 -->
+        <div v-if="message.isError" class="error-content">
+          <AlertCircle :size="18" />
+          <span>{{ message.errorMessage || "消息发送失败" }}</span>
+          <button class="retry-btn" @click="$emit('retry')">
+            <RefreshCw :size="14" />
+            重试
+          </button>
+        </div>
+
+        <!-- 正常内容 -->
+        <template v-else>
+          <!-- 文本内容 - 使用 markstream-vue -->
+          <div v-if="message.content.text" class="text-content markstream-vue">
+            <MarkdownRender
+              v-if="message.role !== 'user'"
+              :content="message.content.text"
+              :custom-html-tags="['think']"
+              custom-id="playground-demo"
+              :escape-html-tags="['question', 'answer']"
+              @copy="textCopy"
+            />
+            <div v-else style="white-space: pre-wrap">
+              {{ message.content.text }}
+            </div>
+          </div>
+
+          <!-- 推荐选项 -->
+          <div
+            v-if="message.content.suggestions?.length && isNew"
+            class="suggestions"
+          >
+            <button
+              v-for="suggestion in message.content.suggestions"
+              :key="suggestion.id"
+              class="suggestion-btn"
+              @click="$emit('select-suggestion', suggestion)"
+            >
+              <Zap :size="14" />
+              {{ suggestion.text }}
+            </button>
+          </div>
+
+          <!-- 图片展示 -->
+          <div v-if="message.content.images?.length" class="images-grid">
+            <div
+              v-for="(image, index) in message.content.images"
+              :key="image.id"
+              class="image-item"
+              @click="$emit('preview-image', image, index)"
+            >
+              <img :src="image.url" :alt="image.name" loading="lazy" />
+              <div class="image-overlay">
+                <Maximize2 :size="18" />
+              </div>
+            </div>
+          </div>
+
+          <!-- 单个视频 -->
+          <div v-if="message.content.videos?.length === 1" class="single-video">
+            <video
+              :src="message.content.videos[0].url"
+              :poster="message.content.videos[0].poster"
+              controls
+              preload="metadata"
+            />
+          </div>
+
+          <!-- 多个视频 -->
+          <div
+            v-if="message.content.videos && message.content.videos.length > 1"
+            class="videos-grid"
+          >
+            <div
+              v-for="video in message.content.videos"
+              :key="video.id"
+              class="video-item"
+              @click="$emit('play-video', video)"
+            >
+              <img :src="video.poster" :alt="video.title" />
+              <div class="video-overlay">
+                <Play :size="32" />
+              </div>
+              <span v-if="video.duration" class="video-duration">
+                {{ formatDuration(video.duration) }}
+              </span>
+            </div>
+          </div>
+
+          <!-- 附件列表 -->
+          <div v-if="message.content.files?.length" class="files-list">
+            <div
+              v-for="file in message.content.files"
+              :key="file.id"
+              class="file-item"
+            >
+              <div class="file-icon">
+                {{ getFileEmoji(file.mimeType) }}
+              </div>
+              <div class="file-info">
+                <span class="file-name">{{ file.name }}</span>
+                <span class="file-size">{{ formatSize(file.size) }}</span>
+              </div>
+              <button
+                class="download-btn"
+                @click="$emit('download-file', file)"
+              >
+                <Download :size="16" />
+              </button>
+            </div>
+          </div>
+        </template>
+
+        <!-- 加载动画 -->
+        <div
+          v-if="message.isStreaming && !message.content.text"
+          class="loading-dots"
+        >
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
+
+      <!-- 操作栏 -->
+      <MessageActions
+        v-if="
+          message.role === 'assistant' &&
+          !message.isStreaming &&
+          !message.isError
+        "
+        :content="message.content.text || ''"
+        :feedback="message.feedback"
+        :show-regenerate="true"
+        :is-hovered="isHovered"
+        :is-new="isNew"
+        :is-break="message.isBreak"
+        @copy="handleCopy"
+        @like="handleLike"
+        @dislike="handleDislike"
+        @regenerate="$emit('regenerate')"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useClipboard } from "@vueuse/core";
+import { ref, computed } from "vue";
+// 正确导入 markstream-vue
+import MarkdownRender from "markstream-vue";
+import { setCustomComponents } from "markstream-vue";
+import {
+  Bot,
+  User,
+  AlertCircle,
+  RefreshCw,
+  Zap,
+  Maximize2,
+  Play,
+  Download,
+} from "@/components/icons";
+import MessageActions from "./MessageActions.vue";
+import { formatTimestamp, formatFileSize, getFileIcon } from "@/utils/helpers";
+import type { Message, Suggestion, Attachment, VideoInfo } from "@/types/chat";
+import ThinkingNode from "./components/ThinkingNode.vue";
+import EChartsContainerNode from "./components/EChartsContainerNode.vue";
+
+const props = withDefaults(
+  defineProps<{
+    message: Message;
+    showTimestamp?: boolean;
+    compact?: boolean;
+    isNew?: boolean;
+  }>(),
+  {
+    showTimestamp: true,
+    compact: false,
+  },
+);
+const { copy } = useClipboard({ legacy: true });
+const emit = defineEmits<{
+  retry: [];
+  regenerate: [];
+  copy: [];
+  like: [];
+  dislike: [];
+  "select-suggestion": [suggestion: Suggestion];
+  "preview-image": [image: Attachment, index: number];
+  "play-video": [video: VideoInfo];
+  "download-file": [file: Attachment];
+}>();
+
+const isHovered = ref(false);
+
+const formattedTime = computed(() => {
+  return formatTimestamp(props.message.timestamp);
+});
+
+function getFileEmoji(mimeType?: string) {
+  return getFileIcon(mimeType || "");
+}
+
+function formatSize(size?: number) {
+  return size ? formatFileSize(size) : "";
+}
+
+function formatDuration(seconds: number) {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+
+function textCopy(data: any) {
+  if (typeof data === "string") {
+    copy(data);
+  }
+}
+
+function handleCopy() {
+  emit("copy");
+}
+
+function handleLike() {
+  emit("like");
+}
+
+function handleDislike() {
+  emit("dislike");
+}
+
+setCustomComponents("playground-demo", {
+  think: ThinkingNode,
+  vmr_container: EChartsContainerNode,
+});
+</script>
+
+<style lang="scss" scoped>
+.message-bubble {
+  display: flex;
+  gap: 16px;
+  padding: 20px 24px;
+  animation: fadeIn 0.3s ease;
+
+  &.role-user {
+    flex-direction: row-reverse;
+
+    .message-content-wrapper {
+      align-items: flex-end;
+    }
+
+    .message-header {
+      flex-direction: row-reverse;
+    }
+
+    .message-body {
+      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+      color: white;
+      border-radius: 20px 20px 4px 20px;
+    }
+
+    .text-content {
+      :deep(a) {
+        color: #bfdbfe;
+      }
+
+      :deep(code) {
+        background: rgba(255, 255, 255, 0.15);
+        color: white;
+      }
+    }
+  }
+
+  &.role-assistant {
+    .message-body {
+      background: #f8fafc;
+      border-radius: 20px 20px 20px 4px;
+
+      .dark & {
+        background: #2d2d3d;
+      }
+    }
+  }
+
+  &.compact {
+    padding: 12px 20px;
+
+    .avatar {
+      width: 32px;
+      height: 32px;
+
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+
+  // &.is-streaming {
+  //   .message-body {
+  //     position: relative;
+
+  //     &::after {
+  //       content: "";
+  //       position: absolute;
+  //       bottom: 12px;
+  //       right: 12px;
+  //       width: 8px;
+  //       height: 8px;
+  //       background: #3b82f6;
+  //       border-radius: 50%;
+  //       animation: pulse 1.5s infinite;
+  //     }
+  //   }
+  // }
+
+  &.is-end {
+    .message-body {
+      position: relative;
+
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: 12px;
+        right: 12px;
+        width: 8px;
+        height: 8px;
+        background: #3b82f6;
+        border-radius: 50%;
+        animation: pulse 1.5s infinite;
+      }
+    }
+  }
+}
+
+.avatar {
+  flex-shrink: 0;
+}
+
+.avatar-inner {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+
+  &.assistant {
+    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
+    color: white;
+  }
+
+  &.user {
+    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+    color: white;
+  }
+}
+
+.message-content-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 75%;
+  min-width: 0;
+}
+
+.message-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.role-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1f2937;
+
+  .dark & {
+    color: #f3f4f6;
+  }
+}
+
+.timestamp {
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+.message-body {
+  padding: 16px 20px;
+  color: #1f2937;
+  line-height: 1.7;
+
+  .dark & {
+    color: #e5e7eb;
+  }
+}
+
+// markstream-vue 样式覆盖
+.text-content {
+  :deep(p) {
+    margin: 0 0 12px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  :deep(ul),
+  :deep(ol) {
+    margin: 12px 0;
+    padding-left: 24px;
+  }
+
+  :deep(code:not(pre code)) {
+    padding: 2px 6px;
+    border-radius: 4px;
+    background: rgba(0, 0, 0, 0.06);
+    font-family: "JetBrains Mono", monospace;
+    font-size: 0.9em;
+
+    .dark & {
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  :deep(pre) {
+    margin: 16px 0;
+    border-radius: 12px;
+    overflow: hidden;
+  }
+
+  :deep(a) {
+    color: #3b82f6;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  :deep(table) {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 16px 0;
+
+    th,
+    td {
+      border: 1px solid #e2e8f0;
+      padding: 8px 12px;
+      text-align: left;
+    }
+
+    th {
+      background: #f8fafc;
+      font-weight: 600;
+    }
+
+    .dark & {
+      th,
+      td {
+        border-color: #374151;
+      }
+
+      th {
+        background: #1e1e2e;
+      }
+    }
+  }
+
+  :deep(blockquote) {
+    margin: 16px 0;
+    padding: 12px 20px;
+    border-left: 4px solid #3b82f6;
+    background: rgba(59, 130, 246, 0.05);
+    border-radius: 0 8px 8px 0;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  :deep(h1),
+  :deep(h2),
+  :deep(h3),
+  :deep(h4) {
+    margin: 20px 0 12px;
+    font-weight: 600;
+    line-height: 1.4;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  :deep(h1) {
+    font-size: 1.5em;
+  }
+  :deep(h2) {
+    font-size: 1.3em;
+  }
+  :deep(h3) {
+    font-size: 1.15em;
+  }
+  :deep(h4) {
+    font-size: 1em;
+  }
+}
+
+.error-content {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  background: rgba(239, 68, 68, 0.1);
+  border-radius: 10px;
+  color: #ef4444;
+  font-size: 14px;
+
+  .retry-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: auto;
+    padding: 6px 12px;
+    border: none;
+    border-radius: 6px;
+    background: #ef4444;
+    color: white;
+    font-size: 13px;
+    cursor: pointer;
+    transition: background 0.2s ease;
+
+    &:hover {
+      background: #dc2626;
+    }
+  }
+}
+
+.suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.suggestion-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border: 1px solid #e2e8f0;
+  border-radius: 20px;
+  background: white;
+  color: #374151;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  .dark & {
+    background: #1e1e2e;
+    border-color: #374151;
+    color: #e5e7eb;
+  }
+
+  &:hover {
+    border-color: #3b82f6;
+    color: #3b82f6;
+    background: rgba(59, 130, 246, 0.05);
+  }
+
+  svg {
+    color: #f59e0b;
+  }
+}
+
+.images-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.image-item {
+  position: relative;
+  aspect-ratio: 1;
+  border-radius: 12px;
+  overflow: hidden;
+  cursor: pointer;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+  }
+
+  .image-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.4);
+    color: white;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  &:hover {
+    img {
+      transform: scale(1.05);
+    }
+
+    .image-overlay {
+      opacity: 1;
+    }
+  }
+}
+
+.single-video {
+  margin-top: 12px;
+
+  video {
+    width: 100%;
+    max-width: 480px;
+    border-radius: 12px;
+  }
+}
+
+.videos-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.video-item {
+  position: relative;
+  aspect-ratio: 16/9;
+  border-radius: 12px;
+  overflow: hidden;
+  cursor: pointer;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .video-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.3);
+    color: white;
+    transition: background 0.2s ease;
+  }
+
+  .video-duration {
+    position: absolute;
+    bottom: 8px;
+    right: 8px;
+    padding: 2px 8px;
+    background: rgba(0, 0, 0, 0.7);
+    border-radius: 4px;
+    color: white;
+    font-size: 12px;
+  }
+
+  &:hover .video-overlay {
+    background: rgba(0, 0, 0, 0.5);
+  }
+}
+
+.files-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: rgba(0, 0, 0, 0.03);
+  border-radius: 10px;
+
+  .dark & {
+    background: rgba(255, 255, 255, 0.05);
+  }
+}
+
+.file-icon {
+  font-size: 24px;
+}
+
+.file-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.file-name {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: #1f2937;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .dark & {
+    color: #f3f4f6;
+  }
+}
+
+.file-size {
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+.download-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: 8px;
+  background: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: #3b82f6;
+    color: white;
+  }
+}
+
+.loading-dots {
+  display: flex;
+  gap: 6px;
+  padding: 8px 0;
+
+  span {
+    width: 8px;
+    height: 8px;
+    background: #9ca3af;
+    border-radius: 50%;
+    animation: pulseDot 1.4s infinite ease-in-out both;
+
+    &:nth-child(1) {
+      animation-delay: -0.32s;
+    }
+    &:nth-child(2) {
+      animation-delay: -0.16s;
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.5;
+    transform: scale(0.8);
+  }
+}
+
+@keyframes pulseDot {
+  0%,
+  80%,
+  100% {
+    transform: scale(0.6);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+</style>
diff --git a/src/components/message/components/EChartsContainerNode.vue b/src/components/message/components/EChartsContainerNode.vue
index 4024cfe..7bd633d 100644
--- a/src/components/message/components/EChartsContainerNode.vue
+++ b/src/components/message/components/EChartsContainerNode.vue
@@ -1,90 +1,90 @@
-<script setup lang="ts">
-import * as echarts from "echarts";
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
-//@ts-ignore
-import Loading from "./Loading.vue";
-
-interface Props {
-  node: {
-    type: "vmr_container";
-    name: string;
-    children?: Array<{ type: string; raw: string }>;
-  };
-  isDark?: boolean;
-}
-
-const isLoading = ref(false);
-const props = defineProps<Props>();
-
-// 只处理 echarts 容器
-const isEChartsContainer = computed(() => props.node.name === "echarts");
-
-const chartRef = ref<HTMLElement>();
-let chartInstance: echarts.ECharts | null = null;
-
-// 从子节点提取 JSON
-const chartOption = computed(() => {
-  if (!props.node.children || props.node.children.length === 0) {
-    return null;
-  }
-  const code = props.node.children[0].raw;
-
-  try {
-    return JSON.parse(code);
-  } catch {
-    return null;
-  }
-});
-
-function initChart() {
-  isLoading.value = true;
-  if (!isEChartsContainer.value || !chartRef.value || !chartOption.value)
-    return;
-
-  if (chartInstance) {
-    chartInstance.dispose();
-  }
-  const theme = props.isDark ? "dark" : undefined;
-  isLoading.value = false;
-  chartInstance = echarts.init(chartRef.value, theme);
-  chartInstance.setOption(chartOption.value, true);
-}
-
-watch(() => props.isDark, initChart);
-watch(chartOption, (option) => {
-  if (chartInstance && option) {
-    chartInstance.setOption(option, true);
-  } else if (option) {
-    initChart();
-  }
-});
-
-onMounted(initChart);
-onBeforeUnmount(() => {
-  chartInstance?.dispose();
-});
-</script>
-
-<template>
-  <div v-if="isEChartsContainer" class="vmr-container vmr-container-echarts">
-    <div ref="chartRef" style="width: 100%; height: 400px" />
-    <Loading :loading="isLoading" text="正在渲染数据..." />
-    <slot v-if="!chartOption" />
-  </div>
-  <div v-else class="vmr-container" :class="`vmr-container-${node.name}`">
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-.vmr-container-echarts {
-  padding: 1rem;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.5rem;
-  margin: 1rem 0;
-}
-
-.dark .vmr-container-echarts {
-  border-color: #374151;
-}
-</style>
+<script setup lang="ts">
+import * as echarts from "echarts";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+//@ts-ignore
+import Loading from "./Loading.vue";
+
+interface Props {
+  node: {
+    type: "vmr_container";
+    name: string;
+    children?: Array<{ type: string; raw: string }>;
+  };
+  isDark?: boolean;
+}
+
+const isLoading = ref(false);
+const props = defineProps<Props>();
+
+// 只处理 echarts 容器
+const isEChartsContainer = computed(() => props.node.name === "echarts");
+
+const chartRef = ref<HTMLElement>();
+let chartInstance: echarts.ECharts | null = null;
+
+// 从子节点提取 JSON
+const chartOption = computed(() => {
+  if (!props.node.children || props.node.children.length === 0) {
+    return null;
+  }
+  const code = props.node.children[0].raw;
+
+  try {
+    return JSON.parse(code);
+  } catch {
+    return null;
+  }
+});
+
+function initChart() {
+  isLoading.value = true;
+  if (!isEChartsContainer.value || !chartRef.value || !chartOption.value)
+    return;
+
+  if (chartInstance) {
+    chartInstance.dispose();
+  }
+  const theme = props.isDark ? "dark" : undefined;
+  isLoading.value = false;
+  chartInstance = echarts.init(chartRef.value, theme);
+  chartInstance.setOption(chartOption.value, true);
+}
+
+watch(() => props.isDark, initChart);
+watch(chartOption, (option) => {
+  if (chartInstance && option) {
+    chartInstance.setOption(option, true);
+  } else if (option) {
+    initChart();
+  }
+});
+
+onMounted(initChart);
+onBeforeUnmount(() => {
+  chartInstance?.dispose();
+});
+</script>
+
+<template>
+  <div v-if="isEChartsContainer" class="vmr-container vmr-container-echarts">
+    <div ref="chartRef" style="width: 100%; height: 400px" />
+    <Loading :loading="isLoading" text="正在渲染数据..." />
+    <slot v-if="!chartOption" />
+  </div>
+  <div v-else class="vmr-container" :class="`vmr-container-${node.name}`">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.vmr-container-echarts {
+  padding: 1rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  margin: 1rem 0;
+}
+
+.dark .vmr-container-echarts {
+  border-color: #374151;
+}
+</style>
diff --git a/src/components/message/components/Loading.vue b/src/components/message/components/Loading.vue
index 36916ae..2ef1005 100644
--- a/src/components/message/components/Loading.vue
+++ b/src/components/message/components/Loading.vue
@@ -1,70 +1,70 @@
-<template>
-  <div v-if="loading" class="loading-overlay">
-    <div class="loading-spinner">
-      <div class="spinner-box">
-        <div class="spinner"></div>
-      </div>
-      <p v-if="text" class="loading-text">{{ text }}</p>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { watch } from "vue";
-
-const props = defineProps({
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  text: {
-    type: String,
-    default: "加载中...",
-  },
-});
-</script>
-
-<style scoped>
-.loading-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(255, 255, 255, 0.8);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-  backdrop-filter: blur(2px);
-}
-.spinner-box {
-  display: flex;
-  justify-content: center;
-}
-
-.spinner {
-  text-align: center;
-  width: 50px;
-  height: 50px;
-  border: 4px solid #f3f3f3;
-  border-top: 4px solid #3498db;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-.loading-text {
-  padding-top: 15px;
-  color: #666;
-  font-size: 14px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>
+<template>
+  <div v-if="loading" class="loading-overlay">
+    <div class="loading-spinner">
+      <div class="spinner-box">
+        <div class="spinner"></div>
+      </div>
+      <p v-if="text" class="loading-text">{{ text }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { watch } from "vue";
+
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  text: {
+    type: String,
+    default: "加载中...",
+  },
+});
+</script>
+
+<style scoped>
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  backdrop-filter: blur(2px);
+}
+.spinner-box {
+  display: flex;
+  justify-content: center;
+}
+
+.spinner {
+  text-align: center;
+  width: 50px;
+  height: 50px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loading-text {
+  padding-top: 15px;
+  color: #666;
+  font-size: 14px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/src/components/message/components/ThinkingNode.vue b/src/components/message/components/ThinkingNode.vue
index ba6a68f..6981378 100644
--- a/src/components/message/components/ThinkingNode.vue
+++ b/src/components/message/components/ThinkingNode.vue
@@ -1,211 +1,220 @@
-<script setup lang="ts">
-import { MarkdownRender } from "markstream-vue";
-import { useClipboard } from "@vueuse/core";
-import { ref, watch } from "vue";
-
-const props = defineProps<{
-  node: {
-    type: "think";
-    content: string;
-    children: any[];
-    loading?: boolean;
-  };
-}>();
-
-const { copy } = useClipboard({ legacy: true });
-const collapsed = ref(false);
-
-// 当思考完成时（loading 从 true 变为 false），自动折叠
-watch(
-  () => props.node.loading,
-  (newVal, oldVal) => {
-    if (oldVal === true && newVal === false) {
-      collapsed.value = true;
-    }
-  },
-);
-
-function toggleCollapse() {
-  collapsed.value = !collapsed.value;
-}
-
-async function textCopy(data: any) {
-  if (typeof data === "string") {
-    copy(data);
-  }
-}
-</script>
-
-<template>
-  <div
-    class="thinking-node p-4 my-4 bg-blue-50 dark:bg-blue-900/40 rounded-md border-l-4 border-blue-400"
-  >
-    <!-- 可点击的标题栏 -->
-    <div class="thinking-header" @click="toggleCollapse">
-      <div class="flex-shrink-0">
-        <!-- 思考图标 -->
-        <div
-          class="w-8 h-8 rounded-full bg-blue-200 dark:bg-blue-700 flex items-center justify-center text-blue-700 dark:text-blue-100"
-        >
-          <svg
-            class="w-4 h-4"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            aria-hidden="true"
-          >
-            <path
-              d="M12 3C7.03 3 3 6.58 3 11c0 1.86.66 3.57 1.77 4.98L4 21l5.2-1.9C10.06 19.35 11 19.5 12 19.5c4.97 0 9-3.58 9-8.5S16.97 3 12 3z"
-              stroke="currentColor"
-              stroke-width="0.8"
-              fill="currentColor"
-              opacity="0.9"
-            />
-          </svg>
-        </div>
-      </div>
-      <div class="thinking-title">
-        <strong class="text-sm">💭 深度思考</strong>
-        <!-- 加载动画 -->
-        <span v-if="node.loading" class="thinking-dots visible" aria-hidden="true">
-          <span class="dot dot-1" />
-          <span class="dot dot-2" />
-          <span class="dot dot-3" />
-        </span>
-        <span v-else class="thinking-status text-xs text-slate-500 dark:text-slate-300">
-          已完成
-        </span>
-      </div>
-      <!-- 折叠/展开箭头 -->
-      <div class="collapse-arrow" :class="{ collapsed }">
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <polyline points="6 9 12 15 18 9" />
-        </svg>
-      </div>
-    </div>
-
-    <!-- 可折叠的内容区域 -->
-    <div class="thinking-content" :class="{ collapsed }">
-      <div
-        class="mt-3 text-sm leading-relaxed text-slate-800 dark:text-slate-100"
-      >
-        <MarkdownRender :content="node.content" @copy="textCopy" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.thinking-node {
-  color: #0f172a;
-}
-.dark .thinking-node {
-  color: #e6f0ff;
-}
-
-/* 标题栏 */
-.thinking-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.thinking-title {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.thinking-status {
-  font-style: italic;
-}
-
-/* 折叠箭头 */
-.collapse-arrow {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  color: #64748b;
-  transition: transform 0.25s ease;
-  border-radius: 4px;
-}
-.collapse-arrow:hover {
-  background: rgba(0, 0, 0, 0.06);
-}
-.dark .collapse-arrow:hover {
-  background: rgba(255, 255, 255, 0.08);
-}
-.collapse-arrow.collapsed {
-  transform: rotate(-90deg);
-}
-
-/* 可折叠内容 */
-.thinking-content {
-  max-height: 2000px;
-  overflow: hidden;
-  transition: max-height 0.35s ease, opacity 0.25s ease;
-  opacity: 1;
-}
-.thinking-content.collapsed {
-  max-height: 0;
-  opacity: 0;
-}
-
-/* 加载动画 */
-.thinking-dots {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: 12px;
-}
-.thinking-dots .dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 9999px;
-  background: #1e3a8a;
-  opacity: 0.25;
-}
-.thinking-dots.visible .dot-1 {
-  animation: think-bounce 1s infinite ease-in-out;
-  animation-delay: 0s;
-}
-.thinking-dots.visible .dot-2 {
-  animation: think-bounce 1s infinite ease-in-out;
-  animation-delay: 0.12s;
-}
-.thinking-dots.visible .dot-3 {
-  animation: think-bounce 1s infinite ease-in-out;
-  animation-delay: 0.24s;
-}
-.dark .thinking-dots .dot {
-  background: #bfdbfe;
-  opacity: 0.28;
-}
-
-@keyframes think-bounce {
-  0%,
-  80%,
-  100% {
-    transform: translateY(0);
-    opacity: 0.25;
-  }
-  40% {
-    transform: translateY(-6px);
-    opacity: 1;
-  }
-}
-</style>
+<script setup lang="ts">
+import { MarkdownRender } from "markstream-vue";
+import { useClipboard } from "@vueuse/core";
+import { ref, watch } from "vue";
+
+const props = defineProps<{
+  node: {
+    type: "think";
+    content: string;
+    children: any[];
+    loading?: boolean;
+  };
+}>();
+
+const { copy } = useClipboard({ legacy: true });
+const collapsed = ref(false);
+
+// 当思考完成时（loading 从 true 变为 false），自动折叠
+watch(
+  () => props.node.loading,
+  (newVal, oldVal) => {
+    if (oldVal === true && newVal === false) {
+      collapsed.value = true;
+    }
+  },
+);
+
+function toggleCollapse() {
+  collapsed.value = !collapsed.value;
+}
+
+async function textCopy(data: any) {
+  if (typeof data === "string") {
+    copy(data);
+  }
+}
+</script>
+
+<template>
+  <div
+    class="thinking-node p-4 my-4 bg-blue-50 dark:bg-blue-900/40 rounded-md border-l-4 border-blue-400"
+  >
+    <!-- 可点击的标题栏 -->
+    <div class="thinking-header" @click="toggleCollapse">
+      <div class="flex-shrink-0">
+        <!-- 思考图标 -->
+        <div
+          class="w-8 h-8 rounded-full bg-blue-200 dark:bg-blue-700 flex items-center justify-center text-blue-700 dark:text-blue-100"
+        >
+          <svg
+            class="w-4 h-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+          >
+            <path
+              d="M12 3C7.03 3 3 6.58 3 11c0 1.86.66 3.57 1.77 4.98L4 21l5.2-1.9C10.06 19.35 11 19.5 12 19.5c4.97 0 9-3.58 9-8.5S16.97 3 12 3z"
+              stroke="currentColor"
+              stroke-width="0.8"
+              fill="currentColor"
+              opacity="0.9"
+            />
+          </svg>
+        </div>
+      </div>
+      <div class="thinking-title">
+        <strong class="text-sm">💭 深度思考</strong>
+        <!-- 加载动画 -->
+        <span
+          v-if="node.loading"
+          class="thinking-dots visible"
+          aria-hidden="true"
+        >
+          <span class="dot dot-1" />
+          <span class="dot dot-2" />
+          <span class="dot dot-3" />
+        </span>
+        <span
+          v-else
+          class="thinking-status text-xs text-slate-500 dark:text-slate-300"
+        >
+          已完成
+        </span>
+      </div>
+      <!-- 折叠/展开箭头 -->
+      <div class="collapse-arrow" :class="{ collapsed }">
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </div>
+    </div>
+
+    <!-- 可折叠的内容区域 -->
+    <div class="thinking-content" :class="{ collapsed }">
+      <div
+        class="mt-3 text-sm leading-relaxed text-slate-800 dark:text-slate-100"
+      >
+        <MarkdownRender :content="node.content" @copy="textCopy" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.thinking-node {
+  color: #0f172a;
+}
+.dark .thinking-node {
+  color: #e6f0ff;
+}
+
+/* 标题栏 */
+.thinking-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.thinking-title {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.thinking-status {
+  font-style: italic;
+}
+
+/* 折叠箭头 */
+.collapse-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: #64748b;
+  transition: transform 0.25s ease;
+  border-radius: 4px;
+}
+.collapse-arrow:hover {
+  background: rgba(0, 0, 0, 0.06);
+}
+.dark .collapse-arrow:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+.collapse-arrow.collapsed {
+  transform: rotate(-90deg);
+}
+
+/* 可折叠内容 */
+.thinking-content {
+  max-height: 2000px;
+  overflow: hidden;
+  transition:
+    max-height 0.35s ease,
+    opacity 0.25s ease;
+  opacity: 1;
+}
+.thinking-content.collapsed {
+  max-height: 0;
+  opacity: 0;
+}
+
+/* 加载动画 */
+.thinking-dots {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 12px;
+}
+.thinking-dots .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 9999px;
+  background: #1e3a8a;
+  opacity: 0.25;
+}
+.thinking-dots.visible .dot-1 {
+  animation: think-bounce 1s infinite ease-in-out;
+  animation-delay: 0s;
+}
+.thinking-dots.visible .dot-2 {
+  animation: think-bounce 1s infinite ease-in-out;
+  animation-delay: 0.12s;
+}
+.thinking-dots.visible .dot-3 {
+  animation: think-bounce 1s infinite ease-in-out;
+  animation-delay: 0.24s;
+}
+.dark .thinking-dots .dot {
+  background: #bfdbfe;
+  opacity: 0.28;
+}
+
+@keyframes think-bounce {
+  0%,
+  80%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.25;
+  }
+  40% {
+    transform: translateY(-6px);
+    opacity: 1;
+  }
+}
+</style>
diff --git a/src/components/modals/ConversationSettingsModal.vue b/src/components/modals/ConversationSettingsModal.vue
index 3658c47..5d7bd31 100644
--- a/src/components/modals/ConversationSettingsModal.vue
+++ b/src/components/modals/ConversationSettingsModal.vue
@@ -1,762 +1,764 @@
-<template>
-  <Teleport to="body">
-    <Transition name="modal">
-      <div v-if="visible" class="modal-overlay" @click.self="close">
-        <div class="conversation-settings-modal">
-          <!-- 头部 -->
-          <div class="modal-header">
-            <div class="header-title">
-              <MessageSquare :size="22" />
-              <h3>对话设置</h3>
-            </div>
-            <button class="close-btn" @click="close">
-              <X :size="20" />
-            </button>
-          </div>
-
-          <!-- 内容 -->
-          <div class="modal-content">
-            <!-- 对话信息 -->
-            <div class="section">
-              <div class="section-title">对话信息</div>
-
-              <!-- 标题 -->
-              <div class="setting-item vertical">
-                <label class="setting-label">对话标题</label>
-                <input
-                  v-model="localSettings.title"
-                  type="text"
-                  class="text-input"
-                  placeholder="输入对话标题"
-                />
-              </div>
-
-              <!-- 创建时间 -->
-              <div class="setting-item">
-                <span class="setting-label">创建时间</span>
-                <span class="setting-value">{{
-                  formatDate(conversation?.createdAt)
-                }}</span>
-              </div>
-
-              <!-- 消息数量 -->
-              <div class="setting-item">
-                <span class="setting-label">消息数量</span>
-                <span class="setting-value"
-                  >{{ conversation?.messages.length || 0 }} 条</span
-                >
-              </div>
-            </div>
-
-            <!-- AI 设置 -->
-            <div class="section">
-              <div class="section-title">AI 设置</div>
-
-              <!-- 模型选择 -->
-              <div class="setting-item vertical">
-                <label class="setting-label">AI 模型</label>
-                <FormSelect
-                  v-model="modelSelect"
-                  :options="modelOptions"
-                  valueProp="label"
-                  @update:model-value="updateSelect"
-                />
-              </div>
-
-              <!-- 温度 -->
-              <div class="setting-item vertical">
-                <div class="setting-header">
-                  <label class="setting-label">温度</label>
-                  <span class="setting-value">{{
-                    localSettings.temperature.toFixed(1)
-                  }}</span>
-                </div>
-                <FormSlider
-                  v-model="localSettings.temperature"
-                  :min="0"
-                  :max="1"
-                  :step="0.1"
-                />
-                <p class="setting-hint">
-                  较低的温度使回复更加集中和确定，较高的温度使回复更加多样化
-                </p>
-              </div>
-
-              <!-- 最大 Token -->
-              <div class="setting-item vertical">
-                <div class="setting-header">
-                  <label class="setting-label">最大回复长度</label>
-                  <span class="setting-value">{{
-                    localSettings.maxTokens
-                  }}</span>
-                </div>
-                <FormSlider
-                  v-model="localSettings.maxTokens"
-                  :min="256"
-                  :max="8192"
-                  :step="256"
-                />
-              </div>
-            </div>
-
-            <!-- 系统提示词 -->
-            <div class="section">
-              <div class="section-title">系统提示词</div>
-
-              <div class="setting-item vertical">
-                <textarea
-                  v-model="localSettings.systemPrompt"
-                  class="prompt-textarea"
-                  rows="5"
-                  placeholder="输入系统提示词，定义 AI 的角色和行为..."
-                />
-                <p class="setting-hint">
-                  系统提示词会影响 AI 在整个对话中的行为方式
-                </p>
-              </div>
-
-              <!-- 预设提示词 -->
-              <div class="preset-prompts">
-                <span class="preset-label">快速选择：</span>
-                <button
-                  v-for="preset in presetPrompts"
-                  :key="preset.name"
-                  class="preset-btn"
-                  @click="localSettings.systemPrompt = preset.prompt"
-                >
-                  {{ preset.name }}
-                </button>
-              </div>
-            </div>
-
-            <!-- 记忆设置 -->
-            <div class="section">
-              <div class="section-title">记忆设置</div>
-
-              <div class="setting-item">
-                <div class="setting-info">
-                  <span class="setting-label">启用对话记忆</span>
-                  <span class="setting-desc">AI 会记住之前的对话内容</span>
-                </div>
-                <FormSwitch v-model="localSettings.enableMemory" />
-              </div>
-
-              <div
-                v-if="localSettings.enableMemory"
-                class="setting-item vertical"
-              >
-                <div class="setting-header">
-                  <label class="setting-label">记忆长度</label>
-                  <span class="setting-value"
-                    >{{ localSettings.memoryLength }} 条消息</span
-                  >
-                </div>
-                <FormSlider
-                  v-model="localSettings.memoryLength"
-                  :min="2"
-                  :max="50"
-                  :step="2"
-                />
-              </div>
-            </div>
-
-            <!-- 危险操作 -->
-            <div class="section danger-section">
-              <div class="section-title">危险操作</div>
-
-              <div class="danger-actions">
-                <button class="danger-btn" @click="handleClearMessages">
-                  <Trash2 :size="18" />
-                  <span>清空消息</span>
-                </button>
-                <button class="danger-btn" @click="handleDeleteConversation">
-                  <Trash2 :size="18" />
-                  <span>删除对话</span>
-                </button>
-              </div>
-            </div>
-          </div>
-
-          <!-- 底部 -->
-          <div class="modal-footer">
-            <button class="cancel-btn" @click="close">取消</button>
-            <button class="save-btn" @click="handleSave">
-              <Check :size="18" />
-              <span>保存设置</span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, onMounted } from "vue";
-import { storeToRefs } from "pinia";
-import { useChatStore } from "@/stores/chat";
-import { useSettingsStore } from "@/stores/settings";
-import FormSwitch from "@/components/ui/FormSwitch.vue";
-import FormSlider from "@/components/ui/FormSlider.vue";
-import FormSelect from "@/components/ui/FormSelect.vue";
-import { MessageSquare, X, Check, Trash2 } from "@/components/icons";
-import { chatApi } from "@/services/api.ts";
-import type { ConversationSettings } from "@/types/chat";
-
-const chatStore = useChatStore();
-const settingsStore = useSettingsStore();
-
-// 分开获取：响应式状态用 storeToRefs，普通数据直接从 store 获取
-const { currentConversation: conversation } = storeToRefs(chatStore);
-const { showConversationSettingsModal: visible, settings } =
-  storeToRefs(settingsStore);
-const availableModels: any = ref([]);
-const modelSelect = ref(localStorage.getItem("modelSelect") || "");
-const currentModelId = ref(settingsStore.getSelectedModelId());
-
-onMounted(() => {
-  chatApi.getModels().then((res: any) => {
-    availableModels.value = res;
-    // 初始化模型显示名称
-    const model = availableModels.value?.find((m: any) => m.id === currentModelId.value);
-    if (model) {
-      modelSelect.value = model.name;
-    } else if (availableModels.value.length > 0) {
-      modelSelect.value = availableModels.value[0].name;
-      currentModelId.value = availableModels.value[0].id;
-    }
-    localStorage.setItem("modelSelect", modelSelect.value);
-  });
-});
-
-// 本地设置副本
-const localSettings = ref({
-  title: "",
-  model: "gpt-4",
-  temperature: 0.7,
-  maxTokens: 4096,
-  systemPrompt: "",
-  enableMemory: true,
-  memoryLength: 20,
-});
-
-// 模型选项 - 添加安全检查
-const modelOptions = computed(() => {
-  if (!availableModels.value || !Array.isArray(availableModels.value)) {
-    return [{ value: "gpt-4", label: "GPT-4", description: "默认模型" }];
-  }
-  return availableModels.value?.map((model: any) => ({
-    value: model.name,
-    label: model.name,
-    description: model.description,
-  }));
-});
-
-// 预设提示词
-const presetPrompts = [
-  {
-    name: "默认助手",
-    prompt: "你是一个有帮助的 AI 助手，能够回答各种问题并提供帮助。",
-  },
-  {
-    name: "代码专家",
-    prompt:
-      "你是一个专业的编程助手，擅长代码编写、调试和解释。请提供简洁、高质量的代码示例。",
-  },
-  {
-    name: "写作助手",
-    prompt:
-      "你是一个专业的写作助手，擅长文章撰写、润色和编辑。请使用优美的语言和清晰的结构。",
-  },
-  {
-    name: "翻译专家",
-    prompt: "你是一个专业的翻译助手，能够在多种语言之间进行准确、自然的翻译。",
-  },
-  {
-    name: "学习导师",
-    prompt:
-      "你是一个耐心的学习导师，擅长用简单易懂的方式解释复杂的概念，并提供练习建议。",
-  },
-];
-
-function updateSelect(modelName: any) {
-  modelSelect.value = modelName;
-  localStorage.setItem("modelSelect", modelName);
-  // 根据模型名称找到对应的 ID 并更新
-  const model = availableModels.value?.find((m: any) => m.name === modelName);
-  if (model) {
-    currentModelId.value = model.id;
-    settingsStore.setSelectedModelId(model.id);
-  }
-}
-
-// 格式化日期
-function formatDate(timestamp?: number): string {
-  if (!timestamp) return "-";
-  const date = new Date(timestamp);
-  return date.toLocaleString("zh-CN", {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-  });
-}
-
-// 监听对话变化，初始化设置
-watch(
-  [visible, conversation],
-  ([isVisible, conv]) => {
-    if (isVisible && conv) {
-      localSettings.value = {
-        title: conv.title || "",
-        model: conv.settings?.model || settings.value.defaultModel || "gpt-4",
-        temperature:
-          conv.settings?.temperature ??
-          settings.value.defaultTemperature ??
-          0.7,
-        maxTokens:
-          conv.settings?.maxTokens || settings.value.defaultMaxTokens || 4096,
-        systemPrompt:
-          conv.settings?.systemPrompt ||
-          settings.value.defaultSystemPrompt ||
-          "",
-        enableMemory: conv.settings?.enableMemory ?? true,
-        memoryLength: conv.settings?.memoryLength || 20,
-      };
-    }
-  },
-  { immediate: true },
-);
-
-function close() {
-  settingsStore.closeConversationSettingsModal();
-}
-
-function handleSave() {
-  if (!conversation.value) return;
-
-  // 更新对话标题
-  if (localSettings.value.title !== conversation.value.title) {
-    chatStore.renameConversation(
-      conversation.value.id,
-      localSettings.value.title,
-    );
-  }
-
-  // 更新对话设置 - 这里需要一个新方法来更新对话设置
-  const convSettings: ConversationSettings = {
-    model: localSettings.value.model,
-    temperature: localSettings.value.temperature,
-    maxTokens: localSettings.value.maxTokens,
-    systemPrompt: localSettings.value.systemPrompt,
-    enableMemory: localSettings.value.enableMemory,
-    memoryLength: localSettings.value.memoryLength,
-  };
-
-  // 调用更新对话设置的方法
-  chatStore.updateConversationSettings(conversation.value.id, convSettings);
-
-  close();
-
-  // 显示成功提示
-  if (window.$toast) {
-    window.$toast("设置已保存", "success");
-  }
-}
-
-function handleClearMessages() {
-  if (!conversation.value) return;
-
-  if (confirm("确定要清空所有消息吗？此操作不可恢复。")) {
-    chatStore.clearConversation(conversation.value.id);
-    close();
-  }
-}
-
-function handleDeleteConversation() {
-  if (!conversation.value) return;
-
-  if (confirm("确定要删除这个对话吗？此操作不可恢复。")) {
-    chatStore.deleteConversation(conversation.value.id);
-    close();
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  backdrop-filter: blur(4px);
-}
-
-.conversation-settings-modal {
-  width: 520px;
-  max-width: 90vw;
-  max-height: 85vh;
-  background: white;
-  border-radius: 20px;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  .dark & {
-    background: #1e1e2e;
-  }
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px;
-  border-bottom: 1px solid #e2e8f0;
-
-  .dark & {
-    border-bottom-color: #2d2d3d;
-  }
-}
-
-.header-title {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-
-  svg {
-    color: #3b82f6;
-  }
-
-  h3 {
-    margin: 0;
-    font-size: 18px;
-    font-weight: 600;
-    color: #1f2937;
-
-    .dark & {
-      color: #f3f4f6;
-    }
-  }
-}
-
-.close-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border: none;
-  border-radius: 10px;
-  background: transparent;
-  color: #6b7280;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background: #f3f4f6;
-    color: #1f2937;
-
-    .dark & {
-      background: #374151;
-      color: #f3f4f6;
-    }
-  }
-}
-
-.modal-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px 24px;
-}
-
-.section {
-  margin-bottom: 28px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.section-title {
-  font-size: 12px;
-  font-weight: 600;
-  color: #9ca3af;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin-bottom: 16px;
-}
-
-.setting-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  &.vertical {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 10px;
-  }
-}
-
-.setting-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.setting-info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.setting-label {
-  font-size: 14px;
-  font-weight: 500;
-  color: #1f2937;
-
-  .dark & {
-    color: #f3f4f6;
-  }
-}
-
-.setting-desc {
-  font-size: 12px;
-  color: #9ca3af;
-}
-
-.setting-value {
-  font-size: 14px;
-  color: #6b7280;
-
-  .setting-header & {
-    font-weight: 500;
-    color: #3b82f6;
-  }
-}
-
-.setting-hint {
-  margin: 0;
-  font-size: 12px;
-  color: #9ca3af;
-  line-height: 1.5;
-}
-
-.text-input {
-  width: 100%;
-  padding: 10px 14px;
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  background: white;
-  font-size: 14px;
-  color: #1f2937;
-
-  .dark & {
-    background: #2d2d3d;
-    border-color: #374151;
-    color: #f3f4f6;
-  }
-
-  &:focus {
-    outline: none;
-    border-color: #3b82f6;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-  }
-
-  &::placeholder {
-    color: #9ca3af;
-  }
-}
-
-.prompt-textarea {
-  width: 100%;
-  padding: 12px 14px;
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  background: white;
-  font-family: inherit;
-  font-size: 14px;
-  color: #1f2937;
-  resize: vertical;
-  min-height: 120px;
-
-  .dark & {
-    background: #2d2d3d;
-    border-color: #374151;
-    color: #f3f4f6;
-  }
-
-  &:focus {
-    outline: none;
-    border-color: #3b82f6;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-  }
-
-  &::placeholder {
-    color: #9ca3af;
-  }
-}
-
-.preset-prompts {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-  margin-top: 12px;
-}
-
-.preset-label {
-  font-size: 12px;
-  color: #9ca3af;
-}
-
-.preset-btn {
-  padding: 6px 12px;
-  border: 1px solid #e2e8f0;
-  border-radius: 16px;
-  background: white;
-  color: #6b7280;
-  font-size: 12px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  .dark & {
-    background: #2d2d3d;
-    border-color: #374151;
-    color: #9ca3af;
-  }
-
-  &:hover {
-    border-color: #3b82f6;
-    color: #3b82f6;
-  }
-}
-
-.danger-section {
-  padding: 16px;
-  background: rgba(239, 68, 68, 0.05);
-  border-radius: 12px;
-  border: 1px solid rgba(239, 68, 68, 0.1);
-}
-
-.danger-actions {
-  display: flex;
-  gap: 12px;
-}
-
-.danger-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
-  border: 1px solid #fecaca;
-  border-radius: 10px;
-  background: white;
-  color: #ef4444;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  .dark & {
-    background: transparent;
-    border-color: rgba(239, 68, 68, 0.3);
-  }
-
-  &:hover {
-    background: #ef4444;
-    border-color: #ef4444;
-    color: white;
-  }
-}
-
-.modal-footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 12px;
-  padding: 16px 24px;
-  border-top: 1px solid #e2e8f0;
-
-  .dark & {
-    border-top-color: #2d2d3d;
-  }
-}
-
-.cancel-btn {
-  padding: 10px 20px;
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  background: transparent;
-  color: #6b7280;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  .dark & {
-    border-color: #374151;
-    color: #9ca3af;
-  }
-
-  &:hover {
-    background: #f3f4f6;
-    color: #374151;
-
-    .dark & {
-      background: #2d2d3d;
-      color: #e5e7eb;
-    }
-  }
-}
-
-.save-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 20px;
-  border: none;
-  border-radius: 10px;
-  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-  color: white;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
-  }
-}
-
-// 动画
-.modal-enter-active,
-.modal-leave-active {
-  transition: all 0.25s ease;
-
-  .conversation-settings-modal {
-    transition: all 0.25s ease;
-  }
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-
-  .conversation-settings-modal {
-    transform: scale(0.9);
-    opacity: 0;
-  }
-}
-</style>
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="visible" class="modal-overlay" @click.self="close">
+        <div class="conversation-settings-modal">
+          <!-- 头部 -->
+          <div class="modal-header">
+            <div class="header-title">
+              <MessageSquare :size="22" />
+              <h3>对话设置</h3>
+            </div>
+            <button class="close-btn" @click="close">
+              <X :size="20" />
+            </button>
+          </div>
+
+          <!-- 内容 -->
+          <div class="modal-content">
+            <!-- 对话信息 -->
+            <div class="section">
+              <div class="section-title">对话信息</div>
+
+              <!-- 标题 -->
+              <div class="setting-item vertical">
+                <label class="setting-label">对话标题</label>
+                <input
+                  v-model="localSettings.title"
+                  type="text"
+                  class="text-input"
+                  placeholder="输入对话标题"
+                />
+              </div>
+
+              <!-- 创建时间 -->
+              <div class="setting-item">
+                <span class="setting-label">创建时间</span>
+                <span class="setting-value">{{
+                  formatDate(conversation?.createdAt)
+                }}</span>
+              </div>
+
+              <!-- 消息数量 -->
+              <div class="setting-item">
+                <span class="setting-label">消息数量</span>
+                <span class="setting-value"
+                  >{{ conversation?.messages.length || 0 }} 条</span
+                >
+              </div>
+            </div>
+
+            <!-- AI 设置 -->
+            <div class="section">
+              <div class="section-title">AI 设置</div>
+
+              <!-- 模型选择 -->
+              <div class="setting-item vertical">
+                <label class="setting-label">AI 模型</label>
+                <FormSelect
+                  v-model="modelSelect"
+                  :options="modelOptions"
+                  valueProp="label"
+                  @update:model-value="updateSelect"
+                />
+              </div>
+
+              <!-- 温度 -->
+              <div class="setting-item vertical">
+                <div class="setting-header">
+                  <label class="setting-label">温度</label>
+                  <span class="setting-value">{{
+                    localSettings.temperature.toFixed(1)
+                  }}</span>
+                </div>
+                <FormSlider
+                  v-model="localSettings.temperature"
+                  :min="0"
+                  :max="1"
+                  :step="0.1"
+                />
+                <p class="setting-hint">
+                  较低的温度使回复更加集中和确定，较高的温度使回复更加多样化
+                </p>
+              </div>
+
+              <!-- 最大 Token -->
+              <div class="setting-item vertical">
+                <div class="setting-header">
+                  <label class="setting-label">最大回复长度</label>
+                  <span class="setting-value">{{
+                    localSettings.maxTokens
+                  }}</span>
+                </div>
+                <FormSlider
+                  v-model="localSettings.maxTokens"
+                  :min="256"
+                  :max="8192"
+                  :step="256"
+                />
+              </div>
+            </div>
+
+            <!-- 系统提示词 -->
+            <div class="section">
+              <div class="section-title">系统提示词</div>
+
+              <div class="setting-item vertical">
+                <textarea
+                  v-model="localSettings.systemPrompt"
+                  class="prompt-textarea"
+                  rows="5"
+                  placeholder="输入系统提示词，定义 AI 的角色和行为..."
+                />
+                <p class="setting-hint">
+                  系统提示词会影响 AI 在整个对话中的行为方式
+                </p>
+              </div>
+
+              <!-- 预设提示词 -->
+              <div class="preset-prompts">
+                <span class="preset-label">快速选择：</span>
+                <button
+                  v-for="preset in presetPrompts"
+                  :key="preset.name"
+                  class="preset-btn"
+                  @click="localSettings.systemPrompt = preset.prompt"
+                >
+                  {{ preset.name }}
+                </button>
+              </div>
+            </div>
+
+            <!-- 记忆设置 -->
+            <div class="section">
+              <div class="section-title">记忆设置</div>
+
+              <div class="setting-item">
+                <div class="setting-info">
+                  <span class="setting-label">启用对话记忆</span>
+                  <span class="setting-desc">AI 会记住之前的对话内容</span>
+                </div>
+                <FormSwitch v-model="localSettings.enableMemory" />
+              </div>
+
+              <div
+                v-if="localSettings.enableMemory"
+                class="setting-item vertical"
+              >
+                <div class="setting-header">
+                  <label class="setting-label">记忆长度</label>
+                  <span class="setting-value"
+                    >{{ localSettings.memoryLength }} 条消息</span
+                  >
+                </div>
+                <FormSlider
+                  v-model="localSettings.memoryLength"
+                  :min="2"
+                  :max="50"
+                  :step="2"
+                />
+              </div>
+            </div>
+
+            <!-- 危险操作 -->
+            <div class="section danger-section">
+              <div class="section-title">危险操作</div>
+
+              <div class="danger-actions">
+                <button class="danger-btn" @click="handleClearMessages">
+                  <Trash2 :size="18" />
+                  <span>清空消息</span>
+                </button>
+                <button class="danger-btn" @click="handleDeleteConversation">
+                  <Trash2 :size="18" />
+                  <span>删除对话</span>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- 底部 -->
+          <div class="modal-footer">
+            <button class="cancel-btn" @click="close">取消</button>
+            <button class="save-btn" @click="handleSave">
+              <Check :size="18" />
+              <span>保存设置</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from "vue";
+import { storeToRefs } from "pinia";
+import { useChatStore } from "@/stores/chat";
+import { useSettingsStore } from "@/stores/settings";
+import FormSwitch from "@/components/ui/FormSwitch.vue";
+import FormSlider from "@/components/ui/FormSlider.vue";
+import FormSelect from "@/components/ui/FormSelect.vue";
+import { MessageSquare, X, Check, Trash2 } from "@/components/icons";
+import { chatApi } from "@/services/api.ts";
+import type { ConversationSettings } from "@/types/chat";
+
+const chatStore = useChatStore();
+const settingsStore = useSettingsStore();
+
+// 分开获取：响应式状态用 storeToRefs，普通数据直接从 store 获取
+const { currentConversation: conversation } = storeToRefs(chatStore);
+const { showConversationSettingsModal: visible, settings } =
+  storeToRefs(settingsStore);
+const availableModels: any = ref([]);
+const modelSelect = ref(localStorage.getItem("modelSelect") || "");
+const currentModelId = ref(settingsStore.getSelectedModelId());
+
+onMounted(() => {
+  chatApi.getModels().then((res: any) => {
+    availableModels.value = res;
+    // 初始化模型显示名称
+    const model = availableModels.value?.find(
+      (m: any) => m.id === currentModelId.value,
+    );
+    if (model) {
+      modelSelect.value = model.name;
+    } else if (availableModels.value.length > 0) {
+      modelSelect.value = availableModels.value[0].name;
+      currentModelId.value = availableModels.value[0].id;
+    }
+    localStorage.setItem("modelSelect", modelSelect.value);
+  });
+});
+
+// 本地设置副本
+const localSettings = ref({
+  title: "",
+  model: "gpt-4",
+  temperature: 0.7,
+  maxTokens: 4096,
+  systemPrompt: "",
+  enableMemory: true,
+  memoryLength: 20,
+});
+
+// 模型选项 - 添加安全检查
+const modelOptions = computed(() => {
+  if (!availableModels.value || !Array.isArray(availableModels.value)) {
+    return [{ value: "gpt-4", label: "GPT-4", description: "默认模型" }];
+  }
+  return availableModels.value?.map((model: any) => ({
+    value: model.name,
+    label: model.name,
+    description: model.description,
+  }));
+});
+
+// 预设提示词
+const presetPrompts = [
+  {
+    name: "默认助手",
+    prompt: "你是一个有帮助的 AI 助手，能够回答各种问题并提供帮助。",
+  },
+  {
+    name: "代码专家",
+    prompt:
+      "你是一个专业的编程助手，擅长代码编写、调试和解释。请提供简洁、高质量的代码示例。",
+  },
+  {
+    name: "写作助手",
+    prompt:
+      "你是一个专业的写作助手，擅长文章撰写、润色和编辑。请使用优美的语言和清晰的结构。",
+  },
+  {
+    name: "翻译专家",
+    prompt: "你是一个专业的翻译助手，能够在多种语言之间进行准确、自然的翻译。",
+  },
+  {
+    name: "学习导师",
+    prompt:
+      "你是一个耐心的学习导师，擅长用简单易懂的方式解释复杂的概念，并提供练习建议。",
+  },
+];
+
+function updateSelect(modelName: any) {
+  modelSelect.value = modelName;
+  localStorage.setItem("modelSelect", modelName);
+  // 根据模型名称找到对应的 ID 并更新
+  const model = availableModels.value?.find((m: any) => m.name === modelName);
+  if (model) {
+    currentModelId.value = model.id;
+    settingsStore.setSelectedModelId(model.id);
+  }
+}
+
+// 格式化日期
+function formatDate(timestamp?: number): string {
+  if (!timestamp) return "-";
+  const date = new Date(timestamp);
+  return date.toLocaleString("zh-CN", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+// 监听对话变化，初始化设置
+watch(
+  [visible, conversation],
+  ([isVisible, conv]) => {
+    if (isVisible && conv) {
+      localSettings.value = {
+        title: conv.title || "",
+        model: conv.settings?.model || settings.value.defaultModel || "gpt-4",
+        temperature:
+          conv.settings?.temperature ??
+          settings.value.defaultTemperature ??
+          0.7,
+        maxTokens:
+          conv.settings?.maxTokens || settings.value.defaultMaxTokens || 4096,
+        systemPrompt:
+          conv.settings?.systemPrompt ||
+          settings.value.defaultSystemPrompt ||
+          "",
+        enableMemory: conv.settings?.enableMemory ?? true,
+        memoryLength: conv.settings?.memoryLength || 20,
+      };
+    }
+  },
+  { immediate: true },
+);
+
+function close() {
+  settingsStore.closeConversationSettingsModal();
+}
+
+function handleSave() {
+  if (!conversation.value) return;
+
+  // 更新对话标题
+  if (localSettings.value.title !== conversation.value.title) {
+    chatStore.renameConversation(
+      conversation.value.id,
+      localSettings.value.title,
+    );
+  }
+
+  // 更新对话设置 - 这里需要一个新方法来更新对话设置
+  const convSettings: ConversationSettings = {
+    model: localSettings.value.model,
+    temperature: localSettings.value.temperature,
+    maxTokens: localSettings.value.maxTokens,
+    systemPrompt: localSettings.value.systemPrompt,
+    enableMemory: localSettings.value.enableMemory,
+    memoryLength: localSettings.value.memoryLength,
+  };
+
+  // 调用更新对话设置的方法
+  chatStore.updateConversationSettings(conversation.value.id, convSettings);
+
+  close();
+
+  // 显示成功提示
+  if (window.$toast) {
+    window.$toast("设置已保存", "success");
+  }
+}
+
+function handleClearMessages() {
+  if (!conversation.value) return;
+
+  if (confirm("确定要清空所有消息吗？此操作不可恢复。")) {
+    chatStore.clearConversation(conversation.value.id);
+    close();
+  }
+}
+
+function handleDeleteConversation() {
+  if (!conversation.value) return;
+
+  if (confirm("确定要删除这个对话吗？此操作不可恢复。")) {
+    chatStore.deleteConversation(conversation.value.id);
+    close();
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  backdrop-filter: blur(4px);
+}
+
+.conversation-settings-modal {
+  width: 520px;
+  max-width: 90vw;
+  max-height: 85vh;
+  background: white;
+  border-radius: 20px;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .dark & {
+    background: #1e1e2e;
+  }
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid #e2e8f0;
+
+  .dark & {
+    border-bottom-color: #2d2d3d;
+  }
+}
+
+.header-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  svg {
+    color: #3b82f6;
+  }
+
+  h3 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #1f2937;
+
+    .dark & {
+      color: #f3f4f6;
+    }
+  }
+}
+
+.close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: #f3f4f6;
+    color: #1f2937;
+
+    .dark & {
+      background: #374151;
+      color: #f3f4f6;
+    }
+  }
+}
+
+.modal-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px;
+}
+
+.section {
+  margin-bottom: 28px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.section-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #9ca3af;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 16px;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &.vertical {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+}
+
+.setting-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.setting-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.setting-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #1f2937;
+
+  .dark & {
+    color: #f3f4f6;
+  }
+}
+
+.setting-desc {
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+.setting-value {
+  font-size: 14px;
+  color: #6b7280;
+
+  .setting-header & {
+    font-weight: 500;
+    color: #3b82f6;
+  }
+}
+
+.setting-hint {
+  margin: 0;
+  font-size: 12px;
+  color: #9ca3af;
+  line-height: 1.5;
+}
+
+.text-input {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: white;
+  font-size: 14px;
+  color: #1f2937;
+
+  .dark & {
+    background: #2d2d3d;
+    border-color: #374151;
+    color: #f3f4f6;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  }
+
+  &::placeholder {
+    color: #9ca3af;
+  }
+}
+
+.prompt-textarea {
+  width: 100%;
+  padding: 12px 14px;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: white;
+  font-family: inherit;
+  font-size: 14px;
+  color: #1f2937;
+  resize: vertical;
+  min-height: 120px;
+
+  .dark & {
+    background: #2d2d3d;
+    border-color: #374151;
+    color: #f3f4f6;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  }
+
+  &::placeholder {
+    color: #9ca3af;
+  }
+}
+
+.preset-prompts {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.preset-label {
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+.preset-btn {
+  padding: 6px 12px;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  background: white;
+  color: #6b7280;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  .dark & {
+    background: #2d2d3d;
+    border-color: #374151;
+    color: #9ca3af;
+  }
+
+  &:hover {
+    border-color: #3b82f6;
+    color: #3b82f6;
+  }
+}
+
+.danger-section {
+  padding: 16px;
+  background: rgba(239, 68, 68, 0.05);
+  border-radius: 12px;
+  border: 1px solid rgba(239, 68, 68, 0.1);
+}
+
+.danger-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.danger-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border: 1px solid #fecaca;
+  border-radius: 10px;
+  background: white;
+  color: #ef4444;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  .dark & {
+    background: transparent;
+    border-color: rgba(239, 68, 68, 0.3);
+  }
+
+  &:hover {
+    background: #ef4444;
+    border-color: #ef4444;
+    color: white;
+  }
+}
+
+.modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 24px;
+  border-top: 1px solid #e2e8f0;
+
+  .dark & {
+    border-top-color: #2d2d3d;
+  }
+}
+
+.cancel-btn {
+  padding: 10px 20px;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: transparent;
+  color: #6b7280;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  .dark & {
+    border-color: #374151;
+    color: #9ca3af;
+  }
+
+  &:hover {
+    background: #f3f4f6;
+    color: #374151;
+
+    .dark & {
+      background: #2d2d3d;
+      color: #e5e7eb;
+    }
+  }
+}
+
+.save-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
+  }
+}
+
+// 动画
+.modal-enter-active,
+.modal-leave-active {
+  transition: all 0.25s ease;
+
+  .conversation-settings-modal {
+    transition: all 0.25s ease;
+  }
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+
+  .conversation-settings-modal {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+}
+</style>
diff --git a/src/components/modals/SearchModal.vue b/src/components/modals/SearchModal.vue
index 5798ec5..197d702 100644
--- a/src/components/modals/SearchModal.vue
+++ b/src/components/modals/SearchModal.vue
@@ -1,369 +1,371 @@
-<template>
-  <Teleport to="body">
-    <Transition name="modal">
-      <div v-if="visible" class="modal-overlay" @click.self="close">
-        <div class="search-modal">
-          <!-- 搜索输入 -->
-          <div class="search-header">
-            <Search :size="20" class="search-icon" />
-            <input
-                ref="inputRef"
-                v-model="searchQuery"
-                type="text"
-                class="search-input"
-                placeholder="搜索对话..."
-                @keydown.escape="close"
-                @keydown.down.prevent="navigateDown"
-                @keydown.up.prevent="navigateUp"
-                @keydown.enter="selectCurrent"
-            />
-            <kbd class="esc-hint">ESC</kbd>
-          </div>
-
-          <!-- 搜索结果 -->
-          <div class="search-results">
-            <div v-if="filteredConversations.length === 0" class="no-results">
-              <FolderOpen :size="40" class="no-results-icon" />
-              <p>没有找到相关对话</p>
-            </div>
-
-            <div
-                v-for="(conv, index) in filteredConversations"
-                :key="conv.id"
-                class="result-item"
-                :class="{ active: index === selectedIndex }"
-                @click="selectConversation(conv.id)"
-                @mouseenter="selectedIndex = index"
-            >
-              <MessageSquare :size="18" class="result-icon" />
-              <div class="result-content">
-                <div class="result-title">{{ conv.title }}</div>
-                <div class="result-meta">
-                  <span>{{ conv.messages.length }} 条消息</span>
-                  <span class="dot">·</span>
-                  <span>{{ formatTime(conv.updatedAt) }}</span>
-                </div>
-              </div>
-              <Pin v-if="conv.pinned" :size="14" class="pin-icon" />
-            </div>
-          </div>
-
-          <!-- 底部提示 -->
-          <div class="search-footer">
-            <div class="hint">
-              <kbd>↑↓</kbd>
-              <span>导航</span>
-            </div>
-            <div class="hint">
-              <kbd>↵</kbd>
-              <span>选择</span>
-            </div>
-            <div class="hint">
-              <kbd>ESC</kbd>
-              <span>关闭</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useChatStore } from '@/stores/chat'
-import { useSettingsStore } from '@/stores/settings'
-import { Search, MessageSquare, FolderOpen, Pin } from '@/components/icons'
-import { formatTimestamp } from '@/utils/helpers'
-
-const chatStore = useChatStore()
-const settingsStore = useSettingsStore()
-
-const { conversations } = storeToRefs(chatStore)
-const { showSearchModal: visible } = storeToRefs(settingsStore)
-
-const searchQuery = ref('')
-const selectedIndex = ref(0)
-const inputRef = ref<HTMLInputElement | null>(null)
-
-const filteredConversations = computed(() => {
-  if (!searchQuery.value.trim()) {
-    return conversations.value.slice(0, 10)
-  }
-
-  const query = searchQuery.value.toLowerCase()
-  return conversations.value.filter(conv => {
-    // 搜索标题
-    if (conv.title.toLowerCase().includes(query)) return true
-
-    // 搜索消息内容
-    return conv.messages.some(msg =>
-        msg.content.text?.toLowerCase().includes(query)
-    )
-  }).slice(0, 10)
-})
-
-function formatTime(timestamp: number) {
-  return formatTimestamp(timestamp)
-}
-
-function close() {
-  settingsStore.closeSearchModal()
-  searchQuery.value = ''
-  selectedIndex.value = 0
-}
-
-function navigateDown() {
-  if (selectedIndex.value < filteredConversations.value.length - 1) {
-    selectedIndex.value++
-  }
-}
-
-function navigateUp() {
-  if (selectedIndex.value > 0) {
-    selectedIndex.value--
-  }
-}
-
-function selectCurrent() {
-  const conv = filteredConversations.value[selectedIndex.value]
-  if (conv) {
-    selectConversation(conv.id)
-  }
-}
-
-function selectConversation(id: string) {
-  chatStore.selectConversation(id)
-  close()
-}
-
-// 打开时聚焦输入框
-watch(visible, (val) => {
-  if (val) {
-    nextTick(() => {
-      inputRef.value?.focus()
-    })
-  }
-})
-
-// 搜索内容变化时重置选中索引
-watch(searchQuery, () => {
-  selectedIndex.value = 0
-})
-</script>
-
-<style lang="scss" scoped>
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding-top: 100px;
-  z-index: 1000;
-  backdrop-filter: blur(4px);
-}
-
-.search-modal {
-  width: 560px;
-  max-height: 480px;
-  background: white;
-  border-radius: 16px;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-
-  .dark & {
-    background: #1e1e2e;
-  }
-}
-
-.search-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px 20px;
-  border-bottom: 1px solid #e2e8f0;
-
-  .dark & {
-    border-bottom-color: #2d2d3d;
-  }
-}
-
-.search-icon {
-  color: #9ca3af;
-  flex-shrink: 0;
-}
-
-.search-input {
-  flex: 1;
-  border: none;
-  outline: none;
-  font-size: 16px;
-  color: #1f2937;
-  background: transparent;
-
-  .dark & {
-    color: #f3f4f6;
-  }
-
-  &::placeholder {
-    color: #9ca3af;
-  }
-}
-
-.esc-hint {
-  font-size: 11px;
-  padding: 4px 8px;
-  border-radius: 4px;
-  background: #f3f4f6;
-  color: #6b7280;
-
-  .dark & {
-    background: #374151;
-    color: #9ca3af;
-  }
-}
-
-.search-results {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px;
-}
-
-.no-results {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px;
-  color: #9ca3af;
-
-  .no-results-icon {
-    margin-bottom: 12px;
-    opacity: 0.5;
-  }
-
-  p {
-    margin: 0;
-    font-size: 14px;
-  }
-}
-
-.result-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  border-radius: 10px;
-  cursor: pointer;
-  transition: background 0.15s ease;
-
-  &:hover,
-  &.active {
-    background: #f3f4f6;
-
-    .dark & {
-      background: #2d2d3d;
-    }
-  }
-}
-
-.result-icon {
-  color: #6b7280;
-  flex-shrink: 0;
-}
-
-.result-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.result-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: #1f2937;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  .dark & {
-    color: #f3f4f6;
-  }
-}
-
-.result-meta {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 2px;
-  font-size: 12px;
-  color: #9ca3af;
-
-  .dot {
-    opacity: 0.5;
-  }
-}
-
-.pin-icon {
-  color: #f59e0b;
-  flex-shrink: 0;
-}
-
-.search-footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 24px;
-  padding: 12px 20px;
-  border-top: 1px solid #e2e8f0;
-  background: #f8fafc;
-
-  .dark & {
-    border-top-color: #2d2d3d;
-    background: #181825;
-  }
-}
-
-.hint {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  color: #9ca3af;
-
-  kbd {
-    padding: 2px 6px;
-    border-radius: 4px;
-    background: white;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-
-    .dark & {
-      background: #374151;
-    }
-  }
-}
-
-// 过渡动画
-.modal-enter-active,
-.modal-leave-active {
-  transition: all 0.2s ease;
-
-  .search-modal {
-    transition: all 0.2s ease;
-  }
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-
-  .search-modal {
-    transform: scale(0.95) translateY(-20px);
-    opacity: 0;
-  }
-}
-</style>
\ No newline at end of file
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="visible" class="modal-overlay" @click.self="close">
+        <div class="search-modal">
+          <!-- 搜索输入 -->
+          <div class="search-header">
+            <Search :size="20" class="search-icon" />
+            <input
+              ref="inputRef"
+              v-model="searchQuery"
+              type="text"
+              class="search-input"
+              placeholder="搜索对话..."
+              @keydown.escape="close"
+              @keydown.down.prevent="navigateDown"
+              @keydown.up.prevent="navigateUp"
+              @keydown.enter="selectCurrent"
+            />
+            <kbd class="esc-hint">ESC</kbd>
+          </div>
+
+          <!-- 搜索结果 -->
+          <div class="search-results">
+            <div v-if="filteredConversations.length === 0" class="no-results">
+              <FolderOpen :size="40" class="no-results-icon" />
+              <p>没有找到相关对话</p>
+            </div>
+
+            <div
+              v-for="(conv, index) in filteredConversations"
+              :key="conv.id"
+              class="result-item"
+              :class="{ active: index === selectedIndex }"
+              @click="selectConversation(conv.id)"
+              @mouseenter="selectedIndex = index"
+            >
+              <MessageSquare :size="18" class="result-icon" />
+              <div class="result-content">
+                <div class="result-title">{{ conv.title }}</div>
+                <div class="result-meta">
+                  <span>{{ conv.messages.length }} 条消息</span>
+                  <span class="dot">·</span>
+                  <span>{{ formatTime(conv.updatedAt) }}</span>
+                </div>
+              </div>
+              <Pin v-if="conv.pinned" :size="14" class="pin-icon" />
+            </div>
+          </div>
+
+          <!-- 底部提示 -->
+          <div class="search-footer">
+            <div class="hint">
+              <kbd>↑↓</kbd>
+              <span>导航</span>
+            </div>
+            <div class="hint">
+              <kbd>↵</kbd>
+              <span>选择</span>
+            </div>
+            <div class="hint">
+              <kbd>ESC</kbd>
+              <span>关闭</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from "vue";
+import { storeToRefs } from "pinia";
+import { useChatStore } from "@/stores/chat";
+import { useSettingsStore } from "@/stores/settings";
+import { Search, MessageSquare, FolderOpen, Pin } from "@/components/icons";
+import { formatTimestamp } from "@/utils/helpers";
+
+const chatStore = useChatStore();
+const settingsStore = useSettingsStore();
+
+const { conversations } = storeToRefs(chatStore);
+const { showSearchModal: visible } = storeToRefs(settingsStore);
+
+const searchQuery = ref("");
+const selectedIndex = ref(0);
+const inputRef = ref<HTMLInputElement | null>(null);
+
+const filteredConversations = computed(() => {
+  if (!searchQuery.value.trim()) {
+    return conversations.value.slice(0, 10);
+  }
+
+  const query = searchQuery.value.toLowerCase();
+  return conversations.value
+    .filter((conv) => {
+      // 搜索标题
+      if (conv.title.toLowerCase().includes(query)) return true;
+
+      // 搜索消息内容
+      return conv.messages.some((msg) =>
+        msg.content.text?.toLowerCase().includes(query),
+      );
+    })
+    .slice(0, 10);
+});
+
+function formatTime(timestamp: number) {
+  return formatTimestamp(timestamp);
+}
+
+function close() {
+  settingsStore.closeSearchModal();
+  searchQuery.value = "";
+  selectedIndex.value = 0;
+}
+
+function navigateDown() {
+  if (selectedIndex.value < filteredConversations.value.length - 1) {
+    selectedIndex.value++;
+  }
+}
+
+function navigateUp() {
+  if (selectedIndex.value > 0) {
+    selectedIndex.value--;
+  }
+}
+
+function selectCurrent() {
+  const conv = filteredConversations.value[selectedIndex.value];
+  if (conv) {
+    selectConversation(conv.id);
+  }
+}
+
+function selectConversation(id: string) {
+  chatStore.selectConversation(id);
+  close();
+}
+
+// 打开时聚焦输入框
+watch(visible, (val) => {
+  if (val) {
+    nextTick(() => {
+      inputRef.value?.focus();
+    });
+  }
+});
+
+// 搜索内容变化时重置选中索引
+watch(searchQuery, () => {
+  selectedIndex.value = 0;
+});
+</script>
+
+<style lang="scss" scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 100px;
+  z-index: 1000;
+  backdrop-filter: blur(4px);
+}
+
+.search-modal {
+  width: 560px;
+  max-height: 480px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .dark & {
+    background: #1e1e2e;
+  }
+}
+
+.search-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e2e8f0;
+
+  .dark & {
+    border-bottom-color: #2d2d3d;
+  }
+}
+
+.search-icon {
+  color: #9ca3af;
+  flex-shrink: 0;
+}
+
+.search-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: 16px;
+  color: #1f2937;
+  background: transparent;
+
+  .dark & {
+    color: #f3f4f6;
+  }
+
+  &::placeholder {
+    color: #9ca3af;
+  }
+}
+
+.esc-hint {
+  font-size: 11px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  background: #f3f4f6;
+  color: #6b7280;
+
+  .dark & {
+    background: #374151;
+    color: #9ca3af;
+  }
+}
+
+.search-results {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.no-results {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  color: #9ca3af;
+
+  .no-results-icon {
+    margin-bottom: 12px;
+    opacity: 0.5;
+  }
+
+  p {
+    margin: 0;
+    font-size: 14px;
+  }
+}
+
+.result-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+
+  &:hover,
+  &.active {
+    background: #f3f4f6;
+
+    .dark & {
+      background: #2d2d3d;
+    }
+  }
+}
+
+.result-icon {
+  color: #6b7280;
+  flex-shrink: 0;
+}
+
+.result-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.result-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #1f2937;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .dark & {
+    color: #f3f4f6;
+  }
+}
+
+.result-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 2px;
+  font-size: 12px;
+  color: #9ca3af;
+
+  .dot {
+    opacity: 0.5;
+  }
+}
+
+.pin-icon {
+  color: #f59e0b;
+  flex-shrink: 0;
+}
+
+.search-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  padding: 12px 20px;
+  border-top: 1px solid #e2e8f0;
+  background: #f8fafc;
+
+  .dark & {
+    border-top-color: #2d2d3d;
+    background: #181825;
+  }
+}
+
+.hint {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #9ca3af;
+
+  kbd {
+    padding: 2px 6px;
+    border-radius: 4px;
+    background: white;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+
+    .dark & {
+      background: #374151;
+    }
+  }
+}
+
+// 过渡动画
+.modal-enter-active,
+.modal-leave-active {
+  transition: all 0.2s ease;
+
+  .search-modal {
+    transition: all 0.2s ease;
+  }
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+
+  .search-modal {
+    transform: scale(0.95) translateY(-20px);
+    opacity: 0;
+  }
+}
+</style>
diff --git a/src/components/modals/SettingsModal.vue b/src/components/modals/SettingsModal.vue
index 6fcc986..07e3868 100644
--- a/src/components/modals/SettingsModal.vue
+++ b/src/components/modals/SettingsModal.vue
@@ -1,1060 +1,1060 @@
-<template>
-  <Teleport to="body">
-    <Transition name="modal">
-      <div v-if="visible" class="modal-overlay" @click.self="close">
-        <div class="settings-modal">
-          <!-- 头部 -->
-          <div class="modal-header">
-            <div class="header-title">
-              <Settings :size="22" />
-              <h3>设置</h3>
-            </div>
-            <button class="close-btn" @click="close">
-              <X :size="20" />
-            </button>
-          </div>
-
-          <!-- 标签页 -->
-          <div class="settings-tabs">
-            <button
-              v-for="tab in tabs"
-              :key="tab.id"
-              class="tab-btn"
-              :class="{ active: activeTab === tab.id }"
-              @click="activeTab = tab.id"
-            >
-              <component :is="tab.icon" :size="18" />
-              <span>{{ tab.label }}</span>
-            </button>
-          </div>
-
-          <!-- 内容区域 -->
-          <div class="settings-content">
-            <!-- 外观设置 -->
-            <div v-show="activeTab === 'appearance'" class="settings-section">
-              <div class="section-title">外观</div>
-
-              <!-- 主题 -->
-              <div class="setting-item">
-                <div class="setting-info">
-                  <span class="setting-label">主题</span>
-                  <span class="setting-desc">选择界面主题</span>
-                </div>
-                <div class="theme-options">
-                  <button
-                    v-for="theme in themeOptions"
-                    :key="theme.value"
-                    class="theme-btn"
-                    :class="{ active: settings.theme === theme.value }"
-                    @click="setTheme(theme.value)"
-                  >
-                    <component :is="theme.icon" :size="18" />
-                    <span>{{ theme.label }}</span>
-                  </button>
-                </div>
-              </div>
-
-              <!-- 字体大小 -->
-              <div class="setting-item">
-                <div class="setting-info">
-                  <span class="setting-label">字体大小</span>
-                  <span class="setting-desc">调整界面文字大小</span>
-                </div>
-                <div class="font-size-options">
-                  <button
-                    v-for="size in fontSizeOptions"
-                    :key="size.value"
-                    class="size-btn"
-                    :class="{ active: settings.fontSize === size.value }"
-                    @click="setFontSize(size.value)"
-                  >
-                    {{ size.label }}
-                  </button>
-                </div>
-              </div>
-
-              <!-- 语言 -->
-              <div class="setting-item">
-                <div class="setting-info">
-                  <span class="setting-label">语言</span>
-                  <span class="setting-desc">选择界面语言</span>
-                </div>
-                <FormSelect
-                  :model-value="settings.language"
-                  :options="languageOptions"
-                  @update:model-value="
-                    updateSettings({ language: $event as string })
-                  "
-                />
-              </div>
-
-              <!-- 紧凑模式 -->
-              <div class="setting-item">
-                <div class="setting-info">
-                  <span class="setting-label">紧凑模式</span>
-                  <span class="setting-desc">减少界面元素间距</span>
-                </div>
-                <FormSwitch
-                  :model-value="settings.compactMode"
-                  @update:model-value="updateSettings({ compactMode: $event })"
-                />
-              </div>
-
-              <!-- 显示时间戳 -->
-              <div class="setting-item">
-                <div class="setting-info">
-                  <span class="setting-label">显示时间戳</span>
-                  <span class="setting-desc">在消息旁显示发送时间</span>
-                </div>
-                <FormSwitch
-                  :model-value="settings.showTimestamp"
-                  @update:model-value="
-                    updateSettings({ showTimestamp: $event })
-                  "
-                />
-              </div>
-            </div>
-
-            <!-- 对话设置 -->
-            <div v-show="activeTab === 'chat'" class="settings-section">
-              <div class="section-title">对话</div>
-
-              <!-- 发送方式 -->
-              <div class="setting-item">
-                <div class="setting-info">
-                  <span class="setting-label">Enter 发送</span>
-                  <span class="setting-desc"
-                    >按 Enter 直接发送消息（关闭后需要 Ctrl+Enter）</span
-                  >
-                </div>
-                <FormSwitch
-                  :model-value="settings.sendOnEnter"
-                  @update:model-value="updateSettings({ sendOnEnter: $event })"
-                />
-              </div>
-
-              <!-- 默认模型 -->
-              <div class="setting-item">
-                <div class="setting-info">
-                  <span class="setting-label">默认模型</span>
-                  <span class="setting-desc">新对话使用的默认 AI 模型</span>
-                </div>
-                <FormSelect
-                  :model-value="defaultModel"
-                  :options="modelOptions"
-                  @update:model-value="
-                    defaultModel = $event as string;
-                    updateLocalStorage('defaultModel', $event as string);
-                  "
-                />
-              </div>
-
-              <!-- 温度 -->
-              <div class="setting-item vertical">
-                <div class="setting-info">
-                  <span class="setting-label">默认温度</span>
-                  <span class="setting-desc"
-                    >控制回复的随机性（0 = 精确，1 = 创造性）</span
-                  >
-                </div>
-                <div class="slider-wrapper">
-                  <FormSlider
-                    :model-value="settings.defaultTemperature"
-                    :min="0"
-                    :max="1"
-                    :step="0.1"
-                    @update:model-value="
-                      updateSettings({ defaultTemperature: $event })
-                    "
-                  />
-                  <span class="slider-value">{{
-                    settings.defaultTemperature.toFixed(1)
-                  }}</span>
-                </div>
-              </div>
-
-              <!-- 最大 Token -->
-              <div class="setting-item vertical">
-                <div class="setting-info">
-                  <span class="setting-label">最大回复长度</span>
-                  <span class="setting-desc">单次回复的最大 Token 数量</span>
-                </div>
-                <div class="slider-wrapper">
-                  <FormSlider
-                    :model-value="settings.defaultMaxTokens"
-                    :min="256"
-                    :max="8192"
-                    :step="256"
-                    @update:model-value="
-                      updateSettings({ defaultMaxTokens: $event })
-                    "
-                  />
-                  <span class="slider-value">{{
-                    settings.defaultMaxTokens
-                  }}</span>
-                </div>
-              </div>
-
-              <!-- 系统提示词 -->
-              <div class="setting-item vertical">
-                <div class="setting-info">
-                  <span class="setting-label">默认系统提示词</span>
-                  <span class="setting-desc">设定 AI 助手的角色和行为</span>
-                </div>
-                <textarea
-                  class="prompt-textarea"
-                  :value="settings.defaultSystemPrompt"
-                  rows="4"
-                  placeholder="输入系统提示词..."
-                  @input="
-                    updateSettings({
-                      defaultSystemPrompt: (
-                        $event.target as HTMLTextAreaElement
-                      ).value,
-                    })
-                  "
-                />
-              </div>
-            </div>
-
-            <!-- 功能设置 -->
-            <div v-show="activeTab === 'features'" class="settings-section">
-              <div class="section-title">功能</div>
-
-              <!-- 声音 -->
-              <div class="setting-item">
-                <div class="setting-info">
-                  <span class="setting-label">声音提示</span>
-                  <span class="setting-desc">收到消息时播放提示音</span>
-                </div>
-                <FormSwitch
-                  :model-value="settings.enableSound"
-                  @update:model-value="updateSettings({ enableSound: $event })"
-                />
-              </div>
-
-              <!-- 通知 -->
-              <div class="setting-item">
-                <div class="setting-info">
-                  <span class="setting-label">桌面通知</span>
-                  <span class="setting-desc">在后台时显示桌面通知</span>
-                </div>
-                <FormSwitch
-                  :model-value="settings.enableNotification"
-                  @update:model-value="
-                    updateSettings({ enableNotification: $event })
-                  "
-                />
-              </div>
-
-              <!-- 自动保存 -->
-              <div class="setting-item">
-                <div class="setting-info">
-                  <span class="setting-label">自动保存间隔</span>
-                  <span class="setting-desc">对话自动保存的时间间隔（秒）</span>
-                </div>
-                <FormSelect
-                  :model-value="settings.autoSaveInterval"
-                  :options="autoSaveOptions"
-                  @update:model-value="
-                    updateSettings({ autoSaveInterval: $event as number })
-                  "
-                />
-              </div>
-            </div>
-
-            <!-- 隐私设置 -->
-            <div v-show="activeTab === 'privacy'" class="settings-section">
-              <div class="section-title">隐私</div>
-
-              <!-- 保存历史 -->
-              <div class="setting-item">
-                <div class="setting-info">
-                  <span class="setting-label">保存对话历史</span>
-                  <span class="setting-desc">在本地存储对话记录</span>
-                </div>
-                <FormSwitch
-                  :model-value="settings.saveHistory"
-                  @update:model-value="updateSettings({ saveHistory: $event })"
-                />
-              </div>
-
-              <!-- 分析数据 -->
-              <div class="setting-item">
-                <div class="setting-info">
-                  <span class="setting-label">分享使用数据</span>
-                  <span class="setting-desc">帮助我们改进产品（匿名）</span>
-                </div>
-                <FormSwitch
-                  :model-value="settings.shareAnalytics"
-                  @update:model-value="
-                    updateSettings({ shareAnalytics: $event })
-                  "
-                />
-              </div>
-
-              <!-- 数据管理 -->
-              <div class="section-title" style="margin-top: 24px">数据管理</div>
-
-              <div class="data-actions">
-                <button class="data-btn" @click="handleExportSettings">
-                  <Download :size="18" />
-                  <span>导出设置</span>
-                </button>
-                <button class="data-btn" @click="handleImportSettings">
-                  <Upload :size="18" />
-                  <span>导入设置</span>
-                </button>
-                <button class="data-btn danger" @click="handleClearData">
-                  <Trash2 :size="18" />
-                  <span>清除所有数据</span>
-                </button>
-              </div>
-
-              <input
-                ref="importInputRef"
-                type="file"
-                accept=".json"
-                hidden
-                @change="handleImportFile"
-              />
-            </div>
-
-            <!-- 关于 -->
-            <div v-show="activeTab === 'about'" class="settings-section">
-              <div class="section-title">关于</div>
-
-              <div class="about-content">
-                <div class="app-info">
-                  <div class="app-logo">
-                    <Bot :size="40" />
-                  </div>
-                  <h4>Kexue AI Chat</h4>
-                  <p class="version">版本 1.0.0</p>
-                  <p class="desc">企业级 AI 对话聊天界面</p>
-                </div>
-
-                <div class="about-links">
-                  <a href="#" class="about-link">
-                    <FileText :size="18" />
-                    <span>使用文档</span>
-                    <ExternalLink :size="14" />
-                  </a>
-                  <a href="#" class="about-link">
-                    <MessageSquare :size="18" />
-                    <span>反馈建议</span>
-                    <ExternalLink :size="14" />
-                  </a>
-                  <a href="#" class="about-link">
-                    <Shield :size="18" />
-                    <span>隐私政策</span>
-                    <ExternalLink :size="14" />
-                  </a>
-                </div>
-
-                <div class="copyright">
-                  © 2024 Your Company. All rights reserved.
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 底部 -->
-          <div class="modal-footer">
-            <button class="reset-btn" @click="handleResetSettings">
-              <RotateCcw :size="16" />
-              <span>重置为默认</span>
-            </button>
-            <button class="done-btn" @click="close">完成</button>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
-import { storeToRefs } from "pinia";
-import { useSettingsStore } from "@/stores/settings";
-import FormSwitch from "@/components/ui/FormSwitch.vue";
-import FormSlider from "@/components/ui/FormSlider.vue";
-import FormSelect from "@/components/ui/FormSelect.vue";
-import {
-  Settings,
-  X,
-  Sun,
-  Moon,
-  Monitor,
-  Palette,
-  MessageSquare,
-  Zap,
-  Shield,
-  Info,
-  Download,
-  Upload,
-  Trash2,
-  Bot,
-  FileText,
-  ExternalLink,
-  RotateCcw,
-} from "@/components/icons";
-import type { AppSettings } from "@/types/chat";
-import { chatApi } from "@/services/api.ts";
-
-const settingsStore = useSettingsStore();
-
-const { showSettingsModal: visible, settings } = storeToRefs(settingsStore);
-const availableModels: any = ref([]);
-const defaultModel: any = ref(localStorage.getItem("defaultModel"));
-
-onMounted(() => {
-  chatApi.getModels().then((res: any) => {
-    availableModels.value = res;
-    if (!defaultModel.value) defaultModel.value = res[0].name;
-  });
-});
-
-const activeTab = ref("appearance");
-const importInputRef = ref<HTMLInputElement | null>(null);
-
-// 标签页配置
-const tabs = [
-  { id: "appearance", label: "外观", icon: Palette },
-  { id: "chat", label: "对话", icon: MessageSquare },
-  { id: "features", label: "功能", icon: Zap },
-  { id: "privacy", label: "隐私", icon: Shield },
-  { id: "about", label: "关于", icon: Info },
-];
-
-// 主题选项
-const themeOptions = [
-  { value: "light" as const, label: "浅色", icon: Sun },
-  { value: "dark" as const, label: "深色", icon: Moon },
-  { value: "system" as const, label: "系统", icon: Monitor },
-];
-
-// 字体大小选项
-const fontSizeOptions = [
-  { value: "small" as const, label: "小" },
-  { value: "medium" as const, label: "中" },
-  { value: "large" as const, label: "大" },
-];
-
-// 语言选项
-const languageOptions = [
-  { value: "zh-CN", label: "简体中文" },
-  { value: "zh-TW", label: "繁體中文" },
-  { value: "en-US", label: "English" },
-  { value: "ja-JP", label: "日本語" },
-];
-
-// 模型选项 - 添加安全检查
-const modelOptions = computed(() => {
-  if (!availableModels.value || !Array.isArray(availableModels.value)) {
-    return [{ value: "gpt-4", label: "GPT-4", description: "默认模型" }];
-  }
-  return availableModels.value?.map((model: any) => ({
-    value: model.id,
-    label: model.name,
-    description: model.description,
-  }));
-});
-
-// 自动保存选项
-const autoSaveOptions = [
-  { value: 10, label: "10 秒" },
-  { value: 30, label: "30 秒" },
-  { value: 60, label: "1 分钟" },
-  { value: 300, label: "5 分钟" },
-];
-
-function updateLocalStorage(name: string, data: string) {
-  localStorage.setItem(name, data);
-}
-
-function close() {
-  settingsStore.closeSettingsModal();
-}
-
-function setTheme(theme: AppSettings["theme"]) {
-  settingsStore.setTheme(theme);
-}
-
-function setFontSize(size: AppSettings["fontSize"]) {
-  settingsStore.setFontSize(size);
-}
-
-function updateSettings(updates: Partial<AppSettings>) {
-  settingsStore.updateSettings(updates);
-}
-
-function handleResetSettings() {
-  if (confirm("确定要将所有设置重置为默认值吗？")) {
-    settingsStore.resetSettings();
-  }
-}
-
-function handleExportSettings() {
-  const json = settingsStore.exportSettings();
-  const blob = new Blob([json], { type: "application/json" });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = "chat-settings.json";
-  a.click();
-  URL.revokeObjectURL(url);
-}
-
-function handleImportSettings() {
-  importInputRef.value?.click();
-}
-
-function handleImportFile(event: Event) {
-  const file = (event.target as HTMLInputElement).files?.[0];
-  if (!file) return;
-
-  const reader = new FileReader();
-  reader.onload = (e) => {
-    const json = e.target?.result as string;
-    if (settingsStore.importSettings(json)) {
-      alert("设置导入成功！");
-    } else {
-      alert("设置导入失败，请检查文件格式。");
-    }
-  };
-  reader.readAsText(file);
-}
-
-function handleClearData() {
-  if (
-    confirm(
-      "确定要清除所有数据吗？这将删除所有对话历史和设置。此操作不可恢复！",
-    )
-  ) {
-    localStorage.clear();
-    location.reload();
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  backdrop-filter: blur(4px);
-}
-
-.settings-modal {
-  width: 640px;
-  max-width: 90vw;
-  max-height: 85vh;
-  background: white;
-  border-radius: 20px;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  .dark & {
-    background: #1e1e2e;
-  }
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px;
-  border-bottom: 1px solid #e2e8f0;
-
-  .dark & {
-    border-bottom-color: #2d2d3d;
-  }
-}
-
-.header-title {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-
-  svg {
-    color: #3b82f6;
-  }
-
-  h3 {
-    margin: 0;
-    font-size: 20px;
-    font-weight: 600;
-    color: #1f2937;
-
-    .dark & {
-      color: #f3f4f6;
-    }
-  }
-}
-
-.close-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border: none;
-  border-radius: 10px;
-  background: transparent;
-  color: #6b7280;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background: #f3f4f6;
-    color: #1f2937;
-
-    .dark & {
-      background: #374151;
-      color: #f3f4f6;
-    }
-  }
-}
-
-.settings-tabs {
-  display: flex;
-  gap: 4px;
-  padding: 12px 24px;
-  border-bottom: 1px solid #e2e8f0;
-  overflow-x: auto;
-
-  .dark & {
-    border-bottom-color: #2d2d3d;
-  }
-}
-
-.tab-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
-  border: none;
-  border-radius: 10px;
-  background: transparent;
-  color: #6b7280;
-  font-size: 14px;
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background: #f3f4f6;
-    color: #374151;
-
-    .dark & {
-      background: #2d2d3d;
-      color: #e5e7eb;
-    }
-  }
-
-  &.active {
-    background: rgba(59, 130, 246, 0.1);
-    color: #3b82f6;
-  }
-}
-
-.settings-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px 24px;
-}
-
-.settings-section {
-  animation: fadeIn 0.2s ease;
-}
-
-.section-title {
-  font-size: 12px;
-  font-weight: 600;
-  color: #9ca3af;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin-bottom: 16px;
-}
-
-.setting-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 0;
-  border-bottom: 1px solid #f3f4f6;
-
-  .dark & {
-    border-bottom-color: #2d2d3d;
-  }
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  &.vertical {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 12px;
-  }
-}
-
-.setting-info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.setting-label {
-  font-size: 14px;
-  font-weight: 500;
-  color: #1f2937;
-
-  .dark & {
-    color: #f3f4f6;
-  }
-}
-
-.setting-desc {
-  font-size: 12px;
-  color: #9ca3af;
-}
-
-.theme-options {
-  display: flex;
-  gap: 8px;
-}
-
-.theme-btn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 14px;
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  background: white;
-  color: #6b7280;
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  .dark & {
-    background: #2d2d3d;
-    border-color: #374151;
-    color: #9ca3af;
-  }
-
-  &:hover {
-    border-color: #3b82f6;
-    color: #3b82f6;
-  }
-
-  &.active {
-    background: rgba(59, 130, 246, 0.1);
-    border-color: #3b82f6;
-    color: #3b82f6;
-  }
-}
-
-.font-size-options {
-  display: flex;
-  gap: 4px;
-  background: #f3f4f6;
-  padding: 4px;
-  border-radius: 10px;
-
-  .dark & {
-    background: #2d2d3d;
-  }
-}
-
-.size-btn {
-  padding: 6px 16px;
-  border: none;
-  border-radius: 8px;
-  background: transparent;
-  color: #6b7280;
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    color: #374151;
-
-    .dark & {
-      color: #e5e7eb;
-    }
-  }
-
-  &.active {
-    background: white;
-    color: #3b82f6;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-
-    .dark & {
-      background: #374151;
-    }
-  }
-}
-
-.slider-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-
-  .form-slider {
-    flex: 1;
-  }
-}
-
-.slider-value {
-  min-width: 48px;
-  text-align: right;
-  font-size: 14px;
-  font-weight: 500;
-  color: #3b82f6;
-}
-
-.prompt-textarea {
-  width: 100%;
-  padding: 12px 14px;
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  background: white;
-  font-family: inherit;
-  font-size: 14px;
-  color: #1f2937;
-  resize: vertical;
-  min-height: 100px;
-
-  .dark & {
-    background: #2d2d3d;
-    border-color: #374151;
-    color: #f3f4f6;
-  }
-
-  &:focus {
-    outline: none;
-    border-color: #3b82f6;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-  }
-
-  &::placeholder {
-    color: #9ca3af;
-  }
-}
-
-.data-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-}
-
-.data-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 20px;
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  background: white;
-  color: #374151;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  .dark & {
-    background: #2d2d3d;
-    border-color: #374151;
-    color: #e5e7eb;
-  }
-
-  &:hover {
-    border-color: #3b82f6;
-    color: #3b82f6;
-  }
-
-  &.danger {
-    border-color: #fecaca;
-    color: #ef4444;
-
-    &:hover {
-      background: rgba(239, 68, 68, 0.1);
-      border-color: #ef4444;
-    }
-  }
-}
-
-.about-content {
-  text-align: center;
-  padding: 20px 0;
-}
-
-.app-info {
-  margin-bottom: 32px;
-
-  .app-logo {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 80px;
-    height: 80px;
-    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
-    border-radius: 20px;
-    color: white;
-    margin-bottom: 16px;
-  }
-
-  h4 {
-    margin: 0 0 4px;
-    font-size: 20px;
-    font-weight: 600;
-    color: #1f2937;
-
-    .dark & {
-      color: #f3f4f6;
-    }
-  }
-
-  .version {
-    margin: 0 0 8px;
-    font-size: 14px;
-    color: #3b82f6;
-  }
-
-  .desc {
-    margin: 0;
-    font-size: 14px;
-    color: #6b7280;
-  }
-}
-
-.about-links {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  max-width: 280px;
-  margin: 0 auto 32px;
-}
-
-.about-link {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  color: #374151;
-  text-decoration: none;
-  transition: all 0.2s ease;
-
-  .dark & {
-    border-color: #374151;
-    color: #e5e7eb;
-  }
-
-  span {
-    flex: 1;
-    text-align: left;
-  }
-
-  &:hover {
-    border-color: #3b82f6;
-    color: #3b82f6;
-  }
-}
-
-.copyright {
-  font-size: 12px;
-  color: #9ca3af;
-}
-
-.modal-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 24px;
-  border-top: 1px solid #e2e8f0;
-
-  .dark & {
-    border-top-color: #2d2d3d;
-  }
-}
-
-.reset-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  background: transparent;
-  color: #6b7280;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  .dark & {
-    border-color: #374151;
-  }
-
-  &:hover {
-    border-color: #f59e0b;
-    color: #f59e0b;
-  }
-}
-
-.done-btn {
-  padding: 10px 24px;
-  border: none;
-  border-radius: 10px;
-  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-  color: white;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
-  }
-}
-
-// 动画
-.modal-enter-active,
-.modal-leave-active {
-  transition: all 0.25s ease;
-
-  .settings-modal {
-    transition: all 0.25s ease;
-  }
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-
-  .settings-modal {
-    transform: scale(0.9);
-    opacity: 0;
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-</style>
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="visible" class="modal-overlay" @click.self="close">
+        <div class="settings-modal">
+          <!-- 头部 -->
+          <div class="modal-header">
+            <div class="header-title">
+              <Settings :size="22" />
+              <h3>设置</h3>
+            </div>
+            <button class="close-btn" @click="close">
+              <X :size="20" />
+            </button>
+          </div>
+
+          <!-- 标签页 -->
+          <div class="settings-tabs">
+            <button
+              v-for="tab in tabs"
+              :key="tab.id"
+              class="tab-btn"
+              :class="{ active: activeTab === tab.id }"
+              @click="activeTab = tab.id"
+            >
+              <component :is="tab.icon" :size="18" />
+              <span>{{ tab.label }}</span>
+            </button>
+          </div>
+
+          <!-- 内容区域 -->
+          <div class="settings-content">
+            <!-- 外观设置 -->
+            <div v-show="activeTab === 'appearance'" class="settings-section">
+              <div class="section-title">外观</div>
+
+              <!-- 主题 -->
+              <div class="setting-item">
+                <div class="setting-info">
+                  <span class="setting-label">主题</span>
+                  <span class="setting-desc">选择界面主题</span>
+                </div>
+                <div class="theme-options">
+                  <button
+                    v-for="theme in themeOptions"
+                    :key="theme.value"
+                    class="theme-btn"
+                    :class="{ active: settings.theme === theme.value }"
+                    @click="setTheme(theme.value)"
+                  >
+                    <component :is="theme.icon" :size="18" />
+                    <span>{{ theme.label }}</span>
+                  </button>
+                </div>
+              </div>
+
+              <!-- 字体大小 -->
+              <div class="setting-item">
+                <div class="setting-info">
+                  <span class="setting-label">字体大小</span>
+                  <span class="setting-desc">调整界面文字大小</span>
+                </div>
+                <div class="font-size-options">
+                  <button
+                    v-for="size in fontSizeOptions"
+                    :key="size.value"
+                    class="size-btn"
+                    :class="{ active: settings.fontSize === size.value }"
+                    @click="setFontSize(size.value)"
+                  >
+                    {{ size.label }}
+                  </button>
+                </div>
+              </div>
+
+              <!-- 语言 -->
+              <div class="setting-item">
+                <div class="setting-info">
+                  <span class="setting-label">语言</span>
+                  <span class="setting-desc">选择界面语言</span>
+                </div>
+                <FormSelect
+                  :model-value="settings.language"
+                  :options="languageOptions"
+                  @update:model-value="
+                    updateSettings({ language: $event as string })
+                  "
+                />
+              </div>
+
+              <!-- 紧凑模式 -->
+              <div class="setting-item">
+                <div class="setting-info">
+                  <span class="setting-label">紧凑模式</span>
+                  <span class="setting-desc">减少界面元素间距</span>
+                </div>
+                <FormSwitch
+                  :model-value="settings.compactMode"
+                  @update:model-value="updateSettings({ compactMode: $event })"
+                />
+              </div>
+
+              <!-- 显示时间戳 -->
+              <div class="setting-item">
+                <div class="setting-info">
+                  <span class="setting-label">显示时间戳</span>
+                  <span class="setting-desc">在消息旁显示发送时间</span>
+                </div>
+                <FormSwitch
+                  :model-value="settings.showTimestamp"
+                  @update:model-value="
+                    updateSettings({ showTimestamp: $event })
+                  "
+                />
+              </div>
+            </div>
+
+            <!-- 对话设置 -->
+            <div v-show="activeTab === 'chat'" class="settings-section">
+              <div class="section-title">对话</div>
+
+              <!-- 发送方式 -->
+              <div class="setting-item">
+                <div class="setting-info">
+                  <span class="setting-label">Enter 发送</span>
+                  <span class="setting-desc"
+                    >按 Enter 直接发送消息（关闭后需要 Ctrl+Enter）</span
+                  >
+                </div>
+                <FormSwitch
+                  :model-value="settings.sendOnEnter"
+                  @update:model-value="updateSettings({ sendOnEnter: $event })"
+                />
+              </div>
+
+              <!-- 默认模型 -->
+              <div class="setting-item">
+                <div class="setting-info">
+                  <span class="setting-label">默认模型</span>
+                  <span class="setting-desc">新对话使用的默认 AI 模型</span>
+                </div>
+                <FormSelect
+                  :model-value="defaultModel"
+                  :options="modelOptions"
+                  @update:model-value="
+                    defaultModel = $event as string;
+                    updateLocalStorage('defaultModel', $event as string);
+                  "
+                />
+              </div>
+
+              <!-- 温度 -->
+              <div class="setting-item vertical">
+                <div class="setting-info">
+                  <span class="setting-label">默认温度</span>
+                  <span class="setting-desc"
+                    >控制回复的随机性（0 = 精确，1 = 创造性）</span
+                  >
+                </div>
+                <div class="slider-wrapper">
+                  <FormSlider
+                    :model-value="settings.defaultTemperature"
+                    :min="0"
+                    :max="1"
+                    :step="0.1"
+                    @update:model-value="
+                      updateSettings({ defaultTemperature: $event })
+                    "
+                  />
+                  <span class="slider-value">{{
+                    settings.defaultTemperature.toFixed(1)
+                  }}</span>
+                </div>
+              </div>
+
+              <!-- 最大 Token -->
+              <div class="setting-item vertical">
+                <div class="setting-info">
+                  <span class="setting-label">最大回复长度</span>
+                  <span class="setting-desc">单次回复的最大 Token 数量</span>
+                </div>
+                <div class="slider-wrapper">
+                  <FormSlider
+                    :model-value="settings.defaultMaxTokens"
+                    :min="256"
+                    :max="8192"
+                    :step="256"
+                    @update:model-value="
+                      updateSettings({ defaultMaxTokens: $event })
+                    "
+                  />
+                  <span class="slider-value">{{
+                    settings.defaultMaxTokens
+                  }}</span>
+                </div>
+              </div>
+
+              <!-- 系统提示词 -->
+              <div class="setting-item vertical">
+                <div class="setting-info">
+                  <span class="setting-label">默认系统提示词</span>
+                  <span class="setting-desc">设定 AI 助手的角色和行为</span>
+                </div>
+                <textarea
+                  class="prompt-textarea"
+                  :value="settings.defaultSystemPrompt"
+                  rows="4"
+                  placeholder="输入系统提示词..."
+                  @input="
+                    updateSettings({
+                      defaultSystemPrompt: (
+                        $event.target as HTMLTextAreaElement
+                      ).value,
+                    })
+                  "
+                />
+              </div>
+            </div>
+
+            <!-- 功能设置 -->
+            <div v-show="activeTab === 'features'" class="settings-section">
+              <div class="section-title">功能</div>
+
+              <!-- 声音 -->
+              <div class="setting-item">
+                <div class="setting-info">
+                  <span class="setting-label">声音提示</span>
+                  <span class="setting-desc">收到消息时播放提示音</span>
+                </div>
+                <FormSwitch
+                  :model-value="settings.enableSound"
+                  @update:model-value="updateSettings({ enableSound: $event })"
+                />
+              </div>
+
+              <!-- 通知 -->
+              <div class="setting-item">
+                <div class="setting-info">
+                  <span class="setting-label">桌面通知</span>
+                  <span class="setting-desc">在后台时显示桌面通知</span>
+                </div>
+                <FormSwitch
+                  :model-value="settings.enableNotification"
+                  @update:model-value="
+                    updateSettings({ enableNotification: $event })
+                  "
+                />
+              </div>
+
+              <!-- 自动保存 -->
+              <div class="setting-item">
+                <div class="setting-info">
+                  <span class="setting-label">自动保存间隔</span>
+                  <span class="setting-desc">对话自动保存的时间间隔（秒）</span>
+                </div>
+                <FormSelect
+                  :model-value="settings.autoSaveInterval"
+                  :options="autoSaveOptions"
+                  @update:model-value="
+                    updateSettings({ autoSaveInterval: $event as number })
+                  "
+                />
+              </div>
+            </div>
+
+            <!-- 隐私设置 -->
+            <div v-show="activeTab === 'privacy'" class="settings-section">
+              <div class="section-title">隐私</div>
+
+              <!-- 保存历史 -->
+              <div class="setting-item">
+                <div class="setting-info">
+                  <span class="setting-label">保存对话历史</span>
+                  <span class="setting-desc">在本地存储对话记录</span>
+                </div>
+                <FormSwitch
+                  :model-value="settings.saveHistory"
+                  @update:model-value="updateSettings({ saveHistory: $event })"
+                />
+              </div>
+
+              <!-- 分析数据 -->
+              <div class="setting-item">
+                <div class="setting-info">
+                  <span class="setting-label">分享使用数据</span>
+                  <span class="setting-desc">帮助我们改进产品（匿名）</span>
+                </div>
+                <FormSwitch
+                  :model-value="settings.shareAnalytics"
+                  @update:model-value="
+                    updateSettings({ shareAnalytics: $event })
+                  "
+                />
+              </div>
+
+              <!-- 数据管理 -->
+              <div class="section-title" style="margin-top: 24px">数据管理</div>
+
+              <div class="data-actions">
+                <button class="data-btn" @click="handleExportSettings">
+                  <Download :size="18" />
+                  <span>导出设置</span>
+                </button>
+                <button class="data-btn" @click="handleImportSettings">
+                  <Upload :size="18" />
+                  <span>导入设置</span>
+                </button>
+                <button class="data-btn danger" @click="handleClearData">
+                  <Trash2 :size="18" />
+                  <span>清除所有数据</span>
+                </button>
+              </div>
+
+              <input
+                ref="importInputRef"
+                type="file"
+                accept=".json"
+                hidden
+                @change="handleImportFile"
+              />
+            </div>
+
+            <!-- 关于 -->
+            <div v-show="activeTab === 'about'" class="settings-section">
+              <div class="section-title">关于</div>
+
+              <div class="about-content">
+                <div class="app-info">
+                  <div class="app-logo">
+                    <Bot :size="40" />
+                  </div>
+                  <h4>Kexue AI Chat</h4>
+                  <p class="version">版本 1.0.0</p>
+                  <p class="desc">企业级 AI 对话聊天界面</p>
+                </div>
+
+                <div class="about-links">
+                  <a href="#" class="about-link">
+                    <FileText :size="18" />
+                    <span>使用文档</span>
+                    <ExternalLink :size="14" />
+                  </a>
+                  <a href="#" class="about-link">
+                    <MessageSquare :size="18" />
+                    <span>反馈建议</span>
+                    <ExternalLink :size="14" />
+                  </a>
+                  <a href="#" class="about-link">
+                    <Shield :size="18" />
+                    <span>隐私政策</span>
+                    <ExternalLink :size="14" />
+                  </a>
+                </div>
+
+                <div class="copyright">
+                  © 2024 Your Company. All rights reserved.
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 底部 -->
+          <div class="modal-footer">
+            <button class="reset-btn" @click="handleResetSettings">
+              <RotateCcw :size="16" />
+              <span>重置为默认</span>
+            </button>
+            <button class="done-btn" @click="close">完成</button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+import { storeToRefs } from "pinia";
+import { useSettingsStore } from "@/stores/settings";
+import FormSwitch from "@/components/ui/FormSwitch.vue";
+import FormSlider from "@/components/ui/FormSlider.vue";
+import FormSelect from "@/components/ui/FormSelect.vue";
+import {
+  Settings,
+  X,
+  Sun,
+  Moon,
+  Monitor,
+  Palette,
+  MessageSquare,
+  Zap,
+  Shield,
+  Info,
+  Download,
+  Upload,
+  Trash2,
+  Bot,
+  FileText,
+  ExternalLink,
+  RotateCcw,
+} from "@/components/icons";
+import type { AppSettings } from "@/types/chat";
+import { chatApi } from "@/services/api.ts";
+
+const settingsStore = useSettingsStore();
+
+const { showSettingsModal: visible, settings } = storeToRefs(settingsStore);
+const availableModels: any = ref([]);
+const defaultModel: any = ref(localStorage.getItem("defaultModel"));
+
+onMounted(() => {
+  chatApi.getModels().then((res: any) => {
+    availableModels.value = res;
+    if (!defaultModel.value) defaultModel.value = res[0].name;
+  });
+});
+
+const activeTab = ref("appearance");
+const importInputRef = ref<HTMLInputElement | null>(null);
+
+// 标签页配置
+const tabs = [
+  { id: "appearance", label: "外观", icon: Palette },
+  { id: "chat", label: "对话", icon: MessageSquare },
+  { id: "features", label: "功能", icon: Zap },
+  { id: "privacy", label: "隐私", icon: Shield },
+  { id: "about", label: "关于", icon: Info },
+];
+
+// 主题选项
+const themeOptions = [
+  { value: "light" as const, label: "浅色", icon: Sun },
+  { value: "dark" as const, label: "深色", icon: Moon },
+  { value: "system" as const, label: "系统", icon: Monitor },
+];
+
+// 字体大小选项
+const fontSizeOptions = [
+  { value: "small" as const, label: "小" },
+  { value: "medium" as const, label: "中" },
+  { value: "large" as const, label: "大" },
+];
+
+// 语言选项
+const languageOptions = [
+  { value: "zh-CN", label: "简体中文" },
+  { value: "zh-TW", label: "繁體中文" },
+  { value: "en-US", label: "English" },
+  { value: "ja-JP", label: "日本語" },
+];
+
+// 模型选项 - 添加安全检查
+const modelOptions = computed(() => {
+  if (!availableModels.value || !Array.isArray(availableModels.value)) {
+    return [{ value: "gpt-4", label: "GPT-4", description: "默认模型" }];
+  }
+  return availableModels.value?.map((model: any) => ({
+    value: model.id,
+    label: model.name,
+    description: model.description,
+  }));
+});
+
+// 自动保存选项
+const autoSaveOptions = [
+  { value: 10, label: "10 秒" },
+  { value: 30, label: "30 秒" },
+  { value: 60, label: "1 分钟" },
+  { value: 300, label: "5 分钟" },
+];
+
+function updateLocalStorage(name: string, data: string) {
+  localStorage.setItem(name, data);
+}
+
+function close() {
+  settingsStore.closeSettingsModal();
+}
+
+function setTheme(theme: AppSettings["theme"]) {
+  settingsStore.setTheme(theme);
+}
+
+function setFontSize(size: AppSettings["fontSize"]) {
+  settingsStore.setFontSize(size);
+}
+
+function updateSettings(updates: Partial<AppSettings>) {
+  settingsStore.updateSettings(updates);
+}
+
+function handleResetSettings() {
+  if (confirm("确定要将所有设置重置为默认值吗？")) {
+    settingsStore.resetSettings();
+  }
+}
+
+function handleExportSettings() {
+  const json = settingsStore.exportSettings();
+  const blob = new Blob([json], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "chat-settings.json";
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function handleImportSettings() {
+  importInputRef.value?.click();
+}
+
+function handleImportFile(event: Event) {
+  const file = (event.target as HTMLInputElement).files?.[0];
+  if (!file) return;
+
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    const json = e.target?.result as string;
+    if (settingsStore.importSettings(json)) {
+      alert("设置导入成功！");
+    } else {
+      alert("设置导入失败，请检查文件格式。");
+    }
+  };
+  reader.readAsText(file);
+}
+
+function handleClearData() {
+  if (
+    confirm(
+      "确定要清除所有数据吗？这将删除所有对话历史和设置。此操作不可恢复！",
+    )
+  ) {
+    localStorage.clear();
+    location.reload();
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  backdrop-filter: blur(4px);
+}
+
+.settings-modal {
+  width: 640px;
+  max-width: 90vw;
+  max-height: 85vh;
+  background: white;
+  border-radius: 20px;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .dark & {
+    background: #1e1e2e;
+  }
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid #e2e8f0;
+
+  .dark & {
+    border-bottom-color: #2d2d3d;
+  }
+}
+
+.header-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  svg {
+    color: #3b82f6;
+  }
+
+  h3 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: #1f2937;
+
+    .dark & {
+      color: #f3f4f6;
+    }
+  }
+}
+
+.close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: #f3f4f6;
+    color: #1f2937;
+
+    .dark & {
+      background: #374151;
+      color: #f3f4f6;
+    }
+  }
+}
+
+.settings-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 12px 24px;
+  border-bottom: 1px solid #e2e8f0;
+  overflow-x: auto;
+
+  .dark & {
+    border-bottom-color: #2d2d3d;
+  }
+}
+
+.tab-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  color: #6b7280;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: #f3f4f6;
+    color: #374151;
+
+    .dark & {
+      background: #2d2d3d;
+      color: #e5e7eb;
+    }
+  }
+
+  &.active {
+    background: rgba(59, 130, 246, 0.1);
+    color: #3b82f6;
+  }
+}
+
+.settings-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px;
+}
+
+.settings-section {
+  animation: fadeIn 0.2s ease;
+}
+
+.section-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #9ca3af;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 16px;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 0;
+  border-bottom: 1px solid #f3f4f6;
+
+  .dark & {
+    border-bottom-color: #2d2d3d;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &.vertical {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+}
+
+.setting-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.setting-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #1f2937;
+
+  .dark & {
+    color: #f3f4f6;
+  }
+}
+
+.setting-desc {
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+.theme-options {
+  display: flex;
+  gap: 8px;
+}
+
+.theme-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: white;
+  color: #6b7280;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  .dark & {
+    background: #2d2d3d;
+    border-color: #374151;
+    color: #9ca3af;
+  }
+
+  &:hover {
+    border-color: #3b82f6;
+    color: #3b82f6;
+  }
+
+  &.active {
+    background: rgba(59, 130, 246, 0.1);
+    border-color: #3b82f6;
+    color: #3b82f6;
+  }
+}
+
+.font-size-options {
+  display: flex;
+  gap: 4px;
+  background: #f3f4f6;
+  padding: 4px;
+  border-radius: 10px;
+
+  .dark & {
+    background: #2d2d3d;
+  }
+}
+
+.size-btn {
+  padding: 6px 16px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: #6b7280;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: #374151;
+
+    .dark & {
+      color: #e5e7eb;
+    }
+  }
+
+  &.active {
+    background: white;
+    color: #3b82f6;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+    .dark & {
+      background: #374151;
+    }
+  }
+}
+
+.slider-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+
+  .form-slider {
+    flex: 1;
+  }
+}
+
+.slider-value {
+  min-width: 48px;
+  text-align: right;
+  font-size: 14px;
+  font-weight: 500;
+  color: #3b82f6;
+}
+
+.prompt-textarea {
+  width: 100%;
+  padding: 12px 14px;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: white;
+  font-family: inherit;
+  font-size: 14px;
+  color: #1f2937;
+  resize: vertical;
+  min-height: 100px;
+
+  .dark & {
+    background: #2d2d3d;
+    border-color: #374151;
+    color: #f3f4f6;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  }
+
+  &::placeholder {
+    color: #9ca3af;
+  }
+}
+
+.data-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.data-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 20px;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: white;
+  color: #374151;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  .dark & {
+    background: #2d2d3d;
+    border-color: #374151;
+    color: #e5e7eb;
+  }
+
+  &:hover {
+    border-color: #3b82f6;
+    color: #3b82f6;
+  }
+
+  &.danger {
+    border-color: #fecaca;
+    color: #ef4444;
+
+    &:hover {
+      background: rgba(239, 68, 68, 0.1);
+      border-color: #ef4444;
+    }
+  }
+}
+
+.about-content {
+  text-align: center;
+  padding: 20px 0;
+}
+
+.app-info {
+  margin-bottom: 32px;
+
+  .app-logo {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 80px;
+    height: 80px;
+    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+    border-radius: 20px;
+    color: white;
+    margin-bottom: 16px;
+  }
+
+  h4 {
+    margin: 0 0 4px;
+    font-size: 20px;
+    font-weight: 600;
+    color: #1f2937;
+
+    .dark & {
+      color: #f3f4f6;
+    }
+  }
+
+  .version {
+    margin: 0 0 8px;
+    font-size: 14px;
+    color: #3b82f6;
+  }
+
+  .desc {
+    margin: 0;
+    font-size: 14px;
+    color: #6b7280;
+  }
+}
+
+.about-links {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 280px;
+  margin: 0 auto 32px;
+}
+
+.about-link {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  color: #374151;
+  text-decoration: none;
+  transition: all 0.2s ease;
+
+  .dark & {
+    border-color: #374151;
+    color: #e5e7eb;
+  }
+
+  span {
+    flex: 1;
+    text-align: left;
+  }
+
+  &:hover {
+    border-color: #3b82f6;
+    color: #3b82f6;
+  }
+}
+
+.copyright {
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+.modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  border-top: 1px solid #e2e8f0;
+
+  .dark & {
+    border-top-color: #2d2d3d;
+  }
+}
+
+.reset-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: transparent;
+  color: #6b7280;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  .dark & {
+    border-color: #374151;
+  }
+
+  &:hover {
+    border-color: #f59e0b;
+    color: #f59e0b;
+  }
+}
+
+.done-btn {
+  padding: 10px 24px;
+  border: none;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
+  }
+}
+
+// 动画
+.modal-enter-active,
+.modal-leave-active {
+  transition: all 0.25s ease;
+
+  .settings-modal {
+    transition: all 0.25s ease;
+  }
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+
+  .settings-modal {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+</style>
diff --git a/src/components/modals/ShortcutsModal.vue b/src/components/modals/ShortcutsModal.vue
index 03ae3c2..14d182e 100644
--- a/src/components/modals/ShortcutsModal.vue
+++ b/src/components/modals/ShortcutsModal.vue
@@ -1,307 +1,309 @@
-<template>
-  <Teleport to="body">
-    <Transition name="modal">
-      <div v-if="visible" class="modal-overlay" @click.self="close">
-        <div class="shortcuts-modal">
-          <!-- 头部 -->
-          <div class="modal-header">
-            <div class="header-title">
-              <Keyboard :size="22" />
-              <h3>键盘快捷键</h3>
-            </div>
-            <button class="close-btn" @click="close">
-              <X :size="20" />
-            </button>
-          </div>
-
-          <!-- 快捷键列表 -->
-          <div class="shortcuts-content">
-            <div
-                v-for="group in shortcutGroups"
-                :key="group.title"
-                class="shortcut-group"
-            >
-              <h4 class="group-title">{{ group.title }}</h4>
-              <div class="shortcuts-list">
-                <div
-                    v-for="shortcut in group.shortcuts"
-                    :key="shortcut.description"
-                    class="shortcut-item"
-                >
-                  <span class="shortcut-desc">{{ shortcut.description }}</span>
-                  <div class="shortcut-keys">
-                    <kbd v-for="key in shortcut.keys" :key="key">{{ key }}</kbd>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 底部 -->
-          <div class="modal-footer">
-            <span class="tip">按 <kbd>ESC</kbd> 或 <kbd>?</kbd> 关闭此窗口</span>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useSettingsStore } from '@/stores/settings'
-import { Keyboard, X } from '@/components/icons'
-
-const settingsStore = useSettingsStore()
-const { showShortcutsModal: visible } = storeToRefs(settingsStore)
-
-const shortcutGroups = computed(() => [
-  {
-    title: '通用',
-    shortcuts: [
-      { description: '新建对话', keys: ['⌘', 'N'] },
-      { description: '搜索对话', keys: ['⌘', 'K'] },
-      { description: '切换侧边栏', keys: ['⌘', 'B'] },
-      { description: '切换主题', keys: ['⌘', '⇧', 'D'] },
-      { description: '显示快捷键', keys: ['⌘', '?'] },
-    ],
-  },
-  {
-    title: '对话',
-    shortcuts: [
-      { description: '发送消息', keys: ['⌘', '↵'] },
-      { description: '换行', keys: ['⇧', '↵'] },
-      { description: '聚焦输入框', keys: ['⌘', '/'] },
-      { description: '停止生成', keys: ['ESC'] },
-    ],
-  },
-  {
-    title: '消息操作',
-    shortcuts: [
-      { description: '复制消息', keys: ['⌘', 'C'] },
-      { description: '重新生成', keys: ['⌘', 'R'] },
-    ],
-  },
-])
-
-function close() {
-  settingsStore.closeShortcutsModal()
-}
-</script>
-
-<style lang="scss" scoped>
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  backdrop-filter: blur(4px);
-}
-
-.shortcuts-modal {
-  width: 480px;
-  max-height: 80vh;
-  background: white;
-  border-radius: 16px;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-
-  .dark & {
-    background: #1e1e2e;
-  }
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px;
-  border-bottom: 1px solid #e2e8f0;
-
-  .dark & {
-    border-bottom-color: #2d2d3d;
-  }
-}
-
-.header-title {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-
-  svg {
-    color: #3b82f6;
-  }
-
-  h3 {
-    margin: 0;
-    font-size: 18px;
-    font-weight: 600;
-    color: #1f2937;
-
-    .dark & {
-      color: #f3f4f6;
-    }
-  }
-}
-
-.close-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border: none;
-  border-radius: 10px;
-  background: transparent;
-  color: #6b7280;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background: #f3f4f6;
-    color: #1f2937;
-
-    .dark & {
-      background: #374151;
-      color: #f3f4f6;
-    }
-  }
-}
-
-.shortcuts-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px 24px;
-}
-
-.shortcut-group {
-  &:not(:last-child) {
-    margin-bottom: 24px;
-  }
-}
-
-.group-title {
-  margin: 0 0 12px;
-  font-size: 12px;
-  font-weight: 600;
-  color: #9ca3af;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.shortcuts-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.shortcut-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 14px;
-  border-radius: 10px;
-  background: #f8fafc;
-
-  .dark & {
-    background: #2d2d3d;
-  }
-}
-
-.shortcut-desc {
-  font-size: 14px;
-  color: #374151;
-
-  .dark & {
-    color: #e5e7eb;
-  }
-}
-
-.shortcut-keys {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-
-  kbd {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 28px;
-    height: 28px;
-    padding: 0 8px;
-    font-size: 12px;
-    font-weight: 500;
-    color: #374151;
-    background: white;
-    border: 1px solid #e2e8f0;
-    border-radius: 6px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-
-    .dark & {
-      color: #e5e7eb;
-      background: #1e1e2e;
-      border-color: #4b5563;
-    }
-  }
-}
-
-.modal-footer {
-  padding: 16px 24px;
-  border-top: 1px solid #e2e8f0;
-  text-align: center;
-
-  .dark & {
-    border-top-color: #2d2d3d;
-  }
-}
-
-.tip {
-  font-size: 13px;
-  color: #9ca3af;
-
-  kbd {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 24px;
-    height: 22px;
-    padding: 0 6px;
-    margin: 0 2px;
-    font-size: 11px;
-    color: #6b7280;
-    background: #f3f4f6;
-    border-radius: 4px;
-
-    .dark & {
-      background: #374151;
-      color: #9ca3af;
-    }
-  }
-}
-
-// 过渡动画
-.modal-enter-active,
-.modal-leave-active {
-  transition: all 0.25s ease;
-
-  .shortcuts-modal {
-    transition: all 0.25s ease;
-  }
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-
-  .shortcuts-modal {
-    transform: scale(0.9);
-    opacity: 0;
-  }
-}
-</style>
\ No newline at end of file
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="visible" class="modal-overlay" @click.self="close">
+        <div class="shortcuts-modal">
+          <!-- 头部 -->
+          <div class="modal-header">
+            <div class="header-title">
+              <Keyboard :size="22" />
+              <h3>键盘快捷键</h3>
+            </div>
+            <button class="close-btn" @click="close">
+              <X :size="20" />
+            </button>
+          </div>
+
+          <!-- 快捷键列表 -->
+          <div class="shortcuts-content">
+            <div
+              v-for="group in shortcutGroups"
+              :key="group.title"
+              class="shortcut-group"
+            >
+              <h4 class="group-title">{{ group.title }}</h4>
+              <div class="shortcuts-list">
+                <div
+                  v-for="shortcut in group.shortcuts"
+                  :key="shortcut.description"
+                  class="shortcut-item"
+                >
+                  <span class="shortcut-desc">{{ shortcut.description }}</span>
+                  <div class="shortcut-keys">
+                    <kbd v-for="key in shortcut.keys" :key="key">{{ key }}</kbd>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 底部 -->
+          <div class="modal-footer">
+            <span class="tip"
+              >按 <kbd>ESC</kbd> 或 <kbd>?</kbd> 关闭此窗口</span
+            >
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useSettingsStore } from "@/stores/settings";
+import { Keyboard, X } from "@/components/icons";
+
+const settingsStore = useSettingsStore();
+const { showShortcutsModal: visible } = storeToRefs(settingsStore);
+
+const shortcutGroups = computed(() => [
+  {
+    title: "通用",
+    shortcuts: [
+      { description: "新建对话", keys: ["⌘", "N"] },
+      { description: "搜索对话", keys: ["⌘", "K"] },
+      { description: "切换侧边栏", keys: ["⌘", "B"] },
+      { description: "切换主题", keys: ["⌘", "⇧", "D"] },
+      { description: "显示快捷键", keys: ["⌘", "?"] },
+    ],
+  },
+  {
+    title: "对话",
+    shortcuts: [
+      { description: "发送消息", keys: ["⌘", "↵"] },
+      { description: "换行", keys: ["⇧", "↵"] },
+      { description: "聚焦输入框", keys: ["⌘", "/"] },
+      { description: "停止生成", keys: ["ESC"] },
+    ],
+  },
+  {
+    title: "消息操作",
+    shortcuts: [
+      { description: "复制消息", keys: ["⌘", "C"] },
+      { description: "重新生成", keys: ["⌘", "R"] },
+    ],
+  },
+]);
+
+function close() {
+  settingsStore.closeShortcutsModal();
+}
+</script>
+
+<style lang="scss" scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  backdrop-filter: blur(4px);
+}
+
+.shortcuts-modal {
+  width: 480px;
+  max-height: 80vh;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .dark & {
+    background: #1e1e2e;
+  }
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid #e2e8f0;
+
+  .dark & {
+    border-bottom-color: #2d2d3d;
+  }
+}
+
+.header-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  svg {
+    color: #3b82f6;
+  }
+
+  h3 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #1f2937;
+
+    .dark & {
+      color: #f3f4f6;
+    }
+  }
+}
+
+.close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: #f3f4f6;
+    color: #1f2937;
+
+    .dark & {
+      background: #374151;
+      color: #f3f4f6;
+    }
+  }
+}
+
+.shortcuts-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 24px;
+}
+
+.shortcut-group {
+  &:not(:last-child) {
+    margin-bottom: 24px;
+  }
+}
+
+.group-title {
+  margin: 0 0 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #9ca3af;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.shortcuts-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.shortcut-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  border-radius: 10px;
+  background: #f8fafc;
+
+  .dark & {
+    background: #2d2d3d;
+  }
+}
+
+.shortcut-desc {
+  font-size: 14px;
+  color: #374151;
+
+  .dark & {
+    color: #e5e7eb;
+  }
+}
+
+.shortcut-keys {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  kbd {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 28px;
+    height: 28px;
+    padding: 0 8px;
+    font-size: 12px;
+    font-weight: 500;
+    color: #374151;
+    background: white;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+    .dark & {
+      color: #e5e7eb;
+      background: #1e1e2e;
+      border-color: #4b5563;
+    }
+  }
+}
+
+.modal-footer {
+  padding: 16px 24px;
+  border-top: 1px solid #e2e8f0;
+  text-align: center;
+
+  .dark & {
+    border-top-color: #2d2d3d;
+  }
+}
+
+.tip {
+  font-size: 13px;
+  color: #9ca3af;
+
+  kbd {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    height: 22px;
+    padding: 0 6px;
+    margin: 0 2px;
+    font-size: 11px;
+    color: #6b7280;
+    background: #f3f4f6;
+    border-radius: 4px;
+
+    .dark & {
+      background: #374151;
+      color: #9ca3af;
+    }
+  }
+}
+
+// 过渡动画
+.modal-enter-active,
+.modal-leave-active {
+  transition: all 0.25s ease;
+
+  .shortcuts-modal {
+    transition: all 0.25s ease;
+  }
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+
+  .shortcuts-modal {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+}
+</style>
diff --git a/src/components/sidebar/ChatSidebar.vue b/src/components/sidebar/ChatSidebar.vue
index 193e00a..5b38b81 100644
--- a/src/components/sidebar/ChatSidebar.vue
+++ b/src/components/sidebar/ChatSidebar.vue
@@ -1,495 +1,495 @@
-<template>
-  <aside
-    class="chat-sidebar"
-    :class="{ collapsed: isCollapsed }"
-    :style="{ width: isCollapsed ? '0px' : `${sidebarWidth}px` }"
-  >
-    <div class="sidebar-inner">
-      <!-- 头部 -->
-      <div class="sidebar-header">
-        <div class="logo">
-          <Bot :size="24" class="logo-icon" />
-          <span v-show="!isCollapsed" class="logo-text">Kexue AI Chat</span>
-        </div>
-        <button
-          class="collapse-btn"
-          @click="toggleSidebar"
-          :title="isCollapsed ? '展开侧边栏' : '收起侧边栏'"
-        >
-          <ChevronLeft :size="18" :class="{ rotated: isCollapsed }" />
-        </button>
-      </div>
-
-      <!-- 新建对话按钮 -->
-      <div class="new-chat-section">
-        <button class="new-chat-btn" @click="handleNewChat">
-          <Plus :size="18" />
-          <span>新建对话</span>
-        </button>
-      </div>
-
-      <!-- 搜索框 -->
-      <div class="search-section">
-        <div class="search-box" @click="openSearch">
-          <Search :size="16" />
-          <span class="search-placeholder">搜索对话...</span>
-          <kbd class="search-kbd">⌘K</kbd>
-        </div>
-      </div>
-
-      <!-- 对话列表 -->
-      <div class="conversations-section">
-        <!-- 置顶对话 -->
-        <div v-if="pinnedConversations.length > 0" class="conversation-group">
-          <div class="group-header">
-            <Pin :size="14" />
-            <span>置顶</span>
-          </div>
-          <div class="group-list">
-            <ConversationItem
-              v-for="conv in pinnedConversations"
-              :key="conv.id"
-              :conversation="conv"
-              :is-active="conv.id === currentConversationId"
-              @select="selectConversation"
-              @delete="deleteConversation"
-              @rename="renameConversation"
-              @toggle-pin="togglePinConversation"
-            />
-          </div>
-        </div>
-
-        <!-- 最近对话 -->
-        <div class="conversation-group">
-          <div class="group-header">
-            <Clock :size="14" />
-            <span>最近</span>
-          </div>
-          <div class="group-list">
-            <ConversationItem
-              v-for="conv in recentConversations"
-              :key="conv.id"
-              :conversation="conv"
-              :is-active="conv.id === currentConversationId"
-              @select="selectConversation"
-              @delete="deleteConversation"
-              @rename="renameConversation"
-              @toggle-pin="togglePinConversation"
-            />
-          </div>
-        </div>
-
-        <!-- 空状态 -->
-        <div
-          v-if="
-            pinnedConversations.length === 0 && recentConversations.length === 0
-          "
-          class="empty-state"
-        >
-          <MessageSquare :size="40" class="empty-icon" />
-          <p>暂无对话</p>
-          <span>点击上方按钮开始新对话</span>
-        </div>
-      </div>
-
-      <!-- 底部操作 -->
-      <div class="sidebar-footer">
-        <button class="footer-btn" @click="toggleTheme" title="切换主题">
-          <Sun v-if="currentTheme === 'light'" :size="18" />
-          <Moon v-else-if="currentTheme === 'dark'" :size="18" />
-          <Monitor v-else :size="18" />
-        </button>
-        <button class="footer-btn" @click="openShortcuts" title="快捷键">
-          <Keyboard :size="18" />
-        </button>
-        <button class="footer-btn" @click="openSettings" title="设置">
-          <Settings :size="18" />
-        </button>
-      </div>
-    </div>
-
-    <!-- 拖拽调整宽度 -->
-    <div class="resize-handle" @mousedown="startResize" />
-  </aside>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import { storeToRefs } from "pinia";
-import { useChatStore } from "@/stores/chat";
-import { useSettingsStore } from "@/stores/settings";
-import ConversationItem from "./ConversationItem.vue";
-import {
-  Bot,
-  Plus,
-  Search,
-  Pin,
-  Clock,
-  MessageSquare,
-  Sun,
-  Moon,
-  Monitor,
-  Keyboard,
-  Settings,
-  ChevronLeft,
-} from "@/components/icons";
-
-const chatStore = useChatStore();
-const settingsStore = useSettingsStore();
-
-const { currentConversationId, pinnedConversations, recentConversations } =
-  storeToRefs(chatStore);
-
-const {
-  sidebarCollapsed: isCollapsed,
-  sidebarWidth,
-  settings,
-} = storeToRefs(settingsStore);
-
-const currentTheme = computed(() => settings.value.theme);
-
-// 方法
-function handleNewChat() {
-  chatStore.createConversation();
-}
-
-function selectConversation(id: string) {
-  chatStore.selectConversation(id);
-}
-
-function deleteConversation(id: string) {
-  chatStore.deleteConversation(id);
-}
-
-function renameConversation(id: string, title: string) {
-  chatStore.renameConversation(id, title);
-}
-
-function togglePinConversation(id: string) {
-  chatStore.togglePinConversation(id);
-}
-
-function toggleSidebar() {
-  settingsStore.toggleSidebar();
-}
-
-function toggleTheme() {
-  settingsStore.toggleTheme();
-}
-
-function openShortcuts() {
-  settingsStore.openShortcutsModal();
-}
-
-function openSettings() {
-  settingsStore.openSettingsModal();
-}
-
-function openSearch() {
-  settingsStore.openSearchModal();
-}
-
-// 拖拽调整宽度
-const isResizing = ref(false);
-
-function startResize(e: MouseEvent) {
-  isResizing.value = true;
-  const startX = e.clientX;
-  const startWidth = sidebarWidth.value;
-
-  const handleMouseMove = (e: MouseEvent) => {
-    const diff = e.clientX - startX;
-    settingsStore.setSidebarWidth(startWidth + diff);
-  };
-
-  const handleMouseUp = () => {
-    isResizing.value = false;
-    document.removeEventListener("mousemove", handleMouseMove);
-    document.removeEventListener("mouseup", handleMouseUp);
-  };
-
-  document.addEventListener("mousemove", handleMouseMove);
-  document.addEventListener("mouseup", handleMouseUp);
-}
-</script>
-
-<style lang="scss" scoped>
-.chat-sidebar {
-  position: relative;
-  height: 100vh;
-  background: #f8fafc;
-  border-right: 1px solid #e2e8f0;
-  transition: width 0.3s ease;
-  overflow: hidden;
-  flex-shrink: 0;
-  margin-right: 10px;
-  border-radius: 15px;
-
-  .dark & {
-    background: #1e1e2e;
-    border-right-color: #2d2d3d;
-  }
-
-  &.collapsed {
-    .sidebar-inner {
-      opacity: 0;
-      pointer-events: none;
-    }
-  }
-}
-
-.sidebar-inner {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  transition: opacity 0.2s ease;
-}
-
-.sidebar-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  border-bottom: 1px solid #e2e8f0;
-
-  .dark & {
-    border-bottom-color: #2d2d3d;
-  }
-}
-
-.logo {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.logo-icon {
-  color: #3b82f6;
-}
-
-.logo-text {
-  font-size: 18px;
-  font-weight: 700;
-  color: #1f2937;
-
-  .dark & {
-    color: #f3f4f6;
-  }
-}
-
-.collapse-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: 8px;
-  background: transparent;
-  color: #6b7280;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background: rgba(0, 0, 0, 0.05);
-    color: #374151;
-
-    .dark & {
-      background: rgba(255, 255, 255, 0.05);
-      color: #e5e7eb;
-    }
-  }
-
-  svg {
-    transition: transform 0.3s ease;
-
-    &.rotated {
-      transform: rotate(180deg);
-    }
-  }
-}
-
-.new-chat-section {
-  padding: 12px 16px;
-}
-
-.new-chat-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  width: 100%;
-  padding: 12px 16px;
-  border: 1px dashed #d1d5db;
-  border-radius: 12px;
-  background: transparent;
-  color: #374151;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  .dark & {
-    border-color: #4b5563;
-    color: #e5e7eb;
-  }
-
-  &:hover {
-    border-color: #3b82f6;
-    background: rgba(59, 130, 246, 0.05);
-    color: #3b82f6;
-  }
-}
-
-.search-section {
-  padding: 0 16px 12px;
-}
-
-.search-box {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
-  border-radius: 10px;
-  background: rgba(0, 0, 0, 0.03);
-  color: #9ca3af;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  .dark & {
-    background: rgba(255, 255, 255, 0.03);
-  }
-
-  &:hover {
-    background: rgba(0, 0, 0, 0.06);
-
-    .dark & {
-      background: rgba(255, 255, 255, 0.06);
-    }
-  }
-}
-
-.search-placeholder {
-  flex: 1;
-  font-size: 13px;
-}
-
-.search-kbd {
-  font-size: 11px;
-  padding: 2px 6px;
-  border-radius: 4px;
-  background: rgba(0, 0, 0, 0.06);
-
-  .dark & {
-    background: rgba(255, 255, 255, 0.1);
-  }
-}
-
-.conversations-section {
-  flex: 1;
-  overflow-y: auto;
-  padding-bottom: 12px;
-}
-
-.conversation-group {
-  margin-bottom: 8px;
-}
-
-.group-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 20px;
-  font-size: 12px;
-  font-weight: 600;
-  color: #9ca3af;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-
-  .dark & {
-    color: #6b7280;
-  }
-}
-
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px 20px;
-  text-align: center;
-
-  .empty-icon {
-    color: #d1d5db;
-    margin-bottom: 12px;
-
-    .dark & {
-      color: #4b5563;
-    }
-  }
-
-  p {
-    margin: 0 0 4px;
-    font-size: 14px;
-    font-weight: 500;
-    color: #6b7280;
-  }
-
-  span {
-    font-size: 12px;
-    color: #9ca3af;
-  }
-}
-
-.sidebar-footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 12px 16px;
-  border-top: 1px solid #e2e8f0;
-
-  .dark & {
-    border-top-color: #2d2d3d;
-  }
-}
-
-.footer-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border: none;
-  border-radius: 10px;
-  background: transparent;
-  color: #6b7280;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background: rgba(0, 0, 0, 0.05);
-    color: #374151;
-
-    .dark & {
-      background: rgba(255, 255, 255, 0.05);
-      color: #e5e7eb;
-    }
-  }
-}
-
-.resize-handle {
-  position: absolute;
-  top: 0;
-  right: -3px;
-  width: 6px;
-  height: 100%;
-  cursor: col-resize;
-  z-index: 10;
-
-  &:hover {
-    background: rgba(59, 130, 246, 0.3);
-  }
-}
-</style>
+<template>
+  <aside
+    class="chat-sidebar"
+    :class="{ collapsed: isCollapsed }"
+    :style="{ width: isCollapsed ? '0px' : `${sidebarWidth}px` }"
+  >
+    <div class="sidebar-inner">
+      <!-- 头部 -->
+      <div class="sidebar-header">
+        <div class="logo">
+          <Bot :size="24" class="logo-icon" />
+          <span v-show="!isCollapsed" class="logo-text">AI Chat</span>
+        </div>
+        <button
+          class="collapse-btn"
+          @click="toggleSidebar"
+          :title="isCollapsed ? '展开侧边栏' : '收起侧边栏'"
+        >
+          <ChevronLeft :size="18" :class="{ rotated: isCollapsed }" />
+        </button>
+      </div>
+
+      <!-- 新建对话按钮 -->
+      <div class="new-chat-section">
+        <button class="new-chat-btn" @click="handleNewChat">
+          <Plus :size="18" />
+          <span>新建对话</span>
+        </button>
+      </div>
+
+      <!-- 搜索框 -->
+      <div class="search-section">
+        <div class="search-box" @click="openSearch">
+          <Search :size="16" />
+          <span class="search-placeholder">搜索对话...</span>
+          <kbd class="search-kbd">⌘K</kbd>
+        </div>
+      </div>
+
+      <!-- 对话列表 -->
+      <div class="conversations-section">
+        <!-- 置顶对话 -->
+        <div v-if="pinnedConversations.length > 0" class="conversation-group">
+          <div class="group-header">
+            <Pin :size="14" />
+            <span>置顶</span>
+          </div>
+          <div class="group-list">
+            <ConversationItem
+              v-for="conv in pinnedConversations"
+              :key="conv.id"
+              :conversation="conv"
+              :is-active="conv.id === currentConversationId"
+              @select="selectConversation"
+              @delete="deleteConversation"
+              @rename="renameConversation"
+              @toggle-pin="togglePinConversation"
+            />
+          </div>
+        </div>
+
+        <!-- 最近对话 -->
+        <div class="conversation-group">
+          <div class="group-header">
+            <Clock :size="14" />
+            <span>最近</span>
+          </div>
+          <div class="group-list">
+            <ConversationItem
+              v-for="conv in recentConversations"
+              :key="conv.id"
+              :conversation="conv"
+              :is-active="conv.id === currentConversationId"
+              @select="selectConversation"
+              @delete="deleteConversation"
+              @rename="renameConversation"
+              @toggle-pin="togglePinConversation"
+            />
+          </div>
+        </div>
+
+        <!-- 空状态 -->
+        <div
+          v-if="
+            pinnedConversations.length === 0 && recentConversations.length === 0
+          "
+          class="empty-state"
+        >
+          <MessageSquare :size="40" class="empty-icon" />
+          <p>暂无对话</p>
+          <span>点击上方按钮开始新对话</span>
+        </div>
+      </div>
+
+      <!-- 底部操作 -->
+      <div class="sidebar-footer">
+        <button class="footer-btn" @click="toggleTheme" title="切换主题">
+          <Sun v-if="currentTheme === 'light'" :size="18" />
+          <Moon v-else-if="currentTheme === 'dark'" :size="18" />
+          <Monitor v-else :size="18" />
+        </button>
+        <button class="footer-btn" @click="openShortcuts" title="快捷键">
+          <Keyboard :size="18" />
+        </button>
+        <button class="footer-btn" @click="openSettings" title="设置">
+          <Settings :size="18" />
+        </button>
+      </div>
+    </div>
+
+    <!-- 拖拽调整宽度 -->
+    <div class="resize-handle" @mousedown="startResize" />
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { storeToRefs } from "pinia";
+import { useChatStore } from "@/stores/chat";
+import { useSettingsStore } from "@/stores/settings";
+import ConversationItem from "./ConversationItem.vue";
+import {
+  Bot,
+  Plus,
+  Search,
+  Pin,
+  Clock,
+  MessageSquare,
+  Sun,
+  Moon,
+  Monitor,
+  Keyboard,
+  Settings,
+  ChevronLeft,
+} from "@/components/icons";
+
+const chatStore = useChatStore();
+const settingsStore = useSettingsStore();
+
+const { currentConversationId, pinnedConversations, recentConversations } =
+  storeToRefs(chatStore);
+
+const {
+  sidebarCollapsed: isCollapsed,
+  sidebarWidth,
+  settings,
+} = storeToRefs(settingsStore);
+
+const currentTheme = computed(() => settings.value.theme);
+
+// 方法
+function handleNewChat() {
+  chatStore.createConversation();
+}
+
+function selectConversation(id: string) {
+  chatStore.selectConversation(id);
+}
+
+function deleteConversation(id: string) {
+  chatStore.deleteConversation(id);
+}
+
+function renameConversation(id: string, title: string) {
+  chatStore.renameConversation(id, title);
+}
+
+function togglePinConversation(id: string) {
+  chatStore.togglePinConversation(id);
+}
+
+function toggleSidebar() {
+  settingsStore.toggleSidebar();
+}
+
+function toggleTheme() {
+  settingsStore.toggleTheme();
+}
+
+function openShortcuts() {
+  settingsStore.openShortcutsModal();
+}
+
+function openSettings() {
+  settingsStore.openSettingsModal();
+}
+
+function openSearch() {
+  settingsStore.openSearchModal();
+}
+
+// 拖拽调整宽度
+const isResizing = ref(false);
+
+function startResize(e: MouseEvent) {
+  isResizing.value = true;
+  const startX = e.clientX;
+  const startWidth = sidebarWidth.value;
+
+  const handleMouseMove = (e: MouseEvent) => {
+    const diff = e.clientX - startX;
+    settingsStore.setSidebarWidth(startWidth + diff);
+  };
+
+  const handleMouseUp = () => {
+    isResizing.value = false;
+    document.removeEventListener("mousemove", handleMouseMove);
+    document.removeEventListener("mouseup", handleMouseUp);
+  };
+
+  document.addEventListener("mousemove", handleMouseMove);
+  document.addEventListener("mouseup", handleMouseUp);
+}
+</script>
+
+<style lang="scss" scoped>
+.chat-sidebar {
+  position: relative;
+  height: 100vh;
+  background: #f8fafc;
+  border-right: 1px solid #e2e8f0;
+  transition: width 0.3s ease;
+  overflow: hidden;
+  flex-shrink: 0;
+  margin-right: 10px;
+  border-radius: 15px;
+
+  .dark & {
+    background: #1e1e2e;
+    border-right-color: #2d2d3d;
+  }
+
+  &.collapsed {
+    .sidebar-inner {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+}
+
+.sidebar-inner {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  transition: opacity 0.2s ease;
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid #e2e8f0;
+
+  .dark & {
+    border-bottom-color: #2d2d3d;
+  }
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.logo-icon {
+  color: #3b82f6;
+}
+
+.logo-text {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1f2937;
+
+  .dark & {
+    color: #f3f4f6;
+  }
+}
+
+.collapse-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.05);
+    color: #374151;
+
+    .dark & {
+      background: rgba(255, 255, 255, 0.05);
+      color: #e5e7eb;
+    }
+  }
+
+  svg {
+    transition: transform 0.3s ease;
+
+    &.rotated {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.new-chat-section {
+  padding: 12px 16px;
+}
+
+.new-chat-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px dashed #d1d5db;
+  border-radius: 12px;
+  background: transparent;
+  color: #374151;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  .dark & {
+    border-color: #4b5563;
+    color: #e5e7eb;
+  }
+
+  &:hover {
+    border-color: #3b82f6;
+    background: rgba(59, 130, 246, 0.05);
+    color: #3b82f6;
+  }
+}
+
+.search-section {
+  padding: 0 16px 12px;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.03);
+  color: #9ca3af;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  .dark & {
+    background: rgba(255, 255, 255, 0.03);
+  }
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.06);
+
+    .dark & {
+      background: rgba(255, 255, 255, 0.06);
+    }
+  }
+}
+
+.search-placeholder {
+  flex: 1;
+  font-size: 13px;
+}
+
+.search-kbd {
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.06);
+
+  .dark & {
+    background: rgba(255, 255, 255, 0.1);
+  }
+}
+
+.conversations-section {
+  flex: 1;
+  overflow-y: auto;
+  padding-bottom: 12px;
+}
+
+.conversation-group {
+  margin-bottom: 8px;
+}
+
+.group-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 20px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #9ca3af;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+
+  .dark & {
+    color: #6b7280;
+  }
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  text-align: center;
+
+  .empty-icon {
+    color: #d1d5db;
+    margin-bottom: 12px;
+
+    .dark & {
+      color: #4b5563;
+    }
+  }
+
+  p {
+    margin: 0 0 4px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #6b7280;
+  }
+
+  span {
+    font-size: 12px;
+    color: #9ca3af;
+  }
+}
+
+.sidebar-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid #e2e8f0;
+
+  .dark & {
+    border-top-color: #2d2d3d;
+  }
+}
+
+.footer-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.05);
+    color: #374151;
+
+    .dark & {
+      background: rgba(255, 255, 255, 0.05);
+      color: #e5e7eb;
+    }
+  }
+}
+
+.resize-handle {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 10;
+
+  &:hover {
+    background: rgba(59, 130, 246, 0.3);
+  }
+}
+</style>
diff --git a/src/components/sidebar/ConversationItem.vue b/src/components/sidebar/ConversationItem.vue
index 41ad9b8..dced016 100644
--- a/src/components/sidebar/ConversationItem.vue
+++ b/src/components/sidebar/ConversationItem.vue
@@ -1,278 +1,277 @@
-<template>
-  <div
-      class="conversation-item group"
-      :class="{
-      'active': isActive,
-      'pinned': conversation.pinned
-    }"
-      @click="handleSelect"
-      @dblclick="handleRename"
-  >
-    <!-- 图标 -->
-    <div class="item-icon">
-      <MessageSquare :size="18" />
-    </div>
-
-    <!-- 内容 -->
-    <div class="item-content">
-      <div v-if="!isEditing" class="item-title">
-        {{ conversation.title }}
-      </div>
-      <input
-          v-else
-          ref="inputRef"
-          v-model="editTitle"
-          class="item-title-input"
-          @blur="handleSaveRename"
-          @keydown.enter="handleSaveRename"
-          @keydown.escape="handleCancelRename"
-          @click.stop
-      />
-      <div class="item-meta">
-        <Clock :size="12" />
-        <span>{{ formattedTime }}</span>
-      </div>
-    </div>
-
-    <!-- 置顶标识 -->
-    <div v-if="conversation.pinned" class="pin-indicator">
-      <Pin :size="12" />
-    </div>
-
-    <!-- 操作按钮 -->
-    <div class="item-actions" @click.stop>
-      <button
-          class="action-btn"
-          :title="conversation.pinned ? '取消置顶' : '置顶'"
-          @click="handleTogglePin"
-      >
-        <PinOff v-if="conversation.pinned" :size="14" />
-        <Pin v-else :size="14" />
-      </button>
-      <button
-          class="action-btn"
-          title="重命名"
-          @click="handleRename"
-      >
-        <Edit3 :size="14" />
-      </button>
-      <button
-          class="action-btn delete"
-          title="删除"
-          @click="handleDelete"
-      >
-        <Trash2 :size="14" />
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, nextTick } from 'vue'
-import { MessageSquare, Pin, PinOff, Edit3, Trash2, Clock } from '@/components/icons'
-import { formatTimestamp } from '@/utils/helpers'
-import type { Conversation } from '@/types/chat'
-
-const props = defineProps<{
-  conversation: Conversation
-  isActive: boolean
-}>()
-
-const emit = defineEmits<{
-  select: [id: string]
-  delete: [id: string]
-  rename: [id: string, title: string]
-  togglePin: [id: string]
-}>()
-
-const isEditing = ref(false)
-const editTitle = ref('')
-const inputRef = ref<HTMLInputElement | null>(null)
-
-const formattedTime = computed(() => {
-  return formatTimestamp(props.conversation.updatedAt)
-})
-
-function handleSelect() {
-  if (!isEditing.value) {
-    emit('select', props.conversation.id)
-  }
-}
-
-function handleTogglePin() {
-  emit('togglePin', props.conversation.id)
-}
-
-function handleRename() {
-  isEditing.value = true
-  editTitle.value = props.conversation.title
-  nextTick(() => {
-    inputRef.value?.focus()
-    inputRef.value?.select()
-  })
-}
-
-function handleSaveRename() {
-  if (editTitle.value.trim()) {
-    emit('rename', props.conversation.id, editTitle.value.trim())
-  }
-  isEditing.value = false
-}
-
-function handleCancelRename() {
-  isEditing.value = false
-  editTitle.value = ''
-}
-
-function handleDelete() {
-  if (confirm('确定要删除这个对话吗？')) {
-    emit('delete', props.conversation.id)
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.conversation-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  margin: 2px 8px;
-  border-radius: 10px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  position: relative;
-
-  &:hover {
-    background: rgba(0, 0, 0, 0.05);
-
-    .dark & {
-      background: rgba(255, 255, 255, 0.05);
-    }
-
-    .item-actions {
-      opacity: 1;
-      pointer-events: auto;
-    }
-
-    .pin-indicator {
-      opacity: 0;
-    }
-  }
-
-  &.active {
-    background: rgba(59, 130, 246, 0.1);
-
-    .dark & {
-      background: rgba(59, 130, 246, 0.2);
-    }
-
-    .item-icon {
-      color: #3b82f6;
-    }
-  }
-}
-
-.item-icon {
-  flex-shrink: 0;
-  color: #6b7280;
-
-  .dark & {
-    color: #9ca3af;
-  }
-}
-
-.item-content {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-}
-
-.item-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: #1f2937;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  .dark & {
-    color: #f3f4f6;
-  }
-}
-
-.item-title-input {
-  width: 100%;
-  font-size: 14px;
-  font-weight: 500;
-  color: #1f2937;
-  background: white;
-  border: 1px solid #3b82f6;
-  border-radius: 4px;
-  padding: 2px 6px;
-  outline: none;
-
-  .dark & {
-    color: #f3f4f6;
-    background: #374151;
-  }
-}
-
-.item-meta {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-top: 2px;
-  font-size: 11px;
-  color: #9ca3af;
-
-  .dark & {
-    color: #6b7280;
-  }
-}
-
-.pin-indicator {
-  position: absolute;
-  right: 12px;
-  color: #f59e0b;
-  transition: opacity 0.2s ease;
-}
-
-.item-actions {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: #6b7280;
-  cursor: pointer;
-  transition: all 0.15s ease;
-
-  &:hover {
-    background: rgba(0, 0, 0, 0.1);
-    color: #374151;
-
-    .dark & {
-      background: rgba(255, 255, 255, 0.1);
-      color: #e5e7eb;
-    }
-  }
-
-  &.delete:hover {
-    background: rgba(239, 68, 68, 0.1);
-    color: #ef4444;
-  }
-}
-</style>
\ No newline at end of file
+<template>
+  <div
+    class="conversation-item group"
+    :class="{
+      active: isActive,
+      pinned: conversation.pinned,
+    }"
+    @click="handleSelect"
+    @dblclick="handleRename"
+  >
+    <!-- 图标 -->
+    <div class="item-icon">
+      <MessageSquare :size="18" />
+    </div>
+
+    <!-- 内容 -->
+    <div class="item-content">
+      <div v-if="!isEditing" class="item-title">
+        {{ conversation.title }}
+      </div>
+      <input
+        v-else
+        ref="inputRef"
+        v-model="editTitle"
+        class="item-title-input"
+        @blur="handleSaveRename"
+        @keydown.enter="handleSaveRename"
+        @keydown.escape="handleCancelRename"
+        @click.stop
+      />
+      <div class="item-meta">
+        <Clock :size="12" />
+        <span>{{ formattedTime }}</span>
+      </div>
+    </div>
+
+    <!-- 置顶标识 -->
+    <div v-if="conversation.pinned" class="pin-indicator">
+      <Pin :size="12" />
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class="item-actions" @click.stop>
+      <button
+        class="action-btn"
+        :title="conversation.pinned ? '取消置顶' : '置顶'"
+        @click="handleTogglePin"
+      >
+        <PinOff v-if="conversation.pinned" :size="14" />
+        <Pin v-else :size="14" />
+      </button>
+      <button class="action-btn" title="重命名" @click="handleRename">
+        <Edit3 :size="14" />
+      </button>
+      <button class="action-btn delete" title="删除" @click="handleDelete">
+        <Trash2 :size="14" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick } from "vue";
+import {
+  MessageSquare,
+  Pin,
+  PinOff,
+  Edit3,
+  Trash2,
+  Clock,
+} from "@/components/icons";
+import { formatTimestamp } from "@/utils/helpers";
+import type { Conversation } from "@/types/chat";
+
+const props = defineProps<{
+  conversation: Conversation;
+  isActive: boolean;
+}>();
+
+const emit = defineEmits<{
+  select: [id: string];
+  delete: [id: string];
+  rename: [id: string, title: string];
+  togglePin: [id: string];
+}>();
+
+const isEditing = ref(false);
+const editTitle = ref("");
+const inputRef = ref<HTMLInputElement | null>(null);
+
+const formattedTime = computed(() => {
+  return formatTimestamp(props.conversation.updatedAt);
+});
+
+function handleSelect() {
+  if (!isEditing.value) {
+    emit("select", props.conversation.id);
+  }
+}
+
+function handleTogglePin() {
+  emit("togglePin", props.conversation.id);
+}
+
+function handleRename() {
+  isEditing.value = true;
+  editTitle.value = props.conversation.title;
+  nextTick(() => {
+    inputRef.value?.focus();
+    inputRef.value?.select();
+  });
+}
+
+function handleSaveRename() {
+  if (editTitle.value.trim()) {
+    emit("rename", props.conversation.id, editTitle.value.trim());
+  }
+  isEditing.value = false;
+}
+
+function handleCancelRename() {
+  isEditing.value = false;
+  editTitle.value = "";
+}
+
+function handleDelete() {
+  if (confirm("确定要删除这个对话吗？")) {
+    emit("delete", props.conversation.id);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.conversation-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  margin: 2px 8px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.05);
+
+    .dark & {
+      background: rgba(255, 255, 255, 0.05);
+    }
+
+    .item-actions {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .pin-indicator {
+      opacity: 0;
+    }
+  }
+
+  &.active {
+    background: rgba(59, 130, 246, 0.1);
+
+    .dark & {
+      background: rgba(59, 130, 246, 0.2);
+    }
+
+    .item-icon {
+      color: #3b82f6;
+    }
+  }
+}
+
+.item-icon {
+  flex-shrink: 0;
+  color: #6b7280;
+
+  .dark & {
+    color: #9ca3af;
+  }
+}
+
+.item-content {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.item-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #1f2937;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .dark & {
+    color: #f3f4f6;
+  }
+}
+
+.item-title-input {
+  width: 100%;
+  font-size: 14px;
+  font-weight: 500;
+  color: #1f2937;
+  background: white;
+  border: 1px solid #3b82f6;
+  border-radius: 4px;
+  padding: 2px 6px;
+  outline: none;
+
+  .dark & {
+    color: #f3f4f6;
+    background: #374151;
+  }
+}
+
+.item-meta {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 2px;
+  font-size: 11px;
+  color: #9ca3af;
+
+  .dark & {
+    color: #6b7280;
+  }
+}
+
+.pin-indicator {
+  position: absolute;
+  right: 12px;
+  color: #f59e0b;
+  transition: opacity 0.2s ease;
+}
+
+.item-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.1);
+    color: #374151;
+
+    .dark & {
+      background: rgba(255, 255, 255, 0.1);
+      color: #e5e7eb;
+    }
+  }
+
+  &.delete:hover {
+    background: rgba(239, 68, 68, 0.1);
+    color: #ef4444;
+  }
+}
+</style>
diff --git a/src/components/ui/FormSelect.vue b/src/components/ui/FormSelect.vue
index f0b1a18..fd47787 100644
--- a/src/components/ui/FormSelect.vue
+++ b/src/components/ui/FormSelect.vue
@@ -1,242 +1,242 @@
-<template>
-  <div class="form-select" :class="{ open: isOpen, disabled }">
-    <button class="select-trigger" :disabled="disabled" @click="toggleOpen">
-      <span class="select-value">
-        <slot name="selected" :option="selectedOption">
-          {{ selectedOption?.label || placeholder }}
-        </slot>
-      </span>
-      <ChevronDown :size="18" class="select-arrow" />
-    </button>
-
-    <Transition name="dropdown">
-      <div v-if="isOpen" class="select-dropdown">
-        <div
-          v-for="option in options"
-          :key="option.value"
-          class="select-option"
-          :class="{ active: option.value === modelValue }"
-          @click="selectOption(option)"
-        >
-          <slot name="option" :option="option">
-            <span class="option-label">{{ option.label }}</span>
-            <span v-if="option.description" class="option-desc">{{
-              option.description
-            }}</span>
-          </slot>
-          <Check
-            v-if="option.value === modelValue"
-            :size="16"
-            class="check-icon"
-          />
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from "vue";
-import { ChevronDown, Check } from "@/components/icons";
-
-export interface SelectOption {
-  value: string | number;
-  label: string;
-  description?: string;
-  icon?: string;
-}
-
-const props = withDefaults(
-  defineProps<{
-    modelValue: string | number;
-    options: SelectOption[];
-    placeholder?: string;
-    disabled?: boolean;
-    valueProp?: string;
-  }>(),
-  {
-    placeholder: "请选择",
-    disabled: false,
-  },
-);
-
-const emit = defineEmits<{
-  "update:modelValue": [value: string | number];
-}>();
-
-const isOpen = ref(false);
-
-const selectedOption = computed(() => {
-  return props.options.find((opt) => opt.value === props.modelValue);
-});
-
-function toggleOpen() {
-  if (!props.disabled) {
-    isOpen.value = !isOpen.value;
-  }
-}
-
-function selectOption(option: any) {
-  emit("update:modelValue", option[props.valueProp || "value"]);
-  isOpen.value = false;
-}
-
-function handleClickOutside(event: MouseEvent) {
-  const target = event.target as HTMLElement;
-  if (!target.closest(".form-select")) {
-    isOpen.value = false;
-  }
-}
-
-onMounted(() => {
-  document.addEventListener("click", handleClickOutside);
-});
-
-onUnmounted(() => {
-  document.removeEventListener("click", handleClickOutside);
-});
-</script>
-
-<style lang="scss" scoped>
-.form-select {
-  position: relative;
-  width: 100%;
-
-  &.disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-
-  &.open {
-    .select-arrow {
-      transform: rotate(180deg);
-    }
-  }
-}
-
-.select-trigger {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 10px 14px;
-  background: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  font-size: 14px;
-  color: #1f2937;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  .dark & {
-    background: #2d2d3d;
-    border-color: #374151;
-    color: #f3f4f6;
-  }
-
-  &:hover {
-    border-color: #3b82f6;
-  }
-
-  &:focus {
-    outline: none;
-    border-color: #3b82f6;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-  }
-}
-
-.select-value {
-  flex: 1;
-  text-align: left;
-}
-
-.select-arrow {
-  color: #9ca3af;
-  transition: transform 0.2s ease;
-}
-
-.select-dropdown {
-  position: absolute;
-  top: calc(100% + 6px);
-  left: 0;
-  right: 0;
-  max-height: 280px;
-  overflow-y: auto;
-  background: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 12px;
-  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);
-  }
-}
-
-.select-option {
-  display: flex;
-  align-items: center;
-  padding: 12px 14px;
-  cursor: pointer;
-  transition: background 0.15s ease;
-
-  &:first-child {
-    border-radius: 11px 11px 0 0;
-  }
-
-  &:last-child {
-    border-radius: 0 0 11px 11px;
-  }
-
-  &:hover {
-    background: #f3f4f6;
-
-    .dark & {
-      background: #2d2d3d;
-    }
-  }
-
-  &.active {
-    background: rgba(59, 130, 246, 0.1);
-
-    .option-label {
-      color: #3b82f6;
-    }
-  }
-}
-
-.option-label {
-  flex: 1;
-  font-size: 14px;
-  color: #1f2937;
-
-  .dark & {
-    color: #f3f4f6;
-  }
-}
-
-.option-desc {
-  font-size: 12px;
-  color: #9ca3af;
-  margin-left: 8px;
-}
-
-.check-icon {
-  color: #3b82f6;
-  margin-left: 8px;
-}
-
-// 下拉动画
-.dropdown-enter-active,
-.dropdown-leave-active {
-  transition: all 0.2s ease;
-}
-
-.dropdown-enter-from,
-.dropdown-leave-to {
-  opacity: 0;
-  transform: translateY(-8px);
-}
-</style>
+<template>
+  <div class="form-select" :class="{ open: isOpen, disabled }">
+    <button class="select-trigger" :disabled="disabled" @click="toggleOpen">
+      <span class="select-value">
+        <slot name="selected" :option="selectedOption">
+          {{ selectedOption?.label || placeholder }}
+        </slot>
+      </span>
+      <ChevronDown :size="18" class="select-arrow" />
+    </button>
+
+    <Transition name="dropdown">
+      <div v-if="isOpen" class="select-dropdown">
+        <div
+          v-for="option in options"
+          :key="option.value"
+          class="select-option"
+          :class="{ active: option.value === modelValue }"
+          @click="selectOption(option)"
+        >
+          <slot name="option" :option="option">
+            <span class="option-label">{{ option.label }}</span>
+            <span v-if="option.description" class="option-desc">{{
+              option.description
+            }}</span>
+          </slot>
+          <Check
+            v-if="option.value === modelValue"
+            :size="16"
+            class="check-icon"
+          />
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import { ChevronDown, Check } from "@/components/icons";
+
+export interface SelectOption {
+  value: string | number;
+  label: string;
+  description?: string;
+  icon?: string;
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string | number;
+    options: SelectOption[];
+    placeholder?: string;
+    disabled?: boolean;
+    valueProp?: string;
+  }>(),
+  {
+    placeholder: "请选择",
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string | number];
+}>();
+
+const isOpen = ref(false);
+
+const selectedOption = computed(() => {
+  return props.options.find((opt) => opt.value === props.modelValue);
+});
+
+function toggleOpen() {
+  if (!props.disabled) {
+    isOpen.value = !isOpen.value;
+  }
+}
+
+function selectOption(option: any) {
+  emit("update:modelValue", option[props.valueProp || "value"]);
+  isOpen.value = false;
+}
+
+function handleClickOutside(event: MouseEvent) {
+  const target = event.target as HTMLElement;
+  if (!target.closest(".form-select")) {
+    isOpen.value = false;
+  }
+}
+
+onMounted(() => {
+  document.addEventListener("click", handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("click", handleClickOutside);
+});
+</script>
+
+<style lang="scss" scoped>
+.form-select {
+  position: relative;
+  width: 100%;
+
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  &.open {
+    .select-arrow {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 10px 14px;
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  font-size: 14px;
+  color: #1f2937;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  .dark & {
+    background: #2d2d3d;
+    border-color: #374151;
+    color: #f3f4f6;
+  }
+
+  &:hover {
+    border-color: #3b82f6;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  }
+}
+
+.select-value {
+  flex: 1;
+  text-align: left;
+}
+
+.select-arrow {
+  color: #9ca3af;
+  transition: transform 0.2s ease;
+}
+
+.select-dropdown {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+  max-height: 280px;
+  overflow-y: auto;
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  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);
+  }
+}
+
+.select-option {
+  display: flex;
+  align-items: center;
+  padding: 12px 14px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+
+  &:first-child {
+    border-radius: 11px 11px 0 0;
+  }
+
+  &:last-child {
+    border-radius: 0 0 11px 11px;
+  }
+
+  &:hover {
+    background: #f3f4f6;
+
+    .dark & {
+      background: #2d2d3d;
+    }
+  }
+
+  &.active {
+    background: rgba(59, 130, 246, 0.1);
+
+    .option-label {
+      color: #3b82f6;
+    }
+  }
+}
+
+.option-label {
+  flex: 1;
+  font-size: 14px;
+  color: #1f2937;
+
+  .dark & {
+    color: #f3f4f6;
+  }
+}
+
+.option-desc {
+  font-size: 12px;
+  color: #9ca3af;
+  margin-left: 8px;
+}
+
+.check-icon {
+  color: #3b82f6;
+  margin-left: 8px;
+}
+
+// 下拉动画
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.2s ease;
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+</style>
diff --git a/src/components/ui/FormSlider.vue b/src/components/ui/FormSlider.vue
index b9423ae..978db65 100644
--- a/src/components/ui/FormSlider.vue
+++ b/src/components/ui/FormSlider.vue
@@ -1,116 +1,119 @@
-<template>
-  <div class="form-slider">
-    <input
-        type="range"
-        :value="modelValue"
-        :min="min"
-        :max="max"
-        :step="step"
-        :disabled="disabled"
-        @input="handleInput"
-    />
-    <div class="slider-track">
-      <div class="slider-fill" :style="{ width: fillPercent + '%' }"></div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{
-  modelValue: number
-  min?: number
-  max?: number
-  step?: number
-  disabled?: boolean
-}>(), {
-  min: 0,
-  max: 100,
-  step: 1,
-  disabled: false,
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: number]
-}>()
-
-const fillPercent = computed(() => {
-  return ((props.modelValue - props.min) / (props.max - props.min)) * 100
-})
-
-function handleInput(event: Event) {
-  const value = parseFloat((event.target as HTMLInputElement).value)
-  emit('update:modelValue', value)
-}
-</script>
-
-<style lang="scss" scoped>
-.form-slider {
-  position: relative;
-  width: 100%;
-  height: 24px;
-
-  input[type="range"] {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    cursor: pointer;
-    z-index: 2;
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
-}
-
-.slider-track {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  height: 6px;
-  background: #e5e7eb;
-  border-radius: 3px;
-  transform: translateY(-50%);
-  overflow: hidden;
-
-  .dark & {
-    background: #374151;
-  }
-}
-
-.slider-fill {
-  height: 100%;
-  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-  border-radius: 3px;
-  transition: width 0.1s ease;
-}
-
-// 滑块样式（不同浏览器）
-.form-slider input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 18px;
-  height: 18px;
-  background: white;
-  border-radius: 50%;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-  cursor: pointer;
-  transition: transform 0.2s ease;
-
-  &:hover {
-    transform: scale(1.1);
-  }
-}
-
-.form-slider input[type="range"]::-moz-range-thumb {
-  width: 18px;
-  height: 18px;
-  background: white;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-  cursor: pointer;
-}
-</style>
\ No newline at end of file
+<template>
+  <div class="form-slider">
+    <input
+      type="range"
+      :value="modelValue"
+      :min="min"
+      :max="max"
+      :step="step"
+      :disabled="disabled"
+      @input="handleInput"
+    />
+    <div class="slider-track">
+      <div class="slider-fill" :style="{ width: fillPercent + '%' }"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+  }>(),
+  {
+    min: 0,
+    max: 100,
+    step: 1,
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [value: number];
+}>();
+
+const fillPercent = computed(() => {
+  return ((props.modelValue - props.min) / (props.max - props.min)) * 100;
+});
+
+function handleInput(event: Event) {
+  const value = parseFloat((event.target as HTMLInputElement).value);
+  emit("update:modelValue", value);
+}
+</script>
+
+<style lang="scss" scoped>
+.form-slider {
+  position: relative;
+  width: 100%;
+  height: 24px;
+
+  input[type="range"] {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 2;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+}
+
+.slider-track {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 6px;
+  background: #e5e7eb;
+  border-radius: 3px;
+  transform: translateY(-50%);
+  overflow: hidden;
+
+  .dark & {
+    background: #374151;
+  }
+}
+
+.slider-fill {
+  height: 100%;
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  border-radius: 3px;
+  transition: width 0.1s ease;
+}
+
+// 滑块样式（不同浏览器）
+.form-slider input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  background: white;
+  border-radius: 50%;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+  transition: transform 0.2s ease;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+}
+
+.form-slider input[type="range"]::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  background: white;
+  border: none;
+  border-radius: 50%;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/ui/FormSwitch.vue b/src/components/ui/FormSwitch.vue
index d71c376..47c3754 100644
--- a/src/components/ui/FormSwitch.vue
+++ b/src/components/ui/FormSwitch.vue
@@ -1,80 +1,82 @@
-<template>
-  <label class="form-switch" :class="{ disabled }">
-    <input
-        type="checkbox"
-        :checked="modelValue"
-        :disabled="disabled"
-        @change="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
-    />
-    <span class="switch-slider"></span>
-  </label>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  modelValue: boolean
-  disabled?: boolean
-}>()
-
-defineEmits<{
-  'update:modelValue': [value: boolean]
-}>()
-</script>
-
-<style lang="scss" scoped>
-.form-switch {
-  position: relative;
-  display: inline-flex;
-  width: 44px;
-  height: 24px;
-  cursor: pointer;
-
-  &.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-
-    &:checked + .switch-slider {
-      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-
-      &::before {
-        transform: translateX(20px);
-      }
-    }
-
-    &:focus + .switch-slider {
-      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
-    }
-  }
-}
-
-.switch-slider {
-  position: absolute;
-  inset: 0;
-  background: #d1d5db;
-  border-radius: 24px;
-  transition: all 0.3s ease;
-
-  .dark & {
-    background: #4b5563;
-  }
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    left: 2px;
-    top: 2px;
-    background: white;
-    border-radius: 50%;
-    transition: transform 0.3s ease;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  }
-}
-</style>
\ No newline at end of file
+<template>
+  <label class="form-switch" :class="{ disabled }">
+    <input
+      type="checkbox"
+      :checked="modelValue"
+      :disabled="disabled"
+      @change="
+        $emit('update:modelValue', ($event.target as HTMLInputElement).checked)
+      "
+    />
+    <span class="switch-slider"></span>
+  </label>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  modelValue: boolean;
+  disabled?: boolean;
+}>();
+
+defineEmits<{
+  "update:modelValue": [value: boolean];
+}>();
+</script>
+
+<style lang="scss" scoped>
+.form-switch {
+  position: relative;
+  display: inline-flex;
+  width: 44px;
+  height: 24px;
+  cursor: pointer;
+
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+
+    &:checked + .switch-slider {
+      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+
+      &::before {
+        transform: translateX(20px);
+      }
+    }
+
+    &:focus + .switch-slider {
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+    }
+  }
+}
+
+.switch-slider {
+  position: absolute;
+  inset: 0;
+  background: #d1d5db;
+  border-radius: 24px;
+  transition: all 0.3s ease;
+
+  .dark & {
+    background: #4b5563;
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    left: 2px;
+    top: 2px;
+    background: white;
+    border-radius: 50%;
+    transition: transform 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+}
+</style>
diff --git a/src/composables/useKeyboard.ts b/src/composables/useKeyboard.ts
index c07ddc6..791ab3b 100644
--- a/src/composables/useKeyboard.ts
+++ b/src/composables/useKeyboard.ts
@@ -1,128 +1,133 @@
-import { onMounted, onUnmounted, ref } from 'vue'
-
-export interface KeyboardShortcut {
-    key: string
-    ctrl?: boolean
-    shift?: boolean
-    alt?: boolean
-    meta?: boolean
-    description: string
-    action: () => void
-}
-
-// 快捷键管理组合式函数
-export function useKeyboard(shortcuts: KeyboardShortcut[]) {
-    const activeKeys = ref<Set<string>>(new Set())
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-        activeKeys.value.add(event.key.toLowerCase())
-
-        for (const shortcut of shortcuts) {
-            const keyMatch = event.key.toLowerCase() === shortcut.key.toLowerCase()
-            const ctrlMatch = !!shortcut.ctrl === (event.ctrlKey || event.metaKey)
-            const shiftMatch = !!shortcut.shift === event.shiftKey
-            const altMatch = !!shortcut.alt === event.altKey
-
-            if (keyMatch && ctrlMatch && shiftMatch && altMatch) {
-                // 排除在输入框中的部分快捷键
-                const target = event.target as HTMLElement
-                const isInput = target.tagName === 'INPUT' ||
-                    target.tagName === 'TEXTAREA' ||
-                    target.isContentEditable
-
-                // 这些快捷键在输入框中也生效
-                const globalShortcuts = ['Escape', 'Enter']
-                const needsModifier = shortcut.ctrl || shortcut.alt || shortcut.meta
-
-                if (isInput && !globalShortcuts.includes(shortcut.key) && !needsModifier) {
-                    continue
-                }
-
-                event.preventDefault()
-                shortcut.action()
-                break
-            }
-        }
-    }
-
-    const handleKeyUp = (event: KeyboardEvent) => {
-        activeKeys.value.delete(event.key.toLowerCase())
-    }
-
-    onMounted(() => {
-        window.addEventListener('keydown', handleKeyDown)
-        window.addEventListener('keyup', handleKeyUp)
-    })
-
-    onUnmounted(() => {
-        window.removeEventListener('keydown', handleKeyDown)
-        window.removeEventListener('keyup', handleKeyUp)
-    })
-
-    return {
-        activeKeys,
-    }
-}
-
-// 预定义的快捷键配置
-export function getDefaultShortcuts(actions: {
-    newChat: () => void
-    toggleSidebar: () => void
-    focusInput: () => void
-    sendMessage: () => void
-    cancelStream: () => void
-    toggleTheme: () => void
-    showShortcuts: () => void
-    searchConversations: () => void
-}): KeyboardShortcut[] {
-    return [
-        {
-            key: 'n',
-            ctrl: true,
-            description: '新建对话',
-            action: actions.newChat,
-        },
-        {
-            key: 'b',
-            ctrl: true,
-            description: '切换侧边栏',
-            action: actions.toggleSidebar,
-        },
-        {
-            key: '/',
-            ctrl: true,
-            description: '聚焦输入框',
-            action: actions.focusInput,
-        },
-        {
-            key: 'Enter',
-            ctrl: true,
-            description: '发送消息',
-            action: actions.sendMessage,
-        },
-        {
-            key: 'Escape',
-            description: '取消生成',
-            action: actions.cancelStream,
-        },
-        {
-            key: 'd',
-            ctrl: true,
-            shift: true,
-            description: '切换主题',
-            action: actions.toggleTheme,
-        },
-        {
-            key: '?',
-            ctrl: true,
-            description: '显示快捷键',
-            action: actions.showShortcuts,
-        },
-        {
-            key: 'k',
-            ctrl: true,
-            description: '搜索对话',
-            action: actions.searchConversations,
-        },
-    ]
-}
\ No newline at end of file
+import { onMounted, onUnmounted, ref } from "vue";
+
+export interface KeyboardShortcut {
+  key: string;
+  ctrl?: boolean;
+  shift?: boolean;
+  alt?: boolean;
+  meta?: boolean;
+  description: string;
+  action: () => void;
+}
+
+// 快捷键管理组合式函数
+export function useKeyboard(shortcuts: KeyboardShortcut[]) {
+  const activeKeys = ref<Set<string>>(new Set());
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    activeKeys.value.add(event.key.toLowerCase());
+
+    for (const shortcut of shortcuts) {
+      const keyMatch = event.key.toLowerCase() === shortcut.key.toLowerCase();
+      const ctrlMatch = !!shortcut.ctrl === (event.ctrlKey || event.metaKey);
+      const shiftMatch = !!shortcut.shift === event.shiftKey;
+      const altMatch = !!shortcut.alt === event.altKey;
+
+      if (keyMatch && ctrlMatch && shiftMatch && altMatch) {
+        // 排除在输入框中的部分快捷键
+        const target = event.target as HTMLElement;
+        const isInput =
+          target.tagName === "INPUT" ||
+          target.tagName === "TEXTAREA" ||
+          target.isContentEditable;
+
+        // 这些快捷键在输入框中也生效
+        const globalShortcuts = ["Escape", "Enter"];
+        const needsModifier = shortcut.ctrl || shortcut.alt || shortcut.meta;
+
+        if (
+          isInput &&
+          !globalShortcuts.includes(shortcut.key) &&
+          !needsModifier
+        ) {
+          continue;
+        }
+
+        event.preventDefault();
+        shortcut.action();
+        break;
+      }
+    }
+  };
+
+  const handleKeyUp = (event: KeyboardEvent) => {
+    activeKeys.value.delete(event.key.toLowerCase());
+  };
+
+  onMounted(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener("keydown", handleKeyDown);
+    window.removeEventListener("keyup", handleKeyUp);
+  });
+
+  return {
+    activeKeys,
+  };
+}
+
+// 预定义的快捷键配置
+export function getDefaultShortcuts(actions: {
+  newChat: () => void;
+  toggleSidebar: () => void;
+  focusInput: () => void;
+  sendMessage: () => void;
+  cancelStream: () => void;
+  toggleTheme: () => void;
+  showShortcuts: () => void;
+  searchConversations: () => void;
+}): KeyboardShortcut[] {
+  return [
+    {
+      key: "n",
+      ctrl: true,
+      description: "新建对话",
+      action: actions.newChat,
+    },
+    {
+      key: "b",
+      ctrl: true,
+      description: "切换侧边栏",
+      action: actions.toggleSidebar,
+    },
+    {
+      key: "/",
+      ctrl: true,
+      description: "聚焦输入框",
+      action: actions.focusInput,
+    },
+    {
+      key: "Enter",
+      ctrl: true,
+      description: "发送消息",
+      action: actions.sendMessage,
+    },
+    {
+      key: "Escape",
+      description: "取消生成",
+      action: actions.cancelStream,
+    },
+    {
+      key: "d",
+      ctrl: true,
+      shift: true,
+      description: "切换主题",
+      action: actions.toggleTheme,
+    },
+    {
+      key: "?",
+      ctrl: true,
+      description: "显示快捷键",
+      action: actions.showShortcuts,
+    },
+    {
+      key: "k",
+      ctrl: true,
+      description: "搜索对话",
+      action: actions.searchConversations,
+    },
+  ];
+}
diff --git a/src/main.ts b/src/main.ts
index 932a4d3..eb6cc61 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,26 +1,26 @@
-import { createApp } from "vue";
-import { createPinia } from "pinia";
-import App from "./App.vue";
-
-// 样式
-import "@unocss/reset/tailwind.css";
-import "virtual:uno.css";
-import "./styles/main.scss";
-import "markstream-vue/index.css";
-
-// 创建应用
-const app = createApp(App);
-
-// 使用 Pinia
-const pinia = createPinia();
-app.use(pinia);
-
-// 挂载应用
-app.mount("#app");
-
-// 类型声明
-declare global {
-  interface Window {
-    $toast: (message: string, type?: "success" | "error" | "info") => void;
-  }
-}
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+import App from "./App.vue";
+
+// 样式
+import "@unocss/reset/tailwind.css";
+import "virtual:uno.css";
+import "./styles/main.scss";
+import "markstream-vue/index.css";
+
+// 创建应用
+const app = createApp(App);
+
+// 使用 Pinia
+const pinia = createPinia();
+app.use(pinia);
+
+// 挂载应用
+app.mount("#app");
+
+// 类型声明
+declare global {
+  interface Window {
+    $toast: (message: string, type?: "success" | "error" | "info") => void;
+  }
+}
diff --git a/src/services/api.ts b/src/services/api.ts
index 4f0c16c..236cc66 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -1,301 +1,304 @@
-/**
- * Chat UI API 服务
- * 所有端点都是固定的，后端需要实现这些端点
- */
-// API 端点定义（固定）
-const API_ENDPOINTS = {
-  // 发送消息（流式）
-  CHAT_STREAM: "/api/chat-ui/chat",
-  // 发送消息（非流式）
-  CHAT: "/api/chat-ui/chat",
-  // 获取对话历史
-  CONVERSATIONS: "/api/chat-ui/conversations",
-  // 获取单个对话
-  CONVERSATION: "/api/chat-ui/conversations/:id",
-  // 删除对话
-  DELETE_CONVERSATION: "/api/chat-ui/conversations/:id",
-  // 上传文件
-  UPLOAD: "/api/chat-ui/upload",
-  // 获取模型列表
-  MODELS: "/api/chat-ui/models",
-  // 停止生成
-  STOP: "/api/chat-ui/stop",
-};
-
-// 请求类型定义
-export interface ChatMessage {
-  role: "user" | "assistant" | "system";
-  content: string;
-  images?: string[];
-  files?: string[];
-}
-
-export interface ChatRequest {
-  conversationId?: string;
-  message: string;
-  images?: string[];
-  files?: string[]; // 非图片附件 URL 列表
-  model?: string;
-  temperature?: number;
-  maxTokens?: number;
-  systemPrompt?: string;
-  stream?: boolean;
-  // 历史对话消息（用于上下文记忆）
-  history?: { role: string; content: string }[];
-  // 扩展选项
-  deepSearch?: boolean;
-  webSearch?: boolean;
-  deepThinking?: boolean;
-}
-
-export interface ChatResponse {
-  id: string;
-  conversationId: string;
-  content: string;
-  model: string;
-  createdAt: number;
-  usage?: {
-    promptTokens: number;
-    completionTokens: number;
-    totalTokens: number;
-  };
-}
-
-export interface ModelInfo {
-  id: string;
-  name: string;
-  description: string;
-  maxTokens: number;
-  provider: string;
-}
-
-export interface UploadResult {
-  url: string;
-  name: string;
-  size?: number;
-  mimeType?: string;
-}
-
-// API 调用类
-class ChatApi {
-  private baseUrl: string;
-
-  constructor(baseUrl = "") {
-    this.baseUrl = baseUrl;
-  }
-
-  /**
-   * 流式对话
-   */
-  async *streamChat(
-    request: ChatRequest,
-    signal?: AbortSignal,
-  ): AsyncGenerator<string> {
-    // 构建消息数组，考虑是否包含图片
-    let userContent;
-    if (request.images && request.images.length > 0) {
-      // 如果有图片，则构建内容数组（针对阿里云DashScope API的格式）
-      userContent = [{ type: "text", text: request.message }];
-      // 添加图片URL到内容中（阿里云格式）
-      request.images.forEach((imageUrl) => {
-        userContent.push({
-          type: "image_url",
-          image_url: imageUrl, // 注意：阿里云格式不需要嵌套对象
-        });
-      });
-    } else {
-      // 没有图片时，使用简单的文本
-      userContent = request.message;
-    }
-
-    // 将前端简化的请求翻译为 OpenAI 兼容的规范请求体
-    // 构建 messages 数组：system + 历史消息 + 当前用户消息
-    const systemMessage = {
-      role: "system",
-      content: request.systemPrompt || "你是一个智能助手，可以分析用户发送的文字，文件或图片内容，并进行回答。",
-    };
-    const currentUserMessage = {
-      role: "user",
-      content: userContent,
-    };
-    const allMessages = request.history && request.history.length > 0
-      ? [systemMessage, ...request.history, currentUserMessage]
-      : [systemMessage, currentUserMessage];
-
-    const openAiRequest = {
-      model: request.model || "glm-4-flash",
-      messages: allMessages,
-      stream: true,
-      temperature: request.temperature,
-      max_tokens: request.maxTokens,
-      files: request.files || [],
-      // 扩展参数传递给我们的 Python 后端进行特殊处理
-      deepSearch: request.deepSearch,
-      webSearch: request.webSearch,
-      deepThinking: request.deepThinking,
-    };
-
-    const response = await fetch(
-      `${this.baseUrl}${API_ENDPOINTS.CHAT_STREAM}`,
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Accept: "text/event-stream",
-        },
-        body: JSON.stringify(openAiRequest),
-        signal,
-      },
-    );
-
-    if (!response.ok) {
-      const error = await response.text();
-      throw new Error(error || `HTTP ${response.status}`);
-    }
-
-    const reader = response.body?.getReader();
-    if (!reader) {
-      throw new Error("Response body is not readable");
-    }
-
-    const decoder = new TextDecoder("utf-8");
-    let buffer = "";
-
-    while (true) {
-      const { done, value } = await reader.read();
-      if (done) break;
-
-      buffer += decoder.decode(value, { stream: true });
-      const lines = buffer.split("\n");
-      // 保留最后一行未完整的 JSON
-      buffer = lines.pop() || "";
-
-      for (const line of lines) {
-        if (line.trim() === "" || line.includes("[DONE]")) continue;
-        const match = line.match(/^data:\s*(.+)$/);
-        if (match) {
-          try {
-            const data = JSON.parse(match[1]);
-            // 检查是否有完成原因，如果是完成则跳出
-            const finishReason = data.choices?.[0]?.finish_reason;
-            if (finishReason && finishReason !== "null") {
-              break;
-            }
-
-            const content = data.choices?.[0]?.delta?.content;
-            if (content) {
-              yield content;
-            }
-          } catch (e) {
-            console.warn("JSON解析错误", e, line);
-          }
-        }
-      }
-    }
-  }
-
-  /**
-   * 非流式对话
-   */
-  async chat(request: ChatRequest): Promise<ChatResponse> {
-    // 构建消息数组，考虑是否包含图片
-    let userContent;
-    if (request.images && request.images.length > 0) {
-      // 如果有图片，则构建内容数组
-      userContent = [{ type: "text", text: request.message }];
-      // 添加图片URL到内容中
-      request.images.forEach((imageUrl) => {
-        userContent.push({
-          type: "image_url",
-          image_url: { url: imageUrl },
-        });
-      });
-    } else {
-      // 没有图片时，使用简单的文本
-      userContent = request.message;
-    }
-
-    const requestBody = {
-      ...request,
-      message: userContent,
-    };
-
-    const response = await fetch(`${this.baseUrl}${API_ENDPOINTS.CHAT}`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(requestBody),
-    });
-
-    if (!response.ok) {
-      const error = await response.text();
-      throw new Error(error || `HTTP ${response.status}`);
-    }
-
-    return response.json();
-  }
-
-  /**
-   * 停止对话
-   */
-  async stopChat(messageId?: string) {
-    await fetch(`${this.baseUrl}${API_ENDPOINTS.STOP}/${messageId}`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-  }
-
-  /**
-   * 获取模型列表
-   */
-  async getModels(): Promise<ModelInfo[]> {
-    return [
-      {
-        id: "glm-4.6",
-        name: "智普 GLM-4.6",
-        description: "最强大的模型",
-        maxTokens: 8192,
-        provider: "Zhipu",
-      },
-      // GLM-4.5，联网搜索功能有问题
-      // {
-      //   id: "glm-4.5",
-      //   name: "智普 GLM-4.5",
-      //   description: "能力均衡",
-      //   maxTokens: 8192,
-      //   provider: "Zhipu",
-      // },
-    ];
-  }
-
-  /**
-   * 上传文件
-   */
-  async uploadFile(file: File): Promise<UploadResult> {
-    const formData = new FormData();
-    formData.append("file", file);
-
-    const response = await fetch(`${this.baseUrl}${API_ENDPOINTS.UPLOAD}`, {
-      method: "POST",
-      body: formData,
-    });
-
-    if (!response.ok) {
-      throw new Error(`上传失败: HTTP ${response.status}`);
-    }
-
-    return response.json();
-  }
-}
-
-// 导出单例
-export const chatApi = new ChatApi();
-
-// 导出类用于自定义配置
-export { ChatApi, API_ENDPOINTS };
-
-// 导出端点常量（供调试使用）
-// export {API_ENDPOINTS}
+/**
+ * Chat UI API 服务
+ * 所有端点都是固定的，后端需要实现这些端点
+ */
+// API 端点定义（固定）
+const API_ENDPOINTS = {
+  // 发送消息（流式）
+  CHAT_STREAM: "/api/chat-ui/chat",
+  // 发送消息（非流式）
+  CHAT: "/api/chat-ui/chat",
+  // 获取对话历史
+  CONVERSATIONS: "/api/chat-ui/conversations",
+  // 获取单个对话
+  CONVERSATION: "/api/chat-ui/conversations/:id",
+  // 删除对话
+  DELETE_CONVERSATION: "/api/chat-ui/conversations/:id",
+  // 上传文件
+  UPLOAD: "/api/chat-ui/upload",
+  // 获取模型列表
+  MODELS: "/api/chat-ui/models",
+  // 停止生成
+  STOP: "/api/chat-ui/stop",
+};
+
+// 请求类型定义
+export interface ChatMessage {
+  role: "user" | "assistant" | "system";
+  content: string;
+  images?: string[];
+  files?: string[];
+}
+
+export interface ChatRequest {
+  conversationId?: string;
+  message: string;
+  images?: string[];
+  files?: string[]; // 非图片附件 URL 列表
+  model?: string;
+  temperature?: number;
+  maxTokens?: number;
+  systemPrompt?: string;
+  stream?: boolean;
+  // 历史对话消息（用于上下文记忆）
+  history?: { role: string; content: string }[];
+  // 扩展选项
+  deepSearch?: boolean;
+  webSearch?: boolean;
+  deepThinking?: boolean;
+}
+
+export interface ChatResponse {
+  id: string;
+  conversationId: string;
+  content: string;
+  model: string;
+  createdAt: number;
+  usage?: {
+    promptTokens: number;
+    completionTokens: number;
+    totalTokens: number;
+  };
+}
+
+export interface ModelInfo {
+  id: string;
+  name: string;
+  description: string;
+  maxTokens: number;
+  provider: string;
+}
+
+export interface UploadResult {
+  url: string;
+  name: string;
+  size?: number;
+  mimeType?: string;
+}
+
+// API 调用类
+class ChatApi {
+  private baseUrl: string;
+
+  constructor(baseUrl = "") {
+    this.baseUrl = baseUrl;
+  }
+
+  /**
+   * 流式对话
+   */
+  async *streamChat(
+    request: ChatRequest,
+    signal?: AbortSignal,
+  ): AsyncGenerator<string> {
+    // 构建消息数组，考虑是否包含图片
+    let userContent;
+    if (request.images && request.images.length > 0) {
+      // 如果有图片，则构建内容数组（针对阿里云DashScope API的格式）
+      userContent = [{ type: "text", text: request.message }];
+      // 添加图片URL到内容中（阿里云格式）
+      request.images.forEach((imageUrl) => {
+        userContent.push({
+          type: "image_url",
+          image_url: imageUrl, // 注意：阿里云格式不需要嵌套对象
+        });
+      });
+    } else {
+      // 没有图片时，使用简单的文本
+      userContent = request.message;
+    }
+
+    // 将前端简化的请求翻译为 OpenAI 兼容的规范请求体
+    // 构建 messages 数组：system + 历史消息 + 当前用户消息
+    const systemMessage = {
+      role: "system",
+      content:
+        request.systemPrompt ||
+        "你是一个智能助手，可以分析用户发送的文字，文件或图片内容，并进行回答。",
+    };
+    const currentUserMessage = {
+      role: "user",
+      content: userContent,
+    };
+    const allMessages =
+      request.history && request.history.length > 0
+        ? [systemMessage, ...request.history, currentUserMessage]
+        : [systemMessage, currentUserMessage];
+
+    const openAiRequest = {
+      model: request.model || "glm-4-flash",
+      messages: allMessages,
+      stream: true,
+      temperature: request.temperature,
+      max_tokens: request.maxTokens,
+      files: request.files || [],
+      // 扩展参数传递给我们的 Python 后端进行特殊处理
+      deepSearch: request.deepSearch,
+      webSearch: request.webSearch,
+      deepThinking: request.deepThinking,
+    };
+
+    const response = await fetch(
+      `${this.baseUrl}${API_ENDPOINTS.CHAT_STREAM}`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "text/event-stream",
+        },
+        body: JSON.stringify(openAiRequest),
+        signal,
+      },
+    );
+
+    if (!response.ok) {
+      const error = await response.text();
+      throw new Error(error || `HTTP ${response.status}`);
+    }
+
+    const reader = response.body?.getReader();
+    if (!reader) {
+      throw new Error("Response body is not readable");
+    }
+
+    const decoder = new TextDecoder("utf-8");
+    let buffer = "";
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n");
+      // 保留最后一行未完整的 JSON
+      buffer = lines.pop() || "";
+
+      for (const line of lines) {
+        if (line.trim() === "" || line.includes("[DONE]")) continue;
+        const match = line.match(/^data:\s*(.+)$/);
+        if (match) {
+          try {
+            const data = JSON.parse(match[1]);
+            // 检查是否有完成原因，如果是完成则跳出
+            const finishReason = data.choices?.[0]?.finish_reason;
+            if (finishReason && finishReason !== "null") {
+              break;
+            }
+
+            const content = data.choices?.[0]?.delta?.content;
+            if (content) {
+              yield content;
+            }
+          } catch (e) {
+            console.warn("JSON解析错误", e, line);
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * 非流式对话
+   */
+  async chat(request: ChatRequest): Promise<ChatResponse> {
+    // 构建消息数组，考虑是否包含图片
+    let userContent;
+    if (request.images && request.images.length > 0) {
+      // 如果有图片，则构建内容数组
+      userContent = [{ type: "text", text: request.message }];
+      // 添加图片URL到内容中
+      request.images.forEach((imageUrl) => {
+        userContent.push({
+          type: "image_url",
+          image_url: { url: imageUrl },
+        });
+      });
+    } else {
+      // 没有图片时，使用简单的文本
+      userContent = request.message;
+    }
+
+    const requestBody = {
+      ...request,
+      message: userContent,
+    };
+
+    const response = await fetch(`${this.baseUrl}${API_ENDPOINTS.CHAT}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(requestBody),
+    });
+
+    if (!response.ok) {
+      const error = await response.text();
+      throw new Error(error || `HTTP ${response.status}`);
+    }
+
+    return response.json();
+  }
+
+  /**
+   * 停止对话
+   */
+  async stopChat(messageId?: string) {
+    await fetch(`${this.baseUrl}${API_ENDPOINTS.STOP}/${messageId}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  }
+
+  /**
+   * 获取模型列表
+   */
+  async getModels(): Promise<ModelInfo[]> {
+    return [
+      {
+        id: "glm-4.6",
+        name: "智普 GLM-4.6",
+        description: "最强大的模型",
+        maxTokens: 8192,
+        provider: "Zhipu",
+      },
+      // GLM-4.5，联网搜索功能有问题
+      // {
+      //   id: "glm-4.5",
+      //   name: "智普 GLM-4.5",
+      //   description: "能力均衡",
+      //   maxTokens: 8192,
+      //   provider: "Zhipu",
+      // },
+    ];
+  }
+
+  /**
+   * 上传文件
+   */
+  async uploadFile(file: File): Promise<UploadResult> {
+    const formData = new FormData();
+    formData.append("file", file);
+
+    const response = await fetch(`${this.baseUrl}${API_ENDPOINTS.UPLOAD}`, {
+      method: "POST",
+      body: formData,
+    });
+
+    if (!response.ok) {
+      throw new Error(`上传失败: HTTP ${response.status}`);
+    }
+
+    return response.json();
+  }
+}
+
+// 导出单例
+export const chatApi = new ChatApi();
+
+// 导出类用于自定义配置
+export { ChatApi, API_ENDPOINTS };
+
+// 导出端点常量（供调试使用）
+// export {API_ENDPOINTS}
diff --git a/src/stores/chat.ts b/src/stores/chat.ts
index 30742b6..598d45a 100644
--- a/src/stores/chat.ts
+++ b/src/stores/chat.ts
@@ -1,285 +1,285 @@
-import { defineStore } from "pinia";
-import { ref, computed } from "vue";
-import type {
-  Conversation,
-  Message,
-  MessageContent,
-  ConversationSettings,
-} from "@/types/chat";
-import { MessageRole } from "@/types/chat";
-import { generateId, extractTitleFromMessage } from "@/utils/helpers";
-
-export const useChatStore = defineStore("chat", () => {
-  // 状态
-  const conversations = ref<Conversation[]>([]);
-  const currentConversationId = ref<string | null>(null);
-  const isStreaming = ref(false);
-  const streamController = ref<AbortController | null>(null);
-
-  // 计算属性
-  const currentConversation = computed(() => {
-    return (
-      conversations.value.find((c) => c.id === currentConversationId.value) ||
-      null
-    );
-  });
-
-  const sortedConversations = computed(() => {
-    return [...conversations.value].sort((a, b) => {
-      if (a.pinned && !b.pinned) return -1;
-      if (!a.pinned && b.pinned) return 1;
-      return b.updatedAt - a.updatedAt;
-    });
-  });
-
-  const pinnedConversations = computed(() => {
-    return sortedConversations.value.filter((c) => c.pinned && !c.archived);
-  });
-
-  const recentConversations = computed(() => {
-    return sortedConversations.value.filter((c) => !c.pinned && !c.archived);
-  });
-
-  // 方法
-  function createConversation(): string {
-    const newConversation: Conversation = {
-      id: generateId(),
-      title: "新对话",
-      messages: [],
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
-      pinned: false,
-      archived: false,
-      settings: undefined,
-    };
-
-    conversations.value.unshift(newConversation);
-    currentConversationId.value = newConversation.id;
-    saveToStorage();
-
-    return newConversation.id;
-  }
-
-  function deleteConversation(id: string) {
-    const index = conversations.value.findIndex((c) => c.id === id);
-    if (index !== -1) {
-      conversations.value.splice(index, 1);
-
-      if (currentConversationId.value === id) {
-        currentConversationId.value = conversations.value[0]?.id || null;
-      }
-
-      saveToStorage();
-    }
-  }
-
-  function selectConversation(id: string) {
-    currentConversationId.value = id;
-  }
-
-  function togglePinConversation(id: string) {
-    const conversation = conversations.value.find((c) => c.id === id);
-    if (conversation) {
-      conversation.pinned = !conversation.pinned;
-      saveToStorage();
-    }
-  }
-
-  function renameConversation(id: string, newTitle: string) {
-    const conversation = conversations.value.find((c) => c.id === id);
-    if (conversation) {
-      conversation.title = newTitle;
-      conversation.updatedAt = Date.now();
-      saveToStorage();
-    }
-  }
-
-  function updateConversationSettings(
-    id: string,
-    convSettings: ConversationSettings,
-  ) {
-    const conversation = conversations.value.find((c) => c.id === id);
-    if (conversation) {
-      conversation.settings = { ...conversation.settings, ...convSettings };
-      conversation.updatedAt = Date.now();
-      saveToStorage();
-    }
-  }
-
-  function addMessage(
-    role: MessageRole,
-    content: MessageContent,
-    conversationId?: string,
-  ): Message {
-    const targetId = conversationId || currentConversationId.value;
-
-    if (!targetId) {
-      createConversation();
-    }
-
-    const conversation = conversations.value.find(
-      (c) => c.id === (targetId || currentConversationId.value),
-    );
-
-    if (!conversation) {
-      throw new Error("Conversation not found");
-    }
-
-    const message: any = {
-      id: generateId(),
-      role,
-      content,
-      timestamp: Date.now(),
-      isStreaming: false,
-    };
-
-    conversation.messages.push(message);
-    conversation.updatedAt = Date.now();
-
-    if (
-      role === MessageRole.USER &&
-      conversation.messages.length === 1 &&
-      content.text
-    ) {
-      conversation.title = extractTitleFromMessage(content.text);
-    }
-
-    saveToStorage();
-    return message;
-  }
-
-  function updateMessage(messageId: string, updates: Partial<Message>) {
-    const conversation = currentConversation.value;
-    if (!conversation) return;
-
-    const message = conversation.messages.find((m) => m.id === messageId);
-    if (message) {
-      Object.assign(message, updates);
-      saveToStorage();
-    }
-  }
-
-  function updateMessageContent(messageId: string, text: string) {
-    const conversation = currentConversation.value;
-    if (!conversation) return;
-
-    const message = conversation.messages.find((m) => m.id === messageId);
-    if (message) {
-      message.content.text = text;
-    }
-  }
-
-  function setMessageFeedback(
-    messageId: string,
-    feedback: "like" | "dislike" | null,
-  ) {
-    const conversation = currentConversation.value;
-    if (!conversation) return;
-
-    const message = conversation.messages.find((m) => m.id === messageId);
-    if (message) {
-      message.feedback = {
-        liked: feedback === "like",
-        disliked: feedback === "dislike",
-        copied: message.feedback?.copied,
-      };
-      saveToStorage();
-    }
-  }
-
-  function setMessageCopied(messageId: string) {
-    const conversation = currentConversation.value;
-    if (!conversation) return;
-
-    const message = conversation.messages.find((m) => m.id === messageId);
-    if (message) {
-      message.feedback = {
-        ...message.feedback,
-        copied: true,
-      };
-    }
-  }
-
-  function startStreaming() {
-    isStreaming.value = true;
-    streamController.value = new AbortController();
-  }
-
-  function stopStreaming() {
-    isStreaming.value = false;
-    if (streamController.value) {
-      streamController.value.abort();
-      streamController.value = null;
-    }
-  }
-
-  function clearConversation(id: string) {
-    const conversation = conversations.value.find((c) => c.id === id);
-    if (conversation) {
-      conversation.messages = [];
-      conversation.updatedAt = Date.now();
-      saveToStorage();
-    }
-  }
-
-  function saveToStorage() {
-    try {
-      localStorage.setItem(
-        "chat-conversations",
-        JSON.stringify(conversations.value),
-      );
-      localStorage.setItem(
-        "chat-current-id",
-        currentConversationId.value || "",
-      );
-    } catch (e) {
-      console.error("Failed to save to storage:", e);
-    }
-  }
-
-  function loadFromStorage() {
-    try {
-      const stored = localStorage.getItem("chat-conversations");
-      if (stored) {
-        conversations.value = JSON.parse(stored);
-      }
-
-      const storedId = localStorage.getItem("chat-current-id");
-      if (storedId && conversations.value.find((c) => c.id === storedId)) {
-        currentConversationId.value = storedId;
-      } else if (conversations.value.length > 0) {
-        currentConversationId.value = conversations.value[0].id;
-      }
-    } catch (e) {
-      console.error("Failed to load from storage:", e);
-    }
-  }
-
-  loadFromStorage();
-
-  return {
-    conversations,
-    currentConversationId,
-    isStreaming,
-    streamController,
-    currentConversation,
-    sortedConversations,
-    pinnedConversations,
-    recentConversations,
-    createConversation,
-    deleteConversation,
-    selectConversation,
-    togglePinConversation,
-    renameConversation,
-    updateConversationSettings,
-    addMessage,
-    updateMessage,
-    updateMessageContent,
-    setMessageFeedback,
-    setMessageCopied,
-    startStreaming,
-    stopStreaming,
-    clearConversation,
-    loadFromStorage,
-  };
-});
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+import type {
+  Conversation,
+  Message,
+  MessageContent,
+  ConversationSettings,
+} from "@/types/chat";
+import { MessageRole } from "@/types/chat";
+import { generateId, extractTitleFromMessage } from "@/utils/helpers";
+
+export const useChatStore = defineStore("chat", () => {
+  // 状态
+  const conversations = ref<Conversation[]>([]);
+  const currentConversationId = ref<string | null>(null);
+  const isStreaming = ref(false);
+  const streamController = ref<AbortController | null>(null);
+
+  // 计算属性
+  const currentConversation = computed(() => {
+    return (
+      conversations.value.find((c) => c.id === currentConversationId.value) ||
+      null
+    );
+  });
+
+  const sortedConversations = computed(() => {
+    return [...conversations.value].sort((a, b) => {
+      if (a.pinned && !b.pinned) return -1;
+      if (!a.pinned && b.pinned) return 1;
+      return b.updatedAt - a.updatedAt;
+    });
+  });
+
+  const pinnedConversations = computed(() => {
+    return sortedConversations.value.filter((c) => c.pinned && !c.archived);
+  });
+
+  const recentConversations = computed(() => {
+    return sortedConversations.value.filter((c) => !c.pinned && !c.archived);
+  });
+
+  // 方法
+  function createConversation(): string {
+    const newConversation: Conversation = {
+      id: generateId(),
+      title: "新对话",
+      messages: [],
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+      pinned: false,
+      archived: false,
+      settings: undefined,
+    };
+
+    conversations.value.unshift(newConversation);
+    currentConversationId.value = newConversation.id;
+    saveToStorage();
+
+    return newConversation.id;
+  }
+
+  function deleteConversation(id: string) {
+    const index = conversations.value.findIndex((c) => c.id === id);
+    if (index !== -1) {
+      conversations.value.splice(index, 1);
+
+      if (currentConversationId.value === id) {
+        currentConversationId.value = conversations.value[0]?.id || null;
+      }
+
+      saveToStorage();
+    }
+  }
+
+  function selectConversation(id: string) {
+    currentConversationId.value = id;
+  }
+
+  function togglePinConversation(id: string) {
+    const conversation = conversations.value.find((c) => c.id === id);
+    if (conversation) {
+      conversation.pinned = !conversation.pinned;
+      saveToStorage();
+    }
+  }
+
+  function renameConversation(id: string, newTitle: string) {
+    const conversation = conversations.value.find((c) => c.id === id);
+    if (conversation) {
+      conversation.title = newTitle;
+      conversation.updatedAt = Date.now();
+      saveToStorage();
+    }
+  }
+
+  function updateConversationSettings(
+    id: string,
+    convSettings: ConversationSettings,
+  ) {
+    const conversation = conversations.value.find((c) => c.id === id);
+    if (conversation) {
+      conversation.settings = { ...conversation.settings, ...convSettings };
+      conversation.updatedAt = Date.now();
+      saveToStorage();
+    }
+  }
+
+  function addMessage(
+    role: MessageRole,
+    content: MessageContent,
+    conversationId?: string,
+  ): Message {
+    const targetId = conversationId || currentConversationId.value;
+
+    if (!targetId) {
+      createConversation();
+    }
+
+    const conversation = conversations.value.find(
+      (c) => c.id === (targetId || currentConversationId.value),
+    );
+
+    if (!conversation) {
+      throw new Error("Conversation not found");
+    }
+
+    const message: any = {
+      id: generateId(),
+      role,
+      content,
+      timestamp: Date.now(),
+      isStreaming: false,
+    };
+
+    conversation.messages.push(message);
+    conversation.updatedAt = Date.now();
+
+    if (
+      role === MessageRole.USER &&
+      conversation.messages.length === 1 &&
+      content.text
+    ) {
+      conversation.title = extractTitleFromMessage(content.text);
+    }
+
+    saveToStorage();
+    return message;
+  }
+
+  function updateMessage(messageId: string, updates: Partial<Message>) {
+    const conversation = currentConversation.value;
+    if (!conversation) return;
+
+    const message = conversation.messages.find((m) => m.id === messageId);
+    if (message) {
+      Object.assign(message, updates);
+      saveToStorage();
+    }
+  }
+
+  function updateMessageContent(messageId: string, text: string) {
+    const conversation = currentConversation.value;
+    if (!conversation) return;
+
+    const message = conversation.messages.find((m) => m.id === messageId);
+    if (message) {
+      message.content.text = text;
+    }
+  }
+
+  function setMessageFeedback(
+    messageId: string,
+    feedback: "like" | "dislike" | null,
+  ) {
+    const conversation = currentConversation.value;
+    if (!conversation) return;
+
+    const message = conversation.messages.find((m) => m.id === messageId);
+    if (message) {
+      message.feedback = {
+        liked: feedback === "like",
+        disliked: feedback === "dislike",
+        copied: message.feedback?.copied,
+      };
+      saveToStorage();
+    }
+  }
+
+  function setMessageCopied(messageId: string) {
+    const conversation = currentConversation.value;
+    if (!conversation) return;
+
+    const message = conversation.messages.find((m) => m.id === messageId);
+    if (message) {
+      message.feedback = {
+        ...message.feedback,
+        copied: true,
+      };
+    }
+  }
+
+  function startStreaming() {
+    isStreaming.value = true;
+    streamController.value = new AbortController();
+  }
+
+  function stopStreaming() {
+    isStreaming.value = false;
+    if (streamController.value) {
+      streamController.value.abort();
+      streamController.value = null;
+    }
+  }
+
+  function clearConversation(id: string) {
+    const conversation = conversations.value.find((c) => c.id === id);
+    if (conversation) {
+      conversation.messages = [];
+      conversation.updatedAt = Date.now();
+      saveToStorage();
+    }
+  }
+
+  function saveToStorage() {
+    try {
+      localStorage.setItem(
+        "chat-conversations",
+        JSON.stringify(conversations.value),
+      );
+      localStorage.setItem(
+        "chat-current-id",
+        currentConversationId.value || "",
+      );
+    } catch (e) {
+      console.error("Failed to save to storage:", e);
+    }
+  }
+
+  function loadFromStorage() {
+    try {
+      const stored = localStorage.getItem("chat-conversations");
+      if (stored) {
+        conversations.value = JSON.parse(stored);
+      }
+
+      const storedId = localStorage.getItem("chat-current-id");
+      if (storedId && conversations.value.find((c) => c.id === storedId)) {
+        currentConversationId.value = storedId;
+      } else if (conversations.value.length > 0) {
+        currentConversationId.value = conversations.value[0].id;
+      }
+    } catch (e) {
+      console.error("Failed to load from storage:", e);
+    }
+  }
+
+  loadFromStorage();
+
+  return {
+    conversations,
+    currentConversationId,
+    isStreaming,
+    streamController,
+    currentConversation,
+    sortedConversations,
+    pinnedConversations,
+    recentConversations,
+    createConversation,
+    deleteConversation,
+    selectConversation,
+    togglePinConversation,
+    renameConversation,
+    updateConversationSettings,
+    addMessage,
+    updateMessage,
+    updateMessageContent,
+    setMessageFeedback,
+    setMessageCopied,
+    startStreaming,
+    stopStreaming,
+    clearConversation,
+    loadFromStorage,
+  };
+});
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index be9b3f5..6589022 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -1,304 +1,310 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-import type { AppSettings, AIModel } from '@/types/chat'
-
-export const useSettingsStore = defineStore('settings', () => {
-    // 默认设置
-    const defaultSettings: AppSettings = {
-        // 外观设置
-        theme: 'system',
-        language: 'zh-CN',
-        fontSize: 'medium',
-
-        // 对话设置
-        sendOnEnter: false,
-        showTimestamp: true,
-        compactMode: false,
-
-        // AI 默认设置
-        defaultModel: 'glm-4.6',
-        defaultTemperature: 0.7,
-        defaultMaxTokens: 4096,
-        defaultSystemPrompt: '你是一个有帮助的 AI 助手。',
-
-        // 功能设置
-        enableSound: true,
-        enableNotification: true,
-        autoSaveInterval: 30,
-
-        // 隐私设置
-        saveHistory: true,
-        shareAnalytics: false,
-    }
-
-    // 可用的 AI 模型
-    const availableModels: AIModel[] = [
-        {
-        id: "glm-4.6",
-        name: "智普 GLM-4.6",
-        description: "最强大的模型",
-        maxTokens: 8192,
-        provider: "Zhipu",
-      },
-      {
-        id: "glm-4.5",
-        name: "智普 GLM-4.5",
-        description: "能力均衡",
-        maxTokens: 8192,
-        provider: "Zhipu",
-      },
-        {
-            id: 'glm-4-flash',
-            name: '智普 GLM-4-Flash',
-            description: '快速高效，适合日常对话',
-            maxTokens: 8192,
-            provider: 'Zhipu',
-        },
-        {
-            id: 'glm-4v-plus',
-            name: '智普 GLM-4V-Plus',
-            description: '强大的视觉理解模型',
-            maxTokens: 8192,
-            provider: 'Zhipu',
-        },
-    ]
-
-    // 状态
-    const settings = ref<AppSettings>({ ...defaultSettings })
-    const sidebarCollapsed = ref(false)
-    const sidebarWidth = ref(280)
-    const showShortcutsModal = ref(false)
-    const showSearchModal = ref(false)
-    const showSettingsModal = ref(false)
-    const showConversationSettingsModal = ref(false)
-
-    // 主题相关
-    function applyTheme(theme: AppSettings['theme']) {
-        const root = document.documentElement
-
-        if (theme === 'system') {
-            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-            root.classList.toggle('dark', prefersDark)
-        } else {
-            root.classList.toggle('dark', theme === 'dark')
-        }
-    }
-
-    function toggleTheme() {
-        const themes: AppSettings['theme'][] = ['light', 'dark', 'system']
-        const currentIndex = themes.indexOf(settings.value.theme)
-        settings.value.theme = themes[(currentIndex + 1) % themes.length]
-        applyTheme(settings.value.theme)
-        saveToStorage()
-    }
-
-    function setTheme(theme: AppSettings['theme']) {
-        settings.value.theme = theme
-        applyTheme(theme)
-        saveToStorage()
-    }
-
-    // 字体大小
-    function applyFontSize(size: AppSettings['fontSize']) {
-        const root = document.documentElement
-        const sizeMap = {
-            small: '14px',
-            medium: '16px',
-            large: '18px',
-        }
-        root.style.setProperty('--base-font-size', sizeMap[size])
-    }
-
-    function setFontSize(size: AppSettings['fontSize']) {
-        settings.value.fontSize = size
-        applyFontSize(size)
-        saveToStorage()
-    }
-
-    // 侧边栏
-    function toggleSidebar() {
-        sidebarCollapsed.value = !sidebarCollapsed.value
-        saveToStorage()
-    }
-
-    function setSidebarWidth(width: number) {
-        sidebarWidth.value = Math.max(200, Math.min(400, width))
-        saveToStorage()
-    }
-
-    // 模态框
-    function openShortcutsModal() {
-        showShortcutsModal.value = true
-    }
-
-    function closeShortcutsModal() {
-        showShortcutsModal.value = false
-    }
-
-    function openSearchModal() {
-        showSearchModal.value = true
-    }
-
-    function closeSearchModal() {
-        showSearchModal.value = false
-    }
-
-    function openSettingsModal() {
-        showSettingsModal.value = true
-    }
-
-    function closeSettingsModal() {
-        showSettingsModal.value = false
-    }
-
-    function openConversationSettingsModal() {
-        showConversationSettingsModal.value = true
-    }
-
-    function closeConversationSettingsModal() {
-        showConversationSettingsModal.value = false
-    }
-
-    // 更新设置
-    function updateSettings(updates: Partial<AppSettings>) {
-        Object.assign(settings.value, updates)
-
-        if (updates.theme) {
-            applyTheme(updates.theme)
-        }
-
-        if (updates.fontSize) {
-            applyFontSize(updates.fontSize)
-        }
-
-        saveToStorage()
-    }
-
-    // 重置设置
-    function resetSettings() {
-        settings.value = { ...defaultSettings }
-        applyTheme(settings.value.theme)
-        applyFontSize(settings.value.fontSize)
-        saveToStorage()
-    }
-
-    // 导出设置
-    function exportSettings(): string {
-        return JSON.stringify(settings.value, null, 2)
-    }
-
-    // 导入设置
-    function importSettings(json: string): boolean {
-        try {
-            const imported = JSON.parse(json)
-            settings.value = { ...defaultSettings, ...imported }
-            applyTheme(settings.value.theme)
-            applyFontSize(settings.value.fontSize)
-            saveToStorage()
-            return true
-        } catch {
-            return false
-        }
-    }
-
-    // 存储
-    function saveToStorage() {
-        try {
-            localStorage.setItem('chat-settings', JSON.stringify(settings.value))
-            localStorage.setItem('chat-sidebar-collapsed', JSON.stringify(sidebarCollapsed.value))
-            localStorage.setItem('chat-sidebar-width', JSON.stringify(sidebarWidth.value))
-        } catch (e) {
-            console.error('Failed to save settings:', e)
-        }
-    }
-
-
-    // 存储选中模型 ID 的 localStorage key
-    const MODEL_ID_KEY = 'modelSelectId'
-
-    // 获取当前选择的模型 ID
-    function getSelectedModelId(): string {
-       
-        return defaultSettings.defaultModel
-    }
-
-    // 设置当前选择的模型 ID
-    function setSelectedModelId(modelId: string) {
-        localStorage.setItem(MODEL_ID_KEY, modelId)
-        // 同时更新 settings 中的 defaultModel
-        settings.value.defaultModel = modelId
-        saveToStorage()
-    }
-
-    function loadFromStorage() {
-        try {
-            const stored = localStorage.getItem('chat-settings')
-            if (stored) {
-                settings.value = { ...defaultSettings, ...JSON.parse(stored) }
-            }
-
-            const collapsedStored = localStorage.getItem('chat-sidebar-collapsed')
-            if (collapsedStored) {
-                sidebarCollapsed.value = JSON.parse(collapsedStored)
-            }
-
-            const widthStored = localStorage.getItem('chat-sidebar-width')
-            if (widthStored) {
-                sidebarWidth.value = JSON.parse(widthStored)
-            }
-
-            // 应用主题和字体
-            applyTheme(settings.value.theme)
-            applyFontSize(settings.value.fontSize)
-        } catch (e) {
-            console.error('Failed to load settings:', e)
-        }
-    }
-
-    // 监听系统主题变化
-    if (typeof window !== 'undefined') {
-        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
-        mediaQuery.addEventListener('change', () => {
-            if (settings.value.theme === 'system') {
-                applyTheme('system')
-            }
-        })
-    }
-
-    // 初始化
-    loadFromStorage()
-
-    return {
-        // 状态
-        settings,
-        sidebarCollapsed,
-        sidebarWidth,
-        showShortcutsModal,
-        showSearchModal,
-        showSettingsModal,
-        showConversationSettingsModal,
-        availableModels,
-
-        // 方法
-        toggleTheme,
-        setTheme,
-        setFontSize,
-        toggleSidebar,
-        setSidebarWidth,
-        openShortcutsModal,
-        closeShortcutsModal,
-        openSearchModal,
-        closeSearchModal,
-        openSettingsModal,
-        closeSettingsModal,
-        openConversationSettingsModal,
-        closeConversationSettingsModal,
-        updateSettings,
-        resetSettings,
-        exportSettings,
-        importSettings,
-        loadFromStorage,
-        getSelectedModelId,
-        setSelectedModelId,
-    }
-})
\ No newline at end of file
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { AppSettings, AIModel } from "@/types/chat";
+
+export const useSettingsStore = defineStore("settings", () => {
+  // 默认设置
+  const defaultSettings: AppSettings = {
+    // 外观设置
+    theme: "system",
+    language: "zh-CN",
+    fontSize: "medium",
+
+    // 对话设置
+    sendOnEnter: false,
+    showTimestamp: true,
+    compactMode: false,
+
+    // AI 默认设置
+    defaultModel: "glm-4.6",
+    defaultTemperature: 0.7,
+    defaultMaxTokens: 4096,
+    defaultSystemPrompt: "你是一个有帮助的 AI 助手。",
+
+    // 功能设置
+    enableSound: true,
+    enableNotification: true,
+    autoSaveInterval: 30,
+
+    // 隐私设置
+    saveHistory: true,
+    shareAnalytics: false,
+  };
+
+  // 可用的 AI 模型
+  const availableModels: AIModel[] = [
+    {
+      id: "glm-4.6",
+      name: "智普 GLM-4.6",
+      description: "最强大的模型",
+      maxTokens: 8192,
+      provider: "Zhipu",
+    },
+    {
+      id: "glm-4.5",
+      name: "智普 GLM-4.5",
+      description: "能力均衡",
+      maxTokens: 8192,
+      provider: "Zhipu",
+    },
+    {
+      id: "glm-4-flash",
+      name: "智普 GLM-4-Flash",
+      description: "快速高效，适合日常对话",
+      maxTokens: 8192,
+      provider: "Zhipu",
+    },
+    {
+      id: "glm-4v-plus",
+      name: "智普 GLM-4V-Plus",
+      description: "强大的视觉理解模型",
+      maxTokens: 8192,
+      provider: "Zhipu",
+    },
+  ];
+
+  // 状态
+  const settings = ref<AppSettings>({ ...defaultSettings });
+  const sidebarCollapsed = ref(false);
+  const sidebarWidth = ref(280);
+  const showShortcutsModal = ref(false);
+  const showSearchModal = ref(false);
+  const showSettingsModal = ref(false);
+  const showConversationSettingsModal = ref(false);
+
+  // 主题相关
+  function applyTheme(theme: AppSettings["theme"]) {
+    const root = document.documentElement;
+
+    if (theme === "system") {
+      const prefersDark = window.matchMedia(
+        "(prefers-color-scheme: dark)",
+      ).matches;
+      root.classList.toggle("dark", prefersDark);
+    } else {
+      root.classList.toggle("dark", theme === "dark");
+    }
+  }
+
+  function toggleTheme() {
+    const themes: AppSettings["theme"][] = ["light", "dark", "system"];
+    const currentIndex = themes.indexOf(settings.value.theme);
+    settings.value.theme = themes[(currentIndex + 1) % themes.length];
+    applyTheme(settings.value.theme);
+    saveToStorage();
+  }
+
+  function setTheme(theme: AppSettings["theme"]) {
+    settings.value.theme = theme;
+    applyTheme(theme);
+    saveToStorage();
+  }
+
+  // 字体大小
+  function applyFontSize(size: AppSettings["fontSize"]) {
+    const root = document.documentElement;
+    const sizeMap = {
+      small: "14px",
+      medium: "16px",
+      large: "18px",
+    };
+    root.style.setProperty("--base-font-size", sizeMap[size]);
+  }
+
+  function setFontSize(size: AppSettings["fontSize"]) {
+    settings.value.fontSize = size;
+    applyFontSize(size);
+    saveToStorage();
+  }
+
+  // 侧边栏
+  function toggleSidebar() {
+    sidebarCollapsed.value = !sidebarCollapsed.value;
+    saveToStorage();
+  }
+
+  function setSidebarWidth(width: number) {
+    sidebarWidth.value = Math.max(200, Math.min(400, width));
+    saveToStorage();
+  }
+
+  // 模态框
+  function openShortcutsModal() {
+    showShortcutsModal.value = true;
+  }
+
+  function closeShortcutsModal() {
+    showShortcutsModal.value = false;
+  }
+
+  function openSearchModal() {
+    showSearchModal.value = true;
+  }
+
+  function closeSearchModal() {
+    showSearchModal.value = false;
+  }
+
+  function openSettingsModal() {
+    showSettingsModal.value = true;
+  }
+
+  function closeSettingsModal() {
+    showSettingsModal.value = false;
+  }
+
+  function openConversationSettingsModal() {
+    showConversationSettingsModal.value = true;
+  }
+
+  function closeConversationSettingsModal() {
+    showConversationSettingsModal.value = false;
+  }
+
+  // 更新设置
+  function updateSettings(updates: Partial<AppSettings>) {
+    Object.assign(settings.value, updates);
+
+    if (updates.theme) {
+      applyTheme(updates.theme);
+    }
+
+    if (updates.fontSize) {
+      applyFontSize(updates.fontSize);
+    }
+
+    saveToStorage();
+  }
+
+  // 重置设置
+  function resetSettings() {
+    settings.value = { ...defaultSettings };
+    applyTheme(settings.value.theme);
+    applyFontSize(settings.value.fontSize);
+    saveToStorage();
+  }
+
+  // 导出设置
+  function exportSettings(): string {
+    return JSON.stringify(settings.value, null, 2);
+  }
+
+  // 导入设置
+  function importSettings(json: string): boolean {
+    try {
+      const imported = JSON.parse(json);
+      settings.value = { ...defaultSettings, ...imported };
+      applyTheme(settings.value.theme);
+      applyFontSize(settings.value.fontSize);
+      saveToStorage();
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  // 存储
+  function saveToStorage() {
+    try {
+      localStorage.setItem("chat-settings", JSON.stringify(settings.value));
+      localStorage.setItem(
+        "chat-sidebar-collapsed",
+        JSON.stringify(sidebarCollapsed.value),
+      );
+      localStorage.setItem(
+        "chat-sidebar-width",
+        JSON.stringify(sidebarWidth.value),
+      );
+    } catch (e) {
+      console.error("Failed to save settings:", e);
+    }
+  }
+
+  // 存储选中模型 ID 的 localStorage key
+  const MODEL_ID_KEY = "modelSelectId";
+
+  // 获取当前选择的模型 ID
+  function getSelectedModelId(): string {
+    return defaultSettings.defaultModel;
+  }
+
+  // 设置当前选择的模型 ID
+  function setSelectedModelId(modelId: string) {
+    localStorage.setItem(MODEL_ID_KEY, modelId);
+    // 同时更新 settings 中的 defaultModel
+    settings.value.defaultModel = modelId;
+    saveToStorage();
+  }
+
+  function loadFromStorage() {
+    try {
+      const stored = localStorage.getItem("chat-settings");
+      if (stored) {
+        settings.value = { ...defaultSettings, ...JSON.parse(stored) };
+      }
+
+      const collapsedStored = localStorage.getItem("chat-sidebar-collapsed");
+      if (collapsedStored) {
+        sidebarCollapsed.value = JSON.parse(collapsedStored);
+      }
+
+      const widthStored = localStorage.getItem("chat-sidebar-width");
+      if (widthStored) {
+        sidebarWidth.value = JSON.parse(widthStored);
+      }
+
+      // 应用主题和字体
+      applyTheme(settings.value.theme);
+      applyFontSize(settings.value.fontSize);
+    } catch (e) {
+      console.error("Failed to load settings:", e);
+    }
+  }
+
+  // 监听系统主题变化
+  if (typeof window !== "undefined") {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    mediaQuery.addEventListener("change", () => {
+      if (settings.value.theme === "system") {
+        applyTheme("system");
+      }
+    });
+  }
+
+  // 初始化
+  loadFromStorage();
+
+  return {
+    // 状态
+    settings,
+    sidebarCollapsed,
+    sidebarWidth,
+    showShortcutsModal,
+    showSearchModal,
+    showSettingsModal,
+    showConversationSettingsModal,
+    availableModels,
+
+    // 方法
+    toggleTheme,
+    setTheme,
+    setFontSize,
+    toggleSidebar,
+    setSidebarWidth,
+    openShortcutsModal,
+    closeShortcutsModal,
+    openSearchModal,
+    closeSearchModal,
+    openSettingsModal,
+    closeSettingsModal,
+    openConversationSettingsModal,
+    closeConversationSettingsModal,
+    updateSettings,
+    resetSettings,
+    exportSettings,
+    importSettings,
+    loadFromStorage,
+    getSelectedModelId,
+    setSelectedModelId,
+  };
+});
diff --git a/src/style.css b/src/style.css
index 138b117..f691315 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,79 +1,79 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 4375cb1..c2ca481 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,78 +1,84 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-// 自定义滚动条
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: rgba(155, 155, 155, 0.5);
-  border-radius: 3px;
-
-  &:hover {
-    background: rgba(155, 155, 155, 0.7);
-  }
-}
-
-// 暗色模式滚动条
-.dark {
-  ::-webkit-scrollbar-thumb {
-    background: rgba(100, 100, 100, 0.5);
-
-    &:hover {
-      background: rgba(100, 100, 100, 0.7);
-    }
-  }
-}
-
-// 全局变量
-:root {
-  --chat-sidebar-width: 280px;
-  --chat-input-height: 140px;
-  --header-height: 60px;
-}
-
-// 基础样式重置
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-// 过渡动画
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.slide-enter-active,
-.slide-leave-active {
-  transition: all 0.3s ease;
-}
-
-.slide-enter-from {
-  opacity: 0;
-  transform: translateX(-20px);
-}
-
-.slide-leave-to {
-  opacity: 0;
-  transform: translateX(-20px);
-}
\ No newline at end of file
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+// 自定义滚动条
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(155, 155, 155, 0.5);
+  border-radius: 3px;
+
+  &:hover {
+    background: rgba(155, 155, 155, 0.7);
+  }
+}
+
+// 暗色模式滚动条
+.dark {
+  ::-webkit-scrollbar-thumb {
+    background: rgba(100, 100, 100, 0.5);
+
+    &:hover {
+      background: rgba(100, 100, 100, 0.7);
+    }
+  }
+}
+
+// 全局变量
+:root {
+  --chat-sidebar-width: 280px;
+  --chat-input-height: 140px;
+  --header-height: 60px;
+}
+
+// 基础样式重置
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family:
+    "Inter",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// 过渡动画
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: all 0.3s ease;
+}
+
+.slide-enter-from {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+
+.slide-leave-to {
+  opacity: 0;
+  transform: translateX(-20px);
+}
diff --git a/src/types/chat.ts b/src/types/chat.ts
index 1be82fd..3a0f8e2 100644
--- a/src/types/chat.ts
+++ b/src/types/chat.ts
@@ -1,147 +1,147 @@
-// 消息类型枚举
-export enum MessageType {
-  TEXT = "text",
-  IMAGE = "image",
-  VIDEO = "video",
-  MULTI_VIDEO = "multi_video",
-  FILE = "file",
-  CODE = "code",
-  SUGGESTION = "suggestion",
-  THINKING = "thinking",
-}
-
-// 消息角色
-export enum MessageRole {
-  USER = "user",
-  ASSISTANT = "assistant",
-  SYSTEM = "system",
-}
-
-// 附件类型
-export interface Attachment {
-  id: string;
-  name: string;
-  type: "image" | "file" | "video";
-  url: string;
-  size?: number;
-  mimeType?: string;
-  thumbnail?: string;
-  uploading?: boolean; // 标记附件是否正在上传中
-}
-
-// 推荐选项
-export interface Suggestion {
-  id: string;
-  text: string;
-  icon?: string;
-}
-
-// 视频信息
-export interface VideoInfo {
-  id: string;
-  url: string;
-  poster?: string;
-  title?: string;
-  duration?: number;
-}
-
-// 消息内容
-export interface MessageContent {
-  type: MessageType;
-  text?: string;
-  images?: Attachment[];
-  videos?: VideoInfo[];
-  files?: Attachment[];
-  suggestions?: Suggestion[];
-  codeLanguage?: string;
-}
-
-// 消息反馈
-export interface MessageFeedback {
-  liked?: boolean;
-  disliked?: boolean;
-  copied?: boolean;
-}
-
-// 单条消息
-export interface Message {
-  id: string;
-  role: MessageRole;
-  content: MessageContent;
-  timestamp: number;
-  feedback?: MessageFeedback;
-  isStreaming?: boolean;
-  isError?: boolean;
-  isEnd?: boolean;
-  isBreak?: boolean;
-  errorMessage?: string;
-  messageId: string;
-}
-
-// 对话设置
-export interface ConversationSettings {
-  model: string;
-  temperature: number;
-  maxTokens: number;
-  systemPrompt: string;
-  enableMemory: boolean;
-  memoryLength: number;
-}
-
-// 对话
-export interface Conversation {
-  id: string;
-  title: string;
-  messages: Message[];
-  createdAt: number;
-  updatedAt: number;
-  pinned?: boolean;
-  archived?: boolean;
-  settings?: ConversationSettings;
-}
-
-// 输入框状态
-export interface InputState {
-  text: string;
-  attachments: Attachment[];
-  isDeepSearch: boolean;
-  isWebSearch: boolean;
-}
-
-// 应用设置
-export interface AppSettings {
-  // 外观设置
-  theme: "light" | "dark" | "system";
-  language: string;
-  fontSize: "small" | "medium" | "large";
-
-  // 对话设置
-  sendOnEnter: boolean;
-  showTimestamp: boolean;
-  compactMode: boolean;
-
-  // AI 默认设置
-  defaultModel: string;
-  defaultTemperature: number;
-  defaultMaxTokens: number;
-  defaultSystemPrompt: string;
-
-  // 功能设置
-  enableSound: boolean;
-  enableNotification: boolean;
-  autoSaveInterval: number;
-
-  // 隐私设置
-  saveHistory: boolean;
-  shareAnalytics: boolean;
-}
-
-// AI 模型配置
-export interface AIModel {
-  id: string;
-  name: string;
-  description: string;
-  maxTokens: number;
-  provider: string;
-  icon?: string;
-}
+// 消息类型枚举
+export enum MessageType {
+  TEXT = "text",
+  IMAGE = "image",
+  VIDEO = "video",
+  MULTI_VIDEO = "multi_video",
+  FILE = "file",
+  CODE = "code",
+  SUGGESTION = "suggestion",
+  THINKING = "thinking",
+}
+
+// 消息角色
+export enum MessageRole {
+  USER = "user",
+  ASSISTANT = "assistant",
+  SYSTEM = "system",
+}
+
+// 附件类型
+export interface Attachment {
+  id: string;
+  name: string;
+  type: "image" | "file" | "video";
+  url: string;
+  size?: number;
+  mimeType?: string;
+  thumbnail?: string;
+  uploading?: boolean; // 标记附件是否正在上传中
+}
+
+// 推荐选项
+export interface Suggestion {
+  id: string;
+  text: string;
+  icon?: string;
+}
+
+// 视频信息
+export interface VideoInfo {
+  id: string;
+  url: string;
+  poster?: string;
+  title?: string;
+  duration?: number;
+}
+
+// 消息内容
+export interface MessageContent {
+  type: MessageType;
+  text?: string;
+  images?: Attachment[];
+  videos?: VideoInfo[];
+  files?: Attachment[];
+  suggestions?: Suggestion[];
+  codeLanguage?: string;
+}
+
+// 消息反馈
+export interface MessageFeedback {
+  liked?: boolean;
+  disliked?: boolean;
+  copied?: boolean;
+}
+
+// 单条消息
+export interface Message {
+  id: string;
+  role: MessageRole;
+  content: MessageContent;
+  timestamp: number;
+  feedback?: MessageFeedback;
+  isStreaming?: boolean;
+  isError?: boolean;
+  isEnd?: boolean;
+  isBreak?: boolean;
+  errorMessage?: string;
+  messageId: string;
+}
+
+// 对话设置
+export interface ConversationSettings {
+  model: string;
+  temperature: number;
+  maxTokens: number;
+  systemPrompt: string;
+  enableMemory: boolean;
+  memoryLength: number;
+}
+
+// 对话
+export interface Conversation {
+  id: string;
+  title: string;
+  messages: Message[];
+  createdAt: number;
+  updatedAt: number;
+  pinned?: boolean;
+  archived?: boolean;
+  settings?: ConversationSettings;
+}
+
+// 输入框状态
+export interface InputState {
+  text: string;
+  attachments: Attachment[];
+  isDeepSearch: boolean;
+  isWebSearch: boolean;
+}
+
+// 应用设置
+export interface AppSettings {
+  // 外观设置
+  theme: "light" | "dark" | "system";
+  language: string;
+  fontSize: "small" | "medium" | "large";
+
+  // 对话设置
+  sendOnEnter: boolean;
+  showTimestamp: boolean;
+  compactMode: boolean;
+
+  // AI 默认设置
+  defaultModel: string;
+  defaultTemperature: number;
+  defaultMaxTokens: number;
+  defaultSystemPrompt: string;
+
+  // 功能设置
+  enableSound: boolean;
+  enableNotification: boolean;
+  autoSaveInterval: number;
+
+  // 隐私设置
+  saveHistory: boolean;
+  shareAnalytics: boolean;
+}
+
+// AI 模型配置
+export interface AIModel {
+  id: string;
+  name: string;
+  description: string;
+  maxTokens: number;
+  provider: string;
+  icon?: string;
+}
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index a44ce03..d801ca0 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -1,148 +1,148 @@
-// 删除未使用的 nanoid 导入，使用自定义实现
-
-// 生成唯一ID
-export function generateId(): string {
-  return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-}
-
-// 格式化时间戳
-export function formatTimestamp(timestamp: number): string {
-  const date = new Date(timestamp);
-  const now = new Date();
-  const diff = now.getTime() - date.getTime();
-
-  if (diff < 60 * 1000) {
-    return "刚刚";
-  }
-
-  if (diff < 60 * 60 * 1000) {
-    const minutes = Math.floor(diff / (60 * 1000));
-    return `${minutes}分钟前`;
-  }
-
-  if (diff < 24 * 60 * 60 * 1000) {
-    const hours = Math.floor(diff / (60 * 60 * 1000));
-    return `${hours}小时前`;
-  }
-
-  if (date.getFullYear() === now.getFullYear()) {
-    return `${date.getMonth() + 1}月${date.getDate()}日 ${padZero(date.getHours())}:${padZero(date.getMinutes())}`;
-  }
-
-  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
-}
-
-function padZero(num: number): string {
-  return num < 10 ? `0${num}` : `${num}`;
-}
-
-export function formatFileSize(bytes: number): string {
-  if (bytes === 0) return "0 B";
-
-  const k = 1024;
-  const sizes = ["B", "KB", "MB", "GB", "TB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
-}
-
-export function truncateText(text: string, maxLength: number): string {
-  if (text.length <= maxLength) return text;
-  return text.slice(0, maxLength) + "...";
-}
-
-export async function copyToClipboard(text: string): Promise<boolean> {
-  try {
-    await navigator.clipboard.writeText(text);
-    return true;
-  } catch {
-    const textarea = document.createElement("textarea");
-    textarea.value = text;
-    textarea.style.position = "fixed";
-    textarea.style.opacity = "0";
-    document.body.appendChild(textarea);
-    textarea.select();
-
-    try {
-      document.execCommand("copy");
-      return true;
-    } catch {
-      return false;
-    } finally {
-      document.body.removeChild(textarea);
-    }
-  }
-}
-
-export function extractTitleFromMessage(message: string): string {
-  const firstLine = message.split("\n")[0].trim();
-  return truncateText(firstLine, 30) || "新对话";
-}
-
-export function debounce<T extends (...args: any[]) => any>(
-  fn: T,
-  delay: number,
-): (...args: Parameters<T>) => ReturnType<T> | undefined {
-  let timeoutId: ReturnType<typeof setTimeout> | null = null;
-  return function (this: any, ...args: Parameters<T>): any {
-    const context = this;
-
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-    }
-
-    timeoutId = setTimeout(() => {
-      return fn.apply(context, args);
-    }, delay);
-  };
-}
-
-export function throttle<T extends (...args: unknown[]) => unknown>(
-  fn: T,
-  limit: number,
-): (...args: Parameters<T>) => void {
-  let inThrottle = false;
-
-  return (...args: Parameters<T>) => {
-    if (!inThrottle) {
-      fn(...args);
-      inThrottle = true;
-      setTimeout(() => {
-        inThrottle = false;
-      }, limit);
-    }
-  };
-}
-
-export function getFileIcon(mimeType: string): string {
-  if (mimeType.startsWith("image/")) return "🖼️";
-  if (mimeType.startsWith("video/")) return "🎬";
-  if (mimeType.startsWith("audio/")) return "🎵";
-  if (mimeType.includes("pdf")) return "📄";
-  if (mimeType.includes("word") || mimeType.includes("document")) return "📝";
-  if (mimeType.includes("excel") || mimeType.includes("spreadsheet"))
-    return "📊";
-  if (mimeType.includes("powerpoint") || mimeType.includes("presentation"))
-    return "📽️";
-  if (
-    mimeType.includes("zip") ||
-    mimeType.includes("rar") ||
-    mimeType.includes("7z")
-  )
-    return "📦";
-  return "📎";
-}
-
-export function detectCodeLanguage(code: string): string {
-  if (code.includes("import React") || code.includes("jsx")) return "jsx";
-  if (code.includes("<template>") || code.includes("defineComponent"))
-    return "vue";
-  if (code.includes("func ") && code.includes("package ")) return "go";
-  if (code.includes("def ") && code.includes("import ")) return "python";
-  if (code.includes("public class") || code.includes("private void"))
-    return "java";
-  if (code.includes("fn ") && code.includes("let mut")) return "rust";
-  if (code.includes("interface ") || code.includes(": string"))
-    return "typescript";
-  return "javascript";
-}
+// 删除未使用的 nanoid 导入，使用自定义实现
+
+// 生成唯一ID
+export function generateId(): string {
+  return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+// 格式化时间戳
+export function formatTimestamp(timestamp: number): string {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+
+  if (diff < 60 * 1000) {
+    return "刚刚";
+  }
+
+  if (diff < 60 * 60 * 1000) {
+    const minutes = Math.floor(diff / (60 * 1000));
+    return `${minutes}分钟前`;
+  }
+
+  if (diff < 24 * 60 * 60 * 1000) {
+    const hours = Math.floor(diff / (60 * 60 * 1000));
+    return `${hours}小时前`;
+  }
+
+  if (date.getFullYear() === now.getFullYear()) {
+    return `${date.getMonth() + 1}月${date.getDate()}日 ${padZero(date.getHours())}:${padZero(date.getMinutes())}`;
+  }
+
+  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
+}
+
+function padZero(num: number): string {
+  return num < 10 ? `0${num}` : `${num}`;
+}
+
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return "0 B";
+
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+
+export function truncateText(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength) + "...";
+}
+
+export async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.style.position = "fixed";
+    textarea.style.opacity = "0";
+    document.body.appendChild(textarea);
+    textarea.select();
+
+    try {
+      document.execCommand("copy");
+      return true;
+    } catch {
+      return false;
+    } finally {
+      document.body.removeChild(textarea);
+    }
+  }
+}
+
+export function extractTitleFromMessage(message: string): string {
+  const firstLine = message.split("\n")[0].trim();
+  return truncateText(firstLine, 30) || "新对话";
+}
+
+export function debounce<T extends (...args: any[]) => any>(
+  fn: T,
+  delay: number,
+): (...args: Parameters<T>) => ReturnType<T> | undefined {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+  return function (this: any, ...args: Parameters<T>): any {
+    const context = this;
+
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    timeoutId = setTimeout(() => {
+      return fn.apply(context, args);
+    }, delay);
+  };
+}
+
+export function throttle<T extends (...args: unknown[]) => unknown>(
+  fn: T,
+  limit: number,
+): (...args: Parameters<T>) => void {
+  let inThrottle = false;
+
+  return (...args: Parameters<T>) => {
+    if (!inThrottle) {
+      fn(...args);
+      inThrottle = true;
+      setTimeout(() => {
+        inThrottle = false;
+      }, limit);
+    }
+  };
+}
+
+export function getFileIcon(mimeType: string): string {
+  if (mimeType.startsWith("image/")) return "🖼️";
+  if (mimeType.startsWith("video/")) return "🎬";
+  if (mimeType.startsWith("audio/")) return "🎵";
+  if (mimeType.includes("pdf")) return "📄";
+  if (mimeType.includes("word") || mimeType.includes("document")) return "📝";
+  if (mimeType.includes("excel") || mimeType.includes("spreadsheet"))
+    return "📊";
+  if (mimeType.includes("powerpoint") || mimeType.includes("presentation"))
+    return "📽️";
+  if (
+    mimeType.includes("zip") ||
+    mimeType.includes("rar") ||
+    mimeType.includes("7z")
+  )
+    return "📦";
+  return "📎";
+}
+
+export function detectCodeLanguage(code: string): string {
+  if (code.includes("import React") || code.includes("jsx")) return "jsx";
+  if (code.includes("<template>") || code.includes("defineComponent"))
+    return "vue";
+  if (code.includes("func ") && code.includes("package ")) return "go";
+  if (code.includes("def ") && code.includes("import ")) return "python";
+  if (code.includes("public class") || code.includes("private void"))
+    return "java";
+  if (code.includes("fn ") && code.includes("let mut")) return "rust";
+  if (code.includes("interface ") || code.includes(": string"))
+    return "typescript";
+  return "javascript";
+}