@pisell/materials 1.8.34 → 1.8.36

package/es/components/pisellRecordBoard/shellFrame/Calendar/BookingCalendar.js

@@ -2,25 +2,33 @@ import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122
 import { _asyncToGenerator } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js";
 import { buildCalendarTimelineSlotStartsFromRange } from "../../../pisellTimeNavigator/utils/index.js";
 import { useCalendarPersist } from "./calendarPersistGuard.js";
-import { DEFAULT_CALENDAR_TIMELINE, dayCourtOverlayRowHeightPx } from "./const/bookingCalendarConstants.js";
+import { DEFAULT_CALENDAR_TIMELINE } from "./const/bookingCalendarConstants.js";
 import { tCal } from "./calendarI18n.js";
-import { addDays, buildDayRowTopMap, buildOverlayBookings, clusterDayCourtOverlaysByOverlap, dayAndHourToDayjs, dayOccupancy, dayOverlayHiddenKey, effectiveDayOverlayDisplayLaneCount, fmtDate, getBookingSegmentForDate, groupSelectedSlots, isFreeSelectionContiguousSameResource, isHourInTimelineSlots, maxConcurrentBookingsOnCourt, monthGrid, rangeDays, sameSlot, startOfWeek } from "./utils/bookingCalendarDateUtils.js";
+import { addDays, dayAndHourToDayjs, fmtDate, groupSelectedSlots, isFreeSelectionContiguousSameResource, isHourInTimelineSlots, monthCalendarDays, monthGrid, rangeDays, startOfWeek } from "./utils/bookingCalendarDateUtils.js";
 import { MoveConfirmModal } from "./modal/MoveConfirmModal.js";
+import { BookingCalendarBlockPanel } from "./modal/BookingCalendarBlockPanel.js";
 import { buildGroupedCourtRows } from "./bookingCalendarViewShared.js";
-import { OverflowListModalVirtualList } from "./modal/OverflowListModal.js";
+import { BookingCalendarOverflowListLayer } from "./modal/BookingCalendarOverflowListLayer.js";
 import { BookingCalendarMonthView } from "./view/BookingCalendarMonthView.js";
 import { BookingCalendarWeekView } from "./view/BookingCalendarWeekView.js";
 import { BookingCalendarDayView } from "./view/BookingCalendarDayView.js";
+import { BookingCalendarResourceView } from "./view/BookingCalendarResourceView.js";
+import { BookingCalendarDaySelectionBar } from "./view/BookingCalendarDaySelectionBar.js";
+import { isResourceSelectionContiguousSameCourt } from "./utils/bookingCalendarSelectionUtils.js";
+import { useBookingCalendarDayOverlayLayout } from "./hooks/useBookingCalendarDayOverlayLayout.js";
+import { useBookingCalendarDayHourRemaining } from "./view/day/useBookingCalendarDayHourRemaining.js";
+import { useBookingCalendarDaySelection } from "./view/day/useBookingCalendarDaySelection.js";
+import { useBookingCalendarResourceDayHeaderRemaining } from "./view/resource/useBookingCalendarResourceDayHeaderRemaining.js";
+import { useBookingCalendarResourceCellToggle } from "./view/resource/useBookingCalendarResourceCellToggle.js";
+import { useBookingCalendarGoToDayFromCell } from "./view/useBookingCalendarGoToDayFromCell.js";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { DatePicker, Spin, message } from "antd";
-import { CloseOutlined } from "@ant-design/icons";
+import { Spin, message } from "antd";
 import "./BookingCalendar.less";
 //#region src/components/pisellRecordBoard/shellFrame/Calendar/BookingCalendar.tsx
 /**
 * RecordBoard 预约日历：月 / 周 / 日三视图，资源分组与折叠、锁台、拖拽改期、日视图多 lane overlay。
 * 受控：`calendarView`、`anchorDate`、`bookings` 等见 {@link RecordBoardCalendarProps}；未传时由内部 state 驱动（便于 Story）。
 */
-const { RangePicker } = DatePicker;
 /** 看板日历根组件：内含主题 CSS 与 Spin，按 `view` 挂载月 / 周 / 日子组件 */
 function BookingCalendar(props = {}) {
 	var _hourSlots$;
@@ -55,8 +63,10 @@ function BookingCalendar(props = {}) {
 		return Math.min(1440, n);
 	}, [props.slotStepMinutes]);
 	const slotStepHours = resolvedSlotMinutes / 60;
-	/** 每槽一列固定为「原整点列」宽度，细粒度仅增加列数，由容器横向滚动承载 */
+	/** 每槽一列固定为「原整点列」宽度，细粒度仅增加列数，由容器横向滚动承载（日/周等时间轴） */
 	const slotColWidth = 92;
