@pisell/materials 6.11.28 → 6.11.29

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

@@ -0,0 +1,513 @@
+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 _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, { useEffect, useRef, useState } from 'react';
+import { NoteTicker } from "./NoteTicker";
+import { VENUE_WALL_STATUS_COLOR_MAP, alphaColor, clamp, deriveVenueWallStatus, formatVenueWallCountdown } from "./venueWallUtils";
+
+/** 资源墙卡内共用的墙钟 tick（每卡一条 interval，避免多字段各挂一条） */
+function useVenueWallClockNow() {
+  var _useState = useState(function () {
+      return Date.now();
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    now = _useState2[0],
+    setNow = _useState2[1];
+  useEffect(function () {
+    var id = window.setInterval(function () {
+      return setNow(Date.now());
+    }, 1000);
+    return function () {
+      return window.clearInterval(id);
+    };
+  }, []);
+  return now;
+}
+
+/**
+ * 将服务端给出的「整分钟」计数与收到时的墙钟对齐，随 `now` 递减；
+ * `value` 或 `resourceId` 从上游变更时重新锚定。
+ * @param allowNegative 为 true 时不钳到 0，便于已过期时段继续展示「xxm overtime」（与 `formatVenueWallCountdown` 在负数分钟时一致）。
+ */
+function useDriftMinutesFromEpoch(value, resourceId, now) {
+  var allowNegative = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var _useState3 = useState(function () {
+      return {
+        min: value !== null && value !== void 0 ? value : 0,
+        at: Date.now()
+      };
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    epoch = _useState4[0],
+    setEpoch = _useState4[1];
+  useEffect(function () {
+    setEpoch({
+      min: value !== null && value !== void 0 ? value : 0,
+      at: Date.now()
+    });
+  }, [resourceId, value]);
+  var drifted = epoch.min - Math.floor((now - epoch.at) / 60000);
+  return allowNegative ? drifted : Math.max(0, drifted);
+}
+
+/** `late` 等递增分钟：以收到时刻为锚，随 `now` 增长 */
+function useDriftUpMinutesFromEpoch(value, resourceId, now) {
+  var _useState5 = useState(function () {
+      return {
+        min: value !== null && value !== void 0 ? value : 0,
+        at: Date.now()
+      };
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    epoch = _useState6[0],
+    setEpoch = _useState6[1];
+  useEffect(function () {
+    setEpoch({
+      min: value !== null && value !== void 0 ? value : 0,
+      at: Date.now()
+    });
+  }, [resourceId, value]);
+  return Math.max(0, epoch.min + Math.floor((now - epoch.at) / 60000));
+}
+var DEFAULT_OCCUPIED = '#6f4ae6';
+var DEFAULT_AVAILABLE = '#10b981';
+
+/**
+ * 单块场地大屏卡（由 test.tsx CardItem 迁移，样式为内联 + 少量类名，不依赖 Tailwind）。
+ */
+export var VenueWallCard = function VenueWallCard(_ref) {
+  var _VENUE_WALL_STATUS_CO, _card$currentTime, _card$currentBooking, _card$nextList, _card$nextList$length, _card$nextList2, _nextItem$booking;
+  var card = _ref.card,
+    _ref$boardingSoonBefo = _ref.boardingSoonBeforeMin,
+    boardingSoonBeforeMin = _ref$boardingSoonBefo === void 0 ? 10 : _ref$boardingSoonBefo,
+    _ref$occupiedCardColo = _ref.occupiedCardColor,
+    occupiedCardColor = _ref$occupiedCardColo === void 0 ? DEFAULT_OCCUPIED : _ref$occupiedCardColo,
+    _ref$availableCardCol = _ref.availableCardColor,
+    availableCardColor = _ref$availableCardCol === void 0 ? DEFAULT_AVAILABLE : _ref$availableCardCol,
+    _ref$heroMaxWidthRati = _ref.heroMaxWidthRatio,
+    heroMaxWidthRatio = _ref$heroMaxWidthRati === void 0 ? 0.6 : _ref$heroMaxWidthRati;
+  var cardRef = useRef(null);
+  var _useState7 = useState({
+      width: 420,
+      height: 300
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    cardSize = _useState8[0],
+    setCardSize = _useState8[1];
+  useEffect(function () {
+    if (!cardRef.current) return;
+    var node = cardRef.current;
+    var updateSize = function updateSize() {
+      var rect = node.getBoundingClientRect();
+      setCardSize({
+        width: rect.width,
+        height: rect.height
+      });
+    };
+    updateSize();
+    var observer = new ResizeObserver(updateSize);
+    observer.observe(node);
+    return function () {
+      return observer.disconnect();
+    };
+  }, []);
+  var wallNow = useVenueWallClockNow();
+  var liveRemainingMin = useDriftMinutesFromEpoch(card.remainingMin, card.resourceId, wallNow, true);
+  var liveStartsInMin = useDriftMinutesFromEpoch(card.startsInMin, card.resourceId, wallNow, false);
+  var liveLateMin = useDriftUpMinutesFromEpoch(card.lateMin, card.resourceId, wallNow);
+  var statusKey = deriveVenueWallStatus(_objectSpread(_objectSpread({}, card), {}, {
+    remainingMin: liveRemainingMin
+  }));
+  var tone = (_VENUE_WALL_STATUS_CO = VENUE_WALL_STATUS_COLOR_MAP[statusKey]) !== null && _VENUE_WALL_STATUS_CO !== void 0 ? _VENUE_WALL_STATUS_CO : VENUE_WALL_STATUS_COLOR_MAP.inUse;
+  var isOccupied = ['inUse', 'endingSoon', 'expired'].includes(statusKey);
+  var heroText = isOccupied ? formatVenueWallCountdown(liveRemainingMin) : 'Available';
+  var heroColor = isOccupied ? statusKey === 'inUse' ? '#ffffff' : tone.color : VENUE_WALL_STATUS_COLOR_MAP.available.color;
+  var noteText = isOccupied ? tone.note : VENUE_WALL_STATUS_COLOR_MAP.available.note;
+  var noteTextColor = isOccupied ? '#ffffff' : '#0f172a';
+  var noteBg = isOccupied ? tone.noteBg : alphaColor(availableCardColor, 0.2);
+  var subColor = isOccupied ? 'rgba(255,255,255,0.80)' : '#94a3b8';
+  var mainColor = isOccupied ? '#ffffff' : '#0f172a';
+  var currentLabel = 'Current';
+  var currentTime = (_card$currentTime = card.currentTime) !== null && _card$currentTime !== void 0 ? _card$currentTime : '';
+  var currentName = isOccupied ? (_card$currentBooking = card.currentBooking) !== null && _card$currentBooking !== void 0 ? _card$currentBooking : '' : '';
+  var currentNameColor = mainColor;
+  var nextNameColor = mainColor;
+  var progress = isOccupied ? clamp(liveRemainingMin / 60 * 100, 0, 100) : 0;
+  var progressColor = heroColor;
+  var rightTag = tone.label;
+  var rightTagColor = isOccupied ? '#ffffff' : tone.color;
+  var rightTagBg = isOccupied ? statusKey === 'inUse' ? 'rgba(255,255,255,0.14)' : tone.color : alphaColor(tone.color, 0.12);
+  var rightTagBorder = isOccupied ? 'rgba(255,255,255,0.18)' : alphaColor(tone.color, 0.35);
+  var nextItem = (_card$nextList = card.nextList) === null || _card$nextList === void 0 ? void 0 : _card$nextList[0];
+  var nextCountLabel = nextItem ? "1/".concat((_card$nextList$length = (_card$nextList2 = card.nextList) === null || _card$nextList2 === void 0 ? void 0 : _card$nextList2.length) !== null && _card$nextList$length !== void 0 ? _card$nextList$length : 0) : '';
+  if (statusKey === 'boardingSoon') {
+    var _card$currentBooking2;
+    heroText = "Starts in ".concat(liveStartsInMin, "m");
+    heroColor = VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
+    noteText = VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.note;
+    noteTextColor = VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
+    noteBg = alphaColor(VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color, 0.18);
+    currentLabel = 'Next';
+    currentName = (_card$currentBooking2 = card.currentBooking) !== null && _card$currentBooking2 !== void 0 ? _card$currentBooking2 : '';
+    currentNameColor = VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
+    nextNameColor = VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
+    progress = clamp((boardingSoonBeforeMin - liveStartsInMin) / boardingSoonBeforeMin * 100, 0, 100);
+    progressColor = VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
+    rightTag = VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.label;
+    rightTagColor = VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
+    rightTagBg = alphaColor(VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color, 0.12);
+    rightTagBorder = alphaColor(VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color, 0.35);
+  }
+  if (statusKey === 'late') {
+    var _card$currentBooking3;
+    heroText = "Late +".concat(liveLateMin, "m");
+    /** 仅主文案用红色；其余视觉与 Available 对齐 */
+    heroColor = 'rgb(239, 68, 68)';
+    noteText = VENUE_WALL_STATUS_COLOR_MAP.late.note;
+    noteTextColor = VENUE_WALL_STATUS_COLOR_MAP.available.color;
+    noteBg = VENUE_WALL_STATUS_COLOR_MAP.available.noteBg;
+    currentLabel = 'Next';
+    currentName = (_card$currentBooking3 = card.currentBooking) !== null && _card$currentBooking3 !== void 0 ? _card$currentBooking3 : '';
+    currentNameColor = VENUE_WALL_STATUS_COLOR_MAP.available.color;
+    nextNameColor = VENUE_WALL_STATUS_COLOR_MAP.available.color;
+    progress = 100;
+    progressColor = VENUE_WALL_STATUS_COLOR_MAP.available.color;
+    rightTag = VENUE_WALL_STATUS_COLOR_MAP.late.label;
+    rightTagColor = VENUE_WALL_STATUS_COLOR_MAP.available.color;
+    rightTagBg = alphaColor(VENUE_WALL_STATUS_COLOR_MAP.available.color, 0.12);
+    rightTagBorder = alphaColor(VENUE_WALL_STATUS_COLOR_MAP.available.color, 0.35);
+  }
+
+  /**
+   * 已过期：主文案应与 {@link formatVenueWallCountdown} 在负数分钟时一致（「xxm overtime」）；
+   * drift 允许 remaining 为负后，仅「整分刚好为 0」时仍走 countdown(0) 的「Ending now」，改为「0m overtime」与产品预期一致。
+   */
+  if (statusKey === 'expired') {
+    heroText = liveRemainingMin < 0 ? formatVenueWallCountdown(liveRemainingMin) : liveRemainingMin === 0 ? '0m overtime' : formatVenueWallCountdown(liveRemainingMin);
+  }
+  var surfaceAccentColor = statusKey === 'late' ? availableCardColor : statusKey === 'boardingSoon' ? VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color : availableCardColor;
+  var cardBg = isOccupied ? "linear-gradient(180deg, ".concat(alphaColor(occupiedCardColor, 0.96), " 0%, ").concat(alphaColor(occupiedCardColor, 0.88), " 100%)") : alphaColor(surfaceAccentColor, statusKey === 'boardingSoon' || statusKey === 'late' ? 0.06 : 0.03);
+  var cardBorder = isOccupied ? alphaColor(occupiedCardColor, 0.5) : alphaColor(surfaceAccentColor, 0.18);
+  var moduleBorder = isOccupied ? 'rgba(255,255,255,0.10)' : alphaColor(surfaceAccentColor, 0.2);
+  var totalUnits = 1.5 + 4 + 2 + 1 + 0.4 * 2 + 0.2 * 3;
+  var heightUnit = Math.max(4, cardSize.height / totalUnits);
+  var widthScale = clamp(cardSize.width / 420, 0.42, 1.6);
+  var heightScale = clamp(cardSize.height / 300, 0.42, 1.8);
+  var fitScale = Math.min(widthScale, heightScale);
+  var unit = heightUnit;
+  var shellPad = unit * 0.4;
+  var sectionGap = unit * 0.2;
+  var blockPad = Math.max(unit * 0.2, Math.min(unit * 0.3, 20));
+  var cardRadius = clamp(unit * 0.62 * fitScale, 4, 28);
+  var blockRadius = clamp(unit * 0.48 * fitScale, 3, 24);
+  var noteRadius = clamp(unit * 0.4 * fitScale, 3, 20);
+  var tagRadius = clamp(unit * 0.34 * fitScale, 3, 999);
+  var headerHeight = unit * 1.5;
+  var currentHeight = unit * 4;
+  var nextHeight = unit * 2;
+  var noteHeight = unit * 1;
+  var areaSize = clamp(headerHeight * 0.18 * fitScale, 9, 18);
+  var resourceSize = clamp(headerHeight * 0.34 * fitScale, 16, 42);
+  var tagSize = clamp(headerHeight * 0.12 * fitScale, 10, 14);
+  var tagHeight = clamp(headerHeight * 0.42, 28, 36);
+  var currentMetaSize = clamp(currentHeight * 0.09 * fitScale, 9, 16);
+  var currentNameSize = clamp(currentHeight * 0.15 * fitScale, 12, 30);
+  var heroTextMaxWidth = Math.max(80, (cardSize.width - shellPad * 2 - blockPad * 2) * heroMaxWidthRatio);
+  var heroMaxByName = currentNameSize * 2.5;
+  var heroApproxFactor = Math.max(heroText.length * 0.58, 1);
+  var heroFitByWidth = heroTextMaxWidth / heroApproxFactor;
+  var heroSize = clamp(Math.min(heroFitByWidth, heroMaxByName), 18, heroMaxByName);
+  var nextNameSize = clamp(nextHeight * 0.24 * fitScale, 12, 30);
+  var nextMetaSize = clamp(currentMetaSize, 9, Math.max(10, nextNameSize * 0.68));
+  var nextBlockPad = Math.max(unit * 0.16, Math.min(unit * 0.24, 16));
+  var noteSize = clamp(noteHeight * 0.28 * fitScale, 10, 18);
+  var tagFont = Math.max(8, tagSize * 0.68);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: cardRef,
+    className: "pisell-resource-wall-card",
+    style: {
+      position: 'relative',
+      height: '100%',
+      overflow: 'hidden',
+      display: 'flex',
+      flexDirection: 'column',
+      borderRadius: cardRadius,
+      background: cardBg,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: cardBorder,
+      boxShadow: '0 18px 48px rgba(15,23,42,0.06)'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      display: 'grid',
+      minHeight: 0,
+      padding: shellPad,
+      gap: sectionGap,
+      gridTemplateRows: "".concat(headerHeight, "px ").concat(currentHeight, "px ").concat(nextHeight, "px ").concat(noteHeight, "px")
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      minHeight: 0,
+      gridTemplateRows: '1fr 2fr',
+      rowGap: sectionGap
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      textTransform: 'uppercase',
+      letterSpacing: '0.24em',
+      fontSize: areaSize,
+      color: subColor,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, card.area), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      alignItems: 'center',
+      minHeight: 0,
+      gridTemplateColumns: '1fr auto',
+      columnGap: 8
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: 700,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      minWidth: 0,
+      fontSize: resourceSize,
+      lineHeight: 0.96,
+      color: mainColor
+    }
+  }, card.resource), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+      flexShrink: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      borderWidth: 1,
+      borderStyle: 'solid',
+      fontWeight: 600,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: 0,
+      fontSize: tagSize,
+      lineHeight: 1,
+      minHeight: tagHeight,
+      borderRadius: tagRadius,
+      padding: "0 ".concat(Math.max(8, tagFont), "px"),
+      color: rightTagColor,
+      borderColor: rightTagBorder,
+      background: rightTagBg
+    }
+  }, rightTag)))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      borderWidth: 1,
+      borderStyle: 'solid',
+      position: 'relative',
+      minHeight: 0,
+      borderRadius: blockRadius,
+      borderColor: moduleBorder,
+      background: isOccupied ? 'rgba(255,255,255,0.10)' : alphaColor(surfaceAccentColor, statusKey === 'boardingSoon' ? 0.18 : 0.2),
+      padding: blockPad
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '100%',
+      display: 'grid',
+      minHeight: 0,
+      gridTemplateRows: '1.4fr 2.6fr auto',
+      rowGap: sectionGap
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      minHeight: 0,
+      gridTemplateColumns: '1fr auto',
+      columnGap: 8,
+      alignItems: 'start'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      minWidth: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      textTransform: 'uppercase',
+      letterSpacing: '0.22em',
+      lineHeight: 1,
+      fontSize: currentMetaSize,
+      color: subColor
+    }
+  }, currentLabel), /*#__PURE__*/React.createElement("div", {
+    style: {
+      lineHeight: 1,
+      marginTop: '0.2em',
+      fontSize: currentMetaSize,
+      color: subColor
+    }
+  }, currentTime || "\xA0")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: 600,
+      textAlign: 'right',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      minWidth: 0,
+      alignSelf: 'start',
+      fontSize: currentNameSize,
+      lineHeight: 1.08,
+      color: currentNameColor,
+      maxWidth: cardSize.width * 0.42,
+      paddingTop: '0.04em',
+      paddingBottom: '0.08em'
+    }
+  }, currentName)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'flex-end',
+      minHeight: 0,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: 600,
+      letterSpacing: '-0.02em',
+      whiteSpace: 'nowrap',
+      fontSize: heroSize,
+      lineHeight: 1.08,
+      color: heroColor,
+      maxWidth: heroTextMaxWidth
+    }
+  }, heroText)), statusKey === 'boardingSoon' || isOccupied ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      borderRadius: 9999,
+      overflow: 'hidden',
+      height: Math.max(5, unit * 0.08),
+      background: isOccupied ? 'rgba(255,255,255,0.14)' : 'rgba(148,163,184,0.18)'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '100%',
+      borderRadius: 9999,
+      width: "".concat(progress, "%"),
+      background: progressColor
+    }
+  })) : null)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      borderWidth: 1,
+      borderStyle: 'solid',
+      minHeight: 0,
+      borderRadius: blockRadius,
+      borderColor: moduleBorder,
+      background: isOccupied ? 'rgba(255,255,255,0.04)' : alphaColor(surfaceAccentColor, statusKey === 'boardingSoon' ? 0.1 : 0.08),
+      padding: nextBlockPad
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '100%',
+      minHeight: 0,
+      display: 'grid',
+      gridTemplateRows: '1fr 2fr',
+      rowGap: sectionGap
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'flex-start',
+      justifyContent: 'space-between',
+      gap: 8,
+      minHeight: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      textTransform: 'uppercase',
+      letterSpacing: '0.12em',
+      lineHeight: 1,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      fontSize: nextMetaSize,
+      color: subColor
+    }
+  }, nextItem !== null && nextItem !== void 0 && nextItem.time ? "Next \xB7 ".concat(nextItem.time) : 'Next'), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: 600,
+      flexShrink: 0,
+      fontSize: nextMetaSize,
+      color: subColor,
+      lineHeight: 1
+    }
+  }, nextCountLabel)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'flex-start',
+      minWidth: 0,
+      minHeight: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: 600,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      fontSize: nextNameSize,
+      lineHeight: 1,
+      color: nextNameColor,
+      paddingTop: sectionGap
+    }
+  }, (_nextItem$booking = nextItem === null || nextItem === void 0 ? void 0 : nextItem.booking) !== null && _nextItem$booking !== void 0 ? _nextItem$booking : '')))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 12,
+      overflow: 'hidden',
+      minHeight: 0,
+      padding: Math.max(6, blockPad * 0.66),
+      borderRadius: noteRadius,
+      background: noteBg,
+      border: '1px solid transparent'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: Math.max(8, unit * 0.12),
+      height: Math.max(8, unit * 0.12),
+      borderRadius: 999,
+      background: heroColor,
+      flex: '0 0 auto'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: noteSize,
+      color: noteTextColor,
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(NoteTicker, {
+    text: noteText,
+    color: noteTextColor,
+    duration: 24,
+    shouldMarquee: noteText.length > 32
+  })))));
+};

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

