liyanyu/video-compliance-ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 前端全面对接后端 API（Phase 1 完成）

Browse Source 
- 新增基础设施：useOSSUpload Hook、SSEContext Provider、taskStageMapper 工具
- 达人端4页面：任务列表/详情/脚本上传/视频上传对接真实 API
- 代理商端3页面：工作台/审核队列/审核详情对接真实 API
- 品牌方端4页面：项目列表/创建项目/项目详情/Brief配置对接真实 API
- 保留 USE_MOCK 开关，mock 模式下使用类型安全的 mock 数据
- 所有页面添加 loading 骨架屏、SSE 实时更新、错误处理

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Your Name
2026-02-09 15:58:47 +08:00
co-authored by Claude Opus 4.6
parent 4a3c7e7923
commit 54eaa54966
16 changed files with 3002 additions and 2970 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/agency/page.tsx
+218 -197
View File
@@ -1,137 +1,86 @@
'use client'
import { useState } from 'react'
import { useState, useEffect, useCallback } 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 {
AlertTriangle,
Clock,
CheckCircle,
XCircle,
ChevronRight,
FileVideo,
MessageSquare,
TrendingUp
TrendingUp,
Loader2
} from 'lucide-react'
import { getPlatformInfo } from '@/lib/platforms'
import { api } from '@/lib/api'
import { USE_MOCK } from '@/contexts/AuthContext'
import { useSSE } from '@/contexts/SSEContext'
import type { AgencyDashboard as AgencyDashboardType } from '@/types/dashboard'
import type { TaskResponse } from '@/types/task'
import type { ProjectResponse } from '@/types/project'
// 模拟统计数据
const stats = {
pendingReview: {
script: 8,
video: 4,
},
pendingAppeal: 3,
todayPassed: {
script: 18,
video: 10,
},
inProgress: {
script: 25,
video: 20,
},
// ==================== Mock 数据 ====================
const mockStats: AgencyDashboardType = {
pending_review: { script: 8, video: 4 },
pending_appeal: 3,
today_passed: { script: 18, video: 10 },
in_progress: { script: 25, video: 20 },
total_creators: 15,
total_tasks: 80,
}
// 模拟紧急待办
const urgentTodos = [
const mockPendingTasks: TaskResponse[] = [
{
id: 'urgent-001',
type: 'violation',
title: '达人A视频 - 竞品露出',
description: 'XX品牌618推广',
time: '2小时前',
level: 'high',
id: 'task-001', name: '夏日护肤推广', sequence: 1,
stage: 'script_agency_review',
project: { id: 'proj-001', name: 'XX品牌618推广', brand_name: 'XX品牌' },
agency: { id: 'ag-001', name: '优创代理' },
creator: { id: 'cr-001', name: '小美护肤' },
script_ai_score: 85, appeal_count: 0, is_appeal: false,
created_at: '2026-02-04T14:30:00Z', updated_at: '2026-02-04T14:30:00Z',
},
{
id: 'urgent-002',
type: 'appeal',
title: '达人B申诉 - 待仲裁',
description: '对违禁词检测结果有异议',
time: '30分钟前',
level: 'medium',
id: 'task-002', name: '新品口红试色', sequence: 2,
stage: 'video_agency_review',
project: { id: 'proj-001', name: 'XX品牌618推广', brand_name: 'XX品牌' },
agency: { id: 'ag-001', name: '优创代理' },
creator: { id: 'cr-002', name: '美妆达人Lisa' },
video_ai_score: 72, appeal_count: 0, is_appeal: true,
created_at: '2026-02-04T13:45:00Z', updated_at: '2026-02-04T13:45:00Z',
},
{
id: 'urgent-003',
type: 'ai_done',
title: '达人C视频 - AI审核完成',
description: '新品口红试色',
time: '10分钟前',
level: 'low',
id: 'task-003', name: '健身器材开箱', sequence: 3,
stage: 'script_agency_review',
project: { id: 'proj-002', name: 'XX运动品牌', brand_name: 'XX运动' },
agency: { id: 'ag-001', name: '优创代理' },
creator: { id: 'cr-003', name: '健身教练王' },
script_ai_score: 68, appeal_count: 0, is_appeal: false,
created_at: '2026-02-04T14:50:00Z', updated_at: '2026-02-04T14:50:00Z',
},
]
// 模拟项目概览
const projectOverview = [
const mockProjects: ProjectResponse[] = [
{
id: 'proj-001',
name: 'XX品牌618推广',
platform: 'douyin',
total: 20,
submitted: 15,
passed: 10,
reviewingScript: 2,
reviewingVideo: 1,
needRevision: 2,
id: 'proj-001', name: 'XX品牌618推广', brand_id: 'br-001', brand_name: 'XX品牌',
status: 'active', deadline: '2026-06-18', agencies: [], task_count: 20,
created_at: '2026-01-01T00:00:00Z', updated_at: '2026-02-01T00:00:00Z',
},
{
id: 'proj-002',
name: '新品口红系列',
platform: 'xiaohongshu',
total: 12,
submitted: 8,
passed: 6,
reviewingScript: 1,
reviewingVideo: 0,
needRevision: 1,
id: 'proj-002', name: '新品口红系列', brand_id: 'br-001', brand_name: 'XX品牌',
status: 'active', deadline: '2026-03-15', agencies: [], task_count: 12,
created_at: '2026-01-15T00:00:00Z', updated_at: '2026-02-01T00:00:00Z',
},
{
id: 'proj-003',
name: '护肤品秋季活动',
platform: 'bilibili',
total: 15,
submitted: 12,
passed: 9,
reviewingScript: 1,
reviewingVideo: 1,
needRevision: 1,
id: 'proj-003', name: '护肤品秋季活动', brand_id: 'br-002', brand_name: 'YY品牌',
status: 'active', deadline: '2026-09-01', agencies: [], task_count: 15,
created_at: '2026-02-01T00:00:00Z', updated_at: '2026-02-05T00:00:00Z',
},
]
// 模拟待审核任务列表
const pendingTasks = [
{
id: 'task-001',
videoTitle: '夏日护肤推广',
creatorName: '小美护肤',
brandName: 'XX品牌',
platform: 'douyin',
aiScore: 85,
submittedAt: '2026-02-04 14:30',
hasHighRisk: false,
},
{
id: 'task-002',
videoTitle: '新品口红试色',
creatorName: '美妆达人Lisa',
brandName: 'XX品牌',
platform: 'xiaohongshu',
aiScore: 72,
submittedAt: '2026-02-04 13:45',
hasHighRisk: true,
},
{
id: 'task-003',
videoTitle: '健身器材开箱',
creatorName: '健身教练王',
brandName: 'XX运动',
platform: 'bilibili',
aiScore: 68,
submittedAt: '2026-02-04 14:50',
hasHighRisk: true,
},
]
// ==================== 组件 ====================
function UrgentLevelIcon({ level }: { level: string }) {
if (level === 'high') return <AlertTriangle size={16} className="text-red-500" />
@@ -139,7 +88,108 @@ function UrgentLevelIcon({ level }: { level: string }) {
return <CheckCircle size={16} className="text-yellow-500" />
}
function getTaskUrgencyLevel(task: TaskResponse): string {
const aiScore = task.stage.startsWith('script') ? task.script_ai_score : task.video_ai_score
if (aiScore != null && aiScore < 60) return 'high'
if (task.is_appeal) return 'medium'
return 'low'
}
function getTaskUrgencyTitle(task: TaskResponse): string {
const type = task.stage.includes('video') ? '视频' : '脚本'
return `${task.creator.name}${type} - ${task.name}`
}
function getTaskTimeAgo(dateStr: string): string {
const diff = Date.now() - new Date(dateStr).getTime()
const hours = Math.floor(diff / 3600000)
if (hours < 1) return `${Math.floor(diff / 60000)}分钟前`
if (hours < 24) return `${hours}小时前`
return `${Math.floor(hours / 24)}天前`
}
function DashboardSkeleton() {
return (
<div className="space-y-6 animate-pulse">
<div className="flex items-center justify-between">
<div className="h-8 w-40 bg-bg-elevated rounded" />
<div className="h-5 w-48 bg-bg-elevated rounded" />
</div>
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
{[1, 2, 3, 4].map(i => (
<div key={i} className="h-28 bg-bg-elevated rounded-xl" />
))}
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="h-64 bg-bg-elevated rounded-xl" />
<div className="lg:col-span-2 h-64 bg-bg-elevated rounded-xl" />
</div>
<div className="h-48 bg-bg-elevated rounded-xl" />
</div>
)
}
export default function AgencyDashboard() {
const [stats, setStats] = useState<AgencyDashboardType | null>(null)
const [pendingTasks, setPendingTasks] = useState<TaskResponse[]>([])
const [projects, setProjects] = useState<ProjectResponse[]>([])
const [loading, setLoading] = useState(true)
const { subscribe } = useSSE()
const loadData = useCallback(async () => {
if (USE_MOCK) {
setStats(mockStats)
setPendingTasks(mockPendingTasks)
setProjects(mockProjects)
setLoading(false)
return
}
try {
const [dashboardData, tasksData, projectsData] = await Promise.all([
api.getAgencyDashboard(),
api.listPendingReviews(1, 5),
api.listProjects(1, 3),
])
setStats(dashboardData)
// listPendingReviews returns TaskSummary, but we need TaskResponse for the table
// Fall back to listTasks for the pending table
const fullTasks = await api.listTasks(1, 5, 'script_agency_review')
setPendingTasks(fullTasks.items)
setProjects(projectsData.items)
} catch (err) {
console.error('Failed to load agency dashboard:', err)
// fallback to empty
setStats({ pending_review: { script: 0, video: 0 }, pending_appeal: 0, today_passed: { script: 0, video: 0 }, in_progress: { script: 0, video: 0 }, total_creators: 0, total_tasks: 0 })
setPendingTasks([])
setProjects([])
} finally {
setLoading(false)
}
}, [])
useEffect(() => {
loadData()
}, [loadData])
useEffect(() => {
const unsub1 = subscribe('task_updated', () => loadData())
const unsub2 = subscribe('new_task', () => loadData())
const unsub3 = subscribe('review_completed', () => loadData())
return () => { unsub1(); unsub2(); unsub3() }
}, [subscribe, loadData])
if (loading || !stats) return <DashboardSkeleton />
// Build urgent todos from pending tasks (top 3)
const urgentTodos = pendingTasks.slice(0, 3).map(task => ({
id: task.id,
title: getTaskUrgencyTitle(task),
description: task.project.name,
time: getTaskTimeAgo(task.updated_at),
level: getTaskUrgencyLevel(task),
}))
return (
<div className="space-y-6 min-h-0">
{/* 页面标题 */}
@@ -155,10 +205,10 @@ export default function AgencyDashboard() {
<div className="flex items-center justify-between">
<div>
<div className="text-sm text-text-secondary">待审核</div>
<div className="text-3xl font-bold text-accent-coral">{stats.pendingReview.script + stats.pendingReview.video}</div>
<div className="text-3xl font-bold text-accent-coral">{stats.pending_review.script + stats.pending_review.video}</div>
<div className="flex gap-3 mt-1 text-xs text-text-tertiary">
<span>脚本 {stats.pendingReview.script}</span>
<span>视频 {stats.pendingReview.video}</span>
<span>脚本 {stats.pending_review.script}</span>
<span>视频 {stats.pending_review.video}</span>
</div>
</div>
<div className="w-12 h-12 rounded-full bg-accent-coral/20 flex items-center justify-center">
@@ -172,7 +222,7 @@ export default function AgencyDashboard() {
<div className="flex items-center justify-between">
<div>
<div className="text-sm text-text-secondary">待仲裁</div>
<div className="text-3xl font-bold text-orange-400">{stats.pendingAppeal}</div>
<div className="text-3xl font-bold text-orange-400">{stats.pending_appeal}</div>
</div>
<div className="w-12 h-12 rounded-full bg-orange-500/20 flex items-center justify-center">
<MessageSquare size={24} className="text-orange-400" />
@@ -185,10 +235,10 @@ export default function AgencyDashboard() {
<div className="flex items-center justify-between">
<div>
<div className="text-sm text-text-secondary">今日通过</div>
<div className="text-3xl font-bold text-accent-green">{stats.todayPassed.script + stats.todayPassed.video}</div>
<div className="text-3xl font-bold text-accent-green">{stats.today_passed.script + stats.today_passed.video}</div>
<div className="flex gap-3 mt-1 text-xs text-text-tertiary">
<span>脚本 {stats.todayPassed.script}</span>
<span>视频 {stats.todayPassed.video}</span>
<span>脚本 {stats.today_passed.script}</span>
<span>视频 {stats.today_passed.video}</span>
</div>
</div>
<div className="w-12 h-12 rounded-full bg-accent-green/20 flex items-center justify-center">
@@ -202,10 +252,10 @@ export default function AgencyDashboard() {
<div className="flex items-center justify-between">
<div>
<div className="text-sm text-text-secondary">进行中</div>
<div className="text-3xl font-bold text-accent-indigo">{stats.inProgress.script + stats.inProgress.video}</div>
<div className="text-3xl font-bold text-accent-indigo">{stats.in_progress.script + stats.in_progress.video}</div>
<div className="flex gap-3 mt-1 text-xs text-text-tertiary">
<span>脚本 {stats.inProgress.script}</span>
<span>视频 {stats.inProgress.video}</span>
<span>脚本 {stats.in_progress.script}</span>
<span>视频 {stats.in_progress.video}</span>
</div>
</div>
<div className="w-12 h-12 rounded-full bg-accent-indigo/20 flex items-center justify-center">
@@ -226,10 +276,10 @@ export default function AgencyDashboard() {
</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
{urgentTodos.map((todo) => (
{urgentTodos.length > 0 ? urgentTodos.map((todo) => (
<Link
key={todo.id}
href={todo.type === 'violation' || todo.type === 'ai_done' ? `/agency/review/${todo.id}` : `/agency/appeals/${todo.id}`}
href={`/agency/review/${todo.id}`}
className="block p-3 rounded-lg border border-border-subtle hover:border-accent-indigo hover:bg-accent-indigo/5 transition-colors"
>
<div className="flex items-start gap-3">
@@ -242,7 +292,9 @@ export default function AgencyDashboard() {
<ChevronRight size={16} className="text-text-tertiary flex-shrink-0" />
</div>
</Link>
))}
)) : (
<div className="text-center py-6 text-text-tertiary text-sm">暂无紧急待办</div>
)}
</CardContent>
</Card>
@@ -256,68 +308,27 @@ export default function AgencyDashboard() {
</CardHeader>
<CardContent>
<div className="space-y-4">
{projectOverview.map((project) => {
const totalReviewing = project.reviewingScript + project.reviewingVideo
const projectPlatform = getPlatformInfo(project.platform)
return (
<div key={project.id} className="p-4 rounded-lg bg-bg-elevated">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<span className="font-medium text-text-primary">{project.name}</span>
{projectPlatform && (
<span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium ${projectPlatform.bgColor} ${projectPlatform.textColor}`}>
<span>{projectPlatform.icon}</span>
{projectPlatform.name}
</span>
)}
</div>
<span className="text-sm text-text-secondary">
{project.submitted}/{project.total} 已提交
</span>
</div>
<div className="flex h-3 rounded-full overflow-hidden bg-bg-page">
<div
className="bg-accent-green transition-all"
style={{ width: `${(project.passed / project.total) * 100}%` }}
title={`已通过: ${project.passed}`}
/>
<div
className="bg-accent-indigo transition-all"
style={{ width: `${(project.reviewingScript / project.total) * 100}%` }}
title={`脚本审核中: ${project.reviewingScript}`}
/>
<div
className="bg-purple-500 transition-all"
style={{ width: `${(project.reviewingVideo / project.total) * 100}%` }}
title={`视频审核中: ${project.reviewingVideo}`}
/>
<div
className="bg-orange-500 transition-all"
style={{ width: `${(project.needRevision / project.total) * 100}%` }}
title={`需修改: ${project.needRevision}`}
/>
</div>
<div className="flex flex-wrap gap-x-4 gap-y-1 mt-2 text-xs text-text-secondary">
<span className="flex items-center gap-1">
<span className="w-2 h-2 bg-accent-green rounded-full" />
通过 {project.passed}
</span>
<span className="flex items-center gap-1">
<span className="w-2 h-2 bg-accent-indigo rounded-full" />
脚本审核 {project.reviewingScript}
</span>
<span className="flex items-center gap-1">
<span className="w-2 h-2 bg-purple-500 rounded-full" />
视频审核 {project.reviewingVideo}
</span>
<span className="flex items-center gap-1">
<span className="w-2 h-2 bg-orange-500 rounded-full" />
需修改 {project.needRevision}
</span>
{projects.length > 0 ? projects.map((project) => (
<div key={project.id} className="p-4 rounded-lg bg-bg-elevated">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<span className="font-medium text-text-primary">{project.name}</span>
{project.brand_name && (
<span className="text-xs text-text-tertiary">({project.brand_name})</span>
)}
</div>
<span className="text-sm text-text-secondary">
{project.task_count} 个任务
</span>
</div>
)
})}
<div className="flex items-center justify-between text-xs text-text-tertiary">
<span>状态: {project.status === 'active' ? '进行中' : project.status === 'completed' ? '已完成' : '已归档'}</span>
{project.deadline && <span>截止: {new Date(project.deadline).toLocaleDateString('zh-CN')}</span>}
</div>
</div>
)) : (
<div className="text-center py-6 text-text-tertiary text-sm">暂无项目</div>
)}
</div>
</CardContent>
</Card>
@@ -341,8 +352,8 @@ export default function AgencyDashboard() {
<table className="w-full">
<thead>
<tr className="border-b border-border-subtle text-left text-sm text-text-secondary">
<th className="pb-3 font-medium">视频</th>
<th className="pb-3 font-medium">平台</th>
<th className="pb-3 font-medium">任务</th>
<th className="pb-3 font-medium">类型</th>
<th className="pb-3 font-medium">达人</th>
<th className="pb-3 font-medium">品牌</th>
<th className="pb-3 font-medium">AI评分</th>
@@ -351,38 +362,44 @@ export default function AgencyDashboard() {
</tr>
</thead>
<tbody>
{pendingTasks.map((task) => {
const platform = getPlatformInfo(task.platform)
{pendingTasks.length > 0 ? pendingTasks.map((task) => {
const isVideo = task.stage.includes('video')
const aiScore = isVideo ? task.video_ai_score : task.script_ai_score
return (
<tr key={task.id} className="border-b border-border-subtle last:border-0 hover:bg-bg-elevated">
<td className="py-4">
<div className="flex items-center gap-2">
<div className="font-medium text-text-primary">{task.videoTitle}</div>
{task.hasHighRisk && (
<span className="px-1.5 py-0.5 text-xs bg-accent-coral/20 text-accent-coral rounded">
高风险
<div className="font-medium text-text-primary">{task.name}</div>
{task.is_appeal && (
<span className="px-1.5 py-0.5 text-xs bg-accent-amber/20 text-accent-amber rounded">
申诉
</span>
)}
</div>
</td>
<td className="py-4">
{platform && (
<span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium ${platform.bgColor} ${platform.textColor} border ${platform.borderColor}`}>
<span>{platform.icon}</span>
{platform.name}
</span>
)}
</td>
<td className="py-4 text-text-secondary">{task.creatorName}</td>
<td className="py-4 text-text-secondary">{task.brandName}</td>
<td className="py-4">
<span className={`font-medium ${
task.aiScore >= 80 ? 'text-accent-green' : task.aiScore >= 60 ? 'text-yellow-400' : 'text-accent-coral'
<span className={`px-2 py-1 rounded text-xs font-medium ${
isVideo ? 'bg-purple-500/20 text-purple-400' : 'bg-accent-indigo/20 text-accent-indigo'
}`}>
{task.aiScore}分
{isVideo ? '视频' : '脚本'}
</span>
</td>
<td className="py-4 text-sm text-text-tertiary">{task.submittedAt}</td>
<td className="py-4 text-text-secondary">{task.creator.name}</td>
<td className="py-4 text-text-secondary">{task.project.brand_name || task.project.name}</td>
<td className="py-4">
{aiScore != null ? (
<span className={`font-medium ${
aiScore >= 80 ? 'text-accent-green' : aiScore >= 60 ? 'text-yellow-400' : 'text-accent-coral'
}`}>
{aiScore}分
</span>
) : (
<span className="text-text-tertiary">-</span>
)}
</td>
<td className="py-4 text-sm text-text-tertiary">
{new Date(task.created_at).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })}
</td>
<td className="py-4">
<Link href={`/agency/review/${task.id}`}>
<Button size="sm">审核</Button>
@@ -390,7 +407,11 @@ export default function AgencyDashboard() {
</td>
</tr>
)
})}
}) : (
<tr>
<td colSpan={7} className="py-8 text-center text-text-tertiary">暂无待审核任务</td>
</tr>
)}
</tbody>
</table>
</div>
frontend/app/agency/review/[id]/page.tsx
+351 -143
View File
@@ -1,57 +1,103 @@
'use client'
import { useState } from 'react'
import { useState, useEffect, useCallback } from 'react'
import { useRouter, useParams } from 'next/navigation'
import { useToast } from '@/components/ui/Toast'
import { ArrowLeft, Play, Pause, AlertTriangle, Shield, Radio } from 'lucide-react'
import { ArrowLeft, Play, Pause, AlertTriangle, Shield, Radio, Loader2 } from 'lucide-react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import { SuccessTag, WarningTag, ErrorTag } from '@/components/ui/Tag'
import { Modal, ConfirmModal } from '@/components/ui/Modal'
import { ReviewSteps, getAgencyReviewSteps } from '@/components/ui/ReviewSteps'
import { api } from '@/lib/api'
import { USE_MOCK } from '@/contexts/AuthContext'
import { useSSE } from '@/contexts/SSEContext'
import type { TaskResponse, AIReviewResult } from '@/types/task'
// 模拟审核任务数据
const mockTask = {
// ==================== Mock 数据 ====================
const mockTask: TaskResponse = {
id: 'task-001',
videoTitle: '夏日护肤推广',
creatorName: '小美护肤',
brandName: 'XX护肤品牌',
platform: '抖音',
aiScore: 85,
aiSummary: '视频整体合规，发现2处硬性问题和1处舆情提示需人工确认',
reviewSteps: [
{ key: 'submitted', label: '已提交', status: 'done' as const, time: '2/3 10:30' },
{ key: 'ai_review', label: 'AI审核', status: 'done' as const, time: '2/3 10:35' },
{ key: 'agent_review', label: '代理商审核', status: 'current' as const },
{ key: 'final', label: '最终结果', status: 'pending' as const },
],
hardViolations: [
{
id: 'v1',
type: '违禁词',
content: '效果最好',
timestamp: 15.5,
source: 'speech',
riskLevel: 'high',
aiConfidence: 0.95,
suggestion: '建议替换为"效果显著"',
},
{
id: 'v2',
type: '竞品露出',
content: '疑似竞品Logo',
timestamp: 42.0,
source: 'visual',
riskLevel: 'high',
aiConfidence: 0.72,
suggestion: '需人工确认是否为竞品露出',
},
],
sentimentWarnings: [
{ id: 's1', type: '油腻预警', timestamp: 42.0, content: '达人表情过于夸张，建议检查', riskLevel: 'medium' },
],
name: '夏日护肤推广',
sequence: 1,
stage: 'script_agency_review',
project: { id: 'proj-001', name: 'XX品牌618推广', brand_name: 'XX护肤品牌' },
agency: { id: 'ag-001', name: '优创代理' },
creator: { id: 'cr-001', name: '小美护肤' },
script_ai_score: 85,
script_ai_result: {
score: 85,
violations: [
{
type: '违禁词',
content: '效果最好',
severity: 'high',
suggestion: '建议替换为"效果显著"',
timestamp: 15.5,
source: 'speech',
},
{
type: '竞品露出',
content: '疑似竞品Logo',
severity: 'high',
suggestion: '需人工确认是否为竞品露出',
timestamp: 42.0,
source: 'visual',
},
],
soft_warnings: [
{ type: '油腻预警', content: '达人表情过于夸张，建议检查', suggestion: '软性风险仅作提示' },
],
summary: '视频整体合规，发现2处硬性问题和1处舆情提示需人工确认',
},
video_ai_score: 85,
video_ai_result: {
score: 85,
violations: [
{
type: '违禁词',
content: '效果最好',
severity: 'high',
suggestion: '建议替换为"效果显著"',
timestamp: 15.5,
source: 'speech',
},
{
type: '竞品露出',
content: '疑似竞品Logo',
severity: 'high',
suggestion: '需人工确认是否为竞品露出',
timestamp: 42.0,
source: 'visual',
},
],
soft_warnings: [
{ type: '油腻预警', content: '达人表情过于夸张，建议检查', suggestion: '软性风险仅作提示' },
],
summary: '视频整体合规，发现2处硬性问题和1处舆情提示需人工确认',
},
appeal_count: 0,
is_appeal: false,
created_at: '2026-02-03T10:30:00Z',
updated_at: '2026-02-03T10:35:00Z',
}
// ==================== 工具函数 ====================
function getReviewStepStatus(task: TaskResponse): string {
if (task.stage.includes('agency_review')) return 'agent_reviewing'
if (task.stage.includes('brand_review')) return 'brand_reviewing'
if (task.stage === 'completed') return 'completed'
return 'agent_reviewing'
}
function formatTimestamp(seconds: number): string {
const mins = Math.floor(seconds / 60)
const secs = Math.floor(seconds % 60)
return `${mins}:${secs.toString().padStart(2, '0')}`
}
// ==================== 子组件 ====================
function ReviewProgressBar({ taskStatus }: { taskStatus: string }) {
const steps = getAgencyReviewSteps(taskStatus)
const currentStep = steps.find(s => s.status === 'current')
@@ -77,16 +123,43 @@ function RiskLevelTag({ level }: { level: string }) {
return <SuccessTag>低风险</SuccessTag>
}
function formatTimestamp(seconds: number): string {
const mins = Math.floor(seconds / 60)
const secs = Math.floor(seconds % 60)
return `${mins}:${secs.toString().padStart(2, '0')}`
function ReviewSkeleton() {
return (
<div className="space-y-4 animate-pulse">
<div className="flex items-center gap-4">
<div className="w-10 h-10 bg-bg-elevated rounded-full" />
<div className="space-y-2">
<div className="h-6 w-48 bg-bg-elevated rounded" />
<div className="h-4 w-64 bg-bg-elevated rounded" />
</div>
</div>
<div className="h-16 bg-bg-elevated rounded-xl" />
<div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
<div className="lg:col-span-3 space-y-4">
<div className="h-64 bg-bg-elevated rounded-xl" />
<div className="h-20 bg-bg-elevated rounded-xl" />
</div>
<div className="lg:col-span-2 space-y-4">
<div className="h-48 bg-bg-elevated rounded-xl" />
<div className="h-32 bg-bg-elevated rounded-xl" />
</div>
</div>
</div>
)
}
// ==================== 主页面 ====================
export default function ReviewPage() {
const router = useRouter()
const params = useParams()
const toast = useToast()
const taskId = params.id as string
const { subscribe } = useSSE()
const [task, setTask] = useState<TaskResponse | null>(null)
const [loading, setLoading] = useState(true)
const [submitting, setSubmitting] = useState(false)
const [isPlaying, setIsPlaying] = useState(false)
const [showApproveModal, setShowApproveModal] = useState(false)
const [showRejectModal, setShowRejectModal] = useState(false)
@@ -96,37 +169,127 @@ export default function ReviewPage() {
const [saveAsException, setSaveAsException] = useState(false)
const [checkedViolations, setCheckedViolations] = useState<Record<string, boolean>>({})
const task = mockTask
const loadTask = useCallback(async () => {
if (USE_MOCK) {
setTask(mockTask)
setLoading(false)
return
}
const handleApprove = () => {
setShowApproveModal(false)
router.push('/agency')
try {
const data = await api.getTask(taskId)
setTask(data)
} catch (err) {
console.error('Failed to load task:', err)
toast.error('加载任务失败')
} finally {
setLoading(false)
}
}, [taskId, toast])
useEffect(() => {
loadTask()
}, [loadTask])
useEffect(() => {
const unsub1 = subscribe('task_updated', (data: any) => {
if (data?.task_id === taskId) loadTask()
})
const unsub2 = subscribe('review_completed', (data: any) => {
if (data?.task_id === taskId) loadTask()
})
return () => { unsub1(); unsub2() }
}, [subscribe, taskId, loadTask])
if (loading || !task) return <ReviewSkeleton />
// Determine if this is script or video review
const isVideoReview = task.stage.includes('video')
const aiResult: AIReviewResult | null | undefined = isVideoReview ? task.video_ai_result : task.script_ai_result
const aiScore = isVideoReview ? task.video_ai_score : task.script_ai_score
const violations = aiResult?.violations || []
const softWarnings = aiResult?.soft_warnings || []
const aiSummary = aiResult?.summary || '暂无 AI 分析总结'
const handleApprove = async () => {
setSubmitting(true)
try {
if (!USE_MOCK) {
if (isVideoReview) {
await api.reviewVideo(taskId, { action: 'pass' })
} else {
await api.reviewScript(taskId, { action: 'pass' })
}
}
toast.success('审核已通过')
setShowApproveModal(false)
router.push('/agency/review')
} catch (err) {
console.error('Failed to approve:', err)
toast.error('操作失败，请重试')
} finally {
setSubmitting(false)
}
}
const handleReject = () => {
const handleReject = async () => {
if (!rejectReason.trim()) {
toast.error('请填写驳回原因')
return
}
setShowRejectModal(false)
router.push('/agency')
setSubmitting(true)
try {
if (!USE_MOCK) {
if (isVideoReview) {
await api.reviewVideo(taskId, { action: 'reject', comment: rejectReason })
} else {
await api.reviewScript(taskId, { action: 'reject', comment: rejectReason })
}
}
toast.success('已驳回')
setShowRejectModal(false)
router.push('/agency/review')
} catch (err) {
console.error('Failed to reject:', err)
toast.error('操作失败，请重试')
} finally {
setSubmitting(false)
}
}
const handleForcePass = () => {
const handleForcePass = async () => {
if (!forcePassReason.trim()) {
toast.error('请填写强制通过原因')
return
}
setShowForcePassModal(false)
router.push('/agency')
setSubmitting(true)
try {
if (!USE_MOCK) {
if (isVideoReview) {
await api.reviewVideo(taskId, { action: 'force_pass', comment: forcePassReason })
} else {
await api.reviewScript(taskId, { action: 'force_pass', comment: forcePassReason })
}
}
toast.success('已强制通过')
setShowForcePassModal(false)
router.push('/agency/review')
} catch (err) {
console.error('Failed to force pass:', err)
toast.error('操作失败，请重试')
} finally {
setSubmitting(false)
}
}
// 计算问题时间点用于进度条展示
// 时间线标记
const timelineMarkers = [
...task.hardViolations.map(v => ({ time: v.timestamp, type: 'hard' as const })),
...task.sentimentWarnings.map(w => ({ time: w.timestamp, type: 'soft' as const })),
...violations.filter(v => v.timestamp != null).map(v => ({ time: v.timestamp!, type: 'hard' as const })),
].sort((a, b) => a.time - b.time)
const maxTime = Math.max(120, ...timelineMarkers.map(m => m.time + 10))
return (
<div className="space-y-4">
{/* 顶部导航 */}
@@ -135,64 +298,92 @@ export default function ReviewPage() {
<ArrowLeft size={20} className="text-text-primary" />
</button>
<div className="flex-1">
<h1 className="text-xl font-bold text-text-primary">{task.videoTitle}</h1>
<p className="text-sm text-text-secondary">{task.creatorName} · {task.brandName} · {task.platform}</p>
<h1 className="text-xl font-bold text-text-primary">{task.name}</h1>
<p className="text-sm text-text-secondary">
{task.creator.name} · {task.project.brand_name || task.project.name} · {isVideoReview ? '视频审核' : '脚本审核'}
</p>
</div>
{task.is_appeal && (
<span className="px-3 py-1 bg-accent-amber/20 text-accent-amber rounded-full text-sm font-medium">
申诉重审
</span>
)}
</div>
{/* 申诉理由 */}
{task.is_appeal && task.appeal_reason && (
<Card className="border-accent-amber/30 bg-accent-amber/5">
<CardContent className="py-3">
<p className="text-sm text-accent-amber font-medium mb-1">申诉理由</p>
<p className="text-sm text-text-secondary">{task.appeal_reason}</p>
</CardContent>
</Card>
)}
{/* 审核流程进度条 */}
<ReviewProgressBar taskStatus="agent_reviewing" />
<ReviewProgressBar taskStatus={getReviewStepStatus(task)} />
<div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
{/* 左侧：视频播放器 (3/5) */}
{/* 左侧：视频/脚本播放器 (3/5) */}
<div className="lg:col-span-3 space-y-4">
<Card>
<CardContent className="p-0">
<div className="aspect-video bg-gray-900 rounded-t-lg flex items-center justify-center relative">
<button
type="button"
className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center hover:bg-white/30 transition-colors"
onClick={() => setIsPlaying(!isPlaying)}
>
{isPlaying ? <Pause size={32} className="text-white" /> : <Play size={32} className="text-white ml-1" />}
</button>
</div>
{/* 智能进度条 */}
<div className="p-4 border-t border-border-subtle">
<div className="text-sm font-medium text-text-primary mb-3">智能进度条（点击跳转）</div>
<div className="relative h-3 bg-bg-elevated rounded-full">
{/* 时间标记点 */}
{timelineMarkers.map((marker, idx) => (
<button
key={idx}
type="button"
className={`absolute top-1/2 -translate-y-1/2 w-4 h-4 rounded-full border-2 border-bg-card shadow-md cursor-pointer transition-transform hover:scale-125 ${
marker.type === 'hard' ? 'bg-accent-coral' : 'bg-orange-500'
}`}
style={{ left: `${(marker.time / 120) * 100}%` }}
title={`${formatTimestamp(marker.time)} - ${marker.type === 'hard' ? '硬性问题' : '舆情提示'}`}
/>
))}
{isVideoReview ? (
<div className="aspect-video bg-gray-900 rounded-t-lg flex items-center justify-center relative">
<button
type="button"
className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center hover:bg-white/30 transition-colors"
onClick={() => setIsPlaying(!isPlaying)}
>
{isPlaying ? <Pause size={32} className="text-white" /> : <Play size={32} className="text-white ml-1" />}
</button>
</div>
<div className="flex justify-between text-xs text-text-tertiary mt-1">
<span>0:00</span>
<span>2:00</span>
) : (
<div className="aspect-[4/3] bg-bg-elevated rounded-t-lg flex items-center justify-center">
<div className="text-center">
<p className="text-text-secondary">脚本预览区域</p>
<p className="text-sm text-text-tertiary mt-1">{task.script_file_name || '脚本文件'}</p>
</div>
</div>
<div className="flex gap-4 mt-3 text-xs text-text-secondary">
<span className="flex items-center gap-1">
<span className="w-3 h-3 bg-accent-coral rounded-full" />
硬性问题
</span>
<span className="flex items-center gap-1">
<span className="w-3 h-3 bg-orange-500 rounded-full" />
舆情提示
</span>
<span className="flex items-center gap-1">
<span className="w-3 h-3 bg-accent-green rounded-full" />
卖点覆盖
</span>
)}
{/* 智能进度条（仅视频且有时间标记时显示） */}
{isVideoReview && timelineMarkers.length > 0 && (
<div className="p-4 border-t border-border-subtle">
<div className="text-sm font-medium text-text-primary mb-3">智能进度条（点击跳转）</div>
<div className="relative h-3 bg-bg-elevated rounded-full">
{timelineMarkers.map((marker, idx) => (
<button
key={idx}
type="button"
className={`absolute top-1/2 -translate-y-1/2 w-4 h-4 rounded-full border-2 border-bg-card shadow-md cursor-pointer transition-transform hover:scale-125 ${
marker.type === 'hard' ? 'bg-accent-coral' : 'bg-orange-500'
}`}
style={{ left: `${(marker.time / maxTime) * 100}%` }}
title={`${formatTimestamp(marker.time)} - 硬性问题`}
/>
))}
</div>
<div className="flex justify-between text-xs text-text-tertiary mt-1">
<span>0:00</span>
<span>{formatTimestamp(maxTime)}</span>
</div>
<div className="flex gap-4 mt-3 text-xs text-text-secondary">
<span className="flex items-center gap-1">
<span className="w-3 h-3 bg-accent-coral rounded-full" />
硬性问题
</span>
<span className="flex items-center gap-1">
<span className="w-3 h-3 bg-orange-500 rounded-full" />
舆情提示
</span>
<span className="flex items-center gap-1">
<span className="w-3 h-3 bg-accent-green rounded-full" />
卖点覆盖
</span>
</div>
</div>
</div>
)}
</CardContent>
</Card>
@@ -201,11 +392,13 @@ export default function ReviewPage() {
<CardContent className="py-4">
<div className="flex items-center justify-between mb-2">
<span className="font-medium text-text-primary">AI 分析总结</span>
<span className={`text-xl font-bold ${task.aiScore >= 80 ? 'text-accent-green' : 'text-yellow-400'}`}>
{task.aiScore}分
</span>
{aiScore != null && (
<span className={`text-xl font-bold ${aiScore >= 80 ? 'text-accent-green' : aiScore >= 60 ? 'text-yellow-400' : 'text-accent-coral'}`}>
{aiScore}分
</span>
)}
</div>
<p className="text-text-secondary text-sm">{task.aiSummary}</p>
<p className="text-text-secondary text-sm">{aiSummary}</p>
</CardContent>
</Card>
</div>
@@ -217,35 +410,42 @@ export default function ReviewPage() {
<CardHeader className="pb-2">
<CardTitle className="flex items-center gap-2 text-base">
<Shield size={16} className="text-red-500" />
硬性合规 ({task.hardViolations.length})
硬性合规 ({violations.length})
</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
{task.hardViolations.map((v) => (
<div key={v.id} className={`p-3 rounded-lg border ${checkedViolations[v.id] ? 'bg-bg-elevated border-border-subtle' : 'bg-accent-coral/10 border-accent-coral/30'}`}>
<div className="flex items-start gap-2">
<input
type="checkbox"
checked={checkedViolations[v.id] || false}
onChange={() => setCheckedViolations((prev) => ({ ...prev, [v.id]: !prev[v.id] }))}
className="mt-1 accent-accent-indigo"
/>
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<ErrorTag>{v.type}</ErrorTag>
<span className="text-xs text-text-tertiary">{formatTimestamp(v.timestamp)}</span>
{violations.length > 0 ? violations.map((v, idx) => {
const key = `v-${idx}`
return (
<div key={key} className={`p-3 rounded-lg border ${checkedViolations[key] ? 'bg-bg-elevated border-border-subtle' : 'bg-accent-coral/10 border-accent-coral/30'}`}>
<div className="flex items-start gap-2">
<input
type="checkbox"
checked={checkedViolations[key] || false}
onChange={() => setCheckedViolations((prev) => ({ ...prev, [key]: !prev[key] }))}
className="mt-1 accent-accent-indigo"
/>
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<ErrorTag>{v.type}</ErrorTag>
{v.timestamp != null && (
<span className="text-xs text-text-tertiary">{formatTimestamp(v.timestamp)}</span>
)}
</div>
<p className="text-sm font-medium text-text-primary">「{v.content}」</p>
<p className="text-xs text-accent-indigo mt-1">{v.suggestion}</p>
</div>
<p className="text-sm font-medium text-text-primary">「{v.content}」</p>
<p className="text-xs text-accent-indigo mt-1">{v.suggestion}</p>
</div>
</div>
</div>
))}
)
}) : (
<div className="text-center py-4 text-text-tertiary text-sm">无硬性违规</div>
)}
</CardContent>
</Card>
{/* 舆情雷达 */}
{task.sentimentWarnings.length > 0 && (
{softWarnings.length > 0 && (
<Card>
<CardHeader className="pb-2">
<CardTitle className="flex items-center gap-2 text-base">
@@ -254,14 +454,13 @@ export default function ReviewPage() {
</CardTitle>
</CardHeader>
<CardContent className="space-y-2">
{task.sentimentWarnings.map((w) => (
<div key={w.id} className="p-3 bg-orange-500/10 rounded-lg border border-orange-500/30">
{softWarnings.map((w, idx) => (
<div key={idx} className="p-3 bg-orange-500/10 rounded-lg border border-orange-500/30">
<div className="flex items-center gap-2 mb-1">
<WarningTag>{w.type}</WarningTag>
<span className="text-xs text-text-tertiary">{formatTimestamp(w.timestamp)}</span>
</div>
<p className="text-sm text-orange-400">{w.content}</p>
<p className="text-xs text-text-tertiary mt-1">⚠️ 软性风险仅作提示，不强制拦截</p>
<p className="text-xs text-text-tertiary mt-1">软性风险仅作提示，不强制拦截</p>
</div>
))}
</CardContent>
@@ -275,16 +474,17 @@ export default function ReviewPage() {
<CardContent className="py-4">
<div className="flex items-center justify-between">
<div className="text-sm text-text-secondary">
已检查 {Object.values(checkedViolations).filter(Boolean).length}/{task.hardViolations.length} 个问题
已检查 {Object.values(checkedViolations).filter(Boolean).length}/{violations.length} 个问题
</div>
<div className="flex gap-3">
<Button variant="danger" onClick={() => setShowRejectModal(true)}>
<Button variant="danger" onClick={() => setShowRejectModal(true)} disabled={submitting}>
驳回
</Button>
<Button variant="secondary" onClick={() => setShowForcePassModal(true)}>
<Button variant="secondary" onClick={() => setShowForcePassModal(true)} disabled={submitting}>
强制通过
</Button>
<Button variant="success" onClick={() => setShowApproveModal(true)}>
<Button variant="success" onClick={() => setShowApproveModal(true)} disabled={submitting}>
{submitting ? <Loader2 size={16} className="animate-spin" /> : null}
通过
</Button>
</div>
@@ -298,7 +498,7 @@ export default function ReviewPage() {
onClose={() => setShowApproveModal(false)}
onConfirm={handleApprove}
title="确认通过"
message="确定要通过此视频的审核吗？通过后达人将收到通知。"
message={`确定要通过此${isVideoReview ? '视频' : '脚本'}的审核吗？通过后达人将收到通知。`}
confirmText="确认通过"
/>
@@ -307,9 +507,11 @@ export default function ReviewPage() {
<div className="space-y-4">
<p className="text-text-secondary text-sm">请填写驳回原因，已勾选的问题将自动打包发送给达人。</p>
<div className="p-3 bg-bg-elevated rounded-lg">
<p className="text-sm font-medium text-text-primary mb-2">已选问题 ({Object.values(checkedViolations).filter(Boolean).length})</p>
{task.hardViolations.filter(v => checkedViolations[v.id]).map(v => (
<div key={v.id} className="text-sm text-text-secondary">• {v.type}: {v.content}</div>
<p className="text-sm font-medium text-text-primary mb-2">
已选问题 ({Object.values(checkedViolations).filter(Boolean).length})
</p>
{violations.filter((_, idx) => checkedViolations[`v-${idx}`]).map((v, idx) => (
<div key={idx} className="text-sm text-text-secondary">- {v.type}: {v.content}</div>
))}
{Object.values(checkedViolations).filter(Boolean).length === 0 && (
<div className="text-sm text-text-tertiary">未选择任何问题</div>
@@ -325,8 +527,11 @@ export default function ReviewPage() {
/>
</div>
<div className="flex gap-3 justify-end">
<Button variant="ghost" onClick={() => setShowRejectModal(false)}>取消</Button>
<Button variant="danger" onClick={handleReject}>确认驳回</Button>
<Button variant="ghost" onClick={() => setShowRejectModal(false)} disabled={submitting}>取消</Button>
<Button variant="danger" onClick={handleReject} disabled={submitting}>
{submitting && <Loader2 size={16} className="animate-spin" />}
确认驳回
</Button>
</div>
</div>
</Modal>
@@ -359,8 +564,11 @@ export default function ReviewPage() {
<span className="text-sm text-text-secondary">保存为特例（需品牌方确认后生效）</span>
</label>
<div className="flex gap-3 justify-end">
<Button variant="ghost" onClick={() => setShowForcePassModal(false)}>取消</Button>
<Button onClick={handleForcePass}>确认强制通过</Button>
<Button variant="ghost" onClick={() => setShowForcePassModal(false)} disabled={submitting}>取消</Button>
<Button onClick={handleForcePass} disabled={submitting}>
{submitting && <Loader2 size={16} className="animate-spin" />}
确认强制通过
</Button>
</div>
</div>
</Modal>
frontend/app/agency/review/page.tsx
+263 -286
View File
@@ -1,6 +1,6 @@
'use client'
import { useState } from 'react'
import { useState, useEffect, useCallback } from 'react'
import Link from 'next/link'
import { useToast } from '@/components/ui/Toast'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
@@ -10,169 +10,136 @@ import {
FileText,
Video,
Search,
Filter,
Clock,
User,
AlertTriangle,
ChevronRight,
Download,
Eye,
File,
MessageSquareWarning
Download,
MessageSquareWarning,
Loader2
} from 'lucide-react'
import { Modal } from '@/components/ui/Modal'
import { getPlatformInfo } from '@/lib/platforms'
import { api } from '@/lib/api'
import { USE_MOCK } from '@/contexts/AuthContext'
import { useSSE } from '@/contexts/SSEContext'
import type { TaskResponse } from '@/types/task'
// 模拟脚本待审列表
const mockScriptTasks = [
// ==================== Mock 数据 ====================
const mockScriptTasks: TaskResponse[] = [
{
id: 'script-001',
title: '夏日护肤推广脚本',
fileName: '夏日护肤推广_脚本v2.docx',
fileSize: '245 KB',
creatorName: '小美护肤',
projectName: 'XX品牌618推广',
platform: 'douyin',
aiScore: 88,
riskLevel: 'low' as const,
submittedAt: '2026-02-06 14:30',
hasHighRisk: false,
isAppeal: false, // 是否为申诉
id: 'script-001', name: '夏日护肤推广脚本', sequence: 1,
stage: 'script_agency_review',
project: { id: 'proj-001', name: 'XX品牌618推广', brand_name: 'XX品牌' },
agency: { id: 'ag-001', name: '优创代理' },
creator: { id: 'cr-001', name: '小美护肤' },
script_file_name: '夏日护肤推广_脚本v2.docx',
script_ai_score: 88,
script_ai_result: { score: 88, violations: [], soft_warnings: [] },
appeal_count: 0, is_appeal: false,
created_at: '2026-02-06T14:30:00Z', updated_at: '2026-02-06T14:30:00Z',
},
{
id: 'script-002',
title: '新品口红试色脚本',
fileName: '口红试色_脚本v1.docx',
fileSize: '312 KB',
creatorName: '美妆Lisa',
projectName: 'XX品牌618推广',
platform: 'xiaohongshu',
aiScore: 72,
riskLevel: 'medium' as const,
submittedAt: '2026-02-06 12:15',
hasHighRisk: true,
isAppeal: true, // 申诉重审
appealReason: '已修改违规用词，请求重新审核',
id: 'script-002', name: '新品口红试色脚本', sequence: 2,
stage: 'script_agency_review',
project: { id: 'proj-001', name: 'XX品牌618推广', brand_name: 'XX品牌' },
agency: { id: 'ag-001', name: '优创代理' },
creator: { id: 'cr-002', name: '美妆Lisa' },
script_file_name: '口红试色_脚本v1.docx',
script_ai_score: 72,
script_ai_result: { score: 72, violations: [{ type: '违禁词', content: '最好', severity: 'medium', suggestion: '替换' }], soft_warnings: [] },
appeal_count: 1, is_appeal: true, appeal_reason: '已修改违规用词，请求重新审核',
created_at: '2026-02-06T12:15:00Z', updated_at: '2026-02-06T12:15:00Z',
},
{
id: 'script-003',
title: '健身器材推荐脚本',
fileName: '健身器材_推荐脚本.pdf',
fileSize: '189 KB',
creatorName: '健身教练王',
projectName: 'XX运动品牌',
platform: 'bilibili',
aiScore: 95,
riskLevel: 'low' as const,
submittedAt: '2026-02-06 10:00',
hasHighRisk: false,
isAppeal: false,
},
{
id: 'script-004',
title: '618大促预热脚本',
fileName: '618预热_脚本final.docx',
fileSize: '278 KB',
creatorName: '达人D',
projectName: 'XX品牌618推广',
platform: 'kuaishou',
aiScore: 62,
riskLevel: 'high' as const,
submittedAt: '2026-02-06 09:00',
hasHighRisk: true,
isAppeal: true,
appealReason: '对驳回原因有异议，内容符合要求',
id: 'script-003', name: '健身器材推荐脚本', sequence: 3,
stage: 'script_agency_review',
project: { id: 'proj-002', name: 'XX运动品牌', brand_name: 'XX运动' },
agency: { id: 'ag-001', name: '优创代理' },
creator: { id: 'cr-003', name: '健身教练王' },
script_file_name: '健身器材_推荐脚本.pdf',
script_ai_score: 95,
script_ai_result: { score: 95, violations: [], soft_warnings: [] },
appeal_count: 0, is_appeal: false,
created_at: '2026-02-06T10:00:00Z', updated_at: '2026-02-06T10:00:00Z',
},
]
// 模拟视频待审列表
const mockVideoTasks = [
const mockVideoTasks: TaskResponse[] = [
{
id: 'video-001',
title: '夏日护肤推广',
fileName: '夏日护肤_成片v2.mp4',
fileSize: '128 MB',
creatorName: '小美护肤',
projectName: 'XX品牌618推广',
platform: 'douyin',
aiScore: 85,
riskLevel: 'low' as const,
duration: '02:15',
submittedAt: '2026-02-06 15:00',
hasHighRisk: false,
isAppeal: false,
id: 'video-001', name: '夏日护肤推广', sequence: 1,
stage: 'video_agency_review',
project: { id: 'proj-001', name: 'XX品牌618推广', brand_name: 'XX品牌' },
agency: { id: 'ag-001', name: '优创代理' },
creator: { id: 'cr-001', name: '小美护肤' },
video_file_name: '夏日护肤_成片v2.mp4',
video_duration: 135, video_ai_score: 85,
video_ai_result: { score: 85, violations: [], soft_warnings: [] },
appeal_count: 0, is_appeal: false,
created_at: '2026-02-06T15:00:00Z', updated_at: '2026-02-06T15:00:00Z',
},
{
id: 'video-002',
title: '新品口红试色',
fileName: '口红试色_终版.mp4',
fileSize: '256 MB',
creatorName: '美妆Lisa',
projectName: 'XX品牌618推广',
platform: 'xiaohongshu',
aiScore: 68,
riskLevel: 'medium' as const,
duration: '03:42',
submittedAt: '2026-02-06 13:45',
hasHighRisk: true,
isAppeal: true,
appealReason: '已按要求重新剪辑，删除了争议片段',
id: 'video-002', name: '新品口红试色', sequence: 2,
stage: 'video_agency_review',
project: { id: 'proj-001', name: 'XX品牌618推广', brand_name: 'XX品牌' },
agency: { id: 'ag-001', name: '优创代理' },
creator: { id: 'cr-002', name: '美妆Lisa' },
video_file_name: '口红试色_终版.mp4',
video_duration: 222, video_ai_score: 68,
video_ai_result: { score: 68, violations: [{ type: '竞品', content: '疑似竞品', severity: 'high', suggestion: '确认' }], soft_warnings: [] },
appeal_count: 1, is_appeal: true, appeal_reason: '已按要求重新剪辑，删除了争议片段',
created_at: '2026-02-06T13:45:00Z', updated_at: '2026-02-06T13:45:00Z',
},
{
id: 'video-003',
title: '美妆新品体验',
fileName: '美妆体验_v3.mp4',
fileSize: '198 MB',
creatorName: '达人C',
projectName: 'XX品牌618推广',
platform: 'bilibili',
aiScore: 58,
riskLevel: 'high' as const,
duration: '04:20',
submittedAt: '2026-02-06 11:30',
hasHighRisk: true,
isAppeal: false,
},
{
id: 'video-004',
title: '618大促预热',
fileName: '618预热_final.mp4',
fileSize: '167 MB',
creatorName: '达人D',
projectName: 'XX品牌618推广',
platform: 'wechat',
aiScore: 91,
riskLevel: 'low' as const,
duration: '01:45',
submittedAt: '2026-02-06 10:15',
hasHighRisk: false,
isAppeal: false,
id: 'video-003', name: '美妆新品体验', sequence: 3,
stage: 'video_agency_review',
project: { id: 'proj-001', name: 'XX品牌618推广', brand_name: 'XX品牌' },
agency: { id: 'ag-001', name: '优创代理' },
creator: { id: 'cr-003', name: '达人C' },
video_file_name: '美妆体验_v3.mp4',
video_duration: 260, video_ai_score: 58,
video_ai_result: { score: 58, violations: [{ type: '违禁词', content: '最好', severity: 'high', suggestion: '替换' }], soft_warnings: [] },
appeal_count: 0, is_appeal: false,
created_at: '2026-02-06T11:30:00Z', updated_at: '2026-02-06T11:30:00Z',
},
]
// 风险等级配置
// ==================== 工具函数 ====================
function getRiskLevel(task: TaskResponse, type: 'script' | 'video'): 'low' | 'medium' | 'high' {
const score = type === 'script' ? task.script_ai_score : task.video_ai_score
if (score == null) return 'low'
if (score >= 85) return 'low'
if (score >= 70) return 'medium'
return 'high'
}
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 formatDuration(seconds: number): string {
const mins = Math.floor(seconds / 60)
const secs = Math.floor(seconds % 60)
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}
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, onPreview, toast }: { task: ScriptTask; onPreview: (task: ScriptTask) => void; toast: ReturnType<typeof useToast> }) {
const riskConfig = riskLevelConfig[task.riskLevel]
const platform = getPlatformInfo(task.platform)
function ScriptTaskCard({ task, onPreview, toast }: { task: TaskResponse; onPreview: (task: TaskResponse) => void; toast: ReturnType<typeof useToast> }) {
const riskLevel = getRiskLevel(task, 'script')
const riskConfig = riskLevelConfig[riskLevel]
const handleDownload = (e: React.MouseEvent) => {
e.stopPropagation()
toast.info(`下载文件: ${task.fileName}`)
toast.info(`下载文件: ${task.script_file_name || '脚本文件'}`)
}
const handlePreview = (e: React.MouseEvent) => {
@@ -182,78 +149,59 @@ function ScriptTaskCard({ task, onPreview, toast }: { task: ScriptTask; onPrevie
return (
<div className="rounded-xl bg-bg-elevated overflow-hidden">
{/* 平台顶部条 */}
{platform && (
<div className={`px-4 py-1.5 ${platform.bgColor} border-b ${platform.borderColor} flex items-center gap-1.5`}>
<span className="text-sm">{platform.icon}</span>
<span className={`text-xs font-medium ${platform.textColor}`}>{platform.name}</span>
{/* 申诉标识 */}
{task.isAppeal && (
<span className="ml-auto flex items-center gap-1 px-2 py-0.5 text-xs bg-accent-amber/30 text-accent-amber rounded-full font-medium">
<MessageSquareWarning size={12} />
申诉
</span>
)}
</div>
)}
{/* 顶部条 */}
<div className="px-4 py-1.5 bg-accent-indigo/10 border-b border-accent-indigo/20 flex items-center gap-1.5">
<span className="text-xs font-medium text-accent-indigo">{task.project.brand_name || task.project.name}</span>
{task.is_appeal && (
<span className="ml-auto flex items-center gap-1 px-2 py-0.5 text-xs bg-accent-amber/30 text-accent-amber rounded-full font-medium">
<MessageSquareWarning size={12} />
申诉
</span>
)}
</div>
<div className="p-4">
{/* 顶部：达人名 · 任务名 + 状态标签 */}
<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>
<span className="font-medium text-text-primary">{task.creator.name} · {task.name}</span>
</div>
<span className={`text-xs ${riskConfig.textColor}`}>{riskConfig.label}</span>
</div>
{/* 申诉理由 */}
{task.isAppeal && task.appealReason && (
{task.is_appeal && task.appeal_reason && (
<div className="mb-3 p-2.5 rounded-lg bg-accent-amber/10 border border-accent-amber/30">
<p className="text-xs text-accent-amber font-medium mb-1">申诉理由</p>
<p className="text-sm text-text-secondary">{task.appealReason}</p>
<p className="text-sm text-text-secondary">{task.appeal_reason}</p>
</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>
<p className="text-sm font-medium text-text-primary truncate">{task.script_file_name || '脚本文件'}</p>
</div>
<button
type="button"
onClick={handlePreview}
className="p-2 rounded-lg hover:bg-bg-elevated transition-colors"
title="预览文件"
>
<button type="button" onClick={handlePreview} className="p-2 rounded-lg hover:bg-bg-elevated transition-colors" title="预览文件">
<Eye size={18} className="text-text-secondary" />
</button>
<button
type="button"
onClick={handleDownload}
className="p-2 rounded-lg hover:bg-bg-elevated transition-colors"
title="下载文件"
>
<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}
{new Date(task.created_at).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })}
</span>
<Link href={`/agency/review/script/${task.id}`}>
<Link href={`/agency/review/${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' :
riskLevel === 'high' ? 'bg-accent-coral hover:bg-accent-coral/80' :
riskLevel === 'medium' ? 'bg-accent-amber hover:bg-accent-amber/80' :
'bg-accent-green hover:bg-accent-green/80'
} text-white`}>
{task.isAppeal ? '审核申诉' : '审核'}
{task.is_appeal ? '审核申诉' : '审核'}
</Button>
</Link>
</div>
@@ -262,13 +210,13 @@ function ScriptTaskCard({ task, onPreview, toast }: { task: ScriptTask; onPrevie
)
}
function VideoTaskCard({ task, onPreview, toast }: { task: VideoTask; onPreview: (task: VideoTask) => void; toast: ReturnType<typeof useToast> }) {
const riskConfig = riskLevelConfig[task.riskLevel]
const platform = getPlatformInfo(task.platform)
function VideoTaskCard({ task, onPreview, toast }: { task: TaskResponse; onPreview: (task: TaskResponse) => void; toast: ReturnType<typeof useToast> }) {
const riskLevel = getRiskLevel(task, 'video')
const riskConfig = riskLevelConfig[riskLevel]
const handleDownload = (e: React.MouseEvent) => {
e.stopPropagation()
toast.info(`下载文件: ${task.fileName}`)
toast.info(`下载文件: ${task.video_file_name || '视频文件'}`)
}
const handlePreview = (e: React.MouseEvent) => {
@@ -278,78 +226,61 @@ function VideoTaskCard({ task, onPreview, toast }: { task: VideoTask; onPreview:
return (
<div className="rounded-xl bg-bg-elevated overflow-hidden">
{/* 平台顶部条 */}
{platform && (
<div className={`px-4 py-1.5 ${platform.bgColor} border-b ${platform.borderColor} flex items-center gap-1.5`}>
<span className="text-sm">{platform.icon}</span>
<span className={`text-xs font-medium ${platform.textColor}`}>{platform.name}</span>
{/* 申诉标识 */}
{task.isAppeal && (
<span className="ml-auto flex items-center gap-1 px-2 py-0.5 text-xs bg-accent-amber/30 text-accent-amber rounded-full font-medium">
<MessageSquareWarning size={12} />
申诉
</span>
)}
</div>
)}
<div className="px-4 py-1.5 bg-purple-500/10 border-b border-purple-500/20 flex items-center gap-1.5">
<span className="text-xs font-medium text-purple-400">{task.project.brand_name || task.project.name}</span>
{task.is_appeal && (
<span className="ml-auto flex items-center gap-1 px-2 py-0.5 text-xs bg-accent-amber/30 text-accent-amber rounded-full font-medium">
<MessageSquareWarning size={12} />
申诉
</span>
)}
</div>
<div className="p-4">
{/* 顶部：达人名 · 任务名 + 状态标签 */}
<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>
<span className="font-medium text-text-primary">{task.creator.name} · {task.name}</span>
</div>
<span className={`text-xs ${riskConfig.textColor}`}>{riskConfig.label}</span>
</div>
{/* 申诉理由 */}
{task.isAppeal && task.appealReason && (
{task.is_appeal && task.appeal_reason && (
<div className="mb-3 p-2.5 rounded-lg bg-accent-amber/10 border border-accent-amber/30">
<p className="text-xs text-accent-amber font-medium mb-1">申诉理由</p>
<p className="text-sm text-text-secondary">{task.appealReason}</p>
<p className="text-sm text-text-secondary">{task.appeal_reason}</p>
</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>
<p className="text-sm font-medium text-text-primary truncate">{task.video_file_name || '视频文件'}</p>
{task.video_duration && (
<p className="text-xs text-text-tertiary">{formatDuration(task.video_duration)}</p>
)}
</div>
<button
type="button"
onClick={handlePreview}
className="p-2 rounded-lg hover:bg-bg-elevated transition-colors"
title="预览视频"
>
<button type="button" onClick={handlePreview} className="p-2 rounded-lg hover:bg-bg-elevated transition-colors" title="预览视频">
<Eye size={18} className="text-text-secondary" />
</button>
<button
type="button"
onClick={handleDownload}
className="p-2 rounded-lg hover:bg-bg-elevated transition-colors"
title="下载文件"
>
<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}
{new Date(task.created_at).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })}
</span>
<Link href={`/agency/review/video/${task.id}`}>
<Link href={`/agency/review/${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' :
riskLevel === 'high' ? 'bg-accent-coral hover:bg-accent-coral/80' :
riskLevel === 'medium' ? 'bg-accent-amber hover:bg-accent-amber/80' :
'bg-accent-green hover:bg-accent-green/80'
} text-white`}>
{task.isAppeal ? '审核申诉' : '审核'}
{task.is_appeal ? '审核申诉' : '审核'}
</Button>
</Link>
</div>
@@ -358,26 +289,103 @@ function VideoTaskCard({ task, onPreview, toast }: { task: VideoTask; onPreview:
)
}
// ==================== 骨架屏 ====================
function ReviewListSkeleton() {
return (
<div className="space-y-6 animate-pulse">
<div className="flex items-center justify-between">
<div className="h-8 w-24 bg-bg-elevated rounded" />
<div className="flex gap-2">
<div className="h-8 w-20 bg-bg-elevated rounded" />
<div className="h-8 w-20 bg-bg-elevated rounded" />
</div>
</div>
<div className="h-10 w-full max-w-md bg-bg-elevated rounded-lg" />
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{[1, 2].map(i => (
<div key={i} className="space-y-3">
<div className="h-8 w-32 bg-bg-elevated rounded" />
{[1, 2, 3].map(j => (
<div key={j} className="h-40 bg-bg-elevated rounded-xl" />
))}
</div>
))}
</div>
</div>
)
}
// ==================== 主页面 ====================
export default function AgencyReviewListPage() {
const [searchQuery, setSearchQuery] = useState('')
const [activeTab, setActiveTab] = useState<'all' | 'script' | 'video'>('all')
const [previewScript, setPreviewScript] = useState<ScriptTask | null>(null)
const [previewVideo, setPreviewVideo] = useState<VideoTask | null>(null)
const [previewTask, setPreviewTask] = useState<TaskResponse | null>(null)
const [previewType, setPreviewType] = useState<'script' | 'video'>('script')
const [scriptTasks, setScriptTasks] = useState<TaskResponse[]>([])
const [videoTasks, setVideoTasks] = useState<TaskResponse[]>([])
const [loading, setLoading] = useState(true)
const toast = useToast()
const { subscribe } = useSSE()
const filteredScripts = mockScriptTasks.filter(task =>
task.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
task.creatorName.toLowerCase().includes(searchQuery.toLowerCase())
const loadData = useCallback(async () => {
if (USE_MOCK) {
setScriptTasks(mockScriptTasks)
setVideoTasks(mockVideoTasks)
setLoading(false)
return
}
try {
const [scriptData, videoData] = await Promise.all([
api.listTasks(1, 50, 'script_agency_review'),
api.listTasks(1, 50, 'video_agency_review'),
])
setScriptTasks(scriptData.items)
setVideoTasks(videoData.items)
} catch (err) {
console.error('Failed to load review tasks:', err)
toast.error('加载审核任务失败')
} finally {
setLoading(false)
}
}, [toast])
useEffect(() => {
loadData()
}, [loadData])
useEffect(() => {
const unsub1 = subscribe('task_updated', () => loadData())
const unsub2 = subscribe('new_task', () => loadData())
return () => { unsub1(); unsub2() }
}, [subscribe, loadData])
if (loading) return <ReviewListSkeleton />
const filteredScripts = scriptTasks.filter(task =>
task.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
task.creator.name.toLowerCase().includes(searchQuery.toLowerCase())
)
const filteredVideos = mockVideoTasks.filter(task =>
task.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
task.creatorName.toLowerCase().includes(searchQuery.toLowerCase())
const filteredVideos = videoTasks.filter(task =>
task.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
task.creator.name.toLowerCase().includes(searchQuery.toLowerCase())
)
// 计算申诉数量
const appealScriptCount = mockScriptTasks.filter(t => t.isAppeal).length
const appealVideoCount = mockVideoTasks.filter(t => t.isAppeal).length
const appealScriptCount = scriptTasks.filter(t => t.is_appeal).length
const appealVideoCount = videoTasks.filter(t => t.is_appeal).length
const handleScriptPreview = (task: TaskResponse) => {
setPreviewTask(task)
setPreviewType('script')
}
const handleVideoPreview = (task: TaskResponse) => {
setPreviewTask(task)
setPreviewType('video')
}
return (
<div className="space-y-6 min-h-0">
@@ -390,10 +398,10 @@ export default function AgencyReviewListPage() {
<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} 脚本
{scriptTasks.length} 脚本
</span>
<span className="px-2 py-1 bg-purple-500/20 text-purple-400 rounded font-medium">
{mockVideoTasks.length} 视频
{videoTasks.length} 视频
</span>
{(appealScriptCount + appealVideoCount) > 0 && (
<span className="px-2 py-1 bg-accent-amber/20 text-accent-amber rounded font-medium flex items-center gap-1">
@@ -449,7 +457,6 @@ export default function AgencyReviewListPage() {
{/* 任务列表 */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* 脚本待审列表 */}
{(activeTab === 'all' || activeTab === 'script') && (
<Card>
<CardHeader>
@@ -464,7 +471,7 @@ export default function AgencyReviewListPage() {
<CardContent className="space-y-3">
{filteredScripts.length > 0 ? (
filteredScripts.map((task) => (
<ScriptTaskCard key={task.id} task={task} onPreview={setPreviewScript} toast={toast} />
<ScriptTaskCard key={task.id} task={task} onPreview={handleScriptPreview} toast={toast} />
))
) : (
<div className="text-center py-8 text-text-tertiary">
@@ -476,7 +483,6 @@ export default function AgencyReviewListPage() {
</Card>
)}
{/* 视频待审列表 */}
{(activeTab === 'all' || activeTab === 'video') && (
<Card>
<CardHeader>
@@ -491,7 +497,7 @@ export default function AgencyReviewListPage() {
<CardContent className="space-y-3">
{filteredVideos.length > 0 ? (
filteredVideos.map((task) => (
<VideoTaskCard key={task.id} task={task} onPreview={setPreviewVideo} toast={toast} />
<VideoTaskCard key={task.id} task={task} onPreview={handleVideoPreview} toast={toast} />
))
) : (
<div className="text-center py-8 text-text-tertiary">
@@ -504,86 +510,57 @@ export default function AgencyReviewListPage() {
)}
</div>
{/* 脚本预览弹窗 */}
{/* 预览弹窗 */}
<Modal
isOpen={!!previewScript}
onClose={() => setPreviewScript(null)}
title={previewScript?.fileName || '脚本预览'}
isOpen={!!previewTask}
onClose={() => setPreviewTask(null)}
title={previewType === 'script' ? (previewTask?.script_file_name || '脚本预览') : (previewTask?.video_file_name || '视频预览')}
size="lg"
>
<div className="space-y-4">
{previewScript?.isAppeal && previewScript?.appealReason && (
{previewTask?.is_appeal && previewTask?.appeal_reason && (
<div className="p-3 rounded-lg bg-accent-amber/10 border border-accent-amber/30">
<p className="text-xs text-accent-amber font-medium mb-1 flex items-center gap-1">
<MessageSquareWarning size={12} />
申诉理由
</p>
<p className="text-sm text-text-secondary">{previewScript.appealReason}</p>
<p className="text-sm text-text-secondary">{previewTask.appeal_reason}</p>
</div>
)}
<div className="aspect-[4/3] bg-bg-elevated rounded-lg flex items-center justify-center">
<div className="text-center">
<FileText className="w-12 h-12 mx-auto text-accent-indigo mb-4" />
<p className="text-text-secondary">脚本预览区域</p>
<p className="text-xs text-text-tertiary mt-1">实际开发中将嵌入文档预览组件</p>
</div>
</div>
<div className="flex justify-between items-center">
<div className="text-sm text-text-secondary">
<span>{previewScript?.fileName}</span>
<span className="mx-2">·</span>
<span>{previewScript?.fileSize}</span>
</div>
<div className="flex gap-2">
<Button variant="secondary" onClick={() => setPreviewScript(null)}>
关闭
</Button>
<Button onClick={() => toast.info(`下载文件: ${previewScript?.fileName}`)}>
<Download size={16} />
下载
</Button>
</div>
</div>
</div>
</Modal>
{/* 视频预览弹窗 */}
<Modal
isOpen={!!previewVideo}
onClose={() => setPreviewVideo(null)}
title={previewVideo?.fileName || '视频预览'}
size="lg"
>
<div className="space-y-4">
{previewVideo?.isAppeal && previewVideo?.appealReason && (
<div className="p-3 rounded-lg bg-accent-amber/10 border border-accent-amber/30">
<p className="text-xs text-accent-amber font-medium mb-1 flex items-center gap-1">
<MessageSquareWarning size={12} />
申诉理由
</p>
<p className="text-sm text-text-secondary">{previewVideo.appealReason}</p>
{previewType === 'script' ? (
<div className="aspect-[4/3] bg-bg-elevated rounded-lg flex items-center justify-center">
<div className="text-center">
<FileText className="w-12 h-12 mx-auto text-accent-indigo mb-4" />
<p className="text-text-secondary">脚本预览区域</p>
<p className="text-xs text-text-tertiary mt-1">实际开发中将嵌入文档预览组件</p>
</div>
</div>
) : (
<div className="aspect-video bg-bg-elevated rounded-lg flex items-center justify-center">
<div className="text-center">
<Video className="w-12 h-12 mx-auto text-purple-400 mb-4" />
<p className="text-text-secondary">视频播放区域</p>
<p className="text-xs text-text-tertiary mt-1">实际开发中将嵌入视频播放器</p>
</div>
</div>
)}
<div className="aspect-video bg-bg-elevated rounded-lg flex items-center justify-center">
<div className="text-center">
<Video className="w-12 h-12 mx-auto text-purple-400 mb-4" />
<p className="text-text-secondary">视频播放区域</p>
<p className="text-xs text-text-tertiary mt-1">实际开发中将嵌入视频播放器</p>
</div>
</div>
<div className="flex justify-between items-center">
<div className="text-sm text-text-secondary">
<span>{previewVideo?.fileName}</span>
<span className="mx-2">·</span>
<span>{previewVideo?.fileSize}</span>
<span className="mx-2">·</span>
<span>{previewVideo?.duration}</span>
<span>{previewType === 'script' ? previewTask?.script_file_name : previewTask?.video_file_name}</span>
{previewType === 'video' && previewTask?.video_duration && (
<>
<span className="mx-2">·</span>
<span>{formatDuration(previewTask.video_duration)}</span>
</>
)}
</div>
<div className="flex gap-2">
<Button variant="secondary" onClick={() => setPreviewVideo(null)}>
<Button variant="secondary" onClick={() => setPreviewTask(null)}>
关闭
</Button>
<Button onClick={() => toast.info(`下载文件: ${previewVideo?.fileName}`)}>
<Button onClick={() => toast.info(`下载文件: ${previewType === 'script' ? previewTask?.script_file_name : previewTask?.video_file_name}`)}>
<Download size={16} />
下载
</Button>