feat(Center): 投资规划中心新建计划/复盘乐观更新

- planningSlice: 添加 optimisticAddEvent、replaceEvent、removeEvent reducers
- EventFormModal: 新建模式使用乐观更新,立即关闭弹窗显示数据
- account.js: Mock 数据按日期倒序排序,最新事件在前

乐观更新流程:
1. 创建临时事件(负数 ID)立即更新 UI
2. 后台发送 API 请求
3. 成功后替换为真实数据,失败则回滚

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-23 14:50:29 +08:00
parent ab5b19847f
commit d24f9c7b16
3 changed files with 97 additions and 10 deletions

View File

@@ -196,6 +196,25 @@ const planningSlice = createSlice({
state.allEvents.push(action.payload);
state.lastUpdated = Date.now();
},
/** 乐观添加事件(插入到开头,使用临时 ID */
optimisticAddEvent: (state, action: PayloadAction<InvestmentEvent>) => {
state.allEvents.unshift(action.payload); // 新事件插入开头
state.lastUpdated = Date.now();
},
/** 替换临时事件为真实事件 */
replaceEvent: (state, action: PayloadAction<{ tempId: number; realEvent: InvestmentEvent }>) => {
const { tempId, realEvent } = action.payload;
const index = state.allEvents.findIndex(e => e.id === tempId);
if (index !== -1) {
state.allEvents[index] = realEvent;
}
state.lastUpdated = Date.now();
},
/** 移除事件(用于回滚) */
removeEvent: (state, action: PayloadAction<number>) => {
state.allEvents = state.allEvents.filter(e => e.id !== action.payload);
state.lastUpdated = Date.now();
},
},
extraReducers: (builder) => {
builder
@@ -251,7 +270,14 @@ const planningSlice = createSlice({
// ==================== 导出 ====================
export const { clearEvents, setEvents, addEvent } = planningSlice.actions;
export const {
clearEvents,
setEvents,
addEvent,
optimisticAddEvent,
replaceEvent,
removeEvent,
} = planningSlice.actions;
export default planningSlice.reducer;