@pisell/materials 6.11.36 → 6.11.38

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

@@ -33,14 +33,13 @@ __export(ResourceWallControlPanel_exports, {
 });
 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_ResourceWallControlPanelColorTab = require("./ResourceWallControlPanelColorTab");
+var import_ResourceWallControlPanelLayoutTab = require("./ResourceWallControlPanelLayoutTab");
 var import_venueWallUtils = require("./venueWallUtils");
-var buildApplyPayload = (draft, boardingSoonBeforeMin) => ({
-  resourceIds: [...draft.draftIds],
+var buildApplyPayload = (resourceIds, draft, boardingSoonBeforeMin) => ({
+  resourceIds: [...resourceIds],
   layoutKey: draft.draftLayoutKey,
   customCols: Math.max(1, Math.min(6, draft.draftCustomCols)),
   customRows: Math.max(1, Math.min(6, draft.draftCustomRows)),
@@ -55,7 +54,6 @@ var ResourceWallControlPanel = ({
   open,
   onClose,
   isDark,
-  cards,
   layoutPresets,
   layoutKey,
   customCols,
@@ -73,7 +71,6 @@ var ResourceWallControlPanel = ({
   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);
@@ -81,12 +78,8 @@ var ResourceWallControlPanel = ({
   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,
@@ -97,7 +90,6 @@ var ResourceWallControlPanel = ({
     heroMaxWidthRatioProp
   });
   draftBootstrapRef.current = {
-    selectedResourceIds,
     layoutKey,
     customCols,
     customRows,
@@ -118,7 +110,6 @@ var ResourceWallControlPanel = ({
     }
     hasOpenedRef.current = true;
     const b = draftBootstrapRef.current;
-    setDraftIds([...b.selectedResourceIds]);
     setDraftLayoutKey(b.layoutKey);
     setDraftCustomCols(b.customCols);
     setDraftCustomRows(b.customRows);
@@ -132,8 +123,8 @@ var ResourceWallControlPanel = ({
   const flushApplyAndClose = (0, import_react.useCallback)(() => {
     onApply(
       buildApplyPayload(
+        selectedResourceIds,
         {
-          draftIds,
           draftLayoutKey,
           draftCustomCols,
           draftCustomRows,
@@ -148,7 +139,7 @@ var ResourceWallControlPanel = ({
     );
     onClose();
   }, [
-    draftIds,
+    selectedResourceIds,
     draftLayoutKey,
     draftCustomCols,
     draftCustomRows,
@@ -169,8 +160,6 @@ var ResourceWallControlPanel = ({
     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";
@@ -179,23 +168,6 @@ var ResourceWallControlPanel = ({
   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",
@@ -244,245 +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,
-        {
-          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",
+      /* @__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,
         {
-          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}`
+          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>;