4753626e5a
代理商端前端： - 新增达人管理页面（含任务申诉次数管理） - 新增消息中心（含申诉次数申请审批） - 新增 Brief 管理（列表、详情） - 新增审核中心（脚本审核、视频审核） - 新增数据报表页面 品牌方端前端： - 优化首页仪表盘布局 - 新增项目管理（列表、详情、创建） - 新增代理商管理页面 - 新增审核中心（脚本终审、视频终审） - 新增系统设置页面 文档更新： - 申诉次数改为按任务分配（每任务初始1次） - 更新 PRD、FeatureSummary、User_Role_Interfaces 等文档 - 更新 UI 设计规范和开发计划 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
484 lines
16 KiB
Markdown
484 lines
16 KiB
Markdown
# UIDesignSpec.md - UI设计规范
|
||
|
||
| 文档类型 | **UI Design Specification** |
|
||
| --- | --- |
|
||
| **项目名称** | 秒思智能审核平台 (AI 营销内容合规审核平台) |
|
||
| **版本号** | V1.0 |
|
||
| **发布日期** | 2026-02-05 |
|
||
| **设计稿文件** | `pencil-new.pen` |
|
||
| **设计风格** | Apple-style 暗色主题，商业级/高端质感 |
|
||
|
||
---
|
||
|
||
## 1. 设计令牌 (Design Tokens)
|
||
|
||
### 1.1 颜色系统
|
||
|
||
```css
|
||
/* 背景色 */
|
||
--bg-page: #0B0B0E; /* 页面背景 */
|
||
--bg-card: #16161A; /* 卡片背景 */
|
||
--bg-elevated: #1A1A1E; /* 悬浮/高亮背景 */
|
||
|
||
/* 文字色 */
|
||
--text-primary: #FAFAF9; /* 主要文字 */
|
||
--text-secondary: #A1A1AA; /* 次要文字 */
|
||
--text-tertiary: #71717A; /* 辅助文字 */
|
||
|
||
/* 强调色 */
|
||
--accent-indigo: #6366F1; /* 主强调色（品牌色） */
|
||
--accent-green: #32D583; /* 成功/通过 */
|
||
--accent-coral: #E85A4F; /* 警告/错误 */
|
||
--accent-amber: #F59E0B; /* 中等风险/警告 */
|
||
|
||
/* 边框色 */
|
||
--border-subtle: #27272A; /* 细微边框 */
|
||
```
|
||
|
||
### 1.2 字体系统
|
||
|
||
| 用途 | 字体 | 字重 | 字号 |
|
||
| --- | --- | --- | --- |
|
||
| 页面标题 | DM Sans | 700 (Bold) | 24px |
|
||
| 卡片标题 | DM Sans | 700 (Bold) | 22px |
|
||
| 区块标题 | DM Sans | 600 (SemiBold) | 16px |
|
||
| 正文内容 | DM Sans | 400 (Regular) | 15px |
|
||
| 辅助文字 | DM Sans | 400 (Regular) | 13px |
|
||
| 小标签 | DM Sans | 400/600 | 12px |
|
||
| 底部导航 | DM Sans | 400 (Regular) | 11px |
|
||
|
||
### 1.3 间距系统
|
||
|
||
| 用途 | 数值 |
|
||
| --- | --- |
|
||
| 页面内边距 (移动端) | 24px 左右，16px 上下 |
|
||
| 页面内边距 (桌面端) | 32px |
|
||
| 卡片内边距 | 14-16px 上下，16-20px 左右 |
|
||
| 卡片圆角 | 12px |
|
||
| 按钮圆角 | 8px |
|
||
| 标签圆角 | 4px |
|
||
| 元素间距 (紧凑) | 4-8px |
|
||
| 元素间距 (标准) | 12-16px |
|
||
| 元素间距 (宽松) | 20-24px |
|
||
|
||
---
|
||
|
||
## 2. 图标规范 (Icon System)
|
||
|
||
### 2.1 图标库
|
||
|
||
使用 **Lucide Icons** 图标库，确保全局一致性。
|
||
|
||
### 2.2 标准图标映射
|
||
|
||
| 功能 | 图标名称 | 使用场景 |
|
||
| --- | --- | --- |
|
||
| 工作台/首页 | `house` | 底部导航、侧边栏 |
|
||
| 任务 | `clipboard-list` | 底部导航、任务列表 |
|
||
| 审核/审批 | `circle-check` | 底部导航、审批中心 |
|
||
| 审核台 | `clipboard-check` | 侧边栏导航 |
|
||
| 消息/通知 | `bell` | 底部导航、消息中心 |
|
||
| 个人中心 | `user` | 底部导航、我的 |
|
||
| 达人管理 | `users` | 侧边栏导航 |
|
||
| 数据看板/报表 | `chart-column` | 底部导航、侧边栏 |
|
||
| 代理商管理 | `building-2` | 侧边栏导航 |
|
||
| 终审台 | `shield-check` | 侧边栏导航 |
|
||
| 系统设置 | `settings` | 侧边栏导航 |
|
||
| Brief管理 | `file-text` | 侧边栏导航 |
|
||
| 版本比对 | `git-compare` | 侧边栏导航 |
|
||
| 筛选 | `sliders-horizontal` | 筛选按钮 |
|
||
| 搜索 | `search` | 搜索框 |
|
||
| 添加 | `plus` | 添加按钮 |
|
||
| 编辑 | `pencil` | 编辑操作 |
|
||
| 查看 | `eye` | 查看详情 |
|
||
| 下载/导出 | `download` | 导出按钮 |
|
||
| 箭头右 | `chevron-right` | 列表项箭头 |
|
||
| 箭头下 | `chevron-down` | 下拉选择 |
|
||
| 信号 | `signal` | 状态栏 |
|
||
| WiFi | `wifi` | 状态栏 |
|
||
| 安全 | `shield-check` | 隐私与安全 |
|
||
| 信息 | `info` | 关于我们 |
|
||
| 消息气泡 | `message-circle` | 帮助与反馈 |
|
||
|
||
### 2.3 图标尺寸
|
||
|
||
| 场景 | 尺寸 |
|
||
| --- | --- |
|
||
| 底部导航 | 24x24px |
|
||
| 侧边栏导航 | 20x20px |
|
||
| 按钮内图标 | 16x16px |
|
||
| 状态栏图标 | 16x16px |
|
||
|
||
---
|
||
|
||
## 3. 组件规范 (Component Specs)
|
||
|
||
### 3.1 移动端布局 (402x874)
|
||
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ 状态栏 (44px) │
|
||
│ 9:41 📶 📡 🔋 │
|
||
├─────────────────────────────┤
|
||
│ │
|
||
│ 内容区 │
|
||
│ padding: 16px 24px │
|
||
│ gap: 16-20px │
|
||
│ flex: 1 │
|
||
│ │
|
||
├─────────────────────────────┤
|
||
│ 底部导航 (83px) │
|
||
│ 渐变背景 + space-around │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
### 3.2 桌面端布局 (1440x900)
|
||
|
||
```
|
||
┌────────────┬────────────────────────────────┐
|
||
│ │ │
|
||
│ 侧边栏 │ 主内容区 │
|
||
│ 260px │ padding: 32px │
|
||
│ bg-card │ gap: 24px │
|
||
│ │ │
|
||
│ Logo │ 标题栏 │
|
||
│ 导航菜单 │ 内容区域 │
|
||
│ │ │
|
||
└────────────┴────────────────────────────────┘
|
||
```
|
||
|
||
### 3.3 卡片组件
|
||
|
||
```css
|
||
.card {
|
||
background: var(--bg-card); /* #16161A */
|
||
border-radius: 12px;
|
||
padding: 14px 16px; /* 移动端 */
|
||
padding: 16px 20px; /* 桌面端 */
|
||
}
|
||
```
|
||
|
||
### 3.4 按钮组件
|
||
|
||
**主要按钮 (Primary)**
|
||
```css
|
||
.btn-primary {
|
||
background: var(--accent-indigo); /* #6366F1 */
|
||
color: #FFFFFF;
|
||
font-weight: 600;
|
||
padding: 10px 16px;
|
||
border-radius: 8px;
|
||
}
|
||
```
|
||
|
||
**次要按钮 (Secondary)**
|
||
```css
|
||
.btn-secondary {
|
||
background: var(--bg-elevated); /* #1A1A1E */
|
||
color: var(--text-secondary); /* #A1A1AA */
|
||
padding: 8px 16px;
|
||
border-radius: 8px;
|
||
}
|
||
```
|
||
|
||
### 3.5 状态标签
|
||
|
||
| 状态 | 背景色 | 文字色 |
|
||
| --- | --- | --- |
|
||
| 已通过/活跃 | #32D58320 | #32D583 |
|
||
| 待处理/进行中 | #6366F120 | #6366F1 |
|
||
| 风险/错误 | #E85A4F20 | #E85A4F |
|
||
| 警告/中风险 | #F59E0B20 | #F59E0B |
|
||
|
||
### 3.6 底部导航
|
||
|
||
```css
|
||
.bottom-nav {
|
||
height: 83px;
|
||
padding: 12px 21px;
|
||
background: linear-gradient(180deg, transparent 0%, #0B0B0E 50%);
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.nav-item.active {
|
||
color: var(--accent-indigo); /* #6366F1 */
|
||
}
|
||
|
||
.nav-item.inactive {
|
||
color: var(--text-secondary); /* #A1A1AA */
|
||
}
|
||
```
|
||
|
||
### 3.7 侧边栏导航项
|
||
|
||
```css
|
||
.sidebar-nav-item {
|
||
padding: 10px 12px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.sidebar-nav-item.active {
|
||
background: var(--bg-elevated); /* #1A1A1E */
|
||
color: var(--accent-indigo); /* #6366F1 */
|
||
font-weight: 600;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 4. 页面清单 (Screen Inventory)
|
||
|
||
### 4.1 达人端 (Creator)
|
||
|
||
> **两阶段审核说明：** 每个任务包含「脚本阶段」和「视频阶段」两轮审核
|
||
|
||
#### 4.1.1 Mobile 端页面
|
||
|
||
| 页面名称 | 阶段 | 优先级 | 设计稿节点ID | 备注 |
|
||
| --- | --- | --- | --- | --- |
|
||
| 任务列表 | 通用 | P0 | PjBJD | 含历史任务入口 |
|
||
| 脚本上传区 | 脚本阶段 | P0 | ZelCS | 上传脚本文档 |
|
||
| 脚本AI审核中 | 脚本阶段 | P0 | lzdm4 | 透明思考UI |
|
||
| 脚本AI审核通过 | 脚本阶段 | P0 | Vn3VU | 结果页，含「下一步：上传视频」 |
|
||
| 脚本AI审核不通过 | 脚本阶段 | P0 | cjcZZ | 结果页，含「重新提交脚本」 |
|
||
| 脚本代理商审核通过 | 脚本阶段 | P0 | IyLsO | 结果页 |
|
||
| 脚本代理商审核不通过 | 脚本阶段 | P0 | zU3Op | 结果页，含「重新提交脚本」 |
|
||
| 脚本品牌方审核通过 | 脚本阶段 | P0 | f6T3z | 结果页 |
|
||
| 脚本品牌方审核不通过 | 脚本阶段 | P0 | NeF4L | 结果页，含「重新提交脚本」 |
|
||
| 视频上传区 | 视频阶段 | P0 | (待补充) | 上传视频文件 |
|
||
| 视频AI审核中 | 视频阶段 | P0 | (待补充) | 透明思考UI |
|
||
| 视频AI审核通过 | 视频阶段 | P0 | (待补充) | 结果页 |
|
||
| 视频AI审核不通过 | 视频阶段 | P0 | 6EX4Z | 结果页，含「重新上传视频」 |
|
||
| 视频代理商审核通过 | 视频阶段 | P0 | (待补充) | 结果页 |
|
||
| 视频代理商审核不通过 | 视频阶段 | P0 | (待补充) | 结果页，含「重新上传视频」 |
|
||
| 视频品牌方审核通过 | 视频阶段 | P0 | (待补充) | 结果页，含「审核通过，可发布」 |
|
||
| 视频品牌方审核不通过 | 视频阶段 | P0 | (待补充) | 结果页，含「重新上传视频」 |
|
||
| 消息中心 | 通用 | P1 | pF15t | 两阶段审核通知 |
|
||
| 历史记录 | 通用 | P2 | ZKEFl | 当日00:00后自动归档 |
|
||
| 个人中心 | 通用 | P2 | zCdM1 | - |
|
||
|
||
#### 4.1.2 Desktop 端页面
|
||
|
||
| 页面名称 | 阶段 | 优先级 | 设计稿节点ID | 备注 |
|
||
| --- | --- | --- | --- | --- |
|
||
| 任务列表 | 通用 | P0 | HD3eK | 含历史任务入口 |
|
||
| 脚本上传区 | 脚本阶段 | P0 | N79bL | 上传脚本文档 |
|
||
| 脚本AI审核中 | 脚本阶段 | P0 | bxAKT | 透明思考UI |
|
||
| 脚本审核结果 | 脚本阶段 | P0 | 3niUa | 通用结果页 |
|
||
| 消息中心 | 通用 | P1 | 8XKLP | 两阶段审核通知 |
|
||
|
||
### 4.2 代理商端 (Agency)
|
||
|
||
> **侧边栏导航顺序：** 工作台 → 审核台 → Brief配置 → 达人管理 → 数据报表 → 消息中心
|
||
|
||
#### 4.2.1 Desktop 端页面
|
||
|
||
| 页面名称 | 优先级 | 设计稿节点ID | 备注 |
|
||
| --- | --- | --- | --- |
|
||
| 工作台 | 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)
|
||
|
||
> **侧边栏导航顺序：** 项目看板 → 创建项目 → 终审台 → 代理商管理 → 规则配置 → AI配置 → 系统设置
|
||
|
||
#### 4.3.1 Desktop 端页面
|
||
|
||
| 页面名称 | 优先级 | 设计稿节点ID | 备注 |
|
||
| --- | --- | --- | --- |
|
||
| 项目看板 | 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服务配置页
|
||
└── 系统设置 ─────────► 系统设置页
|
||
```
|
||
|
||
---
|
||
|
||
## 5. 开发实施指南
|
||
|
||
### 5.1 技术栈建议
|
||
|
||
- **前端框架**: React / Vue 3
|
||
- **样式方案**: Tailwind CSS (推荐) 或 CSS Variables
|
||
- **图标库**: `lucide-react` / `lucide-vue-next`
|
||
- **字体**: Google Fonts - DM Sans
|
||
|
||
### 5.2 Tailwind CSS 配置
|
||
|
||
```javascript
|
||
// tailwind.config.js
|
||
module.exports = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
'bg-page': '#0B0B0E',
|
||
'bg-card': '#16161A',
|
||
'bg-elevated': '#1A1A1E',
|
||
'text-primary': '#FAFAF9',
|
||
'text-secondary': '#A1A1AA',
|
||
'text-tertiary': '#71717A',
|
||
'accent-indigo': '#6366F1',
|
||
'accent-green': '#32D583',
|
||
'accent-coral': '#E85A4F',
|
||
'accent-amber': '#F59E0B',
|
||
'border-subtle': '#27272A',
|
||
},
|
||
fontFamily: {
|
||
sans: ['DM Sans', 'sans-serif'],
|
||
},
|
||
borderRadius: {
|
||
'card': '12px',
|
||
'btn': '8px',
|
||
'tag': '4px',
|
||
},
|
||
},
|
||
},
|
||
}
|
||
```
|
||
|
||
### 5.3 CSS Variables 配置
|
||
|
||
```css
|
||
:root {
|
||
/* 背景 */
|
||
--bg-page: #0B0B0E;
|
||
--bg-card: #16161A;
|
||
--bg-elevated: #1A1A1E;
|
||
|
||
/* 文字 */
|
||
--text-primary: #FAFAF9;
|
||
--text-secondary: #A1A1AA;
|
||
--text-tertiary: #71717A;
|
||
|
||
/* 强调色 */
|
||
--accent-indigo: #6366F1;
|
||
--accent-green: #32D583;
|
||
--accent-coral: #E85A4F;
|
||
--accent-amber: #F59E0B;
|
||
|
||
/* 边框 */
|
||
--border-subtle: #27272A;
|
||
|
||
/* 字体 */
|
||
--font-family: 'DM Sans', sans-serif;
|
||
}
|
||
```
|
||
|
||
### 5.4 开发检查清单
|
||
|
||
开发每个页面时，请对照以下检查项：
|
||
|
||
- [ ] 背景色使用 `--bg-page` (#0B0B0E)
|
||
- [ ] 卡片使用 `--bg-card` (#16161A) + 12px圆角
|
||
- [ ] 字体统一使用 DM Sans
|
||
- [ ] 图标使用 Lucide，按照图标映射表选择正确图标
|
||
- [ ] 底部导航高度 83px，渐变背景
|
||
- [ ] 侧边栏宽度 260px
|
||
- [ ] 状态标签使用对应颜色（通过=绿色，处理中=紫色，错误=红色）
|
||
- [ ] 按钮样式符合规范（主要=紫色，次要=深灰色）
|
||
|
||
---
|
||
|
||
## 6. 设计稿访问
|
||
|
||
设计稿文件：`pencil-new.pen`
|
||
|
||
使用 Pencil 编辑器打开查看完整设计，可通过节点ID定位到具体页面。
|
||
|
||
---
|
||
|
||
**文档维护者**: Claude
|
||
**最后更新**: 2026-02-06
|
||
|
||
---
|
||
|
||
## 版本历史
|
||
|
||
| 版本 | 日期 | 作者 | 变更说明 |
|
||
| --- | --- | --- | --- |
|
||
| V1.0 | 2026-02-03 | Claude | 初稿：设计令牌、组件规范、页面清单 |
|
||
| V1.1 | 2026-02-05 | Claude | **明确两阶段审核页面**：细化达人端页面清单，按脚本阶段/视频阶段分类；新增脚本品牌方不通过(NeF4L)、视频AI不通过(6EX4Z)页面 |
|
||
| V1.2 | 2026-02-06 | Claude | **完善品牌方端和代理商端页面清单**：更新侧边栏导航顺序；新增规则配置、脚本终审(预览模式)等页面；补充页面跳转关系图 |
|