# Redvadmin-frontend

**Repository Path**: redv678/redvadmin-frontend

## Basic Information

- **Project Name**: Redvadmin-frontend
- **Description**: 这是redvadmin项目的前端UI，欢迎使用
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2025-03-20
- **Last Updated**: 2026-01-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Redv Admin - 企业级中后台管理系统

<p align="center">
  <img src="https://img.shields.io/badge/Vue-3.5+-34495e?style=flat&logo=vue.js" alt="Vue">
  <img src="https://img.shields.io/badge/TypeScript-5.6+-3178c6?style=flat&logo=typescript" alt="TypeScript">
  <img src="https://img.shields.io/badge/Element Plus-2.9+-409eff?style=flat&logo=element" alt="Element Plus">
  <img src="https://img.shields.io/badge/Vite-6.2+-646cff?style=flat&logo=vite" alt="Vite">
  <img src="https://img.shields.io/badge/License-MIT-green?style=flat" alt="License">
</p>

## 📖 项目简介

基于 **Vue 3.5+ + TypeScript 5.6+ + Element Plus 2.9+ + Vite 6.2+** 的现代化企业级中后台管理系统。

采用 **Monorepo** 工程化管理方案，集成 **FASTCRUD** 快速 CRUD 开发能力，基于 **Vben Admin** 架构进行深度定制。

### ✨ 项目特点

- 🚀 **最新技术栈**：基于 Vue 3、TypeScript、Vite 6 等最新技术栈开发
- 📦 **Monorepo 架构**：使用 Turbo + pnpm workspace 管理多应用项目
- 🎨 **三套 UI 方案**：支持 Element Plus、Ant Design Vue、Naive UI 三种 UI 框架
- 🔐 **完善的权限系统**：内置动态路由、按钮级权限控制
- 🌍 **国际化支持**：内置完善的国际化方案
- 📱 **响应式设计**：支持 PC、平板、移动端多端适配
- 🎯 **TypeScript**：完整的类型检查，确保代码质量
- 🔧 **开箱即用**：丰富的示例和文档，快速上手

---

## 🖥️ 环境准备

### 必备环境

在开始之前，请确保你的开发环境满足以下要求：

