@pisell/materials 6.11.7 → 6.11.9

package/lib/components/pisellRecordBoard/utils/recordBoardColumns.js

@@ -0,0 +1,305 @@
+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/utils/recordBoardColumns.tsx
+var recordBoardColumns_exports = {};
+__export(recordBoardColumns_exports, {
+  deriveFilterFromColumns: () => deriveFilterFromColumns,
+  deriveSortFromColumns: () => deriveSortFromColumns,
+  getRecordBoardColumnKey: () => getRecordBoardColumnKey,
+  processColumnsForGrid: () => processColumnsForGrid
+});
+module.exports = __toCommonJS(recordBoardColumns_exports);
+var import_react = __toESM(require("react"));
+var import_pisellSingleLineText = require("../../pisellSingleLineText");
+var import_pisellLongText = require("../../pisellLongText");
+var import_pisellEmail = require("../../pisellEmail");
+var import_pisellPhone = require("../../pisellPhone");
+var import_pisellUrl = require("../../pisellUrl");
+var import_pisellNumber = require("../../pisellNumber");
+var import_pisellCurrency = require("../../pisellCurrency");
+var import_pisellPercent = require("../../pisellPercent");
+var import_pisellRating = require("../../pisellRating");
+var import_pisellSingleSelect = require("../../pisellSingleSelect");
+var import_pisellMultipleSelect = require("../../pisellMultipleSelect");
+var import_pisellDateTimeDisplay = require("../../pisellDateTimeDisplay");
+var FIELD_TYPE_TO_READ_COMPONENT = {
+  singleLineText: import_pisellSingleLineText.PisellSingleLineText,
+  longText: import_pisellLongText.PisellLongText,
+  email: import_pisellEmail.PisellEmail,
+  phone: import_pisellPhone.PisellPhone,
+  url: import_pisellUrl.PisellUrl,
+  number: import_pisellNumber.PisellNumber,
+  currency: import_pisellCurrency.PisellCurrency,
+  percent: import_pisellPercent.PisellPercent,
+  rating: import_pisellRating.PisellRating,
+  singleSelect: import_pisellSingleSelect.PisellSingleSelect,
+  multipleSelect: import_pisellMultipleSelect.PisellMultipleSelect,
+  dateTime: import_pisellDateTimeDisplay.PisellDateTimeDisplay
+};
+var FIELD_TYPE_TO_SORT_OPTIONS_DEFAULT = {
+  singleLineText: { type: "string" },
+  longText: { type: "string" },
+  email: { type: "string" },
+  phone: { type: "string" },
+  url: { type: "string" },
+  number: { type: "number" },
+  currency: { type: "number" },
+  percent: { type: "number" },
+  rating: { type: "number" },
+  singleSelect: { type: "option" },
+  multipleSelect: { type: "option" },
+  dateTime: { type: "date" }
+};
+function getSortOptionForFieldType(fieldType) {
+  const Com = FIELD_TYPE_TO_READ_COMPONENT[fieldType];
+  const fromComponent = Com && Com.SortOptions;
+  const fallback = FIELD_TYPE_TO_SORT_OPTIONS_DEFAULT[fieldType];
+  const opts = fromComponent ?? fallback;
+  return opts ? { ...fallback, ...opts } : null;
+}
+var FIELD_TYPE_TO_FILTER_TYPE = {
+  singleLineText: "input",
+  longText: "input",
+  email: "input",
+  phone: "input",
+  url: "input",
+  number: "input",
+  currency: "input",
+  percent: "input",
+  rating: "single",
+  singleSelect: "single",
+  multipleSelect: "single",
+  dateTime: "rangePickerNew"
+};
+function getColumnKey(column) {
+  const key = column.key ?? (Array.isArray(column.dataIndex) ? column.dataIndex.join(".") : column.dataIndex);
+  return typeof key === "string" ? key : "";
+}
+function getRecordBoardColumnKey(column) {
+  return getColumnKey(column);
+}
+function getColumnLabel(column) {
+  const title = column.title;
+  if (typeof title === "string") return title;
+  return getColumnKey(column) || "";
+}
+function normalizeOptions(list) {
+  if (!Array.isArray(list)) return [];
+  return list.map(
+    (item) => item && typeof item === "object" && "label" in item && "value" in item ? { label: String(item.label), value: item.value } : { label: String(item), value: item }
+  );
+}
+function AsyncOptionsReadCell({
+  getOptions,
+  value,
+  fieldType,
+  fieldProps
+}) {
+  const [options, setOptions] = (0, import_react.useState)([]);
+  const Com = FIELD_TYPE_TO_READ_COMPONENT[fieldType];
+  (0, import_react.useEffect)(() => {
+    const result = getOptions();
+    const resolved = Promise.resolve(result);
+    resolved.then((list) => setOptions(normalizeOptions(list)));
+  }, [getOptions]);
+  if (Com == null) return value;
+  const common = { value, ...fieldProps, options };
+  if (fieldType === "singleSelect" || fieldType === "multipleSelect") {
+    return /* @__PURE__ */ import_react.default.createElement(Com, { ...common, readOnly: true });
+  }
+  return /* @__PURE__ */ import_react.default.createElement(Com, { ...common, mode: "read" });
+}
+function createReadRender(column, fieldType) {
+  const Com = FIELD_TYPE_TO_READ_COMPONENT[fieldType];
+  const fieldProps = column.fieldProps ?? {};
+  const getOptions = fieldProps.getOptions;
+  const useAsyncOptions = (fieldType === "singleSelect" || fieldType === "multipleSelect") && typeof getOptions === "function";
+  return (value) => {
+    if (Com == null) return value;
+    if (useAsyncOptions) {
+      return /* @__PURE__ */ import_react.default.createElement(
+        AsyncOptionsReadCell,
+        {
+          getOptions,
+          value,
+          fieldType,
+          fieldProps
+        }
+      );
+    }
+    const common = { value, ...fieldProps };
+    if (fieldType === "singleSelect" || fieldType === "multipleSelect") {
+      return /* @__PURE__ */ import_react.default.createElement(Com, { ...common, readOnly: true });
+    }
+    if (fieldType === "dateTime") {
+      return /* @__PURE__ */ import_react.default.createElement(Com, { ...common });
+    }
+    return /* @__PURE__ */ import_react.default.createElement(Com, { ...common, mode: "read" });
+  };
+}
+function processColumnsForGrid(columns) {
+  if (!Array.isArray(columns) || columns.length === 0) return columns ?? [];
+  return columns.map((col) => {
+    const fieldType = col.type;
+    if (!fieldType || !FIELD_TYPE_TO_READ_COMPONENT[fieldType]) {
+      return col;
+    }
+    const existingRender = col.render;
+    const readRender = createReadRender(col, fieldType);
+    return {
+      ...col,
+      render: existingRender ?? ((value, record, index) => readRender(value, record, index))
+    };
+  });
+}
+function columnToFilterItem(column) {
+  const key = getColumnKey(column);
+  const label = getColumnLabel(column);
+  if (!key) return null;
+  if (column.filterable === false) return null;
+  const hasExplicitFilter = column.filter && (column.filter.type != null || column.filter.component);
+  if (column.type && !hasExplicitFilter) {
+    const fieldType = column.type;
+    const filterType2 = FIELD_TYPE_TO_FILTER_TYPE[fieldType];
+    const fieldProps = column.fieldProps ?? {};
+    const hasGetOptions2 = typeof fieldProps.getOptions === "function";
+    const options = fieldType === "singleSelect" || fieldType === "multipleSelect" || fieldType === "rating" ? fieldProps.options ?? (fieldType === "rating" ? [1, 2, 3, 4, 5].map((v) => ({ label: String(v), value: v })) : hasGetOptions2 ? void 0 : []) : void 0;
+    return {
+      type: filterType2,
+      key,
+      name: key,
+      label,
+      props: filterType2 === "single" ? { options: options ?? [], getOptions: fieldProps.getOptions, ...fieldProps } : { placeholder: fieldProps.placeholder ?? `请输入${label}`, ...fieldProps },
+      other: { fieldType, getOptions: fieldProps.getOptions, ...fieldProps }
+    };
+  }
+  if (!column.filter) return null;
+  const f = column.filter;
+  if (f.component) {
+    return {
+      type: "custom",
+      key,
+      name: key,
+      label: f.label ?? label,
+      props: f.props ?? {},
+      other: { component: f.component, ...f.props || {} }
+    };
+  }
+  const filterType = f.type;
+  if (!filterType) return null;
+  const hasGetOptions = typeof f.getOptions === "function";
+  return {
+    type: filterType,
+    key,
+    name: key,
+    label: f.label ?? label,
+    props: f.props ?? (filterType === "single" ? { options: f.options ?? [], getOptions: f.getOptions } : {}),
+    other: filterType === "single" && hasGetOptions ? { getOptions: f.getOptions } : {}
+  };
+}
+function columnToSortItem(column) {
+  const key = getColumnKey(column);
+  const label = getColumnLabel(column);
+  if (!key) return null;
+  if (column.sortable === false) return null;
+  const hasExplicitSort = column.sort && (column.sort.type != null || typeof column.sort.getSortItems === "function");
+  if (column.type && !hasExplicitSort) {
+    const fieldType = column.type;
+    if (!FIELD_TYPE_TO_READ_COMPONENT[fieldType]) return null;
+    const opts = getSortOptionForFieldType(fieldType);
+    if (!opts) return null;
+    const hasGetSortItems2 = "getSortItems" in opts && typeof opts.getSortItems === "function";
+    return {
+      ...hasGetSortItems2 ? {} : { type: "type" in opts ? opts.type : void 0 },
+      ...hasGetSortItems2 && "getSortItems" in opts ? { getSortItems: opts.getSortItems } : {},
+      name: key,
+      label: "label" in opts ? opts.label ?? label : label,
+      isCustom: false,
+      ..."localFilter" in opts && opts.localFilter !== void 0 && { localFilter: opts.localFilter },
+      ..."isHidden" in opts && opts.isHidden !== void 0 && { isHidden: opts.isHidden }
+    };
+  }
+  if (!column.type && column.sortable !== true) return null;
+  if (!column.sort) return null;
+  const s = column.sort;
+  const hasGetSortItems = typeof s.getSortItems === "function";
+  const sortItem = {
+    name: key,
+    label: s.label ?? label,
+    isCustom: false,
+    ...s.isHidden !== void 0 && { isHidden: s.isHidden }
+  };
+  if (hasGetSortItems && s.getSortItems) {
+    sortItem.getSortItems = s.getSortItems;
+  } else if (s.type != null) {
+    sortItem.type = s.type;
+  }
+  return sortItem;
+}
+function deriveSortFromColumns(columns) {
+  if (!Array.isArray(columns) || columns.length === 0) return [];
+  const list = [];
+  for (const col of columns) {
+    const hasType = Boolean(col.type && FIELD_TYPE_TO_READ_COMPONENT[col.type]);
+    if (hasType && col.sortable === false) continue;
+    const item = columnToSortItem(col);
+    if (item) list.push(item);
+  }
+  return list;
+}
+function deriveFilterFromColumns(columns) {
+  var _a, _b;
+  const quickFilter = [];
+  const otherFilter = [];
+  if (!Array.isArray(columns) || columns.length === 0) {
+    return { quickFilter, otherFilter };
+  }
+  for (const col of columns) {
+    const key = getColumnKey(col);
+    if (!key) continue;
+    const hasType = Boolean(col.type && FIELD_TYPE_TO_READ_COMPONENT[col.type]);
+    if (hasType && col.filterable === false) continue;
+    const useQuick = hasType ? ((_a = col.filter) == null ? void 0 : _a.quickFilter) === true : Boolean(col.filterable && ((_b = col.filter) == null ? void 0 : _b.quickFilter));
+    const item = columnToFilterItem(col);
+    if (!item) continue;
+    if (useQuick) {
+      quickFilter.push(item);
+    } else {
+      otherFilter.push(item);
+    }
+  }
+  return { quickFilter, otherFilter };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  deriveFilterFromColumns,
+  deriveSortFromColumns,
+  getRecordBoardColumnKey,
+  processColumnsForGrid
+});

