vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 实现 Redux 全局状态管理事件关注功能

Browse Source 
本次提交实现了滚动列表和事件详情的关注按钮状态同步：

✅ Redux 状态管理
- communityDataSlice.js: 添加 eventFollowStatus state
- 新增 toggleEventFollow AsyncThunk（复用 EventList.js 逻辑）
- 新增 setEventFollowStatus reducer 和 selectEventFollowStatus selector

✅ 组件集成
- DynamicNewsCard.js: 从 Redux 读取关注状态并传递给子组件
- EventScrollList.js: 接收并传递关注状态给事件卡片
- DynamicNewsDetailPanel.js: 移除本地 state，使用 Redux 状态

✅ Mock API 支持
- event.js: 添加 POST /api/events/:eventId/follow 处理器
- 返回 { is_following, follower_count } 模拟数据

✅ Bug 修复
- EventDetail/index.js: 添加 useRef 导入
- concept.js: 导出 generatePopularConcepts 函数
- event.js: 添加 /api/events/:eventId/concepts 处理器

功能：
- 点击滚动列表的关注按钮，详情面板的关注状态自动同步
- 点击详情面板的关注按钮，滚动列表的关注状态自动同步
- 关注人数实时更新
- 状态在整个应用中保持一致

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-11-03 17:40:09 +08:00
parent 6a0a8e8e2b
commit f17a8fbd87
6 changed files with 308 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/views/Community/components/DynamicNewsCard.js
View File

