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:
@@ -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;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user