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'
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
import { useRouter } from 'next/navigation'
|
import { useRouter } from 'next/navigation'
|
||||||
import { useEffect, useState } from 'react'
|
import {
|
||||||
import { Bell, CheckCircle, XCircle, Clock, ChevronDown, ChevronRight } from 'lucide-react'
|
UserPlus,
|
||||||
import { DesktopLayout } from '@/components/layout/DesktopLayout'
|
ClipboardList,
|
||||||
import { MobileLayout } from '@/components/layout/MobileLayout'
|
CheckCircle,
|
||||||
|
PenLine,
|
||||||
|
ScanSearch,
|
||||||
|
Building2,
|
||||||
|
XCircle,
|
||||||
|
BadgeCheck,
|
||||||
|
Video,
|
||||||
|
MessageCircle,
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
|
||||||
import { cn } from '@/lib/utils'
|
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',
|
id: 'msg-001',
|
||||||
taskId: 'task-002',
|
type: 'invite',
|
||||||
title: 'AI 审核通过',
|
title: '代理商邀请',
|
||||||
description: '已进入代理商审核，请等待最终结果。',
|
content: '「星辰传媒」邀请您成为签约达人，加入后可接收该代理商分配的推广任务',
|
||||||
time: '刚刚',
|
time: '5分钟前',
|
||||||
status: 'success' as MessageStatus,
|
|
||||||
read: false,
|
read: false,
|
||||||
|
hasActions: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'msg-002',
|
id: 'msg-002',
|
||||||
taskId: 'task-003',
|
type: 'new_task',
|
||||||
title: 'AI 审核未通过',
|
title: '新任务分配',
|
||||||
description: '检测到竞品 Logo 与绝对化用语，请修改后重新提交。',
|
content: '您有一个新任务【XX品牌618推广】，请在3天内提交脚本',
|
||||||
time: '10 分钟前',
|
time: '10分钟前',
|
||||||
status: 'error' as MessageStatus,
|
|
||||||
read: false,
|
read: false,
|
||||||
|
taskId: 'task-001',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'msg-003',
|
id: 'msg-003',
|
||||||
taskId: 'task-001',
|
type: 'pass',
|
||||||
title: '等待提交脚本',
|
title: '审核通过',
|
||||||
description: '请先上传脚本，系统才能开始合规预审。',
|
content: '恭喜！您的视频【AA数码新品发布】已通过审核，可安排发布',
|
||||||
time: '1 小时前',
|
time: '2小时前',
|
||||||
status: 'info' as MessageStatus,
|
|
||||||
read: true,
|
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({
|
function MessageCard({
|
||||||
title,
|
message,
|
||||||
description,
|
onRead,
|
||||||
time,
|
onNavigate,
|
||||||
status,
|
onAcceptInvite,
|
||||||
isRead,
|
onIgnoreInvite,
|
||||||
onClick,
|
|
||||||
}: {
|
}: {
|
||||||
title: string
|
message: Message
|
||||||
description: string
|
onRead: () => void
|
||||||
time: string
|
onNavigate: () => void
|
||||||
status: MessageStatus
|
onAcceptInvite?: () => void
|
||||||
isRead: boolean
|
onIgnoreInvite?: () => void
|
||||||
onClick: () => void
|
|
||||||
}) {
|
}) {
|
||||||
const Icon = statusConfig[status].icon
|
const config = messageConfig[message.type]
|
||||||
|
const Icon = config.icon
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'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-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-2">
|
||||||
|
{/* 头部 */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<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 leading-relaxed">{message.content}</p>
|
||||||
|
|
||||||
|
{/* 邀请类型的操作按钮 */}
|
||||||
|
{message.hasActions && (
|
||||||
|
<div className="flex items-center gap-3 pt-2">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={onClick}
|
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>
|
||||||
|
|
||||||
|
{/* 未读标记 */}
|
||||||
|
{!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(
|
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',
|
'flex-1 py-3 rounded-xl text-sm font-semibold',
|
||||||
!isRead && 'ring-1 ring-accent-indigo/20'
|
isAccept ? 'bg-accent-indigo text-white' : 'bg-accent-coral text-white'
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className={cn('w-10 h-10 rounded-full flex items-center justify-center', statusConfig[status].bg)}>
|
{isAccept ? '确认接受' : '确认忽略'}
|
||||||
<Icon className={cn('w-5 h-5', statusConfig[status].color)} />
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 flex flex-col gap-1">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-text-secondary">{description}</p>
|
|
||||||
</div>
|
|
||||||
</button>
|
</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() {
|
export default function CreatorMessagesPage() {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const [isMobile, setIsMobile] = useState(true)
|
|
||||||
const [messages, setMessages] = useState(mockMessages)
|
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 markAsRead = (id: string) => {
|
||||||
const checkMobile = () => setIsMobile(window.innerWidth < 1024)
|
setMessages(prev => prev.map(msg =>
|
||||||
checkMobile()
|
msg.id === id ? { ...msg, read: true } : msg
|
||||||
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 unreadCount = messages.filter((msg) => !msg.read).length
|
|
||||||
const unreadMessages = messages.filter((msg) => !msg.read)
|
|
||||||
const readMessages = messages.filter((msg) => msg.read)
|
|
||||||
|
|
||||||
const DesktopContent = (
|
const markAllAsRead = () => {
|
||||||
<DesktopLayout role="creator">
|
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 flex-col gap-6 h-full">
|
||||||
<div className="flex items-center justify-between">
|
{/* 顶部栏 */}
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center justify-between flex-wrap gap-4">
|
||||||
<div className="w-12 h-12 rounded-2xl bg-accent-indigo/15 flex items-center justify-center">
|
<div className="flex flex-col gap-1">
|
||||||
<Bell className="w-6 h-6 text-accent-indigo" />
|
<h1 className="text-xl lg:text-[24px] font-bold text-text-primary">消息中心</h1>
|
||||||
|
<p className="text-sm text-text-secondary">查看任务通知、审核结果和申诉反馈</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<h1 className="text-[28px] font-bold text-text-primary">消息中心</h1>
|
|
||||||
<p className="text-[15px] text-text-secondary">追踪 AI 审核与人工审核进度</p>
|
|
||||||
</div>
|
|
||||||
</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
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setShowRead((prev) => !prev)}
|
className="px-4 py-2.5 rounded-lg bg-bg-elevated text-text-primary text-sm"
|
||||||
className="flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary"
|
onClick={markAllAsRead}
|
||||||
>
|
>
|
||||||
{showRead ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
|
全部标为已读
|
||||||
已读 ({readMessages.length})
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{showRead && readMessages.length === 0 && (
|
{/* 消息列表 - 可滚动 */}
|
||||||
<div className="bg-bg-card rounded-xl p-4 text-sm text-text-tertiary">
|
<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">
|
||||||
</div>
|
{messages.map((message) => (
|
||||||
)}
|
|
||||||
{showRead && readMessages.map((msg) => (
|
|
||||||
<MessageCard
|
<MessageCard
|
||||||
key={msg.id}
|
key={message.id}
|
||||||
title={msg.title}
|
message={message}
|
||||||
description={msg.description}
|
onRead={() => markAsRead(message.id)}
|
||||||
time={msg.time}
|
onNavigate={() => navigateByMessage(message)}
|
||||||
status={msg.status}
|
onAcceptInvite={() => handleAcceptInvite(message.id)}
|
||||||
isRead={msg.read}
|
onIgnoreInvite={() => handleIgnoreInvite(message.id)}
|
||||||
onClick={() => handleClick(msg.id, msg.taskId)}
|
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DesktopLayout>
|
</div>
|
||||||
|
|
||||||
|
{/* 确认弹窗 */}
|
||||||
|
<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>
|
||||||
)
|
)
|
||||||
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
{showRead ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
|
|
||||||
已读 ({readMessages.length})
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{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>
|
|
||||||
</MobileLayout>
|
|
||||||
)
|
|
||||||
|
|
||||||
return isMobile ? MobileContent : DesktopContent
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,511 +1,439 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { useState, useEffect } from 'react'
|
import { useState } from 'react'
|
||||||
import { useRouter } from 'next/navigation'
|
import { useRouter } from 'next/navigation'
|
||||||
import { Check, Loader2, Video, Search, SlidersHorizontal, ChevronDown } from 'lucide-react'
|
import {
|
||||||
import { MobileLayout } from '@/components/layout/MobileLayout'
|
Video,
|
||||||
import { DesktopLayout } from '@/components/layout/DesktopLayout'
|
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 { 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',
|
id: 'task-001',
|
||||||
title: 'XX品牌618推广',
|
title: 'XX品牌618推广',
|
||||||
platform: '抖音',
|
description: '产品种草视频 · 时长要求 60-90秒 · 截止: 2026-02-10',
|
||||||
description: '产品种草视频 · 时长要求 60-90秒',
|
scriptStage: { submit: 'current', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||||
deadline: '2026-02-10',
|
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||||
status: 'pending_script' as TaskStatus,
|
buttonText: '上传脚本',
|
||||||
currentStep: 1, // 1-已提交, 2-AI审核, 3-代理商审核, 4-品牌终审
|
buttonType: 'upload',
|
||||||
|
scriptColor: 'blue',
|
||||||
|
videoColor: 'tertiary',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'task-002',
|
id: 'task-002',
|
||||||
title: 'YY美妆新品',
|
title: 'YY美妆新品',
|
||||||
platform: '小红书',
|
description: '口播测评 · 已上传视频 · 提交于: 今天 14:30',
|
||||||
description: '口播测评 · 视频已上传 · 等待AI审核',
|
scriptStage: { submit: 'done', ai: 'current', agency: 'pending', brand: 'pending' },
|
||||||
submitTime: '今天 14:30',
|
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||||
status: 'ai_reviewing' as TaskStatus,
|
buttonText: '查看详情',
|
||||||
currentStep: 2,
|
buttonType: 'view',
|
||||||
progress: 65,
|
scriptColor: 'indigo',
|
||||||
|
videoColor: 'tertiary',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'task-003',
|
id: 'task-003',
|
||||||
title: 'ZZ饮品夏日',
|
title: 'ZZ饮品夏日',
|
||||||
platform: '抖音',
|
description: '探店Vlog · 发现2处问题 · 需修改后重新提交',
|
||||||
description: '探店Vlog · 发现2处问题',
|
scriptStage: { submit: 'done', ai: 'error', agency: 'pending', brand: 'pending' },
|
||||||
reviewTime: '昨天 18:20',
|
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||||
status: 'need_revision' as TaskStatus,
|
buttonText: '查看修改',
|
||||||
currentStep: 2,
|
buttonType: 'fix',
|
||||||
issueCount: 2,
|
scriptColor: 'coral',
|
||||||
|
videoColor: 'tertiary',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'task-004',
|
id: 'task-004',
|
||||||
title: 'AA数码新品发布',
|
title: 'AA数码新品发布',
|
||||||
platform: '抖音',
|
description: '开箱测评 · 审核通过 · 可发布',
|
||||||
description: '开箱测评 · 已发布',
|
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
|
||||||
status: 'passed' as TaskStatus,
|
videoStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
|
||||||
currentStep: 4,
|
buttonText: '查看详情',
|
||||||
|
buttonType: 'view',
|
||||||
|
scriptColor: 'green',
|
||||||
|
videoColor: 'green',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'task-005',
|
id: 'task-005',
|
||||||
title: 'BB运动饮料',
|
title: 'BB运动饮料',
|
||||||
platform: '抖音',
|
description: '运动场景 · 脚本AI审核中 · 等待结果',
|
||||||
description: '脚本已通过 · 待提交成片',
|
scriptStage: { submit: 'done', ai: 'current', agency: 'pending', brand: 'pending' },
|
||||||
deadline: '2026-02-12',
|
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||||
status: 'pending_video' as TaskStatus,
|
buttonText: '查看详情',
|
||||||
currentStep: 1,
|
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) => {
|
const getStyle = () => {
|
||||||
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'
|
|
||||||
}
|
|
||||||
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) {
|
switch (status) {
|
||||||
case 'pending_script':
|
case 'done':
|
||||||
return '待提交脚本'
|
return 'bg-accent-green'
|
||||||
case 'pending_video':
|
case 'current':
|
||||||
return '待提交视频'
|
return 'bg-accent-indigo'
|
||||||
case 'ai_reviewing':
|
case 'error':
|
||||||
return 'AI 审核中'
|
return 'bg-accent-coral'
|
||||||
case 'agency_reviewing':
|
|
||||||
return '待代理商审核'
|
|
||||||
case 'need_revision':
|
|
||||||
return '需修改后再提交'
|
|
||||||
case 'passed':
|
|
||||||
return '审核通过'
|
|
||||||
default:
|
default:
|
||||||
return '任务进行中'
|
return 'bg-bg-elevated border-[1.5px] border-border-subtle'
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
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,
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// 状态徽章配置
|
const getIconColor = () => {
|
||||||
function getStatusConfig(status: TaskStatus) {
|
if (status === 'done' || status === 'current' || status === 'error') return 'text-white'
|
||||||
switch (status) {
|
return 'text-text-tertiary'
|
||||||
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'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
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) => (
|
{steps.map((step, index) => (
|
||||||
<div key={`${step.label}-${index}`} className="flex items-center gap-1">
|
<div key={step.key} className="flex items-center flex-1">
|
||||||
<span className={cn('w-1.5 h-1.5 rounded-full', stateStyle(step.state))} />
|
<div className="flex flex-col items-center gap-1.5 w-14">
|
||||||
<span className={cn('text-[11px]', step.state === 'error' ? 'text-accent-coral' : 'text-text-tertiary')}>
|
<StepIcon status={step.status} icon={step.icon} />
|
||||||
{step.label}
|
<span className={cn('text-[10px]', getLabelColor(step.status))}>{step.label}</span>
|
||||||
</span>
|
</div>
|
||||||
{index < steps.length - 1 && <span className="text-text-tertiary">·</span>}
|
{index < steps.length - 1 && (
|
||||||
|
<div className={cn('h-0.5 flex-1', getLineColor(step.status))} />
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 审核进度条组件
|
// 任务卡片组件
|
||||||
function ReviewProgressBar({ currentStep, status }: { currentStep: number; status: TaskStatus }) {
|
function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
|
||||||
const steps = [
|
const getStageColor = (color: string) => {
|
||||||
{ label: '已提交', step: 1 },
|
switch (color) {
|
||||||
{ label: 'AI审核', step: 2 },
|
case 'blue': return 'text-accent-blue'
|
||||||
{ label: '代理商审核', step: 3 },
|
case 'indigo': return 'text-accent-indigo'
|
||||||
{ label: '品牌终审', step: 4 },
|
case 'coral': return 'text-accent-coral'
|
||||||
]
|
case 'green': return 'text-accent-green'
|
||||||
|
default: return 'text-text-tertiary'
|
||||||
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>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
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>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
if (task.status === 'need_revision') {
|
|
||||||
return (
|
const getButtonStyle = () => {
|
||||||
<button
|
switch (task.buttonType) {
|
||||||
type="button"
|
case 'upload':
|
||||||
className="px-5 py-2.5 rounded-[10px] bg-accent-coral text-white text-sm font-semibold"
|
return 'bg-accent-green text-white'
|
||||||
onClick={(e) => { e.stopPropagation(); onClick() }}
|
case 'fix':
|
||||||
>
|
return 'bg-accent-coral text-white'
|
||||||
查看修改
|
default:
|
||||||
</button>
|
return 'bg-transparent border-[1.5px] border-accent-indigo text-accent-indigo'
|
||||||
)
|
|
||||||
}
|
}
|
||||||
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 (
|
return (
|
||||||
<div
|
<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}
|
onClick={onClick}
|
||||||
>
|
>
|
||||||
{/* 任务主行 */}
|
{/* 任务主行 */}
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
{/* 左侧：缩略图 + 信息 */}
|
{/* 左侧：缩略图 + 信息 */}
|
||||||
<div className="flex items-center gap-4">
|
<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">
|
<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" />
|
<Video className="w-6 h-6 text-text-tertiary" />
|
||||||
</div>
|
</div>
|
||||||
{/* 任务信息 */}
|
|
||||||
<div className="flex flex-col gap-1.5">
|
<div className="flex flex-col gap-1.5">
|
||||||
<span className="text-base font-semibold text-text-primary">{task.title}</span>
|
<span className="text-base font-semibold text-text-primary">{task.title}</span>
|
||||||
<span className="text-[13px] text-text-secondary">{task.description}</span>
|
<span className="text-[13px] text-text-secondary">{task.description}</span>
|
||||||
<TaskStepSummary status={task.status} />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 右侧：状态 + 操作按钮 */}
|
{/* 右侧：操作按钮 */}
|
||||||
<div className="flex items-center gap-4">
|
<button
|
||||||
<span className={cn('px-3 py-1.5 rounded-lg text-[13px] font-semibold', config.bg, config.text)}>
|
type="button"
|
||||||
{config.label}
|
className={cn('px-5 py-2.5 rounded-[10px] text-sm font-semibold', getButtonStyle())}
|
||||||
</span>
|
onClick={(e) => { e.stopPropagation(); onClick() }}
|
||||||
{getActionButton()}
|
>
|
||||||
</div>
|
{task.buttonText}
|
||||||
|
</button>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 移动端任务卡片
|
// 任务状态筛选选项
|
||||||
function MobileTaskCard({ task, onClick }: { task: UiTask; onClick: () => void }) {
|
type TaskFilter = 'all' | 'pending' | 'reviewing' | 'rejected' | 'completed'
|
||||||
const config = getStatusConfig(task.status)
|
|
||||||
const showProgress = ['ai_reviewing', 'agency_reviewing', 'need_revision'].includes(task.status)
|
|
||||||
|
|
||||||
return (
|
const filterOptions: { value: TaskFilter; label: string }[] = [
|
||||||
<div
|
{ value: 'all', label: '全部状态' },
|
||||||
className="bg-bg-card rounded-xl p-4 flex flex-col gap-3 card-shadow cursor-pointer"
|
{ value: 'pending', label: '待提交' },
|
||||||
onClick={onClick}
|
{ value: 'reviewing', label: '审核中' },
|
||||||
>
|
{ value: 'rejected', label: '已驳回' },
|
||||||
{/* 头部 */}
|
{ value: 'completed', label: '已完成' },
|
||||||
<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>
|
|
||||||
|
|
||||||
{/* 进度条 */}
|
// 根据任务状态获取筛选分类
|
||||||
{showProgress && (
|
const getTaskFilterCategory = (task: Task): TaskFilter => {
|
||||||
<div className="py-1">
|
// 如果视频阶段全部完成，则为已完成
|
||||||
<ReviewProgressBar currentStep={task.currentStep} status={task.status} />
|
if (task.videoStage.brand === 'done') return 'completed'
|
||||||
</div>
|
// 如果有任何阶段为 error，则为已驳回
|
||||||
)}
|
if (
|
||||||
|
task.scriptStage.ai === 'error' ||
|
||||||
{/* 描述 */}
|
task.scriptStage.agency === 'error' ||
|
||||||
<p className="text-sm text-text-secondary">{task.description}</p>
|
task.scriptStage.brand === 'error' ||
|
||||||
<TaskStepSummary status={task.status} />
|
task.videoStage.ai === 'error' ||
|
||||||
|
task.videoStage.agency === 'error' ||
|
||||||
{/* 底部 */}
|
task.videoStage.brand === 'error'
|
||||||
<div className="flex items-center justify-between">
|
) return 'rejected'
|
||||||
<span className="text-[13px] text-text-tertiary">
|
// 如果脚本阶段待提交或视频阶段待提交（且脚本已完成）
|
||||||
{task.deadline && `截止: ${task.deadline}`}
|
if (task.scriptStage.submit === 'current' || (task.scriptStage.brand === 'done' && task.videoStage.submit === 'current')) return 'pending'
|
||||||
{task.submitTime && `提交于: ${task.submitTime}`}
|
// 其他情况为审核中
|
||||||
{task.reviewTime && `审核于: ${task.reviewTime}`}
|
return 'reviewing'
|
||||||
</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>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function CreatorTasksPage() {
|
export default function CreatorTasksPage() {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const [isMobile, setIsMobile] = useState(true)
|
|
||||||
const [searchQuery, setSearchQuery] = useState('')
|
const [searchQuery, setSearchQuery] = useState('')
|
||||||
const [tasks, setTasks] = useState<UiTask[]>(seedTasks)
|
const [filter, setFilter] = useState<TaskFilter>('all')
|
||||||
const [isLoading, setIsLoading] = useState(false)
|
const [showFilterDropdown, setShowFilterDropdown] = useState(false)
|
||||||
|
const [tasks] = useState<Task[]>(mockTasks)
|
||||||
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 handleTaskClick = (taskId: string) => {
|
const handleTaskClick = (taskId: string) => {
|
||||||
router.push(`/creator/task/${taskId}`)
|
router.push(`/creator/task/${taskId}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 桌面端内容
|
// 过滤任务
|
||||||
const DesktopContent = (
|
const filteredTasks = tasks.filter(task => {
|
||||||
<DesktopLayout role="creator">
|
// 搜索过滤
|
||||||
|
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 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">
|
<div className="flex flex-col gap-1">
|
||||||
<h1 className="text-[28px] font-bold text-text-primary">我的任务</h1>
|
<h1 className="text-2xl lg:text-[28px] font-bold text-text-primary">我的任务</h1>
|
||||||
<p className="text-[15px] text-text-secondary">共 {pendingCount} 个进行中任务</p>
|
<p className="text-sm lg:text-[15px] text-text-secondary">
|
||||||
|
{filter === 'all' ? `共 ${tasks.length} 个任务` : `${currentFilterLabel} ${filteredTasks.length} 个`}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{/* 搜索和筛选 */}
|
|
||||||
<div className="flex items-center gap-3">
|
<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">
|
<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" />
|
<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"
|
className="bg-transparent text-sm text-text-primary placeholder-text-tertiary focus:outline-none w-32"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="relative">
|
||||||
<button
|
<button
|
||||||
type="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"
|
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]" />
|
<SlidersHorizontal className="w-[18px] h-[18px]" />
|
||||||
<span>全部状态</span>
|
<span>{currentFilterLabel}</span>
|
||||||
<ChevronDown className="w-4 h-4" />
|
<ChevronDown className={cn('w-4 h-4 transition-transform', showFilterDropdown && 'rotate-180')} />
|
||||||
</button>
|
</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>
|
</div>
|
||||||
|
|
||||||
{/* 任务列表 */}
|
{/* 任务列表 - 可滚动 */}
|
||||||
<div className="flex flex-col gap-4 flex-1 overflow-auto">
|
<div className="flex flex-col gap-4 flex-1 overflow-y-auto pr-2">
|
||||||
{isLoading && (
|
{filteredTasks.length === 0 ? (
|
||||||
<div className="bg-bg-card rounded-2xl p-6 text-sm text-text-tertiary">
|
<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>
|
</div>
|
||||||
)}
|
) : (
|
||||||
{!isLoading && tasks.length === 0 && (
|
filteredTasks.map((task) => (
|
||||||
<div className="bg-bg-card rounded-2xl p-6 text-sm text-text-tertiary">
|
<TaskCard
|
||||||
暂无任务
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{tasks.map((task) => (
|
|
||||||
<DesktopTaskCard
|
|
||||||
key={task.id}
|
key={task.id}
|
||||||
task={task}
|
task={task}
|
||||||
onClick={() => handleTaskClick(task.id)}
|
onClick={() => handleTaskClick(task.id)}
|
||||||
/>
|
/>
|
||||||
))}
|
))
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</DesktopLayout>
|
|
||||||
)
|
|
||||||
|
|
||||||
// 移动端内容
|
|
||||||
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>
|
||||||
</div>
|
</div>
|
||||||
</MobileLayout>
|
</ResponsiveLayout>
|
||||||
)
|
)
|
||||||
|
|
||||||
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'
|
'use client'
|
||||||
|
|
||||||
import { useEffect, useState } from 'react'
|
import { useState, useEffect } from 'react'
|
||||||
import { MobileLayout } from './MobileLayout'
|
import { Menu, X } from 'lucide-react'
|
||||||
import { DesktopLayout } from './DesktopLayout'
|
import { Sidebar } from '../navigation/Sidebar'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
interface ResponsiveLayoutProps {
|
interface ResponsiveLayoutProps {
|
||||||
children: React.ReactNode
|
children: React.ReactNode
|
||||||
role?: 'creator' | 'agency' | 'brand'
|
role?: 'creator' | 'agency' | 'brand'
|
||||||
showBottomNav?: boolean
|
className?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ResponsiveLayout({
|
export function ResponsiveLayout({
|
||||||
children,
|
children,
|
||||||
role = 'creator',
|
role = 'creator',
|
||||||
showBottomNav = true,
|
className = '',
|
||||||
}: ResponsiveLayoutProps) {
|
}: ResponsiveLayoutProps) {
|
||||||
const [isMobile, setIsMobile] = useState(true)
|
const [isMobile, setIsMobile] = useState(false)
|
||||||
|
const [sidebarOpen, setSidebarOpen] = useState(false)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const checkMobile = () => {
|
const checkMobile = () => {
|
||||||
setIsMobile(window.innerWidth < 1024)
|
const mobile = window.innerWidth < 1024
|
||||||
|
setIsMobile(mobile)
|
||||||
|
// 大屏幕自动关闭抽屉
|
||||||
|
if (!mobile) {
|
||||||
|
setSidebarOpen(false)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
checkMobile()
|
checkMobile()
|
||||||
window.addEventListener('resize', checkMobile)
|
window.addEventListener('resize', checkMobile)
|
||||||
return () => window.removeEventListener('resize', checkMobile)
|
return () => window.removeEventListener('resize', checkMobile)
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
if (isMobile) {
|
// 点击遮罩关闭侧边栏
|
||||||
return (
|
const closeSidebar = () => setSidebarOpen(false)
|
||||||
<MobileLayout role={role} showBottomNav={showBottomNav}>
|
|
||||||
{children}
|
|
||||||
</MobileLayout>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DesktopLayout role={role}>
|
<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}
|
{children}
|
||||||
</DesktopLayout>
|
</main>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -2,7 +2,22 @@
|
|||||||
|
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { usePathname } from 'next/navigation'
|
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'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
interface NavItem {
|
interface NavItem {
|
||||||
@ -21,19 +36,22 @@ const creatorNavItems: NavItem[] = [
|
|||||||
// 代理商端导航项
|
// 代理商端导航项
|
||||||
const agencyNavItems: NavItem[] = [
|
const agencyNavItems: NavItem[] = [
|
||||||
{ icon: LayoutDashboard, label: '工作台', href: '/agency' },
|
{ 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: FileText, label: 'Brief 配置', href: '/agency/briefs' },
|
||||||
{ icon: Users, label: '达人管理', href: '/agency/creators' },
|
{ icon: Users, label: '达人管理', href: '/agency/creators' },
|
||||||
{ icon: BarChart3, label: '数据报表', href: '/agency/reports' },
|
{ icon: BarChart3, label: '数据报表', href: '/agency/reports' },
|
||||||
|
{ icon: Bell, label: '消息中心', href: '/agency/messages' },
|
||||||
]
|
]
|
||||||
|
|
||||||
// 品牌方端导航项
|
// 品牌方端导航项
|
||||||
const brandNavItems: NavItem[] = [
|
const brandNavItems: NavItem[] = [
|
||||||
{ icon: LayoutDashboard, label: '数据看板', href: '/brand' },
|
{ icon: FolderKanban, label: '项目看板', href: '/brand' },
|
||||||
{ icon: Settings, label: 'AI 配置', href: '/brand/ai-config' },
|
{ icon: PlusCircle, label: '创建项目', href: '/brand/projects/create' },
|
||||||
{ icon: FileText, label: '规则配置', href: '/brand/rules' },
|
{ icon: ClipboardCheck, label: '终审台', href: '/brand/review' },
|
||||||
{ icon: FileCheck, label: '终审台', href: '/brand/final-review' },
|
|
||||||
{ icon: Users, label: '代理商管理', href: '/brand/agencies' },
|
{ 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 {
|
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[] {
|
export function getAgencyReviewSteps(taskStatus: string): ReviewStep[] {
|
||||||
switch (taskStatus) {
|
switch (taskStatus) {
|
||||||
case 'ai_reviewing':
|
case 'ai_reviewing':
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user