@pisell/materials 6.11.39 → 6.11.41

package/lib/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/lib/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/lib/components/pisellRecordBoard/shellFrame/ResourceWall/venueWallCardPresentation.js

@@ -24,113 +24,167 @@ __export(venueWallCardPresentation_exports, {
 module.exports = __toCommonJS(venueWallCardPresentation_exports);
 var import_locales = require("../../../../locales");
 var import_venueWallUtils = require("./venueWallUtils");
+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":
+      return (0, import_locales.getText)("pisell-resource-wall-card-current-not-in-use");
+    case "reserved":
+      return (0, import_locales.getText)("pisell-resource-wall-floor-status-reserved");
+    case "late":
+      return (0, import_locales.getText)("pisell-resource-wall-floor-status-late");
+    case "expired":
+      return (0, import_locales.getText)("pisell-resource-wall-floor-status-expired");
+    default:
+      return (0, import_locales.getText)("pisell-resource-wall-floor-status-occupied");
+  }
+}
+function sanitizeContact(booking) {
+  const c = (booking == null ? void 0 : booking.trim()) ?? "";
+  if (c === "Available to Book") return "";
+  return c;
+}
+function resolveInUseProgressPercent(args) {
+  const { card, wallNowMs, liveRemainingPreciseMin } = args;
+  const end = card.sessionEndMs;
+  const start = card.sessionStartMs;
+  if (end != null && start != null && Number.isFinite(end) && Number.isFinite(start) && end > start) {
+    const durationMs = end - start;
+    const elapsedMs = Math.min(
+      Math.max(0, wallNowMs - start),
+      durationMs
+    );
+    return (0, import_venueWallUtils.clamp)(elapsedMs / durationMs * 100, 0, 100);
+  }
+  const denomMin = 60;
+  const elapsedPreciseMin = denomMin - liveRemainingPreciseMin;
+  return (0, import_venueWallUtils.clamp)(elapsedPreciseMin / denomMin * 100, 0, 100);
+}
 function buildVenueWallCardPresentation(args) {
   const {
     card,
     toneMap,
+    wallNowMs,
     liveRemainingMin,
+    liveRemainingPreciseMin,
     liveStartsInMin,
     liveLateMin,
     boardingSoonBeforeMin,
     idleMain,
     idleSub,
-    occupiedCardColor,
     availableCardColor
   } = args;
   const statusKey = (0, import_venueWallUtils.deriveVenueWallStatus)({
     ...card,
     remainingMin: liveRemainingMin
   });
+  const floorLikeStatus = resolveFloorLikeStatus(statusKey);
+  const headerStatusKey = resolveHeaderStatusKey(statusKey);
+  const headerStatusLabel = headerLabelForKey(headerStatusKey);
   const tone = toneMap[statusKey] ?? toneMap.inUse;
-  const isOccupied = ["inUse", "endingSoon", "expired"].includes(statusKey);
-  let heroText = isOccupied ? (0, import_venueWallUtils.formatVenueWallCountdown)(liveRemainingMin) : (0, import_locales.getText)("pisell-resource-wall-card-hero-available");
-  let heroColor = isOccupied ? statusKey === "inUse" ? "#ffffff" : tone.color : toneMap.available.color;
-  let noteText = isOccupied ? tone.note : toneMap.available.note;
-  let noteTextColor = isOccupied ? "#ffffff" : idleMain;
-  let noteBg = isOccupied ? tone.noteBg : (0, import_venueWallUtils.alphaColor)(availableCardColor, 0.2);
-  const subColor = isOccupied ? "rgba(255,255,255,0.80)" : idleSub;
-  const mainColor = isOccupied ? "#ffffff" : idleMain;
-  let currentLabel = (0, import_locales.getText)("pisell-resource-wall-card-label-current");
-  let currentTime = card.currentTime ?? "";
-  let currentName = isOccupied ? card.currentBooking ?? "" : "";
-  let currentNameColor = mainColor;
-  let nextNameColor = mainColor;
-  let progress = isOccupied ? (0, import_venueWallUtils.clamp)(liveRemainingMin / 60 * 100, 0, 100) : 0;
-  let progressColor = heroColor;
-  let rightTag = tone.label;
-  let rightTagColor = isOccupied ? "#ffffff" : tone.color;
-  let rightTagBg = isOccupied ? statusKey === "inUse" ? "rgba(255,255,255,0.14)" : tone.color : (0, import_venueWallUtils.alphaColor)(tone.color, 0.12);
-  let rightTagBorder = isOccupied ? "rgba(255,255,255,0.18)" : (0, import_venueWallUtils.alphaColor)(tone.color, 0.35);
-  if (statusKey === "boardingSoon") {
-    heroText = (0, import_locales.getText)("pisell-resource-wall-card-starts-in").replace(
+  const endingSoonTone = toneMap.endingSoon;
+  const boardingTone = toneMap.boardingSoon;
+  const lateTone = toneMap.late ?? boardingTone;
+  const expiredTone = toneMap.expired ?? endingSoonTone;
+  const cardVariant = floorLikeStatus === "occupied" ? "occupied" : "accent";
+  const mainOnOccupied = "#ffffff";
+  const subOnOccupied = "rgba(255,255,255,0.88)";
+  const mainColor = cardVariant === "occupied" ? mainOnOccupied : idleMain;
+  const subColor = cardVariant === "occupied" ? subOnOccupied : idleSub;
+  let surfaceAccentColor = availableCardColor;
+  if (floorLikeStatus === "reserved") {
+    surfaceAccentColor = boardingTone.color;
+  }
+  const timeRangeLine = (card.currentTime ?? "").trim();
+  const contactLine = sanitizeContact(card.currentBooking);
+  let primaryEmphasisLine = "";
+  let primaryEmphasisColor = mainColor;
+  let progress = 0;
+  let progressColor = mainOnOccupied;
+  let showProgress = false;
+  const rmDisplay = Math.max(0, liveRemainingMin);
+  const endingWindowMin = Math.max(1, boardingSoonBeforeMin);
+  const inEndingSoonWindow = floorLikeStatus === "occupied" && liveRemainingMin >= 0 && liveRemainingMin <= endingWindowMin;
+  const showEndingSoonMarquee = floorLikeStatus === "occupied" && inEndingSoonWindow && statusKey !== "expired";
+  if (statusKey === "available") {
+    primaryEmphasisLine = "";
+    primaryEmphasisColor = mainColor;
+  } else if (statusKey === "boardingSoon") {
+    primaryEmphasisLine = (0, import_locales.getText)("pisell-resource-wall-card-starts-in").replace(
       "{n}",
-      String(liveStartsInMin)
+      (0, import_venueWallUtils.formatDurationHM)(liveStartsInMin)
     );
-    heroColor = toneMap.boardingSoon.color;
-    noteText = toneMap.boardingSoon.note;
-    noteTextColor = toneMap.boardingSoon.color;
-    noteBg = (0, import_venueWallUtils.alphaColor)(toneMap.boardingSoon.color, 0.18);
-    currentLabel = (0, import_locales.getText)("pisell-resource-wall-card-label-next");
-    currentName = card.currentBooking ?? "";
-    currentNameColor = toneMap.boardingSoon.color;
-    nextNameColor = toneMap.boardingSoon.color;
-    progress = (0, import_venueWallUtils.clamp)(
-      (boardingSoonBeforeMin - liveStartsInMin) / boardingSoonBeforeMin * 100,
-      0,
-      100
-    );
-    progressColor = toneMap.boardingSoon.color;
-    rightTag = toneMap.boardingSoon.label;
-    rightTagColor = toneMap.boardingSoon.color;
-    rightTagBg = (0, import_venueWallUtils.alphaColor)(toneMap.boardingSoon.color, 0.12);
-    rightTagBorder = (0, import_venueWallUtils.alphaColor)(toneMap.boardingSoon.color, 0.35);
-  }
-  if (statusKey === "late") {
-    heroText = (0, import_locales.getText)("pisell-resource-wall-card-late").replace(
+    primaryEmphasisColor = boardingTone.color;
+  } else if (statusKey === "late") {
+    primaryEmphasisLine = (0, import_locales.getText)("pisell-resource-wall-card-late").replace(
       "{n}",
-      String(liveLateMin)
+      (0, import_venueWallUtils.formatDurationHM)(Math.max(0, Math.floor(liveLateMin)))
     );
-    heroColor = "rgb(239, 68, 68)";
-    noteText = toneMap.late.note;
-    noteTextColor = toneMap.available.color;
-    noteBg = toneMap.available.noteBg;
-    currentLabel = (0, import_locales.getText)("pisell-resource-wall-card-label-next");
-    currentName = card.currentBooking ?? "";
-    currentNameColor = toneMap.available.color;
-    nextNameColor = toneMap.available.color;
-    progress = 100;
-    progressColor = toneMap.available.color;
-    rightTag = toneMap.late.label;
-    rightTagColor = toneMap.available.color;
-    rightTagBg = (0, import_venueWallUtils.alphaColor)(toneMap.available.color, 0.12);
-    rightTagBorder = (0, import_venueWallUtils.alphaColor)(toneMap.available.color, 0.35);
+    primaryEmphasisColor = lateTone.color;
+  } else if (statusKey === "inUse" || statusKey === "endingSoon" || statusKey === "expired") {
+    showProgress = true;
+    const sessionEndedNoOvertimeCopy = statusKey === "expired" || liveRemainingMin < 0;
+    if (sessionEndedNoOvertimeCopy) {
+      progress = 100;
+      progressColor = expiredTone.color;
+      if (liveRemainingMin < 0) {
+        primaryEmphasisLine = (0, import_venueWallUtils.formatVenueWallCountdown)(liveRemainingMin);
+      } else {
+        primaryEmphasisLine = (0, import_locales.getText)("pisell-resource-wall-countdown-zero-overtime");
+      }
+      primaryEmphasisColor = expiredTone.color;
+    } else {
+      progress = resolveInUseProgressPercent({
+        card,
+        wallNowMs,
+        liveRemainingPreciseMin
+      });
+      progressColor = statusKey === "endingSoon" || inEndingSoonWindow ? endingSoonTone.color : mainOnOccupied;
+      primaryEmphasisLine = (0, import_venueWallUtils.formatVenueWallCountdown)(rmDisplay);
+      primaryEmphasisColor = statusKey === "endingSoon" || inEndingSoonWindow ? endingSoonTone.color : mainOnOccupied;
+    }
   }
-  if (statusKey === "expired") {
-    heroText = liveRemainingMin < 0 ? (0, import_venueWallUtils.formatVenueWallCountdown)(liveRemainingMin) : liveRemainingMin === 0 ? (0, import_locales.getText)("pisell-resource-wall-countdown-zero-overtime") : (0, import_venueWallUtils.formatVenueWallCountdown)(liveRemainingMin);
-  }
-  const surfaceAccentColor = statusKey === "late" ? availableCardColor : statusKey === "boardingSoon" ? toneMap.boardingSoon.color : availableCardColor;
+  const marqueeText = showEndingSoonMarquee ? (0, import_locales.getText)("pisell-resource-wall-marquee-ending-soon") : "";
+  const marqueeColor = showEndingSoonMarquee ? "#ffffff" : cardVariant === "occupied" ? "rgba(255,255,255,0.92)" : endingSoonTone.color;
+  const marqueeShellBackground = showEndingSoonMarquee ? primaryEmphasisColor : "transparent";
+  let 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,
-    isOccupied,
-    heroText,
-    heroColor,
-    noteText,
-    noteTextColor,
-    noteBg,
-    subColor,
+    floorLikeStatus,
+    headerStatusKey,
+    headerStatusLabel,
+    headerStatusColor,
+    cardVariant,
     mainColor,
-    currentLabel,
-    currentTime,
-    currentName,
-    currentNameColor,
-    nextNameColor,
+    subColor,
+    surfaceAccentColor,
+    primaryEmphasisLine,
+    primaryEmphasisColor,
+    timeRangeLine,
+    contactLine,
+    showProgress,
     progress,
     progressColor,
-    rightTag,
-    rightTagColor,
-    rightTagBg,
-    rightTagBorder,
-    surfaceAccentColor
+    showEndingSoonMarquee,
+    marqueeText,
+    marqueeColor,
+    marqueeShellBackground
   };
 }
 // Annotate the CommonJS export names for ESM import in node:

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

@@ -49,6 +49,7 @@ export declare function matchesResourceWallStatusSortField(sortField: string, ke
  * asc → 空闲侧在前；desc → 占用侧在前。
  */
 export declare function venueWallOccupiedSortRank(card: RecordBoardResourceWallCardModel): 0 | 1;
+export declare function formatDurationHM(minAbs: number): string;
 /**
  * 将「剩余/超支分钟数」格式化为跑码条/主副标题用短文案（走 i18n 模板，负值表示 overtime）。
  */