@pisell/materials 6.11.39 → 6.11.41

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

@@ -0,0 +1,335 @@
+/** VenueWallCard：布局分区 + 三档字号（字阶），非三块布局语义 */
+
+/**
+ * 外层只做容器查询盒 + 边框裁剪；不要在同一节点写「依赖自身宽度」的 cqi/cqmin，
+ * 否则字号无法随卡片尺寸变化。
+ */
+.pisell-resource-wall-card {
+  position: relative;
+  height: 100%;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  box-sizing: border-box;
+  border-radius: clamp(8px, 2vw, 28px);
+  border-width: 1px;
+  border-style: solid;
+
+  container-type: size;
+  container-name: venue-wall-card;
+}
+
+/** 字号基准与子树：cqi/cqmin 相对外层卡片解析，故必须放在内层 */
+.pisell-resource-wall-card__scale-root {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  /**
+   * cqmin = min(宽,高) 的 1%，换版式（如 1×2 → 2×3）时宽高都参与缩放。
+   */
+  font-size: clamp(0.625rem, 4cqmin + 0.33rem, 2rem);
+
+  --rw-tier1: 2.55em;
+  /* 二档：时段/联系人等；与一档保持级差 */
+  --rw-tier2: 1.9em;
+  --rw-tier3: 0.96em;
+  --rw-status: 0.9em;
+  --rw-next-solo: 1.68em;
+
+  --rw-gap: clamp(6px, 1.2vw + 0.6vh, 14px);
+  --rw-pad: clamp(8px, 1.8vw + 0.5vh, 16px);
+  --rw-inner-pad: clamp(10px, 2vw + 0.6vh, 20px);
+  --rw-block-radius: clamp(6px, 1.5vw, 22px);
+}
+
+.pisell-resource-wall-card__grid {
+  flex: 1;
+  display: grid;
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 0;
+  height: 100%;
+  gap: var(--rw-gap);
+  padding: var(--rw-pad);
+}
+
+/** 头 : 当前 : 下一 = 4:11:5 → Next 25%（此前 2:5:3 为 30%） */
+.pisell-resource-wall-card__grid--with-next {
+  grid-template-rows: minmax(0, 4fr) minmax(0, 11fr) minmax(0, 5fr);
+}
+
+.pisell-resource-wall-card__grid--no-next {
+  grid-template-rows: minmax(0, 1fr) minmax(0, 4fr);
+}
+
+.pisell-resource-wall-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.pisell-resource-wall-card__header-main {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.22em;
+  justify-content: center;
+}
+
+.pisell-resource-wall-card__header-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 700;
+  line-height: 1.08;
+  font-size: var(--rw-tier1);
+}
+
+/** 左上角资源类型：与面板内时段/联系人同级字阶（--rw-tier2） */
+.pisell-resource-wall-card__header-type {
+  flex-shrink: 0;
+}
+
+.pisell-resource-wall-card__header-status {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: min(52%, 100%);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 700;
+  line-height: 1.1;
+  /** 与面板内时段/联系人同字阶（tier2） */
+  font-size: var(--rw-tier2);
+  padding: 0.2em 0.55em;
+  border-radius: 999px;
+}
+
+.pisell-resource-wall-card__header-status--empty {
+  border: 1px solid rgba(148, 163, 184, 0.42);
+}
+
+.pisell-resource-wall-card__header-status--reserved {
+  border: 1px solid rgba(111, 74, 230, 0.35);
+}
+
+/** 迟到：accent 卡上红色描边 + 红字，与一档 late 强调色对齐 */
+.pisell-resource-wall-card__header-status--late {
+  border: 1px solid rgba(239, 68, 68, 0.45);
+  background: rgba(239, 68, 68, 0.08);
+}
+
+.pisell-resource-wall-card__header-status--occupied {
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  background: rgba(255, 255, 255, 0.12);
+}
+
+/** 超时：占用卡上红色实心胶囊（背景由内联 style 覆盖为 expiredTone.color） */
+.pisell-resource-wall-card__header-status--expired {
+  border: 1px solid rgba(255, 255, 255, 0.28);
+}
+
+.pisell-resource-wall-card__panel {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--rw-block-radius);
+  padding: var(--rw-inner-pad);
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--rw-gap) * 0.65);
+}
+
+/** 占用卡「当前预约」二档：略加粗，无描边/阴影 */
+.pisell-resource-wall-card__panel--occupied-current .pisell-resource-wall-card__tier2 {
+  font-weight: 700;
+}
+
+/** 预约中（浅紫底）：Current / 时段 / 联系人用深色主字色，与时钟区标题同级对比度 */
+.pisell-resource-wall-card__panel--reserved-current .pisell-resource-wall-card__tier2 {
+  font-weight: 700;
+}
+
+.pisell-resource-wall-card__section-title--reserved-current {
+  opacity: 1;
+  font-weight: 700;
+}
+
+/** 预约中：Next 小标题与联系人/时段 — 不降透明度、字重与当前区对齐 */
+.pisell-resource-wall-card__section-title--reserved-next {
+  opacity: 1;
+  font-weight: 700;
+}
+
+.pisell-resource-wall-card__panel--reserved-next .pisell-resource-wall-card__tier2,
+.pisell-resource-wall-card__panel--reserved-next .pisell-resource-wall-card__next-time-solo {
+  font-weight: 700;
+}
+
+.pisell-resource-wall-card__section-title {
+  flex-shrink: 0;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+  font-size: var(--rw-tier3);
+  line-height: 1.25;
+  letter-spacing: 0.03em;
+  opacity: 0.92;
+}
+
+/** 占用卡「当前预约」小标题：不叠 section-title 默认透明度 */
+.pisell-resource-wall-card__section-title--occupied-current {
+  opacity: 1;
+  font-weight: 700;
+}
+
+.pisell-resource-wall-card__current-body {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--rw-gap);
+}
+
+/** 主文案占满上方；进度条与跑马灯放在 current-footer */
+.pisell-resource-wall-card__current-main {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--rw-gap);
+  justify-content: flex-start;
+}
+
+.pisell-resource-wall-card__current-footer {
+  flex-shrink: 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--rw-gap) * 0.75);
+  margin-top: auto;
+}
+
+/** 状态/倒计时等与进度条同一贴底带，叠在进度条正上方 */
+.pisell-resource-wall-card__current-footer-emphasis {
+  min-width: 0;
+  width: 100%;
+}
+
+.pisell-resource-wall-card__tier1 {
+  min-width: 0;
+  max-width: 100%;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.08;
+  font-size: var(--rw-tier1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pisell-resource-wall-card__tier2 {
+  min-width: 0;
+  max-width: 100%;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+  font-size: var(--rw-tier2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pisell-resource-wall-card__tier3 {
+  flex-shrink: 0;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+  line-height: 1.25;
+  font-size: var(--rw-tier3);
+  min-height: 0;
+}
+
+/** 快结束跑马灯：底色与同一列 countdown 强调色同色相（primaryEmphasisColor）；字色白 */
+.pisell-resource-wall-card__marquee-shell {
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  border-radius: 9999px;
+  padding: 0.42em 0.95em;
+}
+
+.pisell-resource-wall-card__marquee-shell > .pisell-resource-wall-card__tier3 {
+  min-width: 0;
+  width: 100%;
+}
+
+.pisell-resource-wall-card__progress-wrap {
+  flex-shrink: 0;
+  border-radius: 9999px;
+  overflow: hidden;
+  height: clamp(4px, 0.42em, 12px);
+}
+
+.pisell-resource-wall-card__progress-fill {
+  height: 100%;
+  border-radius: 9999px;
+}
+
+.pisell-resource-wall-card__next-stack {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--rw-gap) * 0.75);
+  justify-content: center;
+  min-width: 0;
+  min-height: 0;
+}
+
+/** 联系人 + 时段两行并存：略缩字级与间距，减轻省略与裁切 */
+.pisell-resource-wall-card__next-stack--both-lines {
+  gap: calc(var(--rw-gap) * 0.55);
+}
+
+.pisell-resource-wall-card__next-stack--both-lines .pisell-resource-wall-card__tier2 {
+  font-size: calc(var(--rw-tier2) * 0.82);
+  line-height: 1.12;
+}
+
+/** 下一预约仅有时间、无联系人时：相对卡片基准介于二档与一档之间 */
+.pisell-resource-wall-card__next-time-solo {
+  min-width: 0;
+  max-width: 100%;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+  font-size: var(--rw-next-solo);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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

@@ -1,37 +1,53 @@
 import type { RecordBoardResourceWallCardModel } from '../../types';
 import { type VenueWallStatusKey, type VenueWallStatusTone } from './venueWallUtils';
+/** 与平面图 empty / reserved / occupied 对齐的三种大屏展示态 */
+export declare type VenueWallFloorLikeStatus = 'empty' | 'reserved' | 'occupied';
+/**
+ * 标题胶囊 5 态：在 floorLike 三大类基础上，把 `late` 与 `expired` 拆出独立色与文案，
+ * 与当前区一档强调色（红）对齐。
+ */
+export declare type VenueWallHeaderStatusKey = 'empty' | 'reserved' | 'late' | 'occupied' | 'expired';
 /** 由 {@link buildVenueWallCardPresentation} 产出，供 VenueWallCard 渲染层使用 */
 export declare type VenueWallCardPresentation = {
     statusKey: VenueWallStatusKey;
-    isOccupied: boolean;
-    heroText: string;
-    heroColor: string;
-    noteText: string;
-    noteTextColor: string;
-    noteBg: string;
-    subColor: string;
+    floorLikeStatus: VenueWallFloorLikeStatus;
+    /** 标题栏右侧 5 态键，决定胶囊样式（描边/底色变体） */
+    headerStatusKey: VenueWallHeaderStatusKey;
+    /** 标题栏右侧：空闲 / 预约中 / 迟到 / 占用中 / 超时 */
+    headerStatusLabel: string;
+    /** 标题胶囊主色（迟到/超时为红，与一档强调色对齐） */
+    headerStatusColor: string;
+    /** 紫色渐变占用卡 vs 浅色强调卡 */
+    cardVariant: 'occupied' | 'accent';
     mainColor: string;
-    currentLabel: string;
-    currentTime: string;
-    currentName: string;
-    currentNameColor: string;
-    nextNameColor: string;
+    subColor: string;
+    surfaceAccentColor: string;
+    /** 当前区一档：剩余时间 / 距开始 / 结束提示等（非布局「块」） */
+    primaryEmphasisLine: string;
+    primaryEmphasisColor: string;
+    /** 二档：预约时段文案 */
+    timeRangeLine: string;
+    /** 二档：联系人（「Available to Book」等占位已剥离） */
+    contactLine: string;
+    showProgress: boolean;
     progress: number;
     progressColor: string;
-    rightTag: string;
-    rightTagColor: string;
-    rightTagBg: string;
-    rightTagBorder: string;
-    surfaceAccentColor: string;
+    showEndingSoonMarquee: boolean;
+    marqueeText: string;
+    marqueeColor: string;
+    /** 跑马灯胶囊底：与 {@link primaryEmphasisColor} 同一强调色（半透明叠底） */
+    marqueeShellBackground: string;
 };
 /**
- * 纯函数：根据实时漂移分钟数与六态配色表得到卡片主副文案、进度与标签样式。
- * 与原先 VenueWallCard 内联分支逻辑一致，便于单测与维护。
+ * 纯函数：三态大屏文案 + 进度 + 条件跑马灯。
+ * 右上角标题栏仅保留 empty/reserved/occupied；迟到/超时只出现在当前区一档主提示。
  */
 export declare function buildVenueWallCardPresentation(args: {
     card: RecordBoardResourceWallCardModel;
     toneMap: Record<VenueWallStatusKey, VenueWallStatusTone>;
+    wallNowMs: number;
     liveRemainingMin: number;
+    liveRemainingPreciseMin: number;
     liveStartsInMin: number;
     liveLateMin: number;
     boardingSoonBeforeMin: number;

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

@@ -5,110 +5,190 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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";
+import { clamp, deriveVenueWallStatus, formatDurationHM, formatVenueWallCountdown } from "./venueWallUtils";
+
+/** 与平面图 empty / reserved / occupied 对齐的三种大屏展示态 */
+
+/**
+ * 标题胶囊 5 态：在 floorLike 三大类基础上，把 `late` 与 `expired` 拆出独立色与文案，
+ * 与当前区一档强调色（红）对齐。
+ */
 
 /** 由 {@link buildVenueWallCardPresentation} 产出，供 VenueWallCard 渲染层使用 */
 
+function resolveFloorLikeStatus(statusKey) {
+  if (statusKey === 'available') return 'empty';
+  if (statusKey === 'boardingSoon' || statusKey === 'late') return 'reserved';
+  return 'occupied';
+}
+function resolveHeaderStatusKey(statusKey) {
+  if (statusKey === 'available') return 'empty';
+  if (statusKey === 'boardingSoon') return 'reserved';
+  if (statusKey === 'late') return 'late';
+  if (statusKey === 'expired') return 'expired';
+  return 'occupied';
+}
+function headerLabelForKey(key) {
+  switch (key) {
+    case 'empty':
+      /** 空闲态：右上胶囊与当前区文案统一为「Not in use」 */
+      return getText('pisell-resource-wall-card-current-not-in-use');
+    case 'reserved':
+      return getText('pisell-resource-wall-floor-status-reserved');
+    case 'late':
+      return getText('pisell-resource-wall-floor-status-late');
+    case 'expired':
+      return getText('pisell-resource-wall-floor-status-expired');
+    default:
+      return getText('pisell-resource-wall-floor-status-occupied');
+  }
+}
+function sanitizeContact(booking) {
+  var _booking$trim;
+  var c = (_booking$trim = booking === null || booking === void 0 ? void 0 : booking.trim()) !== null && _booking$trim !== void 0 ? _booking$trim : '';
+  if (c === 'Available to Book') return '';
+  return c;
+}
+
+/**
+ * 占用中进度条：**已使用时间占比**（左空右满随进行而增长）。
+ * - 有场次起止：`elapsedMs / durationMs`
+ * - 无起止：仍以 60 分为近似总长，`(60 - 剩余精确分) / 60`
+ */
+function resolveInUseProgressPercent(args) {
+  var card = args.card,
+    wallNowMs = args.wallNowMs,
+    liveRemainingPreciseMin = args.liveRemainingPreciseMin;
+  var end = card.sessionEndMs;
+  var start = card.sessionStartMs;
+  if (end != null && start != null && Number.isFinite(end) && Number.isFinite(start) && end > start) {
+    var durationMs = end - start;
+    var elapsedMs = Math.min(Math.max(0, wallNowMs - start), durationMs);
+    return clamp(elapsedMs / durationMs * 100, 0, 100);
+  }
+  var denomMin = 60;
+  var elapsedPreciseMin = denomMin - liveRemainingPreciseMin;
+  return clamp(elapsedPreciseMin / denomMin * 100, 0, 100);
+}
+
 /**
- * 纯函数：根据实时漂移分钟数与六态配色表得到卡片主副文案、进度与标签样式。
- * 与原先 VenueWallCard 内联分支逻辑一致，便于单测与维护。
+ * 纯函数：三态大屏文案 + 进度 + 条件跑马灯。
+ * 右上角标题栏仅保留 empty/reserved/occupied；迟到/超时只出现在当前区一档主提示。
  */
 export function buildVenueWallCardPresentation(args) {
-  var _toneMap$statusKey, _card$currentTime, _card$currentBooking;
+  var _toneMap$statusKey, _toneMap$late, _toneMap$expired, _card$currentTime;
   var card = args.card,
     toneMap = args.toneMap,
+    wallNowMs = args.wallNowMs,
     liveRemainingMin = args.liveRemainingMin,
+    liveRemainingPreciseMin = args.liveRemainingPreciseMin,
     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 floorLikeStatus = resolveFloorLikeStatus(statusKey);
+  var headerStatusKey = resolveHeaderStatusKey(statusKey);
+  var headerStatusLabel = headerLabelForKey(headerStatusKey);
   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);
+  var endingSoonTone = toneMap.endingSoon;
+  var boardingTone = toneMap.boardingSoon;
+  var lateTone = (_toneMap$late = toneMap.late) !== null && _toneMap$late !== void 0 ? _toneMap$late : boardingTone;
+  var expiredTone = (_toneMap$expired = toneMap.expired) !== null && _toneMap$expired !== void 0 ? _toneMap$expired : endingSoonTone;
+  var cardVariant = floorLikeStatus === 'occupied' ? 'occupied' : 'accent';
+  var mainOnOccupied = '#ffffff';
+  /**
+   * 占用卡内次级文案默认色（下一预约区等）；「当前预约」标题/时段/联系人在 VenueWallCard 内单独铺纯白 + 阴影。
+   */
+  var subOnOccupied = 'rgba(255,255,255,0.88)';
+  var mainColor = cardVariant === 'occupied' ? mainOnOccupied : idleMain;
+  var subColor = cardVariant === 'occupied' ? subOnOccupied : idleSub;
+  var surfaceAccentColor = availableCardColor;
+  if (floorLikeStatus === 'reserved') {
+    surfaceAccentColor = boardingTone.color;
   }
-  if (statusKey === 'expired') {
-    heroText = liveRemainingMin < 0 ? formatVenueWallCountdown(liveRemainingMin) : liveRemainingMin === 0 ? getText('pisell-resource-wall-countdown-zero-overtime') : formatVenueWallCountdown(liveRemainingMin);
+  var timeRangeLine = ((_card$currentTime = card.currentTime) !== null && _card$currentTime !== void 0 ? _card$currentTime : '').trim();
+  var contactLine = sanitizeContact(card.currentBooking);
+  var primaryEmphasisLine = '';
+  var primaryEmphasisColor = mainColor;
+  var progress = 0;
+  var progressColor = mainOnOccupied;
+  var showProgress = false;
+  var rmDisplay = Math.max(0, liveRemainingMin);
+  var endingWindowMin = Math.max(1, boardingSoonBeforeMin);
+  var inEndingSoonWindow = floorLikeStatus === 'occupied' && liveRemainingMin >= 0 && liveRemainingMin <= endingWindowMin;
+
+  /** 临近结束（含剩余 0）时跑马灯；已过期/负剩余不展示 */
+  var showEndingSoonMarquee = floorLikeStatus === 'occupied' && inEndingSoonWindow && statusKey !== 'expired';
+  if (statusKey === 'available') {
+    primaryEmphasisLine = '';
+    primaryEmphasisColor = mainColor;
+  } else if (statusKey === 'boardingSoon') {
+    /** 仅「占用中」展示进度条；预约中仅文案与色 */
+    primaryEmphasisLine = getText('pisell-resource-wall-card-starts-in').replace('{n}', formatDurationHM(liveStartsInMin));
+    primaryEmphasisColor = boardingTone.color;
+  } else if (statusKey === 'late') {
+    primaryEmphasisLine = getText('pisell-resource-wall-card-late').replace('{n}', formatDurationHM(Math.max(0, Math.floor(liveLateMin))));
+    primaryEmphasisColor = lateTone.color;
+  } else if (statusKey === 'inUse' || statusKey === 'endingSoon' || statusKey === 'expired') {
+    showProgress = true;
+    var sessionEndedNoOvertimeCopy = statusKey === 'expired' || liveRemainingMin < 0;
+    if (sessionEndedNoOvertimeCopy) {
+      /** 已结束/超时：进度条满格表示时段已用尽 */
+      progress = 100;
+      progressColor = expiredTone.color;
+      if (liveRemainingMin < 0) {
+        primaryEmphasisLine = formatVenueWallCountdown(liveRemainingMin);
+      } else {
+        primaryEmphasisLine = getText('pisell-resource-wall-countdown-zero-overtime');
+      }
+      primaryEmphasisColor = expiredTone.color;
+    } else {
+      progress = resolveInUseProgressPercent({
+        card: card,
+        wallNowMs: wallNowMs,
+        liveRemainingPreciseMin: liveRemainingPreciseMin
+      });
+      progressColor = statusKey === 'endingSoon' || inEndingSoonWindow ? endingSoonTone.color : mainOnOccupied;
+      primaryEmphasisLine = formatVenueWallCountdown(rmDisplay);
+      primaryEmphasisColor = statusKey === 'endingSoon' || inEndingSoonWindow ? endingSoonTone.color : mainOnOccupied;
+    }
   }
-  var surfaceAccentColor = statusKey === 'late' ? availableCardColor : statusKey === 'boardingSoon' ? toneMap.boardingSoon.color : availableCardColor;
+  var marqueeText = showEndingSoonMarquee ? getText('pisell-resource-wall-marquee-ending-soon') : '';
+
+  /** 跑马灯文案固定白色 */
+  var marqueeColor = showEndingSoonMarquee ? '#ffffff' : cardVariant === 'occupied' ? 'rgba(255,255,255,0.92)' : endingSoonTone.color;
+
+  /** 与当前区一档状态字同色相叠底（快结束时与倒计时一致） */
+  var marqueeShellBackground = showEndingSoonMarquee ? primaryEmphasisColor : 'transparent';
+
+  /** 标题胶囊主色：迟到/超时取各自 tone（红），其余沿用既有规则（empty=avail、reserved=boarding、occupied=白） */
+  var headerStatusColor;
+  if (headerStatusKey === 'empty') headerStatusColor = availableCardColor;else if (headerStatusKey === 'reserved') headerStatusColor = boardingTone.color;else if (headerStatusKey === 'late') headerStatusColor = lateTone.color;else if (headerStatusKey === 'expired') headerStatusColor = expiredTone.color;else headerStatusColor = '#ffffff';
   return {
     statusKey: statusKey,
-    isOccupied: isOccupied,
-    heroText: heroText,
-    heroColor: heroColor,
-    noteText: noteText,
-    noteTextColor: noteTextColor,
-    noteBg: noteBg,
-    subColor: subColor,
+    floorLikeStatus: floorLikeStatus,
+    headerStatusKey: headerStatusKey,
+    headerStatusLabel: headerStatusLabel,
+    headerStatusColor: headerStatusColor,
+    cardVariant: cardVariant,
     mainColor: mainColor,
-    currentLabel: currentLabel,
-    currentTime: currentTime,
-    currentName: currentName,
-    currentNameColor: currentNameColor,
-    nextNameColor: nextNameColor,
+    subColor: subColor,
+    surfaceAccentColor: surfaceAccentColor,
+    primaryEmphasisLine: primaryEmphasisLine,
+    primaryEmphasisColor: primaryEmphasisColor,
+    timeRangeLine: timeRangeLine,
+    contactLine: contactLine,
+    showProgress: showProgress,
     progress: progress,
     progressColor: progressColor,
-    rightTag: rightTag,
-    rightTagColor: rightTagColor,
-    rightTagBg: rightTagBg,
-    rightTagBorder: rightTagBorder,
-    surfaceAccentColor: surfaceAccentColor
+    showEndingSoonMarquee: showEndingSoonMarquee,
+    marqueeText: marqueeText,
+    marqueeColor: marqueeColor,
+    marqueeShellBackground: marqueeShellBackground
   };
 }