library-picturebook-activity/README.md

# 比赛管理系统

一个基于 Vue 3 + NestJS 的现代化比赛管理系统，支持用户管理、角色权限、菜单管理、数据字典、系统配置和日志记录等核心功能。

## 技术栈

### 前端
- **框架**: Vue 3 + TypeScript
- **构建工具**: Vite
- **UI 组件库**: Ant Design Vue
- **样式方案**: Tailwind CSS + SCSS + CSS Modules
- **状态管理**: Pinia
- **路由**: Vue Router 4
- **HTTP 客户端**: Axios
- **表单验证**: VeeValidate + Zod

### 后端
- **框架**: NestJS + TypeScript
- **数据库**: MySQL 8.0
- **ORM**: Prisma
- **认证授权**: JWT + RBAC (基于角色的访问控制)

## 项目结构

```
competition-management-system/
├── frontend/          # 前端项目
│   ├── src/
│   │   ├── api/       # API 接口
│   │   ├── assets/    # 静态资源
│   │   ├── components/# 公共组件
│   │   ├── layouts/   # 布局组件
│   │   ├── router/    # 路由配置
│   │   ├── stores/    # Pinia 状态管理
│   │   ├── styles/    # 样式文件
│   │   ├── types/     # TypeScript 类型定义
│   │   ├── utils/     # 工具函数
│   │   └── views/     # 页面组件
│   └── package.json
│
└── backend/           # 后端项目
    ├── prisma/        # Prisma 配置
    │   └── schema.prisma
    ├── src/
    │   ├── auth/      # 认证模块
    │   ├── users/     # 用户管理
    │   ├── roles/     # 角色管理
    │   ├── menus/     # 菜单管理
    │   ├── dict/      # 数据字典
    │   ├── config/    # 系统配置
    │   ├── logs/      # 日志记录
    │   └── prisma/    # Prisma 服务
    └── package.json
```

## 快速开始

### 环境要求

- Node.js >= 18.0.0
- pnpm >= 8.0.0
- MySQL >= 8.0

### 安装 pnpm

如果还没有安装 pnpm，可以通过以下方式安装：

```bash
# 使用 npm 安装
npm install -g pnpm

# 或使用 corepack（Node.js 16.13+）
corepack enable
corepack prepare pnpm@latest --activate
```

### 快速安装（推荐）

在项目根目录执行：

```bash
# 安装所有依赖（前端 + 后端）
pnpm install

# 或分别安装
pnpm --filter frontend install
pnpm --filter backend install
```

### 后端设置

1. 进入后端目录：
```bash
cd backend
```

2. 安装依赖（如果未在根目录安装）：
```bash
pnpm install
```

3. 配置环境变量，创建 `.env` 文件：
```env
DATABASE_URL="mysql://user:password@localhost:3306/competition_management?schema=public"
JWT_SECRET="your-secret-key-change-in-production"
PORT=3001
```

4. 初始化数据库：
```bash
# 生成 Prisma Client
pnpm prisma:generate

# 运行数据库迁移
pnpm prisma:migrate
```

5. 启动开发服务器：
```bash
# 方式1：在后端目录
pnpm start:dev

# 方式2：在根目录
pnpm dev:backend
```

后端服务将在 `http://localhost:3001` 启动。

### 前端设置

1. 进入前端目录：
```bash
cd frontend
```

2. 安装依赖（如果未在根目录安装）：
```bash
pnpm install
```

3. 启动开发服务器：
```bash
# 方式1：在前端目录
pnpm dev

# 方式2：在根目录
pnpm dev:frontend
```

前端应用将在 `http://localhost:3000` 启动。

### 同时启动前后端

在项目根目录执行：

```bash
pnpm dev
```

这将同时启动前端和后端开发服务器。

## 核心功能

### 1. 用户管理
- 用户列表查询（分页）
- 用户创建、编辑、删除
- 用户角色分配

### 2. 角色权限 (RBAC)
- 角色管理（创建、编辑、删除）
- 权限分配
- 基于角色的访问控制

### 3. 菜单管理
- 菜单树形结构管理
- 菜单权限配置
- 动态路由生成

### 4. 数据字典
- 字典类型管理
- 字典项管理
- 字典数据查询

### 5. 系统配置
- 系统参数配置
- 配置项管理

### 6. 日志记录
- 操作日志记录
- 日志查询和统计

## API 文档

### 认证接口

- `POST /api/auth/login` - 用户登录
- `GET /api/auth/user-info` - 获取当前用户信息
- `POST /api/auth/logout` - 用户登出

### 用户管理

- `GET /api/users` - 获取用户列表
- `GET /api/users/:id` - 获取用户详情
- `POST /api/users` - 创建用户
- `PATCH /api/users/:id` - 更新用户
- `DELETE /api/users/:id` - 删除用户

### 角色管理

- `GET /api/roles` - 获取角色列表
- `GET /api/roles/:id` - 获取角色详情
- `POST /api/roles` - 创建角色
- `PATCH /api/roles/:id` - 更新角色
- `DELETE /api/roles/:id` - 删除角色

### 菜单管理

- `GET /api/menus` - 获取菜单列表（树形结构）
- `GET /api/menus/:id` - 获取菜单详情
- `POST /api/menus` - 创建菜单
- `PATCH /api/menus/:id` - 更新菜单
- `DELETE /api/menus/:id` - 删除菜单

### 数据字典

- `GET /api/dict` - 获取字典列表
- `GET /api/dict/code/:code` - 根据代码获取字典
- `GET /api/dict/:id` - 获取字典详情
- `POST /api/dict` - 创建字典
- `PATCH /api/dict/:id` - 更新字典
- `DELETE /api/dict/:id` - 删除字典

### 系统配置

- `GET /api/config` - 获取配置列表
- `GET /api/config/key/:key` - 根据键获取配置
- `GET /api/config/:id` - 获取配置详情
- `POST /api/config` - 创建配置
- `PATCH /api/config/:id` - 更新配置
- `DELETE /api/config/:id` - 删除配置

### 日志记录

- `GET /api/logs` - 获取日志列表
- `GET /api/logs/:id` - 获取日志详情
- `POST /api/logs` - 创建日志

## 开发规范

### 代码风格
- 使用 ESLint 和 Prettier 进行代码格式化
- 遵循 TypeScript 严格模式
- 使用语义化的提交信息

### 提交规范
- `feat`: 新功能
- `fix`: 修复 bug
- `docs`: 文档更新
- `style`: 代码格式调整
- `refactor`: 代码重构
- `test`: 测试相关
- `chore`: 构建/工具相关

## 部署

### 前端构建
```bash
# 方式1：在前端目录
cd frontend
pnpm build

# 方式2：在根目录
pnpm build:frontend
```

构建产物在 `frontend/dist` 目录。

### 后端构建
```bash
# 方式1：在后端目录
cd backend
pnpm build
pnpm start:prod

# 方式2：在根目录
pnpm build:backend
cd backend
pnpm start:prod
```

### 同时构建前后端
```bash
pnpm build
```

## 许可证

MIT License

## 贡献

欢迎提交 Issue 和 Pull Request！