# NextJS-Base-Admin

**Repository Path**: shortlink/nextjs-base-admin

## Basic Information

- **Project Name**: NextJS-Base-Admin
- **Description**: 基于 Next.js 16.1.4、Ant Design 和 MySQL 构建的现代化后台管理系统。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-01-24
- **Last Updated**: 2026-02-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Next.js Base Admin

基于 Next.js 16.1.4、Ant Design 和 MySQL 构建的现代化后台管理系统。

## 功能特性

- **Next.js 16.1.4** - 最新版本，使用 App Router
- **Ant Design 6.2.1** - 精美的 UI 组件库
- **MySQL 数据库** - 支持连接池
- **JWT 身份验证** - 安全的基于 Token 的认证
- **基于角色的访问控制** - 细粒度的权限管理
- **菜单管理** - 动态菜单系统，支持图标选择器
- **管理员管理** - 用户管理，支持角色、部门和岗位分配
- **部门管理** - 树形结构的部门管理
- **岗位管理** - 岗位/职位管理
- **代码生成器** - 基于数据库表自动生成 CRUD 代码
- **系统配置** - 网站设置和微信小程序配置
- **主题切换** - 支持亮色/暗色模式
- **文件上传** - 图片上传功能
- **NProgress** - 加载进度指示器
- **Axios 集成** - 带拦截器的 HTTP 客户端
- **个人中心** - 个人资料管理和密码修改
- **在线用户** - 实时在线用户监控
- **操作日志** - 完整的操作日志记录
- **数据字典** - 系统下拉选项配置
- **系统监控** - 服务器和数据库状态监控
- **定时任务** - 任务调度和执行日志
- **图标选择器** - 完整的 Ant Design 图标选择，支持搜索
- **资源管理** - 文件和资源管理，支持分类
- **存储配置** - 多种存储类型支持（本地、OSS、七牛云）

## 技术栈

- **框架**: Next.js 16.1.4
- **UI 库**: Ant Design 6.2.1
- **数据库**: MySQL with mysql2/promise
- **认证**: JWT with jose
- **HTTP 客户端**: Axios
- **样式**: Tailwind CSS
- **语言**: TypeScript

## 快速开始

### 环境要求

- Node.js 18+
- MySQL 5.7+
- npm 或 yarn

### 安装

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev
```

### 环境配置

在项目根目录创建 `.env` 文件：

```env
# 数据库配置
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=root
DB_NAME=base_admin
DB_CONNECTION_LIMIT=10
DB_QUEUE_LIMIT=0
```

如果未设置环境变量，将使用以下默认值：
- `DB_HOST`: localhost
- `DB_USER`: root
- `DB_PASSWORD`: root
- `DB_NAME`: base_admin
- `DB_CONNECTION_LIMIT`: 10
- `DB_QUEUE_LIMIT`: 0

### 数据库配置

1. 创建名为 `base_admin` 的 MySQL 数据库

2. 手动执行 SQL 脚本初始化数据库表和数据

### 默认管理员账号

- **用户名**: admin
- **密码**: admin123
- **角色**: 超级管理员（拥有所有权限）

## Docker 部署

### 环境要求

- Docker 20.10+
- Docker Compose 2.0+

### 使用 Docker Compose 快速启动

使用 Docker Compose 部署项目是最简单的方式：

```bash
# 构建并启动所有服务
docker-compose up -d

# 查看日志
docker-compose logs -f

# 停止所有服务
docker-compose down

# 停止并删除卷（警告：这将删除所有数据）
docker-compose down -v
```

Docker Compose 配置包含：
- **MySQL 8.0** - 数据库服务，自动初始化
- **Next.js 应用** - 应用服务器

### 手动 Docker 部署

如果你更喜欢不使用 Docker Compose 的 Docker 部署方式：

#### 构建镜像

```bash
# 构建 Docker 镜像
docker build -t nextjs-base-admin .

# 或指定标签
docker build -t nextjs-base-admin:latest .
```

#### 使用外部 MySQL

如果你有外部 MySQL 数据库：

```bash
docker run -d \
  --name base-admin-app \
  -p 3000:3000 \
  -e DB_HOST=your-mysql-host \
  -e DB_USER=your-mysql-user \
  -e DB_PASSWORD=your-mysql-password \
  -e DB_NAME=base_admin \
  nextjs-base-admin:latest
```

#### 使用 Docker Compose MySQL

```bash
# 先启动 MySQL
docker run -d \
  --name base-admin-mysql \
  -e MYSQL_ROOT_PASSWORD=root \
  -e MYSQL_DATABASE=base_admin \
  -p 3306:3306 \
  mysql:8.0

# 等待 MySQL 准备就绪，然后启动应用
docker run -d \
  --name base-admin-app \
  --link base-admin-mysql:mysql \
  -p 3000:3000 \
  -e DB_HOST=mysql \
  -e DB_USER=root \
  -e DB_PASSWORD=root \
  -e DB_NAME=base_admin \
  nextjs-base-admin:latest
