refactor(web): simplify frontend utilities

web/index.html

@@ -5,29 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>Codex Proxy RS</title>
-    <script>
-      ;(() => {
-        const root = document.documentElement
-        let mode = 'system'
-
-        try {
-          const storedMode = JSON.parse(localStorage.getItem('codex-proxy-rs-ui') || '{}').themeMode
-          if (storedMode === 'light' || storedMode === 'dark') {
-            mode = storedMode
-          }
-        } catch {}
-
-        const theme =
-          mode === 'system'
-            ? window.matchMedia('(prefers-color-scheme: dark)').matches
-              ? 'dark'
-              : 'light'
-            : mode
-
-        root.dataset.theme = theme
-        root.style.colorScheme = theme
-      })()
-    </script>
   </head>
   <body>
     <div id="app"></div>

web/src/composables/useDownload.ts

@@ -2,7 +2,7 @@
 import { useObjectUrl } from '@vueuse/core'
 import { nextTick, shallowRef } from 'vue'
 
-export function useJsonDownload() {
+export function useDownload() {
   const object = shallowRef<Blob | null>(null)
   const objectUrl = useObjectUrl(object)
 

web/src/directives/loading.ts

@@ -137,7 +137,7 @@ function syncLoading(element: LoadingElement, binding: DirectiveBinding<LoadingB
   }
 }
 
-export const loadingDirective: Directive<LoadingElement, LoadingBindingValue> = {
+export const loading: Directive<LoadingElement, LoadingBindingValue> = {
   mounted: syncLoading,
   updated: syncLoading,
   beforeUnmount: hideLoading,

web/src/main.ts

@@ -5,8 +5,8 @@ import '@fontsource-variable/jetbrains-mono'
 import App from './App.vue'
 import { router } from './router'
 import { pinia } from './stores'
-import { loadingDirective } from './directives/loading'
+import { loading } from './directives/loading'
 
 import './styles/index.css'
 
-createApp(App).directive('loading', loadingDirective).use(pinia).use(router).mount('#app')
+createApp(App).directive('loading', loading).use(pinia).use(router).mount('#app')

web/src/stores/modules/ui.ts

@@ -1,9 +1,10 @@
-import { usePreferredDark, usePreferredReducedMotion, useTimeoutFn } from '@vueuse/core'
+import { useDark, usePreferredReducedMotion, useTimeoutFn } from '@vueuse/core'
 import { defineStore } from 'pinia'
-import { computed, shallowRef, watch } from 'vue'
+import { computed, shallowRef } from 'vue'
 
 type ThemeMode = 'system' | 'light' | 'dark'
 type ThemeName = 'light' | 'dark'
+type ColorModeStorageValue = 'auto' | ThemeName
 type ThemeTransitionOrigin = { x: number; y: number }
 type ViewTransition = {
   ready: Promise<void>
@@ -20,14 +21,7 @@ export const useUiStore = defineStore(
     const sidebarCollapsed = shallowRef(false)
     const themeMode = shallowRef<ThemeMode>('system')
     const themeRevision = shallowRef(0)
-    const prefersDark = usePreferredDark()
     const preferredMotion = usePreferredReducedMotion()
-    const systemTheme = computed<ThemeName>(() => (prefersDark.value ? 'dark' : 'light'))
-
-    const effectiveTheme = computed<ThemeName>(() =>
-      themeMode.value === 'system' ? systemTheme.value : themeMode.value,
-    )
-
     let themeApplied = false
     let themeTransitionOrigin: ThemeTransitionOrigin | undefined
     let themeTransitionRequested = false
@@ -39,6 +33,22 @@ export const useUiStore = defineStore(
       { immediate: false },
     )
 
+    const colorModeStorage = computed<ColorModeStorageValue>({
+      get: () => (themeMode.value === 'system' ? 'auto' : themeMode.value),
+      set: (mode) => {
+        themeMode.value = mode === 'auto' ? 'system' : mode
+      },
+    })
+
+    const isDark = useDark({
+      storageRef: colorModeStorage,
+      onChanged: (dark) => {
+        applyTheme(dark ? 'dark' : 'light')
+      },
+    })
+
+    const effectiveTheme = computed<ThemeName>(() => (isDark.value ? 'dark' : 'light'))
+
     function toggleSidebar() {
       sidebarCollapsed.value = !sidebarCollapsed.value
     }
@@ -124,7 +134,9 @@ export const useUiStore = defineStore(
     }
 
     function initializeTheme() {
-      applyTheme(effectiveTheme.value)
+      if (!themeApplied) {
+        applyTheme(effectiveTheme.value)
+      }
     }
 
     function setThemeMode(mode: ThemeMode) {
@@ -142,8 +154,6 @@ export const useUiStore = defineStore(
       themeMode.value = effectiveTheme.value === 'dark' ? 'light' : 'dark'
     }
 
-    watch(effectiveTheme, applyTheme, { immediate: true })
-
     return {
       sidebarCollapsed,
       themeMode,

web/src/views/accounts/composables/useAccountMutations.ts

@@ -14,7 +14,7 @@ import {
   updateAccount,
 } from '@/api'
 import { toast } from '@/components/base/BaseToast'
-import { useJsonDownload } from '@/composables/useJsonDownload'
+import { useDownload } from '@/composables/useDownload'
 import { withMinimumDuration } from '@/utils/async'
 
 export function useAccountMutations(options: {
@@ -24,7 +24,7 @@ export function useAccountMutations(options: {
   selectedIds: Ref<Set<string>>
   totalAccounts: Ref<number>
 }) {
-  const { downloadJson } = useJsonDownload()
+  const { downloadJson } = useDownload()
   const loading = ref(true)
   const accounts = ref<any[]>([])
   const accountSummary = ref({

web/src/views/dashboard/composables/useDashboard.ts

@@ -239,7 +239,11 @@ export function useDashboard(): any {
           points.map((point) => point.cachedTokensValue),
           'warning',
         ),
-        trend: trendState(cache.todayHitRateValue ?? 0, cache.yesterdayHitRateValue ?? 0, 'warning'),
+        trend: trendState(
+          cache.todayHitRateValue ?? 0,
+          cache.yesterdayHitRateValue ?? 0,
+          'warning',
+        ),
         details: [
           { label: '总缓存命中', value: cache.totalHitRate, tone: 'warning' },
           {