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

关注我们，一起交流

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