方案简介

Ant Design Pro 是开箱即用的中台前端/设计解决方案，面向需要快速搭建中后台（企业中台）应用的开发者与团队。它基于 Ant Design 6 设计体系精心设计，采用 React 19、Umi Max 4、antd 6、utoopack 等前端前沿技术栈，并使用 TypeScript 作为应用程序级 JavaScript 的语言。项目内置了丰富的模板页面（欢迎页、Dashboard、表单页、列表页、详情页、结果页、异常页、用户页、AI 助手、账户页等），提炼自中后台应用的典型页面和场景，开发者克隆仓库后即可在完整模板基础上进行业务开发，也可精简为简单版本从最小骨架开始。

亮点与能力

• TypeScript：应用程序级 JavaScript 的语言
• 区块：通过区块模板快速构建页面
• 优雅美观：基于 Ant Design 6 体系精心设计
• 常见设计模式：提炼自中后台应用的典型页面和场景
• 最新技术栈：使用 React 19/Umi Max 4/antd 6/utoopack 等前端前沿技术开发
• 响应式：针对不同屏幕大小设计
• 主题：基于 Tailwind CSS v4 + antd-style 的可配置主题满足多样化品牌诉求
• 国际化：内建业界通用的国际化方案
• Mock 数据：实用的本地数据调试方案
• AI 助手：内置 AI 聊天助手页面，基于 Ant Design X
• UI 测试：自动化测试保障前端产品质量

组成与分工

• React 19：视图层基础框架
• Umi Max 4：应用框架，提供路由、构建等工程能力
• antd 6：Ant Design 组件库与设计体系
• utoopack：参与前端前沿技术开发的构建能力
• Tailwind CSS v4 + antd-style：可配置主题，满足多样化品牌诉求
• TypeScript：应用程序级开发语言
• Mock 数据：本地数据调试方案
• Ant Design X：内置 AI 聊天助手页面基础

前置要求

• 现代浏览器：Edge、Firefox（last 2 versions）、Chrome（last 2 versions）、Safari（last 2 versions）
• npm 包管理器

克隆项目到本地：

bash
git clone --depth=1 https://github.com/ant-design/ant-design-pro.git myapp
cd myapp

安装依赖：

bash
npm install

实施步骤

1. 克隆或下载项目

bash
git clone --depth=1 https://github.com/ant-design/ant-design-pro.git myapp
cd myapp

2. 安装依赖

bash
npm install

3. 启动开发服务器

bash

启动开发服务器（默认为完整版）

npm start

4. （可选）精简为简单版本

本项目默认包含所有区块。如果你需要一个最小化的版本，运行：

bash
npm run simple

这将会：

• 删除多余的页面目录（dashboard、form、list/*、profile、result、exception、account 等）
• 删除多余的 mock 文件
• 替换路由为简单版本
• 从 package. 中移除多余的依赖

5. 构建

bash
npm run build

使用与配置要点

• 默认启动为完整版，包含所有区块模板（欢迎页、Dashboard、表单页、列表页、详情页、结果、异常、用户、AI 助手、账户等）。
• 使用 npm run simple 可将项目精简为最小化版本，注意此操作不可逆，将永久删除文件。
• 构建生产产物使用 npm run build。
• 预览地址：https://preview.pro.ant.design，更多信息请参考使用文档 docs/cheatsheet.zh-CN.md。

注意事项与常见问题

• 精简为简单版本的操作不可逆，将永久删除文件（多余页面目录、mock 文件、依赖等），执行前请确认。
• 常见问题可查阅 docs/cheatsheet.zh-CN.md#faq。
• 更新日志见 GitHub releases，v6 已正式发布。

优缺点

• ✓ 最新技术栈开箱即用
• ✓ 提炼常见中后台设计模式
• ✕ 默认包含所有区块较重
• ✕ 精简操作不可逆

出处

本方案挖掘自开源项目 ant-design/ant-design-pro，方案内容与实施命令均来自其 README 原文。