@pisell/materials 6.11.34 → 6.11.35

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

@@ -0,0 +1,525 @@
+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 _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 _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, useRef, useState } from 'react';
+import { Checkbox } from 'antd';
+import { createPortal } from 'react-dom';
+import { getText } from "../../../../locales";
+import { PisellNumber } from "../../../pisellNumber";
+import { PisellSingleSelect } from "../../../pisellSingleSelect";
+import { VENUE_WALL_STATUS_KEYS, diffVenueWallStatusToneOverrides, getVenueWallStatusToneMap } from "./venueWallUtils";
+var buildApplyPayload = function buildApplyPayload(draft, boardingSoonBeforeMin) {
+  return {
+    resourceIds: _toConsumableArray(draft.draftIds),
+    layoutKey: draft.draftLayoutKey,
+    customCols: Math.max(1, Math.min(6, draft.draftCustomCols)),
+    customRows: Math.max(1, Math.min(6, draft.draftCustomRows)),
+    pageDurationSec: Math.max(3, Math.min(60, Math.round(draft.draftPageSec))),
+    occupiedCardColor: draft.draftOcc,
+    availableCardColor: draft.draftAvail,
+    boardingSoonBeforeMin: Math.max(1, Math.min(60, Math.round(boardingSoonBeforeMin))),
+    statusToneOverrides: diffVenueWallStatusToneOverrides(draft.draftTones),
+    heroMaxWidthRatio: Math.max(0.4, Math.min(0.8, draft.draftHeroRatio))
+  };
+};
+
+/**
+ * 控制台弹层：JSX 自仓库根 `test.tsx` 的 `showAdmin` 整段复制后对接真实状态；
+ * 状态表仅六态。
+ * 关闭（Close / Escape / 点击遮罩）时提交当前草稿并关闭。
+ */
+export var ResourceWallControlPanel = function ResourceWallControlPanel(_ref) {
+  var _layoutPresets$find;
+  var open = _ref.open,
+    onClose = _ref.onClose,
+    isDark = _ref.isDark,
+    cards = _ref.cards,
+    layoutPresets = _ref.layoutPresets,
+    layoutKey = _ref.layoutKey,
+    customCols = _ref.customCols,
+    customRows = _ref.customRows,
+    pageDurationSec = _ref.pageDurationSec,
+    occupiedCardColor = _ref.occupiedCardColor,
+    availableCardColor = _ref.availableCardColor,
+    boardingSoonBeforeMin = _ref.boardingSoonBeforeMin,
+    statusToneOverrides = _ref.statusToneOverrides,
+    selectedResourceIds = _ref.selectedResourceIds,
+    onApply = _ref.onApply,
+    carouselPager = _ref.carouselPager,
+    _ref$heroMaxWidthRati = _ref.heroMaxWidthRatio,
+    heroMaxWidthRatioProp = _ref$heroMaxWidthRati === void 0 ? 0.6 : _ref$heroMaxWidthRati;
+  var _useState = useState('resource_layout'),
+    _useState2 = _slicedToArray(_useState, 2),
+    adminTab = _useState2[0],
+    setAdminTab = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    draftIds = _useState4[0],
+    setDraftIds = _useState4[1];
+  var _useState5 = useState(layoutKey),
+    _useState6 = _slicedToArray(_useState5, 2),
+    draftLayoutKey = _useState6[0],
+    setDraftLayoutKey = _useState6[1];
+  var _useState7 = useState(customCols),
+    _useState8 = _slicedToArray(_useState7, 2),
+    draftCustomCols = _useState8[0],
+    setDraftCustomCols = _useState8[1];
+  var _useState9 = useState(customRows),
+    _useState10 = _slicedToArray(_useState9, 2),
+    draftCustomRows = _useState10[0],
+    setDraftCustomRows = _useState10[1];
+  var _useState11 = useState(pageDurationSec),
+    _useState12 = _slicedToArray(_useState11, 2),
+    draftPageSec = _useState12[0],
+    setDraftPageSec = _useState12[1];
+  var _useState13 = useState(occupiedCardColor),
+    _useState14 = _slicedToArray(_useState13, 2),
+    draftOcc = _useState14[0],
+    setDraftOcc = _useState14[1];
+  var _useState15 = useState(availableCardColor),
+    _useState16 = _slicedToArray(_useState15, 2),
+    draftAvail = _useState16[0],
+    setDraftAvail = _useState16[1];
+  var _useState17 = useState(heroMaxWidthRatioProp),
+    _useState18 = _slicedToArray(_useState17, 2),
+    draftHeroRatio = _useState18[0],
+    setDraftHeroRatio = _useState18[1];
+  var _useState19 = useState(function () {
+      return getText('pisell-resource-wall-hero-benchmark-sample');
+    }),
+    _useState20 = _slicedToArray(_useState19, 2),
+    draftHeroBenchmark = _useState20[0],
+    setDraftHeroBenchmark = _useState20[1];
+  var _useState21 = useState(function () {
+      return getVenueWallStatusToneMap();
+    }),
+    _useState22 = _slicedToArray(_useState21, 2),
+    draftTones = _useState22[0],
+    setDraftTones = _useState22[1];
+
+  /**
+   * 弹层打开瞬间从 props 灌入草稿；effect **只依赖 open**，避免父组件每秒重绘（时钟等）时
+   * 因 layoutKey / selectedResourceIds 等引用变化再次执行 effect 把勾选状态刷回 props。
+   */
+  var draftBootstrapRef = useRef({
+    selectedResourceIds: selectedResourceIds,
+    layoutKey: layoutKey,
+    customCols: customCols,
+    customRows: customRows,
+    pageDurationSec: pageDurationSec,
+    occupiedCardColor: occupiedCardColor,
+    availableCardColor: availableCardColor,
+    statusToneOverrides: statusToneOverrides,
+    heroMaxWidthRatioProp: heroMaxWidthRatioProp
+  });
+  draftBootstrapRef.current = {
+    selectedResourceIds: selectedResourceIds,
+    layoutKey: layoutKey,
+    customCols: customCols,
+    customRows: customRows,
+    pageDurationSec: pageDurationSec,
+    occupiedCardColor: occupiedCardColor,
+    availableCardColor: availableCardColor,
+    statusToneOverrides: statusToneOverrides,
+    heroMaxWidthRatioProp: heroMaxWidthRatioProp
+  };
+  var hasOpenedRef = useRef(false);
+  useEffect(function () {
+    if (!open) {
+      hasOpenedRef.current = false;
+      return;
+    }
+    if (hasOpenedRef.current) {
+      return;
+    }
+    hasOpenedRef.current = true;
+    var b = draftBootstrapRef.current;
+    setDraftIds(_toConsumableArray(b.selectedResourceIds));
+    setDraftLayoutKey(b.layoutKey);
+    setDraftCustomCols(b.customCols);
+    setDraftCustomRows(b.customRows);
+    setDraftPageSec(b.pageDurationSec);
+    setDraftOcc(b.occupiedCardColor);
+    setDraftAvail(b.availableCardColor);
+    setDraftHeroRatio(b.heroMaxWidthRatioProp);
+    setDraftTones(getVenueWallStatusToneMap(b.statusToneOverrides));
+    setAdminTab('resource_layout');
+  }, [open]);
+  var flushApplyAndClose = useCallback(function () {
+    onApply(buildApplyPayload({
+      draftIds: draftIds,
+      draftLayoutKey: draftLayoutKey,
+      draftCustomCols: draftCustomCols,
+      draftCustomRows: draftCustomRows,
+      draftPageSec: draftPageSec,
+      draftOcc: draftOcc,
+      draftAvail: draftAvail,
+      draftTones: draftTones,
+      draftHeroRatio: draftHeroRatio
+    }, boardingSoonBeforeMin));
+    onClose();
+  }, [draftIds, draftLayoutKey, draftCustomCols, draftCustomRows, draftPageSec, draftOcc, draftAvail, draftTones, draftHeroRatio, boardingSoonBeforeMin, onApply, onClose]);
+  useEffect(function () {
+    if (!open) return;
+    var onKey = function onKey(e) {
+      if (e.key === 'Escape') flushApplyAndClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return function () {
+      return window.removeEventListener('keydown', onKey);
+    };
+  }, [open, flushApplyAndClose]);
+  var selectedPreset = (_layoutPresets$find = layoutPresets.find(function (p) {
+    return p.key === draftLayoutKey;
+  })) !== null && _layoutPresets$find !== void 0 ? _layoutPresets$find : layoutPresets[2];
+  var pageCapacity = draftLayoutKey === 'custom' ? Math.max(1, Math.min(6, draftCustomCols)) * Math.max(1, Math.min(6, draftCustomRows)) : selectedPreset.cols * selectedPreset.rows;
+  var shellBg = isDark ? 'bg-slate-900 border-slate-800' : 'bg-white border-slate-200';
+  var divider = isDark ? 'border-slate-800' : 'border-slate-200';
+  var headerText = isDark ? 'text-slate-100' : 'text-slate-900';
+  var mutedText = isDark ? 'text-slate-500' : 'text-slate-400';
+  var adminInputBg = isDark ? 'bg-slate-900 border-slate-700 text-slate-100' : 'bg-white border-slate-200 text-slate-700';
+  var adminSectionBg = isDark ? 'bg-slate-950 border-slate-800' : 'bg-slate-50 border-slate-200';
+  var cur = carouselPager.currentPage + 1;
+  var tot = Math.max(1, carouselPager.totalPages);
+  var toggleResource = function toggleResource(id, checked) {
+    setDraftIds(function (prev) {
+      var set = new Set(prev);
+      if (checked) {
+        set.add(id);
+      } else {
+        set.delete(id);
+      }
+      return Array.from(set);
+    });
+  };
+  var selectAllDisplayed = function selectAllDisplayed() {
+    setDraftIds(cards.map(function (c) {
+      return String(c.resourceId);
+    }));
+  };
+  var clearResources = function clearResources() {
+    setDraftIds([]);
+  };
+  if (!open) return null;
+  var modal = /*#__PURE__*/React.createElement("div", {
+    className: "fixed inset-0 z-50 bg-slate-900/40 backdrop-blur-[2px] p-4 md:p-8",
+    onClick: flushApplyAndClose,
+    role: "presentation"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mx-auto max-w-[900px] rounded-[30px] border shadow-[0_30px_80px_rgba(15,23,42,0.16)] overflow-hidden ".concat(shellBg),
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    role: "dialog",
+    "aria-modal": "true"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "border-b px-5 md:px-6 py-4 flex items-center justify-between gap-4 ".concat(divider)
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "text-[11px] uppercase tracking-[0.24em] ".concat(mutedText)
+  }, getText('pisell-resource-wall-control-eyebrow')), /*#__PURE__*/React.createElement("div", {
+    className: "mt-1 text-2xl font-semibold tracking-tight ".concat(headerText)
+  }, getText('pisell-resource-wall-control-subtitle')), /*#__PURE__*/React.createElement("div", {
+    className: "mt-3 inline-flex items-center rounded-full border p-1 border-slate-200 bg-white"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return setAdminTab('resource_layout');
+    },
+    className: "rounded-full px-3 py-1.5 text-sm transition ".concat(adminTab === 'resource_layout' ? 'bg-slate-900 text-white' : 'text-slate-600 hover:bg-slate-100')
+  }, getText('pisell-resource-wall-tab-layout')), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return setAdminTab('color');
+    },
+    className: "rounded-full px-3 py-1.5 text-sm transition ".concat(adminTab === 'color' ? 'bg-slate-900 text-white' : 'text-slate-600 hover:bg-slate-100')
+  }, getText('pisell-resource-wall-tab-colors')))), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: flushApplyAndClose,
+    className: "rounded-full px-4 py-2 text-sm border ".concat(isDark ? 'border-slate-700 text-slate-300 hover:bg-slate-800' : 'border-slate-200 text-slate-600 hover:bg-slate-50')
+  }, getText('pisell-resource-wall-control-close'))), /*#__PURE__*/React.createElement("div", {
+    className: "p-5 md:p-6 space-y-6 max-h-[78vh] overflow-auto"
+  }, adminTab === 'resource_layout' ? /*#__PURE__*/React.createElement("section", {
+    className: "rounded-2xl border p-4 space-y-4 ".concat(adminSectionBg)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-sm font-semibold ".concat(headerText)
+  }, getText('pisell-resource-wall-tab-layout')), /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-1 md:grid-cols-3 gap-3"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "rounded-2xl border p-3 block ".concat(adminInputBg)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-xs mb-2 ".concat(mutedText)
+  }, getText('pisell-resource-wall-display-mode')), /*#__PURE__*/React.createElement("div", {
+    className: "w-full rounded-xl border px-3 py-2 ".concat(adminInputBg)
+  }, getText('pisell-resource-wall-carousel-paging-mode'))), /*#__PURE__*/React.createElement("label", {
+    className: "rounded-2xl border p-3 block ".concat(adminInputBg)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-xs mb-2 ".concat(mutedText)
+  }, getText('pisell-resource-wall-carousel-dwell-sec-label')), /*#__PURE__*/React.createElement(PisellNumber, {
+    className: "w-full",
+    value: draftPageSec,
+    min: 3,
+    max: 60,
+    step: 1,
+    precision: 0,
+    onChange: function onChange(v) {
+      return setDraftPageSec(v == null ? 3 : Math.max(3, Math.min(60, Math.round(v))));
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "rounded-2xl border p-3 ".concat(adminInputBg)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-xs mb-2 ".concat(mutedText)
+  }, getText('pisell-resource-wall-summary-pagination')), /*#__PURE__*/React.createElement("div", {
+    className: "text-sm font-semibold"
+  }, getText('pisell-resource-wall-carousel-countdown-line').replace('{cur}', String(cur)).replace('{tot}', String(tot)).replace('{sec}', String(Math.max(3, draftPageSec)))))), /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-1 md:grid-cols-2 gap-3"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "rounded-2xl border p-3 block ".concat(adminInputBg)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-xs mb-2 ".concat(mutedText)
+  }, getText('pisell-resource-wall-layout-field-label')), /*#__PURE__*/React.createElement(PisellSingleSelect, {
+    className: "w-full",
+    value: draftLayoutKey,
+    options: layoutPresets.map(function (item) {
+      return {
+        value: item.key,
+        label: item.label
+      };
+    }),
+    placeholder: getText('pisell-resource-wall-layout-placeholder'),
+    allowClear: false,
+    onChange: function onChange(v) {
+      if (v != null) setDraftLayoutKey(String(v));
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-2 gap-3"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "rounded-2xl border p-3 block ".concat(adminInputBg)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-xs mb-2 ".concat(mutedText)
+  }, getText('pisell-resource-wall-panel-custom-cols')), /*#__PURE__*/React.createElement(PisellNumber, {
+    className: "w-full",
+    value: draftCustomCols,
+    min: 1,
+    max: 6,
+    step: 1,
+    precision: 0,
+    onChange: function onChange(v) {
+      return setDraftCustomCols(v == null ? 1 : Math.max(1, Math.min(6, Math.round(v))));
+    }
+  })), /*#__PURE__*/React.createElement("label", {
+    className: "rounded-2xl border p-3 block ".concat(adminInputBg)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-xs mb-2 ".concat(mutedText)
+  }, getText('pisell-resource-wall-panel-custom-rows')), /*#__PURE__*/React.createElement(PisellNumber, {
+    className: "w-full",
+    value: draftCustomRows,
+    min: 1,
+    max: 6,
+    step: 1,
+    precision: 0,
+    onChange: function onChange(v) {
+      return setDraftCustomRows(v == null ? 1 : Math.max(1, Math.min(6, Math.round(v))));
+    }
+  })))), /*#__PURE__*/React.createElement("label", {
+    className: "rounded-2xl border p-3 block ".concat(adminInputBg)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-xs mb-2 ".concat(mutedText)
+  }, getText('pisell-resource-wall-hero-width-ratio')), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-3"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "range",
+    min: 40,
+    max: 80,
+    step: 1,
+    value: Math.round(draftHeroRatio * 100),
+    onChange: function onChange(e) {
+      return setDraftHeroRatio(Number(e.target.value) / 100);
+    },
+    className: "flex-1"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(isDark ? 'text-slate-200' : 'text-slate-700', " text-sm font-semibold w-14 text-right")
+  }, Math.round(draftHeroRatio * 100), "%")), /*#__PURE__*/React.createElement("div", {
+    className: "text-[11px] mt-2 ".concat(mutedText)
+  }, getText('pisell-resource-wall-hero-width-hint')), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    value: draftHeroBenchmark,
+    onChange: function onChange(e) {
+      return setDraftHeroBenchmark(e.target.value);
+    },
+    className: "mt-3 w-full rounded-xl border px-3 py-2 outline-none ".concat(adminInputBg),
+    placeholder: getText('pisell-resource-wall-hero-benchmark-placeholder')
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "rounded-2xl border p-3 ".concat(adminInputBg)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mb-3 flex items-center justify-between gap-3"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-xs ".concat(mutedText)
+  }, getText('pisell-resource-wall-resources-select-with-count').replace('{n}', String(cards.length)), /*#__PURE__*/React.createElement("span", {
+    className: "mt-1 block text-[11px] opacity-70"
+  }, getText('pisell-resource-wall-resources-capacity-carousel-hint').replace('{cap}', String(pageCapacity)))), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: selectAllDisplayed,
+    className: "rounded-full border px-3 py-1.5 text-xs hover:bg-slate-100"
+  }, getText('pisell-resource-wall-modal-select-all')), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: clearResources,
+    className: "rounded-full border px-3 py-1.5 text-xs hover:bg-slate-100"
+  }, getText('pisell-resource-wall-modal-clear-all')))), /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-4 gap-2"
+  }, cards.map(function (card) {
+    var id = String(card.resourceId);
+    var checked = draftIds.includes(id);
+    var label = card.resource || id;
+    return /*#__PURE__*/React.createElement("div", {
+      key: id,
+      className: "flex min-w-0 items-center gap-1.5 rounded-xl border px-2 py-2 ".concat(adminInputBg)
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      checked: checked,
+      onChange: function onChange(e) {
+        return toggleResource(id, e.target.checked);
+      },
+      className: "shrink-0"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "min-w-0 flex-1 cursor-pointer truncate text-left text-sm",
+      title: label,
+      onClick: function onClick() {
+        return toggleResource(id, !checked);
+      }
+    }, label));
+  })))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("section", {
+    className: "rounded-2xl border p-4 space-y-4 ".concat(adminSectionBg)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-sm font-semibold ".concat(headerText)
+  }, getText('pisell-resource-wall-tab-colors')), /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-2 gap-3"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "rounded-2xl border p-3 block ".concat(adminInputBg)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-xs mb-2 ".concat(mutedText)
+  }, getText('pisell-resource-wall-occupied-card-color-label')), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-3"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "color",
+    value: draftOcc,
+    onChange: function onChange(e) {
+      return setDraftOcc(e.target.value);
+    },
+    className: "h-10 w-14 shrink-0 rounded-lg border p-1 ".concat(adminInputBg)
+  }), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    value: draftOcc,
+    onChange: function onChange(e) {
+      return setDraftOcc(e.target.value);
+    },
+    className: "flex-1 rounded-xl border px-3 py-2 outline-none ".concat(adminInputBg)
+  }))), /*#__PURE__*/React.createElement("label", {
+    className: "rounded-2xl border p-3 block ".concat(adminInputBg)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-xs mb-2 ".concat(mutedText)
+  }, getText('pisell-resource-wall-available-card-color-label')), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-3"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "color",
+    value: draftAvail,
+    onChange: function onChange(e) {
+      return setDraftAvail(e.target.value);
+    },
+    className: "h-10 w-14 shrink-0 rounded-lg border p-1 ".concat(adminInputBg)
+  }), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    value: draftAvail,
+    onChange: function onChange(e) {
+      return setDraftAvail(e.target.value);
+    },
+    className: "flex-1 rounded-xl border px-3 py-2 outline-none ".concat(adminInputBg)
+  }))))), /*#__PURE__*/React.createElement("section", {
+    className: "overflow-hidden rounded-2xl border ".concat(adminSectionBg)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "border-b px-4 py-3 text-sm font-semibold ".concat(headerText, " ").concat(divider)
+  }, getText('pisell-resource-wall-status-table-title')), /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-[0.8fr_1fr_1.3fr_0.9fr_0.9fr] gap-3 border-b px-4 py-3 text-xs font-semibold text-slate-500"
+  }, /*#__PURE__*/React.createElement("div", null, getText('pisell-resource-wall-status-col-key')), /*#__PURE__*/React.createElement("div", null, getText('pisell-resource-wall-status-col-label')), /*#__PURE__*/React.createElement("div", null, getText('pisell-resource-wall-status-col-explain')), /*#__PURE__*/React.createElement("div", null, getText('pisell-resource-wall-status-col-color')), /*#__PURE__*/React.createElement("div", null, getText('pisell-resource-wall-status-col-notebg'))), VENUE_WALL_STATUS_KEYS.map(function (key) {
+    var item = draftTones[key];
+    return /*#__PURE__*/React.createElement("div", {
+      key: key,
+      className: "grid grid-cols-[0.8fr_1fr_1.3fr_0.9fr_0.9fr] items-center gap-3 border-b px-4 py-3 last:border-b-0 ".concat(divider)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "text-sm font-medium ".concat(headerText)
+    }, getText("pisell-resource-wall-status-id-".concat(key))), /*#__PURE__*/React.createElement("input", {
+      type: "text",
+      value: item.label,
+      onChange: function onChange(e) {
+        return setDraftTones(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, key, _objectSpread(_objectSpread({}, prev[key]), {}, {
+            label: e.target.value
+          })));
+        });
+      },
+      className: "w-full rounded-xl border px-3 py-2 outline-none ".concat(adminInputBg)
+    }), /*#__PURE__*/React.createElement("textarea", {
+      rows: 2,
+      value: item.note,
+      onChange: function onChange(e) {
+        return setDraftTones(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, key, _objectSpread(_objectSpread({}, prev[key]), {}, {
+            note: e.target.value
+          })));
+        });
+      },
+      className: "w-full resize-none rounded-xl border px-3 py-2 outline-none ".concat(adminInputBg)
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center gap-2"
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "color",
+      value: item.color,
+      onChange: function onChange(e) {
+        return setDraftTones(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, key, _objectSpread(_objectSpread({}, prev[key]), {}, {
+            color: e.target.value
+          })));
+        });
+      },
+      className: "h-10 w-14 shrink-0 rounded-lg border p-1 ".concat(adminInputBg)
+    }), /*#__PURE__*/React.createElement("input", {
+      type: "text",
+      value: item.color,
+      onChange: function onChange(e) {
+        return setDraftTones(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, key, _objectSpread(_objectSpread({}, prev[key]), {}, {
+            color: e.target.value
+          })));
+        });
+      },
+      className: "w-full rounded-xl border px-3 py-2 outline-none ".concat(adminInputBg)
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center gap-2"
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "text",
+      value: item.noteBg,
+      onChange: function onChange(e) {
+        return setDraftTones(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, key, _objectSpread(_objectSpread({}, prev[key]), {}, {
+            noteBg: e.target.value
+          })));
+        });
+      },
+      className: "w-full rounded-xl border px-3 py-2 outline-none ".concat(adminInputBg)
+    })));
+  }))))));
+  return typeof document !== 'undefined' ? /*#__PURE__*/createPortal(modal, document.body) : null;
+};

