@pisell/materials 6.11.39 → 6.11.41

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

@@ -4,17 +4,17 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { getText } from "../../../../locales";
 import { NoteTicker } from "./NoteTicker";
 import { RESOURCE_WALL_NOTE_MARQUEE_MIN_CHARS } from "./resourceWallConstants";
 import { buildVenueWallCardPresentation } from "./venueWallCardPresentation";
-import { getVenueWallStatusToneMap, alphaColor, clamp } from "./venueWallUtils";
+import { getVenueWallStatusToneMap, alphaColor } from "./venueWallUtils";
+import "./VenueWallCard.less";
 
 /**
  * 将服务端给出的「整分钟」计数与收到时的墙钟对齐，随 `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;
@@ -33,12 +33,21 @@ function useDriftMinutesFromEpoch(value, resourceId, now) {
       at: Date.now()
     });
   }, [resourceId, value]);
-  var drifted = epoch.min - Math.floor((now - epoch.at) / 60000);
-  return allowNegative ? drifted : Math.max(0, drifted);
+  var elapsedMs = now - epoch.at;
+  var precise = epoch.min - elapsedMs / 60000;
+  var drifted = epoch.min - Math.floor(elapsedMs / 60000);
+  var whole = allowNegative ? drifted : Math.max(0, drifted);
+  var preciseClamped = allowNegative ? precise : Math.max(0, precise);
+  return {
+    whole: whole,
+    precise: preciseClamped
+  };
 }
 
-/** `late` 等递增分钟：以收到时刻为锚，随 `now` 增长 */
-function useDriftUpMinutesFromEpoch(value, resourceId, now) {
+/**
+ * 迟到分钟等：自服务给出的整分起，随 `now` 递增；`value` 或 `resourceId` 变化时重锚定。
+ */
+function useDriftAccumulatedMinutesFromEpoch(value, resourceId, now) {
   var _useState3 = useState(function () {
       return {
         min: value !== null && value !== void 0 ? value : 0,
@@ -54,12 +63,21 @@ function useDriftUpMinutesFromEpoch(value, resourceId, now) {
       at: Date.now()
     });
   }, [resourceId, value]);
-  return Math.max(0, epoch.min + Math.floor((now - epoch.at) / 60000));
+  return epoch.min + Math.floor((now - epoch.at) / 60000);
+}
+
+/** 下一预约行里「无数据」占位（不展示联系人兜底） */
+var NEXT_LIST_PLACEHOLDER_VALUES = new Set(['', '-', '–', '—', '―', "\u2014", "\u2013"]);
+function nextListFieldIsMeaningful(raw) {
+  var s = String(raw !== null && raw !== void 0 ? raw : '').trim();
+  if (!s) return false;
+  return !NEXT_LIST_PLACEHOLDER_VALUES.has(s);
 }
 var DEFAULT_OCCUPIED = '#6f4ae6';
-var DEFAULT_AVAILABLE = '#10b981';
+/** 空闲态卡片主色（淡灰，随 alpha 打底条等） */
+var DEFAULT_AVAILABLE = '#94a3b8';
 function VenueWallCardInner(_ref) {
-  var _card$nextList, _card$nextList$length, _card$nextList2, _nextItem$booking;
+  var _card$nextList, _card$resource, _card$area;
   var card = _ref.card,
     wallNowMs = _ref.wallNowMs,
     _ref$boardingSoonBefo = _ref.boardingSoonBeforeMin,
@@ -68,8 +86,6 @@ function VenueWallCardInner(_ref) {
     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,
     statusToneMapProp = _ref.statusToneMap,
     _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'light' : _ref$appearance;
@@ -77,39 +93,19 @@ function VenueWallCardInner(_ref) {
   var isDark = appearance === 'dark';
   var idleMain = isDark ? '#e2e8f0' : '#0f172a';
   var idleSub = isDark ? '#94a3b8' : '#94a3b8';
-  var cardRef = useRef(null);
-  var _useState5 = useState({
-      width: 420,
-      height: 300
-    }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    cardSize = _useState6[0],
-    setCardSize = _useState6[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 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 _useDriftMinutesFromE = useDriftMinutesFromEpoch(card.remainingMin, card.resourceId, wallNowMs, true),
+    liveRemainingMin = _useDriftMinutesFromE.whole,
+    liveRemainingPreciseMin = _useDriftMinutesFromE.precise;
+  var _useDriftMinutesFromE2 = useDriftMinutesFromEpoch(card.startsInMin, card.resourceId, wallNowMs, false),
+    liveStartsInMin = _useDriftMinutesFromE2.whole;
+  var liveLateMin = useDriftAccumulatedMinutesFromEpoch(card.lateMin, card.resourceId, wallNowMs);
   var presentation = useMemo(function () {
     return buildVenueWallCardPresentation({
       card: card,
       toneMap: toneMap,
+      wallNowMs: wallNowMs,
       liveRemainingMin: liveRemainingMin,
+      liveRemainingPreciseMin: liveRemainingPreciseMin,
       liveStartsInMin: liveStartsInMin,
       liveLateMin: liveLateMin,
       boardingSoonBeforeMin: boardingSoonBeforeMin,
@@ -118,353 +114,197 @@ function VenueWallCardInner(_ref) {
       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,
+  }, [card, toneMap, wallNowMs, liveRemainingMin, liveRemainingPreciseMin, liveStartsInMin, liveLateMin, boardingSoonBeforeMin, idleMain, idleSub, occupiedCardColor, availableCardColor]);
+  var floorLikeStatus = presentation.floorLikeStatus,
+    headerStatusKey = presentation.headerStatusKey,
+    headerStatusLabel = presentation.headerStatusLabel,
+    headerStatusColor = presentation.headerStatusColor,
+    cardVariant = presentation.cardVariant,
     mainColor = presentation.mainColor,
-    currentLabel = presentation.currentLabel,
-    currentTime = presentation.currentTime,
-    currentName = presentation.currentName,
-    currentNameColor = presentation.currentNameColor,
-    nextNameColor = presentation.nextNameColor,
+    subColor = presentation.subColor,
+    surfaceAccentColor = presentation.surfaceAccentColor,
+    primaryEmphasisLine = presentation.primaryEmphasisLine,
+    primaryEmphasisColor = presentation.primaryEmphasisColor,
+    timeRangeLine = presentation.timeRangeLine,
+    contactLine = presentation.contactLine,
+    showProgress = presentation.showProgress,
     progress = presentation.progress,
     progressColor = presentation.progressColor,
-    rightTag = presentation.rightTag,
-    rightTagColor = presentation.rightTagColor,
-    rightTagBg = presentation.rightTagBg,
-    rightTagBorder = presentation.rightTagBorder,
-    surfaceAccentColor = presentation.surfaceAccentColor;
+    showEndingSoonMarquee = presentation.showEndingSoonMarquee,
+    marqueeText = presentation.marqueeText,
+    marqueeColor = presentation.marqueeColor,
+    marqueeShellBackground = presentation.marqueeShellBackground;
   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) : '';
-  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);
+  var nextTimeMeaningful = nextItem ? nextListFieldIsMeaningful(nextItem.time) : false;
+  var nextContactMeaningful = nextItem ? nextListFieldIsMeaningful(nextItem.booking) : false;
+  var hasNextWallSection = Boolean(nextItem && (nextTimeMeaningful || nextContactMeaningful));
+  var nextTimeSoloLarge = nextTimeMeaningful && !nextContactMeaningful;
+  var cardBg = cardVariant === 'occupied' ? "linear-gradient(180deg, ".concat(alphaColor(occupiedCardColor, 0.96), " 0%, ").concat(alphaColor(occupiedCardColor, 0.88), " 100%)") : alphaColor(surfaceAccentColor, floorLikeStatus === 'reserved' ? 0.06 : 0.03);
+  var cardBorder = cardVariant === 'occupied' ? alphaColor(occupiedCardColor, 0.5) : alphaColor(surfaceAccentColor, 0.18);
+  var moduleBorder = cardVariant === 'occupied' ? 'rgba(255,255,255,0.10)' : alphaColor(surfaceAccentColor, 0.2);
+  var currentPanelBg = cardVariant === 'occupied' ? 'rgba(255,255,255,0.16)' : alphaColor(surfaceAccentColor, floorLikeStatus === 'reserved' ? 0.18 : 0.2);
+
+  /**
+   * 「当前预约」区块标题 / 时段 / 联系人：
+   * - 占用卡：纯白
+   * - 预约中（Reserved）：主色 slate 略透明，比纯黑柔和、仍明显强于 subColor
+   * - 空闲等：沿用 subColor
+   */
+  var currentSectionInk = cardVariant === 'occupied' ? '#ffffff' : floorLikeStatus === 'reserved' ? alphaColor(idleMain, 0.78) : subColor;
+  var nextPanelBg = cardVariant === 'occupied' ? 'rgba(255,255,255,0.04)' : alphaColor(surfaceAccentColor, floorLikeStatus === 'reserved' ? 0.1 : 0.08);
+
+  /** 预约中：Next 区联系人/时段与「当前预约」区一致，用主字色半透明，避免仅 subColor 发灰 */
+  var nextSectionInk = cardVariant === 'occupied' ? subColor : floorLikeStatus === 'reserved' ? alphaColor(idleMain, 0.78) : subColor;
+  var resourceTitleLabel = String((_card$resource = card.resource) !== null && _card$resource !== void 0 ? _card$resource : '').trim();
+  /** 与平面图同源：`form_code` → 合并行 `area`，作资源类型/表单类型展示 */
+  var resourceTypeLabel = String((_card$area = card.area) !== null && _card$area !== void 0 ? _card$area : '').trim();
+  var headerStatusClass = "pisell-resource-wall-card__header-status--".concat(headerStatusKey);
 
   /**
-   * 外层卡片高度会被父级网格 `1fr` 行拉伸；若内层 grid 仍用固定 `px` 行高，
-   * 则“卡片容器变高但内容区不跟着长高”，表现为底部空白。
-   * 这里用 `minmax(基准px, nfr)` 把增量高度主要分配给 CURRENT / NEXT 两个主模块。
+   * 5 态胶囊：
+   * - empty / reserved：沿用旧 accent 描边样式（颜色取 tone）
+   * - late：accent 卡上浮红描边 + 红字（与一档强调色同源）
+   * - occupied（inUse / endingSoon）：白字白描边白底（沿用旧占用样式）
+   * - expired：占用卡上以红色实心胶囊 + 白字（与倒计时红同色相）
    */
-  var gridTemplateRows = "".concat(headerHeight, "px minmax(").concat(Math.max(120, currentHeight), "px, 4fr) minmax(").concat(Math.max(72, nextHeight), "px, 2fr) ").concat(noteHeight, "px");
+  var headerStatusStyle = function () {
+    if (headerStatusKey === 'empty') {
+      return {
+        color: headerStatusColor
+      };
+    }
+    if (headerStatusKey === 'reserved' || headerStatusKey === 'late') {
+      return {
+        color: headerStatusColor
+      };
+    }
+    if (headerStatusKey === 'expired') {
+      return {
+        color: '#ffffff',
+        background: headerStatusColor
+      };
+    }
+    return {
+      color: '#ffffff'
+    };
+  }();
   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: isDark ? '0 18px 48px rgba(0,0,0,0.35)' : '0 18px 48px rgba(15,23,42,0.06)'
     }
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      flex: 1,
-      display: 'grid',
-      minHeight: 0,
-      height: '100%',
-      padding: shellPad,
-      gap: sectionGap,
-      gridTemplateRows: gridTemplateRows
-    }
+    className: "pisell-resource-wall-card__scale-root"
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'grid',
-      minHeight: 0,
-      gridTemplateRows: '1fr 2fr',
-      rowGap: sectionGap
-    }
+    className: "pisell-resource-wall-card__grid ".concat(hasNextWallSection ? 'pisell-resource-wall-card__grid--with-next' : 'pisell-resource-wall-card__grid--no-next')
+  }, /*#__PURE__*/React.createElement("header", {
+    className: "pisell-resource-wall-card__header"
   }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-resource-wall-card__header-main"
+  }, resourceTypeLabel ? /*#__PURE__*/React.createElement("div", {
+    className: "pisell-resource-wall-card__tier2 pisell-resource-wall-card__header-type",
     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
+      color: subColor
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, resourceTypeLabel) : null, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-resource-wall-card__header-name",
     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", {
+  }, resourceTitleLabel || "\xA0")), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-resource-wall-card__header-status ".concat(headerStatusClass),
+    style: headerStatusStyle
+  }, headerStatusLabel)), /*#__PURE__*/React.createElement("section", {
+    className: "pisell-resource-wall-card__panel".concat(cardVariant === 'occupied' ? ' pisell-resource-wall-card__panel--occupied-current' : floorLikeStatus === 'reserved' ? ' pisell-resource-wall-card__panel--reserved-current' : ''),
     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'
+      borderColor: cardVariant === 'occupied' ? 'rgba(255,255,255,0.28)' : moduleBorder,
+      background: currentPanelBg,
+      minHeight: 0
     }
   }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-resource-wall-card__section-title".concat(cardVariant === 'occupied' ? ' pisell-resource-wall-card__section-title--occupied-current' : floorLikeStatus === 'reserved' ? ' pisell-resource-wall-card__section-title--reserved-current' : ''),
     style: {
-      minWidth: 0
+      color: currentSectionInk
     }
