| 原则 |
说明 |
| 专业 |
面向数据开发专业用户，界面简洁高效 |
| 清晰 |
信息层次分明，操作路径清晰 |
| 一致 |
视觉风格、交互模式保持统一 |
| 高效 |
减少操作步骤，提升工作效率 |
采用深色主题作为默认主题，原因：
- 数据平台用户长时间使用，深色减少眼睛疲劳
- 深色背景下代码、数据可视化更加突出
- 符合行业惯例（如 Airflow、Grafana 等）
主色 (Primary)
┌──────────────────────────────────────────────────┐
│ #1668DC 品牌蓝，用于主要按钮、链接、选中状态 │
└──────────────────────────────────────────────────┘
功能色 (Functional)
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
│ #52C41A │ │ #FAAD14 │ │ #FF4D4F │ │ #1890FF │
│ 成功 │ │ 警告 │ │ 错误 │ │ 信息 │
└──────────┘ └──────────┘ └──────────┘ └──────────┘
深色主题背景色
┌────────────────────────────────────────────────────────────────┐
│ #000000 布局背景 │ 页面最外层背景 │
├────────────────────────────────────────────────────────────────┤
│ #141414 容器背景 │ 卡片、侧边栏、头部背景 │
├────────────────────────────────────────────────────────────────┤
│ #1F1F1F 浮层背景 │ 弹窗、下拉菜单、Tooltip 背景 │
├────────────────────────────────────────────────────────────────┤
│ #262626 悬停背景 │ 列表项、表格行悬停状态 │
├────────────────────────────────────────────────────────────────┤
│ #303030 边框颜色 │ 分割线、边框 │
└────────────────────────────────────────────────────────────────┘
文字颜色
┌────────────────────────────────────────────────────────────────┐
│ rgba(255,255,255,0.85) │ 主要文字 │
├────────────────────────────────────────────────────────────────┤
│ rgba(255,255,255,0.65) │ 次要文字 │
├────────────────────────────────────────────────────────────────┤
│ rgba(255,255,255,0.45) │ 辅助文字、placeholder │
├────────────────────────────────────────────────────────────────┤
│ rgba(255,255,255,0.25) │ 禁用文字 │
└────────────────────────────────────────────────────────────────┘
任务状态
┌──────────┬────────────┬────────────────────────────────┐
│ 状态 │ 颜色 │ 使用场景 │
├──────────┼────────────┼────────────────────────────────┤
│ 等待中 │ #D9D9D9 │ 任务等待调度 │
│ 运行中 │ #1890FF │ 任务正在执行 │
│ 成功 │ #52C41A │ 任务执行成功 │
│ 失败 │ #FF4D4F │ 任务执行失败 │
│ 超时 │ #FAAD14 │ 任务执行超时 │
│ 已终止 │ #8C8C8C │ 任务被手动终止 │
└──────────┴────────────┴────────────────────────────────┘
/* 中文字体 */
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC',
'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
/* 代码字体 */
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono',
'Monaco', 'Consolas', monospace;
| 级别 |
字号 |
行高 |
用途 |
| H1 |
24px |
32px |
页面标题 |
| H2 |
20px |
28px |
区块标题 |
| H3 |
16px |
24px |
卡片标题 |
| Body |
14px |
22px |
正文内容 |
| Caption |
12px |
20px |
辅助说明 |
| Code |
13px |
20px |
代码内容 |
间距单位：4px
┌──────────────────────────────────────────┐
│ xs: 4px │ 极小间距 │
│ sm: 8px │ 小间距 │
│ md: 16px │ 中等间距（默认） │
│ lg: 24px │ 大间距 │
│ xl: 32px │ 超大间距 │
│ xxl: 48px │ 特大间距 │
└──────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ Header (56px) │
├────────────┬────────────────────────────────────────────────────┤
│ │ ┌──────────────────────────────────┐ │
│ │ 24px │ │ │
│ │ ┌─────────┤ Content Area │ │
│ Sidebar │ │ │ │ │
│ (200px) │ │ 24px │ Card Padding: 24px │ │
│ │ │ │ Card Gap: 16px │ │
│ │ └─────────┤ │ │
│ │ │ │ │
│ │ └──────────────────────────────────┘ │
└────────────┴────────────────────────────────────────────────────┘
尺寸规范
┌─────────────────────────────────────────────────────────────────┐
│ Large: 高度 40px，内边距 16px 24px，字号 16px │
│ Middle: 高度 32px，内边距 8px 16px，字号 14px (默认) │
│ Small: 高度 24px，内边距 4px 8px，字号 12px │
└─────────────────────────────────────────────────────────────────┘
类型规范
┌─────────────┬──────────────────────────────────────────────────┐
│ Primary │ 主要操作，如"保存"、"提交"、"创建" │
│ Default │ 次要操作，如"取消"、"返回" │
│ Dashed │ 添加操作，如"添加节点"、"新增规则" │
│ Text │ 链接式操作，如"编辑"、"删除" │
│ Link │ 纯链接，如"查看详情" │
└─────────────┴──────────────────────────────────────────────────┘
表单布局
┌─────────────────────────────────────────────────────────────────┐
│ 标签宽度： 80px ~ 120px（根据最长标签确定） │
│ 输入框高度：32px │
│ 字段间距： 24px │
│ 必填标记： * 红色，位于标签后 │
└─────────────────────────────────────────────────────────────────┘
示例：
┌───────────────────────────────────────────────────────────┐
│ 任务名称 * ┌────────────────────────────────────────┐ │
│ │ 请输入任务名称 │ │
│ └────────────────────────────────────────┘ │
│ │
│ 调度周期 ┌────────────────────────────────────────┐ │
│ │ 每天 ▼ │ │
│ └────────────────────────────────────────┘ │
│ │
│ 负责人 ┌────────────────────────────────────────┐ │
│ │ 请选择负责人 ▼ │ │
│ └────────────────────────────────────────┘ │
└───────────────────────────────────────────────────────────┘
表格规范
┌─────────────────────────────────────────────────────────────────┐
│ 行高： 54px (带操作列) / 46px (纯数据) │
│ 单元格边距：16px │
│ 表头背景： #1F1F1F │
│ 斑马纹： 奇数行 #141414，偶数行 #1A1A1A │
│ 悬停背景： #262626 │
└─────────────────────────────────────────────────────────────────┘
示例：
┌──────────────┬────────────┬────────────┬────────────┬──────────┐
│ 任务名称 │ 状态 │ 调度时间 │ 负责人 │ 操作 │
├──────────────┼────────────┼────────────┼────────────┼──────────┤
│ etl_daily │ ● 运行中 │ 10:00:00 │ 张三 │ 编辑 删除 │
├──────────────┼────────────┼────────────┼────────────┼──────────┤
│ sync_order │ ● 成功 │ 09:30:00 │ 李四 │ 编辑 删除 │
└──────────────┴────────────┴────────────┴────────────┴──────────┘
卡片规范
┌─────────────────────────────────────────────────────────────────┐
│ 边框圆角： 8px │
│ 内边距： 24px │
│ 阴影： 0 2px 8px rgba(0, 0, 0, 0.15) │
│ 标题字号： 16px │
│ 标题下边距：16px │
└─────────────────────────────────────────────────────────────────┘
示例：
┌─────────────────────────────────────────────────────────────────┐
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 卡片标题 更多 > │ │
│ ├─────────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ 卡片内容区域 │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
| 尺寸 |
用途 |
| 12px |
辅助小图标 |
| 14px |
按钮内图标、表格操作图标 |
| 16px |
菜单图标、状态图标 |
| 24px |
功能入口图标 |
| 32px |
空状态图标 |
| 48px+ |
大型装饰图标 |
- 使用 Ant Design Icons 作为基础图标库
- 线条粗细统一为 2px
- 风格统一为线性（Outlined）
┌─────────────────────────────────────────────────────────────────┐
│ 顶部导航 (56px) │
│ ┌───────────┬────────────────────────────────────────────────┐ │
│ │ Logo │ 面包屑 / 搜索 用户信息 │ 设置 │ │
│ └───────────┴────────────────────────────────────────────────┘ │
├────────────┬────────────────────────────────────────────────────┤
│ │ │
│ │ ┌──────────────────────────────────────────────┐ │
│ 侧边导航 │ │ │ │
│ (200px) │ │ 内容区域 │ │
│ │ │ (自适应) │ │
│ - 菜单1 │ │ │ │
│ - 菜单2 │ │ │ │
│ - 菜单3 │ └──────────────────────────────────────────────┘ │
│ │ │
└────────────┴────────────────────────────────────────────────────┘
| 断点 |
宽度 |
布局调整 |
| xs |
< 576px |
侧边栏收起，单列布局 |
| sm |
>= 576px |
侧边栏可展开 |
| md |
>= 768px |
两列布局 |
| lg |
>= 992px |
三列布局 |
| xl |
>= 1200px |
完整布局 |
| xxl |
>= 1600px |
最大宽度 1400px |
| 场景 |
方式 |
说明 |
| 操作成功 |
Message 成功提示 |
3秒自动消失 |
| 操作失败 |
Message 错误提示 |
5秒自动消失 |
| 确认操作 |
Modal 确认框 |
需用户明确确认 |
| 异步加载 |
Spin 加载中 |
显示加载状态 |
| 表单校验 |
字段红色高亮 |
实时反馈 |
| 类型 |
时长 |
缓动函数 |
| 淡入淡出 |
200ms |
ease-in-out |
| 展开收起 |
300ms |
ease-out |
| 滑动切换 |
300ms |
ease-in-out |
| 悬停效果 |
150ms |
ease |
┌─────────────────────────────────────────────────────────────────┐
│ 文件名.sql 运行 │ 保存 │
├─────────────────────────────────────────────────────────────────┤
│ 1 │ SELECT │
│ 2 │ user_id, │
│ 3 │ user_name, │
│ 4 │ SUM(amount) as total │
│ 5 │ FROM orders │
│ 6 │ WHERE create_time >= '2024-01-01' │
│ 7 │ GROUP BY user_id, user_name │
│ 8 │ │
├─────────────────────────────────────────────────────────────────┤
│ 结果 │ 消息 │ 执行计划 导出 │ 复制 │
├─────────────────────────────────────────────────────────────────┤
│ user_id │ user_name │ total │
│ 1001 │ 张三 │ 5280.00 │
│ 1002 │ 李四 │ 3150.00 │
└─────────────────────────────────────────────────────────────────┘
配色方案 (Monaco Editor Dark+):
- 关键字: #569CD6 (蓝色)
- 字符串: #CE9178 (橙色)
- 数字: #B5CEA8 (绿色)
- 注释: #6A9955 (深绿)
- 函数: #DCDCAA (黄色)
节点样式
┌─────────────────────────────────────────────────────────────────┐
│ │
│ ┌──────────────────┐ │
│ │ ◇ SQL │ 节点宽度: 180px │
│ │ 数据清洗任务 │ 节点高度: 60px │
│ │ ● 运行中 │ 圆角: 4px │
│ └──────────────────┘ 边框: 2px │
│ │
│ 类型图标颜色: │
│ - SQL: #1890FF │
│ - Shell: #52C41A │
│ - Spark: #FA8C16 │
│ - Flink: #722ED1 │
│ - Python: #13C2C2 │
│ │
│ 连接线: 2px, #91D5FF, 带箭头 │
│ 选中态: 边框 #1668DC, 阴影 │
└─────────────────────────────────────────────────────────────────┘
统计卡片
┌─────────────────────────────────────────────────────────────────┐
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ 1,234 │ │ 98.5% │ │ 156 │ │
│ │ 今日任务数 │ │ 成功率 │ │ 运行中任务 │ │
│ │ ↑ 12% │ │ ↓ 0.5% │ │ ↑ 23 │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
│ 数值字号: 32px │
│ 标签字号: 14px │
│ 趋势字号: 12px (绿色上升/红色下降) │
└─────────────────────────────────────────────────────────────────┘
// 主题配置
const themes = {
dark: {
colorBgContainer: '#141414',
colorBgElevated: '#1f1f1f',
colorBgLayout: '#000000',
colorText: 'rgba(255, 255, 255, 0.85)',
colorBorder: '#303030',
},
light: {
colorBgContainer: '#ffffff',
colorBgElevated: '#ffffff',
colorBgLayout: '#f5f5f5',
colorText: 'rgba(0, 0, 0, 0.85)',
colorBorder: '#d9d9d9',
},
};
- 图片、图标需准备深浅两套
- 图表颜色需根据主题调整
- 阴影深度需根据主题调整
- 代码编辑器主题需同步切换