@pisell/materials 6.11.37 → 6.11.38

package/lib/components/pisellRecordBoard/shellFrame/Calendar/view/BookingCalendarMonthView.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+/** 月视图：由 BookingCalendar 传入数据与交互，本文件仅负责渲染结构 */
+export declare function BookingCalendarMonthView({ isLight, anchorDate, monthDays, bookings, goToDayFromCell, handleGridDropMove, setDraggingItem, openBookingDetail, overflowPopover, setOverflowPopover, overflowListModal, setOverflowListModal, overflowPanelRef, renderMonthWeekBooking, }: {
+    isLight: any;
+    anchorDate: any;
+    monthDays: any;
+    bookings: any;
+    goToDayFromCell: any;
+    handleGridDropMove: any;
+    setDraggingItem: any;
+    openBookingDetail: any;
+    overflowPopover: any;
+    setOverflowPopover: any;
+    overflowListModal: any;
+    setOverflowListModal: any;
+    overflowPanelRef: any;
+    renderMonthWeekBooking: any;
+}): JSX.Element;

package/lib/components/pisellRecordBoard/shellFrame/Calendar/view/BookingCalendarMonthView.js

@@ -0,0 +1,219 @@
+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/Calendar/view/BookingCalendarMonthView.tsx
+var BookingCalendarMonthView_exports = {};
+__export(BookingCalendarMonthView_exports, {
+  BookingCalendarMonthView: () => BookingCalendarMonthView
+});
+module.exports = __toCommonJS(BookingCalendarMonthView_exports);
+var import_react = __toESM(require("react"));
+var import_OverflowPopover = require("../modal/OverflowPopover");
+var import_calendarI18n = require("../calendarI18n");
+var import_BookingCalendarStyle = require("../utils/BookingCalendarStyle");
+var import_bookingCalendarDateUtils = require("../utils/bookingCalendarDateUtils");
+function BookingCalendarMonthView({
+  isLight,
+  anchorDate,
+  monthDays,
+  bookings,
+  goToDayFromCell,
+  handleGridDropMove,
+  setDraggingItem,
+  openBookingDetail,
+  overflowPopover,
+  setOverflowPopover,
+  overflowListModal,
+  setOverflowListModal,
+  overflowPanelRef,
+  renderMonthWeekBooking
+}) {
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      key: `month-${anchorDate.getFullYear()}-${anchorDate.getMonth()}`,
+      className: "flex min-h-0 flex-1 flex-col"
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "p-2 md:p-4 relative flex min-h-0 flex-1 flex-col" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "theme-panel rounded-3xl border min-w-[980px] min-h-0 max-h-none flex-1 overflow-auto" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "theme-panel-alt sticky top-0 z-20 grid grid-cols-7 border-b theme-border shadow-[0_6px_12px_rgba(0,0,0,0.08)]" }, import_calendarI18n.CALENDAR_WEEKDAY_IDS.map((id, i) => /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: id,
+        className: `px-4 py-3 text-center font-medium ${i >= 5 ? isLight ? "bg-violet-200" : "bg-violet-900" : ""}`
+      },
+      (0, import_calendarI18n.tCal)(id)
+    ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "grid grid-cols-7 auto-rows-[255px]" }, monthDays.map((day) => {
+      const allItems = bookings.filter((b) => b.date === day.key);
+      const dayItems = allItems.slice(0, 3);
+      const moreItems = allItems.slice(3);
+      const moreCount = moreItems.length;
+      const showMoreTile = moreCount > 0 && dayItems.length > 0;
+      return /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          key: day.key,
+          onClick: () => goToDayFromCell(day.date, null, `month-${day.key}`),
+          onDragOver: (e) => e.preventDefault(),
+          onDrop: (e) => {
+            e.preventDefault();
+            handleGridDropMove(day.key);
+          },
+          className: `relative flex flex-col justify-start border-r border-b theme-border p-3 text-left align-top ${day.inMonth ? isLight ? "theme-grid-cell theme-text" : "bg-[#1a1b21]" : isLight ? "theme-grid-muted theme-text-faint" : "bg-[#111217] text-zinc-600"} ${isLight ? "hover:bg-violet-50/70" : "hover:bg-zinc-900"}`
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: `absolute left-3 top-3 text-4xl font-semibold leading-none ${isLight ? "theme-text-soft" : ""}`
+          },
+          day.date.getDate()
+        ),
+        /* @__PURE__ */ import_react.default.createElement("div", { className: "absolute right-3 top-3 flex gap-1 pt-1" }, day.bookingCount > 0 && /* @__PURE__ */ import_react.default.createElement("span", { className: "h-3 w-3 rounded-full bg-violet-500" }), (day.blockCount > 0 || day.fullyBooked) && /* @__PURE__ */ import_react.default.createElement("span", { className: "h-3 w-3 rounded-full bg-red-500" })),
+        /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-10 flex flex-col items-start gap-1.5 w-full" }, dayItems.map((item, i) => {
+          const isLastVisible = i === dayItems.length - 1;
+          const shrinkForMore = showMoreTile && isLastVisible;
+          const layoutClassName = `block rounded-md px-2 py-2 text-xs text-left ${(0, import_BookingCalendarStyle.getGridBookingRowStateClasses)(
+            item
+          )} ${shrinkForMore ? "flex-1 min-w-0" : "w-full"}`;
+          return /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              key: i,
+              className: "flex w-full items-stretch gap-2"
+            },
+            renderMonthWeekBooking ? /* @__PURE__ */ import_react.default.createElement(
+              "div",
+              {
+                className: shrinkForMore ? "flex-1 min-w-0" : "w-full"
+              },
+              renderMonthWeekBooking({
+                item,
+                dateKey: day.key,
+                view: "month",
+                isLight,
+                layoutClassName,
+                onOpenDetail: openBookingDetail,
+                onDragStart: (it) => setDraggingItem(it),
+                draggable: item.kind !== "block"
+              })
+            ) : /* @__PURE__ */ import_react.default.createElement(
+              "button",
+              {
+                type: "button",
+                draggable: item.kind !== "block",
+                onDragStart: (e) => {
+                  if (item.kind !== "block") {
+                    e.stopPropagation();
+                    setDraggingItem(item);
+                  }
+                },
+                onClick: (e) => {
+                  e.stopPropagation();
+                  openBookingDetail(item);
+                },
+                className: layoutClassName
+              },
+              /* @__PURE__ */ import_react.default.createElement("div", { className: "truncate" }, item.name),
+              /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 opacity-80" }, (0, import_bookingCalendarDateUtils.formatHourLabel)(item.startHour), " -", " ", (0, import_bookingCalendarDateUtils.formatHourLabel)(item.endHour))
+            ),
+            shrinkForMore && /* @__PURE__ */ import_react.default.createElement(
+              "div",
+              {
+                className: "relative h-[52px] w-[52px] shrink-0",
+                ref: (overflowPopover == null ? void 0 : overflowPopover.courtId) === "month" && (overflowPopover == null ? void 0 : overflowPopover.date) === day.key ? overflowPanelRef : null
+              },
+              /* @__PURE__ */ import_react.default.createElement(
+                "button",
+                {
+                  onMouseEnter: (e) => {
+                    e.stopPropagation();
+                    setOverflowPopover({
+                      courtId: "month",
+                      date: day.key,
+                      items: moreItems,
+                      pinned: false
+                    });
+                  },
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setOverflowPopover(null);
+                    setOverflowListModal(
+                      (prev) => prev && prev.scope === "month" && prev.date === day.key ? null : {
+                        scope: "month",
+                        date: day.key,
+                        title: (0, import_calendarI18n.tCal)(
+                          "pisell2.recordBoard.calendar.overflow.listTitleBookings",
+                          { date: day.key }
+                        ),
+                        items: allItems.filter(
+                          (x) => x.kind === "booking"
+                        )
+                      }
+                    );
+                  },
+                  className: "flex h-[52px] w-[52px] items-center justify-center rounded-xl bg-violet-700/90 text-sm font-semibold text-white"
+                },
+                "+",
+                moreCount
+              ),
+              (overflowPopover == null ? void 0 : overflowPopover.courtId) === "month" && (overflowPopover == null ? void 0 : overflowPopover.date) === day.key && !overflowListModal && /* @__PURE__ */ import_react.default.createElement(
+                "div",
+                {
+                  onMouseLeave: () => {
+                    if (!(overflowPopover == null ? void 0 : overflowPopover.pinned))
+                      setOverflowPopover(null);
+                  },
+                  className: `absolute right-0 top-[60px] z-20 flex min-w-[240px] max-h-[360px] flex-col rounded-xl border p-3 shadow-2xl ${isLight ? "theme-panel theme-border" : "border-zinc-700 bg-[#111218]"}`
+                },
+                /* @__PURE__ */ import_react.default.createElement(
+                  "div",
+                  {
+                    className: `mb-3 shrink-0 text-xs font-semibold ${isLight ? "theme-text-soft" : "text-zinc-300"}`
+                  },
+                  (0, import_calendarI18n.tCal)(
+                    "pisell2.recordBoard.calendar.overflow.bookingsForDay"
+                  )
+                ),
+                /* @__PURE__ */ import_react.default.createElement("div", { className: "min-h-0 flex-1 overflow-hidden" }, /* @__PURE__ */ import_react.default.createElement(
+                  import_OverflowPopover.MonthGridOverflowVirtualList,
+                  {
+                    items: overflowPopover.items,
+                    listWidth: 214,
+                    onPickItem: openBookingDetail
+                  }
+                ))
+              )
+            )
+          );
+        }))
+      );
+    }))))
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BookingCalendarMonthView
+});

