Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready

组件1.txt

@@ -0,0 +1,241 @@
+# 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)：侧边栏折叠，表格横向滚动
+- 不推荐移动端
+
+请基于以上规范生成/设计 [具体页面或组件名称]。