生产管理系统前端 - 亮暗模式缓存问题修复

crop-x/src/components/layouts/ThemeToggle.tsx

@@ -1,14 +1,37 @@
+'use client';
+
 import { Moon, Sun } from 'lucide-react';
-import { useTheme } from '../../hooks/useTheme';
+import { useTheme } from 'next-themes';
 import { Button } from '../ui/button';
+import { useEffect, useState } from 'react';
 
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  // 避免服务端渲染和客户端渲染不匹配
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   const toggleTheme = () => {
     setTheme(theme === 'light' ? 'dark' : 'light');
   };
 
+  // 在组件挂载前不渲染，避免闪烁
+  if (!mounted) {
+    return (
+      <Button
+        variant="ghost"
+        size="icon"
+        disabled
+        className="transition-colors"
+      >
+        <Sun className="w-5 h-5" />
+      </Button>
+    );
+  }
+
   return (
     <Button
       variant="ghost"