+	/** 资源视图：按「日」分列，单列单独加宽 */
+	const resourceViewSlotColWidth = 102;
 	const timelinePxPerHour = 92 / slotStepHours;
 	/** 切换月/周/日：先 `onCalendarViewChange`，无受控回调时再 `setInternalView` */
 	const commitView = (v) => {
@@ -82,6 +92,9 @@ function BookingCalendar(props = {}) {
 		if (view === "month") {
 			rangeStart = new Date(a.getFullYear(), a.getMonth(), 1);
 			rangeEnd = new Date(a.getFullYear(), a.getMonth() + 1, 0);
+		} else if (view === "resource") {
+			rangeStart = new Date(a.getFullYear(), a.getMonth(), 1);
+			rangeEnd = new Date(a.getFullYear(), a.getMonth() + 1, 0);
 		} else if (view === "week") {
 			rangeStart = startOfWeek(a);
 			rangeEnd = addDays(rangeStart, 6);
@@ -102,6 +115,7 @@ function BookingCalendar(props = {}) {
 	]);
 	const [selectedFreeSlots, setSelectedFreeSlots] = useState([]);
 	const [selectedBlockSlots, setSelectedBlockSlots] = useState([]);
+	const [selectedResourceCells, setSelectedResourceCells] = useState([]);
 	const [focusedCourtId, setFocusedCourtId] = useState(null);
 	const [showBlockPanel, setShowBlockPanel] = useState(false);
 	const [blockFormName, setBlockFormName] = useState(() => tCal("pisell2.recordBoard.calendar.block.defaultTitle"));
@@ -125,11 +139,14 @@ function BookingCalendar(props = {}) {
 	* 供日视图将横向 scroll 定位到「当前时间」列。
 	*/
 	const [dayTimelineScrollToNowToken, setDayTimelineScrollToNowToken] = useState(0);
+	const [resourceMonthScrollToTodayToken, setResourceMonthScrollToTodayToken] = useState(0);
 	const prevCalendarViewRef = useRef(null);
+	const prevViewForSlotIsolationRef = useRef(view);
 	/** 任意入口切入 `day` 时递增一次（含首屏即为日视图：`prev === null`） */
 	useLayoutEffect(() => {
 		const prev = prevCalendarViewRef.current;
 		if (view === "day" && (prev === null || prev !== "day")) setDayTimelineScrollToNowToken((t) => t + 1);
+		if (view === "resource" && (prev === null || prev !== "resource")) setResourceMonthScrollToTodayToken((t) => t + 1);
 		prevCalendarViewRef.current = view;
 	}, [view]);
 	const blockPanelRef = useRef(null);
@@ -154,79 +171,45 @@ function BookingCalendar(props = {}) {
 		resolvedSlotMinutes
 	]);
 	/**
-	* 日视图专用：按资源行上「同时段最大并行条数」算行高（`dayCourtOverlayRowHeightPx`）；无预约行仍用 `dayRowHeight`；有 overlay 时不再做不小于 `dayRowHeight` 的额外下限。
-	* 周/月不读其中大部分字段，但为单 hook 依赖仍随 `visibleCourtRows` 重算。
+	* 日视图 overlay 行高 / 并行 lane / +N 溢出（详见 hook 内注释）。
 	*/
-	const { dayRowHeights, dayRowTopMap, overlayBookings, courtDayDisplayLaneCount, hiddenDayOverlayIdSet, dayOverlayOverflowPluses } = useMemo(() => {
-		const defaultHeights = visibleCourtRows.map((row) => row.kind === "group" ? 38 : 44);
-		let overlays = buildOverlayBookings(visibleCourtRows, dayKey, bookings, buildDayRowTopMap(visibleCourtRows, defaultHeights), hourSlots, defaultHeights, slotStepHours);
-		const expandedHeights = visibleCourtRows.map((row, i) => {
-			if (row.kind !== "court") return defaultHeights[i];
-			if (!overlays.some((o) => o.courtId === row.id)) return defaultHeights[i];
-			return dayCourtOverlayRowHeightPx(effectiveDayOverlayDisplayLaneCount(maxConcurrentBookingsOnCourt(overlays, row.id)));
-		});
-		const tops2 = buildDayRowTopMap(visibleCourtRows, expandedHeights);
-		overlays = buildOverlayBookings(visibleCourtRows, dayKey, bookings, tops2, hourSlots, expandedHeights, slotStepHours);
-		const courtDayDisplayLaneCount = {};
-		const hiddenDayOverlayIdSet = /* @__PURE__ */ new Set();
-		const dayOverlayOverflowPluses = [];
-		for (const row of visibleCourtRows) {
-			if (row.kind !== "court") continue;
-			const cid = row.id;
-			courtDayDisplayLaneCount[cid] = effectiveDayOverlayDisplayLaneCount(maxConcurrentBookingsOnCourt(overlays, cid));
-			const clusters = clusterDayCourtOverlaysByOverlap(overlays, cid);
-			for (const cluster of clusters) {
-				if (cluster.length <= 3) continue;
-				const sortedByLane = [...cluster].sort((a, b) => {
-					var _a$lane, _b$lane;
-					return ((_a$lane = a.lane) !== null && _a$lane !== void 0 ? _a$lane : 0) - ((_b$lane = b.lane) !== null && _b$lane !== void 0 ? _b$lane : 0) || a.start - b.start;
-				});
-				for (let i = 3; i < sortedByLane.length; i++) {
-					const o = sortedByLane[i];
-					hiddenDayOverlayIdSet.add(dayOverlayHiddenKey(o.item, dayKey, o.courtId));
-				}
-				const hidden = sortedByLane.slice(3);
-				let minS = Infinity;
-				let maxE = -Infinity;
-				for (const o of cluster) {
-					minS = Math.min(minS, o.start);
-					maxE = Math.max(maxE, o.start + o.span);
-				}
-				const anchor = hidden[0];
-				dayOverlayOverflowPluses.push({
-					key: `${cid}-${minS}-${maxE}-${dayKey}`,
-					courtId: cid,
-					rowTop: anchor.rowTop,
-					rowHeight: anchor.rowHeight,
-					start: minS,
-					span: maxE - minS,
-					plusCount: hidden.length,
-					overflowItems: hidden.map((o) => o.item)
-				});
-			}
-		}
-		return {
-			dayRowHeights: expandedHeights,
-			dayRowTopMap: tops2,
-			overlayBookings: overlays,
-			courtDayDisplayLaneCount,
-			hiddenDayOverlayIdSet,
-			dayOverlayOverflowPluses
-		};
-	}, [
-		visibleCourtRows,
-		dayKey,
-		bookings,
-		hourSlots,
-		slotStepHours
-	]);
+	const { dayRowHeights, overlayBookings, courtDayDisplayLaneCount, hiddenDayOverlayIdSet, dayOverlayOverflowPluses } = useBookingCalendarDayOverlayLayout(visibleCourtRows, dayKey, bookings, hourSlots, slotStepHours);
 	/** 周视图表头对应的 7 个自然日 */
 	const weekDays = useMemo(() => rangeDays(anchorDate), [anchorDate]);
+	/** 资源视图：当月每日一列 */
+	const resourceMonthDays = useMemo(() => monthCalendarDays(anchorDate), [anchorDate]);
 	useMemo(() => new Set(weekDays.map((d) => fmtDate(d))), [weekDays]);
 	const firstTimelineHour = (_hourSlots$ = hourSlots[0]) !== null && _hourSlots$ !== void 0 ? _hourSlots$ : 0;
 	const endTimelineExclusive = hourSlots.length ? hourSlots[hourSlots.length - 1] + slotStepHours : 24;
 	/** 槽位起始小时是否落在当前营业/时间轴配置内 */
-	const isBusinessHour = (h) => isHourInTimelineSlots(h, hourSlots);
+	const isBusinessHour = useCallback((h) => isHourInTimelineSlots(h, hourSlots), [hourSlots]);
+	const dayHourRemaining = useBookingCalendarDayHourRemaining(visibleCourts, dayKey, bookings, hourSlots, slotStepHours, isBusinessHour);
+	const resourceDayHeaderRemaining = useBookingCalendarResourceDayHeaderRemaining(resourceMonthDays, visibleCourts, bookings, hourSlots, slotStepHours);
+	/**
+	* 资源视图：选区是否可触发 Block / Create Booking。
+	* - 任何选中 → SelectionBar 显示「Cancel」。
+	* - 同 court + 连续多天（含单日） → 才显示「Block / Create」按钮。
+	*/
+	const resourceSelectionContiguous = useMemo(() => isResourceSelectionContiguousSameCourt(selectedResourceCells), [selectedResourceCells]);
+	const resourceSelectionBarMeta = useMemo(() => {
+		if (selectedResourceCells.length === 0) return null;
+		return {
+			freePickCount: selectedResourceCells.length,
+			blockPickCount: selectedResourceCells.length,
+			freeAllowsBlockPanel: resourceSelectionContiguous
+		};
+	}, [selectedResourceCells, resourceSelectionContiguous]);
+	/** 日视图与资源视图选中隔离：切换视图时清空另一侧 */
+	useEffect(() => {
+		if (prevViewForSlotIsolationRef.current !== view) {
+			if (view === "day") setSelectedResourceCells([]);
+			if (view === "resource") {
+				setSelectedFreeSlots([]);
+				setSelectedBlockSlots([]);
+			}
+			prevViewForSlotIsolationRef.current = view;
+		}
+	}, [view]);
 	/** 月历每格摘要（占用点、锁台等），供月视图渲染 */
 	const monthDays = useMemo(() => monthGrid(anchorDate, bookings, courts, hourSlots, slotStepHours), [
 		anchorDate,
@@ -235,29 +218,6 @@ function BookingCalendar(props = {}) {
 		hourSlots,
 		slotStepHours
 	]);
-	/** 日视图表头：每个整点列上仍有空的资源数占比（按全部可见资源计，与分组折叠无关） */
-	const dayHourRemaining = 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
-	]);
 	/** 日视图内容区总高度（表头 + 各资源行叠加以 overlay 抬高后的高度） */
 	const dayContentHeight = 56 + dayRowHeights.reduce((sum, h) => sum + h, 0);
 	/** 点击文档空白处关闭锁台面版、溢出浮层、改期确认等面板 */
@@ -281,16 +241,39 @@ function BookingCalendar(props = {}) {
 	/** 锁台面版打开时若选区不再连续同资源则自动收起（避免与表单状态不一致） */
 	useEffect(() => {
 		if (!showBlockPanel) return;
+		if (view === "resource") {
+			if (!resourceSelectionContiguous) setShowBlockPanel(false);
+			return;
+		}
 		if (!isFreeSelectionContiguousSameResource(selectedFreeSlots, slotStepHours)) setShowBlockPanel(false);
 	}, [
 		showBlockPanel,
+		view,
 		selectedFreeSlots,
+		resourceSelectionContiguous,
 		slotStepHours
 	]);
 	/** 打开锁台面版时用当前选中的空闲连续段预填资源与时间范围（仅内置锁台面版） */
 	useEffect(() => {
 		if (props.onBlockedTimePanelRequest) return;
-		if (!showBlockPanel || selectedFreeSlots.length === 0) return;
+		if (!showBlockPanel) return;
+		if (view === "resource") {
+			var _bizHours$, _bizHours;
+			if (!resourceSelectionContiguous) return;
+			const sortedDates = [...selectedResourceCells].map((s) => s.dateKey).sort();
+			const firstDate = sortedDates[0];
+			const lastDate = sortedDates[sortedDates.length - 1];
+			const bizHours = hourSlots.filter((h) => isHourInTimelineSlots(h, hourSlots));
+			const h0 = (_bizHours$ = bizHours[0]) !== null && _bizHours$ !== void 0 ? _bizHours$ : 0;
+			const hLast = (_bizHours = bizHours[bizHours.length - 1]) !== null && _bizHours !== void 0 ? _bizHours : h0;
+			const slotStep = slotStepHours > 0 ? slotStepHours : 1;
+			setBlockResourceId(String(selectedResourceCells[0].courtId));
+			setBlockTimeRange([dayAndHourToDayjs(firstDate, h0), dayAndHourToDayjs(lastDate, hLast + slotStep)]);
+			setBlockFormName(tCal("pisell2.recordBoard.calendar.block.defaultTitle"));
+			setBlockModalNote("");
+			return;
+		}
+		if (selectedFreeSlots.length === 0) return;
 		const g = groupSelectedSlots(selectedFreeSlots, slotStepHours)[0];
 		if (!g) return;
 		setBlockResourceId(String(g.courtId));
@@ -299,8 +282,13 @@ function BookingCalendar(props = {}) {
 		setBlockModalNote("");
 	}, [
 		showBlockPanel,
+		view,
 		selectedFreeSlots,
-		slotStepHours
+		selectedResourceCells,
+		resourceSelectionContiguous,
+		hourSlots,
+		slotStepHours,
+		props.onBlockedTimePanelRequest
 	]);
 	/** 周/月跳入日视图时的短动画标记，超时清除 */
 	useEffect(() => {
@@ -308,47 +296,15 @@ function BookingCalendar(props = {}) {
 		const timer = setTimeout(() => setTransitioningToDay(null), 280);
 		return () => clearTimeout(timer);
 	}, [transitioningToDay]);
-	/** 当前日锚定下，该资源该槽是否在「空闲多选」集合中 */
-	function isFreeSelected(courtId, hour) {
-		return selectedFreeSlots.some((slot) => slot.courtId === courtId && slot.date === dayKey && slot.hour === hour);
-	}
-	/** 当前日锚定下，该资源该槽是否在「锁台多选」集合中 */
-	function isBlockSelected(courtId, hour) {
-		return selectedBlockSlots.some((slot) => slot.courtId === courtId && slot.date === dayKey && slot.hour === hour);
-	}
-	/** 从周/月单元格调起日视图：更新锚定日、可选聚焦资源、记录过渡动画方向 */
-	function goToDayFromCell(day, courtId, source) {
-		setNavDirection(day > anchorDate ? 1 : -1);
-		setTransitioningToDay({ source });
-		/** 周/月只是“跳转查看”，不应把日视图多选状态带过去造成误解（像是系统替用户选了格子） */
-		setSelectedFreeSlots([]);
-		setSelectedBlockSlots([]);
-		commitAnchor(day);
-		setFocusedCourtId(courtId || null);
-		commitView("day");
-	}
+	const goToDayFromCell = useBookingCalendarGoToDayFromCell(anchorDate, commitAnchor, commitView, setNavDirection, setTransitioningToDay, setSelectedFreeSlots, setSelectedBlockSlots, setSelectedResourceCells, setFocusedCourtId);
+	const toggleResourceCell = useBookingCalendarResourceCellToggle(setSelectedResourceCells);
+	const { isFreeSelected, isBlockSelected, toggleSlot } = useBookingCalendarDaySelection(dayKey, bookings, hourSlots, slotStepHours, courts, selectedFreeSlots, selectedBlockSlots, setSelectedFreeSlots, setSelectedBlockSlots);
 	/** 卡片详情：业务若 `onBookingClick` 返回 true 则视为已消费；否则关闭溢出气泡 */
-	function openBookingDetail(item) {
+	const openBookingDetail = useCallback((item) => {
 		var _props$onBookingClick;
 		if (((_props$onBookingClick = props.onBookingClick) === null || _props$onBookingClick === void 0 ? void 0 : _props$onBookingClick.call(props, item)) === true) return;
 		setOverflowPopover(null);
-	}
-	/** 日视图格子点击：空闲槽进多选；锁台槽进锁台多选；已约不动 */
-	function toggleSlot(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]);
-	}
+	}, [props.onBookingClick]);
 	/** 清空空闲与锁台多选 */
 	function deselectAll() {
 		setSelectedFreeSlots([]);
@@ -356,9 +312,27 @@ function BookingCalendar(props = {}) {
 	}
 	/** 将连续空闲选区合并为一条或多条本地预约（演示/未接写接口时） */
 	function createBookingFromSelection() {
-		if (!allowPersist("createBooking")) return;
 		if (selectedFreeSlots.length === 0) return;
-		const newBookings = groupSelectedSlots(selectedFreeSlots, slotStepHours).map((slot, idx) => ({
+		const groups = groupSelectedSlots(selectedFreeSlots, slotStepHours);
+		const host = props.onCreateBookingFromSelection;
+		if (host) {
+			_asyncToGenerator(function* () {
+				try {
+					if ((yield Promise.resolve(host({
+						mode: "day",
+						groups: groups.map((g) => ({
+							courtId: g.courtId,
+							date: g.date,
+							startHour: g.startHour,
+							endHour: g.endHour
+						}))
+					}))) !== false) setSelectedFreeSlots([]);
+				} catch (_unused) {}
+			})();
+			return;
+		}
+		if (!allowPersist("createBooking")) return;
+		const newBookings = groups.map((slot, idx) => ({
 			id: `new-${slot.courtId}-${slot.date}-${slot.startHour}-${idx}`,
 			courtId: slot.courtId,
 			date: slot.date,
@@ -370,17 +344,48 @@ function BookingCalendar(props = {}) {
 		setBookings((prev) => [...newBookings, ...prev]);
 		setSelectedFreeSlots([]);
 	}
-	/** 按多选锁台槽从本地 bookings 中移除对应 block 片段 */
-	function openSelectedBlocks() {
-		if (!allowPersist("removeBlocks")) return;
-		if (selectedBlockSlots.length === 0) return;
-		const selectedSet = new Set(selectedBlockSlots.map((s) => `${s.courtId}-${s.date}-${s.hour}`));
-		setBookings((prev) => prev.filter((item) => {
-			if (item.kind !== "block") return true;
-			getBookingSegmentForDate(item, item.date);
-			return !hourSlots.filter((slotStart) => slotStart >= item.startHour - 1e-9 && slotStart < item.endHour - 1e-9).some((h) => selectedSet.has(`${item.courtId}-${item.date}-${h}`));
-		}));
-		setSelectedBlockSlots([]);
+	/**
+	* 资源视图：连续多天 → 一条跨日整天预约，时间 = 营业开始 → 营业结束。
+	* 单日 → 同样按整天写入。仅在 `resourceSelectionContiguous` 为 true 时执行。
+	*/
+	function createBookingFromResourceSelection() {
+		var _bizHours$2, _bizHours2;
+		if (!resourceSelectionContiguous) return;
+		const sortedDates = [...selectedResourceCells].map((s) => s.dateKey).sort();
+		const firstDate = sortedDates[0];
+		const lastDate = sortedDates[sortedDates.length - 1];
+		const courtId = selectedResourceCells[0].courtId;
+		const bizHours = hourSlots.filter((h) => isHourInTimelineSlots(h, hourSlots));
+		const h0 = (_bizHours$2 = bizHours[0]) !== null && _bizHours$2 !== void 0 ? _bizHours$2 : 0;
+		const endHour = ((_bizHours2 = bizHours[bizHours.length - 1]) !== null && _bizHours2 !== void 0 ? _bizHours2 : h0) + (slotStepHours > 0 ? slotStepHours : 1);
+		const host = props.onCreateBookingFromSelection;
+		if (host) {
+			_asyncToGenerator(function* () {
+				try {
+					if ((yield Promise.resolve(host({
+						mode: "resource",
+						courtId,
+						dates: sortedDates,
+						startHour: h0,
+						endHour
+					}))) !== false) setSelectedResourceCells([]);
+				} catch (_unused2) {}
+			})();
+			return;
+		}
+		if (!allowPersist("createBooking")) return;
+		const newBooking = {
+			id: `new-${courtId}-${firstDate}-${Date.now()}`,
+			courtId,
+			date: firstDate,
+			endDate: lastDate !== firstDate ? lastDate : void 0,
+			startHour: h0,
+			endHour,
+			name: tCal("pisell2.recordBoard.calendar.common.newBookingName"),
+			kind: "booking"
+		};
+		setBookings((prev) => [newBooking, ...prev]);
+		setSelectedResourceCells([]);
 	}
 	/** 屏蔽：宿主 lock 弹窗，或内置锁台面版 */
 	const handleOpenBlockPanelFromSelection = useCallback(_asyncToGenerator(function* () {
@@ -389,20 +394,21 @@ function BookingCalendar(props = {}) {
 		if (!g) return;
 		if (props.onBlockedTimePanelRequest) {
 			try {
+				const slotsPayload = selectedFreeSlots.map((s) => {
+					const slot = {
+						courtId: s.courtId,
+						date: s.date,
+						hour: s.hour
+					};
+					const extra = s;
+					if (extra.court !== void 0 && extra.court !== "") slot.court = extra.court;
+					return slot;
+				});
 				const payload = {
 					slotStepHours,
 					slotStepMinutes: resolvedSlotMinutes,
-					dayKey,
-					selectedFreeSlots: selectedFreeSlots.map((s) => {
-						const slot = {
-							courtId: s.courtId,
-							date: s.date,
-							hour: s.hour
-						};
-						const extra = s;
-						if (extra.court !== void 0 && extra.court !== "") slot.court = extra.court;
-						return slot;
-					}),
+					dayKey: g.date,
+					selectedFreeSlots: slotsPayload,
 					mergedRange: {
 						courtId: g.courtId,
 						date: g.date,
@@ -411,7 +417,7 @@ function BookingCalendar(props = {}) {
 					}
 				};
 				if ((yield props.onBlockedTimePanelRequest(payload)) !== false) setSelectedFreeSlots([]);
-			} catch (_unused) {}
+			} catch (_unused3) {}
 			return;
 		}
 		setShowBlockPanel(true);
@@ -419,7 +425,56 @@ function BookingCalendar(props = {}) {
 		selectedFreeSlots,
 		slotStepHours,
 		resolvedSlotMinutes,
-		dayKey,
+		props.onBlockedTimePanelRequest
+	]);
+	/**
+	* 资源视图：仅在「同 court + 连续多天」时打开 Block 面板，按整天预填资源 + 跨日时间范围。
+	*/
+	const handleOpenBlockPanelFromResource = useCallback(_asyncToGenerator(function* () {
+		var _bizHours$3, _bizHours3;
+		if (!resourceSelectionContiguous) return;
+		const sortedDates = [...selectedResourceCells].map((s) => s.dateKey).sort();
+		const firstDate = sortedDates[0];
+		const lastDate = sortedDates[sortedDates.length - 1];
+		const courtId = selectedResourceCells[0].courtId;
+		const court = courts.find((c) => c.id === courtId);
+		const bizHours = hourSlots.filter((h) => isHourInTimelineSlots(h, hourSlots));
+		const h0 = (_bizHours$3 = bizHours[0]) !== null && _bizHours$3 !== void 0 ? _bizHours$3 : 0;
+		const hLast = (_bizHours3 = bizHours[bizHours.length - 1]) !== null && _bizHours3 !== void 0 ? _bizHours3 : h0;
+		const slotStep = slotStepHours > 0 ? slotStepHours : 1;
+		const startHour = h0;
+		const endHour = hLast + slotStep;
+		if (props.onBlockedTimePanelRequest) {
+			try {
+				const payload = {
+					slotStepHours,
+					slotStepMinutes: resolvedSlotMinutes,
+					dayKey: firstDate,
+					selectedFreeSlots: sortedDates.map((d) => _objectSpread2({
+						courtId,
+						date: d,
+						hour: startHour
+					}, (court === null || court === void 0 ? void 0 : court.name) ? { court: court.name } : {})),
+					mergedRange: {
+						courtId,
+						date: firstDate,
+						endDate: lastDate !== firstDate ? lastDate : void 0,
+						startHour,
+						endHour
+					}
+				};
+				if ((yield props.onBlockedTimePanelRequest(payload)) !== false) setSelectedResourceCells([]);
+			} catch (_unused4) {}
+			return;
+		}
+		setShowBlockPanel(true);
+	}), [
+		selectedResourceCells,
+		resourceSelectionContiguous,
+		hourSlots,
+		slotStepHours,
+		courts,
+		resolvedSlotMinutes,
 		props.onBlockedTimePanelRequest
 	]);
 	/** 提交锁台：优先走 `onBlockedTimeSave`；否则写入本地 block 片段 */
@@ -458,6 +513,7 @@ function BookingCalendar(props = {}) {
 					if ((yield props.onBlockedTimeSave(payload)) === false) return;
 					setShowBlockPanel(false);
 					setSelectedFreeSlots([]);
+					setSelectedResourceCells([]);
 					setBlockModalNote("");
 				} finally {
 					setBlockSaving(false);
@@ -484,18 +540,19 @@ function BookingCalendar(props = {}) {
 			if (!allowPersist("createBlock")) return;
 			setBookings((prev) => [nextBlock, ...prev]);
 			setSelectedFreeSlots([]);
+			setSelectedResourceCells([]);
 			setShowBlockPanel(false);
 			setBlockModalNote("");
 		});
 		return _saveBlockedTime.apply(this, arguments);
 	}
 	/** 拖拽改期松手：宿主接管改约，或弹出内置确认框 */
-	function handleDropMove(targetCourtId, targetDate, targetHour) {
+	const handleDropMove = useCallback((targetCourtId, targetDate, targetHour) => {
 		if (!draggingItem) return;
 		const duration = draggingItem.endHour - draggingItem.startHour;
 		const nextStart = targetHour;
 		const nextEnd = targetHour + duration;
-		if (!isBusinessHour(nextStart) || nextEnd > endTimelineExclusive) return;
+		if (!isHourInTimelineSlots(nextStart, hourSlots) || nextEnd > endTimelineExclusive) return;
 		const targetCourt = targetCourtId !== null && targetCourtId !== void 0 ? targetCourtId : draggingItem.courtId;
 		const itemSnapshot = draggingItem;
 		const draft = {
@@ -518,12 +575,17 @@ function BookingCalendar(props = {}) {
 			targetHour
 		});
 		setMoveDraft(draft);
-	}
+	}, [
+		draggingItem,
+		hourSlots,
+		endTimelineExclusive,
+		props.onBookingMoveRequest
+	]);
 	/** 周/月格 drop：保持原开始小时，仅换日或资源 */
-	function handleGridDropMove(targetDate, targetCourtId = null) {
+	const handleGridDropMove = useCallback((targetDate, targetCourtId = null) => {
 		if (!draggingItem || draggingItem.kind === "block") return;
 		handleDropMove(targetCourtId !== null && targetCourtId !== void 0 ? targetCourtId : draggingItem.courtId, targetDate, draggingItem.startHour);
-	}
+	}, [draggingItem, handleDropMove]);
 	/** 确认改期：在 bookings 中平移该条的起止小时与 court/date */
 	function confirmMove() {
 		if (!moveConfirm || !moveDraft) return;
@@ -582,6 +644,29 @@ function BookingCalendar(props = {}) {
 		overflowListModal,
 		setOverflowListModal,
 		overflowPanelRef
+	}), view === "resource" && /* @__PURE__ */ React.createElement(BookingCalendarResourceView, {
+		calendarProps: props,
+		isLight,
+		anchorDate,
+		monthDays: resourceMonthDays,
+		slotColWidth: resourceViewSlotColWidth,
+		bookings,
+		hourSlots,
+		slotStepHours,
+		visibleCourts,
+		visibleCourtRows,
+		handleGridDropMove,
+		openBookingDetail,
+		setDraggingItem,
+		setCollapsedGroups,
+		overflowPopover,
+		setOverflowPopover,
+		setOverflowListModal,
+		overflowPanelRef,
+		resourceMonthScrollToTodayToken,
+		resourceDayHeaderRemaining,
+		toggleResourceCell,
+		selectedResourceCells
 	}), view === "day" && /* @__PURE__ */ React.createElement(BookingCalendarDayView, {
 		calendarProps: props,
 		isLight,
@@ -619,73 +704,38 @@ function BookingCalendar(props = {}) {
 		setOverflowListModal,
 		selectedFreeSlots,
 		selectedBlockSlots,
-		deselectAll,
-		openSelectedBlocks,
-		onOpenBlockPanel: handleOpenBlockPanelFromSelection,
-		createBookingFromSelection,
 		focusedCourtId,
 		dayTimelineScrollToNowToken
-	}))), showBlockPanel && !props.onBlockedTimePanelRequest && selectedFreeSlots.length > 0 && isFreeSelectionContiguousSameResource(selectedFreeSlots, slotStepHours) && /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 z-50 bg-black/55 backdrop-blur-sm flex items-end md:items-center justify-center p-2 md:p-4" }, /* @__PURE__ */ React.createElement("div", {
-		ref: blockPanelRef,
-		className: `w-full max-w-[720px] max-h-[92vh] overflow-y-auto rounded-t-3xl md:rounded-3xl border p-4 md:p-6 shadow-2xl ${isLight ? "theme-panel theme-border soft-shadow" : "border-zinc-700 bg-[#121217]"}`
-	}, /* @__PURE__ */ React.createElement("div", { className: "mb-4 flex items-center justify-between gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "text-xl font-semibold" }, tCal("pisell2.recordBoard.calendar.block.panelTitle")), /* @__PURE__ */ React.createElement("button", {
-		type: "button",
-		"aria-label": tCal("pisell2.recordBoard.calendar.block.closeAria"),
-		onClick: () => setShowBlockPanel(false),
-		className: `rounded-xl p-2 ${isLight ? "btn-neutral" : "border border-zinc-700 text-zinc-300"}`
-	}, /* @__PURE__ */ React.createElement(CloseOutlined, { style: { fontSize: 20 } }))), /* @__PURE__ */ React.createElement("div", { className: `space-y-4 rounded-2xl border p-4 ${isLight ? "theme-panel-alt theme-border" : "border-zinc-700 bg-[#171820]"}` }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: `mb-2 block text-sm ${isLight ? "theme-text-muted" : "text-zinc-400"}` }, tCal("pisell2.recordBoard.calendar.block.fieldTitle")), /* @__PURE__ */ React.createElement("input", {
-		value: blockFormName,
-		onChange: (e) => setBlockFormName(e.target.value),
-		placeholder: tCal("pisell2.recordBoard.calendar.block.placeholderTitle"),
-		className: `w-full rounded-xl px-3 py-2 outline-none ${isLight ? "theme-input theme-text" : "border border-zinc-700 bg-[#111218] text-white"}`
-	})), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: `mb-2 block text-sm ${isLight ? "theme-text-muted" : "text-zinc-400"}` }, "备注"), /* @__PURE__ */ React.createElement("input", {
-		value: blockModalNote,
-		onChange: (e) => setBlockModalNote(e.target.value),
-		placeholder: "选填",
-		className: `w-full rounded-xl px-3 py-2 outline-none ${isLight ? "theme-input theme-text" : "border border-zinc-700 bg-[#111218] text-white"}`
-	})), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: `mb-2 block text-sm ${isLight ? "theme-text-muted" : "text-zinc-400"}` }, tCal("pisell2.recordBoard.calendar.block.fieldResource")), /* @__PURE__ */ React.createElement("select", {
-		value: blockResourceId,
-		onChange: (e) => setBlockResourceId(e.target.value),
-		className: `w-full rounded-xl px-3 py-2 outline-none ${isLight ? "theme-input theme-text" : "border border-zinc-700 bg-[#111218] text-white"}`
-	}, /* @__PURE__ */ React.createElement("option", { value: "" }, tCal("pisell2.recordBoard.calendar.block.noResource")), visibleCourts.map((c) => /* @__PURE__ */ React.createElement("option", {
-		key: c.id,
-		value: String(c.id)
-	}, c.name)))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: `mb-2 block text-sm ${isLight ? "theme-text-muted" : "text-zinc-400"}` }, tCal("pisell2.recordBoard.calendar.block.fieldTimeRange")), /* @__PURE__ */ React.createElement(RangePicker, {
-		style: { width: "100%" },
-		showTime: {
-			format: "HH:mm",
-			minuteStep: resolvedSlotMinutes >= 60 ? 60 : Math.max(1, resolvedSlotMinutes)
-		},
-		format: "YYYY-MM-DD HH:mm",
-		value: blockTimeRange !== null && blockTimeRange !== void 0 ? blockTimeRange : void 0,
-		onChange: (v) => {
-			var _ref;
-			return setBlockTimeRange((_ref = v) !== null && _ref !== void 0 ? _ref : null);
-		}
-	}))), /* @__PURE__ */ React.createElement("div", { className: "mt-6 flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3" }, /* @__PURE__ */ React.createElement("button", {
-		type: "button",
-		disabled: blockSaving,
-		onClick: () => setShowBlockPanel(false),
-		className: `rounded-xl px-4 py-2 ${isLight ? "btn-neutral" : "border border-zinc-700 text-zinc-300"}`
-	}, tCal("pisell2.recordBoard.calendar.common.cancel")), /* @__PURE__ */ React.createElement("button", {
-		type: "button",
-		disabled: blockSaving,
-		onClick: () => void saveBlockedTime(),
-		className: `rounded-xl px-5 py-3 text-sm font-semibold disabled:opacity-50 ${isLight ? "btn-brand" : "bg-violet-600 text-white"}`
-	}, blockSaving ? tCal("pisell2.recordBoard.calendar.common.saving") : tCal("pisell2.recordBoard.calendar.common.save"))))), overflowListModal && /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 z-[69] bg-black/45 backdrop-blur-sm flex items-center justify-center p-4" }, /* @__PURE__ */ React.createElement("div", {
-		ref: overflowPanelRef,
-		className: `flex w-full max-w-[520px] max-h-[72vh] flex-col overflow-hidden rounded-3xl border p-5 shadow-2xl ${isLight ? "theme-panel theme-border soft-shadow" : "border-zinc-700 bg-[#121217]"}`
-	}, /* @__PURE__ */ React.createElement("div", { className: "mb-4 flex shrink-0 items-start justify-between" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-xl font-semibold" }, tCal("pisell2.recordBoard.calendar.overflow.bookingsForDay")), /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-sm text-zinc-400" }, overflowListModal.title)), /* @__PURE__ */ React.createElement("button", {
-		onClick: () => setOverflowListModal(null),
-		className: "rounded-xl border border-zinc-700 px-3 py-2 text-zinc-300"
-	}, tCal("pisell2.recordBoard.calendar.common.close"))), /* @__PURE__ */ React.createElement("div", { className: "min-h-0 flex-1 overflow-hidden px-0.5" }, /* @__PURE__ */ React.createElement(OverflowListModalVirtualList, {
-		items: overflowListModal.items,
-		dateKey: overflowListModal.date,
-		listWidth: 468,
-		onPickItem: openBookingDetail,
+	}))), view === "day" && (selectedFreeSlots.length > 0 || selectedBlockSlots.length > 0) || view === "resource" && selectedResourceCells.length > 0 ? /* @__PURE__ */ React.createElement(BookingCalendarDaySelectionBar, {
+		slotStepHours,
+		selectedFreeSlots: view === "resource" ? [] : selectedFreeSlots,
+		resourceSelectionSummary: view === "resource" ? resourceSelectionBarMeta : void 0,
+		deselectAll: view === "resource" ? () => setSelectedResourceCells([]) : deselectAll,
+		onOpenBlockPanel: view === "resource" ? handleOpenBlockPanelFromResource : handleOpenBlockPanelFromSelection,
+		createBookingFromSelection: view === "resource" ? createBookingFromResourceSelection : createBookingFromSelection
+	}) : null, showBlockPanel && !props.onBlockedTimePanelRequest && (view === "resource" ? resourceSelectionContiguous : selectedFreeSlots.length > 0 && isFreeSelectionContiguousSameResource(selectedFreeSlots, slotStepHours)) && /* @__PURE__ */ React.createElement(BookingCalendarBlockPanel, {
+		blockPanelRef,
+		isLight,
+		blockFormName,
+		setBlockFormName,
+		blockModalNote,
+		setBlockModalNote,
+		blockResourceId,
+		setBlockResourceId,
+		blockTimeRange,
+		setBlockTimeRange,
+		resolvedSlotMinutes,
+		visibleCourts,
+		blockSaving,
+		onClose: () => setShowBlockPanel(false),
+		onSave: saveBlockedTime
+	}), overflowListModal && /* @__PURE__ */ React.createElement(BookingCalendarOverflowListLayer, {
+		overflowPanelRef,
+		isLight,
+		modal: overflowListModal,
 		onClose: () => setOverflowListModal(null),
-		showStatusUi: Boolean(overflowListModal.scope && String(overflowListModal.scope).startsWith("day-lane-overflow-"))
-	})))), moveConfirm && /* @__PURE__ */ React.createElement(MoveConfirmModal, {
+		onPickItem: openBookingDetail
+	}), moveConfirm && /* @__PURE__ */ React.createElement(MoveConfirmModal, {
 		moveConfirm,
 		moveDraft,
 		setMoveDraft,