feat: 为所有终端添加平台显示功能
- 新增 frontend/lib/platforms.ts 共享平台配置模块 - 支持6个平台: 抖音、小红书、B站、快手、微博、微信视频号 - 品牌方终端: 项目看板、项目详情、终审台列表添加平台显示 - 代理商终端: 工作台概览、审核台、Brief配置、达人管理、 数据报表、消息中心、申诉处理添加平台显示 - 达人端: 任务列表添加平台显示 - 统一使用彩色头部条样式展示平台信息 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Your Name
parent
964797d2e9
commit
0bfedb95c8
@ -17,6 +17,7 @@ import {
|
||||
FileText,
|
||||
Video
|
||||
} from 'lucide-react'
|
||||
import { getPlatformInfo } from '@/lib/platforms'
|
||||
|
||||
// 申诉状态类型
|
||||
type AppealStatus = 'pending' | 'processing' | 'approved' | 'rejected'
|
||||
@ -31,6 +32,7 @@ interface Appeal {
|
||||
taskTitle: string
|
||||
creatorId: string
|
||||
creatorName: string
|
||||
platform: string
|
||||
type: AppealType
|
||||
contentType: 'script' | 'video'
|
||||
reason: string
|
||||
@ -48,6 +50,7 @@ const mockAppeals: Appeal[] = [
|
||||
taskTitle: '夏日护肤推广脚本',
|
||||
creatorId: 'creator-001',
|
||||
creatorName: '小美护肤',
|
||||
platform: 'douyin',
|
||||
type: 'ai',
|
||||
contentType: 'script',
|
||||
reason: 'AI误判',
|
||||
@ -61,6 +64,7 @@ const mockAppeals: Appeal[] = [
|
||||
taskTitle: '新品口红试色',
|
||||
creatorId: 'creator-002',
|
||||
creatorName: '美妆Lisa',
|
||||
platform: 'xiaohongshu',
|
||||
type: 'agency',
|
||||
contentType: 'video',
|
||||
reason: '审核标准不清晰',
|
||||
@ -74,6 +78,7 @@ const mockAppeals: Appeal[] = [
|
||||
taskTitle: '健身器材推荐',
|
||||
creatorId: 'creator-003',
|
||||
creatorName: '健身教练王',
|
||||
platform: 'bilibili',
|
||||
type: 'ai',
|
||||
contentType: 'script',
|
||||
reason: '违禁词误判',
|
||||
@ -88,6 +93,7 @@ const mockAppeals: Appeal[] = [
|
||||
taskTitle: '美妆新品测评',
|
||||
creatorId: 'creator-004',
|
||||
creatorName: '达人小红',
|
||||
platform: 'xiaohongshu',
|
||||
type: 'agency',
|
||||
contentType: 'video',
|
||||
reason: '品牌调性理解差异',
|
||||
@ -116,38 +122,47 @@ function AppealCard({ appeal }: { appeal: Appeal }) {
|
||||
const status = statusConfig[appeal.status]
|
||||
const type = typeConfig[appeal.type]
|
||||
const StatusIcon = status.icon
|
||||
const platform = getPlatformInfo(appeal.platform)
|
||||
|
||||
return (
|
||||
<Link href={`/agency/appeals/${appeal.id}`}>
|
||||
<div className="p-4 rounded-xl bg-bg-elevated hover:bg-bg-elevated/80 transition-colors cursor-pointer">
|
||||
{/* 顶部：状态和类型 */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-8 h-8 rounded-lg ${status.bgColor} flex items-center justify-center`}>
|
||||
<StatusIcon size={16} className={status.color} />
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium text-text-primary">{appeal.taskTitle}</span>
|
||||
<div className="flex items-center gap-2 text-xs text-text-tertiary">
|
||||
<span className="flex items-center gap-1">
|
||||
<User size={10} />
|
||||
{appeal.creatorName}
|
||||
</span>
|
||||
<span>·</span>
|
||||
<span className="flex items-center gap-1">
|
||||
{appeal.contentType === 'script' ? <FileText size={10} /> : <Video size={10} />}
|
||||
{appeal.contentType === 'script' ? '脚本' : '视频'}
|
||||
</span>
|
||||
<div className="rounded-xl bg-bg-elevated hover:bg-bg-elevated/80 transition-colors cursor-pointer overflow-hidden">
|
||||
{/* 平台顶部条 */}
|
||||
{platform && (
|
||||
<div className={`px-4 py-1.5 ${platform.bgColor} border-b ${platform.borderColor} flex items-center gap-1.5`}>
|
||||
<span className="text-sm">{platform.icon}</span>
|
||||
<span className={`text-xs font-medium ${platform.textColor}`}>{platform.name}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="p-4">
|
||||
{/* 顶部：状态和类型 */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-8 h-8 rounded-lg ${status.bgColor} flex items-center justify-center`}>
|
||||
<StatusIcon size={16} className={status.color} />
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium text-text-primary">{appeal.taskTitle}</span>
|
||||
<div className="flex items-center gap-2 text-xs text-text-tertiary">
|
||||
<span className="flex items-center gap-1">
|
||||
<User size={10} />
|
||||
{appeal.creatorName}
|
||||
</span>
|
||||
<span>·</span>
|
||||
<span className="flex items-center gap-1">
|
||||
{appeal.contentType === 'script' ? <FileText size={10} /> : <Video size={10} />}
|
||||
{appeal.contentType === 'script' ? '脚本' : '视频'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${status.bgColor} ${status.color}`}>
|
||||
{status.label}
|
||||
</span>
|
||||
<ChevronRight size={16} className="text-text-tertiary" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${status.bgColor} ${status.color}`}>
|
||||
{status.label}
|
||||
</span>
|
||||
<ChevronRight size={16} className="text-text-tertiary" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 申诉信息 */}
|
||||
<div className="space-y-2 mb-3">
|
||||
@ -167,6 +182,7 @@ function AppealCard({ appeal }: { appeal: Appeal }) {
|
||||
<span>提交时间: {appeal.createdAt}</span>
|
||||
{appeal.updatedAt && <span>处理时间: {appeal.updatedAt}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
|
||||
@ -15,6 +15,7 @@ import {
|
||||
ChevronRight,
|
||||
Settings
|
||||
} from 'lucide-react'
|
||||
import { getPlatformInfo } from '@/lib/platforms'
|
||||
|
||||
// 模拟 Brief 列表
|
||||
const mockBriefs = [
|
||||
@ -22,6 +23,7 @@ const mockBriefs = [
|
||||
id: 'brief-001',
|
||||
projectName: 'XX品牌618推广',
|
||||
brandName: 'XX护肤品牌',
|
||||
platform: 'douyin',
|
||||
status: 'configured',
|
||||
uploadedAt: '2026-02-01',
|
||||
configuredAt: '2026-02-02',
|
||||
@ -33,6 +35,7 @@ const mockBriefs = [
|
||||
id: 'brief-002',
|
||||
projectName: '新品口红系列',
|
||||
brandName: 'XX美妆品牌',
|
||||
platform: 'xiaohongshu',
|
||||
status: 'pending',
|
||||
uploadedAt: '2026-02-05',
|
||||
configuredAt: null,
|
||||
@ -44,6 +47,7 @@ const mockBriefs = [
|
||||
id: 'brief-003',
|
||||
projectName: '护肤品秋季活动',
|
||||
brandName: 'XX护肤品牌',
|
||||
platform: 'bilibili',
|
||||
status: 'configured',
|
||||
uploadedAt: '2025-09-15',
|
||||
configuredAt: '2025-09-16',
|
||||
@ -74,7 +78,7 @@ export default function AgencyBriefsPage() {
|
||||
const configuredCount = mockBriefs.filter(b => b.status === 'configured').length
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-6 min-h-0">
|
||||
{/* 页面标题 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
@ -136,35 +140,44 @@ export default function AgencyBriefsPage() {
|
||||
|
||||
{/* Brief 列表 */}
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{filteredBriefs.map((brief) => (
|
||||
<Link key={brief.id} href={`/agency/briefs/${brief.id}`}>
|
||||
<Card className="hover:border-accent-indigo/50 transition-colors cursor-pointer">
|
||||
<CardContent className="py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`w-12 h-12 rounded-lg flex items-center justify-center ${
|
||||
brief.status === 'configured' ? 'bg-accent-green/20' : 'bg-yellow-500/20'
|
||||
}`}>
|
||||
{brief.status === 'configured' ? (
|
||||
<CheckCircle size={24} className="text-accent-green" />
|
||||
) : (
|
||||
<AlertTriangle size={24} className="text-yellow-400" />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="font-medium text-text-primary">{brief.projectName}</h3>
|
||||
<StatusTag status={brief.status} />
|
||||
</div>
|
||||
<div className="flex items-center gap-4 mt-1 text-sm text-text-secondary">
|
||||
<span>{brief.brandName}</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock size={12} />
|
||||
上传于 {brief.uploadedAt}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{filteredBriefs.map((brief) => {
|
||||
const platform = getPlatformInfo(brief.platform)
|
||||
return (
|
||||
<Link key={brief.id} href={`/agency/briefs/${brief.id}`}>
|
||||
<Card className="hover:border-accent-indigo/50 transition-colors cursor-pointer overflow-hidden">
|
||||
{/* 平台顶部条 */}
|
||||
{platform && (
|
||||
<div className={`px-6 py-2 ${platform.bgColor} border-b ${platform.borderColor} flex items-center gap-2`}>
|
||||
<span className="text-base">{platform.icon}</span>
|
||||
<span className={`text-sm font-medium ${platform.textColor}`}>{platform.name}</span>
|
||||
</div>
|
||||
)}
|
||||
<CardContent className="py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`w-12 h-12 rounded-lg flex items-center justify-center ${
|
||||
brief.status === 'configured' ? 'bg-accent-green/20' : 'bg-yellow-500/20'
|
||||
}`}>
|
||||
{brief.status === 'configured' ? (
|
||||
<CheckCircle size={24} className="text-accent-green" />
|
||||
) : (
|
||||
<AlertTriangle size={24} className="text-yellow-400" />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="font-medium text-text-primary">{brief.projectName}</h3>
|
||||
<StatusTag status={brief.status} />
|
||||
</div>
|
||||
<div className="flex items-center gap-4 mt-1 text-sm text-text-secondary">
|
||||
<span>{brief.brandName}</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock size={12} />
|
||||
上传于 {brief.uploadedAt}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-8">
|
||||
{brief.status === 'configured' && (
|
||||
@ -201,7 +214,8 @@ export default function AgencyBriefsPage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{filteredBriefs.length === 0 && (
|
||||
|
||||
@ -27,6 +27,7 @@ import {
|
||||
FolderPlus,
|
||||
X
|
||||
} from 'lucide-react'
|
||||
import { getPlatformInfo } from '@/lib/platforms'
|
||||
|
||||
// 任务进度阶段
|
||||
type TaskStage = 'script_pending' | 'script_ai_review' | 'script_agency_review' | 'script_brand_review' |
|
||||
@ -50,6 +51,7 @@ interface CreatorTask {
|
||||
id: string
|
||||
name: string
|
||||
projectName: string
|
||||
platform: string
|
||||
stage: TaskStage
|
||||
appealRemaining: number
|
||||
appealUsed: number
|
||||
@ -95,8 +97,8 @@ const mockCreators: Creator[] = [
|
||||
trend: 'up',
|
||||
joinedAt: '2025-08-15',
|
||||
tasks: [
|
||||
{ id: 'task-001', name: '夏日护肤推广', projectName: 'XX品牌618', stage: 'video_agency_review', appealRemaining: 1, appealUsed: 0 },
|
||||
{ id: 'task-002', name: '防晒霜测评', projectName: 'XX品牌618', stage: 'script_brand_review', appealRemaining: 0, appealUsed: 1 },
|
||||
{ id: 'task-001', name: '夏日护肤推广', projectName: 'XX品牌618', platform: 'douyin', stage: 'video_agency_review', appealRemaining: 1, appealUsed: 0 },
|
||||
{ id: 'task-002', name: '防晒霜测评', projectName: 'XX品牌618', platform: 'douyin', stage: 'script_brand_review', appealRemaining: 0, appealUsed: 1 },
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -112,7 +114,7 @@ const mockCreators: Creator[] = [
|
||||
trend: 'stable',
|
||||
joinedAt: '2025-10-20',
|
||||
tasks: [
|
||||
{ id: 'task-003', name: '新品口红试色', projectName: '口红系列推广', stage: 'video_pending', appealRemaining: 2, appealUsed: 0 },
|
||||
{ id: 'task-003', name: '新品口红试色', projectName: '口红系列推广', platform: 'xiaohongshu', stage: 'video_pending', appealRemaining: 2, appealUsed: 0 },
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -128,7 +130,7 @@ const mockCreators: Creator[] = [
|
||||
trend: 'up',
|
||||
joinedAt: '2025-12-01',
|
||||
tasks: [
|
||||
{ id: 'task-004', name: '健身器材使用教程', projectName: 'XX运动品牌', stage: 'script_ai_review', appealRemaining: 1, appealUsed: 0 },
|
||||
{ id: 'task-004', name: '健身器材使用教程', projectName: 'XX运动品牌', platform: 'bilibili', stage: 'script_ai_review', appealRemaining: 1, appealUsed: 0 },
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -304,7 +306,7 @@ export default function AgencyCreatorsPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-6 min-h-0">
|
||||
{/* 页面标题 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
@ -387,8 +389,8 @@ export default function AgencyCreatorsPage() {
|
||||
|
||||
{/* 达人列表 */}
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<table className="w-full">
|
||||
<CardContent className="p-0 overflow-x-auto">
|
||||
<table className="w-full min-w-[900px]">
|
||||
<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>
|
||||
@ -556,33 +558,45 @@ export default function AgencyCreatorsPage() {
|
||||
<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.map(task => (
|
||||
<div key={task.id} className="flex items-center justify-between p-4 bg-bg-card rounded-xl">
|
||||
<div className="flex items-center gap-4">
|
||||
<div>
|
||||
<div className="font-medium text-text-primary">{task.name}</div>
|
||||
<div className="text-xs text-text-tertiary mt-0.5">项目: {task.projectName}</div>
|
||||
{creator.tasks.map(task => {
|
||||
const taskPlatform = getPlatformInfo(task.platform)
|
||||
return (
|
||||
<div key={task.id} className="bg-bg-card rounded-xl overflow-hidden">
|
||||
{/* 平台顶部条 */}
|
||||
{taskPlatform && (
|
||||
<div className={`px-4 py-1.5 ${taskPlatform.bgColor} border-b ${taskPlatform.borderColor} flex items-center gap-1.5`}>
|
||||
<span className="text-sm">{taskPlatform.icon}</span>
|
||||
<span className={`text-xs font-medium ${taskPlatform.textColor}`}>{taskPlatform.name}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div>
|
||||
<div className="font-medium text-text-primary">{task.name}</div>
|
||||
<div className="text-xs text-text-tertiary mt-0.5">项目: {task.projectName}</div>
|
||||
</div>
|
||||
<StageTag stage={task.stage} />
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<span className="text-text-tertiary">申诉次数:</span>
|
||||
<span className="text-accent-indigo font-medium">{task.appealRemaining}</span>
|
||||
<span className="text-text-tertiary">/</span>
|
||||
<span className="text-text-tertiary">已用 {task.appealUsed}</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => handleAddAppealQuota(creator.id, task.id)}
|
||||
>
|
||||
<PlusCircle size={14} />
|
||||
+1 次
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<StageTag stage={task.stage} />
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<span className="text-text-tertiary">申诉次数:</span>
|
||||
<span className="text-accent-indigo font-medium">{task.appealRemaining}</span>
|
||||
<span className="text-text-tertiary">/</span>
|
||||
<span className="text-text-tertiary">已用 {task.appealUsed}</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => handleAddAppealQuota(creator.id, task.id)}
|
||||
>
|
||||
<PlusCircle size={14} />
|
||||
+1 次
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@ -17,6 +17,7 @@ import {
|
||||
MoreVertical,
|
||||
PlusCircle
|
||||
} from 'lucide-react'
|
||||
import { getPlatformInfo } from '@/lib/platforms'
|
||||
|
||||
// 消息类型
|
||||
interface Message {
|
||||
@ -29,6 +30,7 @@ interface Message {
|
||||
icon: typeof Bell
|
||||
iconColor: string
|
||||
bgColor: string
|
||||
platform?: string
|
||||
// 申诉次数请求专用字段
|
||||
appealRequest?: {
|
||||
creatorName: string
|
||||
@ -50,6 +52,7 @@ const mockMessages: Message[] = [
|
||||
icon: PlusCircle,
|
||||
iconColor: 'text-accent-amber',
|
||||
bgColor: 'bg-accent-amber/20',
|
||||
platform: 'douyin',
|
||||
appealRequest: {
|
||||
creatorName: '李小红',
|
||||
taskName: '618美妆推广视频',
|
||||
@ -67,6 +70,7 @@ const mockMessages: Message[] = [
|
||||
icon: FileText,
|
||||
iconColor: 'text-accent-indigo',
|
||||
bgColor: 'bg-accent-indigo/20',
|
||||
platform: 'xiaohongshu',
|
||||
},
|
||||
{
|
||||
id: 'msg-003',
|
||||
@ -78,6 +82,7 @@ const mockMessages: Message[] = [
|
||||
icon: PlusCircle,
|
||||
iconColor: 'text-accent-amber',
|
||||
bgColor: 'bg-accent-amber/20',
|
||||
platform: 'xiaohongshu',
|
||||
appealRequest: {
|
||||
creatorName: '美妆达人小王',
|
||||
taskName: '双11护肤品种草',
|
||||
@ -95,6 +100,7 @@ const mockMessages: Message[] = [
|
||||
icon: CheckCircle,
|
||||
iconColor: 'text-accent-green',
|
||||
bgColor: 'bg-accent-green/20',
|
||||
platform: 'xiaohongshu',
|
||||
},
|
||||
{
|
||||
id: 'msg-005',
|
||||
@ -106,6 +112,7 @@ const mockMessages: Message[] = [
|
||||
icon: XCircle,
|
||||
iconColor: 'text-accent-coral',
|
||||
bgColor: 'bg-accent-coral/20',
|
||||
platform: 'bilibili',
|
||||
},
|
||||
{
|
||||
id: 'msg-006',
|
||||
@ -117,6 +124,7 @@ const mockMessages: Message[] = [
|
||||
icon: Users,
|
||||
iconColor: 'text-purple-400',
|
||||
bgColor: 'bg-purple-500/20',
|
||||
platform: 'douyin',
|
||||
},
|
||||
{
|
||||
id: 'msg-007',
|
||||
@ -128,6 +136,7 @@ const mockMessages: Message[] = [
|
||||
icon: AlertTriangle,
|
||||
iconColor: 'text-orange-400',
|
||||
bgColor: 'bg-orange-500/20',
|
||||
platform: 'xiaohongshu',
|
||||
},
|
||||
{
|
||||
id: 'msg-008',
|
||||
@ -139,6 +148,7 @@ const mockMessages: Message[] = [
|
||||
icon: Video,
|
||||
iconColor: 'text-purple-400',
|
||||
bgColor: 'bg-purple-500/20',
|
||||
platform: 'bilibili',
|
||||
},
|
||||
]
|
||||
|
||||
@ -222,15 +232,23 @@ export default function AgencyMessagesPage() {
|
||||
const Icon = message.icon
|
||||
const isAppealRequest = message.type === 'appeal_quota_request'
|
||||
const appealStatus = message.appealRequest?.status
|
||||
const platform = message.platform ? getPlatformInfo(message.platform) : null
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={message.id}
|
||||
className={`transition-all ${
|
||||
className={`transition-all overflow-hidden ${
|
||||
!isAppealRequest ? 'cursor-pointer hover:border-accent-indigo/50' : ''
|
||||
} ${!message.read ? 'border-l-4 border-l-accent-indigo' : ''}`}
|
||||
onClick={() => !isAppealRequest && markAsRead(message.id)}
|
||||
>
|
||||
{/* 平台顶部条 */}
|
||||
{platform && (
|
||||
<div className={`px-4 py-1.5 ${platform.bgColor} border-b ${platform.borderColor} flex items-center gap-1.5`}>
|
||||
<span className="text-sm">{platform.icon}</span>
|
||||
<span className={`text-xs font-medium ${platform.textColor}`}>{platform.name}</span>
|
||||
</div>
|
||||
)}
|
||||
<CardContent className="py-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className={`w-10 h-10 rounded-lg ${message.bgColor} flex items-center justify-center flex-shrink-0`}>
|
||||
|
||||
@ -15,6 +15,7 @@ import {
|
||||
MessageSquare,
|
||||
TrendingUp
|
||||
} from 'lucide-react'
|
||||
import { getPlatformInfo } from '@/lib/platforms'
|
||||
|
||||
// 模拟统计数据
|
||||
const stats = {
|
||||
@ -66,6 +67,7 @@ const projectOverview = [
|
||||
{
|
||||
id: 'proj-001',
|
||||
name: 'XX品牌618推广',
|
||||
platform: 'douyin',
|
||||
total: 20,
|
||||
submitted: 15,
|
||||
passed: 10,
|
||||
@ -76,6 +78,7 @@ const projectOverview = [
|
||||
{
|
||||
id: 'proj-002',
|
||||
name: '新品口红系列',
|
||||
platform: 'xiaohongshu',
|
||||
total: 12,
|
||||
submitted: 8,
|
||||
passed: 6,
|
||||
@ -86,6 +89,7 @@ const projectOverview = [
|
||||
{
|
||||
id: 'proj-003',
|
||||
name: '护肤品秋季活动',
|
||||
platform: 'bilibili',
|
||||
total: 15,
|
||||
submitted: 12,
|
||||
passed: 9,
|
||||
@ -102,6 +106,7 @@ const pendingTasks = [
|
||||
videoTitle: '夏日护肤推广',
|
||||
creatorName: '小美护肤',
|
||||
brandName: 'XX品牌',
|
||||
platform: 'douyin',
|
||||
aiScore: 85,
|
||||
submittedAt: '2026-02-04 14:30',
|
||||
hasHighRisk: false,
|
||||
@ -111,6 +116,7 @@ const pendingTasks = [
|
||||
videoTitle: '新品口红试色',
|
||||
creatorName: '美妆达人Lisa',
|
||||
brandName: 'XX品牌',
|
||||
platform: 'xiaohongshu',
|
||||
aiScore: 72,
|
||||
submittedAt: '2026-02-04 13:45',
|
||||
hasHighRisk: true,
|
||||
@ -120,6 +126,7 @@ const pendingTasks = [
|
||||
videoTitle: '健身器材开箱',
|
||||
creatorName: '健身教练王',
|
||||
brandName: 'XX运动',
|
||||
platform: 'bilibili',
|
||||
aiScore: 68,
|
||||
submittedAt: '2026-02-04 14:50',
|
||||
hasHighRisk: true,
|
||||
@ -134,7 +141,7 @@ function UrgentLevelIcon({ level }: { level: string }) {
|
||||
|
||||
export default function AgencyDashboard() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-6 min-h-0">
|
||||
{/* 页面标题 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold text-text-primary">代理商工作台</h1>
|
||||
@ -251,10 +258,19 @@ export default function AgencyDashboard() {
|
||||
<div className="space-y-4">
|
||||
{projectOverview.map((project) => {
|
||||
const totalReviewing = project.reviewingScript + project.reviewingVideo
|
||||
const projectPlatform = getPlatformInfo(project.platform)
|
||||
return (
|
||||
<div key={project.id} className="p-4 rounded-lg bg-bg-elevated">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="font-medium text-text-primary">{project.name}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-text-primary">{project.name}</span>
|
||||
{projectPlatform && (
|
||||
<span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium ${projectPlatform.bgColor} ${projectPlatform.textColor}`}>
|
||||
<span>{projectPlatform.icon}</span>
|
||||
{projectPlatform.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-sm text-text-secondary">
|
||||
{project.submitted}/{project.total} 已提交
|
||||
</span>
|
||||
@ -312,7 +328,7 @@ export default function AgencyDashboard() {
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
<span>待审核任务</span>
|
||||
<Link href="/agency/tasks">
|
||||
<Link href="/agency/review">
|
||||
<Button variant="ghost" size="sm">
|
||||
查看全部
|
||||
<ChevronRight size={16} />
|
||||
@ -326,6 +342,7 @@ export default function AgencyDashboard() {
|
||||
<thead>
|
||||
<tr className="border-b border-border-subtle text-left text-sm text-text-secondary">
|
||||
<th className="pb-3 font-medium">视频</th>
|
||||
<th className="pb-3 font-medium">平台</th>
|
||||
<th className="pb-3 font-medium">达人</th>
|
||||
<th className="pb-3 font-medium">品牌</th>
|
||||
<th className="pb-3 font-medium">AI评分</th>
|
||||
@ -334,35 +351,46 @@ export default function AgencyDashboard() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{pendingTasks.map((task) => (
|
||||
<tr key={task.id} className="border-b border-border-subtle last:border-0 hover:bg-bg-elevated">
|
||||
<td className="py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="font-medium text-text-primary">{task.videoTitle}</div>
|
||||
{task.hasHighRisk && (
|
||||
<span className="px-1.5 py-0.5 text-xs bg-accent-coral/20 text-accent-coral rounded">
|
||||
高风险
|
||||
{pendingTasks.map((task) => {
|
||||
const platform = getPlatformInfo(task.platform)
|
||||
return (
|
||||
<tr key={task.id} className="border-b border-border-subtle last:border-0 hover:bg-bg-elevated">
|
||||
<td className="py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="font-medium text-text-primary">{task.videoTitle}</div>
|
||||
{task.hasHighRisk && (
|
||||
<span className="px-1.5 py-0.5 text-xs bg-accent-coral/20 text-accent-coral rounded">
|
||||
高风险
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-4">
|
||||
{platform && (
|
||||
<span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium ${platform.bgColor} ${platform.textColor} border ${platform.borderColor}`}>
|
||||
<span>{platform.icon}</span>
|
||||
{platform.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-4 text-text-secondary">{task.creatorName}</td>
|
||||
<td className="py-4 text-text-secondary">{task.brandName}</td>
|
||||
<td className="py-4">
|
||||
<span className={`font-medium ${
|
||||
task.aiScore >= 80 ? 'text-accent-green' : task.aiScore >= 60 ? 'text-yellow-400' : 'text-accent-coral'
|
||||
}`}>
|
||||
{task.aiScore}分
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 text-sm text-text-tertiary">{task.submittedAt}</td>
|
||||
<td className="py-4">
|
||||
<Link href={`/agency/review/${task.id}`}>
|
||||
<Button size="sm">审核</Button>
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</td>
|
||||
<td className="py-4 text-text-secondary">{task.creatorName}</td>
|
||||
<td className="py-4 text-text-secondary">{task.brandName}</td>
|
||||
<td className="py-4">
|
||||
<span className={`font-medium ${
|
||||
task.aiScore >= 80 ? 'text-accent-green' : task.aiScore >= 60 ? 'text-yellow-400' : 'text-accent-coral'
|
||||
}`}>
|
||||
{task.aiScore}分
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 text-sm text-text-tertiary">{task.submittedAt}</td>
|
||||
<td className="py-4">
|
||||
<Link href={`/agency/review/${task.id}`}>
|
||||
<Button size="sm">审核</Button>
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -20,6 +20,7 @@ import {
|
||||
File,
|
||||
Check
|
||||
} from 'lucide-react'
|
||||
import { getPlatformInfo } from '@/lib/platforms'
|
||||
|
||||
// 时间范围类型
|
||||
type DateRange = 'week' | 'month' | 'quarter' | 'year'
|
||||
@ -113,10 +114,10 @@ const mockDataByRange: Record<DateRange, {
|
||||
}
|
||||
|
||||
const mockProjectStats = [
|
||||
{ name: 'XX品牌618推广', scripts: 45, videos: 38, passRate: 92 },
|
||||
{ name: '新品口红系列', scripts: 32, videos: 28, passRate: 85 },
|
||||
{ name: '护肤品秋季活动', scripts: 28, videos: 25, passRate: 78 },
|
||||
{ name: 'XX运动品牌', scripts: 51, videos: 37, passRate: 88 },
|
||||
{ name: 'XX品牌618推广', platform: 'douyin', scripts: 45, videos: 38, passRate: 92 },
|
||||
{ name: '新品口红系列', platform: 'xiaohongshu', scripts: 32, videos: 28, passRate: 85 },
|
||||
{ name: '护肤品秋季活动', platform: 'bilibili', scripts: 28, videos: 25, passRate: 78 },
|
||||
{ name: 'XX运动品牌', platform: 'kuaishou', scripts: 51, videos: 37, passRate: 88 },
|
||||
]
|
||||
|
||||
const mockCreatorRanking = [
|
||||
@ -399,6 +400,7 @@ export default function AgencyReportsPage() {
|
||||
<thead>
|
||||
<tr className="border-b border-border-subtle text-left text-sm text-text-secondary">
|
||||
<th className="pb-3 font-medium">项目名称</th>
|
||||
<th className="pb-3 font-medium">平台</th>
|
||||
<th className="pb-3 font-medium text-center">脚本数</th>
|
||||
<th className="pb-3 font-medium text-center">视频数</th>
|
||||
<th className="pb-3 font-medium text-center">通过率</th>
|
||||
@ -406,26 +408,37 @@ export default function AgencyReportsPage() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{mockProjectStats.map((project) => (
|
||||
<tr key={project.name} className="border-b border-border-subtle last:border-0">
|
||||
<td className="py-4 font-medium text-text-primary">{project.name}</td>
|
||||
<td className="py-4 text-center text-text-secondary">{project.scripts}</td>
|
||||
<td className="py-4 text-center text-text-secondary">{project.videos}</td>
|
||||
<td className="py-4 text-center">
|
||||
<span className={`font-medium ${project.passRate >= 90 ? 'text-accent-green' : project.passRate >= 80 ? 'text-accent-indigo' : 'text-orange-400'}`}>
|
||||
{project.passRate}%
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4">
|
||||
<div className="w-full h-2 bg-bg-elevated rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full ${project.passRate >= 90 ? 'bg-accent-green' : project.passRate >= 80 ? 'bg-accent-indigo' : 'bg-orange-400'}`}
|
||||
style={{ width: `${project.passRate}%` }}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{mockProjectStats.map((project) => {
|
||||
const platform = getPlatformInfo(project.platform)
|
||||
return (
|
||||
<tr key={project.name} className="border-b border-border-subtle last:border-0">
|
||||
<td className="py-4 font-medium text-text-primary">{project.name}</td>
|
||||
<td className="py-4">
|
||||
{platform && (
|
||||
<span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium ${platform.bgColor} ${platform.textColor} border ${platform.borderColor}`}>
|
||||
<span>{platform.icon}</span>
|
||||
{platform.name}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-4 text-center text-text-secondary">{project.scripts}</td>
|
||||
<td className="py-4 text-center text-text-secondary">{project.videos}</td>
|
||||
<td className="py-4 text-center">
|
||||
<span className={`font-medium ${project.passRate >= 90 ? 'text-accent-green' : project.passRate >= 80 ? 'text-accent-indigo' : 'text-orange-400'}`}>
|
||||
{project.passRate}%
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4">
|
||||
<div className="w-full h-2 bg-bg-elevated rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full ${project.passRate >= 90 ? 'bg-accent-green' : project.passRate >= 80 ? 'bg-accent-indigo' : 'bg-orange-400'}`}
|
||||
style={{ width: `${project.passRate}%` }}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</CardContent>
|
||||
|
||||
@ -18,6 +18,7 @@ import {
|
||||
Eye,
|
||||
File
|
||||
} from 'lucide-react'
|
||||
import { getPlatformInfo } from '@/lib/platforms'
|
||||
|
||||
// 模拟脚本待审列表
|
||||
const mockScriptTasks = [
|
||||
@ -28,6 +29,7 @@ const mockScriptTasks = [
|
||||
fileSize: '245 KB',
|
||||
creatorName: '小美护肤',
|
||||
projectName: 'XX品牌618推广',
|
||||
platform: 'douyin',
|
||||
aiScore: 88,
|
||||
riskLevel: 'low' as const,
|
||||
submittedAt: '2026-02-06 14:30',
|
||||
@ -40,6 +42,7 @@ const mockScriptTasks = [
|
||||
fileSize: '312 KB',
|
||||
creatorName: '美妆Lisa',
|
||||
projectName: 'XX品牌618推广',
|
||||
platform: 'xiaohongshu',
|
||||
aiScore: 72,
|
||||
riskLevel: 'medium' as const,
|
||||
submittedAt: '2026-02-06 12:15',
|
||||
@ -52,6 +55,7 @@ const mockScriptTasks = [
|
||||
fileSize: '189 KB',
|
||||
creatorName: '健身教练王',
|
||||
projectName: 'XX运动品牌',
|
||||
platform: 'bilibili',
|
||||
aiScore: 95,
|
||||
riskLevel: 'low' as const,
|
||||
submittedAt: '2026-02-06 10:00',
|
||||
@ -64,6 +68,7 @@ const mockScriptTasks = [
|
||||
fileSize: '278 KB',
|
||||
creatorName: '达人D',
|
||||
projectName: 'XX品牌618推广',
|
||||
platform: 'kuaishou',
|
||||
aiScore: 62,
|
||||
riskLevel: 'high' as const,
|
||||
submittedAt: '2026-02-06 09:00',
|
||||
@ -80,6 +85,7 @@ const mockVideoTasks = [
|
||||
fileSize: '128 MB',
|
||||
creatorName: '小美护肤',
|
||||
projectName: 'XX品牌618推广',
|
||||
platform: 'douyin',
|
||||
aiScore: 85,
|
||||
riskLevel: 'low' as const,
|
||||
duration: '02:15',
|
||||
@ -93,6 +99,7 @@ const mockVideoTasks = [
|
||||
fileSize: '256 MB',
|
||||
creatorName: '美妆Lisa',
|
||||
projectName: 'XX品牌618推广',
|
||||
platform: 'xiaohongshu',
|
||||
aiScore: 68,
|
||||
riskLevel: 'medium' as const,
|
||||
duration: '03:42',
|
||||
@ -106,6 +113,7 @@ const mockVideoTasks = [
|
||||
fileSize: '198 MB',
|
||||
creatorName: '达人C',
|
||||
projectName: 'XX品牌618推广',
|
||||
platform: 'bilibili',
|
||||
aiScore: 58,
|
||||
riskLevel: 'high' as const,
|
||||
duration: '04:20',
|
||||
@ -119,6 +127,7 @@ const mockVideoTasks = [
|
||||
fileSize: '167 MB',
|
||||
creatorName: '达人D',
|
||||
projectName: 'XX品牌618推广',
|
||||
platform: 'wechat',
|
||||
aiScore: 91,
|
||||
riskLevel: 'low' as const,
|
||||
duration: '01:45',
|
||||
@ -145,6 +154,7 @@ type VideoTask = typeof mockVideoTasks[0]
|
||||
|
||||
function ScriptTaskCard({ task }: { task: ScriptTask }) {
|
||||
const riskConfig = riskLevelConfig[task.riskLevel]
|
||||
const platform = getPlatformInfo(task.platform)
|
||||
|
||||
const handleDownload = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
@ -153,15 +163,23 @@ function ScriptTaskCard({ task }: { task: ScriptTask }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 rounded-xl bg-bg-elevated">
|
||||
{/* 顶部：达人名 · 任务名 + 状态标签 */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2 h-2 rounded-full ${riskConfig.color}`} />
|
||||
<span className="font-medium text-text-primary">{task.creatorName} · {task.title}</span>
|
||||
<div className="rounded-xl bg-bg-elevated overflow-hidden">
|
||||
{/* 平台顶部条 */}
|
||||
{platform && (
|
||||
<div className={`px-4 py-1.5 ${platform.bgColor} border-b ${platform.borderColor} flex items-center gap-1.5`}>
|
||||
<span className="text-sm">{platform.icon}</span>
|
||||
<span className={`text-xs font-medium ${platform.textColor}`}>{platform.name}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="p-4">
|
||||
{/* 顶部：达人名 · 任务名 + 状态标签 */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2 h-2 rounded-full ${riskConfig.color}`} />
|
||||
<span className="font-medium text-text-primary">{task.creatorName} · {task.title}</span>
|
||||
</div>
|
||||
<span className={`text-xs ${riskConfig.textColor}`}>{riskConfig.label}</span>
|
||||
</div>
|
||||
<span className={`text-xs ${riskConfig.textColor}`}>{riskConfig.label}</span>
|
||||
</div>
|
||||
|
||||
{/* 文件信息 */}
|
||||
<div className="flex items-center gap-3 p-3 rounded-lg bg-bg-page mb-3">
|
||||
@ -198,12 +216,14 @@ function ScriptTaskCard({ task }: { task: ScriptTask }) {
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function VideoTaskCard({ task }: { task: VideoTask }) {
|
||||
const riskConfig = riskLevelConfig[task.riskLevel]
|
||||
const platform = getPlatformInfo(task.platform)
|
||||
|
||||
const handleDownload = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
@ -212,15 +232,23 @@ function VideoTaskCard({ task }: { task: VideoTask }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 rounded-xl bg-bg-elevated">
|
||||
{/* 顶部：达人名 · 任务名 + 状态标签 */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2 h-2 rounded-full ${riskConfig.color}`} />
|
||||
<span className="font-medium text-text-primary">{task.creatorName} · {task.title}</span>
|
||||
<div className="rounded-xl bg-bg-elevated overflow-hidden">
|
||||
{/* 平台顶部条 */}
|
||||
{platform && (
|
||||
<div className={`px-4 py-1.5 ${platform.bgColor} border-b ${platform.borderColor} flex items-center gap-1.5`}>
|
||||
<span className="text-sm">{platform.icon}</span>
|
||||
<span className={`text-xs font-medium ${platform.textColor}`}>{platform.name}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="p-4">
|
||||
{/* 顶部：达人名 · 任务名 + 状态标签 */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2 h-2 rounded-full ${riskConfig.color}`} />
|
||||
<span className="font-medium text-text-primary">{task.creatorName} · {task.title}</span>
|
||||
</div>
|
||||
<span className={`text-xs ${riskConfig.textColor}`}>{riskConfig.label}</span>
|
||||
</div>
|
||||
<span className={`text-xs ${riskConfig.textColor}`}>{riskConfig.label}</span>
|
||||
</div>
|
||||
|
||||
{/* 文件信息 */}
|
||||
<div className="flex items-center gap-3 p-3 rounded-lg bg-bg-page mb-3">
|
||||
@ -257,6 +285,7 @@ function VideoTaskCard({ task }: { task: VideoTask }) {
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -276,7 +305,7 @@ export default function AgencyReviewListPage() {
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-6 min-h-0">
|
||||
{/* 页面标题 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
|
||||
@ -238,7 +238,7 @@ export default function AgenciesManagePage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-6 min-h-0">
|
||||
{/* 页面标题 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
@ -325,8 +325,8 @@ export default function AgenciesManagePage() {
|
||||
|
||||
{/* 代理商列表 */}
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<table className="w-full">
|
||||
<CardContent className="p-0 overflow-x-auto">
|
||||
<table className="w-full min-w-[900px]">
|
||||
<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>
|
||||
|
||||
@ -1,13 +1,23 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Plus, FileText, Upload, Trash2, Edit } from 'lucide-react'
|
||||
import { Plus, FileText, Upload, Trash2, Edit, Check, Search, X, Eye } from 'lucide-react'
|
||||
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 } from '@/components/ui/Tag'
|
||||
|
||||
// 平台选项
|
||||
const platformOptions = [
|
||||
{ id: 'douyin', name: '抖音', icon: '🎵', color: 'bg-[#1a1a1a]' },
|
||||
{ id: 'xiaohongshu', name: '小红书', icon: '📕', color: 'bg-[#fe2c55]' },
|
||||
{ id: 'bilibili', name: 'B站', icon: '📺', color: 'bg-[#00a1d6]' },
|
||||
{ id: 'kuaishou', name: '快手', icon: '⚡', color: 'bg-[#ff4906]' },
|
||||
{ id: 'weibo', name: '微博', icon: '🔴', color: 'bg-[#e6162d]' },
|
||||
{ id: 'wechat', name: '微信视频号', icon: '💬', color: 'bg-[#07c160]' },
|
||||
]
|
||||
|
||||
// 模拟 Brief 列表
|
||||
const mockBriefs = [
|
||||
{
|
||||
@ -15,6 +25,7 @@ const mockBriefs = [
|
||||
name: '2024 夏日护肤活动',
|
||||
description: '夏日护肤系列产品推广规范',
|
||||
status: 'active',
|
||||
platforms: ['douyin', 'xiaohongshu'],
|
||||
rulesCount: 12,
|
||||
creatorsCount: 45,
|
||||
createdAt: '2024-01-15',
|
||||
@ -25,6 +36,7 @@ const mockBriefs = [
|
||||
name: '新品口红上市',
|
||||
description: '春季新品口红营销 Brief',
|
||||
status: 'active',
|
||||
platforms: ['xiaohongshu', 'bilibili'],
|
||||
rulesCount: 8,
|
||||
creatorsCount: 32,
|
||||
createdAt: '2024-02-01',
|
||||
@ -35,6 +47,7 @@ const mockBriefs = [
|
||||
name: '年货节活动',
|
||||
description: '春节年货促销活动规范',
|
||||
status: 'archived',
|
||||
platforms: ['douyin', 'kuaishou'],
|
||||
rulesCount: 15,
|
||||
creatorsCount: 78,
|
||||
createdAt: '2024-01-01',
|
||||
@ -43,40 +56,104 @@ const mockBriefs = [
|
||||
]
|
||||
|
||||
export default function BriefsPage() {
|
||||
const [briefs] = useState(mockBriefs)
|
||||
const [briefs, setBriefs] = useState(mockBriefs)
|
||||
const [showCreateModal, setShowCreateModal] = useState(false)
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
|
||||
// 新建 Brief 表单
|
||||
const [newBriefName, setNewBriefName] = useState('')
|
||||
const [newBriefDesc, setNewBriefDesc] = useState('')
|
||||
const [selectedPlatforms, setSelectedPlatforms] = useState<string[]>([])
|
||||
|
||||
// 查看详情
|
||||
const [showDetailModal, setShowDetailModal] = useState(false)
|
||||
const [selectedBrief, setSelectedBrief] = useState<typeof mockBriefs[0] | null>(null)
|
||||
|
||||
const filteredBriefs = briefs.filter((brief) =>
|
||||
brief.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
)
|
||||
|
||||
// 切换平台选择
|
||||
const togglePlatform = (platformId: string) => {
|
||||
setSelectedPlatforms(prev =>
|
||||
prev.includes(platformId)
|
||||
? prev.filter(id => id !== platformId)
|
||||
: [...prev, platformId]
|
||||
)
|
||||
}
|
||||
|
||||
// 获取平台信息
|
||||
const getPlatformInfo = (platformId: string) => {
|
||||
return platformOptions.find(p => p.id === platformId)
|
||||
}
|
||||
|
||||
// 创建 Brief
|
||||
const handleCreateBrief = () => {
|
||||
if (!newBriefName.trim() || selectedPlatforms.length === 0) return
|
||||
|
||||
const newBrief = {
|
||||
id: `brief-${Date.now()}`,
|
||||
name: newBriefName,
|
||||
description: newBriefDesc,
|
||||
status: 'active' as const,
|
||||
platforms: selectedPlatforms,
|
||||
rulesCount: 0,
|
||||
creatorsCount: 0,
|
||||
createdAt: new Date().toISOString().split('T')[0],
|
||||
updatedAt: new Date().toISOString().split('T')[0],
|
||||
}
|
||||
|
||||
setBriefs([newBrief, ...briefs])
|
||||
setShowCreateModal(false)
|
||||
setNewBriefName('')
|
||||
setNewBriefDesc('')
|
||||
setSelectedPlatforms([])
|
||||
}
|
||||
|
||||
// 查看 Brief 详情
|
||||
const viewBriefDetail = (brief: typeof mockBriefs[0]) => {
|
||||
setSelectedBrief(brief)
|
||||
setShowDetailModal(true)
|
||||
}
|
||||
|
||||
// 删除 Brief
|
||||
const handleDeleteBrief = (id: string) => {
|
||||
setBriefs(briefs.filter(b => b.id !== id))
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Brief 管理</h1>
|
||||
<Button icon={Plus} onClick={() => setShowCreateModal(true)}>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-text-primary">Brief 管理</h1>
|
||||
<p className="text-sm text-text-secondary mt-1">创建和管理营销 Brief，配置不同平台的审核规则</p>
|
||||
</div>
|
||||
<Button onClick={() => setShowCreateModal(true)}>
|
||||
<Plus size={16} />
|
||||
新建 Brief
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 搜索 */}
|
||||
<div className="max-w-md">
|
||||
<Input
|
||||
<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="搜索 Brief..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2.5 border border-border-subtle rounded-xl bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Brief 列表 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{filteredBriefs.map((brief) => (
|
||||
<Card key={brief.id} className="hover:shadow-md transition-shadow">
|
||||
<Card key={brief.id} className="hover:shadow-md transition-shadow border border-border-subtle">
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="p-2 bg-blue-50 rounded-lg">
|
||||
<FileText size={24} className="text-blue-600" />
|
||||
<div className="p-2 bg-accent-indigo/15 rounded-lg">
|
||||
<FileText size={24} className="text-accent-indigo" />
|
||||
</div>
|
||||
{brief.status === 'active' ? (
|
||||
<SuccessTag>使用中</SuccessTag>
|
||||
@ -85,24 +162,57 @@ export default function BriefsPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h3 className="font-semibold text-gray-900 mb-1">{brief.name}</h3>
|
||||
<p className="text-sm text-gray-500 mb-4">{brief.description}</p>
|
||||
<h3 className="font-semibold text-text-primary mb-1">{brief.name}</h3>
|
||||
<p className="text-sm text-text-tertiary mb-3">{brief.description}</p>
|
||||
|
||||
<div className="flex gap-4 text-sm text-gray-500 mb-4">
|
||||
{/* 平台标签 */}
|
||||
<div className="flex flex-wrap gap-1.5 mb-3">
|
||||
{brief.platforms.map(platformId => {
|
||||
const platform = getPlatformInfo(platformId)
|
||||
return platform ? (
|
||||
<span
|
||||
key={platformId}
|
||||
className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-bg-elevated text-xs text-text-secondary"
|
||||
>
|
||||
<span>{platform.icon}</span>
|
||||
{platform.name}
|
||||
</span>
|
||||
) : null
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 text-sm text-text-tertiary mb-4">
|
||||
<span>{brief.rulesCount} 条规则</span>
|
||||
<span>{brief.creatorsCount} 位达人</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-3 border-t">
|
||||
<span className="text-xs text-gray-400">
|
||||
<div className="flex items-center justify-between pt-3 border-t border-border-subtle">
|
||||
<span className="text-xs text-text-tertiary">
|
||||
更新于 {brief.updatedAt}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<button type="button" className="p-1 hover:bg-gray-100 rounded">
|
||||
<Edit size={16} className="text-gray-500" />
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => viewBriefDetail(brief)}
|
||||
className="p-1.5 hover:bg-bg-elevated rounded-lg transition-colors"
|
||||
title="查看详情"
|
||||
>
|
||||
<Eye size={16} className="text-text-tertiary hover:text-accent-indigo" />
|
||||
</button>
|
||||
<button type="button" className="p-1 hover:bg-gray-100 rounded">
|
||||
<Trash2 size={16} className="text-gray-500" />
|
||||
<button
|
||||
type="button"
|
||||
className="p-1.5 hover:bg-bg-elevated rounded-lg transition-colors"
|
||||
title="编辑"
|
||||
>
|
||||
<Edit size={16} className="text-text-tertiary hover:text-accent-indigo" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDeleteBrief(brief.id)}
|
||||
className="p-1.5 hover:bg-accent-coral/10 rounded-lg transition-colors"
|
||||
title="删除"
|
||||
>
|
||||
<Trash2 size={16} className="text-text-tertiary hover:text-accent-coral" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -111,58 +221,210 @@ export default function BriefsPage() {
|
||||
))}
|
||||
|
||||
{/* 新建卡片 */}
|
||||
<Card
|
||||
className="border-dashed cursor-pointer hover:border-blue-400 hover:bg-blue-50/50 transition-colors"
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowCreateModal(true)}
|
||||
className="p-5 rounded-xl border-2 border-dashed border-border-subtle hover:border-accent-indigo hover:bg-accent-indigo/5 transition-all flex flex-col items-center justify-center min-h-[240px]"
|
||||
>
|
||||
<CardContent className="p-5 flex flex-col items-center justify-center h-full min-h-[200px]">
|
||||
<div className="p-3 bg-gray-100 rounded-full mb-3">
|
||||
<Plus size={24} className="text-gray-500" />
|
||||
</div>
|
||||
<span className="text-gray-500">新建 Brief</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="p-3 bg-bg-elevated rounded-full mb-3">
|
||||
<Plus size={24} className="text-text-tertiary" />
|
||||
</div>
|
||||
<span className="text-text-tertiary font-medium">新建 Brief</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 新建 Brief 弹窗 */}
|
||||
<Modal
|
||||
isOpen={showCreateModal}
|
||||
onClose={() => setShowCreateModal(false)}
|
||||
onClose={() => {
|
||||
setShowCreateModal(false)
|
||||
setNewBriefName('')
|
||||
setNewBriefDesc('')
|
||||
setSelectedPlatforms([])
|
||||
}}
|
||||
title="新建 Brief"
|
||||
size="md"
|
||||
size="lg"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<Input label="Brief 名称" placeholder="输入 Brief 名称" />
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">描述</label>
|
||||
<label className="block text-sm font-medium text-text-primary mb-2">Brief 名称</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newBriefName}
|
||||
onChange={(e) => setNewBriefName(e.target.value)}
|
||||
placeholder="输入 Brief 名称"
|
||||
className="w-full px-4 py-2.5 border border-border-subtle rounded-xl bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-primary mb-2">描述</label>
|
||||
<textarea
|
||||
className="w-full h-20 p-3 border rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
value={newBriefDesc}
|
||||
onChange={(e) => setNewBriefDesc(e.target.value)}
|
||||
className="w-full h-20 px-4 py-3 border border-border-subtle rounded-xl bg-bg-elevated text-text-primary resize-none focus:outline-none focus:ring-2 focus:ring-accent-indigo"
|
||||
placeholder="输入 Brief 描述..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 上传 PDF */}
|
||||
{/* 选择平台规则库 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
上传 Brief 文档（可选）
|
||||
<label className="block text-sm font-medium text-text-primary mb-2">
|
||||
选择平台规则库 <span className="text-accent-coral">*</span>
|
||||
</label>
|
||||
<div className="border-2 border-dashed rounded-lg p-6 text-center hover:border-blue-400 transition-colors cursor-pointer">
|
||||
<Upload size={32} className="mx-auto text-gray-400 mb-2" />
|
||||
<p className="text-sm text-gray-600">点击或拖拽上传 PDF 文件</p>
|
||||
<p className="text-xs text-gray-400 mt-1">AI 将自动提取规则</p>
|
||||
<p className="text-xs text-text-tertiary mb-3">选择要应用的平台审核规则，可多选</p>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
{platformOptions.map((platform) => (
|
||||
<button
|
||||
key={platform.id}
|
||||
type="button"
|
||||
onClick={() => togglePlatform(platform.id)}
|
||||
className={`p-3 rounded-xl border-2 transition-all flex items-center gap-3 ${
|
||||
selectedPlatforms.includes(platform.id)
|
||||
? 'border-accent-indigo bg-accent-indigo/10'
|
||||
: 'border-border-subtle hover:border-accent-indigo/50'
|
||||
}`}
|
||||
>
|
||||
<div className={`w-10 h-10 ${platform.color} rounded-lg flex items-center justify-center text-lg`}>
|
||||
{platform.icon}
|
||||
</div>
|
||||
<div className="flex-1 text-left">
|
||||
<p className="font-medium text-text-primary">{platform.name}</p>
|
||||
</div>
|
||||
{selectedPlatforms.includes(platform.id) && (
|
||||
<div className="w-5 h-5 rounded-full bg-accent-indigo flex items-center justify-center">
|
||||
<Check size={12} className="text-white" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 justify-end pt-4">
|
||||
<Button variant="ghost" onClick={() => setShowCreateModal(false)}>
|
||||
{/* 上传 PDF */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-primary mb-2">
|
||||
上传 Brief 文档（可选）
|
||||
</label>
|
||||
<div className="border-2 border-dashed border-border-subtle rounded-xl p-6 text-center hover:border-accent-indigo transition-colors cursor-pointer">
|
||||
<Upload size={32} className="mx-auto text-text-tertiary mb-2" />
|
||||
<p className="text-sm text-text-primary">点击或拖拽上传 PDF 文件</p>
|
||||
<p className="text-xs text-text-tertiary mt-1">AI 将自动提取规则</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 justify-end pt-4 border-t border-border-subtle">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
setShowCreateModal(false)
|
||||
setNewBriefName('')
|
||||
setNewBriefDesc('')
|
||||
setSelectedPlatforms([])
|
||||
}}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={() => setShowCreateModal(false)}>
|
||||
创建
|
||||
<Button
|
||||
onClick={handleCreateBrief}
|
||||
disabled={!newBriefName.trim() || selectedPlatforms.length === 0}
|
||||
>
|
||||
创建 Brief
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
{/* Brief 详情弹窗 */}
|
||||
<Modal
|
||||
isOpen={showDetailModal}
|
||||
onClose={() => {
|
||||
setShowDetailModal(false)
|
||||
setSelectedBrief(null)
|
||||
}}
|
||||
title={selectedBrief?.name || 'Brief 详情'}
|
||||
size="lg"
|
||||
>
|
||||
{selectedBrief && (
|
||||
<div className="space-y-5">
|
||||
<div className="flex items-center gap-4 p-4 rounded-xl bg-bg-elevated">
|
||||
<div className="p-3 bg-accent-indigo/15 rounded-xl">
|
||||
<FileText size={28} className="text-accent-indigo" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-text-primary">{selectedBrief.name}</h3>
|
||||
<p className="text-sm text-text-tertiary mt-0.5">{selectedBrief.description}</p>
|
||||
</div>
|
||||
{selectedBrief.status === 'active' ? (
|
||||
<SuccessTag>使用中</SuccessTag>
|
||||
) : (
|
||||
<PendingTag>已归档</PendingTag>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 应用的平台规则库 */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-text-primary mb-3">应用的平台规则库</h4>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{selectedBrief.platforms.map(platformId => {
|
||||
const platform = getPlatformInfo(platformId)
|
||||
return platform ? (
|
||||
<div
|
||||
key={platformId}
|
||||
className="p-3 rounded-xl bg-bg-elevated border border-border-subtle flex items-center gap-3"
|
||||
>
|
||||
<div className={`w-10 h-10 ${platform.color} rounded-lg flex items-center justify-center text-lg`}>
|
||||
{platform.icon}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-text-primary">{platform.name}</p>
|
||||
<p className="text-xs text-text-tertiary">规则库已启用</p>
|
||||
</div>
|
||||
</div>
|
||||
) : null
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 统计数据 */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="p-4 rounded-xl bg-accent-indigo/10 border border-accent-indigo/20 text-center">
|
||||
<p className="text-2xl font-bold text-accent-indigo">{selectedBrief.rulesCount}</p>
|
||||
<p className="text-sm text-text-secondary mt-1">自定义规则</p>
|
||||
</div>
|
||||
<div className="p-4 rounded-xl bg-accent-green/10 border border-accent-green/20 text-center">
|
||||
<p className="text-2xl font-bold text-accent-green">{selectedBrief.creatorsCount}</p>
|
||||
<p className="text-sm text-text-secondary mt-1">关联达人</p>
|
||||
</div>
|
||||
<div className="p-4 rounded-xl bg-accent-amber/10 border border-accent-amber/20 text-center">
|
||||
<p className="text-2xl font-bold text-accent-amber">{selectedBrief.platforms.length}</p>
|
||||
<p className="text-sm text-text-secondary mt-1">平台规则库</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 时间信息 */}
|
||||
<div className="flex items-center justify-between p-4 rounded-xl bg-bg-elevated text-sm">
|
||||
<div>
|
||||
<span className="text-text-tertiary">创建时间：</span>
|
||||
<span className="text-text-primary">{selectedBrief.createdAt}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-text-tertiary">最后更新：</span>
|
||||
<span className="text-text-primary">{selectedBrief.updatedAt}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 justify-end pt-4 border-t border-border-subtle">
|
||||
<Button variant="ghost" onClick={() => setShowDetailModal(false)}>
|
||||
关闭
|
||||
</Button>
|
||||
<Button>
|
||||
编辑 Brief
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@ import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { ArrowLeft, Check, X, CheckSquare, Video, Clock } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { getPlatformInfo } from '@/lib/platforms'
|
||||
|
||||
// 模拟待审核内容列表
|
||||
const mockReviewItems = [
|
||||
@ -12,6 +13,7 @@ const mockReviewItems = [
|
||||
title: '春季护肤新品体验分享',
|
||||
creator: '小美',
|
||||
agency: '代理商A',
|
||||
platform: 'douyin',
|
||||
reviewer: '张三',
|
||||
reviewTime: '2小时前',
|
||||
agencyOpinion: '内容符合Brief要求，卖点覆盖完整，建议通过。',
|
||||
@ -29,6 +31,7 @@ const mockReviewItems = [
|
||||
title: '夏日清爽护肤推荐',
|
||||
creator: '小红',
|
||||
agency: '代理商B',
|
||||
platform: 'xiaohongshu',
|
||||
reviewer: '李四',
|
||||
reviewTime: '5小时前',
|
||||
agencyOpinion: '内容质量良好，但部分镜头略暗，建议后期调整后通过。',
|
||||
@ -99,6 +102,7 @@ export default function FinalReviewPage() {
|
||||
const [selectedItem, setSelectedItem] = useState(mockReviewItems[0])
|
||||
const [feedback, setFeedback] = useState('')
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const platform = getPlatformInfo(selectedItem.platform)
|
||||
|
||||
const handleApprove = async () => {
|
||||
setIsSubmitting(true)
|
||||
@ -122,11 +126,19 @@ export default function FinalReviewPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 h-full">
|
||||
<div className="flex flex-col gap-6 h-full min-h-0">
|
||||
{/* 顶部栏 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-2xl font-bold text-text-primary">终审台</h1>
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-2xl font-bold text-text-primary">终审台</h1>
|
||||
{platform && (
|
||||
<span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-sm font-medium ${platform.bgColor} ${platform.textColor} border ${platform.borderColor}`}>
|
||||
<span>{platform.icon}</span>
|
||||
{platform.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-text-secondary">
|
||||
{selectedItem.title} · 达人: {selectedItem.creator}
|
||||
</p>
|
||||
@ -167,7 +179,7 @@ export default function FinalReviewPage() {
|
||||
</div>
|
||||
|
||||
{/* 右侧 - 分析面板 */}
|
||||
<div className="w-[380px] flex flex-col gap-4 overflow-auto">
|
||||
<div className="w-[380px] flex flex-col gap-4 overflow-y-auto overflow-x-hidden">
|
||||
{/* 代理商初审意见 */}
|
||||
<div className="bg-bg-card rounded-2xl p-5 card-shadow">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
|
||||
@ -19,11 +19,22 @@ import {
|
||||
Pencil
|
||||
} from 'lucide-react'
|
||||
|
||||
// 平台选项 - 抖音用青色(品牌渐变色之一)，深色主题下更清晰
|
||||
const platformOptions = [
|
||||
{ id: 'douyin', name: '抖音', icon: '🎵', bgColor: 'bg-[#25F4EE]/15', textColor: 'text-[#25F4EE]', borderColor: 'border-[#25F4EE]/30' },
|
||||
{ id: 'xiaohongshu', name: '小红书', icon: '📕', bgColor: 'bg-[#fe2c55]/15', textColor: 'text-[#fe2c55]', borderColor: 'border-[#fe2c55]/30' },
|
||||
{ id: 'bilibili', name: 'B站', icon: '📺', bgColor: 'bg-[#00a1d6]/15', textColor: 'text-[#00a1d6]', borderColor: 'border-[#00a1d6]/30' },
|
||||
{ id: 'kuaishou', name: '快手', icon: '⚡', bgColor: 'bg-[#ff4906]/15', textColor: 'text-[#ff4906]', borderColor: 'border-[#ff4906]/30' },
|
||||
{ id: 'weibo', name: '微博', icon: '🔴', bgColor: 'bg-[#e6162d]/15', textColor: 'text-[#e6162d]', borderColor: 'border-[#e6162d]/30' },
|
||||
{ id: 'wechat', name: '微信视频号', icon: '💬', bgColor: 'bg-[#07c160]/15', textColor: 'text-[#07c160]', borderColor: 'border-[#07c160]/30' },
|
||||
]
|
||||
|
||||
// 项目类型定义
|
||||
interface Project {
|
||||
id: string
|
||||
name: string
|
||||
status: string
|
||||
platform: string
|
||||
deadline: string
|
||||
scriptCount: { total: number; passed: number; pending: number; rejected: number }
|
||||
videoCount: { total: number; passed: number; pending: number; rejected: number }
|
||||
@ -37,6 +48,7 @@ const initialProjects: Project[] = [
|
||||
id: 'proj-001',
|
||||
name: 'XX品牌618推广',
|
||||
status: 'active',
|
||||
platform: 'douyin',
|
||||
deadline: '2026-06-18',
|
||||
scriptCount: { total: 20, passed: 15, pending: 3, rejected: 2 },
|
||||
videoCount: { total: 20, passed: 12, pending: 5, rejected: 3 },
|
||||
@ -47,6 +59,7 @@ const initialProjects: Project[] = [
|
||||
id: 'proj-002',
|
||||
name: '新品口红系列',
|
||||
status: 'active',
|
||||
platform: 'xiaohongshu',
|
||||
deadline: '2026-03-15',
|
||||
scriptCount: { total: 12, passed: 10, pending: 1, rejected: 1 },
|
||||
videoCount: { total: 12, passed: 8, pending: 3, rejected: 1 },
|
||||
@ -57,14 +70,31 @@ const initialProjects: Project[] = [
|
||||
id: 'proj-003',
|
||||
name: '护肤品秋季活动',
|
||||
status: 'completed',
|
||||
platform: 'bilibili',
|
||||
deadline: '2025-11-30',
|
||||
scriptCount: { total: 15, passed: 15, pending: 0, rejected: 0 },
|
||||
videoCount: { total: 15, passed: 15, pending: 0, rejected: 0 },
|
||||
agencyCount: 2,
|
||||
creatorCount: 10,
|
||||
},
|
||||
{
|
||||
id: 'proj-004',
|
||||
name: '双11预热活动',
|
||||
status: 'active',
|
||||
platform: 'kuaishou',
|
||||
deadline: '2026-11-11',
|
||||
scriptCount: { total: 18, passed: 8, pending: 6, rejected: 4 },
|
||||
videoCount: { total: 18, passed: 5, pending: 10, rejected: 3 },
|
||||
agencyCount: 4,
|
||||
creatorCount: 20,
|
||||
},
|
||||
]
|
||||
|
||||
// 获取平台信息
|
||||
function getPlatformInfo(platformId: string) {
|
||||
return platformOptions.find(p => p.id === platformId)
|
||||
}
|
||||
|
||||
function StatusTag({ status }: { status: string }) {
|
||||
if (status === 'active') return <SuccessTag>进行中</SuccessTag>
|
||||
if (status === 'completed') return <PendingTag>已完成</PendingTag>
|
||||
@ -74,34 +104,42 @@ function StatusTag({ status }: { status: string }) {
|
||||
function ProjectCard({ project, onEditDeadline }: { project: Project; onEditDeadline: (project: Project) => void }) {
|
||||
const scriptProgress = Math.round((project.scriptCount.passed / project.scriptCount.total) * 100)
|
||||
const videoProgress = Math.round((project.videoCount.passed / project.videoCount.total) * 100)
|
||||
const platform = getPlatformInfo(project.platform)
|
||||
|
||||
return (
|
||||
<Link href={`/brand/projects/${project.id}`}>
|
||||
<Card className="hover:border-accent-indigo/50 transition-colors cursor-pointer h-full">
|
||||
<CardContent className="p-6 space-y-4">
|
||||
{/* 项目头部 */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-text-primary">{project.name}</h3>
|
||||
<div className="flex items-center gap-2 mt-1 text-sm text-text-secondary">
|
||||
<Calendar size={14} />
|
||||
<span>截止 {project.deadline}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
onEditDeadline(project)
|
||||
}}
|
||||
className="p-1 rounded hover:bg-bg-page transition-colors"
|
||||
title="修改截止日期"
|
||||
>
|
||||
<Pencil size={12} className="text-text-tertiary hover:text-accent-indigo" />
|
||||
</button>
|
||||
</div>
|
||||
<Card className="hover:border-accent-indigo/50 transition-colors cursor-pointer h-full overflow-hidden">
|
||||
{/* 平台顶部条 */}
|
||||
{platform && (
|
||||
<div className={`px-6 py-2 ${platform.bgColor} border-b ${platform.borderColor} flex items-center justify-between`}>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-base">{platform.icon}</span>
|
||||
<span className={`text-sm font-medium ${platform.textColor}`}>{platform.name}</span>
|
||||
</div>
|
||||
<StatusTag status={project.status} />
|
||||
</div>
|
||||
)}
|
||||
<CardContent className="p-6 space-y-4">
|
||||
{/* 项目头部 */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-text-primary truncate">{project.name}</h3>
|
||||
<div className="flex items-center gap-2 mt-1 text-sm text-text-secondary">
|
||||
<Calendar size={14} />
|
||||
<span>截止 {project.deadline}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
onEditDeadline(project)
|
||||
}}
|
||||
className="p-1 rounded hover:bg-bg-page transition-colors"
|
||||
title="修改截止日期"
|
||||
>
|
||||
<Pencil size={12} className="text-text-tertiary hover:text-accent-indigo" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 脚本进度 */}
|
||||
<div>
|
||||
@ -171,6 +209,7 @@ function ProjectCard({ project, onEditDeadline }: { project: Project; onEditDead
|
||||
export default function BrandProjectsPage() {
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [statusFilter, setStatusFilter] = useState<string>('all')
|
||||
const [platformFilter, setPlatformFilter] = useState<string>('all')
|
||||
const [projects, setProjects] = useState<Project[]>(initialProjects)
|
||||
|
||||
// 编辑截止日期相关状态
|
||||
@ -200,7 +239,8 @@ export default function BrandProjectsPage() {
|
||||
const filteredProjects = projects.filter(project => {
|
||||
const matchesSearch = project.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
const matchesStatus = statusFilter === 'all' || project.status === statusFilter
|
||||
return matchesSearch && matchesStatus
|
||||
const matchesPlatform = platformFilter === 'all' || project.platform === platformFilter
|
||||
return matchesSearch && matchesStatus && matchesPlatform
|
||||
})
|
||||
|
||||
return (
|
||||
@ -220,7 +260,7 @@ export default function BrandProjectsPage() {
|
||||
</div>
|
||||
|
||||
{/* 搜索和筛选 */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-4 flex-wrap">
|
||||
<div className="relative flex-1 max-w-md">
|
||||
<Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary" />
|
||||
<input
|
||||
@ -233,6 +273,16 @@ export default function BrandProjectsPage() {
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Filter size={16} className="text-text-tertiary" />
|
||||
<select
|
||||
value={platformFilter}
|
||||
onChange={(e) => setPlatformFilter(e.target.value)}
|
||||
className="px-3 py-2 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
|
||||
>
|
||||
<option value="all">全部平台</option>
|
||||
{platformOptions.map(p => (
|
||||
<option key={p.id} value={p.id}>{p.icon} {p.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value)}
|
||||
@ -246,6 +296,36 @@ export default function BrandProjectsPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 平台快捷筛选 */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPlatformFilter('all')}
|
||||
className={`px-4 py-2 rounded-xl text-sm font-medium transition-all ${
|
||||
platformFilter === 'all'
|
||||
? 'bg-accent-indigo text-white shadow-sm'
|
||||
: 'bg-bg-elevated text-text-secondary hover:bg-bg-card border border-transparent hover:border-border-subtle'
|
||||
}`}
|
||||
>
|
||||
全部
|
||||
</button>
|
||||
{platformOptions.map(platform => (
|
||||
<button
|
||||
key={platform.id}
|
||||
type="button"
|
||||
onClick={() => setPlatformFilter(platform.id)}
|
||||
className={`px-4 py-2 rounded-xl text-sm font-medium transition-all flex items-center gap-2 border ${
|
||||
platformFilter === platform.id
|
||||
? `${platform.bgColor} ${platform.textColor} ${platform.borderColor} shadow-sm`
|
||||
: 'bg-bg-elevated text-text-secondary border-transparent hover:bg-bg-card hover:border-border-subtle'
|
||||
}`}
|
||||
>
|
||||
<span className="text-base">{platform.icon}</span>
|
||||
{platform.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 项目卡片网格 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredProjects.map((project) => (
|
||||
|
||||
@ -27,11 +27,13 @@ import {
|
||||
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',
|
||||
@ -177,6 +179,8 @@ export default function ProjectDetailPage() {
|
||||
setAgencyToDelete(null)
|
||||
}
|
||||
|
||||
const platform = getPlatformInfo(project.platform)
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 顶部导航 */}
|
||||
@ -185,7 +189,15 @@ export default function ProjectDetailPage() {
|
||||
<ArrowLeft size={20} className="text-text-primary" />
|
||||
</button>
|
||||
<div className="flex-1">
|
||||
<h1 className="text-2xl font-bold text-text-primary">{project.name}</h1>
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-2xl font-bold text-text-primary">{project.name}</h1>
|
||||
{platform && (
|
||||
<span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium ${platform.bgColor} ${platform.textColor} border ${platform.borderColor}`}>
|
||||
<span>{platform.icon}</span>
|
||||
{platform.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-text-secondary">{project.description}</p>
|
||||
</div>
|
||||
<SuccessTag>进行中</SuccessTag>
|
||||
|
||||
@ -14,9 +14,20 @@ import {
|
||||
X,
|
||||
Users,
|
||||
Search,
|
||||
Building2
|
||||
Building2,
|
||||
Check
|
||||
} from 'lucide-react'
|
||||
|
||||
// 平台选项
|
||||
const platformOptions = [
|
||||
{ id: 'douyin', name: '抖音', icon: '🎵', color: 'bg-[#1a1a1a]' },
|
||||
{ id: 'xiaohongshu', name: '小红书', icon: '📕', color: 'bg-[#fe2c55]' },
|
||||
{ id: 'bilibili', name: 'B站', icon: '📺', color: 'bg-[#00a1d6]' },
|
||||
{ id: 'kuaishou', name: '快手', icon: '⚡', color: 'bg-[#ff4906]' },
|
||||
{ id: 'weibo', name: '微博', icon: '🔴', color: 'bg-[#e6162d]' },
|
||||
{ id: 'wechat', name: '微信视频号', icon: '💬', color: 'bg-[#07c160]' },
|
||||
]
|
||||
|
||||
// 模拟品牌方已添加的代理商（来自代理商管理）
|
||||
const mockAgencies = [
|
||||
{ id: 'AG789012', name: '星耀传媒', companyName: '上海星耀文化传媒有限公司', creatorCount: 50, passRate: 92 },
|
||||
@ -33,6 +44,7 @@ export default function CreateProjectPage() {
|
||||
const [deadline, setDeadline] = useState('')
|
||||
const [briefFile, setBriefFile] = useState<File | null>(null)
|
||||
const [selectedAgencies, setSelectedAgencies] = useState<string[]>([])
|
||||
const [selectedPlatform, setSelectedPlatform] = useState<string>('')
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [agencySearch, setAgencySearch] = useState('')
|
||||
|
||||
@ -60,7 +72,7 @@ export default function CreateProjectPage() {
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!projectName.trim() || !deadline || !briefFile || selectedAgencies.length === 0) {
|
||||
if (!projectName.trim() || !deadline || !briefFile || selectedAgencies.length === 0 || !selectedPlatform) {
|
||||
alert('请填写完整信息')
|
||||
return
|
||||
}
|
||||
@ -72,7 +84,7 @@ export default function CreateProjectPage() {
|
||||
router.push('/brand')
|
||||
}
|
||||
|
||||
const isValid = projectName.trim() && deadline && briefFile && selectedAgencies.length > 0
|
||||
const isValid = projectName.trim() && deadline && briefFile && selectedAgencies.length > 0 && selectedPlatform
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-4xl">
|
||||
@ -100,6 +112,38 @@ export default function CreateProjectPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 选择平台 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-primary mb-2">
|
||||
发布平台 <span className="text-accent-coral">*</span>
|
||||
</label>
|
||||
<p className="text-xs text-text-tertiary mb-3">选择视频将发布的平台，系统将应用对应平台的审核规则</p>
|
||||
<div className="grid grid-cols-3 md:grid-cols-6 gap-3">
|
||||
{platformOptions.map((platform) => (
|
||||
<button
|
||||
key={platform.id}
|
||||
type="button"
|
||||
onClick={() => setSelectedPlatform(platform.id)}
|
||||
className={`p-3 rounded-xl border-2 transition-all flex flex-col items-center gap-2 ${
|
||||
selectedPlatform === platform.id
|
||||
? 'border-accent-indigo bg-accent-indigo/10'
|
||||
: 'border-border-subtle hover:border-accent-indigo/50'
|
||||
}`}
|
||||
>
|
||||
<div className={`w-10 h-10 ${platform.color} rounded-lg flex items-center justify-center text-lg`}>
|
||||
{platform.icon}
|
||||
</div>
|
||||
<span className="text-sm font-medium text-text-primary">{platform.name}</span>
|
||||
{selectedPlatform === platform.id && (
|
||||
<div className="absolute top-1 right-1 w-4 h-4 rounded-full bg-accent-indigo flex items-center justify-center">
|
||||
<Check size={10} className="text-white" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 截止日期 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-primary mb-2">
|
||||
|
||||
@ -16,6 +16,7 @@ import {
|
||||
ChevronRight,
|
||||
AlertTriangle
|
||||
} from 'lucide-react'
|
||||
import { getPlatformInfo } from '@/lib/platforms'
|
||||
|
||||
// 模拟脚本待审列表
|
||||
const mockScriptTasks = [
|
||||
@ -25,6 +26,7 @@ const mockScriptTasks = [
|
||||
creatorName: '小美护肤',
|
||||
agencyName: '星耀传媒',
|
||||
projectName: 'XX品牌618推广',
|
||||
platform: 'douyin',
|
||||
aiScore: 88,
|
||||
submittedAt: '2026-02-06 14:30',
|
||||
hasHighRisk: false,
|
||||
@ -36,6 +38,7 @@ const mockScriptTasks = [
|
||||
creatorName: '美妆Lisa',
|
||||
agencyName: '创意无限',
|
||||
projectName: 'XX品牌618推广',
|
||||
platform: 'xiaohongshu',
|
||||
aiScore: 72,
|
||||
submittedAt: '2026-02-06 12:15',
|
||||
hasHighRisk: true,
|
||||
@ -51,6 +54,7 @@ const mockVideoTasks = [
|
||||
creatorName: '小美护肤',
|
||||
agencyName: '星耀传媒',
|
||||
projectName: 'XX品牌618推广',
|
||||
platform: 'douyin',
|
||||
aiScore: 85,
|
||||
duration: '02:15',
|
||||
submittedAt: '2026-02-06 15:00',
|
||||
@ -63,6 +67,7 @@ const mockVideoTasks = [
|
||||
creatorName: '美妆Lisa',
|
||||
agencyName: '创意无限',
|
||||
projectName: 'XX品牌618推广',
|
||||
platform: 'xiaohongshu',
|
||||
aiScore: 68,
|
||||
duration: '03:42',
|
||||
submittedAt: '2026-02-06 13:45',
|
||||
@ -75,6 +80,7 @@ const mockVideoTasks = [
|
||||
creatorName: '健身教练王',
|
||||
agencyName: '美妆达人MCN',
|
||||
projectName: 'XX运动品牌',
|
||||
platform: 'bilibili',
|
||||
aiScore: 92,
|
||||
duration: '04:20',
|
||||
submittedAt: '2026-02-06 11:30',
|
||||
@ -91,46 +97,56 @@ function ScoreTag({ score }: { score: number }) {
|
||||
|
||||
function TaskCard({ task, type }: { task: typeof mockScriptTasks[0] | typeof mockVideoTasks[0]; type: 'script' | 'video' }) {
|
||||
const href = type === 'script' ? `/brand/review/script/${task.id}` : `/brand/review/video/${task.id}`
|
||||
const platform = getPlatformInfo(task.platform)
|
||||
|
||||
return (
|
||||
<Link href={href}>
|
||||
<div className="p-4 rounded-lg border border-border-subtle hover:border-accent-indigo/50 hover:bg-accent-indigo/5 transition-all cursor-pointer">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h4 className="font-medium text-text-primary truncate">{task.title}</h4>
|
||||
{task.hasHighRisk && (
|
||||
<span className="flex items-center gap-1 px-2 py-0.5 text-xs bg-accent-coral/20 text-accent-coral rounded">
|
||||
<AlertTriangle size={12} />
|
||||
高风险
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-4 mt-1 text-sm text-text-secondary">
|
||||
<span className="flex items-center gap-1">
|
||||
<User size={12} />
|
||||
{task.creatorName}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Building size={12} />
|
||||
{task.agencyName}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<ScoreTag score={task.aiScore} />
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs text-text-tertiary">
|
||||
<span>{task.projectName}</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock size={12} />
|
||||
{task.submittedAt}
|
||||
</span>
|
||||
</div>
|
||||
{'duration' in task && (
|
||||
<div className="mt-2 text-xs text-text-tertiary">
|
||||
时长: {task.duration}
|
||||
<div className="rounded-lg border border-border-subtle hover:border-accent-indigo/50 hover:bg-accent-indigo/5 transition-all cursor-pointer overflow-hidden">
|
||||
{/* 平台顶部条 */}
|
||||
{platform && (
|
||||
<div className={`px-4 py-1.5 ${platform.bgColor} border-b ${platform.borderColor} flex items-center gap-1.5`}>
|
||||
<span className="text-sm">{platform.icon}</span>
|
||||
<span className={`text-xs font-medium ${platform.textColor}`}>{platform.name}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="p-4">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h4 className="font-medium text-text-primary truncate">{task.title}</h4>
|
||||
{task.hasHighRisk && (
|
||||
<span className="flex items-center gap-1 px-2 py-0.5 text-xs bg-accent-coral/20 text-accent-coral rounded">
|
||||
<AlertTriangle size={12} />
|
||||
高风险
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-4 mt-1 text-sm text-text-secondary">
|
||||
<span className="flex items-center gap-1">
|
||||
<User size={12} />
|
||||
{task.creatorName}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Building size={12} />
|
||||
{task.agencyName}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<ScoreTag score={task.aiScore} />
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs text-text-tertiary">
|
||||
<span>{task.projectName}</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock size={12} />
|
||||
{task.submittedAt}
|
||||
</span>
|
||||
</div>
|
||||
{'duration' in task && (
|
||||
<div className="mt-2 text-xs text-text-tertiary">
|
||||
时长: {task.duration}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -156,7 +156,7 @@ export default function BrandSettingsPage() {
|
||||
</div>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="text-accent-coral border-accent-coral/30 hover:bg-accent-coral/10"
|
||||
className="bg-accent-coral/15 text-accent-coral border-accent-coral hover:bg-accent-coral hover:text-white"
|
||||
onClick={() => setShowLogoutModal(true)}
|
||||
>
|
||||
<LogOut size={16} />
|
||||
|
||||
@ -17,6 +17,7 @@ import {
|
||||
} from 'lucide-react'
|
||||
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { platformOptions, getPlatformInfo } from '@/lib/platforms'
|
||||
|
||||
// 任务阶段状态类型
|
||||
type StageStatus = 'pending' | 'current' | 'done' | 'error'
|
||||
@ -26,6 +27,7 @@ type Task = {
|
||||
id: string
|
||||
title: string
|
||||
description: string
|
||||
platform: string // 发布平台
|
||||
// 脚本阶段
|
||||
scriptStage: {
|
||||
submit: StageStatus
|
||||
@ -54,6 +56,7 @@ const mockTasks: Task[] = [
|
||||
id: 'task-001',
|
||||
title: 'XX品牌618推广',
|
||||
description: '产品种草视频 · 时长要求 60-90秒 · 截止: 2026-02-10',
|
||||
platform: 'douyin',
|
||||
scriptStage: { submit: 'current', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||
buttonText: '上传脚本',
|
||||
@ -65,6 +68,7 @@ const mockTasks: Task[] = [
|
||||
id: 'task-002',
|
||||
title: 'YY美妆新品',
|
||||
description: '口播测评 · 已上传视频 · 提交于: 今天 14:30',
|
||||
platform: 'xiaohongshu',
|
||||
scriptStage: { submit: 'done', ai: 'current', agency: 'pending', brand: 'pending' },
|
||||
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||
buttonText: '查看详情',
|
||||
@ -76,6 +80,7 @@ const mockTasks: Task[] = [
|
||||
id: 'task-003',
|
||||
title: 'ZZ饮品夏日',
|
||||
description: '探店Vlog · 发现2处问题 · 需修改后重新提交',
|
||||
platform: 'bilibili',
|
||||
scriptStage: { submit: 'done', ai: 'error', agency: 'pending', brand: 'pending' },
|
||||
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||
buttonText: '查看修改',
|
||||
@ -87,6 +92,7 @@ const mockTasks: Task[] = [
|
||||
id: 'task-004',
|
||||
title: 'AA数码新品发布',
|
||||
description: '开箱测评 · 审核通过 · 可发布',
|
||||
platform: 'douyin',
|
||||
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
|
||||
videoStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
|
||||
buttonText: '查看详情',
|
||||
@ -98,6 +104,7 @@ const mockTasks: Task[] = [
|
||||
id: 'task-005',
|
||||
title: 'BB运动饮料',
|
||||
description: '运动场景 · 脚本AI审核中 · 等待结果',
|
||||
platform: 'kuaishou',
|
||||
scriptStage: { submit: 'done', ai: 'current', agency: 'pending', brand: 'pending' },
|
||||
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||
buttonText: '查看详情',
|
||||
@ -109,6 +116,7 @@ const mockTasks: Task[] = [
|
||||
id: 'task-006',
|
||||
title: 'CC服装春季款',
|
||||
description: '穿搭展示 · 脚本待代理商审核',
|
||||
platform: 'xiaohongshu',
|
||||
scriptStage: { submit: 'done', ai: 'done', agency: 'current', brand: 'pending' },
|
||||
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||
buttonText: '查看详情',
|
||||
@ -120,6 +128,7 @@ const mockTasks: Task[] = [
|
||||
id: 'task-007',
|
||||
title: 'DD家电测评',
|
||||
description: '开箱视频 · 脚本待品牌终审',
|
||||
platform: 'bilibili',
|
||||
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'current' },
|
||||
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||
buttonText: '查看详情',
|
||||
@ -131,6 +140,7 @@ const mockTasks: Task[] = [
|
||||
id: 'task-008',
|
||||
title: 'EE食品试吃',
|
||||
description: '美食测评 · 脚本通过 · 待上传视频',
|
||||
platform: 'douyin',
|
||||
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
|
||||
videoStage: { submit: 'current', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||
buttonText: '上传视频',
|
||||
@ -142,6 +152,7 @@ const mockTasks: Task[] = [
|
||||
id: 'task-009',
|
||||
title: 'FF护肤品',
|
||||
description: '使用教程 · 视频AI审核中',
|
||||
platform: 'xiaohongshu',
|
||||
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
|
||||
videoStage: { submit: 'done', ai: 'current', agency: 'pending', brand: 'pending' },
|
||||
buttonText: '查看详情',
|
||||
@ -153,6 +164,7 @@ const mockTasks: Task[] = [
|
||||
id: 'task-010',
|
||||
title: 'GG智能手表',
|
||||
description: '功能展示 · 脚本代理商不通过',
|
||||
platform: 'weibo',
|
||||
scriptStage: { submit: 'done', ai: 'done', agency: 'error', brand: 'pending' },
|
||||
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||
buttonText: '查看修改',
|
||||
@ -164,6 +176,7 @@ const mockTasks: Task[] = [
|
||||
id: 'task-011',
|
||||
title: 'HH美妆代言',
|
||||
description: '品牌代言 · 脚本品牌不通过',
|
||||
platform: 'xiaohongshu',
|
||||
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'error' },
|
||||
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
|
||||
buttonText: '查看修改',
|
||||
@ -175,6 +188,7 @@ const mockTasks: Task[] = [
|
||||
id: 'task-012',
|
||||
title: 'II数码配件',
|
||||
description: '配件展示 · 视频代理商审核中',
|
||||
platform: 'bilibili',
|
||||
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
|
||||
videoStage: { submit: 'done', ai: 'done', agency: 'current', brand: 'pending' },
|
||||
buttonText: '查看详情',
|
||||
@ -186,6 +200,7 @@ const mockTasks: Task[] = [
|
||||
id: 'task-013',
|
||||
title: 'JJ旅行vlog',
|
||||
description: '旅行记录 · 视频代理商不通过',
|
||||
platform: 'wechat',
|
||||
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
|
||||
videoStage: { submit: 'done', ai: 'done', agency: 'error', brand: 'pending' },
|
||||
buttonText: '查看修改',
|
||||
@ -197,6 +212,7 @@ const mockTasks: Task[] = [
|
||||
id: 'task-014',
|
||||
title: 'KK宠物用品',
|
||||
description: '宠物日常 · 视频品牌终审中',
|
||||
platform: 'douyin',
|
||||
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
|
||||
videoStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'current' },
|
||||
buttonText: '查看详情',
|
||||
@ -208,6 +224,7 @@ const mockTasks: Task[] = [
|
||||
id: 'task-015',
|
||||
title: 'LL厨房电器',
|
||||
description: '使用演示 · 视频品牌不通过',
|
||||
platform: 'kuaishou',
|
||||
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
|
||||
videoStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'error' },
|
||||
buttonText: '查看修改',
|
||||
@ -297,6 +314,8 @@ function ProgressBar({ stage, color }: {
|
||||
|
||||
// 任务卡片组件
|
||||
function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
|
||||
const platform = getPlatformInfo(task.platform)
|
||||
|
||||
const getStageColor = (color: string) => {
|
||||
switch (color) {
|
||||
case 'blue': return 'text-accent-blue'
|
||||
@ -320,31 +339,40 @@ function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
|
||||
|
||||
return (
|
||||
<div
|
||||
className="bg-bg-card rounded-2xl p-5 flex flex-col gap-4 card-shadow cursor-pointer hover:bg-bg-elevated/30 transition-colors"
|
||||
className="bg-bg-card rounded-2xl overflow-hidden card-shadow cursor-pointer hover:bg-bg-elevated/30 transition-colors"
|
||||
onClick={onClick}
|
||||
>
|
||||
{/* 任务主行 */}
|
||||
<div className="flex items-center justify-between">
|
||||
{/* 左侧：缩略图 + 信息 */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-20 h-[60px] rounded-lg bg-[#1A1A1E] flex items-center justify-center flex-shrink-0">
|
||||
<Video className="w-6 h-6 text-text-tertiary" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-base font-semibold text-text-primary">{task.title}</span>
|
||||
<span className="text-[13px] text-text-secondary">{task.description}</span>
|
||||
</div>
|
||||
{/* 平台顶部条 */}
|
||||
{platform && (
|
||||
<div className={`px-5 py-2 ${platform.bgColor} border-b ${platform.borderColor} flex items-center gap-2`}>
|
||||
<span className="text-base">{platform.icon}</span>
|
||||
<span className={`text-sm font-medium ${platform.textColor}`}>{platform.name}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 右侧：操作按钮 */}
|
||||
<button
|
||||
type="button"
|
||||
className={cn('px-5 py-2.5 rounded-[10px] text-sm font-semibold', getButtonStyle())}
|
||||
onClick={(e) => { e.stopPropagation(); onClick() }}
|
||||
>
|
||||
{task.buttonText}
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-5 flex flex-col gap-4">
|
||||
{/* 任务主行 */}
|
||||
<div className="flex items-center justify-between">
|
||||
{/* 左侧：缩略图 + 信息 */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-20 h-[60px] rounded-lg bg-[#1A1A1E] flex items-center justify-center flex-shrink-0">
|
||||
<Video className="w-6 h-6 text-text-tertiary" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-base font-semibold text-text-primary">{task.title}</span>
|
||||
<span className="text-[13px] text-text-secondary">{task.description}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧：操作按钮 */}
|
||||
<button
|
||||
type="button"
|
||||
className={cn('px-5 py-2.5 rounded-[10px] text-sm font-semibold', getButtonStyle())}
|
||||
onClick={(e) => { e.stopPropagation(); onClick() }}
|
||||
>
|
||||
{task.buttonText}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 进度条容器 */}
|
||||
<div className="flex flex-col gap-3 pt-3">
|
||||
@ -363,6 +391,7 @@ function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -14,10 +14,12 @@ export function DesktopLayout({
|
||||
className = '',
|
||||
}: DesktopLayoutProps) {
|
||||
return (
|
||||
<div className={`min-h-screen bg-bg-page flex ${className}`}>
|
||||
<div className={`h-screen bg-bg-page flex overflow-hidden ${className}`}>
|
||||
<Sidebar role={role} />
|
||||
<main className="flex-1 ml-[260px] p-8 overflow-auto">
|
||||
{children}
|
||||
<main className="flex-1 ml-[260px] p-8 overflow-y-auto overflow-x-hidden">
|
||||
<div className="min-h-full">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -19,10 +19,12 @@ export function MobileLayout({
|
||||
className = '',
|
||||
}: MobileLayoutProps) {
|
||||
return (
|
||||
<div className={`min-h-screen bg-bg-page flex flex-col overflow-x-hidden ${className}`}>
|
||||
<div className={`h-screen bg-bg-page flex flex-col overflow-hidden ${className}`}>
|
||||
{showStatusBar && <StatusBar />}
|
||||
<main className={`flex-1 ${showBottomNav ? 'pb-[95px]' : ''}`}>
|
||||
{children}
|
||||
<main className={`flex-1 overflow-y-auto overflow-x-hidden ${showBottomNav ? 'pb-[80px]' : ''}`}>
|
||||
<div className="min-h-full">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
{showBottomNav && <BottomNav role={role} />}
|
||||
</div>
|
||||
|
||||
@ -37,7 +37,7 @@ export function ResponsiveLayout({
|
||||
const closeSidebar = () => setSidebarOpen(false)
|
||||
|
||||
return (
|
||||
<div className={cn('min-h-screen bg-bg-page', className)}>
|
||||
<div className={cn('h-screen bg-bg-page overflow-hidden', className)}>
|
||||
{/* 移动端：汉堡菜单按钮 */}
|
||||
{isMobile && !sidebarOpen && (
|
||||
<button
|
||||
@ -84,11 +84,13 @@ export function ResponsiveLayout({
|
||||
{/* 主内容区 */}
|
||||
<main
|
||||
className={cn(
|
||||
'min-h-screen transition-all duration-300',
|
||||
'h-full overflow-y-auto overflow-x-hidden transition-all duration-300',
|
||||
isMobile ? 'ml-0 pt-16 px-4 pb-6' : 'ml-[260px] p-8'
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
<div className="min-h-full">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -25,7 +25,15 @@ const sizeStyles = {
|
||||
md: 'max-w-md',
|
||||
lg: 'max-w-lg',
|
||||
xl: 'max-w-xl',
|
||||
full: 'max-w-[90vw] max-h-[90vh]',
|
||||
full: 'max-w-[90vw]',
|
||||
};
|
||||
|
||||
const bodyMaxHeightStyles = {
|
||||
sm: 'max-h-[50vh]',
|
||||
md: 'max-h-[60vh]',
|
||||
lg: 'max-h-[65vh]',
|
||||
xl: 'max-h-[70vh]',
|
||||
full: 'max-h-[75vh]',
|
||||
};
|
||||
|
||||
export const Modal: React.FC<ModalProps> = ({
|
||||
@ -105,7 +113,7 @@ export const Modal: React.FC<ModalProps> = ({
|
||||
)}
|
||||
|
||||
{/* Body */}
|
||||
<div className="px-5 py-4 max-h-[60vh] overflow-y-auto">
|
||||
<div className={`px-5 py-4 overflow-y-auto ${bodyMaxHeightStyles[size]}`}>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
|
||||
22
frontend/lib/platforms.ts
Normal file
22
frontend/lib/platforms.ts
Normal file
@ -0,0 +1,22 @@
|
||||
// 平台配置 - 共享给所有端使用
|
||||
export const platformOptions = [
|
||||
{ id: 'douyin', name: '抖音', icon: '🎵', bgColor: 'bg-[#25F4EE]/15', textColor: 'text-[#25F4EE]', borderColor: 'border-[#25F4EE]/30' },
|
||||
{ id: 'xiaohongshu', name: '小红书', icon: '📕', bgColor: 'bg-[#fe2c55]/15', textColor: 'text-[#fe2c55]', borderColor: 'border-[#fe2c55]/30' },
|
||||
{ id: 'bilibili', name: 'B站', icon: '📺', bgColor: 'bg-[#00a1d6]/15', textColor: 'text-[#00a1d6]', borderColor: 'border-[#00a1d6]/30' },
|
||||
{ id: 'kuaishou', name: '快手', icon: '⚡', bgColor: 'bg-[#ff4906]/15', textColor: 'text-[#ff4906]', borderColor: 'border-[#ff4906]/30' },
|
||||
{ id: 'weibo', name: '微博', icon: '🔴', bgColor: 'bg-[#e6162d]/15', textColor: 'text-[#e6162d]', borderColor: 'border-[#e6162d]/30' },
|
||||
{ id: 'wechat', name: '微信视频号', icon: '💬', bgColor: 'bg-[#07c160]/15', textColor: 'text-[#07c160]', borderColor: 'border-[#07c160]/30' },
|
||||
]
|
||||
|
||||
export type PlatformId = typeof platformOptions[number]['id']
|
||||
|
||||
export function getPlatformInfo(platformId: string) {
|
||||
return platformOptions.find(p => p.id === platformId)
|
||||
}
|
||||
|
||||
// 平台标签组件的样式类
|
||||
export function getPlatformTagClasses(platformId: string) {
|
||||
const platform = getPlatformInfo(platformId)
|
||||
if (!platform) return ''
|
||||
return `${platform.bgColor} ${platform.textColor} ${platform.borderColor}`
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user