@pisell/materials 1.8.23 → 1.8.24

package/es/components/pisellPhone/types.d.ts

@@ -0,0 +1,209 @@
+import type { CSSProperties } from 'react';
+import type { BaseTextInputProps } from '@pisell/utils';
+/**
+ * 国家码配置类型
+ */
+export interface CountryCode {
+    /**
+     * 国家码
+     * @example '+86', '+1', '+44'
+     */
+    code: string;
+    /**
+     * 国家名称
+     * @example '中国', '美国', '英国'
+     */
+    name: string;
+    /**
+     * 国旗 emoji 或图标
+     * @example '🇨🇳', '🇺🇸', '🇬🇧'
+     */
+    flag: string;
+    /**
+     * 号码格式（可选，用于显示占位符）
+     * @example 'XXX XXXX XXXX', '(XXX) XXX-XXXX'
+     */
+    format?: string;
+    /**
+     * 最大长度
+     * @example 11 (中国), 10 (美国)
+     */
+    maxLength: number;
+    /**
+     * 校验正则
+     * @example /^1[3-9]\d{9}$/ (中国手机号)
+     */
+    pattern: RegExp;
+}
+/**
+ * PisellPhone 组件 Props 类型定义
+ *
+ * 继承 BaseTextInputProps，添加电话号码特有的配置
+ */
+export interface PisellPhoneProps extends BaseTextInputProps {
+    /**
+     * 状态模式
+     * @default 'edit'
+     */
+    mode?: 'read' | 'edit';
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 当前选中的国家码
+     * @default '+86'
+     * @example '+86', '+1', '+44'
+     */
+    countryCode?: string;
+    /**
+     * 默认国家码（非受控模式）
+     * @default '+86'
+     */
+    defaultCountryCode?: string;
+    /**
+     * 是否显示国家码选择器
+     * @default true
+     */
+    showCountrySelector?: boolean;
+    /**
+     * 可用的国家码列表（从预设24个中过滤）
+     * @example ['+86', '+1', '+44']
+     */
+    availableCountryCodes?: string[];
+    /**
+     * 常用国家码（置顶显示）
+     * @example ['+86', '+1']
+     */
+    commonCountryCodes?: string[];
+    /**
+     * 完全自定义国家码列表（覆盖预设）
+     */
+    countryCodes?: CountryCode[];
+    /**
+     * 国家码变更回调
+     * @param code 新的国家码
+     */
+    onCountryCodeChange?: (code: string) => void;
+    /**
+     * 是否自动格式化
+     * @default true
+     */
+    autoFormat?: boolean;
+    /**
+     * 格式化规则
+     * @default 'auto'
+     */
+    formatRule?: 'mobile' | 'landline' | 'auto';
+    /**
+     * 格式化分隔符
+     * @default ' '
+     */
+    separator?: string;
+    /**
+     * 是否启用拨号（移动端）
+     * @default true
+     */
+    enableDial?: boolean;
+    /**
+     * 是否显示拨号图标
+     * @default false
+     */
+    showDialIcon?: boolean;
+    /**
+     * 拨号回调
+     * @param phone 完整的电话号码（含国家码）
+     */
+    onDial?: (phone: string) => void;
+    /**
+     * 是否脱敏显示（只读态）
+     * @default false
+     */
+    enableMasking?: boolean;
+    /**
+     * 脱敏模式
+     * - middle: 中间4位脱敏（138****0000）
+     * - last: 后4位脱敏（1380000****）
+     * - custom: 使用自定义函数
+     * @default 'middle'
+     */
+    maskPattern?: 'middle' | 'last' | 'custom';
+    /**
+     * 自定义脱敏函数
+     * @param phone 电话号码
+     * @returns 脱敏后的号码
+     */
+    customMask?: (phone: string) => string;
+    /**
+     * 是否显示国旗图标
+     * @default true
+     */
+    showFlag?: boolean;
+    /**
+     * 字号
+     * @example '14px' 或 14
+     * @default 16
+     */
+    fontSize?: string | number;
+    /**
+     * 字重
+     * @example 'bold' 或 600
+     * @default 500
+     */
+    fontWeight?: string | number;
+    /**
+     * 文本颜色
+     * @example '#000000'
+     * @default '#101828'
+     */
+    color?: string;
+    /**
+     * 占位文本
+     * @default '请输入电话号码'
+     */
+    placeholder?: string;
+    /**
+     * 最大长度（根据国家码自动设置）
+     */
+    maxLength?: number;
+    /**
+     * 是否显示清空按钮
+     * @default false
+     */
+    allowClear?: boolean;
+    /**
+     * 是否自动聚焦
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * 是否校验格式
+     * @default true
+     */
+    validateFormat?: boolean;
+    /**
+     * 自定义校验函数
+     * @param phone 电话号码（纯数字）
+     * @param countryCode 国家码
+     * @returns true 表示校验通过，string 表示错误信息
+     */
+    customValidator?: (phone: string, countryCode: string) => boolean | string;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * ARIA 标签
+     */
+    'aria-label'?: string;
+    /**
+     * ARIA 描述
+     */
+    'aria-describedby'?: string;
+}
+export type { DisplayState, ValidationResult, TextInputState } from '@pisell/utils';

