# UIDesign.md - 智能视频审核系统 UI 设计规范 | 文档类型 | **UI Design System (设计系统规范)** | | --- | --- | | **项目名称** | SmartAudit (AI 营销内容合规审核平台) | | **版本号** | V1.0 | | **发布日期** | 2026-02-02 | | **设计风格** | Apple Human Interface Guidelines 浅色系 | | **关联文档** | PRD.md, FeatureSummary.md, User_Role_Interfaces.md, DevelopmentPlan.md | --- ## 版本历史 (Version History) | 版本 | 日期 | 作者 | 变更说明 | | --- | --- | --- | --- | | V1.0 | 2026-02-02 | Claude | 初稿：设计原则、色彩系统、组件库、三端界面规范 | | V1.1 | 2026-02-02 | Claude | 新增第10章：AI 服务配置界面设计规范 | --- ## 1. 设计原则 (Design Principles) 借鉴 Apple Human Interface Guidelines，SmartAudit 的设计遵循以下核心原则： ### 1.1 核心设计理念 | 原则 | 描述 | 在 SmartAudit 中的体现 | | --- | --- | --- | | **Clarity (清晰)** | 文字清晰易读，图标精确传意，功能显而易见 | 审核结论用红/黄/绿 + 文字 + 图标三重表达 | | **Deference (克制)** | UI 退居幕后，内容为王 | 审核台以视频和报告为核心，界面元素轻量化 | | **Depth (层次)** | 通过视觉层次和流畅动效建立空间感 | 卡片悬浮阴影、模态弹窗、进度条层叠 | ### 1.2 SmartAudit 专属原则 | 原则 | 说明 | | --- | --- | | **透明 AI** | 不做黑盒，AI 的每一步思考都向用户展示（"正在检测 Logo..."） | | **减少焦虑** | 长时任务（3-5分钟）提供精细进度反馈，允许用户离开并通知结果 | | **轻量操作** | 达人端操作不超过 3 步完成核心任务（上传 → 等待 → 查看） | | **专业高效** | 代理商/品牌方端追求信息密度与操作效率的平衡 | --- ## 2. 色彩系统 (Color System) ### 2.1 主色板 (Primary Palette) 采用 Apple 风格浅色系，以纯净白色为基底，辅以柔和的功能色。 ``` ┌─────────────────────────────────────────────────────────────────┐ │ 主色板 │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │ │ │ │ │ │ │ │ │ Primary │ │Secondary │ │ Accent │ │ Dark │ │ │ │ #007AFF │ │ #5856D6 │ │ #34C759 │ │ #1D1D1F │ │ │ │ │ │ │ │ │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ 品牌蓝 智能紫 成功绿 深空黑 │ │ 主要操作 AI 相关 通过状态 标题文字 │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` | 色彩名称 | 色值 | 用途 | | --- | --- | --- | | **Primary Blue** | `#007AFF` | 主要按钮、链接、选中状态 | | **AI Purple** | `#5856D6` | AI 相关元素、进度指示、智能提示 | | **Success Green** | `#34C759` | 通过、合规、正确 | | **Warning Orange** | `#FF9500` | 舆情风险、建议修改 | | **Error Red** | `#FF3B30` | 硬性违规、必须处理 | | **Dark** | `#1D1D1F` | 主标题、重要文字 | | **Secondary** | `#86868B` | 次要文字、说明文字 | | **Tertiary** | `#AEAEB2` | 占位符、禁用状态 | ### 2.2 背景色 (Background Colors) ``` ┌─────────────────────────────────────────────────────────────────┐ │ 背景色 │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ ░░░░░░░░ │ │ ░░░░░░░░ │ │ ░░░░░░░░ │ │ ░░░░░░░░ │ │ │ │ Primary │ │Secondary │ │ Tertiary │ │Elevated │ │ │ │ #FFFFFF │ │ #F5F5F7 │ │ #E8E8ED │ │ #FFFFFF │ │ │ │ ░░░░░░░░ │ │ ░░░░░░░░ │ │ ░░░░░░░░ │ │ +shadow │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ 纯白 浅灰 分隔线 悬浮卡片 │ │ 页面底色 区块背景 边框/分隔 卡片/弹窗 │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` | 背景名称 | 色值 | 用途 | | --- | --- | --- | | **Background Primary** | `#FFFFFF` | 页面主背景 | | **Background Secondary** | `#F5F5F7` | 区块背景、侧边栏 | | **Background Tertiary** | `#E8E8ED` | 分隔线、输入框边框 | | **Background Elevated** | `#FFFFFF` + `shadow` | 悬浮卡片、弹窗、下拉菜单 | ### 2.3 语义色 (Semantic Colors) 用于审核状态标识，需同时搭配图标和文字，满足无障碍要求。 | 状态 | 色值 | 图标 | 文案示例 | | --- | --- | --- | --- | | **通过 (Pass)** | `#34C759` | ✓ | 审核通过 | | **警告 (Warning)** | `#FF9500` | ⚠ | 建议修改 | | **拒绝 (Reject)** | `#FF3B30` | ✕ | 硬性违规 | | **进行中 (Processing)** | `#5856D6` | ◐ | AI 审核中 | | **待处理 (Pending)** | `#86868B` | ○ | 等待审核 | --- ## 3. 排版系统 (Typography) ### 3.1 字体选择 | 平台 | 主字体 | 备选字体 | | --- | --- | --- | | **iOS/macOS** | SF Pro Display / SF Pro Text | -apple-system | | **Android** | Roboto | Noto Sans SC | | **Windows** | Segoe UI | Microsoft YaHei | | **Web 通用** | Inter | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto | **CSS Font Stack:** ```css font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", sans-serif; ``` ### 3.2 字号规范 | 层级 | 字号 (Desktop) | 字号 (Mobile) | 行高 | 字重 | 用途 | | --- | --- | --- | --- | --- | --- | | **Display Large** | 34px | 28px | 1.2 | Bold (700) | 页面大标题 | | **Display Medium** | 28px | 22px | 1.25 | Bold (700) | 区块标题 | | **Title Large** | 22px | 20px | 1.3 | Semibold (600) | 卡片标题 | | **Title Medium** | 17px | 17px | 1.35 | Semibold (600) | 列表项标题 | | **Body Large** | 17px | 17px | 1.5 | Regular (400) | 正文主体 | | **Body Medium** | 15px | 15px | 1.5 | Regular (400) | 次要正文 | | **Caption** | 13px | 13px | 1.4 | Regular (400) | 说明文字 | | **Footnote** | 12px | 12px | 1.4 | Regular (400) | 脚注、时间戳 | ### 3.3 文字颜色 | 层级 | 颜色 | 色值 | 用途 | | --- | --- | --- | --- | | **Primary** | Dark | `#1D1D1F` | 主标题、重要内容 | | **Secondary** | Gray | `#86868B` | 次要文字、说明 | | **Tertiary** | Light Gray | `#AEAEB2` | 占位符、禁用 | | **Link** | Blue | `#007AFF` | 链接、可点击文字 | | **Inverse** | White | `#FFFFFF` | 深色背景上的文字 | --- ## 4. 间距与布局 (Spacing & Layout) ### 4.1 间距系统 采用 8px 基准网格系统： | 间距名称 | 数值 | 用途 | | --- | --- | --- | | **xs** | 4px | 图标与文字间距 | | **sm** | 8px | 紧凑元素间距 | | **md** | 16px | 组件内间距 | | **lg** | 24px | 区块间距 | | **xl** | 32px | 大区块间距 | | **xxl** | 48px | 页面级间距 | ### 4.2 布局断点 | 断点名称 | 宽度范围 | 适用场景 | | --- | --- | --- | | **Mobile** | < 768px | 达人端主要 | | **Tablet** | 768px - 1024px | 达人端辅助 | | **Desktop** | 1024px - 1440px | 代理商/品牌方端 | | **Wide** | > 1440px | 大屏展示 | ### 4.3 内容区最大宽度 | 场景 | 最大宽度 | 说明 | | --- | --- | --- | | **阅读内容** | 680px | 报告详情、说明文字 | | **表单** | 560px | 输入表单 | | **卡片网格** | 1200px | Dashboard 卡片 | | **全宽** | 100% | 视频播放器、数据表格 | --- ## 5. 圆角与阴影 (Radius & Shadow) ### 5.1 圆角规范 | 元素类型 | 圆角值 | 示例 | | --- | --- | --- | | **Small** | 6px | 标签、徽章 | | **Medium** | 12px | 按钮、输入框 | | **Large** | 16px | 卡片、模态框 | | **XLarge** | 24px | 底部弹出面板 | | **Full** | 9999px | 圆形按钮、头像 | ### 5.2 阴影规范 ```css /* 悬浮卡片 */ .shadow-card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 24px rgba(0, 0, 0, 0.08); } /* 弹窗/模态框 */ .shadow-modal { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06); } /* 下拉菜单 */ .shadow-dropdown { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04); } /* 按钮悬停 */ .shadow-button-hover { box-shadow: 0 2px 12px rgba(0, 122, 255, 0.3); } ``` --- ## 6. 组件设计 (Component Library) ### 6.1 按钮 (Buttons) ``` ┌─────────────────────────────────────────────────────────────────┐ │ 按钮样式 │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ │ │ │ Primary │ │ Secondary │ │ Tertiary │ │ │ │ ██████████ │ │ ░░░░░░░░░░ │ │ Text │ │ │ │ #007AFF │ │ #F5F5F7 │ │ #007AFF │ │ │ └────────────────┘ └────────────────┘ └────────────────┘ │ │ │ │ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ │ │ │ Success │ │ Warning │ │ Destructive │ │ │ │ ██████████ │ │ ██████████ │ │ ██████████ │ │ │ │ #34C759 │ │ #FF9500 │ │ #FF3B30 │ │ │ └────────────────┘ └────────────────┘ └────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` | 类型 | 背景色 | 文字色 | 用途 | | --- | --- | --- | --- | | **Primary** | `#007AFF` | `#FFFFFF` | 主要操作：上传、提交、确认 | | **Secondary** | `#F5F5F7` | `#1D1D1F` | 次要操作：取消、返回 | | **Tertiary** | 透明 | `#007AFF` | 文字链接：查看详情 | | **Success** | `#34C759` | `#FFFFFF` | 成功操作：通过 | | **Destructive** | `#FF3B30` | `#FFFFFF` | 危险操作：驳回、删除 | **按钮尺寸：** | 尺寸 | 高度 | 内边距 | 字号 | 用途 | | --- | --- | --- | --- | --- | | **Large** | 50px | 24px | 17px | 移动端主按钮 | | **Medium** | 44px | 20px | 15px | 桌面端主按钮 | | **Small** | 32px | 12px | 13px | 内联操作按钮 | ### 6.2 输入框 (Input Fields) ``` ┌─────────────────────────────────────────────────────────────────┐ │ 输入框状态 │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ Default Focus │ │ ┌──────────────────────┐ ┌──────────────────────┐ │ │ │ 请输入内容... │ │ 输入内容 │ │ │ │ ────────────────────│ │ ════════════════════│ │ │ │ #E8E8ED │ │ #007AFF │ │ │ └──────────────────────┘ └──────────────────────┘ │ │ │ │ Error Disabled │ │ ┌──────────────────────┐ ┌──────────────────────┐ │ │ │ 错误内容 │ │ 禁用状态 │ │ │ │ ════════════════════│ │ ────────────────────│ │ │ │ #FF3B30 │ │ #F5F5F7 │ │ │ │ ⚠️ 请输入有效内容 │ │ │ │ │ └──────────────────────┘ └──────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` | 状态 | 边框色 | 背景色 | 说明 | | --- | --- | --- | --- | | **Default** | `#E8E8ED` | `#FFFFFF` | 默认状态 | | **Focus** | `#007AFF` | `#FFFFFF` | 聚焦状态，2px 边框 | | **Error** | `#FF3B30` | `#FFFFFF` | 错误状态，显示错误提示 | | **Disabled** | `#E8E8ED` | `#F5F5F7` | 禁用状态 | ### 6.3 卡片 (Cards) ``` ┌─────────────────────────────────────────────────────────────────┐ │ 卡片样式 │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ ╭─────────────────────────────────────────────────╮ │ │ │ │ │ │ │ 📋 Brief 解析完成 │ │ │ │ │ │ │ │ ───────────────────────────────────────────── │ │ │ │ │ │ │ │ 已提取 3 个核心卖点，2 个禁忌词 │ │ │ │ 投放平台：抖音 │ │ │ │ │ │ │ │ ┌──────────┐ ┌──────────┐ │ │ │ │ │ 查看详情 │ │ 编辑 │ │ │ │ │ └──────────┘ └──────────┘ │ │ │ │ │ │ │ ╰─────────────────────────────────────────────────╯ │ │ │ │ 背景: #FFFFFF │ │ 圆角: 16px │ │ 阴影: shadow-card │ │ 内边距: 24px │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` ### 6.4 标签与徽章 (Tags & Badges) ``` ┌─────────────────────────────────────────────────────────────────┐ │ 标签与徽章 │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ 状态标签 (Status Tags) │ │ ╭──────────╮ ╭──────────╮ ╭──────────╮ ╭──────────╮ │ │ │ ✓ 已通过 │ │ ⚠ 待修改 │ │ ✕ 已驳回 │ │ ◐ 审核中 │ │ │ ╰──────────╯ ╰──────────╯ ╰──────────╯ ╰──────────╯ │ │ #E8F5E9 #FFF3E0 #FFEBEE #EDE7F6 │ │ #34C759 #FF9500 #FF3B30 #5856D6 │ │ │ │ 数量徽章 (Count Badges) │ │ ╭────╮ ╭────╮ ╭────╮ │ │ │ 12 │ │ 3 │ │ 99+│ │ │ ╰────╯ ╰────╯ ╰────╯ │ │ #FF3B30 (红点通知) │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` ### 6.5 进度指示器 (Progress Indicators) ``` ┌─────────────────────────────────────────────────────────────────┐ │ 进度指示器 │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ 线性进度条 (Linear Progress) │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ └─────────────────────────────────────────────────────────┘ │ │ 45% - 正在检测竞品 Logo... │ │ │ │ 环形进度 (Circular Progress) │ │ ╭───────╮ │ │ ╱ ╭───╮ ╲ │ │ │ │ 45%│ │ │ │ ╲ ╰───╯ ╱ │ │ ╰───────╯ │ │ │ │ 步骤进度 (Step Progress) - AI 透明思考 │ │ ● ──────── ● ──────── ◐ ──────── ○ ──────── ○ │ │ Brief解析 ASR转写 Logo检测 语义分析 生成报告 │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` --- ## 7. 达人端界面设计 (Creator Portal) ### 7.1 设计定位 - **核心设备：** 手机浏览器 / 微信内嵌浏览器 - **设计风格：** 极简、友好、减少焦虑 - **参考：** Apple Music / Apple Podcasts 移动端 ### 7.2 底部导航栏 ``` ┌─────────────────────────────────────────────────────────────────┐ │ │ │ [ 页面内容区域 ] │ │ │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ 🏠 📤 🔔 👤 │ │ 任务 上传 消息 我的 │ │ │ │ ━━━━━━ ──── ──── ──── │ │ (选中态) (3) │ │ │ └─────────────────────────────────────────────────────────────────┘ 选中态：图标 + 文字变为 Primary Blue (#007AFF) 未选中：图标 + 文字为 Secondary (#86868B) 消息角标：红色圆点徽章显示未读数 ``` ### 7.3 任务列表页 ``` ┌─────────────────────────────────────────────────────────────────┐ │ ◀ 返回 任务中心 ⚙️ │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ [ 全部 ] [ 待提交 ] [ 审核中 ] [ 已完成 ] │ │ ━━━━━━ │ │ │ │ ╭─────────────────────────────────────────────────────────╮ │ │ │ │ │ │ │ 📋 XX品牌 618 推广 │ │ │ │ │ │ │ │ 投放平台：抖音 │ │ │ │ 截止时间：2026-02-15 │ │ │ │ │ │ │ │ ╭────────────╮ │ │ │ │ │ ⚠ 待修改 │ │ │ │ │ ╰────────────╯ │ │ │ │ │ │ │ │ ┌──────────────────────────────────────────────────┐ │ │ │ │ │ 查看修改意见 │ │ │ │ │ └──────────────────────────────────────────────────┘ │ │ │ │ │ │ │ ╰─────────────────────────────────────────────────────────╯ │ │ │ │ ╭─────────────────────────────────────────────────────────╮ │ │ │ 📋 YY品牌 新品发布 │ │ │ │ ... │ │ │ ╰─────────────────────────────────────────────────────────╯ │ │ │ ├─────────────────────────────────────────────────────────────────┤ │ 🏠 📤 🔔 👤 │ └─────────────────────────────────────────────────────────────────┘ ``` ### 7.4 智能上传页 (透明思考 UI) ``` ┌─────────────────────────────────────────────────────────────────┐ │ ◀ 返回 上传视频 │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ ╭─────────────╮ │ │ ╱ ╲ │ │ │ ╭─────╮ │ │ │ │ │ ◐ │ │ AI 正在思考... │ │ │ │ 45% │ │ │ │ │ ╰─────╯ │ │ │ ╲ ╱ │ │ ╰─────────────╯ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ───────────────────────────────────────────────────────── │ │ │ │ 👁️ 正在逐帧检测竞品 Logo... │ │ │ │ ✅ Brief 解析完成 00:05 │ │ ✅ ASR 语音转写完成 00:23 │ │ ◐ Logo 检测中... 进行中 │ │ ○ 语义分析 等待中 │ │ ○ 生成审核报告 等待中 │ │ │ │ ───────────────────────────────────────────────────────── │ │ │ │ 💡 预计还需 2 分钟。您可以先离开， │ │ 结果将通过微信通知您。 │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 离开并稍后查看 │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ ├─────────────────────────────────────────────────────────────────┤ │ ⚠️ 上传中请保持屏幕常亮，切勿锁屏或切换应用 │ └─────────────────────────────────────────────────────────────────┘ ``` **设计要点：** - 中央环形进度，显示整体进度百分比 - 步骤列表实时更新，已完成项显示耗时 - 当前步骤高亮，带动态指示器 - 底部提供"离开"选项，减少用户被困感 - 上传时显示防锁屏提示（Wake Lock API） ### 7.5 审核结果页 ``` ┌─────────────────────────────────────────────────────────────────┐ │ ◀ 返回 审核报告 │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ ╭─────────────────────────────────────────────────────────╮ │ │ │ │ │ │ │ 🔴 未通过 - 存在 2 处硬性违规 │ │ │ │ │ │ │ │ 请根据以下意见修改后重新提交 │ │ │ │ │ │ │ ╰─────────────────────────────────────────────────────────╯ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ ▶ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ │ │ 🔴 🔴 🟡 │ │ │ │ 00:15 00:42 01:28 │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ 修改清单 │ │ ───────────────────────────────────────────────────────── │ │ │ │ ╭─────────────────────────────────────────────────────────╮ │ │ │ 🔴 00:15 广告法违禁词 │ │ │ │ │ │ │ │ 原内容："全网第一的产品" │ │ │ │ │ │ │ │ 💡 建议：改为"深受喜爱"或"销量领先" │ │ │ │ │ │ │ │ ┌────────────┐ ┌────────────┐ │ │ │ │ │ 跳转 │ │ 申诉 │ │ │ │ │ └────────────┘ └────────────┘ │ │ │ ╰─────────────────────────────────────────────────────────╯ │ │ │ │ ╭─────────────────────────────────────────────────────────╮ │ │ │ 🔴 00:42 竞品 Logo 露出 │ │ │ │ │ │ │ │ [截图预览] │ │ │ │ │ │ │ │ 检测到画面中出现竞品 Logo（置信度 92%） │ │ │ │ │ │ │ │ ┌────────────┐ ┌────────────┐ │ │ │ │ │ 跳转 │ │ 申诉 │ │ │ │ │ └────────────┘ └────────────┘ │ │ │ ╰─────────────────────────────────────────────────────────╯ │ │ │ │ ╭─────────────────────────────────────────────────────────╮ │ │ │ 🟡 01:28 舆情风险提示 │ │ │ │ │ │ │ │ AI 检测到可能存在"油腻"风险（建议检查） │ │ │ │ 此为软性提示，不影响通过 │ │ │ │ │ │ │ ╰─────────────────────────────────────────────────────────╯ │ │ │ ├─────────────────────────────────────────────────────────────────┤ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 重新上传 │ │ │ └──────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────┘ ``` **设计要点：** - 顶部结果横幅用语义色背景，一目了然 - 视频进度条上标注问题时间点（红/黄点） - 点击时间点可跳转视频对应位置 - 每条问题提供"跳转"和"申诉"两个操作 - 软性提示明确标注"不影响通过" ### 7.6 申诉弹窗 ``` ┌─────────────────────────────────────────────────────────────────┐ │ │ │ │ │ ╭─────────────────────────────────────────────────────────╮ │ │ │ │ │ │ │ 发起申诉 ✕ │ │ │ │ │ │ │ │ ─────────────────────────────────────────────────── │ │ │ │ │ │ │ │ 问题类型：广告法违禁词 │ │ │ │ 时间点：00:15 │ │ │ │ │ │ │ │ ─────────────────────────────────────────────────── │ │ │ │ │ │ │ │ 申诉理由 * │ │ │ │ ┌─────────────────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ │ │ 请详细说明您的申诉理由（至少10字） │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────────────────────────────┘ │ │ │ │ 0/200 │ │ │ │ │ │ │ │ 上传补充证据（可选） │ │ │ │ ┌──────────┐ │ │ │ │ │ + 添加 │ │ │ │ │ └──────────┘ │ │ │ │ │ │ │ │ ─────────────────────────────────────────────────── │ │ │ │ │ │ │ │ 💡 剩余申诉令牌：2 次 │ │ │ │ 申诉成功后令牌将自动返还 │ │ │ │ │ │ │ │ ┌──────────────────────────────────────────────────┐ │ │ │ │ │ 提交申诉 │ │ │ │ │ └──────────────────────────────────────────────────┘ │ │ │ │ │ │ │ ╰─────────────────────────────────────────────────────────╯ │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` --- ## 8. 代理商端界面设计 (Agency Console) ### 8.1 设计定位 - **核心设备：** 桌面端 (1280px+) - **设计风格：** 高效、专业、信息密集 - **参考：** Apple Developer Console / Notion ### 8.2 侧边栏导航 ``` ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ ┌──────────┐ ┌────────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ SmartAudit│ │ 页面内容区域 │ │ │ │ │ │ │ │ │ ├──────────┤ │ │ │ │ │ │ │ │ │ │ │ 📊 工作台 │ │ │ │ │ │ ━━━━━━━━ │ │ │ │ │ │ │ │ │ │ │ │ 📋 Brief │ │ │ │ │ │ 管理 │ │ │ │ │ │ │ │ │ │ │ │ ✅ 审核台 │ │ │ │ │ │ (12) │ │ │ │ │ │ │ │ │ │ │ │ 👥 达人 │ │ │ │ │ │ 管理 │ │ │ │ │ │ │ │ │ │ │ │ 📈 数据 │ │ │ │ │ │ 报表 │ │ │ │ │ │ │ │ │ │ │ ├──────────┤ │ │ │ │ │ │ │ │ │ │ │ ⚙️ 设置 │ │ │ │ │ │ │ │ │ │ │ │ 张三 │ │ │ │ │ │ 代理商 │ │ │ │ │ │ │ │ │ │ │ └──────────┘ └────────────────────────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────────────────────────────┘ 侧边栏宽度：240px（可折叠为 64px 图标模式） 选中项：左侧 3px Primary Blue 边框 + 浅蓝背景 徽章：审核台显示待处理数量 ``` ### 8.3 工作台 (Dashboard) ``` ┌────────────────────────────────────────────────────────────────────────────┐ │ SmartAudit 🔔 (3) 👤 张三 │ ├──────────┬─────────────────────────────────────────────────────────────────┤ │ │ │ │ 📊 工作台 │ 工作台 │ │ ━━━━━━━━ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ 📋 Brief │ │ │ │ │ 管理 │ │ 待办事项 │ │ │ │ │ │ │ │ ✅ 审核台 │ │ ╭──────────────╮ ╭──────────────╮ ╭──────────────╮ │ │ │ (12) │ │ │ │ │ │ │ │ │ │ │ │ │ │ 12 │ │ 3 │ │ 5 │ │ │ │ 👥 达人 │ │ │ 待人工复核 │ │ 申诉待仲裁 │ │ 超时预警 │ │ │ │ 管理 │ │ │ │ │ │ │ │ │ │ │ │ │ ╰──────────────╯ ╰──────────────╯ ╰──────────────╯ │ │ │ 📈 数据 │ │ │ │ │ 报表 │ └─────────────────────────────────────────────────────────┘ │ │ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ ⚙️ 设置 │ │ │ │ │ │ │ 进行中的项目 │ │ │ │ │ │ │ │ │ │ XX品牌 618 推广 │ │ │ │ │ ████████████████████░░░░░░░░░░░░ 12/20 完成 │ │ │ │ │ │ │ │ │ │ YY品牌 新品发布 │ │ │ │ │ ██████████░░░░░░░░░░░░░░░░░░░░░░ 5/15 完成 │ │ │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ 最近活动 │ │ │ │ │ │ │ │ │ │ 🟢 达人A 的视频已通过审核 5分钟前 │ │ │ │ │ 🔴 达人B 的视频被驳回 12分钟前 │ │ │ │ │ 📋 新 Brief 已上传解析完成 1小时前 │ │ │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ └──────────┴─────────────────────────────────────────────────────────────────┘ ``` ### 8.4 Brief 配置中心 ``` ┌────────────────────────────────────────────────────────────────────────────┐ │ SmartAudit 🔔 (3) 👤 张三 │ ├──────────┬─────────────────────────────────────────────────────────────────┤ │ │ │ │ 📊 工作台 │ Brief 配置中心 │ │ │ │ │ 📋 Brief │ ┌──────────────────────────────────────────────────────────┐ │ │ 管理 │ │ │ │ │ ━━━━━━━━ │ │ ╭─────────────────────────────────────────────────╮ │ │ │ │ │ │ │ │ │ │ ✅ 审核台 │ │ │ 📄 拖拽文件到此处上传 │ │ │ │ │ │ │ │ │ │ │ 👥 达人 │ │ │ 支持 PDF / Word / Excel / PPT / 图片 │ │ │ │ 管理 │ │ │ │ │ │ │ │ │ │ ────────── 或 ────────── │ │ │ │ 📈 数据 │ │ │ │ │ │ │ 报表 │ │ │ ┌───────────┐ ┌───────────────────────┐ │ │ │ │ │ │ │ │ 选择文件 │ │ 粘贴在线文档链接 │ │ │ │ │ │ │ │ └───────────┘ └───────────────────────┘ │ │ │ │ ⚙️ 设置 │ │ │ │ │ │ │ │ │ ╰─────────────────────────────────────────────────╯ │ │ │ │ │ │ │ │ │ │ 投放平台 │ │ │ │ │ ╭────────╮ ╭────────╮ ╭────────╮ ╭────────╮ │ │ │ │ │ │ 抖音 │ │ 小红书 │ │ B站 │ │ 快手 │ │ │ │ │ │ │ ━━━ │ │ │ │ │ │ │ │ │ │ │ │ ╰────────╯ ╰────────╯ ╰────────╯ ╰────────╯ │ │ │ │ │ │ │ │ │ │ 投放区域 │ │ │ │ │ ╭────────────╮ ╭────────────╮ ╭────────────╮ │ │ │ │ │ │ 中国大陆 │ │ 港澳台 │ │ 海外 │ │ │ │ │ │ │ ━━━ │ │ │ │ │ │ │ │ │ │ ╰────────────╯ ╰────────────╯ ╰────────────╯ │ │ │ │ │ │ │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ └──────────┴─────────────────────────────────────────────────────────────────┘ ``` ### 8.5 审核决策台 (核心页面) ``` ┌────────────────────────────────────────────────────────────────────────────┐ │ SmartAudit 🔔 (3) 👤 张三 │ ├──────────┬─────────────────────────────────────────────────────────────────┤ │ │ │ │ 📊 工作台 │ 审核决策台 ⬅️ ➡️ │ │ │ │ │ 📋 Brief │ ┌────────────────────────┬─────────────────────────────────┐ │ │ 管理 │ │ │ │ │ │ │ │ ┌──────────────────┐ │ AI 检查单 │ │ │ ✅ 审核台 │ │ │ │ │ │ │ │ ━━━━━━━━ │ │ │ │ │ 硬性合规 │ │ │ │ │ │ │ │ ───────────────────────────── │ │ │ 👥 达人 │ │ │ 视频播放器 │ │ │ │ │ 管理 │ │ │ │ │ 🔴 00:15 广告法违禁词 │ │ │ │ │ │ │ │ "全网第一" │ │ │ 📈 数据 │ │ │ │ │ [展开详情] │ │ │ 报表 │ │ │ │ │ │ │ │ │ │ └──────────────────┘ │ 🔴 00:42 竞品 Logo 露出 │ │ │ │ │ │ 置信度 92% │ │ │ ⚙️ 设置 │ │ ──────────────────── │ [展开详情] [查看截图] │ │ │ │ │ 🔴 🔴 🟡 │ │ │ │ │ │ ▼ ▼ ▼ │ Brief 完成度 │ │ │ │ │ ░░░░░░░░░░░░░░░░░░░░ │ ───────────────────────────── │ │ │ │ │ 00:00 02:30 │ │ │ │ │ │ │ ✅ 卖点1：美白 │ │ │ │ │ ┌──────────────────┐ │ ✅ 卖点2：补水 │ │ │ │ │ │ │ │ ❌ 卖点3：24小时持妆 (未提及) │ │ │ │ │ │ Brief 参考图 │ │ │ │ │ │ │ │ (画中画悬浮) │ │ 舆情雷达 │ │ │ │ │ │ │ │ ───────────────────────────── │ │ │ │ │ └──────────────────┘ │ │ │ │ │ │ │ 🟡 01:28 油腻风险 (仅提示) │ │ │ │ │ │ 达人表情过于夸张 │ │ │ │ │ │ │ │ │ │ └────────────────────────┴─────────────────────────────────┘ │ │ │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │ │ 驳回 │ │ 强制通过 │ │ 记录特例 │ │ 通过 │ │ │ │ │ │ │ #FF3B30 │ │ #FF9500 │ │ #86868B │ │ #34C759 │ │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ │ │ │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ └──────────┴─────────────────────────────────────────────────────────────────┘ ``` **设计要点：** - 左侧 60%：视频播放器 + 智能进度条（红/黄/绿点） - 右侧 40%：AI 检查单，分为"硬性合规"、"Brief 完成度"、"舆情雷达"三区 - 底部固定操作栏，四个决策按钮 - Brief 参考图可悬浮在视频角落对比 ### 8.6 版本比对视窗 ``` ┌────────────────────────────────────────────────────────────────────────────┐ │ 版本比对 ✕ │ ├────────────────────────────────────────────────────────────────────────────┤ │ │ │ 📊 版本差异报告 │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ V1 版本指出 3 个违规点： ✅ 已修复 2 个 │ ❌ 未修复 1 个 │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌────────────────────────────┬────────────────────────────┐ │ │ │ │ │ │ │ │ V1 版本 │ V2 版本 │ │ │ │ │ │ │ │ │ ┌──────────────────────┐ │ ┌──────────────────────┐ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ 视频播放器 │ │ │ 视频播放器 │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └──────────────────────┘ │ └──────────────────────┘ │ │ │ │ │ │ │ │ │ ░░░░░░░░░░░░░░░░░░░░░░░░ │ ░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ │ │ 🔴 🔴 🟡 │ 🟢 🟢 🔴 │ │ │ │ │ │ │ │ └────────────────────────────┴────────────────────────────┘ │ │ │ │ 修改点对比 │ │ ───────────────────────────────────────────────────────────────────── │ │ │ │ ╭───────────────────────────────────────────────────────────────────╮ │ │ │ 00:15 广告法违禁词 ✅ 已修复 │ │ │ │ V1: "全网第一" → V2: "销量领先" │ │ │ ╰───────────────────────────────────────────────────────────────────╯ │ │ │ │ ╭───────────────────────────────────────────────────────────────────╮ │ │ │ 00:42 竞品 Logo 露出 ✅ 已修复 │ │ │ │ V1: 可见 → V2: 已遮挡 │ │ │ ╰───────────────────────────────────────────────────────────────────╯ │ │ │ │ ╭───────────────────────────────────────────────────────────────────╮ │ │ │ 01:28 卖点遗漏 ❌ 未修复 │ │ │ │ 仍未提及"24小时持妆" │ │ │ ╰───────────────────────────────────────────────────────────────────╯ │ │ │ │ ┌──────────────────────────────────────────────────────────────────────┐│ │ │ 快速通过 ││ │ └──────────────────────────────────────────────────────────────────────┘│ │ │ └────────────────────────────────────────────────────────────────────────────┘ ``` --- ## 9. 品牌方端界面设计 (Brand Admin) ### 9.1 设计定位 - **核心设备：** 桌面端 (1280px+) - **设计风格：** 监管视角、数据驱动、风险预警 - **参考：** Apple Business Manager / Analytics Dashboard ### 9.2 数据看板 ``` ┌────────────────────────────────────────────────────────────────────────────┐ │ SmartAudit 🔔 (3) 👤 王总 │ ├──────────┬─────────────────────────────────────────────────────────────────┤ │ │ │ │ 📊 数据 │ 数据看板 本月 ▼ 导出报告 ▼ │ │ 看板 │ │ │ ━━━━━━━━ │ ┌───────────┬───────────┬───────────┬───────────┬───────────┐│ │ │ │ │ │ │ │ ││ │ 🛡️ 规则 │ │ 1,234 │ 78.5% │ 96.2% │ 23 │ 4.2 小时 ││ │ 配置 │ │ │ │ │ │ ││ │ │ │ 审核总量 │ 初审通过率 │ 硬性召回率 │ 舆情拦截 │ 平均周期 ││ │ 📋 审计 │ │ ↑12% │ ↑5.2% │ 目标≥95% │ ↓18% │ 目标≤5分钟││ │ 日志 │ │ │ │ │ │ ││ │ │ └───────────┴───────────┴───────────┴───────────┴───────────┘│ │ 👥 代理商 │ │ │ 管理 │ ┌─────────────────────────────┬─────────────────────────────┐│ │ │ │ │ ││ │ 🔔 舆情 │ │ 审核量与通过率趋势 │ 问题类型分布 ││ │ 预警 │ │ │ ││ │ │ │ ╱╲ ╱╲ │ ╭─────╮ ││ │ ⚙️ 系统 │ │ ╱ ╲ ╱ ╲ ╱╲ │ ╱ 违禁词╲ ││ │ 设置 │ │ ╱ ╲╱ ╲ ╱ ╲ │ │ 35% │ ││ │ │ │ ╱ ╲╱ ╲ │ ╲_______╱ 竞品 25% ││ │ │ │ ───────────────────── │ 舆情 20% 卖点 20% ││ │ │ │ 1月 2月 3月 4月 5月 │ ││ │ │ │ │ ││ │ │ └─────────────────────────────┴─────────────────────────────┘│ │ │ │ │ │ ┌────────────────────────────────────────────────────────────┐│ │ │ │ ││ │ │ │ 风险预警 ││ │ │ │ ││ │ │ │ 🔴 紧急 代理商A 24小时内 5 条视频触发"竞品露出"，请关注 ││ │ │ │ 🟠 关注 达人B 连续 3 次提交未通过，建议沟通 ││ │ │ │ 🟡 舆情 本周舆情拦截数异常上升 (+45%) ││ │ │ │ ││ │ │ └────────────────────────────────────────────────────────────┘│ │ │ │ └──────────┴─────────────────────────────────────────────────────────────────┘ ``` ### 9.3 规则配置 ``` ┌────────────────────────────────────────────────────────────────────────────┐ │ SmartAudit 🔔 (3) 👤 王总 │ ├──────────┬─────────────────────────────────────────────────────────────────┤ │ │ │ │ 📊 数据 │ 规则配置 │ │ 看板 │ │ │ │ [ 黑白名单 ] [ 竞品库 ] [ 舆情阈值 ] [ 版本管理 ] │ │ 🛡️ 规则 │ ━━━━━━━ │ │ 配置 │ │ │ ━━━━━━━━ │ ┌────────────────────────────────────────────────────────────┐│ │ │ │ ││ │ 📋 审计 │ │ 禁用词库 + 添加词条 ││ │ 日志 │ │ ││ │ │ │ ┌─────────────────────────────────────────────────────┐ ││ │ 👥 代理商 │ │ │ │ ││ │ 管理 │ │ │ 分类筛选： [ 全部 ] [ 广告法 ] [ 平台 ] [ 私有 ] │ ││ │ │ │ │ │ ││ │ 🔔 舆情 │ │ │ ╭──────────────────────────────────────────────╮ │ ││ │ 预警 │ │ │ │ 全网第一 广告法 系统内置 ✕ │ │ ││ │ │ │ │ ╰──────────────────────────────────────────────╯ │ ││ │ ⚙️ 系统 │ │ │ ╭──────────────────────────────────────────────╮ │ ││ │ 设置 │ │ │ │ 最好的 广告法 系统内置 ✕ │ │ ││ │ │ │ │ ╰──────────────────────────────────────────────╯ │ ││ │ │ │ │ ╭──────────────────────────────────────────────╮ │ ││ │ │ │ │ │ 独家 平台规则 抖音 ✕ │ │ ││ │ │ │ │ ╰──────────────────────────────────────────────╯ │ ││ │ │ │ │ ╭──────────────────────────────────────────────╮ │ ││ │ │ │ │ │ 竞品A 品牌私有 自定义 ✕ │ │ ││ │ │ │ │ ╰──────────────────────────────────────────────╯ │ ││ │ │ │ │ │ ││ │ │ │ └─────────────────────────────────────────────────────┘ ││ │ │ │ ││ │ │ │ 白名单 + 添加词条 ││ │ │ │ ───────────────────────────────────────────────────── ││ │ │ │ ││ │ │ │ ╭──────────────────────────────────────────────────────╮ ││ │ │ │ │ 我们的产品 允许达人使用此表述 ✕ │ ││ │ │ │ ╰──────────────────────────────────────────────────────╯ ││ │ │ │ ││ │ │ └────────────────────────────────────────────────────────────┘│ │ │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ │ 保存更改 │ │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ └──────────┴─────────────────────────────────────────────────────────────────┘ ``` --- ## 10. AI 服务配置界面 (AI Configuration) ### 10.1 设计定位 - **所属角色：** 品牌方管理员（Brand Admin） - **入口位置：** 品牌方端侧边栏「系统设置」→「AI 服务配置」 - **核心功能：** 配置 AI 提供商、模型选择、连接参数 - **权限控制：** 仅品牌管理员可见和操作 ### 10.2 界面布局 ``` ┌────────────────────────────────────────────────────────────────────────────┐ │ SmartAudit 🔔 (3) 👤 王总 │ ├──────────┬─────────────────────────────────────────────────────────────────┤ │ │ │ │ 📊 数据 │ AI 服务配置 │ │ 看板 │ │ │ │ ┌────────────────────────────────────────────────────────────┐│ │ 🛡️ 规则 │ │ ││ │ 配置 │ │ AI 提供商 ││ │ │ │ ┌──────────────────────────────────────────────────────┐ ││ │ 📋 审计 │ │ │ OneAPI 中转服务 ▼ │ ││ │ 日志 │ │ └──────────────────────────────────────────────────────┘ ││ │ │ │ 💡 支持 OneAPI、Anthropic Claude、OpenAI、DeepSeek 等 ││ │ 👥 代理商 │ │ ││ │ 管理 │ │ ───────────────────────────────────────────────────── ││ │ │ │ ││ │ 🔔 舆情 │ │ 模型配置 ││ │ 预警 │ │ ││ │ │ │ 文字处理模型 (LLM) ││ │ ⚙️ 系统 │ │ ┌──────────────────────────────────────────────────────┐ ││ │ 设置 │ │ │ claude-opus-4-5-20251101 ▼ │ ││ │ ━━━━━━━━ │ │ └──────────────────────────────────────────────────────┘ ││ │ │ │ 用于 Brief 解析、语义分析、报告生成 ││ │ └ 🤖 AI │ │ ││ │ 配置 │ │ 视频分析模型 (Vision) ││ │ ━━━━━━ │ │ ┌──────────────────────────────────────────────────────┐ ││ │ │ │ │ doubao-seed-1.6-thinking-vision ▼ │ ││ │ │ │ └──────────────────────────────────────────────────────┘ ││ │ │ │ 用于 Logo 检测、画面分析、竞品识别 ││ │ │ │ ││ │ │ │ 音频解析模型 (ASR) ││ │ │ │ ┌──────────────────────────────────────────────────────┐ ││ │ │ │ │ whisper-large-v3 ▼ │ ││ │ │ │ └──────────────────────────────────────────────────────┘ ││ │ │ │ 用于语音转文字、口播内容提取 ││ │ │ │ ││ │ │ └────────────────────────────────────────────────────────────┘│ │ │ │ └──────────┴─────────────────────────────────────────────────────────────────┘ ``` ### 10.3 连接配置区域 ``` ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ 连接配置 │ │ │ │ │ │ │ │ Base URL │ │ │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ │ │ https://oneapi.intelligrow.cn │ │ │ │ │ └──────────────────────────────────────────────────────────────┘ │ │ │ │ API 服务端点地址，需支持 OpenAI 兼容接口 │ │ │ │ │ │ │ │ API Key │ │ │ │ ┌──────────────────────────────────────────────────────┐ ┌────┐ │ │ │ │ │ sk-•••••••••••••••••••••••••••••••• │ │ 👁️ │ │ │ │ │ └──────────────────────────────────────────────────────┘ └────┘ │ │ │ │ API 密钥将加密存储，仅用于后端调用 │ │ │ │ │ │ │ │ ───────────────────────────────────────────────────────────── │ │ │ │ │ │ │ │ 生成参数 │ │ │ │ │ │ │ │ Temperature │ │ │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ │ │ ░░░░░░░░░░░░░░░░░░░░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ │ │ │ │ 0 0.7 1.0 │ │ │ │ │ └──────────────────────────────────────────────────────────────┘ │ │ │ │ 控制输出的随机性。0 = 确定性输出，1 = 高创意性 │ │ │ │ │ │ │ │ Max Tokens │ │ │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ │ │ 2000 │ │ │ │ │ └──────────────────────────────────────────────────────────────┘ │ │ │ │ 单次请求的最大输出 token 数量 │ │ │ │ │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ ┌───────────────┐ ┌───────────────┐ │ │ │ │ │ 测试连接 │ │ 保存 │ │ │ │ │ │ #F5F5F7 │ │ #007AFF │ │ │ │ │ └───────────────┘ └───────────────┘ │ │ │ │ │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────────────────────────────┘ ``` ### 10.4 测试连接结果弹窗 ``` ┌─────────────────────────────────────────────────────────────────┐ │ │ │ 测试连接结果 ✕ │ │ │ │ ─────────────────────────────────────────────────────────── │ │ │ │ ╭─────────────────────────────────────────────────────────╮ │ │ │ │ │ │ │ ✅ 文字处理模型 (LLM) │ │ │ │ claude-opus-4-5-20251101 │ │ │ │ 响应时间: 1.2s │ │ │ │ │ │ │ ╰─────────────────────────────────────────────────────────╯ │ │ │ │ ╭─────────────────────────────────────────────────────────╮ │ │ │ │ │ │ │ ✅ 视频分析模型 (Vision) │ │ │ │ doubao-seed-1.6-thinking-vision │ │ │ │ 响应时间: 0.8s │ │ │ │ │ │ │ ╰─────────────────────────────────────────────────────────╯ │ │ │ │ ╭─────────────────────────────────────────────────────────╮ │ │ │ │ │ │ │ ✅ 音频解析模型 (ASR) │ │ │ │ whisper-large-v3 │ │ │ │ 响应时间: 0.5s │ │ │ │ │ │ │ ╰─────────────────────────────────────────────────────────╯ │ │ │ │ ─────────────────────────────────────────────────────────── │ │ │ │ 🎉 所有模型连接正常！ │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 确定 │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` ### 10.5 测试失败状态 ``` ┌─────────────────────────────────────────────────────────────────┐ │ │ │ 测试连接结果 ✕ │ │ │ │ ─────────────────────────────────────────────────────────── │ │ │ │ ╭─────────────────────────────────────────────────────────╮ │ │ │ │ │ │ │ ✅ 文字处理模型 (LLM) │ │ │ │ claude-opus-4-5-20251101 │ │ │ │ 响应时间: 1.2s │ │ │ │ │ │ │ ╰─────────────────────────────────────────────────────────╯ │ │ │ │ ╭─────────────────────────────────────────────────────────╮ │ │ │ │ │ │ │ ❌ 视频分析模型 (Vision) │ │ │ │ doubao-seed-1.6-thinking-vision │ │ │ │ │ │ │ │ 错误: 模型不存在或无访问权限 │ │ │ │ 请确认模型名称正确且 API Key 有访问权限 │ │ │ │ │ │ │ ╰─────────────────────────────────────────────────────────╯ │ │ │ │ ╭─────────────────────────────────────────────────────────╮ │ │ │ │ │ │ │ ✅ 音频解析模型 (ASR) │ │ │ │ whisper-large-v3 │ │ │ │ 响应时间: 0.5s │ │ │ │ │ │ │ ╰─────────────────────────────────────────────────────────╯ │ │ │ │ ─────────────────────────────────────────────────────────── │ │ │ │ ⚠️ 部分模型连接失败，请检查配置后重试 │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 确定 │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` ### 10.6 组件规格 | 组件 | 规格 | 说明 | | --- | --- | --- | | **AI 提供商下拉** | 高度 44px，圆角 12px | 下拉选项：OneAPI / Anthropic / OpenAI / DeepSeek / 自定义 | | **模型选择下拉** | 高度 44px，圆角 12px | 动态从 API 获取可用模型列表 | | **Base URL 输入** | 高度 44px，圆角 12px | 默认显示 placeholder | | **API Key 输入** | 高度 44px，圆角 12px | 密码模式，带显示/隐藏切换按钮 | | **Temperature 滑块** | 高度 8px，滑块 24px | 范围 0-1，步进 0.1 | | **Max Tokens 输入** | 高度 44px，圆角 12px | 数字输入，范围 100-32000 | | **测试连接按钮** | 高度 44px，圆角 12px | Secondary 样式 (#F5F5F7) | | **保存按钮** | 高度 44px，圆角 12px | Primary 样式 (#007AFF) | ### 10.7 交互说明 | 交互 | 行为 | | --- | --- | | **切换 AI 提供商** | 自动填充该提供商的默认 Base URL；清空并重新获取模型列表 | | **获取模型列表** | 输入 Base URL 和 API Key 后，调用 `/v1/models` 接口获取可用模型 | | **显示/隐藏 API Key** | 点击眼睛图标切换密码显示/隐藏状态 | | **拖动 Temperature 滑块** | 实时显示当前数值 | | **点击测试连接** | 并行测试三个模型，弹窗显示结果；按钮显示加载状态 | | **点击保存** | 表单验证通过后保存配置；成功显示 Toast 提示 | ### 10.8 表单验证规则 | 字段 | 验证规则 | 错误提示 | | --- | --- | --- | | **AI 提供商** | 必选 | 请选择 AI 提供商 | | **文字处理模型** | 必选 | 请选择文字处理模型 | | **视频分析模型** | 必选 | 请选择视频分析模型 | | **音频解析模型** | 必选 | 请选择音频解析模型 | | **Base URL** | 必填，URL 格式 | 请输入有效的 API 地址 | | **API Key** | 必填，以 `sk-` 开头 | 请输入有效的 API Key | | **Temperature** | 0-1 之间 | Temperature 必须在 0-1 之间 | | **Max Tokens** | 100-32000 之间的整数 | Max Tokens 必须在 100-32000 之间 | ### 10.9 状态说明 | 状态 | 说明 | | --- | --- | | **未配置** | 首次进入，所有字段为空，提示"请配置 AI 服务以启用智能审核功能" | | **已配置** | 显示已保存的配置，API Key 以掩码形式显示 | | **加载模型列表中** | 模型下拉框显示加载指示器 | | **测试连接中** | 测试按钮显示 Spinner，禁用保存按钮 | | **保存中** | 保存按钮显示 Spinner | --- ## 11. 动效规范 (Motion Design) ### 10.1 动效原则 | 原则 | 说明 | | --- | --- | | **目的性** | 动效服务于功能，非装饰 | | **自然** | 遵循物理规律，缓入缓出 | | **快速** | 保持流畅，不阻塞操作 | | **一致** | 相似交互使用相同动效 | ### 10.2 缓动曲线 ```css /* 标准缓动 - 用于大多数过渡 */ --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* 减速缓动 - 用于进入动画 */ --ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1); /* 加速缓动 - 用于退出动画 */ --ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1); /* 弹性缓动 - 用于强调动画 */ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); ``` ### 10.3 时长规范 | 动效类型 | 时长 | 用途 | | --- | --- | --- | | **Micro** | 100ms | 按钮状态、图标变化 | | **Short** | 200ms | 下拉菜单、提示框 | | **Medium** | 300ms | 模态框、卡片展开 | | **Long** | 500ms | 页面切换、复杂动画 | ### 10.4 特殊动效 | 场景 | 动效描述 | | --- | --- | | **AI 思考中** | 环形进度 + 柔和脉冲波纹 (使用 AI Purple) | | **上传进度** | 线性进度条 + 数字跳动 | | **审核通过** | 绿色对勾 ✓ 从中心放大弹出 (ease-bounce) | | **审核驳回** | 红色叉号 ✕ 轻微震动 | | **申诉成功** | 彩色纸屑动效 (Confetti) | --- ## 12. 图标系统 (Iconography) ### 11.1 图标风格 - **线条粗细：** 1.5px (与 SF Symbols 一致) - **圆角：** 与组件圆角保持一致 - **尺寸：** 16px / 20px / 24px / 32px - **颜色：** 继承文字颜色或使用语义色 ### 11.2 核心图标清单 | 图标 | 名称 | 用途 | | --- | --- | --- | | 📊 | chart-bar | 数据看板 | | 📋 | document | Brief / 任务 | | ✅ | checkmark-circle | 通过 / 完成 | | ❌ | xmark-circle | 驳回 / 错误 | | ⚠️ | exclamation-triangle | 警告 / 风险 | | 🔍 | magnifying-glass | 搜索 / 检测中 | | 👁️ | eye | 查看 / Logo 检测 | | 🧠 | brain | AI / 语义分析 | | 📤 | arrow-up-doc | 上传 | | 📥 | arrow-down-doc | 下载 / 导出 | | 🔔 | bell | 通知 | | ⚙️ | gear | 设置 | | 👤 | person | 用户 / 达人 | | 👥 | person-2 | 团队 / 代理商 | | 🛡️ | shield | 品牌方 / 规则 | --- ## 13. 无障碍设计 (Accessibility) ### 12.1 色彩对比度 | 组合 | 对比度 | 合规等级 | | --- | --- | --- | | Dark (#1D1D1F) on White (#FFFFFF) | 16.1:1 | AAA | | Secondary (#86868B) on White (#FFFFFF) | 4.6:1 | AA | | Primary (#007AFF) on White (#FFFFFF) | 4.5:1 | AA | | White (#FFFFFF) on Primary (#007AFF) | 4.5:1 | AA | ### 12.2 键盘导航 - 所有交互元素可通过 Tab 键访问 - Enter/Space 触发主要操作 - Escape 关闭模态框 - 方向键在列表中导航 ### 12.3 屏幕阅读器 - 所有图标提供 `aria-label` - 状态变化通过 `aria-live` 通知 - 表单元素关联 `