@pisell/materials 6.11.34 → 6.11.36

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

@@ -0,0 +1,493 @@
+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/ResourceWallControlPanel.tsx
+var ResourceWallControlPanel_exports = {};
+__export(ResourceWallControlPanel_exports, {
+  ResourceWallControlPanel: () => ResourceWallControlPanel
+});
+module.exports = __toCommonJS(ResourceWallControlPanel_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_react_dom = require("react-dom");
+var import_locales = require("../../../../locales");
+var import_pisellNumber = require("../../../pisellNumber");
+var import_pisellSingleSelect = require("../../../pisellSingleSelect");
+var import_venueWallUtils = require("./venueWallUtils");
+var buildApplyPayload = (draft, boardingSoonBeforeMin) => ({
+  resourceIds: [...draft.draftIds],
+  layoutKey: draft.draftLayoutKey,
+  customCols: Math.max(1, Math.min(6, draft.draftCustomCols)),
+  customRows: Math.max(1, Math.min(6, draft.draftCustomRows)),
+  pageDurationSec: Math.max(3, Math.min(60, Math.round(draft.draftPageSec))),
+  occupiedCardColor: draft.draftOcc,
+  availableCardColor: draft.draftAvail,
+  boardingSoonBeforeMin: Math.max(1, Math.min(60, Math.round(boardingSoonBeforeMin))),
+  statusToneOverrides: (0, import_venueWallUtils.diffVenueWallStatusToneOverrides)(draft.draftTones),
+  heroMaxWidthRatio: Math.max(0.4, Math.min(0.8, draft.draftHeroRatio))
+});
+var ResourceWallControlPanel = ({
+  open,
+  onClose,
+  isDark,
+  cards,
+  layoutPresets,
+  layoutKey,
+  customCols,
+  customRows,
+  pageDurationSec,
+  occupiedCardColor,
+  availableCardColor,
+  boardingSoonBeforeMin,
+  statusToneOverrides,
+  selectedResourceIds,
+  onApply,
+  carouselPager,
+  heroMaxWidthRatio: heroMaxWidthRatioProp = 0.6
+}) => {
+  const [adminTab, setAdminTab] = (0, import_react.useState)(
+    "resource_layout"
+  );
+  const [draftIds, setDraftIds] = (0, import_react.useState)([]);
+  const [draftLayoutKey, setDraftLayoutKey] = (0, import_react.useState)(layoutKey);
+  const [draftCustomCols, setDraftCustomCols] = (0, import_react.useState)(customCols);
+  const [draftCustomRows, setDraftCustomRows] = (0, import_react.useState)(customRows);
+  const [draftPageSec, setDraftPageSec] = (0, import_react.useState)(pageDurationSec);
+  const [draftOcc, setDraftOcc] = (0, import_react.useState)(occupiedCardColor);
+  const [draftAvail, setDraftAvail] = (0, import_react.useState)(availableCardColor);
+  const [draftHeroRatio, setDraftHeroRatio] = (0, import_react.useState)(heroMaxWidthRatioProp);
+  const [draftHeroBenchmark, setDraftHeroBenchmark] = (0, import_react.useState)(
+    () => (0, import_locales.getText)("pisell-resource-wall-hero-benchmark-sample")
+  );
+  const [draftTones, setDraftTones] = (0, import_react.useState)(() => (0, import_venueWallUtils.getVenueWallStatusToneMap)());
+  const draftBootstrapRef = (0, import_react.useRef)({
+    selectedResourceIds,
+    layoutKey,
+    customCols,
+    customRows,
+    pageDurationSec,
+    occupiedCardColor,
+    availableCardColor,
+    statusToneOverrides,
+    heroMaxWidthRatioProp
+  });
+  draftBootstrapRef.current = {
+    selectedResourceIds,
+    layoutKey,
+    customCols,
+    customRows,
+    pageDurationSec,
+    occupiedCardColor,
+    availableCardColor,
+    statusToneOverrides,
+    heroMaxWidthRatioProp
+  };
+  const hasOpenedRef = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    if (!open) {
+      hasOpenedRef.current = false;
+      return;
+    }
+    if (hasOpenedRef.current) {
+      return;
+    }
+    hasOpenedRef.current = true;
+    const b = draftBootstrapRef.current;
+    setDraftIds([...b.selectedResourceIds]);
+    setDraftLayoutKey(b.layoutKey);
+    setDraftCustomCols(b.customCols);
+    setDraftCustomRows(b.customRows);
+    setDraftPageSec(b.pageDurationSec);
+    setDraftOcc(b.occupiedCardColor);
+    setDraftAvail(b.availableCardColor);
+    setDraftHeroRatio(b.heroMaxWidthRatioProp);
+    setDraftTones((0, import_venueWallUtils.getVenueWallStatusToneMap)(b.statusToneOverrides));
+    setAdminTab("resource_layout");
+  }, [open]);
+  const flushApplyAndClose = (0, import_react.useCallback)(() => {
+    onApply(
+      buildApplyPayload(
+        {
+          draftIds,
+          draftLayoutKey,
+          draftCustomCols,
+          draftCustomRows,
+          draftPageSec,
+          draftOcc,
+          draftAvail,
+          draftTones,
+          draftHeroRatio
+        },
+        boardingSoonBeforeMin
+      )
+    );
+    onClose();
+  }, [
+    draftIds,
+    draftLayoutKey,
+    draftCustomCols,
+    draftCustomRows,
+    draftPageSec,
+    draftOcc,
+    draftAvail,
+    draftTones,
+    draftHeroRatio,
+    boardingSoonBeforeMin,
+    onApply,
+    onClose
+  ]);
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") flushApplyAndClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, flushApplyAndClose]);
+  const selectedPreset = layoutPresets.find((p) => p.key === draftLayoutKey) ?? layoutPresets[2];
+  const pageCapacity = draftLayoutKey === "custom" ? Math.max(1, Math.min(6, draftCustomCols)) * Math.max(1, Math.min(6, draftCustomRows)) : selectedPreset.cols * selectedPreset.rows;
+  const shellBg = isDark ? "bg-slate-900 border-slate-800" : "bg-white border-slate-200";
+  const divider = isDark ? "border-slate-800" : "border-slate-200";
+  const headerText = isDark ? "text-slate-100" : "text-slate-900";
+  const mutedText = isDark ? "text-slate-500" : "text-slate-400";
+  const adminInputBg = isDark ? "bg-slate-900 border-slate-700 text-slate-100" : "bg-white border-slate-200 text-slate-700";
+  const adminSectionBg = isDark ? "bg-slate-950 border-slate-800" : "bg-slate-50 border-slate-200";
+  const cur = carouselPager.currentPage + 1;
+  const tot = Math.max(1, carouselPager.totalPages);
+  const toggleResource = (id, checked) => {
+    setDraftIds((prev) => {
+      const set = new Set(prev);
+      if (checked) {
+        set.add(id);
+      } else {
+        set.delete(id);
+      }
+      return Array.from(set);
+    });
+  };
+  const selectAllDisplayed = () => {
+    setDraftIds(cards.map((c) => String(c.resourceId)));
+  };
+  const clearResources = () => {
+    setDraftIds([]);
+  };
+  if (!open) return null;
+  const modal = /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "fixed inset-0 z-50 bg-slate-900/40 backdrop-blur-[2px] p-4 md:p-8",
+      onClick: flushApplyAndClose,
+      role: "presentation"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `mx-auto max-w-[900px] rounded-[30px] border shadow-[0_30px_80px_rgba(15,23,42,0.16)] overflow-hidden ${shellBg}`,
+        onClick: (e) => e.stopPropagation(),
+        role: "dialog",
+        "aria-modal": "true"
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `border-b px-5 md:px-6 py-4 flex items-center justify-between gap-4 ${divider}`
+        },
+        /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-[11px] uppercase tracking-[0.24em] ${mutedText}` }, (0, import_locales.getText)("pisell-resource-wall-control-eyebrow")), /* @__PURE__ */ import_react.default.createElement("div", { className: `mt-1 text-2xl font-semibold tracking-tight ${headerText}` }, (0, import_locales.getText)("pisell-resource-wall-control-subtitle")), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-3 inline-flex items-center rounded-full border p-1 border-slate-200 bg-white" }, /* @__PURE__ */ import_react.default.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: () => setAdminTab("resource_layout"),
+            className: `rounded-full px-3 py-1.5 text-sm transition ${adminTab === "resource_layout" ? "bg-slate-900 text-white" : "text-slate-600 hover:bg-slate-100"}`
+          },
+          (0, import_locales.getText)("pisell-resource-wall-tab-layout")
+        ), /* @__PURE__ */ import_react.default.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: () => setAdminTab("color"),
+            className: `rounded-full px-3 py-1.5 text-sm transition ${adminTab === "color" ? "bg-slate-900 text-white" : "text-slate-600 hover:bg-slate-100"}`
+          },
+          (0, import_locales.getText)("pisell-resource-wall-tab-colors")
+        ))),
+        /* @__PURE__ */ import_react.default.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: flushApplyAndClose,
+            className: `rounded-full px-4 py-2 text-sm border ${isDark ? "border-slate-700 text-slate-300 hover:bg-slate-800" : "border-slate-200 text-slate-600 hover:bg-slate-50"}`
+          },
+          (0, import_locales.getText)("pisell-resource-wall-control-close")
+        )
+      ),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "p-5 md:p-6 space-y-6 max-h-[78vh] overflow-auto" }, adminTab === "resource_layout" ? /* @__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(cur)).replace("{tot}", String(tot)).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")), /* @__PURE__ */ import_react.default.createElement(
+        "input",
+        {
+          type: "text",
+          value: draftHeroBenchmark,
+          onChange: (e) => setDraftHeroBenchmark(e.target.value),
+          className: `mt-3 w-full rounded-xl border px-3 py-2 outline-none ${adminInputBg}`,
+          placeholder: (0, import_locales.getText)("pisell-resource-wall-hero-benchmark-placeholder")
+        }
+      )), /* @__PURE__ */ import_react.default.createElement("div", { className: `rounded-2xl border p-3 ${adminInputBg}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: "mb-3 flex items-center justify-between gap-3" }, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-xs ${mutedText}` }, (0, import_locales.getText)("pisell-resource-wall-resources-select-with-count").replace(
+        "{n}",
+        String(cards.length)
+      ), /* @__PURE__ */ import_react.default.createElement("span", { className: "mt-1 block text-[11px] opacity-70" }, (0, import_locales.getText)("pisell-resource-wall-resources-capacity-carousel-hint").replace(
+        "{cap}",
+        String(pageCapacity)
+      ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: selectAllDisplayed,
+          className: "rounded-full border px-3 py-1.5 text-xs hover:bg-slate-100"
+        },
+        (0, import_locales.getText)("pisell-resource-wall-modal-select-all")
+      ), /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: clearResources,
+          className: "rounded-full border px-3 py-1.5 text-xs hover:bg-slate-100"
+        },
+        (0, import_locales.getText)("pisell-resource-wall-modal-clear-all")
+      ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "grid grid-cols-4 gap-2" }, cards.map((card) => {
+        const id = String(card.resourceId);
+        const checked = draftIds.includes(id);
+        const label = card.resource || id;
+        return /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            key: id,
+            className: `flex min-w-0 items-center gap-1.5 rounded-xl border px-2 py-2 ${adminInputBg}`
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_antd.Checkbox,
+            {
+              checked,
+              onChange: (e) => toggleResource(id, e.target.checked),
+              className: "shrink-0"
+            }
+          ),
+          /* @__PURE__ */ import_react.default.createElement(
+            "span",
+            {
+              className: "min-w-0 flex-1 cursor-pointer truncate text-left text-sm",
+              title: label,
+              onClick: () => toggleResource(id, !checked)
+            },
+            label
+          )
+        );
+      })))) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__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-colors")), /* @__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-occupied-card-color-label")), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react.default.createElement(
+        "input",
+        {
+          type: "color",
+          value: draftOcc,
+          onChange: (e) => setDraftOcc(e.target.value),
+          className: `h-10 w-14 shrink-0 rounded-lg border p-1 ${adminInputBg}`
+        }
+      ), /* @__PURE__ */ import_react.default.createElement(
+        "input",
+        {
+          type: "text",
+          value: draftOcc,
+          onChange: (e) => setDraftOcc(e.target.value),
+          className: `flex-1 rounded-xl border px-3 py-2 outline-none ${adminInputBg}`
+        }
+      ))), /* @__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-available-card-color-label")), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react.default.createElement(
+        "input",
+        {
+          type: "color",
+          value: draftAvail,
+          onChange: (e) => setDraftAvail(e.target.value),
+          className: `h-10 w-14 shrink-0 rounded-lg border p-1 ${adminInputBg}`
+        }
+      ), /* @__PURE__ */ import_react.default.createElement(
+        "input",
+        {
+          type: "text",
+          value: draftAvail,
+          onChange: (e) => setDraftAvail(e.target.value),
+          className: `flex-1 rounded-xl border px-3 py-2 outline-none ${adminInputBg}`
+        }
+      ))))), /* @__PURE__ */ import_react.default.createElement("section", { className: `overflow-hidden rounded-2xl border ${adminSectionBg}` }, /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `border-b px-4 py-3 text-sm font-semibold ${headerText} ${divider}`
+        },
+        (0, import_locales.getText)("pisell-resource-wall-status-table-title")
+      ), /* @__PURE__ */ import_react.default.createElement("div", { className: "grid grid-cols-[0.8fr_1fr_1.3fr_0.9fr_0.9fr] gap-3 border-b px-4 py-3 text-xs font-semibold text-slate-500" }, /* @__PURE__ */ import_react.default.createElement("div", null, (0, import_locales.getText)("pisell-resource-wall-status-col-key")), /* @__PURE__ */ import_react.default.createElement("div", null, (0, import_locales.getText)("pisell-resource-wall-status-col-label")), /* @__PURE__ */ import_react.default.createElement("div", null, (0, import_locales.getText)("pisell-resource-wall-status-col-explain")), /* @__PURE__ */ import_react.default.createElement("div", null, (0, import_locales.getText)("pisell-resource-wall-status-col-color")), /* @__PURE__ */ import_react.default.createElement("div", null, (0, import_locales.getText)("pisell-resource-wall-status-col-notebg"))), import_venueWallUtils.VENUE_WALL_STATUS_KEYS.map((key) => {
+        const item = draftTones[key];
+        return /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            key,
+            className: `grid grid-cols-[0.8fr_1fr_1.3fr_0.9fr_0.9fr] items-center gap-3 border-b px-4 py-3 last:border-b-0 ${divider}`
+          },
+          /* @__PURE__ */ import_react.default.createElement("div", { className: `text-sm font-medium ${headerText}` }, (0, import_locales.getText)(`pisell-resource-wall-status-id-${key}`)),
+          /* @__PURE__ */ import_react.default.createElement(
+            "input",
+            {
+              type: "text",
+              value: item.label,
+              onChange: (e) => setDraftTones((prev) => ({
+                ...prev,
+                [key]: { ...prev[key], label: e.target.value }
+              })),
+              className: `w-full rounded-xl border px-3 py-2 outline-none ${adminInputBg}`
+            }
+          ),
+          /* @__PURE__ */ import_react.default.createElement(
+            "textarea",
+            {
+              rows: 2,
+              value: item.note,
+              onChange: (e) => setDraftTones((prev) => ({
+                ...prev,
+                [key]: { ...prev[key], note: e.target.value }
+              })),
+              className: `w-full resize-none rounded-xl border px-3 py-2 outline-none ${adminInputBg}`
+            }
+          ),
+          /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react.default.createElement(
+            "input",
+            {
+              type: "color",
+              value: item.color,
+              onChange: (e) => setDraftTones((prev) => ({
+                ...prev,
+                [key]: { ...prev[key], color: e.target.value }
+              })),
+              className: `h-10 w-14 shrink-0 rounded-lg border p-1 ${adminInputBg}`
+            }
+          ), /* @__PURE__ */ import_react.default.createElement(
+            "input",
+            {
+              type: "text",
+              value: item.color,
+              onChange: (e) => setDraftTones((prev) => ({
+                ...prev,
+                [key]: { ...prev[key], color: e.target.value }
+              })),
+              className: `w-full rounded-xl border px-3 py-2 outline-none ${adminInputBg}`
+            }
+          )),
+          /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react.default.createElement(
+            "input",
+            {
+              type: "text",
+              value: item.noteBg,
+              onChange: (e) => setDraftTones((prev) => ({
+                ...prev,
+                [key]: { ...prev[key], noteBg: e.target.value }
+              })),
+              className: `w-full rounded-xl border px-3 py-2 outline-none ${adminInputBg}`
+            }
+          ))
+        );
+      }))))
+    )
+  );
+  return typeof document !== "undefined" ? (0, import_react_dom.createPortal)(modal, document.body) : null;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ResourceWallControlPanel
+});

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

@@ -0,0 +1,37 @@
+/** 资源墙：多页轮播顶栏倒计时条（与翻页 interval 同周期） */
+@keyframes pisell-resource-wall-page-countdown {
+  0% {
+    transform: scaleX(0);
+  }
+  100% {
+    transform: scaleX(1);
+  }
+}
+
+.pisell-resource-wall-page-countdown-bar {
+  transform-origin: left center;
+  animation-name: pisell-resource-wall-page-countdown;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+/**
+ * 资源墙伪全屏：不调用 Fullscreen API。
+ * 通过给 `body` 打标记，选择器固定 `.pisell-shell-frame-body` 铺满视口（width/height 均为 100%）。
+ */
+body.pisell-resource-wall-fixed-viewport {
+  overflow: hidden !important;
+}
+
+body.pisell-resource-wall-fixed-viewport .pisell-shell-frame-body {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+}

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { RecordBoardResourceWallCardModel } from '../../types';
+import { type VenueWallStatusKey, type VenueWallStatusTone } from './venueWallUtils';
 export interface VenueWallCardProps {
     card: RecordBoardResourceWallCardModel;
     /** boardingSoon：用于进度条分母（分钟） */
@@ -7,6 +8,10 @@ export interface VenueWallCardProps {
     occupiedCardColor?: string;
     availableCardColor?: string;
     heroMaxWidthRatio?: number;
+    /** 合并后的六态配色与文案；不传则用默认 map */
+    statusToneMap?: Record<VenueWallStatusKey, VenueWallStatusTone>;
+    /** 非占用态主/辅文案色在暗色外壳下的对比度 */
+    appearance?: 'light' | 'dark';
 }
 /**
  * 单块场地大屏卡（由 test.tsx CardItem 迁移，样式为内联 + 少量类名，不依赖 Tailwind）。