Refine 搭配 Ant Design 与 React RouterUI 集成、布局与 CRUD 视图实战指南【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine本文基于 Refine 官方教程中“UI 库集成”单元的第一课Ant Design React Router 路线讲解如何为已有 Refine 项目接入refinedev/antd集成包安装依赖、用 Ant Design 的ConfigProvider与App组件包裹应用、引入reset.css再叠加ThemedLayout /获得侧边栏与页头布局。读完后你将掌握 Refine 与 Ant Design 的完整装配方式并理解布局组件在仓库源码中的真实构成以及useTable、useForm、通知系统等后续集成的落地路径。一、这个教程单元在做什么Refine 是用于构建内部工具、管理面板、仪表盘与 B2B 应用的 React 框架。除了核心refinedev/core之外它为流行的 UI 库提供了配套集成包官方文档中列出的主要有 Ant Design、Material UI、Chakra UI 与 Mantine。这些集成包提供一组组件和 Hooks简化表单、表格、布局、视图与按钮的管理。本单元Ant Design React Router在教程中紧随“路由集成”单元之后目标是把前面基于 React Router 搭好的项目升级为带 UI 层的应用。单元覆盖的主题包括使用布局组件layout components为应用添加菜单、页头、面包屑与认证管理使用 CRUD 视图组件view components创建设计一致、功能完整的 action 页面使用 Hooks 将表单元素和表格接入 Refine 的useTable与useForm将 Refine 的通知系统notifications与 Ant Design 的通知系统集成使用AuthPage /组件便捷地管理认证页面。在仓库中该单元对应 教程文档 与配套的 Sandpack 沙箱脚本。后者值得注意它在前一单元路由状态同步的完整文件基础上追加了refinedev/antd与antd两个依赖并逐步骤替换src/App.tsx说明本单元的改动是建立在已含dataProvider、authProvider与 products 资源路由的项目之上的。二、添加 Ant Design 依赖要使用 Ant Design 组件并访问 Refine 的集成 Hooks 与组件需要安装refinedev/antd与antd两个包npm install antd refinedev/antd安装完成后需要用 Ant Design 的ConfigProvider包裹应用以提供主题上下文用其App组件确保主题被正确消费后续通知系统也依赖它并引入antd/dist/reset.css重置浏览器默认样式。更新src/App.tsximport { Refine, Authenticated } from refinedev/core; import routerProvider, { NavigateToResource } from refinedev/react-router; import { BrowserRouter, Routes, Route, Outlet } from react-router; // 用 Ant Design 的 ConfigProvider 包裹应用以设置主题 // 并用 App 组件使主题被正确消费 import { ConfigProvider, App as AntdApp } from antd; import { dataProvider } from ./providers/data-provider; import { authProvider } from ./providers/auth-provider; import { ShowProduct } from ./pages/products/show; import { EditProduct } from ./pages/products/edit; import { ListProducts } from ./pages/products/list; import { CreateProduct } from ./pages/products/create; import { Login } from ./pages/login; import { Header } from ./components/header; // 引入 reset.css 重置浏览器默认样式 import antd/dist/reset.css; export default function App(): JSX.Element { return ( BrowserRouter ConfigProvider AntdApp Refine dataProvider{dataProvider} authProvider{authProvider} routerProvider{routerProvider} resources{[ { name: protected-products, list: /products, show: /products/:id, edit: /products/:id/edit, create: /products/create, meta: { label: Products }, }, ]} Routes Route element{ Authenticated keyauthenticated-routes redirectOnFail/login Header / Outlet / /Authenticated } Route index element{NavigateToResource resourceprotected-products /} / Route path/products Route index element{ListProducts /} / Route path:id element{ShowProduct /} / Route path:id/edit element{EditProduct /} / Route pathcreate element{CreateProduct /} / /Route /Route Route element{ Authenticated keyauth-pages fallback{Outlet /} NavigateToResource resourceprotected-products / /Authenticated } Route path/login element{Login /} / /Route /Routes /Refine /AntdApp /ConfigProvider /BrowserRouter ); }几点说明ConfigProvider位于BrowserRouter之内、Refine /之外保证整个应用树包括 Refine 渲染的组件都能读到同一份主题 tokenApp as AntdApp的别名避免了与项目自身App组件冲突AntdApp /是 Ant Design 静态方法如message、notification感知主题的桥接层resources中保留了meta: { label: Products }这个 label 正是后续ThemedLayout /侧边栏菜单的显示文本来源。三、添加布局用ThemedLayout /包裹认证路由依赖就位后教程的第二步是为应用添加布局。Refine 的 Ant Design 集成包提供了开箱即用的ThemedLayout /组件它自带菜单、页头等能力。只需将认证路由包裹起来import { Refine, Authenticated } from refinedev/core; import routerProvider, { NavigateToResource } from refinedev/react-router; import { ThemedLayout } from refinedev/antd; import { BrowserRouter, Routes, Route, Outlet } from react-router; import { ConfigProvider, App as AntdApp } from antd; import { dataProvider } from ./providers/data-provider; import { authProvider } from ./providers/auth-provider; import { ShowProduct } from ./pages/products/show; import { EditProduct } from ./pages/products/edit; import { ListProducts } from ./pages/products/list; import { CreateProduct } from ./pages/products/create; import { Login } from ./pages/login; import antd/dist/reset.css; export default function App(): JSX.Element { return ( BrowserRouter ConfigProvider AntdApp Refine dataProvider{dataProvider} authProvider{authProvider} routerProvider{routerProvider} resources{[ { name: protected-products, list: /products, show: /products/:id, edit: /products/:id/edit, create: /products/create, meta: { label: Products }, }, ]} Routes Route element{ Authenticated keyauthenticated-routes redirectOnFail/login ThemedLayout Outlet / /ThemedLayout /Authenticated } Route index element{NavigateToResource resourceprotected-products /} / Route path/products Route index element{ListProducts /} / Route path:id element{ShowProduct /} / Route path:id/edit element{EditProduct /} / Route pathcreate element{CreateProduct /} / /Route /Route Route element{ Authenticated keyauth-pages fallback{Outlet /} NavigateToResource resourceprotected-products / /Authenticated } Route path/login element{Login /} / /Route /Routes /Refine /AntdApp /ConfigProvider /BrowserRouter ); }放置布局的关键在于层级位置ThemedLayout /放在Authenticated /之内、Outlet /之外。这样只有登录成功的用户才会看到布局框架而/login路由走另一条“认证页面”分支保持干净的登录页。替换后原来的自定义Header /组件即被移除沙箱脚本在 finalFiles 中确实将src/components/header.tsx置空并隐藏由集成包的页头统一承担。源码视角ThemedLayout /由什么构成从仓库源码看布局并非单一黑盒组件。组件导出入口 显示它与一组可独立使用的部件一起导出export { ThemedLayout } from ./themedLayout; export { ThemedHeader } from ./themedLayout/header; export { ThemedSider } from ./themedLayout/sider; export { ThemedTitle } from ./themedLayout/title; export * from ./themedLayout/types;也就是说ThemedLayout由 Header、Sider、Title 三部分组成且每个子部件都单独导出——需要自定义时可以只替换其中一块而保留其余部分。官方文档对ThemedLayout /的描述是由 header、sider 与内容区组成sider 会为resources中定义的每个资源渲染导航菜单项若配置了authProvider还会提供可用的登出按钮header 展示应用 logo 与名称并在存在authProvider时展示当前用户信息。一个细节可以直接从源码验证ThemedHeader 实现 中页头会调用refinedev/core的useGetIdentity()获取当前用户并且只有当用户对象存在且带有name或avatar字段时才会渲染shouldRenderHeader检查否则返回null。这解释了为什么接入authProvider后 header 会自动出现用户姓名与头像也说明登录态与身份信息完全复用 Refine 核心的认证上下文而非另起一套逻辑。四、从源码结构看refinedev/antd的整体能力面理解本单元后续的“CRUD 视图、表单、表格、通知、AuthPage”主题可以先看包的整体导出结构。包入口 的组织方式是export * from ./hooks/index.js; export * from ./providers/index.js; export * from ./components/index.js; export * from ./contexts/index.js; export { getDefaultSortOrder, getDefaultFilter, mapAntdSorterToCrudSorting, mapAntdFilterToCrudFilter, } from ./definitions/table/index.js; export { rangePickerFilterMapper } from ./definitions/filter-mappers/index.js; export { getValueFromEvent } from ./definitions/upload/index.js; export * from ./definitions/themes/index.js;从中可以读出四件事Hooks、providers、components、contexts 四大块分别是useTable/useForm等 Hooks、useNotificationProvider等 provider、布局与视图组件、以及主题上下文包内显式导出mapAntdSorterToCrudSorting、mapAntdFilterToCrudFilter等映射函数——这正是“把 Refine 的 CRUD 排序/筛选模型翻译成 Ant DesignTable /API”的核心工具也是useTable能零配置驱动 Ant Design 表格排序与筛选的底层机制导出rangePickerFilterMapper对应 Ant Design 日期范围选择器到 Refine 过滤参数的转换通过definitions/themes导出RefineThemes预设主题供ConfigProvider theme{...} /直接使用。组件层面components 目录 按功能划分为themedLayout布局、buttonscreate/edit/delete/save/refresh/import/export 等按钮族、crudList/Show/Edit/Create 四个视图、fields文本、数字、日期、布尔等展示字段、table表格与 FilterDropdown、pagesAuthPage、ErrorComponent、欢迎页、breadcrumb面包屑、pageHeader、autoSaveIndicator。这套目录结构与教程单元预告的主题一一对应是理解后续各课代码落点的索引。五、后续主题速览表格、表单、通知与认证页教程单元在“添加布局”之后将逐步展开以下集成本节给出最小可用示例与仓库内对应物完整参数见官方文档。5.1 表格useTable Ant DesignTable /refinedev/antd的useTable是refinedev/core中useTable的扩展额外完成面向 Ant Design API 的转换使分页、排序、筛选都能直接驱动 Ant Design 的Table /import { useTable } from refinedev/antd; import { Table } from antd; export const ProductList () { // tableProps 包含传给 Table / 所需的全部 props // 其内部值已转换为符合 Ant Design API 的形式 const { tableProps } useTableIProduct(); return ( Table {...tableProps} rowKeyid Table.Column dataIndexid titleID / Table.Column dataIndexname titleName / Table.Column dataIndexprice titlePrice / /Table ); }; interface IProduct { id: string; name: string; price: number; description: string; }配套的FilterDropdown /组件源码位于 table/components/filterDropdown用于表头筛选弹层无需额外配置即可应用来自 Ant Design UI 的过滤条件。5.2 表单useForm Ant DesignForm /useForm同样是核心 Hooks 的扩展负责把校验、提交等逻辑映射到 Ant Design 的Form /组件上import { useForm, SaveButton } from refinedev/antd; import { Form, Input, InputNumber } from antd; export const ProductCreate () { // formProps 包含传给 Form / 所需的全部 props const { formProps, saveButtonProps } useFormIProduct(); return ( Form {...formProps} layoutvertical Form.Item labelName namename rules{[{ required: true }]} Input / /Form.Item Form.Item labelPrice nameprice rules{[{ required: true }]} InputNumber / /Form.Item Form.Item labelDescription namedescription rules{[{ required: true }]} Input.TextArea rows{4} / /Form.Item SaveButton {...saveButtonProps}Save/SaveButton /Form ); };此外包还提供useDrawerForm、useModalForm、useStepsForm等变体 Hooks以及基于核心useSelect封装的useSelect、useCheckboxGroup、useRadioGroup用于处理关联数据的表单字段。5.3 通知useNotificationProviderAnt Design 自带通知系统Refine 通过refinedev/antd导出的useNotificationProvider与它对接可直接传给Refine /的notificationProvider属性import { Refine } from refinedev/core; import { useNotificationProvider, RefineThemes } from refinedev/antd; import { ConfigProvider, App as AntdApp } from antd; const App () { return ( ConfigProvider theme{RefineThemes.Green} AntdApp Refine notificationProvider{useNotificationProvider} {/* ... */} /Refine /AntdApp /ConfigProvider ); };实现位于 notificationProvider 源文件其函数签名为export const useNotificationProvider (): NotificationProvider返回值即 Refine 核心的NotificationProvider契约。官方文档同时提醒如果项目定制了 Ant Design 主题务必用App /组件包裹应用通知才能继承当前主题配置——这正是第二节中AntdApp层存在的理由之一。5.4 按钮、视图、字段与认证页本单元“CRUD 视图组件”主题对应的能力在包中均已实现典型内容按钮族CreateButton、EditButton、ListButton、ShowButton、CloneButton、DeleteButton、SaveButton、RefreshButton、ImportButton、ExportButton均构建在 Ant DesignButton /之上内建授权检查、确认弹窗、加载态、缓存失效与导航逻辑。例如列表页操作列中Table.Column titleActions dataIndexactions render{(_, record) ( EditButton hideText sizesmall recordItemId{record.id} / )} /视图组件List /、Show /、Edit /、Create /四个包装器基于 Ant Design 的Card /、Space /构建自动提供基于资源的标题、面包屑、相关操作与授权检查字段组件TextField、NumberField、DateField、BooleanField、EmailField、FileField、ImageField、MarkdownField、TagField、UrlField用于以 Ant Design 的设计语言格式化展示值例如NumberField value{product?.price} options{{ style: currency, currency: USD }} /认证页AuthPage typelogin /、typeregister、typeforgot-password、typereset-password四种形态基于Form /、Card /等基础组件并复用 Refine 的认证 Hooks源码见 pages/auth 目录。更深入的组件级文档位于仓库 ui-integrations/ant-design 目录下可按 themed-layout、basic-views、buttons、fields 等章节逐节查阅。六、主题化与进阶能力主题refinedev/antd的组件默认读取 Ant Design 当前主题无需额外配置同时导出RefineThemes预设含亮/暗两套直接作为ConfigProvider theme{...} /的参数即可整体换肤。Inferencer配合refinedev/inferencerAntdListInferencer、AntdShowInferencer、AntdEditInferencer、AntdCreateInferencer以及聚合的AntdInferencer可根据资源类型定义自动推断并生成视图适合快速起步。已知问题官方文档记录了 Next.js Pages Router14 及以上版本配合 Ant Design 包时可能出现的SyntaxError: Unexpected token export编译错误属于 Ant Design 上游问题本教程采用 React Router 方案可完全绕开。七、小结与验证路径按本文操作后应用应满足登录成功后进入带侧边栏菜单与页头的布局框架/products下四个路由分别渲染 list/show/edit/create 页面/login保持无布局。若页头未显示用户信息优先核对authProvider的getIdentity返回是否包含name或avatar字段见ThemedHeader的渲染条件。关键仓库路径索引教程单元文档documentation/tutorial/ui-libraries/intro/ant-design/react-router/index.md集成包入口packages/antd/src/index.tsx组件导出packages/antd/src/components/index.ts布局页头实现packages/antd/src/components/themedLayout/header/index.tsx通知 provider 实现packages/antd/src/providers/notificationProvider/index.tsxAnt Design 集成总览文档documentation/docs/ui-integrations/ant-design/introduction/index.md【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Refine 搭配 Ant Design 与 React Router：UI 集成、布局与 CRUD 视图实战指南
Refine 搭配 Ant Design 与 React RouterUI 集成、布局与 CRUD 视图实战指南【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine本文基于 Refine 官方教程中“UI 库集成”单元的第一课Ant Design React Router 路线讲解如何为已有 Refine 项目接入refinedev/antd集成包安装依赖、用 Ant Design 的ConfigProvider与App组件包裹应用、引入reset.css再叠加ThemedLayout /获得侧边栏与页头布局。读完后你将掌握 Refine 与 Ant Design 的完整装配方式并理解布局组件在仓库源码中的真实构成以及useTable、useForm、通知系统等后续集成的落地路径。一、这个教程单元在做什么Refine 是用于构建内部工具、管理面板、仪表盘与 B2B 应用的 React 框架。除了核心refinedev/core之外它为流行的 UI 库提供了配套集成包官方文档中列出的主要有 Ant Design、Material UI、Chakra UI 与 Mantine。这些集成包提供一组组件和 Hooks简化表单、表格、布局、视图与按钮的管理。本单元Ant Design React Router在教程中紧随“路由集成”单元之后目标是把前面基于 React Router 搭好的项目升级为带 UI 层的应用。单元覆盖的主题包括使用布局组件layout components为应用添加菜单、页头、面包屑与认证管理使用 CRUD 视图组件view components创建设计一致、功能完整的 action 页面使用 Hooks 将表单元素和表格接入 Refine 的useTable与useForm将 Refine 的通知系统notifications与 Ant Design 的通知系统集成使用AuthPage /组件便捷地管理认证页面。在仓库中该单元对应 教程文档 与配套的 Sandpack 沙箱脚本。后者值得注意它在前一单元路由状态同步的完整文件基础上追加了refinedev/antd与antd两个依赖并逐步骤替换src/App.tsx说明本单元的改动是建立在已含dataProvider、authProvider与 products 资源路由的项目之上的。二、添加 Ant Design 依赖要使用 Ant Design 组件并访问 Refine 的集成 Hooks 与组件需要安装refinedev/antd与antd两个包npm install antd refinedev/antd安装完成后需要用 Ant Design 的ConfigProvider包裹应用以提供主题上下文用其App组件确保主题被正确消费后续通知系统也依赖它并引入antd/dist/reset.css重置浏览器默认样式。更新src/App.tsximport { Refine, Authenticated } from refinedev/core; import routerProvider, { NavigateToResource } from refinedev/react-router; import { BrowserRouter, Routes, Route, Outlet } from react-router; // 用 Ant Design 的 ConfigProvider 包裹应用以设置主题 // 并用 App 组件使主题被正确消费 import { ConfigProvider, App as AntdApp } from antd; import { dataProvider } from ./providers/data-provider; import { authProvider } from ./providers/auth-provider; import { ShowProduct } from ./pages/products/show; import { EditProduct } from ./pages/products/edit; import { ListProducts } from ./pages/products/list; import { CreateProduct } from ./pages/products/create; import { Login } from ./pages/login; import { Header } from ./components/header; // 引入 reset.css 重置浏览器默认样式 import antd/dist/reset.css; export default function App(): JSX.Element { return ( BrowserRouter ConfigProvider AntdApp Refine dataProvider{dataProvider} authProvider{authProvider} routerProvider{routerProvider} resources{[ { name: protected-products, list: /products, show: /products/:id, edit: /products/:id/edit, create: /products/create, meta: { label: Products }, }, ]} Routes Route element{ Authenticated keyauthenticated-routes redirectOnFail/login Header / Outlet / /Authenticated } Route index element{NavigateToResource resourceprotected-products /} / Route path/products Route index element{ListProducts /} / Route path:id element{ShowProduct /} / Route path:id/edit element{EditProduct /} / Route pathcreate element{CreateProduct /} / /Route /Route Route element{ Authenticated keyauth-pages fallback{Outlet /} NavigateToResource resourceprotected-products / /Authenticated } Route path/login element{Login /} / /Route /Routes /Refine /AntdApp /ConfigProvider /BrowserRouter ); }几点说明ConfigProvider位于BrowserRouter之内、Refine /之外保证整个应用树包括 Refine 渲染的组件都能读到同一份主题 tokenApp as AntdApp的别名避免了与项目自身App组件冲突AntdApp /是 Ant Design 静态方法如message、notification感知主题的桥接层resources中保留了meta: { label: Products }这个 label 正是后续ThemedLayout /侧边栏菜单的显示文本来源。三、添加布局用ThemedLayout /包裹认证路由依赖就位后教程的第二步是为应用添加布局。Refine 的 Ant Design 集成包提供了开箱即用的ThemedLayout /组件它自带菜单、页头等能力。只需将认证路由包裹起来import { Refine, Authenticated } from refinedev/core; import routerProvider, { NavigateToResource } from refinedev/react-router; import { ThemedLayout } from refinedev/antd; import { BrowserRouter, Routes, Route, Outlet } from react-router; import { ConfigProvider, App as AntdApp } from antd; import { dataProvider } from ./providers/data-provider; import { authProvider } from ./providers/auth-provider; import { ShowProduct } from ./pages/products/show; import { EditProduct } from ./pages/products/edit; import { ListProducts } from ./pages/products/list; import { CreateProduct } from ./pages/products/create; import { Login } from ./pages/login; import antd/dist/reset.css; export default function App(): JSX.Element { return ( BrowserRouter ConfigProvider AntdApp Refine dataProvider{dataProvider} authProvider{authProvider} routerProvider{routerProvider} resources{[ { name: protected-products, list: /products, show: /products/:id, edit: /products/:id/edit, create: /products/create, meta: { label: Products }, }, ]} Routes Route element{ Authenticated keyauthenticated-routes redirectOnFail/login ThemedLayout Outlet / /ThemedLayout /Authenticated } Route index element{NavigateToResource resourceprotected-products /} / Route path/products Route index element{ListProducts /} / Route path:id element{ShowProduct /} / Route path:id/edit element{EditProduct /} / Route pathcreate element{CreateProduct /} / /Route /Route Route element{ Authenticated keyauth-pages fallback{Outlet /} NavigateToResource resourceprotected-products / /Authenticated } Route path/login element{Login /} / /Route /Routes /Refine /AntdApp /ConfigProvider /BrowserRouter ); }放置布局的关键在于层级位置ThemedLayout /放在Authenticated /之内、Outlet /之外。这样只有登录成功的用户才会看到布局框架而/login路由走另一条“认证页面”分支保持干净的登录页。替换后原来的自定义Header /组件即被移除沙箱脚本在 finalFiles 中确实将src/components/header.tsx置空并隐藏由集成包的页头统一承担。源码视角ThemedLayout /由什么构成从仓库源码看布局并非单一黑盒组件。组件导出入口 显示它与一组可独立使用的部件一起导出export { ThemedLayout } from ./themedLayout; export { ThemedHeader } from ./themedLayout/header; export { ThemedSider } from ./themedLayout/sider; export { ThemedTitle } from ./themedLayout/title; export * from ./themedLayout/types;也就是说ThemedLayout由 Header、Sider、Title 三部分组成且每个子部件都单独导出——需要自定义时可以只替换其中一块而保留其余部分。官方文档对ThemedLayout /的描述是由 header、sider 与内容区组成sider 会为resources中定义的每个资源渲染导航菜单项若配置了authProvider还会提供可用的登出按钮header 展示应用 logo 与名称并在存在authProvider时展示当前用户信息。一个细节可以直接从源码验证ThemedHeader 实现 中页头会调用refinedev/core的useGetIdentity()获取当前用户并且只有当用户对象存在且带有name或avatar字段时才会渲染shouldRenderHeader检查否则返回null。这解释了为什么接入authProvider后 header 会自动出现用户姓名与头像也说明登录态与身份信息完全复用 Refine 核心的认证上下文而非另起一套逻辑。四、从源码结构看refinedev/antd的整体能力面理解本单元后续的“CRUD 视图、表单、表格、通知、AuthPage”主题可以先看包的整体导出结构。包入口 的组织方式是export * from ./hooks/index.js; export * from ./providers/index.js; export * from ./components/index.js; export * from ./contexts/index.js; export { getDefaultSortOrder, getDefaultFilter, mapAntdSorterToCrudSorting, mapAntdFilterToCrudFilter, } from ./definitions/table/index.js; export { rangePickerFilterMapper } from ./definitions/filter-mappers/index.js; export { getValueFromEvent } from ./definitions/upload/index.js; export * from ./definitions/themes/index.js;从中可以读出四件事Hooks、providers、components、contexts 四大块分别是useTable/useForm等 Hooks、useNotificationProvider等 provider、布局与视图组件、以及主题上下文包内显式导出mapAntdSorterToCrudSorting、mapAntdFilterToCrudFilter等映射函数——这正是“把 Refine 的 CRUD 排序/筛选模型翻译成 Ant DesignTable /API”的核心工具也是useTable能零配置驱动 Ant Design 表格排序与筛选的底层机制导出rangePickerFilterMapper对应 Ant Design 日期范围选择器到 Refine 过滤参数的转换通过definitions/themes导出RefineThemes预设主题供ConfigProvider theme{...} /直接使用。组件层面components 目录 按功能划分为themedLayout布局、buttonscreate/edit/delete/save/refresh/import/export 等按钮族、crudList/Show/Edit/Create 四个视图、fields文本、数字、日期、布尔等展示字段、table表格与 FilterDropdown、pagesAuthPage、ErrorComponent、欢迎页、breadcrumb面包屑、pageHeader、autoSaveIndicator。这套目录结构与教程单元预告的主题一一对应是理解后续各课代码落点的索引。五、后续主题速览表格、表单、通知与认证页教程单元在“添加布局”之后将逐步展开以下集成本节给出最小可用示例与仓库内对应物完整参数见官方文档。5.1 表格useTable Ant DesignTable /refinedev/antd的useTable是refinedev/core中useTable的扩展额外完成面向 Ant Design API 的转换使分页、排序、筛选都能直接驱动 Ant Design 的Table /import { useTable } from refinedev/antd; import { Table } from antd; export const ProductList () { // tableProps 包含传给 Table / 所需的全部 props // 其内部值已转换为符合 Ant Design API 的形式 const { tableProps } useTableIProduct(); return ( Table {...tableProps} rowKeyid Table.Column dataIndexid titleID / Table.Column dataIndexname titleName / Table.Column dataIndexprice titlePrice / /Table ); }; interface IProduct { id: string; name: string; price: number; description: string; }配套的FilterDropdown /组件源码位于 table/components/filterDropdown用于表头筛选弹层无需额外配置即可应用来自 Ant Design UI 的过滤条件。5.2 表单useForm Ant DesignForm /useForm同样是核心 Hooks 的扩展负责把校验、提交等逻辑映射到 Ant Design 的Form /组件上import { useForm, SaveButton } from refinedev/antd; import { Form, Input, InputNumber } from antd; export const ProductCreate () { // formProps 包含传给 Form / 所需的全部 props const { formProps, saveButtonProps } useFormIProduct(); return ( Form {...formProps} layoutvertical Form.Item labelName namename rules{[{ required: true }]} Input / /Form.Item Form.Item labelPrice nameprice rules{[{ required: true }]} InputNumber / /Form.Item Form.Item labelDescription namedescription rules{[{ required: true }]} Input.TextArea rows{4} / /Form.Item SaveButton {...saveButtonProps}Save/SaveButton /Form ); };此外包还提供useDrawerForm、useModalForm、useStepsForm等变体 Hooks以及基于核心useSelect封装的useSelect、useCheckboxGroup、useRadioGroup用于处理关联数据的表单字段。5.3 通知useNotificationProviderAnt Design 自带通知系统Refine 通过refinedev/antd导出的useNotificationProvider与它对接可直接传给Refine /的notificationProvider属性import { Refine } from refinedev/core; import { useNotificationProvider, RefineThemes } from refinedev/antd; import { ConfigProvider, App as AntdApp } from antd; const App () { return ( ConfigProvider theme{RefineThemes.Green} AntdApp Refine notificationProvider{useNotificationProvider} {/* ... */} /Refine /AntdApp /ConfigProvider ); };实现位于 notificationProvider 源文件其函数签名为export const useNotificationProvider (): NotificationProvider返回值即 Refine 核心的NotificationProvider契约。官方文档同时提醒如果项目定制了 Ant Design 主题务必用App /组件包裹应用通知才能继承当前主题配置——这正是第二节中AntdApp层存在的理由之一。5.4 按钮、视图、字段与认证页本单元“CRUD 视图组件”主题对应的能力在包中均已实现典型内容按钮族CreateButton、EditButton、ListButton、ShowButton、CloneButton、DeleteButton、SaveButton、RefreshButton、ImportButton、ExportButton均构建在 Ant DesignButton /之上内建授权检查、确认弹窗、加载态、缓存失效与导航逻辑。例如列表页操作列中Table.Column titleActions dataIndexactions render{(_, record) ( EditButton hideText sizesmall recordItemId{record.id} / )} /视图组件List /、Show /、Edit /、Create /四个包装器基于 Ant Design 的Card /、Space /构建自动提供基于资源的标题、面包屑、相关操作与授权检查字段组件TextField、NumberField、DateField、BooleanField、EmailField、FileField、ImageField、MarkdownField、TagField、UrlField用于以 Ant Design 的设计语言格式化展示值例如NumberField value{product?.price} options{{ style: currency, currency: USD }} /认证页AuthPage typelogin /、typeregister、typeforgot-password、typereset-password四种形态基于Form /、Card /等基础组件并复用 Refine 的认证 Hooks源码见 pages/auth 目录。更深入的组件级文档位于仓库 ui-integrations/ant-design 目录下可按 themed-layout、basic-views、buttons、fields 等章节逐节查阅。六、主题化与进阶能力主题refinedev/antd的组件默认读取 Ant Design 当前主题无需额外配置同时导出RefineThemes预设含亮/暗两套直接作为ConfigProvider theme{...} /的参数即可整体换肤。Inferencer配合refinedev/inferencerAntdListInferencer、AntdShowInferencer、AntdEditInferencer、AntdCreateInferencer以及聚合的AntdInferencer可根据资源类型定义自动推断并生成视图适合快速起步。已知问题官方文档记录了 Next.js Pages Router14 及以上版本配合 Ant Design 包时可能出现的SyntaxError: Unexpected token export编译错误属于 Ant Design 上游问题本教程采用 React Router 方案可完全绕开。七、小结与验证路径按本文操作后应用应满足登录成功后进入带侧边栏菜单与页头的布局框架/products下四个路由分别渲染 list/show/edit/create 页面/login保持无布局。若页头未显示用户信息优先核对authProvider的getIdentity返回是否包含name或avatar字段见ThemedHeader的渲染条件。关键仓库路径索引教程单元文档documentation/tutorial/ui-libraries/intro/ant-design/react-router/index.md集成包入口packages/antd/src/index.tsx组件导出packages/antd/src/components/index.ts布局页头实现packages/antd/src/components/themedLayout/header/index.tsx通知 provider 实现packages/antd/src/providers/notificationProvider/index.tsxAnt Design 集成总览文档documentation/docs/ui-integrations/ant-design/introduction/index.md【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考