# init-base

**Repository Path**: sauida/init-base

## Basic Information

- **Project Name**: init-base
- **Description**: 用于学习以及开发项目基础框架
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-05
- **Last Updated**: 2025-12-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Nestjs, JavaScript, TypeScript

## README

# 🚀 init-base

> 现代化全栈开发框架集合 - 涵盖前端、后端、移动端的企业级项目模板

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
[![Node](https://img.shields.io/badge/node-%3E%3D18-green.svg)](https://nodejs.org)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue)](https://www.typescriptlang.org/)

---

## 📚 项目简介

`init-base` 是一个精心设计的全栈开发框架集合，包含了 4 个独立且完整的项目模板，适用于不同的开发场景。每个项目都遵循最佳实践，开箱即用。

### 🎯 项目列表

| 项目 | 技术栈 | 类型 | 端口 | 说明 |
|------|--------|------|------|------|
| **init-nest** | NestJS + Prisma + MySQL | 后端 REST API | 9000 | 企业级后端框架 |
| **init-react** | React 18 + Ant Design + Zustand | Web 前端 | 3000 | 后台管理系统 |
| **init-vue** | Vue 3 + Element Plus + Pinia | Web 前端 | 3001 | 后台管理系统 |
| **music-web** | Vue 3 + UnoCSS + Vite | 移动端 Web | 3000 | 响应式音乐网站 |

---

## ✨ 核心特性

### 🏗️ 架构特点
- ✅ **前后端分离**：清晰的职责划分，独立开发部署
- ✅ **TypeScript 全栈**：类型安全，提升开发效率
- ✅ **现代化工具链**：Vite、pnpm、ESLint、Prettier
- ✅ **企业级规范**：完善的代码规范和目录结构
- ✅ **开箱即用**：预配置完整，快速启动开发

### 🎨 功能亮点
- 🔐 **完整的 RBAC 权限系统**（用户、角色、菜单、部门）
- 📊 **实时监控面板**（系统健康、性能指标、缓存监控）
- 🌐 **在线用户管理**（实时统计、强制下线）
- 📖 **字典与配置管理**（灵活的系统参数配置）
- 🎵 **响应式音乐应用**（移动端适配、流畅体验）

---

## 🚀 快速开始

### 环境要求

```bash
Node.js  >= 18.x
pnpm     >= 8.x  (推荐使用 pnpm)
MySQL/MariaDB >= 8.0/10.x
Redis    >= 6.x  (可选)
```

### 📦 一键安装

```bash
# 克隆项目
git clone <repository-url>
cd init-base

# 安装所有项目依赖（使用 pnpm workspaces）
pnpm install
```

---

## 🎯 项目详细说明

### 1️⃣ init-nest - 企业级后端 API

**技术栈**：NestJS 11 + Prisma ORM + MySQL + Redis + JWT + Swagger

**核心功能**：
- 🔐 JWT 认证系统（Access Token + Refresh Token）
- 👥 用户管理（CRUD + 角色分配）
- 🔑 角色权限管理（RBAC 模型）
- 📋 菜单管理（动态菜单 + 按钮权限）
- 🏢 部门/岗位管理（树形结构）
- 📖 字典/配置管理（系统参数化）
- 📊 系统监控（健康检查 + 性能指标）
- 👨‍💻 在线用户管理（会话管理 + 强制下线）
- 💾 Redis 缓存监控（缓存统计 + 键管理）

**快速启动**：
```bash
cd init-nest

# 1. 配置数据库（复制 .env.example 为 .env 并修改）
cp .env.example .env

# 2. 数据库迁移
pnpm migrate

# 3. 填充测试数据
pnpm seed

# 4. 启动开发服务器
pnpm dev
```

📍 访问：`http://localhost:9000`  
📖 API 文档：`http://localhost:9000/api`

---

### 2️⃣ init-react - React 后台管理系统

**技术栈**：React 18 + TypeScript + Ant Design 5 + React Router 7 + Zustand + Vite

**核心功能**：
- 📊 **仪表盘**：数据概览、快捷入口
- 👥 **系统管理**：用户、角色、菜单、部门、岗位、字典、配置
- 📈 **系统监控**：实时监控、性能指标、缓存监控、在线用户
- 🎨 **现代化 UI**：Ant Design 5 组件库，响应式布局
- 🔒 **权限控制**：路由守卫、按钮权限

**快速启动**：
```bash
cd init-react

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev
```

📍 访问：`http://localhost:3000`  
🔑 默认账号：`admin` / `admin123`

---

### 3️⃣ init-vue - Vue 后台管理系统

**技术栈**：Vue 3 + TypeScript + Element Plus + Vue Router 4 + Pinia + Vite

**核心功能**：
- 📊 **完整的后台管理功能**（与 init-react 功能一致）
- 🎨 **Element Plus UI**：企业级组件库
- ⚡ **Composition API**：现代化 Vue 3 写法
- 🔄 **自动导入**：API 和组件自动导入

**快速启动**：
```bash
cd init-vue

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev
```

📍 访问：`http://localhost:3001`  
🔑 默认账号：`admin` / `admin123`

---

### 4️⃣ music-web - 响应式音乐网站

**技术栈**：Vue 3 + TypeScript + UnoCSS + Vite + Pinia + postcss-pxtorem

**核心特性**：
- 🎵 **音乐播放器**：连续播放、进度控制、播放列表
- 📱 **移动端优先**：完美的移动端适配（postcss-pxtorem + flexible）
- 🎨 **现代化 UI**：毛玻璃效果、流畅动画、响应式设计
- 🔍 **搜索功能**：搜索歌曲/歌手、热门搜索、搜索历史
- 📋 **歌单管理**：歌单详情、歌手页面
- ⚡ **原子化 CSS**：UnoCSS 高性能样式方案

**页面结构**：
- 🏠 首页：推荐歌单、热门歌曲
- 🔍 发现：分类浏览、榜单
- 📋 歌单详情：歌曲列表、播放控制
- 👤 个人中心：我的音乐、收藏

**移动端适配方案**：
```scss
// 设计稿 375px，直接写 px，自动转 rem
.card {
  width: 345px;      // → 自动转换为 9.2rem
  padding: 16px;     // → 自动转换为 0.43rem
  border: 1px solid; // → 1px 不转换（保护细边框）
}
```

**快速启动**：
```bash
cd music-web

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev
```

📍 访问：`http://localhost:3000`

---

## 📁 项目结构

```
init-base/
├── init-nest/                    # NestJS 后端 API
│   ├── src/
│   │   ├── core/                # 核心模块
│   │   │   ├── auth/           # JWT 认证 + Token 管理
│   │   │   ├── cache/          # 缓存模块
│   │   │   ├── database/       # Prisma 数据库
│   │   │   ├── redis/          # Redis 连接
│   │   │   └── request-log/    # 请求日志
│   │   ├── modules/            # 业务模块
│   │   │   ├── user/           # 用户管理
│   │   │   ├── role/           # 角色管理
│   │   │   ├── menu/           # 菜单管理
│   │   │   ├── department/     # 部门管理
│   │   │   ├── position/       # 职位管理
│   │   │   ├── dict/           # 字典管理
│   │   │   ├── config/         # 参数管理
│   │   │   ├── monitor/        # 系统监控
│   │   │   ├── online-user/    # 在线用户
│   │   │   └── cache-monitor/  # 缓存监控
│   │   ├── common/             # 通用模块
│   │   │   ├── decorators/     # 装饰器
│   │   │   ├── guards/         # 守卫
│   │   │   ├── filters/        # 过滤器
│   │   │   └── interceptors/   # 拦截器
│   │   └── config/             # 配置文件
│   ├── prisma/
│   │   ├── schema.prisma       # 数据库模型
│   │   ├── seed.ts             # 数据填充
│   │   └── migrations/         # 迁移文件
│   └── test/                   # 测试文件
│
├── init-react/                  # React 后台管理系统
│   ├── src/
│   │   ├── api/                # API 接口封装
│   │   ├── pages/              # 页面组件
│   │   │   ├── Dashboard/      # 仪表盘
│   │   │   ├── User/           # 用户管理
│   │   │   ├── Role/           # 角色管理
│   │   │   ├── Menu/           # 菜单管理
│   │   │   ├── Department/     # 部门管理
│   │   │   ├── Position/       # 职位管理
│   │   │   ├── Dict/           # 字典管理
│   │   │   ├── Config/         # 参数管理
│   │   │   ├── Monitor/        # 系统监控
│   │   │   ├── OnlineUser/     # 在线用户
│   │   │   ├── CacheMonitor/   # 缓存监控
│   │   │   └── Login/          # 登录页
│   │   ├── layouts/            # 布局组件
│   │   │   └── BasicLayout.tsx # 基础布局（侧边栏+导航栏）
│   │   ├── router/             # 路由配置
│   │   │   ├── index.tsx       # 路由注册
│   │   │   └── RouteGuard.tsx  # 路由守卫
│   │   ├── store/              # Zustand 状态管理
│   │   │   └── authStore.ts    # 认证状态
│   │   ├── types/              # TypeScript 类型
│   │   └── utils/              # 工具函数
│   │       ├── request.ts      # Axios 封装
│   │       └── storage.ts      # 本地存储
│   ├── public/                 # 静态资源
│   └── package.json
│
├── init-vue/                    # Vue 后台管理系统
│   ├── src/
│   │   ├── api/                # API 接口封装
│   │   ├── pages/              # 页面组件（与 React 版本对应）
│   │   │   ├── Dashboard/
│   │   │   ├── User/
│   │   │   ├── Role/
│   │   │   ├── Menu/
│   │   │   ├── Department/
│   │   │   ├── Position/
│   │   │   ├── Dict/
│   │   │   ├── Config/
│   │   │   ├── Monitor/
│   │   │   ├── OnlineUser/
│   │   │   ├── CacheMonitor/
│   │   │   └── Login/
│   │   ├── layouts/            # 布局组件
│   │   │   └── BasicLayout.vue # 基础布局
│   │   ├── router/             # Vue Router 配置
│   │   ├── store/              # Pinia 状态管理
│   │   │   ├── index.ts
│   │   │   └── auth.ts         # 认证状态
│   │   ├── types/              # TypeScript 类型
│   │   │   ├── index.ts
│   │   │   ├── auto-imports.d.ts    # 自动导入类型
│   │   │   └── components.d.ts      # 组件类型
│   │   └── utils/              # 工具函数
│   │       ├── request.ts
│   │       └── storage.ts
│   ├── public/
│   └── package.json
│
├── music-web/                   # Vue 移动端音乐网站
│   ├── src/
│   │   ├── components/         # 业务组件
│   │   │   ├── MusicPlayer/    # 音乐播放器
│   │   │   ├── SongCard/       # 歌曲卡片
│   │   │   └── ...
│   │   ├── views/              # 页面视图
│   │   │   ├── Discover.vue    # 发现页
│   │   │   ├── Search.vue      # 搜索页
│   │   │   ├── Playlist.vue    # 歌单详情
│   │   │   ├── Artist.vue      # 歌手页
│   │   │   └── My.vue          # 我的音乐
│   │   ├── store/              # Pinia 状态
│   │   │   ├── player.ts       # 播放器状态
│   │   │   └── search.ts       # 搜索状态
│   │   ├── router/             # 路由配置
│   │   ├── styles/             # 样式系统
│   │   │   ├── variables.scss  # SCSS 变量
│   │   │   ├── mixins.scss     # 混入
│   │   │   └── global.scss     # 全局样式
│   │   └── utils/              # 工具函数
│   │       ├── flexible.ts     # rem 适配
│   │       └── ...
│   ├── uno.config.ts           # UnoCSS 配置
│   └── package.json
│
├── MODULES.md                   # 功能模块详细说明
├── QUICK_START.md               # 快速启动指南
├── LICENSE                      # MIT 许可证
└── README.md                    # 本文档
```

---

## 🔧 开发指南

### 添加新功能模块

#### 后端（init-nest）
```bash
# 使用 NestJS CLI 生成模块
cd init-nest
nest g resource modules/example --no-spec

# 步骤：
# 1. 在 prisma/schema.prisma 添加数据模型
# 2. 运行 prisma migrate dev 生成迁移
# 3. 在生成的模块中编写业务逻辑
# 4. 添加 Swagger 文档注解
```

#### 前端（init-react/init-vue）
```bash
# 1. 在 src/api/ 创建 API 文件
# 2. 在 src/types/ 添加 TypeScript 类型
# 3. 在 src/pages/ 创建页面组件
# 4. 在 src/router/ 注册路由
# 5. 在布局文件中添加菜单项
```

### 代码规范

所有项目都配置了：
- ✅ **ESLint**：代码质量检查
- ✅ **Prettier**：代码格式化
- ✅ **TypeScript**：类型检查
- ✅ **Git Hooks**：提交前自动检查

```bash
# 代码检查
pnpm lint

# 自动修复
pnpm lint:fix

# 格式化
pnpm format
```

---

## 📊 技术栈对比

| 特性 | init-react | init-vue | music-web |
|------|------------|----------|-----------|
| **框架** | React 18 | Vue 3 | Vue 3 |
| **UI 库** | Ant Design 5 | Element Plus | 自定义 + UnoCSS |
| **状态管理** | Zustand | Pinia | Pinia |
| **路由** | React Router 7 | Vue Router 4 | Vue Router 4 |
| **CSS 方案** | TailwindCSS | 原生 CSS | UnoCSS + SCSS |
| **适配方案** | 响应式布局 | 响应式布局 | pxtorem + flexible |
| **适用场景** | 后台管理 | 后台管理 | 移动端网站 |

---

## 🎨 界面预览

### init-react / init-vue 后台管理系统
- 📊 仪表盘：数据概览、统计图表
- 👥 用户管理：列表、新增、编辑、删除
- 🔑 角色管理：权限分配、菜单树选择
- 📋 菜单管理：树形展示、拖拽排序
- 📈 系统监控：实时监控、性能分析

### music-web 音乐网站
- 🎵 现代化音乐播放器界面
- 📱 完美的移动端体验
- 🎨 毛玻璃效果、流畅动画
- 🔍 智能搜索、热门推荐

---

## 📖 详细文档

- 📘 [功能模块说明](./MODULES.md) - 详细的功能清单和 API 说明
- 🚀 [快速启动指南](./QUICK_START.md) - 一步步启动指南
- 🔧 [后端文档](./init-nest/README.md) - NestJS 后端详细说明
- ⚛️ [React 前端文档](./init-react/README.md) - React 项目说明
- 💚 [Vue 前端文档](./init-vue/README.md) - Vue 项目说明
- 🎵 [音乐网站文档](./music-web/README.md) - 移动端适配说明

---

## 🔒 权限系统

### RBAC 权限模型
```
用户 (User)
  └─ 关联 N 个角色 (Role)
       └─ 关联 N 个菜单 (Menu)
            ├─ 目录 (Directory)
            ├─ 菜单 (Menu)
            └─ 按钮 (Button)
```

### 权限控制层级
1. **路由级别**：未登录跳转登录页
2. **菜单级别**：根据角色动态生成菜单
3. **按钮级别**：基于权限标识控制按钮显示

---

## 🚧 后续规划

### init-react / init-vue
- [ ] 操作日志记录
- [ ] 数据导入导出
- [ ] 主题切换（亮色/暗色）
- [ ] 国际化支持（i18n）
- [ ] 移动端适配优化

### music-web
- [ ] 播放器功能增强（歌词显示）
- [ ] 用户系统（登录、收藏）
- [ ] 社交功能（评论、分享）
- [ ] PWA 支持（离线缓存）
- [ ] 音频可视化

### init-nest
- [ ] WebSocket 支持
- [ ] 消息队列集成
- [ ] 微服务架构
- [ ] 定时任务管理
- [ ] 文件上传服务

---

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

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

---

## 📄 开源协议

本项目采用 [MIT](LICENSE) 协议开源。

---

## 🌟 致谢

感谢以下开源项目：
- [NestJS](https://nestjs.com/)
- [React](https://react.dev/)
- [Vue.js](https://vuejs.org/)
- [Ant Design](https://ant.design/)
- [Element Plus](https://element-plus.org/)
- [Prisma](https://www.prisma.io/)
- [Vite](https://vitejs.dev/)

---

**最后更新**: 2025-12-02  
**作者**: init-base Team