video-compliance-ai/User_Role_Interfaces.md
2026-02-02 22:34:00 +08:00

52 KiB
Raw Blame History

User_Role_Interfaces.md - 用户角色与界面规范

文档类型 UI/UX Spec (Interface Definitions)
项目名称 SmartAudit (AI 营销内容合规审核平台)
版本号 V1.0
发布日期 2026-01-30
关联文档 RequirementsDoc.md (RD), PRD.md
侧重 角色权限、核心页面布局、交互逻辑

版本历史 (Version History)

版本 日期 作者 变更说明
V0.1 2026-01-30 Gemini 初稿:角色权限、三端界面设计
V1.0 2026-02-02 Claude 审阅补充:导航结构、数据看板、响应式/无障碍设计、错误处理规范
V1.1 2026-02-02 Claude 与 RD/PRD 对齐:补充用户故事引用、区域合规、特例记录规范、证据链权限
V1.2 2026-02-02 Claude 新增代理商端和品牌方端移动端 UI 设计(工作台、快捷审核、预警、审批)
V1.3 2026-02-02 Claude 新增 AI 服务配置章节4.6),品牌方专属功能

1. 角色权限矩阵 (Role-Permission Matrix)

在进入界面细节前,先明确各角色在系统中的能力边界。

对应 PRD 第8章、RequirementsDoc 第3章

功能模块 👤 达人 (Creator) 👥 代理商 (Agency) 🛡️ 品牌方 (Brand)
终端设备 Mobile (主) / Desktop Desktop (主) / Mobile (辅) Desktop (主) / Mobile (辅)
Brief 管理 查看任务详情 上传/解析/编辑 Brief 全局规则配置
脚本/视频提交 上传 & 修改 [US-03] 不可提交 不可提交
查看 AI 报告 仅查看自己的 [US-07] 查看所管辖达人的 查看所有
审核决策 无权 初审 (驳回/通过) [US-08] 终审 / 强制通过 [US-09]
申诉功能 发起申诉 (消耗令牌) 仲裁申诉 无需申诉
证据链导出 无权 导出所管辖任务 导出全部 [US-12]
数据看板 仅看个人任务进度 整体进度 / 达人排名 全局合规率 / 舆情风控
系统配置 无权 无权 规则库/阈值/白名单/区域合规 [US-10]
AI 服务配置 无权 无权(继承品牌方配置) 配置 AI 提供商/模型/参数
用户管理 无权 管理所属达人 管理代理商与达人

1.1 各端导航结构 (Navigation Structure)

达人端 (Mobile-First)

┌─────────────────────────────────────┐
│  底部导航栏 (Tab Bar)                │
├─────────┬─────────┬─────────┬───────┤
│  🏠     │  📤     │  🔔     │  👤   │
│  任务   │  上传   │  消息   │  我的 │
└─────────┴─────────┴─────────┴───────┘

代理商端 (Desktop Sidebar)

┌──────────────────────────────────────────────┐
│  📊 工作台 (Dashboard)                        │
│  📋 Brief 管理                                │
│  ✅ 审核台 (Review)                           │
│  👥 达人管理                                  │
│  📈 数据报表                                  │
│  ⚙️ 设置                                      │
└──────────────────────────────────────────────┘

代理商端 (Mobile Tab Bar) 📱

┌─────────────────────────────────────────────┐
│  底部导航栏 (Tab Bar)                         │
├─────────┬─────────┬─────────┬─────────┬─────┤
│  🏠     │  ✅     │  📋     │  🔔     │  👤 │
│  工作台 │  审核   │  任务   │  消息   │  我的│
└─────────┴─────────┴─────────┴─────────┴─────┘

📱 移动端定位: 外出场景下的紧急审核处理、进度查看、消息通知,复杂配置操作引导至桌面端完成

品牌方端 (Desktop Sidebar)

┌──────────────────────────────────────────────┐
│  📊 数据看板 (Analytics)                      │
│  🛡️ 规则配置 (Rule Engine)                   │
│  📋 审计日志 (Audit Log)                      │
│  👥 代理商管理                                │
│  🔔 舆情预警                                  │
│  ⚙️ 系统设置                                  │
│    └ 🤖 AI 服务配置                          │
└──────────────────────────────────────────────┘

品牌方端 (Mobile Tab Bar) 📱

┌─────────────────────────────────────────────┐
│  底部导航栏 (Tab Bar)                         │
├─────────┬─────────┬─────────┬─────────┬─────┤
│  📊     │  🔔     │  ✅     │  📋     │  👤 │
│  看板   │  预警   │  审批   │  日志   │  我的│
└─────────┴─────────┴─────────┴─────────┴─────┘

📱 移动端定位: 关键指标查看、舆情预警响应、强制通过审批,规则配置等复杂操作引导至桌面端完成


2. 界面详解:达人端 (The Creator Portal)

