@pisell/materials 1.8.41 → 1.8.42

package/lib/components/pisellRecordBoard/utils/recordBoardPhoneGrid.js

@@ -0,0 +1,50 @@
+const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
+const require_objectSpread2 = require("../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
+const require_objectWithoutProperties = require("../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js");
+const require_recordBoardColumns = require("./recordBoardColumns.js");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+//#region src/components/pisellRecordBoard/utils/recordBoardPhoneGrid.ts
+const _excluded = ["fixed"];
+/** Grid 根节点在 `layoutVariant="phone"` 时追加的 class，用于收紧单元格 padding 等 */
+const RECORD_BOARD_PHONE_GRID_CLASS = "pisell-record-board-grid--phone";
+/**
+* 手机 Table：收窄列宽并去掉 fixed，供 RecordBoard Grid 在 layoutVariant=phone 时统一调用。
+* 业务可通过 grid.phoneColumnWidthCaps / phoneColumnWidthRatioByKey 覆盖特定列。
+*/
+function adaptColumnsForPhoneLayout(columns, options) {
+	var _options$defaultWidth;
+	const defaultWidthRatio = (_options$defaultWidth = options === null || options === void 0 ? void 0 : options.defaultWidthRatio) !== null && _options$defaultWidth !== void 0 ? _options$defaultWidth : 5 / 6;
+	const unsetFixed = (options === null || options === void 0 ? void 0 : options.unsetFixed) !== false;
+	return columns.map((column) => {
+		const key = require_recordBoardColumns.getRecordBoardColumnKey(column);
+		let next = require_objectSpread2._objectSpread2({}, column);
+		if (unsetFixed && next.fixed != null && next.fixed !== false) {
+			const { fixed: _fixed } = next;
+			next = require_objectWithoutProperties._objectWithoutProperties(next, _excluded);
+		}
+		if (typeof next.width === "number" && Number.isFinite(next.width)) {
+			var _options$widthRatioBy, _options$widthRatioBy2, _options$widthCapsByK;
+			const ratio = (_options$widthRatioBy = options === null || options === void 0 || (_options$widthRatioBy2 = options.widthRatioByKey) === null || _options$widthRatioBy2 === void 0 ? void 0 : _options$widthRatioBy2[key]) !== null && _options$widthRatioBy !== void 0 ? _options$widthRatioBy : defaultWidthRatio;
+			let width = Math.round(next.width * ratio);
+			const cap = options === null || options === void 0 || (_options$widthCapsByK = options.widthCapsByKey) === null || _options$widthCapsByK === void 0 ? void 0 : _options$widthCapsByK[key];
+			if (cap != null && Number.isFinite(cap)) width = Math.min(cap, width);
+			next = require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, next), {}, { width });
+		}
+		return next;
+	});
+}
+/**
+* 手机 Table：`scroll.x: 'max-content'` 会按内容撑出比「列宽之和」更宽的滚动区域，
+* 列宽已被 adaptColumnsForPhoneLayout 收窄后仍保留 max-content 时，右侧会出现可滚动的空白。
+* 与预约 buildReservationMobileTableGridConfig 去掉横向 scroll 的策略一致，改为数值宽度。
+*/
+function resolveRecordBoardPhoneScrollX(scrollX, sumColumnWidths, options) {
+	var _options$selectionCol;
+	if (scrollX !== "max-content" && scrollX !== "maxContent") return scrollX;
+	return sumColumnWidths + ((_options$selectionCol = options === null || options === void 0 ? void 0 : options.selectionColumnWidth) !== null && _options$selectionCol !== void 0 ? _options$selectionCol : 0);
+}
+//#endregion
+exports.RECORD_BOARD_PHONE_GRID_CLASS = RECORD_BOARD_PHONE_GRID_CLASS;
+exports.adaptColumnsForPhoneLayout = adaptColumnsForPhoneLayout;
+exports.resolveRecordBoardPhoneScrollX = resolveRecordBoardPhoneScrollX;

package/lib/components/pisellReservationSchedule/PisellReservationSchedule.js

@@ -19,8 +19,14 @@ require("./PisellReservationSchedule.less");
 const I18N_TODAY = "pisell-reservation-schedule.today";
 const I18N_PREV = "pisell-reservation-schedule.prev";
 const I18N_NEXT = "pisell-reservation-schedule.next";
