4753626e5a
代理商端前端： - 新增达人管理页面（含任务申诉次数管理） - 新增消息中心（含申诉次数申请审批） - 新增 Brief 管理（列表、详情） - 新增审核中心（脚本审核、视频审核） - 新增数据报表页面 品牌方端前端： - 优化首页仪表盘布局 - 新增项目管理（列表、详情、创建） - 新增代理商管理页面 - 新增审核中心（脚本终审、视频终审） - 新增系统设置页面 文档更新： - 申诉次数改为按任务分配（每任务初始1次） - 更新 PRD、FeatureSummary、User_Role_Interfaces 等文档 - 更新 UI 设计规范和开发计划 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
442 lines
17 KiB
TypeScript
442 lines
17 KiB
TypeScript
'use client'
|
||
|
||
import { useState } from 'react'
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
|
||
import { Button } from '@/components/ui/Button'
|
||
import { Modal } from '@/components/ui/Modal'
|
||
import { SuccessTag, PendingTag, WarningTag } from '@/components/ui/Tag'
|
||
import {
|
||
Search,
|
||
Plus,
|
||
Users,
|
||
TrendingUp,
|
||
TrendingDown,
|
||
Mail,
|
||
Copy,
|
||
CheckCircle,
|
||
Clock,
|
||
MoreVertical,
|
||
FileText,
|
||
Video,
|
||
ChevronDown,
|
||
ChevronRight,
|
||
PlusCircle
|
||
} from 'lucide-react'
|
||
|
||
// 任务类型
|
||
interface CreatorTask {
|
||
id: string
|
||
name: string
|
||
appealRemaining: number
|
||
appealUsed: number
|
||
status: 'in_progress' | 'completed'
|
||
}
|
||
|
||
// 达人类型
|
||
interface Creator {
|
||
id: string
|
||
name: string
|
||
email: string
|
||
avatar: null
|
||
status: string
|
||
projectCount: number
|
||
scriptCount: { total: number; passed: number }
|
||
videoCount: { total: number; passed: number }
|
||
passRate: number
|
||
trend: string
|
||
joinedAt: string
|
||
tasks: CreatorTask[]
|
||
}
|
||
|
||
// 模拟达人列表
|
||
const mockCreators: Creator[] = [
|
||
{
|
||
id: 'creator-001',
|
||
name: '小美护肤',
|
||
email: 'xiaomei@example.com',
|
||
avatar: null,
|
||
status: 'active',
|
||
projectCount: 5,
|
||
scriptCount: { total: 12, passed: 10 },
|
||
videoCount: { total: 10, passed: 8 },
|
||
passRate: 85,
|
||
trend: 'up',
|
||
joinedAt: '2025-08-15',
|
||
tasks: [
|
||
{ id: 'task-001', name: '夏日护肤推广', appealRemaining: 1, appealUsed: 0, status: 'in_progress' },
|
||
{ id: 'task-002', name: '防晒霜测评', appealRemaining: 0, appealUsed: 1, status: 'in_progress' },
|
||
],
|
||
},
|
||
{
|
||
id: 'creator-002',
|
||
name: '美妆Lisa',
|
||
email: 'lisa@example.com',
|
||
avatar: null,
|
||
status: 'active',
|
||
projectCount: 3,
|
||
scriptCount: { total: 8, passed: 7 },
|
||
videoCount: { total: 6, passed: 5 },
|
||
passRate: 80,
|
||
trend: 'stable',
|
||
joinedAt: '2025-10-20',
|
||
tasks: [
|
||
{ id: 'task-003', name: '新品口红试色', appealRemaining: 2, appealUsed: 0, status: 'in_progress' },
|
||
],
|
||
},
|
||
{
|
||
id: 'creator-003',
|
||
name: '健身教练王',
|
||
email: 'wang@example.com',
|
||
avatar: null,
|
||
status: 'active',
|
||
projectCount: 2,
|
||
scriptCount: { total: 5, passed: 5 },
|
||
videoCount: { total: 4, passed: 4 },
|
||
passRate: 100,
|
||
trend: 'up',
|
||
joinedAt: '2025-12-01',
|
||
tasks: [
|
||
{ id: 'task-004', name: '健身器材使用教程', appealRemaining: 1, appealUsed: 0, status: 'in_progress' },
|
||
],
|
||
},
|
||
{
|
||
id: 'creator-004',
|
||
name: '时尚达人',
|
||
email: 'fashion@example.com',
|
||
avatar: null,
|
||
status: 'pending',
|
||
projectCount: 0,
|
||
scriptCount: { total: 0, passed: 0 },
|
||
videoCount: { total: 0, passed: 0 },
|
||
passRate: 0,
|
||
trend: 'stable',
|
||
joinedAt: '2026-02-05',
|
||
tasks: [],
|
||
},
|
||
]
|
||
|
||
function StatusTag({ status }: { status: string }) {
|
||
if (status === 'active') return <SuccessTag>已激活</SuccessTag>
|
||
if (status === 'pending') return <PendingTag>待接受</PendingTag>
|
||
return <WarningTag>已暂停</WarningTag>
|
||
}
|
||
|
||
export default function AgencyCreatorsPage() {
|
||
const [searchQuery, setSearchQuery] = useState('')
|
||
const [showInviteModal, setShowInviteModal] = useState(false)
|
||
const [inviteEmail, setInviteEmail] = useState('')
|
||
const [inviteLink, setInviteLink] = useState('')
|
||
const [expandedCreators, setExpandedCreators] = useState<string[]>([])
|
||
const [creators, setCreators] = useState(mockCreators)
|
||
|
||
const filteredCreators = creators.filter(creator =>
|
||
creator.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||
creator.email.toLowerCase().includes(searchQuery.toLowerCase())
|
||
)
|
||
|
||
// 切换展开状态
|
||
const toggleExpand = (creatorId: string) => {
|
||
setExpandedCreators(prev =>
|
||
prev.includes(creatorId)
|
||
? prev.filter(id => id !== creatorId)
|
||
: [...prev, creatorId]
|
||
)
|
||
}
|
||
|
||
// 增加申诉次数
|
||
const handleAddAppealQuota = (creatorId: string, taskId: string) => {
|
||
setCreators(prev => prev.map(creator => {
|
||
if (creator.id === creatorId) {
|
||
return {
|
||
...creator,
|
||
tasks: creator.tasks.map(task => {
|
||
if (task.id === taskId) {
|
||
return { ...task, appealRemaining: task.appealRemaining + 1 }
|
||
}
|
||
return task
|
||
}),
|
||
}
|
||
}
|
||
return creator
|
||
}))
|
||
}
|
||
|
||
const handleInvite = () => {
|
||
if (!inviteEmail.trim()) {
|
||
alert('请输入达人邮箱')
|
||
return
|
||
}
|
||
const link = `https://miaosi.app/invite/creator/${Date.now()}`
|
||
setInviteLink(link)
|
||
}
|
||
|
||
const handleCopyLink = () => {
|
||
navigator.clipboard.writeText(inviteLink)
|
||
alert('链接已复制')
|
||
}
|
||
|
||
const handleSendInvite = () => {
|
||
alert(`邀请已发送至 ${inviteEmail}`)
|
||
setShowInviteModal(false)
|
||
setInviteEmail('')
|
||
setInviteLink('')
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* 页面标题 */}
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-text-primary">达人管理</h1>
|
||
<p className="text-sm text-text-secondary mt-1">管理合作达人，查看达人绩效数据</p>
|
||
</div>
|
||
<Button onClick={() => setShowInviteModal(true)}>
|
||
<Plus size={16} />
|
||
邀请达人
|
||
</Button>
|
||
</div>
|
||
|
||
{/* 统计卡片 */}
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||
<Card>
|
||
<CardContent className="py-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-text-secondary">总达人数</p>
|
||
<p className="text-2xl font-bold text-text-primary">{mockCreators.length}</p>
|
||
</div>
|
||
<div className="w-10 h-10 rounded-lg bg-accent-indigo/20 flex items-center justify-center">
|
||
<Users size={20} className="text-accent-indigo" />
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
<Card>
|
||
<CardContent className="py-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-text-secondary">已激活</p>
|
||
<p className="text-2xl font-bold text-accent-green">{mockCreators.filter(c => c.status === 'active').length}</p>
|
||
</div>
|
||
<div className="w-10 h-10 rounded-lg bg-accent-green/20 flex items-center justify-center">
|
||
<CheckCircle size={20} className="text-accent-green" />
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
<Card>
|
||
<CardContent className="py-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-text-secondary">总脚本数</p>
|
||
<p className="text-2xl font-bold text-text-primary">{mockCreators.reduce((sum, c) => sum + c.scriptCount.total, 0)}</p>
|
||
</div>
|
||
<div className="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center">
|
||
<FileText size={20} className="text-purple-400" />
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
<Card>
|
||
<CardContent className="py-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-text-secondary">总视频数</p>
|
||
<p className="text-2xl font-bold text-text-primary">{mockCreators.reduce((sum, c) => sum + c.videoCount.total, 0)}</p>
|
||
</div>
|
||
<div className="w-10 h-10 rounded-lg bg-orange-500/20 flex items-center justify-center">
|
||
<Video size={20} className="text-orange-400" />
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* 搜索 */}
|
||
<div className="relative max-w-md">
|
||
<Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary" />
|
||
<input
|
||
type="text"
|
||
placeholder="搜索达人名称或邮箱..."
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
className="w-full pl-10 pr-4 py-2 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
|
||
/>
|
||
</div>
|
||
|
||
{/* 达人列表 */}
|
||
<Card>
|
||
<CardContent className="p-0">
|
||
<table className="w-full">
|
||
<thead>
|
||
<tr className="border-b border-border-subtle text-left text-sm text-text-secondary bg-bg-elevated">
|
||
<th className="px-6 py-4 font-medium">达人</th>
|
||
<th className="px-6 py-4 font-medium">状态</th>
|
||
<th className="px-6 py-4 font-medium">项目数</th>
|
||
<th className="px-6 py-4 font-medium">脚本</th>
|
||
<th className="px-6 py-4 font-medium">视频</th>
|
||
<th className="px-6 py-4 font-medium">通过率</th>
|
||
<th className="px-6 py-4 font-medium">加入时间</th>
|
||
<th className="px-6 py-4 font-medium">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{filteredCreators.map((creator) => {
|
||
const isExpanded = expandedCreators.includes(creator.id)
|
||
const hasActiveTasks = creator.tasks.filter(t => t.status === 'in_progress').length > 0
|
||
|
||
return (
|
||
<>
|
||
<tr key={creator.id} className="border-b border-border-subtle hover:bg-bg-elevated/50">
|
||
<td className="px-6 py-4">
|
||
<div className="flex items-center gap-3">
|
||
{/* 展开按钮 */}
|
||
{hasActiveTasks ? (
|
||
<button
|
||
type="button"
|
||
onClick={() => toggleExpand(creator.id)}
|
||
className="w-6 h-6 rounded flex items-center justify-center hover:bg-bg-elevated"
|
||
>
|
||
{isExpanded ? (
|
||
<ChevronDown size={16} className="text-text-secondary" />
|
||
) : (
|
||
<ChevronRight size={16} className="text-text-secondary" />
|
||
)}
|
||
</button>
|
||
) : (
|
||
<div className="w-6" />
|
||
)}
|
||
<div className="w-10 h-10 rounded-full bg-accent-indigo/20 flex items-center justify-center">
|
||
<span className="text-accent-indigo font-medium">{creator.name[0]}</span>
|
||
</div>
|
||
<div>
|
||
<div className="font-medium text-text-primary">{creator.name}</div>
|
||
<div className="text-sm text-text-tertiary">{creator.email}</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td className="px-6 py-4">
|
||
<StatusTag status={creator.status} />
|
||
</td>
|
||
<td className="px-6 py-4 text-text-primary">{creator.projectCount}</td>
|
||
<td className="px-6 py-4">
|
||
<span className="text-text-primary">{creator.scriptCount.passed}</span>
|
||
<span className="text-text-tertiary">/{creator.scriptCount.total}</span>
|
||
</td>
|
||
<td className="px-6 py-4">
|
||
<span className="text-text-primary">{creator.videoCount.passed}</span>
|
||
<span className="text-text-tertiary">/{creator.videoCount.total}</span>
|
||
</td>
|
||
<td className="px-6 py-4">
|
||
{creator.status === 'active' && creator.passRate > 0 ? (
|
||
<div className="flex items-center gap-2">
|
||
<span className={`font-medium ${creator.passRate >= 90 ? 'text-accent-green' : creator.passRate >= 80 ? 'text-accent-indigo' : 'text-orange-400'}`}>
|
||
{creator.passRate}%
|
||
</span>
|
||
{creator.trend === 'up' && <TrendingUp size={14} className="text-accent-green" />}
|
||
{creator.trend === 'down' && <TrendingDown size={14} className="text-accent-coral" />}
|
||
</div>
|
||
) : (
|
||
<span className="text-text-tertiary">-</span>
|
||
)}
|
||
</td>
|
||
<td className="px-6 py-4 text-sm text-text-tertiary">{creator.joinedAt}</td>
|
||
<td className="px-6 py-4">
|
||
<Button variant="ghost" size="sm">
|
||
<MoreVertical size={16} />
|
||
</Button>
|
||
</td>
|
||
</tr>
|
||
{/* 展开的任务申诉次数管理区域 */}
|
||
{isExpanded && hasActiveTasks && (
|
||
<tr key={`${creator.id}-tasks`} className="bg-bg-elevated/30">
|
||
<td colSpan={8} className="px-6 py-4">
|
||
<div className="ml-9 pl-6 border-l-2 border-accent-indigo/30">
|
||
<div className="text-sm font-medium text-text-secondary mb-3">任务申诉次数管理</div>
|
||
<div className="space-y-2">
|
||
{creator.tasks.filter(t => t.status === 'in_progress').map(task => (
|
||
<div key={task.id} className="flex items-center justify-between p-3 bg-bg-card rounded-lg">
|
||
<div className="flex items-center gap-4">
|
||
<span className="text-sm font-medium text-text-primary">{task.name}</span>
|
||
<div className="flex items-center gap-2 text-xs text-text-tertiary">
|
||
<span>剩余: <span className="text-accent-indigo font-medium">{task.appealRemaining}</span></span>
|
||
<span>|</span>
|
||
<span>已用: {task.appealUsed}</span>
|
||
</div>
|
||
</div>
|
||
<Button
|
||
variant="secondary"
|
||
size="sm"
|
||
onClick={() => handleAddAppealQuota(creator.id, task.id)}
|
||
>
|
||
<PlusCircle size={14} />
|
||
+1 次
|
||
</Button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
)}
|
||
</>
|
||
)
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 邀请达人弹窗 */}
|
||
<Modal isOpen={showInviteModal} onClose={() => { setShowInviteModal(false); setInviteEmail(''); setInviteLink(''); }} title="邀请达人">
|
||
<div className="space-y-4">
|
||
<p className="text-text-secondary text-sm">输入达人邮箱，系统将发送邀请链接。</p>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-text-primary mb-1">达人邮箱</label>
|
||
<div className="flex gap-2">
|
||
<input
|
||
type="email"
|
||
value={inviteEmail}
|
||
onChange={(e) => setInviteEmail(e.target.value)}
|
||
placeholder="creator@example.com"
|
||
className="flex-1 px-4 py-2 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
|
||
/>
|
||
<Button variant="secondary" onClick={handleInvite}>
|
||
生成链接
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{inviteLink && (
|
||
<div className="p-4 bg-bg-elevated rounded-lg">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<span className="text-sm font-medium text-text-primary">邀请链接</span>
|
||
<button
|
||
type="button"
|
||
onClick={handleCopyLink}
|
||
className="flex items-center gap-1 text-sm text-accent-indigo hover:underline"
|
||
>
|
||
<Copy size={14} />
|
||
复制
|
||
</button>
|
||
</div>
|
||
<p className="text-sm text-text-secondary break-all">{inviteLink}</p>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex gap-3 justify-end pt-4">
|
||
<Button variant="ghost" onClick={() => { setShowInviteModal(false); setInviteEmail(''); setInviteLink(''); }}>
|
||
取消
|
||
</Button>
|
||
<Button onClick={handleSendInvite} disabled={!inviteEmail.trim()}>
|
||
<Mail size={16} />
|
||
发送邀请
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
)
|
||
}
|