package/es/components/pisellPhone/utils/countryCodeHelper.d.ts

@@ -0,0 +1,35 @@
+import type { CountryCode, PisellPhoneProps } from '../types';
+/**
+ * 根据国家码获取国旗 emoji
+ * @param countryCode 国家码
+ * @returns 国旗 emoji
+ */
+export declare function getCountryFlag(countryCode: string): string;
+/**
+ * 根据国家码获取最大长度
+ * @param countryCode 国家码
+ * @param countryCodes 国家码列表
+ * @returns 最大长度
+ */
+export declare function getMaxLength(countryCode: string, countryCodes: CountryCode[]): number;
+/**
+ * 根据国家码获取配置
+ * @param countryCode 国家码
+ * @param countryCodes 国家码列表
+ * @returns 国家码配置
+ */
+export declare function getCountryConfig(countryCode: string, countryCodes: CountryCode[]): CountryCode | undefined;
+/**
+ * 获取最终的国家码列表
+ *
+ * 优先级：
+ * 1. props.countryCodes（完全自定义）
+ * 2. props.availableCountryCodes（从预设中过滤）
+ * 3. PRESET_COUNTRY_CODES（默认全部24个）
+ *
+ * 然后根据 props.commonCountryCodes 排序（置顶）
+ *
+ * @param props 组件 Props
+ * @returns 国家码列表
+ */
+export declare function getCountryCodes(props: PisellPhoneProps): CountryCode[];

package/es/components/pisellPhone/utils/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 电话号码工具函数导出
+ */
+export { formatPhone, formatChinaMobile, formatUSPhone, maskPhone, detectPhoneType } from './phoneFormatter';
+export { validatePhone } from './phoneValidator';
+export { getCountryFlag, getMaxLength, getCountryConfig, getCountryCodes, } from './countryCodeHelper';

package/es/components/pisellPhone/utils/phoneValidator.d.ts

@@ -0,0 +1,11 @@
+import type { CountryCode, PisellPhoneProps } from '../types';
+import type { ValidationResult } from '@pisell/utils';
+/**
+ * 电话号码校验
+ * @param phone 电话号码（纯数字）
+ * @param countryCode 国家码
+ * @param countryConfig 国家码配置
+ * @param props 组件 Props
+ * @returns 校验结果
+ */
+export declare function validatePhone(phone: string, countryCode: string, countryConfig: CountryCode | undefined, props: PisellPhoneProps): ValidationResult;

package/es/components/pisellQuickFilter/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare const pisellQuickFilter: React.ForwardRefExoticComponent<import("antd").FormInstance<any> & {
+    hasForm?: boolean | undefined;
+    children?: React.ReactNode;
+    formFiltersPrefix: string;
+    filterList?: import("../filter/types").FilterItemProps[] | undefined;
+    quickFilterMaxLength: number;
+    hiddenQuickFilter: boolean;
+    hiddenOtherFilter: boolean;
+} & React.RefAttributes<unknown>>;
+export default pisellQuickFilter;

