From 4543fed58a37199048fe3a79d55d58ccf9fc4d51 Mon Sep 17 00:00:00 2001
From: ViperEkura <3081035982@qq.com>
Date: Tue, 14 Apr 2026 00:30:05 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dashboard/src/App.vue                     |  10 +-
 dashboard/src/components/AppHeader.vue    |   4 +-
 dashboard/src/components/MessageNav.vue   | 128 ++++
 dashboard/src/components/ProcessBlock.vue | 154 ++---
 dashboard/src/style.css                   |  11 +-
 dashboard/src/views/AuthView.vue          |   1 -
 dashboard/src/views/ConversationsView.vue | 635 ++++++--------------
 dashboard/src/views/SettingsView.vue      | 682 +++-------------------
 dashboard/src/views/ToolsView.vue         |  18 +-
 9 files changed, 469 insertions(+), 1174 deletions(-)
 create mode 100644 dashboard/src/components/MessageNav.vue

diff --git a/dashboard/src/App.vue b/dashboard/src/App.vue
index be2e22a..07033b6 100644
--- a/dashboard/src/App.vue
+++ b/dashboard/src/App.vue
@@ -16,11 +16,15 @@ const { isLoggedIn } = useAuth()
 
 <style scoped>
 #app { 
-  min-height: 100vh; 
+  height: 100vh; 
+  overflow: hidden;
   background: var(--bg); 
 }
 .main-content { 
-  padding: 0; 
-  min-height: 100vh; 
+  height: 92%;
+  padding: 0.5rem 0 0 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 </style>
diff --git a/dashboard/src/components/AppHeader.vue b/dashboard/src/components/AppHeader.vue
index 887db13..928025b 100644
--- a/dashboard/src/components/AppHeader.vue
+++ b/dashboard/src/components/AppHeader.vue
@@ -83,7 +83,9 @@ const navItems = [
 
 <style scoped>
 .app-header {
-  height: 56px;
+  height: 8%;
+  min-height: 48px;
+  max-height: 64px;
   background: var(--bg-primary);
   border-bottom: 1px solid var(--border-light);
   display: flex;
diff --git a/dashboard/src/components/MessageNav.vue b/dashboard/src/components/MessageNav.vue
new file mode 100644
index 0000000..e00e822
--- /dev/null
+++ b/dashboard/src/components/MessageNav.vue
@@ -0,0 +1,128 @@
+<template>
+  <div v-if="messages.length > 0" class="bookmark-rail">
+    <div
+      v-for="msg in userMessages"
+      :key="msg.id"
+      class="bookmark"
+      :class="{ active: activeId === msg.id }"
+      @click="$emit('scrollTo', msg.id)"
+    >
+      <div class="bookmark-dot"></div>
+      <div class="bookmark-label">{{ preview(msg) }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  messages: { type: Array, required: true },
+  activeId: { type: String, default: null },
+})
+
+defineEmits(['scrollTo'])
+
+const userMessages = computed(() => props.messages.filter(m => m.role === 'user'))
+
+function preview(msg) {
+  if (!msg.text) return '...'
+  // Clean markdown characters
+  const clean = msg.text.replace(/[#*`~>\-\[\]()]/g, '').replace(/\s+/g, ' ').trim()
+  const MAX_LENGTH = 30
+  return clean.length > MAX_LENGTH ? clean.slice(0, MAX_LENGTH) + '...' : clean
+}
+</script>
+
+<style scoped>
+.bookmark-rail {
+  position: fixed;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 10px;
+  height: 70vh;
+  max-height: 400px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 4px 0;
+  transition: width 0.25s ease;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  margin-right: 20px;
+}
+
+.bookmark-rail::-webkit-scrollbar {
+  display: none;
+}
+
+.bookmark-rail:hover {
+  width: 10vw;
+  max-width: 160px;
+}
+
+.bookmark {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 5px 6px;
+  cursor: pointer;
+  border-radius: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  background: transparent;
+  transition: background 0.15s;
+}
+
+.bookmark:hover {
+  background: var(--bg-hover);
+  border-radius: 6px 0 0 6px;
+}
+
+.bookmark.active {
+  background: var(--bg-active);
+  border-radius: 6px 0 0 6px;
+}
+
+.bookmark-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 1.5px;
+  flex-shrink: 0;
+  background: #3b82f6;
+  opacity: 0.35;
+  transition: all 0.2s ease;
+}
+
+.bookmark.active .bookmark-dot,
+.bookmark-rail:hover .bookmark-dot {
+  opacity: 1;
+  width: 6px;
+  height: 6px;
+}
+
+.bookmark-label {
+  margin-left: 8px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--text-secondary);
+  opacity: 0;
+  transform: translateX(8px);
+  transition: all 0.2s ease;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bookmark-rail:hover .bookmark-label {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.bookmark.active .bookmark-label {
+  color: var(--text-primary);
+}
+</style>
diff --git a/dashboard/src/components/ProcessBlock.vue b/dashboard/src/components/ProcessBlock.vue
index 530ad37..c516f5a 100644
--- a/dashboard/src/components/ProcessBlock.vue
+++ b/dashboard/src/components/ProcessBlock.vue
@@ -8,8 +8,10 @@
           <span v-html="brainIcon"></span>
           <span class="step-label">思考中</span>
           <span class="step-brief">{{ item.brief || '正在思考...' }}</span>
-          <span v-if="streaming && item.key === lastThinkingKey" class="loading-dots">...</span>
-          <span class="arrow" :class="{ open: expandedKeys.has(item.key) }" v-html="chevronDown"></span>
+          <span class="step-status">
+            <span v-if="streaming && item.key === lastThinkingKey" class="loading-dots">...</span>
+            <span class="arrow" :class="{ open: expandedKeys.has(item.key) }" v-html="chevronDown"></span>
+          </span>
         </div>
         <div v-if="expandedKeys.has(item.key)" class="step-content">
           <div class="thinking-text">{{ item.displayContent }}</div>
@@ -22,10 +24,12 @@
           <span v-html="toolIcon"></span>
           <span class="step-label">{{ item.name || '工具调用' }}</span>
           <span class="step-brief">{{ item.brief || '' }}</span>
-          <span v-if="item.loading" class="loading-dots">...</span>
-          <span v-else-if="item.isSuccess === true" class="step-badge success">成功</span>
-          <span v-else-if="item.isSuccess === false" class="step-badge error">失败</span>
-          <span class="arrow" :class="{ open: expandedKeys.has(item.key) }" v-html="chevronDown"></span>
+          <span class="step-status">
+            <span v-if="item.loading" class="loading-dots">...</span>
+            <span v-else-if="item.isSuccess === true" class="step-badge success">成功</span>
+            <span v-else-if="item.isSuccess === false" class="step-badge error">失败</span>
+            <span class="arrow" :class="{ open: expandedKeys.has(item.key) }" v-html="chevronDown"></span>
+          </span>
         </div>
         <div v-if="expandedKeys.has(item.key)" class="step-content">
           <div class="tool-detail">
@@ -264,8 +268,7 @@ const alertIcon = `<svg viewBox="0 0 24 24" width="16" height="16" fill="none" s
 }
 
 /* Step header (shared by thinking and tool_call) */
-.thinking .step-header,
-.tool_call .step-header {
+.step-header {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -277,35 +280,34 @@ const alertIcon = `<svg viewBox="0 0 24 24" width="16" height="16" fill="none" s
   font-size: 13px;
   transition: background 0.15s;
   width: 100%;
-  box-sizing: border-box;
 }
 
-.thinking .step-header:hover,
-.tool_call .step-header:hover {
-  background: var(--bg-hover);
-}
+.step-header:hover { background: var(--bg-hover); }
 
-.thinking .step-header svg:first-child {
-  color: #f59e0b;
-}
-
-.tool_call .step-header svg:first-child {
-  color: var(--tool-color);
-}
+.thinking .step-header svg:first-child { color: #f59e0b; }
+.tool_call .step-header svg:first-child { color: var(--tool-color); }
+.tool_call.loading .step-header { background: var(--bg-hover); }
 
 .step-label {
   font-weight: 500;
   color: var(--text-primary);
   flex-shrink: 0;
-  min-width: 130px;
-  max-width: 130px;
+  flex: 2;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.step-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 3;
+  justify-content: flex-end;
+}
+
 .arrow {
-  margin-left: auto;
   transition: transform 0.2s;
   color: var(--text-tertiary);
   flex-shrink: 0;
@@ -316,6 +318,8 @@ const alertIcon = `<svg viewBox="0 0 24 24" width="16" height="16" fill="none" s
   padding: 2px 8px;
   border-radius: 10px;
   font-weight: 500;
+  flex-shrink: 0;
+  margin-left: 8px;
 }
 
 .step-badge.success {
@@ -335,21 +339,8 @@ const alertIcon = `<svg viewBox="0 0 24 24" width="16" height="16" fill="none" s
   padding: 8px 12px;
   margin: 4px 0;
 }
-
-.step-item.error .step-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.step-item.error .step-label {
-  color: var(--danger-color);
-  font-weight: 600;
-}
-
-.step-item.error svg {
-  color: var(--danger-color);
-}
+.step-item.error .step-label { color: var(--danger-color); font-weight: 600; }
+.step-item.error svg { color: var(--danger-color); }
 
 .error-content {
   margin-top: 8px;
@@ -357,7 +348,6 @@ const alertIcon = `<svg viewBox="0 0 24 24" width="16" height="16" fill="none" s
   background: rgba(255, 255, 255, 0.5);
   border-radius: 4px;
 }
-
 .error-content pre {
   margin: 0;
   white-space: pre-wrap;
@@ -372,9 +362,8 @@ const alertIcon = `<svg viewBox="0 0 24 24" width="16" height="16" fill="none" s
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  flex: 1 1 auto;
+  flex: 5;
   min-width: 0;
-  max-width: 300px;
 }
 
 .arrow.open {
@@ -388,80 +377,17 @@ const alertIcon = `<svg viewBox="0 0 24 24" width="16" height="16" fill="none" s
   animation: pulse 1s ease-in-out infinite;
 }
 
-.tool_call.loading .step-header {
-  background: var(--bg-hover);
-}
+.tool_call.loading .step-header { background: var(--bg-hover); }
 
-/* Expandable step content panel */
-.step-content {
-  padding: 12px;
-  margin-top: 4px;
-  background: var(--bg-code);
-  border: 1px solid var(--border-light);
-  border-radius: 8px;
-  overflow: hidden;
-}
+.step-content { padding: 12px; margin-top: 4px; background: var(--bg-code); border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; }
+.thinking-text { font-size: 13px; color: var(--text-secondary); line-height: 1.6; white-space: pre-wrap; }
+.tool-detail { font-size: 13px; }
+.detail-label { color: var(--text-tertiary); font-size: 11px; font-weight: 600; display: block; margin-bottom: 4px; }
+.tool-detail pre { padding: 8px; background: var(--bg-primary); border-radius: 4px; border: 1px solid var(--border-light); font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 12px; line-height: 1.5; color: var(--text-secondary); overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
 
-.thinking-text {
-  font-size: 13px;
-  color: var(--text-secondary);
-  line-height: 1.6;
-  white-space: pre-wrap;
-}
+.text-content { padding: 0; font-size: 15px; line-height: 1.7; color: var(--text-primary); word-break: break-word; contain: layout style; }
+.text-content :deep(.placeholder) { color: var(--text-tertiary); }
 
-.tool-detail {
-  font-size: 13px;
-}
-
-.detail-label {
-  color: var(--text-tertiary);
-  font-size: 11px;
-  font-weight: 600;
-  display: block;
-  margin-bottom: 4px;
-}
-
-.tool-detail pre {
-  padding: 8px;
-  background: var(--bg-primary);
-  border-radius: 4px;
-  border: 1px solid var(--border-light);
-  font-family: 'JetBrains Mono', 'Fira Code', monospace;
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--text-secondary);
-  overflow-x: auto;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-/* Text content */
-.text-content {
-  padding: 0;
-  font-size: 15px;
-  line-height: 1.7;
-  color: var(--text-primary);
-  word-break: break-word;
-  contain: layout style;
-}
-
-.text-content :deep(.placeholder) {
-  color: var(--text-tertiary);
-}
-
-/* Streaming cursor indicator */
-.streaming-indicator {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 12px;
-  color: var(--text-tertiary);
-}
-
-/* Add separator only when there are step items above the indicator */
-.process-block:has(.step-item) .streaming-indicator {
-  margin-top: 8px;
-  padding: 8px 0 0;
-  border-top: 1px solid var(--border-light);
-}
+.streaming-indicator { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-tertiary); }
+.process-block:has(.step-item) .streaming-indicator { margin-top: 8px; padding: 8px 0 0; border-top: 1px solid var(--border-light); }
 </style>
diff --git a/dashboard/src/style.css b/dashboard/src/style.css
index 82e7954..595e700 100644
--- a/dashboard/src/style.css
+++ b/dashboard/src/style.css
@@ -197,6 +197,11 @@ body {
   color: var(--danger-color);
 }
 
+/* ============ Spinner Animation ============ */
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
 .ghost-btn.success:hover {
   background: var(--success-bg);
   color: var(--success-color);
@@ -317,14 +322,14 @@ body {
 .message-bubble.user .message-container {
   align-items: flex-end;
   width: fit-content;
-  max-width: 85%;
+  max-width: 70%;
 }
 
 .message-bubble.assistant .message-container {
   align-items: flex-start;
   flex: 1 1 auto;
-  width: 80%;
-  max-width: 80%;
+  width: 90%;
+  max-width: 90%;
   min-width: 0;
 }
 
diff --git a/dashboard/src/views/AuthView.vue b/dashboard/src/views/AuthView.vue
index 35511b6..712ca30 100644
--- a/dashboard/src/views/AuthView.vue
+++ b/dashboard/src/views/AuthView.vue
@@ -110,7 +110,6 @@ const handleSubmit = async () => {
 .btn-submit:hover:not(:disabled) { background: var(--accent-border); }
 .btn-submit:disabled { opacity: 0.7; cursor: not-allowed; }
 .spinner { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 1s linear infinite; }
-@keyframes spin { to { transform: rotate(360deg); } }
 .switch-mode { text-align: center; color: var(--text); margin-top: 1.5rem; }
 .switch-mode button { background: none; border: none; color: var(--accent); cursor: pointer; font-weight: 500; text-decoration: underline; }
 </style>
diff --git a/dashboard/src/views/ConversationsView.vue b/dashboard/src/views/ConversationsView.vue
index aa0b89a..69ee571 100644
--- a/dashboard/src/views/ConversationsView.vue
+++ b/dashboard/src/views/ConversationsView.vue
@@ -25,8 +25,20 @@
             <div class="conv-item-meta">
               <span class="conv-item-model">{{ c.model || '-' }}</span>
               <div class="conv-item-actions" @click.stop>
-                <button @click="editTitle(c)" class="btn-icon" title="重命名">✏️</button>
-                <button @click="deleteConv(c)" class="btn-icon btn-delete-icon" title="删除">🗑️</button>
+                <button @click="editTitle(c)" class="btn-icon" title="重命名">
+                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+                  </svg>
+                </button>
+                <button @click="deleteConv(c)" class="btn-icon btn-delete-icon" title="删除">
+                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="3 6 5 6 21 6"></polyline>
+                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                    <line x1="10" y1="11" x2="10" y2="17"></line>
+                    <line x1="14" y1="11" x2="14" y2="17"></line>
+                  </svg>
+                </button>
               </div>
             </div>
           </div>
@@ -53,7 +65,7 @@
             </div>
             <div v-else-if="convMessages.length || streamingMessage">
               <!-- 历史消息 -->
-              <div v-for="msg in convMessages" :key="msg.id" class="chat-message" :class="msg.role">
+              <div v-for="msg in convMessages" :key="msg.id" class="chat-message" :class="msg.role" :data-msg-id="msg.id">
                 <div class="message-avatar">{{ msg.role === 'user' ? '👤' : '🤖' }}</div>
                 <div class="message-content">
                   <!-- 工具调用步骤显示（包含思考和文本内容） -->
@@ -133,15 +145,24 @@
         </div>
       </div>
     </div>
+
+    <!-- 消息导航栏 -->
+    <MessageNav
+      v-if="selectedConv && convMessages.length > 0"
+      :messages="convMessages"
+      :active-id="activeMessageId"
+      @scroll-to="scrollToMessageById"
+    />
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch, nextTick } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import { conversationsAPI, providersAPI, messagesAPI, toolsAPI } from '../utils/api.js'
 import { renderMarkdown } from '../utils/markdown.js'
 import ProcessBlock from '../components/ProcessBlock.vue'
+import MessageNav from '../components/MessageNav.vue'
 
 const router = useRouter()
 const list = ref([])
@@ -209,9 +230,60 @@ const selectConv = async (c) => {
   await fetchConvMessages(c.id)
 }
 
+const newMessage = ref('')
+const sending = ref(false)
+const messagesContainer = ref(null)
+const streamingMessage = ref(null)
+const activeMessageId = ref(null)
+let scrollObserver = null
+const observedElements = new Set()
+
+// 初始化 IntersectionObserver 来跟踪可见消息
+const initScrollObserver = () => {
+  if (!messagesContainer.value) return
+  scrollObserver?.disconnect()
+  scrollObserver = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          activeMessageId.value = entry.target.dataset.msgId || null
+        }
+      }
+    },
+    { root: messagesContainer.value, threshold: 0.5 }
+  )
+  // 观察已有的消息元素
+  nextTick(() => {
+    if (!messagesContainer.value) return
+    const wrappers = messagesContainer.value.querySelectorAll('[data-msg-id]')
+    wrappers.forEach(el => {
+      if (!observedElements.has(el)) {
+        scrollObserver.observe(el)
+        observedElements.add(el)
+      }
+    })
+  })
+}
+
+// 观察新添加的消息元素
+watch(() => convMessages.value.length, () => {
+  nextTick(() => {
+    if (!scrollObserver || !messagesContainer.value) return
+    const wrappers = messagesContainer.value.querySelectorAll('[data-msg-id]')
+    wrappers.forEach(el => {
+      if (!observedElements.has(el)) {
+        scrollObserver.observe(el)
+        observedElements.add(el)
+      }
+    })
+  })
+})
+
 const fetchConvMessages = async (convId) => {
   loadingMessages.value = true
   convMessages.value = []
+  // 重置观察的元素集合
+  observedElements.clear()
   try {
     const res = await messagesAPI.list(convId)
     if (res.success) {
@@ -221,13 +293,32 @@ const fetchConvMessages = async (convId) => {
     console.error('获取消息失败:', e)
   } finally {
     loadingMessages.value = false
+    // 加载完成后初始化 observer
+    nextTick(() => initScrollObserver())
   }
 }
 
-const newMessage = ref('')
-const sending = ref(false)
-const messagesContainer = ref(null)
-const streamingMessage = ref(null)
+// 导航到指定消息
+const scrollToMessage = (index) => {
+  if (!messagesContainer.value) return
+  const items = messagesContainer.value.querySelectorAll('.chat-message')
+  if (items[index]) {
+    items[index].scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }
+}
+
+// 导航到指定消息（通过ID）
+const scrollToMessageById = (msgId) => {
+  nextTick(() => {
+    if (!messagesContainer.value) return
+    // 使用 data-msg-id 直接定位消息元素
+    const el = messagesContainer.value.querySelector(`[data-msg-id="${msgId}"]`)
+    if (el) {
+      el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      activeMessageId.value = msgId
+    }
+  })
+}
 
 watch(convMessages, () => {
   nextTick(() => {
@@ -375,480 +466,104 @@ onMounted(() => {
   fetchData()
   loadEnabledTools()
 })
+
+onUnmounted(() => {
+  scrollObserver?.disconnect()
+})
 </script>
 
 <style scoped>
 /* 布局 */
-.page-container {
-  padding: 0 !important;
-  overflow: hidden;
-}
-
-.conv-layout {
-  display: flex;
-  gap: 1rem;
-  height: calc(100vh - 80px);
-  min-height: 400px;
-}
+.page-container { padding: 0 !important; overflow: hidden; height: 100% !important; min-height: 0; display: flex; flex-direction: column; }
+.page-container.conversations { height: 100% !important; }
+.conv-layout { display: flex; gap: 1rem; height: 100%; min-height: 0; flex: 1; }
 
 /* 左侧边栏 */
-.conv-sidebar {
-  width: 20%;
-  min-width: 160px;
-  max-width: 280px;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-light);
-  border-radius: 12px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.sidebar-header {
-  padding: 0.75rem;
-  border-bottom: 1px solid var(--border-light);
-}
-
-.btn-new-conv {
-  width: 100%;
-  padding: 0.5rem;
-  background: var(--accent-primary);
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 0.85rem;
-  font-weight: 500;
-  transition: all 0.2s;
-}
-
-.btn-new-conv:hover {
-  background: var(--accent-primary-hover);
-}
-
-.conv-list {
-  flex: 1;
-  overflow-y: auto;
-}
+.conv-sidebar { width: 20%; min-width: 160px; max-width: 280px; background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
+.sidebar-header { padding: 0.75rem; border-bottom: 1px solid var(--border-light); }
+.btn-new-conv { width: 100%; padding: 0.5rem; background: var(--accent-primary); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.85rem; font-weight: 500; transition: all 0.2s; }
+.btn-new-conv:hover { background: var(--accent-primary-hover); }
+.conv-list { flex: 1; overflow-y: auto; }
 
 /* 会话列表项 */
-.conv-item {
-  padding: 0.85rem 1rem;
-  border-bottom: 1px solid var(--border-light);
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.conv-item:hover {
-  background: var(--bg-hover);
-}
-
-.conv-item.active {
-  background: var(--accent-primary-light);
-  border-left: 3px solid var(--accent-primary);
-}
-
-.conv-item-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 0.5rem;
-  margin-bottom: 0.4rem;
-}
-
-.conv-item-title {
-  font-size: 0.8rem;
-  font-weight: 500;
-  color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  flex: 1;
-}
-
-.conv-item-time {
-  font-size: 0.65rem;
-  color: var(--text-tertiary);
-  flex-shrink: 0;
-}
-
-.conv-item-meta {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.conv-item-model {
-  font-size: 0.7rem;
-  color: var(--text-secondary);
-}
-
-.conv-item-actions {
-  display: flex;
-  gap: 0.25rem;
-  opacity: 1;
-}
-
-.btn-icon {
-  padding: 0.2rem;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  font-size: 0.75rem;
-  opacity: 0.6;
-  transition: opacity 0.15s;
-}
-
-.btn-icon:hover {
-  opacity: 1;
-}
-
-.btn-delete-icon {
-  color: var(--danger-color);
-}
+.conv-item { padding: 0.85rem 1rem; border-bottom: 1px solid var(--border-light); cursor: pointer; transition: all 0.15s ease; }
+.conv-item:hover { background: var(--bg-hover); }
+.conv-item.active { background: var(--accent-primary-light); border-left: 3px solid var(--accent-primary); }
+.conv-item-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.4rem; }
+.conv-item-title { font-size: 0.8rem; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; flex: 1; }
+.conv-item-time { font-size: 0.65rem; color: var(--text-tertiary); flex-shrink: 0; }
+.conv-item-meta { display: flex; justify-content: space-between; align-items: center; }
+.conv-item-model { font-size: 0.7rem; color: var(--text-secondary); }
+.conv-item-actions { display: flex; gap: 0.25rem; opacity: 1; }
+.btn-icon { padding: 0.2rem; background: transparent; border: none; cursor: pointer; font-size: 0.75rem; opacity: 0.6; transition: opacity 0.15s; }
+.btn-icon:hover { opacity: 1; }
+.btn-delete-icon { color: var(--danger-color); }
 
 /* 侧边栏分页 */
-.sidebar-pagination {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem;
-  border-top: 1px solid var(--border-light);
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-}
-
-.btn-page {
-  padding: 0.25rem 0.5rem;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-light);
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.9rem;
-}
-
-.btn-page:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
+.sidebar-pagination { display: flex; justify-content: center; align-items: center; gap: 0.75rem; padding: 0.75rem; border-top: 1px solid var(--border-light); font-size: 0.8rem; color: var(--text-secondary); }
+.btn-page { padding: 0.25rem 0.5rem; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 4px; cursor: pointer; font-size: 0.9rem; }
+.btn-page:disabled { opacity: 0.4; cursor: not-allowed; }
 
 /* 右侧内容区 */
-.conv-content {
-  flex: 1;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-light);
-  border-radius: 12px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.empty-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-secondary);
-}
-
-.empty-icon {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-  opacity: 0.5;
-}
-
-.empty-content p {
-  font-size: 0.9rem;
-}
+.conv-content { flex: 1; background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
+.empty-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-secondary); }
+.empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }
+.empty-content p { font-size: 0.9rem; }
 
 /* 聊天视图容器 */
-.chat-view-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.chat-messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0.75rem;
-}
-
-.chat-message {
-  display: flex;
-  gap: 0.75rem;
-  margin-bottom: 0.75rem;
-}
-
-.chat-message.user {
-  flex-direction: row-reverse;
-}
-
-.chat-message.streaming {
-  opacity: 0.9;
-}
-
-.chat-message.streaming .message-avatar {
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.6; }
-}
-
-.message-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: var(--bg-secondary);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1rem;
-  flex-shrink: 0;
-}
-
-.message-content {
-  max-width: 70%;
-}
-
-.message-text {
-  padding: 0.65rem 0.9rem;
-  border-radius: 12px;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  word-break: break-word;
-}
-
-.chat-message.user .message-text {
-  background: var(--accent-primary);
-  color: white;
-}
-
-.chat-empty {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-tertiary);
-  font-size: 0.85rem;
-}
-
-.loading-messages {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  color: var(--text-secondary);
-  font-size: 0.85rem;
-}
-
-.loading-messages .spinner-small {
-  margin-bottom: 0.5rem;
-}
+.chat-view-container { flex: 1; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
+.chat-header { display: flex; justify-content: flex-end; padding: 8px; border-bottom: 1px solid var(--border-light); }
+.btn-nav-toggle { background: none; border: none; font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background 0.15s; }
+.btn-nav-toggle:hover { background: var(--bg-hover); }
+.chat-messages { flex: 1; overflow-y: auto; padding: 0.75rem; }
+.chat-message { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; }
+.chat-message.user { flex-direction: row-reverse; }
+.chat-message.streaming { opacity: 0.9; }
+.chat-message.streaming .message-avatar { animation: pulse 1.5s ease-in-out infinite; }
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
+.message-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
+.message-content { max-width: 80%; width: 80%; }
+.chat-message.user .message-content { max-width: 80%; width: auto; }
+.message-text { padding: 0.65rem 0.9rem; border-radius: 12px; font-size: 0.9rem; line-height: 1.5; background: var(--bg-secondary); color: var(--text-primary); word-break: break-word; }
+.chat-message.user .message-text { background: var(--accent-primary); color: white; }
+.chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); font-size: 0.85rem; }
+.loading-messages { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; color: var(--text-secondary); font-size: 0.85rem; }
+.loading-messages .spinner-small { margin-bottom: 0.5rem; }
 
 /* Markdown 内容样式 */
-.message-text {
-  line-height: 1.6;
-}
+.message-text { line-height: 1.6; }
+.message-text :deep(pre) { background: var(--bg-code); border-radius: 8px; padding: 0.75rem; overflow-x: auto; margin: 0.5rem 0; }
+.message-text :deep(code) { background: var(--bg-code); padding: 0.15rem 0.35rem; border-radius: 4px; font-size: 0.85em; }
+.message-text :deep(pre code) { background: none; padding: 0; }
+.message-text :deep(p) { margin: 0.5rem 0; }
+.message-text :deep(p:first-child) { margin-top: 0; }
+.message-text :deep(p:last-child) { margin-bottom: 0; }
 
-.message-text :deep(pre) {
-  background: var(--bg-code);
-  border-radius: 8px;
-  padding: 0.75rem;
-  overflow-x: auto;
-  margin: 0.5rem 0;
-}
-
-.message-text :deep(code) {
-  background: var(--bg-code);
-  padding: 0.15rem 0.35rem;
-  border-radius: 4px;
-  font-size: 0.85em;
-}
-
-.message-text :deep(pre code) {
-  background: none;
-  padding: 0;
-}
-
-.message-text :deep(p) {
-  margin: 0.5rem 0;
-}
-
-.message-text :deep(p:first-child) {
-  margin-top: 0;
-}
-
-.message-text :deep(p:last-child) {
-  margin-bottom: 0;
-}
-
-.chat-input-area {
-  padding: 1rem;
-  border-top: 1px solid var(--border-light);
-  display: flex;
-  gap: 0.75rem;
-}
-
-.chat-input {
-  flex: 1;
-  padding: 0.65rem 0.9rem;
-  border: 1px solid var(--border-input);
-  border-radius: 8px;
-  background: var(--bg-input);
-  color: var(--text-primary);
-  font-size: 0.9rem;
-}
-
-.chat-input:focus {
-  outline: none;
-  border-color: var(--accent-primary);
-}
-
-.btn-send {
-  padding: 0.5rem 1rem;
-  background: var(--accent-primary);
-  color: white;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 0.85rem;
-}
-
-.btn-send:hover {
-  background: var(--accent-primary-hover);
-}
+/* 聊天输入区 */
+.chat-input-area { padding: 1rem; border-top: 1px solid var(--border-light); display: flex; gap: 0.75rem; }
+.chat-input { flex: 1; padding: 0.65rem 0.9rem; border: 1px solid var(--border-input); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); font-size: 0.9rem; }
+.chat-input:focus { outline: none; border-color: var(--accent-primary); }
+.btn-send { padding: 0.5rem 1rem; background: var(--accent-primary); color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 0.85rem; }
+.btn-send:hover { background: var(--accent-primary-hover); }
 
 /* 按钮样式 */
-.btn-primary {
-  padding: 0.5rem 1rem;
-  background: var(--accent-primary);
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 0.85rem;
-  transition: all 0.2s;
-}
-
-.btn-primary:hover {
-  background: var(--accent-primary-hover);
-}
-
-.btn-secondary {
-  padding: 0.5rem 1rem;
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  border: 1px solid var(--border-light);
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 0.85rem;
-  transition: all 0.2s;
-}
-
-.btn-secondary:hover {
-  background: var(--bg-hover);
-}
+.btn-primary { padding: 0.5rem 1rem; background: var(--accent-primary); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; }
+.btn-primary:hover { background: var(--accent-primary-hover); }
+.btn-secondary { padding: 0.5rem 1rem; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-light); border-radius: 6px; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; }
+.btn-secondary:hover { background: var(--bg-hover); }
 
 /* 加载和空状态 */
-.loading, .empty-sidebar {
-  text-align: center;
-  padding: 2rem;
-  color: var(--text-secondary);
-  font-size: 0.85rem;
-}
-
-.error-msg {
-  text-align: center;
-  padding: 1rem;
-  color: var(--danger-color);
-  background: var(--danger-bg);
-  border-radius: 8px;
-  margin: 1rem;
-  font-size: 0.85rem;
-}
-
-.spinner-small {
-  width: 24px;
-  height: 24px;
-  border: 3px solid var(--border-light);
-  border-top-color: var(--accent-primary);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin: 0 auto 0.5rem;
-}
+.loading, .empty-sidebar { text-align: center; padding: 2rem; color: var(--text-secondary); font-size: 0.85rem; }
+.error-msg { text-align: center; padding: 1rem; color: var(--danger-color); background: var(--danger-bg); border-radius: 8px; margin: 1rem; font-size: 0.85rem; }
+.spinner-small { width: 24px; height: 24px; border: 3px solid var(--border-light); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 0.5rem; }
 
 /* 模态框 */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0,0,0,0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
+.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
+.modal { background: var(--bg-primary); border-radius: 16px; padding: 1.25rem; width: 100%; max-width: 400px; }
+.modal h2 { margin: 0 0 1.25rem; font-size: 1.1rem; color: var(--text-primary); }
+.form-group { margin-bottom: 1rem; }
+.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; font-size: 0.9rem; color: var(--text-primary); }
+.form-group input, .form-group select { width: 100%; padding: 0.65rem; border: 1px solid var(--border-input); border-radius: 8px; background: var(--bg-input); box-sizing: border-box; font-size: 0.9rem; color: var(--text-primary); }
+.modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.25rem; }
 
-.modal {
-  background: var(--bg-primary);
-  border-radius: 16px;
-  padding: 1.25rem;
-  width: 100%;
-  max-width: 400px;
-}
-
-.modal h2 {
-  margin: 0 0 1.25rem;
-  font-size: 1.1rem;
-  color: var(--text-primary);
-}
-
-.form-group {
-  margin-bottom: 1rem;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  font-size: 0.9rem;
-  color: var(--text-primary);
-}
-
-.form-group input,
-.form-group select {
-  width: 100%;
-  padding: 0.65rem;
-  border: 1px solid var(--border-input);
-  border-radius: 8px;
-  background: var(--bg-input);
-  box-sizing: border-box;
-  font-size: 0.9rem;
-  color: var(--text-primary);
-}
-
-.modal-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.75rem;
-  margin-top: 1.25rem;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
 </style>
diff --git a/dashboard/src/views/SettingsView.vue b/dashboard/src/views/SettingsView.vue
index 26d2512..d0aeed0 100644
--- a/dashboard/src/views/SettingsView.vue
+++ b/dashboard/src/views/SettingsView.vue
@@ -459,622 +459,124 @@ onMounted(() => {
 </script>
 
 <style scoped>
+/* 页面容器 */
+.page-container.settings { padding: 1.5rem 12.5%; box-sizing: border-box; min-height: 100%; overflow-y: auto; }
+
 /* 通用设置部分 */
-.settings-section {
-  margin-bottom: 1.5rem;
-}
-
-.section-title {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.75rem;
-  padding: 0.5rem 0;
-}
-
-.section-icon {
-  font-size: 1rem;
-}
-
-.section-text {
-  font-size: 1rem;
-  font-weight: 700;
-  color: var(--text-primary);
-}
-
-.btn-add {
-  margin-left: auto;
-  padding: 0.4rem 0.8rem;
-  background: var(--accent-primary);
-  color: white;
-  border: none;
-  border-radius: 6px;
-  font-size: 0.8rem;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.btn-add:hover {
-  background: var(--accent-primary-hover);
-}
+.settings-section { margin-bottom: 1.5rem; }
+.section-title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; padding: 0.5rem 0; }
+.section-icon { font-size: 1rem; }
+.section-text { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
+.btn-add { margin-left: auto; padding: 0.4rem 0.8rem; background: var(--accent-primary); color: white; border: none; border-radius: 6px; font-size: 0.8rem; cursor: pointer; transition: all 0.2s; }
+.btn-add:hover { background: var(--accent-primary-hover); }
 
 /* 设置卡片 */
-.settings-card {
-  background: var(--bg-primary);
-  border: 1px solid var(--border-light);
-  border-radius: 12px;
-  overflow: hidden;
-}
+.settings-card { background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; }
 
 /* 设置行 */
-.settings-row {
-  display: flex;
-  align-items: center;
-  padding: 0.85rem 1rem;
-  border-bottom: 1px solid var(--border-light);
-}
-
-.settings-row:last-child {
-  border-bottom: none;
-}
-
-.settings-row.full {
-  flex-direction: column;
-  align-items: stretch;
-}
-
-.settings-row.actions {
-  justify-content: flex-end;
-  gap: 0.5rem;
-  background: var(--bg-secondary);
-}
-
-.row-label {
-  min-width: 140px;
-  color: var(--text-secondary);
-  font-size: 0.85rem;
-  flex-shrink: 0;
-}
-
-.row-title {
-  display: block;
-  font-weight: 500;
-  color: var(--text-primary);
-  font-size: 0.9rem;
-}
-
-.row-desc {
-  display: block;
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  margin-top: 0.15rem;
-}
-
-.row-value {
-  flex: 1;
-  color: var(--text-primary);
-  font-size: 0.9rem;
-}
+.settings-row { display: flex; align-items: center; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border-light); }
+.settings-row:last-child { border-bottom: none; }
+.settings-row.full { flex-direction: column; align-items: stretch; }
+.settings-row.actions { justify-content: flex-end; gap: 0.5rem; background: var(--bg-secondary); }
+.row-label { min-width: 140px; color: var(--text-secondary); font-size: 0.85rem; flex-shrink: 0; }
+.row-title { display: block; font-weight: 500; color: var(--text-primary); font-size: 0.9rem; }
+.row-desc { display: block; font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.15rem; }
+.row-value { flex: 1; color: var(--text-primary); font-size: 0.9rem; }
 
 /* 内联输入框 */
-.inline-select,
-.inline-input {
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--border-input);
-  border-radius: 6px;
-  background: var(--bg-input);
-  color: var(--text-primary);
-  font-size: 0.85rem;
-  min-width: 180px;
-}
-
-.inline-input {
-  width: 120px;
-}
-
-.input-with-hint {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-
-.hint-inline {
-  font-size: 0.75rem;
-  color: var(--text-tertiary);
-}
-
-textarea {
-  width: 100%;
-  padding: 0.75rem;
-  border: 1px solid var(--border-input);
-  border-radius: 8px;
-  background: var(--bg-input);
-  color: var(--text-primary);
-  font-size: 0.85rem;
-  resize: vertical;
-  min-height: 80px;
-  box-sizing: border-box;
-}
-
-.hint-block {
-  font-size: 0.75rem;
-  color: var(--text-tertiary);
-  margin-top: 0.5rem;
-}
+.inline-select, .inline-input { padding: 0.5rem 0.75rem; border: 1px solid var(--border-input); border-radius: 6px; background: var(--bg-input); color: var(--text-primary); font-size: 0.85rem; min-width: 180px; }
+.inline-input { width: 120px; }
+.input-with-hint { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
+.hint-inline { font-size: 0.75rem; color: var(--text-tertiary); }
+textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--border-input); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); font-size: 0.85rem; resize: vertical; min-height: 80px; box-sizing: border-box; }
+.hint-block { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 0.5rem; }
 
 /* 表格容器 */
-.settings-table-container {
-  background: var(--bg-primary);
-  border: 1px solid var(--border-light);
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.settings-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.settings-table th {
-  text-align: left;
-  padding: 0.85rem 1rem;
-  background: var(--bg-secondary);
-  font-weight: 600;
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-  border-bottom: 1px solid var(--border-light);
-}
-
-.settings-table td {
-  padding: 0.85rem 1rem;
-  border-bottom: 1px solid var(--border-light);
-  vertical-align: middle;
-}
-
-.settings-table tr:last-child td {
-  border-bottom: none;
-}
-
-.settings-table tr:hover td {
-  background: var(--bg-hover);
-}
+.settings-table-container { background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; }
+.settings-table { width: 100%; border-collapse: collapse; }
+.settings-table th { text-align: left; padding: 0.85rem 1rem; background: var(--bg-secondary); font-weight: 600; font-size: 0.8rem; color: var(--text-secondary); border-bottom: 1px solid var(--border-light); }
+.settings-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
+.settings-table tr:last-child td { border-bottom: none; }
+.settings-table tr:hover td { background: var(--bg-hover); }
 
 /* 列宽 */
-.name-col {
-  min-width: 140px;
-}
-
-.info-col {
-  min-width: 200px;
-}
-
-.switch-col {
-  text-align: center;
-  width: 80px;
-}
-
-.action-col {
-  text-align: center;
-  width: 80px;
-}
-
-.ops-col {
-  width: 220px;
-  min-width: 220px;
-}
+.name-col { width: 15%; min-width: 120px; }
+.info-col { width: 55%; min-width: 150px; }
+.switch-col { text-align: center; width: 10%; }
+.action-col { text-align: center; width: 10%; }
+.ops-col { width: 10%; min-width: 180px; }
 
 /* Provider 单元格 */
-.provider-name {
-  font-weight: 600;
-  font-size: 0.9rem;
-  color: var(--text-primary);
-}
+.provider-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
+.provider-badges { display: flex; gap: 0.35rem; margin-top: 0.35rem; }
+.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 20px; font-size: 0.65rem; font-weight: 500; }
 
-.provider-badges {
-  display: flex;
-  gap: 0.35rem;
-  margin-top: 0.35rem;
-}
-
-.badge {
-  display: inline-block;
-  padding: 0.15rem 0.5rem;
-  border-radius: 20px;
-  font-size: 0.65rem;
-  font-weight: 500;
-}
-
-.badge.default {
-  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
-  color: white;
-}
-
-.badge.enabled {
-  background: rgba(52, 211, 153, 0.2);
-  color: #16a34a;
-}
-
-.badge.disabled {
-  background: var(--bg-tertiary);
-  color: var(--text-tertiary);
-}
-
-.info-item {
-  font-size: 0.8rem;
-  color: var(--text-primary);
-  word-break: break-all;
-}
-
-.info-item.sub {
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  margin-top: 0.2rem;
-}
+.badge.default { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; }
+.badge.enabled { background: rgba(52, 211, 153, 0.2); color: #16a34a; }
+.badge.disabled { background: var(--bg-tertiary); color: var(--text-tertiary); }
+.info-item { font-size: 0.8rem; color: var(--text-primary); word-break: break-all; }
+.info-item.sub { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.2rem; }
 
 /* 开关 */
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 40px;
-  height: 22px;
-  flex-shrink: 0;
-}
-
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.slider {
-  position: absolute;
-  cursor: pointer;
-  inset: 0;
-  background-color: #ccc;
-  transition: 0.3s;
-  border-radius: 22px;
-}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 16px;
-  width: 16px;
-  left: 3px;
-  bottom: 3px;
-  background-color: white;
-  transition: 0.3s;
-  border-radius: 50%;
-}
-
-input:checked + .slider {
-  background-color: var(--accent-primary);
-}
-
-input:checked + .slider:before {
-  transform: translateX(18px);
-}
+.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
+.switch input { opacity: 0; width: 0; height: 0; }
+.slider { position: absolute; cursor: pointer; inset: 0; background-color: #ccc; transition: 0.3s; border-radius: 22px; }
+.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; }
+input:checked + .slider { background-color: var(--accent-primary); }
+input:checked + .slider:before { transform: translateX(18px); }
 
 /* 操作按钮 */
-.ops-buttons {
-  display: flex;
-  flex-wrap: nowrap;
-  gap: 0.5rem;
-}
-
-.btn-op {
-  padding: 0.4rem 0.75rem;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-light);
-  border-radius: 6px;
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-  cursor: pointer;
-  transition: all 0.2s;
-  white-space: nowrap;
-}
-
-.btn-op:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
-
-.btn-op.btn-danger {
-  color: var(--danger-color);
-  border-color: var(--danger-bg);
-}
-
-.btn-op.btn-danger:hover {
-  background: var(--danger-bg);
-}
+.ops-buttons { display: flex; flex-wrap: nowrap; gap: 0.5rem; }
+.btn-op { padding: 0.4rem 0.75rem; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 6px; font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; white-space: nowrap; }
+.btn-op:hover { background: var(--bg-hover); color: var(--text-primary); }
+.btn-op.btn-danger { color: var(--danger-color); border-color: var(--danger-bg); }
+.btn-op.btn-danger:hover { background: var(--danger-bg); }
 
 /* 用户信息区域按钮 */
-.btn-action {
-  padding: 0.45rem 0.9rem;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-light);
-  border-radius: 6px;
-  font-size: 0.8rem;
-  color: var(--text-primary);
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.btn-action:hover {
-  background: var(--bg-hover);
-  border-color: var(--accent-primary);
-}
-
-.btn-action.btn-logout {
-  color: var(--danger-color);
-}
-
-.btn-action.btn-logout:hover {
-  background: var(--danger-bg);
-  border-color: var(--danger-color);
-}
+.btn-action { padding: 0.45rem 0.9rem; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 6px; font-size: 0.8rem; color: var(--text-primary); cursor: pointer; transition: all 0.2s; }
+.btn-action:hover { background: var(--bg-hover); border-color: var(--accent-primary); }
+.btn-action.btn-logout { color: var(--danger-color); }
+.btn-action.btn-logout:hover { background: var(--danger-bg); border-color: var(--danger-color); }
 
 /* 主要按钮 */
-.btn-primary {
-  padding: 0.5rem 1rem;
-  background: var(--accent-primary);
-  color: white;
-  border: none;
-  border-radius: 6px;
-  font-size: 0.85rem;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.btn-primary:hover {
-  background: var(--accent-primary-hover);
-}
-
-.btn-secondary {
-  padding: 0.5rem 1rem;
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  border: 1px solid var(--border-light);
-  border-radius: 6px;
-  font-size: 0.85rem;
-  cursor: pointer;
-}
-
-.btn-secondary:hover {
-  background: var(--bg-hover);
-}
+.btn-primary { padding: 0.5rem 1rem; background: var(--accent-primary); color: white; border: none; border-radius: 6px; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; }
+.btn-primary:hover { background: var(--accent-primary-hover); }
+.btn-secondary { padding: 0.5rem 1rem; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-light); border-radius: 6px; font-size: 0.85rem; cursor: pointer; }
+.btn-secondary:hover { background: var(--bg-hover); }
 
 /* 模态框 */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0,0,0,0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
+.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
+.modal { background: var(--bg-primary); border-radius: 16px; padding: 1.25rem; width: 100%; max-width: 400px; }
+.modal h2 { margin: 0 0 1.25rem; color: var(--text-primary); font-size: 1.1rem; }
 
-.modal {
-  background: var(--bg-primary);
-  border-radius: 16px;
-  padding: 1.25rem;
-  width: 100%;
-  max-width: 400px;
-}
-
-.modal h2 {
-  margin: 0 0 1.25rem;
-  color: var(--text-primary);
-  font-size: 1.1rem;
-}
-
-.result-modal {
-  text-align: center;
-}
-
-.result-modal.loading {
-  min-height: 120px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.result-loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.spinner-large {
-  width: 40px;
-  height: 40px;
-  border: 3px solid var(--border-light);
-  border-top-color: var(--accent-primary);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-.result-modal .result-icon {
-  width: 56px;
-  height: 56px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto 1rem;
-  font-size: 1.5rem;
-}
-
-.result-modal.success .result-icon {
-  background: rgba(52, 211, 153, 0.2);
-  color: #16a34a;
-}
-
-.result-modal.error .result-icon {
-  background: var(--danger-bg);
-  color: var(--danger-color);
-}
-
-.result-modal h2 {
-  margin: 0 0 0.75rem;
-}
-
-.result-modal .result-message {
-  color: var(--text-secondary);
-  margin-bottom: 1rem;
-  font-size: 0.9rem;
-}
-
-.result-modal .result-json {
-  background: var(--bg-code);
-  border: 1px solid var(--border-light);
-  border-radius: 8px;
-  padding: 0.75rem;
-  margin: 0.75rem 0;
-  max-height: 150px;
-  overflow: auto;
-  font-size: 0.75rem;
-  text-align: left;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-.modal-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.75rem;
-  margin-top: 1.25rem;
-}
-
-.form-group {
-  margin-bottom: 1rem;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  color: var(--text-primary);
-  font-size: 0.9rem;
-}
-
-.form-group input {
-  width: 100%;
-  padding: 0.65rem;
-  border: 1px solid var(--border-input);
-  border-radius: 8px;
-  background: var(--bg-input);
-  box-sizing: border-box;
-  color: var(--text-primary);
-  font-size: 0.9rem;
-}
-
-.form-group .hint {
-  font-size: 0.75rem;
-  color: var(--text-tertiary);
-  margin-top: 4px;
-  display: block;
-}
-
-.switch-card {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 1.25rem;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-light);
-  border-radius: 10px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.switch-card:hover {
-  border-color: var(--accent-primary);
-}
-
-.switch-card.active {
-  border-color: var(--accent-primary);
-  background: var(--accent-primary-light);
-}
-
-.switch-content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.switch-title {
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.switch-desc {
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-}
-
-.optional {
-  color: var(--text-tertiary);
-  font-weight: normal;
-  font-size: 0.8rem;
-}
-
-.error {
-  color: var(--danger-color);
-  background: var(--danger-bg);
-  padding: 0.75rem;
-  border-radius: 8px;
-  margin-top: 0.75rem;
-  font-size: 0.85rem;
-}
+.result-modal { text-align: center; }
+.result-modal.loading { min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+.result-loading { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
+.spinner-large { width: 40px; height: 40px; border: 3px solid var(--border-light); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 1s linear infinite; }
+.result-modal .result-icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.5rem; }
+.result-modal.success .result-icon { background: rgba(52, 211, 153, 0.2); color: #16a34a; }
+.result-modal.error .result-icon { background: var(--danger-bg); color: var(--danger-color); }
+.result-modal h2 { margin: 0 0 0.75rem; }
+.result-modal .result-message { color: var(--text-secondary); margin-bottom: 1rem; font-size: 0.9rem; }
+.result-modal .result-json { background: var(--bg-code); border: 1px solid var(--border-light); border-radius: 8px; padding: 0.75rem; margin: 0.75rem 0; max-height: 150px; overflow: auto; font-size: 0.75rem; text-align: left; white-space: pre-wrap; word-break: break-all; }
+.modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.25rem; }
+.form-group { margin-bottom: 1rem; }
+.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--text-primary); font-size: 0.9rem; }
+.form-group input { width: 100%; padding: 0.65rem; border: 1px solid var(--border-input); border-radius: 8px; background: var(--bg-input); box-sizing: border-box; color: var(--text-primary); font-size: 0.9rem; }
+.form-group .hint { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 4px; display: block; }
+.switch-card { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 10px; cursor: pointer; transition: all 0.2s; }
+.switch-card:hover { border-color: var(--accent-primary); }
+.switch-card.active { border-color: var(--accent-primary); background: var(--accent-primary-light); }
+.switch-content { display: flex; flex-direction: column; gap: 0.25rem; }
+.switch-title { font-weight: 600; color: var(--text-primary); }
+.switch-desc { font-size: 0.8rem; color: var(--text-secondary); }
+.optional { color: var(--text-tertiary); font-weight: normal; font-size: 0.8rem; }
+.error { color: var(--danger-color); background: var(--danger-bg); padding: 0.75rem; border-radius: 8px; margin-top: 0.75rem; font-size: 0.85rem; }
 
 /* 加载状态 */
-.loading,
-.empty-card {
-  text-align: center;
-  padding: 3rem;
-  color: var(--text-secondary);
-  background: var(--bg-primary);
-  border: 1px solid var(--border-light);
-  border-radius: 12px;
-}
+.loading, .empty-card { text-align: center; padding: 3rem; color: var(--text-secondary); background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: 12px; }
+.loading-small { padding: 1.5rem; text-align: center; color: var(--text-secondary); }
+.spinner-small { width: 24px; height: 24px; border: 3px solid var(--border-light); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 0.5rem; }
+.spinner { width: 40px; height: 40px; border: 3px solid var(--border-light); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem; }
 
-.loading-small {
-  padding: 1.5rem;
-  text-align: center;
-  color: var(--text-secondary);
-}
-
-.spinner-small {
-  width: 24px;
-  height: 24px;
-  border: 3px solid var(--border-light);
-  border-top-color: var(--accent-primary);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin: 0 auto 0.5rem;
-}
-
-.spinner {
-  width: 40px;
-  height: 40px;
-  border: 3px solid var(--border-light);
-  border-top-color: var(--accent-primary);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin: 0 auto 1rem;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
 </style>
diff --git a/dashboard/src/views/ToolsView.vue b/dashboard/src/views/ToolsView.vue
index 628d635..3e9e93d 100644
--- a/dashboard/src/views/ToolsView.vue
+++ b/dashboard/src/views/ToolsView.vue
@@ -83,16 +83,31 @@ onMounted(fetchData)
 </script>
 
 <style scoped>
+.page-container.tools {
+  padding: 1.5rem 12.5%;
+  box-sizing: border-box;
+  min-height: 100%;
+  overflow-y: auto;
+}
 .table-container { background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; }
 .tools-table { width: 100%; border-collapse: collapse; }
 .tools-table th { text-align: left; padding: 1rem; background: var(--bg-secondary); font-weight: 600; font-size: 0.85rem; color: var(--text-secondary); border-bottom: 1px solid var(--border-light); }
 .tools-table td { padding: 1rem; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
 .tools-table tr:last-child td { border-bottom: none; }
 .tools-table tr:hover td { background: var(--bg-secondary); }
+.tools-table th,
+.tools-table td {
+  width: 50%;
+}
+.tools-table th:last-child,
+.tools-table td:last-child {
+  width: auto;
+  text-align: center;
+}
 .tool-name { font-weight: 600; font-size: 0.95rem; }
 .tool-desc { font-size: 0.8rem; color: var(--text-secondary); margin: 0.25rem 0; }
 .tool-category { font-size: 0.7rem; color: var(--text-tertiary); }
-.params-col { width: 180px; }
+.params-col { width: 30%; }
 .param-tag { display: inline-block; padding: 0.2rem 0.5rem; background: var(--bg-code); border-radius: 4px; font-size: 0.75rem; color: var(--text-secondary); margin: 0.15rem; }
 .switch-col { text-align: center; }
 .switch { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; }
@@ -104,5 +119,4 @@ input:checked + .slider:before { transform: translateX(20px); }
 .loading { text-align: center; padding: 4rem; }
 .error-msg { text-align: center; padding: 2rem; color: var(--accent-primary); background: var(--accent-primary-light); border-radius: 12px; }
 .spinner { width: 40px; height: 40px; border: 3px solid var(--border-light); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem; }
-@keyframes spin { to { transform: rotate(360deg); } }
 </style>