package/lib/components/pisellRecordBoard/utils/withRecordBoard.d.ts

@@ -0,0 +1,9 @@
+import React, { ComponentType } from 'react';
+import type { RecordBoardContextValue, RecordBoardChildComponentProps } from '../types';
+declare type RecordBoardDisplayName = keyof RecordBoardChildComponentProps;
+/**
+ * 为 RecordBoard 下的子组件注入 context，并合并 childComponentProps[displayName]。
+ * 用于 Search / ToolBar / Pagination / Grid / CardList 等「被接管」的通用组件封装。
+ */
+declare function withRecordBoard<P extends object, R = any>(WrappedComponent: ComponentType<P & RecordBoardContextValue>, displayName: RecordBoardDisplayName): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<R>>;
+export default withRecordBoard;

package/lib/components/pisellRecordBoard/utils/withRecordBoard.js

@@ -0,0 +1,49 @@
+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/utils/withRecordBoard.tsx
+var withRecordBoard_exports = {};
+__export(withRecordBoard_exports, {
+  default: () => withRecordBoard_default
+});
+module.exports = __toCommonJS(withRecordBoard_exports);
+var import_react = __toESM(require("react"));
+var import_useRecordBoardContext = require("../hooks/useRecordBoardContext");
+function withRecordBoard(WrappedComponent, displayName) {
+  const WithRecordBoardComponent = (0, import_react.forwardRef)((props, ref) => {
+    const recordBoardContext = (0, import_useRecordBoardContext.useRecordBoardContext)({ displayName });
+    const mergedProps = {
+      ...recordBoardContext,
+      ...props
+    };
+    return /* @__PURE__ */ import_react.default.createElement(WrappedComponent, { ref, ...mergedProps });
+  });
+  WithRecordBoardComponent.displayName = `WithRecordBoard(${displayName})`;
+  return WithRecordBoardComponent;
+}
+var withRecordBoard_default = withRecordBoard;

