@pisell/materials 1.8.34 → 1.8.36

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

@@ -0,0 +1,612 @@
+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 };

package/es/components/pisellRecordBoard/shellFrame/Calendar/view/day/useBookingCalendarDayHourRemaining.js

@@ -0,0 +1,33 @@
+import { dayOccupancy } from "../../utils/bookingCalendarDateUtils.js";
+import { useMemo } from "react";
+//#region src/components/pisellRecordBoard/shellFrame/Calendar/view/day/useBookingCalendarDayHourRemaining.ts
+/**
+* 日视图表头：每列整点仍空闲资源占比。
+*/
+function useBookingCalendarDayHourRemaining(visibleCourts, dayKey, bookings, hourSlots, slotStepHours, isBusinessHour) {
+	return useMemo(() => {
+		const total = visibleCourts.length;
+		return Object.fromEntries(hourSlots.map((hour) => {
+			if (!isBusinessHour(hour)) return [hour, {
+				remaining: 0,
+				total,
+				ratio: 0
+			}];
+			const remaining = visibleCourts.filter((court) => !dayOccupancy(court.id, dayKey, bookings, hourSlots, slotStepHours)[hour]).length;
+			return [hour, {
+				remaining,
+				total,
+				ratio: total > 0 ? remaining / total : 0
+			}];
+		}));
+	}, [
+		visibleCourts,
+		dayKey,
+		bookings,
+		hourSlots,
+		slotStepHours,
+		isBusinessHour
+	]);
+}
+//#endregion
+export { useBookingCalendarDayHourRemaining };

package/es/components/pisellRecordBoard/shellFrame/Calendar/view/day/useBookingCalendarDaySelection.js

@@ -0,0 +1,37 @@
+import { dayOccupancy, sameSlot } from "../../utils/bookingCalendarDateUtils.js";
+import { useCallback } from "react";
+//#region src/components/pisellRecordBoard/shellFrame/Calendar/view/day/useBookingCalendarDaySelection.ts
+/**
+* 日视图：空闲 / 锁台槽多选逻辑（状态仍在 Shell，便于与底部 SelectionBar 共用）。
+*/
+function useBookingCalendarDaySelection(dayKey, bookings, hourSlots, slotStepHours, courts, selectedFreeSlots, selectedBlockSlots, setSelectedFreeSlots, setSelectedBlockSlots) {
+	return {
+		isFreeSelected: useCallback((courtId, hour) => selectedFreeSlots.some((slot) => slot.courtId === courtId && slot.date === dayKey && slot.hour === hour), [selectedFreeSlots, dayKey]),
+		isBlockSelected: useCallback((courtId, hour) => selectedBlockSlots.some((slot) => slot.courtId === courtId && slot.date === dayKey && slot.hour === hour), [selectedBlockSlots, dayKey]),
+		toggleSlot: useCallback((courtId, hour) => {
+			const existing = dayOccupancy(courtId, dayKey, bookings, hourSlots, slotStepHours)[hour];
+			const court = courts.find((c) => c.id === courtId);
+			const slot = {
+				courtId,
+				court: court === null || court === void 0 ? void 0 : court.name,
+				date: dayKey,
+				hour
+			};
+			if (!existing) {
+				setSelectedFreeSlots((prev) => prev.some((s) => sameSlot(s, slot)) ? prev.filter((s) => !sameSlot(s, slot)) : [...prev, slot]);
+				return;
+			}
+			if (existing.kind === "block") setSelectedBlockSlots((prev) => prev.some((s) => sameSlot(s, slot)) ? prev.filter((s) => !sameSlot(s, slot)) : [...prev, slot]);
+		}, [
+			bookings,
+			courts,
+			dayKey,
+			hourSlots,
+			setSelectedBlockSlots,
+			setSelectedFreeSlots,
+			slotStepHours
+		])
+	};
+}
+//#endregion
+export { useBookingCalendarDaySelection };