feat: 大量优化和bug修复

2026-05-23 22:23:29 +08:00
parent 92b063c4c4
commit fc71e924e7
39 changed files with 1381 additions and 302 deletions
@@ -1,14 +1,20 @@
-// app/stores/global.ts - 全局通用状态（主题等），持久化由 @nuxtjs/color-mode 统一管理（localStorage/cookie）
+// app/stores/global.ts - 全局通用状态（主题等）
+//
+// 颜色模式改用 useCookie 持久化，这样 SSR 和客户端都能读到同一份值，
+// 避免因 localStorage 在 SSR 阶段不可用而产生水合不匹配（hydration mismatch）。
 export const useGlobalStore = defineStore("theme", () => {
-  // useColorMode 会自动读写持久化存储，class 也由其挂到 <html>
-  const colorMode = useColorMode();
+  // 用 Nuxt 的 useCookie：服务端从 request cookie 读取，客户端和正常 cookie 一致
+  const _pref = useCookie<"light" | "dark">("color-mode", {
+    default: () => "light",
+    sameSite: "lax"
+  });

  /** 当前是否深色模式 */
-  const isDark = computed(() => colorMode.value === "dark");
+  const isDark = computed(() => _pref.value === "dark");

  /** 切换深色 / 浅色 */
  const toggle = () => {
-    colorMode.value = isDark.value ? "light" : "dark";
+    _pref.value = isDark.value ? "light" : "dark";
  };

  /** vue-sonner Toaster 的 theme prop 值，跟随当前模式 */