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

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

 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

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"
/>
{/* 市场复盘 - 左右布局 */}