设计目标: 极简、透明、减少焦虑。让达人像发朋友圈一样简单地完成合规检查。 核心设备: 手机浏览器 (Mobile Web) / 小程序。

2.1 任务列表页 (Task List)

  • 状态概览: 卡片式布局显示当前任务状态待提交、AI审核中、需修改、已通过
  • 行动号召 (CTA): 针对不同状态显示醒目按钮,如 [上传脚本][查看修改意见]

2.2 智能上传与扫描页 (The Magic Scanner) [US-03, US-07]

这是达人等待 AI 结果的页面必须缓解等待焦虑Wait-time Anxiety

  • 文件支持: 支持粘贴文本、上传文档、上传视频文件(≤ 100MB1080p
  • 透明思考 UI 实时显示 AI 处理进度
    • 屏幕中央显示 AI 正在扫描的动态波纹
    • 进度指示器: 显示当前处理阶段和预估剩余时间
    • 滚动日志 (Rolling Log): 实时显示 AI 动作,例如:

      🔍 正在解析 Brief 核心卖点... 👁️ 正在逐帧检测竞品 Logo... 🧠 正在分析口播情感色彩... 口播检测完成,正在核对卖点覆盖...

  • 离开提示: 深度审核约需 1-3 分钟,可选择离开并通过微信通知结果

2.3 审核结果反馈页 (Audit Report)

当 AI 发现问题时,不能直接把 JSON 扔给达人,要翻译成“人话”。

  • 结果横幅:

  • 🔴 未通过 (Blocked): 存在硬性违规,必须修改。

  • 🟡 建议修改 (Warning): 存在舆情风险或卖点遗漏,建议优化。

  • 🟢 AI 初审通过: 已自动转交人工复核。

  • 修改清单 (Action Items):

  • 时间轴跳转: 点击报错条目,视频自动跳转到对应秒数(例如 00:15

  • 错误详情:

  • 错误类型: 广告法违禁词

  • 原内容: “全网第一”

  • AI建议 建议改为“深受喜爱”或“销量领先”。

  • 申诉入口:

    • 在每一条报错旁边提供 [ 申诉 ] 按钮
    • 申诉弹窗:
      • 显示剩余令牌数量(如:剩余 2 次)
      • 令牌配额基于达人信用评分(历史表现越好,配额越高)
      • 提供理由输入框(必填,≥ 10 字)
      • 可上传补充证据(截图、链接等)
    • 申诉流程: 提交 → 代理商仲裁 → 结果通知
    • 令牌返还: 申诉成功后令牌自动返还

2.4 消息通知中心 (Notification Center)

达人需要及时获知任务状态变化,避免反复主动查询。

  • 通知类型:

    • 🔔 任务分配: "您有一个新任务【XX品牌618推广】请在 3 天内提交脚本"
    • 审核通过: "恭喜!您的视频已通过审核,可安排发布"
    • 需要修改: "您的视频有 2 处需修改,点击查看详情"
    • 💬 申诉结果: "您的申诉已通过AI 已学习您的反馈"
  • 通知渠道:

    • App 内消息中心(必选)
    • 微信服务号推送(可选)
    • 短信提醒(仅紧急/超时)

2.5 历史记录页 (History)

  • 任务归档: 按品牌/时间筛选已完成的任务
  • 数据统计:
    • 累计完成任务数
    • 一次通过率(个人)
    • 平均修改轮次
  • 证书导出: 支持导出"合规达人"认证徽章(达到一定通过率后解锁)

3. 界面详解:代理商端 (The Agency Console)

设计目标: 高效、批量、上帝视角。 核心设备: 桌面端 (Desktop Web) 为主,移动端 (Mobile) 为辅。

3.1 工作台 (Dashboard)

  • 待办事项: 醒目显示 待人工复核 (12)申诉待仲裁 (3)
  • 项目概览: 显示当前 Brief 下的所有达人提交进度条。

3.2 Brief 配置中心 (Brief Setup) [US-01, US-02]

  • 全能解析器: 巨大的拖拽上传区域
    • 支持 PDF/Word/Excel/PPT/图片上传
    • 在线文档链接导入: 支持飞书/Notion 等已授权分享链接
      • ⚠️ 重要约束: 仅支持用户授权的分享链接;不得绕过权限或抓取受限内容
  • 投放平台选择: 选择目标平台(抖音/小红书/B站等自动加载对应平台规则库
  • 区域合规切换: 不同地区投放可切换对应法规与平台规则版本
  • 规则确认区 (Split View):
    • 左侧:原始 PDF/文档预览
    • 右侧AI 提取出的结构化规则表单(可编辑)
      • 必含词: [美白] [淡斑] (支持手动增删)
      • 禁忌词: [药用] [治疗]
      • 语义卖点: [产品核心功效] [使用场景] (支持手动增删AI 基于语义理解而非关键词匹配)
      • 调性标签: [年轻活力] [专业可信] (支持手动选择/自定义)
      • 时序要求: [产品同框 > 5秒] [品牌名提及 ≥ 3次] (支持手动配置)
      • 参考图: (显示 AI 从 Brief 提取的参考图,支持增删)
    • 规则冲突提示: 若 Brief 要求与平台规则冲突,高亮显示并给出建议

💡 软广/种草内容审核说明: 软性植入内容通常没有明确的关键词,系统通过语义理解而非关键词匹配来检测卖点覆盖情况。例如,"产品核心功效"是一个语义概念AI 会理解达人是否表达了产品的功效,而不是简单搜索某个具体词汇。

3.3 核心审核决策台 (The Review Cockpit) 核心功能 [US-05, US-08]

这是系统最复杂的界面,用于人工复核 AI 的结果。

布局结构:

  • 左侧:视频播放器

    • 智能进度条: 进度条上打满 colored dots
      • 🔴 红点:硬伤(点击跳转)
      • 🟠 橙点:油腻/舆情风险
      • 🟢 绿点成功识别到的卖点High-light
    • 画中画参考: 播放器角落可悬浮 Brief 中的参考图,方便对比(如对比手持产品的手势)
  • 右侧AI 检查单 (The Checklist)

    • 分区一:硬性合规 (Hard Rules) — 必须处理
      • [] 违禁词检测
      • [] 竞品 Logo 检测
    • 分区二Brief 完成度 (Brief Compliance)
      • [] 卖点:未提及"24小时持妆" (AI 提示:全程未检测到相关语义)
    • 分区三:舆情雷达 (Sentiment Radar) [US-06]
      • [⚠️] 00:42 油腻预警: 达人表情过于夸张,建议检查
      • ⚠️ 重要说明: 软性风险(油腻/爹味/性别偏见等)仅作提示,不强制拦截,需人工复核确认
  • 底部:决策栏 (Action Bar)

    • [ 驳回 ]:点击后,自动将勾选的问题打包发送给达人
    • [ 强制通过 ] [US-09]:忽略 AI 的黄色警告,强制放行
      • 必须填写放行原因(如"达人玩的新梗,品牌方认可"
      • 记录审批人与操作时间,纳入审计日志
    • [ 记录为特例 ]:将当前判断记录为规则白名单/豁免条款
      • 需品牌方确认后生效
      • 如需用于模型优化,必须确保数据授权与合规评估
    • [ 通过 ]:流程结束

3.4 版本比对视窗 (Diff View) [US-13]

当达人提交 V2 版本时触发。

  • 顶部统计摘要:
    ┌─────────────────────────────────────────────────────┐
    │  📊 版本差异报告                                      │
    │  V1 版本指出 3 个违规点:✅ 已修复 2 个 | ❌ 未修复 1 个 │
    └─────────────────────────────────────────────────────┘
    
  • 双屏模式: 左侧 V1右侧 V2同步播放
  • 差异高亮:
    • 右侧列表仅显示 "V1 报错点" 的修复情况
    • 状态:已修复 ✅未修复 ❌
    • 点击条目可跳转到对应时间戳V1/V2 同步定位
  • 快速决策: 若所有违规点均已修复,提供"快速通过"按钮

3.5 达人管理 (Creator Management)

  • 达人列表:

    • 显示所有关联达人的基本信息、信用评分、历史通过率
    • 支持按平台(抖音/小红书/B站、状态活跃/休眠)筛选
  • 达人画像卡片:

    • 基本信息:昵称、平台账号、粉丝量级
    • 合作数据:累计任务数、一次通过率、平均响应时长
    • 信用评分:基于历史表现的信用分(影响申诉令牌配额)
  • 批量操作:

    • 批量分配任务
    • 批量发送催促通知
    • 批量导出达人数据

3.6 数据报表 (Analytics Reports)

  • 项目维度:

    • 当前项目进度:已提交 / 审核中 / 已通过 / 待修改
    • 平均审核周期(从提交到最终通过)
    • 修改轮次分布图
  • 达人维度:

    • 达人排行榜(按通过率、响应速度)
    • 问题达人预警(连续多次未通过)
  • 问题类型分析:

    • 高频违规词 TOP 10
    • 常见遗漏卖点统计
    • 舆情风险分布
  • 导出功能:

    • 支持导出 Excel/PDF 格式
    • 支持定时邮件订阅周报

3.7 批量操作中心 (Batch Operations) [US-11]

  • 批量上传: 支持 ZIP 压缩包批量上传多个视频
  • 批量审核: 对无问题项批量通过(需二次确认)
  • 批量导出: 一键导出选中任务的审核报告
    • 支持 Excel/PDF 格式
    • 包含完整审核证据链

3.8 移动端界面 (Mobile Portal) 📱

设计目标: 外出场景下的紧急审核处理、进度监控、即时通知响应。 核心设备: 手机浏览器 / 小程序 / App。 定位: 桌面端的轻量补充,复杂操作引导至桌面端完成。

3.8.1 移动端工作台 (Mobile Dashboard)

┌─────────────────────────────────────────────┐
│  📊 代理商工作台                     [头像] │
├─────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐           │
│  │ 🔴 待审核   │  │ ⚠️ 待仲裁   │           │
│  │    12      │  │     3      │           │
│  └─────────────┘  └─────────────┘           │
│  ┌─────────────┐  ┌─────────────┐           │
│  │ ✅ 今日通过 │  │ 📋 进行中   │           │
│  │    28      │  │    45      │           │
│  └─────────────┘  └─────────────┘           │
├─────────────────────────────────────────────┤
│  📌 紧急待办                                │
│  ├─ 🔴 达人A视频 - 竞品露出 (2小时前)       │
│  ├─ 🟠 达人B申诉 - 待仲裁 (30分钟前)        │
│  └─ 🟡 达人C视频 - AI审核完成               │
├─────────────────────────────────────────────┤
│  🏠      ✅       📋       🔔       👤     │
│ 工作台   审核     任务     消息     我的    │
└─────────────────────────────────────────────┘

3.8.2 移动端快捷审核 (Quick Review)

场景: 外出时收到紧急审核通知,需快速处理。

┌─────────────────────────────────────────────┐
│  ← 返回              快捷审核        ⋮ 更多 │
├─────────────────────────────────────────────┤
│  ┌─────────────────────────────────────┐    │
│  │                                     │    │
│  │         📹 视频播放器               │    │
│  │         (支持横屏全屏)              │    │
│  │                                     │    │
│  │   advancement bar with colored dots  │    │
│  │  🔴──🟠────────🟢──────────────────  │    │
│  └─────────────────────────────────────┘    │
├─────────────────────────────────────────────┤
│  🔴 硬性问题 (1)                      展开 ▼│
│  ├─ 00:15 竞品Logo露出 [点击跳转]           │
├─────────────────────────────────────────────┤
│  🟠 舆情提示 (1)                      展开 ▼│
│  ├─ 00:42 油腻风险 (仅提示)                 │
├─────────────────────────────────────────────┤
│  🟢 卖点覆盖 (3/4)                    展开 ▼│
├─────────────────────────────────────────────┤
│                                             │
│   [  驳回  ]    [  通过  ]    [强制通过▼]   │
│                                             │
└─────────────────────────────────────────────┘

交互说明:

  • 点击问题条目自动跳转到视频对应时间点
  • 横屏模式下视频全屏播放,问题列表收起为浮层
  • "强制通过"需输入原因,记录审批人
  • 复杂编辑(如修改 Brief提示"请在电脑端操作"

3.8.3 移动端任务列表 (Task List)

┌─────────────────────────────────────────────┐
│  📋 任务列表                    🔍 筛选 ▼   │
├─────────────────────────────────────────────┤
│  ┌─────────────────────────────────────┐    │
│  │ 🔴 XX品牌618推广 - 达人A            │    │
│  │    竞品露出 · 待审核 · 2小时前      │    │
│  │    [查看详情]                       │    │
│  └─────────────────────────────────────┘    │
│  ┌─────────────────────────────────────┐    │
│  │ 🟡 XX品牌618推广 - 达人B            │    │
│  │    AI审核完成 · 待确认 · 1小时前    │    │
│  │    [快捷审核]                       │    │
│  └─────────────────────────────────────┘    │
│  ┌─────────────────────────────────────┐    │
│  │ ✅ XX品牌618推广 - 达人C            │    │
│  │    已通过 · 今天 14:30              │    │
│  │    [查看报告]                       │    │
│  └─────────────────────────────────────┘    │
├─────────────────────────────────────────────┤
│  🏠      ✅       📋       🔔       👤     │
└─────────────────────────────────────────────┘

3.8.4 移动端消息中心 (Notifications)

  • 通知类型:

    • 🔴 紧急: 硬性违规视频需处理
    • 🟠 申诉: 达人申诉待仲裁
    • 🟢 完成: 达人提交新版本 / 审核通过
    • 📊 日报: 每日审核数据汇总(可配置推送时间)
  • 快捷操作:

    • 通知卡片支持左滑"标记已读"
    • 点击直接跳转对应任务
    • 支持按类型筛选

4. 界面详解:品牌方端 (The Brand Admin)

设计目标: 监管、配置、数据沉淀、风险预警。 核心设备: 桌面端 (Desktop Web) 为主,移动端 (Mobile) 为辅。

4.1 数据看板 (Executive Dashboard) 核心功能

品牌方需要一目了然地掌握整体合规状况。

对应 PRD 成功指标:人工投入时长、初审通过率、召回率/误报率、舆情一致性

顶部指标卡片:

┌─────────────┬─────────────┬─────────────┬─────────────┬─────────────┐
│  📊 本月    │  ✅ 初审    │  🎯 硬性    │  ⚠️ 舆情    │  ⏱️ 平均   │
│  审核总量   │  通过率     │  召回率     │  拦截数     │  审核周期   │
│  1,234      │  78.5%      │  96.2%      │  23         │  4.2 小时   │
│  ↑12%       │  ↑5.2%      │  目标≥95%   │  ↓18%       │  目标≤5分钟 │
└─────────────┴─────────────┴─────────────┴─────────────┴─────────────┘

可视化图表区:

  • 趋势图: 近 30 天审核量与通过率趋势
  • 问题分布: 饼图展示违规类型占比(违禁词 / 竞品 / 舆情 / 卖点遗漏)
  • 代理商对比: 柱状图对比各代理商的审核效率与通过率
  • 热力图: 问题高发时段分布(帮助优化审核资源配置)
  • 舆情一致性: 软性风控判断与人工复核的一致率(目标 ≥ 80%

风险预警区:

  • 🔴 紧急: "代理商A在过去24小时内有5条视频触发'竞品露出',请关注"
  • 🟠 关注: "达人B连续3次提交未通过建议沟通"
  • 🟡 舆情: "本周舆情风险拦截数异常上升,建议检查阈值设置"

4.2 全局规则配置 (Rule Engine) [US-10]

  • 黑白名单管理:

    • 禁用词库: 支持分类管理(广告法 / 平台规则 / 品牌私有)
    • 竞品列表: 上传竞品 Logo 图库,支持相似度阈值设置
    • 白名单: 允许特定达人/场景豁免某些规则
    • 特例记录: 查看从审核台记录的豁免条款,支持确认/撤销
  • 区域合规配置:

    • 支持按投放地区切换法规版本(中国大陆 / 港澳台 / 海外)
    • 不同地区规则库独立管理
    • 切换时自动校验现有 Brief 与新规则的兼容性
  • 舆情阈值设置:

    • 调整 AI 对"油腻"、"性感"、"争议话题"的敏感度
    • 支持 High / Medium / Low 三档
    • 支持按平台差异化配置(抖音 vs 小红书)
    • ⚠️ 提示: 舆情风险仅作提示,不作为强制拦截依据
  • 规则版本管理:

    • 规则变更历史可追溯(含变更人、变更时间、变更内容)
    • 支持回滚到历史版本
    • 变更需审批生效(防止误操作)
    • 平台规则同步: 抖音/小红书规则变更时,系统在 1 工作日内更新并通知

4.3 代理商管理 (Agency Management)

  • 代理商列表:

    • 显示合作代理商及其绑定的品牌项目
    • 数据指标:管理达人数、审核量、通过率、平均周期
  • 权限配置:

    • 可见的 Brief 范围
    • 是否允许"强制通过"
    • 申诉仲裁权限
  • 绩效评估:

    • 代理商月度评分卡
    • 问题率对比排名

4.4 审计日志 (Audit Log) [US-12]

  • 列表视图: 查看所有审核记录,支持高级筛选

    • 按时间范围 / 代理商 / 达人 / 审核结果筛选
    • 关键词搜索(搜索视频标题、报错内容)
  • 详情页: 点击任意记录查看完整审核链路

    • 原始视频(带时间戳标注)
    • AI 检测报告全文
    • 人工决策记录(谁在什么时间做了什么操作)
    • 申诉记录(如有)
  • 证据链导出: 生成符合法务要求的 PDF 报告,包含:

    • 时间戳: 所有操作的精确时间记录
    • 截图: AI 报错对应的视频截图
    • 规则依据: 触发的规则版本与具体条款
    • 审核人: 操作人身份与电子签名
    • 规则版本号: 审核时使用的规则库版本
    • 模型版本号: AI 检测时使用的模型版本
    • 完整操作日志(不可篡改)

4.5 舆情预警中心 (Brand Safety Center)

  • 实时监控:

    • 近期被 AI 标记为"舆情风险"的视频列表
    • 按风险等级排序(高 / 中 / 低)
  • 案例库:

    • 历史舆情事件归档
    • 作为培训素材供代理商学习
  • 预警规则:

    • 配置自动通知规则(如:高风险视频自动 @品牌方)

4.6 AI 服务配置 (AI Configuration) 🤖

入口位置: 系统设置 → AI 服务配置 权限控制: 仅品牌管理员可配置,代理商和达人自动继承品牌方配置

4.6.1 配置界面

┌─────────────────────────────────────────────────────────────────┐
│  🤖 AI 服务配置                                                  │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│  AI 提供商                                                       │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │  OneAPI 中转服务                                      ▼   │  │
│  └───────────────────────────────────────────────────────────┘  │
│  💡 支持 OneAPI、Anthropic Claude、OpenAI、DeepSeek 等           │
│                                                                  │
│  ─────────────────────────────────────────────────────────────  │
│                                                                  │
│  模型配置                                                        │
│                                                                  │
│  文字处理模型 (LLM)                                              │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │  claude-opus-4-5-20251101                              ▼   │  │
│  └───────────────────────────────────────────────────────────┘  │
│  用于 Brief 解析、语义分析、报告生成                              │
│                                                                  │
│  视频分析模型 (Vision)                                           │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │  doubao-seed-1.6-thinking-vision                       ▼   │  │
│  └───────────────────────────────────────────────────────────┘  │
│  用于 Logo 检测、画面分析、竞品识别                               │
│                                                                  │
│  音频解析模型 (ASR)                                              │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │  whisper-large-v3                                      ▼   │  │
│  └───────────────────────────────────────────────────────────┘  │
│  用于语音转文字、口播内容提取                                     │
│                                                                  │
│  ─────────────────────────────────────────────────────────────  │
│                                                                  │
│  连接配置                                                        │
│                                                                  │
│  Base URL                                                        │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │  https://oneapi.intelligrow.cn                             │  │
│  └───────────────────────────────────────────────────────────┘  │
│                                                                  │
│  API Key                                                         │
│  ┌───────────────────────────────────────────────────┐  ┌────┐  │
│  │  sk-••••••••••••••••••••••••••••••                 │  │ 👁️ │  │
│  └───────────────────────────────────────────────────┘  └────┘  │
│                                                                  │
│  ─────────────────────────────────────────────────────────────  │
│                                                                  │
│  生成参数                                                        │
│                                                                  │
│  Temperature: 0.7      Max Tokens: 2000                          │
│  ├────────●───────┤    ┌─────────────────┐                       │
│  0              1.0    │      2000       │                       │
│                        └─────────────────┘                       │
│                                                                  │
│  ┌───────────────┐                        ┌───────────────┐     │
│  │   测试连接     │                        │     保存      │     │
│  └───────────────┘                        └───────────────┘     │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

4.6.2 功能说明

功能 说明
AI 提供商选择 下拉选择OneAPI / Anthropic / OpenAI / DeepSeek / 自定义
模型动态获取 输入 Base URL 和 API Key 后,调用 /v1/models 接口获取可用模型列表
三类模型配置 分别配置文字处理LLM、视频分析Vision、音频解析ASR模型
测试连接 并行测试三个模型的连通性,弹窗显示每个模型的测试结果
配置继承 品牌方配置后,所属代理商和达人自动使用此配置,无需单独设置

4.6.3 配置继承关系

┌─────────────────────────────────────────────────────────────────┐
│                        配置继承模型                              │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│          ┌─────────────────┐                                    │
│          │    🛡️ 品牌方     │  ← 唯一配置入口                    │
│          │   AI 服务配置    │                                    │
│          └────────┬────────┘                                    │
│                   │                                              │
│          ┌────────┴────────┐                                    │
│          ▼                 ▼                                    │
│   ┌─────────────┐   ┌─────────────┐                            │
│   │  👥 代理商A  │   │  👥 代理商B  │  ← 自动继承,只读查看       │
│   └──────┬──────┘   └──────┬──────┘                            │
│          │                 │                                    │
│    ┌─────┴─────┐     ┌─────┴─────┐                              │
│    ▼           ▼     ▼           ▼                              │
│ ┌──────┐  ┌──────┐ ┌──────┐  ┌──────┐                          │
│ │👤达人1│  │👤达人2│ │👤达人3│  │👤达人4│  ← 自动继承,无感知      │
│ └──────┘  └──────┘ └──────┘  └──────┘                          │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

4.6.4 安全说明

  • API Key 加密存储: 使用 AES-256-GCM 加密,密钥与数据分离存储
  • 传输安全: 所有 API 请求强制 HTTPS
  • 权限隔离: 仅品牌管理员可查看/修改 AI 配置
  • 审计日志: 配置变更记录操作人、时间、变更内容

4.7 移动端界面 (Mobile Portal) 📱

设计目标: 随时掌握关键指标、即时响应舆情预警、紧急审批处理。 核心设备: 手机浏览器 / 小程序 / App。 定位: 数据查看与紧急响应,规则配置等复杂操作引导至桌面端完成。

4.7.1 移动端数据看板 (Mobile Dashboard)

┌─────────────────────────────────────────────┐
│  📊 品牌看板                   2026-02-02 ▼ │
├─────────────────────────────────────────────┤
│  ┌─────────────────────────────────────┐    │
│  │  本月审核总量        初审通过率     │    │
│  │     1,234              78.5%       │    │
│  │     ↑12%               ↑5.2%       │    │
│  └─────────────────────────────────────┘    │
│  ┌─────────────────────────────────────┐    │
│  │  硬性召回率          平均审核周期   │    │
│  │     96.2%             4.2 小时     │    │
│  │   目标≥95% ✅        目标≤5分钟 ✅  │    │
│  └─────────────────────────────────────┘    │
├─────────────────────────────────────────────┤
│  📈 趋势图 (近7天)              [查看详情 >]│
│  ┌─────────────────────────────────────┐    │
│  │     ╱╲    ╱╲                        │    │
│  │       ╲╱    ╲   ← 通过率趋势      │    │
│  │                ╲                   │    │
│  └─────────────────────────────────────┘    │
├─────────────────────────────────────────────┤
│  📊      🔔       ✅       📋       👤     │
│  看板    预警     审批     日志     我的    │
└─────────────────────────────────────────────┘

4.7.2 移动端舆情预警 (Alert Center)

场景: 收到舆情预警推送,需快速查看并决策。

┌─────────────────────────────────────────────┐
│  🔔 舆情预警                      全部已读  │
├─────────────────────────────────────────────┤
│  🔴 紧急预警 (2)                            │
│  ┌─────────────────────────────────────┐    │
│  │ ⚠️ 代理商A - 竞品露出集中爆发        │    │
│  │    过去24小时内5条视频触发           │    │
│  │    10分钟前                [查看 >]  │    │
│  └─────────────────────────────────────┘    │
│  ┌─────────────────────────────────────┐    │
│  │ ⚠️ 达人B - 高风险舆情内容           │    │
│  │    疑似性别偏见言论                 │    │
│  │    30分钟前                [查看 >]  │    │
│  └─────────────────────────────────────┘    │
├─────────────────────────────────────────────┤
│  🟠 关注事项 (3)                            │
│  ┌─────────────────────────────────────┐    │
│  │ 📋 达人C连续3次提交未通过            │    │
│  │    建议与代理商沟通                 │    │
│  │    2小时前                 [详情 >]  │    │
│  └─────────────────────────────────────┘    │
├─────────────────────────────────────────────┤
│  📊      🔔       ✅       📋       👤     │
└─────────────────────────────────────────────┘

4.7.3 移动端审批中心 (Approval Center)

场景: 代理商申请"强制通过",品牌方需审批。

┌─────────────────────────────────────────────┐
│  ✅ 待审批                        筛选 ▼   │
├─────────────────────────────────────────────┤
│  待处理 (3)                                 │
│  ┌─────────────────────────────────────┐    │
│  │ 🟡 强制通过申请                      │    │
│  │    达人:@小美美                     │    │
│  │    申请人代理商A - 张三            │    │
│  │    原因:达人玩的新梗,品牌方认可    │    │
│  │    ┌─────────────────────────────┐  │    │
│  │    │     📹 点击查看视频片段      │  │    │
│  │    └─────────────────────────────┘  │    │
│  │    AI报错00:42 油腻风险            │    │
│  │                                     │    │
│  │    [ 拒绝 ]           [ 批准 ]      │    │
│  └─────────────────────────────────────┘    │
├─────────────────────────────────────────────┤
│  已处理 (12)                       [查看 >] │
├─────────────────────────────────────────────┤
│  📊      🔔       ✅       📋       👤     │
└─────────────────────────────────────────────┘

交互说明:

  • 点击视频片段可预览关键时间点
  • 批准/拒绝需二次确认
  • 批准后自动通知代理商和达人
  • 审批记录同步至审计日志

4.7.4 移动端审计日志 (Audit Quick View)

┌─────────────────────────────────────────────┐
│  📋 审计日志                  🔍 搜索      │
├─────────────────────────────────────────────┤
│  筛选:全部 ▼   代理商 ▼   时间 ▼          │
├─────────────────────────────────────────────┤
│  ┌─────────────────────────────────────┐    │
│  │ ✅ XX品牌618推广 - 达人A            │    │
│  │    状态:已通过(强制)              │    │
│  │    审批人:李四 · 今天 14:30         │    │
│  │    [查看详情]  [导出证据链]          │    │
│  └─────────────────────────────────────┘    │
│  ┌─────────────────────────────────────┐    │
│  │ ❌ XX品牌618推广 - 达人B            │    │
│  │    状态:已驳回                     │    │
│  │    原因竞品Logo露出               │    │
│  │    [查看详情]                       │    │
│  └─────────────────────────────────────┘    │
├─────────────────────────────────────────────┤
│  📊      🔔       ✅       📋       👤     │
└─────────────────────────────────────────────┘

移动端功能边界:

  • 支持:数据查看、预警响应、审批处理、日志查询、证据链导出
  • 不支持(引导至桌面端):规则配置、阈值调整、代理商权限管理、复杂报表分析

5. 交互状态与反馈规范 (UX States)

为保证体验流畅,需定义以下关键交互状态:

状态 (State) 界面反馈 (UI Behavior) 文案示例 (Micro-copy)
上传中 进度条 + 剩余时间预估 "正在上传视频 (35%)... 请勿关闭页面"
排队中 队列位置提示 "前面还有 3 个任务AI 马上就到..."
处理中 (长时) 允许离开提示 "深度审核约需 3 分钟。您可以先去喝杯咖啡,结果将通过微信通知您。"
解析失败 错误引导 + 手动兜底 "无法读取此 PDF 内容。请检查文件是否加密,或[切换到文本输入模式]。"
申诉成功 激励动效 (Confetti) "申诉生效令牌已返还。AI 正在学习您的反馈。"

6. 设计风格指导 (Design Guidelines)

  • 色调 (Palette):

  • 科技蓝 (Tech Blue): 用于 AI 正在思考、扫描的状态。

  • 警示红 (Alert Red): 用于硬性阻断。

  • 风险橙 (Risk Orange): 用于舆情/油腻提示。

  • 安全绿 (Safe Green): 用于通过、合规项。

  • 字体 (Typography): 清晰的无衬线字体,确保在视频播放器旁的密集文字依然易读。

  • 动效 (Motion): 仅在"AI 处理中"使用微动效(波纹、扫描光效),强调系统的智能化属性;审核台保持静态高效。


7. 响应式设计规范 (Responsive Design)

7.1 断点定义 (Breakpoints)

设备类型 断点范围 适用角色
Mobile < 768px 达人端(主要)
Tablet 768px - 1024px 达人端(辅助)、代理商外出场景
Desktop > 1024px 代理商端、品牌方端(主要)

7.2 各端适配策略

  • 达人端 (Mobile-First):

    • 单列布局,卡片式信息展示
    • 底部固定导航栏
    • 视频播放器全屏优先
    • 手势操作支持(左滑删除、下拉刷新)
  • 代理商端 (Desktop-First):

    • 侧边栏导航(可折叠)
    • 多列布局,支持分屏操作
    • Tablet 下侧边栏自动收起为图标模式
  • 品牌方端 (Desktop-Only):

    • 数据看板响应式网格布局
    • 图表自适应容器宽度
    • 最小支持宽度 1280px

8. 无障碍设计 (Accessibility / a11y)

8.1 基本要求

  • WCAG 2.1 AA 级合规
  • 颜色对比度: 文字与背景对比度 ≥ 4.5:1
  • 键盘导航: 所有交互元素可通过 Tab 键访问
  • 屏幕阅读器: 关键元素提供 ARIA 标签

8.2 具体实现

场景 无障碍要求
颜色标识 红/黄/绿状态不仅用颜色,同时用图标和文字区分
视频播放器 提供字幕轨道、支持键盘控制播放/暂停/跳转
表单 所有输入框有明确的 label 关联
错误提示 错误信息同时通过颜色、图标、文字三种方式呈现
动效 提供"减少动态效果"选项,尊重系统偏好设置

9. 错误处理与边界情况 (Error Handling)

9.1 错误类型与处理策略

错误类型 触发场景 用户提示 技术处理
网络错误 请求超时/断网 "网络不给力,请检查连接后重试" 自动重试 3 次,指数退避
上传失败 文件过大/格式不支持 "文件格式不支持,请上传 MP4/MOV 格式" 前端预校验 + 后端双重验证
解析失败 Brief PDF 加密/损坏 "无法读取此文件,请检查是否加密" 提供手动输入降级方案
AI 服务异常 模型超时/不可用 "AI 正在休息,请稍后重试" 自动进入队列,恢复后继续处理
权限不足 越权操作 "您没有权限执行此操作" 记录日志,通知管理员
并发冲突 多人同时编辑 "其他用户正在编辑,请刷新后重试" 乐观锁 + 版本号校验

9.2 空状态设计 (Empty States)

页面 空状态提示 引导动作
任务列表 "暂无任务,等待品牌方分配" 显示品牌方联系方式
审核队列 "太棒了!所有任务都已处理完毕" 显示历史数据入口
搜索结果 "未找到匹配结果" 建议调整筛选条件
数据看板 "暂无数据,审核开始后将自动生成" 显示示例数据

9.3 加载状态规范 (Loading States)

  • 骨架屏 (Skeleton): 列表页、卡片区域使用骨架屏占位
  • 进度条: 文件上传显示精确进度百分比
  • Spinner 短时操作(< 3s使用旋转加载图标
  • 进度提示: 长时操作显示预计剩余时间和当前步骤

10. 附录

10.1 页面清单 (Page Inventory)

角色 页面名称 优先级 备注
达人 任务列表 P0 MVP
智能上传页 P0 MVP
审核结果页 P0 MVP
消息中心 P1
历史记录 P2
代理商 工作台 P0 MVP
Brief 配置 P0 MVP
审核决策台 P0 MVP
版本比对 P1
达人管理 P1
数据报表 P2
品牌方 数据看板 P0 MVP
规则配置 P0 MVP
AI 服务配置 P0 MVP - 品牌方专属
审计日志 P1
代理商管理 P1
舆情预警 P2

10.2 设计资源

  • 设计稿 (Figma): [待补充]
  • 组件库 (Design System): [待补充]
  • 图标库 (Icon Set): [待补充]