66748d4f19
审核台列表页优化： - 每个任务项显示文件名、文件大小 - 添加下载按钮支持文件下载 - 点击"审核"按钮才跳转到详情页 - 按风险等级显示不同颜色的状态标签和按钮 新增申诉处理功能： - 申诉列表页：展示所有达人申诉，支持搜索和状态筛选 - 申诉详情页：查看申诉内容、附件、原审核问题 - 处理决策面板：通过/驳回申诉并填写处理意见 - 侧边栏添加"申诉处理"菜单入口 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
399 lines
13 KiB
TypeScript
399 lines
13 KiB
TypeScript
'use client'
|
||
|
||
import { useState } from 'react'
|
||
import Link from 'next/link'
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
|
||
import { Button } from '@/components/ui/Button'
|
||
import { SuccessTag, PendingTag, WarningTag, ErrorTag } from '@/components/ui/Tag'
|
||
import {
|
||
FileText,
|
||
Video,
|
||
Search,
|
||
Filter,
|
||
Clock,
|
||
User,
|
||
AlertTriangle,
|
||
ChevronRight,
|
||
Download,
|
||
Eye,
|
||
File
|
||
} from 'lucide-react'
|
||
|
||
// 模拟脚本待审列表
|
||
const mockScriptTasks = [
|
||
{
|
||
id: 'script-001',
|
||
title: '夏日护肤推广脚本',
|
||
fileName: '夏日护肤推广_脚本v2.docx',
|
||
fileSize: '245 KB',
|
||
creatorName: '小美护肤',
|
||
projectName: 'XX品牌618推广',
|
||
aiScore: 88,
|
||
riskLevel: 'low' as const,
|
||
submittedAt: '2026-02-06 14:30',
|
||
hasHighRisk: false,
|
||
},
|
||
{
|
||
id: 'script-002',
|
||
title: '新品口红试色脚本',
|
||
fileName: '口红试色_脚本v1.docx',
|
||
fileSize: '312 KB',
|
||
creatorName: '美妆Lisa',
|
||
projectName: 'XX品牌618推广',
|
||
aiScore: 72,
|
||
riskLevel: 'medium' as const,
|
||
submittedAt: '2026-02-06 12:15',
|
||
hasHighRisk: true,
|
||
},
|
||
{
|
||
id: 'script-003',
|
||
title: '健身器材推荐脚本',
|
||
fileName: '健身器材_推荐脚本.pdf',
|
||
fileSize: '189 KB',
|
||
creatorName: '健身教练王',
|
||
projectName: 'XX运动品牌',
|
||
aiScore: 95,
|
||
riskLevel: 'low' as const,
|
||
submittedAt: '2026-02-06 10:00',
|
||
hasHighRisk: false,
|
||
},
|
||
{
|
||
id: 'script-004',
|
||
title: '618大促预热脚本',
|
||
fileName: '618预热_脚本final.docx',
|
||
fileSize: '278 KB',
|
||
creatorName: '达人D',
|
||
projectName: 'XX品牌618推广',
|
||
aiScore: 62,
|
||
riskLevel: 'high' as const,
|
||
submittedAt: '2026-02-06 09:00',
|
||
hasHighRisk: true,
|
||
},
|
||
]
|
||
|
||
// 模拟视频待审列表
|
||
const mockVideoTasks = [
|
||
{
|
||
id: 'video-001',
|
||
title: '夏日护肤推广',
|
||
fileName: '夏日护肤_成片v2.mp4',
|
||
fileSize: '128 MB',
|
||
creatorName: '小美护肤',
|
||
projectName: 'XX品牌618推广',
|
||
aiScore: 85,
|
||
riskLevel: 'low' as const,
|
||
duration: '02:15',
|
||
submittedAt: '2026-02-06 15:00',
|
||
hasHighRisk: false,
|
||
},
|
||
{
|
||
id: 'video-002',
|
||
title: '新品口红试色',
|
||
fileName: '口红试色_终版.mp4',
|
||
fileSize: '256 MB',
|
||
creatorName: '美妆Lisa',
|
||
projectName: 'XX品牌618推广',
|
||
aiScore: 68,
|
||
riskLevel: 'medium' as const,
|
||
duration: '03:42',
|
||
submittedAt: '2026-02-06 13:45',
|
||
hasHighRisk: true,
|
||
},
|
||
{
|
||
id: 'video-003',
|
||
title: '美妆新品体验',
|
||
fileName: '美妆体验_v3.mp4',
|
||
fileSize: '198 MB',
|
||
creatorName: '达人C',
|
||
projectName: 'XX品牌618推广',
|
||
aiScore: 58,
|
||
riskLevel: 'high' as const,
|
||
duration: '04:20',
|
||
submittedAt: '2026-02-06 11:30',
|
||
hasHighRisk: true,
|
||
},
|
||
{
|
||
id: 'video-004',
|
||
title: '618大促预热',
|
||
fileName: '618预热_final.mp4',
|
||
fileSize: '167 MB',
|
||
creatorName: '达人D',
|
||
projectName: 'XX品牌618推广',
|
||
aiScore: 91,
|
||
riskLevel: 'low' as const,
|
||
duration: '01:45',
|
||
submittedAt: '2026-02-06 10:15',
|
||
hasHighRisk: false,
|
||
},
|
||
]
|
||
|
||
// 风险等级配置
|
||
const riskLevelConfig = {
|
||
low: { label: 'AI通过', color: 'bg-accent-green', textColor: 'text-accent-green' },
|
||
medium: { label: '风险:中', color: 'bg-accent-amber', textColor: 'text-accent-amber' },
|
||
high: { label: '风险:高', color: 'bg-accent-coral', textColor: 'text-accent-coral' },
|
||
}
|
||
|
||
function ScoreTag({ score }: { score: number }) {
|
||
if (score >= 85) return <SuccessTag>{score}分</SuccessTag>
|
||
if (score >= 70) return <WarningTag>{score}分</WarningTag>
|
||
return <ErrorTag>{score}分</ErrorTag>
|
||
}
|
||
|
||
type ScriptTask = typeof mockScriptTasks[0]
|
||
type VideoTask = typeof mockVideoTasks[0]
|
||
|
||
function ScriptTaskCard({ task }: { task: ScriptTask }) {
|
||
const riskConfig = riskLevelConfig[task.riskLevel]
|
||
|
||
const handleDownload = (e: React.MouseEvent) => {
|
||
e.stopPropagation()
|
||
// 模拟下载
|
||
console.log('下载脚本:', task.fileName)
|
||
}
|
||
|
||
return (
|
||
<div className="p-4 rounded-xl bg-bg-elevated">
|
||
{/* 顶部：达人名 · 任务名 + 状态标签 */}
|
||
<div className="flex items-center justify-between mb-3">
|
||
<div className="flex items-center gap-2">
|
||
<div className={`w-2 h-2 rounded-full ${riskConfig.color}`} />
|
||
<span className="font-medium text-text-primary">{task.creatorName} · {task.title}</span>
|
||
</div>
|
||
<span className={`text-xs ${riskConfig.textColor}`}>{riskConfig.label}</span>
|
||
</div>
|
||
|
||
{/* 文件信息 */}
|
||
<div className="flex items-center gap-3 p-3 rounded-lg bg-bg-page mb-3">
|
||
<div className="w-10 h-10 rounded-lg bg-accent-indigo/15 flex items-center justify-center">
|
||
<File size={20} className="text-accent-indigo" />
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<p className="text-sm font-medium text-text-primary truncate">{task.fileName}</p>
|
||
<p className="text-xs text-text-tertiary">{task.fileSize}</p>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={handleDownload}
|
||
className="p-2 rounded-lg hover:bg-bg-elevated transition-colors"
|
||
title="下载文件"
|
||
>
|
||
<Download size={18} className="text-text-secondary" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* 底部：时间 + 审核按钮 */}
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-xs text-text-tertiary flex items-center gap-1">
|
||
<Clock size={12} />
|
||
{task.submittedAt}
|
||
</span>
|
||
<Link href={`/agency/review/script/${task.id}`}>
|
||
<Button size="sm" className={`${
|
||
task.riskLevel === 'high' ? 'bg-accent-coral hover:bg-accent-coral/80' :
|
||
task.riskLevel === 'medium' ? 'bg-accent-amber hover:bg-accent-amber/80' :
|
||
'bg-accent-green hover:bg-accent-green/80'
|
||
} text-white`}>
|
||
审核
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function VideoTaskCard({ task }: { task: VideoTask }) {
|
||
const riskConfig = riskLevelConfig[task.riskLevel]
|
||
|
||
const handleDownload = (e: React.MouseEvent) => {
|
||
e.stopPropagation()
|
||
// 模拟下载
|
||
console.log('下载视频:', task.fileName)
|
||
}
|
||
|
||
return (
|
||
<div className="p-4 rounded-xl bg-bg-elevated">
|
||
{/* 顶部：达人名 · 任务名 + 状态标签 */}
|
||
<div className="flex items-center justify-between mb-3">
|
||
<div className="flex items-center gap-2">
|
||
<div className={`w-2 h-2 rounded-full ${riskConfig.color}`} />
|
||
<span className="font-medium text-text-primary">{task.creatorName} · {task.title}</span>
|
||
</div>
|
||
<span className={`text-xs ${riskConfig.textColor}`}>{riskConfig.label}</span>
|
||
</div>
|
||
|
||
{/* 文件信息 */}
|
||
<div className="flex items-center gap-3 p-3 rounded-lg bg-bg-page mb-3">
|
||
<div className="w-10 h-10 rounded-lg bg-purple-500/15 flex items-center justify-center">
|
||
<Video size={20} className="text-purple-400" />
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<p className="text-sm font-medium text-text-primary truncate">{task.fileName}</p>
|
||
<p className="text-xs text-text-tertiary">{task.fileSize} · {task.duration}</p>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={handleDownload}
|
||
className="p-2 rounded-lg hover:bg-bg-elevated transition-colors"
|
||
title="下载文件"
|
||
>
|
||
<Download size={18} className="text-text-secondary" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* 底部：时间 + 审核按钮 */}
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-xs text-text-tertiary flex items-center gap-1">
|
||
<Clock size={12} />
|
||
{task.submittedAt}
|
||
</span>
|
||
<Link href={`/agency/review/video/${task.id}`}>
|
||
<Button size="sm" className={`${
|
||
task.riskLevel === 'high' ? 'bg-accent-coral hover:bg-accent-coral/80' :
|
||
task.riskLevel === 'medium' ? 'bg-accent-amber hover:bg-accent-amber/80' :
|
||
'bg-accent-green hover:bg-accent-green/80'
|
||
} text-white`}>
|
||
审核
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default function AgencyReviewListPage() {
|
||
const [searchQuery, setSearchQuery] = useState('')
|
||
const [activeTab, setActiveTab] = useState<'all' | 'script' | 'video'>('all')
|
||
|
||
const filteredScripts = mockScriptTasks.filter(task =>
|
||
task.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||
task.creatorName.toLowerCase().includes(searchQuery.toLowerCase())
|
||
)
|
||
|
||
const filteredVideos = mockVideoTasks.filter(task =>
|
||
task.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||
task.creatorName.toLowerCase().includes(searchQuery.toLowerCase())
|
||
)
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* 页面标题 */}
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-text-primary">审核台</h1>
|
||
<p className="text-sm text-text-secondary mt-1">审核达人提交的脚本和视频</p>
|
||
</div>
|
||
<div className="flex items-center gap-2 text-sm">
|
||
<span className="text-text-secondary">待审核：</span>
|
||
<span className="px-2 py-1 bg-accent-indigo/20 text-accent-indigo rounded font-medium">
|
||
{mockScriptTasks.length} 脚本
|
||
</span>
|
||
<span className="px-2 py-1 bg-purple-500/20 text-purple-400 rounded font-medium">
|
||
{mockVideoTasks.length} 视频
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 搜索和筛选 */}
|
||
<div className="flex items-center gap-4">
|
||
<div className="relative flex-1 max-w-md">
|
||
<Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary" />
|
||
<input
|
||
type="text"
|
||
placeholder="搜索任务名称或达人..."
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
className="w-full pl-10 pr-4 py-2 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
|
||
/>
|
||
</div>
|
||
<div className="flex items-center gap-1 p-1 bg-bg-elevated rounded-lg">
|
||
<button
|
||
type="button"
|
||
onClick={() => setActiveTab('all')}
|
||
className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
|
||
activeTab === 'all' ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary'
|
||
}`}
|
||
>
|
||
全部
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setActiveTab('script')}
|
||
className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
|
||
activeTab === 'script' ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary'
|
||
}`}
|
||
>
|
||
脚本
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setActiveTab('video')}
|
||
className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
|
||
activeTab === 'video' ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary'
|
||
}`}
|
||
>
|
||
视频
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 任务列表 */}
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
{/* 脚本待审列表 */}
|
||
{(activeTab === 'all' || activeTab === 'script') && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<FileText size={18} className="text-accent-indigo" />
|
||
脚本审核
|
||
<span className="ml-auto text-sm font-normal text-accent-indigo">
|
||
{filteredScripts.length} 条待审核
|
||
</span>
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-3">
|
||
{filteredScripts.length > 0 ? (
|
||
filteredScripts.map((task) => (
|
||
<ScriptTaskCard key={task.id} task={task} />
|
||
))
|
||
) : (
|
||
<div className="text-center py-8 text-text-tertiary">
|
||
<FileText size={32} className="mx-auto mb-2 opacity-50" />
|
||
<p>暂无待审脚本</p>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 视频待审列表 */}
|
||
{(activeTab === 'all' || activeTab === 'video') && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<Video size={18} className="text-purple-400" />
|
||
视频审核
|
||
<span className="ml-auto text-sm font-normal text-accent-indigo">
|
||
{filteredVideos.length} 条待审核
|
||
</span>
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-3">
|
||
{filteredVideos.length > 0 ? (
|
||
filteredVideos.map((task) => (
|
||
<VideoTaskCard key={task.id} task={task} />
|
||
))
|
||
) : (
|
||
<div className="text-center py-8 text-text-tertiary">
|
||
<Video size={32} className="mx-auto mb-2 opacity-50" />
|
||
<p>暂无待审视频</p>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|