工具完成

src/components/ThemeToggle.vue

@@ -0,0 +1,68 @@
+<template>
+  <button
+    @click="toggleTheme"
+    class="relative w-10 h-10 rounded-full bg-card hover:bg-block-hover text-secondary hover:text-primary transition-all duration-300 shadow-md hover:shadow-lg border border-opacity-20 border-primary-500 hover:border-opacity-40 group"
+    :title="theme === 'dark' ? '切换到浅色主题' : '切换到深色主题'"
+  >
+    <!-- 图标容器 -->
+    <div class="absolute inset-0 flex items-center justify-center">
+      <!-- 太阳图标 (浅色模式) -->
+      <FontAwesomeIcon 
+        :icon="['fas', 'sun']" 
+        :class="[
+          'w-5 h-5 transition-all duration-300 transform',
+          theme === 'dark' 
+            ? 'opacity-100 scale-100 rotate-0' 
+            : 'opacity-0 scale-50 rotate-180'
+        ]"
+      />
+      
+      <!-- 月亮图标 (深色模式) -->
+      <FontAwesomeIcon 
+        :icon="['fas', 'moon']" 
+        :class="[
+          'w-5 h-5 transition-all duration-300 transform absolute',
+          theme === 'dark' 
+            ? 'opacity-0 scale-50 -rotate-180' 
+            : 'opacity-100 scale-100 rotate-0'
+        ]"
+      />
+    </div>
+    
+    <!-- 悬停时的光晕效果 -->
+    <div class="absolute inset-0 rounded-full bg-primary-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { useTheme } from '@/composables/useTheme'
+
+const { theme, toggleTheme } = useTheme()
+</script>
+
+<style scoped>
+/* 确保图标切换动画流畅 */
+.fa-sun,
+.fa-moon {
+  color: rgb(var(--color-text-secondary));
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 悬停时图标颜色变化 */
+button:hover .fa-sun,
+button:hover .fa-moon {
+  color: rgb(var(--color-primary));
+}
+
+/* 为浅色主题的太阳图标添加特殊效果 */
+[data-theme='light'] .fa-sun {
+  color: rgb(var(--color-warning));
+  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.3));
+}
+
+/* 为深色主题的月亮图标添加特殊效果 */
+[data-theme='dark'] .fa-moon {
+  color: rgb(var(--color-primary-light));
+  filter: drop-shadow(0 0 4px rgba(129, 140, 248, 0.3));
+}
+</style>