From 9fd8f0005a88e2af4da67066f0740a45643160d3 Mon Sep 17 00:00:00 2001
From: AdingApkgg <AdingApkgg@outlook.com>
Date: Fri, 26 Dec 2025 22:32:35 +0800
Subject: [PATCH] Refactor theme management and enhance UI components for
 improved user experience

- Removed the `animejs` dependency and replaced it with a lightweight animation system using the Web Animations API for better performance.
- Introduced theme settings in `SettingsModal.vue`, allowing users to select between light, dark, and system themes.
- Updated `useUIStore` to manage theme state and apply changes dynamically, enhancing the overall UI consistency.
- Improved styling in `VndbPanel.vue` and other components to align with the new theme management system, ensuring a cohesive look and feel across the application.
---
 package.json                     |   3 +-
 pnpm-lock.yaml                   |  46 +---
 src/components/SettingsModal.vue |  78 +++++-
 src/components/VndbPanel.vue     |   6 +-
 src/composables/useAnime.ts      | 411 +++++++++----------------------
 src/composables/useProgress.ts   |  35 +--
 src/stores/ui.ts                 |  85 +++++--
 7 files changed, 278 insertions(+), 386 deletions(-)

diff --git a/package.json b/package.json
index e1eb5b6..2989892 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,6 @@
   },
   "dependencies": {
     "@fontsource/noto-sans-sc": "^5.2.8",
-    "animejs": "^4.2.2",
     "artalk": "^2.9.1",
     "lucide-vue-next": "^0.562.0",
     "pinia": "^3.0.4",
@@ -35,7 +34,7 @@
     "snd-lib": "^1.2.4",
     "vue": "^3.5.26",
     "vue-prism-editor": "2.0.0-alpha.2",
-    "vue-virtual-scroller": "^1.1.2"
+    "vue-virtual-scroll-list": "^2.3.5"
   },
   "packageManager": "pnpm@10.26.2"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1996c32..acc18e5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,9 +11,6 @@ importers:
       '@fontsource/noto-sans-sc':
         specifier: ^5.2.8
         version: 5.2.8
-      animejs:
-        specifier: ^4.2.2
-        version: 4.2.2
       artalk:
         specifier: ^2.9.1
         version: 2.9.1(marked@14.1.4)
@@ -35,9 +32,9 @@ importers:
       vue-prism-editor:
         specifier: 2.0.0-alpha.2
         version: 2.0.0-alpha.2(vue@3.5.26(typescript@5.9.3))
-      vue-virtual-scroller:
-        specifier: ^1.1.2
-        version: 1.1.2(vue@3.5.26(typescript@5.9.3))
+      vue-virtual-scroll-list:
+        specifier: ^2.3.5
+        version: 2.3.5
     devDependencies:
       '@eslint/js':
         specifier: ^9.39.2
@@ -674,9 +671,6 @@ packages:
   alien-signals@3.1.0:
     resolution: {integrity: sha512-yufC6VpSy8tK3I0lO67pjumo5JvDQVQyr38+3OHqe6CHl1t2VZekKZ7EKKZSqk0cRmE7U7tfZbpXiKNzuc+ckg==}
 
-  animejs@4.2.2:
-    resolution: {integrity: sha512-Ys3RuvLdAeI14fsdKCQy7ytu4057QX6Bb7m4jwmfd6iKmUmLquTwk1ut0e4NtRQgCeq/s2Lv5+oMBjz6c7ZuIg==}
-
   ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
@@ -1146,9 +1140,6 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
-  scrollparent@2.1.0:
-    resolution: {integrity: sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA==}
-
   semver@7.7.3:
     resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
     engines: {node: '>=10'}
@@ -1288,30 +1279,20 @@ packages:
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
 
-  vue-observe-visibility@0.4.6:
-    resolution: {integrity: sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q==}
-
   vue-prism-editor@2.0.0-alpha.2:
     resolution: {integrity: sha512-Gu42ba9nosrE+gJpnAEuEkDMqG9zSUysIR8SdXUw8MQKDjBnnNR9lHC18uOr/ICz7yrA/5c7jHJr9lpElODC7w==}
     engines: {node: '>=10'}
     peerDependencies:
       vue: ^3.0.0
 
-  vue-resize@0.4.5:
-    resolution: {integrity: sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==}
-    peerDependencies:
-      vue: ^2.3.0
-
   vue-tsc@3.2.1:
     resolution: {integrity: sha512-I23Rk8dkQfmcSbxDO0dmg9ioMLjKA1pjlU3Lz6Jfk2pMGu3Uryu9810XkcZH24IzPbhzPCnkKo2rEMRX0skSrw==}
     hasBin: true
     peerDependencies:
       typescript: '>=5.0.0'
 