package/es/components/pisellRating/PisellRating.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { PisellRatingProps } from './types';
+import './PisellRating.less';
+/**
+ * PisellRating 评分组件
+ *
+ * 基于 Ant Design Rate 组件开发，提供直观的星级评分交互。
+ * 支持只读、编辑、禁用三种状态。
+ *
+ * @param props 组件 Props
+ *
+ * @example
+ * // 基础使用
+ * const [rating, setRating] = useState(0);
+ * <PisellRating value={rating} onChange={setRating} />
+ *
+ * @example
+ * // 只读态
+ * <PisellRating mode="read" value={4.5} allowHalf />
+ *
+ * @example
+ * // 带评分描述
+ * <PisellRating
+ *   value={rating}
+ *   onChange={setRating}
+ *   tooltips={['很差', '差', '一般', '好', '很好']}
+ * />
+ */
+export declare const PisellRating: React.FC<PisellRatingProps>;
+declare const _default: React.NamedExoticComponent<PisellRatingProps>;
+export default _default;

package/es/components/pisellRating/PisellRating.stories.d.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellRating } from './PisellRating';
+declare const meta: Meta<typeof PisellRating>;
+export default meta;
+declare type Story = StoryObj<typeof PisellRating>;
+/**
+ * 基础示例
+ */
+export declare const Basic: Story;
+/**
+ * 只读态
+ */
+export declare const ReadOnly: Story;
+/**
+ * 禁用态
+ */
+export declare const Disabled: Story;
+/**
+ * 半星评分
+ */
+export declare const HalfStar: Story;
+/**
+ * 显示数值
+ */
+export declare const WithValue: Story;
+/**
+ * 显示评分人数
+ */
+export declare const WithCount: Story;
+/**
+ * 带评分描述
+ */
+export declare const WithTooltips: Story;
+/**
+ * 自定义星星数量
+ */
+export declare const CustomCount: Story;
+/**
+ * 自定义图标 - 爱心
+ */
+export declare const HeartIcon: Story;
+/**
+ * 自定义图标 - 笑脸
+ */
+export declare const SmileIcon: Story;
+/**
+ * 商品评分场景
+ */
+export declare const ProductReview: Story;
+/**
+ * 不同尺寸
+ */
+export declare const Sizes: Story;

package/es/components/pisellRating/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * PisellRating 组件导出
+ */
+import PisellRating from './PisellRating';
+export { PisellRating };
+export type { PisellRatingProps } from './types';
+export type { DisplayState } from './types';

package/es/components/pisellRating/types.d.ts

@@ -0,0 +1,124 @@
+import type { CSSProperties, ReactNode } from 'react';
+/**
+ * 从 @pisell/utils 重新导出公共类型
+ */
+export type { DisplayState } from '@pisell/utils';
+/**
+ * PisellRating 组件 Props 类型定义
+ *
+ * 基于 Ant Design Rate 组件，独立实现
+ */
+export interface PisellRatingProps {
+    /**
+     * 显示模式
+     * @default 'edit'
+     */
+    mode?: 'read' | 'edit';
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 当前评分值（受控）
+     */
+    value?: number;
+    /**
+     * 默认评分值（非受控）
+     */
+    defaultValue?: number;
+    /**
+     * 评分变更回调
+     */
+    onChange?: (value: number) => void;
+    /**
+     * 星星数量
+     * @default 5
+     */
+    count?: number;
+    /**
+     * 最大评分值（同 count，为了与 Number 系列保持一致）
+     * @default 5
+     */
+    max?: number;
+    /**
+     * 是否允许半星评分
+     * @default false
+     */
+    allowHalf?: boolean;
+    /**
+     * 是否允许清除评分
+     * @default true
+     */
+    allowClear?: boolean;
+    /**
+     * 自定义字符
+     * @default StarFilled
+     */
+    character?: ReactNode | ((props: {
+        index: number;
+        value: number;
+    }) => ReactNode);
+    /**
+     * 评分描述文本数组
+     * @example ['很差', '差', '一般', '好', '很好']
+     */
+    tooltips?: string[];
+    /**
+     * 是否显示数值文本
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * 是否显示评分人数
+     * @default false
+     */
+    showCount?: boolean;
+    /**
+     * 评分人数
+     */
+    reviewCount?: number;
+    /**
+     * 星星尺寸（仅影响样式）
+     * @default 20
+     */
+    size?: number;
+    /**
+     * 星星颜色（已选中）
+     * @default '#fadb14'
+     */
+    color?: string;
+    /**
+     * 星星颜色（未选中）
+     * @default '#d9d9d9'
+     */
+    unselectedColor?: string;
+    /**
+     * 悬停评分值变化回调
+     */
+    onHoverChange?: (value: number) => void;
+    /**
+     * 聚焦回调
+     */
+    onFocus?: () => void;
+    /**
+     * 失焦回调
+     */
+    onBlur?: () => void;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * ARIA 标签
+     */
+    'aria-label'?: string;
+    /**
+     * HTML id 属性
+     */
+    id?: string;
+}

