@pisell/materials 3.3.85 → 3.3.87

package/lib/components/pisellRecordBoard/layouts/GridLayout/Grid.less

@@ -0,0 +1,100 @@
+// RecordBoard Grid 表格样式：默认单元格（表头+表体）padding 8px 16px
+// 项目内 ant 组件 prefixCls 为 pisell-lowcode，故表格类名为 .pisell-lowcode-table-*
+.pisell-lowcode-record-board-grid {
+  .pisell-lowcode-table-thead .pisell-lowcode-table-cell,
+  .pisell-lowcode-table-tbody .pisell-lowcode-table-cell {
+    padding: 8px 16px;
+  }
+}
+
+// 同值列折叠时的总结区样式（参考 Figma 12840-86869）
+.pisell-record-board-uniform-summary {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 32px;
+  min-height: 44px;
+  padding: 12px 24px;
+  background: #f2f4f7;
+  border-bottom: 1px solid #eaecf0;
+  border-radius: 8px 8px 0 0;
+
+  .pisell-record-board-uniform-summary-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+  }
+
+  .pisell-record-board-uniform-summary-label {
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 18px;
+    color: #475467;
+    white-space: nowrap;
+  }
+
+  .pisell-record-board-uniform-summary-value {
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 18px;
+    color: #475467;
+    white-space: nowrap;
+  }
+}
+
+// 纯 CSS 占满高度：滚动发生在 .pisell-record-board-scroll-body，表头 sticky 固定；高度传到 table
+.pisell-record-board-scroll-body .pisell-lowcode-record-board-grid {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+
+  .pisell-lowcode-table-thead .pisell-lowcode-table-cell {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: var(--ant-color-bg-container, #ffffff);
+  }
+
+  /*
+   * 根本原因：表头所有单元格统一用了 z-index: 1，横向滚动时后面的列（非固定列）与固定列同层叠，
+   * 非固定列会盖住固定列。解决：仅对「固定列」提高 z-index。
+   * antd/rc-table 会给所有 fixed 列（含多选列）的 th/td 加上 .*-table-cell-fix-left，
+   * 用该类选择器即可覆盖任意数量的固定列，无需按 nth-child 逐个写。
+   */
+
+  .pisell-lowcode-table-thead .pisell-lowcode-table-cell-fix-left {
+    z-index: 2 !important;
+    background: var(--ant-color-bg-container, #ffffff) !important;
+  }
+
+  // 让 antd Table 外层占满，使 scroll.y 生效且高度链不断
+  .pisell-lowcode-table-wrapper {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .pisell-lowcode-table-wrapper .pisell-lowcode-table {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .pisell-lowcode-table-wrapper .pisell-lowcode-table .pisell-lowcode-table-container {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+// 行状态样式示例（如 grid.rowClassName 返回 'pisell-record-board-row-cancelled'）
+.pisell-record-board-row-cancelled {
+  background: #fff1f0;
+}

package/lib/components/pisellRecordBoard/layouts/GridLayout/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import RecordBoardGridView from './Grid';
+/**
+ * Grid 布局：仅内容区 = 表格（不含分页）。
+ * 工具栏、多选操作栏、分页由 Shell Frame 提供，使用时用 ShellFrame 包裹：
+ * <PisellRecordBoard.ShellFrame><PisellRecordBoard.GridLayout /></PisellRecordBoard.ShellFrame>
+ */
+declare const GridLayout: React.FC<{
+    className?: string;
+    style?: React.CSSProperties;
+}>;
+export default GridLayout;
+export { RecordBoardGridView as GridLayoutGrid };

package/lib/components/pisellRecordBoard/layouts/GridLayout/index.js

@@ -0,0 +1,46 @@
+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/layouts/GridLayout/index.tsx
+var GridLayout_exports = {};
+__export(GridLayout_exports, {
+  GridLayoutGrid: () => import_Grid.default,
+  default: () => GridLayout_default
+});
+module.exports = __toCommonJS(GridLayout_exports);
+var import_react = __toESM(require("react"));
+var import_Grid = __toESM(require("./Grid"));
+var GridLayout = ({ className, style }) => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { className, style, "data-layout": "grid" }, /* @__PURE__ */ import_react.default.createElement(import_Grid.default, null));
+};
+GridLayout.displayName = "RecordBoard.GridLayout";
+var GridLayout_default = GridLayout;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GridLayoutGrid
+});

package/lib/components/pisellRecordBoard/shellFrame/BatchActionBar/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { PisellBatchActionBarProps } from '../../../pisellBatchActionBar';
+/**
+ * RecordBoard 下的多选操作栏：从 context 取选中态与数据，渲染 PisellBatchActionBar。
+ * 仅在有选中项时展示；全选/反选/清空基于当前页 data。
+ */
+declare const RecordBoardBatchActionBar: React.FC<Partial<PisellBatchActionBarProps>>;
+export default RecordBoardBatchActionBar;

package/lib/components/pisellRecordBoard/shellFrame/BatchActionBar/index.js

@@ -0,0 +1,108 @@
+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/shellFrame/BatchActionBar/index.tsx
+var BatchActionBar_exports = {};
+__export(BatchActionBar_exports, {
+  default: () => BatchActionBar_default
+});
+module.exports = __toCommonJS(BatchActionBar_exports);
+var import_react = __toESM(require("react"));
+var import_pisellBatchActionBar = __toESM(require("../../../pisellBatchActionBar"));
+var import_useRecordBoardContext = require("../../hooks/useRecordBoardContext");
+function getRowKey(record, rowKey) {
+  if (typeof rowKey === "function") {
+    return rowKey(record);
+  }
+  if (typeof rowKey === "string" && record != null && rowKey in record) {
+    return record[rowKey];
+  }
+  return (record == null ? void 0 : record.id) ?? (record == null ? void 0 : record.key) ?? record;
+}
+var RecordBoardBatchActionBar = (props) => {
+  var _a;
+  const ctx = (0, import_useRecordBoardContext.useRecordBoardContext)({ displayName: "batchActionBar" });
+  const {
+    data,
+    total,
+    selectedKeys,
+    selectedRows,
+    onSelectionChange,
+    rowKey: rowKeyFromContext
+  } = ctx;
+  const rowKey = rowKeyFromContext ?? "id";
+  const currentPageKeys = (0, import_react.useMemo)(
+    () => data.map((record) => getRowKey(record, rowKey)),
+    [data, rowKey]
+  );
+  const currentPageTotal = data.length;
+  const onSelectAll = (0, import_react.useCallback)(() => {
+    onSelectionChange(currentPageKeys, data);
+  }, [currentPageKeys, data, onSelectionChange]);
+  const onClear = (0, import_react.useCallback)(() => {
+    onSelectionChange([], []);
+  }, [onSelectionChange]);
+  const onInvert = (0, import_react.useCallback)(() => {
+    const currentSet = new Set(currentPageKeys);
+    const selectedSet = new Set(selectedKeys);
+    const nextKeys = [];
+    const nextRows = [];
+    currentPageKeys.forEach((k, i) => {
+      if (!selectedSet.has(k)) {
+        nextKeys.push(k);
+        nextRows.push(data[i]);
+      }
+    });
+    const restSelectedKeys = selectedKeys.filter((k) => !currentSet.has(k));
+    const restSelectedRows = selectedRows.filter(
+      (_, i) => !currentSet.has(selectedKeys[i])
+    );
+    onSelectionChange(
+      [...restSelectedKeys, ...nextKeys],
+      [...restSelectedRows, ...nextRows]
+    );
+  }, [currentPageKeys, data, selectedKeys, selectedRows, onSelectionChange]);
+  const barProps = {
+    selectedKeys,
+    selectedRows,
+    total,
+    currentPageTotal,
+    currentPageKeys,
+    onSelectAll,
+    onClear,
+    onInvert,
+    ...((_a = ctx.childComponentProps) == null ? void 0 : _a.batchActionBar) ?? {},
+    ...props
+  };
+  if (selectedKeys.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react.default.createElement(import_pisellBatchActionBar.default, { ...barProps });
+};
+RecordBoardBatchActionBar.displayName = "RecordBoard.BatchActionBar";
+var BatchActionBar_default = RecordBoardBatchActionBar;

package/lib/components/pisellRecordBoard/shellFrame/ColumnSetting/ColumnSettingPopover.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 列显示隐藏弹层内容：显隐切换 + 拖拽排序（参考 table Actions ColumnsSetting PopoverContent）。
+ */
+import React from 'react';
+import type { RecordBoardColumnType } from '../../types';
+export interface ColumnSettingPopoverProps {
+    columns: RecordBoardColumnType[];
+    columnVisibility: Record<string, boolean>;
+    onColumnVisibilityChange: (visibility: Record<string, boolean>) => void;
+    /** 列 key 顺序（拖拽排序后持久化）；未传则按 columns 顺序 */
+    columnOrder?: string[] | null;
+    onColumnOrderChange?: (columnKeys: string[]) => void;
+}
+declare const ColumnSettingPopover: React.FC<ColumnSettingPopoverProps>;
+export default ColumnSettingPopover;

package/lib/components/pisellRecordBoard/shellFrame/ColumnSetting/ColumnSettingPopover.js

@@ -0,0 +1,173 @@
+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/shellFrame/ColumnSetting/ColumnSettingPopover.tsx
+var ColumnSettingPopover_exports = {};
+__export(ColumnSettingPopover_exports, {
+  default: () => ColumnSettingPopover_default
+});
+module.exports = __toCommonJS(ColumnSettingPopover_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_DotsSix = __toESM(require("@pisell/icon/es/DotsSix"));
+var import_icons = require("@ant-design/icons");
+var import_locales = require("../../../../locales");
+var import_DragSortList = __toESM(require("../../../DragSortList"));
+var import_recordBoardColumns = require("../../utils/recordBoardColumns");
+var prefix = "pisell-lowcode-";
+function getColumnTitle(column) {
+  const title = column.title;
+  if (typeof title === "string") return title;
+  return (0, import_recordBoardColumns.getRecordBoardColumnKey)(column) || "";
+}
+var ColumnSettingPopover = ({
+  columns,
+  columnVisibility,
+  onColumnVisibilityChange,
+  columnOrder,
+  onColumnOrderChange
+}) => {
+  const orderedColumns = (0, import_react.useMemo)(() => {
+    if (!Array.isArray(columnOrder) || columnOrder.length === 0) return columns;
+    const keyToCol = new Map(
+      columns.map((c) => [(0, import_recordBoardColumns.getRecordBoardColumnKey)(c), c])
+    );
+    const result = [];
+    for (const key of columnOrder) {
+      const col = keyToCol.get(key);
+      if (col) result.push(col);
+    }
+    columns.forEach((col) => {
+      const key = (0, import_recordBoardColumns.getRecordBoardColumnKey)(col);
+      if (!columnOrder.includes(key)) result.push(col);
+    });
+    return result;
+  }, [columns, columnOrder]);
+  const handleToggle = (colKey, isShow) => {
+    onColumnVisibilityChange({ [colKey]: isShow });
+  };
+  const handleOrderChange = (list) => {
+    onColumnOrderChange == null ? void 0 : onColumnOrderChange(
+      list.map((c) => (0, import_recordBoardColumns.getRecordBoardColumnKey)(c)).filter(Boolean)
+    );
+  };
+  const listContent = /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}table-action-column-content` }, typeof onColumnOrderChange === "function" ? /* @__PURE__ */ import_react.default.createElement(
+    import_DragSortList.default,
+    {
+      list: orderedColumns,
+      rowKey: (col) => (0, import_recordBoardColumns.getRecordBoardColumnKey)(col) || "",
+      onChange: handleOrderChange
+    },
+    ({
+      item: col,
+      index,
+      style,
+      props,
+      attributes,
+      setActivatorNodeRef,
+      listeners
+    }) => {
+      const colKey = (0, import_recordBoardColumns.getRecordBoardColumnKey)(col);
+      const isShow = columnVisibility[colKey] !== false;
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          key: colKey,
+          ...attributes,
+          ref: props.ref,
+          style,
+          className: `${prefix}table-action-column-drag-item`
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_DotsSix.default,
+          {
+            ref: setActivatorNodeRef,
+            ...listeners,
+            style: { touchAction: "none" },
+            className: `${prefix}table-action-column-drag-bar`
+          }
+        ),
+        /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}table-action-column-drag-item-right` }, /* @__PURE__ */ import_react.default.createElement(
+          "span",
+          {
+            className: (0, import_classnames.default)(
+              `${prefix}table-action-column-drag-item-right-text`,
+              {
+                [`${prefix}table-action-column-drag-item-right-text-hidden`]: !isShow
+              }
+            )
+          },
+          getColumnTitle(col)
+        ), /* @__PURE__ */ import_react.default.createElement(
+          "span",
+          {
+            className: `${prefix}table-action-column-drag-item-right-icon-wrap`,
+            onClick: () => handleToggle(colKey, !isShow),
+            role: "button",
+            "aria-label": isShow ? "hide" : "show"
+          },
+          isShow ? /* @__PURE__ */ import_react.default.createElement(import_icons.EyeOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.EyeInvisibleOutlined, null)
+        ))
+      );
+    }
+  ) : orderedColumns.map((col) => {
+    const colKey = (0, import_recordBoardColumns.getRecordBoardColumnKey)(col);
+    const isShow = columnVisibility[colKey] !== false;
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: colKey,
+        className: `${prefix}table-action-column-drag-item`,
+        style: { cursor: "default" }
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}table-action-column-drag-item-right` }, /* @__PURE__ */ import_react.default.createElement(
+        "span",
+        {
+          className: (0, import_classnames.default)(
+            `${prefix}table-action-column-drag-item-right-text`,
+            {
+              [`${prefix}table-action-column-drag-item-right-text-hidden`]: !isShow
+            }
+          )
+        },
+        getColumnTitle(col)
+      ), /* @__PURE__ */ import_react.default.createElement(
+        "span",
+        {
+          className: `${prefix}table-action-column-drag-item-right-icon-wrap`,
+          onClick: () => handleToggle(colKey, !isShow),
+          role: "button",
+          "aria-label": isShow ? "hide" : "show"
+        },
+        isShow ? /* @__PURE__ */ import_react.default.createElement(import_icons.EyeOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.EyeInvisibleOutlined, null)
+      ))
+    );
+  }));
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}table-action-column-popover-content-wrap` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}table-action-column-header` }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}table-action-column-header-title` }, (0, import_locales.getText)("table-action-column-title"))), listContent);
+};
+var ColumnSettingPopover_default = ColumnSettingPopover;

