feat: 为所有终端添加平台显示功能

- 新增 frontend/lib/platforms.ts 共享平台配置模块
- 支持6个平台: 抖音、小红书、B站、快手、微博、微信视频号
- 品牌方终端: 项目看板、项目详情、终审台列表添加平台显示
- 代理商终端: 工作台概览、审核台、Brief配置、达人管理、
  数据报表、消息中心、申诉处理添加平台显示
- 达人端: 任务列表添加平台显示
- 统一使用彩色头部条样式展示平台信息

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

frontend/app/brand/agencies/page.tsx

@@ -238,7 +238,7 @@ export default function AgenciesManagePage() {
   }
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 min-h-0">
       {/* 页面标题 */}
       <div className="flex items-center justify-between">
         <div>
@@ -325,8 +325,8 @@ export default function AgenciesManagePage() {
 
       {/* 代理商列表 */}
       <Card>
-        <CardContent className="p-0">
-          <table className="w-full">
+        <CardContent className="p-0 overflow-x-auto">
+          <table className="w-full min-w-[900px]">
             <thead>
               <tr className="border-b border-border-subtle text-left text-sm text-text-secondary bg-bg-elevated">
                 <th className="px-6 py-4 font-medium">代理商</th>

frontend/app/brand/briefs/page.tsx

@@ -1,13 +1,23 @@
 'use client'
 
 import { useState } from 'react'
-import { Plus, FileText, Upload, Trash2, Edit } from 'lucide-react'
+import { Plus, FileText, Upload, Trash2, Edit, Check, Search, X, Eye } from 'lucide-react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
 import { Button } from '@/components/ui/Button'
 import { Input } from '@/components/ui/Input'
 import { Modal } from '@/components/ui/Modal'
 import { SuccessTag, PendingTag } from '@/components/ui/Tag'
 
+// 平台选项
+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]' },
+]
+
 // 模拟 Brief 列表
 const mockBriefs = [
   {
@@ -15,6 +25,7 @@ const mockBriefs = [
     name: '2024 夏日护肤活动',
     description: '夏日护肤系列产品推广规范',
     status: 'active',
+    platforms: ['douyin', 'xiaohongshu'],
     rulesCount: 12,
     creatorsCount: 45,
     createdAt: '2024-01-15',
@@ -25,6 +36,7 @@ const mockBriefs = [
     name: '新品口红上市',
     description: '春季新品口红营销 Brief',
     status: 'active',
+    platforms: ['xiaohongshu', 'bilibili'],
     rulesCount: 8,
     creatorsCount: 32,
     createdAt: '2024-02-01',
@@ -35,6 +47,7 @@ const mockBriefs = [
     name: '年货节活动',
     description: '春节年货促销活动规范',
     status: 'archived',
+    platforms: ['douyin', 'kuaishou'],
     rulesCount: 15,
     creatorsCount: 78,
     createdAt: '2024-01-01',
@@ -43,40 +56,104 @@ const mockBriefs = [
 ]
 
 export default function BriefsPage() {
-  const [briefs] = useState(mockBriefs)
+  const [briefs, setBriefs] = useState(mockBriefs)
   const [showCreateModal, setShowCreateModal] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
 
+  // 新建 Brief 表单
+  const [newBriefName, setNewBriefName] = useState('')
+  const [newBriefDesc, setNewBriefDesc] = useState('')
+  const [selectedPlatforms, setSelectedPlatforms] = useState<string[]>([])
+
+  // 查看详情
+  const [showDetailModal, setShowDetailModal] = useState(false)
+  const [selectedBrief, setSelectedBrief] = useState<typeof mockBriefs[0] | null>(null)
+
   const filteredBriefs = briefs.filter((brief) =>
     brief.name.toLowerCase().includes(searchQuery.toLowerCase())
   )
 
+  // 切换平台选择
+  const togglePlatform = (platformId: string) => {
+    setSelectedPlatforms(prev =>
+      prev.includes(platformId)
+        ? prev.filter(id => id !== platformId)
+        : [...prev, platformId]
+    )
+  }
+
+  // 获取平台信息
+  const getPlatformInfo = (platformId: string) => {
+    return platformOptions.find(p => p.id === platformId)
+  }
+
+  // 创建 Brief
+  const handleCreateBrief = () => {
+    if (!newBriefName.trim() || selectedPlatforms.length === 0) return
+
+    const newBrief = {
+      id: `brief-${Date.now()}`,
+      name: newBriefName,
+      description: newBriefDesc,
+      status: 'active' as const,
+      platforms: selectedPlatforms,
+      rulesCount: 0,
+      creatorsCount: 0,
+      createdAt: new Date().toISOString().split('T')[0],
+      updatedAt: new Date().toISOString().split('T')[0],
+    }
+
+    setBriefs([newBrief, ...briefs])
+    setShowCreateModal(false)
+    setNewBriefName('')
+    setNewBriefDesc('')
+    setSelectedPlatforms([])
+  }
+
+  // 查看 Brief 详情
+  const viewBriefDetail = (brief: typeof mockBriefs[0]) => {
+    setSelectedBrief(brief)
+    setShowDetailModal(true)
+  }
+
+  // 删除 Brief
+  const handleDeleteBrief = (id: string) => {
+    setBriefs(briefs.filter(b => b.id !== id))
+  }
+
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold text-gray-900">Brief 管理</h1>
-        <Button icon={Plus} onClick={() => setShowCreateModal(true)}>
+        <div>
+          <h1 className="text-2xl font-bold text-text-primary">Brief 管理</h1>
+          <p className="text-sm text-text-secondary mt-1">创建和管理营销 Brief，配置不同平台的审核规则</p>
+        </div>
+        <Button onClick={() => setShowCreateModal(true)}>
+          <Plus size={16} />
           新建 Brief
         </Button>
       </div>
 
       {/* 搜索 */}
-      <div className="max-w-md">
-        <Input
+      <div className="relative max-w-md">
+        <Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary" />
+        <input
+          type="text"
           placeholder="搜索 Brief..."
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
+          className="w-full pl-10 pr-4 py-2.5 border border-border-subtle rounded-xl bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
         />
       </div>
 
       {/* Brief 列表 */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {filteredBriefs.map((brief) => (
-          <Card key={brief.id} className="hover:shadow-md transition-shadow">
+          <Card key={brief.id} className="hover:shadow-md transition-shadow border border-border-subtle">
             <CardContent className="p-5">
               <div className="flex items-start justify-between mb-3">
-                <div className="p-2 bg-blue-50 rounded-lg">
-                  <FileText size={24} className="text-blue-600" />
+                <div className="p-2 bg-accent-indigo/15 rounded-lg">
+                  <FileText size={24} className="text-accent-indigo" />
                 </div>
                 {brief.status === 'active' ? (
                   <SuccessTag>使用中</SuccessTag>
@@ -85,24 +162,57 @@ export default function BriefsPage() {
                 )}
               </div>
 
-              <h3 className="font-semibold text-gray-900 mb-1">{brief.name}</h3>
-              <p className="text-sm text-gray-500 mb-4">{brief.description}</p>
+              <h3 className="font-semibold text-text-primary mb-1">{brief.name}</h3>
+              <p className="text-sm text-text-tertiary mb-3">{brief.description}</p>
 
-              <div className="flex gap-4 text-sm text-gray-500 mb-4">
+              {/* 平台标签 */}
+              <div className="flex flex-wrap gap-1.5 mb-3">
+                {brief.platforms.map(platformId => {
+                  const platform = getPlatformInfo(platformId)
+                  return platform ? (
+                    <span
+                      key={platformId}
+                      className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-bg-elevated text-xs text-text-secondary"
+                    >
+                      <span>{platform.icon}</span>
+                      {platform.name}
+                    </span>
+                  ) : null
+                })}
+              </div>
+
+              <div className="flex gap-4 text-sm text-text-tertiary mb-4">
                 <span>{brief.rulesCount} 条规则</span>
                 <span>{brief.creatorsCount} 位达人</span>
               </div>
 
-              <div className="flex items-center justify-between pt-3 border-t">
-                <span className="text-xs text-gray-400">
+              <div className="flex items-center justify-between pt-3 border-t border-border-subtle">
+                <span className="text-xs text-text-tertiary">
                   更新于 {brief.updatedAt}
                 </span>
-                <div className="flex gap-2">
-                  <button type="button" className="p-1 hover:bg-gray-100 rounded">
-                    <Edit size={16} className="text-gray-500" />
+                <div className="flex gap-1">
+                  <button
+                    type="button"
+                    onClick={() => viewBriefDetail(brief)}
+                    className="p-1.5 hover:bg-bg-elevated rounded-lg transition-colors"
+                    title="查看详情"
+                  >
+                    <Eye size={16} className="text-text-tertiary hover:text-accent-indigo" />
                   </button>
-                  <button type="button" className="p-1 hover:bg-gray-100 rounded">
-                    <Trash2 size={16} className="text-gray-500" />
+                  <button
+                    type="button"
+                    className="p-1.5 hover:bg-bg-elevated rounded-lg transition-colors"
+                    title="编辑"
+                  >
+                    <Edit size={16} className="text-text-tertiary hover:text-accent-indigo" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => handleDeleteBrief(brief.id)}
+                    className="p-1.5 hover:bg-accent-coral/10 rounded-lg transition-colors"
+                    title="删除"
+                  >
+                    <Trash2 size={16} className="text-text-tertiary hover:text-accent-coral" />
                   </button>
                 </div>
               </div>
@@ -111,58 +221,210 @@ export default function BriefsPage() {
         ))}
 
         {/* 新建卡片 */}
-        <Card
-          className="border-dashed cursor-pointer hover:border-blue-400 hover:bg-blue-50/50 transition-colors"
+        <button
+          type="button"
           onClick={() => setShowCreateModal(true)}
+          className="p-5 rounded-xl border-2 border-dashed border-border-subtle hover:border-accent-indigo hover:bg-accent-indigo/5 transition-all flex flex-col items-center justify-center min-h-[240px]"
         >
-          <CardContent className="p-5 flex flex-col items-center justify-center h-full min-h-[200px]">
-            <div className="p-3 bg-gray-100 rounded-full mb-3">
-              <Plus size={24} className="text-gray-500" />
-            </div>
-            <span className="text-gray-500">新建 Brief</span>
-          </CardContent>
-        </Card>
+          <div className="p-3 bg-bg-elevated rounded-full mb-3">
+            <Plus size={24} className="text-text-tertiary" />
+          </div>
+          <span className="text-text-tertiary font-medium">新建 Brief</span>
+        </button>
       </div>
 
       {/* 新建 Brief 弹窗 */}
       <Modal
         isOpen={showCreateModal}
-        onClose={() => setShowCreateModal(false)}
+        onClose={() => {
+          setShowCreateModal(false)
+          setNewBriefName('')
+          setNewBriefDesc('')
+          setSelectedPlatforms([])
+        }}
         title="新建 Brief"
-        size="md"
+        size="lg"
       >
-        <div className="space-y-4">
-          <Input label="Brief 名称" placeholder="输入 Brief 名称" />
+        <div className="space-y-5">
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">描述</label>
+            <label className="block text-sm font-medium text-text-primary mb-2">Brief 名称</label>
+            <input
+              type="text"
+              value={newBriefName}
+              onChange={(e) => setNewBriefName(e.target.value)}
+              placeholder="输入 Brief 名称"
+              className="w-full px-4 py-2.5 border border-border-subtle rounded-xl bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-2">描述</label>
             <textarea
-              className="w-full h-20 p-3 border rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
+              value={newBriefDesc}
+              onChange={(e) => setNewBriefDesc(e.target.value)}
+              className="w-full h-20 px-4 py-3 border border-border-subtle rounded-xl bg-bg-elevated text-text-primary resize-none focus:outline-none focus:ring-2 focus:ring-accent-indigo"
               placeholder="输入 Brief 描述..."
             />
           </div>
 
-          {/* 上传 PDF */}
+          {/* 选择平台规则库 */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              上传 Brief 文档（可选）
+            <label className="block text-sm font-medium text-text-primary mb-2">
+              选择平台规则库 <span className="text-accent-coral">*</span>
             </label>
-            <div className="border-2 border-dashed rounded-lg p-6 text-center hover:border-blue-400 transition-colors cursor-pointer">
-              <Upload size={32} className="mx-auto text-gray-400 mb-2" />
-              <p className="text-sm text-gray-600">点击或拖拽上传 PDF 文件</p>
-              <p className="text-xs text-gray-400 mt-1">AI 将自动提取规则</p>
+            <p className="text-xs text-text-tertiary mb-3">选择要应用的平台审核规则，可多选</p>
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+              {platformOptions.map((platform) => (
+                <button
+                  key={platform.id}
+                  type="button"
+                  onClick={() => togglePlatform(platform.id)}
+                  className={`p-3 rounded-xl border-2 transition-all flex items-center gap-3 ${
+                    selectedPlatforms.includes(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>
+                  <div className="flex-1 text-left">
+                    <p className="font-medium text-text-primary">{platform.name}</p>
+                  </div>
+                  {selectedPlatforms.includes(platform.id) && (
+                    <div className="w-5 h-5 rounded-full bg-accent-indigo flex items-center justify-center">
+                      <Check size={12} className="text-white" />
+                    </div>
+                  )}
+                </button>
+              ))}
             </div>
           </div>
 
-          <div className="flex gap-3 justify-end pt-4">
-            <Button variant="ghost" onClick={() => setShowCreateModal(false)}>
+          {/* 上传 PDF */}
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-2">
+              上传 Brief 文档（可选）
+            </label>
+            <div className="border-2 border-dashed border-border-subtle rounded-xl p-6 text-center hover:border-accent-indigo transition-colors cursor-pointer">
+              <Upload size={32} className="mx-auto text-text-tertiary mb-2" />
+              <p className="text-sm text-text-primary">点击或拖拽上传 PDF 文件</p>
+              <p className="text-xs text-text-tertiary mt-1">AI 将自动提取规则</p>
+            </div>
+          </div>
+
+          <div className="flex gap-3 justify-end pt-4 border-t border-border-subtle">
+            <Button
+              variant="ghost"
+              onClick={() => {
+                setShowCreateModal(false)
+                setNewBriefName('')
+                setNewBriefDesc('')
+                setSelectedPlatforms([])
+              }}
+            >
               取消
             </Button>
-            <Button onClick={() => setShowCreateModal(false)}>
-              创建
+            <Button
+              onClick={handleCreateBrief}
+              disabled={!newBriefName.trim() || selectedPlatforms.length === 0}
+            >
+              创建 Brief
             </Button>
           </div>
         </div>
       </Modal>
+
+      {/* Brief 详情弹窗 */}
+      <Modal
+        isOpen={showDetailModal}
+        onClose={() => {
+          setShowDetailModal(false)
+          setSelectedBrief(null)
+        }}
+        title={selectedBrief?.name || 'Brief 详情'}
+        size="lg"
+      >
+        {selectedBrief && (
+          <div className="space-y-5">
+            <div className="flex items-center gap-4 p-4 rounded-xl bg-bg-elevated">
+              <div className="p-3 bg-accent-indigo/15 rounded-xl">
+                <FileText size={28} className="text-accent-indigo" />
+              </div>
+              <div className="flex-1">
+                <h3 className="text-lg font-semibold text-text-primary">{selectedBrief.name}</h3>
+                <p className="text-sm text-text-tertiary mt-0.5">{selectedBrief.description}</p>
+              </div>
+              {selectedBrief.status === 'active' ? (
+                <SuccessTag>使用中</SuccessTag>
+              ) : (
+                <PendingTag>已归档</PendingTag>
+              )}
+            </div>
+
+            {/* 应用的平台规则库 */}
+            <div>
+              <h4 className="text-sm font-medium text-text-primary mb-3">应用的平台规则库</h4>
+              <div className="grid grid-cols-2 gap-3">
+                {selectedBrief.platforms.map(platformId => {
+                  const platform = getPlatformInfo(platformId)
+                  return platform ? (
+                    <div
+                      key={platformId}
+                      className="p-3 rounded-xl bg-bg-elevated border border-border-subtle flex items-center gap-3"
+                    >
+                      <div className={`w-10 h-10 ${platform.color} rounded-lg flex items-center justify-center text-lg`}>
+                        {platform.icon}
+                      </div>
+                      <div>
+                        <p className="font-medium text-text-primary">{platform.name}</p>
+                        <p className="text-xs text-text-tertiary">规则库已启用</p>
+                      </div>
+                    </div>
+                  ) : null
+                })}
+              </div>
+            </div>
+
+            {/* 统计数据 */}
+            <div className="grid grid-cols-3 gap-4">
+              <div className="p-4 rounded-xl bg-accent-indigo/10 border border-accent-indigo/20 text-center">
+                <p className="text-2xl font-bold text-accent-indigo">{selectedBrief.rulesCount}</p>
+                <p className="text-sm text-text-secondary mt-1">自定义规则</p>
+              </div>
+              <div className="p-4 rounded-xl bg-accent-green/10 border border-accent-green/20 text-center">
+                <p className="text-2xl font-bold text-accent-green">{selectedBrief.creatorsCount}</p>
+                <p className="text-sm text-text-secondary mt-1">关联达人</p>
+              </div>
+              <div className="p-4 rounded-xl bg-accent-amber/10 border border-accent-amber/20 text-center">
+                <p className="text-2xl font-bold text-accent-amber">{selectedBrief.platforms.length}</p>
+                <p className="text-sm text-text-secondary mt-1">平台规则库</p>
+              </div>
+            </div>
+
+            {/* 时间信息 */}
+            <div className="flex items-center justify-between p-4 rounded-xl bg-bg-elevated text-sm">
+              <div>
+                <span className="text-text-tertiary">创建时间：</span>
+                <span className="text-text-primary">{selectedBrief.createdAt}</span>
+              </div>
+              <div>
+                <span className="text-text-tertiary">最后更新：</span>
+                <span className="text-text-primary">{selectedBrief.updatedAt}</span>
+              </div>
+            </div>
+
+            <div className="flex gap-3 justify-end pt-4 border-t border-border-subtle">
+              <Button variant="ghost" onClick={() => setShowDetailModal(false)}>
+                关闭
+              </Button>
+              <Button>
+                编辑 Brief
+              </Button>
+            </div>
+          </div>
+        )}
+      </Modal>
     </div>
   )
 }

frontend/app/brand/final-review/page.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { ArrowLeft, Check, X, CheckSquare, Video, Clock } from 'lucide-react'
 import { cn } from '@/lib/utils'
+import { getPlatformInfo } from '@/lib/platforms'
 
 // 模拟待审核内容列表
 const mockReviewItems = [
@@ -12,6 +13,7 @@ const mockReviewItems = [
     title: '春季护肤新品体验分享',
     creator: '小美',
     agency: '代理商A',
+    platform: 'douyin',
     reviewer: '张三',
     reviewTime: '2小时前',
     agencyOpinion: '内容符合Brief要求，卖点覆盖完整，建议通过。',
@@ -29,6 +31,7 @@ const mockReviewItems = [
     title: '夏日清爽护肤推荐',
     creator: '小红',
     agency: '代理商B',
+    platform: 'xiaohongshu',
     reviewer: '李四',
     reviewTime: '5小时前',
     agencyOpinion: '内容质量良好，但部分镜头略暗，建议后期调整后通过。',
@@ -99,6 +102,7 @@ export default function FinalReviewPage() {
   const [selectedItem, setSelectedItem] = useState(mockReviewItems[0])
   const [feedback, setFeedback] = useState('')
   const [isSubmitting, setIsSubmitting] = useState(false)
+  const platform = getPlatformInfo(selectedItem.platform)
 
   const handleApprove = async () => {
     setIsSubmitting(true)
@@ -122,11 +126,19 @@ export default function FinalReviewPage() {
   }
 
   return (
-    <div className="flex flex-col gap-6 h-full">
+    <div className="flex flex-col gap-6 h-full min-h-0">
       {/* 顶部栏 */}
       <div className="flex items-center justify-between">
         <div className="flex flex-col gap-1">
-          <h1 className="text-2xl font-bold text-text-primary">终审台</h1>
+          <div className="flex items-center gap-3">
+            <h1 className="text-2xl font-bold text-text-primary">终审台</h1>
+            {platform && (
+              <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-sm font-medium ${platform.bgColor} ${platform.textColor} border ${platform.borderColor}`}>
+                <span>{platform.icon}</span>
+                {platform.name}
+              </span>
+            )}
+          </div>
           <p className="text-sm text-text-secondary">
             {selectedItem.title} · 达人: {selectedItem.creator}
           </p>
@@ -167,7 +179,7 @@ export default function FinalReviewPage() {
         </div>
 
         {/* 右侧 - 分析面板 */}
-        <div className="w-[380px] flex flex-col gap-4 overflow-auto">
+        <div className="w-[380px] flex flex-col gap-4 overflow-y-auto overflow-x-hidden">
           {/* 代理商初审意见 */}
           <div className="bg-bg-card rounded-2xl p-5 card-shadow">
             <div className="flex items-center justify-between mb-3">

frontend/app/brand/page.tsx

@@ -19,11 +19,22 @@ import {
   Pencil
 } from 'lucide-react'
 
+// 平台选项 - 抖音用青色(品牌渐变色之一)，深色主题下更清晰
+const platformOptions = [
+  { 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 }
@@ -37,6 +48,7 @@ const initialProjects: Project[] = [
     id: 'proj-001',
     name: 'XX品牌618推广',
     status: 'active',
+    platform: 'douyin',
     deadline: '2026-06-18',
     scriptCount: { total: 20, passed: 15, pending: 3, rejected: 2 },
     videoCount: { total: 20, passed: 12, pending: 5, rejected: 3 },
@@ -47,6 +59,7 @@ const initialProjects: Project[] = [
     id: 'proj-002',
     name: '新品口红系列',
     status: 'active',
+    platform: 'xiaohongshu',
     deadline: '2026-03-15',
     scriptCount: { total: 12, passed: 10, pending: 1, rejected: 1 },
     videoCount: { total: 12, passed: 8, pending: 3, rejected: 1 },
@@ -57,14 +70,31 @@ const initialProjects: Project[] = [
     id: 'proj-003',
     name: '护肤品秋季活动',
     status: 'completed',
+    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',
+    name: '双11预热活动',
+    status: 'active',
+    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>
@@ -74,34 +104,42 @@ function StatusTag({ status }: { status: string }) {
 function ProjectCard({ project, onEditDeadline }: { project: Project; onEditDeadline: (project: Project) => 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">
-        <CardContent className="p-6 space-y-4">
-          {/* 项目头部 */}
-          <div className="flex items-start justify-between">
-            <div>
-              <h3 className="text-lg font-semibold text-text-primary">{project.name}</h3>
-              <div className="flex items-center gap-2 mt-1 text-sm text-text-secondary">
-                <Calendar size={14} />
-                <span>截止 {project.deadline}</span>
-                <button
-                  type="button"
-                  onClick={(e) => {
-                    e.preventDefault()
-                    e.stopPropagation()
-                    onEditDeadline(project)
-                  }}
-                  className="p-1 rounded hover:bg-bg-page transition-colors"
-                  title="修改截止日期"
-                >
-                  <Pencil size={12} className="text-text-tertiary hover:text-accent-indigo" />
-                </button>
-              </div>
+      <Card className="hover:border-accent-indigo/50 transition-colors cursor-pointer h-full overflow-hidden">
+        {/* 平台顶部条 */}
+        {platform && (
+          <div className={`px-6 py-2 ${platform.bgColor} border-b ${platform.borderColor} flex items-center justify-between`}>
+            <div className="flex items-center gap-2">
+              <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>
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  onEditDeadline(project)
+                }}
+                className="p-1 rounded hover:bg-bg-page transition-colors"
+                title="修改截止日期"
+              >
+                <Pencil size={12} className="text-text-tertiary hover:text-accent-indigo" />
+              </button>
+            </div>
+          </div>
 
           {/* 脚本进度 */}
           <div>
@@ -171,6 +209,7 @@ function ProjectCard({ project, onEditDeadline }: { project: Project; onEditDead
 export default function BrandProjectsPage() {
   const [searchQuery, setSearchQuery] = useState('')
   const [statusFilter, setStatusFilter] = useState<string>('all')
+  const [platformFilter, setPlatformFilter] = useState<string>('all')
   const [projects, setProjects] = useState<Project[]>(initialProjects)
 
   // 编辑截止日期相关状态
@@ -200,7 +239,8 @@ export default function BrandProjectsPage() {
   const filteredProjects = projects.filter(project => {
     const matchesSearch = project.name.toLowerCase().includes(searchQuery.toLowerCase())
     const matchesStatus = statusFilter === 'all' || project.status === statusFilter
-    return matchesSearch && matchesStatus
+    const matchesPlatform = platformFilter === 'all' || project.platform === platformFilter
+    return matchesSearch && matchesStatus && matchesPlatform
   })
 
   return (
@@ -220,7 +260,7 @@ export default function BrandProjectsPage() {
       </div>
 
       {/* 搜索和筛选 */}
-      <div className="flex items-center gap-4">
+      <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" />
           <input
@@ -233,6 +273,16 @@ 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)}
@@ -246,6 +296,36 @@ export default function BrandProjectsPage() {
         </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) => (

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

@@ -27,11 +27,13 @@ import {
   Check,
   Pencil
 } from 'lucide-react'
+import { getPlatformInfo } from '@/lib/platforms'
 
 // 模拟项目详情数据
 const mockProject = {
   id: 'proj-001',
   name: 'XX品牌618推广',
+  platform: 'douyin',
   status: 'active',
   deadline: '2026-06-18',
   createdAt: '2026-02-01',
@@ -177,6 +179,8 @@ export default function ProjectDetailPage() {
     setAgencyToDelete(null)
   }
 
+  const platform = getPlatformInfo(project.platform)
+
   return (
     <div className="space-y-6">
       {/* 顶部导航 */}
@@ -185,7 +189,15 @@ export default function ProjectDetailPage() {
           <ArrowLeft size={20} className="text-text-primary" />
         </button>
         <div className="flex-1">
-          <h1 className="text-2xl font-bold text-text-primary">{project.name}</h1>
+          <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>
         </div>
         <SuccessTag>进行中</SuccessTag>

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

@@ -14,9 +14,20 @@ import {
   X,
   Users,
   Search,
-  Building2
+  Building2,
+  Check
 } from 'lucide-react'
 
+// 平台选项
+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 },
@@ -33,6 +44,7 @@ export default function CreateProjectPage() {
   const [deadline, setDeadline] = useState('')
   const [briefFile, setBriefFile] = useState<File | null>(null)
   const [selectedAgencies, setSelectedAgencies] = useState<string[]>([])
+  const [selectedPlatform, setSelectedPlatform] = useState<string>('')
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [agencySearch, setAgencySearch] = useState('')
 
@@ -60,7 +72,7 @@ export default function CreateProjectPage() {
   }
 
   const handleSubmit = async () => {
-    if (!projectName.trim() || !deadline || !briefFile || selectedAgencies.length === 0) {
+    if (!projectName.trim() || !deadline || !briefFile || selectedAgencies.length === 0 || !selectedPlatform) {
       alert('请填写完整信息')
       return
     }
@@ -72,7 +84,7 @@ export default function CreateProjectPage() {
     router.push('/brand')
   }
 
-  const isValid = projectName.trim() && deadline && briefFile && selectedAgencies.length > 0
+  const isValid = projectName.trim() && deadline && briefFile && selectedAgencies.length > 0 && selectedPlatform
 
   return (
     <div className="space-y-6 max-w-4xl">
@@ -100,6 +112,38 @@ 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>
+          </div>
+
           {/* 截止日期 */}
           <div>
             <label className="block text-sm font-medium text-text-primary mb-2">

frontend/app/brand/review/page.tsx

@@ -16,6 +16,7 @@ import {
   ChevronRight,
   AlertTriangle
 } from 'lucide-react'
+import { getPlatformInfo } from '@/lib/platforms'
 
 // 模拟脚本待审列表
 const mockScriptTasks = [
@@ -25,6 +26,7 @@ const mockScriptTasks = [
     creatorName: '小美护肤',
     agencyName: '星耀传媒',
     projectName: 'XX品牌618推广',
+    platform: 'douyin',
     aiScore: 88,
     submittedAt: '2026-02-06 14:30',
     hasHighRisk: false,
@@ -36,6 +38,7 @@ const mockScriptTasks = [
     creatorName: '美妆Lisa',
     agencyName: '创意无限',
     projectName: 'XX品牌618推广',
+    platform: 'xiaohongshu',
     aiScore: 72,
     submittedAt: '2026-02-06 12:15',
     hasHighRisk: true,
@@ -51,6 +54,7 @@ const mockVideoTasks = [
     creatorName: '小美护肤',
     agencyName: '星耀传媒',
     projectName: 'XX品牌618推广',
+    platform: 'douyin',
     aiScore: 85,
     duration: '02:15',
     submittedAt: '2026-02-06 15:00',
@@ -63,6 +67,7 @@ const mockVideoTasks = [
     creatorName: '美妆Lisa',
     agencyName: '创意无限',
     projectName: 'XX品牌618推广',
+    platform: 'xiaohongshu',
     aiScore: 68,
     duration: '03:42',
     submittedAt: '2026-02-06 13:45',
@@ -75,6 +80,7 @@ const mockVideoTasks = [
     creatorName: '健身教练王',
     agencyName: '美妆达人MCN',
     projectName: 'XX运动品牌',
+    platform: 'bilibili',
     aiScore: 92,
     duration: '04:20',
     submittedAt: '2026-02-06 11:30',
@@ -91,46 +97,56 @@ function ScoreTag({ score }: { score: number }) {
 
 function TaskCard({ task, type }: { task: typeof mockScriptTasks[0] | typeof mockVideoTasks[0]; type: 'script' | 'video' }) {
   const href = type === 'script' ? `/brand/review/script/${task.id}` : `/brand/review/video/${task.id}`
+  const platform = getPlatformInfo(task.platform)
 
   return (
     <Link href={href}>
-      <div className="p-4 rounded-lg border border-border-subtle hover:border-accent-indigo/50 hover:bg-accent-indigo/5 transition-all cursor-pointer">
-        <div className="flex items-start justify-between mb-3">
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2">
-              <h4 className="font-medium text-text-primary truncate">{task.title}</h4>
-              {task.hasHighRisk && (
-                <span className="flex items-center gap-1 px-2 py-0.5 text-xs bg-accent-coral/20 text-accent-coral rounded">
-                  <AlertTriangle size={12} />
-                  高风险
-                </span>
-              )}
-            </div>
-            <div className="flex items-center gap-4 mt-1 text-sm text-text-secondary">
-              <span className="flex items-center gap-1">
-                <User size={12} />
-                {task.creatorName}
-              </span>
-              <span className="flex items-center gap-1">
-                <Building size={12} />
-                {task.agencyName}
-              </span>
-            </div>
-          </div>
-          <ScoreTag score={task.aiScore} />
-        </div>
-        <div className="flex items-center justify-between text-xs text-text-tertiary">
-          <span>{task.projectName}</span>
-          <span className="flex items-center gap-1">
-            <Clock size={12} />
-            {task.submittedAt}
-          </span>
-        </div>
-        {'duration' in task && (
-          <div className="mt-2 text-xs text-text-tertiary">
-            时长: {task.duration}
+      <div className="rounded-lg border border-border-subtle hover:border-accent-indigo/50 hover:bg-accent-indigo/5 transition-all cursor-pointer overflow-hidden">
+        {/* 平台顶部条 */}
+        {platform && (
+          <div className={`px-4 py-1.5 ${platform.bgColor} border-b ${platform.borderColor} flex items-center gap-1.5`}>
+            <span className="text-sm">{platform.icon}</span>
+            <span className={`text-xs font-medium ${platform.textColor}`}>{platform.name}</span>
           </div>
         )}
+        <div className="p-4">
+          <div className="flex items-start justify-between mb-3">
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2">
+                <h4 className="font-medium text-text-primary truncate">{task.title}</h4>
+                {task.hasHighRisk && (
+                  <span className="flex items-center gap-1 px-2 py-0.5 text-xs bg-accent-coral/20 text-accent-coral rounded">
+                    <AlertTriangle size={12} />
+                    高风险
+                  </span>
+                )}
+              </div>
+              <div className="flex items-center gap-4 mt-1 text-sm text-text-secondary">
+                <span className="flex items-center gap-1">
+                  <User size={12} />
+                  {task.creatorName}
+                </span>
+                <span className="flex items-center gap-1">
+                  <Building size={12} />
+                  {task.agencyName}
+                </span>
+              </div>
+            </div>
+            <ScoreTag score={task.aiScore} />
+          </div>
+          <div className="flex items-center justify-between text-xs text-text-tertiary">
+            <span>{task.projectName}</span>
+            <span className="flex items-center gap-1">
+              <Clock size={12} />
+              {task.submittedAt}
+            </span>
+          </div>
+          {'duration' in task && (
+            <div className="mt-2 text-xs text-text-tertiary">
+              时长: {task.duration}
+            </div>
+          )}
+        </div>
       </div>
     </Link>
   )

frontend/app/brand/settings/page.tsx

@@ -156,7 +156,7 @@ export default function BrandSettingsPage() {
         </div>
         <Button
           variant="secondary"
-          className="text-accent-coral border-accent-coral/30 hover:bg-accent-coral/10"
+          className="bg-accent-coral/15 text-accent-coral border-accent-coral hover:bg-accent-coral hover:text-white"
           onClick={() => setShowLogoutModal(true)}
         >
           <LogOut size={16} />