feat: 删除无用代码
This commit is contained in:
@@ -1,63 +0,0 @@
|
|||||||
// src/views/Community/components/EventModals.js
|
|
||||||
// 事件弹窗组合组件(包含详情Modal和股票Drawer)
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import {
|
|
||||||
Modal,
|
|
||||||
ModalOverlay,
|
|
||||||
ModalContent,
|
|
||||||
ModalHeader,
|
|
||||||
ModalBody,
|
|
||||||
ModalCloseButton
|
|
||||||
} from '@chakra-ui/react';
|
|
||||||
import EventDetailModal from './EventDetailModal';
|
|
||||||
import StockDetailPanel from './StockDetailPanel';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 事件弹窗组合组件
|
|
||||||
* @param {Object} eventModalState - 事件详情Modal状态
|
|
||||||
* @param {boolean} eventModalState.isOpen - 是否打开
|
|
||||||
* @param {Function} eventModalState.onClose - 关闭回调
|
|
||||||
* @param {Object} eventModalState.event - 事件对象
|
|
||||||
* @param {Function} eventModalState.onEventClose - 事件关闭回调(清除状态)
|
|
||||||
* @param {Object} stockDrawerState - 股票详情Drawer状态
|
|
||||||
* @param {boolean} stockDrawerState.visible - 是否显示
|
|
||||||
* @param {Object} stockDrawerState.event - 事件对象
|
|
||||||
* @param {Function} stockDrawerState.onClose - 关闭回调
|
|
||||||
*/
|
|
||||||
const EventModals = ({
|
|
||||||
eventModalState,
|
|
||||||
stockDrawerState
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{/* 事件详情模态框 - 使用Chakra UI Modal */}
|
|
||||||
<Modal
|
|
||||||
isOpen={eventModalState.isOpen}
|
|
||||||
onClose={eventModalState.onClose}
|
|
||||||
size="xl"
|
|
||||||
>
|
|
||||||
<ModalOverlay />
|
|
||||||
<ModalContent>
|
|
||||||
<ModalHeader>事件详情</ModalHeader>
|
|
||||||
<ModalCloseButton />
|
|
||||||
<ModalBody pb={6}>
|
|
||||||
<EventDetailModal
|
|
||||||
event={eventModalState.event}
|
|
||||||
onClose={eventModalState.onEventClose}
|
|
||||||
/>
|
|
||||||
</ModalBody>
|
|
||||||
</ModalContent>
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
{/* 股票详情抽屉 - 使用原组件自带的 Antd Drawer */}
|
|
||||||
<StockDetailPanel
|
|
||||||
visible={stockDrawerState.visible}
|
|
||||||
event={stockDrawerState.event}
|
|
||||||
onClose={stockDrawerState.onClose}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default EventModals;
|
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
// src/views/Community/components/EventTimelineCard.js
|
|
||||||
// 事件时间轴卡片组件(整合Header + Search + List)
|
|
||||||
|
|
||||||
import React, { forwardRef } from 'react';
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardHeader,
|
|
||||||
CardBody,
|
|
||||||
Box,
|
|
||||||
useColorModeValue
|
|
||||||
} from '@chakra-ui/react';
|
|
||||||
import EventTimelineHeader from './EventTimelineHeader';
|
|
||||||
import UnifiedSearchBox from './UnifiedSearchBox';
|
|
||||||
import EventListSection from './EventListSection';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 事件时间轴卡片组件
|
|
||||||
* @param {Array} events - 事件列表
|
|
||||||
* @param {boolean} loading - 加载状态
|
|
||||||
* @param {Object} pagination - 分页信息
|
|
||||||
* @param {Object} filters - 筛选条件
|
|
||||||
* @param {Array} popularKeywords - 热门关键词
|
|
||||||
* @param {Date} lastUpdateTime - 最后更新时间
|
|
||||||
* @param {Function} onSearch - 搜索回调
|
|
||||||
* @param {Function} onSearchFocus - 搜索框获得焦点回调
|
|
||||||
* @param {Function} onPageChange - 分页变化回调
|
|
||||||
* @param {Function} onEventClick - 事件点击回调
|
|
||||||
* @param {Function} onViewDetail - 查看详情回调
|
|
||||||
* @param {Object} ref - 用于滚动的ref
|
|
||||||
*/
|
|
||||||
const EventTimelineCard = forwardRef(({
|
|
||||||
events,
|
|
||||||
loading,
|
|
||||||
pagination,
|
|
||||||
filters,
|
|
||||||
popularKeywords,
|
|
||||||
lastUpdateTime,
|
|
||||||
onSearch,
|
|
||||||
onSearchFocus,
|
|
||||||
onPageChange,
|
|
||||||
onEventClick,
|
|
||||||
onViewDetail,
|
|
||||||
...rest
|
|
||||||
}, ref) => {
|
|
||||||
const cardBg = useColorModeValue('white', 'gray.800');
|
|
||||||
const borderColor = useColorModeValue('gray.200', 'gray.700');
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card ref={ref} {...rest} bg={cardBg} borderColor={borderColor} mb={4}>
|
|
||||||
{/* 标题部分 */}
|
|
||||||
<CardHeader>
|
|
||||||
<EventTimelineHeader lastUpdateTime={lastUpdateTime} />
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
{/* 主体内容 */}
|
|
||||||
<CardBody>
|
|
||||||
{/* 统一搜索组件(整合了话题、股票、行业、日期、排序、重要性、热门概念、筛选标签) */}
|
|
||||||
<Box mb={4}>
|
|
||||||
<UnifiedSearchBox
|
|
||||||
onSearch={onSearch}
|
|
||||||
onSearchFocus={onSearchFocus}
|
|
||||||
popularKeywords={popularKeywords}
|
|
||||||
filters={filters}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{/* 事件列表(包含Loading、Empty、List三种状态) */}
|
|
||||||
<EventListSection
|
|
||||||
loading={loading}
|
|
||||||
events={events}
|
|
||||||
pagination={pagination}
|
|
||||||
onPageChange={onPageChange}
|
|
||||||
onEventClick={onEventClick}
|
|
||||||
onViewDetail={onViewDetail}
|
|
||||||
/>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
EventTimelineCard.displayName = 'EventTimelineCard';
|
|
||||||
|
|
||||||
export default EventTimelineCard;
|
|
||||||
@@ -1,11 +1,10 @@
|
|||||||
// src/views/Community/index.js
|
// src/views/Community/index.js
|
||||||
import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
|
import React, { useEffect, useRef } from 'react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { useSelector, useDispatch } from 'react-redux';
|
import { useSelector, useDispatch } from 'react-redux';
|
||||||
import {
|
import {
|
||||||
fetchPopularKeywords,
|
fetchPopularKeywords,
|
||||||
fetchHotEvents,
|
fetchHotEvents
|
||||||
fetchDynamicNews
|
|
||||||
} from '../../store/slices/communityDataSlice';
|
} from '../../store/slices/communityDataSlice';
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
@@ -14,10 +13,8 @@ import {
|
|||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
|
|
||||||
// 导入组件
|
// 导入组件
|
||||||
import EventTimelineCard from './components/EventTimelineCard';
|
|
||||||
import DynamicNewsCard from './components/DynamicNewsCard';
|
import DynamicNewsCard from './components/DynamicNewsCard';
|
||||||
import HotEventsSection from './components/HotEventsSection';
|
import HotEventsSection from './components/HotEventsSection';
|
||||||
import EventModals from './components/EventModals';
|
|
||||||
|
|
||||||
// 导入自定义 Hooks
|
// 导入自定义 Hooks
|
||||||
import { useEventData } from './hooks/useEventData';
|
import { useEventData } from './hooks/useEventData';
|
||||||
@@ -26,15 +23,12 @@ import { useCommunityEvents } from './hooks/useCommunityEvents';
|
|||||||
|
|
||||||
import { logger } from '../../utils/logger';
|
import { logger } from '../../utils/logger';
|
||||||
import { useNotification } from '../../contexts/NotificationContext';
|
import { useNotification } from '../../contexts/NotificationContext';
|
||||||
import { usePostHogTrack } from '../../hooks/usePostHogRedux';
|
|
||||||
import { RETENTION_EVENTS } from '../../lib/constants';
|
|
||||||
|
|
||||||
// 导航栏已由 MainLayout 提供,无需在此导入
|
// 导航栏已由 MainLayout 提供,无需在此导入
|
||||||
|
|
||||||
const Community = () => {
|
const Community = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const { track } = usePostHogTrack(); // PostHog 追踪(保留用于兼容)
|
|
||||||
|
|
||||||
// Redux状态
|
// Redux状态
|
||||||
const { popularKeywords, hotEvents } = useSelector(state => state.communityData);
|
const { popularKeywords, hotEvents } = useSelector(state => state.communityData);
|
||||||
@@ -42,26 +36,18 @@ const Community = () => {
|
|||||||
// Chakra UI hooks
|
// Chakra UI hooks
|
||||||
const bgColor = useColorModeValue('gray.50', 'gray.900');
|
const bgColor = useColorModeValue('gray.50', 'gray.900');
|
||||||
|
|
||||||
// Ref:用于滚动到实时事件时间轴
|
// Ref:用于首次滚动到内容区域
|
||||||
const eventTimelineRef = useRef(null);
|
const containerRef = useRef(null);
|
||||||
const hasScrolledRef = useRef(false); // 标记是否已滚动
|
|
||||||
const containerRef = useRef(null); // 用于首次滚动到内容区域
|
|
||||||
|
|
||||||
// ⚡ 通知权限引导
|
// ⚡ 通知权限引导
|
||||||
const { showCommunityGuide } = useNotification();
|
const { showCommunityGuide } = useNotification();
|
||||||
|
|
||||||
// Modal/Drawer状态
|
|
||||||
const [selectedEvent, setSelectedEvent] = useState(null);
|
|
||||||
const [selectedEventForStock, setSelectedEventForStock] = useState(null);
|
|
||||||
|
|
||||||
// 🎯 初始化Community埋点Hook
|
// 🎯 初始化Community埋点Hook
|
||||||
const communityEvents = useCommunityEvents({ navigate });
|
const communityEvents = useCommunityEvents({ navigate });
|
||||||
|
|
||||||
// 自定义 Hooks
|
// 自定义 Hooks
|
||||||
const { filters, updateFilters, handlePageChange, handleEventClick, handleViewDetail } = useEventFilters({
|
const { filters, updateFilters, handlePageChange, handleEventClick, handleViewDetail } = useEventFilters({
|
||||||
navigate,
|
navigate
|
||||||
onEventClick: (event) => setSelectedEventForStock(event),
|
|
||||||
eventTimelineRef
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const { events, pagination, loading, lastUpdateTime } = useEventData(filters);
|
const { events, pagination, loading, lastUpdateTime } = useEventData(filters);
|
||||||
@@ -72,28 +58,6 @@ const Community = () => {
|
|||||||
dispatch(fetchHotEvents());
|
dispatch(fetchHotEvents());
|
||||||
}, [dispatch]);
|
}, [dispatch]);
|
||||||
|
|
||||||
// 每5分钟刷新一次动态新闻(使用 prependMode 追加到头部)
|
|
||||||
useEffect(() => {
|
|
||||||
const interval = setInterval(() => {
|
|
||||||
dispatch(fetchDynamicNews({
|
|
||||||
page: 1,
|
|
||||||
per_page: 10, // 获取最新的10条
|
|
||||||
prependMode: true // 追加到头部,不清空缓存
|
|
||||||
}));
|
|
||||||
}, 5 * 60 * 1000);
|
|
||||||
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}, [dispatch]);
|
|
||||||
|
|
||||||
// 🎯 PostHog 追踪:页面浏览
|
|
||||||
// useEffect(() => {
|
|
||||||
// track(RETENTION_EVENTS.COMMUNITY_PAGE_VIEWED, {
|
|
||||||
// timestamp: new Date().toISOString(),
|
|
||||||
// has_hot_events: hotEvents && hotEvents.length > 0,
|
|
||||||
// has_keywords: popularKeywords && popularKeywords.length > 0,
|
|
||||||
// });
|
|
||||||
// }, [track]); // 只在组件挂载时执行一次
|
|
||||||
|
|
||||||
// 🎯 追踪新闻列表查看(当事件列表加载完成后)
|
// 🎯 追踪新闻列表查看(当事件列表加载完成后)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (events && events.length > 0 && !loading) {
|
if (events && events.length > 0 && !loading) {
|
||||||
@@ -136,19 +100,6 @@ const Community = () => {
|
|||||||
return () => clearTimeout(timer);
|
return () => clearTimeout(timer);
|
||||||
}, []); // 空依赖数组,只在组件挂载时执行一次
|
}, []); // 空依赖数组,只在组件挂载时执行一次
|
||||||
|
|
||||||
// ⚡ 滚动到实时事件区域(由搜索框聚焦触发)
|
|
||||||
const scrollToTimeline = useCallback(() => {
|
|
||||||
if (!hasScrolledRef.current && eventTimelineRef.current) {
|
|
||||||
eventTimelineRef.current.scrollIntoView({
|
|
||||||
behavior: 'smooth', // 平滑滚动动画
|
|
||||||
block: 'start', // 元素顶部对齐视口顶部,标题正好可见
|
|
||||||
inline: 'nearest' // 水平方向最小滚动
|
|
||||||
});
|
|
||||||
hasScrolledRef.current = true; // 标记已滚动
|
|
||||||
logger.debug('Community', '用户触发搜索,滚动到实时事件时间轴');
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box minH="100vh" bg={bgColor}>
|
<Box minH="100vh" bg={bgColor}>
|
||||||
{/* 主内容区域 */}
|
{/* 主内容区域 */}
|
||||||
@@ -163,43 +114,10 @@ const Community = () => {
|
|||||||
popularKeywords={popularKeywords}
|
popularKeywords={popularKeywords}
|
||||||
lastUpdateTime={lastUpdateTime}
|
lastUpdateTime={lastUpdateTime}
|
||||||
onSearch={updateFilters}
|
onSearch={updateFilters}
|
||||||
onSearchFocus={scrollToTimeline}
|
|
||||||
onEventClick={handleEventClick}
|
onEventClick={handleEventClick}
|
||||||
onViewDetail={handleViewDetail}
|
onViewDetail={handleViewDetail}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* 实时事件 - 原纵向列表 */}
|
|
||||||
{/* <EventTimelineCard
|
|
||||||
ref={eventTimelineRef}
|
|
||||||
mt={6}
|
|
||||||
events={events}
|
|
||||||
loading={loading}
|
|
||||||
pagination={pagination}
|
|
||||||
filters={filters}
|
|
||||||
popularKeywords={popularKeywords}
|
|
||||||
lastUpdateTime={lastUpdateTime}
|
|
||||||
onSearch={updateFilters}
|
|
||||||
onSearchFocus={scrollToTimeline}
|
|
||||||
onPageChange={handlePageChange}
|
|
||||||
onEventClick={handleEventClick}
|
|
||||||
onViewDetail={handleViewDetail}
|
|
||||||
/> */}
|
|
||||||
</Container>
|
</Container>
|
||||||
|
|
||||||
{/* 事件弹窗 */}
|
|
||||||
{/* <EventModals
|
|
||||||
eventModalState={{
|
|
||||||
isOpen: !!selectedEvent,
|
|
||||||
onClose: () => setSelectedEvent(null),
|
|
||||||
event: selectedEvent,
|
|
||||||
onEventClose: () => setSelectedEvent(null)
|
|
||||||
}}
|
|
||||||
stockDrawerState={{
|
|
||||||
visible: !!selectedEventForStock,
|
|
||||||
event: selectedEventForStock,
|
|
||||||
onClose: () => setSelectedEventForStock(null)
|
|
||||||
}}
|
|
||||||
/> */}
|
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user