From 0bfedb95c882e088d5efb8cc90d3f1c17ccd8316 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Fri, 6 Feb 2026 18:53:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=E6=89=80=E6=9C=89=E7=BB=88?=
 =?UTF-8?q?=E7=AB=AF=E6=B7=BB=E5=8A=A0=E5=B9=B3=E5=8F=B0=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/app/agency/appeals/page.tsx          |   68 +-
 frontend/app/agency/briefs/page.tsx           |   74 +-
 frontend/app/agency/creators/page.tsx         |   78 +-
 frontend/app/agency/messages/page.tsx         |   20 +-
 frontend/app/agency/page.tsx                  |   88 +-
 frontend/app/agency/reports/page.tsx          |   61 +-
 frontend/app/agency/review/page.tsx           |   63 +-
 frontend/app/brand/agencies/page.tsx          |    6 +-
 frontend/app/brand/briefs/page.tsx            |  352 +++++-
 frontend/app/brand/final-review/page.tsx      |   18 +-
 frontend/app/brand/page.tsx                   |  128 ++-
 frontend/app/brand/projects/[id]/page.tsx     |   14 +-
 frontend/app/brand/projects/create/page.tsx   |   50 +-
 frontend/app/brand/review/page.tsx            |   86 +-
 frontend/app/brand/rules/page.tsx             | 1007 ++++++++++++++---
 frontend/app/brand/settings/page.tsx          |    2 +-
 frontend/app/creator/page.tsx                 |   71 +-
 frontend/components/layout/DesktopLayout.tsx  |    8 +-
 frontend/components/layout/MobileLayout.tsx   |    8 +-
 .../components/layout/ResponsiveLayout.tsx    |    8 +-
 frontend/components/ui/Modal.tsx              |   12 +-
 frontend/lib/platforms.ts                     |   22 +
 22 files changed, 1784 insertions(+), 460 deletions(-)
 create mode 100644 frontend/lib/platforms.ts

diff --git a/frontend/app/agency/appeals/page.tsx b/frontend/app/agency/appeals/page.tsx
index da59d68..a258692 100644
--- a/frontend/app/agency/appeals/page.tsx
+++ b/frontend/app/agency/appeals/page.tsx
@@ -17,6 +17,7 @@ import {
   FileText,
   Video
 } from 'lucide-react'
+import { getPlatformInfo } from '@/lib/platforms'
 
 // 申诉状态类型
 type AppealStatus = 'pending' | 'processing' | 'approved' | 'rejected'
