liyanyu/video-compliance-ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: liyanyu:1011e736430cf8c23b97bcd15d2637ae3dcaeea8
Branches Tags
liyanyu:main
...
compare: liyanyu:4753626e5a3a0bf4b45c6e4fe3f68430b4dcfbb4
Branches Tags
liyanyu:main

2 Commits
1011e73643 ... 4753626e5a

Author SHA1 Message Date
Your Name
4753626e5a feat: 完成代理商/品牌方前端及文档更新 
代理商端前端：
- 新增达人管理页面（含任务申诉次数管理）
- 新增消息中心（含申诉次数申请审批）
- 新增 Brief 管理（列表、详情）
- 新增审核中心（脚本审核、视频审核）
- 新增数据报表页面

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

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
 2026-02-06 15:39:23 +08:00
Your Name
2f9b7f05fd feat(creator): 完成达人端前端页面开发 
- 新增申诉中心页面（列表、详情、新建申诉）
- 新增申诉次数管理页面（按任务显示配额，支持向代理商申请）
- 新增个人中心页面（达人ID复制、菜单导航）
- 新增个人信息编辑、账户设置、消息通知设置页面
- 新增帮助中心和历史记录页面
- 新增脚本提交和视频提交页面
- 优化消息中心页面（消息详情跳转）
- 优化任务详情页面布局和交互
- 更新 ResponsiveLayout、Sidebar、ReviewSteps 通用组件

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
 2026-02-06 15:38:01 +08:00
43 changed files with 18516 additions and 5954 deletions
Show Stats Expand all files Collapse all files

4
DevelopmentPlan.md
View File

@ -401,8 +401,8 @@ sequenceDiagram
| --- | --- | --- | | --- | --- | --- |
| `brands` | 品牌方 | id, name, settings_json | | `brands` | 品牌方 | id, name, settings_json |
| `agencies` | 代理商 | id, brand_id, name | | `agencies` | 代理商 | id, brand_id, name |
| `creators` | 达人 | id, agency_id, credit_score, appeal_tokens | | `creators` | 达人 | id, agency_id, credit_score |
| `tasks` | 审核任务 | id, brand_id, agency_id, creator_id, status, platform | | `tasks` | 审核任务 | id, brand_id, agency_id, creator_id, status, platform, appeal_remaining, appeal_used |
| `briefs` | Brief 规则 | id, task_id, raw_file_url, parsed_rules_json | | `briefs` | Brief 规则 | id, task_id, raw_file_url, parsed_rules_json |
| `videos` | 视频文件 | id, task_id, version, file_url, duration | | `videos` | 视频文件 | id, task_id, version, file_url, duration |
| `reports` | 审核报告 | id, video_id, ai_result_json, human_decision, created_at | | `reports` | 审核报告 | id, video_id, ai_result_json, human_decision, created_at |

53
FeatureSummary.md
View File

@ -589,32 +589,69 @@
| 功能编号 | 功能名称 | 优先级 | 用户故事 | 使用角色 | | 功能编号 | 功能名称 | 优先级 | 用户故事 | 使用角色 |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| F-24 | 发起申诉 | P1 | - | 达人 | | F-24 | 发起申诉 | P1 | - | 达人 |
| F-25 | 申诉令牌管理 | P1 | - | 系统 | | F-25 | 申诉次数管理 | P1 | - | 达人/代理商 |
| F-25-A | 申请增加申诉次数 | P1 | - | 达人 |
| F-25-B | 处理申诉次数请求 | P1 | - | 代理商 |
| F-26 | 人工仲裁 | P1 | - | 代理商 | | F-26 | 人工仲裁 | P1 | - | 代理商 |
| F-27 | 申诉结果通知 | P1 | - | 达人 | | F-27 | 申诉结果通知 | P1 | - | 达人 |
#### F-24 发起申诉 #### F-24 发起申诉
**功能描述：** 达人可对每条报错发起申诉。 **功能描述：** 达人可对每条报错发起申诉，消耗该任务的申诉次数。
**操作要求：** **操作要求：**
- 提供理由输入框（必填，≥ 10 字） - 提供理由输入框（必填，≥ 10 字）
- 可上传补充证据（截图、链接等） - 可上传补充证据（截图、链接等）
- 消耗申诉令牌 - 消耗该任务的1次申诉次数
- 若申诉次数为0，提示"申诉次数不足"并引导申请增加
**界面映射：** 达人端 → 任务详情-审核结果区 → [申诉] 按钮 **界面映射：** 达人端 → 任务详情-审核结果区 → [申诉] 按钮
--- ---
#### F-25 申诉令牌管理 #### F-25 申诉次数管理
**功能描述：** 基于达人信用评分分配令牌配额，申诉成功后令牌返还。 **功能描述：** 每个任务独立拥有申诉次数，初始为1次，达人可向代理商申请增加。
**规则说明：** **规则说明：**
- 历史表现越好，配额越高 - 每个任务初始申诉次数：**1次**
- 申诉成功后令牌自动返还 - 申诉次数按任务独立计算，不同任务互不影响
- 达人可在个人中心查看所有任务的申诉次数
- 代理商可为达人的任务增加申诉次数（无上限）
**界面映射：** 达人端 → 任务详情-审核结果区 → 申诉弹窗（显示剩余令牌） **界面映射：**
- 达人端 → 个人中心 → 申诉次数（查看所有任务的申诉次数列表）
- 达人端 → 任务详情-审核结果区 → 申诉弹窗（显示当前任务剩余次数）
---
#### F-25-A 申请增加申诉次数
**功能描述：** 达人可为特定任务向代理商申请增加申诉次数。
**申请流程：**
1. 达人在个人中心 → 申诉次数页面，点击某任务的 `[申请增加]` 按钮
2. 无需填写理由，直接发送申请
3. 代理商在消息中心收到通知
4. 等待代理商处理（同意/拒绝/忽略）
**界面映射：** 达人端 → 个人中心 → 申诉次数 → [申请增加] 按钮
---
#### F-25-B 处理申诉次数请求
**功能描述：** 代理商处理达人的申诉次数增加请求。
**处理方式：**
- **消息中心入口：** 收到通知"达人【XXX】申请增加【XXX任务】的申诉次数"，点击可处理
- **达人管理入口：** 在达人管理页面可主动为任意达人的任务增加申诉次数
- **操作选项：** 同意（+1次）/ 拒绝 / 不处理（忽略）
- **增加上限：** 无上限
**界面映射：**
- 代理商端 → 消息中心 → 申诉次数请求通知
- 代理商端 → 达人管理 → 达人详情 → 任务申诉次数管理
--- ---

13
PRD.md
View File

@ -131,7 +131,7 @@
- **舆情风控雷达：** 针对"油腻感"、"价值观风险"、"错别字"的专项检测 - **舆情风控雷达：** 针对"油腻感"、"价值观风险"、"错别字"的专项检测
- **交互式审核台：** 支持时间戳打点、风险高亮、版本比对 (Diff) 的 Web 界面 - **交互式审核台：** 支持时间戳打点、风险高亮、版本比对 (Diff) 的 Web 界面
- **移动端支持：** 响应式 H5 覆盖达人/代理商/品牌方（可作为小程序 WebView 承载） - **移动端支持：** 响应式 H5 覆盖达人/代理商/品牌方（可作为小程序 WebView 承载）
- **信用与申诉体系：** 包含申诉令牌管理和人工仲裁流程 - **信用与申诉体系：** 包含按任务独立的申诉次数管理和人工仲裁流程
- **规则库管理与版本控制：** 支持平台规则库更新、品牌私有规则与白名单配置 - **规则库管理与版本控制：** 支持平台规则库更新、品牌私有规则与白名单配置
- **权限与多租户隔离：** 支持品牌/代理/达人不同角色的权限与数据隔离 - **权限与多租户隔离：** 支持品牌/代理/达人不同角色的权限与数据隔离
- **证据链导出：** 支持导出可追溯的审核证据链报告 - **证据链导出：** 支持导出可追溯的审核证据链报告
@ -255,7 +255,9 @@
### 6.6 申诉与仲裁 ### 6.6 申诉与仲裁
**P1** **P1**
- 申诉令牌管理与工单流转 - 按任务独立的申诉次数管理（每任务初始1次）
- 达人申请增加申诉次数流程
- 代理商处理申诉次数请求（同意/拒绝）
- 人工仲裁流程与记录 - 人工仲裁流程与记录
- 操作记录完整可追溯 - 操作记录完整可追溯
@ -351,7 +353,10 @@
15. 当日 00:00 后，已通过任务自动归入历史记录 15. 当日 00:00 后，已通过任务自动归入历史记录
**申诉流程：** **申诉流程：**
- 对任意审核结论可触发申诉（消耗申诉令牌） - 对任意审核结论可触发申诉（消耗该任务的申诉次数）
- 每个任务初始申诉次数为 **1次**，不同任务独立计算
- 申诉次数不足时，可向代理商申请增加（无需理由）
- 代理商可在消息中心或达人管理页面处理申请（同意/拒绝/忽略）
--- ---
@ -374,7 +379,7 @@
- **规则集**：平台规则 + 品牌私有规则 + 白名单 + 规则版本记录 - **规则集**：平台规则 + 品牌私有规则 + 白名单 + 规则版本记录
- **审核记录**：风险项、时间戳、证据片段、风险等级（红/黄/绿） - **审核记录**：风险项、时间戳、证据片段、风险等级（红/黄/绿）
- **人工决策**：确认/驳回/强制通过 + 操作人 + 操作时间 - **人工决策**：确认/驳回/强制通过 + 操作人 + 操作时间
- **申诉记录**：申诉原因、仲裁结论、令牌消耗 - **申诉记录**：申诉原因、仲裁结论、申诉次数变化（任务维度）
### 9.2 审计要求 [US-12] ### 9.2 审计要求 [US-12]

2
RequirementsDoc.md
View File

@ -131,7 +131,7 @@
3. **分区执法逻辑:** 智能区分“广告段”与“剧情段”，应用不同的审核尺度。 3. **分区执法逻辑:** 智能区分“广告段”与“剧情段”，应用不同的审核尺度。
4. **舆情风控雷达:** 针对“油腻感”、“价值观风险”、“错别字”的专项检测模型。 4. **舆情风控雷达:** 针对“油腻感”、“价值观风险”、“错别字”的专项检测模型。
5. **交互式审核台:** 支持时间戳打点、风险高亮、版本比对 (Diff) 的 Web 界面。 5. **交互式审核台:** 支持时间戳打点、风险高亮、版本比对 (Diff) 的 Web 界面。
6. **信用与申诉体系:** 包含申诉令牌管理和人工仲裁流程。 6. **信用与申诉体系:** 包含按任务独立的申诉次数管理（每任务初始1次，可向代理商申请增加）和人工仲裁流程。
7. **规则库管理与版本控制:** 支持平台规则库更新、品牌私有规则与白名单配置。 7. **规则库管理与版本控制:** 支持平台规则库更新、品牌私有规则与白名单配置。
8. **权限与多租户隔离:** 支持品牌/代理/达人不同角色的权限与数据隔离。 8. **权限与多租户隔离:** 支持品牌/代理/达人不同角色的权限与数据隔离。
9. **审计日志与报告导出:** 支持导出可追溯的审核证据链。 9. **审计日志与报告导出:** 支持导出可追溯的审核证据链。

4
UIDesign.md
View File

@ -640,8 +640,8 @@ font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
│ │ │ │ │ │ │ │
│ │ ─────────────────────────────────────────────────── │ │ │ │ ─────────────────────────────────────────────────── │ │
│ │ │ │ │ │ │ │
│ │ 💡 剩余申诉令牌：2 次 │ │ │ │ 💡 本任务剩余申诉次数：1 次 │ │
│ │ 申诉成功后令牌将自动返还 │ │ │ │ 每个任务独立计算，次数不足可向代理商申请增加 │ │
│ │ │ │ │ │ │ │
│ │ ┌──────────────────────────────────────────────────┐ │ │ │ │ ┌──────────────────────────────────────────────────┐ │ │
│ │ │ 提交申诉 │ │ │ │ │ │ 提交申诉 │ │ │

112
UIDesignSpec.md
View File

