# Kole UI UI 设计系统规范

## 项目定位
B 端中后台管理系统，适用于 ERP、CRM、数据管理平台。设计风格理性、高效、信息密度适中，强调可扩展性与清晰层级。

## 设计原则
- 一致优先：同类组件使用相同尺寸、颜色、间距。
- 清晰高效：信息层级明确，操作路径最短，避免过度装饰。
- 反馈及时：所有操作必须有加载、成功、失败反馈。
- 无障碍：满足键盘操作、焦点管理、对比度标准（正文对比度≥4.5:1）。

## 色彩系统
- 品牌主色：#2F54EB（主按钮、选中态、链接）
- 品牌主色悬停：#1D39C4
- 品牌主色点击：#10239E
- 品牌浅色背景：#F0F5FF（选中背景、标签背景、表格悬停）
- 辅助色：#13C2C2
- 页面背景：#F5F7FA
- 卡片背景：#FFFFFF
- 分割线/边框：#E8ECF1
- 占位文字：#767676（v1.3.1 起，原 #BFBFBF 仅 1.84:1）
- 次要文字：#6E6E6E（v1.3.1 起，原 #8C8C8C 仅 3.36:1）
- 正文文字：#262626
- 标题文字：#1F2329
- 成功色：#2E7D0A（v1.3.1 起，原 #52C41A 仅 2.27:1）
- 警告色：#8C5A00（v1.3.1 起，原 #FAAD14 仅 1.90:1）
- 错误色：#CF1322（v1.3.1 起，原 #F5222D 仅 4.08:1）
- 信息色：#096DD9（v1.3.1 起，原 #1890FF 仅 3.24:1）

## 字体规范
- 中文：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，悬停浅蓝背景
- 危险按钮：背景#CF1322（v1.3.1 起）
- 禁用态：背景#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)
- 错误：边框#CF1322，下方红色12px错误提示
- 支持前后缀、清除按钮、数字输入、密码切换

### 选择器 Select / Cascader
- 触发器样式同Input
- 下拉面板：白底、圆角4px、阴影中、最大高度256px
- 选中项背景#F0F5FF，文字#2F54EB，左侧勾选图标
- 支持单选、多选、搜索、分组、级联

### 标签 Tag
- 圆角2px，高度22px，内边距左右8px
- 颜色：浅色背景+深色文字（如蓝#F0F5FF/#2F54EB，绿#F6FFED/#2E7D0A等）
- 可关闭标签悬停显示关闭按钮

### 徽章 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，层级用/分隔，次要文字#6E6E6E，当前页#262626

### 标签页 Tabs
- 线型：底部2px品牌色指示条
- 卡片型：选中白底无边框，未选中浅灰背景

### 步骤条 Steps
- 节点32px圆点，完成绿对勾，当前品牌色，未完成灰色
- 连线完成段品牌色

### 数据表格 Table
- 表头：背景#FAFAFA，文字#262626，行高48px
- 行高48px，分割线#E8ECF1，悬停背景#F5F7FA
- 单元格内边距左右16px
- 文本左对齐，数字/金额右对齐
- 选中行背景#F0F5FF
- 支持排序、筛选、自定义列、固定列、展开行、行选择、批量操作
- 操作列右对齐，文字按钮间距8px

### 卡片 Card
- 圆角8px，边框1px #E8ECF1 或低阴影
- 内边距16px/24px
- 结构：标题区、内容区、操作区

### 描述列表 Descriptions
- 标签宽度120-160px，右对齐，文字#6E6E6E
- 内容左对齐，文字#262626
- 支持1/2/3/4列布局

### 统计卡片 Statistic Card
- 数值24-32px，数字字体
- 趋势图标上升绿、下降红
- 支持迷你图表

### 空状态 Empty
- 居中插画64px、文字#6E6E6E、操作按钮

### 加载 Loading / 骨架屏 Skeleton
- 全局加载转圈品牌色
- 局部加载骨架屏形状匹配内容，灰色#F5F7FA微光动效

### Tooltip / Popover
- Tooltip：深色#1F2329背景白字，圆角4px，内边距8px 12px，最大宽200px
- Popover：白底，阴影中，圆角6px

### 表单 Form
- 垂直布局为主，标签左对齐或顶部对齐
- 表单组间距24px，标签与输入框间距8px
- 必填项标签前加红色*
- 错误提示：字号12px，#CF1322，位于输入框下方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)：侧边栏折叠，表格横向滚动
- 不推荐移动端

请基于以上规范生成/设计 [具体页面或组件名称]。