+  }, getText('pisell-resource-wall-card-label-current')), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-resource-wall-card__current-body"
   }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-resource-wall-card__current-main"
+  }, timeRangeLine ? /*#__PURE__*/React.createElement("div", {
+    className: "pisell-resource-wall-card__tier2",
     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
+      color: currentSectionInk
     }
-  }, currentTime || "\xA0")), /*#__PURE__*/React.createElement("div", {
+  }, timeRangeLine) : null, contactLine ? /*#__PURE__*/React.createElement("div", {
+    className: "pisell-resource-wall-card__tier2",
     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'
+      color: currentSectionInk
     }
-  }, currentName)), /*#__PURE__*/React.createElement("div", {
+  }, contactLine) : null), primaryEmphasisLine || showProgress || showEndingSoonMarquee && marqueeText || floorLikeStatus === 'empty' ? /*#__PURE__*/React.createElement("div", {
+    className: "pisell-resource-wall-card__current-footer"
+  }, floorLikeStatus === 'empty' ? /*#__PURE__*/React.createElement("div", {
+    className: "pisell-resource-wall-card__current-footer-emphasis pisell-resource-wall-card__tier2",
     style: {
-      display: 'flex',
-      alignItems: 'flex-end',
-      minHeight: 0,
-      overflow: 'hidden'
+      color: currentSectionInk
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, getText('pisell-resource-wall-card-current-not-in-use')) : null, primaryEmphasisLine ? /*#__PURE__*/React.createElement("div", {
+    className: "pisell-resource-wall-card__current-footer-emphasis pisell-resource-wall-card__tier1",
     style: {
-      fontWeight: 600,
-      letterSpacing: '-0.02em',
-      whiteSpace: 'nowrap',
-      fontSize: heroSize,
-      lineHeight: 1.08,
-      color: heroColor,
-      maxWidth: heroTextMaxWidth
+      color: primaryEmphasisColor
     }
-  }, heroText)), statusKey === 'boardingSoon' || isOccupied ? /*#__PURE__*/React.createElement("div", {
+  }, primaryEmphasisLine) : null, showProgress ? /*#__PURE__*/React.createElement("div", {
+    className: "pisell-resource-wall-card__progress-wrap",
     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)'
+      background: cardVariant === 'occupied' ? 'rgba(255,255,255,0.14)' : 'rgba(148,163,184,0.18)'
     }
   }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-resource-wall-card__progress-fill",
     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", {
+  })) : null, showEndingSoonMarquee && marqueeText ? /*#__PURE__*/React.createElement("div", {
+    className: "pisell-resource-wall-card__marquee-shell",
     style: {
-      height: '100%',
-      minHeight: 0,
-      display: 'grid',
-      gridTemplateRows: '1fr 2fr',
-      rowGap: sectionGap
+      background: marqueeShellBackground
     }
   }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-resource-wall-card__tier3",
     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 ? getText('pisell-resource-wall-card-next-line').replace('{time}', nextItem.time) : getText('pisell-resource-wall-card-label-next')), /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontWeight: 600,