+const I18N_PREV_WEEK = "pisell-reservation-schedule.prev-week";
+const I18N_NEXT_WEEK = "pisell-reservation-schedule.next-week";
+const I18N_PREV_MONTH = "pisell-reservation-schedule.prev-month";
+const I18N_NEXT_MONTH = "pisell-reservation-schedule.next-month";
 const I18N_PICK_DATE = "pisell-reservation-schedule.pick-date";
 const I18N_PICK_DATE_TITLE = "pisell-reservation-schedule.pick-date-title";
+const I18N_PICK_WEEK_TITLE = "pisell-reservation-schedule.pick-week-title";
+const I18N_PICK_MONTH_TITLE = "pisell-reservation-schedule.pick-month-title";
 function parseDay(input, fallback) {
 	if (input == null) return fallback.startOf("day");
 	const d = (0, dayjs.default)(input);
@@ -31,12 +37,18 @@ function toDayjsLocale(engineLocale) {
 	if (engineLocale === "zh-HK") return "zh-hk";
 	return "zh-cn";
 }
+/** 与 RecordBoard 日历 `startOfWeek` 一致：周一起算 */
+function startOfWeekMonday(d) {
+	const day = d.day();
+	const diff = day === 0 ? -6 : 1 - day;
+	return d.add(diff, "day").startOf("day");
+}
 /**
 * 营业日导航条：上一日、中间日期文案、下一日（深色条样式，适配预约顶栏）
 */
 function PisellReservationSchedule(props) {
 	var _context$engine;
-	const { value: valueProp, onChange, defaultValue, minDate: minDateProp, maxDate: maxDateProp, navigationLocked = false, navigationLockedDisplay = "full", className, style } = props;
+	const { value: valueProp, onChange, defaultValue, minDate: minDateProp, maxDate: maxDateProp, navigationLocked = false, navigationLockedDisplay = "full", navigationUnit = "day", className, style } = props;
 	const context = require_useEngineContext.default();
 	const engineLocale = (context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 ? void 0 : _context$engine.locale) || "en";
 	_pisell_utils.locales.init(require_locales.default, engineLocale);
@@ -58,12 +70,29 @@ function PisellReservationSchedule(props) {
 		minDate,
 		maxDate
 	]);
-	const prevDisabled = navigationLocked || (minDate ? value.isSame(minDate, "day") : false);
-	const nextDisabled = navigationLocked || (maxDate ? value.isSame(maxDate, "day") : false);
+	const prevTarget = (0, react.useMemo)(() => {
+		if (navigationUnit === "month") return value.subtract(1, "month");
+		if (navigationUnit === "week") return value.subtract(7, "day");
+		return value.subtract(1, "day");
+	}, [navigationUnit, value]);
+	const nextTarget = (0, react.useMemo)(() => {
+		if (navigationUnit === "month") return value.add(1, "month");
+		if (navigationUnit === "week") return value.add(7, "day");
+		return value.add(1, "day");
+	}, [navigationUnit, value]);
+	const prevDisabled = navigationLocked || (minDate ? prevTarget.isBefore(minDate, "day") : false);
+	const nextDisabled = navigationLocked || (maxDate ? nextTarget.isAfter(maxDate, "day") : false);
 	const [calendarOpen, setCalendarOpen] = (0, react.useState)(false);
 	const centerLabel = (0, react.useMemo)(() => {
 		const djLoc = toDayjsLocale(engineLocale);
 		const dl = value.locale(djLoc);
+		if (navigationUnit === "month") return dl.format(djLoc === "en" ? "MMM YYYY" : "YYYY年M月");
+		if (navigationUnit === "week") {
+			const ws = startOfWeekMonday(value);
+			const we = ws.add(6, "day");
+			if (djLoc === "en") return `${ws.format("MMM D")} – ${we.format("MMM D, YYYY")}`;
+			return `${ws.format("M月D日")} – ${we.format("M月D日")}`;
+		}
 		const isToday = value.isSame(today, "day");
 		const todayText = _pisell_utils.locales.getText(I18N_TODAY);
 		const dateStr = djLoc === "en" ? dl.format("MMM D") : dl.format("M月D日");
@@ -76,8 +105,13 @@ function PisellReservationSchedule(props) {
 	}, [
 		value,
 		today,
-		engineLocale
+		engineLocale,
+		navigationUnit
 	]);
+	const prevAria = navigationUnit === "month" ? _pisell_utils.locales.getText(I18N_PREV_MONTH) : navigationUnit === "week" ? _pisell_utils.locales.getText(I18N_PREV_WEEK) : _pisell_utils.locales.getText(I18N_PREV);
+	const nextAria = navigationUnit === "month" ? _pisell_utils.locales.getText(I18N_NEXT_MONTH) : navigationUnit === "week" ? _pisell_utils.locales.getText(I18N_NEXT_WEEK) : _pisell_utils.locales.getText(I18N_NEXT);
+	const pickAria = navigationUnit === "month" ? _pisell_utils.locales.getText(I18N_PICK_MONTH_TITLE) : navigationUnit === "week" ? _pisell_utils.locales.getText(I18N_PICK_WEEK_TITLE) : _pisell_utils.locales.getText(I18N_PICK_DATE);
+	const modalTitle = navigationUnit === "month" ? _pisell_utils.locales.getText(I18N_PICK_MONTH_TITLE) : navigationUnit === "week" ? _pisell_utils.locales.getText(I18N_PICK_WEEK_TITLE) : _pisell_utils.locales.getText(I18N_PICK_DATE_TITLE);
 	/** 场控等场景：不要整套只读导航条，仅展示日期文案 */
 	if (navigationLocked && navigationLockedDisplay === "labelOnly") return /* @__PURE__ */ react.default.createElement("div", {
 		className: (0, classnames.default)("pisell-reservation-schedule", "pisell-reservation-schedule--label-only", className),
@@ -92,11 +126,11 @@ function PisellReservationSchedule(props) {
 	}, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-reservation-schedule-inner" }, /* @__PURE__ */ react.default.createElement("button", {
 		type: "button",
 		className: "pisell-reservation-schedule-btn",
-		"aria-label": _pisell_utils.locales.getText(I18N_PREV),
+		"aria-label": prevAria,
 		disabled: prevDisabled,
 		onClick: () => {
 			if (navigationLocked) return;
-			emit(value.subtract(1, "day"));
+			emit(prevTarget);
 		}
 	}, /* @__PURE__ */ react.default.createElement(_pisell_icon_es_ChevronLeft.default, { className: "pisell-reservation-schedule-btn-icon" })), navigationLocked ? /* @__PURE__ */ react.default.createElement("span", {
 		className: "pisell-reservation-schedule-label pisell-reservation-schedule-label--static",
@@ -104,21 +138,21 @@ function PisellReservationSchedule(props) {
 	}, centerLabel) : /* @__PURE__ */ react.default.createElement("button", {
 		type: "button",
 		className: "pisell-reservation-schedule-label pisell-reservation-schedule-label-trigger",
-		"aria-label": _pisell_utils.locales.getText(I18N_PICK_DATE),
+		"aria-label": pickAria,
 		"aria-haspopup": "dialog",
 		"aria-expanded": calendarOpen,
 		onClick: () => setCalendarOpen(true)
 	}, centerLabel), /* @__PURE__ */ react.default.createElement("button", {
 		type: "button",
 		className: "pisell-reservation-schedule-btn",
-		"aria-label": _pisell_utils.locales.getText(I18N_NEXT),
+		"aria-label": nextAria,
 		disabled: nextDisabled,
 		onClick: () => {
 			if (navigationLocked) return;
-			emit(value.add(1, "day"));
+			emit(nextTarget);
 		}
 	}, /* @__PURE__ */ react.default.createElement(_pisell_icon_es_ChevronRight.default, { className: "pisell-reservation-schedule-btn-icon" }))), /* @__PURE__ */ react.default.createElement(antd.Modal, {
-		title: _pisell_utils.locales.getText(I18N_PICK_DATE_TITLE),
+		title: modalTitle,
 		open: !navigationLocked && calendarOpen,
 		onCancel: () => setCalendarOpen(false),
 		footer: null,
@@ -126,15 +160,33 @@ function PisellReservationSchedule(props) {
 		centered: true,
 		destroyOnClose: true,
 		wrapClassName: "pisell-reservation-schedule-date-modal"
-	}, /* @__PURE__ */ react.default.createElement(_pisell_date_picker.DateCalendar, {
+	}, navigationUnit === "month" ? /* @__PURE__ */ react.default.createElement("div", { className: "pisell-reservation-schedule-month-picker-wrap" }, /* @__PURE__ */ react.default.createElement(_pisell_date_picker.DateCalendar, {
+		value,
+		views: ["year", "month"],
+		openTo: "month",
+		minDate,
+		maxDate,
+		shouldDisableMonth: (month) => {
+			const start = (0, dayjs.default)(month).startOf("month");
+			if (minDate && start.isBefore(minDate.startOf("month"))) return true;
+			if (maxDate && start.isAfter(maxDate.startOf("month"))) return true;
+			return false;
+		},
+		onChange: (d) => {
+			if (!d) return;
+			emit((0, dayjs.default)(d).startOf("month"));
+			setCalendarOpen(false);
+		}
+	})) : /* @__PURE__ */ react.default.createElement(_pisell_date_picker.DateCalendar, {
 		value,
 		minDate,
 		maxDate,
 		onChange: (d) => {
-			if (d) {
-				emit((0, dayjs.default)(d));
-				setCalendarOpen(false);
-			}
+			if (!d) return;
+			const picked = (0, dayjs.default)(d);
+			if (navigationUnit === "week") emit(startOfWeekMonday(picked));
+			else emit(picked);
+			setCalendarOpen(false);
 		}
 	})));
 }

package/lib/components/pisellReservationSchedule/PisellReservationSchedule.less

@@ -82,6 +82,15 @@
   cursor: default;
 }
 
+/** 弹窗内按月选择：宽度铺满，面板挂载在 Modal 内容区避免层级异常 */
+.pisell-reservation-schedule-month-picker-wrap {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  min-width: 280px;
+  padding: 4px 0 8px;
+}
+
 .pisell-reservation-schedule-label-trigger {
   margin: 0;
   border: none;
@@ -103,3 +112,17 @@
     border-radius: 4px;
   }
 }
