@pisell/materials 6.11.42 → 6.11.44

package/es/components/pisellRecordBoard/shellFrame/ToolBar/recordBoardToolBarI18n.js

@@ -0,0 +1,66 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+import { locales as utilsLocales } from '@pisell/utils';
+import { getText } from "../../../../locales";
+import { DEFAULT_RESOURCE_WALL_STATUS_SORT_FIELD_KEYS } from "../ResourceWall/venueWallUtils";
+
+/** 与 Quick Filter 同源：优先 utils，若 utils 返回 key（未命中）则用 materials 再回退 */
+export function getSortButtonText() {
+  var key = 'pisell2.recordBoard.toolbar.sort';
+  var u = utilsLocales.getText(key);
+  return u && u !== key ? u : getText(key) || getText('sort-button-text');
+}
+
+/** 资源墙无状态列派生项时注入：下拉仅「状态 → 空闲优先 / 占用优先」，仍渲染排序按钮 */
+export function buildResourceWallStatusSortFallbackItem(sortConfig) {
+  var extras = _typeof(sortConfig) === 'object' && sortConfig !== null && Array.isArray(sortConfig.resourceWallSortFieldKeys) ? sortConfig.resourceWallSortFieldKeys.map(function (x) {
+    return String(x).trim();
+  }).filter(Boolean) : [];
+  var primaryKey = extras.length > 0 ? extras[0] : DEFAULT_RESOURCE_WALL_STATUS_SORT_FIELD_KEYS[0];
+  return {
+    name: primaryKey,
+    label: getText('pisell2.recordBoard.toolbar.sortStatus'),
+    isCustom: true,
+    getSortItems: function getSortItems() {
+      return [{
+        key: "".concat(primaryKey, ":asc:option"),
+        label: getText('pisell2.recordBoard.toolbar.sortStatusFreeFirst')
+      }, {
+        key: "".concat(primaryKey, ":desc:option"),
+        label: getText('pisell2.recordBoard.toolbar.sortStatusOccupiedFirst')
+      }];
+    }
+  };
+}
+export function getFilterButtonText() {
+  var key = 'pisell2.recordBoard.toolbar.filter';
+  var u = utilsLocales.getText(key);
+  return u && u !== key ? u : getText(key) || getText('table-action-filter-button');
+}
+export function getViewGridLabel() {
+  var key = 'pisell2.recordBoard.toolbar.viewGrid';
+  var u = utilsLocales.getText(key);
+  return u && u !== key ? u : getText(key) || 'Table';
+}
+export function getViewFloorMapLabel() {
+  var key = 'pisell2.recordBoard.toolbar.viewFloorMap';
+  var u = utilsLocales.getText(key);
+  return u && u !== key ? u : getText(key) || 'Floor map';
+}
+export function getViewCalendarLabel() {
+  var key = 'pisell2.recordBoard.toolbar.viewCalendar';
+  var u = utilsLocales.getText(key);
+  return u && u !== key ? u : getText(key) || 'Calendar';
+}
+export function getViewResourceWallLabel() {
+  var key = 'pisell2.recordBoard.toolbar.viewResourceWall';
+  var u = utilsLocales.getText(key);
+  return u && u !== key ? u : getText(key) || 'Wall';
+}
+
+/** 筛选无值时使用的默认筛选项；业务可通过 childComponentProps.toolBar.filter.defaultFilterValue 覆盖 */
+export function getDefaultFilterValue() {
+  return {
+    quickFilter: [],
+    otherFilter: []
+  };
+}

package/es/components/pisellRecordBoard/shellFrame/ToolBar/recordBoardToolbar.less

@@ -34,16 +34,19 @@
 }
 
 /**
- * 两行工具栏：快筛独占首行，Find + 排序/筛选次行（与窄屏设计稿一致）。
- * 用于 ≤768px 视口；或工具栏节点带修饰类 .pisell-record-board-toolbar--narrow-stack（如预约 HUD 侧栏）。
+ * 窄屏 / narrow-stack：顶栏仍为单行——左侧快筛与右侧操作同一行；
+ * 快筛区内按钮组仍可换行（Space wrap / BucketButtonGroup）。
+ * 用于 ≤768px 视口；或工具栏带 `.pisell-record-board-toolbar--narrow-stack`（如预约 HUD）。
  */
