simple-admin-ele

simple-admin-ele 是一个基于 Vue 3、Vite、Element Plus 和 Pinia 的前端管理后台，源码位于 src，用于对接 simple-admin-fastapi 或兼容同一接口语义的后端服务。

特性

• 使用 Vue 3、Vue Router、Pinia、Element Plus 构建中后台界面
• 使用 TypeScript 组织入口、路由、状态、接口和业务类型
• 登录、菜单、路由和页面权限接入后端 permission_codes
• 系统管理模块包含用户、角色、权限、部门、字典
• 公共页面骨架包含 PageHeader、TableSection、EntityDrawer
• 图标统一使用 Iconify，全局注册 Icon 组件

启动

pnpm install
pnpm dev

构建与预览：

pnpm build
pnpm preview

格式化源码：

pnpm format

目录

src/
  api/                  接口实例与业务模块 API
  components/business/  后台业务公共组件
  layouts/admin/        后台主布局
  router/               路由、守卫、菜单生成
  stores/               Pinia 状态模块
  styles/               全局样式
  types/                业务类型
  views/                页面

权限与菜单

• 路由配置是菜单和页面权限的主数据源
• 菜单由路由 meta 自动生成
• 页面权限使用 route.meta.permission
• 登录后使用后端返回的 permission_codes 过滤菜单和页面访问
• 按钮级权限复用同一套 permission_codes

当前页面级权限码：

• 用户管理：ums:users
• 角色管理：ums:roles
• 权限管理：ums:permissions
• 部门管理：ums:departments
• 字典管理：ums:permissions:dicts

图标

项目使用 Iconify：

• 依赖：@iconify/vue、@iconify/json
• 入口：src/main.ts 全局注册 Icon
• 使用方式：<Icon icon="material-symbols:refresh" />
• 菜单图标写在路由 meta.menuGroupIcon 或菜单项图标字段中

推荐优先使用 material-symbols 或 material-symbols-light 图标集，避免再引入新的本地图标封装。

说明

• 当前项目说明、开发约定和后端契约见 AGENT.md
• 内部导入统一使用 @/...