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