@pisell/materials 1.8.38 → 1.8.41

package/es/components/pisellRecordBoard/shellFrame/Calendar/view/BookingCalendarResourceView.js

@@ -1,612 +0,0 @@
-import { CALENDAR_EMPTY_DASHED_SLOT_CLASSNAME, estimateResourceViewCourtCellHeightPx } from "../const/bookingCalendarConstants.js";
-import { tCal } from "../calendarI18n.js";
-import { courtDaySummary, fmtDate, formatHourLabel, getViewNowReference } from "../utils/bookingCalendarDateUtils.js";
-import { getGridBookingRowStateClasses } from "../utils/BookingCalendarStyle.js";
-import { getRemainingToneClass } from "../bookingCalendarViewShared.js";
-import { BookingCalendarGroupRowHeader } from "./BookingCalendarGroupRowHeader.js";
-import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
-//#region src/components/pisellRecordBoard/shellFrame/Calendar/view/BookingCalendarResourceView.tsx
-/**
-* 资源视图（按月）：与日视图同款骨架——冻结左列 + 横向滚动 + sticky 顶部表头。
-*
-* 与日视图的唯一差异：
-*   - 日视图：横轴 = 营业小时槽，cell = 一个小时；booking 通过 overlay 跨 cell 横铺。
-*   - 资源视图：横轴 = 当月每一天，cell = 一个 (court, date)；booking 通过 overlay 在 cell 内
-*     垂直 stack 渲染（最多 3 条 + `+N` 溢出 tile）。
-*
-* 性能策略（与日视图对齐）：
-*   - cell 是「轻 placeholder」：只渲染背景色 + selected ring + 空 dashed slot/Selected 文本。
-*   - 所有 booking 卡片 / `+N` tile 由 `BookingOverlay` 单独 absolute 渲染，独立于 grid。
-*   - 这样 grid 内 DOM 极轻，浏览器每帧 paint/layout 与日视图同档（cell 内含复杂 booking
-*     卡片时实测每列 ~7ms paint 成本，整月 30 列 → ~150ms；overlay 化后接近零）。
-*
-* 选中：与日视图 `toggleSlot(courtId, hour)` 等价的「`toggleResourceCell(courtId, dateKey)`」。
-* 选中态合并到 cell 自身 className（与日视图一致），不插入额外 grid item，避免 CSS Grid 整表 reflow。
-*/
-const PREVIEW_CAP = 3;
-const BookingCalendarResourceView = React.memo(BookingCalendarResourceViewInner);
-function BookingCalendarResourceViewInner({ calendarProps, isLight, anchorDate, monthDays, slotColWidth, bookings, visibleCourts, visibleCourtRows, hourSlots, slotStepHours, handleGridDropMove, openBookingDetail, setDraggingItem, setCollapsedGroups, overflowPopover, setOverflowPopover, setOverflowListModal, overflowPanelRef, resourceMonthScrollToTodayToken, resourceDayHeaderRemaining, toggleResourceCell, selectedResourceCells }) {
-	const props = calendarProps;
-	const todayKey = fmtDate(/* @__PURE__ */ new Date());
-	const monthKeyPrefix = `${anchorDate.getFullYear()}-${anchorDate.getMonth()}`;
-	const bookingsStable = useMemo(() => bookings, [useMemo(() => {
-		if (!Array.isArray(bookings) || bookings.length === 0) return "[]";
-		return bookings.map((b) => {
-			var _b$id, _b$courtId, _b$date, _b$kind, _b$startHour, _b$endHour;
-			return `${(_b$id = b === null || b === void 0 ? void 0 : b.id) !== null && _b$id !== void 0 ? _b$id : ""}|${(_b$courtId = b === null || b === void 0 ? void 0 : b.courtId) !== null && _b$courtId !== void 0 ? _b$courtId : ""}|${(_b$date = b === null || b === void 0 ? void 0 : b.date) !== null && _b$date !== void 0 ? _b$date : ""}|${(_b$kind = b === null || b === void 0 ? void 0 : b.kind) !== null && _b$kind !== void 0 ? _b$kind : ""}|${(_b$startHour = b === null || b === void 0 ? void 0 : b.startHour) !== null && _b$startHour !== void 0 ? _b$startHour : ""}|${(_b$endHour = b === null || b === void 0 ? void 0 : b.endHour) !== null && _b$endHour !== void 0 ? _b$endHour : ""}`;
-		}).join(";");
-	}, [bookings])]);
-	const scrollRef = useRef(null);
-	const dragRef = useRef({
-		dragging: false,
-		startX: 0,
-		startY: 0,
-		startLeft: 0,
-		startTop: 0,
-		moved: false
-	});
-	const [dragging, setDragging] = useState(false);
-	const [virt, setVirt] = useState({
-		i0: 0,
-		i1: 0,
-		r0: 0,
-		r1: 0,
-		ready: false
-	});
-	const rafRef = useRef(null);
-	/** 行前缀和 ref（updateVirt 内通过 ref 读取最新值，避免每次行高变化都重建 callback） */
-	const rowPrefixRef = useRef([0]);
-	const nCols = monthDays.length;
-	const updateVirt = useCallback(() => {
-		const root = scrollRef.current;
-		if (!root || nCols <= 0) return;
-		const sl = root.scrollLeft;
-		const st = root.scrollTop;
-		const vw = root.clientWidth;
-		const vh = root.clientHeight;
-		let i0 = Math.floor((sl - 132) / slotColWidth) - 5;
-		let i1 = Math.ceil((sl + vw - 132) / slotColWidth) - 1 + 5;
-		i0 = Math.max(0, i0);
-		i1 = Math.min(nCols - 1, i1);
-		if (i0 > i1) {
-			i0 = 0;
-			i1 = nCols - 1;
-		}
-		const pfx = rowPrefixRef.current;
-		const nr = Math.max(0, pfx.length - 1);
-		let r0 = 0;
-		let r1 = nr > 0 ? nr - 1 : 0;
-		if (nr > 0) {
-			const bodyTop = 56;
-			const vTop = st;
-			const vBot = st + vh;
-			const buf = 240;
-			for (let r = 0; r < nr; r += 1) {
-				var _pfx;
-				if (bodyTop + ((_pfx = pfx[r + 1]) !== null && _pfx !== void 0 ? _pfx : 0) > vTop - buf) {
-					r0 = r;
-					break;
-				}
-			}
-			for (let r = nr - 1; r >= 0; r -= 1) {
-				var _pfx$r;
-				if (bodyTop + ((_pfx$r = pfx[r]) !== null && _pfx$r !== void 0 ? _pfx$r : 0) < vBot + buf) {
-					r1 = r;
-					break;
-				}
-			}
-			if (r0 > r1) {
-				r0 = 0;
-				r1 = nr - 1;
-			}
-		}
-		setVirt((prev) => prev.ready && prev.i0 === i0 && prev.i1 === i1 && prev.r0 === r0 && prev.r1 === r1 ? prev : {
-			i0,
-			i1,
-			r0,
-			r1,
-			ready: true
-		});
-	}, [nCols, slotColWidth]);
-	const scheduleVirt = useCallback(() => {
-		if (rafRef.current != null) return;
-		rafRef.current = requestAnimationFrame(() => {
-			rafRef.current = null;
-			updateVirt();
-		});
-	}, [updateVirt]);
-	useLayoutEffect(() => {
-		const root = scrollRef.current;
-		if (!root) return void 0;
-		scheduleVirt();
-		const onScroll = () => scheduleVirt();
-		root.addEventListener("scroll", onScroll, { passive: true });
-		let ro = null;
-		if (typeof ResizeObserver !== "undefined") {
-			ro = new ResizeObserver(() => scheduleVirt());
-			try {
-				ro.observe(root);
-			} catch (_unused) {}
-		}
-		return () => {
-			root.removeEventListener("scroll", onScroll);
-			ro === null || ro === void 0 || ro.disconnect();
-			if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
-			rafRef.current = null;
-		};
-	}, [
-		monthKeyPrefix,
-		scheduleVirt,
-		nCols
-	]);
-	/** 切入资源视图时把今天列居中（仅当月含今天） */
-	useLayoutEffect(() => {
-		if (!resourceMonthScrollToTodayToken) return;
-		const root = scrollRef.current;
-		if (!root || monthDays.length === 0) return;
-		const idx = monthDays.findIndex((d) => fmtDate(d) === getViewNowReference().dateKey);
-		if (idx < 0) return;
-		const targetLeft = 132 + idx * slotColWidth - root.clientWidth / 2 + slotColWidth / 2;
-		root.scrollLeft = Math.max(0, Math.min(targetLeft, root.scrollWidth - root.clientWidth));
-	}, [
-		resourceMonthScrollToTodayToken,
-		monthKeyPrefix,
-		monthDays,
-		slotColWidth
-	]);
-	const onMouseDown = useCallback((e) => {
-		if (e.button !== 0 || !scrollRef.current) return;
-		dragRef.current = {
-			dragging: true,
-			startX: e.clientX,
-			startY: e.clientY,
-			startLeft: scrollRef.current.scrollLeft,
-			startTop: scrollRef.current.scrollTop,
-			moved: false
-		};
-		setDragging(true);
-	}, []);
-	const onMouseMove = useCallback((e) => {
-		if (!dragRef.current.dragging || !scrollRef.current) return;
-		const dx = e.clientX - dragRef.current.startX;
-		const dy = e.clientY - dragRef.current.startY;
-		if (Math.abs(dx) > 3 || Math.abs(dy) > 3) dragRef.current.moved = true;
-		scrollRef.current.scrollLeft = dragRef.current.startLeft - dx;
-		scrollRef.current.scrollTop = dragRef.current.startTop - dy;
-	}, []);
-	const onMouseUp = useCallback(() => {
-		dragRef.current.dragging = false;
-		setDragging(false);
-	}, []);
-	const visibleColIndices = useMemo(() => {
-		if (!virt.ready) {
-			const out = [];
-			for (let i = 0; i < nCols; i += 1) out.push(i);
-			return out;
-		}
-		const out = [];
-		for (let i = virt.i0; i <= virt.i1; i += 1) out.push(i);
-		return out;
-	}, [virt, nCols]);
-	const summaryCache = useMemo(() => {
-		const m = /* @__PURE__ */ new Map();
-		const visibleCourtIds = [];
-		for (const r of visibleCourtRows) if ((r === null || r === void 0 ? void 0 : r.kind) === "court" && r.id) visibleCourtIds.push(String(r.id));
-		const visibleDateKeys = visibleColIndices.map((ci) => monthDays[ci]).filter(Boolean).map((d) => fmtDate(d));
-		for (const cid of visibleCourtIds) for (const dk of visibleDateKeys) m.set(`${cid}\t${dk}`, courtDaySummary(cid, dk, bookingsStable, hourSlots, slotStepHours));
-		return m;
-	}, [
-		visibleCourtRows,
-		visibleColIndices,
-		monthDays,
-		bookingsStable,
-		hourSlots,
-		slotStepHours
-	]);
-	const getSummary = useCallback((courtId, dateKey) => {
-		var _summaryCache$get;
-		return (_summaryCache$get = summaryCache.get(`${courtId}\t${dateKey}`)) !== null && _summaryCache$get !== void 0 ? _summaryCache$get : courtDaySummary(courtId, dateKey, bookingsStable, hourSlots, slotStepHours);
-	}, [
-		summaryCache,
-		bookingsStable,
-		hourSlots,
-		slotStepHours
-	]);
-	const rowHeights = useMemo(() => {
-		return visibleCourtRows.map((row) => {
-			if (row.kind === "group") return 38;
-			let maxH = 44;
-			for (let di = 0; di < monthDays.length; di += 1) {
-				const day = monthDays[di];
-				if (!day) continue;
-				const summary = getSummary(row.id, fmtDate(day));
-				maxH = Math.max(maxH, estimateResourceViewCourtCellHeightPx(summary));
-			}
-			return maxH;
-		});
-	}, [
-		visibleCourtRows,
-		monthDays,
-		getSummary
-	]);
-	const gridTemplateRows = useMemo(() => visibleCourtRows.map((row, i) => row.kind === "group" ? `38px` : `${rowHeights[i]}px`).join(" "), [visibleCourtRows, rowHeights]);
-	/** 行前缀和：rowPrefixTop[i] = 前 i 行总高度（i 从 0 到 N） */
-	const rowPrefixTop = useMemo(() => {
-		const arr = new Array(rowHeights.length + 1);
-		arr[0] = 0;
-		for (let i = 0; i < rowHeights.length; i += 1) {
-			var _rowHeights$i;
-			arr[i + 1] = arr[i] + ((_rowHeights$i = rowHeights[i]) !== null && _rowHeights$i !== void 0 ? _rowHeights$i : 0);
-		}
-		return arr;
-	}, [rowHeights]);
-	/** 同步到 ref，让 updateVirt 拿到最新前缀和；行高变化后立刻触发一次行窗口重算 */
-	useLayoutEffect(() => {
-		rowPrefixRef.current = rowPrefixTop;
-		scheduleVirt();
-	}, [rowPrefixTop, scheduleVirt]);
-	const contentHeight = 56 + rowPrefixTop[rowPrefixTop.length - 1];
-	/**
-	* 按 court 切分的「选中日期签名」：传给 ResourceCourtRow 触发 React.memo 浅比较。
-	* - 同一 court 的选中集没变 → sig 字符串相等 → memo 命中 → 整行跳过 reconcile。
-	* - 这样点击 / 取消 cell 时，只有「新选中 / 旧选中」对应的 1~2 行真正重渲染，其他全部 N 行被 memo 跳过。
-	*/
-	const selectionSigByCourtId = useMemo(() => {
-		const grp = /* @__PURE__ */ new Map();
-		for (const s of selectedResourceCells) {
-			const cid = String(s.courtId);
-			let arr = grp.get(cid);
-			if (!arr) {
-				arr = [];
-				grp.set(cid, arr);
-			}
-			arr.push(s.dateKey);
-		}
-		const m = /* @__PURE__ */ new Map();
-		grp.forEach((arr, cid) => {
-			arr.sort();
-			m.set(cid, arr.join("|"));
-		});
-		return m;
-	}, [selectedResourceCells]);
-	const monthLabel = `${anchorDate.getFullYear()} / ${anchorDate.getMonth() + 1}`;
-	return /* @__PURE__ */ React.createElement("div", {
-		key: `resource-${monthKeyPrefix}`,
-		className: "flex min-h-0 flex-1 flex-col"
-	}, /* @__PURE__ */ React.createElement("div", { className: "relative flex min-h-0 flex-1 flex-col" }, /* @__PURE__ */ React.createElement("div", {
-		ref: scrollRef,
-		onMouseDown,
-		onMouseMove,
-		onMouseUp,
-		onMouseLeave: onMouseUp,
-		style: { overscrollBehavior: "none" },
-		className: `pisell-scroll-hidden relative border min-h-0 max-h-none flex-1 overflow-auto touch-pan-x touch-pan-y select-none ${isLight ? "theme-panel theme-border" : "border-zinc-800 bg-[#121217]"} ${dragging ? "cursor-grabbing" : "cursor-grab"}`
-	}, /* @__PURE__ */ React.createElement("div", {
-		className: "relative",
-		style: {
-			minWidth: `${132 + nCols * slotColWidth}px`,
-			minHeight: `${contentHeight}px`
-		}
-	}, /* @__PURE__ */ React.createElement("div", {
-		className: "grid sticky top-0 z-50",
-		style: { gridTemplateColumns: `132px repeat(${nCols}, ${slotColWidth}px)` }
-	}, /* @__PURE__ */ React.createElement("div", { className: `sticky left-0 top-0 z-[60] flex h-full min-h-0 w-[132px] min-w-[132px] max-w-[132px] flex-col justify-center px-2.5 font-semibold border-b shadow-[8px_0_16px_rgba(0,0,0,0.08)] ${isLight ? "surface-brand-side text-slate-900" : "bg-[#241d40] border-zinc-800 text-zinc-100"}` }, /* @__PURE__ */ React.createElement("span", { className: "text-lg font-bold leading-tight" }, monthLabel)), visibleColIndices.map((ci) => {
-		const day = monthDays[ci];
-		if (!day) return null;
-		const key = fmtDate(day);
-		const isToday = key === todayKey;
-		const remaining = resourceDayHeaderRemaining[key];
-		return /* @__PURE__ */ React.createElement("div", {
-			key: `rh-${key}`,
-			className: `relative z-20 border-b border-l px-1 py-2 text-center shadow-[0_8px_16px_rgba(0,0,0,0.06)] ${isLight ? "theme-border theme-text" : "border-zinc-800"} ${isToday ? isLight ? "bg-gradient-to-b from-violet-50 to-white" : "bg-gradient-to-b from-violet-950 to-[#1a1a22]" : isLight ? "theme-panel-soft" : "bg-[#1a1a22]"}`,
-			style: { gridColumn: ci + 2 }
-		}, /* @__PURE__ */ React.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React.createElement("span", {
-			className: "grid h-10 w-10 place-items-center text-3xl font-semibold leading-none",
-			"aria-label": isToday ? "Today" : void 0
-		}, day.getDate())), remaining && remaining.total > 0 && /* @__PURE__ */ React.createElement("div", { className: `mt-1 text-[11px] font-semibold leading-tight ${getRemainingToneClass(remaining.ratio, isLight)}` }, tCal("pisell2.recordBoard.calendar.day.freeRatio", {
-			remaining: remaining.remaining,
-			total: remaining.total
-		})));
-	})), /* @__PURE__ */ React.createElement("div", {
-		className: "grid relative",
-		style: {
-			gridTemplateColumns: `132px repeat(${nCols}, ${slotColWidth}px)`,
-			gridTemplateRows
-		}
-	}, visibleCourtRows.map((row, rowIndex) => {
-		var _selectionSigByCourtI;
-		if (virt.ready && (rowIndex < virt.r0 || rowIndex > virt.r1)) return /* @__PURE__ */ React.createElement("div", {
-			key: `${row.id}-skip`,
-			className: `pointer-events-none border-b ${isLight ? "theme-border" : "border-zinc-800"}`,
-			style: {
-				gridColumn: "1 / -1",
-				gridRow: rowIndex + 1
-			},
-			"aria-hidden": true
-		});
-		return row.kind === "group" ? /* @__PURE__ */ React.createElement(React.Fragment, { key: row.id }, /* @__PURE__ */ React.createElement(BookingCalendarGroupRowHeader, {
-			isLight,
-			view: "resource",
-			row: {
-				id: row.id,
-				label: row.label,
-				count: row.count,
-				collapsed: row.collapsed
-			},
-			renderResourceCell: props.renderResourceCell,
-			setCollapsedGroups,
-			style: {
-				gridRow: rowIndex + 1,
-				gridColumn: 1
-			}
-		}), visibleColIndices.map((ci) => {
-			const day = monthDays[ci];
-			if (!day) return null;
-			const key = fmtDate(day);
-			const groupCourts = visibleCourts.filter((c) => c.type === row.label);
-			const total = groupCourts.length;
-			const noRatioCell = total === 0;
-			let remaining = 0;
-			let ratio = 0;
-			if (!noRatioCell) {
-				remaining = total - groupCourts.filter((c) => getSummary(c.id, key).items.length > 0).length;
-				ratio = remaining / total;
-			}
-			return /* @__PURE__ */ React.createElement("div", {
-				key: `${row.id}-${key}`,
-				style: {
-					gridRow: rowIndex + 1,
-					gridColumn: ci + 2
-				},
-				className: `flex h-full items-center justify-center border-b border-l px-1.5 py-1 text-center text-sm font-medium ${isLight ? "theme-border" : "border-zinc-800"} ${noRatioCell ? isLight ? "bg-slate-100 theme-text-faint" : "bg-zinc-800/80 text-zinc-500" : isLight ? "theme-panel-soft" : "bg-[#151a2f] text-zinc-300"}`
-			}, noRatioCell ? /* @__PURE__ */ React.createElement("div", { className: "text-xs opacity-60" }, "—") : /* @__PURE__ */ React.createElement("div", { className: `text-xs font-semibold leading-none ${getRemainingToneClass(ratio, isLight)}` }, tCal("pisell2.recordBoard.calendar.day.freeRatio", {
-				remaining,
-				total
-			})));
-		})) : /* @__PURE__ */ React.createElement(ResourceCourtRow, {
-			key: row.id,
-			courtId: String(row.id),
-			courtName: row.name,
-			courtType: row.type,
-			rowIndex,
-			visibleColIndices,
-			monthDays,
-			getSummary,
-			toggleResourceCell,
-			isLight,
-			renderResourceCell: props.renderResourceCell,
-			handleGridDropMove,
-			selectedSig: (_selectionSigByCourtI = selectionSigByCourtId.get(String(row.id))) !== null && _selectionSigByCourtI !== void 0 ? _selectionSigByCourtI : ""
-		});
-	}), /* @__PURE__ */ React.createElement(BookingOverlay, {
-		visibleCourtRows,
-		visibleColIndices,
-		monthDays,
-		rowPrefixTop,
-		rowHeights,
-		slotColWidth,
-		virt,
-		getSummary,
-		isLight,
-		renderMonthWeekBooking: props.renderMonthWeekBooking,
-		openBookingDetail,
-		setDraggingItem,
-		handleGridDropMove,
-		overflowPopover,
-		setOverflowPopover,
-		setOverflowListModal,
-		overflowPanelRef
-	}))))));
-}
-const ResourceCourtRow = React.memo(function ResourceCourtRow({ courtId, courtName, courtType, rowIndex, visibleColIndices, monthDays, getSummary, toggleResourceCell, isLight, renderResourceCell, handleGridDropMove, selectedSig }) {
-	/** 由签名字符串还原 Set，仅 selectedSig 变化时才重建 */
-	const selectedDateKeys = useMemo(() => selectedSig ? new Set(selectedSig.split("|")) : null, [selectedSig]);
-	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-		className: `sticky left-0 z-30 flex h-full min-h-0 w-[132px] min-w-[132px] max-w-[132px] flex-col justify-center border-b px-2.5 py-1.5 shadow-[8px_0_16px_rgba(0,0,0,0.06)] ${isLight ? "surface-brand-side-muted" : "border-zinc-800 bg-[#1a1a22]"}`,
-		style: {
-			gridRow: rowIndex + 1,
-			gridColumn: 1
-		}
-	}, renderResourceCell ? renderResourceCell({
-		view: "resource",
-		row: {
-			kind: "court",
-			id: courtId,
-			name: courtName,
-			type: courtType
-		},
-		isLight
-	}) : /* @__PURE__ */ React.createElement("div", { className: "pisell-rb-cal-week-resource-name min-w-0 w-full font-semibold text-[16px] leading-tight" }, courtName)), visibleColIndices.map((ci) => {
-		var _selectedDateKeys$has;
-		const day = monthDays[ci];
-		if (!day) return null;
-		const key = fmtDate(day);
-		const summary = getSummary(courtId, key);
-		return /* @__PURE__ */ React.createElement(ResourceCourtCell, {
-			key: `${courtId}-${key}`,
-			courtId,
-			dateKey: key,
-			rowIndex,
-			colIndex: ci,
-			summary,
-			selected: (_selectedDateKeys$has = selectedDateKeys === null || selectedDateKeys === void 0 ? void 0 : selectedDateKeys.has(key)) !== null && _selectedDateKeys$has !== void 0 ? _selectedDateKeys$has : false,
-			isLight,
-			toggleResourceCell,
-			handleGridDropMove
-		});
-	}));
-});
-const ResourceCourtCell = React.memo(function ResourceCourtCell({ courtId, dateKey, rowIndex, colIndex, summary, selected, isLight, toggleResourceCell, handleGridDropMove }) {
-	return /* @__PURE__ */ React.createElement("button", {
-		type: "button",
-		onClick: () => toggleResourceCell(courtId, dateKey),
-		onDragOver: (e) => e.preventDefault(),
-		onDrop: (e) => {
-			e.preventDefault();
-			handleGridDropMove(dateKey, courtId);
-		},
-		style: {
-			gridRow: rowIndex + 1,
-			gridColumn: colIndex + 2,
-			contain: "layout paint style"
-		},
-		className: `relative flex w-full min-h-0 flex-col justify-start border-b border-l p-1 text-left align-top outline-none ${isLight ? "theme-border" : "border-zinc-700"} ${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" : "bg-[#1c1630]" : isLight ? "theme-grid-cell" : "bg-zinc-900"} ${selected ? isLight ? "ring-1 ring-inset ring-violet-400/75 bg-violet-400/10" : "ring-1 ring-inset ring-violet-400/70 bg-white/10" : ""}`
-	}, summary.items.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: `${CALENDAR_EMPTY_DASHED_SLOT_CLASSNAME} text-center ${isLight ? "border-[#d8d0eb] text-[#8f86a9]" : "border-zinc-700 text-zinc-500"}` }, selected ? tCal("pisell2.recordBoard.calendar.day.selected") : null) : null);
-});
-const OVERLAY_CELL_PAD = 4;
-const OVERLAY_ITEM_GAP = 4;
-const BookingOverlay = React.memo(function BookingOverlay({ visibleCourtRows, visibleColIndices, monthDays, rowPrefixTop, rowHeights, slotColWidth, virt, getSummary, isLight, renderMonthWeekBooking, openBookingDetail, setDraggingItem, handleGridDropMove, overflowPopover, setOverflowPopover, setOverflowListModal, overflowPanelRef }) {
-	var _rowPrefixTop;
-	/** 一次遍历可见区域，计算出所有 overlay item 的 px 位置 */
-	const items = useMemo(() => {
-		const out = [];
-		for (let rowIdx = 0; rowIdx < visibleCourtRows.length; rowIdx += 1) {
-			var _rowPrefixTop$rowIdx;
-			if (virt.ready && (rowIdx < virt.r0 || rowIdx > virt.r1)) continue;
-			const row = visibleCourtRows[rowIdx];
-			if ((row === null || row === void 0 ? void 0 : row.kind) !== "court" || !row.id) continue;
-			const courtId = String(row.id);
-			const cellTop = (_rowPrefixTop$rowIdx = rowPrefixTop[rowIdx]) !== null && _rowPrefixTop$rowIdx !== void 0 ? _rowPrefixTop$rowIdx : 0;
-			for (const colIdx of visibleColIndices) {
-				const day = monthDays[colIdx];
-				if (!day) continue;
-				const dateKey = fmtDate(day);
-				const summary = getSummary(courtId, dateKey);
-				if (summary.items.length === 0) continue;
-				const cellLeft = colIdx * slotColWidth + 132;
-				const previewItems = summary.items.slice(0, PREVIEW_CAP);
-				const moreItems = summary.items.slice(PREVIEW_CAP);
-				const moreCount = moreItems.length;
-				const showMore = moreCount > 0 && previewItems.length > 0;
-				const itemLeft = cellLeft + OVERLAY_CELL_PAD;
-				const itemWidth = slotColWidth - OVERLAY_CELL_PAD * 2;
-				for (let i = 0; i < previewItems.length; i += 1) {
-					var _previewItems$i$id;
-					const top = cellTop + OVERLAY_CELL_PAD + i * (48 + OVERLAY_ITEM_GAP);
-					out.push({
-						kind: "booking",
-						key: `${courtId}\t${dateKey}\t${(_previewItems$i$id = previewItems[i].id) !== null && _previewItems$i$id !== void 0 ? _previewItems$i$id : i}`,
-						item: previewItems[i],
-						courtId,
-						dateKey,
-						top,
-						left: itemLeft,
-						width: itemWidth,
-						height: 48
-					});
-				}
-				if (showMore) {
-					const top = cellTop + OVERLAY_CELL_PAD + previewItems.length * (48 + OVERLAY_ITEM_GAP);
-					out.push({
-						kind: "more",
-						key: `${courtId}\t${dateKey}\tmore`,
-						courtId,
-						dateKey,
-						top,
-						left: itemLeft,
-						width: itemWidth,
-						moreItems,
-						moreCount,
-						allItems: summary.items
-					});
-				}
-			}
-		}
-		return out;
-	}, [
-		visibleCourtRows,
-		visibleColIndices,
-		monthDays,
-		rowPrefixTop,
-		slotColWidth,
-		virt,
-		getSummary
-	]);
-	const overlayHeight = (_rowPrefixTop = rowPrefixTop[rowPrefixTop.length - 1]) !== null && _rowPrefixTop !== void 0 ? _rowPrefixTop : rowHeights.reduce((a, b) => a + b, 0);
-	return /* @__PURE__ */ React.createElement("div", {
-		"aria-hidden": true,
-		style: {
-			position: "absolute",
-			top: 0,
-			left: 0,
-			width: "100%",
-			height: overlayHeight,
-			pointerEvents: "none",
-			zIndex: 5
-		}
-	}, items.map((it) => {
-		if (it.kind === "booking") {
-			const layoutClassName = `flex flex-col justify-center rounded-lg px-2.5 py-1.5 text-xs text-left w-full h-full ${getGridBookingRowStateClasses(it.item)}`;
-			return /* @__PURE__ */ React.createElement("div", {
-				key: it.key,
-				style: {
-					position: "absolute",
-					top: it.top,
-					left: it.left,
-					width: it.width,
-					height: it.height,
-					pointerEvents: "auto"
-				},
-				onDragOver: (e) => e.preventDefault(),
-				onDrop: (e) => {
-					e.preventDefault();
-					handleGridDropMove(it.dateKey, it.courtId);
-				}
-			}, renderMonthWeekBooking ? renderMonthWeekBooking({
-				item: it.item,
-				dateKey: it.dateKey,
-				view: "resource",
-				isLight,
-				layoutClassName,
-				onOpenDetail: openBookingDetail,
-				onDragStart: (i) => setDraggingItem(i),
-				draggable: false
-			}) : /* @__PURE__ */ React.createElement("button", {
-				type: "button",
-				onClick: (e) => {
-					e.stopPropagation();
-					openBookingDetail(it.item);
-				},
-				className: layoutClassName
-			}, /* @__PURE__ */ React.createElement("div", { className: "truncate" }, it.item.name), /* @__PURE__ */ React.createElement("div", { className: "mt-1 opacity-80 truncate" }, formatHourLabel(it.item.startHour), " -", " ", formatHourLabel(it.item.endHour))));
-		}
-		const isThisPopover = (overflowPopover === null || overflowPopover === void 0 ? void 0 : overflowPopover.courtId) === it.courtId && (overflowPopover === null || overflowPopover === void 0 ? void 0 : overflowPopover.date) === it.dateKey;
-		return /* @__PURE__ */ React.createElement("div", {
-			key: it.key,
-			ref: isThisPopover ? overflowPanelRef : null,
-			style: {
-				position: "absolute",
-				top: it.top,
-				left: it.left,
-				width: it.width,
-				minHeight: 48,
-				pointerEvents: "auto"
-			}
-		}, /* @__PURE__ */ React.createElement("button", {
-			type: "button",
-			onMouseEnter: (e) => {
-				e.stopPropagation();
-				setOverflowPopover({
-					courtId: it.courtId,
-					date: it.dateKey,
-					items: it.moreItems,
-					pinned: false
-				});
-			},
-			onClick: (e) => {
-				e.stopPropagation();
-				setOverflowPopover(null);
-				setOverflowListModal((prev) => prev && prev.scope === it.courtId && prev.date === it.dateKey ? null : {
-					scope: it.courtId,
-					date: it.dateKey,
-					title: tCal("pisell2.recordBoard.calendar.overflow.listTitleAllBookings", { date: it.dateKey }),
-					items: it.allItems.filter((x) => x.kind === "booking")
-				});
-			},
-			style: { minHeight: 48 },
-			className: "flex w-full items-center justify-center rounded-xl bg-violet-700/90 px-2.5 py-1 text-xs font-semibold text-white"
-		}, "+", it.moreCount));
-	}));
-});
-//#endregion
-export { BookingCalendarResourceView };