From a5be5b1fdcf919b43c7d7850449511266cf8fbc0 Mon Sep 17 00:00:00 2001
From: ViperEkura <3081035982@qq.com>
Date: Sun, 12 Apr 2026 17:48:56 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dashboard/src/App.vue                     |  465 +---------
 dashboard/src/components/AppSidebar.vue   |  118 +++
 dashboard/src/components/BaseButton.vue   |   50 +
 dashboard/src/composables/index.js        |    5 +
 dashboard/src/composables/useAuth.js      |   77 ++
 dashboard/src/views/AuthView.vue          |  750 ++-------------
 dashboard/src/views/ConversationsView.vue |  940 ++-----------------
 dashboard/src/views/HomeView.vue          |  857 ++---------------
 dashboard/src/views/ToolsView.vue         | 1027 ++-------------------
 9 files changed, 564 insertions(+), 3725 deletions(-)
 create mode 100644 dashboard/src/components/AppSidebar.vue
 create mode 100644 dashboard/src/components/BaseButton.vue
 create mode 100644 dashboard/src/composables/index.js
 create mode 100644 dashboard/src/composables/useAuth.js

diff --git a/dashboard/src/App.vue b/dashboard/src/App.vue
index 91c8deb..3b91f0f 100644
--- a/dashboard/src/App.vue
+++ b/dashboard/src/App.vue
@@ -1,469 +1,26 @@
 <script setup>
-import { ref, onMounted, watch } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { authAPI } from './services/api.js'
+import { ref } from 'vue'
+import { useAuth } from './composables/useAuth.js'
+import AppSidebar from './components/AppSidebar.vue'
 
-const router = useRouter()
-const route = useRoute()
-
-const user = ref(null)
-const loading = ref(true)
-const showUserMenu = ref(false)
+const { isLoggedIn } = useAuth()
 const sidebarCollapsed = ref(false)
-const isLoggedIn = ref(false)
-
-// 初始化检查登录状态
-const checkAuth = () => {
-  isLoggedIn.value = !!localStorage.getItem('access_token')
-}
-
-// 获取用户信息
-const fetchUserInfo = async () => {
-  checkAuth()
-  if (!isLoggedIn.value) {
-    loading.value = false
-    return
-  }
-  
-  try {
-    const response = await authAPI.getMe()
-    if (response.success) {
-      user.value = response.data
-      localStorage.setItem('user', JSON.stringify(response.data))
-    }
-  } catch (err) {
-    console.error('获取用户信息失败:', err)
-    logout()
-  } finally {
-    loading.value = false
-  }
-}
-
-// 登出
-const logout = async () => {
-  try {
-    await authAPI.logout()
-  } catch (err) {
-    console.error('登出失败:', err)
-  } finally {
-    localStorage.removeItem('access_token')
-    localStorage.removeItem('user')
-    user.value = null
-    showUserMenu.value = false
-    isLoggedIn.value = false
-    router.push('/auth')
-  }
-}
-
-// 切换侧边栏
-const toggleSidebar = () => {
-  sidebarCollapsed.value = !sidebarCollapsed.value
-}
-
-// 导航高亮
-const isActive = (path) => {
-  return route.path === path
-}
-
-// 监听路由变化时关闭菜单
-watch(() => route.path, () => {
-  showUserMenu.value = false
-})
-
-// 监听登录状态变化
-onMounted(() => {
-  fetchUserInfo()
-  
-  // 监听 auth-change 事件
-  window.addEventListener('auth-change', () => {
-    checkAuth()
-    if (isLoggedIn.value) {
-      fetchUserInfo()
-    }
-  })
-})
 </script>
 
 <template>
   <div id="app" :class="{ 'sidebar-collapsed': sidebarCollapsed }">
-    <!-- 侧边栏 -->
-    <aside class="sidebar" v-if="isLoggedIn">
-      <div class="sidebar-header">
-        <div class="brand">
-          <span class="brand-icon">✨</span>
-          <span class="brand-text">Luxx</span>
-        </div>
-        <button @click="toggleSidebar" class="toggle-btn">
-          {{ sidebarCollapsed ? '→' : '←' }}
-        </button>
-      </div>
-
-      <nav class="sidebar-nav">
-        <router-link to="/" class="nav-item" :class="{ active: isActive('/') }">
-          <span class="nav-icon">🏠</span>
-          <span class="nav-text">首页</span>
-        </router-link>
-        
-        <router-link to="/conversations" class="nav-item" :class="{ active: isActive('/conversations') }">
-          <span class="nav-icon">💬</span>
-          <span class="nav-text">会话</span>
-        </router-link>
-        
-        <router-link to="/tools" class="nav-item" :class="{ active: isActive('/tools') }">
-          <span class="nav-icon">🛠️</span>
-          <span class="nav-text">工具</span>
-        </router-link>
-        
-        <router-link to="/about" class="nav-item" :class="{ active: isActive('/about') }">
-          <span class="nav-icon">ℹ️</span>
-          <span class="nav-text">关于</span>
-        </router-link>
-      </nav>
-
-      <div class="sidebar-footer">
-        <div class="user-menu-container">
-          <button @click="showUserMenu = !showUserMenu" class="user-button">
-            <div class="user-avatar">
-              {{ user?.username?.charAt(0).toUpperCase() || 'U' }}
-            </div>
-            <div class="user-info">
-              <span class="user-name">{{ user?.username }}</span>
-              <span class="user-role">{{ user?.role || '用户' }}</span>
-            </div>
-          </button>
-          
-          <div v-if="showUserMenu" class="user-dropdown">
-            <button @click="logout" class="dropdown-item">
-              <span>🚪</span> 退出登录
-            </button>
-          </div>
-        </div>
-      </div>
-    </aside>
-
-    <!-- 主内容区 -->
+    <AppSidebar v-if="isLoggedIn" :collapsed="sidebarCollapsed" @toggle="sidebarCollapsed = !sidebarCollapsed" />
     <main class="main-content" :class="{ 'no-sidebar': !isLoggedIn }">
       <router-view />
     </main>
-
-    <!-- 点击外部关闭菜单 -->
-    <div 
-      v-if="showUserMenu" 
-      class="overlay" 
-      @click="showUserMenu = false"
-    ></div>
   </div>
 </template>
 
 <style scoped>