package/lib/components/pisellRecordBoard/shellFrame/Calendar/view/BookingCalendarWeekView.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { RecordBoardCalendarProps } from '../../../types';
+/**
+ * 周视图：7 日网格 + 左侧分组（可折叠），单元格调起日视图；格内 drop 触发改期草稿。
+ */
+export declare function BookingCalendarWeekView({ calendarProps, isLight, weekDays, bookings, courts, hourSlots, slotStepHours, visibleCourts, visibleCourtRows, isBusinessHour, goToDayFromCell, handleGridDropMove, openBookingDetail, setDraggingItem, setCollapsedGroups, overflowPopover, setOverflowPopover, overflowListModal, setOverflowListModal, overflowPanelRef, }: {
+    calendarProps: RecordBoardCalendarProps;
+    isLight: boolean;
+    weekDays: Date[];
+    bookings: any[];
+    courts: any[];
+    hourSlots: number[];
+    slotStepHours: number;
+    visibleCourts: any[];
+    visibleCourtRows: any[];
+    isBusinessHour: (h: number) => boolean;
+    goToDayFromCell: (d: Date, courtId: string | null, src: string) => void;
+    handleGridDropMove: (dateKey: string, courtId?: string | null) => void;
+    openBookingDetail: (item: any) => void;
+    setDraggingItem: (item: any) => void;
+    setCollapsedGroups: React.Dispatch<React.SetStateAction<any>>;
+    overflowPopover: any;
+    setOverflowPopover: React.Dispatch<React.SetStateAction<any>>;
+    overflowListModal: any;
+    setOverflowListModal: React.Dispatch<React.SetStateAction<any>>;
+    overflowPanelRef: React.RefObject<HTMLDivElement | null>;
+}): JSX.Element;

