feat: Add batch processing and upload functionality, including new backend APIs, logging system, SQLite database, and dedicated frontend pages.
This commit is contained in:
430
frontend/src/components/upload/BatchResultHistory.tsx
Normal file
430
frontend/src/components/upload/BatchResultHistory.tsx
Normal file
@@ -0,0 +1,430 @@
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
ChevronLeft,
|
||||
CheckCircle,
|
||||
AlertTriangle,
|
||||
Clock,
|
||||
Users,
|
||||
Settings,
|
||||
RefreshCw,
|
||||
FileText,
|
||||
} from 'lucide-react'
|
||||
import { Button } from '../common'
|
||||
|
||||
interface TeamResult {
|
||||
id: number
|
||||
batch_id: number
|
||||
team_index: number
|
||||
owner_email: string
|
||||
team_id: string
|
||||
registered: number
|
||||
added_to_s2a: number
|
||||
member_emails: string[]
|
||||
errors: string[]
|
||||
duration_ms: number
|
||||
created_at: string
|
||||
}
|
||||
|
||||
interface BatchRun {
|
||||
id: number
|
||||
started_at: string
|
||||
finished_at: string
|
||||
total_owners: number
|
||||
total_registered: number
|
||||
total_added_to_s2a: number
|
||||
success_rate: number
|
||||
duration_seconds: number
|
||||
status: string
|
||||
errors: string
|
||||
}
|
||||
|
||||
interface BatchHistoryResponse {
|
||||
runs: BatchRun[]
|
||||
total: number
|
||||
page: number
|
||||
page_size: number
|
||||
total_pages: number
|
||||
}
|
||||
|
||||
interface BatchDetailResponse {
|
||||
batch: BatchRun
|
||||
results: TeamResult[]
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
function formatTime(dateStr: string): string {
|
||||
if (!dateStr) return '-'
|
||||
const date = new Date(dateStr)
|
||||
const now = new Date()
|
||||
const isToday = date.toDateString() === now.toDateString()
|
||||
|
||||
if (isToday) {
|
||||
return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
|
||||
}
|
||||
return date.toLocaleString('zh-CN', {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
}
|
||||
|
||||
// 格式化耗时
|
||||
function formatDuration(seconds: number): string {
|
||||
if (seconds < 60) return `${seconds}s`
|
||||
const minutes = Math.floor(seconds / 60)
|
||||
const secs = seconds % 60
|
||||
if (minutes < 60) return `${minutes}m ${secs}s`
|
||||
const hours = Math.floor(minutes / 60)
|
||||
const mins = minutes % 60
|
||||
return `${hours}h ${mins}m`
|
||||
}
|
||||
|
||||
// Team 详情行组件
|
||||
function TeamResultRow({ result }: { result: TeamResult }) {
|
||||
const [expanded, setExpanded] = useState(false)
|
||||
const hasErrors = result.errors && result.errors.length > 0
|
||||
|
||||
return (
|
||||
<div className="border-b border-slate-100 dark:border-slate-700/50 last:border-b-0">
|
||||
{/* 折叠头部 */}
|
||||
<div
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{expanded ? (
|
||||
<ChevronDown className="h-4 w-4 text-slate-400" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4 text-slate-400" />
|
||||
)}
|
||||
<span className="px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400">
|
||||
Team {result.team_index}
|
||||
</span>
|
||||
<span className="text-sm text-slate-600 dark:text-slate-300 truncate max-w-[180px]">
|
||||
{result.owner_email}
|
||||
</span>
|
||||
{hasErrors && (
|
||||
<AlertTriangle className="h-4 w-4 text-amber-500" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<span className="flex items-center gap-1 text-green-600 dark:text-green-400">
|
||||
<CheckCircle className="h-3.5 w-3.5" />
|
||||
{result.registered}
|
||||
</span>
|
||||
<span className="flex items-center gap-1 text-purple-600 dark:text-purple-400">
|
||||
<Settings className="h-3.5 w-3.5" />
|
||||
{result.added_to_s2a}
|
||||
</span>
|
||||
<span className="text-slate-400 text-xs w-16 text-right">
|
||||
{(result.duration_ms / 1000).toFixed(1)}s
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 展开详情 */}
|
||||
{expanded && (
|
||||
<div className="px-4 pb-3 pl-11 space-y-2 animate-in slide-in-from-top-2 duration-200">
|
||||
{result.team_id && (
|
||||
<div className="text-xs text-slate-500">
|
||||
<span className="font-medium">Team ID:</span> {result.team_id}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.member_emails && result.member_emails.length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 mb-1 font-medium">成员邮箱:</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{result.member_emails.map((email, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-2 py-0.5 rounded text-xs bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400"
|
||||
>
|
||||
{email}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasErrors && (
|
||||
<div>
|
||||
<p className="text-xs text-red-500 mb-1 font-medium flex items-center gap-1">
|
||||
<AlertTriangle className="h-3 w-3" />
|
||||
错误:
|
||||
</p>
|
||||
<div className="space-y-0.5">
|
||||
{result.errors.map((err, idx) => (
|
||||
<p key={idx} className="text-xs text-red-400 pl-4">
|
||||
• {err}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 批次卡片组件
|
||||
function BatchCard({ batch, onLoadDetail }: { batch: BatchRun; onLoadDetail: (id: number) => Promise<TeamResult[]> }) {
|
||||
const [expanded, setExpanded] = useState(false)
|
||||
const [results, setResults] = useState<TeamResult[] | null>(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const handleToggle = async () => {
|
||||
if (!expanded && results === null) {
|
||||
setLoading(true)
|
||||
try {
|
||||
const data = await onLoadDetail(batch.id)
|
||||
setResults(data)
|
||||
} catch (e) {
|
||||
console.error('加载批次详情失败:', e)
|
||||
}
|
||||
setLoading(false)
|
||||
}
|
||||
setExpanded(!expanded)
|
||||
}
|
||||
|
||||
const errorCount = results?.filter(r => r.errors && r.errors.length > 0).length || 0
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800/50 shadow-sm overflow-hidden">
|
||||
{/* 批次头部 */}
|
||||
<div
|
||||
onClick={handleToggle}
|
||||
className="flex items-center justify-between p-4 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{loading ? (
|
||||
<RefreshCw className="h-5 w-5 text-blue-500 animate-spin" />
|
||||
) : expanded ? (
|
||||
<ChevronDown className="h-5 w-5 text-slate-400" />
|
||||
) : (
|
||||
<ChevronRight className="h-5 w-5 text-slate-400" />
|
||||
)}
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText className="h-4 w-4 text-blue-500" />
|
||||
<span className="font-medium text-slate-800 dark:text-slate-200">
|
||||
批次 #{batch.id}
|
||||
</span>
|
||||
<span className={`px-2 py-0.5 rounded text-xs font-medium ${
|
||||
batch.status === 'completed'
|
||||
? 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400'
|
||||
: 'bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400'
|
||||
}`}>
|
||||
{batch.status === 'completed' ? '已完成' : '运行中'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-1 text-xs text-slate-500">
|
||||
<Clock className="h-3 w-3" />
|
||||
{formatTime(batch.started_at)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 汇总统计 */}
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<div className="flex items-center gap-1 px-2 py-1 rounded bg-slate-100 dark:bg-slate-700">
|
||||
<Users className="h-3.5 w-3.5 text-slate-500" />
|
||||
<span className="text-slate-600 dark:text-slate-300">{batch.total_owners}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 px-2 py-1 rounded bg-green-50 dark:bg-green-900/20">
|
||||
<CheckCircle className="h-3.5 w-3.5 text-green-500" />
|
||||
<span className="text-green-600 dark:text-green-400">{batch.total_registered}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 px-2 py-1 rounded bg-purple-50 dark:bg-purple-900/20">
|
||||
<Settings className="h-3.5 w-3.5 text-purple-500" />
|
||||
<span className="text-purple-600 dark:text-purple-400">{batch.total_added_to_s2a}</span>
|
||||
</div>
|
||||
{expanded && errorCount > 0 && (
|
||||
<div className="flex items-center gap-1 px-2 py-1 rounded bg-red-50 dark:bg-red-900/20">
|
||||
<AlertTriangle className="h-3.5 w-3.5 text-red-500" />
|
||||
<span className="text-red-600 dark:text-red-400">{errorCount}</span>
|
||||
</div>
|
||||
)}
|
||||
<span className="text-slate-400 text-xs">
|
||||
{formatDuration(batch.duration_seconds)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 展开的 Team 列表 */}
|
||||
{expanded && (
|
||||
<div className="border-t border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/30">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-8 text-slate-500">
|
||||
<RefreshCw className="h-5 w-5 animate-spin mr-2" />
|
||||
加载中...
|
||||
</div>
|
||||
) : results && results.length > 0 ? (
|
||||
<div className="divide-y divide-slate-100 dark:divide-slate-700/50">
|
||||
{results.map((result) => (
|
||||
<TeamResultRow key={result.id || result.team_index} result={result} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-6 text-center text-slate-400 text-sm">
|
||||
暂无 Team 处理记录
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 分页组件
|
||||
function Pagination({
|
||||
page,
|
||||
totalPages,
|
||||
onPageChange,
|
||||
}: {
|
||||
page: number
|
||||
totalPages: number
|
||||
onPageChange: (page: number) => void
|
||||
}) {
|
||||
if (totalPages <= 1) return null
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center gap-2 mt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={page <= 1}
|
||||
onClick={() => onPageChange(page - 1)}
|
||||
icon={<ChevronLeft className="h-4 w-4" />}
|
||||
>
|
||||
上一页
|
||||
</Button>
|
||||
<span className="text-sm text-slate-500 px-4">
|
||||
第 {page} / {totalPages} 页
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={page >= totalPages}
|
||||
onClick={() => onPageChange(page + 1)}
|
||||
>
|
||||
下一页
|
||||
<ChevronRight className="h-4 w-4 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 主组件
|
||||
export default function BatchResultHistory() {
|
||||
const [batches, setBatches] = useState<BatchRun[]>([])
|
||||
const [page, setPage] = useState(1)
|
||||
const [totalPages, setTotalPages] = useState(1)
|
||||
const [total, setTotal] = useState(0)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
// 加载批次列表
|
||||
const loadBatches = useCallback(async (p: number) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await fetch(`/api/batch/history?page=${p}&page_size=5`)
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
if (data.code === 0) {
|
||||
const result = data.data as BatchHistoryResponse
|
||||
setBatches(result.runs || [])
|
||||
setTotalPages(result.total_pages)
|
||||
setTotal(result.total)
|
||||
setPage(result.page)
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('加载批次历史失败:', e)
|
||||
}
|
||||
setLoading(false)
|
||||
}, [])
|
||||
|
||||
// 加载批次详情
|
||||
const loadBatchDetail = useCallback(async (batchId: number): Promise<TeamResult[]> => {
|
||||
try {
|
||||
const res = await fetch(`/api/batch/detail?id=${batchId}`)
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
if (data.code === 0) {
|
||||
const result = data.data as BatchDetailResponse
|
||||
return result.results || []
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('加载批次详情失败:', e)
|
||||
}
|
||||
return []
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
loadBatches(1)
|
||||
}, [loadBatches])
|
||||
|
||||
const handlePageChange = (newPage: number) => {
|
||||
loadBatches(newPage)
|
||||
}
|
||||
|
||||
const handleRefresh = () => {
|
||||
loadBatches(page)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
{/* 头部 */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800">
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText className="h-5 w-5 text-green-500" />
|
||||
<h3 className="font-medium text-slate-800 dark:text-slate-200">处理历史</h3>
|
||||
<span className="text-sm text-slate-500">共 {total} 个批次</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleRefresh}
|
||||
disabled={loading}
|
||||
icon={<RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />}
|
||||
>
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 内容区域 */}
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
{loading && batches.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-slate-400">
|
||||
<RefreshCw className="h-8 w-8 animate-spin mb-3" />
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
) : batches.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-slate-400">
|
||||
<FileText className="h-12 w-12 mb-3 opacity-30" />
|
||||
<p>暂无处理记录</p>
|
||||
<p className="text-sm mt-1">上传账号文件并点击开始处理</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{batches.map((batch) => (
|
||||
<BatchCard
|
||||
key={batch.id}
|
||||
batch={batch}
|
||||
onLoadDetail={loadBatchDetail}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 分页 */}
|
||||
<Pagination page={page} totalPages={totalPages} onPageChange={handlePageChange} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -2,3 +2,4 @@ export { default as FileDropzone } from './FileDropzone'
|
||||
export { default as AccountTable } from './AccountTable'
|
||||
export { default as CheckProgress } from './CheckProgress'
|
||||
export { default as PoolActions } from './PoolActions'
|
||||
export { default as BatchResultHistory } from './BatchResultHistory'
|
||||
|
||||
Reference in New Issue
Block a user