-#app {
-  display: flex;
-  min-height: 100vh;
-  background: var(--bg);
-}
-
-/* 侧边栏 */
-.sidebar {
-  width: 260px;
-  background: var(--bg);
-  border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100vh;
-  z-index: 100;
-  transition: width 0.3s ease;
-}
-
-.sidebar-collapsed .sidebar {
-  width: 70px;
-}
-
-/* 侧边栏头部 */
-.sidebar-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1.25rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.brand {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.brand-icon {
-  font-size: 1.75rem;
-}
-
-.brand-text {
-  font-size: 1.5rem;
-  font-weight: 700;
-  background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.sidebar-collapsed .brand-text,
-.sidebar-collapsed .toggle-btn {
-  display: none;
-}
-
-.toggle-btn {
-  background: var(--code-bg);
-  border: none;
-  border-radius: 6px;
-  padding: 0.5rem 0.75rem;
-  cursor: pointer;
-  font-size: 1rem;
-  transition: background 0.2s;
-}
-
-.toggle-btn:hover {
-  background: var(--accent-bg);
-}
-
-/* 导航 */
-.sidebar-nav {
-  flex: 1;
-  padding: 1rem 0.75rem;
-  overflow-y: auto;
-}
-
-.nav-item {
-  display: flex;
-  align-items: center;
-  gap: 0.875rem;
-  padding: 0.875rem 1rem;
-  border-radius: 10px;
-  text-decoration: none;
-  color: var(--text);
-  margin-bottom: 0.25rem;
-  transition: all 0.2s;
-}
-
-.nav-item:hover {
-  background: var(--code-bg);
-  color: var(--text-h);
-}
-
-.nav-item.active {
-  background: var(--accent-bg);
-  color: var(--accent);
-}
-
-.nav-icon {
-  font-size: 1.25rem;
-  width: 24px;
-  text-align: center;
-}
-
-.nav-text {
-  font-size: 0.95rem;
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-.sidebar-collapsed .nav-text {
-  display: none;
-}
-
-.sidebar-collapsed .nav-item {
-  justify-content: center;
-  padding: 0.875rem;
-}
-
-/* 侧边栏底部 */
-.sidebar-footer {
-  padding: 1rem;
-  border-top: 1px solid var(--border);
-}
-
-.user-menu-container {
-  position: relative;
-}
-
-.user-button {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  width: 100%;
-  padding: 0.75rem;
-  background: var(--code-bg);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.user-button:hover {
-  border-color: var(--accent);
-}
-
-.user-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  font-size: 1rem;
-  flex-shrink: 0;
-}
-
-.user-info {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  overflow: hidden;
-}
-
-.user-name {
-  font-weight: 600;
-  color: var(--text-h);
-  font-size: 0.95rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.user-role {
-  font-size: 0.8rem;
-  color: var(--text);
-}
-
-.sidebar-collapsed .user-info {
-  display: none;
-}
-
-.sidebar-collapsed .user-button {
-  justify-content: center;
-}
-
-/* 下拉菜单 */
-.user-dropdown {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  right: 0;
-  margin-bottom: 0.5rem;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  box-shadow: 0 -5px 20px var(--shadow);
-  overflow: hidden;
-}
-
-.dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  width: 100%;
-  padding: 0.875rem 1rem;
-  background: transparent;
-  border: none;
-  text-align: left;
-  font-size: 0.95rem;
-  color: var(--text);
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.dropdown-item:hover {
-  background: #fef2f2;
-  color: #dc2626;
-}
-
-/* 主内容区 */
-.main-content {
-  flex: 1;
-  margin-left: 260px;
-  padding: 2rem;
-  min-height: 100vh;
-  transition: margin-left 0.3s ease;
-}
-
-.main-content.no-sidebar {
-  margin-left: 0;
-}
-
-.sidebar-collapsed .main-content {
-  margin-left: 70px;
-}
-
-/* 遮罩层 */
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 99;
-}
-
-/* 响应式 */
-@media (max-width: 1024px) {
-  .sidebar {
-    width: 70px;
-  }
-  
-  .brand-text,
-  .toggle-btn,
-  .nav-text,
-  .user-info {
-    display: none !important;
-  }
-  
-  .nav-item {
-    justify-content: center;
-    padding: 0.875rem;
-  }
-  
-  .user-button {
-    justify-content: center;
-  }
-  
-  .main-content {
-    margin-left: 70px;
-  }
-}
-
-@media (max-width: 768px) {
-  .sidebar {
-    transform: translateX(-100%);
-    width: 260px;
-  }
-  
-  .brand-text,
-  .toggle-btn,
-  .nav-text,
-  .user-info {
-    display: flex !important;
-  }
-  
-  .nav-item {
-    justify-content: flex-start;
-    padding: 0.875rem 1rem;
-  }
-  
-  .user-button {
-    justify-content: flex-start;
-  }
-  
-  .main-content {
-    margin-left: 0;
-  }
-  
-  .sidebar-collapsed .sidebar {
-    transform: translateX(-100%);
-  }
-}
+#app { display: flex; min-height: 100vh; background: var(--bg); }
+.main-content { flex: 1; margin-left: 260px; padding: 2rem; min-height: 100vh; transition: margin-left 0.3s; }
+.main-content.no-sidebar { margin-left: 0; }
+.sidebar-collapsed .main-content { margin-left: 70px; }
+@media (max-width: 1024px) { .main-content { margin-left: 70px; } }
+@media (max-width: 768px) { .main-content { margin-left: 0; } }
 </style>
diff --git a/dashboard/src/components/AppSidebar.vue b/dashboard/src/components/AppSidebar.vue
new file mode 100644
index 0000000..2424ea5
--- /dev/null
+++ b/dashboard/src/components/AppSidebar.vue
@@ -0,0 +1,118 @@
+<template>
+  <aside class="sidebar" :class="{ collapsed }">
+    <div class="sidebar-header">
+      <div class="brand">
+        <span class="brand-icon">✨</span>
+        <span class="brand-text">Luxx</span>
+      </div>
+      <button @click="$emit('toggle')" class="toggle-btn">{{ collapsed ? '→' : '←' }}</button>
+    </div>
+
+    <nav class="sidebar-nav">
+      <router-link v-for="item in navItems" :key="item.path" :to="item.path" class="nav-item" active-class="active">
+        <span class="nav-icon">{{ item.icon }}</span>
+        <span class="nav-text">{{ item.label }}</span>
+      </router-link>
+    </nav>
+
+    <div class="sidebar-footer">
+      <button @click="handleLogout" class="user-button">
+        <div class="user-avatar">{{ user?.username?.charAt(0)?.toUpperCase() || 'U' }}</div>
+        <div class="user-info">
+          <span class="user-name">{{ user?.username }}</span>
+          <span class="user-role">{{ user?.role || '用户' }}</span>
+        </div>
+      </button>
+    </div>
+  </aside>
+</template>
+
+<script setup>
+import { useAuth } from '../composables/useAuth.js'
+import { authAPI } from '../services/api.js'
+import { useRouter } from 'vue-router'
+
+defineProps({ collapsed: Boolean })
+defineEmits(['toggle'])
+
+const router = useRouter()
+const { user, logout } = useAuth()
+
+const navItems = [
+  { path: '/', icon: '🏠', label: '首页' },
+  { path: '/conversations', icon: '💬', label: '会话' },
+  { path: '/tools', icon: '🛠️', label: '工具' },
+  { path: '/about', icon: 'ℹ️', label: '关于' }
+]
+
+const handleLogout = async () => {
+  await logout(authAPI)
+  router.push('/auth')
+}
+</script>
+
+<style scoped>
+.sidebar {
+  width: 260px; height: 100vh;
+  background: var(--bg); border-right: 1px solid var(--border);
+  display: flex; flex-direction: column;
+  position: fixed; left: 0; top: 0; z-index: 100;
+  transition: width 0.3s;
+}
+.sidebar.collapsed { width: 70px; }
+.sidebar-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 1.25rem; border-bottom: 1px solid var(--border);
+}
+.brand { display: flex; align-items: center; gap: 0.75rem; }
+.brand-icon { font-size: 1.75rem; }
+.brand-text {
+  font-size: 1.5rem; font-weight: 700;
+  background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+}
+.collapsed .brand-text, .collapsed .toggle-btn { display: none; }
+.toggle-btn {
+  background: var(--code-bg); border: none; border-radius: 6px;
+  padding: 0.5rem 0.75rem; cursor: pointer;
+}
+.sidebar-nav { flex: 1; padding: 1rem 0.75rem; overflow-y: auto; }
+.nav-item {
+  display: flex; align-items: center; gap: 0.875rem;
+  padding: 0.875rem 1rem; border-radius: 10px;
+  text-decoration: none; color: var(--text); margin-bottom: 0.25rem;
+  transition: all 0.2s;
+}
+.nav-item:hover { background: var(--code-bg); color: var(--text-h); }
+.nav-item.active { background: var(--accent-bg); color: var(--accent); }
+.nav-icon { font-size: 1.25rem; width: 24px; text-align: center; }
+.nav-text { font-size: 0.95rem; font-weight: 500; white-space: nowrap; }
+.collapsed .nav-text { display: none; }
+.collapsed .nav-item { justify-content: center; padding: 0.875rem; }
+.sidebar-footer { padding: 1rem; border-top: 1px solid var(--border); }
+.user-button {
+  display: flex; align-items: center; gap: 0.75rem;
+  width: 100%; padding: 0.75rem; background: var(--code-bg);
+  border: 1px solid var(--border); border-radius: 10px;
+  cursor: pointer; transition: all 0.2s;
+}
+.user-button:hover { border-color: var(--accent); }
+.user-avatar {
+  width: 40px; height: 40px; border-radius: 50%;
+  background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
+  color: white; display: flex; align-items: center; justify-content: center;
+  font-weight: 600; flex-shrink: 0;
+}
+.user-info { display: flex; flex-direction: column; overflow: hidden; }
+.user-name { font-weight: 600; color: var(--text-h); font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.user-role { font-size: 0.8rem; color: var(--text); }
+.collapsed .user-info { display: none; }
+.collapsed .user-button { justify-content: center; }
+
+@media (max-width: 1024px) {
+  .sidebar { width: 70px; }
+  .brand-text, .toggle-btn, .nav-text, .user-info { display: none !important; }
+  .nav-item { justify-content: center; padding: 0.875rem; }
+  .user-button { justify-content: center; }
+}
+</style>
diff --git a/dashboard/src/components/BaseButton.vue b/dashboard/src/components/BaseButton.vue
new file mode 100644
index 0000000..dd5020f
--- /dev/null
+++ b/dashboard/src/components/BaseButton.vue
@@ -0,0 +1,50 @@
+<template>
+  <button 
+    :class="['base-btn', `btn-${type}`, { 'btn-block': block, 'btn-loading': loading }]"
+    :disabled="disabled || loading"
+    @click="$emit('click', $event)"
+  >
+    <span v-if="loading" class="spinner"></span>
+    <slot v-else />
+  </button>
+</template>
+
+<script setup>
+defineProps({
+  type: { type: String, default: 'primary' },
+  disabled: Boolean,
+  loading: Boolean,
+  block: Boolean
+})
+defineEmits(['click'])
+</script>
+
+<style scoped>
+.base-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 8px;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.btn-primary { background: var(--accent); color: white; }
+.btn-secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
+.btn-danger { background: #dc2626; color: white; }
+.btn-block { width: 100%; }
+.base-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+.base-btn:not(:disabled):hover { transform: translateY(-2px); }
+.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); } }
+</style>
diff --git a/dashboard/src/composables/index.js b/dashboard/src/composables/index.js
new file mode 100644
index 0000000..b883f31
--- /dev/null
+++ b/dashboard/src/composables/index.js
@@ -0,0 +1,5 @@
+// 导出所有组合式函数
+export { useAuth } from './useAuth.js'
+export { useApi, usePagination, useForm } from './useApi.js'
+export { formatDate, formatNumber, truncate } from './useFormatters.js'
+export { debounce, throttle, storage, copyToClipboard } from './useUtils.js'
diff --git a/dashboard/src/composables/useAuth.js b/dashboard/src/composables/useAuth.js
new file mode 100644
index 0000000..040810e
--- /dev/null
+++ b/dashboard/src/composables/useAuth.js
@@ -0,0 +1,77 @@
+/**
+ * 认证状态管理组合式函数
+ */
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export function useAuth() {
+  const isLoggedIn = ref(false)
+  const user = ref(null)
+  const loading = ref(true)
+
+  // 检查登录状态
+  const checkAuth = () => {
+    isLoggedIn.value = !!localStorage.getItem('access_token')
+    if (isLoggedIn.value) {
+      const userData = localStorage.getItem('user')
+      if (userData) {
+        try {
+          user.value = JSON.parse(userData)
+        } catch {
+          user.value = null
+        }
+      }
+    } else {
+      user.value = null
+    }
+  }
+
+  // 登录
+  const login = (token, userData) => {
+    localStorage.setItem('access_token', token)
+    localStorage.setItem('user', JSON.stringify(userData))
+    isLoggedIn.value = true
+    user.value = userData
+    window.dispatchEvent(new CustomEvent('auth-change'))
+  }
+
+  // 登出
+  const logout = async (api) => {
+    try {
+      if (api) await api.logout()
+    } catch (e) {
+      console.error('登出失败:', e)
+    }
+    localStorage.removeItem('access_token')
+    localStorage.removeItem('user')
+    isLoggedIn.value = false
+    user.value = null
+    window.dispatchEvent(new CustomEvent('auth-change'))
+  }
+
+  // 获取 Token
+  const getToken = () => localStorage.getItem('access_token')
+
+  // 监听认证变化
+  const handleAuthChange = () => {
+    checkAuth()
+  }
+
+  onMounted(() => {
+    checkAuth()
+    window.addEventListener('auth-change', handleAuthChange)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('auth-change', handleAuthChange)
+  })
+
+  return {
+    isLoggedIn,
+    user,
+    loading,
+    checkAuth,
+    login,
+    logout,
+    getToken
+  }
+}
diff --git a/dashboard/src/views/AuthView.vue b/dashboard/src/views/AuthView.vue
index 13151ba..7bcda4b 100644
--- a/dashboard/src/views/AuthView.vue
+++ b/dashboard/src/views/AuthView.vue
@@ -1,335 +1,94 @@
 <template>
   <div class="auth-page">
-    <div class="auth-container">
-      <!-- 左侧品牌区 -->
-      <div class="auth-branding">
-        <div class="branding-content">
-          <div class="brand-logo">✨</div>
-          <h1>欢迎回来</h1>
-          <p>登录到 Luxx 平台，开始智能对话之旅</p>
-          <div class="features-list">
-            <div class="feature-item">
-              <span class="feature-icon">💬</span>
-              <span>智能会话管理</span>
-            </div>
-            <div class="feature-item">
-              <span class="feature-icon">🛠️</span>
-              <span>丰富的工具生态</span>
-            </div>
-            <div class="feature-item">
-              <span class="feature-icon">🔒</span>
-              <span>安全可靠的认证</span>
-            </div>
-          </div>
-        </div>
+    <div class="auth-card">
+      <div class="tabs">
+        <button @click="mode = 'login'" :class="{ active: mode === 'login' }">登录</button>
+        <button @click="mode = 'register'" :class="{ active: mode === 'register' }">注册</button>
       </div>
 
-      <!-- 右侧表单区 -->
-      <div class="auth-form-section">
-        <div class="auth-card">
-          <div class="tabs">
-            <button 
-              @click="activeTab = 'login'" 
-              :class="{ active: activeTab === 'login' }"
-              class="tab-btn"
-            >
-              登录
-            </button>
-            <button 
-              @click="activeTab = 'register'" 
-              :class="{ active: activeTab === 'register' }"
-              class="tab-btn"
-            >
-              注册
-            </button>
-          </div>
-
-          <!-- 登录表单 -->
-          <div v-if="activeTab === 'login'" class="form-container">
-            <h2>登录账户</h2>
-            <p class="form-subtitle">请输入您的账户信息</p>
-            
-            <form @submit.prevent="handleLogin">
-              <div class="form-group">
-                <label for="login-username">
-                  <span class="label-icon">👤</span>
-                  用户名
-                </label>
-                <input 
-                  v-model="loginForm.username" 
-                  id="login-username" 
-                  type="text" 
-                  placeholder="请输入用户名"
-                  required
-                  class="form-input"
-                  :disabled="loading"
-                />
-              </div>
-              
-              <div class="form-group">
-                <label for="login-password">
-                  <span class="label-icon">🔑</span>
-                  密码
-                </label>
-                <div class="password-input-wrapper">
-                  <input 
-                    v-model="loginForm.password" 
-                    id="login-password" 
-                    :type="showPassword ? 'text' : 'password'" 
-                    placeholder="请输入密码"
-                    required
-                    class="form-input"
-                    :disabled="loading"
-                  />
-                  <button 
-                    type="button" 
-                    @click="showPassword = !showPassword"
-                    class="password-toggle"
-                  >
-                    {{ showPassword ? '👁️' : '👁️‍🗨️' }}
-                  </button>
-                </div>
-              </div>
-
-              <div v-if="loginError" class="error-message">
-                <span class="error-icon">⚠️</span>
-                {{ loginError }}
-              </div>
-
-              <button 
-                type="submit" 
-                :disabled="loading" 
-                class="btn-submit"
-              >
-                <span v-if="loading" class="spinner-small"></span>
-                <span v-else>登录</span>
-              </button>
-            </form>
-
-            <div class="form-footer">
-              <p>还没有账户？<button @click="activeTab = 'register'" class="link-btn">立即注册</button></p>
-            </div>
-          </div>
-
-          <!-- 注册表单 -->
-          <div v-else class="form-container">
-            <h2>创建账户</h2>
-            <p class="form-subtitle">填写以下信息完成注册</p>
-            
-            <form @submit.prevent="handleRegister">
-              <div class="form-group">
-                <label for="register-username">
-                  <span class="label-icon">👤</span>
-                  用户名
-                </label>
-                <input 
-                  v-model="registerForm.username" 
-                  id="register-username" 
-                  type="text" 
-                  placeholder="请输入用户名（3-20位）"
-                  required
-                  minlength="3"
-                  maxlength="20"
-                  class="form-input"
-                  :disabled="loading"
-                />
-              </div>
-              
-              <div class="form-group">
-                <label for="register-email">
-                  <span class="label-icon">📧</span>
-                  邮箱
-                </label>
-                <input 
-                  v-model="registerForm.email" 
-                  id="register-email" 
-                  type="email" 
-                  placeholder="请输入邮箱地址"
-                  required
-                  class="form-input"
-                  :disabled="loading"
-                />
-              </div>
-              
-              <div class="form-group">
-                <label for="register-password">
-                  <span class="label-icon">🔒</span>
-                  密码
-                </label>
-                <div class="password-input-wrapper">
-                  <input 
-                    v-model="registerForm.password" 
-                    id="register-password" 
-                    :type="showPassword ? 'text' : 'password'" 
-                    placeholder="请输入密码（至少6位）"
-                    required
-                    minlength="6"
-                    class="form-input"
-                    :disabled="loading"
-                  />
-                  <button 
-                    type="button" 
-                    @click="showPassword = !showPassword"
-                    class="password-toggle"
-                  >
-                    {{ showPassword ? '👁️' : '👁️‍🗨️' }}
-                  </button>
-                </div>
-              </div>
-
-              <div class="form-group">
-                <label for="register-confirm-password">
-                  <span class="label-icon">🔐</span>
-                  确认密码
-                </label>
-                <input 
-                  v-model="confirmPassword" 
-                  id="register-confirm-password" 
-                  :type="showPassword ? 'text' : 'password'" 
-                  placeholder="请再次输入密码"
-                  required
-                  class="form-input"
-                  :disabled="loading"
-                />
-              </div>
-
-              <div v-if="registerError" class="error-message">
-                <span class="error-icon">⚠️</span>
-                {{ registerError }}
-              </div>
-
-              <button 
-                type="submit" 
-                :disabled="loading" 
-                class="btn-submit"
-              >
-                <span v-if="loading" class="spinner-small"></span>
-                <span v-else>注册</span>
-              </button>
-            </form>
-
-            <div class="form-footer">
-              <p>已有账户？<button @click="activeTab = 'login'" class="link-btn">立即登录</button></p>
-            </div>
-          </div>
-
-          <!-- 成功提示 -->
-          <div v-if="authSuccess" class="success-overlay">
-            <div class="success-content">
-              <div class="success-icon">✓</div>
-              <h3>登录成功！</h3>
-              <p>正在跳转...</p>
-            </div>
-          </div>
+      <form @submit.prevent="handleSubmit">
+        <div class="form-group">
+          <label>用户名</label>
+          <input v-model="form.username" type="text" placeholder="请输入用户名" required />
         </div>
-      </div>
+        
+        <div v-if="mode === 'register'" class="form-group">
+          <label>邮箱</label>
+          <input v-model="form.email" type="email" placeholder="请输入邮箱" required />
+        </div>
+        
+        <div class="form-group">
+          <label>密码</label>
+          <input v-model="form.password" type="password" placeholder="请输入密码" required />
+        </div>
+        
+        <div v-if="mode === 'register'" class="form-group">
+          <label>确认密码</label>
+          <input v-model="confirmPassword" type="password" placeholder="请再次输入密码" required />
+        </div>
+
+        <div v-if="error" class="error-msg">{{ error }}</div>
+
+        <button type="submit" :disabled="loading" class="btn-submit">
+          <span v-if="loading" class="spinner"></span>
+          <span v-else>{{ mode === 'login' ? '登录' : '注册' }}</span>
+        </button>
+      </form>
+
+      <p class="switch-mode">
+        {{ mode === 'login' ? '没有账户？' : '已有账户？' }}
+        <button @click="mode = mode === 'login' ? 'register' : 'login'">
+          {{ mode === 'login' ? '立即注册' : '立即登录' }}
+        </button>
+      </p>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, reactive } from 'vue'
 import { useRouter } from 'vue-router'
 import { authAPI } from '../services/api.js'
