@pisell/materials 6.11.34 → 6.11.35

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

@@ -35,40 +35,291 @@ __export(PisellRecordBoardResourceWallView_exports, {
 module.exports = __toCommonJS(PisellRecordBoardResourceWallView_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
+var import_locales = require("../../../../locales");
+var import_locale = require("../../../../utils/locale");
 var import_useRecordBoardContext = require("../../hooks/useRecordBoardContext");
+var import_types = require("../../types");
+var import_venueWallUtils = require("./venueWallUtils");
 var import_VenueWallCard = require("./VenueWallCard");
+var import_ResourceWallControlPanel = require("./ResourceWallControlPanel");
+var import_ResourceWallViewport = require("./ResourceWallViewport.less");
 var DEFAULT_RESOURCE_WALL_FILTER_FIELD_KEY = "resource_wall_resource_ids";
+var FILTER_PARAMS_FIELD = "filter";
 var LAYOUT_PRESETS = [
-  { key: "1x1", cols: 1, rows: 1 },
-  { key: "1x2", cols: 2, rows: 1 },
-  { key: "2x3", cols: 3, rows: 2 },
-  { key: "3x2", cols: 2, rows: 3 },
-  { key: "3x3", cols: 3, rows: 3 }
+  { key: "1x1", label: "1 × 1", cols: 1, rows: 1 },
+  { key: "1x2", label: "1 × 2", cols: 2, rows: 1 },
+  { key: "2x3", label: "2 × 3", cols: 3, rows: 2 },
+  { key: "3x2", label: "3 × 2", cols: 2, rows: 3 },
+  { key: "3x3", label: "3 × 3", cols: 3, rows: 3 },
+  { key: "custom", label: "", cols: 3, rows: 2 }
 ];
+var DEFAULT_OCCUPIED = "#6f4ae6";
+var DEFAULT_AVAILABLE = "#10b981";
 var PisellRecordBoardResourceWallView = (props) => {
-  var _a, _b, _c;
-  const { className, style, loading, cards: cardsProp } = props;
+  const {
+    className,
+    style,
+    loading,
+    cards: cardsProp,
+    statusToneOverrides: statusToneOverridesProp,
+    onStatusToneOverridesChange,
+    appearanceTheme: appearanceThemeProp,
+    onAppearanceThemeChange,
+    appearanceMode: appearanceModeProp,
+    onAppearanceModeChange,
+    resourceWallLayout: resourceWallLayoutProp,
+    onResourceWallLayoutChange
+  } = props;
   const ctx = (0, import_useRecordBoardContext.useRecordBoardContext)();
   const filterKey = props.filterFieldKey ?? DEFAULT_RESOURCE_WALL_FILTER_FIELD_KEY;
-  const selectedRaw = (_c = (_b = (_a = ctx.searchParams) == null ? void 0 : _a.filter) == null ? void 0 : _b.values) == null ? void 0 : _c[filterKey];
-  const selectedIds = (0, import_react.useMemo)(() => {
-    if (!Array.isArray(selectedRaw)) return null;
-    return selectedRaw.map((x) => String(x));
-  }, [selectedRaw]);
+  const [localToneOverrides, setLocalToneOverrides] = (0, import_react.useState)({});
+  const emitToneOverrides = (0, import_react.useCallback)(
+    (next) => {
+      onStatusToneOverridesChange == null ? void 0 : onStatusToneOverridesChange(next);
+      if (onStatusToneOverridesChange == null) {
+        setLocalToneOverrides(next);
+      }
+    },
+    [onStatusToneOverridesChange]
+  );
+  const [internalAppearanceTheme, setInternalAppearanceTheme] = (0, import_react.useState)({});
+  const appearanceTheme = appearanceThemeProp ?? internalAppearanceTheme;
+  const persistAppearanceTheme = (0, import_react.useCallback)(
+    (next) => {
+      onAppearanceThemeChange == null ? void 0 : onAppearanceThemeChange(next);
+      if (onAppearanceThemeChange == null) {
+        setInternalAppearanceTheme(next);
+      }
+    },
+    [onAppearanceThemeChange]
+  );
+  const filterValues = (() => {
+    var _a;
+    const f = (_a = ctx.searchParams) == null ? void 0 : _a.filter;
+    if (!f || typeof f !== "object" || f === null) return void 0;
+    const v = f.values;
+    if (v === null || v === void 0 || typeof v !== "object" || Array.isArray(v)) {
+      return void 0;
+    }
+    return v;
+  })();
+  const hasResourceWallFilterKey = filterValues != null && Object.prototype.hasOwnProperty.call(filterValues, filterKey);
+  const selectedRaw = hasResourceWallFilterKey ? filterValues[filterKey] : void 0;
+  const wallSelectedIds = (0, import_react.useMemo)(() => {
+    if (!hasResourceWallFilterKey) return [];
+    if (!Array.isArray(selectedRaw)) return [];
+    const seen = /* @__PURE__ */ new Set();
+    const out = [];
+    for (const x of selectedRaw) {
+      const t = String(x).trim();
+      if (!t || seen.has(t)) continue;
+      seen.add(t);
+      out.push(t);
+    }
+    return out;
+  }, [hasResourceWallFilterKey, selectedRaw]);
   const cards = cardsProp ?? [];
+  const cardByResourceId = (0, import_react.useMemo)(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const c of cards) {
+      m.set(String(c.resourceId), c);
+    }
+    return m;
+  }, [cards]);
   const visibleCards = (0, import_react.useMemo)(() => {
-    if (selectedIds == null || selectedIds.length === 0) {
-      return cards;
+    if (!wallSelectedIds.length) {
+      return [];
     }
-    const set = new Set(selectedIds);
-    return cards.filter((c) => set.has(String(c.resourceId)));
-  }, [cards, selectedIds]);
+    return wallSelectedIds.map((id) => {
+      const key = String(id);
+      const hit = cardByResourceId.get(key);
+      if (hit) {
+        return hit;
+      }
+      return {
+        resourceId: key,
+        resource: key,
+        status: "available"
+      };
+    });
+  }, [cardByResourceId, wallSelectedIds]);
   const [now, setNow] = (0, import_react.useState)(() => /* @__PURE__ */ new Date());
   (0, import_react.useEffect)(() => {
     const id = window.setInterval(() => setNow(/* @__PURE__ */ new Date()), 1e3);
     return () => window.clearInterval(id);
   }, []);
-  const selectedLayout = LAYOUT_PRESETS[2];
+  const [internalAppearanceMode, setInternalAppearanceMode] = (0, import_react.useState)("light");
+  const appearanceModeControlled = appearanceModeProp !== void 0 && onAppearanceModeChange != null;
+  const appearanceMode = appearanceModeControlled ? appearanceModeProp : internalAppearanceMode;
+  const setAppearanceMode = (0, import_react.useCallback)(
+    (m) => {
+      onAppearanceModeChange == null ? void 0 : onAppearanceModeChange(m);
+      if (!appearanceModeControlled) {
+        setInternalAppearanceMode(m);
+      }
+    },
+    [appearanceModeControlled, onAppearanceModeChange]
+  );
+  const [showControlPanel, setShowControlPanel] = (0, import_react.useState)(false);
+  const closeControlPanel = (0, import_react.useCallback)(() => {
+    setShowControlPanel(false);
+  }, []);
+  const [currentPage, setCurrentPage] = (0, import_react.useState)(0);
+  const layoutPersisted = onResourceWallLayoutChange != null;
+  const [internalLayout, setInternalLayout] = (0, import_react.useState)(() => ({
+    ...import_types.DEFAULT_RESOURCE_WALL_LAYOUT_PERSIST
+  }));
+  const layoutState = layoutPersisted ? {
+    ...import_types.DEFAULT_RESOURCE_WALL_LAYOUT_PERSIST,
+    ...resourceWallLayoutProp ?? {}
+  } : internalLayout;
+  const setLayoutState = (0, import_react.useCallback)(
+    (patch) => {
+      if (layoutPersisted) {
+        onResourceWallLayoutChange({
+          ...import_types.DEFAULT_RESOURCE_WALL_LAYOUT_PERSIST,
+          ...resourceWallLayoutProp ?? {},
+          ...patch
+        });
+      } else {
+        setInternalLayout((prev) => ({
+          ...import_types.DEFAULT_RESOURCE_WALL_LAYOUT_PERSIST,
+          ...prev,
+          ...patch
+        }));
+      }
+    },
+    [layoutPersisted, resourceWallLayoutProp, onResourceWallLayoutChange]
+  );
+  const {
+    layoutKey,
+    customCols,
+    customRows,
+    pageDurationSec,
+    boardingSoonBeforeMin,
+    heroMaxWidthRatio
+  } = layoutState;
+  const localeKey = (0, import_locale.getCurrentLocale)();
+  const layoutPresetsWithI18n = (0, import_react.useMemo)(
+    () => LAYOUT_PRESETS.map((p) => ({
+      ...p,
+      label: p.key === "custom" ? (0, import_locales.getText)("pisell-resource-wall-layout-custom") : p.label
+    })),
+    [localeKey]
+  );
+  const modeSlot = appearanceTheme[appearanceMode] ?? {};
+  const occupiedCardColor = modeSlot.occupiedCardColor != null && modeSlot.occupiedCardColor !== "" ? modeSlot.occupiedCardColor : DEFAULT_OCCUPIED;
+  const availableCardColor = modeSlot.availableCardColor != null && modeSlot.availableCardColor !== "" ? modeSlot.availableCardColor : DEFAULT_AVAILABLE;
+  const modeToneOverrides = modeSlot.statusToneOverrides;
+  const hasModeToneOverrides = modeToneOverrides != null && Object.keys(modeToneOverrides).length > 0;
+  const statusToneOverrides = hasModeToneOverrides ? modeToneOverrides : statusToneOverridesProp !== void 0 ? statusToneOverridesProp : localToneOverrides;
+  const selectedLayout = (0, import_react.useMemo)(() => {
+    if (layoutKey === "custom") {
+      return {
+        key: "custom",
+        label: (0, import_locales.getText)("pisell-resource-wall-layout-custom"),
+        cols: Math.max(1, Math.min(6, customCols)),
+        rows: Math.max(1, Math.min(6, customRows))
+      };
+    }
+    return layoutPresetsWithI18n.find((p) => p.key === layoutKey) ?? layoutPresetsWithI18n[2];
+  }, [layoutKey, customCols, customRows, layoutPresetsWithI18n]);
+  const pageCapacity = selectedLayout.cols * selectedLayout.rows;
+  const pagedGroups = (0, import_react.useMemo)(() => {
+    const chunks = [];
+    for (let i = 0; i < visibleCards.length; i += pageCapacity) {
+      chunks.push(visibleCards.slice(i, i + pageCapacity));
+    }
+    return chunks;
+  }, [visibleCards, pageCapacity]);
+  const totalPages = Math.max(1, pagedGroups.length);
+  const renderCards = pagedGroups[currentPage] ?? visibleCards.slice(0, pageCapacity);
+  const controlCarouselPager = (0, import_react.useMemo)(
+    () => ({ currentPage, totalPages }),
+    [currentPage, totalPages]
+  );
+  (0, import_react.useEffect)(() => {
+    setCurrentPage(
+      (p) => totalPages > 0 ? Math.min(p, totalPages - 1) : 0
+    );
+  }, [totalPages]);
+  (0, import_react.useEffect)(() => {
+    if (totalPages <= 1) {
+      setCurrentPage(0);
+      return;
+    }
+    const ms = Math.max(3, pageDurationSec) * 1e3;
+    const timer = window.setInterval(() => {
+      setCurrentPage((p) => (p + 1) % totalPages);
+    }, ms);
+    return () => window.clearInterval(timer);
+  }, [totalPages, pageDurationSec]);
+  (0, import_react.useEffect)(() => {
+    setCurrentPage(0);
+  }, [pageCapacity, visibleCards.length]);
+  const mergeFilterResourceIds = (0, import_react.useCallback)(
+    (ids) => {
+      var _a;
+      const sp = ctx.searchParams ?? {};
+      const filterValue = sp[FILTER_PARAMS_FIELD];
+      const currentValues = (filterValue == null ? void 0 : filterValue.values) ?? {};
+      const nextFilter = {
+        ...filterValue,
+        values: {
+          ...currentValues,
+          [filterKey]: ids
+        }
+      };
+      (_a = ctx.onSearch) == null ? void 0 : _a.call(ctx, { ...sp, [FILTER_PARAMS_FIELD]: nextFilter });
+    },
+    [ctx, filterKey]
+  );
+  const handleControlApply = (0, import_react.useCallback)(
+    (payload) => {
+      mergeFilterResourceIds(payload.resourceIds);
+      setLayoutState({
+        layoutKey: payload.layoutKey,
+        customCols: payload.customCols,
+        customRows: payload.customRows,
+        pageDurationSec: payload.pageDurationSec,
+        boardingSoonBeforeMin: payload.boardingSoonBeforeMin,
+        heroMaxWidthRatio: payload.heroMaxWidthRatio
+      });
+      const nextSlot = {
+        ...appearanceTheme[appearanceMode],
+        occupiedCardColor: payload.occupiedCardColor,
+        availableCardColor: payload.availableCardColor,
+        statusToneOverrides: payload.statusToneOverrides
+      };
+      persistAppearanceTheme({
+        ...appearanceTheme,
+        [appearanceMode]: nextSlot
+      });
+      emitToneOverrides(payload.statusToneOverrides);
+    },
+    [
+      mergeFilterResourceIds,
+      emitToneOverrides,
+      appearanceTheme,
+      appearanceMode,
+      persistAppearanceTheme,
+      setLayoutState
+    ]
+  );
+  const statusToneMap = (0, import_react.useMemo)(
+    () => (0, import_venueWallUtils.getVenueWallStatusToneMap)(statusToneOverrides),
+    [statusToneOverrides]
+  );
+  const isDark = appearanceMode === "dark";
+  const pageBg = isDark ? "#0f172a" : "#f5f7fb";
+  const headerBg = isDark ? "#1e293b" : "#ffffff";
+  const headerBorder = isDark ? "1px solid #334155" : "1px solid #e2e8f0";
+  const clockColor = isDark ? "#f1f5f9" : "#0f172a";
+  const mutedText = isDark ? "#94a3b8" : "#64748b";
+  const toolbarBtnBorder = isDark ? "1px solid #475569" : "1px solid #e2e8f0";
+  const toolbarBtnBg = isDark ? "#334155" : "#ffffff";
+  const toolbarBtnBgActive = isDark ? "#475569" : "#f1f5f9";
+  const countdownSec = Math.max(3, pageDurationSec);
   const shell = /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
@@ -79,8 +330,8 @@ var PisellRecordBoardResourceWallView = (props) => {
         display: "flex",
         flexDirection: "column",
         overflow: "hidden",
-        background: "#f5f7fb",
-        color: "#0f172a",
+        background: pageBg,
+        color: clockColor,
         ...style
       }
     },