-  vue-virtual-scroller@1.1.2:
-    resolution: {integrity: sha512-SkUyc7QHCJFB5h1Fya7LxVizlVzOZZuFVipBGHYoTK8dwLs08bIz/tclvRApYhksaJIm/nn51inzO2UjpGJPMQ==}
-    peerDependencies:
-      vue: ^2.6.11
+  vue-virtual-scroll-list@2.3.5:
+    resolution: {integrity: sha512-YFK6u5yltqtAOfTBcij/KGAS2SoZvzbNIAf9qTULauPObEp53xj22tDuohrrM2vNkgoD5kejXICIUBt2Q4ZDqQ==}
 
   vue@3.5.26:
     resolution: {integrity: sha512-SJ/NTccVyAoNUJmkM9KUqPcYlY+u8OVL1X5EW9RIs3ch5H2uERxyyIUI4MRxVCSOiEcupX9xNGde1tL9ZKpimA==}
@@ -1865,8 +1846,6 @@ snapshots:
 
   alien-signals@3.1.0: {}
 
-  animejs@4.2.2: {}
-
   ansi-styles@4.3.0:
     dependencies:
       color-convert: 2.0.1
@@ -2317,8 +2296,6 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.53.2
       fsevents: 2.3.3
 
-  scrollparent@2.1.0: {}
-
   semver@7.7.3: {}
 
   shebang-command@2.0.0:
@@ -2429,28 +2406,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-observe-visibility@0.4.6: {}
-
   vue-prism-editor@2.0.0-alpha.2(vue@3.5.26(typescript@5.9.3)):
     dependencies:
       vue: 3.5.26(typescript@5.9.3)
 
-  vue-resize@0.4.5(vue@3.5.26(typescript@5.9.3)):
-    dependencies:
-      vue: 3.5.26(typescript@5.9.3)
-
   vue-tsc@3.2.1(typescript@5.9.3):
     dependencies:
       '@volar/typescript': 2.4.27
       '@vue/language-core': 3.2.1
       typescript: 5.9.3
 
-  vue-virtual-scroller@1.1.2(vue@3.5.26(typescript@5.9.3)):
-    dependencies:
-      scrollparent: 2.1.0
-      vue: 3.5.26(typescript@5.9.3)
-      vue-observe-visibility: 0.4.6
-      vue-resize: 0.4.5(vue@3.5.26(typescript@5.9.3))
+  vue-virtual-scroll-list@2.3.5: {}
 
   vue@3.5.26(typescript@5.9.3):
     dependencies:
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index a77247c..3c5d42d 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -56,6 +56,61 @@
         <!-- 内容区域 -->
         <div class="flex-1 overflow-y-auto custom-scrollbar">
           <div class="max-w-3xl mx-auto px-4 sm:px-6 py-6 sm:py-8 space-y-6">
+            <!-- 主题设置卡片 -->
+            <div
+              v-anime:100="'cardIn'"
+              class="settings-card"
+            >
+              <div class="flex items-center gap-3 mb-4">
+                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-purple-500 flex items-center justify-center shadow-lg shadow-violet-500/30">
+                  <Palette :size="20" class="text-white" />
+                </div>
+                <div>
+                  <h2 class="text-lg font-bold text-gray-800 dark:text-white">外观主题</h2>
+                  <p class="text-sm text-gray-500 dark:text-slate-400">选择亮色、暗色或跟随系统</p>
+                </div>
+              </div>
+
+              <!-- 主题选项 -->
+              <div class="grid grid-cols-3 gap-3">
+                <button
+                  v-for="option in themeOptions"
+                  :key="option.value"
+                  type="button"
+                  :class="[
+                    'flex flex-col items-center gap-2 p-4 rounded-xl transition-all duration-200',
+                    uiStore.themeMode === option.value
+                      ? 'bg-[#ff1493]/10 border-2 border-[#ff1493] dark:border-[#ff69b4]'
+                      : 'bg-slate-50 dark:bg-slate-800/60 border-2 border-transparent hover:border-pink-200 dark:hover:border-pink-900'
+                  ]"
+                  @click="handleThemeChange(option.value)"
+                >
+                  <!-- 图标 -->
+                  <div
+                    :class="[
+                      'w-10 h-10 rounded-xl flex items-center justify-center transition-colors',
+                      uiStore.themeMode === option.value
+                        ? 'bg-[#ff1493] text-white'
+                        : 'bg-gray-200 dark:bg-slate-700 text-gray-600 dark:text-slate-400'
+                    ]"
+                  >
+                    <component :is="option.icon" :size="20" />
+                  </div>
+                  <!-- 标签 -->
+                  <span
+                    :class="[
+                      'text-sm font-medium',
+                      uiStore.themeMode === option.value
+                        ? 'text-[#ff1493] dark:text-[#ff69b4]'
+                        : 'text-gray-700 dark:text-slate-300'
+                    ]"
+                  >
+                    {{ option.label }}
+                  </span>
+                </button>
+              </div>
+            </div>
+
             <!-- API 设置卡片 -->
             <div
               v-anime:150="'cardIn'"