```

### 环境变量

Docker 容器接受以下环境变量：

| 变量 | 默认值 | 描述 |
|----------|---------|-------------|
| `NODE_ENV` | production | Node 环境 |
| `DB_HOST` | mysql | 数据库主机 |
| `DB_USER` | root | 数据库用户 |
| `DB_PASSWORD` | root | 数据库密码 |
| `DB_NAME` | base_admin | 数据库名称 |
| `DB_CONNECTION_LIMIT` | 10 | 连接池限制 |
| `DB_QUEUE_LIMIT` | 0 | 连接队列限制 |

### 数据库初始化

使用 Docker Compose 时，`database/` 目录中的 SQL 脚本将在 MySQL 容器首次启动时自动执行。

如果你使用手动 Docker 部署，需要手动运行 SQL 脚本：

```bash
# 复制 SQL 脚本到容器
docker cp database/ base-admin-mysql:/docker-entrypoint-initdb.d/

# 重启 MySQL 以执行脚本
docker restart base-admin-mysql
```

### 访问应用

启动容器后：

- **应用地址**: http://localhost:3000
- **MySQL 主机**: localhost:3306
- **默认管理员**: admin / admin123

### 故障排除

#### 查看容器日志

```bash
# 查看应用日志
docker logs base-admin-app

# 查看 MySQL 日志
docker logs base-admin-mysql

# 使用 Docker Compose 查看所有日志
docker-compose logs
```

#### 访问容器 Shell

```bash
# 访问应用容器
docker exec -it base-admin-app sh

# 访问 MySQL 容器
docker exec -it base-admin-mysql bash
```

#### 重启服务

```bash
# 重启所有服务
docker-compose restart

# 重启特定服务
docker-compose restart app
```

#### 清理

```bash
# 停止并删除容器
docker-compose down

# 停止并删除容器和卷（警告：删除所有数据）
docker-compose down -v

# 删除所有镜像
docker rmi nextjs-base-admin
```

## 项目结构

```
├── app/
│   ├── admin/              # 管理后台页面
│   │   ├── dashboard/      # 仪表盘（含系统监控）
│   │   ├── menu-management/ # 菜单管理（含图标选择器）
│   │   ├── role-management/ # 角色管理
│   │   ├── manager/        # 管理员管理
│   │   ├── dept/           # 部门管理
│   │   ├── post/           # 岗位管理
│   │   ├── website-conf/   # 网站设置
│   │   ├── wechat-mp-conf/# 微信小程序配置
│   │   ├── code-generator/  # 代码生成器
│   │   ├── profile/       # 个人中心
│   │   ├── online-users/   # 在线用户管理
│   │   ├── operation-log/  # 操作日志
│   │   ├── dict/          # 数据字典管理
│   │   ├── scheduled-tasks/# 定时任务管理
│   │   ├── reset-password/  # 修改密码
│   │   ├── resource-management/ # 资源管理
│   │   ├── storage-config/   # 存储配置
│   │   ├── forbidden/      # 403 页面
│   │   └── not-found.tsx  # 404 页面
│   ├── api/               # API 路由
│   │   ├── login/          # 登录 API
│   │   ├── menus/          # 菜单 CRUD API
│   │   ├── roles/          # 角色 CRUD API
│   │   ├── managers/       # 管理员 CRUD API
│   │   ├── depts/          # 部门 CRUD API
│   │   ├── posts/          # 岗位 CRUD API
│   │   ├── system-conf/    # 系统配置 API
│   │   ├── upload/         # 文件上传 API
│   │   ├── role-permissions/# 角色权限 API
│   │   ├── check-permission/# 权限检查 API
│   │   ├── user/           # 用户信息、更新、修改密码
│   │   ├── reset-password/  # 密码重置 API
│   │   ├── online-users/    # 在线用户 API
│   │   ├── operation-log/   # 操作日志 API
│   │   ├── dict-type/       # 字典类型 API
│   │   ├── dict-data/       # 字典数据 API
│   │   ├── scheduled-tasks/  # 定时任务 API
│   │   ├── job-logs/        # 任务执行日志 API
│   │   ├── system-info/      # 系统信息 API
│   │   ├── database-info/   # 数据库信息 API
│   │   └── code-generator/  # 代码生成器 API
│   └── login/            # 登录页面
├── components/            # 可复用组件
│   ├── IconSelector.tsx  # 图标选择器（含搜索）
│   ├── iconConfig.ts     # 图标配置
│   ├── ImageUpload.tsx   # 图片上传组件
│   ├── NProgressProvider.tsx # NProgress 提供者
│   └── NProgressLink.tsx  # NProgress 链接包装器
├── lib/                  # 工具函数
│   ├── db.ts            # 数据库连接池
│   ├── api.ts          # API 客户端（基于 axios）
│   ├── auth.ts         # JWT 工具函数
│   └── http.ts        # HTTP 拦截器
└── public/              # 静态文件
    └── uploads/          # 上传的文件
