136 lines
4.4 KiB
JavaScript
136 lines
4.4 KiB
JavaScript
// src/views/Community/index.js
|
||
import React, { useEffect, useRef } from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { useSelector, useDispatch } from 'react-redux';
|
||
import {
|
||
fetchPopularKeywords,
|
||
fetchHotEvents
|
||
} from '../../store/slices/communityDataSlice';
|
||
import {
|
||
Box,
|
||
Container,
|
||
useColorModeValue,
|
||
} from '@chakra-ui/react';
|
||
|
||
// 导入组件
|
||
import DynamicNewsCard from './components/DynamicNewsCard';
|
||
import HotEventsSection from './components/HotEventsSection';
|
||
|
||
// 导入自定义 Hooks
|
||
import { useEventData } from './hooks/useEventData';
|
||
import { useEventFilters } from './hooks/useEventFilters';
|
||
import { useCommunityEvents } from './hooks/useCommunityEvents';
|
||
|
||
import { logger } from '../../utils/logger';
|
||
import { useNotification } from '../../contexts/NotificationContext';
|
||
|
||
// 导航栏已由 MainLayout 提供，无需在此导入
|
||
|
||
const Community = () => {
|
||
const navigate = useNavigate();
|
||
const dispatch = useDispatch();
|
||
|
||
// Redux状态
|
||
const { popularKeywords, hotEvents } = useSelector(state => state.communityData);
|
||
|
||
// Chakra UI hooks
|
||
const bgColor = useColorModeValue('gray.50', 'gray.900');
|
||
|
||
// Ref：用于首次滚动到内容区域
|
||
const containerRef = useRef(null);
|
||
|
||
// ⚡ 通知权限引导
|
||
const { showCommunityGuide } = useNotification();
|
||
|
||
// 🎯 初始化Community埋点Hook
|
||
const communityEvents = useCommunityEvents({ navigate });
|
||
|
||
// 自定义 Hooks
|
||
const { filters, updateFilters, handlePageChange, handleEventClick, handleViewDetail } = useEventFilters({
|
||
navigate
|
||
});
|
||
|
||
const { events, pagination, loading, lastUpdateTime } = useEventData(filters);
|
||
|
||
// 加载热门关键词和热点事件（动态新闻由 DynamicNewsCard 内部管理）
|
||
useEffect(() => {
|
||
dispatch(fetchPopularKeywords());
|
||
dispatch(fetchHotEvents());
|
||
}, [dispatch]);
|
||
|
||
// 🎯 追踪新闻列表查看（当事件列表加载完成后）
|
||
useEffect(() => {
|
||
if (events && events.length > 0 && !loading) {
|
||
communityEvents.trackNewsListViewed({
|
||
totalCount: pagination?.total || events.length,
|
||
sortBy: filters.sort,
|
||
importance: filters.importance,
|
||
dateRange: filters.date_range,
|
||
industryFilter: filters.industry_code,
|
||
});
|
||
}
|
||
}, [events, loading, pagination, filters]);
|
||
|
||
// ⚡ 首次访问社区时，延迟显示权限引导
|
||
useEffect(() => {
|
||
if (showCommunityGuide) {
|
||
const timer = setTimeout(() => {
|
||
logger.info('Community', '显示社区权限引导');
|
||
showCommunityGuide();
|
||
}, 5000); // 延迟 5 秒，让用户先浏览页面
|
||
|
||
return () => clearTimeout(timer);
|
||
}
|
||
}, [showCommunityGuide]); // 只在组件挂载时执行一次
|
||
|
||
// ⚡ 首次进入页面时滚动到内容区域（考虑导航栏高度）
|
||
useEffect(() => {
|
||
// 延迟执行，确保DOM已完全渲染
|
||
const timer = setTimeout(() => {
|
||
if (containerRef.current) {
|
||
// 滚动到容器顶部，自动考虑导航栏的高度
|
||
containerRef.current.scrollIntoView({
|
||
behavior: 'auto',
|
||
block: 'start',
|
||
inline: 'nearest'
|
||
});
|
||
}
|
||
}, 0);
|
||
|
||
return () => clearTimeout(timer);
|
||
}, []); // 空依赖数组，只在组件挂载时执行一次
|
||
|
||
return (
|
||
<Box minH="100vh" bg={bgColor}>
|
||
{/* 主内容区域 */}
|
||
<Container ref={containerRef} maxW="1600px" pt={6} pb={8}>
|
||
{/* 热点事件区域 */}
|
||
<HotEventsSection
|
||
events={hotEvents}
|
||
onEventClick={communityEvents.trackNewsArticleClicked}
|
||
/>
|
||
|
||
{/* 实时要闻·动态追踪 - 横向滚动 */}
|
||
<DynamicNewsCard
|
||
mt={6}
|
||
filters={filters}
|
||
popularKeywords={popularKeywords}
|
||
lastUpdateTime={lastUpdateTime}
|
||
onSearch={updateFilters}
|
||
onEventClick={handleEventClick}
|
||
onViewDetail={handleViewDetail}
|
||
trackingFunctions={{
|
||
trackNewsArticleClicked: communityEvents.trackNewsArticleClicked,
|
||
trackNewsDetailOpened: communityEvents.trackNewsDetailOpened,
|
||
trackNewsFilterApplied: communityEvents.trackNewsFilterApplied,
|
||
trackNewsSorted: communityEvents.trackNewsSorted,
|
||
trackNewsSearched: communityEvents.trackNewsSearched,
|
||
trackRelatedStockClicked: communityEvents.trackRelatedStockClicked,
|
||
}}
|
||
/>
|
||
</Container>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default Community; |