package/es/components/pisellRecordBoard/shellFrame/ResourceWall/ResourceWallViewport.less

@@ -0,0 +1,16 @@
+/** 资源墙：多页轮播顶栏倒计时条（与翻页 interval 同周期） */
+@keyframes pisell-resource-wall-page-countdown {
+  0% {
+    transform: scaleX(0);
+  }
+  100% {
+    transform: scaleX(1);
+  }
+}
+
+.pisell-resource-wall-page-countdown-bar {
+  transform-origin: left center;
+  animation-name: pisell-resource-wall-page-countdown;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { RecordBoardResourceWallCardModel } from '../../types';
+import { type VenueWallStatusKey, type VenueWallStatusTone } from './venueWallUtils';
 export interface VenueWallCardProps {
     card: RecordBoardResourceWallCardModel;
     /** boardingSoon：用于进度条分母（分钟） */
@@ -7,6 +8,10 @@ export interface VenueWallCardProps {
     occupiedCardColor?: string;
     availableCardColor?: string;
     heroMaxWidthRatio?: number;
+    /** 合并后的六态配色与文案；不传则用默认 map */
+    statusToneMap?: Record<VenueWallStatusKey, VenueWallStatusTone>;
+    /** 非占用态主/辅文案色在暗色外壳下的对比度 */
+    appearance?: 'light' | 'dark';
 }
 /**
  * 单块场地大屏卡（由 test.tsx CardItem 迁移，样式为内联 + 少量类名，不依赖 Tailwind）。