diff --git a/.gitignore b/.gitignore
index 2b3e889..eee2459 100644
--- a/.gitignore
+++ b/.gitignore
@@ -44,6 +44,7 @@ backend-cf/.dev.vars
 
 frontend/node_modules/
 frontend/.nuxt/
+frontend/.output/
 
 # wrangler files
 .wrangler
diff --git a/frontend/app.vue b/frontend/app.vue
index 381db79..0eb49c1 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -1,31 +1,168 @@
 <template>
   <div class="min-h-screen flex flex-col">
-    <header class="bg-white border-b border-gray-200 sticky top-0 z-50">
+    <!-- 全局透明遮罩 -->
+    <Transition name="fade">
+      <div 
+        v-if="mobileMenuOpen" 
+        @click="mobileMenuOpen = false" 
+        class="fixed inset-0 z-40 md:hidden"
+      ></div>
+    </Transition>
+
+    <header class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-0 z-50">
       <div class="max-w-6xl mx-auto px-4 h-14 flex items-center justify-between">
-        <NuxtLink to="/" class="text-lg font-bold text-primary-600 hover:text-primary-700">
+        
+        <!-- 1. 左侧区域：Logo -->
+        <NuxtLink to="/" class="text-lg font-bold text-primary-600 hover:text-primary-700 shrink-0">
           Trans‑Search
         </NuxtLink>
-        <nav class="flex items-center gap-1">
-          <NuxtLink to="/" class="px-3 py-1.5 rounded-md text-sm hover:bg-gray-100" active-class="bg-primary-50 text-primary-700 font-medium">
-            搜索
+
+        <!-- 2. 中央区域：桌面端导航 -->
+        <nav class="hidden md:flex items-center gap-1 absolute left-1/2 -translate-x-1/2">
+          <NuxtLink to="/" class="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm hover:bg-gray-100 dark:hover:bg-gray-800 dark:text-gray-300" active-class="bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400 font-medium">
+            <Icon name="mdi:magnify" class="w-4 h-4 shrink-0 -mt-px" />
+            <span>搜索</span>
           </NuxtLink>
-          <NuxtLink to="/tree" class="px-3 py-1.5 rounded-md text-sm hover:bg-gray-100" active-class="bg-primary-50 text-primary-700 font-medium">
-            分类
+          <NuxtLink to="/tree" class="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm hover:bg-gray-100 dark:hover:bg-gray-800 dark:text-gray-300" active-class="bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400 font-medium">
+            <Icon name="mdi:file-tree" class="w-4 h-4 shrink-0 -mt-px" />
+            <span>分类</span>
           </NuxtLink>
-          <NuxtLink to="/stats" class="px-3 py-1.5 rounded-md text-sm hover:bg-gray-100" active-class="bg-primary-50 text-primary-700 font-medium">
-            统计
+          <NuxtLink to="/stats" class="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm hover:bg-gray-100 dark:hover:bg-gray-800 dark:text-gray-300" active-class="bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400 font-medium">
+            <Icon name="mdi:chart-bar" class="w-4 h-4 shrink-0 -mt-px" />
+            <span>统计</span>
           </NuxtLink>
-          <NuxtLink to="/config" class="px-3 py-1.5 rounded-md text-sm hover:bg-gray-100" active-class="bg-primary-50 text-primary-700 font-medium">
-            管理
+          <NuxtLink to="/config" class="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm hover:bg-gray-100 dark:hover:bg-gray-800 dark:text-gray-300" active-class="bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400 font-medium">
+            <Icon name="mdi:cog" class="w-4 h-4 shrink-0 -mt-px" />
+            <span>管理</span>
           </NuxtLink>
-          <NuxtLink to="/about" class="px-3 py-1.5 rounded-md text-sm hover:bg-gray-100" active-class="bg-primary-50 text-primary-700 font-medium">
-            关于
+          <NuxtLink to="/about" class="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm hover:bg-gray-100 dark:hover:bg-gray-800 dark:text-gray-300" active-class="bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400 font-medium">
+            <Icon name="mdi:information-outline" class="w-4 h-4 shrink-0 -mt-px" />
+            <span>关于</span>
           </NuxtLink>
         </nav>
+
+        <!-- 3. 右侧区域：桌面端暗色切换 + 移动端按钮组 -->
+        <div class="flex items-center gap-1 shrink-0">
+          <!-- 桌面端暗色模式切换 -->
+          <button
+            class="hidden md:flex p-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500 dark:text-gray-400"
+            aria-label="切换暗色模式"
+            @click="toggleDark"
+          >
+            <Icon v-if="isDark" name="mdi:white-balance-sunny" class="w-4 h-4 shrink-0 -mt-px" />
+            <Icon v-else name="mdi:moon-waning-crescent" class="w-4 h-4 shrink-0 -mt-px" />
+          </button>
+
+          <!-- 移动端：暗色切换 + 汉堡菜单 -->
+          <button
+            class="md:hidden p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500 dark:text-gray-400"
+            aria-label="切换暗色模式"
+            @click="toggleDark"
+          >
+            <Icon v-if="isDark" name="mdi:white-balance-sunny" class="w-4 h-4 shrink-0" />
+            <Icon v-else name="mdi:moon-waning-crescent" class="w-4 h-4 shrink-0" />
+          </button>
+
+          <button
+            class="md:hidden p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-600 dark:text-gray-300"
+            aria-label="菜单"
+            :aria-expanded="mobileMenuOpen"
+            @click="mobileMenuOpen = !mobileMenuOpen"
+          >
+            <Icon v-if="!mobileMenuOpen" name="mdi:menu" class="w-5 h-5 shrink-0" />
+            <Icon v-else name="mdi:close" class="w-5 h-5 shrink-0" />
+          </button>
+        </div>
       </div>
+
+      <!-- 移动端 Dropdown 菜单 -->
+      <Transition name="dropdown">
+        <nav 
+          v-if="mobileMenuOpen" 
+          class="absolute top-full right-4 mt-2 w-48 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1 z-50 flex flex-col md:hidden"
+        >
+          <NuxtLink to="/" class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-300" active-class="bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400 font-medium" @click="mobileMenuOpen = false">
+            <Icon name="mdi:magnify" class="w-4 h-4 shrink-0 -mt-px" />
+            <span>搜索</span>
+          </NuxtLink>
+          <NuxtLink to="/tree" class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-300" active-class="bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400 font-medium" @click="mobileMenuOpen = false">
+            <Icon name="mdi:file-tree" class="w-4 h-4 shrink-0 -mt-px" />
+            <span>分类</span>
+          </NuxtLink>
+          <NuxtLink to="/stats" class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-300" active-class="bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400 font-medium" @click="mobileMenuOpen = false">
+            <Icon name="mdi:chart-bar" class="w-4 h-4 shrink-0 -mt-px" />
+            <span>统计</span>
+          </NuxtLink>
+          <NuxtLink to="/config" class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-300" active-class="bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400 font-medium" @click="mobileMenuOpen = false">
+            <Icon name="mdi:cog" class="w-4 h-4 shrink-0 -mt-px" />
+            <span>管理</span>
+          </NuxtLink>
+          <NuxtLink to="/about" class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-300" active-class="bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400 font-medium" @click="mobileMenuOpen = false">
+            <Icon name="mdi:information-outline" class="w-4 h-4 shrink-0 -mt-px" />
+            <span>关于</span>
+          </NuxtLink>
+        </nav>
+      </Transition>
     </header>
-    <main class="flex-1">
+
+    <main class="flex-1 bg-gray-50 dark:bg-gray-950">
       <NuxtPage />
     </main>
   </div>
 </template>
+
+<script setup lang="ts">
+const mobileMenuOpen = ref(false)
+const { isDark, toggle: toggleDark } = useDarkMode()
+
+// 1. 菜单打开时锁定背景滚动
+watch(mobileMenuOpen, (isOpen) => {
+  if (import.meta.client) {
+    document.body.style.overflow = isOpen ? 'hidden' : ''
+  }
+})
+
+// 2. 路由切换时关闭菜单
+const router = useRouter()
+router.afterEach(() => {
+  mobileMenuOpen.value = false
+})
+
+// 3. 按 Esc 键关闭菜单
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape' && mobileMenuOpen.value) {
+    mobileMenuOpen.value = false
+  }
+}
+
+onMounted(() => window.addEventListener('keydown', handleKeydown))
+onUnmounted(() => window.removeEventListener('keydown', handleKeydown))
+</script>
+
+<style>
+/* Dropdown 弹出动画 */
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-8px) scale(0.95);
+}
+.dropdown-enter-to,
+.dropdown-leave-from {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+/* 遮罩层淡入淡出 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/assets/css/main.css b/frontend/assets/css/main.css
index f0f4e6d..5045a42 100644
--- a/frontend/assets/css/main.css
+++ b/frontend/assets/css/main.css
@@ -2,6 +2,49 @@
 @tailwind components;
 @tailwind utilities;
 
+/* 1. 全局基础样式（亮色模式） */
+html {
+  color-scheme: light !important; /* 强制亮色原生控件 */
+}
+
 body {
-  @apply bg-gray-50 text-gray-900 min-h-screen;
+  @apply bg-gray-50 text-gray-900 min-h-screen transition-colors duration-300;
+}
+
+/* 2. 当 JS 加上 .dark 类时，强制深色模式 */
+html.dark {
+  color-scheme: dark !important; /* 【关键】强制深色原生控件（解决滚动条/表单亮色问题） */
+}
+
+html.dark body {
+  @apply bg-gray-950 text-gray-100;
+}
+
+/* 3. 手动接管深色模式下的滚动条样式，确保视觉绝对统一 */
+html.dark {
+  --scrollbar-bg: #1f2937; /* gray-800 */
+  --scrollbar-thumb: #4b5563; /* gray-600 */
+  --scrollbar-thumb-hover: #6b7280; /* gray-500 */
+}
+
+/* Webkit 内核浏览器（Chrome, Safari, Edge） */
+html.dark ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: var(--scrollbar-bg);
+}
+
+html.dark ::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
+  border-radius: 4px;
+}
+
+html.dark ::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scrollbar-thumb-hover);
+}
+
+/* Firefox 浏览器 */
+html.dark * {
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
+  scrollbar-width: thin;
 }
