feat: 前端全面对接后端 API（Phase 1 完成）

- 新增基础设施：useOSSUpload Hook、SSEContext Provider、taskStageMapper 工具
- 达人端4页面：任务列表/详情/脚本上传/视频上传对接真实 API
- 代理商端3页面：工作台/审核队列/审核详情对接真实 API
- 品牌方端4页面：项目列表/创建项目/项目详情/Brief配置对接真实 API
- 保留 USE_MOCK 开关，mock 模式下使用类型安全的 mock 数据
- 所有页面添加 loading 骨架屏、SSE 实时更新、错误处理

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

frontend/app/agency/page.tsx

@@ -1,137 +1,86 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect, useCallback } 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 {
   AlertTriangle,
   Clock,
   CheckCircle,
-  XCircle,
   ChevronRight,
   FileVideo,
   MessageSquare,
-  TrendingUp
+  TrendingUp,
+  Loader2
 } from 'lucide-react'
 import { getPlatformInfo } from '@/lib/platforms'
+import { api } from '@/lib/api'
+import { USE_MOCK } from '@/contexts/AuthContext'
+import { useSSE } from '@/contexts/SSEContext'
+import type { AgencyDashboard as AgencyDashboardType } from '@/types/dashboard'
+import type { TaskResponse } from '@/types/task'
+import type { ProjectResponse } from '@/types/project'
 
