@pisell/materials 1.0.1034 → 1.0.1035

package/es/components/pisellRecordBoard/docs/PisellRecordBoard.md

@@ -0,0 +1,552 @@
+---
+nav:
+  title: 组件
+  order: 1
+group:
+  title: Data Display
+  order: 1
+title: PisellRecordBoard
+order: 1
+category: pro
+---
+
+# PisellRecordBoard 记录看板
+
+记录看板容器组件，提供统一的列表数据、分页、搜索/筛选/排序、多选等上下文，支持 Grid（表格）与 Card 两种布局。
+
+## 组件介绍
+
+PisellRecordBoard 是列表类页面的**容器**，不直接渲染表格或卡片，而是通过 Context 向子组件提供 `data`、`pagination`、
+`searchParams`、`onSearch`、多选等。ToolBar 左侧为快速筛选（QuickFilter）+ 搜索（PisellFind），右侧为排序、筛选弹层、重置；列配置（
+`grid.columns`）可驱动筛选项与排序项，无需单独维护 filter 列表。
+
+**核心特性**：
+
+- 统一上下文（data、分页、搜索参数、多选）
+- 列驱动筛选/排序（有 type 自动派生，无 type 可自定义 filter/sort）
+- 支持有 type 时用 render/filter/sort 覆盖
+- 快速筛选（左侧内联）+ 高级筛选（右侧弹层）
+- 多选与 BatchActionBar
+
+## 何时使用
+
+- 列表页需要统一的搜索、筛选、排序、分页
+- 希望用列配置自动生成筛选项与排序项，减少重复配置
+- 需要表格 + 工具栏 + 多选操作栏 + 分页的完整布局
+- 需要 Grid 与 Card 两种布局切换或单独使用
+
+## 代码演示
+
+### 基础用法（ShellFrame + GridLayout）
+
+受控用法：由上层注入 `value`，子组件通过 Context 消费。
+
+```tsx
+import React, { useState } from 'react';
+import { PisellRecordBoard } from '@pisell/materials';
+
+const list = [{ id: '1', orderNo: 'ORD001', status: 'enabled' }];
+const columns = [
+  { title: '订单号', dataIndex: 'orderNo', key: 'orderNo' },
+  { title: '状态', dataIndex: 'status', key: 'status' },
+];
+
+export default () => {
+  const [searchParams, setSearchParams] = useState<Record<string, unknown>>({});
+  const value = {
+    data: list,
+    loading: false,
+    total: 100,
+    pagination: { pageNumber: 1, pageSize: 10 },
+    onPageChange: () => {},
+    searchParams,
+    onSearch: (params: Record<string, unknown>) => setSearchParams(params),
+    layoutType: 'grid' as const,
+    rowKey: 'id',
+  };
+
+  return (
+    <PisellRecordBoard rowKey="id" {...value} grid={{ columns }}>
+      <PisellRecordBoard.ShellFrame>
+        <PisellRecordBoard.GridLayout />
+      </PisellRecordBoard.ShellFrame>
+    </PisellRecordBoard>
+  );
+};
+```
+
+列配置通过 `grid.columns` 传入；ToolBar 会根据 columns 自动派生筛选与排序。
+
+### 列配置：有 type（自动派生）
+
+传入 `type` 时，表格用对应 Pisell 组件只读渲染，筛选用编辑态，排序从组件 SortOptions 派生。
+
+```tsx
+import React, { useState } from 'react';
+import { PisellRecordBoard } from '@pisell/materials';
+
+const list = [{ id: '1', orderNo: 'ORD001', status: 'enabled', createTime: '2024-01-01 12:00' }];
+const columns = [
+  { title: '订单号', dataIndex: 'orderNo', key: 'orderNo', width: 160, type: 'singleLineText' },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    type: 'singleSelect',
+    fieldProps: {
+      options: [
+        { label: '全部', value: 'all' },
+        { label: '启用', value: 'enabled' },
+        { label: '禁用', value: 'disabled' },
+      ],
+    },
+  },
+  {
+    title: '下单时间',
+    dataIndex: 'createTime',
+    key: 'createTime',
+    type: 'dateTime',
+    fieldProps: { customFormat: 'YYYY-MM-DD HH:mm' },
+    filterable: true,
+    filter: { quickFilter: true },
+  },
+];
+
+export default () => {
+  const [searchParams, setSearchParams] = useState<Record<string, unknown>>({});
+  const value = {
+    data: list,
+    loading: false,
+    total: 1,
+    pagination: { pageNumber: 1, pageSize: 10 },
+    onPageChange: () => {},
+    searchParams,
+    onSearch: (params: Record<string, unknown>) => setSearchParams(params),
+    layoutType: 'grid' as const,
+    rowKey: 'id',
+  };
+  return (
+    <PisellRecordBoard
+      rowKey="id"
+      {...value}
+      grid={{ columns, scroll: { x: 1200 } }}
+      toolBar={{ search: true, quickFilter: true, filter: { hiddenQuickFilter: true } }}
+    >
+      <PisellRecordBoard.ShellFrame>
+        <PisellRecordBoard.GridLayout />
+      </PisellRecordBoard.ShellFrame>
+    </PisellRecordBoard>
+  );
+};
+```
+
+### 列配置：无 type（自定义 render / filter / sort）
+
+不传 `type` 时，表格无自定义 render 则纯文本；筛选需配置 `filterable` + `filter`（type 或 component）；排序需配置
+`sortable` + `sort`。
+
+```tsx
+import React, { useState } from 'react';
+import { PisellRecordBoard } from '@pisell/materials';
+
+const list = [{ id: '1', status: 'enabled' }];
+const columns = [
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    render: (val: string) => (val === 'enabled' ? '启用' : '禁用'),
+    filterable: true,
+    filter: {
+      type: 'single',
+      options: [
+        { label: '全部', value: 'all' },
+        { label: '启用', value: 'enabled' },
+        { label: '禁用', value: 'disabled' },
+      ],
+    },
+    sortable: true,
+    sort: {
+      getSortItems: (key: string) => [
+        { key: `${key}:asc`, label: 'A-Z' },
+        { key: `${key}:desc`, label: 'Z-A' },
+      ],
+    },
+  },
+];
+
+export default () => {
+  const [searchParams, setSearchParams] = useState<Record<string, unknown>>({});
+  const value = {
+    data: list,
+    loading: false,
+    total: 1,
+    pagination: { pageNumber: 1, pageSize: 10 },
+    onPageChange: () => {},
+    searchParams,
+    onSearch: (params: Record<string, unknown>) => setSearchParams(params),
+    layoutType: 'grid' as const,
+    rowKey: 'id',
+  };
+  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
+  const [selectedRows, setSelectedRows] = useState<any[]>([]);
+  return (
+    <PisellRecordBoard
+      rowKey="id"
+      {...value}
+      grid={{
+        columns,
+        selectedKeys,
+        selectedRows,
+        onSelectionChange: (keys, rows) => {
+          setSelectedKeys(keys);
+          setSelectedRows(rows);
+        },
+      }}
+    >
+      <PisellRecordBoard.ShellFrame>
+        <PisellRecordBoard.GridLayout />
+      </PisellRecordBoard.ShellFrame>
+    </PisellRecordBoard>
+  );
+};
+```
+
+### 无 type + 自定义筛选组件
+
+筛选可传入 `filter.component`，组件需实现 `value` 与 `onChange`，由 Form 注入。
+
+```tsx
+import React, { useState } from 'react';
+import { Input } from 'antd';
+import { PisellRecordBoard } from '@pisell/materials';
+
+const MyFilterInput = ({
+  value,
+  onChange,
+}: {
+  value?: string;
+  onChange?: (v: string) => void;
+}) => (
+  <Input
+    {...value}
+    onChange={(e) => onChange?.(e.target.value)}
+    placeholder="自定义筛选"
+  />
+);
+
+const list = [{ id: '1', remark: '备注内容' }];
+const columns = [
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    key: 'remark',
+    filterable: true,
+    filter: { component: MyFilterInput },
+  },
+];
+
+export default () => {
+  const [searchParams, setSearchParams] = useState<Record<string, unknown>>({});
+  const value = {
+    data: list,
+    loading: false,
+    total: 1,
+    pagination: { pageNumber: 1, pageSize: 10 },
+    onPageChange: () => {},
+    searchParams,
+    onSearch: (params: Record<string, unknown>) => setSearchParams(params),
+    layoutType: 'grid' as const,
+    rowKey: 'id',
+  };
+  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
+  const [selectedRows, setSelectedRows] = useState<any[]>([]);
+  return (
+    <PisellRecordBoard
+      rowKey="id"
+      {...value}
+      grid={{
+        columns,
+        selectedKeys,
+        selectedRows,
+        onSelectionChange: (keys, rows) => {
+          setSelectedKeys(keys);
+          setSelectedRows(rows);
+        },
+      }}
+    >
+      <PisellRecordBoard.ShellFrame>
+        <PisellRecordBoard.GridLayout />
+      </PisellRecordBoard.ShellFrame>
+    </PisellRecordBoard>
+  );
+};
+```
+
+### 有 type 时覆盖（render / filter / sort）
+
+有 type 时也可传入 `render`、`filter`、`sort`，优先使用传入配置，覆盖自动派生。
+
+```tsx
+import React, { useState } from 'react';
+import { PisellRecordBoard } from '@pisell/materials';
+
+const list = [{ id: '1', amount: 99.5 }];
+const columns = [
+  {
+    title: '金额',
+    dataIndex: 'amount',
+    key: 'amount',
+    type: 'currency',
+    fieldProps: { precision: 2, currencySymbol: '¥' },
+    render: (val: number) => <span style={{ color: 'red' }}>¥{val}</span>,
+  },
+];
+
+export default () => {
+  const [searchParams, setSearchParams] = useState<Record<string, unknown>>({});
+  const value = {
+    data: list,
+    loading: false,
+    total: 1,
+    pagination: { pageNumber: 1, pageSize: 10 },
+    onPageChange: () => {},
+    searchParams,
+    onSearch: (params: Record<string, unknown>) => setSearchParams(params),
+    layoutType: 'grid' as const,
+    rowKey: 'id',
+  };
+  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
+  const [selectedRows, setSelectedRows] = useState<any[]>([]);
+  return (
+    <PisellRecordBoard
+      rowKey="id"
+      {...value}
+      grid={{
+        columns,
+        selectedKeys,
+        selectedRows,
+        onSelectionChange: (keys, rows) => {
+          setSelectedKeys(keys);
+          setSelectedRows(rows);
+        },
+      }}
+    >
+      <PisellRecordBoard.ShellFrame>
+        <PisellRecordBoard.GridLayout />
+      </PisellRecordBoard.ShellFrame>
+    </PisellRecordBoard>
+  );
+};
+```
+
+### 工具栏透传（搜索、QuickFilter、slots）
+
+通过 `toolBar` 配置搜索、快速筛选、筛选弹层、排序，以及 `topLeft` / `topRight` 插槽。
+
+```tsx
+import React, { useState } from 'react';
+import { Button } from 'antd';
+import { PisellRecordBoard } from '@pisell/materials';
+
+const list = [{ id: '1', name: '示例' }];
+const columns = [{ title: '名称', dataIndex: 'name', key: 'name' }];
+
+export default () => {
+  const [searchParams, setSearchParams] = useState<Record<string, unknown>>({});
+  const value = {
+    data: list,
+    loading: false,
+    total: 1,
+    pagination: { pageNumber: 1, pageSize: 10 },
+    onPageChange: () => {},
+    searchParams,
+    onSearch: (params: Record<string, unknown>) => setSearchParams(params),
+    layoutType: 'grid' as const,
+    rowKey: 'id',
+  };
+
+  return (
+    <PisellRecordBoard
+      rowKey="id"
+      {...value}
+      grid={{ columns }}
+      toolBar={{
+        search: true,
+        quickFilter: true,
+        filter: { hiddenQuickFilter: true },
+        sort: true,
+        topLeft: <Button type="primary">新建</Button>,
+      }}
+    >
+      <PisellRecordBoard.ShellFrame>
+        <PisellRecordBoard.GridLayout />
+      </PisellRecordBoard.ShellFrame>
+    </PisellRecordBoard>
+  );
+};
+```
+
+### 自定义组合（不用 ShellFrame）
+
+可单独使用 ToolBar、BatchActionBar、Grid、Pagination 自由组合。
+
+```tsx
+import React, { useState } from 'react';
+import { PisellRecordBoard } from '@pisell/materials';
+
+const list = [{ id: '1', name: '示例' }];
+const columns = [{ title: '名称', dataIndex: 'name', key: 'name' }];
+
+export default () => {
+  const [searchParams, setSearchParams] = useState<Record<string, unknown>>({});
+  const value = {
+    data: list,
+    loading: false,
+    total: 1,
+    pagination: { pageNumber: 1, pageSize: 10 },
+    onPageChange: () => {},
+    searchParams,
+    onSearch: (params: Record<string, unknown>) => setSearchParams(params),
+    layoutType: 'grid' as const,
+    rowKey: 'id',
+  };
+
+  return (
+    <PisellRecordBoard rowKey="id" {...value} grid={{ columns }}>
+      <PisellRecordBoard.ToolBar />
+      <PisellRecordBoard.BatchActionBar />
+      <PisellRecordBoard.Grid />
+      <PisellRecordBoard.Pagination />
+    </PisellRecordBoard>
+  );
+};
+```
+
+### grid 透传 antd Table props
+
+`grid` 类型为 **RecordBoardGridProps**，在自有字段（columns、scroll、size、selectedKeys、selectedRows、onSelectionChange）基础上，与 antd **TableProps** 做交叉类型并省略由 context 或组件自管的项（dataSource、loading、pagination、columns、scroll、size、rowSelection），因此支持 Table 其余 props 透传，如 `onRow`、`onHeaderRow`、`expandable`、`rowClassName`、`summary` 等。
+
+### 自定义表格行点击（grid.onRow.onClick）
+
+通过 `grid.onRow` 传入行属性，在 `onClick` 中处理行点击（如跳转详情、打开抽屉等）。下例为自包含示例，点击表格行会弹出当前行数据。
+
+```tsx
+import React, { useState } from 'react';
+import { PisellRecordBoard } from '@pisell/materials';
+
+type RowRecord = { id: string; orderNo: string; status: string; amount: number };
+
+const list: RowRecord[] = [
+  { id: '1', orderNo: 'ORD001', status: '已支付', amount: 99.9 },
+  { id: '2', orderNo: 'ORD002', status: '待发货', amount: 199 },
+  { id: '3', orderNo: 'ORD003', status: '已取消', amount: 0 },
+];
+
+const columns = [
+  { title: '订单号', dataIndex: 'orderNo', key: 'orderNo' },
+  { title: '状态', dataIndex: 'status', key: 'status' },
+  { title: '金额', dataIndex: 'amount', key: 'amount' },
+];
+
+export default function TableOnRowClickExample() {
+  const [searchParams, setSearchParams] = useState<Record<string, unknown>>({});
+  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
+  const [selectedRows, setSelectedRows] = useState<RowRecord[]>([]);
+
+  const value = {
+    data: list,
+    loading: false,
+    total: list.length,
+    pagination: { pageNumber: 1, pageSize: 10 },
+    onPageChange: () => {},
+    searchParams,
+    onSearch: (params: Record<string, unknown>) => setSearchParams(params),
+    onReset: () => setSearchParams({}),
+    layoutType: 'grid' as const,
+    rowKey: 'id',
+  };
+
+  return (
+    <PisellRecordBoard rowKey="id" {...value} grid={{
+      columns,
+      selectedKeys,
+      selectedRows,
+      onSelectionChange: (keys, rows) => {
+        setSelectedKeys(keys);
+        setSelectedRows(rows as RowRecord[]);
+      },
+      onRow: (record: RowRecord) => ({
+        onClick: () => {
+          // 自定义行点击：如跳转详情、打开抽屉等
+          console.log('行点击', record);
+          alert(`点击订单：${record.orderNo}，状态：${record.status}，金额：¥${record.amount}`);
+        },
+      }),
+    }}>
+      <PisellRecordBoard.ShellFrame>
+        <PisellRecordBoard.GridLayout />
+      </PisellRecordBoard.ShellFrame>
+    </PisellRecordBoard>
+  );
+}
+```
+
+## API
+
+### PisellRecordBoard Props
+
+| 属性     | 类型                        | 说明 |
+|----------|-----------------------------|------|
+| rowKey   | string \| (record) => Key   | 行主键 |
+| layoutType | 'grid' \| 'card'          | 布局类型 |
+| data / loading / total / pagination / onPageChange / searchParams / onSearch / onReset | 各自类型 | 打散的数据与回调 |
+| grid / toolBar / search / paginationConfig / batchActionBar / cardList | 各自类型 | 打散的子组件配置。**grid** 类型为 RecordBoardGridProps（基于 TableProps 省略 dataSource/loading/pagination/columns/scroll/size/rowSelection），多选在 grid 内；支持 Table 透传：onRow、onHeaderRow、expandable、rowClassName、summary 等 |
+
+### 子组件
+
+| 子组件                                     | 说明                                                                                                                          |
+|-----------------------------------------|-----------------------------------------------------------------------------------------------------------------------------|
+| PisellRecordBoard.ShellFrame            | 外壳：ToolBar + BatchActionBar + children(Layout) + Pagination；ToolBar 右侧可选列设置入口；分页使用定制样式（record-board-shell-frame-pagination） |
+| PisellRecordBoard.GridLayout            | 表格布局                                                                                                                        |
+| PisellRecordBoard.CardLayout            | 卡片布局                                                                                                                        |
+| PisellRecordBoard.ToolBar               | 工具栏（含搜索、QuickFilter、Sort、Filter、列设置、Reset、slots）                                                                            |
+| PisellRecordBoard.Search                | 搜索槽                                                                                                                         |
+| PisellRecordBoard.Pagination            | 分页槽                                                                                                                         |
+| PisellRecordBoard.Grid                  | 表格视图（支持 columnVisibility 列显示隐藏）                                                                                             |
+| PisellRecordBoard.CardList              | 卡片列表视图                                                                                                                      |
+| PisellRecordBoard.BatchActionBar        | 多选操作栏                                                                                                                       |
+| PisellRecordBoard.useRecordBoardContext | 消费上下文的 Hook                                                                                                                 |
+
+### 列配置（RecordBoardColumnType）
+
+与 antd Table Column 兼容，额外支持：
+
+| 属性         | 类型                            | 说明                                                                                     |
+|------------|-------------------------------|----------------------------------------------------------------------------------------|
+| type       | RecordBoardFieldType          | 字段类型，有则表格/筛选/排序自动派生                                                                    |
+| fieldProps | object                        | 传给 Pisell 组件的 props；singleSelect/multipleSelect 支持 `options` 或 `getOptions`（同步/异步返回选项） |
+| filterable | boolean                       | 是否参与筛选                                                                                 |
+| filter     | RecordBoardColumnFilterConfig | 筛选配置（type 或 component）；type 为 single 时支持 `options` 或 `getOptions`                      |
+| sortable   | boolean                       | 是否参与排序                                                                                 |
+| sort       | { type?, getSortItems? }      | 排序配置                                                                                   |
+
+- **选项类型**：`RecordBoardOptionItem` 为 `{ label, value, color? }`，只读态 Tag 可使用 `color`。`RecordBoardGetOptions`
+  为同步或异步返回选项列表的函数类型。
+- **列显示隐藏**：`columnVisibility`、`onColumnVisibilityChange` 由容器内部维护并注入 Context；ToolBar 通过 `toolBar.columnSetting`（默认 true）控制是否展示列设置入口，Grid/CardList 按可见列渲染。不通过 props 传入。
+
+### 列 type 与能力对照
+
+| 能力   | 有 type                    | 无 type                |
+|------|---------------------------|-----------------------|
+| 表格展示 | 自动只读组件；可传 render 覆盖       | 纯文本或自定义 render        |
+| 筛选   | 自动编辑态；可传 filter 覆盖        | 需 filterable + filter |
+| 排序   | 自动 SortOptions；可传 sort 覆盖 | 需 sortable + sort     |
+
+## 相关文档
+
+- [架构说明](./architecture.md)
+- [列与筛选/排序绑定](./columns-filter-binding.md)
+- [设计文档](./PisellRecordBoard.$tab-design.md)
+- [开发文档](./PisellRecordBoard.$tab-dev.md)
+- [测试文档](./PisellRecordBoard.$tab-test.md)

