@pisell/materials 1.8.24 → 1.8.25

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

@@ -0,0 +1,381 @@
+import type { ReactNode, Key, ComponentType, Ref } from 'react';
+import type { PisellFloorMapLayoutProps, PisellFloorMapLayoutRef, FloorMapDataSources, FloorMapLayoutContextValue } from '../pisellFloorMapLayout/types';
+import type { TableProps } from 'antd';
+/**
+ * 布局类型：一种 layout 对应一种「视图的集合」
+ * - grid: 搜索 + 表格 + 分页
+ * - card: 搜索 + 卡片列表 + 分页
+ * 后续可扩展 list、kanban 等
+ */
+export declare type RecordBoardLayoutType = 'grid' | 'card';
+/**
+ * 列字段类型：对应 Pisell 表单组件，传入列 type 时用该组件自动渲染列（只读）与筛选项（编辑）
+ */
+export declare type RecordBoardFieldType = 'singleLineText' | 'longText' | 'email' | 'phone' | 'url' | 'number' | 'currency' | 'percent' | 'rating' | 'singleSelect' | 'multipleSelect' | 'dateTime';
+/** 无 type 时筛选项可传入自定义组件，需支持 value / onChange 以接入 Form */
+export declare type RecordBoardFilterComponentProps = {
+    value?: any;
+    onChange?: (value: any) => void;
+    [key: string]: any;
+};
+/** 选项格式，用于 getOptions / options；color 用于只读态 Tag 展示 */
+export declare type RecordBoardOptionItem = {
+    label: string;
+    value: any;
+    /** 只读态 Tag 颜色，如 '#e6f7ff' 或 antd 预设 'blue' */
+    color?: string;
+};
+/** 同步或异步返回选项列表，singleSelect/multipleSelect 的 fieldProps.getOptions 或 filter.getOptions 使用 */
+export declare type RecordBoardGetOptions = (() => RecordBoardOptionItem[]) | (() => Promise<RecordBoardOptionItem[]>);
+/** 列筛选配置：不传列 type 时使用。可配置 type + options/props，或传入 component（接收 value/onChange）。 */
+export interface RecordBoardColumnFilterConfig {
+    type?: 'single' | 'input' | 'datePicker' | 'rangePicker' | 'rangePickerNew' | 'search';
+    label?: string;
+    options?: RecordBoardOptionItem[];
+    /** 同步或异步获取选项，与 options 二选一；支持 singleSelect/multipleSelect 及无 type 时 type:'single' */
+    getOptions?: RecordBoardGetOptions;
+    props?: Record<string, any>;
+    /** 放在快速筛选(true)还是高级筛选(false) */
+    quickFilter?: boolean;
+    /** 无 type 时可用：自定义筛选组件，由 Form 注入 value/onChange */
+    component?: ComponentType<RecordBoardFilterComponentProps>;
+}
+/**
+ * RecordBoard 列类型扩展（与 antd Table Column 兼容，仅增加可选字段）。
+ *
+ * 有 type（如 singleLineText）时：
+ * - 表格：自动用对应 Pisell 组件只读渲染；传入 render 则优先使用（覆盖）。
+ * - 筛选：自动用对应组件编辑态；传入 filter（type 或 component）则优先使用（覆盖）。
+ * - 排序：自动从组件 SortOptions 派生；传入 sort 则优先使用（覆盖）。
+ *
+ * 无 type 时：
+ * - 表格：无 render 则纯文本；可自定义 render。
+ * - 筛选：需配置 filterable + filter（type 或 component，component 需 value/onChange）。
+ * - 排序：需配置 sortable + sort（type 或 getSortItems）。
+ */
+export interface RecordBoardColumnType<RecordType = any> {
+    title?: ReactNode;
+    dataIndex?: string | string[];
+    key?: string;
+    width?: number | string;
+    align?: 'left' | 'right' | 'center';
+    fixed?: 'left' | 'right' | boolean;
+    ellipsis?: boolean;
+    /** 列渲染；无 type 时必靠此或默认纯文本；有 type 时可选，传入则覆盖自动派生 */
+    render?: (value: any, record: RecordType, index: number) => ReactNode;
+    /** 其他 antd 列属性 */
+    [key: string]: any;
+    /** 字段类型；传入则表格/筛选/排序自动派生，可被 render/filter/sort 覆盖 */
+    type?: RecordBoardFieldType;
+    /**
+     * 传给 Pisell 组件的额外 props（type 存在且未用 filter/render 覆盖时生效）。
+     * singleSelect/multipleSelect 时支持 options 或 getOptions（同步/异步返回选项列表）。
+     */
+    fieldProps?: Record<string, any>;
+    /** 是否参与筛选；false 时不生成筛项；有 type 时默认 true */
+    filterable?: boolean;
+    /** 筛选配置；无 type 时必传 type 或 component；有 type 时可选，传入则覆盖自动派生 */
+    filter?: RecordBoardColumnFilterConfig;
+    /** 是否参与排序；false 时不生成排序项；有 type 时默认 true */
+    sortable?: boolean;
+    /**
+     * 排序配置；无 type 时需 sortable + sort；有 type 时可选，传入则覆盖自动派生。
+     * - type：内置排序子项（string/number/option 等）。
+     * - getSortItems：(fieldKey) => [{ key, label }]。
+     */
+    sort?: {
+        type?: 'date' | 'string' | 'number' | 'option';
+        label?: string;
+        isHidden?: boolean;
+        /** 自定义排序子项，优先于 type；fieldKey 为列 key/dataIndex */
+        getSortItems?: (fieldKey: string) => Array<{
+            key: string;
+            label: string;
+        }>;
+    };
+    /** 默认隐藏该列，与 grid.defaultHiddenColumnKeys 合并参与初始化列显隐 */
+    hidden?: boolean;
+    /**
+     * 当开启 grid.collapseUniformColumns 时，用此函数从 (value, record) 得到用于比较的值；
+     * 返回 string 或 number 时参与全等比较，返回 null/undefined 则该列不参与折叠。
+     * 未传则用 dataIndex 取值；与 render 类似，便于从复杂数据中抽取值再判断是否全同。
+     */
+    uniformCompare?: (value: any, record: any) => string | number | null | undefined;
+    /**
+     * 当开启 grid.collapseUniformColumns 时，为 false 则该列即使全列同值/全空也不折叠、不进入总结区；默认 true。
+     */
+    collapseWhenUniform?: boolean;
+}
+/**
+ * 分页状态（与容器内部一致）
+ */
+export interface RecordBoardPaginationState {
+    pageNumber: number;
+    pageSize: number;
+}
+/**
+ * 列表请求结果（与 dataSource / useRequest 等对齐）
+ */
+export interface RecordBoardListResult {
+    list: any[];
+    count?: number;
+    total?: number;
+}
+/** ShellFrame 内容区：表格或平面图（与 GridLayout 同级切换） */
+export declare type RecordBoardBodyView = 'grid' | 'floorMap';
+/**
+ * 平面图槽位 props：与 PisellFloorMapLayout 对齐；items/renderItem 可省略（由 RecordBoard 默认 [] / () => null）。
+ */
+export declare type RecordBoardFloorMapProps = Partial<PisellFloorMapLayoutProps>;
+/**
+ * RecordBoard 容器 Context 值
+ * 与具体 layout 类型无关，所有 layout 共用同一套数据与操作
+ */
+export interface RecordBoardContextValue {
+    /**
+     * 平面图多数据源字典（整份各 key，不参与表格分页切片）。
+     * ShellFrame 会与 FloorMap 子 props 中的 dataSources 合并后传入 PisellFloorMapLayout。
+     */
+    dataSources?: FloorMapDataSources;
+    /**
+     * 表格绑定 `dataSources` 的 key；仅当未传入根级 `data` 时，表格数据由 `dataSources[gridDataSourceKey]` 推导并做客户端分页切片。
+     */
+    gridDataSourceKey?: string;
+    /** 当前列表数据 */
+    data: any[];
+    /** 加载态 */
+    loading: boolean;
+    /** 总数（用于分页） */
+    total: number;
+    /** 分页状态 */
+    pagination: RecordBoardPaginationState;
+    /** 分页变更 */
+    onPageChange: (pageNumber: number, pageSize: number) => void;
+    /** 搜索/筛选参数 */
+    searchParams: Record<string, any>;
+    /** 触发搜索（会重置到第一页） */
+    onSearch: (params: Record<string, any>) => void;
+    /** 重置搜索 */
+    onReset?: () => void;
+    /** 当前布局类型，供子组件按需做差异化 */
+    layoutType: RecordBoardLayoutType;
+    /** 多选：当前选中的 key 列表 */
+    selectedKeys: Key[];
+    /** 多选：当前选中的行数据 */
+    selectedRows: any[];
+    /** 多选：选择变更回调（表格/卡片勾选、BatchActionBar 全选/清空/反选时调用） */
+    onSelectionChange: (keys: Key[], rows: any[]) => void;
+    /** 行主键，用于多选与列表渲染，如 'id' 或 (record) => record.id */
+    rowKey?: string | ((record: any) => Key);
+    /**
+     * 列显示隐藏状态（仅影响表格/卡片列展示，不影响 filter/sort 配置）。
+     * key 为列 key/dataIndex，value 为是否显示；未出现的列默认显示。
+     */
+    columnVisibility?: Record<string, boolean>;
+    /** 列显示隐藏变更回调 */
+    onColumnVisibilityChange?: (visibility: Record<string, boolean>) => void;
+    /** 列 key 顺序（用于列设置弹层拖拽排序），未设置时按 grid.columns 顺序 */
+    columnOrder?: string[] | null;
+    /** 列顺序变更回调（拖拽排序后） */
+    onColumnOrderChange?: (columnKeys: string[]) => void;
+    /** 各子组件透传 props，由 Provider 注入 */
+    childComponentProps?: RecordBoardChildComponentProps;
+    /** 是否占满父容器高度，供 ShellFrame 做弹性布局（内容区纯 CSS 滚动 + 表头 sticky；scroll.autoCalc 时用测量高度） */
+    fillHeight?: boolean;
+    /** 内容区滚动容器高度（fillHeight 且 grid.scroll.autoCalc 时由 ShellFrame 测量），供 Grid 计算 scroll.y */
+    scrollAreaHeight?: number | null;
+    /** 设置内容区滚动容器高度（由 ShellFrame 测量组件调用） */
+    setScrollAreaHeight?: (height: number | null) => void;
+    /** 点击重置时递增，供 ToolBar 给 PisellFilter 设 key 以强制重挂载，清空弹窗内表单 */
+    filterResetKey?: number;
+    /** 递增 filterResetKey，由 ToolBarReset 在重置时调用 */
+    setFilterResetKey?: (fn: (prev: number) => number) => void;
+    /** 当前主内容区：表格或平面图；无平面图配置时一般为 grid（ShellFrame 内仅 FloorMap 时会改为 floorMap） */
+    bodyView: RecordBoardBodyView;
+    setBodyView: (v: RecordBoardBodyView) => void;
+    /** 根级传入的平面图 props（可选）；与 ShellFrame 内 FloorMap 子组件合并，子优先 */
+    floorMapProps?: RecordBoardFloorMapProps;
+    /**
+     * 平面图数据/保存等注入上下文（与 `FloorMapLayoutContextValue` 同形），由 Shell 内置 `FloorMapLayoutProvider` 注入 `PisellFloorMapLayout`；
+     * 与 `useRecordBoardContext()` 同源镜像，供 Toolbar 等读取。
+     */
+    floorMapLayoutContext?: FloorMapLayoutContextValue;
+    /** 双视图并存时首屏偏好（根 props，与 PisellRecordBoard.defaultBodyView 一致） */
+    defaultBodyView?: RecordBoardBodyView;
+    /** 挂到 ShellFrame 内 PisellFloorMapLayout，供外部 imperative 调用（如 saveLayout / fitBounds） */
+    floorMapLayoutRef?: Ref<PisellFloorMapLayoutRef | null>;
+    /**
+     * 平面图视图下叠在画布内的底部居中悬浮区（如「编辑平面图」），不单独占一行 footer。
+     */
+    floorMapFooter?: ReactNode;
+}
+/**
+ * 各 layout 下子组件的可选透传配置（类似 ChildComponentProps）
+ */
+/**
+ * BatchActionBar 透传配置，与 PisellBatchActionBar 的 props 对齐。
+ * 具体类型见 PisellBatchActionBarProps，此处仅做透传用。
+ */
+export declare type RecordBoardBatchActionBarProps = Record<string, any>;
+/** Filter 透传配置，与 PisellFilter 的 props 对齐 */
+export declare type RecordBoardFilterProps = Record<string, any>;
+/**
+ * ToolBar 透传配置。
+ * - 继承 PisellToolBar 的 slots：topLeft、topRight、bottomLeft、bottomRight、tabs。
+ * - search：默认在工具栏内渲染 PisellFind；为对象时透传为 PisellFind 的 props；为 false 时不渲染搜索。
+ * - filter：默认在工具栏右侧渲染 PisellFilter；为对象时透传 PisellFilter props；为 false 时不渲染。筛选值绑定 searchParams.filter，变更触发 onSearch。
+ */
+export interface RecordBoardToolBarProps {
+    className?: string;
+    style?: React.CSSProperties;
+    tabs?: React.ReactNode;
+    topLeft?: React.ReactNode;
+    topRight?: React.ReactNode;
+    bottomLeft?: React.ReactNode;
+    bottomRight?: React.ReactNode;
+    /** 在 ToolBar 内渲染搜索：默认 PisellFind；对象透传 PisellFind props；false 不渲染 */
+    search?: boolean | RecordBoardSearchProps;
+    /** 在 ToolBar 右侧渲染筛选：默认 PisellFilter；对象透传 PisellFilter props；false 不渲染。值存于 searchParams.filter */
+    filter?: boolean | RecordBoardFilterProps;
+    /** 在 ToolBar 内、筛选左侧渲染排序：默认 Sort；对象可传 list、placement 等；false 不渲染。值存于 searchParams.sort */
+    sort?: boolean | Record<string, any>;
+    /**
+     * 在 ToolBar 左侧展示内联快速筛选（替代 Filter 弹层内的 quickFilter）。
+     * 为 true 时使用 columns 派生的 quickFilter 列表；为对象时可传 filterList、formFiltersPrefix、size 等。
+     * 启用后建议对 filter 传 hiddenQuickFilter: true，弹层内仅保留高级筛选。
+     * hideFilterNamesOnFloorMap：仅当 Shell 内同时有表格+平面图且当前为平面图时，按筛选项 name（或 key）从内联快筛中移除，避免与顶栏日程重复（如预约 booking_time_start_between）。
+     */
+    quickFilter?: boolean | Record<string, any>;
+    /** 列显示隐藏设置入口；默认 true（有 grid.columns 时显示）；false 时不渲染 */
+    columnSetting?: boolean;
+}
+/** Search 透传配置，与 PisellFind 的 props 对齐 */
+export declare type RecordBoardSearchProps = Record<string, any>;
+/**
+ * Grid 布局透传配置，对应 RecordBoardGridView 的 props（useRecordBoardContext('grid') 会将其合并到 context）。
+ * 基于 antd TableProps，省略由 context 注入或组件自管的项（dataSource、loading、pagination、columns、scroll、size、rowSelection）。
+ * 多选用 selectedKeys/selectedRows/onSelectionChange；其余 Table props（如 onRow、onHeaderRow、expandable、rowClassName、summary）透传。
+ */
+export declare type RecordBoardGridProps = {
+    /** 列配置；ToolBar 据此派生筛选与排序，ColumnSetting 据此做列显示隐藏 */
+    columns?: RecordBoardColumnType[];
+    /** 默认隐藏的列 key 列表（对应 columns 的 key 或 dataIndex），用于初始化列显隐状态 */
+    defaultHiddenColumnKeys?: string[];
+    /**
+     * 当前页某列全部同值或全部为空时：隐藏该列，并在表格上方展示总结区（列名 + 统一值/空数据）。
+     * 比较规则：列可配置 uniformCompare(value, record) 返回用于比较的 string/number；否则用 dataIndex 取值；仅 string/number 参与比较，undefined/null 不参与。
+     * 默认 true；传 false 可关闭。
+     */
+    collapseUniformColumns?: boolean;
+    /**
+     * 表格滚动配置，对齐 materials Table useGenScroll。
+     * - x / y：同 antd Table scroll。
+     * - autoCalc：为 true 时根据内容区高度自动计算 scroll.y（需 fillHeight），表头固定、表体滚动。
+     * - scrollToFirstRowOnChange：翻页后是否滚动到第一行。
+     */
+    scroll?: {
+        x?: number | string;
+        y?: number | string;
+        autoCalc?: boolean;
+        scrollToFirstRowOnChange?: boolean;
+    };
+    /** 表格尺寸 */
+    size?: 'small' | 'middle' | 'default';
+    /** 当前选中的行 key 列表（多选） */
+    selectedKeys?: Key[];
+    /** 当前选中的行数据（多选） */
+    selectedRows?: unknown[];
+    /** 多选变更回调 */
+    onSelectionChange?: (keys: Key[], rows: unknown[]) => void;
+    /** 多选列配置：fixed、columnWidth 等，与 selectedKeys/onSelectionChange 合并为 Table rowSelection */
+    rowSelection?: Partial<Omit<NonNullable<TableProps<unknown>['rowSelection']>, 'selectedRowKeys' | 'onChange'>>;
+} & Omit<TableProps<unknown>, 'dataSource' | 'loading' | 'pagination' | 'columns' | 'scroll' | 'size' | 'rowSelection'>;
+export interface RecordBoardChildComponentProps {
+    /** 搜索配置，透传给 PisellFind；关键词绑定 searchParams.keyword */
+    search?: RecordBoardSearchProps;
+    /** 工具栏配置，透传给 PisellToolBar；内置搜索会接 context.searchParams/onSearch */
+    toolBar?: RecordBoardToolBarProps;
+    pagination?: Record<string, any>;
+    /** Grid 布局配置：列、滚动、尺寸等，透传给 RecordBoardGridView */
+    grid?: RecordBoardGridProps;
+    cardList?: Record<string, any>;
+    /** 多选操作栏配置，透传给 PisellBatchActionBar */
+    batchActionBar?: RecordBoardBatchActionBarProps;
+}
+/**
+ * RecordBoard 容器 Props。
+ * 仅打散传参：列表/分页/搜索/多选/列显隐、以及 grid/toolBar/search/paginationConfig/batchActionBar/cardList 独立传入。
+ */
+export interface RecordBoardProps {
+    /** 子节点，一般为某种 Layout 或自定义组合 */
+    children?: ReactNode;
+    /** 当前使用的布局类型 */
+    layoutType?: RecordBoardLayoutType;
+    /** 行主键，用于多选与列表 */
+    rowKey?: string | ((record: any) => Key);
+    /** 当前列表数据 */
+    data?: any[];
+    /**
+     * 平面图多数据源；与 `FloorMap` / 根级 `floorMap` 的 dataSources 在 ShellFrame 内合并（后者覆盖同 key）。
+     * 表格默认仍用 `data`；若不传 `data` 且提供 `gridDataSourceKey`，则由本字段对应 key 推导表格行并客户端分页。
+     */
+    dataSources?: FloorMapDataSources;
+    /**
+     * 表格使用的 `dataSources` key（如 `'tables'`）；与 `floorMapConfig` 内 `dataSourceKey` 对齐。
+     * 仅在根级 **`data` 未传入**时生效。
+     */
+    gridDataSourceKey?: string;
+    /** 加载态 */
+    loading?: boolean;
+    /** 总数（用于分页）；由 `dataSources` 推导表格时，未传则默认为该 key 对应数组长度 */
+    total?: number;
+    /** 分页状态 */
+    pagination?: RecordBoardPaginationState;
+    /** 分页变更 */
+    onPageChange?: (pageNumber: number, pageSize: number) => void;
+    /** 搜索/筛选参数 */
+    searchParams?: Record<string, any>;
+    /** 触发搜索（会重置到第一页） */
+    onSearch?: (params: Record<string, any>) => void;
+    /** 重置搜索 */
+    onReset?: () => void;
+    /** 列显隐持久化：传入则用 @pisell/utils 的 getComponentStorageKey 规则写入 localStorage；低代码可传 __id */
+    columnVisibilityStorageKey?: string;
+    /** Grid 配置：列、滚动、尺寸等 */
+    grid?: RecordBoardGridProps;
+    /** 工具栏配置 */
+    toolBar?: RecordBoardToolBarProps;
+    /** 搜索配置，透传给 PisellFind */
+    search?: RecordBoardSearchProps;
+    /** 分页组件透传配置（与 pagination 状态区分，此处为 Pagination 组件 props） */
+    paginationConfig?: Record<string, any>;
+    /** 多选操作栏配置 */
+    batchActionBar?: RecordBoardBatchActionBarProps;
+    /** 卡片列表配置 */
+    cardList?: Record<string, any>;
+    /** 是否启用分页（与 pagination 状态区分） */
+    enablePagination?: boolean;
+    /**
+     * 平面图（可选，兼容低代码 / SalesGrid 等）：与 PisellFloorMapLayout 对齐。
+     * 推荐在 ShellFrame 内使用 PisellRecordBoard.FloorMap 声明；若同时传根级与本项，Shell 内子组件 props 优先合并。
+     */
+    floorMap?: RecordBoardFloorMapProps;
+    /**
+     * 平面图 Context 注入（`FloorMapLayoutContextValue`）：配置/保存/加载等；展示向 props 仍建议走 `floorMap`。
+     * Shell 在平面图节点内置 Provider，无需再包一层 `FloorMapLayoutProvider`。
+     */
+    floorMapLayoutContext?: FloorMapLayoutContextValue;
+    /**
+     * 表格与平面图并存时首屏子视图，默认 grid。
+     * 仅声明 FloorMap 而无 Grid/Card 内容时由 ShellFrame 固定为平面图，不出现切换器。
+     */
+    defaultBodyView?: RecordBoardBodyView;
+    /** 与 bodyView 同步持久化到 localStorage 的 key（双视图时生效） */
+    bodyViewStorageKey?: string;
+    /** 平面图 Layout 实例 ref，由 ShellFrame 注入 */
+    floorMapLayoutRef?: Ref<PisellFloorMapLayoutRef | null>;
+    /** 平面图画布内底部悬浮插槽（如编辑入口），注入 Context 供 ShellFrame 渲染 */
+    floorMapFooter?: ReactNode;
+    /** 其他 */
+    [key: string]: any;
+}

