Aegis Admin 神盾权限中台

从 0 手写的 Vue3 + TypeScript 权限中后台管理系统（非套模板）。核心亮点：动态路由权限、Axios 请求去重与静默刷新、Pinia 持久化、虚拟滚动大数据表格。

✨ 亮点

模块	技术点
动态路由权限	按角色权限码过滤路由表 → addRoute 动态注入；beforeEach 处理白名单/登录态/刷新直入深层页
Axios 封装	请求去重（AbortController）+ 401 静默刷新（refreshToken 换 token + 队列重放）+ 错误分级
Pinia 持久化	pinia-plugin-persistedstate，登录态刷新不丢失
虚拟滚动	5000 行表格仅渲染可视区（phantom 撑高 + translateY 平移 + 切片）
ECharts 按需	echarts/core 按需引入，包体积减半；卸载 dispose 防内存泄漏
工程化	ESLint(flat) + Prettier + Husky，TypeScript 全类型、零 any

🚀 快速开始

npm install
npm run dev

访问 http://localhost:5173

🔑 演示账号（Mock 数据，密码均 123456）

账号	角色	可看到菜单
admin	超级管理员	全部
editor	运营	数据看板 + 用户管理
viewer	访客	仅数据看板

🛠 技术栈

• Vue3 (script setup) + TypeScript + Vite
• vue-router 4（动态路由）+ Pinia + Element Plus
• Axios + ECharts + vite-plugin-mock

📁 目录结构

src/
├── api/          # 接口模块
├── layouts/      # 主布局（侧边栏+顶栏+面包屑）
├── router/       # 路由表 + beforeEach 守卫
├── stores/       # Pinia（user / permission）
├── utils/        # request.ts（Axios 封装）/ tools.ts
├── views/        # login / dashboard / user / role / biglist
├── mock/         # vite-plugin-mock 数据源
└── types/        # 全局 TS 类型

📄 License

MIT