-.record-board-toolbar-grid-narrow-two-rows() {
+.record-board-toolbar-grid-narrow-one-row() {
   > .toolbar-row {
     flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
+    flex-wrap: nowrap;
+    /** 左侧快筛多行时，右侧 search / 齿轮与顶缘对齐，不随整坨内容垂直居中 */
+    align-items: flex-start;
     row-gap: 8px;
     column-gap: 8px;
+    min-width: 0;
   }
 
   > .toolbar-row > .toolbar-row-left,
@@ -57,20 +60,31 @@
 
   .record-board-toolbar-quick-filter-slot {
     order: 0;
-    flex: 1 0 100%;
-    width: 100%;
+    flex: 1 1 auto;
+    width: auto;
     max-width: 100%;
     min-width: 0;
   }
 
+  /**
+   * 快筛区在 narrow-stack 模式下允许内部按钮自动换行（HUD 抽屉等窄容器场景）：
+   * - `flex-wrap: wrap` 让多组桶在空间不够时挤到下一行；
+   * - `display: flex; width: 100%` 让 form 撑满 quick-filter-slot，从而触发 wrap 阈值；
+   * - 这样右侧 search / 齿轮所在 row 永远是第一行最右，不会因桶过多被顶到下一行。
+   */
   .record-board-toolbar-quick-filter-slot .record-board-toolbar-quick-filter-form {
+    display: flex;
+    flex-wrap: wrap;
     width: 100%;
+    max-width: 100%;
+    min-width: 0;
   }
 
   .record-board-toolbar-quick-filter-slot .pisell-lowcode-form,
   .record-board-toolbar-quick-filter-slot .ant-form {
-    width: 100%;
+    width: auto;
     max-width: 100%;
+    min-width: 0;
   }
 
   .record-board-toolbar-body-view-segmented {
@@ -99,12 +113,12 @@
 
 @media (max-width: 768px) {
   .pisell-grid-pro-toolbar.pisell-record-board-toolbar--grid {
-    .record-board-toolbar-grid-narrow-two-rows();
+    .record-board-toolbar-grid-narrow-one-row();
   }
 }
 
 .pisell-grid-pro-toolbar.pisell-record-board-toolbar--grid.pisell-record-board-toolbar--narrow-stack {
-  .record-board-toolbar-grid-narrow-two-rows();
+  .record-board-toolbar-grid-narrow-one-row();
 }
 
 /**
@@ -144,3 +158,155 @@
     flex-wrap: nowrap;
   }
 }
+
+/**
+ * `record-board-toolbar-grid-narrow-one-row` 对顶栏行使用 `align-items: flex-start`，
+ * 但上一段 `--compact` 对同一行写了 `align-items: center !important`，会压过 mixin，
+ * 导致 HUD（compact-narrow + narrow-stack）里左侧快筛换行时右侧搜索/齿轮仍整列垂直居中。
+ * 在「grid + narrow-stack + compact」组合下把行对齐改回顶缘。
+ */
+.pisell-grid-pro-toolbar.pisell-record-board-toolbar--grid.pisell-record-board-toolbar--narrow-stack.pisell-record-board-toolbar--compact {
+  > .pisell-grid-pro-toolbar-row.toolbar-row,
+  > .toolbar-row {
+    align-items: flex-start !important;
+  }
+}
+
+/**
+ * 极窄模式：HUD 抽屉这类宽度有限的内嵌表。
+ *  - search 为纯图标触发器，与右侧齿轮并排
+ *  - 列显示 / 排序 / 筛选 / 重置 合并到齿轮 Popover 内
+ */
+.pisell-grid-pro-toolbar.pisell-record-board-toolbar--compact-narrow {
+  padding-bottom: 6px !important;
+  gap: 4px !important;
+
+  > .pisell-grid-pro-toolbar-row.toolbar-row,
+  > .toolbar-row {
+    gap: 4px !important;
+  }
+
+  /** 顶栏右侧 search-icon 与齿轮之间的间距 */
+  .record-board-toolbar-right-actions.ant-space {
+    gap: 10px !important;
+  }
+
+  /**
+   * Find icon 触发器（PisellFind triggerType="icon"）：与右侧齿轮统一为 32×32，icon 18px。
+   * `className` 由 PisellFind/PisellLookup 挂在最外层 `.pisell-lookup`，不会透到内部 trigger，
+   * 所以选择器写成「外层 className → 内层 .pisell-lookup-trigger-icon」。
+   */
+  .pisell-lookup.record-board-toolbar-find-icon .pisell-lookup-trigger-icon {
+    width: 32px;
+    height: 32px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    color: rgba(0, 0, 0, 0.65);
+    transition: background 0.15s, color 0.15s;
+
+    &:hover {
+      background: rgba(22, 119, 255, 0.08);
+      color: rgba(0, 0, 0, 0.88);
+    }
+
+    .anticon {
+      font-size: 18px;
+      line-height: 1;
+    }
+
+    .anticon svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  /**
+   * 齿轮按钮：与 find-icon 对齐到 32×32，icon 18px。
+   * 同时命中 antd 原生 `.ant-btn` 与低代码包裹的 `.pisell-lowcode-btn`，并兼容 `-sm` 尺寸变体；
+   * 用 !important 压过全局基线 28×28 与 antd small button 自带的 24px 高度。
+   */
+  .record-board-toolbar-settings-gear-btn,
+  .record-board-toolbar-settings-gear-btn.ant-btn,
+  .record-board-toolbar-settings-gear-btn.pisell-lowcode-btn,
+  .record-board-toolbar-settings-gear-btn.pisell-lowcode-btn.pisell-lowcode-btn-sm {
+    width: 32px !important;
+    height: 32px !important;
+    min-width: 32px !important;
+    min-height: 32px !important;
+    padding: 0 !important;
+    border-radius: 6px;
+
+    .anticon {
+      font-size: 18px !important;
+      line-height: 1;
+    }
+
+    .anticon svg {
+      width: 18px !important;
+      height: 18px !important;
+    }
+  }
+
+  /**
+   * 自定义 `trigger` 进入 PisellLookup 时会被包裹在 `pisell-lookup-trigger-custom`
+   */
+  .record-board-toolbar-right-actions .pisell-lookup-trigger-custom {
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
+/** 齿轮按钮：低视觉权重，hover 浅色背景；激活态由 antd Popover 自带 */
+.record-board-toolbar-settings-gear-btn.ant-btn {
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border-radius: 6px;
+  color: rgba(0, 0, 0, 0.65);
+
+  &:hover,
+  &:focus {
+    background: rgba(22, 119, 255, 0.08);
+    color: rgba(0, 0, 0, 0.88);
+  }
+}
+
+/**
+ * 齿轮 popover 内容：竖排三组（列显示 / 排序 / 筛选），每组保留各自原本的
+ * 按钮 + 子 popover 触发逻辑，外层只承担「分组承载 + 标签提示」。
+ * 子 popover 仍按各组件 placement 弹，会浮在齿轮 popover 之上。
+ */
+.record-board-toolbar-settings-gear-overlay .ant-popover-inner-content {
+  padding: 8px;
+  min-width: 180px;
+}
+
+.record-board-toolbar-settings-gear-popover {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+/**
+ * 行容器只承担「分组与上下间距」，不再做包裹 hover 反馈：
+ * 每一项内部的按钮（Eye / Sort / Filter）已自带各自的 hover/active 反馈，
+ * 外层再加 hover 会出现「按钮反馈 + 行底色」双层叠加，视觉很乱。
+ *
+ * justify-content: center 让每行内的按钮在 popover 内横向居中——三组操作宽度
+ * 不一致（眼睛 ≪ Sort ≪ Filter），整列居中比左对齐视觉更稳，避免「梯形」错位。
+ */
+.record-board-toolbar-settings-gear-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 0;
+  background: transparent;
+  cursor: default;
+}

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

@@ -3,6 +3,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -40,9 +41,26 @@ var ToolBarQuickFilter = function ToolBarQuickFilter(_ref) {
   useEffect(function () {
     var next = _typeof(currentValues) === 'object' && currentValues !== null ? currentValues : {};
     var byNames = filterList.reduce(function (acc, item) {
-      var _item$name, _next$String;
+      var _other, _item$name, _next$String2;
+      var composite = item === null || item === void 0 || (_other = item.other) === null || _other === void 0 ? void 0 : _other.compositeFilterFieldNames;
+      if (Array.isArray(composite) && composite.length > 0) {
+        var _iterator = _createForOfIteratorHelper(composite),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var _next$String;
+            var field = _step.value;
+            acc[String(field)] = (_next$String = next[String(field)]) !== null && _next$String !== void 0 ? _next$String : undefined;
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+        return acc;
+      }
       var name = (_item$name = item.name) !== null && _item$name !== void 0 ? _item$name : item.key;
-      if (name != null) acc[String(name)] = (_next$String = next[String(name)]) !== null && _next$String !== void 0 ? _next$String : undefined;
+      if (name != null) acc[String(name)] = (_next$String2 = next[String(name)]) !== null && _next$String2 !== void 0 ? _next$String2 : undefined;
       return acc;
     }, {});
     form.setFieldsValue(byNames);

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

@@ -18,6 +18,12 @@ declare const RecordBoardShellFrame: React.FC<{
     children?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
+    /**
+     * 工具栏与表格主体之间的「附加条」插槽，透传给底层 PisellShellFrame.belowToolbar。
+     * 用于在不改 ToolBar 内部结构的前提下，紧贴 toolbar 下方插入轻量条目
+     * （例如 HUD 抽屉里的「当日总览」摘要栏）。
+     */
+    belowToolbar?: React.ReactNode;
 }>;
 export default RecordBoardShellFrame;
 export { RecordBoardToolBar, RecordBoardBatchActionBar, RecordBoardPagination, RecordBoardSearch, ToolBarReset, ToolBarQuickFilter, RecordBoardFloorMap, RecordBoardCalendar, RecordBoardResourceWall, };

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

@@ -102,7 +102,8 @@ var RecordBoardShellFrame = function RecordBoardShellFrame(_ref2) {
   var _ctx$floorMapLayoutRe, _effectiveFloorMapPro, _effectiveFloorMapPro2, _effectiveFloorMapPro3, _ctx$setScrollAreaHei, _ctx$childComponentPr;
   var children = _ref2.children,
     className = _ref2.className,
-    style = _ref2.style;
+    style = _ref2.style,
+    belowToolbar = _ref2.belowToolbar;
   var ctx = useRecordBoardContext();
   var fillHeight = (ctx === null || ctx === void 0 ? void 0 : ctx.fillHeight) === true;
   var _useMemo = useMemo(function () {
@@ -276,6 +277,7 @@ var RecordBoardShellFrame = function RecordBoardShellFrame(_ref2) {
       showBatchActionBar: true
     },
     toolbar: /*#__PURE__*/React.createElement(RecordBoardToolBar, null),
+    belowToolbar: belowToolbar,
     batchActionBar: /*#__PURE__*/React.createElement(RecordBoardBatchActionBar, null)
   }, bodyContent));
   if (fillHeight) {

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

@@ -535,6 +535,11 @@ export interface RecordBoardContextValue {
     onColumnOrderChange?: (columnKeys: string[]) => void;
     /** 各子组件透传 props，由 Provider 注入 */
     childComponentProps?: RecordBoardChildComponentProps;
+    /**
+     * 业务方完全自定义的分页渲染（从根 props 透传过来）。
+     * `<RecordBoardPagination />` 优先级：组件 `render` prop > 此 ctx 字段 > 默认 materials Pagination。
+     */
+    paginationRender?: (ctx: RecordBoardContextValue) => React.ReactNode;
     /** 是否占满父容器高度，供 ShellFrame 做弹性布局（内容区纯 CSS 滚动 + 表头 sticky；scroll.autoCalc 时用测量高度） */
     fillHeight?: boolean;
     /** 内容区滚动容器高度（fillHeight 且 grid.scroll.autoCalc 时由 ShellFrame 测量），供 Grid 计算 scroll.y */
@@ -589,9 +594,13 @@ export declare type RecordBoardFilterProps = Record<string, any>;
 export interface RecordBoardToolBarProps {
     /**
      * `compact`：Find / 快筛 / 排序筛选 / 重置 / 视图切换等统一小号，用于窄容器（如 HUD 内嵌表）。
+     * `compact-narrow`：极窄容器（如 HUD 抽屉）下的进一步压缩 ──
+     *   - Find 退化为图标触发器（弹搜索 Modal/Drawer），不再常驻 input
+     *   - 列显示 / 排序 / 筛选合并到一个齿轮按钮的 Popover 内
+     *   - Reset 仍单独保留（快捷高频动作）
      * @default 'default'
      */
-    toolbarDensity?: 'default' | 'compact';
+    toolbarDensity?: 'default' | 'compact' | 'compact-narrow';
     className?: string;
     style?: React.CSSProperties;
     tabs?: React.ReactNode;
@@ -719,6 +728,16 @@ export interface RecordBoardProps {
     search?: RecordBoardSearchProps;
     /** 分页组件透传配置（与 pagination 状态区分，此处为 Pagination 组件 props） */
     paginationConfig?: Record<string, any>;
+    /**
+     * 完全自定义分页渲染：传入则 ShellFrame 内置的 `<RecordBoardPagination />` 用此函数替换默认渲染。
+     *
+     * 适用场景：业务方需要在窄容器（如 hud 抽屉）里不要 materials Pagination
+     * 那套 50px 高、Previous/Next 大按钮、灰底边框容器，直接用 antd 原生 small Pagination
+     * 或其它紧凑实现。比 `paginationConfig` 更彻底（后者只是 props 透传，外壳样式仍在）。
+     *
+     * 入参 ctx 包含 pagination/total/onPageChange 等当前分页所需上下文。
+     */
+    paginationRender?: (ctx: RecordBoardContextValue) => React.ReactNode;
     /** 多选操作栏配置 */
     batchActionBar?: RecordBoardBatchActionBarProps;
     /** 卡片列表配置 */

package/es/components/pisellShellFrame/PisellShellFrame.js

@@ -40,6 +40,7 @@ export var PisellShellFrame = function PisellShellFrame(props) {
     subtitle = props.subtitle,
     titleExtra = props.titleExtra,
     toolbar = props.toolbar,
+    belowToolbar = props.belowToolbar,
     statisticList = props.statisticList,
     children = props.children,
     batchActionBar = props.batchActionBar,
@@ -75,7 +76,9 @@ export var PisellShellFrame = function PisellShellFrame(props) {
     className: "pisell-shell-frame-title-extra"
   }, titleExtra)), hasToolbar && /*#__PURE__*/React.createElement("div", {
     className: "pisell-shell-frame-toolbar"
-  }, toolbar), hasStatistic && /*#__PURE__*/React.createElement("div", {
+  }, toolbar), belowToolbar != null && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-shell-frame-below-toolbar"
+  }, belowToolbar), hasStatistic && /*#__PURE__*/React.createElement("div", {
     className: "pisell-shell-frame-statistic"
   }, config.statisticCollapsible ? /*#__PURE__*/React.createElement(Collapse, {
     ghost: true,

package/es/components/pisellShellFrame/PisellShellFrame.less

@@ -45,6 +45,19 @@
     margin-bottom: 0;
   }
 
+  /**
+   * 工具栏正下方的「附加条」：默认与 toolbar 留 8px 缝隙，让插入的轻量摘要
+   * 与 toolbar 视觉上分开但不破坏顶栏整体节奏。空内容时塌陷不占位。
+   */
+  &-below-toolbar {
+    margin-bottom: 8px;
+
+    &:empty {
+      display: none;
+      margin-bottom: 0;
+    }
+  }
+
   &-statistic {
     margin-bottom: 8px;
 

package/es/components/pisellShellFrame/types.d.ts

@@ -45,6 +45,12 @@ export interface PisellShellFrameProps {
     titleExtra?: ReactNode;
     /** 工具栏内容 */
     toolbar?: ReactNode;
+    /**
+     * 工具栏正下方、统计/正文之上的"附加条"插槽，渲染于 header 内部。
+     * 适用于「统计摘要 / 当前所选筛选标签」等需要紧贴 toolbar 的轻量条目。
+     * 当为空时不占位、不渲染外壳。
+     */
+    belowToolbar?: ReactNode;
     /** 统计列表内容（如 PisellStatisticList 或自定义） */
     statisticList?: ReactNode;
     /** 主内容（表格/看板/日历/楼层图等），当 config.scroll 为 true 时会被滚动容器包裹 */