@pisell/materials 1.0.1086 → 1.0.1087

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,89 @@
+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;
+/**
+ * ShellFrame：表格 / 平面图 / 日历三态；根级 `calendar` 传入受控 `resources` / `bookings`。
+ */
+export declare const ShellFrameGridFloorAndCalendar: Story;

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import GridLayout from './layouts/GridLayout';
+import CardLayout from './layouts/CardLayout';
+import RecordBoardShellFrame, { RecordBoardToolBar, RecordBoardBatchActionBar, RecordBoardPagination, RecordBoardSearch, RecordBoardFloorMap, RecordBoardCalendar } 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;
+    /**
+     * 日历槽位：仅在 ShellFrame 内声明，无 DOM；与 GridLayout / FloorMap 并存时出现「表格 / 平面图 / 日历」切换。
+     */
+    Calendar: typeof RecordBoardCalendar;
+    /** 单独使用：搜索槽（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, RecordBoardCalendarProps, RecordBoardCalendarResource, RecordBoardCalendarBookingLike, RecordBoardToolBarProps, } from './types';
+export { useRecordBoardContext } from './hooks/useRecordBoardContext';
+export { useRecordBoardShellBodyMeta } from './shellFrame';

package/es/components/pisellRecordBoard/layouts/GridLayout/Grid.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { TableProps } from 'antd';
+import type { RecordBoardContextValue } from '../../types';
+import './Grid.less';
+export interface RecordBoardGridViewProps extends Omit<TableProps<any>, 'dataSource' | 'loading' | 'pagination'>, Partial<Pick<RecordBoardContextValue, 'data' | 'loading'>> {
+    /** 列配置，同 antd Table columns */
+    columns?: TableProps<any>['columns'];
+    className?: string;
+    style?: React.CSSProperties;
+    /** 自定义渲染，传入后不再使用内置 Table */
+    render?: (ctx: RecordBoardContextValue) => React.ReactNode;
+}
+declare const RecordBoardGridView: React.FC<RecordBoardGridViewProps>;
+export default RecordBoardGridView;

package/es/components/pisellRecordBoard/shellFrame/Calendar/BookingCalendarDemo.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { RecordBoardCalendarProps } from "../../types";
+export default function BookingCalendarDemo(props?: RecordBoardCalendarProps): JSX.Element;

package/es/components/pisellRecordBoard/shellFrame/Calendar/PisellRecordBoardCalendarView.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { RecordBoardCalendarProps } from '../../types';
+export declare type PisellRecordBoardCalendarViewProps = RecordBoardCalendarProps;
+/**
+ * RecordBoard 日历视图：内嵌 BookingCalendarDemo（Tailwind 样式由包入口 `pisell-materials.tw.css` 注入）。
+ */
+export declare function PisellRecordBoardCalendarView(props: PisellRecordBoardCalendarViewProps): JSX.Element;

package/es/components/pisellRecordBoard/shellFrame/Calendar/RecordBoardCalendar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { RecordBoardCalendarProps } from '../../types';
+/**
+ * RecordBoard 日历槽位：仅在 PisellRecordBoard.ShellFrame 内使用，本身不渲染 DOM。
+ * 与 GridLayout、FloorMap 并存时出现「表格 / 平面图 / 日历」切换。
+ */
+declare const RecordBoardCalendar: React.FC<RecordBoardCalendarProps>;
+export default RecordBoardCalendar;

package/es/components/pisellRecordBoard/shellFrame/Calendar/calendarPersistGuard.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+/** 日历内会改本地预约数据的动作类型，供业务层拦截（如平面图未支持写接口时 toast） */
+export declare type CalendarPersistKind = 'moveBooking' | 'applyConflictMove' | 'createBooking' | 'removeBlocks' | 'createBlock' | 'confirmBlockWithConflicts' | 'checkin' | 'checkinReschedule' | 'mergeOrder' | 'other';
+export interface CalendarPersistContextValue {
+    /**
+     * 返回 false 时日历组件应取消本次本地数据变更（由调用方决定是否已 toast）。
+     * 未提供时默认允许所有本地变更（Story / 独立演示）。
+     */
+    beforePersist?: (kind: CalendarPersistKind) => boolean;
+}
+export declare const CalendarPersistProvider: React.FC<{
+    children: React.ReactNode;
+    value?: CalendarPersistContextValue;
+}>;
+/**
+ * 在日历 Demo 内判断某类写操作是否允许执行本地 state 更新。
+ */
+export declare function useCalendarPersist(): (kind: CalendarPersistKind) => boolean;

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