+
+.pisell-reservation-schedule-date-modal {
+  .pisell-lowcode-modal-content {
+    padding: 0;
+  }
+
+  .pisell-lowcode-modal-header {
+    padding: 12px 16px;
+  }
+
+  .pisell-lowcode-modal-body {
+    padding: 4px 8px 8px;
+  }
+}

package/lib/components/pisellReservationSchedule/locales.js

@@ -5,22 +5,40 @@ var locales_default = {
 		"pisell-reservation-schedule.today": "Today",
 		"pisell-reservation-schedule.prev": "Previous day",
 		"pisell-reservation-schedule.next": "Next day",
+		"pisell-reservation-schedule.prev-week": "Previous week",
+		"pisell-reservation-schedule.next-week": "Next week",
+		"pisell-reservation-schedule.prev-month": "Previous month",
+		"pisell-reservation-schedule.next-month": "Next month",
 		"pisell-reservation-schedule.pick-date": "Pick a date",
-		"pisell-reservation-schedule.pick-date-title": "Pick a date"
+		"pisell-reservation-schedule.pick-date-title": "Pick a date",
+		"pisell-reservation-schedule.pick-week-title": "Pick a week",
+		"pisell-reservation-schedule.pick-month-title": "Pick a month"
 	},
 	"zh-CN": {
 		"pisell-reservation-schedule.today": "今天",
 		"pisell-reservation-schedule.prev": "上一天",
 		"pisell-reservation-schedule.next": "下一天",
+		"pisell-reservation-schedule.prev-week": "上一周",
+		"pisell-reservation-schedule.next-week": "下一周",
+		"pisell-reservation-schedule.prev-month": "上一月",
+		"pisell-reservation-schedule.next-month": "下一月",
 		"pisell-reservation-schedule.pick-date": "选择日期",
-		"pisell-reservation-schedule.pick-date-title": "选择日期"
+		"pisell-reservation-schedule.pick-date-title": "选择日期",
+		"pisell-reservation-schedule.pick-week-title": "选择周",
+		"pisell-reservation-schedule.pick-month-title": "选择月份"
 	},
 	"zh-HK": {
 		"pisell-reservation-schedule.today": "今天",
 		"pisell-reservation-schedule.prev": "上一日",
 		"pisell-reservation-schedule.next": "下一日",
+		"pisell-reservation-schedule.prev-week": "上一週",
+		"pisell-reservation-schedule.next-week": "下一週",
+		"pisell-reservation-schedule.prev-month": "上一月",
+		"pisell-reservation-schedule.next-month": "下一月",
 		"pisell-reservation-schedule.pick-date": "選擇日期",
-		"pisell-reservation-schedule.pick-date-title": "選擇日期"
+		"pisell-reservation-schedule.pick-date-title": "選擇日期",
+		"pisell-reservation-schedule.pick-week-title": "選擇週",
+		"pisell-reservation-schedule.pick-month-title": "選擇月份"
 	}
 };
 //#endregion

