171 lines
3.6 KiB
Markdown
171 lines
3.6 KiB
Markdown
# 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
|
|
|
|
### 安装依赖
|
|
|
|
```bash
|
|
yarn install
|
|
```
|
|
|
|
### 开发模式
|
|
|
|
```bash
|
|
yarn dev
|
|
```
|
|
|
|
访问 http://localhost:5173 查看项目
|
|
|
|
### 构建生产版本
|
|
|
|
```bash
|
|
yarn build
|
|
```
|
|
|
|
### 预览生产版本
|
|
|
|
```bash
|
|
yarn preview
|
|
```
|
|
|
|
## 生产部署
|
|
|
|
### 使用 Docker + PM2 部署
|
|
|
|
```bash
|
|
# 构建并启动容器
|
|
docker-compose up -d --build
|
|
|
|
# 查看运行状态
|
|
docker-compose ps
|
|
|
|
# 查看日志
|
|
docker-compose logs -f
|
|
```
|
|
|
|
访问 http://localhost:3000
|
|
|
|
**部署文档：**
|
|
- [快速开始](./QUICKSTART.md) - 快速参考和常用命令
|
|
- [完整部署文档](./DEPLOYMENT.md) - 详细的部署配置和优化
|
|
- [文档目录配置](./docs/DOCKER_DOCS_SETUP.md) - docs 目录问题说明
|
|
|
|
## 项目结构
|
|
|
|
```
|
|
Nex Design/
|
|
├── docs/ # 文档目录
|
|
│ └── pages/ # 页面设计文档
|
|
├── public/ # 静态资源
|
|
├── src/ # 源代码
|
|
│ ├── assets/ # 资源文件（图片、字体等）
|
|
│ ├── components/ # 公共组件
|
|
│ ├── pages/ # 页面组件
|
|
│ ├── styles/ # 全局样式
|
|
│ ├── utils/ # 工具函数
|
|
│ └── constants/ # 常量定义
|
|
├── DESIGN_GUIDE.md # 设计规范指南
|
|
├── package.json # 项目配置
|
|
└── README.md # 项目说明
|
|
```
|
|
|
|
## 设计规范
|
|
|
|
详细的设计规范请查看 [DESIGN_GUIDE.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
|