feat: 暗色模式星空背景、主题切换顺序优化

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

components/layout/ThemeToggle.vue

@@ -2,29 +2,33 @@
 import { Icon } from '@iconify/vue'
 
 const colorMode = useColorMode()
-
-const modes = ['light', 'dark', 'system'] as const
-type Mode = typeof modes[number]
+type Mode = 'system' | 'dark' | 'light'
 
 const iconMap: Record<Mode, string> = {
-  light: 'mdi:weather-sunny',
-  dark: 'mdi:weather-night',
   system: 'mdi:monitor',
+  dark: 'mdi:weather-night',
+  light: 'mdi:weather-sunny',
 }
 
 const labelMap: Record<Mode, string> = {
-  light: '浅色模式',
-  dark: '深色模式',
   system: '跟随系统',
+  dark: '深色模式',
+  light: '浅色模式',
 }
 
+const cycleOrder = computed<Mode[]>(() => {
+  const isDark = colorMode.value === 'dark'
+  return isDark ? ['system', 'light', 'dark'] : ['system', 'dark', 'light']
+})
+
 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]
+  const order = cycleOrder.value
+  const idx = order.indexOf(currentMode.value)
+  colorMode.preference = order[(idx + 1) % order.length]
 }
 </script>