package/lib/components/pisellReservationSchedule/types.d.ts

@@ -46,6 +46,11 @@ interface PisellReservationScheduleProps {
    * @default 'full'
    */
   navigationLockedDisplay?: 'full' | 'labelOnly';
+  /**
+   * 顶栏切换步长：`day` 按日；`week` 按周；`month` 按月（与 RecordBoard 日历视图联动）。
+   * @default 'day'
+   */
+  navigationUnit?: 'day' | 'week' | 'month';
 }
 //#endregion
 export { PisellReservationScheduleProps, ReservationScheduleValue };

package/lib/components/pisellReservationScheduleBand/PisellReservationScheduleBand.js

@@ -2,6 +2,7 @@ const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_objectSpread2 = require("../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
 const require_PisellTimeNavigator = require("../pisellTimeNavigator/PisellTimeNavigator.js");
 const require_PisellReservationSchedule = require("../pisellReservationSchedule/PisellReservationSchedule.js");
+const require_formatScheduleAtLabel = require("./utils/formatScheduleAtLabel.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let antd = require("antd");
@@ -21,7 +22,7 @@ function withTimeOnDate(dateDay, timeSource) {
 * 预约顶栏组合：营业日切换 + 锚定到选中日的时间导航轴
 */
 function PisellReservationScheduleBand(props) {
-	const { value: valueProp, onChange, defaultValue, scheduleProps, timeNavigatorProps, scheduleStartSlot, scheduleEndSlot, scheduleAfterDateSlot, dataLoading = false, dataLoadingTip, className, style } = props;
+	const { value: valueProp, onChange, defaultValue, scheduleProps, timeNavigatorProps, scheduleStartSlot, scheduleEndSlot, scheduleAfterDateSlot, dataLoading = false, dataLoadingTip, hideTimeNavigator = false, className, style, scheduleRowClassName } = props;
 	const isControlled = valueProp !== void 0;
 	const [internal, setInternal] = (0, react.useState)(() => {
 		var _defaultValue$date, _defaultValue$at;
@@ -49,11 +50,13 @@ function PisellReservationScheduleBand(props) {
 		});
 	}, [emit, effective.at]);
 	const handleTimeChange = (0, react.useCallback)((t) => {
+		/** 顶栏 date 保持营业日锚定日；跨自然日时刻由 formatScheduleAtLabel 展示为「MM-DD HH:mm」 */
 		emit({
 			date: startOfDay(effective.date),
 			at: t
 		});
 	}, [emit, effective.date]);
+	const formatTimeLabel = (0, react.useCallback)((t) => require_formatScheduleAtLabel.formatScheduleAtLabel(t, effective.date), [effective.date]);
 	return /* @__PURE__ */ react.default.createElement("div", {
 		className: (0, classnames.default)("pisell-reservation-schedule-band", dataLoading && "pisell-reservation-schedule-band--data-loading", className),
 		style
@@ -64,14 +67,16 @@ function PisellReservationScheduleBand(props) {
 	}, /* @__PURE__ */ react.default.createElement(antd.Spin, {
 		size: "small",
 		tip: dataLoadingTip != null ? dataLoadingTip : void 0
-	})) : null, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-reservation-schedule-band-schedule-row" }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-reservation-schedule-band-slot-start" }, scheduleStartSlot), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-reservation-schedule-band-schedule" }, /* @__PURE__ */ react.default.createElement(require_PisellReservationSchedule.PisellReservationSchedule, require_objectSpread2._objectSpread2({
+	})) : null, /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)("pisell-reservation-schedule-band-schedule-row", scheduleRowClassName) }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-reservation-schedule-band-slot-start" }, scheduleStartSlot), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-reservation-schedule-band-schedule" }, /* @__PURE__ */ react.default.createElement(require_PisellReservationSchedule.PisellReservationSchedule, require_objectSpread2._objectSpread2({
 		value: effective.date,
 		onChange: handleDateChange
-	}, scheduleProps)), scheduleAfterDateSlot ? /* @__PURE__ */ react.default.createElement("div", { className: "pisell-reservation-schedule-band-after-date" }, scheduleAfterDateSlot) : null), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-reservation-schedule-band-slot-end" }, scheduleEndSlot)), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-reservation-schedule-band-navigator" }, /* @__PURE__ */ react.default.createElement(require_PisellTimeNavigator.PisellTimeNavigator, require_objectSpread2._objectSpread2({
+	}, scheduleProps)), scheduleAfterDateSlot ? /* @__PURE__ */ react.default.createElement("div", { className: "pisell-reservation-schedule-band-after-date" }, scheduleAfterDateSlot) : null), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-reservation-schedule-band-slot-end" }, scheduleEndSlot)), hideTimeNavigator ? null : /* @__PURE__ */ react.default.createElement("div", { className: "pisell-reservation-schedule-band-navigator" }, /* @__PURE__ */ react.default.createElement(require_PisellTimeNavigator.PisellTimeNavigator, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({
 		referenceDate: effective.date,
