From 3e06cfde7610bd2b2f0cb1ddc9a8586cd3c0cd02 Mon Sep 17 00:00:00 2001
From: lafay <2021211506@stu.hit.edu.cn>
Date: Mon, 30 Mar 2026 18:01:38 +0800
Subject: [PATCH] Enhance Reports page with safe date formatting, improved
 status colors and icons, and add statistics display for report statuses.

---
 src/pages/Reports.tsx | 686 +++++++++++++++++++++++++++++-------------
 1 file changed, 472 insertions(+), 214 deletions(-)

diff --git a/src/pages/Reports.tsx b/src/pages/Reports.tsx
index 539f6e4..bfbad67 100644
--- a/src/pages/Reports.tsx
+++ b/src/pages/Reports.tsx
@@ -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>