package/lib/components/pisellRow/index.d.ts

@@ -18,5 +18,5 @@ export interface PisellRowProps extends React.DetailedHTMLProps<React.HTMLAttrib
  * @Author: zhiwei.Wang
  * @Date: 2024-08-16 10:38
  */
-declare const PisellRow: (props: PisellRowProps) => React.JSX.Element;
+declare const PisellRow: (props: PisellRowProps) => JSX.Element;
 export default PisellRow;

package/lib/components/pisellShellFrame/PisellShellFrame.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { PisellShellFrameProps } from './types';
+import './PisellShellFrame.less';
+/**
+ * PisellShellFrame：通用壳层布局组件。
+ * 支持通过 config 控制各区域显隐，不同展示类型（表格/看板/日历/楼层图等）复用同一壳层。
+ *
+ * - 顶部：标题区（标题/副标题/辅助信息）、工具区（Toolbar）、统计区（Statistic List，可选折叠）
+ * - 中间：滚动承载（可选）+ Layout 插槽（children）
+ * - 底部：批量操作条（按选中状态出现）、状态提示区（加载/错误/同步提示等）
+ */
+export declare const PisellShellFrame: React.FC<PisellShellFrameProps>;
+export default PisellShellFrame;

package/lib/components/pisellShellFrame/PisellShellFrame.js

