@pisell/materials 6.11.16 → 6.11.18

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.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "layoutType", "rowKey", "data", "loading", "total", "pagination", "onPageChange", "searchParams", "onSearch", "onReset"];
+var _excluded = ["children", "layoutType", "rowKey", "data", "dataSources", "gridDataSourceKey", "loading", "total", "pagination", "onPageChange", "searchParams", "onSearch", "onReset", "floorMap", "floorMapLayoutContext", "defaultBodyView", "bodyViewStorageKey", "floorMapLayoutRef", "floorMapFooter", "className", "style"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -25,6 +25,16 @@ var defaultPagination = {
   pageNumber: 1,
   pageSize: 50
 };
+function readBodyViewFromStorage(key, fallback) {
+  if (typeof window === 'undefined' || !key) return fallback;
+  try {
+    var raw = localStorage.getItem(key);
+    if (raw === 'grid' || raw === 'floorMap') return raw;
+  } catch (_unused) {
+    /* ignore quota / private mode */
+  }
+  return fallback;
+}
 
 /**
  * 从打散 props 合并出 childComponentProps（供 context 使用）。
@@ -69,13 +79,23 @@ function getDefaultRecordBoardContext(layoutType, selection, rowKey) {
     scrollAreaHeight: null,
     setScrollAreaHeight: undefined,
     filterResetKey: undefined,
-    setFilterResetKey: undefined
+    setFilterResetKey: undefined,
+    bodyView: 'grid',
+    setBodyView: function setBodyView() {},
+    floorMapProps: undefined,
+    floorMapLayoutContext: undefined,
+    defaultBodyView: undefined,
+    floorMapLayoutRef: undefined,
+    floorMapFooter: undefined,
+    dataSources: undefined,
+    gridDataSourceKey: undefined
   };
 }
 
 /**
  * RecordBoard 容器：提供统一的 data / pagination / search 上下文。
- * 仅接受打散 props：列表/分页/搜索/多选/列显隐、以及 grid/toolBar/search/paginationConfig/batchActionBar/cardList。
+ * 打散 props：列表/分页/搜索/多选、grid/toolBar/…；可选根级 **floorMap**（兼容透传）。
+ * 平面图推荐在 ShellFrame 内使用 **PisellRecordBoard.FloorMap** 声明，与根级 `floorMap` 合并（子优先）。
  */
 var PisellRecordBoard = function PisellRecordBoard(props) {
   var _props$columnVisibili;
@@ -84,6 +104,8 @@ var PisellRecordBoard = function PisellRecordBoard(props) {
     layoutType = _props$layoutType === void 0 ? 'grid' : _props$layoutType,
     rowKeyProp = props.rowKey,
     dataProp = props.data,
+    dataSourcesProp = props.dataSources,
+    gridDataSourceKeyProp = props.gridDataSourceKey,
     loadingProp = props.loading,
     totalProp = props.total,
     paginationProp = props.pagination,
@@ -91,6 +113,14 @@ var PisellRecordBoard = function PisellRecordBoard(props) {
     searchParamsProp = props.searchParams,
     onSearchProp = props.onSearch,
     onResetProp = props.onReset,
+    floorMapProp = props.floorMap,
+    floorMapLayoutContextProp = props.floorMapLayoutContext,
+    defaultBodyView = props.defaultBodyView,
+    bodyViewStorageKey = props.bodyViewStorageKey,
+    floorMapLayoutRef = props.floorMapLayoutRef,
+    floorMapFooter = props.floorMapFooter,
+    classNameProp = props.className,
+    styleProp = props.style,
     rest = _objectWithoutProperties(props, _excluded);
 
   /** 默认占满父容器高度（父容器需有高度，如 height:100vh 或 height:100%） */
@@ -119,6 +149,23 @@ var PisellRecordBoard = function PisellRecordBoard(props) {
     filterResetKey = _useState8[0],
     setFilterResetKey = _useState8[1];
   var _useState9 = useState(function () {
+      var fallback = defaultBodyView === 'floorMap' ? 'floorMap' : 'grid';
+      return readBodyViewFromStorage(bodyViewStorageKey, fallback);
+    }),
+    _useState10 = _slicedToArray(_useState9, 2),
+    bodyView = _useState10[0],
+    setBodyViewState = _useState10[1];
+  var setBodyView = useCallback(function (v) {
+    setBodyViewState(v);
+    if (typeof window !== 'undefined' && bodyViewStorageKey) {
+      try {
+        localStorage.setItem(bodyViewStorageKey, v);
+      } catch (_unused2) {
+        /* ignore */
+      }
+    }
+  }, [bodyViewStorageKey]);
+  var _useState11 = useState(function () {
       var _props$grid$defaultHi, _props$grid, _props$grid$columns, _props$grid2;
       var fromConfig = (_props$grid$defaultHi = (_props$grid = props.grid) === null || _props$grid === void 0 ? void 0 : _props$grid.defaultHiddenColumnKeys) !== null && _props$grid$defaultHi !== void 0 ? _props$grid$defaultHi : [];
       var fromColumns = ((_props$grid$columns = (_props$grid2 = props.grid) === null || _props$grid2 === void 0 ? void 0 : _props$grid2.columns) !== null && _props$grid$columns !== void 0 ? _props$grid$columns : []).filter(function (col) {
@@ -146,10 +193,10 @@ var PisellRecordBoard = function PisellRecordBoard(props) {
       }
       return defaultVis;
     }),
-    _useState10 = _slicedToArray(_useState9, 2),
-    internalColumnVisibility = _useState10[0],
-    setInternalColumnVisibility = _useState10[1];
-  var _useState11 = useState(function () {
+    _useState12 = _slicedToArray(_useState11, 2),
+    internalColumnVisibility = _useState12[0],
+    setInternalColumnVisibility = _useState12[1];
+  var _useState13 = useState(function () {
       if (typeof columnVisibilityStorageKey === 'string' && columnVisibilityStorageKey && typeof getRecordBoardColumnSettingFromLocal === 'function') {
         var _saved$columnOrder;
         var saved = getRecordBoardColumnSettingFromLocal(columnVisibilityStorageKey);
@@ -157,9 +204,9 @@ var PisellRecordBoard = function PisellRecordBoard(props) {
       }
       return null;
     }),
-    _useState12 = _slicedToArray(_useState11, 2),
-    internalColumnOrder = _useState12[0],
-    setInternalColumnOrder = _useState12[1];
+    _useState14 = _slicedToArray(_useState13, 2),
+    internalColumnOrder = _useState14[0],
+    setInternalColumnOrder = _useState14[1];
   useEffect(function () {
     if (typeof columnVisibilityStorageKey !== 'string' || !columnVisibilityStorageKey) return;
     saveColumnVisibilityToLocal({
@@ -187,10 +234,34 @@ var PisellRecordBoard = function PisellRecordBoard(props) {
       selectedRows: internalSelectedRows,
       onSelectionChange: onSelectionChangeInternal
     }, rowKeyProp);
-    var data = dataProp !== undefined ? dataProp : defaultCtx.data;
-    var loading = loadingProp !== undefined ? loadingProp : defaultCtx.loading;
-    var total = totalProp !== undefined ? totalProp : defaultCtx.total;
+
+    /** 分页状态（推导表格切片前需要） */
     var pagination = paginationProp !== undefined ? paginationProp : defaultCtx.pagination;
+
+    /**
+     * 表格数据：
+     * - 显式传入 `data` 时始终用 `data`（如服务端分页当前页）；
+     * - 否则若存在 `dataSources` + `gridDataSourceKey`，从对应数组做客户端分页切片。
+     */
+    var data;
+    var total;
+    if (dataProp !== undefined) {
+      data = dataProp;
+      total = totalProp !== undefined ? totalProp : defaultCtx.total;
+    } else if (dataSourcesProp != null && gridDataSourceKeyProp != null && gridDataSourceKeyProp !== '') {
+      var _dataSourcesProp$grid;
+      var raw = (_dataSourcesProp$grid = dataSourcesProp[gridDataSourceKeyProp]) !== null && _dataSourcesProp$grid !== void 0 ? _dataSourcesProp$grid : [];
+      total = totalProp !== undefined ? totalProp : raw.length;
+      var pageNumber = pagination.pageNumber,
+        pageSize = pagination.pageSize;
+      var safeSize = Math.max(1, pageSize);
+      var start = Math.max(0, (pageNumber - 1) * safeSize);
+      data = raw.slice(start, start + safeSize);
+    } else {
+      data = defaultCtx.data;
+      total = totalProp !== undefined ? totalProp : defaultCtx.total;
+    }
+    var loading = loadingProp !== undefined ? loadingProp : defaultCtx.loading;
     var onPageChange = onPageChangeProp !== null && onPageChangeProp !== void 0 ? onPageChangeProp : defaultCtx.onPageChange;
     var searchParams = searchParamsProp !== undefined ? searchParamsProp : defaultCtx.searchParams;
     var onSearch = onSearchProp !== null && onSearchProp !== void 0 ? onSearchProp : defaultCtx.onSearch;
@@ -204,6 +275,8 @@ var PisellRecordBoard = function PisellRecordBoard(props) {
     return _objectSpread(_objectSpread({}, defaultCtx), {}, {
       layoutType: layoutType,
       rowKey: rowKey,
+      dataSources: dataSourcesProp,
+      gridDataSourceKey: gridDataSourceKeyProp,
       data: data,
       loading: loading,
       total: total,
@@ -224,20 +297,27 @@ var PisellRecordBoard = function PisellRecordBoard(props) {
       scrollAreaHeight: scrollAreaHeight,
       setScrollAreaHeight: setScrollAreaHeight,
       filterResetKey: filterResetKey,
-      setFilterResetKey: setFilterResetKey
+      setFilterResetKey: setFilterResetKey,
+      bodyView: bodyView,
+      setBodyView: setBodyView,
+      floorMapProps: floorMapProp,
+      floorMapLayoutContext: floorMapLayoutContextProp,
+      defaultBodyView: defaultBodyView,
+      floorMapLayoutRef: floorMapLayoutRef,
+      floorMapFooter: floorMapFooter
     });
-  }, [layoutType, rowKeyProp, dataProp, loadingProp, totalProp, paginationProp, onPageChangeProp, searchParamsProp, onSearchProp, onResetProp, mergedChildComponentProps, internalSelectedKeys, internalSelectedRows, onSelectionChangeInternal, internalColumnVisibility, onColumnVisibilityChangeInternal, internalColumnOrder, onColumnOrderChangeInternal, fillHeight, scrollAreaHeight, filterResetKey]);
+  }, [layoutType, rowKeyProp, dataProp, dataSourcesProp, gridDataSourceKeyProp, loadingProp, totalProp, paginationProp, onPageChangeProp, searchParamsProp, onSearchProp, onResetProp, mergedChildComponentProps, internalSelectedKeys, internalSelectedRows, onSelectionChangeInternal, internalColumnVisibility, onColumnVisibilityChangeInternal, internalColumnOrder, onColumnOrderChangeInternal, fillHeight, scrollAreaHeight, filterResetKey, floorMapProp, floorMapLayoutContextProp, defaultBodyView, floorMapLayoutRef, floorMapFooter, bodyView, setBodyView]);
   var content = /*#__PURE__*/React.createElement(RecordBoardProvider, {
     value: contextValue
   }, children);
   return /*#__PURE__*/React.createElement("div", {
-    className: "pisell-record-board-root",
-    style: {
+    className: classNameProp ? "pisell-record-board-root ".concat(classNameProp) : 'pisell-record-board-root',
+    style: _objectSpread({
       height: '100%',
       display: 'flex',
       flexDirection: 'column',
       minHeight: 0
-    }
+    }, styleProp)
   }, content);
 };
 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;