@pisell/materials 6.11.36 → 6.11.38

package/es/components/pisellRecordBoard/shellFrame/ResourceWall/PisellRecordBoardResourceWallView.js

@@ -7,19 +7,24 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 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."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Spin } from 'antd';
 import { getText } from "../../../../locales";
 import { getCurrentLocale } from "../../../../utils/locale";
 import { useRecordBoardContext } from "../../hooks/useRecordBoardContext";
 import { DEFAULT_RESOURCE_WALL_LAYOUT_PERSIST } from "../../types";
-import { getVenueWallStatusToneMap } from "./venueWallUtils";
+import { DEFAULT_RESOURCE_WALL_STATUS_SORT_FIELD_KEYS, getVenueWallStatusToneMap, matchesResourceWallStatusSortField, parseRecordBoardToolbarSortParam, venueWallOccupiedSortRank } from "./venueWallUtils";
 import { VenueWallCard } from "./VenueWallCard";
 import { ResourceWallControlPanel } from "./ResourceWallControlPanel";
+import { ResourceWallViewportToolbar } from "./ResourceWallViewportToolbar";
 import "./ResourceWallViewport.less";
 
 /** 与 {@link RecordBoardResourceWallProps.filterFieldKey} 默认一致 */
@@ -60,11 +65,13 @@ var DEFAULT_OCCUPIED = '#6f4ae6';
 var DEFAULT_AVAILABLE = '#10b981';
 
 /**
- * 大屏资源墙主视口：卡片数据来自 props；可见资源 id 来自
- * `searchParams.filter.values[filterFieldKey]` 与 `cards[].resourceId` 交集。
+ * RecordBoard 大屏资源墙主视口：`cards` 提供全量卡数据；可见列表由
+ * `searchParams.filter.values[filterFieldKey]` 中的资源 id 与 `cards` 交集决定。
+ * 若 ToolBar `searchParams.sort` 指向状态列（默认字段名 `status`），则按占用态重排展示顺序。
+ * 支持网格分页轮播、浅深外观、伪全屏与控制台（布局 / 配色 / 选中资源）。
  */
 export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourceWallView(props) {
-  var _props$filterFieldKey, _appearanceTheme$appe, _pagedGroups$currentP;
+  var _props$filterFieldKey, _ctx$searchParams3, _appearanceTheme$appe, _pagedGroups$currentP;
   var className = props.className,
     style = props.style,
     loading = props.loading,
@@ -76,13 +83,18 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
     appearanceModeProp = props.appearanceMode,
     onAppearanceModeChange = props.onAppearanceModeChange,
     resourceWallLayoutProp = props.resourceWallLayout,
-    onResourceWallLayoutChange = props.onResourceWallLayoutChange;
+    onResourceWallLayoutChange = props.onResourceWallLayoutChange,
+    statusSortFieldKeysProp = props.statusSortFieldKeys;
   var ctx = useRecordBoardContext();
   var filterKey = (_props$filterFieldKey = props.filterFieldKey) !== null && _props$filterFieldKey !== void 0 ? _props$filterFieldKey : DEFAULT_RESOURCE_WALL_FILTER_FIELD_KEY;
+  var statusSortFieldKeys = useMemo(function () {
+    return statusSortFieldKeysProp != null && statusSortFieldKeysProp.length > 0 ? statusSortFieldKeysProp : _toConsumableArray(DEFAULT_RESOURCE_WALL_STATUS_SORT_FIELD_KEYS);
+  }, [statusSortFieldKeysProp]);
   var _useState = useState({}),
     _useState2 = _slicedToArray(_useState, 2),
     localToneOverrides = _useState2[0],
     setLocalToneOverrides = _useState2[1];
+  /** 六态标注覆盖：有受控回调则只上报；否则写本地 state（演示 / 未持久化宿主） */
   var emitToneOverrides = useCallback(function (next) {
     onStatusToneOverridesChange === null || onStatusToneOverridesChange === void 0 || onStatusToneOverridesChange(next);
     if (onStatusToneOverridesChange == null) {
@@ -94,6 +106,7 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
     internalAppearanceTheme = _useState4[0],
     setInternalAppearanceTheme = _useState4[1];
   var appearanceTheme = appearanceThemeProp !== null && appearanceThemeProp !== void 0 ? appearanceThemeProp : internalAppearanceTheme;
+  /** 占用/空闲底色与六态覆盖按浅、深槽位写入主题对象 */
   var persistAppearanceTheme = useCallback(function (next) {
     onAppearanceThemeChange === null || onAppearanceThemeChange === void 0 || onAppearanceThemeChange(next);
     if (onAppearanceThemeChange == null) {
@@ -103,9 +116,12 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
 
   /**
    * 资源墙可见 id：未写键、非数组、空数组一律视为「无选中」→ 不展示任何卡片。
-   * 有非空 string[] 时按该顺序展示：能在 `cards` 里命中的用真实卡数据，否则用占位卡（仅 id），与勾选/落盘一致。
+   * 有非空 string[] 时按该顺序展示：**仅渲染能在 `cards` 里命中的**；命中不到的 id（例如磁盘残留的
+   * 旧店铺 / 已删资源）直接剔除，不再回退成「数字占位卡」。磁盘侧由宿主（如 PisellReservation）
+   * 水合后清洗并回写 localStorage，避免下次继续飘过来。
    */
-  var filterValues = function (_ctx$searchParams) {
+  var filterValues = useMemo(function () {
+    var _ctx$searchParams;
     var f = (_ctx$searchParams = ctx.searchParams) === null || _ctx$searchParams === void 0 ? void 0 : _ctx$searchParams.filter;
     if (!f || _typeof(f) !== 'object' || f === null) return undefined;
     var v = f.values;
@@ -113,7 +129,7 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
       return undefined;
     }
     return v;
-  }();
+  }, [ctx.searchParams]);
   var hasResourceWallFilterKey = filterValues != null && Object.prototype.hasOwnProperty.call(filterValues, filterKey);
   var selectedRaw = hasResourceWallFilterKey ? filterValues[filterKey] : undefined;
   var wallSelectedIds = useMemo(function () {
@@ -139,6 +155,7 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
     return out;
   }, [hasResourceWallFilterKey, selectedRaw]);
   var cards = cardsProp !== null && cardsProp !== void 0 ? cardsProp : [];
+  /** 按 resourceId 建表，便于按筛选 id 顺序 O(1) 取卡 */
   var cardByResourceId = useMemo(function () {
     var m = new Map();
     var _iterator2 = _createForOfIteratorHelper(cards),
@@ -155,23 +172,56 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
     }
     return m;
   }, [cards]);
+
+  /**
+   * 仅渲染「筛选 id 序列 ∩ cards」；缺数据的 id 直接跳过。
+   * 若当前 `searchParams.sort` 指向状态列（见 statusSortFieldKeys），在筛选顺序上做稳定排序：
+   * desc → 占用态在前；asc → 空闲态在前。
+   */
   var visibleCards = useMemo(function () {
+    var _ctx$searchParams2;
     if (!wallSelectedIds.length) {
       return [];
     }
-    return wallSelectedIds.map(function (id) {
-      var key = String(id);
-      var hit = cardByResourceId.get(key);
-      if (hit) {
-        return hit;
+    var result = [];
+    var _iterator3 = _createForOfIteratorHelper(wallSelectedIds),
+      _step3;
+    try {
+      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        var id = _step3.value;
+        var hit = cardByResourceId.get(String(id));
+        if (hit) result.push(hit);
       }
-      return {
-        resourceId: key,
-        resource: key,
-        status: 'available'
-      };
-    });
-  }, [cardByResourceId, wallSelectedIds]);
+    } catch (err) {
+      _iterator3.e(err);
+    } finally {
+      _iterator3.f();
+    }
+    var parsed = parseRecordBoardToolbarSortParam((_ctx$searchParams2 = ctx.searchParams) === null || _ctx$searchParams2 === void 0 ? void 0 : _ctx$searchParams2.sort);
+    if (parsed && matchesResourceWallStatusSortField(parsed.field, statusSortFieldKeys)) {
+      var dir = parsed.dir;
+      var indexed = result.map(function (card, idx) {
+        return {
+          card: card,
+          idx: idx
+        };
+      });
+      indexed.sort(function (a, b) {
+        var ra = venueWallOccupiedSortRank(a.card);
+        var rb = venueWallOccupiedSortRank(b.card);
+        if (ra !== rb) {
+          return dir === 'asc' ? ra - rb : rb - ra;
+        }
+        return a.idx - b.idx;
+      });
+      return indexed.map(function (x) {
+        return x.card;
+      });
+    }
+    return result;
+  }, [cardByResourceId, wallSelectedIds, (_ctx$searchParams3 = ctx.searchParams) === null || _ctx$searchParams3 === void 0 ? void 0 : _ctx$searchParams3.sort, statusSortFieldKeys]);
+
+  /** 顶栏时钟 / 日期展示 */
   var _useState5 = useState(function () {
       return new Date();
     }),
@@ -186,6 +236,8 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
       return window.clearInterval(id);
     };
   }, []);