@ -282,34 +282,97 @@
### 4.2 代理商端 (Agency) ### 4.2 代理商端 (Agency)
| 页面名称 | 设备 | 优先级 | 设计稿节点ID | > **侧边栏导航顺序：** 工作台 → 审核台 → Brief配置 → 达人管理 → 数据报表 → 消息中心
#### 4.2.1 Desktop 端页面
| 页面名称 | 优先级 | 设计稿节点ID | 备注 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| 工作台 | Desktop | P0 | RX8V9 | | 工作台 | P0 | RX8V9 | 待办统计+快捷入口，默认首页 |
| 审核决策台 | Desktop | P0 | 2u8Bq | | 项目详情 | P0 | C7wfV | 项目数据和达人列表 |
| Brief配置中心 | Desktop | P0 | djd2K | | 审核台(列表页) | P0 | zjiCT | 脚本/视频待审列表 |
| 达人管理 | Desktop | P1 | 5cFMX | | 脚本审核决策台 | P0 | f8HX9 | 简单模式(文件图标+预览按钮) |
| 数据报表 | Desktop | P1 | An8gw | | 脚本审核(预览模式) | P0 | Wct5R | 展开脚本内容+AI分析 |
| 版本比对 | Desktop | P2 | NDmYh | | 视频审核决策台 | P0 | 2u8Bq | 视频播放+问题标记+决策 |
| 工作台 | Mobile | P0 | VuH3F | | Brief配置中心(列表页) | P0 | Nicby | 待配置/已配置列表 |
| 快捷审核 | Mobile | P0 | lrHaj | | Brief配置详情(待配置) | P0 | jRsW5 | 上传Brief+配置规则 |
| 任务列表 | Mobile | P1 | c6SPa | | Brief配置详情(已配置) | P0 | b06fU | 查看/编辑配置 |
| 消息中心 | Mobile | P1 | 9Us9g | | 达人管理 | P1 | 5cFMX | 达人列表+邀请 |
| 个人中心 | Mobile | P2 | 8OCZ3 | | 邀请达人弹窗 | P1 | ADN10 | 邀请达人模态框 |
| 数据报表 | P1 | An8gw | 项目数据统计 |
| 消息中心 | P1 | PfMR0 | 通知列表 |
#### 4.2.2 Mobile 端页面
| 页面名称 | 优先级 | 设计稿节点ID | 备注 |
| --- | --- | --- | --- |
| 工作台 | P0 | VuH3F | 紧急待办概览 |
| 快捷审核 | P0 | lrHaj | 外出场景审核 |
| 任务列表 | P1 | c6SPa | 任务筛选 |
| 消息中心 | P1 | 9Us9g | 通知列表 |
| 个人中心 | P2 | 8OCZ3 | 个人设置 |
#### 4.2.3 页面跳转关系
```
侧边栏导航
├── 工作台 ───────────► 我的项目 [查看] → 项目详情
│ 紧急待办 [审核] → 审核决策台
├── 审核台 ───────────► 审核台(列表页)
│ ├── 脚本任务 ────► 脚本审核决策台 ─► 预览脚本按钮 → 预览模式
│ └── 视频任务 ────► 视频审核决策台
├── Brief配置 ────────► Brief配置中心(列表页)
│ ├── 待配置项目 ──► Brief配置详情(待配置) ─► 保存 → 已配置列表
│ └── 已配置项目 ──► Brief配置详情(已配置)
├── 达人管理 ─────────► 邀请按钮 → 邀请达人弹窗
├── 数据报表 ─────────► 数据报表页
└── 消息中心 ─────────► 消息中心页
```
### 4.3 品牌方端 (Brand) ### 4.3 品牌方端 (Brand)
| 页面名称 | 设备 | 优先级 | 设计稿节点ID | > **侧边栏导航顺序：** 项目看板 → 创建项目 → 终审台 → 代理商管理 → 规则配置 → AI配置 → 系统设置
#### 4.3.1 Desktop 端页面
| 页面名称 | 优先级 | 设计稿节点ID | 备注 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| 数据看板 | Desktop | P0 | xUM9m | | 项目看板 | P0 | xUM9m | 项目列表与数据概览，默认首页 |
| AI服务配置 | Desktop | P0 | 4ppiJ | | 项目详情数据看板 | P1 | D1O6f | 单项目数据分析 |
| 规则配置 | Desktop | P0 | nhHSF | | 创建项目 | P0 | fP5rY | 新建项目表单 |
| 代理商管理 | Desktop | P1 | 2jnnO | | 终审台(列表页) | P0 | afJEU | 脚本/视频待终审列表 |
| 终审台 | Desktop | P0 | aePi5 | | 脚本终审决策台 | P0 | Sw2hw | 简单模式(文件图标+预览按钮) |
| 系统设置 | Desktop | P2 | 4nVj4 | | 脚本终审(预览模式) | P0 | cp5CE | 展开脚本内容审核 |
| 数据看板 | Mobile | P0 | lpVdV | | 视频终审决策台 | P0 | aePi5 | 视频播放+问题标记+决策 |
| 审批中心 | Mobile | P1 | OueOe | | 代理商管理 | P1 | 2jnnO | 代理商列表与邀请 |
| 消息中心 | Mobile | P2 | 1w9xC | | 邀请代理商弹窗 | P1 | GyUlM | 邀请代理商模态框 |
| 我的 | Mobile | P2 | OJBbT | | 规则配置 | P0 | nhHSF | 黑名单/白名单管理 |
| AI服务配置 | P0 | 4ppiJ | AI模型与参数配置 |
| 系统设置 | P2 | 4nVj4 | 通用设置、安全、数据导出 |
#### 4.3.2 Mobile 端页面
| 页面名称 | 优先级 | 设计稿节点ID | 备注 |
| --- | --- | --- | --- |
| 数据看板 | P0 | lpVdV | 关键指标概览 |
| 审批中心 | P1 | OueOe | 终审处理 |
| 消息中心 | P2 | 1w9xC | 通知列表 |
| 我的 | P2 | OJBbT | 个人设置 |
#### 4.3.3 页面跳转关系
```
侧边栏导航
├── 项目看板 ─────────► 点击项目卡片 → 项目详情数据看板
├── 创建项目 ─────────► 填写表单 → 保存 → 项目看板
├── 终审台 ───────────► 终审台(列表页)
│ ├── 脚本任务 ────► 脚本终审决策台 ─► 预览脚本按钮 → 预览模式
│ └── 视频任务 ────► 视频终审决策台
├── 代理商管理 ───────► 邀请按钮 → 邀请代理商弹窗
├── 规则配置 ─────────► 黑名单/白名单管理
├── AI配置 ───────────► AI服务配置页
└── 系统设置 ─────────► 系统设置页
```
--- ---
@ -407,7 +470,7 @@ module.exports = {
--- ---
**文档维护者**: Claude **文档维护者**: Claude
**最后更新**: 2026-02-05 **最后更新**: 2026-02-06
--- ---
@ -417,3 +480,4 @@ module.exports = {
| --- | --- | --- | --- | | --- | --- | --- | --- |
| V1.0 | 2026-02-03 | Claude | 初稿：设计令牌、组件规范、页面清单 | | V1.0 | 2026-02-03 | Claude | 初稿：设计令牌、组件规范、页面清单 |
| V1.1 | 2026-02-05 | Claude | **明确两阶段审核页面**：细化达人端页面清单，按脚本阶段/视频阶段分类；新增脚本品牌方不通过(NeF4L)、视频AI不通过(6EX4Z)页面 | | V1.1 | 2026-02-05 | Claude | **明确两阶段审核页面**：细化达人端页面清单，按脚本阶段/视频阶段分类；新增脚本品牌方不通过(NeF4L)、视频AI不通过(6EX4Z)页面 |
| V1.2 | 2026-02-06 | Claude | **完善品牌方端和代理商端页面清单**：更新侧边栏导航顺序；新增规则配置、脚本终审(预览模式)等页面；补充页面跳转关系图 |

212
User_Role_Interfaces.md
View File

@ -3,8 +3,8 @@
| 文档类型 | **UI/UX Spec (Interface Definitions)** | | 文档类型 | **UI/UX Spec (Interface Definitions)** |
| --- | --- | | --- | --- |
| **项目名称** | 秒思智能审核平台 (AI 营销内容合规审核平台) | | **项目名称** | 秒思智能审核平台 (AI 营销内容合规审核平台) |
| **版本号** | V1.6 | | **版本号** | V1.8 |
| **发布日期** | 2026-02-05 | | **发布日期** | 2026-02-06 |
| **关联文档** | RequirementsDoc.md, PRD.md, FeatureSummary.md, DevelopmentPlan.md, AIProviderConfig.md, UIDesign.md, tasks.md | | **关联文档** | RequirementsDoc.md, PRD.md, FeatureSummary.md, DevelopmentPlan.md, AIProviderConfig.md, UIDesign.md, tasks.md |
| **侧重** | 角色权限、核心页面布局、交互逻辑 | | **侧重** | 角色权限、核心页面布局、交互逻辑 |
@ -22,6 +22,8 @@
| V1.4 | 2026-02-03 | Claude | **新增审核流程进度可视化 UI（F-52）**：达人端任务列表状态标签、任务详情-审核结果区进度条 | | V1.4 | 2026-02-03 | Claude | **新增审核流程进度可视化 UI（F-52）**：达人端任务列表状态标签、任务详情-审核结果区进度条 |
| V1.5 | 2026-02-03 | Claude | **扩展审核流程进度可视化至全角色**：代理商审核决策台/快捷审核、品牌方审批中心均可查看进度条 | | V1.5 | 2026-02-03 | Claude | **扩展审核流程进度可视化至全角色**：代理商审核决策台/快捷审核、品牌方审批中心均可查看进度条 |
| V1.6 | 2026-02-05 | Claude | **明确两阶段审核流程**：脚本阶段+视频阶段独立状态；完善任务按钮状态逻辑（查看详情→上传视频）；细化结果页按钮（重新提交脚本/重新上传视频）；添加历史任务归档规则 | | V1.6 | 2026-02-05 | Claude | **明确两阶段审核流程**：脚本阶段+视频阶段独立状态；完善任务按钮状态逻辑（查看详情→上传视频）；细化结果页按钮（重新提交脚本/重新上传视频）；添加历史任务归档规则 |
| V1.7 | 2026-02-06 | Claude | **完善三端导航结构**：品牌方端更新侧边栏导航顺序（项目看板→创建项目→终审台→代理商管理→规则配置→AI配置→系统设置）并新增4.0章节详述页面跳转逻辑；代理商端更新侧边栏导航顺序（工作台→审核台→Brief配置→达人管理→数据报表→消息中心）并补充脚本预览模式跳转；规则配置简化为黑白名单管理；补充所有页面的设计稿节点ID映射 |
| V1.8 | 2026-02-06 | Claude | **申诉次数按任务独立**：每个任务初始1次申诉次数；达人可在个人中心查看各任务申诉次数并申请增加（无需理由）；代理商在消息中心/达人管理处理请求（同意/拒绝/忽略，增加次数无上限）；新增达人端2.6申诉次数管理页；更新代理商端3.5达人管理增加申诉次数管理功能 |
--- ---
@ -38,7 +40,7 @@
| **脚本/视频提交** | ✅ 任务详情内上传 & 修改 [US-03] | ❌ 不可提交 | ❌ 不可提交 | | **脚本/视频提交** | ✅ 任务详情内上传 & 修改 [US-03] | ❌ 不可提交 | ❌ 不可提交 |
| **查看 AI 报告** | ✅ 仅查看自己的 [US-07] | ✅ 查看所管辖达人的 | ✅ 查看所有 | | **查看 AI 报告** | ✅ 仅查看自己的 [US-07] | ✅ 查看所管辖达人的 | ✅ 查看所有 |
| **审核决策** | ❌ 无权 | ✅ 初审 (驳回/通过) [US-08] | ✅ 终审（可配置）/ 强制通过 [US-09] | | **审核决策** | ❌ 无权 | ✅ 初审 (驳回/通过) [US-08] | ✅ 终审（可配置）/ 强制通过 [US-09] |
| **申诉功能** | ✅ 发起申诉 (消耗令牌) | ✅ 仲裁申诉 | ❌ 无需申诉 | | **申诉功能** | ✅ 发起申诉 (消耗任务申诉次数) / 申请增加次数 | ✅ 仲裁申诉 / 管理达人申诉次数 | ❌ 无需申诉 |
| **证据链导出** | ❌ 无权 | ✅ 导出所管辖任务 | ✅ 导出全部 [US-12] | | **证据链导出** | ❌ 无权 | ✅ 导出所管辖任务 | ✅ 导出全部 [US-12] |
| **数据看板** | 仅看个人任务进度 | 整体进度 / 达人排名 | 全局合规率 / 舆情风控 | | **数据看板** | 仅看个人任务进度 | 整体进度 / 达人排名 | 全局合规率 / 舆情风控 |
| **系统配置** | ❌ 无权 | ❌ 无权 | ✅ 规则库/阈值/白名单/区域合规/审核流程 [US-10A/US-10B] | | **系统配置** | ❌ 无权 | ❌ 无权 | ✅ 规则库/阈值/白名单/区域合规/审核流程 [US-10A/US-10B] |
@ -82,19 +84,21 @@
│ 工作台 │ 审核 │ 任务 │ 消息 │ 我的│ │ 工作台 │ 审核 │ 任务 │ 消息 │ 我的│
└─────────┴─────────┴─────────┴─────────┴─────┘ └─────────┴─────────┴─────────┴─────────┴─────┘
``` ```
> 📱 **移动端定位：** 外出场景下的紧急审核处理、进度查看、消息通知，复杂配置操作引导至桌面端完成 > 📱 **移动端定位：** 外出场景下的紧急审核处理、进度查看、消息通知，复杂配置操作（如 Brief 配置）引导至桌面端完成
### 品牌方端 (Desktop Sidebar) ### 品牌方端 (Desktop Sidebar)
``` ```
┌──────────────────────────────────────────────┐ ┌──────────────────────────────────────────────┐
│ 📊 数据看板 (Analytics) │ │ 📊 项目看板 (Dashboard) ← 默认首页 │
│ 👥 代理商管理 │ │ ➕ 创建项目 (Create Project) │
│ 🤖 AI 配置 │ │ 🛡️ 终审台 (Final Review) │
│ ✅ 终审台 (Final Review) │ │ 🏢 代理商管理 (Agency) │
│ 📁 创建项目 (Create Project) │ │ 📋 规则配置 (Rules) ← 黑白名单 │
│ 🤖 AI配置 (AI Settings) │
│ ⚙️ 系统设置 (Settings) │ │ ⚙️ 系统设置 (Settings) │
└──────────────────────────────────────────────┘ └──────────────────────────────────────────────┘
``` ```
> **导航说明：** 规则配置为独立入口，包含黑名单/白名单管理；终审台仅当终审开启时显示待审任务
### 品牌方端 (Mobile Tab Bar) 📱 ### 品牌方端 (Mobile Tab Bar) 📱
``` ```
@ -322,12 +326,12 @@
* **申诉入口：** * **申诉入口：**
* 在每一条报错旁边提供 `[ 申诉 ]` 按钮 * 在每一条报错旁边提供 `[ 申诉 ]` 按钮
* **申诉弹窗：** * **申诉弹窗：**
* 显示剩余令牌数量（如：剩余 2 次） * 显示当前任务剩余申诉次数（如：本任务剩余 1 次）
* 令牌配额基于达人信用评分（历史表现越好，配额越高） * 每个任务初始申诉次数为 **1次**，不同任务独立计算
* 提供理由输入框（必填，≥ 10 字） * 提供理由输入框（必填，≥ 10 字）
* 可上传补充证据（截图、链接等） * 可上传补充证据（截图、链接等）
* **申诉流程：** 提交 → 代理商仲裁 → 结果通知 * **申诉流程：** 提交 → 代理商仲裁 → 结果通知
* **令牌返还：** 申诉成功后令牌自动返还 * **次数不足时：** 显示"申诉次数不足"提示，提供 `[申请增加]` 按钮引导达人向代理商申请
### 2.4 消息通知中心 (Notification Center) ### 2.4 消息通知中心 (Notification Center)
@ -359,6 +363,8 @@
* 操作按钮：`[同意]` `[拒绝]` * 操作按钮：`[同意]` `[拒绝]`
* 同意后自动加入该代理商的达人列表，可接收任务分配 * 同意后自动加入该代理商的达人列表，可接收任务分配
* 💬 **申诉结果：** "您的申诉已通过，AI 已学习您的反馈" * 💬 **申诉结果：** "您的申诉已通过，AI 已学习您的反馈"
* ✅ **申诉次数增加同意：** "代理商【星辰传媒】已同意增加【XX任务】的申诉次数"
* ❌ **申诉次数增加拒绝：** "代理商【星辰传媒】拒绝了【XX任务】的申诉次数增加请求"
* **通知渠道：** * **通知渠道：**
* H5 内消息中心（必选） * H5 内消息中心（必选）
@ -377,6 +383,28 @@
* 平均修改轮次：脚本平均修改次数、视频平均修改次数 * 平均修改轮次：脚本平均修改次数、视频平均修改次数
* **证书导出：** 支持导出"合规达人"认证徽章（达到一定通过率后解锁） * **证书导出：** 支持导出"合规达人"认证徽章（达到一定通过率后解锁）
### 2.6 申诉次数管理页 (Appeal Quota)
**入口：** 达人端 → 个人中心 → 申诉次数
**功能描述：** 达人查看所有任务的申诉次数，并可向代理商申请增加。
* **任务申诉次数列表：**
* 显示所有进行中任务的申诉次数
* 每条记录包含：任务名称、代理商名称、剩余次数、已使用次数
* 支持按代理商/任务状态筛选
* **申请增加次数：**
* 点击某任务的 `[申请增加]` 按钮
* 无需填写理由，直接发送申请给该任务的代理商
* 申请状态：待处理 / 已同意 / 已拒绝
* **申诉次数规则说明：**
* 每个任务初始申诉次数：**1次**
* 不同任务的申诉次数独立计算
* 代理商可增加的次数无上限
* 申诉次数用完时，无法提交新的申诉
--- ---
## 3. 界面详解：代理商端 (The Agency Console) ## 3. 界面详解：代理商端 (The Agency Console)
@ -400,48 +428,50 @@
#### 侧边栏导航 #### 侧边栏导航
``` ```
秒思 (Logo) 秒思 (Logo)
├── 工作台 ← 默认首页 ├── 工作台 ← 默认首页 (RX8V9)
├── Brief配置 → Brief配置中心(列表页) ├── 审核台 → 审核台(列表页) (zjiCT)
├── 审核台 → 审核台(列表页) ├── Brief配置 → Brief配置中心(列表页) (Nicby)
├── 达人管理 → 达人管理(列表页) ├── 达人管理 → 达人管理页面 (5cFMX)
├── 数据面板 → 统计报表页 ├── 数据报表 → 数据报表页 (An8gw)
└── 设置 → 设置页 └── 消息中心 → 消息中心页 (PfMR0)
``` ```
#### 页面跳转关系图 #### 页面跳转关系图
**工作台跳转：** **工作台跳转：**
``` ```
工作台 工作台 (RX8V9)
├── 我的项目 [查看] ──────────► 项目详情页 ├── 我的项目 [查看] ──────────► 项目详情页 (C7wfV)
└── 紧急待办 └── 紧急待办
├── 品牌新任务 [查看详情] ────► 项目详情页（待配置Brief） ├── 品牌新任务 [查看详情] ────► Brief配置详情页(待配置) (jRsW5)
├── 脚本审核任务 [审核脚本] ──► 脚本审核决策台 ├── 脚本审核任务 [审核脚本] ──► 脚本审核决策台 (f8HX9)
├── 视频审核任务 [审核视频] ──► 视频审核决策台 ├── 视频审核任务 [审核视频] ──► 视频审核决策台 (2u8Bq)
└── 申诉仲裁任务 [仲裁] ──────► 审核决策台（带申诉标签） └── 申诉仲裁任务 [仲裁] ──────► 审核决策台（带申诉标签）
``` ```
**Brief配置跳转：**
```
Brief配置中心(列表页)
├── 待配置列表
│ └── 项目 ──点击──► 详情页(待配置) ──保存后──► 移到已配置列表
└── 已配置列表
└── 项目 ──点击──► 详情页(已配置) ──可更换文件/编辑规则
```
**审核台跳转：** **审核台跳转：**
``` ```
审核台(列表页) 审核台(列表页) (zjiCT)
├── 脚本审核列表 ├── 脚本审核列表
│ └── 任务 [审核] ──► 脚本审核决策台 ──[通过/驳回]──► 返回列表 │ └── 任务 [审核] ──► 脚本审核决策台 (f8HX9)
│ ├── [预览脚本] ──► 预览模式 (Wct5R)
│ └── [通过/驳回] ──► 返回列表
└── 视频审核列表 └── 视频审核列表
└── 任务 [审核] ──► 视频审核决策台 ──[通过/驳回/强制通过]──► 返回列表 └── 任务 [审核] ──► 视频审核决策台 (2u8Bq) ──[通过/驳回/强制通过]──► 返回列表
```
**Brief配置跳转：**
```
Brief配置中心(列表页) (Nicby)
├── 待配置列表
│ └── 项目 ──点击──► 详情页(待配置) (jRsW5) ──保存后──► 移到已配置列表
└── 已配置列表
└── 项目 ──点击──► 详情页(已配置) (b06fU) ──可更换文件/编辑规则
``` ```
**项目详情页：** **项目详情页：**
``` ```
项目详情页 项目详情页 (C7wfV)
├── Brief信息 [下载] [预览] ├── Brief信息 [下载] [预览]
├── 已分配达人列表（显示各达人当前状态） ├── 已分配达人列表（显示各达人当前状态）
└── [+ 分配达人] ──► 弹窗选择达人 └── [+ 分配达人] ──► 弹窗选择达人
@ -449,9 +479,9 @@ Brief配置中心(列表页)
**达人管理：** **达人管理：**
``` ```
达人管理(列表页) 达人管理 (5cFMX)
├── 达人列表（显示达人信息、粉丝数、平台、状态） ├── 达人列表（显示达人信息、粉丝数、平台、状态）
└── [+ 添加达人] ──► 弹窗填写达人信息 └── [+ 邀请达人] ──► 邀请达人弹窗 (ADN10)
``` ```
### 3.1 工作台 (Dashboard) ### 3.1 工作台 (Dashboard)
@ -616,6 +646,19 @@ Brief配置中心(列表页)
* 批量发送催促通知 * 批量发送催促通知
* 批量导出达人数据 * 批量导出达人数据
* **申诉次数管理：**
* 在达人列表中点击某达人，可展开查看该达人的所有任务
* 每个任务显示：任务名称、剩余申诉次数、已使用次数
* 点击 `[+1]` 按钮可直接为该任务增加1次申诉次数
* 支持批量增加申诉次数
* **增加次数无上限**
* **申诉次数请求处理：**
* 当达人申请增加申诉次数时，代理商在消息中心收到通知
* 通知内容："达人【XXX】申请增加【XXX任务】的申诉次数"
* 点击通知可直接处理：`[同意]` / `[拒绝]`
* 也可在达人管理页面主动为任意任务增加申诉次数
### 3.6 数据报表 (Analytics Reports) ### 3.6 数据报表 (Analytics Reports)
* **项目维度：** * **项目维度：**
@ -764,12 +807,66 @@ Brief配置中心(列表页)
**设计目标：** 监管、配置、数据沉淀、风险预警。 **设计目标：** 监管、配置、数据沉淀、风险预警。
**核心设备：** 桌面端 (Desktop Web) 为主，移动端 (Mobile) 为辅。 **核心设备：** 桌面端 (Desktop Web) 为主，移动端 (Mobile) 为辅。
### 4.1 数据看板 (Executive Dashboard) ✨ *核心功能* ### 4.0 页面结构与跳转逻辑
品牌方需要一目了然地掌握整体合规状况。 #### 侧边栏导航
```
秒思 (Logo)
├── 项目看板 ← 默认首页
├── 创建项目 → 创建项目页面
├── 终审台 → 终审台(列表页)
├── 代理商管理 → 代理商管理页面
├── 规则配置 → 规则配置页面 (黑白名单)
├── AI配置 → AI服务配置页面
└── 系统设置 → 系统设置页面
```
#### 页面跳转关系图
**项目看板跳转：**
```
项目看板 (xUM9m)
├── 项目卡片 [点击] ──────────► 项目详情数据看板 (D1O6f)
└── [+ 创建项目] ────────────► 创建项目页面 (fP5rY)
```
**终审台跳转：**
```
终审台(列表页) (afJEU)
├── 脚本待审列表
│ └── 任务 [审核] ──► 脚本终审决策台 (Sw2hw) ──[预览脚本]──► 预览模式 (cp5CE)
│ ──[通过/驳回]──► 返回列表
└── 视频待审列表
└── 任务 [审核] ──► 视频终审决策台 (aePi5) ──[通过/驳回]──► 返回列表
```
**代理商管理：**
```
代理商管理 (2jnnO)
├── 代理商列表（显示代理商信息、项目数、状态）
└── [+ 邀请代理商] ──► 邀请代理商弹窗 (GyUlM)
```
**规则配置：**
```
规则配置 (nhHSF)
├── 黑名单管理 ──► 添加/编辑/删除违禁词
└── 白名单管理 ──► 添加/编辑/删除豁免词
```
### 4.1 项目看板 (Project Dashboard) ✨ *核心功能*
**界面映射：** `pencil-new.pen` → "品牌方端 - 项目看板" (xUM9m)
品牌方需要一目了然地掌握整体合规状况和项目进展。
> 对应 PRD 成功指标：人工投入时长、初审通过率、召回率/误报率、舆情一致性 > 对应 PRD 成功指标：人工投入时长、初审通过率、召回率/误报率、舆情一致性
**项目卡片列表：**
* 展示所有营销项目卡片
* 每个卡片显示：项目名称、状态、脚本数/视频数、截止日期
* 点击卡片进入项目详情数据看板
**顶部指标卡片：** **顶部指标卡片：**
``` ```
┌─────────────┬─────────────┬─────────────┬─────────────┬─────────────┐ ┌─────────────┬─────────────┬─────────────┬─────────────┬─────────────┐
@ -792,30 +889,25 @@ Brief配置中心(列表页)
* 🟠 **关注：** "达人B连续3次提交未通过，建议沟通" * 🟠 **关注：** "达人B连续3次提交未通过，建议沟通"
* 🟡 **舆情：** "本周舆情风险拦截数异常上升，建议检查阈值设置" * 🟡 **舆情：** "本周舆情风险拦截数异常上升，建议检查阈值设置"
### 4.2 全局规则配置 (Rule Engine) [US-10A/US-10B] ### 4.2 规则配置 (Rule Configuration) [US-10A/US-10B]
* **黑白名单管理：** **界面映射：** `pencil-new.pen` → "品牌方端 - 规则配置" (nhHSF)
* **禁用词库：** 支持分类管理（广告法 / 平台规则 / 品牌私有）
* **竞品列表：** 上传竞品 Logo 图库，支持相似度阈值设置
* **白名单：** 允许特定达人/场景豁免某些规则
* **特例记录：** 查看从审核台记录的豁免条款，支持确认/撤销
* **区域合规配置：** **入口位置：** 品牌方端侧边栏 → 规则配置
* 支持按投放地区切换法规版本（中国大陆 / 港澳台 / 海外）
* 不同地区规则库独立管理
* 切换时自动校验现有 Brief 与新规则的兼容性
* **舆情阈值设置：** 规则配置页面提供黑名单和白名单的管理功能。
* 调整 AI 对"油腻"、"性感"、"争议话题"的敏感度
* 支持 High / Medium / Low 三档
* 支持按平台差异化配置（抖音 vs 小红书）
* ⚠️ **提示：** 舆情风险仅作提示，不作为强制拦截依据
* **规则版本管理：** * **黑名单管理：**
* 规则变更历史可追溯（含变更人、变更时间、变更内容） * **违禁词列表：** 添加/编辑/删除违禁词
* 支持回滚到历史版本 * 支持批量导入导出
* 变更需审批生效（防止误操作） * 显示违禁词条数统计
* **平台规则同步：** 抖音/小红书规则变更时，系统在 1 工作日内更新并通知
* **白名单管理：**
* **豁免词列表：** 添加/编辑/删除豁免词
* 支持批量导入导出
* 显示豁免词条数统计
> **说明：** 其他高级规则配置（如区域合规、舆情阈值）在系统设置中进行配置
### 4.3 创建项目 (Create Project) ⭐ 新增 ### 4.3 创建项目 (Create Project) ⭐ 新增

316
frontend/app/agency/briefs/[id]/page.tsx Normal file
View File

@ -0,0 +1,316 @@
'use client'
import { useState } from 'react'
import { useRouter, useParams } from 'next/navigation'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import { SuccessTag, WarningTag, ErrorTag } from '@/components/ui/Tag'
import {
ArrowLeft,
FileText,
Upload,
CheckCircle,
Plus,
X,
Save,
Sparkles,
Target,
Ban,
AlertTriangle
} from 'lucide-react'
// 模拟 Brief 详情
const mockBrief = {
id: 'brief-001',
projectName: 'XX品牌618推广',
brandName: 'XX护肤品牌',
status: 'configured',
fileName: 'XX品牌618推广Brief.pdf',
uploadedAt: '2026-02-01',
configuredAt: '2026-02-02',
sellingPoints: [
{ id: 'sp1', content: 'SPF50+ PA++++', required: true },
{ id: 'sp2', content: '轻薄质地，不油腻', required: true },
{ id: 'sp3', content: '延展性好，易推开', required: false },
{ id: 'sp4', content: '适合敏感肌', required: false },
{ id: 'sp5', content: '夏日必备防晒', required: true },
],
blacklistWords: [
{ id: 'bw1', word: '最好', reason: '绝对化用语' },
{ id: 'bw2', word: '第一', reason: '绝对化用语' },
{ id: 'bw3', word: '神器', reason: '夸大宣传' },
{ id: 'bw4', word: '完美', reason: '绝对化用语' },
],
aiParsedContent: {
productName: 'XX品牌防晒霜',
targetAudience: '18-35岁女性',
contentRequirements: '需展示产品质地、使用效果',
restrictions: '不可提及竞品，不可使用绝对化用语',
},
}
export default function BriefConfigPage() {
const router = useRouter()
const params = useParams()
const [brief, setBrief] = useState(mockBrief)
const [newSellingPoint, setNewSellingPoint] = useState('')
const [newBlacklistWord, setNewBlacklistWord] = useState('')
const [isAIParsing, setIsAIParsing] = useState(false)
const [isSaving, setIsSaving] = useState(false)
const handleAIParse = async () => {
setIsAIParsing(true)
// 模拟 AI 解析
await new Promise(resolve => setTimeout(resolve, 2000))
setIsAIParsing(false)
alert('AI 解析完成！')
}
const addSellingPoint = () => {
if (!newSellingPoint.trim()) return
setBrief(prev => ({
...prev,
sellingPoints: [...prev.sellingPoints, { id: `sp${Date.now()}`, content: newSellingPoint, required: false }]
}))
setNewSellingPoint('')
}
const removeSellingPoint = (id: string) => {
setBrief(prev => ({
...prev,
sellingPoints: prev.sellingPoints.filter(sp => sp.id !== id)
}))
}
const toggleRequired = (id: string) => {
setBrief(prev => ({
...prev,
sellingPoints: prev.sellingPoints.map(sp =>
sp.id === id ? { ...sp, required: !sp.required } : sp
)
}))
}
const addBlacklistWord = () => {
if (!newBlacklistWord.trim()) return
setBrief(prev => ({
...prev,
blacklistWords: [...prev.blacklistWords, { id: `bw${Date.now()}`, word: newBlacklistWord, reason: '自定义' }]
}))
setNewBlacklistWord('')
}
const removeBlacklistWord = (id: string) => {
setBrief(prev => ({
...prev,
blacklistWords: prev.blacklistWords.filter(bw => bw.id !== id)
}))
}
const handleSave = async () => {
setIsSaving(true)
await new Promise(resolve => setTimeout(resolve, 1000))
setIsSaving(false)
alert('配置已保存！')
}
return (
<div className="space-y-6">
{/* 顶部导航 */}
<div className="flex items-center gap-4">
<button type="button" onClick={() => router.back()} className="p-2 hover:bg-bg-elevated rounded-full">
<ArrowLeft size={20} className="text-text-primary" />
</button>
<div className="flex-1">
<h1 className="text-xl font-bold text-text-primary">{brief.projectName}</h1>
<p className="text-sm text-text-secondary">{brief.brandName}</p>
</div>
<Button onClick={handleSave} disabled={isSaving}>
<Save size={16} />
{isSaving ? '保存中...' : '保存配置'}
</Button>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* 左侧：Brief 文件和 AI 解析 */}
<div className="lg:col-span-2 space-y-6">
{/* Brief 文件 */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<FileText size={18} className="text-accent-indigo" />
Brief 文件
</CardTitle>
</CardHeader>
<CardContent>
<div className="flex items-center justify-between p-4 bg-bg-elevated rounded-lg">
<div className="flex items-center gap-3">
<FileText size={32} className="text-accent-indigo" />
<div>
<p className="font-medium text-text-primary">{brief.fileName}</p>
<p className="text-sm text-text-secondary">上传于 {brief.uploadedAt}</p>
</div>
</div>
<div className="flex items-center gap-2">
<Button variant="secondary" size="sm">
预览
</Button>
<Button variant="secondary" size="sm">
<Upload size={14} />
重新上传
</Button>
</div>
</div>
</CardContent>
</Card>
{/* AI 解析结果 */}
<Card>
<CardHeader>
<CardTitle className="flex items-center justify-between">
<span className="flex items-center gap-2">
<Sparkles size={18} className="text-purple-400" />
AI 解析结果
</span>
<Button variant="secondary" size="sm" onClick={handleAIParse} disabled={isAIParsing}>
<Sparkles size={14} />
{isAIParsing ? '解析中...' : '重新解析'}
</Button>
</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 gap-4">
<div className="p-3 bg-bg-elevated rounded-lg">
<p className="text-xs text-text-tertiary mb-1">产品名称</p>
<p className="text-text-primary">{brief.aiParsedContent.productName}</p>
</div>
<div className="p-3 bg-bg-elevated rounded-lg">
<p className="text-xs text-text-tertiary mb-1">目标人群</p>
<p className="text-text-primary">{brief.aiParsedContent.targetAudience}</p>
</div>
<div className="p-3 bg-bg-elevated rounded-lg col-span-2">
<p className="text-xs text-text-tertiary mb-1">内容要求</p>
<p className="text-text-primary">{brief.aiParsedContent.contentRequirements}</p>
</div>
<div className="p-3 bg-bg-elevated rounded-lg col-span-2">
<p className="text-xs text-text-tertiary mb-1">限制条件</p>
<p className="text-text-primary">{brief.aiParsedContent.restrictions}</p>
</div>
</div>
</CardContent>
</Card>
{/* 卖点配置 */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Target size={18} className="text-accent-green" />
卖点配置
<span className="text-sm font-normal text-text-secondary ml-2">
{brief.sellingPoints.length} 个卖点
</span>
</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
{brief.sellingPoints.map((sp) => (
<div key={sp.id} className="flex items-center gap-3 p-3 bg-bg-elevated rounded-lg">
<button
type="button"
onClick={() => toggleRequired(sp.id)}
className={`px-2 py-1 text-xs rounded ${
sp.required ? 'bg-accent-coral/20 text-accent-coral' : 'bg-bg-page text-text-tertiary'
}`}
>
{sp.required ? '必选' : '可选'}
</button>
<span className="flex-1 text-text-primary">{sp.content}</span>
<button
type="button"
onClick={() => removeSellingPoint(sp.id)}
className="p-1 hover:bg-bg-page rounded"
>
<X size={16} className="text-text-tertiary" />
</button>
</div>
))}
<div className="flex gap-2">
<input
type="text"
value={newSellingPoint}
onChange={(e) => setNewSellingPoint(e.target.value)}
placeholder="添加新卖点..."
className="flex-1 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"
onKeyDown={(e) => e.key === 'Enter' && addSellingPoint()}
/>
<Button variant="secondary" onClick={addSellingPoint}>
<Plus size={16} />
添加
</Button>
</div>
</CardContent>
</Card>
</div>
{/* 右侧：违禁词配置 */}
<div className="space-y-6">
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Ban size={18} className="text-accent-coral" />
违禁词配置
<span className="text-sm font-normal text-text-secondary ml-2">
{brief.blacklistWords.length} 个
</span>
</CardTitle>
</CardHeader>
<CardContent className="space-y-2">
{brief.blacklistWords.map((bw) => (
<div key={bw.id} className="flex items-center justify-between p-3 bg-accent-coral/10 rounded-lg border border-accent-coral/30">
<div>
<span className="font-medium text-accent-coral">「{bw.word}」</span>
<span className="text-xs text-text-tertiary ml-2">{bw.reason}</span>
</div>
<button
type="button"
onClick={() => removeBlacklistWord(bw.id)}
className="p-1 hover:bg-accent-coral/20 rounded"
>
<X size={14} className="text-text-tertiary" />
</button>
</div>
))}
<div className="flex gap-2 mt-3">
<input
type="text"
value={newBlacklistWord}
onChange={(e) => setNewBlacklistWord(e.target.value)}
placeholder="添加违禁词..."
className="flex-1 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"
onKeyDown={(e) => e.key === 'Enter' && addBlacklistWord()}
/>
<Button variant="secondary" size="sm" onClick={addBlacklistWord}>
<Plus size={14} />
</Button>
</div>
</CardContent>
</Card>
{/* 配置提示 */}
<div className="p-4 bg-accent-indigo/10 rounded-lg border border-accent-indigo/30">
<div className="flex items-start gap-3">
<AlertTriangle size={20} className="text-accent-indigo flex-shrink-0 mt-0.5" />
<div>
<p className="text-sm text-accent-indigo font-medium">配置说明</p>
<ul className="text-xs text-accent-indigo/80 mt-1 space-y-1">
<li>• 必选卖点必须在内容中提及</li>
<li>• 违禁词会触发 AI 审核警告</li>
<li>• 修改配置后需重新保存</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
)
}

215
frontend/app/agency/briefs/page.tsx Normal file
View File

@ -0,0 +1,215 @@
'use client'
import { useState } from 'react'
import Link from 'next/link'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import { SuccessTag, PendingTag, WarningTag } from '@/components/ui/Tag'
import {
FileText,
Search,
Filter,
Clock,
CheckCircle,
AlertTriangle,
ChevronRight,
Settings
} from 'lucide-react'
// 模拟 Brief 列表
const mockBriefs = [
{
id: 'brief-001',
projectName: 'XX品牌618推广',
brandName: 'XX护肤品牌',
status: 'configured',
uploadedAt: '2026-02-01',
configuredAt: '2026-02-02',
creatorCount: 15,
sellingPoints: 5,
blacklistWords: 12,
},
{
id: 'brief-002',
projectName: '新品口红系列',
brandName: 'XX美妆品牌',
status: 'pending',
uploadedAt: '2026-02-05',
configuredAt: null,
creatorCount: 0,
sellingPoints: 0,
blacklistWords: 0,
},
{
id: 'brief-003',
projectName: '护肤品秋季活动',
brandName: 'XX护肤品牌',
status: 'configured',
uploadedAt: '2025-09-15',
configuredAt: '2025-09-16',
creatorCount: 10,
sellingPoints: 4,
blacklistWords: 8,
},
]
function StatusTag({ status }: { status: string }) {
if (status === 'configured') return <SuccessTag>已配置</SuccessTag>
if (status === 'pending') return <WarningTag>待配置</WarningTag>
return <PendingTag>处理中</PendingTag>
}
export default function AgencyBriefsPage() {
const [searchQuery, setSearchQuery] = useState('')
const [statusFilter, setStatusFilter] = useState<string>('all')
const filteredBriefs = mockBriefs.filter(brief => {
const matchesSearch = brief.projectName.toLowerCase().includes(searchQuery.toLowerCase()) ||
brief.brandName.toLowerCase().includes(searchQuery.toLowerCase())
const matchesStatus = statusFilter === 'all' || brief.status === statusFilter
return matchesSearch && matchesStatus
})
const pendingCount = mockBriefs.filter(b => b.status === 'pending').length
const configuredCount = mockBriefs.filter(b => b.status === 'configured').length
return (
<div className="space-y-6">
{/* 页面标题 */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-text-primary">Brief 配置</h1>
<p className="text-sm text-text-secondary mt-1">配置项目 Brief，设置审核规则</p>
</div>
<div className="flex items-center gap-2 text-sm">
<span className="px-3 py-1.5 bg-yellow-500/20 text-yellow-400 rounded-lg font-medium">
{pendingCount} 待配置
</span>
<span className="px-3 py-1.5 bg-accent-green/20 text-accent-green rounded-lg font-medium">
{configuredCount} 已配置
</span>
</div>
</div>
{/* 搜索和筛选 */}
<div className="flex items-center gap-4">
<div className="relative flex-1 max-w-md">
<Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary" />
<input
type="text"
placeholder="搜索项目名称或品牌..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full pl-10 pr-4 py-2 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
/>
</div>
<div className="flex items-center gap-1 p-1 bg-bg-elevated rounded-lg">
<button
type="button"
onClick={() => setStatusFilter('all')}
className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
statusFilter === 'all' ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary'
}`}
>
全部
</button>
<button
type="button"
onClick={() => setStatusFilter('pending')}
className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
statusFilter === 'pending' ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary'
}`}
>
待配置
</button>
<button
type="button"
onClick={() => setStatusFilter('configured')}
className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
statusFilter === 'configured' ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary'
}`}
>
已配置
</button>
</div>
</div>
{/* 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>
</div>
<div className="flex items-center gap-8">
{brief.status === 'configured' && (
<div className="flex items-center gap-6 text-sm">
<div className="text-center">
<div className="text-lg font-bold text-text-primary">{brief.sellingPoints}</div>
<div className="text-text-tertiary">卖点</div>
</div>
<div className="text-center">
<div className="text-lg font-bold text-text-primary">{brief.blacklistWords}</div>
<div className="text-text-tertiary">违禁词</div>
</div>
<div className="text-center">
<div className="text-lg font-bold text-text-primary">{brief.creatorCount}</div>
<div className="text-text-tertiary">达人</div>
</div>
</div>
)}
<Button variant={brief.status === 'pending' ? 'primary' : 'secondary'} size="sm">
{brief.status === 'pending' ? (
<>
<Settings size={14} />
去配置
</>
) : (
<>
查看详情
<ChevronRight size={14} />
</>
)}
</Button>
</div>
</div>
</CardContent>
</Card>
</Link>
))}
</div>
{filteredBriefs.length === 0 && (
<div className="text-center py-16">
<FileText size={48} className="mx-auto text-text-tertiary opacity-50 mb-4" />
<p className="text-text-secondary">暂无匹配的 Brief</p>
</div>
)}
</div>
)
}

441
frontend/app/agency/creators/page.tsx Normal file
View File

@ -0,0 +1,441 @@
'use client'
import { useState } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import { Modal } from '@/components/ui/Modal'
import { SuccessTag, PendingTag, WarningTag } from '@/components/ui/Tag'
import {
Search,
Plus,
Users,
TrendingUp,
TrendingDown,
Mail,
Copy,
CheckCircle,
Clock,
MoreVertical,
FileText,
Video,
ChevronDown,
ChevronRight,
PlusCircle
} from 'lucide-react'
// 任务类型
interface CreatorTask {
id: string
name: string
appealRemaining: number
appealUsed: number
status: 'in_progress' | 'completed'
}
// 达人类型
interface Creator {
id: string
name: string
email: string
avatar: null
status: string
projectCount: number
scriptCount: { total: number; passed: number }
videoCount: { total: number; passed: number }
passRate: number
trend: string
joinedAt: string
tasks: CreatorTask[]
}
// 模拟达人列表
const mockCreators: Creator[] = [
{
id: 'creator-001',
name: '小美护肤',
email: 'xiaomei@example.com',
avatar: null,
status: 'active',
projectCount: 5,
scriptCount: { total: 12, passed: 10 },
videoCount: { total: 10, passed: 8 },
passRate: 85,
trend: 'up',
joinedAt: '2025-08-15',
tasks: [
{ id: 'task-001', name: '夏日护肤推广', appealRemaining: 1, appealUsed: 0, status: 'in_progress' },
{ id: 'task-002', name: '防晒霜测评', appealRemaining: 0, appealUsed: 1, status: 'in_progress' },
],
},
{
id: 'creator-002',
name: '美妆Lisa',
email: 'lisa@example.com',
avatar: null,
status: 'active',
projectCount: 3,
scriptCount: { total: 8, passed: 7 },
videoCount: { total: 6, passed: 5 },
passRate: 80,
trend: 'stable',
joinedAt: '2025-10-20',
tasks: [
{ id: 'task-003', name: '新品口红试色', appealRemaining: 2, appealUsed: 0, status: 'in_progress' },
],
},
{
id: 'creator-003',
name: '健身教练王',
email: 'wang@example.com',
avatar: null,
status: 'active',
projectCount: 2,
scriptCount: { total: 5, passed: 5 },
videoCount: { total: 4, passed: 4 },
passRate: 100,
trend: 'up',
joinedAt: '2025-12-01',
tasks: [
{ id: 'task-004', name: '健身器材使用教程', appealRemaining: 1, appealUsed: 0, status: 'in_progress' },
],
},
{
id: 'creator-004',
name: '时尚达人',
email: 'fashion@example.com',
avatar: null,
status: 'pending',
projectCount: 0,
scriptCount: { total: 0, passed: 0 },
videoCount: { total: 0, passed: 0 },
passRate: 0,
trend: 'stable',
joinedAt: '2026-02-05',
tasks: [],
},
]
function StatusTag({ status }: { status: string }) {
if (status === 'active') return <SuccessTag>已激活</SuccessTag>
if (status === 'pending') return <PendingTag>待接受</PendingTag>
return <WarningTag>已暂停</WarningTag>
}
export default function AgencyCreatorsPage() {
const [searchQuery, setSearchQuery] = useState('')
const [showInviteModal, setShowInviteModal] = useState(false)
const [inviteEmail, setInviteEmail] = useState('')
const [inviteLink, setInviteLink] = useState('')
const [expandedCreators, setExpandedCreators] = useState<string[]>([])
const [creators, setCreators] = useState(mockCreators)
const filteredCreators = creators.filter(creator =>
creator.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
creator.email.toLowerCase().includes(searchQuery.toLowerCase())
)
// 切换展开状态
const toggleExpand = (creatorId: string) => {
setExpandedCreators(prev =>
prev.includes(creatorId)
? prev.filter(id => id !== creatorId)
: [...prev, creatorId]
)
}
// 增加申诉次数
const handleAddAppealQuota = (creatorId: string, taskId: string) => {
setCreators(prev => prev.map(creator => {
if (creator.id === creatorId) {
return {
...creator,
tasks: creator.tasks.map(task => {
if (task.id === taskId) {
return { ...task, appealRemaining: task.appealRemaining + 1 }
}
return task
}),
}
}
return creator
}))
}
const handleInvite = () => {
if (!inviteEmail.trim()) {
alert('请输入达人邮箱')
return
}
const link = `https://miaosi.app/invite/creator/${Date.now()}`
setInviteLink(link)
}
const handleCopyLink = () => {
navigator.clipboard.writeText(inviteLink)
alert('链接已复制')
}
const handleSendInvite = () => {
alert(`邀请已发送至 ${inviteEmail}`)
setShowInviteModal(false)
setInviteEmail('')
setInviteLink('')
}
return (
<div className="space-y-6">
{/* 页面标题 */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-text-primary">达人管理</h1>
<p className="text-sm text-text-secondary mt-1">管理合作达人，查看达人绩效数据</p>
</div>
<Button onClick={() => setShowInviteModal(true)}>
<Plus size={16} />
邀请达人
</Button>
</div>
{/* 统计卡片 */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<Card>
<CardContent className="py-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-text-secondary">总达人数</p>
<p className="text-2xl font-bold text-text-primary">{mockCreators.length}</p>
</div>
<div className="w-10 h-10 rounded-lg bg-accent-indigo/20 flex items-center justify-center">
<Users size={20} className="text-accent-indigo" />
</div>
</div>
</CardContent>
</Card>
<Card>
<CardContent className="py-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-text-secondary">已激活</p>
<p className="text-2xl font-bold text-accent-green">{mockCreators.filter(c => c.status === 'active').length}</p>
</div>
<div className="w-10 h-10 rounded-lg bg-accent-green/20 flex items-center justify-center">
<CheckCircle size={20} className="text-accent-green" />
</div>
</div>
</CardContent>
</Card>
<Card>
<CardContent className="py-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-text-secondary">总脚本数</p>
<p className="text-2xl font-bold text-text-primary">{mockCreators.reduce((sum, c) => sum + c.scriptCount.total, 0)}</p>
</div>
<div className="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center">
<FileText size={20} className="text-purple-400" />
</div>
</div>
</CardContent>
</Card>
<Card>
<CardContent className="py-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-text-secondary">总视频数</p>
<p className="text-2xl font-bold text-text-primary">{mockCreators.reduce((sum, c) => sum + c.videoCount.total, 0)}</p>
</div>
<div className="w-10 h-10 rounded-lg bg-orange-500/20 flex items-center justify-center">
<Video size={20} className="text-orange-400" />
</div>
</div>
</CardContent>
</Card>
</div>
{/* 搜索 */}
<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="搜索达人名称或邮箱..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full pl-10 pr-4 py-2 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
/>
</div>
{/* 达人列表 */}
<Card>
<CardContent className="p-0">
<table className="w-full">
<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>
<th className="px-6 py-4 font-medium">状态</th>
<th className="px-6 py-4 font-medium">项目数</th>
<th className="px-6 py-4 font-medium">脚本</th>
<th className="px-6 py-4 font-medium">视频</th>
<th className="px-6 py-4 font-medium">通过率</th>
<th className="px-6 py-4 font-medium">加入时间</th>
<th className="px-6 py-4 font-medium">操作</th>
</tr>
</thead>
<tbody>
{filteredCreators.map((creator) => {
const isExpanded = expandedCreators.includes(creator.id)
const hasActiveTasks = creator.tasks.filter(t => t.status === 'in_progress').length > 0
return (
<>
<tr key={creator.id} className="border-b border-border-subtle hover:bg-bg-elevated/50">
<td className="px-6 py-4">
<div className="flex items-center gap-3">
{/* 展开按钮 */}
{hasActiveTasks ? (
<button
type="button"
onClick={() => toggleExpand(creator.id)}
className="w-6 h-6 rounded flex items-center justify-center hover:bg-bg-elevated"
>
{isExpanded ? (
<ChevronDown size={16} className="text-text-secondary" />
) : (
<ChevronRight size={16} className="text-text-secondary" />
)}
</button>
) : (
<div className="w-6" />
)}
<div className="w-10 h-10 rounded-full bg-accent-indigo/20 flex items-center justify-center">
<span className="text-accent-indigo font-medium">{creator.name[0]}</span>
</div>
<div>
<div className="font-medium text-text-primary">{creator.name}</div>
<div className="text-sm text-text-tertiary">{creator.email}</div>
</div>
</div>
</td>
<td className="px-6 py-4">
<StatusTag status={creator.status} />
</td>
<td className="px-6 py-4 text-text-primary">{creator.projectCount}</td>
<td className="px-6 py-4">
<span className="text-text-primary">{creator.scriptCount.passed}</span>
<span className="text-text-tertiary">/{creator.scriptCount.total}</span>
</td>
<td className="px-6 py-4">
<span className="text-text-primary">{creator.videoCount.passed}</span>
<span className="text-text-tertiary">/{creator.videoCount.total}</span>
</td>
<td className="px-6 py-4">
{creator.status === 'active' && creator.passRate > 0 ? (
<div className="flex items-center gap-2">
<span className={`font-medium ${creator.passRate >= 90 ? 'text-accent-green' : creator.passRate >= 80 ? 'text-accent-indigo' : 'text-orange-400'}`}>
{creator.passRate}%
</span>
{creator.trend === 'up' && <TrendingUp size={14} className="text-accent-green" />}
{creator.trend === 'down' && <TrendingDown size={14} className="text-accent-coral" />}
</div>
) : (
<span className="text-text-tertiary">-</span>
)}
</td>
<td className="px-6 py-4 text-sm text-text-tertiary">{creator.joinedAt}</td>
<td className="px-6 py-4">
<Button variant="ghost" size="sm">
<MoreVertical size={16} />
</Button>
</td>
</tr>
{/* 展开的任务申诉次数管理区域 */}
{isExpanded && hasActiveTasks && (
<tr key={`${creator.id}-tasks`} className="bg-bg-elevated/30">
<td colSpan={8} className="px-6 py-4">
<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.filter(t => t.status === 'in_progress').map(task => (
<div key={task.id} className="flex items-center justify-between p-3 bg-bg-card rounded-lg">
<div className="flex items-center gap-4">
<span className="text-sm font-medium text-text-primary">{task.name}</span>
<div className="flex items-center gap-2 text-xs text-text-tertiary">
<span>剩余: <span className="text-accent-indigo font-medium">{task.appealRemaining}</span></span>
<span>|</span>
<span>已用: {task.appealUsed}</span>
</div>
</div>
<Button
variant="secondary"
size="sm"
onClick={() => handleAddAppealQuota(creator.id, task.id)}
>
<PlusCircle size={14} />
+1 次
</Button>
</div>
))}
</div>
</div>
</td>
</tr>
)}
</>
)
})}
</tbody>
</table>
</CardContent>
</Card>
{/* 邀请达人弹窗 */}
<Modal isOpen={showInviteModal} onClose={() => { setShowInviteModal(false); setInviteEmail(''); setInviteLink(''); }} title="邀请达人">
<div className="space-y-4">
<p className="text-text-secondary text-sm">输入达人邮箱，系统将发送邀请链接。</p>
<div>
<label className="block text-sm font-medium text-text-primary mb-1">达人邮箱</label>
<div className="flex gap-2">
<input
type="email"
value={inviteEmail}
onChange={(e) => setInviteEmail(e.target.value)}
placeholder="creator@example.com"
className="flex-1 px-4 py-2 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
/>
<Button variant="secondary" onClick={handleInvite}>
生成链接
</Button>
</div>
</div>
{inviteLink && (
<div className="p-4 bg-bg-elevated rounded-lg">
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium text-text-primary">邀请链接</span>
<button
type="button"
onClick={handleCopyLink}
className="flex items-center gap-1 text-sm text-accent-indigo hover:underline"
>
<Copy size={14} />
复制
</button>
</div>
<p className="text-sm text-text-secondary break-all">{inviteLink}</p>
</div>
)}
<div className="flex gap-3 justify-end pt-4">
<Button variant="ghost" onClick={() => { setShowInviteModal(false); setInviteEmail(''); setInviteLink(''); }}>
取消
</Button>
<Button onClick={handleSendInvite} disabled={!inviteEmail.trim()}>
<Mail size={16} />
发送邀请
</Button>
</div>
</div>
</Modal>
</div>
)
}

315
frontend/app/agency/messages/page.tsx Normal file
View File

@ -0,0 +1,315 @@
'use client'
import { useState } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import { SuccessTag, WarningTag, ErrorTag, PendingTag } from '@/components/ui/Tag'
import {
Bell,
CheckCircle,
XCircle,
AlertTriangle,
FileText,
Video,
Users,
Clock,
Check,
MoreVertical,
PlusCircle
} from 'lucide-react'
// 消息类型
interface Message {
id: string
type: string
title: string
content: string
time: string
read: boolean
icon: typeof Bell
iconColor: string
bgColor: string
// 申诉次数请求专用字段
appealRequest?: {
creatorName: string
taskName: string
taskId: string
status: 'pending' | 'approved' | 'rejected'
}
}
// 模拟消息列表
const mockMessages: Message[] = [
{
id: 'msg-001',
type: 'appeal_quota_request',
title: '申诉次数申请',
content: '达人「李小红」申请增加「618美妆推广视频」的申诉次数',
time: '5分钟前',
read: false,
icon: PlusCircle,
iconColor: 'text-accent-amber',
bgColor: 'bg-accent-amber/20',
appealRequest: {
creatorName: '李小红',
taskName: '618美妆推广视频',
taskId: 'task-001',
status: 'pending',
},
},
{
id: 'msg-002',
type: 'task_submitted',
title: '新脚本提交',
content: '达人「小美护肤」提交了「夏日护肤推广脚本」，请及时审核。',
time: '10分钟前',
read: false,
icon: FileText,
iconColor: 'text-accent-indigo',
bgColor: 'bg-accent-indigo/20',
},
{
id: 'msg-003',
type: 'appeal_quota_request',
title: '申诉次数申请',
content: '达人「美妆达人小王」申请增加「双11护肤品种草」的申诉次数',
time: '30分钟前',
read: false,
icon: PlusCircle,
iconColor: 'text-accent-amber',
bgColor: 'bg-accent-amber/20',
appealRequest: {
creatorName: '美妆达人小王',
taskName: '双11护肤品种草',
taskId: 'task-002',
status: 'pending',
},
},
{
id: 'msg-004',
type: 'review_complete',
title: '品牌终审通过',
content: '「新品口红试色」视频已通过品牌方终审。',
time: '1小时前',
read: false,
icon: CheckCircle,
iconColor: 'text-accent-green',
bgColor: 'bg-accent-green/20',
},
{
id: 'msg-005',
type: 'review_rejected',
title: '品牌终审驳回',
content: '「健身器材开箱」视频被品牌方驳回，原因：违禁词使用。',
time: '2小时前',
read: false,
icon: XCircle,
iconColor: 'text-accent-coral',
bgColor: 'bg-accent-coral/20',
},
{
id: 'msg-006',
type: 'new_project',
title: '新项目邀请',
content: '您被邀请参与「XX品牌新品推广」项目，请配置 Brief。',
time: '昨天',
read: true,
icon: Users,
iconColor: 'text-purple-400',
bgColor: 'bg-purple-500/20',
},
{
id: 'msg-007',
type: 'warning',
title: '风险预警',
content: '达人「美妆Lisa」连续2次提交被驳回，建议关注。',
time: '昨天',
read: true,
icon: AlertTriangle,
iconColor: 'text-orange-400',
bgColor: 'bg-orange-500/20',
},
{
id: 'msg-008',
type: 'task_submitted',
title: '新视频提交',
content: '达人「健身教练王」提交了「健身器材使用教程」视频，请及时审核。',
time: '2天前',
read: true,
icon: Video,
iconColor: 'text-purple-400',
bgColor: 'bg-purple-500/20',
},
]
export default function AgencyMessagesPage() {
const [messages, setMessages] = useState(mockMessages)
const [filter, setFilter] = useState<'all' | 'unread'>('all')
const unreadCount = messages.filter(m => !m.read).length
const pendingAppealRequests = messages.filter(m => m.appealRequest?.status === 'pending').length
const filteredMessages = filter === 'all' ? messages : messages.filter(m => !m.read)
const markAsRead = (id: string) => {
setMessages(prev => prev.map(m => m.id === id ? { ...m, read: true } : m))
}
const markAllAsRead = () => {
setMessages(prev => prev.map(m => ({ ...m, read: true })))
}
// 处理申诉次数请求
const handleAppealRequest = (messageId: string, action: 'approve' | 'reject') => {
setMessages(prev => prev.map(m => {
if (m.id === messageId && m.appealRequest) {
return {
...m,
read: true,
appealRequest: {
...m.appealRequest,
status: action === 'approve' ? 'approved' : 'rejected',
},
}
}
return m
}))
}
return (
<div className="space-y-6">
{/* 页面标题 */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<h1 className="text-2xl font-bold text-text-primary">消息中心</h1>
{unreadCount > 0 && (
<span className="px-2 py-1 bg-accent-coral/20 text-accent-coral text-sm font-medium rounded-lg">
{unreadCount} 条未读
</span>
)}
</div>
<Button variant="secondary" onClick={markAllAsRead} disabled={unreadCount === 0}>
<Check size={16} />
全部已读
</Button>
</div>
{/* 筛选 */}
<div className="flex items-center gap-1 p-1 bg-bg-elevated rounded-lg w-fit">
<button
type="button"
onClick={() => setFilter('all')}
className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
filter === 'all' ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary'
}`}
>
全部消息
</button>
<button
type="button"
onClick={() => setFilter('unread')}
className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
filter === 'unread' ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary'
}`}
>
未读消息 ({unreadCount})
</button>
</div>
{/* 消息列表 */}
<div className="space-y-3">
{filteredMessages.map((message) => {
const Icon = message.icon
const isAppealRequest = message.type === 'appeal_quota_request'
const appealStatus = message.appealRequest?.status
return (
<Card
key={message.id}
className={`transition-all ${
!isAppealRequest ? 'cursor-pointer hover:border-accent-indigo/50' : ''
} ${!message.read ? 'border-l-4 border-l-accent-indigo' : ''}`}
onClick={() => !isAppealRequest && markAsRead(message.id)}
>
<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`}>
<Icon size={20} className={message.iconColor} />
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<h3 className={`font-medium ${!message.read ? 'text-text-primary' : 'text-text-secondary'}`}>
{message.title}
</h3>
{!message.read && (
<span className="w-2 h-2 bg-accent-coral rounded-full" />
)}
{/* 申诉请求状态标签 */}
{isAppealRequest && appealStatus === 'approved' && (
<span className="px-2 py-0.5 bg-accent-green/15 text-accent-green text-xs font-medium rounded-full">
已同意
</span>
)}
{isAppealRequest && appealStatus === 'rejected' && (
<span className="px-2 py-0.5 bg-accent-coral/15 text-accent-coral text-xs font-medium rounded-full">
已拒绝
</span>
)}
</div>
<p className="text-sm text-text-secondary mt-1">{message.content}</p>
<p className="text-xs text-text-tertiary mt-2 flex items-center gap-1">
<Clock size={12} />
{message.time}
</p>
{/* 申诉次数请求操作按钮 */}
{isAppealRequest && appealStatus === 'pending' && (
<div className="flex items-center gap-2 mt-3">
<Button
variant="primary"
size="sm"
onClick={(e) => {
e.stopPropagation()
handleAppealRequest(message.id, 'approve')
}}
>
<CheckCircle size={14} />
同意 (+1次)
</Button>
<Button
variant="secondary"
size="sm"
onClick={(e) => {
e.stopPropagation()
handleAppealRequest(message.id, 'reject')
}}
>
<XCircle size={14} />
拒绝
</Button>
</div>
)}
</div>
{!isAppealRequest && (
<Button variant="ghost" size="sm" onClick={(e) => e.stopPropagation()}>
<MoreVertical size={16} />
</Button>
)}
</div>
</CardContent>
</Card>
)
})}
</div>
{filteredMessages.length === 0 && (
<div className="text-center py-16">
<Bell size={48} className="mx-auto text-text-tertiary opacity-50 mb-4" />
<p className="text-text-secondary">
{filter === 'unread' ? '没有未读消息' : '暂无消息'}
</p>
</div>
)}
</div>
)
}

298
frontend/app/agency/reports/page.tsx Normal file
View File

@ -0,0 +1,298 @@
'use client'
import { useState } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import {
BarChart3,
TrendingUp,
TrendingDown,
Download,
Calendar,
FileText,
Video,
Users,
CheckCircle,
XCircle,
Clock
} from 'lucide-react'
// 模拟数据
const mockStats = {
totalScripts: 156,
totalVideos: 128,
passRate: 85,
avgReviewTime: 4.2,
trend: {
scripts: '+12%',
videos: '+8%',
passRate: '+3%',
reviewTime: '-15%',
},
}
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 },
]
const mockWeeklyData = [
{ day: '周一', submitted: 25, passed: 22, rejected: 3 },
{ day: '周二', submitted: 32, passed: 28, rejected: 4 },
{ day: '周三', submitted: 18, passed: 16, rejected: 2 },
{ day: '周四', submitted: 41, passed: 35, rejected: 6 },
{ day: '周五', submitted: 35, passed: 30, rejected: 5 },
{ day: '周六', submitted: 12, passed: 11, rejected: 1 },
{ day: '周日', submitted: 8, passed: 7, rejected: 1 },
]
const mockCreatorRanking = [
{ name: '小美护肤', passRate: 95, total: 28 },
{ name: '健身教练王', passRate: 92, total: 15 },
{ name: '美妆Lisa', passRate: 88, total: 22 },
{ name: '时尚达人', passRate: 82, total: 18 },
{ name: '美食探店', passRate: 78, total: 25 },
]
function StatCard({ title, value, unit, trend, icon: Icon, color }: {
title: string
value: number | string
unit?: string
trend?: string
icon: React.ElementType
color: string
}) {
const isPositive = trend?.startsWith('+') || trend?.startsWith('-') && title.includes('时间')
return (
<Card>
<CardContent className="py-4">
<div className="flex items-start justify-between">
<div>
<p className="text-sm text-text-secondary">{title}</p>
<div className="flex items-baseline gap-1 mt-1">
<span className={`text-2xl font-bold ${color}`}>{value}</span>
{unit && <span className="text-text-secondary">{unit}</span>}
</div>
{trend && (
<div className={`flex items-center gap-1 mt-1 text-xs ${isPositive ? 'text-accent-green' : 'text-accent-coral'}`}>
{isPositive ? <TrendingUp size={12} /> : <TrendingDown size={12} />}
{trend} vs 上周
</div>
)}
</div>
<div className={`w-10 h-10 rounded-lg ${color.replace('text-', 'bg-')}/20 flex items-center justify-center`}>
<Icon size={20} className={color} />
</div>
</div>
</CardContent>
</Card>
)
}
export default function AgencyReportsPage() {
const [dateRange, setDateRange] = useState('week')
return (
<div className="space-y-6">
{/* 页面标题 */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-text-primary">数据报表</h1>
<p className="text-sm text-text-secondary mt-1">查看审核数据统计和趋势分析</p>
</div>
<div className="flex items-center gap-3">
<div className="flex items-center gap-1 p-1 bg-bg-elevated rounded-lg">
<button
type="button"
onClick={() => setDateRange('week')}
className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
dateRange === 'week' ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary'
}`}
>
本周
</button>
<button
type="button"
onClick={() => setDateRange('month')}
className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
dateRange === 'month' ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary'
}`}
>
本月
</button>
<button
type="button"
onClick={() => setDateRange('quarter')}
className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
dateRange === 'quarter' ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary'
}`}
>
本季度
</button>
</div>
<Button variant="secondary">
<Download size={16} />
导出报表
</Button>
</div>
</div>
{/* 核心指标 */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<StatCard
title="脚本审核量"
value={mockStats.totalScripts}
trend={mockStats.trend.scripts}
icon={FileText}
color="text-accent-indigo"
/>
<StatCard
title="视频审核量"
value={mockStats.totalVideos}
trend={mockStats.trend.videos}
icon={Video}
color="text-purple-400"
/>
<StatCard
title="通过率"
value={mockStats.passRate}
unit="%"
trend={mockStats.trend.passRate}
icon={CheckCircle}
color="text-accent-green"
/>
<StatCard
title="平均审核时长"
value={mockStats.avgReviewTime}
unit="小时"
trend={mockStats.trend.reviewTime}
icon={Clock}
color="text-orange-400"
/>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* 本周趋势 */}
<Card className="lg:col-span-2">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<BarChart3 size={18} className="text-blue-500" />
审核趋势
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
{mockWeeklyData.map((day) => (
<div key={day.day} className="flex items-center gap-4">
<div className="w-12 text-sm text-text-secondary font-medium">{day.day}</div>
<div className="flex-1">
<div className="flex h-6 rounded-full overflow-hidden bg-bg-elevated">
<div
className="bg-accent-green transition-all"
style={{ width: `${(day.passed / day.submitted) * 100}%` }}
/>
<div
className="bg-accent-coral transition-all"
style={{ width: `${(day.rejected / day.submitted) * 100}%` }}
/>
</div>
</div>
<div className="w-24 text-right text-sm">
<span className="text-accent-green font-medium">{day.passed}</span>
<span className="text-text-tertiary"> / </span>
<span className="text-text-secondary">{day.submitted}</span>
</div>
</div>
))}
</div>
<div className="flex gap-6 mt-4 text-sm">
<div className="flex items-center gap-2">
<div className="w-3 h-3 bg-accent-green rounded" />
<span className="text-text-secondary">通过</span>
</div>
<div className="flex items-center gap-2">
<div className="w-3 h-3 bg-accent-coral rounded" />
<span className="text-text-secondary">驳回</span>
</div>
</div>
</CardContent>
</Card>
{/* 达人排名 */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Users size={18} className="text-accent-indigo" />
达人通过率排名
</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
{mockCreatorRanking.map((creator, index) => (
<div key={creator.name} className="flex items-center gap-3 p-3 rounded-lg bg-bg-elevated">
<div className={`w-7 h-7 rounded-full flex items-center justify-center text-sm font-bold ${
index === 0 ? 'bg-yellow-500/20 text-yellow-400' :
index === 1 ? 'bg-gray-500/20 text-gray-400' :
index === 2 ? 'bg-orange-500/20 text-orange-400' : 'bg-bg-page text-text-tertiary'
}`}>
{index + 1}
</div>
<div className="flex-1 min-w-0">
<div className="font-medium text-text-primary truncate">{creator.name}</div>
<div className="text-xs text-text-tertiary">{creator.total} 条审核</div>
</div>
<div className={`font-bold ${creator.passRate >= 90 ? 'text-accent-green' : creator.passRate >= 80 ? 'text-accent-indigo' : 'text-orange-400'}`}>
{creator.passRate}%
</div>
</div>
))}
</CardContent>
</Card>
</div>
{/* 项目统计 */}
<Card>
<CardHeader>
<CardTitle>项目统计</CardTitle>
</CardHeader>
<CardContent>
<table className="w-full">
<thead>
<tr className="border-b border-border-subtle text-left text-sm text-text-secondary">
<th className="pb-3 font-medium">项目名称</th>
<th className="pb-3 font-medium text-center">脚本数</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">通过率分布</th>
</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>
))}
</tbody>
</table>
</CardContent>
</Card>
</div>
)
}

