322 lines
14 KiB
Markdown
322 lines
14 KiB
Markdown
# RPA工作站风格主题
|
||
|
||
## 1. 主题来源
|
||
- 产品依据：`PRD.md`。
|
||
- 风格依据：`taobao-open-style-card.md`。
|
||
- 生成日期：2026-06-26。
|
||
- 主题目标：把淘宝开放平台的“深色技术导航 + 白底业务入口 + 蓝色交互高亮”转译为 RPA 工作站的“本地优先、可审计、可托管、专业工具型桌面产品”视觉系统。
|
||
|
||
## 2. 一句话主题定位
|
||
深色技术控制台骨架 + 靛蓝/技术蓝高亮 + 白底高密度业务面板，表达本地 AI + RPA 的可信托管、显式授权、审计可追溯和桌面工具效率。
|
||
|
||
## 3. 设计原则
|
||
1. **专业克制**：遵循 PRD 的“专业、克制、工具型、低饱和科技感”，避免消费营销感和高饱和橙色。
|
||
2. **安全优先**：托管、权限、高风险动作使用更高对比度的阻断层和语义色，不用纯装饰动效稀释风险。
|
||
3. **本地可信**：以深 Slate 导航和低亮蓝色状态表达“本地运行、可控、稳定”。
|
||
4. **高信息密度**：知识库、AI 员工、任务、审计日志以表格、状态 chip、紧凑卡片呈现。
|
||
5. **显式授权**：所有权限、托管、AI 员工操作范围都要有清晰边界、标题、说明和取消路径。
|
||
6. **桌面优先**：主窗口固定左侧导航 + 右侧内容，壳内滚动，适配 Windows/Mac 桌面壳。
|
||
|
||
## 4. 风格关键词
|
||
- **本地技术控制台**：沿用淘宝开放平台 `#373942` 深色技术导航，但转为桌面左侧窄栏。
|
||
- **靛蓝 AI 感**：PRD 指定蓝紫/靛蓝主色，覆盖主按钮、激活导航、托管进度、关键动作。
|
||
- **技术蓝辅助**：继承淘宝开放平台 `#5eb5fe` 作为链接、图标 hover、信息型高亮。
|
||
- **白底数据面板**：工作台、知识库、AI 员工、自动化任务保留白底卡片与细分割线，提升可读性。
|
||
- **低圆角工具感**：比当前原型的超大圆角更收敛；桌面壳保留平台特征，业务组件使用 8–14px 圆角。
|
||
- **审计可追溯**：日志、权限、任务状态使用表格化、时间线化、可筛选的视觉模式。
|
||
|
||
## 5. 配色系统
|
||
|
||
### 5.1 核心色
|
||
| Token | Hex | 用途 | 来源/理由 |
|
||
|---|---:|---|---|
|
||
| `--rpa-primary` | `#4f46e5` | 主按钮、激活状态、关键流程 | PRD 指定蓝紫/靛蓝方向 |
|
||
| `--rpa-primary-hover` | `#4338ca` | 主按钮 hover/pressed | 靛蓝加深，适合桌面工具 |
|
||
| `--rpa-primary-soft` | `#eef2ff` | 主色浅底、选中卡片背景 | 保持低饱和科技感 |
|
||
| `--rpa-tech-blue` | `#5eb5fe` | 链接、图标 hover、信息强调 | 淘宝开放平台交互蓝 |
|
||
| `--rpa-tech-blue-hover` | `#6cb5f4` | 次级链接 hover | 淘宝开放平台 hover 蓝 |
|
||
| `--rpa-nav-bg` | `#373942` | 左侧导航背景、托管深色面板 | 淘宝开放平台技术导航 |
|
||
| `--rpa-nav-panel` | `#2b2d34` | 导航 hover/active 深色底 | 淘宝开放平台菜单面板 |
|
||
| `--rpa-hosting-bg` | `#0a091e` | RPA 托管遮罩核心面板 | 淘宝开放平台 Hero 深底 |
|
||
|
||
### 5.2 中性色
|
||
| Token | Hex | 用途 |
|
||
|---|---:|---|
|
||
| `--rpa-bg` | `#f7f8fa` | 应用内容区背景 |
|
||
| `--rpa-surface` | `#ffffff` | 卡片、表格、模态主体 |
|
||
| `--rpa-surface-subtle` | `#f3f4f6` | 次级分组、输入背景 |
|
||
| `--rpa-border` | `#e6e6e6` | 表格线、卡片边框、公告分割 |
|
||
| `--rpa-border-strong` | `#cbd5e1` | 输入框、可交互边框 |
|
||
| `--rpa-text` | `#333333` | 主文本 |
|
||
| `--rpa-heading` | `#1f2937` | 标题、页面 Header |
|
||
| `--rpa-muted` | `#666666` | 描述、公告、表格次级文本 |
|
||
| `--rpa-subtle` | `#7c7c7c` | 弱提示、空状态补充 |
|
||
| `--rpa-inverse` | `#e5e9ee` | 深色导航文字 |
|
||
| `--rpa-inverse-muted` | `#a3a3a3` | 深色导航次级文字 |
|
||
|
||
### 5.3 语义色
|
||
| Token | Hex | 场景 |
|
||
|---|---:|---|
|
||
| `--rpa-success` | `#4ab933` | ready、模型在线、检测通过 |
|
||
| `--rpa-success-bg` | `#edffe9` | 成功 toast / 成功 chip 背景 |
|
||
| `--rpa-info` | `#28a3ef` | indexing、处理中、普通信息 |
|
||
| `--rpa-info-bg` | `#eef8ff` | 信息提示浅底 |
|
||
| `--rpa-warning` | `#f59e0b` | waiting_user、需手动处理、高风险前置提醒 |
|
||
| `--rpa-warning-bg` | `#fffbeb` | 警告浅底 |
|
||
| `--rpa-danger` | `#d44044` | failed、停止托管、高风险取消 |
|
||
| `--rpa-danger-bg` | `#fff2f2` | 错误与阻断提示背景 |
|
||
| `--rpa-danger-border` | `#ffe3e0` | 错误边框 |
|
||
|
||
## 6. CSS 主题 Tokens
|
||
```css
|
||
:root {
|
||
color-scheme: light;
|
||
|
||
--rpa-primary: #4f46e5;
|
||
--rpa-primary-hover: #4338ca;
|
||
--rpa-primary-soft: #eef2ff;
|
||
--rpa-tech-blue: #5eb5fe;
|
||
--rpa-tech-blue-hover: #6cb5f4;
|
||
|
||
--rpa-nav-bg: #373942;
|
||
--rpa-nav-panel: #2b2d34;
|
||
--rpa-nav-border: #383a45;
|
||
--rpa-hosting-bg: #0a091e;
|
||
|
||
--rpa-bg: #f7f8fa;
|
||
--rpa-surface: #ffffff;
|
||
--rpa-surface-subtle: #f3f4f6;
|
||
--rpa-border: #e6e6e6;
|
||
--rpa-border-strong: #cbd5e1;
|
||
|
||
--rpa-text: #333333;
|
||
--rpa-heading: #1f2937;
|
||
--rpa-muted: #666666;
|
||
--rpa-subtle: #7c7c7c;
|
||
--rpa-inverse: #e5e9ee;
|
||
--rpa-inverse-muted: #a3a3a3;
|
||
|
||
--rpa-success: #4ab933;
|
||
--rpa-success-bg: #edffe9;
|
||
--rpa-success-border: #dcf9d6;
|
||
--rpa-info: #28a3ef;
|
||
--rpa-info-bg: #eef8ff;
|
||
--rpa-warning: #f59e0b;
|
||
--rpa-warning-bg: #fffbeb;
|
||
--rpa-danger: #d44044;
|
||
--rpa-danger-bg: #fff2f2;
|
||
--rpa-danger-border: #ffe3e0;
|
||
|
||
--rpa-font-sans: Inter, Arial, "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
--rpa-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
|
||
|
||
--rpa-text-xs: 12px;
|
||
--rpa-text-sm: 14px;
|
||
--rpa-text-md: 16px;
|
||
--rpa-text-lg: 18px;
|
||
--rpa-text-xl: 20px;
|
||
--rpa-text-2xl: 24px;
|
||
--rpa-text-3xl: 32px;
|
||
|
||
--rpa-space-1: 4px;
|
||
--rpa-space-2: 8px;
|
||
--rpa-space-3: 12px;
|
||
--rpa-space-4: 16px;
|
||
--rpa-space-6: 24px;
|
||
--rpa-space-8: 32px;
|
||
--rpa-space-12: 48px;
|
||
|
||
--rpa-radius-xs: 4px;
|
||
--rpa-radius-sm: 8px;
|
||
--rpa-radius-md: 12px;
|
||
--rpa-radius-lg: 16px;
|
||
--rpa-radius-shell: 28px;
|
||
|
||
--rpa-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06);
|
||
--rpa-shadow-float: 0 8px 24px rgba(15, 23, 42, 0.14);
|
||
--rpa-shadow-menu: 1px 1px 5px rgba(0, 0, 0, 0.45);
|
||
--rpa-shadow-blocking: 0 24px 60px rgba(0, 0, 0, 0.35);
|
||
|
||
--rpa-sidebar-width: 92px;
|
||
--rpa-header-height: 80px;
|
||
--rpa-control-height: 40px;
|
||
--rpa-hit-target: 32px;
|
||
--rpa-transition-fast: 0.18s ease-out;
|
||
--rpa-transition-normal: 0.28s ease-in-out;
|
||
}
|
||
```
|
||
|
||
## 7. 字体与字号规则
|
||
| 层级 | Size | Weight | Line-height | 用途 |
|
||
|---|---:|---:|---:|---|
|
||
| Display | 32px | 700 | 1.2 | 销售演示标题、核心闭环页标题 |
|
||
| Page Title | 24px | 650 | 1.25 | 页面 Header 标题 |
|
||
| Section Title | 20px | 600 | 1.35 | 卡片组、表格区标题 |
|
||
| Card Title | 16px | 600 | 1.45 | 状态卡、设置分组 |
|
||
| Body | 14px | 400 | 1.6 | 表格、说明、表单正文 |
|
||
| Dense Label | 12px | 500 | 1.4 | chip、状态、表格辅助信息 |
|
||
| Log / Code | 12–13px | 400/500 | 1.6 | 托管日志、错误码、bounds、API Key 脱敏字段 |
|
||
|
||
规则：不继承淘宝开放平台 `12px` 全局正文；RPA 工作站按 PRD 字号阶梯提升正文可读性，12px 只用于辅助标签。
|
||
|
||
## 8. 布局系统
|
||
|
||
### 主窗口
|
||
- Shell：Windows/Mac 外壳固定，壳内业务区域 `flex flex-col overflow-hidden`。
|
||
- 左侧导航：`92px`，深色 `--rpa-nav-bg`，符合 PRD `80–100px`。
|
||
- Header：`80px`，白底，左侧标题/摘要，右侧状态 chip。
|
||
- 内容区：`min-h-0 flex-1 overflow-y-auto`，背景 `--rpa-bg`。
|
||
|
||
### 页面布局
|
||
- 工作台：3 张状态卡 + 快速入口 + 核心闭环步骤条。
|
||
- 知识库 / AI 员工 / 自动化任务：工具栏 + 表格 + 详情/弹窗。
|
||
- 标注应用：应用概览卡 + 四 Tab + 节点表格。
|
||
- 设置：双列分组卡，诊断/备份/许可证保持可扫描。
|
||
|
||
### 密度
|
||
- 页面外边距：24px。
|
||
- 卡片间距：16px 或 24px。
|
||
- 表格行高：48–56px。
|
||
- 控件高度：普通 40px，紧凑 chip 28–32px。
|
||
|
||
## 9. 组件主题规则
|
||
|
||
### 左侧导航
|
||
- 背景：`--rpa-nav-bg`。
|
||
- 默认文字/icon：`--rpa-inverse-muted`。
|
||
- hover：背景 `rgba(255,255,255,.08)`，icon `--rpa-tech-blue`。
|
||
- active：背景 `--rpa-primary`，文字白色，阴影 `0 8px 20px rgba(79,70,229,.25)`。
|
||
- 底部状态：深色面 `--rpa-nav-panel`，在线点 `--rpa-success`，托管中改为 `--rpa-warning`。
|
||
|
||
### Header 状态 Chip
|
||
- 模型在线：success。
|
||
- RPA 空闲：neutral。
|
||
- RPA 托管中：warning 或 primary breathing dot。
|
||
- 本地模式：info。
|
||
- 试用 14天：warning soft。
|
||
|
||
### Card
|
||
- 背景：`--rpa-surface`。
|
||
- 边框：`1px solid --rpa-border`。
|
||
- 圆角：12–16px。
|
||
- 阴影：`--rpa-shadow-card`，hover 可略微上浮但不改变布局。
|
||
- 标题：16px/600，icon 使用 `--rpa-primary` 或页面语义色。
|
||
|
||
### Table
|
||
- 表头：`--rpa-surface-subtle`，12px/500，文字 `--rpa-muted`。
|
||
- 行分割：`--rpa-border`。
|
||
- hover：`#f8fafc`。
|
||
- 状态列必须用 chip + 文本，不只靠颜色。
|
||
- 错误码使用 mono 字体和浅红底。
|
||
|
||
### Button
|
||
- Primary：`--rpa-primary`，hover `--rpa-primary-hover`，高度 40px，圆角 10–12px。
|
||
- Secondary：白底 + `--rpa-border-strong`，hover `--rpa-surface-subtle`。
|
||
- Danger：`--rpa-danger`，仅用于停止托管、高风险取消、失败重试危险动作。
|
||
- Link：`--rpa-tech-blue`，hover `--rpa-tech-blue-hover`。
|
||
|
||
### Modal / Blocking Overlay
|
||
- 必须限制在 shell 内容区内。
|
||
- Scrim：`rgba(10,9,30,.55)`，取自 Hero 深色。
|
||
- 主体：白底，16px 圆角，`--rpa-shadow-blocking`。
|
||
- 阻断操作必须有取消路径。
|
||
- 高风险确认标题使用 danger，说明包含“原因 + 后果 + 恢复/取消方式”。
|
||
|
||
### RPA 托管遮罩
|
||
- 背景：`--rpa-hosting-bg` + 90% opacity。
|
||
- 面板：深色 `#111827` 或 `--rpa-nav-panel`。
|
||
- 进度：`--rpa-primary` 到 `--rpa-tech-blue` 渐变。
|
||
- 日志：mono 字体，深色日志区，时间戳弱化，当前动作高亮。
|
||
- 停止按钮：danger 实心，视觉优先级高于“下一步动作”。
|
||
|
||
### 标注遮罩
|
||
- Scrim：深色半透明，主窗口“退后”。
|
||
- 框选矩形：边框 `--rpa-primary`，填充 `rgba(79,70,229,.16)`。
|
||
- 当前 bounds：mono 字体，浅色信息底。
|
||
- 保存失败：danger soft，必须显示原因和恢复动作。
|
||
|
||
### Toast / Notification
|
||
- 成功：复用淘宝开放平台 success `#edffe9 / #4ab933`。
|
||
- 错误：复用 `#fff2f2 / #d44044`。
|
||
- 位置：壳内右上角，不能挂到 body。
|
||
- 动效：opacity + translateY，180–240ms。
|
||
|
||
## 10. 页面级主题映射
|
||
|
||
| 页面 | 主视觉重点 | 推荐主色 | 组件重点 |
|
||
|---|---|---|---|
|
||
| 工作台 | 环境、资产、执行三态 | Primary + success/info/warning | 状态卡、快速入口、闭环步骤条 |
|
||
| 首次配置 | 检查与恢复 | Info + warning | 步骤侧栏、权限列表、恢复动作区 |
|
||
| 知识库 | 可索引、可授权、可审计 | Tech blue | 表格、权限 badge、索引状态 |
|
||
| AI 员工 | 角色与授权边界 | Primary | 员工表格、启动确认、权限说明 |
|
||
| 标注应用 | 视觉节点与框选 | Primary + tech blue | Tab、节点表、标注遮罩 |
|
||
| 自动化任务 | 状态机、托管、安全 | Hosting dark + danger | 任务表、托管遮罩、审计日志 |
|
||
| 设置 | 本地配置与诊断 | Neutral + info | 分组卡、表单、诊断按钮 |
|
||
|
||
## 11. 状态色映射
|
||
|
||
### 知识库索引状态
|
||
- `pending`：info soft。
|
||
- `indexing`：warning soft + spinner。
|
||
- `ready`：success soft。
|
||
- `failed`：danger soft + 错误原因 + 重试按钮。
|
||
|
||
### AI 员工状态
|
||
- `idle`：neutral。
|
||
- `running`：primary。
|
||
- `waiting_user`：warning。
|
||
- `failed`：danger。
|
||
- `disabled`：muted。
|
||
|
||
### 自动化任务状态
|
||
- `queued`：info。
|
||
- `running`：primary。
|
||
- `succeeded`：success。
|
||
- `failed`：danger。
|
||
- `canceled`：neutral + 审计说明。
|
||
|
||
### 许可证状态
|
||
- `trial`：warning soft。
|
||
- `active`：success。
|
||
- `expired`：danger。
|
||
- `offline_grace`：warning。
|
||
- `invalid`：danger strong。
|
||
|
||
## 12. 图标规则
|
||
- 使用 Lucide 或同一套 SVG 图标，禁止 emoji。
|
||
- 导航 icon：20px，stroke 2px。
|
||
- 状态 chip icon：14–16px。
|
||
- 卡片标题 icon：16–20px。
|
||
- 危险/阻断 icon 不只靠颜色，必须搭配文字。
|
||
|
||
## 13. 动效规则
|
||
- 普通 hover：180–220ms。
|
||
- Tab/导航切换：180ms，颜色/背景过渡即可。
|
||
- Modal：fade + scale 0.98→1，220ms。
|
||
- 托管日志追加：新日志淡入 180ms，不自动大幅滚动抢焦点。
|
||
- 异步超过 300ms：按钮 loading 或 spinner。
|
||
- 避免淘宝旧式大面积 3D 翻转；RPA 工具应保持稳定可控。
|
||
|
||
## 14. 可访问性与安全交互
|
||
- 点击区域至少 32px，关键按钮至少 40px。
|
||
- focus-visible 使用 `2px --rpa-primary` ring。
|
||
- 错误信息必须同时说明原因和恢复动作。
|
||
- 高风险动作必须二次确认。
|
||
- ESC 始终停止托管；UI 上持续展示“ESC 紧急停止始终可用”。
|
||
- 模态/遮罩必须有取消路径。
|
||
- 颜色不作为唯一状态表达：状态 chip 必须包含文本。
|
||
|
||
## 15. 应用到当前 HTML 原型的建议
|
||
1. 将左侧导航背景从纯 `slate-950` 调整为 `#373942`，hover/底部状态使用 `#2b2d34`。
|
||
2. 保留 PRD 主色 `#4f46e5` 作为 active 和主按钮；把普通 hover icon 改为 `#5eb5fe`。
|
||
3. 内容卡片边框统一为 `#e6e6e6`，背景保持白色，减少重阴影。
|
||
4. 托管遮罩底色改为 `#0a091e`，日志面板使用深 Slate，停止按钮使用 `#d44044`。
|
||
5. 表格、审计日志、错误码使用更紧凑的 14px/12px 层级，增强工具感。
|
||
6. 首次配置、权限、托管确认等阻断弹窗使用更强 scrim 和明确的原因/恢复文案。
|
||
|
||
## 16. 不采用项
|
||
- 不采用淘宝/阿里 Logo、橙色品牌识别、原始 banner 图、iconfont 字形。
|
||
- 不采用 12px 全局正文；RPA 工作站正文以 14px 起步。
|
||
- 不采用大面积营销 Hero；RPA 主界面以任务状态和可操作数据为核心。
|
||
- 不采用无边界入口卡片作为主结构；桌面工具需要卡片/表格边界清晰。
|