```

## API 文档

### 身份验证

- `POST /api/login` - 用户登录
- `POST /api/reset-password` - 重置密码

### 用户管理

- `GET /api/user/info` - 获取当前用户信息
- `PUT /api/user/update` - 更新用户资料
- `POST /api/user/change-password` - 修改密码

### 菜单管理

- `GET /api/menus` - 获取菜单列表
- `POST /api/menus` - 创建菜单
- `PUT /api/menus/[id]` - 更新菜单
- `DELETE /api/menus/[id]` - 删除菜单

### 角色管理

- `GET /api/roles` - 获取角色列表
- `POST /api/roles` - 创建角色
- `PUT /api/roles/[id]` - 更新角色
- `DELETE /api/roles/[id]` - 删除角色

### 角色权限

- `GET /api/role-permissions?roleId=X` - 获取角色权限
- `PUT /api/role-permissions` - 更新角色权限

### 管理员管理

- `GET /api/managers` - 获取管理员列表
- `POST /api/managers` - 创建管理员
- `PUT /api/managers/[id]` - 更新管理员
- `DELETE /api/managers/[id]` - 删除管理员

### 部门管理

- `GET /api/depts` - 获取部门列表（树形结构）
- `POST /api/depts` - 创建部门
- `PUT /api/depts/[id]` - 更新部门
- `DELETE /api/depts/[id]` - 删除部门

### 岗位管理

- `GET /api/posts` - 获取岗位列表
- `POST /api/posts` - 创建岗位
- `PUT /api/posts/[id]` - 更新岗位
- `DELETE /api/posts/[id]` - 删除岗位

### 代码生成器

- `GET /api/code-generator/tables` - 获取数据库表列表
- `GET /api/code-generator/columns?table=X` - 获取表字段信息

### 在线用户

- `GET /api/online-users` - 获取在线用户列表
- `DELETE /api/online-users` - 强制下线用户

### 操作日志

- `GET /api/operation-log` - 获取操作日志

### 数据字典

- `GET /api/dict-type` - 获取字典类型
- `POST /api/dict-type` - 创建字典类型
- `PUT /api/dict-type/[id]` - 更新字典类型
- `DELETE /api/dict-type/[id]` - 删除字典类型
- `GET /api/dict-data` - 获取字典数据
- `POST /api/dict-data` - 创建字典数据
- `PUT /api/dict-data/[id]` - 更新字典数据
- `DELETE /api/dict-data/[id]` - 删除字典数据

### 定时任务

- `GET /api/scheduled-tasks` - 获取定时任务
- `POST /api/scheduled-tasks` - 创建定时任务
- `PUT /api/scheduled-tasks/[id]` - 更新定时任务
- `DELETE /api/scheduled-tasks/[id]` - 删除定时任务
- `POST /api/scheduled-tasks/[id]/execute` - 执行任务
- `GET /api/job-logs` - 获取任务执行日志

### 系统监控

- `GET /api/system-info` - 获取系统信息
- `GET /api/database-info` - 获取数据库信息

### 资源管理

- `GET /api/resources?category_id=X` - 获取资源列表
- `POST /api/resources` - 创建资源
- `PUT /api/resources/[id]` - 更新资源
- `DELETE /api/resources/[id]` - 删除资源
- `GET /api/resources/[id]` - 获取资源详情

### 资源分类

- `GET /api/resource-categories` - 获取分类列表（树形结构）
- `POST /api/resource-categories` - 创建分类
- `PUT /api/resource-categories/[id]` - 更新分类
- `DELETE /api/resource-categories/[id]` - 删除分类

### 存储配置

- `GET /api/storage-configs` - 获取存储配置列表
- `POST /api/storage-configs` - 创建存储配置
- `PUT /api/storage-configs/[id]` - 更新存储配置
- `DELETE /api/storage-configs/[id]` - 删除存储配置
- `GET /api/storage-configs/[id]` - 获取存储配置详情

### 系统配置

- `GET /api/system-conf?cate=X` - 按分类获取配置
- `PUT /api/system-conf` - 更新配置

### 文件上传

- `POST /api/upload` - 上传文件

### 权限检查

- `GET /api/check-permission?menuId=X` - 检查用户权限

## 配置类型

系统支持以下配置输入类型：

- `input` - 文本输入框
- `textarea` - 文本域
- `number` - 数字输入框
- `switch` - 开关切换
- `image` - 图片上传

## 代码生成器

代码生成器提供以下功能：

- **表选择** - 自动获取所有数据库表
- **字段配置** - 配置显示名称、表单类型、验证规则
- **智能类型推断** - 根据字段类型自动推荐表单控件
- **代码预览** - 实时预览生成的代码
- **代码下载** - 下载生成的页面和 API 代码

支持的表单类型：
- `input` - 文本输入框
- `textarea` - 文本域
- `number` - 数字输入框
- `date` - 日期选择器
- `datetime` - 日期时间选择器
- `switch` - 开关切换
- `select` - 下拉选择框

支持的查询类型：
- `none` - 不查询
- `like` - 模糊查询
- `eq` - 精确查询
- `range` - 范围查询

## 许可证

MIT