@pisell/materials 6.11.34 → 6.11.36

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

@@ -1,80 +1,183 @@
-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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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."); }
 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; }
-import React, { useMemo, useState, useEffect } from 'react';
+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 { VenueWallCard } from "./VenueWallCard";
+import { ResourceWallControlPanel } from "./ResourceWallControlPanel";
+import "./ResourceWallViewport.less";
 
 /** 与 {@link RecordBoardResourceWallProps.filterFieldKey} 默认一致 */
 export var DEFAULT_RESOURCE_WALL_FILTER_FIELD_KEY = 'resource_wall_resource_ids';
+var FILTER_PARAMS_FIELD = 'filter';
 var LAYOUT_PRESETS = [{
   key: '1x1',
+  label: '1 × 1',
   cols: 1,
   rows: 1
 }, {
   key: '1x2',
+  label: '1 × 2',
   cols: 2,
   rows: 1
 }, {
   key: '2x3',
+  label: '2 × 3',
   cols: 3,
   rows: 2
 }, {
   key: '3x2',
+  label: '3 × 2',
   cols: 2,
   rows: 3
 }, {
   key: '3x3',
+  label: '3 × 3',
   cols: 3,
   rows: 3
+}, {
+  key: 'custom',
+  label: '',
+  cols: 3,
+  rows: 2
 }];
+var DEFAULT_OCCUPIED = '#6f4ae6';
+var DEFAULT_AVAILABLE = '#10b981';
 
 /**
  * 大屏资源墙主视口：卡片数据来自 props；可见资源 id 来自
  * `searchParams.filter.values[filterFieldKey]` 与 `cards[].resourceId` 交集。
  */
 export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourceWallView(props) {
-  var _props$filterFieldKey, _ctx$searchParams;
+  var _props$filterFieldKey, _appearanceTheme$appe, _pagedGroups$currentP;
   var className = props.className,
     style = props.style,
     loading = props.loading,
-    cardsProp = props.cards;
+    cardsProp = props.cards,
+    statusToneOverridesProp = props.statusToneOverrides,
+    onStatusToneOverridesChange = props.onStatusToneOverridesChange,
+    appearanceThemeProp = props.appearanceTheme,
+    onAppearanceThemeChange = props.onAppearanceThemeChange,
+    appearanceModeProp = props.appearanceMode,
+    onAppearanceModeChange = props.onAppearanceModeChange,
+    resourceWallLayoutProp = props.resourceWallLayout,
+    onResourceWallLayoutChange = props.onResourceWallLayoutChange;
   var ctx = useRecordBoardContext();
   var filterKey = (_props$filterFieldKey = props.filterFieldKey) !== null && _props$filterFieldKey !== void 0 ? _props$filterFieldKey : DEFAULT_RESOURCE_WALL_FILTER_FIELD_KEY;
-  var selectedRaw = (_ctx$searchParams = ctx.searchParams) === null || _ctx$searchParams === void 0 || (_ctx$searchParams = _ctx$searchParams.filter) === null || _ctx$searchParams === void 0 || (_ctx$searchParams = _ctx$searchParams.values) === null || _ctx$searchParams === void 0 ? void 0 : _ctx$searchParams[filterKey];
-  var selectedIds = useMemo(function () {
-    if (!Array.isArray(selectedRaw)) return null;
-    return selectedRaw.map(function (x) {
-      return String(x);
-    });
-  }, [selectedRaw]);
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    localToneOverrides = _useState2[0],
+    setLocalToneOverrides = _useState2[1];
+  var emitToneOverrides = useCallback(function (next) {
+    onStatusToneOverridesChange === null || onStatusToneOverridesChange === void 0 || onStatusToneOverridesChange(next);
+    if (onStatusToneOverridesChange == null) {
+      setLocalToneOverrides(next);
+    }
+  }, [onStatusToneOverridesChange]);
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    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) {
+      setInternalAppearanceTheme(next);
+    }
+  }, [onAppearanceThemeChange]);
+
+  /**
+   * 资源墙可见 id：未写键、非数组、空数组一律视为「无选中」→ 不展示任何卡片。
+   * 有非空 string[] 时按该顺序展示：能在 `cards` 里命中的用真实卡数据，否则用占位卡（仅 id），与勾选/落盘一致。
+   */
+  var filterValues = function (_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;
+    if (v === null || v === undefined || _typeof(v) !== 'object' || Array.isArray(v)) {
+      return undefined;
+    }
+    return v;
+  }();
+  var hasResourceWallFilterKey = filterValues != null && Object.prototype.hasOwnProperty.call(filterValues, filterKey);
+  var selectedRaw = hasResourceWallFilterKey ? filterValues[filterKey] : undefined;
+  var wallSelectedIds = useMemo(function () {
+    if (!hasResourceWallFilterKey) return [];
+    if (!Array.isArray(selectedRaw)) return [];
+    var seen = new Set();
+    var out = [];
+    var _iterator = _createForOfIteratorHelper(selectedRaw),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var x = _step.value;
+        var t = String(x).trim();
+        if (!t || seen.has(t)) continue;
+        seen.add(t);
+        out.push(t);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return out;
+  }, [hasResourceWallFilterKey, selectedRaw]);
   var cards = cardsProp !== null && cardsProp !== void 0 ? cardsProp : [];
