'use client' import { useState } from 'react' import { useRouter, useParams } from 'next/navigation' import Link from 'next/link' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card' import { Button } from '@/components/ui/Button' import { Input } from '@/components/ui/Input' import { Modal } from '@/components/ui/Modal' import { SuccessTag, PendingTag, ErrorTag } from '@/components/ui/Tag' import { ArrowLeft, Calendar, Users, FileText, Video, Clock, CheckCircle, XCircle, ChevronRight, Plus, Settings, Search, Building2, MoreHorizontal, Trash2, Check, Pencil } from 'lucide-react' import { getPlatformInfo } from '@/lib/platforms' // 模拟项目详情数据 const mockProject = { id: 'proj-001', name: 'XX品牌618推广', platform: 'douyin', status: 'active', deadline: '2026-06-18', createdAt: '2026-02-01', description: '618大促活动营销内容审核项目', stats: { scriptTotal: 20, scriptPassed: 15, scriptPending: 3, scriptRejected: 2, videoTotal: 20, videoPassed: 12, videoPending: 5, videoRejected: 3, }, agencies: [ { id: 'AG789012', name: '星耀传媒', creatorCount: 8, passRate: 92 }, { id: 'AG456789', name: '创意无限', creatorCount: 5, passRate: 88 }, ], recentTasks: [ { id: 'task-001', type: 'video', creatorName: '小美护肤', agencyId: 'AG789012', agencyName: '星耀传媒', status: 'pending', submittedAt: '2026-02-06 14:30' }, { id: 'task-002', type: 'script', creatorName: '美妆Lisa', agencyId: 'AG789012', agencyName: '星耀传媒', status: 'approved', submittedAt: '2026-02-06 12:15' }, { id: 'task-003', type: 'video', creatorName: '健身王', agencyId: 'AG456789', agencyName: '创意无限', status: 'rejected', submittedAt: '2026-02-06 10:00' }, { id: 'task-004', type: 'script', creatorName: '时尚达人', agencyId: 'AG456789', agencyName: '创意无限', status: 'pending', submittedAt: '2026-02-05 16:45' }, ], } // 模拟品牌方已添加的代理商(来自代理商管理) const mockManagedAgencies = [ { id: 'AG789012', name: '星耀传媒', companyName: '上海星耀文化传媒有限公司' }, { id: 'AG456789', name: '创意无限', companyName: '深圳创意无限广告有限公司' }, { id: 'AG123456', name: '美妆达人MCN', companyName: '杭州美妆达人网络科技有限公司' }, { id: 'AG111111', name: '蓝海科技', companyName: '北京蓝海数字科技有限公司' }, { id: 'AG222222', name: '云创网络', companyName: '杭州云创网络技术有限公司' }, { id: 'AG333333', name: '天府传媒', companyName: '成都天府传媒集团有限公司' }, ] function StatCard({ title, value, icon: Icon, color }: { title: string; value: number | string; icon: React.ElementType; color: string }) { return (

{title}

