@pisell/materials 1.8.41 → 1.8.42

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

@@ -0,0 +1,339 @@
+/** 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);
+}
+
+/**
+ * 头 12%；剩余 88% 给「当前 : 下一 = 11:5」（Next 占剩余 5/16）。
+ * 行比例：192:968:440 = 12 : 88*11/16 : 88*5/16（同乘 16 去分母）。
+ */
+.pisell-resource-wall-card__grid--with-next {
+  grid-template-rows: minmax(0, 192fr) minmax(0, 968fr) minmax(0, 440fr);
+}
+
+/** 无 Next：头 12%，其余给 Current 面板 */
+.pisell-resource-wall-card__grid--no-next {
+  grid-template-rows: minmax(0, 12fr) minmax(0, 88fr);
+}
+
+.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/VenueWallMarquee.less

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

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

@@ -0,0 +1,153 @@
+const require_index = require("../../../../locales/index.js");
+const require_objectSpread2 = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
+const require_venueWallUtils = require("./venueWallUtils.js");
+//#region src/components/pisellRecordBoard/shellFrame/ResourceWall/venueWallCardPresentation.ts
+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 require_index.getText("pisell-resource-wall-card-current-not-in-use");
+		case "reserved": return require_index.getText("pisell-resource-wall-floor-status-reserved");
+		case "late": return require_index.getText("pisell-resource-wall-floor-status-late");
+		case "expired": return require_index.getText("pisell-resource-wall-floor-status-expired");
+		default: return require_index.getText("pisell-resource-wall-floor-status-occupied");
+	}
+}
+function sanitizeContact(booking) {
+	var _booking$trim;
+	const 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) {
+	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;
+		return require_venueWallUtils.clamp(Math.min(Math.max(0, wallNowMs - start), durationMs) / durationMs * 100, 0, 100);
+	}
+	const denomMin = 60;
+	return require_venueWallUtils.clamp((denomMin - liveRemainingPreciseMin) / denomMin * 100, 0, 100);
+}
+/**
+* 纯函数：三态大屏文案 + 进度 + 条件跑马灯。
+* 右上角标题栏仅保留 empty/reserved/occupied；迟到/超时只出现在当前区一档主提示。
+*/
+function buildVenueWallCardPresentation(args) {
+	var _toneMap$statusKey, _toneMap$late, _toneMap$expired, _card$currentTime;
+	const { card, toneMap, wallNowMs, liveRemainingMin, liveRemainingPreciseMin, liveStartsInMin, liveLateMin, boardingSoonBeforeMin, idleMain, idleSub, availableCardColor } = args;
+	const statusKey = require_venueWallUtils.deriveVenueWallStatus(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, card), {}, { remainingMin: liveRemainingMin }));
+	const floorLikeStatus = resolveFloorLikeStatus(statusKey);
+	const headerStatusKey = resolveHeaderStatusKey(statusKey);
+	const headerStatusLabel = headerLabelForKey(headerStatusKey);
+	(_toneMap$statusKey = toneMap[statusKey]) !== null && _toneMap$statusKey !== void 0 || toneMap.inUse;
+	const endingSoonTone = toneMap.endingSoon;
+	const boardingTone = toneMap.boardingSoon;
+	const lateTone = (_toneMap$late = toneMap.late) !== null && _toneMap$late !== void 0 ? _toneMap$late : boardingTone;
+	const expiredTone = (_toneMap$expired = toneMap.expired) !== null && _toneMap$expired !== void 0 ? _toneMap$expired : endingSoonTone;
+	const cardVariant = floorLikeStatus === "occupied" ? "occupied" : "accent";
+	const mainOnOccupied = "#ffffff";
+	/**
+	* 占用卡内次级文案默认色（下一预约区等）；「当前预约」标题/时段/联系人在 VenueWallCard 内单独铺纯白 + 阴影。
+	*/
+	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 = card.currentTime) !== null && _card$currentTime !== void 0 ? _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 inEndingSoonWindow = floorLikeStatus === "occupied" && liveRemainingMin >= 0 && liveRemainingMin <= Math.max(1, boardingSoonBeforeMin);
+	/** 临近结束（含剩余 0）时跑马灯；已过期/负剩余不展示 */
+	const showEndingSoonMarquee = floorLikeStatus === "occupied" && inEndingSoonWindow && statusKey !== "expired";
+	if (statusKey === "available") {
+		primaryEmphasisLine = "";
+		primaryEmphasisColor = mainColor;
+	} else if (statusKey === "boardingSoon") {
+		/** 仅「占用中」展示进度条；预约中仅文案与色 */
+		primaryEmphasisLine = require_index.getText("pisell-resource-wall-card-starts-in").replace("{n}", require_venueWallUtils.formatDurationHM(liveStartsInMin));
+		primaryEmphasisColor = boardingTone.color;
+	} else if (statusKey === "late") {
+		primaryEmphasisLine = require_index.getText("pisell-resource-wall-card-late").replace("{n}", require_venueWallUtils.formatDurationHM(Math.max(0, Math.floor(liveLateMin))));
+		primaryEmphasisColor = lateTone.color;
+	} else if (statusKey === "inUse" || statusKey === "endingSoon" || statusKey === "expired") {
+		showProgress = true;
+		if (statusKey === "expired" || liveRemainingMin < 0) {
+			/** 已结束/超时：进度条满格表示时段已用尽 */
+			progress = 100;
+			progressColor = expiredTone.color;
+			if (liveRemainingMin < 0) primaryEmphasisLine = require_venueWallUtils.formatVenueWallCountdown(liveRemainingMin);
+			else primaryEmphasisLine = require_index.getText("pisell-resource-wall-countdown-zero-overtime");
+			primaryEmphasisColor = expiredTone.color;
+		} else {
+			progress = resolveInUseProgressPercent({
+				card,
+				wallNowMs,
+				liveRemainingPreciseMin
+			});
+			progressColor = statusKey === "endingSoon" || inEndingSoonWindow ? endingSoonTone.color : mainOnOccupied;
+			primaryEmphasisLine = require_venueWallUtils.formatVenueWallCountdown(rmDisplay);
+			primaryEmphasisColor = statusKey === "endingSoon" || inEndingSoonWindow ? endingSoonTone.color : mainOnOccupied;
+		}
+	}
+	const marqueeText = showEndingSoonMarquee ? require_index.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";
+	/** 标题胶囊主色：迟到/超时取各自 tone（红），其余沿用既有规则（empty=avail、reserved=boarding、occupied=白） */
+	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,
+		floorLikeStatus,
+		headerStatusKey,
+		headerStatusLabel,
+		headerStatusColor,
+		cardVariant,
+		mainColor,
+		subColor,
+		surfaceAccentColor,
+		primaryEmphasisLine,
+		primaryEmphasisColor,
+		timeRangeLine,
+		contactLine,
+		showProgress,
+		progress,
+		progressColor,
+		showEndingSoonMarquee,
+		marqueeText,
+		marqueeColor,
+		marqueeShellBackground
+	};
+}
+//#endregion
+exports.buildVenueWallCardPresentation = buildVenueWallCardPresentation;

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

