feat(creator): 完成达人端前端页面开发
- 新增申诉中心页面（列表、详情、新建申诉） - 新增申诉次数管理页面（按任务显示配额，支持向代理商申请） - 新增个人中心页面（达人ID复制、菜单导航） - 新增个人信息编辑、账户设置、消息通知设置页面 - 新增帮助中心和历史记录页面 - 新增脚本提交和视频提交页面 - 优化消息中心页面（消息详情跳转） - 优化任务详情页面布局和交互 - 更新 ResponsiveLayout、Sidebar、ReviewSteps 通用组件 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Your Name
co-authored by
Claude Opus 4.5
Claude Opus 4.5
parent
1011e73643
commit
2f9b7f05fd
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,461 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useRouter, useParams, useSearchParams } from 'next/navigation'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { SuccessTag, WarningTag, ErrorTag, PendingTag } from '@/components/ui/Tag'
|
||||
import { ReviewSteps, getReviewSteps } from '@/components/ui/ReviewSteps'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Upload,
|
||||
FileText,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
AlertTriangle,
|
||||
Clock,
|
||||
Loader2,
|
||||
RefreshCw,
|
||||
Eye,
|
||||
MessageSquare
|
||||
} from 'lucide-react'
|
||||
|
||||
// 模拟任务数据
|
||||
const mockTask = {
|
||||
id: 'task-001',
|
||||
projectName: 'XX品牌618推广',
|
||||
brandName: 'XX护肤品牌',
|
||||
deadline: '2026-06-18',
|
||||
scriptStatus: 'pending_upload', // pending_upload | ai_reviewing | ai_result | agent_reviewing | agent_rejected | brand_reviewing | brand_passed | brand_rejected
|
||||
scriptFile: null as string | null,
|
||||
aiResult: null as null | {
|
||||
score: number
|
||||
violations: Array<{ type: string; content: string; suggestion: string }>
|
||||
complianceChecks: Array<{ item: string; passed: boolean; note?: string }>
|
||||
},
|
||||
agencyReview: null as null | {
|
||||
result: 'approved' | 'rejected'
|
||||
comment: string
|
||||
reviewer: string
|
||||
time: string
|
||||
},
|
||||
brandReview: null as null | {
|
||||
result: 'approved' | 'rejected'
|
||||
comment: string
|
||||
reviewer: string
|
||||
time: string
|
||||
},
|
||||
}
|
||||
|
||||
// 根据状态获取模拟数据
|
||||
function getTaskByStatus(status: string) {
|
||||
const task = { ...mockTask, scriptStatus: status }
|
||||
|
||||
if (status === 'ai_result' || status === 'agent_reviewing' || status === 'agent_rejected' || status === 'brand_reviewing' || status === 'brand_passed' || status === 'brand_rejected') {
|
||||
task.scriptFile = '夏日护肤推广脚本.docx'
|
||||
task.aiResult = {
|
||||
score: 85,
|
||||
violations: [
|
||||
{ type: '违禁词', content: '神器', suggestion: '建议替换为"好物"或"必备品"' },
|
||||
],
|
||||
complianceChecks: [
|
||||
{ item: '品牌名称正确', passed: true },
|
||||
{ item: 'SPF标注准确', passed: true },
|
||||
{ item: '无绝对化用语', passed: false, note: '"超级好用"建议修改' },
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
if (status === 'agent_rejected') {
|
||||
task.agencyReview = {
|
||||
result: 'rejected',
|
||||
comment: '违禁词未修改，请修改后重新提交。',
|
||||
reviewer: '张经理',
|
||||
time: '2026-02-06 15:30',
|
||||
}
|
||||
}
|
||||
|
||||
if (status === 'brand_reviewing' || status === 'brand_passed' || status === 'brand_rejected') {
|
||||
task.agencyReview = {
|
||||
result: 'approved',
|
||||
comment: '脚本符合要求，建议通过。',
|
||||
reviewer: '张经理',
|
||||
time: '2026-02-06 15:30',
|
||||
}
|
||||
}
|
||||
|
||||
if (status === 'brand_passed') {
|
||||
task.brandReview = {
|
||||
result: 'approved',
|
||||
comment: '脚本通过终审，可以开始拍摄视频。',
|
||||
reviewer: '品牌方审核员',
|
||||
time: '2026-02-06 18:00',
|
||||
}
|
||||
}
|
||||
|
||||
if (status === 'brand_rejected') {
|
||||
task.brandReview = {
|
||||
result: 'rejected',
|
||||
comment: '产品卖点覆盖不完整，请补充后重新提交。',
|
||||
reviewer: '品牌方审核员',
|
||||
time: '2026-02-06 18:00',
|
||||
}
|
||||
}
|
||||
|
||||
return task
|
||||
}
|
||||
|
||||
function UploadSection({ onUpload }: { onUpload: () => void }) {
|
||||
const [file, setFile] = useState<File | null>(null)
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const selectedFile = e.target.files?.[0]
|
||||
if (selectedFile) {
|
||||
setFile(selectedFile)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Upload size={18} className="text-accent-indigo" />
|
||||
上传脚本
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="border-2 border-dashed border-border-subtle rounded-lg p-8 text-center hover:border-accent-indigo/50 transition-colors">
|
||||
{file ? (
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<FileText size={24} className="text-accent-indigo" />
|
||||
<span className="text-text-primary">{file.name}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFile(null)}
|
||||
className="p-1 hover:bg-bg-elevated rounded-full"
|
||||
>
|
||||
<XCircle size={16} className="text-text-tertiary" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<label className="cursor-pointer">
|
||||
<Upload size={32} className="mx-auto text-text-tertiary mb-3" />
|
||||
<p className="text-text-secondary mb-1">点击或拖拽上传脚本文件</p>
|
||||
<p className="text-xs text-text-tertiary">支持 Word、PDF、TXT 格式</p>
|
||||
<input
|
||||
type="file"
|
||||
accept=".doc,.docx,.pdf,.txt"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
<Button onClick={onUpload} disabled={!file} fullWidth>
|
||||
提交脚本
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function AIReviewingSection() {
|
||||
const [progress, setProgress] = useState(0)
|
||||
const [logs, setLogs] = useState<string[]>(['开始解析脚本文件...'])
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setProgress(prev => {
|
||||
if (prev >= 100) {
|
||||
clearInterval(timer)
|
||||
return 100
|
||||
}
|
||||
return prev + 10
|
||||
})
|
||||
}, 500)
|
||||
|
||||
const logTimer = setTimeout(() => {
|
||||
setLogs(prev => [...prev, '正在提取文本内容...'])
|
||||
}, 1000)
|
||||
|
||||
const logTimer2 = setTimeout(() => {
|
||||
setLogs(prev => [...prev, '正在进行违禁词检测...'])
|
||||
}, 2000)
|
||||
|
||||
const logTimer3 = setTimeout(() => {
|
||||
setLogs(prev => [...prev, '正在分析卖点覆盖...'])
|
||||
}, 3000)
|
||||
|
||||
return () => {
|
||||
clearInterval(timer)
|
||||
clearTimeout(logTimer)
|
||||
clearTimeout(logTimer2)
|
||||
clearTimeout(logTimer3)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="py-8 text-center">
|
||||
<Loader2 size={48} className="mx-auto text-accent-indigo mb-4 animate-spin" />
|
||||
<h3 className="text-lg font-medium text-text-primary mb-2">AI 正在审核您的脚本</h3>
|
||||
<p className="text-text-secondary mb-4">请稍候，预计需要 1-2 分钟</p>
|
||||
<div className="w-full max-w-md mx-auto">
|
||||
<div className="h-2 bg-bg-elevated rounded-full overflow-hidden mb-2">
|
||||
<div className="h-full bg-accent-indigo transition-all" style={{ width: `${progress}%` }} />
|
||||
</div>
|
||||
<p className="text-sm text-text-tertiary">{progress}%</p>
|
||||
</div>
|
||||
<div className="mt-6 p-4 bg-bg-elevated rounded-lg text-left max-w-md mx-auto">
|
||||
<p className="text-xs text-text-tertiary mb-2">处理日志</p>
|
||||
{logs.map((log, idx) => (
|
||||
<p key={idx} className="text-sm text-text-secondary">{log}</p>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function AIResultSection({ task }: { task: ReturnType<typeof getTaskByStatus> }) {
|
||||
if (!task.aiResult) return null
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
<span className="flex items-center gap-2">
|
||||
<CheckCircle size={18} className="text-accent-green" />
|
||||
AI 审核结果
|
||||
</span>
|
||||
<span className={`text-xl font-bold ${task.aiResult.score >= 85 ? 'text-accent-green' : task.aiResult.score >= 70 ? 'text-yellow-400' : 'text-accent-coral'}`}>
|
||||
{task.aiResult.score}分
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* 违规检测 */}
|
||||
{task.aiResult.violations.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2">
|
||||
<AlertTriangle size={14} className="text-orange-500" />
|
||||
违规检测 ({task.aiResult.violations.length})
|
||||
</h4>
|
||||
{task.aiResult.violations.map((v, idx) => (
|
||||
<div key={idx} className="p-3 bg-orange-500/10 rounded-lg border border-orange-500/30 mb-2">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<WarningTag>{v.type}</WarningTag>
|
||||
</div>
|
||||
<p className="text-sm text-text-primary">「{v.content}」</p>
|
||||
<p className="text-xs text-accent-indigo mt-1">{v.suggestion}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 合规检查 */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-text-primary mb-2">合规检查</h4>
|
||||
<div className="space-y-2">
|
||||
{task.aiResult.complianceChecks.map((check, idx) => (
|
||||
<div key={idx} className="flex items-start gap-2 p-2 rounded-lg bg-bg-elevated">
|
||||
{check.passed ? (
|
||||
<CheckCircle size={16} className="text-accent-green flex-shrink-0 mt-0.5" />
|
||||
) : (
|
||||
<XCircle size={16} className="text-accent-coral flex-shrink-0 mt-0.5" />
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<span className="text-sm text-text-primary">{check.item}</span>
|
||||
{check.note && <p className="text-xs text-text-tertiary mt-0.5">{check.note}</p>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function ReviewFeedbackSection({ review, type }: { review: NonNullable<typeof mockTask.agencyReview>; type: 'agency' | 'brand' }) {
|
||||
const isApproved = review.result === 'approved'
|
||||
const title = type === 'agency' ? '代理商审核意见' : '品牌方终审意见'
|
||||
|
||||
return (
|
||||
<Card className={isApproved ? 'border-accent-green/30' : 'border-accent-coral/30'}>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
{isApproved ? (
|
||||
<CheckCircle size={18} className="text-accent-green" />
|
||||
) : (
|
||||
<XCircle size={18} className="text-accent-coral" />
|
||||
)}
|
||||
{title}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="font-medium text-text-primary">{review.reviewer}</span>
|
||||
{isApproved ? <SuccessTag>通过</SuccessTag> : <ErrorTag>驳回</ErrorTag>}
|
||||
</div>
|
||||
<p className="text-text-secondary">{review.comment}</p>
|
||||
<p className="text-xs text-text-tertiary mt-2">{review.time}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function WaitingSection({ message }: { message: string }) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="py-8 text-center">
|
||||
<Clock size={48} className="mx-auto text-accent-indigo mb-4" />
|
||||
<h3 className="text-lg font-medium text-text-primary mb-2">{message}</h3>
|
||||
<p className="text-text-secondary">请耐心等待，审核结果将通过消息通知您</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function SuccessSection({ onContinue }: { onContinue: () => void }) {
|
||||
return (
|
||||
<Card className="border-accent-green/30">
|
||||
<CardContent className="py-8 text-center">
|
||||
<CheckCircle size={48} className="mx-auto text-accent-green mb-4" />
|
||||
<h3 className="text-lg font-medium text-text-primary mb-2">脚本审核通过！</h3>
|
||||
<p className="text-text-secondary mb-6">您可以开始拍摄视频了</p>
|
||||
<Button onClick={onContinue}>
|
||||
上传视频
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default function CreatorScriptPage() {
|
||||
const router = useRouter()
|
||||
const params = useParams()
|
||||
const searchParams = useSearchParams()
|
||||
const status = searchParams.get('status') || 'pending_upload'
|
||||
|
||||
const [task, setTask] = useState(getTaskByStatus(status))
|
||||
|
||||
// 模拟状态切换
|
||||
const simulateUpload = () => {
|
||||
setTask(getTaskByStatus('ai_reviewing'))
|
||||
setTimeout(() => {
|
||||
setTask(getTaskByStatus('ai_result'))
|
||||
}, 4000)
|
||||
}
|
||||
|
||||
const handleResubmit = () => {
|
||||
setTask(getTaskByStatus('pending_upload'))
|
||||
}
|
||||
|
||||
const handleContinueToVideo = () => {
|
||||
router.push(`/creator/task/${params.id}/video`)
|
||||
}
|
||||
|
||||
const getStatusDisplay = () => {
|
||||
switch (task.scriptStatus) {
|
||||
case 'pending_upload': return '待上传脚本'
|
||||
case 'ai_reviewing': return 'AI 审核中'
|
||||
case 'ai_result': return 'AI 审核完成'
|
||||
case 'agent_reviewing': return '代理商审核中'
|
||||
case 'agent_rejected': return '代理商驳回'
|
||||
case 'brand_reviewing': return '品牌方终审中'
|
||||
case 'brand_passed': return '审核通过'
|
||||
case 'brand_rejected': return '品牌方驳回'
|
||||
default: return '未知状态'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-2xl mx-auto">
|
||||
{/* 顶部导航 */}
|
||||
<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">
|
||||
<h1 className="text-xl font-bold text-text-primary">{task.projectName}</h1>
|
||||
<p className="text-sm text-text-secondary">脚本阶段 · {getStatusDisplay()}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 审核流程进度条 */}
|
||||
<Card>
|
||||
<CardContent className="py-4">
|
||||
<ReviewSteps steps={getReviewSteps(task.scriptStatus)} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 根据状态显示不同内容 */}
|
||||
{task.scriptStatus === 'pending_upload' && (
|
||||
<UploadSection onUpload={simulateUpload} />
|
||||
)}
|
||||
|
||||
{task.scriptStatus === 'ai_reviewing' && (
|
||||
<AIReviewingSection />
|
||||
)}
|
||||
|
||||
{task.scriptStatus === 'ai_result' && (
|
||||
<>
|
||||
<AIResultSection task={task} />
|
||||
<WaitingSection message="等待代理商审核" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{task.scriptStatus === 'agent_reviewing' && (
|
||||
<>
|
||||
<AIResultSection task={task} />
|
||||
<WaitingSection message="等待代理商审核" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{task.scriptStatus === 'agent_rejected' && task.agencyReview && (
|
||||
<>
|
||||
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
|
||||
<AIResultSection task={task} />
|
||||
<div className="flex gap-3">
|
||||
<Button variant="secondary" onClick={handleResubmit} fullWidth>
|
||||
<RefreshCw size={16} />
|
||||
重新上传
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{task.scriptStatus === 'brand_reviewing' && task.agencyReview && (
|
||||
<>
|
||||
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
|
||||
<AIResultSection task={task} />
|
||||
<WaitingSection message="等待品牌方终审" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{task.scriptStatus === 'brand_passed' && task.agencyReview && task.brandReview && (
|
||||
<>
|
||||
<SuccessSection onContinue={handleContinueToVideo} />
|
||||
<ReviewFeedbackSection review={task.brandReview} type="brand" />
|
||||
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
|
||||
<AIResultSection task={task} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{task.scriptStatus === 'brand_rejected' && task.agencyReview && task.brandReview && (
|
||||
<>
|
||||
<ReviewFeedbackSection review={task.brandReview} type="brand" />
|
||||
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
|
||||
<AIResultSection task={task} />
|
||||
<div className="flex gap-3">
|
||||
<Button variant="secondary" onClick={handleResubmit} fullWidth>
|
||||
<RefreshCw size={16} />
|
||||
重新上传
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,534 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useRouter, useParams, useSearchParams } from 'next/navigation'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { SuccessTag, WarningTag, ErrorTag, PendingTag } from '@/components/ui/Tag'
|
||||
import { ReviewSteps, getReviewSteps } from '@/components/ui/ReviewSteps'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Upload,
|
||||
Video,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
AlertTriangle,
|
||||
Clock,
|
||||
Loader2,
|
||||
RefreshCw,
|
||||
Play,
|
||||
Radio,
|
||||
Shield
|
||||
} from 'lucide-react'
|
||||
|
||||
// 模拟任务数据
|
||||
const mockTask = {
|
||||
id: 'task-001',
|
||||
projectName: 'XX品牌618推广',
|
||||
brandName: 'XX护肤品牌',
|
||||
deadline: '2026-06-18',
|
||||
videoStatus: 'pending_upload', // pending_upload | ai_reviewing | ai_result | agent_reviewing | agent_rejected | brand_reviewing | brand_passed | brand_rejected
|
||||
videoFile: null as string | null,
|
||||
aiResult: null as null | {
|
||||
score: number
|
||||
hardViolations: Array<{ type: string; content: string; timestamp: number; suggestion: string }>
|
||||
sentimentWarnings: Array<{ type: string; content: string; timestamp: number }>
|
||||
sellingPointsCovered: Array<{ point: string; covered: boolean; timestamp?: number }>
|
||||
},
|
||||
agencyReview: null as null | {
|
||||
result: 'approved' | 'rejected'
|
||||
comment: string
|
||||
reviewer: string
|
||||
time: string
|
||||
},
|
||||
brandReview: null as null | {
|
||||
result: 'approved' | 'rejected'
|
||||
comment: string
|
||||
reviewer: string
|
||||
time: string
|
||||
},
|
||||
}
|
||||
|
||||
// 根据状态获取模拟数据
|
||||
function getTaskByStatus(status: string) {
|
||||
const task = { ...mockTask, videoStatus: status }
|
||||
|
||||
if (status === 'ai_result' || status === 'agent_reviewing' || status === 'agent_rejected' || status === 'brand_reviewing' || status === 'brand_passed' || status === 'brand_rejected') {
|
||||
task.videoFile = '夏日护肤推广.mp4'
|
||||
task.aiResult = {
|
||||
score: 85,
|
||||
hardViolations: [
|
||||
{ type: '违禁词', content: '效果最好', timestamp: 15.5, suggestion: '建议替换为"效果显著"' },
|
||||
],
|
||||
sentimentWarnings: [
|
||||
{ type: '表情预警', content: '表情过于夸张', timestamp: 42.0 },
|
||||
],
|
||||
sellingPointsCovered: [
|
||||
{ point: 'SPF50+ PA++++', covered: true, timestamp: 25.0 },
|
||||
{ point: '轻薄质地', covered: true, timestamp: 38.0 },
|
||||
{ point: '不油腻', covered: true, timestamp: 52.0 },
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
if (status === 'agent_rejected') {
|
||||
task.agencyReview = {
|
||||
result: 'rejected',
|
||||
comment: '视频中有竞品Logo露出，请重新拍摄。',
|
||||
reviewer: '张经理',
|
||||
time: '2026-02-06 16:30',
|
||||
}
|
||||
}
|
||||
|
||||
if (status === 'brand_reviewing' || status === 'brand_passed' || status === 'brand_rejected') {
|
||||
task.agencyReview = {
|
||||
result: 'approved',
|
||||
comment: '视频质量良好，建议通过。',
|
||||
reviewer: '张经理',
|
||||
time: '2026-02-06 16:30',
|
||||
}
|
||||
}
|
||||
|
||||
if (status === 'brand_passed') {
|
||||
task.brandReview = {
|
||||
result: 'approved',
|
||||
comment: '视频通过终审，可以发布。',
|
||||
reviewer: '品牌方审核员',
|
||||
time: '2026-02-06 19:00',
|
||||
}
|
||||
}
|
||||
|
||||
if (status === 'brand_rejected') {
|
||||
task.brandReview = {
|
||||
result: 'rejected',
|
||||
comment: '产品特写时间不足，请补拍。',
|
||||
reviewer: '品牌方审核员',
|
||||
time: '2026-02-06 19:00',
|
||||
}
|
||||
}
|
||||
|
||||
return task
|
||||
}
|
||||
|
||||
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 UploadSection({ onUpload }: { onUpload: () => void }) {
|
||||
const [file, setFile] = useState<File | null>(null)
|
||||
const [uploadProgress, setUploadProgress] = useState(0)
|
||||
const [isUploading, setIsUploading] = useState(false)
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const selectedFile = e.target.files?.[0]
|
||||
if (selectedFile) {
|
||||
setFile(selectedFile)
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpload = () => {
|
||||
setIsUploading(true)
|
||||
const timer = setInterval(() => {
|
||||
setUploadProgress(prev => {
|
||||
if (prev >= 100) {
|
||||
clearInterval(timer)
|
||||
setTimeout(onUpload, 500)
|
||||
return 100
|
||||
}
|
||||
return prev + 10
|
||||
})
|
||||
}, 200)
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Upload size={18} className="text-purple-400" />
|
||||
上传视频
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="border-2 border-dashed border-border-subtle rounded-lg p-8 text-center hover:border-accent-indigo/50 transition-colors">
|
||||
{file ? (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<Video size={24} className="text-purple-400" />
|
||||
<span className="text-text-primary">{file.name}</span>
|
||||
{!isUploading && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFile(null)}
|
||||
className="p-1 hover:bg-bg-elevated rounded-full"
|
||||
>
|
||||
<XCircle size={16} className="text-text-tertiary" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{isUploading && (
|
||||
<div className="w-full max-w-xs mx-auto">
|
||||
<div className="h-2 bg-bg-elevated rounded-full overflow-hidden mb-2">
|
||||
<div className="h-full bg-accent-indigo transition-all" style={{ width: `${uploadProgress}%` }} />
|
||||
</div>
|
||||
<p className="text-sm text-text-tertiary">上传中 {uploadProgress}%</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<label className="cursor-pointer">
|
||||
<Upload size={32} className="mx-auto text-text-tertiary mb-3" />
|
||||
<p className="text-text-secondary mb-1">点击或拖拽上传视频文件</p>
|
||||
<p className="text-xs text-text-tertiary">支持 MP4、MOV、AVI 格式，最大 500MB</p>
|
||||
<input
|
||||
type="file"
|
||||
accept="video/*"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
<Button onClick={handleUpload} disabled={!file || isUploading} fullWidth>
|
||||
{isUploading ? '上传中...' : '提交视频'}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function AIReviewingSection() {
|
||||
const [progress, setProgress] = useState(0)
|
||||
const [currentStep, setCurrentStep] = useState('正在解析视频...')
|
||||
|
||||
useEffect(() => {
|
||||
const steps = [
|
||||
'正在解析视频...',
|
||||
'正在提取音频转文字...',
|
||||
'正在分析画面内容...',
|
||||
'正在检测违禁内容...',
|
||||
'正在分析卖点覆盖...',
|
||||
'正在生成审核报告...',
|
||||
]
|
||||
let stepIndex = 0
|
||||
|
||||
const timer = setInterval(() => {
|
||||
setProgress(prev => {
|
||||
if (prev >= 100) {
|
||||
clearInterval(timer)
|
||||
return 100
|
||||
}
|
||||
return prev + 5
|
||||
})
|
||||
}, 300)
|
||||
|
||||
const stepTimer = setInterval(() => {
|
||||
stepIndex = (stepIndex + 1) % steps.length
|
||||
setCurrentStep(steps[stepIndex])
|
||||
}, 1500)
|
||||
|
||||
return () => {
|
||||
clearInterval(timer)
|
||||
clearInterval(stepTimer)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="py-8 text-center">
|
||||
<Loader2 size={48} className="mx-auto text-purple-400 mb-4 animate-spin" />
|
||||
<h3 className="text-lg font-medium text-text-primary mb-2">AI 正在审核您的视频</h3>
|
||||
<p className="text-text-secondary mb-4">请稍候，视频审核可能需要 3-5 分钟</p>
|
||||
<div className="w-full max-w-md mx-auto">
|
||||
<div className="h-2 bg-bg-elevated rounded-full overflow-hidden mb-2">
|
||||
<div className="h-full bg-purple-400 transition-all" style={{ width: `${progress}%` }} />
|
||||
</div>
|
||||
<p className="text-sm text-text-tertiary">{progress}%</p>
|
||||
</div>
|
||||
<div className="mt-4 p-3 bg-bg-elevated rounded-lg max-w-md mx-auto">
|
||||
<p className="text-sm text-text-secondary">{currentStep}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function AIResultSection({ task }: { task: ReturnType<typeof getTaskByStatus> }) {
|
||||
if (!task.aiResult) return null
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* AI 评分 */}
|
||||
<Card>
|
||||
<CardContent className="py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-text-secondary">AI 综合评分</span>
|
||||
<span className={`text-3xl font-bold ${task.aiResult.score >= 85 ? 'text-accent-green' : task.aiResult.score >= 70 ? 'text-yellow-400' : 'text-accent-coral'}`}>
|
||||
{task.aiResult.score}
|
||||
</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 硬性合规 */}
|
||||
{task.aiResult.hardViolations.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Shield size={16} className="text-red-500" />
|
||||
硬性合规 ({task.aiResult.hardViolations.length})
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
{task.aiResult.hardViolations.map((v, idx) => (
|
||||
<div key={idx} className="p-3 bg-accent-coral/10 rounded-lg border border-accent-coral/30">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<ErrorTag>{v.type}</ErrorTag>
|
||||
<span className="text-xs text-text-tertiary">{formatTimestamp(v.timestamp)}</span>
|
||||
</div>
|
||||
<p className="text-sm text-text-primary">「{v.content}」</p>
|
||||
<p className="text-xs text-accent-indigo mt-1">{v.suggestion}</p>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 舆情雷达 */}
|
||||
{task.aiResult.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.aiResult.sentimentWarnings.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>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 卖点覆盖 */}
|
||||
<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.aiResult.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 && (
|
||||
<span className="text-xs text-text-tertiary">{formatTimestamp(sp.timestamp)}</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ReviewFeedbackSection({ review, type }: { review: NonNullable<typeof mockTask.agencyReview>; type: 'agency' | 'brand' }) {
|
||||
const isApproved = review.result === 'approved'
|
||||
const title = type === 'agency' ? '代理商审核意见' : '品牌方终审意见'
|
||||
|
||||
return (
|
||||
<Card className={isApproved ? 'border-accent-green/30' : 'border-accent-coral/30'}>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
{isApproved ? (
|
||||
<CheckCircle size={18} className="text-accent-green" />
|
||||
) : (
|
||||
<XCircle size={18} className="text-accent-coral" />
|
||||
)}
|
||||
{title}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="font-medium text-text-primary">{review.reviewer}</span>
|
||||
{isApproved ? <SuccessTag>通过</SuccessTag> : <ErrorTag>驳回</ErrorTag>}
|
||||
</div>
|
||||
<p className="text-text-secondary">{review.comment}</p>
|
||||
<p className="text-xs text-text-tertiary mt-2">{review.time}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function WaitingSection({ message }: { message: string }) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="py-8 text-center">
|
||||
<Clock size={48} className="mx-auto text-accent-indigo mb-4" />
|
||||
<h3 className="text-lg font-medium text-text-primary mb-2">{message}</h3>
|
||||
<p className="text-text-secondary">请耐心等待，审核结果将通过消息通知您</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function SuccessSection() {
|
||||
return (
|
||||
<Card className="border-accent-green/30">
|
||||
<CardContent className="py-8 text-center">
|
||||
<CheckCircle size={64} className="mx-auto text-accent-green mb-4" />
|
||||
<h3 className="text-xl font-bold text-text-primary mb-2">🎉 视频审核通过！</h3>
|
||||
<p className="text-text-secondary mb-6">恭喜您，视频已通过所有审核，可以发布了</p>
|
||||
<div className="flex justify-center gap-3">
|
||||
<Button variant="secondary">
|
||||
<Play size={16} />
|
||||
预览视频
|
||||
</Button>
|
||||
<Button>
|
||||
分享链接
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default function CreatorVideoPage() {
|
||||
const router = useRouter()
|
||||
const params = useParams()
|
||||
const searchParams = useSearchParams()
|
||||
const status = searchParams.get('status') || 'pending_upload'
|
||||
|
||||
const [task, setTask] = useState(getTaskByStatus(status))
|
||||
|
||||
// 模拟状态切换
|
||||
const simulateUpload = () => {
|
||||
setTask(getTaskByStatus('ai_reviewing'))
|
||||
setTimeout(() => {
|
||||
setTask(getTaskByStatus('ai_result'))
|
||||
}, 5000)
|
||||
}
|
||||
|
||||
const handleResubmit = () => {
|
||||
setTask(getTaskByStatus('pending_upload'))
|
||||
}
|
||||
|
||||
const getStatusDisplay = () => {
|
||||
switch (task.videoStatus) {
|
||||
case 'pending_upload': return '待上传视频'
|
||||
case 'ai_reviewing': return 'AI 审核中'
|
||||
case 'ai_result': return 'AI 审核完成'
|
||||
case 'agent_reviewing': return '代理商审核中'
|
||||
case 'agent_rejected': return '代理商驳回'
|
||||
case 'brand_reviewing': return '品牌方终审中'
|
||||
case 'brand_passed': return '审核通过'
|
||||
case 'brand_rejected': return '品牌方驳回'
|
||||
default: return '未知状态'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-2xl mx-auto">
|
||||
{/* 顶部导航 */}
|
||||
<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">
|
||||
<h1 className="text-xl font-bold text-text-primary">{task.projectName}</h1>
|
||||
<p className="text-sm text-text-secondary">视频阶段 · {getStatusDisplay()}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 审核流程进度条 */}
|
||||
<Card>
|
||||
<CardContent className="py-4">
|
||||
<ReviewSteps steps={getReviewSteps(task.videoStatus)} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 根据状态显示不同内容 */}
|
||||
{task.videoStatus === 'pending_upload' && (
|
||||
<UploadSection onUpload={simulateUpload} />
|
||||
)}
|
||||
|
||||
{task.videoStatus === 'ai_reviewing' && (
|
||||
<AIReviewingSection />
|
||||
)}
|
||||
|
||||
{task.videoStatus === 'ai_result' && (
|
||||
<>
|
||||
<AIResultSection task={task} />
|
||||
<WaitingSection message="等待代理商审核" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{task.videoStatus === 'agent_reviewing' && (
|
||||
<>
|
||||
<AIResultSection task={task} />
|
||||
<WaitingSection message="等待代理商审核" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{task.videoStatus === 'agent_rejected' && task.agencyReview && (
|
||||
<>
|
||||
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
|
||||
<AIResultSection task={task} />
|
||||
<div className="flex gap-3">
|
||||
<Button variant="secondary" onClick={handleResubmit} fullWidth>
|
||||
<RefreshCw size={16} />
|
||||
重新上传
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{task.videoStatus === 'brand_reviewing' && task.agencyReview && (
|
||||
<>
|
||||
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
|
||||
<AIResultSection task={task} />
|
||||
<WaitingSection message="等待品牌方终审" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{task.videoStatus === 'brand_passed' && task.agencyReview && task.brandReview && (
|
||||
<>
|
||||
<SuccessSection />
|
||||
<ReviewFeedbackSection review={task.brandReview} type="brand" />
|
||||
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
|
||||
<AIResultSection task={task} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{task.videoStatus === 'brand_rejected' && task.agencyReview && task.brandReview && (
|
||||
<>
|
||||
<ReviewFeedbackSection review={task.brandReview} type="brand" />
|
||||
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
|
||||
<AIResultSection task={task} />
|
||||
<div className="flex gap-3">
|
||||
<Button variant="secondary" onClick={handleResubmit} fullWidth>
|
||||
<RefreshCw size={16} />
|
||||
重新上传
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user