241 lines
8.2 KiB
Plaintext
241 lines
8.2 KiB
Plaintext
# Aurora Admin UI 设计系统规范
|
||
|
||
## 项目定位
|
||
B 端中后台管理系统，适用于 ERP、CRM、数据管理平台。设计风格理性、高效、信息密度适中，强调可扩展性与清晰层级。
|
||
|
||
## 设计原则
|
||
- 一致优先：同类组件使用相同尺寸、颜色、间距。
|
||
- 清晰高效：信息层级明确，操作路径最短，避免过度装饰。
|
||
- 反馈及时：所有操作必须有加载、成功、失败反馈。
|
||
- 无障碍：满足键盘操作、焦点管理、对比度标准（正文对比度≥4.5:1）。
|
||
|
||
## 色彩系统
|
||
- 品牌主色：#2F54EB（主按钮、选中态、链接）
|
||
- 品牌主色悬停：#1D39C4
|
||
- 品牌主色点击：#10239E
|
||
- 品牌浅色背景：#F0F5FF（选中背景、标签背景、表格悬停）
|
||
- 辅助色：#13C2C2
|
||
- 页面背景：#F5F7FA
|
||
- 卡片背景：#FFFFFF
|
||
- 分割线/边框：#E8ECF1
|
||
- 占位文字：#BFBFBF
|
||
- 次要文字：#8C8C8C
|
||
- 正文文字：#262626
|
||
- 标题文字：#1F2329
|
||
- 成功色：#52C41A
|
||
- 警告色：#FAAD14
|
||
- 错误色：#F5222D
|
||
- 信息色：#1890FF
|
||
|
||
## 字体规范
|
||
- 中文：PingFang SC / 思源黑体
|
||
- 数字/英文：Inter / DIN
|
||
- 字号层级：
|
||
- Display：24px / 行高32px / Semibold（页面大标题）
|
||
- H1：20px / 28px / Semibold（卡片标题、弹窗标题）
|
||
- H2：16px / 24px / Medium（区块标题）
|
||
- Body：14px / 22px / Regular（正文、表格、表单）
|
||
- Caption：12px / 20px / Regular（辅助说明、时间戳）
|
||
- 禁止使用小于12px字号。
|
||
|
||
## 间距系统
|
||
基于4px基准，梯度：4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64。
|
||
- 组件内元素间距：4 / 8 / 12
|
||
- 组件之间间距：16 / 24
|
||
- 区块之间间距：32 / 48
|
||
- 页面边距：24（桌面端）
|
||
|
||
## 圆角系统
|
||
- Small：2px（标签、徽章）
|
||
- Base：4px（按钮、输入框、选择器）
|
||
- Medium：6px（表格、卡片内部元素）
|
||
- Large：8px（卡片、弹窗、抽屉）
|
||
|
||
## 阴影系统
|
||
- 低：0 1px 4px rgba(0,0,0,0.06)（卡片默认）
|
||
- 中：0 4px 12px rgba(0,0,0,0.08)（卡片悬停、下拉菜单）
|
||
- 高：0 8px 24px rgba(0,0,0,0.12)（弹窗、抽屉）
|
||
|
||
## 图标规范
|
||
- 线性图标，描边1.5px，尺寸16/20/24px
|
||
- 默认继承文字颜色，主色图标用#2F54EB
|
||
- 图标与文字间距4px
|
||
|
||
## 核心组件规范
|
||
|
||
### 按钮 Button
|
||
- 类型：主按钮、次按钮、文字按钮、链接按钮、危险按钮
|
||
- 尺寸：Large(40px高)、Default(32px高)、Small(24px高)
|
||
- 圆角：4px
|
||
- 主按钮：背景#2F54EB，文字白色，悬停#1D39C4
|
||
- 次按钮：白底边框#E8ECF1，文字#262626，悬停边框变蓝
|
||
- 文字按钮：无背景，文字#2F54EB，悬停浅蓝背景
|
||
- 危险按钮：背景#F5222D
|
||
- 禁用态：背景#F5F5F5，文字#BFBFBF
|
||
- 最小宽度64px
|
||
|
||
### 输入框 Input
|
||
- 尺寸：Default(32px高)、Large(40px高)、Small(24px高)
|
||
- 圆角4px，边框1px solid #E8ECF1，内边距左右12px
|
||
- 聚焦：边框#2F54EB，外发光0 0 0 2px rgba(47,84,235,0.2)
|
||
- 错误：边框#F5222D，下方红色12px错误提示
|
||
- 支持前后缀、清除按钮、数字输入、密码切换
|
||
|
||
### 选择器 Select / Cascader
|
||
- 触发器样式同Input
|
||
- 下拉面板：白底、圆角4px、阴影中、最大高度256px
|
||
- 选中项背景#F0F5FF，文字#2F54EB，左侧勾选图标
|
||
- 支持单选、多选、搜索、分组、级联
|
||
|
||
### 标签 Tag
|
||
- 圆角2px，高度22px，内边距左右8px
|
||
- 颜色：浅色背景+深色文字（如蓝#F0F5FF/#2F54EB，绿#F6FFED/#52C41A等）
|
||
- 可关闭标签悬停显示关闭按钮
|
||
|
||
### 徽章 Badge
|
||
- 数字徽章、小红点
|
||
- 数字超过99显示99+
|
||
- 红色默认，支持蓝、绿
|
||
|
||
### 头像 Avatar
|
||
- 圆形或方形，尺寸24/32/40/48/64px
|
||
- 文字头像背景品牌色系，文字白色
|
||
- 支持在线状态点
|
||
|
||
### 开关 Switch / 单选框 Radio / 复选框 Checkbox
|
||
- 开关：44×22px，开启背景#2F54EB，关闭#BFBFBF
|
||
- 单选框/复选框：选中态品牌色，复选框圆角2px
|
||
|
||
### 分页 Pagination
|
||
- 位于表格底部右侧
|
||
- 当前页按钮品牌色背景白字，其他白底黑字
|
||
- 支持每页条数选择(10/20/50/100)、总数展示、跳转
|
||
|
||
### 侧边导航 Sider
|
||
- 宽度220px（可折叠64px），背景#F5F7FA或#FFFFFF
|
||
- 菜单项高度40px，选中态背景#F0F5FF，文字#2F54EB，左侧3px品牌色指示条
|
||
- 子菜单缩进16px
|
||
|
||
### 顶部导航 Top Navigation
|
||
- 高度56px，白底，底部1px分割线
|
||
- 左侧面包屑或页面标题，右侧搜索/通知/头像
|
||
|
||
### 面包屑 Breadcrumb
|
||
- 字号14px，层级用/分隔，次要文字#8C8C8C，当前页#262626
|
||
|
||
### 标签页 Tabs
|
||
- 线型：底部2px品牌色指示条
|
||
- 卡片型：选中白底无边框，未选中浅灰背景
|
||
|
||
### 步骤条 Steps
|
||
- 节点32px圆点，完成绿对勾，当前品牌色，未完成灰色
|
||
- 连线完成段品牌色
|
||
|
||
### 数据表格 Table
|
||
- 表头：背景#FAFAFA，文字#262626，行高48px
|
||
- 行高48px，分割线#E8ECF1，悬停背景#F5F7FA
|
||
- 单元格内边距左右16px
|
||
- 文本左对齐，数字/金额右对齐
|
||
- 选中行背景#F0F5FF
|
||
- 支持排序、筛选、自定义列、固定列、展开行、行选择、批量操作
|
||
- 操作列右对齐，文字按钮间距8px
|
||
|
||
### 卡片 Card
|
||
- 圆角8px，边框1px #E8ECF1 或低阴影
|
||
- 内边距16px/24px
|
||
- 结构：标题区、内容区、操作区
|
||
|
||
### 描述列表 Descriptions
|
||
- 标签宽度120-160px，右对齐，文字#8C8C8C
|
||
- 内容左对齐，文字#262626
|
||
- 支持1/2/3/4列布局
|
||
|
||
### 统计卡片 Statistic Card
|
||
- 数值24-32px，数字字体
|
||
- 趋势图标上升绿、下降红
|
||
- 支持迷你图表
|
||
|
||
### 空状态 Empty
|
||
- 居中插画64px、文字#8C8C8C、操作按钮
|
||
|
||
### 加载 Loading / 骨架屏 Skeleton
|
||
- 全局加载转圈品牌色
|
||
- 局部加载骨架屏形状匹配内容，灰色#F5F7FA微光动效
|
||
|
||
### Tooltip / Popover
|
||
- Tooltip：深色#1F2329背景白字，圆角4px，内边距8px 12px，最大宽200px
|
||
- Popover：白底，阴影中，圆角6px
|
||
|
||
### 表单 Form
|
||
- 垂直布局为主，标签左对齐或顶部对齐
|
||
- 表单组间距24px，标签与输入框间距8px
|
||
- 必填项标签前加红色*
|
||
- 错误提示：字号12px，#F5222D，位于输入框下方4px
|
||
|
||
### 日期选择 DatePicker
|
||
- 输入框样式同Input，右侧日历图标
|
||
- 面板白底阴影中圆角6px
|
||
- 选中日期背景品牌色白字，今日边框品牌色
|
||
- 支持范围选择、快捷选项
|
||
|
||
### 上传 Upload
|
||
- 拖拽区域虚线边框#E8ECF1，悬停品牌色
|
||
- 文件列表显示文件名、大小、进度条、删除按钮
|
||
- 图片显示缩略图可预览
|
||
|
||
### 全局提示 Message
|
||
- 顶部居中，自动消失3秒
|
||
- 成功绿/错误红/警告黄/信息蓝，白字，圆角4px，高度40px
|
||
|
||
### 对话框 Modal
|
||
- 宽度480px(默认)/680px(大)/320px(小)
|
||
- 圆角8px，遮罩rgba(0,0,0,0.45)
|
||
- 结构：标题、内容、右下角操作按钮（次按钮+主按钮）
|
||
|
||
### 抽屉 Drawer
|
||
- 宽度360px(默认)/480px/640px，位置右侧默认
|
||
- 包含标题栏、内容区、底部操作栏
|
||
|
||
### 通知提醒 Notification
|
||
- 右上角弹出，停留4.5秒，可手动关闭
|
||
- 包含标题、描述、图标、关闭按钮
|
||
|
||
### 进度条 Progress
|
||
- 线型高度8px，圆角4px，品牌色
|
||
- 圆形进度条用于仪表盘
|
||
|
||
### 结果页 Result
|
||
- 居中大图标（成功绿/错误红）、标题、描述、操作按钮
|
||
|
||
### 高级筛选 Advanced Filter
|
||
- 位于表格上方，折叠展示
|
||
- 默认一行常用条件，点击展开全部
|
||
- 底部查询（主色）、重置（文字按钮）
|
||
|
||
### 批量操作栏 Batch Operation Bar
|
||
- 表格有选中行时浮现
|
||
- 显示已选数量、全选、批量操作
|
||
- 白底阴影中圆角4px，危险操作需二次确认
|
||
|
||
### 状态徽章 Status Badge
|
||
- 小圆点+文字，圆点直径8px，文字12px
|
||
- 待处理黄、进行中蓝、已完成绿、已取消灰、失败红
|
||
|
||
### 图表卡片 Chart Card
|
||
- 卡片内嵌图表，配色遵循品牌色板
|
||
- 高度240-320px，响应式
|
||
- 标题与操作位于卡片右上角
|
||
|
||
### 时间轴 Timeline
|
||
- 垂直排列，节点小圆点（完成绿、当前蓝、未完成灰）
|
||
- 左侧时间或操作人，右侧内容，间距16px
|
||
|
||
## 组件状态
|
||
每个可交互组件需覆盖：默认、悬停、按下、聚焦、禁用、加载、错误、空状态。
|
||
|
||
## 响应式
|
||
- 桌面端优先，最小宽度1280px
|
||
- 平板端(768-1280px)：侧边栏折叠，表格横向滚动
|
||
- 不推荐移动端
|
||
|
||
请基于以上规范生成/设计 [具体页面或组件名称]。 |