@@ -89,13 +340,13 @@ var PisellRecordBoardResourceWallView = (props) => {
       {
         style: {
           flexShrink: 0,
-          borderBottom: "1px solid #e2e8f0",
+          borderBottom: headerBorder,
           padding: "16px 24px",
           display: "flex",
           alignItems: "center",
           justifyContent: "space-between",
           gap: 16,
-          background: "#fff"
+          background: headerBg
         }
       },
       /* @__PURE__ */ import_react.default.createElement(
@@ -104,7 +355,8 @@ var PisellRecordBoardResourceWallView = (props) => {
           style: {
             fontSize: 22,
             fontWeight: 600,
-            letterSpacing: "-0.02em"
+            letterSpacing: "-0.02em",
+            color: clockColor
           }
         },
         now.toLocaleTimeString([], {
@@ -120,12 +372,126 @@ var PisellRecordBoardResourceWallView = (props) => {
           month: "short",
           year: "numeric"
         })
-      )
+      ),
+      /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } }, /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            borderRadius: 6,
+            border: toolbarBtnBorder,
+            overflow: "hidden",
+            background: toolbarBtnBg
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: () => setAppearanceMode("light"),
+            style: {
+              border: "none",
+              padding: "6px 12px",
+              fontSize: 13,
+              fontWeight: 500,
+              cursor: "pointer",
+              background: appearanceMode === "light" ? toolbarBtnBgActive : "transparent",
+              color: appearanceMode === "light" ? clockColor : mutedText
+            }
+          },
+          (0, import_locales.getText)("pisell-resource-wall-appearance-light")
+        ),
+        /* @__PURE__ */ import_react.default.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: () => setAppearanceMode("dark"),
+            style: {
+              border: "none",
+              borderLeft: toolbarBtnBorder,
+              padding: "6px 12px",
+              fontSize: 13,
+              fontWeight: 500,
+              cursor: "pointer",
+              background: appearanceMode === "dark" ? toolbarBtnBgActive : "transparent",
+              color: appearanceMode === "dark" ? clockColor : mutedText
+            }
+          },
+          (0, import_locales.getText)("pisell-resource-wall-appearance-dark")
+        )
+      ), /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowControlPanel(true),
+          style: {
+            borderRadius: 6,
+            padding: "6px 14px",
+            fontSize: 13,
+            fontWeight: 500,
+            cursor: "pointer",
+            border: toolbarBtnBorder,
+            background: toolbarBtnBg,
+            color: clockColor
+          }
+        },
+        (0, import_locales.getText)("pisell-resource-wall-control-open")
+      ))
     ),
