feat(web): 首页每日推荐和历史今天自动定时刷新

添加 30 分钟定时轮询、跨天检测刷新和标签页可见性刷新机制，
确保用户长时间停留在首页时数据保持更新。

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: ximing

apps/web/src/pages/home/components/daily-recommendations.tsx

@@ -27,9 +27,11 @@ export function DailyRecommendations() {
     return `${month}月${day}日 ${weekday}`;
   }, []);
 
-  // Fetch recommendations on mount
+  // Fetch recommendations on mount, with auto-refresh
   useEffect(() => {
     let isMounted = true;
+    let refreshTimer: ReturnType<typeof setInterval> | null = null;
+    let currentDay = new Date().getDate();
 
     async function fetchRecommendations() {
       try {
@@ -59,8 +61,33 @@ export function DailyRecommendations() {
 
     fetchRecommendations();
 
+    // Auto-refresh every 30 minutes
+    refreshTimer = setInterval(() => {
+      const now = new Date();
+      // Refresh if day changed or on regular interval
+      if (now.getDate() !== currentDay) {
+        currentDay = now.getDate();
+      }
+      fetchRecommendations();
+    }, 30 * 60 * 1000);
+
+    // Refresh when tab becomes visible again
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        const now = new Date();
+        if (now.getDate() !== currentDay) {
+          currentDay = now.getDate();
+          fetchRecommendations();
+        }
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
     return () => {
       isMounted = false;
+      if (refreshTimer) clearInterval(refreshTimer);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
     };
   }, []);
 

apps/web/src/pages/home/components/on-this-day-banner.tsx

@@ -29,22 +29,57 @@ export const OnThisDayBanner = view(() => {
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    let isMounted = true;
+    let refreshTimer: ReturnType<typeof setInterval> | null = null;
+    let currentDay = new Date().getDate();
+
     const fetchOnThisDayMemos = async () => {
       setIsLoading(true);
       try {
         const response = await memoApi.getOnThisDayMemos();
+        if (!isMounted) return;
         if (response.code === 0 && response.data) {
-          // Take at most 5 memos for the banner
           setMemos(response.data.items.slice(0, 5));
         }
       } catch (error) {
+        if (!isMounted) return;
         console.error('Failed to fetch on this day memos:', error);
       } finally {
-        setIsLoading(false);
+        if (isMounted) {
+          setIsLoading(false);
+        }
       }
     };
 
     fetchOnThisDayMemos();
+
+    // Auto-refresh every 30 minutes
+    refreshTimer = setInterval(() => {
+      const now = new Date();
+      if (now.getDate() !== currentDay) {
+        currentDay = now.getDate();
+      }
+      fetchOnThisDayMemos();
+    }, 30 * 60 * 1000);
+
+    // Refresh when tab becomes visible again and day has changed
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        const now = new Date();
+        if (now.getDate() !== currentDay) {
+          currentDay = now.getDate();
+          fetchOnThisDayMemos();
+        }
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => {
+      isMounted = false;
+      if (refreshTimer) clearInterval(refreshTimer);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
   }, []);
 
   // Handle horizontal scroll with mouse wheel