package/es/components/pisellRecordBoard/hooks/useRecordBoardContext.d.ts

@@ -0,0 +1,20 @@
+import { RecordBoardChildComponentProps, RecordBoardContextValue, RecordBoardGridProps } from "../types.js";
+
+//#region src/components/pisellRecordBoard/hooks/useRecordBoardContext.d.ts
+interface UseRecordBoardContextOptions {
+  /** 子组件 displayName，用于从 childComponentProps 中取对应 props */
+  displayName?: keyof RecordBoardChildComponentProps;
+  /** 上层传入的 childComponentProps（若 Context 未提供则从参数传入） */
+  childComponentProps?: RecordBoardChildComponentProps;
+}
+/**
+ * 消费 RecordBoard 上下文，供各 layout 内子组件（Search / ToolBar / Grid / CardList / Pagination）使用。
+ * 若传入 displayName，返回会合并 childComponentProps[displayName] 便于透传。
+ * 当 displayName 为 'grid' 时，返回类型包含 RecordBoardGridProps（columns、scroll、size）。
+ */
+declare function useRecordBoardContext(options: UseRecordBoardContextOptions & {
+  displayName: 'grid';
+}): RecordBoardContextValue & RecordBoardGridProps;
+declare function useRecordBoardContext(options?: UseRecordBoardContextOptions): RecordBoardContextValue;
+//#endregion
+export { useRecordBoardContext };