-    /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1, minHeight: 0, padding: 12 } }, /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1, minHeight: 0, padding: 12, display: "flex", flexDirection: "column", gap: 10 } }, totalPages > 1 ? /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          flexShrink: 0,
+          display: "flex",
+          alignItems: "center",
+          gap: 12
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          style: {
+            fontSize: 13,
+            fontWeight: 600,
+            color: mutedText,
+            whiteSpace: "nowrap"
+          }
+        },
+        (0, import_locales.getText)("pisell-resource-wall-page-indicator").replace("{cur}", String(currentPage + 1)).replace("{total}", String(totalPages))
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          style: {
+            flex: 1,
+            height: 4,
+            borderRadius: 2,
+            overflow: "hidden",
+            background: isDark ? "rgba(255,255,255,0.1)" : "rgba(15,23,42,0.08)"
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            key: `${currentPage}-${countdownSec}`,
+            className: "pisell-resource-wall-page-countdown-bar",
+            style: {
+              height: "100%",
+              width: "100%",
+              background: occupiedCardColor,
+              animationDuration: `${countdownSec}s`
+            }
+          }
+        )
+      )
+    ) : null, /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
         style: {
+          flex: 1,
+          minHeight: 0,
           height: "100%",
           display: "grid",
           gap: 16,
@@ -133,10 +499,44 @@ var PisellRecordBoardResourceWallView = (props) => {
           gridTemplateRows: `repeat(${selectedLayout.rows}, minmax(0, 1fr))`
         }
       },