+  var cardByResourceId = useMemo(function () {
+    var m = new Map();
+    var _iterator2 = _createForOfIteratorHelper(cards),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var c = _step2.value;
+        m.set(String(c.resourceId), c);
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    return m;
+  }, [cards]);
   var visibleCards = useMemo(function () {
-    if (selectedIds == null || selectedIds.length === 0) {
-      return cards;
+    if (!wallSelectedIds.length) {
+      return [];
     }
-    var set = new Set(selectedIds);
-    return cards.filter(function (c) {
-      return set.has(String(c.resourceId));
+    return wallSelectedIds.map(function (id) {
+      var key = String(id);
+      var hit = cardByResourceId.get(key);
+      if (hit) {
+        return hit;
+      }
+      return {
+        resourceId: key,
+        resource: key,
+        status: 'available'
+      };
     });
-  }, [cards, selectedIds]);
-  var _useState = useState(function () {
+  }, [cardByResourceId, wallSelectedIds]);
+  var _useState5 = useState(function () {
       return new Date();
     }),
-    _useState2 = _slicedToArray(_useState, 2),
-    now = _useState2[0],
-    setNow = _useState2[1];
-  /** 墙钟与「时:分」展示对齐：秒级 tick，分钟变化时无需再等整段长间隔 */
+    _useState6 = _slicedToArray(_useState5, 2),
+    now = _useState6[0],
+    setNow = _useState6[1];
   useEffect(function () {
     var id = window.setInterval(function () {
       return setNow(new Date());
@@ -83,8 +186,186 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
       return window.clearInterval(id);
     };
   }, []);
-  var selectedLayout = LAYOUT_PRESETS[2];
+  var _useState7 = useState('light'),
+    _useState8 = _slicedToArray(_useState7, 2),
+    internalAppearanceMode = _useState8[0],
+    setInternalAppearanceMode = _useState8[1];
+  var appearanceModeControlled = appearanceModeProp !== undefined && onAppearanceModeChange != null;
+  var appearanceMode = appearanceModeControlled ? appearanceModeProp : internalAppearanceMode;
+  var setAppearanceMode = useCallback(function (m) {
+    onAppearanceModeChange === null || onAppearanceModeChange === void 0 || onAppearanceModeChange(m);
+    if (!appearanceModeControlled) {
+      setInternalAppearanceMode(m);
+    }
+  }, [appearanceModeControlled, onAppearanceModeChange]);
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    showControlPanel = _useState10[0],
+    setShowControlPanel = _useState10[1];
+  var closeControlPanel = useCallback(function () {
+    setShowControlPanel(false);
+  }, []);
+  var _useState11 = useState(0),
+    _useState12 = _slicedToArray(_useState11, 2),
+    currentPage = _useState12[0],
+    setCurrentPage = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    pseudoFullscreen = _useState14[0],
+    setPseudoFullscreen = _useState14[1];
+  var shellRef = useRef(null);
+  useEffect(function () {
+    var cls = 'pisell-resource-wall-fixed-viewport';
+    if (typeof document === 'undefined') return;
+    if (pseudoFullscreen) {
+      document.body.classList.add(cls);
+    } else {
+      document.body.classList.remove(cls);
+    }
+    return function () {
+      document.body.classList.remove(cls);
+    };
+  }, [pseudoFullscreen]);
+  var layoutPersisted = onResourceWallLayoutChange != null;
+  var _useState15 = useState(function () {
+      return _objectSpread({}, DEFAULT_RESOURCE_WALL_LAYOUT_PERSIST);
+    }),
+    _useState16 = _slicedToArray(_useState15, 2),
+    internalLayout = _useState16[0],
+    setInternalLayout = _useState16[1];
+  var layoutState = layoutPersisted ? _objectSpread(_objectSpread({}, DEFAULT_RESOURCE_WALL_LAYOUT_PERSIST), resourceWallLayoutProp !== null && resourceWallLayoutProp !== void 0 ? resourceWallLayoutProp : {}) : internalLayout;
+  var setLayoutState = useCallback(function (patch) {
+    if (layoutPersisted) {
+      onResourceWallLayoutChange(_objectSpread(_objectSpread(_objectSpread({}, DEFAULT_RESOURCE_WALL_LAYOUT_PERSIST), resourceWallLayoutProp !== null && resourceWallLayoutProp !== void 0 ? resourceWallLayoutProp : {}), patch));
+    } else {
+      setInternalLayout(function (prev) {
+        return _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_RESOURCE_WALL_LAYOUT_PERSIST), prev), patch);
+      });
+    }
+  }, [layoutPersisted, resourceWallLayoutProp, onResourceWallLayoutChange]);
+  var layoutKey = layoutState.layoutKey,
+    customCols = layoutState.customCols,
+    customRows = layoutState.customRows,
+    pageDurationSec = layoutState.pageDurationSec,
+    boardingSoonBeforeMin = layoutState.boardingSoonBeforeMin,
+    heroMaxWidthRatio = layoutState.heroMaxWidthRatio;
+  var localeKey = getCurrentLocale();
+  var layoutPresetsWithI18n = useMemo(function () {
+    return LAYOUT_PRESETS.map(function (p) {
+      return _objectSpread(_objectSpread({}, p), {}, {
+        label: p.key === 'custom' ? getText('pisell-resource-wall-layout-custom') : p.label
+      });
+    });
+  }, [localeKey]);
+  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;
+  var selectedLayout = useMemo(function () {
+    var _layoutPresetsWithI;
+    if (layoutKey === 'custom') {
+      return {
+        key: 'custom',
+        label: getText('pisell-resource-wall-layout-custom'),
+        cols: Math.max(1, Math.min(6, customCols)),
+        rows: Math.max(1, Math.min(6, customRows))
+      };
+    }
+    return (_layoutPresetsWithI = layoutPresetsWithI18n.find(function (p) {
+      return p.key === layoutKey;
+    })) !== 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) {
+      chunks.push(visibleCards.slice(i, i + pageCapacity));
+    }
+    return chunks;
+  }, [visibleCards, pageCapacity]);
+  var totalPages = Math.max(1, pagedGroups.length);
+  var renderCards = (_pagedGroups$currentP = pagedGroups[currentPage]) !== null && _pagedGroups$currentP !== void 0 ? _pagedGroups$currentP : visibleCards.slice(0, pageCapacity);
+  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]);
+  useEffect(function () {
+    if (totalPages <= 1) {
+      setCurrentPage(0);
+      return;
+    }
+    var ms = Math.max(3, pageDurationSec) * 1000;
+    var timer = window.setInterval(function () {
+      setCurrentPage(function (p) {
+        return (p + 1) % totalPages;
+      });
+    }, ms);
+    return function () {
+      return window.clearInterval(timer);
+    };
+  }, [totalPages, pageDurationSec]);
+  useEffect(function () {
+    setCurrentPage(0);
+  }, [pageCapacity, visibleCards.length]);
+
+  /**
+   * 写入 `filter.values[filterKey]`；`ids` 可为 `[]`（大屏不展示）。
+   * 宿主合并 `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 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), {}, {
+      values: _objectSpread(_objectSpread({}, currentValues), {}, _defineProperty({}, filterKey, ids))
+    });
+    (_ctx$onSearch = ctx.onSearch) === null || _ctx$onSearch === void 0 || _ctx$onSearch.call(ctx, _objectSpread(_objectSpread({}, sp), {}, _defineProperty({}, FILTER_PARAMS_FIELD, nextFilter)));
+  }, [ctx, filterKey]);
+  var handleControlApply = useCallback(function (payload) {
+    mergeFilterResourceIds(payload.resourceIds);
+    setLayoutState({
+      layoutKey: payload.layoutKey,
+      customCols: payload.customCols,
+      customRows: payload.customRows,
+      pageDurationSec: payload.pageDurationSec,
+      boardingSoonBeforeMin: payload.boardingSoonBeforeMin,
+      heroMaxWidthRatio: payload.heroMaxWidthRatio
+    });
+    var nextSlot = _objectSpread(_objectSpread({}, appearanceTheme[appearanceMode]), {}, {
+      occupiedCardColor: payload.occupiedCardColor,
+      availableCardColor: payload.availableCardColor,
+      statusToneOverrides: payload.statusToneOverrides
+    });
+    persistAppearanceTheme(_objectSpread(_objectSpread({}, appearanceTheme), {}, _defineProperty({}, appearanceMode, nextSlot)));
+    emitToneOverrides(payload.statusToneOverrides);
+  }, [mergeFilterResourceIds, emitToneOverrides, appearanceTheme, appearanceMode, persistAppearanceTheme, setLayoutState]);
+  var statusToneMap = useMemo(function () {
+    return getVenueWallStatusToneMap(statusToneOverrides);
+  }, [statusToneOverrides]);
+
+  /** 浅色态与历史实现一致（扁平顶栏 + 灰底内容区）；深色仅微调背景与顶栏，不套「卡片套卡片」大圆角壳 */
+  var isDark = appearanceMode === 'dark';
+  var pageBg = isDark ? '#0f172a' : '#f5f7fb';
+  var headerBg = isDark ? '#1e293b' : '#ffffff';
+  var headerBorder = isDark ? '1px solid #334155' : '1px solid #e2e8f0';
+  var clockColor = isDark ? '#f1f5f9' : '#0f172a';
+  var mutedText = isDark ? '#94a3b8' : '#64748b';
+  var toolbarBtnBorder = isDark ? '1px solid #475569' : '1px solid #e2e8f0';
+  var toolbarBtnBg = isDark ? '#334155' : '#ffffff';
+  var toolbarBtnBgActive = isDark ? '#475569' : '#f1f5f9';
+  var countdownSec = Math.max(3, pageDurationSec);
   var shell = /*#__PURE__*/React.createElement("div", {
+    ref: shellRef,
     className: className,
     style: _objectSpread({
       flex: 1,
@@ -92,25 +373,26 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
       display: 'flex',
       flexDirection: 'column',
       overflow: 'hidden',
-      background: '#f5f7fb',
-      color: '#0f172a'
+      background: pageBg,
+      color: clockColor
     }, style)
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       flexShrink: 0,
-      borderBottom: '1px solid #e2e8f0',
+      borderBottom: headerBorder,
       padding: '16px 24px',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'space-between',
       gap: 16,
-      background: '#fff'
+      background: headerBg
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       fontSize: 22,
       fontWeight: 600,
-      letterSpacing: '-0.02em'
+      letterSpacing: '-0.02em',
+      color: clockColor
     }
   }, now.toLocaleTimeString([], {
     hour: '2-digit',
@@ -120,27 +402,165 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
     day: '2-digit',
     month: 'short',
     year: 'numeric'
-  }))), /*#__PURE__*/React.createElement("div", {
+  })), /*#__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() {
+      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() {
+      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", {
     style: {
       flex: 1,
       minHeight: 0,
-      padding: 12
+      padding: 12,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 10
+    }
+  }, totalPages > 1 ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      flexShrink: 0,
+      display: 'flex',
+      alignItems: 'center',
+      gap: 12
     }
   }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 13,
+      fontWeight: 600,
+      color: mutedText,
+      whiteSpace: 'nowrap'
+    }
+  }, getText('pisell-resource-wall-page-indicator').replace('{cur}', String(currentPage + 1)).replace('{total}', String(totalPages))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      height: 4,
+      borderRadius: 2,
+      overflow: 'hidden',
+      background: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(15,23,42,0.08)'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    key: "".concat(currentPage, "-").concat(countdownSec),
+    className: "pisell-resource-wall-page-countdown-bar",
     style: {
+      height: '100%',
+      width: '100%',
+      background: occupiedCardColor,
+      animationDuration: "".concat(countdownSec, "s")
+    }
+  }))) : null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      minHeight: 0,
       height: '100%',
       display: 'grid',
       gap: 16,
       gridTemplateColumns: "repeat(".concat(selectedLayout.cols, ", minmax(0, 1fr))"),
       gridTemplateRows: "repeat(".concat(selectedLayout.rows, ", minmax(0, 1fr))")
     }
-  }, visibleCards.slice(0, selectedLayout.cols * selectedLayout.rows).map(function (card, index) {
+  }, renderCards.map(function (card, index) {
     return /*#__PURE__*/React.createElement(VenueWallCard, {
       key: "".concat(card.resourceId, "-").concat(index),
-      card: card
+      card: card,
+      boardingSoonBeforeMin: boardingSoonBeforeMin,
+      occupiedCardColor: occupiedCardColor,
+      availableCardColor: availableCardColor,
+      heroMaxWidthRatio: heroMaxWidthRatio,
+      statusToneMap: statusToneMap,
+      appearance: appearanceMode
     });