+import { useAuth } from '../composables/useAuth.js'
 
 const router = useRouter()
+const { login } = useAuth()
 
-const activeTab = ref('login')
+const mode = ref('login')
 const loading = ref(false)
-const loginError = ref('')
-const registerError = ref('')
-const authSuccess = ref(false)
-const showPassword = ref(false)
+const error = ref('')
 const confirmPassword = ref('')
+const form = reactive({ username: '', email: '', password: '' })
 
-const loginForm = ref({
-  username: '',
-  password: ''
-})
-
-const registerForm = ref({
-  username: '',
-  email: '',
-  password: ''
-})
-
-// 登录处理
-const handleLogin = async () => {
+const handleSubmit = async () => {
+  error.value = ''
   loading.value = true
-  loginError.value = ''
   
   try {
-    const response = await authAPI.login({
-      username: loginForm.value.username,
-      password: loginForm.value.password
-    })
-    
-    if (response.success && response.data?.access_token) {
-      // 保存 token 和用户信息
-      localStorage.setItem('access_token', response.data.access_token)
-      localStorage.setItem('user', JSON.stringify(response.data.user))
-      
-      // 触发登录成功事件
-      window.dispatchEvent(new CustomEvent('auth-change'))
-      
-      authSuccess.value = true
-      
-      // 延迟跳转，让用户看到成功提示
-      setTimeout(() => {
-        router.push('/')
-      }, 1000)
-    } else {
-      throw new Error(response.message || '登录失败')
+    if (mode.value === 'register' && form.password !== confirmPassword.value) {
+      throw new Error('两次密码不一致')
     }
-  } catch (err) {
-    console.error('登录失败:', err)
-    loginError.value = err.message || '用户名或密码错误'
-  } finally {
-    loading.value = false
-  }
-}
-
-// 注册处理
-const handleRegister = async () => {
-  loading.value = true
-  registerError.value = ''
-  
-  // 验证密码确认
-  if (registerForm.value.password !== confirmPassword.value) {
-    registerError.value = '两次输入的密码不一致'
-    loading.value = false
-    return
-  }
-  
-  try {
-    const response = await authAPI.register({
-      username: registerForm.value.username,
-      email: registerForm.value.email,
-      password: registerForm.value.password
-    })
+    
+    const api = mode.value === 'login' ? authAPI.login : authAPI.register
+    const response = await api(mode.value === 'login' 
+      ? { username: form.username, password: form.password }
+      : form
+    )
     
     if (response.success) {
-      // 注册成功后自动登录
-      authSuccess.value = true
-      
-      setTimeout(() => {
-        // 清空表单并切换到登录
-        registerForm.value = {
-          username: '',
-          email: '',
-          password: ''
-        }
+      if (mode.value === 'login' && response.data?.access_token) {
+        login(response.data.access_token, response.data.user)
+        router.push('/')
+      } else {
+        mode.value = 'login'
+        form.username = form.password = form.email = ''
         confirmPassword.value = ''
-        authSuccess.value = false
-        activeTab.value = 'login'
-        loginForm.value.username = registerForm.value.username
-      }, 1500)
+      }
     } else {
-      throw new Error(response.message || '注册失败')
+      throw new Error(response.message || '操作失败')
     }
   } catch (err) {
-    console.error('注册失败:', err)
-    registerError.value = err.message || '注册失败，请稍后重试'
+    error.value = err.message || '操作失败，请重试'
   } finally {
     loading.value = false
   }
@@ -337,370 +96,21 @@ const handleRegister = async () => {
 </script>
 
 <style scoped>
-.auth-page {
-  min-height: calc(100vh - 70px - 80px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-}
-
-.auth-container {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  max-width: 1000px;
-  width: 100%;
-  background: var(--bg);
-  border-radius: 24px;
-  overflow: hidden;
-  box-shadow: 0 20px 60px var(--shadow);
-}
-
-/* 左侧品牌区 */
-.auth-branding {
-  background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
-  padding: 3rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-}
-
-.branding-content {
-  text-align: center;
-}
-
-.brand-logo {
-  font-size: 4rem;
-  margin-bottom: 1.5rem;
-}
-
-.auth-branding h1 {
-  font-size: 2.5rem;
-  margin: 0 0 1rem 0;
-  color: white;
-}
-
-.auth-branding p {
-  font-size: 1.1rem;
-  opacity: 0.9;
-  margin: 0 0 2rem 0;
-}
-
-.features-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  text-align: left;
-}
-
-.feature-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  font-size: 1rem;
-}
-
-.feature-icon {
-  font-size: 1.5rem;
-}
-
-/* 右侧表单区 */
-.auth-form-section {
-  padding: 3rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.auth-card {
-  width: 100%;
-  max-width: 380px;
-  position: relative;
-}
-
-/* 标签页 */
-.tabs {
-  display: flex;
-  margin-bottom: 2rem;
-  background: var(--code-bg);
-  border-radius: 12px;
-  padding: 0.25rem;
-}
-
-.tab-btn {
-  flex: 1;
-  padding: 0.75rem;
-  background: transparent;
-  border: none;
-  border-radius: 8px;
-  font-size: 1rem;
-  font-weight: 500;
-  color: var(--text);
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.tab-btn.active {
-  background: var(--bg);
-  color: var(--text-h);
-  box-shadow: 0 2px 8px var(--shadow);
-}
-
-/* 表单容器 */
-.form-container h2 {
-  font-size: 1.5rem;
-  margin: 0 0 0.5rem 0;
-  color: var(--text-h);
-}
-
-.form-subtitle {
-  color: var(--text);
-  margin: 0 0 1.5rem 0;
-  font-size: 0.95rem;
-}
-
-/* 表单组 */
-.form-group {
-  margin-bottom: 1.25rem;
-}
-
-.form-group label {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  color: var(--text-h);
-}
-
-.label-icon {
-  font-size: 1rem;
-}
-
-.form-input {
-  width: 100%;
-  padding: 0.875rem 1rem;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  font-size: 1rem;
-  background: var(--bg);
-  color: var(--text);
-  transition: all 0.2s;
-  box-sizing: border-box;
-}
-
-.form-input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-bg);
-}
-
-.form-input:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.form-input::placeholder {
-  color: var(--text);
-  opacity: 0.6;
-}
-
-/* 密码输入框 */
-.password-input-wrapper {
-  position: relative;
-}
-
-.password-input-wrapper .form-input {
-  padding-right: 3rem;
-}
-
-.password-toggle {
-  position: absolute;
-  right: 0.75rem;
-  top: 50%;
-  transform: translateY(-50%);
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 1.25rem;
-  opacity: 0.6;
-  transition: opacity 0.2s;
-}
-
-.password-toggle:hover {
-  opacity: 1;
-}
-
-/* 错误消息 */
-.error-message {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  background: #fef2f2;
-  border: 1px solid #fecaca;
-  border-radius: 8px;
-  color: #dc2626;
-  font-size: 0.9rem;
-  margin-bottom: 1rem;
-}
-
-.error-icon {
-  font-size: 1rem;
-}
-
-/* 提交按钮 */
-.btn-submit {
-  width: 100%;
-  padding: 1rem;
-  background: var(--accent);
-  color: white;
-  border: none;
-  border-radius: 10px;
-  font-size: 1.1rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-}
-
-.btn-submit:hover:not(:disabled) {
-  background: var(--accent-border);
-  transform: translateY(-2px);
-  box-shadow: 0 5px 20px var(--shadow);
-}
-
-.btn-submit:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-
-.spinner-small {
-  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); }
-}
-
-/* 表单页脚 */
-.form-footer {
-  margin-top: 1.5rem;
-  text-align: center;
-  color: var(--text);
-}
-
-.form-footer p {
-  margin: 0;
-}
-
-.link-btn {
-  background: none;
-  border: none;
-  color: var(--accent);
-  cursor: pointer;
-  font-weight: 500;
-  text-decoration: underline;
-}
-
-.link-btn:hover {
-  color: var(--accent-border);
-}
-
-/* 成功覆盖层 */
-.success-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 16px;
-  animation: fadeIn 0.3s ease;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.success-content {
-  text-align: center;
-}
-
-.success-icon {
-  width: 60px;
-  height: 60px;
-  background: #d4edda;
-  color: #155724;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2rem;
-  margin: 0 auto 1rem;
-  animation: scaleIn 0.3s ease;
-}
-
-@keyframes scaleIn {
-  from { transform: scale(0); }
-  to { transform: scale(1); }
-}
-
-.success-content h3 {
-  font-size: 1.5rem;
-  margin: 0 0 0.5rem 0;
-  color: var(--text-h);
-}
-
-.success-content p {
-  color: var(--text);
-  margin: 0;
-}
-
-/* 响应式 */
-@media (max-width: 768px) {
-  .auth-container {
-    grid-template-columns: 1fr;
-    max-width: 450px;
-  }
-  
-  .auth-branding {
-    padding: 2rem;
-  }
-  
-  .branding-content {
-    display: none;
-  }
-  
-  .auth-form-section {
-    padding: 2rem;
-  }
-}
-
-@media (max-width: 480px) {
-  .auth-page {
-    padding: 1rem;
-  }
-  
-  .auth-form-section {
-    padding: 1.5rem;
-  }
-  
-  .auth-card {
-    padding: 0;
-  }
-}
+.auth-page { min-height: calc(100vh - 70px); display: flex; align-items: center; justify-content: center; padding: 2rem; }
+.auth-card { width: 100%; max-width: 400px; }
+.tabs { display: flex; margin-bottom: 2rem; background: var(--code-bg); border-radius: 12px; padding: 0.25rem; }
+.tabs button { flex: 1; padding: 0.75rem; background: transparent; border: none; border-radius: 8px; font-size: 1rem; font-weight: 500; color: var(--text); cursor: pointer; transition: all 0.2s; }
+.tabs button.active { background: var(--bg); color: var(--text-h); box-shadow: 0 2px 8px var(--shadow); }
+.form-group { margin-bottom: 1.25rem; }
+.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--text-h); }
+.form-group input { width: 100%; padding: 0.875rem 1rem; border: 1px solid var(--border); border-radius: 10px; font-size: 1rem; background: var(--bg); color: var(--text); box-sizing: border-box; }
+.form-group input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
+.error-msg { padding: 0.75rem 1rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; color: #dc2626; font-size: 0.9rem; margin-bottom: 1rem; }
+.btn-submit { width: 100%; padding: 1rem; background: var(--accent); color: white; border: none; border-radius: 10px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
+.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 bf526c4..ceda75e 100644
--- a/dashboard/src/views/ConversationsView.vue
+++ b/dashboard/src/views/ConversationsView.vue
@@ -1,201 +1,38 @@
 <template>
   <div class="conversations">
     <div class="header">
-      <div>
-        <h1>会话管理</h1>
-        <p class="subtitle">查看和管理所有会话记录</p>
-      </div>
-      <button @click="createNewConversation" class="btn-primary">
-        <span class="icon">+</span> 新建会话
-      </button>
+      <h1>会话管理</h1>
+      <button @click="showModal = true" class="btn-primary">+ 新建会话</button>
     </div>
 
-    <!-- 筛选和搜索 -->
-    <div class="filters">
-      <input 
-        v-model="searchQuery" 
-        type="text" 
-        placeholder="搜索会话..." 
-        class="search-input"
-        @input="debouncedSearch"
-      />
-      <select v-model="selectedModel" class="model-select" @change="fetchConversations">
-        <option value="">全部模型</option>
-        <option value="glm-5">GLM-5</option>
-        <option value="glm-4">GLM-4</option>
-      </select>
-    </div>
-
-    <!-- 加载状态 -->
-    <div v-if="loading" class="loading-container">
-      <div class="spinner"></div>
-      <p>正在加载会话列表...</p>
-    </div>
-
-    <!-- 错误状态 -->
-    <div v-else-if="error" class="error-container">
-      <div class="error-icon">⚠️</div>
-      <p>{{ error }}</p>
-      <button @click="fetchConversations" class="btn-secondary">重试</button>
-    </div>
-
-    <!-- 空状态 -->
-    <div v-else-if="conversations.length === 0" class="empty-container">
-      <div class="empty-icon">💬</div>
-      <h3>暂无会话</h3>
-      <p>创建您的第一个会话开始对话</p>
-      <button @click="createNewConversation" class="btn-primary">新建会话</button>
-    </div>
-
-    <!-- 会话列表 -->
-    <div v-else class="conversation-list">
-      <div 
-        v-for="conv in conversations" 
-        :key="conv.id" 
-        class="conversation-card"
-        @click="openDetail(conv.id)"
-      >
-        <div class="conversation-info">
-          <h3 class="conversation-title">{{ conv.title || '未命名会话' }}</h3>
-          <div class="conversation-meta">
-            <span class="meta-item">
-              <span class="meta-icon">📅</span>
-              {{ formatDate(conv.created_at) }}
-            </span>
-            <span class="meta-item">
-              <span class="meta-icon">🤖</span>
-              {{ conv.model || '默认模型' }}
-            </span>
-            <span v-if="conv.message_count" class="meta-item">
-              <span class="meta-icon">💬</span>
-              {{ conv.message_count }} 条消息
-            </span>
-          </div>
-        </div>
-        <div class="conversation-actions" @click.stop>
-          <button @click="editConversation(conv)" class="btn-icon" title="编辑">
-            ✏️
-          </button>
-          <button @click="confirmDelete(conv)" class="btn-icon btn-danger" title="删除">
-            🗑️
-          </button>
+    <div v-if="loading" class="loading"><div class="spinner"></div>加载中...</div>
+    <div v-else-if="error" class="error-msg">{{ error }} <button @click="fetchData">重试</button></div>
+    <div v-else-if="!list.length" class="empty">暂无会话</div>
+    
+    <div v-else class="list">
+      <div v-for="c in list" :key="c.id" class="card" @click="$router.push(`/conversations/${c.id}`)">
+        <div class="card-info">
+          <h3>{{ c.title || '未命名会话' }}</h3>
+          <p>{{ formatDate(c.created_at) }} • {{ c.model || '默认模型' }}</p>
         </div>
+        <button @click.stop="deleteConv(c)" class="btn-delete">🗑️</button>
       </div>
     </div>
 
-    <!-- 分页 -->
-    <div v-if="totalPages > 1 && !loading" class="pagination">
-      <button 
-        @click="prevPage" 
-        :disabled="page === 1"
-        class="btn-pagination"
-      >
-        ← 上一页
-      </button>
-      <div class="pagination-info">
-        <span>第 {{ page }} / {{ totalPages }} 页</span>
-        <span class="divider">|</span>
-        <span>共 {{ total }} 条</span>
-      </div>
-      <button 
-        @click="nextPage" 
-        :disabled="page >= totalPages"
-        class="btn-pagination"
-      >
-        下一页 →
-      </button>
+    <div v-if="totalPages > 1" class="pagination">
+      <button @click="page--; fetchData()" :disabled="page === 1">← 上一页</button>
+      <span>{{ page }} / {{ totalPages }}</span>
+      <button @click="page++; fetchData()" :disabled="page >= totalPages">下一页 →</button>
     </div>
 
-    <!-- 创建/编辑会话模态框 -->
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay" @click.self="showModal = false">
       <div class="modal">
-        <div class="modal-header">
-          <h2>{{ editingConversation ? '编辑会话' : '新建会话' }}</h2>
-          <button @click="closeModal" class="btn-close">×</button>
-        </div>
-        <div class="modal-body">
-          <div class="form-group">
-            <label>会话标题</label>
-            <input 
-              v-model="formData.title" 
-              type="text" 
-              placeholder="输入会话标题"
-              class="form-input"
-            />
-          </div>
-          <div class="form-group">
-            <label>模型选择</label>
-            <select v-model="formData.model" class="form-select">
-              <option value="glm-5">GLM-5</option>
-              <option value="glm-4">GLM-4</option>
-            </select>
-          </div>
-          <div class="form-group">
-            <label>系统提示词 (可选)</label>
-            <textarea 
-              v-model="formData.system_prompt" 
-              placeholder="设置系统提示词"
-              class="form-textarea"
-              rows="3"
-            ></textarea>
-          </div>
-          <div class="form-row">
-            <div class="form-group">
-              <label>温度参数</label>
-              <input 
-                v-model.number="formData.temperature" 
-                type="number" 
-                min="0" 
-                max="2" 
-                step="0.1"
-                class="form-input"
-              />
-            </div>
-            <div class="form-group">
-              <label>最大令牌数</label>
-              <input 
-                v-model.number="formData.max_tokens" 
-                type="number" 
-                min="1" 
-                max="65536"
-                class="form-input"
-              />
-            </div>
-          </div>
-          <div class="form-group">
-            <label class="checkbox-label">
-              <input 
-                v-model="formData.thinking_enabled" 
-                type="checkbox"
-              />
-              启用思考模式
-            </label>
-          </div>
-        </div>
-        <div class="modal-footer">
-          <button @click="closeModal" class="btn-secondary">取消</button>
-          <button @click="submitForm" class="btn-primary">
-            {{ editingConversation ? '保存' : '创建' }}
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- 删除确认模态框 -->
-    <div v-if="showDeleteModal" class="modal-overlay" @click.self="closeDeleteModal">
-      <div class="modal modal-small">
-        <div class="modal-header">
-          <h2>确认删除</h2>
-        </div>
-        <div class="modal-body">
-          <p>确定要删除会话「{{ deletingConversation?.title || '未命名会话' }}」吗？</p>
-          <p class="warning-text">此操作不可撤销</p>
-        </div>
-        <div class="modal-footer">
-          <button @click="closeDeleteModal" class="btn-secondary">取消</button>
-          <button @click="deleteConversation" class="btn-danger" :disabled="deleting">
-            {{ deleting ? '删除中...' : '确认删除' }}
-          </button>
+        <h2>新建会话</h2>
+        <div class="form-group"><label>标题</label><input v-model="form.title" placeholder="会话标题" /></div>
+        <div class="form-group"><label>模型</label><select v-model="form.model"><option value="glm-5">GLM-5</option><option value="glm-4">GLM-4</option></select></div>
+        <div class="modal-actions">
+          <button @click="showModal = false" class="btn-secondary">取消</button>
+          <button @click="createConv" :disabled="creating" class="btn-primary">{{ creating ? '创建中...' : '创建' }}</button>
         </div>
       </div>
     </div>
@@ -204,697 +41,92 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 import { conversationsAPI } from '../services/api.js'
 
-const loading = ref(true)
-const error = ref(null)
-const conversations = ref([])
+const router = useRouter()
+const list = ref([])
 const page = ref(1)
-const pageSize = ref(20)
+const pageSize = 20
 const total = ref(0)
-const searchQuery = ref('')
-const selectedModel = ref('')
-
-// 模态框状态
+const loading = ref(true)
+const error = ref('')
 const showModal = ref(false)
-const editingConversation = ref(null)
-const formData = ref({
-  title: '',
-  model: 'glm-5',
-  system_prompt: '',
-  temperature: 1.0,
-  max_tokens: 65536,
-  thinking_enabled: false
-})
+const creating = ref(false)
+const form = ref({ title: '', model: 'glm-5' })
 
-// 删除模态框状态
-const showDeleteModal = ref(false)
-const deletingConversation = ref(null)
-const deleting = ref(false)
+const totalPages = computed(() => Math.ceil(total.value / pageSize))
 
-const totalPages = computed(() => Math.ceil(total.value / pageSize.value))
-
-// 获取会话列表
-const fetchConversations = async () => {
+const fetchData = async () => {
   loading.value = true
-  error.value = null
-  
+  error.value = ''
   try {
-    const params = {
-      page: page.value,
-      page_size: pageSize.value
-    }
-    
-    if (searchQuery.value) {
-      params.search = searchQuery.value
-    }
-    
-    if (selectedModel.value) {
-      params.model = selectedModel.value
-    }
-    
-    const response = await conversationsAPI.list(params)
-    
-    if (response.success) {
-      conversations.value = response.data.items || []
-      total.value = response.data.total || 0
-    } else {
-      throw new Error(response.message || '获取会话列表失败')
-    }
-  } catch (err) {
-    console.error('获取会话列表失败:', err)
-    error.value = err.message || '网络错误，请稍后重试'
+    const res = await conversationsAPI.list({ page: page.value, page_size: pageSize })
+    if (res.success) {
+      list.value = res.data.items || []
+      total.value = res.data.total || 0
+    } else throw new Error(res.message)
+  } catch (e) {
+    error.value = e.message || '加载失败'
   } finally {
     loading.value = false
   }
 }
 
-// 防抖搜索
-let searchTimeout = null
-const debouncedSearch = () => {
-  if (searchTimeout) clearTimeout(searchTimeout)
-  searchTimeout = setTimeout(() => {
-    page.value = 1
-    fetchConversations()
-  }, 300)
-}
-
-// 分页
-const prevPage = () => {
-  if (page.value > 1) {
-    page.value--
-    fetchConversations()
-  }
-}
-
-const nextPage = () => {
-  if (page.value < totalPages.value) {
-    page.value++
-    fetchConversations()
-  }
-}
-
-// 新建会话
-const createNewConversation = () => {
-  editingConversation.value = null
-  formData.value = {
-    title: '',
-    model: 'glm-5',
-    system_prompt: '',
-    temperature: 1.0,
-    max_tokens: 65536,
-    thinking_enabled: false
-  }
-  showModal.value = true
-}
-
-// 编辑会话
-const editConversation = (conv) => {
-  editingConversation.value = conv
-  formData.value = {
-    title: conv.title || '',
-    model: conv.model || 'glm-5',
-    system_prompt: conv.system_prompt || '',
-    temperature: conv.temperature || 1.0,
-    max_tokens: conv.max_tokens || 65536,
-    thinking_enabled: conv.thinking_enabled || false
-  }
-  showModal.value = true
-}
-
-// 关闭模态框
-const closeModal = () => {
-  showModal.value = false
-  editingConversation.value = null
-}
-
-// 提交表单
-const submitForm = async () => {
+const createConv = async () => {
+  creating.value = true
   try {
-    if (editingConversation.value) {
-      // 更新会话
-      const response = await conversationsAPI.update(
-        editingConversation.value.id, 
-        formData.value
-      )
-      if (response.success) {
-        closeModal()
-        fetchConversations()
-      } else {
-        throw new Error(response.message || '更新失败')
-      }
-    } else {
-      // 创建会话
-      const response = await conversationsAPI.create(formData.value)
-      if (response.success) {
-        closeModal()
-        // 如果创建成功，可以跳转到新会话或刷新列表
-        fetchConversations()
-        // 或者跳转到新创建的会话详情
-        if (response.data?.id) {
-          openDetail(response.data.id)
-        }
-      } else {
-        throw new Error(response.message || '创建失败')
-      }
+    const res = await conversationsAPI.create(form.value)
+    if (res.success && res.data?.id) {
+      showModal.value = false
+      form.value = { title: '', model: 'glm-5' }
+      router.push(`/conversations/${res.data.id}`)
     }
-  } catch (err) {
-    console.error('提交失败:', err)
-    alert(err.message || '操作失败，请重试')
-  }
+  } catch (e) { alert(e.message) }
+  finally { creating.value = false }
 }
 
-// 打开详情
-const openDetail = (id) => {
-  // 可以导航到详情页或打开详情模态框
-  console.log('打开会话:', id)
-  // 这里可以导航到会话详情页
-  // router.push(`/conversations/${id}`)
+const deleteConv = async (c) => {
+  if (!confirm(`删除「${c.title || '未命名会话'}」？`)) return
+  await conversationsAPI.delete(c.id)
+  fetchData()
 }
 
-// 确认删除
-const confirmDelete = (conv) => {
-  deletingConversation.value = conv
-  showDeleteModal.value = true
+const formatDate = (d) => {
+  if (!d) return ''
+  const diff = Date.now() - new Date(d)
+  if (diff < 3600000) return `${Math.floor(diff / 60000)} 分钟前`
+  if (diff < 86400000) return `${Math.floor(diff / 3600000)} 小时前`
+  return new Date(d).toLocaleDateString('zh-CN')
 }
 
-const closeDeleteModal = () => {
-  showDeleteModal.value = false
-  deletingConversation.value = null
-}
-
-// 执行删除
-const deleteConversation = async () => {
-  if (!deletingConversation.value) return
-  
-  deleting.value = true
-  
-  try {
-    const response = await conversationsAPI.delete(deletingConversation.value.id)
-    if (response.success) {
-      closeDeleteModal()
-      fetchConversations()
-    } else {
-      throw new Error(response.message || '删除失败')
-    }
-  } catch (err) {
-    console.error('删除失败:', err)
-    alert(err.message || '删除失败，请重试')
-  } finally {
-    deleting.value = false
-  }
-}
-
-// 格式化日期
-const formatDate = (dateStr) => {
-  if (!dateStr) return '未知时间'
-  const date = new Date(dateStr)
-  const now = new Date()
-  const diff = now - date
-  
-  // 一天内显示相对时间
-  if (diff < 86400000) {
-    if (diff < 3600000) {
-      const minutes = Math.floor(diff / 60000)
-      return `${minutes} 分钟前`
-    }
-    const hours = Math.floor(diff / 3600000)
-    return `${hours} 小时前`
-  }
-  
-  // 超过一天显示具体日期
-  const year = date.getFullYear()
-  const month = String(date.getMonth() + 1).padStart(2, '0')
-  const day = String(date.getDate()).padStart(2, '0')
-  const hours = String(date.getHours()).padStart(2, '0')
-  const minutes = String(date.getMinutes()).padStart(2, '0')
-  
-  if (year === now.getFullYear()) {
-    return `${month}-${day} ${hours}:${minutes}`
-  }
-  return `${year}-${month}-${day}`
-}
-
-onMounted(() => {
-  fetchConversations()
-})
+onMounted(fetchData)
 </script>
 
 <style scoped>
-.conversations {
-  padding: 0;
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 2rem;
-  padding-bottom: 1.5rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.header h1 {
-  font-size: 2rem;
-  margin: 0 0 0.5rem 0;
-  color: var(--text-h);
-}
-
-.subtitle {
-  color: var(--text);
-  font-size: 1rem;
-  margin: 0;
-}
-
-.filters {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
-}
-
-.search-input {
-  flex: 1;
-  max-width: 400px;
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  font-size: 1rem;
-  background: var(--bg);
-  color: var(--text);
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-
-.search-input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-bg);
-}
-
-.model-select {
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  font-size: 1rem;
-  background: var(--bg);
-  color: var(--text);
-  cursor: pointer;
-}
-
-/* 加载状态 */
-.loading-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 4rem 2rem;
-  color: var(--text);
-}
-
-.spinner {
-  width: 48px;
-  height: 48px;
-  border: 4px solid var(--border);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 1rem;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-/* 错误状态 */
-.error-container {
-  text-align: center;
-  padding: 4rem 2rem;
-  background: #fef2f2;
-  border-radius: 12px;
-  border: 1px solid #fecaca;
-}
-
-.error-icon {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-}
-
-/* 空状态 */
-.empty-container {
-  text-align: center;
-  padding: 4rem 2rem;
-  background: var(--accent-bg);
-  border-radius: 12px;
-}
-
-.empty-icon {
-  font-size: 4rem;
-  margin-bottom: 1rem;
-}
-
-.empty-container h3 {
-  font-size: 1.5rem;
-  margin: 0 0 0.5rem 0;
-  color: var(--text-h);
-}
-
-.empty-container p {
-  color: var(--text);
-  margin-bottom: 1.5rem;
-}
-
-/* 会话列表 */
-.conversation-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.conversation-card {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1.25rem 1.5rem;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.conversation-card:hover {
-  border-color: var(--accent);
-  box-shadow: 0 4px 12px var(--shadow);
-  transform: translateY(-2px);
-}
-
-.conversation-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.conversation-title {
-  font-size: 1.1rem;
-  font-weight: 600;
-  margin: 0 0 0.5rem 0;
-  color: var(--text-h);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.conversation-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  font-size: 0.875rem;
-  color: var(--text);
-}
-
-.meta-item {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.conversation-actions {
-  display: flex;
-  gap: 0.5rem;
-  margin-left: 1rem;
-}
-
-/* 按钮样式 */
-.btn-primary {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.5rem;
-  background: var(--accent);
-  color: white;
-  border: none;
-  border-radius: 8px;
-  font-size: 1rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.btn-primary:hover {
-  background: var(--accent-border);
-  transform: translateY(-1px);
-}
-
-.btn-secondary {
-  padding: 0.75rem 1.5rem;
-  background: var(--bg);
-  color: var(--text);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.btn-secondary:hover {
-  background: var(--code-bg);
-}
-
-.btn-icon {
-  padding: 0.5rem;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 1.2rem;
-  transition: all 0.2s;
-}
-
-.btn-icon:hover {
-  background: var(--code-bg);
-}
-
-.btn-danger {
-  background: #fee2e2;
-  color: #dc2626;
-}
-
-.btn-danger:hover {
-  background: #fecaca;
-}
-
-/* 分页 */
-.pagination {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 1.5rem;
-  margin-top: 2rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--border);
-}
-
-.btn-pagination {
-  padding: 0.5rem 1rem;
-  background: var(--bg);
-  color: var(--text);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.btn-pagination:hover:not(:disabled) {
-  background: var(--accent-bg);
-  border-color: var(--accent);
-  color: var(--accent);
-}
-
-.btn-pagination:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.pagination-info {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  color: var(--text);
-}
-
-.divider {
-  color: var(--border);
-}
-
-/* 模态框 */
-.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;
-  padding: 1rem;
-}
-
-.modal {
-  background: var(--bg);
-  border-radius: 16px;
-  width: 100%;
-  max-width: 500px;
-  max-height: 90vh;
-  overflow-y: auto;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-}
-
-.modal-small {
-  max-width: 400px;
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1.5rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.modal-header h2 {
-  font-size: 1.25rem;
-  margin: 0;
-  color: var(--text-h);
-}
-
-.btn-close {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  color: var(--text);
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-}
-
-.btn-close:hover {
-  color: var(--text-h);
-}
-
-.modal-body {
-  padding: 1.5rem;
-}
-
-.modal-body p {
-  margin: 0 0 1rem 0;
-  color: var(--text);
-}
-
-.warning-text {
-  color: #dc2626 !important;
-  font-size: 0.875rem;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 1rem;
-  padding: 1.5rem;
-  border-top: 1px solid var(--border);
-}
-
-/* 表单 */
-.form-group {
-  margin-bottom: 1.25rem;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  color: var(--text-h);
-}
-
-.form-input,
-.form-select,
-.form-textarea {
-  width: 100%;
-  padding: 0.75rem;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  font-size: 1rem;
-  background: var(--bg);
-  color: var(--text);
-  box-sizing: border-box;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-
-.form-input:focus,
-.form-select:focus,
-.form-textarea:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-bg);
-}
-
-.form-textarea {
-  resize: vertical;
-  min-height: 80px;
-}
-
-.form-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-}
-
-.checkbox-label {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.checkbox-label input[type="checkbox"] {
-  width: 18px;
-  height: 18px;
-  cursor: pointer;
-}
-
-/* 响应式 */
-@media (max-width: 768px) {
-  .header {
-    flex-direction: column;
-    gap: 1rem;
-  }
-  
-  .filters {
-    flex-direction: column;
-  }
-  
-  .search-input {
-    max-width: 100%;
-  }
-  
-  .conversation-card {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1rem;
-  }
-  
-  .conversation-actions {
-    margin-left: 0;
-    width: 100%;
-    justify-content: flex-end;
-  }
-  
-  .form-row {
-    grid-template-columns: 1fr;
-  }
-  
-  .pagination {
-    flex-direction: column;
-    gap: 1rem;
-  }
-}
+.conversations { padding: 0; }
+.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
+.header h1 { font-size: 2rem; margin: 0; color: var(--text-h); }
+.btn-primary { padding: 0.75rem 1.5rem; background: var(--accent); color: white; border: none; border-radius: 8px; cursor: pointer; }
+.btn-secondary { padding: 0.75rem 1.5rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
+.loading, .empty, .error-msg { text-align: center; padding: 4rem; color: var(--text); }
+.error-msg { background: #fef2f2; border-radius: 12px; }
+.list { display: flex; flex-direction: column; gap: 1rem; }
+.card { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: all 0.2s; }
+.card:hover { border-color: var(--accent); transform: translateY(-2px); }
+.card h3 { margin: 0 0 0.5rem; color: var(--text-h); }
+.card p { margin: 0; color: var(--text); font-size: 0.875rem; }
+.btn-delete { background: transparent; border: none; font-size: 1.2rem; cursor: pointer; padding: 0.5rem; }
+.pagination { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
+.pagination button { padding: 0.5rem 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
+.pagination button:disabled { opacity: 0.5; cursor: not-allowed; }
+.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); border-radius: 16px; padding: 2rem; width: 100%; max-width: 500px; }
+.modal h2 { margin: 0 0 1.5rem; color: var(--text-h); }
+.form-group { margin-bottom: 1.25rem; }
+.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; }
+.form-group input, .form-group select { width: 100%; padding: 0.75rem; border: 1px solid var(--border); border-radius: 8px; font-size: 1rem; background: var(--bg); box-sizing: border-box; }
+.modal-actions { display: flex; justify-content: flex-end; gap: 1rem; }
+.spinner { width: 48px; height: 48px; border: 4px solid var(--border); border-top-color: var(--accent); 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/HomeView.vue b/dashboard/src/views/HomeView.vue
index 69ae550..4bad69f 100644
--- a/dashboard/src/views/HomeView.vue
+++ b/dashboard/src/views/HomeView.vue
@@ -1,830 +1,85 @@
 <template>
   <div class="home">
-    <!-- Hero 区域 -->
     <div class="hero">
-      <div class="hero-content">
-        <h1>欢迎使用 Luxx</h1>
-        <p class="subtitle">智能会话管理与工具平台</p>
-        <div class="hero-actions">
-          <router-link to="/conversations" class="btn-hero-primary">
-            <span>💬</span> 开始会话
-          </router-link>
-          <router-link to="/tools" class="btn-hero-secondary">
-            <span>🛠️</span> 查看工具
-          </router-link>
-        </div>
+      <h1>欢迎使用 Luxx</h1>
+      <p class="subtitle">智能会话管理与工具平台</p>
+      <div class="hero-actions">
+        <router-link to="/conversations" class="btn-primary">💬 开始会话</router-link>
+        <router-link to="/tools" class="btn-secondary">🛠️ 查看工具</router-link>
       </div>
     </div>
 
-    <!-- 功能特性 -->
+    <div class="stats-grid">
+      <div class="stat-card">💬<div><div class="stat-value">{{ stats.conversations }}</div><div class="stat-label">会话总数</div></div></div>
+      <div class="stat-card">🛠️<div><div class="stat-value">{{ stats.tools }}</div><div class="stat-label">可用工具</div></div></div>
+      <div class="stat-card">📝<div><div class="stat-value">{{ stats.messages }}</div><div class="stat-label">消息总数</div></div></div>
+      <div class="stat-card">🤖<div><div class="stat-value">{{ stats.models }}</div><div class="stat-label">支持模型</div></div></div>
+    </div>
+
     <div class="features">
-      <h2 class="section-title">核心功能</h2>
+      <h2>核心功能</h2>
       <div class="features-grid">
-        <div class="feature-card">
-          <div class="feature-icon">💬</div>
-          <h3>智能会话</h3>
-          <p>支持多模型对话，灵活配置参数，实时流式响应</p>
-          <router-link to="/conversations" class="feature-link">管理会话 →</router-link>
-        </div>
-        <div class="feature-card">
-          <div class="feature-icon">🛠️</div>
-          <h3>工具生态</h3>
-          <p>内置多种工具，支持代码执行、网页爬虫、数据分析</p>
-          <router-link to="/tools" class="feature-link">探索工具 →</router-link>
-        </div>
-        <div class="feature-card">
-          <div class="feature-icon">🔐</div>
-          <h3>安全认证</h3>
-          <p>完整的用户认证系统，支持JWT Token授权</p>
-          <router-link to="/auth" class="feature-link">安全登录 →</router-link>
-        </div>
-        <div class="feature-card">
-          <div class="feature-icon">📊</div>
-          <h3>数据分析</h3>
-          <p>强大的数据处理能力，实时监控系统状态</p>
-          <router-link to="/about" class="feature-link">了解更多 →</router-link>
+        <div class="feature-card" v-for="f in features" :key="f.title">
+          <div class="feature-icon">{{ f.icon }}</div>
+          <h3>{{ f.title }}</h3>
+          <p>{{ f.desc }}</p>
         </div>
       </div>
     </div>
 
-    <!-- 统计数据 -->
-    <div class="stats-section">
-      <h2 class="section-title">系统概览</h2>
-      <div v-if="!isLoggedIn" class="login-prompt">
-        <p>🔐 登录后查看更多统计信息</p>
-        <router-link to="/auth" class="btn-login-prompt">立即登录</router-link>
-      </div>
-      <div v-else-if="loadingStats" class="loading-inline">
-        <div class="spinner-small"></div>
-        <span>加载中...</span>
-      </div>
-      <div v-else-if="statsError" class="stats-error">
-        <p>⚠️ 无法加载统计数据</p>
-        <button @click="fetchStats" class="btn-text">重试</button>
-      </div>
-      <div v-else class="stats-grid">
-        <div class="stat-card">
-          <div class="stat-icon">💬</div>
-          <div class="stat-content">
-            <div class="stat-value">{{ stats.conversations || 0 }}</div>
-            <div class="stat-label">会话总数</div>
-          </div>
-        </div>
-        <div class="stat-card">
-          <div class="stat-icon">🛠️</div>
-          <div class="stat-content">
-            <div class="stat-value">{{ stats.tools || 0 }}</div>
-            <div class="stat-label">可用工具</div>
-          </div>
-        </div>
-        <div class="stat-card">
-          <div class="stat-icon">📝</div>
-          <div class="stat-content">
-            <div class="stat-value">{{ stats.messages || 0 }}</div>
-            <div class="stat-label">消息总数</div>
-          </div>
-        </div>
-        <div class="stat-card">
-          <div class="stat-icon">🤖</div>
-          <div class="stat-content">
-            <div class="stat-value">{{ stats.models || 1 }}</div>
-            <div class="stat-label">支持模型</div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 快捷操作 -->
-    <div class="quick-actions">
-      <h2 class="section-title">快捷操作</h2>
-      <div class="actions-grid">
-        <button @click="createConversation" class="action-card">
-          <div class="action-icon">➕</div>
-          <div class="action-content">
-            <h4>新建会话</h4>
-            <p>开始新的智能对话</p>
-          </div>
-        </button>
-        <button @click="navigateToTools" class="action-card">
-          <div class="action-icon">🔍</div>
-          <div class="action-content">
-            <h4>浏览工具</h4>
-            <p>查看所有可用工具</p>
-          </div>
-        </button>
-        <button @click="navigateToConversations" class="action-card">
-          <div class="action-icon">📋</div>
-          <div class="action-content">
-            <h4>会话历史</h4>
-            <p>查看历史会话记录</p>
-          </div>
-        </button>
-        <button @click="checkStatus" class="action-card">
-          <div class="action-icon">📊</div>
-          <div class="action-content">
-            <h4>系统状态</h4>
-            <p>监控服务健康状态</p>
-          </div>
-        </button>
-      </div>
-    </div>
-
-    <!-- 最近活动 -->
-    <div class="recent-activity">
-      <h2 class="section-title">最近会话</h2>
-      <div v-if="!isLoggedIn" class="login-prompt">
-        <p>🔐 登录后查看最近会话</p>
-        <router-link to="/auth" class="btn-login-prompt">立即登录</router-link>
-      </div>
-      <div v-else-if="loadingRecent" class="loading-inline">
-        <div class="spinner-small"></div>
-        <span>加载中...</span>
-      </div>
-      <div v-else-if="recentConversations.length === 0" class="empty-recent">
-        <p>暂无最近会话</p>
-        <button @click="createConversation" class="btn-hero-primary">创建第一个会话</button>
-      </div>
-      <div v-else class="recent-list">
-        <div 
-          v-for="conv in recentConversations" 
-          :key="conv.id" 
-          class="recent-item"
-          @click="openConversation(conv.id)"
-        >
-          <div class="recent-icon">💬</div>
-          <div class="recent-info">
-            <h4>{{ conv.title || '未命名会话' }}</h4>
-            <p>{{ formatDate(conv.created_at) }}</p>
-          </div>
-          <div class="recent-arrow">→</div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 页脚提示 -->
-    <div class="footer-note">
-      <div class="footer-content">
-        <p>🚀 正在运行 <strong>Luxx</strong> 智能会话系统</p>
-        <p class="footer-links">
-          <router-link to="/about">关于</router-link>
-          <span class="divider">•</span>
-          <a href="/api/docs" target="_blank">API 文档</a>
-          <span class="divider">•</span>
-          <router-link to="/auth">{{ isLoggedIn ? '个人中心' : '登录' }}</router-link>
-        </p>
-      </div>
-    </div>
+    <div class="footer-note">🚀 正在运行 <strong>Luxx</strong> 智能会话系统</div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, onMounted } from 'vue'
 import { conversationsAPI, toolsAPI } from '../services/api.js'
 
-const router = useRouter()
+const stats = ref({ conversations: 0, tools: 0, messages: 0, models: 1 })
+const features = [
+  { icon: '💬', title: '智能会话', desc: '支持多模型对话，灵活配置参数' },
+  { icon: '🛠️', title: '工具生态', desc: '内置多种工具，扩展系统能力' },
+  { icon: '🔐', title: '安全认证', desc: 'JWT Token 授权，安全可靠' },
+  { icon: '📊', title: '数据分析', desc: '强大的数据处理能力' }
+]
 
-const loadingStats = ref(false)
-const loadingRecent = ref(false)
-const statsError = ref(false)
-const stats = ref({
-  conversations: 0,
-  tools: 0,
-  messages: 0,
-  models: 1
-})
-const recentConversations = ref([])
-
-const isLoggedIn = computed(() => {
-  return !!localStorage.getItem('access_token')
-})
-
-// 获取统计数据
-const fetchStats = async () => {
-  if (!isLoggedIn.value) return
-  
-  loadingStats.value = true
-  statsError.value = false
-  
+onMounted(async () => {
   try {
-    // 并行获取多个统计数据
-    const [convsRes, toolsRes] = await Promise.allSettled([
+    const [convs, tools] = await Promise.allSettled([
       conversationsAPI.list({ page: 1, page_size: 1 }),
       toolsAPI.list()
     ])
-    
-    // 处理会话统计
-    if (convsRes.status === 'fulfilled' && convsRes.value.success) {
-      stats.value.conversations = convsRes.value.data?.total || 0
+    if (convs.status === 'fulfilled' && convs.value.success) stats.value.conversations = convs.value.data?.total || 0
+    if (tools.status === 'fulfilled' && tools.value.success) {
+      const t = tools.value.data?.tools || tools.value.data || []
+      stats.value.tools = Array.isArray(t) ? t.length : 0
     }
-    
-    // 处理工具统计
-    if (toolsRes.status === 'fulfilled' && toolsRes.value.success) {
-      const toolsData = toolsRes.value.data?.tools || toolsRes.value.data || []
-      stats.value.tools = Array.isArray(toolsData) ? toolsData.length : 0
-    }
-    
-    // 估算消息总数（根据会话数和平均消息数）
-    if (stats.value.conversations > 0) {
-      stats.value.messages = stats.value.conversations * 5 // 假设平均每个会话5条消息
-    }
-    
-  } catch (err) {
-    console.error('获取统计数据失败:', err)
-    statsError.value = true
-  } finally {
-    loadingStats.value = false
-  }
-}
-
-// 获取最近会话
-const fetchRecentConversations = async () => {
-  if (!isLoggedIn.value) return
-  
-  loadingRecent.value = true
-  
-  try {
-    const response = await conversationsAPI.list({ page: 1, page_size: 5 })
-    
-    if (response.success) {
-      recentConversations.value = response.data?.items || []
-    }
-  } catch (err) {
-    console.error('获取最近会话失败:', err)
-  } finally {
-    loadingRecent.value = false
-  }
-}
-
-// 创建新会话
-const createConversation = async () => {
-  if (!isLoggedIn.value) {
-    router.push('/auth')
-    return
-  }
-  
-  try {
-    const response = await conversationsAPI.create({
-      title: '',
-      model: 'glm-5'
-    })
-    
-    if (response.success && response.data?.id) {
-      router.push(`/conversations/${response.data.id}`)
-    } else {
-      router.push('/conversations')
-    }
-  } catch (err) {
-    console.error('创建会话失败:', err)
-    router.push('/conversations')
-  }
-}
-
-// 导航到工具页面
-const navigateToTools = () => {
-  router.push('/tools')
-}
-
-// 导航到会话列表
-const navigateToConversations = () => {
-  router.push('/conversations')
-}
-
-// 打开会话
-const openConversation = (id) => {
-  router.push(`/conversations/${id}`)
-}
-
-// 检查系统状态
-const checkStatus = () => {
-  fetchStats()
-}
-
-// 格式化日期
-const formatDate = (dateStr) => {
-  if (!dateStr) return '未知时间'
-  const date = new Date(dateStr)
-  const now = new Date()
-  const diff = now - date
-  
-  if (diff < 86400000) {
-    if (diff < 3600000) {
-      const minutes = Math.floor(diff / 60000)
-      return `${minutes} 分钟前`
-    }
-    const hours = Math.floor(diff / 3600000)
-    return `${hours} 小时前`
-  }
-  
-  const month = date.getMonth() + 1
-  const day = date.getDate()
-  const hours = String(date.getHours()).padStart(2, '0')
-  const minutes = String(date.getMinutes()).padStart(2, '0')
-  
-  if (date.getFullYear() === now.getFullYear()) {
-    return `${month}月${day}日 ${hours}:${minutes}`
-  }
-  return `${date.getFullYear()}-${month}-${day}`
-}
-
-onMounted(() => {
-  fetchStats()
-  fetchRecentConversations()
+    stats.value.messages = stats.value.conversations * 5
+  } catch (e) { console.error(e) }
 })
 </script>
 
 <style scoped>
-.home {
-  padding: 0;
-  width: 100%;
-}
-
-/* Hero 区域 */
-.hero {
-  background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
-  border-radius: 20px;
-  padding: 3rem 2rem;
-  margin-bottom: 3rem;
-  color: white;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-
-.hero::before {
-  content: '';
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
-  animation: pulse 8s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { transform: scale(1); opacity: 0.5; }
-  50% { transform: scale(1.1); opacity: 0.3; }
-}
-
-.hero-content {
-  position: relative;
-  z-index: 1;
-}
-
-.hero h1 {
-  font-size: 3rem;
-  margin: 0 0 1rem 0;
-  color: white;
-  letter-spacing: -1px;
-}
-
-.subtitle {
-  font-size: 1.3rem;
-  opacity: 0.9;
-  margin: 0 0 2rem 0;
-}
-
-.hero-actions {
-  display: flex;
-  justify-content: center;
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-
-.btn-hero-primary,
-.btn-hero-secondary {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 1rem 2rem;
-  border-radius: 12px;
-  font-size: 1.1rem;
-  font-weight: 500;
-  text-decoration: none;
-  transition: all 0.3s;
-}
-
-.btn-hero-primary {
-  background: white;
-  color: var(--accent);
-}
-
-.btn-hero-primary:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-}
-
-.btn-hero-secondary {
-  background: rgba(255, 255, 255, 0.2);
-  color: white;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-}
-
-.btn-hero-secondary:hover {
-  background: rgba(255, 255, 255, 0.3);
-  transform: translateY(-3px);
-}
-
-/* 区域标题 */
-.section-title {
-  font-size: 1.8rem;
-  margin: 0 0 1.5rem 0;
-  color: var(--text-h);
-}
-
-/* 功能特性 */
-.features {
-  margin-bottom: 3rem;
-}
-
-.features-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1.5rem;
-}
-
-.feature-card {
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 16px;
-  padding: 2rem;
-  transition: all 0.3s;
-}
-
-.feature-card:hover {
-  border-color: var(--accent);
-  transform: translateY(-5px);
-  box-shadow: 0 10px 30px var(--shadow);
-}
-
-.feature-icon {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-}
-
-.feature-card h3 {
-  font-size: 1.3rem;
-  margin: 0 0 0.75rem 0;
-  color: var(--text-h);
-}
-
-.feature-card p {
-  color: var(--text);
-  line-height: 1.6;
-  margin: 0 0 1rem 0;
-}
-
-.feature-link {
-  color: var(--accent);
-  text-decoration: none;
-  font-weight: 500;
-  transition: color 0.2s;
-}
-
-.feature-link:hover {
-  color: var(--accent-border);
-}
-
-/* 统计数据 */
-.stats-section {
-  margin-bottom: 3rem;
-}
-
-.login-prompt {
-  text-align: center;
-  padding: 2rem;
-  background: var(--code-bg);
-  border-radius: 12px;
-  color: var(--text);
-}
-
-.login-prompt p {
-  margin: 0 0 1rem 0;
-}
-
-.btn-login-prompt {
-  display: inline-block;
-  padding: 0.75rem 1.5rem;
-  background: var(--accent);
-  color: white;
-  text-decoration: none;
-  border-radius: 8px;
-  font-weight: 500;
-  transition: all 0.2s;
-}
-
-.btn-login-prompt:hover {
-  background: var(--accent-border);
-}
-
-.loading-inline {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.75rem;
-  padding: 2rem;
-  color: var(--text);
-}
-
-.spinner-small {
-  width: 24px;
-  height: 24px;
-  border: 3px solid var(--border);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1.5rem;
-}
-
-.stat-card {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1.5rem;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  transition: all 0.3s;
-}
-
-.stat-card:hover {
-  border-color: var(--accent);
-  transform: translateY(-3px);
-  box-shadow: 0 5px 20px var(--shadow);
-}
-
-.stat-icon {
-  font-size: 2rem;
-  width: 60px;
-  height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--accent-bg);
-  border-radius: 12px;
-}
-
-.stat-value {
-  font-size: 2.5rem;
-  font-weight: bold;
-  color: var(--text-h);
-  line-height: 1;
-}
-
-.stat-label {
-  color: var(--text);
-  font-size: 0.9rem;
-  margin-top: 0.25rem;
-}
-
-.stats-error {
-  text-align: center;
-  padding: 1.5rem;
-  color: #dc2626;
-  background: #fef2f2;
-  border-radius: 12px;
-}
-
-.btn-text {
-  background: none;
-  border: none;
-  color: var(--accent);
-  cursor: pointer;
-  text-decoration: underline;
-  margin-left: 0.5rem;
-}
-
-/* 快捷操作 */
-.quick-actions {
-  margin-bottom: 3rem;
-}
-
-.actions-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 1rem;
-}
-
-.action-card {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1.25rem;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  cursor: pointer;
-  text-align: left;
-  transition: all 0.3s;
-}
-
-.action-card:hover {
-  border-color: var(--accent);
-  background: var(--accent-bg);
-  transform: translateX(5px);
-}
-
-.action-icon {
-  font-size: 2rem;
-  width: 50px;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--code-bg);
-  border-radius: 10px;
-}
-
-.action-card:hover .action-icon {
-  background: var(--accent);
-}
-
-.action-card:hover .action-icon {
-  filter: brightness(0) invert(1);
-}
-
-.action-content h4 {
-  margin: 0 0 0.25rem 0;
-  font-size: 1rem;
-  color: var(--text-h);
-}
-
-.action-content p {
-  margin: 0;
-  font-size: 0.875rem;
-  color: var(--text);
-}
-
-/* 最近会话 */
-.recent-activity {
-  margin-bottom: 3rem;
-}
-
-.empty-recent {
-  text-align: center;
-  padding: 3rem;
-  background: var(--accent-bg);
-  border-radius: 12px;
-}
-
-.empty-recent p {
-  color: var(--text);
-  margin-bottom: 1rem;
-}
-
-.recent-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.recent-item {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem 1.25rem;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-
-.recent-item:hover {
-  border-color: var(--accent);
-  transform: translateX(5px);
-  box-shadow: 0 5px 15px var(--shadow);
-}
-
-.recent-icon {
-  font-size: 1.5rem;
-}
-
-.recent-info {
-  flex: 1;
-}
-
-.recent-info h4 {
-  margin: 0 0 0.25rem 0;
-  font-size: 1rem;
-  color: var(--text-h);
-}
-
-.recent-info p {
-  margin: 0;
-  font-size: 0.85rem;
-  color: var(--text);
-}
-
-.recent-arrow {
-  color: var(--text);
-  font-size: 1.2rem;
-  transition: transform 0.3s;
-}
-
-.recent-item:hover .recent-arrow {
-  transform: translateX(5px);
-  color: var(--accent);
-}
-
-/* 页脚 */
-.footer-note {
-  background: var(--code-bg);
-  border-radius: 16px;
-  padding: 2rem;
-  text-align: center;
-}
-
-.footer-content p {
-  margin: 0 0 0.75rem 0;
-  color: var(--text);
-}
-
-.footer-content strong {
-  color: var(--text-h);
-}
-
-.footer-links {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-.footer-links a {
-  color: var(--accent);
-  text-decoration: none;
-  transition: color 0.2s;
-}
-
-.footer-links a:hover {
-  color: var(--accent-border);
-  text-decoration: underline;
-}
-
-.footer-links .divider {
-  color: var(--border);
-}
-
-/* 响应式 */
-@media (max-width: 768px) {
-  .hero {
-    padding: 2rem 1.5rem;
-    margin-bottom: 2rem;
-  }
-  
-  .hero h1 {
-    font-size: 2rem;
-  }
-  
-  .subtitle {
-    font-size: 1.1rem;
-  }
-  
-  .hero-actions {
-    flex-direction: column;
-  }
-  
-  .btn-hero-primary,
-  .btn-hero-secondary {
-    width: 100%;
-    justify-content: center;
-  }
-  
-  .features-grid,
-  .stats-grid,
-  .actions-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .section-title {
-    font-size: 1.5rem;
-  }
-}
-
-@media (max-width: 480px) {
-  .home {
-    padding: 0 0.5rem;
-  }
-  
-  .hero {
-    border-radius: 12px;
-    padding: 1.5rem 1rem;
-  }
-  
-  .hero h1 {
-    font-size: 1.75rem;
-  }
-}
+.home { padding: 0; max-width: 1200px; margin: 0 auto; }
+.hero { background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%); border-radius: 20px; padding: 3rem 2rem; margin-bottom: 3rem; color: white; text-align: center; }
+.hero h1 { font-size: 3rem; margin: 0 0 1rem; color: white; }
+.subtitle { font-size: 1.3rem; opacity: 0.9; margin: 0 0 2rem; }
+.hero-actions { display: flex; justify-content: center; gap: 1rem; }
+.btn-primary { padding: 1rem 2rem; background: white; color: var(--accent); border-radius: 12px; text-decoration: none; font-weight: 500; }
+.btn-secondary { padding: 1rem 2rem; background: rgba(255,255,255,0.2); color: white; border: 2px solid rgba(255,255,255,0.3); border-radius: 12px; text-decoration: none; }
+.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; }
+.stat-card { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; font-size: 2rem; }
+.stat-value { font-size: 2.5rem; font-weight: bold; color: var(--text-h); }
+.stat-label { color: var(--text); font-size: 0.9rem; }
+.features { margin-bottom: 3rem; }
+.features h2 { font-size: 1.8rem; margin: 0 0 1.5rem; color: var(--text-h); }
+.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
+.feature-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; transition: all 0.3s; }
+.feature-card:hover { border-color: var(--accent); transform: translateY(-5px); }
+.feature-icon { font-size: 3rem; margin-bottom: 1rem; }
+.feature-card h3 { font-size: 1.3rem; margin: 0 0 0.75rem; color: var(--text-h); }
+.feature-card p { color: var(--text); margin: 0; }
+.footer-note { background: var(--code-bg); border-radius: 16px; padding: 2rem; text-align: center; color: var(--text); }
+.footer-note strong { color: var(--text-h); }
+@media (max-width: 768px) { .hero h1 { font-size: 2rem; } .hero-actions { flex-direction: column; } .btn-primary, .btn-secondary { width: 100%; justify-content: center; } }
 </style>
diff --git a/dashboard/src/views/ToolsView.vue b/dashboard/src/views/ToolsView.vue
index 271c066..a444a9c 100644
--- a/dashboard/src/views/ToolsView.vue
+++ b/dashboard/src/views/ToolsView.vue
@@ -1,975 +1,110 @@
 <template>
   <div class="tools">
-    <div class="header">
-      <div>
-        <h1>工具管理</h1>
-        <p class="subtitle">管理系统内置工具，启用或禁用各项功能</p>
-      </div>
-      <button @click="refreshTools" class="btn-secondary" :disabled="loading">
-        <span class="icon">🔄</span> 刷新
-      </button>
+    <h1>工具管理</h1>
+
+    <div class="stats">
+      <div class="stat">🛠️ {{ list.length }} 个工具</div>
+      <button @click="fetchData" :disabled="loading" class="btn-refresh">🔄 刷新</button>
     </div>
 
-    <!-- 统计概览 -->
-    <div class="stats-overview">
-      <div class="stat-card">
-        <div class="stat-icon">🛠️</div>
-        <div class="stat-content">
-          <div class="stat-value">{{ totalTools }}</div>
-          <div class="stat-label">工具总数</div>
-        </div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-icon enabled">✓</div>
-        <div class="stat-content">
-          <div class="stat-value">{{ enabledTools }}</div>
-          <div class="stat-label">已启用</div>
-        </div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-icon disabled">✗</div>
-        <div class="stat-content">
-          <div class="stat-value">{{ totalTools - enabledTools }}</div>
-          <div class="stat-label">已禁用</div>
+    <div v-if="loading" class="loading"><div class="spinner"></div>加载中...</div>
+    <div v-else-if="error" class="error-msg">{{ error }} <button @click="fetchData">重试</button></div>
+    <div v-else class="grid">
+      <div v-for="tool in list" :key="tool.name" class="card">
+        <div class="card-header">
+          <span class="icon">{{ getIcon(tool.name) }}</span>
+          <span :class="['badge', tool.enabled ? 'enabled' : 'disabled']">{{ tool.enabled ? '已启用' : '已禁用' }}</span>
         </div>
+        <h3>{{ tool.name }}</h3>
+        <p>{{ tool.description || '暂无描述' }}</p>
+        <button @click="showDetail(tool)" class="btn-info">ℹ️ 查看详情</button>
       </div>
     </div>
 
-    <!-- 分类筛选 -->
-    <div class="category-tabs">
-      <button 
-        v-for="cat in categories" 
-        :key="cat.key"
-        :class="['tab', { active: selectedCategory === cat.key }]"
-        @click="selectedCategory = cat.key; fetchTools()"
-      >
-        <span class="tab-icon">{{ cat.icon }}</span>
-        {{ cat.label }}
-        <span class="tab-count">{{ getCategoryCount(cat.key) }}</span>
-      </button>
-    </div>
-
-    <!-- 加载状态 -->
-    <div v-if="loading" class="loading-container">
-      <div class="spinner"></div>
-      <p>正在加载工具列表...</p>
-    </div>
-
-    <!-- 错误状态 -->
-    <div v-else-if="error" class="error-container">
-      <div class="error-icon">⚠️</div>
-      <p>{{ error }}</p>
-      <button @click="fetchTools" class="btn-secondary">重试</button>
-    </div>
-
-    <!-- 空状态 -->
-    <div v-else-if="filteredTools.length === 0" class="empty-container">
-      <div class="empty-icon">🔧</div>
-      <h3>暂无工具</h3>
-      <p>该分类下没有可用工具</p>
-    </div>
-
-    <!-- 工具列表 -->
-    <div v-else class="tools-grid">
-      <div 
-        v-for="tool in filteredTools" 
-        :key="tool.name" 
-        class="tool-card"
-        :class="{ disabled: !tool.enabled }"
-      >
-        <div class="tool-header">
-          <div class="tool-icon">{{ getToolIcon(tool.name) }}</div>
-          <div class="tool-badge" :class="tool.enabled ? 'badge-enabled' : 'badge-disabled'">
-            {{ tool.enabled ? '已启用' : '已禁用' }}
-          </div>
-        </div>
-        <h3 class="tool-name">{{ tool.name }}</h3>
-        <p class="tool-description">{{ tool.description || '暂无描述' }}</p>
-        
-        <div v-if="tool.parameters" class="tool-params">
-          <span class="params-label">参数:</span>
-          <code>{{ Object.keys(tool.parameters).join(', ') }}</code>
-        </div>
-
-        <div class="tool-footer">
-          <button 
-            @click="toggleTool(tool)" 
-            class="btn-toggle"
-            :class="tool.enabled ? 'btn-disable' : 'btn-enable'"
-          >
-            {{ tool.enabled ? '禁用' : '启用' }}
-          </button>
-          <button @click="viewToolDetail(tool)" class="btn-icon" title="查看详情">
-            ℹ️
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- 工具详情模态框 -->
-    <div v-if="showDetailModal" class="modal-overlay" @click.self="closeDetailModal">
-      <div class="modal modal-large">
-        <div class="modal-header">
-          <h2>{{ selectedTool?.name }}</h2>
-          <button @click="closeDetailModal" class="btn-close">×</button>
-        </div>
-        <div class="modal-body">
-          <div class="detail-section">
-            <h4>基本信息</h4>
-            <div class="detail-grid">
-              <div class="detail-item">
-                <span class="detail-label">名称</span>
-                <span class="detail-value">{{ selectedTool?.name }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="detail-label">状态</span>
-                <span :class="['status-badge', selectedTool?.enabled ? 'enabled' : 'disabled']">
-                  {{ selectedTool?.enabled ? '已启用' : '已禁用' }}
-                </span>
-              </div>
-              <div class="detail-item">
-                <span class="detail-label">分类</span>
-                <span class="detail-value">{{ getToolCategory(selectedTool?.name) }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="detail-label">版本</span>
-                <span class="detail-value">{{ selectedTool?.version || '1.0.0' }}</span>
-              </div>
-            </div>
-          </div>
-
-          <div class="detail-section">
-            <h4>描述</h4>
-            <p class="description-text">{{ selectedTool?.description || '暂无描述' }}</p>
-          </div>
-
-          <div v-if="selectedTool?.parameters" class="detail-section">
-            <h4>参数说明</h4>
-            <table class="params-table">
-              <thead>
-                <tr>
-                  <th>参数名</th>
-                  <th>类型</th>
-                  <th>必填</th>
-                  <th>描述</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="(param, key) in selectedTool.parameters" :key="key">
-                  <td><code>{{ key }}</code></td>
-                  <td><span class="type-badge">{{ param.type || 'string' }}</span></td>
-                  <td>{{ param.required ? '是' : '否' }}</td>
-                  <td>{{ param.description || '-' }}</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-
-          <div v-if="selectedTool?.examples" class="detail-section">
-            <h4>使用示例</h4>
-            <div class="example-box">
-              <pre><code>{{ selectedTool.examples }}</code></pre>
-            </div>
-          </div>
-        </div>
-        <div class="modal-footer">
-          <button @click="closeDetailModal" class="btn-secondary">关闭</button>
-          <button 
-            @click="toggleTool(selectedTool)" 
-            class="btn-primary"
-            :class="selectedTool?.enabled ? 'btn-disable' : 'btn-enable'"
-          >
-            {{ selectedTool?.enabled ? '禁用工具' : '启用工具' }}
-          </button>
+    <div v-if="detail" class="modal-overlay" @click.self="detail = null">
+      <div class="modal">
+        <h2>{{ detail.name }}</h2>
+        <p class="desc">{{ detail.description }}</p>
+        <div v-if="detail.parameters" class="params">
+          <h4>参数</h4>
+          <pre><code>{{ JSON.stringify(detail.parameters, null, 2) }}</code></pre>
         </div>
+        <button @click="detail = null" class="btn-close">关闭</button>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { toolsAPI } from '../services/api.js'
 
+const list = ref([])
 const loading = ref(true)
-const error = ref(null)
-const tools = ref([])
-const selectedCategory = ref('all')
-const showDetailModal = ref(false)
-const selectedTool = ref(null)
+const error = ref('')
+const detail = ref(null)
 
-const categories = [
-  { key: 'all', label: '全部', icon: '📦' },
-  { key: 'code', label: '代码', icon: '💻' },
-  { key: 'crawler', label: '爬虫', icon: '🕷️' },
-  { key: 'data', label: '数据', icon: '📊' },
-]
-
-const totalTools = computed(() => tools.value.length)
-const enabledTools = computed(() => tools.value.filter(t => t.enabled).length)
-
-const filteredTools = computed(() => {
-  if (selectedCategory.value === 'all') {
-    return tools.value
-  }
-  return tools.value.filter(tool => {
-    const category = getToolCategory(tool.name)
-    return category === selectedCategory.value
-  })
-})
-
-const getCategoryCount = (category) => {
-  if (category === 'all') return tools.value.length
-  return tools.value.filter(tool => getToolCategory(tool.name) === category).length
+const fetchData = async () => {
+  loading.value = true
+  error.value = ''
+  try {
+    const res = await toolsAPI.list()
+    if (res.success) {
+      const data = res.data.categorized
+      const all = []
+      Object.keys(data || {}).forEach(cat => {
+        if (Array.isArray(data[cat])) {
+          all.push(...data[cat].map(t => {
+            const func = t.function ? t.function : t
+            return { name: func.name, description: func.description, parameters: func.parameters, category: cat, enabled: true }
+          }))
+        }
+      })
+      list.value = all
+    } else throw new Error(res.message)
+  } catch (e) { error.value = e.message }
+  finally { loading.value = false }
 }
 
-const getToolCategory = (name) => {
-  if (!name) return 'other'
-  const lowerName = name.toLowerCase()
-  // 代码类工具
-  if (lowerName.includes('code') || lowerName.includes('python') || 
-      lowerName.includes('javascript') || lowerName.includes('eval') ||
-      lowerName.includes('execute')) {
-    return 'code'
-  }
-  // 爬虫类工具
-  if (lowerName.includes('crawl') || lowerName.includes('web') || 
-      lowerName.includes('fetch') || lowerName.includes('search') ||
-      lowerName.includes('scrape')) {
-    return 'crawler'
-  }
-  // 数据类工具
-  if (lowerName.includes('data') || lowerName.includes('analys') || 
-      lowerName.includes('calculate') || lowerName.includes('math')) {
-    return 'data'
-  }
-  return 'other'
-}
-
-const getToolIcon = (name) => {
-  if (!name) return '🔧'
-  const lowerName = name.toLowerCase()
-  if (lowerName.includes('code')) return '💻'
-  if (lowerName.includes('crawl')) return '🕷️'
-  if (lowerName.includes('data')) return '📊'
-  if (lowerName.includes('weather')) return '🌤️'
-  if (lowerName.includes('search')) return '🔍'
+const getIcon = (name) => {
+  const n = name?.toLowerCase() || ''
+  if (n.includes('code') || n.includes('python')) return '💻'
+  if (n.includes('web') || n.includes('search') || n.includes('crawl')) return '🌐'
+  if (n.includes('data')) return '📊'
   return '🛠️'
 }
 
-// 获取工具列表
-const fetchTools = async () => {
-  loading.value = true
-  error.value = null
-  
-  try {
-    const params = {}
-    if (selectedCategory.value !== 'all') {
-      params.category = selectedCategory.value
-    }
-    
-    const response = await toolsAPI.list(params)
-    
-    if (response.success) {
-      // 处理返回的数据
-      const toolsData = response.data.tools || response.data || []
-      
-      // 如果返回的是分类格式，转换为数组
-      if (response.data.categorized) {
-        const categorized = response.data.categorized
-        const allTools = []
-        Object.keys(categorized).forEach(cat => {
-          if (Array.isArray(categorized[cat])) {
-            allTools.push(...categorized[cat].map(tool => {
-              // 解析 OpenAI 格式
-              if (tool.function) {
-                return {
-                  name: tool.function.name,
-                  description: tool.function.description,
-                  parameters: tool.function.parameters,
-                  category: cat,
-                  enabled: true
-                }
-              }
-              return { ...tool, category: cat }
-            }))
-          }
-        })
-        tools.value = allTools
-      } else {
-        // 处理扁平格式或 OpenAI 格式的工具数组
-        tools.value = Array.isArray(toolsData) ? toolsData.map(tool => {
-          // 解析 OpenAI 格式
-          if (tool.function) {
-            return {
-              name: tool.function.name,
-              description: tool.function.description,
-              parameters: tool.function.parameters,
-              enabled: true
-            }
-          }
-          return { ...tool, enabled: true }
-        }) : []
-      }
-    } else {
-      throw new Error(response.message || '获取工具列表失败')
-    }
-  } catch (err) {
-    console.error('获取工具列表失败:', err)
-    error.value = err.message || '网络错误，请稍后重试'
-  } finally {
-    loading.value = false
-  }
-}
+const showDetail = (tool) => { detail.value = tool }
 
-// 切换工具状态
-const toggleTool = async (tool) => {
-  if (!tool) return
-  
-  try {
-    const response = await toolsAPI.execute(tool.name, { 
-      action: tool.enabled ? 'disable' : 'enable' 
-    })
-    
-    if (response.success) {
-      // 更新本地状态
-      tool.enabled = !tool.enabled
-      // 如果详情模态框打开，更新详情
-      if (selectedTool.value?.name === tool.name) {
-        selectedTool.value.enabled = tool.enabled
-      }
-    } else {
-      throw new Error(response.message || '操作失败')
-    }
-  } catch (err) {
-    console.error('切换工具状态失败:', err)
-    alert(err.message || '操作失败，请重试')
-  }
-}
-
-// 查看工具详情
-const viewToolDetail = async (tool) => {
-  selectedTool.value = { ...tool }
-  
-  try {
-    const response = await toolsAPI.get(tool.name)
-    if (response.success) {
-      // 解析 OpenAI 格式
-      let toolData = response.data
-      if (toolData.function) {
-        toolData = {
-          name: toolData.function.name,
-          description: toolData.function.description,
-          parameters: toolData.function.parameters
-        }
-      }
-      selectedTool.value = { ...selectedTool.value, ...toolData }
-    }
-  } catch (err) {
-    console.error('获取工具详情失败:', err)
-  }
-  
-  showDetailModal.value = true
-}
-
-const closeDetailModal = () => {
-  showDetailModal.value = false
-  selectedTool.value = null
-}
-
-const refreshTools = () => {
-  fetchTools()
-}
-
-onMounted(() => {
-  fetchTools()
-})
+onMounted(fetchData)
 </script>
 
 <style scoped>
-.tools {
-  padding: 0;
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 2rem;
-  padding-bottom: 1.5rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.header h1 {
-  font-size: 2rem;
-  margin: 0 0 0.5rem 0;
-  color: var(--text-h);
-}
-
-.subtitle {
-  color: var(--text);
-  font-size: 1rem;
-  margin: 0;
-}
-
-/* 统计概览 */
-.stats-overview {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1.5rem;
-  margin-bottom: 2rem;
-}
-
-.stat-card {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1.5rem;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-}
-
-.stat-icon {
-  width: 48px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.5rem;
-  background: var(--accent-bg);
-  border-radius: 10px;
-}
-
-.stat-icon.enabled {
-  background: #d4edda;
-  color: #155724;
-}
-
-.stat-icon.disabled {
-  background: #f8d7da;
-  color: #721c24;
-}
-
-.stat-value {
-  font-size: 2rem;
-  font-weight: bold;
-  color: var(--text-h);
-  line-height: 1;
-}
-
-.stat-label {
-  color: var(--text);
-  font-size: 0.875rem;
-  margin-top: 0.25rem;
-}
-
-/* 分类标签 */
-.category-tabs {
-  display: flex;
-  gap: 0.75rem;
-  margin-bottom: 1.5rem;
-  overflow-x: auto;
-  padding-bottom: 0.5rem;
-}
-
-.tab {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.25rem;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  font-size: 0.95rem;
-  color: var(--text);
-  cursor: pointer;
-  transition: all 0.2s;
-  white-space: nowrap;
-}
-
-.tab:hover {
-  border-color: var(--accent);
-  color: var(--accent);
-}
-
-.tab.active {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: white;
-}
-
-.tab-icon {
-  font-size: 1.1rem;
-}
-
-.tab-count {
-  background: rgba(255, 255, 255, 0.2);
-  padding: 0.15rem 0.5rem;
-  border-radius: 10px;
-  font-size: 0.8rem;
-}
-
-.tab:not(.active) .tab-count {
-  background: var(--code-bg);
-}
-
-/* 加载状态 */
-.loading-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 4rem 2rem;
-  color: var(--text);
-}
-
-.spinner {
-  width: 48px;
-  height: 48px;
-  border: 4px solid var(--border);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 1rem;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-/* 错误状态 */
-.error-container {
-  text-align: center;
-  padding: 4rem 2rem;
-  background: #fef2f2;
-  border-radius: 12px;
-  border: 1px solid #fecaca;
-}
-
-.error-icon {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-}
-
-/* 空状态 */
-.empty-container {
-  text-align: center;
-  padding: 4rem 2rem;
-  background: var(--accent-bg);
-  border-radius: 12px;
-}
-
-.empty-icon {
-  font-size: 4rem;
-  margin-bottom: 1rem;
-}
-
-.empty-container h3 {
-  font-size: 1.5rem;
-  margin: 0 0 0.5rem 0;
-  color: var(--text-h);
-}
-
-/* 工具网格 */
-.tools-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 1.5rem;
-}
-
-.tool-card {
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 1.5rem;
-  transition: all 0.2s;
-}
-
-.tool-card:hover {
-  border-color: var(--accent);
-  box-shadow: 0 4px 12px var(--shadow);
-  transform: translateY(-2px);
-}
-
-.tool-card.disabled {
-  opacity: 0.7;
-}
-
-.tool-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 1rem;
-}
-
-.tool-icon {
-  font-size: 2.5rem;
-}
-
-.tool-badge {
-  padding: 0.25rem 0.75rem;
-  border-radius: 20px;
-  font-size: 0.8rem;
-  font-weight: 500;
-}
-
-.badge-enabled {
-  background: #d4edda;
-  color: #155724;
-}
-
-.badge-disabled {
-  background: #f8d7da;
-  color: #721c24;
-}
-
-.tool-name {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin: 0 0 0.75rem 0;
-  color: var(--text-h);
-}
-
-.tool-description {
-  color: var(--text);
-  font-size: 0.95rem;
-  line-height: 1.5;
-  margin: 0 0 1rem 0;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.tool-params {
-  margin-bottom: 1rem;
-  font-size: 0.875rem;
-}
-
-.params-label {
-  color: var(--text);
-  margin-right: 0.5rem;
-}
-
-.tool-params code {
-  background: var(--code-bg);
-  padding: 0.2rem 0.5rem;
-  border-radius: 4px;
-  font-size: 0.85rem;
-  color: var(--accent);
-}
-
-.tool-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-top: 1rem;
-  border-top: 1px solid var(--border);
-}
-
-/* 按钮样式 */
-.btn-primary {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.5rem;
-  background: var(--accent);
-  color: white;
-  border: none;
-  border-radius: 8px;
-  font-size: 1rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.btn-primary:hover:not(:disabled) {
-  background: var(--accent-border);
-  transform: translateY(-1px);
-}
-
-.btn-secondary {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.5rem;
-  background: var(--bg);
-  color: var(--text);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.btn-secondary:hover:not(:disabled) {
-  background: var(--code-bg);
-}
-
-.btn-secondary:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn-toggle {
-  padding: 0.5rem 1rem;
-  border-radius: 6px;
-  font-size: 0.9rem;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.btn-enable {
-  background: #d4edda;
-  color: #155724;
-  border: 1px solid #c3e6cb;
-}
-
-.btn-enable:hover {
-  background: #c3e6cb;
-}
-
-.btn-disable {
-  background: #f8d7da;
-  color: #721c24;
-  border: 1px solid #f5c6cb;
-}
-
-.btn-disable:hover {
-  background: #f5c6cb;
-}
-
-.btn-icon {
-  padding: 0.5rem;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 1.2rem;
-  transition: all 0.2s;
-}
-
-.btn-icon:hover {
-  background: var(--code-bg);
-}
-
-/* 模态框 */
-.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;
-  padding: 1rem;
-}
-
-.modal {
-  background: var(--bg);
-  border-radius: 16px;
-  width: 100%;
-  max-width: 500px;
-  max-height: 90vh;
-  overflow-y: auto;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-}
-
-.modal-large {
-  max-width: 700px;
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1.5rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.modal-header h2 {
-  font-size: 1.5rem;
-  margin: 0;
-  color: var(--text-h);
-}
-
-.btn-close {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  color: var(--text);
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-}
-
-.btn-close:hover {
-  color: var(--text-h);
-}
-
-.modal-body {
-  padding: 1.5rem;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 1rem;
-  padding: 1.5rem;
-  border-top: 1px solid var(--border);
-}
-
-/* 详情部分 */
-.detail-section {
-  margin-bottom: 2rem;
-}
-
-.detail-section:last-child {
-  margin-bottom: 0;
-}
-
-.detail-section h4 {
-  font-size: 1.1rem;
-  margin: 0 0 1rem 0;
-  color: var(--text-h);
-}
-
-.detail-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-.detail-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.detail-label {
-  font-size: 0.875rem;
-  color: var(--text);
-}
-
-.detail-value {
-  font-weight: 500;
-  color: var(--text-h);
-}
-
-.status-badge {
-  display: inline-block;
-  padding: 0.25rem 0.75rem;
-  border-radius: 20px;
-  font-size: 0.85rem;
-  font-weight: 500;
-  width: fit-content;
-}
-
-.status-badge.enabled {
-  background: #d4edda;
-  color: #155724;
-}
-
-.status-badge.disabled {
-  background: #f8d7da;
-  color: #721c24;
-}
-
-.description-text {
-  color: var(--text);
-  line-height: 1.6;
-  margin: 0;
-}
-
-/* 参数表格 */
-.params-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.9rem;
-}
-
-.params-table th,
-.params-table td {
-  padding: 0.75rem;
-  text-align: left;
-  border-bottom: 1px solid var(--border);
-}
-
-.params-table th {
-  background: var(--code-bg);
-  font-weight: 600;
-  color: var(--text-h);
-}
-
-.params-table td {
-  color: var(--text);
-}
-
-.params-table code {
-  background: var(--code-bg);
-  padding: 0.2rem 0.4rem;
-  border-radius: 4px;
-  font-size: 0.85rem;
-  color: var(--accent);
-}
-
-.type-badge {
-  background: var(--accent-bg);
-  color: var(--accent);
-  padding: 0.2rem 0.5rem;
-  border-radius: 4px;
-  font-size: 0.8rem;
-}
-
-.example-box {
-  background: var(--code-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  overflow-x: auto;
-}
-
-.example-box pre {
-  margin: 0;
-}
-
-.example-box code {
-  color: var(--text-h);
-  font-size: 0.9rem;
-}
-
-/* 响应式 */
-@media (max-width: 768px) {
-  .header {
-    flex-direction: column;
-    gap: 1rem;
-  }
-  
-  .stats-overview {
-    grid-template-columns: 1fr;
-  }
-  
-  .category-tabs {
-    flex-wrap: wrap;
-  }
-  
-  .tools-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .detail-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .modal-footer {
-    flex-direction: column;
-  }
-  
-  .modal-footer button {
-    width: 100%;
-  }
-}
+.tools { padding: 0; }
+.tools h1 { font-size: 2rem; margin: 0 0 1.5rem; color: var(--text-h); }
+.stats { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
+.stat { font-size: 1.1rem; color: var(--text); }
+.btn-refresh { padding: 0.5rem 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
+.loading, .error-msg { text-align: center; padding: 4rem; color: var(--text); }
+.error-msg { background: #fef2f2; border-radius: 12px; }
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
+.card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; }
+.card-header { display: flex; justify-content: space-between; margin-bottom: 1rem; }
+.icon { font-size: 2.5rem; }
+.badge { padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 500; }
+.badge.enabled { background: #d4edda; color: #155724; }
+.badge.disabled { background: #f8d7da; color: #721c24; }
+.card h3 { margin: 0 0 0.75rem; font-size: 1.25rem; color: var(--text-h); }
+.card p { color: var(--text); font-size: 0.95rem; margin: 0 0 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.btn-info { background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 1rem; cursor: pointer; }
+.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); border-radius: 16px; padding: 2rem; width: 100%; max-width: 600px; max-height: 80vh; overflow-y: auto; }
+.modal h2 { margin: 0 0 1rem; color: var(--text-h); }
+.desc { color: var(--text); margin: 0 0 1.5rem; }
+.params h4 { margin: 0 0 0.75rem; color: var(--text-h); }
+.params pre { background: var(--code-bg); padding: 1rem; border-radius: 8px; overflow-x: auto; margin: 0; }
+.params code { font-size: 0.85rem; color: var(--text-h); }
+.btn-close { margin-top: 1.5rem; padding: 0.75rem 1.5rem; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
+.spinner { width: 48px; height: 48px; border: 4px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem; }
+@keyframes spin { to { transform: rotate(360deg); } }
 </style>