-      visibleCards.slice(0, selectedLayout.cols * selectedLayout.rows).map((card, index) => /* @__PURE__ */ import_react.default.createElement(import_VenueWallCard.VenueWallCard, { key: `${card.resourceId}-${index}`, card }))
-    ))
+      renderCards.map((card, index) => /* @__PURE__ */ import_react.default.createElement(
+        import_VenueWallCard.VenueWallCard,
+        {
+          key: `${card.resourceId}-${index}`,
+          card,
+          boardingSoonBeforeMin,
+          occupiedCardColor,
+          availableCardColor,
+          heroMaxWidthRatio,
+          statusToneMap,
+          appearance: appearanceMode
+        }
+      ))
+    )),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_ResourceWallControlPanel.ResourceWallControlPanel,
+      {
+        open: showControlPanel,
+        onClose: closeControlPanel,
+        isDark,
+        cards,
+        layoutPresets: layoutPresetsWithI18n,
+        layoutKey,
+        customCols,
+        customRows,
+        pageDurationSec,
+        occupiedCardColor,
+        availableCardColor,
+        boardingSoonBeforeMin,
+        statusToneOverrides,
+        selectedResourceIds: wallSelectedIds,
+        carouselPager: controlCarouselPager,
+        heroMaxWidthRatio,
+        onApply: handleControlApply
+      }
+    )
   );
