@pisell/materials 6.11.48 → 6.11.50

package/es/components/pisellRecordBoard/PisellRecordBoard.js

@@ -102,7 +102,7 @@ function getDefaultRecordBoardContext(layoutType, selection, rowKey) {
  * 平面图推荐在 ShellFrame 内使用 **PisellRecordBoard.FloorMap** 声明，与根级 `floorMap` 合并（子优先）。
  */
 var PisellRecordBoard = function PisellRecordBoard(props) {
-  var _props$columnVisibili;
+  var _props$columnVisibili, _props$grid4;
   var children = props.children,
     _props$layoutType = props.layoutType,
     layoutType = _props$layoutType === void 0 ? 'grid' : _props$layoutType,
@@ -249,7 +249,7 @@ var PisellRecordBoard = function PisellRecordBoard(props) {
     setInternalColumnOrder(columnKeys);
   }, []);
   var contextValue = useMemo(function () {
-    var _gridSelection$select;
+    var _props$grid3, _gridSelection$select;
     var defaultCtx = getDefaultRecordBoardContext(layoutType, {
       selectedKeys: internalSelectedKeys,
       selectedRows: internalSelectedRows,
@@ -258,11 +258,13 @@ var PisellRecordBoard = function PisellRecordBoard(props) {
 
     /** 分页状态（推导表格切片前需要） */
     var pagination = paginationProp !== undefined ? paginationProp : defaultCtx.pagination;
+    var gridInfiniteScroll = ((_props$grid3 = props.grid) === null || _props$grid3 === void 0 ? void 0 : _props$grid3.infiniteScroll) === true;
 
     /**
      * 表格数据：
      * - 显式传入 `data` 时始终用 `data`（如服务端分页当前页）；
      * - 否则若存在 `dataSources` + `gridDataSourceKey`，从对应数组做客户端分页切片。
+     * - `infiniteScroll` 时对该路径做**累积**切片：slice(0, pageNumber * pageSize)，与触底加载多页一致。
      */
     var data;
     var total;
@@ -276,8 +278,13 @@ var PisellRecordBoard = function PisellRecordBoard(props) {
       var pageNumber = pagination.pageNumber,
         pageSize = pagination.pageSize;
       var safeSize = Math.max(1, pageSize);
-      var start = Math.max(0, (pageNumber - 1) * safeSize);
-      data = raw.slice(start, start + safeSize);
+      if (gridInfiniteScroll) {
+        var end = Math.min(raw.length, pageNumber * safeSize);
+        data = raw.slice(0, end);
+      } else {
+        var start = Math.max(0, (pageNumber - 1) * safeSize);
+        data = raw.slice(start, start + safeSize);
+      }
     } else {
       data = defaultCtx.data;
       total = totalProp !== undefined ? totalProp : defaultCtx.total;
@@ -333,9 +340,10 @@ var PisellRecordBoard = function PisellRecordBoard(props) {
        * 业务方传入的自定义分页渲染：注入 ctx 后，shellFrame 内置的
        * `<RecordBoardPagination />` 会优先使用它（详见 RecordBoardPagination 实现）。
        */
-      paginationRender: props.paginationRender
+      paginationRender: props.paginationRender,
+      gridInfiniteScroll: gridInfiniteScroll
     });
-  }, [layoutType, rowKeyProp, dataProp, dataSourcesProp, gridDataSourceKeyProp, loadingProp, totalProp, paginationProp, onPageChangeProp, searchParamsProp, onSearchProp, onResetProp, mergedChildComponentProps, internalSelectedKeys, internalSelectedRows, onSelectionChangeInternal, internalColumnVisibility, onColumnVisibilityChangeInternal, internalColumnOrder, onColumnOrderChangeInternal, fillHeight, scrollAreaHeight, filterResetKey, floorMapProp, floorMapLayoutContextProp, defaultBodyView, bodyViewSwitchable, floorMapLayoutRef, floorMapFooter, calendarProp, resourceWallProp, bodyView, setBodyView, props.paginationRender]);
+  }, [layoutType, rowKeyProp, dataProp, dataSourcesProp, gridDataSourceKeyProp, loadingProp, totalProp, paginationProp, onPageChangeProp, searchParamsProp, onSearchProp, onResetProp, mergedChildComponentProps, internalSelectedKeys, internalSelectedRows, onSelectionChangeInternal, internalColumnVisibility, onColumnVisibilityChangeInternal, internalColumnOrder, onColumnOrderChangeInternal, fillHeight, scrollAreaHeight, filterResetKey, floorMapProp, floorMapLayoutContextProp, defaultBodyView, bodyViewSwitchable, floorMapLayoutRef, floorMapFooter, calendarProp, resourceWallProp, bodyView, setBodyView, props.paginationRender, (_props$grid4 = props.grid) === null || _props$grid4 === void 0 ? void 0 : _props$grid4.infiniteScroll]);
   var content = /*#__PURE__*/React.createElement(RecordBoardProvider, {
     value: contextValue
   }, children);

package/es/components/pisellRecordBoard/layouts/GridLayout/Grid.js

@@ -1,5 +1,7 @@
 var _excluded = ["render", "columns", "rowKey", "rowSelection"],
-  _excluded2 = ["autoCalc"];
+  _excluded2 = ["autoCalc"],
+  _excluded3 = ["onScroll"],
+  _excluded4 = ["summary"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -17,7 +19,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useMemo, useRef, useState, useEffect } from 'react';
-import { Table } from 'antd';
+import { Table, Spin } from 'antd';
 import { useRecordBoardContext } from "../../hooks/useRecordBoardContext";
 import { processColumnsForGrid, getRecordBoardColumnKey, computeUniformColumnSummary, isTrivialUniformSummaryReactContent } from "../../utils/recordBoardColumns";
 import { getText } from "../../../../locales";
@@ -37,9 +39,9 @@ function getRowKey(record, rowKey) {
  * Grid 布局下的数据视图：使用 antd Table，从 context 取 data / loading / 多选态。
  */
 /** Context 中与 Table 无关的 key，透传 Table 时排除，避免覆盖或无效传递（含 grid 合并进的 columns/scroll 等） */
-var CONTEXT_ONLY_KEYS = ['data', 'loading', 'total', 'pagination', 'onPageChange', 'searchParams', 'onSearch', 'onReset', 'layoutType', 'selectedKeys', 'selectedRows', 'onSelectionChange', 'rowKey', 'childComponentProps', 'columnVisibility', 'onColumnVisibilityChange', 'columns', 'scroll', 'size', 'defaultHiddenColumnKeys', 'scrollAreaHeight', 'setScrollAreaHeight', 'collapseUniformColumns', 'columnOrder', 'onColumnOrderChange'];
+var CONTEXT_ONLY_KEYS = ['data', 'loading', 'total', 'pagination', 'onPageChange', 'searchParams', 'onSearch', 'onReset', 'layoutType', 'selectedKeys', 'selectedRows', 'onSelectionChange', 'rowKey', 'childComponentProps', 'columnVisibility', 'onColumnVisibilityChange', 'columns', 'scroll', 'size', 'defaultHiddenColumnKeys', 'scrollAreaHeight', 'setScrollAreaHeight', 'collapseUniformColumns', 'columnOrder', 'onColumnOrderChange', 'gridInfiniteScroll', 'infiniteScroll', 'paginationRender'];
 var RecordBoardGridView = function RecordBoardGridView(props) {
-  var _ref2, _ctx$data2, _ctx$data3;
+  var _ref2, _ctx$data2, _ctx$data4;
   var ctx = useRecordBoardContext({
     displayName: 'grid'
   });
@@ -171,6 +173,7 @@ var RecordBoardGridView = function RecordBoardGridView(props) {
   var gridTableProps = useMemo(function () {
     var picked = {};
     Object.keys(ctx).forEach(function (k) {
+      if (k === 'onScroll') return;
       if (CONTEXT_ONLY_KEYS.includes(k)) return;
       picked[k] = ctx[k];
     });
@@ -187,6 +190,7 @@ var RecordBoardGridView = function RecordBoardGridView(props) {
       return sum + ((_col$width = col.width) !== null && _col$width !== void 0 ? _col$width : 250);
     }, 0) || 2000;
   }, [columns]);
+  var gridInfiniteScroll = ctx.gridInfiniteScroll === true;
 
   // 与 materials Table useGenScroll 对齐：autoCalc 时根据 scrollAreaHeight 计算 scroll.y；无数据且 scroll.x 非数字时用列宽之和避免表头被压窄换行
   var tableScroll = useMemo(function () {
@@ -200,7 +204,7 @@ var RecordBoardGridView = function RecordBoardGridView(props) {
       return {
         x: scrollX !== null && scrollX !== void 0 ? scrollX : sumColumnWidths,
         y: Math.max(wrapHeight - reservedHeight, 100),
-        scrollToFirstRowOnChange: scroll.scrollToFirstRowOnChange
+        scrollToFirstRowOnChange: gridInfiniteScroll ? false : scroll.scrollToFirstRowOnChange
       };
     }
     if (scroll && _typeof(scroll) === 'object') {
@@ -212,13 +216,192 @@ var RecordBoardGridView = function RecordBoardGridView(props) {
         var _ref6;
         return _objectSpread(_objectSpread({}, resolved), {}, {
           x: (_ref6 = scrollX !== null && scrollX !== void 0 ? scrollX : resolved.x) !== null && _ref6 !== void 0 ? _ref6 : sumColumnWidths
-        });
+        }, gridInfiniteScroll ? {
+          scrollToFirstRowOnChange: false
+        } : {});
       }
       return resolved;
     }
     return scroll;
-  }, [rest.scroll, ctx.scroll, ctx.scrollAreaHeight, ctx.pagination, columns, sumColumnWidths, isEmpty, uniformSummaryHeight]);
+  }, [rest.scroll, ctx.scroll, ctx.scrollAreaHeight, ctx.pagination, columns, sumColumnWidths, isEmpty, uniformSummaryHeight, gridInfiniteScroll]);
+
+  /** 触底加载下一页：距底部约 48px 内触发，避免 loading 与重复 onPageChange */
+  var infiniteLoadLockRef = useRef(false);
+  /** 已触发 onPageChange、等待下一页数据：宿主可能不设 ctx.loading，需单独驱动表尾「加载中」 */
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    infiniteScrollFetching = _useState4[0],
+    setInfiniteScrollFetching = _useState4[1];
+  // 与 dataSource.length 组合：宿主若不在请求期间置 loading，仅靠 loading 无法在下一次数据追加后清锁
+  useEffect(function () {
+    if (!ctx.loading) {
+      infiniteLoadLockRef.current = false;
+    }
+  }, [ctx.loading, dataSource.length]);
+  useEffect(function () {
+    setInfiniteScrollFetching(false);
+  }, [dataSource.length]);
+
+  /**
+   * 无限滚动：监听**实际发生滚动**的节点。
+   * - 有 `scroll.y` 时表体在内部滚动，类名在 ConfigProvider 下为 `.pisell-lowcode-table-body`（非 `.ant-table-body`）；
+   * - `scrollAreaHeight` 未就绪或仅 `autoCalc` 未算高时，整表在 Shell 的 `.pisell-record-board-scroll-body` 内滚，仅绑表体会漏事件（如 HUD 抽屉内嵌表）。
+   */
+  var gridWrapRef = useRef(null);
+  var ctxRef = useRef(ctx);
+  ctxRef.current = ctx;
+  var restRef = useRef(rest);
+  restRef.current = rest;
+  var gridInfiniteRef = useRef(false);
+  gridInfiniteRef.current = gridInfiniteScroll;
+  useEffect(function () {
+    if (!gridInfiniteScroll) return;
+    var root = gridWrapRef.current;
+    if (!root) {
+      return;
+    }
+    var handler = function handler(e) {
+      var _r$onScroll, _onScroll2, _ref7, _e$currentTarget, _c$data, _c$total;
+      var r = restRef.current;
+      var c = ctxRef.current;
+      var ev = e;
+      (_r$onScroll = r.onScroll) === null || _r$onScroll === void 0 || _r$onScroll.call(r, ev);
+      (_onScroll2 = (_ref7 = c).onScroll) === null || _onScroll2 === void 0 || _onScroll2.call(_ref7, ev);
+      if (!gridInfiniteRef.current) return;
+      if (c.loading || infiniteLoadLockRef.current) {
+        return;
+      }
+      var st = (_e$currentTarget = e.currentTarget) !== null && _e$currentTarget !== void 0 ? _e$currentTarget : e.target;
+      var dataLen = ((_c$data = c.data) !== null && _c$data !== void 0 ? _c$data : []).length;
+      var tot = (_c$total = c.total) !== null && _c$total !== void 0 ? _c$total : 0;
+      var scrollTop = st.scrollTop,
+        clientHeight = st.clientHeight,
+        scrollHeight = st.scrollHeight;
+      var dist = scrollHeight - scrollTop - clientHeight;
+      if (dataLen >= tot) {
+        return;
+      }
+      if (dist > 48) return;
+      infiniteLoadLockRef.current = true;
+      setInfiniteScrollFetching(true);
+      c.onPageChange(c.pagination.pageNumber + 1, c.pagination.pageSize);
+    };
+    var listScrollTargets = function listScrollTargets(r) {
+      var out = [];
+      var seen = new Set();
+      var add = function add(el) {
+        if (el && !seen.has(el)) {
+          seen.add(el);
+          out.push(el);
+        }
+      };
+      // 与 Grid.less 一致：项目 antd prefixCls 为 pisell-lowcode
+      r.querySelectorAll('.ant-table-body, .pisell-lowcode-table-body').forEach(function (n) {
+        return add(n);
+      });
+      add(r.closest('.pisell-record-board-scroll-body'));
+      return out;
+    };
+    var cleanups = [];
+    var bind = function bind() {
+      cleanups.forEach(function (fn) {
+        return fn();
+      });
+      cleanups.length = 0;
+      var targets = listScrollTargets(root);
+      targets.forEach(function (el) {
+        el.addEventListener('scroll', handler, {
+          passive: true
+        });
+        cleanups.push(function () {
+          return el.removeEventListener('scroll', handler);
+        });
+      });
+    };
+    var t0 = window.setTimeout(function () {
+      return bind();
+    }, 0);
+    var t1 = window.setTimeout(function () {
+      return bind();
+    }, 120);
+    var t2 = window.setTimeout(function () {
+      return bind();
+    }, 400);
+    return function () {
+      clearTimeout(t0);
+      clearTimeout(t1);
+      clearTimeout(t2);
+      cleanups.forEach(function (fn) {
+        return fn();
+      });
+    };
+  }, [gridInfiniteScroll, dataSource.length, isEmpty, ctx.scrollAreaHeight, columns, summaryItems.length]);
+  var tableRest = useMemo(function () {
+    if (!gridInfiniteScroll) return rest;
+    var _ref8 = rest,
+      _onScroll = _ref8.onScroll,
+      r = _objectWithoutProperties(_ref8, _excluded3);
+    return r;
+  }, [gridInfiniteScroll, rest]);
+  var userGridSummary = gridTableProps.summary;
+  var infiniteSummaryColSpan = useMemo(function () {
+    var n = Array.isArray(columns) ? columns.length : 1;
+    return n + (rowSelection ? 1 : 0);
+  }, [columns, rowSelection]);
+
+  /** 无限滚动：在 Table.Summary 内展示状态（与宿主 summary 合并） */
+  var mergedTableSummary = useMemo(function () {
+    if (!gridInfiniteScroll) {
+      return userGridSummary;
+    }
+    return function (pageData) {
+      var _ctx$data3;
+      var userNode = typeof userGridSummary === 'function' ? userGridSummary(pageData) : userGridSummary;
+      var len = ((_ctx$data3 = ctx.data) !== null && _ctx$data3 !== void 0 ? _ctx$data3 : []).length;
+      var tot = ctx.total;
+      var loading = !!ctx.loading;
+      var loadingMore = loading || infiniteScrollFetching;
+      var showBar = len > 0 || loadingMore;
+      if (!showBar && !userNode) {
+        return null;
+      }
+      var hasMore = tot == null || typeof tot !== 'number' ? true : len < tot;
+      var allLoaded = typeof tot === 'number' && tot > 0 && len > 0 && len >= tot;
+      var statusInner = null;
+      if (showBar) {
+        // 先有「已全部加载」再判断加载：只要还有总数意义上的后续条（hasMore）且本地已有展示行，表尾一律显示加载中（含未到触底、未置 loading / 未打 fetching 的中间态）
+        if (allLoaded) {
+          statusInner = /*#__PURE__*/React.createElement("span", {
+            className: "pisell-record-board-infinite-scroll-tip-done"
+          }, getText('record-board-infinite-scroll-all-loaded'));
+        } else if (hasMore && len > 0) {
+          statusInner = /*#__PURE__*/React.createElement("span", {
+            className: "pisell-record-board-infinite-scroll-tip-loading"
+          }, /*#__PURE__*/React.createElement(Spin, {
+            size: "small"
+          }), /*#__PURE__*/React.createElement("span", null, getText('record-board-infinite-scroll-loading-more')));
+        }
+      }
+      var statusBlock = statusInner != null ? /*#__PURE__*/React.createElement(Table.Summary, {
+        fixed: "bottom"
+      }, /*#__PURE__*/React.createElement(Table.Summary.Row, {
+        className: "pisell-record-board-infinite-scroll-summary-row"
+      }, /*#__PURE__*/React.createElement(Table.Summary.Cell, {
+        index: 0,
+        colSpan: infiniteSummaryColSpan,
+        align: "left"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "pisell-record-board-infinite-scroll-tip"
+      }, statusInner)))) : null;
+      if (!userNode && !statusBlock) return null;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, userNode, statusBlock);
+    };
+  }, [gridInfiniteScroll, userGridSummary, infiniteSummaryColSpan, ctx.data, ctx.total, ctx.loading, infiniteScrollFetching]);
+  var _ref9 = gridTableProps,
+    _userSummaryOmitted = _ref9.summary,
+    gridTablePropsWithoutSummary = _objectWithoutProperties(_ref9, _excluded4);
   return /*#__PURE__*/React.createElement("div", {
+    ref: gridWrapRef,
     "data-layout-slot": "grid",
     className: "pisell-lowcode-record-board-grid"
   }, summaryItems.length > 0 && /*#__PURE__*/React.createElement("div", {
@@ -240,10 +423,11 @@ var RecordBoardGridView = function RecordBoardGridView(props) {
     }, item.title), /*#__PURE__*/React.createElement("span", {
       className: "pisell-record-board-uniform-summary-value"
     }, content));
-  })), /*#__PURE__*/React.createElement(Table, _extends({}, rest, gridTableProps, {
+  })), /*#__PURE__*/React.createElement(Table, _extends({}, tableRest, gridTablePropsWithoutSummary, {
+    summary: mergedTableSummary,
     scroll: tableScroll,
     rowKey: tableRowKey,
-    dataSource: (_ctx$data3 = ctx.data) !== null && _ctx$data3 !== void 0 ? _ctx$data3 : [],
+    dataSource: (_ctx$data4 = ctx.data) !== null && _ctx$data4 !== void 0 ? _ctx$data4 : [],
     loading: ctx.loading,
     columns: columns,
     rowSelection: rowSelection,

package/es/components/pisellRecordBoard/layouts/GridLayout/Grid.less

@@ -111,3 +111,34 @@
 .pisell-record-board-row-cancelled {
   background: #fff1f0;
 }
+
+// 无限滚动：表尾 Table.Summary 一行，文案靠左
+// 不再加 border-top：上方数据行已有 border-bottom，再画 top 会与 antd 格线叠成双线
+.pisell-record-board-infinite-scroll-summary-row > .pisell-lowcode-table-cell,
+.pisell-record-board-infinite-scroll-summary-row > .ant-table-cell {
+  background: var(--ant-color-bg-container, #ffffff) !important;
+  border-top: none !important;
+  text-align: left !important;
+  vertical-align: middle;
+  padding: 8px 12px !important;
+}
+
+.pisell-record-board-infinite-scroll-tip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.pisell-record-board-infinite-scroll-tip-loading {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: #475467;
+}
+
+.pisell-record-board-infinite-scroll-tip-done {
+  color: #667085;
+}

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

@@ -476,6 +476,9 @@ export default function BookingCalendar() {
     setTransitioningToDay({
       source: source
     });
+    /** 周/月只是“跳转查看”，不应把日视图多选状态带过去造成误解（像是系统替用户选了格子） */
+    setSelectedFreeSlots([]);
+    setSelectedBlockSlots([]);
     commitAnchor(day);
     setFocusedCourtId(courtId || null);
     commitView('day');

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

@@ -321,3 +321,12 @@
   background: var(--brand-primary);
   color: #fff;
 }
+
+/** 周视图左侧资源名 / 分组名：最多两行，超出省略（供 BookingCalendarWeekView 使用） */
+.pisell-rb-cal-week-resource-name {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-word;
+}

package/es/components/pisellRecordBoard/shellFrame/Calendar/const/bookingCalendarConstants.js

@@ -8,8 +8,10 @@ export var DEFAULT_CALENDAR_TIMELINE = {
 };
 export var frozenColWidth = 132;
 export var dayColWidth = 92;
-export var dayRowHeight = 122;
-export var groupRowHeight = 54;
+/** 日视图默认资源行高度（压缩默认高度，超出由 overlay lane 自动抬高） */
+export var dayRowHeight = 72;
+/** 日视图分组行高度（随资源行同步压缩） */
+export var groupRowHeight = 40;
 export var dayHeaderHeight = 56;
 /** 日视图同一资源行内竖向分带的最小高度（须容下标题+时间两行 + py-2/py-3）；并行时抬高该行 */
 export var DAY_OVERLAY_LANE_MIN_PX = 64;

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

@@ -16,7 +16,7 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useSta
 import { ClockCircleOutlined, DownOutlined } from '@ant-design/icons';
 import { PisellDateTimeDisplay } from "../../../../pisellDateTimeDisplay";
 import { currentTimeLabel, dayOccupancy, dayOverlayHiddenKey, dayOverlayLaneMetrics, formatHourLabel, getViewNowReference, parseDate } from "../utils/bookingCalendarDateUtils";
-import { DAY_OVERLAY_INNER_BOTTOM, DAY_OVERLAY_INNER_TOP, DAY_OVERLAY_LANE_GAP, DAY_OVERLAY_VISIBLE_BOOKING_CAP, DAY_VIEW_COL_BUFFER, DAY_VIEW_ROW_BUFFER_PX, dayRowHeight, frozenColWidth } from "../const/bookingCalendarConstants";
+import { DAY_OVERLAY_INNER_BOTTOM, DAY_OVERLAY_INNER_TOP, DAY_OVERLAY_LANE_GAP, DAY_OVERLAY_VISIBLE_BOOKING_CAP, DAY_VIEW_COL_BUFFER, DAY_VIEW_ROW_BUFFER_PX, dayHeaderHeight, dayRowHeight, frozenColWidth } from "../const/bookingCalendarConstants";
 import { getBlockMetaLine, getRemainingToneClass, BookingCard } from "../bookingCalendarViewShared";
 import { tCal } from "../calendarI18n";
 import { BookingCalendarDaySelectionBar } from "./BookingCalendarDaySelectionBar";
@@ -209,15 +209,31 @@ export function BookingCalendarDayView(dayProps) {
       }
     };
   }, [dayKey, scheduleDayViewportUpdate, hourSlots.length, visibleCourtRows.length]);
+
+  /**
+   * 周/月点格进入日视图时会带上 `focusedCourtId`：只应在日历内层滚动容器内滚到该行。
+   * 若用 `scrollIntoView`，浏览器会连锁滚动外层页面，RecordBoard 顶栏日程带会被顶出视口。
+   */
   useEffect(function () {
     if (!focusedCourtId || !dayScrollRef.current) return;
     var timer = setTimeout(function () {
-      var _dayScrollRef$current;
-      var el = (_dayScrollRef$current = dayScrollRef.current) === null || _dayScrollRef$current === void 0 ? void 0 : _dayScrollRef$current.querySelector("[data-court-row=\"".concat(focusedCourtId, "\"]"));
-      if (el) el.scrollIntoView({
-        behavior: 'smooth',
-        block: 'start'
+      var root = dayScrollRef.current;
+      if (!root) return;
+      var el = root.querySelector("[data-court-row=\"".concat(focusedCourtId, "\"]"));
+      if (!el) return;
+      var rootRect = root.getBoundingClientRect();
+      var rowRect = el.getBoundingClientRect();
+      var targetTop = rootRect.top + dayHeaderHeight;
+      var desiredTop = root.scrollTop + (rowRect.top - targetTop);
+      var maxTop = Math.max(0, root.scrollHeight - root.clientHeight);
+      /** 对齐到表头下方；若滚不到则尽量滚到最底（maxTop） */
+      var nextTop = Math.min(maxTop, Math.max(0, desiredTop));
+      root.scrollTo({
+        top: nextTop,
+        behavior: 'smooth'
       });
+      /** 仅用于“定位滚动”，不应持续高亮左侧标题格 */
+      setFocusedCourtId(null);
     }, 180);
     return function () {
       return clearTimeout(timer);
@@ -522,7 +538,7 @@ export function BookingCalendarDayView(dayProps) {
       }, remaining, "/", groupCourts.length, " free"));
     })) : /*#__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 border-b px-3 py-3 shadow-[8px_0_16px_rgba(0,0,0,0.06)] ".concat(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'),
+      className: "sticky left-0 z-30 flex h-full min-h-0 w-[132px] min-w-[132px] max-w-[132px] flex-col border-b px-3 py-2 shadow-[8px_0_16px_rgba(0,0,0,0.06)] ".concat(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
@@ -537,7 +553,7 @@ export function BookingCalendarDayView(dayProps) {
       },
       isLight: isLight
     }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: "font-semibold text-base leading-tight break-all"
+      className: "font-semibold text-base leading-tight truncate"
     }, row.name), dayRowRemainingByCourt[row.id] && /*#__PURE__*/React.createElement("div", {
       className: "mt-2 text-xs font-semibold ".concat(getRemainingToneClass(dayRowRemainingByCourt[row.id].ratio, isLight))
     }, dayRowRemainingByCourt[row.id].remaining, "/", dayRowRemainingByCourt[row.id].total, " slots free"))), (daySlotVirtEnabled ? dayVisibleSlotIndices : hourSlots.map(function (_, hi) {
@@ -568,7 +584,7 @@ export function BookingCalendarDayView(dayProps) {
             handleDropMove(row.id, dayKey, hour);
           }
         },
-        className: "relative h-full min-h-0 p-2 text-left transition outline-none ".concat(isOccupied && !outsideBusiness ? 'border-l-transparent border-b-transparent' : "border-b border-l ".concat(isLight ? 'theme-border' : 'border-zinc-700'), " ").concat(outsideBusiness ? isLight ? 'bg-slate-100 theme-text-faint' : 'bg-zinc-800/80 text-zinc-500 border-zinc-700' : isBlock ? blockSelected ? 'bg-red-500/25 border-red-400 ring-2 ring-red-400/60' : isLight ? 'bg-red-50 border-red-200' : 'bg-red-900/50 border-red-700/50' : isOccupied ? 'bg-transparent' : freeSelected ? isLight ? 'bg-violet-50 border-violet-300 ring-2 ring-violet-300/60' : 'bg-white/10 border-violet-400 ring-2 ring-violet-400/60' : isLight ? 'theme-grid-cell hover:bg-violet-50/60' : 'bg-zinc-900 border-zinc-700 hover:bg-zinc-800')
+        className: "relative h-full min-h-0 p-1 text-left transition outline-none ".concat(isOccupied && !outsideBusiness ? 'border-l-transparent border-b-transparent' : "border-b border-l ".concat(isLight ? 'theme-border' : 'border-zinc-700'), " ").concat(outsideBusiness ? isLight ? 'bg-slate-100 theme-text-faint' : 'bg-zinc-800/80 text-zinc-500 border-zinc-700' : isBlock ? blockSelected ? 'bg-red-500/25 border-red-400 ring-2 ring-red-400/60' : isLight ? 'bg-red-50 border-red-200' : 'bg-red-900/50 border-red-700/50' : isOccupied ? 'bg-transparent' : freeSelected ? isLight ? 'bg-violet-50 border-violet-300 ring-2 ring-violet-300/60' : 'bg-white/10 border-violet-400 ring-2 ring-violet-400/60' : isLight ? 'theme-grid-cell hover:bg-violet-50/60' : 'bg-zinc-900 border-zinc-700 hover:bg-zinc-800')
       }, 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", {
@@ -580,7 +596,7 @@ export function BookingCalendarDayView(dayProps) {
       }, 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: "flex h-full items-center justify-center rounded-xl border border-dashed ".concat(isLight ? 'border-[#d8d0eb] text-[#8f86a9] hover:border-violet-300 hover:text-violet-500' : 'border-zinc-600 text-zinc-500 hover:border-violet-500 hover:text-violet-300')
+        className: "flex h-full w-full items-center justify-center rounded-xl border border-dashed text-center ".concat(isLight ? 'border-[#d8d0eb] text-[#8f86a9] hover:border-violet-300 hover:text-violet-500' : 'border-zinc-600 text-zinc-500 hover:border-violet-500 hover:text-violet-300')
       }, freeSelected ? tCal('pisell2.recordBoard.calendar.day.selected') : tCal('pisell2.recordBoard.calendar.day.tapToSelect')) : null);
     })));
   }), visibleDayOverlayBookings.map(function (booking) {

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { MonthGridOverflowVirtualList } from "../modal/OverflowPopover";
 import { CALENDAR_WEEKDAY_IDS, tCal } from "../calendarI18n";
 import { getGridBookingRowStateClasses } from "../utils/BookingCalendarStyle";
-import { formatHourLabel } from "../utils/bookingCalendarDateUtils";
+import { fmtDate, formatHourLabel } from "../utils/bookingCalendarDateUtils";
 
 /** 月视图：由 BookingCalendar 传入数据与交互，本文件仅负责渲染结构 */
 export function BookingCalendarMonthView(_ref) {
@@ -21,6 +21,7 @@ export function BookingCalendarMonthView(_ref) {
     setOverflowListModal = _ref.setOverflowListModal,
     overflowPanelRef = _ref.overflowPanelRef,
     renderMonthWeekBooking = _ref.renderMonthWeekBooking;
+  var todayKey = fmtDate(new Date());
   return /*#__PURE__*/React.createElement("div", {
     key: "month-".concat(anchorDate.getFullYear(), "-").concat(anchorDate.getMonth()),
     className: "flex min-h-0 flex-1 flex-col"
@@ -33,11 +34,12 @@ export function BookingCalendarMonthView(_ref) {
   }, CALENDAR_WEEKDAY_IDS.map(function (id, i) {
     return /*#__PURE__*/React.createElement("div", {
       key: id,
-      className: "px-4 py-3 text-center font-medium ".concat(i >= 5 ? isLight ? 'bg-violet-200' : 'bg-violet-900' : '')
+      className: "px-4 py-3 text-center font-medium"
     }, tCal(id));
   })), /*#__PURE__*/React.createElement("div", {
-    className: "grid grid-cols-7 auto-rows-[255px]"
+    className: "grid grid-cols-7 auto-rows-[minmax(72px,auto)]"
   }, monthDays.map(function (day) {
+    var isToday = day.key === todayKey;
     var allItems = bookings.filter(function (b) {
       return b.date === day.key;
     });
@@ -60,18 +62,24 @@ export function BookingCalendarMonthView(_ref) {
       className: "relative flex flex-col justify-start border-r border-b theme-border p-3 text-left align-top ".concat(day.inMonth ? isLight ? 'theme-grid-cell theme-text' : 'bg-[#1a1b21]' : isLight ? 'theme-grid-muted theme-text-faint' : 'bg-[#111217] text-zinc-600', " ").concat(isLight ? 'hover:bg-violet-50/70' : 'hover:bg-zinc-900')
     }, /*#__PURE__*/React.createElement("div", {
       className: "absolute left-3 top-3 text-4xl font-semibold leading-none ".concat(isLight ? 'theme-text-soft' : '')
-    }, day.date.getDate()), /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "grid h-11 w-11 place-items-center rounded-full leading-[1] ".concat(isToday ? isLight ? 'ring-2 ring-violet-500/70 bg-violet-50' : 'ring-2 ring-violet-400/60 bg-white/[0.06]' : ''),
+      "aria-label": isToday ? 'Today' : undefined
+    }, day.date.getDate())), /*#__PURE__*/React.createElement("div", {
       className: "absolute right-3 top-3 flex gap-1 pt-1"
     }, day.bookingCount > 0 && /*#__PURE__*/React.createElement("span", {
       className: "h-3 w-3 rounded-full bg-violet-500"
     }), (day.blockCount > 0 || day.fullyBooked) && /*#__PURE__*/React.createElement("span", {
       className: "h-3 w-3 rounded-full bg-red-500"
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "mt-10 flex flex-col items-start gap-1.5 w-full"
+    })), dayItems.length > 0 ?
+    /*#__PURE__*/
+    /** 顶对齐：日期区为 top-3(12px) + h-11(44px)=56px，原先 mt-10(40px) 与数字圈底不齐，易多出一条缝 */
+    React.createElement("div", {
+      className: "mt-14 flex w-full flex-col items-start gap-1.5"
     }, dayItems.map(function (item, i) {
       var isLastVisible = i === dayItems.length - 1;
       var shrinkForMore = showMoreTile && isLastVisible;
-      var layoutClassName = "block rounded-md px-2 py-2 text-xs text-left ".concat(getGridBookingRowStateClasses(item), " ").concat(shrinkForMore ? 'flex-1 min-w-0' : 'w-full');
+      var layoutClassName = "block rounded-md px-2 pt-1.5 pb-2 text-xs text-left ".concat(getGridBookingRowStateClasses(item), " ").concat(shrinkForMore ? 'flex-1 min-w-0' : 'w-full');
       return /*#__PURE__*/React.createElement("div", {
         key: i,
         className: "flex w-full items-stretch gap-2"
@@ -150,6 +158,6 @@ export function BookingCalendarMonthView(_ref) {
         listWidth: 214,
         onPickItem: openBookingDetail
       })))));
-    })));
+    })) : null);
   })))));
 }