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
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
4a3c7e7923
commit
54eaa54966
+120
-224
@@ -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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user