From 023684b8b7e2e77c5f8da0e4cb33cfc8ecc85f2f Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Tue, 9 Dec 2025 16:34:36 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BA=8B=E4=BB=B6=E5=85=B3=E6=B3=A8?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E4=BC=98=E5=8C=96=20-=20Redux=20=E4=B9=90?= =?UTF-8?q?=E8=A7=82=E6=9B=B4=E6=96=B0=20+=20Mock=20=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E5=90=8C=E6=AD=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- src/mocks/data/account.js | 75 ++++++++++++++++++++++++++ src/mocks/handlers/account.js | 12 +++-- src/mocks/handlers/event.js | 36 +++++++++---- src/store/slices/communityDataSlice.js | 34 ++++++++++-- 4 files changed, 138 insertions(+), 19 deletions(-) diff --git a/src/mocks/data/account.js b/src/mocks/data/account.js index 73b7fc7e..9cd28bf7 100644 --- a/src/mocks/data/account.js +++ b/src/mocks/data/account.js @@ -128,6 +128,13 @@ export const mockRealtimeQuotes = [ // ==================== 关注事件数据 ==================== +// 事件关注内存存储（Set 存储已关注的事件 ID） +export const followedEventsSet = new Set(); + +// 关注事件完整数据存储（Map: eventId -> eventData） +export const followedEventsMap = new Map(); + +// 初始关注事件列表（用于初始化） export const mockFollowingEvents = [ { id: 101, @@ -231,6 +238,74 @@ export const mockFollowingEvents = [ } ]; +// 初始化：将 mockFollowingEvents 的数据加入内存存储 +mockFollowingEvents.forEach(event => { + followedEventsSet.add(event.id); + followedEventsMap.set(event.id, event); +}); + +/** + * 切换事件关注状态 + * @param {number} eventId - 事件 ID + * @param {Object} eventData - 事件数据（关注时需要） + * @returns {{ isFollowing: boolean, followerCount: number }} + */ +export function toggleEventFollowStatus(eventId, eventData = null) { + const wasFollowing = followedEventsSet.has(eventId); + + if (wasFollowing) { + // 取消关注 + followedEventsSet.delete(eventId); + followedEventsMap.delete(eventId); + } else { + // 添加关注 + followedEventsSet.add(eventId); + if (eventData) { + followedEventsMap.set(eventId, { + ...eventData, + followed_at: new Date().toISOString() + }); + } else { + // 如果没有提供事件数据，创建基础数据 + followedEventsMap.set(eventId, { + id: eventId, + title: `事件 ${eventId}`, + tags: [], + followed_at: new Date().toISOString() + }); + } + } + + const isFollowing = !wasFollowing; + const followerCount = isFollowing ? Math.floor(Math.random() * 500) + 100 : Math.floor(Math.random() * 500) + 50; + + console.log('[Mock Data] 切换事件关注状态:', { + eventId, + wasFollowing, + isFollowing, + followedEventsCount: followedEventsSet.size + }); + + return { isFollowing, followerCount }; +} + +/** + * 检查事件是否已关注 + * @param {number} eventId - 事件 ID + * @returns {boolean} + */ +export function isEventFollowed(eventId) { + return followedEventsSet.has(eventId); +} + +/** + * 获取所有已关注的事件列表 + * @returns {Array} + */ +export function getFollowedEvents() { + return Array.from(followedEventsMap.values()); +} + // ==================== 评论数据 ==================== export const mockEventComments = [ diff --git a/src/mocks/handlers/account.js b/src/mocks/handlers/account.js index 3394e0df..d151ae18 100644 --- a/src/mocks/handlers/account.js +++ b/src/mocks/handlers/account.js @@ -9,7 +9,8 @@ import { mockInvestmentPlans, mockCalendarEvents, mockSubscriptionCurrent, - getCalendarEventsByDateRange + getCalendarEventsByDateRange, + getFollowedEvents } from '../data/account'; // 模拟网络延迟（毫秒） @@ -250,7 +251,7 @@ export const accountHandlers = [ // ==================== 事件关注管理 ==================== - // 8. 获取关注的事件 + // 8. 获取关注的事件（使用内存状态动态返回） http.get('/api/account/events/following', async () => { await delay(NETWORK_DELAY); @@ -262,11 +263,14 @@ export const accountHandlers = [ ); } - console.log('[Mock] 获取关注的事件'); + // 从内存存储获取已关注的事件列表 + const followedEvents = getFollowedEvents(); + + console.log('[Mock] 获取关注的事件, 数量:', followedEvents.length); return HttpResponse.json({ success: true, - data: mockFollowingEvents + data: followedEvents }); }), diff --git a/src/mocks/handlers/event.js b/src/mocks/handlers/event.js index a616e95a..a8f488e5 100644 --- a/src/mocks/handlers/event.js +++ b/src/mocks/handlers/event.js @@ -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, diff --git a/src/store/slices/communityDataSlice.js b/src/store/slices/communityDataSlice.js index b6cf7db0..f6ac344f 100644 --- a/src/store/slices/communityDataSlice.js +++ b/src/store/slices/communityDataSlice.js @@ -608,14 +608,40 @@ const communityDataSlice = createSlice({ state.error[stateKey] = action.payload; logger.error('CommunityData', `${stateKey} 加载失败`, new Error(action.payload)); }) - // toggleEventFollow + // ===== toggleEventFollow（乐观更新）===== + // pending: 立即切换状态 + .addCase(toggleEventFollow.pending, (state, action) => { + const eventId = action.meta.arg; + const current = state.eventFollowStatus[eventId]; + // 乐观切换：如果当前已关注则变为未关注，反之亦然 + state.eventFollowStatus[eventId] = { + isFollowing: !(current?.isFollowing), + followerCount: current?.followerCount ?? 0 + }; + logger.debug('CommunityData', 'toggleEventFollow pending (乐观更新)', { + eventId, + newIsFollowing: !(current?.isFollowing) + }); + }) + // rejected: 回滚状态 + .addCase(toggleEventFollow.rejected, (state, action) => { + const eventId = action.meta.arg; + const current = state.eventFollowStatus[eventId]; + // 回滚：恢复到之前的状态（再次切换回去） + state.eventFollowStatus[eventId] = { + isFollowing: !(current?.isFollowing), + followerCount: current?.followerCount ?? 0 + }; + logger.error('CommunityData', 'toggleEventFollow rejected (已回滚)', { + eventId, + error: action.payload + }); + }) + // fulfilled: 使用 API 返回的准确数据覆盖 .addCase(toggleEventFollow.fulfilled, (state, action) => { const { eventId, isFollowing, followerCount } = action.payload; state.eventFollowStatus[eventId] = { isFollowing, followerCount }; logger.debug('CommunityData', 'toggleEventFollow fulfilled', { eventId, isFollowing, followerCount }); - }) - .addCase(toggleEventFollow.rejected, (_state, action) => { - logger.error('CommunityData', 'toggleEventFollow rejected', action.payload); }); } });