fix(web): localStorage safety, default fetch timeout, visibility-aware polling

web/src/stores/auth.ts

@@ -8,26 +8,64 @@ export interface User {
   is_admin: boolean
 }
 
+function safeReadJSON<T>(key: string, fallback: T): T {
+  try {
+    const raw = localStorage.getItem(key)
+    if (raw === null) return fallback
+    return JSON.parse(raw) as T
+  } catch {
+    // 脏数据 / 反序列化失败 → 清掉，回退默认。
+    try {
+      localStorage.removeItem(key)
+    } catch {
+      /* noop */
+    }
+    return fallback
+  }
+}
+
+function safeReadString(key: string): string | null {
+  try {
+    return localStorage.getItem(key)
+  } catch {
+    return null
+  }
+}
+
+function safeWrite(key: string, value: string) {
+  try {
+    localStorage.setItem(key, value)
+  } catch {
+    /* QuotaExceeded / disabled */
+  }
+}
+
+function safeRemove(key: string) {
+  try {
+    localStorage.removeItem(key)
+  } catch {
+    /* noop */
+  }
+}
+
 export const useAuthStore = defineStore('auth', () => {
-  const token = ref<string | null>(localStorage.getItem('token'))
-  const user = ref<User | null>(
-    JSON.parse(localStorage.getItem('user') || 'null') as User | null,
-  )
+  const token = ref<string | null>(safeReadString('token'))
+  const user = ref<User | null>(safeReadJSON<User | null>('user', null))
 
   const isAuthenticated = computed(() => !!token.value)
 
   function setSession(t: string, u: User) {
     token.value = t
     user.value = u
-    localStorage.setItem('token', t)
-    localStorage.setItem('user', JSON.stringify(u))
+    safeWrite('token', t)
+    safeWrite('user', JSON.stringify(u))
   }
 
   function clearSession() {
     token.value = null
     user.value = null
-    localStorage.removeItem('token')
-    localStorage.removeItem('user')
+    safeRemove('token')
+    safeRemove('user')
   }
 
   return { token, user, isAuthenticated, setSession, clearSession }

web/src/stores/ui.ts

@@ -3,15 +3,34 @@ import { computed, ref, watch } from 'vue'
 
 type ThemeMode = 'light' | 'dark' | 'system'
 
-export const useUIStore = defineStore('ui', () => {
-  const themeMode = ref<ThemeMode>(
-    (localStorage.getItem('themeMode') as ThemeMode) || 'system',
-  )
-  const systemDark = ref(window.matchMedia('(prefers-color-scheme: dark)').matches)
+function safeReadString(key: string): string | null {
+  try {
+    return localStorage.getItem(key)
+  } catch {
+    return null
+  }
+}
 
-  window
-    .matchMedia('(prefers-color-scheme: dark)')
-    .addEventListener('change', (e) => (systemDark.value = e.matches))
+function safeWrite(key: string, value: string) {
+  try {
+    localStorage.setItem(key, value)
+  } catch {
+    /* QuotaExceeded / disabled */
+  }
+}
+
+export const useUIStore = defineStore('ui', () => {
+  const storedTheme = safeReadString('themeMode') as ThemeMode | null
+  const themeMode = ref<ThemeMode>(storedTheme || 'system')
+
+  const mediaQuery =
+    typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+      ? window.matchMedia('(prefers-color-scheme: dark)')
+      : null
+  const systemDark = ref(mediaQuery ? mediaQuery.matches : false)
+  if (mediaQuery) {
+    mediaQuery.addEventListener('change', (e) => (systemDark.value = e.matches))
+  }
 
   const effectiveDark = computed(() =>
     themeMode.value === 'system' ? systemDark.value : themeMode.value === 'dark',
@@ -25,13 +44,11 @@ export const useUIStore = defineStore('ui', () => {
 
   function setThemeMode(mode: ThemeMode) {
     themeMode.value = mode
-    localStorage.setItem('themeMode', mode)
+    safeWrite('themeMode', mode)
   }
 
-  const sidebarCollapsed = ref(localStorage.getItem('sidebarCollapsed') === 'true')
-  watch(sidebarCollapsed, (v) =>
-    localStorage.setItem('sidebarCollapsed', String(v)),
-  )
+  const sidebarCollapsed = ref(safeReadString('sidebarCollapsed') === 'true')
+  watch(sidebarCollapsed, (v) => safeWrite('sidebarCollapsed', String(v)))
 
   return { themeMode, effectiveDark, setThemeMode, sidebarCollapsed }
 })