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

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

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

frontend/app/brand/review/page.tsx

@@ -14,8 +14,13 @@ import {
   User,
   Building,
   ChevronRight,
-  AlertTriangle
+  AlertTriangle,
+  Download,
+  Eye,
+  File,
+  MessageSquareWarning
 } from 'lucide-react'
+import { Modal } from '@/components/ui/Modal'
 import { getPlatformInfo } from '@/lib/platforms'
 
 // 模拟脚本待审列表
@@ -23,6 +28,8 @@ const mockScriptTasks = [
   {
     id: 'script-001',
     title: '夏日护肤推广脚本',
+    fileName: '夏日护肤推广_脚本v2.docx',
+    fileSize: '245 KB',
     creatorName: '小美护肤',
     agencyName: '星耀传媒',
     projectName: 'XX品牌618推广',
@@ -31,10 +38,13 @@ const mockScriptTasks = [
     submittedAt: '2026-02-06 14:30',
     hasHighRisk: false,
     agencyApproved: true,
+    isAppeal: false,
   },
   {
     id: 'script-002',
     title: '新品口红试色脚本',
+    fileName: '口红试色_脚本v1.docx',
+    fileSize: '312 KB',
     creatorName: '美妆Lisa',
     agencyName: '创意无限',
     projectName: 'XX品牌618推广',
@@ -43,6 +53,8 @@ const mockScriptTasks = [
     submittedAt: '2026-02-06 12:15',
     hasHighRisk: true,
     agencyApproved: true,
+    isAppeal: true,
+    appealReason: '已修改违规用词，请求品牌方重新审核',
   },
 ]
 
@@ -51,6 +63,8 @@ const mockVideoTasks = [
   {
     id: 'video-001',
     title: '夏日护肤推广',
+    fileName: '夏日护肤_成片v2.mp4',
+    fileSize: '128 MB',
     creatorName: '小美护肤',
     agencyName: '星耀传媒',
     projectName: 'XX品牌618推广',
@@ -60,10 +74,13 @@ const mockVideoTasks = [
     submittedAt: '2026-02-06 15:00',
     hasHighRisk: false,
     agencyApproved: true,
+    isAppeal: false,
   },
   {
     id: 'video-002',
     title: '新品口红试色',
+    fileName: '口红试色_终版.mp4',
+    fileSize: '256 MB',
     creatorName: '美妆Lisa',
     agencyName: '创意无限',
     projectName: 'XX品牌618推广',
@@ -73,10 +90,14 @@ const mockVideoTasks = [
     submittedAt: '2026-02-06 13:45',
     hasHighRisk: true,
     agencyApproved: true,
+    isAppeal: true,
+    appealReason: '已按要求重新剪辑，删除了争议片段，请求终审',
   },
   {
     id: 'video-003',
     title: '健身器材开箱',
+    fileName: '健身器材_开箱v3.mp4',
+    fileSize: '198 MB',
     creatorName: '健身教练王',
     agencyName: '美妆达人MCN',
     projectName: 'XX运动品牌',
@@ -86,6 +107,7 @@ const mockVideoTasks = [
     submittedAt: '2026-02-06 11:30',
     hasHighRisk: false,
     agencyApproved: true,
+    isAppeal: false,
   },
 ]
 
@@ -95,10 +117,33 @@ function ScoreTag({ score }: { score: number }) {
   return <ErrorTag>{score}分</ErrorTag>
 }
 
-function TaskCard({ task, type }: { task: typeof mockScriptTasks[0] | typeof mockVideoTasks[0]; type: 'script' | 'video' }) {
+type ScriptTask = typeof mockScriptTasks[0]
+type VideoTask = typeof mockVideoTasks[0]
+
+function TaskCard({
+  task,
+  type,
+  onPreview
+}: {
+  task: ScriptTask | VideoTask
+  type: 'script' | 'video'
+  onPreview: (task: ScriptTask | VideoTask, type: 'script' | 'video') => void
+}) {
   const href = type === 'script' ? `/brand/review/script/${task.id}` : `/brand/review/video/${task.id}`
   const platform = getPlatformInfo(task.platform)
 
+  const handlePreview = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    onPreview(task, type)
+  }
+
+  const handleDownload = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    alert(`下载文件: ${task.fileName}`)
+  }
+
   return (
     <Link href={href}>
       <div className="rounded-lg border border-border-subtle hover:border-accent-indigo/50 hover:bg-accent-indigo/5 transition-all cursor-pointer overflow-hidden">
@@ -107,6 +152,13 @@ function TaskCard({ task, type }: { task: typeof mockScriptTasks[0] | typeof moc
           <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>
+            {/* 申诉标识 */}
+            {task.isAppeal && (
+              <span className="ml-auto flex items-center gap-1 px-2 py-0.5 text-xs bg-accent-amber/30 text-accent-amber rounded-full font-medium">
+                <MessageSquareWarning size={12} />
+                申诉
+              </span>
+            )}
           </div>
         )}
         <div className="p-4">
@@ -134,6 +186,49 @@ function TaskCard({ task, type }: { task: typeof mockScriptTasks[0] | typeof moc
             </div>
             <ScoreTag score={task.aiScore} />
           </div>
+
+          {/* 申诉理由 */}
+          {task.isAppeal && task.appealReason && (
+            <div className="mb-3 p-2.5 rounded-lg bg-accent-amber/10 border border-accent-amber/30">
+              <p className="text-xs text-accent-amber font-medium mb-1">申诉理由</p>
+              <p className="text-sm text-text-secondary">{task.appealReason}</p>
+            </div>
+          )}
+
+          {/* 文件信息 */}
+          <div className="flex items-center gap-3 p-3 rounded-lg bg-bg-page mb-3">
+            <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${type === 'script' ? 'bg-accent-indigo/15' : 'bg-purple-500/15'}`}>
+              {type === 'script' ? (
+                <File size={20} className="text-accent-indigo" />
+              ) : (
+                <Video size={20} className="text-purple-400" />
+              )}
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium text-text-primary truncate">{task.fileName}</p>
+              <p className="text-xs text-text-tertiary">
+                {task.fileSize}
+                {'duration' in task && ` · ${task.duration}`}
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={handlePreview}
+              className="p-2 rounded-lg hover:bg-bg-elevated transition-colors"
+              title={type === 'script' ? '预览脚本' : '预览视频'}
+            >
+              <Eye size={18} className="text-text-secondary" />
+            </button>
+            <button
+              type="button"
+              onClick={handleDownload}
+              className="p-2 rounded-lg hover:bg-bg-elevated transition-colors"
+              title="下载文件"
+            >
+              <Download size={18} className="text-text-secondary" />
+            </button>
+          </div>
+
           <div className="flex items-center justify-between text-xs text-text-tertiary">
             <span>{task.projectName}</span>
             <span className="flex items-center gap-1">
@@ -141,11 +236,6 @@ function TaskCard({ task, type }: { task: typeof mockScriptTasks[0] | typeof moc
               {task.submittedAt}
             </span>
           </div>
-          {'duration' in task && (
-            <div className="mt-2 text-xs text-text-tertiary">
-              时长: {task.duration}
-            </div>
-          )}
         </div>
       </div>
     </Link>
@@ -155,6 +245,7 @@ function TaskCard({ task, type }: { task: typeof mockScriptTasks[0] | typeof moc
 export default function BrandReviewListPage() {
   const [searchQuery, setSearchQuery] = useState('')
   const [activeTab, setActiveTab] = useState<'all' | 'script' | 'video'>('all')
+  const [previewTask, setPreviewTask] = useState<{ task: ScriptTask | VideoTask; type: 'script' | 'video' } | null>(null)
 
   const filteredScripts = mockScriptTasks.filter(task =>
     task.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
@@ -166,6 +257,14 @@ export default function BrandReviewListPage() {
     task.creatorName.toLowerCase().includes(searchQuery.toLowerCase())
   )
 
+  // 计算申诉数量
+  const appealScriptCount = mockScriptTasks.filter(t => t.isAppeal).length
+  const appealVideoCount = mockVideoTasks.filter(t => t.isAppeal).length
+
+  const handlePreview = (task: ScriptTask | VideoTask, type: 'script' | 'video') => {
+    setPreviewTask({ task, type })
+  }
+
   return (
     <div className="space-y-6">
       {/* 页面标题 */}
@@ -182,6 +281,12 @@ export default function BrandReviewListPage() {
           <span className="px-2 py-1 bg-purple-500/20 text-purple-400 rounded font-medium">
             {mockVideoTasks.length} 视频
           </span>
+          {(appealScriptCount + appealVideoCount) > 0 && (
+            <span className="px-2 py-1 bg-accent-amber/20 text-accent-amber rounded font-medium flex items-center gap-1">
+              <MessageSquareWarning size={14} />
+              {appealScriptCount + appealVideoCount} 申诉
+            </span>
+          )}
         </div>
       </div>
 
@@ -245,7 +350,7 @@ export default function BrandReviewListPage() {
             <CardContent className="space-y-3">
               {filteredScripts.length > 0 ? (
                 filteredScripts.map((task) => (
-                  <TaskCard key={task.id} task={task} type="script" />
+                  <TaskCard key={task.id} task={task} type="script" onPreview={handlePreview} />
                 ))
               ) : (
                 <div className="text-center py-8 text-text-tertiary">
@@ -272,7 +377,7 @@ export default function BrandReviewListPage() {
             <CardContent className="space-y-3">
               {filteredVideos.length > 0 ? (
                 filteredVideos.map((task) => (
-                  <TaskCard key={task.id} task={task} type="video" />
+                  <TaskCard key={task.id} task={task} type="video" onPreview={handlePreview} />
                 ))
               ) : (
                 <div className="text-center py-8 text-text-tertiary">
@@ -284,6 +389,70 @@ export default function BrandReviewListPage() {
           </Card>
         )}
       </div>
+
+      {/* 预览弹窗 */}
+      <Modal
+        isOpen={!!previewTask}
+        onClose={() => setPreviewTask(null)}
+        title={previewTask?.task.fileName || '文件预览'}
+        size="lg"
+      >
+        <div className="space-y-4">
+          {/* 申诉理由 */}
+          {previewTask?.task.isAppeal && previewTask?.task.appealReason && (
+            <div className="p-3 rounded-lg bg-accent-amber/10 border border-accent-amber/30">
+              <p className="text-xs text-accent-amber font-medium mb-1 flex items-center gap-1">
+                <MessageSquareWarning size={12} />
+                申诉理由
+              </p>
+              <p className="text-sm text-text-secondary">{previewTask.task.appealReason}</p>
+            </div>
+          )}
+
+          {/* 预览区域 */}
+          {previewTask?.type === 'video' ? (
+            <div className="aspect-video bg-bg-elevated rounded-lg flex items-center justify-center">
+              <div className="text-center">
+                <Video className="w-12 h-12 mx-auto text-purple-400 mb-4" />
+                <p className="text-text-secondary">视频播放区域</p>
+                <p className="text-xs text-text-tertiary mt-1">实际开发中将嵌入视频播放器</p>
+              </div>
+            </div>
+          ) : (
+            <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-between items-center">
+            <div className="text-sm text-text-secondary">
+              <span>{previewTask?.task.fileName}</span>
+              <span className="mx-2">·</span>
+              <span>{previewTask?.task.fileSize}</span>
+              {previewTask?.type === 'video' && 'duration' in (previewTask?.task || {}) && (
+                <>
+                  <span className="mx-2">·</span>
+                  <span>{(previewTask.task as VideoTask).duration}</span>
+                </>
+              )}
+            </div>
+            <div className="flex gap-2">
+              <Button variant="secondary" onClick={() => setPreviewTask(null)}>
+                关闭
+              </Button>
+              <Button onClick={() => alert(`下载文件: ${previewTask?.task.fileName}`)}>
+                <Download size={16} />
+                下载
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Modal>
     </div>
   )
 }

frontend/app/brand/review/script/[id]/page.tsx

@@ -19,8 +19,10 @@ import {
   Eye,
   Download,
   Shield,
-  MessageSquare
+  MessageSquare,
+  MessageSquareWarning
 } from 'lucide-react'
+import { FilePreview, FileInfoCard, FilePreviewModal, type FileInfo } from '@/components/ui/FilePreview'
 
 // 模拟脚本任务数据
 const mockScriptTask = {
@@ -32,6 +34,18 @@ const mockScriptTask = {
   submittedAt: '2026-02-06 14:30',
   aiScore: 88,
   status: 'brand_reviewing',
+  // 文件信息
+  file: {
+    id: 'file-001',
+    fileName: '夏日护肤推广_脚本v2.docx',
+    fileSize: '245 KB',
+    fileType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    fileUrl: '/demo/scripts/script-001.docx',
+    uploadedAt: '2026-02-06 14:30',
+  } as FileInfo,
+  // 申诉信息
+  isAppeal: false,
+  appealReason: '',
   scriptContent: {
     opening: '大家好！今天给大家分享一款超级好用的夏日护肤神器～',
     productIntro: '这款XX品牌的防晒霜，SPF50+，PA++++，真的是夏天出门必备！质地轻薄不油腻，涂上去清清爽爽的。',
@@ -88,7 +102,8 @@ export default function BrandScriptReviewPage() {
   const [showApproveModal, setShowApproveModal] = useState(false)
   const [showRejectModal, setShowRejectModal] = useState(false)
   const [rejectReason, setRejectReason] = useState('')
-  const [viewMode, setViewMode] = useState<'simple' | 'preview'>('preview')
+  const [viewMode, setViewMode] = useState<'file' | 'parsed'>('file')
+  const [showFilePreview, setShowFilePreview] = useState(false)
 
   const task = mockScriptTask
 
@@ -116,7 +131,15 @@ export default function BrandScriptReviewPage() {
           <ArrowLeft size={20} className="text-text-primary" />
         </button>
         <div className="flex-1">
-          <h1 className="text-xl font-bold text-text-primary">{task.title}</h1>
+          <div className="flex items-center gap-2">
+            <h1 className="text-xl font-bold text-text-primary">{task.title}</h1>
+            {task.isAppeal && (
+              <span className="flex items-center gap-1 px-2 py-1 text-xs bg-accent-amber/20 text-accent-amber rounded-full font-medium">
+                <MessageSquareWarning 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={14} />
@@ -133,33 +156,62 @@ export default function BrandScriptReviewPage() {
           </div>
         </div>
         <div className="flex items-center gap-2">
-          <button
-            type="button"
-            onClick={() => setViewMode(viewMode === 'simple' ? 'preview' : 'simple')}
-            className="flex items-center gap-2 px-3 py-2 text-sm text-text-secondary hover:text-text-primary hover:bg-bg-elevated rounded-lg"
-          >
-            <Eye size={16} />
-            {viewMode === 'simple' ? '展开预览' : '简洁模式'}
-          </button>
+          <div className="flex items-center gap-1 p-1 bg-bg-elevated rounded-lg">
+            <button
+              type="button"
+              onClick={() => setViewMode('file')}
+              className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
+                viewMode === 'file' ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary'
+              }`}
+            >
+              原文件
+            </button>
+            <button
+              type="button"
+              onClick={() => setViewMode('parsed')}
+              className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
+                viewMode === 'parsed' ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary'
+              }`}
+            >
+              AI解析
+            </button>
+          </div>
         </div>
       </div>
 
+      {/* 申诉理由 */}
+      {task.isAppeal && task.appealReason && (
+        <div className="p-4 rounded-xl bg-accent-amber/10 border border-accent-amber/30">
+          <p className="text-sm text-accent-amber font-medium mb-1 flex items-center gap-1">
+            <MessageSquareWarning size={14} />
+            申诉理由
+          </p>
+          <p className="text-text-secondary">{task.appealReason}</p>
+        </div>
+      )}
+
       {/* 审核流程进度条 */}
       <ReviewProgressBar taskStatus={task.status} />
 
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         {/* 左侧：脚本内容 */}
         <div className="lg:col-span-2 space-y-4">
-          {viewMode === 'simple' ? (
+          {/* 文件信息卡片 */}
+          <FileInfoCard
+            file={task.file}
+            onPreview={() => setShowFilePreview(true)}
+          />
+
+          {viewMode === 'file' ? (
             <Card>
-              <CardContent className="py-8 text-center">
-                <FileText size={48} className="mx-auto text-accent-indigo mb-4" />
-                <p className="text-text-primary font-medium">{task.title}</p>
-                <p className="text-sm text-text-secondary mt-2">点击"展开预览"查看脚本内容</p>
-                <Button variant="secondary" className="mt-4" onClick={() => setViewMode('preview')}>
-                  <Eye size={16} />
-                  展开预览
-                </Button>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <FileText size={18} className="text-accent-indigo" />
+                  文件预览
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <FilePreview file={task.file} />
               </CardContent>
             </Card>
           ) : (
@@ -167,7 +219,8 @@ export default function BrandScriptReviewPage() {
               <CardHeader>
                 <CardTitle className="flex items-center gap-2">
                   <FileText size={18} className="text-accent-indigo" />
-                  脚本内容
+                  AI 解析内容
+                  <span className="text-xs font-normal text-text-tertiary ml-2">（AI 自动提取的结构化内容）</span>
                 </CardTitle>
               </CardHeader>
               <CardContent className="space-y-4">
@@ -358,6 +411,13 @@ export default function BrandScriptReviewPage() {
           </div>
         </div>
       </Modal>
+
+      {/* 文件预览弹窗 */}
+      <FilePreviewModal
+        file={task.file}
+        isOpen={showFilePreview}
+        onClose={() => setShowFilePreview(false)}
+      />
     </div>
   )
 }

frontend/app/brand/review/video/[id]/page.tsx

@@ -19,8 +19,11 @@ import {
   Clock,
   CheckCircle,
   XCircle,
-  MessageSquare
+  MessageSquare,
+  ExternalLink,
+  MessageSquareWarning
 } from 'lucide-react'
+import { FileInfoCard, FilePreviewModal, type FileInfo } from '@/components/ui/FilePreview'
 
 // 模拟视频任务数据
 const mockVideoTask = {
@@ -33,6 +36,20 @@ const mockVideoTask = {
   duration: 135, // 秒
   aiScore: 85,
   status: 'brand_reviewing',
+  // 文件信息
+  file: {
+    id: 'file-video-001',
+    fileName: '夏日护肤_成片v2.mp4',
+    fileSize: '128 MB',
+    fileType: 'video/mp4',
+    fileUrl: '/demo/videos/video-001.mp4',
+    uploadedAt: '2026-02-06 15:00',
+    duration: '02:15',
+    thumbnail: '/demo/videos/video-001-thumb.jpg',
+  } as FileInfo,
+  // 申诉信息
+  isAppeal: false,
+  appealReason: '',
   agencyReview: {
     reviewer: '张经理',
     result: 'approved',
@@ -111,6 +128,8 @@ export default function BrandVideoReviewPage() {
   const [showRejectModal, setShowRejectModal] = useState(false)
   const [rejectReason, setRejectReason] = useState('')
   const [checkedViolations, setCheckedViolations] = useState<Record<string, boolean>>({})
+  const [showFilePreview, setShowFilePreview] = useState(false)
+  const [videoError, setVideoError] = useState(false)
 
   const task = mockVideoTask
 
@@ -145,7 +164,15 @@ export default function BrandVideoReviewPage() {
           <ArrowLeft size={20} className="text-text-primary" />
         </button>
         <div className="flex-1">
-          <h1 className="text-xl font-bold text-text-primary">{task.title}</h1>
+          <div className="flex items-center gap-2">
+            <h1 className="text-xl font-bold text-text-primary">{task.title}</h1>
+            {task.isAppeal && (
+              <span className="flex items-center gap-1 px-2 py-1 text-xs bg-accent-amber/20 text-accent-amber rounded-full font-medium">
+                <MessageSquareWarning 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={14} />
@@ -163,22 +190,61 @@ export default function BrandVideoReviewPage() {
         </div>
       </div>
 
+      {/* 申诉理由 */}
+      {task.isAppeal && task.appealReason && (
+        <div className="p-4 rounded-xl bg-accent-amber/10 border border-accent-amber/30">
+          <p className="text-sm text-accent-amber font-medium mb-1 flex items-center gap-1">
+            <MessageSquareWarning size={14} />
+            申诉理由
+          </p>
+          <p className="text-text-secondary">{task.appealReason}</p>
+        </div>
+      )}
+
       {/* 审核流程进度条 */}
       <ReviewProgressBar taskStatus={task.status} />
 
       <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
         {/* 左侧：视频播放器 (3/5) */}
         <div className="lg:col-span-3 space-y-4">
+          {/* 文件信息卡片 */}
+          <FileInfoCard
+            file={task.file}
+            onPreview={() => setShowFilePreview(true)}
+          />
+
           <Card>
             <CardContent className="p-0">
-              <div className="aspect-video bg-gray-900 rounded-t-lg flex items-center justify-center relative">
-                <button
-                  type="button"
-                  className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center hover:bg-white/30 transition-colors"
-                  onClick={() => setIsPlaying(!isPlaying)}
-                >
-                  {isPlaying ? <Pause size={32} className="text-white" /> : <Play size={32} className="text-white ml-1" />}
-                </button>
+              {/* 真实视频播放器 */}
+              <div className="aspect-video bg-gray-900 rounded-t-lg overflow-hidden relative">
+                {videoError ? (
+                  <div className="w-full h-full flex items-center justify-center">
+                    <div className="text-center">
+                      <Play size={48} className="mx-auto text-white/50 mb-3" />
+                      <p className="text-white/70 mb-3">视频加载失败</p>
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        onClick={() => window.open(task.file.fileUrl, '_blank')}
+                      >
+                        <ExternalLink size={14} />
+                        在新标签页打开
+                      </Button>
+                    </div>
+                  </div>
+                ) : (
+                  <video
+                    className="w-full h-full"
+                    controls
+                    poster={task.file.thumbnail}
+                    onError={() => setVideoError(true)}
+                    onPlay={() => setIsPlaying(true)}
+                    onPause={() => setIsPlaying(false)}
+                  >
+                    <source src={task.file.fileUrl} type={task.file.fileType} />
+                    您的浏览器不支持视频播放
+                  </video>
+                )}
               </div>
               {/* 智能进度条 */}
               <div className="p-4 border-t border-border-subtle">
@@ -408,6 +474,13 @@ export default function BrandVideoReviewPage() {
           </div>
         </div>
       </Modal>
+
+      {/* 文件预览弹窗 */}
+      <FilePreviewModal
+        file={task.file}
+        isOpen={showFilePreview}
+        onClose={() => setShowFilePreview(false)}
+      />
     </div>
   )
 }