package/es/components/pisellRecordBoard/hooks/useRecordBoardContext.js

@@ -0,0 +1,16 @@
+import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectSpread2.js";
+import { RecordBoardContext } from "../context/RecordBoardContext.js";
+import { useContext } from "react";
+
+//#region src/components/pisellRecordBoard/hooks/useRecordBoardContext.ts
+function useRecordBoardContext(options = {}) {
+	const ctx = useContext(RecordBoardContext);
+	if (!ctx) throw new Error("useRecordBoardContext 必须在 PisellRecordBoard（或 RecordBoardProvider）下使用");
+	const { displayName, childComponentProps } = options;
+	const mergedChildProps = childComponentProps !== null && childComponentProps !== void 0 ? childComponentProps : ctx.childComponentProps;
+	if (displayName && (mergedChildProps === null || mergedChildProps === void 0 ? void 0 : mergedChildProps[displayName])) return _objectSpread2(_objectSpread2({}, ctx), mergedChildProps[displayName]);
+	return ctx;
+}
+
+//#endregion
+export { useRecordBoardContext };

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

@@ -0,0 +1,40 @@
+import { RecordBoardChildComponentProps, RecordBoardColumnFilterConfig, RecordBoardColumnType, RecordBoardContextValue, RecordBoardFieldType, RecordBoardGetOptions, RecordBoardGridProps, RecordBoardLayoutType, RecordBoardOptionItem, RecordBoardProps } from "./types.js";
+import { RecordBoardGridView } from "./layouts/GridLayout/Grid.js";
+import { GridLayout } from "./layouts/GridLayout/index.js";
+import { RecordBoardCardList } from "./layouts/CardLayout/CardList.js";
+import { CardLayout } from "./layouts/CardLayout/index.js";
+import { RecordBoardToolBar } from "./shellFrame/ToolBar/index.js";
+import { RecordBoardBatchActionBar } from "./shellFrame/BatchActionBar/index.js";
+import { RecordBoardPagination } from "./shellFrame/Pagination/index.js";
+import { RecordBoardSearch } from "./shellFrame/Search/index.js";
+import { RecordBoardShellFrame } from "./shellFrame/index.js";
+import { useRecordBoardContext } from "./hooks/useRecordBoardContext.js";
+import React from "react";
+
+//#region src/components/pisellRecordBoard/index.d.ts
+/** RecordBoard 复合组件类型 */
+interface PisellRecordBoardType extends React.FC<RecordBoardProps> {
+  /** Shell Frame：对 Layout 的扩展，提供 ToolBar + BatchActionBar + children（Layout） */
+  ShellFrame: typeof RecordBoardShellFrame;
+  /** Grid 布局：仅内容区（表格 + 分页），需配合 ShellFrame 使用 */
+  GridLayout: typeof GridLayout;
+  /** 卡片布局：仅内容区（卡片列表 + 分页），需配合 ShellFrame 使用 */
+  CardLayout: typeof CardLayout;
+  /** 单独使用：搜索槽（PisellFind，绑定 searchParams.keyword / onSearch） */
+  Search: typeof RecordBoardSearch;
+  /** 单独使用：工具栏（PisellToolBar，含搜索/导出，可透传 topLeft/topRight 等） */
+  ToolBar: typeof RecordBoardToolBar;
+  /** 单独使用：分页槽 */
+  Pagination: typeof RecordBoardPagination;
+  /** 单独使用：Grid 视图（表格） */
+  Grid: typeof RecordBoardGridView;
+  /** 单独使用：卡片列表视图 */
+  CardList: typeof RecordBoardCardList;
+  /** 多选操作栏（基于 PisellBatchActionBar，有选中项时展示） */
+  BatchActionBar: typeof RecordBoardBatchActionBar;
+  /** 消费 RecordBoard 上下文 */
+  useRecordBoardContext: typeof useRecordBoardContext;
+}
+declare const PisellRecordBoard: PisellRecordBoardType;
+//#endregion
+export { PisellRecordBoard };