package/es/components/pisellRecordBoard/PisellRecordBoard.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { RecordBoardProps } from './types';
+/**
+ * RecordBoard 容器：提供统一的 data / pagination / search 上下文。
+ * 打散 props：列表/分页/搜索/多选、grid/toolBar/…；可选根级 **floorMap**（兼容透传）。
+ * 平面图推荐在 ShellFrame 内使用 **PisellRecordBoard.FloorMap** 声明，与根级 `floorMap` 合并（子优先）。
+ */
+declare const PisellRecordBoard: React.FC<RecordBoardProps>;
+export default PisellRecordBoard;

package/es/components/pisellRecordBoard/PisellRecordBoard.stories.d.ts

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PisellRecordBoard from './index';
+declare const meta: Meta<typeof PisellRecordBoard>;
+export default meta;
+declare type Story = StoryObj<typeof PisellRecordBoard>;
+/**
+ * **默认 Story**：餐厅 **多数据源**——**餐桌** + **蘸料摆台**；根级 `dataSources` 同时包含两者；**表格只绑定餐桌一路**（`gridDataSourceKey`）；平面图同时渲染两类落位，无需 Segmented 切换列表。
+ */
+export declare const Default: Story;
+/**
+ * Grid 布局 - 带 Table、分页、多选；列 type 驱动列/筛选/排序；筛选在 Filter 弹层内；重置清空筛选与排序。
+ */
+export declare const GridLayoutWithTable: Story;
+/**
+ * Grid 布局 - 多页分页示例（至少 25 页：250 条数据，每页 10 条）
+ */
+export declare const GridWithMultiplePages: Story;
+/**
+ * Grid 布局 - 同值列折叠：当前页某列全部同值或全部为空时，该列隐藏并在表格上方展示总结区（列名 + 统一值/空数据）。
+ */
+export declare const GridLayoutWithCollapseUniformColumns: Story;
+/**
+ * Grid 布局 - uniformCompare 示例：列值为对象时，用 uniformCompare(value, record) 返回用于比较的 string/number，全同则折叠。
+ */
+export declare const GridLayoutWithUniformCompare: Story;
+/**
+ * Grid 布局 - grid 透传 antd Table props：onRow（行点击）、rowClassName 等
+ */
+export declare const GridWithOnRow: Story;
+/**
+ * Grid 布局 - 与 GridLayoutWithTable 类似，列 type 驱动列/筛选/排序，筛选在弹层内。
+ */
+export declare const GridLayoutWithColumnType: Story;
+/**
+ * Grid 布局 - ToolBar 内直接配置 sort 与 filter（不依赖列派生）
+ * toolBar.sort 用 getSortItems 手动配置选项，toolBar.filter 传 { defaultFilterValue }。
+ */
+export declare const GridLayoutToolBarSortAndFilter: Story;
+/**
+ * Grid 布局 - 快速筛选在 ToolBar 左侧内联展示（toolBar.quickFilter: true），右侧筛选弹层仅保留高级筛选。
+ */
+export declare const GridLayoutWithQuickFilterOnLeft: Story;
+/**
+ * 自定义左侧快速筛选 + Filter 弹层（高级筛选）+ 列自定义 render
+ */
+export declare const CustomQuickFilterAndColumnsRender: Story;
+/**
+ * 自定义 filter、自定义 sort、自定义 render
+ * 展示列上显式配置：筛选（订单状态 single 在高级筛选、下单时间 rangePickerNew + 自定义 placeholder/width 在快筛）、
+ * 排序（订单状态无 type，用 sort.getSortItems 自定义「状态 A-Z / Z-A」）、
+ * 以及列的自定义 render（订单号加粗蓝色、状态标签、买家加粗）。
+ */
+export declare const CustomFilterSortRender: Story;
+/**
+ * Grid 布局 - ToolBar 内使用 PisellFind（toolBar.search: true）
+ */
+export declare const GridLayoutWithPisellFindInToolBar: Story;
+/**
+ * Grid 布局 - ToolBar 内 PisellFind 透传（toolBar.search: { triggerType: 'input' }）
+ */
+export declare const GridLayoutToolBarSearchInput: Story;
+/**
+ * Grid 布局 - 完整示例（表格 + 多选 + BatchActionBar 批量操作）
+ */
+export declare const GridLayoutFull: Story;
+/**
+ * 占位 / 设计态（不传 value，无数据源）
+ */
+export declare const Placeholder: Story;
+/**
+ * Card 布局占位
+ */
+export declare const CardLayoutPlaceholder: Story;
+/**
+ * 自定义组合：单独挂 ToolBar / BatchActionBar / Grid / Pagination
+ */
+export declare const CustomComposition: Story;
+/**
+ * 使用 PisellFind 搜索槽：Search（PisellFind）+ ToolBar + Grid + Pagination
+ */
+export declare const WithPisellFindSearch: Story;
+/**
+ * 仅 Search + Grid + 分页（无 ToolBar）
+ */
+export declare const SearchAndGridOnly: Story;

