# 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 - 企业级中后台管理系统

Vue TypeScript Element Plus Vite License

## 📖 项目简介 基于 **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 ():