| 工具 | 版本要求 | 说明 |
|------|---------|------|
| **Node.js** | >= 20.10.0 | [下载地址](https://nodejs.org/) |
| **pnpm** | >= 9.12.0 | 推荐使用 corepack 启用 |
| **Git** | 最新版本 | [下载地址](https://git-scm.com/) |

> **⚠️ 重要提示**：本项目使用 pnpm 作为包管理器，请勿使用 npm 或 yarn！

### 推荐开发工具

#### IDE
- **VSCode**（强烈推荐）- [下载地址](https://code.visualstudio.com/)

#### VSCode 必装插件
- **Vue Language Features (Volar)** - Vue 3 语言支持
- **TypeScript Vue Plugin (Volar)** - Vue 3 TypeScript 支持
- **ESLint** - 代码质量检查
- **Prettier - Code formatter** - 代码格式化
- **EditorConfig for VS Code** - 编辑器配置

#### VSCode 可选插件
- **GitLens** - Git 增强工具
- **Path Intellisense** - 路径智能提示
- **Auto Rename Tag** - 自动重命名标签
- **Chinese (Simplified)** - 中文语言包

### 支持的浏览器

| 浏览器 | 版本要求 |
|--------|---------|
| Chrome | >= 87 (推荐) |
| Edge | >= 88 |
| Firefox | >= 78 |
| Safari | >= 13 |

---

## 🚀 快速开始

### 1️⃣ 克隆项目

```bash
# Gitee（国内推荐）
git clone https://gitee.com/redv678/Redvadmin-frontend.git

# 或 GitHub
git clone https://github.com/redv678/Redvadmin-frontend.git

# 进入项目目录
cd Redvadmin-frontend
```

### 2️⃣ 启用 pnpm（推荐方式）

本项目使用 `packageManager` 字段锁定了 pnpm 版本，推荐使用 **corepack** 自动管理：

```bash
# Node.js 16.13+ 内置了 corepack，直接启用即可
corepack enable
```

> **说明**：启用后，corepack 会自动使用项目指定的 pnpm 版本（9.15.1）

**如果你已经全局安装了 pnpm**，请确保版本 >= 9.12.0：

```bash
# 检查版本
pnpm --version

# 如果版本低于 9.12.0，请升级
npm install -g pnpm@latest
```

### 3️⃣ 安装依赖

```bash
# 安装所有项目依赖
pnpm install
```

> **首次安装说明**：
> - 安装时间可能需要 3-5 分钟（取决于网络速度）
> - 如果遇到网络问题，可以配置淘宝镜像：
>   ```bash
>   pnpm config set registry https://registry.npmmirror.com
>   ```

### 4️⃣ 配置后端接口地址

编辑 `apps/web-ele/.env.development` 文件，修改后端 API 地址：

```env
# 后端接口地址（请修改为你的后端服务地址）
VITE_GLOB_API_URL=http://localhost:8000

# 开发服务器端口
VITE_PORT=5777
```

> **重要**：确保后端服务已启动并可访问！

### 5️⃣ 启动开发服务器

```bash
# 启动 Element Plus 版本（推荐）
pnpm dev:ele

# 或启动其他版本
pnpm dev:antd   # Ant Design Vue 版本
pnpm dev:naive  # Naive UI 版本
```

### 6️⃣ 访问项目

开发服务器启动后，在浏览器中打开：

```
http://localhost:5777
```

**默认账号**：
- 超级管理员：`superadmin` / `admin123456`
- 管理员：`admin` / `admin123456`
- 普通用户：`jack` / `admin123456`

> **注意**：登录时密码会自动进行 MD5 加密后传输给后端

---

## 🔨 项目构建

### 开发环境构建

```bash
# 构建 Element Plus 版本
pnpm build:ele

# 构建其他版本
pnpm build:antd   # Ant Design Vue 版本
pnpm build:naive  # Naive UI 版本
```

### 生产环境构建

构建产物默认输出到 `apps/web-ele/dist` 目录

### 预览构建结果

```bash
# 预览构建后的应用
pnpm preview
```

### 分析构建产物

```bash
# 生成构建分析报告
pnpm build:analyze
```

### Docker 部署

```bash
# 构建 Docker 镜像
pnpm build:docker
```

---

## 📁 项目结构

```
Redvadmin-frontend/
├── apps/                          # 应用目录
│   ├── web-ele/                   # Element Plus 版本（主应用）
│   │   ├── src/
│   │   │   ├── api/              # 接口请求
│   │   │   ├── assets/           # 静态资源
│   │   │   ├── layouts/          # 布局组件
│   │   │   ├── locales/          # 国际化
│   │   │   ├── router/           # 路由配置
│   │   │   ├── store/            # 状态管理（Pinia）
│   │   │   ├── utils/            # 工具函数
│   │   │   │   └── crypto.ts    # 加密工具（MD5）
│   │   │   ├── views/            # 页面组件
│   │   │   │   ├── _core/       # 核心页面（登录等）
│   │   │   │   └── system/      # 系统管理页面
│   │   │   ├── app.vue          # 根组件
│   │   │   └── main.ts          # 应用入口
│   │   ├── .env                  # 环境变量（公共）
│   │   ├── .env.development      # 开发环境变量
│   │   ├── .env.production       # 生产环境变量
│   │   └── package.json
│   ├── web-antd/                  # Ant Design Vue 版本
│   └── web-naive/                 # Naive UI 版本
├── packages/                      # 共享包目录
│   ├── @core/                    # 核心包
│   │   ├── base/                 # 基础包
│   │   │   ├── design/          # 设计系统
│   │   │   ├── icons/           # 图标库
│   │   │   ├── shared/          # 共享工具
│   │   │   └── typings/         # 类型定义
│   │   └── ui-kit/              # UI 组件库
│   ├── effects/                  # 副作用包
│   │   ├── common-ui/           # 通用 UI 组件
│   │   ├── layouts/             # 布局组件
│   │   └── request/             # 请求封装
│   ├── locales/                  # 国际化
│   ├── plugins/                  # 插件
│   ├── preferences/              # 偏好设置
│   ├── stores/                   # 全局状态
│   └── utils/                    # 工具函数
├── internal/                      # 内部工具
│   ├── lint-configs/             # 代码规范配置
│   │   ├── eslint-config/       # ESLint 配置
│   │   ├── prettier-config/     # Prettier 配置
│   │   └── stylelint-config/    # Stylelint 配置
│   ├── node-utils/               # Node 工具
│   ├── tailwind-config/          # Tailwind CSS 配置
│   ├── tsconfig/                 # TypeScript 配置
│   └── vite-config/              # Vite 配置
├── scripts/                       # 脚本工具
│   ├── turbo-run/                # Turbo 运行脚本
│   └── vsh/                      # 自定义脚本工具
├── .gitignore                     # Git 忽略配置
├── .npmrc                         # npm 配置
├── package.json                   # 根 package.json
├── pnpm-lock.yaml                 # pnpm 锁文件
├── pnpm-workspace.yaml            # pnpm 工作区配置
├── turbo.json                     # Turbo 配置
└── README.md                      # 项目文档
```

---

## 🛠️ 核心技术栈

### 前端框架
- **Vue 3.5+** - 渐进式 JavaScript 框架
- **TypeScript 5.6+** - JavaScript 的超集，提供类型检查

### 构建工具
- **Vite 6.2+** - 下一代前端构建工具
- **Turbo 2.4+** - 高性能构建系统
- **pnpm 9.15+** - 快速、节省磁盘空间的包管理器

### UI 框架（三选一）
- **Element Plus 2.9+** - 基于 Vue 3 的组件库（默认）
- **Ant Design Vue 4+** - 企业级 UI 设计语言
- **Naive UI** - 尤雨溪推荐的 Vue 3 组件库

### 状态管理
- **Pinia 2.0+** - Vue 的官方状态管理库

### 路由管理
- **Vue Router 4.5+** - Vue.js 官方路由管理器

### HTTP 请求
- **Axios** - 基于 Promise 的 HTTP 客户端

### CSS 框架
- **Tailwind CSS 3.4+** - 实用优先的 CSS 框架
- **UnoCSS** - 即时按需的原子化 CSS 引擎

### 工具库
- **VueUse** - Vue 组合式 API 工具集
- **dayjs** - 轻量级日期处理库
- **lodash-es** - JavaScript 实用工具库
- **crypto-js** - JavaScript 加密库（用于密码加密）

### 代码规范
- **ESLint** - JavaScript 代码检查工具
- **Prettier** - 代码格式化工具
- **Stylelint** - CSS 代码检查工具
- **CommitLint** - Git 提交信息规范检查

### 测试工具
- **Vitest** - 基于 Vite 的单元测试框架
- **Playwright** - 端到端测试框架

---

## ⚙️ 核心功能

### 🔐 用户认证
- ✅ 账号密码登录（密码 MD5 加密传输）
- ✅ 记住密码功能
- ✅ 滑块验证码
- ✅ 自动刷新 Token
- ✅ 多点登录检测
- ✅ 登录过期处理

### 🎨 布局系统
- ✅ 顶部菜单布局
- ✅ 侧边菜单布局
- ✅ 混合菜单布局
- ✅ 响应式布局（支持移动端）
- ✅ 面包屑导航
- ✅ 标签页导航
- ✅ 全屏切换
- ✅ 暗黑模式

### 👥 系统管理
- ✅ 用户管理（CRUD、批量操作、导入导出）
- ✅ 角色管理（权限分配、数据权限）
- ✅ 菜单管理（树形结构、图标选择）
- ✅ 部门管理（树形结构、部门权限）
- ✅ 字典管理（数据字典维护）
- ✅ 配置管理（系统参数配置）

### 📊 FASTCRUD 快速开发
- ✅ 基于配置的 CRUD 页面生成
- ✅ 表格增删改查
- ✅ 表单验证
- ✅ 高级搜索
- ✅ 数据导出
- ✅ 批量操作

### 📝 日志管理
- ✅ 操作日志（记录用户操作）
- ✅ 登录日志（记录登录信息）
- ✅ 异常日志（记录系统异常）

### 🌍 国际化
- ✅ 中文简体
- ✅ English
- ✅ 动态切换语言
- ✅ 支持扩展其他语言

### 🎨 主题定制
- ✅ 多主题切换
- ✅ 主题色自定义
- ✅ 暗黑模式
- ✅ 灰色模式
- ✅ 色弱模式

---

## 📋 可用脚本

### 开发命令

```bash
# 启动不同版本的开发服务器
pnpm dev:ele        # Element Plus 版本（端口：5777）
pnpm dev:antd       # Ant Design Vue 版本
pnpm dev:naive      # Naive UI 版本
pnpm dev:play       # Playground 版本
pnpm dev:docs       # 文档站点

# 同时启动所有应用（需要较大内存）
pnpm dev
```

### 构建命令

```bash
# 构建不同版本
pnpm build:ele      # 构建 Element Plus 版本
pnpm build:antd     # 构建 Ant Design Vue 版本
pnpm build:naive    # 构建 Naive UI 版本
pnpm build:docs     # 构建文档站点

# 构建所有应用
pnpm build

# 构建并分析打包体积
pnpm build:analyze
```

### 代码质量

```bash
# 代码检查
pnpm lint           # 运行 ESLint 检查
pnpm format         # 运行 Prettier 格式化

# 类型检查
pnpm check:type     # TypeScript 类型检查

# 依赖检查
pnpm check:dep      # 检查依赖问题
pnpm check:circular # 检查循环依赖

# 拼写检查
pnpm check:cspell   # 检查代码中的拼写错误

# 全面检查（推荐提交代码前运行）
pnpm check
```

### 测试命令

```bash
# 单元测试
pnpm test:unit      # 运行单元测试

# 端到端测试
pnpm test:e2e       # 运行 E2E 测试
```

### 其他命令

```bash
# 清理项目
pnpm clean          # 清理所有构建产物和缓存

# 重新安装依赖
pnpm reinstall      # 删除 node_modules 和 lockfile，重新安装

# 更新依赖
pnpm update:deps    # 更新所有依赖到最新版本

# Git 提交（使用交互式提交）
pnpm commit         # 使用 commitizen 规范提交
```

---

## 🎯 开发规范

### 代码规范

本项目使用 ESLint + Prettier + Stylelint 进行代码规范检查：

- **ESLint**：JavaScript/TypeScript 代码检查
- **Prettier**：代码格式化（自动格式化）
- **Stylelint**：CSS/SCSS 代码检查

**配置文件位置**：
- ESLint: `internal/lint-configs/eslint-config/`
- Prettier: `internal/lint-configs/prettier-config/`
- Stylelint: `internal/lint-configs/stylelint-config/`

### Git 提交规范

本项目遵循 [Conventional Commits](https://www.conventionalcommits.org/) 规范：

```bash
<type>(<scope>): <subject>

<body>

<footer>
```

**提交类型（type）**：

| 类型 | 说明 | 示例 |
|------|------|------|
| `feat` | 新功能 | `feat(user): 添加用户导出功能` |
| `fix` | 修复 Bug | `fix(login): 修复登录验证码刷新问题` |
| `docs` | 文档更新 | `docs(readme): 更新安装文档` |
| `style` | 代码格式调整（不影响功能） | `style(user): 格式化用户管理代码` |
| `refactor` | 代码重构 | `refactor(api): 重构 API 请求封装` |
| `perf` | 性能优化 | `perf(table): 优化表格渲染性能` |
| `test` | 测试相关 | `test(login): 添加登录单元测试` |
| `build` | 构建系统或外部依赖变更 | `build(deps): 升级 Vue 到 3.5` |
| `ci` | CI 配置变更 | `ci(github): 添加自动部署流程` |
| `chore` | 其他修改（不涉及源代码） | `chore(config): 更新 ESLint 配置` |
| `revert` | 回退提交 | `revert: 回退 feat(user): 添加用户导出功能` |

**推荐使用交互式提交**：

```bash
pnpm commit
```

### 命名规范

#### 文件命名
- **组件文件**：PascalCase（大驼峰）
  ```
  UserList.vue
  UserForm.vue
  ```
- **工具文件**：kebab-case（短横线）
  ```
  format-date.ts
  request-utils.ts
  ```
- **样式文件**：kebab-case（短横线）
  ```
  user-list.scss
  common.css
  ```

#### 变量命名
- **普通变量**：camelCase（小驼峰）
  ```typescript
  const userName = 'admin'
  const userList = []
  ```
- **常量**：UPPER_SNAKE_CASE（大写下划线）
  ```typescript
  const API_BASE_URL = 'http://localhost:8000'
  const MAX_PAGE_SIZE = 100
  ```
- **类/接口/类型**：PascalCase（大驼峰）
  ```typescript
  class UserService {}
  interface UserInfo {}
  type UserRole = 'admin' | 'user'
  ```

### TypeScript 规范

- ✅ 所有 API 接口必须定义类型
- ✅ 组件 Props 必须定义类型
- ✅ 避免使用 `any` 类型（特殊情况除外）
- ✅ 优先使用 `interface` 定义对象类型
- ✅ 使用 `type` 定义联合类型、交叉类型

**示例**：

```typescript
// ✅ 推荐
interface LoginParams {
  username: string
  password: string
}

// ✅ 推荐
type UserRole = 'admin' | 'user' | 'guest'

// ❌ 不推荐
function login(params: any) {
  // ...
}
```

---

## 🔧 常见问题

### 1. 安装依赖失败

**问题描述**：执行 `pnpm install` 时报错或卡住

**解决方案**：

```bash
# 1. 清理缓存
pnpm store prune

# 2. 删除 node_modules 和 lockfile
rm -rf node_modules pnpm-lock.yaml

# 3. 使用淘宝镜像（国内推荐）
pnpm config set registry https://registry.npmmirror.com

# 4. 重新安装
pnpm install
```

### 2. 启动项目报错

**问题描述**：执行 `pnpm dev:ele` 时报错

**可能原因及解决方案**：

#### ① Node.js 版本不符合要求

```bash
# 检查 Node.js 版本
node --version

# 如果版本低于 20.10.0，请升级 Node.js
# 推荐使用 nvm 管理 Node.js 版本
nvm install 20
nvm use 20
```

#### ② pnpm 版本不符合要求

```bash
# 检查 pnpm 版本
pnpm --version

# 推荐使用 corepack
corepack enable
corepack prepare pnpm@latest --activate
```

#### ③ 端口被占用

```bash
# Windows 查看端口占用
netstat -ano | findstr 5777

# Mac/Linux 查看端口占用
lsof -i:5777

# 修改端口：编辑 apps/web-ele/.env.development
VITE_PORT=5778  # 改为其他端口
```

#### ④ 依赖未安装完整

```bash
# 重新安装依赖
pnpm reinstall
```

### 3. 后端接口请求失败

**问题描述**：登录或其他接口请求失败

**解决方案**：

#### ① 检查后端服务是否启动

```bash
# 确保后端服务正在运行
# 默认地址：http://localhost:8000
```

#### ② 检查接口地址配置

编辑 `apps/web-ele/.env.development`：

```env
# 确保地址正确
VITE_GLOB_API_URL=http://localhost:8000
```

#### ③ 检查跨域配置

如果后端服务地址不是 localhost，可能需要配置跨域。

后端需要允许前端地址的跨域请求。

#### ④ 检查网络代理

某些公司网络可能有代理限制，尝试关闭代理或配置代理。

### 4. 构建失败

**问题描述**：执行 `pnpm build:ele` 时报错

**解决方案**：

```bash
# 1. 清理构建缓存
pnpm clean

# 2. 检查 TypeScript 类型错误
pnpm check:type

# 3. 增加 Node.js 内存限制
# 已在 package.json 中配置：
# "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 turbo build"

# 4. 如果仍然失败，尝试单独构建依赖包
pnpm -r run build --filter=@vben-core/*
```

### 5. 登录密码加密问题

**问题描述**：登录时提示密码错误

**说明**：

本项目前端会在登录时自动将密码进行 **MD5 加密**后传输给后端。

- 前端发送：`MD5('admin123456')` = `a66abb5684c45962d887564f08346e8d`
- 后端存储：`make_password(MD5('admin123456'))`

**确认方法**：

查看 [apps/web-ele/src/utils/crypto.ts](apps/web-ele/src/utils/crypto.ts) 和 [apps/web-ele/src/store/auth.ts](apps/web-ele/src/store/auth.ts:36-40)

```typescript
// auth.ts
const loginParams = {
  ...params,
  password: params.password ? encryptPassword(params.password) : '',
}
```

### 6. ESLint 或 TypeScript 报错

**问题描述**：IDE 中大量红色波浪线

**解决方案**：

#### ① VSCode 重启 TypeScript 服务

按 `Ctrl+Shift+P` (Mac: `Cmd+Shift+P`)，输入：
```
TypeScript: Restart TS Server
```

#### ② 确保安装了必要的 VSCode 插件

- Vue Language Features (Volar)
- TypeScript Vue Plugin (Volar)
- ESLint

#### ③ 检查 node_modules 是否完整

```bash
pnpm install
```

### 7. 暗黑模式不生效

**问题描述**：切换暗黑模式后样式异常

**解决方案**：

确保 Tailwind CSS 配置了暗黑模式：

```javascript
// tailwind.config.js
module.exports = {
  darkMode: 'class', // 或 'media'
  // ...
}
```

清理缓存并重启：

```bash
pnpm clean
pnpm dev:ele
```

### 8. Monorepo 依赖问题

**问题描述**：workspace 包之间依赖解析失败

**解决方案**：

```bash
# 1. 确保在根目录执行 install
cd Redvadmin-frontend
pnpm install

# 2. 如果问题依旧，重新安装
pnpm reinstall

# 3. 检查 pnpm-workspace.yaml 配置
cat pnpm-workspace.yaml
```

---

## 📦 依赖说明

### 主要生产依赖

| 依赖 | 版本 | 说明 |
|------|------|------|
| vue | ^3.5.13 | Vue 框架核心 |
| vue-router | ^4.5.0 | 路由管理 |
| pinia | ^2.2.8 | 状态管理 |
| element-plus | ^2.9.6 | UI 组件库 |
| @vueuse/core | ^11.4.0 | Vue 组合式 API 工具集 |
| axios | ^1.7.9 | HTTP 请求 |
| dayjs | ^1.11.13 | 日期处理 |
| lodash-es | ^4.17.21 | 工具函数库 |
| crypto-js | ^4.2.0 | 加密库（MD5） |
| vue-i18n | ^11.1.2 | 国际化 |
| @fast-crud/fast-crud | ^1.25.6 | CRUD 快速开发 |

### 主要开发依赖

| 依赖 | 版本 | 说明 |
|------|------|------|
| typescript | ^5.6.3 | TypeScript 编译器 |
| vite | ^6.2.2 | 构建工具 |
| @vitejs/plugin-vue | ^5.2.3 | Vite Vue 插件 |
| turbo | ^2.4.4 | Monorepo 构建工具 |
| eslint | ^9.22.0 | 代码检查 |
| prettier | ^3.4.2 | 代码格式化 |
| vitest | ^2.1.8 | 单元测试 |
| playwright | ^1.51.1 | E2E 测试 |

---

## 🚀 部署指南

### 1. 构建生产环境

```bash
# 构建生产环境代码
pnpm build:ele
```

构建产物位于 `apps/web-ele/dist/` 目录。

### 2. Nginx 部署（推荐）

#### 配置示例：

```nginx
server {
    listen 80;
    server_name your-domain.com;

    # 静态文件目录
    root /var/www/redvadmin/dist;
    index index.html;

    # Gzip 压缩
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    # 处理 Vue Router 的 history 模式
    location / {
        try_files $uri $uri/ /index.html;
    }

    # API 代理（如果需要）
    location /api/ {
        proxy_pass http://localhost:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 静态资源缓存
    location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}
```

#### 部署步骤：

```bash
# 1. 构建项目
pnpm build:ele

# 2. 上传到服务器
scp -r apps/web-ele/dist/* user@your-server:/var/www/redvadmin/dist/

# 3. 重启 Nginx
sudo systemctl restart nginx
```

### 3. Docker 部署

#### Dockerfile 示例：

```dockerfile
# 构建阶段
FROM node:20-alpine AS builder

# 启用 corepack
RUN corepack enable

WORKDIR /app

# 复制依赖文件
COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
COPY apps/web-ele/package.json apps/web-ele/

# 安装依赖
RUN pnpm install --frozen-lockfile

# 复制源代码
COPY . .

# 构建
RUN pnpm build:ele

# 生产阶段
FROM nginx:alpine

# 复制构建产物
COPY --from=builder /app/apps/web-ele/dist /usr/share/nginx/html

# 复制 Nginx 配置
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]
```

#### 构建和运行：

```bash
# 构建镜像
docker build -t redvadmin-frontend .

# 运行容器
docker run -d -p 80:80 --name redvadmin redvadmin-frontend
```

### 4. 静态托管（Vercel/Netlify）

#### Vercel 部署：

1. 连接 GitHub 仓库
2. 配置构建命令：
   ```
   Build Command: pnpm build:ele
   Output Directory: apps/web-ele/dist
   Install Command: corepack enable && pnpm install
   ```
3. 部署

#### Netlify 部署：

创建 `netlify.toml`：

```toml
[build]
  command = "pnpm build:ele"
  publish = "apps/web-ele/dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
```

---

## 📚 相关文档

- [Vue 3 官方文档](https://cn.vuejs.org/)
- [TypeScript 官方文档](https://www.typescriptlang.org/)
- [Vite 官方文档](https://cn.vitejs.dev/)
- [Element Plus 官方文档](https://element-plus.org/)
- [Pinia 官方文档](https://pinia.vuejs.org/)
- [Vue Router 官方文档](https://router.vuejs.org/)
- [Vben Admin 文档](https://doc.vben.pro/)
- [FASTCRUD 文档](http://fast-crud.docmirror.cn/)

---

## 🤝 参与贡献

欢迎参与项目贡献！请遵循以下步骤：

1. **Fork 本仓库**
2. **创建特性分支** (`git checkout -b feature/AmazingFeature`)
3. **提交更改** (`git commit -m 'feat: 添加某个很棒的功能'`)
4. **推送到分支** (`git push origin feature/AmazingFeature`)
5. **提交 Pull Request**

### 贡献指南

- 遵循项目的代码规范
- 提交前运行 `pnpm check` 确保代码质量
- 编写清晰的提交信息
- 为新功能添加测试
- 更新相关文档

---

## 📄 开源协议

本项目基于 [MIT](LICENSE) 协议开源。

**协议说明**：
- ✅ 允许商业使用
- ✅ 允许修改
- ✅ 允许分发
- ✅ 允许私有使用
- ⚠️ 需要保留版权声明

---

## 🙏 致谢

### 特别鸣谢

本项目站在巨人的肩膀上，感谢以下优秀的开源项目：

- **[Vben Admin](https://github.com/vbenjs/vue-vben-admin)** - 本项目基于 Vben Admin 架构进行深度定制，感谢 Vben 团队提供的优秀开源框架
- **[FASTCRUD](https://github.com/fast-crud/fast-crud)** - 本项目集成 FASTCRUD 实现快速 CRUD 开发，感谢 FASTCRUD 团队
- **[Vue.js](https://github.com/vuejs/core)** - 感谢尤雨溪及 Vue 团队提供的优秀前端框架
- **[Element Plus](https://github.com/element-plus/element-plus)** - 感谢 Element Plus 团队提供的优秀组件库
- **[Vite](https://github.com/vitejs/vite)** - 感谢 Vite 团队提供的快速构建工具

### 技术栈致谢

- Vue.js 团队及社区
- TypeScript 团队
- Vite 团队
- Element Plus 团队
- Pinia 团队
- VueUse 团队
- 以及所有依赖包的作者和贡献者

### 贡献者

感谢所有为本项目做出贡献的开发者！

---

## 📞 联系方式

- **作者**：Redv
- **Email**：redvadmin@gmail.com
- **GitHub**：[https://github.com/redv678/Redvadmin-frontend](https://github.com/redv678/Redvadmin-frontend)
- **Gitee**：[https://gitee.com/redv678/Redvadmin-frontend](https://gitee.com/redv678/Redvadmin-frontend)

---

## ⭐ Star History

如果这个项目对你有帮助，请给个 Star ⭐️ 支持一下！

---

<p align="center">
  Made with ❤️ by Redv Team
</p>

<p align="center">
  Copyright © 2024 Redv Admin. All rights reserved.
</p>