打磨细节

components/TransitionWrapper.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { useLanguage } from '@/contexts/LanguageContext';
+import ShatterTransition from './ShatterTransition';
+import { useState, useEffect } from 'react';
+
+export default function TransitionWrapper({ children }: { children: React.ReactNode }) {
+  const { transitionKey } = useLanguage();
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(() => {
+    // transitionKey > 0 表示已经发生过语言切换
+    if (transitionKey > 0) {
+      setIsActive(true);
+
+      // 动画结束后重置状态
+      const timer = setTimeout(() => {
+        setIsActive(false);
+      }, 1500);
+
+      return () => clearTimeout(timer);
+    }
+  }, [transitionKey]);
+
+  return (
+    <>
+      {children}
+      <ShatterTransition
+        isActive={isActive}
+        onComplete={() => {
+          // 动画完成后的回调
+        }}
+      />
+    </>
+  );
+}