@pisell/materials 6.11.37 → 6.11.38

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

@@ -0,0 +1,175 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellRecordBoard/shellFrame/ResourceWall/ResourceWallViewportToolbar.tsx
+var ResourceWallViewportToolbar_exports = {};
+__export(ResourceWallViewportToolbar_exports, {
+  ResourceWallViewportToolbar: () => ResourceWallViewportToolbar
+});
+module.exports = __toCommonJS(ResourceWallViewportToolbar_exports);
+var import_react = __toESM(require("react"));
+var import_locales = require("../../../../locales");
+var ResourceWallViewportToolbar = ({
+  now,
+  appearanceMode,
+  onAppearanceModeChange,
+  pseudoFullscreen,
+  onTogglePseudoFullscreen,
+  onOpenControlPanel,
+  headerBorder,
+  headerBg,
+  clockColor,
+  mutedText,
+  toolbarBtnBorder,
+  toolbarBtnBg,
+  toolbarBtnBgActive
+}) => /* @__PURE__ */ import_react.default.createElement(
+  "div",
+  {
+    style: {
+      flexShrink: 0,
+      borderBottom: headerBorder,
+      padding: "16px 24px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: 16,
+      background: headerBg
+    }
+  },
+  /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        fontSize: 22,
+        fontWeight: 600,
+        letterSpacing: "-0.02em",
+        color: clockColor
+      }
+    },
+    now.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false
+    }),
+    " ",
+    "·",
+    " ",
+    now.toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "short",
+      year: "numeric"
+    })
+  ),
+  /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        borderRadius: 6,
+        border: toolbarBtnBorder,
+        overflow: "hidden",
+        background: toolbarBtnBg
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => onAppearanceModeChange("light"),
+        style: {
+          border: "none",
+          padding: "6px 12px",
+          fontSize: 13,
+          fontWeight: 500,
+          cursor: "pointer",
+          background: appearanceMode === "light" ? toolbarBtnBgActive : "transparent",
+          color: appearanceMode === "light" ? clockColor : mutedText
+        }
+      },
+      (0, import_locales.getText)("pisell-resource-wall-appearance-light")
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => onAppearanceModeChange("dark"),
+        style: {
+          border: "none",
+          borderLeft: toolbarBtnBorder,
+          padding: "6px 12px",
+          fontSize: 13,
+          fontWeight: 500,
+          cursor: "pointer",
+          background: appearanceMode === "dark" ? toolbarBtnBgActive : "transparent",
+          color: appearanceMode === "dark" ? clockColor : mutedText
+        }
+      },
+      (0, import_locales.getText)("pisell-resource-wall-appearance-dark")
+    )
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: onTogglePseudoFullscreen,
+      style: {
+        borderRadius: 6,
+        padding: "6px 14px",
+        fontSize: 13,
+        fontWeight: 500,
+        cursor: "pointer",
+        border: toolbarBtnBorder,
+        background: pseudoFullscreen ? toolbarBtnBgActive : toolbarBtnBg,
+        color: clockColor
+      }
+    },
+    pseudoFullscreen ? (0, import_locales.getText)("pisell-resource-wall-fullscreen-exit") : (0, import_locales.getText)("pisell-resource-wall-fullscreen-enter")
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: onOpenControlPanel,
+      style: {
+        borderRadius: 6,
+        padding: "6px 14px",
+        fontSize: 13,
+        fontWeight: 500,
+        cursor: "pointer",
+        border: toolbarBtnBorder,
+        background: toolbarBtnBg,
+        color: clockColor
+      }
+    },
+    (0, import_locales.getText)("pisell-resource-wall-control-open")
+  ))
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ResourceWallViewportToolbar
+});

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