-  }))));
-  if (loading) {
+  }))), /*#__PURE__*/React.createElement(ResourceWallControlPanel, {
+    open: showControlPanel,
+    onClose: closeControlPanel,
+    isDark: isDark,
+    cards: cards,
+    layoutPresets: layoutPresetsWithI18n,
+    layoutKey: layoutKey,
+    customCols: customCols,
+    customRows: customRows,
+    pageDurationSec: pageDurationSec,
+    occupiedCardColor: occupiedCardColor,
+    availableCardColor: availableCardColor,
+    boardingSoonBeforeMin: boardingSoonBeforeMin,
+    statusToneOverrides: statusToneOverrides,
+    selectedResourceIds: wallSelectedIds,
+    carouselPager: controlCarouselPager,
+    heroMaxWidthRatio: heroMaxWidthRatio,
+    onApply: handleControlApply
+  }));
+
+  /** 控制台打开时仍挂载 shell，避免整页 Spin 卸载弹层导致草稿丢失（全选后无法勾掉） */
+  if (loading && !showControlPanel) {
     return /*#__PURE__*/React.createElement("div", {
       className: className,
       style: _objectSpread({
@@ -149,7 +569,7 @@ export var PisellRecordBoardResourceWallView = function PisellRecordBoardResourc
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        background: '#f5f7fb'
+        background: pageBg
       }, style)
     }, /*#__PURE__*/React.createElement(Spin, null));
   }

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import type { RecordBoardResourceWallCardModel } from '../../types';
+import { type VenueWallStatusToneOverrides } from './venueWallUtils';
+export declare type ResourceWallLayoutPreset = {
+    key: string;
+    label: string;
+    cols: number;
+    rows: number;
+};
+export declare type ResourceWallControlPanelApplyPayload = {
+    resourceIds: string[];
+    layoutKey: string;
+    customCols: number;
+    customRows: number;
+    pageDurationSec: number;
+    occupiedCardColor: string;
+    availableCardColor: string;
+    boardingSoonBeforeMin: number;
+    statusToneOverrides: VenueWallStatusToneOverrides;
+    /** 与 test.tsx「主文案基准宽度占比」对接，写入 {@link VenueWallCard} */
+    heroMaxWidthRatio: number;
+};
+export interface ResourceWallControlPanelProps {
+    open: boolean;
+    onClose: () => void;
+    isDark: boolean;
+    cards: RecordBoardResourceWallCardModel[];
+    layoutPresets: readonly ResourceWallLayoutPreset[];
+    layoutKey: string;
+    customCols: number;
+    customRows: number;
+    pageDurationSec: number;
+    occupiedCardColor: string;
+    availableCardColor: string;
+    boardingSoonBeforeMin: number;
+    statusToneOverrides: VenueWallStatusToneOverrides | undefined;
+    selectedResourceIds: string[];
+    onApply: (payload: ResourceWallControlPanelApplyPayload) => void;
+    /** 与 test.tsx「当前分页 / 倒计时」展示一致（1-based current） */
+    carouselPager: {
+        currentPage: number;
+        totalPages: number;
+    };
+    /** 主文案宽度占比初值，与 {@link VenueWallCardProps.heroMaxWidthRatio} 一致 */
+    heroMaxWidthRatio?: number;
+}
+/**
+ * 控制台弹层：JSX 自仓库根 `test.tsx` 的 `showAdmin` 整段复制后对接真实状态；
+ * 状态表仅六态。
+ * 关闭（Close / Escape / 点击遮罩）时提交当前草稿并关闭。
+ */
+export declare const ResourceWallControlPanel: React.FC<ResourceWallControlPanelProps>;