@pisell/materials 1.8.41 → 1.8.42

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

@@ -0,0 +1,583 @@
+import { _objectSpread2 } from "../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
+import PisellDateTimeDisplay_default from "../../../../pisellDateTimeDisplay/PisellDateTimeDisplay.js";
+import { CALENDAR_EMPTY_DASHED_SLOT_CLASSNAME } from "../const/bookingCalendarConstants.js";
+import { tCal } from "../calendarI18n.js";
+import { currentTimeLabel, dayOccupancy, dayOverlayHiddenKey, dayOverlayLaneMetrics, formatHourLabel, getViewNowReference, parseDate } from "../utils/bookingCalendarDateUtils.js";
+import { BookingCard, getBlockMetaLine, getRemainingToneClass } from "../bookingCalendarViewShared.js";
+import { BookingCalendarGroupRowHeader } from "./BookingCalendarGroupRowHeader.js";
+import { BookingCalendarDayChromeProvider } from "./bookingCalendarDayViewContext.js";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { ClockCircleOutlined } from "@ant-design/icons";
+//#region src/components/pisellRecordBoard/shellFrame/Calendar/view/BookingCalendarDayView.tsx
+/** 日视图：横向虚拟滚动时间轴 + 资源行，预约条按 lane 叠放与 +N 溢出 */
+/** 日视图（含底部多选操作条） */
+function BookingCalendarDayView(dayProps) {
+	var _props$timelineHeader, _props$timelineHeader2, _props$timelineHeader3;
+	const props = dayProps.calendarProps;
+	const { isLight, view, anchorDate, dayKey, hourSlots, resolvedSlotMinutes, slotColWidth, firstTimelineHour, endTimelineExclusive, isBusinessHour, dayHourRemaining, timelinePxPerHour, dayContentHeight, dayRowHeights, visibleCourtRows, overlayBookings, dayOverlayOverflowPluses, setCollapsedGroups, visibleCourts, bookings, slotStepHours, isFreeSelected, isBlockSelected, toggleSlot, handleDropMove, hiddenDayOverlayIdSet, courtDayDisplayLaneCount, openBookingDetail, setDraggingItem, setNavDirection, commitAnchor, setFocusedCourtId, setOverflowListModal, selectedFreeSlots, selectedBlockSlots, focusedCourtId, dayTimelineScrollToNowToken } = dayProps;
+	const dayScrollRef = useRef(null);
+	const dayBodyGridRef = useRef(null);
+	const dayVirtRafRef = useRef(null);
+	const dayDragRef = useRef({
+		dragging: false,
+		startX: 0,
+		startY: 0,
+		startLeft: 0,
+		startTop: 0,
+		moved: false
+	});
+	const [dayVirt, setDayVirt] = useState({
+		i0: 0,
+		i1: 0,
+		r0: 0,
+		r1: 0,
+		ready: false
+	});
+	const [dayDragging, setDayDragging] = useState(false);
+	const dayRowPrefixTop = useMemo(() => {
+		const p = [0];
+		for (let i = 0; i < dayRowHeights.length; i++) {
+			var _dayRowHeights$i;
+			p.push(p[i] + ((_dayRowHeights$i = dayRowHeights[i]) !== null && _dayRowHeights$i !== void 0 ? _dayRowHeights$i : 44));
+		}
+		return p;
+	}, [dayRowHeights]);
+	const updateDayViewport = useCallback(() => {
+		const root = dayScrollRef.current;
+		const body = dayBodyGridRef.current;
+		if (!root || !body) return;
+		if (props.renderTimelineHeader) {
+			setDayVirt({
+				i0: 0,
+				i1: Math.max(0, hourSlots.length - 1),
+				r0: 0,
+				r1: Math.max(0, visibleCourtRows.length - 1),
+				ready: false
+			});
+			return;
+		}
+		const n = hourSlots.length;
+		const nr = visibleCourtRows.length;
+		if (n <= 0 || nr <= 0) return;
+		const W = slotColWidth;
+		const FC = 132;
+		const sl = root.scrollLeft;
+		const st = root.scrollTop;
+		const vw = root.clientWidth;
+		const vh = root.clientHeight;
+		const bodyTop = body.offsetTop;
+		let i0 = Math.floor((sl - FC) / W) - 5;
+		let i1 = Math.ceil((sl + vw - FC) / W) - 1 + 5;
+		i0 = Math.max(0, i0);
+		i1 = Math.min(n - 1, i1);
+		if (i0 > i1) {
+			i0 = 0;
+			i1 = n - 1;
+		}
+		const vTop = st;
+		const vBot = st + vh;
+		const buf = 240;
+		let r0 = 0;
+		let r1 = nr - 1;
+		const pfx = dayRowPrefixTop;
+		for (let r = 0; r < nr; r++) {
+			var _pfx$r, _pfx;
+			bodyTop + ((_pfx$r = pfx[r]) !== null && _pfx$r !== void 0 ? _pfx$r : 0);
+			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--) {
+			var _pfx$r2;
+			if (bodyTop + ((_pfx$r2 = pfx[r]) !== null && _pfx$r2 !== void 0 ? _pfx$r2 : 0) < vBot + buf) {
+				r1 = r;
+				break;
+			}
+		}
+		if (r0 > r1) {
+			r0 = 0;
+			r1 = nr - 1;
+		}
+		setDayVirt((prev) => {
+			if (prev.ready && prev.i0 === i0 && prev.i1 === i1 && prev.r0 === r0 && prev.r1 === r1) return prev;
+			return {
+				i0,
+				i1,
+				r0,
+				r1,
+				ready: true
+			};
+		});
+	}, [
+		props.renderTimelineHeader,
+		hourSlots.length,
+		visibleCourtRows.length,
+		slotColWidth,
+		132,
+		dayRowPrefixTop
+	]);
+	const scheduleDayViewportUpdate = useCallback(() => {
+		if (dayVirtRafRef.current != null) return;
+		dayVirtRafRef.current = requestAnimationFrame(() => {
+			dayVirtRafRef.current = null;
+			updateDayViewport();
+		});
+	}, [updateDayViewport]);
+	useLayoutEffect(() => {
+		const root = dayScrollRef.current;
+		if (!root) return void 0;
+		scheduleDayViewportUpdate();
+		const onScroll = () => scheduleDayViewportUpdate();
+		root.addEventListener("scroll", onScroll, { passive: true });
+		let ro;
+		if (typeof ResizeObserver !== "undefined") {
+			ro = new ResizeObserver(() => scheduleDayViewportUpdate());
+			try {
+				ro.observe(root);
+			} catch (_unused) {}
+		}
+		return () => {
+			root.removeEventListener("scroll", onScroll);
+			if (ro) ro.disconnect();
+			if (dayVirtRafRef.current != null) {
+				cancelAnimationFrame(dayVirtRafRef.current);
+				dayVirtRafRef.current = null;
+			}
+		};
+	}, [
+		dayKey,
+		scheduleDayViewportUpdate,
+		hourSlots.length,
+		visibleCourtRows.length
+	]);
+	/**
+	* 进入日视图且展示「今天」时：将横向滚动直接定位到当前时间附近（与绿线一致，无动画）。
+	* `dayTimelineScrollToNowToken` 在壳层每次切入 day 时递增，避免无关重渲染时反复抢滚。
+	* 依赖项仅 `token` 与 `dayKey`：勿加入 `scheduleDayViewportUpdate` 等，否则易在用户手动横滚后又被拉回当前时刻。
+	*/
+	useLayoutEffect(() => {
+		if (dayKey !== getViewNowReference().dateKey) return;
+		let cancelled = false;
+		const apply = (attempt) => {
+			if (cancelled) return;
+			const root = dayScrollRef.current;
+			if (!root) return;
+			if (root.scrollWidth < 8 && attempt < 30) {
+				requestAnimationFrame(() => apply(attempt + 1));
+				return;
+			}
+			const now = getViewNowReference();
+			const lo = firstTimelineHour;
+			const hi = endTimelineExclusive;
+			let hf = now.hourFloat;
+			if (hf < lo) hf = lo;
+			if (hf >= hi) hf = Math.max(lo, hi - .001);
+			const leftPx = 132 + (hf - lo) * timelinePxPerHour;
+			const vw = root.clientWidth;
+			const maxSl = Math.max(0, root.scrollWidth - vw);
+			let target = leftPx - vw / 2;
+			if (target < 0) target = 0;
+			if (target > maxSl) target = maxSl;
+			root.scrollLeft = target;
+			scheduleDayViewportUpdate();
+		};
+		apply(0);
+		return () => {
+			cancelled = true;
+		};
+	}, [dayTimelineScrollToNowToken, dayKey]);
+	/**
+	* 周/月点格进入日视图时会带上 `focusedCourtId`：只应在日历内层滚动容器内滚到该行。
+	* 若用 `scrollIntoView`，浏览器会连锁滚动外层页面，RecordBoard 顶栏日程带会被顶出视口。
+	*/
+	useEffect(() => {
+		if (!focusedCourtId || !dayScrollRef.current) return;
+		const timer = setTimeout(() => {
+			const root = dayScrollRef.current;
+			if (!root) return;
+			const el = root.querySelector(`[data-court-row="${focusedCourtId}"]`);
+			if (!el) return;
+			const rootRect = root.getBoundingClientRect();
+			const rowRect = el.getBoundingClientRect();
+			const targetTop = rootRect.top + 56;
+			const desiredTop = root.scrollTop + (rowRect.top - targetTop);
+			const maxTop = Math.max(0, root.scrollHeight - root.clientHeight);
+			/** 对齐到表头下方；若滚不到则尽量滚到最底（maxTop） */
+			const nextTop = Math.min(maxTop, Math.max(0, desiredTop));
+			root.scrollTo({
+				top: nextTop,
+				behavior: "smooth"
+			});
+			/** 仅用于“定位滚动”，不应持续高亮左侧标题格 */
+			setFocusedCourtId(null);
+		}, 180);
+		return () => clearTimeout(timer);
+	}, [
+		focusedCourtId,
+		anchorDate,
+		dayKey
+	]);
+	const handleDayMouseMove = useCallback((e) => {
+		if (!dayDragRef.current.dragging || !dayScrollRef.current) return;
+		const dx = e.clientX - dayDragRef.current.startX;
+		const dy = e.clientY - dayDragRef.current.startY;
+		if (Math.abs(dx) > 3 || Math.abs(dy) > 3) dayDragRef.current.moved = true;
+		dayScrollRef.current.scrollLeft = dayDragRef.current.startLeft - dx;
+		dayScrollRef.current.scrollTop = dayDragRef.current.startTop - dy;
+		scheduleDayViewportUpdate();
+	}, [scheduleDayViewportUpdate]);
+	const handleDayMouseUp = useCallback(() => {
+		dayDragRef.current.dragging = false;
+		setDayDragging(false);
+	}, []);
+	const handleDayMouseDown = useCallback((e) => {
+		if (!dayScrollRef.current) return;
+		if (e.target.closest("button, input, select, textarea, a, label")) return;
+		const dragHost = e.target.closest("[draggable]");
+		if (dragHost instanceof HTMLElement && dragHost.draggable) return;
+		const el = dayScrollRef.current;
+		dayDragRef.current = {
+			dragging: true,
+			startX: e.clientX,
+			startY: e.clientY,
+			startLeft: el.scrollLeft,
+			startTop: el.scrollTop,
+			moved: false
+		};
+		setDayDragging(true);
+		e.preventDefault();
+	}, []);
+	useEffect(() => {
+		window.addEventListener("mousemove", handleDayMouseMove);
+		window.addEventListener("mouseup", handleDayMouseUp);
+		return () => {
+			window.removeEventListener("mousemove", handleDayMouseMove);
+			window.removeEventListener("mouseup", handleDayMouseUp);
+		};
+	}, [
+		anchorDate,
+		visibleCourts.length,
+		handleDayMouseMove,
+		handleDayMouseUp
+	]);
+	const daySlotVirtEnabled = !props.renderTimelineHeader && dayVirt.ready;
+	const dayVirtI0 = daySlotVirtEnabled ? dayVirt.i0 : 0;
+	const dayVirtI1 = daySlotVirtEnabled ? dayVirt.i1 : Math.max(0, hourSlots.length - 1);
+	const dayVirtR0 = daySlotVirtEnabled ? dayVirt.r0 : 0;
+	const dayVirtR1 = daySlotVirtEnabled ? dayVirt.r1 : Math.max(0, visibleCourtRows.length - 1);
+	const dayVisibleSlotIndices = useMemo(() => {
+		const out = [];
+		for (let hi = dayVirtI0; hi <= dayVirtI1; hi++) out.push(hi);
+		return out;
+	}, [dayVirtI0, dayVirtI1]);
+	const courtRowIndexById = useMemo(() => {
+		const m = /* @__PURE__ */ new Map();
+		visibleCourtRows.forEach((row, idx) => {
+			if (row.kind === "court") m.set(row.id, idx);
+		});
+		return m;
+	}, [visibleCourtRows]);
+	const visibleDayOverlayBookings = useMemo(() => {
+		if (!daySlotVirtEnabled) return overlayBookings;
+		const t0 = hourSlots[dayVirtI0];
+		const t1 = hourSlots[dayVirtI1] + slotStepHours;
+		return overlayBookings.filter((b) => {
+			if (b.rowIndex < dayVirtR0 || b.rowIndex > dayVirtR1) return false;
+			const bs = b.start;
+			return b.start + b.span > t0 - 1e-6 && bs < t1 + 1e-6;
+		});
+	}, [
+		daySlotVirtEnabled,
+		overlayBookings,
+		hourSlots,
+		dayVirtI0,
+		dayVirtI1,
+		dayVirtR0,
+		dayVirtR1,
+		slotStepHours
+	]);
+	/** 横向按槽位索引 + 纵向按资源行做了可视裁剪，减轻大场地×长时段 DOM（非 react-window，仍为原生滚动） */
+	const visibleDayOverflowPluses = useMemo(() => {
+		if (!daySlotVirtEnabled) return dayOverlayOverflowPluses;
+		const t0 = hourSlots[dayVirtI0];
+		const t1 = hourSlots[dayVirtI1] + slotStepHours;
+		return dayOverlayOverflowPluses.filter((pill) => {
+			const ri = courtRowIndexById.get(pill.courtId);
+			if (ri == null || ri < dayVirtR0 || ri > dayVirtR1) return false;
+			const ps = pill.start;
+			return pill.start + pill.span > t0 - 1e-6 && ps < t1 + 1e-6;
+		});
+	}, [
+		daySlotVirtEnabled,
+		dayOverlayOverflowPluses,
+		hourSlots,
+		dayVirtI0,
+		dayVirtI1,
+		dayVirtR0,
+		dayVirtR1,
+		slotStepHours,
+		courtRowIndexById
+	]);
+	const dayChromeValue = useMemo(() => ({
+		calendarProps: props,
+		isLight
+	}), [props, isLight]);
+	return /* @__PURE__ */ React.createElement(BookingCalendarDayChromeProvider, { value: dayChromeValue }, /* @__PURE__ */ React.createElement("div", {
+		key: `day-${dayKey}`,
+		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: dayScrollRef,
+		onMouseDown: handleDayMouseDown,
+		onMouseMove: handleDayMouseMove,
+		onMouseUp: handleDayMouseUp,
+		onMouseLeave: handleDayMouseUp,
+		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]"} ${dayDragging ? "cursor-grabbing" : "cursor-grab"}`
+	}, /* @__PURE__ */ React.createElement("div", {
+		className: "relative",
+		style: {
+			minWidth: `${132 + hourSlots.length * slotColWidth}px`,
+			minHeight: `${dayContentHeight}px`
+		}
+	}, /* @__PURE__ */ React.createElement("div", {
+		className: "grid sticky top-0 z-50",
+		style: _objectSpread2({ gridTemplateColumns: `132px repeat(${hourSlots.length}, ${slotColWidth}px)` }, ((_props$timelineHeader = props.timelineHeaderGroups) === null || _props$timelineHeader === void 0 ? void 0 : _props$timelineHeader.length) && !props.renderTimelineHeader ? { gridTemplateRows: "auto auto" } : {})
+	}, /* @__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] items-center justify-start 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"}`,
+		style: ((_props$timelineHeader2 = props.timelineHeaderGroups) === null || _props$timelineHeader2 === void 0 ? void 0 : _props$timelineHeader2.length) && !props.renderTimelineHeader ? { gridRow: "1 / span 2" } : void 0
+	}, /* @__PURE__ */ React.createElement(PisellDateTimeDisplay_default, {
+		value: anchorDate,
+		disableAutoRefresh: true,
+		layout: "vertical",
+		textAlign: "left",
+		fields: {
+			showTime: false,
+			showWeekday: false,
+			fieldOrder: ["date"]
+		},
+		dateFormat: {
+			showYear: true,
+			showChineseUnit: true
+		},
+		style: { color: "inherit" },
+		dateStyle: {
+			color: "inherit",
+			fontWeight: 600,
+			fontSize: 14
+		}
+	})), props.renderTimelineHeader ? /* @__PURE__ */ React.createElement("div", { style: { display: "contents" } }, props.renderTimelineHeader({
+		anchorDate,
+		hourSlots,
+		slotStepMinutes: resolvedSlotMinutes,
+		slotColWidthPx: slotColWidth,
+		isLight,
+		firstTimelineHour,
+		endTimelineExclusive,
+		isBusinessHour,
+		formatHourLabel,
+		getSlotStartHour: (i) => hourSlots[i],
+		slotCount: hourSlots.length,
+		dayHourRemaining
+	})) : /* @__PURE__ */ React.createElement(React.Fragment, null, (_props$timelineHeader3 = props.timelineHeaderGroups) === null || _props$timelineHeader3 === void 0 ? void 0 : _props$timelineHeader3.map((g, gi) => {
+		if (daySlotVirtEnabled && (g.endSlotIndex < dayVirtI0 || g.startSlotIndex > dayVirtI1)) return null;
+		const span = g.endSlotIndex - g.startSlotIndex + 1;
+		return /* @__PURE__ */ React.createElement("div", {
+			key: `cal-hdr-g-${gi}`,
+			className: `border-b border-l px-1.5 py-1 text-center text-xs font-semibold ${isLight ? "theme-border theme-panel-soft theme-text-soft" : "border-zinc-800 bg-[#1e1a32] text-zinc-200"}`,
+			style: {
+				gridColumn: `${2 + g.startSlotIndex} / span ${span}`,
+				gridRow: 1
+			}
+		}, g.label);
+	}), (daySlotVirtEnabled ? dayVisibleSlotIndices : hourSlots.map((_, hi) => hi)).map((hi) => {
+		var _props$timelineHeader4;
+		const hour = hourSlots[hi];
+		return /* @__PURE__ */ React.createElement("div", {
+			key: `hdr-${hi}-${hour}`,
+			className: `border-b border-l px-1.5 py-2 text-center text-sm font-medium ${isLight ? "theme-border" : "border-zinc-800"} ${isBusinessHour(hour) ? isLight ? "theme-panel-soft theme-text-soft" : "bg-[#1a1a22] text-zinc-300" : isLight ? "bg-slate-100 theme-text-faint" : "bg-zinc-800/80 text-zinc-500"}`,
+			style: ((_props$timelineHeader4 = props.timelineHeaderGroups) === null || _props$timelineHeader4 === void 0 ? void 0 : _props$timelineHeader4.length) ? {
+				gridRow: 2,
+				gridColumn: hi + 2
+			} : { gridColumn: hi + 2 }
+		}, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center gap-1" }, /* @__PURE__ */ React.createElement(ClockCircleOutlined, { style: { fontSize: 14 } }), " ", formatHourLabel(hour)), isBusinessHour(hour) && dayHourRemaining[hour] && /* @__PURE__ */ React.createElement("div", { className: `mt-1 text-[11px] font-semibold ${getRemainingToneClass(dayHourRemaining[hour].ratio, isLight)}` }, tCal("pisell2.recordBoard.calendar.day.freeRatio", {
+			remaining: dayHourRemaining[hour].remaining,
+			total: dayHourRemaining[hour].total
+		})));
+	}))), dayKey === getViewNowReference().dateKey && /* @__PURE__ */ React.createElement("div", {
+		className: "pointer-events-none absolute inset-y-0 z-20",
+		style: { left: `${132 + (getViewNowReference().hourFloat - firstTimelineHour) * timelinePxPerHour}px` }
+	}, /* @__PURE__ */ React.createElement("div", { className: "relative h-full" }, /* @__PURE__ */ React.createElement("div", { className: "absolute inset-y-0 w-[2px] bg-emerald-400/95 shadow-[0_0_10px_rgba(16,185,129,0.65)]" }), /* @__PURE__ */ React.createElement("div", { className: "sticky top-2 z-30 -translate-x-1/2 rounded-full bg-emerald-500 px-2 py-0.5 text-[10px] font-semibold text-white shadow-lg w-fit" }, currentTimeLabel()))), /* @__PURE__ */ React.createElement("div", {
+		ref: dayBodyGridRef,
+		className: "grid relative",
+		style: {
+			gridTemplateColumns: `132px repeat(${hourSlots.length}, ${slotColWidth}px)`,
+			gridTemplateRows: dayRowHeights.map((h) => `${h}px`).join(" ")
+		}
+	}, visibleCourtRows.map((row, rowIndex) => daySlotVirtEnabled && (rowIndex < dayVirtR0 || rowIndex > dayVirtR1) ? /* @__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
+	}) : /* @__PURE__ */ React.createElement(React.Fragment, { key: row.id }, row.kind === "group" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BookingCalendarGroupRowHeader, {
+		isLight,
+		view: "day",
+		row: {
+			id: row.id,
+			label: row.label,
+			count: row.count,
+			collapsed: row.collapsed
+		},
+		renderResourceCell: props.renderResourceCell,
+		setCollapsedGroups,
+		style: daySlotVirtEnabled ? {
+			gridRow: rowIndex + 1,
+			gridColumn: 1
+		} : void 0
+	}), (daySlotVirtEnabled ? dayVisibleSlotIndices : hourSlots.map((_, hi) => hi)).map((hi) => {
+		const hour = hourSlots[hi];
+		const groupCourts = visibleCourts.filter((court) => court.type === row.label);
+		const remaining = groupCourts.filter((court) => !dayOccupancy(court.id, dayKey, bookings, hourSlots, slotStepHours)[hour]).length;
+		const ratio = groupCourts.length > 0 ? remaining / groupCourts.length : 0;
+		const outsideBusiness = !isBusinessHour(hour);
+		return /* @__PURE__ */ React.createElement("div", {
+			key: `${row.id}-${hour}-${hi}`,
+			className: `flex h-full min-h-0 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"} ${outsideBusiness ? isLight ? "bg-slate-100 theme-text-faint" : "bg-zinc-800/80 text-zinc-500" : isLight ? "theme-panel-soft" : "bg-[#151a2f] text-zinc-300"}`,
+			style: daySlotVirtEnabled ? {
+				gridRow: rowIndex + 1,
+				gridColumn: hi + 2
+			} : void 0
+		}, outsideBusiness ? /* @__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: groupCourts.length
+		})));
+	})) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+		"data-court-row": row.id,
+		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 ? focusedCourtId === row.id ? "surface-brand-side ring-2 ring-[var(--brand-light)]/70" : "surface-brand-side-muted" : focusedCourtId === row.id ? "ring-2 ring-violet-400/70 bg-violet-900/20 border-zinc-800" : "bg-[#1a1a22] border-zinc-800"}`,
+		style: daySlotVirtEnabled ? {
+			gridRow: rowIndex + 1,
+			gridColumn: 1
+		} : void 0
+	}, props.renderResourceCell ? props.renderResourceCell({
+		view: "day",
+		row: {
+			kind: "court",
+			id: row.id,
+			name: row.name,
+			type: row.type
+		},
+		isLight
+	}) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "font-semibold text-base leading-tight truncate" }, row.name))), (daySlotVirtEnabled ? dayVisibleSlotIndices : hourSlots.map((_, hi) => hi)).map((hi) => {
+		const hour = hourSlots[hi];
+		const item = dayOccupancy(row.id, dayKey, bookings, hourSlots, slotStepHours)[hour];
+		const isBlock = (item === null || item === void 0 ? void 0 : item.kind) === "block";
+		const isOccupied = !!item;
+		const freeSelected = isFreeSelected(row.id, hour);
+		const blockSelected = isBlockSelected(row.id, hour);
+		const outsideBusiness = !isBusinessHour(hour);
+		return /* @__PURE__ */ React.createElement("button", {
+			key: `${row.id}-${hour}-${hi}`,
+			style: daySlotVirtEnabled ? {
+				gridRow: rowIndex + 1,
+				gridColumn: hi + 2
+			} : void 0,
+			onClick: () => !outsideBusiness && toggleSlot(row.id, hour),
+			onDragOver: (e) => {
+				if (!outsideBusiness) e.preventDefault();
+			},
+			onDrop: (e) => {
+				if (!outsideBusiness) {
+					e.preventDefault();
+					handleDropMove(row.id, dayKey, hour);
+				}
+			},
+			className: `relative flex h-full min-h-0 flex-col p-1 text-left transition outline-none ${isOccupied && !outsideBusiness ? "border-l-transparent border-b-transparent" : `border-b border-l ${isLight ? "theme-border" : "border-zinc-700"}`} ${outsideBusiness ? isLight ? "bg-slate-100 theme-text-faint" : "bg-zinc-800/80 text-zinc-500 border-zinc-700" : isBlock ? blockSelected ? `bg-red-500/25 ring-1 ring-inset ring-red-400/75 border-b border-l ${isLight ? "theme-border" : "border-zinc-700"}` : isLight ? "bg-red-50 border-red-200" : "bg-red-900/50 border-red-700/50" : isOccupied ? "bg-transparent" : freeSelected ? isLight ? "bg-violet-50 ring-1 ring-inset ring-violet-400/75 border-b border-l theme-border" : "bg-white/10 ring-1 ring-inset ring-violet-400/70 border-b border-l border-zinc-700" : isLight ? "theme-grid-cell" : "bg-zinc-900 border-zinc-700"}`
+		}, outsideBusiness ? /* @__PURE__ */ React.createElement("div", { className: "flex h-full items-center justify-center rounded-xl border border-dashed border-zinc-700 text-xs text-zinc-500" }, tCal("pisell2.recordBoard.calendar.day.outsideHours")) : (item === null || item === void 0 ? void 0 : item.kind) === "block" ? /* @__PURE__ */ React.createElement("div", { className: "flex h-full w-full flex-col justify-center rounded-xl px-2.5 text-sm font-medium" }, /* @__PURE__ */ React.createElement("div", { className: "truncate" }, blockSelected ? tCal("pisell2.recordBoard.calendar.day.selectedBlock") : item.name), item.note && /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-xs text-zinc-300/90 truncate" }, item.note), getBlockMetaLine(item) && /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-[10px] text-zinc-400 truncate" }, getBlockMetaLine(item))) : !item ? /* @__PURE__ */ React.createElement("div", { className: `${CALENDAR_EMPTY_DASHED_SLOT_CLASSNAME} text-center ${isLight ? "border-[#d8d0eb] text-[#8f86a9]" : "border-zinc-700 text-zinc-500"}` }, freeSelected ? tCal("pisell2.recordBoard.calendar.day.selected") : null) : null);
+	})))), visibleDayOverlayBookings.map((booking) => {
+		var _booking$rowHeight, _courtDayDisplayLaneC;
+		if (hiddenDayOverlayIdSet.has(dayOverlayHiddenKey(booking.item, dayKey, booking.courtId))) return null;
+		const left = 132 + (booking.start - firstTimelineHour) * timelinePxPerHour;
+		const width = booking.span * timelinePxPerHour;
+		const rowH = (_booking$rowHeight = booking.rowHeight) !== null && _booking$rowHeight !== void 0 ? _booking$rowHeight : 44;
+		const totalInner = Math.max(40, rowH - 8 - 8);
+		const laneCount = Math.max(1, (_courtDayDisplayLaneC = courtDayDisplayLaneCount[booking.courtId]) !== null && _courtDayDisplayLaneC !== void 0 ? _courtDayDisplayLaneC : 1);
+		const lane = Number.isFinite(booking.lane) && booking.lane >= 0 ? booking.lane : 0;
+		const laneGeom = dayOverlayLaneMetrics(totalInner, laneCount, 2);
+		const styleTop = booking.rowTop + 8 + laneGeom.topFor(lane);
+		const styleHeight = laneGeom.heightFor(lane);
+		return /* @__PURE__ */ React.createElement("div", {
+			key: `${booking.item.id}-${dayKey}`,
+			className: "absolute z-[25] isolate",
+			style: {
+				left,
+				top: styleTop,
+				width,
+				height: styleHeight
+			}
+		}, props.renderBooking ? props.renderBooking({
+			booking,
+			dayKey,
+			calendarView: view,
+			isLight,
+			overlayWidthPx: width,
+			onOpenDetail: openBookingDetail,
+			onDragStart: setDraggingItem,
+			onJumpNext: () => {
+				const nextDay = parseDate(dayKey);
+				nextDay.setDate(nextDay.getDate() + 1);
+				setNavDirection(1);
+				commitAnchor(nextDay);
+				setFocusedCourtId(booking.courtId);
+			}
+		}) : /* @__PURE__ */ React.createElement(BookingCard, {
+			booking,
+			dayKey,
+			overlayWidthPx: width,
+			onOpenDetail: openBookingDetail,
+			onDragStart: setDraggingItem,
+			onJumpNext: () => {
+				const nextDay = parseDate(dayKey);
+				nextDay.setDate(nextDay.getDate() + 1);
+				setNavDirection(1);
+				commitAnchor(nextDay);
+				setFocusedCourtId(booking.courtId);
+			}
+		}));
+	}), visibleDayOverflowPluses.map((pill) => {
+		var _pill$rowHeight, _courtDayDisplayLaneC2;
+		const left = 132 + (pill.start - firstTimelineHour) * timelinePxPerHour;
+		const width = pill.span * timelinePxPerHour;
+		const rowH = (_pill$rowHeight = pill.rowHeight) !== null && _pill$rowHeight !== void 0 ? _pill$rowHeight : 44;
+		const laneGeom = dayOverlayLaneMetrics(Math.max(40, rowH - 8 - 8), Math.max(1, (_courtDayDisplayLaneC2 = courtDayDisplayLaneCount[pill.courtId]) !== null && _courtDayDisplayLaneC2 !== void 0 ? _courtDayDisplayLaneC2 : 1), 2);
+		const lane = 3;
+		const styleTop = pill.rowTop + 8 + laneGeom.topFor(lane);
+		const styleHeight = laneGeom.heightFor(lane);
+		return /* @__PURE__ */ React.createElement("div", {
+			key: pill.key,
+			className: "absolute z-[26] isolate",
+			style: {
+				left,
+				top: styleTop,
+				width,
+				height: styleHeight
+			}
+		}, /* @__PURE__ */ React.createElement("button", {
+			type: "button",
+			onClick: (e) => {
+				e.stopPropagation();
+				setOverflowListModal({
+					scope: `day-lane-overflow-${pill.key}`,
+					date: dayKey,
+					title: tCal("pisell2.recordBoard.calendar.overflow.moreCount", { count: pill.plusCount }),
+					items: pill.overflowItems
+				});
+			},
+			className: `flex h-full w-full items-center justify-center rounded-xl px-1.5 text-sm font-semibold text-white shadow-sm ${isLight ? "bg-zinc-500/90" : "bg-zinc-600/90"}`
+		}, "+", pill.plusCount));
+	})))))));
+}
+//#endregion
+export { BookingCalendarDayView };

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