package/es/components/pisellRecordBoard/utils/partitionShellFrameChildren.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { RecordBoardFloorMapProps } from '../types';
+/** 与 shellFrame/FloorMap 上定义的 displayName 一致，用于从 ShellFrame children 中识别平面图槽 */
+export declare const RECORD_BOARD_FLOOR_MAP_DISPLAY_NAME = "RecordBoard.FloorMap";
+/**
+ * 将 ShellFrame 的 children 拆成：供表格区渲染的子树 + 可选的 FloorMap 透传 props。
+ * 支持 Fragment 嵌套；多个 FloorMap 时以最后一个为准。
+ */
+export declare function partitionShellFrameChildren(children: React.ReactNode): {
+    gridChildren: React.ReactNode;
+    /** 是否出现 FloorMap 槽位节点（props 可为空，可与根级 floorMap 合并） */
+    hasFloorMapChild: boolean;
+    floorMapPropsFromChild?: RecordBoardFloorMapProps;
+    hasGridContent: boolean;
+};

package/es/components/pisellRecordBoard/utils/withRecordBoard.d.ts

@@ -0,0 +1,9 @@
+import React, { ComponentType } from 'react';
+import type { RecordBoardContextValue, RecordBoardChildComponentProps } from '../types';
+declare type RecordBoardDisplayName = keyof RecordBoardChildComponentProps;
+/**
+ * 为 RecordBoard 下的子组件注入 context，并合并 childComponentProps[displayName]。
+ * 用于 Search / ToolBar / Pagination / Grid / CardList 等「被接管」的通用组件封装。
+ */
+declare function withRecordBoard<P extends object, R = any>(WrappedComponent: ComponentType<P & RecordBoardContextValue>, displayName: RecordBoardDisplayName): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<R>>;
+export default withRecordBoard;