diff --git a/frontend/composables/useDarkMode.ts b/frontend/composables/useDarkMode.ts
new file mode 100644
index 0000000..9c62731
--- /dev/null
+++ b/frontend/composables/useDarkMode.ts
@@ -0,0 +1,60 @@
+// composables/useDarkMode.ts
+export function useDarkMode() {
+  // 1. 核心状态：Cookie 为空字符串代表“跟随系统”
+  const colorMode = useCookie<string>('dark-mode', {
+    default: () => '', 
+    watch: true,
+    maxAge: 60 * 60 * 24 * 365, // 1 year
+  })
+
+  // 2. 计算属性：有 Cookie 用 Cookie，没 Cookie 读系统偏好
+  const isDark = computed({
+    get: () => {
+      if (colorMode.value === 'dark') return true
+      if (colorMode.value === 'light') return false
+      
+      // SSR 阶段默认返回 false，客户端读取系统偏好
+      if (import.meta.client) {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches
+      }
+      return false 
+    },
+    set: (val: boolean) => {
+      // 只有手动设置时，才往 Cookie 写入明确的值
+      colorMode.value = val ? 'dark' : 'light'
+    },
+  })
+
+  // 3. 客户端专属逻辑：同步 class 与监听系统变化
+  if (import.meta.client) {
+    // 监听 isDark 变化，同步到 <html> 标签
+    watch(isDark, (val) => {
+      document.documentElement.classList.toggle('dark', val)
+    }, { immediate: true }) // immediate: true 确保首次加载时也能同步
+
+    // 【新增】监听系统主题变化（仅在“跟随系统”模式下生效）
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const handleSystemChange = (e: MediaQueryListEvent) => {
+      // 只有当 Cookie 为空（即用户没有手动设置过偏好）时，才响应系统变化
+      if (!colorMode.value) {
+        document.documentElement.classList.toggle('dark', e.matches)
+      }
+    }
+    mediaQuery.addEventListener('change', handleSystemChange)
+    
+    // 组件卸载时清理监听器
+    onUnmounted(() => mediaQuery.removeEventListener('change', handleSystemChange))
+  }
+
+  // 4. 手动切换
+  function toggle() {
+    isDark.value = !isDark.value
+  }
+
+  // 5. 【新增】恢复跟随系统（清空 Cookie）
+  function clearPreference() {
+    colorMode.value = '' 
+  }
+
+  return { isDark, toggle, clearPreference }
+}
\ No newline at end of file
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 4681883..04b4ef1 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -1,7 +1,17 @@
 export default defineNuxtConfig({
   compatibilityDate: "2026-07-14",
   devtools: { enabled: true },
-  modules: ["@nuxtjs/tailwindcss"],
+  modules: ["@nuxtjs/tailwindcss", "@nuxt/icon"],
+  icon: {
+    serverBundle: {
+      collections: ["mdi"],
+    },
+  },
+  tailwindcss: {
+    config: {
+      darkMode: "class",
+    },
+  },
   nitro: {
     preset: "cloudflare_module",
     devProxy: {
diff --git a/frontend/package.json b/frontend/package.json
index 28d1ad5..bde0a43 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,11 +9,14 @@
     "preview": "nuxt preview"
   },
   "dependencies": {
+    "@nuxtjs/tailwindcss": "^6.13.0",
     "nuxt": "^3.15.0",
-    "vue": "^3.5.0",
-    "@nuxtjs/tailwindcss": "^6.13.0"
+    "vue": "^3.5.0"
   },
   "devDependencies": {
+    "@iconify-json/fa-solid": "^1.2.2",
+    "@iconify-json/mdi": "^1.2.3",
+    "@nuxt/icon": "^1.15.0",
     "tailwindcss": "^3.4.0"
   }
 }
diff --git a/frontend/pages/about.vue b/frontend/pages/about.vue
index 9c9b320..b468f38 100644
--- a/frontend/pages/about.vue
+++ b/frontend/pages/about.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="max-w-3xl mx-auto px-4 py-8">
-    <h1 class="text-2xl font-bold mb-6">关于与致谢</h1>
+    <h1 class="text-2xl font-bold mb-6 dark:text-white">关于与致谢</h1>
 
-    <section class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
-      <h2 class="text-lg font-semibold mb-3">开源许可</h2>
-      <p class="text-sm text-gray-600 leading-relaxed mb-3">
-        Trans-Search 基于 <a href="https://www.gnu.org/licenses/gpl-3.0.html" target="_blank" class="text-primary-600 hover:underline">GNU General Public License v3.0 (GPL-3.0)</a> 开源。
+    <section class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
+      <h2 class="text-lg font-semibold mb-3 dark:text-gray-200">开源许可</h2>
+      <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed mb-3">
+        Trans-Search 基于 <a href="https://www.gnu.org/licenses/gpl-3.0.html" target="_blank" class="text-primary-600 dark:text-primary-400 hover:underline">GNU General Public License v3.0 (GPL-3.0)</a> 开源。
       </p>
-      <pre v-pre class="bg-gray-50 border border-gray-200 rounded-lg p-4 text-xs text-gray-500 leading-relaxed overflow-x-auto">
+      <pre v-pre class="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 text-xs text-gray-500 dark:text-gray-400 leading-relaxed overflow-x-auto">
 GNU GENERAL PUBLIC LICENSE
 Version 3, 29 June 2007
 
@@ -28,38 +28,38 @@ along with this program.  If not, see https://www.gnu.org/licenses/.
       </pre>
     </section>
 
-    <section class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
-      <h2 class="text-lg font-semibold mb-3">技术致谢</h2>
-      <div class="space-y-3 text-sm text-gray-600 leading-relaxed">
+    <section class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
+      <h2 class="text-lg font-semibold mb-3 dark:text-gray-200">技术致谢</h2>
+      <div class="space-y-3 text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
         <div class="flex items-start gap-3">
-          <span class="shrink-0 w-20 text-xs text-gray-400 font-mono">搜索引擎</span>
-          <span><a href="https://qdrant.tech" target="_blank" class="text-primary-600 hover:underline">Qdrant</a> — 开源向量数据库，提供混合检索能力</span>
+          <span class="shrink-0 w-20 text-xs text-gray-400 dark:text-gray-500 font-mono">搜索引擎</span>
+          <span><a href="https://qdrant.tech" target="_blank" class="text-primary-600 dark:text-primary-400 hover:underline">Qdrant</a> — 开源向量数据库，提供混合检索能力</span>
         </div>
         <div class="flex items-start gap-3">
-          <span class="shrink-0 w-20 text-xs text-gray-400 font-mono">基础模型</span>
+          <span class="shrink-0 w-20 text-xs text-gray-400 dark:text-gray-500 font-mono">基础模型</span>
           <span>
-            <a href="https://huggingface.co/Qwen" target="_blank" class="text-primary-600 hover:underline">Qwen</a> 系列模型（Qwen3-8B / Qwen3-Embedding-0.6B）—
-            <a href="https://www.siliconflow.cn" target="_blank" class="text-primary-600 hover:underline">硅基流动</a> 提供 API 服务
+            <a href="https://huggingface.co/Qwen" target="_blank" class="text-primary-600 dark:text-primary-400 hover:underline">Qwen</a> 系列模型（Qwen3-8B / Qwen3-Embedding-0.6B）—
+            <a href="https://www.siliconflow.cn" target="_blank" class="text-primary-600 dark:text-primary-400 hover:underline">硅基流动</a> 提供 API 服务
           </span>
         </div>
         <div class="flex items-start gap-3">
-          <span class="shrink-0 w-20 text-xs text-gray-400 font-mono">重排序</span>
-          <span><a href="https://huggingface.co/BAAI/bge-reranker-v2-m3" target="_blank" class="text-primary-600 hover:underline">BAAI/bge-reranker-v2-m3</a> — 北京智源人工智能研究院开源的交叉编码器重排序模型</span>
+          <span class="shrink-0 w-20 text-xs text-gray-400 dark:text-gray-500 font-mono">重排序</span>
+          <span><a href="https://huggingface.co/BAAI/bge-reranker-v2-m3" target="_blank" class="text-primary-600 dark:text-primary-400 hover:underline">BAAI/bge-reranker-v2-m3</a> — 北京智源人工智能研究院开源的交叉编码器重排序模型</span>
         </div>
         <div class="flex items-start gap-3">
-          <span class="shrink-0 w-20 text-xs text-gray-400 font-mono">运行时</span>
-          <span><a href="https://workers.cloudflare.com" target="_blank" class="text-primary-600 hover:underline">Cloudflare Workers</a> — 边缘计算平台；<a href="https://hono.dev" target="_blank" class="text-primary-600 hover:underline">Hono</a> — 轻量级 Web 框架</span>
+          <span class="shrink-0 w-20 text-xs text-gray-400 dark:text-gray-500 font-mono">运行时</span>
+          <span><a href="https://workers.cloudflare.com" target="_blank" class="text-primary-600 dark:text-primary-400 hover:underline">Cloudflare Workers</a> — 边缘计算平台；<a href="https://hono.dev" target="_blank" class="text-primary-600 dark:text-primary-400 hover:underline">Hono</a> — 轻量级 Web 框架</span>
         </div>
         <div class="flex items-start gap-3">
-          <span class="shrink-0 w-20 text-xs text-gray-400 font-mono">前端</span>
-          <span><a href="https://nuxt.com" target="_blank" class="text-primary-600 hover:underline">Nuxt</a> / <a href="https://vuejs.org" target="_blank" class="text-primary-600 hover:underline">Vue</a> / <a href="https://tailwindcss.com" target="_blank" class="text-primary-600 hover:underline">Tailwind CSS</a></span>
+          <span class="shrink-0 w-20 text-xs text-gray-400 dark:text-gray-500 font-mono">前端</span>
+          <span><a href="https://nuxt.com" target="_blank" class="text-primary-600 dark:text-primary-400 hover:underline">Nuxt</a> / <a href="https://vuejs.org" target="_blank" class="text-primary-600 dark:text-primary-400 hover:underline">Vue</a> / <a href="https://tailwindcss.com" target="_blank" class="text-primary-600 dark:text-primary-400 hover:underline">Tailwind CSS</a></span>
         </div>
       </div>
     </section>
 
-    <section class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
-      <h2 class="text-lg font-semibold mb-3">内容来源</h2>
-      <p class="text-sm text-gray-600 leading-relaxed">
+    <section class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
+      <h2 class="text-lg font-semibold mb-3 dark:text-gray-200">内容来源</h2>
+      <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
         本站聚合的跨性别相关信息来源于多个中文社区、医疗指南、法律文书及公益组织公开资料。
         所有内容的版权归原作者或来源机构所有。如有版权问题，请联系我们处理。
       </p>
diff --git a/frontend/pages/config.vue b/frontend/pages/config.vue
index 64eda81..79409fd 100644
--- a/frontend/pages/config.vue
+++ b/frontend/pages/config.vue
@@ -1,64 +1,64 @@
 <template>
   <div class="max-w-6xl mx-auto px-4 py-8">
-    <h1 class="text-2xl font-bold mb-6">管理后台</h1>
+    <h1 class="text-2xl font-bold mb-6 dark:text-white">管理后台</h1>
 
-    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5 mb-6">
-      <label class="block text-sm font-medium text-gray-700 mb-1">Admin Key</label>
+    <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 mb-6">
+      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Admin Key</label>
       <input
         v-model="adminKey"
         type="password"
-        class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
+        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white dark:bg-gray-800 dark:text-gray-100"
         placeholder="输入 Admin Key 以解锁管理功能"
       />
     </div>
 
-    <div v-if="!authenticated" class="text-center py-8 text-gray-400 text-sm">
+    <div v-if="!authenticated" class="text-center py-8 text-gray-400 dark:text-gray-500 text-sm">
       请输入上方 Admin Key 以查看和修改配置
     </div>
 
     <template v-if="authenticated">
       <!-- Tab bar -->
-      <div class="flex flex-wrap gap-1 mb-6 border-b border-gray-200">
+      <div class="flex flex-wrap gap-1 mb-6 border-b border-gray-200 dark:border-gray-700">
         <button
           v-for="tab in tabs"
           :key="tab.key"
           class="px-4 py-2 text-sm rounded-t-lg -mb-px border-b-2"
-          :class="activeTab === tab.key ? 'border-primary-600 text-primary-700 font-medium' : 'border-transparent text-gray-500 hover:text-gray-800'"
+          :class="activeTab === tab.key ? 'border-primary-600 text-primary-700 dark:text-primary-400 font-medium' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'"
           @click="switchTab(tab.key)"
         >{{ tab.label }}</button>
       </div>
 
-      <div v-if="globalStatus" class="mb-4 px-4 py-2 rounded-lg text-sm" :class="globalStatusOk ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-50 text-red-700 border border-red-200'">
+      <div v-if="globalStatus" class="mb-4 px-4 py-2 rounded-lg text-sm" :class="globalStatusOk ? 'bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 border border-green-200 dark:border-green-800' : 'bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 border border-red-200 dark:border-red-800'">
         {{ globalStatus }}
       </div>
 
       <!-- ══════════════ 概览 ══════════════ -->
       <div v-if="activeTab === 'overview'">
         <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
-          <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
-            <p class="text-2xl font-bold text-primary-600">{{ overviewStats?.total_chunks ?? "—" }}</p>
-            <p class="text-xs text-gray-400 mt-1">向量块总数</p>
+          <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5">
+            <p class="text-2xl font-bold text-primary-600 dark:text-primary-400">{{ overviewStats?.total_chunks ?? "—" }}</p>
+            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">向量块总数</p>
           </div>
-          <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
-            <p class="text-2xl font-bold text-primary-600">{{ totalArticlesCount }}</p>
-            <p class="text-xs text-gray-400 mt-1">已入库文章</p>
+          <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5">
+            <p class="text-2xl font-bold text-primary-600 dark:text-primary-400">{{ totalArticlesCount }}</p>
+            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">已入库文章</p>
           </div>
-          <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
-            <p class="text-2xl font-bold text-primary-600">{{ overviewStats?.searches_today ?? "—" }}</p>
-            <p class="text-xs text-gray-400 mt-1">今日搜索次数</p>
+          <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5">
+            <p class="text-2xl font-bold text-primary-600 dark:text-primary-400">{{ overviewStats?.searches_today ?? "—" }}</p>
+            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">今日搜索次数</p>
           </div>
         </div>
-        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
+        <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5">
           <div class="flex items-center justify-between mb-3">
-            <h2 class="text-sm font-semibold">知识树概览</h2>
-            <button class="text-xs text-primary-600 hover:underline" @click="loadTree">刷新</button>
+            <h2 class="text-sm font-semibold dark:text-gray-200">知识树概览</h2>
+            <button class="text-xs text-primary-600 dark:text-primary-400 hover:underline" @click="loadTree">刷新</button>
           </div>
-          <div v-if="treeLoading" class="text-center py-6 text-gray-400 text-sm">加载中…</div>
-          <div v-else-if="treeData.length === 0" class="text-center py-6 text-gray-400 text-sm">暂无数据</div>
+          <div v-if="treeLoading" class="text-center py-6 text-gray-400 dark:text-gray-500 text-sm">加载中…</div>
+          <div v-else-if="treeData.length === 0" class="text-center py-6 text-gray-400 dark:text-gray-500 text-sm">暂无数据</div>
           <div v-else class="text-sm space-y-1 max-h-72 overflow-y-auto">
-            <div v-for="row in overviewRows" :key="row.key" :style="{ paddingLeft: `${row.depth * 14}px` }" class="text-gray-600">
+            <div v-for="row in overviewRows" :key="row.key" :style="{ paddingLeft: `${row.depth * 14}px` }" class="text-gray-600 dark:text-gray-400">
               <template v-if="row.isArticle">📄 {{ row.node.title || row.node.name }}</template>
-              <template v-else><span class="font-medium text-gray-800">{{ nodeIcon(row.node.type) }} {{ row.node.name }}</span> <span class="text-xs text-gray-400">({{ row.count }})</span></template>
+              <template v-else><span class="font-medium text-gray-800 dark:text-gray-200">{{ nodeIcon(row.node.type) }} {{ row.node.name }}</span> <span class="text-xs text-gray-400 dark:text-gray-500">({{ row.count }})</span></template>
             </div>
           </div>
         </div>
@@ -66,48 +66,48 @@
 
       <!-- ══════════════ 知识树管理 ══════════════ -->
       <div v-if="activeTab === 'tree'" class="grid grid-cols-1 lg:grid-cols-[360px_1fr] gap-4 items-start">
-        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
-          <div class="flex items-center gap-1 p-2 border-b border-gray-200 flex-wrap">
-            <button class="px-2 py-1 text-xs border border-gray-200 rounded disabled:opacity-40" :disabled="!selectedNode" @click="teRename">重命名</button>
-            <button class="px-2 py-1 text-xs border border-gray-200 rounded disabled:opacity-40" :disabled="!selectedNode || selectedNode.type === 'article'" @click="teAddChild">新建子节点</button>
-            <button class="px-2 py-1 text-xs border border-gray-200 rounded disabled:opacity-40" :disabled="!selectedNode" @click="teMove(-1)" title="上移（仅本地展示，不持久化）">↑</button>
-            <button class="px-2 py-1 text-xs border border-gray-200 rounded disabled:opacity-40" :disabled="!selectedNode" @click="teMove(1)" title="下移（仅本地展示，不持久化）">↓</button>
-            <button class="ml-auto px-2 py-1 text-xs border border-red-200 text-red-600 rounded disabled:opacity-40" :disabled="!selectedNode" @click="teDelete">删除</button>
+        <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
+          <div class="flex items-center gap-1 p-2 border-b border-gray-200 dark:border-gray-700 flex-wrap">
+            <button class="px-2 py-1 text-xs border border-gray-200 dark:border-gray-600 dark:text-gray-300 rounded disabled:opacity-40" :disabled="!selectedNode" @click="teRename">重命名</button>
+            <button class="px-2 py-1 text-xs border border-gray-200 dark:border-gray-600 dark:text-gray-300 rounded disabled:opacity-40" :disabled="!selectedNode || selectedNode.type === 'article'" @click="teAddChild">新建子节点</button>
+            <button class="px-2 py-1 text-xs border border-gray-200 dark:border-gray-600 dark:text-gray-300 rounded disabled:opacity-40" :disabled="!selectedNode" @click="teMove(-1)" title="上移（仅本地展示，不持久化）">↑</button>
+            <button class="px-2 py-1 text-xs border border-gray-200 dark:border-gray-600 dark:text-gray-300 rounded disabled:opacity-40" :disabled="!selectedNode" @click="teMove(1)" title="下移（仅本地展示，不持久化）">↓</button>
+            <button class="ml-auto px-2 py-1 text-xs border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 rounded disabled:opacity-40" :disabled="!selectedNode" @click="teDelete">删除</button>
           </div>
           <div class="max-h-[560px] overflow-y-auto">
-            <div v-if="treeLoading" class="text-center py-8 text-gray-400 text-sm">加载中…</div>
-            <div v-else-if="treeData.length === 0" class="text-center py-8 text-gray-400 text-sm">暂无数据</div>
+            <div v-if="treeLoading" class="text-center py-8 text-gray-400 dark:text-gray-500 text-sm">加载中…</div>
+            <div v-else-if="treeData.length === 0" class="text-center py-8 text-gray-400 dark:text-gray-500 text-sm">暂无数据</div>
             <template v-for="site in treeData" :key="site.name">
               <template v-for="row in rowsForNode(site)" :key="row.key">
                 <div
                   class="flex items-center gap-2 py-1.5 px-2 text-sm cursor-pointer border-l-2"
-                  :class="selectedKey === row.key ? 'bg-primary-50 border-primary-500 text-primary-700' : 'border-transparent hover:bg-gray-50'"
+                  :class="selectedKey === row.key ? 'bg-primary-50 dark:bg-primary-900/30 border-primary-500 text-primary-700 dark:text-primary-300' : 'border-transparent hover:bg-gray-50 dark:hover:bg-gray-800 dark:text-gray-300'"
                   :style="{ paddingLeft: `${8 + row.depth * 14}px` }"
                   @click="selectRow(row)"
                 >
-                  <svg v-if="!row.isArticle" class="w-3 h-3 text-gray-400 shrink-0 transition-transform" :class="{ 'rotate-90': expandedKeys.has(row.key) }" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" @click.stop="toggleExpanded(row.key)"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6" /></svg>
+                  <svg v-if="!row.isArticle" class="w-3 h-3 text-gray-400 dark:text-gray-500 shrink-0 transition-transform" :class="{ 'rotate-90': expandedKeys.has(row.key) }" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" @click.stop="toggleExpanded(row.key)"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6" /></svg>
                   <span v-else class="w-3 shrink-0"></span>
-                  <span class="truncate">{{ row.isArticle ? '📄 ' + (row.node.title || row.node.name) : nodeIcon(row.node.type) + ' ' + row.node.name }}</span>
-                  <span v-if="!row.isArticle" class="text-xs text-gray-400 shrink-0 ml-auto">{{ row.count }}项</span>
+                  <span class="truncate dark:text-gray-300">{{ row.isArticle ? '📄 ' + (row.node.title || row.node.name) : nodeIcon(row.node.type) + ' ' + row.node.name }}</span>
+                  <span v-if="!row.isArticle" class="text-xs text-gray-400 dark:text-gray-500 shrink-0 ml-auto">{{ row.count }}项</span>
                 </div>
               </template>
             </template>
           </div>
         </div>
 
-        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
-          <div class="p-3 border-b border-gray-200 flex items-center gap-2 flex-wrap">
-            <span class="text-sm font-medium">{{ selectedNode ? `「${selectedNode.name || selectedNode.title}」的文章` : '从左侧选择节点以查看文章' }}</span>
-            <span class="text-xs text-gray-400">{{ panelArticles.length ? panelArticles.length + ' 篇' : '' }}</span>
-            <input v-if="panelArticles.length" v-model="panelSearch" placeholder="标题搜索…" class="ml-auto px-2 py-1 text-xs border border-gray-200 rounded" />
-            <button v-if="panelChecked.size" class="px-2 py-1 text-xs border border-red-200 text-red-600 rounded" @click="batchDeleteChecked">批量删除（{{ panelChecked.size }}）</button>
+        <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
+          <div class="p-3 border-b border-gray-200 dark:border-gray-700 flex items-center gap-2 flex-wrap">
+            <span class="text-sm font-medium dark:text-gray-200">{{ selectedNode ? `「${selectedNode.name || selectedNode.title}」的文章` : '从左侧选择节点以查看文章' }}</span>
+            <span class="text-xs text-gray-400 dark:text-gray-500">{{ panelArticles.length ? panelArticles.length + ' 篇' : '' }}</span>
+            <input v-if="panelArticles.length" v-model="panelSearch" placeholder="标题搜索…" class="ml-auto px-2 py-1 text-xs border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-gray-800 dark:text-gray-200" />
+            <button v-if="panelChecked.size" class="px-2 py-1 text-xs border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 rounded" @click="batchDeleteChecked">批量删除（{{ panelChecked.size }}）</button>
           </div>
-          <div v-if="!selectedNode" class="text-center py-16 text-gray-400 text-sm">请选择左侧节点</div>
-          <div v-else-if="filteredPanelArticles.length === 0" class="text-center py-16 text-gray-400 text-sm">暂无文章</div>
+          <div v-if="!selectedNode" class="text-center py-16 text-gray-400 dark:text-gray-500 text-sm">请选择左侧节点</div>
+          <div v-else-if="filteredPanelArticles.length === 0" class="text-center py-16 text-gray-400 dark:text-gray-500 text-sm">暂无文章</div>
           <div v-else class="overflow-x-auto">
             <table class="w-full text-sm">
               <thead>
-                <tr class="text-xs text-gray-400 border-b border-gray-100">
+                <tr class="text-xs text-gray-400 dark:text-gray-500 border-b border-gray-100 dark:border-gray-800">
                   <th class="p-2 w-8"><input type="checkbox" :checked="allChecked" @change="toggleAllChecked($event)" /></th>
                   <th class="p-2 text-left">标题</th>
                   <th class="p-2 text-left">来源 / 章节</th>
@@ -116,18 +116,18 @@
                 </tr>
               </thead>
               <tbody>
-                <tr v-for="a in filteredPanelArticles" :key="a.article_id" class="border-b border-gray-50 hover:bg-gray-50">
+                <tr v-for="a in filteredPanelArticles" :key="a.article_id" class="border-b border-gray-50 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800">
                   <td class="p-2"><input type="checkbox" :checked="panelChecked.has(a.article_id)" @change="toggleChecked(a.article_id)" /></td>
-                  <td class="p-2 max-w-[200px] truncate" :title="a.title">{{ a.title }}</td>
-                  <td class="p-2 text-xs text-gray-500 max-w-[160px] truncate">{{ a.source_site || '—' }} / {{ a.chapter || '—' }}</td>
+                  <td class="p-2 max-w-[200px] truncate dark:text-gray-200" :title="a.title">{{ a.title }}</td>
+                  <td class="p-2 text-xs text-gray-500 dark:text-gray-400 max-w-[160px] truncate">{{ a.source_site || '—' }} / {{ a.chapter || '—' }}</td>
                   <td class="p-2 text-xs">
                     <span v-for="f in a.flags || []" :key="f" class="inline-block px-1.5 py-0.5 mr-1 rounded text-[10px]" :class="flagBadgeClass(f)">{{ flagLabel(f) }}</span>
                   </td>
                   <td class="p-2">
                     <div class="flex gap-2 items-center">
-                      <a v-if="a.url" :href="a.url" target="_blank" class="text-xs text-primary-600 hover:underline">原文</a>
-                      <button class="text-xs text-gray-500 hover:underline" @click="openEditModal(a)">编辑</button>
-                      <button class="text-xs text-red-500 hover:underline" @click="singleDeleteArticle(a.article_id)">删除</button>
+                      <a v-if="a.url" :href="a.url" target="_blank" class="text-xs text-primary-600 dark:text-primary-400 hover:underline">原文</a>
+                      <button class="text-xs text-gray-500 dark:text-gray-400 hover:underline" @click="openEditModal(a)">编辑</button>
+                      <button class="text-xs text-red-500 dark:text-red-400 hover:underline" @click="singleDeleteArticle(a.article_id)">删除</button>
                     </div>
                   </td>
                 </tr>
@@ -138,66 +138,66 @@
       </div>
 
       <!-- ══════════════ 录入单篇 ══════════════ -->
-      <div v-if="activeTab === 'single'" class="bg-white rounded-xl shadow-sm border border-gray-200 p-5 space-y-3 max-w-2xl">
-        <div><label class="block text-xs font-medium text-gray-500 mb-1">文章标题 *</label><input v-model="singleForm.title" class="w-full px-3 py-1.5 border border-gray-300 rounded-md text-sm" /></div>
-        <div><label class="block text-xs font-medium text-gray-500 mb-1">原文 URL</label><input v-model="singleForm.url" class="w-full px-3 py-1.5 border border-gray-300 rounded-md text-sm" /></div>
+      <div v-if="activeTab === 'single'" class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 space-y-3 max-w-2xl">
+        <div><label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">文章标题 *</label><input v-model="singleForm.title" class="w-full px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-800 dark:text-gray-100" /></div>
+        <div><label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">原文 URL</label><input v-model="singleForm.url" class="w-full px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-800 dark:text-gray-100" /></div>
         <div class="grid grid-cols-2 gap-3">
-          <div><label class="block text-xs font-medium text-gray-500 mb-1">来源站点</label><input v-model="singleForm.source_site" class="w-full px-3 py-1.5 border border-gray-300 rounded-md text-sm" /></div>
-          <div><label class="block text-xs font-medium text-gray-500 mb-1">顶层分类</label><input v-model="singleForm.category" class="w-full px-3 py-1.5 border border-gray-300 rounded-md text-sm" /></div>
+          <div><label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">来源站点</label><input v-model="singleForm.source_site" class="w-full px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-800 dark:text-gray-100" /></div>
+          <div><label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">顶层分类</label><input v-model="singleForm.category" class="w-full px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-800 dark:text-gray-100" /></div>
         </div>
-        <div><label class="block text-xs font-medium text-gray-500 mb-1">章节路径（斜杠分隔）</label><input v-model="singleForm.chapter" placeholder="如：药物/HRT/雌激素药物" class="w-full px-3 py-1.5 border border-gray-300 rounded-md text-sm" /></div>
-        <div><label class="block text-xs font-medium text-gray-500 mb-1">标签（逗号分隔）</label><input v-model="singleForm.tags" class="w-full px-3 py-1.5 border border-gray-300 rounded-md text-sm" /></div>
+        <div><label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">章节路径（斜杠分隔）</label><input v-model="singleForm.chapter" placeholder="如：药物/HRT/雌激素药物" class="w-full px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500" /></div>
+        <div><label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">标签（逗号分隔）</label><input v-model="singleForm.tags" class="w-full px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-800 dark:text-gray-100" /></div>
         <div>
-          <label class="block text-xs font-medium text-gray-500 mb-1">内容标记</label>
+          <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">内容标记</label>
           <div class="flex gap-2 flex-wrap">
-            <label v-for="f in FLAGS" :key="f" class="flex items-center gap-1 text-xs px-2 py-1 border rounded-full cursor-pointer" :class="singleForm.flags.includes(f) ? 'border-primary-500 bg-primary-50 text-primary-700' : 'border-gray-200 text-gray-500'">
+            <label v-for="f in FLAGS" :key="f" class="flex items-center gap-1 text-xs px-2 py-1 border rounded-full cursor-pointer" :class="singleForm.flags.includes(f) ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'border-gray-200 dark:border-gray-600 text-gray-500 dark:text-gray-400'">
               <input type="checkbox" class="hidden" :checked="singleForm.flags.includes(f)" @change="toggleArrItem(singleForm.flags, f)" />{{ flagLabel(f) }}
             </label>
           </div>
         </div>
-        <div><label class="block text-xs font-medium text-gray-500 mb-1">正文内容（Markdown）*</label><textarea v-model="singleForm.content" rows="10" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm font-mono"></textarea></div>
+        <div><label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">正文内容（Markdown）*</label><textarea v-model="singleForm.content" rows="10" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-mono bg-white dark:bg-gray-800 dark:text-gray-100"></textarea></div>
         <div class="flex items-center gap-3">
           <button class="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm hover:bg-primary-700 disabled:opacity-50" :disabled="singleSubmitting" @click="submitSingle">{{ singleSubmitting ? '提交中…' : '提交入库' }}</button>
-          <span v-if="singleResult" class="text-sm" :class="singleOk ? 'text-green-600' : 'text-red-600'">{{ singleResult }}</span>
+          <span v-if="singleResult" class="text-sm" :class="singleOk ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'">{{ singleResult }}</span>
         </div>
       </div>
 
       <!-- ══════════════ 批量上传 ══════════════ -->
       <div v-if="activeTab === 'batch'" class="space-y-4 max-w-3xl">
-        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
-          <h2 class="text-sm font-semibold mb-3">默认元数据（文件无 frontmatter / 非文件夹上传时使用）</h2>
+        <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5">
+          <h2 class="text-sm font-semibold mb-3 dark:text-gray-200">默认元数据（文件无 frontmatter / 非文件夹上传时使用）</h2>
           <div class="grid grid-cols-2 gap-3 mb-3">
-            <div><label class="block text-xs font-medium text-gray-500 mb-1">来源站点</label><input v-model="batchDefaults.source_site" class="w-full px-3 py-1.5 border border-gray-300 rounded-md text-sm" /></div>
-            <div><label class="block text-xs font-medium text-gray-500 mb-1">顶层分类</label><input v-model="batchDefaults.category" class="w-full px-3 py-1.5 border border-gray-300 rounded-md text-sm" /></div>
+            <div><label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">来源站点</label><input v-model="batchDefaults.source_site" class="w-full px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-800 dark:text-gray-100" /></div>
+            <div><label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">顶层分类</label><input v-model="batchDefaults.category" class="w-full px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-800 dark:text-gray-100" /></div>
           </div>
           <div>
-            <label class="block text-xs font-medium text-gray-500 mb-1">默认内容标记</label>
+            <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">默认内容标记</label>
             <div class="flex gap-2 flex-wrap">
-              <label v-for="f in FLAGS" :key="f" class="flex items-center gap-1 text-xs px-2 py-1 border rounded-full cursor-pointer" :class="batchDefaults.flags.includes(f) ? 'border-primary-500 bg-primary-50 text-primary-700' : 'border-gray-200 text-gray-500'">
+              <label v-for="f in FLAGS" :key="f" class="flex items-center gap-1 text-xs px-2 py-1 border rounded-full cursor-pointer" :class="batchDefaults.flags.includes(f) ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'border-gray-200 dark:border-gray-600 text-gray-500 dark:text-gray-400'">
                 <input type="checkbox" class="hidden" :checked="batchDefaults.flags.includes(f)" @change="toggleArrItem(batchDefaults.flags, f)" />{{ flagLabel(f) }}
               </label>
             </div>
           </div>
-          <p class="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded-md px-3 py-2 mt-3">
+          <p class="text-xs text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-md px-3 py-2 mt-3">
             文件夹上传时，目录层级自动映射为知识树：<code class="text-[11px]">来源站点/分类/章节/文章.md</code> → source_site / category / chapter。文件内 frontmatter（--- 包裹的 YAML）优先于以上默认值和目录推断。
           </p>
         </div>
 
-        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
+        <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5">
           <div class="grid grid-cols-2 gap-3 mb-3">
-            <label class="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center cursor-pointer hover:border-primary-400 hover:bg-primary-50/40 text-sm text-gray-500">
+            <label class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-6 text-center cursor-pointer hover:border-primary-400 hover:bg-primary-50/40 dark:hover:bg-primary-900/20 text-sm text-gray-500 dark:text-gray-400">
               选择 .md 文件（支持多选）
               <input type="file" multiple accept=".md" class="hidden" @change="onFileSelect" />
             </label>
-            <label class="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center cursor-pointer hover:border-primary-400 hover:bg-primary-50/40 text-sm text-gray-500">
+            <label class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-6 text-center cursor-pointer hover:border-primary-400 hover:bg-primary-50/40 dark:hover:bg-primary-900/20 text-sm text-gray-500 dark:text-gray-400">
               选择文件夹（自动扫描 .md）
               <input type="file" webkitdirectory multiple class="hidden" @change="onFolderSelect" />
             </label>
           </div>
 
           <div v-if="batchFiles.length" class="space-y-1.5 mb-3 max-h-72 overflow-y-auto">
-            <div v-for="f in batchFiles" :key="f.relPath" class="flex items-center gap-2 bg-gray-50 border border-gray-200 rounded-md px-3 py-1.5 text-xs">
-              <span class="flex-1 truncate font-medium">{{ f.file.name }}</span>
+            <div v-for="f in batchFiles" :key="f.relPath" class="flex items-center gap-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md px-3 py-1.5 text-xs">
+              <span class="flex-1 truncate font-medium dark:text-gray-200">{{ f.file.name }}</span>
               <span class="text-gray-400 truncate max-w-[220px]">{{ f.relPath }}</span>
               <span class="px-2 py-0.5 rounded shrink-0" :class="fstatusClass(f.status)">{{ fstatusLabel(f.status) }}</span>
             </div>
@@ -205,8 +205,8 @@
 
           <div v-if="batchFiles.length" class="flex items-center gap-2">
             <button class="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm hover:bg-primary-700 disabled:opacity-50" :disabled="batchRunning" @click="startBatch">{{ batchRunning ? '入库中…' : '开始入库' }}</button>
-            <button class="px-3 py-2 text-sm text-gray-500 hover:underline" @click="clearFiles">清空列表</button>
-            <span class="text-xs text-gray-400">{{ batchProgress }}</span>
+            <button class="px-3 py-2 text-sm text-gray-500 dark:text-gray-400 hover:underline" @click="clearFiles">清空列表</button>
+            <span class="text-xs text-gray-400 dark:text-gray-500">{{ batchProgress }}</span>
           </div>
 
           <div v-if="batchLog.length" class="bg-gray-900 rounded-lg p-3 mt-3 font-mono text-[11px] leading-relaxed max-h-48 overflow-y-auto">
@@ -217,73 +217,73 @@
 
       <!-- ══════════════ 缓存管理 ══════════════ -->
       <div v-if="activeTab === 'cache'">
-        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5 mb-6">
+        <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 mb-6">
           <div class="flex items-center justify-between mb-4">
-            <h2 class="text-lg font-semibold">高频词缓存（长期记忆）</h2>
-            <button class="px-3 py-1 text-xs border border-gray-300 rounded-md text-gray-500 hover:bg-gray-50" @click="loadKeywords">刷新</button>
+            <h2 class="text-lg font-semibold dark:text-gray-200">高频词缓存（长期记忆）</h2>
+            <button class="px-3 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800" @click="loadKeywords">刷新</button>
           </div>
-          <div class="flex flex-wrap items-center gap-2 mb-4 p-3 bg-gray-50 rounded-lg">
-            <input v-model="newKeyword" placeholder="关键词（如 HRT）" class="flex-1 min-w-[120px] px-3 py-1.5 border border-gray-300 rounded-md text-sm" />
-            <input v-model="newExpansionsInput" placeholder="扩展词（逗号分隔）" class="flex-[2] min-w-[200px] px-3 py-1.5 border border-gray-300 rounded-md text-sm" />
+          <div class="flex flex-wrap items-center gap-2 mb-4 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+            <input v-model="newKeyword" placeholder="关键词（如 HRT）" class="flex-1 min-w-[120px] px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500" />
+            <input v-model="newExpansionsInput" placeholder="扩展词（逗号分隔）" class="flex-[2] min-w-[200px] px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500" />
             <button class="px-4 py-1.5 bg-primary-600 text-white rounded-md text-sm hover:bg-primary-700 disabled:opacity-50" :disabled="!newKeyword.trim() || !newExpansionsInput.trim()" @click="addKeyword">{{ editingKeyword ? "更新" : "添加" }}</button>
-            <button v-if="editingKeyword" class="px-3 py-1.5 border border-gray-300 rounded-md text-sm text-gray-500 hover:bg-gray-50" @click="cancelEdit">取消</button>
+            <button v-if="editingKeyword" class="px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800" @click="cancelEdit">取消</button>
           </div>
-          <div v-if="keywordsLoading" class="text-center py-4 text-gray-400 text-sm">加载中…</div>
-          <div v-else-if="Object.keys(keywords).length === 0" class="text-center py-4 text-gray-400 text-sm">暂无高频词缓存，添加后搜索将优先使用预设扩展词</div>
+          <div v-if="keywordsLoading" class="text-center py-4 text-gray-400 dark:text-gray-500 text-sm">加载中…</div>
+          <div v-else-if="Object.keys(keywords).length === 0" class="text-center py-4 text-gray-400 dark:text-gray-500 text-sm">暂无高频词缓存，添加后搜索将优先使用预设扩展词</div>
           <div v-else class="space-y-2">
-            <div v-for="(entry, key) in keywords" :key="key" class="flex items-start gap-2 p-3 border border-gray-100 rounded-lg hover:bg-gray-50">
+            <div v-for="(entry, key) in keywords" :key="key" class="flex items-start gap-2 p-3 border border-gray-100 dark:border-gray-800 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
               <div class="flex-1 min-w-0">
-                <span class="font-mono text-sm font-medium text-gray-800">{{ key }}</span>
-                <div class="text-xs text-gray-500 mt-1">↳ {{ entry.expansions.join("、") }}</div>
+                <span class="font-mono text-sm font-medium text-gray-800 dark:text-gray-200">{{ key }}</span>
+                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">↳ {{ entry.expansions.join("、") }}</div>
               </div>
               <div class="flex gap-1 shrink-0">
-                <button class="px-2 py-1 text-xs border border-gray-200 rounded text-gray-500 hover:bg-gray-100" @click="editKeyword(key as string, entry.expansions)">编辑</button>
-                <button class="px-2 py-1 text-xs border border-red-200 rounded text-red-500 hover:bg-red-50" @click="removeKeyword(key as string)">删除</button>
+                <button class="px-2 py-1 text-xs border border-gray-200 dark:border-gray-600 rounded text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700" @click="editKeyword(key as string, entry.expansions)">编辑</button>
+                <button class="px-2 py-1 text-xs border border-red-200 dark:border-red-800 rounded text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20" @click="removeKeyword(key as string)">删除</button>
               </div>
             </div>
           </div>
         </div>
 
-        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
+        <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5">
           <div class="flex items-center justify-between">
-            <h2 class="text-lg font-semibold">短期缓存（内存）</h2>
-            <button class="px-3 py-1 text-xs border border-red-200 rounded-md text-red-500 hover:bg-red-50" @click="clearCache">清除全部</button>
+            <h2 class="text-lg font-semibold dark:text-gray-200">短期缓存（内存）</h2>
+            <button class="px-3 py-1 text-xs border border-red-200 dark:border-red-800 rounded-md text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20" @click="clearCache">清除全部</button>
           </div>
-          <p class="text-xs text-gray-400 mt-2">搜索结果自动缓存 5 分钟，重复搜索直接从内存返回</p>
+          <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">搜索结果自动缓存 5 分钟，重复搜索直接从内存返回</p>
         </div>
       </div>
 
       <!-- ══════════════ 系统配置 ══════════════ -->
       <div v-if="activeTab === 'settings'">
-        <div v-if="loading" class="text-center py-8 text-gray-400">加载配置…</div>
-        <div v-if="error" class="bg-red-50 border border-red-200 text-red-700 rounded-lg px-4 py-3 text-sm mb-4">{{ error }}</div>
+        <div v-if="loading" class="text-center py-8 text-gray-400 dark:text-gray-500">加载配置…</div>
+        <div v-if="error" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 rounded-lg px-4 py-3 text-sm mb-4">{{ error }}</div>
 
-        <div v-if="config" class="bg-white rounded-xl shadow-sm border border-gray-200 p-5 mb-6">
-          <h2 class="text-lg font-semibold mb-4">运行时配置</h2>
+        <div v-if="config" class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 mb-6">
+          <h2 class="text-lg font-semibold mb-4 dark:text-gray-200">运行时配置</h2>
           <div class="space-y-4">
             <div v-for="(val, key) in config" :key="key" class="flex items-center justify-between">
-              <span class="text-sm text-gray-600">{{ labelMap[key as string] ?? key }}</span>
-              <span v-if="typeof val === 'boolean'" class="text-sm"><span :class="val ? 'text-green-600' : 'text-gray-400'">{{ val ? "开启" : "关闭" }}</span></span>
-              <span v-else class="text-sm font-mono text-gray-800">{{ val }}</span>
+              <span class="text-sm text-gray-600 dark:text-gray-400">{{ labelMap[key as string] ?? key }}</span>
+              <span v-if="typeof val === 'boolean'" class="text-sm"><span :class="val ? 'text-green-600 dark:text-green-400' : 'text-gray-400 dark:text-gray-500'">{{ val ? "开启" : "关闭" }}</span></span>
+              <span v-else class="text-sm font-mono text-gray-800 dark:text-gray-200">{{ val }}</span>
             </div>
           </div>
         </div>
 
-        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5 mb-6">
-          <h2 class="text-lg font-semibold mb-4">修改配置</h2>
+        <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 mb-6">
+          <h2 class="text-lg font-semibold mb-4 dark:text-gray-200">修改配置</h2>
           <div class="space-y-3">
             <div v-for="field in editableFields" :key="field.key" class="flex items-center gap-3">
-              <label class="text-sm text-gray-600 w-28 shrink-0">{{ field.label }}</label>
-              <input v-if="field.type === 'text'" v-model="editForm[field.key]" class="flex-1 px-3 py-1.5 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-primary-400" />
-              <input v-else-if="field.type === 'number'" v-model.number="editForm[field.key]" type="number" class="flex-1 px-3 py-1.5 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-primary-400 w-24" />
-              <select v-else-if="field.type === 'boolean'" v-model="editForm[field.key]" class="px-3 py-1.5 border border-gray-300 rounded-md text-sm bg-white focus:outline-none focus:ring-1 focus:ring-primary-400">
+              <label class="text-sm text-gray-600 dark:text-gray-400 w-28 shrink-0">{{ field.label }}</label>
+              <input v-if="field.type === 'text'" v-model="editForm[field.key]" class="flex-1 px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-primary-400 bg-white dark:bg-gray-800 dark:text-gray-100" />
+              <input v-else-if="field.type === 'number'" v-model.number="editForm[field.key]" type="number" class="flex-1 px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-primary-400 w-24 bg-white dark:bg-gray-800 dark:text-gray-100" />
+              <select v-else-if="field.type === 'boolean'" v-model="editForm[field.key]" class="px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-800 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-primary-400">
                 <option :value="true">开启</option>
                 <option :value="false">关闭</option>
               </select>
             </div>
             <div class="pt-2">
               <button class="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm hover:bg-primary-700 disabled:opacity-50" :disabled="saving" @click="saveConfig">{{ saving ? "保存中…" : "保存配置" }}</button>
-              <span v-if="saved" class="text-green-600 text-sm ml-3">已保存</span>
+              <span v-if="saved" class="text-green-600 dark:text-green-400 text-sm ml-3">已保存</span>
             </div>
           </div>
         </div>
@@ -292,28 +292,28 @@
 
     <!-- 编辑文章 Modal -->
     <div v-if="editModal.open" class="fixed inset-0 bg-black/45 flex items-center justify-center z-50 p-4" @click.self="editModal.open = false">
-      <div class="bg-white rounded-xl p-6 w-full max-w-lg max-h-[90vh] overflow-y-auto">
-        <h3 class="text-lg font-bold mb-4">编辑文章</h3>
+      <div class="bg-white dark:bg-gray-900 rounded-xl p-6 w-full max-w-lg max-h-[90vh] overflow-y-auto">
+        <h3 class="text-lg font-bold mb-4 dark:text-gray-200">编辑文章</h3>
         <div class="space-y-3">
-          <div><label class="block text-xs font-medium text-gray-500 mb-1">标题</label><input v-model="editModal.title" class="w-full px-3 py-1.5 border border-gray-300 rounded-md text-sm" /></div>
-          <div><label class="block text-xs font-medium text-gray-500 mb-1">原文 URL</label><input v-model="editModal.url" class="w-full px-3 py-1.5 border border-gray-300 rounded-md text-sm" /></div>
+          <div><label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">标题</label><input v-model="editModal.title" class="w-full px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-800 dark:text-gray-100" /></div>
+          <div><label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">原文 URL</label><input v-model="editModal.url" class="w-full px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-800 dark:text-gray-100" /></div>
           <div class="grid grid-cols-2 gap-3">
-            <div><label class="block text-xs font-medium text-gray-500 mb-1">来源站点</label><input v-model="editModal.source_site" class="w-full px-3 py-1.5 border border-gray-300 rounded-md text-sm" /></div>
-            <div><label class="block text-xs font-medium text-gray-500 mb-1">分类</label><input v-model="editModal.category" class="w-full px-3 py-1.5 border border-gray-300 rounded-md text-sm" /></div>
+            <div><label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">来源站点</label><input v-model="editModal.source_site" class="w-full px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-800 dark:text-gray-100" /></div>
+            <div><label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">分类</label><input v-model="editModal.category" class="w-full px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-800 dark:text-gray-100" /></div>
           </div>
-          <div><label class="block text-xs font-medium text-gray-500 mb-1">章节路径</label><input v-model="editModal.chapter" class="w-full px-3 py-1.5 border border-gray-300 rounded-md text-sm" /></div>
-          <div><label class="block text-xs font-medium text-gray-500 mb-1">标签（逗号分隔）</label><input v-model="editModal.tags" class="w-full px-3 py-1.5 border border-gray-300 rounded-md text-sm" /></div>
+          <div><label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">章节路径</label><input v-model="editModal.chapter" class="w-full px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-800 dark:text-gray-100" /></div>
+          <div><label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">标签（逗号分隔）</label><input v-model="editModal.tags" class="w-full px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-800 dark:text-gray-100" /></div>
           <div>
-            <label class="block text-xs font-medium text-gray-500 mb-1">内容标记</label>
+            <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">内容标记</label>
             <div class="flex gap-2 flex-wrap">
-              <label v-for="f in FLAGS" :key="f" class="flex items-center gap-1 text-xs px-2 py-1 border rounded-full cursor-pointer" :class="editModal.flags.includes(f) ? 'border-primary-500 bg-primary-50 text-primary-700' : 'border-gray-200 text-gray-500'">
+              <label v-for="f in FLAGS" :key="f" class="flex items-center gap-1 text-xs px-2 py-1 border rounded-full cursor-pointer" :class="editModal.flags.includes(f) ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'border-gray-200 dark:border-gray-600 text-gray-500 dark:text-gray-400'">
                 <input type="checkbox" class="hidden" :checked="editModal.flags.includes(f)" @change="toggleArrItem(editModal.flags, f)" />{{ flagLabel(f) }}
               </label>
             </div>
           </div>
         </div>
         <div class="flex justify-end gap-2 mt-5">
-          <button class="px-4 py-2 text-sm border border-gray-300 rounded-lg text-gray-600" @click="editModal.open = false">取消</button>
+          <button class="px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg text-gray-600 dark:text-gray-400" @click="editModal.open = false">取消</button>
           <button class="px-4 py-2 text-sm bg-primary-600 text-white rounded-lg hover:bg-primary-700" @click="saveEditModal">保存</button>
         </div>
       </div>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 695f9bc..6aa7a9c 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -2,21 +2,52 @@
   <div class="search-page">
   <div class="max-w-4xl mx-auto px-4 py-8">
     <div class="mb-8">
-      <h1 class="text-2xl font-bold mb-2">跨性别信息聚合搜索</h1>
-      <p class="text-gray-500 text-sm">语义搜索引擎 — 支持关键词扩展与多维度筛选</p>
+      <h1 class="text-2xl font-bold mb-2 dark:text-white">跨性别信息聚合搜索</h1>
+      <p class="text-gray-500 dark:text-gray-400 text-sm">语义搜索引擎 — 支持关键词扩展与多维度筛选</p>
     </div>
 
-    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
+    <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4 mb-6">
       <div class="flex gap-2 mb-3">
-        <input
-          v-model="query"
-          type="text"
-          placeholder="输入搜索关键词或自然语言问题…"
-          class="flex-1 px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm"
-          @keydown.enter="doSearch"
-        />
+        <div class="flex-1 relative">
+          <input
+            ref="searchInput"
+            v-model="query"
+            type="text"
+            placeholder="输入搜索关键词或自然语言问题…"
+            class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm pr-9 bg-white dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500"
+            @keydown.enter="doSearch"
+            @focus="showHistory = true"
+            @blur="hideHistoryDelayed"
+          />
+          <button
+            v-if="query"
+            class="absolute right-2 top-1/2 -translate-y-1/2 w-5 h-5 rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center justify-center text-xs"
+            aria-label="清空搜索词"
+            @mousedown.prevent="query = ''; nextTick(() => searchInput?.focus())"
+          >✕</button>
+
+          <!-- Search history dropdown -->
+          <div
+            v-if="showHistory && searchHistory.length > 0 && !query"
+            class="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-10 overflow-hidden"
+          >
+            <div class="flex items-center justify-between px-3 py-2 border-b border-gray-100 dark:border-gray-700">
+              <span class="text-xs text-gray-400 dark:text-gray-500">最近搜索</span>
+              <button class="text-xs text-gray-400 hover:text-red-500 dark:hover:text-red-400" @mousedown.prevent="clearHistory">清空</button>
+            </div>
+            <button
+              v-for="(h, i) in searchHistory"
+              :key="i"
+              class="w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-2"
+              @mousedown.prevent="applyHistory(h)"
+            >
+              <Icon name="mdi:clock-outline" class="w-3.5 h-3.5 text-gray-400 dark:text-gray-500 shrink-0 -mt-px" />
+              <span class="truncate">{{ h }}</span>
+            </button>
+          </div>
+        </div>
         <button
-          class="px-6 py-2.5 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50 text-sm font-medium"
+          class="px-6 py-2.5 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50 text-sm font-medium shrink-0"
           :disabled="loading || !query.trim()"
           @click="doSearch"
         >
@@ -28,26 +59,26 @@
         <input
           v-model="filters.category"
           placeholder="分类（如 医疗）"
-          class="px-3 py-1.5 border border-gray-200 rounded-md text-xs w-28 focus:outline-none focus:ring-1 focus:ring-primary-400"
+          class="px-3 py-1.5 border border-gray-200 dark:border-gray-600 rounded-md text-xs w-28 focus:outline-none focus:ring-1 focus:ring-primary-400 bg-white dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500"
         />
         <input
           v-model="filters.source_site"
           placeholder="来源网站"
-          class="px-3 py-1.5 border border-gray-200 rounded-md text-xs w-32 focus:outline-none focus:ring-1 focus:ring-primary-400"
+          class="px-3 py-1.5 border border-gray-200 dark:border-gray-600 rounded-md text-xs w-32 focus:outline-none focus:ring-1 focus:ring-primary-400 bg-white dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500"
         />
         <input
           v-model="filters.chapter"
           placeholder="章节"
-          class="px-3 py-1.5 border border-gray-200 rounded-md text-xs w-28 focus:outline-none focus:ring-1 focus:ring-primary-400"
+          class="px-3 py-1.5 border border-gray-200 dark:border-gray-600 rounded-md text-xs w-28 focus:outline-none focus:ring-1 focus:ring-primary-400 bg-white dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500"
         />
         <input
           v-model="filters.tags"
           placeholder="标签（逗号分隔）"
-          class="px-3 py-1.5 border border-gray-200 rounded-md text-xs w-40 focus:outline-none focus:ring-1 focus:ring-primary-400"
+          class="px-3 py-1.5 border border-gray-200 dark:border-gray-600 rounded-md text-xs w-40 focus:outline-none focus:ring-1 focus:ring-primary-400 bg-white dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500"
         />
         <select
           v-model.number="filters.top_k"
-          class="px-2 py-1.5 border border-gray-200 rounded-md text-xs bg-white focus:outline-none focus:ring-1 focus:ring-primary-400"
+          class="px-2 py-1.5 border border-gray-200 dark:border-gray-600 rounded-md text-xs bg-white dark:bg-gray-800 dark:text-gray-200 focus:outline-none focus:ring-1 focus:ring-primary-400"
         >
           <option :value="5">5 条</option>
           <option :value="8">8 条</option>
@@ -57,53 +88,66 @@
       </div>
     </div>
 
-    <div v-if="error" class="bg-red-50 border border-red-200 text-red-700 rounded-lg px-4 py-3 mb-4 text-sm">
+    <div v-if="error" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 rounded-lg px-4 py-3 mb-4 text-sm">
       {{ error }}
     </div>
 
-    <div v-if="scopeLabel" class="mb-4 px-4 py-2 bg-blue-50 border border-blue-200 rounded-lg text-xs text-blue-700 flex items-center justify-between">
+    <div v-if="scopeLabel" class="mb-4 px-4 py-2 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg text-xs text-blue-700 dark:text-blue-400 flex items-center justify-between">
       <span>当前范围：<span class="font-medium">{{ scopeLabel }}</span>（来自知识树）</span>
       <button class="text-blue-500 hover:underline shrink-0 ml-3" @click="clearScope">清除</button>
     </div>
 
-    <div v-if="expandedQuery && expandedQuery !== query" class="mb-4 px-4 py-2 bg-amber-50 border border-amber-200 rounded-lg text-xs text-amber-700">
+    <div v-if="expandedQuery && expandedQuery !== query" class="mb-4 px-4 py-2 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg text-xs text-amber-700 dark:text-amber-400">
       扩展搜索词：<span class="font-medium">{{ expandedQuery }}</span>
     </div>
 
     <div v-if="results.length > 0" class="space-y-4">
-      <p class="text-sm text-gray-400 mb-2">共 {{ results.length }} 条结果
-        <span class="ml-2 text-xs text-gray-300">本次搜索 {{ searchTimeText }}</span>
+      <p class="text-sm text-gray-400 dark:text-gray-500 mb-2">共 {{ results.length }} 条结果
+        <span class="ml-2 text-xs text-gray-300 dark:text-gray-600">本次搜索 {{ searchTimeText }}</span>
       </p>
       <div
         v-for="r in results"
         :key="r.article_id"
-        class="bg-white rounded-xl shadow-sm border border-gray-200 p-5 hover:shadow-md transition-shadow"
+        class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 hover:shadow-md transition-shadow"
       >
         <div class="flex items-start justify-between gap-3 mb-1">
-          <h3 class="text-base font-semibold text-gray-900 leading-snug">{{ r.title }}</h3>
-          <span class="shrink-0 text-xs font-mono text-gray-400">{{ (r.score * 100).toFixed(1) }}%</span>
+          <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 leading-snug">{{ r.title }}</h3>
+          <span class="shrink-0 text-xs font-mono text-gray-400 dark:text-gray-500">{{ (r.score * 100).toFixed(1) }}%</span>
         </div>
-        <p class="text-sm text-gray-600 leading-relaxed mb-2">{{ r.excerpt }}</p>
-        <div class="flex flex-wrap items-center gap-2 text-xs text-gray-400">
-          <span v-if="r.category" class="bg-blue-50 text-blue-600 px-2 py-0.5 rounded">{{ r.category }}</span>
-          <span v-if="r.source_site" class="bg-green-50 text-green-600 px-2 py-0.5 rounded">{{ r.source_site }}</span>
-          <span v-if="r.chapter" class="bg-purple-50 text-purple-600 px-2 py-0.5 rounded">{{ r.chapter }}</span>
-          <span v-for="t in r.tags" :key="t" class="bg-gray-100 text-gray-500 px-2 py-0.5 rounded">{{ t }}</span>
+        <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed mb-2">{{ r.excerpt }}</p>
+        <div class="flex flex-wrap items-center gap-2 text-xs">
+          <span v-if="r.category" class="bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 px-2 py-0.5 rounded">{{ r.category }}</span>
+          <span v-if="r.source_site" class="bg-green-50 dark:bg-green-900/30 text-green-600 dark:text-green-400 px-2 py-0.5 rounded">{{ r.source_site }}</span>
+          <span v-if="r.chapter" class="bg-purple-50 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 px-2 py-0.5 rounded">{{ r.chapter }}</span>
+          <span v-for="t in r.tags" :key="t" class="bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 px-2 py-0.5 rounded">{{ t }}</span>
           <span v-if="r.url" class="ml-auto">
-            <a :href="r.url" target="_blank" class="text-primary-600 hover:underline">打开原文</a>
+            <a :href="r.url" target="_blank" class="text-primary-600 dark:text-primary-400 hover:underline">打开原文</a>
           </span>
         </div>
       </div>
     </div>
 
-    <div v-if="!loading && query && results.length === 0 && !error" class="text-center py-16 text-gray-400">
+    <div v-if="!loading && query && results.length === 0 && !error" class="text-center py-16 text-gray-400 dark:text-gray-500">
       没有找到相关结果
     </div>
+
+    <!-- Scroll-to-top FAB -->
+    <Transition name="fab-fade">
+      <button
+        v-if="showScrollTop"
+        class="fixed bottom-6 right-6 w-10 h-10 bg-primary-600 hover:bg-primary-700 text-white rounded-full shadow-lg flex items-center justify-center z-40 transition-colors"
+        aria-label="回到顶部"
+        @click="scrollToTop"
+      >
+        <Icon name="mdi:chevron-up" class="w-5 h-5" />
+      </button>
+    </Transition>
   </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { nextTick } from "vue"
 const { search } = useApi()
 const query = ref("")
 const loading = ref(false)
@@ -111,6 +155,81 @@ const results = ref<any[]>([])
 const error = ref("")
 const expandedQuery = ref<string | null>(null)
 const searchTime = ref(0)
+const searchInput = ref<HTMLInputElement | null>(null)
+const showHistory = ref(false)
+const showScrollTop = ref(false)
+let hideHistoryTimer: ReturnType<typeof setTimeout> | null = null
+
+// Search history (last 5, from localStorage)
+const HISTORY_KEY = "trans-search-history"
+const searchHistory = ref<string[]>([])
+
+function loadHistory() {
+if (import.meta.server) return
+  try {
+    const raw = localStorage.getItem(HISTORY_KEY)
+    if (raw) {
+      const parsed = JSON.parse(raw)
+      // 数值只保留字符串
+      if (Array.isArray(parsed)) {
+        searchHistory.value = parsed.filter((item): item is string => typeof item === 'string')
+      }
+    }
+  } catch { /* ignore */ }
+}
+
+function saveHistory(q: string) {
+  if (import.meta.server) return
+  const trimmed = q.trim()
+  if (!trimmed) return
+  searchHistory.value = [trimmed, ...searchHistory.value.filter(h => h !== trimmed)].slice(0, 5)
+  localStorage.setItem(HISTORY_KEY, JSON.stringify(searchHistory.value))
+}
+
+function applyHistory(h: string) {
+  query.value = h
+  showHistory.value = false
+  doSearch()
+}
+
+function clearHistory() {
+  searchHistory.value = []
+  localStorage.removeItem(HISTORY_KEY)
+  showHistory.value = false
+}
+
+function hideHistoryDelayed() {
+  if (hideHistoryTimer) {
+    clearTimeout(hideHistoryTimer)
+  }
+  hideHistoryTimer = setTimeout(() => { 
+    showHistory.value = false 
+  }, 200)
+}
+
+onBeforeUnmount(() => {
+  if (hideHistoryTimer) {
+    clearTimeout(hideHistoryTimer)
+    hideHistoryTimer = null
+  }
+})
+
+// Scroll-to-top
+function onScroll() {
+  showScrollTop.value = window.scrollY > 400
+}
+function scrollToTop() {
+  window.scrollTo({ top: 0, behavior: "smooth" })
+}
+
+onMounted(() => {
+  loadHistory()
+  window.addEventListener("scroll", onScroll, { passive: true })
+})
+onUnmounted(() => {
+  window.removeEventListener("scroll", onScroll)
+})
+
 const searchTimeText = computed(() => {
   const ms = searchTime.value
   if (ms < 1000) return `${ms} ms`
@@ -161,6 +280,8 @@ async function doSearch() {
   results.value = []
   expandedQuery.value = null
   searchTime.value = 0
+  showHistory.value = false
+  saveHistory(q)
   const start = performance.now()
   try {
     const res = await search({
@@ -201,4 +322,15 @@ async function doSearch() {
   .search-page :deep(.w-40) { width: auto; }
   .search-page :deep(.p-5) { padding: 14px; }
 }
+
+/* Scroll-to-top FAB animation */
+.fab-fade-enter-active,
+.fab-fade-leave-active {
+  transition: all 0.2s ease;
+}
+.fab-fade-enter-from,
+.fab-fade-leave-to {
+  opacity: 0;
+  transform: translateY(12px);
+}
 </style>
diff --git a/frontend/pages/stats.vue b/frontend/pages/stats.vue
index f8c8317..651b9fc 100644
--- a/frontend/pages/stats.vue
+++ b/frontend/pages/stats.vue
@@ -1,56 +1,56 @@
 <template>
   <div class="max-w-4xl mx-auto px-4 py-8">
-    <h1 class="text-2xl font-bold mb-6">数据库统计</h1>
+    <h1 class="text-2xl font-bold mb-6 dark:text-white">数据库统计</h1>
 
-    <div v-if="loading" class="text-center py-16 text-gray-400">加载中…</div>
-    <div v-if="error" class="bg-red-50 border border-red-200 text-red-700 rounded-lg px-4 py-3 text-sm mb-4">{{ error }}</div>
+    <div v-if="loading" class="text-center py-16 text-gray-400 dark:text-gray-500">加载中…</div>
+    <div v-if="error" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 rounded-lg px-4 py-3 text-sm mb-4">{{ error }}</div>
 
     <div v-if="stats" class="grid grid-cols-2 md:grid-cols-3 gap-4">
-      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
-        <p class="text-2xl font-bold text-primary-600">{{ stats.searches_today ?? "—" }}</p>
-        <p class="text-xs text-gray-400 mt-1">今日搜索次数</p>
+      <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5">
+        <p class="text-2xl font-bold text-primary-600 dark:text-primary-400">{{ stats.searches_today ?? "—" }}</p>
+        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">今日搜索次数</p>
       </div>
-      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
-        <p class="text-2xl font-bold text-primary-600">{{ stats.searches_this_month ?? "—" }}</p>
-        <p class="text-xs text-gray-400 mt-1">本月搜索次数</p>
+      <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5">
+        <p class="text-2xl font-bold text-primary-600 dark:text-primary-400">{{ stats.searches_this_month ?? "—" }}</p>
+        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">本月搜索次数</p>
       </div>
-      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
-        <p class="text-2xl font-bold text-primary-600">{{ stats.total_chunks ?? "—" }}</p>
-        <p class="text-xs text-gray-400 mt-1">总数据块数</p>
+      <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5">
+        <p class="text-2xl font-bold text-primary-600 dark:text-primary-400">{{ stats.total_chunks ?? "—" }}</p>
+        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">总数据块数</p>
       </div>
-      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
-        <p class="text-sm font-mono text-gray-800 break-all">{{ stats.embed_model ?? "—" }}</p>
-        <p class="text-xs text-gray-400 mt-1">Embedding 模型</p>
+      <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5">
+        <p class="text-sm font-mono text-gray-800 dark:text-gray-200 break-all">{{ stats.embed_model ?? "—" }}</p>
+        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Embedding 模型</p>
       </div>
-      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
-        <p class="text-sm font-mono text-gray-800">{{ stats.chat_model ?? "—" }}</p>
-        <p class="text-xs text-gray-400 mt-1">对话模型</p>
+      <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5">
+        <p class="text-sm font-mono text-gray-800 dark:text-gray-200">{{ stats.chat_model ?? "—" }}</p>
+        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">对话模型</p>
       </div>
-      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
-        <p class="text-lg font-bold" :class="stats.query_expand ? 'text-green-600' : 'text-gray-400'">
+      <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5">
+        <p class="text-lg font-bold" :class="stats.query_expand ? 'text-green-600 dark:text-green-400' : 'text-gray-400 dark:text-gray-500'">
           {{ stats.query_expand ? "开启" : "关闭" }}
         </p>
-        <p class="text-xs text-gray-400 mt-1">查询扩展</p>
+        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">查询扩展</p>
       </div>
-      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
-        <p class="text-lg font-bold" :class="stats.hybrid_search ? 'text-green-600' : 'text-gray-400'">
+      <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5">
+        <p class="text-lg font-bold" :class="stats.hybrid_search ? 'text-green-600 dark:text-green-400' : 'text-gray-400 dark:text-gray-500'">
           {{ stats.hybrid_search ? "开启" : "关闭" }}
         </p>
-        <p class="text-xs text-gray-400 mt-1">混合搜索</p>
+        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">混合搜索</p>
       </div>
-      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
-        <p class="text-sm text-gray-800">{{ stats.chunk_size ?? "—" }}</p>
-        <p class="text-xs text-gray-400 mt-1">分块大小</p>
+      <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5">
+        <p class="text-sm text-gray-800 dark:text-gray-200">{{ stats.chunk_size ?? "—" }}</p>
+        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">分块大小</p>
       </div>
-      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
-        <p class="text-sm font-mono text-gray-800 break-all">{{ stats.rerank_model ?? "—" }}</p>
-        <p class="text-xs text-gray-400 mt-1">Rerank 模型</p>
+      <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5">
+        <p class="text-sm font-mono text-gray-800 dark:text-gray-200 break-all">{{ stats.rerank_model ?? "—" }}</p>
+        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Rerank 模型</p>
       </div>
-      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
-        <p class="text-lg font-bold" :class="stats.rerank_enabled ? 'text-green-600' : 'text-gray-400'">
+      <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5">
+        <p class="text-lg font-bold" :class="stats.rerank_enabled ? 'text-green-600 dark:text-green-400' : 'text-gray-400 dark:text-gray-500'">
           {{ stats.rerank_enabled ? "开启" : "关闭" }}
         </p>
-        <p class="text-xs text-gray-400 mt-1">Rerank 重排</p>
+        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Rerank 重排</p>
       </div>
     </div>
   </div>
diff --git a/frontend/pages/tree.vue b/frontend/pages/tree.vue
index 74404ed..44cd38f 100644
--- a/frontend/pages/tree.vue
+++ b/frontend/pages/tree.vue
@@ -1,27 +1,28 @@
 <template>
   <div class="max-w-5xl mx-auto px-4 py-8">
     <div class="mb-6">
-      <h1 class="text-2xl font-bold mb-2">文章分类浏览</h1>
-      <p class="text-gray-500 text-sm">按来源 → 分类 → 章节 组织，点击可展开子级；点击「限定搜索」可将该范围带入搜索页</p>
+      <h1 class="text-2xl font-bold mb-2 dark:text-white">文章分类浏览</h1>
+      <p class="text-gray-500 dark:text-gray-400 text-sm">按来源 → 分类 → 章节 组织，点击可展开子级；点击「限定搜索」可将该范围带入搜索页</p>
     </div>
 
-    <div v-if="loading" class="text-center py-16 text-gray-400">加载中…</div>
-    <div v-if="error" class="bg-red-50 border border-red-200 text-red-700 rounded-lg px-4 py-3 text-sm">{{ error }}</div>
+    <div v-if="loading" class="text-center py-16 text-gray-400 dark:text-gray-500">加载中…</div>
+    <div v-if="error" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 rounded-lg px-4 py-3 text-sm">{{ error }}</div>
 
-    <div v-if="!loading && !error && tree.length === 0" class="text-center py-16 text-gray-400">
+    <div v-if="!loading && !error && tree.length === 0" class="text-center py-16 text-gray-400 dark:text-gray-500">
       暂无数据
     </div>
 
     <div v-if="!loading && tree.length > 0" class="space-y-4">
-      <div v-for="site in tree" :key="site.name" class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+      <div v-for="site in tree" :key="site.name" class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
         <template v-for="row in rowsForSite(site)" :key="row.key">
           <!-- 文章叶子节点 -->
           <button
             v-if="row.isArticle"
-            class="w-full flex items-center gap-2 py-1.5 hover:bg-white text-left group border-b border-gray-50 last:border-0"
+            class="w-full flex items-center gap-2 py-1.5 text-left group border-b border-gray-50 dark:border-gray-800 last:border-0 transition-colors"
+            :class="selectedKey === row.key ? 'bg-primary-100 dark:bg-primary-900/40' : 'hover:bg-gray-50 dark:hover:bg-gray-800/60'"
             :style="{ paddingLeft: `${14 + row.depth * 14}px`, paddingRight: '14px' }"
             :title="row.node.title || row.node.name"
-            @click="searchArticle(row.node)"
+            @click="selectNode(row)"
           >
             <span
               v-for="f in row.node.flags || []"
@@ -29,13 +30,13 @@
               class="w-1.5 h-1.5 rounded-full shrink-0"
               :class="flagDotClass(f)"
             ></span>
-            <span class="text-sm text-gray-700 truncate group-hover:text-primary-600">{{ row.node.title || row.node.name }}</span>
-            <span v-for="t in (row.node.tags || []).slice(0, 3)" :key="t" class="text-[10px] text-gray-400 bg-gray-100 px-1.5 rounded shrink-0">{{ t }}</span>
+            <span class="text-sm truncate" :class="selectedKey === row.key ? 'text-primary-700 dark:text-primary-300 font-medium' : 'text-gray-700 dark:text-gray-300 group-hover:text-primary-600 dark:group-hover:text-primary-400'">{{ row.node.title || row.node.name }}</span>
+            <span v-for="t in (row.node.tags || []).slice(0, 3)" :key="t" class="text-[10px] text-gray-400 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-1.5 rounded shrink-0">{{ t }}</span>
             <a
               v-if="row.node.url"
               :href="row.node.url"
               target="_blank"
-              class="ml-auto text-[10px] text-primary-600 hover:underline shrink-0"
+              class="ml-auto text-[10px] text-primary-600 dark:text-primary-400 hover:underline shrink-0"
               @click.stop
             >链接</a>
           </button>
@@ -43,25 +44,28 @@
           <!-- 站点 / 分类 / 章节 节点 -->
           <div
             v-else
-            class="w-full flex items-center gap-2 py-2 hover:bg-gray-50 cursor-pointer border-b border-gray-50 last:border-0"
+            class="w-full flex items-center gap-2 py-2 cursor-pointer border-b border-gray-50 dark:border-gray-800 last:border-0 transition-colors"
+            :class="selectedKey === row.key ? 'bg-primary-100 dark:bg-primary-900/40' : 'hover:bg-gray-50 dark:hover:bg-gray-800/60'"
             :style="{ paddingLeft: `${14 + row.depth * 14}px`, paddingRight: '10px' }"
-            @click="toggleExpanded(row.key)"
+            @click="toggleExpanded(row.key); selectNode(row)"
           >
-            <svg
-              class="w-3 h-3 text-gray-400 shrink-0 transition-transform"
-              :class="{ 'rotate-90': expandedKeys.has(row.key) }"
-              fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"
-            ><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6" /></svg>
+            
+            <Icon 
+              name="mdi:chevron-right" 
+              class="w-3 h-3 text-gray-400 dark:text-gray-500 shrink-0 -mt-px transition-transform" 
+              :class="{ 'rotate-90': expandedKeys.has(row.key) }" 
+            />
 
-            <svg class="w-3.5 h-3.5 text-gray-400 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path :d="iconPath(row.node.type)" />
-            </svg>
+            <Icon 
+              :name="getIconName(row.node.type)" 
+              class="w-3.5 h-3.5 text-gray-400 dark:text-gray-500 shrink-0 -mt-px" 
+            />
 
-            <span class="text-sm truncate" :class="row.depth === 0 ? 'font-semibold text-gray-800' : 'text-gray-700'">{{ row.node.name }}</span>
-            <span class="text-xs text-gray-400 shrink-0">{{ row.count }} 篇</span>
+            <span class="text-sm truncate" :class="row.depth === 0 ? 'font-semibold text-gray-800 dark:text-gray-200' : (selectedKey === row.key ? 'text-primary-700 dark:text-primary-300 font-medium' : 'text-gray-700 dark:text-gray-300')">{{ row.node.name }}</span>
+            <span class="text-xs text-gray-400 dark:text-gray-500 shrink-0">{{ row.count }} 篇</span>
 
             <button
-              class="ml-auto text-[11px] text-primary-600 hover:underline shrink-0"
+              class="ml-auto text-[11px] text-primary-600 dark:text-primary-400 hover:underline shrink-0"
               title="在此范围内搜索"
               @click.stop="restrictSearch(row)"
             >
@@ -81,10 +85,18 @@ const router = useRouter()
 const tree = ref<any[]>([])
 const loading = ref(true)
 const error = ref("")
+const selectedKey = ref<string | null>(null)
 
 // 展开状态：以路径拼出的唯一 key 记录哪些分支已展开
 const expandedKeys = reactive(new Set<string>())
 
+function selectNode(row: Row) {
+  selectedKey.value = row.key
+  if (row.isArticle) {
+    searchArticle(row.node)
+  }
+}
+
 function toggleExpanded(key: string) {
   if (expandedKeys.has(key)) expandedKeys.delete(key)
   else expandedKeys.add(key)
@@ -143,13 +155,14 @@ function flagDotClass(f: string): string {
   return map[f] ?? "bg-gray-300"
 }
 
-const ICON_PATHS: Record<string, string> = {
-  site: "M12 2a10 10 0 100 20 10 10 0 000-20zM2 12h20M12 2a15 15 0 010 20M12 2a15 15 0 000 20",
-  category: "M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z",
-  chapter: "M4 19.5A2.5 2.5 0 016.5 17H20M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z",
+const ICON_NAMES: Record<string, string> = {
+  site: "mdi:earth", 
+  category: "mdi:folder", 
+  chapter: "mdi:book-open-page-variant" 
 }
-function iconPath(type: string): string {
-  return ICON_PATHS[type] || ICON_PATHS.chapter
+
+function getIconName(type: string): string {
+  return ICON_NAMES[type] || "mdi:file-document-outline" 
 }
 
 // 限定搜索范围：跳转到搜索页并带上该节点对应的筛选条件
diff --git a/frontend/plugins/dark-mode.server.ts b/frontend/plugins/dark-mode.server.ts
new file mode 100644
index 0000000..ed9c625
--- /dev/null
+++ b/frontend/plugins/dark-mode.server.ts
@@ -0,0 +1,9 @@
+export default defineNuxtPlugin(() => {
+  const darkMode = useCookie<string>('dark-mode')
+
+  useHead({
+    htmlAttrs: computed(() => ({
+      class: darkMode.value === 'dark' ? ['dark'] : [], 
+    })),
+  })
+})
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index f336f7d..d625ba3 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: "class",
   content: [
     "./components/**/*.{js,ts,vue}",
     "./layouts/**/*.vue",