feat: 完善审核台文件预览与消息通知系统

主要更新:
- 新增 FilePreview 通用组件，支持视频/图片/PDF 内嵌预览
- 审核详情页添加文件信息卡片、预览/下载功能
- 审核列表和详情页添加申诉标识和申诉理由显示
- 完善三端消息通知系统（达人/代理商/品牌）
- 新增达人 Brief 查看页面
- 新增品牌方消息中心页面
- 创建后端开发备忘文档

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/app/creator/messages/page.tsx

@@ -13,7 +13,13 @@ import {
   BadgeCheck,
   Video,
   MessageCircle,
+  CalendarClock,
+  FileText,
+  Bell,
+  Eye,
+  Clock
 } from 'lucide-react'
+import { Button } from '@/components/ui/Button'
 import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
 import { cn } from '@/lib/utils'
 
@@ -29,9 +35,16 @@ type MessageType =
   | 'brand_pass'    // 品牌方审核通过
   | 'brand_reject'  // 品牌方审核驳回
   | 'video_ai'      // 视频AI审核完成
-  | 'appeal'        // 申诉结果
-  | 'video_agency_reject' // 视频代理商驳回
-  | 'video_brand_reject'  // 视频品牌方驳回
+  | 'appeal'                  // 申诉结果（通用）
+  | 'appeal_success'          // 申诉成功（违规被撤销）
+  | 'appeal_failed'           // 申诉失败（维持原判）
+  | 'appeal_quota_approved'   // 申请增加申诉次数成功
+  | 'appeal_quota_rejected'   // 申请增加申诉次数失败
+  | 'video_agency_reject'     // 视频代理商驳回
+  | 'video_brand_reject'      // 视频品牌方驳回
+  | 'task_deadline'           // 任务截止提醒
+  | 'brief_updated'           // Brief更新通知
+  | 'system_notice'           // 系统通知
 
 type Message = {
   id: string
@@ -42,6 +55,8 @@ type Message = {
   read: boolean
   taskId?: string
   hasActions?: boolean // 是否有操作按钮（邀请类型）
+  agencyName?: string // 代理商名称（新任务类型）
+  taskName?: string // 任务名称（新任务类型）
 }
 
 // 消息配置
@@ -61,8 +76,15 @@ const messageConfig: Record<MessageType, {
   brand_reject: { icon: XCircle, iconColor: 'text-accent-coral', bgColor: 'bg-accent-coral/20' },
   video_ai: { icon: Video, iconColor: 'text-accent-indigo', bgColor: 'bg-accent-indigo/20' },
   appeal: { icon: MessageCircle, iconColor: 'text-accent-blue', bgColor: 'bg-accent-blue/20' },
+  appeal_success: { icon: CheckCircle, iconColor: 'text-accent-green', bgColor: 'bg-accent-green/20' },
+  appeal_failed: { icon: XCircle, iconColor: 'text-accent-coral', bgColor: 'bg-accent-coral/20' },
+  appeal_quota_approved: { icon: CheckCircle, iconColor: 'text-accent-green', bgColor: 'bg-accent-green/20' },
+  appeal_quota_rejected: { icon: XCircle, iconColor: 'text-accent-coral', bgColor: 'bg-accent-coral/20' },
   video_agency_reject: { icon: XCircle, iconColor: 'text-accent-coral', bgColor: 'bg-accent-coral/20' },
   video_brand_reject: { icon: XCircle, iconColor: 'text-accent-coral', bgColor: 'bg-accent-coral/20' },
+  task_deadline: { icon: CalendarClock, iconColor: 'text-orange-400', bgColor: 'bg-orange-500/20' },
+  brief_updated: { icon: FileText, iconColor: 'text-accent-indigo', bgColor: 'bg-accent-indigo/20' },
+  system_notice: { icon: Bell, iconColor: 'text-text-secondary', bgColor: 'bg-bg-elevated' },
 }
 
 // 12条消息数据
@@ -80,10 +102,12 @@ const mockMessages: Message[] = [
     id: 'msg-002',
     type: 'new_task',
     title: '新任务分配',
-    content: '您有一个新任务【XX品牌618推广】，请在3天内提交脚本',
+    content: '您被「星辰传媒」安排了新任务【XX品牌618推广】，请先查看任务要求后再提交脚本',
     time: '10分钟前',
     read: false,
     taskId: 'task-001',
+    agencyName: '星辰传媒',
+    taskName: 'XX品牌618推广',
   },
   {
     id: 'msg-003',
@@ -159,11 +183,39 @@ const mockMessages: Message[] = [
   },
   {
     id: 'msg-011',
-    type: 'appeal',
-    title: '申诉结果通知',
-    content: '您的申诉已通过，AI已学习您的反馈，感谢您帮助我们改进系统',
+    type: 'appeal_success',
+    title: '申诉成功',
+    content: '您对【ZZ饮品夏日】的申诉已通过，违规已被撤销，申诉次数已返还',
+    time: '2天前',
+    read: false,
+    taskId: 'task-003',
+  },
+  {
+    id: 'msg-011b',
+    type: 'appeal_failed',
+    title: '申诉未通过',
+    content: '您对【HH美妆代言】的申诉未通过，维持原审核结果，请根据建议修改后重新提交',
+    time: '2天前',
+    read: true,
+    taskId: 'task-011',
+  },
+  {
+    id: 'msg-011c',
+    type: 'appeal_quota_approved',
+    title: '申诉次数申请通过',
+    content: '您申请增加【AA数码新品发布】的申诉次数已被「星辰传媒」批准，当前可用申诉次数 +1',
     time: '3天前',
     read: false,
+    taskId: 'task-004',
+  },
+  {
+    id: 'msg-011d',
+    type: 'appeal_quota_rejected',
+    title: '申诉次数申请被拒',
+    content: '您申请增加【BB运动饮料】的申诉次数被「星辰传媒」拒绝，请仔细阅读驳回原因后修改内容',
+    time: '3天前',
+    read: true,
+    taskId: 'task-005',
   },
   {
     id: 'msg-012',
@@ -183,6 +235,32 @@ const mockMessages: Message[] = [
     read: true,
     taskId: 'task-015',
   },
+  {
+    id: 'msg-014',
+    type: 'task_deadline',
+    title: '任务即将截止',
+    content: '您的任务【XX品牌618推广】将于3天后截止，请尽快提交脚本',
+    time: '今天 08:00',
+    read: false,
+    taskId: 'task-001',
+  },
+  {
+    id: 'msg-015',
+    type: 'brief_updated',
+    title: 'Brief更新通知',
+    content: '【XX品牌618推广】的Brief要求已更新，新增2个必选卖点，请查看最新要求',
+    time: '昨天 15:00',
+    read: true,
+    taskId: 'task-001',
+  },
+  {
+    id: 'msg-017',
+    type: 'system_notice',
+    title: '系统通知',
+    content: '平台违禁词库已更新，请在创作时注意避免使用新增的违禁词',
+    time: '4天前',
+    read: true,
+  },
 ]
 
 // 消息卡片组件
@@ -190,12 +268,14 @@ function MessageCard({
   message,
   onRead,
   onNavigate,
+  onViewBrief,
   onAcceptInvite,
   onIgnoreInvite,
 }: {
   message: Message
   onRead: () => void
   onNavigate: () => void
+  onViewBrief?: () => void
   onAcceptInvite?: () => void
   onIgnoreInvite?: () => void
 }) {
@@ -205,14 +285,18 @@ function MessageCard({
   return (
     <div
       className={cn(
-        'rounded-xl p-4 flex gap-4 cursor-pointer transition-colors',
+        'rounded-xl p-4 flex gap-4 transition-colors',
         message.read
           ? 'bg-transparent border border-bg-elevated'
-          : 'bg-bg-elevated'
+          : 'bg-bg-elevated',
+        // 新任务和邀请类型不整体点击跳转
+        message.type !== 'new_task' && message.type !== 'invite' && message.taskId ? 'cursor-pointer' : ''
       )}
       onClick={() => {
-        onRead()
-        if (message.taskId) onNavigate()
+        if (message.type !== 'new_task' && message.type !== 'invite') {
+          onRead()
+          if (message.taskId) onNavigate()
+        }
       }}
     >
       {/* 图标 */}
@@ -231,6 +315,34 @@ function MessageCard({
         {/* 描述 */}
         <p className="text-sm text-text-secondary leading-relaxed">{message.content}</p>
 
+        {/* 新任务类型的操作按钮 */}
+        {message.type === 'new_task' && message.taskId && (
+          <div className="flex items-center gap-3 pt-2">
+            <button
+              type="button"
+              className="px-4 py-2 rounded-md bg-accent-indigo text-white text-sm font-medium hover:bg-accent-indigo/90 transition-colors"
+              onClick={(e) => {
+                e.stopPropagation()
+                onRead()
+                onViewBrief?.()
+              }}
+            >
+              查看任务要求
+            </button>
+            <button
+              type="button"
+              className="px-4 py-2 rounded-md border border-border-subtle text-text-secondary text-sm font-medium hover:bg-bg-elevated transition-colors"
+              onClick={(e) => {
+                e.stopPropagation()
+                onRead()
+                onNavigate()
+              }}
+            >
+              开始任务
+            </button>
+          </div>
+        )}
+
         {/* 邀请类型的操作按钮 */}
         {message.hasActions && (
           <div className="flex items-center gap-3 pt-2">
@@ -386,9 +498,17 @@ export default function CreatorMessagesPage() {
         // 邀请消息不跳转，在卡片内有操作按钮
         break
       case 'new_task':
-        // 新任务 -> 跳转到任务详情（上传脚本）
+        // 新任务 -> 跳转到Brief查看页
+        if (message.taskId) router.push(`/creator/task/${message.taskId}/brief`)
+        break
+      case 'task_deadline':
+        // 任务截止提醒 -> 跳转到任务详情
         if (message.taskId) router.push(`/creator/task/${message.taskId}`)
         break
+      case 'brief_updated':
+        // Brief更新 -> 跳转到Brief查看页
+        if (message.taskId) router.push(`/creator/task/${message.taskId}/brief`)
+        break
       case 'pass':
         // 审核通过 -> 跳转到任务详情
         if (message.taskId) router.push(`/creator/task/${message.taskId}`)
@@ -425,6 +545,18 @@ export default function CreatorMessagesPage() {
         // 申诉结果 -> 跳转到申诉中心
         router.push('/creator/appeals')
         break
+      case 'appeal_success':
+      case 'appeal_failed':
+        // 申诉成功/失败 -> 跳转到任务详情
+        if (message.taskId) router.push(`/creator/task/${message.taskId}`)
+        else router.push('/creator/appeals')
+        break
+      case 'appeal_quota_approved':
+      case 'appeal_quota_rejected':
+        // 申诉次数申请结果 -> 跳转到任务详情
+        if (message.taskId) router.push(`/creator/task/${message.taskId}`)
+        else router.push('/creator/appeal-quota')
+        break
       case 'video_agency_reject':
         // 视频代理商驳回 -> 跳转到任务详情
         if (message.taskId) router.push(`/creator/task/${message.taskId}`)
@@ -501,6 +633,9 @@ export default function CreatorMessagesPage() {
                 message={message}
                 onRead={() => markAsRead(message.id)}
                 onNavigate={() => navigateByMessage(message)}
+                onViewBrief={() => {
+                  if (message.taskId) router.push(`/creator/task/${message.taskId}/brief`)
+                }}
                 onAcceptInvite={() => handleAcceptInvite(message.id)}
                 onIgnoreInvite={() => handleIgnoreInvite(message.id)}
               />

frontend/app/creator/task/[id]/brief/page.tsx

@@ -0,0 +1,317 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter, useParams } from 'next/navigation'
+import {
+  ArrowLeft,
+  FileText,
+  Download,
+  Eye,
+  Target,
+  Ban,
+  File,
+  Building2,
+  Calendar,
+  Clock,
+  ChevronRight
+} from 'lucide-react'
+import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
+import { Modal } from '@/components/ui/Modal'
+import { Button } from '@/components/ui/Button'
+
+// 代理商Brief文档类型
+type AgencyBriefFile = {
+  id: string
+  name: string
+  size: string
+  uploadedAt: string
+  description?: string
+}
+
+// 模拟任务数据
+const mockTaskInfo = {
+  id: 'task-001',
+  taskName: 'XX品牌618推广',
+  agencyName: '星辰传媒',
+  brandName: 'XX护肤品牌',
+  deadline: '2026-06-18',
+  createdAt: '2026-02-08',
+}
+
+// 模拟代理商Brief数据
+const mockAgencyBrief = {
+  files: [
+    { id: 'af1', name: '达人拍摄指南.pdf', size: '1.5MB', uploadedAt: '2026-02-02', description: '详细的拍摄流程和注意事项' },
+    { id: 'af2', name: '产品卖点话术.docx', size: '800KB', uploadedAt: '2026-02-02', description: '推荐使用的话术和表达方式' },
+    { id: 'af3', name: '品牌视觉参考.pdf', size: '3.2MB', uploadedAt: '2026-02-02', description: '视觉风格和拍摄参考示例' },
+    { id: 'af4', name: '产品素材包.zip', size: '15.6MB', uploadedAt: '2026-02-02', description: '产品图片、视频素材等' },
+  ] as AgencyBriefFile[],
+  sellingPoints: [
+    { id: 'sp1', content: 'SPF50+ PA++++', required: true },
+    { id: 'sp2', content: '轻薄质地，不油腻', required: true },
+    { id: 'sp3', content: '延展性好，易推开', required: false },
+    { id: 'sp4', content: '适合敏感肌', required: false },
+    { id: 'sp5', content: '夏日必备防晒', required: true },
+  ],
+  blacklistWords: [
+    { id: 'bw1', word: '最好', reason: '绝对化用语' },
+    { id: 'bw2', word: '第一', reason: '绝对化用语' },
+    { id: 'bw3', word: '神器', reason: '夸大宣传' },
+    { id: 'bw4', word: '完美', reason: '绝对化用语' },
+    { id: 'bw5', word: '100%', reason: '虚假宣传' },
+  ],
+  contentRequirements: [
+    '视频时长：60-90秒',
+    '需展示产品质地和使用效果',
+    '需在户外或阳光下拍摄',
+    '需提及产品核心卖点',
+  ],
+}
+
+export default function TaskBriefPage() {
+  const router = useRouter()
+  const params = useParams()
+  const [previewFile, setPreviewFile] = useState<AgencyBriefFile | null>(null)
+
+  const handleDownload = (file: AgencyBriefFile) => {
+    alert(`下载文件: ${file.name}`)
+  }
+
+  const handleDownloadAll = () => {
+    alert('下载全部文件')
+  }
+
+  const requiredPoints = mockAgencyBrief.sellingPoints.filter(sp => sp.required)
+  const optionalPoints = mockAgencyBrief.sellingPoints.filter(sp => !sp.required)
+
+  return (
+    <ResponsiveLayout role="creator">
+      <div className="flex flex-col gap-6 h-full">
+        {/* 顶部导航 */}
+        <div className="flex items-center justify-between">
+          <div className="flex flex-col gap-1">
+            <div className="flex items-center gap-3 mb-1">
+              <button
+                type="button"
+                onClick={() => router.back()}
+                className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-bg-elevated text-text-secondary text-sm hover:bg-bg-card transition-colors"
+              >
+                <ArrowLeft className="w-4 h-4" />
+                返回
+              </button>
+            </div>
+            <h1 className="text-xl lg:text-[28px] font-bold text-text-primary">{mockTaskInfo.taskName}</h1>
+            <p className="text-sm lg:text-[15px] text-text-secondary">查看任务要求和Brief文档</p>
+          </div>
+          <Button onClick={() => router.push(`/creator/task/${params.id}`)}>
+            开始任务
+            <ChevronRight className="w-4 h-4" />
+          </Button>
+        </div>
+
+        {/* 任务基本信息 */}
+        <div className="bg-bg-card rounded-2xl p-5 card-shadow">
+          <h3 className="text-base font-semibold text-text-primary mb-4">任务信息</h3>
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-xl bg-purple-500/15 flex items-center justify-center">
+                <Building2 className="w-5 h-5 text-purple-400" />
+              </div>
+              <div>
+                <p className="text-xs text-text-tertiary">代理商</p>
+                <p className="text-sm font-medium text-text-primary">{mockTaskInfo.agencyName}</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-xl bg-accent-indigo/15 flex items-center justify-center">
+                <Building2 className="w-5 h-5 text-accent-indigo" />
+              </div>
+              <div>
+                <p className="text-xs text-text-tertiary">品牌方</p>
+                <p className="text-sm font-medium text-text-primary">{mockTaskInfo.brandName}</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-xl bg-accent-green/15 flex items-center justify-center">
+                <Calendar className="w-5 h-5 text-accent-green" />
+              </div>
+              <div>
+                <p className="text-xs text-text-tertiary">分配时间</p>
+                <p className="text-sm font-medium text-text-primary">{mockTaskInfo.createdAt}</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-xl bg-accent-coral/15 flex items-center justify-center">
+                <Clock className="w-5 h-5 text-accent-coral" />
+              </div>
+              <div>
+                <p className="text-xs text-text-tertiary">截止日期</p>
+                <p className="text-sm font-medium text-text-primary">{mockTaskInfo.deadline}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 主要内容区域 - 可滚动 */}
+        <div className="flex-1 overflow-y-auto space-y-6">
+          {/* Brief文档列表 */}
+          <div className="bg-bg-card rounded-2xl p-5 card-shadow">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center gap-2">
+                <File className="w-5 h-5 text-accent-indigo" />
+                <h3 className="text-base font-semibold text-text-primary">Brief 文档</h3>
+                <span className="text-sm text-text-tertiary">({mockAgencyBrief.files.length}个文件)</span>
+              </div>
+              <Button variant="secondary" size="sm" onClick={handleDownloadAll}>
+                <Download className="w-4 h-4" />
+                下载全部
+              </Button>
+            </div>
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+              {mockAgencyBrief.files.map((file) => (
+                <div
+                  key={file.id}
+                  className="flex items-center justify-between p-4 bg-bg-elevated rounded-xl hover:bg-bg-page transition-colors"
+                >
+                  <div className="flex items-center gap-3 min-w-0">
+                    <div className="w-11 h-11 rounded-xl bg-accent-indigo/15 flex items-center justify-center flex-shrink-0">
+                      <FileText className="w-5 h-5 text-accent-indigo" />
+                    </div>
+                    <div className="min-w-0">
+                      <p className="text-sm font-medium text-text-primary truncate">{file.name}</p>
+                      <p className="text-xs text-text-tertiary">{file.size}</p>
+                      {file.description && (
+                        <p className="text-xs text-text-secondary mt-0.5 truncate">{file.description}</p>
+                      )}
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-1 flex-shrink-0 ml-2">
+                    <button
+                      type="button"
+                      onClick={() => setPreviewFile(file)}
+                      className="p-2.5 hover:bg-bg-card rounded-lg transition-colors"
+                    >
+                      <Eye className="w-4 h-4 text-text-secondary" />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleDownload(file)}
+                      className="p-2.5 hover:bg-bg-card rounded-lg transition-colors"
+                    >
+                      <Download className="w-4 h-4 text-text-secondary" />
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* 内容要求 */}
+          <div className="bg-bg-card rounded-2xl p-5 card-shadow">
+            <div className="flex items-center gap-2 mb-4">
+              <FileText className="w-5 h-5 text-accent-amber" />
+              <h3 className="text-base font-semibold text-text-primary">内容要求</h3>
+            </div>
+            <ul className="space-y-2">
+              {mockAgencyBrief.contentRequirements.map((req, index) => (
+                <li key={index} className="flex items-start gap-2 text-sm text-text-secondary">
+                  <span className="w-1.5 h-1.5 rounded-full bg-accent-amber mt-2 flex-shrink-0" />
+                  {req}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* 卖点要求 */}
+          <div className="bg-bg-card rounded-2xl p-5 card-shadow">
+            <div className="flex items-center gap-2 mb-4">
+              <Target className="w-5 h-5 text-accent-green" />
+              <h3 className="text-base font-semibold text-text-primary">卖点要求</h3>
+            </div>
+            <div className="space-y-3">
+              {requiredPoints.length > 0 && (
+                <div className="p-4 bg-accent-coral/10 rounded-xl border border-accent-coral/30">
+                  <p className="text-xs text-accent-coral font-semibold mb-2">必选卖点（必须在内容中提及）</p>
+                  <div className="flex flex-wrap gap-2">
+                    {requiredPoints.map((sp) => (
+                      <span key={sp.id} className="px-3 py-1.5 text-sm bg-accent-coral/20 text-accent-coral rounded-lg font-medium">
+                        {sp.content}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+              {optionalPoints.length > 0 && (
+                <div className="p-4 bg-bg-elevated rounded-xl">
+                  <p className="text-xs text-text-tertiary font-semibold mb-2">可选卖点（建议提及）</p>
+                  <div className="flex flex-wrap gap-2">
+                    {optionalPoints.map((sp) => (
+                      <span key={sp.id} className="px-3 py-1.5 text-sm bg-bg-page text-text-secondary rounded-lg">
+                        {sp.content}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* 违禁词 */}
+          <div className="bg-bg-card rounded-2xl p-5 card-shadow">
+            <div className="flex items-center gap-2 mb-4">
+              <Ban className="w-5 h-5 text-accent-coral" />
+              <h3 className="text-base font-semibold text-text-primary">违禁词（请勿在内容中使用）</h3>
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {mockAgencyBrief.blacklistWords.map((bw) => (
+                <span
+                  key={bw.id}
+                  className="px-3 py-1.5 text-sm bg-accent-coral/15 text-accent-coral rounded-lg border border-accent-coral/30"
+                >
+                  「{bw.word}」<span className="text-xs opacity-75 ml-1">{bw.reason}</span>
+                </span>
+              ))}
+            </div>
+          </div>
+
+          {/* 底部操作按钮 */}
+          <div className="flex justify-center py-4">
+            <Button size="lg" onClick={() => router.push(`/creator/task/${params.id}`)}>
+              我已了解，开始任务
+              <ChevronRight className="w-5 h-5" />
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* 文件预览弹窗 */}
+      <Modal
+        isOpen={!!previewFile}
+        onClose={() => setPreviewFile(null)}
+        title={previewFile?.name || '文件预览'}
+        size="lg"
+      >
+        <div className="space-y-4">
+          <div className="aspect-[4/3] bg-bg-elevated rounded-lg flex items-center justify-center">
+            <div className="text-center">
+              <FileText className="w-12 h-12 mx-auto text-accent-indigo mb-4" />
+              <p className="text-text-secondary">文件预览区域</p>
+              <p className="text-xs text-text-tertiary mt-1">实际开发中将嵌入文件预览组件</p>
+            </div>
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button variant="secondary" onClick={() => setPreviewFile(null)}>
+              关闭
+            </Button>
+            {previewFile && (
+              <Button onClick={() => handleDownload(previewFile)}>
+                <Download className="w-4 h-4" />
+                下载文件
+              </Button>
+            )}
+          </div>
+        </div>
+      </Modal>
+    </ResponsiveLayout>
+  )
+}

frontend/app/creator/task/[id]/page.tsx

@@ -6,8 +6,11 @@ import {
   Upload, Check, X, Folder, Bell, MessageCircle,
   XCircle, CheckCircle, Loader2, Scan, ArrowLeft,
   Bot, Users, Building2, Clock, FileText, Video,
-  ChevronRight, AlertTriangle
+  ChevronRight, AlertTriangle, Download, Eye, Target, Ban,
+  ChevronDown, ChevronUp, File
 } from 'lucide-react'
+import { Modal } from '@/components/ui/Modal'
+import { Button } from '@/components/ui/Button'
 import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
 import { cn } from '@/lib/utils'
 
@@ -50,6 +53,36 @@ type TaskData = {
   scriptContent?: string
 }
 
+// 代理商Brief文档（达人可查看）
+type AgencyBriefFile = {
+  id: string
+  name: string
+  size: string
+  uploadedAt: string
+  description?: string
+}
+
+const mockAgencyBrief = {
+  files: [
+    { id: 'af1', name: '达人拍摄指南.pdf', size: '1.5MB', uploadedAt: '2026-02-02', description: '详细的拍摄流程和注意事项' },
+    { id: 'af2', name: '产品卖点话术.docx', size: '800KB', uploadedAt: '2026-02-02', description: '推荐使用的话术和表达方式' },
+    { id: 'af3', name: '品牌视觉参考.pdf', size: '3.2MB', uploadedAt: '2026-02-02', description: '视觉风格和拍摄参考示例' },
+  ] as AgencyBriefFile[],
+  sellingPoints: [
+    { id: 'sp1', content: 'SPF50+ PA++++', required: true },
+    { id: 'sp2', content: '轻薄质地，不油腻', required: true },
+    { id: 'sp3', content: '延展性好，易推开', required: false },
+    { id: 'sp4', content: '适合敏感肌', required: false },
+    { id: 'sp5', content: '夏日必备防晒', required: true },
+  ],
+  blacklistWords: [
+    { id: 'bw1', word: '最好', reason: '绝对化用语' },
+    { id: 'bw2', word: '第一', reason: '绝对化用语' },
+    { id: 'bw3', word: '神器', reason: '夸大宣传' },
+    { id: 'bw4', word: '完美', reason: '绝对化用语' },
+  ],
+}
+
 // 所有15个任务的详细数据
 const allTasksData: Record<string, TaskData> = {
   'task-001': {
@@ -355,6 +388,164 @@ function ReviewProgressBar({ task }: { task: TaskData }) {
   )
 }
 
+// Brief文档查看组件
+function AgencyBriefSection() {
+  const [isExpanded, setIsExpanded] = useState(true)
+  const [previewFile, setPreviewFile] = useState<AgencyBriefFile | null>(null)
+
+  const handleDownload = (file: AgencyBriefFile) => {
+    alert(`下载文件: ${file.name}`)
+  }
+
+  const requiredPoints = mockAgencyBrief.sellingPoints.filter(sp => sp.required)
+  const optionalPoints = mockAgencyBrief.sellingPoints.filter(sp => !sp.required)
+
+  return (
+    <>
+      <div className="bg-bg-card rounded-2xl card-shadow border border-accent-indigo/30">
+        <div className="flex items-center justify-between p-4 border-b border-border-subtle">
+          <div className="flex items-center gap-2">
+            <File className="w-5 h-5 text-accent-indigo" />
+            <span className="text-base font-semibold text-text-primary">Brief 文档与要求</span>
+          </div>
+          <button
+            type="button"
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="p-1.5 hover:bg-bg-elevated rounded-lg transition-colors"
+          >
+            {isExpanded ? (
+              <ChevronUp className="w-5 h-5 text-text-tertiary" />
+            ) : (
+              <ChevronDown className="w-5 h-5 text-text-tertiary" />
+            )}
+          </button>
+        </div>
+
+        {isExpanded && (
+          <div className="p-4 space-y-4">
+            {/* Brief文档列表 */}
+            <div>
+              <h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2">
+                <FileText className="w-4 h-4 text-accent-indigo" />
+                参考文档
+              </h4>
+              <div className="space-y-2">
+                {mockAgencyBrief.files.map((file) => (
+                  <div key={file.id} className="flex items-center justify-between p-3 bg-bg-elevated rounded-xl">
+                    <div className="flex items-center gap-3 min-w-0">
+                      <div className="w-9 h-9 rounded-lg bg-accent-indigo/15 flex items-center justify-center flex-shrink-0">
+                        <FileText className="w-4 h-4 text-accent-indigo" />
+                      </div>
+                      <div className="min-w-0">
+                        <p className="text-sm font-medium text-text-primary truncate">{file.name}</p>
+                        <p className="text-xs text-text-tertiary">{file.size}</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-1 flex-shrink-0">
+                      <button
+                        type="button"
+                        onClick={() => setPreviewFile(file)}
+                        className="p-2 hover:bg-bg-page rounded-lg transition-colors"
+                      >
+                        <Eye className="w-4 h-4 text-text-secondary" />
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => handleDownload(file)}
+                        className="p-2 hover:bg-bg-page rounded-lg transition-colors"
+                      >
+                        <Download className="w-4 h-4 text-text-secondary" />
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* 卖点要求 */}
+            <div>
+              <h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2">
+                <Target className="w-4 h-4 text-accent-green" />
+                卖点要求
+              </h4>
+              <div className="space-y-2">
+                {requiredPoints.length > 0 && (
+                  <div className="p-3 bg-accent-coral/10 rounded-xl border border-accent-coral/30">
+                    <p className="text-xs text-accent-coral font-medium mb-2">必选卖点（必须提及）</p>
+                    <div className="flex flex-wrap gap-2">
+                      {requiredPoints.map((sp) => (
+                        <span key={sp.id} className="px-2 py-1 text-xs bg-accent-coral/20 text-accent-coral rounded-lg">
+                          {sp.content}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                {optionalPoints.length > 0 && (
+                  <div className="p-3 bg-bg-elevated rounded-xl">
+                    <p className="text-xs text-text-tertiary font-medium mb-2">可选卖点</p>
+                    <div className="flex flex-wrap gap-2">
+                      {optionalPoints.map((sp) => (
+                        <span key={sp.id} className="px-2 py-1 text-xs bg-bg-page text-text-secondary rounded-lg">
+                          {sp.content}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* 违禁词 */}
+            <div>
+              <h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2">
+                <Ban className="w-4 h-4 text-accent-coral" />
+                违禁词（请勿使用）
+              </h4>
+              <div className="flex flex-wrap gap-2">
+                {mockAgencyBrief.blacklistWords.map((bw) => (
+                  <span key={bw.id} className="px-2 py-1 text-xs bg-accent-coral/15 text-accent-coral rounded-lg border border-accent-coral/30">
+                    「{bw.word}」
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 文件预览弹窗 */}
+      <Modal
+        isOpen={!!previewFile}
+        onClose={() => setPreviewFile(null)}
+        title={previewFile?.name || '文件预览'}
+        size="lg"
+      >
+        <div className="space-y-4">
+          <div className="aspect-[4/3] bg-bg-elevated rounded-lg flex items-center justify-center">
+            <div className="text-center">
+              <FileText className="w-12 h-12 mx-auto text-accent-indigo mb-4" />
+              <p className="text-text-secondary">文件预览区域</p>
+              <p className="text-xs text-text-tertiary mt-1">实际开发中将嵌入文件预览组件</p>
+            </div>
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button variant="secondary" onClick={() => setPreviewFile(null)}>
+              关闭
+            </Button>
+            {previewFile && (
+              <Button onClick={() => handleDownload(previewFile)}>
+                <Download className="w-4 h-4" />
+                下载文件
+              </Button>
+            )}
+          </div>
+        </div>
+      </Modal>
+    </>
+  )
+}
+
 // 上传界面
 function UploadView({ task }: { task: TaskData }) {
   const [isDragging, setIsDragging] = useState(false)
@@ -362,6 +553,9 @@ function UploadView({ task }: { task: TaskData }) {
 
   return (
     <div className="flex flex-col gap-6 h-full">
+      {/* Brief文档区域 - 仅脚本阶段显示 */}
+      {isScript && <AgencyBriefSection />}
+
       <div className="flex items-center justify-between">
         <div>
           <h3 className="text-lg font-semibold text-text-primary">