Files
ds2api/webui/src/features/account/useAccountsData.js
root d97b86e0ee feat(webui): 账号列表添加搜索过滤功能
- 后端 GET /admin/accounts 支持 ?q= 参数,大小写不敏感匹配 identifier/email/mobile
- 前端搜索框内嵌于标题栏按钮行(测试全部按钮前)
- 搜索时重置到第 1 页,分页 total 反映过滤后数量
- 无匹配结果时显示专属提示文案(中英文)
2026-02-28 09:57:19 +08:00

87 lines
2.7 KiB
JavaScript

import { useEffect, useState } from 'react'
export function useAccountsData({ apiFetch }) {
const [queueStatus, setQueueStatus] = useState(null)
const [keysExpanded, setKeysExpanded] = useState(false)
const [accounts, setAccounts] = useState([])
const [page, setPage] = useState(1)
const [pageSize, setPageSize] = useState(10)
const [totalPages, setTotalPages] = useState(1)
const [totalAccounts, setTotalAccounts] = useState(0)
const [loadingAccounts, setLoadingAccounts] = useState(false)
const resolveAccountIdentifier = (acc) => {
if (!acc || typeof acc !== 'object') return ''
return String(acc.identifier || acc.email || acc.mobile || '').trim()
}
const [searchQuery, setSearchQuery] = useState('')
const fetchAccounts = async (targetPage = page, targetPageSize = pageSize, targetQuery = searchQuery) => {
setLoadingAccounts(true)
try {
let url = `/admin/accounts?page=${targetPage}&page_size=${targetPageSize}`
if (targetQuery.trim()) url += `&q=${encodeURIComponent(targetQuery.trim())}`
const res = await apiFetch(url)
if (res.ok) {
const data = await res.json()
setAccounts(data.items || [])
setTotalPages(data.total_pages || 1)
setTotalAccounts(data.total || 0)
setPage(data.page || 1)
}
} catch (e) {
console.error('Failed to fetch accounts:', e)
} finally {
setLoadingAccounts(false)
}
}
const changePageSize = (newSize) => {
setPageSize(newSize)
fetchAccounts(1, newSize)
}
const handleSearchChange = (query) => {
setSearchQuery(query)
fetchAccounts(1, pageSize, query)
}
const fetchQueueStatus = async () => {
try {
const res = await apiFetch('/admin/queue/status')
if (res.ok) {
const data = await res.json()
setQueueStatus(data)
}
} catch (e) {
console.error('Failed to fetch queue status:', e)
}
}
useEffect(() => {
fetchAccounts()
fetchQueueStatus()
const interval = setInterval(fetchQueueStatus, 5000)
return () => clearInterval(interval)
}, [])
return {
queueStatus,
keysExpanded,
setKeysExpanded,
accounts,
page,
pageSize,
totalPages,
totalAccounts,
loadingAccounts,
fetchAccounts,
changePageSize,
resolveAccountIdentifier,
searchQuery,
handleSearchChange,
}
}