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

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

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

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">