-      flexShrink: 0,
-      fontSize: nextMetaSize,
-      color: subColor,
-      lineHeight: 1
+      color: marqueeColor
     }
-  }, nextCountLabel)), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(NoteTicker, {
+    text: marqueeText,
+    color: marqueeColor,
+    duration: 24,
+    shouldMarquee: marqueeText.length > RESOURCE_WALL_NOTE_MARQUEE_MIN_CHARS
+  }))) : null) : null)), hasNextWallSection ? /*#__PURE__*/React.createElement("section", {
+    className: "pisell-resource-wall-card__panel".concat(floorLikeStatus === 'reserved' ? ' pisell-resource-wall-card__panel--reserved-next' : ''),
     style: {
-      display: 'flex',
-      alignItems: 'flex-start',
-      minWidth: 0,
+      borderColor: moduleBorder,
+      background: nextPanelBg,
       minHeight: 0
     }
   }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-resource-wall-card__section-title".concat(floorLikeStatus === 'reserved' ? ' pisell-resource-wall-card__section-title--reserved-next' : ''),
     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'
+      color: nextSectionInk
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, getText('pisell-resource-wall-card-label-next')), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-resource-wall-card__next-stack".concat(nextContactMeaningful && nextTimeMeaningful ? ' pisell-resource-wall-card__next-stack--both-lines' : '')
+  }, nextContactMeaningful && nextItem ? /*#__PURE__*/React.createElement("div", {
+    className: "pisell-resource-wall-card__tier2",
     style: {
-      width: Math.max(8, unit * 0.12),
-      height: Math.max(8, unit * 0.12),
-      borderRadius: 999,
-      background: heroColor,
-      flex: '0 0 auto'
+      color: nextSectionInk
     }
-  }), /*#__PURE__*/React.createElement("div", {
+  }, String(nextItem.booking).trim()) : null, nextTimeMeaningful && nextItem ? /*#__PURE__*/React.createElement("div", {
+    className: nextTimeSoloLarge ? 'pisell-resource-wall-card__next-time-solo' : 'pisell-resource-wall-card__tier2',
     style: {
-      fontSize: noteSize,
-      color: noteTextColor,
-      width: '100%',
-      height: '100%',
-      display: 'flex',
-      alignItems: 'center'
+      color: nextSectionInk
     }
-  }, /*#__PURE__*/React.createElement(NoteTicker, {
-    text: noteText,
-    color: noteTextColor,
-    duration: 24,
-    shouldMarquee: noteText.length > RESOURCE_WALL_NOTE_MARQUEE_MIN_CHARS
-  })))));
+  }, String(nextItem.time).trim()) : null)) : null)));
 }
 
 /** 单块场地大屏卡：漂移与文案由 {@link buildVenueWallCardPresentation} 统一计算 */