SmartCrudPage Props

TL;DR

一个配置驱动的 CRUD 页面组件，基于 fieldsConfig 自动生成表格、搜索、表单与详情。

👀 最小示例

import dynamic from 'next/dynamic'
const SmartCrudPage = dynamic(() => import('@/components/admin/smart-crud-page'), { ssr: false })

export default function Page() {
  return (
    <SmartCrudPage
      title="示例管理"
      fieldsConfig={[{ key: 'name', title: '名称', type: 'text', search: { mode: 'like' }, form: { required: true } }]}
      actions={actions}
      enableCreate
    />
  )
}

🔧 关键 Props

• title: string — 页面标题
• fieldsConfig: FieldConfig[] — 字段配置（驱动表格/表单/搜索）
• actions: { getList, getDetail?, create?, update, delete, batchUpdate?, batchDelete? }
• rowKey?: string | (row) => string — 默认 'id'
• enableCreate / enableEdit / enableDelete / enableDetail?: boolean
• enableIndexColumn?: boolean — 显示全局序号列
• tableApiRef?: React.Ref — 暴露 refresh / reloadAndRest / resetSearch / submitSearch / getSelectedRows
• customToolbarButtons?: ReactNode[]
• customRowActions?: { key, label, onClick, confirm?, showCondition? }[]
• batchActions?: { key, label, action: (ids, params) => Promise }[]

🔍 数据请求

• 默认走 actions.getList(params)；
• 如提供 dataSource + loading 则进入受控模式，不再发请求；
• 详情抽屉自动使用 getDetail（若存在）。

🔎 搜索与排序

• 搜索表单由 fieldsConfig.search 自动生成；
• 排序通过列表头点击触发，参数按 buildSortCondition 传入 actions；
• baseQuery 可强制附加固定筛选。

🧪 回调与扩展

• beforeCreate(record) / beforeEdit(record) / beforeDelete(record) — 返回 false 可中断
• renderDetailHeader(record) — 自定义详情头部
• onActionRefReady(actionRef, api) — 初次准备好时回调

🔗 相关

• 字段配置：api/FIELDS_CONFIG
• 表单组件：api/SMART_FORM
• CRUD 工厂：api/CRUD_HELPER