3.8 KiB

Raw Blame History

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