package/lib/components/pisellRecordBoard/shellFrame/ColumnSetting/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * RecordBoard 列显示隐藏设置（仅控制表格列展示，不控制 filter/sort）。
+ * 参考 table Actions ColumnsSetting，仅保留显隐切换，无拖拽排序。
+ */
+import React from 'react';
+import './index.less';
+declare const RecordBoardColumnSetting: React.FC;
+export default RecordBoardColumnSetting;

package/lib/components/pisellRecordBoard/shellFrame/ColumnSetting/index.js

@@ -0,0 +1,100 @@
+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/shellFrame/ColumnSetting/index.tsx
+var ColumnSetting_exports = {};
+__export(ColumnSetting_exports, {
+  default: () => ColumnSetting_default
+});
+module.exports = __toCommonJS(ColumnSetting_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_useRecordBoardContext = require("../../hooks/useRecordBoardContext");
+var import_recordBoardColumns = require("../../utils/recordBoardColumns");
+var import_ColumnSettingPopover = __toESM(require("./ColumnSettingPopover"));
+var import_index = require("./index.less");
+var RecordBoardColumnSetting = () => {
+  var _a, _b;
+  const ctx = (0, import_useRecordBoardContext.useRecordBoardContext)({ displayName: "columnSetting" });
+  const gridColumns = (_b = (_a = ctx.childComponentProps) == null ? void 0 : _a.grid) == null ? void 0 : _b.columns;
+  const columnVisibility = ctx.columnVisibility ?? {};
+  const onColumnVisibilityChange = ctx.onColumnVisibilityChange;
+  const columnOrder = ctx.columnOrder ?? null;
+  const onColumnOrderChange = ctx.onColumnOrderChange;
+  const content = (0, import_react.useMemo)(() => {
+    if (!Array.isArray(gridColumns) || gridColumns.length === 0 || typeof onColumnVisibilityChange !== "function") {
+      return null;
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_ColumnSettingPopover.default,
+      {
+        columns: gridColumns,
+        columnVisibility,
+        onColumnVisibilityChange,
+        columnOrder,
+        onColumnOrderChange
+      }
+    );
+  }, [gridColumns, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange]);
+  const hasHiddenColumns = (0, import_react.useMemo)(() => {
+    if (!Array.isArray(gridColumns)) return false;
+    return gridColumns.some(
+      (col) => columnVisibility[(0, import_recordBoardColumns.getRecordBoardColumnKey)(col)] === false
+    );
+  }, [gridColumns, columnVisibility]);
+  if (!content) return null;
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Popover,
+    {
+      content,
+      arrow: false,
+      placement: "bottomRight",
+      trigger: "click"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: "record-board-toolbar-column-setting-btn",
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: 32,
+          height: 32,
+          cursor: "pointer",
+          borderRadius: 6,
+          color: hasHiddenColumns ? "var(--color-primary, #1890ff)" : void 0
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_icons.EyeOutlined, { style: { fontSize: 18 } })
+    )
+  );
+};
+RecordBoardColumnSetting.displayName = "RecordBoard.ColumnSetting";
+var ColumnSetting_default = RecordBoardColumnSetting;

package/lib/components/pisellRecordBoard/shellFrame/ColumnSetting/index.less

@@ -0,0 +1,2 @@
+/* 复用 table ColumnsSetting 弹层样式，类名与 PopoverContent 一致 */
+@import '../../../table/Actions/component/ColumnsSetting/PopoverContent.less';

package/lib/components/pisellRecordBoard/shellFrame/Pagination/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './index.less';
+import type { RecordBoardContextValue } from '../../types';
+export interface RecordBoardPaginationProps extends Partial<Pick<RecordBoardContextValue, 'pagination' | 'total' | 'onPageChange' | 'loading'>> {
+    className?: string;
+    style?: React.CSSProperties;
+    render?: (ctx: RecordBoardContextValue) => React.ReactNode;
+}
+/**
+ * RecordBoard 下的分页：接入 packages/materials 的 Pagination，从 context 取 pagination / total / onPageChange；可透传 childComponentProps.pagination。
+ * 当 context 中 pagination 缺失时使用默认分页，避免在 Storybook 或未完整注入 context 时报错。
+ */
+declare const RecordBoardPagination: React.FC<RecordBoardPaginationProps>;
+export default RecordBoardPagination;