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

@@ -214,6 +214,41 @@ export const eventHandlers = [
}
}),
// 切换事件关注状态
http.post('/api/events/:eventId/follow', async ({ params }) => {
await delay(200);
const { eventId } = params;
console.log('[Mock] 切换事件关注状态, eventId:', eventId);
try {
// 模拟切换逻辑:随机生成关注状态
// 实际应用中,这里应该从某个状态存储中读取和更新
const isFollowing = Math.random() > 0.5;
const followerCount = Math.floor(Math.random() * 1000) + 100;
return HttpResponse.json({
success: true,
data: {
is_following: isFollowing,
follower_count: followerCount
},
message: isFollowing ? '关注成功' : '取消关注成功'
});
} catch (error) {
console.error('[Mock] 切换事件关注状态失败:', error);
return HttpResponse.json(
{
success: false,
error: '切换关注状态失败',
data: null
},
{ status: 500 }
);
}
}),
// 获取事件传导链分析数据
http.get('/api/events/:eventId/transmission', async ({ params }) => {
await delay(500);