import type { ActionType, ProTableProps as AntProTableProps, ParamsType, ProColumns, ProFormInstance } from '@ant-design/pro-components'; import type { ButtonProps, DrawerProps, ModalProps } from 'antd'; import type { AxiosRequestConfig } from 'axios'; import type { ReactNode } from 'react'; /** Mobile 配置 */ export interface MobileColumnConfig { /** 是否在手机端显示,默认 false */ show?: boolean; /** 作为卡片标题 */ isTitle?: boolean; /** 作为卡片副标题 */ isSubtitle?: boolean; /** 显示为标签样式 */ isTag?: boolean; /** 显示为状态样式 */ isStatus?: boolean; /** 在筛选中显示 */ inFilter?: boolean; /** 自定义渲染 */ render?: (value: any, record: any) => ReactNode; } /** 扩展的列配置 */ export type MyColumns = ProColumns & { /** 手机端配置 */ mobile?: boolean | MobileColumnConfig; /** 在新增表单中隐藏 */ hiddenInAdd?: boolean; /** 在编辑表单中隐藏 */ hiddenInEdit?: boolean; /** 表单布局 */ colProps?: { span?: number; }; /** 标签样式 */ labelStyle?: React.CSSProperties; /** 内容样式 */ contentStyle?: React.CSSProperties; /** * 声明式行操作(仅 option 列有效): * 配置后 PC 操作列与手机端 ActionSheet 自动同步渲染,无需手写 render。 */ actions?: ColumnAction[]; }; /** 通用服务配置 */ export interface CommonServiceProps { /** 接口地址 */ api?: string; /** 权限标识 */ access?: string; /** 是否可见 */ visible?: boolean | ((row: T) => boolean); /** 按钮属性 */ btnProps?: (ButtonProps & { btnText?: string; }) | ((row?: T) => ButtonProps & { btnText?: string; }); /** 请求配置 */ requestConfig?: AxiosRequestConfig; /** 格式化请求参数 */ formatQuery?: (values: T, row?: T) => any; /** 成功回调 */ onSuccess?: (res: any) => void; /** 打开前回调 */ beforOpen?: (row?: T) => void; /** 打开前格式化数据 */ formatBeforeOpen?: (row: T) => Partial; /** 格式化列配置 */ formatColumns?: (columns: MyColumns[]) => MyColumns[]; /** Modal 属性 */ modalProps?: ModalProps; } /** 详情配置 */ export interface DetailServiceProps extends CommonServiceProps { /** 弹窗类型 */ modalType?: 'modal' | 'drawer'; /** Drawer 属性 */ drawerProps?: DrawerProps; /** 分组配置 */ group?: { title?: string; columns?: string[]; colProps?: { span?: number; }; cardProps?: any; proDescriptionsProps?: any; render?: (row: T) => ReactNode; }[]; /** 描述列表属性 */ descriptionsProps?: any; } /** 导入配置 */ export interface ImportServiceProps extends CommonServiceProps { /** 上传后回调 */ uploadAfter?: (res: any) => void; /** 失败回调 */ onFail?: (res: any) => void; } /** 导出配置 */ export interface ExportServiceProps extends CommonServiceProps { /** 文件后缀 */ fileSuffix?: string; } /** 列表配置 */ export interface ListServiceProps extends CommonServiceProps { /** 格式化返回结果 */ formatResult?: (res: any) => { data: T[]; success: boolean; total: number; }; } /** CRUD 配置 */ export interface CRUDProps { list?: ListServiceProps; add?: CommonServiceProps; edit?: CommonServiceProps; delete?: CommonServiceProps; detail?: DetailServiceProps; import?: ImportServiceProps; export?: ExportServiceProps; } /** 手机端操作配置 */ export interface MobileAction { /** 操作标识 */ key: string; /** 显示文本 */ text: string; /** 是否显示 */ visible?: boolean | ((row: T) => boolean); /** 点击回调 */ onClick?: (row: T) => void; /** 危险操作(红色) */ danger?: boolean; } /** * 声明式行操作:一份配置同时驱动 PC 操作列按钮与手机端 ActionSheet。 * 在 option 列上配置 actions 后,无需再手写 render,两端自动同步。 */ export interface ColumnAction { /** 操作标识(唯一) */ key: string; /** 显示文本(可为函数按行动态返回) */ text: ReactNode | ((row: T) => ReactNode); /** 权限码:传入 access(key) 校验,不通过则两端都不显示 */ access?: string; /** 是否隐藏(静态或按行判断) */ hidden?: boolean | ((row: T) => boolean); /** 危险操作(红色) */ danger?: boolean; /** 二次确认文案(传入后点击先弹确认框) */ confirm?: string; /** 点击回调;action.reload() 可刷新列表 */ onClick?: (row: T, action?: { reload: () => void; }) => void | Promise; } export type AuthActionKey = 'list' | 'add' | 'edit' | 'delete' | 'detail' | 'import' | 'export'; /** CRUD 动作(用于适配器) */ export type CrudAction = AuthActionKey; export interface AuthKeyBuilderParams { actionKey: AuthActionKey; actionCode: string; authPrefix: string; authKey: string; authSplit: string; } /** 权限配置 */ export interface AuthConfig { authPrefix?: string; authKey?: string; authSplit?: string; /** 是否禁用默认的自动权限码拼接,默认 false 以兼容旧项目 */ disableAutoAuth?: boolean; /** 动作到权限码后缀的映射,例如 add -> create */ actionMap?: Partial>; /** 自定义权限码拼接方式 */ buildAuthKey?: (params: AuthKeyBuilderParams) => string; } /** * 通用请求函数:不绑定 umi-request。 * axios / fetch 封装 / umi-request 均可,只要返回 Promise。 */ export type CrudRequestFn = (url: string, options?: CrudRequestOptions) => Promise; export interface CrudRequestOptions { url?: string; method?: string; data?: any; params?: any; headers?: Record; [key: string]: any; } export interface ListResult { data: T[]; total: number; success: boolean; } /** * 项目级 CRUD 适配:路径风格、HTTP 方法、列表字段等。 * 通过 CrudConfigProvider 或 ProTable.adapter 注入。 */ export interface CrudAdapter { /** 列表数据字段,默认 records;Go 后台常用 list */ listDataField?: string; /** 列表总数字段,默认 total */ listTotalField?: string; /** 成功标记字段,默认 success;也可 code */ successField?: string; /** 成功时字段取值,默认 true;code 场景常用 0 */ successValue?: any; /** 根据动作生成 URL */ buildUrl?: (action: CrudAction, crudKey: string, apiPrefix?: string) => string; /** 根据动作生成 method/data/params */ buildRequest?: (action: CrudAction, url: string, payload?: any) => CrudRequestOptions; /** 把接口响应转成 { data, total, success } */ formatListResult?: (res: any, adapter: CrudAdapter) => ListResult; /** 判断业务是否成功 */ isSuccess?: (res: any) => boolean; } /** 表单配置 */ export interface FormConfig { span?: number; } /** ProTable Ref */ export type ProTablePropsRef = ActionType | undefined; /** ProTable Props */ export interface ProTableProps extends Omit, 'columns'> { /** 列配置 */ columns?: MyColumns[]; /** CRUD 配置 */ crud?: CRUDProps; /** CRUD 接口前缀 */ crudKey?: string; /** API 前缀 */ apiPrefix?: string; /** 隐藏的按钮 */ hiddenBtns?: 'all' | (keyof CRUDProps)[]; /** 权限配置 */ authConfig?: AuthConfig; /** 全局查询参数 */ globalQuery?: Record; /** 初始查询参数 */ firstQuery?: Record; /** 权限校验函数;也可由 CrudConfigProvider 注入 */ access?: (key: string) => boolean; /** * HTTP 请求函数(不绑定 umi)。 * 注意:不可命名为 request,会与 Ant Design ProTable 的列表 request 冲突。 * 推荐在 CrudConfigProvider 用 request 注入;组件级继续用 umiRequest。 */ umiRequest?: CrudRequestFn; /** * CRUD 适配器:列表字段、REST 路径、成功码等。 * 也可由 CrudConfigProvider 注入;内置 restCrudAdapter / defaultCrudAdapter。 */ adapter?: CrudAdapter; /** 开发环境自动 Mock */ autoMock?: boolean; /** 表单 Ref */ formRef?: React.MutableRefObject; /** 请求成功回调 */ onReuqestSuccess?: (res: any) => void; /** 格式化查询参数 */ formatQuery?: (values: any, row?: T) => any; /** 表单配置 */ formConfig?: FormConfig; /** * 显示模式 * - auto: 自动根据屏幕宽度切换(默认) * - desktop: 强制桌面端 * - mobile: 强制手机端 */ mode?: 'auto' | 'desktop' | 'mobile'; /** 手机端断点宽度,默认 768 */ mobileBreakpoint?: number; /** 手机端操作按钮 */ mobileActions?: MobileAction[]; /** 手机端卡片点击回调 */ onMobileItemClick?: (row: T) => void; /** 手机端是否使用无限滚动,默认 true */ mobileInfiniteScroll?: boolean; }