package/es/components/pisellRecordBoard/index.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import GridLayout from './layouts/GridLayout';
+import CardLayout from './layouts/CardLayout';
+import RecordBoardShellFrame, { RecordBoardToolBar, RecordBoardBatchActionBar, RecordBoardPagination, RecordBoardSearch, RecordBoardFloorMap } from './shellFrame';
+import RecordBoardGridView from './layouts/GridLayout/Grid';
+import RecordBoardCardList from './layouts/CardLayout/CardList';
+import { useRecordBoardContext } from './hooks/useRecordBoardContext';
+import type { RecordBoardProps } from './types';
+/** RecordBoard 复合组件类型 */
+interface PisellRecordBoardType extends React.FC<RecordBoardProps> {
+    /** Shell Frame：对 Layout 的扩展，提供 ToolBar + BatchActionBar + children（Layout） */
+    ShellFrame: typeof RecordBoardShellFrame;
+    /** Grid 布局：仅内容区（表格 + 分页），需配合 ShellFrame 使用 */
+    GridLayout: typeof GridLayout;
+    /** 卡片布局：仅内容区（卡片列表 + 分页），需配合 ShellFrame 使用 */
+    CardLayout: typeof CardLayout;
+    /**
+     * 平面图槽位：仅在 ShellFrame 内声明，无 DOM； props 与 PisellFloorMapLayout 对齐。
+     * 与 GridLayout 同时存在时出现「表格 / 平面图」切换。
+     */
+    FloorMap: typeof RecordBoardFloorMap;
+    /** 单独使用：搜索槽（PisellFind，绑定 searchParams.keyword / onSearch） */
+    Search: typeof RecordBoardSearch;
+    /** 单独使用：工具栏（PisellToolBar，含搜索/导出，可透传 topLeft/topRight 等） */
+    ToolBar: typeof RecordBoardToolBar;
+    /** 单独使用：分页槽 */
+    Pagination: typeof RecordBoardPagination;
+    /** 单独使用：Grid 视图（表格） */
+    Grid: typeof RecordBoardGridView;
+    /** 单独使用：卡片列表视图 */
+    CardList: typeof RecordBoardCardList;
+    /** 多选操作栏（基于 PisellBatchActionBar，有选中项时展示） */
+    BatchActionBar: typeof RecordBoardBatchActionBar;
+    /** 消费 RecordBoard 上下文 */
+    useRecordBoardContext: typeof useRecordBoardContext;
+}
+declare const PisellRecordBoard: PisellRecordBoardType;
+export default PisellRecordBoard;
+export type { RecordBoardProps, RecordBoardLayoutType, RecordBoardContextValue, RecordBoardChildComponentProps, RecordBoardGridProps, RecordBoardColumnType, RecordBoardFieldType, RecordBoardColumnFilterConfig, RecordBoardOptionItem, RecordBoardGetOptions, RecordBoardBodyView, RecordBoardFloorMapProps, RecordBoardToolBarProps, } from './types';
+export { useRecordBoardContext } from './hooks/useRecordBoardContext';
+export { useRecordBoardShellBodyMeta } from './shellFrame';

