基于 React 的后台管理启动模板,界面遵循 Ant Design 规范
ant-design-template — React 后台模板
作者 damiadek
基于 React 与 Ant Design 的后台管理启动模板,提供仪表盘、表单、列表、账户等常见企业后台页面骨架。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
目前有 1 张原始预览,可打开完整图片查看设计细节。
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
内置仪表盘、表单、列表、个人页、账户、结果页、异常页与登录注册等页面模板
README 提到 TypeScript、区块搭建、主题配置与国际化方案
提供 Mock 数据开发方式,并提及单元测试与端到端测试
采用 MIT 许可,可免费使用、修改、商用和分发该版本代码
模板详细介绍
这是一个后台管理系统的启动模板(boilerplate),技术栈为 React,界面风格遵循 Ant Design 规范,仓库描述为「admin boilerplate using react」。README 内容实际来自 Ant Design Pro,说明该模板提供的是企业级后台的页面骨架与常用模板集合,而非完整业务系统。
模板覆盖的页面类型包括:仪表盘(分析页、监控页、工作台)、表单(基础表单、分步表单、高级表单)、列表(标准表格、标准列表、卡片列表、搜索列表)、个人页(简单/高级)、账户(账户中心、账户设置)、结果页(成功/失败)、异常页(403/404/500)以及用户相关页面(登录、注册、注册结果)。README 还提到 TypeScript、区块(Blocks)搭建、主题配置、国际化、Mock 数据开发以及单元与端到端测试等特性。
使用方式上,README 给出的路径是通过 umi 脚手架创建项目并选择 ant-design-pro 模板,安装依赖后本地启动;也支持在 Gitpod 中打开。浏览器支持现代浏览器与 IE11。仓库采用 MIT 许可,可免费使用、修改、商用和分发该版本代码,但演示图片、字体、图标等第三方素材需单独核对许可,域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
适合你的项目吗?
适用场景
- 搭建企业后台管理系统的初始项目结构
- 快速获得仪表盘、列表、表单等常见后台页面的参考实现
- 在 Ant Design 设计规范下统一后台界面风格
- 作为学习 React 后台项目组织方式的示例代码
适合人群
- 需要 React 后台管理项目起点的开发者
- 使用 Ant Design 设计体系的前端团队
- 希望参考常见后台页面模板与目录结构的项目
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
README 建议通过 umi 脚手架创建项目并选择 ant-design-pro 模板,然后安装依赖并本地启动
- 2
仓库最后更新时间为 2019 年,依赖版本与当前生态可能存在差异,使用前需自行核对
- 3
演示图片、字体、图标等第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断
- 4
域名、托管、数据库、支付或 AI 等外部服务可能另外收费
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 使用该模板需通过 umi 脚手架创建项目(yarn create umi 或 npm create umi),并选择 ant-design-pro 模板类型,随后执行 npm install 与 npm start 启动。
- README 提供在 Gitpod 在线开发环境中打开项目的选项;Gitpod 为外部第三方服务,其免费额度与使用条件由该服务方决定,可能涉及账号注册。
- 浏览器兼容范围为现代浏览器及 IE11,若需支持更旧或特定浏览器环境需自行评估适配成本。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
$ yarn create umi # or npm create umi
README 原文
Open the project in Gitpod (free online dev environment for GitHub) and start coding immediately.
README 原文
https://github.com/damiadek/ant-design-template/blob/master/LICENSEhttps://github.com/damiadek/ant-design-template/blob/master/README.mdModern browsers and IE11.
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-03。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较少 · 50 / 100
- 技术栈
- React
- 网站类型
- 后台 · 启动器
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2019-08-31
- 截图检查日期
- 2026-10-03
目前没有记录演示链接。请依据仓库说明在本地评估;仅凭截图无法确认交互行为。
目录记录的主要技术栈是 React。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
审核声明: [email protected] · 2026-10-04
查看当时使用的来源资料
SHA-256: 4defa43b044ccf268ce8dd63159820a30c27a50aef2532d315eab32ca676186d
2026-10-03T21:08:32.177Z
来源文件 / 仓库English | [简体中文](./README.zh-CN.md) | [Русский](./README.ru-RU.md) | [Türkçe](./README.tr-TR.md) | [日本語](./README.ja-JP.md) | [Français](./README.fr-FR.md)
<h1 align="center">Ant Design Pro</h1>
<div align="center">
An out-of-box UI solution for enterprise applications as a React boilerplate.
[](http://umijs.org/) [](https://dev.azure.com/ant-design/ant-design-pro/_build/latest?definitionId=1?branchName=master) [](https://david-dm.org/ant-design/ant-design-pro) [](https://david-dm.org/ant-design/ant-design-pro?type=dev) [](https://gitter.im/ant-design/pro-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [](https://gitter.im/ant-design/ant-design-pro?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [](https://app.netlify.com/sites/ant-design-pro/deploys) 

</div>
- Preview: http://preview.pro.ant.design
- Home Page: http://pro.ant.design
- Documentation: http://pro.ant.design/docs/getting-started
- ChangeLog: http://pro.ant.design/docs/changelog
- FAQ: http://pro.ant.design/docs/faq
- Mirror Site in China: http://ant-design-pro.gitee.io
## 4.0 Released Now! 🎉🎉🎉
[Announcing Ant Design Pro 4.0.0](https://medium.com/ant-design/ant-design-pro-v4-is-here-6f23098ae9d9)
## Translation Recruitment :loudspeaker:
We need your help: https://github.com/ant-design/ant-design-pro/issues/120
## Features
- :bulb: **TypeScript**: A language for application-scale JavaScript
- :scroll: **Blocks**: Build page with block template
- :gem: **Neat Design**: Follow [Ant Design specification](http://ant.design/)
- :triangular_ruler: **Common Templates**: Typical templates for enterprise applications
- :rocket: **State of The Art Development**: Newest development stack of React/umi/dva/antd
- :iphone: **Responsive**: Designed for variable screen sizes
- :art: **Theming**: Customizable theme with simple config
- :globe_with_meridians: **International**: Built-in i18n solution
- :gear: **Best Practices**: Solid workflow to make your code healthy
- :1234: **Mock development**: Easy to use mock development solution
- :white_check_mark: **UI Test**: Fly safely with unit and e2e tests
## Templates
```
- Dashboard
- Analytic
- Monitor
- Workspace
- Form
- Basic Form
- Step Form
- Advanced From
- List
- Standard Table
- Standard List
- Card List
- Search List (Project/Applications/Article)
- Profile
- Simple Profile
- Advanced Profile
- Account
- Account Center
- Account Settings
- Result
- Success
- Failed
- Exception
- 403
- 404
- 500
- User
- Login
- Register
- Register Result
```
## Usage
### Use bash
```bash
$ yarn create umi # or npm create umi
# Choose ant-design-pro:
Select the boilerplate type (Use arrow keys)
❯ ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
app - Create project with a simple boilerplate, support typescript.
block - Create a umi block.
library - Create a library with umi.
plugin - Create a umi plugin.
$ npm install
$ npm start # visit http://localhost:8000
```
### Use Gitpod
Open the project in Gitpod (free online dev environment for GitHub) and start coding immediately.
[](https://gitpod.io/#https://github.com/ant-design/ant-design-pro)
More instructions at [documentation](http://pro.ant.design/docs/getting-started).
## Browsers support
Modern browsers and IE11.
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
| --- | --- | --- | --- | --- |
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## Contributing
Any type of contribution is welcome, here are some examples of how you may contribute to this project:
- Use Ant Design Pro in your daily work.
- Submit [issues](http://github.com/ant-design/ant-design-pro/issues) to report bugs or ask questions.
- Propose [pull requests](http://github.com/ant-design/ant-design-pro/pulls) to improve our code.
<div align="center">
<a href="https://www.netlify.com">
<img src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg"/>
</a>
</div>
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。
ant-design-pro
Ant Design Pro 是 Ant Design 官方推出的企业级中后台前端脚手架,基于 React 19、Umi Max 4 和 antd 6 构建,内置 TypeScript 支持。
React · 后台

react-boilerplate
react-boilerplate 是一个为有一定 React 和 Redux 经验的开发者设计的启动器,目标是快速搭建可扩展、离线优先的 Web 应用。
React · 启动器

coreui-free-react-admin-template
Free React Admin & Dashboard Template Built for AI-Assisted Development
React · 后台

fastapi-react
fastapi-react 是一个基于 Cookiecutter 的模板,用于快速搭建 FastAPI 与 React(TypeScript)的全栈项目。
React · 后台

react-antd-admin-template
一个基于React+Antd的后台管理模版,在线预览https://nlrx-wjc.github.io/react-antd-admin-template/
React · 后台

shadcn-landing-page
Free Landing page template using Shadcn, React, Typescript and Tailwind
React · 企业官网
