8eb8100cf4
后端: - 实现登出 API（清除 refresh token） - 清除 videos.py 中已被 Celery 任务取代的死代码 - 添加速率限制中间件（60次/分钟，登录10次/分钟） - 添加 SECRET_KEY/ENCRYPTION_KEY 默认值警告 - OSS STS 方法回退到 Policy 签名（不再抛异常） 前端: - 添加全局 404/error/loading 页面 - 添加三端 error.tsx + loading.tsx 错误边界 - 修复 useId 条件调用违反 Hooks 规则 - 修复未转义引号和 Image 命名冲突 - 添加 ESLint 配置 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
757 lines
28 KiB
TypeScript
757 lines
28 KiB
TypeScript
'use client'
|
||
|
||
import { useState, useEffect, useCallback } from 'react'
|
||
import { useRouter, useParams } from 'next/navigation'
|
||
import { useToast } from '@/components/ui/Toast'
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
|
||
import { Button } from '@/components/ui/Button'
|
||
import { Modal, ConfirmModal } from '@/components/ui/Modal'
|
||
import { SuccessTag, WarningTag, ErrorTag } from '@/components/ui/Tag'
|
||
import { ReviewSteps, getBrandReviewSteps } from '@/components/ui/ReviewSteps'
|
||
import {
|
||
ArrowLeft,
|
||
Play,
|
||
Pause,
|
||
AlertTriangle,
|
||
Shield,
|
||
Radio,
|
||
User,
|
||
Building,
|
||
Clock,
|
||
CheckCircle,
|
||
XCircle,
|
||
MessageSquare,
|
||
ExternalLink,
|
||
MessageSquareWarning,
|
||
Loader2,
|
||
} from 'lucide-react'
|
||
import { FileInfoCard, FilePreviewModal, type FileInfo } from '@/components/ui/FilePreview'
|
||
import { api } from '@/lib/api'
|
||
import { USE_MOCK } from '@/contexts/AuthContext'
|
||
import type { TaskResponse } from '@/types/task'
|
||
|
||
// ==================== AI 审核结果类型 ====================
|
||
|
||
interface AIReviewResult {
|
||
score: number
|
||
violations: Array<{
|
||
type: string
|
||
content: string
|
||
severity: string
|
||
suggestion: string
|
||
timestamp?: number
|
||
source?: string
|
||
}>
|
||
soft_warnings: Array<{
|
||
type: string
|
||
content: string
|
||
suggestion: string
|
||
}>
|
||
summary?: string
|
||
}
|
||
|
||
// ==================== 本地视图数据类型 ====================
|
||
|
||
interface VideoTaskView {
|
||
id: string
|
||
title: string
|
||
creatorName: string
|
||
agencyName: string
|
||
projectName: string
|
||
submittedAt: string
|
||
duration: number
|
||
aiScore: number
|
||
status: string
|
||
file: FileInfo
|
||
isAppeal: boolean
|
||
appealReason: string
|
||
agencyReview: {
|
||
reviewer: string
|
||
result: string
|
||
comment: string
|
||
reviewedAt?: string
|
||
}
|
||
hardViolations: Array<{
|
||
id: string
|
||
type: string
|
||
content: string
|
||
timestamp: number
|
||
source: string
|
||
riskLevel: string
|
||
aiConfidence: number
|
||
suggestion: string
|
||
}>
|
||
sentimentWarnings: Array<{
|
||
id: string
|
||
type: string
|
||
timestamp: number
|
||
content: string
|
||
riskLevel: string
|
||
}>
|
||
sellingPointsCovered: Array<{
|
||
point: string
|
||
covered: boolean
|
||
timestamp: number
|
||
}>
|
||
aiSummary?: string
|
||
}
|
||
|
||
// ==================== Mock 数据 ====================
|
||
|
||
const mockVideoTask: VideoTaskView = {
|
||
id: 'video-001',
|
||
title: '夏日护肤推广',
|
||
creatorName: '小美护肤',
|
||
agencyName: '星耀传媒',
|
||
projectName: 'XX品牌618推广',
|
||
submittedAt: '2026-02-06 15:00',
|
||
duration: 135,
|
||
aiScore: 85,
|
||
status: 'brand_reviewing',
|
||
file: {
|
||
id: 'file-video-001',
|
||
fileName: '夏日护肤_成片v2.mp4',
|
||
fileSize: '128 MB',
|
||
fileType: 'video/mp4',
|
||
fileUrl: '/demo/videos/video-001.mp4',
|
||
uploadedAt: '2026-02-06 15:00',
|
||
duration: '02:15',
|
||
thumbnail: '/demo/videos/video-001-thumb.jpg',
|
||
},
|
||
isAppeal: false,
|
||
appealReason: '',
|
||
agencyReview: {
|
||
reviewer: '张经理',
|
||
result: 'approved',
|
||
comment: '视频质量良好，发现的问题已确认为误报，建议通过。',
|
||
reviewedAt: '2026-02-06 16:00',
|
||
},
|
||
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: 'medium',
|
||
aiConfidence: 0.72,
|
||
suggestion: '经代理商确认为背景杂物，非竞品',
|
||
},
|
||
],
|
||
sentimentWarnings: [
|
||
{ id: 's1', type: '表情预警', timestamp: 68.0, content: '表情过于夸张，可能引发不适', riskLevel: 'low' },
|
||
],
|
||
sellingPointsCovered: [
|
||
{ point: 'SPF50+ PA++++', covered: true, timestamp: 25.0 },
|
||
{ point: '轻薄质地', covered: true, timestamp: 38.0 },
|
||
{ point: '不油腻', covered: true, timestamp: 52.0 },
|
||
{ point: '延展性好', covered: true, timestamp: 45.0 },
|
||
],
|
||
}
|
||
|
||
// ==================== 工具函数 ====================
|
||
|
||
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 formatDurationString(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 severityToRiskLevel(severity: string): string {
|
||
if (severity === 'high' || severity === 'critical') return 'high'
|
||
if (severity === 'medium') return 'medium'
|
||
return 'low'
|
||
}
|
||
|
||
/** 将后端 TaskResponse 映射为本地视图数据 */
|
||
function mapTaskToView(task: TaskResponse): VideoTaskView {
|
||
const aiResult = task.video_ai_result as AIReviewResult | null | undefined
|
||
|
||
const hardViolations = (aiResult?.violations || []).map((v, idx) => ({
|
||
id: `v${idx}`,
|
||
type: v.type,
|
||
content: v.content,
|
||
timestamp: v.timestamp ?? 0,
|
||
source: v.source ?? 'unknown',
|
||
riskLevel: severityToRiskLevel(v.severity),
|
||
aiConfidence: 0.9,
|
||
suggestion: v.suggestion,
|
||
}))
|
||
|
||
const sentimentWarnings = (aiResult?.soft_warnings || []).map((w, idx) => ({
|
||
id: `s${idx}`,
|
||
type: w.type,
|
||
timestamp: 0,
|
||
content: w.content,
|
||
riskLevel: 'low',
|
||
}))
|
||
|
||
const duration = task.video_duration || 0
|
||
|
||
return {
|
||
id: task.id,
|
||
title: task.name,
|
||
creatorName: task.creator.name,
|
||
agencyName: task.agency.name,
|
||
projectName: task.project.name,
|
||
submittedAt: task.video_uploaded_at || task.created_at,
|
||
duration,
|
||
aiScore: task.video_ai_score || 0,
|
||
status: task.stage,
|
||
file: {
|
||
id: task.id,
|
||
fileName: task.video_file_name || '视频文件',
|
||
fileSize: '',
|
||
fileType: 'video/mp4',
|
||
fileUrl: task.video_file_url || '',
|
||
uploadedAt: task.video_uploaded_at || task.created_at,
|
||
duration: formatDurationString(duration),
|
||
thumbnail: task.video_thumbnail_url || undefined,
|
||
},
|
||
isAppeal: task.is_appeal,
|
||
appealReason: task.appeal_reason || '',
|
||
agencyReview: {
|
||
reviewer: task.agency.name,
|
||
result: task.video_agency_status === 'passed' || task.video_agency_status === 'force_passed' ? 'approved' : (task.video_agency_status || 'pending'),
|
||
comment: task.video_agency_comment || '',
|
||
},
|
||
hardViolations,
|
||
sentimentWarnings,
|
||
// 卖点覆盖目前后端暂无，保留空数组
|
||
sellingPointsCovered: [],
|
||
aiSummary: aiResult?.summary,
|
||
}
|
||
}
|
||
|
||
// ==================== 子组件 ====================
|
||
|
||
function ReviewProgressBar({ taskStatus }: { taskStatus: string }) {
|
||
const steps = getBrandReviewSteps(taskStatus)
|
||
const currentStep = steps.find(s => s.status === 'current')
|
||
|
||
return (
|
||
<Card className="mb-6">
|
||
<CardContent className="py-4">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<span className="text-sm font-medium text-text-primary">审核流程</span>
|
||
<span className="text-sm text-accent-indigo font-medium">
|
||
当前：{currentStep?.label || '品牌方终审'}
|
||
</span>
|
||
</div>
|
||
<ReviewSteps steps={steps} />
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
function RiskLevelTag({ level }: { level: string }) {
|
||
if (level === 'high') return <ErrorTag>高风险</ErrorTag>
|
||
if (level === 'medium') return <WarningTag>中风险</WarningTag>
|
||
return <SuccessTag>低风险</SuccessTag>
|
||
}
|
||
|
||
function LoadingSkeleton() {
|
||
return (
|
||
<div className="space-y-4 animate-pulse">
|
||
{/* 顶部导航骨架 */}
|
||
<div className="flex items-center gap-4">
|
||
<div className="w-9 h-9 bg-bg-elevated rounded-full" />
|
||
<div className="flex-1 space-y-2">
|
||
<div className="h-6 w-48 bg-bg-elevated rounded" />
|
||
<div className="h-4 w-72 bg-bg-elevated rounded" />
|
||
</div>
|
||
</div>
|
||
{/* 流程进度骨架 */}
|
||
<div className="h-20 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-16 bg-bg-elevated rounded-xl" />
|
||
<div className="aspect-video bg-bg-elevated rounded-xl" />
|
||
<div className="h-32 bg-bg-elevated rounded-xl" />
|
||
<div className="h-24 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 className="h-40 bg-bg-elevated rounded-xl" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ==================== 主页面 ====================
|
||
|
||
export default function BrandVideoReviewPage() {
|
||
const router = useRouter()
|
||
const params = useParams()
|
||
const toast = useToast()
|
||
const taskId = params.id as string
|
||
|
||
const [task, setTask] = useState<VideoTaskView | 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)
|
||
const [rejectReason, setRejectReason] = useState('')
|
||
const [checkedViolations, setCheckedViolations] = useState<Record<string, boolean>>({})
|
||
const [showFilePreview, setShowFilePreview] = useState(false)
|
||
const [videoError, setVideoError] = useState(false)
|
||
|
||
// 加载任务数据
|
||
const loadTask = useCallback(async () => {
|
||
if (!taskId) return
|
||
|
||
if (USE_MOCK) {
|
||
// Mock 模式下使用静态数据
|
||
await new Promise((resolve) => setTimeout(resolve, 300))
|
||
setTask(mockVideoTask)
|
||
setLoading(false)
|
||
return
|
||
}
|
||
|
||
try {
|
||
setLoading(true)
|
||
const response = await api.getTask(taskId)
|
||
setTask(mapTaskToView(response))
|
||
} catch (err) {
|
||
const message = err instanceof Error ? err.message : '加载任务失败'
|
||
toast.error(message)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}, [taskId, toast])
|
||
|
||
useEffect(() => {
|
||
loadTask()
|
||
}, [loadTask])
|
||
|
||
// 通过审核
|
||
const handleApprove = async () => {
|
||
if (submitting) return
|
||
setSubmitting(true)
|
||
|
||
try {
|
||
if (!USE_MOCK) {
|
||
await api.reviewVideo(taskId, { action: 'pass', comment: '' })
|
||
} else {
|
||
await new Promise((resolve) => setTimeout(resolve, 300))
|
||
}
|
||
setShowApproveModal(false)
|
||
toast.success('审核通过！')
|
||
router.push('/brand/review')
|
||
} catch (err) {
|
||
const message = err instanceof Error ? err.message : '操作失败'
|
||
toast.error(message)
|
||
} finally {
|
||
setSubmitting(false)
|
||
}
|
||
}
|
||
|
||
// 驳回审核
|
||
const handleReject = async () => {
|
||
if (!rejectReason.trim()) {
|
||
toast.error('请填写驳回原因')
|
||
return
|
||
}
|
||
if (submitting) return
|
||
setSubmitting(true)
|
||
|
||
try {
|
||
if (!USE_MOCK) {
|
||
await api.reviewVideo(taskId, { action: 'reject', comment: rejectReason })
|
||
} else {
|
||
await new Promise((resolve) => setTimeout(resolve, 300))
|
||
}
|
||
setShowRejectModal(false)
|
||
toast.success('已驳回')
|
||
router.push('/brand/review')
|
||
} catch (err) {
|
||
const message = err instanceof Error ? err.message : '操作失败'
|
||
toast.error(message)
|
||
} finally {
|
||
setSubmitting(false)
|
||
}
|
||
}
|
||
|
||
// 加载中状态
|
||
if (loading || !task) {
|
||
return <LoadingSkeleton />
|
||
}
|
||
|
||
// 计算问题时间点用于进度条展示
|
||
const timelineMarkers = [
|
||
...task.hardViolations.map(v => ({ time: v.timestamp, type: 'hard' as const })),
|
||
...task.sentimentWarnings.filter(w => w.timestamp > 0).map(w => ({ time: w.timestamp, type: 'soft' as const })),
|
||
...task.sellingPointsCovered.filter(s => s.covered).map(s => ({ time: s.timestamp, type: 'selling' as const })),
|
||
].sort((a, b) => a.time - b.time)
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
{/* 顶部导航 */}
|
||
<div className="flex items-center gap-4">
|
||
<button type="button" onClick={() => router.back()} className="p-2 hover:bg-bg-elevated rounded-full">
|
||
<ArrowLeft size={20} className="text-text-primary" />
|
||
</button>
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2">
|
||
<h1 className="text-xl font-bold text-text-primary">{task.title}</h1>
|
||
{task.isAppeal && (
|
||
<span className="flex items-center gap-1 px-2 py-1 text-xs bg-accent-amber/20 text-accent-amber rounded-full font-medium">
|
||
<MessageSquareWarning size={12} />
|
||
申诉
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div className="flex items-center gap-4 mt-1 text-sm text-text-secondary">
|
||
<span className="flex items-center gap-1">
|
||
<User size={14} />
|
||
{task.creatorName}
|
||
</span>
|
||
<span className="flex items-center gap-1">
|
||
<Building size={14} />
|
||
{task.agencyName}
|
||
</span>
|
||
<span className="flex items-center gap-1">
|
||
<Clock size={14} />
|
||
{task.submittedAt}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 申诉理由 */}
|
||
{task.isAppeal && task.appealReason && (
|
||
<div className="p-4 rounded-xl bg-accent-amber/10 border border-accent-amber/30">
|
||
<p className="text-sm text-accent-amber font-medium mb-1 flex items-center gap-1">
|
||
<MessageSquareWarning size={14} />
|
||
申诉理由
|
||
</p>
|
||
<p className="text-text-secondary">{task.appealReason}</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* 审核流程进度条 */}
|
||
<ReviewProgressBar taskStatus={task.status} />
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
|
||
{/* 左侧：视频播放器 (3/5) */}
|
||
<div className="lg:col-span-3 space-y-4">
|
||
{/* 文件信息卡片 */}
|
||
<FileInfoCard
|
||
file={task.file}
|
||
onPreview={() => setShowFilePreview(true)}
|
||
/>
|
||
|
||
<Card>
|
||
<CardContent className="p-0">
|
||
{/* 真实视频播放器 */}
|
||
<div className="aspect-video bg-gray-900 rounded-t-lg overflow-hidden relative">
|
||
{videoError ? (
|
||
<div className="w-full h-full flex items-center justify-center">
|
||
<div className="text-center">
|
||
<Play size={48} className="mx-auto text-white/50 mb-3" />
|
||
<p className="text-white/70 mb-3">视频加载失败</p>
|
||
<Button
|
||
variant="secondary"
|
||
size="sm"
|
||
onClick={() => window.open(task.file.fileUrl, '_blank')}
|
||
>
|
||
<ExternalLink size={14} />
|
||
在新标签页打开
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<video
|
||
className="w-full h-full"
|
||
controls
|
||
poster={task.file.thumbnail}
|
||
onError={() => setVideoError(true)}
|
||
onPlay={() => setIsPlaying(true)}
|
||
onPause={() => setIsPlaying(false)}
|
||
>
|
||
<source src={task.file.fileUrl} type={task.file.fileType} />
|
||
您的浏览器不支持视频播放
|
||
</video>
|
||
)}
|
||
</div>
|
||
{/* 智能进度条 */}
|
||
{task.duration > 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' : marker.type === 'soft' ? 'bg-orange-500' : 'bg-accent-green'
|
||
}`}
|
||
style={{ left: `${(marker.time / task.duration) * 100}%` }}
|
||
title={`${formatTimestamp(marker.time)} - ${marker.type === 'hard' ? '硬性问题' : marker.type === 'soft' ? '舆情提示' : '卖点覆盖'}`}
|
||
/>
|
||
))}
|
||
</div>
|
||
<div className="flex justify-between text-xs text-text-tertiary mt-1">
|
||
<span>0:00</span>
|
||
<span>{formatTimestamp(task.duration)}</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>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 代理商初审意见 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<MessageSquare size={18} className="text-blue-500" />
|
||
代理商初审意见
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="flex items-start gap-4">
|
||
<div className={`p-2 rounded-full ${task.agencyReview.result === 'approved' ? 'bg-accent-green/20' : 'bg-accent-coral/20'}`}>
|
||
{task.agencyReview.result === 'approved' ? (
|
||
<CheckCircle size={20} className="text-accent-green" />
|
||
) : (
|
||
<XCircle size={20} className="text-accent-coral" />
|
||
)}
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2 mb-1">
|
||
<span className="font-medium text-text-primary">{task.agencyReview.reviewer}</span>
|
||
{task.agencyReview.result === 'approved' ? (
|
||
<SuccessTag>建议通过</SuccessTag>
|
||
) : (
|
||
<ErrorTag>建议驳回</ErrorTag>
|
||
)}
|
||
</div>
|
||
<p className="text-text-secondary text-sm">{task.agencyReview.comment || '暂无评论'}</p>
|
||
{task.agencyReview.reviewedAt && (
|
||
<p className="text-xs text-text-tertiary mt-2">{task.agencyReview.reviewedAt}</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* AI 分析总结 */}
|
||
<Card>
|
||
<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>
|
||
</div>
|
||
<p className="text-text-secondary text-sm">
|
||
{task.aiSummary || `视频整体合规，发现${task.hardViolations.length}处硬性问题和${task.sentimentWarnings.length}处舆情提示，代理商已确认处理。`}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* 右侧：AI 检查单 (2/5) */}
|
||
<div className="lg:col-span-2 space-y-4">
|
||
{/* 硬性合规 */}
|
||
<Card>
|
||
<CardHeader className="pb-2">
|
||
<CardTitle className="flex items-center gap-2 text-base">
|
||
<Shield size={16} className="text-red-500" />
|
||
硬性合规 ({task.hardViolations.length})
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-3">
|
||
{task.hardViolations.length === 0 && (
|
||
<p className="text-sm text-text-tertiary py-2">未发现硬性合规问题</p>
|
||
)}
|
||
{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>
|
||
{v.timestamp > 0 && (
|
||
<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>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 舆情雷达 */}
|
||
{task.sentimentWarnings.length > 0 && (
|
||
<Card>
|
||
<CardHeader className="pb-2">
|
||
<CardTitle className="flex items-center gap-2 text-base">
|
||
<Radio size={16} className="text-orange-500" />
|
||
舆情雷达（仅提示）
|
||
</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">
|
||
<div className="flex items-center gap-2 mb-1">
|
||
<WarningTag>{w.type}</WarningTag>
|
||
{w.timestamp > 0 && (
|
||
<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>
|
||
</div>
|
||
))}
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 卖点覆盖 */}
|
||
{task.sellingPointsCovered.length > 0 && (
|
||
<Card>
|
||
<CardHeader className="pb-2">
|
||
<CardTitle className="flex items-center gap-2 text-base">
|
||
<CheckCircle size={16} className="text-accent-green" />
|
||
卖点覆盖
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-2">
|
||
{task.sellingPointsCovered.map((sp, idx) => (
|
||
<div key={idx} className="flex items-center justify-between p-2 rounded-lg bg-bg-elevated">
|
||
<div className="flex items-center gap-2">
|
||
{sp.covered ? (
|
||
<CheckCircle size={16} className="text-accent-green" />
|
||
) : (
|
||
<XCircle size={16} className="text-accent-coral" />
|
||
)}
|
||
<span className="text-sm text-text-primary">{sp.point}</span>
|
||
</div>
|
||
{sp.covered && sp.timestamp > 0 && (
|
||
<span className="text-xs text-text-tertiary">{formatTimestamp(sp.timestamp)}</span>
|
||
)}
|
||
</div>
|
||
))}
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 底部决策栏 */}
|
||
<Card className="sticky bottom-4 shadow-lg">
|
||
<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} 个问题
|
||
</div>
|
||
<div className="flex gap-3">
|
||
<Button variant="danger" onClick={() => setShowRejectModal(true)} disabled={submitting}>
|
||
{submitting ? <Loader2 size={16} className="animate-spin mr-1" /> : null}
|
||
驳回
|
||
</Button>
|
||
<Button variant="success" onClick={() => setShowApproveModal(true)} disabled={submitting}>
|
||
{submitting ? <Loader2 size={16} className="animate-spin mr-1" /> : null}
|
||
通过
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 通过确认弹窗 */}
|
||
<ConfirmModal
|
||
isOpen={showApproveModal}
|
||
onClose={() => setShowApproveModal(false)}
|
||
onConfirm={handleApprove}
|
||
title="确认通过"
|
||
message="确定要通过此视频的审核吗？通过后达人将收到通知。"
|
||
confirmText={submitting ? '提交中...' : '确认通过'}
|
||
/>
|
||
|
||
{/* 驳回弹窗 */}
|
||
<Modal isOpen={showRejectModal} onClose={() => setShowRejectModal(false)} title="驳回审核">
|
||
<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>
|
||
))}
|
||
{Object.values(checkedViolations).filter(Boolean).length === 0 && (
|
||
<div className="text-sm text-text-tertiary">未选择任何问题</div>
|
||
)}
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-text-primary mb-1">补充说明</label>
|
||
<textarea
|
||
className="w-full h-24 p-3 border border-border-subtle rounded-lg resize-none bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
|
||
placeholder="请详细说明驳回原因..."
|
||
value={rejectReason}
|
||
onChange={(e) => setRejectReason(e.target.value)}
|
||
/>
|
||
</div>
|
||
<div className="flex gap-3 justify-end">
|
||
<Button variant="ghost" onClick={() => setShowRejectModal(false)} disabled={submitting}>取消</Button>
|
||
<Button variant="danger" onClick={handleReject} disabled={submitting}>
|
||
{submitting ? <Loader2 size={16} className="animate-spin mr-1" /> : null}
|
||
确认驳回
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
|
||
{/* 文件预览弹窗 */}
|
||
<FilePreviewModal
|
||
file={task.file}
|
||
isOpen={showFilePreview}
|
||
onClose={() => setShowFilePreview(false)}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|