import React from 'react'; import { CardProps, AvatarProps } from 'antd'; import { ColumnsType, TableProps } from 'antd/es/table'; import * as react_jsx_runtime from 'react/jsx-runtime'; import { MessageInstance } from 'antd/es/message/interface'; import { ModalStaticFunctions } from 'antd/es/modal/confirm'; import { NotificationInstance } from 'antd/es/notification/interface'; import { c as StatusMap } from '../common-CzP-URRL.cjs'; import { A as ApiResponse, P as PaginatedData } from '../api-DFOs5fnc.cjs'; /** * 表格操作列组件 * * 通用的表格操作列,支持主操作按钮 + "更多" 下拉菜单。 * 内置确认弹窗、onSuccess 自动回调和预设 action builder(详情/编辑/删除/切换状态)。 */ /** * 操作项定义 */ interface ActionItem { /** 唯一标识 */ key: string; /** 显示文本 */ label: string; /** 点击回调 */ onClick?: () => void; /** 类型:primary 显示为主按钮,默认为链接按钮 */ type?: 'primary' | 'link' | 'text' | 'default'; /** 危险样式 */ danger?: boolean; /** 是否禁用 */ disabled?: boolean; /** 是否隐藏 */ hidden?: boolean; /** 图标 */ icon?: React.ReactNode; /** 需要确认弹窗 */ confirm?: { title: string; description?: string; /** 确认回调,支持异步。配合 onSuccess 使用时:解析即成功、抛异常即失败 */ onConfirm: () => void | Promise; /** 操作成功后的提示消息(需配合 ActionColumnProps.onSuccess 使用) */ successMessage?: string; }; } /** * ActionColumn 组件属性 */ interface ActionColumnProps { /** 主操作(直接展示为按钮) */ actions?: ActionItem[]; /** 更多操作(收纳到下拉菜单中) */ moreActions?: ActionItem[]; /** "更多" 按钮文本,默认 '更多' */ moreText?: string; /** 按钮大小 */ size?: 'small' | 'middle' | 'large'; /** 自定义间距 */ gap?: number; /** confirm 操作成功后的回调(用于刷新列表等) */ onSuccess?: () => void; /** 操作失败时的默认提示消息,默认 '操作失败' */ defaultErrorMessage?: string; } /** * 表格操作列组件 * * @example * ```tsx * goEdit(record.id) }, * { key: 'view', label: '查看', onClick: () => goDetail(record.id) }, * ]} * moreActions={[ * { * key: 'delete', label: '删除', danger: true, * confirm: { * title: '确定要删除吗?', * onConfirm: () => handleDelete(record.id), * }, * }, * ]} * /> * ``` */ declare function ActionColumn({ actions, moreActions, moreText, size, gap, onSuccess, defaultErrorMessage, }: ActionColumnProps): React.ReactElement | null; /** * 创建"查看详情"操作 */ declare function createViewAction(onClick: () => void, options?: Partial): ActionItem; /** * 创建"编辑"操作 */ declare function createEditAction(onClick: () => void, options?: Partial): ActionItem; /** * 创建"删除"操作(带确认弹窗) */ declare function createDeleteAction(onConfirm: () => void, options?: Partial & { confirmTitle?: string; }): ActionItem; /** * 创建"切换状态"操作 * * @param currentEnabled - 当前是否为启用状态 * @param onConfirm - 确认切换回调 * @param options - 覆盖默认属性(可通过 label / confirm.title 自定义文案) * @param labels - 自定义文案 (enableLabel, disableLabel, enableConfirm, disableConfirm) */ declare function createToggleStatusAction(currentEnabled: boolean, onConfirm: () => void, options?: Partial, labels?: { enableLabel?: string; disableLabel?: string; enableConfirm?: string; disableConfirm?: string; }): ActionItem; /** * 自定义字段适配器 * * 将 `(value, onChange) => ReactNode` 形式的自定义渲染函数 * 适配为 antd Form.Item 所需的受控组件接口。 * * 被 DynamicFormModal 和 SearchFilterBar 共同使用。 */ /** * CustomFieldAdapter 属性 */ interface CustomFieldAdapterProps { /** 自定义渲染函数 */ render: (value: unknown, onChange: (v: unknown) => void) => React.ReactNode; /** 受控值 (由 Form.Item 注入) */ value?: unknown; /** 变更回调 (由 Form.Item 注入) */ onChange?: (v: unknown) => void; } /** * 自定义字段适配器 — 将 render 函数适配为受控组件 * * @example * ```tsx * * ( * * )} * /> * * ``` */ declare function CustomFieldAdapter({ render, value, onChange, }: CustomFieldAdapterProps): React.ReactElement; /** * 数据表格卡片组件 * * 用卡片容器包装的数据表格,支持空状态展示和移动端适配。 */ /** * DataTableCard 组件属性 */ interface DataTableCardProps { /** 卡片标题 */ title?: React.ReactNode; /** 卡片右上角额外内容 */ extra?: React.ReactNode; /** 表格列定义 */ columns: ColumnsType; /** 表格数据 */ dataSource: T[]; /** 行唯一标识字段,默认 'id' */ rowKey?: string | ((record: T) => string); /** 加载中 */ loading?: boolean; /** 空状态描述 */ emptyText?: string; /** 表格最大高度(启用垂直滚动) */ maxHeight?: number; /** 表格其他属性(可覆盖默认的 pagination={false}、size="small" 等) */ tableProps?: Omit, 'columns' | 'dataSource' | 'loading' | 'rowKey'>; /** 卡片其他属性 */ cardProps?: Omit; /** 自定义样式 */ style?: React.CSSProperties; /** 自定义类名 */ className?: string; } /** * 数据表格卡片组件 * * @example * ```tsx * 查看全部} * columns={orderColumns} * dataSource={recentOrders} * loading={loading} * emptyText="暂无订单数据" * maxHeight={400} * /> * ``` */ declare function DataTableCard({ title, extra, columns, dataSource, rowKey, loading, emptyText, maxHeight, tableProps, cardProps, style, className, }: DataTableCardProps): React.ReactElement; /** * 页面模式 */ type DetailPageMode = 'create' | 'edit' | 'view'; /** * 详情页面包屑项 */ interface DetailBreadcrumbItem { /** 显示文本 */ title: string; /** 链接路径 */ path?: string; } /** * DetailPageLayout 属性 */ interface DetailPageLayoutProps { /** 页面模式 */ mode?: DetailPageMode; /** 页面标题 (不传则根据 mode 自动生成) */ title?: React.ReactNode; /** 副标题 */ subtitle?: React.ReactNode; /** 面包屑项 */ breadcrumb?: DetailBreadcrumbItem[]; /** 右上角操作按钮区域 */ actions?: React.ReactNode; /** 底部操作栏 (如保存/取消按钮) */ footer?: React.ReactNode; /** 是否显示返回按钮, 默认 true */ showBack?: boolean; /** 返回按钮点击回调 */ onBack?: () => void; /** 返回按钮的无障碍标签,默认 '返回' */ backAriaLabel?: string; /** 面包屑导航回调 (传入 path) */ onNavigate?: (path: string) => void; /** 是否加载中 */ loading?: boolean; /** 自定义类名 */ className?: string; /** 自定义样式 */ style?: React.CSSProperties; /** 子内容 */ children: React.ReactNode; } /** * 详情页布局组件 * * @example * ```tsx * // 基础用法 — 编辑页 * history.back()} * footer={ * * * * * } * > *
* ... *
*
* * // 详情页 (只读) * goEdit(id)}>编辑} * loading={loading} * > * ... * * ``` */ declare function DetailPageLayout(props: DetailPageLayoutProps): react_jsx_runtime.JSX.Element; /** * 动态表单弹窗 — 类型定义 */ /** * 表单字段类型 */ type DynamicFieldType = 'input' | 'textarea' | 'number' | 'select' | 'radio' | 'checkbox' | 'switch' | 'date' | 'dateRange' | 'password' | 'custom'; /** * 字段选项 */ interface DynamicFieldOption { label: string; value: string | number | boolean; disabled?: boolean; } /** * 校验规则 */ interface DynamicFieldRule { /** 是否必填 */ required?: boolean; /** 自定义提示消息 */ message?: string; /** 最小长度 */ min?: number; /** 最大长度 */ max?: number; /** 正则验证 */ pattern?: RegExp; /** 自定义校验器 */ validator?: (value: unknown) => string | undefined; } /** * 表单字段配置 */ interface DynamicFormField { /** 字段名 */ name: string; /** 显示标签 */ label: string; /** 字段类型 */ type: DynamicFieldType; /** 占位符 */ placeholder?: string; /** 默认值 */ defaultValue?: unknown; /** 校验规则 */ rules?: DynamicFieldRule[]; /** 下拉/单选/多选选项 */ options?: DynamicFieldOption[]; /** 是否禁用 */ disabled?: boolean; /** 是否隐藏 */ hidden?: boolean; /** 栅格列宽 (24分制), 默认 24 (整行) */ span?: number; /** textarea 行数 */ rows?: number; /** 提示文字 */ tooltip?: string; /** 自定义渲染 (type='custom') */ render?: (value: unknown, onChange: (v: unknown) => void) => React.ReactNode; /** 联动: 依赖的字段名 + 条件 */ dependencies?: { field: string; condition: (depValue: unknown) => boolean; }[]; } /** * DynamicFormModal 属性 */ interface DynamicFormModalProps { /** 是否可见 */ open: boolean; /** 标题 */ title: string; /** 表单字段配置 */ fields: DynamicFormField[]; /** 初始值 (编辑模式) */ initialValues?: Record; /** 提交回调 */ onSubmit: (values: Record) => Promise | boolean | undefined; /** 取消/关闭回调 */ onCancel: () => void; /** 提交异常回调(非表单校验错误),默认 console.error */ onError?: (error: unknown) => void; /** 提交按钮文字 */ okText?: string; /** 取消按钮文字 */ cancelText?: string; /** Modal 宽度, 默认 520 */ width?: number | string; /** 关闭时是否销毁, 默认 true */ destroyOnClose?: boolean; /** 自定义类名 */ className?: string; /** * 必填校验的默认消息模板 * * 使用 `{label}` 占位符代表字段标签。 * 默认: `'请输入{label}'` * * @example * ```ts * requiredMessage="{label}不能为空" * ``` */ requiredMessage?: string; } /** * 动态表单弹窗组件 * * @example * ```tsx * { * const res = await createUser(values); * return isApiSuccess(res); * }} * onCancel={() => setVisible(false)} * /> * ``` */ declare function DynamicFormModal(props: DynamicFormModalProps): react_jsx_runtime.JSX.Element; /** * 错误边界组件 * * 使用 antd Result 组件,支持 antd-style。 */ /** * ErrorBoundary 组件属性 */ interface ErrorBoundaryProps { /** 子组件 */ children: React.ReactNode; /** 自定义 fallback UI */ fallback?: React.ReactNode | ((error: Error, reset: () => void) => React.ReactNode); /** 错误回调 (用于上报) */ onError?: (error: Error, errorInfo: React.ErrorInfo) => void; /** 重置回调 */ onReset?: () => void; /** 自定义标题 */ title?: string; /** 自定义描述 */ description?: string; /** * 是否显示错误详情 * - true: 始终显示 * - false: 不显示 * - 'auto': 默认不显示(可通过 showDetails 显式开启) */ showDetails?: boolean | 'auto'; /** 刷新页面按钮文本,默认 '刷新页面' */ reloadText?: string; /** 重试按钮文本,默认 '重试' */ retryText?: string; } interface ErrorBoundaryState { hasError: boolean; error: Error | null; errorInfo: React.ErrorInfo | null; } /** * 错误边界组件 * * 捕获子组件渲染错误,显示 fallback UI 并支持错误恢复。 * * @example * ```tsx * // 基础用法 * * * * * // 自定义 fallback * ( *
*

出错了: {error.message}

* *
* )} * onError={(error) => reportError(error)} * > * *
* ``` */ declare class ErrorBoundary extends React.Component { constructor(props: ErrorBoundaryProps); static getDerivedStateFromError(error: Error): Partial; componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void; handleReset: () => void; handleReload: () => void; shouldShowDetails(): boolean; render(): React.ReactNode; } /** 获取全局 message 实例(上下文感知) */ declare const getMessageApi: () => MessageInstance | null; /** 获取全局 notification 实例(上下文感知) */ declare const getNotificationApi: () => NotificationInstance | null; /** 获取全局 modal 实例(上下文感知) */ declare const getModalApi: () => Omit | null; /** * 重置全局实例引用(卸载 / 测试场景使用) */ declare function resetGlobalAntdApis(): void; /** * 全局 antd 实例挂载组件 * * 必须放置在 内部。捕获上下文感知的 message/notification/modal 实例, * 使非组件代码也能使用动态主题感知的 antd API。 * * 组件卸载时自动清理全局引用,防止 SSR / 微前端场景下的实例污染。 */ declare const GlobalAntdHolder: React.FC; /** * Tab 配置 */ interface PageTab { /** Tab key */ key: string; /** Tab 标签 */ tab: React.ReactNode; /** 是否禁用 */ disabled?: boolean; } /** * PageContainer 属性 */ interface PageContainerProps { /** 页面标题 */ title?: React.ReactNode; /** 副标题 */ subtitle?: React.ReactNode; /** 右上角操作区域 */ actions?: React.ReactNode; /** Tab 配置 */ tabs?: PageTab[]; /** 当前激活的 Tab key */ activeTab?: string; /** Tab 切换回调 */ onTabChange?: (key: string) => void; /** 是否用 Card 包裹内容, 默认 true */ wrapCard?: boolean; /** 页面间距, 默认 16 */ gap?: number; /** 自定义类名 */ className?: string; /** 自定义样式 */ style?: React.CSSProperties; /** 头部额外内容 (显示在标题和操作按钮之间) */ headerExtra?: React.ReactNode; /** 子内容 */ children: React.ReactNode; } /** * 页面容器组件 * * @example * ```tsx * // 基础列表页 * 新增用户 * } * > * * * * // 带 Tab 的页面 * * {currentTab === 'basic' && } * {currentTab === 'security' && } * {currentTab === 'notification' && } * * * // 无 Card 包裹 (自行管理布局) * * * * * ``` */ declare function PageContainer(props: PageContainerProps): react_jsx_runtime.JSX.Element; /** * 路由守卫组件 * * @experimental 此组件尚未在消费项目中广泛使用,API 可能调整。 * 大多数 UmiJS 项目倾向于在 wrappers 中直接使用 useModel + Navigate。 * * UmiJS 路由守卫通用模式: * - AuthGuard: 登录验证,未登录重定向到登录页 * - GuestGuard: 游客页面,已登录重定向到首页 * */ /** * AuthGuard 组件属性 */ interface AuthGuardProps { /** 是否已登录 */ isAuthenticated: boolean; /** 登录页路径,默认 '/login' */ loginPath?: string; /** * 重定向渲染函数 * * 返回一个 React 元素用于执行重定向(如 ``)。 * * @param path - 目标路径 * @returns 重定向 React 元素 */ redirect: (path: string) => React.ReactElement; /** 加载中组件(检查登录状态时展示) */ loading?: React.ReactNode; /** 是否正在检查登录状态 */ checking?: boolean; /** 子组件 */ children: React.ReactNode; } /** * 登录验证守卫 * * 用于保护需要登录才能访问的路由,未登录时重定向到登录页。 * * @example * ```tsx * // UmiJS wrappers/auth.tsx * import { Navigate, Outlet, useModel } from '@umijs/max'; * * export default function AuthWrapper() { * const { initialState } = useModel('@@initialState'); * return ( * } * loading={} * checking={initialState === undefined} * > * * * ); * } * ``` */ declare function AuthGuard({ isAuthenticated, loginPath, redirect, loading, checking, children, }: AuthGuardProps): React.ReactElement | null; /** * GuestGuard 组件属性 */ interface GuestGuardProps { /** 是否已登录 */ isAuthenticated: boolean; /** 登录后跳转路径,默认 '/' */ homePath?: string; /** * 重定向渲染函数 * * 返回一个 React 元素用于执行重定向(如 ``)。 * * @param path - 目标路径 * @returns 重定向 React 元素 */ redirect: (path: string) => React.ReactElement; /** 子组件 */ children: React.ReactNode; } /** * 游客页面守卫 * * 用于登录/注册等页面,已登录用户访问时重定向到首页。 * * @example * ```tsx * // UmiJS wrappers/guest.tsx * import { Navigate, Outlet, useModel } from '@umijs/max'; * * export default function GuestWrapper() { * const { initialState } = useModel('@@initialState'); * return ( * } * > * * * ); * } * ``` */ declare function GuestGuard({ isAuthenticated, homePath, redirect, children, }: GuestGuardProps): React.ReactElement | null; /** * 搜索字段类型 */ type SearchFieldType = 'input' | 'select' | 'dateRange' | 'date' | 'number' | 'custom'; /** * 选项 */ interface FieldOption { label: string; value: string | number; disabled?: boolean; } /** * 搜索字段配置 */ interface SearchField { /** 字段名 (对应表单 name) */ name: string; /** 显示标签 */ label?: string; /** 字段类型 */ type: SearchFieldType; /** 占位符 */ placeholder?: string; /** 下拉选项 (type='select') */ options?: FieldOption[]; /** 默认值 */ defaultValue?: unknown; /** 栅格列宽 (24分制), 默认 6 */ span?: number; /** 自定义渲染 (type='custom') */ render?: (value: unknown, onChange: (v: unknown) => void) => React.ReactNode; /** 输入后是否立即触发搜索 (默认 false, 需点搜索按钮) */ immediate?: boolean; } /** * SearchFilterBar 属性 */ interface SearchFilterBarProps { /** 搜索字段配置 */ fields: SearchField[]; /** 搜索回调 */ onSearch: (values: Record) => void; /** 重置回调 */ onReset?: () => void; /** 是否显示重置按钮, 默认 true */ showReset?: boolean; /** 搜索按钮文字, 默认 '搜索' */ searchText?: string; /** 重置按钮文字, 默认 '重置' */ resetText?: string; /** 展开按钮文字, 默认 '展开' */ expandText?: string; /** 折叠按钮文字, 默认 '收起' */ collapseText?: string; /** 是否默认折叠 (字段数 > collapseThreshold 时自动折叠), 默认 false */ defaultCollapsed?: boolean; /** 折叠阈值 (超过此数量的字段默认隐藏), 默认 3 */ collapseThreshold?: number; /** 自定义类名 */ className?: string; /** 自定义样式 */ style?: React.CSSProperties; /** 额外的操作按钮区域 */ extra?: React.ReactNode; } /** * 搜索过滤栏组件 * * @example * ```tsx * setSearchParams(values)} * onReset={() => setSearchParams({})} * /> * ``` */ declare function SearchFilterBar(props: SearchFilterBarProps): react_jsx_runtime.JSX.Element; /** * 统计卡片组件 + 统计卡片网格组件 * * Dashboard 中常用的统计数据展示卡片,支持图标、数值、标签、颜色预设。 */ /** * 颜色预设 — 通过 antd token 生成,自动适配暗黑模式 * * 运行时通过 `getThemedColorPresets(token)` 获取当前主题对应的颜色值。 * 静态常量 `STAT_COLOR_PRESETS` 仅作为浅色模式的回退值使用。 */ declare const STAT_COLOR_PRESETS: { readonly blue: { readonly bg: "#e6f4ff"; readonly text: "#1677ff"; readonly icon: "#1677ff"; }; readonly green: { readonly bg: "#f6ffed"; readonly text: "#52c41a"; readonly icon: "#52c41a"; }; readonly orange: { readonly bg: "#fff7e6"; readonly text: "#fa8c16"; readonly icon: "#fa8c16"; }; readonly red: { readonly bg: "#fff2f0"; readonly text: "#ff4d4f"; readonly icon: "#ff4d4f"; }; readonly purple: { readonly bg: "#f9f0ff"; readonly text: "#722ed1"; readonly icon: "#722ed1"; }; readonly cyan: { readonly bg: "#e6fffb"; readonly text: "#13c2c2"; readonly icon: "#13c2c2"; }; readonly gold: { readonly bg: "#fffbe6"; readonly text: "#faad14"; readonly icon: "#faad14"; }; readonly lime: { readonly bg: "#fcffe6"; readonly text: "#a0d911"; readonly icon: "#a0d911"; }; }; type StatColorPreset = keyof typeof STAT_COLOR_PRESETS; /** * StatCard 组件属性 */ interface StatCardProps { /** 标题 */ title: string; /** 数值 */ value: string | number; /** 图标 */ icon?: React.ReactNode; /** 颜色预设 */ color?: StatColorPreset; /** 自定义颜色 */ customColor?: { bg: string; text: string; icon: string; }; /** 加载中 */ loading?: boolean; /** 后缀文本(如单位) */ suffix?: string; /** 前缀文本 */ prefix?: string; /** 描述文本 */ description?: string; /** 点击回调 */ onClick?: () => void; /** 自定义样式 */ style?: React.CSSProperties; /** 自定义类名 */ className?: string; } /** * 统计卡片组件 * * @example * ```tsx * } * color="blue" * suffix="人" * /> * ``` */ declare const StatCard: React.NamedExoticComponent; /** * StatCardGrid 配置项 */ interface StatCardGridItem extends StatCardProps { /** 唯一标识 */ key: string; /** 是否隐藏 */ hidden?: boolean; /** 列宽配置 (Ant Design Col 的 span 属性) */ colSpan?: number; /** 响应式列宽配置 */ colProps?: { xs?: number; sm?: number; md?: number; lg?: number; xl?: number; xxl?: number; }; } /** * StatCardGrid 组件属性 */ interface StatCardGridProps { /** 卡片数据 */ items: StatCardGridItem[]; /** 行间距,默认 [16, 16] */ gutter?: number | [number, number]; /** 默认列宽(当 item 未指定 colSpan 时使用),默认 6 */ defaultColSpan?: number; /** 默认响应式列宽配置 */ defaultColProps?: StatCardGridItem['colProps']; /** 全局加载状态 */ loading?: boolean; } /** * 统计卡片网格组件 * * @example * ```tsx * }, * { key: 'orders', title: '总订单', value: 567, color: 'green', icon: }, * { key: 'revenue', title: '总收入', value: '¥12,345', color: 'orange', icon: }, * { key: 'growth', title: '增长率', value: '12.5%', color: 'purple', icon: }, * ]} * /> * ``` */ declare function StatCardGrid({ items, gutter, defaultColSpan, defaultColProps, loading, }: StatCardGridProps): React.ReactElement; /** * 多状态展示组件 * * @experimental 此组件尚未在消费项目中广泛使用,API 可能调整。 * * 统一的页面状态展示:空状态、错误状态、加载状态、403/404/500、成功结果等。 * 比 ErrorBoundary 更全面,适用于页面级别的状态展示。 */ /** * 状态类型 */ type StatusType = 'empty' | 'error' | 'loading' | 'success' | '403' | '404' | '500'; /** * StatusShow 组件属性 */ interface StatusShowProps { /** 状态类型 */ status: StatusType; /** 标题 */ title?: string; /** 描述文本 */ description?: string; /** 自定义图标 */ icon?: React.ReactNode; /** 操作按钮 */ extra?: React.ReactNode; /** 加载中的提示文本 */ loadingTip?: string; /** 自定义样式 */ style?: React.CSSProperties; /** 自定义类名 */ className?: string; /** 子内容(在 loading 状态下包裹显示) */ children?: React.ReactNode; } /** * 多状态展示组件 * * @example * ```tsx * // 空状态 * * * // 错误状态 + 重试按钮 * 重试} * /> * * // 加载状态包裹内容 * *
实际内容
*
* * // 403 无权限 * history.push('/')}>返回首页} * /> * ``` */ declare function StatusShow({ status, title, description, icon, extra, loadingTip, style, className, children, }: StatusShowProps): React.ReactElement; /** * 通用状态标签组件 * * 使用 antd Tag 组件渲染状态标签 */ /** * StatusTag 组件属性 */ interface StatusTagProps { /** 当前状态值 */ status: T | undefined | null; /** 状态映射表 */ statusMap: StatusMap; /** 未匹配状态时的默认文本,不设置则不渲染 */ defaultText?: string; /** 未匹配状态时的默认颜色 */ defaultColor?: string; /** 自定义类名 */ className?: string; /** 自定义样式 */ style?: React.CSSProperties; } /** * 通用状态标签组件 * * 根据状态值从映射表中获取显示文本和颜色,渲染为 Ant Design Tag。 * * @example * ```tsx * const STATUS_MAP: StatusMap<'active' | 'inactive'> = { * active: { text: '启用', color: 'green' }, * inactive: { text: '禁用', color: 'red' }, * }; * * // 基础用法 * * * // 未知状态显示默认文本 * * ``` */ declare function StatusTag({ status, statusMap, defaultText, defaultColor, className, style, }: StatusTagProps): React.ReactElement | null; /** * 回收站弹窗组件 (业务模式模板) * * 管理后台通用的回收站模式:展示已删除数据列表,支持恢复/永久删除/批量操作。 * 泛型设计,可适用于任何业务实体。 * * **注意**: 此组件为业务模式模板 (Business Pattern Template),而非纯通用 UI 组件。 * 它耦合了特定的 API 响应格式 (`ApiResponse>`), * 适用于后端遵循统一响应格式的管理后台项目。 * 如果你的 API 格式不同,建议参考此组件的实现模式自行封装。 */ /** * 回收站项的最小接口约束 */ interface RecycleBinItem { /** 记录 ID(支持 number 和 string UUID) */ id: string | number; /** 删除时间(可选展示) */ deletedAt?: string; } /** * 回收站 API 接口 */ interface RecycleBinApi { /** 获取回收站列表 */ list: (params: { pageNo: number; pageSize: number; }) => Promise>>; /** 恢复单条记录 */ restore: (id: T['id']) => Promise>; /** 永久删除单条记录 */ permanentDelete: (id: T['id']) => Promise>; /** 批量恢复(可选) */ batchRestore?: (ids: T['id'][]) => Promise>; /** 清空回收站(可选) */ clear?: () => Promise>; } /** * RecycleBinModal 文案配置 */ interface RecycleBinMessages { /** 弹窗标题,默认 '回收站' */ title?: string; /** 恢复按钮文字,默认 '恢复' */ restoreText?: string; /** 删除按钮文字,默认 '删除' */ deleteText?: string; /** 批量恢复按钮文字,默认 '批量恢复' */ batchRestoreText?: string; /** 清空按钮文字,默认 '清空' */ clearAllText?: string; /** 操作列标题,默认 '操作' */ actionsColumnTitle?: string; /** 永久删除确认文字,默认 '确定永久删除吗?此操作不可撤销。' */ permanentDeleteConfirm?: string; /** 清空确认文字,默认 '确定清空回收站吗?此操作不可撤销。' */ clearConfirm?: string; /** 恢复成功提示,默认 '恢复成功' */ restoreSuccess?: string; /** 恢复失败提示,默认 '恢复失败' */ restoreFailed?: string; /** 删除成功提示,默认 '已永久删除' */ deleteSuccess?: string; /** 删除失败提示,默认 '删除失败' */ deleteFailed?: string; /** 批量恢复成功提示模板,使用 {count} 占位符,默认 '已恢复 {count} 条记录' */ batchRestoreSuccess?: string; /** 批量恢复失败提示,默认 '批量恢复失败' */ batchRestoreFailed?: string; /** 清空成功提示,默认 '回收站已清空' */ clearSuccess?: string; /** 清空失败提示,默认 '清空失败' */ clearFailed?: string; /** 加载失败提示,默认 '加载回收站数据失败' */ loadFailed?: string; /** 总数展示模板,使用 {total} 占位符,默认 '共 {total} 条' */ totalText?: string; } /** * RecycleBinModal 组件属性 * * **注意**: 此组件为业务模式模板,耦合了特定的 API 响应格式 (`ApiResponse>`)。 * 适用于后端遵循统一响应格式的管理后台项目。 */ interface RecycleBinModalProps { /** 是否显示 */ open: boolean; /** 关闭回调 */ onClose: () => void; /** 回收站 API */ api: RecycleBinApi; /** 表格列定义 */ columns: ColumnsType; /** 弹窗标题(优先于 messages.title) */ title?: string; /** 成功状态码(与 ApiResponse.code 比较时自动转为字符串),默认 200 */ successCode?: string | number; /** 恢复成功后的回调(用于刷新主列表) */ onRestoreSuccess?: () => void | Promise; /** 弹窗宽度,默认 800 */ width?: number; /** 消息展示函数(必须由消费方提供) */ showMessage?: (content: string, type: 'success' | 'error') => void; /** 文案配置(国际化支持) */ messages?: Partial; } /** * 通用回收站弹窗组件 * * @example * ```tsx * setRecycleBinOpen(false)} * api={{ * list: getRecycleBinList, * restore: restoreItem, * permanentDelete: permanentDeleteItem, * batchRestore: batchRestoreItems, * clear: clearRecycleBin, * }} * columns={[ * { title: '名称', dataIndex: 'name' }, * { title: '删除时间', dataIndex: 'deletedAt' }, * ]} * showMessage={(content, type) => message[type](content)} * onRestoreSuccess={() => actionRef.current?.reload()} * /> * ``` */ declare function RecycleBinModal({ open, onClose, api, columns, title, successCode, onRestoreSuccess, width, showMessage, messages: messagesProp, }: RecycleBinModalProps): React.ReactElement; /** * 用户头像组件 * * 显示用户头像,支持图片加载失败时自动显示姓名首字母,基于名字自动生成背景颜色。 */ /** * UserAvatar 组件属性 */ interface UserAvatarProps extends Omit { /** 头像图片 URL */ src?: string | null; /** 用户名(用于生成缩写和颜色) */ name?: string; /** 自定义 fallback 文字 */ fallbackText?: string; /** 自定义 fallback 颜色 */ fallbackColor?: string; } /** * 用户头像组件 * * @example * ```tsx * // 有头像图片 * * * // 无头像 -> 自动显示名字缩写 + 颜色 * * // 显示 "三" 并自动分配背景色 * * // 英文名 * * // 显示 "JD" * ``` */ declare const UserAvatar: React.NamedExoticComponent; export { ActionColumn, type ActionColumnProps, type ActionItem, AuthGuard, type AuthGuardProps, CustomFieldAdapter, type CustomFieldAdapterProps, DataTableCard, type DataTableCardProps, type DetailBreadcrumbItem, DetailPageLayout, type DetailPageLayoutProps, type DetailPageMode, type DynamicFieldType, type DynamicFormField, DynamicFormModal, type DynamicFormModalProps, ErrorBoundary, type ErrorBoundaryProps, GlobalAntdHolder, GuestGuard, type GuestGuardProps, PageContainer, type PageContainerProps, type PageTab, type RecycleBinApi, type RecycleBinItem, type RecycleBinMessages, RecycleBinModal, type RecycleBinModalProps, STAT_COLOR_PRESETS, type SearchField, type SearchFieldType, SearchFilterBar, type SearchFilterBarProps, StatCard, StatCardGrid, type StatCardGridItem, type StatCardGridProps, type StatCardProps, type StatColorPreset, StatusShow, type StatusShowProps, StatusTag, type StatusTagProps, type StatusType, UserAvatar, type UserAvatarProps, createDeleteAction, createEditAction, createToggleStatusAction, createViewAction, getMessageApi, getModalApi, getNotificationApi, resetGlobalAntdApis };