更新
This commit is contained in:
大森
parent
7551f5d123
commit
e27e6392e0
321
rpa-workstation-theme.md
Normal file
321
rpa-workstation-theme.md
Normal file
@ -0,0 +1,321 @@
|
|||||||
|
# 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 主界面以任务状态和可操作数据为核心。
|
||||||
|
- 不采用无边界入口卡片作为主结构；桌面工具需要卡片/表格边界清晰。
|
||||||
174
taobao-open-style-card.md
Normal file
174
taobao-open-style-card.md
Normal file
@ -0,0 +1,174 @@
|
|||||||
|
# 淘宝开放平台风格采集卡
|
||||||
|
|
||||||
|
## 1. 采集信息
|
||||||
|
- 来源：`https://open.taobao.com/index.htm`；辅助参考：`https://developer.alibaba.com/en/index.htm`、淘宝开放平台 Color 颜色文档。
|
||||||
|
- 采集日期：2026-06-26。
|
||||||
|
- 视口/页面：首页 HTML、首页公开 CSS、导航/公告/业务入口/能力模块/文档颜色规范。
|
||||||
|
- 可信度：中。`open.taobao.com/index.htm` 当前页面为 Rax 应用壳，静态 HTML 只暴露资源入口；本文件的精确色值主要来自公开 CSS 与文档页源码，布局与组件来自可读取首页结构。
|
||||||
|
|
||||||
|
## 2. 一句话风格定位
|
||||||
|
深色技术导航 + 白底业务入口 + 蓝色交互高亮的 B2B 开放平台风格，强调开发者可信、信息密度和平台能力展示。
|
||||||
|
|
||||||
|
## 3. 风格关键词
|
||||||
|
- 开发者平台感：顶部深色导航 `#373942`，二级菜单 `#2b2d34`，适合承载控制台、文档、解决方案等技术入口。
|
||||||
|
- 蓝色高亮交互：链接 hover、菜单标题、查看更多使用 `#5eb5fe` / `#6cb5f4`，形成“技术服务”而非电商促销的视觉语气。
|
||||||
|
- 白底轻量内容：业务卡片、公告、能力模块主要使用白底、灰字、细分割线，信息密度高但克制。
|
||||||
|
- 图片型 Hero：首屏轮播使用 1920 宽大图，外层深背景 `#0a091e`，品牌视觉主要交给 banner 图承担。
|
||||||
|
- 低圆角、轻阴影：组件多为直角或小圆角，通知/菜单使用 2–4px 圆角，阴影只在浮层中使用。
|
||||||
|
|
||||||
|
## 4. 配色系统
|
||||||
|
| Token | Hex/RGB | 用途 | 观察证据 |
|
||||||
|
|---|---:|---|---|
|
||||||
|
| color-nav-bg | `#373942` | 顶部/侧边深色导航背景 | `.openplatform-nav { background:#373942 }` |
|
||||||
|
| color-nav-panel | `#2b2d34` | hover 状态、二级菜单背景、激活导航 | `.top-openplatform-nav ul li.active/hover` 与 `.sub-nav` |
|
||||||
|
| color-hero-bg | `#0a091e` | 首页轮播深色承托背景 | `.slide { background-color:#0a091e }` |
|
||||||
|
| color-primary | `#5eb5fe` | 菜单标题、链接 hover、阅读更多 | `.sub-nav dl dt`、`.page-tips a.read-more` |
|
||||||
|
| color-primary-hover | `#6cb5f4` | 顶部菜单项 hover | `.open-nav-menu > li > a:hover` |
|
||||||
|
| color-tech-blue | `#28a3ef` | 技术能力模块数字/步骤高亮 | `.cols-3 .grid .step-1` |
|
||||||
|
| color-text-main | `#333333` | 主要正文/图标 | `.cols-1 i`、`.bottom-item` |
|
||||||
|
| color-text-heading | `#444444` | 业务入口标题 | `.cols-1 h4` |
|
||||||
|
| color-text-muted | `#666666` | 公告、段落、弱信息 | `.page-tips a`、`.cols-1 p` |
|
||||||
|
| color-text-subtle | `#7c7c7c` | 次级说明文本 | `.cols-3 p` |
|
||||||
|
| color-nav-text | `#e5e9ee` | 深色导航主文字/Logo | `.logo-container h1 a`、`.top-openplatform-nav a` |
|
||||||
|
| color-nav-muted | `#a3a3a3` | 二级菜单普通链接 | `.sub-nav dl dd a` |
|
||||||
|
| color-border | `#e6e6e6` | 公告底线、表格分割线 | `.page-tips`、`.table-bordered` |
|
||||||
|
| color-nav-border | `#383a45` | 深色菜单内部分割线 | `.sub-nav dl dd` |
|
||||||
|
| color-success-bg | `#edffe9` | 成功通知背景 | `.open-success` |
|
||||||
|
| color-success | `#4ab933` | 成功通知文字 | `.open-success` |
|
||||||
|
| color-error-bg | `#fff2f2` | 错误通知背景 | `.open-alert` |
|
||||||
|
| color-error-border | `#ffe3e0` | 错误通知边框 | `.open-alert` |
|
||||||
|
| color-danger | `#d44044` | 通知红点 hover / 强提醒 | `.notify-container.has-message:hover` |
|
||||||
|
|
||||||
|
## 5. 字体与字号
|
||||||
|
| 层级 | Font | Size | Weight | Line-height | 说明 |
|
||||||
|
|---|---|---:|---:|---:|---|
|
||||||
|
| Body | 系统 sans-serif / Bootstrap 默认 | `12px` | 400 | 默认 | 首页 CSS 明确 `body{font-size:12px}`，偏传统门户密度。 |
|
||||||
|
| Nav | 系统 sans-serif | `14px` | 400 | `64px` | 顶部导航高 64，文字垂直居中。 |
|
||||||
|
| Logo | iconfont + sans-serif | `18px` | 400 | `64px` | Logo 文案不加粗，依靠图标与深色背景建立品牌识别。 |
|
||||||
|
| Section H3 | 系统 sans-serif | `22px` | 400/默认 | 默认 | 模块标题使用较大字号但非粗重风格。 |
|
||||||
|
| Business H4 | 系统 sans-serif | `20px` | 400/默认 | 默认 | 四列业务入口标题。 |
|
||||||
|
| Paragraph | 系统 sans-serif | `12–14px` | 400 | `1.8–2` | 段落行高较松，缓解小字号带来的拥挤。 |
|
||||||
|
| Iconfont | Alibaba iconfont | `16–105px` | normal | 1 | 大图标用于业务入口和能力模块。 |
|
||||||
|
|
||||||
|
## 6. 布局与间距
|
||||||
|
- 页面宽度：核心容器 `max-width:1170px`，文档页内容 `990px`。
|
||||||
|
- 顶部导航：高度 `64px`，深色通栏，Logo 左置，主导航横排，登录/搜索右置。
|
||||||
|
- 首页 Hero：全宽轮播，图片 1800–1920px 级别，背景深色兜底。
|
||||||
|
- 公告条：Hero 下方 `15px` 上下外边距，底部 `1px #e6e6e6` 分割线。
|
||||||
|
- 业务入口：四列栅格 `.col-md-3`，容器左右内边距 `45px`，每项图标/图片 + 标题 + 描述。
|
||||||
|
- Section spacing：模块常用 `margin-top:20–80px`、`margin-bottom:40–60px`。
|
||||||
|
- 信息密度：导航和表格偏紧凑，营销/能力模块留白较多。
|
||||||
|
|
||||||
|
## 7. 组件拆解
|
||||||
|
|
||||||
|
### Nav
|
||||||
|
- 尺寸：高 `64px`，主导航项左右 padding `20px`。
|
||||||
|
- 背景：默认 `#373942`，hover/active `#2b2d34`。
|
||||||
|
- 文本：默认 `#e5e9ee`，菜单子项 `#a3a3a3`，标题/hover `#5eb5fe`。
|
||||||
|
- 下拉：深色大面板，顶部贴合导航，padding `25px 20px 20px`，内部按 `dl/dt/dd` 分组。
|
||||||
|
- 动效：hover 展开，opacity 0.3s；箭头旋转 180 度，0.5s。
|
||||||
|
- 可复用规则：适合控制台型产品的顶栏或左侧导航；导航背景不要纯黑，使用带蓝灰倾向的深 Slate。
|
||||||
|
|
||||||
|
### Button / CTA
|
||||||
|
- 首页强 CTA 不突出；更多使用链接、图片卡片、`btn-knowmore`。
|
||||||
|
- `btn-knowmore`：高 `44px`，透明蓝背景 `rgba(80,133,177,0.8)`，边框 `#3199f4`，hover 背景 `rgba(49,153,244,0.8)`。
|
||||||
|
- 可复用规则：主按钮可使用蓝色描边/半透明填充，不要大面积淘宝橙；橙色只适合品牌点缀或营销态。
|
||||||
|
|
||||||
|
### Card / Business Entry
|
||||||
|
- 结构：图标/图片在上，`h4` 标题，`p` 描述。
|
||||||
|
- 背景：白底或透明，无明显卡片边框。
|
||||||
|
- Hover：整项文字/图标变蓝 `#5eb5fe`。
|
||||||
|
- 尺寸：图形资源约 `135px × 85px`；标题 `20px`。
|
||||||
|
- 可复用规则：入口卡片应轻边界、重图标，避免厚重阴影。
|
||||||
|
|
||||||
|
### Announcement Bar
|
||||||
|
- 结构：公告图标 + 多条横向链接 + “查看更多”。
|
||||||
|
- 颜色：普通链接 `#666`，查看更多 `#5eb5fe`。
|
||||||
|
- 行为：文本单行截断，宽度约 `16em`，适合密集公告。
|
||||||
|
|
||||||
|
### Tech Grid
|
||||||
|
- 形态：蜂窝/网格图形背景，hover 翻转 `rotateY(180deg)`。
|
||||||
|
- 高亮：数字/步骤用 `#28a3ef`，hover 后白字。
|
||||||
|
- 动效：transform 0.3s ease-in-out。
|
||||||
|
- 可复用规则：可用于“能力矩阵”“流程步骤”“开放能力”展示。
|
||||||
|
|
||||||
|
### Notification
|
||||||
|
- 浮层：高 `46px`，顶部 fixed，阴影 `0 2px 5px rgba(0,0,0,.26)`，圆角 `2px`。
|
||||||
|
- 成功：`#edffe9` 背景、`#dcf9d6` 边框、`#4ab933` 文本。
|
||||||
|
- 错误：`#fff2f2` 背景、`#ffe3e0` 边框、red 文本。
|
||||||
|
|
||||||
|
## 8. 圆角、边框、阴影、质感
|
||||||
|
- Radius scale：`2px` 用于通知，`3px` 用于选中胶囊，`4px` 用于下拉菜单；整体偏低圆角。
|
||||||
|
- Border：浅色分割线 `#e6e6e6`；深色菜单分割线 `#383a45`。
|
||||||
|
- Shadow：只在通知和下拉菜单中使用；菜单阴影 `1px 1px 5px rgba(0,0,0,.75)`，通知阴影 `0 2px 5px rgba(0,0,0,.26)`。
|
||||||
|
- Texture：部分模块使用背景图纹理，不是纯色卡片风格；复用时建议用极淡网格/渐变替代老旧纹理图。
|
||||||
|
|
||||||
|
## 9. 动效与交互
|
||||||
|
- 顶部下拉：hover 展开，opacity 0.3s ease-in-out。
|
||||||
|
- 箭头旋转：0.5s。
|
||||||
|
- 搜索框：border-color 0.3s，input width 0.3s。
|
||||||
|
- 技术网格：hover 翻转，transform 0.3s ease-in-out。
|
||||||
|
- 云环境卡片：hover 后内容上移/淡入，all 0.3s。
|
||||||
|
- 复用建议：保留 0.2–0.3s 的快速反馈；避免大面积 3D 翻转，可改为轻微 translate/opacity 以现代化。
|
||||||
|
|
||||||
|
## 10. 可复用主题 Tokens
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--tbop-bg: #ffffff;
|
||||||
|
--tbop-bg-muted: #f7f8fa;
|
||||||
|
--tbop-nav-bg: #373942;
|
||||||
|
--tbop-nav-panel: #2b2d34;
|
||||||
|
--tbop-hero-bg: #0a091e;
|
||||||
|
|
||||||
|
--tbop-primary: #5eb5fe;
|
||||||
|
--tbop-primary-hover: #6cb5f4;
|
||||||
|
--tbop-tech-blue: #28a3ef;
|
||||||
|
--tbop-link: #5eb5fe;
|
||||||
|
|
||||||
|
--tbop-text: #333333;
|
||||||
|
--tbop-text-heading: #444444;
|
||||||
|
--tbop-text-muted: #666666;
|
||||||
|
--tbop-text-subtle: #7c7c7c;
|
||||||
|
--tbop-text-inverse: #e5e9ee;
|
||||||
|
--tbop-text-inverse-muted: #a3a3a3;
|
||||||
|
|
||||||
|
--tbop-border: #e6e6e6;
|
||||||
|
--tbop-border-dark: #383a45;
|
||||||
|
|
||||||
|
--tbop-success: #4ab933;
|
||||||
|
--tbop-success-bg: #edffe9;
|
||||||
|
--tbop-success-border: #dcf9d6;
|
||||||
|
--tbop-error: #d44044;
|
||||||
|
--tbop-error-bg: #fff2f2;
|
||||||
|
--tbop-error-border: #ffe3e0;
|
||||||
|
|
||||||
|
--tbop-font-sans: Arial, "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||||
|
--tbop-font-size-xs: 12px;
|
||||||
|
--tbop-font-size-sm: 14px;
|
||||||
|
--tbop-font-size-md: 20px;
|
||||||
|
--tbop-font-size-lg: 22px;
|
||||||
|
|
||||||
|
--tbop-radius-xs: 2px;
|
||||||
|
--tbop-radius-sm: 3px;
|
||||||
|
--tbop-radius-md: 4px;
|
||||||
|
|
||||||
|
--tbop-shadow-menu: 1px 1px 5px rgba(0, 0, 0, 0.75);
|
||||||
|
--tbop-shadow-notify: 0 2px 5px rgba(0, 0, 0, 0.26);
|
||||||
|
|
||||||
|
--tbop-nav-height: 64px;
|
||||||
|
--tbop-container: 1170px;
|
||||||
|
--tbop-doc-container: 990px;
|
||||||
|
--tbop-transition-fast: 0.2s ease-in-out;
|
||||||
|
--tbop-transition-normal: 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 11. 适合用于 / 不适合用于
|
||||||
|
- 适合：开放平台、开发者门户、插件市场、企业 SaaS 控制台、API 文档中心、技术生态官网。
|
||||||
|
- 不适合：强消费转化型落地页、年轻化社交产品、移动端优先 C 端 App、需要大量圆角/玻璃拟态的现代品牌页面。
|
||||||
|
|
||||||
|
## 12. 复刻注意事项
|
||||||
|
- 保留：深色技术导航、蓝色交互高亮、白底四列能力入口、公告条、能力矩阵、低圆角与轻阴影。
|
||||||
|
- 避免：直接复制淘宝/阿里 Logo、banner 原图、iconfont 字形、具体文案和品牌名称。
|
||||||
|
- 现代化变体：保持 `#373942 + #5eb5fe` 的骨架，把小字号从 12px 提升到 14px，把老式图片纹理替换为浅蓝渐变/网格背景，把 3D 翻转改为轻微浮起与淡入。
|
||||||
|
- 用于当前 RPA 工作站原型时：可将左侧导航改成 `#373942` 深 Slate，激活/hover 用 `#2b2d34`，图标高亮用 `#5eb5fe`，内容区继续保持白底与 `#e6e6e6` 分割线。
|
||||||
Loading…
x
Reference in New Issue
Block a user