feat: 前端全面对接后端 API（Phase 1 完成）
- 新增基础设施：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
parent
4a3c7e7923
commit
54eaa54966
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
'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 { Card, CardContent } from '@/components/ui/Card'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { Input } from '@/components/ui/Input'
|
||||
import { SuccessTag, PendingTag, WarningTag } from '@/components/ui/Tag'
|
||||
import { Modal } from '@/components/ui/Modal'
|
||||
import {
|
||||
@ -16,123 +15,65 @@ import {
|
||||
ChevronRight,
|
||||
Calendar,
|
||||
Users,
|
||||
Pencil
|
||||
Pencil,
|
||||
Loader2
|
||||
} from 'lucide-react'
|
||||
import { api } from '@/lib/api'
|
||||
import { USE_MOCK } from '@/contexts/AuthContext'
|
||||
import { useSSE } from '@/contexts/SSEContext'
|
||||
import { useToast } from '@/components/ui/Toast'
|
||||
import type { ProjectResponse } from '@/types/project'
|
||||
|
||||
// 平台选项 - 抖音用青色(品牌渐变色之一)，深色主题下更清晰
|
||||
const platformOptions = [
|
||||
{ id: 'douyin', name: '抖音', icon: '🎵', bgColor: 'bg-[#25F4EE]/15', textColor: 'text-[#25F4EE]', borderColor: 'border-[#25F4EE]/30' },
|
||||
{ id: 'xiaohongshu', name: '小红书', icon: '📕', bgColor: 'bg-[#fe2c55]/15', textColor: 'text-[#fe2c55]', borderColor: 'border-[#fe2c55]/30' },
|
||||
{ id: 'bilibili', name: 'B站', icon: '📺', bgColor: 'bg-[#00a1d6]/15', textColor: 'text-[#00a1d6]', borderColor: 'border-[#00a1d6]/30' },
|
||||
{ id: 'kuaishou', name: '快手', icon: '⚡', bgColor: 'bg-[#ff4906]/15', textColor: 'text-[#ff4906]', borderColor: 'border-[#ff4906]/30' },
|
||||
{ id: 'weibo', name: '微博', icon: '🔴', bgColor: 'bg-[#e6162d]/15', textColor: 'text-[#e6162d]', borderColor: 'border-[#e6162d]/30' },
|
||||
{ id: 'wechat', name: '微信视频号', icon: '💬', bgColor: 'bg-[#07c160]/15', textColor: 'text-[#07c160]', borderColor: 'border-[#07c160]/30' },
|
||||
]
|
||||
|
||||
// 项目类型定义
|
||||
interface Project {
|
||||
id: string
|
||||
name: string
|
||||
status: string
|
||||
platform: string
|
||||
deadline: string
|
||||
scriptCount: { total: number; passed: number; pending: number; rejected: number }
|
||||
videoCount: { total: number; passed: number; pending: number; rejected: number }
|
||||
agencyCount: number
|
||||
creatorCount: number
|
||||
}
|
||||
|
||||
// 模拟项目数据
|
||||
const initialProjects: Project[] = [
|
||||
// ==================== Mock 数据 ====================
|
||||
const mockProjects: ProjectResponse[] = [
|
||||
{
|
||||
id: 'proj-001',
|
||||
name: 'XX品牌618推广',
|
||||
status: 'active',
|
||||
platform: 'douyin',
|
||||
deadline: '2026-06-18',
|
||||
scriptCount: { total: 20, passed: 15, pending: 3, rejected: 2 },
|
||||
videoCount: { total: 20, passed: 12, pending: 5, rejected: 3 },
|
||||
agencyCount: 3,
|
||||
creatorCount: 15,
|
||||
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-02-01T00:00:00Z', updated_at: '2026-02-05T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'proj-002',
|
||||
name: '新品口红系列',
|
||||
status: 'active',
|
||||
platform: 'xiaohongshu',
|
||||
deadline: '2026-03-15',
|
||||
scriptCount: { total: 12, passed: 10, pending: 1, rejected: 1 },
|
||||
videoCount: { total: 12, passed: 8, pending: 3, rejected: 1 },
|
||||
agencyCount: 2,
|
||||
creatorCount: 8,
|
||||
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: '护肤品秋季活动',
|
||||
status: 'completed',
|
||||
platform: 'bilibili',
|
||||
deadline: '2025-11-30',
|
||||
scriptCount: { total: 15, passed: 15, pending: 0, rejected: 0 },
|
||||
videoCount: { total: 15, passed: 15, pending: 0, rejected: 0 },
|
||||
agencyCount: 2,
|
||||
creatorCount: 10,
|
||||
id: 'proj-003', name: '护肤品秋季活动', brand_id: 'br-001', brand_name: 'XX品牌',
|
||||
status: 'completed', deadline: '2025-11-30', agencies: [],
|
||||
task_count: 15, created_at: '2025-08-01T00:00:00Z', updated_at: '2025-11-30T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'proj-004',
|
||||
name: '双11预热活动',
|
||||
status: 'active',
|
||||
platform: 'kuaishou',
|
||||
deadline: '2026-11-11',
|
||||
scriptCount: { total: 18, passed: 8, pending: 6, rejected: 4 },
|
||||
videoCount: { total: 18, passed: 5, pending: 10, rejected: 3 },
|
||||
agencyCount: 4,
|
||||
creatorCount: 20,
|
||||
id: 'proj-004', name: '双11预热活动', brand_id: 'br-001', brand_name: 'XX品牌',
|
||||
status: 'active', deadline: '2026-11-11', agencies: [],
|
||||
task_count: 18, created_at: '2026-01-10T00:00:00Z', updated_at: '2026-02-04T00:00:00Z',
|
||||
},
|
||||
]
|
||||
|
||||
// 获取平台信息
|
||||
function getPlatformInfo(platformId: string) {
|
||||
return platformOptions.find(p => p.id === platformId)
|
||||
}
|
||||
// ==================== 组件 ====================
|
||||
|
||||
function StatusTag({ status }: { status: string }) {
|
||||
if (status === 'active') return <SuccessTag>进行中</SuccessTag>
|
||||
if (status === 'completed') return <PendingTag>已完成</PendingTag>
|
||||
if (status === 'archived') return <WarningTag>已归档</WarningTag>
|
||||
return <WarningTag>暂停</WarningTag>
|
||||
}
|
||||
|
||||
function ProjectCard({ project, onEditDeadline }: { project: Project; onEditDeadline: (project: Project) => void }) {
|
||||
const scriptProgress = Math.round((project.scriptCount.passed / project.scriptCount.total) * 100)
|
||||
const videoProgress = Math.round((project.videoCount.passed / project.videoCount.total) * 100)
|
||||
const platform = getPlatformInfo(project.platform)
|
||||
|
||||
function ProjectCard({ project, onEditDeadline }: { project: ProjectResponse; onEditDeadline: (project: ProjectResponse) => void }) {
|
||||
return (
|
||||
<Link href={`/brand/projects/${project.id}`}>
|
||||
<Card className="hover:border-accent-indigo/50 transition-colors cursor-pointer h-full overflow-hidden">
|
||||
{/* 平台顶部条 */}
|
||||
{platform && (
|
||||
<div className={`px-6 py-2 ${platform.bgColor} border-b ${platform.borderColor} flex items-center justify-between`}>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-base">{platform.icon}</span>
|
||||
<span className={`text-sm font-medium ${platform.textColor}`}>{platform.name}</span>
|
||||
</div>
|
||||
<StatusTag status={project.status} />
|
||||
</div>
|
||||
)}
|
||||
<div className="px-6 py-2 bg-accent-indigo/10 border-b border-accent-indigo/20 flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-accent-indigo">{project.brand_name || '品牌项目'}</span>
|
||||
<StatusTag status={project.status} />
|
||||
</div>
|
||||
<CardContent className="p-6 space-y-4">
|
||||
{/* 项目头部 */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-text-primary truncate">{project.name}</h3>
|
||||
<div className="flex items-center gap-2 mt-1 text-sm text-text-secondary">
|
||||
<Calendar size={14} />
|
||||
<span>截止 {project.deadline}</span>
|
||||
<span>截止 {project.deadline ? new Date(project.deadline).toLocaleDateString('zh-CN') : '未设置'}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
onEditDeadline(project)
|
||||
}}
|
||||
onClick={(e) => { e.preventDefault(); e.stopPropagation(); onEditDeadline(project) }}
|
||||
className="p-1 rounded hover:bg-bg-page transition-colors"
|
||||
title="修改截止日期"
|
||||
>
|
||||
@ -141,62 +82,14 @@ function ProjectCard({ project, onEditDeadline }: { project: Project; onEditDead
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 脚本进度 */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between text-sm mb-2">
|
||||
<span className="flex items-center gap-2 text-text-secondary">
|
||||
<FileText size={14} />
|
||||
脚本审核
|
||||
</span>
|
||||
<span className="text-text-primary font-medium">
|
||||
{project.scriptCount.passed}/{project.scriptCount.total}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 bg-bg-elevated rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-accent-green transition-all"
|
||||
style={{ width: `${scriptProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-4 mt-1 text-xs text-text-tertiary">
|
||||
<span>通过 {project.scriptCount.passed}</span>
|
||||
<span>待审 {project.scriptCount.pending}</span>
|
||||
<span>驳回 {project.scriptCount.rejected}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm text-text-secondary">
|
||||
<span>{project.task_count} 个任务</span>
|
||||
<span>{project.agencies.length} 个代理商</span>
|
||||
</div>
|
||||
|
||||
{/* 视频进度 */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between text-sm mb-2">
|
||||
<span className="flex items-center gap-2 text-text-secondary">
|
||||
<Video size={14} />
|
||||
视频审核
|
||||
</span>
|
||||
<span className="text-text-primary font-medium">
|
||||
{project.videoCount.passed}/{project.videoCount.total}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 bg-bg-elevated rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-accent-indigo transition-all"
|
||||
style={{ width: `${videoProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-4 mt-1 text-xs text-text-tertiary">
|
||||
<span>通过 {project.videoCount.passed}</span>
|
||||
<span>待审 {project.videoCount.pending}</span>
|
||||
<span>驳回 {project.videoCount.rejected}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 参与方统计 */}
|
||||
<div className="flex items-center justify-between pt-4 border-t border-border-subtle">
|
||||
<div className="flex items-center gap-4 text-sm text-text-secondary">
|
||||
<span className="flex items-center gap-1">
|
||||
<Users size={14} />
|
||||
{project.agencyCount} 代理商
|
||||
</span>
|
||||
<span>{project.creatorCount} 达人</span>
|
||||
<div className="text-xs text-text-tertiary">
|
||||
创建于 {new Date(project.created_at).toLocaleDateString('zh-CN')}
|
||||
</div>
|
||||
<ChevronRight size={16} className="text-text-tertiary" />
|
||||
</div>
|
||||
@ -206,46 +99,99 @@ function ProjectCard({ project, onEditDeadline }: { project: Project; onEditDead
|
||||
)
|
||||
}
|
||||
|
||||
function ProjectsSkeleton() {
|
||||
return (
|
||||
<div className="space-y-6 animate-pulse">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="h-8 w-32 bg-bg-elevated rounded" />
|
||||
<div className="h-10 w-28 bg-bg-elevated rounded" />
|
||||
</div>
|
||||
<div className="h-10 w-full max-w-md bg-bg-elevated rounded-lg" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[1, 2, 3, 4].map(i => (
|
||||
<div key={i} className="h-56 bg-bg-elevated rounded-xl" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function BrandProjectsPage() {
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [statusFilter, setStatusFilter] = useState<string>('all')
|
||||
const [platformFilter, setPlatformFilter] = useState<string>('all')
|
||||
const [projects, setProjects] = useState<Project[]>(initialProjects)
|
||||
const [projects, setProjects] = useState<ProjectResponse[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const toast = useToast()
|
||||
const { subscribe } = useSSE()
|
||||
|
||||
// 编辑截止日期相关状态
|
||||
// 编辑截止日期
|
||||
const [showDeadlineModal, setShowDeadlineModal] = useState(false)
|
||||
const [editingProject, setEditingProject] = useState<Project | null>(null)
|
||||
const [editingProject, setEditingProject] = useState<ProjectResponse | null>(null)
|
||||
const [newDeadline, setNewDeadline] = useState('')
|
||||
|
||||
// 打开编辑截止日期弹窗
|
||||
const handleEditDeadline = (project: Project) => {
|
||||
const loadProjects = useCallback(async () => {
|
||||
if (USE_MOCK) {
|
||||
setProjects(mockProjects)
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const statusParam = statusFilter !== 'all' ? statusFilter : undefined
|
||||
const data = await api.listProjects(1, 50, statusParam)
|
||||
setProjects(data.items)
|
||||
} catch (err) {
|
||||
console.error('Failed to load projects:', err)
|
||||
toast.error('加载项目列表失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [statusFilter, toast])
|
||||
|
||||
useEffect(() => {
|
||||
loadProjects()
|
||||
}, [loadProjects])
|
||||
|
||||
useEffect(() => {
|
||||
const unsub = subscribe('task_updated', () => loadProjects())
|
||||
return unsub
|
||||
}, [subscribe, loadProjects])
|
||||
|
||||
const handleEditDeadline = (project: ProjectResponse) => {
|
||||
setEditingProject(project)
|
||||
setNewDeadline(project.deadline)
|
||||
setNewDeadline(project.deadline || '')
|
||||
setShowDeadlineModal(true)
|
||||
}
|
||||
|
||||
// 保存截止日期
|
||||
const handleSaveDeadline = () => {
|
||||
const handleSaveDeadline = async () => {
|
||||
if (!editingProject || !newDeadline) return
|
||||
|
||||
setProjects(prev => prev.map(p =>
|
||||
p.id === editingProject.id ? { ...p, deadline: newDeadline } : p
|
||||
))
|
||||
try {
|
||||
if (!USE_MOCK) {
|
||||
await api.updateProject(editingProject.id, { deadline: newDeadline })
|
||||
}
|
||||
setProjects(prev => prev.map(p =>
|
||||
p.id === editingProject.id ? { ...p, deadline: newDeadline } : p
|
||||
))
|
||||
toast.success('截止日期已更新')
|
||||
} catch (err) {
|
||||
console.error('Failed to update deadline:', err)
|
||||
toast.error('更新失败')
|
||||
}
|
||||
setShowDeadlineModal(false)
|
||||
setEditingProject(null)
|
||||
setNewDeadline('')
|
||||
}
|
||||
|
||||
if (loading) return <ProjectsSkeleton />
|
||||
|
||||
const filteredProjects = projects.filter(project => {
|
||||
const matchesSearch = project.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
const matchesStatus = statusFilter === 'all' || project.status === statusFilter
|
||||
const matchesPlatform = platformFilter === 'all' || project.platform === platformFilter
|
||||
return matchesSearch && matchesStatus && matchesPlatform
|
||||
return matchesSearch && matchesStatus
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 页面标题和操作 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-text-primary">项目看板</h1>
|
||||
@ -259,7 +205,6 @@ export default function BrandProjectsPage() {
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* 搜索和筛选 */}
|
||||
<div className="flex items-center gap-4 flex-wrap">
|
||||
<div className="relative flex-1 max-w-md">
|
||||
<Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary" />
|
||||
@ -273,16 +218,6 @@ export default function BrandProjectsPage() {
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Filter size={16} className="text-text-tertiary" />
|
||||
<select
|
||||
value={platformFilter}
|
||||
onChange={(e) => setPlatformFilter(e.target.value)}
|
||||
className="px-3 py-2 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
|
||||
>
|
||||
<option value="all">全部平台</option>
|
||||
{platformOptions.map(p => (
|
||||
<option key={p.id} value={p.id}>{p.icon} {p.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value)}
|
||||
@ -291,42 +226,11 @@ export default function BrandProjectsPage() {
|
||||
<option value="all">全部状态</option>
|
||||
<option value="active">进行中</option>
|
||||
<option value="completed">已完成</option>
|
||||
<option value="paused">已暂停</option>
|
||||
<option value="archived">已归档</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 平台快捷筛选 */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPlatformFilter('all')}
|
||||
className={`px-4 py-2 rounded-xl text-sm font-medium transition-all ${
|
||||
platformFilter === 'all'
|
||||
? 'bg-accent-indigo text-white shadow-sm'
|
||||
: 'bg-bg-elevated text-text-secondary hover:bg-bg-card border border-transparent hover:border-border-subtle'
|
||||
}`}
|
||||
>
|
||||
全部
|
||||
</button>
|
||||
{platformOptions.map(platform => (
|
||||
<button
|
||||
key={platform.id}
|
||||
type="button"
|
||||
onClick={() => setPlatformFilter(platform.id)}
|
||||
className={`px-4 py-2 rounded-xl text-sm font-medium transition-all flex items-center gap-2 border ${
|
||||
platformFilter === platform.id
|
||||
? `${platform.bgColor} ${platform.textColor} ${platform.borderColor} shadow-sm`
|
||||
: 'bg-bg-elevated text-text-secondary border-transparent hover:bg-bg-card hover:border-border-subtle'
|
||||
}`}
|
||||
>
|
||||
<span className="text-base">{platform.icon}</span>
|
||||
{platform.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 项目卡片网格 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredProjects.map((project) => (
|
||||
<ProjectCard key={project.id} project={project} onEditDeadline={handleEditDeadline} />
|
||||
@ -348,14 +252,9 @@ export default function BrandProjectsPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 编辑截止日期弹窗 */}
|
||||
<Modal
|
||||
isOpen={showDeadlineModal}
|
||||
onClose={() => {
|
||||
setShowDeadlineModal(false)
|
||||
setEditingProject(null)
|
||||
setNewDeadline('')
|
||||
}}
|
||||
onClose={() => { setShowDeadlineModal(false); setEditingProject(null) }}
|
||||
title="修改截止日期"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
@ -365,11 +264,8 @@ export default function BrandProjectsPage() {
|
||||
<p className="font-medium text-text-primary">{editingProject.name}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-primary mb-2">
|
||||
新截止日期
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-text-primary mb-2">新截止日期</label>
|
||||
<div className="relative">
|
||||
<Calendar size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-text-tertiary" />
|
||||
<input
|
||||
@ -380,25 +276,11 @@ export default function BrandProjectsPage() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 pt-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="flex-1"
|
||||
onClick={() => {
|
||||
setShowDeadlineModal(false)
|
||||
setEditingProject(null)
|
||||
setNewDeadline('')
|
||||
}}
|
||||
>
|
||||
<Button variant="secondary" className="flex-1" onClick={() => { setShowDeadlineModal(false); setEditingProject(null) }}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
className="flex-1"
|
||||
onClick={handleSaveDeadline}
|
||||
disabled={!newDeadline}
|
||||
>
|
||||
<Button variant="primary" className="flex-1" onClick={handleSaveDeadline} disabled={!newDeadline}>
|
||||
保存
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -1,75 +1,83 @@
|
||||
'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 { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
|
||||
import { Card, CardContent } from '@/components/ui/Card'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { Input } from '@/components/ui/Input'
|
||||
import {
|
||||
ArrowLeft,
|
||||
FileText,
|
||||
Shield,
|
||||
Settings,
|
||||
Plus,
|
||||
Trash2,
|
||||
AlertTriangle,
|
||||
CheckCircle,
|
||||
Video,
|
||||
Bot,
|
||||
Users,
|
||||
Save,
|
||||
Upload,
|
||||
Download,
|
||||
ChevronDown,
|
||||
ChevronUp
|
||||
ChevronUp,
|
||||
Loader2
|
||||
} from 'lucide-react'
|
||||
import { api } from '@/lib/api'
|
||||
import { USE_MOCK } from '@/contexts/AuthContext'
|
||||
import { useOSSUpload } from '@/hooks/useOSSUpload'
|
||||
import type { BriefResponse, BriefCreateRequest, SellingPoint, BlacklistWord, BriefAttachment } from '@/types/brief'
|
||||
|
||||
// 模拟数据
|
||||
const mockData = {
|
||||
project: {
|
||||
id: 'proj-001',
|
||||
name: 'XX品牌618推广',
|
||||
},
|
||||
brief: {
|
||||
title: 'XX品牌618推广Brief',
|
||||
description: '本次618大促营销活动，需要达人围绕夏日护肤、美妆新品进行内容创作。',
|
||||
requirements: [
|
||||
'视频时长：60-90秒',
|
||||
'必须展示产品使用过程',
|
||||
'需要口播品牌slogan："XX品牌，夏日焕新"',
|
||||
'背景音乐需使用品牌指定曲库',
|
||||
// ==================== Mock 数据 ====================
|
||||
const mockBrief: BriefResponse = {
|
||||
id: 'bf-001',
|
||||
project_id: 'proj-001',
|
||||
project_name: 'XX品牌618推广',
|
||||
selling_points: [
|
||||
{ content: '视频时长：60-90秒', required: true },
|
||||
{ content: '必须展示产品使用过程', required: true },
|
||||
{ content: '需要口播品牌slogan："XX品牌，夏日焕新"', required: true },
|
||||
{ content: '背景音乐需使用品牌指定曲库', required: false },
|
||||
],
|
||||
blacklist_words: [
|
||||
{ word: '最好', reason: '违反广告法' },
|
||||
{ word: '第一', reason: '违反广告法' },
|
||||
{ word: '绝对', reason: '夸大宣传' },
|
||||
{ word: '100%', reason: '夸大宣传' },
|
||||
],
|
||||
competitors: ['竞品A', '竞品B', '竞品C'],
|
||||
brand_tone: '年轻、活力、清新',
|
||||
min_duration: 60,
|
||||
max_duration: 90,
|
||||
other_requirements: '本次618大促营销活动，需要达人围绕夏日护肤、美妆新品进行内容创作。',
|
||||
attachments: [
|
||||
{ id: 'att-001', name: '品牌视觉指南.pdf', url: 'https://example.com/brand-guide.pdf' },
|
||||
{ id: 'att-002', name: '产品资料包.zip', url: 'https://example.com/product-pack.zip' },
|
||||
],
|
||||
created_at: '2026-02-01T00:00:00Z',
|
||||
updated_at: '2026-02-05T00:00:00Z',
|
||||
}
|
||||
|
||||
const mockRules = {
|
||||
aiReview: {
|
||||
enabled: true,
|
||||
strictness: 'medium',
|
||||
checkItems: [
|
||||
{ id: 'forbidden_words', name: '违禁词检测', enabled: true },
|
||||
{ id: 'competitor', name: '竞品提及检测', enabled: true },
|
||||
{ id: 'brand_tone', name: '品牌调性检测', enabled: true },
|
||||
{ id: 'duration', name: '视频时长检测', enabled: true },
|
||||
{ id: 'music', name: '背景音乐检测', enabled: false },
|
||||
],
|
||||
keywords: ['夏日护肤', '清爽', '补水', '防晒', '焕新'],
|
||||
forbiddenWords: ['最好', '第一', '绝对', '100%'],
|
||||
referenceLinks: [
|
||||
{ title: '品牌视觉指南', url: 'https://example.com/brand-guide.pdf' },
|
||||
{ title: '产品资料包', url: 'https://example.com/product-pack.zip' },
|
||||
],
|
||||
deadline: '2026-06-10',
|
||||
},
|
||||
rules: {
|
||||
aiReview: {
|
||||
enabled: true,
|
||||
strictness: 'medium', // low, medium, high
|
||||
checkItems: [
|
||||
{ id: 'forbidden_words', name: '违禁词检测', enabled: true },
|
||||
{ id: 'competitor', name: '竞品提及检测', enabled: true },
|
||||
{ id: 'brand_tone', name: '品牌调性检测', enabled: true },
|
||||
{ id: 'duration', name: '视频时长检测', enabled: true },
|
||||
{ id: 'music', name: '背景音乐检测', enabled: false },
|
||||
],
|
||||
},
|
||||
manualReview: {
|
||||
scriptRequired: true,
|
||||
videoRequired: true,
|
||||
agencyCanApprove: true, // 代理商是否有终审权限
|
||||
brandFinalReview: true, // 品牌方是否需要终审
|
||||
},
|
||||
appealRules: {
|
||||
maxAppeals: 3, // 最大申诉次数
|
||||
appealDeadline: 48, // 申诉处理时限（小时）
|
||||
},
|
||||
manualReview: {
|
||||
scriptRequired: true,
|
||||
videoRequired: true,
|
||||
agencyCanApprove: true,
|
||||
brandFinalReview: true,
|
||||
},
|
||||
appealRules: {
|
||||
maxAppeals: 3,
|
||||
appealDeadline: 48,
|
||||
},
|
||||
}
|
||||
|
||||
@ -80,64 +88,203 @@ const strictnessOptions = [
|
||||
{ value: 'high', label: '严格', description: '严格检测，可能有较多误判' },
|
||||
]
|
||||
|
||||
function ConfigSkeleton() {
|
||||
return (
|
||||
<div className="space-y-6 animate-pulse">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-10 w-10 bg-bg-elevated rounded-lg" />
|
||||
<div className="space-y-2">
|
||||
<div className="h-7 w-48 bg-bg-elevated rounded" />
|
||||
<div className="h-4 w-32 bg-bg-elevated rounded" />
|
||||
</div>
|
||||
</div>
|
||||
{[1, 2, 3, 4].map(i => (
|
||||
<div key={i} className="h-16 bg-bg-elevated rounded-xl" />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function ProjectConfigPage() {
|
||||
const router = useRouter()
|
||||
const params = useParams()
|
||||
const toast = useToast()
|
||||
const projectId = params.id as string
|
||||
const { upload, isUploading, progress: uploadProgress } = useOSSUpload('general')
|
||||
|
||||
// Brief state
|
||||
const [briefExists, setBriefExists] = useState(false)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [projectName, setProjectName] = useState('')
|
||||
|
||||
// Brief form fields
|
||||
const [brandTone, setBrandTone] = useState('')
|
||||
const [otherRequirements, setOtherRequirements] = useState('')
|
||||
const [minDuration, setMinDuration] = useState<number | undefined>()
|
||||
const [maxDuration, setMaxDuration] = useState<number | undefined>()
|
||||
const [sellingPoints, setSellingPoints] = useState<SellingPoint[]>([])
|
||||
const [blacklistWords, setBlacklistWords] = useState<BlacklistWord[]>([])
|
||||
const [competitors, setCompetitors] = useState<string[]>([])
|
||||
const [attachments, setAttachments] = useState<BriefAttachment[]>([])
|
||||
|
||||
// Rules state (local only — no per-project backend API yet)
|
||||
const [rules, setRules] = useState(mockRules)
|
||||
|
||||
const [brief, setBrief] = useState(mockData.brief)
|
||||
const [rules, setRules] = useState(mockData.rules)
|
||||
const [isSaving, setIsSaving] = useState(false)
|
||||
const [activeSection, setActiveSection] = useState<string | null>('brief')
|
||||
|
||||
// 新增需求
|
||||
const [newRequirement, setNewRequirement] = useState('')
|
||||
// 新增关键词
|
||||
const [newKeyword, setNewKeyword] = useState('')
|
||||
// 新增违禁词
|
||||
const [newForbiddenWord, setNewForbiddenWord] = useState('')
|
||||
// Input fields
|
||||
const [newSellingPoint, setNewSellingPoint] = useState('')
|
||||
const [newBlacklistWord, setNewBlacklistWord] = useState('')
|
||||
const [newBlacklistReason, setNewBlacklistReason] = useState('')
|
||||
const [newCompetitor, setNewCompetitor] = useState('')
|
||||
|
||||
const handleSave = async () => {
|
||||
const populateBrief = (data: BriefResponse) => {
|
||||
setProjectName(data.project_name || '')
|
||||
setBrandTone(data.brand_tone || '')
|
||||
setOtherRequirements(data.other_requirements || '')
|
||||
setMinDuration(data.min_duration ?? undefined)
|
||||
setMaxDuration(data.max_duration ?? undefined)
|
||||
setSellingPoints(data.selling_points || [])
|
||||
setBlacklistWords(data.blacklist_words || [])
|
||||
setCompetitors(data.competitors || [])
|
||||
setAttachments(data.attachments || [])
|
||||
}
|
||||
|
||||
const loadBrief = useCallback(async () => {
|
||||
if (USE_MOCK) {
|
||||
populateBrief(mockBrief)
|
||||
setBriefExists(true)
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const data = await api.getBrief(projectId)
|
||||
populateBrief(data)
|
||||
setBriefExists(true)
|
||||
} catch (err: any) {
|
||||
if (err?.response?.status === 404) {
|
||||
setBriefExists(false)
|
||||
} else {
|
||||
console.error('Failed to load brief:', err)
|
||||
toast.error('加载Brief失败')
|
||||
}
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [projectId, toast])
|
||||
|
||||
useEffect(() => {
|
||||
loadBrief()
|
||||
}, [loadBrief])
|
||||
|
||||
const handleSaveBrief = async () => {
|
||||
setIsSaving(true)
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
setIsSaving(false)
|
||||
toast.success('配置已保存')
|
||||
}
|
||||
try {
|
||||
const briefData: BriefCreateRequest = {
|
||||
selling_points: sellingPoints,
|
||||
blacklist_words: blacklistWords,
|
||||
competitors,
|
||||
brand_tone: brandTone || undefined,
|
||||
min_duration: minDuration,
|
||||
max_duration: maxDuration,
|
||||
other_requirements: otherRequirements || undefined,
|
||||
attachments,
|
||||
}
|
||||
|
||||
const addRequirement = () => {
|
||||
if (newRequirement.trim()) {
|
||||
setBrief({ ...brief, requirements: [...brief.requirements, newRequirement.trim()] })
|
||||
setNewRequirement('')
|
||||
if (USE_MOCK) {
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
} else if (briefExists) {
|
||||
await api.updateBrief(projectId, briefData)
|
||||
} else {
|
||||
await api.createBrief(projectId, briefData)
|
||||
setBriefExists(true)
|
||||
}
|
||||
|
||||
toast.success('Brief配置已保存')
|
||||
} catch (err) {
|
||||
console.error('Failed to save brief:', err)
|
||||
toast.error('保存失败，请重试')
|
||||
} finally {
|
||||
setIsSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const removeRequirement = (index: number) => {
|
||||
setBrief({ ...brief, requirements: brief.requirements.filter((_, i) => i !== index) })
|
||||
}
|
||||
|
||||
const addKeyword = () => {
|
||||
if (newKeyword.trim() && !brief.keywords.includes(newKeyword.trim())) {
|
||||
setBrief({ ...brief, keywords: [...brief.keywords, newKeyword.trim()] })
|
||||
setNewKeyword('')
|
||||
// Selling points
|
||||
const addSellingPoint = () => {
|
||||
if (newSellingPoint.trim()) {
|
||||
setSellingPoints([...sellingPoints, { content: newSellingPoint.trim(), required: false }])
|
||||
setNewSellingPoint('')
|
||||
}
|
||||
}
|
||||
|
||||
const removeKeyword = (keyword: string) => {
|
||||
setBrief({ ...brief, keywords: brief.keywords.filter(k => k !== keyword) })
|
||||
const removeSellingPoint = (index: number) => {
|
||||
setSellingPoints(sellingPoints.filter((_, i) => i !== index))
|
||||
}
|
||||
|
||||
const addForbiddenWord = () => {
|
||||
if (newForbiddenWord.trim() && !brief.forbiddenWords.includes(newForbiddenWord.trim())) {
|
||||
setBrief({ ...brief, forbiddenWords: [...brief.forbiddenWords, newForbiddenWord.trim()] })
|
||||
setNewForbiddenWord('')
|
||||
const toggleSellingPointRequired = (index: number) => {
|
||||
setSellingPoints(sellingPoints.map((sp, i) =>
|
||||
i === index ? { ...sp, required: !sp.required } : sp
|
||||
))
|
||||
}
|
||||
|
||||
// Blacklist words
|
||||
const addBlacklistWord = () => {
|
||||
if (newBlacklistWord.trim()) {
|
||||
setBlacklistWords([...blacklistWords, { word: newBlacklistWord.trim(), reason: newBlacklistReason.trim() || '品牌规范' }])
|
||||
setNewBlacklistWord('')
|
||||
setNewBlacklistReason('')
|
||||
}
|
||||
}
|
||||
|
||||
const removeForbiddenWord = (word: string) => {
|
||||
setBrief({ ...brief, forbiddenWords: brief.forbiddenWords.filter(w => w !== word) })
|
||||
const removeBlacklistWord = (index: number) => {
|
||||
setBlacklistWords(blacklistWords.filter((_, i) => i !== index))
|
||||
}
|
||||
|
||||
// Competitors
|
||||
const addCompetitorItem = () => {
|
||||
if (newCompetitor.trim() && !competitors.includes(newCompetitor.trim())) {
|
||||
setCompetitors([...competitors, newCompetitor.trim()])
|
||||
setNewCompetitor('')
|
||||
}
|
||||
}
|
||||
|
||||
const removeCompetitor = (name: string) => {
|
||||
setCompetitors(competitors.filter(c => c !== name))
|
||||
}
|
||||
|
||||
// Attachment upload
|
||||
const handleAttachmentUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0]
|
||||
if (!file) return
|
||||
|
||||
if (USE_MOCK) {
|
||||
setAttachments([...attachments, {
|
||||
id: `att-${Date.now()}`,
|
||||
name: file.name,
|
||||
url: `mock://${file.name}`,
|
||||
}])
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await upload(file)
|
||||
setAttachments([...attachments, {
|
||||
id: `att-${Date.now()}`,
|
||||
name: file.name,
|
||||
url: result.url,
|
||||
}])
|
||||
} catch {
|
||||
toast.error('文件上传失败')
|
||||
}
|
||||
}
|
||||
|
||||
const removeAttachment = (id: string) => {
|
||||
setAttachments(attachments.filter(a => a.id !== id))
|
||||
}
|
||||
|
||||
// AI check item toggles (local state only)
|
||||
const toggleAiCheckItem = (itemId: string) => {
|
||||
setRules({
|
||||
...rules,
|
||||
@ -168,6 +315,8 @@ export default function ProjectConfigPage() {
|
||||
</button>
|
||||
)
|
||||
|
||||
if (loading) return <ConfigSkeleton />
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 顶部导航 */}
|
||||
@ -183,12 +332,17 @@ export default function ProjectConfigPage() {
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-text-primary">Brief和规则配置</h1>
|
||||
<p className="text-sm text-text-secondary mt-0.5">
|
||||
{mockData.project.name}
|
||||
{projectName || `项目 ${projectId}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="primary" onClick={handleSave} disabled={isSaving}>
|
||||
{isSaving ? '保存中...' : (
|
||||
<Button variant="primary" onClick={handleSaveBrief} disabled={isSaving}>
|
||||
{isSaving ? (
|
||||
<>
|
||||
<Loader2 size={16} className="animate-spin" />
|
||||
保存中...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Save size={16} />
|
||||
保存配置
|
||||
@ -202,45 +356,67 @@ export default function ProjectConfigPage() {
|
||||
<SectionHeader title="Brief配置" icon={FileText} section="brief" />
|
||||
{activeSection === 'brief' && (
|
||||
<CardContent className="space-y-6 pt-0">
|
||||
{/* 基本信息 */}
|
||||
{/* 品牌调性 + 视频时长 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm text-text-secondary mb-1.5 block">Brief标题</label>
|
||||
<label className="text-sm text-text-secondary mb-1.5 block">品牌调性</label>
|
||||
<Input
|
||||
value={brief.title}
|
||||
onChange={(e) => setBrief({ ...brief, title: e.target.value })}
|
||||
value={brandTone}
|
||||
onChange={(e) => setBrandTone(e.target.value)}
|
||||
placeholder="例如：年轻、活力、清新"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-text-secondary mb-1.5 block">截止日期</label>
|
||||
<Input
|
||||
type="date"
|
||||
value={brief.deadline}
|
||||
onChange={(e) => setBrief({ ...brief, deadline: e.target.value })}
|
||||
/>
|
||||
<label className="text-sm text-text-secondary mb-1.5 block">视频时长限制（秒）</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
value={minDuration ?? ''}
|
||||
onChange={(e) => setMinDuration(e.target.value ? parseInt(e.target.value) : undefined)}
|
||||
placeholder="最短"
|
||||
/>
|
||||
<span className="text-text-tertiary">~</span>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
value={maxDuration ?? ''}
|
||||
onChange={(e) => setMaxDuration(e.target.value ? parseInt(e.target.value) : undefined)}
|
||||
placeholder="最长"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 其他要求 */}
|
||||
<div>
|
||||
<label className="text-sm text-text-secondary mb-1.5 block">项目描述</label>
|
||||
<label className="text-sm text-text-secondary mb-1.5 block">其他要求</label>
|
||||
<textarea
|
||||
value={brief.description}
|
||||
onChange={(e) => setBrief({ ...brief, description: e.target.value })}
|
||||
value={otherRequirements}
|
||||
onChange={(e) => setOtherRequirements(e.target.value)}
|
||||
placeholder="简要描述项目要求..."
|
||||
className="w-full h-24 p-3 rounded-xl bg-bg-elevated border border-border-subtle text-text-primary resize-none focus:outline-none focus:ring-2 focus:ring-accent-indigo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 创作要求 */}
|
||||
{/* 卖点 / 创作要求 */}
|
||||
<div>
|
||||
<label className="text-sm text-text-secondary mb-2 block">创作要求</label>
|
||||
<label className="text-sm text-text-secondary mb-2 block">卖点 / 创作要求</label>
|
||||
<div className="space-y-2">
|
||||
{brief.requirements.map((req, index) => (
|
||||
{sellingPoints.map((sp, index) => (
|
||||
<div key={index} className="flex items-center gap-2 p-3 rounded-lg bg-bg-elevated">
|
||||
<CheckCircle size={16} className="text-accent-green flex-shrink-0" />
|
||||
<span className="flex-1 text-text-primary">{req}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeRequirement(index)}
|
||||
onClick={() => toggleSellingPointRequired(index)}
|
||||
title={sp.required ? '必选卖点（点击切换）' : '可选卖点（点击切换）'}
|
||||
>
|
||||
<CheckCircle size={16} className={sp.required ? 'text-accent-green' : 'text-text-tertiary'} />
|
||||
</button>
|
||||
<span className="flex-1 text-text-primary">{sp.content}</span>
|
||||
{sp.required && <span className="text-xs text-accent-green">必选</span>}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeSellingPoint(index)}
|
||||
className="p-1 rounded hover:bg-bg-page text-text-tertiary hover:text-accent-coral transition-colors"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
@ -249,67 +425,72 @@ export default function ProjectConfigPage() {
|
||||
))}
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
value={newRequirement}
|
||||
onChange={(e) => setNewRequirement(e.target.value)}
|
||||
placeholder="添加新的创作要求"
|
||||
onKeyDown={(e) => e.key === 'Enter' && addRequirement()}
|
||||
value={newSellingPoint}
|
||||
onChange={(e) => setNewSellingPoint(e.target.value)}
|
||||
placeholder="添加卖点或创作要求"
|
||||
onKeyDown={(e) => e.key === 'Enter' && addSellingPoint()}
|
||||
/>
|
||||
<Button variant="secondary" onClick={addRequirement}>
|
||||
<Button variant="secondary" onClick={addSellingPoint}>
|
||||
<Plus size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 关键词 */}
|
||||
{/* 禁止词 */}
|
||||
<div>
|
||||
<label className="text-sm text-text-secondary mb-2 block">推荐关键词</label>
|
||||
<div className="flex flex-wrap gap-2 mb-3">
|
||||
{brief.keywords.map((keyword) => (
|
||||
<span
|
||||
key={keyword}
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full bg-accent-indigo/15 text-accent-indigo text-sm"
|
||||
>
|
||||
{keyword}
|
||||
<label className="text-sm text-text-secondary mb-2 block flex items-center gap-2">
|
||||
<AlertTriangle size={14} className="text-accent-coral" />
|
||||
禁止词列表
|
||||
</label>
|
||||
<div className="space-y-2 mb-3">
|
||||
{blacklistWords.map((bw, index) => (
|
||||
<div key={index} className="flex items-center gap-2 p-3 rounded-lg bg-bg-elevated">
|
||||
<span className="text-accent-coral font-medium">{bw.word}</span>
|
||||
{bw.reason && <span className="text-xs text-text-tertiary">— {bw.reason}</span>}
|
||||
<div className="flex-1" />
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeKeyword(keyword)}
|
||||
className="hover:text-accent-coral transition-colors"
|
||||
onClick={() => removeBlacklistWord(index)}
|
||||
className="p-1 rounded hover:bg-bg-page text-text-tertiary hover:text-accent-coral transition-colors"
|
||||
>
|
||||
×
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
value={newKeyword}
|
||||
onChange={(e) => setNewKeyword(e.target.value)}
|
||||
placeholder="添加关键词"
|
||||
onKeyDown={(e) => e.key === 'Enter' && addKeyword()}
|
||||
value={newBlacklistWord}
|
||||
onChange={(e) => setNewBlacklistWord(e.target.value)}
|
||||
placeholder="禁止词"
|
||||
onKeyDown={(e) => e.key === 'Enter' && addBlacklistWord()}
|
||||
/>
|
||||
<Button variant="secondary" onClick={addKeyword}>
|
||||
<Input
|
||||
value={newBlacklistReason}
|
||||
onChange={(e) => setNewBlacklistReason(e.target.value)}
|
||||
placeholder="原因（可选）"
|
||||
onKeyDown={(e) => e.key === 'Enter' && addBlacklistWord()}
|
||||
/>
|
||||
<Button variant="secondary" onClick={addBlacklistWord}>
|
||||
<Plus size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 违禁词 */}
|
||||
{/* 竞品品牌 */}
|
||||
<div>
|
||||
<label className="text-sm text-text-secondary mb-2 block flex items-center gap-2">
|
||||
<AlertTriangle size={14} className="text-accent-coral" />
|
||||
违禁词列表
|
||||
</label>
|
||||
<label className="text-sm text-text-secondary mb-2 block">竞品品牌</label>
|
||||
<div className="flex flex-wrap gap-2 mb-3">
|
||||
{brief.forbiddenWords.map((word) => (
|
||||
{competitors.map((name) => (
|
||||
<span
|
||||
key={word}
|
||||
key={name}
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full bg-accent-coral/15 text-accent-coral text-sm"
|
||||
>
|
||||
{word}
|
||||
{name}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeForbiddenWord(word)}
|
||||
onClick={() => removeCompetitor(name)}
|
||||
className="hover:text-accent-coral/70 transition-colors"
|
||||
>
|
||||
×
|
||||
@ -319,12 +500,12 @@ export default function ProjectConfigPage() {
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
value={newForbiddenWord}
|
||||
onChange={(e) => setNewForbiddenWord(e.target.value)}
|
||||
placeholder="添加违禁词"
|
||||
onKeyDown={(e) => e.key === 'Enter' && addForbiddenWord()}
|
||||
value={newCompetitor}
|
||||
onChange={(e) => setNewCompetitor(e.target.value)}
|
||||
placeholder="添加竞品品牌名称"
|
||||
onKeyDown={(e) => e.key === 'Enter' && addCompetitorItem()}
|
||||
/>
|
||||
<Button variant="secondary" onClick={addForbiddenWord}>
|
||||
<Button variant="secondary" onClick={addCompetitorItem}>
|
||||
<Plus size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
@ -334,24 +515,39 @@ export default function ProjectConfigPage() {
|
||||
<div>
|
||||
<label className="text-sm text-text-secondary mb-2 block">参考资料</label>
|
||||
<div className="space-y-2">
|
||||
{brief.referenceLinks.map((link, index) => (
|
||||
<div key={index} className="flex items-center gap-3 p-3 rounded-lg bg-bg-elevated">
|
||||
{attachments.map((att) => (
|
||||
<div key={att.id} className="flex items-center gap-3 p-3 rounded-lg bg-bg-elevated">
|
||||
<FileText size={16} className="text-accent-indigo" />
|
||||
<span className="flex-1 text-text-primary">{link.title}</span>
|
||||
<a
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-accent-indigo hover:underline text-sm"
|
||||
<span className="flex-1 text-text-primary">{att.name}</span>
|
||||
{att.size && <span className="text-xs text-text-tertiary">{att.size}</span>}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeAttachment(att.id)}
|
||||
className="p-1 rounded hover:bg-bg-page text-text-tertiary hover:text-accent-coral transition-colors"
|
||||
>
|
||||
下载
|
||||
</a>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<Button variant="secondary" className="w-full">
|
||||
<Upload size={16} />
|
||||
上传参考资料
|
||||
</Button>
|
||||
<label className="flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg border border-border-subtle bg-bg-elevated text-text-primary hover:bg-bg-page transition-colors cursor-pointer w-full text-sm">
|
||||
{isUploading ? (
|
||||
<>
|
||||
<Loader2 size={16} className="animate-spin" />
|
||||
上传中 {uploadProgress}%
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Upload size={16} />
|
||||
上传参考资料
|
||||
</>
|
||||
)}
|
||||
<input
|
||||
type="file"
|
||||
onChange={handleAttachmentUpload}
|
||||
className="hidden"
|
||||
disabled={isUploading}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { useRouter, useParams } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
|
||||
@ -8,6 +8,7 @@ import { Button } from '@/components/ui/Button'
|
||||
import { Input } from '@/components/ui/Input'
|
||||
import { Modal } from '@/components/ui/Modal'
|
||||
import { SuccessTag, PendingTag, ErrorTag } from '@/components/ui/Tag'
|
||||
import { useToast } from '@/components/ui/Toast'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Calendar,
|
||||
@ -25,51 +26,69 @@ import {
|
||||
MoreHorizontal,
|
||||
Trash2,
|
||||
Check,
|
||||
Pencil
|
||||
Pencil,
|
||||
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 { ProjectResponse } from '@/types/project'
|
||||
import type { TaskResponse } from '@/types/task'
|
||||
import type { AgencyDetail } from '@/types/organization'
|
||||
|
||||
// 模拟项目详情数据
|
||||
const mockProject = {
|
||||
id: 'proj-001',
|
||||
name: 'XX品牌618推广',
|
||||
platform: 'douyin',
|
||||
status: 'active',
|
||||
deadline: '2026-06-18',
|
||||
createdAt: '2026-02-01',
|
||||
description: '618大促活动营销内容审核项目',
|
||||
stats: {
|
||||
scriptTotal: 20,
|
||||
scriptPassed: 15,
|
||||
scriptPending: 3,
|
||||
scriptRejected: 2,
|
||||
videoTotal: 20,
|
||||
videoPassed: 12,
|
||||
videoPending: 5,
|
||||
videoRejected: 3,
|
||||
},
|
||||
// ==================== Mock 数据 ====================
|
||||
const mockProject: ProjectResponse = {
|
||||
id: 'proj-001', name: 'XX品牌618推广', brand_id: 'br-001', brand_name: 'XX护肤品牌',
|
||||
description: '618大促活动营销内容审核项目', status: 'active', deadline: '2026-06-18',
|
||||
agencies: [
|
||||
{ id: 'AG789012', name: '星耀传媒', creatorCount: 8, passRate: 92 },
|
||||
{ id: 'AG456789', name: '创意无限', creatorCount: 5, passRate: 88 },
|
||||
],
|
||||
recentTasks: [
|
||||
{ id: 'task-001', type: 'video', creatorName: '小美护肤', agencyId: 'AG789012', agencyName: '星耀传媒', status: 'pending', submittedAt: '2026-02-06 14:30' },
|
||||
{ id: 'task-002', type: 'script', creatorName: '美妆Lisa', agencyId: 'AG789012', agencyName: '星耀传媒', status: 'approved', submittedAt: '2026-02-06 12:15' },
|
||||
{ id: 'task-003', type: 'video', creatorName: '健身王', agencyId: 'AG456789', agencyName: '创意无限', status: 'rejected', submittedAt: '2026-02-06 10:00' },
|
||||
{ id: 'task-004', type: 'script', creatorName: '时尚达人', agencyId: 'AG456789', agencyName: '创意无限', status: 'pending', submittedAt: '2026-02-05 16:45' },
|
||||
{ id: 'AG789012', name: '星耀传媒' },
|
||||
{ id: 'AG456789', name: '创意无限' },
|
||||
],
|
||||
task_count: 20,
|
||||
created_at: '2026-02-01T00:00:00Z', updated_at: '2026-02-06T00:00:00Z',
|
||||
}
|
||||
|
||||
// 模拟品牌方已添加的代理商（来自代理商管理）
|
||||
const mockManagedAgencies = [
|
||||
{ id: 'AG789012', name: '星耀传媒', companyName: '上海星耀文化传媒有限公司' },
|
||||
{ id: 'AG456789', name: '创意无限', companyName: '深圳创意无限广告有限公司' },
|
||||
{ id: 'AG123456', name: '美妆达人MCN', companyName: '杭州美妆达人网络科技有限公司' },
|
||||
{ id: 'AG111111', name: '蓝海科技', companyName: '北京蓝海数字科技有限公司' },
|
||||
{ id: 'AG222222', name: '云创网络', companyName: '杭州云创网络技术有限公司' },
|
||||
{ id: 'AG333333', name: '天府传媒', companyName: '成都天府传媒集团有限公司' },
|
||||
const mockTasks: TaskResponse[] = [
|
||||
{
|
||||
id: 'task-001', name: '夏日护肤推广', sequence: 1,
|
||||
stage: 'video_brand_review',
|
||||
project: { id: 'proj-001', name: 'XX品牌618推广' },
|
||||
agency: { id: 'AG789012', name: '星耀传媒' },
|
||||
creator: { id: 'cr-001', name: '小美护肤' },
|
||||
appeal_count: 0, is_appeal: false,
|
||||
created_at: '2026-02-06T14:30:00Z', updated_at: '2026-02-06T14:30:00Z',
|
||||
},
|
||||
{
|
||||
id: 'task-002', name: '新品口红试色', sequence: 2,
|
||||
stage: 'completed',
|
||||
project: { id: 'proj-001', name: 'XX品牌618推广' },
|
||||
agency: { id: 'AG789012', name: '星耀传媒' },
|
||||
creator: { id: 'cr-002', name: '美妆Lisa' },
|
||||
appeal_count: 0, is_appeal: false,
|
||||
created_at: '2026-02-06T12:15:00Z', updated_at: '2026-02-06T12:15:00Z',
|
||||
},
|
||||
{
|
||||
id: 'task-003', name: '健身器材推荐', sequence: 3,
|
||||
stage: 'rejected',
|
||||
project: { id: 'proj-001', name: 'XX品牌618推广' },
|
||||
agency: { id: 'AG456789', name: '创意无限' },
|
||||
creator: { id: 'cr-003', name: '健身王' },
|
||||
appeal_count: 0, is_appeal: false,
|
||||
created_at: '2026-02-06T10:00:00Z', updated_at: '2026-02-06T10:00:00Z',
|
||||
},
|
||||
]
|
||||
|
||||
const mockManagedAgencies: AgencyDetail[] = [
|
||||
{ id: 'AG789012', name: '星耀传媒', force_pass_enabled: true, contact_name: '张经理' },
|
||||
{ id: 'AG456789', name: '创意无限', force_pass_enabled: false, contact_name: '李总' },
|
||||
{ id: 'AG123456', name: '美妆达人MCN', force_pass_enabled: false },
|
||||
{ id: 'AG111111', name: '蓝海科技', force_pass_enabled: true },
|
||||
{ id: 'AG222222', name: '云创网络', force_pass_enabled: false },
|
||||
]
|
||||
|
||||
// ==================== 组件 ====================
|
||||
|
||||
function StatCard({ title, value, icon: Icon, color }: { title: string; value: number | string; icon: React.ElementType; color: string }) {
|
||||
return (
|
||||
<Card>
|
||||
@ -88,98 +107,169 @@ function StatCard({ title, value, icon: Icon, color }: { title: string; value: n
|
||||
)
|
||||
}
|
||||
|
||||
function TaskStatusTag({ status }: { status: string }) {
|
||||
switch (status) {
|
||||
case 'approved': return <SuccessTag>已通过</SuccessTag>
|
||||
case 'pending': return <PendingTag>待审核</PendingTag>
|
||||
case 'rejected': return <ErrorTag>已驳回</ErrorTag>
|
||||
default: return <PendingTag>未知</PendingTag>
|
||||
}
|
||||
function TaskStatusTag({ stage }: { stage: string }) {
|
||||
if (stage === 'completed') return <SuccessTag>已通过</SuccessTag>
|
||||
if (stage === 'rejected') return <ErrorTag>已驳回</ErrorTag>
|
||||
if (stage.includes('review')) return <PendingTag>审核中</PendingTag>
|
||||
return <PendingTag>进行中</PendingTag>
|
||||
}
|
||||
|
||||
function DetailSkeleton() {
|
||||
return (
|
||||
<div className="space-y-6 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-7 w-48 bg-bg-elevated rounded" />
|
||||
<div className="h-4 w-64 bg-bg-elevated rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-20 bg-bg-elevated rounded-xl" />
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
{[1, 2, 3, 4].map(i => <div key={i} className="h-20 bg-bg-elevated rounded-xl" />)}
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
<div className="col-span-2 h-48 bg-bg-elevated rounded-xl" />
|
||||
<div className="h-48 bg-bg-elevated rounded-xl" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function ProjectDetailPage() {
|
||||
const router = useRouter()
|
||||
const params = useParams()
|
||||
const toast = useToast()
|
||||
const projectId = params.id as string
|
||||
const [project, setProject] = useState(mockProject)
|
||||
const { subscribe } = useSSE()
|
||||
|
||||
// 添加代理商相关状态
|
||||
const [project, setProject] = useState<ProjectResponse | null>(null)
|
||||
const [recentTasks, setRecentTasks] = useState<TaskResponse[]>([])
|
||||
const [managedAgencies, setManagedAgencies] = useState<AgencyDetail[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
// UI states
|
||||
const [showAddModal, setShowAddModal] = useState(false)
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [selectedAgencies, setSelectedAgencies] = useState<string[]>([])
|
||||
|
||||
// 代理商操作菜单
|
||||
const [activeAgencyMenu, setActiveAgencyMenu] = useState<string | null>(null)
|
||||
|
||||
// 删除确认
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false)
|
||||
const [agencyToDelete, setAgencyToDelete] = useState<typeof project.agencies[0] | null>(null)
|
||||
|
||||
// 编辑截止日期
|
||||
const [agencyToDelete, setAgencyToDelete] = useState<{ id: string; name: string } | null>(null)
|
||||
const [showDeadlineModal, setShowDeadlineModal] = useState(false)
|
||||
const [newDeadline, setNewDeadline] = useState(project.deadline)
|
||||
const [newDeadline, setNewDeadline] = useState('')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
|
||||
// 保存截止日期
|
||||
const handleSaveDeadline = () => {
|
||||
if (!newDeadline) return
|
||||
setProject({ ...project, deadline: newDeadline })
|
||||
setShowDeadlineModal(false)
|
||||
}
|
||||
const loadData = useCallback(async () => {
|
||||
if (USE_MOCK) {
|
||||
setProject(mockProject)
|
||||
setRecentTasks(mockTasks)
|
||||
setManagedAgencies(mockManagedAgencies)
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
const scriptPassRate = Math.round((project.stats.scriptPassed / project.stats.scriptTotal) * 100)
|
||||
const videoPassRate = Math.round((project.stats.videoPassed / project.stats.videoTotal) * 100)
|
||||
try {
|
||||
const [projectData, tasksData, agenciesData] = await Promise.all([
|
||||
api.getProject(projectId),
|
||||
api.listTasks(1, 10),
|
||||
api.listBrandAgencies(),
|
||||
])
|
||||
setProject(projectData)
|
||||
setRecentTasks(tasksData.items.filter(t => t.project.id === projectId).slice(0, 5))
|
||||
setManagedAgencies(agenciesData.items)
|
||||
} catch (err) {
|
||||
console.error('Failed to load project:', err)
|
||||
toast.error('加载项目详情失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [projectId, toast])
|
||||
|
||||
// 过滤可添加的代理商（排除已在项目中的）
|
||||
const availableAgencies = mockManagedAgencies.filter(
|
||||
useEffect(() => {
|
||||
loadData()
|
||||
}, [loadData])
|
||||
|
||||
useEffect(() => {
|
||||
const unsub = subscribe('task_updated', () => loadData())
|
||||
return unsub
|
||||
}, [subscribe, loadData])
|
||||
|
||||
if (loading || !project) return <DetailSkeleton />
|
||||
|
||||
const availableAgencies = managedAgencies.filter(
|
||||
agency => !project.agencies.some(a => a.id === agency.id)
|
||||
)
|
||||
|
||||
// 搜索过滤
|
||||
const filteredAgencies = availableAgencies.filter(agency =>
|
||||
searchQuery === '' ||
|
||||
agency.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
agency.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
agency.companyName.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
agency.id.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
)
|
||||
|
||||
// 切换选择
|
||||
const toggleSelectAgency = (agencyId: string) => {
|
||||
setSelectedAgencies(prev =>
|
||||
prev.includes(agencyId)
|
||||
? prev.filter(id => id !== agencyId)
|
||||
: [...prev, agencyId]
|
||||
prev.includes(agencyId) ? prev.filter(id => id !== agencyId) : [...prev, agencyId]
|
||||
)
|
||||
}
|
||||
|
||||
// 确认添加
|
||||
const handleAddAgencies = () => {
|
||||
const newAgencies = mockManagedAgencies
|
||||
.filter(a => selectedAgencies.includes(a.id))
|
||||
.map(a => ({ id: a.id, name: a.name, creatorCount: 0, passRate: 0 }))
|
||||
|
||||
setProject({
|
||||
...project,
|
||||
agencies: [...project.agencies, ...newAgencies]
|
||||
})
|
||||
|
||||
setShowAddModal(false)
|
||||
setSelectedAgencies([])
|
||||
setSearchQuery('')
|
||||
const handleAddAgencies = async () => {
|
||||
setSubmitting(true)
|
||||
try {
|
||||
if (!USE_MOCK) {
|
||||
await api.assignAgencies(projectId, selectedAgencies)
|
||||
}
|
||||
const newAgencies = managedAgencies
|
||||
.filter(a => selectedAgencies.includes(a.id))
|
||||
.map(a => ({ id: a.id, name: a.name }))
|
||||
setProject({ ...project, agencies: [...project.agencies, ...newAgencies] })
|
||||
toast.success('代理商已添加')
|
||||
} catch (err) {
|
||||
console.error('Failed to add agencies:', err)
|
||||
toast.error('添加失败')
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
setShowAddModal(false)
|
||||
setSelectedAgencies([])
|
||||
setSearchQuery('')
|
||||
}
|
||||
}
|
||||
|
||||
// 移除代理商
|
||||
const handleRemoveAgency = async () => {
|
||||
if (!agencyToDelete) return
|
||||
|
||||
setProject({
|
||||
...project,
|
||||
agencies: project.agencies.filter(a => a.id !== agencyToDelete.id)
|
||||
})
|
||||
setShowDeleteModal(false)
|
||||
setAgencyToDelete(null)
|
||||
setSubmitting(true)
|
||||
try {
|
||||
if (!USE_MOCK) {
|
||||
await api.removeAgencyFromProject(projectId, agencyToDelete.id)
|
||||
}
|
||||
setProject({ ...project, agencies: project.agencies.filter(a => a.id !== agencyToDelete.id) })
|
||||
toast.success('代理商已移除')
|
||||
} catch (err) {
|
||||
console.error('Failed to remove agency:', err)
|
||||
toast.error('移除失败')
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
setShowDeleteModal(false)
|
||||
setAgencyToDelete(null)
|
||||
}
|
||||
}
|
||||
|
||||
const platform = getPlatformInfo(project.platform)
|
||||
const handleSaveDeadline = async () => {
|
||||
if (!newDeadline) return
|
||||
setSubmitting(true)
|
||||
try {
|
||||
if (!USE_MOCK) {
|
||||
await api.updateProject(projectId, { deadline: newDeadline })
|
||||
}
|
||||
setProject({ ...project, deadline: newDeadline })
|
||||
toast.success('截止日期已更新')
|
||||
} catch (err) {
|
||||
console.error('Failed to update deadline:', err)
|
||||
toast.error('更新失败')
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
setShowDeadlineModal(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
@ -191,42 +281,34 @@ export default function ProjectDetailPage() {
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-2xl font-bold text-text-primary">{project.name}</h1>
|
||||
{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>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-text-secondary">{project.description}</p>
|
||||
{project.description && (
|
||||
<p className="text-sm text-text-secondary">{project.description}</p>
|
||||
)}
|
||||
</div>
|
||||
<SuccessTag>进行中</SuccessTag>
|
||||
<SuccessTag>{project.status === 'active' ? '进行中' : project.status === 'completed' ? '已完成' : '已归档'}</SuccessTag>
|
||||
</div>
|
||||
|
||||
{/* 项目信息 */}
|
||||
<div className="flex items-center gap-6 text-sm text-text-secondary">
|
||||
<span className="flex items-center gap-2">
|
||||
<Calendar size={16} />
|
||||
截止日期: {project.deadline}
|
||||
截止日期: {project.deadline ? new Date(project.deadline).toLocaleDateString('zh-CN') : '未设置'}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setNewDeadline(project.deadline)
|
||||
setShowDeadlineModal(true)
|
||||
}}
|
||||
onClick={() => { setNewDeadline(project.deadline || ''); setShowDeadlineModal(true) }}
|
||||
className="p-1 rounded hover:bg-bg-elevated transition-colors"
|
||||
title="修改截止日期"
|
||||
>
|
||||
<Pencil size={14} className="text-text-tertiary hover:text-accent-indigo" />
|
||||
</button>
|
||||
</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<Clock size={16} />
|
||||
创建时间: {project.createdAt}
|
||||
创建时间: {new Date(project.created_at).toLocaleDateString('zh-CN')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Brief和规则配置 - 大按钮 */}
|
||||
{/* Brief和规则配置 */}
|
||||
<Link href={`/brand/projects/${projectId}/config`}>
|
||||
<Card className="hover:border-accent-indigo transition-colors cursor-pointer">
|
||||
<CardContent className="py-5">
|
||||
@ -248,76 +330,65 @@ export default function ProjectDetailPage() {
|
||||
|
||||
{/* 统计卡片 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<StatCard title="脚本通过率" value={`${scriptPassRate}%`} icon={FileText} color="text-accent-green" />
|
||||
<StatCard title="视频通过率" value={`${videoPassRate}%`} icon={Video} color="text-accent-indigo" />
|
||||
<StatCard title="总任务数" value={project.task_count} icon={FileText} color="text-accent-green" />
|
||||
<StatCard title="参与代理商" value={project.agencies.length} icon={Users} color="text-purple-400" />
|
||||
<StatCard title="待审核任务" value={project.stats.scriptPending + project.stats.videoPending} icon={Clock} color="text-orange-400" />
|
||||
<StatCard title="状态" value={project.status === 'active' ? '进行中' : '已完成'} icon={CheckCircle} color="text-accent-indigo" />
|
||||
<StatCard title="最近更新" value={new Date(project.updated_at).toLocaleDateString('zh-CN')} icon={Clock} color="text-orange-400" />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* 审核进度 */}
|
||||
{/* 最近任务 */}
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader>
|
||||
<CardTitle>审核进度</CardTitle>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
<span>最近提交</span>
|
||||
<Link href="/brand/review">
|
||||
<Button variant="ghost" size="sm">
|
||||
查看全部 <ChevronRight size={16} />
|
||||
</Button>
|
||||
</Link>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* 脚本审核 */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="flex items-center gap-2 text-text-primary font-medium">
|
||||
<FileText size={16} />
|
||||
脚本审核
|
||||
</span>
|
||||
<span className="text-sm text-text-secondary">
|
||||
{project.stats.scriptPassed}/{project.stats.scriptTotal} 已通过
|
||||
</span>
|
||||
<CardContent>
|
||||
{recentTasks.length > 0 ? (
|
||||
<div className="overflow-x-auto">
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{recentTasks.map((task) => (
|
||||
<tr key={task.id} className="border-b border-border-subtle last:border-0 hover:bg-bg-elevated">
|
||||
<td className="py-4 font-medium text-text-primary">{task.name}</td>
|
||||
<td className="py-4 text-text-secondary">{task.creator.name}</td>
|
||||
<td className="py-4">
|
||||
<span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-bg-elevated text-sm">
|
||||
<Building2 size={14} className="text-accent-indigo" />
|
||||
<span className="text-text-secondary">{task.agency.name}</span>
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4"><TaskStatusTag stage={task.stage} /></td>
|
||||
<td className="py-4">
|
||||
<Link href={`/agency/review/${task.id}`}>
|
||||
<Button size="sm" variant={task.stage.includes('review') ? 'primary' : 'secondary'}>
|
||||
{task.stage.includes('review') ? '审核' : '查看'}
|
||||
</Button>
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="flex h-4 rounded-full overflow-hidden bg-bg-elevated">
|
||||
<div className="bg-accent-green" style={{ width: `${(project.stats.scriptPassed / project.stats.scriptTotal) * 100}%` }} />
|
||||
<div className="bg-yellow-500" style={{ width: `${(project.stats.scriptPending / project.stats.scriptTotal) * 100}%` }} />
|
||||
<div className="bg-accent-coral" style={{ width: `${(project.stats.scriptRejected / project.stats.scriptTotal) * 100}%` }} />
|
||||
</div>
|
||||
<div className="flex gap-6 mt-2 text-xs">
|
||||
<span className="flex items-center gap-1 text-accent-green">
|
||||
<CheckCircle size={12} /> 通过 {project.stats.scriptPassed}
|
||||
</span>
|
||||
<span className="flex items-center gap-1 text-yellow-500">
|
||||
<Clock size={12} /> 待审 {project.stats.scriptPending}
|
||||
</span>
|
||||
<span className="flex items-center gap-1 text-accent-coral">
|
||||
<XCircle size={12} /> 驳回 {project.stats.scriptRejected}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 视频审核 */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="flex items-center gap-2 text-text-primary font-medium">
|
||||
<Video size={16} />
|
||||
视频审核
|
||||
</span>
|
||||
<span className="text-sm text-text-secondary">
|
||||
{project.stats.videoPassed}/{project.stats.videoTotal} 已通过
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex h-4 rounded-full overflow-hidden bg-bg-elevated">
|
||||
<div className="bg-accent-green" style={{ width: `${(project.stats.videoPassed / project.stats.videoTotal) * 100}%` }} />
|
||||
<div className="bg-yellow-500" style={{ width: `${(project.stats.videoPending / project.stats.videoTotal) * 100}%` }} />
|
||||
<div className="bg-accent-coral" style={{ width: `${(project.stats.videoRejected / project.stats.videoTotal) * 100}%` }} />
|
||||
</div>
|
||||
<div className="flex gap-6 mt-2 text-xs">
|
||||
<span className="flex items-center gap-1 text-accent-green">
|
||||
<CheckCircle size={12} /> 通过 {project.stats.videoPassed}
|
||||
</span>
|
||||
<span className="flex items-center gap-1 text-yellow-500">
|
||||
<Clock size={12} /> 待审 {project.stats.videoPending}
|
||||
</span>
|
||||
<span className="flex items-center gap-1 text-accent-coral">
|
||||
<XCircle size={12} /> 驳回 {project.stats.videoRejected}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8 text-text-tertiary text-sm">暂无任务</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@ -339,7 +410,7 @@ export default function ProjectDetailPage() {
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-text-primary text-sm">{agency.name}</p>
|
||||
<p className="text-xs text-text-tertiary">{agency.creatorCount} 位达人 · 通过率 {agency.passRate}%</p>
|
||||
<p className="text-xs text-text-tertiary">{agency.id}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
@ -370,7 +441,6 @@ export default function ProjectDetailPage() {
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* 添加代理商按钮 */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowAddModal(true)}
|
||||
@ -383,77 +453,14 @@ export default function ProjectDetailPage() {
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 最近任务 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
<span>最近提交</span>
|
||||
<Link href="/brand/review">
|
||||
<Button variant="ghost" size="sm">
|
||||
查看全部 <ChevronRight size={16} />
|
||||
</Button>
|
||||
</Link>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="overflow-x-auto">
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{project.recentTasks.map((task) => (
|
||||
<tr key={task.id} className="border-b border-border-subtle last:border-0 hover:bg-bg-elevated">
|
||||
<td className="py-4">
|
||||
<span className="flex items-center gap-2">
|
||||
{task.type === 'script' ? <FileText size={16} className="text-accent-indigo" /> : <Video size={16} className="text-purple-400" />}
|
||||
{task.type === 'script' ? '脚本' : '视频'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 text-text-primary">{task.creatorName}</td>
|
||||
<td className="py-4">
|
||||
<span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-bg-elevated text-sm">
|
||||
<Building2 size={14} className="text-accent-indigo" />
|
||||
<span className="text-text-secondary">{task.agencyName}</span>
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4"><TaskStatusTag status={task.status} /></td>
|
||||
<td className="py-4 text-sm text-text-tertiary">{task.submittedAt}</td>
|
||||
<td className="py-4">
|
||||
<Link href={`/brand/review/${task.type}/${task.id}`}>
|
||||
<Button size="sm" variant={task.status === 'pending' ? 'primary' : 'secondary'}>
|
||||
{task.status === 'pending' ? '审核' : '查看'}
|
||||
</Button>
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 添加代理商弹窗 */}
|
||||
<Modal
|
||||
isOpen={showAddModal}
|
||||
onClose={() => {
|
||||
setShowAddModal(false)
|
||||
setSearchQuery('')
|
||||
setSelectedAgencies([])
|
||||
}}
|
||||
onClose={() => { setShowAddModal(false); setSearchQuery(''); setSelectedAgencies([]) }}
|
||||
title="添加代理商"
|
||||
size="lg"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{/* 搜索框 */}
|
||||
<div className="relative">
|
||||
<Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary" />
|
||||
<Input
|
||||
@ -464,7 +471,6 @@ export default function ProjectDetailPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 代理商列表 */}
|
||||
<div className="max-h-80 overflow-y-auto space-y-2">
|
||||
{filteredAgencies.length > 0 ? (
|
||||
filteredAgencies.map((agency) => {
|
||||
@ -475,26 +481,22 @@ export default function ProjectDetailPage() {
|
||||
type="button"
|
||||
onClick={() => toggleSelectAgency(agency.id)}
|
||||
className={`w-full flex items-center gap-3 p-3 rounded-xl border-2 transition-all text-left ${
|
||||
isSelected
|
||||
? 'border-accent-indigo bg-accent-indigo/5'
|
||||
: 'border-transparent bg-bg-elevated hover:bg-bg-page'
|
||||
isSelected ? 'border-accent-indigo bg-accent-indigo/5' : 'border-transparent bg-bg-elevated hover:bg-bg-page'
|
||||
}`}
|
||||
>
|
||||
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
|
||||
isSelected ? 'bg-accent-indigo' : 'bg-accent-indigo/15'
|
||||
}`}>
|
||||
{isSelected ? (
|
||||
<Check size={20} className="text-white" />
|
||||
) : (
|
||||
<Building2 size={20} className="text-accent-indigo" />
|
||||
)}
|
||||
{isSelected ? <Check size={20} className="text-white" /> : <Building2 size={20} className="text-accent-indigo" />}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="font-medium text-text-primary">{agency.name}</p>
|
||||
<span className="text-xs text-text-tertiary font-mono">{agency.id}</span>
|
||||
</div>
|
||||
<p className="text-sm text-text-secondary truncate">{agency.companyName}</p>
|
||||
{agency.contact_name && (
|
||||
<p className="text-sm text-text-secondary truncate">{agency.contact_name}</p>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
@ -502,62 +504,39 @@ export default function ProjectDetailPage() {
|
||||
) : (
|
||||
<div className="text-center py-8 text-text-tertiary">
|
||||
{availableAgencies.length === 0 ? (
|
||||
<>
|
||||
<Users size={32} className="mx-auto mb-2 opacity-50" />
|
||||
<p>所有代理商都已添加到此项目</p>
|
||||
</>
|
||||
<><Users size={32} className="mx-auto mb-2 opacity-50" /><p>所有代理商都已添加到此项目</p></>
|
||||
) : (
|
||||
<>
|
||||
<Search size={32} className="mx-auto mb-2 opacity-50" />
|
||||
<p>未找到匹配的代理商</p>
|
||||
</>
|
||||
<><Search size={32} className="mx-auto mb-2 opacity-50" /><p>未找到匹配的代理商</p></>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 已选择提示 */}
|
||||
{selectedAgencies.length > 0 && (
|
||||
<div className="flex items-center justify-between pt-3 border-t border-border-subtle">
|
||||
<span className="text-sm text-text-secondary">
|
||||
已选择 <span className="text-accent-indigo font-medium">{selectedAgencies.length}</span> 个代理商
|
||||
</span>
|
||||
<Button variant="primary" onClick={handleAddAgencies}>
|
||||
<Plus size={16} />
|
||||
<Button variant="primary" onClick={handleAddAgencies} disabled={submitting}>
|
||||
{submitting && <Loader2 size={16} className="animate-spin" />}
|
||||
确认添加
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 底部提示 */}
|
||||
<p className="text-xs text-text-tertiary pt-2">
|
||||
仅显示已在"代理商管理"中添加的代理商，如需添加新代理商请先前往代理商管理
|
||||
</p>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
{/* 删除确认弹窗 */}
|
||||
<Modal
|
||||
isOpen={showDeleteModal}
|
||||
onClose={() => { setShowDeleteModal(false); setAgencyToDelete(null) }}
|
||||
title="移除代理商"
|
||||
>
|
||||
<Modal isOpen={showDeleteModal} onClose={() => { setShowDeleteModal(false); setAgencyToDelete(null) }} title="移除代理商">
|
||||
<div className="space-y-4">
|
||||
<p className="text-text-secondary">
|
||||
确定要将 <span className="text-text-primary font-medium">{agencyToDelete?.name}</span> 从此项目中移除吗？
|
||||
</p>
|
||||
<p className="text-sm text-accent-coral">
|
||||
移除后，该代理商下的达人将无法继续参与此项目的任务。
|
||||
</p>
|
||||
<p className="text-sm text-accent-coral">移除后，该代理商下的达人将无法继续参与此项目的任务。</p>
|
||||
<div className="flex gap-3">
|
||||
<Button variant="secondary" className="flex-1" onClick={() => { setShowDeleteModal(false); setAgencyToDelete(null) }}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
className="flex-1 bg-accent-coral hover:bg-accent-coral/80"
|
||||
onClick={handleRemoveAgency}
|
||||
>
|
||||
<Button variant="secondary" className="flex-1" onClick={() => { setShowDeleteModal(false); setAgencyToDelete(null) }}>取消</Button>
|
||||
<Button variant="primary" className="flex-1 bg-accent-coral hover:bg-accent-coral/80" onClick={handleRemoveAgency} disabled={submitting}>
|
||||
{submitting && <Loader2 size={16} className="animate-spin" />}
|
||||
确认移除
|
||||
</Button>
|
||||
</div>
|
||||
@ -565,21 +544,10 @@ export default function ProjectDetailPage() {
|
||||
</Modal>
|
||||
|
||||
{/* 编辑截止日期弹窗 */}
|
||||
<Modal
|
||||
isOpen={showDeadlineModal}
|
||||
onClose={() => setShowDeadlineModal(false)}
|
||||
title="修改截止日期"
|
||||
>
|
||||
<Modal isOpen={showDeadlineModal} onClose={() => setShowDeadlineModal(false)} title="修改截止日期">
|
||||
<div className="space-y-4">
|
||||
<div className="p-3 rounded-lg bg-bg-elevated">
|
||||
<p className="text-sm text-text-secondary">项目名称</p>
|
||||
<p className="font-medium text-text-primary">{project.name}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-primary mb-2">
|
||||
新截止日期
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-text-primary mb-2">新截止日期</label>
|
||||
<div className="relative">
|
||||
<Calendar size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-text-tertiary" />
|
||||
<input
|
||||
@ -590,21 +558,10 @@ export default function ProjectDetailPage() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 pt-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="flex-1"
|
||||
onClick={() => setShowDeadlineModal(false)}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
className="flex-1"
|
||||
onClick={handleSaveDeadline}
|
||||
disabled={!newDeadline}
|
||||
>
|
||||
<Button variant="secondary" className="flex-1" onClick={() => setShowDeadlineModal(false)}>取消</Button>
|
||||
<Button variant="primary" className="flex-1" onClick={handleSaveDeadline} disabled={!newDeadline || submitting}>
|
||||
{submitting && <Loader2 size={16} className="animate-spin" />}
|
||||
保存
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useToast } from '@/components/ui/Toast'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
|
||||
import { Card, CardContent } from '@/components/ui/Card'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { Input } from '@/components/ui/Input'
|
||||
import {
|
||||
@ -16,52 +16,81 @@ import {
|
||||
Users,
|
||||
Search,
|
||||
Building2,
|
||||
Check
|
||||
Check,
|
||||
Loader2
|
||||
} from 'lucide-react'
|
||||
import { api } from '@/lib/api'
|
||||
import { USE_MOCK } from '@/contexts/AuthContext'
|
||||
import { useOSSUpload } from '@/hooks/useOSSUpload'
|
||||
import type { AgencyDetail } from '@/types/organization'
|
||||
|
||||
// 平台选项
|
||||
const platformOptions = [
|
||||
{ id: 'douyin', name: '抖音', icon: '🎵', color: 'bg-[#1a1a1a]' },
|
||||
{ id: 'xiaohongshu', name: '小红书', icon: '📕', color: 'bg-[#fe2c55]' },
|
||||
{ id: 'bilibili', name: 'B站', icon: '📺', color: 'bg-[#00a1d6]' },
|
||||
{ id: 'kuaishou', name: '快手', icon: '⚡', color: 'bg-[#ff4906]' },
|
||||
{ id: 'weibo', name: '微博', icon: '🔴', color: 'bg-[#e6162d]' },
|
||||
{ id: 'wechat', name: '微信视频号', icon: '💬', color: 'bg-[#07c160]' },
|
||||
]
|
||||
|
||||
// 模拟品牌方已添加的代理商（来自代理商管理）
|
||||
const mockAgencies = [
|
||||
{ id: 'AG789012', name: '星耀传媒', companyName: '上海星耀文化传媒有限公司', creatorCount: 50, passRate: 92 },
|
||||
{ id: 'AG456789', name: '创意无限', companyName: '深圳创意无限广告有限公司', creatorCount: 35, passRate: 88 },
|
||||
{ id: 'AG123456', name: '美妆达人MCN', companyName: '杭州美妆达人网络科技有限公司', creatorCount: 28, passRate: 82 },
|
||||
{ id: 'AG111111', name: '蓝海科技', companyName: '北京蓝海数字科技有限公司', creatorCount: 42, passRate: 85 },
|
||||
{ id: 'AG222222', name: '云创网络', companyName: '杭州云创网络技术有限公司', creatorCount: 30, passRate: 90 },
|
||||
{ id: 'AG333333', name: '天府传媒', companyName: '成都天府传媒集团有限公司', creatorCount: 25, passRate: 87 },
|
||||
// ==================== Mock 数据 ====================
|
||||
const mockAgencies: AgencyDetail[] = [
|
||||
{ id: 'AG789012', name: '星耀传媒', force_pass_enabled: true },
|
||||
{ id: 'AG456789', name: '创意无限', force_pass_enabled: false },
|
||||
{ id: 'AG123456', name: '美妆达人MCN', force_pass_enabled: false },
|
||||
{ id: 'AG111111', name: '蓝海科技', force_pass_enabled: true },
|
||||
{ id: 'AG222222', name: '云创网络', force_pass_enabled: false },
|
||||
{ id: 'AG333333', name: '天府传媒', force_pass_enabled: true },
|
||||
]
|
||||
|
||||
export default function CreateProjectPage() {
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
const { upload, isUploading, progress: uploadProgress } = useOSSUpload('general')
|
||||
|
||||
const [projectName, setProjectName] = useState('')
|
||||
const [description, setDescription] = useState('')
|
||||
const [deadline, setDeadline] = useState('')
|
||||
const [briefFile, setBriefFile] = useState<File | null>(null)
|
||||
const [briefFileUrl, setBriefFileUrl] = useState<string | null>(null)
|
||||
const [selectedAgencies, setSelectedAgencies] = useState<string[]>([])
|
||||
const [selectedPlatform, setSelectedPlatform] = useState<string>('')
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [agencySearch, setAgencySearch] = useState('')
|
||||
const [agencies, setAgencies] = useState<AgencyDetail[]>([])
|
||||
const [loadingAgencies, setLoadingAgencies] = useState(true)
|
||||
|
||||
// 搜索过滤代理商
|
||||
const filteredAgencies = mockAgencies.filter(agency =>
|
||||
useEffect(() => {
|
||||
const loadAgencies = async () => {
|
||||
if (USE_MOCK) {
|
||||
setAgencies(mockAgencies)
|
||||
setLoadingAgencies(false)
|
||||
return
|
||||
}
|
||||
try {
|
||||
const data = await api.listBrandAgencies()
|
||||
setAgencies(data.items)
|
||||
} catch (err) {
|
||||
console.error('Failed to load agencies:', err)
|
||||
toast.error('加载代理商列表失败')
|
||||
} finally {
|
||||
setLoadingAgencies(false)
|
||||
}
|
||||
}
|
||||
loadAgencies()
|
||||
}, [toast])
|
||||
|
||||
const filteredAgencies = agencies.filter(agency =>
|
||||
agencySearch === '' ||
|
||||
agency.name.toLowerCase().includes(agencySearch.toLowerCase()) ||
|
||||
agency.id.toLowerCase().includes(agencySearch.toLowerCase()) ||
|
||||
agency.companyName.toLowerCase().includes(agencySearch.toLowerCase())
|
||||
agency.id.toLowerCase().includes(agencySearch.toLowerCase())
|
||||
)
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0]
|
||||
if (file) {
|
||||
setBriefFile(file)
|
||||
if (!file) return
|
||||
setBriefFile(file)
|
||||
|
||||
if (!USE_MOCK) {
|
||||
try {
|
||||
const result = await upload(file)
|
||||
setBriefFileUrl(result.url)
|
||||
} catch (err) {
|
||||
toast.error('文件上传失败')
|
||||
setBriefFile(null)
|
||||
}
|
||||
} else {
|
||||
setBriefFileUrl('mock://brief-file.pdf')
|
||||
}
|
||||
}
|
||||
|
||||
@ -74,23 +103,46 @@ export default function CreateProjectPage() {
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!projectName.trim() || !deadline || !briefFile || selectedAgencies.length === 0 || !selectedPlatform) {
|
||||
if (!projectName.trim() || !deadline || selectedAgencies.length === 0) {
|
||||
toast.error('请填写完整信息')
|
||||
return
|
||||
}
|
||||
|
||||
setIsSubmitting(true)
|
||||
// 模拟提交
|
||||
await new Promise(resolve => setTimeout(resolve, 1500))
|
||||
toast.success('项目创建成功！')
|
||||
router.push('/brand')
|
||||
try {
|
||||
if (USE_MOCK) {
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
} else {
|
||||
const project = await api.createProject({
|
||||
name: projectName.trim(),
|
||||
description: description.trim() || undefined,
|
||||
deadline,
|
||||
agency_ids: selectedAgencies,
|
||||
})
|
||||
|
||||
// If brief file was uploaded, create brief
|
||||
if (briefFileUrl && briefFile) {
|
||||
await api.createBrief(project.id, {
|
||||
file_url: briefFileUrl,
|
||||
file_name: briefFile.name,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
toast.success('项目创建成功！')
|
||||
router.push('/brand')
|
||||
} catch (err) {
|
||||
console.error('Failed to create project:', err)
|
||||
toast.error('创建失败，请重试')
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const isValid = projectName.trim() && deadline && briefFile && selectedAgencies.length > 0 && selectedPlatform
|
||||
const isValid = projectName.trim() && deadline && selectedAgencies.length > 0
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-4xl">
|
||||
{/* 顶部导航 */}
|
||||
<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" />
|
||||
@ -114,36 +166,15 @@ export default function CreateProjectPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 选择平台 */}
|
||||
{/* 项目描述 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-primary mb-2">
|
||||
发布平台 <span className="text-accent-coral">*</span>
|
||||
</label>
|
||||
<p className="text-xs text-text-tertiary mb-3">选择视频将发布的平台，系统将应用对应平台的审核规则</p>
|
||||
<div className="grid grid-cols-3 md:grid-cols-6 gap-3">
|
||||
{platformOptions.map((platform) => (
|
||||
<button
|
||||
key={platform.id}
|
||||
type="button"
|
||||
onClick={() => setSelectedPlatform(platform.id)}
|
||||
className={`p-3 rounded-xl border-2 transition-all flex flex-col items-center gap-2 ${
|
||||
selectedPlatform === platform.id
|
||||
? 'border-accent-indigo bg-accent-indigo/10'
|
||||
: 'border-border-subtle hover:border-accent-indigo/50'
|
||||
}`}
|
||||
>
|
||||
<div className={`w-10 h-10 ${platform.color} rounded-lg flex items-center justify-center text-lg`}>
|
||||
{platform.icon}
|
||||
</div>
|
||||
<span className="text-sm font-medium text-text-primary">{platform.name}</span>
|
||||
{selectedPlatform === platform.id && (
|
||||
<div className="absolute top-1 right-1 w-4 h-4 rounded-full bg-accent-indigo flex items-center justify-center">
|
||||
<Check size={10} className="text-white" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<label className="block text-sm font-medium text-text-primary mb-2">项目描述</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="简要描述项目目标和要求..."
|
||||
className="w-full h-24 px-4 py-3 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary resize-none focus:outline-none focus:ring-2 focus:ring-accent-indigo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 截止日期 */}
|
||||
@ -164,17 +195,18 @@ export default function CreateProjectPage() {
|
||||
|
||||
{/* Brief 上传 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-primary mb-2">
|
||||
上传 Brief <span className="text-accent-coral">*</span>
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-text-primary mb-2">上传 Brief</label>
|
||||
<div className="border-2 border-dashed border-border-subtle rounded-lg p-8 text-center hover:border-accent-indigo/50 transition-colors">
|
||||
{briefFile ? (
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<FileText size={24} className="text-accent-indigo" />
|
||||
<span className="text-text-primary">{briefFile.name}</span>
|
||||
{isUploading && (
|
||||
<span className="text-xs text-text-tertiary">{uploadProgress}%</span>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setBriefFile(null)}
|
||||
onClick={() => { setBriefFile(null); setBriefFileUrl(null) }}
|
||||
className="p-1 hover:bg-bg-elevated rounded-full"
|
||||
>
|
||||
<X size={16} className="text-text-tertiary" />
|
||||
@ -205,71 +237,69 @@ export default function CreateProjectPage() {
|
||||
</span>
|
||||
</label>
|
||||
|
||||
{/* 搜索框 */}
|
||||
<div className="relative mb-4">
|
||||
<Search size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-text-tertiary" />
|
||||
<input
|
||||
type="text"
|
||||
value={agencySearch}
|
||||
onChange={(e) => setAgencySearch(e.target.value)}
|
||||
placeholder="搜索代理商名称、ID或公司名..."
|
||||
placeholder="搜索代理商名称或ID..."
|
||||
className="w-full pl-11 pr-4 py-3 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 代理商列表 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-80 overflow-y-auto">
|
||||
{filteredAgencies.length > 0 ? (
|
||||
filteredAgencies.map((agency) => {
|
||||
const isSelected = selectedAgencies.includes(agency.id)
|
||||
return (
|
||||
<button
|
||||
key={agency.id}
|
||||
type="button"
|
||||
onClick={() => toggleAgency(agency.id)}
|
||||
className={`p-4 rounded-xl border-2 text-left transition-all ${
|
||||
isSelected
|
||||
? 'border-accent-indigo bg-accent-indigo/10'
|
||||
: 'border-border-subtle hover:border-accent-indigo/50'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
|
||||
isSelected ? 'bg-accent-indigo' : 'bg-accent-indigo/15'
|
||||
}`}>
|
||||
{isSelected ? (
|
||||
<CheckCircle size={20} className="text-white" />
|
||||
) : (
|
||||
<Building2 size={20} className="text-accent-indigo" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-text-primary">{agency.name}</span>
|
||||
<span className="text-xs text-text-tertiary font-mono">{agency.id}</span>
|
||||
{loadingAgencies ? (
|
||||
<div className="flex items-center justify-center py-8 text-text-tertiary">
|
||||
<Loader2 size={20} className="animate-spin mr-2" />
|
||||
加载代理商列表...
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-80 overflow-y-auto">
|
||||
{filteredAgencies.length > 0 ? (
|
||||
filteredAgencies.map((agency) => {
|
||||
const isSelected = selectedAgencies.includes(agency.id)
|
||||
return (
|
||||
<button
|
||||
key={agency.id}
|
||||
type="button"
|
||||
onClick={() => toggleAgency(agency.id)}
|
||||
className={`p-4 rounded-xl border-2 text-left transition-all ${
|
||||
isSelected
|
||||
? 'border-accent-indigo bg-accent-indigo/10'
|
||||
: 'border-border-subtle hover:border-accent-indigo/50'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
|
||||
isSelected ? 'bg-accent-indigo' : 'bg-accent-indigo/15'
|
||||
}`}>
|
||||
{isSelected ? (
|
||||
<CheckCircle size={20} className="text-white" />
|
||||
) : (
|
||||
<Building2 size={20} className="text-accent-indigo" />
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-text-secondary truncate mt-0.5">{agency.companyName}</p>
|
||||
<div className="flex items-center gap-4 mt-1.5 text-xs text-text-tertiary">
|
||||
<span className="flex items-center gap-1">
|
||||
<Users size={12} />
|
||||
{agency.creatorCount} 达人
|
||||
</span>
|
||||
<span className={agency.passRate >= 90 ? 'text-accent-green' : agency.passRate >= 80 ? 'text-accent-indigo' : 'text-orange-400'}>
|
||||
通过率 {agency.passRate}%
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-text-primary">{agency.name}</span>
|
||||
<span className="text-xs text-text-tertiary font-mono">{agency.id}</span>
|
||||
</div>
|
||||
{agency.contact_name && (
|
||||
<p className="text-sm text-text-secondary mt-0.5">{agency.contact_name}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<div className="col-span-2 text-center py-8 text-text-tertiary">
|
||||
<Search size={32} className="mx-auto mb-2 opacity-50" />
|
||||
<p>未找到匹配的代理商</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<div className="col-span-2 text-center py-8 text-text-tertiary">
|
||||
<Search size={32} className="mx-auto mb-2 opacity-50" />
|
||||
<p>未找到匹配的代理商</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-xs text-text-tertiary mt-3">
|
||||
仅显示已在"代理商管理"中添加的代理商
|
||||
@ -281,11 +311,13 @@ export default function CreateProjectPage() {
|
||||
<Button variant="secondary" onClick={() => router.back()}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
disabled={!isValid || isSubmitting}
|
||||
>
|
||||
{isSubmitting ? '创建中...' : '创建项目'}
|
||||
<Button onClick={handleSubmit} disabled={!isValid || isSubmitting || isUploading}>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 size={16} className="animate-spin" />
|
||||
创建中...
|
||||
</>
|
||||
) : '创建项目'}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import {
|
||||
Video,
|
||||
@ -17,225 +17,84 @@ import {
|
||||
} from 'lucide-react'
|
||||
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { platformOptions, getPlatformInfo } from '@/lib/platforms'
|
||||
import { getPlatformInfo } from '@/lib/platforms'
|
||||
import { api } from '@/lib/api'
|
||||
import { USE_MOCK } from '@/contexts/AuthContext'
|
||||
import { useSSE } from '@/contexts/SSEContext'
|
||||
import { mapTaskToUI, type StepStatus, type StageSteps } from '@/lib/taskStageMapper'
|
||||
import type { TaskResponse } from '@/types/task'
|
||||
|
||||
// 任务阶段状态类型
|
||||
type StageStatus = 'pending' | 'current' | 'done' | 'error'
|
||||
|
||||
// 任务数据类型
|
||||
// UI 用任务数据（从 API 数据映射而来）
|
||||
type Task = {
|
||||
id: string
|
||||
title: string
|
||||
description: string
|
||||
platform: string // 发布平台
|
||||
// 脚本阶段
|
||||
scriptStage: {
|
||||
submit: StageStatus
|
||||
ai: StageStatus
|
||||
agency: StageStatus
|
||||
brand: StageStatus
|
||||
}
|
||||
// 视频阶段
|
||||
videoStage: {
|
||||
submit: StageStatus
|
||||
ai: StageStatus
|
||||
agency: StageStatus
|
||||
brand: StageStatus
|
||||
}
|
||||
// 按钮配置
|
||||
platform: string
|
||||
scriptStage: StageSteps
|
||||
videoStage: StageSteps
|
||||
buttonText: string
|
||||
buttonType: 'upload' | 'view' | 'fix'
|
||||
// 阶段颜色
|
||||
scriptColor: 'blue' | 'indigo' | 'coral' | 'green'
|
||||
videoColor: 'tertiary' | 'blue' | 'indigo' | 'coral' | 'green'
|
||||
scriptColor: string
|
||||
videoColor: string
|
||||
filterCategory: 'pending' | 'reviewing' | 'rejected' | 'completed'
|
||||
}
|
||||
|
||||
// 15个任务数据，覆盖所有状态
|
||||
// Mock 数据（开发模式使用）
|
||||
const mockTasks: Task[] = [
|
||||
{
|
||||
id: 'task-001',
|
||||
title: 'XX品牌618推广',
|
||||
description: '产品种草视频 · 时长要求 60-90秒 · 截止: 2026-02-10',
|
||||
platform: 'douyin',
|
||||
id: 'task-001', title: 'XX品牌618推广', description: '产品种草视频 · 时长要求 60-90秒 · 截止: 2026-02-10', platform: 'douyin',
|
||||
scriptStage: { submit: 'current', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||
buttonText: '上传脚本',
|
||||
buttonType: 'upload',
|
||||
scriptColor: 'blue',
|
||||
videoColor: 'tertiary',
|
||||
buttonText: '上传脚本', buttonType: 'upload', scriptColor: 'blue', videoColor: 'tertiary', filterCategory: 'pending',
|
||||
},
|
||||
{
|
||||
id: 'task-002',
|
||||
title: 'YY美妆新品',
|
||||
description: '口播测评 · 已上传视频 · 提交于: 今天 14:30',
|
||||
platform: 'xiaohongshu',
|
||||
id: 'task-002', title: 'YY美妆新品', description: '口播测评 · 已上传视频 · 提交于: 今天 14:30', platform: 'xiaohongshu',
|
||||
scriptStage: { submit: 'done', ai: 'current', agency: 'pending', brand: 'pending' },
|
||||
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||
buttonText: '查看详情',
|
||||
buttonType: 'view',
|
||||
scriptColor: 'indigo',
|
||||
videoColor: 'tertiary',
|
||||
buttonText: '查看详情', buttonType: 'view', scriptColor: 'indigo', videoColor: 'tertiary', filterCategory: 'reviewing',
|
||||
},
|
||||
{
|
||||
id: 'task-003',
|
||||
title: 'ZZ饮品夏日',
|
||||
description: '探店Vlog · 发现2处问题 · 需修改后重新提交',
|
||||
platform: 'bilibili',
|
||||
id: 'task-003', title: 'ZZ饮品夏日', description: '探店Vlog · 发现2处问题 · 需修改后重新提交', platform: 'bilibili',
|
||||
scriptStage: { submit: 'done', ai: 'error', agency: 'pending', brand: 'pending' },
|
||||
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||
buttonText: '查看修改',
|
||||
buttonType: 'fix',
|
||||
scriptColor: 'coral',
|
||||
videoColor: 'tertiary',
|
||||
buttonText: '查看修改', buttonType: 'fix', scriptColor: 'coral', videoColor: 'tertiary', filterCategory: 'rejected',
|
||||
},
|
||||
{
|
||||
id: 'task-004',
|
||||
title: 'AA数码新品发布',
|
||||
description: '开箱测评 · 审核通过 · 可发布',
|
||||
platform: 'douyin',
|
||||
id: 'task-004', title: 'AA数码新品发布', description: '开箱测评 · 审核通过 · 可发布', platform: 'douyin',
|
||||
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
|
||||
videoStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
|
||||
buttonText: '查看详情',
|
||||
buttonType: 'view',
|
||||
scriptColor: 'green',
|
||||
videoColor: 'green',
|
||||
buttonText: '查看详情', buttonType: 'view', scriptColor: 'green', videoColor: 'green', filterCategory: 'completed',
|
||||
},
|
||||
{
|
||||
id: 'task-005',
|
||||
title: 'BB运动饮料',
|
||||
description: '运动场景 · 脚本AI审核中 · 等待结果',
|
||||
platform: 'kuaishou',
|
||||
scriptStage: { submit: 'done', ai: 'current', agency: 'pending', brand: 'pending' },
|
||||
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||
buttonText: '查看详情',
|
||||
buttonType: 'view',
|
||||
scriptColor: 'indigo',
|
||||
videoColor: 'tertiary',
|
||||
},
|
||||
{
|
||||
id: 'task-006',
|
||||
title: 'CC服装春季款',
|
||||
description: '穿搭展示 · 脚本待代理商审核',
|
||||
platform: 'xiaohongshu',
|
||||
scriptStage: { submit: 'done', ai: 'done', agency: 'current', brand: 'pending' },
|
||||
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||
buttonText: '查看详情',
|
||||
buttonType: 'view',
|
||||
scriptColor: 'indigo',
|
||||
videoColor: 'tertiary',
|
||||
},
|
||||
{
|
||||
id: 'task-007',
|
||||
title: 'DD家电测评',
|
||||
description: '开箱视频 · 脚本待品牌终审',
|
||||
platform: 'bilibili',
|
||||
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'current' },
|
||||
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||
buttonText: '查看详情',
|
||||
buttonType: 'view',
|
||||
scriptColor: 'indigo',
|
||||
videoColor: 'tertiary',
|
||||
},
|
||||
{
|
||||
id: 'task-008',
|
||||
title: 'EE食品试吃',
|
||||
description: '美食测评 · 脚本通过 · 待上传视频',
|
||||
platform: 'douyin',
|
||||
id: 'task-008', title: 'EE食品试吃', description: '美食测评 · 脚本通过 · 待上传视频', platform: 'douyin',
|
||||
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
|
||||
videoStage: { submit: 'current', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||
buttonText: '上传视频',
|
||||
buttonType: 'upload',
|
||||
scriptColor: 'green',
|
||||
videoColor: 'blue',
|
||||
},
|
||||
{
|
||||
id: 'task-009',
|
||||
title: 'FF护肤品',
|
||||
description: '使用教程 · 视频AI审核中',
|
||||
platform: 'xiaohongshu',
|
||||
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
|
||||
videoStage: { submit: 'done', ai: 'current', agency: 'pending', brand: 'pending' },
|
||||
buttonText: '查看详情',
|
||||
buttonType: 'view',
|
||||
scriptColor: 'green',
|
||||
videoColor: 'indigo',
|
||||
},
|
||||
{
|
||||
id: 'task-010',
|
||||
title: 'GG智能手表',
|
||||
description: '功能展示 · 脚本代理商不通过',
|
||||
platform: 'weibo',
|
||||
scriptStage: { submit: 'done', ai: 'done', agency: 'error', brand: 'pending' },
|
||||
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||
buttonText: '查看修改',
|
||||
buttonType: 'fix',
|
||||
scriptColor: 'coral',
|
||||
videoColor: 'tertiary',
|
||||
},
|
||||
{
|
||||
id: 'task-011',
|
||||
title: 'HH美妆代言',
|
||||
description: '品牌代言 · 脚本品牌不通过',
|
||||
platform: 'xiaohongshu',
|
||||
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'error' },
|
||||
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||
buttonText: '查看修改',
|
||||
buttonType: 'fix',
|
||||
scriptColor: 'coral',
|
||||
videoColor: 'tertiary',
|
||||
},
|
||||
{
|
||||
id: 'task-012',
|
||||
title: 'II数码配件',
|
||||
description: '配件展示 · 视频代理商审核中',
|
||||
platform: 'bilibili',
|
||||
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
|
||||
videoStage: { submit: 'done', ai: 'done', agency: 'current', brand: 'pending' },
|
||||
buttonText: '查看详情',
|
||||
buttonType: 'view',
|
||||
scriptColor: 'green',
|
||||
videoColor: 'indigo',
|
||||
},
|
||||
{
|
||||
id: 'task-013',
|
||||
title: 'JJ旅行vlog',
|
||||
description: '旅行记录 · 视频代理商不通过',
|
||||
platform: 'wechat',
|
||||
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
|
||||
videoStage: { submit: 'done', ai: 'done', agency: 'error', brand: 'pending' },
|
||||
buttonText: '查看修改',
|
||||
buttonType: 'fix',
|
||||
scriptColor: 'green',
|
||||
videoColor: 'coral',
|
||||
},
|
||||
{
|
||||
id: 'task-014',
|
||||
title: 'KK宠物用品',
|
||||
description: '宠物日常 · 视频品牌终审中',
|
||||
platform: 'douyin',
|
||||
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
|
||||
videoStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'current' },
|
||||
buttonText: '查看详情',
|
||||
buttonType: 'view',
|
||||
scriptColor: 'green',
|
||||
videoColor: 'indigo',
|
||||
},
|
||||
{
|
||||
id: 'task-015',
|
||||
title: 'LL厨房电器',
|
||||
description: '使用演示 · 视频品牌不通过',
|
||||
platform: 'kuaishou',
|
||||
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
|
||||
videoStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'error' },
|
||||
buttonText: '查看修改',
|
||||
buttonType: 'fix',
|
||||
scriptColor: 'green',
|
||||
videoColor: 'coral',
|
||||
buttonText: '上传视频', buttonType: 'upload', scriptColor: 'green', videoColor: 'blue', filterCategory: 'pending',
|
||||
},
|
||||
]
|
||||
|
||||
function mapTaskResponseToUI(task: TaskResponse): Task {
|
||||
const ui = mapTaskToUI(task)
|
||||
const buttonTypeMap: Record<string, 'upload' | 'view' | 'fix'> = {
|
||||
primary: 'upload', success: 'view', warning: 'fix', disabled: 'view',
|
||||
}
|
||||
return {
|
||||
id: task.id,
|
||||
title: task.name,
|
||||
description: `${task.project.name} · ${ui.statusLabel}`,
|
||||
platform: 'douyin', // 后端暂无平台字段，默认
|
||||
scriptStage: ui.scriptStage,
|
||||
videoStage: ui.videoStage,
|
||||
buttonText: ui.buttonText,
|
||||
buttonType: buttonTypeMap[ui.buttonType] || 'view',
|
||||
scriptColor: ui.scriptColor,
|
||||
videoColor: ui.videoColor,
|
||||
filterCategory: ui.filterCategory,
|
||||
}
|
||||
}
|
||||
|
||||
// 步骤图标组件
|
||||
function StepIcon({ status, icon }: { status: StageStatus; icon: 'upload' | 'bot' | 'users' | 'building' }) {
|
||||
function StepIcon({ status, icon }: { status: StepStatus; icon: 'upload' | 'bot' | 'users' | 'building' }) {
|
||||
const IconComponent = {
|
||||
upload: Upload,
|
||||
bot: Bot,
|
||||
@ -273,7 +132,7 @@ function StepIcon({ status, icon }: { status: StageStatus; icon: 'upload' | 'bot
|
||||
|
||||
// 进度条组件
|
||||
function ProgressBar({ stage, color }: {
|
||||
stage: { submit: StageStatus; ai: StageStatus; agency: StageStatus; brand: StageStatus }
|
||||
stage: StageSteps
|
||||
color: string
|
||||
}) {
|
||||
const steps = [
|
||||
@ -283,12 +142,12 @@ function ProgressBar({ stage, color }: {
|
||||
{ key: 'brand', label: '品牌', icon: 'building' as const, status: stage.brand },
|
||||
]
|
||||
|
||||
const getLineColor = (fromStatus: StageStatus) => {
|
||||
const getLineColor = (fromStatus: StepStatus) => {
|
||||
if (fromStatus === 'done') return 'bg-accent-green'
|
||||
return 'bg-border-subtle'
|
||||
}
|
||||
|
||||
const getLabelColor = (status: StageStatus) => {
|
||||
const getLabelColor = (status: StepStatus) => {
|
||||
if (status === 'done') return 'text-text-secondary'
|
||||
if (status === 'current') return 'text-accent-indigo font-semibold'
|
||||
if (status === 'error') return 'text-accent-coral font-semibold'
|
||||
@ -322,6 +181,7 @@ function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
|
||||
case 'indigo': return 'text-accent-indigo'
|
||||
case 'coral': return 'text-accent-coral'
|
||||
case 'green': return 'text-accent-green'
|
||||
case 'red': return 'text-accent-coral'
|
||||
default: return 'text-text-tertiary'
|
||||
}
|
||||
}
|
||||
@ -342,7 +202,6 @@ function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
|
||||
className="bg-bg-card rounded-2xl overflow-hidden card-shadow cursor-pointer hover:bg-bg-elevated/30 transition-colors"
|
||||
onClick={onClick}
|
||||
>
|
||||
{/* 平台顶部条 */}
|
||||
{platform && (
|
||||
<div className={`px-5 py-2 ${platform.bgColor} border-b ${platform.borderColor} flex items-center gap-2`}>
|
||||
<span className="text-base">{platform.icon}</span>
|
||||
@ -351,9 +210,7 @@ function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
|
||||
)}
|
||||
|
||||
<div className="p-5 flex flex-col gap-4">
|
||||
{/* 任务主行 */}
|
||||
<div className="flex items-center justify-between">
|
||||
{/* 左侧：缩略图 + 信息 */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-20 h-[60px] rounded-lg bg-[#1A1A1E] flex items-center justify-center flex-shrink-0">
|
||||
<Video className="w-6 h-6 text-text-tertiary" />
|
||||
@ -364,7 +221,6 @@ function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧：操作按钮 */}
|
||||
<button
|
||||
type="button"
|
||||
className={cn('px-5 py-2.5 rounded-[10px] text-sm font-semibold', getButtonStyle())}
|
||||
@ -374,16 +230,13 @@ function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 进度条容器 */}
|
||||
<div className="flex flex-col gap-3 pt-3">
|
||||
{/* 脚本阶段 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={cn('text-xs font-semibold w-8', getStageColor(task.scriptColor))}>脚本</span>
|
||||
<div className="flex-1">
|
||||
<ProgressBar stage={task.scriptStage} color={task.scriptColor} />
|
||||
</div>
|
||||
</div>
|
||||
{/* 视频阶段 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={cn('text-xs font-semibold w-8', getStageColor(task.videoColor))}>视频</span>
|
||||
<div className="flex-1">
|
||||
@ -396,7 +249,6 @@ function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
|
||||
)
|
||||
}
|
||||
|
||||
// 任务状态筛选选项
|
||||
type TaskFilter = 'all' | 'pending' | 'reviewing' | 'rejected' | 'completed'
|
||||
|
||||
const filterOptions: { value: TaskFilter; label: string }[] = [
|
||||
@ -407,45 +259,85 @@ const filterOptions: { value: TaskFilter; label: string }[] = [
|
||||
{ value: 'completed', label: '已完成' },
|
||||
]
|
||||
|
||||
// 根据任务状态获取筛选分类
|
||||
const getTaskFilterCategory = (task: Task): TaskFilter => {
|
||||
// 如果视频阶段全部完成，则为已完成
|
||||
if (task.videoStage.brand === 'done') return 'completed'
|
||||
// 如果有任何阶段为 error，则为已驳回
|
||||
if (
|
||||
task.scriptStage.ai === 'error' ||
|
||||
task.scriptStage.agency === 'error' ||
|
||||
task.scriptStage.brand === 'error' ||
|
||||
task.videoStage.ai === 'error' ||
|
||||
task.videoStage.agency === 'error' ||
|
||||
task.videoStage.brand === 'error'
|
||||
) return 'rejected'
|
||||
// 如果脚本阶段待提交或视频阶段待提交（且脚本已完成）
|
||||
if (task.scriptStage.submit === 'current' || (task.scriptStage.brand === 'done' && task.videoStage.submit === 'current')) return 'pending'
|
||||
// 其他情况为审核中
|
||||
return 'reviewing'
|
||||
// 骨架屏
|
||||
function TaskSkeleton() {
|
||||
return (
|
||||
<div className="bg-bg-card rounded-2xl overflow-hidden card-shadow animate-pulse">
|
||||
<div className="px-5 py-2 bg-bg-elevated border-b border-border-subtle">
|
||||
<div className="h-4 w-20 bg-bg-page rounded" />
|
||||
</div>
|
||||
<div className="p-5 flex flex-col gap-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-20 h-[60px] rounded-lg bg-bg-elevated" />
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="h-4 w-32 bg-bg-elevated rounded" />
|
||||
<div className="h-3 w-48 bg-bg-elevated rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-10 w-24 bg-bg-elevated rounded-[10px]" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 pt-3">
|
||||
<div className="h-8 bg-bg-elevated rounded" />
|
||||
<div className="h-8 bg-bg-elevated rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function CreatorTasksPage() {
|
||||
const router = useRouter()
|
||||
const { subscribe } = useSSE()
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [filter, setFilter] = useState<TaskFilter>('all')
|
||||
const [showFilterDropdown, setShowFilterDropdown] = useState(false)
|
||||
const [tasks] = useState<Task[]>(mockTasks)
|
||||
const [tasks, setTasks] = useState<Task[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [total, setTotal] = useState(0)
|
||||
|
||||
const loadTasks = useCallback(async () => {
|
||||
if (USE_MOCK) {
|
||||
setTasks(mockTasks)
|
||||
setTotal(mockTasks.length)
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
setIsLoading(true)
|
||||
const response = await api.listTasks(1, 50)
|
||||
const mapped = response.items.map(mapTaskResponseToUI)
|
||||
setTasks(mapped)
|
||||
setTotal(response.total)
|
||||
} catch (err) {
|
||||
console.error('加载任务失败:', err)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
loadTasks()
|
||||
}, [loadTasks])
|
||||
|
||||
// SSE 实时更新
|
||||
useEffect(() => {
|
||||
const unsub1 = subscribe('task_updated', () => { loadTasks() })
|
||||
const unsub2 = subscribe('new_task', () => { loadTasks() })
|
||||
return () => { unsub1(); unsub2() }
|
||||
}, [subscribe, loadTasks])
|
||||
|
||||
const handleTaskClick = (taskId: string) => {
|
||||
router.push(`/creator/task/${taskId}`)
|
||||
}
|
||||
|
||||
// 过滤任务
|
||||
const filteredTasks = tasks.filter(task => {
|
||||
// 搜索过滤
|
||||
const matchesSearch = searchQuery === '' ||
|
||||
task.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
task.description.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
|
||||
// 状态过滤
|
||||
const matchesFilter = filter === 'all' || getTaskFilterCategory(task) === filter
|
||||
const matchesFilter = filter === 'all' || task.filterCategory === filter
|
||||
|
||||
return matchesSearch && matchesFilter
|
||||
})
|
||||
@ -455,12 +347,11 @@ export default function CreatorTasksPage() {
|
||||
return (
|
||||
<ResponsiveLayout role="creator">
|
||||
<div className="flex flex-col gap-6 h-full">
|
||||
{/* 顶部栏 */}
|
||||
<div className="flex items-center justify-between flex-wrap gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-2xl lg:text-[28px] font-bold text-text-primary">我的任务</h1>
|
||||
<p className="text-sm lg:text-[15px] text-text-secondary">
|
||||
{filter === 'all' ? `共 ${tasks.length} 个任务` : `${currentFilterLabel} ${filteredTasks.length} 个`}
|
||||
{filter === 'all' ? `共 ${total} 个任务` : `${currentFilterLabel} ${filteredTasks.length} 个`}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
@ -521,9 +412,14 @@ export default function CreatorTasksPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 任务列表 - 可滚动 */}
|
||||
<div className="flex flex-col gap-4 flex-1 overflow-y-auto pr-2">
|
||||
{filteredTasks.length === 0 ? (
|
||||
{isLoading ? (
|
||||
<>
|
||||
<TaskSkeleton />
|
||||
<TaskSkeleton />
|
||||
<TaskSkeleton />
|
||||
</>
|
||||
) : filteredTasks.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center">
|
||||
<Search className="w-12 h-12 text-text-tertiary mb-4" />
|
||||
<p className="text-text-secondary">没有找到匹配的任务</p>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,299 +1,213 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useRouter, useParams, useSearchParams } from 'next/navigation'
|
||||
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 { SuccessTag, WarningTag, ErrorTag, PendingTag } from '@/components/ui/Tag'
|
||||
import { SuccessTag, WarningTag, ErrorTag } from '@/components/ui/Tag'
|
||||
import { ReviewSteps, getReviewSteps } from '@/components/ui/ReviewSteps'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Upload,
|
||||
FileText,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
AlertTriangle,
|
||||
Clock,
|
||||
Loader2,
|
||||
RefreshCw,
|
||||
Eye,
|
||||
MessageSquare,
|
||||
Download,
|
||||
File,
|
||||
Target,
|
||||
Ban,
|
||||
ChevronDown,
|
||||
ChevronUp
|
||||
ArrowLeft, Upload, FileText, CheckCircle, XCircle, AlertTriangle,
|
||||
Clock, Loader2, RefreshCw, Eye, Download, File, Target, Ban,
|
||||
ChevronDown, ChevronUp
|
||||
} from 'lucide-react'
|
||||
import { Modal } from '@/components/ui/Modal'
|
||||
import { api } from '@/lib/api'
|
||||
import { USE_MOCK } from '@/contexts/AuthContext'
|
||||
import { useSSE } from '@/contexts/SSEContext'
|
||||
import { useOSSUpload } from '@/hooks/useOSSUpload'
|
||||
import type { TaskResponse, AIReviewResult } from '@/types/task'
|
||||
import type { BriefResponse } from '@/types/brief'
|
||||
|
||||
// 代理商Brief文档（达人可查看）
|
||||
type AgencyBriefFile = {
|
||||
id: string
|
||||
name: string
|
||||
size: string
|
||||
uploadedAt: string
|
||||
description?: string
|
||||
// ========== 类型 ==========
|
||||
type AgencyBriefFile = { id: string; name: string; size: string; uploadedAt: string; description?: string }
|
||||
|
||||
type ScriptTaskUI = {
|
||||
projectName: string
|
||||
brandName: string
|
||||
scriptStatus: string
|
||||
scriptFile: string | null
|
||||
aiResult: null | {
|
||||
score: number
|
||||
violations: Array<{ type: string; content: string; suggestion: string }>
|
||||
complianceChecks: Array<{ item: string; passed: boolean; note?: string }>
|
||||
}
|
||||
agencyReview: null | { result: 'approved' | 'rejected'; comment: string; reviewer: string; time: string }
|
||||
brandReview: null | { result: 'approved' | 'rejected'; comment: string; reviewer: string; time: string }
|
||||
}
|
||||
|
||||
const mockAgencyBrief = {
|
||||
// 代理商上传的Brief文档
|
||||
type BriefUI = {
|
||||
files: AgencyBriefFile[]
|
||||
sellingPoints: { id: string; content: string; required: boolean }[]
|
||||
blacklistWords: { id: string; word: string; reason: string }[]
|
||||
}
|
||||
|
||||
// ========== 映射 ==========
|
||||
function mapApiToScriptUI(task: TaskResponse): ScriptTaskUI {
|
||||
const stage = task.stage
|
||||
let status = 'pending_upload'
|
||||
switch (stage) {
|
||||
case 'script_upload': status = 'pending_upload'; break
|
||||
case 'script_ai_review': status = 'ai_reviewing'; break
|
||||
case 'script_agency_review': status = 'agent_reviewing'; break
|
||||
case 'script_brand_review': status = 'brand_reviewing'; break
|
||||
default:
|
||||
if (stage.startsWith('video_') || stage === 'completed') status = 'brand_passed'
|
||||
if (stage === 'rejected') {
|
||||
if (task.script_brand_status === 'rejected') status = 'brand_rejected'
|
||||
else if (task.script_agency_status === 'rejected') status = 'agent_rejected'
|
||||
else status = 'ai_result'
|
||||
}
|
||||
}
|
||||
// 有 AI 结果且还在脚本审核阶段 → ai_result
|
||||
if (task.script_ai_result && stage === 'script_agency_review') status = 'agent_reviewing'
|
||||
|
||||
const aiResult = task.script_ai_result ? {
|
||||
score: task.script_ai_result.score,
|
||||
violations: task.script_ai_result.violations.map(v => ({ type: v.type, content: v.content, suggestion: v.suggestion })),
|
||||
complianceChecks: task.script_ai_result.violations.map(v => ({
|
||||
item: v.type, passed: v.severity !== 'error' && v.severity !== 'warning', note: v.suggestion,
|
||||
})),
|
||||
} : null
|
||||
|
||||
const agencyReview = task.script_agency_status && task.script_agency_status !== 'pending' ? {
|
||||
result: (task.script_agency_status === 'passed' || task.script_agency_status === 'force_passed' ? 'approved' : 'rejected') as 'approved' | 'rejected',
|
||||
comment: task.script_agency_comment || '',
|
||||
reviewer: task.agency?.name || '代理商',
|
||||
time: task.updated_at,
|
||||
} : null
|
||||
|
||||
const brandReview = task.script_brand_status && task.script_brand_status !== 'pending' ? {
|
||||
result: (task.script_brand_status === 'passed' || task.script_brand_status === 'force_passed' ? 'approved' : 'rejected') as 'approved' | 'rejected',
|
||||
comment: task.script_brand_comment || '',
|
||||
reviewer: '品牌方审核员',
|
||||
time: task.updated_at,
|
||||
} : null
|
||||
|
||||
return {
|
||||
projectName: task.project?.name || task.name,
|
||||
brandName: task.project?.brand_name || '',
|
||||
scriptStatus: status,
|
||||
scriptFile: task.script_file_name || null,
|
||||
aiResult,
|
||||
agencyReview,
|
||||
brandReview,
|
||||
}
|
||||
}
|
||||
|
||||
function mapBriefToUI(brief: BriefResponse): BriefUI {
|
||||
return {
|
||||
files: (brief.attachments || []).map((a, i) => ({
|
||||
id: a.id || `att-${i}`, name: a.name, size: a.size || '', uploadedAt: brief.updated_at || '',
|
||||
})),
|
||||
sellingPoints: (brief.selling_points || []).map((sp, i) => ({ id: `sp-${i}`, content: sp.content, required: sp.required })),
|
||||
blacklistWords: (brief.blacklist_words || []).map((bw, i) => ({ id: `bw-${i}`, word: bw.word, reason: bw.reason })),
|
||||
}
|
||||
}
|
||||
|
||||
// Mock 数据
|
||||
const mockBrief: BriefUI = {
|
||||
files: [
|
||||
{ id: 'af1', name: '达人拍摄指南.pdf', size: '1.5MB', uploadedAt: '2026-02-02', description: '详细的拍摄流程和注意事项' },
|
||||
{ id: 'af2', name: '产品卖点话术.docx', size: '800KB', uploadedAt: '2026-02-02', description: '推荐使用的话术和表达方式' },
|
||||
{ id: 'af3', name: '品牌视觉参考.pdf', size: '3.2MB', uploadedAt: '2026-02-02', description: '视觉风格和拍摄参考示例' },
|
||||
] as AgencyBriefFile[],
|
||||
// 卖点要求
|
||||
{ id: 'af1', name: '达人拍摄指南.pdf', size: '1.5MB', uploadedAt: '2026-02-02' },
|
||||
{ id: 'af2', name: '产品卖点话术.docx', size: '800KB', uploadedAt: '2026-02-02' },
|
||||
],
|
||||
sellingPoints: [
|
||||
{ id: 'sp1', content: 'SPF50+ PA++++', required: true },
|
||||
{ id: 'sp2', content: '轻薄质地，不油腻', required: true },
|
||||
{ id: 'sp3', content: '延展性好，易推开', required: false },
|
||||
{ id: 'sp4', content: '适合敏感肌', required: false },
|
||||
{ id: 'sp5', content: '夏日必备防晒', required: true },
|
||||
],
|
||||
// 违禁词
|
||||
blacklistWords: [
|
||||
{ id: 'bw1', word: '最好', reason: '绝对化用语' },
|
||||
{ id: 'bw2', word: '第一', reason: '绝对化用语' },
|
||||
{ id: 'bw3', word: '神器', reason: '夸大宣传' },
|
||||
{ id: 'bw4', word: '完美', reason: '绝对化用语' },
|
||||
],
|
||||
}
|
||||
|
||||
// 模拟任务数据
|
||||
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
|
||||
},
|
||||
const mockDefaultTask: ScriptTaskUI = {
|
||||
projectName: 'XX品牌618推广', brandName: 'XX护肤品牌',
|
||||
scriptStatus: 'pending_upload', scriptFile: null, aiResult: null, agencyReview: null, brandReview: null,
|
||||
}
|
||||
|
||||
// 根据状态获取模拟数据
|
||||
function getTaskByStatus(status: string) {
|
||||
const task = { ...mockTask, scriptStatus: status }
|
||||
// ========== UI 组件 ==========
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
// 代理商Brief文档查看组件
|
||||
function AgencyBriefSection({ toast }: { toast: ReturnType<typeof useToast> }) {
|
||||
function AgencyBriefSection({ toast, briefData }: { toast: ReturnType<typeof useToast>; briefData: BriefUI }) {
|
||||
const [isExpanded, setIsExpanded] = useState(true)
|
||||
const [previewFile, setPreviewFile] = useState<AgencyBriefFile | null>(null)
|
||||
|
||||
const handleDownload = (file: AgencyBriefFile) => {
|
||||
toast.info(`下载文件: ${file.name}`)
|
||||
}
|
||||
|
||||
const handlePreview = (file: AgencyBriefFile) => {
|
||||
setPreviewFile(file)
|
||||
}
|
||||
|
||||
const requiredPoints = mockAgencyBrief.sellingPoints.filter(sp => sp.required)
|
||||
const optionalPoints = mockAgencyBrief.sellingPoints.filter(sp => !sp.required)
|
||||
const handleDownload = (file: AgencyBriefFile) => { toast.info(`下载文件: ${file.name}`) }
|
||||
const requiredPoints = briefData.sellingPoints.filter(sp => sp.required)
|
||||
const optionalPoints = briefData.sellingPoints.filter(sp => !sp.required)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card className="border-accent-indigo/30">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
<span className="flex items-center gap-2">
|
||||
<File size={18} className="text-accent-indigo" />
|
||||
Brief 文档与要求
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className="p-1 hover:bg-bg-elevated rounded"
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ChevronUp size={18} className="text-text-tertiary" />
|
||||
) : (
|
||||
<ChevronDown size={18} className="text-text-tertiary" />
|
||||
)}
|
||||
<span className="flex items-center gap-2"><File size={18} className="text-accent-indigo" />Brief 文档与要求</span>
|
||||
<button type="button" onClick={() => setIsExpanded(!isExpanded)} className="p-1 hover:bg-bg-elevated rounded">
|
||||
{isExpanded ? <ChevronUp size={18} className="text-text-tertiary" /> : <ChevronDown size={18} className="text-text-tertiary" />}
|
||||
</button>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
{isExpanded && (
|
||||
<CardContent className="space-y-4">
|
||||
{/* Brief文档列表 */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2">
|
||||
<FileText size={14} className="text-accent-indigo" />
|
||||
参考文档
|
||||
</h4>
|
||||
<h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2"><FileText size={14} className="text-accent-indigo" />参考文档</h4>
|
||||
<div className="space-y-2">
|
||||
{mockAgencyBrief.files.map((file) => (
|
||||
{briefData.files.map((file) => (
|
||||
<div key={file.id} className="flex items-center justify-between p-3 bg-bg-elevated rounded-lg">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div className="w-8 h-8 rounded bg-accent-indigo/15 flex items-center justify-center flex-shrink-0">
|
||||
<FileText size={16} className="text-accent-indigo" />
|
||||
</div>
|
||||
<div className="w-8 h-8 rounded bg-accent-indigo/15 flex items-center justify-center flex-shrink-0"><FileText size={16} className="text-accent-indigo" /></div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-text-primary truncate">{file.name}</p>
|
||||
<p className="text-xs text-text-tertiary">{file.size}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
<Button variant="ghost" size="sm" onClick={() => handlePreview(file)}>
|
||||
<Eye size={14} />
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" onClick={() => handleDownload(file)}>
|
||||
<Download size={14} />
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" onClick={() => setPreviewFile(file)}><Eye size={14} /></Button>
|
||||
<Button variant="ghost" size="sm" onClick={() => handleDownload(file)}><Download size={14} /></Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 卖点要求 */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2">
|
||||
<Target size={14} className="text-accent-green" />
|
||||
卖点要求
|
||||
</h4>
|
||||
<h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2"><Target size={14} className="text-accent-green" />卖点要求</h4>
|
||||
<div className="space-y-2">
|
||||
{requiredPoints.length > 0 && (
|
||||
<div className="p-3 bg-accent-coral/10 rounded-lg border border-accent-coral/30">
|
||||
<p className="text-xs text-accent-coral font-medium mb-2">必选卖点（必须提及）</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{requiredPoints.map((sp) => (
|
||||
<span key={sp.id} className="px-2 py-1 text-xs bg-accent-coral/20 text-accent-coral rounded">
|
||||
{sp.content}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">{requiredPoints.map((sp) => (
|
||||
<span key={sp.id} className="px-2 py-1 text-xs bg-accent-coral/20 text-accent-coral rounded">{sp.content}</span>
|
||||
))}</div>
|
||||
</div>
|
||||
)}
|
||||
{optionalPoints.length > 0 && (
|
||||
<div className="p-3 bg-bg-elevated rounded-lg">
|
||||
<p className="text-xs text-text-tertiary font-medium mb-2">可选卖点</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{optionalPoints.map((sp) => (
|
||||
<span key={sp.id} className="px-2 py-1 text-xs bg-bg-page text-text-secondary rounded">
|
||||
{sp.content}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">{optionalPoints.map((sp) => (
|
||||
<span key={sp.id} className="px-2 py-1 text-xs bg-bg-page text-text-secondary rounded">{sp.content}</span>
|
||||
))}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 违禁词 */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2">
|
||||
<Ban size={14} className="text-accent-coral" />
|
||||
违禁词（请勿使用）
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{mockAgencyBrief.blacklistWords.map((bw) => (
|
||||
<span key={bw.id} className="px-2 py-1 text-xs bg-accent-coral/15 text-accent-coral rounded border border-accent-coral/30">
|
||||
「{bw.word}」
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2"><Ban size={14} className="text-accent-coral" />违禁词</h4>
|
||||
<div className="flex flex-wrap gap-2">{briefData.blacklistWords.map((bw) => (
|
||||
<span key={bw.id} className="px-2 py-1 text-xs bg-accent-coral/15 text-accent-coral rounded border border-accent-coral/30">「{bw.word}」</span>
|
||||
))}</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* 文件预览弹窗 */}
|
||||
<Modal
|
||||
isOpen={!!previewFile}
|
||||
onClose={() => setPreviewFile(null)}
|
||||
title={previewFile?.name || '文件预览'}
|
||||
size="lg"
|
||||
>
|
||||
<Modal isOpen={!!previewFile} onClose={() => setPreviewFile(null)} title={previewFile?.name || '文件预览'} size="lg">
|
||||
<div className="space-y-4">
|
||||
<div className="aspect-[4/3] bg-bg-elevated rounded-lg flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<FileText size={48} className="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 className="text-center"><FileText size={48} className="mx-auto text-accent-indigo mb-4" /><p className="text-text-secondary">文件预览区域</p></div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="secondary" onClick={() => setPreviewFile(null)}>
|
||||
关闭
|
||||
</Button>
|
||||
{previewFile && (
|
||||
<Button onClick={() => handleDownload(previewFile)}>
|
||||
<Download size={16} />
|
||||
下载文件
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="secondary" onClick={() => setPreviewFile(null)}>关闭</Button>
|
||||
{previewFile && <Button onClick={() => handleDownload(previewFile)}><Download size={16} />下载文件</Button>}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
@ -301,54 +215,66 @@ function AgencyBriefSection({ toast }: { toast: ReturnType<typeof useToast> }) {
|
||||
)
|
||||
}
|
||||
|
||||
function UploadSection({ onUpload }: { onUpload: () => void }) {
|
||||
function UploadSection({ taskId, onUploaded }: { taskId: string; onUploaded: () => void }) {
|
||||
const [file, setFile] = useState<File | null>(null)
|
||||
const { upload, isUploading, progress } = useOSSUpload('script')
|
||||
const toast = useToast()
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const selectedFile = e.target.files?.[0]
|
||||
if (selectedFile) {
|
||||
setFile(selectedFile)
|
||||
if (selectedFile) setFile(selectedFile)
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!file) return
|
||||
try {
|
||||
const result = await upload(file)
|
||||
if (!USE_MOCK) {
|
||||
await api.uploadTaskScript(taskId, { file_url: result.url, file_name: result.file_name })
|
||||
}
|
||||
toast.success('脚本已提交，等待 AI 审核')
|
||||
onUploaded()
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : '上传失败')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Upload size={18} className="text-accent-indigo" />
|
||||
上传脚本
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<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 className="space-y-4">
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<FileText size={24} className="text-accent-indigo" />
|
||||
<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: `${progress}%` }} />
|
||||
</div>
|
||||
<p className="text-sm text-text-tertiary">上传中 {progress}%</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">支持 Word、PDF、TXT 格式</p>
|
||||
<input
|
||||
type="file"
|
||||
accept=".doc,.docx,.pdf,.txt"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
/>
|
||||
<input type="file" accept=".doc,.docx,.pdf,.txt" onChange={handleFileChange} className="hidden" />
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
<Button onClick={onUpload} disabled={!file} fullWidth>
|
||||
提交脚本
|
||||
<Button onClick={handleSubmit} disabled={!file || isUploading} fullWidth>
|
||||
{isUploading ? '上传中...' : '提交脚本'}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@ -358,36 +284,12 @@ function UploadSection({ onUpload }: { onUpload: () => void }) {
|
||||
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)
|
||||
}
|
||||
const timer = setInterval(() => { setProgress(prev => prev >= 100 ? (clearInterval(timer), 100) : prev + 10) }, 500)
|
||||
const t1 = setTimeout(() => setLogs(prev => [...prev, '正在提取文本内容...']), 1000)
|
||||
const t2 = setTimeout(() => setLogs(prev => [...prev, '正在进行违禁词检测...']), 2000)
|
||||
const t3 = setTimeout(() => setLogs(prev => [...prev, '正在分析卖点覆盖...']), 3000)
|
||||
return () => { clearInterval(timer); clearTimeout(t1); clearTimeout(t2); clearTimeout(t3) }
|
||||
}, [])
|
||||
|
||||
return (
|
||||
@ -397,69 +299,47 @@ function AIReviewingSection() {
|
||||
<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>
|
||||
<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>
|
||||
))}
|
||||
{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> }) {
|
||||
function AIResultSection({ task }: { task: ScriptTaskUI }) {
|
||||
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>
|
||||
<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>
|
||||
<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>
|
||||
<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" />
|
||||
)}
|
||||
{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>}
|
||||
@ -473,22 +353,14 @@ function AIResultSection({ task }: { task: ReturnType<typeof getTaskByStatus> })
|
||||
)
|
||||
}
|
||||
|
||||
function ReviewFeedbackSection({ review, type }: { review: NonNullable<typeof mockTask.agencyReview>; type: 'agency' | 'brand' }) {
|
||||
function ReviewFeedbackSection({ review, type }: { review: { result: string; comment: string; reviewer: string; time: string }; 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>
|
||||
<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>
|
||||
@ -503,158 +375,118 @@ function ReviewFeedbackSection({ review, type }: { review: NonNullable<typeof mo
|
||||
|
||||
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>
|
||||
<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>
|
||||
<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 toast = useToast()
|
||||
const status = searchParams.get('status') || 'pending_upload'
|
||||
const { subscribe } = useSSE()
|
||||
const taskId = params.id as string
|
||||
|
||||
const [task, setTask] = useState(getTaskByStatus(status))
|
||||
const [task, setTask] = useState<ScriptTaskUI>(mockDefaultTask)
|
||||
const [briefData, setBriefData] = useState<BriefUI>(mockBrief)
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
|
||||
// 模拟状态切换
|
||||
const simulateUpload = () => {
|
||||
setTask(getTaskByStatus('ai_reviewing'))
|
||||
setTimeout(() => {
|
||||
setTask(getTaskByStatus('ai_result'))
|
||||
}, 4000)
|
||||
}
|
||||
const loadTask = useCallback(async () => {
|
||||
if (USE_MOCK) {
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
try {
|
||||
const apiTask = await api.getTask(taskId)
|
||||
setTask(mapApiToScriptUI(apiTask))
|
||||
if (apiTask.project?.id) {
|
||||
try {
|
||||
const brief = await api.getBrief(apiTask.project.id)
|
||||
setBriefData(mapBriefToUI(brief))
|
||||
} catch { /* Brief may not exist */ }
|
||||
}
|
||||
} catch (err) {
|
||||
toast.error('加载任务失败')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}, [taskId, toast])
|
||||
|
||||
const handleResubmit = () => {
|
||||
setTask(getTaskByStatus('pending_upload'))
|
||||
}
|
||||
useEffect(() => { loadTask() }, [loadTask])
|
||||
|
||||
const handleContinueToVideo = () => {
|
||||
router.push(`/creator/task/${params.id}/video`)
|
||||
}
|
||||
useEffect(() => {
|
||||
const unsub1 = subscribe('task_updated', (data) => {
|
||||
if ((data as { task_id?: string }).task_id === taskId) loadTask()
|
||||
})
|
||||
const unsub2 = subscribe('review_completed', (data) => {
|
||||
if ((data as { task_id?: string }).task_id === taskId) loadTask()
|
||||
})
|
||||
return () => { unsub1(); unsub2() }
|
||||
}, [subscribe, taskId, loadTask])
|
||||
|
||||
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 '未知状态'
|
||||
const map: Record<string, string> = {
|
||||
pending_upload: '待上传脚本', ai_reviewing: 'AI 审核中', ai_result: 'AI 审核完成',
|
||||
agent_reviewing: '代理商审核中', agent_rejected: '代理商驳回',
|
||||
brand_reviewing: '品牌方终审中', brand_passed: '审核通过', brand_rejected: '品牌方驳回',
|
||||
}
|
||||
return map[task.scriptStatus] || '未知状态'
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="flex items-center justify-center h-64"><Loader2 className="w-8 h-8 text-accent-indigo animate-spin" /></div>
|
||||
}
|
||||
|
||||
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>
|
||||
<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>
|
||||
<Card><CardContent className="py-4"><ReviewSteps steps={getReviewSteps(task.scriptStatus)} /></CardContent></Card>
|
||||
|
||||
{/* Brief文档与要求（始终显示） */}
|
||||
<AgencyBriefSection toast={toast} />
|
||||
|
||||
{/* 根据状态显示不同内容 */}
|
||||
{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="等待代理商审核" />
|
||||
</>
|
||||
)}
|
||||
<AgencyBriefSection toast={toast} briefData={briefData} />
|
||||
|
||||
{task.scriptStatus === 'pending_upload' && <UploadSection taskId={taskId} onUploaded={loadTask} />}
|
||||
{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>
|
||||
</>
|
||||
<><ReviewFeedbackSection review={task.agencyReview} type="agency" /><AIResultSection task={task} />
|
||||
<div className="flex gap-3"><Button variant="secondary" onClick={loadTask} fullWidth><RefreshCw size={16} />重新上传</Button></div></>
|
||||
)}
|
||||
|
||||
{task.scriptStatus === 'brand_reviewing' && task.agencyReview && (
|
||||
<>
|
||||
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
|
||||
<AIResultSection task={task} />
|
||||
<WaitingSection message="等待品牌方终审" />
|
||||
</>
|
||||
<><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} />
|
||||
</>
|
||||
<><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>
|
||||
</>
|
||||
<><ReviewFeedbackSection review={task.brandReview} type="brand" /><ReviewFeedbackSection review={task.agencyReview} type="agency" />
|
||||
<AIResultSection task={task} /><div className="flex gap-3"><Button variant="secondary" onClick={loadTask} fullWidth><RefreshCw size={16} />重新上传</Button></div></>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -1,113 +1,95 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useRouter, useParams, useSearchParams } from 'next/navigation'
|
||||
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 { SuccessTag, WarningTag, ErrorTag, PendingTag } from '@/components/ui/Tag'
|
||||
import { SuccessTag, WarningTag, ErrorTag } from '@/components/ui/Tag'
|
||||
import { ReviewSteps, getReviewSteps } from '@/components/ui/ReviewSteps'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Upload,
|
||||
Video,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
AlertTriangle,
|
||||
Clock,
|
||||
Loader2,
|
||||
RefreshCw,
|
||||
Play,
|
||||
Radio,
|
||||
Shield
|
||||
ArrowLeft, Upload, Video, CheckCircle, XCircle, AlertTriangle,
|
||||
Clock, Loader2, RefreshCw, Play, Radio, Shield
|
||||
} from 'lucide-react'
|
||||
import { api } from '@/lib/api'
|
||||
import { USE_MOCK } from '@/contexts/AuthContext'
|
||||
import { useSSE } from '@/contexts/SSEContext'
|
||||
import { useOSSUpload } from '@/hooks/useOSSUpload'
|
||||
import type { TaskResponse } from '@/types/task'
|
||||
|
||||
// 模拟任务数据
|
||||
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 | {
|
||||
// ========== 类型 ==========
|
||||
type VideoTaskUI = {
|
||||
projectName: string
|
||||
brandName: string
|
||||
videoStatus: string
|
||||
videoFile: string | null
|
||||
aiResult: 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
|
||||
},
|
||||
}
|
||||
agencyReview: null | { result: 'approved' | 'rejected'; comment: string; reviewer: string; time: string }
|
||||
brandReview: 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 },
|
||||
],
|
||||
}
|
||||
// ========== 映射 ==========
|
||||
function mapApiToVideoUI(task: TaskResponse): VideoTaskUI {
|
||||
const stage = task.stage
|
||||
let status = 'pending_upload'
|
||||
switch (stage) {
|
||||
case 'video_upload': status = 'pending_upload'; break
|
||||
case 'video_ai_review': status = 'ai_reviewing'; break
|
||||
case 'video_agency_review': status = 'agent_reviewing'; break
|
||||
case 'video_brand_review': status = 'brand_reviewing'; break
|
||||
case 'completed': status = 'brand_passed'; break
|
||||
default:
|
||||
if (stage.startsWith('script_')) status = 'pending_upload' // 还没到视频阶段
|
||||
if (stage === 'rejected') {
|
||||
if (task.video_brand_status === 'rejected') status = 'brand_rejected'
|
||||
else if (task.video_agency_status === 'rejected') status = 'agent_rejected'
|
||||
else status = 'ai_result'
|
||||
}
|
||||
}
|
||||
|
||||
if (status === 'agent_rejected') {
|
||||
task.agencyReview = {
|
||||
result: 'rejected',
|
||||
comment: '视频中有竞品Logo露出，请重新拍摄。',
|
||||
reviewer: '张经理',
|
||||
time: '2026-02-06 16:30',
|
||||
}
|
||||
}
|
||||
const aiResult = task.video_ai_result ? {
|
||||
score: task.video_ai_result.score,
|
||||
hardViolations: task.video_ai_result.violations
|
||||
.filter(v => v.severity === 'error' || v.severity === 'high')
|
||||
.map(v => ({ type: v.type, content: v.content, timestamp: v.timestamp || 0, suggestion: v.suggestion })),
|
||||
sentimentWarnings: (task.video_ai_result.soft_warnings || [])
|
||||
.map(w => ({ type: w.type, content: w.content, timestamp: 0 })),
|
||||
sellingPointsCovered: [], // 后端暂无此字段
|
||||
} : null
|
||||
|
||||
if (status === 'brand_reviewing' || status === 'brand_passed' || status === 'brand_rejected') {
|
||||
task.agencyReview = {
|
||||
result: 'approved',
|
||||
comment: '视频质量良好，建议通过。',
|
||||
reviewer: '张经理',
|
||||
time: '2026-02-06 16:30',
|
||||
}
|
||||
}
|
||||
const agencyReview = task.video_agency_status && task.video_agency_status !== 'pending' ? {
|
||||
result: (task.video_agency_status === 'passed' || task.video_agency_status === 'force_passed' ? 'approved' : 'rejected') as 'approved' | 'rejected',
|
||||
comment: task.video_agency_comment || '',
|
||||
reviewer: task.agency?.name || '代理商',
|
||||
time: task.updated_at,
|
||||
} : null
|
||||
|
||||
if (status === 'brand_passed') {
|
||||
task.brandReview = {
|
||||
result: 'approved',
|
||||
comment: '视频通过终审，可以发布。',
|
||||
reviewer: '品牌方审核员',
|
||||
time: '2026-02-06 19:00',
|
||||
}
|
||||
}
|
||||
const brandReview = task.video_brand_status && task.video_brand_status !== 'pending' ? {
|
||||
result: (task.video_brand_status === 'passed' || task.video_brand_status === 'force_passed' ? 'approved' : 'rejected') as 'approved' | 'rejected',
|
||||
comment: task.video_brand_comment || '',
|
||||
reviewer: '品牌方审核员',
|
||||
time: task.updated_at,
|
||||
} : null
|
||||
|
||||
if (status === 'brand_rejected') {
|
||||
task.brandReview = {
|
||||
result: 'rejected',
|
||||
comment: '产品特写时间不足，请补拍。',
|
||||
reviewer: '品牌方审核员',
|
||||
time: '2026-02-06 19:00',
|
||||
}
|
||||
return {
|
||||
projectName: task.project?.name || task.name,
|
||||
brandName: task.project?.brand_name || '',
|
||||
videoStatus: status,
|
||||
videoFile: task.video_file_name || null,
|
||||
aiResult,
|
||||
agencyReview,
|
||||
brandReview,
|
||||
}
|
||||
}
|
||||
|
||||
return task
|
||||
const mockDefaultTask: VideoTaskUI = {
|
||||
projectName: 'XX品牌618推广', brandName: 'XX护肤品牌',
|
||||
videoStatus: 'pending_upload', videoFile: null, aiResult: null, agencyReview: null, brandReview: null,
|
||||
}
|
||||
|
||||
function formatTimestamp(seconds: number): string {
|
||||
@ -116,40 +98,35 @@ function formatTimestamp(seconds: number): string {
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`
|
||||
}
|
||||
|
||||
function UploadSection({ onUpload }: { onUpload: () => void }) {
|
||||
// ========== UI 组件 ==========
|
||||
|
||||
function UploadSection({ taskId, onUploaded }: { taskId: string; onUploaded: () => void }) {
|
||||
const [file, setFile] = useState<File | null>(null)
|
||||
const [uploadProgress, setUploadProgress] = useState(0)
|
||||
const [isUploading, setIsUploading] = useState(false)
|
||||
const { upload, isUploading, progress } = useOSSUpload('video')
|
||||
const toast = useToast()
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const selectedFile = e.target.files?.[0]
|
||||
if (selectedFile) {
|
||||
setFile(selectedFile)
|
||||
}
|
||||
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)
|
||||
const handleUpload = async () => {
|
||||
if (!file) return
|
||||
try {
|
||||
const result = await upload(file)
|
||||
if (!USE_MOCK) {
|
||||
await api.uploadTaskVideo(taskId, { file_url: result.url, file_name: result.file_name })
|
||||
}
|
||||
toast.success('视频已提交，等待 AI 审核')
|
||||
onUploaded()
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : '上传失败')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Upload size={18} className="text-purple-400" />
|
||||
上传视频
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<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 ? (
|
||||
@ -158,11 +135,7 @@ function UploadSection({ onUpload }: { onUpload: () => void }) {
|
||||
<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"
|
||||
>
|
||||
<button type="button" onClick={() => setFile(null)} className="p-1 hover:bg-bg-elevated rounded-full">
|
||||
<XCircle size={16} className="text-text-tertiary" />
|
||||
</button>
|
||||
)}
|
||||
@ -170,9 +143,9 @@ function UploadSection({ onUpload }: { onUpload: () => void }) {
|
||||
{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 className="h-full bg-accent-indigo transition-all" style={{ width: `${progress}%` }} />
|
||||
</div>
|
||||
<p className="text-sm text-text-tertiary">上传中 {uploadProgress}%</p>
|
||||
<p className="text-sm text-text-tertiary">上传中 {progress}%</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@ -181,12 +154,7 @@ function UploadSection({ onUpload }: { onUpload: () => void }) {
|
||||
<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"
|
||||
/>
|
||||
<input type="file" accept="video/*" onChange={handleFileChange} className="hidden" />
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
@ -201,92 +169,46 @@ function UploadSection({ onUpload }: { onUpload: () => void }) {
|
||||
function AIReviewingSection() {
|
||||
const [progress, setProgress] = useState(0)
|
||||
const [currentStep, setCurrentStep] = useState('正在解析视频...')
|
||||
|
||||
useEffect(() => {
|
||||
const steps = [
|
||||
'正在解析视频...',
|
||||
'正在提取音频转文字...',
|
||||
'正在分析画面内容...',
|
||||
'正在检测违禁内容...',
|
||||
'正在分析卖点覆盖...',
|
||||
'正在生成审核报告...',
|
||||
]
|
||||
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)
|
||||
}
|
||||
const timer = setInterval(() => { setProgress(prev => prev >= 100 ? (clearInterval(timer), 100) : 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>
|
||||
<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> }) {
|
||||
function AIResultSection({ task }: { task: VideoTaskUI }) {
|
||||
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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
@ -295,22 +217,13 @@ function AIResultSection({ task }: { task: ReturnType<typeof getTaskByStatus> })
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
))}
|
||||
@ -318,52 +231,34 @@ function AIResultSection({ task }: { task: ReturnType<typeof getTaskByStatus> })
|
||||
</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>
|
||||
{task.aiResult.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.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>
|
||||
{sp.covered && sp.timestamp && (
|
||||
<span className="text-xs text-text-tertiary">{formatTimestamp(sp.timestamp)}</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ReviewFeedbackSection({ review, type }: { review: NonNullable<typeof mockTask.agencyReview>; type: 'agency' | 'brand' }) {
|
||||
function ReviewFeedbackSection({ review, type }: { review: { result: string; comment: string; reviewer: string; time: string }; 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>
|
||||
<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>
|
||||
@ -377,157 +272,95 @@ function ReviewFeedbackSection({ review, type }: { review: NonNullable<typeof mo
|
||||
}
|
||||
|
||||
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>
|
||||
)
|
||||
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>
|
||||
<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 toast = useToast()
|
||||
const { subscribe } = useSSE()
|
||||
const taskId = params.id as string
|
||||
|
||||
const [task, setTask] = useState(getTaskByStatus(status))
|
||||
const [task, setTask] = useState<VideoTaskUI>(mockDefaultTask)
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
|
||||
// 模拟状态切换
|
||||
const simulateUpload = () => {
|
||||
setTask(getTaskByStatus('ai_reviewing'))
|
||||
setTimeout(() => {
|
||||
setTask(getTaskByStatus('ai_result'))
|
||||
}, 5000)
|
||||
}
|
||||
const loadTask = useCallback(async () => {
|
||||
if (USE_MOCK) { setIsLoading(false); return }
|
||||
try {
|
||||
const apiTask = await api.getTask(taskId)
|
||||
setTask(mapApiToVideoUI(apiTask))
|
||||
} catch { toast.error('加载任务失败') }
|
||||
finally { setIsLoading(false) }
|
||||
}, [taskId, toast])
|
||||
|
||||
const handleResubmit = () => {
|
||||
setTask(getTaskByStatus('pending_upload'))
|
||||
}
|
||||
useEffect(() => { loadTask() }, [loadTask])
|
||||
|
||||
useEffect(() => {
|
||||
const unsub1 = subscribe('task_updated', (data) => { if ((data as { task_id?: string }).task_id === taskId) loadTask() })
|
||||
const unsub2 = subscribe('review_completed', (data) => { if ((data as { task_id?: string }).task_id === taskId) loadTask() })
|
||||
return () => { unsub1(); unsub2() }
|
||||
}, [subscribe, taskId, loadTask])
|
||||
|
||||
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 '未知状态'
|
||||
const map: Record<string, string> = {
|
||||
pending_upload: '待上传视频', ai_reviewing: 'AI 审核中', ai_result: 'AI 审核完成',
|
||||
agent_reviewing: '代理商审核中', agent_rejected: '代理商驳回',
|
||||
brand_reviewing: '品牌方终审中', brand_passed: '审核通过', brand_rejected: '品牌方驳回',
|
||||
}
|
||||
return map[task.videoStatus] || '未知状态'
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="flex items-center justify-center h-64"><Loader2 className="w-8 h-8 text-accent-indigo animate-spin" /></div>
|
||||
}
|
||||
|
||||
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>
|
||||
<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="等待代理商审核" />
|
||||
</>
|
||||
)}
|
||||
<Card><CardContent className="py-4"><ReviewSteps steps={getReviewSteps(task.videoStatus)} /></CardContent></Card>
|
||||
|
||||
{task.videoStatus === 'pending_upload' && <UploadSection taskId={taskId} onUploaded={loadTask} />}
|
||||
{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>
|
||||
</>
|
||||
<><ReviewFeedbackSection review={task.agencyReview} type="agency" /><AIResultSection task={task} />
|
||||
<div className="flex gap-3"><Button variant="secondary" onClick={loadTask} fullWidth><RefreshCw size={16} />重新上传</Button></div></>
|
||||
)}
|
||||
|
||||
{task.videoStatus === 'brand_reviewing' && task.agencyReview && (
|
||||
<>
|
||||
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
|
||||
<AIResultSection task={task} />
|
||||
<WaitingSection message="等待品牌方终审" />
|
||||
</>
|
||||
<><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} />
|
||||
</>
|
||||
<><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>
|
||||
</>
|
||||
<><ReviewFeedbackSection review={task.brandReview} type="brand" /><ReviewFeedbackSection review={task.agencyReview} type="agency" />
|
||||
<AIResultSection task={task} /><div className="flex gap-3"><Button variant="secondary" onClick={loadTask} fullWidth><RefreshCw size={16} />重新上传</Button></div></>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import '../styles/globals.css'
|
||||
import { AuthProvider } from '@/contexts/AuthContext'
|
||||
import { SSEProvider } from '@/contexts/SSEContext'
|
||||
import { ToastProvider } from '@/components/ui/Toast'
|
||||
|
||||
export const metadata = {
|
||||
@ -16,7 +17,9 @@ export default function RootLayout({
|
||||
<html lang="zh-CN" className="h-full">
|
||||
<body className="h-full bg-bg-page text-text-primary font-sans">
|
||||
<ToastProvider>
|
||||
<AuthProvider>{children}</AuthProvider>
|
||||
<AuthProvider>
|
||||
<SSEProvider>{children}</SSEProvider>
|
||||
</AuthProvider>
|
||||
</ToastProvider>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -21,7 +21,7 @@ const AuthContext = createContext<AuthContextType | undefined>(undefined)
|
||||
const USER_STORAGE_KEY = 'miaosi_user'
|
||||
|
||||
// 开发模式：使用 mock 数据
|
||||
const USE_MOCK = process.env.NEXT_PUBLIC_USE_MOCK === 'true' || process.env.NODE_ENV === 'development'
|
||||
export const USE_MOCK = process.env.NEXT_PUBLIC_USE_MOCK === 'true' || process.env.NODE_ENV === 'development'
|
||||
|
||||
// Mock 用户数据
|
||||
const MOCK_USERS: Record<string, User & { password: string }> = {
|
||||
|
||||
125
frontend/contexts/SSEContext.tsx
Normal file
125
frontend/contexts/SSEContext.tsx
Normal file
@ -0,0 +1,125 @@
|
||||
'use client'
|
||||
|
||||
import { createContext, useContext, useEffect, useRef, useCallback, ReactNode } from 'react'
|
||||
import { useAuth } from './AuthContext'
|
||||
import { USE_MOCK } from './AuthContext'
|
||||
import { getAccessToken } from '@/lib/api'
|
||||
|
||||
type SSEEventType = 'task_updated' | 'review_progress' | 'review_completed' | 'new_task' | 'review_decision'
|
||||
type SSEHandler = (data: Record<string, unknown>) => void
|
||||
|
||||
interface SSEContextType {
|
||||
subscribe: (eventType: SSEEventType, handler: SSEHandler) => () => void
|
||||
}
|
||||
|
||||
const SSEContext = createContext<SSEContextType | undefined>(undefined)
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8000'
|
||||
|
||||
export function SSEProvider({ children }: { children: ReactNode }) {
|
||||
const { isAuthenticated } = useAuth()
|
||||
const listenersRef = useRef<Map<SSEEventType, Set<SSEHandler>>>(new Map())
|
||||
const abortRef = useRef<AbortController | null>(null)
|
||||
const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||||
|
||||
const dispatch = useCallback((eventType: SSEEventType, data: Record<string, unknown>) => {
|
||||
const handlers = listenersRef.current.get(eventType)
|
||||
if (handlers) {
|
||||
handlers.forEach(handler => handler(data))
|
||||
}
|
||||
}, [])
|
||||
|
||||
const connect = useCallback(async () => {
|
||||
if (USE_MOCK || !isAuthenticated) return
|
||||
|
||||
// 清除旧连接
|
||||
abortRef.current?.abort()
|
||||
const controller = new AbortController()
|
||||
abortRef.current = controller
|
||||
|
||||
try {
|
||||
const token = getAccessToken()
|
||||
if (!token) return
|
||||
|
||||
const response = await fetch(`${API_BASE_URL}/api/v1/sse/events`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Accept': 'text/event-stream',
|
||||
},
|
||||
signal: controller.signal,
|
||||
})
|
||||
|
||||
if (!response.ok || !response.body) return
|
||||
|
||||
const reader = response.body.getReader()
|
||||
const decoder = new TextDecoder()
|
||||
let buffer = ''
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
|
||||
buffer += decoder.decode(value, { stream: true })
|
||||
const lines = buffer.split('\n')
|
||||
buffer = lines.pop() || ''
|
||||
|
||||
let currentEvent = ''
|
||||
let currentData = ''
|
||||
|
||||
for (const line of lines) {
|
||||
if (line.startsWith('event:')) {
|
||||
currentEvent = line.slice(6).trim()
|
||||
} else if (line.startsWith('data:')) {
|
||||
currentData = line.slice(5).trim()
|
||||
} else if (line === '' && currentEvent && currentData) {
|
||||
try {
|
||||
const parsed = JSON.parse(currentData)
|
||||
dispatch(currentEvent as SSEEventType, parsed)
|
||||
} catch {
|
||||
// 忽略解析错误
|
||||
}
|
||||
currentEvent = ''
|
||||
currentData = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return
|
||||
// 5秒后重连
|
||||
reconnectTimerRef.current = setTimeout(connect, 5000)
|
||||
}
|
||||
}, [isAuthenticated, dispatch])
|
||||
|
||||
useEffect(() => {
|
||||
connect()
|
||||
return () => {
|
||||
abortRef.current?.abort()
|
||||
if (reconnectTimerRef.current) clearTimeout(reconnectTimerRef.current)
|
||||
}
|
||||
}, [connect])
|
||||
|
||||
const subscribe = useCallback((eventType: SSEEventType, handler: SSEHandler): (() => void) => {
|
||||
if (!listenersRef.current.has(eventType)) {
|
||||
listenersRef.current.set(eventType, new Set())
|
||||
}
|
||||
listenersRef.current.get(eventType)!.add(handler)
|
||||
|
||||
return () => {
|
||||
listenersRef.current.get(eventType)?.delete(handler)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<SSEContext.Provider value={{ subscribe }}>
|
||||
{children}
|
||||
</SSEContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useSSE() {
|
||||
const context = useContext(SSEContext)
|
||||
if (!context) {
|
||||
throw new Error('useSSE must be used within SSEProvider')
|
||||
}
|
||||
return context
|
||||
}
|
||||
112
frontend/hooks/useOSSUpload.ts
Normal file
112
frontend/hooks/useOSSUpload.ts
Normal file
@ -0,0 +1,112 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useCallback } from 'react'
|
||||
import { api } from '@/lib/api'
|
||||
import { USE_MOCK } from '@/contexts/AuthContext'
|
||||
|
||||
interface UploadResult {
|
||||
url: string
|
||||
file_key: string
|
||||
file_name: string
|
||||
file_size: number
|
||||
}
|
||||
|
||||
interface UseOSSUploadReturn {
|
||||
upload: (file: File) => Promise<UploadResult>
|
||||
isUploading: boolean
|
||||
progress: number
|
||||
error: string | null
|
||||
reset: () => void
|
||||
}
|
||||
|
||||
export function useOSSUpload(fileType: string = 'general'): UseOSSUploadReturn {
|
||||
const [isUploading, setIsUploading] = useState(false)
|
||||
const [progress, setProgress] = useState(0)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const reset = useCallback(() => {
|
||||
setIsUploading(false)
|
||||
setProgress(0)
|
||||
setError(null)
|
||||
}, [])
|
||||
|
||||
const upload = useCallback(async (file: File): Promise<UploadResult> => {
|
||||
setIsUploading(true)
|
||||
setProgress(0)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
if (USE_MOCK) {
|
||||
// Mock 模式：模拟 2 秒上传
|
||||
for (let i = 0; i <= 100; i += 20) {
|
||||
await new Promise(r => setTimeout(r, 400))
|
||||
setProgress(i)
|
||||
}
|
||||
const result: UploadResult = {
|
||||
url: `https://mock-oss.example.com/${fileType}/${Date.now()}_${file.name}`,
|
||||
file_key: `${fileType}/${Date.now()}_${file.name}`,
|
||||
file_name: file.name,
|
||||
file_size: file.size,
|
||||
}
|
||||
setProgress(100)
|
||||
setIsUploading(false)
|
||||
return result
|
||||
}
|
||||
|
||||
// 1. 获取上传凭证
|
||||
setProgress(10)
|
||||
const policy = await api.getUploadPolicy(fileType)
|
||||
|
||||
// 2. 构建 OSS 直传 FormData
|
||||
const fileKey = `${policy.dir}${Date.now()}_${file.name}`
|
||||
const formData = new FormData()
|
||||
formData.append('key', fileKey)
|
||||
formData.append('policy', policy.policy)
|
||||
formData.append('OSSAccessKeyId', policy.access_key_id)
|
||||
formData.append('signature', policy.signature)
|
||||
formData.append('success_action_status', '200')
|
||||
formData.append('file', file)
|
||||
|
||||
// 3. 上传到 OSS
|
||||
setProgress(30)
|
||||
const xhr = new XMLHttpRequest()
|
||||
await new Promise<void>((resolve, reject) => {
|
||||
xhr.upload.onprogress = (e) => {
|
||||
if (e.lengthComputable) {
|
||||
setProgress(30 + Math.round((e.loaded / e.total) * 50))
|
||||
}
|
||||
}
|
||||
xhr.onload = () => {
|
||||
if (xhr.status >= 200 && xhr.status < 300) {
|
||||
resolve()
|
||||
} else {
|
||||
reject(new Error(`上传失败: ${xhr.status}`))
|
||||
}
|
||||
}
|
||||
xhr.onerror = () => reject(new Error('网络错误'))
|
||||
xhr.open('POST', policy.host)
|
||||
xhr.send(formData)
|
||||
})
|
||||
|
||||
// 4. 回调通知后端
|
||||
setProgress(90)
|
||||
const result = await api.fileUploaded(fileKey, file.name, file.size, fileType)
|
||||
|
||||
setProgress(100)
|
||||
setIsUploading(false)
|
||||
return {
|
||||
url: result.url,
|
||||
file_key: result.file_key,
|
||||
file_name: result.file_name,
|
||||
file_size: result.file_size,
|
||||
}
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : '上传失败'
|
||||
setError(message)
|
||||
setIsUploading(false)
|
||||
throw err
|
||||
}
|
||||
}, [fileType])
|
||||
|
||||
return { upload, isUploading, progress, error, reset }
|
||||
}
|
||||
186
frontend/lib/taskStageMapper.ts
Normal file
186
frontend/lib/taskStageMapper.ts
Normal file
@ -0,0 +1,186 @@
|
||||
import type { TaskResponse, TaskStage, TaskStatus } from '@/types/task'
|
||||
|
||||
export type StepStatus = 'pending' | 'current' | 'done' | 'error'
|
||||
|
||||
export interface StageSteps {
|
||||
submit: StepStatus
|
||||
ai: StepStatus
|
||||
agency: StepStatus
|
||||
brand: StepStatus
|
||||
}
|
||||
|
||||
export interface TaskUIState {
|
||||
scriptStage: StageSteps
|
||||
videoStage: StageSteps
|
||||
currentPhase: 'script' | 'video' | 'completed'
|
||||
buttonText: string
|
||||
buttonType: 'primary' | 'warning' | 'success' | 'disabled'
|
||||
scriptColor: string
|
||||
videoColor: string
|
||||
statusLabel: string
|
||||
filterCategory: 'pending' | 'reviewing' | 'rejected' | 'completed'
|
||||
}
|
||||
|
||||
const STAGE_ORDER: TaskStage[] = [
|
||||
'script_upload', 'script_ai_review', 'script_agency_review', 'script_brand_review',
|
||||
'video_upload', 'video_ai_review', 'video_agency_review', 'video_brand_review',
|
||||
'completed', 'rejected',
|
||||
]
|
||||
|
||||
function statusToStep(status: TaskStatus | undefined | null): StepStatus {
|
||||
if (!status || status === 'pending') return 'pending'
|
||||
if (status === 'processing') return 'current'
|
||||
if (status === 'passed' || status === 'force_passed') return 'done'
|
||||
if (status === 'rejected') return 'error'
|
||||
return 'pending'
|
||||
}
|
||||
|
||||
export function mapTaskToUI(task: TaskResponse): TaskUIState {
|
||||
const stage = task.stage
|
||||
const stageIndex = STAGE_ORDER.indexOf(stage)
|
||||
|
||||
// 脚本阶段
|
||||
const scriptStage: StageSteps = {
|
||||
submit: stageIndex >= 0 ? 'done' : 'pending',
|
||||
ai: 'pending',
|
||||
agency: 'pending',
|
||||
brand: 'pending',
|
||||
}
|
||||
|
||||
// 视频阶段
|
||||
const videoStage: StageSteps = {
|
||||
submit: 'pending',
|
||||
ai: 'pending',
|
||||
agency: 'pending',
|
||||
brand: 'pending',
|
||||
}
|
||||
|
||||
// 根据 stage 设置进度
|
||||
if (stage === 'script_upload') {
|
||||
scriptStage.submit = 'current'
|
||||
} else if (stage === 'script_ai_review') {
|
||||
scriptStage.submit = 'done'
|
||||
scriptStage.ai = task.script_ai_result ? 'done' : 'current'
|
||||
} else if (stage === 'script_agency_review') {
|
||||
scriptStage.submit = 'done'
|
||||
scriptStage.ai = 'done'
|
||||
scriptStage.agency = statusToStep(task.script_agency_status)
|
||||
if (scriptStage.agency === 'pending') scriptStage.agency = 'current'
|
||||
} else if (stage === 'script_brand_review') {
|
||||
scriptStage.submit = 'done'
|
||||
scriptStage.ai = 'done'
|
||||
scriptStage.agency = 'done'
|
||||
scriptStage.brand = statusToStep(task.script_brand_status)
|
||||
if (scriptStage.brand === 'pending') scriptStage.brand = 'current'
|
||||
} else if (stageIndex >= 4) {
|
||||
// 已过脚本阶段
|
||||
scriptStage.submit = 'done'
|
||||
scriptStage.ai = 'done'
|
||||
scriptStage.agency = 'done'
|
||||
scriptStage.brand = 'done'
|
||||
}
|
||||
|
||||
// 处理脚本被驳回的情况
|
||||
if (task.script_agency_status === 'rejected') {
|
||||
scriptStage.agency = 'error'
|
||||
}
|
||||
if (task.script_brand_status === 'rejected') {
|
||||
scriptStage.brand = 'error'
|
||||
}
|
||||
|
||||
// 视频阶段
|
||||
if (stage === 'video_upload') {
|
||||
videoStage.submit = 'current'
|
||||
} else if (stage === 'video_ai_review') {
|
||||
videoStage.submit = 'done'
|
||||
videoStage.ai = task.video_ai_result ? 'done' : 'current'
|
||||
} else if (stage === 'video_agency_review') {
|
||||
videoStage.submit = 'done'
|
||||
videoStage.ai = 'done'
|
||||
videoStage.agency = statusToStep(task.video_agency_status)
|
||||
if (videoStage.agency === 'pending') videoStage.agency = 'current'
|
||||
} else if (stage === 'video_brand_review') {
|
||||
videoStage.submit = 'done'
|
||||
videoStage.ai = 'done'
|
||||
videoStage.agency = 'done'
|
||||
videoStage.brand = statusToStep(task.video_brand_status)
|
||||
if (videoStage.brand === 'pending') videoStage.brand = 'current'
|
||||
} else if (stage === 'completed') {
|
||||
videoStage.submit = 'done'
|
||||
videoStage.ai = 'done'
|
||||
videoStage.agency = 'done'
|
||||
videoStage.brand = 'done'
|
||||
}
|
||||
|
||||
// 处理视频被驳回的情况
|
||||
if (task.video_agency_status === 'rejected') {
|
||||
videoStage.agency = 'error'
|
||||
}
|
||||
if (task.video_brand_status === 'rejected') {
|
||||
videoStage.brand = 'error'
|
||||
}
|
||||
|
||||
// 当前阶段
|
||||
let currentPhase: 'script' | 'video' | 'completed' = 'script'
|
||||
if (stageIndex >= 4 && stageIndex < 8) currentPhase = 'video'
|
||||
if (stage === 'completed') currentPhase = 'completed'
|
||||
|
||||
// 按钮文案和类型
|
||||
let buttonText = '查看详情'
|
||||
let buttonType: 'primary' | 'warning' | 'success' | 'disabled' = 'primary'
|
||||
|
||||
if (stage === 'script_upload') {
|
||||
buttonText = '上传脚本'
|
||||
buttonType = 'primary'
|
||||
} else if (stage === 'video_upload') {
|
||||
buttonText = '上传视频'
|
||||
buttonType = 'primary'
|
||||
} else if (stage === 'completed') {
|
||||
buttonText = '已完成'
|
||||
buttonType = 'success'
|
||||
} else if (stage === 'rejected') {
|
||||
buttonText = '重新提交'
|
||||
buttonType = 'warning'
|
||||
} else if (stage.includes('review')) {
|
||||
buttonText = '审核中'
|
||||
buttonType = 'disabled'
|
||||
}
|
||||
|
||||
// 颜色
|
||||
const scriptColor = scriptStage.agency === 'error' || scriptStage.brand === 'error'
|
||||
? 'red' : scriptStage.brand === 'done' ? 'green' : 'blue'
|
||||
const videoColor = videoStage.agency === 'error' || videoStage.brand === 'error'
|
||||
? 'red' : videoStage.brand === 'done' ? 'green' : 'blue'
|
||||
|
||||
// 状态标签
|
||||
let statusLabel = '进行中'
|
||||
if (stage === 'script_upload' || stage === 'video_upload') statusLabel = '待上传'
|
||||
else if (stage.includes('ai_review')) statusLabel = 'AI 审核中'
|
||||
else if (stage.includes('agency_review')) statusLabel = '代理商审核中'
|
||||
else if (stage.includes('brand_review')) statusLabel = '品牌方审核中'
|
||||
else if (stage === 'completed') statusLabel = '已完成'
|
||||
else if (stage === 'rejected') statusLabel = '已驳回'
|
||||
|
||||
// 筛选分类
|
||||
let filterCategory: 'pending' | 'reviewing' | 'rejected' | 'completed' = 'reviewing'
|
||||
if (stage === 'script_upload' || stage === 'video_upload') filterCategory = 'pending'
|
||||
else if (stage === 'completed') filterCategory = 'completed'
|
||||
else if (stage === 'rejected') filterCategory = 'rejected'
|
||||
// 处理驳回后重新提交的情况
|
||||
if (task.script_agency_status === 'rejected' || task.script_brand_status === 'rejected' ||
|
||||
task.video_agency_status === 'rejected' || task.video_brand_status === 'rejected') {
|
||||
if (stage !== 'completed') filterCategory = 'rejected'
|
||||
}
|
||||
|
||||
return {
|
||||
scriptStage,
|
||||
videoStage,
|
||||
currentPhase,
|
||||
buttonText,
|
||||
buttonType,
|
||||
scriptColor,
|
||||
videoColor,
|
||||
statusLabel,
|
||||
filterCategory,
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user