177 lines
3.8 KiB
Markdown
177 lines
3.8 KiB
Markdown
# Nex Design 前端设计规范
|
||
|
||
面向 **React + Ant Design + Tailwind CSS** 的前端设计语言系统，目标：
|
||
|
||
- **一致性**：保证视觉与交互统一
|
||
- **高效性**：提供可复用组件与布局模式
|
||
- **可维护性**：清晰规范，便于迭代
|
||
- **用户体验**：直观易用
|
||
|
||
## 技术栈
|
||
|
||
- 框架：React 18+
|
||
- 组件库：Ant Design 5.x
|
||
- 样式：Tailwind CSS 3.x
|
||
- 包管理：Yarn
|
||
- 运行时：Node.js 16+
|
||
|
||
---
|
||
|
||
## 设计原则
|
||
|
||
- **清晰明确**：界面直观，操作易理解
|
||
- **一致性优先**：视觉、交互、用词统一
|
||
- **效率至上**：减少操作步骤，提高效率
|
||
- **反馈及时**：操作有明确状态反馈
|
||
- **容错友好**：预防错误，提示明确
|
||
|
||
---
|
||
|
||
## 颜色系统
|
||
|
||
| 类型 | 用途 | 颜色值 |
|
||
|------|------|-------|
|
||
| 主色调 | 关键按钮、重要信息、链接 | `#b8178d` |
|
||
| 辅助色 | 信息提示 | `#1677ff` |
|
||
| 功能色 | Success / Warning / Error / Info | 按语义使用 |
|
||
| 中性色 | 文本、背景、边框 | - |
|
||
|
||
**使用规范**：
|
||
|
||
- 主色：关键按钮、重要信息、链接
|
||
- 功能色：按语义使用，不混淆
|
||
- 中性色：文本、背景、边框
|
||
- 对比度 ≥ 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 主题定制，自定义样式放组件目录
|
||
|