@@ -0,0 +1,4 @@
+export { CalendarPersistProvider, useCalendarPersist, } from './calendarPersistGuard';
+export type { CalendarPersistContextValue, CalendarPersistKind, } from './calendarPersistGuard';
+export { PisellRecordBoardCalendarView, type PisellRecordBoardCalendarViewProps, } from './PisellRecordBoardCalendarView';
+export { default as RecordBoardCalendar } from './RecordBoardCalendar';

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/FloorMap.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { RecordBoardFloorMapProps } from '../types';
+/**
+ * RecordBoard 平面图槽位：仅在 PisellRecordBoard.ShellFrame 内使用，本身不渲染 DOM。
+ * 将 PisellFloorMapLayout 所需 props 声明在树结构上；与 GridLayout 并存时出现「表格 / 平面图」切换。
+ *
+ * @example
+ * <PisellRecordBoard.ShellFrame>
+ *   <PisellRecordBoard.GridLayout />
+ *   <PisellRecordBoard.FloorMap floorMapConfig={...} dataSources={...} />
+ * </PisellRecordBoard.ShellFrame>
+ */
+declare const RecordBoardFloorMap: React.FC<RecordBoardFloorMapProps>;
+export default RecordBoardFloorMap;

package/es/components/pisellRecordBoard/shellFrame/ShellBodyMetaContext.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { RecordBoardFloorMapProps } from '../types';
+import type { RecordBoardCalendarProps } from '../types';
+/**
+ * ShellFrame 解析子节点后的元信息，供 ToolBar 等判断是否需要「表格 / 平面图 / 日历」Segmented。
+ * 未处于 ShellFrame.Provider 内时为 undefined（如单独挂载 ToolBar）。
+ */
+export interface RecordBoardShellBodyMeta {
+    /** 子组件 FloorMap props 与根级 floorMap 合并后的结果（子优先） */
+    effectiveFloorMapProps?: RecordBoardFloorMapProps;
+    /** 子组件 Calendar props 与根级 calendar 合并后的结果（子优先） */
+    effectiveCalendarProps?: RecordBoardCalendarProps;
+    /** ShellFrame 内是否存在 GridLayout / CardLayout 等非 FloorMap 子节点 */
+    hasGridContent: boolean;
+    /** 合并后是否存在可渲染的平面图配置 */
+    hasFloorMapSlot: boolean;
+    /** 合并后是否存在可渲染的日历配置 */
+    hasCalendarSlot: boolean;
+}
+export declare const RecordBoardShellBodyMetaContext: React.Context<RecordBoardShellBodyMeta | undefined>;
+export declare function useRecordBoardShellBodyMeta(): RecordBoardShellBodyMeta | undefined;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { RecordBoardToolBarProps as ToolBarPropsType } from '../../types';
+import './ToolBarFilter.less';
+import './recordBoardToolbar.less';
+/**
+ * RecordBoard 下的工具栏：使用 PisellToolBar。
+ * 左侧默认 PisellFind（inline）；右侧默认 PisellFilter。通过 childComponentProps.toolBar.search / toolBar.filter 为对象时透传对应组件 props，为 false 时不渲染。
+ * 可透传 topLeft、topRight、bottomLeft、bottomRight、tabs。
+ */
+declare const RecordBoardToolBar: React.FC<RecordBoardToolBarProps>;
+export declare type RecordBoardToolBarProps = ToolBarPropsType;
+export default RecordBoardToolBar;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import RecordBoardToolBar from './ToolBar';
+import RecordBoardBatchActionBar from './BatchActionBar';
+import RecordBoardPagination from './Pagination';
+import RecordBoardSearch from './Search';
+import './shellFrameFloorMap.less';
+import ToolBarReset from './ToolBarReset';
+import ToolBarQuickFilter from './ToolBarQuickFilter';
+import RecordBoardFloorMap from './FloorMap';
+import RecordBoardCalendar from './Calendar/RecordBoardCalendar';
+/**
+ * Shell Frame：基于 PisellShellFrame 的 RecordBoard 壳层。
+ * 解析子节点：**GridLayout / CardLayout 等** 与可选 **\<PisellRecordBoard.FloorMap /\>**、**\<PisellRecordBoard.Calendar /\>**；
+ * 子视图组合与 Segmented 切换由子节点与根级 props 决定；根级 `floorMap` / `calendar` 与子槽合并时**子组件优先**。
+ */
+declare const RecordBoardShellFrame: React.FC<{
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}>;
+export default RecordBoardShellFrame;
+export { RecordBoardToolBar, RecordBoardBatchActionBar, RecordBoardPagination, RecordBoardSearch, ToolBarReset, ToolBarQuickFilter, RecordBoardFloorMap, RecordBoardCalendar };
+export { useRecordBoardShellBodyMeta } from './ShellBodyMetaContext';