Ant Design 扩展组件库

基于 Ant Design 的业务扩展组件库。在不引入额外 UI 框架的前提下，封装表单、表格、布局、上传等常见场景组件，API 风格尽量与 antd 保持一致。

📖 在线文档 · GitHub

特性

• 丰富 — 覆盖表单、表格、工具栏、上传等中后台常见场景
• 轻量 — 仅扩展 antd，不引入其他 UI 组件库
• 易用 — 尽量复用 antd 属性与交互习惯，降低学习成本

环境要求

依赖	版本
antd	>= 6.5.0
react	>= 16.9.0
react-dom	>= 16.9.0

安装

npm install @trionesdev/antd-react-ext

yarn add @trionesdev/antd-react-ext

pnpm add @trionesdev/antd-react-ext

快速上手

按需引入组件即可使用，无需额外全局配置：

import { ModalForm, GridTable } from '@trionesdev/antd-react-ext';
import { Button, Form, Input } from 'antd';

export default () => (
  <ModalForm trigger={<Button type="primary">新建</Button>} title="表单">
    <Form.Item label="姓名" name="name">
      <Input />
    </Form.Item>
  </ModalForm>
);

更多示例见 组件文档。

组件列表

布局与导航

组件	说明	文档
Layout	页面布局	查看
PageHeader	页头	查看
AppToolbar	应用工具栏	查看

表单

组件	说明	文档
ModalForm	模态框表单	查看
DrawerForm	抽屉表单	查看
FormCell	表单项包装	查看
Fieldset	分组标签	查看
FieldWrapper	字段包装器	查看
FieldsMapping	字段映射	查看
ExtFormField	扩展 FormField	查看
EditableDesc	可编辑描述	查看

表单控件

组件	说明	文档
ExtInput	扩展 Input	查看
ExtInputNumber	扩展 InputNumber	查看
ExtSelect	扩展 Select	查看
ExtTreeSelect	扩展 TreeSelect	查看
ExtCheckbox	扩展 Checkbox	查看
ExtRadio	扩展 Radio	查看
ExtSwitch	扩展 Switch	查看
ExtDatePicker	扩展 DatePicker	查看
FetchSelect	远程数据 Select	查看
FetchTreeSelect	远程数据 TreeSelect	查看
VerificationCodeInput	验证码输入	—

表格与工具栏

组件	说明	文档
GridTable	增强表格	查看
TableToolbar	表格工具栏	查看
SearchToolbar	搜索工具栏	查看

上传与媒体

组件	说明	文档
ImageUpload	图片上传	查看
PictureUpload	图片上传（Picture 模式）	查看
VideoUpload	视频上传	—
AvatarEditor	头像编辑器	查看

工具

导出	说明	文档
useCssInJs	CSS-in-JS 样式注册 Hook	—
ReactDomUtils	命令式挂载 React 组件	查看
SessionStorageUtils	SessionStorage 工具	—

本地开发

# 安装依赖
pnpm install

# 启动文档站点（含组件 Demo）
pnpm dev

# 构建组件库
pnpm build

# 构建文档
pnpm docs:build

License

MIT

---

关注我们，一起交流

留言回复不及时，可以通过关注公众号联系我们