# 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