feat: 完成代理商/品牌方前端及文档更新
代理商端前端： - 新增达人管理页面（含任务申诉次数管理） - 新增消息中心（含申诉次数申请审批） - 新增 Brief 管理（列表、详情） - 新增审核中心（脚本审核、视频审核） - 新增数据报表页面 品牌方端前端： - 优化首页仪表盘布局 - 新增项目管理（列表、详情、创建） - 新增代理商管理页面 - 新增审核中心（脚本终审、视频终审） - 新增系统设置页面 文档更新： - 申诉次数改为按任务分配（每任务初始1次） - 更新 PRD、FeatureSummary、User_Role_Interfaces 等文档 - 更新 UI 设计规范和开发计划 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Your Name
parent
2f9b7f05fd
commit
4753626e5a
@ -401,8 +401,8 @@ sequenceDiagram
|
||||
| --- | --- | --- |
|
||||
| `brands` | 品牌方 | id, name, settings_json |
|
||||
| `agencies` | 代理商 | id, brand_id, name |
|
||||
| `creators` | 达人 | id, agency_id, credit_score, appeal_tokens |
|
||||
| `tasks` | 审核任务 | id, brand_id, agency_id, creator_id, status, platform |
|
||||
| `creators` | 达人 | id, agency_id, credit_score |
|
||||
| `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 |
|
||||
| `videos` | 视频文件 | id, task_id, version, file_url, duration |
|
||||
| `reports` | 审核报告 | id, video_id, ai_result_json, human_decision, created_at |
|
||||
|
||||
@ -589,32 +589,69 @@
|
||||
| 功能编号 | 功能名称 | 优先级 | 用户故事 | 使用角色 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| F-24 | 发起申诉 | P1 | - | 达人 |
|
||||
| F-25 | 申诉令牌管理 | P1 | - | 系统 |
|
||||
| F-25 | 申诉次数管理 | P1 | - | 达人/代理商 |
|
||||
| F-25-A | 申请增加申诉次数 | P1 | - | 达人 |
|
||||
| F-25-B | 处理申诉次数请求 | P1 | - | 代理商 |
|
||||
| F-26 | 人工仲裁 | P1 | - | 代理商 |
|
||||
| F-27 | 申诉结果通知 | P1 | - | 达人 |
|
||||
|
||||
#### F-24 发起申诉
|
||||
|
||||
**功能描述：** 达人可对每条报错发起申诉。
|
||||
**功能描述：** 达人可对每条报错发起申诉，消耗该任务的申诉次数。
|
||||
|
||||
**操作要求：**
|
||||
- 提供理由输入框（必填，≥ 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
13
PRD.md
@ -131,7 +131,7 @@
|
||||
- **舆情风控雷达：** 针对"油腻感"、"价值观风险"、"错别字"的专项检测
|
||||
- **交互式审核台：** 支持时间戳打点、风险高亮、版本比对 (Diff) 的 Web 界面
|
||||
- **移动端支持：** 响应式 H5 覆盖达人/代理商/品牌方（可作为小程序 WebView 承载）
|
||||
- **信用与申诉体系：** 包含申诉令牌管理和人工仲裁流程
|
||||
- **信用与申诉体系：** 包含按任务独立的申诉次数管理和人工仲裁流程
|
||||
- **规则库管理与版本控制：** 支持平台规则库更新、品牌私有规则与白名单配置
|
||||
- **权限与多租户隔离：** 支持品牌/代理/达人不同角色的权限与数据隔离
|
||||
- **证据链导出：** 支持导出可追溯的审核证据链报告
|
||||
@ -255,7 +255,9 @@
|
||||
### 6.6 申诉与仲裁
|
||||
|
||||
**P1**
|
||||
- 申诉令牌管理与工单流转
|
||||
- 按任务独立的申诉次数管理（每任务初始1次）
|
||||
- 达人申请增加申诉次数流程
|
||||
- 代理商处理申诉次数请求（同意/拒绝）
|
||||
- 人工仲裁流程与记录
|
||||
- 操作记录完整可追溯
|
||||
|
||||
@ -351,7 +353,10 @@
|
||||
15. 当日 00:00 后，已通过任务自动归入历史记录
|
||||
|
||||
**申诉流程：**
|
||||
- 对任意审核结论可触发申诉（消耗申诉令牌）
|
||||
- 对任意审核结论可触发申诉（消耗该任务的申诉次数）
|
||||
- 每个任务初始申诉次数为 **1次**，不同任务独立计算
|
||||
- 申诉次数不足时，可向代理商申请增加（无需理由）
|
||||
- 代理商可在消息中心或达人管理页面处理申请（同意/拒绝/忽略）
|
||||
|
||||
---
|
||||
|
||||
@ -374,7 +379,7 @@
|
||||
- **规则集**：平台规则 + 品牌私有规则 + 白名单 + 规则版本记录
|
||||
- **审核记录**：风险项、时间戳、证据片段、风险等级（红/黄/绿）
|
||||
- **人工决策**：确认/驳回/强制通过 + 操作人 + 操作时间
|
||||
- **申诉记录**：申诉原因、仲裁结论、令牌消耗
|
||||
- **申诉记录**：申诉原因、仲裁结论、申诉次数变化（任务维度）
|
||||
|
||||
### 9.2 审计要求 [US-12]
|
||||
|
||||
|
||||
@ -131,7 +131,7 @@
|
||||
3. **分区执法逻辑:** 智能区分“广告段”与“剧情段”，应用不同的审核尺度。
|
||||
4. **舆情风控雷达:** 针对“油腻感”、“价值观风险”、“错别字”的专项检测模型。
|
||||
5. **交互式审核台:** 支持时间戳打点、风险高亮、版本比对 (Diff) 的 Web 界面。
|
||||
6. **信用与申诉体系:** 包含申诉令牌管理和人工仲裁流程。
|
||||
6. **信用与申诉体系:** 包含按任务独立的申诉次数管理（每任务初始1次，可向代理商申请增加）和人工仲裁流程。
|
||||
7. **规则库管理与版本控制:** 支持平台规则库更新、品牌私有规则与白名单配置。
|
||||
8. **权限与多租户隔离:** 支持品牌/代理/达人不同角色的权限与数据隔离。
|
||||
9. **审计日志与报告导出:** 支持导出可追溯的审核证据链。
|
||||
|
||||
@ -640,8 +640,8 @@ font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
|
||||
│ │ │ │
|
||||
│ │ ─────────────────────────────────────────────────── │ │
|
||||
│ │ │ │
|
||||
│ │ 💡 剩余申诉令牌：2 次 │ │
|
||||
│ │ 申诉成功后令牌将自动返还 │ │
|
||||
│ │ 💡 本任务剩余申诉次数：1 次 │ │
|
||||
│ │ 每个任务独立计算，次数不足可向代理商申请增加 │ │
|
||||
│ │ │ │
|
||||
│ │ ┌──────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ 提交申诉 │ │ │
|
||||
|
||||
112
UIDesignSpec.md
112
UIDesignSpec.md
@ -282,34 +282,97 @@
|
||||
|
||||
### 4.2 代理商端 (Agency)
|
||||
|
||||
| 页面名称 | 设备 | 优先级 | 设计稿节点ID |
|
||||
> **侧边栏导航顺序：** 工作台 → 审核台 → Brief配置 → 达人管理 → 数据报表 → 消息中心
|
||||
|
||||
#### 4.2.1 Desktop 端页面
|
||||
|
||||
| 页面名称 | 优先级 | 设计稿节点ID | 备注 |
|
||||
| --- | --- | --- | --- |
|
||||
| 工作台 | Desktop | P0 | RX8V9 |
|
||||
| 审核决策台 | Desktop | P0 | 2u8Bq |
|
||||
| Brief配置中心 | Desktop | P0 | djd2K |
|
||||
| 达人管理 | Desktop | P1 | 5cFMX |
|
||||
| 数据报表 | Desktop | P1 | An8gw |
|
||||
| 版本比对 | Desktop | P2 | NDmYh |
|
||||
| 工作台 | Mobile | P0 | VuH3F |
|
||||
| 快捷审核 | Mobile | P0 | lrHaj |
|
||||
| 任务列表 | Mobile | P1 | c6SPa |
|
||||
| 消息中心 | Mobile | P1 | 9Us9g |
|
||||
| 个人中心 | Mobile | P2 | 8OCZ3 |
|
||||
| 工作台 | P0 | RX8V9 | 待办统计+快捷入口，默认首页 |
|
||||
| 项目详情 | P0 | C7wfV | 项目数据和达人列表 |
|
||||
| 审核台(列表页) | P0 | zjiCT | 脚本/视频待审列表 |
|
||||
| 脚本审核决策台 | P0 | f8HX9 | 简单模式(文件图标+预览按钮) |
|
||||
| 脚本审核(预览模式) | P0 | Wct5R | 展开脚本内容+AI分析 |
|
||||
| 视频审核决策台 | P0 | 2u8Bq | 视频播放+问题标记+决策 |
|
||||
| Brief配置中心(列表页) | P0 | Nicby | 待配置/已配置列表 |
|
||||
| Brief配置详情(待配置) | P0 | jRsW5 | 上传Brief+配置规则 |
|
||||
| Brief配置详情(已配置) | P0 | b06fU | 查看/编辑配置 |
|
||||
| 达人管理 | P1 | 5cFMX | 达人列表+邀请 |
|
||||
| 邀请达人弹窗 | 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)
|
||||
|
||||
| 页面名称 | 设备 | 优先级 | 设计稿节点ID |
|
||||
> **侧边栏导航顺序：** 项目看板 → 创建项目 → 终审台 → 代理商管理 → 规则配置 → AI配置 → 系统设置
|
||||
|
||||
#### 4.3.1 Desktop 端页面
|
||||
|
||||
| 页面名称 | 优先级 | 设计稿节点ID | 备注 |
|
||||
| --- | --- | --- | --- |
|
||||
| 数据看板 | Desktop | P0 | xUM9m |
|
||||
| AI服务配置 | Desktop | P0 | 4ppiJ |
|
||||
| 规则配置 | Desktop | P0 | nhHSF |
|
||||
| 代理商管理 | Desktop | P1 | 2jnnO |
|
||||
| 终审台 | Desktop | P0 | aePi5 |
|
||||
| 系统设置 | Desktop | P2 | 4nVj4 |
|
||||
| 数据看板 | Mobile | P0 | lpVdV |
|
||||
| 审批中心 | Mobile | P1 | OueOe |
|
||||
| 消息中心 | Mobile | P2 | 1w9xC |
|
||||
| 我的 | Mobile | P2 | OJBbT |
|
||||
| 项目看板 | P0 | xUM9m | 项目列表与数据概览，默认首页 |
|
||||
| 项目详情数据看板 | P1 | D1O6f | 单项目数据分析 |
|
||||
| 创建项目 | P0 | fP5rY | 新建项目表单 |
|
||||
| 终审台(列表页) | P0 | afJEU | 脚本/视频待终审列表 |
|
||||
| 脚本终审决策台 | P0 | Sw2hw | 简单模式(文件图标+预览按钮) |
|
||||
| 脚本终审(预览模式) | P0 | cp5CE | 展开脚本内容审核 |
|
||||
| 视频终审决策台 | P0 | aePi5 | 视频播放+问题标记+决策 |
|
||||
| 代理商管理 | P1 | 2jnnO | 代理商列表与邀请 |
|
||||
| 邀请代理商弹窗 | P1 | GyUlM | 邀请代理商模态框 |
|
||||
| 规则配置 | 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
|
||||
**最后更新**: 2026-02-05
|
||||
**最后更新**: 2026-02-06
|
||||
|
||||
---
|
||||
|
||||
@ -417,3 +480,4 @@ module.exports = {
|
||||
| --- | --- | --- | --- |
|
||||
| V1.0 | 2026-02-03 | Claude | 初稿：设计令牌、组件规范、页面清单 |
|
||||
| V1.1 | 2026-02-05 | Claude | **明确两阶段审核页面**：细化达人端页面清单，按脚本阶段/视频阶段分类；新增脚本品牌方不通过(NeF4L)、视频AI不通过(6EX4Z)页面 |
|
||||
| V1.2 | 2026-02-06 | Claude | **完善品牌方端和代理商端页面清单**：更新侧边栏导航顺序；新增规则配置、脚本终审(预览模式)等页面；补充页面跳转关系图 |
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
| 文档类型 | **UI/UX Spec (Interface Definitions)** |
|
||||
| --- | --- |
|
||||
| **项目名称** | 秒思智能审核平台 (AI 营销内容合规审核平台) |
|
||||
| **版本号** | V1.6 |
|
||||
| **发布日期** | 2026-02-05 |
|
||||
| **版本号** | V1.8 |
|
||||
| **发布日期** | 2026-02-06 |
|
||||
| **关联文档** | 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.5 | 2026-02-03 | 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] | ❌ 不可提交 | ❌ 不可提交 |
|
||||
| **查看 AI 报告** | ✅ 仅查看自己的 [US-07] | ✅ 查看所管辖达人的 | ✅ 查看所有 |
|
||||
| **审核决策** | ❌ 无权 | ✅ 初审 (驳回/通过) [US-08] | ✅ 终审（可配置）/ 强制通过 [US-09] |
|
||||
| **申诉功能** | ✅ 发起申诉 (消耗令牌) | ✅ 仲裁申诉 | ❌ 无需申诉 |
|
||||
| **申诉功能** | ✅ 发起申诉 (消耗任务申诉次数) / 申请增加次数 | ✅ 仲裁申诉 / 管理达人申诉次数 | ❌ 无需申诉 |
|
||||
| **证据链导出** | ❌ 无权 | ✅ 导出所管辖任务 | ✅ 导出全部 [US-12] |
|
||||
| **数据看板** | 仅看个人任务进度 | 整体进度 / 达人排名 | 全局合规率 / 舆情风控 |
|
||||
| **系统配置** | ❌ 无权 | ❌ 无权 | ✅ 规则库/阈值/白名单/区域合规/审核流程 [US-10A/US-10B] |
|
||||
@ -82,19 +84,21 @@
|
||||
│ 工作台 │ 审核 │ 任务 │ 消息 │ 我的│
|
||||
└─────────┴─────────┴─────────┴─────────┴─────┘
|
||||
```
|
||||
> 📱 **移动端定位：** 外出场景下的紧急审核处理、进度查看、消息通知，复杂配置操作引导至桌面端完成
|
||||
> 📱 **移动端定位：** 外出场景下的紧急审核处理、进度查看、消息通知，复杂配置操作（如 Brief 配置）引导至桌面端完成
|
||||
|
||||
### 品牌方端 (Desktop Sidebar)
|
||||
```
|
||||
┌──────────────────────────────────────────────┐
|
||||
│ 📊 数据看板 (Analytics) │
|
||||
│ 👥 代理商管理 │
|
||||
│ 🤖 AI 配置 │
|
||||
│ ✅ 终审台 (Final Review) │
|
||||
│ 📁 创建项目 (Create Project) │
|
||||
│ 📊 项目看板 (Dashboard) ← 默认首页 │
|
||||
│ ➕ 创建项目 (Create Project) │
|
||||
│ 🛡️ 终审台 (Final Review) │
|
||||
│ 🏢 代理商管理 (Agency) │
|
||||
│ 📋 规则配置 (Rules) ← 黑白名单 │
|
||||
│ 🤖 AI配置 (AI Settings) │
|
||||
│ ⚙️ 系统设置 (Settings) │
|
||||
└──────────────────────────────────────────────┘
|
||||
```
|
||||
> **导航说明：** 规则配置为独立入口，包含黑名单/白名单管理；终审台仅当终审开启时显示待审任务
|
||||
|
||||
### 品牌方端 (Mobile Tab Bar) 📱
|
||||
```
|
||||
@ -322,12 +326,12 @@
|
||||
* **申诉入口：**
|
||||
* 在每一条报错旁边提供 `[ 申诉 ]` 按钮
|
||||
* **申诉弹窗：**
|
||||
* 显示剩余令牌数量（如：剩余 2 次）
|
||||
* 令牌配额基于达人信用评分（历史表现越好，配额越高）
|
||||
* 显示当前任务剩余申诉次数（如：本任务剩余 1 次）
|
||||
* 每个任务初始申诉次数为 **1次**，不同任务独立计算
|
||||
* 提供理由输入框（必填，≥ 10 字）
|
||||
* 可上传补充证据（截图、链接等）
|
||||
* **申诉流程：** 提交 → 代理商仲裁 → 结果通知
|
||||
* **令牌返还：** 申诉成功后令牌自动返还
|
||||
* **次数不足时：** 显示"申诉次数不足"提示，提供 `[申请增加]` 按钮引导达人向代理商申请
|
||||
|
||||
### 2.4 消息通知中心 (Notification Center)
|
||||
|
||||
@ -359,6 +363,8 @@
|
||||
* 操作按钮：`[同意]` `[拒绝]`
|
||||
* 同意后自动加入该代理商的达人列表，可接收任务分配
|
||||
* 💬 **申诉结果：** "您的申诉已通过，AI 已学习您的反馈"
|
||||
* ✅ **申诉次数增加同意：** "代理商【星辰传媒】已同意增加【XX任务】的申诉次数"
|
||||
* ❌ **申诉次数增加拒绝：** "代理商【星辰传媒】拒绝了【XX任务】的申诉次数增加请求"
|
||||
|
||||
* **通知渠道：**
|
||||
* H5 内消息中心（必选）
|
||||
@ -377,6 +383,28 @@
|
||||
* 平均修改轮次：脚本平均修改次数、视频平均修改次数
|
||||
* **证书导出：** 支持导出"合规达人"认证徽章（达到一定通过率后解锁）
|
||||
|
||||
### 2.6 申诉次数管理页 (Appeal Quota)
|
||||
|
||||
**入口：** 达人端 → 个人中心 → 申诉次数
|
||||
|
||||
**功能描述：** 达人查看所有任务的申诉次数，并可向代理商申请增加。
|
||||
|
||||
* **任务申诉次数列表：**
|
||||
* 显示所有进行中任务的申诉次数
|
||||
* 每条记录包含：任务名称、代理商名称、剩余次数、已使用次数
|
||||
* 支持按代理商/任务状态筛选
|
||||
|
||||
* **申请增加次数：**
|
||||
* 点击某任务的 `[申请增加]` 按钮
|
||||
* 无需填写理由，直接发送申请给该任务的代理商
|
||||
* 申请状态：待处理 / 已同意 / 已拒绝
|
||||
|
||||
* **申诉次数规则说明：**
|
||||
* 每个任务初始申诉次数：**1次**
|
||||
* 不同任务的申诉次数独立计算
|
||||
* 代理商可增加的次数无上限
|
||||
* 申诉次数用完时，无法提交新的申诉
|
||||
|
||||
---
|
||||
|
||||
## 3. 界面详解：代理商端 (The Agency Console)
|
||||
@ -400,48 +428,50 @@
|
||||
#### 侧边栏导航
|
||||
```
|
||||
秒思 (Logo)
|
||||
├── 工作台 ← 默认首页
|
||||
├── Brief配置 → Brief配置中心(列表页)
|
||||
├── 审核台 → 审核台(列表页)
|
||||
├── 达人管理 → 达人管理(列表页)
|
||||
├── 数据面板 → 统计报表页
|
||||
└── 设置 → 设置页
|
||||
├── 工作台 ← 默认首页 (RX8V9)
|
||||
├── 审核台 → 审核台(列表页) (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信息 [下载] [预览]
|
||||
├── 已分配达人列表（显示各达人当前状态）
|
||||
└── [+ 分配达人] ──► 弹窗选择达人
|
||||
@ -449,9 +479,9 @@ Brief配置中心(列表页)
|
||||
|
||||
**达人管理：**
|
||||
```
|
||||
达人管理(列表页)
|
||||
达人管理 (5cFMX)
|
||||
├── 达人列表（显示达人信息、粉丝数、平台、状态）
|
||||
└── [+ 添加达人] ──► 弹窗填写达人信息
|
||||
└── [+ 邀请达人] ──► 邀请达人弹窗 (ADN10)
|
||||
```
|
||||
|
||||
### 3.1 工作台 (Dashboard)
|
||||
@ -616,6 +646,19 @@ Brief配置中心(列表页)
|
||||
* 批量发送催促通知
|
||||
* 批量导出达人数据
|
||||
|
||||
* **申诉次数管理：**
|
||||
* 在达人列表中点击某达人，可展开查看该达人的所有任务
|
||||
* 每个任务显示：任务名称、剩余申诉次数、已使用次数
|
||||
* 点击 `[+1]` 按钮可直接为该任务增加1次申诉次数
|
||||
* 支持批量增加申诉次数
|
||||
* **增加次数无上限**
|
||||
|
||||
* **申诉次数请求处理：**
|
||||
* 当达人申请增加申诉次数时，代理商在消息中心收到通知
|
||||
* 通知内容："达人【XXX】申请增加【XXX任务】的申诉次数"
|
||||
* 点击通知可直接处理：`[同意]` / `[拒绝]`
|
||||
* 也可在达人管理页面主动为任意任务增加申诉次数
|
||||
|
||||
### 3.6 数据报表 (Analytics Reports)
|
||||
|
||||
* **项目维度：**
|
||||
@ -764,12 +807,66 @@ Brief配置中心(列表页)
|
||||
**设计目标：** 监管、配置、数据沉淀、风险预警。
|
||||
**核心设备：** 桌面端 (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 成功指标：人工投入时长、初审通过率、召回率/误报率、舆情一致性
|
||||
|
||||
**项目卡片列表：**
|
||||
* 展示所有营销项目卡片
|
||||
* 每个卡片显示：项目名称、状态、脚本数/视频数、截止日期
|
||||
* 点击卡片进入项目详情数据看板
|
||||
|
||||
**顶部指标卡片：**
|
||||
```
|
||||
┌─────────────┬─────────────┬─────────────┬─────────────┬─────────────┐
|
||||
@ -792,30 +889,25 @@ Brief配置中心(列表页)
|
||||
* 🟠 **关注：** "达人B连续3次提交未通过，建议沟通"
|
||||
* 🟡 **舆情：** "本周舆情风险拦截数异常上升，建议检查阈值设置"
|
||||
|
||||
### 4.2 全局规则配置 (Rule Engine) [US-10A/US-10B]
|
||||
### 4.2 规则配置 (Rule Configuration) [US-10A/US-10B]
|
||||
|
||||
* **黑白名单管理：**
|
||||
* **禁用词库：** 支持分类管理（广告法 / 平台规则 / 品牌私有）
|
||||
* **竞品列表：** 上传竞品 Logo 图库，支持相似度阈值设置
|
||||
* **白名单：** 允许特定达人/场景豁免某些规则
|
||||
* **特例记录：** 查看从审核台记录的豁免条款，支持确认/撤销
|
||||
**界面映射：** `pencil-new.pen` → "品牌方端 - 规则配置" (nhHSF)
|
||||
|
||||
* **区域合规配置：**
|
||||
* 支持按投放地区切换法规版本（中国大陆 / 港澳台 / 海外）
|
||||
* 不同地区规则库独立管理
|
||||
* 切换时自动校验现有 Brief 与新规则的兼容性
|
||||
**入口位置：** 品牌方端侧边栏 → 规则配置
|
||||
|
||||
* **舆情阈值设置：**
|
||||
* 调整 AI 对"油腻"、"性感"、"争议话题"的敏感度
|
||||
* 支持 High / Medium / Low 三档
|
||||
* 支持按平台差异化配置（抖音 vs 小红书）
|
||||
* ⚠️ **提示：** 舆情风险仅作提示，不作为强制拦截依据
|
||||
规则配置页面提供黑名单和白名单的管理功能。
|
||||
|
||||
* **规则版本管理：**
|
||||
* 规则变更历史可追溯（含变更人、变更时间、变更内容）
|
||||
* 支持回滚到历史版本
|
||||
* 变更需审批生效（防止误操作）
|
||||
* **平台规则同步：** 抖音/小红书规则变更时，系统在 1 工作日内更新并通知
|
||||
* **黑名单管理：**
|
||||
* **违禁词列表：** 添加/编辑/删除违禁词
|
||||
* 支持批量导入导出
|
||||
* 显示违禁词条数统计
|
||||
|
||||
* **白名单管理：**
|
||||
* **豁免词列表：** 添加/编辑/删除豁免词
|
||||
* 支持批量导入导出
|
||||
* 显示豁免词条数统计
|
||||
|
||||
> **说明：** 其他高级规则配置（如区域合规、舆情阈值）在系统设置中进行配置
|
||||
|
||||
### 4.3 创建项目 (Create Project) ⭐ 新增
|
||||
|
||||
|
||||
316
frontend/app/agency/briefs/[id]/page.tsx
Normal file
316
frontend/app/agency/briefs/[id]/page.tsx
Normal 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
215
frontend/app/agency/briefs/page.tsx
Normal 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
441
frontend/app/agency/creators/page.tsx
Normal 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
315
frontend/app/agency/messages/page.tsx
Normal 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
298
frontend/app/agency/reports/page.tsx
Normal 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
257
frontend/app/agency/review/page.tsx
Normal 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
358
frontend/app/agency/review/script/[id]/page.tsx
Normal 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
421
frontend/app/agency/review/video/[id]/page.tsx
Normal 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
298
frontend/app/brand/agencies/page.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
@ -1,344 +1,221 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
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 { Input } from '@/components/ui/Input'
|
||||
import { SuccessTag, PendingTag, WarningTag } from '@/components/ui/Tag'
|
||||
import {
|
||||
TrendingUp,
|
||||
TrendingDown,
|
||||
BarChart3,
|
||||
Target,
|
||||
AlertTriangle,
|
||||
Clock,
|
||||
Search,
|
||||
Plus,
|
||||
Filter,
|
||||
FileText,
|
||||
Video,
|
||||
ChevronRight,
|
||||
Shield,
|
||||
Users,
|
||||
FileVideo
|
||||
Calendar,
|
||||
Users
|
||||
} from 'lucide-react'
|
||||
|
||||
// 模拟核心指标
|
||||
const metrics = {
|
||||
totalReviews: 1234,
|
||||
totalTrend: '+12%',
|
||||
passRate: 78.5,
|
||||
passRateTrend: '+5.2%',
|
||||
hardRecall: 96.2,
|
||||
hardRecallTarget: 95,
|
||||
sentimentBlocks: 23,
|
||||
sentimentTrend: '-18%',
|
||||
avgCycle: 4.2,
|
||||
avgCycleTarget: 5,
|
||||
// 模拟项目数据
|
||||
const mockProjects = [
|
||||
{
|
||||
id: 'proj-001',
|
||||
name: 'XX品牌618推广',
|
||||
status: 'active',
|
||||
deadline: '2026-06-18',
|
||||
scriptCount: { total: 20, passed: 15, pending: 3, rejected: 2 },
|
||||
videoCount: { total: 20, passed: 12, pending: 5, rejected: 3 },
|
||||
agencyCount: 3,
|
||||
creatorCount: 15,
|
||||
},
|
||||
{
|
||||
id: 'proj-002',
|
||||
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>
|
||||
}
|
||||
|
||||
// 模拟趋势数据
|
||||
const weeklyData = [
|
||||
{ day: '周一', submitted: 45, passed: 40, failed: 5 },
|
||||
{ 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 },
|
||||
]
|
||||
function ProjectCard({ project }: { project: typeof mockProjects[0] }) {
|
||||
const scriptProgress = Math.round((project.scriptCount.passed / project.scriptCount.total) * 100)
|
||||
const videoProgress = Math.round((project.videoCount.passed / project.videoCount.total) * 100)
|
||||
|
||||
// 模拟违规类型分布
|
||||
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 (
|
||||
<Card>
|
||||
<CardContent className="py-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<div className="text-sm text-text-secondary mb-1">{title}</div>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className={`text-3xl font-bold ${color}`}>{value}</span>
|
||||
{unit && <span className="text-lg text-text-secondary">{unit}</span>}
|
||||
<Link href={`/brand/projects/${project.id}`}>
|
||||
<Card className="hover:border-accent-indigo/50 transition-colors cursor-pointer h-full">
|
||||
<CardContent className="p-6 space-y-4">
|
||||
{/* 项目头部 */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-text-primary">{project.name}</h3>
|
||||
<div className="flex items-center gap-2 mt-1 text-sm text-text-secondary">
|
||||
<Calendar size={14} />
|
||||
<span>截止 {project.deadline}</span>
|
||||
</div>
|
||||
</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>
|
||||
)}
|
||||
<StatusTag status={project.status} />
|
||||
</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 className="flex items-center justify-between text-sm mb-2">
|
||||
<span className="flex items-center gap-2 text-text-secondary">
|
||||
<FileText size={14} />
|
||||
脚本审核
|
||||
</span>
|
||||
<span className="text-text-primary font-medium">
|
||||
{project.scriptCount.passed}/{project.scriptCount.total}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 bg-bg-elevated rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-accent-green transition-all"
|
||||
style={{ width: `${scriptProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-4 mt-1 text-xs text-text-tertiary">
|
||||
<span>通过 {project.scriptCount.passed}</span>
|
||||
<span>待审 {project.scriptCount.pending}</span>
|
||||
<span>驳回 {project.scriptCount.rejected}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 视频进度 */}
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
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 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
|
||||
})
|
||||
|
||||
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>
|
||||
<h1 className="text-2xl font-bold text-text-primary">项目看板</h1>
|
||||
<p className="text-sm text-text-secondary mt-1">管理所有营销项目的审核进度</p>
|
||||
</div>
|
||||
<Link href="/brand/projects/create">
|
||||
<Button>
|
||||
<Plus size={16} />
|
||||
创建项目
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* 核心指标卡片 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-5 gap-4">
|
||||
<MetricCard
|
||||
title="本月审核总量"
|
||||
value={metrics.totalReviews}
|
||||
trend={metrics.totalTrend}
|
||||
icon={FileVideo}
|
||||
color="text-text-primary"
|
||||
/>
|
||||
<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 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 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>
|
||||
{/* 项目卡片网格 */}
|
||||
<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>
|
||||
|
||||
{/* 风险预警 */}
|
||||
<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} />
|
||||
{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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
270
frontend/app/brand/projects/[id]/page.tsx
Normal file
270
frontend/app/brand/projects/[id]/page.tsx
Normal 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
201
frontend/app/brand/projects/create/page.tsx
Normal 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
273
frontend/app/brand/review/page.tsx
Normal 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
363
frontend/app/brand/review/script/[id]/page.tsx
Normal 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
413
frontend/app/brand/review/video/[id]/page.tsx
Normal 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
242
frontend/app/brand/settings/page.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
8586
pencil-new.pen
8586
pencil-new.pen
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user