-		value: effective.at,
-		onChange: handleTimeChange
-	}, timeNavigatorProps))));
+		value: effective.at
+	}, timeNavigatorProps), {}, {
+		onChange: handleTimeChange,
+		formatTimeLabel
+	}))));
 }
 PisellReservationScheduleBand.displayName = "PisellReservationScheduleBand";
 //#endregion

package/lib/components/pisellReservationScheduleBand/PisellReservationScheduleBand.less

@@ -34,7 +34,8 @@
 /** 与中间日程条同一行：整行深色底，左标题 / 中选日 / 右操作 */
 .pisell-reservation-schedule-band-schedule-row {
   display: grid;
-  grid-template-columns: 1fr auto 1fr;
+  /** 左右按内容占位，剩余宽度给中间，避免「等分 1fr」把左侧挤窄后标题与 Segmented 被迫换行 */
+  grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   width: 100%;
   min-width: 0;
@@ -44,30 +45,62 @@
   border-radius: 0;
   background: #141824;
   border: 1px solid rgba(255, 255, 255, 0.06);
+  /**
+   * 布局：auto | minmax(0,1fr) | auto
+   * - 左：标题 + 视图切换等内容宽占位
+   * - 右：「+ New」等固定贴行末
+   * - 中间：仅占左、右之间的剩余宽度；选日期 / 跟随时间文案在该「中间区域」内居中（见 .pisell-reservation-schedule-band-schedule）
+   */
+  /** 左/右栏 min-width:max-content 后整行可能超出视口，允许横向滚动而非压扁左侧 */
+  overflow-x: auto;
+  overflow-y: visible;
 }
 
 .pisell-reservation-schedule-band-slot-start {
   justify-self: start;
-  min-width: 0;
+  /** 勿用 min-width:0：会把「标题 + Segmented」挤折行；max-content 保证左侧优先单行横排 */
+  min-width: max-content;
   display: flex;
   align-items: center;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  /** 中间栏内容偶发溢出绘制时压在左侧 Tab 上，保证左侧在上层 */
+  position: relative;
+  z-index: 1;
+  /** 业务侧（如预约）在插槽里再包一层 merge 时，保证子级也按内容宽参与列宽计算，避免整条 min-width:0 收缩链 */
+  > * {
+    min-width: max-content;
+    flex-shrink: 0;
+  }
 }
 
 .pisell-reservation-schedule-band-slot-end {
   justify-self: end;
-  min-width: 0;
+  /** 右侧按钮区同样保留完整占位，避免被 1fr 中间列挤压 */
+  min-width: max-content;
   display: flex;
   align-items: center;
 }
 
 .pisell-reservation-schedule-band-schedule {
-  justify-self: center;
+  justify-self: stretch;
   min-width: 0;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
+  /**
+   * 仅在 Grid 的中间列（左、右扣掉之后的剩余宽度）内居中选日区；
+   * 不与「整行居中」混淆，也不会贴死到 + New。
+   */
   justify-content: center;
+  @supports (justify-content: safe center) {
+    justify-content: safe center;
+  }
+  /** 中间块总宽超过中间列时在本格内滚动，避免向左绘制盖住左侧 Segmented */
+  overflow-x: auto;
+  overflow-y: visible;
+  box-sizing: border-box;
   /** 日期与右侧「当前时间」等插槽留出间距，避免贴太紧 */
   gap: 14px;
 }

