✨ feat: Add fade-in animation for greeting message

- Add greetingVisible state to control animation trigger
- Implement fade-in effect with 1-second smooth transition
- Set 100ms delay before animation starts
- Apply opacity transition from 0 to 1 using ease-in-out timing
- Enhance user experience with smooth visual feedback on page load

The greeting message now appears with an elegant fade-in animation,
transitioning from transparent to fully visible over 1 second,
providing better visual appeal and user engagement.

web/src/pages/Detail/index.js

@@ -193,6 +193,7 @@ const Detail = (props) => {
   const [dataExportDefaultTime, setDataExportDefaultTime] = useState(getDefaultTime());
 
   const [loading, setLoading] = useState(false);
+  const [greetingVisible, setGreetingVisible] = useState(false);
   const [quotaData, setQuotaData] = useState([]);
   const [consumeQuota, setConsumeQuota] = useState(0);
   const [consumeTokens, setConsumeTokens] = useState(0);
@@ -752,6 +753,13 @@ const Detail = (props) => {
     return () => clearTimeout(timer);
   }, [uptimeData, activeUptimeTab]);
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setGreetingVisible(true);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, []);
+
   const getUserData = async () => {
     let res = await API.get(`/api/user/self`);
     const { success, message, data } = res.data;
@@ -1112,7 +1120,12 @@ const Detail = (props) => {
   return (
     <div className="bg-gray-50 h-full mt-[64px]">
       <div className="flex items-center justify-between mb-4">
-        <h2 className="text-2xl font-semibold text-gray-800">{getGreeting}</h2>
+        <h2
+          className="text-2xl font-semibold text-gray-800 transition-opacity duration-1000 ease-in-out"
+          style={{ opacity: greetingVisible ? 1 : 0 }}
+        >
+          {getGreeting}
+        </h2>
         <div className="flex gap-3">
           <Button
             type='tertiary'