项目介绍
什么是 Antdv Next Admin
Antdv Next Admin 是一套基于 Vue 3 + TypeScript + Ant Design Vue 构建的现代化后台管理系统脚手架。它提供了开箱即用的企业级中后台解决方案，帮助开发者快速搭建功能完善、体验优良的管理系统。
核心特性
现代技术栈
- Vue 3.4 — 使用 Composition API +
<script setup>语法 - TypeScript 5 — 严格类型检查，完整的类型定义
- Vite 5 — 极速开发服务器和构建工具
- Pinia — 下一代状态管理（Setup Store 语法）
- Vue Router 4 — 动态路由，支持权限过滤
权限管理
完整的 RBAC（基于角色的访问控制）权限系统：
- 路由级权限 — 根据用户角色动态生成可访问路由
- 按钮级权限 — 通过指令
v-permission控制按钮显示 - 编程式权限 — 通过
usePermission()组合式函数在逻辑中校验 - 组件式权限 — 通过
<PermissionButton>组件包裹
Pro 组件
高效的配置化驱动组件：
| 组件 | 说明 |
|---|---|
| ProTable | 高级表格，支持搜索表单、工具栏、分页、列类型渲染、列筛选、列拖拽调整 |
| ProForm | 高级表单，支持 20+ 字段类型、网格布局、表单验证、动态选项 |
| ProModal | 高级弹窗，支持拖拽移动、边缘缩放、全屏切换 |
| ProChart | 图表组件，封装 ECharts，支持折线/柱状/饼图等 |
| ProStatCard | 统计卡片，带趋势指示器 |
| ProStepForm | 分步表单向导 |
| ProDescriptions | 配置化描述列表 |
| ProDetail | 详情页布局，支持标签页 |
| ProSplitLayout | 分栏布局 |
| ProUpload | 增强上传组件 |
| ProStatus | 状态指示器 |
主题系统
- 6 种预设主题色：蓝色（默认）、绿色、紫色、红色、橙色、青色
- 亮色 / 暗色 / 跟随系统 三种模式
- 侧边栏独立深浅主题
- 100+ CSS 设计变量
国际化
- 内置四种语言：中文、英文、日文、韩文
- 支持运行时动态切换
- 基于 vue-i18n，易于扩展新语言
其他特性
- 多标签页系统（支持 KeepAlive 缓存、右键菜单、固定标签）
- 垂直 / 水平两种布局模式
- 移动端响应式适配
- Mock 数据系统（基于 faker.js）
- 全局键盘快捷搜索（
Ctrl+K） - 富文本编辑器（TipTap 和 Milkdown）
- ECharts 图表集成
技术栈
| 技术 | 版本 | 说明 |
|---|---|---|
| Vue | 3.4 | 渐进式 JavaScript 框架 |
| TypeScript | 5 | JavaScript 超集，静态类型 |
| Vite | 5 | 下一代构建工具 |
| Pinia | 2 | Vue 状态管理 |
| Vue Router | 4 | Vue 官方路由 |
| vue-i18n | 11 | 国际化插件 |
| antdv-next | 1.x | Ant Design Vue 组件库 |
| Axios | 1.6 | HTTP 请求库 |
| ECharts | 5 | 数据可视化图表 |
| TipTap | 3 | 富文本编辑器 |
| Milkdown | 7 | Markdown 编辑器（WYSIWYG） |
浏览器兼容
支持所有现代浏览器，不支持 IE。
| 浏览器 | 版本 |
|---|---|
| Chrome | >= 87 |
| Firefox | >= 78 |
| Safari | >= 14 |
| Edge | >= 88 |
演示账号
| 账号 | 密码 | 说明 |
|---|---|---|
admin | 123456 | 管理员，拥有全部权限 |
user | 123456 | 普通用户，有限权限 |