@pisell/materials 6.11.37 → 6.11.39

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; } }
@@ -17,9 +11,10 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 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";
+import { ResourceWallControlPanelColorTab } from "./ResourceWallControlPanelColorTab";
+import { ResourceWallControlPanelLayoutTab } from "./ResourceWallControlPanelLayoutTab";
+import { diffVenueWallStatusToneOverrides, getVenueWallStatusToneMap } from "./venueWallUtils";
+/** 将面板内草稿压成一次 `onApply` 负载（行列、秒数、色值等做安全钳位） */
 var buildApplyPayload = function buildApplyPayload(resourceIds, draft, boardingSoonBeforeMin) {
   return {
     resourceIds: _toConsumableArray(resourceIds),
@@ -36,9 +31,9 @@ var buildApplyPayload = function buildApplyPayload(resourceIds, draft, boardingS
 };
 
 /**
- * 控制台弹层：JSX 自仓库根 `test.tsx` 的 `showAdmin` 整段复制后对接真实状态；
- * 状态表仅六态。
- * 关闭（Close / Escape / 点击遮罩）时提交当前草稿并关闭。
+ * 资源墙管理台（Portal）：选资源、网格预设/自定义行列、翻页秒数、占用/空闲色、六态说明与色值；
+ * `onApply` 回传负载中含 `diffVenueWallStatusToneOverrides` 压缩结果。
+ * 源自 test `showAdmin` 对接；关闭（Close / Escape / 遮罩）时提交草稿并关闭。
  */
 export var ResourceWallControlPanel = function ResourceWallControlPanel(_ref) {
   var open = _ref.open,
@@ -155,6 +150,8 @@ export var ResourceWallControlPanel = function ResourceWallControlPanel(_ref) {
     }, boardingSoonBeforeMin));
     onClose();
   }, [selectedResourceIds, draftLayoutKey, draftCustomCols, draftCustomRows, draftPageSec, draftOcc, draftAvail, draftTones, draftHeroRatio, boardingSoonBeforeMin, onApply, onClose]);
+
+  /** Escape：与关闭按钮一致，提交当前草稿并关闭（非「取消放弃」语义） */
   useEffect(function () {
     if (!open) return;
     var onKey = function onKey(e) {
@@ -211,227 +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(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>;

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

@@ -0,0 +1,143 @@
+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); }
+import React from 'react';
+import { getText } from "../../../../locales";
+import { VENUE_WALL_STATUS_KEYS } from "./venueWallUtils";
+/** 控制台「外观 / 颜色」分页：占用/空闲底色与六态表格 */
+export var ResourceWallControlPanelColorTab = function ResourceWallControlPanelColorTab(_ref) {
+  var adminSectionBg = _ref.adminSectionBg,
+    adminInputBg = _ref.adminInputBg,
+    headerText = _ref.headerText,
+    mutedText = _ref.mutedText,
+    divider = _ref.divider,
+    draftOcc = _ref.draftOcc,
+    setDraftOcc = _ref.setDraftOcc,
+    draftAvail = _ref.draftAvail,
+    setDraftAvail = _ref.setDraftAvail,
+    draftTones = _ref.draftTones,
+    setDraftTones = _ref.setDraftTones;
+  return /*#__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)
+    })));
+  })));
+};

package/es/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/es/components/pisellRecordBoard/shellFrame/ResourceWall/ResourceWallControlPanelLayoutTab.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import { getText } from "../../../../locales";
+import { PisellNumber } from "../../../pisellNumber";
+import { PisellSingleSelect } from "../../../pisellSingleSelect";
+/** 控制台「资源 / 布局」分页：预设、自定义行列、翻页停留、主文案宽度 */
+export var ResourceWallControlPanelLayoutTab = function ResourceWallControlPanelLayoutTab(_ref) {
+  var adminSectionBg = _ref.adminSectionBg,
+    adminInputBg = _ref.adminInputBg,
+    headerText = _ref.headerText,
+    mutedText = _ref.mutedText,
+    layoutPresets = _ref.layoutPresets,
+    draftLayoutKey = _ref.draftLayoutKey,
+    setDraftLayoutKey = _ref.setDraftLayoutKey,
+    draftCustomCols = _ref.draftCustomCols,
+    setDraftCustomCols = _ref.setDraftCustomCols,
+    draftCustomRows = _ref.draftCustomRows,
+    setDraftCustomRows = _ref.setDraftCustomRows,
+    draftPageSec = _ref.draftPageSec,
+    setDraftPageSec = _ref.setDraftPageSec,
+    draftHeroRatio = _ref.draftHeroRatio,
+    setDraftHeroRatio = _ref.setDraftHeroRatio,
+    carouselCur = _ref.carouselCur,
+    carouselTot = _ref.carouselTot,
+    isDark = _ref.isDark;
+  return /*#__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(carouselCur)).replace('{tot}', String(carouselTot)).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'))));
+};

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