0f86e5b9ee
Some checks failed
Admin CI / build-and-push-web (push) Failing after 6m11s
Add new verifications module including API endpoints for retrieving and reviewing user identity verifications, along with corresponding admin page, routing, and sidebar navigation entry.
458 lines
17 KiB
TypeScript
458 lines
17 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react'
|
||
import { verificationsApi, type VerificationListItem, type VerificationDetail, type VerificationStatus } from '@/api'
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Badge } from '@/components/ui/badge'
|
||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||
import { Textarea } from '@/components/ui/textarea'
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from '@/components/ui/table'
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from '@/components/ui/select'
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from '@/components/ui/dialog'
|
||
import { PaginationNavigator } from '@/components/ui/pagination'
|
||
import { Search, RefreshCw, Eye, CheckCircle, XCircle, Loader2 } from 'lucide-react'
|
||
|
||
const statusColors: Record<VerificationStatus, string> = {
|
||
not_submitted: 'bg-gray-500',
|
||
pending: 'bg-yellow-500',
|
||
approved: 'bg-green-500',
|
||
rejected: 'bg-red-500',
|
||
}
|
||
|
||
const statusText: Record<VerificationStatus, string> = {
|
||
not_submitted: '未提交',
|
||
pending: '待审核',
|
||
approved: '已通过',
|
||
rejected: '已拒绝',
|
||
}
|
||
|
||
const identityText: Record<string, string> = {
|
||
student: '学生',
|
||
teacher: '教师',
|
||
staff: '职工',
|
||
alumni: '校友',
|
||
external: '外部人员',
|
||
general: '普通用户',
|
||
}
|
||
|
||
export default function Verifications() {
|
||
const [verifications, setVerifications] = useState<VerificationListItem[]>([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [total, setTotal] = useState(0)
|
||
const [page, setPage] = useState(1)
|
||
const pageSize = 10
|
||
const [keyword, setKeyword] = useState('')
|
||
const [statusFilter, setStatusFilter] = useState<string>('all')
|
||
|
||
const [detailOpen, setDetailOpen] = useState(false)
|
||
const [selectedVerification, setSelectedVerification] = useState<VerificationDetail | null>(null)
|
||
const [detailLoading, setDetailLoading] = useState(false)
|
||
|
||
const [reviewDialogOpen, setReviewDialogOpen] = useState(false)
|
||
const [reviewLoading, setReviewLoading] = useState(false)
|
||
const [rejectReason, setRejectReason] = useState('')
|
||
|
||
const loadVerifications = useCallback(async () => {
|
||
setLoading(true)
|
||
try {
|
||
const params = {
|
||
page,
|
||
page_size: pageSize,
|
||
keyword: keyword || undefined,
|
||
status: statusFilter !== 'all' ? statusFilter as VerificationStatus : undefined,
|
||
}
|
||
const response = await verificationsApi.getVerifications(params)
|
||
setVerifications(response.data.data.list || [])
|
||
setTotal(response.data.data.total || 0)
|
||
} catch (error) {
|
||
console.error('Failed to load verifications:', error)
|
||
setVerifications([])
|
||
setTotal(0)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}, [page, keyword, statusFilter])
|
||
|
||
useEffect(() => {
|
||
loadVerifications()
|
||
}, [loadVerifications])
|
||
|
||
const handleViewDetail = async (verification: VerificationListItem) => {
|
||
setDetailLoading(true)
|
||
setDetailOpen(true)
|
||
try {
|
||
const response = await verificationsApi.getVerificationById(verification.id)
|
||
setSelectedVerification(response.data.data)
|
||
} catch (error) {
|
||
console.error('Failed to load verification detail:', error)
|
||
setSelectedVerification(null)
|
||
} finally {
|
||
setDetailLoading(false)
|
||
}
|
||
}
|
||
|
||
const handleOpenReviewDialog = () => {
|
||
setRejectReason('')
|
||
setReviewDialogOpen(true)
|
||
}
|
||
|
||
const handleReview = async (approve: boolean) => {
|
||
if (!selectedVerification) return
|
||
|
||
if (!approve && !rejectReason.trim()) {
|
||
alert('请填写拒绝原因')
|
||
return
|
||
}
|
||
|
||
setReviewLoading(true)
|
||
try {
|
||
await verificationsApi.reviewVerification(selectedVerification.id, {
|
||
approve,
|
||
reject_reason: approve ? undefined : rejectReason,
|
||
})
|
||
setReviewDialogOpen(false)
|
||
setDetailOpen(false)
|
||
loadVerifications()
|
||
} catch (error) {
|
||
console.error('Failed to review verification:', error)
|
||
alert('审核失败')
|
||
} finally {
|
||
setReviewLoading(false)
|
||
}
|
||
}
|
||
|
||
const handleSearch = () => {
|
||
setPage(1)
|
||
loadVerifications()
|
||
}
|
||
|
||
const handleRefresh = () => {
|
||
loadVerifications()
|
||
}
|
||
|
||
const handlePageChange = (newPage: number) => {
|
||
setPage(newPage)
|
||
}
|
||
|
||
const totalPages = Math.ceil(total / pageSize)
|
||
|
||
const getInitials = (name: string) => {
|
||
return name.slice(0, 2).toUpperCase()
|
||
}
|
||
|
||
const formatDate = (dateString: string) => {
|
||
return new Date(dateString).toLocaleDateString('zh-CN', {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
})
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-3xl font-bold">身份认证管理</h1>
|
||
<p className="text-muted-foreground">审核用户身份认证申请</p>
|
||
</div>
|
||
<Button onClick={handleRefresh} disabled={loading}>
|
||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
|
||
刷新
|
||
</Button>
|
||
</div>
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>筛选条件</CardTitle>
|
||
<CardDescription>根据条件筛选认证申请</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="flex flex-wrap gap-4">
|
||
<div className="flex gap-2 flex-1 min-w-[300px]">
|
||
<Input
|
||
placeholder="搜索用户名、真实姓名..."
|
||
value={keyword}
|
||
onChange={(e) => setKeyword(e.target.value)}
|
||
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
||
className="max-w-sm"
|
||
/>
|
||
<Button variant="outline" onClick={handleSearch}>
|
||
<Search className="h-4 w-4 mr-2" />
|
||
搜索
|
||
</Button>
|
||
</div>
|
||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||
<SelectTrigger className="w-[150px]">
|
||
<SelectValue placeholder="状态筛选" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="all">全部状态</SelectItem>
|
||
<SelectItem value="pending">待审核</SelectItem>
|
||
<SelectItem value="approved">已通过</SelectItem>
|
||
<SelectItem value="rejected">已拒绝</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>认证申请列表</CardTitle>
|
||
<CardDescription>共 {total} 条申请</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead>用户</TableHead>
|
||
<TableHead>身份类型</TableHead>
|
||
<TableHead>真实姓名</TableHead>
|
||
<TableHead>学号/工号</TableHead>
|
||
<TableHead>部门</TableHead>
|
||
<TableHead>状态</TableHead>
|
||
<TableHead>提交时间</TableHead>
|
||
<TableHead className="w-[100px]">操作</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{loading ? (
|
||
<TableRow>
|
||
<TableCell colSpan={8} className="text-center py-8">
|
||
<Loader2 className="h-6 w-6 animate-spin mx-auto text-muted-foreground" />
|
||
<p className="text-muted-foreground mt-2">加载中...</p>
|
||
</TableCell>
|
||
</TableRow>
|
||
) : verifications.length === 0 ? (
|
||
<TableRow>
|
||
<TableCell colSpan={8} className="text-center py-8 text-muted-foreground">
|
||
暂无数据
|
||
</TableCell>
|
||
</TableRow>
|
||
) : (
|
||
verifications.map((verification) => (
|
||
<TableRow
|
||
key={verification.id}
|
||
className="cursor-pointer hover:bg-muted/50"
|
||
onClick={() => handleViewDetail(verification)}
|
||
>
|
||
<TableCell>
|
||
<div className="flex items-center gap-2">
|
||
<Avatar className="h-8 w-8">
|
||
<AvatarImage src={verification.avatar} alt={verification.nickname} />
|
||
<AvatarFallback>{getInitials(verification.nickname)}</AvatarFallback>
|
||
</Avatar>
|
||
<div>
|
||
<p className="font-medium">{verification.nickname}</p>
|
||
<p className="text-xs text-muted-foreground">@{verification.username}</p>
|
||
</div>
|
||
</div>
|
||
</TableCell>
|
||
<TableCell>
|
||
<Badge variant="outline">{identityText[verification.identity] || verification.identity}</Badge>
|
||
</TableCell>
|
||
<TableCell>{verification.real_name}</TableCell>
|
||
<TableCell>{verification.student_id || verification.employee_id || '-'}</TableCell>
|
||
<TableCell>{verification.department || '-'}</TableCell>
|
||
<TableCell>
|
||
<Badge className={statusColors[verification.status]}>
|
||
{statusText[verification.status]}
|
||
</Badge>
|
||
</TableCell>
|
||
<TableCell>{formatDate(verification.created_at)}</TableCell>
|
||
<TableCell onClick={(e) => e.stopPropagation()}>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => handleViewDetail(verification)}
|
||
title="查看详情"
|
||
>
|
||
<Eye className="h-4 w-4" />
|
||
</Button>
|
||
</TableCell>
|
||
</TableRow>
|
||
))
|
||
)}
|
||
</TableBody>
|
||
</Table>
|
||
|
||
{totalPages > 1 && (
|
||
<div className="mt-4 flex justify-center">
|
||
<PaginationNavigator
|
||
currentPage={page}
|
||
totalPages={totalPages}
|
||
onPageChange={handlePageChange}
|
||
/>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 详情对话框 */}
|
||
<Dialog open={detailOpen} onOpenChange={setDetailOpen}>
|
||
<DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto">
|
||
<DialogHeader>
|
||
<DialogTitle>认证详情</DialogTitle>
|
||
<DialogDescription>查看用户认证申请详情</DialogDescription>
|
||
</DialogHeader>
|
||
{detailLoading ? (
|
||
<div className="flex items-center justify-center py-8">
|
||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||
</div>
|
||
) : selectedVerification ? (
|
||
<div className="space-y-4">
|
||
<div className="flex items-center gap-3">
|
||
<Avatar className="h-12 w-12">
|
||
<AvatarImage src={selectedVerification.avatar} alt={selectedVerification.nickname} />
|
||
<AvatarFallback>{getInitials(selectedVerification.nickname)}</AvatarFallback>
|
||
</Avatar>
|
||
<div>
|
||
<p className="font-medium">{selectedVerification.nickname}</p>
|
||
<p className="text-sm text-muted-foreground">@{selectedVerification.username}</p>
|
||
</div>
|
||
<Badge className={`ml-auto ${statusColors[selectedVerification.status]}`}>
|
||
{statusText[selectedVerification.status]}
|
||
</Badge>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||
<div>
|
||
<p className="text-muted-foreground">身份类型</p>
|
||
<p className="font-medium">{identityText[selectedVerification.identity] || selectedVerification.identity}</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-muted-foreground">真实姓名</p>
|
||
<p className="font-medium">{selectedVerification.real_name}</p>
|
||
</div>
|
||
{selectedVerification.student_id && (
|
||
<div>
|
||
<p className="text-muted-foreground">学号</p>
|
||
<p className="font-medium">{selectedVerification.student_id}</p>
|
||
</div>
|
||
)}
|
||
{selectedVerification.employee_id && (
|
||
<div>
|
||
<p className="text-muted-foreground">工号</p>
|
||
<p className="font-medium">{selectedVerification.employee_id}</p>
|
||
</div>
|
||
)}
|
||
{selectedVerification.department && (
|
||
<div className="col-span-2">
|
||
<p className="text-muted-foreground">部门/院系</p>
|
||
<p className="font-medium">{selectedVerification.department}</p>
|
||
</div>
|
||
)}
|
||
<div className="col-span-2">
|
||
<p className="text-muted-foreground mb-2">证明材料</p>
|
||
<div className="border rounded-lg p-2">
|
||
<img
|
||
src={selectedVerification.proof_materials}
|
||
alt="证明材料"
|
||
className="max-w-full h-auto rounded"
|
||
/>
|
||
</div>
|
||
</div>
|
||
{selectedVerification.reviewed_at && (
|
||
<>
|
||
<div>
|
||
<p className="text-muted-foreground">审核时间</p>
|
||
<p className="font-medium">{formatDate(selectedVerification.reviewed_at)}</p>
|
||
</div>
|
||
{selectedVerification.reviewer_name && (
|
||
<div>
|
||
<p className="text-muted-foreground">审核人</p>
|
||
<p className="font-medium">{selectedVerification.reviewer_name}</p>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
{selectedVerification.reject_reason && (
|
||
<div className="col-span-2">
|
||
<p className="text-muted-foreground">拒绝原因</p>
|
||
<p className="font-medium text-red-600">{selectedVerification.reject_reason}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{selectedVerification.status === 'pending' && (
|
||
<div className="flex gap-2 pt-4">
|
||
<Button
|
||
className="flex-1"
|
||
onClick={handleOpenReviewDialog}
|
||
>
|
||
<CheckCircle className="h-4 w-4 mr-2" />
|
||
审核认证
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<p className="text-center text-muted-foreground py-8">加载失败</p>
|
||
)}
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* 审核对话框 */}
|
||
<Dialog open={reviewDialogOpen} onOpenChange={setReviewDialogOpen}>
|
||
<DialogContent className="max-w-md">
|
||
<DialogHeader>
|
||
<DialogTitle>审核认证申请</DialogTitle>
|
||
<DialogDescription>请选择通过或拒绝该认证申请</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="space-y-4 py-4">
|
||
<div>
|
||
<p className="text-sm font-medium mb-2">拒绝原因（拒绝时必填）</p>
|
||
<Textarea
|
||
placeholder="请输入拒绝原因..."
|
||
value={rejectReason}
|
||
onChange={(e) => setRejectReason(e.target.value)}
|
||
rows={3}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<DialogFooter className="gap-2">
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => handleReview(false)}
|
||
disabled={reviewLoading}
|
||
className="text-red-600 border-red-600 hover:bg-red-50"
|
||
>
|
||
{reviewLoading ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : <XCircle className="h-4 w-4 mr-2" />}
|
||
拒绝
|
||
</Button>
|
||
<Button
|
||
onClick={() => handleReview(true)}
|
||
disabled={reviewLoading}
|
||
>
|
||
{reviewLoading ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : <CheckCircle className="h-4 w-4 mr-2" />}
|
||
通过
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
)
|
||
}
|