@@ -3,6 +3,8 @@ import type { RecordBoardResourceWallCardModel } from '../../types';
 import { type VenueWallStatusKey, type VenueWallStatusTone } from './venueWallUtils';
 export interface VenueWallCardProps {
     card: RecordBoardResourceWallCardModel;
+    /** 与 PisellRecordBoardResourceWallView 顶栏同源墙钟毫秒时间戳（唯一定时器驱动） */
+    wallNowMs: number;
     /** boardingSoon：用于进度条分母（分钟） */
     boardingSoonBeforeMin?: number;
     occupiedCardColor?: string;
@@ -13,7 +15,7 @@ export interface VenueWallCardProps {
     /** 非占用态主/辅文案色在暗色外壳下的对比度 */
     appearance?: 'light' | 'dark';
 }
-/**
- * 单块场地大屏卡（由 test.tsx CardItem 迁移，样式为内联 + 少量类名，不依赖 Tailwind）。
- */
-export declare const VenueWallCard: React.FC<VenueWallCardProps>;
+declare function VenueWallCardInner({ card, wallNowMs, boardingSoonBeforeMin, occupiedCardColor, availableCardColor, heroMaxWidthRatio, statusToneMap: statusToneMapProp, appearance, }: VenueWallCardProps): JSX.Element;
+/** 单块场地大屏卡：漂移与文案由 {@link buildVenueWallCardPresentation} 统一计算 */
+export declare const VenueWallCard: React.MemoExoticComponent<typeof VenueWallCardInner>;
+export {};

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

@@ -35,15 +35,9 @@ module.exports = __toCommonJS(VenueWallCard_exports);
 var import_react = __toESM(require("react"));
 var import_locales = require("../../../../locales");
 var import_NoteTicker = require("./NoteTicker");
+var import_resourceWallConstants = require("./resourceWallConstants");
+var import_venueWallCardPresentation = require("./venueWallCardPresentation");
 var import_venueWallUtils = require("./venueWallUtils");
-function useVenueWallClockNow() {
-  const [now, setNow] = (0, import_react.useState)(() => Date.now());
-  (0, import_react.useEffect)(() => {
-    const id = window.setInterval(() => setNow(Date.now()), 1e3);
-    return () => window.clearInterval(id);
-  }, []);
-  return now;
-}
 function useDriftMinutesFromEpoch(value, resourceId, now, allowNegative = false) {
   const [epoch, setEpoch] = (0, import_react.useState)(() => ({
     min: value ?? 0,
@@ -67,15 +61,16 @@ function useDriftUpMinutesFromEpoch(value, resourceId, now) {
 }
 var DEFAULT_OCCUPIED = "#6f4ae6";
 var DEFAULT_AVAILABLE = "#10b981";
-var VenueWallCard = ({
+function VenueWallCardInner({
   card,
+  wallNowMs,
   boardingSoonBeforeMin = 10,
   occupiedCardColor = DEFAULT_OCCUPIED,
   availableCardColor = DEFAULT_AVAILABLE,
   heroMaxWidthRatio = 0.6,
   statusToneMap: statusToneMapProp,
   appearance = "light"
-}) => {
+}) {
   var _a, _b;
   const toneMap = statusToneMapProp ?? (0, import_venueWallUtils.getVenueWallStatusToneMap)();
   const isDark = appearance === "dark";
@@ -95,98 +90,74 @@ var VenueWallCard = ({
     observer.observe(node);
     return () => observer.disconnect();
   }, []);
-  const wallNow = useVenueWallClockNow();
   const liveRemainingMin = useDriftMinutesFromEpoch(
     card.remainingMin,
     card.resourceId,
-    wallNow,
+    wallNowMs,
     true
   );
   const liveStartsInMin = useDriftMinutesFromEpoch(
     card.startsInMin,
     card.resourceId,
-    wallNow,
+    wallNowMs,
     false
   );
   const liveLateMin = useDriftUpMinutesFromEpoch(
     card.lateMin,
     card.resourceId,
-    wallNow
+    wallNowMs
   );
-  const statusKey = (0, import_venueWallUtils.deriveVenueWallStatus)({
-    ...card,
-    remainingMin: liveRemainingMin
-  });
-  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);
+  const presentation = (0, import_react.useMemo)(
+    () => (0, import_venueWallCardPresentation.buildVenueWallCardPresentation)({
+      card,
+      toneMap,
+      liveRemainingMin,
+      liveStartsInMin,
+      liveLateMin,
+      boardingSoonBeforeMin,
+      idleMain,
+      idleSub,
+      occupiedCardColor,
+      availableCardColor
+    }),
+    [
+      card,
+      toneMap,
+      liveRemainingMin,
+      liveStartsInMin,
+      liveLateMin,
+      boardingSoonBeforeMin,
+      idleMain,
+      idleSub,
+      occupiedCardColor,
+      availableCardColor
+    ]
+  );
+  const {
+    statusKey,
+    isOccupied,
+    heroText,
+    heroColor,
+    noteText,
+    noteTextColor,
+    noteBg,
+    subColor,
+    mainColor,
+    currentLabel,
+    currentTime,
+    currentName,
+    currentNameColor,
+    nextNameColor,
+    progress,
+    progressColor,
+    rightTag,
+    rightTagColor,
+    rightTagBg,
+    rightTagBorder,
+    surfaceAccentColor
+  } = presentation;
   const nextItem = (_a = card.nextList) == null ? void 0 : _a[0];
   const nextCountLabel = nextItem ? `1/${((_b = card.nextList) == null ? void 0 : _b.length) ?? 0}` : "";
-  if (statusKey === "boardingSoon") {
-    heroText = (0, import_locales.getText)("pisell-resource-wall-card-starts-in").replace(
-      "{n}",
-      String(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(
-      "{n}",
-      String(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);
-  }
-  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 cardBg = isOccupied ? `linear-gradient(180deg, ${(0, import_venueWallUtils.alphaColor)(occupiedCardColor, 0.96)} 0%, ${(0, import_venueWallUtils.alphaColor)(occupiedCardColor, 0.88)} 100%)` : (0, import_venueWallUtils.alphaColor)(
     surfaceAccentColor,
     statusKey === "boardingSoon" || statusKey === "late" ? 0.06 : 0.03
@@ -643,14 +614,16 @@ var VenueWallCard = ({
               text: noteText,
               color: noteTextColor,
               duration: 24,
-              shouldMarquee: noteText.length > 32
+              shouldMarquee: noteText.length > import_resourceWallConstants.RESOURCE_WALL_NOTE_MARQUEE_MIN_CHARS
             }
           )
         )
       )
     )
   );
-};
+}
+var VenueWallCard = import_react.default.memo(VenueWallCardInner);
+VenueWallCard.displayName = "VenueWallCard";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   VenueWallCard

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

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

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

@@ -0,0 +1,29 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellRecordBoard/shellFrame/ResourceWall/resourceWallConstants.ts
+var resourceWallConstants_exports = {};
+__export(resourceWallConstants_exports, {
+  RESOURCE_WALL_NOTE_MARQUEE_MIN_CHARS: () => RESOURCE_WALL_NOTE_MARQUEE_MIN_CHARS
+});
+module.exports = __toCommonJS(resourceWallConstants_exports);
+var RESOURCE_WALL_NOTE_MARQUEE_MIN_CHARS = 32;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RESOURCE_WALL_NOTE_MARQUEE_MIN_CHARS
+});

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

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

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

@@ -0,0 +1,139 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellRecordBoard/shellFrame/ResourceWall/venueWallCardPresentation.ts
+var venueWallCardPresentation_exports = {};
+__export(venueWallCardPresentation_exports, {
+  buildVenueWallCardPresentation: () => buildVenueWallCardPresentation
+});
+module.exports = __toCommonJS(venueWallCardPresentation_exports);
+var import_locales = require("../../../../locales");
+var import_venueWallUtils = require("./venueWallUtils");
+function buildVenueWallCardPresentation(args) {
+  const {
+    card,
+    toneMap,
+    liveRemainingMin,
+    liveStartsInMin,
+    liveLateMin,
+    boardingSoonBeforeMin,
+    idleMain,
+    idleSub,
+    occupiedCardColor,
+    availableCardColor
+  } = args;
+  const statusKey = (0, import_venueWallUtils.deriveVenueWallStatus)({
+    ...card,
+    remainingMin: liveRemainingMin
+  });
+  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(
+      "{n}",
+      String(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(
+      "{n}",
+      String(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);
+  }
+  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;
+  return {
+    statusKey,
+    isOccupied,
+    heroText,
+    heroColor,
+    noteText,
+    noteTextColor,
+    noteBg,
+    subColor,
+    mainColor,
+    currentLabel,
+    currentTime,
+    currentName,
+    currentNameColor,
+    nextNameColor,
+    progress,
+    progressColor,
+    rightTag,
+    rightTagColor,
+    rightTagBg,
+    rightTagBorder,
+    surfaceAccentColor
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  buildVenueWallCardPresentation
+});

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

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