@pisell/materials 6.11.8 → 6.11.10

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { RecordBoardToolBarProps as ToolBarPropsType } from '../../types';
+import './ToolBarFilter.less';
+/**
+ * RecordBoard 下的工具栏：使用 PisellToolBar。
+ * 左侧默认 PisellFind（inline）；右侧默认 PisellFilter。通过 childComponentProps.toolBar.search / toolBar.filter 为对象时透传对应组件 props，为 false 时不渲染。
+ * 可透传 topLeft、topRight、bottomLeft、bottomRight、tabs。
+ */
+declare const RecordBoardToolBar: React.FC<RecordBoardToolBarProps>;
+export declare type RecordBoardToolBarProps = ToolBarPropsType;
+export default RecordBoardToolBar;

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

@@ -0,0 +1,239 @@
+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/ToolBar/index.tsx
+var ToolBar_exports = {};
+__export(ToolBar_exports, {
+  default: () => ToolBar_default
+});
+module.exports = __toCommonJS(ToolBar_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_SwitchVertical01 = __toESM(require("@pisell/icon/es/SwitchVertical01"));
+var import_ToolBar = __toESM(require("../../../pisellGridPro/ToolBar"));
+var import_pisellFind = require("../../../pisellFind");
+var import_pisellFilter = __toESM(require("../../../pisellFilter"));
+var import_sort = __toESM(require("../../../sort"));
+var import_ToolBarReset = __toESM(require("../ToolBarReset"));
+var import_ToolBarQuickFilter = __toESM(require("../ToolBarQuickFilter"));
+var import_ColumnSetting = __toESM(require("../ColumnSetting"));
+var import_useRecordBoardContext = require("../../hooks/useRecordBoardContext");
+var import_utils = require("@pisell/utils");
+var import_locales = require("../../../../locales");
+var import_ToolBarFilter = require("./ToolBarFilter.less");
+var import_recordBoardColumns = require("../../utils/recordBoardColumns");
+function getSortButtonText() {
+  const key = "pisell2.recordBoard.toolbar.sort";
+  const u = import_utils.locales.getText(key);
+  return u && u !== key ? u : (0, import_locales.getText)(key) || (0, import_locales.getText)("sort-button-text");
+}
+var DEFAULT_SEARCH_FIELD = "keyword";
+var FILTER_PARAMS_FIELD = "filter";
+var SORT_PARAMS_FIELD = "sort";
+function getDefaultFilterValue() {
+  return {
+    quickFilter: [],
+    otherFilter: []
+  };
+}
+var RecordBoardToolBar = (props) => {
+  var _a, _b, _c;
+  const ctx = (0, import_useRecordBoardContext.useRecordBoardContext)({ displayName: "toolBar" });
+  const { searchParams, onSearch } = ctx;
+  const slots = ((_a = ctx.childComponentProps) == null ? void 0 : _a.toolBar) ?? {};
+  const keyword = (searchParams == null ? void 0 : searchParams[DEFAULT_SEARCH_FIELD]) ?? "";
+  const handleSearch = (0, import_react.useCallback)(
+    (value) => {
+      onSearch({ ...searchParams, [DEFAULT_SEARCH_FIELD]: value || void 0 });
+    },
+    [onSearch, searchParams]
+  );
+  const gridColumns = (_c = (_b = ctx.childComponentProps) == null ? void 0 : _b.grid) == null ? void 0 : _c.columns;
+  const derivedFilterFromColumns = (0, import_react.useMemo)(
+    () => Array.isArray(gridColumns) && gridColumns.length > 0 ? (0, import_recordBoardColumns.deriveFilterFromColumns)(gridColumns) : null,
+    [gridColumns]
+  );
+  const derivedSortFromColumnsList = (0, import_react.useMemo)(
+    () => Array.isArray(gridColumns) && gridColumns.length > 0 ? (0, import_recordBoardColumns.deriveSortFromColumns)(gridColumns) : [],
+    [gridColumns]
+  );
+  const searchConfig = slots.search;
+  const hideSearch = searchConfig === false;
+  const searchNode = hideSearch ? null : /* @__PURE__ */ import_react.default.createElement(
+    import_pisellFind.PisellFind,
+    {
+      triggerType: "input",
+      displayType: "inline",
+      showConfirmButton: typeof searchConfig === "object" && searchConfig !== null && "showConfirmButton" in searchConfig ? searchConfig.showConfirmButton : true,
+      value: keyword,
+      onChange: (v) => handleSearch(v),
+      onSearch: handleSearch,
+      ...typeof searchConfig === "object" && searchConfig !== null ? searchConfig : {}
+    }
+  );
+  const quickFilterConfig = slots.quickFilter;
+  const quickFilterList = (0, import_react.useMemo)(() => {
+    if (quickFilterConfig === false) return [];
+    const fromConfig = typeof quickFilterConfig === "object" && quickFilterConfig !== null && Array.isArray(quickFilterConfig.filterList) ? quickFilterConfig.filterList : null;
+    return fromConfig ?? (derivedFilterFromColumns == null ? void 0 : derivedFilterFromColumns.quickFilter) ?? [];
+  }, [quickFilterConfig, derivedFilterFromColumns == null ? void 0 : derivedFilterFromColumns.quickFilter]);
+  const showQuickFilterLeft = quickFilterList.length > 0;
+  const quickFilterNode = showQuickFilterLeft ? /* @__PURE__ */ import_react.default.createElement(
+    import_ToolBarQuickFilter.default,
+    {
+      filterList: quickFilterList,
+      formFiltersPrefix: typeof quickFilterConfig === "object" && quickFilterConfig !== null ? quickFilterConfig.formFiltersPrefix ?? "" : "",
+      size: typeof quickFilterConfig === "object" && quickFilterConfig !== null ? quickFilterConfig.size ?? "large" : "large"
+    }
+  ) : null;
+  const topLeft = /* @__PURE__ */ import_react.default.createElement("div", { className: "record-board-toolbar-top-left" }, quickFilterNode, searchNode ? /* @__PURE__ */ import_react.default.createElement("div", { className: "record-board-toolbar-find-wrap" }, searchNode) : null, slots.topLeft);
+  const sortConfig = slots.sort;
+  const hideSort = sortConfig === false;
+  const sortValue = searchParams == null ? void 0 : searchParams[SORT_PARAMS_FIELD];
+  const handleSortChange = (0, import_react.useCallback)(
+    (val) => {
+      onSearch({ ...searchParams, [SORT_PARAMS_FIELD]: val || void 0 });
+    },
+    [onSearch, searchParams]
+  );
+  const sortList = (0, import_react.useMemo)(() => {
+    const fromConfig = typeof sortConfig === "object" && sortConfig !== null && Array.isArray(sortConfig.list) ? sortConfig.list : null;
+    return fromConfig ?? derivedSortFromColumnsList;
+  }, [sortConfig, derivedSortFromColumnsList]);
+  const sortNode = hideSort ? null : /* @__PURE__ */ import_react.default.createElement(
+    import_sort.default,
+    {
+      ...typeof sortConfig === "object" && sortConfig !== null ? sortConfig : {},
+      list: sortList,
+      value: sortValue,
+      onChange: handleSortChange,
+      placement: "bottomLeft",
+      button: /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Button,
+        {
+          className: "record-board-toolbar-filter-btn",
+          icon: /* @__PURE__ */ import_react.default.createElement(import_SwitchVertical01.default, null),
+          size: "large"
+        },
+        getSortButtonText()
+      )
+    }
+  );
+  const filterConfig = slots.filter;
+  const hideFilter = filterConfig === false;
+  const filterValue = searchParams == null ? void 0 : searchParams[FILTER_PARAMS_FIELD];
+  const hasFilterList = Array.isArray(filterValue == null ? void 0 : filterValue.quickFilter) && filterValue.quickFilter.length > 0 || Array.isArray(filterValue == null ? void 0 : filterValue.otherFilter) && filterValue.otherFilter.length > 0;
+  const hasFilterValues = typeof (filterValue == null ? void 0 : filterValue.values) === "object" && filterValue.values !== null && Object.keys(filterValue.values).length > 0;
+  const hasFilterItems = hasFilterList || hasFilterValues;
+  const defaultFilterFromConfig = typeof filterConfig === "object" && filterConfig !== null && filterConfig.defaultFilterValue ? filterConfig.defaultFilterValue : null;
+  const effectiveFilterValue = (0, import_react.useMemo)(() => {
+    const base = filterValue != null && hasFilterItems ? filterValue : defaultFilterFromConfig ? defaultFilterFromConfig : derivedFilterFromColumns && (derivedFilterFromColumns.quickFilter.length > 0 || derivedFilterFromColumns.otherFilter.length > 0) ? derivedFilterFromColumns : getDefaultFilterValue();
+    const quickFilter = Array.isArray(base.quickFilter) && base.quickFilter.length > 0 ? base.quickFilter : (defaultFilterFromConfig == null ? void 0 : defaultFilterFromConfig.quickFilter) ?? [];
+    let otherFilter = Array.isArray(base.otherFilter) && base.otherFilter.length > 0 ? base.otherFilter : (defaultFilterFromConfig == null ? void 0 : defaultFilterFromConfig.otherFilter) ?? [];
+    if (otherFilter === base.otherFilter && Array.isArray(defaultFilterFromConfig == null ? void 0 : defaultFilterFromConfig.otherFilter) && defaultFilterFromConfig.otherFilter.length > 0) {
+      const configMap = new Map(
+        defaultFilterFromConfig.otherFilter.map((c) => [
+          c.key ?? c.name ?? "",
+          c
+        ])
+      );
+      otherFilter = otherFilter.map((item) => {
+        const key = item.key ?? item.name ?? "";
+        const configItem = configMap.get(key);
+        if (!configItem) return item;
+        return {
+          ...configItem,
+          ...item,
+          other: { ...configItem == null ? void 0 : configItem.other, ...item == null ? void 0 : item.other }
+        };
+      });
+    }
+    return {
+      ...base,
+      quickFilter,
+      otherFilter,
+      values: base.values ?? {}
+    };
+  }, [
+    filterValue,
+    hasFilterItems,
+    defaultFilterFromConfig,
+    derivedFilterFromColumns
+  ]);
+  const filterValueForPisellFilter = (0, import_react.useMemo)(
+    () => ({
+      ...effectiveFilterValue,
+      quickFilter: []
+    }),
+    [effectiveFilterValue]
+  );
+  const handleFilterChange = (0, import_react.useCallback)(
+    (value) => {
+      const currentFilter = searchParams == null ? void 0 : searchParams[FILTER_PARAMS_FIELD];
+      const currentValues = (currentFilter == null ? void 0 : currentFilter.values) ?? {};
+      const incomingValues = (value == null ? void 0 : value.values) ?? {};
+      const nextFilter = {
+        ...value,
+        values: { ...currentValues, ...incomingValues }
+      };
+      onSearch({ ...searchParams, [FILTER_PARAMS_FIELD]: nextFilter });
+    },
+    [onSearch, searchParams]
+  );
+  const filterNode = hideFilter ? null : /* @__PURE__ */ import_react.default.createElement(
+    import_pisellFilter.default,
+    {
+      value: filterValueForPisellFilter,
+      onChange: handleFilterChange,
+      hasForm: true,
+      quickFilterMaxLength: 100,
+      formFiltersPrefix: "",
+      size: "large",
+      buttonClassName: "record-board-toolbar-filter-btn",
+      hiddenQuickFilter: true,
+      placement: "bottomLeft",
+      ...typeof filterConfig === "object" && filterConfig !== null ? filterConfig : {}
+    }
+  );
+  const showColumnSetting = slots.columnSetting !== false && Array.isArray(gridColumns) && gridColumns.length > 0;
+  const topRight = /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, showColumnSetting ? /* @__PURE__ */ import_react.default.createElement(import_ColumnSetting.default, null) : null, sortNode, filterNode, /* @__PURE__ */ import_react.default.createElement(import_ToolBarReset.default, { size: "large" }), slots.topRight);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_ToolBar.default,
+    {
+      className: slots.className,
+      style: slots.style,
+      tabs: slots.tabs,
+      topLeft,
+      topRight,
+      bottomLeft: slots.bottomLeft,
+      bottomRight: slots.bottomRight
+    }
+  );
+};
+RecordBoardToolBar.displayName = "RecordBoard.ToolBar";
+var ToolBar_default = RecordBoardToolBar;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { FilterItemProps } from '../../../filter/types';
+export interface ToolBarQuickFilterProps {
+    /** 快速筛选项列表（与 Filter 的 quickFilter 同结构），不传则从 columns 派生时由父级传入 */
+    filterList?: FilterItemProps[];
+    /** 表单字段前缀，与 PisellFilter 保持一致，默认 '' */
+    formFiltersPrefix?: string;
+    /** 表单项尺寸 */
+    size?: 'small' | 'middle' | 'large';
+}
+/**
+ * RecordBoard 工具栏左侧内联快速筛选：将 quickFilter 直接展示在 ToolBar 左侧，不放入 Filter 弹层。
+ * 与 searchParams.filter 联动，变更写入 searchParams.filter.values 并触发 onSearch。
+ * 启用时建议 ToolBar 对 PisellFilter 传 hiddenQuickFilter: true，仅保留高级筛选在弹层内。
+ */
+declare const ToolBarQuickFilter: React.FC<ToolBarQuickFilterProps>;
+export default ToolBarQuickFilter;

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

