feat(creator): 完成达人端前端页面开发
- 新增申诉中心页面（列表、详情、新建申诉） - 新增申诉次数管理页面（按任务显示配额，支持向代理商申请） - 新增个人中心页面（达人ID复制、菜单导航） - 新增个人信息编辑、账户设置、消息通知设置页面 - 新增帮助中心和历史记录页面 - 新增脚本提交和视频提交页面 - 优化消息中心页面（消息详情跳转） - 优化任务详情页面布局和交互 - 更新 ResponsiveLayout、Sidebar、ReviewSteps 通用组件 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Your Name
parent
1011e73643
commit
2f9b7f05fd
269
frontend/app/creator/appeal-quota/page.tsx
Normal file
269
frontend/app/creator/appeal-quota/page.tsx
Normal file
@ -0,0 +1,269 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import {
|
||||
ArrowLeft,
|
||||
AlertCircle,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
XCircle,
|
||||
Send,
|
||||
Info,
|
||||
} from 'lucide-react'
|
||||
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
// 申请状态类型
|
||||
type RequestStatus = 'none' | 'pending' | 'approved' | 'rejected'
|
||||
|
||||
// 任务申诉次数数据
|
||||
interface TaskAppealQuota {
|
||||
id: string
|
||||
taskName: string
|
||||
agencyName: string
|
||||
remaining: number
|
||||
used: number
|
||||
requestStatus: RequestStatus
|
||||
requestTime?: string
|
||||
}
|
||||
|
||||
// 模拟任务申诉次数数据
|
||||
const mockTaskQuotas: TaskAppealQuota[] = [
|
||||
{
|
||||
id: '1',
|
||||
taskName: '618美妆推广视频',
|
||||
agencyName: '星辰传媒',
|
||||
remaining: 1,
|
||||
used: 0,
|
||||
requestStatus: 'none',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
taskName: '双11护肤品种草',
|
||||
agencyName: '星辰传媒',
|
||||
remaining: 0,
|
||||
used: 1,
|
||||
requestStatus: 'pending',
|
||||
requestTime: '2024-02-05 14:30',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
taskName: '春节限定礼盒开箱',
|
||||
agencyName: '晨曦文化',
|
||||
remaining: 2,
|
||||
used: 0,
|
||||
requestStatus: 'approved',
|
||||
requestTime: '2024-02-04 10:15',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
taskName: '情人节香水测评',
|
||||
agencyName: '晨曦文化',
|
||||
remaining: 0,
|
||||
used: 1,
|
||||
requestStatus: 'rejected',
|
||||
requestTime: '2024-02-03 16:20',
|
||||
},
|
||||
]
|
||||
|
||||
// 状态标签组件
|
||||
function StatusBadge({ status }: { status: RequestStatus }) {
|
||||
const config = {
|
||||
none: { label: '', icon: null, className: '' },
|
||||
pending: {
|
||||
label: '申请中',
|
||||
icon: Clock,
|
||||
className: 'bg-accent-amber/15 text-accent-amber',
|
||||
},
|
||||
approved: {
|
||||
label: '已同意',
|
||||
icon: CheckCircle,
|
||||
className: 'bg-accent-green/15 text-accent-green',
|
||||
},
|
||||
rejected: {
|
||||
label: '已拒绝',
|
||||
icon: XCircle,
|
||||
className: 'bg-accent-coral/15 text-accent-coral',
|
||||
},
|
||||
}
|
||||
|
||||
const { label, icon: Icon, className } = config[status]
|
||||
|
||||
if (status === 'none') return null
|
||||
|
||||
return (
|
||||
<span className={cn('inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium', className)}>
|
||||
{Icon && <Icon size={12} />}
|
||||
{label}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
// 任务卡片组件
|
||||
function TaskQuotaCard({
|
||||
task,
|
||||
onRequestIncrease,
|
||||
}: {
|
||||
task: TaskAppealQuota
|
||||
onRequestIncrease: (taskId: string) => void
|
||||
}) {
|
||||
const canRequest = task.requestStatus === 'none' || task.requestStatus === 'rejected'
|
||||
|
||||
return (
|
||||
<div className="bg-bg-card rounded-xl p-5 card-shadow flex flex-col gap-4">
|
||||
{/* 任务信息 */}
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex flex-col gap-1 min-w-0">
|
||||
<h3 className="text-[15px] font-medium text-text-primary truncate">{task.taskName}</h3>
|
||||
<p className="text-[13px] text-text-tertiary">{task.agencyName}</p>
|
||||
</div>
|
||||
<StatusBadge status={task.requestStatus} />
|
||||
</div>
|
||||
|
||||
{/* 申诉次数 */}
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-2xl font-bold text-accent-indigo">{task.remaining}</span>
|
||||
<span className="text-xs text-text-tertiary">剩余次数</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-2xl font-bold text-text-secondary">{task.used}</span>
|
||||
<span className="text-xs text-text-tertiary">已使用</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className="flex items-center justify-between pt-3 border-t border-border-subtle">
|
||||
{task.requestTime && (
|
||||
<span className="text-xs text-text-tertiary">
|
||||
{task.requestStatus === 'pending' ? '申请时间：' : '处理时间：'}
|
||||
{task.requestTime}
|
||||
</span>
|
||||
)}
|
||||
{!task.requestTime && <span />}
|
||||
|
||||
{canRequest ? (
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => onRequestIncrease(task.id)}
|
||||
className="gap-1.5"
|
||||
>
|
||||
<Send size={14} />
|
||||
申请增加
|
||||
</Button>
|
||||
) : task.requestStatus === 'pending' ? (
|
||||
<span className="text-xs text-accent-amber">等待代理商处理...</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function AppealQuotaPage() {
|
||||
const router = useRouter()
|
||||
const [tasks, setTasks] = useState(mockTaskQuotas)
|
||||
const [showSuccessToast, setShowSuccessToast] = useState(false)
|
||||
|
||||
// 申请增加申诉次数
|
||||
const handleRequestIncrease = (taskId: string) => {
|
||||
setTasks(prev =>
|
||||
prev.map(task =>
|
||||
task.id === taskId
|
||||
? {
|
||||
...task,
|
||||
requestStatus: 'pending' as RequestStatus,
|
||||
requestTime: new Date().toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
}),
|
||||
}
|
||||
: task
|
||||
)
|
||||
)
|
||||
setShowSuccessToast(true)
|
||||
setTimeout(() => setShowSuccessToast(false), 3000)
|
||||
}
|
||||
|
||||
// 统计数据
|
||||
const totalRemaining = tasks.reduce((sum, t) => sum + t.remaining, 0)
|
||||
const totalUsed = tasks.reduce((sum, t) => sum + t.used, 0)
|
||||
const pendingRequests = tasks.filter(t => t.requestStatus === 'pending').length
|
||||
|
||||
return (
|
||||
<ResponsiveLayout role="creator">
|
||||
<div className="flex flex-col gap-6 h-full">
|
||||
{/* 顶部栏 */}
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
className="w-10 h-10 rounded-xl bg-bg-elevated flex items-center justify-center hover:bg-bg-elevated/80 transition-colors"
|
||||
>
|
||||
<ArrowLeft size={20} className="text-text-secondary" />
|
||||
</button>
|
||||
<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">
|
||||
查看各任务的申诉次数，可向代理商申请增加
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 统计卡片 */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="bg-bg-card rounded-xl p-4 card-shadow flex flex-col items-center gap-1">
|
||||
<span className="text-2xl font-bold text-accent-indigo">{totalRemaining}</span>
|
||||
<span className="text-xs text-text-tertiary">总剩余次数</span>
|
||||
</div>
|
||||
<div className="bg-bg-card rounded-xl p-4 card-shadow flex flex-col items-center gap-1">
|
||||
<span className="text-2xl font-bold text-text-secondary">{totalUsed}</span>
|
||||
<span className="text-xs text-text-tertiary">总已使用</span>
|
||||
</div>
|
||||
<div className="bg-bg-card rounded-xl p-4 card-shadow flex flex-col items-center gap-1">
|
||||
<span className="text-2xl font-bold text-accent-amber">{pendingRequests}</span>
|
||||
<span className="text-xs text-text-tertiary">待处理申请</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 规则说明 */}
|
||||
<div className="bg-accent-indigo/10 rounded-xl p-4 flex gap-3">
|
||||
<Info size={20} className="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 leading-relaxed">
|
||||
每个任务初始有 1 次申诉机会，不同任务独立计算。如需更多次数，可点击"申请增加"向代理商发送请求，无需填写理由。代理商可增加的次数无上限。
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 任务列表 */}
|
||||
<div className="flex flex-col gap-4 flex-1 min-h-0 overflow-y-auto pb-4">
|
||||
<h2 className="text-base font-semibold text-text-primary sticky top-0 bg-bg-page py-2 -mt-2">
|
||||
任务申诉次数 ({tasks.length})
|
||||
</h2>
|
||||
{tasks.map(task => (
|
||||
<TaskQuotaCard
|
||||
key={task.id}
|
||||
task={task}
|
||||
onRequestIncrease={handleRequestIncrease}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 成功提示 */}
|
||||
{showSuccessToast && (
|
||||
<div className="fixed bottom-24 left-1/2 -translate-x-1/2 bg-accent-green text-white px-4 py-3 rounded-xl shadow-lg flex items-center gap-2 animate-fade-in z-50">
|
||||
<CheckCircle size={18} />
|
||||
<span className="text-sm font-medium">申请已发送，等待代理商处理</span>
|
||||
</div>
|
||||
)}
|
||||
</ResponsiveLayout>
|
||||
)
|
||||
}
|
||||
336
frontend/app/creator/appeals/[id]/page.tsx
Normal file
336
frontend/app/creator/appeals/[id]/page.tsx
Normal file
@ -0,0 +1,336 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useParams, useRouter } from 'next/navigation'
|
||||
import {
|
||||
ArrowLeft,
|
||||
MessageCircle,
|
||||
Clock,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
FileText,
|
||||
Image,
|
||||
Send,
|
||||
AlertTriangle
|
||||
} from 'lucide-react'
|
||||
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
// 申诉状态类型
|
||||
type AppealStatus = 'pending' | 'processing' | 'approved' | 'rejected'
|
||||
|
||||
// 申诉详情数据类型
|
||||
type AppealDetail = {
|
||||
id: string
|
||||
taskId: string
|
||||
taskTitle: string
|
||||
type: 'ai' | 'agency' | 'brand'
|
||||
reason: string
|
||||
content: string
|
||||
status: AppealStatus
|
||||
createdAt: string
|
||||
updatedAt?: string
|
||||
result?: string
|
||||
attachments?: { name: string; type: 'image' | 'document'; url: string }[]
|
||||
timeline?: { time: string; action: string; operator?: string }[]
|
||||
originalIssue?: { title: string; description: string }
|
||||
}
|
||||
|
||||
// 模拟申诉详情数据
|
||||
const mockAppealDetails: Record<string, AppealDetail> = {
|
||||
'appeal-001': {
|
||||
id: 'appeal-001',
|
||||
taskId: 'task-003',
|
||||
taskTitle: 'ZZ饮品夏日',
|
||||
type: 'ai',
|
||||
reason: '误判',
|
||||
content: '视频中出现的是我们自家品牌的历史产品，并非竞品。已附上品牌授权证明。',
|
||||
status: 'approved',
|
||||
createdAt: '2026-02-01 10:30',
|
||||
updatedAt: '2026-02-02 15:20',
|
||||
result: '经核实，该产品确为品牌方授权产品，申诉通过。AI已学习此案例，后续将避免类似误判。',
|
||||
attachments: [
|
||||
{ name: '品牌授权书.pdf', type: 'document', url: '#' },
|
||||
{ name: '产品对比图.jpg', type: 'image', url: '#' },
|
||||
],
|
||||
timeline: [
|
||||
{ time: '2026-02-01 10:30', action: '提交申诉' },
|
||||
{ time: '2026-02-01 14:15', action: '进入处理队列' },
|
||||
{ time: '2026-02-02 09:00', action: '开始审核', operator: '审核员 A' },
|
||||
{ time: '2026-02-02 15:20', action: '申诉通过', operator: '审核员 A' },
|
||||
],
|
||||
originalIssue: {
|
||||
title: '检测到竞品 Logo',
|
||||
description: '画面中 0:15-0:18 出现竞品「百事可乐」的 Logo，可能造成合规风险。',
|
||||
},
|
||||
},
|
||||
'appeal-002': {
|
||||
id: 'appeal-002',
|
||||
taskId: 'task-010',
|
||||
taskTitle: 'GG智能手表',
|
||||
type: 'agency',
|
||||
reason: '审核标准不清晰',
|
||||
content: '代理商反馈品牌调性不符，但Brief中并未明确说明科技专业形象的具体要求。请明确审核标准。',
|
||||
status: 'processing',
|
||||
createdAt: '2026-02-04 09:15',
|
||||
timeline: [
|
||||
{ time: '2026-02-04 09:15', action: '提交申诉' },
|
||||
{ time: '2026-02-04 11:30', action: '进入处理队列' },
|
||||
{ time: '2026-02-05 10:00', action: '开始审核', operator: '审核员 B' },
|
||||
],
|
||||
originalIssue: {
|
||||
title: '品牌调性不符',
|
||||
description: '脚本整体风格偏向娱乐化，与品牌科技专业形象不匹配。',
|
||||
},
|
||||
},
|
||||
'appeal-003': {
|
||||
id: 'appeal-003',
|
||||
taskId: 'task-011',
|
||||
taskTitle: 'HH美妆代言',
|
||||
type: 'brand',
|
||||
reason: '创意理解差异',
|
||||
content: '品牌方认为创意不够新颖，但该创意形式在同类型产品推广中效果显著，已附上数据支持。',
|
||||
status: 'pending',
|
||||
createdAt: '2026-02-05 14:00',
|
||||
attachments: [
|
||||
{ name: '同类案例数据.xlsx', type: 'document', url: '#' },
|
||||
],
|
||||
timeline: [
|
||||
{ time: '2026-02-05 14:00', action: '提交申诉' },
|
||||
],
|
||||
originalIssue: {
|
||||
title: '创意不够新颖',
|
||||
description: '脚本采用的是常见的口播形式，缺乏创新点和记忆点。',
|
||||
},
|
||||
},
|
||||
'appeal-004': {
|
||||
id: 'appeal-004',
|
||||
taskId: 'task-013',
|
||||
taskTitle: 'JJ旅行vlog',
|
||||
type: 'agency',
|
||||
reason: '版权问题异议',
|
||||
content: '使用的背景音乐来自无版权音乐库 Epidemic Sound，已购买商用授权。附上授权证明截图。',
|
||||
status: 'rejected',
|
||||
createdAt: '2026-01-28 11:30',
|
||||
updatedAt: '2026-01-30 16:45',
|
||||
result: '经核实，该音乐虽有授权，但授权范围不包含商业广告用途。建议更换音乐后重新提交。',
|
||||
attachments: [
|
||||
{ name: '授权截图.png', type: 'image', url: '#' },
|
||||
],
|
||||
timeline: [
|
||||
{ time: '2026-01-28 11:30', action: '提交申诉' },
|
||||
{ time: '2026-01-28 15:00', action: '进入处理队列' },
|
||||
{ time: '2026-01-29 09:30', action: '开始审核', operator: '审核员 C' },
|
||||
{ time: '2026-01-30 16:45', action: '申诉驳回', operator: '审核员 C' },
|
||||
],
|
||||
originalIssue: {
|
||||
title: '背景音乐版权问题',
|
||||
description: '视频中使用的背景音乐「XXX」存在版权风险，平台可能会限流或下架。',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
// 状态配置
|
||||
const statusConfig: Record<AppealStatus, { label: string; color: string; bgColor: string; icon: React.ElementType }> = {
|
||||
pending: { label: '待处理', color: 'text-amber-500', bgColor: 'bg-amber-500/15', icon: Clock },
|
||||
processing: { label: '处理中', color: 'text-accent-indigo', bgColor: 'bg-accent-indigo/15', icon: MessageCircle },
|
||||
approved: { label: '已通过', color: 'text-accent-green', bgColor: 'bg-accent-green/15', icon: CheckCircle },
|
||||
rejected: { label: '已驳回', color: 'text-accent-coral', bgColor: 'bg-accent-coral/15', icon: XCircle },
|
||||
}
|
||||
|
||||
// 类型配置
|
||||
const typeConfig: Record<string, { label: string; color: string }> = {
|
||||
ai: { label: 'AI审核', color: 'text-accent-indigo' },
|
||||
agency: { label: '代理商审核', color: 'text-purple-400' },
|
||||
brand: { label: '品牌方审核', color: 'text-accent-blue' },
|
||||
}
|
||||
|
||||
export default function AppealDetailPage() {
|
||||
const params = useParams()
|
||||
const router = useRouter()
|
||||
const appealId = params.id as string
|
||||
const [newComment, setNewComment] = useState('')
|
||||
|
||||
const appeal = mockAppealDetails[appealId]
|
||||
|
||||
if (!appeal) {
|
||||
return (
|
||||
<ResponsiveLayout role="creator">
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<XCircle className="w-16 h-16 text-text-tertiary" />
|
||||
<p className="text-lg text-text-secondary">申诉记录不存在</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
className="px-6 py-2.5 rounded-xl bg-accent-indigo text-white text-sm font-medium"
|
||||
>
|
||||
返回申诉列表
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ResponsiveLayout>
|
||||
)
|
||||
}
|
||||
|
||||
const status = statusConfig[appeal.status]
|
||||
const type = typeConfig[appeal.type]
|
||||
const StatusIcon = status.icon
|
||||
|
||||
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">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
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 w-fit mb-2"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
返回
|
||||
</button>
|
||||
<h1 className="text-xl lg:text-[28px] font-bold text-text-primary">申诉详情</h1>
|
||||
<p className="text-sm lg:text-[15px] text-text-secondary">申诉编号: {appeal.id}</p>
|
||||
</div>
|
||||
<div className={cn('px-4 py-2 rounded-xl flex items-center gap-2', status.bgColor)}>
|
||||
<StatusIcon className={cn('w-5 h-5', status.color)} />
|
||||
<span className={cn('font-semibold', status.color)}>{status.label}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 内容区 - 响应式布局 */}
|
||||
<div className="flex flex-col lg:flex-row gap-6 flex-1 min-h-0 overflow-y-auto lg:overflow-hidden">
|
||||
{/* 左侧：申诉信息 */}
|
||||
<div className="flex-1 flex flex-col gap-5 lg:overflow-y-auto lg:pr-2">
|
||||
{/* 原始问题 */}
|
||||
{appeal.originalIssue && (
|
||||
<div className="bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow">
|
||||
<h3 className="text-base lg:text-lg font-semibold text-text-primary mb-4">原始审核问题</h3>
|
||||
<div className="bg-accent-coral/10 rounded-xl p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<AlertTriangle className="w-5 h-5 text-accent-coral" />
|
||||
<span className="font-semibold text-text-primary">{appeal.originalIssue.title}</span>
|
||||
</div>
|
||||
<p className="text-sm text-text-secondary">{appeal.originalIssue.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 申诉内容 */}
|
||||
<div className="bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow">
|
||||
<h3 className="text-base lg:text-lg font-semibold text-text-primary mb-4">申诉内容</h3>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center gap-2 lg:gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-text-tertiary">关联任务:</span>
|
||||
<span className="text-sm font-medium text-text-primary">{appeal.taskTitle}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-text-tertiary">申诉对象:</span>
|
||||
<span className={cn('text-sm font-medium', type.color)}>{type.label}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-text-tertiary">申诉原因:</span>
|
||||
<span className="text-sm font-medium text-text-primary">{appeal.reason}</span>
|
||||
</div>
|
||||
<div className="bg-bg-elevated rounded-xl p-4">
|
||||
<p className="text-sm text-text-secondary leading-relaxed">{appeal.content}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 附件 */}
|
||||
{appeal.attachments && appeal.attachments.length > 0 && (
|
||||
<div className="bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow">
|
||||
<h3 className="text-base lg:text-lg font-semibold text-text-primary mb-4">证明材料</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{appeal.attachments.map((attachment, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center gap-3 px-4 py-3 bg-bg-elevated rounded-xl cursor-pointer hover:bg-bg-page transition-colors"
|
||||
>
|
||||
{attachment.type === 'image' ? (
|
||||
<Image className="w-5 h-5 text-accent-indigo" />
|
||||
) : (
|
||||
<FileText className="w-5 h-5 text-accent-indigo" />
|
||||
)}
|
||||
<span className="text-sm text-text-primary">{attachment.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 处理结果 */}
|
||||
{appeal.result && (
|
||||
<div className="bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow">
|
||||
<h3 className="text-base lg:text-lg font-semibold text-text-primary mb-4">处理结果</h3>
|
||||
<div className={cn(
|
||||
'rounded-xl p-4',
|
||||
appeal.status === 'approved' ? 'bg-accent-green/10' : 'bg-accent-coral/10'
|
||||
)}>
|
||||
<p className="text-sm text-text-secondary leading-relaxed">{appeal.result}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 补充说明（处理中状态可用） */}
|
||||
{(appeal.status === 'pending' || appeal.status === 'processing') && (
|
||||
<div className="bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow">
|
||||
<h3 className="text-base lg:text-lg font-semibold text-text-primary mb-4">补充说明</h3>
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="输入补充说明..."
|
||||
value={newComment}
|
||||
onChange={(e) => setNewComment(e.target.value)}
|
||||
className="flex-1 px-4 py-3 bg-bg-elevated rounded-xl text-sm text-text-primary placeholder-text-tertiary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="px-5 py-3 rounded-xl bg-accent-indigo text-white text-sm font-medium flex items-center gap-2"
|
||||
>
|
||||
<Send className="w-4 h-4" />
|
||||
发送
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 右侧：时间线 */}
|
||||
<div className="lg:w-[320px] lg:flex-shrink-0">
|
||||
<div className="bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow lg:h-full">
|
||||
<h3 className="text-base lg:text-lg font-semibold text-text-primary mb-5">处理进度</h3>
|
||||
<div className="flex flex-col gap-0">
|
||||
{appeal.timeline?.map((item, index) => (
|
||||
<div key={index} className="flex gap-4">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className={cn(
|
||||
'w-3 h-3 rounded-full',
|
||||
index === (appeal.timeline?.length || 0) - 1 ? 'bg-accent-indigo' : 'bg-text-tertiary'
|
||||
)} />
|
||||
{index < (appeal.timeline?.length || 0) - 1 && (
|
||||
<div className="w-0.5 h-16 bg-border-subtle" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 pb-6">
|
||||
<span className="text-xs text-text-tertiary">{item.time}</span>
|
||||
<span className="text-sm font-medium text-text-primary">{item.action}</span>
|
||||
{item.operator && (
|
||||
<span className="text-xs text-text-secondary">{item.operator}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ResponsiveLayout>
|
||||
)
|
||||
}
|
||||
395
frontend/app/creator/appeals/new/page.tsx
Normal file
395
frontend/app/creator/appeals/new/page.tsx
Normal file
@ -0,0 +1,395 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useRouter, useSearchParams } from 'next/navigation'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Upload,
|
||||
X,
|
||||
FileText,
|
||||
Image,
|
||||
AlertTriangle,
|
||||
CheckCircle
|
||||
} from 'lucide-react'
|
||||
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
// 申诉原因选项
|
||||
const appealReasons = [
|
||||
{ id: 'misjudge', label: '误判', description: 'AI或审核员误判了内容' },
|
||||
{ id: 'unclear', label: '标准不清晰', description: '审核标准不明确或有歧义' },
|
||||
{ id: 'evidence', label: '有证据支持', description: '有证据证明内容符合要求' },
|
||||
{ id: 'context', label: '上下文理解', description: '审核未考虑完整上下文' },
|
||||
{ id: 'other', label: '其他原因', description: '其他需要说明的情况' },
|
||||
]
|
||||
|
||||
// 任务信息（模拟从URL参数获取）
|
||||
const getTaskInfo = (taskId: string) => {
|
||||
const tasks: Record<string, { title: string; issue: string; issueDesc: string; type: string; appealRemaining: number; agencyName: string }> = {
|
||||
'task-003': {
|
||||
title: 'ZZ饮品夏日',
|
||||
issue: '检测到竞品提及',
|
||||
issueDesc: '脚本第3段提及了竞品「百事可乐」，可能造成品牌冲突风险。',
|
||||
type: 'ai',
|
||||
appealRemaining: 1,
|
||||
agencyName: '星辰传媒',
|
||||
},
|
||||
'task-010': {
|
||||
title: 'GG智能手表',
|
||||
issue: '品牌调性不符',
|
||||
issueDesc: '脚本整体风格偏向娱乐化，与品牌科技专业形象不匹配。',
|
||||
type: 'agency',
|
||||
appealRemaining: 0,
|
||||
agencyName: '星辰传媒',
|
||||
},
|
||||
'task-011': {
|
||||
title: 'HH美妆代言',
|
||||
issue: '创意不够新颖',
|
||||
issueDesc: '脚本采用的是常见的口播形式，缺乏创新点和记忆点。',
|
||||
type: 'brand',
|
||||
appealRemaining: 1,
|
||||
agencyName: '晨曦文化',
|
||||
},
|
||||
'task-013': {
|
||||
title: 'JJ旅行vlog',
|
||||
issue: '背景音乐版权问题',
|
||||
issueDesc: '视频中使用的背景音乐存在版权风险。',
|
||||
type: 'agency',
|
||||
appealRemaining: 2,
|
||||
agencyName: '晨曦文化',
|
||||
},
|
||||
'task-015': {
|
||||
title: 'LL厨房电器',
|
||||
issue: '使用场景不真实',
|
||||
issueDesc: '视频中的厨房场景过于整洁，缺乏真实感。',
|
||||
type: 'brand',
|
||||
appealRemaining: 0,
|
||||
agencyName: '星辰传媒',
|
||||
},
|
||||
}
|
||||
return tasks[taskId] || { title: '未知任务', issue: '未知问题', issueDesc: '', type: 'ai', appealRemaining: 0, agencyName: '未知代理商' }
|
||||
}
|
||||
|
||||
export default function NewAppealPage() {
|
||||
const router = useRouter()
|
||||
const searchParams = useSearchParams()
|
||||
const taskId = searchParams.get('taskId') || ''
|
||||
const taskInfo = getTaskInfo(taskId)
|
||||
|
||||
const [selectedReason, setSelectedReason] = useState<string>('')
|
||||
const [content, setContent] = useState('')
|
||||
const [attachments, setAttachments] = useState<{ name: string; type: 'image' | 'document' }[]>([])
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [isSubmitted, setIsSubmitted] = useState(false)
|
||||
const [isRequestingQuota, setIsRequestingQuota] = useState(false)
|
||||
const [quotaRequested, setQuotaRequested] = useState(false)
|
||||
|
||||
const hasAppealQuota = taskInfo.appealRemaining > 0
|
||||
|
||||
const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = e.target.files
|
||||
if (files) {
|
||||
const newAttachments = Array.from(files).map(file => ({
|
||||
name: file.name,
|
||||
type: file.type.startsWith('image/') ? 'image' as const : 'document' as const,
|
||||
}))
|
||||
setAttachments([...attachments, ...newAttachments])
|
||||
}
|
||||
}
|
||||
|
||||
const removeAttachment = (index: number) => {
|
||||
setAttachments(attachments.filter((_, i) => i !== index))
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!selectedReason || !content.trim()) return
|
||||
|
||||
setIsSubmitting(true)
|
||||
// 模拟提交
|
||||
await new Promise(resolve => setTimeout(resolve, 1500))
|
||||
setIsSubmitting(false)
|
||||
setIsSubmitted(true)
|
||||
|
||||
// 2秒后跳转到申诉列表
|
||||
setTimeout(() => {
|
||||
router.push('/creator/appeals')
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
const canSubmit = selectedReason && content.trim().length >= 20 && hasAppealQuota
|
||||
|
||||
// 申请增加申诉次数
|
||||
const handleRequestQuota = async () => {
|
||||
setIsRequestingQuota(true)
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
setIsRequestingQuota(false)
|
||||
setQuotaRequested(true)
|
||||
}
|
||||
|
||||
// 提交成功界面
|
||||
if (isSubmitted) {
|
||||
return (
|
||||
<ResponsiveLayout role="creator">
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="flex flex-col items-center gap-6 max-w-md text-center">
|
||||
<div className="w-20 h-20 rounded-full bg-accent-green/15 flex items-center justify-center">
|
||||
<CheckCircle className="w-10 h-10 text-accent-green" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<h2 className="text-2xl font-bold text-text-primary">申诉提交成功</h2>
|
||||
<p className="text-text-secondary">
|
||||
您的申诉已提交，我们将在 1-3 个工作日内处理完成。处理结果将通过消息中心通知您。
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm text-text-tertiary">正在跳转到申诉列表...</p>
|
||||
</div>
|
||||
</div>
|
||||
</ResponsiveLayout>
|
||||
)
|
||||
}
|
||||
|
||||
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">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
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 w-fit mb-2"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
返回
|
||||
</button>
|
||||
<h1 className="text-xl lg:text-[28px] font-bold text-text-primary">发起申诉</h1>
|
||||
<p className="text-sm lg:text-[15px] text-text-secondary">对审核结果有异议？提交申诉让我们重新审核</p>
|
||||
</div>
|
||||
<div className={cn(
|
||||
'flex items-center gap-2 px-4 py-2 rounded-xl',
|
||||
hasAppealQuota ? 'bg-accent-indigo/15' : 'bg-accent-coral/15'
|
||||
)}>
|
||||
<AlertTriangle className={cn('w-5 h-5', hasAppealQuota ? 'text-accent-indigo' : 'text-accent-coral')} />
|
||||
<span className={cn('text-sm font-medium', hasAppealQuota ? 'text-accent-indigo' : 'text-accent-coral')}>
|
||||
本任务剩余 {taskInfo.appealRemaining} 次申诉机会
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 内容区 - 响应式布局 */}
|
||||
<div className="flex flex-col lg:flex-row gap-6 flex-1 min-h-0 overflow-y-auto lg:overflow-hidden">
|
||||
{/* 左侧：申诉表单 */}
|
||||
<div className="flex-1 flex flex-col gap-5 lg:overflow-y-auto lg:pr-2">
|
||||
{/* 关联任务 */}
|
||||
<div className="bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow">
|
||||
<h3 className="text-base lg:text-lg font-semibold text-text-primary mb-4">关联任务</h3>
|
||||
<div className="bg-bg-elevated rounded-xl p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-base font-semibold text-text-primary">{taskInfo.title}</span>
|
||||
<span className="px-2.5 py-1 rounded-full text-xs font-medium bg-accent-coral/15 text-accent-coral">
|
||||
{taskInfo.type === 'ai' ? 'AI审核' : taskInfo.type === 'agency' ? '代理商审核' : '品牌方审核'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<AlertTriangle className="w-4 h-4 text-accent-coral flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<span className="text-sm font-medium text-text-primary">{taskInfo.issue}</span>
|
||||
<p className="text-xs text-text-secondary mt-1">{taskInfo.issueDesc}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 申诉次数不足提示 */}
|
||||
{!hasAppealQuota && (
|
||||
<div className="bg-accent-coral/10 border border-accent-coral/30 rounded-2xl p-4 lg:p-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertTriangle className="w-5 h-5 text-accent-coral flex-shrink-0 mt-0.5" />
|
||||
<div className="flex-1">
|
||||
<h3 className="text-base font-semibold text-accent-coral mb-2">申诉次数不足</h3>
|
||||
<p className="text-sm text-text-secondary mb-4">
|
||||
本任务的申诉次数已用完，无法提交新的申诉。您可以向代理商「{taskInfo.agencyName}」申请增加申诉次数。
|
||||
</p>
|
||||
{quotaRequested ? (
|
||||
<div className="flex items-center gap-2 text-accent-green">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
<span className="text-sm font-medium">申请已发送，等待代理商处理</span>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleRequestQuota}
|
||||
disabled={isRequestingQuota}
|
||||
className="px-4 py-2 bg-accent-coral text-white rounded-lg text-sm font-medium hover:bg-accent-coral/90 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{isRequestingQuota ? '申请中...' : '申请增加申诉次数'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 申诉原因 */}
|
||||
<div className={cn('bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow', !hasAppealQuota && 'opacity-50 pointer-events-none')}>
|
||||
<h3 className="text-base lg:text-lg font-semibold text-text-primary mb-4">申诉原因 <span className="text-accent-coral">*</span></h3>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
|
||||
{appealReasons.map((reason) => (
|
||||
<div
|
||||
key={reason.id}
|
||||
onClick={() => setSelectedReason(reason.id)}
|
||||
className={cn(
|
||||
'p-4 rounded-xl border-2 cursor-pointer transition-all',
|
||||
selectedReason === reason.id
|
||||
? 'border-accent-indigo bg-accent-indigo/5'
|
||||
: 'border-border-subtle hover:border-text-tertiary'
|
||||
)}
|
||||
>
|
||||
<span className="text-sm font-semibold text-text-primary">{reason.label}</span>
|
||||
<p className="text-xs text-text-tertiary mt-1">{reason.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 申诉说明 */}
|
||||
<div className={cn('bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow', !hasAppealQuota && 'opacity-50 pointer-events-none')}>
|
||||
<h3 className="text-base lg:text-lg font-semibold text-text-primary mb-4">
|
||||
申诉说明 <span className="text-accent-coral">*</span>
|
||||
<span className="text-xs text-text-tertiary font-normal ml-2">至少20字</span>
|
||||
</h3>
|
||||
<textarea
|
||||
value={content}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
placeholder="请详细描述您的申诉理由，包括为什么您认为审核结果不合理..."
|
||||
className="w-full h-32 lg:h-40 p-4 bg-bg-elevated rounded-xl text-sm text-text-primary placeholder-text-tertiary focus:outline-none focus:ring-2 focus:ring-accent-indigo resize-none"
|
||||
/>
|
||||
<div className="flex justify-end mt-2">
|
||||
<span className={cn(
|
||||
'text-xs',
|
||||
content.length >= 20 ? 'text-text-tertiary' : 'text-accent-coral'
|
||||
)}>
|
||||
{content.length}/20 字
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 证明材料 */}
|
||||
<div className={cn('bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow', !hasAppealQuota && 'opacity-50 pointer-events-none')}>
|
||||
<h3 className="text-base lg:text-lg font-semibold text-text-primary mb-4">
|
||||
证明材料 <span className="text-xs text-text-tertiary font-normal">（可选）</span>
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{attachments.map((file, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center gap-2 px-3 py-2 bg-bg-elevated rounded-lg"
|
||||
>
|
||||
{file.type === 'image' ? (
|
||||
<Image className="w-4 h-4 text-accent-indigo" />
|
||||
) : (
|
||||
<FileText className="w-4 h-4 text-accent-indigo" />
|
||||
)}
|
||||
<span className="text-sm text-text-primary max-w-[150px] truncate">{file.name}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeAttachment(index)}
|
||||
className="w-5 h-5 rounded-full bg-bg-page flex items-center justify-center hover:bg-accent-coral/15"
|
||||
>
|
||||
<X className="w-3 h-3 text-text-tertiary" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<label className="flex items-center gap-2 px-4 py-2 bg-bg-elevated rounded-lg cursor-pointer hover:bg-bg-page transition-colors">
|
||||
<Upload className="w-4 h-4 text-accent-indigo" />
|
||||
<span className="text-sm text-accent-indigo">上传文件</span>
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/*,.pdf,.doc,.docx"
|
||||
onChange={handleFileUpload}
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<p className="text-xs text-text-tertiary mt-3">支持图片、PDF、Word 文档，单个文件不超过 10MB</p>
|
||||
</div>
|
||||
|
||||
{/* 移动端提交按钮 */}
|
||||
<div className="lg:hidden">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSubmit}
|
||||
disabled={!canSubmit || isSubmitting}
|
||||
className={cn(
|
||||
'w-full py-4 rounded-xl text-base font-semibold',
|
||||
canSubmit && !isSubmitting
|
||||
? 'bg-accent-indigo text-white'
|
||||
: 'bg-bg-elevated text-text-tertiary'
|
||||
)}
|
||||
>
|
||||
{isSubmitting ? '提交中...' : '提交申诉'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧：提交信息（仅桌面端显示） */}
|
||||
<div className="hidden lg:block lg:w-[320px] lg:flex-shrink-0">
|
||||
<div className="bg-bg-card rounded-2xl p-6 card-shadow sticky top-0">
|
||||
<h3 className="text-lg font-semibold text-text-primary mb-5">提交确认</h3>
|
||||
|
||||
<div className="flex flex-col gap-4 mb-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-text-tertiary">关联任务</span>
|
||||
<span className="text-sm text-text-primary">{taskInfo.title}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-text-tertiary">申诉原因</span>
|
||||
<span className="text-sm text-text-primary">
|
||||
{appealReasons.find(r => r.id === selectedReason)?.label || '未选择'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-text-tertiary">说明字数</span>
|
||||
<span className={cn(
|
||||
'text-sm',
|
||||
content.length >= 20 ? 'text-accent-green' : 'text-text-tertiary'
|
||||
)}>
|
||||
{content.length} 字
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-text-tertiary">附件数量</span>
|
||||
<span className="text-sm text-text-primary">{attachments.length} 个</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-amber-500/10 rounded-xl p-4 mb-6">
|
||||
<div className="flex items-start gap-2">
|
||||
<AlertTriangle className="w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5" />
|
||||
<p className="text-xs text-text-secondary">
|
||||
提交后将消耗 1 次申诉机会。请确保信息准确，恶意申诉可能影响您的账号信誉。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSubmit}
|
||||
disabled={!canSubmit || isSubmitting}
|
||||
className={cn(
|
||||
'w-full py-4 rounded-xl text-base font-semibold transition-colors',
|
||||
canSubmit && !isSubmitting
|
||||
? 'bg-accent-indigo text-white hover:bg-accent-indigo/90'
|
||||
: 'bg-bg-elevated text-text-tertiary cursor-not-allowed'
|
||||
)}
|
||||
>
|
||||
{isSubmitting ? '提交中...' : '提交申诉'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ResponsiveLayout>
|
||||
)
|
||||
}
|
||||
274
frontend/app/creator/appeals/page.tsx
Normal file
274
frontend/app/creator/appeals/page.tsx
Normal file
@ -0,0 +1,274 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import {
|
||||
MessageCircle,
|
||||
Clock,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
ChevronRight,
|
||||
AlertTriangle,
|
||||
Filter,
|
||||
Search
|
||||
} from 'lucide-react'
|
||||
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
// 申诉状态类型
|
||||
type AppealStatus = 'pending' | 'processing' | 'approved' | 'rejected'
|
||||
|
||||
// 申诉数据类型
|
||||
type Appeal = {
|
||||
id: string
|
||||
taskId: string
|
||||
taskTitle: string
|
||||
type: 'ai' | 'agency' | 'brand'
|
||||
reason: string
|
||||
content: string
|
||||
status: AppealStatus
|
||||
createdAt: string
|
||||
updatedAt?: string
|
||||
result?: string
|
||||
}
|
||||
|
||||
// 模拟申诉数据
|
||||
const mockAppeals: Appeal[] = [
|
||||
{
|
||||
id: 'appeal-001',
|
||||
taskId: 'task-003',
|
||||
taskTitle: 'ZZ饮品夏日',
|
||||
type: 'ai',
|
||||
reason: '误判',
|
||||
content: '视频中出现的是我们自家品牌的历史产品，并非竞品。已附上品牌授权证明。',
|
||||
status: 'approved',
|
||||
createdAt: '2026-02-01 10:30',
|
||||
updatedAt: '2026-02-02 15:20',
|
||||
result: '经核实，该产品确为品牌方授权产品，申诉通过。AI已学习此案例。',
|
||||
},
|
||||
{
|
||||
id: 'appeal-002',
|
||||
taskId: 'task-010',
|
||||
taskTitle: 'GG智能手表',
|
||||
type: 'agency',
|
||||
reason: '审核标准不清晰',
|
||||
content: '代理商反馈品牌调性不符，但Brief中并未明确说明科技专业形象的具体要求。请明确审核标准。',
|
||||
status: 'processing',
|
||||
createdAt: '2026-02-04 09:15',
|
||||
},
|
||||
{
|
||||
id: 'appeal-003',
|
||||
taskId: 'task-011',
|
||||
taskTitle: 'HH美妆代言',
|
||||
type: 'brand',
|
||||
reason: '创意理解差异',
|
||||
content: '品牌方认为创意不够新颖，但该创意形式在同类型产品推广中效果显著，已附上数据支持。',
|
||||
status: 'pending',
|
||||
createdAt: '2026-02-05 14:00',
|
||||
},
|
||||
{
|
||||
id: 'appeal-004',
|
||||
taskId: 'task-013',
|
||||
taskTitle: 'JJ旅行vlog',
|
||||
type: 'agency',
|
||||
reason: '版权问题异议',
|
||||
content: '使用的背景音乐来自无版权音乐库 Epidemic Sound，已购买商用授权。附上授权证明截图。',
|
||||
status: 'rejected',
|
||||
createdAt: '2026-01-28 11:30',
|
||||
updatedAt: '2026-01-30 16:45',
|
||||
result: '经核实，该音乐虽有授权，但授权范围不包含商业广告用途。建议更换音乐后重新提交。',
|
||||
},
|
||||
]
|
||||
|
||||
// 状态配置
|
||||
const statusConfig: Record<AppealStatus, { label: string; color: string; bgColor: string; icon: React.ElementType }> = {
|
||||
pending: { label: '待处理', color: 'text-amber-500', bgColor: 'bg-amber-500/15', icon: Clock },
|
||||
processing: { label: '处理中', color: 'text-accent-indigo', bgColor: 'bg-accent-indigo/15', icon: MessageCircle },
|
||||
approved: { label: '已通过', color: 'text-accent-green', bgColor: 'bg-accent-green/15', icon: CheckCircle },
|
||||
rejected: { label: '已驳回', color: 'text-accent-coral', bgColor: 'bg-accent-coral/15', icon: XCircle },
|
||||
}
|
||||
|
||||
// 类型配置
|
||||
const typeConfig: Record<string, { label: string; color: string }> = {
|
||||
ai: { label: 'AI审核', color: 'text-accent-indigo' },
|
||||
agency: { label: '代理商审核', color: 'text-purple-400' },
|
||||
brand: { label: '品牌方审核', color: 'text-accent-blue' },
|
||||
}
|
||||
|
||||
// 申诉卡片组件
|
||||
function AppealCard({ appeal, onClick }: { appeal: Appeal; onClick: () => void }) {
|
||||
const status = statusConfig[appeal.status]
|
||||
const type = typeConfig[appeal.type]
|
||||
const StatusIcon = status.icon
|
||||
|
||||
return (
|
||||
<div
|
||||
className="bg-bg-card rounded-2xl p-5 card-shadow cursor-pointer hover:bg-bg-elevated/30 transition-colors"
|
||||
onClick={onClick}
|
||||
>
|
||||
{/* 头部 */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={cn('w-10 h-10 rounded-xl flex items-center justify-center', status.bgColor)}>
|
||||
<StatusIcon className={cn('w-5 h-5', status.color)} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-base font-semibold text-text-primary">{appeal.taskTitle}</span>
|
||||
<span className="text-xs text-text-tertiary">申诉编号: {appeal.id}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={cn('px-2.5 py-1 rounded-full text-xs font-medium', status.bgColor, status.color)}>
|
||||
{status.label}
|
||||
</span>
|
||||
<ChevronRight className="w-5 h-5 text-text-tertiary" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 内容 */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<span className="text-text-tertiary">申诉对象:</span>
|
||||
<span className={cn('font-medium', type.color)}>{type.label}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<span className="text-text-tertiary">申诉原因:</span>
|
||||
<span className="text-text-primary">{appeal.reason}</span>
|
||||
</div>
|
||||
<p className="text-sm text-text-secondary line-clamp-2">{appeal.content}</p>
|
||||
</div>
|
||||
|
||||
{/* 底部时间 */}
|
||||
<div className="flex items-center justify-between mt-4 pt-4 border-t border-border-subtle">
|
||||
<span className="text-xs text-text-tertiary">提交时间: {appeal.createdAt}</span>
|
||||
{appeal.updatedAt && (
|
||||
<span className="text-xs text-text-tertiary">更新时间: {appeal.updatedAt}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 申诉次数入口卡片
|
||||
function AppealQuotaEntryCard({ onClick }: { onClick: () => void }) {
|
||||
return (
|
||||
<div
|
||||
className="bg-bg-card rounded-2xl p-5 card-shadow cursor-pointer hover:bg-bg-elevated/30 transition-colors"
|
||||
onClick={onClick}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-accent-indigo/15 flex items-center justify-center">
|
||||
<AlertTriangle className="w-5 h-5 text-accent-indigo" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-base font-semibold text-text-primary">申诉次数管理</span>
|
||||
<span className="text-sm text-text-secondary">查看各任务的申诉次数，向代理商申请增加</span>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-text-tertiary" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function CreatorAppealsPage() {
|
||||
const router = useRouter()
|
||||
const [filter, setFilter] = useState<AppealStatus | 'all'>('all')
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [appeals] = useState<Appeal[]>(mockAppeals)
|
||||
|
||||
// 搜索和筛选
|
||||
const filteredAppeals = appeals.filter(appeal => {
|
||||
const matchesSearch = searchQuery === '' ||
|
||||
appeal.taskTitle.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
appeal.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
appeal.reason.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
const matchesFilter = filter === 'all' || appeal.status === filter
|
||||
return matchesSearch && matchesFilter
|
||||
})
|
||||
|
||||
const handleAppealClick = (appealId: string) => {
|
||||
router.push(`/creator/appeals/${appealId}`)
|
||||
}
|
||||
|
||||
// 跳转到申诉次数管理页面
|
||||
const handleGoToQuotaPage = () => {
|
||||
router.push('/creator/appeal-quota')
|
||||
}
|
||||
|
||||
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-xl lg:text-[28px] font-bold text-text-primary">申诉中心</h1>
|
||||
<p className="text-sm lg:text-[15px] text-text-secondary">管理您的申诉记录和申诉额度</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2 px-4 py-2.5 bg-bg-card rounded-xl border border-border-subtle">
|
||||
<Search className="w-[18px] h-[18px] text-text-secondary" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="搜索申诉..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="bg-transparent text-sm text-text-primary placeholder-text-tertiary focus:outline-none w-32"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 px-4 py-2.5 bg-bg-card rounded-xl border border-border-subtle">
|
||||
<Filter className="w-[18px] h-[18px] text-text-secondary" />
|
||||
<select
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value as AppealStatus | 'all')}
|
||||
className="bg-transparent text-sm text-text-primary focus:outline-none"
|
||||
>
|
||||
<option value="all">全部状态</option>
|
||||
<option value="pending">待处理</option>
|
||||
<option value="processing">处理中</option>
|
||||
<option value="approved">已通过</option>
|
||||
<option value="rejected">已驳回</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 申诉次数管理入口 */}
|
||||
<AppealQuotaEntryCard onClick={handleGoToQuotaPage} />
|
||||
|
||||
{/* 申诉列表 */}
|
||||
<div className="flex flex-col gap-4 flex-1 overflow-y-auto pr-2">
|
||||
<h2 className="text-lg font-semibold text-text-primary">申诉记录 ({filteredAppeals.length})</h2>
|
||||
{filteredAppeals.length > 0 ? (
|
||||
filteredAppeals.map((appeal) => (
|
||||
<AppealCard
|
||||
key={appeal.id}
|
||||
appeal={appeal}
|
||||
onClick={() => handleAppealClick(appeal.id)}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-16">
|
||||
<MessageCircle className="w-12 h-12 text-text-tertiary/50 mb-4" />
|
||||
<p className="text-text-secondary text-center">
|
||||
{searchQuery || filter !== 'all'
|
||||
? '没有找到匹配的申诉记录'
|
||||
: '暂无申诉记录'}
|
||||
</p>
|
||||
{(searchQuery || filter !== 'all') && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setSearchQuery(''); setFilter('all'); }}
|
||||
className="mt-3 text-sm text-accent-indigo hover:underline"
|
||||
>
|
||||
清除筛选条件
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</ResponsiveLayout>
|
||||
)
|
||||
}
|
||||
268
frontend/app/creator/help/page.tsx
Normal file
268
frontend/app/creator/help/page.tsx
Normal file
@ -0,0 +1,268 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import {
|
||||
ArrowLeft,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
MessageCircle,
|
||||
Phone,
|
||||
Mail,
|
||||
FileQuestion,
|
||||
Video,
|
||||
FileText,
|
||||
AlertCircle,
|
||||
Send
|
||||
} from 'lucide-react'
|
||||
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
// FAQ 数据
|
||||
const faqData = [
|
||||
{
|
||||
category: '任务相关',
|
||||
icon: FileText,
|
||||
questions: [
|
||||
{
|
||||
q: '如何接收新任务？',
|
||||
a: '您需要先接受代理商的签约邀请，成为签约达人后即可在"我的任务"中查看分配给您的推广任务。',
|
||||
},
|
||||
{
|
||||
q: '脚本被驳回后可以申诉吗？',
|
||||
a: '可以的。在任务详情页面点击"申诉"按钮，填写申诉原因并上传证明材料即可。每月有5次申诉机会。',
|
||||
},
|
||||
{
|
||||
q: '视频上传有什么格式要求？',
|
||||
a: '支持 MP4、MOV 格式，文件大小不超过 100MB，建议分辨率 1080P 以上，时长根据任务要求而定。',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: '审核流程',
|
||||
icon: Video,
|
||||
questions: [
|
||||
{
|
||||
q: 'AI 审核需要多长时间？',
|
||||
a: 'AI 审核通常在 2-5 分钟内完成。如果队列繁忙，可能需要更长时间，您可以离开页面，审核完成后会通过消息中心通知您。',
|
||||
},
|
||||
{
|
||||
q: '代理商审核和品牌方审核有什么区别？',
|
||||
a: '代理商审核主要检查内容质量和基本合规性，品牌方审核则侧重于品牌调性和营销效果的把控。',
|
||||
},
|
||||
{
|
||||
q: '审核不通过的常见原因有哪些？',
|
||||
a: '常见原因包括：违禁词使用、竞品露出、品牌调性不符、卖点表达不清晰、视频画质或音质问题等。',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: '账户问题',
|
||||
icon: AlertCircle,
|
||||
questions: [
|
||||
{
|
||||
q: '如何修改绑定的手机号？',
|
||||
a: '进入"个人中心"→"账户设置"，在手机号绑定区域点击"更换"，按提示完成验证即可。',
|
||||
},
|
||||
{
|
||||
q: '申诉次数用完了怎么办？',
|
||||
a: '您可以在"申诉中心"点击"申请增加"按钮，提交申请后等待审核。通过率高的达人更容易获得额外申诉机会。',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
// FAQ 项组件
|
||||
function FAQItem({ question, answer }: { question: string; answer: string }) {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="border-b border-border-subtle last:border-b-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="w-full flex items-center justify-between py-4 text-left"
|
||||
>
|
||||
<span className="text-sm font-medium text-text-primary pr-4">{question}</span>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
'w-5 h-5 text-text-tertiary flex-shrink-0 transition-transform',
|
||||
isOpen && 'rotate-180'
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
{isOpen && (
|
||||
<div className="pb-4">
|
||||
<p className="text-sm text-text-secondary leading-relaxed">{answer}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// FAQ 分类组件
|
||||
function FAQCategory({ category, icon: Icon, questions }: {
|
||||
category: string
|
||||
icon: React.ElementType
|
||||
questions: { q: string; a: string }[]
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-bg-card rounded-2xl p-6 card-shadow">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-accent-indigo/15 flex items-center justify-center">
|
||||
<Icon className="w-5 h-5 text-accent-indigo" />
|
||||
</div>
|
||||
<span className="text-lg font-semibold text-text-primary">{category}</span>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
{questions.map((item, index) => (
|
||||
<FAQItem key={index} question={item.q} answer={item.a} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 联系方式卡片
|
||||
function ContactCard() {
|
||||
return (
|
||||
<div className="bg-bg-card rounded-2xl p-6 card-shadow">
|
||||
<h3 className="text-lg font-semibold text-text-primary mb-4">联系我们</h3>
|
||||
<div className="flex flex-col gap-4">
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center gap-4 p-4 bg-bg-elevated rounded-xl hover:bg-bg-page transition-colors"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-xl bg-accent-green/15 flex items-center justify-center">
|
||||
<MessageCircle className="w-5 h-5 text-accent-green" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<span className="text-sm font-medium text-text-primary">在线客服</span>
|
||||
<p className="text-xs text-text-tertiary">工作日 9:00-18:00</p>
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-text-tertiary" />
|
||||
</a>
|
||||
<a
|
||||
href="tel:400-123-4567"
|
||||
className="flex items-center gap-4 p-4 bg-bg-elevated rounded-xl hover:bg-bg-page transition-colors"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-xl bg-accent-blue/15 flex items-center justify-center">
|
||||
<Phone className="w-5 h-5 text-accent-blue" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<span className="text-sm font-medium text-text-primary">客服热线</span>
|
||||
<p className="text-xs text-text-tertiary">400-123-4567</p>
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-text-tertiary" />
|
||||
</a>
|
||||
<a
|
||||
href="mailto:support@miaosi.com"
|
||||
className="flex items-center gap-4 p-4 bg-bg-elevated rounded-xl hover:bg-bg-page transition-colors"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-xl bg-purple-500/15 flex items-center justify-center">
|
||||
<Mail className="w-5 h-5 text-purple-400" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<span className="text-sm font-medium text-text-primary">邮件反馈</span>
|
||||
<p className="text-xs text-text-tertiary">support@miaosi.com</p>
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-text-tertiary" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 反馈表单
|
||||
function FeedbackForm() {
|
||||
const [feedback, setFeedback] = useState('')
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (feedback.trim()) {
|
||||
setSubmitted(true)
|
||||
setFeedback('')
|
||||
setTimeout(() => setSubmitted(false), 3000)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-bg-card rounded-2xl p-6 card-shadow">
|
||||
<h3 className="text-lg font-semibold text-text-primary mb-4">意见反馈</h3>
|
||||
{submitted ? (
|
||||
<div className="flex items-center gap-3 p-4 bg-accent-green/15 rounded-xl">
|
||||
<FileQuestion className="w-5 h-5 text-accent-green" />
|
||||
<span className="text-sm text-accent-green">感谢您的反馈！我们会认真处理。</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<textarea
|
||||
value={feedback}
|
||||
onChange={(e) => setFeedback(e.target.value)}
|
||||
placeholder="请描述您遇到的问题或提出建议..."
|
||||
className="w-full h-32 p-4 bg-bg-elevated rounded-xl text-sm text-text-primary placeholder-text-tertiary focus:outline-none focus:ring-2 focus:ring-accent-indigo resize-none"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSubmit}
|
||||
disabled={!feedback.trim()}
|
||||
className={cn(
|
||||
'w-full mt-4 py-3 rounded-xl text-sm font-semibold flex items-center justify-center gap-2 transition-colors',
|
||||
feedback.trim()
|
||||
? 'bg-accent-indigo text-white hover:bg-accent-indigo/90'
|
||||
: 'bg-bg-elevated text-text-tertiary cursor-not-allowed'
|
||||
)}
|
||||
>
|
||||
<Send className="w-4 h-4" />
|
||||
提交反馈
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function CreatorHelpPage() {
|
||||
const router = useRouter()
|
||||
|
||||
return (
|
||||
<ResponsiveLayout role="creator">
|
||||
<div className="flex flex-col gap-6 h-full">
|
||||
{/* 顶部栏 */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
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 w-fit mb-2"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
返回
|
||||
</button>
|
||||
<h1 className="text-xl lg:text-[28px] font-bold text-text-primary">帮助与反馈</h1>
|
||||
<p className="text-sm lg:text-[15px] text-text-secondary">常见问题解答和联系方式</p>
|
||||
</div>
|
||||
|
||||
{/* 内容区 - 响应式布局 */}
|
||||
<div className="flex flex-col lg:flex-row gap-6 flex-1 min-h-0 overflow-y-auto lg:overflow-hidden">
|
||||
{/* FAQ */}
|
||||
<div className="flex-1 flex flex-col gap-5 lg:overflow-y-auto lg:pr-2">
|
||||
{faqData.map((category, index) => (
|
||||
<FAQCategory
|
||||
key={index}
|
||||
category={category.category}
|
||||
icon={category.icon}
|
||||
questions={category.questions}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 联系方式和反馈 */}
|
||||
<div className="lg:w-[360px] lg:flex-shrink-0 flex flex-col gap-5">
|
||||
<ContactCard />
|
||||
<FeedbackForm />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ResponsiveLayout>
|
||||
)
|
||||
}
|
||||
203
frontend/app/creator/history/page.tsx
Normal file
203
frontend/app/creator/history/page.tsx
Normal file
@ -0,0 +1,203 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import {
|
||||
ArrowLeft,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Clock,
|
||||
Video,
|
||||
Filter,
|
||||
ChevronRight
|
||||
} from 'lucide-react'
|
||||
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
// 历史任务状态类型
|
||||
type HistoryStatus = 'completed' | 'expired' | 'cancelled'
|
||||
|
||||
// 历史任务数据类型
|
||||
type HistoryTask = {
|
||||
id: string
|
||||
title: string
|
||||
description: string
|
||||
status: HistoryStatus
|
||||
completedAt?: string
|
||||
expiredAt?: string
|
||||
platform: string
|
||||
}
|
||||
|
||||
// 模拟历史数据
|
||||
const mockHistory: HistoryTask[] = [
|
||||
{
|
||||
id: 'hist-001',
|
||||
title: 'MM春季护肤品推广',
|
||||
description: '产品测评 · 已发布',
|
||||
status: 'completed',
|
||||
completedAt: '2026-01-20',
|
||||
platform: '抖音',
|
||||
},
|
||||
{
|
||||
id: 'hist-002',
|
||||
title: 'NN零食新品试吃',
|
||||
description: '美食测评 · 已发布',
|
||||
status: 'completed',
|
||||
completedAt: '2026-01-15',
|
||||
platform: '小红书',
|
||||
},
|
||||
{
|
||||
id: 'hist-003',
|
||||
title: 'OO运动装备测评',
|
||||
description: '运动视频 · 已过期',
|
||||
status: 'expired',
|
||||
expiredAt: '2026-01-10',
|
||||
platform: '抖音',
|
||||
},
|
||||
{
|
||||
id: 'hist-004',
|
||||
title: 'PP家居用品展示',
|
||||
description: '生活vlog · 已取消',
|
||||
status: 'cancelled',
|
||||
expiredAt: '2026-01-05',
|
||||
platform: 'B站',
|
||||
},
|
||||
{
|
||||
id: 'hist-005',
|
||||
title: 'QQ电子产品开箱',
|
||||
description: '科技测评 · 已发布',
|
||||
status: 'completed',
|
||||
completedAt: '2025-12-28',
|
||||
platform: '抖音',
|
||||
},
|
||||
{
|
||||
id: 'hist-006',
|
||||
title: 'RR母婴用品推荐',
|
||||
description: '种草视频 · 已发布',
|
||||
status: 'completed',
|
||||
completedAt: '2025-12-20',
|
||||
platform: '小红书',
|
||||
},
|
||||
]
|
||||
|
||||
// 状态配置
|
||||
const statusConfig: Record<HistoryStatus, { label: string; color: string; bgColor: string; icon: React.ElementType }> = {
|
||||
completed: { label: '已完成', color: 'text-accent-green', bgColor: 'bg-accent-green/15', icon: CheckCircle },
|
||||
expired: { label: '已过期', color: 'text-text-tertiary', bgColor: 'bg-bg-elevated', icon: Clock },
|
||||
cancelled: { label: '已取消', color: 'text-accent-coral', bgColor: 'bg-accent-coral/15', icon: XCircle },
|
||||
}
|
||||
|
||||
// 历史任务卡片
|
||||
function HistoryCard({ task, onClick }: { task: HistoryTask; onClick: () => void }) {
|
||||
const status = statusConfig[task.status]
|
||||
const StatusIcon = status.icon
|
||||
|
||||
return (
|
||||
<div
|
||||
className="bg-bg-card rounded-2xl p-5 card-shadow cursor-pointer hover:bg-bg-elevated/30 transition-colors"
|
||||
onClick={onClick}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-16 h-12 rounded-lg bg-[#1A1A1E] flex items-center justify-center flex-shrink-0">
|
||||
<Video className="w-5 h-5 text-text-tertiary" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-base font-semibold text-text-primary">{task.title}</span>
|
||||
<span className="text-sm text-text-secondary">{task.description}</span>
|
||||
<div className="flex items-center gap-3 mt-1">
|
||||
<span className="text-xs text-text-tertiary">{task.platform}</span>
|
||||
<span className="text-xs text-text-tertiary">
|
||||
{task.completedAt || task.expiredAt}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={cn('px-3 py-1.5 rounded-lg flex items-center gap-1.5', status.bgColor)}>
|
||||
<StatusIcon className={cn('w-4 h-4', status.color)} />
|
||||
<span className={cn('text-sm font-medium', status.color)}>{status.label}</span>
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-text-tertiary" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function CreatorHistoryPage() {
|
||||
const router = useRouter()
|
||||
const [filter, setFilter] = useState<HistoryStatus | 'all'>('all')
|
||||
|
||||
const filteredHistory = filter === 'all' ? mockHistory : mockHistory.filter(t => t.status === filter)
|
||||
|
||||
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">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
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 w-fit mb-2"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
返回
|
||||
</button>
|
||||
<h1 className="text-xl lg:text-[28px] font-bold text-text-primary">历史记录</h1>
|
||||
<p className="text-sm lg:text-[15px] text-text-secondary">查看已完成和过期的任务</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 px-4 py-2.5 bg-bg-card rounded-xl border border-border-subtle">
|
||||
<Filter className="w-[18px] h-[18px] text-text-secondary" />
|
||||
<select
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value as HistoryStatus | 'all')}
|
||||
className="bg-transparent text-sm text-text-primary focus:outline-none"
|
||||
>
|
||||
<option value="all">全部状态</option>
|
||||
<option value="completed">已完成</option>
|
||||
<option value="expired">已过期</option>
|
||||
<option value="cancelled">已取消</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 统计信息 */}
|
||||
<div className="flex items-center gap-6 bg-bg-card rounded-2xl p-5 card-shadow">
|
||||
<div className="flex flex-col items-center gap-1 flex-1">
|
||||
<span className="text-2xl font-bold text-accent-green">
|
||||
{mockHistory.filter(t => t.status === 'completed').length}
|
||||
</span>
|
||||
<span className="text-xs text-text-tertiary">已完成</span>
|
||||
</div>
|
||||
<div className="w-px h-10 bg-border-subtle" />
|
||||
<div className="flex flex-col items-center gap-1 flex-1">
|
||||
<span className="text-2xl font-bold text-text-tertiary">
|
||||
{mockHistory.filter(t => t.status === 'expired').length}
|
||||
</span>
|
||||
<span className="text-xs text-text-tertiary">已过期</span>
|
||||
</div>
|
||||
<div className="w-px h-10 bg-border-subtle" />
|
||||
<div className="flex flex-col items-center gap-1 flex-1">
|
||||
<span className="text-2xl font-bold text-accent-coral">
|
||||
{mockHistory.filter(t => t.status === 'cancelled').length}
|
||||
</span>
|
||||
<span className="text-xs text-text-tertiary">已取消</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 任务列表 */}
|
||||
<div className="flex flex-col gap-4 flex-1 overflow-y-auto pr-2">
|
||||
{filteredHistory.map((task) => (
|
||||
<HistoryCard
|
||||
key={task.id}
|
||||
task={task}
|
||||
onClick={() => router.push(`/creator/task/${task.id}`)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</ResponsiveLayout>
|
||||
)
|
||||
}
|
||||
@ -1,244 +1,529 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Bell, CheckCircle, XCircle, Clock, ChevronDown, ChevronRight } from 'lucide-react'
|
||||
import { DesktopLayout } from '@/components/layout/DesktopLayout'
|
||||
import { MobileLayout } from '@/components/layout/MobileLayout'
|
||||
import {
|
||||
UserPlus,
|
||||
ClipboardList,
|
||||
CheckCircle,
|
||||
PenLine,
|
||||
ScanSearch,
|
||||
Building2,
|
||||
XCircle,
|
||||
BadgeCheck,
|
||||
Video,
|
||||
MessageCircle,
|
||||
} from 'lucide-react'
|
||||
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
type MessageStatus = 'info' | 'success' | 'error'
|
||||
// 消息类型
|
||||
type MessageType =
|
||||
| 'invite' // 代理商邀请
|
||||
| 'new_task' // 新任务分配
|
||||
| 'pass' // 审核通过
|
||||
| 'need_fix' // 需要修改
|
||||
| 'ai_complete' // AI审核完成
|
||||
| 'agency_pass' // 代理商审核通过
|
||||
| 'agency_reject' // 代理商审核驳回
|
||||
| 'brand_pass' // 品牌方审核通过
|
||||
| 'brand_reject' // 品牌方审核驳回
|
||||
| 'video_ai' // 视频AI审核完成
|
||||
| 'appeal' // 申诉结果
|
||||
| 'video_agency_reject' // 视频代理商驳回
|
||||
| 'video_brand_reject' // 视频品牌方驳回
|
||||
|
||||
const mockMessages = [
|
||||
type Message = {
|
||||
id: string
|
||||
type: MessageType
|
||||
title: string
|
||||
content: string
|
||||
time: string
|
||||
read: boolean
|
||||
taskId?: string
|
||||
hasActions?: boolean // 是否有操作按钮（邀请类型）
|
||||
}
|
||||
|
||||
// 消息配置
|
||||
const messageConfig: Record<MessageType, {
|
||||
icon: React.ElementType
|
||||
iconColor: string
|
||||
bgColor: string
|
||||
}> = {
|
||||
invite: { icon: UserPlus, iconColor: 'text-purple-400', bgColor: 'bg-purple-500/20' },
|
||||
new_task: { icon: ClipboardList, iconColor: 'text-accent-indigo', bgColor: 'bg-accent-indigo/20' },
|
||||
pass: { icon: CheckCircle, iconColor: 'text-accent-green', bgColor: 'bg-accent-green/20' },
|
||||
need_fix: { icon: PenLine, iconColor: 'text-accent-coral', bgColor: 'bg-accent-coral/20' },
|
||||
ai_complete: { icon: ScanSearch, iconColor: 'text-accent-indigo', bgColor: 'bg-accent-indigo/20' },
|
||||
agency_pass: { icon: Building2, iconColor: 'text-accent-green', bgColor: 'bg-accent-green/20' },
|
||||
agency_reject: { icon: XCircle, iconColor: 'text-accent-coral', bgColor: 'bg-accent-coral/20' },
|
||||
brand_pass: { icon: BadgeCheck, iconColor: 'text-accent-green', bgColor: 'bg-accent-green/20' },
|
||||
brand_reject: { icon: XCircle, iconColor: 'text-accent-coral', bgColor: 'bg-accent-coral/20' },
|
||||
video_ai: { icon: Video, iconColor: 'text-accent-indigo', bgColor: 'bg-accent-indigo/20' },
|
||||
appeal: { icon: MessageCircle, iconColor: 'text-accent-blue', bgColor: 'bg-accent-blue/20' },
|
||||
video_agency_reject: { icon: XCircle, iconColor: 'text-accent-coral', bgColor: 'bg-accent-coral/20' },
|
||||
video_brand_reject: { icon: XCircle, iconColor: 'text-accent-coral', bgColor: 'bg-accent-coral/20' },
|
||||
}
|
||||
|
||||
// 12条消息数据
|
||||
const mockMessages: Message[] = [
|
||||
{
|
||||
id: 'msg-001',
|
||||
taskId: 'task-002',
|
||||
title: 'AI 审核通过',
|
||||
description: '已进入代理商审核，请等待最终结果。',
|
||||
time: '刚刚',
|
||||
status: 'success' as MessageStatus,
|
||||
type: 'invite',
|
||||
title: '代理商邀请',
|
||||
content: '「星辰传媒」邀请您成为签约达人，加入后可接收该代理商分配的推广任务',
|
||||
time: '5分钟前',
|
||||
read: false,
|
||||
hasActions: true,
|
||||
},
|
||||
{
|
||||
id: 'msg-002',
|
||||
taskId: 'task-003',
|
||||
title: 'AI 审核未通过',
|
||||
description: '检测到竞品 Logo 与绝对化用语，请修改后重新提交。',
|
||||
time: '10 分钟前',
|
||||
status: 'error' as MessageStatus,
|
||||
type: 'new_task',
|
||||
title: '新任务分配',
|
||||
content: '您有一个新任务【XX品牌618推广】，请在3天内提交脚本',
|
||||
time: '10分钟前',
|
||||
read: false,
|
||||
taskId: 'task-001',
|
||||
},
|
||||
{
|
||||
id: 'msg-003',
|
||||
taskId: 'task-001',
|
||||
title: '等待提交脚本',
|
||||
description: '请先上传脚本，系统才能开始合规预审。',
|
||||
time: '1 小时前',
|
||||
status: 'info' as MessageStatus,
|
||||
type: 'pass',
|
||||
title: '审核通过',
|
||||
content: '恭喜！您的视频【AA数码新品发布】已通过审核，可安排发布',
|
||||
time: '2小时前',
|
||||
read: true,
|
||||
taskId: 'task-004',
|
||||
},
|
||||
{
|
||||
id: 'msg-004',
|
||||
type: 'need_fix',
|
||||
title: '需要修改',
|
||||
content: '您的视频【ZZ饮品夏日】有2处需修改：00:15竞品露出、00:42口播违规词，点击查看详情',
|
||||
time: '昨天 14:30',
|
||||
read: true,
|
||||
taskId: 'task-003',
|
||||
},
|
||||
{
|
||||
id: 'msg-005',
|
||||
type: 'ai_complete',
|
||||
title: 'AI审核完成',
|
||||
content: '您的脚本【CC服装春季款】AI预审已完成，已进入代理商审核',
|
||||
time: '30分钟前',
|
||||
read: true,
|
||||
taskId: 'task-006',
|
||||
},
|
||||
{
|
||||
id: 'msg-006',
|
||||
type: 'agency_pass',
|
||||
title: '代理商审核通过',
|
||||
content: '您的脚本【DD家电测评】已通过代理商审核，等待品牌方终审',
|
||||
time: '1小时前',
|
||||
read: true,
|
||||
taskId: 'task-007',
|
||||
},
|
||||
{
|
||||
id: 'msg-007',
|
||||
type: 'agency_reject',
|
||||
title: '代理商审核驳回',
|
||||
content: '您的脚本【HH美妆代言】被代理商驳回，原因：品牌调性不符，请修改后重新提交',
|
||||
time: '2小时前',
|
||||
read: true,
|
||||
taskId: 'task-010',
|
||||
},
|
||||
{
|
||||
id: 'msg-008',
|
||||
type: 'brand_pass',
|
||||
title: '品牌方审核通过',
|
||||
content: '恭喜！您的脚本【EE食品试吃】已通过品牌方终审，请在7天内上传视频',
|
||||
time: '昨天 14:30',
|
||||
read: true,
|
||||
taskId: 'task-008',
|
||||
},
|
||||
{
|
||||
id: 'msg-009',
|
||||
type: 'brand_reject',
|
||||
title: '品牌方审核驳回',
|
||||
content: '您的脚本【II数码配件】被品牌方驳回，原因：产品卖点不够突出，请修改后重新提交',
|
||||
time: '昨天 16:45',
|
||||
read: true,
|
||||
taskId: 'task-011',
|
||||
},
|
||||
{
|
||||
id: 'msg-010',
|
||||
type: 'video_ai',
|
||||
title: '视频AI审核完成',
|
||||
content: '您的视频【JJ旅行vlog】AI预审已完成，已进入代理商审核环节',
|
||||
time: '今天 09:15',
|
||||
read: true,
|
||||
taskId: 'task-013',
|
||||
},
|
||||
{
|
||||
id: 'msg-011',
|
||||
type: 'appeal',
|
||||
title: '申诉结果通知',
|
||||
content: '您的申诉已通过，AI已学习您的反馈，感谢您帮助我们改进系统',
|
||||
time: '3天前',
|
||||
read: false,
|
||||
},
|
||||
{
|
||||
id: 'msg-012',
|
||||
type: 'video_agency_reject',
|
||||
title: '视频代理商审核驳回',
|
||||
content: '您的视频【KK宠物用品】被代理商驳回，原因：背景音乐版权问题，请修改后重新提交',
|
||||
time: '今天 11:20',
|
||||
read: true,
|
||||
taskId: 'task-014',
|
||||
},
|
||||
{
|
||||
id: 'msg-013',
|
||||
type: 'video_brand_reject',
|
||||
title: '视频品牌方审核驳回',
|
||||
content: '您的视频【MM厨房电器】被品牌方驳回，原因：产品使用场景不够真实，请修改后重新提交',
|
||||
time: '昨天 18:30',
|
||||
read: true,
|
||||
taskId: 'task-015',
|
||||
},
|
||||
]
|
||||
|
||||
const statusConfig: Record<MessageStatus, { icon: React.ElementType; color: string; bg: string }> = {
|
||||
success: { icon: CheckCircle, color: 'text-accent-green', bg: 'bg-accent-green/15' },
|
||||
error: { icon: XCircle, color: 'text-accent-coral', bg: 'bg-accent-coral/15' },
|
||||
info: { icon: Clock, color: 'text-accent-indigo', bg: 'bg-accent-indigo/15' },
|
||||
}
|
||||
|
||||
// 消息卡片组件
|
||||
function MessageCard({
|
||||
title,
|
||||
description,
|
||||
time,
|
||||
status,
|
||||
isRead,
|
||||
onClick,
|
||||
message,
|
||||
onRead,
|
||||
onNavigate,
|
||||
onAcceptInvite,
|
||||
onIgnoreInvite,
|
||||
}: {
|
||||
title: string
|
||||
description: string
|
||||
time: string
|
||||
status: MessageStatus
|
||||
isRead: boolean
|
||||
onClick: () => void
|
||||
message: Message
|
||||
onRead: () => void
|
||||
onNavigate: () => void
|
||||
onAcceptInvite?: () => void
|
||||
onIgnoreInvite?: () => void
|
||||
}) {
|
||||
const Icon = statusConfig[status].icon
|
||||
const config = messageConfig[message.type]
|
||||
const Icon = config.icon
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
<div
|
||||
className={cn(
|
||||
'w-full text-left bg-bg-card rounded-xl p-4 flex items-start gap-4 card-shadow hover:bg-bg-elevated/50 transition-colors',
|
||||
!isRead && 'ring-1 ring-accent-indigo/20'
|
||||
'rounded-xl p-4 flex gap-4 cursor-pointer transition-colors',
|
||||
message.read
|
||||
? 'bg-transparent border border-bg-elevated'
|
||||
: 'bg-bg-elevated'
|
||||
)}
|
||||
onClick={() => {
|
||||
onRead()
|
||||
if (message.taskId) onNavigate()
|
||||
}}
|
||||
>
|
||||
<div className={cn('w-10 h-10 rounded-full flex items-center justify-center', statusConfig[status].bg)}>
|
||||
<Icon className={cn('w-5 h-5', statusConfig[status].color)} />
|
||||
{/* 图标 */}
|
||||
<div className={cn('w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0', config.bgColor)}>
|
||||
<Icon size={24} className={config.iconColor} />
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col gap-1">
|
||||
|
||||
{/* 内容 */}
|
||||
<div className="flex-1 flex flex-col gap-2">
|
||||
{/* 头部 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={cn('text-sm', isRead ? 'text-text-primary' : 'text-text-primary font-semibold')}>
|
||||
{title}
|
||||
</span>
|
||||
{!isRead && <span className="w-2 h-2 rounded-full bg-accent-indigo" />}
|
||||
</div>
|
||||
<span className="text-xs text-text-tertiary">{time}</span>
|
||||
<span className="text-[15px] font-semibold text-text-primary">{message.title}</span>
|
||||
<span className="text-xs text-text-secondary">{message.time}</span>
|
||||
</div>
|
||||
<p className="text-sm text-text-secondary">{description}</p>
|
||||
|
||||
{/* 描述 */}
|
||||
<p className="text-sm text-text-secondary leading-relaxed">{message.content}</p>
|
||||
|
||||
{/* 邀请类型的操作按钮 */}
|
||||
{message.hasActions && (
|
||||
<div className="flex items-center gap-3 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-2 rounded-md bg-accent-indigo text-white text-sm font-medium hover:bg-accent-indigo/90 transition-colors"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onAcceptInvite?.()
|
||||
}}
|
||||
>
|
||||
接受邀请
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-2 rounded-md border border-border-subtle text-text-secondary text-sm font-medium hover:bg-bg-elevated transition-colors"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onIgnoreInvite?.()
|
||||
}}
|
||||
>
|
||||
暂时忽略
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* 未读标记 */}
|
||||
{!message.read && (
|
||||
<div className="w-2.5 h-2.5 rounded-full bg-accent-indigo flex-shrink-0 mt-1" />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 邀请确认弹窗
|
||||
function InviteConfirmModal({
|
||||
isOpen,
|
||||
type,
|
||||
agencyName,
|
||||
onClose,
|
||||
onConfirm,
|
||||
}: {
|
||||
isOpen: boolean
|
||||
type: 'accept' | 'ignore'
|
||||
agencyName: string
|
||||
onClose: () => void
|
||||
onConfirm: () => void
|
||||
}) {
|
||||
if (!isOpen) return null
|
||||
|
||||
const isAccept = type === 'accept'
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
<div className="absolute inset-0 bg-black/50" onClick={onClose} />
|
||||
<div className="relative bg-bg-card rounded-2xl p-6 w-full max-w-md mx-4 card-shadow">
|
||||
<h3 className="text-xl font-bold text-text-primary mb-2">
|
||||
{isAccept ? '确认接受邀请' : '确认忽略邀请'}
|
||||
</h3>
|
||||
<p className="text-sm text-text-secondary mb-6">
|
||||
{isAccept
|
||||
? `您确定要接受「${agencyName}」的签约邀请吗？接受后您将成为该代理商的签约达人，可以接收推广任务。`
|
||||
: `您确定要忽略「${agencyName}」的邀请吗？您可以稍后在消息中心重新查看此邀请。`}
|
||||
</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="flex-1 py-3 rounded-xl bg-bg-elevated text-text-primary text-sm font-medium"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onConfirm}
|
||||
className={cn(
|
||||
'flex-1 py-3 rounded-xl text-sm font-semibold',
|
||||
isAccept ? 'bg-accent-indigo text-white' : 'bg-accent-coral text-white'
|
||||
)}
|
||||
>
|
||||
{isAccept ? '确认接受' : '确认忽略'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 成功提示弹窗
|
||||
function SuccessModal({
|
||||
isOpen,
|
||||
message,
|
||||
onClose,
|
||||
}: {
|
||||
isOpen: boolean
|
||||
message: string
|
||||
onClose: () => void
|
||||
}) {
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
<div className="absolute inset-0 bg-black/50" onClick={onClose} />
|
||||
<div className="relative bg-bg-card rounded-2xl p-8 w-full max-w-sm mx-4 card-shadow flex flex-col items-center gap-4">
|
||||
<div className="w-16 h-16 rounded-full bg-accent-green/15 flex items-center justify-center">
|
||||
<CheckCircle className="w-8 h-8 text-accent-green" />
|
||||
</div>
|
||||
<p className="text-base font-semibold text-text-primary text-center">{message}</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="px-8 py-2.5 rounded-xl bg-accent-indigo text-white text-sm font-medium"
|
||||
>
|
||||
我知道了
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function CreatorMessagesPage() {
|
||||
const router = useRouter()
|
||||
const [isMobile, setIsMobile] = useState(true)
|
||||
const [messages, setMessages] = useState(mockMessages)
|
||||
const [showRead, setShowRead] = useState(false)
|
||||
const [confirmModal, setConfirmModal] = useState<{ isOpen: boolean; type: 'accept' | 'ignore'; messageId: string }>({
|
||||
isOpen: false,
|
||||
type: 'accept',
|
||||
messageId: '',
|
||||
})
|
||||
const [successModal, setSuccessModal] = useState<{ isOpen: boolean; message: string }>({
|
||||
isOpen: false,
|
||||
message: '',
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
const checkMobile = () => setIsMobile(window.innerWidth < 1024)
|
||||
checkMobile()
|
||||
window.addEventListener('resize', checkMobile)
|
||||
return () => window.removeEventListener('resize', checkMobile)
|
||||
}, [])
|
||||
|
||||
const handleClick = (messageId: string, taskId: string) => {
|
||||
setMessages((prev) =>
|
||||
prev.map((msg) => (msg.id === messageId ? { ...msg, read: true } : msg))
|
||||
)
|
||||
router.push(`/creator/task/${taskId}`)
|
||||
const markAsRead = (id: string) => {
|
||||
setMessages(prev => prev.map(msg =>
|
||||
msg.id === id ? { ...msg, read: true } : msg
|
||||
))
|
||||
}
|
||||
const unreadCount = messages.filter((msg) => !msg.read).length
|
||||
const unreadMessages = messages.filter((msg) => !msg.read)
|
||||
const readMessages = messages.filter((msg) => msg.read)
|
||||
|
||||
const DesktopContent = (
|
||||
<DesktopLayout role="creator">
|
||||
const markAllAsRead = () => {
|
||||
setMessages(prev => prev.map(msg => ({ ...msg, read: true })))
|
||||
}
|
||||
|
||||
// 根据消息类型跳转到对应页面
|
||||
const navigateByMessage = (message: Message) => {
|
||||
// 标记已读
|
||||
markAsRead(message.id)
|
||||
|
||||
// 根据消息类型决定跳转目标
|
||||
switch (message.type) {
|
||||
case 'invite':
|
||||
// 邀请消息不跳转，在卡片内有操作按钮
|
||||
break
|
||||
case 'new_task':
|
||||
// 新任务 -> 跳转到任务详情（上传脚本）
|
||||
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
|
||||
break
|
||||
case 'pass':
|
||||
// 审核通过 -> 跳转到任务详情
|
||||
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
|
||||
break
|
||||
case 'need_fix':
|
||||
// 需要修改 -> 跳转到任务详情（查看问题）
|
||||
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
|
||||
break
|
||||
case 'ai_complete':
|
||||
// AI审核完成 -> 跳转到任务详情
|
||||
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
|
||||
break
|
||||
case 'agency_pass':
|
||||
// 代理商审核通过 -> 跳转到任务详情
|
||||
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
|
||||
break
|
||||
case 'agency_reject':
|
||||
// 代理商审核驳回 -> 跳转到任务详情（查看驳回原因）
|
||||
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
|
||||
break
|
||||
case 'brand_pass':
|
||||
// 品牌方审核通过 -> 跳转到任务详情
|
||||
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
|
||||
break
|
||||
case 'brand_reject':
|
||||
// 品牌方审核驳回 -> 跳转到任务详情
|
||||
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
|
||||
break
|
||||
case 'video_ai':
|
||||
// 视频AI审核完成 -> 跳转到任务详情
|
||||
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
|
||||
break
|
||||
case 'appeal':
|
||||
// 申诉结果 -> 跳转到申诉中心
|
||||
router.push('/creator/appeals')
|
||||
break
|
||||
case 'video_agency_reject':
|
||||
// 视频代理商驳回 -> 跳转到任务详情
|
||||
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
|
||||
break
|
||||
case 'video_brand_reject':
|
||||
// 视频品牌方驳回 -> 跳转到任务详情
|
||||
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
|
||||
break
|
||||
default:
|
||||
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
|
||||
}
|
||||
}
|
||||
|
||||
const handleAcceptInvite = (messageId: string) => {
|
||||
setConfirmModal({ isOpen: true, type: 'accept', messageId })
|
||||
}
|
||||
|
||||
const handleIgnoreInvite = (messageId: string) => {
|
||||
setConfirmModal({ isOpen: true, type: 'ignore', messageId })
|
||||
}
|
||||
|
||||
const handleConfirmAction = () => {
|
||||
const { type, messageId } = confirmModal
|
||||
setConfirmModal({ ...confirmModal, isOpen: false })
|
||||
|
||||
// 更新消息状态
|
||||
setMessages(prev => prev.map(msg =>
|
||||
msg.id === messageId ? { ...msg, hasActions: false, read: true } : msg
|
||||
))
|
||||
|
||||
// 显示成功提示
|
||||
setSuccessModal({
|
||||
isOpen: true,
|
||||
message: type === 'accept'
|
||||
? '已成功接受邀请！您现在可以接收该代理商分配的推广任务了。'
|
||||
: '已忽略该邀请。如需重新查看，请联系代理商。',
|
||||
})
|
||||
}
|
||||
|
||||
// 获取当前确认弹窗的代理商名称
|
||||
const getAgencyName = () => {
|
||||
const message = messages.find(m => m.id === confirmModal.messageId)
|
||||
if (message?.content.includes('「')) {
|
||||
const match = message.content.match(/「([^」]+)」/)
|
||||
return match ? match[1] : '该代理商'
|
||||
}
|
||||
return '该代理商'
|
||||
}
|
||||
|
||||
return (
|
||||
<ResponsiveLayout role="creator">
|
||||
<div className="flex flex-col gap-6 h-full">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-12 h-12 rounded-2xl bg-accent-indigo/15 flex items-center justify-center">
|
||||
<Bell className="w-6 h-6 text-accent-indigo" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-[28px] font-bold text-text-primary">消息中心</h1>
|
||||
<p className="text-[15px] text-text-secondary">追踪 AI 审核与人工审核进度</p>
|
||||
</div>
|
||||
{/* 顶部栏 */}
|
||||
<div className="flex items-center justify-between flex-wrap gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-xl lg:text-[24px] font-bold text-text-primary">消息中心</h1>
|
||||
<p className="text-sm text-text-secondary">查看任务通知、审核结果和申诉反馈</p>
|
||||
</div>
|
||||
<span className="text-sm text-text-tertiary">未读 {unreadCount}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
{unreadMessages.length === 0 && (
|
||||
<div className="bg-bg-card rounded-xl p-4 text-sm text-text-tertiary">
|
||||
暂无未读消息
|
||||
</div>
|
||||
)}
|
||||
{unreadMessages.map((msg) => (
|
||||
<MessageCard
|
||||
key={msg.id}
|
||||
title={msg.title}
|
||||
description={msg.description}
|
||||
time={msg.time}
|
||||
status={msg.status}
|
||||
isRead={msg.read}
|
||||
onClick={() => handleClick(msg.id, msg.taskId)}
|
||||
/>
|
||||
))}
|
||||
|
||||
<div className="pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowRead((prev) => !prev)}
|
||||
className="flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary"
|
||||
>
|
||||
{showRead ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
|
||||
已读 ({readMessages.length})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showRead && readMessages.length === 0 && (
|
||||
<div className="bg-bg-card rounded-xl p-4 text-sm text-text-tertiary">
|
||||
暂无已读消息
|
||||
</div>
|
||||
)}
|
||||
{showRead && readMessages.map((msg) => (
|
||||
<MessageCard
|
||||
key={msg.id}
|
||||
title={msg.title}
|
||||
description={msg.description}
|
||||
time={msg.time}
|
||||
status={msg.status}
|
||||
isRead={msg.read}
|
||||
onClick={() => handleClick(msg.id, msg.taskId)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</DesktopLayout>
|
||||
)
|
||||
|
||||
const MobileContent = (
|
||||
<MobileLayout role="creator">
|
||||
<div className="flex flex-col gap-5 px-5 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-2xl bg-accent-indigo/15 flex items-center justify-center">
|
||||
<Bell className="w-5 h-5 text-accent-indigo" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-text-primary">消息中心</h1>
|
||||
<p className="text-sm text-text-secondary">审核进度提醒</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
{unreadMessages.length === 0 && (
|
||||
<div className="bg-bg-card rounded-xl p-4 text-sm text-text-tertiary">
|
||||
暂无未读消息
|
||||
</div>
|
||||
)}
|
||||
{unreadMessages.map((msg) => (
|
||||
<MessageCard
|
||||
key={msg.id}
|
||||
title={msg.title}
|
||||
description={msg.description}
|
||||
time={msg.time}
|
||||
status={msg.status}
|
||||
isRead={msg.read}
|
||||
onClick={() => handleClick(msg.id, msg.taskId)}
|
||||
/>
|
||||
))}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowRead((prev) => !prev)}
|
||||
className="flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary pt-1"
|
||||
className="px-4 py-2.5 rounded-lg bg-bg-elevated text-text-primary text-sm"
|
||||
onClick={markAllAsRead}
|
||||
>
|
||||
{showRead ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
|
||||
已读 ({readMessages.length})
|
||||
全部标为已读
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showRead && readMessages.length === 0 && (
|
||||
<div className="bg-bg-card rounded-xl p-4 text-sm text-text-tertiary">
|
||||
暂无已读消息
|
||||
</div>
|
||||
)}
|
||||
{showRead && readMessages.map((msg) => (
|
||||
<MessageCard
|
||||
key={msg.id}
|
||||
title={msg.title}
|
||||
description={msg.description}
|
||||
time={msg.time}
|
||||
status={msg.status}
|
||||
isRead={msg.read}
|
||||
onClick={() => handleClick(msg.id, msg.taskId)}
|
||||
/>
|
||||
))}
|
||||
{/* 消息列表 - 可滚动 */}
|
||||
<div className="bg-bg-card rounded-2xl p-4 lg:p-6 flex-1 overflow-hidden">
|
||||
<div className="flex flex-col gap-4 h-full overflow-y-auto pr-2">
|
||||
{messages.map((message) => (
|
||||
<MessageCard
|
||||
key={message.id}
|
||||
message={message}
|
||||
onRead={() => markAsRead(message.id)}
|
||||
onNavigate={() => navigateByMessage(message)}
|
||||
onAcceptInvite={() => handleAcceptInvite(message.id)}
|
||||
onIgnoreInvite={() => handleIgnoreInvite(message.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</MobileLayout>
|
||||
)
|
||||
|
||||
return isMobile ? MobileContent : DesktopContent
|
||||
{/* 确认弹窗 */}
|
||||
<InviteConfirmModal
|
||||
isOpen={confirmModal.isOpen}
|
||||
type={confirmModal.type}
|
||||
agencyName={getAgencyName()}
|
||||
onClose={() => setConfirmModal({ ...confirmModal, isOpen: false })}
|
||||
onConfirm={handleConfirmAction}
|
||||
/>
|
||||
|
||||
{/* 成功提示弹窗 */}
|
||||
<SuccessModal
|
||||
isOpen={successModal.isOpen}
|
||||
message={successModal.message}
|
||||
onClose={() => setSuccessModal({ ...successModal, isOpen: false })}
|
||||
/>
|
||||
</ResponsiveLayout>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,511 +1,439 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { Check, Loader2, Video, Search, SlidersHorizontal, ChevronDown } from 'lucide-react'
|
||||
import { MobileLayout } from '@/components/layout/MobileLayout'
|
||||
import { DesktopLayout } from '@/components/layout/DesktopLayout'
|
||||
import {
|
||||
Video,
|
||||
Search,
|
||||
SlidersHorizontal,
|
||||
ChevronDown,
|
||||
Upload,
|
||||
Bot,
|
||||
Users,
|
||||
Building2,
|
||||
Check,
|
||||
X,
|
||||
Loader2
|
||||
} from 'lucide-react'
|
||||
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { api } from '@/lib/api'
|
||||
import type { TaskResponse } from '@/types/task'
|
||||
|
||||
// 任务状态类型
|
||||
type TaskStatus = 'pending_script' | 'pending_video' | 'ai_reviewing' | 'agency_reviewing' | 'need_revision' | 'passed'
|
||||
// 任务阶段状态类型
|
||||
type StageStatus = 'pending' | 'current' | 'done' | 'error'
|
||||
|
||||
// 模拟任务数据
|
||||
const seedTasks = [
|
||||
// 任务数据类型
|
||||
type Task = {
|
||||
id: string
|
||||
title: string
|
||||
description: string
|
||||
// 脚本阶段
|
||||
scriptStage: {
|
||||
submit: StageStatus
|
||||
ai: StageStatus
|
||||
agency: StageStatus
|
||||
brand: StageStatus
|
||||
}
|
||||
// 视频阶段
|
||||
videoStage: {
|
||||
submit: StageStatus
|
||||
ai: StageStatus
|
||||
agency: StageStatus
|
||||
brand: StageStatus
|
||||
}
|
||||
// 按钮配置
|
||||
buttonText: string
|
||||
buttonType: 'upload' | 'view' | 'fix'
|
||||
// 阶段颜色
|
||||
scriptColor: 'blue' | 'indigo' | 'coral' | 'green'
|
||||
videoColor: 'tertiary' | 'blue' | 'indigo' | 'coral' | 'green'
|
||||
}
|
||||
|
||||
// 15个任务数据，覆盖所有状态
|
||||
const mockTasks: Task[] = [
|
||||
{
|
||||
id: 'task-001',
|
||||
title: 'XX品牌618推广',
|
||||
platform: '抖音',
|
||||
description: '产品种草视频 · 时长要求 60-90秒',
|
||||
deadline: '2026-02-10',
|
||||
status: 'pending_script' as TaskStatus,
|
||||
currentStep: 1, // 1-已提交, 2-AI审核, 3-代理商审核, 4-品牌终审
|
||||
description: '产品种草视频 · 时长要求 60-90秒 · 截止: 2026-02-10',
|
||||
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',
|
||||
},
|
||||
{
|
||||
id: 'task-002',
|
||||
title: 'YY美妆新品',
|
||||
platform: '小红书',
|
||||
description: '口播测评 · 视频已上传 · 等待AI审核',
|
||||
submitTime: '今天 14:30',
|
||||
status: 'ai_reviewing' as TaskStatus,
|
||||
currentStep: 2,
|
||||
progress: 65,
|
||||
description: '口播测评 · 已上传视频 · 提交于: 今天 14:30',
|
||||
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-003',
|
||||
title: 'ZZ饮品夏日',
|
||||
platform: '抖音',
|
||||
description: '探店Vlog · 发现2处问题',
|
||||
reviewTime: '昨天 18:20',
|
||||
status: 'need_revision' as TaskStatus,
|
||||
currentStep: 2,
|
||||
issueCount: 2,
|
||||
description: '探店Vlog · 发现2处问题 · 需修改后重新提交',
|
||||
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',
|
||||
},
|
||||
{
|
||||
id: 'task-004',
|
||||
title: 'AA数码新品发布',
|
||||
platform: '抖音',
|
||||
description: '开箱测评 · 已发布',
|
||||
status: 'passed' as TaskStatus,
|
||||
currentStep: 4,
|
||||
description: '开箱测评 · 审核通过 · 可发布',
|
||||
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',
|
||||
},
|
||||
{
|
||||
id: 'task-005',
|
||||
title: 'BB运动饮料',
|
||||
platform: '抖音',
|
||||
description: '脚本已通过 · 待提交成片',
|
||||
deadline: '2026-02-12',
|
||||
status: 'pending_video' as TaskStatus,
|
||||
currentStep: 1,
|
||||
description: '运动场景 · 脚本AI审核中 · 等待结果',
|
||||
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: '穿搭展示 · 脚本待代理商审核',
|
||||
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: '开箱视频 · 脚本待品牌终审',
|
||||
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: '美食测评 · 脚本通过 · 待上传视频',
|
||||
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审核中',
|
||||
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: '功能展示 · 脚本代理商不通过',
|
||||
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: '品牌代言 · 脚本品牌不通过',
|
||||
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: '配件展示 · 视频代理商审核中',
|
||||
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: '旅行记录 · 视频代理商不通过',
|
||||
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: '宠物日常 · 视频品牌终审中',
|
||||
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: '使用演示 · 视频品牌不通过',
|
||||
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',
|
||||
},
|
||||
]
|
||||
|
||||
type UiTask = typeof seedTasks[number]
|
||||
// 步骤图标组件
|
||||
function StepIcon({ status, icon }: { status: StageStatus; icon: 'upload' | 'bot' | 'users' | 'building' }) {
|
||||
const IconComponent = {
|
||||
upload: Upload,
|
||||
bot: Bot,
|
||||
users: Users,
|
||||
building: Building2,
|
||||
}[icon]
|
||||
|
||||
const taskProfiles = seedTasks.reduce<Record<string, UiTask>>((acc, task) => {
|
||||
acc[task.id] = task
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
const platformLabelMap: Record<string, string> = {
|
||||
douyin: '抖音',
|
||||
xiaohongshu: '小红书',
|
||||
bilibili: 'B站',
|
||||
kuaishou: '快手',
|
||||
}
|
||||
|
||||
const getPlatformLabel = (platform?: string) => {
|
||||
if (!platform) return '未知平台'
|
||||
return platformLabelMap[platform] || platform
|
||||
}
|
||||
|
||||
const deriveTaskStatus = (task: TaskResponse): TaskStatus => {
|
||||
if (!task.has_script) {
|
||||
return 'pending_script'
|
||||
const getStyle = () => {
|
||||
switch (status) {
|
||||
case 'done':
|
||||
return 'bg-accent-green'
|
||||
case 'current':
|
||||
return 'bg-accent-indigo'
|
||||
case 'error':
|
||||
return 'bg-accent-coral'
|
||||
default:
|
||||
return 'bg-bg-elevated border-[1.5px] border-border-subtle'
|
||||
}
|
||||
}
|
||||
if (!task.has_video) {
|
||||
return 'pending_video'
|
||||
}
|
||||
if (task.status === 'approved') {
|
||||
return 'passed'
|
||||
}
|
||||
if (task.status === 'rejected' || task.status === 'failed') {
|
||||
return 'need_revision'
|
||||
}
|
||||
if (task.status === 'pending' || task.status === 'processing') {
|
||||
return 'ai_reviewing'
|
||||
}
|
||||
return 'agency_reviewing'
|
||||
}
|
||||
|
||||
const getCurrentStep = (status: TaskStatus) => {
|
||||
if (status === 'ai_reviewing' || status === 'need_revision') {
|
||||
return 2
|
||||
}
|
||||
if (status === 'agency_reviewing') {
|
||||
return 3
|
||||
}
|
||||
if (status === 'passed') {
|
||||
return 4
|
||||
}
|
||||
return 1
|
||||
}
|
||||
|
||||
const getStatusDescription = (status: TaskStatus) => {
|
||||
switch (status) {
|
||||
case 'pending_script':
|
||||
return '待提交脚本'
|
||||
case 'pending_video':
|
||||
return '待提交视频'
|
||||
case 'ai_reviewing':
|
||||
return 'AI 审核中'
|
||||
case 'agency_reviewing':
|
||||
return '待代理商审核'
|
||||
case 'need_revision':
|
||||
return '需修改后再提交'
|
||||
case 'passed':
|
||||
return '审核通过'
|
||||
default:
|
||||
return '任务进行中'
|
||||
}
|
||||
}
|
||||
|
||||
const mapApiTaskToUi = (task: TaskResponse): UiTask => {
|
||||
const profile = taskProfiles[task.task_id]
|
||||
const status = deriveTaskStatus(task)
|
||||
const platformLabel = getPlatformLabel(task.platform)
|
||||
const description = profile?.description || `${platformLabel} · ${getStatusDescription(status)}`
|
||||
|
||||
return {
|
||||
id: task.task_id,
|
||||
title: profile?.title || `任务 ${task.task_id}`,
|
||||
platform: platformLabel,
|
||||
description,
|
||||
deadline: profile?.deadline,
|
||||
submitTime: profile?.submitTime,
|
||||
reviewTime: profile?.reviewTime,
|
||||
status,
|
||||
currentStep: profile?.currentStep || getCurrentStep(status),
|
||||
progress: profile?.progress,
|
||||
issueCount: profile?.issueCount,
|
||||
}
|
||||
}
|
||||
|
||||
// 状态徽章配置
|
||||
function getStatusConfig(status: TaskStatus) {
|
||||
switch (status) {
|
||||
case 'pending_script':
|
||||
return { label: '待上传', bg: 'bg-accent-blue/15', text: 'text-accent-blue' }
|
||||
case 'pending_video':
|
||||
return { label: '待上传', bg: 'bg-accent-blue/15', text: 'text-accent-blue' }
|
||||
case 'ai_reviewing':
|
||||
return { label: '审核中', bg: 'bg-accent-indigo/15', text: 'text-accent-indigo' }
|
||||
case 'agency_reviewing':
|
||||
return { label: '审核中', bg: 'bg-accent-amber/15', text: 'text-accent-amber' }
|
||||
case 'need_revision':
|
||||
return { label: '需修改', bg: 'bg-accent-coral/15', text: 'text-accent-coral' }
|
||||
case 'passed':
|
||||
return { label: '已通过', bg: 'bg-accent-green/15', text: 'text-accent-green' }
|
||||
default:
|
||||
return { label: '未知', bg: 'bg-bg-elevated', text: 'text-text-secondary' }
|
||||
}
|
||||
}
|
||||
|
||||
type StepState = 'done' | 'current' | 'pending' | 'error'
|
||||
|
||||
function getStepTimeline(status: TaskStatus): Array<{ label: string; state: StepState }> {
|
||||
switch (status) {
|
||||
case 'pending_script':
|
||||
case 'pending_video':
|
||||
return [
|
||||
{ label: '待提交', state: 'current' },
|
||||
{ label: 'AI审核', state: 'pending' },
|
||||
{ label: '代理商', state: 'pending' },
|
||||
{ label: '终审', state: 'pending' },
|
||||
]
|
||||
case 'ai_reviewing':
|
||||
return [
|
||||
{ label: '已提交', state: 'done' },
|
||||
{ label: 'AI审核', state: 'current' },
|
||||
{ label: '代理商', state: 'pending' },
|
||||
{ label: '终审', state: 'pending' },
|
||||
]
|
||||
case 'need_revision':
|
||||
return [
|
||||
{ label: '已提交', state: 'done' },
|
||||
{ label: 'AI未通过', state: 'error' },
|
||||
{ label: '代理商', state: 'pending' },
|
||||
{ label: '终审', state: 'pending' },
|
||||
]
|
||||
case 'agency_reviewing':
|
||||
return [
|
||||
{ label: '已提交', state: 'done' },
|
||||
{ label: 'AI通过', state: 'done' },
|
||||
{ label: '代理商审核', state: 'current' },
|
||||
{ label: '终审', state: 'pending' },
|
||||
]
|
||||
case 'passed':
|
||||
return [
|
||||
{ label: '已提交', state: 'done' },
|
||||
{ label: 'AI通过', state: 'done' },
|
||||
{ label: '代理商通过', state: 'done' },
|
||||
{ label: '已通过', state: 'done' },
|
||||
]
|
||||
default:
|
||||
return [
|
||||
{ label: '已提交', state: 'pending' },
|
||||
{ label: 'AI审核', state: 'pending' },
|
||||
{ label: '代理商', state: 'pending' },
|
||||
{ label: '终审', state: 'pending' },
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
function TaskStepSummary({ status }: { status: TaskStatus }) {
|
||||
const steps = getStepTimeline(status)
|
||||
|
||||
const stateStyle = (state: StepState) => {
|
||||
if (state === 'done') return 'bg-accent-green text-text-secondary'
|
||||
if (state === 'current') return 'bg-accent-indigo text-accent-indigo'
|
||||
if (state === 'error') return 'bg-accent-coral text-accent-coral'
|
||||
return 'bg-border-subtle text-text-tertiary'
|
||||
const getIconColor = () => {
|
||||
if (status === 'done' || status === 'current' || status === 'error') return 'text-white'
|
||||
return 'text-text-tertiary'
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs">
|
||||
<div className={cn('w-7 h-7 rounded-full flex items-center justify-center', getStyle())}>
|
||||
{status === 'done' && <Check size={14} className={getIconColor()} />}
|
||||
{status === 'current' && <Loader2 size={14} className={cn(getIconColor(), 'animate-spin')} />}
|
||||
{status === 'error' && <X size={14} className={getIconColor()} />}
|
||||
{status === 'pending' && <IconComponent size={14} className={getIconColor()} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 进度条组件
|
||||
function ProgressBar({ stage, color }: {
|
||||
stage: { submit: StageStatus; ai: StageStatus; agency: StageStatus; brand: StageStatus }
|
||||
color: string
|
||||
}) {
|
||||
const steps = [
|
||||
{ key: 'submit', label: '提交', icon: 'upload' as const, status: stage.submit },
|
||||
{ key: 'ai', label: 'AI审核', icon: 'bot' as const, status: stage.ai },
|
||||
{ key: 'agency', label: '代理商', icon: 'users' as const, status: stage.agency },
|
||||
{ key: 'brand', label: '品牌', icon: 'building' as const, status: stage.brand },
|
||||
]
|
||||
|
||||
const getLineColor = (fromStatus: StageStatus) => {
|
||||
if (fromStatus === 'done') return 'bg-accent-green'
|
||||
return 'bg-border-subtle'
|
||||
}
|
||||
|
||||
const getLabelColor = (status: StageStatus) => {
|
||||
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'
|
||||
return 'text-text-tertiary'
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center w-full">
|
||||
{steps.map((step, index) => (
|
||||
<div key={`${step.label}-${index}`} className="flex items-center gap-1">
|
||||
<span className={cn('w-1.5 h-1.5 rounded-full', stateStyle(step.state))} />
|
||||
<span className={cn('text-[11px]', step.state === 'error' ? 'text-accent-coral' : 'text-text-tertiary')}>
|
||||
{step.label}
|
||||
</span>
|
||||
{index < steps.length - 1 && <span className="text-text-tertiary">·</span>}
|
||||
<div key={step.key} className="flex items-center flex-1">
|
||||
<div className="flex flex-col items-center gap-1.5 w-14">
|
||||
<StepIcon status={step.status} icon={step.icon} />
|
||||
<span className={cn('text-[10px]', getLabelColor(step.status))}>{step.label}</span>
|
||||
</div>
|
||||
{index < steps.length - 1 && (
|
||||
<div className={cn('h-0.5 flex-1', getLineColor(step.status))} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 审核进度条组件
|
||||
function ReviewProgressBar({ currentStep, status }: { currentStep: number; status: TaskStatus }) {
|
||||
const steps = [
|
||||
{ label: '已提交', step: 1 },
|
||||
{ label: 'AI审核', step: 2 },
|
||||
{ label: '代理商审核', step: 3 },
|
||||
{ label: '品牌终审', step: 4 },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="flex items-center w-full py-2">
|
||||
{steps.map((s, index) => {
|
||||
const isCompleted = s.step < currentStep || (s.step === currentStep && status === 'passed')
|
||||
const isCurrent = s.step === currentStep && status !== 'passed'
|
||||
const isError = isCurrent && status === 'need_revision'
|
||||
|
||||
return (
|
||||
<div key={s.step} className="flex items-center flex-1">
|
||||
<div className="flex flex-col items-center gap-1 w-[70px]">
|
||||
<div className={cn(
|
||||
'w-7 h-7 rounded-full flex items-center justify-center',
|
||||
isCompleted ? 'bg-accent-green' :
|
||||
isError ? 'bg-accent-coral' :
|
||||
isCurrent ? 'bg-accent-indigo' :
|
||||
'bg-bg-elevated border-[1.5px] border-border-subtle'
|
||||
)}>
|
||||
{isCompleted && <Check className="w-3.5 h-3.5 text-white" />}
|
||||
{isCurrent && !isError && <Loader2 className="w-3.5 h-3.5 text-white animate-spin" />}
|
||||
{isError && <span className="w-2 h-2 bg-white rounded-full" />}
|
||||
</div>
|
||||
<span className={cn(
|
||||
'text-xs',
|
||||
isCompleted ? 'text-text-secondary' :
|
||||
isError ? 'text-accent-coral font-semibold' :
|
||||
isCurrent ? 'text-accent-indigo font-semibold' :
|
||||
'text-text-tertiary'
|
||||
)}>
|
||||
{s.label}
|
||||
</span>
|
||||
</div>
|
||||
{index < steps.length - 1 && (
|
||||
<div className={cn(
|
||||
'h-0.5 flex-1',
|
||||
s.step < currentStep ? 'bg-accent-green' : 'bg-border-subtle'
|
||||
)} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 桌面端任务卡片
|
||||
function DesktopTaskCard({ task, onClick }: { task: UiTask; onClick: () => void }) {
|
||||
const config = getStatusConfig(task.status)
|
||||
const showProgress = ['ai_reviewing', 'agency_reviewing', 'need_revision'].includes(task.status)
|
||||
|
||||
const getActionButton = () => {
|
||||
if (task.status === 'pending_script' || task.status === 'pending_video') {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="px-5 py-2.5 rounded-[10px] bg-accent-green text-white text-sm font-semibold"
|
||||
onClick={(e) => { e.stopPropagation(); onClick() }}
|
||||
>
|
||||
上传{task.status === 'pending_script' ? '脚本' : '视频'}
|
||||
</button>
|
||||
)
|
||||
// 任务卡片组件
|
||||
function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
|
||||
const getStageColor = (color: string) => {
|
||||
switch (color) {
|
||||
case 'blue': return 'text-accent-blue'
|
||||
case 'indigo': return 'text-accent-indigo'
|
||||
case 'coral': return 'text-accent-coral'
|
||||
case 'green': return 'text-accent-green'
|
||||
default: return 'text-text-tertiary'
|
||||
}
|
||||
if (task.status === 'ai_reviewing') {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="px-5 py-2.5 rounded-[10px] bg-bg-elevated border border-border-subtle text-text-secondary text-sm font-medium"
|
||||
onClick={(e) => { e.stopPropagation(); onClick() }}
|
||||
>
|
||||
查看详情
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
const getButtonStyle = () => {
|
||||
switch (task.buttonType) {
|
||||
case 'upload':
|
||||
return 'bg-accent-green text-white'
|
||||
case 'fix':
|
||||
return 'bg-accent-coral text-white'
|
||||
default:
|
||||
return 'bg-transparent border-[1.5px] border-accent-indigo text-accent-indigo'
|
||||
}
|
||||
if (task.status === 'need_revision') {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="px-5 py-2.5 rounded-[10px] bg-accent-coral text-white text-sm font-semibold"
|
||||
onClick={(e) => { e.stopPropagation(); onClick() }}
|
||||
>
|
||||
查看修改
|
||||
</button>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="px-5 py-2.5 rounded-[10px] bg-bg-elevated border border-border-subtle text-text-secondary text-sm font-medium"
|
||||
onClick={(e) => { e.stopPropagation(); onClick() }}
|
||||
>
|
||||
查看详情
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="bg-bg-card rounded-2xl p-5 flex flex-col gap-4 card-shadow cursor-pointer hover:bg-bg-elevated/50 transition-colors"
|
||||
className="bg-bg-card rounded-2xl p-5 flex flex-col gap-4 card-shadow cursor-pointer hover:bg-bg-elevated/30 transition-colors"
|
||||
onClick={onClick}
|
||||
>
|
||||
{/* 任务主行 */}
|
||||
<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" />
|
||||
</div>
|
||||
{/* 任务信息 */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-base font-semibold text-text-primary">{task.title}</span>
|
||||
<span className="text-[13px] text-text-secondary">{task.description}</span>
|
||||
<TaskStepSummary status={task.status} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧：状态 + 操作按钮 */}
|
||||
<div className="flex items-center gap-4">
|
||||
<span className={cn('px-3 py-1.5 rounded-lg text-[13px] font-semibold', config.bg, config.text)}>
|
||||
{config.label}
|
||||
</span>
|
||||
{getActionButton()}
|
||||
</div>
|
||||
{/* 右侧：操作按钮 */}
|
||||
<button
|
||||
type="button"
|
||||
className={cn('px-5 py-2.5 rounded-[10px] text-sm font-semibold', getButtonStyle())}
|
||||
onClick={(e) => { e.stopPropagation(); onClick() }}
|
||||
>
|
||||
{task.buttonText}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 审核进度条 */}
|
||||
{showProgress && <ReviewProgressBar currentStep={task.currentStep} status={task.status} />}
|
||||
{/* 进度条容器 */}
|
||||
<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">
|
||||
<ProgressBar stage={task.videoStage} color={task.videoColor} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 移动端任务卡片
|
||||
function MobileTaskCard({ task, onClick }: { task: UiTask; onClick: () => void }) {
|
||||
const config = getStatusConfig(task.status)
|
||||
const showProgress = ['ai_reviewing', 'agency_reviewing', 'need_revision'].includes(task.status)
|
||||
// 任务状态筛选选项
|
||||
type TaskFilter = 'all' | 'pending' | 'reviewing' | 'rejected' | 'completed'
|
||||
|
||||
return (
|
||||
<div
|
||||
className="bg-bg-card rounded-xl p-4 flex flex-col gap-3 card-shadow cursor-pointer"
|
||||
onClick={onClick}
|
||||
>
|
||||
{/* 头部 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[17px] font-semibold text-text-primary">{task.title}</span>
|
||||
<span className={cn('px-2.5 py-1 rounded-lg text-xs font-semibold', config.bg, config.text)}>
|
||||
{config.label}
|
||||
</span>
|
||||
</div>
|
||||
const filterOptions: { value: TaskFilter; label: string }[] = [
|
||||
{ value: 'all', label: '全部状态' },
|
||||
{ value: 'pending', label: '待提交' },
|
||||
{ value: 'reviewing', label: '审核中' },
|
||||
{ value: 'rejected', label: '已驳回' },
|
||||
{ value: 'completed', label: '已完成' },
|
||||
]
|
||||
|
||||
{/* 进度条 */}
|
||||
{showProgress && (
|
||||
<div className="py-1">
|
||||
<ReviewProgressBar currentStep={task.currentStep} status={task.status} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 描述 */}
|
||||
<p className="text-sm text-text-secondary">{task.description}</p>
|
||||
<TaskStepSummary status={task.status} />
|
||||
|
||||
{/* 底部 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[13px] text-text-tertiary">
|
||||
{task.deadline && `截止: ${task.deadline}`}
|
||||
{task.submitTime && `提交于: ${task.submitTime}`}
|
||||
{task.reviewTime && `审核于: ${task.reviewTime}`}
|
||||
</span>
|
||||
{(task.status === 'pending_script' || task.status === 'pending_video') && (
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-2 rounded-[10px] bg-accent-green text-white text-sm font-semibold"
|
||||
onClick={(e) => { e.stopPropagation(); onClick() }}
|
||||
>
|
||||
去上传
|
||||
</button>
|
||||
)}
|
||||
{task.status === 'need_revision' && (
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-2 rounded-[10px] bg-accent-coral text-white text-sm font-semibold"
|
||||
onClick={(e) => { e.stopPropagation(); onClick() }}
|
||||
>
|
||||
查看修改
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
// 根据任务状态获取筛选分类
|
||||
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'
|
||||
}
|
||||
|
||||
export default function CreatorTasksPage() {
|
||||
const router = useRouter()
|
||||
const [isMobile, setIsMobile] = useState(true)
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [tasks, setTasks] = useState<UiTask[]>(seedTasks)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const checkMobile = () => setIsMobile(window.innerWidth < 1024)
|
||||
checkMobile()
|
||||
window.addEventListener('resize', checkMobile)
|
||||
return () => window.removeEventListener('resize', checkMobile)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true
|
||||
|
||||
const fetchTasks = async () => {
|
||||
setIsLoading(true)
|
||||
try {
|
||||
const data = await api.listTasks()
|
||||
if (!isMounted) return
|
||||
const mapped = data.items.map(mapApiTaskToUi)
|
||||
setTasks(mapped)
|
||||
} catch (error) {
|
||||
console.error('加载任务失败:', error)
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fetchTasks()
|
||||
|
||||
return () => {
|
||||
isMounted = false
|
||||
}
|
||||
}, [])
|
||||
|
||||
const pendingCount = tasks.filter(t =>
|
||||
!['passed'].includes(t.status)
|
||||
).length
|
||||
const [filter, setFilter] = useState<TaskFilter>('all')
|
||||
const [showFilterDropdown, setShowFilterDropdown] = useState(false)
|
||||
const [tasks] = useState<Task[]>(mockTasks)
|
||||
|
||||
const handleTaskClick = (taskId: string) => {
|
||||
router.push(`/creator/task/${taskId}`)
|
||||
}
|
||||
|
||||
// 桌面端内容
|
||||
const DesktopContent = (
|
||||
<DesktopLayout role="creator">
|
||||
// 过滤任务
|
||||
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
|
||||
|
||||
return matchesSearch && matchesFilter
|
||||
})
|
||||
|
||||
const currentFilterLabel = filterOptions.find(opt => opt.value === filter)?.label || '全部状态'
|
||||
|
||||
return (
|
||||
<ResponsiveLayout role="creator">
|
||||
<div className="flex flex-col gap-6 h-full">
|
||||
{/* 顶部栏 */}
|
||||
<div className="flex items-center justify-between">
|
||||
{/* 页面标题 */}
|
||||
<div className="flex items-center justify-between flex-wrap gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-[28px] font-bold text-text-primary">我的任务</h1>
|
||||
<p className="text-[15px] text-text-secondary">共 {pendingCount} 个进行中任务</p>
|
||||
<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} 个`}
|
||||
</p>
|
||||
</div>
|
||||
{/* 搜索和筛选 */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2 px-4 py-2.5 bg-bg-card rounded-xl border border-border-subtle">
|
||||
<Search className="w-[18px] h-[18px] text-text-secondary" />
|
||||
@ -517,74 +445,72 @@ export default function CreatorTasksPage() {
|
||||
className="bg-transparent text-sm text-text-primary placeholder-text-tertiary focus:outline-none w-32"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-bg-card rounded-xl border border-border-subtle text-text-secondary text-sm font-medium"
|
||||
>
|
||||
<SlidersHorizontal className="w-[18px] h-[18px]" />
|
||||
<span>全部状态</span>
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
</button>
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowFilterDropdown(!showFilterDropdown)}
|
||||
className={cn(
|
||||
'flex items-center gap-2 px-4 py-2.5 rounded-xl border text-sm font-medium transition-colors',
|
||||
filter !== 'all'
|
||||
? 'bg-accent-indigo/10 border-accent-indigo text-accent-indigo'
|
||||
: 'bg-bg-card border-border-subtle text-text-secondary'
|
||||
)}
|
||||
>
|
||||
<SlidersHorizontal className="w-[18px] h-[18px]" />
|
||||
<span>{currentFilterLabel}</span>
|
||||
<ChevronDown className={cn('w-4 h-4 transition-transform', showFilterDropdown && 'rotate-180')} />
|
||||
</button>
|
||||
{showFilterDropdown && (
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-0 z-10"
|
||||
onClick={() => setShowFilterDropdown(false)}
|
||||
/>
|
||||
<div className="absolute right-0 top-full mt-2 w-40 bg-bg-card rounded-xl border border-border-subtle card-shadow z-20 overflow-hidden">
|
||||
{filterOptions.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setFilter(option.value)
|
||||
setShowFilterDropdown(false)
|
||||
}}
|
||||
className={cn(
|
||||
'w-full px-4 py-3 text-left text-sm transition-colors',
|
||||
filter === option.value
|
||||
? 'bg-accent-indigo/10 text-accent-indigo font-medium'
|
||||
: 'text-text-primary hover:bg-bg-elevated'
|
||||
)}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 任务列表 */}
|
||||
<div className="flex flex-col gap-4 flex-1 overflow-auto">
|
||||
{isLoading && (
|
||||
<div className="bg-bg-card rounded-2xl p-6 text-sm text-text-tertiary">
|
||||
正在加载任务...
|
||||
{/* 任务列表 - 可滚动 */}
|
||||
<div className="flex flex-col gap-4 flex-1 overflow-y-auto pr-2">
|
||||
{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>
|
||||
<p className="text-sm text-text-tertiary mt-1">尝试调整搜索条件或筛选状态</p>
|
||||
</div>
|
||||
) : (
|
||||
filteredTasks.map((task) => (
|
||||
<TaskCard
|
||||
key={task.id}
|
||||
task={task}
|
||||
onClick={() => handleTaskClick(task.id)}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
{!isLoading && tasks.length === 0 && (
|
||||
<div className="bg-bg-card rounded-2xl p-6 text-sm text-text-tertiary">
|
||||
暂无任务
|
||||
</div>
|
||||
)}
|
||||
{tasks.map((task) => (
|
||||
<DesktopTaskCard
|
||||
key={task.id}
|
||||
task={task}
|
||||
onClick={() => handleTaskClick(task.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</DesktopLayout>
|
||||
</ResponsiveLayout>
|
||||
)
|
||||
|
||||
// 移动端内容
|
||||
const MobileContent = (
|
||||
<MobileLayout role="creator">
|
||||
<div className="flex flex-col gap-5 px-5 py-4">
|
||||
{/* 头部 */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-[26px] font-bold text-text-primary">我的任务</h1>
|
||||
<p className="text-sm text-text-secondary">共 {pendingCount} 个进行中任务</p>
|
||||
</div>
|
||||
|
||||
{/* 任务列表 */}
|
||||
<div className="flex flex-col gap-3">
|
||||
{isLoading && (
|
||||
<div className="bg-bg-card rounded-xl p-4 text-sm text-text-tertiary">
|
||||
正在加载任务...
|
||||
</div>
|
||||
)}
|
||||
{!isLoading && tasks.length === 0 && (
|
||||
<div className="bg-bg-card rounded-xl p-4 text-sm text-text-tertiary">
|
||||
暂无任务
|
||||
</div>
|
||||
)}
|
||||
{tasks.map((task) => (
|
||||
<MobileTaskCard
|
||||
key={task.id}
|
||||
task={task}
|
||||
onClick={() => handleTaskClick(task.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</MobileLayout>
|
||||
)
|
||||
|
||||
return isMobile ? MobileContent : DesktopContent
|
||||
}
|
||||
|
||||
249
frontend/app/creator/profile/edit/page.tsx
Normal file
249
frontend/app/creator/profile/edit/page.tsx
Normal file
@ -0,0 +1,249 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { ArrowLeft, Camera, Check, Copy } from 'lucide-react'
|
||||
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { Input } from '@/components/ui/Input'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
// 模拟用户数据
|
||||
const mockUser = {
|
||||
name: '李小红',
|
||||
initial: '李',
|
||||
creatorId: 'CR123456', // 达人ID（系统生成，不可修改）
|
||||
phone: '138****8888',
|
||||
email: 'lixiaohong@example.com',
|
||||
douyinAccount: '@xiaohong_creator',
|
||||
bio: '专注美妆护肤分享，与你一起变美～',
|
||||
}
|
||||
|
||||
export default function ProfileEditPage() {
|
||||
const router = useRouter()
|
||||
const [isSaving, setIsSaving] = useState(false)
|
||||
const [idCopied, setIdCopied] = useState(false)
|
||||
const [formData, setFormData] = useState({
|
||||
name: mockUser.name,
|
||||
phone: mockUser.phone,
|
||||
email: mockUser.email,
|
||||
douyinAccount: mockUser.douyinAccount,
|
||||
bio: mockUser.bio,
|
||||
})
|
||||
|
||||
// 复制达人ID
|
||||
const handleCopyId = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(mockUser.creatorId)
|
||||
setIdCopied(true)
|
||||
setTimeout(() => setIdCopied(false), 2000)
|
||||
} catch (err) {
|
||||
console.error('复制失败:', err)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理输入变化
|
||||
const handleInputChange = (field: string, value: string) => {
|
||||
setFormData(prev => ({ ...prev, [field]: value }))
|
||||
}
|
||||
|
||||
// 保存
|
||||
const handleSave = async () => {
|
||||
setIsSaving(true)
|
||||
// 模拟保存
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
setIsSaving(false)
|
||||
router.back()
|
||||
}
|
||||
|
||||
return (
|
||||
<ResponsiveLayout role="creator">
|
||||
<div className="flex flex-col gap-6 h-full">
|
||||
{/* 顶部栏 */}
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
className="w-10 h-10 rounded-xl bg-bg-elevated flex items-center justify-center hover:bg-bg-elevated/80 transition-colors"
|
||||
>
|
||||
<ArrowLeft size={20} className="text-text-secondary" />
|
||||
</button>
|
||||
<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">更新您的头像和基本资料</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 内容区 */}
|
||||
<div className="flex flex-col lg:flex-row gap-6 flex-1 min-h-0 overflow-y-auto lg:overflow-visible">
|
||||
{/* 头像编辑卡片 */}
|
||||
<div className="lg:w-[360px] lg:flex-shrink-0">
|
||||
<div className="bg-bg-card rounded-2xl p-6 card-shadow flex flex-col items-center gap-5">
|
||||
{/* 头像 */}
|
||||
<div className="relative">
|
||||
<div
|
||||
className="w-24 h-24 rounded-full flex items-center justify-center"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #6366F1 0%, #4F46E5 100%)',
|
||||
}}
|
||||
>
|
||||
<span className="text-[40px] font-bold text-white">{mockUser.initial}</span>
|
||||
</div>
|
||||
{/* 相机按钮 */}
|
||||
<button
|
||||
type="button"
|
||||
className="absolute bottom-0 right-0 w-8 h-8 rounded-full bg-accent-indigo flex items-center justify-center shadow-lg hover:bg-accent-indigo/90 transition-colors"
|
||||
>
|
||||
<Camera size={16} className="text-white" />
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm text-text-secondary">点击更换头像</p>
|
||||
|
||||
{/* 提示 */}
|
||||
<div className="w-full p-4 rounded-xl bg-bg-elevated">
|
||||
<p className="text-[13px] text-text-tertiary leading-relaxed">
|
||||
支持 JPG、PNG 格式，文件大小不超过 5MB，建议使用正方形图片以获得最佳显示效果。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 表单卡片 */}
|
||||
<div className="flex-1 flex flex-col gap-5">
|
||||
<div className="bg-bg-card rounded-2xl p-6 card-shadow flex flex-col gap-5">
|
||||
{/* 达人ID（只读） */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="text-sm font-medium text-text-primary">达人ID</label>
|
||||
<div className="flex gap-3">
|
||||
<div className="flex-1 px-4 py-3 rounded-xl border border-border-default bg-bg-elevated/50 flex items-center justify-between">
|
||||
<span className="font-mono font-medium text-accent-indigo">{mockUser.creatorId}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCopyId}
|
||||
className="flex items-center gap-1.5 px-2 py-1 rounded-md hover:bg-bg-elevated transition-colors"
|
||||
>
|
||||
{idCopied ? (
|
||||
<>
|
||||
<Check size={14} className="text-accent-green" />
|
||||
<span className="text-xs text-accent-green">已复制</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy size={14} className="text-text-tertiary" />
|
||||
<span className="text-xs text-text-tertiary">复制</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-text-tertiary">系统自动生成的唯一标识，供代理商邀请时使用</p>
|
||||
</div>
|
||||
|
||||
{/* 昵称 */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="text-sm font-medium text-text-primary">昵称</label>
|
||||
<Input
|
||||
value={formData.name}
|
||||
onChange={(e) => handleInputChange('name', e.target.value)}
|
||||
placeholder="请输入昵称"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 手机号 */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="text-sm font-medium text-text-primary">手机号</label>
|
||||
<div className="flex gap-3">
|
||||
<Input
|
||||
value={formData.phone}
|
||||
onChange={(e) => handleInputChange('phone', e.target.value)}
|
||||
placeholder="请输入手机号"
|
||||
className="flex-1"
|
||||
disabled
|
||||
/>
|
||||
<Button variant="secondary" size="md">
|
||||
更换
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-text-tertiary">手机号用于登录和接收重要通知</p>
|
||||
</div>
|
||||
|
||||
{/* 邮箱 */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="text-sm font-medium text-text-primary">邮箱</label>
|
||||
<Input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleInputChange('email', e.target.value)}
|
||||
placeholder="请输入邮箱"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 抖音账号 */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="text-sm font-medium text-text-primary">抖音账号</label>
|
||||
<div className="flex gap-3">
|
||||
<Input
|
||||
value={formData.douyinAccount}
|
||||
onChange={(e) => handleInputChange('douyinAccount', e.target.value)}
|
||||
placeholder="请输入抖音账号"
|
||||
className="flex-1"
|
||||
disabled
|
||||
/>
|
||||
<Button variant="secondary" size="md">
|
||||
重新绑定
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-text-tertiary">已认证的抖音账号，用于发布视频</p>
|
||||
</div>
|
||||
|
||||
{/* 个人简介 */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="text-sm font-medium text-text-primary">个人简介</label>
|
||||
<textarea
|
||||
value={formData.bio}
|
||||
onChange={(e) => handleInputChange('bio', e.target.value)}
|
||||
placeholder="介绍一下自己吧..."
|
||||
rows={3}
|
||||
className={cn(
|
||||
'w-full px-4 py-3 rounded-xl border border-border-default',
|
||||
'bg-bg-elevated text-text-primary text-[15px]',
|
||||
'placeholder:text-text-tertiary',
|
||||
'focus:outline-none focus:border-accent-indigo focus:ring-2 focus:ring-accent-indigo/20',
|
||||
'transition-all resize-none'
|
||||
)}
|
||||
/>
|
||||
<p className="text-xs text-text-tertiary text-right">{formData.bio.length}/100</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 保存按钮 */}
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button variant="secondary" size="lg" onClick={() => router.back()}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="lg"
|
||||
onClick={handleSave}
|
||||
disabled={isSaving}
|
||||
className="min-w-[120px]"
|
||||
>
|
||||
{isSaving ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
保存中...
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-2">
|
||||
<Check size={18} />
|
||||
保存修改
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ResponsiveLayout>
|
||||
)
|
||||
}
|
||||
275
frontend/app/creator/profile/page.tsx
Normal file
275
frontend/app/creator/profile/page.tsx
Normal file
@ -0,0 +1,275 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import {
|
||||
CircleUser,
|
||||
Settings,
|
||||
BellRing,
|
||||
History,
|
||||
MessageCircleQuestion,
|
||||
PlusCircle,
|
||||
ChevronRight,
|
||||
LogOut,
|
||||
Copy,
|
||||
Check
|
||||
} from 'lucide-react'
|
||||
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
// 用户数据
|
||||
const mockUser = {
|
||||
name: '李小红',
|
||||
initial: '李',
|
||||
creatorId: 'CR123456', // 达人ID
|
||||
role: '抖音达人 · 已认证',
|
||||
stats: {
|
||||
completed: 28,
|
||||
passRate: 92,
|
||||
inProgress: 3,
|
||||
},
|
||||
}
|
||||
|
||||
// 菜单项数据
|
||||
const menuItems = [
|
||||
{
|
||||
id: 'personal',
|
||||
icon: CircleUser,
|
||||
iconColor: 'text-accent-indigo',
|
||||
bgColor: 'bg-accent-indigo',
|
||||
title: '个人信息',
|
||||
subtitle: '头像、昵称、绑定账号',
|
||||
},
|
||||
{
|
||||
id: 'account',
|
||||
icon: Settings,
|
||||
iconColor: 'text-accent-green',
|
||||
bgColor: 'bg-accent-green',
|
||||
title: '账户设置',
|
||||
subtitle: '修改密码、账号安全',
|
||||
},
|
||||
{
|
||||
id: 'notification',
|
||||
icon: BellRing,
|
||||
iconColor: 'text-accent-blue',
|
||||
bgColor: 'bg-accent-blue',
|
||||
title: '消息设置',
|
||||
subtitle: '通知开关、提醒偏好',
|
||||
},
|
||||
{
|
||||
id: 'history',
|
||||
icon: History,
|
||||
iconColor: 'text-accent-coral',
|
||||
bgColor: 'bg-accent-coral',
|
||||
title: '历史记录',
|
||||
subtitle: '已完成和过期的任务',
|
||||
},
|
||||
{
|
||||
id: 'help',
|
||||
icon: MessageCircleQuestion,
|
||||
iconColor: 'text-text-secondary',
|
||||
bgColor: 'bg-bg-elevated',
|
||||
title: '帮助与反馈',
|
||||
subtitle: '常见问题、联系客服',
|
||||
},
|
||||
{
|
||||
id: 'appeal',
|
||||
icon: PlusCircle,
|
||||
iconColor: 'text-accent-indigo',
|
||||
bgColor: 'bg-accent-indigo',
|
||||
title: '申诉次数',
|
||||
subtitle: '查看各任务申诉次数 · 申请增加',
|
||||
},
|
||||
]
|
||||
|
||||
// 用户卡片组件
|
||||
function UserCard() {
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
// 复制达人ID
|
||||
const handleCopyId = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(mockUser.creatorId)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
} catch (err) {
|
||||
console.error('复制失败:', err)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-bg-card rounded-2xl p-6 card-shadow flex flex-col gap-5">
|
||||
{/* 头像和信息 */}
|
||||
<div className="flex items-center gap-5">
|
||||
{/* 头像 */}
|
||||
<div
|
||||
className="w-20 h-20 rounded-full flex items-center justify-center"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #6366F1 0%, #4F46E5 100%)',
|
||||
}}
|
||||
>
|
||||
<span className="text-[32px] font-bold text-white">{mockUser.initial}</span>
|
||||
</div>
|
||||
{/* 用户信息 */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-xl font-semibold text-text-primary">{mockUser.name}</span>
|
||||
<span className="text-sm text-text-secondary">{mockUser.role}</span>
|
||||
{/* 达人ID */}
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-xs text-text-tertiary">达人ID:</span>
|
||||
<div className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-bg-elevated">
|
||||
<span className="text-xs font-mono font-medium text-accent-indigo">{mockUser.creatorId}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCopyId}
|
||||
className="p-0.5 hover:bg-bg-card rounded transition-colors"
|
||||
title={copied ? '已复制' : '复制达人ID'}
|
||||
>
|
||||
{copied ? (
|
||||
<Check size={12} className="text-accent-green" />
|
||||
) : (
|
||||
<Copy size={12} className="text-text-tertiary hover:text-text-secondary" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{copied && (
|
||||
<span className="text-xs text-accent-green animate-fade-in">已复制</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 统计数据 */}
|
||||
<div className="flex items-center justify-around pt-4 border-t border-border-subtle">
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<span className="text-2xl font-bold text-text-primary">{mockUser.stats.completed}</span>
|
||||
<span className="text-xs text-text-secondary">完成任务</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<span className="text-2xl font-bold text-accent-green">{mockUser.stats.passRate}%</span>
|
||||
<span className="text-xs text-text-secondary">通过率</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<span className="text-2xl font-bold text-accent-indigo">{mockUser.stats.inProgress}</span>
|
||||
<span className="text-xs text-text-secondary">进行中</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 菜单项组件
|
||||
function MenuItem({ item, onClick }: { item: typeof menuItems[0]; onClick: () => void }) {
|
||||
const Icon = item.icon
|
||||
const isPlainBg = item.bgColor === 'bg-bg-elevated'
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className="flex items-center justify-between py-4 w-full text-left hover:bg-bg-elevated/30 transition-colors rounded-lg px-2 -mx-2"
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
{/* 图标背景 */}
|
||||
<div
|
||||
className={cn(
|
||||
'w-10 h-10 rounded-[10px] flex items-center justify-center',
|
||||
isPlainBg ? item.bgColor : `${item.bgColor}/15`
|
||||
)}
|
||||
>
|
||||
<Icon size={20} className={item.iconColor} />
|
||||
</div>
|
||||
{/* 文字 */}
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-[15px] font-medium text-text-primary">{item.title}</span>
|
||||
<span className="text-[13px] text-text-tertiary">{item.subtitle}</span>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight size={20} className="text-text-tertiary" />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
// 菜单卡片组件
|
||||
function MenuCard({ onMenuClick }: { onMenuClick: (id: string) => void }) {
|
||||
return (
|
||||
<div className="bg-bg-card rounded-2xl p-6 card-shadow flex flex-col">
|
||||
{menuItems.map((item, index) => (
|
||||
<div key={item.id}>
|
||||
<MenuItem item={item} onClick={() => onMenuClick(item.id)} />
|
||||
{index < menuItems.length - 1 && (
|
||||
<div className="h-px bg-border-subtle" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 退出卡片组件
|
||||
function LogoutCard({ onLogout }: { onLogout: () => void }) {
|
||||
return (
|
||||
<div className="bg-bg-card rounded-2xl p-6 card-shadow">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onLogout}
|
||||
className="w-full flex items-center justify-center gap-2 py-4 rounded-xl border-[1.5px] border-accent-coral text-accent-coral font-medium hover:bg-accent-coral/10 transition-colors"
|
||||
>
|
||||
<LogOut size={20} />
|
||||
<span>退出登录</span>
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function CreatorProfilePage() {
|
||||
const router = useRouter()
|
||||
|
||||
// 菜单项点击处理
|
||||
const handleMenuClick = (menuId: string) => {
|
||||
const routes: Record<string, string> = {
|
||||
personal: '/creator/profile/edit',
|
||||
account: '/creator/settings/account',
|
||||
notification: '/creator/settings/notification',
|
||||
history: '/creator/history',
|
||||
help: '/creator/help',
|
||||
appeal: '/creator/appeal-quota',
|
||||
}
|
||||
const route = routes[menuId]
|
||||
if (route) {
|
||||
router.push(route)
|
||||
}
|
||||
}
|
||||
|
||||
// 退出登录
|
||||
const handleLogout = () => {
|
||||
// TODO: 实际退出逻辑
|
||||
router.push('/login')
|
||||
}
|
||||
|
||||
return (
|
||||
<ResponsiveLayout role="creator">
|
||||
<div className="flex flex-col gap-6 h-full">
|
||||
{/* 顶部栏 */}
|
||||
<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">管理您的账户信息和偏好设置</p>
|
||||
</div>
|
||||
|
||||
{/* 内容区 - 响应式布局 */}
|
||||
<div className="flex flex-col lg:flex-row gap-6 flex-1 min-h-0 overflow-y-auto lg:overflow-visible">
|
||||
{/* 用户卡片 */}
|
||||
<div className="lg:w-[360px] lg:flex-shrink-0">
|
||||
<UserCard />
|
||||
</div>
|
||||
|
||||
{/* 菜单和退出 */}
|
||||
<div className="flex-1 flex flex-col gap-5 lg:overflow-y-auto lg:pr-2">
|
||||
<MenuCard onMenuClick={handleMenuClick} />
|
||||
<LogoutCard onLogout={handleLogout} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ResponsiveLayout>
|
||||
)
|
||||
}
|
||||
383
frontend/app/creator/settings/account/page.tsx
Normal file
383
frontend/app/creator/settings/account/page.tsx
Normal file
@ -0,0 +1,383 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Key,
|
||||
ShieldCheck,
|
||||
Smartphone,
|
||||
ChevronRight,
|
||||
Check,
|
||||
X,
|
||||
Eye,
|
||||
EyeOff,
|
||||
} from 'lucide-react'
|
||||
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { Input } from '@/components/ui/Input'
|
||||
import { Modal } from '@/components/ui/Modal'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
// 模拟登录设备数据
|
||||
const mockDevices = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'iPhone 15 Pro',
|
||||
type: 'mobile',
|
||||
location: '北京',
|
||||
lastActive: '当前设备',
|
||||
isCurrent: true,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'MacBook Pro',
|
||||
type: 'desktop',
|
||||
location: '北京',
|
||||
lastActive: '2小时前',
|
||||
isCurrent: false,
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'iPad Air',
|
||||
type: 'tablet',
|
||||
location: '上海',
|
||||
lastActive: '3天前',
|
||||
isCurrent: false,
|
||||
},
|
||||
]
|
||||
|
||||
// 设置项组件
|
||||
function SettingItem({
|
||||
icon: Icon,
|
||||
iconColor,
|
||||
title,
|
||||
description,
|
||||
badge,
|
||||
onClick,
|
||||
showArrow = true,
|
||||
}: {
|
||||
icon: React.ElementType
|
||||
iconColor: string
|
||||
title: string
|
||||
description: string
|
||||
badge?: React.ReactNode
|
||||
onClick?: () => void
|
||||
showArrow?: boolean
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className="flex items-center justify-between py-5 px-5 w-full text-left hover:bg-bg-elevated/30 transition-colors border-b border-border-subtle last:border-b-0"
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={cn('w-10 h-10 rounded-xl flex items-center justify-center', `${iconColor}/15`)}>
|
||||
<Icon size={20} className={iconColor} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[15px] font-medium text-text-primary">{title}</span>
|
||||
<span className="text-[13px] text-text-tertiary">{description}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{badge}
|
||||
{showArrow && <ChevronRight size={20} className="text-text-tertiary" />}
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
// 修改密码弹窗
|
||||
function ChangePasswordModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
}: {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}) {
|
||||
const [step, setStep] = useState(1)
|
||||
const [showPasswords, setShowPasswords] = useState({
|
||||
current: false,
|
||||
new: false,
|
||||
confirm: false,
|
||||
})
|
||||
const [formData, setFormData] = useState({
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
})
|
||||
const [isSaving, setIsSaving] = useState(false)
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setIsSaving(true)
|
||||
await new Promise(resolve => setTimeout(resolve, 1500))
|
||||
setIsSaving(false)
|
||||
setStep(2)
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
setStep(1)
|
||||
setFormData({ currentPassword: '', newPassword: '', confirmPassword: '' })
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={handleClose} title="修改密码">
|
||||
{step === 1 ? (
|
||||
<div className="flex flex-col gap-5">
|
||||
{/* 当前密码 */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="text-sm font-medium text-text-primary">当前密码</label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={showPasswords.current ? 'text' : 'password'}
|
||||
value={formData.currentPassword}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, currentPassword: e.target.value }))}
|
||||
placeholder="请输入当前密码"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPasswords(prev => ({ ...prev, current: !prev.current }))}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-text-tertiary hover:text-text-secondary"
|
||||
>
|
||||
{showPasswords.current ? <EyeOff size={18} /> : <Eye size={18} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 新密码 */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="text-sm font-medium text-text-primary">新密码</label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={showPasswords.new ? 'text' : 'password'}
|
||||
value={formData.newPassword}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, newPassword: e.target.value }))}
|
||||
placeholder="请输入新密码（8-20位）"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPasswords(prev => ({ ...prev, new: !prev.new }))}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-text-tertiary hover:text-text-secondary"
|
||||
>
|
||||
{showPasswords.new ? <EyeOff size={18} /> : <Eye size={18} />}
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-text-tertiary">密码需包含字母和数字，长度8-20位</p>
|
||||
</div>
|
||||
|
||||
{/* 确认密码 */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="text-sm font-medium text-text-primary">确认新密码</label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={showPasswords.confirm ? 'text' : 'password'}
|
||||
value={formData.confirmPassword}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, confirmPassword: e.target.value }))}
|
||||
placeholder="请再次输入新密码"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPasswords(prev => ({ ...prev, confirm: !prev.confirm }))}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-text-tertiary hover:text-text-secondary"
|
||||
>
|
||||
{showPasswords.confirm ? <EyeOff size={18} /> : <Eye size={18} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 按钮 */}
|
||||
<div className="flex gap-3 pt-2">
|
||||
<Button variant="secondary" size="lg" className="flex-1" onClick={handleClose}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="lg"
|
||||
className="flex-1"
|
||||
onClick={handleSubmit}
|
||||
disabled={!formData.currentPassword || !formData.newPassword || !formData.confirmPassword || isSaving}
|
||||
>
|
||||
{isSaving ? '提交中...' : '确认修改'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center gap-4 py-6">
|
||||
<div className="w-16 h-16 rounded-full bg-accent-green/15 flex items-center justify-center">
|
||||
<Check size={32} className="text-accent-green" />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-lg font-semibold text-text-primary">密码修改成功</p>
|
||||
<p className="text-sm text-text-secondary mt-1">下次登录请使用新密码</p>
|
||||
</div>
|
||||
<Button variant="primary" size="lg" className="w-full mt-2" onClick={handleClose}>
|
||||
完成
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
// 设备管理弹窗
|
||||
function DeviceManageModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
}: {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}) {
|
||||
const [devices, setDevices] = useState(mockDevices)
|
||||
|
||||
const handleRemoveDevice = (deviceId: string) => {
|
||||
setDevices(prev => prev.filter(d => d.id !== deviceId))
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} title="登录设备管理">
|
||||
<div className="flex flex-col gap-4">
|
||||
<p className="text-sm text-text-secondary">管理已登录此账号的设备，可移除不再使用的设备以保障账户安全。</p>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
{devices.map((device) => (
|
||||
<div
|
||||
key={device.id}
|
||||
className="flex items-center justify-between p-4 rounded-xl bg-bg-elevated"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-bg-card flex items-center justify-center">
|
||||
<Smartphone size={20} className="text-text-secondary" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[15px] font-medium text-text-primary">{device.name}</span>
|
||||
{device.isCurrent && (
|
||||
<span className="px-2 py-0.5 rounded-full bg-accent-green/15 text-accent-green text-xs font-medium">
|
||||
当前
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-[13px] text-text-tertiary">
|
||||
{device.location} · {device.lastActive}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{!device.isCurrent && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveDevice(device.id)}
|
||||
className="text-accent-coral hover:text-accent-coral/80 text-sm font-medium"
|
||||
>
|
||||
移除
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Button variant="secondary" size="lg" className="w-full mt-2" onClick={onClose}>
|
||||
关闭
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default function AccountSettingsPage() {
|
||||
const router = useRouter()
|
||||
const [showPasswordModal, setShowPasswordModal] = useState(false)
|
||||
const [showDeviceModal, setShowDeviceModal] = useState(false)
|
||||
const [twoFactorEnabled, setTwoFactorEnabled] = useState(true)
|
||||
|
||||
return (
|
||||
<ResponsiveLayout role="creator">
|
||||
<div className="flex flex-col gap-6 h-full">
|
||||
{/* 顶部栏 */}
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
className="w-10 h-10 rounded-xl bg-bg-elevated flex items-center justify-center hover:bg-bg-elevated/80 transition-colors"
|
||||
>
|
||||
<ArrowLeft size={20} className="text-text-secondary" />
|
||||
</button>
|
||||
<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">管理密码和账户安全选项</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 内容区 */}
|
||||
<div className="flex flex-col gap-5 flex-1 min-h-0 overflow-y-auto lg:max-w-2xl">
|
||||
{/* 账户安全 */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<h2 className="text-base font-semibold text-text-primary px-1">账户安全</h2>
|
||||
<div className="bg-bg-card rounded-2xl card-shadow overflow-hidden">
|
||||
<SettingItem
|
||||
icon={Key}
|
||||
iconColor="text-accent-indigo"
|
||||
title="修改密码"
|
||||
description="定期更新密码以保障账户安全"
|
||||
onClick={() => setShowPasswordModal(true)}
|
||||
/>
|
||||
<SettingItem
|
||||
icon={ShieldCheck}
|
||||
iconColor="text-accent-green"
|
||||
title="两步验证"
|
||||
description="启用双因素认证增强安全性"
|
||||
badge={
|
||||
<span
|
||||
className={cn(
|
||||
'px-2 py-1 rounded text-xs font-medium',
|
||||
twoFactorEnabled
|
||||
? 'bg-accent-green/15 text-accent-green'
|
||||
: 'bg-bg-elevated text-text-tertiary'
|
||||
)}
|
||||
>
|
||||
{twoFactorEnabled ? '已开启' : '未开启'}
|
||||
</span>
|
||||
}
|
||||
onClick={() => setTwoFactorEnabled(!twoFactorEnabled)}
|
||||
/>
|
||||
<SettingItem
|
||||
icon={Smartphone}
|
||||
iconColor="text-accent-blue"
|
||||
title="登录设备管理"
|
||||
description="查看和管理已登录的设备"
|
||||
onClick={() => setShowDeviceModal(true)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 危险区域 */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<h2 className="text-base font-semibold text-accent-coral px-1">危险区域</h2>
|
||||
<div className="bg-bg-card rounded-2xl card-shadow p-5">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[15px] font-medium text-text-primary">注销账户</span>
|
||||
<span className="text-[13px] text-text-tertiary">
|
||||
永久删除您的账户和所有相关数据，此操作不可撤销
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="md"
|
||||
className="border-accent-coral text-accent-coral hover:bg-accent-coral/10 lg:flex-shrink-0"
|
||||
>
|
||||
注销账户
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 弹窗 */}
|
||||
<ChangePasswordModal isOpen={showPasswordModal} onClose={() => setShowPasswordModal(false)} />
|
||||
<DeviceManageModal isOpen={showDeviceModal} onClose={() => setShowDeviceModal(false)} />
|
||||
</ResponsiveLayout>
|
||||
)
|
||||
}
|
||||
279
frontend/app/creator/settings/notification/page.tsx
Normal file
279
frontend/app/creator/settings/notification/page.tsx
Normal file
@ -0,0 +1,279 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Mail,
|
||||
Bell,
|
||||
MessageSquare,
|
||||
Clock,
|
||||
AlertTriangle,
|
||||
} from 'lucide-react'
|
||||
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
// 开关组件
|
||||
function Toggle({
|
||||
enabled,
|
||||
onChange,
|
||||
}: {
|
||||
enabled: boolean
|
||||
onChange: (enabled: boolean) => void
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onChange(!enabled)}
|
||||
className={cn(
|
||||
'w-12 h-7 rounded-full p-0.5 transition-colors',
|
||||
enabled ? 'bg-accent-indigo' : 'bg-bg-elevated'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'w-6 h-6 rounded-full bg-white shadow-sm transition-transform',
|
||||
enabled ? 'translate-x-5' : 'translate-x-0'
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
// 设置项组件
|
||||
function NotificationSettingItem({
|
||||
icon: Icon,
|
||||
iconColor,
|
||||
title,
|
||||
description,
|
||||
enabled,
|
||||
onChange,
|
||||
isLast = false,
|
||||
}: {
|
||||
icon: React.ElementType
|
||||
iconColor: string
|
||||
title: string
|
||||
description: string
|
||||
enabled: boolean
|
||||
onChange: (enabled: boolean) => void
|
||||
isLast?: boolean
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-between py-5 px-5',
|
||||
!isLast && 'border-b border-border-subtle'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={cn('w-10 h-10 rounded-xl flex items-center justify-center', `${iconColor}/15`)}>
|
||||
<Icon size={20} className={iconColor} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[15px] font-medium text-text-primary">{title}</span>
|
||||
<span className="text-[13px] text-text-tertiary">{description}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Toggle enabled={enabled} onChange={onChange} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 时段选择组件
|
||||
function TimeRangeSelector({
|
||||
startTime,
|
||||
endTime,
|
||||
onChange,
|
||||
disabled,
|
||||
}: {
|
||||
startTime: string
|
||||
endTime: string
|
||||
onChange: (start: string, end: string) => void
|
||||
disabled: boolean
|
||||
}) {
|
||||
return (
|
||||
<div className={cn('flex items-center gap-3', disabled && 'opacity-50')}>
|
||||
<select
|
||||
value={startTime}
|
||||
onChange={(e) => onChange(e.target.value, endTime)}
|
||||
disabled={disabled}
|
||||
className="px-3 py-2 rounded-lg bg-bg-elevated border border-border-default text-text-primary text-sm focus:outline-none focus:border-accent-indigo"
|
||||
>
|
||||
{Array.from({ length: 24 }, (_, i) => (
|
||||
<option key={i} value={`${i.toString().padStart(2, '0')}:00`}>
|
||||
{i.toString().padStart(2, '0')}:00
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<span className="text-text-tertiary">至</span>
|
||||
<select
|
||||
value={endTime}
|
||||
onChange={(e) => onChange(startTime, e.target.value)}
|
||||
disabled={disabled}
|
||||
className="px-3 py-2 rounded-lg bg-bg-elevated border border-border-default text-text-primary text-sm focus:outline-none focus:border-accent-indigo"
|
||||
>
|
||||
{Array.from({ length: 24 }, (_, i) => (
|
||||
<option key={i} value={`${i.toString().padStart(2, '0')}:00`}>
|
||||
{i.toString().padStart(2, '0')}:00
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function NotificationSettingsPage() {
|
||||
const router = useRouter()
|
||||
|
||||
// 通知设置状态
|
||||
const [settings, setSettings] = useState({
|
||||
emailNotification: true,
|
||||
pushNotification: true,
|
||||
smsNotification: false,
|
||||
reviewResult: true,
|
||||
taskReminder: true,
|
||||
urgentAlert: true,
|
||||
quietMode: false,
|
||||
quietStart: '22:00',
|
||||
quietEnd: '08:00',
|
||||
})
|
||||
|
||||
const handleToggle = (key: keyof typeof settings) => {
|
||||
setSettings(prev => ({ ...prev, [key]: !prev[key] }))
|
||||
}
|
||||
|
||||
const handleTimeChange = (start: string, end: string) => {
|
||||
setSettings(prev => ({ ...prev, quietStart: start, quietEnd: end }))
|
||||
}
|
||||
|
||||
return (
|
||||
<ResponsiveLayout role="creator">
|
||||
<div className="flex flex-col gap-6 h-full">
|
||||
{/* 顶部栏 */}
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
className="w-10 h-10 rounded-xl bg-bg-elevated flex items-center justify-center hover:bg-bg-elevated/80 transition-colors"
|
||||
>
|
||||
<ArrowLeft size={20} className="text-text-secondary" />
|
||||
</button>
|
||||
<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">自定义通知方式和提醒偏好</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 内容区 */}
|
||||
<div className="flex flex-col gap-5 flex-1 min-h-0 overflow-y-auto lg:max-w-2xl">
|
||||
{/* 通知渠道 */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<h2 className="text-base font-semibold text-text-primary px-1">通知渠道</h2>
|
||||
<div className="bg-bg-card rounded-2xl card-shadow overflow-hidden">
|
||||
<NotificationSettingItem
|
||||
icon={Mail}
|
||||
iconColor="text-accent-indigo"
|
||||
title="邮件通知"
|
||||
description="接收审核结果和系统通知的邮件提醒"
|
||||
enabled={settings.emailNotification}
|
||||
onChange={() => handleToggle('emailNotification')}
|
||||
/>
|
||||
<NotificationSettingItem
|
||||
icon={Bell}
|
||||
iconColor="text-accent-blue"
|
||||
title="推送通知"
|
||||
description="接收移动端实时推送消息"
|
||||
enabled={settings.pushNotification}
|
||||
onChange={() => handleToggle('pushNotification')}
|
||||
/>
|
||||
<NotificationSettingItem
|
||||
icon={MessageSquare}
|
||||
iconColor="text-accent-green"
|
||||
title="短信通知"
|
||||
description="接收重要消息的短信提醒"
|
||||
enabled={settings.smsNotification}
|
||||
onChange={() => handleToggle('smsNotification')}
|
||||
isLast
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 通知类型 */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<h2 className="text-base font-semibold text-text-primary px-1">通知类型</h2>
|
||||
<div className="bg-bg-card rounded-2xl card-shadow overflow-hidden">
|
||||
<NotificationSettingItem
|
||||
icon={Bell}
|
||||
iconColor="text-accent-indigo"
|
||||
title="审核结果通知"
|
||||
description="视频审核通过或驳回时收到通知"
|
||||
enabled={settings.reviewResult}
|
||||
onChange={() => handleToggle('reviewResult')}
|
||||
/>
|
||||
<NotificationSettingItem
|
||||
icon={Clock}
|
||||
iconColor="text-accent-coral"
|
||||
title="任务提醒"
|
||||
description="任务截止日期临近时收到提醒"
|
||||
enabled={settings.taskReminder}
|
||||
onChange={() => handleToggle('taskReminder')}
|
||||
/>
|
||||
<NotificationSettingItem
|
||||
icon={AlertTriangle}
|
||||
iconColor="text-status-error"
|
||||
title="紧急通知"
|
||||
description="紧急事项和系统公告即时推送"
|
||||
enabled={settings.urgentAlert}
|
||||
onChange={() => handleToggle('urgentAlert')}
|
||||
isLast
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 免打扰模式 */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<h2 className="text-base font-semibold text-text-primary px-1">免打扰模式</h2>
|
||||
<div className="bg-bg-card rounded-2xl card-shadow p-5 flex flex-col gap-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[15px] font-medium text-text-primary">开启免打扰</span>
|
||||
<span className="text-[13px] text-text-tertiary">在指定时段内静音所有通知</span>
|
||||
</div>
|
||||
<Toggle enabled={settings.quietMode} onChange={() => handleToggle('quietMode')} />
|
||||
</div>
|
||||
|
||||
{/* 时间段选择 */}
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col lg:flex-row lg:items-center gap-3 pt-3 border-t border-border-subtle',
|
||||
!settings.quietMode && 'opacity-50'
|
||||
)}
|
||||
>
|
||||
<span className="text-sm text-text-secondary whitespace-nowrap">免打扰时段</span>
|
||||
<TimeRangeSelector
|
||||
startTime={settings.quietStart}
|
||||
endTime={settings.quietEnd}
|
||||
onChange={handleTimeChange}
|
||||
disabled={!settings.quietMode}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 提示卡片 */}
|
||||
<div className="bg-accent-indigo/10 rounded-2xl p-5 flex gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-accent-indigo/15 flex items-center justify-center flex-shrink-0">
|
||||
<Bell size={20} className="text-accent-indigo" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[15px] font-medium text-text-primary">关于通知</span>
|
||||
<span className="text-[13px] text-text-secondary leading-relaxed">
|
||||
建议保持审核结果和紧急通知开启，以便及时了解任务进度和重要信息。您可以随时调整通知偏好。
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ResponsiveLayout>
|
||||
)
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
461
frontend/app/creator/task/[id]/script/page.tsx
Normal file
461
frontend/app/creator/task/[id]/script/page.tsx
Normal file
@ -0,0 +1,461 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useRouter, useParams, useSearchParams } from 'next/navigation'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { SuccessTag, WarningTag, ErrorTag, PendingTag } from '@/components/ui/Tag'
|
||||
import { ReviewSteps, getReviewSteps } from '@/components/ui/ReviewSteps'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Upload,
|
||||
FileText,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
AlertTriangle,
|
||||
Clock,
|
||||
Loader2,
|
||||
RefreshCw,
|
||||
Eye,
|
||||
MessageSquare
|
||||
} from 'lucide-react'
|
||||
|
||||
// 模拟任务数据
|
||||
const mockTask = {
|
||||
id: 'task-001',
|
||||
projectName: 'XX品牌618推广',
|
||||
brandName: 'XX护肤品牌',
|
||||
deadline: '2026-06-18',
|
||||
scriptStatus: 'pending_upload', // pending_upload | ai_reviewing | ai_result | agent_reviewing | agent_rejected | brand_reviewing | brand_passed | brand_rejected
|
||||
scriptFile: null as string | null,
|
||||
aiResult: null as null | {
|
||||
score: number
|
||||
violations: Array<{ type: string; content: string; suggestion: string }>
|
||||
complianceChecks: Array<{ item: string; passed: boolean; note?: string }>
|
||||
},
|
||||
agencyReview: null as null | {
|
||||
result: 'approved' | 'rejected'
|
||||
comment: string
|
||||
reviewer: string
|
||||
time: string
|
||||
},
|
||||
brandReview: null as null | {
|
||||
result: 'approved' | 'rejected'
|
||||
comment: string
|
||||
reviewer: string
|
||||
time: string
|
||||
},
|
||||
}
|
||||
|
||||
// 根据状态获取模拟数据
|
||||
function getTaskByStatus(status: string) {
|
||||
const task = { ...mockTask, scriptStatus: status }
|
||||
|
||||
if (status === 'ai_result' || status === 'agent_reviewing' || status === 'agent_rejected' || status === 'brand_reviewing' || status === 'brand_passed' || status === 'brand_rejected') {
|
||||
task.scriptFile = '夏日护肤推广脚本.docx'
|
||||
task.aiResult = {
|
||||
score: 85,
|
||||
violations: [
|
||||
{ type: '违禁词', content: '神器', suggestion: '建议替换为"好物"或"必备品"' },
|
||||
],
|
||||
complianceChecks: [
|
||||
{ item: '品牌名称正确', passed: true },
|
||||
{ item: 'SPF标注准确', passed: true },
|
||||
{ item: '无绝对化用语', passed: false, note: '"超级好用"建议修改' },
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
if (status === 'agent_rejected') {
|
||||
task.agencyReview = {
|
||||
result: 'rejected',
|
||||
comment: '违禁词未修改，请修改后重新提交。',
|
||||
reviewer: '张经理',
|
||||
time: '2026-02-06 15:30',
|
||||
}
|
||||
}
|
||||
|
||||
if (status === 'brand_reviewing' || status === 'brand_passed' || status === 'brand_rejected') {
|
||||
task.agencyReview = {
|
||||
result: 'approved',
|
||||
comment: '脚本符合要求，建议通过。',
|
||||
reviewer: '张经理',
|
||||
time: '2026-02-06 15:30',
|
||||
}
|
||||
}
|
||||
|
||||
if (status === 'brand_passed') {
|
||||
task.brandReview = {
|
||||
result: 'approved',
|
||||
comment: '脚本通过终审，可以开始拍摄视频。',
|
||||
reviewer: '品牌方审核员',
|
||||
time: '2026-02-06 18:00',
|
||||
}
|
||||
}
|
||||
|
||||
if (status === 'brand_rejected') {
|
||||
task.brandReview = {
|
||||
result: 'rejected',
|
||||
comment: '产品卖点覆盖不完整，请补充后重新提交。',
|
||||
reviewer: '品牌方审核员',
|
||||
time: '2026-02-06 18:00',
|
||||
}
|
||||
}
|
||||
|
||||
return task
|
||||
}
|
||||
|
||||
function UploadSection({ onUpload }: { onUpload: () => void }) {
|
||||
const [file, setFile] = useState<File | null>(null)
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const selectedFile = e.target.files?.[0]
|
||||
if (selectedFile) {
|
||||
setFile(selectedFile)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Upload size={18} className="text-accent-indigo" />
|
||||
上传脚本
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="border-2 border-dashed border-border-subtle rounded-lg p-8 text-center hover:border-accent-indigo/50 transition-colors">
|
||||
{file ? (
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<FileText size={24} className="text-accent-indigo" />
|
||||
<span className="text-text-primary">{file.name}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFile(null)}
|
||||
className="p-1 hover:bg-bg-elevated rounded-full"
|
||||
>
|
||||
<XCircle size={16} className="text-text-tertiary" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<label className="cursor-pointer">
|
||||
<Upload size={32} className="mx-auto text-text-tertiary mb-3" />
|
||||
<p className="text-text-secondary mb-1">点击或拖拽上传脚本文件</p>
|
||||
<p className="text-xs text-text-tertiary">支持 Word、PDF、TXT 格式</p>
|
||||
<input
|
||||
type="file"
|
||||
accept=".doc,.docx,.pdf,.txt"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
<Button onClick={onUpload} disabled={!file} fullWidth>
|
||||
提交脚本
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function AIReviewingSection() {
|
||||
const [progress, setProgress] = useState(0)
|
||||
const [logs, setLogs] = useState<string[]>(['开始解析脚本文件...'])
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setProgress(prev => {
|
||||
if (prev >= 100) {
|
||||
clearInterval(timer)
|
||||
return 100
|
||||
}
|
||||
return prev + 10
|
||||
})
|
||||
}, 500)
|
||||
|
||||
const logTimer = setTimeout(() => {
|
||||
setLogs(prev => [...prev, '正在提取文本内容...'])
|
||||
}, 1000)
|
||||
|
||||
const logTimer2 = setTimeout(() => {
|
||||
setLogs(prev => [...prev, '正在进行违禁词检测...'])
|
||||
}, 2000)
|
||||
|
||||
const logTimer3 = setTimeout(() => {
|
||||
setLogs(prev => [...prev, '正在分析卖点覆盖...'])
|
||||
}, 3000)
|
||||
|
||||
return () => {
|
||||
clearInterval(timer)
|
||||
clearTimeout(logTimer)
|
||||
clearTimeout(logTimer2)
|
||||
clearTimeout(logTimer3)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="py-8 text-center">
|
||||
<Loader2 size={48} className="mx-auto text-accent-indigo mb-4 animate-spin" />
|
||||
<h3 className="text-lg font-medium text-text-primary mb-2">AI 正在审核您的脚本</h3>
|
||||
<p className="text-text-secondary mb-4">请稍候，预计需要 1-2 分钟</p>
|
||||
<div className="w-full max-w-md mx-auto">
|
||||
<div className="h-2 bg-bg-elevated rounded-full overflow-hidden mb-2">
|
||||
<div className="h-full bg-accent-indigo transition-all" style={{ width: `${progress}%` }} />
|
||||
</div>
|
||||
<p className="text-sm text-text-tertiary">{progress}%</p>
|
||||
</div>
|
||||
<div className="mt-6 p-4 bg-bg-elevated rounded-lg text-left max-w-md mx-auto">
|
||||
<p className="text-xs text-text-tertiary mb-2">处理日志</p>
|
||||
{logs.map((log, idx) => (
|
||||
<p key={idx} className="text-sm text-text-secondary">{log}</p>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function AIResultSection({ task }: { task: ReturnType<typeof getTaskByStatus> }) {
|
||||
if (!task.aiResult) return null
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
<span className="flex items-center gap-2">
|
||||
<CheckCircle size={18} className="text-accent-green" />
|
||||
AI 审核结果
|
||||
</span>
|
||||
<span className={`text-xl font-bold ${task.aiResult.score >= 85 ? 'text-accent-green' : task.aiResult.score >= 70 ? 'text-yellow-400' : 'text-accent-coral'}`}>
|
||||
{task.aiResult.score}分
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* 违规检测 */}
|
||||
{task.aiResult.violations.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2">
|
||||
<AlertTriangle size={14} className="text-orange-500" />
|
||||
违规检测 ({task.aiResult.violations.length})
|
||||
</h4>
|
||||
{task.aiResult.violations.map((v, idx) => (
|
||||
<div key={idx} className="p-3 bg-orange-500/10 rounded-lg border border-orange-500/30 mb-2">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<WarningTag>{v.type}</WarningTag>
|
||||
</div>
|
||||
<p className="text-sm text-text-primary">「{v.content}」</p>
|
||||
<p className="text-xs text-accent-indigo mt-1">{v.suggestion}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 合规检查 */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-text-primary mb-2">合规检查</h4>
|
||||
<div className="space-y-2">
|
||||
{task.aiResult.complianceChecks.map((check, idx) => (
|
||||
<div key={idx} className="flex items-start gap-2 p-2 rounded-lg bg-bg-elevated">
|
||||
{check.passed ? (
|
||||
<CheckCircle size={16} className="text-accent-green flex-shrink-0 mt-0.5" />
|
||||
) : (
|
||||
<XCircle size={16} className="text-accent-coral flex-shrink-0 mt-0.5" />
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<span className="text-sm text-text-primary">{check.item}</span>
|
||||
{check.note && <p className="text-xs text-text-tertiary mt-0.5">{check.note}</p>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function ReviewFeedbackSection({ review, type }: { review: NonNullable<typeof mockTask.agencyReview>; type: 'agency' | 'brand' }) {
|
||||
const isApproved = review.result === 'approved'
|
||||
const title = type === 'agency' ? '代理商审核意见' : '品牌方终审意见'
|
||||
|
||||
return (
|
||||
<Card className={isApproved ? 'border-accent-green/30' : 'border-accent-coral/30'}>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
{isApproved ? (
|
||||
<CheckCircle size={18} className="text-accent-green" />
|
||||
) : (
|
||||
<XCircle size={18} className="text-accent-coral" />
|
||||
)}
|
||||
{title}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="font-medium text-text-primary">{review.reviewer}</span>
|
||||
{isApproved ? <SuccessTag>通过</SuccessTag> : <ErrorTag>驳回</ErrorTag>}
|
||||
</div>
|
||||
<p className="text-text-secondary">{review.comment}</p>
|
||||
<p className="text-xs text-text-tertiary mt-2">{review.time}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function WaitingSection({ message }: { message: string }) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="py-8 text-center">
|
||||
<Clock size={48} className="mx-auto text-accent-indigo mb-4" />
|
||||
<h3 className="text-lg font-medium text-text-primary mb-2">{message}</h3>
|
||||
<p className="text-text-secondary">请耐心等待，审核结果将通过消息通知您</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function SuccessSection({ onContinue }: { onContinue: () => void }) {
|
||||
return (
|
||||
<Card className="border-accent-green/30">
|
||||
<CardContent className="py-8 text-center">
|
||||
<CheckCircle size={48} className="mx-auto text-accent-green mb-4" />
|
||||
<h3 className="text-lg font-medium text-text-primary mb-2">脚本审核通过！</h3>
|
||||
<p className="text-text-secondary mb-6">您可以开始拍摄视频了</p>
|
||||
<Button onClick={onContinue}>
|
||||
上传视频
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default function CreatorScriptPage() {
|
||||
const router = useRouter()
|
||||
const params = useParams()
|
||||
const searchParams = useSearchParams()
|
||||
const status = searchParams.get('status') || 'pending_upload'
|
||||
|
||||
const [task, setTask] = useState(getTaskByStatus(status))
|
||||
|
||||
// 模拟状态切换
|
||||
const simulateUpload = () => {
|
||||
setTask(getTaskByStatus('ai_reviewing'))
|
||||
setTimeout(() => {
|
||||
setTask(getTaskByStatus('ai_result'))
|
||||
}, 4000)
|
||||
}
|
||||
|
||||
const handleResubmit = () => {
|
||||
setTask(getTaskByStatus('pending_upload'))
|
||||
}
|
||||
|
||||
const handleContinueToVideo = () => {
|
||||
router.push(`/creator/task/${params.id}/video`)
|
||||
}
|
||||
|
||||
const getStatusDisplay = () => {
|
||||
switch (task.scriptStatus) {
|
||||
case 'pending_upload': return '待上传脚本'
|
||||
case 'ai_reviewing': return 'AI 审核中'
|
||||
case 'ai_result': return 'AI 审核完成'
|
||||
case 'agent_reviewing': return '代理商审核中'
|
||||
case 'agent_rejected': return '代理商驳回'
|
||||
case 'brand_reviewing': return '品牌方终审中'
|
||||
case 'brand_passed': return '审核通过'
|
||||
case 'brand_rejected': return '品牌方驳回'
|
||||
default: return '未知状态'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-2xl mx-auto">
|
||||
{/* 顶部导航 */}
|
||||
<div className="flex items-center gap-4">
|
||||
<button type="button" onClick={() => router.back()} className="p-2 hover:bg-bg-elevated rounded-full">
|
||||
<ArrowLeft size={20} className="text-text-primary" />
|
||||
</button>
|
||||
<div className="flex-1">
|
||||
<h1 className="text-xl font-bold text-text-primary">{task.projectName}</h1>
|
||||
<p className="text-sm text-text-secondary">脚本阶段 · {getStatusDisplay()}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 审核流程进度条 */}
|
||||
<Card>
|
||||
<CardContent className="py-4">
|
||||
<ReviewSteps steps={getReviewSteps(task.scriptStatus)} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 根据状态显示不同内容 */}
|
||||
{task.scriptStatus === 'pending_upload' && (
|
||||
<UploadSection onUpload={simulateUpload} />
|
||||
)}
|
||||
|
||||
{task.scriptStatus === 'ai_reviewing' && (
|
||||
<AIReviewingSection />
|
||||
)}
|
||||
|
||||
{task.scriptStatus === 'ai_result' && (
|
||||
<>
|
||||
<AIResultSection task={task} />
|
||||
<WaitingSection message="等待代理商审核" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{task.scriptStatus === 'agent_reviewing' && (
|
||||
<>
|
||||
<AIResultSection task={task} />
|
||||
<WaitingSection message="等待代理商审核" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{task.scriptStatus === 'agent_rejected' && task.agencyReview && (
|
||||
<>
|
||||
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
|
||||
<AIResultSection task={task} />
|
||||
<div className="flex gap-3">
|
||||
<Button variant="secondary" onClick={handleResubmit} fullWidth>
|
||||
<RefreshCw size={16} />
|
||||
重新上传
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{task.scriptStatus === 'brand_reviewing' && task.agencyReview && (
|
||||
<>
|
||||
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
|
||||
<AIResultSection task={task} />
|
||||
<WaitingSection message="等待品牌方终审" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{task.scriptStatus === 'brand_passed' && task.agencyReview && task.brandReview && (
|
||||
<>
|
||||
<SuccessSection onContinue={handleContinueToVideo} />
|
||||
<ReviewFeedbackSection review={task.brandReview} type="brand" />
|
||||
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
|
||||
<AIResultSection task={task} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{task.scriptStatus === 'brand_rejected' && task.agencyReview && task.brandReview && (
|
||||
<>
|
||||
<ReviewFeedbackSection review={task.brandReview} type="brand" />
|
||||
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
|
||||
<AIResultSection task={task} />
|
||||
<div className="flex gap-3">
|
||||
<Button variant="secondary" onClick={handleResubmit} fullWidth>
|
||||
<RefreshCw size={16} />
|
||||
重新上传
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
534
frontend/app/creator/task/[id]/video/page.tsx
Normal file
534
frontend/app/creator/task/[id]/video/page.tsx
Normal file
@ -0,0 +1,534 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useRouter, useParams, useSearchParams } from 'next/navigation'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { SuccessTag, WarningTag, ErrorTag, PendingTag } from '@/components/ui/Tag'
|
||||
import { ReviewSteps, getReviewSteps } from '@/components/ui/ReviewSteps'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Upload,
|
||||
Video,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
AlertTriangle,
|
||||
Clock,
|
||||
Loader2,
|
||||
RefreshCw,
|
||||
Play,
|
||||
Radio,
|
||||
Shield
|
||||
} from 'lucide-react'
|
||||
|
||||
// 模拟任务数据
|
||||
const mockTask = {
|
||||
id: 'task-001',
|
||||
projectName: 'XX品牌618推广',
|
||||
brandName: 'XX护肤品牌',
|
||||
deadline: '2026-06-18',
|
||||
videoStatus: 'pending_upload', // pending_upload | ai_reviewing | ai_result | agent_reviewing | agent_rejected | brand_reviewing | brand_passed | brand_rejected
|
||||
videoFile: null as string | null,
|
||||
aiResult: null as null | {
|
||||
score: number
|
||||
hardViolations: Array<{ type: string; content: string; timestamp: number; suggestion: string }>
|
||||
sentimentWarnings: Array<{ type: string; content: string; timestamp: number }>
|
||||
sellingPointsCovered: Array<{ point: string; covered: boolean; timestamp?: number }>
|
||||
},
|
||||
agencyReview: null as null | {
|
||||
result: 'approved' | 'rejected'
|
||||
comment: string
|
||||
reviewer: string
|
||||
time: string
|
||||
},
|
||||
brandReview: null as null | {
|
||||
result: 'approved' | 'rejected'
|
||||
comment: string
|
||||
reviewer: string
|
||||
time: string
|
||||
},
|
||||
}
|
||||
|
||||
// 根据状态获取模拟数据
|
||||
function getTaskByStatus(status: string) {
|
||||
const task = { ...mockTask, videoStatus: status }
|
||||
|
||||
if (status === 'ai_result' || status === 'agent_reviewing' || status === 'agent_rejected' || status === 'brand_reviewing' || status === 'brand_passed' || status === 'brand_rejected') {
|
||||
task.videoFile = '夏日护肤推广.mp4'
|
||||
task.aiResult = {
|
||||
score: 85,
|
||||
hardViolations: [
|
||||
{ type: '违禁词', content: '效果最好', timestamp: 15.5, suggestion: '建议替换为"效果显著"' },
|
||||
],
|
||||
sentimentWarnings: [
|
||||
{ type: '表情预警', content: '表情过于夸张', timestamp: 42.0 },
|
||||
],
|
||||
sellingPointsCovered: [
|
||||
{ point: 'SPF50+ PA++++', covered: true, timestamp: 25.0 },
|
||||
{ point: '轻薄质地', covered: true, timestamp: 38.0 },
|
||||
{ point: '不油腻', covered: true, timestamp: 52.0 },
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
if (status === 'agent_rejected') {
|
||||
task.agencyReview = {
|
||||
result: 'rejected',
|
||||
comment: '视频中有竞品Logo露出，请重新拍摄。',
|
||||
reviewer: '张经理',
|
||||
time: '2026-02-06 16:30',
|
||||
}
|
||||
}
|
||||
|
||||
if (status === 'brand_reviewing' || status === 'brand_passed' || status === 'brand_rejected') {
|
||||
task.agencyReview = {
|
||||
result: 'approved',
|
||||
comment: '视频质量良好，建议通过。',
|
||||
reviewer: '张经理',
|
||||
time: '2026-02-06 16:30',
|
||||
}
|
||||
}
|
||||
|
||||
if (status === 'brand_passed') {
|
||||
task.brandReview = {
|
||||
result: 'approved',
|
||||
comment: '视频通过终审，可以发布。',
|
||||
reviewer: '品牌方审核员',
|
||||
time: '2026-02-06 19:00',
|
||||
}
|
||||
}
|
||||
|
||||
if (status === 'brand_rejected') {
|
||||
task.brandReview = {
|
||||
result: 'rejected',
|
||||
comment: '产品特写时间不足，请补拍。',
|
||||
reviewer: '品牌方审核员',
|
||||
time: '2026-02-06 19:00',
|
||||
}
|
||||
}
|
||||
|
||||
return task
|
||||
}
|
||||
|
||||
function formatTimestamp(seconds: number): string {
|
||||
const mins = Math.floor(seconds / 60)
|
||||
const secs = Math.floor(seconds % 60)
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`
|
||||
}
|
||||
|
||||
function UploadSection({ onUpload }: { onUpload: () => void }) {
|
||||
const [file, setFile] = useState<File | null>(null)
|
||||
const [uploadProgress, setUploadProgress] = useState(0)
|
||||
const [isUploading, setIsUploading] = useState(false)
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const selectedFile = e.target.files?.[0]
|
||||
if (selectedFile) {
|
||||
setFile(selectedFile)
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpload = () => {
|
||||
setIsUploading(true)
|
||||
const timer = setInterval(() => {
|
||||
setUploadProgress(prev => {
|
||||
if (prev >= 100) {
|
||||
clearInterval(timer)
|
||||
setTimeout(onUpload, 500)
|
||||
return 100
|
||||
}
|
||||
return prev + 10
|
||||
})
|
||||
}, 200)
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Upload size={18} className="text-purple-400" />
|
||||
上传视频
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="border-2 border-dashed border-border-subtle rounded-lg p-8 text-center hover:border-accent-indigo/50 transition-colors">
|
||||
{file ? (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<Video size={24} className="text-purple-400" />
|
||||
<span className="text-text-primary">{file.name}</span>
|
||||
{!isUploading && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFile(null)}
|
||||
className="p-1 hover:bg-bg-elevated rounded-full"
|
||||
>
|
||||
<XCircle size={16} className="text-text-tertiary" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{isUploading && (
|
||||
<div className="w-full max-w-xs mx-auto">
|
||||
<div className="h-2 bg-bg-elevated rounded-full overflow-hidden mb-2">
|
||||
<div className="h-full bg-accent-indigo transition-all" style={{ width: `${uploadProgress}%` }} />
|
||||
</div>
|
||||
<p className="text-sm text-text-tertiary">上传中 {uploadProgress}%</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<label className="cursor-pointer">
|
||||
<Upload size={32} className="mx-auto text-text-tertiary mb-3" />
|
||||
<p className="text-text-secondary mb-1">点击或拖拽上传视频文件</p>
|
||||
<p className="text-xs text-text-tertiary">支持 MP4、MOV、AVI 格式，最大 500MB</p>
|
||||
<input
|
||||
type="file"
|
||||
accept="video/*"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
<Button onClick={handleUpload} disabled={!file || isUploading} fullWidth>
|
||||
{isUploading ? '上传中...' : '提交视频'}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function AIReviewingSection() {
|
||||
const [progress, setProgress] = useState(0)
|
||||
const [currentStep, setCurrentStep] = useState('正在解析视频...')
|
||||
|
||||
useEffect(() => {
|
||||
const steps = [
|
||||
'正在解析视频...',
|
||||
'正在提取音频转文字...',
|
||||
'正在分析画面内容...',
|
||||
'正在检测违禁内容...',
|
||||
'正在分析卖点覆盖...',
|
||||
'正在生成审核报告...',
|
||||
]
|
||||
let stepIndex = 0
|
||||
|
||||
const timer = setInterval(() => {
|
||||
setProgress(prev => {
|
||||
if (prev >= 100) {
|
||||
clearInterval(timer)
|
||||
return 100
|
||||
}
|
||||
return prev + 5
|
||||
})
|
||||
}, 300)
|
||||
|
||||
const stepTimer = setInterval(() => {
|
||||
stepIndex = (stepIndex + 1) % steps.length
|
||||
setCurrentStep(steps[stepIndex])
|
||||
}, 1500)
|
||||
|
||||
return () => {
|
||||
clearInterval(timer)
|
||||
clearInterval(stepTimer)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="py-8 text-center">
|
||||
<Loader2 size={48} className="mx-auto text-purple-400 mb-4 animate-spin" />
|
||||
<h3 className="text-lg font-medium text-text-primary mb-2">AI 正在审核您的视频</h3>
|
||||
<p className="text-text-secondary mb-4">请稍候，视频审核可能需要 3-5 分钟</p>
|
||||
<div className="w-full max-w-md mx-auto">
|
||||
<div className="h-2 bg-bg-elevated rounded-full overflow-hidden mb-2">
|
||||
<div className="h-full bg-purple-400 transition-all" style={{ width: `${progress}%` }} />
|
||||
</div>
|
||||
<p className="text-sm text-text-tertiary">{progress}%</p>
|
||||
</div>
|
||||
<div className="mt-4 p-3 bg-bg-elevated rounded-lg max-w-md mx-auto">
|
||||
<p className="text-sm text-text-secondary">{currentStep}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function AIResultSection({ task }: { task: ReturnType<typeof getTaskByStatus> }) {
|
||||
if (!task.aiResult) return null
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* AI 评分 */}
|
||||
<Card>
|
||||
<CardContent className="py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-text-secondary">AI 综合评分</span>
|
||||
<span className={`text-3xl font-bold ${task.aiResult.score >= 85 ? 'text-accent-green' : task.aiResult.score >= 70 ? 'text-yellow-400' : 'text-accent-coral'}`}>
|
||||
{task.aiResult.score}
|
||||
</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 硬性合规 */}
|
||||
{task.aiResult.hardViolations.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Shield size={16} className="text-red-500" />
|
||||
硬性合规 ({task.aiResult.hardViolations.length})
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
{task.aiResult.hardViolations.map((v, idx) => (
|
||||
<div key={idx} className="p-3 bg-accent-coral/10 rounded-lg border border-accent-coral/30">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<ErrorTag>{v.type}</ErrorTag>
|
||||
<span className="text-xs text-text-tertiary">{formatTimestamp(v.timestamp)}</span>
|
||||
</div>
|
||||
<p className="text-sm text-text-primary">「{v.content}」</p>
|
||||
<p className="text-xs text-accent-indigo mt-1">{v.suggestion}</p>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 舆情雷达 */}
|
||||
{task.aiResult.sentimentWarnings.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Radio size={16} className="text-orange-500" />
|
||||
舆情雷达（仅提示）
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
{task.aiResult.sentimentWarnings.map((w, idx) => (
|
||||
<div key={idx} className="p-3 bg-orange-500/10 rounded-lg border border-orange-500/30">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<WarningTag>{w.type}</WarningTag>
|
||||
<span className="text-xs text-text-tertiary">{formatTimestamp(w.timestamp)}</span>
|
||||
</div>
|
||||
<p className="text-sm text-orange-400">{w.content}</p>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 卖点覆盖 */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<CheckCircle size={16} className="text-accent-green" />
|
||||
卖点覆盖
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
{task.aiResult.sellingPointsCovered.map((sp, idx) => (
|
||||
<div key={idx} className="flex items-center justify-between p-2 rounded-lg bg-bg-elevated">
|
||||
<div className="flex items-center gap-2">
|
||||
{sp.covered ? (
|
||||
<CheckCircle size={16} className="text-accent-green" />
|
||||
) : (
|
||||
<XCircle size={16} className="text-accent-coral" />
|
||||
)}
|
||||
<span className="text-sm text-text-primary">{sp.point}</span>
|
||||
</div>
|
||||
{sp.covered && sp.timestamp && (
|
||||
<span className="text-xs text-text-tertiary">{formatTimestamp(sp.timestamp)}</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ReviewFeedbackSection({ review, type }: { review: NonNullable<typeof mockTask.agencyReview>; type: 'agency' | 'brand' }) {
|
||||
const isApproved = review.result === 'approved'
|
||||
const title = type === 'agency' ? '代理商审核意见' : '品牌方终审意见'
|
||||
|
||||
return (
|
||||
<Card className={isApproved ? 'border-accent-green/30' : 'border-accent-coral/30'}>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
{isApproved ? (
|
||||
<CheckCircle size={18} className="text-accent-green" />
|
||||
) : (
|
||||
<XCircle size={18} className="text-accent-coral" />
|
||||
)}
|
||||
{title}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="font-medium text-text-primary">{review.reviewer}</span>
|
||||
{isApproved ? <SuccessTag>通过</SuccessTag> : <ErrorTag>驳回</ErrorTag>}
|
||||
</div>
|
||||
<p className="text-text-secondary">{review.comment}</p>
|
||||
<p className="text-xs text-text-tertiary mt-2">{review.time}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function WaitingSection({ message }: { message: string }) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="py-8 text-center">
|
||||
<Clock size={48} className="mx-auto text-accent-indigo mb-4" />
|
||||
<h3 className="text-lg font-medium text-text-primary mb-2">{message}</h3>
|
||||
<p className="text-text-secondary">请耐心等待，审核结果将通过消息通知您</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function SuccessSection() {
|
||||
return (
|
||||
<Card className="border-accent-green/30">
|
||||
<CardContent className="py-8 text-center">
|
||||
<CheckCircle size={64} className="mx-auto text-accent-green mb-4" />
|
||||
<h3 className="text-xl font-bold text-text-primary mb-2">🎉 视频审核通过！</h3>
|
||||
<p className="text-text-secondary mb-6">恭喜您，视频已通过所有审核，可以发布了</p>
|
||||
<div className="flex justify-center gap-3">
|
||||
<Button variant="secondary">
|
||||
<Play size={16} />
|
||||
预览视频
|
||||
</Button>
|
||||
<Button>
|
||||
分享链接
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default function CreatorVideoPage() {
|
||||
const router = useRouter()
|
||||
const params = useParams()
|
||||
const searchParams = useSearchParams()
|
||||
const status = searchParams.get('status') || 'pending_upload'
|
||||
|
||||
const [task, setTask] = useState(getTaskByStatus(status))
|
||||
|
||||
// 模拟状态切换
|
||||
const simulateUpload = () => {
|
||||
setTask(getTaskByStatus('ai_reviewing'))
|
||||
setTimeout(() => {
|
||||
setTask(getTaskByStatus('ai_result'))
|
||||
}, 5000)
|
||||
}
|
||||
|
||||
const handleResubmit = () => {
|
||||
setTask(getTaskByStatus('pending_upload'))
|
||||
}
|
||||
|
||||
const getStatusDisplay = () => {
|
||||
switch (task.videoStatus) {
|
||||
case 'pending_upload': return '待上传视频'
|
||||
case 'ai_reviewing': return 'AI 审核中'
|
||||
case 'ai_result': return 'AI 审核完成'
|
||||
case 'agent_reviewing': return '代理商审核中'
|
||||
case 'agent_rejected': return '代理商驳回'
|
||||
case 'brand_reviewing': return '品牌方终审中'
|
||||
case 'brand_passed': return '审核通过'
|
||||
case 'brand_rejected': return '品牌方驳回'
|
||||
default: return '未知状态'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-2xl mx-auto">
|
||||
{/* 顶部导航 */}
|
||||
<div className="flex items-center gap-4">
|
||||
<button type="button" onClick={() => router.back()} className="p-2 hover:bg-bg-elevated rounded-full">
|
||||
<ArrowLeft size={20} className="text-text-primary" />
|
||||
</button>
|
||||
<div className="flex-1">
|
||||
<h1 className="text-xl font-bold text-text-primary">{task.projectName}</h1>
|
||||
<p className="text-sm text-text-secondary">视频阶段 · {getStatusDisplay()}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 审核流程进度条 */}
|
||||
<Card>
|
||||
<CardContent className="py-4">
|
||||
<ReviewSteps steps={getReviewSteps(task.videoStatus)} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 根据状态显示不同内容 */}
|
||||
{task.videoStatus === 'pending_upload' && (
|
||||
<UploadSection onUpload={simulateUpload} />
|
||||
)}
|
||||
|
||||
{task.videoStatus === 'ai_reviewing' && (
|
||||
<AIReviewingSection />
|
||||
)}
|
||||
|
||||
{task.videoStatus === 'ai_result' && (
|
||||
<>
|
||||
<AIResultSection task={task} />
|
||||
<WaitingSection message="等待代理商审核" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{task.videoStatus === 'agent_reviewing' && (
|
||||
<>
|
||||
<AIResultSection task={task} />
|
||||
<WaitingSection message="等待代理商审核" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{task.videoStatus === 'agent_rejected' && task.agencyReview && (
|
||||
<>
|
||||
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
|
||||
<AIResultSection task={task} />
|
||||
<div className="flex gap-3">
|
||||
<Button variant="secondary" onClick={handleResubmit} fullWidth>
|
||||
<RefreshCw size={16} />
|
||||
重新上传
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{task.videoStatus === 'brand_reviewing' && task.agencyReview && (
|
||||
<>
|
||||
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
|
||||
<AIResultSection task={task} />
|
||||
<WaitingSection message="等待品牌方终审" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{task.videoStatus === 'brand_passed' && task.agencyReview && task.brandReview && (
|
||||
<>
|
||||
<SuccessSection />
|
||||
<ReviewFeedbackSection review={task.brandReview} type="brand" />
|
||||
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
|
||||
<AIResultSection task={task} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{task.videoStatus === 'brand_rejected' && task.agencyReview && task.brandReview && (
|
||||
<>
|
||||
<ReviewFeedbackSection review={task.brandReview} type="brand" />
|
||||
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
|
||||
<AIResultSection task={task} />
|
||||
<div className="flex gap-3">
|
||||
<Button variant="secondary" onClick={handleResubmit} fullWidth>
|
||||
<RefreshCw size={16} />
|
||||
重新上传
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,44 +1,96 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { MobileLayout } from './MobileLayout'
|
||||
import { DesktopLayout } from './DesktopLayout'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Menu, X } from 'lucide-react'
|
||||
import { Sidebar } from '../navigation/Sidebar'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface ResponsiveLayoutProps {
|
||||
children: React.ReactNode
|
||||
role?: 'creator' | 'agency' | 'brand'
|
||||
showBottomNav?: boolean
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function ResponsiveLayout({
|
||||
children,
|
||||
role = 'creator',
|
||||
showBottomNav = true,
|
||||
className = '',
|
||||
}: ResponsiveLayoutProps) {
|
||||
const [isMobile, setIsMobile] = useState(true)
|
||||
const [isMobile, setIsMobile] = useState(false)
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const checkMobile = () => {
|
||||
setIsMobile(window.innerWidth < 1024)
|
||||
const mobile = window.innerWidth < 1024
|
||||
setIsMobile(mobile)
|
||||
// 大屏幕自动关闭抽屉
|
||||
if (!mobile) {
|
||||
setSidebarOpen(false)
|
||||
}
|
||||
}
|
||||
|
||||
checkMobile()
|
||||
window.addEventListener('resize', checkMobile)
|
||||
return () => window.removeEventListener('resize', checkMobile)
|
||||
}, [])
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<MobileLayout role={role} showBottomNav={showBottomNav}>
|
||||
{children}
|
||||
</MobileLayout>
|
||||
)
|
||||
}
|
||||
// 点击遮罩关闭侧边栏
|
||||
const closeSidebar = () => setSidebarOpen(false)
|
||||
|
||||
return (
|
||||
<DesktopLayout role={role}>
|
||||
{children}
|
||||
</DesktopLayout>
|
||||
<div className={cn('min-h-screen bg-bg-page', className)}>
|
||||
{/* 移动端：汉堡菜单按钮 */}
|
||||
{isMobile && !sidebarOpen && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSidebarOpen(true)}
|
||||
className="fixed top-4 left-4 z-50 w-10 h-10 rounded-xl bg-bg-card flex items-center justify-center card-shadow"
|
||||
>
|
||||
<Menu className="w-5 h-5 text-text-primary" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* 移动端：遮罩层 */}
|
||||
{isMobile && sidebarOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-40 bg-black/50 transition-opacity"
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 侧边栏 */}
|
||||
<div
|
||||
className={cn(
|
||||
'fixed left-0 top-0 bottom-0 z-sidebar transition-transform duration-300',
|
||||
isMobile
|
||||
? sidebarOpen
|
||||
? 'translate-x-0'
|
||||
: '-translate-x-full'
|
||||
: 'translate-x-0'
|
||||
)}
|
||||
>
|
||||
<Sidebar role={role} />
|
||||
{/* 移动端：关闭按钮 */}
|
||||
{isMobile && sidebarOpen && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeSidebar}
|
||||
className="absolute top-4 right-4 w-8 h-8 rounded-lg bg-bg-elevated flex items-center justify-center"
|
||||
>
|
||||
<X className="w-4 h-4 text-text-secondary" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 主内容区 */}
|
||||
<main
|
||||
className={cn(
|
||||
'min-h-screen transition-all duration-300',
|
||||
isMobile ? 'ml-0 pt-16 px-4 pb-6' : 'ml-[260px] p-8'
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,22 @@
|
||||
|
||||
import Link from 'next/link'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { ShieldCheck, ListTodo, User, LayoutDashboard, Scan, BarChart3, Settings, FileText, Users, Bell } from 'lucide-react'
|
||||
import {
|
||||
ShieldCheck,
|
||||
ListTodo,
|
||||
User,
|
||||
LayoutDashboard,
|
||||
Scan,
|
||||
BarChart3,
|
||||
Settings,
|
||||
FileText,
|
||||
Users,
|
||||
Bell,
|
||||
FolderKanban,
|
||||
PlusCircle,
|
||||
ClipboardCheck,
|
||||
Bot
|
||||
} from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface NavItem {
|
||||
@ -21,19 +36,22 @@ const creatorNavItems: NavItem[] = [
|
||||
// 代理商端导航项
|
||||
const agencyNavItems: NavItem[] = [
|
||||
{ icon: LayoutDashboard, label: '工作台', href: '/agency' },
|
||||
{ icon: Scan, label: '审核决策', href: '/agency/review' },
|
||||
{ icon: Scan, label: '审核台', href: '/agency/review' },
|
||||
{ icon: FileText, label: 'Brief 配置', href: '/agency/briefs' },
|
||||
{ icon: Users, label: '达人管理', href: '/agency/creators' },
|
||||
{ icon: BarChart3, label: '数据报表', href: '/agency/reports' },
|
||||
{ icon: Bell, label: '消息中心', href: '/agency/messages' },
|
||||
]
|
||||
|
||||
// 品牌方端导航项
|
||||
const brandNavItems: NavItem[] = [
|
||||
{ icon: LayoutDashboard, label: '数据看板', href: '/brand' },
|
||||
{ icon: Settings, label: 'AI 配置', href: '/brand/ai-config' },
|
||||
{ icon: FileText, label: '规则配置', href: '/brand/rules' },
|
||||
{ icon: FileCheck, label: '终审台', href: '/brand/final-review' },
|
||||
{ icon: FolderKanban, label: '项目看板', href: '/brand' },
|
||||
{ icon: PlusCircle, label: '创建项目', href: '/brand/projects/create' },
|
||||
{ icon: ClipboardCheck, label: '终审台', href: '/brand/review' },
|
||||
{ icon: Users, label: '代理商管理', href: '/brand/agencies' },
|
||||
{ icon: FileText, label: '规则配置', href: '/brand/rules' },
|
||||
{ icon: Bot, label: 'AI 配置', href: '/brand/ai-config' },
|
||||
{ icon: Settings, label: '系统设置', href: '/brand/settings' },
|
||||
]
|
||||
|
||||
interface SidebarProps {
|
||||
|
||||
@ -149,7 +149,55 @@ export function getReviewSteps(taskStatus: string): ReviewStep[] {
|
||||
}
|
||||
}
|
||||
|
||||
// 代理商/品牌方视角的审核步骤 (包含品牌终审)
|
||||
// 品牌方终审视角的审核步骤
|
||||
export function getBrandReviewSteps(taskStatus: string): ReviewStep[] {
|
||||
switch (taskStatus) {
|
||||
case 'ai_reviewing':
|
||||
return [
|
||||
{ key: 'submitted', label: '已提交', status: 'done' },
|
||||
{ key: 'ai_review', label: 'AI审核', status: 'current' },
|
||||
{ key: 'agent_review', label: '代理商初审', status: 'pending' },
|
||||
{ key: 'brand_review', label: '品牌方终审', status: 'pending' },
|
||||
]
|
||||
case 'agent_reviewing':
|
||||
return [
|
||||
{ key: 'submitted', label: '已提交', status: 'done' },
|
||||
{ key: 'ai_review', label: 'AI审核', status: 'done' },
|
||||
{ key: 'agent_review', label: '代理商初审', status: 'current' },
|
||||
{ key: 'brand_review', label: '品牌方终审', status: 'pending' },
|
||||
]
|
||||
case 'brand_reviewing':
|
||||
return [
|
||||
{ key: 'submitted', label: '已提交', status: 'done' },
|
||||
{ key: 'ai_review', label: 'AI审核', status: 'done' },
|
||||
{ key: 'agent_review', label: '代理商初审', status: 'done' },
|
||||
{ key: 'brand_review', label: '品牌方终审', status: 'current' },
|
||||
]
|
||||
case 'passed':
|
||||
return [
|
||||
{ key: 'submitted', label: '已提交', status: 'done' },
|
||||
{ key: 'ai_review', label: 'AI审核', status: 'done' },
|
||||
{ key: 'agent_review', label: '代理商初审', status: 'done' },
|
||||
{ key: 'brand_review', label: '已通过', status: 'done' },
|
||||
]
|
||||
case 'rejected':
|
||||
return [
|
||||
{ key: 'submitted', label: '已提交', status: 'done' },
|
||||
{ key: 'ai_review', label: 'AI审核', status: 'done' },
|
||||
{ key: 'agent_review', label: '代理商初审', status: 'done' },
|
||||
{ key: 'brand_review', label: '已驳回', status: 'failed' },
|
||||
]
|
||||
default:
|
||||
return [
|
||||
{ key: 'submitted', label: '已提交', status: 'done' },
|
||||
{ key: 'ai_review', label: 'AI审核', status: 'done' },
|
||||
{ key: 'agent_review', label: '代理商初审', status: 'done' },
|
||||
{ key: 'brand_review', label: '品牌方终审', status: 'current' },
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
// 代理商视角的审核步骤 (包含品牌终审)
|
||||
export function getAgencyReviewSteps(taskStatus: string): ReviewStep[] {
|
||||
switch (taskStatus) {
|
||||
case 'ai_reviewing':
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user