-  if (loading) {
+  if (loading && !showControlPanel) {
     return /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
@@ -147,7 +547,7 @@ var PisellRecordBoardResourceWallView = (props) => {
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          background: "#f5f7fb",
+          background: pageBg,
           ...style
         }
       },

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import type { RecordBoardResourceWallCardModel } from '../../types';
+import { type VenueWallStatusToneOverrides } from './venueWallUtils';
+export declare type ResourceWallLayoutPreset = {
+    key: string;
+    label: string;
+    cols: number;
+    rows: number;
+};
+export declare type ResourceWallControlPanelApplyPayload = {
+    resourceIds: string[];
+    layoutKey: string;
+    customCols: number;
+    customRows: number;
+    pageDurationSec: number;
+    occupiedCardColor: string;
+    availableCardColor: string;
+    boardingSoonBeforeMin: number;
+    statusToneOverrides: VenueWallStatusToneOverrides;
+    /** 与 test.tsx「主文案基准宽度占比」对接，写入 {@link VenueWallCard} */
+    heroMaxWidthRatio: number;
+};
+export interface ResourceWallControlPanelProps {
+    open: boolean;
+    onClose: () => void;
+    isDark: boolean;
+    cards: RecordBoardResourceWallCardModel[];
+    layoutPresets: readonly ResourceWallLayoutPreset[];
+    layoutKey: string;
+    customCols: number;
+    customRows: number;
+    pageDurationSec: number;
+    occupiedCardColor: string;
+    availableCardColor: string;
+    boardingSoonBeforeMin: number;
+    statusToneOverrides: VenueWallStatusToneOverrides | undefined;
+    selectedResourceIds: string[];
+    onApply: (payload: ResourceWallControlPanelApplyPayload) => void;
+    /** 与 test.tsx「当前分页 / 倒计时」展示一致（1-based current） */
+    carouselPager: {
+        currentPage: number;
+        totalPages: number;
+    };
+    /** 主文案宽度占比初值，与 {@link VenueWallCardProps.heroMaxWidthRatio} 一致 */
+    heroMaxWidthRatio?: number;
+}
+/**
+ * 控制台弹层：JSX 自仓库根 `test.tsx` 的 `showAdmin` 整段复制后对接真实状态；
+ * 状态表仅六态。
+ * 关闭（Close / Escape / 点击遮罩）时提交当前草稿并关闭。
+ */
+export declare const ResourceWallControlPanel: React.FC<ResourceWallControlPanelProps>;