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 主题定制，自定义样式放组件目录