@@ -0,0 +1,93 @@
+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/ToolBarQuickFilter/index.tsx
+var ToolBarQuickFilter_exports = {};
+__export(ToolBarQuickFilter_exports, {
+  default: () => ToolBarQuickFilter_default
+});
+module.exports = __toCommonJS(ToolBarQuickFilter_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_QuickFilter = __toESM(require("../../../filter/components/QuickFilter"));
+var import_useRecordBoardContext = require("../../hooks/useRecordBoardContext");
+var FILTER_PARAMS_FIELD = "filter";
+var ToolBarQuickFilter = ({
+  filterList = [],
+  formFiltersPrefix = "",
+  size = "large"
+}) => {
+  const ctx = (0, import_useRecordBoardContext.useRecordBoardContext)();
+  const { searchParams, onSearch } = ctx;
+  const [form] = import_antd.Form.useForm();
+  const filterValue = searchParams == null ? void 0 : searchParams[FILTER_PARAMS_FIELD];
+  const currentValues = (filterValue == null ? void 0 : filterValue.values) ?? {};
+  (0, import_react.useEffect)(() => {
+    const next = typeof currentValues === "object" && currentValues !== null ? currentValues : {};
+    const byNames = filterList.reduce((acc, item) => {
+      const name = item.name ?? item.key;
+      if (name != null) acc[String(name)] = next[String(name)] ?? void 0;
+      return acc;
+    }, {});
+    form.setFieldsValue(byNames);
+  }, [currentValues, form, filterList]);
+  const handleValuesChange = (0, import_react.useCallback)(
+    (_, allValues) => {
+      if (typeof allValues !== "object" || allValues === null) return;
+      const nextFilter = {
+        ...filterValue,
+        values: { ...currentValues, ...allValues }
+      };
+      onSearch({ ...searchParams, [FILTER_PARAMS_FIELD]: nextFilter });
+    },
+    [searchParams, filterValue, currentValues, onSearch]
+  );
+  if (!Array.isArray(filterList) || filterList.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Form,
+    {
+      form,
+      layout: "inline",
+      size,
+      onValuesChange: handleValuesChange,
+      style: { marginRight: 0 },
+      className: "record-board-toolbar-quick-filter-form"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_QuickFilter.default,
+      {
+        value: { quickFilter: filterList },
+        formFiltersPrefix
+      }
+    )
+  );
+};
+ToolBarQuickFilter.displayName = "RecordBoard.ToolBarQuickFilter";
+var ToolBarQuickFilter_default = ToolBarQuickFilter;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import './index.less';
+export interface ToolBarResetProps {
+    /** 按钮尺寸，与 antd Button 一致，默认与筛选按钮对齐为 large */
+    size?: 'small' | 'middle' | 'large';
+    /** 按钮类型 */
+    type?: 'default' | 'primary' | 'link' | 'text';
+    /** 按钮文案，默认使用多语言「重置」 */
+    children?: React.ReactNode;
+}
+/**
+ * RecordBoard 工具栏重置按钮：清空筛选与排序并刷新表格。
+ * 点击后以空 filter.values、清空 sort 调用 onSearch，并调用 onReset（若提供）。
+ */
+declare const ToolBarReset: React.FC<ToolBarResetProps>;
+export default ToolBarReset;

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

@@ -0,0 +1,84 @@
+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/ToolBarReset/index.tsx
+var ToolBarReset_exports = {};
+__export(ToolBarReset_exports, {
+  default: () => ToolBarReset_default
+});
+module.exports = __toCommonJS(ToolBarReset_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_utils = require("@pisell/utils");
+var import_useRecordBoardContext = require("../../hooks/useRecordBoardContext");
+var import_locales = require("../../../../locales");
+var import_index = require("./index.less");
+function getResetButtonText() {
+  const key = "pisell2.recordBoard.toolbar.reset";
+  const u = import_utils.locales.getText(key);
+  return u && u !== key ? u : (0, import_locales.getText)(key) || (0, import_locales.getText)("record-board-toolbar-reset");
+}
+var FILTER_PARAMS_FIELD = "filter";
+var SORT_PARAMS_FIELD = "sort";
+var ToolBarReset = ({
+  size = "large",
+  type = "default",
+  children
+}) => {
+  const defaultResetText = getResetButtonText();
+  const { searchParams, onSearch, onReset } = (0, import_useRecordBoardContext.useRecordBoardContext)();
+  const handleReset = (0, import_react.useCallback)(() => {
+    const currentFilter = searchParams == null ? void 0 : searchParams[FILTER_PARAMS_FIELD];
+    const nextParams = {
+      ...searchParams,
+      [FILTER_PARAMS_FIELD]: {
+        ...currentFilter,
+        quickFilter: [],
+        otherFilter: (currentFilter == null ? void 0 : currentFilter.otherFilter) ?? [],
+        values: {}
+      },
+      [SORT_PARAMS_FIELD]: void 0
+    };
+    onSearch(nextParams);
+    onReset == null ? void 0 : onReset();
+  }, [searchParams, onSearch, onReset]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Button,
+    {
+      className: "record-board-toolbar-reset",
+      type,
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.ReloadOutlined, null),
+      onClick: handleReset,
+      size
+    },
+    children ?? defaultResetText
+  );
+};
+ToolBarReset.displayName = "RecordBoard.ToolBarReset";
+var ToolBarReset_default = ToolBarReset;

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

@@ -0,0 +1,41 @@
+/**
+ * ToolBarReset 按钮样式
+ * 依据 Figma Pisell 2.0 Component Library - Secondary Button (node-id=13629-5167)
+ * - 边框: 1px solid #E5E7EB (neutral-200)
+ * - 圆角: 8px
+ * - 背景: #FFFFFF (neutral-0)
+ * - 文字: 16px Medium, line-height 24px, #374151 (neutral-700)
+ * - 内边距: 12px 20px，高度 50px
+ */
+.record-board-toolbar-reset {
+  &.pisell-lowcode-btn {
+    height: 50px;
+    padding: 12px 20px;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    color: #374151;
+    background-color: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-width: 1px;
+    border-radius: 8px;
+    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+
+    &.pisell-lowcode-btn-lg {
+      height: 50px;
+      padding: 12px 20px;
+      font-size: 16px;
+    }
+
+    &:hover:not(:disabled) {
+      color: #374151;
+      background-color: #f9fafb;
+      border-color: #e5e7eb;
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import RecordBoardToolBar from './ToolBar';
+import RecordBoardBatchActionBar from './BatchActionBar';
+import RecordBoardPagination from './Pagination';
+import RecordBoardSearch from './Search';
+import ToolBarReset from './ToolBarReset';
+import ToolBarQuickFilter from './ToolBarQuickFilter';
+/**
+ * Shell Frame：基于 PisellShellFrame 的 RecordBoard 壳层。
+ * 提供工具栏、多选操作条、分页；与 Layout 同级，包裹在 Layout 外层。
+ * 默认占满父容器高度，内容区可滚动，分页器固定在底部。
+ *
+ * 使用方式：
+ * <PisellRecordBoard>
+ *   <PisellRecordBoard.ShellFrame>
+ *     <PisellRecordBoard.GridLayout />
+ *   </PisellRecordBoard.ShellFrame>
+ * </PisellRecordBoard>
+ */
+declare const RecordBoardShellFrame: React.FC<{
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}>;
+export default RecordBoardShellFrame;
+export { RecordBoardToolBar, RecordBoardBatchActionBar, RecordBoardPagination, RecordBoardSearch, ToolBarReset, ToolBarQuickFilter, };

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

@@ -0,0 +1,137 @@
+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/index.tsx
+var shellFrame_exports = {};
+__export(shellFrame_exports, {
+  RecordBoardBatchActionBar: () => import_BatchActionBar.default,
+  RecordBoardPagination: () => import_Pagination.default,
+  RecordBoardSearch: () => import_Search.default,
+  RecordBoardToolBar: () => import_ToolBar.default,
+  ToolBarQuickFilter: () => import_ToolBarQuickFilter.default,
+  ToolBarReset: () => import_ToolBarReset.default,
+  default: () => shellFrame_default
+});
+module.exports = __toCommonJS(shellFrame_exports);
+var import_react = __toESM(require("react"));
+var import_pisellShellFrame = require("../../pisellShellFrame");
+var import_useRecordBoardContext = require("../hooks/useRecordBoardContext");
+var import_ToolBar = __toESM(require("./ToolBar"));
+var import_BatchActionBar = __toESM(require("./BatchActionBar"));
+var import_Pagination = __toESM(require("./Pagination"));
+var import_Search = __toESM(require("./Search"));
+var import_ToolBarReset = __toESM(require("./ToolBarReset"));
+var import_ToolBarQuickFilter = __toESM(require("./ToolBarQuickFilter"));
+var FILL_HEIGHT_SCROLL_STYLE = {
+  flex: 1,
+  minHeight: 0,
+  overflow: "auto"
+};
+function ScrollAreaMeasurer({
+  children,
+  onHeight,
+  autoCalc
+}) {
+  const ref = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const el = ref.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) onHeight(entry.contentRect.height);
+    });
+    ro.observe(el);
+    onHeight(el.getBoundingClientRect().height);
+    return () => {
+      ro.disconnect();
+      onHeight(null);
+    };
+  }, [onHeight]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref,
+      className: "pisell-record-board-scroll-body",
+      style: {
+        ...FILL_HEIGHT_SCROLL_STYLE,
+        overflow: autoCalc ? "hidden" : "auto"
+      }
+    },
+    children
+  );
+}
+var FILL_HEIGHT_WRAPPER_STYLE = {
+  flex: 1,
+  minHeight: 0,
+  display: "flex",
+  flexDirection: "column"
+};
+var RecordBoardShellFrame = ({ children, className, style }) => {
+  var _a, _b, _c;
+  const ctx = (0, import_useRecordBoardContext.useRecordBoardContext)({ displayName: "RecordBoard.ShellFrame" });
+  const fillHeight = (ctx == null ? void 0 : ctx.fillHeight) === true;
+  const bodyContent = fillHeight ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    ScrollAreaMeasurer,
+    {
+      onHeight: (ctx == null ? void 0 : ctx.setScrollAreaHeight) ?? (() => {
+      }),
+      autoCalc: (_c = (_b = (_a = ctx == null ? void 0 : ctx.childComponentProps) == null ? void 0 : _a.grid) == null ? void 0 : _b.scroll) == null ? void 0 : _c.autoCalc
+    },
+    children
+  ), /* @__PURE__ */ import_react.default.createElement(import_Pagination.default, null)) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children, /* @__PURE__ */ import_react.default.createElement(import_Pagination.default, null));
+  const shellStyle = fillHeight && style ? { ...style, ...FILL_HEIGHT_WRAPPER_STYLE } : fillHeight ? FILL_HEIGHT_WRAPPER_STYLE : style;
+  const wrapper = /* @__PURE__ */ import_react.default.createElement(
+    import_pisellShellFrame.PisellShellFrame,
+    {
+      className,
+      style: shellStyle,
+      config: {
+        showToolbar: true,
+        showBatchActionBar: true
+      },
+      toolbar: /* @__PURE__ */ import_react.default.createElement(import_ToolBar.default, null),
+      batchActionBar: /* @__PURE__ */ import_react.default.createElement(import_BatchActionBar.default, null)
+    },
+    bodyContent
+  );
+  if (fillHeight) {
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: FILL_HEIGHT_WRAPPER_STYLE }, wrapper);
+  }
+  return wrapper;
+};
+RecordBoardShellFrame.displayName = "RecordBoard.ShellFrame";
+var shellFrame_default = RecordBoardShellFrame;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RecordBoardBatchActionBar,
+  RecordBoardPagination,
+  RecordBoardSearch,
+  RecordBoardToolBar,
+  ToolBarQuickFilter,
+  ToolBarReset
+});