package/es/components/pisellReservationSchedule/PisellReservationSchedule.less

@@ -8,9 +8,9 @@
 .pisell-reservation-schedule-inner {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: 2px;
   max-width: 100%;
-  padding: 6px 10px;
+  padding: 2px 4px;
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.1);
   box-sizing: border-box;
@@ -20,12 +20,12 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 21px;
+  height: 21px;
   padding: 0;
   margin: 0;
   border: none;
-  border-radius: 8px;
+  border-radius: 4px;
   background: rgba(255, 255, 255, 0.08);
   color: rgba(255, 255, 255, 0.85);
   cursor: pointer;
@@ -43,15 +43,15 @@
 }
 
 .pisell-reservation-schedule-btn-icon {
-  width: 16px;
-  height: 16px;
+  width: 10px;
+  height: 10px;
 }
 
 .pisell-reservation-schedule-label {
   flex: 1;
   min-width: 0;
-  padding: 0 12px;
-  font-size: 15px;
+  padding: 0 5px;
+  font-size: 11px;
   font-weight: 500;
   line-height: 1.35;
   color: rgba(255, 255, 255, 0.92);

package/es/components/pisellReservationSchedule/locales.d.ts

@@ -0,0 +1,25 @@
+/** PisellReservationSchedule 多语言；使用前 locales.init 合并 */
+declare const _default: {
+    en: {
+        'pisell-reservation-schedule.today': string;
+        'pisell-reservation-schedule.prev': string;
+        'pisell-reservation-schedule.next': string;
+        'pisell-reservation-schedule.pick-date': string;
+        'pisell-reservation-schedule.pick-date-title': string;
+    };
+    'zh-CN': {
+        'pisell-reservation-schedule.today': string;
+        'pisell-reservation-schedule.prev': string;
+        'pisell-reservation-schedule.next': string;
+        'pisell-reservation-schedule.pick-date': string;
+        'pisell-reservation-schedule.pick-date-title': string;
+    };
+    'zh-HK': {
+        'pisell-reservation-schedule.today': string;
+        'pisell-reservation-schedule.prev': string;
+        'pisell-reservation-schedule.next': string;
+        'pisell-reservation-schedule.pick-date': string;
+        'pisell-reservation-schedule.pick-date-title': string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,42 @@
+import type { CSSProperties } from 'react';
+import type { Dayjs } from 'dayjs';
+/** 与 PisellTimeNavigator 一致：dayjs 或可解析字符串 */
+export declare type ReservationScheduleValue = Dayjs | string | null | undefined;
+/**
+ * PisellReservationSchedule：营业日切换条（上一日 / 文案 / 下一日）
+ */
+export interface PisellReservationScheduleProps {
+    /**
+     * 当前选中日（受控），日历日语义，建议使用 startOf('day') 对齐
+     */
+    value?: ReservationScheduleValue;
+    /**
+     * 选中日变更
+     */
+    onChange?: (date: Dayjs) => void;
+    /**
+     * 非受控初始日
+     */
+    defaultValue?: ReservationScheduleValue;
+    /**
+     * 不可早于该日（含）
+     */
+    minDate?: ReservationScheduleValue;
+    /**
+     * 不可晚于该日（含）
+     */
+    maxDate?: ReservationScheduleValue;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 根节点样式
+     */
+    style?: CSSProperties;
+    /**
+     * 为 true 时禁用上一日/下一日、日期点选（弹日历）；用于「跟随当前时刻」等只读日期条
+     * @default false
+     */
+    navigationLocked?: boolean;
+}

package/es/components/pisellReservationScheduleBand/PisellReservationScheduleBand.js

@@ -8,6 +8,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useState, useCallback } from 'react';
 import dayjs from 'dayjs';
 import classNames from 'classnames';
+import { Spin } from 'antd';
 import { PisellReservationSchedule } from "../pisellReservationSchedule";
 import { PisellTimeNavigator } from "../pisellTimeNavigator";
 import "./PisellReservationScheduleBand.less";
@@ -30,6 +31,9 @@ export function PisellReservationScheduleBand(props) {
     scheduleStartSlot = props.scheduleStartSlot,
     scheduleEndSlot = props.scheduleEndSlot,
     scheduleAfterDateSlot = props.scheduleAfterDateSlot,
+    _props$dataLoading = props.dataLoading,
+    dataLoading = _props$dataLoading === void 0 ? false : _props$dataLoading,
+    dataLoadingTip = props.dataLoadingTip,
     className = props.className,
     style = props.style;
   var isControlled = valueProp !== undefined;
@@ -68,9 +72,16 @@ export function PisellReservationScheduleBand(props) {
     });
   }, [emit, effective.date]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames('pisell-reservation-schedule-band', className),
+    className: classNames('pisell-reservation-schedule-band', dataLoading && 'pisell-reservation-schedule-band--data-loading', className),
     style: style
-  }, /*#__PURE__*/React.createElement("div", {
+  }, dataLoading ? /*#__PURE__*/React.createElement("div", {
+    className: "pisell-reservation-schedule-band-data-loading-overlay",
+    "aria-busy": "true",
+    "aria-live": "polite"
+  }, /*#__PURE__*/React.createElement(Spin, {
+    size: "small",
+    tip: dataLoadingTip != null ? dataLoadingTip : undefined
+  })) : null, /*#__PURE__*/React.createElement("div", {
     className: "pisell-reservation-schedule-band-schedule-row"
   }, /*#__PURE__*/React.createElement("div", {
     className: "pisell-reservation-schedule-band-slot-start"

package/es/components/pisellReservationScheduleBand/PisellReservationScheduleBand.less

@@ -1,4 +1,5 @@
 .pisell-reservation-schedule-band {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -7,6 +8,29 @@
   box-sizing: border-box;
 }
 
+/** 切换营业日等场景：遮罩覆盖日程条 + 时间轴，避免误操作并提示加载中 */
+.pisell-reservation-schedule-band-data-loading-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 12px;
+  background: rgba(20, 24, 36, 0.42);
+  backdrop-filter: blur(1px);
+  pointer-events: auto;
+}
+
+.pisell-reservation-schedule-band--data-loading
+.pisell-reservation-schedule-band-schedule-row,
+.pisell-reservation-schedule-band--data-loading
+.pisell-reservation-schedule-band-navigator {
+  pointer-events: none;
+  user-select: none;
+}
+
 /** 与中间日程条同一行：整行深色底，左标题 / 中选日 / 右操作 */
 .pisell-reservation-schedule-band-schedule-row {
   display: grid;
@@ -14,9 +38,9 @@
   align-items: center;
   width: 100%;
   min-width: 0;
-  column-gap: 12px;
+  column-gap: 7px;
   box-sizing: border-box;
-  padding: 10px 14px;
+  padding: 2px 7px;
   border-radius: 0;
   background: #141824;
   border: 1px solid rgba(255, 255, 255, 0.06);
@@ -44,7 +68,7 @@
   flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: 5px;
 }
 
 /** 日程组件根节点默认 width:100%，在中间栏会与「日期右侧」插槽分两行；此处收窄为内容宽，保证与 after-date 同一行 */

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

@@ -44,6 +44,14 @@ export interface PisellReservationScheduleBandProps {
      * 顶栏日程行：紧挨在选日组件之后（如「跟随当前」），与中间列同一 flex 区
      */
     scheduleAfterDateSlot?: ReactNode;
+    /**
+     * 为 true 时在整个日程带上叠加载层（如切换营业日后拉预约列表期间）
+     */
+    dataLoading?: boolean;
+    /**
+     * 加载层内文案，由业务侧 {@link locales.getText} 等注入
+     */
+    dataLoadingTip?: ReactNode;
     className?: string;
     style?: CSSProperties;
 }

package/es/components/pisellShellFrame/PisellShellFrame.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { PisellShellFrameProps } from './types';
+import './PisellShellFrame.less';
+/**
+ * PisellShellFrame：通用壳层布局组件。
+ * 支持通过 config 控制各区域显隐，不同展示类型（表格/看板/日历/楼层图等）复用同一壳层。
+ *
+ * - 顶部：标题区（标题/副标题/辅助信息）、工具区（Toolbar）、统计区（Statistic List，可选折叠）
+ * - 中间：滚动承载（可选）+ Layout 插槽（children）
+ * - 底部：批量操作条（按选中状态出现）、状态提示区（加载/错误/同步提示等）
+ */
+export declare const PisellShellFrame: React.FC<PisellShellFrameProps>;
+export default PisellShellFrame;

package/es/components/pisellShellFrame/PisellShellFrame.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellShellFrame } from './PisellShellFrame';
+declare const meta: Meta<typeof PisellShellFrame>;
+export default meta;
+declare type Story = StoryObj<typeof PisellShellFrame>;
+/** 仅标题区 */
+export declare const TitleOnly: Story;
+/** 标题 + 工具区 */
+export declare const WithToolbar: Story;
+/** 标题 + 统计区（可折叠，国际化） */
+export declare const WithStatisticCollapsible: Story;
+/** 中间滚动 + 底部批量条 + 状态区 */
+export declare const WithScrollBatchAndStatus: Story;
+/** 全区域展示（默认展开统计） */
+export declare const Full: Story;

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

@@ -0,0 +1,2 @@
+export { PisellShellFrame, default } from './PisellShellFrame';
+export type { PisellShellFrameProps, PisellShellFrameConfig, PisellShellFrameScrollConfig, } from './types';