package/es/components/pisellRecordBoard/index.js

@@ -0,0 +1,28 @@
+import PisellRecordBoard_default from "./PisellRecordBoard.js";
+import { useRecordBoardContext } from "./hooks/useRecordBoardContext.js";
+import Grid_default from "./layouts/GridLayout/Grid.js";
+import GridLayout_default from "./layouts/GridLayout/index.js";
+import CardList_default from "./layouts/CardLayout/CardList.js";
+import CardLayout_default from "./layouts/CardLayout/index.js";
+import ToolBar_default from "./shellFrame/ToolBar/index.js";
+import BatchActionBar_default from "./shellFrame/BatchActionBar/index.js";
+import Pagination_default from "./shellFrame/Pagination/index.js";
+import Search_default from "./shellFrame/Search/index.js";
+import shellFrame_default from "./shellFrame/index.js";
+
+//#region src/components/pisellRecordBoard/index.tsx
+const PisellRecordBoard = PisellRecordBoard_default;
+PisellRecordBoard.ShellFrame = shellFrame_default;
+PisellRecordBoard.GridLayout = GridLayout_default;
+PisellRecordBoard.CardLayout = CardLayout_default;
+PisellRecordBoard.Search = Search_default;
+PisellRecordBoard.ToolBar = ToolBar_default;
+PisellRecordBoard.Pagination = Pagination_default;
+PisellRecordBoard.Grid = Grid_default;
+PisellRecordBoard.CardList = CardList_default;
+PisellRecordBoard.BatchActionBar = BatchActionBar_default;
+PisellRecordBoard.useRecordBoardContext = useRecordBoardContext;
+var pisellRecordBoard_default = PisellRecordBoard;
+
+//#endregion
+export { pisellRecordBoard_default as default };

package/es/components/pisellRecordBoard/layouts/CardLayout/CardList.d.ts

@@ -0,0 +1,15 @@
+import { RecordBoardContextValue } from "../../types.js";
+import React from "react";
+
+//#region src/components/pisellRecordBoard/layouts/CardLayout/CardList.d.ts
+interface RecordBoardCardListProps extends Partial<Pick<RecordBoardContextValue, 'data' | 'loading'>> {
+  className?: string;
+  style?: React.CSSProperties;
+  render?: (ctx: RecordBoardContextValue) => React.ReactNode;
+}
+/**
+ * Card 布局下的数据视图：从 context 取 data / loading。
+ */
+declare const RecordBoardCardList: React.FC<RecordBoardCardListProps>;
+//#endregion
+export { RecordBoardCardList };