@@ -31,6 +32,7 @@ interface Appeal {
   taskTitle: string
   creatorId: string
   creatorName: string
+  platform: string
   type: AppealType
   contentType: 'script' | 'video'
   reason: string
@@ -48,6 +50,7 @@ const mockAppeals: Appeal[] = [
     taskTitle: '夏日护肤推广脚本',
     creatorId: 'creator-001',
     creatorName: '小美护肤',
+    platform: 'douyin',
     type: 'ai',
     contentType: 'script',
     reason: 'AI误判',
@@ -61,6 +64,7 @@ const mockAppeals: Appeal[] = [
     taskTitle: '新品口红试色',
     creatorId: 'creator-002',
     creatorName: '美妆Lisa',
+    platform: 'xiaohongshu',
     type: 'agency',
     contentType: 'video',
     reason: '审核标准不清晰',
@@ -74,6 +78,7 @@ const mockAppeals: Appeal[] = [
     taskTitle: '健身器材推荐',
     creatorId: 'creator-003',
     creatorName: '健身教练王',
+    platform: 'bilibili',
     type: 'ai',
     contentType: 'script',
     reason: '违禁词误判',
@@ -88,6 +93,7 @@ const mockAppeals: Appeal[] = [
     taskTitle: '美妆新品测评',
     creatorId: 'creator-004',
     creatorName: '达人小红',
+    platform: 'xiaohongshu',
     type: 'agency',
     contentType: 'video',
     reason: '品牌调性理解差异',
@@ -116,38 +122,47 @@ function AppealCard({ appeal }: { appeal: Appeal }) {
   const status = statusConfig[appeal.status]
   const type = typeConfig[appeal.type]
   const StatusIcon = status.icon
+  const platform = getPlatformInfo(appeal.platform)
 
   return (
     <Link href={`/agency/appeals/${appeal.id}`}>
-      <div className="p-4 rounded-xl bg-bg-elevated hover:bg-bg-elevated/80 transition-colors cursor-pointer">
-        {/* 顶部：状态和类型 */}
-        <div className="flex items-center justify-between mb-3">
-          <div className="flex items-center gap-2">
-            <div className={`w-8 h-8 rounded-lg ${status.bgColor} flex items-center justify-center`}>
-              <StatusIcon size={16} className={status.color} />
-            </div>
-            <div>
-              <span className="font-medium text-text-primary">{appeal.taskTitle}</span>
-              <div className="flex items-center gap-2 text-xs text-text-tertiary">
-                <span className="flex items-center gap-1">
-                  <User size={10} />
-                  {appeal.creatorName}
-                </span>
-                <span>·</span>
-                <span className="flex items-center gap-1">
-                  {appeal.contentType === 'script' ? <FileText size={10} /> : <Video size={10} />}
-                  {appeal.contentType === 'script' ? '脚本' : '视频'}
-                </span>
+      <div className="rounded-xl bg-bg-elevated hover:bg-bg-elevated/80 transition-colors 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-center justify-between mb-3">
+            <div className="flex items-center gap-2">
+              <div className={`w-8 h-8 rounded-lg ${status.bgColor} flex items-center justify-center`}>
+                <StatusIcon size={16} className={status.color} />
+              </div>
+              <div>
+                <span className="font-medium text-text-primary">{appeal.taskTitle}</span>
+                <div className="flex items-center gap-2 text-xs text-text-tertiary">
+                  <span className="flex items-center gap-1">
+                    <User size={10} />
+                    {appeal.creatorName}
+                  </span>
+                  <span>·</span>
+                  <span className="flex items-center gap-1">
+                    {appeal.contentType === 'script' ? <FileText size={10} /> : <Video size={10} />}
+                    {appeal.contentType === 'script' ? '脚本' : '视频'}
+                  </span>
+                </div>
               </div>
             </div>
+            <div className="flex items-center gap-2">
+              <span className={`px-2 py-1 rounded-full text-xs font-medium ${status.bgColor} ${status.color}`}>
+                {status.label}
+              </span>
+              <ChevronRight size={16} className="text-text-tertiary" />
+            </div>
           </div>
-          <div className="flex items-center gap-2">
-            <span className={`px-2 py-1 rounded-full text-xs font-medium ${status.bgColor} ${status.color}`}>
-              {status.label}
-            </span>
-            <ChevronRight size={16} className="text-text-tertiary" />
-          </div>
-        </div>
 
         {/* 申诉信息 */}
         <div className="space-y-2 mb-3">
@@ -167,6 +182,7 @@ function AppealCard({ appeal }: { appeal: Appeal }) {
           <span>提交时间: {appeal.createdAt}</span>
           {appeal.updatedAt && <span>处理时间: {appeal.updatedAt}</span>}
         </div>
+        </div>
       </div>
     </Link>
   )
diff --git a/frontend/app/agency/briefs/page.tsx b/frontend/app/agency/briefs/page.tsx
index 274c1cb..eec8c10 100644
--- a/frontend/app/agency/briefs/page.tsx
+++ b/frontend/app/agency/briefs/page.tsx
@@ -15,6 +15,7 @@ import {
   ChevronRight,
   Settings
 } from 'lucide-react'
+import { getPlatformInfo } from '@/lib/platforms'
 
 // 模拟 Brief 列表
 const mockBriefs = [
@@ -22,6 +23,7 @@ const mockBriefs = [
     id: 'brief-001',
     projectName: 'XX品牌618推广',
     brandName: 'XX护肤品牌',
+    platform: 'douyin',
     status: 'configured',
     uploadedAt: '2026-02-01',
     configuredAt: '2026-02-02',
@@ -33,6 +35,7 @@ const mockBriefs = [
     id: 'brief-002',
     projectName: '新品口红系列',
     brandName: 'XX美妆品牌',
+    platform: 'xiaohongshu',
     status: 'pending',
     uploadedAt: '2026-02-05',
     configuredAt: null,
@@ -44,6 +47,7 @@ const mockBriefs = [
     id: 'brief-003',
     projectName: '护肤品秋季活动',
     brandName: 'XX护肤品牌',
+    platform: 'bilibili',
     status: 'configured',
     uploadedAt: '2025-09-15',
     configuredAt: '2025-09-16',
@@ -74,7 +78,7 @@ export default function AgencyBriefsPage() {
   const configuredCount = mockBriefs.filter(b => b.status === 'configured').length
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 min-h-0">
       {/* 页面标题 */}
       <div className="flex items-center justify-between">
         <div>
@@ -136,35 +140,44 @@ export default function AgencyBriefsPage() {
 
       {/* Brief 列表 */}
       <div className="grid grid-cols-1 gap-4">
-        {filteredBriefs.map((brief) => (
-          <Link key={brief.id} href={`/agency/briefs/${brief.id}`}>
-            <Card className="hover:border-accent-indigo/50 transition-colors cursor-pointer">
-              <CardContent className="py-4">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-4">
-                    <div className={`w-12 h-12 rounded-lg flex items-center justify-center ${
-                      brief.status === 'configured' ? 'bg-accent-green/20' : 'bg-yellow-500/20'
-                    }`}>
-                      {brief.status === 'configured' ? (
-                        <CheckCircle size={24} className="text-accent-green" />
-                      ) : (
-                        <AlertTriangle size={24} className="text-yellow-400" />
-                      )}
-                    </div>
-                    <div>
-                      <div className="flex items-center gap-2">
-                        <h3 className="font-medium text-text-primary">{brief.projectName}</h3>
-                        <StatusTag status={brief.status} />
-                      </div>
-                      <div className="flex items-center gap-4 mt-1 text-sm text-text-secondary">
-                        <span>{brief.brandName}</span>
-                        <span className="flex items-center gap-1">
-                          <Clock size={12} />
-                          上传于 {brief.uploadedAt}
-                        </span>
-                      </div>
-                    </div>
+        {filteredBriefs.map((brief) => {
+          const platform = getPlatformInfo(brief.platform)
+          return (
+            <Link key={brief.id} href={`/agency/briefs/${brief.id}`}>
+              <Card className="hover:border-accent-indigo/50 transition-colors cursor-pointer overflow-hidden">
+                {/* 平台顶部条 */}
+                {platform && (
+                  <div className={`px-6 py-2 ${platform.bgColor} border-b ${platform.borderColor} flex items-center gap-2`}>
+                    <span className="text-base">{platform.icon}</span>
+                    <span className={`text-sm font-medium ${platform.textColor}`}>{platform.name}</span>
                   </div>
+                )}
+                <CardContent className="py-4">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-4">
+                      <div className={`w-12 h-12 rounded-lg flex items-center justify-center ${
+                        brief.status === 'configured' ? 'bg-accent-green/20' : 'bg-yellow-500/20'
+                      }`}>
+                        {brief.status === 'configured' ? (
+                          <CheckCircle size={24} className="text-accent-green" />
+                        ) : (
+                          <AlertTriangle size={24} className="text-yellow-400" />
+                        )}
+                      </div>
+                      <div>
+                        <div className="flex items-center gap-2">
+                          <h3 className="font-medium text-text-primary">{brief.projectName}</h3>
+                          <StatusTag status={brief.status} />
+                        </div>
+                        <div className="flex items-center gap-4 mt-1 text-sm text-text-secondary">
+                          <span>{brief.brandName}</span>
+                          <span className="flex items-center gap-1">
+                            <Clock size={12} />
+                            上传于 {brief.uploadedAt}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
 
                   <div className="flex items-center gap-8">
                     {brief.status === 'configured' && (
@@ -201,7 +214,8 @@ export default function AgencyBriefsPage() {
               </CardContent>
             </Card>
           </Link>
-        ))}
+          )
+        })}
       </div>
 
       {filteredBriefs.length === 0 && (
diff --git a/frontend/app/agency/creators/page.tsx b/frontend/app/agency/creators/page.tsx
index 6e1a162..1d7f153 100644
--- a/frontend/app/agency/creators/page.tsx
+++ b/frontend/app/agency/creators/page.tsx
@@ -27,6 +27,7 @@ import {
   FolderPlus,
   X
 } from 'lucide-react'
+import { getPlatformInfo } from '@/lib/platforms'
 
 // 任务进度阶段
 type TaskStage = 'script_pending' | 'script_ai_review' | 'script_agency_review' | 'script_brand_review' |
@@ -50,6 +51,7 @@ interface CreatorTask {
   id: string
   name: string
   projectName: string
+  platform: string
   stage: TaskStage
   appealRemaining: number
   appealUsed: number
@@ -95,8 +97,8 @@ const mockCreators: Creator[] = [
     trend: 'up',
     joinedAt: '2025-08-15',
     tasks: [
-      { id: 'task-001', name: '夏日护肤推广', projectName: 'XX品牌618', stage: 'video_agency_review', appealRemaining: 1, appealUsed: 0 },
-      { id: 'task-002', name: '防晒霜测评', projectName: 'XX品牌618', stage: 'script_brand_review', appealRemaining: 0, appealUsed: 1 },
+      { id: 'task-001', name: '夏日护肤推广', projectName: 'XX品牌618', platform: 'douyin', stage: 'video_agency_review', appealRemaining: 1, appealUsed: 0 },
+      { id: 'task-002', name: '防晒霜测评', projectName: 'XX品牌618', platform: 'douyin', stage: 'script_brand_review', appealRemaining: 0, appealUsed: 1 },
     ],
   },
   {
@@ -112,7 +114,7 @@ const mockCreators: Creator[] = [
     trend: 'stable',
     joinedAt: '2025-10-20',
     tasks: [
-      { id: 'task-003', name: '新品口红试色', projectName: '口红系列推广', stage: 'video_pending', appealRemaining: 2, appealUsed: 0 },
+      { id: 'task-003', name: '新品口红试色', projectName: '口红系列推广', platform: 'xiaohongshu', stage: 'video_pending', appealRemaining: 2, appealUsed: 0 },
     ],
   },
   {
@@ -128,7 +130,7 @@ const mockCreators: Creator[] = [
     trend: 'up',
     joinedAt: '2025-12-01',
     tasks: [
-      { id: 'task-004', name: '健身器材使用教程', projectName: 'XX运动品牌', stage: 'script_ai_review', appealRemaining: 1, appealUsed: 0 },
+      { id: 'task-004', name: '健身器材使用教程', projectName: 'XX运动品牌', platform: 'bilibili', stage: 'script_ai_review', appealRemaining: 1, appealUsed: 0 },
     ],
   },
   {
@@ -304,7 +306,7 @@ export default function AgencyCreatorsPage() {
   }
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 min-h-0">
       {/* 页面标题 */}
       <div className="flex items-center justify-between">
         <div>
@@ -387,8 +389,8 @@ export default function AgencyCreatorsPage() {
 
       {/* 达人列表 */}
       <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>
@@ -556,33 +558,45 @@ export default function AgencyCreatorsPage() {
                           <div className="ml-9 pl-6 border-l-2 border-accent-indigo/30">
                             <div className="text-sm font-medium text-text-secondary mb-3">进行中的任务</div>
                             <div className="space-y-2">
-                              {creator.tasks.map(task => (
-                                <div key={task.id} className="flex items-center justify-between p-4 bg-bg-card rounded-xl">
-                                  <div className="flex items-center gap-4">
-                                    <div>
-                                      <div className="font-medium text-text-primary">{task.name}</div>
-                                      <div className="text-xs text-text-tertiary mt-0.5">项目: {task.projectName}</div>
+                              {creator.tasks.map(task => {
+                                const taskPlatform = getPlatformInfo(task.platform)
+                                return (
+                                  <div key={task.id} className="bg-bg-card rounded-xl overflow-hidden">
+                                    {/* 平台顶部条 */}
+                                    {taskPlatform && (
+                                      <div className={`px-4 py-1.5 ${taskPlatform.bgColor} border-b ${taskPlatform.borderColor} flex items-center gap-1.5`}>
+                                        <span className="text-sm">{taskPlatform.icon}</span>
+                                        <span className={`text-xs font-medium ${taskPlatform.textColor}`}>{taskPlatform.name}</span>
+                                      </div>
+                                    )}
+                                    <div className="flex items-center justify-between p-4">
+                                      <div className="flex items-center gap-4">
+                                        <div>
+                                          <div className="font-medium text-text-primary">{task.name}</div>
+                                          <div className="text-xs text-text-tertiary mt-0.5">项目: {task.projectName}</div>
+                                        </div>
+                                        <StageTag stage={task.stage} />
+                                      </div>
+                                      <div className="flex items-center gap-4">
+                                        <div className="flex items-center gap-3 text-sm">
+                                          <span className="text-text-tertiary">申诉次数:</span>
+                                          <span className="text-accent-indigo font-medium">{task.appealRemaining}</span>
+                                          <span className="text-text-tertiary">/</span>
+                                          <span className="text-text-tertiary">已用 {task.appealUsed}</span>
+                                        </div>
+                                        <Button
+                                          variant="secondary"
+                                          size="sm"
+                                          onClick={() => handleAddAppealQuota(creator.id, task.id)}
+                                        >
+                                          <PlusCircle size={14} />
+                                          +1 次
+                                        </Button>
+                                      </div>
                                     </div>
-                                    <StageTag stage={task.stage} />
                                   </div>
-                                  <div className="flex items-center gap-4">
-                                    <div className="flex items-center gap-3 text-sm">
-                                      <span className="text-text-tertiary">申诉次数:</span>
-                                      <span className="text-accent-indigo font-medium">{task.appealRemaining}</span>
-                                      <span className="text-text-tertiary">/</span>
-                                      <span className="text-text-tertiary">已用 {task.appealUsed}</span>
-                                    </div>
-                                    <Button
-                                      variant="secondary"
-                                      size="sm"
-                                      onClick={() => handleAddAppealQuota(creator.id, task.id)}
-                                    >
-                                      <PlusCircle size={14} />
-                                      +1 次
-                                    </Button>
-                                  </div>
-                                </div>
-                              ))}
+                                )
+                              })}
                             </div>
                           </div>
                         </td>
diff --git a/frontend/app/agency/messages/page.tsx b/frontend/app/agency/messages/page.tsx
index 7fb6ccb..33b3fdb 100644
--- a/frontend/app/agency/messages/page.tsx
+++ b/frontend/app/agency/messages/page.tsx
@@ -17,6 +17,7 @@ import {
   MoreVertical,
   PlusCircle
 } from 'lucide-react'
+import { getPlatformInfo } from '@/lib/platforms'
 
 // 消息类型
 interface Message {
@@ -29,6 +30,7 @@ interface Message {
   icon: typeof Bell
   iconColor: string
   bgColor: string
+  platform?: string
   // 申诉次数请求专用字段
   appealRequest?: {
     creatorName: string
@@ -50,6 +52,7 @@ const mockMessages: Message[] = [
     icon: PlusCircle,
     iconColor: 'text-accent-amber',
     bgColor: 'bg-accent-amber/20',
+    platform: 'douyin',
     appealRequest: {
       creatorName: '李小红',
       taskName: '618美妆推广视频',
@@ -67,6 +70,7 @@ const mockMessages: Message[] = [
     icon: FileText,
     iconColor: 'text-accent-indigo',
     bgColor: 'bg-accent-indigo/20',
+    platform: 'xiaohongshu',
   },
   {
     id: 'msg-003',
@@ -78,6 +82,7 @@ const mockMessages: Message[] = [
     icon: PlusCircle,
     iconColor: 'text-accent-amber',
     bgColor: 'bg-accent-amber/20',
+    platform: 'xiaohongshu',
     appealRequest: {
       creatorName: '美妆达人小王',
       taskName: '双11护肤品种草',
@@ -95,6 +100,7 @@ const mockMessages: Message[] = [
     icon: CheckCircle,
     iconColor: 'text-accent-green',
     bgColor: 'bg-accent-green/20',
+    platform: 'xiaohongshu',
   },
   {
     id: 'msg-005',
@@ -106,6 +112,7 @@ const mockMessages: Message[] = [
     icon: XCircle,
     iconColor: 'text-accent-coral',
     bgColor: 'bg-accent-coral/20',
+    platform: 'bilibili',
   },
   {
     id: 'msg-006',
@@ -117,6 +124,7 @@ const mockMessages: Message[] = [
     icon: Users,
     iconColor: 'text-purple-400',
     bgColor: 'bg-purple-500/20',
+    platform: 'douyin',
   },
   {
     id: 'msg-007',
@@ -128,6 +136,7 @@ const mockMessages: Message[] = [
     icon: AlertTriangle,
     iconColor: 'text-orange-400',
     bgColor: 'bg-orange-500/20',
+    platform: 'xiaohongshu',
   },
   {
     id: 'msg-008',
@@ -139,6 +148,7 @@ const mockMessages: Message[] = [
     icon: Video,
     iconColor: 'text-purple-400',
     bgColor: 'bg-purple-500/20',
+    platform: 'bilibili',
   },
 ]
 
@@ -222,15 +232,23 @@ export default function AgencyMessagesPage() {
           const Icon = message.icon
           const isAppealRequest = message.type === 'appeal_quota_request'
           const appealStatus = message.appealRequest?.status
+          const platform = message.platform ? getPlatformInfo(message.platform) : null
 
           return (
             <Card
               key={message.id}
-              className={`transition-all ${
+              className={`transition-all overflow-hidden ${
                 !isAppealRequest ? 'cursor-pointer hover:border-accent-indigo/50' : ''
               } ${!message.read ? 'border-l-4 border-l-accent-indigo' : ''}`}
               onClick={() => !isAppealRequest && markAsRead(message.id)}
             >
+              {/* 平台顶部条 */}
+              {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>
+              )}
               <CardContent className="py-4">
                 <div className="flex items-start gap-4">
                   <div className={`w-10 h-10 rounded-lg ${message.bgColor} flex items-center justify-center flex-shrink-0`}>
diff --git a/frontend/app/agency/page.tsx b/frontend/app/agency/page.tsx
index 28c6832..9fa3958 100644
--- a/frontend/app/agency/page.tsx
+++ b/frontend/app/agency/page.tsx
@@ -15,6 +15,7 @@ import {
   MessageSquare,
   TrendingUp
 } from 'lucide-react'
+import { getPlatformInfo } from '@/lib/platforms'
 
 // 模拟统计数据
 const stats = {
@@ -66,6 +67,7 @@ const projectOverview = [
   {
     id: 'proj-001',
     name: 'XX品牌618推广',
+    platform: 'douyin',
     total: 20,
     submitted: 15,
     passed: 10,
@@ -76,6 +78,7 @@ const projectOverview = [
   {
     id: 'proj-002',
     name: '新品口红系列',
+    platform: 'xiaohongshu',
     total: 12,
     submitted: 8,
     passed: 6,
@@ -86,6 +89,7 @@ const projectOverview = [
   {
     id: 'proj-003',
     name: '护肤品秋季活动',
+    platform: 'bilibili',
     total: 15,
     submitted: 12,
     passed: 9,
@@ -102,6 +106,7 @@ const pendingTasks = [
     videoTitle: '夏日护肤推广',
     creatorName: '小美护肤',
     brandName: 'XX品牌',
+    platform: 'douyin',
     aiScore: 85,
     submittedAt: '2026-02-04 14:30',
     hasHighRisk: false,
@@ -111,6 +116,7 @@ const pendingTasks = [
     videoTitle: '新品口红试色',
     creatorName: '美妆达人Lisa',
     brandName: 'XX品牌',
+    platform: 'xiaohongshu',
     aiScore: 72,
     submittedAt: '2026-02-04 13:45',
     hasHighRisk: true,
@@ -120,6 +126,7 @@ const pendingTasks = [
     videoTitle: '健身器材开箱',
     creatorName: '健身教练王',
     brandName: 'XX运动',
+    platform: 'bilibili',
     aiScore: 68,
     submittedAt: '2026-02-04 14:50',
     hasHighRisk: true,
@@ -134,7 +141,7 @@ function UrgentLevelIcon({ level }: { level: string }) {
 
 export default function AgencyDashboard() {
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 min-h-0">
       {/* 页面标题 */}
       <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold text-text-primary">代理商工作台</h1>
@@ -251,10 +258,19 @@ export default function AgencyDashboard() {
             <div className="space-y-4">
               {projectOverview.map((project) => {
                 const totalReviewing = project.reviewingScript + project.reviewingVideo
+                const projectPlatform = getPlatformInfo(project.platform)
                 return (
                   <div key={project.id} className="p-4 rounded-lg bg-bg-elevated">
                     <div className="flex items-center justify-between mb-3">
-                      <span className="font-medium text-text-primary">{project.name}</span>
+                      <div className="flex items-center gap-2">
+                        <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>
@@ -312,7 +328,7 @@ export default function AgencyDashboard() {
         <CardHeader>
           <CardTitle className="flex items-center justify-between">
             <span>待审核任务</span>
-            <Link href="/agency/tasks">
+            <Link href="/agency/review">
               <Button variant="ghost" size="sm">
                 查看全部
                 <ChevronRight size={16} />
@@ -326,6 +342,7 @@ export default function AgencyDashboard() {
               <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">AI评分</th>
@@ -334,35 +351,46 @@ export default function AgencyDashboard() {
                 </tr>
               </thead>
               <tbody>
-                {pendingTasks.map((task) => (
-                  <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>
-                        {task.hasHighRisk && (
-                          <span className="px-1.5 py-0.5 text-xs bg-accent-coral/20 text-accent-coral rounded">
-                            高风险
+                {pendingTasks.map((task) => {
+                  const platform = getPlatformInfo(task.platform)
+                  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>
+                          {task.hasHighRisk && (
+                            <span className="px-1.5 py-0.5 text-xs bg-accent-coral/20 text-accent-coral rounded">
+                              高风险
+                            </span>
+                          )}
+                        </div>
+                      </td>
+                      <td className="py-4">
+                        {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>
-                    </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}分
-                      </span>
-                    </td>
-                    <td className="py-4 text-sm text-text-tertiary">{task.submittedAt}</td>
-                    <td className="py-4">
-                      <Link href={`/agency/review/${task.id}`}>
-                        <Button size="sm">审核</Button>
-                      </Link>
-                    </td>
-                  </tr>
-                ))}
+                      </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}分
+                        </span>
+                      </td>
+                      <td className="py-4 text-sm text-text-tertiary">{task.submittedAt}</td>
+                      <td className="py-4">
+                        <Link href={`/agency/review/${task.id}`}>
+                          <Button size="sm">审核</Button>
+                        </Link>
+                      </td>
+                    </tr>
+                  )
+                })}
               </tbody>
             </table>
           </div>
diff --git a/frontend/app/agency/reports/page.tsx b/frontend/app/agency/reports/page.tsx
index 1682735..d6248d9 100644
--- a/frontend/app/agency/reports/page.tsx
+++ b/frontend/app/agency/reports/page.tsx
@@ -20,6 +20,7 @@ import {
   File,
   Check
 } from 'lucide-react'
+import { getPlatformInfo } from '@/lib/platforms'
 
 // 时间范围类型
 type DateRange = 'week' | 'month' | 'quarter' | 'year'
@@ -113,10 +114,10 @@ const mockDataByRange: Record<DateRange, {
 }
 
 const mockProjectStats = [
-  { name: 'XX品牌618推广', scripts: 45, videos: 38, passRate: 92 },
-  { name: '新品口红系列', scripts: 32, videos: 28, passRate: 85 },
-  { name: '护肤品秋季活动', scripts: 28, videos: 25, passRate: 78 },
-  { name: 'XX运动品牌', scripts: 51, videos: 37, passRate: 88 },
+  { name: 'XX品牌618推广', platform: 'douyin', scripts: 45, videos: 38, passRate: 92 },
+  { name: '新品口红系列', platform: 'xiaohongshu', scripts: 32, videos: 28, passRate: 85 },
+  { name: '护肤品秋季活动', platform: 'bilibili', scripts: 28, videos: 25, passRate: 78 },
+  { name: 'XX运动品牌', platform: 'kuaishou', scripts: 51, videos: 37, passRate: 88 },
 ]
 
 const mockCreatorRanking = [
@@ -399,6 +400,7 @@ export default function AgencyReportsPage() {
             <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 text-center">脚本数</th>
                 <th className="pb-3 font-medium text-center">视频数</th>
                 <th className="pb-3 font-medium text-center">通过率</th>
@@ -406,26 +408,37 @@ export default function AgencyReportsPage() {
               </tr>
             </thead>
             <tbody>
-              {mockProjectStats.map((project) => (
-                <tr key={project.name} className="border-b border-border-subtle last:border-0">
-                  <td className="py-4 font-medium text-text-primary">{project.name}</td>
-                  <td className="py-4 text-center text-text-secondary">{project.scripts}</td>
-                  <td className="py-4 text-center text-text-secondary">{project.videos}</td>
-                  <td className="py-4 text-center">
-                    <span className={`font-medium ${project.passRate >= 90 ? 'text-accent-green' : project.passRate >= 80 ? 'text-accent-indigo' : 'text-orange-400'}`}>
-                      {project.passRate}%
-                    </span>
-                  </td>
-                  <td className="py-4">
-                    <div className="w-full h-2 bg-bg-elevated rounded-full overflow-hidden">
-                      <div
-                        className={`h-full ${project.passRate >= 90 ? 'bg-accent-green' : project.passRate >= 80 ? 'bg-accent-indigo' : 'bg-orange-400'}`}
-                        style={{ width: `${project.passRate}%` }}
-                      />
-                    </div>
-                  </td>
-                </tr>
-              ))}
+              {mockProjectStats.map((project) => {
+                const platform = getPlatformInfo(project.platform)
+                return (
+                  <tr key={project.name} className="border-b border-border-subtle last:border-0">
+                    <td className="py-4 font-medium text-text-primary">{project.name}</td>
+                    <td className="py-4">
+                      {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>
+                      )}
+                    </td>
+                    <td className="py-4 text-center text-text-secondary">{project.scripts}</td>
+                    <td className="py-4 text-center text-text-secondary">{project.videos}</td>
+                    <td className="py-4 text-center">
+                      <span className={`font-medium ${project.passRate >= 90 ? 'text-accent-green' : project.passRate >= 80 ? 'text-accent-indigo' : 'text-orange-400'}`}>
+                        {project.passRate}%
+                      </span>
+                    </td>
+                    <td className="py-4">
+                      <div className="w-full h-2 bg-bg-elevated rounded-full overflow-hidden">
+                        <div
+                          className={`h-full ${project.passRate >= 90 ? 'bg-accent-green' : project.passRate >= 80 ? 'bg-accent-indigo' : 'bg-orange-400'}`}
+                          style={{ width: `${project.passRate}%` }}
+                        />
+                      </div>
+                    </td>
+                  </tr>
+                )
+              })}
             </tbody>
           </table>
         </CardContent>
diff --git a/frontend/app/agency/review/page.tsx b/frontend/app/agency/review/page.tsx
index 678fe9b..af57d0c 100644
--- a/frontend/app/agency/review/page.tsx
+++ b/frontend/app/agency/review/page.tsx
@@ -18,6 +18,7 @@ import {
   Eye,
   File
 } from 'lucide-react'
+import { getPlatformInfo } from '@/lib/platforms'
 
 // 模拟脚本待审列表
 const mockScriptTasks = [
@@ -28,6 +29,7 @@ const mockScriptTasks = [
     fileSize: '245 KB',
     creatorName: '小美护肤',
     projectName: 'XX品牌618推广',
+    platform: 'douyin',
     aiScore: 88,
     riskLevel: 'low' as const,
     submittedAt: '2026-02-06 14:30',
@@ -40,6 +42,7 @@ const mockScriptTasks = [
     fileSize: '312 KB',
     creatorName: '美妆Lisa',
     projectName: 'XX品牌618推广',
+    platform: 'xiaohongshu',
     aiScore: 72,
     riskLevel: 'medium' as const,
     submittedAt: '2026-02-06 12:15',
@@ -52,6 +55,7 @@ const mockScriptTasks = [
     fileSize: '189 KB',
     creatorName: '健身教练王',
     projectName: 'XX运动品牌',
+    platform: 'bilibili',
     aiScore: 95,
     riskLevel: 'low' as const,
     submittedAt: '2026-02-06 10:00',
@@ -64,6 +68,7 @@ const mockScriptTasks = [
     fileSize: '278 KB',
     creatorName: '达人D',
     projectName: 'XX品牌618推广',
+    platform: 'kuaishou',
     aiScore: 62,
     riskLevel: 'high' as const,
     submittedAt: '2026-02-06 09:00',
@@ -80,6 +85,7 @@ const mockVideoTasks = [
     fileSize: '128 MB',
     creatorName: '小美护肤',
     projectName: 'XX品牌618推广',
+    platform: 'douyin',
     aiScore: 85,
     riskLevel: 'low' as const,
     duration: '02:15',
@@ -93,6 +99,7 @@ const mockVideoTasks = [
     fileSize: '256 MB',
     creatorName: '美妆Lisa',
     projectName: 'XX品牌618推广',
+    platform: 'xiaohongshu',
     aiScore: 68,
     riskLevel: 'medium' as const,
     duration: '03:42',
@@ -106,6 +113,7 @@ const mockVideoTasks = [
     fileSize: '198 MB',
     creatorName: '达人C',
     projectName: 'XX品牌618推广',
+    platform: 'bilibili',
     aiScore: 58,
     riskLevel: 'high' as const,
     duration: '04:20',
@@ -119,6 +127,7 @@ const mockVideoTasks = [
     fileSize: '167 MB',
     creatorName: '达人D',
     projectName: 'XX品牌618推广',
+    platform: 'wechat',
     aiScore: 91,
     riskLevel: 'low' as const,
     duration: '01:45',
@@ -145,6 +154,7 @@ type VideoTask = typeof mockVideoTasks[0]
 
 function ScriptTaskCard({ task }: { task: ScriptTask }) {
   const riskConfig = riskLevelConfig[task.riskLevel]
+  const platform = getPlatformInfo(task.platform)
 
   const handleDownload = (e: React.MouseEvent) => {
     e.stopPropagation()
@@ -153,15 +163,23 @@ function ScriptTaskCard({ task }: { task: ScriptTask }) {
   }
 
   return (
-    <div className="p-4 rounded-xl bg-bg-elevated">
-      {/* 顶部：达人名 · 任务名 + 状态标签 */}
-      <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>
+    <div className="rounded-xl bg-bg-elevated 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-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>
+          </div>
+          <span className={`text-xs ${riskConfig.textColor}`}>{riskConfig.label}</span>
         </div>
-        <span className={`text-xs ${riskConfig.textColor}`}>{riskConfig.label}</span>
-      </div>
 
       {/* 文件信息 */}
       <div className="flex items-center gap-3 p-3 rounded-lg bg-bg-page mb-3">
@@ -198,12 +216,14 @@ function ScriptTaskCard({ task }: { task: ScriptTask }) {
           </Button>
         </Link>
       </div>
+      </div>
     </div>
   )
 }
 
 function VideoTaskCard({ task }: { task: VideoTask }) {
   const riskConfig = riskLevelConfig[task.riskLevel]
+  const platform = getPlatformInfo(task.platform)
 
   const handleDownload = (e: React.MouseEvent) => {
     e.stopPropagation()
@@ -212,15 +232,23 @@ function VideoTaskCard({ task }: { task: VideoTask }) {
   }
 
   return (
-    <div className="p-4 rounded-xl bg-bg-elevated">
-      {/* 顶部：达人名 · 任务名 + 状态标签 */}
-      <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>
+    <div className="rounded-xl bg-bg-elevated 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-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>
+          </div>
+          <span className={`text-xs ${riskConfig.textColor}`}>{riskConfig.label}</span>
         </div>
-        <span className={`text-xs ${riskConfig.textColor}`}>{riskConfig.label}</span>
-      </div>
 
       {/* 文件信息 */}
       <div className="flex items-center gap-3 p-3 rounded-lg bg-bg-page mb-3">
@@ -257,6 +285,7 @@ function VideoTaskCard({ task }: { task: VideoTask }) {
           </Button>
         </Link>
       </div>
+      </div>
     </div>
   )
 }
@@ -276,7 +305,7 @@ export default function AgencyReviewListPage() {
   )
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 min-h-0">
       {/* 页面标题 */}
       <div className="flex items-center justify-between">
         <div>
diff --git a/frontend/app/brand/agencies/page.tsx b/frontend/app/brand/agencies/page.tsx
index 7806600..411fdff 100644
--- a/frontend/app/brand/agencies/page.tsx
+++ b/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>
diff --git a/frontend/app/brand/briefs/page.tsx b/frontend/app/brand/briefs/page.tsx
index f51fdb0..61d68bb 100644
--- a/frontend/app/brand/briefs/page.tsx
+++ b/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>
   )
 }
diff --git a/frontend/app/brand/final-review/page.tsx b/frontend/app/brand/final-review/page.tsx
index 46771c4..800393d 100644
--- a/frontend/app/brand/final-review/page.tsx
+++ b/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">
diff --git a/frontend/app/brand/page.tsx b/frontend/app/brand/page.tsx
index d1f253c..5ff3f27 100644
--- a/frontend/app/brand/page.tsx
+++ b/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) => (
diff --git a/frontend/app/brand/projects/[id]/page.tsx b/frontend/app/brand/projects/[id]/page.tsx
index cdb4e2a..508fbf8 100644
--- a/frontend/app/brand/projects/[id]/page.tsx
+++ b/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>
diff --git a/frontend/app/brand/projects/create/page.tsx b/frontend/app/brand/projects/create/page.tsx
index e237532..a325b12 100644
--- a/frontend/app/brand/projects/create/page.tsx
+++ b/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">
diff --git a/frontend/app/brand/review/page.tsx b/frontend/app/brand/review/page.tsx
index 5db00b7..aae2ea1 100644
--- a/frontend/app/brand/review/page.tsx
+++ b/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>
   )
diff --git a/frontend/app/brand/rules/page.tsx b/frontend/app/brand/rules/page.tsx
index b80c2a2..b0d20ae 100644
--- a/frontend/app/brand/rules/page.tsx
+++ b/frontend/app/brand/rules/page.tsx
@@ -1,28 +1,76 @@
 'use client'
 
 import { useState } from 'react'
-import { Plus, Shield, AlertTriangle, Ban, Building2 } from 'lucide-react'
+import { Plus, Shield, Ban, Building2, Search, X, Upload, Trash2, FileText, Check, Download, 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 { Select } from '@/components/ui/Select'
-import { ErrorTag, WarningTag, SuccessTag } from '@/components/ui/Tag'
+
+// 平台规则库数据
+const platformRuleLibraries = [
+  {
+    id: 'douyin',
+    name: '抖音',
+    icon: '🎵',
+    color: 'bg-[#25F4EE]',
+    rules: { forbiddenWords: 156, competitors: 0, whitelist: 12 },
+    version: 'v2024.02',
+    updatedAt: '2024-02-01',
+  },
+  {
+    id: 'xiaohongshu',
+    name: '小红书',
+    icon: '📕',
+    color: 'bg-[#fe2c55]',
+    rules: { forbiddenWords: 142, competitors: 0, whitelist: 8 },
+    version: 'v2024.01',
+    updatedAt: '2024-01-20',
+  },
+  {
+    id: 'bilibili',
+    name: 'B站',
+    icon: '📺',
+    color: 'bg-[#00a1d6]',
+    rules: { forbiddenWords: 98, competitors: 0, whitelist: 15 },
+    version: 'v2024.02',
+    updatedAt: '2024-02-03',
+  },
+  {
+    id: 'kuaishou',
+    name: '快手',
+    icon: '⚡',
+    color: 'bg-[#ff4906]',
+    rules: { forbiddenWords: 134, competitors: 0, whitelist: 10 },
+    version: 'v2024.01',
+    updatedAt: '2024-01-15',
+  },
+  {
+    id: 'weibo',
+    name: '微博',
+    icon: '🔴',
+    color: 'bg-[#e6162d]',
+    rules: { forbiddenWords: 89, competitors: 0, whitelist: 6 },
+    version: 'v2023.12',
+    updatedAt: '2023-12-20',
+  },
+]
 
 // 模拟规则数据
-const mockRules = {
+const initialRules = {
   forbiddenWords: [
-    { id: '1', word: '最好', category: '极限词', severity: 'high' },
-    { id: '2', word: '第一', category: '极限词', severity: 'high' },
-    { id: '3', word: '最佳', category: '极限词', severity: 'high' },
-    { id: '4', word: '100%有效', category: '虚假宣称', severity: 'high' },
-    { id: '5', word: '立即见效', category: '虚假宣称', severity: 'medium' },
-    { id: '6', word: '永久', category: '极限词', severity: 'medium' },
+    { id: '1', word: '最好', category: '极限词' },
+    { id: '2', word: '第一', category: '极限词' },
+    { id: '3', word: '最佳', category: '极限词' },
+    { id: '4', word: '100%有效', category: '虚假宣称' },
+    { id: '5', word: '立即见效', category: '虚假宣称' },
+    { id: '6', word: '永久', category: '极限词' },
+    { id: '7', word: '绝对', category: '极限词' },
+    { id: '8', word: '最低价', category: '价格欺诈' },
   ],
   competitors: [
-    { id: '1', name: '竞品A', logoUrl: '' },
-    { id: '2', name: '竞品B', logoUrl: '' },
-    { id: '3', name: '竞品C', logoUrl: '' },
+    { id: '1', name: '竞品A' },
+    { id: '2', name: '竞品B' },
+    { id: '3', name: '竞品C' },
   ],
   whitelist: [
     { id: '1', term: '品牌专属术语1', reason: '品牌授权使用' },
@@ -31,120 +79,380 @@ const mockRules = {
 }
 
 const categoryOptions = [
-  { value: 'absolute_term', label: '极限词' },
-  { value: 'false_claim', label: '虚假宣称' },
-  { value: 'platform_rule', label: '平台规则' },
-  { value: 'custom', label: '自定义' },
+  { value: '极限词', label: '极限词' },
+  { value: '虚假宣称', label: '虚假宣称' },
+  { value: '价格欺诈', label: '价格欺诈' },
+  { value: '平台规则', label: '平台规则' },
+  { value: '自定义', label: '自定义' },
 ]
 
-const severityOptions = [
-  { value: 'high', label: '高风险' },
-  { value: 'medium', label: '中风险' },
-  { value: 'low', label: '低风险' },
-]
-
-function SeverityTag({ severity }: { severity: string }) {
-  if (severity === 'high') return <ErrorTag>高风险</ErrorTag>
-  if (severity === 'medium') return <WarningTag>中风险</WarningTag>
-  return <SuccessTag>低风险</SuccessTag>
-}
-
 export default function RulesPage() {
-  const [activeTab, setActiveTab] = useState<'forbidden' | 'competitors' | 'whitelist'>('forbidden')
-  const [showAddModal, setShowAddModal] = useState(false)
-  const [newWord, setNewWord] = useState('')
-  const [newCategory, setNewCategory] = useState('absolute_term')
-  const [newSeverity, setNewSeverity] = useState('high')
+  const [activeTab, setActiveTab] = useState<'platforms' | 'forbidden' | 'competitors' | 'whitelist'>('platforms')
+  const [rules, setRules] = useState(initialRules)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [platforms, setPlatforms] = useState(platformRuleLibraries)
 
+  // 上传规则库
+  const [showUploadModal, setShowUploadModal] = useState(false)
+  const [uploadPlatform, setUploadPlatform] = useState('')
+  const [uploadFile, setUploadFile] = useState<File | null>(null)
+
+  // 重新上传规则库
+  const [showReuploadModal, setShowReuploadModal] = useState(false)
+  const [reuploadPlatform, setReuploadPlatform] = useState<typeof platformRuleLibraries[0] | null>(null)
+
+  // 下载确认
+  const [showDownloadModal, setShowDownloadModal] = useState(false)
+  const [downloadPlatform, setDownloadPlatform] = useState<typeof platformRuleLibraries[0] | null>(null)
+
+  // 查看规则库详情
+  const [showDetailModal, setShowDetailModal] = useState(false)
+  const [selectedPlatform, setSelectedPlatform] = useState<typeof platformRuleLibraries[0] | null>(null)
+
+  // 添加违禁词
+  const [showAddWordModal, setShowAddWordModal] = useState(false)
+  const [newWord, setNewWord] = useState('')
+  const [newCategory, setNewCategory] = useState('极限词')
+  const [batchWords, setBatchWords] = useState('')
+
+  // 添加竞品
+  const [showAddCompetitorModal, setShowAddCompetitorModal] = useState(false)
+  const [newCompetitor, setNewCompetitor] = useState('')
+
+  // 添加白名单
+  const [showAddWhitelistModal, setShowAddWhitelistModal] = useState(false)
+  const [newWhitelistTerm, setNewWhitelistTerm] = useState('')
+  const [newWhitelistReason, setNewWhitelistReason] = useState('')
+
+  // 过滤违禁词
+  const filteredWords = rules.forbiddenWords.filter(w =>
+    searchQuery === '' ||
+    w.word.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    w.category.toLowerCase().includes(searchQuery.toLowerCase())
+  )
+
+  // 查看平台详情
+  const viewPlatformDetail = (platform: typeof platformRuleLibraries[0]) => {
+    setSelectedPlatform(platform)
+    setShowDetailModal(true)
+  }
+
+  // 重新上传
+  const handleReupload = (platform: typeof platformRuleLibraries[0]) => {
+    setReuploadPlatform(platform)
+    setShowReuploadModal(true)
+  }
+
+  // 下载规则
+  const handleDownload = (platform: typeof platformRuleLibraries[0]) => {
+    setDownloadPlatform(platform)
+    setShowDownloadModal(true)
+  }
+
+  // 添加单个违禁词
   const handleAddWord = () => {
     if (!newWord.trim()) return
-    // TODO: 调用 API 添加
-    setShowAddModal(false)
+    setRules({
+      ...rules,
+      forbiddenWords: [
+        ...rules.forbiddenWords,
+        { id: Date.now().toString(), word: newWord.trim(), category: newCategory }
+      ]
+    })
     setNewWord('')
+    setShowAddWordModal(false)
+  }
+
+  // 批量添加违禁词
+  const handleBatchAdd = () => {
+    const words = batchWords.split('\n').filter(w => w.trim())
+    if (words.length === 0) return
+    const newWords = words.map((word, i) => ({
+      id: `${Date.now()}-${i}`,
+      word: word.trim(),
+      category: newCategory
+    }))
+    setRules({
+      ...rules,
+      forbiddenWords: [...rules.forbiddenWords, ...newWords]
+    })
+    setBatchWords('')
+    setShowAddWordModal(false)
+  }
+
+  // 删除违禁词
+  const handleDeleteWord = (id: string) => {
+    setRules({
+      ...rules,
+      forbiddenWords: rules.forbiddenWords.filter(w => w.id !== id)
+    })
+  }
+
+  // 添加竞品
+  const handleAddCompetitor = () => {
+    if (!newCompetitor.trim()) return
+    setRules({
+      ...rules,
+      competitors: [
+        ...rules.competitors,
+        { id: Date.now().toString(), name: newCompetitor.trim() }
+      ]
+    })
+    setNewCompetitor('')
+    setShowAddCompetitorModal(false)
+  }
+
+  // 删除竞品
+  const handleDeleteCompetitor = (id: string) => {
+    setRules({
+      ...rules,
+      competitors: rules.competitors.filter(c => c.id !== id)
+    })
+  }
+
+  // 添加白名单
+  const handleAddWhitelist = () => {
+    if (!newWhitelistTerm.trim()) return
+    setRules({
+      ...rules,
+      whitelist: [
+        ...rules.whitelist,
+        { id: Date.now().toString(), term: newWhitelistTerm.trim(), reason: newWhitelistReason.trim() }
+      ]
+    })
+    setNewWhitelistTerm('')
+    setNewWhitelistReason('')
+    setShowAddWhitelistModal(false)
+  }
+
+  // 删除白名单
+  const handleDeleteWhitelist = (id: string) => {
+    setRules({
+      ...rules,
+      whitelist: rules.whitelist.filter(w => w.id !== id)
+    })
   }
 
   return (
     <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold text-gray-900">规则配置</h1>
+      <div>
+        <h1 className="text-2xl font-bold text-text-primary">规则配置</h1>
+        <p className="text-sm text-text-secondary mt-1">配置平台规则库和自定义审核规则，代理商可在此基础上调整风险等级</p>
       </div>
 
       {/* 标签页 */}
-      <div className="flex gap-2 border-b">
+      <div className="flex gap-1 p-1 bg-bg-elevated rounded-xl w-fit">
         <button
           type="button"
-          className={`px-4 py-2 border-b-2 transition-colors ${
+          className={`px-4 py-2.5 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 ${
+            activeTab === 'platforms'
+              ? 'bg-bg-card text-text-primary shadow-sm'
+              : 'text-text-secondary hover:text-text-primary'
+          }`}
+          onClick={() => setActiveTab('platforms')}
+        >
+          <FileText size={16} />
+          平台规则库
+          <span className="px-2 py-0.5 rounded-full bg-accent-indigo/15 text-accent-indigo text-xs">
+            {platforms.length}
+          </span>
+        </button>
+        <button
+          type="button"
+          className={`px-4 py-2.5 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 ${
             activeTab === 'forbidden'
-              ? 'border-blue-600 text-blue-600'
-              : 'border-transparent text-gray-500 hover:text-gray-700'
+              ? 'bg-bg-card text-text-primary shadow-sm'
+              : 'text-text-secondary hover:text-text-primary'
           }`}
           onClick={() => setActiveTab('forbidden')}
         >
-          <Ban size={16} className="inline mr-2" />
-          违禁词 ({mockRules.forbiddenWords.length})
+          <Ban size={16} />
+          自定义违禁词
+          <span className="px-2 py-0.5 rounded-full bg-accent-coral/15 text-accent-coral text-xs">
+            {rules.forbiddenWords.length}
+          </span>
         </button>
         <button
           type="button"
-          className={`px-4 py-2 border-b-2 transition-colors ${
+          className={`px-4 py-2.5 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 ${
             activeTab === 'competitors'
-              ? 'border-blue-600 text-blue-600'
-              : 'border-transparent text-gray-500 hover:text-gray-700'
+              ? 'bg-bg-card text-text-primary shadow-sm'
+              : 'text-text-secondary hover:text-text-primary'
           }`}
           onClick={() => setActiveTab('competitors')}
         >
-          <Building2 size={16} className="inline mr-2" />
-          竞品列表 ({mockRules.competitors.length})
+          <Building2 size={16} />
+          竞品列表
+          <span className="px-2 py-0.5 rounded-full bg-accent-amber/15 text-accent-amber text-xs">
+            {rules.competitors.length}
+          </span>
         </button>
         <button
           type="button"
-          className={`px-4 py-2 border-b-2 transition-colors ${
+          className={`px-4 py-2.5 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 ${
             activeTab === 'whitelist'
-              ? 'border-blue-600 text-blue-600'
-              : 'border-transparent text-gray-500 hover:text-gray-700'
+              ? 'bg-bg-card text-text-primary shadow-sm'
+              : 'text-text-secondary hover:text-text-primary'
           }`}
           onClick={() => setActiveTab('whitelist')}
         >
-          <Shield size={16} className="inline mr-2" />
-          白名单 ({mockRules.whitelist.length})
+          <Shield size={16} />
+          白名单
+          <span className="px-2 py-0.5 rounded-full bg-accent-green/15 text-accent-green text-xs">
+            {rules.whitelist.length}
+          </span>
         </button>
       </div>
 
-      {/* 违禁词列表 */}
+      {/* 平台规则库 */}
+      {activeTab === 'platforms' && (
+        <Card>
+          <CardHeader>
+            <CardTitle>平台规则库</CardTitle>
+            <p className="text-sm text-text-tertiary mt-1">
+              管理各平台的审核规则库，启用后将应用于对应平台的视频审核
+            </p>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {platforms.map((platform) => (
+                <div
+                  key={platform.id}
+                  className="p-4 rounded-xl border border-border-subtle bg-bg-card hover:border-accent-indigo/50 transition-all"
+                >
+                  <div className="flex items-center gap-3 mb-3">
+                    <div className={`w-10 h-10 ${platform.color} rounded-xl flex items-center justify-center text-xl`}>
+                      {platform.icon}
+                    </div>
+                    <div>
+                      <h3 className="font-medium text-text-primary">{platform.name}</h3>
+                      <p className="text-xs text-text-tertiary">{platform.version}</p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center gap-4 text-xs text-text-tertiary mb-3">
+                    <span>{platform.rules.forbiddenWords} 违禁词</span>
+                    <span>{platform.rules.whitelist} 白名单</span>
+                  </div>
+
+                  <div className="flex items-center justify-between pt-3 border-t border-border-subtle">
+                    <span className="text-xs text-text-tertiary">更新于 {platform.updatedAt}</span>
+                    <div className="flex gap-1">
+                      <button
+                        type="button"
+                        onClick={() => viewPlatformDetail(platform)}
+                        className="p-1.5 rounded-lg text-text-tertiary hover:text-accent-indigo hover:bg-accent-indigo/10 transition-colors"
+                        title="查看详情"
+                      >
+                        <Eye size={16} />
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => handleReupload(platform)}
+                        className="p-1.5 rounded-lg text-text-tertiary hover:text-accent-indigo hover:bg-accent-indigo/10 transition-colors"
+                        title="重新上传"
+                      >
+                        <Upload size={16} />
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => handleDownload(platform)}
+                        className="p-1.5 rounded-lg text-text-tertiary hover:text-accent-green hover:bg-accent-green/10 transition-colors"
+                        title="下载规则"
+                      >
+                        <Download size={16} />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+
+              {/* 上传规则库 */}
+              <button
+                type="button"
+                onClick={() => setShowUploadModal(true)}
+                className="p-4 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 gap-2 text-text-tertiary hover:text-accent-indigo min-h-[160px]"
+              >
+                <Upload size={24} />
+                <span className="font-medium">上传规则库</span>
+                <span className="text-xs">支持 JSON / Excel 格式</span>
+              </button>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 自定义违禁词列表 */}
       {activeTab === 'forbidden' && (
         <Card>
           <CardHeader>
-            <CardTitle className="flex items-center justify-between">
-              <span>违禁词列表</span>
-              <Button size="sm" icon={Plus} onClick={() => setShowAddModal(true)}>
-                添加
-              </Button>
-            </CardTitle>
+            <CardTitle>自定义违禁词</CardTitle>
+            <p className="text-sm text-text-tertiary mt-1">在平台规则库基础上，添加品牌专属的违禁词规则</p>
           </CardHeader>
-          <CardContent>
-            <div className="overflow-x-auto">
-              <table className="w-full">
-                <thead>
-                  <tr className="border-b text-left text-sm text-gray-500">
-                    <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>
-                  {mockRules.forbiddenWords.map((word) => (
-                    <tr key={word.id} className="border-b last:border-0">
-                      <td className="py-3 font-medium text-gray-900">{word.word}</td>
-                      <td className="py-3 text-gray-600">{word.category}</td>
-                      <td className="py-3"><SeverityTag severity={word.severity} /></td>
-                      <td className="py-3">
-                        <Button size="sm" variant="ghost">删除</Button>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
+          <CardContent className="space-y-4">
+            {/* 搜索框和添加按钮 */}
+            <div className="flex items-center gap-3">
+              <div className="relative flex-1 max-w-md">
+                <Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary" />
+                <input
+                  type="text"
+                  placeholder="搜索违禁词或分类..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="w-full pl-10 pr-4 py-2.5 border border-border-subtle rounded-xl bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
+                />
+              </div>
+              <button
+                type="button"
+                onClick={() => setShowAddWordModal(true)}
+                className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl border-2 border-dashed border-border-subtle hover:border-accent-coral hover:bg-accent-coral/5 transition-all text-text-tertiary hover:text-accent-coral"
+              >
+                <Plus size={18} />
+                <span className="font-medium">添加违禁词</span>
+              </button>
             </div>
+
+            {/* 按分类分组显示 */}
+            {(() => {
+              const grouped = filteredWords.reduce((acc, word) => {
+                if (!acc[word.category]) acc[word.category] = []
+                acc[word.category].push(word)
+                return acc
+              }, {} as Record<string, typeof filteredWords>)
+
+              return Object.entries(grouped).map(([category, words]) => (
+                <div key={category} className="space-y-2">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium text-text-secondary">{category}</span>
+                    <span className="text-xs text-text-tertiary">({words.length})</span>
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    {words.map((word) => (
+                      <div
+                        key={word.id}
+                        className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-bg-elevated border border-border-subtle group hover:border-accent-coral/50"
+                      >
+                        <span className="text-text-primary">{word.word}</span>
+                        <button
+                          type="button"
+                          onClick={() => handleDeleteWord(word.id)}
+                          className="text-text-tertiary hover:text-accent-coral transition-colors"
+                        >
+                          <X size={14} />
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))
+            })()}
+
+            {filteredWords.length === 0 && (
+              <div className="text-center py-8 text-text-tertiary">
+                <Ban size={32} className="mx-auto mb-2 opacity-50" />
+                <p>暂无自定义违禁词</p>
+              </div>
+            )}
           </CardContent>
         </Card>
       )}
@@ -153,27 +461,38 @@ export default function RulesPage() {
       {activeTab === 'competitors' && (
         <Card>
           <CardHeader>
-            <CardTitle className="flex items-center justify-between">
-              <span>竞品列表</span>
-              <Button size="sm" icon={Plus}>添加竞品</Button>
-            </CardTitle>
+            <CardTitle>竞品列表</CardTitle>
+            <p className="text-sm text-text-tertiary mt-1">系统将在视频中检测以下竞品的 Logo 或品牌名称</p>
           </CardHeader>
           <CardContent>
-            <p className="text-sm text-gray-500 mb-4">
-              系统将在视频中检测以下竞品的 Logo 或品牌名称
-            </p>
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              {mockRules.competitors.map((competitor) => (
-                <div key={competitor.id} className="p-4 border rounded-lg flex items-center justify-between">
+              {rules.competitors.map((competitor) => (
+                <div key={competitor.id} className="p-4 rounded-xl bg-bg-elevated border border-border-subtle flex items-center justify-between group hover:border-accent-amber/50">
                   <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
-                      <Building2 size={20} className="text-gray-400" />
+                    <div className="w-10 h-10 bg-accent-amber/15 rounded-lg flex items-center justify-center">
+                      <Building2 size={20} className="text-accent-amber" />
                     </div>
-                    <span className="font-medium">{competitor.name}</span>
+                    <span className="font-medium text-text-primary">{competitor.name}</span>
                   </div>
-                  <Button size="sm" variant="ghost">删除</Button>
+                  <button
+                    type="button"
+                    onClick={() => handleDeleteCompetitor(competitor.id)}
+                    className="p-2 rounded-lg text-text-tertiary hover:text-accent-coral hover:bg-accent-coral/10 transition-colors"
+                  >
+                    <Trash2 size={16} />
+                  </button>
                 </div>
               ))}
+
+              {/* 添加竞品按钮 */}
+              <button
+                type="button"
+                onClick={() => setShowAddCompetitorModal(true)}
+                className="p-4 rounded-xl border-2 border-dashed border-border-subtle hover:border-accent-amber hover:bg-accent-amber/5 transition-all flex items-center justify-center gap-2 text-text-tertiary hover:text-accent-amber"
+              >
+                <Plus size={20} />
+                <span className="font-medium">添加竞品</span>
+              </button>
             </div>
           </CardContent>
         </Card>
@@ -183,70 +502,452 @@ export default function RulesPage() {
       {activeTab === 'whitelist' && (
         <Card>
           <CardHeader>
-            <CardTitle className="flex items-center justify-between">
-              <span>白名单</span>
-              <Button size="sm" icon={Plus}>添加</Button>
-            </CardTitle>
+            <CardTitle>白名单</CardTitle>
+            <p className="text-sm text-text-tertiary mt-1">白名单中的词汇即使命中违禁词也不会触发告警</p>
           </CardHeader>
           <CardContent>
-            <p className="text-sm text-gray-500 mb-4">
-              白名单中的词汇即使命中违禁词也不会触发告警
-            </p>
-            <div className="overflow-x-auto">
-              <table className="w-full">
-                <thead>
-                  <tr className="border-b text-left text-sm text-gray-500">
-                    <th className="pb-3 font-medium">词汇</th>
-                    <th className="pb-3 font-medium">原因</th>
-                    <th className="pb-3 font-medium">操作</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {mockRules.whitelist.map((item) => (
-                    <tr key={item.id} className="border-b last:border-0">
-                      <td className="py-3 font-medium text-gray-900">{item.term}</td>
-                      <td className="py-3 text-gray-600">{item.reason}</td>
-                      <td className="py-3">
-                        <Button size="sm" variant="ghost">删除</Button>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
+            <div className="space-y-3">
+              {rules.whitelist.map((item) => (
+                <div key={item.id} className="flex items-center justify-between p-4 rounded-xl bg-bg-elevated border border-border-subtle hover:border-accent-green/50">
+                  <div>
+                    <p className="font-medium text-text-primary">{item.term}</p>
+                    <p className="text-sm text-text-tertiary mt-0.5">{item.reason}</p>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => handleDeleteWhitelist(item.id)}
+                    className="p-2 rounded-lg text-text-tertiary hover:text-accent-coral hover:bg-accent-coral/10 transition-colors"
+                  >
+                    <Trash2 size={16} />
+                  </button>
+                </div>
+              ))}
+
+              {/* 添加白名单按钮 */}
+              <button
+                type="button"
+                onClick={() => setShowAddWhitelistModal(true)}
+                className="w-full p-4 rounded-xl border-2 border-dashed border-border-subtle hover:border-accent-green hover:bg-accent-green/5 transition-all flex items-center justify-center gap-2 text-text-tertiary hover:text-accent-green"
+              >
+                <Plus size={20} />
+                <span className="font-medium">添加白名单</span>
+              </button>
             </div>
           </CardContent>
         </Card>
       )}
 
-      {/* 添加违禁词弹窗 */}
+      {/* 上传规则库弹窗 */}
       <Modal
-        isOpen={showAddModal}
-        onClose={() => setShowAddModal(false)}
-        title="添加违禁词"
-        size="sm"
+        isOpen={showUploadModal}
+        onClose={() => { setShowUploadModal(false); setUploadPlatform(''); setUploadFile(null); }}
+        title="上传平台规则库"
       >
         <div className="space-y-4">
-          <Input
-            label="违禁词"
-            placeholder="输入违禁词"
-            value={newWord}
-            onChange={(e) => setNewWord(e.target.value)}
-          />
-          <Select
-            label="分类"
-            options={categoryOptions}
-            value={newCategory}
-            onChange={(e) => setNewCategory(e.target.value)}
-          />
-          <Select
-            label="风险等级"
-            options={severityOptions}
-            value={newSeverity}
-            onChange={(e) => setNewSeverity(e.target.value)}
-          />
-          <div className="flex gap-3 justify-end pt-4">
-            <Button variant="ghost" onClick={() => setShowAddModal(false)}>取消</Button>
-            <Button onClick={handleAddWord}>添加</Button>
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-2">选择平台</label>
+            <select
+              value={uploadPlatform}
+              onChange={(e) => setUploadPlatform(e.target.value)}
+              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"
+            >
+              <option value="">请选择平台</option>
+              <option value="douyin">抖音</option>
+              <option value="xiaohongshu">小红书</option>
+              <option value="bilibili">B站</option>
+              <option value="kuaishou">快手</option>
+              <option value="weibo">微博</option>
+              <option value="wechat">微信视频号</option>
+              <option value="other">其他平台</option>
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-2">上传规则文件</label>
+            <div className="border-2 border-dashed border-border-subtle rounded-xl p-8 text-center hover:border-accent-indigo transition-colors cursor-pointer">
+              <Upload size={32} className="mx-auto text-text-tertiary mb-3" />
+              <p className="text-sm text-text-primary mb-1">点击或拖拽上传文件</p>
+              <p className="text-xs text-text-tertiary">支持 JSON / Excel / Word / PDF 格式</p>
+            </div>
+          </div>
+
+          <div className="p-4 rounded-xl bg-accent-indigo/10 border border-accent-indigo/20">
+            <h4 className="text-sm font-medium text-accent-indigo mb-2">文件格式说明</h4>
+            <ul className="text-xs text-text-secondary space-y-1">
+              <li>• JSON 格式：包含 forbiddenWords、whitelist 字段的对象</li>
+              <li>• Excel 格式：第一列为词汇，第二列为分类（可选）</li>
+              <li>• Word / PDF：AI 将自动识别并提取规则内容</li>
+            </ul>
+          </div>
+
+          <div className="flex gap-3 justify-end pt-2">
+            <Button variant="ghost" onClick={() => { setShowUploadModal(false); setUploadPlatform(''); }}>
+              取消
+            </Button>
+            <Button disabled={!uploadPlatform}>
+              上传
+            </Button>
+          </div>
+        </div>
+      </Modal>
+
+      {/* 查看规则库详情弹窗 */}
+      <Modal
+        isOpen={showDetailModal}
+        onClose={() => { setShowDetailModal(false); setSelectedPlatform(null); }}
+        title={selectedPlatform ? `${selectedPlatform.name}规则库详情` : '规则库详情'}
+        size="lg"
+      >
+        {selectedPlatform && (
+          <div className="space-y-4">
+            <div className="flex items-center gap-4 p-4 rounded-xl bg-bg-elevated">
+              <div className={`w-14 h-14 ${selectedPlatform.color} rounded-xl flex items-center justify-center text-2xl`}>
+                {selectedPlatform.icon}
+              </div>
+              <div className="flex-1">
+                <h3 className="text-lg font-semibold text-text-primary">{selectedPlatform.name}</h3>
+                <div className="flex items-center gap-4 mt-1 text-sm text-text-tertiary">
+                  <span>版本：{selectedPlatform.version}</span>
+                  <span>更新时间：{selectedPlatform.updatedAt}</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-3 gap-4">
+              <div className="p-4 rounded-xl bg-accent-coral/10 border border-accent-coral/20 text-center">
+                <p className="text-2xl font-bold text-accent-coral">{selectedPlatform.rules.forbiddenWords}</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">{selectedPlatform.rules.whitelist}</p>
+                <p className="text-sm text-text-secondary mt-1">白名单</p>
+              </div>
+              <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">12</p>
+                <p className="text-sm text-text-secondary mt-1">规则分类</p>
+              </div>
+            </div>
+
+            <div>
+              <h4 className="text-sm font-medium text-text-primary mb-2">规则分类概览</h4>
+              <div className="space-y-2">
+                {[
+                  { name: '极限词', count: 45 },
+                  { name: '虚假宣传', count: 38 },
+                  { name: '敏感词汇', count: 32 },
+                  { name: '价格欺诈', count: 21 },
+                  { name: '其他', count: 20 },
+                ].map((cat) => (
+                  <div key={cat.name} className="flex items-center justify-between p-3 rounded-lg bg-bg-elevated">
+                    <span className="text-sm text-text-primary">{cat.name}</span>
+                    <span className="text-sm text-text-tertiary">{cat.count} 条</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="flex gap-3 justify-end pt-2">
+              <Button variant="ghost" onClick={() => setShowDetailModal(false)}>
+                关闭
+              </Button>
+              <Button variant="secondary" onClick={() => selectedPlatform && handleDownload(selectedPlatform)}>
+                <Download size={16} />
+                下载规则
+              </Button>
+              <Button onClick={() => {
+                if (selectedPlatform) {
+                  setShowDetailModal(false)
+                  handleReupload(selectedPlatform)
+                }
+              }}>
+                <Upload size={16} />
+                重新上传
+              </Button>
+            </div>
+          </div>
+        )}
+      </Modal>
+
+      {/* 重新上传规则库弹窗 */}
+      <Modal
+        isOpen={showReuploadModal}
+        onClose={() => { setShowReuploadModal(false); setReuploadPlatform(null); }}
+        title={reuploadPlatform ? `重新上传${reuploadPlatform.name}规则库` : '重新上传规则库'}
+      >
+        {reuploadPlatform && (
+          <div className="space-y-4">
+            <div className="flex items-center gap-3 p-3 rounded-xl bg-bg-elevated">
+              <div className={`w-10 h-10 ${reuploadPlatform.color} rounded-lg flex items-center justify-center text-xl`}>
+                {reuploadPlatform.icon}
+              </div>
+              <div>
+                <p className="font-medium text-text-primary">{reuploadPlatform.name}</p>
+                <p className="text-xs text-text-tertiary">当前版本：{reuploadPlatform.version}</p>
+              </div>
+            </div>
+
+            <div className="p-4 rounded-xl bg-accent-amber/10 border border-accent-amber/20">
+              <p className="text-sm text-accent-amber font-medium mb-1">⚠️ 注意</p>
+              <p className="text-xs text-text-secondary">重新上传将覆盖当前规则库，此操作不可撤销</p>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-text-primary mb-2">上传新的规则文件</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={28} className="mx-auto text-text-tertiary mb-2" />
+                <p className="text-sm text-text-primary mb-1">点击或拖拽上传文件</p>
+                <p className="text-xs text-text-tertiary">支持 JSON / Excel / Word / PDF 格式</p>
+              </div>
+              <p className="text-xs text-text-tertiary mt-2">Word 和 PDF 文件将由 AI 自动提取规则内容</p>
+            </div>
+
+            <div className="flex gap-3 justify-end pt-2">
+              <Button variant="ghost" onClick={() => { setShowReuploadModal(false); setReuploadPlatform(null); }}>
+                取消
+              </Button>
+              <Button>
+                确认上传
+              </Button>
+            </div>
+          </div>
+        )}
+      </Modal>
+
+      {/* 下载规则库弹窗 */}
+      <Modal
+        isOpen={showDownloadModal}
+        onClose={() => { setShowDownloadModal(false); setDownloadPlatform(null); }}
+        title={downloadPlatform ? `下载${downloadPlatform.name}规则库` : '下载规则库'}
+      >
+        {downloadPlatform && (
+          <div className="space-y-4">
+            <div className="flex items-center gap-3 p-3 rounded-xl bg-bg-elevated">
+              <div className={`w-10 h-10 ${downloadPlatform.color} rounded-lg flex items-center justify-center text-xl`}>
+                {downloadPlatform.icon}
+              </div>
+              <div>
+                <p className="font-medium text-text-primary">{downloadPlatform.name}</p>
+                <p className="text-xs text-text-tertiary">版本：{downloadPlatform.version} · 更新于 {downloadPlatform.updatedAt}</p>
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-text-primary mb-3">选择下载格式</label>
+              <div className="grid grid-cols-2 gap-3">
+                <button
+                  type="button"
+                  className="p-3 rounded-xl border-2 border-border-subtle hover:border-accent-indigo hover:bg-accent-indigo/5 transition-all text-left"
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="w-9 h-9 rounded-lg bg-accent-green/15 flex items-center justify-center">
+                      <FileText size={18} className="text-accent-green" />
+                    </div>
+                    <div>
+                      <p className="font-medium text-text-primary text-sm">JSON</p>
+                      <p className="text-xs text-text-tertiary">程序导入</p>
+                    </div>
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  className="p-3 rounded-xl border-2 border-border-subtle hover:border-accent-indigo hover:bg-accent-indigo/5 transition-all text-left"
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="w-9 h-9 rounded-lg bg-accent-indigo/15 flex items-center justify-center">
+                      <FileText size={18} className="text-accent-indigo" />
+                    </div>
+                    <div>
+                      <p className="font-medium text-text-primary text-sm">Excel</p>
+                      <p className="text-xs text-text-tertiary">表格编辑</p>
+                    </div>
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  className="p-3 rounded-xl border-2 border-border-subtle hover:border-accent-indigo hover:bg-accent-indigo/5 transition-all text-left"
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="w-9 h-9 rounded-lg bg-[#2b579a]/15 flex items-center justify-center">
+                      <FileText size={18} className="text-[#2b579a]" />
+                    </div>
+                    <div>
+                      <p className="font-medium text-text-primary text-sm">Word</p>
+                      <p className="text-xs text-text-tertiary">文档查看</p>
+                    </div>
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  className="p-3 rounded-xl border-2 border-border-subtle hover:border-accent-indigo hover:bg-accent-indigo/5 transition-all text-left"
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="w-9 h-9 rounded-lg bg-accent-coral/15 flex items-center justify-center">
+                      <FileText size={18} className="text-accent-coral" />
+                    </div>
+                    <div>
+                      <p className="font-medium text-text-primary text-sm">PDF</p>
+                      <p className="text-xs text-text-tertiary">打印分享</p>
+                    </div>
+                  </div>
+                </button>
+              </div>
+            </div>
+
+            <div className="p-3 rounded-xl bg-bg-elevated text-sm">
+              <div className="flex justify-between text-text-secondary mb-1">
+                <span>违禁词数量</span>
+                <span className="text-text-primary">{downloadPlatform.rules.forbiddenWords} 条</span>
+              </div>
+              <div className="flex justify-between text-text-secondary">
+                <span>白名单数量</span>
+                <span className="text-text-primary">{downloadPlatform.rules.whitelist} 条</span>
+              </div>
+            </div>
+
+            <div className="flex gap-3 justify-end pt-2">
+              <Button variant="ghost" onClick={() => { setShowDownloadModal(false); setDownloadPlatform(null); }}>
+                取消
+              </Button>
+              <Button>
+                <Download size={16} />
+                下载
+              </Button>
+            </div>
+          </div>
+        )}
+      </Modal>
+
+      {/* 添加违禁词弹窗 */}
+      <Modal
+        isOpen={showAddWordModal}
+        onClose={() => { setShowAddWordModal(false); setNewWord(''); setBatchWords(''); }}
+        title="添加违禁词"
+      >
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-2">分类</label>
+            <select
+              value={newCategory}
+              onChange={(e) => setNewCategory(e.target.value)}
+              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"
+            >
+              {categoryOptions.map(opt => (
+                <option key={opt.value} value={opt.value}>{opt.label}</option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-2">单个添加</label>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={newWord}
+                onChange={(e) => setNewWord(e.target.value)}
+                placeholder="输入违禁词"
+                className="flex-1 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"
+              />
+              <Button onClick={handleAddWord} disabled={!newWord.trim()}>
+                添加
+              </Button>
+            </div>
+          </div>
+
+          <div className="relative">
+            <div className="absolute inset-x-0 top-1/2 border-t border-border-subtle" />
+            <div className="relative flex justify-center">
+              <span className="bg-bg-card px-3 text-sm text-text-tertiary">或</span>
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-2">
+              <Upload size={14} className="inline mr-1" />
+              批量添加（每行一个）
+            </label>
+            <textarea
+              value={batchWords}
+              onChange={(e) => setBatchWords(e.target.value)}
+              placeholder="最好&#10;第一&#10;最佳&#10;..."
+              className="w-full h-32 px-4 py-3 border border-border-subtle rounded-xl bg-bg-elevated text-text-primary placeholder-text-tertiary resize-none focus:outline-none focus:ring-2 focus:ring-accent-indigo font-mono text-sm"
+            />
+            <div className="flex justify-between items-center mt-2">
+              <span className="text-xs text-text-tertiary">
+                {batchWords.split('\n').filter(w => w.trim()).length} 个词汇待添加
+              </span>
+              <Button onClick={handleBatchAdd} disabled={!batchWords.trim()}>
+                批量添加
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Modal>
+
+      {/* 添加竞品弹窗 */}
+      <Modal
+        isOpen={showAddCompetitorModal}
+        onClose={() => { setShowAddCompetitorModal(false); setNewCompetitor(''); }}
+        title="添加竞品"
+      >
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-2">竞品名称</label>
+            <input
+              type="text"
+              value={newCompetitor}
+              onChange={(e) => setNewCompetitor(e.target.value)}
+              placeholder="输入竞品品牌名称"
+              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>
+          <p className="text-sm text-text-tertiary">
+            添加后，AI将在视频中自动检测该品牌的Logo或名称出现
+          </p>
+          <div className="flex gap-3 justify-end pt-2">
+            <Button variant="ghost" onClick={() => { setShowAddCompetitorModal(false); setNewCompetitor(''); }}>
+              取消
+            </Button>
+            <Button onClick={handleAddCompetitor} disabled={!newCompetitor.trim()}>
+              添加
+            </Button>
+          </div>
+        </div>
+      </Modal>
+
+      {/* 添加白名单弹窗 */}
+      <Modal
+        isOpen={showAddWhitelistModal}
+        onClose={() => { setShowAddWhitelistModal(false); setNewWhitelistTerm(''); setNewWhitelistReason(''); }}
+        title="添加白名单"
+      >
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-2">词汇</label>
+            <input
+              type="text"
+              value={newWhitelistTerm}
+              onChange={(e) => setNewWhitelistTerm(e.target.value)}
+              placeholder="输入需要豁免的词汇"
+              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>
+            <input
+              type="text"
+              value={newWhitelistReason}
+              onChange={(e) => setNewWhitelistReason(e.target.value)}
+              placeholder="例如：品牌授权使用"
+              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 className="flex gap-3 justify-end pt-2">
+            <Button variant="ghost" onClick={() => { setShowAddWhitelistModal(false); setNewWhitelistTerm(''); setNewWhitelistReason(''); }}>
+              取消
+            </Button>
+            <Button onClick={handleAddWhitelist} disabled={!newWhitelistTerm.trim()}>
+              添加
+            </Button>
           </div>
         </div>
       </Modal>
diff --git a/frontend/app/brand/settings/page.tsx b/frontend/app/brand/settings/page.tsx
index 290a4e7..1bf6366 100644
--- a/frontend/app/brand/settings/page.tsx
+++ b/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} />
diff --git a/frontend/app/creator/page.tsx b/frontend/app/creator/page.tsx
index 45e8c1b..435a353 100644
--- a/frontend/app/creator/page.tsx
+++ b/frontend/app/creator/page.tsx
@@ -17,6 +17,7 @@ import {
 } from 'lucide-react'
 import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
 import { cn } from '@/lib/utils'
+import { platformOptions, getPlatformInfo } from '@/lib/platforms'
 
 // 任务阶段状态类型
 type StageStatus = 'pending' | 'current' | 'done' | 'error'
@@ -26,6 +27,7 @@ type Task = {
   id: string
   title: string
   description: string
+  platform: string // 发布平台
   // 脚本阶段
   scriptStage: {
     submit: StageStatus
@@ -54,6 +56,7 @@ const mockTasks: Task[] = [
     id: 'task-001',
     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: '上传脚本',
@@ -65,6 +68,7 @@ const mockTasks: Task[] = [
     id: 'task-002',
     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: '查看详情',
@@ -76,6 +80,7 @@ const mockTasks: Task[] = [
     id: 'task-003',
     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: '查看修改',
@@ -87,6 +92,7 @@ const mockTasks: Task[] = [
     id: 'task-004',
     title: 'AA数码新品发布',
     description: '开箱测评 · 审核通过 · 可发布',
+    platform: 'douyin',
     scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
     videoStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
     buttonText: '查看详情',
@@ -98,6 +104,7 @@ const mockTasks: Task[] = [
     id: 'task-005',
     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: '查看详情',
@@ -109,6 +116,7 @@ const mockTasks: Task[] = [
     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: '查看详情',
@@ -120,6 +128,7 @@ const mockTasks: Task[] = [
     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: '查看详情',
@@ -131,6 +140,7 @@ const mockTasks: Task[] = [
     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: '上传视频',
@@ -142,6 +152,7 @@ const mockTasks: Task[] = [
     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: '查看详情',
@@ -153,6 +164,7 @@ const mockTasks: Task[] = [
     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: '查看修改',
@@ -164,6 +176,7 @@ const mockTasks: Task[] = [
     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: '查看修改',
@@ -175,6 +188,7 @@ const mockTasks: Task[] = [
     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: '查看详情',
@@ -186,6 +200,7 @@ const mockTasks: Task[] = [
     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: '查看修改',
@@ -197,6 +212,7 @@ const mockTasks: Task[] = [
     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: '查看详情',
@@ -208,6 +224,7 @@ const mockTasks: Task[] = [
     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: '查看修改',
@@ -297,6 +314,8 @@ function ProgressBar({ stage, color }: {
 
 // 任务卡片组件
 function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
+  const platform = getPlatformInfo(task.platform)
+
   const getStageColor = (color: string) => {
     switch (color) {
       case 'blue': return 'text-accent-blue'
@@ -320,31 +339,40 @@ function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
 
   return (
     <div
-      className="bg-bg-card rounded-2xl p-5 flex flex-col gap-4 card-shadow cursor-pointer hover:bg-bg-elevated/30 transition-colors"
+      className="bg-bg-card rounded-2xl overflow-hidden card-shadow cursor-pointer hover:bg-bg-elevated/30 transition-colors"
       onClick={onClick}
     >
-      {/* 任务主行 */}
-      <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" />
-          </div>
-          <div className="flex flex-col gap-1.5">
-            <span className="text-base font-semibold text-text-primary">{task.title}</span>
-            <span className="text-[13px] text-text-secondary">{task.description}</span>
-          </div>
+      {/* 平台顶部条 */}
+      {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>
+          <span className={`text-sm font-medium ${platform.textColor}`}>{platform.name}</span>
         </div>
+      )}
 
-        {/* 右侧：操作按钮 */}
-        <button
-          type="button"
-          className={cn('px-5 py-2.5 rounded-[10px] text-sm font-semibold', getButtonStyle())}
-          onClick={(e) => { e.stopPropagation(); onClick() }}
-        >
-          {task.buttonText}
-        </button>
-      </div>
+      <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" />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <span className="text-base font-semibold text-text-primary">{task.title}</span>
+              <span className="text-[13px] text-text-secondary">{task.description}</span>
+            </div>
+          </div>
+
+          {/* 右侧：操作按钮 */}
+          <button
+            type="button"
+            className={cn('px-5 py-2.5 rounded-[10px] text-sm font-semibold', getButtonStyle())}
+            onClick={(e) => { e.stopPropagation(); onClick() }}
+          >
+            {task.buttonText}
+          </button>
+        </div>
 
       {/* 进度条容器 */}
       <div className="flex flex-col gap-3 pt-3">
@@ -363,6 +391,7 @@ function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
           </div>
         </div>
       </div>
+      </div>
     </div>
   )
 }
diff --git a/frontend/components/layout/DesktopLayout.tsx b/frontend/components/layout/DesktopLayout.tsx
index 3057f32..ee513b1 100644
--- a/frontend/components/layout/DesktopLayout.tsx
+++ b/frontend/components/layout/DesktopLayout.tsx
@@ -14,10 +14,12 @@ export function DesktopLayout({
   className = '',
 }: DesktopLayoutProps) {
   return (
-    <div className={`min-h-screen bg-bg-page flex ${className}`}>
+    <div className={`h-screen bg-bg-page flex overflow-hidden ${className}`}>
       <Sidebar role={role} />
-      <main className="flex-1 ml-[260px] p-8 overflow-auto">
-        {children}
+      <main className="flex-1 ml-[260px] p-8 overflow-y-auto overflow-x-hidden">
+        <div className="min-h-full">
+          {children}
+        </div>
       </main>
     </div>
   )
diff --git a/frontend/components/layout/MobileLayout.tsx b/frontend/components/layout/MobileLayout.tsx
index 07a780b..410f014 100644
--- a/frontend/components/layout/MobileLayout.tsx
+++ b/frontend/components/layout/MobileLayout.tsx
@@ -19,10 +19,12 @@ export function MobileLayout({
   className = '',
 }: MobileLayoutProps) {
   return (
-    <div className={`min-h-screen bg-bg-page flex flex-col overflow-x-hidden ${className}`}>
+    <div className={`h-screen bg-bg-page flex flex-col overflow-hidden ${className}`}>
       {showStatusBar && <StatusBar />}
-      <main className={`flex-1 ${showBottomNav ? 'pb-[95px]' : ''}`}>
-        {children}
+      <main className={`flex-1 overflow-y-auto overflow-x-hidden ${showBottomNav ? 'pb-[80px]' : ''}`}>
+        <div className="min-h-full">
+          {children}
+        </div>
       </main>
       {showBottomNav && <BottomNav role={role} />}
     </div>
diff --git a/frontend/components/layout/ResponsiveLayout.tsx b/frontend/components/layout/ResponsiveLayout.tsx
index 843d6e8..6a27844 100644
--- a/frontend/components/layout/ResponsiveLayout.tsx
+++ b/frontend/components/layout/ResponsiveLayout.tsx
@@ -37,7 +37,7 @@ export function ResponsiveLayout({
   const closeSidebar = () => setSidebarOpen(false)
 
   return (
-    <div className={cn('min-h-screen bg-bg-page', className)}>
+    <div className={cn('h-screen bg-bg-page overflow-hidden', className)}>
       {/* 移动端：汉堡菜单按钮 */}
       {isMobile && !sidebarOpen && (
         <button
@@ -84,11 +84,13 @@ export function ResponsiveLayout({
       {/* 主内容区 */}
       <main
         className={cn(
-          'min-h-screen transition-all duration-300',
+          'h-full overflow-y-auto overflow-x-hidden transition-all duration-300',
           isMobile ? 'ml-0 pt-16 px-4 pb-6' : 'ml-[260px] p-8'
         )}
       >
-        {children}
+        <div className="min-h-full">
+          {children}
+        </div>
       </main>
     </div>
   )
diff --git a/frontend/components/ui/Modal.tsx b/frontend/components/ui/Modal.tsx
index 00b85bd..401aa6a 100644
--- a/frontend/components/ui/Modal.tsx
+++ b/frontend/components/ui/Modal.tsx
@@ -25,7 +25,15 @@ const sizeStyles = {
   md: 'max-w-md',
   lg: 'max-w-lg',
   xl: 'max-w-xl',
-  full: 'max-w-[90vw] max-h-[90vh]',
+  full: 'max-w-[90vw]',
+};
+
+const bodyMaxHeightStyles = {
+  sm: 'max-h-[50vh]',
+  md: 'max-h-[60vh]',
+  lg: 'max-h-[65vh]',
+  xl: 'max-h-[70vh]',
+  full: 'max-h-[75vh]',
 };
 
 export const Modal: React.FC<ModalProps> = ({
@@ -105,7 +113,7 @@ export const Modal: React.FC<ModalProps> = ({
         )}
 
         {/* Body */}
-        <div className="px-5 py-4 max-h-[60vh] overflow-y-auto">
+        <div className={`px-5 py-4 overflow-y-auto ${bodyMaxHeightStyles[size]}`}>
           {children}
         </div>
 
diff --git a/frontend/lib/platforms.ts b/frontend/lib/platforms.ts
new file mode 100644
index 0000000..1415e70
--- /dev/null
+++ b/frontend/lib/platforms.ts
@@ -0,0 +1,22 @@
+// 平台配置 - 共享给所有端使用
+export 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' },
+]
+
+export type PlatformId = typeof platformOptions[number]['id']
+
+export function getPlatformInfo(platformId: string) {
+  return platformOptions.find(p => p.id === platformId)
+}
+
+// 平台标签组件的样式类
+export function getPlatformTagClasses(platformId: string) {
+  const platform = getPlatformInfo(platformId)
+  if (!platform) return ''
+  return `${platform.bgColor} ${platform.textColor} ${platform.borderColor}`
+}