新增消息列表API,优化消息列表组件以支持加载状态和数据同步,提升用户体验和代码可读性。

This commit is contained in:
超级老白兔
2025-10-23 17:02:33 +08:00
parent 75e62cce72
commit 7f4bc0487e
9 changed files with 1343 additions and 104 deletions

View File

@@ -1,24 +1,48 @@
import { create } from "zustand";
import { persist } from "zustand/middleware";
import { Message, MessageState } from "./message.data";
/**
* 会话列表状态管理Store
* 职责:只管理状态,不存储会话列表数据
* 数据存储在组件state + IndexedDB
*/
export const useMessageStore = create<MessageState>()(
persist(
(set, get) => ({
messageList: [], //消息列表
currentMessage: null, //当前选中的消息
updateMessageList: (messageList: Message[]) => set({ messageList }), //更新消息列表
// ==================== 新增状态管理 ====================
loading: false,
refreshing: false,
refreshTrigger: 0,
lastRefreshTime: null,
setLoading: (loading: boolean) => set({ loading }),
setRefreshing: (refreshing: boolean) => set({ refreshing }),
triggerRefresh: () =>
set({
refreshTrigger: get().refreshTrigger + 1,
lastRefreshTime: new Date().toISOString(),
}),
// ==================== 保留原有接口(向后兼容) ====================
messageList: [],
currentMessage: null,
updateMessageList: (messageList: Message[]) => set({ messageList }),
updateCurrentMessage: (message: Message) =>
set({ currentMessage: message }), //更新当前选中的消息
set({ currentMessage: message }),
updateMessageStatus: (messageId: number, status: string) =>
set({
messageList: get().messageList.map(message =>
message.id === messageId ? { ...message, status } : message,
),
}), //更新消息状态
}),
}),
{
name: "message-storage",
partialize: state => ({
// 只持久化必要的状态,不持久化数据
lastRefreshTime: state.lastRefreshTime,
// 保留原有持久化字段(向后兼容)
messageList: [],
currentMessage: null,
}),
@@ -54,3 +78,24 @@ export const getCurrentMessage = () =>
*/
export const updateMessageStatus = (messageId: number, status: string) =>
useMessageStore.getState().updateMessageStatus(messageId, status);
// ==================== 新增导出函数 ====================
/**
* 设置加载状态
* @param loading 加载状态
*/
export const setLoading = (loading: boolean) =>
useMessageStore.getState().setLoading(loading);
/**
* 设置同步状态
* @param refreshing 同步状态
*/
export const setRefreshing = (refreshing: boolean) =>
useMessageStore.getState().setRefreshing(refreshing);
/**
* 触发刷新(通知组件重新查询数据库)
*/
export const triggerRefresh = () => useMessageStore.getState().triggerRefresh();