+
+  /** 浅深主题：双受控（props + onChange）时完全由外部驱动，否则用内部 state */
   var _useState7 = useState('light'),
     _useState8 = _slicedToArray(_useState7, 2),
     internalAppearanceMode = _useState8[0],
@@ -214,6 +266,8 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
     pseudoFullscreen = _useState14[0],
     setPseudoFullscreen = _useState14[1];
   var shellRef = useRef(null);
+
+  /** 伪全屏：给 body 挂类名，配合 less 撑满视口且压住部分宿主布局 */
   useEffect(function () {
     var cls = 'pisell-resource-wall-fixed-viewport';
     if (typeof document === 'undefined') return;
@@ -226,6 +280,8 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
       document.body.classList.remove(cls);
     };
   }, [pseudoFullscreen]);
+
+  /** 布局持久化：有 `onResourceWallLayoutChange` 时为受控；否则本地默认 + `setLayoutState` 补丁 */
   var layoutPersisted = onResourceWallLayoutChange != null;
   var _useState15 = useState(function () {
       return _objectSpread({}, DEFAULT_RESOURCE_WALL_LAYOUT_PERSIST);
@@ -257,12 +313,16 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
       });
     });
   }, [localeKey]);
+
+  /** 当前外观模式下的槽位：占用/空闲底色 + 六态覆盖（含未持久化时的 props 回退） */
   var modeSlot = (_appearanceTheme$appe = appearanceTheme[appearanceMode]) !== null && _appearanceTheme$appe !== void 0 ? _appearanceTheme$appe : {};
   var occupiedCardColor = modeSlot.occupiedCardColor != null && modeSlot.occupiedCardColor !== '' ? modeSlot.occupiedCardColor : DEFAULT_OCCUPIED;
   var availableCardColor = modeSlot.availableCardColor != null && modeSlot.availableCardColor !== '' ? modeSlot.availableCardColor : DEFAULT_AVAILABLE;
   var modeToneOverrides = modeSlot.statusToneOverrides;
   var hasModeToneOverrides = modeToneOverrides != null && Object.keys(modeToneOverrides).length > 0;
   var statusToneOverrides = hasModeToneOverrides ? modeToneOverrides : statusToneOverridesProp !== undefined ? statusToneOverridesProp : localToneOverrides;