@@ -0,0 +1,41 @@
+import { _objectSpread2 } from "../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
+import React from "react";
+import { DownOutlined } from "@ant-design/icons";
+//#region src/components/pisellRecordBoard/shellFrame/Calendar/view/BookingCalendarGroupRowHeader.tsx
+/**
+* 日视图 / 周视图共用的分组头左侧 sticky 单元（折叠箭头 + 分组名 + 数量角标）。
+* 样式单点维护，与 {@link buildGroupedCourtRows} 的 group 行对应。
+*/
+/** 左侧分组列：周与日共用同一套 gradient / 字号 / 角标，避免分叉维护 */
+const STICKY_GROUP_SHELL = "sticky left-0 z-30 flex h-full min-h-0 w-[132px] min-w-[132px] max-w-[132px] items-center border-b px-2 py-1 shadow-[8px_0_16px_rgba(0,0,0,0.08)]";
+const STICKY_GROUP_LIGHT = "border-slate-200 bg-gradient-to-b from-slate-100 to-slate-50";
+const STICKY_GROUP_DARK = "border-zinc-800/80 bg-gradient-to-b from-[#252038] to-[#1a1628]";
+function BookingCalendarGroupRowHeader(props) {
+	const { isLight, view, row, renderResourceCell, setCollapsedGroups, style } = props;
+	return /* @__PURE__ */ React.createElement("div", {
+		className: `${STICKY_GROUP_SHELL} ${isLight ? STICKY_GROUP_LIGHT : STICKY_GROUP_DARK}`,
+		style
+	}, renderResourceCell ? renderResourceCell({
+		view,
+		row: {
+			kind: "group",
+			id: row.id,
+			label: row.label,
+			count: row.count,
+			collapsed: row.collapsed
+		},
+		isLight,
+		onToggleGroup: (label) => setCollapsedGroups((prev) => _objectSpread2(_objectSpread2({}, prev), {}, { [label]: !prev[label] }))
+	}) : /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		"aria-expanded": !row.collapsed,
+		onClick: () => setCollapsedGroups((prev) => _objectSpread2(_objectSpread2({}, prev), {}, { [row.label]: !prev[row.label] })),
+		className: `flex w-full min-h-0 items-center gap-2 rounded-lg px-1 py-0.5 text-left transition-colors ${isLight ? "" : "active:bg-white/[0.07]"}`
+	}, /* @__PURE__ */ React.createElement(DownOutlined, {
+		style: { fontSize: 14 },
+		className: `shrink-0 self-center transition-transform duration-200 ${isLight ? "text-slate-500" : "text-zinc-500"} ${row.collapsed ? "-rotate-90" : "rotate-0"}`,
+		"aria-hidden": true
+	}), /* @__PURE__ */ React.createElement("div", { className: "flex min-h-0 min-w-0 flex-1 items-center gap-1.5" }, /* @__PURE__ */ React.createElement("span", { className: `pisell-rb-cal-week-resource-name min-w-0 flex-1 truncate text-[13px] font-semibold leading-snug ${isLight ? "text-slate-800" : "text-zinc-100"}` }, row.label), /* @__PURE__ */ React.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))));
+}
+//#endregion
+export { BookingCalendarGroupRowHeader };