@@ -0,0 +1,113 @@
+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/pisellShellFrame/PisellShellFrame.tsx
+var PisellShellFrame_exports = {};
+__export(PisellShellFrame_exports, {
+  PisellShellFrame: () => PisellShellFrame,
+  default: () => PisellShellFrame_default
+});
+module.exports = __toCommonJS(PisellShellFrame_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_locales = require("../../locales");
+var import_PisellShellFrame = require("./PisellShellFrame.less");
+var defaultConfig = {
+  showTitle: false,
+  showToolbar: false,
+  showStatistic: false,
+  statisticCollapsible: false,
+  scroll: false,
+  showBatchActionBar: false,
+  showStatusArea: false
+};
+var PisellShellFrame = (props) => {
+  const {
+    className,
+    style,
+    config: configProp,
+    title,
+    subtitle,
+    titleExtra,
+    toolbar,
+    statisticList,
+    children,
+    batchActionBar,
+    statusArea
+  } = props;
+  const config = { ...defaultConfig, ...configProp };
+  const [statisticCollapsed, setStatisticCollapsed] = (0, import_react.useState)(false);
+  const hasTitle = config.showTitle && (title != null || subtitle != null || titleExtra != null);
+  const hasToolbar = config.showToolbar && toolbar != null;
+  const hasStatistic = config.showStatistic && statisticList != null;
+  const hasBatchBar = config.showBatchActionBar && batchActionBar != null;
+  const hasStatus = config.showStatusArea && statusArea != null;
+  const scrollConfig = config.scroll;
+  const useScroll = scrollConfig === true || typeof scrollConfig === "object" && scrollConfig != null;
+  const scrollOpts = typeof scrollConfig === "object" && scrollConfig != null ? scrollConfig : null;
+  const scrollStyle = scrollOpts == null ? void 0 : scrollOpts.style;
+  const scrollClassName = scrollOpts == null ? void 0 : scrollOpts.className;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: `pisell-shell-frame ${className ?? ""}`.trim(),
+      style,
+      "data-shell-frame": true
+    },
+    /* @__PURE__ */ import_react.default.createElement("header", { className: "pisell-shell-frame-header" }, hasTitle && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-shell-frame-title" }, /* @__PURE__ */ import_react.default.createElement("span", null, title != null && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-shell-frame-title-main" }, title), subtitle != null && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-shell-frame-title-sub" }, subtitle)), titleExtra != null && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-shell-frame-title-extra" }, titleExtra)), hasToolbar && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-shell-frame-toolbar" }, toolbar), hasStatistic && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-shell-frame-statistic" }, config.statisticCollapsible ? /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Collapse,
+      {
+        ghost: true,
+        activeKey: statisticCollapsed ? [] : ["statistic"],
+        onChange: (keys) => setStatisticCollapsed(keys.length === 0),
+        items: [
+          {
+            key: "statistic",
+            label: /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-shell-frame-statistic-collapse-header" }, statisticCollapsed ? (0, import_locales.getText)("shell-frame-statistic-expand") : (0, import_locales.getText)("shell-frame-statistic-collapse")),
+            children: statisticList
+          }
+        ]
+      }
+    ) : statisticList)),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-shell-frame-body" }, useScroll ? /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `pisell-shell-frame-scroll ${scrollClassName ?? ""}`.trim(),
+        style: scrollStyle
+      },
+      children
+    ) : children),
+    (hasBatchBar || hasStatus) && /* @__PURE__ */ import_react.default.createElement("footer", { className: "pisell-shell-frame-footer" }, hasBatchBar && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-shell-frame-batch-bar" }, batchActionBar), hasStatus && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-shell-frame-status" }, statusArea))
+  );
+};
+PisellShellFrame.displayName = "PisellShellFrame";
+var PisellShellFrame_default = PisellShellFrame;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellShellFrame
+});