package/lib/components/pisellReservationScheduleBand/index.d.ts

@@ -1,2 +1,3 @@
 import { PisellReservationScheduleBandProps, ReservationScheduleBandValue, TimeNavigatorPassthroughProps } from "./types.js";
-import { PisellReservationScheduleBand } from "./PisellReservationScheduleBand.js";
+import { PisellReservationScheduleBand } from "./PisellReservationScheduleBand.js";
+import { formatScheduleAtLabel } from "./utils/formatScheduleAtLabel.js";

package/lib/components/pisellReservationScheduleBand/types.d.ts

@@ -4,12 +4,15 @@ import { CSSProperties, ReactNode } from "react";
 import { Dayjs } from "dayjs";
 
 //#region src/components/pisellReservationScheduleBand/types.d.ts
-/** 组合值：日历日 + 该日上的时刻（与 PisellTimeNavigator 对齐） */
+/**
+ * 组合值：顶栏选中日（营业日锚定）+ 时间轴游标绝对时刻 `at`。
+ * 跨日营业时 `at` 可为其它自然日时刻，顶栏 `date` 通常不变；展示用 {@link formatScheduleAtLabel}（带日期）。
+ */
 interface ReservationScheduleBandValue {
   date: Dayjs;
   at: Dayjs;
 }
