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/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'
 
-// 平台选项
-const platformOptions = [
-  { id: 'douyin', name: '抖音', icon: '🎵', color: 'bg-[#1a1a1a]' },
-  { id: 'xiaohongshu', name: '小红书', icon: '📕', color: 'bg-[#fe2c55]' },
-  { id: 'bilibili', name: 'B站', icon: '📺', color: 'bg-[#00a1d6]' },
-  { id: 'kuaishou', name: '快手', icon: '⚡', color: 'bg-[#ff4906]' },
-  { id: 'weibo', name: '微博', icon: '🔴', color: 'bg-[#e6162d]' },
-  { id: 'wechat', name: '微信视频号', icon: '💬', color: 'bg-[#07c160]' },
-]
-
-// 模拟品牌方已添加的代理商（来自代理商管理）
-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 },
+// ==================== Mock 数据 ====================
+const mockAgencies: AgencyDetail[] = [
+  { id: 'AG789012', name: '星耀传媒', force_pass_enabled: true },
+  { id: 'AG456789', name: '创意无限', force_pass_enabled: false },
+  { id: 'AG123456', name: '美妆达人MCN', force_pass_enabled: false },
+  { id: 'AG111111', name: '蓝海科技', force_pass_enabled: true },
+  { id: 'AG222222', name: '云创网络', force_pass_enabled: false },
+  { id: 'AG333333', name: '天府传媒', force_pass_enabled: true },
 ]
 
 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)
 
-  // 搜索过滤代理商
-  const filteredAgencies = mockAgencies.filter(agency =>
+  useEffect(() => {
+    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.companyName.toLowerCase().includes(agencySearch.toLowerCase())
+    agency.id.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) {
-      setBriefFile(file)
+    if (!file) return
+    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)
-    // 模拟提交
-    await new Promise(resolve => setTimeout(resolve, 1500))
-    toast.success('项目创建成功！')
-    router.push('/brand')
+    try {
+      if (USE_MOCK) {
+        await new Promise(resolve => setTimeout(resolve, 1000))
+      } 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">
-              发布平台 <span className="text-accent-coral">*</span>
-            </label>
-            <p className="text-xs text-text-tertiary mb-3">选择视频将发布的平台，系统将应用对应平台的审核规则</p>
-            <div className="grid grid-cols-3 md:grid-cols-6 gap-3">
-              {platformOptions.map((platform) => (
-                <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>
+            <label className="block text-sm font-medium text-text-primary mb-2">项目描述</label>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="简要描述项目目标和要求..."
+              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"
+            />
           </div>
 
           {/* 截止日期 */}
@@ -164,17 +195,18 @@ export default function CreateProjectPage() {
 
           {/* Brief 上传 */}
           <div>
-            <label className="block text-sm font-medium text-text-primary mb-2">
-              上传 Brief <span className="text-accent-coral">*</span>
-            </label>
+            <label className="block text-sm font-medium text-text-primary mb-2">上传 Brief</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>
 
-            {/* 代理商列表 */}
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-80 overflow-y-auto">
-              {filteredAgencies.length > 0 ? (
-                filteredAgencies.map((agency) => {
-                  const isSelected = selectedAgencies.includes(agency.id)
-                  return (
-                    <button
-                      key={agency.id}
-                      type="button"
-                      onClick={() => toggleAgency(agency.id)}
-                      className={`p-4 rounded-xl border-2 text-left transition-all ${
-                        isSelected
-                          ? 'border-accent-indigo bg-accent-indigo/10'
-                          : 'border-border-subtle hover:border-accent-indigo/50'
-                      }`}
-                    >
-                      <div className="flex items-start gap-3">
-                        <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
-                          isSelected ? 'bg-accent-indigo' : 'bg-accent-indigo/15'
-                        }`}>
-                          {isSelected ? (
-                            <CheckCircle 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">
-                            <span className="font-medium text-text-primary">{agency.name}</span>
-                            <span className="text-xs text-text-tertiary font-mono">{agency.id}</span>
+            {loadingAgencies ? (
+              <div className="flex items-center justify-center py-8 text-text-tertiary">
+                <Loader2 size={20} className="animate-spin mr-2" />
+                加载代理商列表...
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-80 overflow-y-auto">
+                {filteredAgencies.length > 0 ? (
+                  filteredAgencies.map((agency) => {
+                    const isSelected = selectedAgencies.includes(agency.id)
+                    return (
+                      <button
+                        key={agency.id}
+                        type="button"
+                        onClick={() => toggleAgency(agency.id)}
+                        className={`p-4 rounded-xl border-2 text-left transition-all ${
+                          isSelected
+                            ? 'border-accent-indigo bg-accent-indigo/10'
+                            : 'border-border-subtle hover:border-accent-indigo/50'
+                        }`}
+                      >
+                        <div className="flex items-start gap-3">
+                          <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
+                            isSelected ? 'bg-accent-indigo' : 'bg-accent-indigo/15'
+                          }`}>
+                            {isSelected ? (
+                              <CheckCircle size={20} className="text-white" />
+                            ) : (
+                              <Building2 size={20} className="text-accent-indigo" />
+                            )}
                           </div>
-                          <p className="text-sm text-text-secondary truncate mt-0.5">{agency.companyName}</p>
-                          <div className="flex items-center gap-4 mt-1.5 text-xs text-text-tertiary">
-                            <span className="flex items-center gap-1">
-                              <Users size={12} />
-                              {agency.creatorCount} 达人
-                            </span>
-                            <span className={agency.passRate >= 90 ? 'text-accent-green' : agency.passRate >= 80 ? 'text-accent-indigo' : 'text-orange-400'}>
-                              通过率 {agency.passRate}%
-                            </span>
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2">
+                              <span className="font-medium text-text-primary">{agency.name}</span>
+                              <span className="text-xs text-text-tertiary font-mono">{agency.id}</span>
+                            </div>
+                            {agency.contact_name && (
+                              <p className="text-sm text-text-secondary mt-0.5">{agency.contact_name}</p>
+                            )}
                           </div>
                         </div>
-                      </div>
-                    </button>
-                  )
-                })
-              ) : (
-                <div className="col-span-2 text-center py-8 text-text-tertiary">
-                  <Search size={32} className="mx-auto mb-2 opacity-50" />
-                  <p>未找到匹配的代理商</p>
-                </div>
-              )}
-            </div>
+                      </button>
+                    )
+                  })
+                ) : (
+                  <div className="col-span-2 text-center py-8 text-text-tertiary">
+                    <Search size={32} className="mx-auto mb-2 opacity-50" />
+                    <p>未找到匹配的代理商</p>
+                  </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
-              onClick={handleSubmit}
-              disabled={!isValid || isSubmitting}
-            >
-              {isSubmitting ? '创建中...' : '创建项目'}
+            <Button onClick={handleSubmit} disabled={!isValid || isSubmitting || isUploading}>
+              {isSubmitting ? (
+                <>
+                  <Loader2 size={16} className="animate-spin" />
+                  创建中...
+                </>
+              ) : '创建项目'}
             </Button>
           </div>
         </CardContent>