package/lib/components/pisellShellFrame/PisellShellFrame.less

@@ -0,0 +1,78 @@
+// PisellShellFrame 壳层布局：顶部标题/工具/统计、中间滚动+插槽、底部批量条/状态区
+.pisell-shell-frame {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+
+  &-header {
+    flex-shrink: 0;
+  }
+
+  &-title {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 8px;
+    .pisell-shell-frame-title-main {
+      font-size: 16px;
+      font-weight: 600;
+    }
+    .pisell-shell-frame-title-sub {
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.45);
+      margin-left: 8px;
+    }
+    .pisell-shell-frame-title-extra {
+      flex-shrink: 0;
+    }
+  }
+
+  &-toolbar {
+    margin-bottom: 8px;
+  }
+
+  &-statistic {
+    margin-bottom: 8px;
+    &-collapse-header {
+      cursor: pointer;
+      user-select: none;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.45);
+    }
+  }
+
+  &-body {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-scroll {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  &-footer {
+    flex-shrink: 0;
+  }
+
+  &-batch-bar {
+    margin-top: 8px;
+    /* 无内容时不占位，避免多余 margin */
+    &:empty {
+      margin-top: 0;
+      display: none;
+    }
+  }
+
+  &-status {
+    margin-top: 8px;
+  }
+}

package/lib/components/pisellShellFrame/PisellShellFrame.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellShellFrame } from './PisellShellFrame';
+declare const meta: Meta<typeof PisellShellFrame>;
+export default meta;
+declare type Story = StoryObj<typeof PisellShellFrame>;
+/** 仅标题区 */
+export declare const TitleOnly: Story;
+/** 标题 + 工具区 */
+export declare const WithToolbar: Story;
+/** 标题 + 统计区（可折叠，国际化） */
+export declare const WithStatisticCollapsible: Story;
+/** 中间滚动 + 底部批量条 + 状态区 */
+export declare const WithScrollBatchAndStatus: Story;
+/** 全区域展示（默认展开统计） */
+export declare const Full: Story;