{value}

) } function TaskStatusTag({ status }: { status: string }) { switch (status) { case 'approved': return 已通过 case 'pending': return 待审核 case 'rejected': return 已驳回 default: return 未知 } } export default function ProjectDetailPage() { const router = useRouter() const params = useParams() const projectId = params.id as string const [project, setProject] = useState(mockProject) // 添加代理商相关状态 const [showAddModal, setShowAddModal] = useState(false) const [searchQuery, setSearchQuery] = useState('') const [selectedAgencies, setSelectedAgencies] = useState([]) // 代理商操作菜单 const [activeAgencyMenu, setActiveAgencyMenu] = useState(null) // 删除确认 const [showDeleteModal, setShowDeleteModal] = useState(false) const [agencyToDelete, setAgencyToDelete] = useState(null) // 编辑截止日期 const [showDeadlineModal, setShowDeadlineModal] = useState(false) const [newDeadline, setNewDeadline] = useState(project.deadline) // 保存截止日期 const handleSaveDeadline = () => { if (!newDeadline) return setProject({ ...project, deadline: newDeadline }) setShowDeadlineModal(false) } const scriptPassRate = Math.round((project.stats.scriptPassed / project.stats.scriptTotal) * 100) const videoPassRate = Math.round((project.stats.videoPassed / project.stats.videoTotal) * 100) // 过滤可添加的代理商(排除已在项目中的) const availableAgencies = mockManagedAgencies.filter( agency => !project.agencies.some(a => a.id === agency.id) ) // 搜索过滤 const filteredAgencies = availableAgencies.filter(agency => searchQuery === '' || agency.name.toLowerCase().includes(searchQuery.toLowerCase()) || agency.id.toLowerCase().includes(searchQuery.toLowerCase()) || agency.companyName.toLowerCase().includes(searchQuery.toLowerCase()) ) // 切换选择 const toggleSelectAgency = (agencyId: string) => { setSelectedAgencies(prev => prev.includes(agencyId) ? prev.filter(id => id !== agencyId) : [...prev, agencyId] ) } // 确认添加 const handleAddAgencies = () => { const newAgencies = mockManagedAgencies .filter(a => selectedAgencies.includes(a.id)) .map(a => ({ id: a.id, name: a.name, creatorCount: 0, passRate: 0 })) setProject({ ...project, agencies: [...project.agencies, ...newAgencies] }) setShowAddModal(false) setSelectedAgencies([]) setSearchQuery('') } // 移除代理商 const handleRemoveAgency = async () => { if (!agencyToDelete) return setProject({ ...project, agencies: project.agencies.filter(a => a.id !== agencyToDelete.id) }) setShowDeleteModal(false) setAgencyToDelete(null) } const platform = getPlatformInfo(project.platform) return (
{/* 顶部导航 */}

{project.name}

{platform && ( {platform.icon} {platform.name} )}

{project.description}

进行中
{/* 项目信息 */}
截止日期: {project.deadline} 创建时间: {project.createdAt}
{/* Brief和规则配置 - 大按钮 */}

Brief和规则配置

配置项目Brief、审核规则、AI检测项等

{/* 统计卡片 */}
{/* 审核进度 */} 审核进度 {/* 脚本审核 */}
脚本审核 {project.stats.scriptPassed}/{project.stats.scriptTotal} 已通过
通过 {project.stats.scriptPassed} 待审 {project.stats.scriptPending} 驳回 {project.stats.scriptRejected}
{/* 视频审核 */}
{project.stats.videoPassed}/{project.stats.videoTotal} 已通过
通过 {project.stats.videoPassed} 待审 {project.stats.videoPending} 驳回 {project.stats.videoRejected}
{/* 代理商列表 */} 参与代理商 ({project.agencies.length}) {project.agencies.map((agency) => (

{agency.name}

{agency.creatorCount} 位达人 · 通过率 {agency.passRate}%

{activeAgencyMenu === agency.id && (
)}
))} {/* 添加代理商按钮 */}
{/* 最近任务 */} 最近提交
{project.recentTasks.map((task) => ( ))}
类型 达人 所属代理商 状态 提交时间 操作
{task.type === 'script' ? : {task.creatorName} {task.agencyName} {task.submittedAt}
{/* 添加代理商弹窗 */} { setShowAddModal(false) setSearchQuery('') setSelectedAgencies([]) }} title="添加代理商" size="lg" >
{/* 搜索框 */}
setSearchQuery(e.target.value)} placeholder="搜索代理商名称或ID..." className="pl-10" />
{/* 代理商列表 */}
{filteredAgencies.length > 0 ? ( filteredAgencies.map((agency) => { const isSelected = selectedAgencies.includes(agency.id) return ( ) }) ) : (
{availableAgencies.length === 0 ? ( <>

所有代理商都已添加到此项目

) : ( <>

未找到匹配的代理商

)}
)}
{/* 已选择提示 */} {selectedAgencies.length > 0 && (
已选择 {selectedAgencies.length} 个代理商
)} {/* 底部提示 */}

仅显示已在"代理商管理"中添加的代理商,如需添加新代理商请先前往代理商管理

{/* 删除确认弹窗 */} { setShowDeleteModal(false); setAgencyToDelete(null) }} title="移除代理商" >

确定要将 {agencyToDelete?.name} 从此项目中移除吗?

移除后,该代理商下的达人将无法继续参与此项目的任务。

{/* 编辑截止日期弹窗 */} setShowDeadlineModal(false)} title="修改截止日期" >

项目名称

{project.name}

setNewDeadline(e.target.value)} className="w-full pl-12 pr-4 py-3 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo" />
) }