257
frontend/app/agency/review/page.tsx Normal file
View File

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

358
frontend/app/agency/review/script/[id]/page.tsx Normal file
View File

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

421
frontend/app/agency/review/video/[id]/page.tsx Normal file
View File

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

298
frontend/app/brand/agencies/page.tsx Normal file
View File

@ -0,0 +1,298 @@
'use client'
import { useState } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import { Modal } from '@/components/ui/Modal'
import { SuccessTag, PendingTag, WarningTag } from '@/components/ui/Tag'
import {
Search,
Plus,
Users,
TrendingUp,
TrendingDown,
Mail,
Copy,
CheckCircle,
Clock,
MoreVertical
} from 'lucide-react'
// 模拟代理商列表
const mockAgencies = [
{
id: 'agency-001',
name: '星耀传媒',
email: 'contact@xingyao.com',
status: 'active',
creatorCount: 50,
projectCount: 8,
passRate: 92,
trend: 'up',
joinedAt: '2025-06-15',
},
{
id: 'agency-002',
name: '创意无限',
email: 'hello@chuangyi.com',
status: 'active',
creatorCount: 35,
projectCount: 5,
passRate: 88,
trend: 'up',
joinedAt: '2025-08-20',
},
{
id: 'agency-003',
name: '美妆达人MCN',
email: 'biz@meizhuang.com',
status: 'active',
creatorCount: 28,
projectCount: 4,
passRate: 75,
trend: 'down',
joinedAt: '2025-10-10',
},
{
id: 'agency-004',
name: '时尚风向标',
email: 'info@shishang.com',
status: 'pending',
creatorCount: 0,
projectCount: 0,
passRate: 0,
trend: 'stable',
joinedAt: '2026-02-01',
},
]
function StatusTag({ status }: { status: string }) {
if (status === 'active') return <SuccessTag>已激活</SuccessTag>
if (status === 'pending') return <PendingTag>待接受</PendingTag>
return <WarningTag>已暂停</WarningTag>
}
export default function AgenciesManagePage() {
const [searchQuery, setSearchQuery] = useState('')
const [showInviteModal, setShowInviteModal] = useState(false)
const [inviteEmail, setInviteEmail] = useState('')
const [inviteLink, setInviteLink] = useState('')
const filteredAgencies = mockAgencies.filter(agency =>
agency.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
agency.email.toLowerCase().includes(searchQuery.toLowerCase())
)
const handleInvite = () => {
if (!inviteEmail.trim()) {
alert('请输入代理商邮箱')
return
}
// 模拟生成邀请链接
const link = `https://miaosi.app/invite/agency/${Date.now()}`
setInviteLink(link)
}
const handleCopyLink = () => {
navigator.clipboard.writeText(inviteLink)
alert('链接已复制')
}
const handleSendInvite = () => {
alert(`邀请已发送至 ${inviteEmail}`)
setShowInviteModal(false)
setInviteEmail('')
setInviteLink('')
}
return (
<div className="space-y-6">
{/* 页面标题 */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-text-primary">代理商管理</h1>
<p className="text-sm text-text-secondary mt-1">管理合作代理商，查看代理商绩效数据</p>
</div>
<Button onClick={() => setShowInviteModal(true)}>
<Plus size={16} />
邀请代理商
</Button>
</div>
{/* 统计卡片 */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<Card>
<CardContent className="py-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-text-secondary">总代理商</p>
<p className="text-2xl font-bold text-text-primary">{mockAgencies.length}</p>
</div>
<div className="w-10 h-10 rounded-lg bg-accent-indigo/20 flex items-center justify-center">
<Users size={20} className="text-accent-indigo" />
</div>
</div>
</CardContent>
</Card>
<Card>
<CardContent className="py-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-text-secondary">已激活</p>
<p className="text-2xl font-bold text-accent-green">{mockAgencies.filter(a => a.status === 'active').length}</p>
</div>
<div className="w-10 h-10 rounded-lg bg-accent-green/20 flex items-center justify-center">
<CheckCircle size={20} className="text-accent-green" />
</div>
</div>
</CardContent>
</Card>
<Card>
<CardContent className="py-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-text-secondary">待接受</p>
<p className="text-2xl font-bold text-yellow-400">{mockAgencies.filter(a => a.status === 'pending').length}</p>
</div>
<div className="w-10 h-10 rounded-lg bg-yellow-500/20 flex items-center justify-center">
<Clock size={20} className="text-yellow-400" />
</div>
</div>
</CardContent>
</Card>
<Card>
<CardContent className="py-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-text-secondary">平均通过率</p>
<p className="text-2xl font-bold text-text-primary">
{Math.round(mockAgencies.filter(a => a.status === 'active').reduce((sum, a) => sum + a.passRate, 0) / mockAgencies.filter(a => a.status === 'active').length)}%
</p>
</div>
<div className="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center">
<TrendingUp size={20} className="text-purple-400" />
</div>
</div>
</CardContent>
</Card>
</div>
{/* 搜索 */}
<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="搜索代理商名称或邮箱..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full pl-10 pr-4 py-2 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
/>
</div>
{/* 代理商列表 */}
<Card>
<CardContent className="p-0">
<table className="w-full">
<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>
<th className="px-6 py-4 font-medium">状态</th>
<th className="px-6 py-4 font-medium">达人数</th>
<th className="px-6 py-4 font-medium">项目数</th>
<th className="px-6 py-4 font-medium">通过率</th>
<th className="px-6 py-4 font-medium">加入时间</th>
<th className="px-6 py-4 font-medium">操作</th>
</tr>
</thead>
<tbody>
{filteredAgencies.map((agency) => (
<tr key={agency.id} className="border-b border-border-subtle last:border-0 hover:bg-bg-elevated/50">
<td className="px-6 py-4">
<div>
<div className="font-medium text-text-primary">{agency.name}</div>
<div className="text-sm text-text-tertiary">{agency.email}</div>
</div>
</td>
<td className="px-6 py-4">
<StatusTag status={agency.status} />
</td>
<td className="px-6 py-4 text-text-primary">{agency.creatorCount}</td>
<td className="px-6 py-4 text-text-primary">{agency.projectCount}</td>
<td className="px-6 py-4">
{agency.status === 'active' ? (
<div className="flex items-center gap-2">
<span className={`font-medium ${agency.passRate >= 90 ? 'text-accent-green' : agency.passRate >= 80 ? 'text-accent-indigo' : 'text-orange-400'}`}>
{agency.passRate}%
</span>
{agency.trend === 'up' && <TrendingUp size={14} className="text-accent-green" />}
{agency.trend === 'down' && <TrendingDown size={14} className="text-accent-coral" />}
</div>
) : (
<span className="text-text-tertiary">-</span>
)}
</td>
<td className="px-6 py-4 text-sm text-text-tertiary">{agency.joinedAt}</td>
<td className="px-6 py-4">
<Button variant="ghost" size="sm">
<MoreVertical size={16} />
</Button>
</td>
</tr>
))}
</tbody>
</table>
</CardContent>
</Card>
{/* 邀请代理商弹窗 */}
<Modal isOpen={showInviteModal} onClose={() => { setShowInviteModal(false); setInviteEmail(''); setInviteLink(''); }} title="邀请代理商">
<div className="space-y-4">
<p className="text-text-secondary text-sm">输入代理商邮箱，系统将发送邀请链接。</p>
<div>
<label className="block text-sm font-medium text-text-primary mb-1">代理商邮箱</label>
<div className="flex gap-2">
<input
type="email"
value={inviteEmail}
onChange={(e) => setInviteEmail(e.target.value)}
placeholder="agency@example.com"
className="flex-1 px-4 py-2 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
/>
<Button variant="secondary" onClick={handleInvite}>
生成链接
</Button>
</div>
</div>
{inviteLink && (
<div className="p-4 bg-bg-elevated rounded-lg">
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium text-text-primary">邀请链接</span>
<button
type="button"
onClick={handleCopyLink}
className="flex items-center gap-1 text-sm text-accent-indigo hover:underline"
>
<Copy size={14} />
复制
</button>
</div>
<p className="text-sm text-text-secondary break-all">{inviteLink}</p>
</div>
)}
<div className="flex gap-3 justify-end pt-4">
<Button variant="ghost" onClick={() => { setShowInviteModal(false); setInviteEmail(''); setInviteLink(''); }}>
取消
</Button>
<Button onClick={handleSendInvite} disabled={!inviteEmail.trim()}>
<Mail size={16} />
发送邀请
</Button>
</div>
</div>
</Modal>
</div>
)
}

505
frontend/app/brand/page.tsx
View File

@ -1,344 +1,221 @@
'use client' 'use client'
import { useState } from 'react'
import Link from 'next/link' import Link from 'next/link'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { SuccessTag, WarningTag, ErrorTag } from '@/components/ui/Tag'
import { ProgressBar } from '@/components/ui/ProgressBar'
import { Button } from '@/components/ui/Button' import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
import { SuccessTag, PendingTag, WarningTag } from '@/components/ui/Tag'
import { import {
TrendingUp, Search,
TrendingDown, Plus,
BarChart3, Filter,
Target, FileText,
AlertTriangle, Video,
Clock,
ChevronRight, ChevronRight,
Shield, Calendar,
Users, Users
FileVideo
} from 'lucide-react' } from 'lucide-react'
// 模拟核心指标 // 模拟项目数据
const metrics = { const mockProjects = [
totalReviews: 1234, {
totalTrend: '+12%', id: 'proj-001',
passRate: 78.5, name: 'XX品牌618推广',
passRateTrend: '+5.2%', status: 'active',
hardRecall: 96.2, deadline: '2026-06-18',
hardRecallTarget: 95, scriptCount: { total: 20, passed: 15, pending: 3, rejected: 2 },
sentimentBlocks: 23, videoCount: { total: 20, passed: 12, pending: 5, rejected: 3 },
sentimentTrend: '-18%', agencyCount: 3,
avgCycle: 4.2, creatorCount: 15,
avgCycleTarget: 5, },
{
id: 'proj-002',
name: '新品口红系列',
status: 'active',
deadline: '2026-03-15',
scriptCount: { total: 12, passed: 10, pending: 1, rejected: 1 },
videoCount: { total: 12, passed: 8, pending: 3, rejected: 1 },
agencyCount: 2,
creatorCount: 8,
},
{
id: 'proj-003',
name: '护肤品秋季活动',
status: 'completed',
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,
},
]
function StatusTag({ status }: { status: string }) {
if (status === 'active') return <SuccessTag>进行中</SuccessTag>
if (status === 'completed') return <PendingTag>已完成</PendingTag>
return <WarningTag>暂停</WarningTag>
} }
// 模拟趋势数据 function ProjectCard({ project }: { project: typeof mockProjects[0] }) {
const weeklyData = [ const scriptProgress = Math.round((project.scriptCount.passed / project.scriptCount.total) * 100)
{ day: '周一', submitted: 45, passed: 40, failed: 5 }, const videoProgress = Math.round((project.videoCount.passed / project.videoCount.total) * 100)
{ day: '周二', submitted: 52, passed: 48, failed: 4 },
{ day: '周三', submitted: 38, passed: 35, failed: 3 },
{ day: '周四', submitted: 61, passed: 54, failed: 7 },
{ day: '周五', submitted: 55, passed: 50, failed: 5 },
{ day: '周六', submitted: 28, passed: 26, failed: 2 },
{ day: '周日', submitted: 22, passed: 20, failed: 2 },
]
// 模拟违规类型分布
const violationTypes = [
{ type: '违禁词', count: 156, percentage: 45, color: 'bg-red-500' },
{ type: '竞品露出', count: 89, percentage: 26, color: 'bg-orange-500' },
{ type: '卖点遗漏', count: 67, percentage: 19, color: 'bg-yellow-500' },
{ type: '舆情风险', count: 34, percentage: 10, color: 'bg-purple-500' },
]
// 模拟代理商排名
const agencyRanking = [
{ name: '星耀传媒', passRate: 92, reviews: 156, trend: 'up' },
{ name: '创意无限', passRate: 88, reviews: 134, trend: 'up' },
{ name: '美妆达人MCN', passRate: 82, reviews: 98, trend: 'down' },
{ name: '时尚风向标', passRate: 78, reviews: 87, trend: 'stable' },
]
// 模拟风险预警
const riskAlerts = [
{
id: 'alert-001',
level: 'high',
title: '代理商A竞品露出集中',
description: '过去24小时内5条视频触发"竞品露出"',
time: '10分钟前',
},
{
id: 'alert-002',
level: 'medium',
title: '达人B连续未通过',
description: '连续3次提交未通过，建议沟通',
time: '2小时前',
},
{
id: 'alert-003',
level: 'low',
title: '舆情风险上升',
description: '本周舆情风险拦截数异常上升，建议检查阈值',
time: '5小时前',
},
]
function MetricCard({
title,
value,
unit = '',
trend,
target,
icon: Icon,
color,
}: {
title: string
value: number | string
unit?: string
trend?: string
target?: number
icon: React.ElementType
color: string
}) {
return ( return (
<Card> <Link href={`/brand/projects/${project.id}`}>
<CardContent className="py-4"> <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 className="flex items-start justify-between">
<div> <div>
<div className="text-sm text-text-secondary mb-1">{title}</div> <h3 className="text-lg font-semibold text-text-primary">{project.name}</h3>
<div className="flex items-baseline gap-1"> <div className="flex items-center gap-2 mt-1 text-sm text-text-secondary">
<span className={`text-3xl font-bold ${color}`}>{value}</span> <Calendar size={14} />
{unit && <span className="text-lg text-text-secondary">{unit}</span>} <span>截止 {project.deadline}</span>
</div>
{trend && (
<div className={`text-xs mt-1 flex items-center gap-1 ${
trend.includes('+') || trend.includes('↓') ? 'text-accent-green' : trend.includes('-') ? 'text-accent-coral' : 'text-text-secondary'
}`}>
{trend.includes('+') ? <TrendingUp size={12} /> : trend.includes('-') && !trend.includes('↓') ? <TrendingDown size={12} /> : null}
{trend} vs 上周
</div>
)}
{target && (
<div className="text-xs text-text-tertiary mt-1">
目标 ≥{target}{unit} {Number(value) >= target ? '✅' : '⚠️'}
</div>
)}
</div>
<div className={`w-12 h-12 rounded-lg ${color.replace('text-', 'bg-').replace('600', '').replace('900', '')}/20 flex items-center justify-center`}>
<Icon size={24} className={color} />
</div> </div>
</div> </div>
</CardContent> <StatusTag status={project.status} />
</Card>
)
}
function AlertLevelIcon({ level }: { level: string }) {
if (level === 'high') return <AlertTriangle size={16} className="text-red-500" />
if (level === 'medium') return <AlertTriangle size={16} className="text-orange-500" />
return <AlertTriangle size={16} className="text-yellow-500" />
}
export default function BrandDashboard() {
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<h1 className="text-2xl font-bold text-text-primary">数据看板</h1>
<div className="text-sm text-text-secondary">更新时间：{new Date().toLocaleString('zh-CN')}</div>
</div> </div>
{/* 核心指标卡片 */} {/* 脚本进度 */}
<div className="grid grid-cols-1 md:grid-cols-5 gap-4"> <div>
<MetricCard <div className="flex items-center justify-between text-sm mb-2">
title="本月审核总量" <span className="flex items-center gap-2 text-text-secondary">
value={metrics.totalReviews} <FileText size={14} />
trend={metrics.totalTrend} 脚本审核
icon={FileVideo} </span>
color="text-text-primary" <span className="text-text-primary font-medium">
/> {project.scriptCount.passed}/{project.scriptCount.total}
<MetricCard
title="初审通过率"
value={metrics.passRate}
unit="%"
trend={metrics.passRateTrend}
icon={Target}
color="text-accent-green"
/>
<MetricCard
title="硬性召回率"
value={metrics.hardRecall}
unit="%"
target={metrics.hardRecallTarget}
icon={Shield}
color="text-accent-indigo"
/>
<MetricCard
title="舆情拦截数"
value={metrics.sentimentBlocks}
trend={metrics.sentimentTrend + ' ↓'}
icon={AlertTriangle}
color="text-purple-400"
/>
<MetricCard
title="平均审核周期"
value={metrics.avgCycle}
unit="小时"
target={metrics.avgCycleTarget}
icon={Clock}
color="text-orange-400"
/>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* 本周趋势 */}
<Card className="lg:col-span-2">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<BarChart3 size={18} className="text-blue-500" />
本周审核趋势
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
{weeklyData.map((day) => (
<div key={day.day} className="flex items-center gap-4">
<div className="w-12 text-sm text-text-secondary font-medium">{day.day}</div>
<div className="flex-1">
<div className="flex h-6 rounded-full overflow-hidden bg-bg-elevated">
<div
className="bg-accent-green transition-all"
style={{ width: `${(day.passed / day.submitted) * 100}%` }}
/>
<div
className="bg-accent-coral transition-all"
style={{ width: `${(day.failed / day.submitted) * 100}%` }}
/>
</div>
</div>
<div className="w-24 text-right text-sm">
<span className="text-accent-green font-medium">{day.passed}</span>
<span className="text-text-tertiary"> / </span>
<span className="text-text-secondary">{day.submitted}</span>
</div>
</div>
))}
</div>
<div className="flex gap-6 mt-4 text-sm">
<div className="flex items-center gap-2">
<div className="w-3 h-3 bg-accent-green rounded" />
<span className="text-text-secondary">通过</span>
</div>
<div className="flex items-center gap-2">
<div className="w-3 h-3 bg-accent-coral rounded" />
<span className="text-text-secondary">驳回</span>
</div>
</div>
</CardContent>
</Card>
{/* 风险预警 */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<AlertTriangle size={18} className="text-red-500" />
风险预警
</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
{riskAlerts.map((alert) => (
<div
key={alert.id}
className={`p-3 rounded-lg border cursor-pointer hover:shadow-sm transition-shadow ${
alert.level === 'high'
? 'bg-accent-coral/10 border-accent-coral/30'
: alert.level === 'medium'
? 'bg-orange-500/10 border-orange-500/30'
: 'bg-yellow-500/10 border-yellow-500/30'
}`}
>
<div className="flex items-start gap-2">
<AlertLevelIcon level={alert.level} />
<div className="flex-1 min-w-0">
<div className="font-medium text-text-primary text-sm">{alert.title}</div>
<div className="text-xs text-text-secondary mt-0.5">{alert.description}</div>
<div className="text-xs text-text-tertiary mt-1">{alert.time}</div>
</div>
</div>
</div>
))}
<Button variant="ghost" fullWidth size="sm">
查看全部预警
<ChevronRight size={14} />
</Button>
</CardContent>
</Card>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* 违规类型分布 */}
<Card>
<CardHeader>
<CardTitle>违规类型分布</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
{violationTypes.map((item) => (
<div key={item.type}>
<div className="flex justify-between text-sm mb-2">
<span className="text-text-primary font-medium">{item.type}</span>
<span className="text-text-secondary">{item.count} 次 ({item.percentage}%)</span>
</div>
<div className="h-2 bg-bg-elevated rounded-full overflow-hidden">
<div className={`h-full ${item.color} transition-all`} style={{ width: `${item.percentage}%` }} />
</div>
</div>
))}
</div>
</CardContent>
</Card>
{/* 代理商排名 */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Users size={18} className="text-blue-500" />
代理商通过率排名
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-3">
{agencyRanking.map((agency, index) => (
<div key={agency.name} className="flex items-center gap-4 p-3 rounded-lg bg-bg-elevated">
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold ${
index === 0 ? 'bg-yellow-500/20 text-yellow-400' :
index === 1 ? 'bg-gray-500/20 text-gray-400' :
index === 2 ? 'bg-orange-500/20 text-orange-400' : 'bg-bg-page text-text-tertiary'
}`}>
{index + 1}
</div>
<div className="flex-1 min-w-0">
<div className="font-medium text-text-primary">{agency.name}</div>
<div className="text-xs text-text-secondary">{agency.reviews} 条审核</div>
</div>
<div className="text-right">
<div className={`font-bold ${agency.passRate >= 90 ? 'text-accent-green' : agency.passRate >= 80 ? 'text-accent-indigo' : 'text-orange-400'}`}>
{agency.passRate}%
</div>
<div className="flex items-center justify-end gap-1 text-xs">
{agency.trend === 'up' && <TrendingUp size={12} className="text-accent-green" />}
{agency.trend === 'down' && <TrendingDown size={12} className="text-accent-coral" />}
<span className="text-text-tertiary">
{agency.trend === 'up' ? '上升' : agency.trend === 'down' ? '下降' : '持平'}
</span> </span>
</div> </div>
<div className="h-2 bg-bg-elevated rounded-full overflow-hidden">
<div
className="h-full bg-accent-green transition-all"
style={{ width: `${scriptProgress}%` }}
/>
</div>
<div className="flex gap-4 mt-1 text-xs text-text-tertiary">
<span>通过 {project.scriptCount.passed}</span>
<span>待审 {project.scriptCount.pending}</span>
<span>驳回 {project.scriptCount.rejected}</span>
</div> </div>
</div> </div>
))}
{/* 视频进度 */}
<div>
<div className="flex items-center justify-between text-sm mb-2">
<span className="flex items-center gap-2 text-text-secondary">
<Video size={14} />
视频审核
</span>
<span className="text-text-primary font-medium">
{project.videoCount.passed}/{project.videoCount.total}
</span>
</div>
<div className="h-2 bg-bg-elevated rounded-full overflow-hidden">
<div
className="h-full bg-accent-indigo transition-all"
style={{ width: `${videoProgress}%` }}
/>
</div>
<div className="flex gap-4 mt-1 text-xs text-text-tertiary">
<span>通过 {project.videoCount.passed}</span>
<span>待审 {project.videoCount.pending}</span>
<span>驳回 {project.videoCount.rejected}</span>
</div>
</div>
{/* 参与方统计 */}
<div className="flex items-center justify-between pt-4 border-t border-border-subtle">
<div className="flex items-center gap-4 text-sm text-text-secondary">
<span className="flex items-center gap-1">
<Users size={14} />
{project.agencyCount} 代理商
</span>
<span>{project.creatorCount} 达人</span>
</div>
<ChevronRight size={16} className="text-text-tertiary" />
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
</Link>
)
}
export default function BrandProjectsPage() {
const [searchQuery, setSearchQuery] = useState('')
const [statusFilter, setStatusFilter] = useState<string>('all')
const filteredProjects = mockProjects.filter(project => {
const matchesSearch = project.name.toLowerCase().includes(searchQuery.toLowerCase())
const matchesStatus = statusFilter === 'all' || project.status === statusFilter
return matchesSearch && matchesStatus
})
return (
<div className="space-y-6">
{/* 页面标题和操作 */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-text-primary">项目看板</h1>
<p className="text-sm text-text-secondary mt-1">管理所有营销项目的审核进度</p>
</div> </div>
<Link href="/brand/projects/create">
<Button>
<Plus size={16} />
创建项目
</Button>
</Link>
</div>
{/* 搜索和筛选 */}
<div className="flex items-center gap-4">
<div className="relative flex-1 max-w-md">
<Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary" />
<input
type="text"
placeholder="搜索项目名称..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full pl-10 pr-4 py-2 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
/>
</div>
<div className="flex items-center gap-2">
<Filter size={16} className="text-text-tertiary" />
<select
value={statusFilter}
onChange={(e) => setStatusFilter(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>
<option value="active">进行中</option>
<option value="completed">已完成</option>
<option value="paused">已暂停</option>
</select>
</div>
</div>
{/* 项目卡片网格 */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{filteredProjects.map((project) => (
<ProjectCard key={project.id} project={project} />
))}
</div>
{filteredProjects.length === 0 && (
<div className="text-center py-16">
<div className="text-text-tertiary mb-4">
<FileText size={48} className="mx-auto opacity-50" />
</div>
<p className="text-text-secondary">暂无匹配的项目</p>
<Link href="/brand/projects/create">
<Button variant="secondary" className="mt-4">
<Plus size={16} />
创建新项目
</Button>
</Link>
</div>
)}
</div> </div>
) )
} }

270
frontend/app/brand/projects/[id]/page.tsx Normal file
View File

@ -0,0 +1,270 @@
'use client'
import { useState } from 'react'
import { useRouter, useParams } from 'next/navigation'
import Link from 'next/link'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import { SuccessTag, PendingTag, WarningTag, ErrorTag } from '@/components/ui/Tag'
import {
ArrowLeft,
Calendar,
Users,
FileText,
Video,
TrendingUp,
Clock,
CheckCircle,
XCircle,
ChevronRight
} from 'lucide-react'
// 模拟项目详情数据
const mockProject = {
id: 'proj-001',
name: 'XX品牌618推广',
status: 'active',
deadline: '2026-06-18',
createdAt: '2026-02-01',
description: '618大促活动营销内容审核项目',
briefUrl: '/briefs/xx-brand-618.pdf',
stats: {
scriptTotal: 20,
scriptPassed: 15,
scriptPending: 3,
scriptRejected: 2,
videoTotal: 20,
videoPassed: 12,
videoPending: 5,
videoRejected: 3,
},
agencies: [
{ id: 'agency-001', name: '星耀传媒', creatorCount: 8, passRate: 92 },
{ id: 'agency-002', name: '创意无限', creatorCount: 5, passRate: 88 },
{ id: 'agency-003', name: '美妆达人MCN', creatorCount: 2, passRate: 75 },
],
recentTasks: [
{ id: 'task-001', type: 'video', creatorName: '小美护肤', status: 'pending', submittedAt: '2026-02-06 14:30' },
{ id: 'task-002', type: 'script', creatorName: '美妆Lisa', status: 'approved', submittedAt: '2026-02-06 12:15' },
{ id: 'task-003', type: 'video', creatorName: '健身王', status: 'rejected', submittedAt: '2026-02-06 10:00' },
{ id: 'task-004', type: 'script', creatorName: '时尚达人', status: 'pending', submittedAt: '2026-02-05 16:45' },
],
}
function StatCard({ title, value, icon: Icon, color }: { title: string; value: number | string; icon: React.ElementType; color: string }) {
return (
<Card>
<CardContent className="py-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-text-secondary">{title}</p>
<p className={`text-2xl font-bold ${color}`}>{value}</p>
</div>
<div className={`w-10 h-10 rounded-lg ${color.replace('text-', 'bg-')}/20 flex items-center justify-center`}>
<Icon size={20} className={color} />
</div>
</div>
</CardContent>
</Card>
)
}
function TaskStatusTag({ status }: { status: string }) {
switch (status) {
case 'approved': return <SuccessTag>已通过</SuccessTag>
case 'pending': return <PendingTag>待审核</PendingTag>
case 'rejected': return <ErrorTag>已驳回</ErrorTag>
default: return <PendingTag>未知</PendingTag>
}
}
export default function ProjectDetailPage() {
const router = useRouter()
const params = useParams()
const project = mockProject
const scriptPassRate = Math.round((project.stats.scriptPassed / project.stats.scriptTotal) * 100)
const videoPassRate = Math.round((project.stats.videoPassed / project.stats.videoTotal) * 100)
return (
<div className="space-y-6">
{/* 顶部导航 */}
<div className="flex items-center gap-4">
<button type="button" onClick={() => router.back()} className="p-2 hover:bg-bg-elevated rounded-full">
<ArrowLeft size={20} className="text-text-primary" />
</button>
<div className="flex-1">
<h1 className="text-2xl font-bold text-text-primary">{project.name}</h1>
<p className="text-sm text-text-secondary">{project.description}</p>
</div>
<SuccessTag>进行中</SuccessTag>
</div>
{/* 项目信息 */}
<div className="flex items-center gap-6 text-sm text-text-secondary">
<span className="flex items-center gap-2">
<Calendar size={16} />
截止日期: {project.deadline}
</span>
<span className="flex items-center gap-2">
<Clock size={16} />
创建时间: {project.createdAt}
</span>
<Link href={project.briefUrl} className="flex items-center gap-2 text-accent-indigo hover:underline">
<FileText size={16} />
查看 Brief
</Link>
</div>
{/* 统计卡片 */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<StatCard title="脚本通过率" value={`${scriptPassRate}%`} icon={FileText} color="text-accent-green" />
<StatCard title="视频通过率" value={`${videoPassRate}%`} icon={Video} color="text-accent-indigo" />
<StatCard title="参与代理商" value={project.agencies.length} icon={Users} color="text-purple-400" />
<StatCard title="待审核任务" value={project.stats.scriptPending + project.stats.videoPending} icon={Clock} color="text-orange-400" />
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* 审核进度 */}
<Card className="lg:col-span-2">
<CardHeader>
<CardTitle>审核进度</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
{/* 脚本审核 */}
<div>
<div className="flex items-center justify-between mb-3">
<span className="flex items-center gap-2 text-text-primary font-medium">
<FileText size={16} />
脚本审核
</span>
<span className="text-sm text-text-secondary">
{project.stats.scriptPassed}/{project.stats.scriptTotal} 已通过
</span>
</div>
<div className="flex h-4 rounded-full overflow-hidden bg-bg-elevated">
<div className="bg-accent-green" style={{ width: `${(project.stats.scriptPassed / project.stats.scriptTotal) * 100}%` }} />
<div className="bg-yellow-500" style={{ width: `${(project.stats.scriptPending / project.stats.scriptTotal) * 100}%` }} />
<div className="bg-accent-coral" style={{ width: `${(project.stats.scriptRejected / project.stats.scriptTotal) * 100}%` }} />
</div>
<div className="flex gap-6 mt-2 text-xs">
<span className="flex items-center gap-1 text-accent-green">
<CheckCircle size={12} /> 通过 {project.stats.scriptPassed}
</span>
<span className="flex items-center gap-1 text-yellow-500">
<Clock size={12} /> 待审 {project.stats.scriptPending}
</span>
<span className="flex items-center gap-1 text-accent-coral">
<XCircle size={12} /> 驳回 {project.stats.scriptRejected}
</span>
</div>
</div>
{/* 视频审核 */}
<div>
<div className="flex items-center justify-between mb-3">
<span className="flex items-center gap-2 text-text-primary font-medium">
<Video size={16} />
视频审核
</span>
<span className="text-sm text-text-secondary">
{project.stats.videoPassed}/{project.stats.videoTotal} 已通过
</span>
</div>
<div className="flex h-4 rounded-full overflow-hidden bg-bg-elevated">
<div className="bg-accent-green" style={{ width: `${(project.stats.videoPassed / project.stats.videoTotal) * 100}%` }} />
<div className="bg-yellow-500" style={{ width: `${(project.stats.videoPending / project.stats.videoTotal) * 100}%` }} />
<div className="bg-accent-coral" style={{ width: `${(project.stats.videoRejected / project.stats.videoTotal) * 100}%` }} />
</div>
<div className="flex gap-6 mt-2 text-xs">
<span className="flex items-center gap-1 text-accent-green">
<CheckCircle size={12} /> 通过 {project.stats.videoPassed}
</span>
<span className="flex items-center gap-1 text-yellow-500">
<Clock size={12} /> 待审 {project.stats.videoPending}
</span>
<span className="flex items-center gap-1 text-accent-coral">
<XCircle size={12} /> 驳回 {project.stats.videoRejected}
</span>
</div>
</div>
</CardContent>
</Card>
{/* 代理商列表 */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Users size={16} />
参与代理商
</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
{project.agencies.map((agency) => (
<div key={agency.id} className="p-3 rounded-lg bg-bg-elevated">
<div className="flex items-center justify-between mb-2">
<span className="font-medium text-text-primary">{agency.name}</span>
<span className={`text-sm font-medium ${agency.passRate >= 90 ? 'text-accent-green' : agency.passRate >= 80 ? 'text-accent-indigo' : 'text-orange-400'}`}>
{agency.passRate}%
</span>
</div>
<div className="text-xs text-text-secondary">{agency.creatorCount} 位达人参与</div>
</div>
))}
</CardContent>
</Card>
</div>
{/* 最近任务 */}
<Card>
<CardHeader>
<CardTitle className="flex items-center justify-between">
<span>最近提交</span>
<Link href="/brand/review">
<Button variant="ghost" size="sm">
查看全部 <ChevronRight size={16} />
</Button>
</Link>
</CardTitle>
</CardHeader>
<CardContent>
<div className="overflow-x-auto">
<table className="w-full">
<thead>
<tr className="border-b border-border-subtle text-left text-sm text-text-secondary">
<th className="pb-3 font-medium">类型</th>
<th className="pb-3 font-medium">达人</th>
<th className="pb-3 font-medium">状态</th>
<th className="pb-3 font-medium">提交时间</th>
<th className="pb-3 font-medium">操作</th>
</tr>
</thead>
<tbody>
{project.recentTasks.map((task) => (
<tr key={task.id} className="border-b border-border-subtle last:border-0 hover:bg-bg-elevated">
<td className="py-4">
<span className="flex items-center gap-2">
{task.type === 'script' ? <FileText size={16} className="text-accent-indigo" /> : <Video size={16} className="text-purple-400" />}
{task.type === 'script' ? '脚本' : '视频'}
</span>
</td>
<td className="py-4 text-text-primary">{task.creatorName}</td>
<td className="py-4"><TaskStatusTag status={task.status} /></td>
<td className="py-4 text-sm text-text-tertiary">{task.submittedAt}</td>
<td className="py-4">
<Link href={`/brand/review/${task.type}/${task.id}`}>
<Button size="sm" variant={task.status === 'pending' ? 'primary' : 'secondary'}>
{task.status === 'pending' ? '审核' : '查看'}
</Button>
</Link>
</td>
</tr>
))}
</tbody>
</table>
</div>
</CardContent>
</Card>
</div>
)
}

201
frontend/app/brand/projects/create/page.tsx Normal file
View File

@ -0,0 +1,201 @@
'use client'
import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
import {
ArrowLeft,
Upload,
Calendar,
FileText,
CheckCircle,
X,
Users
} from 'lucide-react'
// 模拟代理商列表
const mockAgencies = [
{ id: 'agency-001', name: '星耀传媒', creatorCount: 50, passRate: 92 },
{ id: 'agency-002', name: '创意无限', creatorCount: 35, passRate: 88 },
{ id: 'agency-003', name: '美妆达人MCN', creatorCount: 28, passRate: 82 },
{ id: 'agency-004', name: '时尚风向标', creatorCount: 42, passRate: 85 },
]
export default function CreateProjectPage() {
const router = useRouter()
const [projectName, setProjectName] = useState('')
const [deadline, setDeadline] = useState('')
const [briefFile, setBriefFile] = useState<File | null>(null)
const [selectedAgencies, setSelectedAgencies] = useState<string[]>([])
const [isSubmitting, setIsSubmitting] = useState(false)
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0]
if (file) {
setBriefFile(file)
}
}
const toggleAgency = (agencyId: string) => {
setSelectedAgencies(prev =>
prev.includes(agencyId)
? prev.filter(id => id !== agencyId)
: [...prev, agencyId]
)
}
const handleSubmit = async () => {
if (!projectName.trim() || !deadline || !briefFile || selectedAgencies.length === 0) {
alert('请填写完整信息')
return
}
setIsSubmitting(true)
// 模拟提交
await new Promise(resolve => setTimeout(resolve, 1500))
alert('项目创建成功！')
router.push('/brand')
}
const isValid = projectName.trim() && deadline && briefFile && selectedAgencies.length > 0
return (
<div className="space-y-6 max-w-4xl">
{/* 顶部导航 */}
<div className="flex items-center gap-4">
<button type="button" onClick={() => router.back()} className="p-2 hover:bg-bg-elevated rounded-full">
<ArrowLeft size={20} className="text-text-primary" />
</button>
<h1 className="text-2xl font-bold text-text-primary">创建项目</h1>
</div>
<Card>
<CardContent className="p-6 space-y-6">
{/* 项目名称 */}
<div>
<label className="block text-sm font-medium text-text-primary mb-2">
项目名称 <span className="text-accent-coral">*</span>
</label>
<input
type="text"
value={projectName}
onChange={(e) => setProjectName(e.target.value)}
placeholder="例如：XX品牌618推广"
className="w-full px-4 py-3 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
/>
</div>
{/* 截止日期 */}
<div>
<label className="block text-sm font-medium text-text-primary mb-2">
截止日期 <span className="text-accent-coral">*</span>
</label>
<div className="relative">
<Calendar size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-text-tertiary" />
<input
type="date"
value={deadline}
onChange={(e) => setDeadline(e.target.value)}
className="w-full pl-12 pr-4 py-3 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
/>
</div>
</div>
{/* Brief 上传 */}
<div>
<label className="block text-sm font-medium text-text-primary mb-2">
上传 Brief <span className="text-accent-coral">*</span>
</label>
<div className="border-2 border-dashed border-border-subtle rounded-lg p-8 text-center hover:border-accent-indigo/50 transition-colors">
{briefFile ? (
<div className="flex items-center justify-center gap-3">
<FileText size={24} className="text-accent-indigo" />
<span className="text-text-primary">{briefFile.name}</span>
<button
type="button"
onClick={() => setBriefFile(null)}
className="p-1 hover:bg-bg-elevated rounded-full"
>
<X size={16} className="text-text-tertiary" />
</button>
</div>
) : (
<label className="cursor-pointer">
<Upload size={32} className="mx-auto text-text-tertiary mb-3" />
<p className="text-text-secondary mb-1">点击或拖拽上传 Brief 文件</p>
<p className="text-xs text-text-tertiary">支持 PDF、Word、Excel 格式</p>
<input
type="file"
accept=".pdf,.doc,.docx,.xls,.xlsx"
onChange={handleFileChange}
className="hidden"
/>
</label>
)}
</div>
</div>
{/* 选择代理商 */}
<div>
<label className="block text-sm font-medium text-text-primary mb-2">
选择代理商 <span className="text-accent-coral">*</span>
<span className="text-text-tertiary font-normal ml-2">
已选择 {selectedAgencies.length} 个
</span>
</label>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{mockAgencies.map((agency) => {
const isSelected = selectedAgencies.includes(agency.id)
return (
<button
key={agency.id}
type="button"
onClick={() => toggleAgency(agency.id)}
className={`p-4 rounded-lg border-2 text-left transition-all ${
isSelected
? 'border-accent-indigo bg-accent-indigo/10'
: 'border-border-subtle hover:border-accent-indigo/50'
}`}
>
<div className="flex items-start justify-between">
<div>
<div className="font-medium text-text-primary">{agency.name}</div>
<div className="flex items-center gap-4 mt-1 text-sm text-text-secondary">
<span className="flex items-center gap-1">
<Users size={14} />
{agency.creatorCount} 达人
</span>
<span className={agency.passRate >= 90 ? 'text-accent-green' : agency.passRate >= 80 ? 'text-accent-indigo' : 'text-orange-400'}>
通过率 {agency.passRate}%
</span>
</div>
</div>
{isSelected && (
<CheckCircle size={20} className="text-accent-indigo" />
)}
</div>
</button>
)
})}
</div>
</div>
{/* 操作按钮 */}
<div className="flex items-center justify-end gap-4 pt-4 border-t border-border-subtle">
<Button variant="secondary" onClick={() => router.back()}>
取消
</Button>
<Button
onClick={handleSubmit}
disabled={!isValid || isSubmitting}
>
{isSubmitting ? '创建中...' : '创建项目'}
</Button>
</div>
</CardContent>
</Card>
</div>
)
}

273
frontend/app/brand/review/page.tsx Normal file
View File

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

363
frontend/app/brand/review/script/[id]/page.tsx Normal file
View File

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

413
frontend/app/brand/review/video/[id]/page.tsx Normal file
View File

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

242
frontend/app/brand/settings/page.tsx Normal file
View File

@ -0,0 +1,242 @@
'use client'
import { useState } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import {
Bell,
Shield,
Download,
Key,
User,
Mail,
Smartphone,
Globe,
Moon,
Sun,
Check
} from 'lucide-react'
export default function BrandSettingsPage() {
const [notifications, setNotifications] = useState({
email: true,
push: true,
reviewComplete: true,
newSubmission: true,
riskAlert: true,
})
const [theme, setTheme] = useState<'light' | 'dark' | 'system'>('dark')
const handleSave = () => {
alert('设置已保存')
}
return (
<div className="space-y-6 max-w-4xl">
{/* 页面标题 */}
<div>
<h1 className="text-2xl font-bold text-text-primary">系统设置</h1>
<p className="text-sm text-text-secondary mt-1">管理账户和系统偏好设置</p>
</div>
{/* 通知设置 */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Bell size={18} className="text-accent-indigo" />
通知设置
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex items-center justify-between py-3 border-b border-border-subtle">
<div>
<p className="font-medium text-text-primary">邮件通知</p>
<p className="text-sm text-text-secondary">接收重要事件的邮件提醒</p>
</div>
<label className="relative inline-flex items-center cursor-pointer">
<input
type="checkbox"
checked={notifications.email}
onChange={(e) => setNotifications({ ...notifications, email: e.target.checked })}
className="sr-only peer"
/>
<div className="w-11 h-6 bg-bg-elevated peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-accent-indigo rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-accent-indigo"></div>
</label>
</div>
<div className="flex items-center justify-between py-3 border-b border-border-subtle">
<div>
<p className="font-medium text-text-primary">推送通知</p>
<p className="text-sm text-text-secondary">浏览器推送通知</p>
</div>
<label className="relative inline-flex items-center cursor-pointer">
<input
type="checkbox"
checked={notifications.push}
onChange={(e) => setNotifications({ ...notifications, push: e.target.checked })}
className="sr-only peer"
/>
<div className="w-11 h-6 bg-bg-elevated peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-accent-indigo rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-accent-indigo"></div>
</label>
</div>
<div className="pt-2">
<p className="text-sm font-medium text-text-primary mb-3">通知类型</p>
<div className="space-y-3">
<label className="flex items-center gap-3 cursor-pointer">
<input
type="checkbox"
checked={notifications.reviewComplete}
onChange={(e) => setNotifications({ ...notifications, reviewComplete: e.target.checked })}
className="w-4 h-4 accent-accent-indigo"
/>
<span className="text-text-secondary">审核完成通知</span>
</label>
<label className="flex items-center gap-3 cursor-pointer">
<input
type="checkbox"
checked={notifications.newSubmission}
onChange={(e) => setNotifications({ ...notifications, newSubmission: e.target.checked })}
className="w-4 h-4 accent-accent-indigo"
/>
<span className="text-text-secondary">新提交通知</span>
</label>
<label className="flex items-center gap-3 cursor-pointer">
<input
type="checkbox"
checked={notifications.riskAlert}
onChange={(e) => setNotifications({ ...notifications, riskAlert: e.target.checked })}
className="w-4 h-4 accent-accent-indigo"
/>
<span className="text-text-secondary">风险预警通知</span>
</label>
</div>
</div>
</CardContent>
</Card>
{/* 外观设置 */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Globe size={18} className="text-purple-400" />
外观设置
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm text-text-secondary mb-4">选择界面主题</p>
<div className="flex gap-3">
<button
type="button"
onClick={() => setTheme('light')}
className={`flex items-center gap-2 px-4 py-3 rounded-lg border-2 transition-colors ${
theme === 'light' ? 'border-accent-indigo bg-accent-indigo/10' : 'border-border-subtle hover:border-accent-indigo/50'
}`}
>
<Sun size={20} className="text-yellow-400" />
<span className="text-text-primary">浅色</span>
{theme === 'light' && <Check size={16} className="text-accent-indigo ml-2" />}
</button>
<button
type="button"
onClick={() => setTheme('dark')}
className={`flex items-center gap-2 px-4 py-3 rounded-lg border-2 transition-colors ${
theme === 'dark' ? 'border-accent-indigo bg-accent-indigo/10' : 'border-border-subtle hover:border-accent-indigo/50'
}`}
>
<Moon size={20} className="text-accent-indigo" />
<span className="text-text-primary">深色</span>
{theme === 'dark' && <Check size={16} className="text-accent-indigo ml-2" />}
</button>
<button
type="button"
onClick={() => setTheme('system')}
className={`flex items-center gap-2 px-4 py-3 rounded-lg border-2 transition-colors ${
theme === 'system' ? 'border-accent-indigo bg-accent-indigo/10' : 'border-border-subtle hover:border-accent-indigo/50'
}`}
>
<Globe size={20} className="text-text-secondary" />
<span className="text-text-primary">跟随系统</span>
{theme === 'system' && <Check size={16} className="text-accent-indigo ml-2" />}
</button>
</div>
</CardContent>
</Card>
{/* 账户安全 */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Shield size={18} className="text-accent-green" />
账户安全
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex items-center justify-between py-3 border-b border-border-subtle">
<div className="flex items-center gap-3">
<Key size={20} className="text-text-tertiary" />
<div>
<p className="font-medium text-text-primary">修改密码</p>
<p className="text-sm text-text-secondary">定期更换密码以保护账户安全</p>
</div>
</div>
<Button variant="secondary" size="sm">修改</Button>
</div>
<div className="flex items-center justify-between py-3 border-b border-border-subtle">
<div className="flex items-center gap-3">
<Smartphone size={20} className="text-text-tertiary" />
<div>
<p className="font-medium text-text-primary">双因素认证</p>
<p className="text-sm text-text-secondary">启用后需要手机验证码登录</p>
</div>
</div>
<Button variant="secondary" size="sm">启用</Button>
</div>
<div className="flex items-center justify-between py-3">
<div className="flex items-center gap-3">
<Mail size={20} className="text-text-tertiary" />
<div>
<p className="font-medium text-text-primary">绑定邮箱</p>
<p className="text-sm text-text-secondary">brand@example.com</p>
</div>
</div>
<Button variant="secondary" size="sm">修改</Button>
</div>
</CardContent>
</Card>
{/* 数据导出 */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Download size={18} className="text-orange-400" />
数据导出
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-sm text-text-secondary">导出您的审核数据和报告</p>
<div className="flex gap-3">
<Button variant="secondary">
<Download size={16} />
导出审核记录
</Button>
<Button variant="secondary">
<Download size={16} />
导出统计报告
</Button>
</div>
</CardContent>
</Card>
{/* 保存按钮 */}
<div className="flex justify-end pt-4">
<Button onClick={handleSave}>
保存设置
</Button>
</div>
</div>
)
}

269
frontend/app/creator/appeal-quota/page.tsx Normal file
View File

@ -0,0 +1,269 @@
'use client'
import React, { useState } from 'react'
import { useRouter } from 'next/navigation'
import {
ArrowLeft,
AlertCircle,
CheckCircle,
Clock,
XCircle,
Send,
Info,
} from 'lucide-react'
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
import { Button } from '@/components/ui/Button'
import { cn } from '@/lib/utils'
// 申请状态类型
type RequestStatus = 'none' | 'pending' | 'approved' | 'rejected'
// 任务申诉次数数据
interface TaskAppealQuota {
id: string
taskName: string
agencyName: string
remaining: number
used: number
requestStatus: RequestStatus
requestTime?: string
}
// 模拟任务申诉次数数据
const mockTaskQuotas: TaskAppealQuota[] = [
{
id: '1',
taskName: '618美妆推广视频',
agencyName: '星辰传媒',
remaining: 1,
used: 0,
requestStatus: 'none',
},
{
id: '2',
taskName: '双11护肤品种草',
agencyName: '星辰传媒',
remaining: 0,
used: 1,
requestStatus: 'pending',
requestTime: '2024-02-05 14:30',
},
{
id: '3',
taskName: '春节限定礼盒开箱',
agencyName: '晨曦文化',
remaining: 2,
used: 0,
requestStatus: 'approved',
requestTime: '2024-02-04 10:15',
},
{
id: '4',
taskName: '情人节香水测评',
agencyName: '晨曦文化',
remaining: 0,
used: 1,
requestStatus: 'rejected',
requestTime: '2024-02-03 16:20',
},
]
// 状态标签组件
function StatusBadge({ status }: { status: RequestStatus }) {
const config = {
none: { label: '', icon: null, className: '' },
pending: {
label: '申请中',
icon: Clock,
className: 'bg-accent-amber/15 text-accent-amber',
},
approved: {
label: '已同意',
icon: CheckCircle,
className: 'bg-accent-green/15 text-accent-green',
},
rejected: {
label: '已拒绝',
icon: XCircle,
className: 'bg-accent-coral/15 text-accent-coral',
},
}
const { label, icon: Icon, className } = config[status]
if (status === 'none') return null
return (
<span className={cn('inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium', className)}>
{Icon && <Icon size={12} />}
{label}
</span>
)
}
// 任务卡片组件
function TaskQuotaCard({
task,
onRequestIncrease,
}: {
task: TaskAppealQuota
onRequestIncrease: (taskId: string) => void
}) {
const canRequest = task.requestStatus === 'none' || task.requestStatus === 'rejected'
return (
<div className="bg-bg-card rounded-xl p-5 card-shadow flex flex-col gap-4">
{/* 任务信息 */}
<div className="flex items-start justify-between gap-3">
<div className="flex flex-col gap-1 min-w-0">
<h3 className="text-[15px] font-medium text-text-primary truncate">{task.taskName}</h3>
<p className="text-[13px] text-text-tertiary">{task.agencyName}</p>
</div>
<StatusBadge status={task.requestStatus} />
</div>
{/* 申诉次数 */}
<div className="flex items-center gap-6">
<div className="flex flex-col gap-0.5">
<span className="text-2xl font-bold text-accent-indigo">{task.remaining}</span>
<span className="text-xs text-text-tertiary">剩余次数</span>
</div>
<div className="flex flex-col gap-0.5">
<span className="text-2xl font-bold text-text-secondary">{task.used}</span>
<span className="text-xs text-text-tertiary">已使用</span>
</div>
</div>
{/* 操作按钮 */}
<div className="flex items-center justify-between pt-3 border-t border-border-subtle">
{task.requestTime && (
<span className="text-xs text-text-tertiary">
{task.requestStatus === 'pending' ? '申请时间：' : '处理时间：'}
{task.requestTime}
</span>
)}
{!task.requestTime && <span />}
{canRequest ? (
<Button
variant="secondary"
size="sm"
onClick={() => onRequestIncrease(task.id)}
className="gap-1.5"
>
<Send size={14} />
申请增加
</Button>
) : task.requestStatus === 'pending' ? (
<span className="text-xs text-accent-amber">等待代理商处理...</span>
) : null}
</div>
</div>
)
}
export default function AppealQuotaPage() {
const router = useRouter()
const [tasks, setTasks] = useState(mockTaskQuotas)
const [showSuccessToast, setShowSuccessToast] = useState(false)
// 申请增加申诉次数
const handleRequestIncrease = (taskId: string) => {
setTasks(prev =>
prev.map(task =>
task.id === taskId
? {
...task,
requestStatus: 'pending' as RequestStatus,
requestTime: new Date().toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
}),
}
: task
)
)
setShowSuccessToast(true)
setTimeout(() => setShowSuccessToast(false), 3000)
}
// 统计数据
const totalRemaining = tasks.reduce((sum, t) => sum + t.remaining, 0)
const totalUsed = tasks.reduce((sum, t) => sum + t.used, 0)
const pendingRequests = tasks.filter(t => t.requestStatus === 'pending').length
return (
<ResponsiveLayout role="creator">
<div className="flex flex-col gap-6 h-full">
{/* 顶部栏 */}
<div className="flex items-center gap-4">
<button
type="button"
onClick={() => router.back()}
className="w-10 h-10 rounded-xl bg-bg-elevated flex items-center justify-center hover:bg-bg-elevated/80 transition-colors"
>
<ArrowLeft size={20} className="text-text-secondary" />
</button>
<div className="flex flex-col gap-1">
<h1 className="text-2xl lg:text-[28px] font-bold text-text-primary">申诉次数</h1>
<p className="text-sm lg:text-[15px] text-text-secondary">
查看各任务的申诉次数，可向代理商申请增加
</p>
</div>
</div>
{/* 统计卡片 */}
<div className="grid grid-cols-3 gap-4">
<div className="bg-bg-card rounded-xl p-4 card-shadow flex flex-col items-center gap-1">
<span className="text-2xl font-bold text-accent-indigo">{totalRemaining}</span>
<span className="text-xs text-text-tertiary">总剩余次数</span>
</div>
<div className="bg-bg-card rounded-xl p-4 card-shadow flex flex-col items-center gap-1">
<span className="text-2xl font-bold text-text-secondary">{totalUsed}</span>
<span className="text-xs text-text-tertiary">总已使用</span>
</div>
<div className="bg-bg-card rounded-xl p-4 card-shadow flex flex-col items-center gap-1">
<span className="text-2xl font-bold text-accent-amber">{pendingRequests}</span>
<span className="text-xs text-text-tertiary">待处理申请</span>
</div>
</div>
{/* 规则说明 */}
<div className="bg-accent-indigo/10 rounded-xl p-4 flex gap-3">
<Info size={20} className="text-accent-indigo flex-shrink-0 mt-0.5" />
<div className="flex flex-col gap-1">
<span className="text-sm font-medium text-text-primary">申诉次数规则</span>
<span className="text-[13px] text-text-secondary leading-relaxed">
每个任务初始有 1 次申诉机会，不同任务独立计算。如需更多次数，可点击"申请增加"向代理商发送请求，无需填写理由。代理商可增加的次数无上限。
</span>
</div>
</div>
{/* 任务列表 */}
<div className="flex flex-col gap-4 flex-1 min-h-0 overflow-y-auto pb-4">
<h2 className="text-base font-semibold text-text-primary sticky top-0 bg-bg-page py-2 -mt-2">
任务申诉次数 ({tasks.length})
</h2>
{tasks.map(task => (
<TaskQuotaCard
key={task.id}
task={task}
onRequestIncrease={handleRequestIncrease}
/>
))}
</div>
</div>
{/* 成功提示 */}
{showSuccessToast && (
<div className="fixed bottom-24 left-1/2 -translate-x-1/2 bg-accent-green text-white px-4 py-3 rounded-xl shadow-lg flex items-center gap-2 animate-fade-in z-50">
<CheckCircle size={18} />
<span className="text-sm font-medium">申请已发送，等待代理商处理</span>
</div>
)}
</ResponsiveLayout>
)
}

336
frontend/app/creator/appeals/[id]/page.tsx Normal file
View File

@ -0,0 +1,336 @@
'use client'
import { useState } from 'react'
import { useParams, useRouter } from 'next/navigation'
import {
ArrowLeft,
MessageCircle,
Clock,
CheckCircle,
XCircle,
FileText,
Image,
Send,
AlertTriangle
} from 'lucide-react'
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
import { cn } from '@/lib/utils'
// 申诉状态类型
type AppealStatus = 'pending' | 'processing' | 'approved' | 'rejected'
// 申诉详情数据类型
type AppealDetail = {
id: string
taskId: string
taskTitle: string
type: 'ai' | 'agency' | 'brand'
reason: string
content: string
status: AppealStatus
createdAt: string
updatedAt?: string
result?: string
attachments?: { name: string; type: 'image' | 'document'; url: string }[]
timeline?: { time: string; action: string; operator?: string }[]
originalIssue?: { title: string; description: string }
}
// 模拟申诉详情数据
const mockAppealDetails: Record<string, AppealDetail> = {
'appeal-001': {
id: 'appeal-001',
taskId: 'task-003',
taskTitle: 'ZZ饮品夏日',
type: 'ai',
reason: '误判',
content: '视频中出现的是我们自家品牌的历史产品，并非竞品。已附上品牌授权证明。',
status: 'approved',
createdAt: '2026-02-01 10:30',
updatedAt: '2026-02-02 15:20',
result: '经核实，该产品确为品牌方授权产品，申诉通过。AI已学习此案例，后续将避免类似误判。',
attachments: [
{ name: '品牌授权书.pdf', type: 'document', url: '#' },
{ name: '产品对比图.jpg', type: 'image', url: '#' },
],
timeline: [
{ time: '2026-02-01 10:30', action: '提交申诉' },
{ time: '2026-02-01 14:15', action: '进入处理队列' },
{ time: '2026-02-02 09:00', action: '开始审核', operator: '审核员 A' },
{ time: '2026-02-02 15:20', action: '申诉通过', operator: '审核员 A' },
],
originalIssue: {
title: '检测到竞品 Logo',
description: '画面中 0:15-0:18 出现竞品「百事可乐」的 Logo，可能造成合规风险。',
},
},
'appeal-002': {
id: 'appeal-002',
taskId: 'task-010',
taskTitle: 'GG智能手表',
type: 'agency',
reason: '审核标准不清晰',
content: '代理商反馈品牌调性不符，但Brief中并未明确说明科技专业形象的具体要求。请明确审核标准。',
status: 'processing',
createdAt: '2026-02-04 09:15',
timeline: [
{ time: '2026-02-04 09:15', action: '提交申诉' },
{ time: '2026-02-04 11:30', action: '进入处理队列' },
{ time: '2026-02-05 10:00', action: '开始审核', operator: '审核员 B' },
],
originalIssue: {
title: '品牌调性不符',
description: '脚本整体风格偏向娱乐化，与品牌科技专业形象不匹配。',
},
},
'appeal-003': {
id: 'appeal-003',
taskId: 'task-011',
taskTitle: 'HH美妆代言',
type: 'brand',
reason: '创意理解差异',
content: '品牌方认为创意不够新颖，但该创意形式在同类型产品推广中效果显著，已附上数据支持。',
status: 'pending',
createdAt: '2026-02-05 14:00',
attachments: [
{ name: '同类案例数据.xlsx', type: 'document', url: '#' },
],
timeline: [
{ time: '2026-02-05 14:00', action: '提交申诉' },
],
originalIssue: {
title: '创意不够新颖',
description: '脚本采用的是常见的口播形式，缺乏创新点和记忆点。',
},
},
'appeal-004': {
id: 'appeal-004',
taskId: 'task-013',
taskTitle: 'JJ旅行vlog',
type: 'agency',
reason: '版权问题异议',
content: '使用的背景音乐来自无版权音乐库 Epidemic Sound，已购买商用授权。附上授权证明截图。',
status: 'rejected',
createdAt: '2026-01-28 11:30',
updatedAt: '2026-01-30 16:45',
result: '经核实，该音乐虽有授权，但授权范围不包含商业广告用途。建议更换音乐后重新提交。',
attachments: [
{ name: '授权截图.png', type: 'image', url: '#' },
],
timeline: [
{ time: '2026-01-28 11:30', action: '提交申诉' },
{ time: '2026-01-28 15:00', action: '进入处理队列' },
{ time: '2026-01-29 09:30', action: '开始审核', operator: '审核员 C' },
{ time: '2026-01-30 16:45', action: '申诉驳回', operator: '审核员 C' },
],
originalIssue: {
title: '背景音乐版权问题',
description: '视频中使用的背景音乐「XXX」存在版权风险，平台可能会限流或下架。',
},
},
}
// 状态配置
const statusConfig: Record<AppealStatus, { label: string; color: string; bgColor: string; icon: React.ElementType }> = {
pending: { label: '待处理', color: 'text-amber-500', bgColor: 'bg-amber-500/15', icon: Clock },
processing: { label: '处理中', color: 'text-accent-indigo', bgColor: 'bg-accent-indigo/15', icon: MessageCircle },
approved: { label: '已通过', color: 'text-accent-green', bgColor: 'bg-accent-green/15', icon: CheckCircle },
rejected: { label: '已驳回', color: 'text-accent-coral', bgColor: 'bg-accent-coral/15', icon: XCircle },
}
// 类型配置
const typeConfig: Record<string, { label: string; color: string }> = {
ai: { label: 'AI审核', color: 'text-accent-indigo' },
agency: { label: '代理商审核', color: 'text-purple-400' },
brand: { label: '品牌方审核', color: 'text-accent-blue' },
}
export default function AppealDetailPage() {
const params = useParams()
const router = useRouter()
const appealId = params.id as string
const [newComment, setNewComment] = useState('')
const appeal = mockAppealDetails[appealId]
if (!appeal) {
return (
<ResponsiveLayout role="creator">
<div className="flex items-center justify-center h-full">
<div className="flex flex-col items-center gap-4">
<XCircle className="w-16 h-16 text-text-tertiary" />
<p className="text-lg text-text-secondary">申诉记录不存在</p>
<button
type="button"
onClick={() => router.back()}
className="px-6 py-2.5 rounded-xl bg-accent-indigo text-white text-sm font-medium"
>
返回申诉列表
</button>
</div>
</div>
</ResponsiveLayout>
)
}
const status = statusConfig[appeal.status]
const type = typeConfig[appeal.type]
const StatusIcon = status.icon
return (
<ResponsiveLayout role="creator">
<div className="flex flex-col gap-6 h-full">
{/* 顶部栏 */}
<div className="flex items-center justify-between flex-wrap gap-4">
<div className="flex flex-col gap-1">
<button
type="button"
onClick={() => router.back()}
className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-bg-elevated text-text-secondary text-sm hover:bg-bg-card transition-colors w-fit mb-2"
>
<ArrowLeft className="w-4 h-4" />
返回
</button>
<h1 className="text-xl lg:text-[28px] font-bold text-text-primary">申诉详情</h1>
<p className="text-sm lg:text-[15px] text-text-secondary">申诉编号: {appeal.id}</p>
</div>
<div className={cn('px-4 py-2 rounded-xl flex items-center gap-2', status.bgColor)}>
<StatusIcon className={cn('w-5 h-5', status.color)} />
<span className={cn('font-semibold', status.color)}>{status.label}</span>
</div>
</div>
{/* 内容区 - 响应式布局 */}
<div className="flex flex-col lg:flex-row gap-6 flex-1 min-h-0 overflow-y-auto lg:overflow-hidden">
{/* 左侧：申诉信息 */}
<div className="flex-1 flex flex-col gap-5 lg:overflow-y-auto lg:pr-2">
{/* 原始问题 */}
{appeal.originalIssue && (
<div className="bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow">
<h3 className="text-base lg:text-lg font-semibold text-text-primary mb-4">原始审核问题</h3>
<div className="bg-accent-coral/10 rounded-xl p-4">
<div className="flex items-center gap-2 mb-2">
<AlertTriangle className="w-5 h-5 text-accent-coral" />
<span className="font-semibold text-text-primary">{appeal.originalIssue.title}</span>
</div>
<p className="text-sm text-text-secondary">{appeal.originalIssue.description}</p>
</div>
</div>
)}
{/* 申诉内容 */}
<div className="bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow">
<h3 className="text-base lg:text-lg font-semibold text-text-primary mb-4">申诉内容</h3>
<div className="flex flex-col gap-4">
<div className="flex flex-col lg:flex-row lg:items-center gap-2 lg:gap-6">
<div className="flex items-center gap-2">
<span className="text-sm text-text-tertiary">关联任务:</span>
<span className="text-sm font-medium text-text-primary">{appeal.taskTitle}</span>
</div>
<div className="flex items-center gap-2">
<span className="text-sm text-text-tertiary">申诉对象:</span>
<span className={cn('text-sm font-medium', type.color)}>{type.label}</span>
</div>
</div>
<div className="flex items-center gap-2">
<span className="text-sm text-text-tertiary">申诉原因:</span>
<span className="text-sm font-medium text-text-primary">{appeal.reason}</span>
</div>
<div className="bg-bg-elevated rounded-xl p-4">
<p className="text-sm text-text-secondary leading-relaxed">{appeal.content}</p>
</div>
</div>
</div>
{/* 附件 */}
{appeal.attachments && appeal.attachments.length > 0 && (
<div className="bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow">
<h3 className="text-base lg:text-lg font-semibold text-text-primary mb-4">证明材料</h3>
<div className="flex flex-wrap gap-3">
{appeal.attachments.map((attachment, index) => (
<div
key={index}
className="flex items-center gap-3 px-4 py-3 bg-bg-elevated rounded-xl cursor-pointer hover:bg-bg-page transition-colors"
>
{attachment.type === 'image' ? (
<Image className="w-5 h-5 text-accent-indigo" />
) : (
<FileText className="w-5 h-5 text-accent-indigo" />
)}
<span className="text-sm text-text-primary">{attachment.name}</span>
</div>
))}
</div>
</div>
)}
{/* 处理结果 */}
{appeal.result && (
<div className="bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow">
<h3 className="text-base lg:text-lg font-semibold text-text-primary mb-4">处理结果</h3>
<div className={cn(
'rounded-xl p-4',
appeal.status === 'approved' ? 'bg-accent-green/10' : 'bg-accent-coral/10'
)}>
<p className="text-sm text-text-secondary leading-relaxed">{appeal.result}</p>
</div>
</div>
)}
{/* 补充说明（处理中状态可用） */}
{(appeal.status === 'pending' || appeal.status === 'processing') && (
<div className="bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow">
<h3 className="text-base lg:text-lg font-semibold text-text-primary mb-4">补充说明</h3>
<div className="flex items-center gap-3">
<input
type="text"
placeholder="输入补充说明..."
value={newComment}
onChange={(e) => setNewComment(e.target.value)}
className="flex-1 px-4 py-3 bg-bg-elevated rounded-xl text-sm text-text-primary placeholder-text-tertiary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
/>
<button
type="button"
className="px-5 py-3 rounded-xl bg-accent-indigo text-white text-sm font-medium flex items-center gap-2"
>
<Send className="w-4 h-4" />
发送
</button>
</div>
</div>
)}
</div>
{/* 右侧：时间线 */}
<div className="lg:w-[320px] lg:flex-shrink-0">
<div className="bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow lg:h-full">
<h3 className="text-base lg:text-lg font-semibold text-text-primary mb-5">处理进度</h3>
<div className="flex flex-col gap-0">
{appeal.timeline?.map((item, index) => (
<div key={index} className="flex gap-4">
<div className="flex flex-col items-center">
<div className={cn(
'w-3 h-3 rounded-full',
index === (appeal.timeline?.length || 0) - 1 ? 'bg-accent-indigo' : 'bg-text-tertiary'
)} />
{index < (appeal.timeline?.length || 0) - 1 && (
<div className="w-0.5 h-16 bg-border-subtle" />
)}
</div>
<div className="flex flex-col gap-1 pb-6">
<span className="text-xs text-text-tertiary">{item.time}</span>
<span className="text-sm font-medium text-text-primary">{item.action}</span>
{item.operator && (
<span className="text-xs text-text-secondary">{item.operator}</span>
)}
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</ResponsiveLayout>
)
}

395
frontend/app/creator/appeals/new/page.tsx Normal file
View File

@ -0,0 +1,395 @@
'use client'
import { useState } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import {
ArrowLeft,
Upload,
X,
FileText,
Image,
AlertTriangle,
CheckCircle
} from 'lucide-react'
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
import { cn } from '@/lib/utils'
// 申诉原因选项
const appealReasons = [
{ id: 'misjudge', label: '误判', description: 'AI或审核员误判了内容' },
{ id: 'unclear', label: '标准不清晰', description: '审核标准不明确或有歧义' },
{ id: 'evidence', label: '有证据支持', description: '有证据证明内容符合要求' },
{ id: 'context', label: '上下文理解', description: '审核未考虑完整上下文' },
{ id: 'other', label: '其他原因', description: '其他需要说明的情况' },
]
// 任务信息（模拟从URL参数获取）
const getTaskInfo = (taskId: string) => {
const tasks: Record<string, { title: string; issue: string; issueDesc: string; type: string; appealRemaining: number; agencyName: string }> = {
'task-003': {
title: 'ZZ饮品夏日',
issue: '检测到竞品提及',
issueDesc: '脚本第3段提及了竞品「百事可乐」，可能造成品牌冲突风险。',
type: 'ai',
appealRemaining: 1,
agencyName: '星辰传媒',
},
'task-010': {
title: 'GG智能手表',
issue: '品牌调性不符',
issueDesc: '脚本整体风格偏向娱乐化，与品牌科技专业形象不匹配。',
type: 'agency',
appealRemaining: 0,
agencyName: '星辰传媒',
},
'task-011': {
title: 'HH美妆代言',
issue: '创意不够新颖',
issueDesc: '脚本采用的是常见的口播形式，缺乏创新点和记忆点。',
type: 'brand',
appealRemaining: 1,
agencyName: '晨曦文化',
},
'task-013': {
title: 'JJ旅行vlog',
issue: '背景音乐版权问题',
issueDesc: '视频中使用的背景音乐存在版权风险。',
type: 'agency',
appealRemaining: 2,
agencyName: '晨曦文化',
},
'task-015': {
title: 'LL厨房电器',
issue: '使用场景不真实',
issueDesc: '视频中的厨房场景过于整洁，缺乏真实感。',
type: 'brand',
appealRemaining: 0,
agencyName: '星辰传媒',
},
}
return tasks[taskId] || { title: '未知任务', issue: '未知问题', issueDesc: '', type: 'ai', appealRemaining: 0, agencyName: '未知代理商' }
}
export default function NewAppealPage() {
const router = useRouter()
const searchParams = useSearchParams()
const taskId = searchParams.get('taskId') || ''
const taskInfo = getTaskInfo(taskId)
const [selectedReason, setSelectedReason] = useState<string>('')
const [content, setContent] = useState('')
const [attachments, setAttachments] = useState<{ name: string; type: 'image' | 'document' }[]>([])
const [isSubmitting, setIsSubmitting] = useState(false)
const [isSubmitted, setIsSubmitted] = useState(false)
const [isRequestingQuota, setIsRequestingQuota] = useState(false)
const [quotaRequested, setQuotaRequested] = useState(false)
const hasAppealQuota = taskInfo.appealRemaining > 0
const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
const files = e.target.files
if (files) {
const newAttachments = Array.from(files).map(file => ({
name: file.name,
type: file.type.startsWith('image/') ? 'image' as const : 'document' as const,
}))
setAttachments([...attachments, ...newAttachments])
}
}
const removeAttachment = (index: number) => {
setAttachments(attachments.filter((_, i) => i !== index))
}
const handleSubmit = async () => {
if (!selectedReason || !content.trim()) return
setIsSubmitting(true)
// 模拟提交
await new Promise(resolve => setTimeout(resolve, 1500))
setIsSubmitting(false)
setIsSubmitted(true)
// 2秒后跳转到申诉列表
setTimeout(() => {
router.push('/creator/appeals')
}, 2000)
}
const canSubmit = selectedReason && content.trim().length >= 20 && hasAppealQuota
// 申请增加申诉次数
const handleRequestQuota = async () => {
setIsRequestingQuota(true)
await new Promise(resolve => setTimeout(resolve, 1000))
setIsRequestingQuota(false)
setQuotaRequested(true)
}
// 提交成功界面
if (isSubmitted) {
return (
<ResponsiveLayout role="creator">
<div className="flex items-center justify-center h-full">
<div className="flex flex-col items-center gap-6 max-w-md text-center">
<div className="w-20 h-20 rounded-full bg-accent-green/15 flex items-center justify-center">
<CheckCircle className="w-10 h-10 text-accent-green" />
</div>
<div className="flex flex-col gap-2">
<h2 className="text-2xl font-bold text-text-primary">申诉提交成功</h2>
<p className="text-text-secondary">
您的申诉已提交，我们将在 1-3 个工作日内处理完成。处理结果将通过消息中心通知您。
</p>
</div>
<p className="text-sm text-text-tertiary">正在跳转到申诉列表...</p>
</div>
</div>
</ResponsiveLayout>
)
}
return (
<ResponsiveLayout role="creator">
<div className="flex flex-col gap-6 h-full">
{/* 顶部栏 */}
<div className="flex items-center justify-between flex-wrap gap-4">
<div className="flex flex-col gap-1">
<button
type="button"
onClick={() => router.back()}
className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-bg-elevated text-text-secondary text-sm hover:bg-bg-card transition-colors w-fit mb-2"
>
<ArrowLeft className="w-4 h-4" />
返回
</button>
<h1 className="text-xl lg:text-[28px] font-bold text-text-primary">发起申诉</h1>
<p className="text-sm lg:text-[15px] text-text-secondary">对审核结果有异议？提交申诉让我们重新审核</p>
</div>
<div className={cn(
'flex items-center gap-2 px-4 py-2 rounded-xl',
hasAppealQuota ? 'bg-accent-indigo/15' : 'bg-accent-coral/15'
)}>
<AlertTriangle className={cn('w-5 h-5', hasAppealQuota ? 'text-accent-indigo' : 'text-accent-coral')} />
<span className={cn('text-sm font-medium', hasAppealQuota ? 'text-accent-indigo' : 'text-accent-coral')}>
本任务剩余 {taskInfo.appealRemaining} 次申诉机会
</span>
</div>
</div>
{/* 内容区 - 响应式布局 */}
<div className="flex flex-col lg:flex-row gap-6 flex-1 min-h-0 overflow-y-auto lg:overflow-hidden">
{/* 左侧：申诉表单 */}
<div className="flex-1 flex flex-col gap-5 lg:overflow-y-auto lg:pr-2">
{/* 关联任务 */}
<div className="bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow">
<h3 className="text-base lg:text-lg font-semibold text-text-primary mb-4">关联任务</h3>
<div className="bg-bg-elevated rounded-xl p-4">
<div className="flex items-center justify-between mb-3">
<span className="text-base font-semibold text-text-primary">{taskInfo.title}</span>
<span className="px-2.5 py-1 rounded-full text-xs font-medium bg-accent-coral/15 text-accent-coral">
{taskInfo.type === 'ai' ? 'AI审核' : taskInfo.type === 'agency' ? '代理商审核' : '品牌方审核'}
</span>
</div>
<div className="flex items-start gap-2">
<AlertTriangle className="w-4 h-4 text-accent-coral flex-shrink-0 mt-0.5" />
<div>
<span className="text-sm font-medium text-text-primary">{taskInfo.issue}</span>
<p className="text-xs text-text-secondary mt-1">{taskInfo.issueDesc}</p>
</div>
</div>
</div>
</div>
{/* 申诉次数不足提示 */}
{!hasAppealQuota && (
<div className="bg-accent-coral/10 border border-accent-coral/30 rounded-2xl p-4 lg:p-6">
<div className="flex items-start gap-3">
<AlertTriangle className="w-5 h-5 text-accent-coral flex-shrink-0 mt-0.5" />
<div className="flex-1">
<h3 className="text-base font-semibold text-accent-coral mb-2">申诉次数不足</h3>
<p className="text-sm text-text-secondary mb-4">
本任务的申诉次数已用完，无法提交新的申诉。您可以向代理商「{taskInfo.agencyName}」申请增加申诉次数。
</p>
{quotaRequested ? (
<div className="flex items-center gap-2 text-accent-green">
<CheckCircle className="w-4 h-4" />
<span className="text-sm font-medium">申请已发送，等待代理商处理</span>
</div>
) : (
<button
type="button"
onClick={handleRequestQuota}
disabled={isRequestingQuota}
className="px-4 py-2 bg-accent-coral text-white rounded-lg text-sm font-medium hover:bg-accent-coral/90 transition-colors disabled:opacity-50"
>
{isRequestingQuota ? '申请中...' : '申请增加申诉次数'}
</button>
)}
</div>
</div>
</div>
)}
{/* 申诉原因 */}
<div className={cn('bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow', !hasAppealQuota && 'opacity-50 pointer-events-none')}>
<h3 className="text-base lg:text-lg font-semibold text-text-primary mb-4">申诉原因 <span className="text-accent-coral">*</span></h3>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
{appealReasons.map((reason) => (
<div
key={reason.id}
onClick={() => setSelectedReason(reason.id)}
className={cn(
'p-4 rounded-xl border-2 cursor-pointer transition-all',
selectedReason === reason.id
? 'border-accent-indigo bg-accent-indigo/5'
: 'border-border-subtle hover:border-text-tertiary'
)}
>
<span className="text-sm font-semibold text-text-primary">{reason.label}</span>
<p className="text-xs text-text-tertiary mt-1">{reason.description}</p>
</div>
))}
</div>
</div>
{/* 申诉说明 */}
<div className={cn('bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow', !hasAppealQuota && 'opacity-50 pointer-events-none')}>
<h3 className="text-base lg:text-lg font-semibold text-text-primary mb-4">
申诉说明 <span className="text-accent-coral">*</span>
<span className="text-xs text-text-tertiary font-normal ml-2">至少20字</span>
</h3>
<textarea
value={content}
onChange={(e) => setContent(e.target.value)}
placeholder="请详细描述您的申诉理由，包括为什么您认为审核结果不合理..."
className="w-full h-32 lg:h-40 p-4 bg-bg-elevated rounded-xl text-sm text-text-primary placeholder-text-tertiary focus:outline-none focus:ring-2 focus:ring-accent-indigo resize-none"
/>
<div className="flex justify-end mt-2">
<span className={cn(
'text-xs',
content.length >= 20 ? 'text-text-tertiary' : 'text-accent-coral'
)}>
{content.length}/20 字
</span>
</div>
</div>
{/* 证明材料 */}
<div className={cn('bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow', !hasAppealQuota && 'opacity-50 pointer-events-none')}>
<h3 className="text-base lg:text-lg font-semibold text-text-primary mb-4">
证明材料 <span className="text-xs text-text-tertiary font-normal">（可选）</span>
</h3>
<div className="flex flex-wrap gap-3">
{attachments.map((file, index) => (
<div
key={index}
className="flex items-center gap-2 px-3 py-2 bg-bg-elevated rounded-lg"
>
{file.type === 'image' ? (
<Image className="w-4 h-4 text-accent-indigo" />
) : (
<FileText className="w-4 h-4 text-accent-indigo" />
)}
<span className="text-sm text-text-primary max-w-[150px] truncate">{file.name}</span>
<button
type="button"
onClick={() => removeAttachment(index)}
className="w-5 h-5 rounded-full bg-bg-page flex items-center justify-center hover:bg-accent-coral/15"
>
<X className="w-3 h-3 text-text-tertiary" />
</button>
</div>
))}
<label className="flex items-center gap-2 px-4 py-2 bg-bg-elevated rounded-lg cursor-pointer hover:bg-bg-page transition-colors">
<Upload className="w-4 h-4 text-accent-indigo" />
<span className="text-sm text-accent-indigo">上传文件</span>
<input
type="file"
multiple
accept="image/*,.pdf,.doc,.docx"
onChange={handleFileUpload}
className="hidden"
/>
</label>
</div>
<p className="text-xs text-text-tertiary mt-3">支持图片、PDF、Word 文档，单个文件不超过 10MB</p>
</div>
{/* 移动端提交按钮 */}
<div className="lg:hidden">
<button
type="button"
onClick={handleSubmit}
disabled={!canSubmit || isSubmitting}
className={cn(
'w-full py-4 rounded-xl text-base font-semibold',
canSubmit && !isSubmitting
? 'bg-accent-indigo text-white'
: 'bg-bg-elevated text-text-tertiary'
)}
>
{isSubmitting ? '提交中...' : '提交申诉'}
</button>
</div>
</div>
{/* 右侧：提交信息（仅桌面端显示） */}
<div className="hidden lg:block lg:w-[320px] lg:flex-shrink-0">
<div className="bg-bg-card rounded-2xl p-6 card-shadow sticky top-0">
<h3 className="text-lg font-semibold text-text-primary mb-5">提交确认</h3>
<div className="flex flex-col gap-4 mb-6">
<div className="flex items-center justify-between">
<span className="text-sm text-text-tertiary">关联任务</span>
<span className="text-sm text-text-primary">{taskInfo.title}</span>
</div>
<div className="flex items-center justify-between">
<span className="text-sm text-text-tertiary">申诉原因</span>
<span className="text-sm text-text-primary">
{appealReasons.find(r => r.id === selectedReason)?.label || '未选择'}
</span>
</div>
<div className="flex items-center justify-between">
<span className="text-sm text-text-tertiary">说明字数</span>
<span className={cn(
'text-sm',
content.length >= 20 ? 'text-accent-green' : 'text-text-tertiary'
)}>
{content.length} 字
</span>
</div>
<div className="flex items-center justify-between">
<span className="text-sm text-text-tertiary">附件数量</span>
<span className="text-sm text-text-primary">{attachments.length} 个</span>
</div>
</div>
<div className="bg-amber-500/10 rounded-xl p-4 mb-6">
<div className="flex items-start gap-2">
<AlertTriangle className="w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5" />
<p className="text-xs text-text-secondary">
提交后将消耗 1 次申诉机会。请确保信息准确，恶意申诉可能影响您的账号信誉。
</p>
</div>
</div>
<button
type="button"
onClick={handleSubmit}
disabled={!canSubmit || isSubmitting}
className={cn(
'w-full py-4 rounded-xl text-base font-semibold transition-colors',
canSubmit && !isSubmitting
? 'bg-accent-indigo text-white hover:bg-accent-indigo/90'
: 'bg-bg-elevated text-text-tertiary cursor-not-allowed'
)}
>
{isSubmitting ? '提交中...' : '提交申诉'}
</button>
</div>
</div>
</div>
</div>
</ResponsiveLayout>
)
}

274
frontend/app/creator/appeals/page.tsx Normal file
View File

@ -0,0 +1,274 @@
'use client'
import { useState } from 'react'
import { useRouter } from 'next/navigation'
import {
MessageCircle,
Clock,
CheckCircle,
XCircle,
ChevronRight,
AlertTriangle,
Filter,
Search
} from 'lucide-react'
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
import { cn } from '@/lib/utils'
// 申诉状态类型
type AppealStatus = 'pending' | 'processing' | 'approved' | 'rejected'
// 申诉数据类型
type Appeal = {
id: string
taskId: string
taskTitle: string
type: 'ai' | 'agency' | 'brand'
reason: string
content: string
status: AppealStatus
createdAt: string
updatedAt?: string
result?: string
}
// 模拟申诉数据
const mockAppeals: Appeal[] = [
{
id: 'appeal-001',
taskId: 'task-003',
taskTitle: 'ZZ饮品夏日',
type: 'ai',
reason: '误判',
content: '视频中出现的是我们自家品牌的历史产品，并非竞品。已附上品牌授权证明。',
status: 'approved',
createdAt: '2026-02-01 10:30',
updatedAt: '2026-02-02 15:20',
result: '经核实，该产品确为品牌方授权产品，申诉通过。AI已学习此案例。',
},
{
id: 'appeal-002',
taskId: 'task-010',
taskTitle: 'GG智能手表',
type: 'agency',
reason: '审核标准不清晰',
content: '代理商反馈品牌调性不符，但Brief中并未明确说明科技专业形象的具体要求。请明确审核标准。',
status: 'processing',
createdAt: '2026-02-04 09:15',
},
{
id: 'appeal-003',
taskId: 'task-011',
taskTitle: 'HH美妆代言',
type: 'brand',
reason: '创意理解差异',
content: '品牌方认为创意不够新颖，但该创意形式在同类型产品推广中效果显著，已附上数据支持。',
status: 'pending',
createdAt: '2026-02-05 14:00',
},
{
id: 'appeal-004',
taskId: 'task-013',
taskTitle: 'JJ旅行vlog',
type: 'agency',
reason: '版权问题异议',
content: '使用的背景音乐来自无版权音乐库 Epidemic Sound，已购买商用授权。附上授权证明截图。',
status: 'rejected',
createdAt: '2026-01-28 11:30',
updatedAt: '2026-01-30 16:45',
result: '经核实，该音乐虽有授权，但授权范围不包含商业广告用途。建议更换音乐后重新提交。',
},
]
// 状态配置
const statusConfig: Record<AppealStatus, { label: string; color: string; bgColor: string; icon: React.ElementType }> = {
pending: { label: '待处理', color: 'text-amber-500', bgColor: 'bg-amber-500/15', icon: Clock },
processing: { label: '处理中', color: 'text-accent-indigo', bgColor: 'bg-accent-indigo/15', icon: MessageCircle },
approved: { label: '已通过', color: 'text-accent-green', bgColor: 'bg-accent-green/15', icon: CheckCircle },
rejected: { label: '已驳回', color: 'text-accent-coral', bgColor: 'bg-accent-coral/15', icon: XCircle },
}
// 类型配置
const typeConfig: Record<string, { label: string; color: string }> = {
ai: { label: 'AI审核', color: 'text-accent-indigo' },
agency: { label: '代理商审核', color: 'text-purple-400' },
brand: { label: '品牌方审核', color: 'text-accent-blue' },
}
// 申诉卡片组件
function AppealCard({ appeal, onClick }: { appeal: Appeal; onClick: () => void }) {
const status = statusConfig[appeal.status]
const type = typeConfig[appeal.type]
const StatusIcon = status.icon
return (
<div
className="bg-bg-card rounded-2xl p-5 card-shadow cursor-pointer hover:bg-bg-elevated/30 transition-colors"
onClick={onClick}
>
{/* 头部 */}
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3">
<div className={cn('w-10 h-10 rounded-xl flex items-center justify-center', status.bgColor)}>
<StatusIcon className={cn('w-5 h-5', status.color)} />
</div>
<div className="flex flex-col gap-0.5">
<span className="text-base font-semibold text-text-primary">{appeal.taskTitle}</span>
<span className="text-xs text-text-tertiary">申诉编号: {appeal.id}</span>
</div>
</div>
<div className="flex items-center gap-2">
<span className={cn('px-2.5 py-1 rounded-full text-xs font-medium', status.bgColor, status.color)}>
{status.label}
</span>
<ChevronRight className="w-5 h-5 text-text-tertiary" />
</div>
</div>
{/* 内容 */}
<div className="flex flex-col gap-3">
<div className="flex items-center gap-4 text-sm">
<span className="text-text-tertiary">申诉对象:</span>
<span className={cn('font-medium', type.color)}>{type.label}</span>
</div>
<div className="flex items-center gap-4 text-sm">
<span className="text-text-tertiary">申诉原因:</span>
<span className="text-text-primary">{appeal.reason}</span>
</div>
<p className="text-sm text-text-secondary line-clamp-2">{appeal.content}</p>
</div>
{/* 底部时间 */}
<div className="flex items-center justify-between mt-4 pt-4 border-t border-border-subtle">
<span className="text-xs text-text-tertiary">提交时间: {appeal.createdAt}</span>
{appeal.updatedAt && (
<span className="text-xs text-text-tertiary">更新时间: {appeal.updatedAt}</span>
)}
</div>
</div>
)
}
// 申诉次数入口卡片
function AppealQuotaEntryCard({ onClick }: { onClick: () => void }) {
return (
<div
className="bg-bg-card rounded-2xl p-5 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-3">
<div className="w-10 h-10 rounded-xl bg-accent-indigo/15 flex items-center justify-center">
<AlertTriangle className="w-5 h-5 text-accent-indigo" />
</div>
<div className="flex flex-col gap-0.5">
<span className="text-base font-semibold text-text-primary">申诉次数管理</span>
<span className="text-sm text-text-secondary">查看各任务的申诉次数，向代理商申请增加</span>
</div>
</div>
<ChevronRight className="w-5 h-5 text-text-tertiary" />
</div>
</div>
)
}
export default function CreatorAppealsPage() {
const router = useRouter()
const [filter, setFilter] = useState<AppealStatus | 'all'>('all')
const [searchQuery, setSearchQuery] = useState('')
const [appeals] = useState<Appeal[]>(mockAppeals)
// 搜索和筛选
const filteredAppeals = appeals.filter(appeal => {
const matchesSearch = searchQuery === '' ||
appeal.taskTitle.toLowerCase().includes(searchQuery.toLowerCase()) ||
appeal.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
appeal.reason.toLowerCase().includes(searchQuery.toLowerCase())
const matchesFilter = filter === 'all' || appeal.status === filter
return matchesSearch && matchesFilter
})
const handleAppealClick = (appealId: string) => {
router.push(`/creator/appeals/${appealId}`)
}
// 跳转到申诉次数管理页面
const handleGoToQuotaPage = () => {
router.push('/creator/appeal-quota')
}
return (
<ResponsiveLayout role="creator">
<div className="flex flex-col gap-6 h-full">
{/* 顶部栏 */}
<div className="flex items-center justify-between flex-wrap gap-4">
<div className="flex flex-col gap-1">
<h1 className="text-xl lg:text-[28px] font-bold text-text-primary">申诉中心</h1>
<p className="text-sm lg:text-[15px] text-text-secondary">管理您的申诉记录和申诉额度</p>
</div>
<div className="flex items-center gap-3">
<div className="flex items-center gap-2 px-4 py-2.5 bg-bg-card rounded-xl border border-border-subtle">
<Search className="w-[18px] h-[18px] text-text-secondary" />
<input
type="text"
placeholder="搜索申诉..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="bg-transparent text-sm text-text-primary placeholder-text-tertiary focus:outline-none w-32"
/>
</div>
<div className="flex items-center gap-2 px-4 py-2.5 bg-bg-card rounded-xl border border-border-subtle">
<Filter className="w-[18px] h-[18px] text-text-secondary" />
<select
value={filter}
onChange={(e) => setFilter(e.target.value as AppealStatus | 'all')}
className="bg-transparent text-sm text-text-primary focus:outline-none"
>
<option value="all">全部状态</option>
<option value="pending">待处理</option>
<option value="processing">处理中</option>
<option value="approved">已通过</option>
<option value="rejected">已驳回</option>
</select>
</div>
</div>
</div>
{/* 申诉次数管理入口 */}
<AppealQuotaEntryCard onClick={handleGoToQuotaPage} />
{/* 申诉列表 */}
<div className="flex flex-col gap-4 flex-1 overflow-y-auto pr-2">
<h2 className="text-lg font-semibold text-text-primary">申诉记录 ({filteredAppeals.length})</h2>
{filteredAppeals.length > 0 ? (
filteredAppeals.map((appeal) => (
<AppealCard
key={appeal.id}
appeal={appeal}
onClick={() => handleAppealClick(appeal.id)}
/>
))
) : (
<div className="flex flex-col items-center justify-center py-16">
<MessageCircle className="w-12 h-12 text-text-tertiary/50 mb-4" />
<p className="text-text-secondary text-center">
{searchQuery || filter !== 'all'
? '没有找到匹配的申诉记录'
: '暂无申诉记录'}
</p>
{(searchQuery || filter !== 'all') && (
<button
type="button"
onClick={() => { setSearchQuery(''); setFilter('all'); }}
className="mt-3 text-sm text-accent-indigo hover:underline"
>
清除筛选条件
</button>
)}
</div>
)}
</div>
</div>
</ResponsiveLayout>
)
}

268
frontend/app/creator/help/page.tsx Normal file
View File

@ -0,0 +1,268 @@
'use client'
import { useState } from 'react'
import { useRouter } from 'next/navigation'
import {
ArrowLeft,
ChevronRight,
ChevronDown,
MessageCircle,
Phone,
Mail,
FileQuestion,
Video,
FileText,
AlertCircle,
Send
} from 'lucide-react'
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
import { cn } from '@/lib/utils'
// FAQ 数据
const faqData = [
{
category: '任务相关',
icon: FileText,
questions: [
{
q: '如何接收新任务？',
a: '您需要先接受代理商的签约邀请，成为签约达人后即可在"我的任务"中查看分配给您的推广任务。',
},
{
q: '脚本被驳回后可以申诉吗？',
a: '可以的。在任务详情页面点击"申诉"按钮，填写申诉原因并上传证明材料即可。每月有5次申诉机会。',
},
{
q: '视频上传有什么格式要求？',
a: '支持 MP4、MOV 格式，文件大小不超过 100MB，建议分辨率 1080P 以上，时长根据任务要求而定。',
},
],
},
{
category: '审核流程',
icon: Video,
questions: [
{
q: 'AI 审核需要多长时间？',
a: 'AI 审核通常在 2-5 分钟内完成。如果队列繁忙，可能需要更长时间，您可以离开页面，审核完成后会通过消息中心通知您。',
},
{
q: '代理商审核和品牌方审核有什么区别？',
a: '代理商审核主要检查内容质量和基本合规性，品牌方审核则侧重于品牌调性和营销效果的把控。',
},
{
q: '审核不通过的常见原因有哪些？',
a: '常见原因包括：违禁词使用、竞品露出、品牌调性不符、卖点表达不清晰、视频画质或音质问题等。',
},
],
},
{
category: '账户问题',
icon: AlertCircle,
questions: [
{
q: '如何修改绑定的手机号？',
a: '进入"个人中心"→"账户设置"，在手机号绑定区域点击"更换"，按提示完成验证即可。',
},
{
q: '申诉次数用完了怎么办？',
a: '您可以在"申诉中心"点击"申请增加"按钮，提交申请后等待审核。通过率高的达人更容易获得额外申诉机会。',
},
],
},
]
// FAQ 项组件
function FAQItem({ question, answer }: { question: string; answer: string }) {
const [isOpen, setIsOpen] = useState(false)
return (
<div className="border-b border-border-subtle last:border-b-0">
<button
type="button"
onClick={() => setIsOpen(!isOpen)}
className="w-full flex items-center justify-between py-4 text-left"
>
<span className="text-sm font-medium text-text-primary pr-4">{question}</span>
<ChevronDown
className={cn(
'w-5 h-5 text-text-tertiary flex-shrink-0 transition-transform',
isOpen && 'rotate-180'
)}
/>
</button>
{isOpen && (
<div className="pb-4">
<p className="text-sm text-text-secondary leading-relaxed">{answer}</p>
</div>
)}
</div>
)
}
// FAQ 分类组件
function FAQCategory({ category, icon: Icon, questions }: {
category: string
icon: React.ElementType
questions: { q: string; a: string }[]
}) {
return (
<div className="bg-bg-card rounded-2xl p-6 card-shadow">
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 rounded-xl bg-accent-indigo/15 flex items-center justify-center">
<Icon className="w-5 h-5 text-accent-indigo" />
</div>
<span className="text-lg font-semibold text-text-primary">{category}</span>
</div>
<div className="flex flex-col">
{questions.map((item, index) => (
<FAQItem key={index} question={item.q} answer={item.a} />
))}
</div>
</div>
)
}
// 联系方式卡片
function ContactCard() {
return (
<div className="bg-bg-card rounded-2xl p-6 card-shadow">
<h3 className="text-lg font-semibold text-text-primary mb-4">联系我们</h3>
<div className="flex flex-col gap-4">
<a
href="#"
className="flex items-center gap-4 p-4 bg-bg-elevated rounded-xl hover:bg-bg-page transition-colors"
>
<div className="w-10 h-10 rounded-xl bg-accent-green/15 flex items-center justify-center">
<MessageCircle className="w-5 h-5 text-accent-green" />
</div>
<div className="flex-1">
<span className="text-sm font-medium text-text-primary">在线客服</span>
<p className="text-xs text-text-tertiary">工作日 9:00-18:00</p>
</div>
<ChevronRight className="w-5 h-5 text-text-tertiary" />
</a>
<a
href="tel:400-123-4567"
className="flex items-center gap-4 p-4 bg-bg-elevated rounded-xl hover:bg-bg-page transition-colors"
>
<div className="w-10 h-10 rounded-xl bg-accent-blue/15 flex items-center justify-center">
<Phone className="w-5 h-5 text-accent-blue" />
</div>
<div className="flex-1">
<span className="text-sm font-medium text-text-primary">客服热线</span>
<p className="text-xs text-text-tertiary">400-123-4567</p>
</div>
<ChevronRight className="w-5 h-5 text-text-tertiary" />
</a>
<a
href="mailto:support@miaosi.com"
className="flex items-center gap-4 p-4 bg-bg-elevated rounded-xl hover:bg-bg-page transition-colors"
>
<div className="w-10 h-10 rounded-xl bg-purple-500/15 flex items-center justify-center">
<Mail className="w-5 h-5 text-purple-400" />
</div>
<div className="flex-1">
<span className="text-sm font-medium text-text-primary">邮件反馈</span>
<p className="text-xs text-text-tertiary">support@miaosi.com</p>
</div>
<ChevronRight className="w-5 h-5 text-text-tertiary" />
</a>
</div>
</div>
)
}
// 反馈表单
function FeedbackForm() {
const [feedback, setFeedback] = useState('')
const [submitted, setSubmitted] = useState(false)
const handleSubmit = () => {
if (feedback.trim()) {
setSubmitted(true)
setFeedback('')
setTimeout(() => setSubmitted(false), 3000)
}
}
return (
<div className="bg-bg-card rounded-2xl p-6 card-shadow">
<h3 className="text-lg font-semibold text-text-primary mb-4">意见反馈</h3>
{submitted ? (
<div className="flex items-center gap-3 p-4 bg-accent-green/15 rounded-xl">
<FileQuestion className="w-5 h-5 text-accent-green" />
<span className="text-sm text-accent-green">感谢您的反馈！我们会认真处理。</span>
</div>
) : (
<>
<textarea
value={feedback}
onChange={(e) => setFeedback(e.target.value)}
placeholder="请描述您遇到的问题或提出建议..."
className="w-full h-32 p-4 bg-bg-elevated rounded-xl text-sm text-text-primary placeholder-text-tertiary focus:outline-none focus:ring-2 focus:ring-accent-indigo resize-none"
/>
<button
type="button"
onClick={handleSubmit}
disabled={!feedback.trim()}
className={cn(
'w-full mt-4 py-3 rounded-xl text-sm font-semibold flex items-center justify-center gap-2 transition-colors',
feedback.trim()
? 'bg-accent-indigo text-white hover:bg-accent-indigo/90'
: 'bg-bg-elevated text-text-tertiary cursor-not-allowed'
)}
>
<Send className="w-4 h-4" />
提交反馈
</button>
</>
)}
</div>
)
}
export default function CreatorHelpPage() {
const router = useRouter()
return (
<ResponsiveLayout role="creator">
<div className="flex flex-col gap-6 h-full">
{/* 顶部栏 */}
<div className="flex flex-col gap-1">
<button
type="button"
onClick={() => router.back()}
className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-bg-elevated text-text-secondary text-sm hover:bg-bg-card transition-colors w-fit mb-2"
>
<ArrowLeft className="w-4 h-4" />
返回
</button>
<h1 className="text-xl lg:text-[28px] font-bold text-text-primary">帮助与反馈</h1>
<p className="text-sm lg:text-[15px] text-text-secondary">常见问题解答和联系方式</p>
</div>
{/* 内容区 - 响应式布局 */}
<div className="flex flex-col lg:flex-row gap-6 flex-1 min-h-0 overflow-y-auto lg:overflow-hidden">
{/* FAQ */}
<div className="flex-1 flex flex-col gap-5 lg:overflow-y-auto lg:pr-2">
{faqData.map((category, index) => (
<FAQCategory
key={index}
category={category.category}
icon={category.icon}
questions={category.questions}
/>
))}
</div>
{/* 联系方式和反馈 */}
<div className="lg:w-[360px] lg:flex-shrink-0 flex flex-col gap-5">
<ContactCard />
<FeedbackForm />
</div>
</div>
</div>
</ResponsiveLayout>
)
}

203
frontend/app/creator/history/page.tsx Normal file
View File

@ -0,0 +1,203 @@
'use client'
import { useState } from 'react'
import { useRouter } from 'next/navigation'
import {
ArrowLeft,
CheckCircle,
XCircle,
Clock,
Video,
Filter,
ChevronRight
} from 'lucide-react'
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
import { cn } from '@/lib/utils'
// 历史任务状态类型
type HistoryStatus = 'completed' | 'expired' | 'cancelled'
// 历史任务数据类型
type HistoryTask = {
id: string
title: string
description: string
status: HistoryStatus
completedAt?: string
expiredAt?: string
platform: string
}
// 模拟历史数据
const mockHistory: HistoryTask[] = [
{
id: 'hist-001',
title: 'MM春季护肤品推广',
description: '产品测评 · 已发布',
status: 'completed',
completedAt: '2026-01-20',
platform: '抖音',
},
{
id: 'hist-002',
title: 'NN零食新品试吃',
description: '美食测评 · 已发布',
status: 'completed',
completedAt: '2026-01-15',
platform: '小红书',
},
{
id: 'hist-003',
title: 'OO运动装备测评',
description: '运动视频 · 已过期',
status: 'expired',
expiredAt: '2026-01-10',
platform: '抖音',
},
{
id: 'hist-004',
title: 'PP家居用品展示',
description: '生活vlog · 已取消',
status: 'cancelled',
expiredAt: '2026-01-05',
platform: 'B站',
},
{
id: 'hist-005',
title: 'QQ电子产品开箱',
description: '科技测评 · 已发布',
status: 'completed',
completedAt: '2025-12-28',
platform: '抖音',
},
{
id: 'hist-006',
title: 'RR母婴用品推荐',
description: '种草视频 · 已发布',
status: 'completed',
completedAt: '2025-12-20',
platform: '小红书',
},
]
// 状态配置
const statusConfig: Record<HistoryStatus, { label: string; color: string; bgColor: string; icon: React.ElementType }> = {
completed: { label: '已完成', color: 'text-accent-green', bgColor: 'bg-accent-green/15', icon: CheckCircle },
expired: { label: '已过期', color: 'text-text-tertiary', bgColor: 'bg-bg-elevated', icon: Clock },
cancelled: { label: '已取消', color: 'text-accent-coral', bgColor: 'bg-accent-coral/15', icon: XCircle },
}
// 历史任务卡片
function HistoryCard({ task, onClick }: { task: HistoryTask; onClick: () => void }) {
const status = statusConfig[task.status]
const StatusIcon = status.icon
return (
<div
className="bg-bg-card rounded-2xl p-5 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-16 h-12 rounded-lg bg-[#1A1A1E] flex items-center justify-center flex-shrink-0">
<Video className="w-5 h-5 text-text-tertiary" />
</div>
<div className="flex flex-col gap-1">
<span className="text-base font-semibold text-text-primary">{task.title}</span>
<span className="text-sm text-text-secondary">{task.description}</span>
<div className="flex items-center gap-3 mt-1">
<span className="text-xs text-text-tertiary">{task.platform}</span>
<span className="text-xs text-text-tertiary">
{task.completedAt || task.expiredAt}
</span>
</div>
</div>
</div>
<div className="flex items-center gap-3">
<div className={cn('px-3 py-1.5 rounded-lg flex items-center gap-1.5', status.bgColor)}>
<StatusIcon className={cn('w-4 h-4', status.color)} />
<span className={cn('text-sm font-medium', status.color)}>{status.label}</span>
</div>
<ChevronRight className="w-5 h-5 text-text-tertiary" />
</div>
</div>
</div>
)
}
export default function CreatorHistoryPage() {
const router = useRouter()
const [filter, setFilter] = useState<HistoryStatus | 'all'>('all')
const filteredHistory = filter === 'all' ? mockHistory : mockHistory.filter(t => t.status === filter)
return (
<ResponsiveLayout role="creator">
<div className="flex flex-col gap-6 h-full">
{/* 顶部栏 */}
<div className="flex items-center justify-between flex-wrap gap-4">
<div className="flex flex-col gap-1">
<button
type="button"
onClick={() => router.back()}
className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-bg-elevated text-text-secondary text-sm hover:bg-bg-card transition-colors w-fit mb-2"
>
<ArrowLeft className="w-4 h-4" />
返回
</button>
<h1 className="text-xl lg:text-[28px] font-bold text-text-primary">历史记录</h1>
<p className="text-sm lg:text-[15px] text-text-secondary">查看已完成和过期的任务</p>
</div>
<div className="flex items-center gap-2 px-4 py-2.5 bg-bg-card rounded-xl border border-border-subtle">
<Filter className="w-[18px] h-[18px] text-text-secondary" />
<select
value={filter}
onChange={(e) => setFilter(e.target.value as HistoryStatus | 'all')}
className="bg-transparent text-sm text-text-primary focus:outline-none"
>
<option value="all">全部状态</option>
<option value="completed">已完成</option>
<option value="expired">已过期</option>
<option value="cancelled">已取消</option>
</select>
</div>
</div>
{/* 统计信息 */}
<div className="flex items-center gap-6 bg-bg-card rounded-2xl p-5 card-shadow">
<div className="flex flex-col items-center gap-1 flex-1">
<span className="text-2xl font-bold text-accent-green">
{mockHistory.filter(t => t.status === 'completed').length}
</span>
<span className="text-xs text-text-tertiary">已完成</span>
</div>
<div className="w-px h-10 bg-border-subtle" />
<div className="flex flex-col items-center gap-1 flex-1">
<span className="text-2xl font-bold text-text-tertiary">
{mockHistory.filter(t => t.status === 'expired').length}
</span>
<span className="text-xs text-text-tertiary">已过期</span>
</div>
<div className="w-px h-10 bg-border-subtle" />
<div className="flex flex-col items-center gap-1 flex-1">
<span className="text-2xl font-bold text-accent-coral">
{mockHistory.filter(t => t.status === 'cancelled').length}
</span>
<span className="text-xs text-text-tertiary">已取消</span>
</div>
</div>
{/* 任务列表 */}
<div className="flex flex-col gap-4 flex-1 overflow-y-auto pr-2">
{filteredHistory.map((task) => (
<HistoryCard
key={task.id}
task={task}
onClick={() => router.push(`/creator/task/${task.id}`)}
/>
))}
</div>
</div>
</ResponsiveLayout>
)
}

663
frontend/app/creator/messages/page.tsx
View File

@ -1,244 +1,529 @@
'use client' 'use client'
import { useState } from 'react'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import { useEffect, useState } from 'react' import {
import { Bell, CheckCircle, XCircle, Clock, ChevronDown, ChevronRight } from 'lucide-react' UserPlus,
import { DesktopLayout } from '@/components/layout/DesktopLayout' ClipboardList,
import { MobileLayout } from '@/components/layout/MobileLayout' CheckCircle,
PenLine,
ScanSearch,
Building2,
XCircle,
BadgeCheck,
Video,
MessageCircle,
} from 'lucide-react'
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
type MessageStatus = 'info' | 'success' | 'error' // 消息类型
type MessageType =
| 'invite' // 代理商邀请
| 'new_task' // 新任务分配
| 'pass' // 审核通过
| 'need_fix' // 需要修改
| 'ai_complete' // AI审核完成
| 'agency_pass' // 代理商审核通过
| 'agency_reject' // 代理商审核驳回
| 'brand_pass' // 品牌方审核通过
| 'brand_reject' // 品牌方审核驳回
| 'video_ai' // 视频AI审核完成
| 'appeal' // 申诉结果
| 'video_agency_reject' // 视频代理商驳回
| 'video_brand_reject' // 视频品牌方驳回
const mockMessages = [ type Message = {
id: string
type: MessageType
title: string
content: string
time: string
read: boolean
taskId?: string
hasActions?: boolean // 是否有操作按钮（邀请类型）
}
// 消息配置
const messageConfig: Record<MessageType, {
icon: React.ElementType
iconColor: string
bgColor: string
}> = {
invite: { icon: UserPlus, iconColor: 'text-purple-400', bgColor: 'bg-purple-500/20' },
new_task: { icon: ClipboardList, iconColor: 'text-accent-indigo', bgColor: 'bg-accent-indigo/20' },
pass: { icon: CheckCircle, iconColor: 'text-accent-green', bgColor: 'bg-accent-green/20' },
need_fix: { icon: PenLine, iconColor: 'text-accent-coral', bgColor: 'bg-accent-coral/20' },
ai_complete: { icon: ScanSearch, iconColor: 'text-accent-indigo', bgColor: 'bg-accent-indigo/20' },
agency_pass: { icon: Building2, iconColor: 'text-accent-green', bgColor: 'bg-accent-green/20' },
agency_reject: { icon: XCircle, iconColor: 'text-accent-coral', bgColor: 'bg-accent-coral/20' },
brand_pass: { icon: BadgeCheck, iconColor: 'text-accent-green', bgColor: 'bg-accent-green/20' },
brand_reject: { icon: XCircle, iconColor: 'text-accent-coral', bgColor: 'bg-accent-coral/20' },
video_ai: { icon: Video, iconColor: 'text-accent-indigo', bgColor: 'bg-accent-indigo/20' },
appeal: { icon: MessageCircle, iconColor: 'text-accent-blue', bgColor: 'bg-accent-blue/20' },
video_agency_reject: { icon: XCircle, iconColor: 'text-accent-coral', bgColor: 'bg-accent-coral/20' },
video_brand_reject: { icon: XCircle, iconColor: 'text-accent-coral', bgColor: 'bg-accent-coral/20' },
}
// 12条消息数据
const mockMessages: Message[] = [
{ {
id: 'msg-001', id: 'msg-001',
taskId: 'task-002', type: 'invite',
title: 'AI 审核通过', title: '代理商邀请',
description: '已进入代理商审核，请等待最终结果。', content: '「星辰传媒」邀请您成为签约达人，加入后可接收该代理商分配的推广任务',
time: '刚刚', time: '5分钟前',
status: 'success' as MessageStatus,
read: false, read: false,
hasActions: true,
}, },
{ {
id: 'msg-002', id: 'msg-002',
taskId: 'task-003', type: 'new_task',
title: 'AI 审核未通过', title: '新任务分配',
description: '检测到竞品 Logo 与绝对化用语，请修改后重新提交。', content: '您有一个新任务【XX品牌618推广】，请在3天内提交脚本',
time: '10 分钟前', time: '10分钟前',
status: 'error' as MessageStatus,
read: false, read: false,
taskId: 'task-001',
}, },
{ {
id: 'msg-003', id: 'msg-003',
taskId: 'task-001', type: 'pass',
title: '等待提交脚本', title: '审核通过',
description: '请先上传脚本，系统才能开始合规预审。', content: '恭喜！您的视频【AA数码新品发布】已通过审核，可安排发布',
time: '1 小时前', time: '2小时前',
status: 'info' as MessageStatus,
read: true, read: true,
taskId: 'task-004',
},
{
id: 'msg-004',
type: 'need_fix',
title: '需要修改',
content: '您的视频【ZZ饮品夏日】有2处需修改：00:15竞品露出、00:42口播违规词，点击查看详情',
time: '昨天 14:30',
read: true,
taskId: 'task-003',
},
{
id: 'msg-005',
type: 'ai_complete',
title: 'AI审核完成',
content: '您的脚本【CC服装春季款】AI预审已完成，已进入代理商审核',
time: '30分钟前',
read: true,
taskId: 'task-006',
},
{
id: 'msg-006',
type: 'agency_pass',
title: '代理商审核通过',
content: '您的脚本【DD家电测评】已通过代理商审核，等待品牌方终审',
time: '1小时前',
read: true,
taskId: 'task-007',
},
{
id: 'msg-007',
type: 'agency_reject',
title: '代理商审核驳回',
content: '您的脚本【HH美妆代言】被代理商驳回，原因：品牌调性不符，请修改后重新提交',
time: '2小时前',
read: true,
taskId: 'task-010',
},
{
id: 'msg-008',
type: 'brand_pass',
title: '品牌方审核通过',
content: '恭喜！您的脚本【EE食品试吃】已通过品牌方终审，请在7天内上传视频',
time: '昨天 14:30',
read: true,
taskId: 'task-008',
},
{
id: 'msg-009',
type: 'brand_reject',
title: '品牌方审核驳回',
content: '您的脚本【II数码配件】被品牌方驳回，原因：产品卖点不够突出，请修改后重新提交',
time: '昨天 16:45',
read: true,
taskId: 'task-011',
},
{
id: 'msg-010',
type: 'video_ai',
title: '视频AI审核完成',
content: '您的视频【JJ旅行vlog】AI预审已完成，已进入代理商审核环节',
time: '今天 09:15',
read: true,
taskId: 'task-013',
},
{
id: 'msg-011',
type: 'appeal',
title: '申诉结果通知',
content: '您的申诉已通过，AI已学习您的反馈，感谢您帮助我们改进系统',
time: '3天前',
read: false,
},
{
id: 'msg-012',
type: 'video_agency_reject',
title: '视频代理商审核驳回',
content: '您的视频【KK宠物用品】被代理商驳回，原因：背景音乐版权问题，请修改后重新提交',
time: '今天 11:20',
read: true,
taskId: 'task-014',
},
{
id: 'msg-013',
type: 'video_brand_reject',
title: '视频品牌方审核驳回',
content: '您的视频【MM厨房电器】被品牌方驳回，原因：产品使用场景不够真实，请修改后重新提交',
time: '昨天 18:30',
read: true,
taskId: 'task-015',
}, },
] ]
const statusConfig: Record<MessageStatus, { icon: React.ElementType; color: string; bg: string }> = { // 消息卡片组件
success: { icon: CheckCircle, color: 'text-accent-green', bg: 'bg-accent-green/15' },
error: { icon: XCircle, color: 'text-accent-coral', bg: 'bg-accent-coral/15' },
info: { icon: Clock, color: 'text-accent-indigo', bg: 'bg-accent-indigo/15' },
}
function MessageCard({ function MessageCard({
title, message,
description, onRead,
time, onNavigate,
status, onAcceptInvite,
isRead, onIgnoreInvite,
onClick,
}: { }: {
title: string message: Message
description: string onRead: () => void
time: string onNavigate: () => void
status: MessageStatus onAcceptInvite?: () => void
isRead: boolean onIgnoreInvite?: () => void
onClick: () => void
}) { }) {
const Icon = statusConfig[status].icon const config = messageConfig[message.type]
const Icon = config.icon
return ( return (
<div
className={cn(
'rounded-xl p-4 flex gap-4 cursor-pointer transition-colors',
message.read
? 'bg-transparent border border-bg-elevated'
: 'bg-bg-elevated'
)}
onClick={() => {
onRead()
if (message.taskId) onNavigate()
}}
>
{/* 图标 */}
<div className={cn('w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0', config.bgColor)}>
<Icon size={24} className={config.iconColor} />
</div>
{/* 内容 */}
<div className="flex-1 flex flex-col gap-2">
{/* 头部 */}
<div className="flex items-center justify-between">
<span className="text-[15px] font-semibold text-text-primary">{message.title}</span>
<span className="text-xs text-text-secondary">{message.time}</span>
</div>
{/* 描述 */}
<p className="text-sm text-text-secondary leading-relaxed">{message.content}</p>
{/* 邀请类型的操作按钮 */}
{message.hasActions && (
<div className="flex items-center gap-3 pt-2">
<button <button
type="button" type="button"
onClick={onClick} className="px-4 py-2 rounded-md bg-accent-indigo text-white text-sm font-medium hover:bg-accent-indigo/90 transition-colors"
onClick={(e) => {
e.stopPropagation()
onAcceptInvite?.()
}}
>
接受邀请
</button>
<button
type="button"
className="px-4 py-2 rounded-md border border-border-subtle text-text-secondary text-sm font-medium hover:bg-bg-elevated transition-colors"
onClick={(e) => {
e.stopPropagation()
onIgnoreInvite?.()
}}
>
暂时忽略
</button>
</div>
)}
</div>
{/* 未读标记 */}
{!message.read && (
<div className="w-2.5 h-2.5 rounded-full bg-accent-indigo flex-shrink-0 mt-1" />
)}
</div>
)
}
// 邀请确认弹窗
function InviteConfirmModal({
isOpen,
type,
agencyName,
onClose,
onConfirm,
}: {
isOpen: boolean
type: 'accept' | 'ignore'
agencyName: string
onClose: () => void
onConfirm: () => void
}) {
if (!isOpen) return null
const isAccept = type === 'accept'
return (
<div className="fixed inset-0 z-50 flex items-center justify-center">
<div className="absolute inset-0 bg-black/50" onClick={onClose} />
<div className="relative bg-bg-card rounded-2xl p-6 w-full max-w-md mx-4 card-shadow">
<h3 className="text-xl font-bold text-text-primary mb-2">
{isAccept ? '确认接受邀请' : '确认忽略邀请'}
</h3>
<p className="text-sm text-text-secondary mb-6">
{isAccept
? `您确定要接受「${agencyName}」的签约邀请吗？接受后您将成为该代理商的签约达人，可以接收推广任务。`
: `您确定要忽略「${agencyName}」的邀请吗？您可以稍后在消息中心重新查看此邀请。`}
</p>
<div className="flex items-center gap-3">
<button
type="button"
onClick={onClose}
className="flex-1 py-3 rounded-xl bg-bg-elevated text-text-primary text-sm font-medium"
>
取消
</button>
<button
type="button"
onClick={onConfirm}
className={cn( className={cn(
'w-full text-left bg-bg-card rounded-xl p-4 flex items-start gap-4 card-shadow hover:bg-bg-elevated/50 transition-colors', 'flex-1 py-3 rounded-xl text-sm font-semibold',
!isRead && 'ring-1 ring-accent-indigo/20' isAccept ? 'bg-accent-indigo text-white' : 'bg-accent-coral text-white'
)} )}
> >
<div className={cn('w-10 h-10 rounded-full flex items-center justify-center', statusConfig[status].bg)}> {isAccept ? '确认接受' : '确认忽略'}
<Icon className={cn('w-5 h-5', statusConfig[status].color)} />
</div>
<div className="flex-1 flex flex-col gap-1">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<span className={cn('text-sm', isRead ? 'text-text-primary' : 'text-text-primary font-semibold')}>
{title}
</span>
{!isRead && <span className="w-2 h-2 rounded-full bg-accent-indigo" />}
</div>
<span className="text-xs text-text-tertiary">{time}</span>
</div>
<p className="text-sm text-text-secondary">{description}</p>
</div>
</button> </button>
</div>
</div>
</div>
)
}
// 成功提示弹窗
function SuccessModal({
isOpen,
message,
onClose,
}: {
isOpen: boolean
message: string
onClose: () => void
}) {
if (!isOpen) return null
return (
<div className="fixed inset-0 z-50 flex items-center justify-center">
<div className="absolute inset-0 bg-black/50" onClick={onClose} />
<div className="relative bg-bg-card rounded-2xl p-8 w-full max-w-sm mx-4 card-shadow flex flex-col items-center gap-4">
<div className="w-16 h-16 rounded-full bg-accent-green/15 flex items-center justify-center">
<CheckCircle className="w-8 h-8 text-accent-green" />
</div>
<p className="text-base font-semibold text-text-primary text-center">{message}</p>
<button
type="button"
onClick={onClose}
className="px-8 py-2.5 rounded-xl bg-accent-indigo text-white text-sm font-medium"
>
我知道了
</button>
</div>
</div>
) )
} }
export default function CreatorMessagesPage() { export default function CreatorMessagesPage() {
const router = useRouter() const router = useRouter()
const [isMobile, setIsMobile] = useState(true)
const [messages, setMessages] = useState(mockMessages) const [messages, setMessages] = useState(mockMessages)
const [showRead, setShowRead] = useState(false) const [confirmModal, setConfirmModal] = useState<{ isOpen: boolean; type: 'accept' | 'ignore'; messageId: string }>({
isOpen: false,
type: 'accept',
messageId: '',
})
const [successModal, setSuccessModal] = useState<{ isOpen: boolean; message: string }>({
isOpen: false,
message: '',
})
useEffect(() => { const markAsRead = (id: string) => {
const checkMobile = () => setIsMobile(window.innerWidth < 1024) setMessages(prev => prev.map(msg =>
checkMobile() msg.id === id ? { ...msg, read: true } : msg
window.addEventListener('resize', checkMobile) ))
return () => window.removeEventListener('resize', checkMobile)
}, [])
const handleClick = (messageId: string, taskId: string) => {
setMessages((prev) =>
prev.map((msg) => (msg.id === messageId ? { ...msg, read: true } : msg))
)
router.push(`/creator/task/${taskId}`)
} }
const unreadCount = messages.filter((msg) => !msg.read).length
const unreadMessages = messages.filter((msg) => !msg.read)
const readMessages = messages.filter((msg) => msg.read)
const DesktopContent = ( const markAllAsRead = () => {
<DesktopLayout role="creator"> setMessages(prev => prev.map(msg => ({ ...msg, read: true })))
}
// 根据消息类型跳转到对应页面
const navigateByMessage = (message: Message) => {
// 标记已读
markAsRead(message.id)
// 根据消息类型决定跳转目标
switch (message.type) {
case 'invite':
// 邀请消息不跳转，在卡片内有操作按钮
break
case 'new_task':
// 新任务 -> 跳转到任务详情（上传脚本）
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
break
case 'pass':
// 审核通过 -> 跳转到任务详情
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
break
case 'need_fix':
// 需要修改 -> 跳转到任务详情（查看问题）
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
break
case 'ai_complete':
// AI审核完成 -> 跳转到任务详情
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
break
case 'agency_pass':
// 代理商审核通过 -> 跳转到任务详情
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
break
case 'agency_reject':
// 代理商审核驳回 -> 跳转到任务详情（查看驳回原因）
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
break
case 'brand_pass':
// 品牌方审核通过 -> 跳转到任务详情
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
break
case 'brand_reject':
// 品牌方审核驳回 -> 跳转到任务详情
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
break
case 'video_ai':
// 视频AI审核完成 -> 跳转到任务详情
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
break
case 'appeal':
// 申诉结果 -> 跳转到申诉中心
router.push('/creator/appeals')
break
case 'video_agency_reject':
// 视频代理商驳回 -> 跳转到任务详情
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
break
case 'video_brand_reject':
// 视频品牌方驳回 -> 跳转到任务详情
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
break
default:
if (message.taskId) router.push(`/creator/task/${message.taskId}`)
}
}
const handleAcceptInvite = (messageId: string) => {
setConfirmModal({ isOpen: true, type: 'accept', messageId })
}
const handleIgnoreInvite = (messageId: string) => {
setConfirmModal({ isOpen: true, type: 'ignore', messageId })
}
const handleConfirmAction = () => {
const { type, messageId } = confirmModal
setConfirmModal({ ...confirmModal, isOpen: false })
// 更新消息状态
setMessages(prev => prev.map(msg =>
msg.id === messageId ? { ...msg, hasActions: false, read: true } : msg
))
// 显示成功提示
setSuccessModal({
isOpen: true,
message: type === 'accept'
? '已成功接受邀请！您现在可以接收该代理商分配的推广任务了。'
: '已忽略该邀请。如需重新查看，请联系代理商。',
})
}
// 获取当前确认弹窗的代理商名称
const getAgencyName = () => {
const message = messages.find(m => m.id === confirmModal.messageId)
if (message?.content.includes('「')) {
const match = message.content.match(/「([^」]+)」/)
return match ? match[1] : '该代理商'
}
return '该代理商'
}
return (
<ResponsiveLayout role="creator">
<div className="flex flex-col gap-6 h-full"> <div className="flex flex-col gap-6 h-full">
<div className="flex items-center justify-between"> {/* 顶部栏 */}
<div className="flex items-center gap-3"> <div className="flex items-center justify-between flex-wrap gap-4">
<div className="w-12 h-12 rounded-2xl bg-accent-indigo/15 flex items-center justify-center"> <div className="flex flex-col gap-1">
<Bell className="w-6 h-6 text-accent-indigo" /> <h1 className="text-xl lg:text-[24px] font-bold text-text-primary">消息中心</h1>
<p className="text-sm text-text-secondary">查看任务通知、审核结果和申诉反馈</p>
</div> </div>
<div>
<h1 className="text-[28px] font-bold text-text-primary">消息中心</h1>
<p className="text-[15px] text-text-secondary">追踪 AI 审核与人工审核进度</p>
</div>
</div>
<span className="text-sm text-text-tertiary">未读 {unreadCount}</span>
</div>
<div className="flex flex-col gap-4">
{unreadMessages.length === 0 && (
<div className="bg-bg-card rounded-xl p-4 text-sm text-text-tertiary">
暂无未读消息
</div>
)}
{unreadMessages.map((msg) => (
<MessageCard
key={msg.id}
title={msg.title}
description={msg.description}
time={msg.time}
status={msg.status}
isRead={msg.read}
onClick={() => handleClick(msg.id, msg.taskId)}
/>
))}
<div className="pt-2">
<button <button
type="button" type="button"
onClick={() => setShowRead((prev) => !prev)} className="px-4 py-2.5 rounded-lg bg-bg-elevated text-text-primary text-sm"
className="flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary" onClick={markAllAsRead}
> >
{showRead ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />} 全部标为已读
已读 ({readMessages.length})
</button> </button>
</div> </div>
{showRead && readMessages.length === 0 && ( {/* 消息列表 - 可滚动 */}
<div className="bg-bg-card rounded-xl p-4 text-sm text-text-tertiary"> <div className="bg-bg-card rounded-2xl p-4 lg:p-6 flex-1 overflow-hidden">
暂无已读消息 <div className="flex flex-col gap-4 h-full overflow-y-auto pr-2">
</div> {messages.map((message) => (
)}
{showRead && readMessages.map((msg) => (
<MessageCard <MessageCard
key={msg.id} key={message.id}
title={msg.title} message={message}
description={msg.description} onRead={() => markAsRead(message.id)}
time={msg.time} onNavigate={() => navigateByMessage(message)}
status={msg.status} onAcceptInvite={() => handleAcceptInvite(message.id)}
isRead={msg.read} onIgnoreInvite={() => handleIgnoreInvite(message.id)}
onClick={() => handleClick(msg.id, msg.taskId)}
/> />
))} ))}
</div> </div>
</div> </div>
</DesktopLayout> </div>
{/* 确认弹窗 */}
<InviteConfirmModal
isOpen={confirmModal.isOpen}
type={confirmModal.type}
agencyName={getAgencyName()}
onClose={() => setConfirmModal({ ...confirmModal, isOpen: false })}
onConfirm={handleConfirmAction}
/>
{/* 成功提示弹窗 */}
<SuccessModal
isOpen={successModal.isOpen}
message={successModal.message}
onClose={() => setSuccessModal({ ...successModal, isOpen: false })}
/>
</ResponsiveLayout>
) )
const MobileContent = (
<MobileLayout role="creator">
<div className="flex flex-col gap-5 px-5 py-4">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-2xl bg-accent-indigo/15 flex items-center justify-center">
<Bell className="w-5 h-5 text-accent-indigo" />
</div>
<div>
<h1 className="text-xl font-bold text-text-primary">消息中心</h1>
<p className="text-sm text-text-secondary">审核进度提醒</p>
</div>
</div>
<div className="flex flex-col gap-3">
{unreadMessages.length === 0 && (
<div className="bg-bg-card rounded-xl p-4 text-sm text-text-tertiary">
暂无未读消息
</div>
)}
{unreadMessages.map((msg) => (
<MessageCard
key={msg.id}
title={msg.title}
description={msg.description}
time={msg.time}
status={msg.status}
isRead={msg.read}
onClick={() => handleClick(msg.id, msg.taskId)}
/>
))}
<button
type="button"
onClick={() => setShowRead((prev) => !prev)}
className="flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary pt-1"
>
{showRead ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
已读 ({readMessages.length})
</button>
{showRead && readMessages.length === 0 && (
<div className="bg-bg-card rounded-xl p-4 text-sm text-text-tertiary">
暂无已读消息
</div>
)}
{showRead && readMessages.map((msg) => (
<MessageCard
key={msg.id}
title={msg.title}
description={msg.description}
time={msg.time}
status={msg.status}
isRead={msg.read}
onClick={() => handleClick(msg.id, msg.taskId)}
/>
))}
</div>
</div>
</MobileLayout>
)
return isMobile ? MobileContent : DesktopContent
} }

872
frontend/app/creator/page.tsx
View File

@ -1,511 +1,439 @@
'use client' 'use client'
import { useState, useEffect } from 'react' import { useState } from 'react'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import { Check, Loader2, Video, Search, SlidersHorizontal, ChevronDown } from 'lucide-react' import {
import { MobileLayout } from '@/components/layout/MobileLayout' Video,
import { DesktopLayout } from '@/components/layout/DesktopLayout' Search,
SlidersHorizontal,
ChevronDown,
Upload,
Bot,
Users,
Building2,
Check,
X,
Loader2
} from 'lucide-react'
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { api } from '@/lib/api'
import type { TaskResponse } from '@/types/task'
// 任务状态类型 // 任务阶段状态类型
type TaskStatus = 'pending_script' | 'pending_video' | 'ai_reviewing' | 'agency_reviewing' | 'need_revision' | 'passed' type StageStatus = 'pending' | 'current' | 'done' | 'error'
// 模拟任务数据 // 任务数据类型
const seedTasks = [ type Task = {
id: string
title: string
description: string
// 脚本阶段
scriptStage: {
submit: StageStatus
ai: StageStatus
agency: StageStatus
brand: StageStatus
}
// 视频阶段
videoStage: {
submit: StageStatus
ai: StageStatus
agency: StageStatus
brand: StageStatus
}
// 按钮配置
buttonText: string
buttonType: 'upload' | 'view' | 'fix'
// 阶段颜色
scriptColor: 'blue' | 'indigo' | 'coral' | 'green'
videoColor: 'tertiary' | 'blue' | 'indigo' | 'coral' | 'green'
}
// 15个任务数据，覆盖所有状态
const mockTasks: Task[] = [
{ {
id: 'task-001', id: 'task-001',
title: 'XX品牌618推广', title: 'XX品牌618推广',
platform: '抖音', description: '产品种草视频 · 时长要求 60-90秒 · 截止: 2026-02-10',
description: '产品种草视频 · 时长要求 60-90秒', scriptStage: { submit: 'current', ai: 'pending', agency: 'pending', brand: 'pending' },
deadline: '2026-02-10', videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
status: 'pending_script' as TaskStatus, buttonText: '上传脚本',
currentStep: 1, // 1-已提交, 2-AI审核, 3-代理商审核, 4-品牌终审 buttonType: 'upload',
scriptColor: 'blue',
videoColor: 'tertiary',
}, },
{ {
id: 'task-002', id: 'task-002',
title: 'YY美妆新品', title: 'YY美妆新品',
platform: '小红书', description: '口播测评 · 已上传视频 · 提交于: 今天 14:30',
description: '口播测评 · 视频已上传 · 等待AI审核', scriptStage: { submit: 'done', ai: 'current', agency: 'pending', brand: 'pending' },
submitTime: '今天 14:30', videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
status: 'ai_reviewing' as TaskStatus, buttonText: '查看详情',
currentStep: 2, buttonType: 'view',
progress: 65, scriptColor: 'indigo',
videoColor: 'tertiary',
}, },
{ {
id: 'task-003', id: 'task-003',
title: 'ZZ饮品夏日', title: 'ZZ饮品夏日',
platform: '抖音', description: '探店Vlog · 发现2处问题 · 需修改后重新提交',
description: '探店Vlog · 发现2处问题', scriptStage: { submit: 'done', ai: 'error', agency: 'pending', brand: 'pending' },
reviewTime: '昨天 18:20', videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
status: 'need_revision' as TaskStatus, buttonText: '查看修改',
currentStep: 2, buttonType: 'fix',
issueCount: 2, scriptColor: 'coral',
videoColor: 'tertiary',
}, },
{ {
id: 'task-004', id: 'task-004',
title: 'AA数码新品发布', title: 'AA数码新品发布',
platform: '抖音', description: '开箱测评 · 审核通过 · 可发布',
description: '开箱测评 · 已发布', scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
status: 'passed' as TaskStatus, videoStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
currentStep: 4, buttonText: '查看详情',
buttonType: 'view',
scriptColor: 'green',
videoColor: 'green',
}, },
{ {
id: 'task-005', id: 'task-005',
title: 'BB运动饮料', title: 'BB运动饮料',
platform: '抖音', description: '运动场景 · 脚本AI审核中 · 等待结果',
description: '脚本已通过 · 待提交成片', scriptStage: { submit: 'done', ai: 'current', agency: 'pending', brand: 'pending' },
deadline: '2026-02-12', videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
status: 'pending_video' as TaskStatus, buttonText: '查看详情',
currentStep: 1, buttonType: 'view',
scriptColor: 'indigo',
videoColor: 'tertiary',
},
{
id: 'task-006',
title: 'CC服装春季款',
description: '穿搭展示 · 脚本待代理商审核',
scriptStage: { submit: 'done', ai: 'done', agency: 'current', brand: 'pending' },
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
buttonText: '查看详情',
buttonType: 'view',
scriptColor: 'indigo',
videoColor: 'tertiary',
},
{
id: 'task-007',
title: 'DD家电测评',
description: '开箱视频 · 脚本待品牌终审',
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'current' },
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
buttonText: '查看详情',
buttonType: 'view',
scriptColor: 'indigo',
videoColor: 'tertiary',
},
{
id: 'task-008',
title: 'EE食品试吃',
description: '美食测评 · 脚本通过 · 待上传视频',
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
videoStage: { submit: 'current', ai: 'pending', agency: 'pending', brand: 'pending' },
buttonText: '上传视频',
buttonType: 'upload',
scriptColor: 'green',
videoColor: 'blue',
},
{
id: 'task-009',
title: 'FF护肤品',
description: '使用教程 · 视频AI审核中',
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
videoStage: { submit: 'done', ai: 'current', agency: 'pending', brand: 'pending' },
buttonText: '查看详情',
buttonType: 'view',
scriptColor: 'green',
videoColor: 'indigo',
},
{
id: 'task-010',
title: 'GG智能手表',
description: '功能展示 · 脚本代理商不通过',
scriptStage: { submit: 'done', ai: 'done', agency: 'error', brand: 'pending' },
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
buttonText: '查看修改',
buttonType: 'fix',
scriptColor: 'coral',
videoColor: 'tertiary',
},
{
id: 'task-011',
title: 'HH美妆代言',
description: '品牌代言 · 脚本品牌不通过',
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'error' },
videoStage: { submit: 'pending', ai: 'pending', agency: 'pending', brand: 'pending' },
buttonText: '查看修改',
buttonType: 'fix',
scriptColor: 'coral',
videoColor: 'tertiary',
},
{
id: 'task-012',
title: 'II数码配件',
description: '配件展示 · 视频代理商审核中',
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
videoStage: { submit: 'done', ai: 'done', agency: 'current', brand: 'pending' },
buttonText: '查看详情',
buttonType: 'view',
scriptColor: 'green',
videoColor: 'indigo',
},
{
id: 'task-013',
title: 'JJ旅行vlog',
description: '旅行记录 · 视频代理商不通过',
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
videoStage: { submit: 'done', ai: 'done', agency: 'error', brand: 'pending' },
buttonText: '查看修改',
buttonType: 'fix',
scriptColor: 'green',
videoColor: 'coral',
},
{
id: 'task-014',
title: 'KK宠物用品',
description: '宠物日常 · 视频品牌终审中',
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
videoStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'current' },
buttonText: '查看详情',
buttonType: 'view',
scriptColor: 'green',
videoColor: 'indigo',
},
{
id: 'task-015',
title: 'LL厨房电器',
description: '使用演示 · 视频品牌不通过',
scriptStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'done' },
videoStage: { submit: 'done', ai: 'done', agency: 'done', brand: 'error' },
buttonText: '查看修改',
buttonType: 'fix',
scriptColor: 'green',
videoColor: 'coral',
}, },
] ]
type UiTask = typeof seedTasks[number] // 步骤图标组件
function StepIcon({ status, icon }: { status: StageStatus; icon: 'upload' | 'bot' | 'users' | 'building' }) {
const IconComponent = {
upload: Upload,
bot: Bot,
users: Users,
building: Building2,
}[icon]
const taskProfiles = seedTasks.reduce<Record<string, UiTask>>((acc, task) => { const getStyle = () => {
acc[task.id] = task
return acc
}, {})
const platformLabelMap: Record<string, string> = {
douyin: '抖音',
xiaohongshu: '小红书',
bilibili: 'B站',
kuaishou: '快手',
}
const getPlatformLabel = (platform?: string) => {
if (!platform) return '未知平台'
return platformLabelMap[platform] || platform
}
const deriveTaskStatus = (task: TaskResponse): TaskStatus => {
if (!task.has_script) {
return 'pending_script'
}
if (!task.has_video) {
return 'pending_video'
}
if (task.status === 'approved') {
return 'passed'
}
if (task.status === 'rejected' || task.status === 'failed') {
return 'need_revision'
}
if (task.status === 'pending' || task.status === 'processing') {
return 'ai_reviewing'
}
return 'agency_reviewing'
}
const getCurrentStep = (status: TaskStatus) => {
if (status === 'ai_reviewing' || status === 'need_revision') {
return 2
}
if (status === 'agency_reviewing') {
return 3
}
if (status === 'passed') {
return 4
}
return 1
}
const getStatusDescription = (status: TaskStatus) => {
switch (status) { switch (status) {
case 'pending_script': case 'done':
return '待提交脚本' return 'bg-accent-green'
case 'pending_video': case 'current':
return '待提交视频' return 'bg-accent-indigo'
case 'ai_reviewing': case 'error':
return 'AI 审核中' return 'bg-accent-coral'
case 'agency_reviewing':
return '待代理商审核'
case 'need_revision':
return '需修改后再提交'
case 'passed':
return '审核通过'
default: default:
return '任务进行中' return 'bg-bg-elevated border-[1.5px] border-border-subtle'
} }
}
const mapApiTaskToUi = (task: TaskResponse): UiTask => {
const profile = taskProfiles[task.task_id]
const status = deriveTaskStatus(task)
const platformLabel = getPlatformLabel(task.platform)
const description = profile?.description || `${platformLabel} · ${getStatusDescription(status)}`
return {
id: task.task_id,
title: profile?.title || `任务 ${task.task_id}`,
platform: platformLabel,
description,
deadline: profile?.deadline,
submitTime: profile?.submitTime,
reviewTime: profile?.reviewTime,
status,
currentStep: profile?.currentStep || getCurrentStep(status),
progress: profile?.progress,
issueCount: profile?.issueCount,
} }
}
// 状态徽章配置 const getIconColor = () => {
function getStatusConfig(status: TaskStatus) { if (status === 'done' || status === 'current' || status === 'error') return 'text-white'
switch (status) { return 'text-text-tertiary'
case 'pending_script':
return { label: '待上传', bg: 'bg-accent-blue/15', text: 'text-accent-blue' }
case 'pending_video':
return { label: '待上传', bg: 'bg-accent-blue/15', text: 'text-accent-blue' }
case 'ai_reviewing':
return { label: '审核中', bg: 'bg-accent-indigo/15', text: 'text-accent-indigo' }
case 'agency_reviewing':
return { label: '审核中', bg: 'bg-accent-amber/15', text: 'text-accent-amber' }
case 'need_revision':
return { label: '需修改', bg: 'bg-accent-coral/15', text: 'text-accent-coral' }
case 'passed':
return { label: '已通过', bg: 'bg-accent-green/15', text: 'text-accent-green' }
default:
return { label: '未知', bg: 'bg-bg-elevated', text: 'text-text-secondary' }
}
}
type StepState = 'done' | 'current' | 'pending' | 'error'
function getStepTimeline(status: TaskStatus): Array<{ label: string; state: StepState }> {
switch (status) {
case 'pending_script':
case 'pending_video':
return [
{ label: '待提交', state: 'current' },
{ label: 'AI审核', state: 'pending' },
{ label: '代理商', state: 'pending' },
{ label: '终审', state: 'pending' },
]
case 'ai_reviewing':
return [
{ label: '已提交', state: 'done' },
{ label: 'AI审核', state: 'current' },
{ label: '代理商', state: 'pending' },
{ label: '终审', state: 'pending' },
]
case 'need_revision':
return [
{ label: '已提交', state: 'done' },
{ label: 'AI未通过', state: 'error' },
{ label: '代理商', state: 'pending' },
{ label: '终审', state: 'pending' },
]
case 'agency_reviewing':
return [
{ label: '已提交', state: 'done' },
{ label: 'AI通过', state: 'done' },
{ label: '代理商审核', state: 'current' },
{ label: '终审', state: 'pending' },
]
case 'passed':
return [
{ label: '已提交', state: 'done' },
{ label: 'AI通过', state: 'done' },
{ label: '代理商通过', state: 'done' },
{ label: '已通过', state: 'done' },
]
default:
return [
{ label: '已提交', state: 'pending' },
{ label: 'AI审核', state: 'pending' },
{ label: '代理商', state: 'pending' },
{ label: '终审', state: 'pending' },
]
}
}
function TaskStepSummary({ status }: { status: TaskStatus }) {
const steps = getStepTimeline(status)
const stateStyle = (state: StepState) => {
if (state === 'done') return 'bg-accent-green text-text-secondary'
if (state === 'current') return 'bg-accent-indigo text-accent-indigo'
if (state === 'error') return 'bg-accent-coral text-accent-coral'
return 'bg-border-subtle text-text-tertiary'
} }
return ( return (
<div className="flex flex-wrap items-center gap-2 text-xs"> <div className={cn('w-7 h-7 rounded-full flex items-center justify-center', getStyle())}>
{status === 'done' && <Check size={14} className={getIconColor()} />}
{status === 'current' && <Loader2 size={14} className={cn(getIconColor(), 'animate-spin')} />}
{status === 'error' && <X size={14} className={getIconColor()} />}
{status === 'pending' && <IconComponent size={14} className={getIconColor()} />}
</div>
)
}
// 进度条组件
function ProgressBar({ stage, color }: {
stage: { submit: StageStatus; ai: StageStatus; agency: StageStatus; brand: StageStatus }
color: string
}) {
const steps = [
{ key: 'submit', label: '提交', icon: 'upload' as const, status: stage.submit },
{ key: 'ai', label: 'AI审核', icon: 'bot' as const, status: stage.ai },
{ key: 'agency', label: '代理商', icon: 'users' as const, status: stage.agency },
{ key: 'brand', label: '品牌', icon: 'building' as const, status: stage.brand },
]
const getLineColor = (fromStatus: StageStatus) => {
if (fromStatus === 'done') return 'bg-accent-green'
return 'bg-border-subtle'
}
const getLabelColor = (status: StageStatus) => {
if (status === 'done') return 'text-text-secondary'
if (status === 'current') return 'text-accent-indigo font-semibold'
if (status === 'error') return 'text-accent-coral font-semibold'
return 'text-text-tertiary'
}
return (
<div className="flex items-center w-full">
{steps.map((step, index) => ( {steps.map((step, index) => (
<div key={`${step.label}-${index}`} className="flex items-center gap-1"> <div key={step.key} className="flex items-center flex-1">
<span className={cn('w-1.5 h-1.5 rounded-full', stateStyle(step.state))} /> <div className="flex flex-col items-center gap-1.5 w-14">
<span className={cn('text-[11px]', step.state === 'error' ? 'text-accent-coral' : 'text-text-tertiary')}> <StepIcon status={step.status} icon={step.icon} />
{step.label} <span className={cn('text-[10px]', getLabelColor(step.status))}>{step.label}</span>
</span> </div>
{index < steps.length - 1 && <span className="text-text-tertiary">·</span>} {index < steps.length - 1 && (
<div className={cn('h-0.5 flex-1', getLineColor(step.status))} />
)}
</div> </div>
))} ))}
</div> </div>
) )
} }
// 审核进度条组件 // 任务卡片组件
function ReviewProgressBar({ currentStep, status }: { currentStep: number; status: TaskStatus }) { function TaskCard({ task, onClick }: { task: Task; onClick: () => void }) {
const steps = [ const getStageColor = (color: string) => {
{ label: '已提交', step: 1 }, switch (color) {
{ label: 'AI审核', step: 2 }, case 'blue': return 'text-accent-blue'
{ label: '代理商审核', step: 3 }, case 'indigo': return 'text-accent-indigo'
{ label: '品牌终审', step: 4 }, case 'coral': return 'text-accent-coral'
] case 'green': return 'text-accent-green'
default: return 'text-text-tertiary'
return (
<div className="flex items-center w-full py-2">
{steps.map((s, index) => {
const isCompleted = s.step < currentStep || (s.step === currentStep && status === 'passed')
const isCurrent = s.step === currentStep && status !== 'passed'
const isError = isCurrent && status === 'need_revision'
return (
<div key={s.step} className="flex items-center flex-1">
<div className="flex flex-col items-center gap-1 w-[70px]">
<div className={cn(
'w-7 h-7 rounded-full flex items-center justify-center',
isCompleted ? 'bg-accent-green' :
isError ? 'bg-accent-coral' :
isCurrent ? 'bg-accent-indigo' :
'bg-bg-elevated border-[1.5px] border-border-subtle'
)}>
{isCompleted && <Check className="w-3.5 h-3.5 text-white" />}
{isCurrent && !isError && <Loader2 className="w-3.5 h-3.5 text-white animate-spin" />}
{isError && <span className="w-2 h-2 bg-white rounded-full" />}
</div>
<span className={cn(
'text-xs',
isCompleted ? 'text-text-secondary' :
isError ? 'text-accent-coral font-semibold' :
isCurrent ? 'text-accent-indigo font-semibold' :
'text-text-tertiary'
)}>
{s.label}
</span>
</div>
{index < steps.length - 1 && (
<div className={cn(
'h-0.5 flex-1',
s.step < currentStep ? 'bg-accent-green' : 'bg-border-subtle'
)} />
)}
</div>
)
})}
</div>
)
}
// 桌面端任务卡片
function DesktopTaskCard({ task, onClick }: { task: UiTask; onClick: () => void }) {
const config = getStatusConfig(task.status)
const showProgress = ['ai_reviewing', 'agency_reviewing', 'need_revision'].includes(task.status)
const getActionButton = () => {
if (task.status === 'pending_script' || task.status === 'pending_video') {
return (
<button
type="button"
className="px-5 py-2.5 rounded-[10px] bg-accent-green text-white text-sm font-semibold"
onClick={(e) => { e.stopPropagation(); onClick() }}
>
上传{task.status === 'pending_script' ? '脚本' : '视频'}
</button>
)
} }
if (task.status === 'ai_reviewing') {
return (
<button
type="button"
className="px-5 py-2.5 rounded-[10px] bg-bg-elevated border border-border-subtle text-text-secondary text-sm font-medium"
onClick={(e) => { e.stopPropagation(); onClick() }}
>
查看详情
</button>
)
} }
if (task.status === 'need_revision') {
return ( const getButtonStyle = () => {
<button switch (task.buttonType) {
type="button" case 'upload':
className="px-5 py-2.5 rounded-[10px] bg-accent-coral text-white text-sm font-semibold" return 'bg-accent-green text-white'
onClick={(e) => { e.stopPropagation(); onClick() }} case 'fix':
> return 'bg-accent-coral text-white'
查看修改 default:
</button> return 'bg-transparent border-[1.5px] border-accent-indigo text-accent-indigo'
)
} }
return (
<button
type="button"
className="px-5 py-2.5 rounded-[10px] bg-bg-elevated border border-border-subtle text-text-secondary text-sm font-medium"
onClick={(e) => { e.stopPropagation(); onClick() }}
>
查看详情
</button>
)
} }
return ( return (
<div <div
className="bg-bg-card rounded-2xl p-5 flex flex-col gap-4 card-shadow cursor-pointer hover:bg-bg-elevated/50 transition-colors" className="bg-bg-card rounded-2xl p-5 flex flex-col gap-4 card-shadow cursor-pointer hover:bg-bg-elevated/30 transition-colors"
onClick={onClick} onClick={onClick}
> >
{/* 任务主行 */} {/* 任务主行 */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
{/* 左侧：缩略图 + 信息 */} {/* 左侧：缩略图 + 信息 */}
<div className="flex items-center gap-4"> <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"> <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" /> <Video className="w-6 h-6 text-text-tertiary" />
</div> </div>
{/* 任务信息 */}
<div className="flex flex-col gap-1.5"> <div className="flex flex-col gap-1.5">
<span className="text-base font-semibold text-text-primary">{task.title}</span> <span className="text-base font-semibold text-text-primary">{task.title}</span>
<span className="text-[13px] text-text-secondary">{task.description}</span> <span className="text-[13px] text-text-secondary">{task.description}</span>
<TaskStepSummary status={task.status} />
</div> </div>
</div> </div>
{/* 右侧：状态 + 操作按钮 */} {/* 右侧：操作按钮 */}
<div className="flex items-center gap-4"> <button
<span className={cn('px-3 py-1.5 rounded-lg text-[13px] font-semibold', config.bg, config.text)}> type="button"
{config.label} className={cn('px-5 py-2.5 rounded-[10px] text-sm font-semibold', getButtonStyle())}
</span> onClick={(e) => { e.stopPropagation(); onClick() }}
{getActionButton()} >
</div> {task.buttonText}
</button>
</div> </div>
{/* 审核进度条 */} {/* 进度条容器 */}
{showProgress && <ReviewProgressBar currentStep={task.currentStep} status={task.status} />} <div className="flex flex-col gap-3 pt-3">
{/* 脚本阶段 */}
<div className="flex items-center gap-2">
<span className={cn('text-xs font-semibold w-8', getStageColor(task.scriptColor))}>脚本</span>
<div className="flex-1">
<ProgressBar stage={task.scriptStage} color={task.scriptColor} />
</div>
</div>
{/* 视频阶段 */}
<div className="flex items-center gap-2">
<span className={cn('text-xs font-semibold w-8', getStageColor(task.videoColor))}>视频</span>
<div className="flex-1">
<ProgressBar stage={task.videoStage} color={task.videoColor} />
</div>
</div>
</div>
</div> </div>
) )
} }
// 移动端任务卡片 // 任务状态筛选选项
function MobileTaskCard({ task, onClick }: { task: UiTask; onClick: () => void }) { type TaskFilter = 'all' | 'pending' | 'reviewing' | 'rejected' | 'completed'
const config = getStatusConfig(task.status)
const showProgress = ['ai_reviewing', 'agency_reviewing', 'need_revision'].includes(task.status)
return ( const filterOptions: { value: TaskFilter; label: string }[] = [
<div { value: 'all', label: '全部状态' },
className="bg-bg-card rounded-xl p-4 flex flex-col gap-3 card-shadow cursor-pointer" { value: 'pending', label: '待提交' },
onClick={onClick} { value: 'reviewing', label: '审核中' },
> { value: 'rejected', label: '已驳回' },
{/* 头部 */} { value: 'completed', label: '已完成' },
<div className="flex items-center justify-between"> ]
<span className="text-[17px] font-semibold text-text-primary">{task.title}</span>
<span className={cn('px-2.5 py-1 rounded-lg text-xs font-semibold', config.bg, config.text)}>
{config.label}
</span>
</div>
{/* 进度条 */} // 根据任务状态获取筛选分类
{showProgress && ( const getTaskFilterCategory = (task: Task): TaskFilter => {
<div className="py-1"> // 如果视频阶段全部完成，则为已完成
<ReviewProgressBar currentStep={task.currentStep} status={task.status} /> if (task.videoStage.brand === 'done') return 'completed'
</div> // 如果有任何阶段为 error，则为已驳回
)} if (
task.scriptStage.ai === 'error' ||
{/* 描述 */} task.scriptStage.agency === 'error' ||
<p className="text-sm text-text-secondary">{task.description}</p> task.scriptStage.brand === 'error' ||
<TaskStepSummary status={task.status} /> task.videoStage.ai === 'error' ||
task.videoStage.agency === 'error' ||
{/* 底部 */} task.videoStage.brand === 'error'
<div className="flex items-center justify-between"> ) return 'rejected'
<span className="text-[13px] text-text-tertiary"> // 如果脚本阶段待提交或视频阶段待提交（且脚本已完成）
{task.deadline && `截止: ${task.deadline}`} if (task.scriptStage.submit === 'current' || (task.scriptStage.brand === 'done' && task.videoStage.submit === 'current')) return 'pending'
{task.submitTime && `提交于: ${task.submitTime}`} // 其他情况为审核中
{task.reviewTime && `审核于: ${task.reviewTime}`} return 'reviewing'
</span>
{(task.status === 'pending_script' || task.status === 'pending_video') && (
<button
type="button"
className="px-4 py-2 rounded-[10px] bg-accent-green text-white text-sm font-semibold"
onClick={(e) => { e.stopPropagation(); onClick() }}
>
去上传
</button>
)}
{task.status === 'need_revision' && (
<button
type="button"
className="px-4 py-2 rounded-[10px] bg-accent-coral text-white text-sm font-semibold"
onClick={(e) => { e.stopPropagation(); onClick() }}
>
查看修改
</button>
)}
</div>
</div>
)
} }
export default function CreatorTasksPage() { export default function CreatorTasksPage() {
const router = useRouter() const router = useRouter()
const [isMobile, setIsMobile] = useState(true)
const [searchQuery, setSearchQuery] = useState('') const [searchQuery, setSearchQuery] = useState('')
const [tasks, setTasks] = useState<UiTask[]>(seedTasks) const [filter, setFilter] = useState<TaskFilter>('all')
const [isLoading, setIsLoading] = useState(false) const [showFilterDropdown, setShowFilterDropdown] = useState(false)
const [tasks] = useState<Task[]>(mockTasks)
useEffect(() => {
const checkMobile = () => setIsMobile(window.innerWidth < 1024)
checkMobile()
window.addEventListener('resize', checkMobile)
return () => window.removeEventListener('resize', checkMobile)
}, [])
useEffect(() => {
let isMounted = true
const fetchTasks = async () => {
setIsLoading(true)
try {
const data = await api.listTasks()
if (!isMounted) return
const mapped = data.items.map(mapApiTaskToUi)
setTasks(mapped)
} catch (error) {
console.error('加载任务失败:', error)
} finally {
if (isMounted) {
setIsLoading(false)
}
}
}
fetchTasks()
return () => {
isMounted = false
}
}, [])
const pendingCount = tasks.filter(t =>
!['passed'].includes(t.status)
).length
const handleTaskClick = (taskId: string) => { const handleTaskClick = (taskId: string) => {
router.push(`/creator/task/${taskId}`) router.push(`/creator/task/${taskId}`)
} }
// 桌面端内容 // 过滤任务
const DesktopContent = ( const filteredTasks = tasks.filter(task => {
<DesktopLayout role="creator"> // 搜索过滤
const matchesSearch = searchQuery === '' ||
task.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
task.description.toLowerCase().includes(searchQuery.toLowerCase())
// 状态过滤
const matchesFilter = filter === 'all' || getTaskFilterCategory(task) === filter
return matchesSearch && matchesFilter
})
const currentFilterLabel = filterOptions.find(opt => opt.value === filter)?.label || '全部状态'
return (
<ResponsiveLayout role="creator">
<div className="flex flex-col gap-6 h-full"> <div className="flex flex-col gap-6 h-full">
{/* 顶部栏 */} {/* 顶部栏 */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between flex-wrap gap-4">
{/* 页面标题 */}
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<h1 className="text-[28px] font-bold text-text-primary">我的任务</h1> <h1 className="text-2xl lg:text-[28px] font-bold text-text-primary">我的任务</h1>
<p className="text-[15px] text-text-secondary">共 {pendingCount} 个进行中任务</p> <p className="text-sm lg:text-[15px] text-text-secondary">
{filter === 'all' ? `共 ${tasks.length} 个任务` : `${currentFilterLabel} ${filteredTasks.length} 个`}
</p>
</div> </div>
{/* 搜索和筛选 */}
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="flex items-center gap-2 px-4 py-2.5 bg-bg-card rounded-xl border border-border-subtle"> <div className="flex items-center gap-2 px-4 py-2.5 bg-bg-card rounded-xl border border-border-subtle">
<Search className="w-[18px] h-[18px] text-text-secondary" /> <Search className="w-[18px] h-[18px] text-text-secondary" />
@ -517,74 +445,72 @@ export default function CreatorTasksPage() {
className="bg-transparent text-sm text-text-primary placeholder-text-tertiary focus:outline-none w-32" className="bg-transparent text-sm text-text-primary placeholder-text-tertiary focus:outline-none w-32"
/> />
</div> </div>
<div className="relative">
<button <button
type="button" type="button"
className="flex items-center gap-2 px-4 py-2.5 bg-bg-card rounded-xl border border-border-subtle text-text-secondary text-sm font-medium" onClick={() => setShowFilterDropdown(!showFilterDropdown)}
className={cn(
'flex items-center gap-2 px-4 py-2.5 rounded-xl border text-sm font-medium transition-colors',
filter !== 'all'
? 'bg-accent-indigo/10 border-accent-indigo text-accent-indigo'
: 'bg-bg-card border-border-subtle text-text-secondary'
)}
> >
<SlidersHorizontal className="w-[18px] h-[18px]" /> <SlidersHorizontal className="w-[18px] h-[18px]" />
<span>全部状态</span> <span>{currentFilterLabel}</span>
<ChevronDown className="w-4 h-4" /> <ChevronDown className={cn('w-4 h-4 transition-transform', showFilterDropdown && 'rotate-180')} />
</button> </button>
{showFilterDropdown && (
<>
<div
className="fixed inset-0 z-10"
onClick={() => setShowFilterDropdown(false)}
/>
<div className="absolute right-0 top-full mt-2 w-40 bg-bg-card rounded-xl border border-border-subtle card-shadow z-20 overflow-hidden">
{filterOptions.map((option) => (
<button
key={option.value}
type="button"
onClick={() => {
setFilter(option.value)
setShowFilterDropdown(false)
}}
className={cn(
'w-full px-4 py-3 text-left text-sm transition-colors',
filter === option.value
? 'bg-accent-indigo/10 text-accent-indigo font-medium'
: 'text-text-primary hover:bg-bg-elevated'
)}
>
{option.label}
</button>
))}
</div>
</>
)}
</div>
</div> </div>
</div> </div>
{/* 任务列表 */} {/* 任务列表 - 可滚动 */}
<div className="flex flex-col gap-4 flex-1 overflow-auto"> <div className="flex flex-col gap-4 flex-1 overflow-y-auto pr-2">
{isLoading && ( {filteredTasks.length === 0 ? (
<div className="bg-bg-card rounded-2xl p-6 text-sm text-text-tertiary"> <div className="flex flex-col items-center justify-center py-16 text-center">
正在加载任务... <Search className="w-12 h-12 text-text-tertiary mb-4" />
<p className="text-text-secondary">没有找到匹配的任务</p>
<p className="text-sm text-text-tertiary mt-1">尝试调整搜索条件或筛选状态</p>
</div> </div>
)} ) : (
{!isLoading && tasks.length === 0 && ( filteredTasks.map((task) => (
<div className="bg-bg-card rounded-2xl p-6 text-sm text-text-tertiary"> <TaskCard
暂无任务
</div>
)}
{tasks.map((task) => (
<DesktopTaskCard
key={task.id} key={task.id}
task={task} task={task}
onClick={() => handleTaskClick(task.id)} onClick={() => handleTaskClick(task.id)}
/> />
))} ))
</div>
</div>
</DesktopLayout>
)
// 移动端内容
const MobileContent = (
<MobileLayout role="creator">
<div className="flex flex-col gap-5 px-5 py-4">
{/* 头部 */}
<div className="flex flex-col gap-1">
<h1 className="text-[26px] font-bold text-text-primary">我的任务</h1>
<p className="text-sm text-text-secondary">共 {pendingCount} 个进行中任务</p>
</div>
{/* 任务列表 */}
<div className="flex flex-col gap-3">
{isLoading && (
<div className="bg-bg-card rounded-xl p-4 text-sm text-text-tertiary">
正在加载任务...
</div>
)} )}
{!isLoading && tasks.length === 0 && (
<div className="bg-bg-card rounded-xl p-4 text-sm text-text-tertiary">
暂无任务
</div>
)}
{tasks.map((task) => (
<MobileTaskCard
key={task.id}
task={task}
onClick={() => handleTaskClick(task.id)}
/>
))}
</div> </div>
</div> </div>
</MobileLayout> </ResponsiveLayout>
) )
return isMobile ? MobileContent : DesktopContent
} }

249
frontend/app/creator/profile/edit/page.tsx Normal file
View File

@ -0,0 +1,249 @@
'use client'
import React, { useState } from 'react'
import { useRouter } from 'next/navigation'
import { ArrowLeft, Camera, Check, Copy } from 'lucide-react'
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
import { cn } from '@/lib/utils'
// 模拟用户数据
const mockUser = {
name: '李小红',
initial: '李',
creatorId: 'CR123456', // 达人ID（系统生成，不可修改）
phone: '138****8888',
email: 'lixiaohong@example.com',
douyinAccount: '@xiaohong_creator',
bio: '专注美妆护肤分享，与你一起变美～',
}
export default function ProfileEditPage() {
const router = useRouter()
const [isSaving, setIsSaving] = useState(false)
const [idCopied, setIdCopied] = useState(false)
const [formData, setFormData] = useState({
name: mockUser.name,
phone: mockUser.phone,
email: mockUser.email,
douyinAccount: mockUser.douyinAccount,
bio: mockUser.bio,
})
// 复制达人ID
const handleCopyId = async () => {
try {
await navigator.clipboard.writeText(mockUser.creatorId)
setIdCopied(true)
setTimeout(() => setIdCopied(false), 2000)
} catch (err) {
console.error('复制失败:', err)
}
}
// 处理输入变化
const handleInputChange = (field: string, value: string) => {
setFormData(prev => ({ ...prev, [field]: value }))
}
// 保存
const handleSave = async () => {
setIsSaving(true)
// 模拟保存
await new Promise(resolve => setTimeout(resolve, 1000))
setIsSaving(false)
router.back()
}
return (
<ResponsiveLayout role="creator">
<div className="flex flex-col gap-6 h-full">
{/* 顶部栏 */}
<div className="flex items-center gap-4">
<button
type="button"
onClick={() => router.back()}
className="w-10 h-10 rounded-xl bg-bg-elevated flex items-center justify-center hover:bg-bg-elevated/80 transition-colors"
>
<ArrowLeft size={20} className="text-text-secondary" />
</button>
<div className="flex flex-col gap-1">
<h1 className="text-2xl lg:text-[28px] font-bold text-text-primary">编辑个人信息</h1>
<p className="text-sm lg:text-[15px] text-text-secondary">更新您的头像和基本资料</p>
</div>
</div>
{/* 内容区 */}
<div className="flex flex-col lg:flex-row gap-6 flex-1 min-h-0 overflow-y-auto lg:overflow-visible">
{/* 头像编辑卡片 */}
<div className="lg:w-[360px] lg:flex-shrink-0">
<div className="bg-bg-card rounded-2xl p-6 card-shadow flex flex-col items-center gap-5">
{/* 头像 */}
<div className="relative">
<div
className="w-24 h-24 rounded-full flex items-center justify-center"
style={{
background: 'linear-gradient(135deg, #6366F1 0%, #4F46E5 100%)',
}}
>
<span className="text-[40px] font-bold text-white">{mockUser.initial}</span>
</div>
{/* 相机按钮 */}
<button
type="button"
className="absolute bottom-0 right-0 w-8 h-8 rounded-full bg-accent-indigo flex items-center justify-center shadow-lg hover:bg-accent-indigo/90 transition-colors"
>
<Camera size={16} className="text-white" />
</button>
</div>
<p className="text-sm text-text-secondary">点击更换头像</p>
{/* 提示 */}
<div className="w-full p-4 rounded-xl bg-bg-elevated">
<p className="text-[13px] text-text-tertiary leading-relaxed">
支持 JPG、PNG 格式，文件大小不超过 5MB，建议使用正方形图片以获得最佳显示效果。
</p>
</div>
</div>
</div>
{/* 表单卡片 */}
<div className="flex-1 flex flex-col gap-5">
<div className="bg-bg-card rounded-2xl p-6 card-shadow flex flex-col gap-5">
{/* 达人ID（只读） */}
<div className="flex flex-col gap-2">
<label className="text-sm font-medium text-text-primary">达人ID</label>
<div className="flex gap-3">
<div className="flex-1 px-4 py-3 rounded-xl border border-border-default bg-bg-elevated/50 flex items-center justify-between">
<span className="font-mono font-medium text-accent-indigo">{mockUser.creatorId}</span>
<button
type="button"
onClick={handleCopyId}
className="flex items-center gap-1.5 px-2 py-1 rounded-md hover:bg-bg-elevated transition-colors"
>
{idCopied ? (
<>
<Check size={14} className="text-accent-green" />
<span className="text-xs text-accent-green">已复制</span>
</>
) : (
<>
<Copy size={14} className="text-text-tertiary" />
<span className="text-xs text-text-tertiary">复制</span>
</>
)}
</button>
</div>
</div>
<p className="text-xs text-text-tertiary">系统自动生成的唯一标识，供代理商邀请时使用</p>
</div>
{/* 昵称 */}
<div className="flex flex-col gap-2">
<label className="text-sm font-medium text-text-primary">昵称</label>
<Input
value={formData.name}
onChange={(e) => handleInputChange('name', e.target.value)}
placeholder="请输入昵称"
/>
</div>
{/* 手机号 */}
<div className="flex flex-col gap-2">
<label className="text-sm font-medium text-text-primary">手机号</label>
<div className="flex gap-3">
<Input
value={formData.phone}
onChange={(e) => handleInputChange('phone', e.target.value)}
placeholder="请输入手机号"
className="flex-1"
disabled
/>
<Button variant="secondary" size="md">
更换
</Button>
</div>
<p className="text-xs text-text-tertiary">手机号用于登录和接收重要通知</p>
</div>
{/* 邮箱 */}
<div className="flex flex-col gap-2">
<label className="text-sm font-medium text-text-primary">邮箱</label>
<Input
type="email"
value={formData.email}
onChange={(e) => handleInputChange('email', e.target.value)}
placeholder="请输入邮箱"
/>
</div>
{/* 抖音账号 */}
<div className="flex flex-col gap-2">
<label className="text-sm font-medium text-text-primary">抖音账号</label>
<div className="flex gap-3">
<Input
value={formData.douyinAccount}
onChange={(e) => handleInputChange('douyinAccount', e.target.value)}
placeholder="请输入抖音账号"
className="flex-1"
disabled
/>
<Button variant="secondary" size="md">
重新绑定
</Button>
</div>
<p className="text-xs text-text-tertiary">已认证的抖音账号，用于发布视频</p>
</div>
{/* 个人简介 */}
<div className="flex flex-col gap-2">
<label className="text-sm font-medium text-text-primary">个人简介</label>
<textarea
value={formData.bio}
onChange={(e) => handleInputChange('bio', e.target.value)}
placeholder="介绍一下自己吧..."
rows={3}
className={cn(
'w-full px-4 py-3 rounded-xl border border-border-default',
'bg-bg-elevated text-text-primary text-[15px]',
'placeholder:text-text-tertiary',
'focus:outline-none focus:border-accent-indigo focus:ring-2 focus:ring-accent-indigo/20',
'transition-all resize-none'
)}
/>
<p className="text-xs text-text-tertiary text-right">{formData.bio.length}/100</p>
</div>
</div>
{/* 保存按钮 */}
<div className="flex justify-end gap-3">
<Button variant="secondary" size="lg" onClick={() => router.back()}>
取消
</Button>
<Button
variant="primary"
size="lg"
onClick={handleSave}
disabled={isSaving}
className="min-w-[120px]"
>
{isSaving ? (
<span className="flex items-center gap-2">
<span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
保存中...
</span>
) : (
<span className="flex items-center gap-2">
<Check size={18} />
保存修改
</span>
)}
</Button>
</div>
</div>
</div>
</div>
</ResponsiveLayout>
)
}

275
frontend/app/creator/profile/page.tsx Normal file
View File

@ -0,0 +1,275 @@
'use client'
import React, { useState } from 'react'
import { useRouter } from 'next/navigation'
import {
CircleUser,
Settings,
BellRing,
History,
MessageCircleQuestion,
PlusCircle,
ChevronRight,
LogOut,
Copy,
Check
} from 'lucide-react'
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
import { cn } from '@/lib/utils'
// 用户数据
const mockUser = {
name: '李小红',
initial: '李',
creatorId: 'CR123456', // 达人ID
role: '抖音达人 · 已认证',
stats: {
completed: 28,
passRate: 92,
inProgress: 3,
},
}
// 菜单项数据
const menuItems = [
{
id: 'personal',
icon: CircleUser,
iconColor: 'text-accent-indigo',
bgColor: 'bg-accent-indigo',
title: '个人信息',
subtitle: '头像、昵称、绑定账号',
},
{
id: 'account',
icon: Settings,
iconColor: 'text-accent-green',
bgColor: 'bg-accent-green',
title: '账户设置',
subtitle: '修改密码、账号安全',
},
{
id: 'notification',
icon: BellRing,
iconColor: 'text-accent-blue',
bgColor: 'bg-accent-blue',
title: '消息设置',
subtitle: '通知开关、提醒偏好',
},
{
id: 'history',
icon: History,
iconColor: 'text-accent-coral',
bgColor: 'bg-accent-coral',
title: '历史记录',
subtitle: '已完成和过期的任务',
},
{
id: 'help',
icon: MessageCircleQuestion,
iconColor: 'text-text-secondary',
bgColor: 'bg-bg-elevated',
title: '帮助与反馈',
subtitle: '常见问题、联系客服',
},
{
id: 'appeal',
icon: PlusCircle,
iconColor: 'text-accent-indigo',
bgColor: 'bg-accent-indigo',
title: '申诉次数',
subtitle: '查看各任务申诉次数 · 申请增加',
},
]
// 用户卡片组件
function UserCard() {
const [copied, setCopied] = useState(false)
// 复制达人ID
const handleCopyId = async () => {
try {
await navigator.clipboard.writeText(mockUser.creatorId)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
} catch (err) {
console.error('复制失败:', err)
}
}
return (
<div className="bg-bg-card rounded-2xl p-6 card-shadow flex flex-col gap-5">
{/* 头像和信息 */}
<div className="flex items-center gap-5">
{/* 头像 */}
<div
className="w-20 h-20 rounded-full flex items-center justify-center"
style={{
background: 'linear-gradient(135deg, #6366F1 0%, #4F46E5 100%)',
}}
>
<span className="text-[32px] font-bold text-white">{mockUser.initial}</span>
</div>
{/* 用户信息 */}
<div className="flex flex-col gap-1.5">
<span className="text-xl font-semibold text-text-primary">{mockUser.name}</span>
<span className="text-sm text-text-secondary">{mockUser.role}</span>
{/* 达人ID */}
<div className="flex items-center gap-2 mt-1">
<span className="text-xs text-text-tertiary">达人ID:</span>
<div className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-bg-elevated">
<span className="text-xs font-mono font-medium text-accent-indigo">{mockUser.creatorId}</span>
<button
type="button"
onClick={handleCopyId}
className="p-0.5 hover:bg-bg-card rounded transition-colors"
title={copied ? '已复制' : '复制达人ID'}
>
{copied ? (
<Check size={12} className="text-accent-green" />
) : (
<Copy size={12} className="text-text-tertiary hover:text-text-secondary" />
)}
</button>
</div>
{copied && (
<span className="text-xs text-accent-green animate-fade-in">已复制</span>
)}
</div>
</div>
</div>
{/* 统计数据 */}
<div className="flex items-center justify-around pt-4 border-t border-border-subtle">
<div className="flex flex-col items-center gap-1">
<span className="text-2xl font-bold text-text-primary">{mockUser.stats.completed}</span>
<span className="text-xs text-text-secondary">完成任务</span>
</div>
<div className="flex flex-col items-center gap-1">
<span className="text-2xl font-bold text-accent-green">{mockUser.stats.passRate}%</span>
<span className="text-xs text-text-secondary">通过率</span>
</div>
<div className="flex flex-col items-center gap-1">
<span className="text-2xl font-bold text-accent-indigo">{mockUser.stats.inProgress}</span>
<span className="text-xs text-text-secondary">进行中</span>
</div>
</div>
</div>
)
}
// 菜单项组件
function MenuItem({ item, onClick }: { item: typeof menuItems[0]; onClick: () => void }) {
const Icon = item.icon
const isPlainBg = item.bgColor === 'bg-bg-elevated'
return (
<button
type="button"
onClick={onClick}
className="flex items-center justify-between py-4 w-full text-left hover:bg-bg-elevated/30 transition-colors rounded-lg px-2 -mx-2"
>
<div className="flex items-center gap-4">
{/* 图标背景 */}
<div
className={cn(
'w-10 h-10 rounded-[10px] flex items-center justify-center',
isPlainBg ? item.bgColor : `${item.bgColor}/15`
)}
>
<Icon size={20} className={item.iconColor} />
</div>
{/* 文字 */}
<div className="flex flex-col gap-0.5">
<span className="text-[15px] font-medium text-text-primary">{item.title}</span>
<span className="text-[13px] text-text-tertiary">{item.subtitle}</span>
</div>
</div>
<ChevronRight size={20} className="text-text-tertiary" />
</button>
)
}
// 菜单卡片组件
function MenuCard({ onMenuClick }: { onMenuClick: (id: string) => void }) {
return (
<div className="bg-bg-card rounded-2xl p-6 card-shadow flex flex-col">
{menuItems.map((item, index) => (
<div key={item.id}>
<MenuItem item={item} onClick={() => onMenuClick(item.id)} />
{index < menuItems.length - 1 && (
<div className="h-px bg-border-subtle" />
)}
</div>
))}
</div>
)
}
// 退出卡片组件
function LogoutCard({ onLogout }: { onLogout: () => void }) {
return (
<div className="bg-bg-card rounded-2xl p-6 card-shadow">
<button
type="button"
onClick={onLogout}
className="w-full flex items-center justify-center gap-2 py-4 rounded-xl border-[1.5px] border-accent-coral text-accent-coral font-medium hover:bg-accent-coral/10 transition-colors"
>
<LogOut size={20} />
<span>退出登录</span>
</button>
</div>
)
}
export default function CreatorProfilePage() {
const router = useRouter()
// 菜单项点击处理
const handleMenuClick = (menuId: string) => {
const routes: Record<string, string> = {
personal: '/creator/profile/edit',
account: '/creator/settings/account',
notification: '/creator/settings/notification',
history: '/creator/history',
help: '/creator/help',
appeal: '/creator/appeal-quota',
}
const route = routes[menuId]
if (route) {
router.push(route)
}
}
// 退出登录
const handleLogout = () => {
// TODO: 实际退出逻辑
router.push('/login')
}
return (
<ResponsiveLayout role="creator">
<div className="flex flex-col gap-6 h-full">
{/* 顶部栏 */}
<div className="flex flex-col gap-1">
<h1 className="text-2xl lg:text-[28px] font-bold text-text-primary">个人中心</h1>
<p className="text-sm lg:text-[15px] text-text-secondary">管理您的账户信息和偏好设置</p>
</div>
{/* 内容区 - 响应式布局 */}
<div className="flex flex-col lg:flex-row gap-6 flex-1 min-h-0 overflow-y-auto lg:overflow-visible">
{/* 用户卡片 */}
<div className="lg:w-[360px] lg:flex-shrink-0">
<UserCard />
</div>
{/* 菜单和退出 */}
<div className="flex-1 flex flex-col gap-5 lg:overflow-y-auto lg:pr-2">
<MenuCard onMenuClick={handleMenuClick} />
<LogoutCard onLogout={handleLogout} />
</div>
</div>
</div>
</ResponsiveLayout>
)
}

383
frontend/app/creator/settings/account/page.tsx Normal file
View File

@ -0,0 +1,383 @@
'use client'
import React, { useState } from 'react'
import { useRouter } from 'next/navigation'
import {
ArrowLeft,
Key,
ShieldCheck,
Smartphone,
ChevronRight,
Check,
X,
Eye,
EyeOff,
} from 'lucide-react'
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
import { Modal } from '@/components/ui/Modal'
import { cn } from '@/lib/utils'
// 模拟登录设备数据
const mockDevices = [
{
id: '1',
name: 'iPhone 15 Pro',
type: 'mobile',
location: '北京',
lastActive: '当前设备',
isCurrent: true,
},
{
id: '2',
name: 'MacBook Pro',
type: 'desktop',
location: '北京',
lastActive: '2小时前',
isCurrent: false,
},
{
id: '3',
name: 'iPad Air',
type: 'tablet',
location: '上海',
lastActive: '3天前',
isCurrent: false,
},
]
// 设置项组件
function SettingItem({
icon: Icon,
iconColor,
title,
description,
badge,
onClick,
showArrow = true,
}: {
icon: React.ElementType
iconColor: string
title: string
description: string
badge?: React.ReactNode
onClick?: () => void
showArrow?: boolean
}) {
return (
<button
type="button"
onClick={onClick}
className="flex items-center justify-between py-5 px-5 w-full text-left hover:bg-bg-elevated/30 transition-colors border-b border-border-subtle last:border-b-0"
>
<div className="flex items-center gap-4">
<div className={cn('w-10 h-10 rounded-xl flex items-center justify-center', `${iconColor}/15`)}>
<Icon size={20} className={iconColor} />
</div>
<div className="flex flex-col gap-1">
<span className="text-[15px] font-medium text-text-primary">{title}</span>
<span className="text-[13px] text-text-tertiary">{description}</span>
</div>
</div>
<div className="flex items-center gap-2">
{badge}
{showArrow && <ChevronRight size={20} className="text-text-tertiary" />}
</div>
</button>
)
}
// 修改密码弹窗
function ChangePasswordModal({
isOpen,
onClose,
}: {
isOpen: boolean
onClose: () => void
}) {
const [step, setStep] = useState(1)
const [showPasswords, setShowPasswords] = useState({
current: false,
new: false,
confirm: false,
})
const [formData, setFormData] = useState({
currentPassword: '',
newPassword: '',
confirmPassword: '',
})
const [isSaving, setIsSaving] = useState(false)
const handleSubmit = async () => {
setIsSaving(true)
await new Promise(resolve => setTimeout(resolve, 1500))
setIsSaving(false)
setStep(2)
}
const handleClose = () => {
setStep(1)
setFormData({ currentPassword: '', newPassword: '', confirmPassword: '' })
onClose()
}
return (
<Modal isOpen={isOpen} onClose={handleClose} title="修改密码">
{step === 1 ? (
<div className="flex flex-col gap-5">
{/* 当前密码 */}
<div className="flex flex-col gap-2">
<label className="text-sm font-medium text-text-primary">当前密码</label>
<div className="relative">
<Input
type={showPasswords.current ? 'text' : 'password'}
value={formData.currentPassword}
onChange={(e) => setFormData(prev => ({ ...prev, currentPassword: e.target.value }))}
placeholder="请输入当前密码"
/>
<button
type="button"
onClick={() => setShowPasswords(prev => ({ ...prev, current: !prev.current }))}
className="absolute right-3 top-1/2 -translate-y-1/2 text-text-tertiary hover:text-text-secondary"
>
{showPasswords.current ? <EyeOff size={18} /> : <Eye size={18} />}
</button>
</div>
</div>
{/* 新密码 */}
<div className="flex flex-col gap-2">
<label className="text-sm font-medium text-text-primary">新密码</label>
<div className="relative">
<Input
type={showPasswords.new ? 'text' : 'password'}
value={formData.newPassword}
onChange={(e) => setFormData(prev => ({ ...prev, newPassword: e.target.value }))}
placeholder="请输入新密码（8-20位）"
/>
<button
type="button"
onClick={() => setShowPasswords(prev => ({ ...prev, new: !prev.new }))}
className="absolute right-3 top-1/2 -translate-y-1/2 text-text-tertiary hover:text-text-secondary"
>
{showPasswords.new ? <EyeOff size={18} /> : <Eye size={18} />}
</button>
</div>
<p className="text-xs text-text-tertiary">密码需包含字母和数字，长度8-20位</p>
</div>
{/* 确认密码 */}
<div className="flex flex-col gap-2">
<label className="text-sm font-medium text-text-primary">确认新密码</label>
<div className="relative">
<Input
type={showPasswords.confirm ? 'text' : 'password'}
value={formData.confirmPassword}
onChange={(e) => setFormData(prev => ({ ...prev, confirmPassword: e.target.value }))}
placeholder="请再次输入新密码"
/>
<button
type="button"
onClick={() => setShowPasswords(prev => ({ ...prev, confirm: !prev.confirm }))}
className="absolute right-3 top-1/2 -translate-y-1/2 text-text-tertiary hover:text-text-secondary"
>
{showPasswords.confirm ? <EyeOff size={18} /> : <Eye size={18} />}
</button>
</div>
</div>
{/* 按钮 */}
<div className="flex gap-3 pt-2">
<Button variant="secondary" size="lg" className="flex-1" onClick={handleClose}>
取消
</Button>
<Button
variant="primary"
size="lg"
className="flex-1"
onClick={handleSubmit}
disabled={!formData.currentPassword || !formData.newPassword || !formData.confirmPassword || isSaving}
>
{isSaving ? '提交中...' : '确认修改'}
</Button>
</div>
</div>
) : (
<div className="flex flex-col items-center gap-4 py-6">
<div className="w-16 h-16 rounded-full bg-accent-green/15 flex items-center justify-center">
<Check size={32} className="text-accent-green" />
</div>
<div className="text-center">
<p className="text-lg font-semibold text-text-primary">密码修改成功</p>
<p className="text-sm text-text-secondary mt-1">下次登录请使用新密码</p>
</div>
<Button variant="primary" size="lg" className="w-full mt-2" onClick={handleClose}>
完成
</Button>
</div>
)}
</Modal>
)
}
// 设备管理弹窗
function DeviceManageModal({
isOpen,
onClose,
}: {
isOpen: boolean
onClose: () => void
}) {
const [devices, setDevices] = useState(mockDevices)
const handleRemoveDevice = (deviceId: string) => {
setDevices(prev => prev.filter(d => d.id !== deviceId))
}
return (
<Modal isOpen={isOpen} onClose={onClose} title="登录设备管理">
<div className="flex flex-col gap-4">
<p className="text-sm text-text-secondary">管理已登录此账号的设备，可移除不再使用的设备以保障账户安全。</p>
<div className="flex flex-col gap-3">
{devices.map((device) => (
<div
key={device.id}
className="flex items-center justify-between p-4 rounded-xl bg-bg-elevated"
>
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-bg-card flex items-center justify-center">
<Smartphone size={20} className="text-text-secondary" />
</div>
<div className="flex flex-col gap-0.5">
<div className="flex items-center gap-2">
<span className="text-[15px] font-medium text-text-primary">{device.name}</span>
{device.isCurrent && (
<span className="px-2 py-0.5 rounded-full bg-accent-green/15 text-accent-green text-xs font-medium">
当前
</span>
)}
</div>
<span className="text-[13px] text-text-tertiary">
{device.location} · {device.lastActive}
</span>
</div>
</div>
{!device.isCurrent && (
<button
type="button"
onClick={() => handleRemoveDevice(device.id)}
className="text-accent-coral hover:text-accent-coral/80 text-sm font-medium"
>
移除
</button>
)}
</div>
))}
</div>
<Button variant="secondary" size="lg" className="w-full mt-2" onClick={onClose}>
关闭
</Button>
</div>
</Modal>
)
}
export default function AccountSettingsPage() {
const router = useRouter()
const [showPasswordModal, setShowPasswordModal] = useState(false)
const [showDeviceModal, setShowDeviceModal] = useState(false)
const [twoFactorEnabled, setTwoFactorEnabled] = useState(true)
return (
<ResponsiveLayout role="creator">
<div className="flex flex-col gap-6 h-full">
{/* 顶部栏 */}
<div className="flex items-center gap-4">
<button
type="button"
onClick={() => router.back()}
className="w-10 h-10 rounded-xl bg-bg-elevated flex items-center justify-center hover:bg-bg-elevated/80 transition-colors"
>
<ArrowLeft size={20} className="text-text-secondary" />
</button>
<div className="flex flex-col gap-1">
<h1 className="text-2xl lg:text-[28px] font-bold text-text-primary">账户设置</h1>
<p className="text-sm lg:text-[15px] text-text-secondary">管理密码和账户安全选项</p>
</div>
</div>
{/* 内容区 */}
<div className="flex flex-col gap-5 flex-1 min-h-0 overflow-y-auto lg:max-w-2xl">
{/* 账户安全 */}
<div className="flex flex-col gap-3">
<h2 className="text-base font-semibold text-text-primary px-1">账户安全</h2>
<div className="bg-bg-card rounded-2xl card-shadow overflow-hidden">
<SettingItem
icon={Key}
iconColor="text-accent-indigo"
title="修改密码"
description="定期更新密码以保障账户安全"
onClick={() => setShowPasswordModal(true)}
/>
<SettingItem
icon={ShieldCheck}
iconColor="text-accent-green"
title="两步验证"
description="启用双因素认证增强安全性"
badge={
<span
className={cn(
'px-2 py-1 rounded text-xs font-medium',
twoFactorEnabled
? 'bg-accent-green/15 text-accent-green'
: 'bg-bg-elevated text-text-tertiary'
)}
>
{twoFactorEnabled ? '已开启' : '未开启'}
</span>
}
onClick={() => setTwoFactorEnabled(!twoFactorEnabled)}
/>
<SettingItem
icon={Smartphone}
iconColor="text-accent-blue"
title="登录设备管理"
description="查看和管理已登录的设备"
onClick={() => setShowDeviceModal(true)}
/>
</div>
</div>
{/* 危险区域 */}
<div className="flex flex-col gap-3">
<h2 className="text-base font-semibold text-accent-coral px-1">危险区域</h2>
<div className="bg-bg-card rounded-2xl card-shadow p-5">
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
<div className="flex flex-col gap-1">
<span className="text-[15px] font-medium text-text-primary">注销账户</span>
<span className="text-[13px] text-text-tertiary">
永久删除您的账户和所有相关数据，此操作不可撤销
</span>
</div>
<Button
variant="secondary"
size="md"
className="border-accent-coral text-accent-coral hover:bg-accent-coral/10 lg:flex-shrink-0"
>
注销账户
</Button>
</div>
</div>
</div>
</div>
</div>
{/* 弹窗 */}
<ChangePasswordModal isOpen={showPasswordModal} onClose={() => setShowPasswordModal(false)} />
<DeviceManageModal isOpen={showDeviceModal} onClose={() => setShowDeviceModal(false)} />
</ResponsiveLayout>
)
}

279
frontend/app/creator/settings/notification/page.tsx Normal file
View File

@ -0,0 +1,279 @@
'use client'
import React, { useState } from 'react'
import { useRouter } from 'next/navigation'
import {
ArrowLeft,
Mail,
Bell,
MessageSquare,
Clock,
AlertTriangle,
} from 'lucide-react'
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
import { cn } from '@/lib/utils'
// 开关组件
function Toggle({
enabled,
onChange,
}: {
enabled: boolean
onChange: (enabled: boolean) => void
}) {
return (
<button
type="button"
onClick={() => onChange(!enabled)}
className={cn(
'w-12 h-7 rounded-full p-0.5 transition-colors',
enabled ? 'bg-accent-indigo' : 'bg-bg-elevated'
)}
>
<div
className={cn(
'w-6 h-6 rounded-full bg-white shadow-sm transition-transform',
enabled ? 'translate-x-5' : 'translate-x-0'
)}
/>
</button>
)
}
// 设置项组件
function NotificationSettingItem({
icon: Icon,
iconColor,
title,
description,
enabled,
onChange,
isLast = false,
}: {
icon: React.ElementType
iconColor: string
title: string
description: string
enabled: boolean
onChange: (enabled: boolean) => void
isLast?: boolean
}) {
return (
<div
className={cn(
'flex items-center justify-between py-5 px-5',
!isLast && 'border-b border-border-subtle'
)}
>
<div className="flex items-center gap-4">
<div className={cn('w-10 h-10 rounded-xl flex items-center justify-center', `${iconColor}/15`)}>
<Icon size={20} className={iconColor} />
</div>
<div className="flex flex-col gap-1">
<span className="text-[15px] font-medium text-text-primary">{title}</span>
<span className="text-[13px] text-text-tertiary">{description}</span>
</div>
</div>
<Toggle enabled={enabled} onChange={onChange} />
</div>
)
}
// 时段选择组件
function TimeRangeSelector({
startTime,
endTime,
onChange,
disabled,
}: {
startTime: string
endTime: string
onChange: (start: string, end: string) => void
disabled: boolean
}) {
return (
<div className={cn('flex items-center gap-3', disabled && 'opacity-50')}>
<select
value={startTime}
onChange={(e) => onChange(e.target.value, endTime)}
disabled={disabled}
className="px-3 py-2 rounded-lg bg-bg-elevated border border-border-default text-text-primary text-sm focus:outline-none focus:border-accent-indigo"
>
{Array.from({ length: 24 }, (_, i) => (
<option key={i} value={`${i.toString().padStart(2, '0')}:00`}>
{i.toString().padStart(2, '0')}:00
</option>
))}
</select>
<span className="text-text-tertiary">至</span>
<select
value={endTime}
onChange={(e) => onChange(startTime, e.target.value)}
disabled={disabled}
className="px-3 py-2 rounded-lg bg-bg-elevated border border-border-default text-text-primary text-sm focus:outline-none focus:border-accent-indigo"
>
{Array.from({ length: 24 }, (_, i) => (
<option key={i} value={`${i.toString().padStart(2, '0')}:00`}>
{i.toString().padStart(2, '0')}:00
</option>
))}
</select>
</div>
)
}
export default function NotificationSettingsPage() {
const router = useRouter()
// 通知设置状态
const [settings, setSettings] = useState({
emailNotification: true,
pushNotification: true,
smsNotification: false,
reviewResult: true,
taskReminder: true,
urgentAlert: true,
quietMode: false,
quietStart: '22:00',
quietEnd: '08:00',
})
const handleToggle = (key: keyof typeof settings) => {
setSettings(prev => ({ ...prev, [key]: !prev[key] }))
}
const handleTimeChange = (start: string, end: string) => {
setSettings(prev => ({ ...prev, quietStart: start, quietEnd: end }))
}
return (
<ResponsiveLayout role="creator">
<div className="flex flex-col gap-6 h-full">
{/* 顶部栏 */}
<div className="flex items-center gap-4">
<button
type="button"
onClick={() => router.back()}
className="w-10 h-10 rounded-xl bg-bg-elevated flex items-center justify-center hover:bg-bg-elevated/80 transition-colors"
>
<ArrowLeft size={20} className="text-text-secondary" />
</button>
<div className="flex flex-col gap-1">
<h1 className="text-2xl lg:text-[28px] font-bold text-text-primary">消息设置</h1>
<p className="text-sm lg:text-[15px] text-text-secondary">自定义通知方式和提醒偏好</p>
</div>
</div>
{/* 内容区 */}
<div className="flex flex-col gap-5 flex-1 min-h-0 overflow-y-auto lg:max-w-2xl">
{/* 通知渠道 */}
<div className="flex flex-col gap-3">
<h2 className="text-base font-semibold text-text-primary px-1">通知渠道</h2>
<div className="bg-bg-card rounded-2xl card-shadow overflow-hidden">
<NotificationSettingItem
icon={Mail}
iconColor="text-accent-indigo"
title="邮件通知"
description="接收审核结果和系统通知的邮件提醒"
enabled={settings.emailNotification}
onChange={() => handleToggle('emailNotification')}
/>
<NotificationSettingItem
icon={Bell}
iconColor="text-accent-blue"
title="推送通知"
description="接收移动端实时推送消息"
enabled={settings.pushNotification}
onChange={() => handleToggle('pushNotification')}
/>
<NotificationSettingItem
icon={MessageSquare}
iconColor="text-accent-green"
title="短信通知"
description="接收重要消息的短信提醒"
enabled={settings.smsNotification}
onChange={() => handleToggle('smsNotification')}
isLast
/>
</div>
</div>
{/* 通知类型 */}
<div className="flex flex-col gap-3">
<h2 className="text-base font-semibold text-text-primary px-1">通知类型</h2>
<div className="bg-bg-card rounded-2xl card-shadow overflow-hidden">
<NotificationSettingItem
icon={Bell}
iconColor="text-accent-indigo"
title="审核结果通知"
description="视频审核通过或驳回时收到通知"
enabled={settings.reviewResult}
onChange={() => handleToggle('reviewResult')}
/>
<NotificationSettingItem
icon={Clock}
iconColor="text-accent-coral"
title="任务提醒"
description="任务截止日期临近时收到提醒"
enabled={settings.taskReminder}
onChange={() => handleToggle('taskReminder')}
/>
<NotificationSettingItem
icon={AlertTriangle}
iconColor="text-status-error"
title="紧急通知"
description="紧急事项和系统公告即时推送"
enabled={settings.urgentAlert}
onChange={() => handleToggle('urgentAlert')}
isLast
/>
</div>
</div>
{/* 免打扰模式 */}
<div className="flex flex-col gap-3">
<h2 className="text-base font-semibold text-text-primary px-1">免打扰模式</h2>
<div className="bg-bg-card rounded-2xl card-shadow p-5 flex flex-col gap-4">
<div className="flex items-center justify-between">
<div className="flex flex-col gap-1">
<span className="text-[15px] font-medium text-text-primary">开启免打扰</span>
<span className="text-[13px] text-text-tertiary">在指定时段内静音所有通知</span>
</div>
<Toggle enabled={settings.quietMode} onChange={() => handleToggle('quietMode')} />
</div>
{/* 时间段选择 */}
<div
className={cn(
'flex flex-col lg:flex-row lg:items-center gap-3 pt-3 border-t border-border-subtle',
!settings.quietMode && 'opacity-50'
)}
>
<span className="text-sm text-text-secondary whitespace-nowrap">免打扰时段</span>
<TimeRangeSelector
startTime={settings.quietStart}
endTime={settings.quietEnd}
onChange={handleTimeChange}
disabled={!settings.quietMode}
/>
</div>
</div>
</div>
{/* 提示卡片 */}
<div className="bg-accent-indigo/10 rounded-2xl p-5 flex gap-4">
<div className="w-10 h-10 rounded-xl bg-accent-indigo/15 flex items-center justify-center flex-shrink-0">
<Bell size={20} className="text-accent-indigo" />
</div>
<div className="flex flex-col gap-1">
<span className="text-[15px] font-medium text-text-primary">关于通知</span>
<span className="text-[13px] text-text-secondary leading-relaxed">
建议保持审核结果和紧急通知开启，以便及时了解任务进度和重要信息。您可以随时调整通知偏好。
</span>
</div>
</div>
</div>
</div>
</ResponsiveLayout>
)
}

1040
frontend/app/creator/task/[id]/page.tsx
View File

File diff suppressed because it is too large Load Diff

461
frontend/app/creator/task/[id]/script/page.tsx Normal file
View File

@ -0,0 +1,461 @@
'use client'
import { useState, useEffect } from 'react'
import { useRouter, useParams, useSearchParams } from 'next/navigation'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import { SuccessTag, WarningTag, ErrorTag, PendingTag } from '@/components/ui/Tag'
import { ReviewSteps, getReviewSteps } from '@/components/ui/ReviewSteps'
import {
ArrowLeft,
Upload,
FileText,
CheckCircle,
XCircle,
AlertTriangle,
Clock,
Loader2,
RefreshCw,
Eye,
MessageSquare
} from 'lucide-react'
// 模拟任务数据
const mockTask = {
id: 'task-001',
projectName: 'XX品牌618推广',
brandName: 'XX护肤品牌',
deadline: '2026-06-18',
scriptStatus: 'pending_upload', // pending_upload | ai_reviewing | ai_result | agent_reviewing | agent_rejected | brand_reviewing | brand_passed | brand_rejected
scriptFile: null as string | null,
aiResult: null as null | {
score: number
violations: Array<{ type: string; content: string; suggestion: string }>
complianceChecks: Array<{ item: string; passed: boolean; note?: string }>
},
agencyReview: null as null | {
result: 'approved' | 'rejected'
comment: string
reviewer: string
time: string
},
brandReview: null as null | {
result: 'approved' | 'rejected'
comment: string
reviewer: string
time: string
},
}
// 根据状态获取模拟数据
function getTaskByStatus(status: string) {
const task = { ...mockTask, scriptStatus: status }
if (status === 'ai_result' || status === 'agent_reviewing' || status === 'agent_rejected' || status === 'brand_reviewing' || status === 'brand_passed' || status === 'brand_rejected') {
task.scriptFile = '夏日护肤推广脚本.docx'
task.aiResult = {
score: 85,
violations: [
{ type: '违禁词', content: '神器', suggestion: '建议替换为"好物"或"必备品"' },
],
complianceChecks: [
{ item: '品牌名称正确', passed: true },
{ item: 'SPF标注准确', passed: true },
{ item: '无绝对化用语', passed: false, note: '"超级好用"建议修改' },
],
}
}
if (status === 'agent_rejected') {
task.agencyReview = {
result: 'rejected',
comment: '违禁词未修改，请修改后重新提交。',
reviewer: '张经理',
time: '2026-02-06 15:30',
}
}
if (status === 'brand_reviewing' || status === 'brand_passed' || status === 'brand_rejected') {
task.agencyReview = {
result: 'approved',
comment: '脚本符合要求，建议通过。',
reviewer: '张经理',
time: '2026-02-06 15:30',
}
}
if (status === 'brand_passed') {
task.brandReview = {
result: 'approved',
comment: '脚本通过终审，可以开始拍摄视频。',
reviewer: '品牌方审核员',
time: '2026-02-06 18:00',
}
}
if (status === 'brand_rejected') {
task.brandReview = {
result: 'rejected',
comment: '产品卖点覆盖不完整，请补充后重新提交。',
reviewer: '品牌方审核员',
time: '2026-02-06 18:00',
}
}
return task
}
function UploadSection({ onUpload }: { onUpload: () => void }) {
const [file, setFile] = useState<File | null>(null)
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const selectedFile = e.target.files?.[0]
if (selectedFile) {
setFile(selectedFile)
}
}
return (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Upload size={18} className="text-accent-indigo" />
上传脚本
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="border-2 border-dashed border-border-subtle rounded-lg p-8 text-center hover:border-accent-indigo/50 transition-colors">
{file ? (
<div className="flex items-center justify-center gap-3">
<FileText size={24} className="text-accent-indigo" />
<span className="text-text-primary">{file.name}</span>
<button
type="button"
onClick={() => setFile(null)}
className="p-1 hover:bg-bg-elevated rounded-full"
>
<XCircle size={16} className="text-text-tertiary" />
</button>
</div>
) : (
<label className="cursor-pointer">
<Upload size={32} className="mx-auto text-text-tertiary mb-3" />
<p className="text-text-secondary mb-1">点击或拖拽上传脚本文件</p>
<p className="text-xs text-text-tertiary">支持 Word、PDF、TXT 格式</p>
<input
type="file"
accept=".doc,.docx,.pdf,.txt"
onChange={handleFileChange}
className="hidden"
/>
</label>
)}
</div>
<Button onClick={onUpload} disabled={!file} fullWidth>
提交脚本
</Button>
</CardContent>
</Card>
)
}
function AIReviewingSection() {
const [progress, setProgress] = useState(0)
const [logs, setLogs] = useState<string[]>(['开始解析脚本文件...'])
useEffect(() => {
const timer = setInterval(() => {
setProgress(prev => {
if (prev >= 100) {
clearInterval(timer)
return 100
}
return prev + 10
})
}, 500)
const logTimer = setTimeout(() => {
setLogs(prev => [...prev, '正在提取文本内容...'])
}, 1000)
const logTimer2 = setTimeout(() => {
setLogs(prev => [...prev, '正在进行违禁词检测...'])
}, 2000)
const logTimer3 = setTimeout(() => {
setLogs(prev => [...prev, '正在分析卖点覆盖...'])
}, 3000)
return () => {
clearInterval(timer)
clearTimeout(logTimer)
clearTimeout(logTimer2)
clearTimeout(logTimer3)
}
}, [])
return (
<Card>
<CardContent className="py-8 text-center">
<Loader2 size={48} className="mx-auto text-accent-indigo mb-4 animate-spin" />
<h3 className="text-lg font-medium text-text-primary mb-2">AI 正在审核您的脚本</h3>
<p className="text-text-secondary mb-4">请稍候，预计需要 1-2 分钟</p>
<div className="w-full max-w-md mx-auto">
<div className="h-2 bg-bg-elevated rounded-full overflow-hidden mb-2">
<div className="h-full bg-accent-indigo transition-all" style={{ width: `${progress}%` }} />
</div>
<p className="text-sm text-text-tertiary">{progress}%</p>
</div>
<div className="mt-6 p-4 bg-bg-elevated rounded-lg text-left max-w-md mx-auto">
<p className="text-xs text-text-tertiary mb-2">处理日志</p>
{logs.map((log, idx) => (
<p key={idx} className="text-sm text-text-secondary">{log}</p>
))}
</div>
</CardContent>
</Card>
)
}
function AIResultSection({ task }: { task: ReturnType<typeof getTaskByStatus> }) {
if (!task.aiResult) return null
return (
<Card>
<CardHeader>
<CardTitle className="flex items-center justify-between">
<span className="flex items-center gap-2">
<CheckCircle size={18} className="text-accent-green" />
AI 审核结果
</span>
<span className={`text-xl font-bold ${task.aiResult.score >= 85 ? 'text-accent-green' : task.aiResult.score >= 70 ? 'text-yellow-400' : 'text-accent-coral'}`}>
{task.aiResult.score}分
</span>
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{/* 违规检测 */}
{task.aiResult.violations.length > 0 && (
<div>
<h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2">
<AlertTriangle size={14} className="text-orange-500" />
违规检测 ({task.aiResult.violations.length})
</h4>
{task.aiResult.violations.map((v, idx) => (
<div key={idx} className="p-3 bg-orange-500/10 rounded-lg border border-orange-500/30 mb-2">
<div className="flex items-center gap-2 mb-1">
<WarningTag>{v.type}</WarningTag>
</div>
<p className="text-sm text-text-primary">「{v.content}」</p>
<p className="text-xs text-accent-indigo mt-1">{v.suggestion}</p>
</div>
))}
</div>
)}
{/* 合规检查 */}
<div>
<h4 className="text-sm font-medium text-text-primary mb-2">合规检查</h4>
<div className="space-y-2">
{task.aiResult.complianceChecks.map((check, idx) => (
<div key={idx} className="flex items-start gap-2 p-2 rounded-lg bg-bg-elevated">
{check.passed ? (
<CheckCircle size={16} className="text-accent-green flex-shrink-0 mt-0.5" />
) : (
<XCircle size={16} className="text-accent-coral flex-shrink-0 mt-0.5" />
)}
<div className="flex-1">
<span className="text-sm text-text-primary">{check.item}</span>
{check.note && <p className="text-xs text-text-tertiary mt-0.5">{check.note}</p>}
</div>
</div>
))}
</div>
</div>
</CardContent>
</Card>
)
}
function ReviewFeedbackSection({ review, type }: { review: NonNullable<typeof mockTask.agencyReview>; type: 'agency' | 'brand' }) {
const isApproved = review.result === 'approved'
const title = type === 'agency' ? '代理商审核意见' : '品牌方终审意见'
return (
<Card className={isApproved ? 'border-accent-green/30' : 'border-accent-coral/30'}>
<CardHeader>
<CardTitle className="flex items-center gap-2">
{isApproved ? (
<CheckCircle size={18} className="text-accent-green" />
) : (
<XCircle size={18} className="text-accent-coral" />
)}
{title}
</CardTitle>
</CardHeader>
<CardContent>
<div className="flex items-center gap-2 mb-2">
<span className="font-medium text-text-primary">{review.reviewer}</span>
{isApproved ? <SuccessTag>通过</SuccessTag> : <ErrorTag>驳回</ErrorTag>}
</div>
<p className="text-text-secondary">{review.comment}</p>
<p className="text-xs text-text-tertiary mt-2">{review.time}</p>
</CardContent>
</Card>
)
}
function WaitingSection({ message }: { message: string }) {
return (
<Card>
<CardContent className="py-8 text-center">
<Clock size={48} className="mx-auto text-accent-indigo mb-4" />
<h3 className="text-lg font-medium text-text-primary mb-2">{message}</h3>
<p className="text-text-secondary">请耐心等待，审核结果将通过消息通知您</p>
</CardContent>
</Card>
)
}
function SuccessSection({ onContinue }: { onContinue: () => void }) {
return (
<Card className="border-accent-green/30">
<CardContent className="py-8 text-center">
<CheckCircle size={48} className="mx-auto text-accent-green mb-4" />
<h3 className="text-lg font-medium text-text-primary mb-2">脚本审核通过！</h3>
<p className="text-text-secondary mb-6">您可以开始拍摄视频了</p>
<Button onClick={onContinue}>
上传视频
</Button>
</CardContent>
</Card>
)
}
export default function CreatorScriptPage() {
const router = useRouter()
const params = useParams()
const searchParams = useSearchParams()
const status = searchParams.get('status') || 'pending_upload'
const [task, setTask] = useState(getTaskByStatus(status))
// 模拟状态切换
const simulateUpload = () => {
setTask(getTaskByStatus('ai_reviewing'))
setTimeout(() => {
setTask(getTaskByStatus('ai_result'))
}, 4000)
}
const handleResubmit = () => {
setTask(getTaskByStatus('pending_upload'))
}
const handleContinueToVideo = () => {
router.push(`/creator/task/${params.id}/video`)
}
const getStatusDisplay = () => {
switch (task.scriptStatus) {
case 'pending_upload': return '待上传脚本'
case 'ai_reviewing': return 'AI 审核中'
case 'ai_result': return 'AI 审核完成'
case 'agent_reviewing': return '代理商审核中'
case 'agent_rejected': return '代理商驳回'
case 'brand_reviewing': return '品牌方终审中'
case 'brand_passed': return '审核通过'
case 'brand_rejected': return '品牌方驳回'
default: return '未知状态'
}
}
return (
<div className="space-y-6 max-w-2xl mx-auto">
{/* 顶部导航 */}
<div className="flex items-center gap-4">
<button type="button" onClick={() => router.back()} className="p-2 hover:bg-bg-elevated rounded-full">
<ArrowLeft size={20} className="text-text-primary" />
</button>
<div className="flex-1">
<h1 className="text-xl font-bold text-text-primary">{task.projectName}</h1>
<p className="text-sm text-text-secondary">脚本阶段 · {getStatusDisplay()}</p>
</div>
</div>
{/* 审核流程进度条 */}
<Card>
<CardContent className="py-4">
<ReviewSteps steps={getReviewSteps(task.scriptStatus)} />
</CardContent>
</Card>
{/* 根据状态显示不同内容 */}
{task.scriptStatus === 'pending_upload' && (
<UploadSection onUpload={simulateUpload} />
)}
{task.scriptStatus === 'ai_reviewing' && (
<AIReviewingSection />
)}
{task.scriptStatus === 'ai_result' && (
<>
<AIResultSection task={task} />
<WaitingSection message="等待代理商审核" />
</>
)}
{task.scriptStatus === 'agent_reviewing' && (
<>
<AIResultSection task={task} />
<WaitingSection message="等待代理商审核" />
</>
)}
{task.scriptStatus === 'agent_rejected' && task.agencyReview && (
<>
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
<AIResultSection task={task} />
<div className="flex gap-3">
<Button variant="secondary" onClick={handleResubmit} fullWidth>
<RefreshCw size={16} />
重新上传
</Button>
</div>
</>
)}
{task.scriptStatus === 'brand_reviewing' && task.agencyReview && (
<>
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
<AIResultSection task={task} />
<WaitingSection message="等待品牌方终审" />
</>
)}
{task.scriptStatus === 'brand_passed' && task.agencyReview && task.brandReview && (
<>
<SuccessSection onContinue={handleContinueToVideo} />
<ReviewFeedbackSection review={task.brandReview} type="brand" />
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
<AIResultSection task={task} />
</>
)}
{task.scriptStatus === 'brand_rejected' && task.agencyReview && task.brandReview && (
<>
<ReviewFeedbackSection review={task.brandReview} type="brand" />
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
<AIResultSection task={task} />
<div className="flex gap-3">
<Button variant="secondary" onClick={handleResubmit} fullWidth>
<RefreshCw size={16} />
重新上传
</Button>
</div>
</>
)}
</div>
)
}

534
frontend/app/creator/task/[id]/video/page.tsx Normal file
View File

@ -0,0 +1,534 @@
'use client'
import { useState, useEffect } from 'react'
import { useRouter, useParams, useSearchParams } from 'next/navigation'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import { SuccessTag, WarningTag, ErrorTag, PendingTag } from '@/components/ui/Tag'
import { ReviewSteps, getReviewSteps } from '@/components/ui/ReviewSteps'
import {
ArrowLeft,
Upload,
Video,
CheckCircle,
XCircle,
AlertTriangle,
Clock,
Loader2,
RefreshCw,
Play,
Radio,
Shield
} from 'lucide-react'
// 模拟任务数据
const mockTask = {
id: 'task-001',
projectName: 'XX品牌618推广',
brandName: 'XX护肤品牌',
deadline: '2026-06-18',
videoStatus: 'pending_upload', // pending_upload | ai_reviewing | ai_result | agent_reviewing | agent_rejected | brand_reviewing | brand_passed | brand_rejected
videoFile: null as string | null,
aiResult: null as null | {
score: number
hardViolations: Array<{ type: string; content: string; timestamp: number; suggestion: string }>
sentimentWarnings: Array<{ type: string; content: string; timestamp: number }>
sellingPointsCovered: Array<{ point: string; covered: boolean; timestamp?: number }>
},
agencyReview: null as null | {
result: 'approved' | 'rejected'
comment: string
reviewer: string
time: string
},
brandReview: null as null | {
result: 'approved' | 'rejected'
comment: string
reviewer: string
time: string
},
}
// 根据状态获取模拟数据
function getTaskByStatus(status: string) {
const task = { ...mockTask, videoStatus: status }
if (status === 'ai_result' || status === 'agent_reviewing' || status === 'agent_rejected' || status === 'brand_reviewing' || status === 'brand_passed' || status === 'brand_rejected') {
task.videoFile = '夏日护肤推广.mp4'
task.aiResult = {
score: 85,
hardViolations: [
{ type: '违禁词', content: '效果最好', timestamp: 15.5, suggestion: '建议替换为"效果显著"' },
],
sentimentWarnings: [
{ type: '表情预警', content: '表情过于夸张', timestamp: 42.0 },
],
sellingPointsCovered: [
{ point: 'SPF50+ PA++++', covered: true, timestamp: 25.0 },
{ point: '轻薄质地', covered: true, timestamp: 38.0 },
{ point: '不油腻', covered: true, timestamp: 52.0 },
],
}
}
if (status === 'agent_rejected') {
task.agencyReview = {
result: 'rejected',
comment: '视频中有竞品Logo露出，请重新拍摄。',
reviewer: '张经理',
time: '2026-02-06 16:30',
}
}
if (status === 'brand_reviewing' || status === 'brand_passed' || status === 'brand_rejected') {
task.agencyReview = {
result: 'approved',
comment: '视频质量良好，建议通过。',
reviewer: '张经理',
time: '2026-02-06 16:30',
}
}
if (status === 'brand_passed') {
task.brandReview = {
result: 'approved',
comment: '视频通过终审，可以发布。',
reviewer: '品牌方审核员',
time: '2026-02-06 19:00',
}
}
if (status === 'brand_rejected') {
task.brandReview = {
result: 'rejected',
comment: '产品特写时间不足，请补拍。',
reviewer: '品牌方审核员',
time: '2026-02-06 19:00',
}
}
return task
}
function formatTimestamp(seconds: number): string {
const mins = Math.floor(seconds / 60)
const secs = Math.floor(seconds % 60)
return `${mins}:${secs.toString().padStart(2, '0')}`
}
function UploadSection({ onUpload }: { onUpload: () => void }) {
const [file, setFile] = useState<File | null>(null)
const [uploadProgress, setUploadProgress] = useState(0)
const [isUploading, setIsUploading] = useState(false)
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const selectedFile = e.target.files?.[0]
if (selectedFile) {
setFile(selectedFile)
}
}
const handleUpload = () => {
setIsUploading(true)
const timer = setInterval(() => {
setUploadProgress(prev => {
if (prev >= 100) {
clearInterval(timer)
setTimeout(onUpload, 500)
return 100
}
return prev + 10
})
}, 200)
}
return (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Upload size={18} className="text-purple-400" />
上传视频
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="border-2 border-dashed border-border-subtle rounded-lg p-8 text-center hover:border-accent-indigo/50 transition-colors">
{file ? (
<div className="space-y-4">
<div className="flex items-center justify-center gap-3">
<Video size={24} className="text-purple-400" />
<span className="text-text-primary">{file.name}</span>
{!isUploading && (
<button
type="button"
onClick={() => setFile(null)}
className="p-1 hover:bg-bg-elevated rounded-full"
>
<XCircle size={16} className="text-text-tertiary" />
</button>
)}
</div>
{isUploading && (
<div className="w-full max-w-xs mx-auto">
<div className="h-2 bg-bg-elevated rounded-full overflow-hidden mb-2">
<div className="h-full bg-accent-indigo transition-all" style={{ width: `${uploadProgress}%` }} />
</div>
<p className="text-sm text-text-tertiary">上传中 {uploadProgress}%</p>
</div>
)}
</div>
) : (
<label className="cursor-pointer">
<Upload size={32} className="mx-auto text-text-tertiary mb-3" />
<p className="text-text-secondary mb-1">点击或拖拽上传视频文件</p>
<p className="text-xs text-text-tertiary">支持 MP4、MOV、AVI 格式，最大 500MB</p>
<input
type="file"
accept="video/*"
onChange={handleFileChange}
className="hidden"
/>
</label>
)}
</div>
<Button onClick={handleUpload} disabled={!file || isUploading} fullWidth>
{isUploading ? '上传中...' : '提交视频'}
</Button>
</CardContent>
</Card>
)
}
function AIReviewingSection() {
const [progress, setProgress] = useState(0)
const [currentStep, setCurrentStep] = useState('正在解析视频...')
useEffect(() => {
const steps = [
'正在解析视频...',
'正在提取音频转文字...',
'正在分析画面内容...',
'正在检测违禁内容...',
'正在分析卖点覆盖...',
'正在生成审核报告...',
]
let stepIndex = 0
const timer = setInterval(() => {
setProgress(prev => {
if (prev >= 100) {
clearInterval(timer)
return 100
}
return prev + 5
})
}, 300)
const stepTimer = setInterval(() => {
stepIndex = (stepIndex + 1) % steps.length
setCurrentStep(steps[stepIndex])
}, 1500)
return () => {
clearInterval(timer)
clearInterval(stepTimer)
}
}, [])
return (
<Card>
<CardContent className="py-8 text-center">
<Loader2 size={48} className="mx-auto text-purple-400 mb-4 animate-spin" />
<h3 className="text-lg font-medium text-text-primary mb-2">AI 正在审核您的视频</h3>
<p className="text-text-secondary mb-4">请稍候，视频审核可能需要 3-5 分钟</p>
<div className="w-full max-w-md mx-auto">
<div className="h-2 bg-bg-elevated rounded-full overflow-hidden mb-2">
<div className="h-full bg-purple-400 transition-all" style={{ width: `${progress}%` }} />
</div>
<p className="text-sm text-text-tertiary">{progress}%</p>
</div>
<div className="mt-4 p-3 bg-bg-elevated rounded-lg max-w-md mx-auto">
<p className="text-sm text-text-secondary">{currentStep}</p>
</div>
</CardContent>
</Card>
)
}
function AIResultSection({ task }: { task: ReturnType<typeof getTaskByStatus> }) {
if (!task.aiResult) return null
return (
<div className="space-y-4">
{/* AI 评分 */}
<Card>
<CardContent className="py-4">
<div className="flex items-center justify-between">
<span className="text-text-secondary">AI 综合评分</span>
<span className={`text-3xl font-bold ${task.aiResult.score >= 85 ? 'text-accent-green' : task.aiResult.score >= 70 ? 'text-yellow-400' : 'text-accent-coral'}`}>
{task.aiResult.score}
</span>
</div>
</CardContent>
</Card>
{/* 硬性合规 */}
{task.aiResult.hardViolations.length > 0 && (
<Card>
<CardHeader className="pb-2">
<CardTitle className="flex items-center gap-2 text-base">
<Shield size={16} className="text-red-500" />
硬性合规 ({task.aiResult.hardViolations.length})
</CardTitle>
</CardHeader>
<CardContent className="space-y-2">
{task.aiResult.hardViolations.map((v, idx) => (
<div key={idx} className="p-3 bg-accent-coral/10 rounded-lg border border-accent-coral/30">
<div className="flex items-center gap-2 mb-1">
<ErrorTag>{v.type}</ErrorTag>
<span className="text-xs text-text-tertiary">{formatTimestamp(v.timestamp)}</span>
</div>
<p className="text-sm text-text-primary">「{v.content}」</p>
<p className="text-xs text-accent-indigo mt-1">{v.suggestion}</p>
</div>
))}
</CardContent>
</Card>
)}
{/* 舆情雷达 */}
{task.aiResult.sentimentWarnings.length > 0 && (
<Card>
<CardHeader className="pb-2">
<CardTitle className="flex items-center gap-2 text-base">
<Radio size={16} className="text-orange-500" />
舆情雷达（仅提示）
</CardTitle>
</CardHeader>
<CardContent className="space-y-2">
{task.aiResult.sentimentWarnings.map((w, idx) => (
<div key={idx} className="p-3 bg-orange-500/10 rounded-lg border border-orange-500/30">
<div className="flex items-center gap-2 mb-1">
<WarningTag>{w.type}</WarningTag>
<span className="text-xs text-text-tertiary">{formatTimestamp(w.timestamp)}</span>
</div>
<p className="text-sm text-orange-400">{w.content}</p>
</div>
))}
</CardContent>
</Card>
)}
{/* 卖点覆盖 */}
<Card>
<CardHeader className="pb-2">
<CardTitle className="flex items-center gap-2 text-base">
<CheckCircle size={16} className="text-accent-green" />
卖点覆盖
</CardTitle>
</CardHeader>
<CardContent className="space-y-2">
{task.aiResult.sellingPointsCovered.map((sp, idx) => (
<div key={idx} className="flex items-center justify-between p-2 rounded-lg bg-bg-elevated">
<div className="flex items-center gap-2">
{sp.covered ? (
<CheckCircle size={16} className="text-accent-green" />
) : (
<XCircle size={16} className="text-accent-coral" />
)}
<span className="text-sm text-text-primary">{sp.point}</span>
</div>
{sp.covered && sp.timestamp && (
<span className="text-xs text-text-tertiary">{formatTimestamp(sp.timestamp)}</span>
)}
</div>
))}
</CardContent>
</Card>
</div>
)
}
function ReviewFeedbackSection({ review, type }: { review: NonNullable<typeof mockTask.agencyReview>; type: 'agency' | 'brand' }) {
const isApproved = review.result === 'approved'
const title = type === 'agency' ? '代理商审核意见' : '品牌方终审意见'
return (
<Card className={isApproved ? 'border-accent-green/30' : 'border-accent-coral/30'}>
<CardHeader>
<CardTitle className="flex items-center gap-2">
{isApproved ? (
<CheckCircle size={18} className="text-accent-green" />
) : (
<XCircle size={18} className="text-accent-coral" />
)}
{title}
</CardTitle>
</CardHeader>
<CardContent>
<div className="flex items-center gap-2 mb-2">
<span className="font-medium text-text-primary">{review.reviewer}</span>
{isApproved ? <SuccessTag>通过</SuccessTag> : <ErrorTag>驳回</ErrorTag>}
</div>
<p className="text-text-secondary">{review.comment}</p>
<p className="text-xs text-text-tertiary mt-2">{review.time}</p>
</CardContent>
</Card>
)
}
function WaitingSection({ message }: { message: string }) {
return (
<Card>
<CardContent className="py-8 text-center">
<Clock size={48} className="mx-auto text-accent-indigo mb-4" />
<h3 className="text-lg font-medium text-text-primary mb-2">{message}</h3>
<p className="text-text-secondary">请耐心等待，审核结果将通过消息通知您</p>
</CardContent>
</Card>
)
}
function SuccessSection() {
return (
<Card className="border-accent-green/30">
<CardContent className="py-8 text-center">
<CheckCircle size={64} className="mx-auto text-accent-green mb-4" />
<h3 className="text-xl font-bold text-text-primary mb-2">🎉 视频审核通过！</h3>
<p className="text-text-secondary mb-6">恭喜您，视频已通过所有审核，可以发布了</p>
<div className="flex justify-center gap-3">
<Button variant="secondary">
<Play size={16} />
预览视频
</Button>
<Button>
分享链接
</Button>
</div>
</CardContent>
</Card>
)
}
export default function CreatorVideoPage() {
const router = useRouter()
const params = useParams()
const searchParams = useSearchParams()
const status = searchParams.get('status') || 'pending_upload'
const [task, setTask] = useState(getTaskByStatus(status))
// 模拟状态切换
const simulateUpload = () => {
setTask(getTaskByStatus('ai_reviewing'))
setTimeout(() => {
setTask(getTaskByStatus('ai_result'))
}, 5000)
}
const handleResubmit = () => {
setTask(getTaskByStatus('pending_upload'))
}
const getStatusDisplay = () => {
switch (task.videoStatus) {
case 'pending_upload': return '待上传视频'
case 'ai_reviewing': return 'AI 审核中'
case 'ai_result': return 'AI 审核完成'
case 'agent_reviewing': return '代理商审核中'
case 'agent_rejected': return '代理商驳回'
case 'brand_reviewing': return '品牌方终审中'
case 'brand_passed': return '审核通过'
case 'brand_rejected': return '品牌方驳回'
default: return '未知状态'
}
}
return (
<div className="space-y-6 max-w-2xl mx-auto">
{/* 顶部导航 */}
<div className="flex items-center gap-4">
<button type="button" onClick={() => router.back()} className="p-2 hover:bg-bg-elevated rounded-full">
<ArrowLeft size={20} className="text-text-primary" />
</button>
<div className="flex-1">
<h1 className="text-xl font-bold text-text-primary">{task.projectName}</h1>
<p className="text-sm text-text-secondary">视频阶段 · {getStatusDisplay()}</p>
</div>
</div>
{/* 审核流程进度条 */}
<Card>
<CardContent className="py-4">
<ReviewSteps steps={getReviewSteps(task.videoStatus)} />
</CardContent>
</Card>
{/* 根据状态显示不同内容 */}
{task.videoStatus === 'pending_upload' && (
<UploadSection onUpload={simulateUpload} />
)}
{task.videoStatus === 'ai_reviewing' && (
<AIReviewingSection />
)}
{task.videoStatus === 'ai_result' && (
<>
<AIResultSection task={task} />
<WaitingSection message="等待代理商审核" />
</>
)}
{task.videoStatus === 'agent_reviewing' && (
<>
<AIResultSection task={task} />
<WaitingSection message="等待代理商审核" />
</>
)}
{task.videoStatus === 'agent_rejected' && task.agencyReview && (
<>
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
<AIResultSection task={task} />
<div className="flex gap-3">
<Button variant="secondary" onClick={handleResubmit} fullWidth>
<RefreshCw size={16} />
重新上传
</Button>
</div>
</>
)}
{task.videoStatus === 'brand_reviewing' && task.agencyReview && (
<>
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
<AIResultSection task={task} />
<WaitingSection message="等待品牌方终审" />
</>
)}
{task.videoStatus === 'brand_passed' && task.agencyReview && task.brandReview && (
<>
<SuccessSection />
<ReviewFeedbackSection review={task.brandReview} type="brand" />
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
<AIResultSection task={task} />
</>
)}
{task.videoStatus === 'brand_rejected' && task.agencyReview && task.brandReview && (
<>
<ReviewFeedbackSection review={task.brandReview} type="brand" />
<ReviewFeedbackSection review={task.agencyReview} type="agency" />
<AIResultSection task={task} />
<div className="flex gap-3">
<Button variant="secondary" onClick={handleResubmit} fullWidth>
<RefreshCw size={16} />
重新上传
</Button>
</div>
</>
)}
</div>
)
}

86
frontend/components/layout/ResponsiveLayout.tsx
View File

@ -1,44 +1,96 @@
'use client' 'use client'
import { useEffect, useState } from 'react' import { useState, useEffect } from 'react'
import { MobileLayout } from './MobileLayout' import { Menu, X } from 'lucide-react'
import { DesktopLayout } from './DesktopLayout' import { Sidebar } from '../navigation/Sidebar'
import { cn } from '@/lib/utils'
interface ResponsiveLayoutProps { interface ResponsiveLayoutProps {
children: React.ReactNode children: React.ReactNode
role?: 'creator' | 'agency' | 'brand' role?: 'creator' | 'agency' | 'brand'
showBottomNav?: boolean className?: string
} }
export function ResponsiveLayout({ export function ResponsiveLayout({
children, children,
role = 'creator', role = 'creator',
showBottomNav = true, className = '',
}: ResponsiveLayoutProps) { }: ResponsiveLayoutProps) {
const [isMobile, setIsMobile] = useState(true) const [isMobile, setIsMobile] = useState(false)
const [sidebarOpen, setSidebarOpen] = useState(false)
useEffect(() => { useEffect(() => {
const checkMobile = () => { const checkMobile = () => {
setIsMobile(window.innerWidth < 1024) const mobile = window.innerWidth < 1024
setIsMobile(mobile)
// 大屏幕自动关闭抽屉
if (!mobile) {
setSidebarOpen(false)
}
} }
checkMobile() checkMobile()
window.addEventListener('resize', checkMobile) window.addEventListener('resize', checkMobile)
return () => window.removeEventListener('resize', checkMobile) return () => window.removeEventListener('resize', checkMobile)
}, []) }, [])
if (isMobile) { // 点击遮罩关闭侧边栏
return ( const closeSidebar = () => setSidebarOpen(false)
<MobileLayout role={role} showBottomNav={showBottomNav}>
{children}
</MobileLayout>
)
}
return ( return (
<DesktopLayout role={role}> <div className={cn('min-h-screen bg-bg-page', className)}>
{/* 移动端：汉堡菜单按钮 */}
{isMobile && !sidebarOpen && (
<button
type="button"
onClick={() => setSidebarOpen(true)}
className="fixed top-4 left-4 z-50 w-10 h-10 rounded-xl bg-bg-card flex items-center justify-center card-shadow"
>
<Menu className="w-5 h-5 text-text-primary" />
</button>
)}
{/* 移动端：遮罩层 */}
{isMobile && sidebarOpen && (
<div
className="fixed inset-0 z-40 bg-black/50 transition-opacity"
onClick={closeSidebar}
/>
)}
{/* 侧边栏 */}
<div
className={cn(
'fixed left-0 top-0 bottom-0 z-sidebar transition-transform duration-300',
isMobile
? sidebarOpen
? 'translate-x-0'
: '-translate-x-full'
: 'translate-x-0'
)}
>
<Sidebar role={role} />
{/* 移动端：关闭按钮 */}
{isMobile && sidebarOpen && (
<button
type="button"
onClick={closeSidebar}
className="absolute top-4 right-4 w-8 h-8 rounded-lg bg-bg-elevated flex items-center justify-center"
>
<X className="w-4 h-4 text-text-secondary" />
</button>
)}
</div>
{/* 主内容区 */}
<main
className={cn(
'min-h-screen transition-all duration-300',
isMobile ? 'ml-0 pt-16 px-4 pb-6' : 'ml-[260px] p-8'
)}
>
{children} {children}
</DesktopLayout> </main>
</div>
) )
} }

30
frontend/components/navigation/Sidebar.tsx
View File

@ -2,7 +2,22 @@
import Link from 'next/link' import Link from 'next/link'
import { usePathname } from 'next/navigation' import { usePathname } from 'next/navigation'
import { ShieldCheck, ListTodo, User, LayoutDashboard, Scan, BarChart3, Settings, FileText, Users, Bell } from 'lucide-react' import {
ShieldCheck,
ListTodo,
User,
LayoutDashboard,
Scan,
BarChart3,
Settings,
FileText,
Users,
Bell,
FolderKanban,
PlusCircle,
ClipboardCheck,
Bot
} from 'lucide-react'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
interface NavItem { interface NavItem {
@ -21,19 +36,22 @@ const creatorNavItems: NavItem[] = [
// 代理商端导航项 // 代理商端导航项
const agencyNavItems: NavItem[] = [ const agencyNavItems: NavItem[] = [
{ icon: LayoutDashboard, label: '工作台', href: '/agency' }, { icon: LayoutDashboard, label: '工作台', href: '/agency' },
{ icon: Scan, label: '审核决策', href: '/agency/review' }, { icon: Scan, label: '审核台', href: '/agency/review' },
{ icon: FileText, label: 'Brief 配置', href: '/agency/briefs' }, { icon: FileText, label: 'Brief 配置', href: '/agency/briefs' },
{ icon: Users, label: '达人管理', href: '/agency/creators' }, { icon: Users, label: '达人管理', href: '/agency/creators' },
{ icon: BarChart3, label: '数据报表', href: '/agency/reports' }, { icon: BarChart3, label: '数据报表', href: '/agency/reports' },
{ icon: Bell, label: '消息中心', href: '/agency/messages' },
] ]
// 品牌方端导航项 // 品牌方端导航项
const brandNavItems: NavItem[] = [ const brandNavItems: NavItem[] = [
{ icon: LayoutDashboard, label: '数据看板', href: '/brand' }, { icon: FolderKanban, label: '项目看板', href: '/brand' },
{ icon: Settings, label: 'AI 配置', href: '/brand/ai-config' }, { icon: PlusCircle, label: '创建项目', href: '/brand/projects/create' },
{ icon: FileText, label: '规则配置', href: '/brand/rules' }, { icon: ClipboardCheck, label: '终审台', href: '/brand/review' },
{ icon: FileCheck, label: '终审台', href: '/brand/final-review' },
{ icon: Users, label: '代理商管理', href: '/brand/agencies' }, { icon: Users, label: '代理商管理', href: '/brand/agencies' },
{ icon: FileText, label: '规则配置', href: '/brand/rules' },
{ icon: Bot, label: 'AI 配置', href: '/brand/ai-config' },
{ icon: Settings, label: '系统设置', href: '/brand/settings' },
] ]
interface SidebarProps { interface SidebarProps {

50
frontend/components/ui/ReviewSteps.tsx
View File

@ -149,7 +149,55 @@ export function getReviewSteps(taskStatus: string): ReviewStep[] {
} }
} }
// 代理商/品牌方视角的审核步骤 (包含品牌终审) // 品牌方终审视角的审核步骤
export function getBrandReviewSteps(taskStatus: string): ReviewStep[] {
switch (taskStatus) {
case 'ai_reviewing':
return [
{ key: 'submitted', label: '已提交', status: 'done' },
{ key: 'ai_review', label: 'AI审核', status: 'current' },
{ key: 'agent_review', label: '代理商初审', status: 'pending' },
{ key: 'brand_review', label: '品牌方终审', status: 'pending' },
]
case 'agent_reviewing':
return [
{ key: 'submitted', label: '已提交', status: 'done' },
{ key: 'ai_review', label: 'AI审核', status: 'done' },
{ key: 'agent_review', label: '代理商初审', status: 'current' },
{ key: 'brand_review', label: '品牌方终审', status: 'pending' },
]
case 'brand_reviewing':
return [
{ key: 'submitted', label: '已提交', status: 'done' },
{ key: 'ai_review', label: 'AI审核', status: 'done' },
{ key: 'agent_review', label: '代理商初审', status: 'done' },
{ key: 'brand_review', label: '品牌方终审', status: 'current' },
]
case 'passed':
return [
{ key: 'submitted', label: '已提交', status: 'done' },
{ key: 'ai_review', label: 'AI审核', status: 'done' },
{ key: 'agent_review', label: '代理商初审', status: 'done' },
{ key: 'brand_review', label: '已通过', status: 'done' },
]
case 'rejected':
return [
{ key: 'submitted', label: '已提交', status: 'done' },
{ key: 'ai_review', label: 'AI审核', status: 'done' },
{ key: 'agent_review', label: '代理商初审', status: 'done' },
{ key: 'brand_review', label: '已驳回', status: 'failed' },
]
default:
return [
{ key: 'submitted', label: '已提交', status: 'done' },
{ key: 'ai_review', label: 'AI审核', status: 'done' },
{ key: 'agent_review', label: '代理商初审', status: 'done' },
{ key: 'brand_review', label: '品牌方终审', status: 'current' },
]
}
}
// 代理商视角的审核步骤 (包含品牌终审)
export function getAgencyReviewSteps(taskStatus: string): ReviewStep[] { export function getAgencyReviewSteps(taskStatus: string): ReviewStep[] {
switch (taskStatus) { switch (taskStatus) {
case 'ai_reviewing': case 'ai_reviewing':

8520
pencil-new.pen
View File

File diff suppressed because it is too large Load Diff

3519
tasks.md
View File

File diff suppressed because it is too large Load Diff