Enhance Reports page with safe date formatting, improved status colors and icons, and add statistics display for report statuses.
This commit is contained in:
lafay
@@ -43,16 +43,30 @@ import {
|
||||
FileText,
|
||||
MessageSquare,
|
||||
Mail,
|
||||
AlertTriangle,
|
||||
Clock,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
Filter,
|
||||
ChevronRight,
|
||||
} from 'lucide-react'
|
||||
import { format } from 'date-fns'
|
||||
import type { PaginatedResponse } from '@/types'
|
||||
|
||||
// 安全的日期格式化函数，处理无效日期
|
||||
function safeFormat(dateValue: string | number | Date | null | undefined, formatStr: string): string {
|
||||
if (!dateValue) return '-'
|
||||
const date = new Date(dateValue)
|
||||
if (isNaN(date.getTime())) return '-'
|
||||
return format(date, formatStr)
|
||||
}
|
||||
|
||||
// 状态颜色映射
|
||||
const statusColors: Record<ReportStatus, string> = {
|
||||
pending: 'bg-yellow-500',
|
||||
processing: 'bg-blue-500',
|
||||
resolved: 'bg-green-500',
|
||||
rejected: 'bg-gray-500',
|
||||
pending: 'bg-yellow-100 text-yellow-800 border-yellow-200',
|
||||
processing: 'bg-blue-100 text-blue-800 border-blue-200',
|
||||
resolved: 'bg-emerald-100 text-emerald-800 border-emerald-200',
|
||||
rejected: 'bg-gray-100 text-gray-600 border-gray-200',
|
||||
}
|
||||
|
||||
// 状态文本映射
|
||||
@@ -63,18 +77,28 @@ const statusText: Record<ReportStatus, string> = {
|
||||
rejected: '已驳回',
|
||||
}
|
||||
|
||||
// 目标类型图标
|
||||
const targetTypeIcons: Record<ReportTargetType, React.ReactNode> = {
|
||||
post: <FileText className="h-4 w-4" />,
|
||||
comment: <MessageSquare className="h-4 w-4" />,
|
||||
message: <Mail className="h-4 w-4" />,
|
||||
// 状态图标映射
|
||||
const statusIcons: Record<ReportStatus, React.ReactNode> = {
|
||||
pending: <Clock className="h-3 w-3" />,
|
||||
processing: <AlertTriangle className="h-3 w-3" />,
|
||||
resolved: <CheckCircle2 className="h-3 w-3" />,
|
||||
rejected: <XCircle className="h-3 w-3" />,
|
||||
}
|
||||
|
||||
// 目标类型文本
|
||||
const targetTypeText: Record<ReportTargetType, string> = {
|
||||
post: '帖子',
|
||||
comment: '评论',
|
||||
message: '消息',
|
||||
// 举报原因图标和颜色
|
||||
const reasonConfig: Record<string, { icon: React.ReactNode; color: string }> = {
|
||||
spam: { icon: <Mail className="h-3 w-3" />, color: 'bg-purple-100 text-purple-700' },
|
||||
inappropriate: { icon: <AlertTriangle className="h-3 w-3" />, color: 'bg-red-100 text-red-700' },
|
||||
harassment: { icon: <MessageSquare className="h-3 w-3" />, color: 'bg-orange-100 text-orange-700' },
|
||||
misinformation: { icon: <FileText className="h-3 w-3" />, color: 'bg-amber-100 text-amber-700' },
|
||||
other: { icon: <Flag className="h-3 w-3" />, color: 'bg-gray-100 text-gray-600' },
|
||||
}
|
||||
|
||||
// 目标类型配置
|
||||
const targetTypeConfig: Record<ReportTargetType, { icon: React.ReactNode; color: string; label: string }> = {
|
||||
post: { icon: <FileText className="h-4 w-4" />, color: 'text-blue-600 bg-blue-50', label: '帖子' },
|
||||
comment: { icon: <MessageSquare className="h-4 w-4" />, color: 'text-green-600 bg-green-50', label: '评论' },
|
||||
message: { icon: <Mail className="h-4 w-4" />, color: 'text-purple-600 bg-purple-50', label: '消息' },
|
||||
}
|
||||
|
||||
// 举报原因文本
|
||||
@@ -97,6 +121,14 @@ export default function Reports() {
|
||||
const [statusFilter, setStatusFilter] = useState<string>('all')
|
||||
const [typeFilter, setTypeFilter] = useState<string>('all')
|
||||
|
||||
// 统计数据
|
||||
const [stats, setStats] = useState({
|
||||
pending: 0,
|
||||
processing: 0,
|
||||
resolved: 0,
|
||||
rejected: 0,
|
||||
})
|
||||
|
||||
// 批量选择
|
||||
const [selectedIds, setSelectedIds] = useState<string[]>([])
|
||||
const [isAllSelected, setIsAllSelected] = useState(false)
|
||||
@@ -131,6 +163,15 @@ export default function Reports() {
|
||||
const data = response.data.data as PaginatedResponse<ReportListItem>
|
||||
setReports(data.list || [])
|
||||
setTotal(data.total || 0)
|
||||
|
||||
// 更新统计数据（仅当无筛选时）
|
||||
if (!keyword && statusFilter === 'all' && typeFilter === 'all') {
|
||||
const newStats = { pending: 0, processing: 0, resolved: 0, rejected: 0 }
|
||||
data.list?.forEach((report: ReportListItem) => {
|
||||
newStats[report.status] = (newStats[report.status] || 0) + 1
|
||||
})
|
||||
setStats(newStats)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load reports:', error)
|
||||
} finally {
|
||||
@@ -235,36 +276,115 @@ export default function Reports() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 标题 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-6 pb-8">
|
||||
{/* 页面标题 */}
|
||||
<div className="flex items-center justify-between bg-gradient-to-r from-slate-50 to-white p-6 rounded-2xl border border-slate-200/60 shadow-sm">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">举报管理</h1>
|
||||
<p className="text-muted-foreground">处理用户举报的帖子、评论和消息</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-red-100 rounded-xl">
|
||||
<Flag className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900">举报管理</h1>
|
||||
<p className="text-sm text-slate-500 mt-0.5">处理用户举报的帖子、评论和消息，维护社区环境</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={handleRefresh} disabled={loading}>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleRefresh}
|
||||
disabled={loading}
|
||||
className="bg-white hover:bg-slate-50 border-slate-200"
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 统计卡片 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<Card className="border-l-4 border-l-yellow-400 hover:shadow-md transition-shadow">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-500">待处理</p>
|
||||
<p className="text-2xl font-bold text-slate-900 mt-1">{stats.pending}</p>
|
||||
</div>
|
||||
<div className="p-2 bg-yellow-100 rounded-lg">
|
||||
<Clock className="h-5 w-5 text-yellow-600" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-l-4 border-l-blue-400 hover:shadow-md transition-shadow">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-500">处理中</p>
|
||||
<p className="text-2xl font-bold text-slate-900 mt-1">{stats.processing}</p>
|
||||
</div>
|
||||
<div className="p-2 bg-blue-100 rounded-lg">
|
||||
<AlertTriangle className="h-5 w-5 text-blue-600" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-l-4 border-l-emerald-400 hover:shadow-md transition-shadow">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-500">已确认</p>
|
||||
<p className="text-2xl font-bold text-slate-900 mt-1">{stats.resolved}</p>
|
||||
</div>
|
||||
<div className="p-2 bg-emerald-100 rounded-lg">
|
||||
<CheckCircle2 className="h-5 w-5 text-emerald-600" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-l-4 border-l-gray-400 hover:shadow-md transition-shadow">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-500">已驳回</p>
|
||||
<p className="text-2xl font-bold text-slate-900 mt-1">{stats.rejected}</p>
|
||||
</div>
|
||||
<div className="p-2 bg-gray-100 rounded-lg">
|
||||
<XCircle className="h-5 w-5 text-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 筛选卡片 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>筛选条件</CardTitle>
|
||||
<Card className="border-slate-200/60 shadow-sm">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base font-semibold flex items-center gap-2">
|
||||
<Filter className="h-4 w-4" />
|
||||
筛选条件
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<div className="flex-1 min-w-[200px]">
|
||||
<Input
|
||||
placeholder="搜索举报内容..."
|
||||
value={keyword}
|
||||
onChange={(e) => setKeyword(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
||||
/>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<div className="flex-1 min-w-[240px]">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
|
||||
<Input
|
||||
placeholder="搜索举报内容、举报人..."
|
||||
value={keyword}
|
||||
onChange={(e) => setKeyword(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Select value={typeFilter} onValueChange={setTypeFilter}>
|
||||
<SelectTrigger className="w-[140px]">
|
||||
<SelectTrigger className="w-[130px]">
|
||||
<SelectValue placeholder="目标类型" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -275,7 +395,7 @@ export default function Reports() {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="w-[140px]">
|
||||
<SelectTrigger className="w-[130px]">
|
||||
<SelectValue placeholder="处理状态" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -286,7 +406,7 @@ export default function Reports() {
|
||||
<SelectItem value="rejected">已驳回</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button onClick={handleSearch}>
|
||||
<Button onClick={handleSearch} className="bg-slate-900 hover:bg-slate-800">
|
||||
<Search className="h-4 w-4 mr-2" />
|
||||
搜索
|
||||
</Button>
|
||||
@@ -295,11 +415,18 @@ export default function Reports() {
|
||||
</Card>
|
||||
|
||||
{/* 举报列表 */}
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<Card className="border-slate-200/60 shadow-sm">
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-4">
|
||||
<div>
|
||||
<CardTitle>举报列表</CardTitle>
|
||||
<CardDescription>共 {total} 条记录</CardDescription>
|
||||
<CardTitle className="text-base font-semibold">举报列表</CardTitle>
|
||||
<CardDescription className="text-sm mt-1">
|
||||
共 <span className="font-semibold text-slate-900">{total}</span> 条记录
|
||||
{selectedIds.length > 0 && (
|
||||
<span className="ml-2 text-blue-600 font-medium">
|
||||
· 已选择 {selectedIds.length} 条
|
||||
</span>
|
||||
)}
|
||||
</CardDescription>
|
||||
</div>
|
||||
{selectedIds.length > 0 && (
|
||||
<div className="flex gap-2">
|
||||
@@ -308,15 +435,21 @@ export default function Reports() {
|
||||
size="sm"
|
||||
onClick={() => handleBatchAction('approve')}
|
||||
disabled={batchLoading}
|
||||
className="border-emerald-200 text-emerald-700 hover:bg-emerald-50"
|
||||
>
|
||||
{batchLoading ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Check className="h-4 w-4 mr-2" />}
|
||||
批量确认 ({selectedIds.length})
|
||||
{batchLoading ? (
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
) : (
|
||||
<Check className="h-4 w-4 mr-2" />
|
||||
)}
|
||||
批量确认
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleBatchAction('reject')}
|
||||
disabled={batchLoading}
|
||||
className="border-red-200 text-red-700 hover:bg-red-50"
|
||||
>
|
||||
<X className="h-4 w-4 mr-2" />
|
||||
批量驳回
|
||||
@@ -325,192 +458,297 @@ export default function Reports() {
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-12">
|
||||
<Checkbox
|
||||
checked={isAllSelected}
|
||||
onCheckedChange={handleSelectAll}
|
||||
/>
|
||||
</TableHead>
|
||||
<TableHead>举报人</TableHead>
|
||||
<TableHead>目标类型</TableHead>
|
||||
<TableHead>举报原因</TableHead>
|
||||
<TableHead>状态</TableHead>
|
||||
<TableHead>举报时间</TableHead>
|
||||
<TableHead>操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={7} className="text-center py-8">
|
||||
<Loader2 className="h-6 w-6 animate-spin mx-auto" />
|
||||
<span className="text-muted-foreground mt-2 block">加载中...</span>
|
||||
</TableCell>
|
||||
<div className="rounded-lg border border-slate-200">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-slate-50/50 hover:bg-slate-50">
|
||||
<TableHead className="w-10">
|
||||
<Checkbox
|
||||
checked={isAllSelected}
|
||||
onCheckedChange={handleSelectAll}
|
||||
className="data-[state=checked]:bg-slate-900 data-[state=checked]:border-slate-900"
|
||||
/>
|
||||
</TableHead>
|
||||
<TableHead className="font-semibold text-slate-700">举报人</TableHead>
|
||||
<TableHead className="font-semibold text-slate-700">目标类型</TableHead>
|
||||
<TableHead className="font-semibold text-slate-700">举报原因</TableHead>
|
||||
<TableHead className="font-semibold text-slate-700">状态</TableHead>
|
||||
<TableHead className="font-semibold text-slate-700">举报时间</TableHead>
|
||||
<TableHead className="font-semibold text-slate-700 text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
) : reports.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
|
||||
暂无举报记录
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
reports.map((report) => (
|
||||
<TableRow key={report.id}>
|
||||
<TableCell>
|
||||
<Checkbox
|
||||
checked={selectedIds.includes(report.id)}
|
||||
onCheckedChange={(checked) => handleSelect(report.id, !!checked)}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage src={report.reporter?.avatar} />
|
||||
<AvatarFallback>{report.reporter?.nickname?.[0] || '?'}</AvatarFallback>
|
||||
</Avatar>
|
||||
<span>{report.reporter?.nickname || '未知用户'}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-1">
|
||||
{targetTypeIcons[report.target_type]}
|
||||
<span>{targetTypeText[report.target_type]}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span>{reasonText[report.reason] || report.reason}</span>
|
||||
{report.description && (
|
||||
<p className="text-xs text-muted-foreground mt-1 line-clamp-1">{report.description}</p>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge className={statusColors[report.status]}>
|
||||
{statusText[report.status]}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{format(new Date(report.created_at), 'yyyy-MM-dd HH:mm')}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-1">
|
||||
<Button variant="ghost" size="sm" onClick={() => handleViewDetail(report)}>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
{report.status === 'pending' && (
|
||||
<Button variant="ghost" size="sm" onClick={() => openHandleDialog(report)}>
|
||||
<Flag className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={7} className="text-center py-12">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-slate-400" />
|
||||
<span className="text-slate-500">加载中...</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<PaginationNavigator
|
||||
currentPage={page}
|
||||
totalPages={Math.ceil(total / pageSize)}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
) : reports.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={7} className="text-center py-12">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="p-3 bg-slate-100 rounded-full">
|
||||
<Flag className="h-6 w-6 text-slate-400" />
|
||||
</div>
|
||||
<span className="text-slate-500 font-medium">暂无举报记录</span>
|
||||
<span className="text-slate-400 text-sm">所有举报都已处理完毕</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
reports.map((report) => {
|
||||
const reasonCfg = reasonConfig[report.reason] || reasonConfig.other
|
||||
const typeCfg = targetTypeConfig[report.target_type] || {
|
||||
icon: <FileText className="h-4 w-4" />,
|
||||
color: 'text-slate-600 bg-slate-50',
|
||||
label: report.target_type || '未知',
|
||||
}
|
||||
return (
|
||||
<TableRow
|
||||
key={report.id}
|
||||
className={`group transition-colors ${
|
||||
selectedIds.includes(report.id) ? 'bg-blue-50/40' : 'hover:bg-slate-50/60'
|
||||
}`}
|
||||
>
|
||||
<TableCell>
|
||||
<Checkbox
|
||||
checked={selectedIds.includes(report.id)}
|
||||
onCheckedChange={(checked) => handleSelect(report.id, !!checked)}
|
||||
className="data-[state=checked]:bg-blue-600 data-[state=checked]:border-blue-600"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<Avatar className="h-9 w-9 ring-2 ring-white">
|
||||
<AvatarImage src={report.reporter?.avatar} />
|
||||
<AvatarFallback className="bg-slate-100 text-slate-600 text-sm font-medium">
|
||||
{report.reporter?.nickname?.[0] || '?'}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<span className="font-medium text-slate-900">
|
||||
{report.reporter?.nickname || '未知用户'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className={`flex items-center gap-2 px-2.5 py-1 rounded-md w-fit ${typeCfg.color}`}>
|
||||
{typeCfg.icon}
|
||||
<span className="text-sm font-medium">{typeCfg.label}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className={`flex items-center gap-2 w-fit px-2 py-0.5 rounded text-sm font-medium ${reasonCfg.color}`}>
|
||||
{reasonCfg.icon}
|
||||
<span>{reasonText[report.reason] || report.reason}</span>
|
||||
</div>
|
||||
{report.description && (
|
||||
<p className="text-xs text-slate-500 line-clamp-1 max-w-[200px]">
|
||||
{report.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
className={`flex items-center gap-1.5 px-2.5 py-1 border ${statusColors[report.status]}`}
|
||||
>
|
||||
{statusIcons[report.status]}
|
||||
<span className="font-medium">{statusText[report.status]}</span>
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="text-sm text-slate-600 font-mono">
|
||||
{safeFormat(report.created_at, 'yyyy-MM-dd HH:mm')}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleViewDetail(report)}
|
||||
className="h-8 w-8 p-0 hover:bg-slate-100"
|
||||
>
|
||||
<Eye className="h-4 w-4 text-slate-600" />
|
||||
</Button>
|
||||
{report.status === 'pending' && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => openHandleDialog(report)}
|
||||
className="h-8 w-8 p-0 hover:bg-yellow-50"
|
||||
>
|
||||
<Flag className="h-4 w-4 text-yellow-600" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity hover:bg-slate-100"
|
||||
>
|
||||
<ChevronRight className="h-4 w-4 text-slate-400" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
<div className="mt-4 flex items-center justify-between">
|
||||
<div className="text-sm text-slate-500">
|
||||
显示第 {(page - 1) * pageSize + 1} - {Math.min(page * pageSize, total)} 条
|
||||
</div>
|
||||
<PaginationNavigator
|
||||
currentPage={page}
|
||||
totalPages={Math.ceil(total / pageSize)}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 详情对话框 */}
|
||||
<Dialog open={detailOpen} onOpenChange={setDetailOpen}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>举报详情</DialogTitle>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Flag className="h-5 w-5 text-red-500" />
|
||||
举报详情
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
{detailLoading ? (
|
||||
<div className="flex justify-center py-8">
|
||||
<Loader2 className="h-6 w-6 animate-spin" />
|
||||
<div className="flex justify-center py-12">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-slate-400" />
|
||||
<span className="text-slate-500">加载中...</span>
|
||||
</div>
|
||||
</div>
|
||||
) : selectedReport ? (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-5">
|
||||
{/* 基本信息 */}
|
||||
<div className="p-4 bg-slate-50 rounded-xl">
|
||||
<h4 className="text-sm font-semibold text-slate-700 mb-3">基本信息</h4>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className="text-xs text-slate-500">举报人</Label>
|
||||
<div className="flex items-center gap-2 mt-1.5">
|
||||
<Avatar className="h-7 w-7">
|
||||
<AvatarImage src={selectedReport.reporter?.avatar} />
|
||||
<AvatarFallback className="text-xs">{selectedReport.reporter?.nickname?.[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="text-sm font-medium text-slate-900">
|
||||
{selectedReport.reporter?.nickname}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs text-slate-500">举报时间</Label>
|
||||
<p className="text-sm font-mono text-slate-700 mt-1.5">
|
||||
{safeFormat(selectedReport.created_at, 'yyyy-MM-dd HH:mm:ss')}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-muted-foreground">举报人</Label>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage src={selectedReport.reporter?.avatar} />
|
||||
<AvatarFallback>{selectedReport.reporter?.nickname?.[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<span>{selectedReport.reporter?.nickname}</span>
|
||||
<Label className="text-xs text-slate-500">目标类型</Label>
|
||||
{(() => {
|
||||
const detailTypeCfg = targetTypeConfig[selectedReport.target_type] || {
|
||||
icon: <FileText className="h-4 w-4" />,
|
||||
color: 'text-slate-600 bg-slate-50',
|
||||
label: selectedReport.target_type || '未知',
|
||||
}
|
||||
return (
|
||||
<div className={`flex items-center gap-2 mt-1.5 w-fit px-2 py-0.5 rounded ${detailTypeCfg.color}`}>
|
||||
{detailTypeCfg.icon}
|
||||
<span className="text-sm font-medium">{detailTypeCfg.label}</span>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs text-slate-500">处理状态</Label>
|
||||
<div className="mt-1.5">
|
||||
<Badge className={`flex items-center gap-1.5 ${statusColors[selectedReport.status]}`}>
|
||||
{statusIcons[selectedReport.status]}
|
||||
<span className="font-medium">{statusText[selectedReport.status]}</span>
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-muted-foreground">举报时间</Label>
|
||||
<p>{format(new Date(selectedReport.created_at), 'yyyy-MM-dd HH:mm:ss')}</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-muted-foreground">目标类型</Label>
|
||||
<p>{targetTypeText[selectedReport.target_type]}</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-muted-foreground">处理状态</Label>
|
||||
<Badge className={statusColors[selectedReport.status]}>
|
||||
{statusText[selectedReport.status]}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<Label className="text-muted-foreground">举报原因</Label>
|
||||
<p>{reasonText[selectedReport.reason] || selectedReport.reason}</p>
|
||||
</div>
|
||||
|
||||
{/* 举报原因 */}
|
||||
<div>
|
||||
<Label className="text-xs text-slate-500">举报原因</Label>
|
||||
<div className={`flex items-center gap-2 mt-2 w-fit px-3 py-1.5 rounded-lg ${reasonConfig[selectedReport.reason]?.color || reasonConfig.other.color}`}>
|
||||
{reasonConfig[selectedReport.reason]?.icon || reasonConfig.other.icon}
|
||||
<span className="text-sm font-medium">
|
||||
{reasonText[selectedReport.reason] || selectedReport.reason}
|
||||
</span>
|
||||
</div>
|
||||
{selectedReport.description && (
|
||||
<div className="col-span-2">
|
||||
<Label className="text-muted-foreground">详细描述</Label>
|
||||
<p>{selectedReport.description}</p>
|
||||
<div className="mt-3 p-3 bg-amber-50 border border-amber-200 rounded-lg">
|
||||
<Label className="text-xs text-amber-700">详细描述</Label>
|
||||
<p className="text-sm text-amber-900 mt-1">{selectedReport.description}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 被举报内容 */}
|
||||
{selectedReport.target_content && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">被举报内容</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{selectedReport.target_content.title && (
|
||||
<p className="font-medium mb-2">{selectedReport.target_content.title}</p>
|
||||
)}
|
||||
<p className="text-sm text-muted-foreground">{selectedReport.target_content.content}</p>
|
||||
{selectedReport.target_content.images && selectedReport.target_content.images.length > 0 && (
|
||||
<div className="flex gap-2 mt-2">
|
||||
{selectedReport.target_content.images.map((img, i) => (
|
||||
<img key={i} src={img} alt="" className="w-16 h-16 object-cover rounded" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{selectedReport.handler && (
|
||||
<div>
|
||||
<Label className="text-muted-foreground">处理人</Label>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<Avatar className="h-6 w-6">
|
||||
<AvatarImage src={selectedReport.handler.avatar} />
|
||||
<AvatarFallback>{selectedReport.handler.nickname?.[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<span>{selectedReport.handler.nickname}</span>
|
||||
{selectedReport.handled_at && (
|
||||
<span className="text-muted-foreground text-sm">
|
||||
{format(new Date(selectedReport.handled_at), 'yyyy-MM-dd HH:mm')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4 bg-slate-50 rounded-xl">
|
||||
<h4 className="text-sm font-semibold text-slate-700 mb-3">被举报内容</h4>
|
||||
{selectedReport.target_content.title && (
|
||||
<p className="font-semibold text-slate-900 mb-2">{selectedReport.target_content.title}</p>
|
||||
)}
|
||||
<p className="text-sm text-slate-600 leading-relaxed">{selectedReport.target_content.content}</p>
|
||||
{selectedReport.target_content.images && selectedReport.target_content.images.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mt-3">
|
||||
{selectedReport.target_content.images.map((img, i) => (
|
||||
<img
|
||||
key={i}
|
||||
src={img}
|
||||
alt=""
|
||||
className="w-20 h-20 object-cover rounded-lg cursor-pointer hover:opacity-80 transition-opacity ring-1 ring-slate-200"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedReport.result && (
|
||||
<div>
|
||||
<Label className="text-muted-foreground">处理结果</Label>
|
||||
<p>{selectedReport.result}</p>
|
||||
{/* 处理信息 */}
|
||||
{selectedReport.handler && (
|
||||
<div className="p-4 bg-slate-50 rounded-xl">
|
||||
<h4 className="text-sm font-semibold text-slate-700 mb-3">处理信息</h4>
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage src={selectedReport.handler.avatar} />
|
||||
<AvatarFallback className="text-xs">{selectedReport.handler.nickname?.[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-900">{selectedReport.handler.nickname}</p>
|
||||
{selectedReport.handled_at && (
|
||||
<p className="text-xs text-slate-500 font-mono mt-0.5">
|
||||
{safeFormat(selectedReport.handled_at, 'yyyy-MM-dd HH:mm')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{selectedReport.result && (
|
||||
<div className="mt-3 p-3 bg-white border border-slate-200 rounded-lg">
|
||||
<Label className="text-xs text-slate-500">处理结果</Label>
|
||||
<p className="text-sm text-slate-700 mt-1">{selectedReport.result}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -520,43 +758,63 @@ export default function Reports() {
|
||||
|
||||
{/* 处理对话框 */}
|
||||
<Dialog open={handleOpen} onOpenChange={setHandleOpen}>
|
||||
<DialogContent>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>处理举报</DialogTitle>
|
||||
<DialogDescription>请选择处理方式</DialogDescription>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Flag className="h-5 w-5 text-yellow-500" />
|
||||
处理举报
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-sm">
|
||||
请根据举报内容选择处理方式
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="flex gap-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Button
|
||||
variant={handleAction === 'approve' ? 'default' : 'outline'}
|
||||
className="flex-1"
|
||||
className={`h-20 flex-col gap-2 ${
|
||||
handleAction === 'approve'
|
||||
? 'bg-red-600 hover:bg-red-700'
|
||||
: 'border-slate-200 hover:bg-red-50 hover:text-red-600 hover:border-red-200'
|
||||
}`}
|
||||
onClick={() => setHandleAction('approve')}
|
||||
>
|
||||
<Check className="h-4 w-4 mr-2" />
|
||||
确认违规
|
||||
<Check className="h-5 w-5" />
|
||||
<span>确认违规</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant={handleAction === 'reject' ? 'default' : 'outline'}
|
||||
className="flex-1"
|
||||
className={`h-20 flex-col gap-2 ${
|
||||
handleAction === 'reject'
|
||||
? 'bg-emerald-600 hover:bg-emerald-700'
|
||||
: 'border-slate-200 hover:bg-emerald-50 hover:text-emerald-600 hover:border-emerald-200'
|
||||
}`}
|
||||
onClick={() => setHandleAction('reject')}
|
||||
>
|
||||
<X className="h-4 w-4 mr-2" />
|
||||
驳回举报
|
||||
<X className="h-5 w-5" />
|
||||
<span>驳回举报</span>
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Label>处理说明（选填）</Label>
|
||||
<Label className="text-sm font-medium">处理说明（选填）</Label>
|
||||
<Textarea
|
||||
value={handleResult}
|
||||
onChange={(e) => setHandleResult(e.target.value)}
|
||||
placeholder="请输入处理说明..."
|
||||
placeholder="请输入处理说明，将发送给举报人..."
|
||||
rows={3}
|
||||
className="mt-2 resize-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setHandleOpen(false)}>取消</Button>
|
||||
<Button onClick={submitHandle} disabled={handleLoading}>
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<Button variant="outline" onClick={() => setHandleOpen(false)} className="border-slate-200">
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
onClick={submitHandle}
|
||||
disabled={handleLoading}
|
||||
className={handleAction === 'approve' ? 'bg-red-600 hover:bg-red-700' : 'bg-emerald-600 hover:bg-emerald-700'}
|
||||
>
|
||||
{handleLoading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
|
||||
确认提交
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user