package/lib/components/pisellRecordBoard/shellFrame/Calendar/view/BookingCalendarWeekView.js

@@ -0,0 +1,352 @@
+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/Calendar/view/BookingCalendarWeekView.tsx
+var BookingCalendarWeekView_exports = {};
+__export(BookingCalendarWeekView_exports, {
+  BookingCalendarWeekView: () => BookingCalendarWeekView
+});
+module.exports = __toCommonJS(BookingCalendarWeekView_exports);
+var import_react = __toESM(require("react"));
+var import_icons = require("@ant-design/icons");
+var import_bookingCalendarDateUtils = require("../utils/bookingCalendarDateUtils");
+var import_bookingCalendarConstants = require("../const/bookingCalendarConstants");
+var import_calendarI18n = require("../calendarI18n");
+var import_BookingCalendarStyle = require("../utils/BookingCalendarStyle");
+var import_bookingCalendarViewShared = require("../bookingCalendarViewShared");
+function BookingCalendarWeekView({
+  calendarProps,
+  isLight,
+  weekDays,
+  bookings,
+  courts,
+  hourSlots,
+  slotStepHours,
+  visibleCourts,
+  visibleCourtRows,
+  isBusinessHour,
+  goToDayFromCell,
+  handleGridDropMove,
+  openBookingDetail,
+  setDraggingItem,
+  setCollapsedGroups,
+  overflowPopover,
+  setOverflowPopover,
+  overflowListModal,
+  setOverflowListModal,
+  overflowPanelRef
+}) {
+  const props = calendarProps;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      key: `week-${(0, import_bookingCalendarDateUtils.fmtDate)(weekDays[0])}`,
+      className: "flex min-h-0 flex-1 flex-col"
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "p-2 md:p-4 relative flex min-h-0 flex-1 flex-col" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "theme-panel rounded-3xl border min-w-[980px] min-h-0 max-h-none flex-1 overflow-auto" }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "grid",
+        style: {
+          gridTemplateColumns: `${import_bookingCalendarConstants.frozenColWidth}px repeat(${weekDays.length}, minmax(150px, 1fr))`
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: "grid sticky top-0 z-50",
+          style: {
+            gridColumn: "1 / -1",
+            gridTemplateColumns: `${import_bookingCalendarConstants.frozenColWidth}px repeat(${weekDays.length}, minmax(150px, 1fr))`,
+            isolation: "isolate"
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: `sticky left-0 z-30 w-[132px] min-w-[132px] max-w-[132px] px-3 py-4 font-semibold border-b shadow-[8px_0_16px_rgba(0,0,0,0.08)] ${isLight ? "theme-sticky theme-border theme-text" : "bg-[#241d40] border-zinc-800"}`
+          },
+          (0, import_calendarI18n.tCal)("pisell2.recordBoard.calendar.week.headerCourtDate")
+        ),
+        weekDays.map((day, i) => {
+          const key = (0, import_bookingCalendarDateUtils.fmtDate)(day);
+          const dayItems = bookings.filter((b) => b.date === key);
+          const fullyBooked = courts.every(
+            (court) => hourSlots.filter(isBusinessHour).every(
+              (h) => (0, import_bookingCalendarDateUtils.dayOccupancy)(
+                court.id,
+                key,
+                bookings,
+                hourSlots,
+                slotStepHours
+              )[h]
+            )
+          );
+          return /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              key,
+              className: `relative z-20 border-b border-l p-3 text-center shadow-[0_8px_16px_rgba(0,0,0,0.06)] ${isLight ? "theme-border theme-text" : "border-zinc-800"} ${i >= 5 ? isLight ? "bg-violet-200" : "bg-violet-900" : isLight ? "theme-panel-soft" : "bg-[#1a1a22]"}`
+            },
+            /* @__PURE__ */ import_react.default.createElement(
+              "div",
+              {
+                className: `text-sm ${isLight ? "theme-text-faint" : "text-zinc-400"}`
+              },
+              (0, import_calendarI18n.tCal)(import_calendarI18n.CALENDAR_WEEKDAY_IDS[i])
+            ),
+            /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-3xl font-semibold" }, day.getDate()),
+            /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-2 flex items-center justify-center gap-1" }, dayItems.some((b) => b.kind === "booking") && /* @__PURE__ */ import_react.default.createElement("span", { className: "h-2.5 w-2.5 rounded-full bg-violet-500" }), (dayItems.some((b) => b.kind === "block") || fullyBooked) && /* @__PURE__ */ import_react.default.createElement("span", { className: "h-2.5 w-2.5 rounded-full bg-red-500" }))
+          );
+        })
+      ),
+      visibleCourtRows.map((row) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: row.id }, row.kind === "group" ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `sticky left-0 z-20 w-[132px] min-w-[132px] max-w-[132px] border-b px-2.5 py-2 shadow-[8px_0_16px_rgba(0,0,0,0.08)] ${isLight ? "border-slate-200 bg-gradient-to-b from-slate-100 to-slate-50" : "border-zinc-800/80 bg-gradient-to-b from-[#252038] to-[#1a1628]"}`
+        },
+        props.renderResourceCell ? props.renderResourceCell({
+          view: "week",
+          row: {
+            kind: "group",
+            id: row.id,
+            label: row.label,
+            count: row.count,
+            collapsed: row.collapsed
+          },
+          isLight,
+          onToggleGroup: (label) => setCollapsedGroups((prev) => ({
+            ...prev,
+            [label]: !prev[label]
+          }))
+        }) : /* @__PURE__ */ import_react.default.createElement(
+          "button",
+          {
+            type: "button",
+            "aria-expanded": !row.collapsed,
+            onClick: () => setCollapsedGroups((prev) => ({
+              ...prev,
+              [row.label]: !prev[row.label]
+            })),
+            className: `flex w-full items-center gap-2 rounded-lg px-1 py-1 text-left transition-colors ${isLight ? "hover:bg-white/60" : "hover:bg-white/[0.04] active:bg-white/[0.07]"}`
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_icons.DownOutlined,
+            {
+              style: { fontSize: 15 },
+              className: `shrink-0 transition-transform duration-200 ${isLight ? "text-slate-500" : "text-zinc-500"} ${row.collapsed ? "-rotate-90" : "rotate-0"}`,
+              "aria-hidden": true
+            }
+          ),
+          /* @__PURE__ */ import_react.default.createElement("div", { className: "flex min-w-0 flex-1 items-center gap-1.5" }, /* @__PURE__ */ import_react.default.createElement(
+            "span",
+            {
+              className: `truncate text-[13px] font-semibold leading-snug ${isLight ? "text-slate-800" : "text-zinc-100"}`
+            },
+            row.label
+          ), /* @__PURE__ */ import_react.default.createElement(
+            "span",
+            {
+              className: `shrink-0 rounded-md px-1.5 py-0.5 text-[10px] font-semibold tabular-nums ${isLight ? "bg-violet-100 text-violet-800" : "bg-zinc-800/90 text-zinc-300 ring-1 ring-zinc-600/40"}`
+            },
+            row.count
+          ))
+        )
+      ), weekDays.map((day) => {
+        const key = (0, import_bookingCalendarDateUtils.fmtDate)(day);
+        const groupCourts = visibleCourts.filter(
+          (court) => court.type === row.label
+        );
+        const idleCount = groupCourts.filter((court) => {
+          const s = (0, import_bookingCalendarDateUtils.courtDaySummary)(
+            court.id,
+            key,
+            bookings,
+            hourSlots,
+            slotStepHours
+          );
+          return s.occupiedHours.length === 0;
+        }).length;
+        const ratio = groupCourts.length > 0 ? idleCount / groupCourts.length : 0;
+        return /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            key: `${row.id}-${key}`,
+            className: `border-b border-l p-3 text-center ${isLight ? "theme-border theme-panel-soft" : "border-zinc-800 bg-[#151a2f]"}`
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              className: `text-xs font-semibold ${(0, import_bookingCalendarViewShared.getRemainingToneClass)(
+                ratio,
+                isLight
+              )}`
+            },
+            idleCount,
+            "/",
+            groupCourts.length
+          )
+        );
+      })) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `sticky left-0 z-20 w-[132px] min-w-[132px] max-w-[132px] border-b px-3 py-3 align-top shadow-[8px_0_16px_rgba(0,0,0,0.06)] ${isLight ? "theme-sticky theme-border" : "border-zinc-800 bg-[#1a1a22]"}`
+        },
+        props.renderResourceCell ? props.renderResourceCell({
+          view: "week",
+          row: {
+            kind: "court",
+            id: row.id,
+            name: row.name,
+            type: row.type
+          },
+          isLight
+        }) : /* @__PURE__ */ import_react.default.createElement("div", { className: "font-semibold text-[16px] leading-tight break-all" }, row.name)
+      ), weekDays.map((day) => {
+        const key = (0, import_bookingCalendarDateUtils.fmtDate)(day);
+        const summary = (0, import_bookingCalendarDateUtils.courtDaySummary)(
+          row.id,
+          key,
+          bookings,
+          hourSlots,
+          slotStepHours
+        );
+        const previewItems = summary.items.slice(0, 3);
+        const moreItems = summary.items.slice(3);
+        const moreCount = moreItems.length;
+        const showMoreTile = moreCount > 0 && previewItems.length > 0;
+        return /* @__PURE__ */ import_react.default.createElement(
+          "button",
+          {
+            key: `${row.id}-${key}`,
+            onClick: () => goToDayFromCell(
+              day,
+              row.id,
+              `week-${row.id}-${key}`
+            ),
+            onDragOver: (e) => e.preventDefault(),
+            onDrop: (e) => {
+              e.preventDefault();
+              handleGridDropMove(key, row.id);
+            },
+            className: `relative flex flex-col justify-start min-h-[148px] border-b border-l p-3 text-left align-top transition ${isLight ? "theme-border" : ""} ${summary.fullyBooked ? isLight ? "bg-slate-100 theme-text-faint" : "bg-zinc-800 text-zinc-500" : summary.hasBlock ? isLight ? "bg-red-50 border-red-200" : "bg-red-950/30 border-red-800/40" : summary.occupiedHours.length > 0 ? isLight ? "bg-violet-50 hover:bg-violet-100/80" : "bg-[#1c1630] hover:bg-[#241c3f]" : isLight ? "theme-grid-cell hover:bg-violet-50/60" : "bg-zinc-900 hover:bg-zinc-800"}`
+          },
+          /* @__PURE__ */ import_react.default.createElement("div", { className: "absolute left-3 top-3 text-[13px] text-zinc-400" }, key),
+          /* @__PURE__ */ import_react.default.createElement("div", { className: "absolute right-3 top-3 flex gap-1" }, summary.occupiedHours.length > 0 && /* @__PURE__ */ import_react.default.createElement("span", { className: "h-2.5 w-2.5 rounded-full bg-violet-500" }), (summary.hasBlock || summary.fullyBooked) && /* @__PURE__ */ import_react.default.createElement("span", { className: "h-2.5 w-2.5 rounded-full bg-red-500" })),
+          summary.fullyBooked ? /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-8 rounded-lg bg-zinc-700/70 px-2 py-1 text-xs" }, (0, import_calendarI18n.tCal)("pisell2.recordBoard.calendar.week.fullyBooked")) : summary.items.length > 0 ? /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-8 flex flex-col items-start gap-1.5 w-full" }, previewItems.map((item, idx) => {
+            const isLastVisible = idx === previewItems.length - 1;
+            const shrinkForMore = showMoreTile && isLastVisible;
+            const layoutClassName = `rounded-lg px-3 py-2 text-xs text-left ${(0, import_BookingCalendarStyle.getGridBookingRowStateClasses)(
+              item
+            )} ${shrinkForMore ? "flex-1 min-w-0" : "w-full"}`;
+            return /* @__PURE__ */ import_react.default.createElement(
+              "div",
+              {
+                key: idx,
+                className: "flex w-full items-stretch gap-2"
+              },
+              props.renderMonthWeekBooking ? /* @__PURE__ */ import_react.default.createElement(
+                "div",
+                {
+                  className: shrinkForMore ? "flex-1 min-w-0" : "w-full"
+                },
+                props.renderMonthWeekBooking({
+                  item,
+                  dateKey: key,
+                  view: "week",
+                  isLight,
+                  layoutClassName,
+                  onOpenDetail: openBookingDetail,
+                  onDragStart: (it) => setDraggingItem(it),
+                  draggable: false
+                })
+              ) : /* @__PURE__ */ import_react.default.createElement(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    openBookingDetail(item);
+                  },
+                  className: layoutClassName
+                },
+                /* @__PURE__ */ import_react.default.createElement("div", { className: "truncate" }, item.name),
+                /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 opacity-80" }, (0, import_bookingCalendarDateUtils.formatHourLabel)(item.startHour), " -", " ", (0, import_bookingCalendarDateUtils.formatHourLabel)(item.endHour))
+              ),
+              shrinkForMore && /* @__PURE__ */ import_react.default.createElement(
+                "div",
+                {
+                  className: "relative h-[52px] w-[52px] shrink-0",
+                  ref: (overflowPopover == null ? void 0 : overflowPopover.courtId) === row.id && (overflowPopover == null ? void 0 : overflowPopover.date) === key ? overflowPanelRef : null
+                },
+                /* @__PURE__ */ import_react.default.createElement(
+                  "button",
+                  {
+                    onMouseEnter: (e) => {
+                      e.stopPropagation();
+                      setOverflowPopover({
+                        courtId: row.id,
+                        date: key,
+                        items: moreItems,
+                        pinned: false
+                      });
+                    },
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setOverflowPopover(null);
+                      setOverflowListModal(
+                        (prev) => prev && prev.scope === row.id && prev.date === key ? null : {
+                          scope: row.id,
+                          date: key,
+                          title: (0, import_calendarI18n.tCal)(
+                            "pisell2.recordBoard.calendar.overflow.listTitleAllBookings",
+                            { date: key }
+                          ),
+                          items: summary.items.filter(
+                            (x) => x.kind === "booking"
+                          )
+                        }
+                      );
+                    },
+                    className: "flex h-[52px] w-[52px] items-center justify-center rounded-xl bg-violet-700/90 text-sm font-semibold text-white"
+                  },
+                  "+",
+                  moreCount
+                )
+              )
+            );
+          })) : /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-8 rounded-lg border border-dashed border-zinc-700 px-2 py-2 text-xs text-zinc-500" }, (0, import_calendarI18n.tCal)("pisell2.recordBoard.calendar.week.available"))
+        );
+      }))))
+    )))
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BookingCalendarWeekView
+});

package/lib/components/pisellRecordBoard/shellFrame/Calendar/view/bookingCalendarDayViewContext.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { RecordBoardCalendarProps } from '../../../types';
+/** 供日视图拆分出的子组件读取 `calendarProps` / 明暗，避免每层透传（可选使用） */
+export declare type BookingCalendarDayChromeContextValue = {
+    calendarProps: RecordBoardCalendarProps;
+    isLight: boolean;
+};
+export declare function BookingCalendarDayChromeProvider({ children, value, }: {
+    children: React.ReactNode;
+    value: BookingCalendarDayChromeContextValue;
+}): JSX.Element;
+export declare function useBookingCalendarDayChrome(): BookingCalendarDayChromeContextValue;