@pisell/materials 6.11.36 → 6.11.38

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

@@ -1,38 +1,15 @@
-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 React, { useEffect, useMemo, useRef, useState } from 'react';
 import { getText } from "../../../../locales";
 import { NoteTicker } from "./NoteTicker";
-import { getVenueWallStatusToneMap, 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;
-}
+import { RESOURCE_WALL_NOTE_MARQUEE_MIN_CHARS } from "./resourceWallConstants";
+import { buildVenueWallCardPresentation } from "./venueWallCardPresentation";
+import { getVenueWallStatusToneMap, alphaColor, clamp } from "./venueWallUtils";
 
 /**
  * 将服务端给出的「整分钟」计数与收到时的墙钟对齐，随 `now` 递减；
@@ -41,15 +18,15 @@ function useVenueWallClockNow() {
  */
 function useDriftMinutesFromEpoch(value, resourceId, now) {
   var allowNegative = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  var _useState3 = useState(function () {
+  var _useState = useState(function () {
       return {
         min: value !== null && value !== void 0 ? value : 0,
         at: Date.now()
       };
     }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    epoch = _useState4[0],
-    setEpoch = _useState4[1];
+    _useState2 = _slicedToArray(_useState, 2),
+    epoch = _useState2[0],
+    setEpoch = _useState2[1];
   useEffect(function () {
     setEpoch({
       min: value !== null && value !== void 0 ? value : 0,
@@ -62,15 +39,15 @@ function useDriftMinutesFromEpoch(value, resourceId, now) {
 
 /** `late` 等递增分钟：以收到时刻为锚，随 `now` 增长 */
 function useDriftUpMinutesFromEpoch(value, resourceId, now) {
-  var _useState5 = useState(function () {
+  var _useState3 = useState(function () {
       return {
         min: value !== null && value !== void 0 ? value : 0,
         at: Date.now()
       };
     }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    epoch = _useState6[0],
-    setEpoch = _useState6[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    epoch = _useState4[0],
+    setEpoch = _useState4[1];
   useEffect(function () {
     setEpoch({
       min: value !== null && value !== void 0 ? value : 0,
@@ -81,13 +58,10 @@ function useDriftUpMinutesFromEpoch(value, resourceId, now) {
 }
 var DEFAULT_OCCUPIED = '#6f4ae6';
 var DEFAULT_AVAILABLE = '#10b981';
-
-/**
- * 单块场地大屏卡（由 test.tsx CardItem 迁移，样式为内联 + 少量类名，不依赖 Tailwind）。
- */
-export var VenueWallCard = function VenueWallCard(_ref) {
-  var _toneMap$statusKey, _card$currentTime, _card$currentBooking, _card$nextList, _card$nextList$length, _card$nextList2, _nextItem$booking;
+function VenueWallCardInner(_ref) {
+  var _card$nextList, _card$nextList$length, _card$nextList2, _nextItem$booking;
   var card = _ref.card,
+    wallNowMs = _ref.wallNowMs,
     _ref$boardingSoonBefo = _ref.boardingSoonBeforeMin,
     boardingSoonBeforeMin = _ref$boardingSoonBefo === void 0 ? 10 : _ref$boardingSoonBefo,
     _ref$occupiedCardColo = _ref.occupiedCardColor,
@@ -104,13 +78,13 @@ export var VenueWallCard = function VenueWallCard(_ref) {
   var idleMain = isDark ? '#e2e8f0' : '#0f172a';
   var idleSub = isDark ? '#94a3b8' : '#94a3b8';
   var cardRef = useRef(null);
-  var _useState7 = useState({
+  var _useState5 = useState({
       width: 420,
       height: 300
     }),
-    _useState8 = _slicedToArray(_useState7, 2),
-    cardSize = _useState8[0],
-    setCardSize = _useState8[1];
+    _useState6 = _slicedToArray(_useState5, 2),
+    cardSize = _useState6[0],
+    setCardSize = _useState6[1];
   useEffect(function () {
     if (!cardRef.current) return;
     var node = cardRef.current;
@@ -128,81 +102,46 @@ export var VenueWallCard = function VenueWallCard(_ref) {
       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 = (_toneMap$statusKey = toneMap[statusKey]) !== null && _toneMap$statusKey !== void 0 ? _toneMap$statusKey : toneMap.inUse;
-  var isOccupied = ['inUse', 'endingSoon', 'expired'].includes(statusKey);
-  var heroText = isOccupied ? formatVenueWallCountdown(liveRemainingMin) : getText('pisell-resource-wall-card-hero-available');
-  var heroColor = isOccupied ? statusKey === 'inUse' ? '#ffffff' : tone.color : toneMap.available.color;
-  var noteText = isOccupied ? tone.note : toneMap.available.note;
-  var noteTextColor = isOccupied ? '#ffffff' : idleMain;
-  var noteBg = isOccupied ? tone.noteBg : alphaColor(availableCardColor, 0.2);
-  var subColor = isOccupied ? 'rgba(255,255,255,0.80)' : idleSub;
-  var mainColor = isOccupied ? '#ffffff' : idleMain;
-  var currentLabel = getText('pisell-resource-wall-card-label-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 liveRemainingMin = useDriftMinutesFromEpoch(card.remainingMin, card.resourceId, wallNowMs, true);
+  var liveStartsInMin = useDriftMinutesFromEpoch(card.startsInMin, card.resourceId, wallNowMs, false);
+  var liveLateMin = useDriftUpMinutesFromEpoch(card.lateMin, card.resourceId, wallNowMs);
+  var presentation = useMemo(function () {
+    return buildVenueWallCardPresentation({
+      card: card,
+      toneMap: toneMap,
+      liveRemainingMin: liveRemainingMin,
+      liveStartsInMin: liveStartsInMin,
+      liveLateMin: liveLateMin,
+      boardingSoonBeforeMin: boardingSoonBeforeMin,
+      idleMain: idleMain,
+      idleSub: idleSub,
+      occupiedCardColor: occupiedCardColor,
+      availableCardColor: availableCardColor
+    });
+  }, [card, toneMap, liveRemainingMin, liveStartsInMin, liveLateMin, boardingSoonBeforeMin, idleMain, idleSub, occupiedCardColor, availableCardColor]);
+  var statusKey = presentation.statusKey,
+    isOccupied = presentation.isOccupied,
+    heroText = presentation.heroText,
+    heroColor = presentation.heroColor,
+    noteText = presentation.noteText,
+    noteTextColor = presentation.noteTextColor,
+    noteBg = presentation.noteBg,
+    subColor = presentation.subColor,
+    mainColor = presentation.mainColor,
+    currentLabel = presentation.currentLabel,
+    currentTime = presentation.currentTime,
+    currentName = presentation.currentName,
+    currentNameColor = presentation.currentNameColor,
+    nextNameColor = presentation.nextNameColor,
+    progress = presentation.progress,
+    progressColor = presentation.progressColor,
+    rightTag = presentation.rightTag,
+    rightTagColor = presentation.rightTagColor,
+    rightTagBg = presentation.rightTagBg,
+    rightTagBorder = presentation.rightTagBorder,
+    surfaceAccentColor = presentation.surfaceAccentColor;
   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 = getText('pisell-resource-wall-card-starts-in').replace('{n}', String(liveStartsInMin));
-    heroColor = toneMap.boardingSoon.color;
-    noteText = toneMap.boardingSoon.note;
-    noteTextColor = toneMap.boardingSoon.color;
-    noteBg = alphaColor(toneMap.boardingSoon.color, 0.18);
-    currentLabel = getText('pisell-resource-wall-card-label-next');
-    currentName = (_card$currentBooking2 = card.currentBooking) !== null && _card$currentBooking2 !== void 0 ? _card$currentBooking2 : '';
-    currentNameColor = toneMap.boardingSoon.color;
-    nextNameColor = toneMap.boardingSoon.color;
-    progress = clamp((boardingSoonBeforeMin - liveStartsInMin) / boardingSoonBeforeMin * 100, 0, 100);
-    progressColor = toneMap.boardingSoon.color;
-    rightTag = toneMap.boardingSoon.label;
-    rightTagColor = toneMap.boardingSoon.color;
-    rightTagBg = alphaColor(toneMap.boardingSoon.color, 0.12);
-    rightTagBorder = alphaColor(toneMap.boardingSoon.color, 0.35);
-  }
-  if (statusKey === 'late') {
-    var _card$currentBooking3;
-    heroText = getText('pisell-resource-wall-card-late').replace('{n}', String(liveLateMin));
-    /** 仅主文案用红色；其余视觉与 Available 对齐 */
-    heroColor = 'rgb(239, 68, 68)';
-    noteText = toneMap.late.note;
-    noteTextColor = toneMap.available.color;
-    noteBg = toneMap.available.noteBg;
-    currentLabel = getText('pisell-resource-wall-card-label-next');
-    currentName = (_card$currentBooking3 = card.currentBooking) !== null && _card$currentBooking3 !== void 0 ? _card$currentBooking3 : '';
-    currentNameColor = toneMap.available.color;
-    nextNameColor = toneMap.available.color;
-    progress = 100;
-    progressColor = toneMap.available.color;
-    rightTag = toneMap.late.label;
-    rightTagColor = toneMap.available.color;
-    rightTagBg = alphaColor(toneMap.available.color, 0.12);
-    rightTagBorder = alphaColor(toneMap.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 ? getText('pisell-resource-wall-countdown-zero-overtime') : formatVenueWallCountdown(liveRemainingMin);
-  }
-  var surfaceAccentColor = statusKey === 'late' ? availableCardColor : statusKey === 'boardingSoon' ? toneMap.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);
@@ -524,6 +463,10 @@ export var VenueWallCard = function VenueWallCard(_ref) {
     text: noteText,
     color: noteTextColor,
     duration: 24,
-    shouldMarquee: noteText.length > 32
+    shouldMarquee: noteText.length > RESOURCE_WALL_NOTE_MARQUEE_MIN_CHARS
   })))));
-};
+}
+
+/** 单块场地大屏卡：漂移与文案由 {@link buildVenueWallCardPresentation} 统一计算 */
+export var VenueWallCard = /*#__PURE__*/React.memo(VenueWallCardInner);
+VenueWallCard.displayName = 'VenueWallCard';

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

@@ -0,0 +1,2 @@
+/** 说明文案超过该长度时用跑马灯（与 NoteTicker / VenueWallCard 共用） */
+export declare const RESOURCE_WALL_NOTE_MARQUEE_MIN_CHARS = 32;

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

@@ -0,0 +1,2 @@
+/** 说明文案超过该长度时用跑马灯（与 NoteTicker / VenueWallCard 共用） */
+export var RESOURCE_WALL_NOTE_MARQUEE_MIN_CHARS = 32;

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

@@ -0,0 +1,42 @@
+import type { RecordBoardResourceWallCardModel } from '../../types';
+import { type VenueWallStatusKey, type VenueWallStatusTone } from './venueWallUtils';
+/** 由 {@link buildVenueWallCardPresentation} 产出，供 VenueWallCard 渲染层使用 */
+export declare type VenueWallCardPresentation = {
+    statusKey: VenueWallStatusKey;
+    isOccupied: boolean;
+    heroText: string;
+    heroColor: string;
+    noteText: string;
+    noteTextColor: string;
+    noteBg: string;
+    subColor: string;
+    mainColor: string;
+    currentLabel: string;
+    currentTime: string;
+    currentName: string;
+    currentNameColor: string;
+    nextNameColor: string;
+    progress: number;
+    progressColor: string;
+    rightTag: string;
+    rightTagColor: string;
+    rightTagBg: string;
+    rightTagBorder: string;
+    surfaceAccentColor: string;
+};
+/**
+ * 纯函数：根据实时漂移分钟数与六态配色表得到卡片主副文案、进度与标签样式。
+ * 与原先 VenueWallCard 内联分支逻辑一致，便于单测与维护。
+ */
+export declare function buildVenueWallCardPresentation(args: {
+    card: RecordBoardResourceWallCardModel;
+    toneMap: Record<VenueWallStatusKey, VenueWallStatusTone>;
+    liveRemainingMin: number;
+    liveStartsInMin: number;
+    liveLateMin: number;
+    boardingSoonBeforeMin: number;
+    idleMain: string;
+    idleSub: string;
+    occupiedCardColor: string;
+    availableCardColor: string;
+}): VenueWallCardPresentation;

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

@@ -0,0 +1,114 @@
+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); }
+import { getText } from "../../../../locales";
+import { alphaColor, clamp, deriveVenueWallStatus, formatVenueWallCountdown } from "./venueWallUtils";
+
+/** 由 {@link buildVenueWallCardPresentation} 产出，供 VenueWallCard 渲染层使用 */
+
+/**
+ * 纯函数：根据实时漂移分钟数与六态配色表得到卡片主副文案、进度与标签样式。
+ * 与原先 VenueWallCard 内联分支逻辑一致，便于单测与维护。
+ */
+export function buildVenueWallCardPresentation(args) {
+  var _toneMap$statusKey, _card$currentTime, _card$currentBooking;
+  var card = args.card,
+    toneMap = args.toneMap,
+    liveRemainingMin = args.liveRemainingMin,
+    liveStartsInMin = args.liveStartsInMin,
+    liveLateMin = args.liveLateMin,
+    boardingSoonBeforeMin = args.boardingSoonBeforeMin,
+    idleMain = args.idleMain,
+    idleSub = args.idleSub,
+    occupiedCardColor = args.occupiedCardColor,
+    availableCardColor = args.availableCardColor;
+  var statusKey = deriveVenueWallStatus(_objectSpread(_objectSpread({}, card), {}, {
+    remainingMin: liveRemainingMin
+  }));
+  var tone = (_toneMap$statusKey = toneMap[statusKey]) !== null && _toneMap$statusKey !== void 0 ? _toneMap$statusKey : toneMap.inUse;
+  var isOccupied = ['inUse', 'endingSoon', 'expired'].includes(statusKey);
+  var heroText = isOccupied ? formatVenueWallCountdown(liveRemainingMin) : getText('pisell-resource-wall-card-hero-available');
+  var heroColor = isOccupied ? statusKey === 'inUse' ? '#ffffff' : tone.color : toneMap.available.color;
+  var noteText = isOccupied ? tone.note : toneMap.available.note;
+  var noteTextColor = isOccupied ? '#ffffff' : idleMain;
+  var noteBg = isOccupied ? tone.noteBg : alphaColor(availableCardColor, 0.2);
+  var subColor = isOccupied ? 'rgba(255,255,255,0.80)' : idleSub;
+  var mainColor = isOccupied ? '#ffffff' : idleMain;
+  var currentLabel = getText('pisell-resource-wall-card-label-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);
+  if (statusKey === 'boardingSoon') {
+    var _card$currentBooking2;
+    heroText = getText('pisell-resource-wall-card-starts-in').replace('{n}', String(liveStartsInMin));
+    heroColor = toneMap.boardingSoon.color;
+    noteText = toneMap.boardingSoon.note;
+    noteTextColor = toneMap.boardingSoon.color;
+    noteBg = alphaColor(toneMap.boardingSoon.color, 0.18);
+    currentLabel = getText('pisell-resource-wall-card-label-next');
+    currentName = (_card$currentBooking2 = card.currentBooking) !== null && _card$currentBooking2 !== void 0 ? _card$currentBooking2 : '';
+    currentNameColor = toneMap.boardingSoon.color;
+    nextNameColor = toneMap.boardingSoon.color;
+    progress = clamp((boardingSoonBeforeMin - liveStartsInMin) / boardingSoonBeforeMin * 100, 0, 100);
+    progressColor = toneMap.boardingSoon.color;
+    rightTag = toneMap.boardingSoon.label;
+    rightTagColor = toneMap.boardingSoon.color;
+    rightTagBg = alphaColor(toneMap.boardingSoon.color, 0.12);
+    rightTagBorder = alphaColor(toneMap.boardingSoon.color, 0.35);
+  }
+  if (statusKey === 'late') {
+    var _card$currentBooking3;
+    heroText = getText('pisell-resource-wall-card-late').replace('{n}', String(liveLateMin));
+    heroColor = 'rgb(239, 68, 68)';
+    noteText = toneMap.late.note;
+    noteTextColor = toneMap.available.color;
+    noteBg = toneMap.available.noteBg;
+    currentLabel = getText('pisell-resource-wall-card-label-next');
+    currentName = (_card$currentBooking3 = card.currentBooking) !== null && _card$currentBooking3 !== void 0 ? _card$currentBooking3 : '';
+    currentNameColor = toneMap.available.color;
+    nextNameColor = toneMap.available.color;
+    progress = 100;
+    progressColor = toneMap.available.color;
+    rightTag = toneMap.late.label;
+    rightTagColor = toneMap.available.color;
+    rightTagBg = alphaColor(toneMap.available.color, 0.12);
+    rightTagBorder = alphaColor(toneMap.available.color, 0.35);
+  }
+  if (statusKey === 'expired') {
+    heroText = liveRemainingMin < 0 ? formatVenueWallCountdown(liveRemainingMin) : liveRemainingMin === 0 ? getText('pisell-resource-wall-countdown-zero-overtime') : formatVenueWallCountdown(liveRemainingMin);
+  }
+  var surfaceAccentColor = statusKey === 'late' ? availableCardColor : statusKey === 'boardingSoon' ? toneMap.boardingSoon.color : availableCardColor;
+  return {
+    statusKey: statusKey,
+    isOccupied: isOccupied,
+    heroText: heroText,
+    heroColor: heroColor,
+    noteText: noteText,
+    noteTextColor: noteTextColor,
+    noteBg: noteBg,
+    subColor: subColor,
+    mainColor: mainColor,
+    currentLabel: currentLabel,
+    currentTime: currentTime,
+    currentName: currentName,
+    currentNameColor: currentNameColor,
+    nextNameColor: nextNameColor,
+    progress: progress,
+    progressColor: progressColor,
+    rightTag: rightTag,
+    rightTagColor: rightTagColor,
+    rightTagBg: rightTagBg,
+    rightTagBorder: rightTagBorder,
+    surfaceAccentColor: surfaceAccentColor
+  };
+}

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

@@ -1,3 +1,6 @@
+/**
+ * 资源墙（Venue Wall）共用工具：六态键、默认色板、倒计时文案、卡片状态推导、配色合并与 diff。
+ */
 import type { RecordBoardResourceWallCardModel } from '../../types';
 export declare type VenueWallStatusKey = 'inUse' | 'endingSoon' | 'expired' | 'available' | 'boardingSoon' | 'late';
 /** 单态展示配置（与 {@link VENUE_WALL_STATUS_COLOR_MAP} 值同形） */
@@ -21,11 +24,34 @@ export declare type VenueWallAppearanceTheme = {
     dark?: VenueWallAppearanceSlot;
 };
 export declare const VENUE_WALL_STATUS_KEYS: VenueWallStatusKey[];
+/**
+ * 六态默认色与占位英文；`getVenueWallStatusToneMap` 会将 label/note 换为 i18n，此处仅作 merge 基底。
+ */
 export declare const VENUE_WALL_STATUS_COLOR_MAP: Record<VenueWallStatusKey, VenueWallStatusTone>;
+/** 将 `#RGB` / `#RRGGBB` 转为 `rgba(...)`，供渐变与半透明底 */
 export declare function alphaColor(hex: string, alpha: number): string;
+/** 将数值限制在 [min, max]（布局行列、主文案比例等） */
 export declare const clamp: (value: number, min: number, max: number) => number;
 /** 由卡片字段推导状态键（与演示页 test.tsx 规则一致） */
 export declare function deriveVenueWallStatus(card: RecordBoardResourceWallCardModel): VenueWallStatusKey;
+/**
+ * ToolBar Sort 写入的 `searchParams.sort`（如 `status:asc:string`）拆出字段名与升降序。
+ */
+export declare function parseRecordBoardToolbarSortParam(sort: unknown): {
+    field: string;
+    dir: 'asc' | 'desc';
+} | null;
+/** 当 Sort 字段名匹配这些 key（忽略大小写）时，资源墙按占用态重排卡片 */
+export declare const DEFAULT_RESOURCE_WALL_STATUS_SORT_FIELD_KEYS: readonly ["status"];
+export declare function matchesResourceWallStatusSortField(sortField: string, keys: readonly string[]): boolean;
+/**
+ * 用于资源墙排序：占用/将结/已结束为 1，其余为 0（与 {@link deriveVenueWallStatus} 一致）。
+ * asc → 空闲侧在前；desc → 占用侧在前。
+ */
+export declare function venueWallOccupiedSortRank(card: RecordBoardResourceWallCardModel): 0 | 1;
+/**
+ * 将「剩余/超支分钟数」格式化为跑码条/主副标题用短文案（走 i18n 模板，负值表示 overtime）。
+ */
 export declare function formatVenueWallCountdown(min: number): string;
 /**
  * 合并默认六态配色与业务覆盖，供 {@link VenueWallCard} 与 Control Panel 表单初值共用。

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

@@ -7,6 +7,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * 资源墙（Venue Wall）共用工具：六态键、默认色板、倒计时文案、卡片状态推导、配色合并与 diff。
+ */
+
 import { getText } from "../../../../locales";
 
 /** 单态展示配置（与 {@link VENUE_WALL_STATUS_COLOR_MAP} 值同形） */
@@ -16,6 +20,10 @@ import { getText } from "../../../../locales";
 /** 单外观（浅 / 深）下的占用/空闲色与六态覆盖；持久化时 light、dark 各存一份 */
 
 export var VENUE_WALL_STATUS_KEYS = ['inUse', 'endingSoon', 'expired', 'available', 'boardingSoon', 'late'];
+
+/**
+ * 六态默认色与占位英文；`getVenueWallStatusToneMap` 会将 label/note 换为 i18n，此处仅作 merge 基底。
+ */
 export var VENUE_WALL_STATUS_COLOR_MAP = {
   inUse: {
     key: 'inUse',
@@ -61,6 +69,8 @@ export var VENUE_WALL_STATUS_COLOR_MAP = {
     noteBg: 'rgba(16,185,129,0.18)'
   }
 };
+
+/** 将 `#RGB` / `#RRGGBB` 转为 `rgba(...)`，供渐变与半透明底 */
 export function alphaColor(hex, alpha) {
   var clean = hex.replace('#', '');
   var full = clean.length === 3 ? clean.split('').map(function (c) {
@@ -72,6 +82,8 @@ export function alphaColor(hex, alpha) {
   var b = num & 255;
   return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
 }
+
+/** 将数值限制在 [min, max]（布局行列、主文案比例等） */
 export var clamp = function clamp(value, min, max) {
   return Math.max(min, Math.min(max, value));
 };
@@ -93,13 +105,54 @@ export function deriveVenueWallStatus(card) {
   if (rm != null && rm <= 10) return 'endingSoon';
   return 'inUse';
 }
+
+/**
+ * ToolBar Sort 写入的 `searchParams.sort`（如 `status:asc:string`）拆出字段名与升降序。
+ */
+export function parseRecordBoardToolbarSortParam(sort) {
+  if (sort == null || typeof sort !== 'string') return null;
+  var idx = sort.indexOf(':');
+  if (idx <= 0) return null;
+  var field = sort.slice(0, idx);
+  var rest = sort.slice(idx + 1);
+  var dirSep = rest.indexOf(':');
+  var dirRaw = dirSep >= 0 ? rest.slice(0, dirSep) : rest;
+  if (dirRaw !== 'asc' && dirRaw !== 'desc') return null;
+  return {
+    field: field,
+    dir: dirRaw
+  };
+}
+
+/** 当 Sort 字段名匹配这些 key（忽略大小写）时，资源墙按占用态重排卡片 */
+export var DEFAULT_RESOURCE_WALL_STATUS_SORT_FIELD_KEYS = ['status'];
+export function matchesResourceWallStatusSortField(sortField, keys) {
+  var n = sortField.trim().toLowerCase();
+  return keys.some(function (k) {
+    return k.trim().toLowerCase() === n;
+  });
+}
+
+/**
+ * 用于资源墙排序：占用/将结/已结束为 1，其余为 0（与 {@link deriveVenueWallStatus} 一致）。
+ * asc → 空闲侧在前；desc → 占用侧在前。
+ */
+export function venueWallOccupiedSortRank(card) {
+  var k = deriveVenueWallStatus(card);
+  return k === 'inUse' || k === 'endingSoon' || k === 'expired' ? 1 : 0;
+}
 function formatDurationHM(minAbs) {
   var safe = Number.isFinite(minAbs) ? Math.max(0, Math.floor(minAbs)) : 0;
   if (safe < 60) return "".concat(safe, "m");
   var h = Math.floor(safe / 60);
   var m = safe % 60;
-  return "".concat(h, "h").concat(String(m).padStart(2, '0'), "m");
+  /** `11h 28m`：h 与分钟之间加空格，避免 `11h28m` 连成一体难读 */
+  return "".concat(h, "h ").concat(String(m).padStart(2, '0'), "m");
 }
+
+/**
+ * 将「剩余/超支分钟数」格式化为跑码条/主副标题用短文案（走 i18n 模板，负值表示 overtime）。
+ */
 export function formatVenueWallCountdown(min) {
   if (min < 0) {
     var n = formatDurationHM(Math.abs(min));