# User_Role_Interfaces.md - 用户角色与界面规范 | 文档类型 | **UI/UX Spec (Interface Definitions)** | | --- | --- | | **项目名称** | 秒思智能审核平台 (AI 营销内容合规审核平台) | | **版本号** | V1.6 | | **发布日期** | 2026-02-05 | | **关联文档** | RequirementsDoc.md, PRD.md, FeatureSummary.md, DevelopmentPlan.md, AIProviderConfig.md, UIDesign.md, tasks.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），品牌方专属功能 | | V1.4 | 2026-02-03 | Claude | **新增审核流程进度可视化 UI（F-52）**：达人端任务列表状态标签、任务详情-审核结果区进度条 | | V1.5 | 2026-02-03 | Claude | **扩展审核流程进度可视化至全角色**：代理商审核决策台/快捷审核、品牌方审批中心均可查看进度条 | | V1.6 | 2026-02-05 | Claude | **明确两阶段审核流程**：脚本阶段+视频阶段独立状态；完善任务按钮状态逻辑（查看详情→上传视频）；细化结果页按钮（重新提交脚本/重新上传视频）；添加历史任务归档规则 | --- ## 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-10A/US-10B] | | **AI 服务配置** | ❌ 无权 | ❌ 无权（继承品牌方配置） | ✅ 配置 AI 提供商/模型/参数 | | **用户管理** | ❌ 无权 | ✅ 管理所属达人 | ✅ 管理代理商与达人 | > **审核流程说明：** 品牌方可在系统设置中配置是否开启终审环节。**默认关闭**，代理商初审通过即为最终通过；开启后，代理商初审通过的内容需进入品牌方终审队列。代理商或品牌方驳回时，任务回到脚本上传阶段并重新进入 AI → 代理商 →（可选）品牌流程（可循环）。 --- ## 1.1 各端导航结构 (Navigation Structure) ### 达人端 (Mobile-First) ``` ┌─────────────────────────────────────┐ │ 底部导航栏 (Tab Bar) │ ├─────────┬─────────┬───────┤ │ 🏠 │ 🔔 │ 👤 │ │ 任务 │ 消息 │ 我的 │ └─────────┴─────────┴───────┘ ``` ### 代理商端 (Desktop Sidebar) ``` ┌──────────────────────────────────────────────┐ │ 📊 工作台 (Dashboard) │ │ 📋 Brief 管理 │ │ ✅ 审核台 (Review) │ │ 👥 达人管理 │ │ 📈 数据报表 │ │ ⚙️ 设置 │ └──────────────────────────────────────────────┘ ``` ### 代理商端 (Mobile Tab Bar) 📱 ``` ┌─────────────────────────────────────────────┐ │ 底部导航栏 (Tab Bar) │ ├─────────┬─────────┬─────────┬─────────┬─────┤ │ 🏠 │ ✅ │ 📋 │ 🔔 │ 👤 │ │ 工作台 │ 审核 │ 任务 │ 消息 │ 我的│ └─────────┴─────────┴─────────┴─────────┴─────┘ ``` > 📱 **移动端定位：** 外出场景下的紧急审核处理、进度查看、消息通知，复杂配置操作引导至桌面端完成 ### 品牌方端 (Desktop Sidebar) ``` ┌──────────────────────────────────────────────┐ │ 📊 数据看板 (Analytics) │ │ 👥 代理商管理 │ │ 🤖 AI 配置 │ │ ✅ 终审台 (Final Review) │ │ ────────────────────────────────────────── │ │ [+ 创建项目] │ └──────────────────────────────────────────────┘ ``` ### 品牌方端 (Mobile Tab Bar) 📱 ``` ┌─────────────────────────────────────────────┐ │ 底部导航栏 (Tab Bar) │ ├─────────────┬─────────────┬─────────────────┤ │ 📊 │ ✅ │ 👤 │ │ 看板 │ 审批 │ 我的 │ └─────────────┴─────────────┴─────────────────┘ ``` > 📱 **移动端定位：** 关键指标查看、终审审批处理，规则配置等复杂操作引导至桌面端完成 --- ## 2. 界面详解：达人端 (The Creator Portal) **设计目标：** 极简、透明、减少焦虑。让达人像发朋友圈一样简单地完成合规检查。 **核心设备：** 手机浏览器 (H5) / 小程序。 **达人ID（唯一标识）：** * 每个达人在系统中拥有唯一的**达人ID**（如：`CR123456`） * 达人ID用于代理商精准邀请达人加入合作 * 达人可在个人中心查看并复制自己的达人ID * 达人ID在注册时自动生成，不可修改 **代理商邀请通知：** * 代理商通过达人ID搜索并发送邀请 * 达人在消息中心收到邀请，点击「同意」或「拒绝」 * 同意后自动加入该代理商的达人列表，可接收任务分配 ### 2.1 任务列表页 (Task List) * **状态概览：** 卡片式布局，显示当前任务状态（待提交脚本、脚本审核中、脚本需修改、待上传视频、视频审核中、视频需修改、已通过）。 * **两阶段审核说明：** 每个任务需经过「脚本阶段」和「视频阶段」两轮审核，每阶段均需通过 AI 审核 → 代理商审核 → （可选）品牌方审核。 * **行动号召 (CTA) 与按钮状态逻辑：** * `[上传脚本]`：任务初始状态，未提交脚本 * `[查看详情]`：**首次**脚本审核通过后显示，点击进入结果页查看通过详情 * `[上传视频]`：在结果页点击「下一步：上传视频」返回任务列表后显示 * `[查看修改意见]`：脚本或视频审核被驳回时显示 * `[查看结果]`：视频审核通过后显示 * **历史任务归档：** 当日结束后（00:00），所有「已通过」状态的任务自动归档至历史记录 #### 2.1.1 审核流程进度可视化 ⭐ F-52 **功能说明：** 达人可在任务列表和详情页清晰看到内容当前处于哪个审核阶段。 **任务卡片状态标签：** ``` ┌─────────────────────────────────────────────────────────────────┐ │ 📹 XX品牌618推广 │ │ │ │ 审核进度： │ │ ┌────────────────────────────────────────────────────────────┐ │ │ │ ✅已提交 → 🤖AI审核中 → ○待代理商审核 → ○待品牌终审 → ○通过 │ │ │ │ ↑当前阶段 │ │ │ └────────────────────────────────────────────────────────────┘ │ │ │ │ 状态: 🤖 AI审核中 更新于: 2分钟前 │ │ [查看详情] │ └─────────────────────────────────────────────────────────────────┘ ``` **状态定义与样式（两阶段审核）：** **脚本阶段状态：** | 状态 | 图标 | 颜色 | 标签文案 | 任务卡片按钮 | | --- | --- | --- | --- | --- | | 待提交脚本 | 📤 | 灰色 | 待提交脚本 | [上传脚本] | | 脚本AI审核中 | 🤖 | 蓝色(动画) | 脚本AI审核中 | [审核中...] (禁用) | | 脚本AI审核通过 | ✅ | 绿色 | 脚本AI通过，待人工复核 | [查看详情] | | 脚本需修改 | ⚠️ | 橙色 | 脚本需修改 | [查看修改意见] | | 脚本待代理商审核 | 👥 | 紫色 | 等待代理商审核 | [查看详情] | | 脚本代理商驳回 | ❌ | 红色 | 脚本代理商驳回 | [查看修改意见] | | 脚本待品牌终审 | 🛡️ | 紫色 | 等待品牌方终审 | [查看详情] | | 脚本品牌方驳回 | ❌ | 红色 | 脚本品牌方驳回 | [查看修改意见] | | 脚本审核通过 | ✅ | 绿色 | 脚本通过，待上传视频 | [查看详情] 或 [上传视频]* | > *按钮状态说明：脚本审核通过后**首次**显示 [查看详情]，用户进入结果页点击「下一步：上传视频」返回后，按钮变为 [上传视频] **视频阶段状态：** | 状态 | 图标 | 颜色 | 标签文案 | 任务卡片按钮 | | --- | --- | --- | --- | --- | | 待上传视频 | 📹 | 灰色 | 待上传视频 | [上传视频] | | 视频AI审核中 | 🤖 | 蓝色(动画) | 视频AI审核中 | [审核中...] (禁用) | | 视频AI审核通过 | ✅ | 绿色 | 视频AI通过，待人工复核 | [查看详情] | | 视频需修改 | ⚠️ | 橙色 | 视频需修改 | [查看修改意见] | | 视频待代理商审核 | 👥 | 紫色 | 等待代理商审核 | [查看详情] | | 视频代理商驳回 | ❌ | 红色 | 视频代理商驳回 | [查看修改意见] | | 视频待品牌终审 | 🛡️ | 紫色 | 等待品牌方终审 | [查看详情] | | 视频品牌方驳回 | ❌ | 红色 | 视频品牌方驳回 | [查看修改意见] | | 审核通过 | ✅ | 绿色 | 审核通过，可发布 | [查看结果] | **历史任务：** | 状态 | 图标 | 颜色 | 标签文案 | 任务卡片按钮 | | --- | --- | --- | --- | --- | | 已完成(历史) | ✅ | 灰色 | 已完成 | [查看记录] | > 历史任务说明：当日 00:00 后，所有「审核通过」的任务自动归档至历史记录页面 **进度条规则（两阶段审核）：** > 重要：每个任务包含「脚本阶段」和「视频阶段」两轮审核，进度条需体现当前所处阶段 **脚本阶段进度条：** - 终审关闭时：显示 4 步（脚本已提交 → AI审核 → 代理商审核 → 脚本通过） - 终审开启时：显示 5 步（脚本已提交 → AI审核 → 代理商审核 → 品牌终审 → 脚本通过） - 脚本阶段通过后，进度条切换为视频阶段 **视频阶段进度条：** - 终审关闭时：显示 4 步（视频已提交 → AI审核 → 代理商审核 → 视频通过） - 终审开启时：显示 5 步（视频已提交 → AI审核 → 代理商审核 → 品牌终审 → 视频通过） **通用规则：** - 当前阶段高亮显示，已完成阶段打勾，未到达阶段灰色 - **脚本阶段驳回**：任务回到「待提交脚本」，需重新上传脚本 - **视频阶段驳回**：任务回到「待上传视频」，需重新上传视频（无需重新提交脚本） ### 2.2 任务详情 - 上传与扫描区 (The Magic Scanner) [US-03, US-07] 这是嵌入任务详情页的上传/扫描区域，达人等待 AI 结果时必须缓解等待焦虑（Wait-time Anxiety）。 * **标题与任务信息：** 展示任务名、平台、截止时间、当前步骤（脚本/视频） * **脚本提交方式：** * **文件上传**（支持 PDF/Word/纯文本/Excel） * **关键提示：** 脚本提交后进入 AI 预审，结果回到任务详情 * **提交按钮 + 校验：** 空内容禁止提交 * **草稿保存：** 支持保存草稿（本地或后端） * **文件支持：** 支持脚本文档上传、视频文件上传（≤ 100MB，1080p） * **透明思考 UI：** 实时显示 AI 处理进度 * 屏幕中央显示 AI 正在扫描的动态波纹 * **进度指示器：** 显示当前处理阶段和预估剩余时间 * **滚动日志 (Rolling Log):** 实时显示 AI 动作，例如： > 🔍 *正在加载任务规则...* > 👁️ *正在逐帧检测竞品 Logo...* > 🧠 *正在分析口播情感色彩...* > ✅ *口播检测完成，正在核对卖点覆盖...* * **离开提示：** 深度审核约需 3-5 分钟，可选择离开并通过微信通知结果 ### 2.3 审核结果反馈页 (Audit Report) 当 AI 发现问题时，不能直接把 JSON 扔给达人，要翻译成"人话"。 > **重要说明：** 审核结果页根据当前所处阶段（脚本/视频）和审核结果（通过/驳回）显示不同内容和按钮 #### 2.3.0 结果页按钮逻辑（核心交互） | 当前阶段 | 审核结果 | 结果页按钮 | 点击后跳转 | | --- | --- | --- | --- | | 脚本阶段 | AI审核通过/代理商审核通过/品牌审核通过 | `[下一步：上传视频]` | 返回任务列表，按钮变为 [上传视频] | | 脚本阶段 | AI审核不通过 | `[重新提交脚本]` | 进入脚本上传页 | | 脚本阶段 | 代理商/品牌方驳回 | `[重新提交脚本]` | 进入脚本上传页 | | 视频阶段 | AI审核通过/代理商审核通过/品牌审核通过 | `[审核通过，可发布]` | 返回任务列表，任务显示「审核通过」 | | 视频阶段 | AI审核不通过 | `[重新上传视频]` | 进入视频上传页 | | 视频阶段 | 代理商/品牌方驳回 | `[重新上传视频]` | 进入视频上传页 | > **按钮状态变化说明：** 脚本阶段通过后，用户**首次**在任务列表看到 [查看详情] 按钮，点击进入结果页后看到 [下一步：上传视频]，点击该按钮返回任务列表后，按钮变为 [上传视频]，此后点击直接进入视频上传页。 #### 2.3.1 等待代理商审核状态（脚本已通过） 达人在脚本 AI 预审通过后进入该状态，页面内容为只读等待态。 * **任务信息头部：** 任务名、平台、截止时间、当前阶段（"脚本阶段 - 等待代理商审核"） * **审核流程进度条：** 脚本阶段进度条，当前阶段高亮，已完成阶段打勾 * **脚本提交信息：** * 文件名/类型（PDF/Word/纯文本/Excel） * 提交时间 * **AI 脚本预审结果摘要：** * 结论：通过 * 简短说明（如"无硬性违规"） * 如有软性提示（Warn-only），以提示样式展示，不阻断等待状态 * **等待提示：** "已进入代理商审核，请耐心等待" * **结果告知：** 后续结果将在消息中心提醒 #### 2.3.1 审核流程进度条 ⭐ F-52 **页面顶部显示完整审核流程进度：** ``` ┌─────────────────────────────────────────────────────────────────┐ │ 📹 XX品牌618推广 - 审核详情 返回 ← │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ ┌────────────────────────────────────────────────────────────┐ │ │ │ 已提交 AI审核 代理商审核 最终结果 │ │ │ │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ │ │ │ │ ✅ │ ───▶ │ ✅ │ ───▶ │ 👥 │ ───▶ │ ○ │ │ │ │ │ │ 完成 │ │ 通过 │ │审核中│ │ 待定 │ │ │ │ │ └──────┘ └──────┘ └──────┘ └──────┘ │ │ │ │ 2/3 10:30 2/3 10:35 当前 │ │ │ └────────────────────────────────────────────────────────────┘ │ │ │ │ 当前状态：👥 等待代理商审核 │ │ 预计处理时间：通常 2-4 小时内 │ │ │ ├─────────────────────────────────────────────────────────────────┤ │ 以下为审核详情内容... │ └─────────────────────────────────────────────────────────────────┘ ``` **进度条交互：** - 点击已完成的节点可查看该阶段详情（时间、处理人、结果） - 当前阶段显示预估等待时间 - 驳回状态时显示驳回原因摘要，并提示返回脚本上传重新进入审核流程 * **结果横幅：** * 🔴 **未通过 (Blocked):** 存在硬性违规，必须修改。 * 🟡 **建议修改 (Warning):** 存在舆情风险或卖点遗漏，建议优化。 * 🟢 **AI 初审通过:** 已自动转交人工复核。 * **修改清单 (Action Items):** * **时间轴跳转：** 点击报错条目，视频自动跳转到对应秒数（例如 00:15）。 * **错误详情：** * *错误类型：* 广告法违禁词 * *原内容：* “全网第一” * *AI建议：* 建议改为“深受喜爱”或“销量领先”。 * **申诉入口：** * 在每一条报错旁边提供 `[ 申诉 ]` 按钮 * **申诉弹窗：** * 显示剩余令牌数量（如：剩余 2 次） * 令牌配额基于达人信用评分（历史表现越好，配额越高） * 提供理由输入框（必填，≥ 10 字） * 可上传补充证据（截图、链接等） * **申诉流程：** 提交 → 代理商仲裁 → 结果通知 * **令牌返还：** 申诉成功后令牌自动返还 ### 2.4 消息通知中心 (Notification Center) 达人需要及时获知任务状态变化，避免反复主动查询。 * **通知类型（按两阶段审核）：** **任务分配：** * 🔔 **新任务：** "您有一个新任务【XX品牌618推广】，请在 3 天内提交脚本" **脚本阶段通知：** * ✅ **脚本AI审核通过：** "您的脚本【XX品牌618推广】AI审核通过，已进入代理商审核" * ✅ **脚本代理商审核通过：** "您的脚本【XX品牌618推广】代理商审核通过，请上传视频" * ✅ **脚本品牌方审核通过：** "您的脚本【XX品牌618推广】品牌方审核通过，请上传视频" * ❌ **脚本AI审核不通过：** "您的脚本【XX品牌618推广】有 2 处需修改，点击查看详情" * ❌ **脚本代理商驳回：** "您的脚本【XX品牌618推广】被代理商驳回，请查看修改意见" * ❌ **脚本品牌方驳回：** "您的脚本【XX品牌618推广】被品牌方驳回，请查看修改意见" **视频阶段通知：** * ✅ **视频AI审核通过：** "您的视频【XX品牌618推广】AI审核通过，已进入代理商审核" * ✅ **视频代理商审核通过：** "您的视频【XX品牌618推广】代理商审核通过，等待品牌方终审" * ✅ **视频审核通过（最终）：** "恭喜！您的视频【XX品牌618推广】已通过审核，可安排发布" * ❌ **视频AI审核不通过：** "您的视频【XX品牌618推广】有问题需修改，点击查看详情" * ❌ **视频代理商驳回：** "您的视频【XX品牌618推广】被代理商驳回，请重新上传视频" * ❌ **视频品牌方驳回：** "您的视频【XX品牌618推广】被品牌方驳回，请重新上传视频" **其他通知：** * 👥 **代理商邀请：** "「星辰传媒」邀请您成为签约达人" * 操作按钮：`[同意]` `[拒绝]` * 同意后自动加入该代理商的达人列表，可接收任务分配 * 💬 **申诉结果：** "您的申诉已通过，AI 已学习您的反馈" * **通知渠道：** * H5 内消息中心（必选） * 微信服务号推送（可选） * 短信提醒（仅紧急/超时） ### 2.5 历史记录页 (History) * **任务归档规则：** * **自动归档：** 当日 00:00 后，所有「审核通过」状态的任务自动归入历史记录 * **手动归档：** 不支持，系统自动处理 * 筛选维度：按品牌/时间筛选已完成的任务 * **数据统计：** * 累计完成任务数 * 一次通过率（个人）：脚本一次通过率、视频一次通过率 * 平均修改轮次：脚本平均修改次数、视频平均修改次数 * **证书导出：** 支持导出"合规达人"认证徽章（达到一定通过率后解锁） --- ## 3. 界面详解：代理商端 (The Agency Console) **设计目标：** 高效、批量、上帝视角。 **核心设备：** 桌面端 (Desktop Web) 为主，移动端 (Mobile) 为辅。 **代理商ID（唯一标识）：** * 每个代理商在系统中拥有唯一的**代理商ID**（如：`AG123456`） * 代理商ID用于品牌方精准邀请代理商加入合作 * 代理商可在设置页查看并复制自己的代理商ID * 代理商ID在注册时自动生成，不可修改 **品牌方邀请通知：** * 品牌方通过代理商ID搜索并发送邀请 * 代理商在消息中心收到邀请，点击「同意」或「拒绝」 * 同意后自动加入该品牌方的代理商列表，可接收项目分配 ### 3.0 页面结构与跳转逻辑 #### 侧边栏导航 ``` 秒思 (Logo) ├── 工作台 ← 默认首页 ├── Brief配置 → Brief配置中心(列表页) ├── 审核台 → 审核台(列表页) ├── 达人管理 → 达人管理(列表页) ├── 数据面板 → 统计报表页 └── 设置 → 设置页 ``` #### 页面跳转关系图 **工作台跳转：** ``` 工作台 ├── 我的项目 [查看] ──────────► 项目详情页 └── 紧急待办 ├── 品牌新任务 [查看详情] ────► 项目详情页（待配置Brief） ├── 脚本审核任务 [审核脚本] ──► 脚本审核决策台 ├── 视频审核任务 [审核视频] ──► 视频审核决策台 └── 申诉仲裁任务 [仲裁] ──────► 审核决策台（带申诉标签） ``` **Brief配置跳转：** ``` Brief配置中心(列表页) ├── 待配置列表 │ └── 项目 ──点击──► 详情页(待配置) ──保存后──► 移到已配置列表 └── 已配置列表 └── 项目 ──点击──► 详情页(已配置) ──可更换文件/编辑规则 ``` **审核台跳转：** ``` 审核台(列表页) ├── 脚本审核列表 │ └── 任务 [审核] ──► 脚本审核决策台 ──[通过/驳回]──► 返回列表 └── 视频审核列表 └── 任务 [审核] ──► 视频审核决策台 ──[通过/驳回/强制通过]──► 返回列表 ``` **项目详情页：** ``` 项目详情页 ├── Brief信息 [下载] [预览] ├── 已分配达人列表（显示各达人当前状态） └── [+ 分配达人] ──► 弹窗选择达人 ``` **达人管理：** ``` 达人管理(列表页) ├── 达人列表（显示达人信息、粉丝数、平台、状态） └── [+ 添加达人] ──► 弹窗填写达人信息 ``` ### 3.1 工作台 (Dashboard) * **我的项目：** 显示代理商负责的项目列表 * 每个项目显示：项目名称、达人数量 * 点击 `[查看]` 进入项目详情页 * **紧急待办：** 醒目显示待处理任务 * **品牌新任务**（绿色）：品牌方刚分配的新项目，点击 `[查看详情]` 进入项目详情页配置Brief * **脚本审核**（紫色）：点击 `[审核脚本]` 进入脚本审核决策台 * **视频审核**（红色）：点击 `[审核视频]` 进入视频审核决策台 * **申诉仲裁**（橙色）：点击 `[仲裁]` 进入审核决策台（带申诉标签） * **统计卡片：** 今日通过数、待审核数等概览数据 ### 3.2 Brief 配置中心 (Brief Setup) [US-01, US-02] > **重要说明：** 项目由品牌方分配给代理商，代理商不能自行创建项目。品牌方分配新项目后，项目会出现在代理商的"待配置列表"中。 #### 3.2.1 Brief配置中心(列表页) * **待配置列表：** 显示品牌方已分配但尚未配置Brief的项目 * **已配置列表：** 显示已上传Brief并完成规则解析的项目 * 点击项目进入对应的详情页 #### 3.2.2 Brief配置详情页(待配置) * **左侧面板 - 文档上传区：** * 拖拽上传区域，支持 PDF/Word/Excel/PPT/图片 * **在线文档链接导入：** 支持飞书/Notion 等已授权分享链接 * ⚠️ **重要约束：** 仅支持用户授权的分享链接；不得绕过权限或抓取受限内容 * **投放平台选择：** 选择目标平台（抖音/小红书/B站等），自动加载对应平台规则库 * **右侧面板 - AI提取规则：** * 必含词、禁忌词、语义卖点、时序要求 * 支持手动编辑和添加 * **操作按钮：** `[取消]` `[保存规则]` * **保存后：** 项目从"待配置列表"移到"已配置列表" #### 3.2.3 Brief配置详情页(已配置) * **左侧面板 - Brief文件：** * 显示已上传的文件名、大小、上传时间 * 状态标签：「已配置」 * 操作按钮：`[预览]` `[更换文件]` * **右侧面板 - AI提取规则：** * 显示已解析的规则内容（必含词、禁忌词、语义卖点、时序要求） * 支持编辑和修改 * **操作按钮：** `[取消]` `[保存规则]` > 💡 **软广/种草内容审核说明：** 软性植入内容通常没有明确的关键词，系统通过**语义理解**而非关键词匹配来检测卖点覆盖情况。例如，"产品核心功效"是一个语义概念，AI 会理解达人是否表达了产品的功效，而不是简单搜索某个具体词汇。 ### 3.2.4 项目详情页 * **Brief信息：** 显示项目关联的Brief文件 * `[下载Brief]`：下载原始文件 * `[预览Brief]`：弹窗预览文件内容 * **已分配达人列表：** 显示该项目下所有达人及其当前任务状态 * 状态包括：脚本审核中、视频审核中、已通过、待修改等 * **分配达人：** `[+ 分配达人]` 点击弹窗选择达人分配到该项目 ### 3.3 核心审核决策台 (The Review Cockpit) ✨ *核心功能* [US-05, US-08] 这是系统最复杂的界面，用于人工复核 AI 的结果。 **布局结构：** #### 3.3.1 审核流程进度条 ⭐ F-52 **页面顶部显示当前任务的审核流程进度：** ``` ┌─────────────────────────────────────────────────────────────────┐ │ 审核决策台 返回列表 ← │ ├─────────────────────────────────────────────────────────────────┤ │ ┌────────────────────────────────────────────────────────────┐ │ │ │ 审核流程 当前：代理商审核 │ │ │ │ │ │ │ │ ✅已提交 ────▶ ✅AI审核 ────▶ ●代理商审核 ────▶ ○品牌终审 │ │ │ │ ↑当前阶段 │ │ │ └────────────────────────────────────────────────────────────┘ │ │ │ │ [视频播放器区域] [AI检查单区域] │ └─────────────────────────────────────────────────────────────────┘ ``` **进度条显示规则：** - 当前阶段：紫色高亮，大圆点 - 已完成阶段：绿色 ✅，显示完成时间 - 待处理阶段：灰色空心圆 - 品牌终审步骤：仅当品牌方开启终审时显示 * **左侧：视频播放器** * **智能进度条：** 进度条上打满 colored dots * 🔴 红点：硬伤（点击跳转） * 🟠 橙点：油腻/舆情风险 * 🟢 绿点：成功识别到的卖点（High-light） * **右侧：AI 检查单 (The Checklist)** * **分区一：硬性合规 (Hard Rules)** — 必须处理 * [✅] 违禁词检测 * [✅] 竞品 Logo 检测 * **分区二：舆情雷达 (Sentiment Radar)** [US-06] * [⚠️] **00:42 油腻预警：** 达人表情过于夸张，建议检查 * ⚠️ **重要说明：** 软性风险（油腻/爹味/性别偏见等）**仅作提示，不强制拦截**，需人工复核确认 * **底部：决策栏 (Action Bar)** * `[ 驳回 ]`：点击后，自动将勾选的问题打包发送给达人；任务回到脚本上传并触发脚本 AI 预审 → 代理商复审 →（可选）品牌终审 * `[ 强制通过 ]` [US-09]：强制通过（默认可用；品牌方关闭授权时按钮改为"申请强制通过"，提交后进入审批） * **必须填写放行原因**（如"达人玩的新梗，品牌方认可"） * 弹窗提供"**保存为特例**"可选项（**默认不勾选**，勾选后形成豁免条款，需品牌方确认后生效） * **记录审批人**与操作时间 * `[ 通过 ]`： * 若品牌方**未开启终审**（默认）→ 流程结束，任务状态「已通过」 * 若品牌方**已开启终审** → 进入品牌方终审队列，任务状态「待终审」 ### 3.4 版本比对视窗 (Diff View) [US-13] 当达人提交 V2 版本时触发。 * **顶部统计摘要：** ``` ┌─────────────────────────────────────────────────────┐ │ 📊 版本差异报告 │ │ V1 版本指出 3 个违规点：✅ 已修复 2 个 | ❌ 未修复 1 个 │ └─────────────────────────────────────────────────────┘ ``` * **双屏模式：** 左侧 V1，右侧 V2（同步播放） * **差异高亮：** * 右侧列表仅显示 **"V1 报错点"** 的修复情况 * 状态：`已修复 ✅` 或 `未修复 ❌` * 点击条目可跳转到对应时间戳，V1/V2 同步定位 * **快速决策：** 若所有违规点均已修复，提供"快速通过"按钮 ### 3.5 达人管理 (Creator Management) > **说明：** 达人管理为单一列表页，用于添加和管理达人信息，无单独的达人详情页。 * **达人列表：** * 显示所有关联达人的基本信息：昵称、平台账号、粉丝量级 * 显示合作数据：累计任务数、一次通过率、信用评分 * 支持按平台（抖音/小红书/B站）、状态（活跃/休眠）筛选 * **邀请达人：** * 点击 `[+ 邀请达人]` 打开邀请弹窗 * **达人ID（唯一标识）：** 每个达人在系统中拥有唯一的达人ID，用于精准邀请 * **邀请流程：** 1. 代理商在弹窗中输入达人ID进行搜索 2. 系统显示匹配的达人信息（头像、昵称、平台账号） 3. 代理商确认后点击 `[发送邀请]` 4. 达人在消息中心收到邀请通知："「XX代理商」邀请您成为签约达人" 5. 达人点击 `[同意]` 后，自动加入代理商的达人列表 6. 达人点击 `[拒绝]` 后，邀请取消 * **邀请状态：** 待接受 / 已接受 / 已拒绝 * **批量操作：** * 批量分配任务 * 批量发送催促通知 * 批量导出达人数据 ### 3.6 数据报表 (Analytics Reports) * **项目维度：** * 当前项目进度：已提交 / 审核中 / 已通过 / 待修改 * 平均审核周期（从提交到最终通过） * 修改轮次分布图 * **达人维度：** * 达人排行榜（按通过率、响应速度） * 问题达人预警（连续多次未通过） * **问题类型分析：** * 高频违规词 TOP 10 * 常见遗漏卖点统计 * 舆情风险分布 * **导出功能：** * 支持导出 Excel/PDF 格式 * 支持定时邮件订阅周报 ### 3.7 批量操作中心 (Batch Operations) [US-11] * **批量上传：** 支持 Uppy.js 多文件拖拽并发上传（Tus 协议断点续传） * **批量审核：** 对无问题项批量通过（需二次确认） * **批量导出：** 一键导出选中任务的审核报告 * 支持 Excel/PDF 格式 * 包含完整审核证据链 ### 3.8 移动端界面 (Mobile Portal) 📱 **设计目标：** 外出场景下的紧急审核处理、进度监控、即时通知响应。 **核心设备：** 手机浏览器 / 小程序。 **定位：** 桌面端的轻量补充，复杂操作引导至桌面端完成。 #### 3.8.1 移动端工作台 (Mobile Dashboard) ``` ┌─────────────────────────────────────────────┐ │ 📊 代理商工作台 [头像] │ ├─────────────────────────────────────────────┤ │ ┌─────────────┐ ┌─────────────┐ │ │ │ 🔴 待审核 │ │ ⚠️ 待仲裁 │ │ │ │ 12 │ │ 3 │ │ │ └─────────────┘ └─────────────┘ │ │ ┌─────────────┐ ┌─────────────┐ │ │ │ ✅ 今日通过 │ │ 📋 进行中 │ │ │ │ 28 │ │ 45 │ │ │ └─────────────┘ └─────────────┘ │ ├─────────────────────────────────────────────┤ │ 📌 紧急待办 │ │ ├─ 🟢 新项目 - 品牌方已分配 (刚刚) │ │ ├─ 🔴 达人A视频 - 竞品露出 (2小时前) │ │ ├─ 🟠 达人B申诉 - 待仲裁 (30分钟前) │ │ └─ 🟡 达人C视频 - AI审核完成 │ ├─────────────────────────────────────────────┤ │ 🏠 ✅ 📋 🔔 👤 │ │ 工作台 审核 任务 消息 我的 │ └─────────────────────────────────────────────┘ ``` #### 3.8.2 移动端快捷审核 (Quick Review) **场景：** 外出时收到紧急审核通知，需快速处理。 ``` ┌─────────────────────────────────────────────┐ │ ← 返回 快捷审核 ⋮ 更多 │ ├─────────────────────────────────────────────┤ │ ┌─────────────────────────────────────┐ │ │ │ 审核流程 代理商审核中 │ │ │ │ ✅提交 ─▶ ✅AI ─▶ ●代理商 ─▶ ○终审 │ │ │ └─────────────────────────────────────┘ │ │ ┌─────────────────────────────────────┐ │ │ │ │ │ │ │ 📹 视频播放器 │ │ │ │ (支持横屏全屏) │ │ │ │ │ │ │ │ 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-10A/US-10B] * **黑白名单管理：** * **禁用词库：** 支持分类管理（广告法 / 平台规则 / 品牌私有） * **竞品列表：** 上传竞品 Logo 图库，支持相似度阈值设置 * **白名单：** 允许特定达人/场景豁免某些规则 * **特例记录：** 查看从审核台记录的豁免条款，支持确认/撤销 * **区域合规配置：** * 支持按投放地区切换法规版本（中国大陆 / 港澳台 / 海外） * 不同地区规则库独立管理 * 切换时自动校验现有 Brief 与新规则的兼容性 * **舆情阈值设置：** * 调整 AI 对"油腻"、"性感"、"争议话题"的敏感度 * 支持 High / Medium / Low 三档 * 支持按平台差异化配置（抖音 vs 小红书） * ⚠️ **提示：** 舆情风险仅作提示，不作为强制拦截依据 * **规则版本管理：** * 规则变更历史可追溯（含变更人、变更时间、变更内容） * 支持回滚到历史版本 * 变更需审批生效（防止误操作） * **平台规则同步：** 抖音/小红书规则变更时，系统在 1 工作日内更新并通知 ### 4.3 创建项目 (Create Project) ⭐ 新增 **入口位置：** 品牌方端侧边栏 → [+ 创建项目] 按钮 **功能描述：** 品牌方创建新的营销项目，配置项目基本信息并分配给代理商执行。 **创建项目弹窗字段：** | 字段 | 类型 | 说明 | | --- | --- | --- | | 项目名称 | 文本输入 | 必填，项目的名称标识 | | 截止日期 | 日期选择 | 必填，项目交付截止时间 | | 品牌Brief | 文件上传 | 必填，支持 PDF/Word/Excel/PPT 格式 | | 选择代理商 | 多选列表 | 必填，从已添加的代理商中选择（可多选） | **创建流程：** 1. 品牌方点击侧边栏 `[+ 创建项目]` 按钮 2. 弹出创建项目弹窗 3. 填写项目名称、选择截止日期 4. 上传品牌Brief文档 5. 从已添加的代理商列表中勾选参与的代理商（支持多选） 6. 点击 `[创建项目]` 完成创建 7. 系统向选中的代理商发送项目分配通知 **界面映射：** `pencil-new.pen` → "品牌方端 - 创建项目弹窗" (M6nJ0) --- ### 4.4 代理商管理 (Agency Management) * **邀请代理商：** * 点击 `[+ 邀请代理商]` 打开邀请弹窗 * **代理商ID（唯一标识）：** 每个代理商在系统中拥有唯一的代理商ID，用于精准邀请 * **邀请流程：** 1. 品牌方在弹窗中输入代理商ID进行搜索 2. 系统显示匹配的代理商信息（头像、名称、代理商ID） 3. 品牌方确认后点击 `[发送邀请]` 4. 代理商在消息中心收到邀请通知："「XX品牌」邀请您成为合作代理商" 5. 代理商点击 `[同意]` 后，自动加入品牌方的代理商列表 6. 代理商点击 `[拒绝]` 后，邀请取消 * **邀请状态：** 待接受 / 已接受 / 已拒绝 * **代理商列表：** * 显示合作代理商及其绑定的品牌项目 * 数据指标：管理达人数、审核量、通过率、平均周期 * **权限配置：** * 可见的 Brief 范围 * 授权代理商独立使用强制通过：**按代理商配置**，默认开启，可关闭；关闭后代理商需提交审批 * 申诉仲裁权限 * **绩效评估：** * 代理商月度评分卡 * 问题率对比排名 ### 4.5 终审台 (Final Review) ⭐ 新增 **入口位置：** 品牌方端侧边栏 → 终审台（仅当终审开启时显示） **触发条件：** 品牌方在系统设置中开启「终审开关」后，代理商初审通过的内容进入此队列 #### 4.5.1 终审列表 ``` ┌─────────────────────────────────────────────────────────────────┐ │ ✅ 待终审 (8) 筛选 ▼ 搜索 🔍 │ ├─────────────────────────────────────────────────────────────────┤ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ 📹 XX品牌618推广 - 达人A │ │ │ │ 代理商：代理商A · 初审人：张三 · 3小时前 │ │ │ │ 🟡 舆情风险 1 项 [查看详情] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ 📹 XX品牌新品测评 - 达人B │ │ │ │ 代理商：代理商B · 初审人：李四 · 5小时前 │ │ │ │ ✅ 无风险项 [查看详情] │ │ │ └─────────────────────────────────────────────────────────┘ │ ├─────────────────────────────────────────────────────────────────┤ │ ⏱️ 超时提醒：2 条内容将在 24 小时内超时 │ └─────────────────────────────────────────────────────────────────┘ ``` #### 4.5.2 终审详情页 ⭐ F-52 **UI 设计：** `pencil-new.pen` → "品牌方端 - 终审台" (aePi5) **审核流程进度条（页面顶部）：** ``` ┌─────────────────────────────────────────────────────────────────┐ │ 终审台 返回列表 ← │ │ 春季护肤新品体验分享 · 达人: 小美 │ ├─────────────────────────────────────────────────────────────────┤ │ ┌────────────────────────────────────────────────────────────┐ │ │ │ 审核流程 当前：品牌终审 │ │ │ │ │ │ │ │ ✅已提交 ────▶ ✅AI审核 ────▶ ✅代理商审核 ────▶ ●品牌终审 │ │ │ │ ↑当前阶段 │ │ │ └────────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────┘ ``` * **布局：** 复用代理商审核决策台布局（视频播放器 + AI 检查单） * **额外信息：** 显示代理商初审意见和通过理由 * **决策按钮：** * `[ 驳回 ]`：填写驳回理由，任务状态变为「终审驳回」，返回脚本上传并重新进入 AI → 代理商 →（可选）品牌流程 * `[ 通过 ]`：任务状态变为「已通过」，流程结束 #### 4.5.3 审核流程配置 **入口位置：** 系统设置 → 审核流程配置 ``` ┌─────────────────────────────────────────────────────────────────┐ │ ⚙️ 审核流程配置 │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ 品牌方终审 │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ ○ 关闭（默认）- 代理商初审通过即为最终通过 │ │ │ │ ● 开启 - 代理商初审通过后需品牌方终审 │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ 终审范围（仅当开启终审时可配置） │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ ● 全部内容 │ │ │ │ ○ 仅舆情风险内容（AI 标记为黄色/红色舆情风险） │ │ │ │ ○ 仅指定代理商 │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ 终审超时处理 │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 超时时间：[ 48 ] 小时 │ │ │ │ ● 超时后自动通过 │ │ │ │ ○ 超时后仅提醒（不自动通过） │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ [ 取消 ] [ 保存 ] │ └─────────────────────────────────────────────────────────────────┘ ``` **配置说明：** | 配置项 | 默认值 | 说明 | | --- | --- | --- | | 终审开关 | **关闭** | 关闭时代理商通过即为最终通过 | | 终审范围 | 全部内容 | 可按内容类型或代理商筛选 | | 超时时间 | 48小时 | 待终审内容的最长等待时间 | | 超时处理 | 自动通过 | 超时后自动通过或仅提醒 | --- ### 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 检测由系统内置 CV 完成） │ │ │ │ 音频解析模型 (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 后，调用 `/api/v1/ai-config/models` 获取可用模型列表（后端代理厂商 `/v1/models`） | | **三类模型配置** | 分别配置文字处理（LLM）、视频分析（Vision）、音频解析（ASR）模型 | | **能力标签** | 模型下拉选项标注能力标签（如 `gpt-4o [文字/视觉]`），多模态模型会显示多标签 | | **测试连接** | 并行测试三个模型的连通性，弹窗显示每个模型的测试结果 | | **配置继承** | 品牌方配置后，所属代理商和达人自动使用此配置，代理商/达人不可见 | | **未配置拦截** | 未配置时阻断 AI 调用并提示品牌方完成配置 | #### 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) 📱 **设计目标：** 随时掌握关键指标、紧急审批处理。 **核心设备：** 手机浏览器 / 小程序。 **定位：** 数据查看与紧急响应，规则配置等复杂操作引导至桌面端完成。 #### 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 移动端审批中心 (Approval Center) **场景：** 1. 当品牌方关闭授权时，代理商申请"强制通过"，品牌方需审批 2. **当开启品牌终审时，代理商初审通过的视频进入品牌方终审队列** ⭐ F-52 ``` ┌─────────────────────────────────────────────┐ │ 审批中心 待审批 │ 已处理 │ ├─────────────────────────────────────────────┤ │ ┌─────────────────────────────────────┐ │ │ │ 🟣 视频终审申请 30分钟前│ │ │ │ 达人「小美」的视频「春季护肤新品 │ │ │ │ 体验」已通过代理商审核，等待终审 │ │ │ │ │ │ │ │ 审核流程进度： │ │ │ │ ✅提交 ─▶ ✅AI ─▶ ✅代理商 ─▶ ●终审│ │ │ │ │ │ │ │ [ 拒绝 ] [ 通过 ] │ │ │ └─────────────────────────────────────┘ │ │ ┌─────────────────────────────────────┐ │ │ │ 🟡 强制通过申请 10分钟前│ │ │ │ 达人：@小美美 │ │ │ │ 申请人：代理商A - 张三 │ │ │ │ 原因：达人玩的新梗，品牌方认可 │ │ │ │ ┌─────────────────────────────┐ │ │ │ │ │ 📹 点击查看视频片段 │ │ │ │ │ └─────────────────────────────┘ │ │ │ │ AI报错：00:42 油腻风险 │ │ │ │ │ │ │ │ [ 拒绝 ] [ 批准 ] │ │ │ └─────────────────────────────────────┘ │ │ ┌─────────────────────────────────────┐ │ │ │ 🟡 规则配置变更 2小时前 │ │ │ │ 代理商「星耀传媒」申请修改审核规则│ │ │ │ 竞品露出阈值调整为70% │ │ │ │ │ │ │ │ [ 拒绝 ] [ 通过 ] │ │ │ └─────────────────────────────────────┘ │ ├─────────────────────────────────────────────┤ │ 📊 ✅ 👤 │ └─────────────────────────────────────────────┘ ``` **视频终审审批项说明：** ⭐ F-52 * 仅当品牌方开启"终审开关"时显示此类审批项 * 显示完整审核流程进度条，品牌终审阶段高亮 * 点击可查看视频详情和代理商初审意见 * 通过/拒绝后自动通知代理商和达人 **交互说明：** * 点击视频片段可预览关键时间点 * 批准/拒绝需二次确认 * 批准后自动通知代理商和达人 * **进度条交互：** 点击已完成节点可查看该阶段详情（处理人、时间、结果） **移动端功能边界：** * ✅ 支持：数据查看、审批处理 * ❌ 不支持（引导至桌面端）：规则配置、阈值调整、代理商权限管理、复杂报表分析 --- ## 5. 交互状态与反馈规范 (UX States) 为保证体验流畅，需定义以下关键交互状态： | 状态 (State) | 界面反馈 (UI Behavior) | 文案示例 (Micro-copy) | | --- | --- | --- | | **上传中** | 进度条 + 剩余时间预估 | "正在上传视频 (35%)... 请勿关闭页面" | | **排队中** | 队列位置提示 | "前面还有 3 个任务，AI 马上就到..." | | **处理中 (长时)** | 允许离开提示 | "深度审核约需 3-5 分钟。您可以先去喝杯咖啡，结果将通过微信通知您。" | | **解析失败** | 错误引导 + 手动兜底 | "无法读取此 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 | | | 版本比对 | P2 | | | | 达人管理 | P1 | | | | 数据报表 | P1 | | | **品牌方** | 数据看板 | P0 | MVP | | | 规则配置 | P0 | MVP | | | AI 服务配置 | P0 | MVP - 品牌方专属 | | | 代理商管理 | P1 | | | | 终审台 | P0 | MVP - 开启终审时可见 | ### 10.2 设计资源 * 设计稿 (Figma): [待补充] * 组件库 (Design System): [待补充] * 图标库 (Icon Set): [待补充]