@pisell/materials 3.3.85 → 3.3.87

package/es/components/pisellRecordBoard/PisellRecordBoard.stories.js

@@ -0,0 +1,2358 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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); }
+import React, { useMemo, useState } from 'react';
+
+/** 打散传参时列表态 value 不含多选，多选通过 grid 传入 */
+
+import PisellRecordBoard from "./index";
+var meta = {
+  title: 'Pro Components/PisellRecordBoard',
+  component: PisellRecordBoard,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: '记录看板容器，提供统一的 data / 分页 / 搜索 / 多选上下文。ToolBar 左侧可放搜索（PisellFind）与内联快速筛选（toolBar.quickFilter）；右侧为 Sort、PisellFilter、ToolBarReset。排序与筛选项可由列配置（columns）派生；quickFilter 为 true 时快速筛选项展示在左侧，Filter 弹层仅保留高级筛选。点击重置会清空筛选与排序。多选通过 grid.selectedKeys / grid.selectedRows / grid.onSelectionChange 传入；列显示隐藏由容器内部维护。grid 支持 antd Table 透传（onRow、onHeaderRow、expandable、rowClassName、summary 等），类型为 RecordBoardGridProps（基于 TableProps 省略 dataSource/loading/pagination/columns/scroll/size/rowSelection）。'
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    rowKey: {
+      description: '行主键，用于多选与列表',
+      control: 'text'
+    },
+    layoutType: {
+      description: '布局类型',
+      control: 'select',
+      options: ['grid', 'card']
+    }
+  }
+};
+export default meta;
+// 模拟订单列表数据
+var orderStatusList = ['pending_pay', 'paid', 'shipped', 'completed', 'cancelled'];
+var payStatusList = ['unpaid', 'paid', 'refunded'];
+var mockData = Array.from({
+  length: 30
+}, function (_, i) {
+  return {
+    id: "order-".concat(i + 1),
+    orderNo: "ORD".concat(String(20240001 + i).padStart(8, '0')),
+    orderStatus: orderStatusList[i % orderStatusList.length],
+    payStatus: payStatusList[i % payStatusList.length],
+    amount: 99.9 + i % 15 * 88.5,
+    createTime: "2024-01-".concat(String(15 + i % 14).padStart(2, '0'), " 10:").concat(String(i % 60).padStart(2, '0')),
+    buyerName: ['张三', '李四', '王五', '赵六', '钱七'][i % 5],
+    buyerPhone: "138".concat(String(10000000 + i).padStart(8, '0')),
+    shipTo: ['北京市朝阳区', '上海市浦东新区', '广州市天河区', '深圳市南山区'][i % 4]
+  };
+});
+
+/** 多页分页示例用：250 条数据，每页 10 条共 25 页 */
+var mockDataMultiplePages = Array.from({
+  length: 250
+}, function (_, i) {
+  return {
+    id: "order-p".concat(i + 1),
+    orderNo: "ORD".concat(String(20300001 + i).padStart(8, '0')),
+    orderStatus: orderStatusList[i % orderStatusList.length],
+    payStatus: payStatusList[i % payStatusList.length],
+    amount: 99.9 + i % 15 * 88.5,
+    createTime: "2024-02-".concat(String(1 + i % 28).padStart(2, '0'), " 10:").concat(String(i % 60).padStart(2, '0')),
+    buyerName: ['张三', '李四', '王五', '赵六', '钱七'][i % 5],
+    buyerPhone: "139".concat(String(10000000 + i).padStart(8, '0')),
+    shipTo: ['北京市朝阳区', '上海市浦东新区', '广州市天河区', '深圳市南山区'][i % 4]
+  };
+});
+var columns = [{
+  title: '订单号',
+  dataIndex: 'orderNo',
+  key: 'orderNo',
+  width: 160
+}, {
+  title: '订单状态',
+  dataIndex: 'orderStatus',
+  key: 'orderStatus',
+  width: 140
+}, {
+  title: '支付状态',
+  dataIndex: 'payStatus',
+  key: 'payStatus',
+  width: 140
+}, {
+  title: '订单金额',
+  dataIndex: 'amount',
+  key: 'amount',
+  width: 110
+}, {
+  title: '下单时间',
+  dataIndex: 'createTime',
+  key: 'createTime',
+  width: 180,
+  type: 'dateTime',
+  fieldProps: {
+    customFormat: 'YYYY-MM-DD HH:mm'
+  },
+  filterable: true,
+  filter: {
+    quickFilter: true
+  }
+}, {
+  title: '买家',
+  dataIndex: 'buyerName',
+  key: 'buyerName',
+  width: 100
+}, {
+  title: '手机号',
+  dataIndex: 'buyerPhone',
+  key: 'buyerPhone',
+  width: 200
+}, {
+  title: '收货地址',
+  dataIndex: 'shipTo',
+  key: 'shipTo',
+  width: 200
+}];
+
+/** 带 type 的列：用 Pisell 组件自动渲染列（只读）+ 筛选项由 columns 派生 */
+var columnsWithType = [{
+  title: '订单号',
+  dataIndex: 'orderNo',
+  key: 'orderNo',
+  width: 160,
+  type: 'singleLineText'
+}, {
+  title: '订单状态',
+  dataIndex: 'orderStatus',
+  key: 'orderStatus',
+  width: 140,
+  type: 'singleSelect',
+  fieldProps: {
+    options: [{
+      label: '全部',
+      value: 'all'
+    }, {
+      label: '待付款',
+      value: 'pending_pay'
+    }, {
+      label: '已付款',
+      value: 'paid'
+    }, {
+      label: '已发货',
+      value: 'shipped'
+    }, {
+      label: '已完成',
+      value: 'completed'
+    }, {
+      label: '已取消',
+      value: 'cancelled'
+    }]
+  },
+  filterable: true,
+  filter: {
+    quickFilter: false
+  }
+}, {
+  title: '支付状态',
+  dataIndex: 'payStatus',
+  key: 'payStatus',
+  width: 140,
+  type: 'singleSelect',
+  fieldProps: {
+    options: [{
+      label: '全部',
+      value: 'all'
+    }, {
+      label: '未支付',
+      value: 'unpaid'
+    }, {
+      label: '已支付',
+      value: 'paid'
+    }, {
+      label: '已退款',
+      value: 'refunded'
+    }]
+  },
+  filterable: true,
+  filter: {
+    quickFilter: false
+  }
+}, {
+  title: '订单金额',
+  dataIndex: 'amount',
+  key: 'amount',
+  width: 110,
+  type: 'currency',
+  fieldProps: {
+    precision: 2,
+    currencySymbol: '¥'
+  },
+  filterable: true,
+  filter: {
+    quickFilter: false
+  }
+}, {
+  title: '下单时间',
+  dataIndex: 'createTime',
+  key: 'createTime',
+  width: 180,
+  type: 'dateTime',
+  fieldProps: {
+    customFormat: 'YYYY-MM-DD HH:mm'
+  },
+  filterable: true,
+  filter: {
+    quickFilter: true
+  }
+}, {
+  title: '买家',
+  dataIndex: 'buyerName',
+  key: 'buyerName',
+  width: 100,
+  type: 'singleLineText',
+  fieldProps: {
+    placeholder: '买家'
+  },
+  filterable: true,
+  filter: {
+    quickFilter: false
+  }
+}, {
+  title: '手机号',
+  dataIndex: 'buyerPhone',
+  key: 'buyerPhone',
+  width: 200,
+  type: 'phone'
+}, {
+  title: '收货地址',
+  dataIndex: 'shipTo',
+  key: 'shipTo',
+  width: 200,
+  type: 'singleLineText'
+}];
+
+/** 自定义快速筛选项：仅下单时间（其余为普通 filter / 高级筛选），用于 CustomQuickFilterAndColumnsRender story */
+var customQuickFilterList = [{
+  type: 'rangePickerNew',
+  key: 'createTime',
+  name: 'createTime',
+  label: '下单时间',
+  props: {
+    placeholder: ['开始日期', '结束日期'],
+    style: {
+      width: 260
+    }
+  },
+  other: {}
+}];
+var orderStatusLabel = {
+  pending_pay: '待付款',
+  paid: '已付款',
+  shipped: '已发货',
+  completed: '已完成',
+  cancelled: '已取消'
+};
+var payStatusLabel = {
+  unpaid: '未支付',
+  paid: '已支付',
+  refunded: '已退款'
+};
+
+/** 部分列用自定义 render、无 type，配合自定义 quickFilter + Filter 的 story */
+var columnsWithCustomRender = [{
+  title: '订单号',
+  dataIndex: 'orderNo',
+  key: 'orderNo',
+  width: 160,
+  render: function render(val) {
+    return /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontWeight: 600
+      }
+    }, val);
+  }
+}, {
+  title: '订单状态',
+  dataIndex: 'orderStatus',
+  key: 'orderStatus',
+  width: 140,
+  render: function render(val) {
+    var _orderStatusLabel$val;
+    return /*#__PURE__*/React.createElement("span", {
+      style: {
+        padding: '2px 8px',
+        borderRadius: 4,
+        background: val === 'pending_pay' ? '#fff7e6' : val === 'paid' ? '#e6f7ff' : val === 'shipped' ? '#f6ffed' : val === 'completed' ? '#f9f0ff' : '#fff1f0',
+        color: val === 'pending_pay' ? '#fa8c16' : val === 'paid' ? '#1890ff' : val === 'shipped' ? '#52c41a' : val === 'completed' ? '#722ed1' : '#ff4d4f'
+      }
+    }, (_orderStatusLabel$val = orderStatusLabel[val]) !== null && _orderStatusLabel$val !== void 0 ? _orderStatusLabel$val : val);
+  }
+}, {
+  title: '支付状态',
+  dataIndex: 'payStatus',
+  key: 'payStatus',
+  width: 140,
+  render: function render(val) {
+    var _payStatusLabel$val;
+    return /*#__PURE__*/React.createElement("span", {
+      style: {
+        padding: '2px 8px',
+        borderRadius: 4,
+        background: val === 'paid' ? '#e6f7ff' : val === 'refunded' ? '#fff1f0' : '#fff7e6',
+        color: val === 'paid' ? '#1890ff' : val === 'refunded' ? '#ff4d4f' : '#faad14'
+      }
+    }, (_payStatusLabel$val = payStatusLabel[val]) !== null && _payStatusLabel$val !== void 0 ? _payStatusLabel$val : val);
+  }
+}, {
+  title: '订单金额',
+  dataIndex: 'amount',
+  key: 'amount',
+  width: 110,
+  type: 'currency',
+  fieldProps: {
+    precision: 2,
+    currencySymbol: '¥'
+  }
+}, {
+  title: '下单时间',
+  dataIndex: 'createTime',
+  key: 'createTime',
+  width: 180,
+  type: 'dateTime',
+  fieldProps: {
+    customFormat: 'YYYY-MM-DD HH:mm'
+  }
+}, {
+  title: '买家',
+  dataIndex: 'buyerName',
+  key: 'buyerName',
+  width: 100
+}, {
+  title: '收货地址',
+  dataIndex: 'shipTo',
+  key: 'shipTo',
+  width: 200
+}];
+
+/** 用于「自定义 filter / sort / render」章节：展示列上的自定义筛选、排序、渲染配置 */
+var columnsWithCustomFilterSortRender = [{
+  title: '订单号',
+  dataIndex: 'orderNo',
+  key: 'orderNo',
+  width: 160,
+  render: function render(val) {
+    return /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontWeight: 700,
+        color: '#1890ff'
+      }
+    }, val);
+  }
+}, {
+  title: '订单状态',
+  dataIndex: 'orderStatus',
+  key: 'orderStatus',
+  width: 140,
+  filterable: true,
+  filter: {
+    type: 'single',
+    quickFilter: false,
+    options: [{
+      label: '全部',
+      value: 'all'
+    }, {
+      label: '待付款',
+      value: 'pending_pay'
+    }, {
+      label: '已付款',
+      value: 'paid'
+    }, {
+      label: '已发货',
+      value: 'shipped'
+    }, {
+      label: '已完成',
+      value: 'completed'
+    }, {
+      label: '已取消',
+      value: 'cancelled'
+    }]
+  },
+  sortable: true,
+  sort: {
+    getSortItems: function getSortItems(fieldKey) {
+      return [{
+        key: "".concat(fieldKey, ":asc"),
+        label: '状态 A-Z'
+      }, {
+        key: "".concat(fieldKey, ":desc"),
+        label: '状态 Z-A'
+      }];
+    }
+  },
+  render: function render(val) {
+    var _orderStatusLabel$val2;
+    return /*#__PURE__*/React.createElement("span", {
+      style: {
+        padding: '2px 8px',
+        borderRadius: 4,
+        background: val === 'pending_pay' ? '#fff7e6' : val === 'paid' ? '#e6f7ff' : val === 'shipped' ? '#f6ffed' : val === 'completed' ? '#f9f0ff' : '#fff1f0',
+        color: val === 'pending_pay' ? '#fa8c16' : val === 'paid' ? '#1890ff' : val === 'shipped' ? '#52c41a' : val === 'completed' ? '#722ed1' : '#ff4d4f'
+      }
+    }, (_orderStatusLabel$val2 = orderStatusLabel[val]) !== null && _orderStatusLabel$val2 !== void 0 ? _orderStatusLabel$val2 : val);
+  }
+}, {
+  title: '支付状态',
+  dataIndex: 'payStatus',
+  key: 'payStatus',
+  width: 140,
+  render: function render(val) {
+    var _payStatusLabel$val2;
+    return /*#__PURE__*/React.createElement("span", {
+      style: {
+        padding: '2px 8px',
+        borderRadius: 4,
+        background: val === 'paid' ? '#e6f7ff' : val === 'refunded' ? '#fff1f0' : '#fff7e6',
+        color: val === 'paid' ? '#1890ff' : val === 'refunded' ? '#ff4d4f' : '#faad14'
+      }
+    }, (_payStatusLabel$val2 = payStatusLabel[val]) !== null && _payStatusLabel$val2 !== void 0 ? _payStatusLabel$val2 : val);
+  }
+}, {
+  title: '订单金额',
+  dataIndex: 'amount',
+  key: 'amount',
+  width: 110,
+  type: 'currency',
+  fieldProps: {
+    precision: 2,
+    currencySymbol: '¥'
+  }
+}, {
+  title: '下单时间',
+  dataIndex: 'createTime',
+  key: 'createTime',
+  width: 180,
+  type: 'dateTime',
+  fieldProps: {
+    customFormat: 'YYYY-MM-DD HH:mm'
+  },
+  filterable: true,
+  filter: {
+    type: 'rangePickerNew',
+    quickFilter: true,
+    props: {
+      placeholder: ['开始日期', '结束日期'],
+      style: {
+        width: 260
+      }
+    }
+  }
+}, {
+  title: '买家',
+  dataIndex: 'buyerName',
+  key: 'buyerName',
+  width: 100,
+  render: function render(val) {
+    return /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontWeight: 500
+      }
+    }, val);
+  }
+}, {
+  title: '收货地址',
+  dataIndex: 'shipTo',
+  key: 'shipTo',
+  width: 200
+}];
+
+/** 解析为时间戳（支持 dayjs 或日期字符串），用于时间范围筛选 */
+function toTimestamp(v) {
+  if (v == null) return null;
+  if (typeof v === 'number' && !Number.isNaN(v)) return v;
+  if (v && typeof v.toDate === 'function') return v.toDate().getTime();
+  var s = String(v).trim();
+  if (!s) return null;
+  var t = Date.parse(s);
+  return Number.isNaN(t) ? null : t;
+}
+
+/** 根据 searchParams.filter.values 过滤列表（story 内筛选用） */
+function filterDataByCriteria(list, filterValues) {
+  if (!filterValues || _typeof(filterValues) !== 'object') return list;
+  var entries = Object.entries(filterValues).filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      _ = _ref2[0],
+      val = _ref2[1];
+    return val !== undefined && val !== null && val !== '' && val !== 'all';
+  });
+  if (entries.length === 0) return list;
+  return list.filter(function (row) {
+    return entries.every(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        key = _ref4[0],
+        val = _ref4[1];
+      if (key === 'createTime' && Array.isArray(val) && val.length >= 2) {
+        var rowTime = toTimestamp(row.createTime);
+        if (rowTime == null) return false;
+        var start = toTimestamp(val[0]);
+        var end = toTimestamp(val[1]);
+        if (start != null && end != null) return rowTime >= start && rowTime <= end;
+        if (start != null) return rowTime >= start;
+        if (end != null) return rowTime <= end;
+        return true;
+      }
+      var cell = row[key];
+      if (typeof val === 'string') {
+        var s = cell != null ? String(cell) : '';
+        return s.toLowerCase().includes(val.toLowerCase());
+      }
+      if (typeof val === 'number' || typeof cell === 'number') {
+        var n = Number(cell);
+        var v = Number(val);
+        if (Number.isNaN(v)) return true;
+        return !Number.isNaN(n) && n === v;
+      }
+      return cell === val;
+    });
+  });
+}
+
+/** 根据 searchParams.sort（如 "name:asc"、"age:desc"）对列表排序，用于 story 内排序演示 */
+function sortDataBySortKey(list, sortKey) {
+  if (!sortKey || typeof sortKey !== 'string') return list;
+  var match = sortKey.match(/^([^:]+):(asc|desc)/);
+  if (!match) return list;
+  var _match = _slicedToArray(match, 3),
+    field = _match[1],
+    order = _match[2];
+  return _toConsumableArray(list).sort(function (a, b) {
+    var va = a[field];
+    var vb = b[field];
+    var cmp = typeof va === 'number' && typeof vb === 'number' ? va - vb : String(va !== null && va !== void 0 ? va : '').localeCompare(String(vb !== null && vb !== void 0 ? vb : ''), 'zh-CN');
+    return order === 'asc' ? cmp : -cmp;
+  });
+}
+
+/**
+ * Grid 布局 - 带 Table、分页、多选；列 type 驱动列/筛选/排序；筛选在 Filter 弹层内；重置清空筛选与排序。
+ */
+export var GridLayoutWithTable = {
+  parameters: {
+    docs: {
+      description: {
+        story: '列配置 type + fieldProps，筛选项与排序由 columns 派生；快速筛选在右侧「筛选」弹层内。'
+      }
+    }
+  },
+  render: function GridLayoutWithTableRender() {
+    var _searchParams$filter;
+    var _useState = useState(1),
+      _useState2 = _slicedToArray(_useState, 2),
+      pageNumber = _useState2[0],
+      setPageNumber = _useState2[1];
+    var _useState3 = useState(10),
+      _useState4 = _slicedToArray(_useState3, 2),
+      pageSize = _useState4[0],
+      setPageSize = _useState4[1];
+    var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      loading = _useState6[0],
+      setLoading = _useState6[1];
+    var _useState7 = useState({}),
+      _useState8 = _slicedToArray(_useState7, 2),
+      searchParams = _useState8[0],
+      setSearchParams = _useState8[1];
+    var _useState9 = useState([]),
+      _useState10 = _slicedToArray(_useState9, 2),
+      selectedKeys = _useState10[0],
+      setSelectedKeys = _useState10[1];
+    var _useState11 = useState([]),
+      _useState12 = _slicedToArray(_useState11, 2),
+      selectedRows = _useState12[0],
+      setSelectedRows = _useState12[1];
+    var filterValues = searchParams === null || searchParams === void 0 || (_searchParams$filter = searchParams.filter) === null || _searchParams$filter === void 0 ? void 0 : _searchParams$filter.values;
+    var filteredList = useMemo(function () {
+      return filterDataByCriteria(mockData, filterValues);
+    }, [searchParams]);
+    var sortedList = useMemo(function () {
+      return sortDataBySortKey(filteredList, searchParams === null || searchParams === void 0 ? void 0 : searchParams.sort);
+    }, [filteredList, searchParams === null || searchParams === void 0 ? void 0 : searchParams.sort]);
+    var total = sortedList.length;
+    var data = useMemo(function () {
+      var start = (pageNumber - 1) * pageSize;
+      return sortedList.slice(start, start + pageSize);
+    }, [pageNumber, pageSize, sortedList]);
+    var value = useMemo(function () {
+      return {
+        data: data,
+        loading: loading,
+        total: total,
+        pagination: {
+          pageNumber: pageNumber,
+          pageSize: pageSize
+        },
+        onPageChange: function onPageChange(num, size) {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams: searchParams,
+        onSearch: function onSearch(params) {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        onReset: function onReset() {
+          setSearchParams({});
+          setPageNumber(1);
+        },
+        layoutType: 'grid',
+        rowKey: 'id'
+      };
+    }, [data, loading, total, pageNumber, pageSize, searchParams]);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 16,
+        background: '#f5f5f5',
+        minHeight: 400
+      }
+    }, /*#__PURE__*/React.createElement(PisellRecordBoard, _extends({
+      rowKey: "id"
+    }, value, {
+      grid: {
+        columns: columnsWithType,
+        scroll: {
+          x: 1300
+        },
+        selectedKeys: selectedKeys,
+        selectedRows: selectedRows,
+        onSelectionChange: function onSelectionChange(keys, rows) {
+          setSelectedKeys(keys);
+          setSelectedRows(rows);
+        }
+      },
+      toolBar: {
+        quickFilter: true,
+        filter: {
+          hiddenQuickFilter: true
+        }
+      }
+    }), /*#__PURE__*/React.createElement(PisellRecordBoard.ShellFrame, null, /*#__PURE__*/React.createElement(PisellRecordBoard.GridLayout, null))));
+  }
+};
+
+/**
+ * Grid 布局 - 多页分页示例（至少 25 页：250 条数据，每页 10 条）
+ */
+export var GridWithMultiplePages = {
+  parameters: {
+    docs: {
+      description: {
+        story: '多页分页示例：共 250 条数据，每页 10 条，共 25 页。可切换页码、修改每页条数，验证分页器与多页跳转等行为。'
+      }
+    }
+  },
+  render: function GridWithMultiplePagesRender() {
+    var _useState13 = useState(1),
+      _useState14 = _slicedToArray(_useState13, 2),
+      pageNumber = _useState14[0],
+      setPageNumber = _useState14[1];
+    var _useState15 = useState(10),
+      _useState16 = _slicedToArray(_useState15, 2),
+      pageSize = _useState16[0],
+      setPageSize = _useState16[1];
+    var _useState17 = useState({}),
+      _useState18 = _slicedToArray(_useState17, 2),
+      searchParams = _useState18[0],
+      setSearchParams = _useState18[1];
+    var _useState19 = useState([]),
+      _useState20 = _slicedToArray(_useState19, 2),
+      selectedKeys = _useState20[0],
+      setSelectedKeys = _useState20[1];
+    var _useState21 = useState([]),
+      _useState22 = _slicedToArray(_useState21, 2),
+      selectedRows = _useState22[0],
+      setSelectedRows = _useState22[1];
+    var total = mockDataMultiplePages.length;
+    var data = useMemo(function () {
+      var start = (pageNumber - 1) * pageSize;
+      return mockDataMultiplePages.slice(start, start + pageSize);
+    }, [pageNumber, pageSize]);
+    var value = useMemo(function () {
+      return {
+        data: data,
+        loading: false,
+        total: total,
+        pagination: {
+          pageNumber: pageNumber,
+          pageSize: pageSize
+        },
+        onPageChange: function onPageChange(num, size) {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams: searchParams,
+        onSearch: function onSearch(params) {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        onReset: function onReset() {
+          setSearchParams({});
+          setPageNumber(1);
+        },
+        layoutType: 'grid',
+        rowKey: 'id'
+      };
+    }, [data, total, pageNumber, pageSize, searchParams]);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 16,
+        background: '#f5f5f5',
+        minHeight: 500
+      }
+    }, /*#__PURE__*/React.createElement(PisellRecordBoard, _extends({
+      rowKey: "id"
+    }, value, {
+      grid: {
+        columns: columnsWithType,
+        scroll: {
+          x: 1300
+        },
+        selectedKeys: selectedKeys,
+        selectedRows: selectedRows,
+        onSelectionChange: function onSelectionChange(keys, rows) {
+          setSelectedKeys(keys);
+          setSelectedRows(rows);
+        }
+      },
+      toolBar: {
+        quickFilter: true,
+        filter: {
+          hiddenQuickFilter: true
+        }
+      }
+    }), /*#__PURE__*/React.createElement(PisellRecordBoard.ShellFrame, null, /*#__PURE__*/React.createElement(PisellRecordBoard.GridLayout, null))));
+  }
+};
+
+/**
+ * Grid 布局 - 同值列折叠：当前页某列全部同值或全部为空时，该列隐藏并在表格上方展示总结区（列名 + 统一值/空数据）。
+ */
+export var GridLayoutWithCollapseUniformColumns = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'grid.collapseUniformColumns: true 时，当前页某列全部同值或全部为空则隐藏该列，在表格上方显示总结区。本示例数据当前页「支付状态」均为已支付、「备注」均为空，故两列折叠并出现在总结区。'
+      }
+    }
+  },
+  render: function GridLayoutWithCollapseUniformColumnsRender() {
+    var _useState23 = useState(1),
+      _useState24 = _slicedToArray(_useState23, 2),
+      pageNumber = _useState24[0],
+      setPageNumber = _useState24[1];
+    var _useState25 = useState(10),
+      _useState26 = _slicedToArray(_useState25, 2),
+      pageSize = _useState26[0],
+      setPageSize = _useState26[1];
+    var _useState27 = useState([]),
+      _useState28 = _slicedToArray(_useState27, 2),
+      selectedKeys = _useState28[0],
+      setSelectedKeys = _useState28[1];
+    var _useState29 = useState([]),
+      _useState30 = _slicedToArray(_useState29, 2),
+      selectedRows = _useState30[0],
+      setSelectedRows = _useState30[1];
+
+    // 当前页数据：支付状态全部为 paid，备注全部为空，用于演示同值列折叠
+    var uniformData = useMemo(function () {
+      return Array.from({
+        length: 8
+      }, function (_, i) {
+        return {
+          id: "u-".concat(i + 1),
+          orderNo: "U".concat(String(10001 + i).padStart(6, '0')),
+          payStatus: 'paid',
+          amount: 100 + i * 10,
+          note: ''
+        };
+      });
+    }, []);
+    var total = uniformData.length;
+    var data = useMemo(function () {
+      var start = (pageNumber - 1) * pageSize;
+      return uniformData.slice(start, start + pageSize);
+    }, [pageNumber, pageSize, uniformData]);
+    var columnsUniform = [{
+      title: '订单号',
+      dataIndex: 'orderNo',
+      key: 'orderNo',
+      width: 140
+    }, {
+      title: '支付状态',
+      dataIndex: 'payStatus',
+      key: 'payStatus',
+      width: 120
+    }, {
+      title: '订单金额',
+      dataIndex: 'amount',
+      key: 'amount',
+      width: 120
+    }, {
+      title: '备注',
+      dataIndex: 'note',
+      key: 'note',
+      width: 160
+    }];
+    var value = useMemo(function () {
+      return {
+        data: data,
+        loading: false,
+        total: total,
+        pagination: {
+          pageNumber: pageNumber,
+          pageSize: pageSize
+        },
+        onPageChange: function onPageChange(num, size) {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams: {},
+        onSearch: function onSearch() {},
+        onReset: function onReset() {},
+        layoutType: 'grid',
+        rowKey: 'id'
+      };
+    }, [data, total, pageNumber, pageSize]);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 16,
+        background: '#f5f5f5',
+        minHeight: 400
+      }
+    }, /*#__PURE__*/React.createElement(PisellRecordBoard, _extends({
+      rowKey: "id"
+    }, value, {
+      grid: {
+        columns: columnsUniform,
+        scroll: {
+          x: 600
+        },
+        collapseUniformColumns: true,
+        selectedKeys: selectedKeys,
+        selectedRows: selectedRows,
+        onSelectionChange: function onSelectionChange(keys, rows) {
+          setSelectedKeys(keys);
+          setSelectedRows(rows);
+        }
+      }
+    }), /*#__PURE__*/React.createElement(PisellRecordBoard.ShellFrame, null, /*#__PURE__*/React.createElement(PisellRecordBoard.GridLayout, null))));
+  }
+};
+
+/**
+ * Grid 布局 - uniformCompare 示例：列值为对象时，用 uniformCompare(value, record) 返回用于比较的 string/number，全同则折叠。
+ */
+export var GridLayoutWithUniformCompare = {
+  parameters: {
+    docs: {
+      description: {
+        story: '列「支付分类」的 dataIndex 取值为对象 { id, name }。通过 uniformCompare(value, record) 返回 String(value.id) 参与比较，当前页全部为同一 id 时该列折叠，总结区优先用列 render 展示（如「已支付」）。'
+      }
+    }
+  },
+  render: function GridLayoutWithUniformCompareRender() {
+    var _useState31 = useState(1),
+      _useState32 = _slicedToArray(_useState31, 2),
+      pageNumber = _useState32[0],
+      setPageNumber = _useState32[1];
+    var _useState33 = useState(10),
+      _useState34 = _slicedToArray(_useState33, 2),
+      pageSize = _useState34[0],
+      setPageSize = _useState34[1];
+    var _useState35 = useState([]),
+      _useState36 = _slicedToArray(_useState35, 2),
+      selectedKeys = _useState36[0],
+      setSelectedKeys = _useState36[1];
+    var _useState37 = useState([]),
+      _useState38 = _slicedToArray(_useState37, 2),
+      selectedRows = _useState38[0],
+      setSelectedRows = _useState38[1];
+
+    // 支付分类为对象，当前页全部为 { id: 1, name: '已支付' }，用 uniformCompare 按 id 比较
+    var uniformCompareData = useMemo(function () {
+      return Array.from({
+        length: 6
+      }, function (_, i) {
+        return {
+          id: "uc-".concat(i + 1),
+          orderNo: "UC".concat(String(20001 + i).padStart(6, '0')),
+          payCategory: {
+            id: 1,
+            name: '已支付'
+          },
+          amount: 50 + i * 5
+        };
+      });
+    }, []);
+    var total = uniformCompareData.length;
+    var data = useMemo(function () {
+      var start = (pageNumber - 1) * pageSize;
+      return uniformCompareData.slice(start, start + pageSize);
+    }, [pageNumber, pageSize, uniformCompareData]);
+    var columnsWithUniformCompare = [{
+      title: '订单号',
+      dataIndex: 'orderNo',
+      key: 'orderNo',
+      width: 140
+    }, {
+      title: '支付分类',
+      dataIndex: 'payCategory',
+      key: 'payCategory',
+      width: 120,
+      uniformCompare: function uniformCompare(value) {
+        return value != null && _typeof(value) === 'object' && 'id' in value && value.id != null ? String(value.id) : undefined;
+      },
+      render: function render(value) {
+        return (value === null || value === void 0 ? void 0 : value.name) != null ? value.name : '-';
+      }
+    }, {
+      title: '订单金额',
+      dataIndex: 'amount',
+      key: 'amount',
+      width: 120
+    }];
+    var value = useMemo(function () {
+      return {
+        data: data,
+        loading: false,
+        total: total,
+        pagination: {
+          pageNumber: pageNumber,
+          pageSize: pageSize
+        },
+        onPageChange: function onPageChange(num, size) {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams: {},
+        onSearch: function onSearch() {},
+        onReset: function onReset() {},
+        layoutType: 'grid',
+        rowKey: 'id'
+      };
+    }, [data, total, pageNumber, pageSize]);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 16,
+        background: '#f5f5f5',
+        minHeight: 400
+      }
+    }, /*#__PURE__*/React.createElement(PisellRecordBoard, _extends({
+      rowKey: "id"
+    }, value, {
+      grid: {
+        columns: columnsWithUniformCompare,
+        scroll: {
+          x: 450
+        },
+        collapseUniformColumns: true,
+        selectedKeys: selectedKeys,
+        selectedRows: selectedRows,
+        onSelectionChange: function onSelectionChange(keys, rows) {
+          setSelectedKeys(keys);
+          setSelectedRows(rows);
+        }
+      }
+    }), /*#__PURE__*/React.createElement(PisellRecordBoard.ShellFrame, null, /*#__PURE__*/React.createElement(PisellRecordBoard.GridLayout, null))));
+  }
+};
+
+/**
+ * Grid 布局 - grid 透传 antd Table props：onRow（行点击）、rowClassName 等
+ */
+export var GridWithOnRow = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'grid 支持 antd Table 透传。此处演示 onRow.onClick（行点击）与 rowClassName（按订单状态高亮行）。类型为 RecordBoardGridProps，基于 TableProps 省略 dataSource/loading/pagination/columns/scroll/size/rowSelection。'
+      }
+    }
+  },
+  render: function GridWithOnRowRender() {
+    var _searchParams$filter2;
+    var _useState39 = useState(1),
+      _useState40 = _slicedToArray(_useState39, 2),
+      pageNumber = _useState40[0],
+      setPageNumber = _useState40[1];
+    var _useState41 = useState(10),
+      _useState42 = _slicedToArray(_useState41, 2),
+      pageSize = _useState42[0],
+      setPageSize = _useState42[1];
+    var _useState43 = useState({}),
+      _useState44 = _slicedToArray(_useState43, 2),
+      searchParams = _useState44[0],
+      setSearchParams = _useState44[1];
+    var _useState45 = useState([]),
+      _useState46 = _slicedToArray(_useState45, 2),
+      selectedKeys = _useState46[0],
+      setSelectedKeys = _useState46[1];
+    var _useState47 = useState([]),
+      _useState48 = _slicedToArray(_useState47, 2),
+      selectedRows = _useState48[0],
+      setSelectedRows = _useState48[1];
+    var filterValues = searchParams === null || searchParams === void 0 || (_searchParams$filter2 = searchParams.filter) === null || _searchParams$filter2 === void 0 ? void 0 : _searchParams$filter2.values;
+    var filteredList = useMemo(function () {
+      return filterDataByCriteria(mockData, filterValues);
+    }, [searchParams]);
+    var sortedList = useMemo(function () {
+      return sortDataBySortKey(filteredList, searchParams === null || searchParams === void 0 ? void 0 : searchParams.sort);
+    }, [filteredList, searchParams === null || searchParams === void 0 ? void 0 : searchParams.sort]);
+    var total = sortedList.length;
+    var data = useMemo(function () {
+      var start = (pageNumber - 1) * pageSize;
+      return sortedList.slice(start, start + pageSize);
+    }, [pageNumber, pageSize, sortedList]);
+    var value = useMemo(function () {
+      return {
+        data: data,
+        loading: false,
+        total: total,
+        pagination: {
+          pageNumber: pageNumber,
+          pageSize: pageSize
+        },
+        onPageChange: function onPageChange(num, size) {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams: searchParams,
+        onSearch: function onSearch(params) {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        onReset: function onReset() {
+          setSearchParams({});
+          setPageNumber(1);
+        },
+        layoutType: 'grid',
+        rowKey: 'id'
+      };
+    }, [data, total, pageNumber, pageSize, searchParams]);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 16,
+        background: '#f5f5f5',
+        minHeight: 400
+      }
+    }, /*#__PURE__*/React.createElement(PisellRecordBoard, _extends({
+      rowKey: "id"
+    }, value, {
+      grid: {
+        columns: columnsWithType,
+        scroll: {
+          x: 1300
+        },
+        selectedKeys: selectedKeys,
+        selectedRows: selectedRows,
+        onSelectionChange: function onSelectionChange(keys, rows) {
+          setSelectedKeys(keys);
+          setSelectedRows(rows);
+        },
+        onRow: function onRow(record) {
+          return {
+            onClick: function onClick() {
+              console.log('行点击', record.orderNo, record);
+              alert("\u70B9\u51FB\u8BA2\u5355\uFF1A".concat(record.orderNo));
+            }
+          };
+        },
+        rowClassName: function rowClassName(record) {
+          return record.orderStatus === 'cancelled' ? 'pisell-record-board-row-cancelled' : '';
+        }
+      },
+      toolBar: {
+        quickFilter: true,
+        filter: {
+          hiddenQuickFilter: true
+        }
+      }
+    }), /*#__PURE__*/React.createElement(PisellRecordBoard.ShellFrame, null, /*#__PURE__*/React.createElement(PisellRecordBoard.GridLayout, null))));
+  }
+};
+
+/**
+ * Grid 布局 - 与 GridLayoutWithTable 类似，列 type 驱动列/筛选/排序，筛选在弹层内。
+ */
+export var GridLayoutWithColumnType = {
+  parameters: {
+    docs: {
+      description: {
+        story: '与 GridLayoutWithTable 相同能力，可点排序、筛选、重置验证行为。'
+      }
+    }
+  },
+  render: function GridLayoutWithColumnTypeRender() {
+    var _searchParams$filter3;
+    var _useState49 = useState(1),
+      _useState50 = _slicedToArray(_useState49, 2),
+      pageNumber = _useState50[0],
+      setPageNumber = _useState50[1];
+    var _useState51 = useState(10),
+      _useState52 = _slicedToArray(_useState51, 2),
+      pageSize = _useState52[0],
+      setPageSize = _useState52[1];
+    var _useState53 = useState(false),
+      _useState54 = _slicedToArray(_useState53, 2),
+      loading = _useState54[0],
+      setLoading = _useState54[1];
+    var _useState55 = useState({}),
+      _useState56 = _slicedToArray(_useState55, 2),
+      searchParams = _useState56[0],
+      setSearchParams = _useState56[1];
+    var _useState57 = useState([]),
+      _useState58 = _slicedToArray(_useState57, 2),
+      selectedKeys = _useState58[0],
+      setSelectedKeys = _useState58[1];
+    var _useState59 = useState([]),
+      _useState60 = _slicedToArray(_useState59, 2),
+      selectedRows = _useState60[0],
+      setSelectedRows = _useState60[1];
+    var filterValues = searchParams === null || searchParams === void 0 || (_searchParams$filter3 = searchParams.filter) === null || _searchParams$filter3 === void 0 ? void 0 : _searchParams$filter3.values;
+    var filteredList = useMemo(function () {
+      return filterDataByCriteria(mockData, filterValues);
+    }, [searchParams]);
+    var sortedList = useMemo(function () {
+      return sortDataBySortKey(filteredList, searchParams === null || searchParams === void 0 ? void 0 : searchParams.sort);
+    }, [filteredList, searchParams === null || searchParams === void 0 ? void 0 : searchParams.sort]);
+    var total = sortedList.length;
+    var data = useMemo(function () {
+      var start = (pageNumber - 1) * pageSize;
+      return sortedList.slice(start, start + pageSize);
+    }, [pageNumber, pageSize, sortedList]);
+    var value = useMemo(function () {
+      return {
+        data: data,
+        loading: loading,
+        total: total,
+        pagination: {
+          pageNumber: pageNumber,
+          pageSize: pageSize
+        },
+        onPageChange: function onPageChange(num, size) {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams: searchParams,
+        onSearch: function onSearch(params) {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        onReset: function onReset() {
+          setSearchParams({});
+          setPageNumber(1);
+        },
+        layoutType: 'grid',
+        rowKey: 'id'
+      };
+    }, [data, loading, total, pageNumber, pageSize, searchParams]);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 16,
+        background: '#f5f5f5',
+        minHeight: 400
+      }
+    }, /*#__PURE__*/React.createElement(PisellRecordBoard, _extends({
+      rowKey: "id"
+    }, value, {
+      grid: {
+        columns: columnsWithType,
+        scroll: {
+          x: 1300
+        },
+        selectedKeys: selectedKeys,
+        selectedRows: selectedRows,
+        onSelectionChange: function onSelectionChange(keys, rows) {
+          setSelectedKeys(keys);
+          setSelectedRows(rows);
+        }
+      },
+      toolBar: {
+        quickFilter: true,
+        filter: {
+          hiddenQuickFilter: true
+        }
+      }
+    }), /*#__PURE__*/React.createElement(PisellRecordBoard.ShellFrame, null, /*#__PURE__*/React.createElement(PisellRecordBoard.GridLayout, null))));
+  }
+};
+
+/**
+ * Grid 布局 - ToolBar 内直接配置 sort 与 filter（不依赖列派生）
+ * toolBar.sort 用 getSortItems 手动配置选项，toolBar.filter 传 { defaultFilterValue }。
+ */
+export var GridLayoutToolBarSortAndFilter = {
+  parameters: {
+    docs: {
+      description: {
+        story: '在 toolBar 里直接配置排序与筛选：toolBar.sort 传 { list: [{ name, label, getSortItems }] } 手动配置排序子项，toolBar.filter 传 { defaultFilterValue: { otherFilter, values } }。排序写入 searchParams.sort，筛选写入 searchParams.filter，不依赖 columns 派生。'
+      }
+    }
+  },
+  render: function GridLayoutToolBarSortAndFilterRender() {
+    var _searchParams$filter4;
+    var _useState61 = useState(1),
+      _useState62 = _slicedToArray(_useState61, 2),
+      pageNumber = _useState62[0],
+      setPageNumber = _useState62[1];
+    var _useState63 = useState(10),
+      _useState64 = _slicedToArray(_useState63, 2),
+      pageSize = _useState64[0],
+      setPageSize = _useState64[1];
+    var _useState65 = useState({}),
+      _useState66 = _slicedToArray(_useState65, 2),
+      searchParams = _useState66[0],
+      setSearchParams = _useState66[1];
+    var _useState67 = useState([]),
+      _useState68 = _slicedToArray(_useState67, 2),
+      selectedKeys = _useState68[0],
+      setSelectedKeys = _useState68[1];
+    var _useState69 = useState([]),
+      _useState70 = _slicedToArray(_useState69, 2),
+      selectedRows = _useState70[0],
+      setSelectedRows = _useState70[1];
+    var filterValues = searchParams === null || searchParams === void 0 || (_searchParams$filter4 = searchParams.filter) === null || _searchParams$filter4 === void 0 ? void 0 : _searchParams$filter4.values;
+    var filteredList = useMemo(function () {
+      return filterDataByCriteria(mockData, filterValues);
+    }, [searchParams]);
+    var sortedList = useMemo(function () {
+      return sortDataBySortKey(filteredList, searchParams === null || searchParams === void 0 ? void 0 : searchParams.sort);
+    }, [filteredList, searchParams === null || searchParams === void 0 ? void 0 : searchParams.sort]);
+    var total = sortedList.length;
+    var data = useMemo(function () {
+      var start = (pageNumber - 1) * pageSize;
+      return sortedList.slice(start, start + pageSize);
+    }, [pageNumber, pageSize, sortedList]);
+    var value = useMemo(function () {
+      return {
+        data: data,
+        loading: false,
+        total: total,
+        pagination: {
+          pageNumber: pageNumber,
+          pageSize: pageSize
+        },
+        onPageChange: function onPageChange(num, size) {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams: searchParams,
+        onSearch: function onSearch(params) {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        onReset: function onReset() {
+          setSearchParams({});
+          setPageNumber(1);
+        },
+        layoutType: 'grid',
+        rowKey: 'id'
+      };
+    }, [data, total, pageNumber, pageSize, searchParams]);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 16,
+        background: '#f5f5f5',
+        minHeight: 400
+      }
+    }, /*#__PURE__*/React.createElement(PisellRecordBoard, _extends({
+      rowKey: "id"
+    }, value, {
+      grid: {
+        columns: columns,
+        scroll: {
+          x: 1300
+        },
+        selectedKeys: selectedKeys,
+        selectedRows: selectedRows,
+        onSelectionChange: function onSelectionChange(keys, rows) {
+          setSelectedKeys(keys);
+          setSelectedRows(rows);
+        }
+      },
+      toolBar: {
+        sort: {
+          list: [{
+            name: 'amount',
+            label: '按金额',
+            isCustom: true,
+            getSortItems: function getSortItems(fieldKey) {
+              return [{
+                key: "".concat(fieldKey, ":asc"),
+                label: '从低到高'
+              }, {
+                key: "".concat(fieldKey, ":desc"),
+                label: '从高到低'
+              }];
+            }
+          }, {
+            name: 'createTime',
+            label: '按下单时间',
+            isCustom: true,
+            getSortItems: function getSortItems(fieldKey) {
+              return [{
+                key: "".concat(fieldKey, ":asc"),
+                label: '从旧到新'
+              }, {
+                key: "".concat(fieldKey, ":desc"),
+                label: '从新到旧'
+              }];
+            }
+          }, {
+            name: 'orderNo',
+            label: '按订单号',
+            isCustom: true,
+            getSortItems: function getSortItems(fieldKey) {
+              return [{
+                key: "".concat(fieldKey, ":asc"),
+                label: 'A → Z'
+              }, {
+                key: "".concat(fieldKey, ":desc"),
+                label: 'Z → A'
+              }];
+            }
+          }]
+        },
+        filter: {
+          hiddenQuickFilter: true,
+          defaultFilterValue: {
+            quickFilter: [],
+            otherFilter: [{
+              type: 'single',
+              key: 'orderStatus',
+              name: 'orderStatus',
+              label: '订单状态',
+              props: {
+                options: [{
+                  label: '全部',
+                  value: 'all'
+                }, {
+                  label: '待付款',
+                  value: 'pending_pay'
+                }, {
+                  label: '已付款',
+                  value: 'paid'
+                }, {
+                  label: '已发货',
+                  value: 'shipped'
+                }, {
+                  label: '已完成',
+                  value: 'completed'
+                }, {
+                  label: '已取消',
+                  value: 'cancelled'
+                }]
+              },
+              other: {}
+            }, {
+              type: 'single',
+              key: 'payStatus',
+              name: 'payStatus',
+              label: '支付状态',
+              props: {
+                options: [{
+                  label: '全部',
+                  value: 'all'
+                }, {
+                  label: '未支付',
+                  value: 'unpaid'
+                }, {
+                  label: '已支付',
+                  value: 'paid'
+                }, {
+                  label: '已退款',
+                  value: 'refunded'
+                }]
+              },
+              other: {}
+            }, {
+              type: 'input',
+              key: 'buyerName',
+              name: 'buyerName',
+              label: '买家',
+              props: {
+                placeholder: '买家姓名'
+              },
+              other: {}
+            }, {
+              type: 'rangePickerNew',
+              key: 'createTime',
+              name: 'createTime',
+              label: '下单时间',
+              props: {
+                placeholder: ['开始日期', '结束日期'],
+                style: {
+                  width: 260
+                }
+              },
+              other: {}
+            }],
+            values: {}
+          }
+        }
+      }
+    }), /*#__PURE__*/React.createElement(PisellRecordBoard.ShellFrame, null, /*#__PURE__*/React.createElement(PisellRecordBoard.GridLayout, null))));
+  }
+};
+
+/**
+ * Grid 布局 - 快速筛选在 ToolBar 左侧内联展示（toolBar.quickFilter: true），右侧筛选弹层仅保留高级筛选。
+ */
+export var GridLayoutWithQuickFilterOnLeft = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'toolBar.quickFilter: true 时，快速筛选项（状态、城市等）内联在 ToolBar 左侧，与搜索并列；右侧「筛选」弹层仅保留高级筛选。'
+      }
+    }
+  },
+  render: function GridLayoutWithQuickFilterOnLeftRender() {
+    var _searchParams$filter5;
+    var _useState71 = useState(1),
+      _useState72 = _slicedToArray(_useState71, 2),
+      pageNumber = _useState72[0],
+      setPageNumber = _useState72[1];
+    var _useState73 = useState(10),
+      _useState74 = _slicedToArray(_useState73, 2),
+      pageSize = _useState74[0],
+      setPageSize = _useState74[1];
+    var _useState75 = useState(false),
+      _useState76 = _slicedToArray(_useState75, 2),
+      loading = _useState76[0],
+      setLoading = _useState76[1];
+    var _useState77 = useState({}),
+      _useState78 = _slicedToArray(_useState77, 2),
+      searchParams = _useState78[0],
+      setSearchParams = _useState78[1];
+    var _useState79 = useState([]),
+      _useState80 = _slicedToArray(_useState79, 2),
+      selectedKeys = _useState80[0],
+      setSelectedKeys = _useState80[1];
+    var _useState81 = useState([]),
+      _useState82 = _slicedToArray(_useState81, 2),
+      selectedRows = _useState82[0],
+      setSelectedRows = _useState82[1];
+    var filterValues = searchParams === null || searchParams === void 0 || (_searchParams$filter5 = searchParams.filter) === null || _searchParams$filter5 === void 0 ? void 0 : _searchParams$filter5.values;
+    var filteredList = useMemo(function () {
+      return filterDataByCriteria(mockData, filterValues);
+    }, [searchParams]);
+    var sortedList = useMemo(function () {
+      return sortDataBySortKey(filteredList, searchParams === null || searchParams === void 0 ? void 0 : searchParams.sort);
+    }, [filteredList, searchParams === null || searchParams === void 0 ? void 0 : searchParams.sort]);
+    var total = sortedList.length;
+    var data = useMemo(function () {
+      var start = (pageNumber - 1) * pageSize;
+      return sortedList.slice(start, start + pageSize);
+    }, [pageNumber, pageSize, sortedList]);
+    var value = useMemo(function () {
+      return {
+        data: data,
+        loading: loading,
+        total: total,
+        pagination: {
+          pageNumber: pageNumber,
+          pageSize: pageSize
+        },
+        onPageChange: function onPageChange(num, size) {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams: searchParams,
+        onSearch: function onSearch(params) {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        onReset: function onReset() {
+          setSearchParams({});
+          setPageNumber(1);
+        },
+        layoutType: 'grid',
+        rowKey: 'id'
+      };
+    }, [data, loading, total, pageNumber, pageSize, searchParams]);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 16,
+        background: '#f5f5f5',
+        minHeight: 400
+      }
+    }, /*#__PURE__*/React.createElement(PisellRecordBoard, _extends({
+      rowKey: "id"
+    }, value, {
+      grid: {
+        columns: columnsWithType,
+        scroll: {
+          x: 1300
+        },
+        selectedKeys: selectedKeys,
+        selectedRows: selectedRows,
+        onSelectionChange: function onSelectionChange(keys, rows) {
+          setSelectedKeys(keys);
+          setSelectedRows(rows);
+        }
+      },
+      toolBar: {
+        search: true,
+        quickFilter: true,
+        filter: {
+          hiddenQuickFilter: true
+        }
+      }
+    }), /*#__PURE__*/React.createElement(PisellRecordBoard.ShellFrame, null, /*#__PURE__*/React.createElement(PisellRecordBoard.GridLayout, null))));
+  }
+};
+
+/**
+ * 自定义左侧快速筛选 + Filter 弹层（高级筛选）+ 列自定义 render
+ */
+export var CustomQuickFilterAndColumnsRender = {
+  parameters: {
+    docs: {
+      description: {
+        story: '订单列表：左侧快速筛选用自定义 filterList（订单状态、支付状态）；部分列用自定义 render（订单号加粗、状态标签）；右侧筛选弹层仅高级筛选（订单号/买家关键词）。'
+      }
+    }
+  },
+  render: function CustomQuickFilterAndColumnsRenderFn() {
+    var _searchParams$filter6;
+    var _useState83 = useState(1),
+      _useState84 = _slicedToArray(_useState83, 2),
+      pageNumber = _useState84[0],
+      setPageNumber = _useState84[1];
+    var _useState85 = useState(10),
+      _useState86 = _slicedToArray(_useState85, 2),
+      pageSize = _useState86[0],
+      setPageSize = _useState86[1];
+    var _useState87 = useState({}),
+      _useState88 = _slicedToArray(_useState87, 2),
+      searchParams = _useState88[0],
+      setSearchParams = _useState88[1];
+    var _useState89 = useState([]),
+      _useState90 = _slicedToArray(_useState89, 2),
+      selectedKeys = _useState90[0],
+      setSelectedKeys = _useState90[1];
+    var _useState91 = useState([]),
+      _useState92 = _slicedToArray(_useState91, 2),
+      selectedRows = _useState92[0],
+      setSelectedRows = _useState92[1];
+    var filterValues = searchParams === null || searchParams === void 0 || (_searchParams$filter6 = searchParams.filter) === null || _searchParams$filter6 === void 0 ? void 0 : _searchParams$filter6.values;
+    var filteredList = useMemo(function () {
+      var byCriteria = filterDataByCriteria(mockData, filterValues);
+      var kw = filterValues === null || filterValues === void 0 ? void 0 : filterValues.keyword;
+      if (kw != null && String(kw).trim() !== '') {
+        var lower = String(kw).toLowerCase();
+        return byCriteria.filter(function (row) {
+          var _row$orderNo, _row$buyerName;
+          return String((_row$orderNo = row.orderNo) !== null && _row$orderNo !== void 0 ? _row$orderNo : '').toLowerCase().includes(lower) || String((_row$buyerName = row.buyerName) !== null && _row$buyerName !== void 0 ? _row$buyerName : '').toLowerCase().includes(lower);
+        });
+      }
+      return byCriteria;
+    }, [searchParams]);
+    var sortedList = useMemo(function () {
+      return sortDataBySortKey(filteredList, searchParams === null || searchParams === void 0 ? void 0 : searchParams.sort);
+    }, [filteredList, searchParams === null || searchParams === void 0 ? void 0 : searchParams.sort]);
+    var total = sortedList.length;
+    var data = useMemo(function () {
+      var start = (pageNumber - 1) * pageSize;
+      return sortedList.slice(start, start + pageSize);
+    }, [pageNumber, pageSize, sortedList]);
+    var value = useMemo(function () {
+      return {
+        data: data,
+        loading: false,
+        total: total,
+        pagination: {
+          pageNumber: pageNumber,
+          pageSize: pageSize
+        },
+        onPageChange: function onPageChange(num, size) {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams: searchParams,
+        onSearch: function onSearch(params) {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        onReset: function onReset() {
+          setSearchParams({});
+          setPageNumber(1);
+        },
+        layoutType: 'grid',
+        rowKey: 'id'
+      };
+    }, [data, total, pageNumber, pageSize, searchParams]);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 16,
+        background: '#f5f5f5',
+        minHeight: 400
+      }
+    }, /*#__PURE__*/React.createElement(PisellRecordBoard, _extends({
+      rowKey: "id"
+    }, value, {
+      grid: {
+        columns: columnsWithCustomRender,
+        scroll: {
+          x: 1300
+        },
+        selectedKeys: selectedKeys,
+        selectedRows: selectedRows,
+        onSelectionChange: function onSelectionChange(keys, rows) {
+          setSelectedKeys(keys);
+          setSelectedRows(rows);
+        }
+      },
+      toolBar: {
+        search: true,
+        quickFilter: {
+          filterList: customQuickFilterList
+        },
+        filter: {
+          hiddenQuickFilter: true,
+          defaultFilterValue: {
+            quickFilter: [],
+            otherFilter: [{
+              type: 'input',
+              key: 'keyword',
+              name: 'keyword',
+              label: '关键词',
+              props: {
+                placeholder: '订单号/买家'
+              },
+              other: {}
+            }, {
+              type: 'rangePickerNew',
+              key: 'orderDate',
+              name: 'orderDate',
+              label: '下单时间',
+              props: {
+                placeholder: ['开始日期', '结束日期'],
+                style: {
+                  width: 260
+                }
+              },
+              other: {}
+            }],
+            values: {}
+          }
+        }
+      }
+    }), /*#__PURE__*/React.createElement(PisellRecordBoard.ShellFrame, null, /*#__PURE__*/React.createElement(PisellRecordBoard.GridLayout, null))));
+  }
+};
+
+/**
+ * 自定义 filter、自定义 sort、自定义 render
+ * 展示列上显式配置：筛选（订单状态 single 在高级筛选、下单时间 rangePickerNew + 自定义 placeholder/width 在快筛）、
+ * 排序（订单状态无 type，用 sort.getSortItems 自定义「状态 A-Z / Z-A」）、
+ * 以及列的自定义 render（订单号加粗蓝色、状态标签、买家加粗）。
+ */
+export var CustomFilterSortRender = {
+  parameters: {
+    docs: {
+      description: {
+        story: '列上自定义 filter（下单时间 rangePickerNew 并配置 placeholder、宽度；订单状态 single 在高级筛选）、自定义 sort（订单状态列无 type，用 sort.getSortItems 自定义排序项「状态 A-Z / Z-A」）、自定义 render（订单号蓝色加粗、状态标签、买家加粗）。左侧快筛仅下单时间，其余在右侧高级筛选。'
+      }
+    }
+  },
+  render: function CustomFilterSortRenderFn() {
+    var _searchParams$filter7;
+    var _useState93 = useState(1),
+      _useState94 = _slicedToArray(_useState93, 2),
+      pageNumber = _useState94[0],
+      setPageNumber = _useState94[1];
+    var _useState95 = useState(10),
+      _useState96 = _slicedToArray(_useState95, 2),
+      pageSize = _useState96[0],
+      setPageSize = _useState96[1];
+    var _useState97 = useState({}),
+      _useState98 = _slicedToArray(_useState97, 2),
+      searchParams = _useState98[0],
+      setSearchParams = _useState98[1];
+    var _useState99 = useState([]),
+      _useState100 = _slicedToArray(_useState99, 2),
+      selectedKeys = _useState100[0],
+      setSelectedKeys = _useState100[1];
+    var _useState101 = useState([]),
+      _useState102 = _slicedToArray(_useState101, 2),
+      selectedRows = _useState102[0],
+      setSelectedRows = _useState102[1];
+    var filterValues = searchParams === null || searchParams === void 0 || (_searchParams$filter7 = searchParams.filter) === null || _searchParams$filter7 === void 0 ? void 0 : _searchParams$filter7.values;
+    var filteredList = useMemo(function () {
+      return filterDataByCriteria(mockData, filterValues);
+    }, [searchParams]);
+    var sortedList = useMemo(function () {
+      return sortDataBySortKey(filteredList, searchParams === null || searchParams === void 0 ? void 0 : searchParams.sort);
+    }, [filteredList, searchParams === null || searchParams === void 0 ? void 0 : searchParams.sort]);
+    var total = sortedList.length;
+    var data = useMemo(function () {
+      var start = (pageNumber - 1) * pageSize;
+      return sortedList.slice(start, start + pageSize);
+    }, [pageNumber, pageSize, sortedList]);
+    var value = useMemo(function () {
+      return {
+        data: data,
+        loading: false,
+        total: total,
+        pagination: {
+          pageNumber: pageNumber,
+          pageSize: pageSize
+        },
+        onPageChange: function onPageChange(num, size) {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams: searchParams,
+        onSearch: function onSearch(params) {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        onReset: function onReset() {
+          setSearchParams({});
+          setPageNumber(1);
+        },
+        layoutType: 'grid',
+        rowKey: 'id'
+      };
+    }, [data, total, pageNumber, pageSize, searchParams]);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 16,
+        background: '#f5f5f5',
+        minHeight: 400
+      }
+    }, /*#__PURE__*/React.createElement(PisellRecordBoard, _extends({
+      rowKey: "id"
+    }, value, {
+      grid: {
+        columns: columnsWithCustomFilterSortRender,
+        scroll: {
+          x: 1300
+        },
+        selectedKeys: selectedKeys,
+        selectedRows: selectedRows,
+        onSelectionChange: function onSelectionChange(keys, rows) {
+          setSelectedKeys(keys);
+          setSelectedRows(rows);
+        }
+      },
+      toolBar: {
+        search: true,
+        quickFilter: true,
+        filter: {
+          hiddenQuickFilter: true
+        }
+      }
+    }), /*#__PURE__*/React.createElement(PisellRecordBoard.ShellFrame, null, /*#__PURE__*/React.createElement(PisellRecordBoard.GridLayout, null))));
+  }
+};
+
+/**
+ * Grid 布局 - ToolBar 内使用 PisellFind（toolBar.search: true）
+ */
+export var GridLayoutWithPisellFindInToolBar = {
+  render: function GridLayoutWithPisellFindInToolBarRender() {
+    var _useState103 = useState(1),
+      _useState104 = _slicedToArray(_useState103, 2),
+      pageNumber = _useState104[0],
+      setPageNumber = _useState104[1];
+    var _useState105 = useState(10),
+      _useState106 = _slicedToArray(_useState105, 2),
+      pageSize = _useState106[0],
+      setPageSize = _useState106[1];
+    var _useState107 = useState(false),
+      _useState108 = _slicedToArray(_useState107, 2),
+      loading = _useState108[0],
+      setLoading = _useState108[1];
+    var _useState109 = useState({}),
+      _useState110 = _slicedToArray(_useState109, 2),
+      searchParams = _useState110[0],
+      setSearchParams = _useState110[1];
+    var _useState111 = useState([]),
+      _useState112 = _slicedToArray(_useState111, 2),
+      selectedKeys = _useState112[0],
+      setSelectedKeys = _useState112[1];
+    var _useState113 = useState([]),
+      _useState114 = _slicedToArray(_useState113, 2),
+      selectedRows = _useState114[0],
+      setSelectedRows = _useState114[1];
+    var total = mockData.length;
+    var data = useMemo(function () {
+      var start = (pageNumber - 1) * pageSize;
+      return mockData.slice(start, start + pageSize);
+    }, [pageNumber, pageSize]);
+    var value = useMemo(function () {
+      return {
+        data: data,
+        loading: loading,
+        total: total,
+        pagination: {
+          pageNumber: pageNumber,
+          pageSize: pageSize
+        },
+        onPageChange: function onPageChange(num, size) {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams: searchParams,
+        onSearch: function onSearch(params) {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        onReset: function onReset() {
+          setSearchParams({});
+          setPageNumber(1);
+        },
+        layoutType: 'grid',
+        rowKey: 'id'
+      };
+    }, [data, loading, total, pageNumber, pageSize, searchParams]);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 16,
+        background: '#fff',
+        minHeight: 500
+      }
+    }, /*#__PURE__*/React.createElement(PisellRecordBoard, _extends({
+      rowKey: "id"
+    }, value, {
+      toolBar: {
+        search: true,
+        quickFilter: true,
+        filter: {
+          hiddenQuickFilter: true
+        }
+      },
+      grid: {
+        columns: columns,
+        size: 'small',
+        scroll: {
+          x: 1300
+        },
+        selectedKeys: selectedKeys,
+        selectedRows: selectedRows,
+        onSelectionChange: function onSelectionChange(keys, rows) {
+          setSelectedKeys(keys);
+          setSelectedRows(rows);
+        }
+      }
+    }), /*#__PURE__*/React.createElement(PisellRecordBoard.ShellFrame, null, /*#__PURE__*/React.createElement(PisellRecordBoard.GridLayout, null))));
+  }
+};
+
+/**
+ * Grid 布局 - ToolBar 内 PisellFind 透传（toolBar.search: { triggerType: 'input' }）
+ */
+export var GridLayoutToolBarSearchInput = {
+  render: function GridLayoutToolBarSearchInputRender() {
+    var _useState115 = useState(1),
+      _useState116 = _slicedToArray(_useState115, 2),
+      pageNumber = _useState116[0],
+      setPageNumber = _useState116[1];
+    var _useState117 = useState(10),
+      _useState118 = _slicedToArray(_useState117, 2),
+      pageSize = _useState118[0],
+      setPageSize = _useState118[1];
+    var _useState119 = useState({}),
+      _useState120 = _slicedToArray(_useState119, 2),
+      searchParams = _useState120[0],
+      setSearchParams = _useState120[1];
+    var _useState121 = useState([]),
+      _useState122 = _slicedToArray(_useState121, 2),
+      selectedKeys = _useState122[0],
+      setSelectedKeys = _useState122[1];
+    var _useState123 = useState([]),
+      _useState124 = _slicedToArray(_useState123, 2),
+      selectedRows = _useState124[0],
+      setSelectedRows = _useState124[1];
+    var total = mockData.length;
+    var data = useMemo(function () {
+      var start = (pageNumber - 1) * pageSize;
+      return mockData.slice(start, start + pageSize);
+    }, [pageNumber, pageSize]);
+    var value = useMemo(function () {
+      return {
+        data: data,
+        loading: false,
+        total: total,
+        pagination: {
+          pageNumber: pageNumber,
+          pageSize: pageSize
+        },
+        onPageChange: function onPageChange(num, size) {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams: searchParams,
+        onSearch: function onSearch(params) {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        layoutType: 'grid',
+        rowKey: 'id'
+      };
+    }, [data, total, pageNumber, pageSize, searchParams]);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 16
+      }
+    }, /*#__PURE__*/React.createElement(PisellRecordBoard, _extends({
+      rowKey: "id"
+    }, value, {
+      toolBar: {
+        search: {
+          triggerType: 'input',
+          placeholder: '输入关键词'
+        },
+        quickFilter: true,
+        filter: {
+          hiddenQuickFilter: true
+        }
+      },
+      grid: {
+        columns: columns,
+        scroll: {
+          x: 1300
+        },
+        selectedKeys: selectedKeys,
+        selectedRows: selectedRows,
+        onSelectionChange: function onSelectionChange(keys, rows) {
+          setSelectedKeys(keys);
+          setSelectedRows(rows);
+        }
+      }
+    }), /*#__PURE__*/React.createElement(PisellRecordBoard.ShellFrame, null, /*#__PURE__*/React.createElement(PisellRecordBoard.GridLayout, null))));
+  }
+};
+
+/**
+ * Grid 布局 - 完整示例（表格 + 多选 + BatchActionBar 批量操作）
+ */
+export var GridLayoutFull = {
+  parameters: {
+    docs: {
+      description: {
+        story: '勾选行后显示批量操作栏，可配置 onDelete 等；含搜索、筛选、排序、重置。'
+      }
+    }
+  },
+  render: function GridLayoutFullRender() {
+    var _useState125 = useState(1),
+      _useState126 = _slicedToArray(_useState125, 2),
+      pageNumber = _useState126[0],
+      setPageNumber = _useState126[1];
+    var _useState127 = useState(10),
+      _useState128 = _slicedToArray(_useState127, 2),
+      pageSize = _useState128[0],
+      setPageSize = _useState128[1];
+    var _useState129 = useState(false),
+      _useState130 = _slicedToArray(_useState129, 2),
+      loading = _useState130[0],
+      setLoading = _useState130[1];
+    var _useState131 = useState({}),
+      _useState132 = _slicedToArray(_useState131, 2),
+      searchParams = _useState132[0],
+      setSearchParams = _useState132[1];
+    var _useState133 = useState([]),
+      _useState134 = _slicedToArray(_useState133, 2),
+      selectedKeys = _useState134[0],
+      setSelectedKeys = _useState134[1];
+    var _useState135 = useState([]),
+      _useState136 = _slicedToArray(_useState135, 2),
+      selectedRows = _useState136[0],
+      setSelectedRows = _useState136[1];
+    var total = mockData.length;
+    var data = useMemo(function () {
+      var start = (pageNumber - 1) * pageSize;
+      return mockData.slice(start, start + pageSize);
+    }, [pageNumber, pageSize]);
+    var value = useMemo(function () {
+      return {
+        data: data,
+        loading: loading,
+        total: total,
+        pagination: {
+          pageNumber: pageNumber,
+          pageSize: pageSize
+        },
+        onPageChange: function onPageChange(num, size) {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams: searchParams,
+        onSearch: function onSearch(params) {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        onReset: function onReset() {
+          setSearchParams({});
+          setPageNumber(1);
+        },
+        layoutType: 'grid',
+        rowKey: 'id'
+      };
+    }, [data, loading, total, pageNumber, pageSize, searchParams]);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 16,
+        background: '#fff',
+        minHeight: 500
+      }
+    }, /*#__PURE__*/React.createElement(PisellRecordBoard, _extends({
+      rowKey: "id"
+    }, value, {
+      toolBar: {
+        quickFilter: true,
+        filter: {
+          hiddenQuickFilter: true
+        }
+      },
+      grid: {
+        columns: columns,
+        size: 'small',
+        scroll: {
+          x: 1300
+        },
+        selectedKeys: selectedKeys,
+        selectedRows: selectedRows,
+        onSelectionChange: function onSelectionChange(keys, rows) {
+          setSelectedKeys(keys);
+          setSelectedRows(rows);
+        }
+      },
+      batchActionBar: {
+        onDelete: function onDelete(keys, rows) {
+          console.log('批量删除', keys, rows);
+          alert("\u5DF2\u9009\u62E9 ".concat(keys.length, " \u9879\uFF0C\u53EF\u5728\u6B64\u6267\u884C\u5220\u9664"));
+        }
+      }
+    }), /*#__PURE__*/React.createElement(PisellRecordBoard.ShellFrame, null, /*#__PURE__*/React.createElement(PisellRecordBoard.GridLayout, null))));
+  }
+};
+
+/**
+ * 占位 / 设计态（不传 value，无数据源）
+ */
+export var Placeholder = {
+  parameters: {
+    docs: {
+      description: {
+        story: '不传 value 时的占位态，用于设计态或未接数据源时。'
+      }
+    }
+  },
+  args: {
+    rowKey: 'id'
+  },
+  render: function render(args) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 16,
+        background: '#fafafa'
+      }
+    }, /*#__PURE__*/React.createElement(PisellRecordBoard, args, /*#__PURE__*/React.createElement(PisellRecordBoard.ShellFrame, null, /*#__PURE__*/React.createElement(PisellRecordBoard.GridLayout, null))));
+  }
+};
+
+/**
+ * Card 布局占位
+ */
+export var CardLayoutPlaceholder = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Card 布局占位，不传 value。'
+      }
+    }
+  },
+  args: {
+    rowKey: 'id',
+    layoutType: 'card'
+  },
+  render: function render(args) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 16,
+        background: '#fafafa'
+      }
+    }, /*#__PURE__*/React.createElement(PisellRecordBoard, args, /*#__PURE__*/React.createElement(PisellRecordBoard.ShellFrame, null, /*#__PURE__*/React.createElement(PisellRecordBoard.CardLayout, null))));
+  }
+};
+
+/**
+ * 自定义组合：单独挂 ToolBar / BatchActionBar / Grid / Pagination
+ */
+export var CustomComposition = {
+  parameters: {
+    docs: {
+      description: {
+        story: '未用 ShellFrame，手动组合 ToolBar、BatchActionBar、Grid、Pagination。'
+      }
+    }
+  },
+  render: function CustomCompositionRender() {
+    var _useState137 = useState(1),
+      _useState138 = _slicedToArray(_useState137, 2),
+      pageNumber = _useState138[0],
+      setPageNumber = _useState138[1];
+    var _useState139 = useState(10),
+      _useState140 = _slicedToArray(_useState139, 2),
+      pageSize = _useState140[0],
+      setPageSize = _useState140[1];
+    var _useState141 = useState({}),
+      _useState142 = _slicedToArray(_useState141, 2),
+      searchParams = _useState142[0],
+      setSearchParams = _useState142[1];
+    var _useState143 = useState([]),
+      _useState144 = _slicedToArray(_useState143, 2),
+      selectedKeys = _useState144[0],
+      setSelectedKeys = _useState144[1];
+    var _useState145 = useState([]),
+      _useState146 = _slicedToArray(_useState145, 2),
+      selectedRows = _useState146[0],
+      setSelectedRows = _useState146[1];
+    var total = mockData.length;
+    var data = useMemo(function () {
+      var start = (pageNumber - 1) * pageSize;
+      return mockData.slice(start, start + pageSize);
+    }, [pageNumber, pageSize]);
+    var value = useMemo(function () {
+      return {
+        data: data,
+        loading: false,
+        total: total,
+        pagination: {
+          pageNumber: pageNumber,
+          pageSize: pageSize
+        },
+        onPageChange: function onPageChange(num, size) {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams: searchParams,
+        onSearch: function onSearch(params) {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        layoutType: 'grid',
+        rowKey: 'id'
+      };
+    }, [data, total, pageNumber, pageSize, searchParams]);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 16
+      }
+    }, /*#__PURE__*/React.createElement(PisellRecordBoard, _extends({
+      rowKey: "id"
+    }, value, {
+      grid: {
+        columns: columns,
+        selectedKeys: selectedKeys,
+        selectedRows: selectedRows,
+        onSelectionChange: function onSelectionChange(keys, rows) {
+          setSelectedKeys(keys);
+          setSelectedRows(rows);
+        }
+      },
+      toolBar: {
+        quickFilter: true,
+        filter: {
+          hiddenQuickFilter: true
+        }
+      }
+    }), /*#__PURE__*/React.createElement(PisellRecordBoard.ToolBar, null), /*#__PURE__*/React.createElement(PisellRecordBoard.BatchActionBar, null), /*#__PURE__*/React.createElement(PisellRecordBoard.Grid, {
+      style: {
+        marginTop: 8
+      }
+    }), /*#__PURE__*/React.createElement(PisellRecordBoard.Pagination, null)));
+  }
+};
+
+/**
+ * 使用 PisellFind 搜索槽：Search（PisellFind）+ ToolBar + Grid + Pagination
+ */
+export var WithPisellFindSearch = {
+  render: function WithPisellFindSearchRender() {
+    var _useState147 = useState(1),
+      _useState148 = _slicedToArray(_useState147, 2),
+      pageNumber = _useState148[0],
+      setPageNumber = _useState148[1];
+    var _useState149 = useState(10),
+      _useState150 = _slicedToArray(_useState149, 2),
+      pageSize = _useState150[0],
+      setPageSize = _useState150[1];
+    var _useState151 = useState({}),
+      _useState152 = _slicedToArray(_useState151, 2),
+      searchParams = _useState152[0],
+      setSearchParams = _useState152[1];
+    var _useState153 = useState([]),
+      _useState154 = _slicedToArray(_useState153, 2),
+      selectedKeys = _useState154[0],
+      setSelectedKeys = _useState154[1];
+    var _useState155 = useState([]),
+      _useState156 = _slicedToArray(_useState155, 2),
+      selectedRows = _useState156[0],
+      setSelectedRows = _useState156[1];
+    var total = mockData.length;
+    var data = useMemo(function () {
+      var start = (pageNumber - 1) * pageSize;
+      return mockData.slice(start, start + pageSize);
+    }, [pageNumber, pageSize]);
+    var value = useMemo(function () {
+      return {
+        data: data,
+        loading: false,
+        total: total,
+        pagination: {
+          pageNumber: pageNumber,
+          pageSize: pageSize
+        },
+        onPageChange: function onPageChange(num, size) {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams: searchParams,
+        onSearch: function onSearch(params) {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        layoutType: 'grid',
+        rowKey: 'id'
+      };
+    }, [data, total, pageNumber, pageSize, searchParams]);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 16
+      }
+    }, /*#__PURE__*/React.createElement(PisellRecordBoard, _extends({
+      rowKey: "id"
+    }, value, {
+      search: {
+        triggerType: 'input',
+        placeholder: '输入关键词搜索'
+      },
+      toolBar: {
+        quickFilter: true,
+        filter: {
+          hiddenQuickFilter: true
+        }
+      },
+      grid: {
+        columns: columns,
+        scroll: {
+          x: 1300
+        },
+        selectedKeys: selectedKeys,
+        selectedRows: selectedRows,
+        onSelectionChange: function onSelectionChange(keys, rows) {
+          setSelectedKeys(keys);
+          setSelectedRows(rows);
+        }
+      }
+    }), /*#__PURE__*/React.createElement(PisellRecordBoard.Search, null), /*#__PURE__*/React.createElement(PisellRecordBoard.ToolBar, null), /*#__PURE__*/React.createElement(PisellRecordBoard.BatchActionBar, null), /*#__PURE__*/React.createElement(PisellRecordBoard.Grid, {
+      columns: columns,
+      style: {
+        marginTop: 8
+      }
+    }), /*#__PURE__*/React.createElement(PisellRecordBoard.Pagination, null)));
+  }
+};
+
+/**
+ * 仅 Search + Grid + 分页（无 ToolBar）
+ */
+export var SearchAndGridOnly = {
+  render: function SearchAndGridOnlyRender() {
+    var _useState157 = useState(1),
+      _useState158 = _slicedToArray(_useState157, 2),
+      pageNumber = _useState158[0],
+      setPageNumber = _useState158[1];
+    var _useState159 = useState(10),
+      _useState160 = _slicedToArray(_useState159, 2),
+      pageSize = _useState160[0],
+      setPageSize = _useState160[1];
+    var _useState161 = useState({}),
+      _useState162 = _slicedToArray(_useState161, 2),
+      searchParams = _useState162[0],
+      setSearchParams = _useState162[1];
+    var _useState163 = useState([]),
+      _useState164 = _slicedToArray(_useState163, 2),
+      selectedKeys = _useState164[0],
+      setSelectedKeys = _useState164[1];
+    var _useState165 = useState([]),
+      _useState166 = _slicedToArray(_useState165, 2),
+      selectedRows = _useState166[0],
+      setSelectedRows = _useState166[1];
+    var total = mockData.length;
+    var data = useMemo(function () {
+      var start = (pageNumber - 1) * pageSize;
+      return mockData.slice(start, start + pageSize);
+    }, [pageNumber, pageSize]);
+    var value = useMemo(function () {
+      return {
+        data: data,
+        loading: false,
+        total: total,
+        pagination: {
+          pageNumber: pageNumber,
+          pageSize: pageSize
+        },
+        onPageChange: function onPageChange(num, size) {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams: searchParams,
+        onSearch: function onSearch(params) {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        layoutType: 'grid',
+        rowKey: 'id'
+      };
+    }, [data, total, pageNumber, pageSize, searchParams]);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 16
+      }
+    }, /*#__PURE__*/React.createElement(PisellRecordBoard, _extends({
+      rowKey: "id"
+    }, value, {
+      grid: {
+        columns: columns,
+        scroll: {
+          x: 1300
+        },
+        selectedKeys: selectedKeys,
+        selectedRows: selectedRows,
+        onSelectionChange: function onSelectionChange(keys, rows) {
+          setSelectedKeys(keys);
+          setSelectedRows(rows);
+        }
+      }
+    }), /*#__PURE__*/React.createElement(PisellRecordBoard.Search, null), /*#__PURE__*/React.createElement(PisellRecordBoard.Grid, {
+      style: {
+        marginTop: 8
+      }
+    }), /*#__PURE__*/React.createElement(PisellRecordBoard.Pagination, null)));
+  }
+};