Nex Design

面向 React + Ant Design + Tailwind CSS 的前端设计语言规范

项目简介

Nex Design 是为开发团队打造的一套标准化设计语言系统，提供统一、高效、易维护的前端设计规范和页面模板。

技术栈

• 框架: React 18+
• 构建工具: Vite 5.x
• 组件库: Ant Design 5.x
• 样式方案: Tailwind CSS 3.x
• 路由: React Router v6
• 包管理: Yarn
• 运行时: Node.js 16+

快速开始

环境要求

• Node.js >= 16.0.0
• Yarn >= 1.22.0

安装依赖

yarn install

开发模式

yarn dev

访问 http://localhost:5173 查看项目

构建生产版本

yarn build

预览生产版本

yarn preview

生产部署

使用 Docker + PM2 部署

# 构建并启动容器
docker-compose up -d --build

# 查看运行状态
docker-compose ps

# 查看日志
docker-compose logs -f

访问 http://localhost:3000

部署文档：

• 快速开始 - 快速参考和常用命令
• 完整部署文档 - 详细的部署配置和优化
• 文档目录配置 - docs 目录问题说明

项目结构

Nex Design/
├── docs/                    # 文档目录
│   └── pages/              # 页面设计文档
├── public/                 # 静态资源
├── src/                    # 源代码
│   ├── assets/            # 资源文件（图片、字体等）
│   ├── components/        # 公共组件
│   ├── pages/             # 页面组件
│   ├── styles/            # 全局样式
│   ├── utils/             # 工具函数
│   └── constants/         # 常量定义
├── DESIGN_GUIDE.md        # 设计规范指南
├── package.json           # 项目配置
└── README.md             # 项目说明

设计规范

详细的设计规范请查看 DESIGN_GUIDE.md，包含：

• 设计原则
• 颜色系统
• 排版规范
• 间距系统
• 组件规范
• 布局规范
• 交互规范
• 响应式设计
• 页面模板

页面模板

项目将提供以下标准页面模板：

• 首页 (Dashboard) - 数据概览、快捷入口
• 主框架页面 - 导航布局、侧边栏、顶部栏
• 列表页 - 数据表格、筛选、操作
• 详情页 - 信息展示、关联数据
• 表单页 - 数据录入、验证、提交
• 设置页 - 配置管理、偏好设置

每个模板都会提供完整的设计规范说明和代码实现。

开发规范

代码风格

• 使用 ESLint 进行代码检查
• 组件命名使用大驼峰 (PascalCase)
• 文件命名与组件同名
• 优先使用函数式组件和 Hooks

CSS 使用规范

1. 优先使用 Tailwind CSS 工具类
2. 通过 Ant Design 主题配置进行定制
3. 仅在必要时编写自定义样式

组件开发规范

• 保持组件的单一职责
• 合理拆分组件，提高复用性
• 使用 PropTypes 或 TypeScript 进行类型检查
• 编写必要的注释和文档

参与贡献

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

版本历史

• v1.0.0 (2025-11-05)
  • 初始化项目
  • 创建基础设计规范文档
  • 建立项目结构
  • 添加 Docker + PM2 部署支持
  • 配置完整的部署文档

许可证

MIT License

联系方式

如有问题或建议，请联系开发团队。

---

维护团队: Nex Design Team 最后更新: 2024-11-04