feat: 事件关注功能优化 - Redux 乐观更新 + Mock 数据状态同步
1. communityDataSlice 添加事件关注乐观更新 - pending: 立即切换 isFollowing 状态 - rejected: 回滚到之前状态 - fulfilled: 使用 API 返回的准确数据覆盖 2. Mock 数据添加内存状态管理 - 新增 followedEventsSet 和 followedEventsMap 存储 - toggleEventFollowStatus: 切换关注状态 - isEventFollowed: 检查是否已关注 - getFollowedEvents: 获取关注事件列表 3. Mock handlers 使用内存状态 - follow handler: 使用 toggleEventFollowStatus - following handler: 使用 getFollowedEvents 动态返回 - 事件详情: 返回正确的 is_following 状态 修复: 关注事件后导航栏"自选事件"列表不同步更新的问题 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { getEventRelatedStocks, generateMockEvents, generateHotEvents, generatePopularKeywords, generateDynamicNewsEvents } from '../data/events';
|
||||
import { getMockFutureEvents, getMockEventCountsForMonth } from '../data/account';
|
||||
import { getMockFutureEvents, getMockEventCountsForMonth, toggleEventFollowStatus, isEventFollowed } from '../data/account';
|
||||
import { generatePopularConcepts } from './concept';
|
||||
|
||||
// 模拟网络延迟
|
||||
@@ -260,15 +260,19 @@ export const eventHandlers = [
|
||||
await delay(200);
|
||||
|
||||
const { eventId } = params;
|
||||
const numericEventId = parseInt(eventId, 10);
|
||||
|
||||
console.log('[Mock] 获取事件详情, eventId:', eventId);
|
||||
console.log('[Mock] 获取事件详情, eventId:', numericEventId);
|
||||
|
||||
try {
|
||||
// 检查是否已关注
|
||||
const isFollowing = isEventFollowed(numericEventId);
|
||||
|
||||
// 返回模拟的事件详情数据
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: {
|
||||
id: parseInt(eventId),
|
||||
id: numericEventId,
|
||||
title: `测试事件 ${eventId} - 重大政策发布`,
|
||||
description: '这是一个模拟的事件描述,用于开发测试。该事件涉及重要政策变化,可能对相关板块产生显著影响。建议关注后续发展动态。',
|
||||
importance: ['S', 'A', 'B', 'C'][Math.floor(Math.random() * 4)],
|
||||
@@ -278,7 +282,7 @@ export const eventHandlers = [
|
||||
related_avg_chg: parseFloat((Math.random() * 10 - 5).toFixed(2)),
|
||||
follower_count: Math.floor(Math.random() * 500) + 50,
|
||||
view_count: Math.floor(Math.random() * 5000) + 100,
|
||||
is_following: false,
|
||||
is_following: isFollowing, // 使用内存状态
|
||||
post_count: Math.floor(Math.random() * 50),
|
||||
expectation_surprise_score: parseFloat((Math.random() * 100).toFixed(1)),
|
||||
},
|
||||
@@ -395,19 +399,29 @@ export const eventHandlers = [
|
||||
}
|
||||
}),
|
||||
|
||||
// 切换事件关注状态
|
||||
http.post('/api/events/:eventId/follow', async ({ params }) => {
|
||||
// 切换事件关注状态(使用内存状态管理)
|
||||
http.post('/api/events/:eventId/follow', async ({ params, request }) => {
|
||||
await delay(200);
|
||||
|
||||
const { eventId } = params;
|
||||
const numericEventId = parseInt(eventId, 10);
|
||||
|
||||
console.log('[Mock] 切换事件关注状态, eventId:', eventId);
|
||||
console.log('[Mock] 切换事件关注状态, eventId:', numericEventId);
|
||||
|
||||
try {
|
||||
// 模拟切换逻辑:随机生成关注状态
|
||||
// 实际应用中,这里应该从某个状态存储中读取和更新
|
||||
const isFollowing = Math.random() > 0.5;
|
||||
const followerCount = Math.floor(Math.random() * 1000) + 100;
|
||||
// 尝试从请求体获取事件数据(用于新关注时保存完整信息)
|
||||
let eventData = null;
|
||||
try {
|
||||
const body = await request.json();
|
||||
if (body && body.title) {
|
||||
eventData = body;
|
||||
}
|
||||
} catch {
|
||||
// 没有请求体或解析失败,忽略
|
||||
}
|
||||
|
||||
// 使用内存状态管理切换关注
|
||||
const { isFollowing, followerCount } = toggleEventFollowStatus(numericEventId, eventData);
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
|
||||
Reference in New Issue
Block a user