feat: 优化社区页面滚动和分页交互体验…)

⎿  [feature_2025/1028_event 5dedbb3] feat: 优化社区页面滚动和分页交互体验
      6 files changed, 1355 insertions(+), 49 deletions(-)
      create mode 100644 docs/test-cases/Community351241265351235242346265213350257225347224250344276213.md

src/views/Community/index.js

@@ -60,6 +60,7 @@ const Community = () => {
   // Ref：用于滚动到实时事件时间轴
   const eventTimelineRef = useRef(null);
   const hasScrolledRef = useRef(false); // 标记是否已滚动
+  const containerRef = useRef(null); // 用于首次滚动到内容区域
 
   // ⚡ 通知权限引导
   const { showCommunityGuide } = useNotification();
@@ -145,6 +146,23 @@ const Community = () => {
     }
   }, [showCommunityGuide]); // 只在组件挂载时执行一次
 
+  // ⚡ 首次进入页面时滚动到内容区域（考虑导航栏高度）
+  useEffect(() => {
+    // 延迟执行，确保DOM已完全渲染
+    const timer = setTimeout(() => {
+      if (containerRef.current) {
+        // 滚动到容器顶部，自动考虑导航栏的高度
+        containerRef.current.scrollIntoView({
+          behavior: 'auto',
+          block: 'start',
+          inline: 'nearest'
+        });
+      }
+    }, 0);
+
+    return () => clearTimeout(timer);
+  }, []); // 空依赖数组，只在组件挂载时执行一次
+
   // ⚡ 滚动到实时事件区域（由搜索框聚焦触发）
   const scrollToTimeline = useCallback(() => {
     if (!hasScrolledRef.current && eventTimelineRef.current) {
@@ -161,7 +179,7 @@ const Community = () => {
   return (
     <Box minH="100vh" bg={bgColor}>
       {/* 主内容区域 */}
-      <Container maxW="container.xl" pt={6} pb={8}>
+      <Container ref={containerRef} maxW="container.xl" pt={6} pb={8}>
         {/* 热点事件区域 */}
         <HotEventsSection events={hotEvents} />