【Axure原型】Ant Design Pro 原型后台项目-免费

本文涉及的产品
智能开放搜索 OpenSearch行业算法版,1GB 20LCU 1个月
实时计算 Flink 版,1000CU*H 3个月
实时数仓Hologres,5000CU*H 100GB 3个月
简介: Ant Design Pro 是基于 Ant Design 组件库构建的企业级中后台前端解决方案,提供丰富的页面模板、预设设计规范、路由配置及状态管理,支持快速搭建高质量应用。内置高阶组件如 ProTable、ProForm,提升开发效率,适用于复杂业务场景。


Ant Design Pro 原型项目简介

与Ant Design原型组件库不同,这个是仿照的后台原型项目模板

Ant Design Pro 是基于 Ant Design 组件库构建的企业级中后台前端解决方案,由蚂蚁集团开发并维护。它旨在为开发者提供一套完整、高效的中后台系统开发框架,包含预设的设计规范、页面模板、状态管理方案和路由配置等,帮助团队快速搭建高质量的企业级应用,减少重复开发工作,专注于业务逻辑实现。

访问地址

image.png

其核心特点包括:

  • 遵循 Ant Design 设计语言,保证界面风格统一、专业,符合企业级应用的审美和交互需求。
  • 内置丰富的页面模板,如仪表盘、表单页、列表页、详情页等,覆盖中后台常见场景。
  • 集成了路由管理、权限控制、数据请求、状态管理等基础功能模块,开箱即用。
  • 支持主题定制、国际化等企业级应用常用需求,具备良好的扩展性。


Ant Design Pro 包含的主要原型组件

Ant Design Pro 本身基于 Ant Design 原型组件库,因此涵盖了 Ant Design 的所有基础组件,同时针对中后台场景封装了一些高阶组件和业务组件,主要可分为以下几类:


1. 基础组件

  • 布局组件:如 Layout(布局容器)、Header(页头)、Sider(侧边栏)、Content(内容区)、Footer(页脚)等,用于构建页面整体结构。
  • 表单组件:如 Form(表单容器)、Input(输入框)、Select(下拉选择器)、Checkbox(复选框)、Radio(单选框)、DatePicker(日期选择器)等,用于数据录入和交互。
  • 数据展示组件:如 Table(表格)、List(列表)、Card(卡片)、Avatar(头像)、Badge(徽标)、Progress(进度条)等,用于展示各类数据。
  • 交互组件:如 Button(按钮)、Modal(对话框)、Drawer(抽屉)、Tooltip(提示框)、Dropdown(下拉菜单)、Pagination(分页)等,用于用户操作和反馈。


2. 高阶/业务组件

  • ProTable:基于 Table 封装的增强表格组件,支持高级搜索、表格内编辑、数据缓存、自定义列等功能,简化复杂表格场景开发。
  • ProForm:增强型表单组件,提供更多表单布局、校验规则和联动逻辑,支持分步表单、弹窗表单等场景。
  • ProLayout:针对中后台优化的布局组件,集成了侧边栏导航、面包屑、用户信息等常见元素,支持动态配置。
  • PageContainer:页面容器组件,用于统一页面标题、操作区和面包屑等元素的样式和布局。
  • QueryFilter:查询筛选组件,快速实现列表页的多条件筛选功能,支持联动查询和条件保存。


3. 其他辅助组件

  • 图标组件(Icon):提供丰富的内置图标,支持自定义图标。
  • 通知组件(NotificationMessage):用于系统通知和操作反馈。
  • 加载组件(SpinSkeleton):用于数据加载过程中的占位和提示。

通过这些原型组件的组合,产品可以高效构建出功能完善、体验优良的企业级中后台系统,


相关文章
|
关系型数据库 MySQL 索引
936. 【mysql】locate函数
936. 【mysql】locate函数
376 2
|
前端开发 JavaScript Java
【Ant Design Pro】使用ant design pro做为你的开发模板(完结篇)上线部署项目
【Ant Design Pro】使用ant design pro做为你的开发模板(完结篇)上线部署项目
1203 0
【Ant Design Pro】使用ant design pro做为你的开发模板(完结篇)上线部署项目
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
5月前
|
JSON IDE Java
20 款 IDEA 主题任你选!(快来看看你最喜欢那个~)
我是小假 期待与你的下一次相遇 ~
2882 1
|
JavaScript
【Axure】axure rp 导入元件库和使用,主流元件库下载使用
【Axure】axure rp 导入元件库和使用,主流元件库下载使用
2537 1
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
缓存 JavaScript 安全
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
1933 0
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
|
12月前
|
JSON 搜索推荐 C++
vscode如何更改背景颜色主题,黑色或白色?
【11月更文挑战第16天】在 VS Code 中更改背景颜色主题,可通过三种方式实现:1) 使用快捷键 Ctrl+K 和 Ctrl+T(Mac 上为 Command+K 和 Command+T)选择主题;2) 通过菜单中的“管理”->“颜色主题”选项选择;3) 修改 settings.json 文件中的 "workbench.colorTheme" 属性。此外,用户还可从扩展市场安装更多主题以满足个性化需求。
23984 6
|
消息中间件 JSON Java
Spring Boot、Spring Cloud与Spring Cloud Alibaba版本对应关系
Spring Boot、Spring Cloud与Spring Cloud Alibaba版本对应关系
26413 0