826 lines
34 KiB
TypeScript
826 lines
34 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react'
|
||
import { reportsApi, type ReportListItem, type ReportDetail, type ReportQueryParams, type ReportStatus, type ReportTargetType } 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 { Checkbox } from '@/components/ui/checkbox'
|
||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||
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 { Textarea } from '@/components/ui/textarea'
|
||
import { Label } from '@/components/ui/label'
|
||
import {
|
||
Search,
|
||
RefreshCw,
|
||
Eye,
|
||
Check,
|
||
X,
|
||
Loader2,
|
||
Flag,
|
||
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-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',
|
||
}
|
||
|
||
// 状态文本映射
|
||
const statusText: Record<ReportStatus, string> = {
|
||
pending: '待处理',
|
||
processing: '处理中',
|
||
resolved: '已确认',
|
||
rejected: '已驳回',
|
||
}
|
||
|
||
// 状态图标映射
|
||
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 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: '消息' },
|
||
}
|
||
|
||
// 举报原因文本
|
||
const reasonText: Record<string, string> = {
|
||
spam: '垃圾广告',
|
||
inappropriate: '违规内容',
|
||
harassment: '辱骂/攻击',
|
||
misinformation: '虚假信息',
|
||
other: '其他',
|
||
}
|
||
|
||
export default function Reports() {
|
||
// 状态
|
||
const [reports, setReports] = useState<ReportListItem[]>([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [total, setTotal] = useState(0)
|
||
const [page, setPage] = useState(1)
|
||
const [pageSize] = useState(10)
|
||
const [keyword, setKeyword] = useState('')
|
||
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)
|
||
|
||
// 详情对话框
|
||
const [detailOpen, setDetailOpen] = useState(false)
|
||
const [selectedReport, setSelectedReport] = useState<ReportDetail | null>(null)
|
||
const [detailLoading, setDetailLoading] = useState(false)
|
||
|
||
// 处理对话框
|
||
const [handleOpen, setHandleOpen] = useState(false)
|
||
const [handleReport, setHandleReport] = useState<ReportListItem | null>(null)
|
||
const [handleAction, setHandleAction] = useState<'approve' | 'reject'>('approve')
|
||
const [handleResult, setHandleResult] = useState('')
|
||
const [handleLoading, setHandleLoading] = useState(false)
|
||
|
||
// 批量操作加载状态
|
||
const [batchLoading, setBatchLoading] = useState(false)
|
||
|
||
// 加载举报列表
|
||
const loadReports = useCallback(async () => {
|
||
setLoading(true)
|
||
try {
|
||
const params: ReportQueryParams = {
|
||
page,
|
||
page_size: pageSize,
|
||
keyword: keyword || undefined,
|
||
status: statusFilter !== 'all' ? (statusFilter as ReportStatus) : undefined,
|
||
target_type: typeFilter !== 'all' ? (typeFilter as ReportTargetType) : undefined,
|
||
}
|
||
const response = await reportsApi.getReports(params)
|
||
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 {
|
||
setLoading(false)
|
||
setSelectedIds([])
|
||
setIsAllSelected(false)
|
||
}
|
||
}, [page, pageSize, keyword, statusFilter, typeFilter])
|
||
|
||
useEffect(() => {
|
||
loadReports()
|
||
}, [loadReports])
|
||
|
||
// 处理搜索
|
||
const handleSearch = () => {
|
||
setPage(1)
|
||
loadReports()
|
||
}
|
||
|
||
// 处理刷新
|
||
const handleRefresh = () => {
|
||
loadReports()
|
||
}
|
||
|
||
// 全选/取消全选
|
||
const handleSelectAll = (checked: boolean) => {
|
||
if (checked) {
|
||
setSelectedIds(reports.map(r => r.id))
|
||
setIsAllSelected(true)
|
||
} else {
|
||
setSelectedIds([])
|
||
setIsAllSelected(false)
|
||
}
|
||
}
|
||
|
||
// 单选
|
||
const handleSelect = (id: string, checked: boolean) => {
|
||
if (checked) {
|
||
setSelectedIds([...selectedIds, id])
|
||
} else {
|
||
setSelectedIds(selectedIds.filter(i => i !== id))
|
||
}
|
||
setIsAllSelected(checked && selectedIds.length === reports.length - 1)
|
||
}
|
||
|
||
// 查看详情
|
||
const handleViewDetail = async (report: ReportListItem) => {
|
||
setDetailLoading(true)
|
||
setDetailOpen(true)
|
||
try {
|
||
const response = await reportsApi.getReportById(report.id)
|
||
setSelectedReport(response.data)
|
||
} catch (error) {
|
||
console.error('Failed to load report detail:', error)
|
||
setDetailOpen(false)
|
||
} finally {
|
||
setDetailLoading(false)
|
||
}
|
||
}
|
||
|
||
// 打开处理对话框
|
||
const openHandleDialog = (report: ReportListItem) => {
|
||
setHandleReport(report)
|
||
setHandleAction('approve')
|
||
setHandleResult('')
|
||
setHandleOpen(true)
|
||
}
|
||
|
||
// 提交处理
|
||
const submitHandle = async () => {
|
||
if (!handleReport) return
|
||
setHandleLoading(true)
|
||
try {
|
||
await reportsApi.handleReport(handleReport.id, {
|
||
action: handleAction,
|
||
result: handleResult || undefined,
|
||
})
|
||
setHandleOpen(false)
|
||
loadReports()
|
||
} catch (error) {
|
||
console.error('Failed to handle report:', error)
|
||
} finally {
|
||
setHandleLoading(false)
|
||
}
|
||
}
|
||
|
||
// 批量处理
|
||
const handleBatchAction = async (action: 'approve' | 'reject') => {
|
||
if (selectedIds.length === 0) return
|
||
setBatchLoading(true)
|
||
try {
|
||
await reportsApi.batchHandle({
|
||
ids: selectedIds,
|
||
action,
|
||
})
|
||
loadReports()
|
||
} catch (error) {
|
||
console.error('Failed to batch handle:', error)
|
||
} finally {
|
||
setBatchLoading(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<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>
|
||
<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}
|
||
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 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-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-[130px]">
|
||
<SelectValue placeholder="目标类型" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="all">全部类型</SelectItem>
|
||
<SelectItem value="post">帖子</SelectItem>
|
||
<SelectItem value="comment">评论</SelectItem>
|
||
<SelectItem value="message">消息</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||
<SelectTrigger className="w-[130px]">
|
||
<SelectValue placeholder="处理状态" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="all">全部状态</SelectItem>
|
||
<SelectItem value="pending">待处理</SelectItem>
|
||
<SelectItem value="processing">处理中</SelectItem>
|
||
<SelectItem value="resolved">已确认</SelectItem>
|
||
<SelectItem value="rejected">已驳回</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
<Button onClick={handleSearch} className="bg-slate-900 hover:bg-slate-800">
|
||
<Search className="h-4 w-4 mr-2" />
|
||
搜索
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 举报列表 */}
|
||
<Card className="border-slate-200/60 shadow-sm">
|
||
<CardHeader className="flex flex-row items-center justify-between pb-4">
|
||
<div>
|
||
<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">
|
||
<Button
|
||
variant="outline"
|
||
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" />
|
||
)}
|
||
批量确认
|
||
</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" />
|
||
批量驳回
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</CardHeader>
|
||
<CardContent>
|
||
<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>
|
||
</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>
|
||
) : 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 max-h-[90vh] overflow-y-auto">
|
||
<DialogHeader>
|
||
<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-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-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-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>
|
||
|
||
{/* 举报原因 */}
|
||
<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="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 && (
|
||
<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.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>
|
||
) : null}
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* 处理对话框 */}
|
||
<Dialog open={handleOpen} onOpenChange={setHandleOpen}>
|
||
<DialogContent className="max-w-md">
|
||
<DialogHeader>
|
||
<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="grid grid-cols-2 gap-3">
|
||
<Button
|
||
variant={handleAction === 'approve' ? 'default' : 'outline'}
|
||
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-5 w-5" />
|
||
<span>确认违规</span>
|
||
</Button>
|
||
<Button
|
||
variant={handleAction === 'reject' ? 'default' : 'outline'}
|
||
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-5 w-5" />
|
||
<span>驳回举报</span>
|
||
</Button>
|
||
</div>
|
||
<div>
|
||
<Label className="text-sm font-medium">处理说明（选填）</Label>
|
||
<Textarea
|
||
value={handleResult}
|
||
onChange={(e) => setHandleResult(e.target.value)}
|
||
placeholder="请输入处理说明，将发送给举报人..."
|
||
rows={3}
|
||
className="mt-2 resize-none"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<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>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
)
|
||
} |