# Nex Design 前端设计规范

面向 **React + Ant Design + Tailwind CSS** 的前端设计语言系统，目标：

- **一致性**：保证视觉与交互统一
- **高效性**：提供可复用组件与布局模式
- **可维护性**：清晰规范，便于迭代
- **用户体验**：直观易用

## 技术栈

- 框架：React 18+
- 组件库：Ant Design 5.x
- 样式：Tailwind CSS 3.x
- 包管理：Yarn
- 运行时：Node.js 16+

---

## 设计原则

- **清晰明确**：界面直观，操作易理解
- **一致性优先**：视觉、交互、用词统一
- **效率至上**：减少操作步骤，提高效率
- **反馈及时**：操作有明确状态反馈
- **容错友好**：预防错误，提示明确



**使用规范**：

- 主色：关键按钮、重要信息、链接
- 功能色：按语义使用，不混淆
- 中性色：文本、背景、边框
- 对比度 ≥ 4.5:1

---

## 排版规范

### 字体

- 默认：`-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto …`
- 等宽：`'SF Mono', 'Monaco', 'Fira Code', …`

### 字号

| 用途 | 大小 | Tailwind 类 | 场景 |
|------|------|-------------|------|
| 特大标题 | 32px | `text-4xl` | 页面主标题 |
| 大标题 | 24px | `text-2xl` | 区块标题 |
| 中标题 | 20px | `text-xl` | 卡片标题 |
| 小标题 | 16px | `text-base` | 表单标签 |
| 正文 | 14px | `text-sm` | 正文 |
| 辅助文字 | 12px | `text-xs` | 说明 |

### 字重

| 用途 | 字重 |
|------|-----|
| 正文 | Regular 400 |
| 表单标签、列表 | Medium 500 |
| 小标题、强调 | Semibold 600 |
| 标题、重要信息 | Bold 700 |

---

## 间距系统

- 基于 **8px 网格**，间距均为 8 的倍数
- Tailwind 对应类：

| 尺寸 | Tailwind 类 | 间距 |
|------|------------|------|
| xs | p-1 / m-1 | 4px |
| sm | p-2 / m-2 | 8px |
| md | p-4 / m-4 | 16px |
| lg | p-6 / m-6 | 24px |
| xl | p-8 / m-8 | 32px |
| 2xl | p-12 / m-12 | 48px |

---

## 组件规范

### 按钮 (Button)

- 类型：Primary / Default / Text / Link / Danger
- 尺寸：Large 40px / Middle 32px / Small 24px
- 使用：
    - 单区域最多一个主按钮
    - 文字 ≤ 4 个字
    - 危险操作二次确认

### 表单 (Form)

- 布局：vertical
- 必填：红色星号
- 字段宽度合理，间距 24px
- 错误提示显示在字段下方

### 表格 (Table)

- 分页默认 10 条
- 行高 54px (middle)
- 操作列固定右侧
- 加载状态使用 `loading`

### 卡片 (Card)

- 内边距 24px
- 圆角 8px
- 阴影 `shadow-sm`
- 卡片间距 16px

---

## 布局规范

- 页面：Header 64px, Sider 200px, Content 区域
- 栅格：24 栏，使用 Ant Design Grid
- 页面内边距 24px，内容最大宽 1200px
- 响应式：Flexbox/Grid + Tailwind 前缀

---

## 交互规范

- **全局提示**：`message.success/error/warning/loading`
- **通知提醒**：`notification.open`
- **模态框**：`Modal.confirm`
- **加载状态**：`Spin / Skeleton / Table loading`
- **动画**：300ms, ease-in-out

---

## 页面模板

### 通用结构

- 面包屑导航
- 页面标题区
- 主要内容区

### 已实现

- 主框架页面：侧边栏、顶部导航、内容滚动
- Dashboard：统计卡片、图表

### 待完善

- 列表页
- 详情页
- 表单页
- 设置页

---

## 开发规范

- **新增操作**：默认使用**右侧抽屉**打开表单进行创建（除非需求明确允许其他方式）
- **组件命名**：PascalCase
- **文件命名**：与组件同名
- **样式类命名**：kebab-case
- **常量命名**：UPPER_SNAKE_CASE
- **样式**：Tailwind 优先，Ant Design 主题定制，自定义样式放组件目录