e4dcb6260a
Some checks failed
CI Check / check (push) Has been cancelled
- 创建统一UI三层架构系统（基础层、颜色层、组合层） - 拆分Admin页面为独立Tab组件（MonitorTab、UsersTab、DepartmentsTab等） - 提取公共逻辑到Hooks（useToast、useDataFetch、useUserOperations等） - 提取工具函数（validators、formatters、api等） - 创建统一弹窗组件（Modal）和useModal Hook - 添加错误边界和统一状态组件 - 完善类型定义和可访问性支持 - 更新文档（优化记录、优化计划、更新日志）
82 lines
2.3 KiB
TypeScript
82 lines
2.3 KiB
TypeScript
'use client'
|
|
|
|
import { useCallback } from 'react'
|
|
import type { AdminTab, Department, ToastFn, User } from '../_components/types'
|
|
import type { Dispatch, SetStateAction } from 'react'
|
|
import { parseErrorResponse } from '../_utils/api'
|
|
|
|
interface UseDataFetchOptions {
|
|
showToast: ToastFn
|
|
departmentCollator: Intl.Collator
|
|
setUsers: Dispatch<SetStateAction<User[]>>
|
|
setDepartments: Dispatch<SetStateAction<Department[]>>
|
|
}
|
|
|
|
export function useDataFetch({
|
|
showToast,
|
|
departmentCollator,
|
|
setUsers,
|
|
setDepartments,
|
|
}: UseDataFetchOptions) {
|
|
const loadUsersData = useCallback(async () => {
|
|
try {
|
|
const response = await fetch('/api/admin/users?pageSize=1000')
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
setUsers(data.users || [])
|
|
} else {
|
|
const errorData = await parseErrorResponse(response)
|
|
console.error('Error fetching users:', errorData)
|
|
showToast(errorData.error || '获取用户列表失败', 'error')
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching users:', error)
|
|
showToast('获取用户列表失败', 'error')
|
|
}
|
|
}, [setUsers, showToast])
|
|
|
|
const fetchDepartments = useCallback(async () => {
|
|
try {
|
|
const response = await fetch('/api/departments')
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
const sorted = Array.isArray(data)
|
|
? [...data].sort((a, b) => departmentCollator.compare(a.name, b.name))
|
|
: []
|
|
setDepartments(sorted)
|
|
} else {
|
|
const errorData = await parseErrorResponse(response)
|
|
showToast(errorData.error || '获取部门列表失败', 'error')
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching departments:', error)
|
|
showToast('获取部门列表失败', 'error')
|
|
}
|
|
}, [departmentCollator, setDepartments, showToast])
|
|
|
|
const fetchTabData = useCallback(
|
|
async (tab: AdminTab) => {
|
|
switch (tab) {
|
|
case 'users':
|
|
await Promise.all([loadUsersData(), fetchDepartments()])
|
|
break
|
|
case 'departments':
|
|
await fetchDepartments()
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
},
|
|
[fetchDepartments, loadUsersData],
|
|
)
|
|
|
|
return {
|
|
loadUsersData,
|
|
fetchDepartments,
|
|
fetchTabData,
|
|
}
|
|
}
|
|
|
|
export type UseDataFetchReturn = ReturnType<typeof useDataFetch>
|
|
|