chore: 初始化项目仓库

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/layout/ThemeToggle.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+
+const colorMode = useColorMode()
+
+const modes = ['light', 'dark', 'system'] as const
+type Mode = typeof modes[number]
+
+const iconMap: Record<Mode, string> = {
+  light: 'mdi:weather-sunny',
+  dark: 'mdi:weather-night',
+  system: 'mdi:monitor',
+}
+
+const labelMap: Record<Mode, string> = {
+  light: '浅色模式',
+  dark: '深色模式',
+  system: '跟随系统',
+}
+
+const currentMode = computed(() => colorMode.preference as Mode)
+const currentIcon = computed(() => iconMap[currentMode.value] || iconMap.system)
+const currentLabel = computed(() => labelMap[currentMode.value] || labelMap.system)
+
+function cycle() {
+  const idx = modes.indexOf(currentMode.value)
+  colorMode.preference = modes[(idx + 1) % modes.length]
+}
+</script>
+
+<template>
+  <button
+    @click="cycle"
+    class="inline-flex items-center justify-center rounded-md w-8 h-8 transition-colors"
+    style="color: var(--color-text-secondary)"
+    :class="[
+      'hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text)]',
+    ]"
+    :aria-label="currentLabel"
+    :title="currentLabel"
+  >
+    <Icon :icon="currentIcon" class="w-5 h-5" />
+  </button>
+</template>