新一代中后台管理系统

可复用 · 可扩展 · 可快速交付

一款清爽、美观、开箱即用的现代化中后台前端框架,为全栈工程师、前端及
后端工程师量身打造。业务无关的企业级中后台前端脚手架。

40+UI组件
20+主题色
RBAC权限体系
5minCRUD联调

CORE VALUES

脚手架的三大核心价值

所有菜单、页面、权限均由后端动态下发,前端不硬编码任何业务逻辑

业务无关

更换一套后端接口,它就是另一个全新的管理平台。无论零售电商、仓储物流、内容运营、企业 OA,都可基于此快速搭建。

按需组装

内置多种通用业务模块(权限管理、基础数据、内容运营、系统配置等),均可根据实际业务自由选择、裁剪或扩展。

即插即用

新增一个业务模块,只需创建页面文件 + 后端注册菜单资源,前端侧边栏自动出现新菜单,无需修改任何路由配置文件。

TECH STACK

技术架构概览

坚持“选最新的、用最稳的”原则,所有技术选型均为当前社区最活跃、生态最健全的方案

领域技术方案核心优势
应用框架Next.js 15 + React 19SSR/SSG 支持、文件系统路由、自动代码分割
类型系统TypeScript 5全链路类型安全,从 API 到组件一气呵成
UI 体系Shadcn/ui + Radix UI + Tailwind CSS无障碍合规、主题灵活、零运行时 CSS 开销
状态管理Zustand + TanStack React Query极简 Store + 智能服务端缓存,告别样板代码
表单引擎React Hook Form + Zod高性能非受控表单 + 声明式校验
数据表格TanStack React Table虚拟化、排序、筛选、固定列,一个组件全搞定
HTTP 通信Axios(统一封装)拦截器链式处理,Token 自动注入,异常统一兜底
富文本编辑TinyMCE / Tiptap / Novel三套编辑器可选,满足从轻量到专业的不同场景
主题引擎next-themes + CSS Variables深浅模式一键切换、20+ 预置主题色即时生效

SIX-LAYER ARCHITECTURE

六层解耦架构

从底层状态到顶层路由,每一层职责分明、独立可替换

Next.js App Router
Middleware 层路由守卫 · 权限拦截 · 请求预处理
Layout 层侧边栏 · 顶栏 · 面包屑 · 主题引擎 · 通知中心
业务模块层(由后端动态驱动)后端下发菜单 → 前端自动渲染 → 模块自由组合 [模块A] [模块B] [模块C] [...]
通用能力层CustomTable · CustomForm · FileUpload · Notifications · ConfirmDialog · CascadeSelector
基础 UI 层 (Shadcn/ui)40+ 无障碍基础组件 · 统一设计语言 · 主题变量驱动
数据通信层Axios 封装 · Token 自动管理 · 统一错误处理 · API 模块化
状态管理层Zustand (App/Sidebar/Menu Slices) · React Query 缓存

CORE HIGHLIGHTS

核心亮点 — 动态菜单与业务模块的灵活组装

前端不决定“有什么菜单”,后端说了算 —— 这是本脚手架最核心的设计理念

动态菜单工作机制

01用户登录成功前端自动向后端请求菜单资源接口
02后端返回菜单树根据用户角色和权限,返回可见菜单资源树
03自动转换路由菜单数据转换为路由配置,动态渲染侧边栏导航
04智能缓存 30min避免重复请求,页面切换零延迟

不同角色不同菜单

管理员看到全部模块,运营只看运营相关,完全由后端权限控制

模块自由组合

上线新模块或下线旧模块,只需修改后端配置

新增模块无需改路由

创建页面文件,注册菜单资源,侧边栏自动出现新菜单项

跨行业通用

A做零售 B做仓储 C做OA,后端配置不同菜单树即可

ENTERPRISE READY

开箱即用的企业级能力

动态菜单 & 权限

菜单由后端动态下发,与 RBAC 权限体系深度联动,前端零配置

多主题 & 暗黑模式

20+ 精心调校的主题色,深浅模式一键切换,支持跟随系统自动适配

统一 CRUD 模式

搜索+表格+分页+增删改查,统一交互范式,学习成本趋近于零

类型安全全链路

从 API 响应 → Store 状态 → 组件 Props,TypeScript 全覆盖

多环境部署

开发/测试/生产三套环境一键切换,环境变量隔离

国际化 & 响应式

i18n 支持中/英文切换,移动优先设计,适配多种屏幕尺寸

DEV EXPERIENCE

高效开发体验 & 面向未来的技术底座

高效开发特性

声明式表单 — JSON 配置定义字段 + Zod 声明校验规则
配置化表格 — 列定义+数据源即可渲染完整表格
统一通知 — showMessage/showError/showWarning 一行代码调用
API 模块化 — 按业务域拆分,URL 集中配置,新增接口只需两步
安全机制内置 — 密码加密传输、JWT 自动解析、请求自动鉴权
菜单智能缓存 — 本地缓存 30 分钟,提升页面切换流畅度
React 19享受最新的并发特性与性能优化
Next.js 15 App Router文件系统路由、服务端组件、流式渲染一步到位
Radix UI 无障碍合规所有交互组件符合 WAI-ARIA 标准
Tailwind CSS 原子化零运行时样式开销,构建产物极致精简