+
+  /** 解析当前选中的预设（含 custom 行列钳位） */
   var selectedLayout = useMemo(function () {
     var _layoutPresetsWithI;
     if (layoutKey === 'custom') {
@@ -278,6 +338,7 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
     })) !== null && _layoutPresetsWithI !== void 0 ? _layoutPresetsWithI : layoutPresetsWithI18n[2];
   }, [layoutKey, customCols, customRows, layoutPresetsWithI18n]);
   var pageCapacity = selectedLayout.cols * selectedLayout.rows;
+  /** 按单页容量切分可见卡，用于轮播与指示条 */
   var pagedGroups = useMemo(function () {
     var chunks = [];
     for (var i = 0; i < visibleCards.length; i += pageCapacity) {
@@ -286,18 +347,25 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
     return chunks;
   }, [visibleCards, pageCapacity]);
   var totalPages = Math.max(1, pagedGroups.length);
+  /** 当前页要渲染的卡；无分页时退化为首屏 capacity 张 */
   var renderCards = (_pagedGroups$currentP = pagedGroups[currentPage]) !== null && _pagedGroups$currentP !== void 0 ? _pagedGroups$currentP : visibleCards.slice(0, pageCapacity);
+
+  /** 控制台展示与顶栏一致的当前页 / 总页（1-based 在文案 replace 时处理） */
   var controlCarouselPager = useMemo(function () {
     return {
       currentPage: currentPage,
       totalPages: totalPages
     };
   }, [currentPage, totalPages]);
+
+  /** 总页数变小时收回当前页索引，避免越界 */
   useEffect(function () {
     setCurrentPage(function (p) {
       return totalPages > 0 ? Math.min(p, totalPages - 1) : 0;
     });
   }, [totalPages]);
+
+  /** 多页时按 `pageDurationSec` 自动轮播当前页 */
   useEffect(function () {
     if (totalPages <= 1) {
       setCurrentPage(0);
@@ -313,6 +381,8 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
       return window.clearInterval(timer);
     };
   }, [totalPages, pageDurationSec]);
+
+  /** 网格容量或可见卡数量变化时回到第一页 */
   useEffect(function () {
     setCurrentPage(0);
   }, [pageCapacity, visibleCards.length]);
@@ -322,8 +392,8 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
    * 宿主合并 `onSearch` 时请保留该键；删掉键时本视图同样按「无选中」处理（不展示）。
    */
   var mergeFilterResourceIds = useCallback(function (ids) {
-    var _ctx$searchParams2, _filterValue$values, _ctx$onSearch;
-    var sp = (_ctx$searchParams2 = ctx.searchParams) !== null && _ctx$searchParams2 !== void 0 ? _ctx$searchParams2 : {};
+    var _ctx$searchParams4, _filterValue$values, _ctx$onSearch;
+    var sp = (_ctx$searchParams4 = ctx.searchParams) !== null && _ctx$searchParams4 !== void 0 ? _ctx$searchParams4 : {};
     var filterValue = sp[FILTER_PARAMS_FIELD];
     var currentValues = (_filterValue$values = filterValue === null || filterValue === void 0 ? void 0 : filterValue.values) !== null && _filterValue$values !== void 0 ? _filterValue$values : {};
     var nextFilter = _objectSpread(_objectSpread({}, filterValue), {}, {
@@ -331,6 +401,8 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
     });
     (_ctx$onSearch = ctx.onSearch) === null || _ctx$onSearch === void 0 || _ctx$onSearch.call(ctx, _objectSpread(_objectSpread({}, sp), {}, _defineProperty({}, FILTER_PARAMS_FIELD, nextFilter)));
   }, [ctx, filterKey]);
+
+  /** 控制台「应用」：同步筛选 id、布局持久化、当前外观槽位下的占用/空闲色与六态覆盖 */
   var handleControlApply = useCallback(function (payload) {
     mergeFilterResourceIds(payload.resourceIds);
     setLayoutState({
@@ -349,6 +421,8 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
     persistAppearanceTheme(_objectSpread(_objectSpread({}, appearanceTheme), {}, _defineProperty({}, appearanceMode, nextSlot)));
     emitToneOverrides(payload.statusToneOverrides);
   }, [mergeFilterResourceIds, emitToneOverrides, appearanceTheme, appearanceMode, persistAppearanceTheme, setLayoutState]);
+
+  /** 注入 i18n 后的完整六态表（含控制台覆盖），下发各 {@link VenueWallCard} */
   var statusToneMap = useMemo(function () {
     return getVenueWallStatusToneMap(statusToneOverrides);
   }, [statusToneOverrides]);
@@ -366,7 +440,7 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
   var countdownSec = Math.max(3, pageDurationSec);
   var shell = /*#__PURE__*/React.createElement("div", {
     ref: shellRef,
-    className: className,
+    className: "pisell-resource-wall-shell".concat(className ? " ".concat(className) : ''),
     style: _objectSpread({
       flex: 1,
       minHeight: 0,
@@ -376,109 +450,27 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
       background: pageBg,
       color: clockColor
     }, style)
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      flexShrink: 0,
-      borderBottom: headerBorder,
-      padding: '16px 24px',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      gap: 16,
-      background: headerBg
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: 22,
-      fontWeight: 600,
-      letterSpacing: '-0.02em',
-      color: clockColor
-    }
-  }, now.toLocaleTimeString([], {
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: false
-  }), ' ', "\xB7", ' ', now.toLocaleDateString('en-GB', {
-    day: '2-digit',
-    month: 'short',
-    year: 'numeric'
-  })), /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: 8
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      borderRadius: 6,
-      border: toolbarBtnBorder,
-      overflow: 'hidden',
-      background: toolbarBtnBg
-    }
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: function onClick() {
-      return setAppearanceMode('light');
-    },
-    style: {
-      border: 'none',
-      padding: '6px 12px',
-      fontSize: 13,
-      fontWeight: 500,
-      cursor: 'pointer',
-      background: appearanceMode === 'light' ? toolbarBtnBgActive : 'transparent',
-      color: appearanceMode === 'light' ? clockColor : mutedText
-    }
-  }, getText('pisell-resource-wall-appearance-light')), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: function onClick() {
-      return setAppearanceMode('dark');
-    },
-    style: {
-      border: 'none',
-      borderLeft: toolbarBtnBorder,
-      padding: '6px 12px',
-      fontSize: 13,
-      fontWeight: 500,
-      cursor: 'pointer',
-      background: appearanceMode === 'dark' ? toolbarBtnBgActive : 'transparent',
-      color: appearanceMode === 'dark' ? clockColor : mutedText
-    }
-  }, getText('pisell-resource-wall-appearance-dark'))), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: function onClick() {
+  }, /*#__PURE__*/React.createElement(ResourceWallViewportToolbar, {
+    now: now,
+    appearanceMode: appearanceMode,
+    onAppearanceModeChange: setAppearanceMode,
+    pseudoFullscreen: pseudoFullscreen,
+    onTogglePseudoFullscreen: function onTogglePseudoFullscreen() {
       return setPseudoFullscreen(function (v) {
         return !v;
       });
     },
-    style: {
-      borderRadius: 6,
-      padding: '6px 14px',
-      fontSize: 13,
-      fontWeight: 500,
-      cursor: 'pointer',
-      border: toolbarBtnBorder,
-      background: pseudoFullscreen ? toolbarBtnBgActive : toolbarBtnBg,
-      color: clockColor
-    }
-  }, pseudoFullscreen ? getText('pisell-resource-wall-fullscreen-exit') : getText('pisell-resource-wall-fullscreen-enter')), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: function onClick() {
+    onOpenControlPanel: function onOpenControlPanel() {
       return setShowControlPanel(true);
     },
-    style: {
-      borderRadius: 6,
-      padding: '6px 14px',
-      fontSize: 13,
-      fontWeight: 500,
-      cursor: 'pointer',
-      border: toolbarBtnBorder,
-      background: toolbarBtnBg,
-      color: clockColor
-    }
-  }, getText('pisell-resource-wall-control-open')))), /*#__PURE__*/React.createElement("div", {
+    headerBorder: headerBorder,
+    headerBg: headerBg,
+    clockColor: clockColor,
+    mutedText: mutedText,
+    toolbarBtnBorder: toolbarBtnBorder,
+    toolbarBtnBg: toolbarBtnBg,
+    toolbarBtnBgActive: toolbarBtnBgActive
+  }), /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
       minHeight: 0,
