form-antdmodule

React 19 + Ant Design 6 表单与表格组件库，封装了项目高频使用的 6 个组件与 3 个 hooks。

安装

npm install form-antdmodule
# 或
pnpm add form-antdmodule

peerDependencies

本包不打包以下依赖，消费者需自行安装：

npm install react react-dom antd @ant-design/icons @ant-design/pro-components react-i18next react-router-dom zustand lodash-es pinyin-pro

使用

import { ProTable, FormItem, FormRow, EditableModal, EditableTable, DrawerForm } from 'form-antdmodule'
import 'form-antdmodule/style.css'  // 样式（EditableTable + DrawerForm）

ProTable

基于 @ant-design/pro-components ProTable 封装，自动处理列对齐、列宽、省略、排序、枚举渲染、格式化。

import { ProTable, type BizProColumns } from 'form-antdmodule'

type User = { id: number; name: string; age: number }

const columns: BizProColumns<User>[] = [
  { title: '姓名', dataIndex: 'name', sortType: 'pinyin' },
  { title: '年龄', dataIndex: 'age', sortType: 'number', format: 'integer' },
]

export function7 function UserTable () {
  return (
    <ProTable<User>
      columns={columns}
      request={async (params) => {
        const data = await api.getUsers(params)
        return { data, success: true, total: data.length }
      }}
      rowKey="id"
    />
  )
}

i18n 配置：ProTable 内部通过 react-i18next 的 useTranslation 获取 t 函数翻译 placeholder（请输入/请选择）。消费者需配置 i18next：

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'

i18n.use(initReactI18next).init({
  resources: { 'zh-CN': { translation: {} } },
  lng: 'zh-CN',
  keySeparator: false,
})

FormItem

antd Form.Item 封装，支持只读详情模式（通过 type 透传，0=详情只读 1=新增 2=修改）。

import { FormItem } from 'form-antdmodule'

<FormItem name="username" label="用户名" type={0}>
  <Input />
</FormItem>

FormRow

表单行布局组件，type 透传给子 FormItem 统一切换详情/新增/修改模式。

import { FormRow, FormItem } from 'form-antdmodule'

<FormRow type={1}>
  <FormItem name="name" label="姓名"><Input /></FormItem>
  <FormItem name="age" label="年龄"><InputNumber /></FormItem>
</FormRow>

EditableTable

可编辑表格，支持行新增/编辑/删除，校验错误悬浮提示。

import { EditableTable, type EditableColumn } from 'form-antdmodule'

const columns: EditableColumn[] = [
  { title: '名称', dataIndex: 'name', editable: true },
]

<EditableTable columns={columns} value={rows} onChange={setRows} rowKey="id" />

EditableModal

多行可编辑表格弹窗，基于 EditableTable + antd Modal。

import { EditableModal } from 'form-antdmodule'

<EditableModal
  open={open}
  title="批量编辑"
  columns={columns}
  value={rows}
  onOk={handleSave}
  onCancel={() => setOpen(false)}
/>

DrawerForm

抽屉表单，底部按钮固定，表单主体自适应滚动。

import { DrawerForm } from 'form-antdmodule'

<DrawerForm
  open={open}
  title="编辑"
  form={form}
  onOk={handleSave}
  onCancel={() => setOpen(false)}
>
  <FormItem name="name" label="姓名"><Input /></FormItem>
</DrawerForm>

Hooks

import { useFieldChange, useFieldVisible, stripHidden, useDebouncedClick, useMountedRef } from 'form-antdmodule'

| Hook | 说明 | |---|---| | useFieldChange(form, watch, effect?, options?) | 字段变化时执行副作用，支持显隐联动 | | useFieldVisible(form, name) | 订阅字段是否可见（FormItem 内部用） | | stripHidden(form, values) | 提交时剔除隐藏字段 | | useDebouncedClick(fn, ms?) | 防抖点击（同步 + 异步双防抖） | | useMountedRef() | 组件挂载状态 ref，防卸载后 setState |

工具函数

import { formatOptionLabel, Ok, Err, Try, matchResult, isTableOk, isTableErr } from 'form-antdmodule'

| 函数 | 说明 | |---|---| | formatOptionLabel(options, config?) | 递归拼接选项 label 为 名称/编码 格式 | | Ok(data) / Err(msg) / Try(fn) | TableResult 包装器 | | matchResult(result, onOk, onErr) | TableResult 模式匹配 |

构建

cd packages/form-antdmodule
pnpm install --ignore-workspace
pnpm build        # tsup 构建，产物在 dist/

技术栈

• React 19 + TypeScript
• Ant Design 6 + @ant-design/pro-components
• tsup（构建）+ esbuild
• zustand（状态管理）+ react-i18next（国际化）

License

MIT