@pisell/materials 6.11.7 → 6.11.9

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

@@ -0,0 +1,1514 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellRecordBoard/PisellRecordBoard.stories.tsx
+var PisellRecordBoard_stories_exports = {};
+__export(PisellRecordBoard_stories_exports, {
+  CardLayoutPlaceholder: () => CardLayoutPlaceholder,
+  CustomComposition: () => CustomComposition,
+  CustomFilterSortRender: () => CustomFilterSortRender,
+  CustomQuickFilterAndColumnsRender: () => CustomQuickFilterAndColumnsRender,
+  GridLayoutFull: () => GridLayoutFull,
+  GridLayoutToolBarSearchInput: () => GridLayoutToolBarSearchInput,
+  GridLayoutToolBarSortAndFilter: () => GridLayoutToolBarSortAndFilter,
+  GridLayoutWithColumnType: () => GridLayoutWithColumnType,
+  GridLayoutWithPisellFindInToolBar: () => GridLayoutWithPisellFindInToolBar,
+  GridLayoutWithQuickFilterOnLeft: () => GridLayoutWithQuickFilterOnLeft,
+  GridLayoutWithTable: () => GridLayoutWithTable,
+  GridWithMultiplePages: () => GridWithMultiplePages,
+  GridWithOnRow: () => GridWithOnRow,
+  Placeholder: () => Placeholder,
+  SearchAndGridOnly: () => SearchAndGridOnly,
+  WithPisellFindSearch: () => WithPisellFindSearch,
+  default: () => PisellRecordBoard_stories_default
+});
+module.exports = __toCommonJS(PisellRecordBoard_stories_exports);
+var import_react = __toESM(require("react"));
+var import_index = __toESM(require("./index"));
+var meta = {
+  title: "Pro Components/PisellRecordBoard",
+  component: import_index.default,
+  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"]
+    }
+  }
+};
+var PisellRecordBoard_stories_default = meta;
+var orderStatusList = ["pending_pay", "paid", "shipped", "completed", "cancelled"];
+var payStatusList = ["unpaid", "paid", "refunded"];
+var mockData = Array.from({ length: 30 }, (_, i) => ({
+  id: `order-${i + 1}`,
+  orderNo: `ORD${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-${String(15 + i % 14).padStart(2, "0")} 10:${String(i % 60).padStart(2, "0")}`,
+  buyerName: ["张三", "李四", "王五", "赵六", "钱七"][i % 5],
+  buyerPhone: `138${String(1e7 + i).padStart(8, "0")}`,
+  shipTo: ["北京市朝阳区", "上海市浦东新区", "广州市天河区", "深圳市南山区"][i % 4]
+}));
+var mockDataMultiplePages = Array.from({ length: 250 }, (_, i) => ({
+  id: `order-p${i + 1}`,
+  orderNo: `ORD${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-${String(1 + i % 28).padStart(2, "0")} 10:${String(i % 60).padStart(2, "0")}`,
+  buyerName: ["张三", "李四", "王五", "赵六", "钱七"][i % 5],
+  buyerPhone: `139${String(1e7 + 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 }
+];
+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" }
+];
+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: "已退款"
+};
+var columnsWithCustomRender = [
+  {
+    title: "订单号",
+    dataIndex: "orderNo",
+    key: "orderNo",
+    width: 160,
+    render: (val) => /* @__PURE__ */ import_react.default.createElement("span", { style: { fontWeight: 600 } }, val)
+  },
+  {
+    title: "订单状态",
+    dataIndex: "orderStatus",
+    key: "orderStatus",
+    width: 140,
+    render: (val) => /* @__PURE__ */ import_react.default.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] ?? val
+    )
+  },
+  {
+    title: "支付状态",
+    dataIndex: "payStatus",
+    key: "payStatus",
+    width: 140,
+    render: (val) => /* @__PURE__ */ import_react.default.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] ?? 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 }
+];
+var columnsWithCustomFilterSortRender = [
+  {
+    title: "订单号",
+    dataIndex: "orderNo",
+    key: "orderNo",
+    width: 160,
+    render: (val) => /* @__PURE__ */ import_react.default.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: (fieldKey) => [
+        { key: `${fieldKey}:asc`, label: "状态 A-Z" },
+        { key: `${fieldKey}:desc`, label: "状态 Z-A" }
+      ]
+    },
+    render: (val) => /* @__PURE__ */ import_react.default.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] ?? val
+    )
+  },
+  {
+    title: "支付状态",
+    dataIndex: "payStatus",
+    key: "payStatus",
+    width: 140,
+    render: (val) => /* @__PURE__ */ import_react.default.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] ?? 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: (val) => /* @__PURE__ */ import_react.default.createElement("span", { style: { fontWeight: 500 } }, val)
+  },
+  { title: "收货地址", dataIndex: "shipTo", key: "shipTo", width: 200 }
+];
+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();
+  const s = String(v).trim();
+  if (!s) return null;
+  const t = Date.parse(s);
+  return Number.isNaN(t) ? null : t;
+}
+function filterDataByCriteria(list, filterValues) {
+  if (!filterValues || typeof filterValues !== "object") return list;
+  const entries = Object.entries(filterValues).filter(
+    ([_, val]) => val !== void 0 && val !== null && val !== "" && val !== "all"
+  );
+  if (entries.length === 0) return list;
+  return list.filter((row) => {
+    return entries.every(([key, val]) => {
+      if (key === "createTime" && Array.isArray(val) && val.length >= 2) {
+        const rowTime = toTimestamp(row.createTime);
+        if (rowTime == null) return false;
+        const start = toTimestamp(val[0]);
+        const 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;
+      }
+      const cell = row[key];
+      if (typeof val === "string") {
+        const s = cell != null ? String(cell) : "";
+        return s.toLowerCase().includes(val.toLowerCase());
+      }
+      if (typeof val === "number" || typeof cell === "number") {
+        const n = Number(cell);
+        const v = Number(val);
+        if (Number.isNaN(v)) return true;
+        return !Number.isNaN(n) && n === v;
+      }
+      return cell === val;
+    });
+  });
+}
+function sortDataBySortKey(list, sortKey) {
+  if (!sortKey || typeof sortKey !== "string") return list;
+  const match = sortKey.match(/^([^:]+):(asc|desc)/);
+  if (!match) return list;
+  const [, field, order] = match;
+  return [...list].sort((a, b) => {
+    const va = a[field];
+    const vb = b[field];
+    const cmp = typeof va === "number" && typeof vb === "number" ? va - vb : String(va ?? "").localeCompare(String(vb ?? ""), "zh-CN");
+    return order === "asc" ? cmp : -cmp;
+  });
+}
+var GridLayoutWithTable = {
+  parameters: {
+    docs: { description: { story: "列配置 type + fieldProps，筛选项与排序由 columns 派生；快速筛选在右侧「筛选」弹层内。" } }
+  },
+  render: function GridLayoutWithTableRender() {
+    var _a;
+    const [pageNumber, setPageNumber] = (0, import_react.useState)(1);
+    const [pageSize, setPageSize] = (0, import_react.useState)(10);
+    const [loading, setLoading] = (0, import_react.useState)(false);
+    const [searchParams, setSearchParams] = (0, import_react.useState)({});
+    const [selectedKeys, setSelectedKeys] = (0, import_react.useState)([]);
+    const [selectedRows, setSelectedRows] = (0, import_react.useState)([]);
+    const filterValues = (_a = searchParams == null ? void 0 : searchParams.filter) == null ? void 0 : _a.values;
+    const filteredList = (0, import_react.useMemo)(() => filterDataByCriteria(mockData, filterValues), [searchParams]);
+    const sortedList = (0, import_react.useMemo)(
+      () => sortDataBySortKey(filteredList, searchParams == null ? void 0 : searchParams.sort),
+      [filteredList, searchParams == null ? void 0 : searchParams.sort]
+    );
+    const total = sortedList.length;
+    const data = (0, import_react.useMemo)(() => {
+      const start = (pageNumber - 1) * pageSize;
+      return sortedList.slice(start, start + pageSize);
+    }, [pageNumber, pageSize, sortedList]);
+    const value = (0, import_react.useMemo)(
+      () => ({
+        data,
+        loading,
+        total,
+        pagination: { pageNumber, pageSize },
+        onPageChange: (num, size) => {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams,
+        onSearch: (params) => {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        onReset: () => {
+          setSearchParams({});
+          setPageNumber(1);
+        },
+        layoutType: "grid",
+        rowKey: "id"
+      }),
+      [data, loading, total, pageNumber, pageSize, searchParams]
+    );
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16, background: "#f5f5f5", minHeight: 400 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        rowKey: "id",
+        ...value,
+        grid: {
+          columns: columnsWithType,
+          scroll: { x: 1300 },
+          selectedKeys,
+          selectedRows,
+          onSelectionChange: (keys, rows) => {
+            setSelectedKeys(keys);
+            setSelectedRows(rows);
+          }
+        },
+        toolBar: { quickFilter: true, filter: { hiddenQuickFilter: true } }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.ShellFrame, null, /* @__PURE__ */ import_react.default.createElement(import_index.default.GridLayout, null))
+    ));
+  }
+};
+var GridWithMultiplePages = {
+  parameters: {
+    docs: {
+      description: {
+        story: "多页分页示例：共 250 条数据，每页 10 条，共 25 页。可切换页码、修改每页条数，验证分页器与多页跳转等行为。"
+      }
+    }
+  },
+  render: function GridWithMultiplePagesRender() {
+    const [pageNumber, setPageNumber] = (0, import_react.useState)(1);
+    const [pageSize, setPageSize] = (0, import_react.useState)(10);
+    const [searchParams, setSearchParams] = (0, import_react.useState)({});
+    const [selectedKeys, setSelectedKeys] = (0, import_react.useState)([]);
+    const [selectedRows, setSelectedRows] = (0, import_react.useState)([]);
+    const total = mockDataMultiplePages.length;
+    const data = (0, import_react.useMemo)(() => {
+      const start = (pageNumber - 1) * pageSize;
+      return mockDataMultiplePages.slice(start, start + pageSize);
+    }, [pageNumber, pageSize]);
+    const value = (0, import_react.useMemo)(
+      () => ({
+        data,
+        loading: false,
+        total,
+        pagination: { pageNumber, pageSize },
+        onPageChange: (num, size) => {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams,
+        onSearch: (params) => {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        onReset: () => {
+          setSearchParams({});
+          setPageNumber(1);
+        },
+        layoutType: "grid",
+        rowKey: "id"
+      }),
+      [data, total, pageNumber, pageSize, searchParams]
+    );
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16, background: "#f5f5f5", minHeight: 500 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        rowKey: "id",
+        ...value,
+        grid: {
+          columns: columnsWithType,
+          scroll: { x: 1300 },
+          selectedKeys,
+          selectedRows,
+          onSelectionChange: (keys, rows) => {
+            setSelectedKeys(keys);
+            setSelectedRows(rows);
+          }
+        },
+        toolBar: { quickFilter: true, filter: { hiddenQuickFilter: true } }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.ShellFrame, null, /* @__PURE__ */ import_react.default.createElement(import_index.default.GridLayout, null))
+    ));
+  }
+};
+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 _a;
+    const [pageNumber, setPageNumber] = (0, import_react.useState)(1);
+    const [pageSize, setPageSize] = (0, import_react.useState)(10);
+    const [searchParams, setSearchParams] = (0, import_react.useState)({});
+    const [selectedKeys, setSelectedKeys] = (0, import_react.useState)([]);
+    const [selectedRows, setSelectedRows] = (0, import_react.useState)([]);
+    const filterValues = (_a = searchParams == null ? void 0 : searchParams.filter) == null ? void 0 : _a.values;
+    const filteredList = (0, import_react.useMemo)(() => filterDataByCriteria(mockData, filterValues), [searchParams]);
+    const sortedList = (0, import_react.useMemo)(
+      () => sortDataBySortKey(filteredList, searchParams == null ? void 0 : searchParams.sort),
+      [filteredList, searchParams == null ? void 0 : searchParams.sort]
+    );
+    const total = sortedList.length;
+    const data = (0, import_react.useMemo)(() => {
+      const start = (pageNumber - 1) * pageSize;
+      return sortedList.slice(start, start + pageSize);
+    }, [pageNumber, pageSize, sortedList]);
+    const value = (0, import_react.useMemo)(
+      () => ({
+        data,
+        loading: false,
+        total,
+        pagination: { pageNumber, pageSize },
+        onPageChange: (num, size) => {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams,
+        onSearch: (params) => {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        onReset: () => {
+          setSearchParams({});
+          setPageNumber(1);
+        },
+        layoutType: "grid",
+        rowKey: "id"
+      }),
+      [data, total, pageNumber, pageSize, searchParams]
+    );
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16, background: "#f5f5f5", minHeight: 400 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        rowKey: "id",
+        ...value,
+        grid: {
+          columns: columnsWithType,
+          scroll: { x: 1300 },
+          selectedKeys,
+          selectedRows,
+          onSelectionChange: (keys, rows) => {
+            setSelectedKeys(keys);
+            setSelectedRows(rows);
+          },
+          onRow: (record) => ({
+            onClick: () => {
+              console.log("行点击", record.orderNo, record);
+              alert(`点击订单：${record.orderNo}`);
+            }
+          }),
+          rowClassName: (record) => record.orderStatus === "cancelled" ? "pisell-record-board-row-cancelled" : ""
+        },
+        toolBar: { quickFilter: true, filter: { hiddenQuickFilter: true } }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.ShellFrame, null, /* @__PURE__ */ import_react.default.createElement(import_index.default.GridLayout, null))
+    ));
+  }
+};
+var GridLayoutWithColumnType = {
+  parameters: {
+    docs: { description: { story: "与 GridLayoutWithTable 相同能力，可点排序、筛选、重置验证行为。" } }
+  },
+  render: function GridLayoutWithColumnTypeRender() {
+    var _a;
+    const [pageNumber, setPageNumber] = (0, import_react.useState)(1);
+    const [pageSize, setPageSize] = (0, import_react.useState)(10);
+    const [loading, setLoading] = (0, import_react.useState)(false);
+    const [searchParams, setSearchParams] = (0, import_react.useState)({});
+    const [selectedKeys, setSelectedKeys] = (0, import_react.useState)([]);
+    const [selectedRows, setSelectedRows] = (0, import_react.useState)([]);
+    const filterValues = (_a = searchParams == null ? void 0 : searchParams.filter) == null ? void 0 : _a.values;
+    const filteredList = (0, import_react.useMemo)(() => filterDataByCriteria(mockData, filterValues), [searchParams]);
+    const sortedList = (0, import_react.useMemo)(
+      () => sortDataBySortKey(filteredList, searchParams == null ? void 0 : searchParams.sort),
+      [filteredList, searchParams == null ? void 0 : searchParams.sort]
+    );
+    const total = sortedList.length;
+    const data = (0, import_react.useMemo)(() => {
+      const start = (pageNumber - 1) * pageSize;
+      return sortedList.slice(start, start + pageSize);
+    }, [pageNumber, pageSize, sortedList]);
+    const value = (0, import_react.useMemo)(
+      () => ({
+        data,
+        loading,
+        total,
+        pagination: { pageNumber, pageSize },
+        onPageChange: (num, size) => {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams,
+        onSearch: (params) => {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        onReset: () => {
+          setSearchParams({});
+          setPageNumber(1);
+        },
+        layoutType: "grid",
+        rowKey: "id"
+      }),
+      [data, loading, total, pageNumber, pageSize, searchParams]
+    );
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16, background: "#f5f5f5", minHeight: 400 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        rowKey: "id",
+        ...value,
+        grid: {
+          columns: columnsWithType,
+          scroll: { x: 1300 },
+          selectedKeys,
+          selectedRows,
+          onSelectionChange: (keys, rows) => {
+            setSelectedKeys(keys);
+            setSelectedRows(rows);
+          }
+        },
+        toolBar: { quickFilter: true, filter: { hiddenQuickFilter: true } }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.ShellFrame, null, /* @__PURE__ */ import_react.default.createElement(import_index.default.GridLayout, null))
+    ));
+  }
+};
+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 _a;
+    const [pageNumber, setPageNumber] = (0, import_react.useState)(1);
+    const [pageSize, setPageSize] = (0, import_react.useState)(10);
+    const [searchParams, setSearchParams] = (0, import_react.useState)({});
+    const [selectedKeys, setSelectedKeys] = (0, import_react.useState)([]);
+    const [selectedRows, setSelectedRows] = (0, import_react.useState)([]);
+    const filterValues = (_a = searchParams == null ? void 0 : searchParams.filter) == null ? void 0 : _a.values;
+    const filteredList = (0, import_react.useMemo)(
+      () => filterDataByCriteria(mockData, filterValues),
+      [searchParams]
+    );
+    const sortedList = (0, import_react.useMemo)(
+      () => sortDataBySortKey(filteredList, searchParams == null ? void 0 : searchParams.sort),
+      [filteredList, searchParams == null ? void 0 : searchParams.sort]
+    );
+    const total = sortedList.length;
+    const data = (0, import_react.useMemo)(() => {
+      const start = (pageNumber - 1) * pageSize;
+      return sortedList.slice(start, start + pageSize);
+    }, [pageNumber, pageSize, sortedList]);
+    const value = (0, import_react.useMemo)(
+      () => ({
+        data,
+        loading: false,
+        total,
+        pagination: { pageNumber, pageSize },
+        onPageChange: (num, size) => {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams,
+        onSearch: (params) => {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        onReset: () => {
+          setSearchParams({});
+          setPageNumber(1);
+        },
+        layoutType: "grid",
+        rowKey: "id"
+      }),
+      [data, total, pageNumber, pageSize, searchParams]
+    );
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16, background: "#f5f5f5", minHeight: 400 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        rowKey: "id",
+        ...value,
+        grid: {
+          columns,
+          scroll: { x: 1300 },
+          selectedKeys,
+          selectedRows,
+          onSelectionChange: (keys, rows) => {
+            setSelectedKeys(keys);
+            setSelectedRows(rows);
+          }
+        },
+        toolBar: {
+          sort: {
+            list: [
+              {
+                name: "amount",
+                label: "按金额",
+                isCustom: true,
+                getSortItems: (fieldKey) => [
+                  { key: `${fieldKey}:asc`, label: "从低到高" },
+                  { key: `${fieldKey}:desc`, label: "从高到低" }
+                ]
+              },
+              {
+                name: "createTime",
+                label: "按下单时间",
+                isCustom: true,
+                getSortItems: (fieldKey) => [
+                  { key: `${fieldKey}:asc`, label: "从旧到新" },
+                  { key: `${fieldKey}:desc`, label: "从新到旧" }
+                ]
+              },
+              {
+                name: "orderNo",
+                label: "按订单号",
+                isCustom: true,
+                getSortItems: (fieldKey) => [
+                  { key: `${fieldKey}:asc`, label: "A → Z" },
+                  { key: `${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__ */ import_react.default.createElement(import_index.default.ShellFrame, null, /* @__PURE__ */ import_react.default.createElement(import_index.default.GridLayout, null))
+    ));
+  }
+};
+var GridLayoutWithQuickFilterOnLeft = {
+  parameters: {
+    docs: {
+      description: {
+        story: "toolBar.quickFilter: true 时，快速筛选项（状态、城市等）内联在 ToolBar 左侧，与搜索并列；右侧「筛选」弹层仅保留高级筛选。"
+      }
+    }
+  },
+  render: function GridLayoutWithQuickFilterOnLeftRender() {
+    var _a;
+    const [pageNumber, setPageNumber] = (0, import_react.useState)(1);
+    const [pageSize, setPageSize] = (0, import_react.useState)(10);
+    const [loading, setLoading] = (0, import_react.useState)(false);
+    const [searchParams, setSearchParams] = (0, import_react.useState)({});
+    const [selectedKeys, setSelectedKeys] = (0, import_react.useState)([]);
+    const [selectedRows, setSelectedRows] = (0, import_react.useState)([]);
+    const filterValues = (_a = searchParams == null ? void 0 : searchParams.filter) == null ? void 0 : _a.values;
+    const filteredList = (0, import_react.useMemo)(() => filterDataByCriteria(mockData, filterValues), [searchParams]);
+    const sortedList = (0, import_react.useMemo)(
+      () => sortDataBySortKey(filteredList, searchParams == null ? void 0 : searchParams.sort),
+      [filteredList, searchParams == null ? void 0 : searchParams.sort]
+    );
+    const total = sortedList.length;
+    const data = (0, import_react.useMemo)(() => {
+      const start = (pageNumber - 1) * pageSize;
+      return sortedList.slice(start, start + pageSize);
+    }, [pageNumber, pageSize, sortedList]);
+    const value = (0, import_react.useMemo)(
+      () => ({
+        data,
+        loading,
+        total,
+        pagination: { pageNumber, pageSize },
+        onPageChange: (num, size) => {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams,
+        onSearch: (params) => {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        onReset: () => {
+          setSearchParams({});
+          setPageNumber(1);
+        },
+        layoutType: "grid",
+        rowKey: "id"
+      }),
+      [data, loading, total, pageNumber, pageSize, searchParams]
+    );
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16, background: "#f5f5f5", minHeight: 400 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        rowKey: "id",
+        ...value,
+        grid: {
+          columns: columnsWithType,
+          scroll: { x: 1300 },
+          selectedKeys,
+          selectedRows,
+          onSelectionChange: (keys, rows) => {
+            setSelectedKeys(keys);
+            setSelectedRows(rows);
+          }
+        },
+        toolBar: {
+          search: true,
+          quickFilter: true,
+          filter: { hiddenQuickFilter: true }
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.ShellFrame, null, /* @__PURE__ */ import_react.default.createElement(import_index.default.GridLayout, null))
+    ));
+  }
+};
+var CustomQuickFilterAndColumnsRender = {
+  parameters: {
+    docs: {
+      description: {
+        story: "订单列表：左侧快速筛选用自定义 filterList（订单状态、支付状态）；部分列用自定义 render（订单号加粗、状态标签）；右侧筛选弹层仅高级筛选（订单号/买家关键词）。"
+      }
+    }
+  },
+  render: function CustomQuickFilterAndColumnsRenderFn() {
+    var _a;
+    const [pageNumber, setPageNumber] = (0, import_react.useState)(1);
+    const [pageSize, setPageSize] = (0, import_react.useState)(10);
+    const [searchParams, setSearchParams] = (0, import_react.useState)({});
+    const [selectedKeys, setSelectedKeys] = (0, import_react.useState)([]);
+    const [selectedRows, setSelectedRows] = (0, import_react.useState)([]);
+    const filterValues = (_a = searchParams == null ? void 0 : searchParams.filter) == null ? void 0 : _a.values;
+    const filteredList = (0, import_react.useMemo)(() => {
+      const byCriteria = filterDataByCriteria(mockData, filterValues);
+      const kw = filterValues == null ? void 0 : filterValues.keyword;
+      if (kw != null && String(kw).trim() !== "") {
+        const lower = String(kw).toLowerCase();
+        return byCriteria.filter(
+          (row) => String(row.orderNo ?? "").toLowerCase().includes(lower) || String(row.buyerName ?? "").toLowerCase().includes(lower)
+        );
+      }
+      return byCriteria;
+    }, [searchParams]);
+    const sortedList = (0, import_react.useMemo)(
+      () => sortDataBySortKey(filteredList, searchParams == null ? void 0 : searchParams.sort),
+      [filteredList, searchParams == null ? void 0 : searchParams.sort]
+    );
+    const total = sortedList.length;
+    const data = (0, import_react.useMemo)(() => {
+      const start = (pageNumber - 1) * pageSize;
+      return sortedList.slice(start, start + pageSize);
+    }, [pageNumber, pageSize, sortedList]);
+    const value = (0, import_react.useMemo)(
+      () => ({
+        data,
+        loading: false,
+        total,
+        pagination: { pageNumber, pageSize },
+        onPageChange: (num, size) => {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams,
+        onSearch: (params) => {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        onReset: () => {
+          setSearchParams({});
+          setPageNumber(1);
+        },
+        layoutType: "grid",
+        rowKey: "id"
+      }),
+      [data, total, pageNumber, pageSize, searchParams]
+    );
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16, background: "#f5f5f5", minHeight: 400 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        rowKey: "id",
+        ...value,
+        grid: {
+          columns: columnsWithCustomRender,
+          scroll: { x: 1300 },
+          selectedKeys,
+          selectedRows,
+          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__ */ import_react.default.createElement(import_index.default.ShellFrame, null, /* @__PURE__ */ import_react.default.createElement(import_index.default.GridLayout, null))
+    ));
+  }
+};
+var CustomFilterSortRender = {
+  parameters: {
+    docs: {
+      description: {
+        story: "列上自定义 filter（下单时间 rangePickerNew 并配置 placeholder、宽度；订单状态 single 在高级筛选）、自定义 sort（订单状态列无 type，用 sort.getSortItems 自定义排序项「状态 A-Z / Z-A」）、自定义 render（订单号蓝色加粗、状态标签、买家加粗）。左侧快筛仅下单时间，其余在右侧高级筛选。"
+      }
+    }
+  },
+  render: function CustomFilterSortRenderFn() {
+    var _a;
+    const [pageNumber, setPageNumber] = (0, import_react.useState)(1);
+    const [pageSize, setPageSize] = (0, import_react.useState)(10);
+    const [searchParams, setSearchParams] = (0, import_react.useState)({});
+    const [selectedKeys, setSelectedKeys] = (0, import_react.useState)([]);
+    const [selectedRows, setSelectedRows] = (0, import_react.useState)([]);
+    const filterValues = (_a = searchParams == null ? void 0 : searchParams.filter) == null ? void 0 : _a.values;
+    const filteredList = (0, import_react.useMemo)(
+      () => filterDataByCriteria(mockData, filterValues),
+      [searchParams]
+    );
+    const sortedList = (0, import_react.useMemo)(
+      () => sortDataBySortKey(filteredList, searchParams == null ? void 0 : searchParams.sort),
+      [filteredList, searchParams == null ? void 0 : searchParams.sort]
+    );
+    const total = sortedList.length;
+    const data = (0, import_react.useMemo)(() => {
+      const start = (pageNumber - 1) * pageSize;
+      return sortedList.slice(start, start + pageSize);
+    }, [pageNumber, pageSize, sortedList]);
+    const value = (0, import_react.useMemo)(
+      () => ({
+        data,
+        loading: false,
+        total,
+        pagination: { pageNumber, pageSize },
+        onPageChange: (num, size) => {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams,
+        onSearch: (params) => {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        onReset: () => {
+          setSearchParams({});
+          setPageNumber(1);
+        },
+        layoutType: "grid",
+        rowKey: "id"
+      }),
+      [data, total, pageNumber, pageSize, searchParams]
+    );
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16, background: "#f5f5f5", minHeight: 400 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        rowKey: "id",
+        ...value,
+        grid: {
+          columns: columnsWithCustomFilterSortRender,
+          scroll: { x: 1300 },
+          selectedKeys,
+          selectedRows,
+          onSelectionChange: (keys, rows) => {
+            setSelectedKeys(keys);
+            setSelectedRows(rows);
+          }
+        },
+        toolBar: {
+          search: true,
+          quickFilter: true,
+          filter: { hiddenQuickFilter: true }
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.ShellFrame, null, /* @__PURE__ */ import_react.default.createElement(import_index.default.GridLayout, null))
+    ));
+  }
+};
+var GridLayoutWithPisellFindInToolBar = {
+  render: function GridLayoutWithPisellFindInToolBarRender() {
+    const [pageNumber, setPageNumber] = (0, import_react.useState)(1);
+    const [pageSize, setPageSize] = (0, import_react.useState)(10);
+    const [loading, setLoading] = (0, import_react.useState)(false);
+    const [searchParams, setSearchParams] = (0, import_react.useState)({});
+    const [selectedKeys, setSelectedKeys] = (0, import_react.useState)([]);
+    const [selectedRows, setSelectedRows] = (0, import_react.useState)([]);
+    const total = mockData.length;
+    const data = (0, import_react.useMemo)(() => {
+      const start = (pageNumber - 1) * pageSize;
+      return mockData.slice(start, start + pageSize);
+    }, [pageNumber, pageSize]);
+    const value = (0, import_react.useMemo)(
+      () => ({
+        data,
+        loading,
+        total,
+        pagination: { pageNumber, pageSize },
+        onPageChange: (num, size) => {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams,
+        onSearch: (params) => {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        onReset: () => {
+          setSearchParams({});
+          setPageNumber(1);
+        },
+        layoutType: "grid",
+        rowKey: "id"
+      }),
+      [data, loading, total, pageNumber, pageSize, searchParams]
+    );
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16, background: "#fff", minHeight: 500 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        rowKey: "id",
+        ...value,
+        toolBar: { search: true, quickFilter: true, filter: { hiddenQuickFilter: true } },
+        grid: {
+          columns,
+          size: "small",
+          scroll: { x: 1300 },
+          selectedKeys,
+          selectedRows,
+          onSelectionChange: (keys, rows) => {
+            setSelectedKeys(keys);
+            setSelectedRows(rows);
+          }
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.ShellFrame, null, /* @__PURE__ */ import_react.default.createElement(import_index.default.GridLayout, null))
+    ));
+  }
+};
+var GridLayoutToolBarSearchInput = {
+  render: function GridLayoutToolBarSearchInputRender() {
+    const [pageNumber, setPageNumber] = (0, import_react.useState)(1);
+    const [pageSize, setPageSize] = (0, import_react.useState)(10);
+    const [searchParams, setSearchParams] = (0, import_react.useState)({});
+    const [selectedKeys, setSelectedKeys] = (0, import_react.useState)([]);
+    const [selectedRows, setSelectedRows] = (0, import_react.useState)([]);
+    const total = mockData.length;
+    const data = (0, import_react.useMemo)(() => {
+      const start = (pageNumber - 1) * pageSize;
+      return mockData.slice(start, start + pageSize);
+    }, [pageNumber, pageSize]);
+    const value = (0, import_react.useMemo)(
+      () => ({
+        data,
+        loading: false,
+        total,
+        pagination: { pageNumber, pageSize },
+        onPageChange: (num, size) => {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams,
+        onSearch: (params) => {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        layoutType: "grid",
+        rowKey: "id"
+      }),
+      [data, total, pageNumber, pageSize, searchParams]
+    );
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        rowKey: "id",
+        ...value,
+        toolBar: {
+          search: { triggerType: "input", placeholder: "输入关键词" },
+          quickFilter: true,
+          filter: { hiddenQuickFilter: true }
+        },
+        grid: {
+          columns,
+          scroll: { x: 1300 },
+          selectedKeys,
+          selectedRows,
+          onSelectionChange: (keys, rows) => {
+            setSelectedKeys(keys);
+            setSelectedRows(rows);
+          }
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.ShellFrame, null, /* @__PURE__ */ import_react.default.createElement(import_index.default.GridLayout, null))
+    ));
+  }
+};
+var GridLayoutFull = {
+  parameters: {
+    docs: { description: { story: "勾选行后显示批量操作栏，可配置 onDelete 等；含搜索、筛选、排序、重置。" } }
+  },
+  render: function GridLayoutFullRender() {
+    const [pageNumber, setPageNumber] = (0, import_react.useState)(1);
+    const [pageSize, setPageSize] = (0, import_react.useState)(10);
+    const [loading, setLoading] = (0, import_react.useState)(false);
+    const [searchParams, setSearchParams] = (0, import_react.useState)({});
+    const [selectedKeys, setSelectedKeys] = (0, import_react.useState)([]);
+    const [selectedRows, setSelectedRows] = (0, import_react.useState)([]);
+    const total = mockData.length;
+    const data = (0, import_react.useMemo)(() => {
+      const start = (pageNumber - 1) * pageSize;
+      return mockData.slice(start, start + pageSize);
+    }, [pageNumber, pageSize]);
+    const value = (0, import_react.useMemo)(
+      () => ({
+        data,
+        loading,
+        total,
+        pagination: { pageNumber, pageSize },
+        onPageChange: (num, size) => {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams,
+        onSearch: (params) => {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        onReset: () => {
+          setSearchParams({});
+          setPageNumber(1);
+        },
+        layoutType: "grid",
+        rowKey: "id"
+      }),
+      [data, loading, total, pageNumber, pageSize, searchParams]
+    );
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16, background: "#fff", minHeight: 500 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        rowKey: "id",
+        ...value,
+        toolBar: { quickFilter: true, filter: { hiddenQuickFilter: true } },
+        grid: {
+          columns,
+          size: "small",
+          scroll: { x: 1300 },
+          selectedKeys,
+          selectedRows,
+          onSelectionChange: (keys, rows) => {
+            setSelectedKeys(keys);
+            setSelectedRows(rows);
+          }
+        },
+        batchActionBar: {
+          onDelete: (keys, rows) => {
+            console.log("批量删除", keys, rows);
+            alert(`已选择 ${keys.length} 项，可在此执行删除`);
+          }
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.ShellFrame, null, /* @__PURE__ */ import_react.default.createElement(import_index.default.GridLayout, null))
+    ));
+  }
+};
+var Placeholder = {
+  parameters: {
+    docs: { description: { story: "不传 value 时的占位态，用于设计态或未接数据源时。" } }
+  },
+  args: {
+    rowKey: "id"
+  },
+  render: (args) => /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16, background: "#fafafa" } }, /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args }, /* @__PURE__ */ import_react.default.createElement(import_index.default.ShellFrame, null, /* @__PURE__ */ import_react.default.createElement(import_index.default.GridLayout, null))))
+};
+var CardLayoutPlaceholder = {
+  parameters: {
+    docs: { description: { story: "Card 布局占位，不传 value。" } }
+  },
+  args: {
+    rowKey: "id",
+    layoutType: "card"
+  },
+  render: (args) => /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16, background: "#fafafa" } }, /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args }, /* @__PURE__ */ import_react.default.createElement(import_index.default.ShellFrame, null, /* @__PURE__ */ import_react.default.createElement(import_index.default.CardLayout, null))))
+};
+var CustomComposition = {
+  parameters: {
+    docs: { description: { story: "未用 ShellFrame，手动组合 ToolBar、BatchActionBar、Grid、Pagination。" } }
+  },
+  render: function CustomCompositionRender() {
+    const [pageNumber, setPageNumber] = (0, import_react.useState)(1);
+    const [pageSize, setPageSize] = (0, import_react.useState)(10);
+    const [searchParams, setSearchParams] = (0, import_react.useState)({});
+    const [selectedKeys, setSelectedKeys] = (0, import_react.useState)([]);
+    const [selectedRows, setSelectedRows] = (0, import_react.useState)([]);
+    const total = mockData.length;
+    const data = (0, import_react.useMemo)(() => {
+      const start = (pageNumber - 1) * pageSize;
+      return mockData.slice(start, start + pageSize);
+    }, [pageNumber, pageSize]);
+    const value = (0, import_react.useMemo)(
+      () => ({
+        data,
+        loading: false,
+        total,
+        pagination: { pageNumber, pageSize },
+        onPageChange: (num, size) => {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams,
+        onSearch: (params) => {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        layoutType: "grid",
+        rowKey: "id"
+      }),
+      [data, total, pageNumber, pageSize, searchParams]
+    );
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        rowKey: "id",
+        ...value,
+        grid: {
+          columns,
+          selectedKeys,
+          selectedRows,
+          onSelectionChange: (keys, rows) => {
+            setSelectedKeys(keys);
+            setSelectedRows(rows);
+          }
+        },
+        toolBar: { quickFilter: true, filter: { hiddenQuickFilter: true } }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.ToolBar, null),
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.BatchActionBar, null),
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.Grid, { style: { marginTop: 8 } }),
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.Pagination, null)
+    ));
+  }
+};
+var WithPisellFindSearch = {
+  render: function WithPisellFindSearchRender() {
+    const [pageNumber, setPageNumber] = (0, import_react.useState)(1);
+    const [pageSize, setPageSize] = (0, import_react.useState)(10);
+    const [searchParams, setSearchParams] = (0, import_react.useState)({});
+    const [selectedKeys, setSelectedKeys] = (0, import_react.useState)([]);
+    const [selectedRows, setSelectedRows] = (0, import_react.useState)([]);
+    const total = mockData.length;
+    const data = (0, import_react.useMemo)(() => {
+      const start = (pageNumber - 1) * pageSize;
+      return mockData.slice(start, start + pageSize);
+    }, [pageNumber, pageSize]);
+    const value = (0, import_react.useMemo)(
+      () => ({
+        data,
+        loading: false,
+        total,
+        pagination: { pageNumber, pageSize },
+        onPageChange: (num, size) => {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams,
+        onSearch: (params) => {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        layoutType: "grid",
+        rowKey: "id"
+      }),
+      [data, total, pageNumber, pageSize, searchParams]
+    );
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        rowKey: "id",
+        ...value,
+        search: { triggerType: "input", placeholder: "输入关键词搜索" },
+        toolBar: { quickFilter: true, filter: { hiddenQuickFilter: true } },
+        grid: {
+          columns,
+          scroll: { x: 1300 },
+          selectedKeys,
+          selectedRows,
+          onSelectionChange: (keys, rows) => {
+            setSelectedKeys(keys);
+            setSelectedRows(rows);
+          }
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.Search, null),
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.ToolBar, null),
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.BatchActionBar, null),
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.Grid, { columns, style: { marginTop: 8 } }),
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.Pagination, null)
+    ));
+  }
+};
+var SearchAndGridOnly = {
+  render: function SearchAndGridOnlyRender() {
+    const [pageNumber, setPageNumber] = (0, import_react.useState)(1);
+    const [pageSize, setPageSize] = (0, import_react.useState)(10);
+    const [searchParams, setSearchParams] = (0, import_react.useState)({});
+    const [selectedKeys, setSelectedKeys] = (0, import_react.useState)([]);
+    const [selectedRows, setSelectedRows] = (0, import_react.useState)([]);
+    const total = mockData.length;
+    const data = (0, import_react.useMemo)(() => {
+      const start = (pageNumber - 1) * pageSize;
+      return mockData.slice(start, start + pageSize);
+    }, [pageNumber, pageSize]);
+    const value = (0, import_react.useMemo)(
+      () => ({
+        data,
+        loading: false,
+        total,
+        pagination: { pageNumber, pageSize },
+        onPageChange: (num, size) => {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams,
+        onSearch: (params) => {
+          setSearchParams(params);
+          setPageNumber(1);
+        },
+        layoutType: "grid",
+        rowKey: "id"
+      }),
+      [data, total, pageNumber, pageSize, searchParams]
+    );
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        rowKey: "id",
+        ...value,
+        grid: {
+          columns,
+          scroll: { x: 1300 },
+          selectedKeys,
+          selectedRows,
+          onSelectionChange: (keys, rows) => {
+            setSelectedKeys(keys);
+            setSelectedRows(rows);
+          }
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.Search, null),
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.Grid, { style: { marginTop: 8 } }),
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.Pagination, null)
+    ));
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CardLayoutPlaceholder,
+  CustomComposition,
+  CustomFilterSortRender,
+  CustomQuickFilterAndColumnsRender,
+  GridLayoutFull,
+  GridLayoutToolBarSearchInput,
+  GridLayoutToolBarSortAndFilter,
+  GridLayoutWithColumnType,
+  GridLayoutWithPisellFindInToolBar,
+  GridLayoutWithQuickFilterOnLeft,
+  GridLayoutWithTable,
+  GridWithMultiplePages,
+  GridWithOnRow,
+  Placeholder,
+  SearchAndGridOnly,
+  WithPisellFindSearch
+});