---
trigger: manual
---

# ERPTurbo 设计规范

本文档定义了 ERPTurbo 项目的设计规范，包括颜色、字体、间距、圆角、阴影、布局、组件样式等标准。

## 颜色规范

### 主色调

项目使用单一主色调来确保品牌一致性：

- 主色：`#15B8A6`（蓝绿色）- 用于主要操作按钮、链接和重要信息

### 中性色系统

中性色用于文本、背景和边框，提供清晰的层次结构：

- 最深色：`#333333` - 主要文本
- 深色：`#666666` - 次要文本
- 中色：`#999999` - 辅助文本
- 基础色：`#DDDDDD` - 边框和分隔线
- 浅色：`#EEEEEE` - 背景灰
- 最浅色：`#F8F9FA` - 背景色

## 字体规范

### 字号标准

为确保良好的可读性和层次结构，定义以下字号标准：

- 大标题：18px - 用于页面主标题
- 中标题：16px - 用于模块标题
- 小标题：14px - 用于小节标题
- 正文：14px - 用于常规文本
- 辅助文本：12px - 用于辅助说明
- 标签文本：10px - 用于标签、徽章

### 字体粗细

- 细体：font-weight 300
- 常规：font-weight 400
- 中粗：font-weight 500
- 粗体：font-weight 600
- 黑体：font-weight 700

### 行高

- 紧凑：1.2
- 标准：1.5
- 宽松：1.8

## 间距规范

使用 4 的倍数作为间距系统的基础单位，确保视觉一致性：

- 超小间距：4px
- 小间距：8px
- 中等间距：16px
- 大间距：24px
- 超大间距：32px

### 使用场景

- 元素内边距：通常使用 8px、16px
- 元素间外边距：通常使用 16px、24px
- 段落间距：通常使用 24px
- 页面边距：通常使用 16px

## 圆角规范

为保持视觉一致性，定义以下圆角标准：

- 小圆角：2px - 用于按钮、标签
- 中圆角：4px - 用于表单控件、卡片
- 大圆角：8px - 用于模块容器
- 超大圆角：16px - 用于特殊组件
- 圆形：50% - 用于头像、圆形按钮

## 阴影规范

使用不同层级的阴影来表达元素的层次关系：

- 基础阴影：用于卡片等容器元素
  - offset-x: 0px, offset-y: 1px, blur: 2px, spread: 0px
  - color: rgba(0, 0, 0, 0.1)

- 中等阴影：用于悬浮状态、下拉菜单
  - offset-x: 0px, offset-y: 2px, blur: 4px, spread: 0px
  - color: rgba(0, 0, 0, 0.1)

- 强阴影：用于模态框、重要提示
  - offset-x: 0px, offset-y: 4px, blur: 8px, spread: 0px
  - color: rgba(0, 0, 0, 0.1)

## 布局规范

### 弹性布局

- 主轴对齐：使用 `justify-content` 控制水平对齐
- 交叉轴对齐：使用 `align-items` 控制垂直对齐
- 方向：默认使用 `row`，垂直布局使用 `column`

### 网格布局

- 基础网格：使用 12 列网格系统
- 列间距：16px
- 行间距：16px

### 响应式断点

- 小屏幕（手机）：< 768px
- 中等屏幕（平板）：≥ 768px
- 大屏幕（桌面）：≥ 1024px

## 组件规范

### 按钮

- 高度：40px
- 圆角：4px
- 内边距：水平 16px
- 字体大小：14px
- 字体粗细：500

状态样式：
- 默认：主色背景，白色文字
- 悬停：主色加深 10%
- 禁用：灰色背景，浅灰文字

### 输入框

- 高度：40px
- 圆角：4px
- 边框：1px #DDDDDD
- 内边距：水平 12px
- 字体大小：14px

### 卡片

- 圆角：8px
- 内边距：16px
- 背景：白色
- 阴影：基础阴影

### 标签

- 圆角：2px
- 内边距：垂直 2px，水平 6px
- 字体大小：12px
- 字体粗细：500

## 响应式设计

### 断点使用

- 手机端：单一列布局，元素堆叠显示
- 平板端：可使用多列布局，适当调整元素大小
- 桌面端：充分利用空间，显示更多信息

### 响应式工具类

使用 Tailwind CSS 提供的响应式工具类：
- `sm:` 超过 640px
- `md:` 超过 768px
- `lg:` 超过 1024px
- `xl:` 超过 1280px

## 可访问性

### 颜色对比度

- 文本与背景的对比度至少为 4.5:1
- 重要元素（如按钮）的对比度至少为 3:1

### 焦点状态

- 所有可交互元素必须有清晰的焦点状态
- 焦点状态使用 2px 主色轮廓
- 确保键盘导航的可用性

### 语义化标签

- 使用正确的 HTML 语义化标签
- 为图片提供有意义的 alt 属性
- 为表单控件提供关联的标签

## 最佳实践

### 命名约定

- CSS 类名使用 BEM 命名法
- 变量使用驼峰命名法
- 文件名使用帕斯卡命名法（组件）或小写连字符（其他）

### 性能优化

- 避免使用过多的阴影和渐变
- 合理使用 CSS 动画
- 优化图片资源

### 维护性建议

- 保持组件的单一职责
- 使用 TypeScript 定义组件接口
- 编写清晰的注释
- 遵循一致的代码风格

## 附录

本规范基于以下技术栈实现：
- Tailwind CSS 用于样式系统
- Taro 框架用于多端开发
- React 用于组件开发

所有设计决策应以提升用户体验和保持视觉一致性为目标。