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

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

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

frontend/app/agency/review/page.tsx

@@ -16,8 +16,10 @@ import {
   ChevronRight,
   Download,
   Eye,
-  File
+  File,
+  MessageSquareWarning
 } from 'lucide-react'
+import { Modal } from '@/components/ui/Modal'
 import { getPlatformInfo } from '@/lib/platforms'
 
 // 模拟脚本待审列表
@@ -34,6 +36,7 @@ const mockScriptTasks = [
     riskLevel: 'low' as const,
     submittedAt: '2026-02-06 14:30',
     hasHighRisk: false,
+    isAppeal: false, // 是否为申诉
   },
   {
     id: 'script-002',
@@ -47,6 +50,8 @@ const mockScriptTasks = [
     riskLevel: 'medium' as const,
     submittedAt: '2026-02-06 12:15',
     hasHighRisk: true,
+    isAppeal: true, // 申诉重审
+    appealReason: '已修改违规用词，请求重新审核',
   },
   {
     id: 'script-003',
@@ -60,6 +65,7 @@ const mockScriptTasks = [
     riskLevel: 'low' as const,
     submittedAt: '2026-02-06 10:00',
     hasHighRisk: false,
+    isAppeal: false,
   },
   {
     id: 'script-004',
@@ -73,6 +79,8 @@ const mockScriptTasks = [
     riskLevel: 'high' as const,
     submittedAt: '2026-02-06 09:00',
     hasHighRisk: true,
+    isAppeal: true,
+    appealReason: '对驳回原因有异议，内容符合要求',
   },
 ]
 
@@ -91,6 +99,7 @@ const mockVideoTasks = [
     duration: '02:15',
     submittedAt: '2026-02-06 15:00',
     hasHighRisk: false,
+    isAppeal: false,
   },
   {
     id: 'video-002',
@@ -105,6 +114,8 @@ const mockVideoTasks = [
     duration: '03:42',
     submittedAt: '2026-02-06 13:45',
     hasHighRisk: true,
+    isAppeal: true,
+    appealReason: '已按要求重新剪辑，删除了争议片段',
   },
   {
     id: 'video-003',
@@ -119,6 +130,7 @@ const mockVideoTasks = [
     duration: '04:20',
     submittedAt: '2026-02-06 11:30',
     hasHighRisk: true,
+    isAppeal: false,
   },
   {
     id: 'video-004',
@@ -133,6 +145,7 @@ const mockVideoTasks = [
     duration: '01:45',
     submittedAt: '2026-02-06 10:15',
     hasHighRisk: false,
+    isAppeal: false,
   },
 ]
 
@@ -152,13 +165,18 @@ function ScoreTag({ score }: { score: number }) {
 type ScriptTask = typeof mockScriptTasks[0]
 type VideoTask = typeof mockVideoTasks[0]
 
-function ScriptTaskCard({ task }: { task: ScriptTask }) {
+function ScriptTaskCard({ task, onPreview }: { task: ScriptTask; onPreview: (task: ScriptTask) => void }) {
   const riskConfig = riskLevelConfig[task.riskLevel]
   const platform = getPlatformInfo(task.platform)
 
   const handleDownload = (e: React.MouseEvent) => {
     e.stopPropagation()
-    // TODO: 实现实际下载逻辑
+    alert(`下载文件: ${task.fileName}`)
+  }
+
+  const handlePreview = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onPreview(task)
   }
 
   return (
@@ -168,6 +186,13 @@ function ScriptTaskCard({ task }: { task: ScriptTask }) {
         <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">
@@ -180,53 +205,74 @@ function ScriptTaskCard({ task }: { task: ScriptTask }) {
           <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">
-        <div className="w-10 h-10 rounded-lg bg-accent-indigo/15 flex items-center justify-center">
-          <File size={20} className="text-accent-indigo" />
-        </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}</p>
-        </div>
-        <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>
+        {/* 申诉理由 */}
+        {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 justify-between">
-        <span className="text-xs text-text-tertiary flex items-center gap-1">
-          <Clock size={12} />
-          {task.submittedAt}
-        </span>
-        <Link href={`/agency/review/script/${task.id}`}>
-          <Button size="sm" className={`${
-            task.riskLevel === 'high' ? 'bg-accent-coral hover:bg-accent-coral/80' :
-            task.riskLevel === 'medium' ? 'bg-accent-amber hover:bg-accent-amber/80' :
-            'bg-accent-green hover:bg-accent-green/80'
-          } text-white`}>
-            审核
-          </Button>
-        </Link>
-      </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 bg-accent-indigo/15 flex items-center justify-center">
+            <File size={20} className="text-accent-indigo" />
+          </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}</p>
+          </div>
+          <button
+            type="button"
+            onClick={handlePreview}
+            className="p-2 rounded-lg hover:bg-bg-elevated transition-colors"
+            title="预览文件"
+          >
+            <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">
+          <span className="text-xs text-text-tertiary flex items-center gap-1">
+            <Clock size={12} />
+            {task.submittedAt}
+          </span>
+          <Link href={`/agency/review/script/${task.id}`}>
+            <Button size="sm" className={`${
+              task.riskLevel === 'high' ? 'bg-accent-coral hover:bg-accent-coral/80' :
+              task.riskLevel === 'medium' ? 'bg-accent-amber hover:bg-accent-amber/80' :
+              'bg-accent-green hover:bg-accent-green/80'
+            } text-white`}>
+              {task.isAppeal ? '审核申诉' : '审核'}
+            </Button>
+          </Link>
+        </div>
       </div>
     </div>
   )
 }
 
-function VideoTaskCard({ task }: { task: VideoTask }) {
+function VideoTaskCard({ task, onPreview }: { task: VideoTask; onPreview: (task: VideoTask) => void }) {
   const riskConfig = riskLevelConfig[task.riskLevel]
   const platform = getPlatformInfo(task.platform)
 
   const handleDownload = (e: React.MouseEvent) => {
     e.stopPropagation()
-    // TODO: 实现实际下载逻辑
+    alert(`下载文件: ${task.fileName}`)
+  }
+
+  const handlePreview = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onPreview(task)
   }
 
   return (
@@ -236,6 +282,13 @@ function VideoTaskCard({ task }: { task: VideoTask }) {
         <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">
@@ -248,41 +301,57 @@ function VideoTaskCard({ task }: { task: VideoTask }) {
           <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">
-        <div className="w-10 h-10 rounded-lg bg-purple-500/15 flex items-center justify-center">
-          <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} · {task.duration}</p>
-        </div>
-        <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>
+        {/* 申诉理由 */}
+        {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 justify-between">
-        <span className="text-xs text-text-tertiary flex items-center gap-1">
-          <Clock size={12} />
-          {task.submittedAt}
-        </span>
-        <Link href={`/agency/review/video/${task.id}`}>
-          <Button size="sm" className={`${
-            task.riskLevel === 'high' ? 'bg-accent-coral hover:bg-accent-coral/80' :
-            task.riskLevel === 'medium' ? 'bg-accent-amber hover:bg-accent-amber/80' :
-            'bg-accent-green hover:bg-accent-green/80'
-          } text-white`}>
-            审核
-          </Button>
-        </Link>
-      </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 bg-purple-500/15 flex items-center justify-center">
+            <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} · {task.duration}</p>
+          </div>
+          <button
+            type="button"
+            onClick={handlePreview}
+            className="p-2 rounded-lg hover:bg-bg-elevated transition-colors"
+            title="预览视频"
+          >
+            <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">
+          <span className="text-xs text-text-tertiary flex items-center gap-1">
+            <Clock size={12} />
+            {task.submittedAt}
+          </span>
+          <Link href={`/agency/review/video/${task.id}`}>
+            <Button size="sm" className={`${
+              task.riskLevel === 'high' ? 'bg-accent-coral hover:bg-accent-coral/80' :
+              task.riskLevel === 'medium' ? 'bg-accent-amber hover:bg-accent-amber/80' :
+              'bg-accent-green hover:bg-accent-green/80'
+            } text-white`}>
+              {task.isAppeal ? '审核申诉' : '审核'}
+            </Button>
+          </Link>
+        </div>
       </div>
     </div>
   )
@@ -291,6 +360,8 @@ function VideoTaskCard({ task }: { task: VideoTask }) {
 export default function AgencyReviewListPage() {
   const [searchQuery, setSearchQuery] = useState('')
   const [activeTab, setActiveTab] = useState<'all' | 'script' | 'video'>('all')
+  const [previewScript, setPreviewScript] = useState<ScriptTask | null>(null)
+  const [previewVideo, setPreviewVideo] = useState<VideoTask | null>(null)
 
   const filteredScripts = mockScriptTasks.filter(task =>
     task.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
@@ -302,6 +373,10 @@ export default function AgencyReviewListPage() {
     task.creatorName.toLowerCase().includes(searchQuery.toLowerCase())
   )
 
+  // 计算申诉数量
+  const appealScriptCount = mockScriptTasks.filter(t => t.isAppeal).length
+  const appealVideoCount = mockVideoTasks.filter(t => t.isAppeal).length
+
   return (
     <div className="space-y-6 min-h-0">
       {/* 页面标题 */}
@@ -318,6 +393,12 @@ export default function AgencyReviewListPage() {
           <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>
 
@@ -381,7 +462,7 @@ export default function AgencyReviewListPage() {
             <CardContent className="space-y-3">
               {filteredScripts.length > 0 ? (
                 filteredScripts.map((task) => (
-                  <ScriptTaskCard key={task.id} task={task} />
+                  <ScriptTaskCard key={task.id} task={task} onPreview={setPreviewScript} />
                 ))
               ) : (
                 <div className="text-center py-8 text-text-tertiary">
@@ -408,7 +489,7 @@ export default function AgencyReviewListPage() {
             <CardContent className="space-y-3">
               {filteredVideos.length > 0 ? (
                 filteredVideos.map((task) => (
-                  <VideoTaskCard key={task.id} task={task} />
+                  <VideoTaskCard key={task.id} task={task} onPreview={setPreviewVideo} />
                 ))
               ) : (
                 <div className="text-center py-8 text-text-tertiary">
@@ -420,6 +501,94 @@ export default function AgencyReviewListPage() {
           </Card>
         )}
       </div>
+
+      {/* 脚本预览弹窗 */}
+      <Modal
+        isOpen={!!previewScript}
+        onClose={() => setPreviewScript(null)}
+        title={previewScript?.fileName || '脚本预览'}
+        size="lg"
+      >
+        <div className="space-y-4">
+          {previewScript?.isAppeal && previewScript?.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">{previewScript.appealReason}</p>
+            </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>{previewScript?.fileName}</span>
+              <span className="mx-2">·</span>
+              <span>{previewScript?.fileSize}</span>
+            </div>
+            <div className="flex gap-2">
+              <Button variant="secondary" onClick={() => setPreviewScript(null)}>
+                关闭
+              </Button>
+              <Button onClick={() => alert(`下载文件: ${previewScript?.fileName}`)}>
+                <Download size={16} />
+                下载
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Modal>
+
+      {/* 视频预览弹窗 */}
+      <Modal
+        isOpen={!!previewVideo}
+        onClose={() => setPreviewVideo(null)}
+        title={previewVideo?.fileName || '视频预览'}
+        size="lg"
+      >
+        <div className="space-y-4">
+          {previewVideo?.isAppeal && previewVideo?.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">{previewVideo.appealReason}</p>
+            </div>
+          )}
+          <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="flex justify-between items-center">
+            <div className="text-sm text-text-secondary">
+              <span>{previewVideo?.fileName}</span>
+              <span className="mx-2">·</span>
+              <span>{previewVideo?.fileSize}</span>
+              <span className="mx-2">·</span>
+              <span>{previewVideo?.duration}</span>
+            </div>
+            <div className="flex gap-2">
+              <Button variant="secondary" onClick={() => setPreviewVideo(null)}>
+                关闭
+              </Button>
+              <Button onClick={() => alert(`下载文件: ${previewVideo?.fileName}`)}>
+                <Download size={16} />
+                下载
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Modal>
     </div>
   )
 }

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

@@ -16,8 +16,11 @@ import {
   User,
   Clock,
   Eye,
-  Shield
+  Shield,
+  Download,
+  MessageSquareWarning
 } from 'lucide-react'
+import { FilePreview, FileInfoCard, FilePreviewModal, type FileInfo } from '@/components/ui/FilePreview'
 
 // 模拟脚本任务数据
 const mockScriptTask = {
@@ -28,6 +31,19 @@ const mockScriptTask = {
   submittedAt: '2026-02-06 14:30',
   aiScore: 88,
   status: 'agent_reviewing',
+  // 文件信息
+  file: {
+    id: 'file-001',
+    fileName: '夏日护肤推广_脚本v2.docx',
+    fileSize: '245 KB',
+    fileType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    fileUrl: '/demo/scripts/script-001.docx', // 实际开发时替换为真实URL
+    uploadedAt: '2026-02-06 14:30',
+  } as FileInfo,
+  // 申诉信息
+  isAppeal: false,
+  appealReason: '',
+  // 脚本内容（AI解析后的结构化内容，用于展示）
   scriptContent: {
     opening: '大家好！今天给大家分享一款超级好用的夏日护肤神器～',
     productIntro: '这款XX品牌的防晒霜，SPF50+，PA++++，真的是夏天出门必备！质地轻薄不油腻，涂上去清清爽爽的。',
@@ -80,7 +96,8 @@ export default function AgencyScriptReviewPage() {
   const [showForcePassModal, setShowForcePassModal] = useState(false)
   const [rejectReason, setRejectReason] = useState('')
   const [forcePassReason, setForcePassReason] = useState('')
-  const [viewMode, setViewMode] = useState<'simple' | 'preview'>('preview')
+  const [viewMode, setViewMode] = useState<'file' | 'parsed'>('file') // 'file' 显示原文件, 'parsed' 显示解析内容
+  const [showFilePreview, setShowFilePreview] = useState(false)
 
   const task = mockScriptTask
 
@@ -118,7 +135,15 @@ export default function AgencyScriptReviewPage() {
           <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} />
@@ -130,32 +155,63 @@ export default function AgencyScriptReviewPage() {
             </span>
           </div>
         </div>
-        <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-2">
+          <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>
           ) : (
@@ -163,7 +219,8 @@ export default function AgencyScriptReviewPage() {
               <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">
@@ -353,6 +410,13 @@ export default function AgencyScriptReviewPage() {
           </div>
         </div>
       </Modal>
+
+      {/* 文件预览弹窗 */}
+      <FilePreviewModal
+        file={task.file}
+        isOpen={showFilePreview}
+        onClose={() => setShowFilePreview(false)}
+      />
     </div>
   )
 }

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

@@ -17,8 +17,12 @@ import {
   User,
   Clock,
   CheckCircle,
-  XCircle
+  XCircle,
+  Download,
+  ExternalLink,
+  MessageSquareWarning
 } from 'lucide-react'
+import { FileInfoCard, FilePreviewModal, type FileInfo } from '@/components/ui/FilePreview'
 
 // 模拟视频任务数据
 const mockVideoTask = {
@@ -30,6 +34,20 @@ const mockVideoTask = {
   duration: 135,
   aiScore: 85,
   status: 'agent_reviewing',
+  // 文件信息
+  file: {
+    id: 'file-video-001',
+    fileName: '夏日护肤_成片v2.mp4',
+    fileSize: '128 MB',
+    fileType: 'video/mp4',
+    fileUrl: '/demo/videos/video-001.mp4', // 实际开发时替换为真实URL
+    uploadedAt: '2026-02-06 15:00',
+    duration: '02:15',
+    thumbnail: '/demo/videos/video-001-thumb.jpg',
+  } as FileInfo,
+  // 申诉信息
+  isAppeal: false,
+  appealReason: '',
   hardViolations: [
     {
       id: 'v1',
@@ -105,6 +123,8 @@ export default function AgencyVideoReviewPage() {
   const [forcePassReason, setForcePassReason] = useState('')
   const [saveAsException, setSaveAsException] = useState(false)
   const [checkedViolations, setCheckedViolations] = useState<Record<string, boolean>>({})
+  const [showFilePreview, setShowFilePreview] = useState(false)
+  const [videoError, setVideoError] = useState(false)
 
   const task = mockVideoTask
 
@@ -149,7 +169,15 @@ export default function AgencyVideoReviewPage() {
           <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 +191,61 @@ export default function AgencyVideoReviewPage() {
         </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">
@@ -416,6 +483,13 @@ export default function AgencyVideoReviewPage() {
           </div>
         </div>
       </Modal>
+
+      {/* 文件预览弹窗 */}
+      <FilePreviewModal
+        file={task.file}
+        isOpen={showFilePreview}
+        onClose={() => setShowFilePreview(false)}
+      />
     </div>
   )
 }