通用组件开发

src/store/listStore.ts

@@ -0,0 +1,108 @@
+import { create } from 'zustand'
+import { getTennisMatches } from '../services/listApi'
+
+// 网球比赛数据接口
+export interface TennisMatch {
+  id: string
+  title: string
+  dateTime: string
+  location: string
+  distance: string
+  registeredCount: number
+  maxCount: number
+  skillLevel: string
+  matchType: string
+  images: string[]
+}
+
+// Store 状态接口
+interface TennisState {
+  matches: TennisMatch[]
+  loading: boolean
+  error: string | null
+  lastRefreshTime: string | null
+}
+
+// Store Actions 接口
+interface TennisActions {
+  fetchMatches: (params?: {
+    page?: number
+    pageSize?: number
+    location?: string
+    skillLevel?: string
+  }) => Promise<void>
+  refreshMatches: () => Promise<void>
+  clearError: () => void
+}
+
+// 完整的 Store 类型
+type TennisStore = TennisState & TennisActions
+
+// 创建 store
+export const useTennisStore = create<TennisStore>()((set, get) => ({
+  // 初始状态
+  matches: [],
+  loading: false,
+  error: null,
+  lastRefreshTime: null,
+
+  // 获取比赛数据
+  fetchMatches: async (params) => {
+    set({ loading: true, error: null })
+    
+    try {
+      const matches = await getTennisMatches(params)
+      set({ 
+        matches, 
+        loading: false, 
+        lastRefreshTime: new Date().toISOString() 
+      })
+      console.log('Store: 成功获取网球比赛数据:', matches.length, '条')
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : '未知错误'
+      set({ 
+        error: errorMessage, 
+        loading: false 
+      })
+      console.error('Store: 获取网球比赛数据失败:', errorMessage)
+    }
+  },
+
+  // 刷新比赛数据
+  refreshMatches: async () => {
+    set({ loading: true, error: null })
+    
+    try {
+      const matches = await getTennisMatches()
+      set({ 
+        matches, 
+        loading: false, 
+        lastRefreshTime: new Date().toISOString() 
+      })
+      console.log('Store: 成功刷新网球比赛数据:', matches.length, '条')
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : '未知错误'
+      set({ 
+        error: errorMessage, 
+        loading: false 
+      })
+      console.error('Store: 刷新网球比赛数据失败:', errorMessage)
+    }
+  },
+
+  // 清除错误信息
+  clearError: () => {
+    set({ error: null })
+  }
+}))
+
+// 导出便捷的 hooks
+export const useTennisMatches = () => useTennisStore((state) => state.matches)
+export const useTennisLoading = () => useTennisStore((state) => state.loading)
+export const useTennisError = () => useTennisStore((state) => state.error)
+export const useTennisLastRefresh = () => useTennisStore((state) => state.lastRefreshTime)
+export const useTennisActions = () => useTennisStore((state) => ({
+  fetchMatches: state.fetchMatches,
+  refreshMatches: state.refreshMatches,
+  clearError: state.clearError
+}))