使用heroui完成对页面的重构

components/TransitionWrapper.tsx

@@ -2,7 +2,7 @@
 
 import { useLanguage } from '@/contexts/LanguageContext';
 import ShatterTransition from './ShatterTransition';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 
 export default function TransitionWrapper({ children }: { children: React.ReactNode }) {
   const { transitionKey } = useLanguage();
@@ -22,14 +22,16 @@ export default function TransitionWrapper({ children }: { children: React.ReactN
     }
   }, [transitionKey]);
 
+  const handleComplete = useCallback(() => {
+    // 动画完成后的回调
+  }, []);
+
   return (
     <>
       {children}
       <ShatterTransition
         isActive={isActive}
-        onComplete={() => {
-          // 动画完成后的回调
-        }}
+        onComplete={handleComplete}
       />
     </>
   );