COMPONENT SYSTEM

自定义组件体系

90% 的页面开发不用写基础代码,封装中后台最常见的交互模式

CustomForm声明式表单引擎

JSON 配置驱动 · Zod Schema 校验 · 16 种字段类型 Grid/Vertical/Horizontal 布局 · 字段联动 远程搜索 · 数据转换 · 表单引用

CustomTable配置化数据表格

列配置驱动 · 自定义渲染 · 固定列 Left/Right 行选择单选/全选 · 分页集成 · 7 种行事件 斜纹/悬停效果 · 加载空态 · 表头操作区

CustomDialog通用弹窗容器

sm~7xl 预设宽度 · 最大化切换 三区结构 · 加载/提交状态 · 防误关

ConfirmDialog确认弹窗

danger/warning/success 三种语义 颜色图标自动匹配 · 异步 onConfirm

FileUpload文件上传组件

image/video/file 三种媒体 · 拖拽上传 多图模式 · 拖拽排序 · 实时预览/进度

MultiSelect增强选择器

单选/多选统一 · Badge 标签 远程搜索防抖 · 空态/加载态

DateRangePicker日期范围选择器

双日历联动 · 精确到秒 中文本地化 · 输入格式自动校验

Notifications统一通知系统

showMessage/Error/Warning/Loading 四种语义 · 9 种图标 · 一行代码触发

CascadeSelector级联选择组件

多级数据级联选择,树形结构逐级展开。弹窗式交互模式,适合数据量较大的场景。

40+ Shadcn/ui基础 UI 组件库

Button · Input · Select · Dialog · Table · Card · Badge · Avatar · Tooltip · Popover · Calendar · Form · Progress · Skeleton · ScrollArea · Breadcrumb · Sidebar · Toast ... 源码完全在项目中,可随时定制。

API INTEGRATION

与后端对接规范设计

统一的请求-响应-异常三层处理机制,后端照着文档实现,前端零配置接入

请求层

Axios 拦截器自动注入 Token 请求头,后端无需关心前端如何传递认证信息。

响应层

后端统一返回 { code: "OK", data: {...}, msg: "操作成功", count: 100 }

异常层

UN_LOGIN → 跳转登录页 业务错误 → Toast 提示 网络超时 → 友好异常提示

操作接口路径模式说明
分页查询/{domain}/{module}/queryPage支持搜索条件 + 分页参数
新增/编辑/{domain}/{module}/addOrEdit有 ID 则编辑,无 ID 则新增
启用/禁用/{domain}/{module}/disable统一的状态切换接口
删除/{domain}/{module}/delete单条/批量删除
下拉列表/{domain}/{module}/selectList用于关联选择的精简数据

登录认证

前端加密密码 → 后端返回 JWT Token → 前端自动解析并持久化

请求鉴权

每次请求自动携带 Token 头,后端校验即可

菜单权限

后端下发当前用户可见菜单,前端动态渲染

角色授权

后端提供资源树 + 角色关联,前端提供树形勾选界面

WHY CHOOSE US

为什么选择 Easy Admin?

维度传统 Vue2 + ElementUIEasy Admin 脚手架
框架版本Vue 2(已停止维护)React 19 + Next.js 15
样式方案全局 CSS + 覆盖样式Tailwind 原子化 CSS,零冲突
菜单机制前端写死路由表后端动态下发,模块自由组合
组件质量依赖第三方 UI 库更新节奏Shadcn/ui 代码归你所有,随时定制
主题能力有限的 CSS 变量覆盖20+ 预置主题色 + 深浅模式 + 即时预览
渲染性能客户端渲染可选 SSR/SSG/CSR,按需优化
极速启动

yarn dev 一条命令 3 秒启动开发环境

极低学习成本

统一 CRUD 模式 新人半天上手

极强可定制

Shadcn/ui 源码在手 任何 UI 需求都能满足

极佳开发体验

TS 智能提示 热更新、错误边界

极简后端对接

标准化接口规范 前端零配置接入

极致灵活性

菜单动态生成 一套代码多种业务

SCENARIOS

适用场景

零售/电商后台

商品+订单+会员+运营+基础数据

仓储/物流管理

设备+商户+基础数据

企业 OA 后台

权限(部门/角色/员工)+系统配置

内容运营平台

Banner+字典+基础数据

SaaS 多租户平台

租户管理+全部模块

教育/医疗/金融...

按需自选,后端配菜单前端自动生成

SHOWCASE

效果展示

实际项目效果预览,眼见为实

登录页
首页总览
商品编辑
订单管理
员工管理
权限分配

QUICK START

快速上手

环境要求:Node.js ≥ 18,Yarn ≥ 4.7.0

terminal
# 安装依赖$ yarn install# 启动开发环境$ yarn dev# 构建生产版本$ yarn build:prod# 启动生产服务$ yarn start:prod

SUMMARY

开箱即用,业务自由组装,开局即巅峰

一套标准 · 一套组件 · 一套流程 · 一种灵活 · 一种效率
新模块开发从“一周”缩短到“一天”,让团队把时间花在真正的业务创新上