feat: 审核体系全面改造 — 多维度评分 + 卖点优先级 + AI 语义匹配 + 品牌方 AI 状态通知
后端: - 审核结果拆分为 4 个独立维度 (法规合规/平台规则/品牌安全/Brief匹配度) - 卖点优先级从 required:bool 改为三级 (core/recommended/reference) - AI 语义匹配卖点覆盖 + AI 整体 Brief 匹配度分析 - BriefMatchDetail 评分详情 (覆盖率+亮点+问题点) - min_selling_points 代理商可配置最少卖点数 + Alembic 迁移 - AI 语境复核过滤误报 - Brief AI 解析 + 规则 AI 解析 - AI 未配置/异常时通知品牌方 - 种子数据更新 (新格式审核结果+brief_match_detail) 前端: - 三端审核页面展示四维度评分卡片 - 卖点编辑改为三级优先级选择器 - BriefMatchDetail 展示 (覆盖率进度条+亮点+问题) - min_selling_points 配置 UI - AI 配置页未配置时静默处理 - 文件预览/下载/签名 URL 优化 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
0c59797d5b
commit
0ef7650c09
@@ -120,7 +120,7 @@ function buildViewModelFromAPI(task: TaskResponse, brief: BriefResponse): BriefV
|
||||
const sellingPoints = (brief.selling_points ?? []).map((sp, idx) => ({
|
||||
id: `sp-${idx}`,
|
||||
content: sp.content,
|
||||
required: sp.required,
|
||||
required: sp.required ?? (sp.priority === 'core'),
|
||||
}))
|
||||
|
||||
// Map blacklist words
|
||||
@@ -244,10 +244,9 @@ export default function TaskBriefPage() {
|
||||
return
|
||||
}
|
||||
try {
|
||||
const signedUrl = await api.getSignedUrl(file.url)
|
||||
window.open(signedUrl, '_blank')
|
||||
await api.downloadFile(file.url, file.name)
|
||||
} catch {
|
||||
toast.error('获取下载链接失败')
|
||||
toast.error('下载失败')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ import { cn } from '@/lib/utils'
|
||||
import { api } from '@/lib/api'
|
||||
import { USE_MOCK } from '@/contexts/AuthContext'
|
||||
import { useSSE } from '@/contexts/SSEContext'
|
||||
import type { TaskResponse, AIReviewResult } from '@/types/task'
|
||||
import type { TaskResponse, AIReviewResult, ReviewDimensions, SellingPointMatchResult, BriefMatchDetail } from '@/types/task'
|
||||
import type { BriefResponse } from '@/types/brief'
|
||||
|
||||
// 前端 UI 使用的任务阶段类型
|
||||
@@ -57,6 +57,15 @@ type TaskData = {
|
||||
rejectionReason?: string
|
||||
submittedAt?: string
|
||||
scriptContent?: string
|
||||
aiResult?: {
|
||||
score: number
|
||||
dimensions?: ReviewDimensions
|
||||
sellingPointMatches?: SellingPointMatchResult[]
|
||||
briefMatchDetail?: BriefMatchDetail
|
||||
violations: Array<{ type: string; content: string; suggestion: string; dimension?: string }>
|
||||
}
|
||||
agencyReview?: { result: 'approved' | 'rejected'; comment: string; reviewer: string; time: string }
|
||||
brandReview?: { result: 'approved' | 'rejected'; comment: string; reviewer: string; time: string }
|
||||
}
|
||||
|
||||
type AgencyBriefFile = {
|
||||
@@ -134,8 +143,9 @@ function mapApiTaskToTaskData(task: TaskResponse): TaskData {
|
||||
// 提取 AI 审核结果中的 issues
|
||||
const aiResult = phase === 'script' ? task.script_ai_result : task.video_ai_result
|
||||
if (aiResult?.violations) {
|
||||
const dimLabels: Record<string, string> = { legal: '法规合规', platform: '平台规则', brand_safety: '品牌安全', brief_match: 'Brief 匹配' }
|
||||
issues = aiResult.violations.map(v => ({
|
||||
title: v.type,
|
||||
title: v.dimension ? `[${dimLabels[v.dimension] || v.dimension}] ${v.type}` : v.type,
|
||||
description: `${v.content}${v.suggestion ? ` — ${v.suggestion}` : ''}`,
|
||||
timestamp: v.timestamp ? `${v.timestamp}s` : undefined,
|
||||
severity: v.severity === 'warning' ? 'warning' as const : 'error' as const,
|
||||
@@ -144,6 +154,35 @@ function mapApiTaskToTaskData(task: TaskResponse): TaskData {
|
||||
|
||||
const subtitle = `${task.project.name} · ${task.project.brand_name || ''}`
|
||||
|
||||
// AI 审核结果（完整，含维度）
|
||||
const aiResultData = aiResult ? {
|
||||
score: aiResult.score,
|
||||
dimensions: aiResult.dimensions,
|
||||
sellingPointMatches: aiResult.selling_point_matches,
|
||||
briefMatchDetail: aiResult.brief_match_detail,
|
||||
violations: aiResult.violations.map(v => ({ type: v.type, content: v.content, suggestion: v.suggestion, dimension: v.dimension })),
|
||||
} : undefined
|
||||
|
||||
// 代理商审核反馈
|
||||
const agencyStatus = phase === 'script' ? task.script_agency_status : task.video_agency_status
|
||||
const agencyComment = phase === 'script' ? task.script_agency_comment : task.video_agency_comment
|
||||
const agencyReview = agencyStatus && agencyStatus !== 'pending' ? {
|
||||
result: (agencyStatus === 'passed' || agencyStatus === 'force_passed' ? 'approved' : 'rejected') as 'approved' | 'rejected',
|
||||
comment: agencyComment || '',
|
||||
reviewer: task.agency?.name || '代理商',
|
||||
time: task.updated_at,
|
||||
} : undefined
|
||||
|
||||
// 品牌方审核反馈
|
||||
const brandStatus = phase === 'script' ? task.script_brand_status : task.video_brand_status
|
||||
const brandComment = phase === 'script' ? task.script_brand_comment : task.video_brand_comment
|
||||
const brandReview = brandStatus && brandStatus !== 'pending' ? {
|
||||
result: (brandStatus === 'passed' || brandStatus === 'force_passed' ? 'approved' : 'rejected') as 'approved' | 'rejected',
|
||||
comment: brandComment || '',
|
||||
reviewer: '品牌方审核员',
|
||||
time: task.updated_at,
|
||||
} : undefined
|
||||
|
||||
return {
|
||||
id: task.id,
|
||||
title: task.name,
|
||||
@@ -153,6 +192,9 @@ function mapApiTaskToTaskData(task: TaskResponse): TaskData {
|
||||
issues: issues.length > 0 ? issues : undefined,
|
||||
rejectionReason,
|
||||
submittedAt,
|
||||
aiResult: aiResultData,
|
||||
agencyReview,
|
||||
brandReview,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -164,11 +206,12 @@ const mockBriefData = {
|
||||
{ id: 'af3', name: '品牌视觉参考.pdf', size: '3.2MB', uploadedAt: '2026-02-02', description: '视觉风格和拍摄参考示例' },
|
||||
] as AgencyBriefFile[],
|
||||
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 },
|
||||
{ id: 'sp1', content: 'SPF50+ PA++++', priority: 'core' as const },
|
||||
{ id: 'sp2', content: '轻薄质地，不油腻', priority: 'core' as const },
|
||||
{ id: 'sp3', content: '延展性好，易推开', priority: 'recommended' as const },
|
||||
{ id: 'sp4', content: '适合敏感肌', priority: 'recommended' as const },
|
||||
{ id: 'sp5', content: '夏日必备防晒', priority: 'core' as const },
|
||||
{ id: 'sp6', content: '产品成分天然', priority: 'reference' as const },
|
||||
],
|
||||
blacklistWords: [
|
||||
{ id: 'bw1', word: '最好', reason: '绝对化用语' },
|
||||
@@ -278,15 +321,16 @@ function ReviewProgressBar({ task }: { task: TaskData }) {
|
||||
// Brief 组件
|
||||
function AgencyBriefSection({ toast, briefData }: {
|
||||
toast: ReturnType<typeof useToast>
|
||||
briefData: { files: AgencyBriefFile[]; sellingPoints: { id: string; content: string; required: boolean }[]; blacklistWords: { id: string; word: string; reason: string }[] }
|
||||
briefData: { files: AgencyBriefFile[]; sellingPoints: { id: string; content: string; priority: 'core' | 'recommended' | 'reference' }[]; blacklistWords: { id: string; word: string; reason: string }[] }
|
||||
}) {
|
||||
const [isExpanded, setIsExpanded] = useState(true)
|
||||
const [previewFile, setPreviewFile] = useState<AgencyBriefFile | null>(null)
|
||||
|
||||
const handleDownload = (file: AgencyBriefFile) => { toast.info(`下载文件: ${file.name}`) }
|
||||
|
||||
const requiredPoints = briefData.sellingPoints.filter(sp => sp.required)
|
||||
const optionalPoints = briefData.sellingPoints.filter(sp => !sp.required)
|
||||
const corePoints = briefData.sellingPoints.filter(sp => sp.priority === 'core')
|
||||
const recommendedPoints = briefData.sellingPoints.filter(sp => sp.priority === 'recommended')
|
||||
const referencePoints = briefData.sellingPoints.filter(sp => sp.priority === 'reference')
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -337,21 +381,31 @@ function AgencyBriefSection({ toast, briefData }: {
|
||||
<Target className="w-4 h-4 text-accent-green" /> 卖点要求
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{requiredPoints.length > 0 && (
|
||||
{corePoints.length > 0 && (
|
||||
<div className="p-3 bg-accent-coral/10 rounded-xl border border-accent-coral/30">
|
||||
<p className="text-xs text-accent-coral font-medium mb-2">必选卖点（必须提及）</p>
|
||||
<p className="text-xs text-accent-coral font-medium mb-2">核心卖点（建议优先提及）</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{requiredPoints.map((sp) => (
|
||||
{corePoints.map((sp) => (
|
||||
<span key={sp.id} className="px-2 py-1 text-xs bg-accent-coral/20 text-accent-coral rounded-lg">{sp.content}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{optionalPoints.length > 0 && (
|
||||
<div className="p-3 bg-bg-elevated rounded-xl">
|
||||
<p className="text-xs text-text-tertiary font-medium mb-2">可选卖点</p>
|
||||
{recommendedPoints.length > 0 && (
|
||||
<div className="p-3 bg-accent-amber/10 rounded-xl border border-accent-amber/30">
|
||||
<p className="text-xs text-accent-amber font-medium mb-2">推荐卖点（建议提及）</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{optionalPoints.map((sp) => (
|
||||
{recommendedPoints.map((sp) => (
|
||||
<span key={sp.id} className="px-2 py-1 text-xs bg-accent-amber/20 text-accent-amber rounded-lg">{sp.content}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{referencePoints.length > 0 && (
|
||||
<div className="p-3 bg-bg-elevated rounded-xl">
|
||||
<p className="text-xs text-text-tertiary font-medium mb-2">参考信息</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{referencePoints.map((sp) => (
|
||||
<span key={sp.id} className="px-2 py-1 text-xs bg-bg-page text-text-secondary rounded-lg">{sp.content}</span>
|
||||
))}
|
||||
</div>
|
||||
@@ -394,42 +448,290 @@ function AgencyBriefSection({ toast, briefData }: {
|
||||
)
|
||||
}
|
||||
|
||||
function UploadView({ task, toast, briefData }: { task: TaskData; toast: ReturnType<typeof useToast>; briefData: typeof mockBriefData }) {
|
||||
const router = useRouter()
|
||||
const { id } = useParams()
|
||||
const isScript = task.phase === 'script'
|
||||
const uploadPath = isScript ? `/creator/task/${id}/script` : `/creator/task/${id}/video`
|
||||
function FileUploadSection({ taskId, phase, onUploaded }: { taskId: string; phase: 'script' | 'video'; onUploaded: () => void }) {
|
||||
const [file, setFile] = useState<File | null>(null)
|
||||
const [isUploading, setIsUploading] = useState(false)
|
||||
const [progress, setProgress] = useState(0)
|
||||
const [uploadError, setUploadError] = useState<string | null>(null)
|
||||
const toast = useToast()
|
||||
const isScript = phase === 'script'
|
||||
|
||||
const handleUploadClick = () => {
|
||||
router.push(uploadPath)
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const selectedFile = e.target.files?.[0]
|
||||
if (selectedFile) { setFile(selectedFile); setUploadError(null) }
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!file) return
|
||||
setIsUploading(true); setProgress(0); setUploadError(null)
|
||||
try {
|
||||
if (USE_MOCK) {
|
||||
for (let i = 0; i <= 100; i += 20) { await new Promise(r => setTimeout(r, 400)); setProgress(i) }
|
||||
toast.success(isScript ? '脚本已提交，等待 AI 审核' : '视频已提交，等待 AI 审核')
|
||||
onUploaded()
|
||||
} else {
|
||||
const result = await api.proxyUpload(file, isScript ? 'script' : 'video', (pct) => {
|
||||
setProgress(Math.min(90, Math.round(pct * 0.9)))
|
||||
})
|
||||
setProgress(95)
|
||||
if (isScript) {
|
||||
await api.uploadTaskScript(taskId, { file_url: result.url, file_name: result.file_name })
|
||||
} else {
|
||||
await api.uploadTaskVideo(taskId, { file_url: result.url, file_name: result.file_name })
|
||||
}
|
||||
setProgress(100)
|
||||
toast.success(isScript ? '脚本已提交，等待 AI 审核' : '视频已提交，等待 AI 审核')
|
||||
onUploaded()
|
||||
}
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : '上传失败'
|
||||
setUploadError(msg); toast.error(msg)
|
||||
} finally { setIsUploading(false) }
|
||||
}
|
||||
|
||||
const formatSize = (bytes: number) => {
|
||||
if (bytes < 1024) return bytes + 'B'
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + 'KB'
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + 'MB'
|
||||
}
|
||||
|
||||
const acceptTypes = isScript ? '.doc,.docx,.pdf,.txt,.xls,.xlsx' : '.mp4,.mov,.avi,.mkv'
|
||||
const acceptHint = isScript ? '支持 Word、PDF、TXT、Excel 格式' : '支持 MP4/MOV 格式，≤ 100MB'
|
||||
|
||||
return (
|
||||
<div className="bg-bg-card rounded-2xl card-shadow">
|
||||
<div className="flex items-center gap-2 p-4 border-b border-border-subtle">
|
||||
<Upload className="w-5 h-5 text-accent-indigo" />
|
||||
<span className="text-base font-semibold text-text-primary">{isScript ? '上传脚本' : '上传视频'}</span>
|
||||
<span className="ml-auto px-2.5 py-1 rounded-full text-xs font-semibold bg-accent-indigo/15 text-accent-indigo">待提交</span>
|
||||
</div>
|
||||
<div className="p-4 space-y-4">
|
||||
{!file ? (
|
||||
<label className="border-2 border-dashed border-border-subtle rounded-xl p-8 text-center hover:border-accent-indigo/50 transition-colors cursor-pointer block">
|
||||
<Upload className="w-8 h-8 mx-auto text-text-tertiary mb-3" />
|
||||
<p className="text-text-secondary mb-1">点击选择{isScript ? '脚本' : '视频'}文件</p>
|
||||
<p className="text-xs text-text-tertiary">{acceptHint}</p>
|
||||
<input type="file" accept={acceptTypes} onChange={handleFileChange} className="hidden" />
|
||||
</label>
|
||||
) : (
|
||||
<div className="border border-border-subtle rounded-xl overflow-hidden">
|
||||
<div className="px-4 py-2.5 bg-bg-elevated border-b border-border-subtle">
|
||||
<span className="text-xs font-medium text-text-secondary">已选文件</span>
|
||||
</div>
|
||||
<div className="px-4 py-3">
|
||||
<div className="flex items-center gap-3">
|
||||
{isUploading ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin text-accent-indigo flex-shrink-0" />
|
||||
) : uploadError ? (
|
||||
<AlertTriangle className="w-4 h-4 text-accent-coral flex-shrink-0" />
|
||||
) : (
|
||||
<CheckCircle className="w-4 h-4 text-accent-green flex-shrink-0" />
|
||||
)}
|
||||
<FileText className="w-4 h-4 text-accent-indigo flex-shrink-0" />
|
||||
<span className="flex-1 text-sm text-text-primary truncate">{file.name}</span>
|
||||
<span className="text-xs text-text-tertiary">{formatSize(file.size)}</span>
|
||||
{!isUploading && (
|
||||
<button type="button" onClick={() => { setFile(null); setUploadError(null) }} className="p-1 hover:bg-bg-elevated rounded">
|
||||
<XCircle className="w-4 h-4 text-text-tertiary" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{isUploading && (
|
||||
<>
|
||||
<div className="mt-2 ml-[30px] h-2 bg-bg-page rounded-full overflow-hidden">
|
||||
<div className="h-full bg-accent-indigo rounded-full transition-all duration-300" style={{ width: `${progress}%` }} />
|
||||
</div>
|
||||
<p className="mt-1 ml-[30px] text-xs text-text-tertiary">上传中 {progress}%</p>
|
||||
</>
|
||||
)}
|
||||
{uploadError && <p className="mt-1 ml-[30px] text-xs text-accent-coral">{uploadError}</p>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSubmit}
|
||||
disabled={!file || isUploading}
|
||||
className="w-full flex items-center justify-center gap-2 px-6 py-3 rounded-xl bg-gradient-to-r from-accent-indigo to-[#4F46E5] text-white font-semibold hover:opacity-90 transition-opacity disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isUploading ? <><Loader2 className="w-5 h-5 animate-spin" />上传中 {progress}%</> : <><Upload className="w-5 h-5" />{isScript ? '提交脚本' : '提交视频'}</>}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function getDimensionLabel(key: string) {
|
||||
const labels: Record<string, string> = { legal: '法规合规', platform: '平台规则', brand_safety: '品牌安全', brief_match: 'Brief 匹配' }
|
||||
return labels[key] || key
|
||||
}
|
||||
|
||||
function AIResultDetailSection({ task }: { task: TaskData }) {
|
||||
if (!task.aiResult) return null
|
||||
const { dimensions, sellingPointMatches, briefMatchDetail, violations } = task.aiResult
|
||||
|
||||
return (
|
||||
<div className="bg-bg-card rounded-2xl card-shadow">
|
||||
<div className="flex items-center justify-between p-4 border-b border-border-subtle">
|
||||
<div className="flex items-center gap-2">
|
||||
<Bot className="w-5 h-5 text-accent-indigo" />
|
||||
<span className="text-base font-semibold text-text-primary">AI 审核结果</span>
|
||||
</div>
|
||||
<span className={cn('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>
|
||||
</div>
|
||||
<div className="p-4 space-y-4">
|
||||
{dimensions && (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{(['legal', 'platform', 'brand_safety', 'brief_match'] as const).map(key => {
|
||||
const dim = dimensions[key]
|
||||
if (!dim) return null
|
||||
return (
|
||||
<div key={key} className={cn('p-3 rounded-xl border', dim.passed ? 'bg-accent-green/5 border-accent-green/20' : 'bg-accent-coral/5 border-accent-coral/20')}>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-xs text-text-secondary">{getDimensionLabel(key)}</span>
|
||||
{dim.passed ? <CheckCircle className="w-4 h-4 text-accent-green" /> : <XCircle className="w-4 h-4 text-accent-coral" />}
|
||||
</div>
|
||||
<span className={cn('text-lg font-bold', dim.passed ? (dim.score >= 85 ? 'text-accent-green' : 'text-yellow-400') : 'text-accent-coral')}>{dim.score}</span>
|
||||
{dim.issue_count > 0 && <span className="text-xs text-text-tertiary ml-1">({dim.issue_count} 项问题)</span>}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{violations.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2">
|
||||
<AlertTriangle className="w-4 h-4 text-accent-coral" /> 违规检测 ({violations.length})
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{violations.map((v, idx) => (
|
||||
<div key={idx} className="p-3 bg-accent-coral/10 rounded-xl border border-accent-coral/30">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="px-2 py-0.5 rounded text-xs font-semibold bg-accent-coral/15 text-accent-coral">{v.type}</span>
|
||||
{v.dimension && <span className="text-xs text-text-tertiary">{getDimensionLabel(v.dimension)}</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>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* Brief 匹配度详情 */}
|
||||
{briefMatchDetail && (
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2">
|
||||
<Target className="w-4 h-4 text-accent-indigo" /> Brief 匹配度分析
|
||||
</h4>
|
||||
<div className="p-3 bg-bg-elevated rounded-xl space-y-3">
|
||||
{/* 评分说明 */}
|
||||
<p className="text-sm text-text-secondary">{briefMatchDetail.explanation}</p>
|
||||
{/* 覆盖率进度条 */}
|
||||
{briefMatchDetail.total_points > 0 && (
|
||||
<div>
|
||||
<div className="flex items-center justify-between text-xs mb-1">
|
||||
<span className="text-text-tertiary">卖点覆盖率</span>
|
||||
<span className="text-text-primary font-medium">{briefMatchDetail.matched_points}/{briefMatchDetail.required_points > 0 ? briefMatchDetail.required_points : briefMatchDetail.total_points} 条</span>
|
||||
</div>
|
||||
<div className="h-2 bg-bg-page rounded-full overflow-hidden">
|
||||
<div className={cn('h-full rounded-full transition-all', briefMatchDetail.coverage_score >= 80 ? 'bg-accent-green' : briefMatchDetail.coverage_score >= 50 ? 'bg-accent-amber' : 'bg-accent-coral')} style={{ width: `${briefMatchDetail.coverage_score}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* 亮点 */}
|
||||
{briefMatchDetail.highlights.length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs text-accent-green font-medium mb-1">亮点</p>
|
||||
<div className="space-y-1">
|
||||
{briefMatchDetail.highlights.map((h, i) => (
|
||||
<div key={i} className="flex items-start gap-2">
|
||||
<CheckCircle className="w-3.5 h-3.5 text-accent-green flex-shrink-0 mt-0.5" />
|
||||
<span className="text-xs text-text-secondary">{h}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* 问题点 */}
|
||||
{briefMatchDetail.issues.length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs text-accent-coral font-medium mb-1">可改进</p>
|
||||
<div className="space-y-1">
|
||||
{briefMatchDetail.issues.map((issue, i) => (
|
||||
<div key={i} className="flex items-start gap-2">
|
||||
<AlertTriangle className="w-3.5 h-3.5 text-accent-coral flex-shrink-0 mt-0.5" />
|
||||
<span className="text-xs text-text-secondary">{issue}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* 卖点匹配列表 */}
|
||||
{sellingPointMatches && sellingPointMatches.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2">
|
||||
<Target className="w-4 h-4 text-accent-green" /> 卖点匹配详情
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{sellingPointMatches.map((sp, idx) => (
|
||||
<div key={idx} className="flex items-start gap-2 p-2.5 rounded-xl bg-bg-elevated">
|
||||
{sp.matched ? <CheckCircle className="w-4 h-4 text-accent-green flex-shrink-0 mt-0.5" /> : <XCircle className="w-4 h-4 text-accent-coral flex-shrink-0 mt-0.5" />}
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-text-primary">{sp.content}</span>
|
||||
<span className={cn('px-1.5 py-0.5 text-xs rounded',
|
||||
sp.priority === 'core' ? 'bg-accent-coral/20 text-accent-coral' :
|
||||
sp.priority === 'recommended' ? 'bg-accent-amber/20 text-accent-amber' :
|
||||
'bg-bg-page text-text-tertiary'
|
||||
)}>{sp.priority === 'core' ? '核心' : sp.priority === 'recommended' ? '推荐' : '参考'}</span>
|
||||
</div>
|
||||
{sp.evidence && <p className="text-xs text-text-tertiary mt-0.5">{sp.evidence}</p>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ReviewFeedbackCard({ review, type }: { review: { result: string; comment: string; reviewer: string; time: string }; type: 'agency' | 'brand' }) {
|
||||
const isApproved = review.result === 'approved'
|
||||
const title = type === 'agency' ? '代理商审核意见' : '品牌方终审意见'
|
||||
return (
|
||||
<div className={cn('bg-bg-card rounded-2xl card-shadow border', isApproved ? 'border-accent-green/30' : 'border-accent-coral/30')}>
|
||||
<div className="flex items-center gap-2 p-4 border-b border-border-subtle">
|
||||
{isApproved ? <CheckCircle className="w-5 h-5 text-accent-green" /> : <XCircle className="w-5 h-5 text-accent-coral" />}
|
||||
<span className="text-base font-semibold text-text-primary">{title}</span>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="font-medium text-text-primary">{review.reviewer}</span>
|
||||
<span className={cn('px-2 py-0.5 rounded text-xs font-semibold', isApproved ? 'bg-accent-green/15 text-accent-green' : 'bg-accent-coral/15 text-accent-coral')}>
|
||||
{isApproved ? '通过' : '驳回'}
|
||||
</span>
|
||||
</div>
|
||||
{review.comment && <p className="text-sm text-text-secondary">{review.comment}</p>}
|
||||
<p className="text-xs text-text-tertiary mt-2">{review.time}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function UploadView({ task, toast, briefData, onUploaded }: { task: TaskData; toast: ReturnType<typeof useToast>; briefData: typeof mockBriefData; onUploaded: () => void }) {
|
||||
const isScript = task.phase === 'script'
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 h-full">
|
||||
{isScript && <AgencyBriefSection toast={toast} briefData={briefData} />}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-text-primary">{isScript ? '上传脚本' : '上传视频'}</h3>
|
||||
<p className="text-sm text-text-tertiary">{isScript ? '支持粘贴文本或上传文档' : '支持 MP4/MOV 格式，≤ 100MB'}</p>
|
||||
</div>
|
||||
<span className="px-2.5 py-1 rounded-full text-xs font-semibold bg-accent-indigo/15 text-accent-indigo">待提交</span>
|
||||
</div>
|
||||
<div
|
||||
className="flex-1 flex flex-col items-center justify-center gap-5 rounded-2xl border-2 border-dashed transition-colors card-shadow bg-bg-card min-h-[400px] border-border-subtle hover:border-accent-indigo/50 cursor-pointer"
|
||||
onClick={handleUploadClick}
|
||||
>
|
||||
<div className="w-20 h-20 rounded-full bg-accent-indigo/15 flex items-center justify-center">
|
||||
<Upload className="w-10 h-10 text-accent-indigo" />
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2 text-center">
|
||||
<p className="text-lg font-semibold text-text-primary">点击进入上传页面</p>
|
||||
<p className="text-sm text-text-tertiary">{isScript ? '支持 .doc、.docx、.txt 格式' : '支持 MP4/MOV 格式，≤ 100MB'}</p>
|
||||
</div>
|
||||
<button type="button" onClick={handleUploadClick} className="flex items-center gap-2 px-8 py-3.5 rounded-xl bg-gradient-to-r from-accent-indigo to-[#4F46E5] text-white font-semibold hover:opacity-90 transition-opacity">
|
||||
<Upload className="w-5 h-5" />
|
||||
{isScript ? '上传脚本文档' : '上传视频文件'}
|
||||
</button>
|
||||
</div>
|
||||
<FileUploadSection taskId={task.id} phase={task.phase} onUploaded={onUploaded} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -489,20 +791,20 @@ function AIReviewingView({ task }: { task: TaskData }) {
|
||||
)
|
||||
}
|
||||
|
||||
function RejectionView({ task, onAppeal }: { task: TaskData; onAppeal: () => void }) {
|
||||
function RejectionView({ task, onAppeal, onReupload }: { task: TaskData; onAppeal: () => void; onReupload: () => void }) {
|
||||
const getTitle = () => {
|
||||
switch (task.stage) {
|
||||
case 'ai_result': return 'AI 审核结果'
|
||||
case 'agency_rejected': return '代理商审核结果'
|
||||
case 'brand_rejected': return '品牌方审核结果'
|
||||
case 'agency_rejected': return '代理商审核驳回'
|
||||
case 'brand_rejected': return '品牌方审核驳回'
|
||||
default: return '审核结果'
|
||||
}
|
||||
}
|
||||
const getStatusText = () => {
|
||||
switch (task.stage) {
|
||||
case 'ai_result': return 'AI 检测到问题'
|
||||
case 'agency_rejected': return '代理商审核驳回'
|
||||
case 'brand_rejected': return '品牌方审核驳回'
|
||||
case 'ai_result': return 'AI 检测到问题，请修改后重新上传'
|
||||
case 'agency_rejected': return '代理商审核驳回，请根据意见修改'
|
||||
case 'brand_rejected': return '品牌方审核驳回，请根据意见修改'
|
||||
default: return '需要修改'
|
||||
}
|
||||
}
|
||||
@@ -510,7 +812,7 @@ function RejectionView({ task, onAppeal }: { task: TaskData; onAppeal: () => voi
|
||||
return (
|
||||
<div className="flex flex-col gap-6 h-full">
|
||||
<ReviewProgressBar task={task} />
|
||||
<div className="bg-bg-card rounded-2xl p-6 card-shadow flex-1 flex flex-col">
|
||||
<div className="bg-bg-card rounded-2xl p-6 card-shadow">
|
||||
<div className="flex items-center gap-3 pb-5 border-b border-border-subtle">
|
||||
<div className="w-12 h-12 rounded-xl bg-accent-coral/15 flex items-center justify-center">
|
||||
<XCircle className="w-6 h-6 text-accent-coral" />
|
||||
@@ -525,35 +827,19 @@ function RejectionView({ task, onAppeal }: { task: TaskData; onAppeal: () => voi
|
||||
<p className="text-sm text-text-secondary leading-relaxed">{task.rejectionReason}</p>
|
||||
</div>
|
||||
)}
|
||||
{task.issues && task.issues.length > 0 && (
|
||||
<div className="py-4 flex flex-col gap-4 flex-1">
|
||||
<span className="text-sm font-semibold text-text-primary">发现 {task.issues.length} 处问题</span>
|
||||
<div className="flex flex-col gap-3">
|
||||
{task.issues.map((issue, index) => (
|
||||
<div key={index} className="bg-bg-elevated rounded-xl p-4 flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={cn('px-2 py-0.5 rounded text-xs font-semibold',
|
||||
issue.severity === 'error' ? 'bg-accent-coral/15 text-accent-coral' : 'bg-amber-500/15 text-amber-500'
|
||||
)}>
|
||||
{issue.severity === 'error' ? '违规' : '建议'}
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-text-primary">{issue.title}</span>
|
||||
</div>
|
||||
<p className="text-[13px] text-text-secondary leading-relaxed">{issue.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center justify-between pt-4 border-t border-border-subtle">
|
||||
<div className="flex items-center justify-between pt-4">
|
||||
<button type="button" onClick={onAppeal} className="flex items-center gap-2 px-5 py-2.5 rounded-xl bg-bg-elevated border border-border-subtle text-text-secondary text-sm font-medium hover:bg-bg-page transition-colors">
|
||||
<MessageCircle className="w-[18px] h-[18px]" /> 申诉
|
||||
</button>
|
||||
<button type="button" className="flex items-center gap-2 px-6 py-2.5 rounded-xl bg-accent-green text-white text-sm font-semibold hover:bg-accent-green/90 transition-colors">
|
||||
<button type="button" onClick={onReupload} className="flex items-center gap-2 px-6 py-2.5 rounded-xl bg-accent-green text-white text-sm font-semibold hover:bg-accent-green/90 transition-colors">
|
||||
<Upload className="w-[18px] h-[18px]" /> 重新上传
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{task.stage === 'agency_rejected' && task.agencyReview && <ReviewFeedbackCard review={task.agencyReview} type="agency" />}
|
||||
{task.stage === 'brand_rejected' && task.brandReview && <ReviewFeedbackCard review={task.brandReview} type="brand" />}
|
||||
{task.stage === 'brand_rejected' && task.agencyReview && <ReviewFeedbackCard review={task.agencyReview} type="agency" />}
|
||||
<AIResultDetailSection task={task} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -567,9 +853,14 @@ function WaitingReviewView({ task }: { task: TaskData }) {
|
||||
<div className="flex flex-col gap-6 h-full">
|
||||
<ReviewProgressBar task={task} />
|
||||
<div className="bg-bg-card rounded-2xl p-6 card-shadow">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<FileText className="w-5 h-5 text-text-secondary" />
|
||||
<span className="text-base font-semibold text-text-primary">{task.phase === 'script' ? '脚本提交信息' : '视频提交信息'}</span>
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-accent-indigo/15 flex items-center justify-center">
|
||||
<Clock className="w-6 h-6 text-accent-indigo" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-lg font-semibold text-text-primary">{title}</span>
|
||||
<span className="text-sm text-text-secondary">{description}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-bg-elevated rounded-xl p-4 flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
@@ -600,28 +891,8 @@ function WaitingReviewView({ task }: { task: TaskData }) {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-bg-card rounded-2xl p-6 card-shadow flex-1">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-accent-indigo/15 flex items-center justify-center">
|
||||
<Clock className="w-6 h-6 text-accent-indigo" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-lg font-semibold text-text-primary">{title}</span>
|
||||
<span className="text-sm text-text-secondary">{description}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-accent-indigo/10 rounded-xl p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertTriangle className="w-5 h-5 text-accent-indigo flex-shrink-0 mt-0.5" />
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-sm font-medium text-text-primary">温馨提示</span>
|
||||
<span className="text-[13px] text-text-secondary">
|
||||
{isAgency ? '代理商通常会在 1-2 个工作日内完成审核。' : '品牌方终审通常需要 1-3 个工作日。'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{!isAgency && task.agencyReview && <ReviewFeedbackCard review={task.agencyReview} type="agency" />}
|
||||
<AIResultDetailSection task={task} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -631,30 +902,6 @@ function ApprovedView({ task }: { task: TaskData }) {
|
||||
return (
|
||||
<div className="flex flex-col gap-6 h-full">
|
||||
<ReviewProgressBar task={task} />
|
||||
<div className="bg-bg-card rounded-2xl p-6 card-shadow">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<FileText className="w-5 h-5 text-text-secondary" />
|
||||
<span className="text-base font-semibold text-text-primary">{task.phase === 'script' ? '脚本提交信息' : '视频提交信息'}</span>
|
||||
</div>
|
||||
<div className="bg-bg-elevated rounded-xl p-4 flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between"><span className="text-sm text-text-tertiary">提交时间</span><span className="text-sm text-text-primary">{task.submittedAt || '2026-02-01 10:30'}</span></div>
|
||||
<div className="flex items-center justify-between"><span className="text-sm text-text-tertiary">AI审核</span><span className="text-sm text-accent-green font-medium">已通过</span></div>
|
||||
<div className="flex items-center justify-between"><span className="text-sm text-text-tertiary">代理商审核</span><span className="text-sm text-accent-green font-medium">已通过</span></div>
|
||||
<div className="flex items-center justify-between"><span className="text-sm text-text-tertiary">品牌方终审</span><span className="text-sm text-accent-green font-medium">已通过</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-bg-card rounded-2xl p-6 card-shadow">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle className="w-6 h-6 text-accent-green" />
|
||||
<span className="text-lg font-semibold text-text-primary">品牌方审核通过</span>
|
||||
</div>
|
||||
<span className="px-2.5 py-1 rounded-full text-xs font-semibold bg-accent-green/15 text-accent-green">已通过</span>
|
||||
</div>
|
||||
<p className="text-sm text-text-secondary">
|
||||
{isVideoPhase ? '恭喜！视频已通过所有审核，可以发布了' : '脚本已通过品牌方终审，请继续上传视频'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-bg-card rounded-2xl p-6 card-shadow">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-accent-green/15 flex items-center justify-center">
|
||||
@@ -677,6 +924,9 @@ function ApprovedView({ task }: { task: TaskData }) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{task.brandReview && <ReviewFeedbackCard review={task.brandReview} type="brand" />}
|
||||
{task.agencyReview && <ReviewFeedbackCard review={task.agencyReview} type="agency" />}
|
||||
<AIResultDetailSection task={task} />
|
||||
{!isVideoPhase && (
|
||||
<div className="flex justify-center pt-4">
|
||||
<button type="button" className="flex items-center gap-2 px-12 py-4 rounded-xl bg-accent-green text-white text-base font-semibold">
|
||||
@@ -701,6 +951,7 @@ export default function TaskDetailPage() {
|
||||
const [briefData, setBriefData] = useState(mockBriefData)
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [showReupload, setShowReupload] = useState(false)
|
||||
|
||||
const loadTask = useCallback(async () => {
|
||||
if (USE_MOCK) {
|
||||
@@ -728,7 +979,7 @@ export default function TaskDetailPage() {
|
||||
sellingPoints: (brief.selling_points || []).map((sp, i) => ({
|
||||
id: `sp-${i}`,
|
||||
content: sp.content,
|
||||
required: sp.required,
|
||||
priority: (sp.priority || (sp.required ? 'core' : 'recommended')) as 'core' | 'recommended' | 'reference',
|
||||
})),
|
||||
blacklistWords: (brief.blacklist_words || []).map((bw, i) => ({
|
||||
id: `bw-${i}`,
|
||||
@@ -762,6 +1013,14 @@ export default function TaskDetailPage() {
|
||||
return () => { unsub1(); unsub2() }
|
||||
}, [subscribe, taskId, loadTask])
|
||||
|
||||
// AI 审核中时轮询（SSE 后备方案）
|
||||
useEffect(() => {
|
||||
if (!taskData || (taskData.stage !== 'ai_reviewing') || USE_MOCK) return
|
||||
const interval = setInterval(() => { loadTask() }, 5000)
|
||||
return () => clearInterval(interval)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [taskData?.stage, loadTask])
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<ResponsiveLayout role="creator">
|
||||
@@ -793,12 +1052,27 @@ export default function TaskDetailPage() {
|
||||
}
|
||||
|
||||
const renderContent = () => {
|
||||
// 驳回状态下选择重新上传时，显示上传界面
|
||||
if (showReupload && (taskData.stage === 'ai_result' || taskData.stage === 'agency_rejected' || taskData.stage === 'brand_rejected')) {
|
||||
return (
|
||||
<div className="flex flex-col gap-6 h-full">
|
||||
<div className="flex items-center gap-3">
|
||||
<button type="button" onClick={() => setShowReupload(false)} className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-bg-elevated text-text-secondary text-sm hover:bg-bg-card transition-colors">
|
||||
<ArrowLeft className="w-4 h-4" /> 返回审核详情
|
||||
</button>
|
||||
</div>
|
||||
{taskData.phase === 'script' && <AgencyBriefSection toast={toast} briefData={briefData} />}
|
||||
<FileUploadSection taskId={taskData.id} phase={taskData.phase} onUploaded={() => { setShowReupload(false); loadTask() }} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
switch (taskData.stage) {
|
||||
case 'upload': return <UploadView task={taskData} toast={toast} briefData={briefData} />
|
||||
case 'upload': return <UploadView task={taskData} toast={toast} briefData={briefData} onUploaded={loadTask} />
|
||||
case 'ai_reviewing': return <AIReviewingView task={taskData} />
|
||||
case 'ai_result':
|
||||
case 'agency_rejected':
|
||||
case 'brand_rejected': return <RejectionView task={taskData} onAppeal={handleAppeal} />
|
||||
case 'brand_rejected': return <RejectionView task={taskData} onAppeal={handleAppeal} onReupload={() => setShowReupload(true)} />
|
||||
case 'agency_reviewing':
|
||||
case 'brand_reviewing': return <WaitingReviewView task={taskData} />
|
||||
case 'brand_approved': return <ApprovedView task={taskData} />
|
||||
|
||||
@@ -16,9 +16,17 @@ import { Modal } from '@/components/ui/Modal'
|
||||
import { api } from '@/lib/api'
|
||||
import { USE_MOCK } from '@/contexts/AuthContext'
|
||||
import { useSSE } from '@/contexts/SSEContext'
|
||||
import type { TaskResponse, AIReviewResult } from '@/types/task'
|
||||
import type { TaskResponse, AIReviewResult, ReviewDimensions, SellingPointMatchResult, BriefMatchDetail } from '@/types/task'
|
||||
import type { BriefResponse } from '@/types/brief'
|
||||
|
||||
// ========== 工具函数 ==========
|
||||
function getSellingPointPriority(sp: { priority?: string; required?: boolean }): 'core' | 'recommended' | 'reference' {
|
||||
if (sp.priority) return sp.priority as 'core' | 'recommended' | 'reference'
|
||||
if (sp.required === true) return 'core'
|
||||
if (sp.required === false) return 'recommended'
|
||||
return 'recommended'
|
||||
}
|
||||
|
||||
// ========== 类型 ==========
|
||||
type AgencyBriefFile = { id: string; name: string; size: string; uploadedAt: string; description?: string }
|
||||
|
||||
@@ -29,8 +37,10 @@ type ScriptTaskUI = {
|
||||
scriptFile: string | null
|
||||
aiResult: null | {
|
||||
score: number
|
||||
violations: Array<{ type: string; content: string; suggestion: string }>
|
||||
complianceChecks: Array<{ item: string; passed: boolean; note?: string }>
|
||||
dimensions?: ReviewDimensions
|
||||
sellingPointMatches?: SellingPointMatchResult[]
|
||||
briefMatchDetail?: BriefMatchDetail
|
||||
violations: Array<{ type: string; content: string; suggestion: string; dimension?: string }>
|
||||
}
|
||||
agencyReview: null | { result: 'approved' | 'rejected'; comment: string; reviewer: string; time: string }
|
||||
brandReview: null | { result: 'approved' | 'rejected'; comment: string; reviewer: string; time: string }
|
||||
@@ -38,7 +48,7 @@ type ScriptTaskUI = {
|
||||
|
||||
type BriefUI = {
|
||||
files: AgencyBriefFile[]
|
||||
sellingPoints: { id: string; content: string; required: boolean }[]
|
||||
sellingPoints: { id: string; content: string; priority: 'core' | 'recommended' | 'reference' }[]
|
||||
blacklistWords: { id: string; word: string; reason: string }[]
|
||||
}
|
||||
|
||||
@@ -64,10 +74,10 @@ function mapApiToScriptUI(task: TaskResponse): ScriptTaskUI {
|
||||
|
||||
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,
|
||||
})),
|
||||
dimensions: task.script_ai_result.dimensions,
|
||||
sellingPointMatches: task.script_ai_result.selling_point_matches,
|
||||
briefMatchDetail: task.script_ai_result.brief_match_detail,
|
||||
violations: task.script_ai_result.violations.map(v => ({ type: v.type, content: v.content, suggestion: v.suggestion, dimension: v.dimension })),
|
||||
} : null
|
||||
|
||||
const agencyReview = task.script_agency_status && task.script_agency_status !== 'pending' ? {
|
||||
@@ -100,7 +110,7 @@ function mapBriefToUI(brief: BriefResponse): BriefUI {
|
||||
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 })),
|
||||
sellingPoints: (brief.selling_points || []).map((sp, i) => ({ id: `sp-${i}`, content: sp.content, priority: getSellingPointPriority(sp) })),
|
||||
blacklistWords: (brief.blacklist_words || []).map((bw, i) => ({ id: `bw-${i}`, word: bw.word, reason: bw.reason })),
|
||||
}
|
||||
}
|
||||
@@ -112,9 +122,9 @@ const mockBrief: BriefUI = {
|
||||
{ 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: 'sp1', content: 'SPF50+ PA++++', priority: 'core' as const },
|
||||
{ id: 'sp2', content: '轻薄质地，不油腻', priority: 'core' as const },
|
||||
{ id: 'sp3', content: '延展性好，易推开', priority: 'recommended' as const },
|
||||
],
|
||||
blacklistWords: [
|
||||
{ id: 'bw1', word: '最好', reason: '绝对化用语' },
|
||||
@@ -133,8 +143,9 @@ function AgencyBriefSection({ toast, briefData }: { toast: ReturnType<typeof use
|
||||
const [isExpanded, setIsExpanded] = useState(true)
|
||||
const [previewFile, setPreviewFile] = useState<AgencyBriefFile | null>(null)
|
||||
const handleDownload = (file: AgencyBriefFile) => { toast.info(`下载文件: ${file.name}`) }
|
||||
const requiredPoints = briefData.sellingPoints.filter(sp => sp.required)
|
||||
const optionalPoints = briefData.sellingPoints.filter(sp => !sp.required)
|
||||
const corePoints = briefData.sellingPoints.filter(sp => sp.priority === 'core')
|
||||
const recommendedPoints = briefData.sellingPoints.filter(sp => sp.priority === 'recommended')
|
||||
const referencePoints = briefData.sellingPoints.filter(sp => sp.priority === 'reference')
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -172,18 +183,26 @@ function AgencyBriefSection({ toast, briefData }: { toast: ReturnType<typeof use
|
||||
<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>
|
||||
<div className="space-y-2">
|
||||
{requiredPoints.length > 0 && (
|
||||
{corePoints.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) => (
|
||||
<p className="text-xs text-accent-coral font-medium mb-2">核心卖点（建议优先提及）</p>
|
||||
<div className="flex flex-wrap gap-2">{corePoints.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 && (
|
||||
{recommendedPoints.length > 0 && (
|
||||
<div className="p-3 bg-accent-amber/10 rounded-lg border border-accent-amber/30">
|
||||
<p className="text-xs text-accent-amber font-medium mb-2">推荐卖点（建议提及）</p>
|
||||
<div className="flex flex-wrap gap-2">{recommendedPoints.map((sp) => (
|
||||
<span key={sp.id} className="px-2 py-1 text-xs bg-accent-amber/20 text-accent-amber rounded">{sp.content}</span>
|
||||
))}</div>
|
||||
</div>
|
||||
)}
|
||||
{referencePoints.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) => (
|
||||
<p className="text-xs text-text-tertiary font-medium mb-2">参考信息</p>
|
||||
<div className="flex flex-wrap gap-2">{referencePoints.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>
|
||||
@@ -275,8 +294,8 @@ function UploadSection({ taskId, onUploaded }: { taskId: string; onUploaded: ()
|
||||
<label className="border-2 border-dashed border-border-subtle rounded-lg p-8 text-center hover:border-accent-indigo/50 transition-colors cursor-pointer block">
|
||||
<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" />
|
||||
<p className="text-xs text-text-tertiary">支持 Word、PDF、TXT、Excel 格式</p>
|
||||
<input type="file" accept=".doc,.docx,.pdf,.txt,.xls,.xlsx" onChange={handleFileChange} className="hidden" />
|
||||
</label>
|
||||
) : (
|
||||
<div className="border border-border-subtle rounded-lg overflow-hidden">
|
||||
@@ -355,8 +374,15 @@ function AIReviewingSection() {
|
||||
)
|
||||
}
|
||||
|
||||
function getDimensionLabel(key: string) {
|
||||
const labels: Record<string, string> = { legal: '法规合规', platform: '平台规则', brand_safety: '品牌安全', brief_match: 'Brief 匹配' }
|
||||
return labels[key] || key
|
||||
}
|
||||
|
||||
function AIResultSection({ task }: { task: ScriptTaskUI }) {
|
||||
if (!task.aiResult) return null
|
||||
const { dimensions, sellingPointMatches, briefMatchDetail, violations } = task.aiResult
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
@@ -366,32 +392,107 @@ function AIResultSection({ task }: { task: ScriptTaskUI }) {
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{task.aiResult.violations.length > 0 && (
|
||||
{dimensions && (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{(['legal', 'platform', 'brand_safety', 'brief_match'] as const).map(key => {
|
||||
const dim = dimensions[key]
|
||||
if (!dim) return null
|
||||
return (
|
||||
<div key={key} className={`p-3 rounded-lg border ${dim.passed ? 'bg-accent-green/5 border-accent-green/20' : 'bg-accent-coral/5 border-accent-coral/20'}`}>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-xs text-text-secondary">{getDimensionLabel(key)}</span>
|
||||
{dim.passed ? <CheckCircle size={14} className="text-accent-green" /> : <XCircle size={14} className="text-accent-coral" />}
|
||||
</div>
|
||||
<span className={`text-lg font-bold ${dim.passed ? (dim.score >= 85 ? 'text-accent-green' : 'text-yellow-400') : 'text-accent-coral'}`}>{dim.score}</span>
|
||||
{dim.issue_count > 0 && <span className="text-xs text-text-tertiary ml-1">({dim.issue_count} 项问题)</span>}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{violations.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2"><AlertTriangle size={14} className="text-orange-500" />违规检测 ({task.aiResult.violations.length})</h4>
|
||||
{task.aiResult.violations.map((v, idx) => (
|
||||
<h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2"><AlertTriangle size={14} className="text-orange-500" />违规检测 ({violations.length})</h4>
|
||||
{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>
|
||||
{v.dimension && <span className="text-xs text-text-tertiary">{getDimensionLabel(v.dimension)}</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>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-text-primary mb-2">合规检查</h4>
|
||||
<div className="space-y-2">
|
||||
{task.aiResult.complianceChecks.map((check, idx) => (
|
||||
<div key={idx} className="flex items-start gap-2 p-2 rounded-lg bg-bg-elevated">
|
||||
{check.passed ? <CheckCircle size={16} className="text-accent-green flex-shrink-0 mt-0.5" /> : <XCircle size={16} className="text-accent-coral flex-shrink-0 mt-0.5" />}
|
||||
<div className="flex-1">
|
||||
<span className="text-sm text-text-primary">{check.item}</span>
|
||||
{check.note && <p className="text-xs text-text-tertiary mt-0.5">{check.note}</p>}
|
||||
{briefMatchDetail && (
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2"><Target size={14} className="text-accent-indigo" />Brief 匹配度分析</h4>
|
||||
<div className="p-3 bg-bg-elevated rounded-lg space-y-3">
|
||||
<p className="text-sm text-text-secondary">{briefMatchDetail.explanation}</p>
|
||||
{briefMatchDetail.total_points > 0 && (
|
||||
<div>
|
||||
<div className="flex items-center justify-between text-xs mb-1">
|
||||
<span className="text-text-tertiary">卖点覆盖率</span>
|
||||
<span className="text-text-primary font-medium">{briefMatchDetail.matched_points}/{briefMatchDetail.required_points > 0 ? briefMatchDetail.required_points : briefMatchDetail.total_points} 条</span>
|
||||
</div>
|
||||
<div className="h-2 bg-bg-page rounded-full overflow-hidden">
|
||||
<div className={`h-full rounded-full transition-all ${briefMatchDetail.coverage_score >= 80 ? 'bg-accent-green' : briefMatchDetail.coverage_score >= 50 ? 'bg-accent-amber' : 'bg-accent-coral'}`} style={{ width: `${briefMatchDetail.coverage_score}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
)}
|
||||
{briefMatchDetail.highlights.length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs text-accent-green font-medium mb-1">亮点</p>
|
||||
<div className="space-y-1">
|
||||
{briefMatchDetail.highlights.map((h, i) => (
|
||||
<div key={i} className="flex items-start gap-2">
|
||||
<CheckCircle size={14} className="text-accent-green flex-shrink-0 mt-0.5" />
|
||||
<span className="text-xs text-text-secondary">{h}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{briefMatchDetail.issues.length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs text-accent-coral font-medium mb-1">可改进</p>
|
||||
<div className="space-y-1">
|
||||
{briefMatchDetail.issues.map((issue, i) => (
|
||||
<div key={i} className="flex items-start gap-2">
|
||||
<AlertTriangle size={14} className="text-accent-coral flex-shrink-0 mt-0.5" />
|
||||
<span className="text-xs text-text-secondary">{issue}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{sellingPointMatches && sellingPointMatches.length > 0 && (
|
||||
<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>
|
||||
<div className="space-y-2">
|
||||
{sellingPointMatches.map((sp, idx) => (
|
||||
<div key={idx} className="flex items-start gap-2 p-2 rounded-lg bg-bg-elevated">
|
||||
{sp.matched ? <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">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-text-primary">{sp.content}</span>
|
||||
<span className={`px-1.5 py-0.5 text-xs rounded ${
|
||||
sp.priority === 'core' ? 'bg-accent-coral/20 text-accent-coral' :
|
||||
sp.priority === 'recommended' ? 'bg-accent-amber/20 text-accent-amber' :
|
||||
'bg-bg-page text-text-tertiary'
|
||||
}`}>{sp.priority === 'core' ? '核心' : sp.priority === 'recommended' ? '推荐' : '参考'}</span>
|
||||
</div>
|
||||
{sp.evidence && <p className="text-xs text-text-tertiary mt-0.5">{sp.evidence}</p>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
@@ -484,6 +585,13 @@ export default function CreatorScriptPage() {
|
||||
return () => { unsub1(); unsub2() }
|
||||
}, [subscribe, taskId, loadTask])
|
||||
|
||||
// AI 审核中时轮询（SSE 的后备方案）
|
||||
useEffect(() => {
|
||||
if (task.scriptStatus !== 'ai_reviewing' || USE_MOCK) return
|
||||
const interval = setInterval(() => { loadTask() }, 5000)
|
||||
return () => clearInterval(interval)
|
||||
}, [task.scriptStatus, loadTask])
|
||||
|
||||
const handleContinueToVideo = () => { router.push(`/creator/task/${params.id}/video`) }
|
||||
|
||||
const getStatusDisplay = () => {
|
||||
|
||||
@@ -362,6 +362,13 @@ export default function CreatorVideoPage() {
|
||||
return () => { unsub1(); unsub2() }
|
||||
}, [subscribe, taskId, loadTask])
|
||||
|
||||
// AI 审核中时轮询（SSE 的后备方案）
|
||||
useEffect(() => {
|
||||
if (task.videoStatus !== 'ai_reviewing' || USE_MOCK) return
|
||||
const interval = setInterval(() => { loadTask() }, 5000)
|
||||
return () => clearInterval(interval)
|
||||
}, [task.videoStatus, loadTask])
|
||||
|
||||
const getStatusDisplay = () => {
|
||||
const map: Record<string, string> = {
|
||||
pending_upload: '待上传视频', ai_reviewing: 'AI 审核中', ai_result: 'AI 审核完成',
|
||||
|
||||
Reference in New Issue
Block a user