@pisell/materials 6.11.36 → 6.11.38

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

@@ -1,9 +1,3 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
@@ -15,15 +9,15 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Checkbox } from 'antd';
 import { createPortal } from 'react-dom';
 import { getText } from "../../../../locales";
-import { PisellNumber } from "../../../pisellNumber";
-import { PisellSingleSelect } from "../../../pisellSingleSelect";
-import { VENUE_WALL_STATUS_KEYS, diffVenueWallStatusToneOverrides, getVenueWallStatusToneMap } from "./venueWallUtils";
-var buildApplyPayload = function buildApplyPayload(draft, boardingSoonBeforeMin) {
+import { ResourceWallControlPanelColorTab } from "./ResourceWallControlPanelColorTab";
+import { ResourceWallControlPanelLayoutTab } from "./ResourceWallControlPanelLayoutTab";
+import { diffVenueWallStatusToneOverrides, getVenueWallStatusToneMap } from "./venueWallUtils";
+/** 将面板内草稿压成一次 `onApply` 负载（行列、秒数、色值等做安全钳位） */
+var buildApplyPayload = function buildApplyPayload(resourceIds, draft, boardingSoonBeforeMin) {
   return {
-    resourceIds: _toConsumableArray(draft.draftIds),
+    resourceIds: _toConsumableArray(resourceIds),
     layoutKey: draft.draftLayoutKey,
     customCols: Math.max(1, Math.min(6, draft.draftCustomCols)),
     customRows: Math.max(1, Math.min(6, draft.draftCustomRows)),
@@ -37,16 +31,14 @@ var buildApplyPayload = function buildApplyPayload(draft, boardingSoonBeforeMin)
 };
 
 /**
- * 控制台弹层：JSX 自仓库根 `test.tsx` 的 `showAdmin` 整段复制后对接真实状态；
- * 状态表仅六态。
- * 关闭（Close / Escape / 点击遮罩）时提交当前草稿并关闭。
+ * 资源墙管理台（Portal）：选资源、网格预设/自定义行列、翻页秒数、占用/空闲色、六态说明与色值；
+ * `onApply` 回传负载中含 `diffVenueWallStatusToneOverrides` 压缩结果。
+ * 源自 test `showAdmin` 对接；关闭（Close / Escape / 遮罩）时提交草稿并关闭。
  */
 export var ResourceWallControlPanel = function ResourceWallControlPanel(_ref) {
-  var _layoutPresets$find;
   var open = _ref.open,
     onClose = _ref.onClose,
     isDark = _ref.isDark,
-    cards = _ref.cards,
     layoutPresets = _ref.layoutPresets,
     layoutKey = _ref.layoutKey,
     customCols = _ref.customCols,
@@ -65,57 +57,46 @@ export var ResourceWallControlPanel = function ResourceWallControlPanel(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     adminTab = _useState2[0],
     setAdminTab = _useState2[1];
-  var _useState3 = useState([]),
+  var _useState3 = useState(layoutKey),
     _useState4 = _slicedToArray(_useState3, 2),
-    draftIds = _useState4[0],
-    setDraftIds = _useState4[1];
-  var _useState5 = useState(layoutKey),
+    draftLayoutKey = _useState4[0],
+    setDraftLayoutKey = _useState4[1];
+  var _useState5 = useState(customCols),
     _useState6 = _slicedToArray(_useState5, 2),
-    draftLayoutKey = _useState6[0],
-    setDraftLayoutKey = _useState6[1];
-  var _useState7 = useState(customCols),
+    draftCustomCols = _useState6[0],
+    setDraftCustomCols = _useState6[1];
+  var _useState7 = useState(customRows),
     _useState8 = _slicedToArray(_useState7, 2),
-    draftCustomCols = _useState8[0],
-    setDraftCustomCols = _useState8[1];
-  var _useState9 = useState(customRows),
+    draftCustomRows = _useState8[0],
+    setDraftCustomRows = _useState8[1];
+  var _useState9 = useState(pageDurationSec),
     _useState10 = _slicedToArray(_useState9, 2),
-    draftCustomRows = _useState10[0],
-    setDraftCustomRows = _useState10[1];
-  var _useState11 = useState(pageDurationSec),
+    draftPageSec = _useState10[0],
+    setDraftPageSec = _useState10[1];
+  var _useState11 = useState(occupiedCardColor),
     _useState12 = _slicedToArray(_useState11, 2),
-    draftPageSec = _useState12[0],
-    setDraftPageSec = _useState12[1];
-  var _useState13 = useState(occupiedCardColor),
+    draftOcc = _useState12[0],
+    setDraftOcc = _useState12[1];
+  var _useState13 = useState(availableCardColor),
     _useState14 = _slicedToArray(_useState13, 2),
-    draftOcc = _useState14[0],
-    setDraftOcc = _useState14[1];
-  var _useState15 = useState(availableCardColor),
+    draftAvail = _useState14[0],
+    setDraftAvail = _useState14[1];
+  var _useState15 = useState(heroMaxWidthRatioProp),
     _useState16 = _slicedToArray(_useState15, 2),
-    draftAvail = _useState16[0],
-    setDraftAvail = _useState16[1];
-  var _useState17 = useState(heroMaxWidthRatioProp),
-    _useState18 = _slicedToArray(_useState17, 2),
-    draftHeroRatio = _useState18[0],
-    setDraftHeroRatio = _useState18[1];
-  var _useState19 = useState(function () {
-      return getText('pisell-resource-wall-hero-benchmark-sample');
-    }),
-    _useState20 = _slicedToArray(_useState19, 2),
-    draftHeroBenchmark = _useState20[0],
-    setDraftHeroBenchmark = _useState20[1];
-  var _useState21 = useState(function () {
+    draftHeroRatio = _useState16[0],
+    setDraftHeroRatio = _useState16[1];
+  var _useState17 = useState(function () {
       return getVenueWallStatusToneMap();
     }),
-    _useState22 = _slicedToArray(_useState21, 2),
-    draftTones = _useState22[0],
-    setDraftTones = _useState22[1];
+    _useState18 = _slicedToArray(_useState17, 2),
+    draftTones = _useState18[0],
+    setDraftTones = _useState18[1];
 
   /**
    * 弹层打开瞬间从 props 灌入草稿；effect **只依赖 open**，避免父组件每秒重绘（时钟等）时
-   * 因 layoutKey / selectedResourceIds 等引用变化再次执行 effect 把勾选状态刷回 props。
+   * 因 layoutKey 等引用变化再次执行 effect 把版式/配色草稿刷回 props。
    */
   var draftBootstrapRef = useRef({
-    selectedResourceIds: selectedResourceIds,
     layoutKey: layoutKey,
     customCols: customCols,
     customRows: customRows,
@@ -126,7 +107,6 @@ export var ResourceWallControlPanel = function ResourceWallControlPanel(_ref) {
     heroMaxWidthRatioProp: heroMaxWidthRatioProp
   });
   draftBootstrapRef.current = {
-    selectedResourceIds: selectedResourceIds,
     layoutKey: layoutKey,
     customCols: customCols,
     customRows: customRows,
@@ -147,7 +127,6 @@ export var ResourceWallControlPanel = function ResourceWallControlPanel(_ref) {
     }
     hasOpenedRef.current = true;
     var b = draftBootstrapRef.current;
-    setDraftIds(_toConsumableArray(b.selectedResourceIds));
     setDraftLayoutKey(b.layoutKey);
     setDraftCustomCols(b.customCols);
     setDraftCustomRows(b.customRows);
@@ -159,8 +138,7 @@ export var ResourceWallControlPanel = function ResourceWallControlPanel(_ref) {
     setAdminTab('resource_layout');
   }, [open]);
   var flushApplyAndClose = useCallback(function () {
-    onApply(buildApplyPayload({
-      draftIds: draftIds,
+    onApply(buildApplyPayload(selectedResourceIds, {
       draftLayoutKey: draftLayoutKey,
       draftCustomCols: draftCustomCols,
       draftCustomRows: draftCustomRows,
@@ -171,7 +149,9 @@ export var ResourceWallControlPanel = function ResourceWallControlPanel(_ref) {
       draftHeroRatio: draftHeroRatio
     }, boardingSoonBeforeMin));
     onClose();
-  }, [draftIds, draftLayoutKey, draftCustomCols, draftCustomRows, draftPageSec, draftOcc, draftAvail, draftTones, draftHeroRatio, boardingSoonBeforeMin, onApply, onClose]);
+  }, [selectedResourceIds, draftLayoutKey, draftCustomCols, draftCustomRows, draftPageSec, draftOcc, draftAvail, draftTones, draftHeroRatio, boardingSoonBeforeMin, onApply, onClose]);
+
+  /** Escape：与关闭按钮一致，提交当前草稿并关闭（非「取消放弃」语义） */
   useEffect(function () {
     if (!open) return;
     var onKey = function onKey(e) {
@@ -182,10 +162,6 @@ export var ResourceWallControlPanel = function ResourceWallControlPanel(_ref) {
       return window.removeEventListener('keydown', onKey);
     };
   }, [open, flushApplyAndClose]);
-  var selectedPreset = (_layoutPresets$find = layoutPresets.find(function (p) {
-    return p.key === draftLayoutKey;
-  })) !== null && _layoutPresets$find !== void 0 ? _layoutPresets$find : layoutPresets[2];
-  var pageCapacity = draftLayoutKey === 'custom' ? Math.max(1, Math.min(6, draftCustomCols)) * Math.max(1, Math.min(6, draftCustomRows)) : selectedPreset.cols * selectedPreset.rows;
   var shellBg = isDark ? 'bg-slate-900 border-slate-800' : 'bg-white border-slate-200';
   var divider = isDark ? 'border-slate-800' : 'border-slate-200';
   var headerText = isDark ? 'text-slate-100' : 'text-slate-900';
@@ -194,25 +170,6 @@ export var ResourceWallControlPanel = function ResourceWallControlPanel(_ref) {
   var adminSectionBg = isDark ? 'bg-slate-950 border-slate-800' : 'bg-slate-50 border-slate-200';
   var cur = carouselPager.currentPage + 1;
   var tot = Math.max(1, carouselPager.totalPages);
-  var toggleResource = function toggleResource(id, checked) {
-    setDraftIds(function (prev) {
-      var set = new Set(prev);
-      if (checked) {
-        set.add(id);
-      } else {
-        set.delete(id);
-      }
-      return Array.from(set);
-    });
-  };
-  var selectAllDisplayed = function selectAllDisplayed() {
-    setDraftIds(cards.map(function (c) {
-      return String(c.resourceId);
-    }));
-  };
-  var clearResources = function clearResources() {
-    setDraftIds([]);
-  };
   if (!open) return null;
   var modal = /*#__PURE__*/React.createElement("div", {
     className: "fixed inset-0 z-50 bg-slate-900/40 backdrop-blur-[2px] p-4 md:p-8",
@@ -251,275 +208,37 @@ export var ResourceWallControlPanel = function ResourceWallControlPanel(_ref) {
     className: "rounded-full px-4 py-2 text-sm border ".concat(isDark ? 'border-slate-700 text-slate-300 hover:bg-slate-800' : 'border-slate-200 text-slate-600 hover:bg-slate-50')
   }, getText('pisell-resource-wall-control-close'))), /*#__PURE__*/React.createElement("div", {
     className: "p-5 md:p-6 space-y-6 max-h-[78vh] overflow-auto"
-  }, adminTab === 'resource_layout' ? /*#__PURE__*/React.createElement("section", {
-    className: "rounded-2xl border p-4 space-y-4 ".concat(adminSectionBg)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "text-sm font-semibold ".concat(headerText)
-  }, getText('pisell-resource-wall-tab-layout')), /*#__PURE__*/React.createElement("div", {
-    className: "grid grid-cols-1 md:grid-cols-3 gap-3"
-  }, /*#__PURE__*/React.createElement("label", {
-    className: "rounded-2xl border p-3 block ".concat(adminInputBg)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "text-xs mb-2 ".concat(mutedText)
-  }, getText('pisell-resource-wall-display-mode')), /*#__PURE__*/React.createElement("div", {
-    className: "w-full rounded-xl border px-3 py-2 ".concat(adminInputBg)
-  }, getText('pisell-resource-wall-carousel-paging-mode'))), /*#__PURE__*/React.createElement("label", {
-    className: "rounded-2xl border p-3 block ".concat(adminInputBg)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "text-xs mb-2 ".concat(mutedText)
-  }, getText('pisell-resource-wall-carousel-dwell-sec-label')), /*#__PURE__*/React.createElement(PisellNumber, {
-    className: "w-full",
-    value: draftPageSec,
-    min: 3,
-    max: 60,
-    step: 1,
-    precision: 0,
-    onChange: function onChange(v) {
-      return setDraftPageSec(v == null ? 3 : Math.max(3, Math.min(60, Math.round(v))));
-    }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "rounded-2xl border p-3 ".concat(adminInputBg)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "text-xs mb-2 ".concat(mutedText)
-  }, getText('pisell-resource-wall-summary-pagination')), /*#__PURE__*/React.createElement("div", {
-    className: "text-sm font-semibold"
-  }, getText('pisell-resource-wall-carousel-countdown-line').replace('{cur}', String(cur)).replace('{tot}', String(tot)).replace('{sec}', String(Math.max(3, draftPageSec)))))), /*#__PURE__*/React.createElement("div", {
-    className: "grid grid-cols-1 md:grid-cols-2 gap-3"
-  }, /*#__PURE__*/React.createElement("label", {
-    className: "rounded-2xl border p-3 block ".concat(adminInputBg)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "text-xs mb-2 ".concat(mutedText)
-  }, getText('pisell-resource-wall-layout-field-label')), /*#__PURE__*/React.createElement(PisellSingleSelect, {
-    className: "w-full",
-    value: draftLayoutKey,
-    options: layoutPresets.map(function (item) {
-      return {
-        value: item.key,
-        label: item.label
-      };
-    }),
-    placeholder: getText('pisell-resource-wall-layout-placeholder'),
-    allowClear: false,
-    onChange: function onChange(v) {
-      if (v != null) setDraftLayoutKey(String(v));
-    }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "grid grid-cols-2 gap-3"
-  }, /*#__PURE__*/React.createElement("label", {
-    className: "rounded-2xl border p-3 block ".concat(adminInputBg)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "text-xs mb-2 ".concat(mutedText)
-  }, getText('pisell-resource-wall-panel-custom-cols')), /*#__PURE__*/React.createElement(PisellNumber, {
-    className: "w-full",
-    value: draftCustomCols,
-    min: 1,
-    max: 6,
-    step: 1,
-    precision: 0,
-    onChange: function onChange(v) {
-      return setDraftCustomCols(v == null ? 1 : Math.max(1, Math.min(6, Math.round(v))));
-    }
-  })), /*#__PURE__*/React.createElement("label", {
-    className: "rounded-2xl border p-3 block ".concat(adminInputBg)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "text-xs mb-2 ".concat(mutedText)
-  }, getText('pisell-resource-wall-panel-custom-rows')), /*#__PURE__*/React.createElement(PisellNumber, {
-    className: "w-full",
-    value: draftCustomRows,
-    min: 1,
-    max: 6,
-    step: 1,
-    precision: 0,
-    onChange: function onChange(v) {
-      return setDraftCustomRows(v == null ? 1 : Math.max(1, Math.min(6, Math.round(v))));
-    }
-  })))), /*#__PURE__*/React.createElement("label", {
-    className: "rounded-2xl border p-3 block ".concat(adminInputBg)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "text-xs mb-2 ".concat(mutedText)
-  }, getText('pisell-resource-wall-hero-width-ratio')), /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center gap-3"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "range",
-    min: 40,
-    max: 80,
-    step: 1,
-    value: Math.round(draftHeroRatio * 100),
-    onChange: function onChange(e) {
-      return setDraftHeroRatio(Number(e.target.value) / 100);
-    },
-    className: "flex-1"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(isDark ? 'text-slate-200' : 'text-slate-700', " text-sm font-semibold w-14 text-right")
-  }, Math.round(draftHeroRatio * 100), "%")), /*#__PURE__*/React.createElement("div", {
-    className: "text-[11px] mt-2 ".concat(mutedText)
-  }, getText('pisell-resource-wall-hero-width-hint')), /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    value: draftHeroBenchmark,
-    onChange: function onChange(e) {
-      return setDraftHeroBenchmark(e.target.value);
-    },
-    className: "mt-3 w-full rounded-xl border px-3 py-2 outline-none ".concat(adminInputBg),
-    placeholder: getText('pisell-resource-wall-hero-benchmark-placeholder')
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "rounded-2xl border p-3 ".concat(adminInputBg)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "mb-3 flex items-center justify-between gap-3"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "text-xs ".concat(mutedText)
-  }, getText('pisell-resource-wall-resources-select-with-count').replace('{n}', String(cards.length)), /*#__PURE__*/React.createElement("span", {
-    className: "mt-1 block text-[11px] opacity-70"
-  }, getText('pisell-resource-wall-resources-capacity-carousel-hint').replace('{cap}', String(pageCapacity)))), /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center gap-2"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: selectAllDisplayed,
-    className: "rounded-full border px-3 py-1.5 text-xs hover:bg-slate-100"
-  }, getText('pisell-resource-wall-modal-select-all')), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: clearResources,
-    className: "rounded-full border px-3 py-1.5 text-xs hover:bg-slate-100"
-  }, getText('pisell-resource-wall-modal-clear-all')))), /*#__PURE__*/React.createElement("div", {
-    className: "grid grid-cols-4 gap-2"
-  }, cards.map(function (card) {
-    var id = String(card.resourceId);
-    var checked = draftIds.includes(id);
-    var label = card.resource || id;
-    return /*#__PURE__*/React.createElement("div", {
-      key: id,
-      className: "flex min-w-0 items-center gap-1.5 rounded-xl border px-2 py-2 ".concat(adminInputBg)
-    }, /*#__PURE__*/React.createElement(Checkbox, {
-      checked: checked,
-      onChange: function onChange(e) {
-        return toggleResource(id, e.target.checked);
-      },
-      className: "shrink-0"
-    }), /*#__PURE__*/React.createElement("span", {
-      className: "min-w-0 flex-1 cursor-pointer truncate text-left text-sm",
-      title: label,
-      onClick: function onClick() {
-        return toggleResource(id, !checked);
-      }
-    }, label));
-  })))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("section", {
-    className: "rounded-2xl border p-4 space-y-4 ".concat(adminSectionBg)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "text-sm font-semibold ".concat(headerText)
-  }, getText('pisell-resource-wall-tab-colors')), /*#__PURE__*/React.createElement("div", {
-    className: "grid grid-cols-2 gap-3"
-  }, /*#__PURE__*/React.createElement("label", {
-    className: "rounded-2xl border p-3 block ".concat(adminInputBg)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "text-xs mb-2 ".concat(mutedText)
-  }, getText('pisell-resource-wall-occupied-card-color-label')), /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center gap-3"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "color",
-    value: draftOcc,
-    onChange: function onChange(e) {
-      return setDraftOcc(e.target.value);
-    },
-    className: "h-10 w-14 shrink-0 rounded-lg border p-1 ".concat(adminInputBg)
-  }), /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    value: draftOcc,
-    onChange: function onChange(e) {
-      return setDraftOcc(e.target.value);
-    },
-    className: "flex-1 rounded-xl border px-3 py-2 outline-none ".concat(adminInputBg)
-  }))), /*#__PURE__*/React.createElement("label", {
-    className: "rounded-2xl border p-3 block ".concat(adminInputBg)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "text-xs mb-2 ".concat(mutedText)
-  }, getText('pisell-resource-wall-available-card-color-label')), /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center gap-3"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "color",
-    value: draftAvail,
-    onChange: function onChange(e) {
-      return setDraftAvail(e.target.value);
-    },
-    className: "h-10 w-14 shrink-0 rounded-lg border p-1 ".concat(adminInputBg)
-  }), /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    value: draftAvail,
-    onChange: function onChange(e) {
-      return setDraftAvail(e.target.value);
-    },
-    className: "flex-1 rounded-xl border px-3 py-2 outline-none ".concat(adminInputBg)
-  }))))), /*#__PURE__*/React.createElement("section", {
-    className: "overflow-hidden rounded-2xl border ".concat(adminSectionBg)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "border-b px-4 py-3 text-sm font-semibold ".concat(headerText, " ").concat(divider)
-  }, getText('pisell-resource-wall-status-table-title')), /*#__PURE__*/React.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__*/React.createElement("div", null, getText('pisell-resource-wall-status-col-key')), /*#__PURE__*/React.createElement("div", null, getText('pisell-resource-wall-status-col-label')), /*#__PURE__*/React.createElement("div", null, getText('pisell-resource-wall-status-col-explain')), /*#__PURE__*/React.createElement("div", null, getText('pisell-resource-wall-status-col-color')), /*#__PURE__*/React.createElement("div", null, getText('pisell-resource-wall-status-col-notebg'))), VENUE_WALL_STATUS_KEYS.map(function (key) {
-    var item = draftTones[key];
-    return /*#__PURE__*/React.createElement("div", {
-      key: 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 ".concat(divider)
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "text-sm font-medium ".concat(headerText)
-    }, getText("pisell-resource-wall-status-id-".concat(key))), /*#__PURE__*/React.createElement("input", {
-      type: "text",
-      value: item.label,
-      onChange: function onChange(e) {
-        return setDraftTones(function (prev) {
-          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, key, _objectSpread(_objectSpread({}, prev[key]), {}, {
-            label: e.target.value
-          })));
-        });
-      },
-      className: "w-full rounded-xl border px-3 py-2 outline-none ".concat(adminInputBg)
-    }), /*#__PURE__*/React.createElement("textarea", {
-      rows: 2,
-      value: item.note,
-      onChange: function onChange(e) {
-        return setDraftTones(function (prev) {
-          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, key, _objectSpread(_objectSpread({}, prev[key]), {}, {
-            note: e.target.value
-          })));
-        });
-      },
-      className: "w-full resize-none rounded-xl border px-3 py-2 outline-none ".concat(adminInputBg)
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "flex items-center gap-2"
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "color",
-      value: item.color,
-      onChange: function onChange(e) {
-        return setDraftTones(function (prev) {
-          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, key, _objectSpread(_objectSpread({}, prev[key]), {}, {
-            color: e.target.value
-          })));
-        });
-      },
-      className: "h-10 w-14 shrink-0 rounded-lg border p-1 ".concat(adminInputBg)
-    }), /*#__PURE__*/React.createElement("input", {
-      type: "text",
-      value: item.color,
-      onChange: function onChange(e) {
-        return setDraftTones(function (prev) {
-          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, key, _objectSpread(_objectSpread({}, prev[key]), {}, {
-            color: e.target.value
-          })));
-        });
-      },
-      className: "w-full rounded-xl border px-3 py-2 outline-none ".concat(adminInputBg)
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "flex items-center gap-2"
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "text",
-      value: item.noteBg,
-      onChange: function onChange(e) {
-        return setDraftTones(function (prev) {
-          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, key, _objectSpread(_objectSpread({}, prev[key]), {}, {
-            noteBg: e.target.value
-          })));
-        });
-      },
-      className: "w-full rounded-xl border px-3 py-2 outline-none ".concat(adminInputBg)
-    })));
-  }))))));
+  }, adminTab === 'resource_layout' ? /*#__PURE__*/React.createElement(ResourceWallControlPanelLayoutTab, {
+    adminSectionBg: adminSectionBg,
+    adminInputBg: adminInputBg,
+    headerText: headerText,
+    mutedText: mutedText,
+    layoutPresets: layoutPresets,
+    draftLayoutKey: draftLayoutKey,
+    setDraftLayoutKey: setDraftLayoutKey,
+    draftCustomCols: draftCustomCols,
+    setDraftCustomCols: setDraftCustomCols,
+    draftCustomRows: draftCustomRows,
+    setDraftCustomRows: setDraftCustomRows,
+    draftPageSec: draftPageSec,
+    setDraftPageSec: setDraftPageSec,
+    draftHeroRatio: draftHeroRatio,
+    setDraftHeroRatio: setDraftHeroRatio,
+    carouselCur: cur,
+    carouselTot: tot,
+    isDark: isDark
+  }) : /*#__PURE__*/React.createElement(ResourceWallControlPanelColorTab, {
+    adminSectionBg: adminSectionBg,
+    adminInputBg: adminInputBg,
+    headerText: headerText,
+    mutedText: mutedText,
+    divider: divider,
+    draftOcc: draftOcc,
+    setDraftOcc: setDraftOcc,
+    draftAvail: draftAvail,
+    setDraftAvail: setDraftAvail,
+    draftTones: draftTones,
+    setDraftTones: setDraftTones
+  }))));
   return typeof document !== 'undefined' ? /*#__PURE__*/createPortal(modal, document.body) : null;
 };

package/es/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>;