-type TimeNavigatorPassthroughProps = Omit<PisellTimeNavigatorProps, 'value' | 'onChange' | 'referenceDate' | 'defaultValue'>;
+type TimeNavigatorPassthroughProps = Omit<PisellTimeNavigatorProps, 'value' | 'onChange' | 'defaultValue'>;
 /**
  * PisellReservationScheduleBand：营业日条 + 横向时间轴
  */
@@ -46,6 +49,10 @@ interface PisellReservationScheduleBandProps {
    * 顶栏日程行：紧挨在选日组件之后（如「跟随当前」），与中间列同一 flex 区
    */
   scheduleAfterDateSlot?: ReactNode;
+  /**
+   * 为 true 时隐藏下方时间导航轴（如日历视图仅需要选日/选周/选月）
+   */
+  hideTimeNavigator?: boolean;
   /**
    * 为 true 时在整个日程带上叠加载层（如切换营业日后拉预约列表期间）
    */
@@ -56,6 +63,10 @@ interface PisellReservationScheduleBandProps {
   dataLoadingTip?: ReactNode;
   className?: string;
   style?: CSSProperties;
+  /**
+   * 追加到内部 `.pisell-reservation-schedule-band-schedule-row` 的类名（如手机端无视图切换时改为一行布局）。
+   */
+  scheduleRowClassName?: string;
 }
 //#endregion
 export { PisellReservationScheduleBandProps, ReservationScheduleBandValue, TimeNavigatorPassthroughProps };

package/lib/components/pisellReservationScheduleBand/utils/formatScheduleAtLabel.d.ts

@@ -0,0 +1,13 @@
+import { Dayjs } from "dayjs";
+
+//#region src/components/pisellReservationScheduleBand/utils/formatScheduleAtLabel.d.ts
+/**
+ * 预约顶栏游标文案：与顶栏锚定日同一天只显示 HH:mm；跨自然日则带日期（MM-DD HH:mm）。
+ * 顶栏 `date` 不变，仅展示层标明 `at` 的真实日历日。
+ *
+ * @param at 时间轴绝对时刻（可落在锚定日的次日等）
+ * @param anchorDate 顶栏选中的日历日（营业日锚定，不因拖轴而改）
+ */
+declare function formatScheduleAtLabel(at: Dayjs, anchorDate: Dayjs): string;
+//#endregion
+export { formatScheduleAtLabel };

package/lib/components/pisellReservationScheduleBand/utils/formatScheduleAtLabel.js

@@ -0,0 +1,17 @@
+//#region src/components/pisellReservationScheduleBand/utils/formatScheduleAtLabel.ts
+/**
+* 预约顶栏游标文案：与顶栏锚定日同一天只显示 HH:mm；跨自然日则带日期（MM-DD HH:mm）。
+* 顶栏 `date` 不变，仅展示层标明 `at` 的真实日历日。
+*
+* @param at 时间轴绝对时刻（可落在锚定日的次日等）
+* @param anchorDate 顶栏选中的日历日（营业日锚定，不因拖轴而改）
+*/
+function formatScheduleAtLabel(at, anchorDate) {
+	const timeStr = at.format("HH:mm");
+	const atDay = at.startOf("day");
+	const anchorDay = anchorDate.startOf("day");
+	if (atDay.isSame(anchorDay, "day")) return timeStr;
+	return `${at.year() === anchorDay.year() ? at.format("MM-DD") : at.format("YYYY-MM-DD")} ${timeStr}`;
+}
+//#endregion
+exports.formatScheduleAtLabel = formatScheduleAtLabel;

package/lib/components/pisellShellFrame/PisellShellFrame.js

@@ -24,7 +24,7 @@ const defaultConfig = {
 * - 底部：批量操作条（按选中状态出现）、状态提示区（加载/错误/同步提示等）
 */
 const PisellShellFrame = (props) => {
-	const { className, style, config: configProp, title, subtitle, titleExtra, toolbar, statisticList, children, batchActionBar, statusArea } = props;
+	const { className, style, config: configProp, title, subtitle, titleExtra, toolbar, belowToolbar, statisticList, children, batchActionBar, statusArea } = props;
 	const config = require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, defaultConfig), configProp);
 	const [statisticCollapsed, setStatisticCollapsed] = (0, react.useState)(false);
 	const hasTitle = config.showTitle && (title != null || subtitle != null || titleExtra != null);
@@ -41,7 +41,7 @@ const PisellShellFrame = (props) => {
 		className: `pisell-shell-frame ${className !== null && className !== void 0 ? className : ""}`.trim(),
 		style,
 		"data-shell-frame": true
-	}, /* @__PURE__ */ react.default.createElement("header", { className: "pisell-shell-frame-header" }, hasTitle && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-shell-frame-title" }, /* @__PURE__ */ react.default.createElement("span", null, title != null && /* @__PURE__ */ react.default.createElement("span", { className: "pisell-shell-frame-title-main" }, title), subtitle != null && /* @__PURE__ */ react.default.createElement("span", { className: "pisell-shell-frame-title-sub" }, subtitle)), titleExtra != null && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-shell-frame-title-extra" }, titleExtra)), hasToolbar && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-shell-frame-toolbar" }, toolbar), hasStatistic && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-shell-frame-statistic" }, config.statisticCollapsible ? /* @__PURE__ */ react.default.createElement(antd.Collapse, {
+	}, /* @__PURE__ */ react.default.createElement("header", { className: "pisell-shell-frame-header" }, hasTitle && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-shell-frame-title" }, /* @__PURE__ */ react.default.createElement("span", null, title != null && /* @__PURE__ */ react.default.createElement("span", { className: "pisell-shell-frame-title-main" }, title), subtitle != null && /* @__PURE__ */ react.default.createElement("span", { className: "pisell-shell-frame-title-sub" }, subtitle)), titleExtra != null && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-shell-frame-title-extra" }, titleExtra)), hasToolbar && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-shell-frame-toolbar" }, toolbar), belowToolbar != null && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-shell-frame-below-toolbar" }, belowToolbar), hasStatistic && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-shell-frame-statistic" }, config.statisticCollapsible ? /* @__PURE__ */ react.default.createElement(antd.Collapse, {
 		ghost: true,
 		activeKey: statisticCollapsed ? [] : ["statistic"],
 		onChange: (keys) => setStatisticCollapsed(keys.length === 0),

