Add reports management to Sidebar and API index; introduce new route for reports with appropriate guard
This commit is contained in:
lafay
@@ -16,3 +16,5 @@ export { dashboardApi } from './dashboard'
|
||||
export type { DashboardStatsData, ActivityTrendData, ContentStatsData, PendingContent } from './dashboard'
|
||||
export { subjectsApi, materialsApi } from './materials'
|
||||
export type { MaterialSubject, MaterialFile, MaterialFileType, SubjectUpsertRequest, MaterialCreateRequest, MaterialUpdateRequest, MaterialQueryParams } from './materials'
|
||||
export { reportsApi } from './reports'
|
||||
export type { ReportListItem, ReportDetail, ReportQueryParams, ReportStatus, ReportTargetType, HandleReportRequest, BatchHandleRequest, BatchHandleResponse } from './reports'
|
||||
|
||||
106
src/api/reports.ts
Normal file
106
src/api/reports.ts
Normal file
@@ -0,0 +1,106 @@
|
||||
/**
|
||||
* 管理端举报 API
|
||||
*/
|
||||
|
||||
import apiClient from './client';
|
||||
|
||||
// 举报状态
|
||||
export type ReportStatus = 'pending' | 'processing' | 'resolved' | 'rejected';
|
||||
|
||||
// 举报目标类型
|
||||
export type ReportTargetType = 'post' | 'comment' | 'message';
|
||||
|
||||
// 举报列表项
|
||||
export interface ReportListItem {
|
||||
id: string;
|
||||
reporter_id: string;
|
||||
reporter?: {
|
||||
id: string;
|
||||
nickname: string;
|
||||
avatar: string;
|
||||
};
|
||||
target_type: ReportTargetType;
|
||||
target_id: string;
|
||||
reason: string;
|
||||
description?: string;
|
||||
status: ReportStatus;
|
||||
handled_by?: string;
|
||||
handler?: {
|
||||
id: string;
|
||||
nickname: string;
|
||||
avatar: string;
|
||||
};
|
||||
handled_at?: string;
|
||||
result?: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
// 举报详情
|
||||
export interface ReportDetail extends ReportListItem {
|
||||
target_content?: {
|
||||
type: ReportTargetType;
|
||||
id: string;
|
||||
author?: {
|
||||
id: string;
|
||||
nickname: string;
|
||||
avatar: string;
|
||||
};
|
||||
content?: string;
|
||||
title?: string;
|
||||
images?: string[];
|
||||
status?: string;
|
||||
created_at?: string;
|
||||
};
|
||||
}
|
||||
|
||||
// 查询参数
|
||||
export interface ReportQueryParams {
|
||||
page?: number;
|
||||
page_size?: number;
|
||||
target_type?: ReportTargetType;
|
||||
status?: ReportStatus;
|
||||
start_date?: string;
|
||||
end_date?: string;
|
||||
keyword?: string;
|
||||
}
|
||||
|
||||
// 处理举报请求
|
||||
export interface HandleReportRequest {
|
||||
action: 'approve' | 'reject';
|
||||
result?: string;
|
||||
}
|
||||
|
||||
// 批量处理请求
|
||||
export interface BatchHandleRequest {
|
||||
ids: string[];
|
||||
action: 'approve' | 'reject';
|
||||
result?: string;
|
||||
}
|
||||
|
||||
// 批量处理响应
|
||||
export interface BatchHandleResponse {
|
||||
success_count: number;
|
||||
failed_count: number;
|
||||
failed_ids?: string[];
|
||||
}
|
||||
|
||||
// 举报API
|
||||
export const reportsApi = {
|
||||
// 获取举报列表
|
||||
getReports: (params: ReportQueryParams) =>
|
||||
apiClient.get('/admin/reports', { params }),
|
||||
|
||||
// 获取举报详情
|
||||
getReportById: (id: string) =>
|
||||
apiClient.get<ReportDetail>(`/admin/reports/${id}`),
|
||||
|
||||
// 处理举报
|
||||
handleReport: (id: string, data: HandleReportRequest) =>
|
||||
apiClient.put(`/admin/reports/${id}/handle`, data),
|
||||
|
||||
// 批量处理
|
||||
batchHandle: (data: BatchHandleRequest) =>
|
||||
apiClient.post<BatchHandleResponse>('/admin/reports/batch-handle', data),
|
||||
};
|
||||
|
||||
export default reportsApi;
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
BookOpen,
|
||||
ChevronDown,
|
||||
Layers,
|
||||
Flag,
|
||||
} from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { useState } from 'react'
|
||||
@@ -68,6 +69,12 @@ const menuItems: MenuItem[] = [
|
||||
icon: UsersIcon,
|
||||
roles: [ROLES.SUPER_ADMIN, ROLES.ADMIN, ROLES.MODERATOR],
|
||||
},
|
||||
{
|
||||
title: '举报管理',
|
||||
path: '/reports',
|
||||
icon: Flag,
|
||||
roles: [ROLES.SUPER_ADMIN, ROLES.ADMIN, ROLES.MODERATOR],
|
||||
},
|
||||
{
|
||||
title: '频道管理',
|
||||
path: '/channels',
|
||||
|
||||
568
src/pages/Reports.tsx
Normal file
568
src/pages/Reports.tsx
Normal file
@@ -0,0 +1,568 @@
|
||||
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,
|
||||
} from 'lucide-react'
|
||||
import { format } from 'date-fns'
|
||||
import type { PaginatedResponse } from '@/types'
|
||||
|
||||
// 状态颜色映射
|
||||
const statusColors: Record<ReportStatus, string> = {
|
||||
pending: 'bg-yellow-500',
|
||||
processing: 'bg-blue-500',
|
||||
resolved: 'bg-green-500',
|
||||
rejected: 'bg-gray-500',
|
||||
}
|
||||
|
||||
// 状态文本映射
|
||||
const statusText: Record<ReportStatus, string> = {
|
||||
pending: '待处理',
|
||||
processing: '处理中',
|
||||
resolved: '已确认',
|
||||
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 targetTypeText: Record<ReportTargetType, string> = {
|
||||
post: '帖子',
|
||||
comment: '评论',
|
||||
message: '消息',
|
||||
}
|
||||
|
||||
// 举报原因文本
|
||||
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 [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)
|
||||
} 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">
|
||||
{/* 标题 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">举报管理</h1>
|
||||
<p className="text-muted-foreground">处理用户举报的帖子、评论和消息</p>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={handleRefresh} disabled={loading}>
|
||||
<RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 筛选卡片 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>筛选条件</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>
|
||||
<Select value={typeFilter} onValueChange={setTypeFilter}>
|
||||
<SelectTrigger className="w-[140px]">
|
||||
<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-[140px]">
|
||||
<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}>
|
||||
<Search className="h-4 w-4 mr-2" />
|
||||
搜索
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 举报列表 */}
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>举报列表</CardTitle>
|
||||
<CardDescription>共 {total} 条记录</CardDescription>
|
||||
</div>
|
||||
{selectedIds.length > 0 && (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleBatchAction('approve')}
|
||||
disabled={batchLoading}
|
||||
>
|
||||
{batchLoading ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Check className="h-4 w-4 mr-2" />}
|
||||
批量确认 ({selectedIds.length})
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleBatchAction('reject')}
|
||||
disabled={batchLoading}
|
||||
>
|
||||
<X className="h-4 w-4 mr-2" />
|
||||
批量驳回
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</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>
|
||||
</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>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<PaginationNavigator
|
||||
currentPage={page}
|
||||
totalPages={Math.ceil(total / pageSize)}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 详情对话框 */}
|
||||
<Dialog open={detailOpen} onOpenChange={setDetailOpen}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>举报详情</DialogTitle>
|
||||
</DialogHeader>
|
||||
{detailLoading ? (
|
||||
<div className="flex justify-center py-8">
|
||||
<Loader2 className="h-6 w-6 animate-spin" />
|
||||
</div>
|
||||
) : selectedReport ? (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<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>
|
||||
</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>
|
||||
{selectedReport.description && (
|
||||
<div className="col-span-2">
|
||||
<Label className="text-muted-foreground">详细描述</Label>
|
||||
<p>{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>
|
||||
)}
|
||||
|
||||
{selectedReport.result && (
|
||||
<div>
|
||||
<Label className="text-muted-foreground">处理结果</Label>
|
||||
<p>{selectedReport.result}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 处理对话框 */}
|
||||
<Dialog open={handleOpen} onOpenChange={setHandleOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>处理举报</DialogTitle>
|
||||
<DialogDescription>请选择处理方式</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="flex gap-4">
|
||||
<Button
|
||||
variant={handleAction === 'approve' ? 'default' : 'outline'}
|
||||
className="flex-1"
|
||||
onClick={() => setHandleAction('approve')}
|
||||
>
|
||||
<Check className="h-4 w-4 mr-2" />
|
||||
确认违规
|
||||
</Button>
|
||||
<Button
|
||||
variant={handleAction === 'reject' ? 'default' : 'outline'}
|
||||
className="flex-1"
|
||||
onClick={() => setHandleAction('reject')}
|
||||
>
|
||||
<X className="h-4 w-4 mr-2" />
|
||||
驳回举报
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Label>处理说明（选填）</Label>
|
||||
<Textarea
|
||||
value={handleResult}
|
||||
onChange={(e) => setHandleResult(e.target.value)}
|
||||
placeholder="请输入处理说明..."
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setHandleOpen(false)}>取消</Button>
|
||||
<Button onClick={submitHandle} disabled={handleLoading}>
|
||||
{handleLoading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
|
||||
确认提交
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -104,6 +104,7 @@ const Posts = lazy(() => import('@/pages/Posts'))
|
||||
const Comments = lazy(() => import('@/pages/Comments'))
|
||||
const Groups = lazy(() => import('@/pages/Groups'))
|
||||
const Channels = lazy(() => import('@/pages/Channels'))
|
||||
const Reports = lazy(() => import('@/pages/Reports'))
|
||||
const MaterialSubjects = lazy(() => import('@/pages/MaterialSubjects'))
|
||||
const Materials = lazy(() => import('@/pages/Materials'))
|
||||
const Forbidden = lazy(() => import('@/pages/Forbidden'))
|
||||
@@ -194,6 +195,16 @@ export const router = createBrowserRouter([
|
||||
</ModeratorGuard>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: 'reports',
|
||||
element: (
|
||||
<ModeratorGuard>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Reports />
|
||||
</Suspense>
|
||||
</ModeratorGuard>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: 'channels',
|
||||
element: (
|
||||
|
||||
Reference in New Issue
Block a user