@pisell/materials 6.11.36 → 6.11.38

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

@@ -0,0 +1,136 @@
+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/ResourceWallControlPanelLayoutTab.tsx
+var ResourceWallControlPanelLayoutTab_exports = {};
+__export(ResourceWallControlPanelLayoutTab_exports, {
+  ResourceWallControlPanelLayoutTab: () => ResourceWallControlPanelLayoutTab
+});
+module.exports = __toCommonJS(ResourceWallControlPanelLayoutTab_exports);
+var import_react = __toESM(require("react"));
+var import_locales = require("../../../../locales");
+var import_pisellNumber = require("../../../pisellNumber");
+var import_pisellSingleSelect = require("../../../pisellSingleSelect");
+var ResourceWallControlPanelLayoutTab = ({
+  adminSectionBg,
+  adminInputBg,
+  headerText,
+  mutedText,
+  layoutPresets,
+  draftLayoutKey,
+  setDraftLayoutKey,
+  draftCustomCols,
+  setDraftCustomCols,
+  draftCustomRows,
+  setDraftCustomRows,
+  draftPageSec,
+  setDraftPageSec,
+  draftHeroRatio,
+  setDraftHeroRatio,
+  carouselCur,
+  carouselTot,
+  isDark
+}) => {
+  return /* @__PURE__ */ import_react.default.createElement("section", { className: `rounded-2xl border p-4 space-y-4 ${adminSectionBg}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-sm font-semibold ${headerText}` }, (0, import_locales.getText)("pisell-resource-wall-tab-layout")), /* @__PURE__ */ import_react.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-3" }, /* @__PURE__ */ import_react.default.createElement("label", { className: `rounded-2xl border p-3 block ${adminInputBg}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-xs mb-2 ${mutedText}` }, (0, import_locales.getText)("pisell-resource-wall-display-mode")), /* @__PURE__ */ import_react.default.createElement("div", { className: `w-full rounded-xl border px-3 py-2 ${adminInputBg}` }, (0, import_locales.getText)("pisell-resource-wall-carousel-paging-mode"))), /* @__PURE__ */ import_react.default.createElement("label", { className: `rounded-2xl border p-3 block ${adminInputBg}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-xs mb-2 ${mutedText}` }, (0, import_locales.getText)("pisell-resource-wall-carousel-dwell-sec-label")), /* @__PURE__ */ import_react.default.createElement(
+    import_pisellNumber.PisellNumber,
+    {
+      className: "w-full",
+      value: draftPageSec,
+      min: 3,
+      max: 60,
+      step: 1,
+      precision: 0,
+      onChange: (v) => setDraftPageSec(
+        v == null ? 3 : Math.max(3, Math.min(60, Math.round(v)))
+      )
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: `rounded-2xl border p-3 ${adminInputBg}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-xs mb-2 ${mutedText}` }, (0, import_locales.getText)("pisell-resource-wall-summary-pagination")), /* @__PURE__ */ import_react.default.createElement("div", { className: "text-sm font-semibold" }, (0, import_locales.getText)("pisell-resource-wall-carousel-countdown-line").replace("{cur}", String(carouselCur)).replace("{tot}", String(carouselTot)).replace("{sec}", String(Math.max(3, draftPageSec)))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3" }, /* @__PURE__ */ import_react.default.createElement("label", { className: `rounded-2xl border p-3 block ${adminInputBg}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-xs mb-2 ${mutedText}` }, (0, import_locales.getText)("pisell-resource-wall-layout-field-label")), /* @__PURE__ */ import_react.default.createElement(
+    import_pisellSingleSelect.PisellSingleSelect,
+    {
+      className: "w-full",
+      value: draftLayoutKey,
+      options: layoutPresets.map((item) => ({
+        value: item.key,
+        label: item.label
+      })),
+      placeholder: (0, import_locales.getText)("pisell-resource-wall-layout-placeholder"),
+      allowClear: false,
+      onChange: (v) => {
+        if (v != null) setDraftLayoutKey(String(v));
+      }
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "grid grid-cols-2 gap-3" }, /* @__PURE__ */ import_react.default.createElement("label", { className: `rounded-2xl border p-3 block ${adminInputBg}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-xs mb-2 ${mutedText}` }, (0, import_locales.getText)("pisell-resource-wall-panel-custom-cols")), /* @__PURE__ */ import_react.default.createElement(
+    import_pisellNumber.PisellNumber,
+    {
+      className: "w-full",
+      value: draftCustomCols,
+      min: 1,
+      max: 6,
+      step: 1,
+      precision: 0,
+      onChange: (v) => setDraftCustomCols(
+        v == null ? 1 : Math.max(1, Math.min(6, Math.round(v)))
+      )
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("label", { className: `rounded-2xl border p-3 block ${adminInputBg}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-xs mb-2 ${mutedText}` }, (0, import_locales.getText)("pisell-resource-wall-panel-custom-rows")), /* @__PURE__ */ import_react.default.createElement(
+    import_pisellNumber.PisellNumber,
+    {
+      className: "w-full",
+      value: draftCustomRows,
+      min: 1,
+      max: 6,
+      step: 1,
+      precision: 0,
+      onChange: (v) => setDraftCustomRows(
+        v == null ? 1 : Math.max(1, Math.min(6, Math.round(v)))
+      )
+    }
+  )))), /* @__PURE__ */ import_react.default.createElement("label", { className: `rounded-2xl border p-3 block ${adminInputBg}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-xs mb-2 ${mutedText}` }, (0, import_locales.getText)("pisell-resource-wall-hero-width-ratio")), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      type: "range",
+      min: 40,
+      max: 80,
+      step: 1,
+      value: Math.round(draftHeroRatio * 100),
+      onChange: (e) => setDraftHeroRatio(Number(e.target.value) / 100),
+      className: "flex-1"
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: `${isDark ? "text-slate-200" : "text-slate-700"} text-sm font-semibold w-14 text-right`
+    },
+    Math.round(draftHeroRatio * 100),
+    "%"
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: `text-[11px] mt-2 ${mutedText}` }, (0, import_locales.getText)("pisell-resource-wall-hero-width-hint"))));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ResourceWallControlPanelLayoutTab
+});

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

@@ -35,3 +35,11 @@ body.pisell-resource-wall-fixed-viewport .pisell-shell-frame-body {
   max-height: 100%;
   overflow: hidden;
 }
+
+/* 与视口根内联色一致，便于主题扩展时集中覆写（当前主色仍由 JS 注入） */
+.pisell-resource-wall-shell {
+  --pisell-rw-page-bg-light: #f5f7fb;
+  --pisell-rw-page-bg-dark: #0f172a;
+  --pisell-rw-header-bg-light: #ffffff;
+  --pisell-rw-header-bg-dark: #1e293b;
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface ResourceWallViewportToolbarProps {
+    now: Date;
+    appearanceMode: 'light' | 'dark';
+    onAppearanceModeChange: (m: 'light' | 'dark') => void;
+    pseudoFullscreen: boolean;
+    onTogglePseudoFullscreen: () => void;
+    onOpenControlPanel: () => void;
+    headerBorder: string;
+    headerBg: string;
+    clockColor: string;
+    mutedText: string;
+    toolbarBtnBorder: string;
+    toolbarBtnBg: string;
+    toolbarBtnBgActive: string;
+}
+/** 资源墙顶栏：时钟、浅深切换、伪全屏、控制台入口 */
+export declare const ResourceWallViewportToolbar: React.FC<ResourceWallViewportToolbarProps>;

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;