@@ -0,0 +1,32 @@
+//#region src/components/pisellRecordBoard/shellFrame/ResourceWall/venueWallUtils.d.ts
+type VenueWallStatusKey = 'inUse' | 'endingSoon' | 'expired' | 'available' | 'boardingSoon' | 'late';
+/** 单态展示配置（与 {@link VENUE_WALL_STATUS_COLOR_MAP} 值同形） */
+type VenueWallStatusTone = {
+  key: VenueWallStatusKey;
+  label: string;
+  note: string;
+  color: string;
+  noteBg: string;
+};
+/** 仅覆盖部分字段；用于 Control Panel / localStorage */
+type VenueWallStatusToneOverrides = Partial<Record<VenueWallStatusKey, Partial<VenueWallStatusTone>>>;
+/** 单外观（浅 / 深）下的占用/空闲色与六态覆盖；持久化时 light、dark 各存一份 */
+type VenueWallAppearanceSlot = {
+  occupiedCardColor?: string;
+  availableCardColor?: string;
+  statusToneOverrides?: VenueWallStatusToneOverrides;
+};
+type VenueWallAppearanceTheme = {
+  light?: VenueWallAppearanceSlot;
+  dark?: VenueWallAppearanceSlot;
+};
+/**
+ * 合并默认六态配色与业务覆盖，供 {@link VenueWallCard} 与 Control Panel 表单初值共用。
+ */
+declare function getVenueWallStatusToneMap(overrides?: VenueWallStatusToneOverrides | null): Record<VenueWallStatusKey, VenueWallStatusTone>;
+/**
+ * 将编辑后的完整六态表压成「相对默认」的 overrides，便于持久化与 props 传递。
+ */
+declare function diffVenueWallStatusToneOverrides(draft: Record<VenueWallStatusKey, VenueWallStatusTone>): VenueWallStatusToneOverrides;
+//#endregion
+export { VenueWallAppearanceSlot, VenueWallAppearanceTheme, VenueWallStatusKey, VenueWallStatusTone, VenueWallStatusToneOverrides, diffVenueWallStatusToneOverrides, getVenueWallStatusToneMap };