feat: 完成代理商/品牌方前端及文档更新

代理商端前端：
- 新增达人管理页面（含任务申诉次数管理）
- 新增消息中心（含申诉次数申请审批）
- 新增 Brief 管理（列表、详情）
- 新增审核中心（脚本审核、视频审核）
- 新增数据报表页面

品牌方端前端：
- 优化首页仪表盘布局
- 新增项目管理（列表、详情、创建）
- 新增代理商管理页面
- 新增审核中心（脚本终审、视频终审）
- 新增系统设置页面

文档更新：
- 申诉次数改为按任务分配（每任务初始1次）
- 更新 PRD、FeatureSummary、User_Role_Interfaces 等文档
- 更新 UI 设计规范和开发计划

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

frontend/app/brand/review/page.tsx

@@ -0,0 +1,273 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
+import { Button } from '@/components/ui/Button'
+import { SuccessTag, PendingTag, WarningTag, ErrorTag } from '@/components/ui/Tag'
+import {
+  FileText,
+  Video,
+  Search,
+  Filter,
+  Clock,
+  User,
+  Building,
+  ChevronRight,
+  AlertTriangle
+} from 'lucide-react'
+
+// 模拟脚本待审列表
+const mockScriptTasks = [
+  {
+    id: 'script-001',
+    title: '夏日护肤推广脚本',
+    creatorName: '小美护肤',
+    agencyName: '星耀传媒',
+    projectName: 'XX品牌618推广',
+    aiScore: 88,
+    submittedAt: '2026-02-06 14:30',
+    hasHighRisk: false,
+    agencyApproved: true,
+  },
+  {
+    id: 'script-002',
+    title: '新品口红试色脚本',
+    creatorName: '美妆Lisa',
+    agencyName: '创意无限',
+    projectName: 'XX品牌618推广',
+    aiScore: 72,
+    submittedAt: '2026-02-06 12:15',
+    hasHighRisk: true,
+    agencyApproved: true,
+  },
+]
+
+// 模拟视频待审列表
+const mockVideoTasks = [
+  {
+    id: 'video-001',
+    title: '夏日护肤推广',
+    creatorName: '小美护肤',
+    agencyName: '星耀传媒',
+    projectName: 'XX品牌618推广',
+    aiScore: 85,
+    duration: '02:15',
+    submittedAt: '2026-02-06 15:00',
+    hasHighRisk: false,
+    agencyApproved: true,
+  },
+  {
+    id: 'video-002',
+    title: '新品口红试色',
+    creatorName: '美妆Lisa',
+    agencyName: '创意无限',
+    projectName: 'XX品牌618推广',
+    aiScore: 68,
+    duration: '03:42',
+    submittedAt: '2026-02-06 13:45',
+    hasHighRisk: true,
+    agencyApproved: true,
+  },
+  {
+    id: 'video-003',
+    title: '健身器材开箱',
+    creatorName: '健身教练王',
+    agencyName: '美妆达人MCN',
+    projectName: 'XX运动品牌',
+    aiScore: 92,
+    duration: '04:20',
+    submittedAt: '2026-02-06 11:30',
+    hasHighRisk: false,
+    agencyApproved: true,
+  },
+]
+
+function ScoreTag({ score }: { score: number }) {
+  if (score >= 85) return <SuccessTag>{score}分</SuccessTag>
+  if (score >= 70) return <WarningTag>{score}分</WarningTag>
+  return <ErrorTag>{score}分</ErrorTag>
+}
+
+function TaskCard({ task, type }: { task: typeof mockScriptTasks[0] | typeof mockVideoTasks[0]; type: 'script' | 'video' }) {
+  const href = type === 'script' ? `/brand/review/script/${task.id}` : `/brand/review/video/${task.id}`
+
+  return (
+    <Link href={href}>
+      <div className="p-4 rounded-lg border border-border-subtle hover:border-accent-indigo/50 hover:bg-accent-indigo/5 transition-all cursor-pointer">
+        <div className="flex items-start justify-between mb-3">
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <h4 className="font-medium text-text-primary truncate">{task.title}</h4>
+              {task.hasHighRisk && (
+                <span className="flex items-center gap-1 px-2 py-0.5 text-xs bg-accent-coral/20 text-accent-coral rounded">
+                  <AlertTriangle size={12} />
+                  高风险
+                </span>
+              )}
+            </div>
+            <div className="flex items-center gap-4 mt-1 text-sm text-text-secondary">
+              <span className="flex items-center gap-1">
+                <User size={12} />
+                {task.creatorName}
+              </span>
+              <span className="flex items-center gap-1">
+                <Building size={12} />
+                {task.agencyName}
+              </span>
+            </div>
+          </div>
+          <ScoreTag score={task.aiScore} />
+        </div>
+        <div className="flex items-center justify-between text-xs text-text-tertiary">
+          <span>{task.projectName}</span>
+          <span className="flex items-center gap-1">
+            <Clock size={12} />
+            {task.submittedAt}
+          </span>
+        </div>
+        {'duration' in task && (
+          <div className="mt-2 text-xs text-text-tertiary">
+            时长: {task.duration}
+          </div>
+        )}
+      </div>
+    </Link>
+  )
+}
+
+export default function BrandReviewListPage() {
+  const [searchQuery, setSearchQuery] = useState('')
+  const [activeTab, setActiveTab] = useState<'all' | 'script' | 'video'>('all')
+
+  const filteredScripts = mockScriptTasks.filter(task =>
+    task.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    task.creatorName.toLowerCase().includes(searchQuery.toLowerCase())
+  )
+
+  const filteredVideos = mockVideoTasks.filter(task =>
+    task.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    task.creatorName.toLowerCase().includes(searchQuery.toLowerCase())
+  )
+
+  return (
+    <div className="space-y-6">
+      {/* 页面标题 */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-text-primary">终审台</h1>
+          <p className="text-sm text-text-secondary mt-1">审核代理商提交的脚本和视频</p>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <span className="text-text-secondary">待审核：</span>
+          <span className="px-2 py-1 bg-accent-indigo/20 text-accent-indigo rounded font-medium">
+            {mockScriptTasks.length} 脚本
+          </span>
+          <span className="px-2 py-1 bg-purple-500/20 text-purple-400 rounded font-medium">
+            {mockVideoTasks.length} 视频
+          </span>
+        </div>
+      </div>
+
+      {/* 搜索和筛选 */}
+      <div className="flex items-center gap-4">
+        <div className="relative flex-1 max-w-md">
+          <Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary" />
+          <input
+            type="text"
+            placeholder="搜索任务名称或达人..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
+          />
+        </div>
+        <div className="flex items-center gap-1 p-1 bg-bg-elevated rounded-lg">
+          <button
+            type="button"
+            onClick={() => setActiveTab('all')}
+            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
+              activeTab === 'all' ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary'
+            }`}
+          >
+            全部
+          </button>
+          <button
+            type="button"
+            onClick={() => setActiveTab('script')}
+            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
+              activeTab === 'script' ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary'
+            }`}
+          >
+            脚本
+          </button>
+          <button
+            type="button"
+            onClick={() => setActiveTab('video')}
+            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
+              activeTab === 'video' ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary'
+            }`}
+          >
+            视频
+          </button>
+        </div>
+      </div>
+
+      {/* 任务列表 */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* 脚本待审列表 */}
+        {(activeTab === 'all' || activeTab === 'script') && (
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <FileText size={18} className="text-accent-indigo" />
+                脚本终审
+                <span className="ml-auto text-sm font-normal text-text-secondary">
+                  {filteredScripts.length} 条待审
+                </span>
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {filteredScripts.length > 0 ? (
+                filteredScripts.map((task) => (
+                  <TaskCard key={task.id} task={task} type="script" />
+                ))
+              ) : (
+                <div className="text-center py-8 text-text-tertiary">
+                  <FileText size={32} className="mx-auto mb-2 opacity-50" />
+                  <p>暂无待审脚本</p>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        )}
+
+        {/* 视频待审列表 */}
+        {(activeTab === 'all' || activeTab === 'video') && (
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Video size={18} className="text-purple-400" />
+                视频终审
+                <span className="ml-auto text-sm font-normal text-text-secondary">
+                  {filteredVideos.length} 条待审
+                </span>
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {filteredVideos.length > 0 ? (
+                filteredVideos.map((task) => (
+                  <TaskCard key={task.id} task={task} type="video" />
+                ))
+              ) : (
+                <div className="text-center py-8 text-text-tertiary">
+                  <Video size={32} className="mx-auto mb-2 opacity-50" />
+                  <p>暂无待审视频</p>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,363 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter, useParams } from 'next/navigation'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
+import { Button } from '@/components/ui/Button'
+import { Modal, ConfirmModal } from '@/components/ui/Modal'
+import { SuccessTag, WarningTag, ErrorTag, PendingTag } from '@/components/ui/Tag'
+import { ReviewSteps, getBrandReviewSteps } from '@/components/ui/ReviewSteps'
+import {
+  ArrowLeft,
+  FileText,
+  CheckCircle,
+  XCircle,
+  AlertTriangle,
+  User,
+  Building,
+  Clock,
+  Eye,
+  Download,
+  Shield,
+  MessageSquare
+} from 'lucide-react'
+
+// 模拟脚本任务数据
+const mockScriptTask = {
+  id: 'script-001',
+  title: '夏日护肤推广脚本',
+  creatorName: '小美护肤',
+  agencyName: '星耀传媒',
+  projectName: 'XX品牌618推广',
+  submittedAt: '2026-02-06 14:30',
+  aiScore: 88,
+  status: 'brand_reviewing',
+  scriptContent: {
+    opening: '大家好！今天给大家分享一款超级好用的夏日护肤神器～',
+    productIntro: '这款XX品牌的防晒霜，SPF50+，PA++++，真的是夏天出门必备！质地轻薄不油腻，涂上去清清爽爽的。',
+    demo: '我先在手背上试一下，大家看，延展性特别好，轻轻一抹就推开了，完全不会搓泥。',
+    closing: '夏天防晒真的很重要，姐妹们赶紧冲！链接在小黄车1号链接～',
+  },
+  agencyReview: {
+    reviewer: '张经理',
+    result: 'approved',
+    comment: '脚本整体符合要求，卖点覆盖完整，建议通过。',
+    reviewedAt: '2026-02-06 15:00',
+  },
+  aiAnalysis: {
+    violations: [
+      { id: 'v1', type: '违禁词', content: '神器', suggestion: '建议替换为"好物"或"必备品"', severity: 'medium' },
+    ],
+    complianceChecks: [
+      { item: '品牌名称正确', passed: true },
+      { item: 'SPF标注准确', passed: true },
+      { item: '无绝对化用语', passed: false, note: '"超级好用"建议修改' },
+      { item: '引导语规范', passed: true },
+    ],
+    sellingPoints: [
+      { point: 'SPF50+ PA++++', covered: true },
+      { point: '轻薄质地', covered: true },
+      { point: '不油腻', covered: true },
+      { point: '延展性好', covered: true },
+    ],
+  },
+}
+
+function ReviewProgressBar({ taskStatus }: { taskStatus: string }) {
+  const steps = getBrandReviewSteps(taskStatus)
+  const currentStep = steps.find(s => s.status === 'current')
+
+  return (
+    <Card className="mb-6">
+      <CardContent className="py-4">
+        <div className="flex items-center justify-between mb-3">
+          <span className="text-sm font-medium text-text-primary">审核流程</span>
+          <span className="text-sm text-accent-indigo font-medium">
+            当前：{currentStep?.label || '品牌方终审'}
+          </span>
+        </div>
+        <ReviewSteps steps={steps} />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default function BrandScriptReviewPage() {
+  const router = useRouter()
+  const params = useParams()
+  const [showApproveModal, setShowApproveModal] = useState(false)
+  const [showRejectModal, setShowRejectModal] = useState(false)
+  const [rejectReason, setRejectReason] = useState('')
+  const [viewMode, setViewMode] = useState<'simple' | 'preview'>('preview')
+
+  const task = mockScriptTask
+
+  const handleApprove = () => {
+    setShowApproveModal(false)
+    alert('审核通过！')
+    router.push('/brand/review')
+  }
+
+  const handleReject = () => {
+    if (!rejectReason.trim()) {
+      alert('请填写驳回原因')
+      return
+    }
+    setShowRejectModal(false)
+    alert('已驳回')
+    router.push('/brand/review')
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* 顶部导航 */}
+      <div className="flex items-center gap-4">
+        <button type="button" onClick={() => router.back()} className="p-2 hover:bg-bg-elevated rounded-full">
+          <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-4 mt-1 text-sm text-text-secondary">
+            <span className="flex items-center gap-1">
+              <User size={14} />
+              {task.creatorName}
+            </span>
+            <span className="flex items-center gap-1">
+              <Building size={14} />
+              {task.agencyName}
+            </span>
+            <span className="flex items-center gap-1">
+              <Clock size={14} />
+              {task.submittedAt}
+            </span>
+          </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>
+      </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' ? (
+            <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>
+              </CardContent>
+            </Card>
+          ) : (
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <FileText size={18} className="text-accent-indigo" />
+                  脚本内容
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="p-4 bg-bg-elevated rounded-lg">
+                  <div className="text-xs text-accent-indigo font-medium mb-2">开场白</div>
+                  <p className="text-text-primary">{task.scriptContent.opening}</p>
+                </div>
+                <div className="p-4 bg-bg-elevated rounded-lg">
+                  <div className="text-xs text-purple-400 font-medium mb-2">产品介绍</div>
+                  <p className="text-text-primary">{task.scriptContent.productIntro}</p>
+                </div>
+                <div className="p-4 bg-bg-elevated rounded-lg">
+                  <div className="text-xs text-orange-400 font-medium mb-2">使用演示</div>
+                  <p className="text-text-primary">{task.scriptContent.demo}</p>
+                </div>
+                <div className="p-4 bg-bg-elevated rounded-lg">
+                  <div className="text-xs text-accent-green font-medium mb-2">结尾引导</div>
+                  <p className="text-text-primary">{task.scriptContent.closing}</p>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* 代理商初审意见 */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <MessageSquare size={18} className="text-blue-500" />
+                代理商初审意见
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-start gap-4">
+                <div className={`p-2 rounded-full ${task.agencyReview.result === 'approved' ? 'bg-accent-green/20' : 'bg-accent-coral/20'}`}>
+                  {task.agencyReview.result === 'approved' ? (
+                    <CheckCircle size={20} className="text-accent-green" />
+                  ) : (
+                    <XCircle size={20} className="text-accent-coral" />
+                  )}
+                </div>
+                <div className="flex-1">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="font-medium text-text-primary">{task.agencyReview.reviewer}</span>
+                    <SuccessTag>建议通过</SuccessTag>
+                  </div>
+                  <p className="text-text-secondary text-sm">{task.agencyReview.comment}</p>
+                  <p className="text-xs text-text-tertiary mt-2">{task.agencyReview.reviewedAt}</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* 右侧：AI 分析面板 */}
+        <div className="space-y-4">
+          {/* AI 评分 */}
+          <Card>
+            <CardContent className="py-4">
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-text-secondary">AI 综合评分</span>
+                <span className={`text-3xl font-bold ${task.aiScore >= 85 ? 'text-accent-green' : task.aiScore >= 70 ? 'text-yellow-400' : 'text-accent-coral'}`}>
+                  {task.aiScore}
+                </span>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* 违规检测 */}
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="flex items-center gap-2 text-base">
+                <AlertTriangle size={16} className="text-orange-500" />
+                违规检测 ({task.aiAnalysis.violations.length})
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              {task.aiAnalysis.violations.map((v) => (
+                <div key={v.id} className="p-3 bg-orange-500/10 rounded-lg border border-orange-500/30">
+                  <div className="flex items-center gap-2 mb-1">
+                    <WarningTag>{v.type}</WarningTag>
+                  </div>
+                  <p className="text-sm text-text-primary">「{v.content}」</p>
+                  <p className="text-xs text-accent-indigo mt-1">{v.suggestion}</p>
+                </div>
+              ))}
+              {task.aiAnalysis.violations.length === 0 && (
+                <p className="text-sm text-text-tertiary text-center py-4">未发现违规内容</p>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* 合规检查 */}
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="flex items-center gap-2 text-base">
+                <Shield size={16} className="text-accent-indigo" />
+                合规检查
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              {task.aiAnalysis.complianceChecks.map((check, idx) => (
+                <div key={idx} className="flex items-start gap-2 p-2 rounded-lg bg-bg-elevated">
+                  {check.passed ? (
+                    <CheckCircle size={16} className="text-accent-green flex-shrink-0 mt-0.5" />
+                  ) : (
+                    <XCircle size={16} className="text-accent-coral flex-shrink-0 mt-0.5" />
+                  )}
+                  <div className="flex-1">
+                    <span className="text-sm text-text-primary">{check.item}</span>
+                    {check.note && (
+                      <p className="text-xs text-text-tertiary mt-0.5">{check.note}</p>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+
+          {/* 卖点覆盖 */}
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="flex items-center gap-2 text-base">
+                <CheckCircle size={16} className="text-accent-green" />
+                卖点覆盖
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              {task.aiAnalysis.sellingPoints.map((sp, idx) => (
+                <div key={idx} className="flex items-center gap-2 p-2 rounded-lg bg-bg-elevated">
+                  {sp.covered ? (
+                    <CheckCircle size={16} className="text-accent-green" />
+                  ) : (
+                    <XCircle size={16} className="text-accent-coral" />
+                  )}
+                  <span className="text-sm text-text-primary">{sp.point}</span>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      {/* 底部决策栏 */}
+      <Card className="sticky bottom-4 shadow-lg">
+        <CardContent className="py-4">
+          <div className="flex items-center justify-between">
+            <div className="text-sm text-text-secondary">
+              项目：{task.projectName}
+            </div>
+            <div className="flex gap-3">
+              <Button variant="danger" onClick={() => setShowRejectModal(true)}>
+                驳回
+              </Button>
+              <Button variant="success" onClick={() => setShowApproveModal(true)}>
+                通过
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 通过确认弹窗 */}
+      <ConfirmModal
+        isOpen={showApproveModal}
+        onClose={() => setShowApproveModal(false)}
+        onConfirm={handleApprove}
+        title="确认通过"
+        message="确定要通过此脚本的审核吗？通过后达人将收到通知，可以开始拍摄视频。"
+        confirmText="确认通过"
+      />
+
+      {/* 驳回弹窗 */}
+      <Modal isOpen={showRejectModal} onClose={() => setShowRejectModal(false)} title="驳回审核">
+        <div className="space-y-4">
+          <p className="text-text-secondary text-sm">请填写驳回原因，达人将收到通知并根据您的反馈进行修改。</p>
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-1">驳回原因</label>
+            <textarea
+              className="w-full h-24 p-3 border border-border-subtle rounded-lg resize-none bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
+              placeholder="请详细说明驳回原因..."
+              value={rejectReason}
+              onChange={(e) => setRejectReason(e.target.value)}
+            />
+          </div>
+          <div className="flex gap-3 justify-end">
+            <Button variant="ghost" onClick={() => setShowRejectModal(false)}>取消</Button>
+            <Button variant="danger" onClick={handleReject}>确认驳回</Button>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  )
+}

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

@@ -0,0 +1,413 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter, useParams } from 'next/navigation'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
+import { Button } from '@/components/ui/Button'
+import { Modal, ConfirmModal } from '@/components/ui/Modal'
+import { SuccessTag, WarningTag, ErrorTag } from '@/components/ui/Tag'
+import { ReviewSteps, getBrandReviewSteps } from '@/components/ui/ReviewSteps'
+import {
+  ArrowLeft,
+  Play,
+  Pause,
+  AlertTriangle,
+  Shield,
+  Radio,
+  User,
+  Building,
+  Clock,
+  CheckCircle,
+  XCircle,
+  MessageSquare
+} from 'lucide-react'
+
+// 模拟视频任务数据
+const mockVideoTask = {
+  id: 'video-001',
+  title: '夏日护肤推广',
+  creatorName: '小美护肤',
+  agencyName: '星耀传媒',
+  projectName: 'XX品牌618推广',
+  submittedAt: '2026-02-06 15:00',
+  duration: 135, // 秒
+  aiScore: 85,
+  status: 'brand_reviewing',
+  agencyReview: {
+    reviewer: '张经理',
+    result: 'approved',
+    comment: '视频质量良好，发现的问题已确认为误报，建议通过。',
+    reviewedAt: '2026-02-06 16:00',
+  },
+  hardViolations: [
+    {
+      id: 'v1',
+      type: '违禁词',
+      content: '效果最好',
+      timestamp: 15.5,
+      source: 'speech',
+      riskLevel: 'high',
+      aiConfidence: 0.95,
+      suggestion: '建议替换为"效果显著"',
+    },
+    {
+      id: 'v2',
+      type: '竞品露出',
+      content: '疑似竞品Logo',
+      timestamp: 42.0,
+      source: 'visual',
+      riskLevel: 'medium',
+      aiConfidence: 0.72,
+      suggestion: '经代理商确认为背景杂物，非竞品',
+    },
+  ],
+  sentimentWarnings: [
+    { id: 's1', type: '表情预警', timestamp: 68.0, content: '表情过于夸张，可能引发不适', riskLevel: 'low' },
+  ],
+  sellingPointsCovered: [
+    { point: 'SPF50+ PA++++', covered: true, timestamp: 25.0 },
+    { point: '轻薄质地', covered: true, timestamp: 38.0 },
+    { point: '不油腻', covered: true, timestamp: 52.0 },
+    { point: '延展性好', covered: true, timestamp: 45.0 },
+  ],
+}
+
+function formatTimestamp(seconds: number): string {
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+
+function ReviewProgressBar({ taskStatus }: { taskStatus: string }) {
+  const steps = getBrandReviewSteps(taskStatus)
+  const currentStep = steps.find(s => s.status === 'current')
+
+  return (
+    <Card className="mb-6">
+      <CardContent className="py-4">
+        <div className="flex items-center justify-between mb-3">
+          <span className="text-sm font-medium text-text-primary">审核流程</span>
+          <span className="text-sm text-accent-indigo font-medium">
+            当前：{currentStep?.label || '品牌方终审'}
+          </span>
+        </div>
+        <ReviewSteps steps={steps} />
+      </CardContent>
+    </Card>
+  )
+}
+
+function RiskLevelTag({ level }: { level: string }) {
+  if (level === 'high') return <ErrorTag>高风险</ErrorTag>
+  if (level === 'medium') return <WarningTag>中风险</WarningTag>
+  return <SuccessTag>低风险</SuccessTag>
+}
+
+export default function BrandVideoReviewPage() {
+  const router = useRouter()
+  const params = useParams()
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [showApproveModal, setShowApproveModal] = useState(false)
+  const [showRejectModal, setShowRejectModal] = useState(false)
+  const [rejectReason, setRejectReason] = useState('')
+  const [checkedViolations, setCheckedViolations] = useState<Record<string, boolean>>({})
+
+  const task = mockVideoTask
+
+  const handleApprove = () => {
+    setShowApproveModal(false)
+    alert('审核通过！')
+    router.push('/brand/review')
+  }
+
+  const handleReject = () => {
+    if (!rejectReason.trim()) {
+      alert('请填写驳回原因')
+      return
+    }
+    setShowRejectModal(false)
+    alert('已驳回')
+    router.push('/brand/review')
+  }
+
+  // 计算问题时间点用于进度条展示
+  const timelineMarkers = [
+    ...task.hardViolations.map(v => ({ time: v.timestamp, type: 'hard' as const })),
+    ...task.sentimentWarnings.map(w => ({ time: w.timestamp, type: 'soft' as const })),
+    ...task.sellingPointsCovered.filter(s => s.covered).map(s => ({ time: s.timestamp, type: 'selling' as const })),
+  ].sort((a, b) => a.time - b.time)
+
+  return (
+    <div className="space-y-4">
+      {/* 顶部导航 */}
+      <div className="flex items-center gap-4">
+        <button type="button" onClick={() => router.back()} className="p-2 hover:bg-bg-elevated rounded-full">
+          <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-4 mt-1 text-sm text-text-secondary">
+            <span className="flex items-center gap-1">
+              <User size={14} />
+              {task.creatorName}
+            </span>
+            <span className="flex items-center gap-1">
+              <Building size={14} />
+              {task.agencyName}
+            </span>
+            <span className="flex items-center gap-1">
+              <Clock size={14} />
+              {task.submittedAt}
+            </span>
+          </div>
+        </div>
+      </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">
+          <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>
+              {/* 智能进度条 */}
+              <div className="p-4 border-t border-border-subtle">
+                <div className="text-sm font-medium text-text-primary mb-3">智能进度条（点击跳转）</div>
+                <div className="relative h-3 bg-bg-elevated rounded-full">
+                  {/* 时间标记点 */}
+                  {timelineMarkers.map((marker, idx) => (
+                    <button
+                      key={idx}
+                      type="button"
+                      className={`absolute top-1/2 -translate-y-1/2 w-4 h-4 rounded-full border-2 border-bg-card shadow-md cursor-pointer transition-transform hover:scale-125 ${
+                        marker.type === 'hard' ? 'bg-accent-coral' : marker.type === 'soft' ? 'bg-orange-500' : 'bg-accent-green'
+                      }`}
+                      style={{ left: `${(marker.time / task.duration) * 100}%` }}
+                      title={`${formatTimestamp(marker.time)} - ${marker.type === 'hard' ? '硬性问题' : marker.type === 'soft' ? '舆情提示' : '卖点覆盖'}`}
+                    />
+                  ))}
+                </div>
+                <div className="flex justify-between text-xs text-text-tertiary mt-1">
+                  <span>0:00</span>
+                  <span>{formatTimestamp(task.duration)}</span>
+                </div>
+                <div className="flex gap-4 mt-3 text-xs text-text-secondary">
+                  <span className="flex items-center gap-1">
+                    <span className="w-3 h-3 bg-accent-coral rounded-full" />
+                    硬性问题
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <span className="w-3 h-3 bg-orange-500 rounded-full" />
+                    舆情提示
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <span className="w-3 h-3 bg-accent-green rounded-full" />
+                    卖点覆盖
+                  </span>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* 代理商初审意见 */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <MessageSquare size={18} className="text-blue-500" />
+                代理商初审意见
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-start gap-4">
+                <div className={`p-2 rounded-full ${task.agencyReview.result === 'approved' ? 'bg-accent-green/20' : 'bg-accent-coral/20'}`}>
+                  {task.agencyReview.result === 'approved' ? (
+                    <CheckCircle size={20} className="text-accent-green" />
+                  ) : (
+                    <XCircle size={20} className="text-accent-coral" />
+                  )}
+                </div>
+                <div className="flex-1">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="font-medium text-text-primary">{task.agencyReview.reviewer}</span>
+                    <SuccessTag>建议通过</SuccessTag>
+                  </div>
+                  <p className="text-text-secondary text-sm">{task.agencyReview.comment}</p>
+                  <p className="text-xs text-text-tertiary mt-2">{task.agencyReview.reviewedAt}</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* AI 分析总结 */}
+          <Card>
+            <CardContent className="py-4">
+              <div className="flex items-center justify-between mb-2">
+                <span className="font-medium text-text-primary">AI 分析总结</span>
+                <span className={`text-xl font-bold ${task.aiScore >= 80 ? 'text-accent-green' : 'text-yellow-400'}`}>
+                  {task.aiScore}分
+                </span>
+              </div>
+              <p className="text-text-secondary text-sm">
+                视频整体合规，发现{task.hardViolations.length}处硬性问题和{task.sentimentWarnings.length}处舆情提示，代理商已确认处理。
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* 右侧：AI 检查单 (2/5) */}
+        <div className="lg:col-span-2 space-y-4">
+          {/* 硬性合规 */}
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="flex items-center gap-2 text-base">
+                <Shield size={16} className="text-red-500" />
+                硬性合规 ({task.hardViolations.length})
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {task.hardViolations.map((v) => (
+                <div key={v.id} className={`p-3 rounded-lg border ${checkedViolations[v.id] ? 'bg-bg-elevated border-border-subtle' : 'bg-accent-coral/10 border-accent-coral/30'}`}>
+                  <div className="flex items-start gap-2">
+                    <input
+                      type="checkbox"
+                      checked={checkedViolations[v.id] || false}
+                      onChange={() => setCheckedViolations((prev) => ({ ...prev, [v.id]: !prev[v.id] }))}
+                      className="mt-1 accent-accent-indigo"
+                    />
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2 mb-1">
+                        <ErrorTag>{v.type}</ErrorTag>
+                        <span className="text-xs text-text-tertiary">{formatTimestamp(v.timestamp)}</span>
+                      </div>
+                      <p className="text-sm font-medium text-text-primary">「{v.content}」</p>
+                      <p className="text-xs text-accent-indigo mt-1">{v.suggestion}</p>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+
+          {/* 舆情雷达 */}
+          {task.sentimentWarnings.length > 0 && (
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="flex items-center gap-2 text-base">
+                  <Radio size={16} className="text-orange-500" />
+                  舆情雷达（仅提示）
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-2">
+                {task.sentimentWarnings.map((w) => (
+                  <div key={w.id} className="p-3 bg-orange-500/10 rounded-lg border border-orange-500/30">
+                    <div className="flex items-center gap-2 mb-1">
+                      <WarningTag>{w.type}</WarningTag>
+                      <span className="text-xs text-text-tertiary">{formatTimestamp(w.timestamp)}</span>
+                    </div>
+                    <p className="text-sm text-orange-400">{w.content}</p>
+                    <p className="text-xs text-text-tertiary mt-1">⚠️ 软性风险仅作提示，不强制拦截</p>
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+          )}
+
+          {/* 卖点覆盖 */}
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="flex items-center gap-2 text-base">
+                <CheckCircle size={16} className="text-accent-green" />
+                卖点覆盖
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              {task.sellingPointsCovered.map((sp, idx) => (
+                <div key={idx} className="flex items-center justify-between p-2 rounded-lg bg-bg-elevated">
+                  <div className="flex items-center gap-2">
+                    {sp.covered ? (
+                      <CheckCircle size={16} className="text-accent-green" />
+                    ) : (
+                      <XCircle size={16} className="text-accent-coral" />
+                    )}
+                    <span className="text-sm text-text-primary">{sp.point}</span>
+                  </div>
+                  {sp.covered && (
+                    <span className="text-xs text-text-tertiary">{formatTimestamp(sp.timestamp)}</span>
+                  )}
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      {/* 底部决策栏 */}
+      <Card className="sticky bottom-4 shadow-lg">
+        <CardContent className="py-4">
+          <div className="flex items-center justify-between">
+            <div className="text-sm text-text-secondary">
+              已检查 {Object.values(checkedViolations).filter(Boolean).length}/{task.hardViolations.length} 个问题
+            </div>
+            <div className="flex gap-3">
+              <Button variant="danger" onClick={() => setShowRejectModal(true)}>
+                驳回
+              </Button>
+              <Button variant="success" onClick={() => setShowApproveModal(true)}>
+                通过
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 通过确认弹窗 */}
+      <ConfirmModal
+        isOpen={showApproveModal}
+        onClose={() => setShowApproveModal(false)}
+        onConfirm={handleApprove}
+        title="确认通过"
+        message="确定要通过此视频的审核吗？通过后达人将收到通知。"
+        confirmText="确认通过"
+      />
+
+      {/* 驳回弹窗 */}
+      <Modal isOpen={showRejectModal} onClose={() => setShowRejectModal(false)} title="驳回审核">
+        <div className="space-y-4">
+          <p className="text-text-secondary text-sm">请填写驳回原因，已勾选的问题将自动打包发送给达人。</p>
+          <div className="p-3 bg-bg-elevated rounded-lg">
+            <p className="text-sm font-medium text-text-primary mb-2">已选问题 ({Object.values(checkedViolations).filter(Boolean).length})</p>
+            {task.hardViolations.filter(v => checkedViolations[v.id]).map(v => (
+              <div key={v.id} className="text-sm text-text-secondary">• {v.type}: {v.content}</div>
+            ))}
+            {Object.values(checkedViolations).filter(Boolean).length === 0 && (
+              <div className="text-sm text-text-tertiary">未选择任何问题</div>
+            )}
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-1">补充说明</label>
+            <textarea
+              className="w-full h-24 p-3 border border-border-subtle rounded-lg resize-none bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
+              placeholder="请详细说明驳回原因..."
+              value={rejectReason}
+              onChange={(e) => setRejectReason(e.target.value)}
+            />
+          </div>
+          <div className="flex gap-3 justify-end">
+            <Button variant="ghost" onClick={() => setShowRejectModal(false)}>取消</Button>
+            <Button variant="danger" onClick={handleReject}>确认驳回</Button>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  )
+}