package/es/components/pisellRecordBoard/shellFrame/BatchActionBar/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { PisellBatchActionBarProps } from '../../../pisellBatchActionBar';
+/**
+ * RecordBoard 下的多选操作栏：从 context 取选中态与数据，渲染 PisellBatchActionBar。
+ * 仅在有选中项时展示；全选/反选/清空基于当前页 data。
+ */
+declare const RecordBoardBatchActionBar: React.FC<Partial<PisellBatchActionBarProps>>;
+export default RecordBoardBatchActionBar;

package/es/components/pisellRecordBoard/shellFrame/ColumnSetting/ColumnSettingPopover.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 列显示隐藏弹层内容：显隐切换 + 拖拽排序（参考 table Actions ColumnsSetting PopoverContent）。
+ */
+import React from 'react';
+import type { RecordBoardColumnType } from '../../types';
+export interface ColumnSettingPopoverProps {
+    columns: RecordBoardColumnType[];
+    columnVisibility: Record<string, boolean>;
+    onColumnVisibilityChange: (visibility: Record<string, boolean>) => void;
+    /** 列 key 顺序（拖拽排序后持久化）；未传则按 columns 顺序 */
+    columnOrder?: string[] | null;
+    onColumnOrderChange?: (columnKeys: string[]) => void;
+}
+declare const ColumnSettingPopover: React.FC<ColumnSettingPopoverProps>;
+export default ColumnSettingPopover;

package/es/components/pisellRecordBoard/shellFrame/ColumnSetting/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * RecordBoard 列显示隐藏设置（仅控制表格列展示，不控制 filter/sort）。
+ * 参考 table Actions ColumnsSetting，仅保留显隐切换，无拖拽排序。
+ */
+import React from 'react';
+import './index.less';
+declare const RecordBoardColumnSetting: React.FC;
+export default RecordBoardColumnSetting;

package/es/components/pisellRecordBoard/shellFrame/Pagination/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './index.less';
+import type { RecordBoardContextValue } from '../../types';
+export interface RecordBoardPaginationProps extends Partial<Pick<RecordBoardContextValue, 'pagination' | 'total' | 'onPageChange' | 'loading'>> {
+    className?: string;
+    style?: React.CSSProperties;
+    render?: (ctx: RecordBoardContextValue) => React.ReactNode;
+}
+/**
+ * RecordBoard 下的分页：接入 packages/materials 的 Pagination，从 context 取 pagination / total / onPageChange；可透传 childComponentProps.pagination。
+ * 当 context 中 pagination 缺失时使用默认分页，避免在 Storybook 或未完整注入 context 时报错。
+ */
+declare const RecordBoardPagination: React.FC<RecordBoardPaginationProps>;
+export default RecordBoardPagination;