@pisell/materials 6.11.37 → 6.11.39

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

@@ -35,8 +35,8 @@ module.exports = __toCommonJS(ResourceWallControlPanel_exports);
 var import_react = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 var import_locales = require("../../../../locales");
-var import_pisellNumber = require("../../../pisellNumber");
-var import_pisellSingleSelect = require("../../../pisellSingleSelect");
+var import_ResourceWallControlPanelColorTab = require("./ResourceWallControlPanelColorTab");
+var import_ResourceWallControlPanelLayoutTab = require("./ResourceWallControlPanelLayoutTab");
 var import_venueWallUtils = require("./venueWallUtils");
 var buildApplyPayload = (resourceIds, draft, boardingSoonBeforeMin) => ({
   resourceIds: [...resourceIds],
@@ -216,186 +216,44 @@ var ResourceWallControlPanel = ({
           (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,
+      /* @__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(
+        import_ResourceWallControlPanelLayoutTab.ResourceWallControlPanelLayoutTab,
         {
-          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(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}`
+          adminSectionBg,
+          adminInputBg,
+          headerText,
+          mutedText,
+          layoutPresets,
+          draftLayoutKey,
+          setDraftLayoutKey,
+          draftCustomCols,
+          setDraftCustomCols,
+          draftCustomRows,
+          setDraftCustomRows,
+          draftPageSec,
+          setDraftPageSec,
+          draftHeroRatio,
+          setDraftHeroRatio,
+          carouselCur: cur,
+          carouselTot: tot,
+          isDark
         }
-      ), /* @__PURE__ */ import_react.default.createElement(
-        "input",
+      ) : /* @__PURE__ */ import_react.default.createElement(
+        import_ResourceWallControlPanelColorTab.ResourceWallControlPanelColorTab,
         {
-          type: "text",
-          value: draftAvail,
-          onChange: (e) => setDraftAvail(e.target.value),
-          className: `flex-1 rounded-xl border px-3 py-2 outline-none ${adminInputBg}`
+          adminSectionBg,
+          adminInputBg,
+          headerText,
+          mutedText,
+          divider,
+          draftOcc,
+          setDraftOcc,
+          draftAvail,
+          setDraftAvail,
+          draftTones,
+          setDraftTones
         }
-      ))))), /* @__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;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type VenueWallStatusKey, type VenueWallStatusTone } from './venueWallUtils';
+export interface ResourceWallControlPanelColorTabProps {
+    adminSectionBg: string;
+    adminInputBg: string;
+    headerText: string;
+    mutedText: string;
+    divider: string;
+    draftOcc: string;
+    setDraftOcc: (v: string) => void;
+    draftAvail: string;
+    setDraftAvail: (v: string) => void;
+    draftTones: Record<VenueWallStatusKey, VenueWallStatusTone>;
+    setDraftTones: React.Dispatch<React.SetStateAction<Record<VenueWallStatusKey, VenueWallStatusTone>>>;
+}
+/** 控制台「外观 / 颜色」分页：占用/空闲底色与六态表格 */
+export declare const ResourceWallControlPanelColorTab: React.FC<ResourceWallControlPanelColorTabProps>;

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

@@ -0,0 +1,163 @@
+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/ResourceWallControlPanelColorTab.tsx
+var ResourceWallControlPanelColorTab_exports = {};
+__export(ResourceWallControlPanelColorTab_exports, {
+  ResourceWallControlPanelColorTab: () => ResourceWallControlPanelColorTab
+});
+module.exports = __toCommonJS(ResourceWallControlPanelColorTab_exports);
+var import_react = __toESM(require("react"));
+var import_locales = require("../../../../locales");
+var import_venueWallUtils = require("./venueWallUtils");
+var ResourceWallControlPanelColorTab = ({
+  adminSectionBg,
+  adminInputBg,
+  headerText,
+  mutedText,
+  divider,
+  draftOcc,
+  setDraftOcc,
+  draftAvail,
+  setDraftAvail,
+  draftTones,
+  setDraftTones
+}) => {
+  return /* @__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}`
+        }
+      ))
+    );
+  })));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ResourceWallControlPanelColorTab
+});

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

@@ -0,0 +1,28 @@
+import React from 'react';
+export interface ResourceWallControlPanelLayoutTabProps {
+    adminSectionBg: string;
+    adminInputBg: string;
+    headerText: string;
+    mutedText: string;
+    layoutPresets: readonly {
+        key: string;
+        label: string;
+        cols: number;
+        rows: number;
+    }[];
+    draftLayoutKey: string;
+    setDraftLayoutKey: (v: string) => void;
+    draftCustomCols: number;
+    setDraftCustomCols: (v: number) => void;
+    draftCustomRows: number;
+    setDraftCustomRows: (v: number) => void;
+    draftPageSec: number;
+    setDraftPageSec: (v: number) => void;
+    draftHeroRatio: number;
+    setDraftHeroRatio: (v: number) => void;
+    carouselCur: number;
+    carouselTot: number;
+    isDark: boolean;
+}
+/** 控制台「资源 / 布局」分页：预设、自定义行列、翻页停留、主文案宽度 */
+export declare const ResourceWallControlPanelLayoutTab: React.FC<ResourceWallControlPanelLayoutTabProps>;

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>;