package/lib/components/pisellShellFrame/PisellShellFrame.less

@@ -36,12 +36,28 @@
     margin-bottom: 8px;
   }
 
-  /** RecordBoard 平面图模式：与日程带衔接，去掉工具栏与内容区间距 */
-
+  /**
+   * RecordBoard 非表格主区（平面图 / 日历 / 资源墙）：与顶栏日程带衔接，去掉工具栏与内容区间距。
+   * `--floor-map-view` 仍可在仅平面图场景单独挂类；规则与 body-subview 一致。
+   */
+  &--body-subview &-toolbar,
   &--floor-map-view &-toolbar {
     margin-bottom: 0;
   }
 
+  /**
+   * 工具栏正下方的「附加条」：默认与 toolbar 留 8px 缝隙，让插入的轻量摘要
+   * 与 toolbar 视觉上分开但不破坏顶栏整体节奏。空内容时塌陷不占位。
+   */
+  &-below-toolbar {
+    margin-bottom: 8px;
+
+    &:empty {
+      display: none;
+      margin-bottom: 0;
+    }
+  }
+
   &-statistic {
     margin-bottom: 8px;
 

package/lib/components/pisellShellFrame/types.d.ts

@@ -47,6 +47,12 @@ interface PisellShellFrameProps {
   titleExtra?: ReactNode;
   /** 工具栏内容 */
   toolbar?: ReactNode;
+  /**
+   * 工具栏正下方、统计/正文之上的"附加条"插槽，渲染于 header 内部。
+   * 适用于「统计摘要 / 当前所选筛选标签」等需要紧贴 toolbar 的轻量条目。
+   * 当为空时不占位、不渲染外壳。
+   */
+  belowToolbar?: ReactNode;
   /** 统计列表内容（如 PisellStatisticList 或自定义） */
   statisticList?: ReactNode;
   /** 主内容（表格/看板/日历/楼层图等），当 config.scroll 为 true 时会被滚动容器包裹 */