SuperAPI AI 工具集

web-ui-ant-design

设计与创作

查看项目

更新于 10-15 19:52

技能介绍

用途:为 React 企业管理后台、仪表盘和数据密集页面提供 Ant Design(antd)组件库的使用范式。v6.x 默认纯 CSS 变量、支持 zeroRuntime,需 React 18+;v5.x 处于维护状态,除特别说明外两者通用。

主要能力:

  • 主题与令牌:通过 ConfigProvider 和 Seed > Map > Alias 三层令牌定制外观,而非 CSS 覆盖;用 useToken() 读取当前令牌让自定义元素跟随主题。
  • 暗色与紧凑模式:用 theme.darkAlgorithm、theme.compactAlgorithm 组合切换,切换主题时应开启 cssVar: true。
  • 表单:支持校验、跨字段依赖、Form.List 动态字段、Form.useWatch,类型参数写在 Form.useForm<T>() 与 <Form<T>> 上,initialValues 放在 Form 上。
  • 表格:服务端驱动的排序、过滤、分页、选择与虚拟滚动;同时类型化 Table<T> 和 ColumnsType<T>,需设置 rowKey。
  • 布局:Layout/Sider 页面外壳、Row/Col 栅格、Flex、Space。
  • 反馈:通过 App.useApp() 获取 message、notification、modal;简短状态用 message,标题加描述用 notification,确认用 modal.confirm,表单或富内容用声明式 Modal,侧栏用 Drawer。
  • 数据展示与导航:Descriptions、Statistic、Menu items API、Breadcrumb,图标按需单独导入。
  • SSR:用 AntdRegistry 提取样式,其包裹 ConfigProvider。
  • 国际化:ConfigProvider locale 覆盖 antd 组件文案,dayjs locale 需单独设置并保持同步。
  • Pro Components:ProTable、ProForm、ProLayout、StepsForm 可从列生成搜索表单并处理 CRUD。

必要用法:应用根部需同时使用 ConfigProvider 与 App,反馈 API 从 App.useApp() 取用;SSR 场景 AntdRegistry 须包裹 ConfigProvider。

限制:不适用于自建无样式设计系统、路由层、服务端状态缓存、项目自有 CSS 方法论以及应用自身的翻译文案。静态 message/notification/Modal.confirm 脱离 App 会挂载在 ConfigProvider 之外,导致主题、语言与 CSS 变量错误。Form.Item 内受控控件不应再传 value 或 defaultValue。@ant-design/icons@6 与 antd@5 不兼容。虚拟表格需显式列宽和数值型 scroll.x/scroll.y。ProTable 的 request 需返回 success: true。具体示例代码与完整参考见官方文档,此处未提供完整代码。