@@ -0,0 +1,52 @@
+@keyframes pisell-resource-wall-note-marquee {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(calc(-33.333% - (var(--pisell-rw-marquee-gap) / 3)), 0, 0);
+  }
+}
+
+.pisell-resource-wall-note-marquee-wrap {
+  overflow: hidden;
+  white-space: nowrap;
+  width: 100%;
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    #000 24px,
+    #000 calc(100% - 24px),
+    transparent 100%
+  );
+}
+
+.pisell-resource-wall-note-marquee-track {
+  --pisell-rw-marquee-gap: 2.4rem;
+  display: inline-flex;
+  align-items: center;
+  width: max-content;
+  min-width: max-content;
+  will-change: transform;
+  animation-name: pisell-resource-wall-note-marquee;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-play-state: running;
+  transform: translate3d(0, 0, 0);
+}
+
+.pisell-resource-wall-note-marquee-copy {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  white-space: nowrap;
+  padding-right: var(--pisell-rw-marquee-gap);
+  backface-visibility: hidden;
+  transform: translateZ(0);
+}
+
+.pisell-resource-wall-note-marquee-static {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 100%;
+}

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

@@ -0,0 +1,14 @@
+import type { RecordBoardResourceWallCardModel } from '../../types';
+export declare type VenueWallStatusKey = 'inUse' | 'endingSoon' | 'expired' | 'available' | 'boardingSoon' | 'late';
+export declare const VENUE_WALL_STATUS_COLOR_MAP: Record<VenueWallStatusKey, {
+    key: VenueWallStatusKey;
+    label: string;
+    note: string;
+    color: string;
+    noteBg: string;
+}>;
+export declare function alphaColor(hex: string, alpha: number): string;
+export declare const clamp: (value: number, min: number, max: number) => number;
+/** 由卡片字段推导状态键（与演示页 test.tsx 规则一致） */
+export declare function deriveVenueWallStatus(card: RecordBoardResourceWallCardModel): VenueWallStatusKey;
+export declare function formatVenueWallCountdown(min: number): string;

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