@@ -1,8 +1,8 @@
// src/views/Community/components/DynamicNewsCard.js
// 横向滚动事件卡片组件（实时要闻·动态追踪）
import React, { forwardRef, useState, useEffect } from 'react';
import { useDispatch } from 'react-redux';
import React, { forwardRef, useState, useEffect, useMemo, useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
Card,
CardHeader,
@@ -22,13 +22,14 @@ import { TimeIcon } from '@chakra-ui/icons';
import EventScrollList from './DynamicNewsCard/EventScrollList';
import DynamicNewsDetailPanel from './DynamicNewsDetail';
import UnifiedSearchBox from './UnifiedSearchBox';
import { fetchDynamicNews } from '../../../store/slices/communityDataSlice';
import { fetchDynamicNews, toggleEventFollow, selectEventFollowStatus } from '../../../store/slices/communityDataSlice';
/**
* 实时要闻·动态追踪 - 事件展示卡片组件
* @param {Array} events - 事件列表
* @param {Array} allCachedEvents - 完整缓存事件列表（从 Redux 传入）
* @param {boolean} loading - 加载状态
* @param {Object} pagination - 分页信息 { page, per_page, total, total_pages }
* @param {number} total - 服务端总数量
* @param {number} cachedCount - 已缓存数量
* @param {Object} filters - 筛选条件
* @param {Array} popularKeywords - 热门关键词
* @param {Date} lastUpdateTime - 最后更新时间
@@ -36,13 +37,13 @@ import { fetchDynamicNews } from '../../../store/slices/communityDataSlice';
* @param {Function} onSearchFocus - 搜索框获得焦点回调
* @param {Function} onEventClick - 事件点击回调
* @param {Function} onViewDetail - 查看详情回调
* @param {string} mode - 展示模式：'carousel'（单排轮播5个）| 'grid'（双排网格10个）
* @param {Object} ref - 用于滚动的ref
*/
const DynamicNewsCard = forwardRef(({
events,
allCachedEvents = [],
loading,
pagination = {},
total = 0,
cachedCount = 0,
filters = {},
popularKeywords = [],
lastUpdateTime,
@@ -55,41 +56,104 @@ const DynamicNewsCard = forwardRef(({
const dispatch = useDispatch();
const cardBg = useColorModeValue('white', 'gray.800');
const borderColor = useColorModeValue('gray.200', 'gray.700');
// 从 Redux 读取关注状态
const eventFollowStatus = useSelector(selectEventFollowStatus);
// 关注按钮点击处理
const handleToggleFollow = useCallback((eventId) => {
dispatch(toggleEventFollow(eventId));
}, [dispatch]);
// 本地状态
const [selectedEvent, setSelectedEvent] = useState(null);
const [mode, setMode] = useState('carousel'); // 'carousel' 或 'grid'，默认单排
const [currentPage, setCurrentPage] = useState(1); // 当前页码
// 根据模式决定每页显示数量
const pageSize = mode === 'carousel' ? 5 : 10; // carousel: 5个, grid: 10个
const currentPage = pagination.page || 1;
const totalPages = pagination.total_pages || 1;
const pageSize = mode === 'carousel' ? 5 : 10;
// 计算总页数（基于缓存数量）
const totalPages = Math.ceil(cachedCount / pageSize) || 1;
// 检查是否还有更多数据
const hasMore = cachedCount < total;
// 从缓存中切片获取当前页数据
const currentPageEvents = useMemo(() => {
const startIndex = (currentPage - 1) * pageSize;
const endIndex = startIndex + pageSize;
return allCachedEvents.slice(startIndex, endIndex);
}, [allCachedEvents, currentPage, pageSize]);
// 检查是否需要请求更多数据
const shouldFetchMore = useCallback((targetPage) => {
const requiredCount = targetPage * pageSize;
// 如果缓存不足，且服务端还有更多数据
return cachedCount < requiredCount && hasMore;
}, [cachedCount, total, pageSize, hasMore]);
// 翻页处理
const handlePageChange = useCallback((newPage) => {
// 向后翻页（上一页）：不请求，直接切换
if (newPage < currentPage) {
setCurrentPage(newPage);
return;
}
// 向前翻页（下一页）：检查是否需要请求
if (shouldFetchMore(newPage)) {
// 计算需要请求的页码（从缓存末尾继续）
const nextFetchPage = Math.ceil(cachedCount / pageSize) + 1;
dispatch(fetchDynamicNews({
page: nextFetchPage,
per_page: pageSize,
clearCache: false
}));
}
setCurrentPage(newPage);
}, [currentPage, cachedCount, pageSize, shouldFetchMore, dispatch]);
// 模式切换处理
const handleModeToggle = (newMode) => {
if (newMode !== mode) {
setMode(newMode);
// 切换模式时重置到第1页并重新请求数据
const newPageSize = newMode === 'carousel' ? 5 : 10;
dispatch(fetchDynamicNews({ page: 1, per_page: newPageSize }));
// 清除当前选中的事件
setSelectedEvent(null);
const handleModeToggle = useCallback((newMode) => {
if (newMode === mode) return;
setMode(newMode);
setCurrentPage(1);
const newPageSize = newMode === 'carousel' ? 5 : 10;
// 检查缓存是否足够显示第1页
if (cachedCount < newPageSize) {
// 清空缓存，重新请求
dispatch(fetchDynamicNews({
page: 1,
per_page: newPageSize,
clearCache: true
}));
}
};
// 如果缓存足够，不发起请求，直接切换
}, [mode, cachedCount, dispatch]);
// 初始加载
useEffect(() => {
if (allCachedEvents.length === 0) {
dispatch(fetchDynamicNews({
page: 1,
per_page: 5,
clearCache: true
}));
}
}, [dispatch, allCachedEvents.length]);
// 默认选中第一个事件
useEffect(() => {
if (events && events.length > 0 && !selectedEvent) {
setSelectedEvent(events[0]);
if (currentPageEvents.length > 0 && !selectedEvent) {
setSelectedEvent(currentPageEvents[0]);
}
}, [events, selectedEvent]);
// 页码改变时，触发服务端分页请求
const handlePageChange = (newPage) => {
// 发起 Redux action 获取新页面数据
dispatch(fetchDynamicNews({ page: newPage, per_page: pageSize }));
// 保持当前选中事件，避免详情面板消失导致页面抖动
// 新数据加载完成后，useEffect 会自动选中第一个事件
};
}, [currentPageEvents, selectedEvent]);
return (
<Card ref={ref} {...rest} bg={cardBg} borderColor={borderColor} mb={4}>
@@ -128,9 +192,9 @@ const DynamicNewsCard = forwardRef(({
{/* 主体内容 */}
<CardBody position="relative" pt={0}>
{/* 横向滚动事件列表 - 始终渲染（除非为空） */}
{events && events.length > 0 ? (
{currentPageEvents && currentPageEvents.length > 0 ? (
<EventScrollList
events={events}
events={currentPageEvents}
selectedEvent={selectedEvent}
onEventSelect={setSelectedEvent}
borderColor={borderColor}
@@ -140,6 +204,9 @@ const DynamicNewsCard = forwardRef(({
loading={loading}
mode={mode}
onModeChange={handleModeToggle}
eventFollowStatus={eventFollowStatus}
onToggleFollow={handleToggleFollow}
hasMore={hasMore}
/>
) : !loading ? (
/* Empty 状态 - 只在非加载且无数据时显示 */
@@ -159,7 +226,7 @@ const DynamicNewsCard = forwardRef(({
)}
{/* 详情面板 - 始终显示（如果有选中事件） */}
{events && events.length > 0 && selectedEvent && (
{currentPageEvents && currentPageEvents.length > 0 && selectedEvent && (
<Box mt={6}>
<DynamicNewsDetailPanel event={selectedEvent} />
</Box>

23
src/views/Community/components/DynamicNewsCard/EventScrollList.js
View File

@@ -31,6 +31,9 @@ import PaginationControl from './PaginationControl';
* @param {boolean} loading - 加载状态
* @param {string} mode - 展示模式：'carousel'（单排轮播）| 'grid'（双排网格）
* @param {Function} onModeChange - 模式切换回调
* @param {boolean} hasMore - 是否还有更多数据
* @param {Object} eventFollowStatus - 事件关注状态 { [eventId]: { isFollowing, followerCount } }
* @param {Function} onToggleFollow - 关注按钮回调
*/
const EventScrollList = ({
events,
@@ -42,7 +45,10 @@ const EventScrollList = ({
onPageChange,
loading = false,
mode = 'carousel',
onModeChange
onModeChange,
hasMore = true,
eventFollowStatus = {},
onToggleFollow
}) => {
const scrollContainerRef = useRef(null);
@@ -121,7 +127,7 @@ const EventScrollList = ({
)}
{/* 右侧翻页按钮 - 下一页 */}
{currentPage < totalPages && (
{currentPage < totalPages && hasMore && (
<IconButton
icon={<ChevronRightIcon boxSize={6} color="blue.500" />}
position="absolute"
@@ -143,6 +149,7 @@ const EventScrollList = ({
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
transform: 'translateY(-50%) scale(1.05)'
}}
isDisabled={currentPage >= totalPages && !hasMore}
aria-label="下一页"
title="下一页"
/>
@@ -211,8 +218,8 @@ const EventScrollList = ({
<DynamicNewsEventCard
event={event}
index={index}
isFollowing={false}
followerCount={event.follower_count || 0}
isFollowing={eventFollowStatus[event.id]?.isFollowing || false}
followerCount={eventFollowStatus[event.id]?.followerCount || event.follower_count || 0}
isSelected={selectedEvent?.id === event.id}
onEventClick={(clickedEvent) => {
onEventSelect(clickedEvent);
@@ -222,7 +229,7 @@ const EventScrollList = ({
e.stopPropagation();
onEventSelect(event);
}}
onToggleFollow={() => {}}
onToggleFollow={() => onToggleFollow?.(event.id)}
timelineStyle={getTimelineBoxStyle()}
borderColor={borderColor}
/>
@@ -244,8 +251,8 @@ const EventScrollList = ({
<DynamicNewsEventCard
event={event}
index={index}
isFollowing={false}
followerCount={event.follower_count || 0}
isFollowing={eventFollowStatus[event.id]?.isFollowing || false}
followerCount={eventFollowStatus[event.id]?.followerCount || event.follower_count || 0}
isSelected={selectedEvent?.id === event.id}
onEventClick={(clickedEvent) => {
onEventSelect(clickedEvent);
@@ -255,7 +262,7 @@ const EventScrollList = ({
e.stopPropagation();
onEventSelect(event);
}}
onToggleFollow={() => {}}
onToggleFollow={() => onToggleFollow?.(event.id)}
timelineStyle={getTimelineBoxStyle()}
borderColor={borderColor}
/>

33
src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js
View File

@@ -2,6 +2,7 @@
// 动态新闻详情面板主组件（组装所有子组件）
import React, { useState, useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
Card,
CardBody,
@@ -15,6 +16,7 @@ import {
import { getImportanceConfig } from '../../../../constants/importanceLevels';
import { eventService } from '../../../../services/eventService';
import { useEventStocks } from '../StockDetailPanel/hooks/useEventStocks';
import { toggleEventFollow, selectEventFollowStatus } from '../../../../store/slices/communityDataSlice';
import EventHeaderInfo from './EventHeaderInfo';
import EventDescriptionSection from './EventDescriptionSection';
import RelatedConceptsSection from './RelatedConceptsSection';
@@ -29,11 +31,17 @@ import TransmissionChainAnalysis from '../../../EventDetail/components/Transmiss
* @param {Object} props.event - 事件对象（包含详情数据）
*/
const DynamicNewsDetailPanel = ({ event }) => {
const dispatch = useDispatch();
const cardBg = useColorModeValue('white', 'gray.800');
const borderColor = useColorModeValue('gray.200', 'gray.700');
const textColor = useColorModeValue('gray.600', 'gray.400');
const toast = useToast();
// 从 Redux 读取关注状态
const eventFollowStatus = useSelector(selectEventFollowStatus);
const isFollowing = event?.id ? (eventFollowStatus[event.id]?.isFollowing || false) : false;
const followerCount = event?.id ? (eventFollowStatus[event.id]?.followerCount || event.follower_count || 0) : 0;
// 使用 Hook 获取实时数据
const {
stocks,
@@ -49,10 +57,6 @@ const DynamicNewsDetailPanel = ({ event }) => {
const [isHistoricalOpen, setIsHistoricalOpen] = useState(true);
const [isTransmissionOpen, setIsTransmissionOpen] = useState(false);
// 关注状态管理
const [isFollowing, setIsFollowing] = useState(false);
const [followerCount, setFollowerCount] = useState(0);
// 自选股管理（使用 localStorage）
const [watchlistSet, setWatchlistSet] = useState(() => {
try {
@@ -64,23 +68,10 @@ const DynamicNewsDetailPanel = ({ event }) => {
});
// 切换关注状态
const handleToggleFollow = async () => {
try {
if (isFollowing) {
// 取消关注
await eventService.unfollowEvent(event.id);
setIsFollowing(false);
setFollowerCount(prev => Math.max(0, prev - 1));
} else {
// 添加关注
await eventService.followEvent(event.id);
setIsFollowing(true);
setFollowerCount(prev => prev + 1);
}
} catch (error) {
console.error('切换关注状态失败:', error);
}
};
const handleToggleFollow = useCallback(async () => {
if (!event?.id) return;
dispatch(toggleEventFollow(event.id));
}, [dispatch, event?.id]);
// 切换自选股
const handleWatchlistToggle = useCallback(async (stockCode, isInWatchlist) => {

22
src/views/Community/index.js
View File

@@ -48,10 +48,11 @@ const Community = () => {
// Redux状态
const { popularKeywords, hotEvents } = useSelector(state => state.communityData);
const {
data: dynamicNewsEvents,
data: allCachedEvents,
loading: dynamicNewsLoading,
error: dynamicNewsError,
pagination: dynamicNewsPagination
total: dynamicNewsTotal,
cachedCount: dynamicNewsCachedCount
} = useSelector(selectDynamicNewsWithLoading);
// Chakra UI hooks
@@ -96,17 +97,20 @@ const Community = () => {
};
}, [events]);
// 加载热门关键词、热点事件和动态新闻（使用Redux）
// 加载热门关键词和热点事件（动态新闻由 DynamicNewsCard 内部管理）
useEffect(() => {
dispatch(fetchPopularKeywords());
dispatch(fetchHotEvents());
dispatch(fetchDynamicNews());
}, [dispatch]);
// 每5分钟刷新一次动态新闻
// 每5分钟刷新一次动态新闻（使用 prependMode 追加到头部）
useEffect(() => {
const interval = setInterval(() => {
dispatch(fetchDynamicNews());
dispatch(fetchDynamicNews({
page: 1,
per_page: 10, // 获取最新的10条
prependMode: true // 追加到头部，不清空缓存
}));
}, 5 * 60 * 1000);
return () => clearInterval(interval);
@@ -186,9 +190,10 @@ const Community = () => {
{/* 实时要闻·动态追踪 - 横向滚动 */}
<DynamicNewsCard
mt={6}
events={dynamicNewsEvents}
allCachedEvents={allCachedEvents}
loading={dynamicNewsLoading}
pagination={dynamicNewsPagination}
total={dynamicNewsTotal}
cachedCount={dynamicNewsCachedCount}
filters={filters}
popularKeywords={popularKeywords}
lastUpdateTime={lastUpdateTime}
@@ -196,7 +201,6 @@ const Community = () => {
onSearchFocus={scrollToTimeline}
onEventClick={handleEventClick}
onViewDetail={handleViewDetail}
mode="grid"
/>
{/* 市场复盘 - 左右布局 */}