Your Name 4753626e5a feat: 完成代理商/品牌方前端及文档更新

代理商端前端：
- 新增达人管理页面（含任务申诉次数管理）
- 新增消息中心（含申诉次数申请审批）
- 新增 Brief 管理（列表、详情）
- 新增审核中心（脚本审核、视频审核）
- 新增数据报表页面

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

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

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

2026-02-06 15:39:23 +08:00

16 KiB

Raw Blame History

UIDesignSpec.md - UI设计规范

文档类型	UI Design Specification
项目名称	秒思智能审核平台 (AI 营销内容合规审核平台)
版本号	V1.0
发布日期	2026-02-05
设计稿文件	`pencil-new.pen`
设计风格	Apple-style 暗色主题，商业级/高端质感

1. 设计令牌 (Design Tokens)

1.1 颜色系统

/* 背景色 */
--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 卡片组件

.card {
  background: var(--bg-card);     /* #16161A */
  border-radius: 12px;
  padding: 14px 16px;             /* 移动端 */
  padding: 16px 20px;             /* 桌面端 */
}

3.4 按钮组件

主要按钮 (Primary)

.btn-primary {
  background: var(--accent-indigo);  /* #6366F1 */
  color: #FFFFFF;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px;
}

次要按钮 (Secondary)

.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 底部导航

.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 侧边栏导航项

.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 配置

// 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 配置

: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	完善品牌方端和代理商端页面清单：更新侧边栏导航顺序；新增规则配置、脚本终审(预览模式)等页面；补充页面跳转关系图

16 KiB Raw Blame History Unescape Escape