# vue-admin-pro

**Repository Path**: coderych/vue-admin-pro

## Basic Information

- **Project Name**: vue-admin-pro
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-21
- **Last Updated**: 2025-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue Admin Pro

一个基于 Vue 3 + TypeScript + Vite + Naive UI 的现代化后台管理系统模板。

## 🚀 技术栈

- **前端框架**: Vue 3.5+ (Composition API)
- **构建工具**: Vite 6.2+
- **开发语言**: TypeScript 5.7+
- **UI 组件库**: Naive UI 2.41+
- **状态管理**: Pinia 3.0+
- **路由管理**: Vue Router 4.5+
- **国际化**: Vue I18n 11.1+
- **CSS 框架**: UnoCSS 66.0+
- **HTTP 客户端**: Axios 1.8+
- **图表库**: ECharts 5.6+
- **代码高亮**: Highlight.js 11.11+
- **BPMN 流程设计器**: BPMN.js 18.4+
- **富文本编辑器**: AIEditor 1.3+
- **包管理器**: pnpm

## ✨ 功能特性

### 🎯 核心功能

- 🔐 **权限管理**: 基于角色的访问控制 (RBAC)
- 👥 **用户管理**: 用户增删改查、角色分配
- 🏢 **部门管理**: 组织架构管理
- 🎭 **角色管理**: 角色权限配置
- 📝 **字典管理**: 系统字典维护
- 📊 **日志管理**: 操作日志记录与查询
- 🔔 **通知公告**: 系统公告发布

### 🎨 界面特性

- 🌓 **主题切换**: 支持明暗主题切换
- 🌍 **国际化**: 支持中英文切换
- 📱 **响应式设计**: 适配各种屏幕尺寸
- 🎨 **自定义主题**: 支持主题色自定义
- 💫 **动画效果**: 丰富的过渡动画

### 🛠️ 开发工具

- 📝 **富文本编辑器**: 支持 Markdown 和富文本编辑
- 📊 **图表组件**: 集成 ECharts 图表库
- 🔧 **BPMN 流程设计器**: 可视化流程设计
- 🎯 **条件构造器**: 可视化条件配置
- 📤 **文件上传**: 支持图片和文件上传
- 🎨 **图标选择器**: 丰富的图标库
- 📋 **代码高亮**: 支持多种编程语言
- 🎆 **特效组件**: 烟花等动画效果

### 🔧 开发体验

- ⚡ **快速启动**: 基于 Vite 的快速开发体验
- 🔍 **TypeScript**: 完整的类型支持
- 🎯 **ESLint**: 代码质量检查
- 🚀 **热更新**: 开发时快速预览
- 📦 **自动导入**: 组件和 API 自动导入

## 📦 安装运行

### 环境要求

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

### 安装依赖

```bash
# 使用 pnpm 安装依赖
pnpm install

# 或者使用 npm
npm install
```

### 开发环境

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

# 或者
npm run dev
```

### 生产构建

```bash
# 构建生产版本
pnpm build

# 预览生产版本
pnpm preview
```

### 代码检查

```bash
# 代码检查
pnpm lint

# 自动修复
pnpm lint:fix

# 类型检查
pnpm type-check
```

## 📁 项目结构

```
vue-admin-pro/
├── public/                 # 静态资源
├── src/
│   ├── api/               # API 接口
│   │   ├── common/        # 通用接口
│   │   └── system/        # 系统管理接口
│   ├── assets/            # 资源文件
│   │   ├── icons/         # 图标
│   │   ├── images/        # 图片
│   │   └── styles/        # 样式文件
│   ├── components/        # 公共组件
│   │   ├── Application/   # 应用组件
│   │   ├── BpmnModeler/   # BPMN 流程设计器
│   │   ├── ECharts/       # 图表组件
│   │   ├── Form/          # 表单组件
│   │   ├── Highlight/     # 代码高亮
│   │   ├── Map/           # 地图组件
│   │   └── ProComponents/ # 专业组件
│   ├── composables/       # 组合式函数
│   ├── directives/        # 自定义指令
│   ├── enums/             # 枚举定义
│   ├── layouts/           # 布局组件
│   ├── locales/           # 国际化文件
│   ├── router/            # 路由配置
│   ├── settings/          # 应用配置
│   ├── stores/            # 状态管理
│   ├── utils/             # 工具函数
│   └── views/             # 页面组件
│       ├── dashboard/     # 仪表板
│       ├── demo/          # 演示页面
│       ├── login/         # 登录页面
│       ├── profile/       # 个人中心
│       └── system/        # 系统管理
├── types/                 # 类型定义
├── build/                 # 构建配置
├── vite.config.ts         # Vite 配置
├── uno.config.ts          # UnoCSS 配置
├── tsconfig.json          # TypeScript 配置
└── package.json           # 项目配置
```

## 🎯 主要页面

### 系统管理

- **用户管理**: 用户信息管理、角色分配
- **角色管理**: 角色权限配置、用户分配
- **部门管理**: 组织架构管理
- **权限管理**: 菜单权限配置
- **字典管理**: 系统字典维护
- **日志管理**: 操作日志查询

### 演示页面

- **富文本编辑器**: 支持 Markdown 和富文本
- **文件上传**: 图片和文件上传功能
- **烟花组件**: 动画特效展示
- **ECharts 图表**: 数据可视化
- **图标选择器**: 丰富的图标库
- **代码高亮**: 多语言代码高亮
- **标签页**: 动态标签页管理
- **国际化**: 多语言切换演示
- **BPMN 流程图**: 流程设计器
- **滚动条**: 自定义滚动条
- **拖拽功能**: 拖拽排序演示
- **条件构造器**: 可视化条件配置

## 🔧 开发指南

### 环境变量配置

项目使用 `.env` 文件进行环境配置：

```bash
# 应用标题
VITE_GLOB_APP_TITLE=Vue Admin Pro

# 开发服务器端口
VITE_PORT=5173

# API 基础路径
VITE_GLOB_BASE_URL=/

# 是否删除控制台日志
VITE_DROP_CONSOLE=false
```

### 路由配置

路由配置位于 `src/router/` 目录下，支持：

- 动态路由生成
- 权限控制
- 路由守卫
- 面包屑导航

### 状态管理

使用 Pinia 进行状态管理，主要包含：

- `app`: 应用状态
- `tab`: 标签页状态
- `user`: 用户状态

### 国际化

支持中英文切换，配置文件位于 `src/locales/` 目录。

### 主题配置

支持明暗主题切换和自定义主题色，配置位于 `src/settings/` 目录。

## 🤝 贡献指南

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 🙏 致谢

感谢以下开源项目的支持：

- [Vue.js](https://vuejs.org/)
- [Naive UI](https://www.naiveui.com/)
- [Vite](https://vitejs.dev/)
- [TypeScript](https://www.typescriptlang.org/)
- [ECharts](https://echarts.apache.org/)
- [BPMN.js](https://bpmn.io/)

## 📞 联系方式

如有问题或建议，请通过以下方式联系：

- 提交 Issue
- 发送邮件
- 参与讨论

---

⭐ 如果这个项目对你有帮助，请给它一个星标！