@@ -108,11 +163,11 @@
                       {{ option.label }}
                     </span>
                   </div>
-                  <!-- 移动端：URL 显示在第二行；桌面端：显示在右侧 -->
+                  <!-- 移动端：URL 显示在第二行；桌面端：显示在右侧靠右 -->
                   <span 
                     v-if="option.value !== 'custom'" 
                     v-text-scroll
-                    class="text-xs text-gray-400 dark:text-slate-500 font-mono mt-1.5 sm:mt-0 ml-8 sm:ml-0 flex-1 min-w-0"
+                    class="text-xs text-gray-400 dark:text-slate-500 font-mono mt-1.5 sm:mt-0 ml-8 sm:ml-auto sm:text-right truncate max-w-[50%]"
                   >
                     {{ getApiUrl(option.value) }}
                   </span>
@@ -272,7 +327,26 @@ import {
   Check,
   Github,
   X,
+  Palette,
+  Sun,
+  Moon,
+  Monitor,
 } from 'lucide-vue-next'
+import { useUIStore, type ThemeMode } from '@/stores/ui'
+
+const uiStore = useUIStore()
+
+// 主题选项
+const themeOptions = [
+  { value: 'light' as ThemeMode, label: '亮色', icon: Sun },
+  { value: 'system' as ThemeMode, label: '系统', icon: Monitor },
+  { value: 'dark' as ThemeMode, label: '暗色', icon: Moon },
+]
+
+function handleThemeChange(mode: ThemeMode) {
+  playToggle()
+  uiStore.setThemeMode(mode)
+}
 
 const props = defineProps<{
   isOpen: boolean
diff --git a/src/components/VndbPanel.vue b/src/components/VndbPanel.vue
index 6a6f457..47b5246 100644
--- a/src/components/VndbPanel.vue
+++ b/src/components/VndbPanel.vue
@@ -38,7 +38,7 @@
               class="flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium transition-all"
               :class="isTranslatingAll 
                 ? 'bg-gray-200 dark:bg-slate-700 text-gray-500 dark:text-slate-400 cursor-wait' 
-                : 'text-white bg-gradient-to-r from-violet-500 to-purple-600 shadow-lg shadow-violet-500/25 hover:shadow-xl'"
+                : 'text-white bg-violet-500 hover:bg-violet-600'"
               :disabled="isTranslatingAll"
               @click="handleTranslateAll"
             >
@@ -61,7 +61,7 @@
               :href="vndbUrl"
               target="_blank"
               rel="noopener noreferrer"
-              class="flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-white bg-gradient-to-r from-[#ff1493] to-[#d946ef] shadow-lg shadow-pink-500/25 hover:shadow-xl transition-shadow"
+              class="flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-white bg-[#ff1493] hover:bg-[#e6007f]"
             >
               <ExternalLink :size="14" />
               <span class="hidden sm:inline">VNDB</span>
@@ -488,7 +488,7 @@
                 <button
                   v-for="(screenshot, index) in searchStore.vndbInfo.screenshots"
                   :key="index"
-                  class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all"
+                  class="group block overflow-hidden rounded-xl hover:scale-[1.02] transition-transform"
                   @click="openGallery(index + 1)"
                 >
                   <img
diff --git a/src/composables/useAnime.ts b/src/composables/useAnime.ts
index b45f8bb..95a3acf 100644
--- a/src/composables/useAnime.ts
+++ b/src/composables/useAnime.ts
@@ -1,64 +1,26 @@
 /**
- * Anime.js v4 动画系统 - 替代 Framer Motion
- * 提供声明式动画 API，支持进入/离开动画
+ * 动画系统 - 使用原生 Web Animations API
+ * 轻量级替代 anime.js
  */
 
-import { animate as animeAnimate, utils, createTimeline } from 'animejs'
-import { ref, onMounted, watch, nextTick, type Ref, type DirectiveBinding } from 'vue'
-
-// 动画预设 - 使用 anime.js v4 语法
-export const presets = {
-  // 淡入淡出
-  fadeIn: { opacity: [0, 1], duration: 300, ease: 'outQuad' },
-  fadeOut: { opacity: [1, 0], duration: 200, ease: 'inQuad' },
-  
-  // 滑入滑出
-  slideUp: { opacity: [0, 1], translateY: [40, 0], duration: 400, ease: 'outCubic' },
-  slideDown: { opacity: [1, 0], translateY: [0, 40], duration: 300, ease: 'inCubic' },
-  slideLeft: { opacity: [0, 1], translateX: [40, 0], duration: 400, ease: 'outCubic' },
-  slideRight: { opacity: [0, 1], translateX: [-40, 0], duration: 400, ease: 'outCubic' },
-  
-  // 缩放
-  scaleIn: { opacity: [0, 1], scale: [0.95, 1], duration: 350, ease: 'outBack' },
-  scaleOut: { opacity: [1, 0], scale: [1, 0.95], duration: 250, ease: 'inQuad' },
-  
-  // 弹性
-  springIn: { opacity: [0, 1], scale: [0.9, 1], translateY: [20, 0], duration: 500, ease: 'outElastic(1, 0.5)' },
-  springOut: { opacity: [1, 0], scale: [1, 0.95], translateY: [0, 20], duration: 300, ease: 'inQuad' },
-  
-  // 窗口动画
-  windowIn: { 
-    opacity: [0, 1], 
-    scale: [0.98, 1], 
-    translateY: [40, 0], 
-    duration: 400, 
-    ease: 'outCubic', 
-  },
-  windowOut: { 
-    opacity: [1, 0], 
-    scale: [1, 0.98], 
-    translateY: [0, 40], 
-    duration: 300, 
-    ease: 'inCubic', 
-  },
-  
-  // 卡片动画
-  cardIn: { opacity: [0, 1], translateY: [30, 0], duration: 400, ease: 'outQuart' },
-  
-  // 按钮交互
-  buttonPress: { scale: [1, 0.95], duration: 100, ease: 'outQuad' },
-  buttonRelease: { scale: [0.95, 1], duration: 200, ease: 'outBack' },
-  buttonHover: { scale: [1, 1.05], duration: 200, ease: 'outQuad' },
-  
-  // 微交互
-  pulse: { scale: [1, 1.05, 1], duration: 300, ease: 'inOutQuad' },
-  shake: { translateX: [0, -10, 10, -10, 10, 0], duration: 400, ease: 'inOutQuad' },
-  bounce: { translateY: [0, -10, 0], duration: 400, ease: 'outBounce' },
-  wiggle: { rotate: [0, -3, 3, -3, 3, 0], duration: 400, ease: 'inOutQuad' },
+// 缓动函数映射
+const easingMap: Record<string, string> = {
+  'outQuad': 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+  'inQuad': 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',
+  'outCubic': 'cubic-bezier(0.33, 1, 0.68, 1)',
+  'inCubic': 'cubic-bezier(0.32, 0, 0.67, 0)',
+  'outQuart': 'cubic-bezier(0.25, 1, 0.5, 1)',
+  'inQuart': 'cubic-bezier(0.5, 0, 0.75, 0)',
+  'outBack': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+  'inBack': 'cubic-bezier(0.36, 0, 0.66, -0.56)',
+  'inOutQuad': 'cubic-bezier(0.45, 0, 0.55, 1)',
+  'linear': 'linear',
+  'ease': 'ease',
+  'easeIn': 'ease-in',
+  'easeOut': 'ease-out',
+  'easeInOut': 'ease-in-out',
 }
 
-export type PresetName = keyof typeof presets
-
 interface AnimationParams {
   opacity?: number[]
   scale?: number[] | number
@@ -72,261 +34,112 @@ interface AnimationParams {
 }
 
 /**
- * 执行动画 - 使用 anime.js v4 API
+ * 将动画参数转换为 Web Animations API 格式
+ */
+function paramsToKeyframes(params: AnimationParams): Keyframe[] {
+  const fromFrame: Keyframe = {}
+  const toFrame: Keyframe = {}
+  
+  // 构建 transform 字符串
+  let fromTransform = ''
+  let toTransform = ''
+  
+  if (params.opacity) {
+    fromFrame.opacity = params.opacity[0]
+    toFrame.opacity = params.opacity[1]
+  }
+  
+  if (params.scale) {
+    if (Array.isArray(params.scale)) {
+      fromTransform += `scale(${params.scale[0]}) `
+      toTransform += `scale(${params.scale[1]}) `
+    }
+  }
+  
+  if (params.translateX) {
+    if (Array.isArray(params.translateX)) {
+      fromTransform += `translateX(${params.translateX[0]}px) `
+      toTransform += `translateX(${params.translateX[1]}px) `
+    }
+  }
+  
+  if (params.translateY) {
+    if (Array.isArray(params.translateY)) {
+      fromTransform += `translateY(${params.translateY[0]}px) `
+      toTransform += `translateY(${params.translateY[1]}px) `
+    }
+  }
+  
+  if (params.rotate) {
+    if (Array.isArray(params.rotate) && params.rotate.length >= 2) {
+      fromTransform += `rotate(${params.rotate[0]}deg) `
+      toTransform += `rotate(${params.rotate[params.rotate.length - 1]}deg) `
+    }
+  }
+  
+  if (fromTransform) {
+    fromFrame.transform = fromTransform.trim()
+    toFrame.transform = toTransform.trim()
+  }
+  
+  return [fromFrame, toFrame]
+}
+
+/**
+ * 执行动画 - 使用 Web Animations API
  */
 export function animate(
   target: HTMLElement | string | NodeList | HTMLElement[],
-  animation: AnimationParams | PresetName,
+  animation: AnimationParams,
   options?: Partial<AnimationParams>,
-) {
-  const params = typeof animation === 'string' 
-    ? { ...presets[animation], ...options } 
-    : { ...animation, ...options }
+): Promise<void> {
+  const params = { ...animation, ...options }
   
-  const { complete, ...animParams } = params
-  
-  const anim = animeAnimate(target, animParams)
-  
-  if (complete) {
-    anim.then(complete)
+  // 获取目标元素
+  let elements: HTMLElement[] = []
+  if (typeof target === 'string') {
+    elements = Array.from(document.querySelectorAll(target)) as HTMLElement[]
+  } else if (target instanceof NodeList) {
+    elements = Array.from(target) as HTMLElement[]
+  } else if (Array.isArray(target)) {
+    elements = target
+  } else if (target instanceof HTMLElement) {
+    elements = [target]
   }
   
-  return anim
-}
-
-/**
- * 交错动画 - 用于列表项
- */
-export function stagger(
-  targets: HTMLElement[] | NodeList | string,
-  animation: AnimationParams | PresetName,
-  staggerDelay = 50,
-  options?: Partial<AnimationParams>,
-) {
-  const params = typeof animation === 'string' ? { ...presets[animation] } : { ...animation }
-  const { complete, ...animParams } = { ...params, ...options }
+  if (elements.length === 0) {
+    return Promise.resolve()
+  }
   
-  const anim = animeAnimate(targets, {
-    ...animParams,
-    delay: utils.stagger(staggerDelay),
+  const keyframes = paramsToKeyframes(params)
+  const duration = params.duration || 300
+  const easing = easingMap[params.ease || 'outQuad'] || params.ease || 'ease-out'
+  const delay = params.delay || 0
+  
+  const animations = elements.map(el => {
+    const anim = el.animate(keyframes, {
+      duration,
+      easing,
+      delay,
+      fill: 'forwards',
+    })
+    return anim.finished
   })
   
-  if (complete) {
-    anim.then(complete)
-  }
-  
-  return anim
-}
-
-/**
- * 组合使用 - 进入/离开动画
- */
-export function useAnimePresence(
-  isVisible: Ref<boolean>,
-  enterAnimation: PresetName | AnimationParams = 'fadeIn',
-  exitAnimation: PresetName | AnimationParams = 'fadeOut',
-) {
-  const elementRef = ref<HTMLElement | null>(null)
-  const isAnimating = ref(false)
-  const shouldRender = ref(isVisible.value)
-
-  watch(isVisible, async (visible) => {
-    if (visible) {
-      shouldRender.value = true
-      await nextTick()
-      if (elementRef.value) {
-        isAnimating.value = true
-        const params = typeof enterAnimation === 'string' ? presets[enterAnimation] : enterAnimation
-        animate(elementRef.value, params, {
-          complete: () => {
-            isAnimating.value = false
-          },
-        })
+  return Promise.all(animations).then(() => {
+    // 将最终状态应用到元素
+    elements.forEach(el => {
+      const lastFrame = keyframes[keyframes.length - 1]
+      if (lastFrame.opacity !== undefined) {
+        el.style.opacity = String(lastFrame.opacity)
       }
-    } else {
-      if (elementRef.value) {
-        isAnimating.value = true
-        const params = typeof exitAnimation === 'string' ? presets[exitAnimation] : exitAnimation
-        animate(elementRef.value, params, {
-          complete: () => {
-            isAnimating.value = false
-            shouldRender.value = false
-          },
-        })
-      } else {
-        shouldRender.value = false
+      if (lastFrame.transform) {
+        el.style.transform = lastFrame.transform
       }
-    }
-  }, { immediate: true })
-
-  return {
-    elementRef,
-    isAnimating,
-    shouldRender,
-  }
-}
-
-/**
- * 元素挂载动画
- */
-export function useAnimeOnMount(
-  animation: PresetName | AnimationParams = 'fadeIn',
-  delay = 0,
-) {
-  const elementRef = ref<HTMLElement | null>(null)
-
-  onMounted(() => {
-    if (elementRef.value) {
-      const params = typeof animation === 'string' ? presets[animation] : animation
-      animate(elementRef.value, params, { delay })
+    })
+    
+    if (params.complete) {
+      params.complete()
     }
   })
-
-  return elementRef
 }
-
-/**
- * 交互动画 Hook
- */
-export function useInteraction(elementRef: Ref<HTMLElement | null>) {
-  const isHovered = ref(false)
-  const isPressed = ref(false)
-
-  function onMouseEnter() {
-    isHovered.value = true
-    if (elementRef.value) {
-      animate(elementRef.value, 'buttonHover')
-    }
-  }
-
-  function onMouseLeave() {
-    isHovered.value = false
-    if (elementRef.value && !isPressed.value) {
-      animate(elementRef.value, { scale: 1, duration: 200 })
-    }
-  }
-
-  function onMouseDown() {
-    isPressed.value = true
-    if (elementRef.value) {
-      animate(elementRef.value, 'buttonPress')
-    }
-  }
-
-  function onMouseUp() {
-    isPressed.value = false
-    if (elementRef.value) {
-      animate(elementRef.value, 'buttonRelease')
-    }
-  }
-
-  return {
-    isHovered,
-    isPressed,
-    handlers: {
-      onMouseEnter,
-      onMouseLeave,
-      onMouseDown,
-      onMouseUp,
-    },
-  }
-}
-
-/**
- * v-anime 指令 - 入场动画
- * 用法: v-anime="'slideUp'" 或 v-anime="{ opacity: [0, 1], translateY: [20, 0] }"
- */
-export const vAnime = {
-  mounted(el: HTMLElement, binding: DirectiveBinding<PresetName | AnimationParams>) {
-    const animation = binding.value || 'fadeIn'
-    const delay = binding.arg ? parseInt(binding.arg) : 0
-    const params = typeof animation === 'string' ? presets[animation] : animation
-    
-    // 设置初始状态
-    el.style.opacity = '0'
-    
-    animate(el, params, { delay })
-  },
-}
-
-/**
- * v-anime-stagger 指令 - 子元素交错动画
- * 用法: v-anime-stagger="'slideUp'" 或 v-anime-stagger:100="'cardIn'"
- */
-export const vAnimeStagger = {
-  mounted(el: HTMLElement, binding: DirectiveBinding<PresetName | AnimationParams>) {
-    const animation = binding.value || 'fadeIn'
-    const staggerDelay = binding.arg ? parseInt(binding.arg) : 50
-    const params = typeof animation === 'string' ? presets[animation] : animation
-    
-    const children = el.children
-    
-    // 设置初始状态
-    Array.from(children).forEach((child) => {
-      ;(child as HTMLElement).style.opacity = '0'
-    })
-    
-    stagger(children as unknown as HTMLElement[], params, staggerDelay)
-  },
-}
-
-/**
- * v-hover 指令 - 悬停动画
- * 用法: v-hover 或 v-hover="{ scale: 1.05 }"
- */
-export const vHover = {
-  mounted(el: HTMLElement, binding: DirectiveBinding<AnimationParams>) {
-    const hoverAnimation = binding.value || { scale: 1.05 }
-    
-    el.addEventListener('mouseenter', () => {
-      animate(el, {
-        ...hoverAnimation,
-        duration: 200,
-        ease: 'outQuad',
-      })
-    })
-    
-    el.addEventListener('mouseleave', () => {
-      animate(el, {
-        scale: 1,
-        duration: 200,
-        ease: 'outQuad',
-      })
-    })
-  },
-}
-
-/**
- * v-tap 指令 - 点击动画
- * 用法: v-tap
- */
-export const vTap = {
-  mounted(el: HTMLElement) {
-    el.addEventListener('mousedown', () => {
-      animate(el, {
-        scale: 0.95,
-        duration: 100,
-        ease: 'outQuad',
-      })
-    })
-    
-    el.addEventListener('mouseup', () => {
-      animate(el, {
-        scale: 1,
-        duration: 200,
-        ease: 'outBack',
-      })
-    })
-    
-    el.addEventListener('mouseleave', () => {
-      animate(el, {
-        scale: 1,
-        duration: 200,
-        ease: 'outQuad',
-      })
-    })
-  },
-}
-
-// 导出工具
-export { utils, createTimeline }
diff --git a/src/composables/useProgress.ts b/src/composables/useProgress.ts
index ded863e..cd72bb5 100644
--- a/src/composables/useProgress.ts
+++ b/src/composables/useProgress.ts
@@ -1,10 +1,8 @@
 /**
- * 自定义进度条 - 使用 anime.js 替代 nprogress
+ * 自定义进度条 - 使用原生 CSS 动画
  * 功能：页面顶部进度条 + 右上角 spinner
  */
 
-import { animate as animeAnimate } from 'animejs'
-
 // 状态
 let progress = 0
 let activeRequests = 0
@@ -18,7 +16,6 @@ const config = {
   minimum: 0.08,
   trickleSpeed: 200,
   speed: 300,
-  easing: 'easeOutQuad',
 }
 
 /**
@@ -68,7 +65,7 @@ function createElements() {
         box-shadow: 
           0 0 10px rgba(255, 20, 147, 0.7),
           0 0 20px rgba(217, 70, 239, 0.5);
-        transition: opacity 0.2s ease;
+        transition: width 0.3s ease-out, opacity 0.2s ease;
       }
       
       @keyframes progress-gradient {
@@ -146,11 +143,7 @@ function set(n: number) {
   progress = n
   
   if (barElement) {
-    animeAnimate(barElement, {
-      width: `${n * 100}%`,
-      duration: config.speed,
-      ease: config.easing,
-    })
+    barElement.style.width = `${n * 100}%`
   }
 }
 
@@ -235,18 +228,16 @@ export function doneProgress() {
     // 然后淡出
     setTimeout(() => {
       if (barElement) {
-        animeAnimate(barElement, {
-          opacity: 0,
-          duration: 200,
-          ease: 'easeOutQuad',
-          complete: () => {
-            if (barElement) {
-              barElement.style.width = '0%'
-            }
-            isStarted = false
-            progress = 0
-          },
-        })
+        barElement.style.opacity = '0'
+        
+        // 重置状态
+        setTimeout(() => {
+          if (barElement) {
+            barElement.style.width = '0%'
+          }
+          isStarted = false
+          progress = 0
+        }, 200)
       }
       
       if (spinnerElement) {
diff --git a/src/stores/ui.ts b/src/stores/ui.ts
index becbb16..0cca7a0 100644
--- a/src/stores/ui.ts
+++ b/src/stores/ui.ts
@@ -1,9 +1,13 @@
 import { defineStore } from 'pinia'
 import { ref, computed, watch } from 'vue'
 
+// 主题模式类型
+export type ThemeMode = 'system' | 'light' | 'dark'
+
 // 持久化的 UI 状态类型
 export interface PersistedUIState {
   // 主题
+  themeMode: ThemeMode
   isDarkMode: boolean
   customCSS: string
   
@@ -30,6 +34,7 @@ const SESSION_KEY = 'ui-session-state'
 
 // 默认持久化状态
 const DEFAULT_PERSISTED_STATE: PersistedUIState = {
+  themeMode: 'system',
   isDarkMode: false,
   customCSS: '',
   isCommentsModalOpen: false,
@@ -48,8 +53,10 @@ export const useUIStore = defineStore('ui', () => {
   const isInitialized = ref(false)
 
   // 主题相关
+  const themeMode = ref<ThemeMode>('system')
   const isDarkMode = ref(false)
   const customCSS = ref('')
+  let systemThemeCleanup: (() => void) | null = null
   
   // 模态框状态
   const isCommentsModalOpen = ref(false)
@@ -105,16 +112,63 @@ export const useUIStore = defineStore('ui', () => {
   })
   
   // 方法 - 主题
+  
+  /**
+   * 获取系统主题偏好
+   */
+  function getSystemTheme(): boolean {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+  }
+  
+  /**
+   * 应用主题到 DOM
+   */
+  function applyTheme(dark: boolean) {
+    isDarkMode.value = dark
+    document.documentElement.classList.toggle('dark', dark)
+  }
+  
+  /**
+   * 设置主题模式
+   */
+  function setThemeMode(mode: ThemeMode) {
+    themeMode.value = mode
+    
+    // 清理之前的系统主题监听
+    if (systemThemeCleanup) {
+      systemThemeCleanup()
+      systemThemeCleanup = null
+    }
+    
+    if (mode === 'system') {
+      // 应用系统主题
+      applyTheme(getSystemTheme())
+      
+      // 监听系统主题变化
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+      const handler = (e: MediaQueryListEvent) => {
+        if (themeMode.value === 'system') {
+          applyTheme(e.matches)
+        }
+      }
+      mediaQuery.addEventListener('change', handler)
+      systemThemeCleanup = () => mediaQuery.removeEventListener('change', handler)
+    } else {
+      // 应用固定主题
+      applyTheme(mode === 'dark')
+    }
+  }
+  
   function toggleDarkMode() {
-    isDarkMode.value = !isDarkMode.value
-    document.documentElement.classList.toggle('dark', isDarkMode.value)
-    localStorage.setItem('darkMode', isDarkMode.value ? 'true' : 'false')
+    // 切换主题模式：system -> light -> dark -> system
+    const modes: ThemeMode[] = ['system', 'light', 'dark']
+    const currentIndex = modes.indexOf(themeMode.value)
+    const nextIndex = (currentIndex + 1) % modes.length
+    setThemeMode(modes[nextIndex])
   }
   
   function setDarkMode(value: boolean) {
-    isDarkMode.value = value
-    document.documentElement.classList.toggle('dark', value)
-    localStorage.setItem('darkMode', value ? 'true' : 'false')
+    setThemeMode(value ? 'dark' : 'light')
   }
   
   function setCustomCSS(css: string) {
@@ -213,7 +267,7 @@ export const useUIStore = defineStore('ui', () => {
       const saved = localStorage.getItem(STORAGE_KEY)
       if (saved) {
         const parsed: Partial<PersistedUIState> = JSON.parse(saved)
-        isDarkMode.value = parsed.isDarkMode ?? DEFAULT_PERSISTED_STATE.isDarkMode
+        themeMode.value = parsed.themeMode ?? DEFAULT_PERSISTED_STATE.themeMode
         customCSS.value = parsed.customCSS ?? DEFAULT_PERSISTED_STATE.customCSS
         showSearchHistory.value = parsed.showSearchHistory ?? DEFAULT_PERSISTED_STATE.showSearchHistory
       }
@@ -249,7 +303,7 @@ export const useUIStore = defineStore('ui', () => {
   function savePersistedState() {
     try {
       const state: Partial<PersistedUIState> = {
-        isDarkMode: isDarkMode.value,
+        themeMode: themeMode.value,
         customCSS: customCSS.value,
         showSearchHistory: showSearchHistory.value,
         lastVisitTime: Date.now(),
@@ -280,7 +334,7 @@ export const useUIStore = defineStore('ui', () => {
 
   // 监听需要持久化的状态变化（localStorage - 长期偏好）
   watch(
-    [isDarkMode, customCSS, showSearchHistory],
+    [themeMode, customCSS, showSearchHistory],
     () => {
       if (isInitialized.value) {
         savePersistedState()
@@ -313,15 +367,8 @@ export const useUIStore = defineStore('ui', () => {
     // 加载会话状态（刷新恢复）
     loadSessionState()
 
-    // 如果没有保存的主题偏好，跟随系统
-    const saved = localStorage.getItem(STORAGE_KEY)
-    if (!saved) {
-      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-      isDarkMode.value = prefersDark
-    }
-
-    // 应用主题
-    document.documentElement.classList.toggle('dark', isDarkMode.value)
+    // 应用主题模式
+    setThemeMode(themeMode.value)
     
     isInitialized.value = true
     
@@ -362,6 +409,7 @@ export const useUIStore = defineStore('ui', () => {
   return {
     // 状态
     isInitialized,
+    themeMode,
     isDarkMode,
     customCSS,
     isCommentsModalOpen,
@@ -385,6 +433,7 @@ export const useUIStore = defineStore('ui', () => {
     activeModalsCount,
     
     // 方法
+    setThemeMode,
     toggleDarkMode,
     setDarkMode,
     setCustomCSS,