-// 模拟统计数据
+// ==================== Mock 数据 ====================
-const stats = {
+const mockStats: AgencyDashboardType = {
-  pendingReview: {
+  pending_review: { script: 8, video: 4 },
-    script: 8,
+  pending_appeal: 3,
-    video: 4,
+  today_passed: { script: 18, video: 10 },
-  },
+  in_progress: { script: 25, video: 20 },
-  pendingAppeal: 3,
+  total_creators: 15,
-  todayPassed: {
+  total_tasks: 80,
-    script: 18,
-    video: 10,
-  },
-  inProgress: {
-    script: 25,
-    video: 20,
-  },
 }
 
-// 模拟紧急待办
+const mockPendingTasks: TaskResponse[] = [
-const urgentTodos = [
   {
-    id: 'urgent-001',
+    id: 'task-001', name: '夏日护肤推广', sequence: 1,
-    type: 'violation',
+    stage: 'script_agency_review',
-    title: '达人A视频 - 竞品露出',
+    project: { id: 'proj-001', name: 'XX品牌618推广', brand_name: 'XX品牌' },
-    description: 'XX品牌618推广',
+    agency: { id: 'ag-001', name: '优创代理' },
-    time: '2小时前',
+    creator: { id: 'cr-001', name: '小美护肤' },
-    level: 'high',
+    script_ai_score: 85, appeal_count: 0, is_appeal: false,
+    created_at: '2026-02-04T14:30:00Z', updated_at: '2026-02-04T14:30:00Z',
   },
   {
-    id: 'urgent-002',
+    id: 'task-002', name: '新品口红试色', sequence: 2,
-    type: 'appeal',
+    stage: 'video_agency_review',
-    title: '达人B申诉 - 待仲裁',
+    project: { id: 'proj-001', name: 'XX品牌618推广', brand_name: 'XX品牌' },
-    description: '对违禁词检测结果有异议',
+    agency: { id: 'ag-001', name: '优创代理' },
-    time: '30分钟前',
+    creator: { id: 'cr-002', name: '美妆达人Lisa' },
-    level: 'medium',
+    video_ai_score: 72, appeal_count: 0, is_appeal: true,
+    created_at: '2026-02-04T13:45:00Z', updated_at: '2026-02-04T13:45:00Z',
   },
   {
-    id: 'urgent-003',
+    id: 'task-003', name: '健身器材开箱', sequence: 3,
-    type: 'ai_done',
+    stage: 'script_agency_review',
-    title: '达人C视频 - AI审核完成',
+    project: { id: 'proj-002', name: 'XX运动品牌', brand_name: 'XX运动' },
-    description: '新品口红试色',
+    agency: { id: 'ag-001', name: '优创代理' },
-    time: '10分钟前',
+    creator: { id: 'cr-003', name: '健身教练王' },
-    level: 'low',
+    script_ai_score: 68, appeal_count: 0, is_appeal: false,
+    created_at: '2026-02-04T14:50:00Z', updated_at: '2026-02-04T14:50:00Z',
   },
 ]
 
-// 模拟项目概览
+const mockProjects: ProjectResponse[] = [
-const projectOverview = [
   {
-    id: 'proj-001',
+    id: 'proj-001', name: 'XX品牌618推广', brand_id: 'br-001', brand_name: 'XX品牌',
-    name: 'XX品牌618推广',
+    status: 'active', deadline: '2026-06-18', agencies: [], task_count: 20,
-    platform: 'douyin',
+    created_at: '2026-01-01T00:00:00Z', updated_at: '2026-02-01T00:00:00Z',
-    total: 20,
-    submitted: 15,
-    passed: 10,
-    reviewingScript: 2,
-    reviewingVideo: 1,
-    needRevision: 2,
   },
   {
-    id: 'proj-002',
+    id: 'proj-002', name: '新品口红系列', brand_id: 'br-001', brand_name: 'XX品牌',
-    name: '新品口红系列',
+    status: 'active', deadline: '2026-03-15', agencies: [], task_count: 12,
-    platform: 'xiaohongshu',
+    created_at: '2026-01-15T00:00:00Z', updated_at: '2026-02-01T00:00:00Z',
-    total: 12,
-    submitted: 8,
-    passed: 6,
-    reviewingScript: 1,
-    reviewingVideo: 0,
-    needRevision: 1,
   },
   {
-    id: 'proj-003',
+    id: 'proj-003', name: '护肤品秋季活动', brand_id: 'br-002', brand_name: 'YY品牌',
-    name: '护肤品秋季活动',
+    status: 'active', deadline: '2026-09-01', agencies: [], task_count: 15,
-    platform: 'bilibili',
+    created_at: '2026-02-01T00:00:00Z', updated_at: '2026-02-05T00:00:00Z',
-    total: 15,
-    submitted: 12,
-    passed: 9,
-    reviewingScript: 1,
-    reviewingVideo: 1,
-    needRevision: 1,
   },
 ]
 
-// 模拟待审核任务列表
+// ==================== 组件 ====================
-const pendingTasks = [
-  {
-    id: 'task-001',
-    videoTitle: '夏日护肤推广',
-    creatorName: '小美护肤',
-    brandName: 'XX品牌',
-    platform: 'douyin',
-    aiScore: 85,
-    submittedAt: '2026-02-04 14:30',
-    hasHighRisk: false,
-  },
-  {
-    id: 'task-002',
-    videoTitle: '新品口红试色',
-    creatorName: '美妆达人Lisa',
-    brandName: 'XX品牌',
-    platform: 'xiaohongshu',
-    aiScore: 72,
-    submittedAt: '2026-02-04 13:45',
-    hasHighRisk: true,
-  },
-  {
-    id: 'task-003',
-    videoTitle: '健身器材开箱',
-    creatorName: '健身教练王',
-    brandName: 'XX运动',
-    platform: 'bilibili',
-    aiScore: 68,
-    submittedAt: '2026-02-04 14:50',
-    hasHighRisk: true,
-  },
-]
 
 function UrgentLevelIcon({ level }: { level: string }) {
   if (level === 'high') return <AlertTriangle size={16} className="text-red-500" />
@@ -139,7 +88,108 @@ function UrgentLevelIcon({ level }: { level: string }) {
   return <CheckCircle size={16} className="text-yellow-500" />
 }
 
+function getTaskUrgencyLevel(task: TaskResponse): string {
+  const aiScore = task.stage.startsWith('script') ? task.script_ai_score : task.video_ai_score
+  if (aiScore != null && aiScore < 60) return 'high'
+  if (task.is_appeal) return 'medium'
+  return 'low'
+}
+
+function getTaskUrgencyTitle(task: TaskResponse): string {
+  const type = task.stage.includes('video') ? '视频' : '脚本'
+  return `${task.creator.name}${type} - ${task.name}`
+}
+
+function getTaskTimeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime()
+  const hours = Math.floor(diff / 3600000)
+  if (hours < 1) return `${Math.floor(diff / 60000)}分钟前`
+  if (hours < 24) return `${hours}小时前`
+  return `${Math.floor(hours / 24)}天前`
+}
+
+function DashboardSkeleton() {
+  return (
+    <div className="space-y-6 animate-pulse">
+      <div className="flex items-center justify-between">
+        <div className="h-8 w-40 bg-bg-elevated rounded" />
+        <div className="h-5 w-48 bg-bg-elevated rounded" />
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        {[1, 2, 3, 4].map(i => (
+          <div key={i} className="h-28 bg-bg-elevated rounded-xl" />
+        ))}
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="h-64 bg-bg-elevated rounded-xl" />
+        <div className="lg:col-span-2 h-64 bg-bg-elevated rounded-xl" />
+      </div>
+      <div className="h-48 bg-bg-elevated rounded-xl" />
+    </div>
+  )
+}
+
 export default function AgencyDashboard() {
+  const [stats, setStats] = useState<AgencyDashboardType | null>(null)
+  const [pendingTasks, setPendingTasks] = useState<TaskResponse[]>([])
+  const [projects, setProjects] = useState<ProjectResponse[]>([])
+  const [loading, setLoading] = useState(true)
+  const { subscribe } = useSSE()
+
+  const loadData = useCallback(async () => {
+    if (USE_MOCK) {
+      setStats(mockStats)
+      setPendingTasks(mockPendingTasks)
+      setProjects(mockProjects)
+      setLoading(false)
+      return
+    }
+
+    try {
+      const [dashboardData, tasksData, projectsData] = await Promise.all([
+        api.getAgencyDashboard(),
+        api.listPendingReviews(1, 5),
+        api.listProjects(1, 3),
+      ])
+      setStats(dashboardData)
+      // listPendingReviews returns TaskSummary, but we need TaskResponse for the table
+      // Fall back to listTasks for the pending table
+      const fullTasks = await api.listTasks(1, 5, 'script_agency_review')
+      setPendingTasks(fullTasks.items)
+      setProjects(projectsData.items)
+    } catch (err) {
+      console.error('Failed to load agency dashboard:', err)
+      // fallback to empty
+      setStats({ pending_review: { script: 0, video: 0 }, pending_appeal: 0, today_passed: { script: 0, video: 0 }, in_progress: { script: 0, video: 0 }, total_creators: 0, total_tasks: 0 })
+      setPendingTasks([])
+      setProjects([])
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    loadData()
+  }, [loadData])
+
+  useEffect(() => {
+    const unsub1 = subscribe('task_updated', () => loadData())
+    const unsub2 = subscribe('new_task', () => loadData())
+    const unsub3 = subscribe('review_completed', () => loadData())
+    return () => { unsub1(); unsub2(); unsub3() }
+  }, [subscribe, loadData])
+
+  if (loading || !stats) return <DashboardSkeleton />
+
+  // Build urgent todos from pending tasks (top 3)
+  const urgentTodos = pendingTasks.slice(0, 3).map(task => ({
+    id: task.id,
+    title: getTaskUrgencyTitle(task),
+    description: task.project.name,
+    time: getTaskTimeAgo(task.updated_at),
+    level: getTaskUrgencyLevel(task),
+  }))
+
   return (
     <div className="space-y-6 min-h-0">
       {/* 页面标题 */}
@@ -155,10 +205,10 @@ export default function AgencyDashboard() {
             <div className="flex items-center justify-between">
               <div>
                 <div className="text-sm text-text-secondary">待审核</div>
-                <div className="text-3xl font-bold text-accent-coral">{stats.pendingReview.script + stats.pendingReview.video}</div>
+                <div className="text-3xl font-bold text-accent-coral">{stats.pending_review.script + stats.pending_review.video}</div>
                 <div className="flex gap-3 mt-1 text-xs text-text-tertiary">
-                  <span>脚本 {stats.pendingReview.script}</span>
+                  <span>脚本 {stats.pending_review.script}</span>
-                  <span>视频 {stats.pendingReview.video}</span>
+                  <span>视频 {stats.pending_review.video}</span>
                 </div>
               </div>
               <div className="w-12 h-12 rounded-full bg-accent-coral/20 flex items-center justify-center">
@@ -172,7 +222,7 @@ export default function AgencyDashboard() {
             <div className="flex items-center justify-between">
               <div>
                 <div className="text-sm text-text-secondary">待仲裁</div>
-                <div className="text-3xl font-bold text-orange-400">{stats.pendingAppeal}</div>
+                <div className="text-3xl font-bold text-orange-400">{stats.pending_appeal}</div>
               </div>
               <div className="w-12 h-12 rounded-full bg-orange-500/20 flex items-center justify-center">
                 <MessageSquare size={24} className="text-orange-400" />
@@ -185,10 +235,10 @@ export default function AgencyDashboard() {
             <div className="flex items-center justify-between">
               <div>
                 <div className="text-sm text-text-secondary">今日通过</div>
-                <div className="text-3xl font-bold text-accent-green">{stats.todayPassed.script + stats.todayPassed.video}</div>
+                <div className="text-3xl font-bold text-accent-green">{stats.today_passed.script + stats.today_passed.video}</div>
                 <div className="flex gap-3 mt-1 text-xs text-text-tertiary">
-                  <span>脚本 {stats.todayPassed.script}</span>
+                  <span>脚本 {stats.today_passed.script}</span>
-                  <span>视频 {stats.todayPassed.video}</span>
+                  <span>视频 {stats.today_passed.video}</span>
                 </div>
               </div>
               <div className="w-12 h-12 rounded-full bg-accent-green/20 flex items-center justify-center">
@@ -202,10 +252,10 @@ export default function AgencyDashboard() {
             <div className="flex items-center justify-between">
               <div>
                 <div className="text-sm text-text-secondary">进行中</div>
-                <div className="text-3xl font-bold text-accent-indigo">{stats.inProgress.script + stats.inProgress.video}</div>
+                <div className="text-3xl font-bold text-accent-indigo">{stats.in_progress.script + stats.in_progress.video}</div>
                 <div className="flex gap-3 mt-1 text-xs text-text-tertiary">
-                  <span>脚本 {stats.inProgress.script}</span>
+                  <span>脚本 {stats.in_progress.script}</span>
-                  <span>视频 {stats.inProgress.video}</span>
+                  <span>视频 {stats.in_progress.video}</span>
                 </div>
               </div>
               <div className="w-12 h-12 rounded-full bg-accent-indigo/20 flex items-center justify-center">
@@ -226,10 +276,10 @@ export default function AgencyDashboard() {
             </CardTitle>
           </CardHeader>
           <CardContent className="space-y-3">
-            {urgentTodos.map((todo) => (
+            {urgentTodos.length > 0 ? urgentTodos.map((todo) => (
               <Link
                 key={todo.id}
-                href={todo.type === 'violation' || todo.type === 'ai_done' ? `/agency/review/${todo.id}` : `/agency/appeals/${todo.id}`}
+                href={`/agency/review/${todo.id}`}
                 className="block p-3 rounded-lg border border-border-subtle hover:border-accent-indigo hover:bg-accent-indigo/5 transition-colors"
               >
                 <div className="flex items-start gap-3">
@@ -242,7 +292,9 @@ export default function AgencyDashboard() {
                   <ChevronRight size={16} className="text-text-tertiary flex-shrink-0" />
                 </div>
               </Link>
-            ))}
+            )) : (
+              <div className="text-center py-6 text-text-tertiary text-sm">暂无紧急待办</div>
+            )}
           </CardContent>
         </Card>
 
@@ -256,68 +308,27 @@ export default function AgencyDashboard() {
           </CardHeader>
           <CardContent>
             <div className="space-y-4">
-              {projectOverview.map((project) => {
+              {projects.length > 0 ? projects.map((project) => (
-                const totalReviewing = project.reviewingScript + project.reviewingVideo
+                <div key={project.id} className="p-4 rounded-lg bg-bg-elevated">
-                const projectPlatform = getPlatformInfo(project.platform)
+                  <div className="flex items-center justify-between mb-3">
-                return (
+                    <div className="flex items-center gap-2">
-                  <div key={project.id} className="p-4 rounded-lg bg-bg-elevated">
+                      <span className="font-medium text-text-primary">{project.name}</span>
-                    <div className="flex items-center justify-between mb-3">
+                      {project.brand_name && (
-                      <div className="flex items-center gap-2">
+                        <span className="text-xs text-text-tertiary">({project.brand_name})</span>
-                        <span className="font-medium text-text-primary">{project.name}</span>
+                      )}
-                        {projectPlatform && (
-                          <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium ${projectPlatform.bgColor} ${projectPlatform.textColor}`}>
-                            <span>{projectPlatform.icon}</span>
-                            {projectPlatform.name}
-                          </span>
-                        )}
-                      </div>
-                      <span className="text-sm text-text-secondary">
-                        {project.submitted}/{project.total} 已提交
-                      </span>
-                    </div>
-                    <div className="flex h-3 rounded-full overflow-hidden bg-bg-page">
-                      <div
-                        className="bg-accent-green transition-all"
-                        style={{ width: `${(project.passed / project.total) * 100}%` }}
-                        title={`已通过: ${project.passed}`}
-                      />
-                      <div
-                        className="bg-accent-indigo transition-all"
-                        style={{ width: `${(project.reviewingScript / project.total) * 100}%` }}
-                        title={`脚本审核中: ${project.reviewingScript}`}
-                      />
-                      <div
-                        className="bg-purple-500 transition-all"
-                        style={{ width: `${(project.reviewingVideo / project.total) * 100}%` }}
-                        title={`视频审核中: ${project.reviewingVideo}`}
-                      />
-                      <div
-                        className="bg-orange-500 transition-all"
-                        style={{ width: `${(project.needRevision / project.total) * 100}%` }}
-                        title={`需修改: ${project.needRevision}`}
-                      />
-                    </div>
-                    <div className="flex flex-wrap gap-x-4 gap-y-1 mt-2 text-xs text-text-secondary">
-                      <span className="flex items-center gap-1">
-                        <span className="w-2 h-2 bg-accent-green rounded-full" />
-                        通过 {project.passed}
-                      </span>
-                      <span className="flex items-center gap-1">
-                        <span className="w-2 h-2 bg-accent-indigo rounded-full" />
-                        脚本审核 {project.reviewingScript}
-                      </span>
-                      <span className="flex items-center gap-1">
-                        <span className="w-2 h-2 bg-purple-500 rounded-full" />
-                        视频审核 {project.reviewingVideo}
-                      </span>
-                      <span className="flex items-center gap-1">
-                        <span className="w-2 h-2 bg-orange-500 rounded-full" />
-                        需修改 {project.needRevision}
-                      </span>
                     </div>
+                    <span className="text-sm text-text-secondary">
+                      {project.task_count} 个任务
+                    </span>
                   </div>
-                )
+                  <div className="flex items-center justify-between text-xs text-text-tertiary">
-              })}
+                    <span>状态: {project.status === 'active' ? '进行中' : project.status === 'completed' ? '已完成' : '已归档'}</span>
+                    {project.deadline && <span>截止: {new Date(project.deadline).toLocaleDateString('zh-CN')}</span>}
+                  </div>
+                </div>
+              )) : (
+                <div className="text-center py-6 text-text-tertiary text-sm">暂无项目</div>
+              )}
             </div>
           </CardContent>
         </Card>
@@ -341,8 +352,8 @@ export default function AgencyDashboard() {
             <table className="w-full">
               <thead>
                 <tr className="border-b border-border-subtle text-left text-sm text-text-secondary">
-                  <th className="pb-3 font-medium">视频</th>
+                  <th className="pb-3 font-medium">任务</th>
-                  <th className="pb-3 font-medium">平台</th>
+                  <th className="pb-3 font-medium">类型</th>
                   <th className="pb-3 font-medium">达人</th>
                   <th className="pb-3 font-medium">品牌</th>
                   <th className="pb-3 font-medium">AI评分</th>
@@ -351,38 +362,44 @@ export default function AgencyDashboard() {
                 </tr>
               </thead>
               <tbody>
-                {pendingTasks.map((task) => {
+                {pendingTasks.length > 0 ? pendingTasks.map((task) => {
-                  const platform = getPlatformInfo(task.platform)
+                  const isVideo = task.stage.includes('video')
+                  const aiScore = isVideo ? task.video_ai_score : task.script_ai_score
                   return (
                     <tr key={task.id} className="border-b border-border-subtle last:border-0 hover:bg-bg-elevated">
                       <td className="py-4">
                         <div className="flex items-center gap-2">
-                          <div className="font-medium text-text-primary">{task.videoTitle}</div>
+                          <div className="font-medium text-text-primary">{task.name}</div>
-                          {task.hasHighRisk && (
+                          {task.is_appeal && (
-                            <span className="px-1.5 py-0.5 text-xs bg-accent-coral/20 text-accent-coral rounded">
+                            <span className="px-1.5 py-0.5 text-xs bg-accent-amber/20 text-accent-amber rounded">
-                              高风险
+                              申诉
                             </span>
                           )}
                         </div>
                       </td>
                       <td className="py-4">
-                        {platform && (
+                        <span className={`px-2 py-1 rounded text-xs font-medium ${
-                          <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium ${platform.bgColor} ${platform.textColor} border ${platform.borderColor}`}>
+                          isVideo ? 'bg-purple-500/20 text-purple-400' : 'bg-accent-indigo/20 text-accent-indigo'
-                            <span>{platform.icon}</span>
-                            {platform.name}
-                          </span>
-                        )}
-                      </td>
-                      <td className="py-4 text-text-secondary">{task.creatorName}</td>
-                      <td className="py-4 text-text-secondary">{task.brandName}</td>
-                      <td className="py-4">
-                        <span className={`font-medium ${
-                          task.aiScore >= 80 ? 'text-accent-green' : task.aiScore >= 60 ? 'text-yellow-400' : 'text-accent-coral'
                         }`}>
-                          {task.aiScore}分
+                          {isVideo ? '视频' : '脚本'}
                         </span>
                       </td>
-                      <td className="py-4 text-sm text-text-tertiary">{task.submittedAt}</td>
+                      <td className="py-4 text-text-secondary">{task.creator.name}</td>
+                      <td className="py-4 text-text-secondary">{task.project.brand_name || task.project.name}</td>
+                      <td className="py-4">
+                        {aiScore != null ? (
+                          <span className={`font-medium ${
+                            aiScore >= 80 ? 'text-accent-green' : aiScore >= 60 ? 'text-yellow-400' : 'text-accent-coral'
+                          }`}>
+                            {aiScore}分
+                          </span>
+                        ) : (
+                          <span className="text-text-tertiary">-</span>
+                        )}
+                      </td>
+                      <td className="py-4 text-sm text-text-tertiary">
+                        {new Date(task.created_at).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })}
+                      </td>
                       <td className="py-4">
                         <Link href={`/agency/review/${task.id}`}>
                           <Button size="sm">审核</Button>
@@ -390,7 +407,11 @@ export default function AgencyDashboard() {
                       </td>
                     </tr>
                   )
-                })}
+                }) : (
+                  <tr>
+                    <td colSpan={7} className="py-8 text-center text-text-tertiary">暂无待审核任务</td>
+                  </tr>
+                )}
               </tbody>
             </table>
           </div>

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

@@ -1,57 +1,103 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { useRouter, useParams } from 'next/navigation'
 import { useToast } from '@/components/ui/Toast'
-import { ArrowLeft, Play, Pause, AlertTriangle, Shield, Radio } from 'lucide-react'
+import { ArrowLeft, Play, Pause, AlertTriangle, Shield, Radio, Loader2 } from 'lucide-react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
 import { Button } from '@/components/ui/Button'
 import { SuccessTag, WarningTag, ErrorTag } from '@/components/ui/Tag'
 import { Modal, ConfirmModal } from '@/components/ui/Modal'
 import { ReviewSteps, getAgencyReviewSteps } from '@/components/ui/ReviewSteps'
+import { api } from '@/lib/api'
+import { USE_MOCK } from '@/contexts/AuthContext'
+import { useSSE } from '@/contexts/SSEContext'
+import type { TaskResponse, AIReviewResult } from '@/types/task'
 
-// 模拟审核任务数据
+// ==================== Mock 数据 ====================
-const mockTask = {
+const mockTask: TaskResponse = {
   id: 'task-001',
-  videoTitle: '夏日护肤推广',
+  name: '夏日护肤推广',
-  creatorName: '小美护肤',
+  sequence: 1,
-  brandName: 'XX护肤品牌',
+  stage: 'script_agency_review',
-  platform: '抖音',
+  project: { id: 'proj-001', name: 'XX品牌618推广', brand_name: 'XX护肤品牌' },
-  aiScore: 85,
+  agency: { id: 'ag-001', name: '优创代理' },
-  aiSummary: '视频整体合规，发现2处硬性问题和1处舆情提示需人工确认',
+  creator: { id: 'cr-001', name: '小美护肤' },
-  reviewSteps: [
+  script_ai_score: 85,
-    { key: 'submitted', label: '已提交', status: 'done' as const, time: '2/3 10:30' },
+  script_ai_result: {
-    { key: 'ai_review', label: 'AI审核', status: 'done' as const, time: '2/3 10:35' },
+    score: 85,
-    { key: 'agent_review', label: '代理商审核', status: 'current' as const },
+    violations: [
-    { key: 'final', label: '最终结果', status: 'pending' as const },
+      {
-  ],
+        type: '违禁词',
-  hardViolations: [
+        content: '效果最好',
-    {
+        severity: 'high',
-      id: 'v1',
+        suggestion: '建议替换为"效果显著"',
-      type: '违禁词',
+        timestamp: 15.5,
-      content: '效果最好',
+        source: 'speech',
-      timestamp: 15.5,
+      },
-      source: 'speech',
+      {
-      riskLevel: 'high',
+        type: '竞品露出',
-      aiConfidence: 0.95,
+        content: '疑似竞品Logo',
-      suggestion: '建议替换为"效果显著"',
+        severity: 'high',
-    },
+        suggestion: '需人工确认是否为竞品露出',
-    {
+        timestamp: 42.0,
-      id: 'v2',
+        source: 'visual',
-      type: '竞品露出',
+      },
-      content: '疑似竞品Logo',
+    ],
-      timestamp: 42.0,
+    soft_warnings: [
-      source: 'visual',
+      { type: '油腻预警', content: '达人表情过于夸张，建议检查', suggestion: '软性风险仅作提示' },
-      riskLevel: 'high',
+    ],
-      aiConfidence: 0.72,
+    summary: '视频整体合规，发现2处硬性问题和1处舆情提示需人工确认',
-      suggestion: '需人工确认是否为竞品露出',
+  },
-    },
+  video_ai_score: 85,
-  ],
+  video_ai_result: {
-  sentimentWarnings: [
+    score: 85,
-    { id: 's1', type: '油腻预警', timestamp: 42.0, content: '达人表情过于夸张，建议检查', riskLevel: 'medium' },
+    violations: [
-  ],
+      {
+        type: '违禁词',
+        content: '效果最好',
+        severity: 'high',
+        suggestion: '建议替换为"效果显著"',
+        timestamp: 15.5,
+        source: 'speech',
+      },
+      {
+        type: '竞品露出',
+        content: '疑似竞品Logo',
+        severity: 'high',
+        suggestion: '需人工确认是否为竞品露出',
+        timestamp: 42.0,
+        source: 'visual',
+      },
+    ],
+    soft_warnings: [
+      { type: '油腻预警', content: '达人表情过于夸张，建议检查', suggestion: '软性风险仅作提示' },
+    ],
+    summary: '视频整体合规，发现2处硬性问题和1处舆情提示需人工确认',
+  },
+  appeal_count: 0,
+  is_appeal: false,
+  created_at: '2026-02-03T10:30:00Z',
+  updated_at: '2026-02-03T10:35:00Z',
 }
 
+// ==================== 工具函数 ====================
+
+function getReviewStepStatus(task: TaskResponse): string {
+  if (task.stage.includes('agency_review')) return 'agent_reviewing'
+  if (task.stage.includes('brand_review')) return 'brand_reviewing'
+  if (task.stage === 'completed') return 'completed'
+  return 'agent_reviewing'
+}
+
+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 = getAgencyReviewSteps(taskStatus)
   const currentStep = steps.find(s => s.status === 'current')
@@ -77,16 +123,43 @@ function RiskLevelTag({ level }: { level: string }) {
   return <SuccessTag>低风险</SuccessTag>
 }
 
-function formatTimestamp(seconds: number): string {
+function ReviewSkeleton() {
-  const mins = Math.floor(seconds / 60)
+  return (
-  const secs = Math.floor(seconds % 60)
+    <div className="space-y-4 animate-pulse">
-  return `${mins}:${secs.toString().padStart(2, '0')}`
+      <div className="flex items-center gap-4">
+        <div className="w-10 h-10 bg-bg-elevated rounded-full" />
+        <div className="space-y-2">
+          <div className="h-6 w-48 bg-bg-elevated rounded" />
+          <div className="h-4 w-64 bg-bg-elevated rounded" />
+        </div>
+      </div>
+      <div className="h-16 bg-bg-elevated rounded-xl" />
+      <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
+        <div className="lg:col-span-3 space-y-4">
+          <div className="h-64 bg-bg-elevated rounded-xl" />
+          <div className="h-20 bg-bg-elevated rounded-xl" />
+        </div>
+        <div className="lg:col-span-2 space-y-4">
+          <div className="h-48 bg-bg-elevated rounded-xl" />
+          <div className="h-32 bg-bg-elevated rounded-xl" />
+        </div>
+      </div>
+    </div>
+  )
 }
 
+// ==================== 主页面 ====================
+
 export default function ReviewPage() {
   const router = useRouter()
   const params = useParams()
   const toast = useToast()
+  const taskId = params.id as string
+  const { subscribe } = useSSE()
+
+  const [task, setTask] = useState<TaskResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [submitting, setSubmitting] = useState(false)
   const [isPlaying, setIsPlaying] = useState(false)
   const [showApproveModal, setShowApproveModal] = useState(false)
   const [showRejectModal, setShowRejectModal] = useState(false)
@@ -96,37 +169,127 @@ export default function ReviewPage() {
   const [saveAsException, setSaveAsException] = useState(false)
   const [checkedViolations, setCheckedViolations] = useState<Record<string, boolean>>({})
 
-  const task = mockTask
+  const loadTask = useCallback(async () => {
+    if (USE_MOCK) {
+      setTask(mockTask)
+      setLoading(false)
+      return
+    }
 
-  const handleApprove = () => {
+    try {
-    setShowApproveModal(false)
+      const data = await api.getTask(taskId)
-    router.push('/agency')
+      setTask(data)
+    } catch (err) {
+      console.error('Failed to load task:', err)
+      toast.error('加载任务失败')
+    } finally {
+      setLoading(false)
+    }
+  }, [taskId, toast])
+
+  useEffect(() => {
+    loadTask()
+  }, [loadTask])
+
+  useEffect(() => {
+    const unsub1 = subscribe('task_updated', (data: any) => {
+      if (data?.task_id === taskId) loadTask()
+    })
+    const unsub2 = subscribe('review_completed', (data: any) => {
+      if (data?.task_id === taskId) loadTask()
+    })
+    return () => { unsub1(); unsub2() }
+  }, [subscribe, taskId, loadTask])
+
+  if (loading || !task) return <ReviewSkeleton />
+
+  // Determine if this is script or video review
+  const isVideoReview = task.stage.includes('video')
+  const aiResult: AIReviewResult | null | undefined = isVideoReview ? task.video_ai_result : task.script_ai_result
+  const aiScore = isVideoReview ? task.video_ai_score : task.script_ai_score
+
+  const violations = aiResult?.violations || []
+  const softWarnings = aiResult?.soft_warnings || []
+  const aiSummary = aiResult?.summary || '暂无 AI 分析总结'
+
+  const handleApprove = async () => {
+    setSubmitting(true)
+    try {
+      if (!USE_MOCK) {
+        if (isVideoReview) {
+          await api.reviewVideo(taskId, { action: 'pass' })
+        } else {
+          await api.reviewScript(taskId, { action: 'pass' })
+        }
+      }
+      toast.success('审核已通过')
+      setShowApproveModal(false)
+      router.push('/agency/review')
+    } catch (err) {
+      console.error('Failed to approve:', err)
+      toast.error('操作失败，请重试')
+    } finally {
+      setSubmitting(false)
+    }
   }
 
-  const handleReject = () => {
+  const handleReject = async () => {
     if (!rejectReason.trim()) {
       toast.error('请填写驳回原因')
       return
     }
-    setShowRejectModal(false)
+    setSubmitting(true)
-    router.push('/agency')
+    try {
+      if (!USE_MOCK) {
+        if (isVideoReview) {
+          await api.reviewVideo(taskId, { action: 'reject', comment: rejectReason })
+        } else {
+          await api.reviewScript(taskId, { action: 'reject', comment: rejectReason })
+        }
+      }
+      toast.success('已驳回')
+      setShowRejectModal(false)
+      router.push('/agency/review')
+    } catch (err) {
+      console.error('Failed to reject:', err)
+      toast.error('操作失败，请重试')
+    } finally {
+      setSubmitting(false)
+    }
   }
 
-  const handleForcePass = () => {
+  const handleForcePass = async () => {
     if (!forcePassReason.trim()) {
       toast.error('请填写强制通过原因')
       return
     }
-    setShowForcePassModal(false)
+    setSubmitting(true)
-    router.push('/agency')
+    try {
+      if (!USE_MOCK) {
+        if (isVideoReview) {
+          await api.reviewVideo(taskId, { action: 'force_pass', comment: forcePassReason })
+        } else {
+          await api.reviewScript(taskId, { action: 'force_pass', comment: forcePassReason })
+        }
+      }
+      toast.success('已强制通过')
+      setShowForcePassModal(false)
+      router.push('/agency/review')
+    } catch (err) {
+      console.error('Failed to force pass:', err)
+      toast.error('操作失败，请重试')
+    } finally {
+      setSubmitting(false)
+    }
   }
 
-  // 计算问题时间点用于进度条展示
+  // 时间线标记
   const timelineMarkers = [
-    ...task.hardViolations.map(v => ({ time: v.timestamp, type: 'hard' as const })),
+    ...violations.filter(v => v.timestamp != null).map(v => ({ time: v.timestamp!, type: 'hard' as const })),
-    ...task.sentimentWarnings.map(w => ({ time: w.timestamp, type: 'soft' as const })),
   ].sort((a, b) => a.time - b.time)
 
+  const maxTime = Math.max(120, ...timelineMarkers.map(m => m.time + 10))
+
   return (
     <div className="space-y-4">
       {/* 顶部导航 */}
@@ -135,64 +298,92 @@ export default function ReviewPage() {
           <ArrowLeft size={20} className="text-text-primary" />
         </button>
         <div className="flex-1">
-          <h1 className="text-xl font-bold text-text-primary">{task.videoTitle}</h1>
+          <h1 className="text-xl font-bold text-text-primary">{task.name}</h1>
-          <p className="text-sm text-text-secondary">{task.creatorName} · {task.brandName} · {task.platform}</p>
+          <p className="text-sm text-text-secondary">
+            {task.creator.name} · {task.project.brand_name || task.project.name} · {isVideoReview ? '视频审核' : '脚本审核'}
+          </p>
         </div>
+        {task.is_appeal && (
+          <span className="px-3 py-1 bg-accent-amber/20 text-accent-amber rounded-full text-sm font-medium">
+            申诉重审
+          </span>
+        )}
       </div>
 
+      {/* 申诉理由 */}
+      {task.is_appeal && task.appeal_reason && (
+        <Card className="border-accent-amber/30 bg-accent-amber/5">
+          <CardContent className="py-3">
+            <p className="text-sm text-accent-amber font-medium mb-1">申诉理由</p>
+            <p className="text-sm text-text-secondary">{task.appeal_reason}</p>
+          </CardContent>
+        </Card>
+      )}
+
       {/* 审核流程进度条 */}
-      <ReviewProgressBar taskStatus="agent_reviewing" />
+      <ReviewProgressBar taskStatus={getReviewStepStatus(task)} />
 
       <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
-        {/* 左侧：视频播放器 (3/5) */}
+        {/* 左侧：视频/脚本播放器 (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">
+              {isVideoReview ? (
-                <button
+                <div className="aspect-video bg-gray-900 rounded-t-lg flex items-center justify-center relative">
-                  type="button"
+                  <button
-                  className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center hover:bg-white/30 transition-colors"
+                    type="button"
-                  onClick={() => setIsPlaying(!isPlaying)}
+                    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>
+                    {isPlaying ? <Pause size={32} className="text-white" /> : <Play size={32} className="text-white ml-1" />}
-              </div>
+                  </button>
-              {/* 智能进度条 */}
-              <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' : 'bg-orange-500'
-                      }`}
-                      style={{ left: `${(marker.time / 120) * 100}%` }}
-                      title={`${formatTimestamp(marker.time)} - ${marker.type === 'hard' ? '硬性问题' : '舆情提示'}`}
-                    />
-                  ))}
                 </div>
-                <div className="flex justify-between text-xs text-text-tertiary mt-1">
+              ) : (
-                  <span>0:00</span>
+                <div className="aspect-[4/3] bg-bg-elevated rounded-t-lg flex items-center justify-center">
-                  <span>2:00</span>
+                  <div className="text-center">
+                    <p className="text-text-secondary">脚本预览区域</p>
+                    <p className="text-sm text-text-tertiary mt-1">{task.script_file_name || '脚本文件'}</p>
+                  </div>
                 </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" />
+              {/* 智能进度条（仅视频且有时间标记时显示） */}
-                    硬性问题
+              {isVideoReview && timelineMarkers.length > 0 && (
-                  </span>
+                <div className="p-4 border-t border-border-subtle">
-                  <span className="flex items-center gap-1">
+                  <div className="text-sm font-medium text-text-primary mb-3">智能进度条（点击跳转）</div>
-                    <span className="w-3 h-3 bg-orange-500 rounded-full" />
+                  <div className="relative h-3 bg-bg-elevated rounded-full">
-                    舆情提示
+                    {timelineMarkers.map((marker, idx) => (
-                  </span>
+                      <button
-                  <span className="flex items-center gap-1">
+                        key={idx}
-                    <span className="w-3 h-3 bg-accent-green rounded-full" />
+                        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 ${
-                  </span>
+                          marker.type === 'hard' ? 'bg-accent-coral' : 'bg-orange-500'
+                        }`}
+                        style={{ left: `${(marker.time / maxTime) * 100}%` }}
+                        title={`${formatTimestamp(marker.time)} - 硬性问题`}
+                      />
+                    ))}
+                  </div>
+                  <div className="flex justify-between text-xs text-text-tertiary mt-1">
+                    <span>0:00</span>
+                    <span>{formatTimestamp(maxTime)}</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>
-              </div>
+              )}
             </CardContent>
           </Card>
 
@@ -201,11 +392,13 @@ export default function ReviewPage() {
             <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'}`}>
+                {aiScore != null && (
-                  {task.aiScore}分
+                  <span className={`text-xl font-bold ${aiScore >= 80 ? 'text-accent-green' : aiScore >= 60 ? 'text-yellow-400' : 'text-accent-coral'}`}>
-                </span>
+                    {aiScore}分
+                  </span>
+                )}
               </div>
-              <p className="text-text-secondary text-sm">{task.aiSummary}</p>
+              <p className="text-text-secondary text-sm">{aiSummary}</p>
             </CardContent>
           </Card>
         </div>
@@ -217,35 +410,42 @@ export default function ReviewPage() {
             <CardHeader className="pb-2">
               <CardTitle className="flex items-center gap-2 text-base">
                 <Shield size={16} className="text-red-500" />
-                硬性合规 ({task.hardViolations.length})
+                硬性合规 ({violations.length})
               </CardTitle>
             </CardHeader>
             <CardContent className="space-y-3">
-              {task.hardViolations.map((v) => (
+              {violations.length > 0 ? violations.map((v, idx) => {
-                <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'}`}>
+                const key = `v-${idx}`
-                  <div className="flex items-start gap-2">
+                return (
-                    <input
+                  <div key={key} className={`p-3 rounded-lg border ${checkedViolations[key] ? 'bg-bg-elevated border-border-subtle' : 'bg-accent-coral/10 border-accent-coral/30'}`}>
-                      type="checkbox"
+                    <div className="flex items-start gap-2">
-                      checked={checkedViolations[v.id] || false}
+                      <input
-                      onChange={() => setCheckedViolations((prev) => ({ ...prev, [v.id]: !prev[v.id] }))}
+                        type="checkbox"
-                      className="mt-1 accent-accent-indigo"
+                        checked={checkedViolations[key] || false}
-                    />
+                        onChange={() => setCheckedViolations((prev) => ({ ...prev, [key]: !prev[key] }))}
-                    <div className="flex-1">
+                        className="mt-1 accent-accent-indigo"
-                      <div className="flex items-center gap-2 mb-1">
+                      />
-                        <ErrorTag>{v.type}</ErrorTag>
+                      <div className="flex-1">
-                        <span className="text-xs text-text-tertiary">{formatTimestamp(v.timestamp)}</span>
+                        <div className="flex items-center gap-2 mb-1">
+                          <ErrorTag>{v.type}</ErrorTag>
+                          {v.timestamp != null && (
+                            <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>
-                      <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>
+                )
-              ))}
+              }) : (
+                <div className="text-center py-4 text-text-tertiary text-sm">无硬性违规</div>
+              )}
             </CardContent>
           </Card>
 
           {/* 舆情雷达 */}
-          {task.sentimentWarnings.length > 0 && (
+          {softWarnings.length > 0 && (
             <Card>
               <CardHeader className="pb-2">
                 <CardTitle className="flex items-center gap-2 text-base">
@@ -254,14 +454,13 @@ export default function ReviewPage() {
                 </CardTitle>
               </CardHeader>
               <CardContent className="space-y-2">
-                {task.sentimentWarnings.map((w) => (
+                {softWarnings.map((w, idx) => (
-                  <div key={w.id} className="p-3 bg-orange-500/10 rounded-lg border border-orange-500/30">
+                  <div key={idx} 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>
+                    <p className="text-xs text-text-tertiary mt-1">软性风险仅作提示，不强制拦截</p>
                   </div>
                 ))}
               </CardContent>
@@ -275,16 +474,17 @@ export default function ReviewPage() {
         <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} 个问题
+              已检查 {Object.values(checkedViolations).filter(Boolean).length}/{violations.length} 个问题
             </div>
             <div className="flex gap-3">
-              <Button variant="danger" onClick={() => setShowRejectModal(true)}>
+              <Button variant="danger" onClick={() => setShowRejectModal(true)} disabled={submitting}>
                 驳回
               </Button>
-              <Button variant="secondary" onClick={() => setShowForcePassModal(true)}>
+              <Button variant="secondary" onClick={() => setShowForcePassModal(true)} disabled={submitting}>
                 强制通过
               </Button>
-              <Button variant="success" onClick={() => setShowApproveModal(true)}>
+              <Button variant="success" onClick={() => setShowApproveModal(true)} disabled={submitting}>
+                {submitting ? <Loader2 size={16} className="animate-spin" /> : null}
                 通过
               </Button>
             </div>
@@ -298,7 +498,7 @@ export default function ReviewPage() {
         onClose={() => setShowApproveModal(false)}
         onConfirm={handleApprove}
         title="确认通过"
-        message="确定要通过此视频的审核吗？通过后达人将收到通知。"
+        message={`确定要通过此${isVideoReview ? '视频' : '脚本'}的审核吗？通过后达人将收到通知。`}
         confirmText="确认通过"
       />
 
@@ -307,9 +507,11 @@ export default function ReviewPage() {
         <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>
+            <p className="text-sm font-medium text-text-primary mb-2">
-            {task.hardViolations.filter(v => checkedViolations[v.id]).map(v => (
+              已选问题 ({Object.values(checkedViolations).filter(Boolean).length})
-              <div key={v.id} className="text-sm text-text-secondary">• {v.type}: {v.content}</div>
+            </p>
+            {violations.filter((_, idx) => checkedViolations[`v-${idx}`]).map((v, idx) => (
+              <div key={idx} 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>
@@ -325,8 +527,11 @@ export default function ReviewPage() {
             />
           </div>
           <div className="flex gap-3 justify-end">
-            <Button variant="ghost" onClick={() => setShowRejectModal(false)}>取消</Button>
+            <Button variant="ghost" onClick={() => setShowRejectModal(false)} disabled={submitting}>取消</Button>
-            <Button variant="danger" onClick={handleReject}>确认驳回</Button>
+            <Button variant="danger" onClick={handleReject} disabled={submitting}>
+              {submitting && <Loader2 size={16} className="animate-spin" />}
+              确认驳回
+            </Button>
           </div>
         </div>
       </Modal>
@@ -359,8 +564,11 @@ export default function ReviewPage() {
             <span className="text-sm text-text-secondary">保存为特例（需品牌方确认后生效）</span>
           </label>
           <div className="flex gap-3 justify-end">
-            <Button variant="ghost" onClick={() => setShowForcePassModal(false)}>取消</Button>
+            <Button variant="ghost" onClick={() => setShowForcePassModal(false)} disabled={submitting}>取消</Button>
-            <Button onClick={handleForcePass}>确认强制通过</Button>
+            <Button onClick={handleForcePass} disabled={submitting}>
+              {submitting && <Loader2 size={16} className="animate-spin" />}
+              确认强制通过
+            </Button>
           </div>
         </div>
       </Modal>

frontend/app/agency/review/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import Link from 'next/link'
 import { useToast } from '@/components/ui/Toast'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
@@ -10,169 +10,136 @@ import {
   FileText,
   Video,
   Search,
-  Filter,
   Clock,
-  User,
-  AlertTriangle,
-  ChevronRight,
-  Download,
   Eye,
   File,
-  MessageSquareWarning
+  Download,
+  MessageSquareWarning,
+  Loader2
 } from 'lucide-react'
 import { Modal } from '@/components/ui/Modal'
 import { getPlatformInfo } from '@/lib/platforms'
+import { api } from '@/lib/api'
+import { USE_MOCK } from '@/contexts/AuthContext'
+import { useSSE } from '@/contexts/SSEContext'
+import type { TaskResponse } from '@/types/task'
 
-// 模拟脚本待审列表
+// ==================== Mock 数据 ====================
-const mockScriptTasks = [
+const mockScriptTasks: TaskResponse[] = [
   {
-    id: 'script-001',
+    id: 'script-001', name: '夏日护肤推广脚本', sequence: 1,
-    title: '夏日护肤推广脚本',
+    stage: 'script_agency_review',
-    fileName: '夏日护肤推广_脚本v2.docx',
+    project: { id: 'proj-001', name: 'XX品牌618推广', brand_name: 'XX品牌' },
-    fileSize: '245 KB',
+    agency: { id: 'ag-001', name: '优创代理' },
-    creatorName: '小美护肤',
+    creator: { id: 'cr-001', name: '小美护肤' },
-    projectName: 'XX品牌618推广',
+    script_file_name: '夏日护肤推广_脚本v2.docx',
-    platform: 'douyin',
+    script_ai_score: 88,
-    aiScore: 88,
+    script_ai_result: { score: 88, violations: [], soft_warnings: [] },
-    riskLevel: 'low' as const,
+    appeal_count: 0, is_appeal: false,
-    submittedAt: '2026-02-06 14:30',
+    created_at: '2026-02-06T14:30:00Z', updated_at: '2026-02-06T14:30:00Z',
-    hasHighRisk: false,
-    isAppeal: false, // 是否为申诉
   },
   {
-    id: 'script-002',
+    id: 'script-002', name: '新品口红试色脚本', sequence: 2,
-    title: '新品口红试色脚本',
+    stage: 'script_agency_review',
-    fileName: '口红试色_脚本v1.docx',
+    project: { id: 'proj-001', name: 'XX品牌618推广', brand_name: 'XX品牌' },
-    fileSize: '312 KB',
+    agency: { id: 'ag-001', name: '优创代理' },
-    creatorName: '美妆Lisa',
+    creator: { id: 'cr-002', name: '美妆Lisa' },
-    projectName: 'XX品牌618推广',
+    script_file_name: '口红试色_脚本v1.docx',
-    platform: 'xiaohongshu',
+    script_ai_score: 72,
-    aiScore: 72,
+    script_ai_result: { score: 72, violations: [{ type: '违禁词', content: '最好', severity: 'medium', suggestion: '替换' }], soft_warnings: [] },
-    riskLevel: 'medium' as const,
+    appeal_count: 1, is_appeal: true, appeal_reason: '已修改违规用词，请求重新审核',
-    submittedAt: '2026-02-06 12:15',
+    created_at: '2026-02-06T12:15:00Z', updated_at: '2026-02-06T12:15:00Z',
-    hasHighRisk: true,
-    isAppeal: true, // 申诉重审
-    appealReason: '已修改违规用词，请求重新审核',
   },
   {
-    id: 'script-003',
+    id: 'script-003', name: '健身器材推荐脚本', sequence: 3,
-    title: '健身器材推荐脚本',
+    stage: 'script_agency_review',
-    fileName: '健身器材_推荐脚本.pdf',
+    project: { id: 'proj-002', name: 'XX运动品牌', brand_name: 'XX运动' },
-    fileSize: '189 KB',
+    agency: { id: 'ag-001', name: '优创代理' },
-    creatorName: '健身教练王',
+    creator: { id: 'cr-003', name: '健身教练王' },
-    projectName: 'XX运动品牌',
+    script_file_name: '健身器材_推荐脚本.pdf',
-    platform: 'bilibili',
+    script_ai_score: 95,
-    aiScore: 95,
+    script_ai_result: { score: 95, violations: [], soft_warnings: [] },
-    riskLevel: 'low' as const,
+    appeal_count: 0, is_appeal: false,
-    submittedAt: '2026-02-06 10:00',
+    created_at: '2026-02-06T10:00:00Z', updated_at: '2026-02-06T10:00:00Z',
-    hasHighRisk: false,
-    isAppeal: false,
-  },
-  {
-    id: 'script-004',
-    title: '618大促预热脚本',
-    fileName: '618预热_脚本final.docx',
-    fileSize: '278 KB',
-    creatorName: '达人D',
-    projectName: 'XX品牌618推广',
-    platform: 'kuaishou',
-    aiScore: 62,
-    riskLevel: 'high' as const,
-    submittedAt: '2026-02-06 09:00',
-    hasHighRisk: true,
-    isAppeal: true,
-    appealReason: '对驳回原因有异议，内容符合要求',
   },
 ]
 
-// 模拟视频待审列表
+const mockVideoTasks: TaskResponse[] = [
-const mockVideoTasks = [
   {
-    id: 'video-001',
+    id: 'video-001', name: '夏日护肤推广', sequence: 1,
-    title: '夏日护肤推广',
+    stage: 'video_agency_review',
-    fileName: '夏日护肤_成片v2.mp4',
+    project: { id: 'proj-001', name: 'XX品牌618推广', brand_name: 'XX品牌' },
-    fileSize: '128 MB',
+    agency: { id: 'ag-001', name: '优创代理' },
-    creatorName: '小美护肤',
+    creator: { id: 'cr-001', name: '小美护肤' },
-    projectName: 'XX品牌618推广',
+    video_file_name: '夏日护肤_成片v2.mp4',
-    platform: 'douyin',
+    video_duration: 135, video_ai_score: 85,
-    aiScore: 85,
+    video_ai_result: { score: 85, violations: [], soft_warnings: [] },
-    riskLevel: 'low' as const,
+    appeal_count: 0, is_appeal: false,
-    duration: '02:15',
+    created_at: '2026-02-06T15:00:00Z', updated_at: '2026-02-06T15:00:00Z',
-    submittedAt: '2026-02-06 15:00',
-    hasHighRisk: false,
-    isAppeal: false,
   },
   {
-    id: 'video-002',
+    id: 'video-002', name: '新品口红试色', sequence: 2,
-    title: '新品口红试色',
+    stage: 'video_agency_review',
-    fileName: '口红试色_终版.mp4',
+    project: { id: 'proj-001', name: 'XX品牌618推广', brand_name: 'XX品牌' },
-    fileSize: '256 MB',
+    agency: { id: 'ag-001', name: '优创代理' },
-    creatorName: '美妆Lisa',
+    creator: { id: 'cr-002', name: '美妆Lisa' },
-    projectName: 'XX品牌618推广',
+    video_file_name: '口红试色_终版.mp4',
-    platform: 'xiaohongshu',
+    video_duration: 222, video_ai_score: 68,
-    aiScore: 68,
+    video_ai_result: { score: 68, violations: [{ type: '竞品', content: '疑似竞品', severity: 'high', suggestion: '确认' }], soft_warnings: [] },
-    riskLevel: 'medium' as const,
+    appeal_count: 1, is_appeal: true, appeal_reason: '已按要求重新剪辑，删除了争议片段',
-    duration: '03:42',
+    created_at: '2026-02-06T13:45:00Z', updated_at: '2026-02-06T13:45:00Z',
-    submittedAt: '2026-02-06 13:45',
-    hasHighRisk: true,
-    isAppeal: true,
-    appealReason: '已按要求重新剪辑，删除了争议片段',
   },
   {
-    id: 'video-003',
+    id: 'video-003', name: '美妆新品体验', sequence: 3,
-    title: '美妆新品体验',
+    stage: 'video_agency_review',
-    fileName: '美妆体验_v3.mp4',
+    project: { id: 'proj-001', name: 'XX品牌618推广', brand_name: 'XX品牌' },
-    fileSize: '198 MB',
+    agency: { id: 'ag-001', name: '优创代理' },
-    creatorName: '达人C',
+    creator: { id: 'cr-003', name: '达人C' },
-    projectName: 'XX品牌618推广',
+    video_file_name: '美妆体验_v3.mp4',
-    platform: 'bilibili',
+    video_duration: 260, video_ai_score: 58,
-    aiScore: 58,
+    video_ai_result: { score: 58, violations: [{ type: '违禁词', content: '最好', severity: 'high', suggestion: '替换' }], soft_warnings: [] },
-    riskLevel: 'high' as const,
+    appeal_count: 0, is_appeal: false,
-    duration: '04:20',
+    created_at: '2026-02-06T11:30:00Z', updated_at: '2026-02-06T11:30:00Z',
-    submittedAt: '2026-02-06 11:30',
-    hasHighRisk: true,
-    isAppeal: false,
-  },
-  {
-    id: 'video-004',
-    title: '618大促预热',
-    fileName: '618预热_final.mp4',
-    fileSize: '167 MB',
-    creatorName: '达人D',
-    projectName: 'XX品牌618推广',
-    platform: 'wechat',
-    aiScore: 91,
-    riskLevel: 'low' as const,
-    duration: '01:45',
-    submittedAt: '2026-02-06 10:15',
-    hasHighRisk: false,
-    isAppeal: false,
   },
 ]
 
-// 风险等级配置
+// ==================== 工具函数 ====================
+
+function getRiskLevel(task: TaskResponse, type: 'script' | 'video'): 'low' | 'medium' | 'high' {
+  const score = type === 'script' ? task.script_ai_score : task.video_ai_score
+  if (score == null) return 'low'
+  if (score >= 85) return 'low'
+  if (score >= 70) return 'medium'
+  return 'high'
+}
+
 const riskLevelConfig = {
   low: { label: 'AI通过', color: 'bg-accent-green', textColor: 'text-accent-green' },
   medium: { label: '风险:中', color: 'bg-accent-amber', textColor: 'text-accent-amber' },
   high: { label: '风险:高', color: 'bg-accent-coral', textColor: 'text-accent-coral' },
 }
 
+function formatDuration(seconds: number): string {
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+}
+
 function ScoreTag({ score }: { score: number }) {
   if (score >= 85) return <SuccessTag>{score}分</SuccessTag>
   if (score >= 70) return <WarningTag>{score}分</WarningTag>
   return <ErrorTag>{score}分</ErrorTag>
 }
 
-type ScriptTask = typeof mockScriptTasks[0]
+// ==================== 卡片组件 ====================
-type VideoTask = typeof mockVideoTasks[0]
 
-function ScriptTaskCard({ task, onPreview, toast }: { task: ScriptTask; onPreview: (task: ScriptTask) => void; toast: ReturnType<typeof useToast> }) {
+function ScriptTaskCard({ task, onPreview, toast }: { task: TaskResponse; onPreview: (task: TaskResponse) => void; toast: ReturnType<typeof useToast> }) {
-  const riskConfig = riskLevelConfig[task.riskLevel]
+  const riskLevel = getRiskLevel(task, 'script')
-  const platform = getPlatformInfo(task.platform)
+  const riskConfig = riskLevelConfig[riskLevel]
 
   const handleDownload = (e: React.MouseEvent) => {
     e.stopPropagation()
-    toast.info(`下载文件: ${task.fileName}`)
+    toast.info(`下载文件: ${task.script_file_name || '脚本文件'}`)
   }
 
   const handlePreview = (e: React.MouseEvent) => {
@@ -182,78 +149,59 @@ function ScriptTaskCard({ task, onPreview, toast }: { task: ScriptTask; onPrevie
 
   return (
     <div className="rounded-xl bg-bg-elevated overflow-hidden">
-      {/* 平台顶部条 */}
+      {/* 顶部条 */}
-      {platform && (
+      <div className="px-4 py-1.5 bg-accent-indigo/10 border-b border-accent-indigo/20 flex items-center gap-1.5">
-        <div className={`px-4 py-1.5 ${platform.bgColor} border-b ${platform.borderColor} flex items-center gap-1.5`}>
+        <span className="text-xs font-medium text-accent-indigo">{task.project.brand_name || task.project.name}</span>
-          <span className="text-sm">{platform.icon}</span>
+        {task.is_appeal && (
-          <span className={`text-xs font-medium ${platform.textColor}`}>{platform.name}</span>
+          <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} />
-          {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">
+          </span>
-              <MessageSquareWarning size={12} />
+        )}
-              申诉
+      </div>
-            </span>
-          )}
-        </div>
-      )}
       <div className="p-4">
-        {/* 顶部：达人名 · 任务名 + 状态标签 */}
         <div className="flex items-center justify-between mb-3">
           <div className="flex items-center gap-2">
             <div className={`w-2 h-2 rounded-full ${riskConfig.color}`} />
-            <span className="font-medium text-text-primary">{task.creatorName} · {task.title}</span>
+            <span className="font-medium text-text-primary">{task.creator.name} · {task.name}</span>
           </div>
           <span className={`text-xs ${riskConfig.textColor}`}>{riskConfig.label}</span>
         </div>
 
-        {/* 申诉理由 */}
+        {task.is_appeal && task.appeal_reason && (
-        {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>
+            <p className="text-sm text-text-secondary">{task.appeal_reason}</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 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-sm font-medium text-text-primary truncate">{task.script_file_name || '脚本文件'}</p>
-            <p className="text-xs text-text-tertiary">{task.fileSize}</p>
           </div>
-          <button
+          <button type="button" onClick={handlePreview} className="p-2 rounded-lg hover:bg-bg-elevated transition-colors" title="预览文件">
-            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
+          <button type="button" onClick={handleDownload} className="p-2 rounded-lg hover:bg-bg-elevated transition-colors" title="下载文件">
-            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}
+            {new Date(task.created_at).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })}
           </span>
-          <Link href={`/agency/review/script/${task.id}`}>
+          <Link href={`/agency/review/${task.id}`}>
             <Button size="sm" className={`${
-              task.riskLevel === 'high' ? 'bg-accent-coral hover:bg-accent-coral/80' :
+              riskLevel === 'high' ? 'bg-accent-coral hover:bg-accent-coral/80' :
-              task.riskLevel === 'medium' ? 'bg-accent-amber hover:bg-accent-amber/80' :
+              riskLevel === 'medium' ? 'bg-accent-amber hover:bg-accent-amber/80' :
               'bg-accent-green hover:bg-accent-green/80'
             } text-white`}>
-              {task.isAppeal ? '审核申诉' : '审核'}
+              {task.is_appeal ? '审核申诉' : '审核'}
             </Button>
           </Link>
         </div>
@@ -262,13 +210,13 @@ function ScriptTaskCard({ task, onPreview, toast }: { task: ScriptTask; onPrevie
   )
 }
 
-function VideoTaskCard({ task, onPreview, toast }: { task: VideoTask; onPreview: (task: VideoTask) => void; toast: ReturnType<typeof useToast> }) {
+function VideoTaskCard({ task, onPreview, toast }: { task: TaskResponse; onPreview: (task: TaskResponse) => void; toast: ReturnType<typeof useToast> }) {
-  const riskConfig = riskLevelConfig[task.riskLevel]
+  const riskLevel = getRiskLevel(task, 'video')
-  const platform = getPlatformInfo(task.platform)
+  const riskConfig = riskLevelConfig[riskLevel]
 
   const handleDownload = (e: React.MouseEvent) => {
     e.stopPropagation()
-    toast.info(`下载文件: ${task.fileName}`)
+    toast.info(`下载文件: ${task.video_file_name || '视频文件'}`)
   }
 
   const handlePreview = (e: React.MouseEvent) => {
@@ -278,78 +226,61 @@ function VideoTaskCard({ task, onPreview, toast }: { task: VideoTask; onPreview:
 
   return (
     <div className="rounded-xl bg-bg-elevated overflow-hidden">
-      {/* 平台顶部条 */}
+      <div className="px-4 py-1.5 bg-purple-500/10 border-b border-purple-500/20 flex items-center gap-1.5">
-      {platform && (
+        <span className="text-xs font-medium text-purple-400">{task.project.brand_name || task.project.name}</span>
-        <div className={`px-4 py-1.5 ${platform.bgColor} border-b ${platform.borderColor} flex items-center gap-1.5`}>
+        {task.is_appeal && (
-          <span className="text-sm">{platform.icon}</span>
+          <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">
-          <span className={`text-xs font-medium ${platform.textColor}`}>{platform.name}</span>
+            <MessageSquareWarning size={12} />
-          {/* 申诉标识 */}
+            申诉
-          {task.isAppeal && (
+          </span>
-            <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} />
+      </div>
-              申诉
-            </span>
-          )}
-        </div>
-      )}
       <div className="p-4">
-        {/* 顶部：达人名 · 任务名 + 状态标签 */}
         <div className="flex items-center justify-between mb-3">
           <div className="flex items-center gap-2">
             <div className={`w-2 h-2 rounded-full ${riskConfig.color}`} />
-            <span className="font-medium text-text-primary">{task.creatorName} · {task.title}</span>
+            <span className="font-medium text-text-primary">{task.creator.name} · {task.name}</span>
           </div>
           <span className={`text-xs ${riskConfig.textColor}`}>{riskConfig.label}</span>
         </div>
 
-        {/* 申诉理由 */}
+        {task.is_appeal && task.appeal_reason && (
-        {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>
+            <p className="text-sm text-text-secondary">{task.appeal_reason}</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 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-sm font-medium text-text-primary truncate">{task.video_file_name || '视频文件'}</p>
-            <p className="text-xs text-text-tertiary">{task.fileSize} · {task.duration}</p>
+            {task.video_duration && (
+              <p className="text-xs text-text-tertiary">{formatDuration(task.video_duration)}</p>
+            )}
           </div>
-          <button
+          <button type="button" onClick={handlePreview} className="p-2 rounded-lg hover:bg-bg-elevated transition-colors" title="预览视频">
-            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
+          <button type="button" onClick={handleDownload} className="p-2 rounded-lg hover:bg-bg-elevated transition-colors" title="下载文件">
-            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}
+            {new Date(task.created_at).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })}
           </span>
-          <Link href={`/agency/review/video/${task.id}`}>
+          <Link href={`/agency/review/${task.id}`}>
             <Button size="sm" className={`${
-              task.riskLevel === 'high' ? 'bg-accent-coral hover:bg-accent-coral/80' :
+              riskLevel === 'high' ? 'bg-accent-coral hover:bg-accent-coral/80' :
-              task.riskLevel === 'medium' ? 'bg-accent-amber hover:bg-accent-amber/80' :
+              riskLevel === 'medium' ? 'bg-accent-amber hover:bg-accent-amber/80' :
               'bg-accent-green hover:bg-accent-green/80'
             } text-white`}>
-              {task.isAppeal ? '审核申诉' : '审核'}
+              {task.is_appeal ? '审核申诉' : '审核'}
             </Button>
           </Link>
         </div>
@@ -358,26 +289,103 @@ function VideoTaskCard({ task, onPreview, toast }: { task: VideoTask; onPreview:
   )
 }
 
+// ==================== 骨架屏 ====================
+
+function ReviewListSkeleton() {
+  return (
+    <div className="space-y-6 animate-pulse">
+      <div className="flex items-center justify-between">
+        <div className="h-8 w-24 bg-bg-elevated rounded" />
+        <div className="flex gap-2">
+          <div className="h-8 w-20 bg-bg-elevated rounded" />
+          <div className="h-8 w-20 bg-bg-elevated rounded" />
+        </div>
+      </div>
+      <div className="h-10 w-full max-w-md bg-bg-elevated rounded-lg" />
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {[1, 2].map(i => (
+          <div key={i} className="space-y-3">
+            <div className="h-8 w-32 bg-bg-elevated rounded" />
+            {[1, 2, 3].map(j => (
+              <div key={j} className="h-40 bg-bg-elevated rounded-xl" />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// ==================== 主页面 ====================
+
 export default function AgencyReviewListPage() {
   const [searchQuery, setSearchQuery] = useState('')
   const [activeTab, setActiveTab] = useState<'all' | 'script' | 'video'>('all')
-  const [previewScript, setPreviewScript] = useState<ScriptTask | null>(null)
+  const [previewTask, setPreviewTask] = useState<TaskResponse | null>(null)
-  const [previewVideo, setPreviewVideo] = useState<VideoTask | null>(null)
+  const [previewType, setPreviewType] = useState<'script' | 'video'>('script')
+  const [scriptTasks, setScriptTasks] = useState<TaskResponse[]>([])
+  const [videoTasks, setVideoTasks] = useState<TaskResponse[]>([])
+  const [loading, setLoading] = useState(true)
   const toast = useToast()
+  const { subscribe } = useSSE()
 
-  const filteredScripts = mockScriptTasks.filter(task =>
+  const loadData = useCallback(async () => {
-    task.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    if (USE_MOCK) {
-    task.creatorName.toLowerCase().includes(searchQuery.toLowerCase())
+      setScriptTasks(mockScriptTasks)
+      setVideoTasks(mockVideoTasks)
+      setLoading(false)
+      return
+    }
+
+    try {
+      const [scriptData, videoData] = await Promise.all([
+        api.listTasks(1, 50, 'script_agency_review'),
+        api.listTasks(1, 50, 'video_agency_review'),
+      ])
+      setScriptTasks(scriptData.items)
+      setVideoTasks(videoData.items)
+    } catch (err) {
+      console.error('Failed to load review tasks:', err)
+      toast.error('加载审核任务失败')
+    } finally {
+      setLoading(false)
+    }
+  }, [toast])
+
+  useEffect(() => {
+    loadData()
+  }, [loadData])
+
+  useEffect(() => {
+    const unsub1 = subscribe('task_updated', () => loadData())
+    const unsub2 = subscribe('new_task', () => loadData())
+    return () => { unsub1(); unsub2() }
+  }, [subscribe, loadData])
+
+  if (loading) return <ReviewListSkeleton />
+
+  const filteredScripts = scriptTasks.filter(task =>
+    task.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    task.creator.name.toLowerCase().includes(searchQuery.toLowerCase())
   )
 
-  const filteredVideos = mockVideoTasks.filter(task =>
+  const filteredVideos = videoTasks.filter(task =>
-    task.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    task.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    task.creatorName.toLowerCase().includes(searchQuery.toLowerCase())
+    task.creator.name.toLowerCase().includes(searchQuery.toLowerCase())
   )
 
-  // 计算申诉数量
+  const appealScriptCount = scriptTasks.filter(t => t.is_appeal).length
-  const appealScriptCount = mockScriptTasks.filter(t => t.isAppeal).length
+  const appealVideoCount = videoTasks.filter(t => t.is_appeal).length
-  const appealVideoCount = mockVideoTasks.filter(t => t.isAppeal).length
+
+  const handleScriptPreview = (task: TaskResponse) => {
+    setPreviewTask(task)
+    setPreviewType('script')
+  }
+
+  const handleVideoPreview = (task: TaskResponse) => {
+    setPreviewTask(task)
+    setPreviewType('video')
+  }
 
   return (
     <div className="space-y-6 min-h-0">
@@ -390,10 +398,10 @@ export default function AgencyReviewListPage() {
         <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} 脚本
+            {scriptTasks.length} 脚本
           </span>
           <span className="px-2 py-1 bg-purple-500/20 text-purple-400 rounded font-medium">
-            {mockVideoTasks.length} 视频
+            {videoTasks.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">
@@ -449,7 +457,6 @@ export default function AgencyReviewListPage() {
 
       {/* 任务列表 */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* 脚本待审列表 */}
         {(activeTab === 'all' || activeTab === 'script') && (
           <Card>
             <CardHeader>
@@ -464,7 +471,7 @@ export default function AgencyReviewListPage() {
             <CardContent className="space-y-3">
               {filteredScripts.length > 0 ? (
                 filteredScripts.map((task) => (
-                  <ScriptTaskCard key={task.id} task={task} onPreview={setPreviewScript} toast={toast} />
+                  <ScriptTaskCard key={task.id} task={task} onPreview={handleScriptPreview} toast={toast} />
                 ))
               ) : (
                 <div className="text-center py-8 text-text-tertiary">
@@ -476,7 +483,6 @@ export default function AgencyReviewListPage() {
           </Card>
         )}
 
-        {/* 视频待审列表 */}
         {(activeTab === 'all' || activeTab === 'video') && (
           <Card>
             <CardHeader>
@@ -491,7 +497,7 @@ export default function AgencyReviewListPage() {
             <CardContent className="space-y-3">
               {filteredVideos.length > 0 ? (
                 filteredVideos.map((task) => (
-                  <VideoTaskCard key={task.id} task={task} onPreview={setPreviewVideo} toast={toast} />
+                  <VideoTaskCard key={task.id} task={task} onPreview={handleVideoPreview} toast={toast} />
                 ))
               ) : (
                 <div className="text-center py-8 text-text-tertiary">
@@ -504,86 +510,57 @@ export default function AgencyReviewListPage() {
         )}
       </div>
 
-      {/* 脚本预览弹窗 */}
+      {/* 预览弹窗 */}
       <Modal
-        isOpen={!!previewScript}
+        isOpen={!!previewTask}
-        onClose={() => setPreviewScript(null)}
+        onClose={() => setPreviewTask(null)}
-        title={previewScript?.fileName || '脚本预览'}
+        title={previewType === 'script' ? (previewTask?.script_file_name || '脚本预览') : (previewTask?.video_file_name || '视频预览')}
         size="lg"
       >
         <div className="space-y-4">
-          {previewScript?.isAppeal && previewScript?.appealReason && (
+          {previewTask?.is_appeal && previewTask?.appeal_reason && (
             <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>
+              <p className="text-sm text-text-secondary">{previewTask.appeal_reason}</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={() => toast.info(`下载文件: ${previewScript?.fileName}`)}>
-                <Download size={16} />
-                下载
-              </Button>
-            </div>
-          </div>
-        </div>
-      </Modal>
 
-      {/* 视频预览弹窗 */}
+          {previewType === 'script' ? (
-      <Modal
+            <div className="aspect-[4/3] bg-bg-elevated rounded-lg flex items-center justify-center">
-        isOpen={!!previewVideo}
+              <div className="text-center">
-        onClose={() => setPreviewVideo(null)}
+                <FileText className="w-12 h-12 mx-auto text-accent-indigo mb-4" />
-        title={previewVideo?.fileName || '视频预览'}
+                <p className="text-text-secondary">脚本预览区域</p>
-        size="lg"
+                <p className="text-xs text-text-tertiary mt-1">实际开发中将嵌入文档预览组件</p>
-      >
+              </div>
-        <div className="space-y-4">
+            </div>
-          {previewVideo?.isAppeal && previewVideo?.appealReason && (
+          ) : (
-            <div className="p-3 rounded-lg bg-accent-amber/10 border border-accent-amber/30">
+            <div className="aspect-video bg-bg-elevated rounded-lg flex items-center justify-center">
-              <p className="text-xs text-accent-amber font-medium mb-1 flex items-center gap-1">
+              <div className="text-center">
-                <MessageSquareWarning size={12} />
+                <Video className="w-12 h-12 mx-auto text-purple-400 mb-4" />
-                申诉理由
+                <p className="text-text-secondary">视频播放区域</p>
-              </p>
+                <p className="text-xs text-text-tertiary mt-1">实际开发中将嵌入视频播放器</p>
-              <p className="text-sm text-text-secondary">{previewVideo.appealReason}</p>
+              </div>
             </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>{previewType === 'script' ? previewTask?.script_file_name : previewTask?.video_file_name}</span>
-              <span className="mx-2">·</span>
+              {previewType === 'video' && previewTask?.video_duration && (
-              <span>{previewVideo?.fileSize}</span>
+                <>
-              <span className="mx-2">·</span>
+                  <span className="mx-2">·</span>
-              <span>{previewVideo?.duration}</span>
+                  <span>{formatDuration(previewTask.video_duration)}</span>
+                </>
+              )}
             </div>
             <div className="flex gap-2">
-              <Button variant="secondary" onClick={() => setPreviewVideo(null)}>
+              <Button variant="secondary" onClick={() => setPreviewTask(null)}>
                 关闭
               </Button>
-              <Button onClick={() => toast.info(`下载文件: ${previewVideo?.fileName}`)}>
+              <Button onClick={() => toast.info(`下载文件: ${previewType === 'script' ? previewTask?.script_file_name : previewTask?.video_file_name}`)}>
                 <Download size={16} />
                 下载
               </Button>

frontend/app/brand/page.tsx

@@ -1,10 +1,9 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import Link from 'next/link'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
+import { Card, CardContent } from '@/components/ui/Card'
 import { Button } from '@/components/ui/Button'
-import { Input } from '@/components/ui/Input'
 import { SuccessTag, PendingTag, WarningTag } from '@/components/ui/Tag'
 import { Modal } from '@/components/ui/Modal'
 import {
@@ -16,123 +15,65 @@ import {
   ChevronRight,
   Calendar,
   Users,
-  Pencil
+  Pencil,
+  Loader2
 } from 'lucide-react'
+import { api } from '@/lib/api'
+import { USE_MOCK } from '@/contexts/AuthContext'
+import { useSSE } from '@/contexts/SSEContext'
+import { useToast } from '@/components/ui/Toast'
+import type { ProjectResponse } from '@/types/project'
 
-// 平台选项 - 抖音用青色(品牌渐变色之一)，深色主题下更清晰
+// ==================== Mock 数据 ====================
-const platformOptions = [
+const mockProjects: ProjectResponse[] = [
-  { id: 'douyin', name: '抖音', icon: '🎵', bgColor: 'bg-[#25F4EE]/15', textColor: 'text-[#25F4EE]', borderColor: 'border-[#25F4EE]/30' },
-  { id: 'xiaohongshu', name: '小红书', icon: '📕', bgColor: 'bg-[#fe2c55]/15', textColor: 'text-[#fe2c55]', borderColor: 'border-[#fe2c55]/30' },
-  { id: 'bilibili', name: 'B站', icon: '📺', bgColor: 'bg-[#00a1d6]/15', textColor: 'text-[#00a1d6]', borderColor: 'border-[#00a1d6]/30' },
-  { id: 'kuaishou', name: '快手', icon: '⚡', bgColor: 'bg-[#ff4906]/15', textColor: 'text-[#ff4906]', borderColor: 'border-[#ff4906]/30' },
-  { id: 'weibo', name: '微博', icon: '🔴', bgColor: 'bg-[#e6162d]/15', textColor: 'text-[#e6162d]', borderColor: 'border-[#e6162d]/30' },
-  { id: 'wechat', name: '微信视频号', icon: '💬', bgColor: 'bg-[#07c160]/15', textColor: 'text-[#07c160]', borderColor: 'border-[#07c160]/30' },
-]
-
-// 项目类型定义
-interface Project {
-  id: string
-  name: string
-  status: string
-  platform: string
-  deadline: string
-  scriptCount: { total: number; passed: number; pending: number; rejected: number }
-  videoCount: { total: number; passed: number; pending: number; rejected: number }
-  agencyCount: number
-  creatorCount: number
-}
-
-// 模拟项目数据
-const initialProjects: Project[] = [
   {
-    id: 'proj-001',
+    id: 'proj-001', name: 'XX品牌618推广', brand_id: 'br-001', brand_name: 'XX品牌',
-    name: 'XX品牌618推广',
+    status: 'active', deadline: '2026-06-18', agencies: [],
-    status: 'active',
+    task_count: 20, created_at: '2026-02-01T00:00:00Z', updated_at: '2026-02-05T00:00:00Z',
-    platform: 'douyin',
-    deadline: '2026-06-18',
-    scriptCount: { total: 20, passed: 15, pending: 3, rejected: 2 },
-    videoCount: { total: 20, passed: 12, pending: 5, rejected: 3 },
-    agencyCount: 3,
-    creatorCount: 15,
   },
   {
-    id: 'proj-002',
+    id: 'proj-002', name: '新品口红系列', brand_id: 'br-001', brand_name: 'XX品牌',
-    name: '新品口红系列',
+    status: 'active', deadline: '2026-03-15', agencies: [],
-    status: 'active',
+    task_count: 12, created_at: '2026-01-15T00:00:00Z', updated_at: '2026-02-01T00:00:00Z',
-    platform: 'xiaohongshu',
-    deadline: '2026-03-15',
-    scriptCount: { total: 12, passed: 10, pending: 1, rejected: 1 },
-    videoCount: { total: 12, passed: 8, pending: 3, rejected: 1 },
-    agencyCount: 2,
-    creatorCount: 8,
   },
   {
-    id: 'proj-003',
+    id: 'proj-003', name: '护肤品秋季活动', brand_id: 'br-001', brand_name: 'XX品牌',
-    name: '护肤品秋季活动',
+    status: 'completed', deadline: '2025-11-30', agencies: [],
-    status: 'completed',
+    task_count: 15, created_at: '2025-08-01T00:00:00Z', updated_at: '2025-11-30T00:00:00Z',
-    platform: 'bilibili',
-    deadline: '2025-11-30',
-    scriptCount: { total: 15, passed: 15, pending: 0, rejected: 0 },
-    videoCount: { total: 15, passed: 15, pending: 0, rejected: 0 },
-    agencyCount: 2,
-    creatorCount: 10,
   },
   {
-    id: 'proj-004',
+    id: 'proj-004', name: '双11预热活动', brand_id: 'br-001', brand_name: 'XX品牌',
-    name: '双11预热活动',
+    status: 'active', deadline: '2026-11-11', agencies: [],
-    status: 'active',
+    task_count: 18, created_at: '2026-01-10T00:00:00Z', updated_at: '2026-02-04T00:00:00Z',
-    platform: 'kuaishou',
-    deadline: '2026-11-11',
-    scriptCount: { total: 18, passed: 8, pending: 6, rejected: 4 },
-    videoCount: { total: 18, passed: 5, pending: 10, rejected: 3 },
-    agencyCount: 4,
-    creatorCount: 20,
   },
 ]
 
-// 获取平台信息
+// ==================== 组件 ====================
-function getPlatformInfo(platformId: string) {
-  return platformOptions.find(p => p.id === platformId)
-}
 
 function StatusTag({ status }: { status: string }) {
   if (status === 'active') return <SuccessTag>进行中</SuccessTag>
   if (status === 'completed') return <PendingTag>已完成</PendingTag>
+  if (status === 'archived') return <WarningTag>已归档</WarningTag>
   return <WarningTag>暂停</WarningTag>
 }
 
-function ProjectCard({ project, onEditDeadline }: { project: Project; onEditDeadline: (project: Project) => void }) {
+function ProjectCard({ project, onEditDeadline }: { project: ProjectResponse; onEditDeadline: (project: ProjectResponse) => void }) {
-  const scriptProgress = Math.round((project.scriptCount.passed / project.scriptCount.total) * 100)
-  const videoProgress = Math.round((project.videoCount.passed / project.videoCount.total) * 100)
-  const platform = getPlatformInfo(project.platform)
-
   return (
     <Link href={`/brand/projects/${project.id}`}>
       <Card className="hover:border-accent-indigo/50 transition-colors cursor-pointer h-full overflow-hidden">
-        {/* 平台顶部条 */}
+        <div className="px-6 py-2 bg-accent-indigo/10 border-b border-accent-indigo/20 flex items-center justify-between">
-        {platform && (
+          <span className="text-sm font-medium text-accent-indigo">{project.brand_name || '品牌项目'}</span>
-          <div className={`px-6 py-2 ${platform.bgColor} border-b ${platform.borderColor} flex items-center justify-between`}>
+          <StatusTag status={project.status} />
-            <div className="flex items-center gap-2">
+        </div>
-              <span className="text-base">{platform.icon}</span>
-              <span className={`text-sm font-medium ${platform.textColor}`}>{platform.name}</span>
-            </div>
-            <StatusTag status={project.status} />
-          </div>
-        )}
         <CardContent className="p-6 space-y-4">
-          {/* 项目头部 */}
           <div>
             <h3 className="text-lg font-semibold text-text-primary truncate">{project.name}</h3>
             <div className="flex items-center gap-2 mt-1 text-sm text-text-secondary">
               <Calendar size={14} />
-              <span>截止 {project.deadline}</span>
+              <span>截止 {project.deadline ? new Date(project.deadline).toLocaleDateString('zh-CN') : '未设置'}</span>
               <button
                 type="button"
-                onClick={(e) => {
+                onClick={(e) => { e.preventDefault(); e.stopPropagation(); onEditDeadline(project) }}
-                  e.preventDefault()
-                  e.stopPropagation()
-                  onEditDeadline(project)
-                }}
                 className="p-1 rounded hover:bg-bg-page transition-colors"
                 title="修改截止日期"
               >
@@ -141,62 +82,14 @@ function ProjectCard({ project, onEditDeadline }: { project: Project; onEditDead
             </div>
           </div>
 
-          {/* 脚本进度 */}
+          <div className="flex items-center justify-between text-sm text-text-secondary">
-          <div>
+            <span>{project.task_count} 个任务</span>
-            <div className="flex items-center justify-between text-sm mb-2">
+            <span>{project.agencies.length} 个代理商</span>
-              <span className="flex items-center gap-2 text-text-secondary">
-                <FileText size={14} />
-                脚本审核
-              </span>
-              <span className="text-text-primary font-medium">
-                {project.scriptCount.passed}/{project.scriptCount.total}
-              </span>
-            </div>
-            <div className="h-2 bg-bg-elevated rounded-full overflow-hidden">
-              <div
-                className="h-full bg-accent-green transition-all"
-                style={{ width: `${scriptProgress}%` }}
-              />
-            </div>
-            <div className="flex gap-4 mt-1 text-xs text-text-tertiary">
-              <span>通过 {project.scriptCount.passed}</span>
-              <span>待审 {project.scriptCount.pending}</span>
-              <span>驳回 {project.scriptCount.rejected}</span>
-            </div>
           </div>
 
-          {/* 视频进度 */}
-          <div>
-            <div className="flex items-center justify-between text-sm mb-2">
-              <span className="flex items-center gap-2 text-text-secondary">
-                <Video size={14} />
-                视频审核
-              </span>
-              <span className="text-text-primary font-medium">
-                {project.videoCount.passed}/{project.videoCount.total}
-              </span>
-            </div>
-            <div className="h-2 bg-bg-elevated rounded-full overflow-hidden">
-              <div
-                className="h-full bg-accent-indigo transition-all"
-                style={{ width: `${videoProgress}%` }}
-              />
-            </div>
-            <div className="flex gap-4 mt-1 text-xs text-text-tertiary">
-              <span>通过 {project.videoCount.passed}</span>
-              <span>待审 {project.videoCount.pending}</span>
-              <span>驳回 {project.videoCount.rejected}</span>
-            </div>
-          </div>
-
-          {/* 参与方统计 */}
           <div className="flex items-center justify-between pt-4 border-t border-border-subtle">
-            <div className="flex items-center gap-4 text-sm text-text-secondary">
+            <div className="text-xs text-text-tertiary">
-              <span className="flex items-center gap-1">
+              创建于 {new Date(project.created_at).toLocaleDateString('zh-CN')}
-                <Users size={14} />
-                {project.agencyCount} 代理商
-              </span>
-              <span>{project.creatorCount} 达人</span>
             </div>
             <ChevronRight size={16} className="text-text-tertiary" />
           </div>
@@ -206,46 +99,99 @@ function ProjectCard({ project, onEditDeadline }: { project: Project; onEditDead
   )
 }
 
+function ProjectsSkeleton() {
+  return (
+    <div className="space-y-6 animate-pulse">
+      <div className="flex items-center justify-between">
+        <div className="h-8 w-32 bg-bg-elevated rounded" />
+        <div className="h-10 w-28 bg-bg-elevated rounded" />
+      </div>
+      <div className="h-10 w-full max-w-md bg-bg-elevated rounded-lg" />
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {[1, 2, 3, 4].map(i => (
+          <div key={i} className="h-56 bg-bg-elevated rounded-xl" />
+        ))}
+      </div>
+    </div>
+  )
+}
+
 export default function BrandProjectsPage() {
   const [searchQuery, setSearchQuery] = useState('')
   const [statusFilter, setStatusFilter] = useState<string>('all')
-  const [platformFilter, setPlatformFilter] = useState<string>('all')
+  const [projects, setProjects] = useState<ProjectResponse[]>([])
-  const [projects, setProjects] = useState<Project[]>(initialProjects)
+  const [loading, setLoading] = useState(true)
+  const toast = useToast()
+  const { subscribe } = useSSE()
 
-  // 编辑截止日期相关状态
+  // 编辑截止日期
   const [showDeadlineModal, setShowDeadlineModal] = useState(false)
-  const [editingProject, setEditingProject] = useState<Project | null>(null)
+  const [editingProject, setEditingProject] = useState<ProjectResponse | null>(null)
   const [newDeadline, setNewDeadline] = useState('')
 
-  // 打开编辑截止日期弹窗
+  const loadProjects = useCallback(async () => {
-  const handleEditDeadline = (project: Project) => {
+    if (USE_MOCK) {
+      setProjects(mockProjects)
+      setLoading(false)
+      return
+    }
+
+    try {
+      const statusParam = statusFilter !== 'all' ? statusFilter : undefined
+      const data = await api.listProjects(1, 50, statusParam)
+      setProjects(data.items)
+    } catch (err) {
+      console.error('Failed to load projects:', err)
+      toast.error('加载项目列表失败')
+    } finally {
+      setLoading(false)
+    }
+  }, [statusFilter, toast])
+
+  useEffect(() => {
+    loadProjects()
+  }, [loadProjects])
+
+  useEffect(() => {
+    const unsub = subscribe('task_updated', () => loadProjects())
+    return unsub
+  }, [subscribe, loadProjects])
+
+  const handleEditDeadline = (project: ProjectResponse) => {
     setEditingProject(project)
-    setNewDeadline(project.deadline)
+    setNewDeadline(project.deadline || '')
     setShowDeadlineModal(true)
   }
 
-  // 保存截止日期
+  const handleSaveDeadline = async () => {
-  const handleSaveDeadline = () => {
     if (!editingProject || !newDeadline) return
 
-    setProjects(prev => prev.map(p =>
+    try {
-      p.id === editingProject.id ? { ...p, deadline: newDeadline } : p
+      if (!USE_MOCK) {
-    ))
+        await api.updateProject(editingProject.id, { deadline: newDeadline })
+      }
+      setProjects(prev => prev.map(p =>
+        p.id === editingProject.id ? { ...p, deadline: newDeadline } : p
+      ))
+      toast.success('截止日期已更新')
+    } catch (err) {
+      console.error('Failed to update deadline:', err)
+      toast.error('更新失败')
+    }
     setShowDeadlineModal(false)
     setEditingProject(null)
-    setNewDeadline('')
   }
 
+  if (loading) return <ProjectsSkeleton />
+
   const filteredProjects = projects.filter(project => {
     const matchesSearch = project.name.toLowerCase().includes(searchQuery.toLowerCase())
     const matchesStatus = statusFilter === 'all' || project.status === statusFilter
-    const matchesPlatform = platformFilter === 'all' || project.platform === platformFilter
+    return matchesSearch && matchesStatus
-    return matchesSearch && matchesStatus && matchesPlatform
   })
 
   return (
     <div className="space-y-6">
-      {/* 页面标题和操作 */}
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold text-text-primary">项目看板</h1>
@@ -259,7 +205,6 @@ export default function BrandProjectsPage() {
         </Link>
       </div>
 
-      {/* 搜索和筛选 */}
       <div className="flex items-center gap-4 flex-wrap">
         <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" />
@@ -273,16 +218,6 @@ export default function BrandProjectsPage() {
         </div>
         <div className="flex items-center gap-2">
           <Filter size={16} className="text-text-tertiary" />
-          <select
-            value={platformFilter}
-            onChange={(e) => setPlatformFilter(e.target.value)}
-            className="px-3 py-2 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
-          >
-            <option value="all">全部平台</option>
-            {platformOptions.map(p => (
-              <option key={p.id} value={p.id}>{p.icon} {p.name}</option>
-            ))}
-          </select>
           <select
             value={statusFilter}
             onChange={(e) => setStatusFilter(e.target.value)}
@@ -291,42 +226,11 @@ export default function BrandProjectsPage() {
             <option value="all">全部状态</option>
             <option value="active">进行中</option>
             <option value="completed">已完成</option>
-            <option value="paused">已暂停</option>
+            <option value="archived">已归档</option>
           </select>
         </div>
       </div>
 
-      {/* 平台快捷筛选 */}
-      <div className="flex items-center gap-2 flex-wrap">
-        <button
-          type="button"
-          onClick={() => setPlatformFilter('all')}
-          className={`px-4 py-2 rounded-xl text-sm font-medium transition-all ${
-            platformFilter === 'all'
-              ? 'bg-accent-indigo text-white shadow-sm'
-              : 'bg-bg-elevated text-text-secondary hover:bg-bg-card border border-transparent hover:border-border-subtle'
-          }`}
-        >
-          全部
-        </button>
-        {platformOptions.map(platform => (
-          <button
-            key={platform.id}
-            type="button"
-            onClick={() => setPlatformFilter(platform.id)}
-            className={`px-4 py-2 rounded-xl text-sm font-medium transition-all flex items-center gap-2 border ${
-              platformFilter === platform.id
-                ? `${platform.bgColor} ${platform.textColor} ${platform.borderColor} shadow-sm`
-                : 'bg-bg-elevated text-text-secondary border-transparent hover:bg-bg-card hover:border-border-subtle'
-            }`}
-          >
-            <span className="text-base">{platform.icon}</span>
-            {platform.name}
-          </button>
-        ))}
-      </div>
-
-      {/* 项目卡片网格 */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         {filteredProjects.map((project) => (
           <ProjectCard key={project.id} project={project} onEditDeadline={handleEditDeadline} />
@@ -348,14 +252,9 @@ export default function BrandProjectsPage() {
         </div>
       )}
 
-      {/* 编辑截止日期弹窗 */}
       <Modal
         isOpen={showDeadlineModal}
-        onClose={() => {
+        onClose={() => { setShowDeadlineModal(false); setEditingProject(null) }}
-          setShowDeadlineModal(false)
-          setEditingProject(null)
-          setNewDeadline('')
-        }}
         title="修改截止日期"
       >
         <div className="space-y-4">
@@ -365,11 +264,8 @@ export default function BrandProjectsPage() {
               <p className="font-medium text-text-primary">{editingProject.name}</p>
             </div>
           )}
-
           <div>
-            <label className="block text-sm font-medium text-text-primary mb-2">
+            <label className="block text-sm font-medium text-text-primary mb-2">新截止日期</label>
-              新截止日期
-            </label>
             <div className="relative">
               <Calendar size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-text-tertiary" />
               <input
@@ -380,25 +276,11 @@ export default function BrandProjectsPage() {
               />
             </div>
           </div>
-
           <div className="flex gap-3 pt-2">
-            <Button
+            <Button variant="secondary" className="flex-1" onClick={() => { setShowDeadlineModal(false); setEditingProject(null) }}>
-              variant="secondary"
-              className="flex-1"
-              onClick={() => {
-                setShowDeadlineModal(false)
-                setEditingProject(null)
-                setNewDeadline('')
-              }}
-            >
               取消
             </Button>
-            <Button
+            <Button variant="primary" className="flex-1" onClick={handleSaveDeadline} disabled={!newDeadline}>
-              variant="primary"
-              className="flex-1"
-              onClick={handleSaveDeadline}
-              disabled={!newDeadline}
-            >
               保存
             </Button>
           </div>

frontend/app/brand/projects/[id]/config/page.tsx

@@ -1,75 +1,83 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { useRouter, useParams } from 'next/navigation'
 import { useToast } from '@/components/ui/Toast'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
+import { Card, CardContent } from '@/components/ui/Card'
 import { Button } from '@/components/ui/Button'
 import { Input } from '@/components/ui/Input'
 import {
   ArrowLeft,
   FileText,
   Shield,
-  Settings,
   Plus,
   Trash2,
   AlertTriangle,
   CheckCircle,
-  Video,
   Bot,
   Users,
   Save,
   Upload,
-  Download,
   ChevronDown,
-  ChevronUp
+  ChevronUp,
+  Loader2
 } from 'lucide-react'
+import { api } from '@/lib/api'
+import { USE_MOCK } from '@/contexts/AuthContext'
+import { useOSSUpload } from '@/hooks/useOSSUpload'
+import type { BriefResponse, BriefCreateRequest, SellingPoint, BlacklistWord, BriefAttachment } from '@/types/brief'
 
-// 模拟数据
+// ==================== Mock 数据 ====================
-const mockData = {
+const mockBrief: BriefResponse = {
-  project: {
+  id: 'bf-001',
-    id: 'proj-001',
+  project_id: 'proj-001',
-    name: 'XX品牌618推广',
+  project_name: 'XX品牌618推广',
-  },
+  selling_points: [
-  brief: {
+    { content: '视频时长：60-90秒', required: true },
-    title: 'XX品牌618推广Brief',
+    { content: '必须展示产品使用过程', required: true },
-    description: '本次618大促营销活动，需要达人围绕夏日护肤、美妆新品进行内容创作。',
+    { content: '需要口播品牌slogan："XX品牌，夏日焕新"', required: true },
-    requirements: [
+    { content: '背景音乐需使用品牌指定曲库', required: false },
-      '视频时长：60-90秒',
+  ],
-      '必须展示产品使用过程',
+  blacklist_words: [
-      '需要口播品牌slogan："XX品牌，夏日焕新"',
+    { word: '最好', reason: '违反广告法' },
-      '背景音乐需使用品牌指定曲库',
+    { word: '第一', reason: '违反广告法' },
+    { word: '绝对', reason: '夸大宣传' },
+    { word: '100%', reason: '夸大宣传' },
+  ],
+  competitors: ['竞品A', '竞品B', '竞品C'],
+  brand_tone: '年轻、活力、清新',
+  min_duration: 60,
+  max_duration: 90,
+  other_requirements: '本次618大促营销活动，需要达人围绕夏日护肤、美妆新品进行内容创作。',
+  attachments: [
+    { id: 'att-001', name: '品牌视觉指南.pdf', url: 'https://example.com/brand-guide.pdf' },
+    { id: 'att-002', name: '产品资料包.zip', url: 'https://example.com/product-pack.zip' },
+  ],
+  created_at: '2026-02-01T00:00:00Z',
+  updated_at: '2026-02-05T00:00:00Z',
+}
+
+const mockRules = {
+  aiReview: {
+    enabled: true,
+    strictness: 'medium',
+    checkItems: [
+      { id: 'forbidden_words', name: '违禁词检测', enabled: true },
+      { id: 'competitor', name: '竞品提及检测', enabled: true },
+      { id: 'brand_tone', name: '品牌调性检测', enabled: true },
+      { id: 'duration', name: '视频时长检测', enabled: true },
+      { id: 'music', name: '背景音乐检测', enabled: false },
     ],
-    keywords: ['夏日护肤', '清爽', '补水', '防晒', '焕新'],
-    forbiddenWords: ['最好', '第一', '绝对', '100%'],
-    referenceLinks: [
-      { title: '品牌视觉指南', url: 'https://example.com/brand-guide.pdf' },
-      { title: '产品资料包', url: 'https://example.com/product-pack.zip' },
-    ],
-    deadline: '2026-06-10',
   },
-  rules: {
+  manualReview: {
-    aiReview: {
+    scriptRequired: true,
-      enabled: true,
+    videoRequired: true,
-      strictness: 'medium', // low, medium, high
+    agencyCanApprove: true,
-      checkItems: [
+    brandFinalReview: true,
-        { id: 'forbidden_words', name: '违禁词检测', enabled: true },
+  },
-        { id: 'competitor', name: '竞品提及检测', enabled: true },
+  appealRules: {
-        { id: 'brand_tone', name: '品牌调性检测', enabled: true },
+    maxAppeals: 3,
-        { id: 'duration', name: '视频时长检测', enabled: true },
+    appealDeadline: 48,
-        { id: 'music', name: '背景音乐检测', enabled: false },
-      ],
-    },
-    manualReview: {
-      scriptRequired: true,
-      videoRequired: true,
-      agencyCanApprove: true, // 代理商是否有终审权限
-      brandFinalReview: true, // 品牌方是否需要终审
-    },
-    appealRules: {
-      maxAppeals: 3, // 最大申诉次数
-      appealDeadline: 48, // 申诉处理时限（小时）
-    },
   },
 }
 
@@ -80,64 +88,203 @@ const strictnessOptions = [
   { value: 'high', label: '严格', description: '严格检测，可能有较多误判' },
 ]
 
+function ConfigSkeleton() {
+  return (
+    <div className="space-y-6 animate-pulse">
+      <div className="flex items-center gap-4">
+        <div className="h-10 w-10 bg-bg-elevated rounded-lg" />
+        <div className="space-y-2">
+          <div className="h-7 w-48 bg-bg-elevated rounded" />
+          <div className="h-4 w-32 bg-bg-elevated rounded" />
+        </div>
+      </div>
+      {[1, 2, 3, 4].map(i => (
+        <div key={i} className="h-16 bg-bg-elevated rounded-xl" />
+      ))}
+    </div>
+  )
+}
+
 export default function ProjectConfigPage() {
   const router = useRouter()
   const params = useParams()
   const toast = useToast()
   const projectId = params.id as string
+  const { upload, isUploading, progress: uploadProgress } = useOSSUpload('general')
+
+  // Brief state
+  const [briefExists, setBriefExists] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [projectName, setProjectName] = useState('')
+
+  // Brief form fields
+  const [brandTone, setBrandTone] = useState('')
+  const [otherRequirements, setOtherRequirements] = useState('')
+  const [minDuration, setMinDuration] = useState<number | undefined>()
+  const [maxDuration, setMaxDuration] = useState<number | undefined>()
+  const [sellingPoints, setSellingPoints] = useState<SellingPoint[]>([])
+  const [blacklistWords, setBlacklistWords] = useState<BlacklistWord[]>([])
+  const [competitors, setCompetitors] = useState<string[]>([])
+  const [attachments, setAttachments] = useState<BriefAttachment[]>([])
+
+  // Rules state (local only — no per-project backend API yet)
+  const [rules, setRules] = useState(mockRules)
 
-  const [brief, setBrief] = useState(mockData.brief)
-  const [rules, setRules] = useState(mockData.rules)
   const [isSaving, setIsSaving] = useState(false)
   const [activeSection, setActiveSection] = useState<string | null>('brief')
 
-  // 新增需求
+  // Input fields
-  const [newRequirement, setNewRequirement] = useState('')
+  const [newSellingPoint, setNewSellingPoint] = useState('')
-  // 新增关键词
+  const [newBlacklistWord, setNewBlacklistWord] = useState('')
-  const [newKeyword, setNewKeyword] = useState('')
+  const [newBlacklistReason, setNewBlacklistReason] = useState('')
-  // 新增违禁词
+  const [newCompetitor, setNewCompetitor] = useState('')
-  const [newForbiddenWord, setNewForbiddenWord] = useState('')
 
-  const handleSave = async () => {
+  const populateBrief = (data: BriefResponse) => {
+    setProjectName(data.project_name || '')
+    setBrandTone(data.brand_tone || '')
+    setOtherRequirements(data.other_requirements || '')
+    setMinDuration(data.min_duration ?? undefined)
+    setMaxDuration(data.max_duration ?? undefined)
+    setSellingPoints(data.selling_points || [])
+    setBlacklistWords(data.blacklist_words || [])
+    setCompetitors(data.competitors || [])
+    setAttachments(data.attachments || [])
+  }
+
+  const loadBrief = useCallback(async () => {
+    if (USE_MOCK) {
+      populateBrief(mockBrief)
+      setBriefExists(true)
+      setLoading(false)
+      return
+    }
+
+    try {
+      const data = await api.getBrief(projectId)
+      populateBrief(data)
+      setBriefExists(true)
+    } catch (err: any) {
+      if (err?.response?.status === 404) {
+        setBriefExists(false)
+      } else {
+        console.error('Failed to load brief:', err)
+        toast.error('加载Brief失败')
+      }
+    } finally {
+      setLoading(false)
+    }
+  }, [projectId, toast])
+
+  useEffect(() => {
+    loadBrief()
+  }, [loadBrief])
+
+  const handleSaveBrief = async () => {
     setIsSaving(true)
-    await new Promise(resolve => setTimeout(resolve, 1000))
+    try {
-    setIsSaving(false)
+      const briefData: BriefCreateRequest = {
-    toast.success('配置已保存')
+        selling_points: sellingPoints,
-  }
+        blacklist_words: blacklistWords,
+        competitors,
+        brand_tone: brandTone || undefined,
+        min_duration: minDuration,
+        max_duration: maxDuration,
+        other_requirements: otherRequirements || undefined,
+        attachments,
+      }
 
-  const addRequirement = () => {
+      if (USE_MOCK) {
-    if (newRequirement.trim()) {
+        await new Promise(resolve => setTimeout(resolve, 1000))
-      setBrief({ ...brief, requirements: [...brief.requirements, newRequirement.trim()] })
+      } else if (briefExists) {
-      setNewRequirement('')
+        await api.updateBrief(projectId, briefData)
+      } else {
+        await api.createBrief(projectId, briefData)
+        setBriefExists(true)
+      }
+
+      toast.success('Brief配置已保存')
+    } catch (err) {
+      console.error('Failed to save brief:', err)
+      toast.error('保存失败，请重试')
+    } finally {
+      setIsSaving(false)
     }
   }
 
-  const removeRequirement = (index: number) => {
+  // Selling points
-    setBrief({ ...brief, requirements: brief.requirements.filter((_, i) => i !== index) })
+  const addSellingPoint = () => {
-  }
+    if (newSellingPoint.trim()) {
-
+      setSellingPoints([...sellingPoints, { content: newSellingPoint.trim(), required: false }])
-  const addKeyword = () => {
+      setNewSellingPoint('')
-    if (newKeyword.trim() && !brief.keywords.includes(newKeyword.trim())) {
-      setBrief({ ...brief, keywords: [...brief.keywords, newKeyword.trim()] })
-      setNewKeyword('')
     }
   }
 
-  const removeKeyword = (keyword: string) => {
+  const removeSellingPoint = (index: number) => {
-    setBrief({ ...brief, keywords: brief.keywords.filter(k => k !== keyword) })
+    setSellingPoints(sellingPoints.filter((_, i) => i !== index))
   }
 
-  const addForbiddenWord = () => {
+  const toggleSellingPointRequired = (index: number) => {
-    if (newForbiddenWord.trim() && !brief.forbiddenWords.includes(newForbiddenWord.trim())) {
+    setSellingPoints(sellingPoints.map((sp, i) =>
-      setBrief({ ...brief, forbiddenWords: [...brief.forbiddenWords, newForbiddenWord.trim()] })
+      i === index ? { ...sp, required: !sp.required } : sp
-      setNewForbiddenWord('')
+    ))
+  }
+
+  // Blacklist words
+  const addBlacklistWord = () => {
+    if (newBlacklistWord.trim()) {
+      setBlacklistWords([...blacklistWords, { word: newBlacklistWord.trim(), reason: newBlacklistReason.trim() || '品牌规范' }])
+      setNewBlacklistWord('')
+      setNewBlacklistReason('')
     }
   }
 
-  const removeForbiddenWord = (word: string) => {
+  const removeBlacklistWord = (index: number) => {
-    setBrief({ ...brief, forbiddenWords: brief.forbiddenWords.filter(w => w !== word) })
+    setBlacklistWords(blacklistWords.filter((_, i) => i !== index))
   }
 
+  // Competitors
+  const addCompetitorItem = () => {
+    if (newCompetitor.trim() && !competitors.includes(newCompetitor.trim())) {
+      setCompetitors([...competitors, newCompetitor.trim()])
+      setNewCompetitor('')
+    }
+  }
+
+  const removeCompetitor = (name: string) => {
+    setCompetitors(competitors.filter(c => c !== name))
+  }
+
+  // Attachment upload
+  const handleAttachmentUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    if (USE_MOCK) {
+      setAttachments([...attachments, {
+        id: `att-${Date.now()}`,
+        name: file.name,
+        url: `mock://${file.name}`,
+      }])
+      return
+    }
+
+    try {
+      const result = await upload(file)
+      setAttachments([...attachments, {
+        id: `att-${Date.now()}`,
+        name: file.name,
+        url: result.url,
+      }])
+    } catch {
+      toast.error('文件上传失败')
+    }
+  }
+
+  const removeAttachment = (id: string) => {
+    setAttachments(attachments.filter(a => a.id !== id))
+  }
+
+  // AI check item toggles (local state only)
   const toggleAiCheckItem = (itemId: string) => {
     setRules({
       ...rules,
@@ -168,6 +315,8 @@ export default function ProjectConfigPage() {
     </button>
   )
 
+  if (loading) return <ConfigSkeleton />
+
   return (
     <div className="space-y-6">
       {/* 顶部导航 */}
@@ -183,12 +332,17 @@ export default function ProjectConfigPage() {
           <div>
             <h1 className="text-2xl font-bold text-text-primary">Brief和规则配置</h1>
             <p className="text-sm text-text-secondary mt-0.5">
-              {mockData.project.name}
+              {projectName || `项目 ${projectId}`}
             </p>
           </div>
         </div>
-        <Button variant="primary" onClick={handleSave} disabled={isSaving}>
+        <Button variant="primary" onClick={handleSaveBrief} disabled={isSaving}>
-          {isSaving ? '保存中...' : (
+          {isSaving ? (
+            <>
+              <Loader2 size={16} className="animate-spin" />
+              保存中...
+            </>
+          ) : (
             <>
               <Save size={16} />
               保存配置
@@ -202,45 +356,67 @@ export default function ProjectConfigPage() {
         <SectionHeader title="Brief配置" icon={FileText} section="brief" />
         {activeSection === 'brief' && (
           <CardContent className="space-y-6 pt-0">
-            {/* 基本信息 */}
+            {/* 品牌调性 + 视频时长 */}
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               <div>
-                <label className="text-sm text-text-secondary mb-1.5 block">Brief标题</label>
+                <label className="text-sm text-text-secondary mb-1.5 block">品牌调性</label>
                 <Input
-                  value={brief.title}
+                  value={brandTone}
-                  onChange={(e) => setBrief({ ...brief, title: e.target.value })}
+                  onChange={(e) => setBrandTone(e.target.value)}
+                  placeholder="例如：年轻、活力、清新"
                 />
               </div>
               <div>
-                <label className="text-sm text-text-secondary mb-1.5 block">截止日期</label>
+                <label className="text-sm text-text-secondary mb-1.5 block">视频时长限制（秒）</label>
-                <Input
+                <div className="flex items-center gap-2">
-                  type="date"
+                  <Input
-                  value={brief.deadline}
+                    type="number"
-                  onChange={(e) => setBrief({ ...brief, deadline: e.target.value })}
+                    min={0}
-                />
+                    value={minDuration ?? ''}
+                    onChange={(e) => setMinDuration(e.target.value ? parseInt(e.target.value) : undefined)}
+                    placeholder="最短"
+                  />
+                  <span className="text-text-tertiary">~</span>
+                  <Input
+                    type="number"
+                    min={0}
+                    value={maxDuration ?? ''}
+                    onChange={(e) => setMaxDuration(e.target.value ? parseInt(e.target.value) : undefined)}
+                    placeholder="最长"
+                  />
+                </div>
               </div>
             </div>
 
+            {/* 其他要求 */}
             <div>
-              <label className="text-sm text-text-secondary mb-1.5 block">项目描述</label>
+              <label className="text-sm text-text-secondary mb-1.5 block">其他要求</label>
               <textarea
-                value={brief.description}
+                value={otherRequirements}
-                onChange={(e) => setBrief({ ...brief, description: e.target.value })}
+                onChange={(e) => setOtherRequirements(e.target.value)}
+                placeholder="简要描述项目要求..."
                 className="w-full h-24 p-3 rounded-xl bg-bg-elevated border border-border-subtle text-text-primary resize-none focus:outline-none focus:ring-2 focus:ring-accent-indigo"
               />
             </div>
 
-            {/* 创作要求 */}
+            {/* 卖点 / 创作要求 */}
             <div>
-              <label className="text-sm text-text-secondary mb-2 block">创作要求</label>
+              <label className="text-sm text-text-secondary mb-2 block">卖点 / 创作要求</label>
               <div className="space-y-2">
-                {brief.requirements.map((req, index) => (
+                {sellingPoints.map((sp, index) => (
                   <div key={index} className="flex items-center gap-2 p-3 rounded-lg bg-bg-elevated">
-                    <CheckCircle size={16} className="text-accent-green flex-shrink-0" />
-                    <span className="flex-1 text-text-primary">{req}</span>
                     <button
                       type="button"
-                      onClick={() => removeRequirement(index)}
+                      onClick={() => toggleSellingPointRequired(index)}
+                      title={sp.required ? '必选卖点（点击切换）' : '可选卖点（点击切换）'}
+                    >
+                      <CheckCircle size={16} className={sp.required ? 'text-accent-green' : 'text-text-tertiary'} />
+                    </button>
+                    <span className="flex-1 text-text-primary">{sp.content}</span>
+                    {sp.required && <span className="text-xs text-accent-green">必选</span>}
+                    <button
+                      type="button"
+                      onClick={() => removeSellingPoint(index)}
                       className="p-1 rounded hover:bg-bg-page text-text-tertiary hover:text-accent-coral transition-colors"
                     >
                       <Trash2 size={14} />
@@ -249,67 +425,72 @@ export default function ProjectConfigPage() {
                 ))}
                 <div className="flex gap-2">
                   <Input
-                    value={newRequirement}
+                    value={newSellingPoint}
-                    onChange={(e) => setNewRequirement(e.target.value)}
+                    onChange={(e) => setNewSellingPoint(e.target.value)}
-                    placeholder="添加新的创作要求"
+                    placeholder="添加卖点或创作要求"
-                    onKeyDown={(e) => e.key === 'Enter' && addRequirement()}
+                    onKeyDown={(e) => e.key === 'Enter' && addSellingPoint()}
                   />
-                  <Button variant="secondary" onClick={addRequirement}>
+                  <Button variant="secondary" onClick={addSellingPoint}>
                     <Plus size={16} />
                   </Button>
                 </div>
               </div>
             </div>
 
-            {/* 关键词 */}
+            {/* 禁止词 */}
             <div>
-              <label className="text-sm text-text-secondary mb-2 block">推荐关键词</label>
+              <label className="text-sm text-text-secondary mb-2 block flex items-center gap-2">
-              <div className="flex flex-wrap gap-2 mb-3">
+                <AlertTriangle size={14} className="text-accent-coral" />
-                {brief.keywords.map((keyword) => (
+                禁止词列表
-                  <span
+              </label>
-                    key={keyword}
+              <div className="space-y-2 mb-3">
-                    className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full bg-accent-indigo/15 text-accent-indigo text-sm"
+                {blacklistWords.map((bw, index) => (
-                  >
+                  <div key={index} className="flex items-center gap-2 p-3 rounded-lg bg-bg-elevated">
-                    {keyword}
+                    <span className="text-accent-coral font-medium">{bw.word}</span>
+                    {bw.reason && <span className="text-xs text-text-tertiary">— {bw.reason}</span>}
+                    <div className="flex-1" />
                     <button
                       type="button"
-                      onClick={() => removeKeyword(keyword)}
+                      onClick={() => removeBlacklistWord(index)}
-                      className="hover:text-accent-coral transition-colors"
+                      className="p-1 rounded hover:bg-bg-page text-text-tertiary hover:text-accent-coral transition-colors"
                     >
-                      ×
+                      <Trash2 size={14} />
                     </button>
-                  </span>
+                  </div>
                 ))}
               </div>
               <div className="flex gap-2">
                 <Input
-                  value={newKeyword}
+                  value={newBlacklistWord}
-                  onChange={(e) => setNewKeyword(e.target.value)}
+                  onChange={(e) => setNewBlacklistWord(e.target.value)}
-                  placeholder="添加关键词"
+                  placeholder="禁止词"
-                  onKeyDown={(e) => e.key === 'Enter' && addKeyword()}
+                  onKeyDown={(e) => e.key === 'Enter' && addBlacklistWord()}
                 />
-                <Button variant="secondary" onClick={addKeyword}>
+                <Input
+                  value={newBlacklistReason}
+                  onChange={(e) => setNewBlacklistReason(e.target.value)}
+                  placeholder="原因（可选）"
+                  onKeyDown={(e) => e.key === 'Enter' && addBlacklistWord()}
+                />
+                <Button variant="secondary" onClick={addBlacklistWord}>
                   <Plus size={16} />
                 </Button>
               </div>
             </div>
 
-            {/* 违禁词 */}
+            {/* 竞品品牌 */}
             <div>
-              <label className="text-sm text-text-secondary mb-2 block flex items-center gap-2">
+              <label className="text-sm text-text-secondary mb-2 block">竞品品牌</label>
-                <AlertTriangle size={14} className="text-accent-coral" />
-                违禁词列表
-              </label>
               <div className="flex flex-wrap gap-2 mb-3">
-                {brief.forbiddenWords.map((word) => (
+                {competitors.map((name) => (
                   <span
-                    key={word}
+                    key={name}
                     className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full bg-accent-coral/15 text-accent-coral text-sm"
                   >
-                    {word}
+                    {name}
                     <button
                       type="button"
-                      onClick={() => removeForbiddenWord(word)}
+                      onClick={() => removeCompetitor(name)}
                       className="hover:text-accent-coral/70 transition-colors"
                     >
                       ×
@@ -319,12 +500,12 @@ export default function ProjectConfigPage() {
               </div>
               <div className="flex gap-2">
                 <Input
-                  value={newForbiddenWord}
+                  value={newCompetitor}
-                  onChange={(e) => setNewForbiddenWord(e.target.value)}
+                  onChange={(e) => setNewCompetitor(e.target.value)}
-                  placeholder="添加违禁词"
+                  placeholder="添加竞品品牌名称"
-                  onKeyDown={(e) => e.key === 'Enter' && addForbiddenWord()}
+                  onKeyDown={(e) => e.key === 'Enter' && addCompetitorItem()}
                 />
-                <Button variant="secondary" onClick={addForbiddenWord}>
+                <Button variant="secondary" onClick={addCompetitorItem}>
                   <Plus size={16} />
                 </Button>
               </div>
@@ -334,24 +515,39 @@ export default function ProjectConfigPage() {
             <div>
               <label className="text-sm text-text-secondary mb-2 block">参考资料</label>
               <div className="space-y-2">
-                {brief.referenceLinks.map((link, index) => (
+                {attachments.map((att) => (
-                  <div key={index} className="flex items-center gap-3 p-3 rounded-lg bg-bg-elevated">
+                  <div key={att.id} className="flex items-center gap-3 p-3 rounded-lg bg-bg-elevated">
                     <FileText size={16} className="text-accent-indigo" />
-                    <span className="flex-1 text-text-primary">{link.title}</span>
+                    <span className="flex-1 text-text-primary">{att.name}</span>
-                    <a
+                    {att.size && <span className="text-xs text-text-tertiary">{att.size}</span>}
-                      href={link.url}
+                    <button
-                      target="_blank"
+                      type="button"
-                      rel="noopener noreferrer"
+                      onClick={() => removeAttachment(att.id)}
-                      className="text-accent-indigo hover:underline text-sm"
+                      className="p-1 rounded hover:bg-bg-page text-text-tertiary hover:text-accent-coral transition-colors"
                     >
-                      下载
+                      <Trash2 size={14} />
-                    </a>
+                    </button>
                   </div>
                 ))}
-                <Button variant="secondary" className="w-full">
+                <label className="flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg border border-border-subtle bg-bg-elevated text-text-primary hover:bg-bg-page transition-colors cursor-pointer w-full text-sm">
-                  <Upload size={16} />
+                  {isUploading ? (
-                  上传参考资料
+                    <>
-                </Button>
+                      <Loader2 size={16} className="animate-spin" />
+                      上传中 {uploadProgress}%
+                    </>
+                  ) : (
+                    <>
+                      <Upload size={16} />
+                      上传参考资料
+                    </>
+                  )}
+                  <input
+                    type="file"
+                    onChange={handleAttachmentUpload}
+                    className="hidden"
+                    disabled={isUploading}
+                  />
+                </label>
               </div>
             </div>
           </CardContent>

frontend/app/brand/projects/[id]/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { useRouter, useParams } from 'next/navigation'
 import Link from 'next/link'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
@@ -8,6 +8,7 @@ import { Button } from '@/components/ui/Button'
 import { Input } from '@/components/ui/Input'
 import { Modal } from '@/components/ui/Modal'
 import { SuccessTag, PendingTag, ErrorTag } from '@/components/ui/Tag'
+import { useToast } from '@/components/ui/Toast'
 import {
   ArrowLeft,
   Calendar,
@@ -25,51 +26,69 @@ import {
   MoreHorizontal,
   Trash2,
   Check,
-  Pencil
+  Pencil,
+  Loader2
 } from 'lucide-react'
 import { getPlatformInfo } from '@/lib/platforms'
+import { api } from '@/lib/api'
+import { USE_MOCK } from '@/contexts/AuthContext'
+import { useSSE } from '@/contexts/SSEContext'
+import type { ProjectResponse } from '@/types/project'
+import type { TaskResponse } from '@/types/task'
+import type { AgencyDetail } from '@/types/organization'
 
-// 模拟项目详情数据
+// ==================== Mock 数据 ====================
-const mockProject = {
+const mockProject: ProjectResponse = {
-  id: 'proj-001',
+  id: 'proj-001', name: 'XX品牌618推广', brand_id: 'br-001', brand_name: 'XX护肤品牌',
-  name: 'XX品牌618推广',
+  description: '618大促活动营销内容审核项目', status: 'active', deadline: '2026-06-18',
-  platform: 'douyin',
-  status: 'active',
-  deadline: '2026-06-18',
-  createdAt: '2026-02-01',
-  description: '618大促活动营销内容审核项目',
-  stats: {
-    scriptTotal: 20,
-    scriptPassed: 15,
-    scriptPending: 3,
-    scriptRejected: 2,
-    videoTotal: 20,
-    videoPassed: 12,
-    videoPending: 5,
-    videoRejected: 3,
-  },
   agencies: [
-    { id: 'AG789012', name: '星耀传媒', creatorCount: 8, passRate: 92 },
+    { id: 'AG789012', name: '星耀传媒' },
-    { id: 'AG456789', name: '创意无限', creatorCount: 5, passRate: 88 },
+    { id: 'AG456789', name: '创意无限' },
-  ],
-  recentTasks: [
-    { id: 'task-001', type: 'video', creatorName: '小美护肤', agencyId: 'AG789012', agencyName: '星耀传媒', status: 'pending', submittedAt: '2026-02-06 14:30' },
-    { id: 'task-002', type: 'script', creatorName: '美妆Lisa', agencyId: 'AG789012', agencyName: '星耀传媒', status: 'approved', submittedAt: '2026-02-06 12:15' },
-    { id: 'task-003', type: 'video', creatorName: '健身王', agencyId: 'AG456789', agencyName: '创意无限', status: 'rejected', submittedAt: '2026-02-06 10:00' },
-    { id: 'task-004', type: 'script', creatorName: '时尚达人', agencyId: 'AG456789', agencyName: '创意无限', status: 'pending', submittedAt: '2026-02-05 16:45' },
   ],
+  task_count: 20,
+  created_at: '2026-02-01T00:00:00Z', updated_at: '2026-02-06T00:00:00Z',
 }
 
-// 模拟品牌方已添加的代理商（来自代理商管理）
+const mockTasks: TaskResponse[] = [
-const mockManagedAgencies = [
+  {
-  { id: 'AG789012', name: '星耀传媒', companyName: '上海星耀文化传媒有限公司' },
+    id: 'task-001', name: '夏日护肤推广', sequence: 1,
-  { id: 'AG456789', name: '创意无限', companyName: '深圳创意无限广告有限公司' },
+    stage: 'video_brand_review',
-  { id: 'AG123456', name: '美妆达人MCN', companyName: '杭州美妆达人网络科技有限公司' },
+    project: { id: 'proj-001', name: 'XX品牌618推广' },
-  { id: 'AG111111', name: '蓝海科技', companyName: '北京蓝海数字科技有限公司' },
+    agency: { id: 'AG789012', name: '星耀传媒' },
-  { id: 'AG222222', name: '云创网络', companyName: '杭州云创网络技术有限公司' },
+    creator: { id: 'cr-001', name: '小美护肤' },
-  { id: 'AG333333', name: '天府传媒', companyName: '成都天府传媒集团有限公司' },
+    appeal_count: 0, is_appeal: false,
+    created_at: '2026-02-06T14:30:00Z', updated_at: '2026-02-06T14:30:00Z',
+  },
+  {
+    id: 'task-002', name: '新品口红试色', sequence: 2,
+    stage: 'completed',
+    project: { id: 'proj-001', name: 'XX品牌618推广' },
+    agency: { id: 'AG789012', name: '星耀传媒' },
+    creator: { id: 'cr-002', name: '美妆Lisa' },
+    appeal_count: 0, is_appeal: false,
+    created_at: '2026-02-06T12:15:00Z', updated_at: '2026-02-06T12:15:00Z',
+  },
+  {
+    id: 'task-003', name: '健身器材推荐', sequence: 3,
+    stage: 'rejected',
+    project: { id: 'proj-001', name: 'XX品牌618推广' },
+    agency: { id: 'AG456789', name: '创意无限' },
+    creator: { id: 'cr-003', name: '健身王' },
+    appeal_count: 0, is_appeal: false,
+    created_at: '2026-02-06T10:00:00Z', updated_at: '2026-02-06T10:00:00Z',
+  },
 ]
 
+const mockManagedAgencies: AgencyDetail[] = [
+  { id: 'AG789012', name: '星耀传媒', force_pass_enabled: true, contact_name: '张经理' },
+  { id: 'AG456789', name: '创意无限', force_pass_enabled: false, contact_name: '李总' },
+  { id: 'AG123456', name: '美妆达人MCN', force_pass_enabled: false },
+  { id: 'AG111111', name: '蓝海科技', force_pass_enabled: true },
+  { id: 'AG222222', name: '云创网络', force_pass_enabled: false },
+]
+
+// ==================== 组件 ====================
+
 function StatCard({ title, value, icon: Icon, color }: { title: string; value: number | string; icon: React.ElementType; color: string }) {
   return (
     <Card>
@@ -88,98 +107,169 @@ function StatCard({ title, value, icon: Icon, color }: { title: string; value: n
   )
 }
 
-function TaskStatusTag({ status }: { status: string }) {
+function TaskStatusTag({ stage }: { stage: string }) {
-  switch (status) {
+  if (stage === 'completed') return <SuccessTag>已通过</SuccessTag>
-    case 'approved': return <SuccessTag>已通过</SuccessTag>
+  if (stage === 'rejected') return <ErrorTag>已驳回</ErrorTag>
-    case 'pending': return <PendingTag>待审核</PendingTag>
+  if (stage.includes('review')) return <PendingTag>审核中</PendingTag>
-    case 'rejected': return <ErrorTag>已驳回</ErrorTag>
+  return <PendingTag>进行中</PendingTag>
-    default: return <PendingTag>未知</PendingTag>
+}
-  }
+
+function DetailSkeleton() {
+  return (
+    <div className="space-y-6 animate-pulse">
+      <div className="flex items-center gap-4">
+        <div className="w-10 h-10 bg-bg-elevated rounded-full" />
+        <div className="space-y-2">
+          <div className="h-7 w-48 bg-bg-elevated rounded" />
+          <div className="h-4 w-64 bg-bg-elevated rounded" />
+        </div>
+      </div>
+      <div className="h-20 bg-bg-elevated rounded-xl" />
+      <div className="grid grid-cols-4 gap-4">
+        {[1, 2, 3, 4].map(i => <div key={i} className="h-20 bg-bg-elevated rounded-xl" />)}
+      </div>
+      <div className="grid grid-cols-3 gap-6">
+        <div className="col-span-2 h-48 bg-bg-elevated rounded-xl" />
+        <div className="h-48 bg-bg-elevated rounded-xl" />
+      </div>
+    </div>
+  )
 }
 
 export default function ProjectDetailPage() {
   const router = useRouter()
   const params = useParams()
+  const toast = useToast()
   const projectId = params.id as string
-  const [project, setProject] = useState(mockProject)
+  const { subscribe } = useSSE()
 
-  // 添加代理商相关状态
+  const [project, setProject] = useState<ProjectResponse | null>(null)
+  const [recentTasks, setRecentTasks] = useState<TaskResponse[]>([])
+  const [managedAgencies, setManagedAgencies] = useState<AgencyDetail[]>([])
+  const [loading, setLoading] = useState(true)
+
+  // UI states
   const [showAddModal, setShowAddModal] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
   const [selectedAgencies, setSelectedAgencies] = useState<string[]>([])
-
-  // 代理商操作菜单
   const [activeAgencyMenu, setActiveAgencyMenu] = useState<string | null>(null)
-
-  // 删除确认
   const [showDeleteModal, setShowDeleteModal] = useState(false)
-  const [agencyToDelete, setAgencyToDelete] = useState<typeof project.agencies[0] | null>(null)
+  const [agencyToDelete, setAgencyToDelete] = useState<{ id: string; name: string } | null>(null)
-
-  // 编辑截止日期
   const [showDeadlineModal, setShowDeadlineModal] = useState(false)
-  const [newDeadline, setNewDeadline] = useState(project.deadline)
+  const [newDeadline, setNewDeadline] = useState('')
+  const [submitting, setSubmitting] = useState(false)
 
-  // 保存截止日期
+  const loadData = useCallback(async () => {
-  const handleSaveDeadline = () => {
+    if (USE_MOCK) {
-    if (!newDeadline) return
+      setProject(mockProject)
-    setProject({ ...project, deadline: newDeadline })
+      setRecentTasks(mockTasks)
-    setShowDeadlineModal(false)
+      setManagedAgencies(mockManagedAgencies)
-  }
+      setLoading(false)
+      return
+    }
 
-  const scriptPassRate = Math.round((project.stats.scriptPassed / project.stats.scriptTotal) * 100)
+    try {
-  const videoPassRate = Math.round((project.stats.videoPassed / project.stats.videoTotal) * 100)
+      const [projectData, tasksData, agenciesData] = await Promise.all([
+        api.getProject(projectId),
+        api.listTasks(1, 10),
+        api.listBrandAgencies(),
+      ])
+      setProject(projectData)
+      setRecentTasks(tasksData.items.filter(t => t.project.id === projectId).slice(0, 5))
+      setManagedAgencies(agenciesData.items)
+    } catch (err) {
+      console.error('Failed to load project:', err)
+      toast.error('加载项目详情失败')
+    } finally {
+      setLoading(false)
+    }
+  }, [projectId, toast])
 
-  // 过滤可添加的代理商（排除已在项目中的）
+  useEffect(() => {
-  const availableAgencies = mockManagedAgencies.filter(
+    loadData()
+  }, [loadData])
+
+  useEffect(() => {
+    const unsub = subscribe('task_updated', () => loadData())
+    return unsub
+  }, [subscribe, loadData])
+
+  if (loading || !project) return <DetailSkeleton />
+
+  const availableAgencies = managedAgencies.filter(
     agency => !project.agencies.some(a => a.id === agency.id)
   )
 
-  // 搜索过滤
   const filteredAgencies = availableAgencies.filter(agency =>
     searchQuery === '' ||
     agency.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    agency.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    agency.id.toLowerCase().includes(searchQuery.toLowerCase())
-    agency.companyName.toLowerCase().includes(searchQuery.toLowerCase())
   )
 
-  // 切换选择
   const toggleSelectAgency = (agencyId: string) => {
     setSelectedAgencies(prev =>
-      prev.includes(agencyId)
+      prev.includes(agencyId) ? prev.filter(id => id !== agencyId) : [...prev, agencyId]
-        ? prev.filter(id => id !== agencyId)
-        : [...prev, agencyId]
     )
   }
 
-  // 确认添加
+  const handleAddAgencies = async () => {
-  const handleAddAgencies = () => {
+    setSubmitting(true)
-    const newAgencies = mockManagedAgencies
+    try {
-      .filter(a => selectedAgencies.includes(a.id))
+      if (!USE_MOCK) {
-      .map(a => ({ id: a.id, name: a.name, creatorCount: 0, passRate: 0 }))
+        await api.assignAgencies(projectId, selectedAgencies)
-
+      }
-    setProject({
+      const newAgencies = managedAgencies
-      ...project,
+        .filter(a => selectedAgencies.includes(a.id))
-      agencies: [...project.agencies, ...newAgencies]
+        .map(a => ({ id: a.id, name: a.name }))
-    })
+      setProject({ ...project, agencies: [...project.agencies, ...newAgencies] })
-
+      toast.success('代理商已添加')
-    setShowAddModal(false)
+    } catch (err) {
-    setSelectedAgencies([])
+      console.error('Failed to add agencies:', err)
-    setSearchQuery('')
+      toast.error('添加失败')
+    } finally {
+      setSubmitting(false)
+      setShowAddModal(false)
+      setSelectedAgencies([])
+      setSearchQuery('')
+    }
   }
 
-  // 移除代理商
   const handleRemoveAgency = async () => {
     if (!agencyToDelete) return
-
+    setSubmitting(true)
-    setProject({
+    try {
-      ...project,
+      if (!USE_MOCK) {
-      agencies: project.agencies.filter(a => a.id !== agencyToDelete.id)
+        await api.removeAgencyFromProject(projectId, agencyToDelete.id)
-    })
+      }
-    setShowDeleteModal(false)
+      setProject({ ...project, agencies: project.agencies.filter(a => a.id !== agencyToDelete.id) })
-    setAgencyToDelete(null)
+      toast.success('代理商已移除')
+    } catch (err) {
+      console.error('Failed to remove agency:', err)
+      toast.error('移除失败')
+    } finally {
+      setSubmitting(false)
+      setShowDeleteModal(false)
+      setAgencyToDelete(null)
+    }
   }
 
-  const platform = getPlatformInfo(project.platform)
+  const handleSaveDeadline = async () => {
+    if (!newDeadline) return
+    setSubmitting(true)
+    try {
+      if (!USE_MOCK) {
+        await api.updateProject(projectId, { deadline: newDeadline })
+      }
+      setProject({ ...project, deadline: newDeadline })
+      toast.success('截止日期已更新')
+    } catch (err) {
+      console.error('Failed to update deadline:', err)
+      toast.error('更新失败')
+    } finally {
+      setSubmitting(false)
+      setShowDeadlineModal(false)
+    }
+  }
 
   return (
     <div className="space-y-6">
@@ -191,42 +281,34 @@ export default function ProjectDetailPage() {
         <div className="flex-1">
           <div className="flex items-center gap-3">
             <h1 className="text-2xl font-bold text-text-primary">{project.name}</h1>
-            {platform && (
-              <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium ${platform.bgColor} ${platform.textColor} border ${platform.borderColor}`}>
-                <span>{platform.icon}</span>
-                {platform.name}
-              </span>
-            )}
           </div>
-          <p className="text-sm text-text-secondary">{project.description}</p>
+          {project.description && (
+            <p className="text-sm text-text-secondary">{project.description}</p>
+          )}
         </div>
-        <SuccessTag>进行中</SuccessTag>
+        <SuccessTag>{project.status === 'active' ? '进行中' : project.status === 'completed' ? '已完成' : '已归档'}</SuccessTag>
       </div>
 
       {/* 项目信息 */}
       <div className="flex items-center gap-6 text-sm text-text-secondary">
         <span className="flex items-center gap-2">
           <Calendar size={16} />
-          截止日期: {project.deadline}
+          截止日期: {project.deadline ? new Date(project.deadline).toLocaleDateString('zh-CN') : '未设置'}
           <button
             type="button"
-            onClick={() => {
+            onClick={() => { setNewDeadline(project.deadline || ''); setShowDeadlineModal(true) }}
-              setNewDeadline(project.deadline)
-              setShowDeadlineModal(true)
-            }}
             className="p-1 rounded hover:bg-bg-elevated transition-colors"
-            title="修改截止日期"
           >
             <Pencil size={14} className="text-text-tertiary hover:text-accent-indigo" />
           </button>
         </span>
         <span className="flex items-center gap-2">
           <Clock size={16} />
-          创建时间: {project.createdAt}
+          创建时间: {new Date(project.created_at).toLocaleDateString('zh-CN')}
         </span>
       </div>
 
-      {/* Brief和规则配置 - 大按钮 */}
+      {/* Brief和规则配置 */}
       <Link href={`/brand/projects/${projectId}/config`}>
         <Card className="hover:border-accent-indigo transition-colors cursor-pointer">
           <CardContent className="py-5">
@@ -248,76 +330,65 @@ export default function ProjectDetailPage() {
 
       {/* 统计卡片 */}
       <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <StatCard title="脚本通过率" value={`${scriptPassRate}%`} icon={FileText} color="text-accent-green" />
+        <StatCard title="总任务数" value={project.task_count} icon={FileText} color="text-accent-green" />
-        <StatCard title="视频通过率" value={`${videoPassRate}%`} icon={Video} color="text-accent-indigo" />
         <StatCard title="参与代理商" value={project.agencies.length} icon={Users} color="text-purple-400" />
-        <StatCard title="待审核任务" value={project.stats.scriptPending + project.stats.videoPending} icon={Clock} color="text-orange-400" />
+        <StatCard title="状态" value={project.status === 'active' ? '进行中' : '已完成'} icon={CheckCircle} color="text-accent-indigo" />
+        <StatCard title="最近更新" value={new Date(project.updated_at).toLocaleDateString('zh-CN')} icon={Clock} color="text-orange-400" />
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* 审核进度 */}
+        {/* 最近任务 */}
         <Card className="lg:col-span-2">
           <CardHeader>
-            <CardTitle>审核进度</CardTitle>
+            <CardTitle className="flex items-center justify-between">
+              <span>最近提交</span>
+              <Link href="/brand/review">
+                <Button variant="ghost" size="sm">
+                  查看全部 <ChevronRight size={16} />
+                </Button>
+              </Link>
+            </CardTitle>
           </CardHeader>
-          <CardContent className="space-y-6">
+          <CardContent>
-            {/* 脚本审核 */}
+            {recentTasks.length > 0 ? (
-            <div>
+              <div className="overflow-x-auto">
-              <div className="flex items-center justify-between mb-3">
+                <table className="w-full">
-                <span className="flex items-center gap-2 text-text-primary font-medium">
+                  <thead>
-                  <FileText size={16} />
+                    <tr className="border-b border-border-subtle text-left text-sm text-text-secondary">
-                  脚本审核
+                      <th className="pb-3 font-medium">任务</th>
-                </span>
+                      <th className="pb-3 font-medium">达人</th>
-                <span className="text-sm text-text-secondary">
+                      <th className="pb-3 font-medium">代理商</th>
-                  {project.stats.scriptPassed}/{project.stats.scriptTotal} 已通过
+                      <th className="pb-3 font-medium">状态</th>
-                </span>
+                      <th className="pb-3 font-medium">操作</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {recentTasks.map((task) => (
+                      <tr key={task.id} className="border-b border-border-subtle last:border-0 hover:bg-bg-elevated">
+                        <td className="py-4 font-medium text-text-primary">{task.name}</td>
+                        <td className="py-4 text-text-secondary">{task.creator.name}</td>
+                        <td className="py-4">
+                          <span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-bg-elevated text-sm">
+                            <Building2 size={14} className="text-accent-indigo" />
+                            <span className="text-text-secondary">{task.agency.name}</span>
+                          </span>
+                        </td>
+                        <td className="py-4"><TaskStatusTag stage={task.stage} /></td>
+                        <td className="py-4">
+                          <Link href={`/agency/review/${task.id}`}>
+                            <Button size="sm" variant={task.stage.includes('review') ? 'primary' : 'secondary'}>
+                              {task.stage.includes('review') ? '审核' : '查看'}
+                            </Button>
+                          </Link>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
               </div>
-              <div className="flex h-4 rounded-full overflow-hidden bg-bg-elevated">
+            ) : (
-                <div className="bg-accent-green" style={{ width: `${(project.stats.scriptPassed / project.stats.scriptTotal) * 100}%` }} />
+              <div className="text-center py-8 text-text-tertiary text-sm">暂无任务</div>
-                <div className="bg-yellow-500" style={{ width: `${(project.stats.scriptPending / project.stats.scriptTotal) * 100}%` }} />
+            )}
-                <div className="bg-accent-coral" style={{ width: `${(project.stats.scriptRejected / project.stats.scriptTotal) * 100}%` }} />
-              </div>
-              <div className="flex gap-6 mt-2 text-xs">
-                <span className="flex items-center gap-1 text-accent-green">
-                  <CheckCircle size={12} /> 通过 {project.stats.scriptPassed}
-                </span>
-                <span className="flex items-center gap-1 text-yellow-500">
-                  <Clock size={12} /> 待审 {project.stats.scriptPending}
-                </span>
-                <span className="flex items-center gap-1 text-accent-coral">
-                  <XCircle size={12} /> 驳回 {project.stats.scriptRejected}
-                </span>
-              </div>
-            </div>
-
-            {/* 视频审核 */}
-            <div>
-              <div className="flex items-center justify-between mb-3">
-                <span className="flex items-center gap-2 text-text-primary font-medium">
-                  <Video size={16} />
-                  视频审核
-                </span>
-                <span className="text-sm text-text-secondary">
-                  {project.stats.videoPassed}/{project.stats.videoTotal} 已通过
-                </span>
-              </div>
-              <div className="flex h-4 rounded-full overflow-hidden bg-bg-elevated">
-                <div className="bg-accent-green" style={{ width: `${(project.stats.videoPassed / project.stats.videoTotal) * 100}%` }} />
-                <div className="bg-yellow-500" style={{ width: `${(project.stats.videoPending / project.stats.videoTotal) * 100}%` }} />
-                <div className="bg-accent-coral" style={{ width: `${(project.stats.videoRejected / project.stats.videoTotal) * 100}%` }} />
-              </div>
-              <div className="flex gap-6 mt-2 text-xs">
-                <span className="flex items-center gap-1 text-accent-green">
-                  <CheckCircle size={12} /> 通过 {project.stats.videoPassed}
-                </span>
-                <span className="flex items-center gap-1 text-yellow-500">
-                  <Clock size={12} /> 待审 {project.stats.videoPending}
-                </span>
-                <span className="flex items-center gap-1 text-accent-coral">
-                  <XCircle size={12} /> 驳回 {project.stats.videoRejected}
-                </span>
-              </div>
-            </div>
           </CardContent>
         </Card>
 
@@ -339,7 +410,7 @@ export default function ProjectDetailPage() {
                   </div>
                   <div>
                     <p className="font-medium text-text-primary text-sm">{agency.name}</p>
-                    <p className="text-xs text-text-tertiary">{agency.creatorCount} 位达人 · 通过率 {agency.passRate}%</p>
+                    <p className="text-xs text-text-tertiary">{agency.id}</p>
                   </div>
                 </div>
                 <div className="relative">
@@ -370,7 +441,6 @@ export default function ProjectDetailPage() {
               </div>
             ))}
 
-            {/* 添加代理商按钮 */}
             <button
               type="button"
               onClick={() => setShowAddModal(true)}
@@ -383,77 +453,14 @@ export default function ProjectDetailPage() {
         </Card>
       </div>
 
-      {/* 最近任务 */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center justify-between">
-            <span>最近提交</span>
-            <Link href="/brand/review">
-              <Button variant="ghost" size="sm">
-                查看全部 <ChevronRight size={16} />
-              </Button>
-            </Link>
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="overflow-x-auto">
-            <table className="w-full">
-              <thead>
-                <tr className="border-b border-border-subtle text-left text-sm text-text-secondary">
-                  <th className="pb-3 font-medium">类型</th>
-                  <th className="pb-3 font-medium">达人</th>
-                  <th className="pb-3 font-medium">所属代理商</th>
-                  <th className="pb-3 font-medium">状态</th>
-                  <th className="pb-3 font-medium">提交时间</th>
-                  <th className="pb-3 font-medium">操作</th>
-                </tr>
-              </thead>
-              <tbody>
-                {project.recentTasks.map((task) => (
-                  <tr key={task.id} className="border-b border-border-subtle last:border-0 hover:bg-bg-elevated">
-                    <td className="py-4">
-                      <span className="flex items-center gap-2">
-                        {task.type === 'script' ? <FileText size={16} className="text-accent-indigo" /> : <Video size={16} className="text-purple-400" />}
-                        {task.type === 'script' ? '脚本' : '视频'}
-                      </span>
-                    </td>
-                    <td className="py-4 text-text-primary">{task.creatorName}</td>
-                    <td className="py-4">
-                      <span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-bg-elevated text-sm">
-                        <Building2 size={14} className="text-accent-indigo" />
-                        <span className="text-text-secondary">{task.agencyName}</span>
-                      </span>
-                    </td>
-                    <td className="py-4"><TaskStatusTag status={task.status} /></td>
-                    <td className="py-4 text-sm text-text-tertiary">{task.submittedAt}</td>
-                    <td className="py-4">
-                      <Link href={`/brand/review/${task.type}/${task.id}`}>
-                        <Button size="sm" variant={task.status === 'pending' ? 'primary' : 'secondary'}>
-                          {task.status === 'pending' ? '审核' : '查看'}
-                        </Button>
-                      </Link>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </CardContent>
-      </Card>
-
       {/* 添加代理商弹窗 */}
       <Modal
         isOpen={showAddModal}
-        onClose={() => {
+        onClose={() => { setShowAddModal(false); setSearchQuery(''); setSelectedAgencies([]) }}
-          setShowAddModal(false)
-          setSearchQuery('')
-          setSelectedAgencies([])
-        }}
         title="添加代理商"
         size="lg"
       >
         <div className="space-y-4">
-          {/* 搜索框 */}
           <div className="relative">
             <Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary" />
             <Input
@@ -464,7 +471,6 @@ export default function ProjectDetailPage() {
             />
           </div>
 
-          {/* 代理商列表 */}
           <div className="max-h-80 overflow-y-auto space-y-2">
             {filteredAgencies.length > 0 ? (
               filteredAgencies.map((agency) => {
@@ -475,26 +481,22 @@ export default function ProjectDetailPage() {
                     type="button"
                     onClick={() => toggleSelectAgency(agency.id)}
                     className={`w-full flex items-center gap-3 p-3 rounded-xl border-2 transition-all text-left ${
-                      isSelected
+                      isSelected ? 'border-accent-indigo bg-accent-indigo/5' : 'border-transparent bg-bg-elevated hover:bg-bg-page'
-                        ? 'border-accent-indigo bg-accent-indigo/5'
-                        : 'border-transparent bg-bg-elevated hover:bg-bg-page'
                     }`}
                   >
                     <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
                       isSelected ? 'bg-accent-indigo' : 'bg-accent-indigo/15'
                     }`}>
-                      {isSelected ? (
+                      {isSelected ? <Check size={20} className="text-white" /> : <Building2 size={20} className="text-accent-indigo" />}
-                        <Check size={20} className="text-white" />
-                      ) : (
-                        <Building2 size={20} className="text-accent-indigo" />
-                      )}
                     </div>
                     <div className="flex-1 min-w-0">
                       <div className="flex items-center gap-2">
                         <p className="font-medium text-text-primary">{agency.name}</p>
                         <span className="text-xs text-text-tertiary font-mono">{agency.id}</span>
                       </div>
-                      <p className="text-sm text-text-secondary truncate">{agency.companyName}</p>
+                      {agency.contact_name && (
+                        <p className="text-sm text-text-secondary truncate">{agency.contact_name}</p>
+                      )}
                     </div>
                   </button>
                 )
@@ -502,62 +504,39 @@ export default function ProjectDetailPage() {
             ) : (
               <div className="text-center py-8 text-text-tertiary">
                 {availableAgencies.length === 0 ? (
-                  <>
+                  <><Users size={32} className="mx-auto mb-2 opacity-50" /><p>所有代理商都已添加到此项目</p></>
-                    <Users size={32} className="mx-auto mb-2 opacity-50" />
-                    <p>所有代理商都已添加到此项目</p>
-                  </>
                 ) : (
-                  <>
+                  <><Search size={32} className="mx-auto mb-2 opacity-50" /><p>未找到匹配的代理商</p></>
-                    <Search size={32} className="mx-auto mb-2 opacity-50" />
-                    <p>未找到匹配的代理商</p>
-                  </>
                 )}
               </div>
             )}
           </div>
 
-          {/* 已选择提示 */}
           {selectedAgencies.length > 0 && (
             <div className="flex items-center justify-between pt-3 border-t border-border-subtle">
               <span className="text-sm text-text-secondary">
                 已选择 <span className="text-accent-indigo font-medium">{selectedAgencies.length}</span> 个代理商
               </span>
-              <Button variant="primary" onClick={handleAddAgencies}>
+              <Button variant="primary" onClick={handleAddAgencies} disabled={submitting}>
-                <Plus size={16} />
+                {submitting && <Loader2 size={16} className="animate-spin" />}
                 确认添加
               </Button>
             </div>
           )}
-
-          {/* 底部提示 */}
-          <p className="text-xs text-text-tertiary pt-2">
-            仅显示已在"代理商管理"中添加的代理商，如需添加新代理商请先前往代理商管理
-          </p>
         </div>
       </Modal>
 
       {/* 删除确认弹窗 */}
-      <Modal
+      <Modal isOpen={showDeleteModal} onClose={() => { setShowDeleteModal(false); setAgencyToDelete(null) }} title="移除代理商">
-        isOpen={showDeleteModal}
-        onClose={() => { setShowDeleteModal(false); setAgencyToDelete(null) }}
-        title="移除代理商"
-      >
         <div className="space-y-4">
           <p className="text-text-secondary">
             确定要将 <span className="text-text-primary font-medium">{agencyToDelete?.name}</span> 从此项目中移除吗？
           </p>
-          <p className="text-sm text-accent-coral">
+          <p className="text-sm text-accent-coral">移除后，该代理商下的达人将无法继续参与此项目的任务。</p>
-            移除后，该代理商下的达人将无法继续参与此项目的任务。
-          </p>
           <div className="flex gap-3">
-            <Button variant="secondary" className="flex-1" onClick={() => { setShowDeleteModal(false); setAgencyToDelete(null) }}>
+            <Button variant="secondary" className="flex-1" onClick={() => { setShowDeleteModal(false); setAgencyToDelete(null) }}>取消</Button>
-              取消
+            <Button variant="primary" className="flex-1 bg-accent-coral hover:bg-accent-coral/80" onClick={handleRemoveAgency} disabled={submitting}>
-            </Button>
+              {submitting && <Loader2 size={16} className="animate-spin" />}
-            <Button
-              variant="primary"
-              className="flex-1 bg-accent-coral hover:bg-accent-coral/80"
-              onClick={handleRemoveAgency}
-            >
               确认移除
             </Button>
           </div>
@@ -565,21 +544,10 @@ export default function ProjectDetailPage() {
       </Modal>
 
       {/* 编辑截止日期弹窗 */}
-      <Modal
+      <Modal isOpen={showDeadlineModal} onClose={() => setShowDeadlineModal(false)} title="修改截止日期">
-        isOpen={showDeadlineModal}
-        onClose={() => setShowDeadlineModal(false)}
-        title="修改截止日期"
-      >
         <div className="space-y-4">
-          <div className="p-3 rounded-lg bg-bg-elevated">
-            <p className="text-sm text-text-secondary">项目名称</p>
-            <p className="font-medium text-text-primary">{project.name}</p>
-          </div>
-
           <div>
-            <label className="block text-sm font-medium text-text-primary mb-2">
+            <label className="block text-sm font-medium text-text-primary mb-2">新截止日期</label>
-              新截止日期
-            </label>
             <div className="relative">
               <Calendar size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-text-tertiary" />
               <input
@@ -590,21 +558,10 @@ export default function ProjectDetailPage() {
               />
             </div>
           </div>
-
           <div className="flex gap-3 pt-2">
-            <Button
+            <Button variant="secondary" className="flex-1" onClick={() => setShowDeadlineModal(false)}>取消</Button>
-              variant="secondary"
+            <Button variant="primary" className="flex-1" onClick={handleSaveDeadline} disabled={!newDeadline || submitting}>
-              className="flex-1"
+              {submitting && <Loader2 size={16} className="animate-spin" />}
-              onClick={() => setShowDeadlineModal(false)}
-            >
-              取消
-            </Button>
-            <Button
-              variant="primary"
-              className="flex-1"
-              onClick={handleSaveDeadline}
-              disabled={!newDeadline}
-            >
               保存
             </Button>
           </div>

frontend/app/brand/projects/create/page.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { useRouter } from 'next/navigation'
 import { useToast } from '@/components/ui/Toast'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
+import { Card, CardContent } from '@/components/ui/Card'
 import { Button } from '@/components/ui/Button'
 import { Input } from '@/components/ui/Input'
 import {
@@ -16,52 +16,81 @@ import {
   Users,
   Search,
   Building2,
-  Check
+  Check,
+  Loader2
 } from 'lucide-react'
+import { api } from '@/lib/api'
+import { USE_MOCK } from '@/contexts/AuthContext'
+import { useOSSUpload } from '@/hooks/useOSSUpload'
+import type { AgencyDetail } from '@/types/organization'
 
-// 平台选项
+// ==================== Mock 数据 ====================
-const platformOptions = [
+const mockAgencies: AgencyDetail[] = [
-  { id: 'douyin', name: '抖音', icon: '🎵', color: 'bg-[#1a1a1a]' },
+  { id: 'AG789012', name: '星耀传媒', force_pass_enabled: true },
-  { id: 'xiaohongshu', name: '小红书', icon: '📕', color: 'bg-[#fe2c55]' },
+  { id: 'AG456789', name: '创意无限', force_pass_enabled: false },
-  { id: 'bilibili', name: 'B站', icon: '📺', color: 'bg-[#00a1d6]' },
+  { id: 'AG123456', name: '美妆达人MCN', force_pass_enabled: false },
-  { id: 'kuaishou', name: '快手', icon: '⚡', color: 'bg-[#ff4906]' },
+  { id: 'AG111111', name: '蓝海科技', force_pass_enabled: true },
-  { id: 'weibo', name: '微博', icon: '🔴', color: 'bg-[#e6162d]' },
+  { id: 'AG222222', name: '云创网络', force_pass_enabled: false },
-  { id: 'wechat', name: '微信视频号', icon: '💬', color: 'bg-[#07c160]' },
+  { id: 'AG333333', name: '天府传媒', force_pass_enabled: true },
-]
-
-// 模拟品牌方已添加的代理商（来自代理商管理）
-const mockAgencies = [
-  { id: 'AG789012', name: '星耀传媒', companyName: '上海星耀文化传媒有限公司', creatorCount: 50, passRate: 92 },
-  { id: 'AG456789', name: '创意无限', companyName: '深圳创意无限广告有限公司', creatorCount: 35, passRate: 88 },
-  { id: 'AG123456', name: '美妆达人MCN', companyName: '杭州美妆达人网络科技有限公司', creatorCount: 28, passRate: 82 },
-  { id: 'AG111111', name: '蓝海科技', companyName: '北京蓝海数字科技有限公司', creatorCount: 42, passRate: 85 },
-  { id: 'AG222222', name: '云创网络', companyName: '杭州云创网络技术有限公司', creatorCount: 30, passRate: 90 },
-  { id: 'AG333333', name: '天府传媒', companyName: '成都天府传媒集团有限公司', creatorCount: 25, passRate: 87 },
 ]
 
 export default function CreateProjectPage() {
   const router = useRouter()
   const toast = useToast()
+  const { upload, isUploading, progress: uploadProgress } = useOSSUpload('general')
+
   const [projectName, setProjectName] = useState('')
+  const [description, setDescription] = useState('')
   const [deadline, setDeadline] = useState('')
   const [briefFile, setBriefFile] = useState<File | null>(null)
+  const [briefFileUrl, setBriefFileUrl] = useState<string | null>(null)
   const [selectedAgencies, setSelectedAgencies] = useState<string[]>([])
-  const [selectedPlatform, setSelectedPlatform] = useState<string>('')
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [agencySearch, setAgencySearch] = useState('')
+  const [agencies, setAgencies] = useState<AgencyDetail[]>([])
+  const [loadingAgencies, setLoadingAgencies] = useState(true)
 
-  // 搜索过滤代理商
+  useEffect(() => {
-  const filteredAgencies = mockAgencies.filter(agency =>
+    const loadAgencies = async () => {
+      if (USE_MOCK) {
+        setAgencies(mockAgencies)
+        setLoadingAgencies(false)
+        return
+      }
+      try {
+        const data = await api.listBrandAgencies()
+        setAgencies(data.items)
+      } catch (err) {
+        console.error('Failed to load agencies:', err)
+        toast.error('加载代理商列表失败')
+      } finally {
+        setLoadingAgencies(false)
+      }
+    }
+    loadAgencies()
+  }, [toast])
+
+  const filteredAgencies = agencies.filter(agency =>
     agencySearch === '' ||
     agency.name.toLowerCase().includes(agencySearch.toLowerCase()) ||
-    agency.id.toLowerCase().includes(agencySearch.toLowerCase()) ||
+    agency.id.toLowerCase().includes(agencySearch.toLowerCase())
-    agency.companyName.toLowerCase().includes(agencySearch.toLowerCase())
   )
 
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
-    if (file) {
+    if (!file) return
-      setBriefFile(file)
+    setBriefFile(file)
+
+    if (!USE_MOCK) {
+      try {
+        const result = await upload(file)
+        setBriefFileUrl(result.url)
+      } catch (err) {
+        toast.error('文件上传失败')
+        setBriefFile(null)
+      }
+    } else {
+      setBriefFileUrl('mock://brief-file.pdf')
     }
   }
 
@@ -74,23 +103,46 @@ export default function CreateProjectPage() {
   }
 
   const handleSubmit = async () => {
-    if (!projectName.trim() || !deadline || !briefFile || selectedAgencies.length === 0 || !selectedPlatform) {
+    if (!projectName.trim() || !deadline || selectedAgencies.length === 0) {
       toast.error('请填写完整信息')
       return
     }
 
     setIsSubmitting(true)
-    // 模拟提交
+    try {
-    await new Promise(resolve => setTimeout(resolve, 1500))
+      if (USE_MOCK) {
-    toast.success('项目创建成功！')
+        await new Promise(resolve => setTimeout(resolve, 1000))
-    router.push('/brand')
+      } else {
+        const project = await api.createProject({
+          name: projectName.trim(),
+          description: description.trim() || undefined,
+          deadline,
+          agency_ids: selectedAgencies,
+        })
+
+        // If brief file was uploaded, create brief
+        if (briefFileUrl && briefFile) {
+          await api.createBrief(project.id, {
+            file_url: briefFileUrl,
+            file_name: briefFile.name,
+          })
+        }
+      }
+
+      toast.success('项目创建成功！')
+      router.push('/brand')
+    } catch (err) {
+      console.error('Failed to create project:', err)
+      toast.error('创建失败，请重试')
+    } finally {
+      setIsSubmitting(false)
+    }
   }
 
-  const isValid = projectName.trim() && deadline && briefFile && selectedAgencies.length > 0 && selectedPlatform
+  const isValid = projectName.trim() && deadline && selectedAgencies.length > 0
 
   return (
     <div className="space-y-6 max-w-4xl">
-      {/* 顶部导航 */}
       <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" />
@@ -114,36 +166,15 @@ export default function CreateProjectPage() {
             />
           </div>
 
-          {/* 选择平台 */}
+          {/* 项目描述 */}
           <div>
-            <label className="block text-sm font-medium text-text-primary mb-2">
+            <label className="block text-sm font-medium text-text-primary mb-2">项目描述</label>
-              发布平台 <span className="text-accent-coral">*</span>
+            <textarea
-            </label>
+              value={description}
-            <p className="text-xs text-text-tertiary mb-3">选择视频将发布的平台，系统将应用对应平台的审核规则</p>
+              onChange={(e) => setDescription(e.target.value)}
-            <div className="grid grid-cols-3 md:grid-cols-6 gap-3">
+              placeholder="简要描述项目目标和要求..."
-              {platformOptions.map((platform) => (
+              className="w-full h-24 px-4 py-3 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary resize-none focus:outline-none focus:ring-2 focus:ring-accent-indigo"
-                <button
+            />
-                  key={platform.id}
-                  type="button"
-                  onClick={() => setSelectedPlatform(platform.id)}
-                  className={`p-3 rounded-xl border-2 transition-all flex flex-col items-center gap-2 ${
-                    selectedPlatform === platform.id
-                      ? 'border-accent-indigo bg-accent-indigo/10'
-                      : 'border-border-subtle hover:border-accent-indigo/50'
-                  }`}
-                >
-                  <div className={`w-10 h-10 ${platform.color} rounded-lg flex items-center justify-center text-lg`}>
-                    {platform.icon}
-                  </div>
-                  <span className="text-sm font-medium text-text-primary">{platform.name}</span>
-                  {selectedPlatform === platform.id && (
-                    <div className="absolute top-1 right-1 w-4 h-4 rounded-full bg-accent-indigo flex items-center justify-center">
-                      <Check size={10} className="text-white" />
-                    </div>
-                  )}
-                </button>
-              ))}
-            </div>
           </div>
 
           {/* 截止日期 */}
@@ -164,17 +195,18 @@ export default function CreateProjectPage() {
 
           {/* Brief 上传 */}
           <div>
-            <label className="block text-sm font-medium text-text-primary mb-2">
+            <label className="block text-sm font-medium text-text-primary mb-2">上传 Brief</label>
-              上传 Brief <span className="text-accent-coral">*</span>
-            </label>
             <div className="border-2 border-dashed border-border-subtle rounded-lg p-8 text-center hover:border-accent-indigo/50 transition-colors">
               {briefFile ? (
                 <div className="flex items-center justify-center gap-3">
                   <FileText size={24} className="text-accent-indigo" />
                   <span className="text-text-primary">{briefFile.name}</span>
+                  {isUploading && (
+                    <span className="text-xs text-text-tertiary">{uploadProgress}%</span>
+                  )}
                   <button
                     type="button"
-                    onClick={() => setBriefFile(null)}
+                    onClick={() => { setBriefFile(null); setBriefFileUrl(null) }}
                     className="p-1 hover:bg-bg-elevated rounded-full"
                   >
                     <X size={16} className="text-text-tertiary" />
@@ -205,71 +237,69 @@ export default function CreateProjectPage() {
               </span>
             </label>
 
-            {/* 搜索框 */}
             <div className="relative mb-4">
               <Search size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-text-tertiary" />
               <input
                 type="text"
                 value={agencySearch}
                 onChange={(e) => setAgencySearch(e.target.value)}
-                placeholder="搜索代理商名称、ID或公司名..."
+                placeholder="搜索代理商名称或ID..."
                 className="w-full pl-11 pr-4 py-3 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
               />
             </div>
 
-            {/* 代理商列表 */}
+            {loadingAgencies ? (
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-80 overflow-y-auto">
+              <div className="flex items-center justify-center py-8 text-text-tertiary">
-              {filteredAgencies.length > 0 ? (
+                <Loader2 size={20} className="animate-spin mr-2" />
-                filteredAgencies.map((agency) => {
+                加载代理商列表...
-                  const isSelected = selectedAgencies.includes(agency.id)
+              </div>
-                  return (
+            ) : (
-                    <button
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-80 overflow-y-auto">
-                      key={agency.id}
+                {filteredAgencies.length > 0 ? (
-                      type="button"
+                  filteredAgencies.map((agency) => {
-                      onClick={() => toggleAgency(agency.id)}
+                    const isSelected = selectedAgencies.includes(agency.id)
-                      className={`p-4 rounded-xl border-2 text-left transition-all ${
+                    return (
-                        isSelected
+                      <button
-                          ? 'border-accent-indigo bg-accent-indigo/10'
+                        key={agency.id}
-                          : 'border-border-subtle hover:border-accent-indigo/50'
+                        type="button"
-                      }`}
+                        onClick={() => toggleAgency(agency.id)}
-                    >
+                        className={`p-4 rounded-xl border-2 text-left transition-all ${
-                      <div className="flex items-start gap-3">
+                          isSelected
-                        <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
+                            ? 'border-accent-indigo bg-accent-indigo/10'
-                          isSelected ? 'bg-accent-indigo' : 'bg-accent-indigo/15'
+                            : 'border-border-subtle hover:border-accent-indigo/50'
-                        }`}>
+                        }`}
-                          {isSelected ? (
+                      >
-                            <CheckCircle size={20} className="text-white" />
+                        <div className="flex items-start gap-3">
-                          ) : (
+                          <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
-                            <Building2 size={20} className="text-accent-indigo" />
+                            isSelected ? 'bg-accent-indigo' : 'bg-accent-indigo/15'
-                          )}
+                          }`}>
-                        </div>
+                            {isSelected ? (
-                        <div className="flex-1 min-w-0">
+                              <CheckCircle size={20} className="text-white" />
-                          <div className="flex items-center gap-2">
+                            ) : (
-                            <span className="font-medium text-text-primary">{agency.name}</span>
+                              <Building2 size={20} className="text-accent-indigo" />
-                            <span className="text-xs text-text-tertiary font-mono">{agency.id}</span>
+                            )}
                           </div>
-                          <p className="text-sm text-text-secondary truncate mt-0.5">{agency.companyName}</p>
+                          <div className="flex-1 min-w-0">
-                          <div className="flex items-center gap-4 mt-1.5 text-xs text-text-tertiary">
+                            <div className="flex items-center gap-2">
-                            <span className="flex items-center gap-1">
+                              <span className="font-medium text-text-primary">{agency.name}</span>
-                              <Users size={12} />
+                              <span className="text-xs text-text-tertiary font-mono">{agency.id}</span>
-                              {agency.creatorCount} 达人
+                            </div>
-                            </span>
+                            {agency.contact_name && (
-                            <span className={agency.passRate >= 90 ? 'text-accent-green' : agency.passRate >= 80 ? 'text-accent-indigo' : 'text-orange-400'}>
+                              <p className="text-sm text-text-secondary mt-0.5">{agency.contact_name}</p>
-                              通过率 {agency.passRate}%
+                            )}
-                            </span>
                           </div>
                         </div>
-                      </div>
+                      </button>
-                    </button>
+                    )
-                  )
+                  })
-                })
+                ) : (
-              ) : (
+                  <div className="col-span-2 text-center py-8 text-text-tertiary">
-                <div className="col-span-2 text-center py-8 text-text-tertiary">
+                    <Search size={32} className="mx-auto mb-2 opacity-50" />
-                  <Search size={32} className="mx-auto mb-2 opacity-50" />
+                    <p>未找到匹配的代理商</p>
-                  <p>未找到匹配的代理商</p>
+                  </div>
-                </div>
+                )}
-              )}
+              </div>
-            </div>
+            )}
 
             <p className="text-xs text-text-tertiary mt-3">
               仅显示已在"代理商管理"中添加的代理商
@@ -281,11 +311,13 @@ export default function CreateProjectPage() {
             <Button variant="secondary" onClick={() => router.back()}>
               取消
             </Button>
-            <Button
+            <Button onClick={handleSubmit} disabled={!isValid || isSubmitting || isUploading}>
-              onClick={handleSubmit}
+              {isSubmitting ? (
-              disabled={!isValid || isSubmitting}
+                <>
-            >
+                  <Loader2 size={16} className="animate-spin" />
-              {isSubmitting ? '创建中...' : '创建项目'}
+                  创建中...
+                </>
+              ) : '创建项目'}
             </Button>
           </div>
         </CardContent>

frontend/app/creator/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { useRouter } from 'next/navigation'
 import {
   Video,
@@ -17,225 +17,84 @@ import {
 } from 'lucide-react'
 import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
 import { cn } from '@/lib/utils'
-import { platformOptions, getPlatformInfo } from '@/lib/platforms'
+import { getPlatformInfo } from '@/lib/platforms'
+import { api } from '@/lib/api'
+import { USE_MOCK } from '@/contexts/AuthContext'
+import { useSSE } from '@/contexts/SSEContext'
+import { mapTaskToUI, type StepStatus, type StageSteps } from '@/lib/taskStageMapper'
+import type { TaskResponse } from '@/types/task'
 
-// 任务阶段状态类型
+// UI 用任务数据（从 API 数据映射而来）
-type StageStatus = 'pending' | 'current' | 'done' | 'error'
-
-// 任务数据类型
 type Task = {
   id: string
   title: string
   description: string
-  platform: string // 发布平台
+  platform: string
-  // 脚本阶段
+  scriptStage: StageSteps
-  scriptStage: {
+  videoStage: StageSteps
-    submit: StageStatus
-    ai: StageStatus
-    agency: StageStatus
-    brand: StageStatus
-  }
-  // 视频阶段
-  videoStage: {
-    submit: StageStatus
-    ai: StageStatus
-    agency: StageStatus
-    brand: StageStatus
-  }
-  // 按钮配置
   buttonText: string
   buttonType: 'upload' | 'view' | 'fix'
-  // 阶段颜色
+  scriptColor: string
-  scriptColor: 'blue' | 'indigo' | 'coral' | 'green'
+  videoColor: string
-  videoColor: 'tertiary' | 'blue' | 'indigo' | 'coral' | 'green'
+  filterCategory: 'pending' | 'reviewing' | 'rejected' | 'completed'
 }
 
-// 15个任务数据，覆盖所有状态
+// Mock 数据（开发模式使用）
 const mockTasks: Task[] = [
   {
-    id: 'task-001',
+    id: 'task-001', title: 'XX品牌618推广', description: '产品种草视频 · 时长要求 60-90秒 · 截止: 2026-02-10', platform: 'douyin',
-    title: 'XX品牌618推广',
-    description: '产品种草视频 · 时长要求 60-90秒 · 截止: 2026-02-10',
-    platform: 'douyin',
     scriptStage: { submit: 'current', ai: 'pending', agency: 'pending', brand: 'pending' },
     videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
-    buttonText: '上传脚本',
+    buttonText: '上传脚本', buttonType: 'upload', scriptColor: 'blue', videoColor: 'tertiary', filterCategory: 'pending',
-    buttonType: 'upload',
-    scriptColor: 'blue',
-    videoColor: 'tertiary',
   },
   {
-    id: 'task-002',
+    id: 'task-002', title: 'YY美妆新品', description: '口播测评 · 已上传视频 · 提交于: 今天 14:30', platform: 'xiaohongshu',
-    title: 'YY美妆新品',
-    description: '口播测评 · 已上传视频 · 提交于: 今天 14:30',
-    platform: 'xiaohongshu',
     scriptStage: { submit: 'done', ai: 'current', agency: 'pending', brand: 'pending' },
     videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
-    buttonText: '查看详情',
+    buttonText: '查看详情', buttonType: 'view', scriptColor: 'indigo', videoColor: 'tertiary', filterCategory: 'reviewing',
-    buttonType: 'view',
-    scriptColor: 'indigo',
-    videoColor: 'tertiary',
   },
   {
-    id: 'task-003',
+    id: 'task-003', title: 'ZZ饮品夏日', description: '探店Vlog · 发现2处问题 · 需修改后重新提交', platform: 'bilibili',
-    title: 'ZZ饮品夏日',
-    description: '探店Vlog · 发现2处问题 · 需修改后重新提交',
-    platform: 'bilibili',
     scriptStage: { submit: 'done', ai: 'error', agency: 'pending', brand: 'pending' },
     videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
-    buttonText: '查看修改',
+    buttonText: '查看修改', buttonType: 'fix', scriptColor: 'coral', videoColor: 'tertiary', filterCategory: 'rejected',
-    buttonType: 'fix',
-    scriptColor: 'coral',
-    videoColor: 'tertiary',
   },
   {
-    id: 'task-004',
+    id: 'task-004', title: 'AA数码新品发布', description: '开箱测评 · 审核通过 · 可发布', platform: 'douyin',
-    title: 'AA数码新品发布',
-    description: '开箱测评 · 审核通过 · 可发布',
-    platform: 'douyin',
     scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
     videoStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
-    buttonText: '查看详情',
+    buttonText: '查看详情', buttonType: 'view', scriptColor: 'green', videoColor: 'green', filterCategory: 'completed',
-    buttonType: 'view',
-    scriptColor: 'green',
-    videoColor: 'green',
   },
   {
-    id: 'task-005',
+    id: 'task-008', title: 'EE食品试吃', description: '美食测评 · 脚本通过 · 待上传视频', platform: 'douyin',
-    title: 'BB运动饮料',
-    description: '运动场景 · 脚本AI审核中 · 等待结果',
-    platform: 'kuaishou',
-    scriptStage: { submit: 'done', ai: 'current', agency: 'pending', brand: 'pending' },
-    videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
-    buttonText: '查看详情',
-    buttonType: 'view',
-    scriptColor: 'indigo',
-    videoColor: 'tertiary',
-  },
-  {
-    id: 'task-006',
-    title: 'CC服装春季款',
-    description: '穿搭展示 · 脚本待代理商审核',
-    platform: 'xiaohongshu',
-    scriptStage: { submit: 'done', ai: 'done', agency: 'current', brand: 'pending' },
-    videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
-    buttonText: '查看详情',
-    buttonType: 'view',
-    scriptColor: 'indigo',
-    videoColor: 'tertiary',
-  },
-  {
-    id: 'task-007',
-    title: 'DD家电测评',
-    description: '开箱视频 · 脚本待品牌终审',
-    platform: 'bilibili',
-    scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'current' },
-    videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
-    buttonText: '查看详情',
-    buttonType: 'view',
-    scriptColor: 'indigo',
-    videoColor: 'tertiary',
-  },
-  {
-    id: 'task-008',
-    title: 'EE食品试吃',
-    description: '美食测评 · 脚本通过 · 待上传视频',
-    platform: 'douyin',
     scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
     videoStage: { submit: 'current', ai: 'pending', agency: 'pending', brand: 'pending' },
-    buttonText: '上传视频',
+    buttonText: '上传视频', buttonType: 'upload', scriptColor: 'green', videoColor: 'blue', filterCategory: 'pending',
-    buttonType: 'upload',
-    scriptColor: 'green',
-    videoColor: 'blue',
-  },
-  {
-    id: 'task-009',
-    title: 'FF护肤品',
-    description: '使用教程 · 视频AI审核中',
-    platform: 'xiaohongshu',
-    scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
-    videoStage: { submit: 'done', ai: 'current', agency: 'pending', brand: 'pending' },
-    buttonText: '查看详情',
-    buttonType: 'view',
-    scriptColor: 'green',
-    videoColor: 'indigo',
-  },
-  {
-    id: 'task-010',
-    title: 'GG智能手表',
-    description: '功能展示 · 脚本代理商不通过',
-    platform: 'weibo',
-    scriptStage: { submit: 'done', ai: 'done', agency: 'error', brand: 'pending' },
-    videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
-    buttonText: '查看修改',
-    buttonType: 'fix',
-    scriptColor: 'coral',
-    videoColor: 'tertiary',
-  },
-  {
-    id: 'task-011',
-    title: 'HH美妆代言',
-    description: '品牌代言 · 脚本品牌不通过',
-    platform: 'xiaohongshu',
-    scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'error' },
-    videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
-    buttonText: '查看修改',
-    buttonType: 'fix',
-    scriptColor: 'coral',
-    videoColor: 'tertiary',
-  },
-  {
-    id: 'task-012',
-    title: 'II数码配件',
-    description: '配件展示 · 视频代理商审核中',
-    platform: 'bilibili',
-    scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
-    videoStage: { submit: 'done', ai: 'done', agency: 'current', brand: 'pending' },
-    buttonText: '查看详情',
-    buttonType: 'view',
-    scriptColor: 'green',
-    videoColor: 'indigo',
-  },
-  {
-    id: 'task-013',
-    title: 'JJ旅行vlog',
-    description: '旅行记录 · 视频代理商不通过',
-    platform: 'wechat',
-    scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
-    videoStage: { submit: 'done', ai: 'done', agency: 'error', brand: 'pending' },
-    buttonText: '查看修改',
-    buttonType: 'fix',
-    scriptColor: 'green',
-    videoColor: 'coral',
-  },
-  {
-    id: 'task-014',
-    title: 'KK宠物用品',
-    description: '宠物日常 · 视频品牌终审中',
-    platform: 'douyin',
-    scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
-    videoStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'current' },
-    buttonText: '查看详情',
-    buttonType: 'view',
-    scriptColor: 'green',
-    videoColor: 'indigo',
-  },
-  {
-    id: 'task-015',
-    title: 'LL厨房电器',
-    description: '使用演示 · 视频品牌不通过',
-    platform: 'kuaishou',
-    scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
-    videoStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'error' },
-    buttonText: '查看修改',
-    buttonType: 'fix',
-    scriptColor: 'green',
-    videoColor: 'coral',
   },
 ]
 
+function mapTaskResponseToUI(task: TaskResponse): Task {
+  const ui = mapTaskToUI(task)
+  const buttonTypeMap: Record<string, 'upload' | 'view' | 'fix'> = {
+    primary: 'upload', success: 'view', warning: 'fix', disabled: 'view',
+  }
+  return {
+    id: task.id,
+    title: task.name,
+    description: `${task.project.name} · ${ui.statusLabel}`,
+    platform: 'douyin', // 后端暂无平台字段，默认
+    scriptStage: ui.scriptStage,
+    videoStage: ui.videoStage,
+    buttonText: ui.buttonText,
+    buttonType: buttonTypeMap[ui.buttonType] || 'view',
+    scriptColor: ui.scriptColor,
+    videoColor: ui.videoColor,
+    filterCategory: ui.filterCategory,
+  }
+}
+
 // 步骤图标组件
-function StepIcon({ status, icon }: { status: StageStatus; icon: 'upload' | 'bot' | 'users' | 'building' }) {
+function StepIcon({ status, icon }: { status: StepStatus; icon: 'upload' | 'bot' | 'users' | 'building' }) {
   const IconComponent = {
     upload: Upload,
     bot: Bot,
@@ -273,7 +132,7 @@ function StepIcon({ status, icon }: { status: StageStatus; icon: 'upload' | 'bot
 
 // 进度条组件
 function ProgressBar({ stage, color }: {
-  stage: { submit: StageStatus; ai: StageStatus; agency: StageStatus; brand: StageStatus }
+  stage: StageSteps
   color: string
 }) {
   const steps = [
@@ -283,12 +142,12 @@ function ProgressBar({ stage, color }: {
     { key: 'brand', label: '品牌', icon: 'building' as const, status: stage.brand },
   ]
 
-  const getLineColor = (fromStatus: StageStatus) => {
+  const getLineColor = (fromStatus: StepStatus) => {
     if (fromStatus === 'done') return 'bg-accent-green'
     return 'bg-border-subtle'
   }
 
-  const getLabelColor = (status: StageStatus) => {
+  const getLabelColor = (status: StepStatus) => {
     if (status === 'done') return 'text-text-secondary'
     if (status === 'current') return 'text-accent-indigo font-semibold'
     if (status === 'error') return 'text-accent-coral font-semibold'
@@ -322,6 +181,7 @@ function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
       case 'indigo': return 'text-accent-indigo'
       case 'coral': return 'text-accent-coral'
       case 'green': return 'text-accent-green'
+      case 'red': return 'text-accent-coral'
       default: return 'text-text-tertiary'
     }
   }
@@ -342,7 +202,6 @@ function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
       className="bg-bg-card rounded-2xl overflow-hidden card-shadow cursor-pointer hover:bg-bg-elevated/30 transition-colors"
       onClick={onClick}
     >
-      {/* 平台顶部条 */}
       {platform && (
         <div className={`px-5 py-2 ${platform.bgColor} border-b ${platform.borderColor} flex items-center gap-2`}>
           <span className="text-base">{platform.icon}</span>
@@ -351,9 +210,7 @@ function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
       )}
 
       <div className="p-5 flex flex-col gap-4">
-        {/* 任务主行 */}
         <div className="flex items-center justify-between">
-          {/* 左侧：缩略图 + 信息 */}
           <div className="flex items-center gap-4">
             <div className="w-20 h-[60px] rounded-lg bg-[#1A1A1E] flex items-center justify-center flex-shrink-0">
               <Video className="w-6 h-6 text-text-tertiary" />
@@ -364,7 +221,6 @@ function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
             </div>
           </div>
 
-          {/* 右侧：操作按钮 */}
           <button
             type="button"
             className={cn('px-5 py-2.5 rounded-[10px] text-sm font-semibold', getButtonStyle())}
@@ -374,16 +230,13 @@ function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
           </button>
         </div>
 
-      {/* 进度条容器 */}
       <div className="flex flex-col gap-3 pt-3">
-        {/* 脚本阶段 */}
         <div className="flex items-center gap-2">
           <span className={cn('text-xs font-semibold w-8', getStageColor(task.scriptColor))}>脚本</span>
           <div className="flex-1">
             <ProgressBar stage={task.scriptStage} color={task.scriptColor} />
           </div>
         </div>
-        {/* 视频阶段 */}
         <div className="flex items-center gap-2">
           <span className={cn('text-xs font-semibold w-8', getStageColor(task.videoColor))}>视频</span>
           <div className="flex-1">
@@ -396,7 +249,6 @@ function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
   )
 }
 
-// 任务状态筛选选项
 type TaskFilter = 'all' | 'pending' | 'reviewing' | 'rejected' | 'completed'
 
 const filterOptions: { value: TaskFilter; label: string }[] = [
@@ -407,45 +259,85 @@ const filterOptions: { value: TaskFilter; label: string }[] = [
   { value: 'completed', label: '已完成' },
 ]
 
-// 根据任务状态获取筛选分类
+// 骨架屏
-const getTaskFilterCategory = (task: Task): TaskFilter => {
+function TaskSkeleton() {
-  // 如果视频阶段全部完成，则为已完成
+  return (
-  if (task.videoStage.brand === 'done') return 'completed'
+    <div className="bg-bg-card rounded-2xl overflow-hidden card-shadow animate-pulse">
-  // 如果有任何阶段为 error，则为已驳回
+      <div className="px-5 py-2 bg-bg-elevated border-b border-border-subtle">
-  if (
+        <div className="h-4 w-20 bg-bg-page rounded" />
-    task.scriptStage.ai === 'error' ||
+      </div>
-    task.scriptStage.agency === 'error' ||
+      <div className="p-5 flex flex-col gap-4">
-    task.scriptStage.brand === 'error' ||
+        <div className="flex items-center justify-between">
-    task.videoStage.ai === 'error' ||
+          <div className="flex items-center gap-4">
-    task.videoStage.agency === 'error' ||
+            <div className="w-20 h-[60px] rounded-lg bg-bg-elevated" />
-    task.videoStage.brand === 'error'
+            <div className="flex flex-col gap-2">
-  ) return 'rejected'
+              <div className="h-4 w-32 bg-bg-elevated rounded" />
-  // 如果脚本阶段待提交或视频阶段待提交（且脚本已完成）
+              <div className="h-3 w-48 bg-bg-elevated rounded" />
-  if (task.scriptStage.submit === 'current' || (task.scriptStage.brand === 'done' && task.videoStage.submit === 'current')) return 'pending'
+            </div>
-  // 其他情况为审核中
+          </div>
-  return 'reviewing'
+          <div className="h-10 w-24 bg-bg-elevated rounded-[10px]" />
+        </div>
+        <div className="flex flex-col gap-3 pt-3">
+          <div className="h-8 bg-bg-elevated rounded" />
+          <div className="h-8 bg-bg-elevated rounded" />
+        </div>
+      </div>
+    </div>
+  )
 }
 
 export default function CreatorTasksPage() {
   const router = useRouter()
+  const { subscribe } = useSSE()
   const [searchQuery, setSearchQuery] = useState('')
   const [filter, setFilter] = useState<TaskFilter>('all')
   const [showFilterDropdown, setShowFilterDropdown] = useState(false)
-  const [tasks] = useState<Task[]>(mockTasks)
+  const [tasks, setTasks] = useState<Task[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [total, setTotal] = useState(0)
+
+  const loadTasks = useCallback(async () => {
+    if (USE_MOCK) {
+      setTasks(mockTasks)
+      setTotal(mockTasks.length)
+      setIsLoading(false)
+      return
+    }
+
+    try {
+      setIsLoading(true)
+      const response = await api.listTasks(1, 50)
+      const mapped = response.items.map(mapTaskResponseToUI)
+      setTasks(mapped)
+      setTotal(response.total)
+    } catch (err) {
+      console.error('加载任务失败:', err)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    loadTasks()
+  }, [loadTasks])
+
+  // SSE 实时更新
+  useEffect(() => {
+    const unsub1 = subscribe('task_updated', () => { loadTasks() })
+    const unsub2 = subscribe('new_task', () => { loadTasks() })
+    return () => { unsub1(); unsub2() }
+  }, [subscribe, loadTasks])
 
   const handleTaskClick = (taskId: string) => {
     router.push(`/creator/task/${taskId}`)
   }
 
-  // 过滤任务
   const filteredTasks = tasks.filter(task => {
-    // 搜索过滤
     const matchesSearch = searchQuery === '' ||
       task.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
       task.description.toLowerCase().includes(searchQuery.toLowerCase())
 
-    // 状态过滤
+    const matchesFilter = filter === 'all' || task.filterCategory === filter
-    const matchesFilter = filter === 'all' || getTaskFilterCategory(task) === filter
 
     return matchesSearch && matchesFilter
   })
@@ -455,12 +347,11 @@ export default function CreatorTasksPage() {
   return (
     <ResponsiveLayout role="creator">
       <div className="flex flex-col gap-6 h-full">
-        {/* 顶部栏 */}
         <div className="flex items-center justify-between flex-wrap gap-4">
           <div className="flex flex-col gap-1">
             <h1 className="text-2xl lg:text-[28px] font-bold text-text-primary">我的任务</h1>
             <p className="text-sm lg:text-[15px] text-text-secondary">
-              {filter === 'all' ? `共 ${tasks.length} 个任务` : `${currentFilterLabel} ${filteredTasks.length} 个`}
+              {filter === 'all' ? `共 ${total} 个任务` : `${currentFilterLabel} ${filteredTasks.length} 个`}
             </p>
           </div>
           <div className="flex items-center gap-3">
@@ -521,9 +412,14 @@ export default function CreatorTasksPage() {
           </div>
         </div>
 
-        {/* 任务列表 - 可滚动 */}
         <div className="flex flex-col gap-4 flex-1 overflow-y-auto pr-2">
-          {filteredTasks.length === 0 ? (
+          {isLoading ? (
+            <>
+              <TaskSkeleton />
+              <TaskSkeleton />
+              <TaskSkeleton />
+            </>
+          ) : filteredTasks.length === 0 ? (
             <div className="flex flex-col items-center justify-center py-16 text-center">
               <Search className="w-12 h-12 text-text-tertiary mb-4" />
               <p className="text-text-secondary">没有找到匹配的任务</p>

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

@@ -1,299 +1,213 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
-import { useRouter, useParams, useSearchParams } from 'next/navigation'
+import { useRouter, useParams } from 'next/navigation'
 import { useToast } from '@/components/ui/Toast'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
 import { Button } from '@/components/ui/Button'
-import { SuccessTag, WarningTag, ErrorTag, PendingTag } from '@/components/ui/Tag'
+import { SuccessTag, WarningTag, ErrorTag } from '@/components/ui/Tag'
 import { ReviewSteps, getReviewSteps } from '@/components/ui/ReviewSteps'
 import {
-  ArrowLeft,
+  ArrowLeft, Upload, FileText, CheckCircle, XCircle, AlertTriangle,
-  Upload,
+  Clock, Loader2, RefreshCw, Eye, Download, File, Target, Ban,
-  FileText,
+  ChevronDown, ChevronUp
-  CheckCircle,
-  XCircle,
-  AlertTriangle,
-  Clock,
-  Loader2,
-  RefreshCw,
-  Eye,
-  MessageSquare,
-  Download,
-  File,
-  Target,
-  Ban,
-  ChevronDown,
-  ChevronUp
 } from 'lucide-react'
 import { Modal } from '@/components/ui/Modal'
+import { api } from '@/lib/api'
+import { USE_MOCK } from '@/contexts/AuthContext'
+import { useSSE } from '@/contexts/SSEContext'
+import { useOSSUpload } from '@/hooks/useOSSUpload'
+import type { TaskResponse, AIReviewResult } from '@/types/task'
+import type { BriefResponse } from '@/types/brief'
 
-// 代理商Brief文档（达人可查看）
+// ========== 类型 ==========
-type AgencyBriefFile = {
+type AgencyBriefFile = { id: string; name: string; size: string; uploadedAt: string; description?: string }
-  id: string
+
-  name: string
+type ScriptTaskUI = {
-  size: string
+  projectName: string
-  uploadedAt: string
+  brandName: string
-  description?: string
+  scriptStatus: string
+  scriptFile: string | null
+  aiResult: null | {
+    score: number
+    violations: Array<{ type: string; content: string; suggestion: string }>
+    complianceChecks: Array<{ item: string; passed: boolean; note?: string }>
+  }
+  agencyReview: null | { result: 'approved' | 'rejected'; comment: string; reviewer: string; time: string }
+  brandReview: null | { result: 'approved' | 'rejected'; comment: string; reviewer: string; time: string }
 }
 
-const mockAgencyBrief = {
+type BriefUI = {
-  // 代理商上传的Brief文档
+  files: AgencyBriefFile[]
+  sellingPoints: { id: string; content: string; required: boolean }[]
+  blacklistWords: { id: string; word: string; reason: string }[]
+}
+
+// ========== 映射 ==========
+function mapApiToScriptUI(task: TaskResponse): ScriptTaskUI {
+  const stage = task.stage
+  let status = 'pending_upload'
+  switch (stage) {
+    case 'script_upload': status = 'pending_upload'; break
+    case 'script_ai_review': status = 'ai_reviewing'; break
+    case 'script_agency_review': status = 'agent_reviewing'; break
+    case 'script_brand_review': status = 'brand_reviewing'; break
+    default:
+      if (stage.startsWith('video_') || stage === 'completed') status = 'brand_passed'
+      if (stage === 'rejected') {
+        if (task.script_brand_status === 'rejected') status = 'brand_rejected'
+        else if (task.script_agency_status === 'rejected') status = 'agent_rejected'
+        else status = 'ai_result'
+      }
+  }
+  // 有 AI 结果且还在脚本审核阶段 → ai_result
+  if (task.script_ai_result && stage === 'script_agency_review') status = 'agent_reviewing'
+
+  const aiResult = task.script_ai_result ? {
+    score: task.script_ai_result.score,
+    violations: task.script_ai_result.violations.map(v => ({ type: v.type, content: v.content, suggestion: v.suggestion })),
+    complianceChecks: task.script_ai_result.violations.map(v => ({
+      item: v.type, passed: v.severity !== 'error' && v.severity !== 'warning', note: v.suggestion,
+    })),
+  } : null
+
+  const agencyReview = task.script_agency_status && task.script_agency_status !== 'pending' ? {
+    result: (task.script_agency_status === 'passed' || task.script_agency_status === 'force_passed' ? 'approved' : 'rejected') as 'approved' | 'rejected',
+    comment: task.script_agency_comment || '',
+    reviewer: task.agency?.name || '代理商',
+    time: task.updated_at,
+  } : null
+
+  const brandReview = task.script_brand_status && task.script_brand_status !== 'pending' ? {
+    result: (task.script_brand_status === 'passed' || task.script_brand_status === 'force_passed' ? 'approved' : 'rejected') as 'approved' | 'rejected',
+    comment: task.script_brand_comment || '',
+    reviewer: '品牌方审核员',
+    time: task.updated_at,
+  } : null
+
+  return {
+    projectName: task.project?.name || task.name,
+    brandName: task.project?.brand_name || '',
+    scriptStatus: status,
+    scriptFile: task.script_file_name || null,
+    aiResult,
+    agencyReview,
+    brandReview,
+  }
+}
+
+function mapBriefToUI(brief: BriefResponse): BriefUI {
+  return {
+    files: (brief.attachments || []).map((a, i) => ({
+      id: a.id || `att-${i}`, name: a.name, size: a.size || '', uploadedAt: brief.updated_at || '',
+    })),
+    sellingPoints: (brief.selling_points || []).map((sp, i) => ({ id: `sp-${i}`, content: sp.content, required: sp.required })),
+    blacklistWords: (brief.blacklist_words || []).map((bw, i) => ({ id: `bw-${i}`, word: bw.word, reason: bw.reason })),
+  }
+}
+
+// Mock 数据
+const mockBrief: BriefUI = {
   files: [
-    { id: 'af1', name: '达人拍摄指南.pdf', size: '1.5MB', uploadedAt: '2026-02-02', description: '详细的拍摄流程和注意事项' },
+    { id: 'af1', name: '达人拍摄指南.pdf', size: '1.5MB', uploadedAt: '2026-02-02' },
-    { id: 'af2', name: '产品卖点话术.docx', size: '800KB', uploadedAt: '2026-02-02', description: '推荐使用的话术和表达方式' },
+    { id: 'af2', name: '产品卖点话术.docx', size: '800KB', uploadedAt: '2026-02-02' },
-    { id: 'af3', name: '品牌视觉参考.pdf', size: '3.2MB', uploadedAt: '2026-02-02', description: '视觉风格和拍摄参考示例' },
+  ],
-  ] as AgencyBriefFile[],
-  // 卖点要求
   sellingPoints: [
     { id: 'sp1', content: 'SPF50+ PA++++', required: true },
     { id: 'sp2', content: '轻薄质地，不油腻', required: true },
     { id: 'sp3', content: '延展性好，易推开', required: false },
-    { id: 'sp4', content: '适合敏感肌', required: false },
-    { id: 'sp5', content: '夏日必备防晒', required: true },
   ],
-  // 违禁词
   blacklistWords: [
     { id: 'bw1', word: '最好', reason: '绝对化用语' },
     { id: 'bw2', word: '第一', reason: '绝对化用语' },
-    { id: 'bw3', word: '神器', reason: '夸大宣传' },
-    { id: 'bw4', word: '完美', reason: '绝对化用语' },
   ],
 }
 
-// 模拟任务数据
+const mockDefaultTask: ScriptTaskUI = {
-const mockTask = {
+  projectName: 'XX品牌618推广', brandName: 'XX护肤品牌',
-  id: 'task-001',
+  scriptStatus: 'pending_upload', scriptFile: null, aiResult: null, agencyReview: null, brandReview: null,
-  projectName: 'XX品牌618推广',
-  brandName: 'XX护肤品牌',
-  deadline: '2026-06-18',
-  scriptStatus: 'pending_upload', // pending_upload | ai_reviewing | ai_result | agent_reviewing | agent_rejected | brand_reviewing | brand_passed | brand_rejected
-  scriptFile: null as string | null,
-  aiResult: null as null | {
-    score: number
-    violations: Array<{ type: string; content: string; suggestion: string }>
-    complianceChecks: Array<{ item: string; passed: boolean; note?: string }>
-  },
-  agencyReview: null as null | {
-    result: 'approved' | 'rejected'
-    comment: string
-    reviewer: string
-    time: string
-  },
-  brandReview: null as null | {
-    result: 'approved' | 'rejected'
-    comment: string
-    reviewer: string
-    time: string
-  },
 }
 
-// 根据状态获取模拟数据
+// ========== UI 组件 ==========
-function getTaskByStatus(status: string) {
-  const task = { ...mockTask, scriptStatus: status }
 
-  if (status === 'ai_result' || status === 'agent_reviewing' || status === 'agent_rejected' || status === 'brand_reviewing' || status === 'brand_passed' || status === 'brand_rejected') {
+function AgencyBriefSection({ toast, briefData }: { toast: ReturnType<typeof useToast>; briefData: BriefUI }) {
-    task.scriptFile = '夏日护肤推广脚本.docx'
-    task.aiResult = {
-      score: 85,
-      violations: [
-        { type: '违禁词', content: '神器', suggestion: '建议替换为"好物"或"必备品"' },
-      ],
-      complianceChecks: [
-        { item: '品牌名称正确', passed: true },
-        { item: 'SPF标注准确', passed: true },
-        { item: '无绝对化用语', passed: false, note: '"超级好用"建议修改' },
-      ],
-    }
-  }
-
-  if (status === 'agent_rejected') {
-    task.agencyReview = {
-      result: 'rejected',
-      comment: '违禁词未修改，请修改后重新提交。',
-      reviewer: '张经理',
-      time: '2026-02-06 15:30',
-    }
-  }
-
-  if (status === 'brand_reviewing' || status === 'brand_passed' || status === 'brand_rejected') {
-    task.agencyReview = {
-      result: 'approved',
-      comment: '脚本符合要求，建议通过。',
-      reviewer: '张经理',
-      time: '2026-02-06 15:30',
-    }
-  }
-
-  if (status === 'brand_passed') {
-    task.brandReview = {
-      result: 'approved',
-      comment: '脚本通过终审，可以开始拍摄视频。',
-      reviewer: '品牌方审核员',
-      time: '2026-02-06 18:00',
-    }
-  }
-
-  if (status === 'brand_rejected') {
-    task.brandReview = {
-      result: 'rejected',
-      comment: '产品卖点覆盖不完整，请补充后重新提交。',
-      reviewer: '品牌方审核员',
-      time: '2026-02-06 18:00',
-    }
-  }
-
-  return task
-}
-
-// 代理商Brief文档查看组件
-function AgencyBriefSection({ toast }: { toast: ReturnType<typeof useToast> }) {
   const [isExpanded, setIsExpanded] = useState(true)
   const [previewFile, setPreviewFile] = useState<AgencyBriefFile | null>(null)
-
+  const handleDownload = (file: AgencyBriefFile) => { toast.info(`下载文件: ${file.name}`) }
-  const handleDownload = (file: AgencyBriefFile) => {
+  const requiredPoints = briefData.sellingPoints.filter(sp => sp.required)
-    toast.info(`下载文件: ${file.name}`)
+  const optionalPoints = briefData.sellingPoints.filter(sp => !sp.required)
-  }
-
-  const handlePreview = (file: AgencyBriefFile) => {
-    setPreviewFile(file)
-  }
-
-  const requiredPoints = mockAgencyBrief.sellingPoints.filter(sp => sp.required)
-  const optionalPoints = mockAgencyBrief.sellingPoints.filter(sp => !sp.required)
 
   return (
     <>
       <Card className="border-accent-indigo/30">
         <CardHeader>
           <CardTitle className="flex items-center justify-between">
-            <span className="flex items-center gap-2">
+            <span className="flex items-center gap-2"><File size={18} className="text-accent-indigo" />Brief 文档与要求</span>
-              <File size={18} className="text-accent-indigo" />
+            <button type="button" onClick={() => setIsExpanded(!isExpanded)} className="p-1 hover:bg-bg-elevated rounded">
-              Brief 文档与要求
+              {isExpanded ? <ChevronUp size={18} className="text-text-tertiary" /> : <ChevronDown size={18} className="text-text-tertiary" />}
-            </span>
-            <button
-              type="button"
-              onClick={() => setIsExpanded(!isExpanded)}
-              className="p-1 hover:bg-bg-elevated rounded"
-            >
-              {isExpanded ? (
-                <ChevronUp size={18} className="text-text-tertiary" />
-              ) : (
-                <ChevronDown size={18} className="text-text-tertiary" />
-              )}
             </button>
           </CardTitle>
         </CardHeader>
         {isExpanded && (
           <CardContent className="space-y-4">
-            {/* Brief文档列表 */}
             <div>
-              <h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2">
+              <h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2"><FileText size={14} className="text-accent-indigo" />参考文档</h4>
-                <FileText size={14} className="text-accent-indigo" />
-                参考文档
-              </h4>
               <div className="space-y-2">
-                {mockAgencyBrief.files.map((file) => (
+                {briefData.files.map((file) => (
                   <div key={file.id} className="flex items-center justify-between p-3 bg-bg-elevated rounded-lg">
                     <div className="flex items-center gap-3 min-w-0">
-                      <div className="w-8 h-8 rounded bg-accent-indigo/15 flex items-center justify-center flex-shrink-0">
+                      <div className="w-8 h-8 rounded bg-accent-indigo/15 flex items-center justify-center flex-shrink-0"><FileText size={16} className="text-accent-indigo" /></div>
-                        <FileText size={16} className="text-accent-indigo" />
-                      </div>
                       <div className="min-w-0">
                         <p className="text-sm font-medium text-text-primary truncate">{file.name}</p>
                         <p className="text-xs text-text-tertiary">{file.size}</p>
                       </div>
                     </div>
                     <div className="flex items-center gap-1 flex-shrink-0">
-                      <Button variant="ghost" size="sm" onClick={() => handlePreview(file)}>
+                      <Button variant="ghost" size="sm" onClick={() => setPreviewFile(file)}><Eye size={14} /></Button>
-                        <Eye size={14} />
+                      <Button variant="ghost" size="sm" onClick={() => handleDownload(file)}><Download size={14} /></Button>
-                      </Button>
-                      <Button variant="ghost" size="sm" onClick={() => handleDownload(file)}>
-                        <Download size={14} />
-                      </Button>
                     </div>
                   </div>
                 ))}
               </div>
             </div>
-
-            {/* 卖点要求 */}
             <div>
-              <h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2">
+              <h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2"><Target size={14} className="text-accent-green" />卖点要求</h4>
-                <Target size={14} className="text-accent-green" />
-                卖点要求
-              </h4>
               <div className="space-y-2">
                 {requiredPoints.length > 0 && (
                   <div className="p-3 bg-accent-coral/10 rounded-lg border border-accent-coral/30">
                     <p className="text-xs text-accent-coral font-medium mb-2">必选卖点（必须提及）</p>
-                    <div className="flex flex-wrap gap-2">
+                    <div className="flex flex-wrap gap-2">{requiredPoints.map((sp) => (
-                      {requiredPoints.map((sp) => (
+                      <span key={sp.id} className="px-2 py-1 text-xs bg-accent-coral/20 text-accent-coral rounded">{sp.content}</span>
-                        <span key={sp.id} className="px-2 py-1 text-xs bg-accent-coral/20 text-accent-coral rounded">
+                    ))}</div>
-                          {sp.content}
-                        </span>
-                      ))}
-                    </div>
                   </div>
                 )}
                 {optionalPoints.length > 0 && (
                   <div className="p-3 bg-bg-elevated rounded-lg">
                     <p className="text-xs text-text-tertiary font-medium mb-2">可选卖点</p>
-                    <div className="flex flex-wrap gap-2">
+                    <div className="flex flex-wrap gap-2">{optionalPoints.map((sp) => (
-                      {optionalPoints.map((sp) => (
+                      <span key={sp.id} className="px-2 py-1 text-xs bg-bg-page text-text-secondary rounded">{sp.content}</span>
-                        <span key={sp.id} className="px-2 py-1 text-xs bg-bg-page text-text-secondary rounded">
+                    ))}</div>
-                          {sp.content}
-                        </span>
-                      ))}
-                    </div>
                   </div>
                 )}
               </div>
             </div>
-
-            {/* 违禁词 */}
             <div>
-              <h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2">
+              <h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2"><Ban size={14} className="text-accent-coral" />违禁词</h4>
-                <Ban size={14} className="text-accent-coral" />
+              <div className="flex flex-wrap gap-2">{briefData.blacklistWords.map((bw) => (
-                违禁词（请勿使用）
+                <span key={bw.id} className="px-2 py-1 text-xs bg-accent-coral/15 text-accent-coral rounded border border-accent-coral/30">「{bw.word}」</span>
-              </h4>
+              ))}</div>
-              <div className="flex flex-wrap gap-2">
-                {mockAgencyBrief.blacklistWords.map((bw) => (
-                  <span key={bw.id} className="px-2 py-1 text-xs bg-accent-coral/15 text-accent-coral rounded border border-accent-coral/30">
-                    「{bw.word}」
-                  </span>
-                ))}
-              </div>
             </div>
           </CardContent>
         )}
       </Card>
-
+      <Modal isOpen={!!previewFile} onClose={() => setPreviewFile(null)} title={previewFile?.name || '文件预览'} size="lg">
-      {/* 文件预览弹窗 */}
-      <Modal
-        isOpen={!!previewFile}
-        onClose={() => setPreviewFile(null)}
-        title={previewFile?.name || '文件预览'}
-        size="lg"
-      >
         <div className="space-y-4">
           <div className="aspect-[4/3] bg-bg-elevated rounded-lg flex items-center justify-center">
-            <div className="text-center">
+            <div className="text-center"><FileText size={48} className="mx-auto text-accent-indigo mb-4" /><p className="text-text-secondary">文件预览区域</p></div>
-              <FileText size={48} className="mx-auto text-accent-indigo mb-4" />
-              <p className="text-text-secondary">文件预览区域</p>
-              <p className="text-xs text-text-tertiary mt-1">实际开发中将嵌入文件预览组件</p>
-            </div>
           </div>
           <div className="flex justify-end gap-2">
-            <Button variant="secondary" onClick={() => setPreviewFile(null)}>
+            <Button variant="secondary" onClick={() => setPreviewFile(null)}>关闭</Button>
-              关闭
+            {previewFile && <Button onClick={() => handleDownload(previewFile)}><Download size={16} />下载文件</Button>}
-            </Button>
-            {previewFile && (
-              <Button onClick={() => handleDownload(previewFile)}>
-                <Download size={16} />
-                下载文件
-              </Button>
-            )}
           </div>
         </div>
       </Modal>
@@ -301,54 +215,66 @@ function AgencyBriefSection({ toast }: { toast: ReturnType<typeof useToast> }) {
   )
 }
 
-function UploadSection({ onUpload }: { onUpload: () => void }) {
+function UploadSection({ taskId, onUploaded }: { taskId: string; onUploaded: () => void }) {
   const [file, setFile] = useState<File | null>(null)
+  const { upload, isUploading, progress } = useOSSUpload('script')
+  const toast = useToast()
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const selectedFile = e.target.files?.[0]
-    if (selectedFile) {
+    if (selectedFile) setFile(selectedFile)
-      setFile(selectedFile)
+  }
+
+  const handleSubmit = async () => {
+    if (!file) return
+    try {
+      const result = await upload(file)
+      if (!USE_MOCK) {
+        await api.uploadTaskScript(taskId, { file_url: result.url, file_name: result.file_name })
+      }
+      toast.success('脚本已提交，等待 AI 审核')
+      onUploaded()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : '上传失败')
     }
   }
 
   return (
     <Card>
-      <CardHeader>
+      <CardHeader><CardTitle className="flex items-center gap-2"><Upload size={18} className="text-accent-indigo" />上传脚本</CardTitle></CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <Upload size={18} className="text-accent-indigo" />
-          上传脚本
-        </CardTitle>
-      </CardHeader>
       <CardContent className="space-y-4">
         <div className="border-2 border-dashed border-border-subtle rounded-lg p-8 text-center hover:border-accent-indigo/50 transition-colors">
           {file ? (
-            <div className="flex items-center justify-center gap-3">
+            <div className="space-y-4">
-              <FileText size={24} className="text-accent-indigo" />
+              <div className="flex items-center justify-center gap-3">
-              <span className="text-text-primary">{file.name}</span>
+                <FileText size={24} className="text-accent-indigo" />
-              <button
+                <span className="text-text-primary">{file.name}</span>
-                type="button"
+                {!isUploading && (
-                onClick={() => setFile(null)}
+                  <button type="button" onClick={() => setFile(null)} className="p-1 hover:bg-bg-elevated rounded-full">
-                className="p-1 hover:bg-bg-elevated rounded-full"
+                    <XCircle size={16} className="text-text-tertiary" />
-              >
+                  </button>
-                <XCircle size={16} className="text-text-tertiary" />
+                )}
-              </button>
+              </div>
+              {isUploading && (
+                <div className="w-full max-w-xs mx-auto">
+                  <div className="h-2 bg-bg-elevated rounded-full overflow-hidden mb-2">
+                    <div className="h-full bg-accent-indigo transition-all" style={{ width: `${progress}%` }} />
+                  </div>
+                  <p className="text-sm text-text-tertiary">上传中 {progress}%</p>
+                </div>
+              )}
             </div>
           ) : (
             <label className="cursor-pointer">
               <Upload size={32} className="mx-auto text-text-tertiary mb-3" />
               <p className="text-text-secondary mb-1">点击或拖拽上传脚本文件</p>
               <p className="text-xs text-text-tertiary">支持 Word、PDF、TXT 格式</p>
-              <input
+              <input type="file" accept=".doc,.docx,.pdf,.txt" onChange={handleFileChange} className="hidden" />
-                type="file"
-                accept=".doc,.docx,.pdf,.txt"
-                onChange={handleFileChange}
-                className="hidden"
-              />
             </label>
           )}
         </div>
-        <Button onClick={onUpload} disabled={!file} fullWidth>
+        <Button onClick={handleSubmit} disabled={!file || isUploading} fullWidth>
-          提交脚本
+          {isUploading ? '上传中...' : '提交脚本'}
         </Button>
       </CardContent>
     </Card>
@@ -358,36 +284,12 @@ function UploadSection({ onUpload }: { onUpload: () => void }) {
 function AIReviewingSection() {
   const [progress, setProgress] = useState(0)
   const [logs, setLogs] = useState<string[]>(['开始解析脚本文件...'])
-
   useEffect(() => {
-    const timer = setInterval(() => {
+    const timer = setInterval(() => { setProgress(prev => prev >= 100 ? (clearInterval(timer), 100) : prev + 10) }, 500)
-      setProgress(prev => {
+    const t1 = setTimeout(() => setLogs(prev => [...prev, '正在提取文本内容...']), 1000)
-        if (prev >= 100) {
+    const t2 = setTimeout(() => setLogs(prev => [...prev, '正在进行违禁词检测...']), 2000)
-          clearInterval(timer)
+    const t3 = setTimeout(() => setLogs(prev => [...prev, '正在分析卖点覆盖...']), 3000)
-          return 100
+    return () => { clearInterval(timer); clearTimeout(t1); clearTimeout(t2); clearTimeout(t3) }
-        }
-        return prev + 10
-      })
-    }, 500)
-
-    const logTimer = setTimeout(() => {
-      setLogs(prev => [...prev, '正在提取文本内容...'])
-    }, 1000)
-
-    const logTimer2 = setTimeout(() => {
-      setLogs(prev => [...prev, '正在进行违禁词检测...'])
-    }, 2000)
-
-    const logTimer3 = setTimeout(() => {
-      setLogs(prev => [...prev, '正在分析卖点覆盖...'])
-    }, 3000)
-
-    return () => {
-      clearInterval(timer)
-      clearTimeout(logTimer)
-      clearTimeout(logTimer2)
-      clearTimeout(logTimer3)
-    }
   }, [])
 
   return (
@@ -397,69 +299,47 @@ function AIReviewingSection() {
         <h3 className="text-lg font-medium text-text-primary mb-2">AI 正在审核您的脚本</h3>
         <p className="text-text-secondary mb-4">请稍候，预计需要 1-2 分钟</p>
         <div className="w-full max-w-md mx-auto">
-          <div className="h-2 bg-bg-elevated rounded-full overflow-hidden mb-2">
+          <div className="h-2 bg-bg-elevated rounded-full overflow-hidden mb-2"><div className="h-full bg-accent-indigo transition-all" style={{ width: `${progress}%` }} /></div>
-            <div className="h-full bg-accent-indigo transition-all" style={{ width: `${progress}%` }} />
-          </div>
           <p className="text-sm text-text-tertiary">{progress}%</p>
         </div>
         <div className="mt-6 p-4 bg-bg-elevated rounded-lg text-left max-w-md mx-auto">
           <p className="text-xs text-text-tertiary mb-2">处理日志</p>
-          {logs.map((log, idx) => (
+          {logs.map((log, idx) => <p key={idx} className="text-sm text-text-secondary">{log}</p>)}
-            <p key={idx} className="text-sm text-text-secondary">{log}</p>
-          ))}
         </div>
       </CardContent>
     </Card>
   )
 }
 
-function AIResultSection({ task }: { task: ReturnType<typeof getTaskByStatus> }) {
+function AIResultSection({ task }: { task: ScriptTaskUI }) {
   if (!task.aiResult) return null
-
   return (
     <Card>
       <CardHeader>
         <CardTitle className="flex items-center justify-between">
-          <span className="flex items-center gap-2">
+          <span className="flex items-center gap-2"><CheckCircle size={18} className="text-accent-green" />AI 审核结果</span>
-            <CheckCircle size={18} className="text-accent-green" />
+          <span className={`text-xl font-bold ${task.aiResult.score >= 85 ? 'text-accent-green' : task.aiResult.score >= 70 ? 'text-yellow-400' : 'text-accent-coral'}`}>{task.aiResult.score}分</span>
-            AI 审核结果
-          </span>
-          <span className={`text-xl font-bold ${task.aiResult.score >= 85 ? 'text-accent-green' : task.aiResult.score >= 70 ? 'text-yellow-400' : 'text-accent-coral'}`}>
-            {task.aiResult.score}分
-          </span>
         </CardTitle>
       </CardHeader>
       <CardContent className="space-y-4">
-        {/* 违规检测 */}
         {task.aiResult.violations.length > 0 && (
           <div>
-            <h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2">
+            <h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2"><AlertTriangle size={14} className="text-orange-500" />违规检测 ({task.aiResult.violations.length})</h4>
-              <AlertTriangle size={14} className="text-orange-500" />
-              违规检测 ({task.aiResult.violations.length})
-            </h4>
             {task.aiResult.violations.map((v, idx) => (
               <div key={idx} className="p-3 bg-orange-500/10 rounded-lg border border-orange-500/30 mb-2">
-                <div className="flex items-center gap-2 mb-1">
+                <div className="flex items-center gap-2 mb-1"><WarningTag>{v.type}</WarningTag></div>
-                  <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>
             ))}
           </div>
         )}
-
-        {/* 合规检查 */}
         <div>
           <h4 className="text-sm font-medium text-text-primary mb-2">合规检查</h4>
           <div className="space-y-2">
             {task.aiResult.complianceChecks.map((check, idx) => (
               <div key={idx} className="flex items-start gap-2 p-2 rounded-lg bg-bg-elevated">
-                {check.passed ? (
+                {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" />}
-                  <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>}
@@ -473,22 +353,14 @@ function AIResultSection({ task }: { task: ReturnType<typeof getTaskByStatus> })
   )
 }
 
-function ReviewFeedbackSection({ review, type }: { review: NonNullable<typeof mockTask.agencyReview>; type: 'agency' | 'brand' }) {
+function ReviewFeedbackSection({ review, type }: { review: { result: string; comment: string; reviewer: string; time: string }; type: 'agency' | 'brand' }) {
   const isApproved = review.result === 'approved'
   const title = type === 'agency' ? '代理商审核意见' : '品牌方终审意见'
-
   return (
     <Card className={isApproved ? 'border-accent-green/30' : 'border-accent-coral/30'}>
-      <CardHeader>
+      <CardHeader><CardTitle className="flex items-center gap-2">
-        <CardTitle className="flex items-center gap-2">
+        {isApproved ? <CheckCircle size={18} className="text-accent-green" /> : <XCircle size={18} className="text-accent-coral" />}{title}
-          {isApproved ? (
+      </CardTitle></CardHeader>
-            <CheckCircle size={18} className="text-accent-green" />
-          ) : (
-            <XCircle size={18} className="text-accent-coral" />
-          )}
-          {title}
-        </CardTitle>
-      </CardHeader>
       <CardContent>
         <div className="flex items-center gap-2 mb-2">
           <span className="font-medium text-text-primary">{review.reviewer}</span>
@@ -503,158 +375,118 @@ function ReviewFeedbackSection({ review, type }: { review: NonNullable<typeof mo
 
 function WaitingSection({ message }: { message: string }) {
   return (
-    <Card>
+    <Card><CardContent className="py-8 text-center">
-      <CardContent className="py-8 text-center">
+      <Clock size={48} className="mx-auto text-accent-indigo mb-4" />
-        <Clock size={48} className="mx-auto text-accent-indigo mb-4" />
+      <h3 className="text-lg font-medium text-text-primary mb-2">{message}</h3>
-        <h3 className="text-lg font-medium text-text-primary mb-2">{message}</h3>
+      <p className="text-text-secondary">请耐心等待，审核结果将通过消息通知您</p>
-        <p className="text-text-secondary">请耐心等待，审核结果将通过消息通知您</p>
+    </CardContent></Card>
-      </CardContent>
-    </Card>
   )
 }
 
 function SuccessSection({ onContinue }: { onContinue: () => void }) {
   return (
-    <Card className="border-accent-green/30">
+    <Card className="border-accent-green/30"><CardContent className="py-8 text-center">
-      <CardContent className="py-8 text-center">
+      <CheckCircle size={48} className="mx-auto text-accent-green mb-4" />
-        <CheckCircle size={48} className="mx-auto text-accent-green mb-4" />
+      <h3 className="text-lg font-medium text-text-primary mb-2">脚本审核通过！</h3>
-        <h3 className="text-lg font-medium text-text-primary mb-2">脚本审核通过！</h3>
+      <p className="text-text-secondary mb-6">您可以开始拍摄视频了</p>
-        <p className="text-text-secondary mb-6">您可以开始拍摄视频了</p>
+      <Button onClick={onContinue}>上传视频</Button>
-        <Button onClick={onContinue}>
+    </CardContent></Card>
-          上传视频
-        </Button>
-      </CardContent>
-    </Card>
   )
 }
 
+// ========== 主页面 ==========
+
 export default function CreatorScriptPage() {
   const router = useRouter()
   const params = useParams()
-  const searchParams = useSearchParams()
   const toast = useToast()
-  const status = searchParams.get('status') || 'pending_upload'
+  const { subscribe } = useSSE()
+  const taskId = params.id as string
 
-  const [task, setTask] = useState(getTaskByStatus(status))
+  const [task, setTask] = useState<ScriptTaskUI>(mockDefaultTask)
+  const [briefData, setBriefData] = useState<BriefUI>(mockBrief)
+  const [isLoading, setIsLoading] = useState(true)
 
-  // 模拟状态切换
+  const loadTask = useCallback(async () => {
-  const simulateUpload = () => {
+    if (USE_MOCK) {
-    setTask(getTaskByStatus('ai_reviewing'))
+      setIsLoading(false)
-    setTimeout(() => {
+      return
-      setTask(getTaskByStatus('ai_result'))
+    }
-    }, 4000)
+    try {
-  }
+      const apiTask = await api.getTask(taskId)
+      setTask(mapApiToScriptUI(apiTask))
+      if (apiTask.project?.id) {
+        try {
+          const brief = await api.getBrief(apiTask.project.id)
+          setBriefData(mapBriefToUI(brief))
+        } catch { /* Brief may not exist */ }
+      }
+    } catch (err) {
+      toast.error('加载任务失败')
+    } finally {
+      setIsLoading(false)
+    }
+  }, [taskId, toast])
 
-  const handleResubmit = () => {
+  useEffect(() => { loadTask() }, [loadTask])
-    setTask(getTaskByStatus('pending_upload'))
-  }
 
-  const handleContinueToVideo = () => {
+  useEffect(() => {
-    router.push(`/creator/task/${params.id}/video`)
+    const unsub1 = subscribe('task_updated', (data) => {
-  }
+      if ((data as { task_id?: string }).task_id === taskId) loadTask()
+    })
+    const unsub2 = subscribe('review_completed', (data) => {
+      if ((data as { task_id?: string }).task_id === taskId) loadTask()
+    })
+    return () => { unsub1(); unsub2() }
+  }, [subscribe, taskId, loadTask])
+
+  const handleContinueToVideo = () => { router.push(`/creator/task/${params.id}/video`) }
 
   const getStatusDisplay = () => {
-    switch (task.scriptStatus) {
+    const map: Record<string, string> = {
-      case 'pending_upload': return '待上传脚本'
+      pending_upload: '待上传脚本', ai_reviewing: 'AI 审核中', ai_result: 'AI 审核完成',
-      case 'ai_reviewing': return 'AI 审核中'
+      agent_reviewing: '代理商审核中', agent_rejected: '代理商驳回',
-      case 'ai_result': return 'AI 审核完成'
+      brand_reviewing: '品牌方终审中', brand_passed: '审核通过', brand_rejected: '品牌方驳回',
-      case 'agent_reviewing': return '代理商审核中'
-      case 'agent_rejected': return '代理商驳回'
-      case 'brand_reviewing': return '品牌方终审中'
-      case 'brand_passed': return '审核通过'
-      case 'brand_rejected': return '品牌方驳回'
-      default: return '未知状态'
     }
+    return map[task.scriptStatus] || '未知状态'
+  }
+
+  if (isLoading) {
+    return <div className="flex items-center justify-center h-64"><Loader2 className="w-8 h-8 text-accent-indigo animate-spin" /></div>
   }
 
   return (
     <div className="space-y-6 max-w-2xl mx-auto">
-      {/* 顶部导航 */}
       <div className="flex items-center gap-4">
-        <button type="button" onClick={() => router.back()} className="p-2 hover:bg-bg-elevated rounded-full">
+        <button type="button" onClick={() => router.back()} className="p-2 hover:bg-bg-elevated rounded-full"><ArrowLeft size={20} className="text-text-primary" /></button>
-          <ArrowLeft size={20} className="text-text-primary" />
-        </button>
         <div className="flex-1">
           <h1 className="text-xl font-bold text-text-primary">{task.projectName}</h1>
           <p className="text-sm text-text-secondary">脚本阶段 · {getStatusDisplay()}</p>
         </div>
       </div>
 
-      {/* 审核流程进度条 */}
+      <Card><CardContent className="py-4"><ReviewSteps steps={getReviewSteps(task.scriptStatus)} /></CardContent></Card>
-      <Card>
-        <CardContent className="py-4">
-          <ReviewSteps steps={getReviewSteps(task.scriptStatus)} />
-        </CardContent>
-      </Card>
 
-      {/* Brief文档与要求（始终显示） */}
+      <AgencyBriefSection toast={toast} briefData={briefData} />
-      <AgencyBriefSection toast={toast} />
-
-      {/* 根据状态显示不同内容 */}
-      {task.scriptStatus === 'pending_upload' && (
-        <UploadSection onUpload={simulateUpload} />
-      )}
-
-      {task.scriptStatus === 'ai_reviewing' && (
-        <AIReviewingSection />
-      )}
-
-      {task.scriptStatus === 'ai_result' && (
-        <>
-          <AIResultSection task={task} />
-          <WaitingSection message="等待代理商审核" />
-        </>
-      )}
-
-      {task.scriptStatus === 'agent_reviewing' && (
-        <>
-          <AIResultSection task={task} />
-          <WaitingSection message="等待代理商审核" />
-        </>
-      )}
 
+      {task.scriptStatus === 'pending_upload' && <UploadSection taskId={taskId} onUploaded={loadTask} />}
+      {task.scriptStatus === 'ai_reviewing' && <AIReviewingSection />}
+      {task.scriptStatus === 'ai_result' && <><AIResultSection task={task} /><WaitingSection message="等待代理商审核" /></>}
+      {task.scriptStatus === 'agent_reviewing' && <><AIResultSection task={task} /><WaitingSection message="等待代理商审核" /></>}
       {task.scriptStatus === 'agent_rejected' && task.agencyReview && (
-        <>
+        <><ReviewFeedbackSection review={task.agencyReview} type="agency" /><AIResultSection task={task} />
-          <ReviewFeedbackSection review={task.agencyReview} type="agency" />
+        <div className="flex gap-3"><Button variant="secondary" onClick={loadTask} fullWidth><RefreshCw size={16} />重新上传</Button></div></>
-          <AIResultSection task={task} />
-          <div className="flex gap-3">
-            <Button variant="secondary" onClick={handleResubmit} fullWidth>
-              <RefreshCw size={16} />
-              重新上传
-            </Button>
-          </div>
-        </>
       )}
-
       {task.scriptStatus === 'brand_reviewing' && task.agencyReview && (
-        <>
+        <><ReviewFeedbackSection review={task.agencyReview} type="agency" /><AIResultSection task={task} /><WaitingSection message="等待品牌方终审" /></>
-          <ReviewFeedbackSection review={task.agencyReview} type="agency" />
-          <AIResultSection task={task} />
-          <WaitingSection message="等待品牌方终审" />
-        </>
       )}
-
       {task.scriptStatus === 'brand_passed' && task.agencyReview && task.brandReview && (
-        <>
+        <><SuccessSection onContinue={handleContinueToVideo} /><ReviewFeedbackSection review={task.brandReview} type="brand" />
-          <SuccessSection onContinue={handleContinueToVideo} />
+        <ReviewFeedbackSection review={task.agencyReview} type="agency" /><AIResultSection task={task} /></>
-          <ReviewFeedbackSection review={task.brandReview} type="brand" />
-          <ReviewFeedbackSection review={task.agencyReview} type="agency" />
-          <AIResultSection task={task} />
-        </>
       )}
-
       {task.scriptStatus === 'brand_rejected' && task.agencyReview && task.brandReview && (
-        <>
+        <><ReviewFeedbackSection review={task.brandReview} type="brand" /><ReviewFeedbackSection review={task.agencyReview} type="agency" />
-          <ReviewFeedbackSection review={task.brandReview} type="brand" />
+        <AIResultSection task={task} /><div className="flex gap-3"><Button variant="secondary" onClick={loadTask} fullWidth><RefreshCw size={16} />重新上传</Button></div></>
-          <ReviewFeedbackSection review={task.agencyReview} type="agency" />
-          <AIResultSection task={task} />
-          <div className="flex gap-3">
-            <Button variant="secondary" onClick={handleResubmit} fullWidth>
-              <RefreshCw size={16} />
-              重新上传
-            </Button>
-          </div>
-        </>
       )}
     </div>
   )

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

@@ -1,113 +1,95 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
-import { useRouter, useParams, useSearchParams } from 'next/navigation'
+import { useRouter, useParams } from 'next/navigation'
+import { useToast } from '@/components/ui/Toast'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
 import { Button } from '@/components/ui/Button'
-import { SuccessTag, WarningTag, ErrorTag, PendingTag } from '@/components/ui/Tag'
+import { SuccessTag, WarningTag, ErrorTag } from '@/components/ui/Tag'
 import { ReviewSteps, getReviewSteps } from '@/components/ui/ReviewSteps'
 import {
-  ArrowLeft,
+  ArrowLeft, Upload, Video, CheckCircle, XCircle, AlertTriangle,
-  Upload,
+  Clock, Loader2, RefreshCw, Play, Radio, Shield
-  Video,
-  CheckCircle,
-  XCircle,
-  AlertTriangle,
-  Clock,
-  Loader2,
-  RefreshCw,
-  Play,
-  Radio,
-  Shield
 } from 'lucide-react'
+import { api } from '@/lib/api'
+import { USE_MOCK } from '@/contexts/AuthContext'
+import { useSSE } from '@/contexts/SSEContext'
+import { useOSSUpload } from '@/hooks/useOSSUpload'
+import type { TaskResponse } from '@/types/task'
 
-// 模拟任务数据
+// ========== 类型 ==========
-const mockTask = {
+type VideoTaskUI = {
-  id: 'task-001',
+  projectName: string
-  projectName: 'XX品牌618推广',
+  brandName: string
-  brandName: 'XX护肤品牌',
+  videoStatus: string
-  deadline: '2026-06-18',
+  videoFile: string | null
-  videoStatus: 'pending_upload', // pending_upload | ai_reviewing | ai_result | agent_reviewing | agent_rejected | brand_reviewing | brand_passed | brand_rejected
+  aiResult: null | {
-  videoFile: null as string | null,
-  aiResult: null as null | {
     score: number
     hardViolations: Array<{ type: string; content: string; timestamp: number; suggestion: string }>
     sentimentWarnings: Array<{ type: string; content: string; timestamp: number }>
     sellingPointsCovered: Array<{ point: string; covered: boolean; timestamp?: number }>
-  },
+  }
-  agencyReview: null as null | {
+  agencyReview: null | { result: 'approved' | 'rejected'; comment: string; reviewer: string; time: string }
-    result: 'approved' | 'rejected'
+  brandReview: null | { result: 'approved' | 'rejected'; comment: string; reviewer: string; time: string }
-    comment: string
-    reviewer: string
-    time: string
-  },
-  brandReview: null as null | {
-    result: 'approved' | 'rejected'
-    comment: string
-    reviewer: string
-    time: string
-  },
 }
 
-// 根据状态获取模拟数据
+// ========== 映射 ==========
-function getTaskByStatus(status: string) {
+function mapApiToVideoUI(task: TaskResponse): VideoTaskUI {
-  const task = { ...mockTask, videoStatus: status }
+  const stage = task.stage
-
+  let status = 'pending_upload'
-  if (status === 'ai_result' || status === 'agent_reviewing' || status === 'agent_rejected' || status === 'brand_reviewing' || status === 'brand_passed' || status === 'brand_rejected') {
+  switch (stage) {
-    task.videoFile = '夏日护肤推广.mp4'
+    case 'video_upload': status = 'pending_upload'; break
-    task.aiResult = {
+    case 'video_ai_review': status = 'ai_reviewing'; break
-      score: 85,
+    case 'video_agency_review': status = 'agent_reviewing'; break
-      hardViolations: [
+    case 'video_brand_review': status = 'brand_reviewing'; break
-        { type: '违禁词', content: '效果最好', timestamp: 15.5, suggestion: '建议替换为"效果显著"' },
+    case 'completed': status = 'brand_passed'; break
-      ],
+    default:
-      sentimentWarnings: [
+      if (stage.startsWith('script_')) status = 'pending_upload' // 还没到视频阶段
-        { type: '表情预警', content: '表情过于夸张', timestamp: 42.0 },
+      if (stage === 'rejected') {
-      ],
+        if (task.video_brand_status === 'rejected') status = 'brand_rejected'
-      sellingPointsCovered: [
+        else if (task.video_agency_status === 'rejected') status = 'agent_rejected'
-        { point: 'SPF50+ PA++++', covered: true, timestamp: 25.0 },
+        else status = 'ai_result'
-        { point: '轻薄质地', covered: true, timestamp: 38.0 },
+      }
-        { point: '不油腻', covered: true, timestamp: 52.0 },
-      ],
-    }
   }
 
-  if (status === 'agent_rejected') {
+  const aiResult = task.video_ai_result ? {
-    task.agencyReview = {
+    score: task.video_ai_result.score,
-      result: 'rejected',
+    hardViolations: task.video_ai_result.violations
-      comment: '视频中有竞品Logo露出，请重新拍摄。',
+      .filter(v => v.severity === 'error' || v.severity === 'high')
-      reviewer: '张经理',
+      .map(v => ({ type: v.type, content: v.content, timestamp: v.timestamp || 0, suggestion: v.suggestion })),
-      time: '2026-02-06 16:30',
+    sentimentWarnings: (task.video_ai_result.soft_warnings || [])
-    }
+      .map(w => ({ type: w.type, content: w.content, timestamp: 0 })),
-  }
+    sellingPointsCovered: [], // 后端暂无此字段
+  } : null
 
-  if (status === 'brand_reviewing' || status === 'brand_passed' || status === 'brand_rejected') {
+  const agencyReview = task.video_agency_status && task.video_agency_status !== 'pending' ? {
-    task.agencyReview = {
+    result: (task.video_agency_status === 'passed' || task.video_agency_status === 'force_passed' ? 'approved' : 'rejected') as 'approved' | 'rejected',
-      result: 'approved',
+    comment: task.video_agency_comment || '',
-      comment: '视频质量良好，建议通过。',
+    reviewer: task.agency?.name || '代理商',
-      reviewer: '张经理',
+    time: task.updated_at,
-      time: '2026-02-06 16:30',
+  } : null
-    }
-  }
 
-  if (status === 'brand_passed') {
+  const brandReview = task.video_brand_status && task.video_brand_status !== 'pending' ? {
-    task.brandReview = {
+    result: (task.video_brand_status === 'passed' || task.video_brand_status === 'force_passed' ? 'approved' : 'rejected') as 'approved' | 'rejected',
-      result: 'approved',
+    comment: task.video_brand_comment || '',
-      comment: '视频通过终审，可以发布。',
+    reviewer: '品牌方审核员',
-      reviewer: '品牌方审核员',
+    time: task.updated_at,
-      time: '2026-02-06 19:00',
+  } : null
-    }
-  }
 
-  if (status === 'brand_rejected') {
+  return {
-    task.brandReview = {
+    projectName: task.project?.name || task.name,
-      result: 'rejected',
+    brandName: task.project?.brand_name || '',
-      comment: '产品特写时间不足，请补拍。',
+    videoStatus: status,
-      reviewer: '品牌方审核员',
+    videoFile: task.video_file_name || null,
-      time: '2026-02-06 19:00',
+    aiResult,
-    }
+    agencyReview,
+    brandReview,
   }
+}
 
-  return task
+const mockDefaultTask: VideoTaskUI = {
+  projectName: 'XX品牌618推广', brandName: 'XX护肤品牌',
+  videoStatus: 'pending_upload', videoFile: null, aiResult: null, agencyReview: null, brandReview: null,
 }
 
 function formatTimestamp(seconds: number): string {
@@ -116,40 +98,35 @@ function formatTimestamp(seconds: number): string {
   return `${mins}:${secs.toString().padStart(2, '0')}`
 }
 
-function UploadSection({ onUpload }: { onUpload: () => void }) {
+// ========== UI 组件 ==========
+
+function UploadSection({ taskId, onUploaded }: { taskId: string; onUploaded: () => void }) {
   const [file, setFile] = useState<File | null>(null)
-  const [uploadProgress, setUploadProgress] = useState(0)
+  const { upload, isUploading, progress } = useOSSUpload('video')
-  const [isUploading, setIsUploading] = useState(false)
+  const toast = useToast()
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const selectedFile = e.target.files?.[0]
-    if (selectedFile) {
+    if (selectedFile) setFile(selectedFile)
-      setFile(selectedFile)
-    }
   }
 
-  const handleUpload = () => {
+  const handleUpload = async () => {
-    setIsUploading(true)
+    if (!file) return
-    const timer = setInterval(() => {
+    try {
-      setUploadProgress(prev => {
+      const result = await upload(file)
-        if (prev >= 100) {
+      if (!USE_MOCK) {
-          clearInterval(timer)
+        await api.uploadTaskVideo(taskId, { file_url: result.url, file_name: result.file_name })
-          setTimeout(onUpload, 500)
+      }
-          return 100
+      toast.success('视频已提交，等待 AI 审核')
-        }
+      onUploaded()
-        return prev + 10
+    } catch (err) {
-      })
+      toast.error(err instanceof Error ? err.message : '上传失败')
-    }, 200)
+    }
   }
 
   return (
     <Card>
-      <CardHeader>
+      <CardHeader><CardTitle className="flex items-center gap-2"><Upload size={18} className="text-purple-400" />上传视频</CardTitle></CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <Upload size={18} className="text-purple-400" />
-          上传视频
-        </CardTitle>
-      </CardHeader>
       <CardContent className="space-y-4">
         <div className="border-2 border-dashed border-border-subtle rounded-lg p-8 text-center hover:border-accent-indigo/50 transition-colors">
           {file ? (
@@ -158,11 +135,7 @@ function UploadSection({ onUpload }: { onUpload: () => void }) {
                 <Video size={24} className="text-purple-400" />
                 <span className="text-text-primary">{file.name}</span>
                 {!isUploading && (
-                  <button
+                  <button type="button" onClick={() => setFile(null)} className="p-1 hover:bg-bg-elevated rounded-full">
-                    type="button"
-                    onClick={() => setFile(null)}
-                    className="p-1 hover:bg-bg-elevated rounded-full"
-                  >
                     <XCircle size={16} className="text-text-tertiary" />
                   </button>
                 )}
@@ -170,9 +143,9 @@ function UploadSection({ onUpload }: { onUpload: () => void }) {
               {isUploading && (
                 <div className="w-full max-w-xs mx-auto">
                   <div className="h-2 bg-bg-elevated rounded-full overflow-hidden mb-2">
-                    <div className="h-full bg-accent-indigo transition-all" style={{ width: `${uploadProgress}%` }} />
+                    <div className="h-full bg-accent-indigo transition-all" style={{ width: `${progress}%` }} />
                   </div>
-                  <p className="text-sm text-text-tertiary">上传中 {uploadProgress}%</p>
+                  <p className="text-sm text-text-tertiary">上传中 {progress}%</p>
                 </div>
               )}
             </div>
@@ -181,12 +154,7 @@ function UploadSection({ onUpload }: { onUpload: () => void }) {
               <Upload size={32} className="mx-auto text-text-tertiary mb-3" />
               <p className="text-text-secondary mb-1">点击或拖拽上传视频文件</p>
               <p className="text-xs text-text-tertiary">支持 MP4、MOV、AVI 格式，最大 500MB</p>
-              <input
+              <input type="file" accept="video/*" onChange={handleFileChange} className="hidden" />
-                type="file"
-                accept="video/*"
-                onChange={handleFileChange}
-                className="hidden"
-              />
             </label>
           )}
         </div>
@@ -201,92 +169,46 @@ function UploadSection({ onUpload }: { onUpload: () => void }) {
 function AIReviewingSection() {
   const [progress, setProgress] = useState(0)
   const [currentStep, setCurrentStep] = useState('正在解析视频...')
-
   useEffect(() => {
-    const steps = [
+    const steps = ['正在解析视频...', '正在提取音频转文字...', '正在分析画面内容...', '正在检测违禁内容...', '正在分析卖点覆盖...', '正在生成审核报告...']
-      '正在解析视频...',
-      '正在提取音频转文字...',
-      '正在分析画面内容...',
-      '正在检测违禁内容...',
-      '正在分析卖点覆盖...',
-      '正在生成审核报告...',
-    ]
     let stepIndex = 0
-
+    const timer = setInterval(() => { setProgress(prev => prev >= 100 ? (clearInterval(timer), 100) : prev + 5) }, 300)
-    const timer = setInterval(() => {
+    const stepTimer = setInterval(() => { stepIndex = (stepIndex + 1) % steps.length; setCurrentStep(steps[stepIndex]) }, 1500)
-      setProgress(prev => {
+    return () => { clearInterval(timer); clearInterval(stepTimer) }
-        if (prev >= 100) {
-          clearInterval(timer)
-          return 100
-        }
-        return prev + 5
-      })
-    }, 300)
-
-    const stepTimer = setInterval(() => {
-      stepIndex = (stepIndex + 1) % steps.length
-      setCurrentStep(steps[stepIndex])
-    }, 1500)
-
-    return () => {
-      clearInterval(timer)
-      clearInterval(stepTimer)
-    }
   }, [])
 
   return (
-    <Card>
+    <Card><CardContent className="py-8 text-center">
-      <CardContent className="py-8 text-center">
+      <Loader2 size={48} className="mx-auto text-purple-400 mb-4 animate-spin" />
-        <Loader2 size={48} className="mx-auto text-purple-400 mb-4 animate-spin" />
+      <h3 className="text-lg font-medium text-text-primary mb-2">AI 正在审核您的视频</h3>
-        <h3 className="text-lg font-medium text-text-primary mb-2">AI 正在审核您的视频</h3>
+      <p className="text-text-secondary mb-4">请稍候，视频审核可能需要 3-5 分钟</p>
-        <p className="text-text-secondary mb-4">请稍候，视频审核可能需要 3-5 分钟</p>
+      <div className="w-full max-w-md mx-auto">
-        <div className="w-full max-w-md mx-auto">
+        <div className="h-2 bg-bg-elevated rounded-full overflow-hidden mb-2"><div className="h-full bg-purple-400 transition-all" style={{ width: `${progress}%` }} /></div>
-          <div className="h-2 bg-bg-elevated rounded-full overflow-hidden mb-2">
+        <p className="text-sm text-text-tertiary">{progress}%</p>
-            <div className="h-full bg-purple-400 transition-all" style={{ width: `${progress}%` }} />
+      </div>
-          </div>
+      <div className="mt-4 p-3 bg-bg-elevated rounded-lg max-w-md mx-auto"><p className="text-sm text-text-secondary">{currentStep}</p></div>
-          <p className="text-sm text-text-tertiary">{progress}%</p>
+    </CardContent></Card>
-        </div>
-        <div className="mt-4 p-3 bg-bg-elevated rounded-lg max-w-md mx-auto">
-          <p className="text-sm text-text-secondary">{currentStep}</p>
-        </div>
-      </CardContent>
-    </Card>
   )
 }
 
-function AIResultSection({ task }: { task: ReturnType<typeof getTaskByStatus> }) {
+function AIResultSection({ task }: { task: VideoTaskUI }) {
   if (!task.aiResult) return null
-
   return (
     <div className="space-y-4">
-      {/* AI 评分 */}
+      <Card><CardContent className="py-4">
-      <Card>
+        <div className="flex items-center justify-between">
-        <CardContent className="py-4">
+          <span className="text-text-secondary">AI 综合评分</span>
-          <div className="flex items-center justify-between">
+          <span className={`text-3xl font-bold ${task.aiResult.score >= 85 ? 'text-accent-green' : task.aiResult.score >= 70 ? 'text-yellow-400' : 'text-accent-coral'}`}>{task.aiResult.score}</span>
-            <span className="text-text-secondary">AI 综合评分</span>
+        </div>
-            <span className={`text-3xl font-bold ${task.aiResult.score >= 85 ? 'text-accent-green' : task.aiResult.score >= 70 ? 'text-yellow-400' : 'text-accent-coral'}`}>
+      </CardContent></Card>
-              {task.aiResult.score}
-            </span>
-          </div>
-        </CardContent>
-      </Card>
 
-      {/* 硬性合规 */}
       {task.aiResult.hardViolations.length > 0 && (
         <Card>
-          <CardHeader className="pb-2">
+          <CardHeader className="pb-2"><CardTitle className="flex items-center gap-2 text-base"><Shield size={16} className="text-red-500" />硬性合规 ({task.aiResult.hardViolations.length})</CardTitle></CardHeader>
-            <CardTitle className="flex items-center gap-2 text-base">
-              <Shield size={16} className="text-red-500" />
-              硬性合规 ({task.aiResult.hardViolations.length})
-            </CardTitle>
-          </CardHeader>
           <CardContent className="space-y-2">
             {task.aiResult.hardViolations.map((v, idx) => (
               <div key={idx} className="p-3 bg-accent-coral/10 rounded-lg border border-accent-coral/30">
-                <div className="flex items-center gap-2 mb-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>
-                  <ErrorTag>{v.type}</ErrorTag>
-                  <span className="text-xs text-text-tertiary">{formatTimestamp(v.timestamp)}</span>
-                </div>
                 <p className="text-sm text-text-primary">「{v.content}」</p>
                 <p className="text-xs text-accent-indigo mt-1">{v.suggestion}</p>
               </div>
@@ -295,22 +217,13 @@ function AIResultSection({ task }: { task: ReturnType<typeof getTaskByStatus> })
         </Card>
       )}
 
-      {/* 舆情雷达 */}
       {task.aiResult.sentimentWarnings.length > 0 && (
         <Card>
-          <CardHeader className="pb-2">
+          <CardHeader className="pb-2"><CardTitle className="flex items-center gap-2 text-base"><Radio size={16} className="text-orange-500" />舆情雷达</CardTitle></CardHeader>
-            <CardTitle className="flex items-center gap-2 text-base">
-              <Radio size={16} className="text-orange-500" />
-              舆情雷达（仅提示）
-            </CardTitle>
-          </CardHeader>
           <CardContent className="space-y-2">
             {task.aiResult.sentimentWarnings.map((w, idx) => (
               <div key={idx} className="p-3 bg-orange-500/10 rounded-lg border border-orange-500/30">
-                <div className="flex items-center gap-2 mb-1">
+                <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>
-                  <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>
               </div>
             ))}
@@ -318,52 +231,34 @@ function AIResultSection({ task }: { task: ReturnType<typeof getTaskByStatus> })
         </Card>
       )}
 
-      {/* 卖点覆盖 */}
+      {task.aiResult.sellingPointsCovered.length > 0 && (
-      <Card>
+        <Card>
-        <CardHeader className="pb-2">
+          <CardHeader className="pb-2"><CardTitle className="flex items-center gap-2 text-base"><CheckCircle size={16} className="text-accent-green" />卖点覆盖</CardTitle></CardHeader>
-          <CardTitle className="flex items-center gap-2 text-base">
+          <CardContent className="space-y-2">
-            <CheckCircle size={16} className="text-accent-green" />
+            {task.aiResult.sellingPointsCovered.map((sp, idx) => (
-            卖点覆盖
+              <div key={idx} className="flex items-center justify-between p-2 rounded-lg bg-bg-elevated">
-          </CardTitle>
+                <div className="flex items-center gap-2">
-        </CardHeader>
+                  {sp.covered ? <CheckCircle size={16} className="text-accent-green" /> : <XCircle size={16} className="text-accent-coral" />}
-        <CardContent className="space-y-2">
+                  <span className="text-sm text-text-primary">{sp.point}</span>
-          {task.aiResult.sellingPointsCovered.map((sp, idx) => (
+                </div>
-            <div key={idx} className="flex items-center justify-between p-2 rounded-lg bg-bg-elevated">
+                {sp.covered && sp.timestamp && <span className="text-xs text-text-tertiary">{formatTimestamp(sp.timestamp)}</span>}
-              <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 && sp.timestamp && (
+            ))}
-                <span className="text-xs text-text-tertiary">{formatTimestamp(sp.timestamp)}</span>
+          </CardContent>
-              )}
+        </Card>
-            </div>
+      )}
-          ))}
-        </CardContent>
-      </Card>
     </div>
   )
 }
 
-function ReviewFeedbackSection({ review, type }: { review: NonNullable<typeof mockTask.agencyReview>; type: 'agency' | 'brand' }) {
+function ReviewFeedbackSection({ review, type }: { review: { result: string; comment: string; reviewer: string; time: string }; type: 'agency' | 'brand' }) {
   const isApproved = review.result === 'approved'
   const title = type === 'agency' ? '代理商审核意见' : '品牌方终审意见'
-
   return (
     <Card className={isApproved ? 'border-accent-green/30' : 'border-accent-coral/30'}>
-      <CardHeader>
+      <CardHeader><CardTitle className="flex items-center gap-2">
-        <CardTitle className="flex items-center gap-2">
+        {isApproved ? <CheckCircle size={18} className="text-accent-green" /> : <XCircle size={18} className="text-accent-coral" />}{title}
-          {isApproved ? (
+      </CardTitle></CardHeader>
-            <CheckCircle size={18} className="text-accent-green" />
-          ) : (
-            <XCircle size={18} className="text-accent-coral" />
-          )}
-          {title}
-        </CardTitle>
-      </CardHeader>
       <CardContent>
         <div className="flex items-center gap-2 mb-2">
           <span className="font-medium text-text-primary">{review.reviewer}</span>
@@ -377,157 +272,95 @@ function ReviewFeedbackSection({ review, type }: { review: NonNullable<typeof mo
 }
 
 function WaitingSection({ message }: { message: string }) {
-  return (
+  return <Card><CardContent className="py-8 text-center"><Clock size={48} className="mx-auto text-accent-indigo mb-4" /><h3 className="text-lg font-medium text-text-primary mb-2">{message}</h3><p className="text-text-secondary">请耐心等待，审核结果将通过消息通知您</p></CardContent></Card>
-    <Card>
-      <CardContent className="py-8 text-center">
-        <Clock size={48} className="mx-auto text-accent-indigo mb-4" />
-        <h3 className="text-lg font-medium text-text-primary mb-2">{message}</h3>
-        <p className="text-text-secondary">请耐心等待，审核结果将通过消息通知您</p>
-      </CardContent>
-    </Card>
-  )
 }
 
 function SuccessSection() {
   return (
-    <Card className="border-accent-green/30">
+    <Card className="border-accent-green/30"><CardContent className="py-8 text-center">
-      <CardContent className="py-8 text-center">
+      <CheckCircle size={64} className="mx-auto text-accent-green mb-4" />
-        <CheckCircle size={64} className="mx-auto text-accent-green mb-4" />
+      <h3 className="text-xl font-bold text-text-primary mb-2">视频审核通过！</h3>
-        <h3 className="text-xl font-bold text-text-primary mb-2">🎉 视频审核通过！</h3>
+      <p className="text-text-secondary mb-6">恭喜您，视频已通过所有审核，可以发布了</p>
-        <p className="text-text-secondary mb-6">恭喜您，视频已通过所有审核，可以发布了</p>
+      <div className="flex justify-center gap-3">
-        <div className="flex justify-center gap-3">
+        <Button variant="secondary"><Play size={16} />预览视频</Button>
-          <Button variant="secondary">
+        <Button>分享链接</Button>
-            <Play size={16} />
+      </div>
-            预览视频
+    </CardContent></Card>
-          </Button>
-          <Button>
-            分享链接
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
   )
 }
 
+// ========== 主页面 ==========
+
 export default function CreatorVideoPage() {
   const router = useRouter()
   const params = useParams()
-  const searchParams = useSearchParams()
+  const toast = useToast()
-  const status = searchParams.get('status') || 'pending_upload'
+  const { subscribe } = useSSE()
+  const taskId = params.id as string
 
-  const [task, setTask] = useState(getTaskByStatus(status))
+  const [task, setTask] = useState<VideoTaskUI>(mockDefaultTask)
+  const [isLoading, setIsLoading] = useState(true)
 
-  // 模拟状态切换
+  const loadTask = useCallback(async () => {
-  const simulateUpload = () => {
+    if (USE_MOCK) { setIsLoading(false); return }
-    setTask(getTaskByStatus('ai_reviewing'))
+    try {
-    setTimeout(() => {
+      const apiTask = await api.getTask(taskId)
-      setTask(getTaskByStatus('ai_result'))
+      setTask(mapApiToVideoUI(apiTask))
-    }, 5000)
+    } catch { toast.error('加载任务失败') }
-  }
+    finally { setIsLoading(false) }
+  }, [taskId, toast])
 
-  const handleResubmit = () => {
+  useEffect(() => { loadTask() }, [loadTask])
-    setTask(getTaskByStatus('pending_upload'))
+
-  }
+  useEffect(() => {
+    const unsub1 = subscribe('task_updated', (data) => { if ((data as { task_id?: string }).task_id === taskId) loadTask() })
+    const unsub2 = subscribe('review_completed', (data) => { if ((data as { task_id?: string }).task_id === taskId) loadTask() })
+    return () => { unsub1(); unsub2() }
+  }, [subscribe, taskId, loadTask])
 
   const getStatusDisplay = () => {
-    switch (task.videoStatus) {
+    const map: Record<string, string> = {
-      case 'pending_upload': return '待上传视频'
+      pending_upload: '待上传视频', ai_reviewing: 'AI 审核中', ai_result: 'AI 审核完成',
-      case 'ai_reviewing': return 'AI 审核中'
+      agent_reviewing: '代理商审核中', agent_rejected: '代理商驳回',
-      case 'ai_result': return 'AI 审核完成'
+      brand_reviewing: '品牌方终审中', brand_passed: '审核通过', brand_rejected: '品牌方驳回',
-      case 'agent_reviewing': return '代理商审核中'
-      case 'agent_rejected': return '代理商驳回'
-      case 'brand_reviewing': return '品牌方终审中'
-      case 'brand_passed': return '审核通过'
-      case 'brand_rejected': return '品牌方驳回'
-      default: return '未知状态'
     }
+    return map[task.videoStatus] || '未知状态'
+  }
+
+  if (isLoading) {
+    return <div className="flex items-center justify-center h-64"><Loader2 className="w-8 h-8 text-accent-indigo animate-spin" /></div>
   }
 
   return (
     <div className="space-y-6 max-w-2xl mx-auto">
-      {/* 顶部导航 */}
       <div className="flex items-center gap-4">
-        <button type="button" onClick={() => router.back()} className="p-2 hover:bg-bg-elevated rounded-full">
+        <button type="button" onClick={() => router.back()} className="p-2 hover:bg-bg-elevated rounded-full"><ArrowLeft size={20} className="text-text-primary" /></button>
-          <ArrowLeft size={20} className="text-text-primary" />
-        </button>
         <div className="flex-1">
           <h1 className="text-xl font-bold text-text-primary">{task.projectName}</h1>
           <p className="text-sm text-text-secondary">视频阶段 · {getStatusDisplay()}</p>
         </div>
       </div>
 
-      {/* 审核流程进度条 */}
+      <Card><CardContent className="py-4"><ReviewSteps steps={getReviewSteps(task.videoStatus)} /></CardContent></Card>
-      <Card>
-        <CardContent className="py-4">
-          <ReviewSteps steps={getReviewSteps(task.videoStatus)} />
-        </CardContent>
-      </Card>
-
-      {/* 根据状态显示不同内容 */}
-      {task.videoStatus === 'pending_upload' && (
-        <UploadSection onUpload={simulateUpload} />
-      )}
-
-      {task.videoStatus === 'ai_reviewing' && (
-        <AIReviewingSection />
-      )}
-
-      {task.videoStatus === 'ai_result' && (
-        <>
-          <AIResultSection task={task} />
-          <WaitingSection message="等待代理商审核" />
-        </>
-      )}
-
-      {task.videoStatus === 'agent_reviewing' && (
-        <>
-          <AIResultSection task={task} />
-          <WaitingSection message="等待代理商审核" />
-        </>
-      )}
 
+      {task.videoStatus === 'pending_upload' && <UploadSection taskId={taskId} onUploaded={loadTask} />}
+      {task.videoStatus === 'ai_reviewing' && <AIReviewingSection />}
+      {task.videoStatus === 'ai_result' && <><AIResultSection task={task} /><WaitingSection message="等待代理商审核" /></>}
+      {task.videoStatus === 'agent_reviewing' && <><AIResultSection task={task} /><WaitingSection message="等待代理商审核" /></>}
       {task.videoStatus === 'agent_rejected' && task.agencyReview && (
-        <>
+        <><ReviewFeedbackSection review={task.agencyReview} type="agency" /><AIResultSection task={task} />
-          <ReviewFeedbackSection review={task.agencyReview} type="agency" />
+        <div className="flex gap-3"><Button variant="secondary" onClick={loadTask} fullWidth><RefreshCw size={16} />重新上传</Button></div></>
-          <AIResultSection task={task} />
-          <div className="flex gap-3">
-            <Button variant="secondary" onClick={handleResubmit} fullWidth>
-              <RefreshCw size={16} />
-              重新上传
-            </Button>
-          </div>
-        </>
       )}
-
       {task.videoStatus === 'brand_reviewing' && task.agencyReview && (
-        <>
+        <><ReviewFeedbackSection review={task.agencyReview} type="agency" /><AIResultSection task={task} /><WaitingSection message="等待品牌方终审" /></>
-          <ReviewFeedbackSection review={task.agencyReview} type="agency" />
-          <AIResultSection task={task} />
-          <WaitingSection message="等待品牌方终审" />
-        </>
       )}
-
       {task.videoStatus === 'brand_passed' && task.agencyReview && task.brandReview && (
-        <>
+        <><SuccessSection /><ReviewFeedbackSection review={task.brandReview} type="brand" />
-          <SuccessSection />
+        <ReviewFeedbackSection review={task.agencyReview} type="agency" /><AIResultSection task={task} /></>
-          <ReviewFeedbackSection review={task.brandReview} type="brand" />
-          <ReviewFeedbackSection review={task.agencyReview} type="agency" />
-          <AIResultSection task={task} />
-        </>
       )}
-
       {task.videoStatus === 'brand_rejected' && task.agencyReview && task.brandReview && (
-        <>
+        <><ReviewFeedbackSection review={task.brandReview} type="brand" /><ReviewFeedbackSection review={task.agencyReview} type="agency" />
-          <ReviewFeedbackSection review={task.brandReview} type="brand" />
+        <AIResultSection task={task} /><div className="flex gap-3"><Button variant="secondary" onClick={loadTask} fullWidth><RefreshCw size={16} />重新上传</Button></div></>
-          <ReviewFeedbackSection review={task.agencyReview} type="agency" />
-          <AIResultSection task={task} />
-          <div className="flex gap-3">
-            <Button variant="secondary" onClick={handleResubmit} fullWidth>
-              <RefreshCw size={16} />
-              重新上传
-            </Button>
-          </div>
-        </>
       )}
     </div>
   )

frontend/app/layout.tsx

@@ -1,5 +1,6 @@
 import '../styles/globals.css'
 import { AuthProvider } from '@/contexts/AuthContext'
+import { SSEProvider } from '@/contexts/SSEContext'
 import { ToastProvider } from '@/components/ui/Toast'
 
 export const metadata = {
@@ -16,7 +17,9 @@ export default function RootLayout({
     <html lang="zh-CN" className="h-full">
       <body className="h-full bg-bg-page text-text-primary font-sans">
         <ToastProvider>
-          <AuthProvider>{children}</AuthProvider>
+          <AuthProvider>
+            <SSEProvider>{children}</SSEProvider>
+          </AuthProvider>
         </ToastProvider>
       </body>
     </html>

frontend/contexts/AuthContext.tsx

@@ -21,7 +21,7 @@ const AuthContext = createContext<AuthContextType | undefined>(undefined)
 const USER_STORAGE_KEY = 'miaosi_user'
 
 // 开发模式：使用 mock 数据
-const USE_MOCK = process.env.NEXT_PUBLIC_USE_MOCK === 'true' || process.env.NODE_ENV === 'development'
+export const USE_MOCK = process.env.NEXT_PUBLIC_USE_MOCK === 'true' || process.env.NODE_ENV === 'development'
 
 // Mock 用户数据
 const MOCK_USERS: Record<string, User & { password: string }> = {

frontend/contexts/SSEContext.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+import { createContext, useContext, useEffect, useRef, useCallback, ReactNode } from 'react'
+import { useAuth } from './AuthContext'
+import { USE_MOCK } from './AuthContext'
+import { getAccessToken } from '@/lib/api'
+
+type SSEEventType = 'task_updated' | 'review_progress' | 'review_completed' | 'new_task' | 'review_decision'
+type SSEHandler = (data: Record<string, unknown>) => void
+
+interface SSEContextType {
+  subscribe: (eventType: SSEEventType, handler: SSEHandler) => () => void
+}
+
+const SSEContext = createContext<SSEContextType | undefined>(undefined)
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8000'
+
+export function SSEProvider({ children }: { children: ReactNode }) {
+  const { isAuthenticated } = useAuth()
+  const listenersRef = useRef<Map<SSEEventType, Set<SSEHandler>>>(new Map())
+  const abortRef = useRef<AbortController | null>(null)
+  const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const dispatch = useCallback((eventType: SSEEventType, data: Record<string, unknown>) => {
+    const handlers = listenersRef.current.get(eventType)
+    if (handlers) {
+      handlers.forEach(handler => handler(data))
+    }
+  }, [])
+
+  const connect = useCallback(async () => {
+    if (USE_MOCK || !isAuthenticated) return
+
+    // 清除旧连接
+    abortRef.current?.abort()
+    const controller = new AbortController()
+    abortRef.current = controller
+
+    try {
+      const token = getAccessToken()
+      if (!token) return
+
+      const response = await fetch(`${API_BASE_URL}/api/v1/sse/events`, {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Accept': 'text/event-stream',
+        },
+        signal: controller.signal,
+      })
+
+      if (!response.ok || !response.body) return
+
+      const reader = response.body.getReader()
+      const decoder = new TextDecoder()
+      let buffer = ''
+
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+
+        buffer += decoder.decode(value, { stream: true })
+        const lines = buffer.split('\n')
+        buffer = lines.pop() || ''
+
+        let currentEvent = ''
+        let currentData = ''
+
+        for (const line of lines) {
+          if (line.startsWith('event:')) {
+            currentEvent = line.slice(6).trim()
+          } else if (line.startsWith('data:')) {
+            currentData = line.slice(5).trim()
+          } else if (line === '' && currentEvent && currentData) {
+            try {
+              const parsed = JSON.parse(currentData)
+              dispatch(currentEvent as SSEEventType, parsed)
+            } catch {
+              // 忽略解析错误
+            }
+            currentEvent = ''
+            currentData = ''
+          }
+        }
+      }
+    } catch (err) {
+      if (err instanceof DOMException && err.name === 'AbortError') return
+      // 5秒后重连
+      reconnectTimerRef.current = setTimeout(connect, 5000)
+    }
+  }, [isAuthenticated, dispatch])
+
+  useEffect(() => {
+    connect()
+    return () => {
+      abortRef.current?.abort()
+      if (reconnectTimerRef.current) clearTimeout(reconnectTimerRef.current)
+    }
+  }, [connect])
+
+  const subscribe = useCallback((eventType: SSEEventType, handler: SSEHandler): (() => void) => {
+    if (!listenersRef.current.has(eventType)) {
+      listenersRef.current.set(eventType, new Set())
+    }
+    listenersRef.current.get(eventType)!.add(handler)
+
+    return () => {
+      listenersRef.current.get(eventType)?.delete(handler)
+    }
+  }, [])
+
+  return (
+    <SSEContext.Provider value={{ subscribe }}>
+      {children}
+    </SSEContext.Provider>
+  )
+}
+
+export function useSSE() {
+  const context = useContext(SSEContext)
+  if (!context) {
+    throw new Error('useSSE must be used within SSEProvider')
+  }
+  return context
+}

frontend/hooks/useOSSUpload.ts

@@ -0,0 +1,112 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import { api } from '@/lib/api'
+import { USE_MOCK } from '@/contexts/AuthContext'
+
+interface UploadResult {
+  url: string
+  file_key: string
+  file_name: string
+  file_size: number
+}
+
+interface UseOSSUploadReturn {
+  upload: (file: File) => Promise<UploadResult>
+  isUploading: boolean
+  progress: number
+  error: string | null
+  reset: () => void
+}
+
+export function useOSSUpload(fileType: string = 'general'): UseOSSUploadReturn {
+  const [isUploading, setIsUploading] = useState(false)
+  const [progress, setProgress] = useState(0)
+  const [error, setError] = useState<string | null>(null)
+
+  const reset = useCallback(() => {
+    setIsUploading(false)
+    setProgress(0)
+    setError(null)
+  }, [])
+
+  const upload = useCallback(async (file: File): Promise<UploadResult> => {
+    setIsUploading(true)
+    setProgress(0)
+    setError(null)
+
+    try {
+      if (USE_MOCK) {
+        // Mock 模式：模拟 2 秒上传
+        for (let i = 0; i <= 100; i += 20) {
+          await new Promise(r => setTimeout(r, 400))
+          setProgress(i)
+        }
+        const result: UploadResult = {
+          url: `https://mock-oss.example.com/${fileType}/${Date.now()}_${file.name}`,
+          file_key: `${fileType}/${Date.now()}_${file.name}`,
+          file_name: file.name,
+          file_size: file.size,
+        }
+        setProgress(100)
+        setIsUploading(false)
+        return result
+      }
+
+      // 1. 获取上传凭证
+      setProgress(10)
+      const policy = await api.getUploadPolicy(fileType)
+
+      // 2. 构建 OSS 直传 FormData
+      const fileKey = `${policy.dir}${Date.now()}_${file.name}`
+      const formData = new FormData()
+      formData.append('key', fileKey)
+      formData.append('policy', policy.policy)
+      formData.append('OSSAccessKeyId', policy.access_key_id)
+      formData.append('signature', policy.signature)
+      formData.append('success_action_status', '200')
+      formData.append('file', file)
+
+      // 3. 上传到 OSS
+      setProgress(30)
+      const xhr = new XMLHttpRequest()
+      await new Promise<void>((resolve, reject) => {
+        xhr.upload.onprogress = (e) => {
+          if (e.lengthComputable) {
+            setProgress(30 + Math.round((e.loaded / e.total) * 50))
+          }
+        }
+        xhr.onload = () => {
+          if (xhr.status >= 200 && xhr.status < 300) {
+            resolve()
+          } else {
+            reject(new Error(`上传失败: ${xhr.status}`))
+          }
+        }
+        xhr.onerror = () => reject(new Error('网络错误'))
+        xhr.open('POST', policy.host)
+        xhr.send(formData)
+      })
+
+      // 4. 回调通知后端
+      setProgress(90)
+      const result = await api.fileUploaded(fileKey, file.name, file.size, fileType)
+
+      setProgress(100)
+      setIsUploading(false)
+      return {
+        url: result.url,
+        file_key: result.file_key,
+        file_name: result.file_name,
+        file_size: result.file_size,
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : '上传失败'
+      setError(message)
+      setIsUploading(false)
+      throw err
+    }
+  }, [fileType])
+
+  return { upload, isUploading, progress, error, reset }
+}

frontend/lib/taskStageMapper.ts

@@ -0,0 +1,186 @@
+import type { TaskResponse, TaskStage, TaskStatus } from '@/types/task'
+
+export type StepStatus = 'pending' | 'current' | 'done' | 'error'
+
+export interface StageSteps {
+  submit: StepStatus
+  ai: StepStatus
+  agency: StepStatus
+  brand: StepStatus
+}
+
+export interface TaskUIState {
+  scriptStage: StageSteps
+  videoStage: StageSteps
+  currentPhase: 'script' | 'video' | 'completed'
+  buttonText: string
+  buttonType: 'primary' | 'warning' | 'success' | 'disabled'
+  scriptColor: string
+  videoColor: string
+  statusLabel: string
+  filterCategory: 'pending' | 'reviewing' | 'rejected' | 'completed'
+}
+
+const STAGE_ORDER: TaskStage[] = [
+  'script_upload', 'script_ai_review', 'script_agency_review', 'script_brand_review',
+  'video_upload', 'video_ai_review', 'video_agency_review', 'video_brand_review',
+  'completed', 'rejected',
+]
+
+function statusToStep(status: TaskStatus | undefined | null): StepStatus {
+  if (!status || status === 'pending') return 'pending'
+  if (status === 'processing') return 'current'
+  if (status === 'passed' || status === 'force_passed') return 'done'
+  if (status === 'rejected') return 'error'
+  return 'pending'
+}
+
+export function mapTaskToUI(task: TaskResponse): TaskUIState {
+  const stage = task.stage
+  const stageIndex = STAGE_ORDER.indexOf(stage)
+
+  // 脚本阶段
+  const scriptStage: StageSteps = {
+    submit: stageIndex >= 0 ? 'done' : 'pending',
+    ai: 'pending',
+    agency: 'pending',
+    brand: 'pending',
+  }
+
+  // 视频阶段
+  const videoStage: StageSteps = {
+    submit: 'pending',
+    ai: 'pending',
+    agency: 'pending',
+    brand: 'pending',
+  }
+
+  // 根据 stage 设置进度
+  if (stage === 'script_upload') {
+    scriptStage.submit = 'current'
+  } else if (stage === 'script_ai_review') {
+    scriptStage.submit = 'done'
+    scriptStage.ai = task.script_ai_result ? 'done' : 'current'
+  } else if (stage === 'script_agency_review') {
+    scriptStage.submit = 'done'
+    scriptStage.ai = 'done'
+    scriptStage.agency = statusToStep(task.script_agency_status)
+    if (scriptStage.agency === 'pending') scriptStage.agency = 'current'
+  } else if (stage === 'script_brand_review') {
+    scriptStage.submit = 'done'
+    scriptStage.ai = 'done'
+    scriptStage.agency = 'done'
+    scriptStage.brand = statusToStep(task.script_brand_status)
+    if (scriptStage.brand === 'pending') scriptStage.brand = 'current'
+  } else if (stageIndex >= 4) {
+    // 已过脚本阶段
+    scriptStage.submit = 'done'
+    scriptStage.ai = 'done'
+    scriptStage.agency = 'done'
+    scriptStage.brand = 'done'
+  }
+
+  // 处理脚本被驳回的情况
+  if (task.script_agency_status === 'rejected') {
+    scriptStage.agency = 'error'
+  }
+  if (task.script_brand_status === 'rejected') {
+    scriptStage.brand = 'error'
+  }
+
+  // 视频阶段
+  if (stage === 'video_upload') {
+    videoStage.submit = 'current'
+  } else if (stage === 'video_ai_review') {
+    videoStage.submit = 'done'
+    videoStage.ai = task.video_ai_result ? 'done' : 'current'
+  } else if (stage === 'video_agency_review') {
+    videoStage.submit = 'done'
+    videoStage.ai = 'done'
+    videoStage.agency = statusToStep(task.video_agency_status)
+    if (videoStage.agency === 'pending') videoStage.agency = 'current'
+  } else if (stage === 'video_brand_review') {
+    videoStage.submit = 'done'
+    videoStage.ai = 'done'
+    videoStage.agency = 'done'
+    videoStage.brand = statusToStep(task.video_brand_status)
+    if (videoStage.brand === 'pending') videoStage.brand = 'current'
+  } else if (stage === 'completed') {
+    videoStage.submit = 'done'
+    videoStage.ai = 'done'
+    videoStage.agency = 'done'
+    videoStage.brand = 'done'
+  }
+
+  // 处理视频被驳回的情况
+  if (task.video_agency_status === 'rejected') {
+    videoStage.agency = 'error'
+  }
+  if (task.video_brand_status === 'rejected') {
+    videoStage.brand = 'error'
+  }
+
+  // 当前阶段
+  let currentPhase: 'script' | 'video' | 'completed' = 'script'
+  if (stageIndex >= 4 && stageIndex < 8) currentPhase = 'video'
+  if (stage === 'completed') currentPhase = 'completed'
+
+  // 按钮文案和类型
+  let buttonText = '查看详情'
+  let buttonType: 'primary' | 'warning' | 'success' | 'disabled' = 'primary'
+
+  if (stage === 'script_upload') {
+    buttonText = '上传脚本'
+    buttonType = 'primary'
+  } else if (stage === 'video_upload') {
+    buttonText = '上传视频'
+    buttonType = 'primary'
+  } else if (stage === 'completed') {
+    buttonText = '已完成'
+    buttonType = 'success'
+  } else if (stage === 'rejected') {
+    buttonText = '重新提交'
+    buttonType = 'warning'
+  } else if (stage.includes('review')) {
+    buttonText = '审核中'
+    buttonType = 'disabled'
+  }
+
+  // 颜色
+  const scriptColor = scriptStage.agency === 'error' || scriptStage.brand === 'error'
+    ? 'red' : scriptStage.brand === 'done' ? 'green' : 'blue'
+  const videoColor = videoStage.agency === 'error' || videoStage.brand === 'error'
+    ? 'red' : videoStage.brand === 'done' ? 'green' : 'blue'
+
+  // 状态标签
+  let statusLabel = '进行中'
+  if (stage === 'script_upload' || stage === 'video_upload') statusLabel = '待上传'
+  else if (stage.includes('ai_review')) statusLabel = 'AI 审核中'
+  else if (stage.includes('agency_review')) statusLabel = '代理商审核中'
+  else if (stage.includes('brand_review')) statusLabel = '品牌方审核中'
+  else if (stage === 'completed') statusLabel = '已完成'
+  else if (stage === 'rejected') statusLabel = '已驳回'
+
+  // 筛选分类
+  let filterCategory: 'pending' | 'reviewing' | 'rejected' | 'completed' = 'reviewing'
+  if (stage === 'script_upload' || stage === 'video_upload') filterCategory = 'pending'
+  else if (stage === 'completed') filterCategory = 'completed'
+  else if (stage === 'rejected') filterCategory = 'rejected'
+  // 处理驳回后重新提交的情况
+  if (task.script_agency_status === 'rejected' || task.script_brand_status === 'rejected' ||
+      task.video_agency_status === 'rejected' || task.video_brand_status === 'rejected') {
+    if (stage !== 'completed') filterCategory = 'rejected'
+  }
+
+  return {
+    scriptStage,
+    videoStage,
+    currentPhase,
+    buttonText,
+    buttonType,
+    scriptColor,
+    videoColor,
+    statusLabel,
+    filterCategory,
+  }
+}