@@ -0,0 +1,82 @@
+export var VENUE_WALL_STATUS_COLOR_MAP = {
+  inUse: {
+    key: 'inUse',
+    label: 'In Use',
+    note: 'This court is currently in use.',
+    color: '#6f4ae6',
+    noteBg: 'rgba(111,74,230,0.92)'
+  },
+  endingSoon: {
+    key: 'endingSoon',
+    label: 'Ending Soon',
+    note: 'Please leave on time to avoid overtime charges.',
+    color: '#f59e0b',
+    noteBg: 'rgba(245,158,11,0.96)'
+  },
+  expired: {
+    key: 'expired',
+    label: 'Expired',
+    note: 'This booking has ended. Please clear the court.',
+    color: '#ef4444',
+    noteBg: 'rgba(239,68,68,0.96)'
+  },
+  available: {
+    key: 'available',
+    label: 'Available',
+    note: 'This court is now available.',
+    color: '#10b981',
+    noteBg: 'rgba(16,185,129,0.18)'
+  },
+  boardingSoon: {
+    key: 'boardingSoon',
+    label: 'Boarding Soon',
+    note: 'Please check in to start.',
+    color: '#6f4ae6',
+    noteBg: 'rgba(111,74,230,0.18)'
+  },
+  late: {
+    key: 'late',
+    label: 'Late',
+    note: 'Please check in as soon as possible.',
+    /** 与 available 同色板一致；主倒计时红色在 VenueWallCard 内单独覆盖 */
+    color: '#10b981',
+    noteBg: 'rgba(16,185,129,0.18)'
+  }
+};
+export function alphaColor(hex, alpha) {
+  var clean = hex.replace('#', '');
+  var full = clean.length === 3 ? clean.split('').map(function (c) {
+    return c + c;
+  }).join('') : clean;
+  var num = parseInt(full, 16);
+  var r = num >> 16 & 255;
+  var g = num >> 8 & 255;
+  var b = num & 255;
+  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
+}
+export var clamp = function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+};
+
+/** 由卡片字段推导状态键（与演示页 test.tsx 规则一致） */
+export function deriveVenueWallStatus(card) {
+  var s = card.status;
+  if (s === 'available') return 'available';
+  if (s === 'boardingSoon') return 'boardingSoon';
+  if (s === 'late') return 'late';
+  if (s === 'endingSoon') return 'endingSoon';
+  if (s === 'expired') return 'expired';
+  if (s === 'inUse') return 'inUse';
+
+  /** 兼容旧数据：无 status 时退回 remainingMin 推断（不再看 light 字段） */
+  if (card.currentBooking === 'Available to Book') return 'available';
+  var rm = card.remainingMin;
+  if (rm != null && rm <= 0) return 'expired';
+  if (rm != null && rm <= 10) return 'endingSoon';
+  return 'inUse';
+}
+export function formatVenueWallCountdown(min) {
+  if (min < 0) return "".concat(Math.abs(min), "m overtime");
+  if (min === 0) return 'Ending now';
+  return "".concat(min, "m left");
+}

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { RecordBoardFloorMapProps } from '../types';
-import type { RecordBoardCalendarProps } from '../types';
+import type { RecordBoardFloorMapProps, RecordBoardCalendarProps, RecordBoardResourceWallProps } from '../types';
 /**
  * ShellFrame 解析子节点后的元信息，供 ToolBar 等判断是否需要「表格 / 平面图 / 日历」Segmented。
  * 未处于 ShellFrame.Provider 内时为 undefined（如单独挂载 ToolBar）。
@@ -16,6 +15,10 @@ export interface RecordBoardShellBodyMeta {
     hasFloorMapSlot: boolean;
     /** 合并后是否存在可渲染的日历配置 */
     hasCalendarSlot: boolean;
+    /** 子组件 ResourceWall props 与根级 resourceWall 合并后的结果（子优先） */
+    effectiveResourceWallProps?: RecordBoardResourceWallProps;
+    /** 合并后是否存在大屏资源墙槽（根级或子节点声明即 true） */
+    hasResourceWallSlot: boolean;
 }
 export declare const RecordBoardShellBodyMetaContext: React.Context<RecordBoardShellBodyMeta | undefined>;
 export declare function useRecordBoardShellBodyMeta(): RecordBoardShellBodyMeta | undefined;