@@ -528,10 +520,11 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
       gridTemplateColumns: "repeat(".concat(selectedLayout.cols, ", minmax(0, 1fr))"),
       gridTemplateRows: "repeat(".concat(selectedLayout.rows, ", minmax(0, 1fr))")
     }
-  }, renderCards.map(function (card, index) {
+  }, renderCards.map(function (card) {
     return /*#__PURE__*/React.createElement(VenueWallCard, {
-      key: "".concat(card.resourceId, "-").concat(index),
+      key: String(card.resourceId),
       card: card,
+      wallNowMs: now.getTime(),
       boardingSoonBeforeMin: boardingSoonBeforeMin,
       occupiedCardColor: occupiedCardColor,
       availableCardColor: availableCardColor,
@@ -543,7 +536,6 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
     open: showControlPanel,
     onClose: closeControlPanel,
     isDark: isDark,
-    cards: cards,
     layoutPresets: layoutPresetsWithI18n,
     layoutKey: layoutKey,
     customCols: customCols,

package/es/components/pisellRecordBoard/shellFrame/ResourceWall/ResourceWallControlPanel.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { RecordBoardResourceWallCardModel } from '../../types';
 import { type VenueWallStatusToneOverrides } from './venueWallUtils';
 export declare type ResourceWallLayoutPreset = {
     key: string;
@@ -24,7 +23,6 @@ export interface ResourceWallControlPanelProps {
     open: boolean;
     onClose: () => void;
     isDark: boolean;
-    cards: RecordBoardResourceWallCardModel[];
     layoutPresets: readonly ResourceWallLayoutPreset[];
     layoutKey: string;
     customCols: number;
@@ -45,8 +43,8 @@ export interface ResourceWallControlPanelProps {
     heroMaxWidthRatio?: number;
 }
 /**
- * 控制台弹层：JSX 自仓库根 `test.tsx` 的 `showAdmin` 整段复制后对接真实状态；
- * 状态表仅六态。
- * 关闭（Close / Escape / 点击遮罩）时提交当前草稿并关闭。
+ * 资源墙管理台（Portal）：选资源、网格预设/自定义行列、翻页秒数、占用/空闲色、六态说明与色值；
+ * `onApply` 回传负载中含 `diffVenueWallStatusToneOverrides` 压缩结果。
+ * 源自 test `showAdmin` 对接；关闭（Close / Escape / 遮罩）时提交草稿并关闭。
  */
 export declare const ResourceWallControlPanel: React.FC<ResourceWallControlPanelProps>;