@pisell/materials 1.8.20 → 1.8.22

package/es/components/pisellTimeNavigator/PisellTimeNavigator.less

@@ -28,10 +28,6 @@
     -webkit-user-select: none;
   }
 
-  &--vertical .pisell-time-navigator-viewport-wrap {
-    min-height: 0;
-  }
-
   .pisell-time-navigator-cursor-fixed {
     position: absolute;
     left: 0;
@@ -65,6 +61,26 @@
   }
 
   &--vertical {
+    /* flex 子项内竖向轴须 min-height:0 + overflow，否则轴随内容无限增高、无法内部滚动 */
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+
+    .pisell-time-navigator-viewport-wrap {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .pisell-time-navigator-scroll-host {
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+    }
+
     .pisell-time-navigator-axis {
       flex-direction: column;
     }
@@ -85,7 +101,7 @@
   flex-shrink: 0;
 }
 
-/* 横向：当前时间渐变块，固定 82px 宽，在时间轴背后 */
+/* 横向：当前时间渐变块，宽度由 TS 的 CURRENT_TIME_GRADIENT_WIDTH_H_PX 决定，在时间轴背后 */
 .pisell-time-navigator-current-gradient {
   position: absolute;
   z-index: 0;
@@ -94,7 +110,8 @@
   &--horizontal {
     background: linear-gradient(to right,
     rgba(255, 255, 255, 0),
-    rgba(255, 105, 46, 0.5));
+    rgba(217, 78, 12, 0.38),
+    rgba(194, 65, 12, 0.62));
   }
 }
 
@@ -112,6 +129,15 @@
   flex-shrink: 0;
 }
 
+.pisell-time-navigator-density-layer {
+  position: absolute;
+  left: 0;
+  top: 1px;
+  z-index: 0;
+  pointer-events: none;
+  overflow: visible;
+}
+
 /* 背景层（营业时间、过去时间淡化等；当前时间渐变已拆出为独立块） */
 .pisell-time-navigator-background {
   position: absolute;
@@ -258,7 +284,8 @@
   &--horizontal {
     top: 0;
     height: 48px;
-    width: 3px; /* 与竖线同宽，left 已按竖线中心算，不再用 translateX(-50%) */
+    /** 与 CursorLayer CURSOR_ANCHOR_WIDTH_H / SVG 宽一致 */
+    width: 22px;
   }
 
   /* Figma 竖向：横线 2px 贯穿轴宽，气泡在横线上方居中，不超出 54px 轴宽 */
@@ -270,22 +297,55 @@
     transform: translateX(-50%);
   }
 
-  &--realtime .pisell-time-navigator-cursor-line,
   &--realtime .pisell-time-navigator-cursor-bubble {
     background: #ff692e;
   }
+
+  &--realtime .pisell-time-navigator-cursor-line:not(
+      .pisell-time-navigator-cursor-line--token
+    ) {
+    background: rgba(255, 105, 46, 0.55);
+  }
+
+  &--realtime .pisell-time-navigator-cursor-line--token {
+    color: rgba(255, 105, 46, 0.55);
+  }
+
+  &--draggable {
+    pointer-events: auto;
+    touch-action: none;
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  &--draggable.pisell-time-navigator-cursor--horizontal {
+    width: 36px;
+  }
+
+  &--draggable.pisell-time-navigator-cursor--vertical {
+    height: 40px;
+  }
 }
 
 .pisell-time-navigator-cursor-line {
   flex: 1;
   min-width: 3px;
   min-height: 2px;
-  background: #344054;
+  background: rgba(52, 64, 84, 0.55);
 }
 
-.pisell-time-navigator-cursor--horizontal .pisell-time-navigator-cursor-line {
-  width: 3px;
+/** 横向：顶三角 + 竖长条（SVG + currentColor） */
+.pisell-time-navigator-cursor-line--token {
+  display: block;
+  width: 22px;
+  flex: 1 1 auto;
+  min-width: 22px;
   min-height: 0;
+  background: transparent !important;
+  color: rgba(52, 64, 84, 0.55);
 }
 
 .pisell-time-navigator-cursor--vertical .pisell-time-navigator-cursor-line {
@@ -294,6 +354,24 @@
   min-width: 0;
 }
 
+/* 真实「此刻」：与指针气泡同尺寸/行高，锚在轴内当前时刻，橙色底（与渐变/实时色一致） */
+.pisell-time-navigator-current-time-bubble {
+  position: absolute;
+  z-index: 1;
+  bottom: 2px;
+  left: 0;
+  transform: translateX(-50%);
+  padding: 2px 6px;
+  border-radius: 2px;
+  background: #ff692e;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 12px;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
 .pisell-time-navigator-cursor-bubble {
   position: absolute;
   left: 50%;
@@ -304,13 +382,14 @@
   color: #fff;
   font-size: 12px;
   font-weight: 500;
-  line-height: 18px;
+  line-height: 12px;
   white-space: nowrap;
 }
 
-/* 横向：指针下方时间气泡的上边框对齐时间轴垂直中心 */
+/* 横向：时间气泡贴近轴带底边（48px 高区域底部） */
 .pisell-time-navigator-cursor--horizontal .pisell-time-navigator-cursor-bubble {
-  top: 50%;
+  top: auto;
+  bottom: 2px;
   margin-top: 0;
   padding: 2px 6px;
 }
@@ -324,7 +403,7 @@
   padding: 0 6px;
   border-radius: 4px;
   font-size: 12px;
-  line-height: 18px;
+  line-height: 12px;
 }
 
 /* 交互层 */
@@ -335,6 +414,8 @@
 
   &--horizontal {
     height: 100%;
+    width: 100%;
+    box-sizing: border-box;
   }
 
   &--vertical {

package/es/components/pisellTimeNavigator/components/BackgroundLayer.d.ts

@@ -11,4 +11,4 @@ export interface BackgroundLayerProps {
 /**
  * 背景区间层：营业时间高亮、过去时间淡化等（当前时间渐变已拆为独立块，见 axis-wrap 内 .pisell-time-navigator-current-gradient）
  */
-export declare function BackgroundLayer({ orientation, pastTimeFade, businessHoursPx, className, style, }: BackgroundLayerProps): JSX.Element;
+export declare function BackgroundLayer({ orientation, pastTimeFade, businessHoursPx, className, style, }: BackgroundLayerProps): React.JSX.Element;

package/es/components/pisellTimeNavigator/components/CursorLayer.d.ts

@@ -11,10 +11,15 @@ export interface CursorLayerProps {
     fixedCenter?: boolean;
     style?: React.CSSProperties;
     className?: string;
+    /** cursor-moves：允许拖指针改时间 */
+    dragInteractive?: boolean;
+    onDragPointerDown?: React.PointerEventHandler<HTMLDivElement>;
+    onDragPointerMove?: React.PointerEventHandler<HTMLDivElement>;
+    onDragPointerUp?: React.PointerEventHandler<HTMLDivElement>;
+    onDragPointerCancel?: React.PointerEventHandler<HTMLDivElement>;
 }
 /**
- * 时间指示器层：竖线/横线 + 时间气泡
- * 对齐基准为内部的竖线/横线，不是整块（气泡）的边或中心。
- * 横向：竖线 3px；竖向：横线 2px。Realtime 态 #FF692E，浏览态 #344054
+ * 时间指示器层：横向为「顶三角 + 竖长方条」SVG，竖向为横线 + 时间气泡
+ * 对齐基准为几何中心。Realtime 态 #FF692E，浏览态 #344054
  */
-export declare function CursorLayer({ orientation, value, timeFormat, locale, isRealtime, offsetPx, fixedCenter, style, className, }: CursorLayerProps): JSX.Element | null;
+export declare function CursorLayer({ orientation, value, timeFormat, locale, isRealtime, offsetPx, fixedCenter, style, className, dragInteractive, onDragPointerDown, onDragPointerMove, onDragPointerUp, onDragPointerCancel, }: CursorLayerProps): React.JSX.Element | null;

package/es/components/pisellTimeNavigator/components/CursorLayer.js

@@ -6,14 +6,16 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React from 'react';
 import classNames from 'classnames';
-/** 横向竖线宽度、竖向横线高度，用于以「线」为锚点定位，而非整块中心 */
-var CURSOR_LINE_WIDTH_H = 3;
+/**
+ * 横向：指针容器宽度，与 SVG viewBox 宽一致（几何居中于 offsetPx）。
+ * 竖向：横线高度的一半，用于 top 对齐。
+ */
+var CURSOR_ANCHOR_WIDTH_H = 22;
 var CURSOR_LINE_HEIGHT_V = 2;
 
 /**
- * 时间指示器层：竖线/横线 + 时间气泡
- * 对齐基准为内部的竖线/横线，不是整块（气泡）的边或中心。
- * 横向：竖线 3px；竖向：横线 2px。Realtime 态 #FF692E，浏览态 #344054
+ * 时间指示器层：横向为「顶三角 + 竖长方条」SVG，竖向为横线 + 时间气泡
+ * 对齐基准为几何中心。Realtime 态 #FF692E，浏览态 #344054
  */
 export function CursorLayer(_ref) {
   var orientation = _ref.orientation,
@@ -24,21 +26,50 @@ export function CursorLayer(_ref) {
     offsetPx = _ref.offsetPx,
     fixedCenter = _ref.fixedCenter,
     style = _ref.style,
-    className = _ref.className;
+    className = _ref.className,
+    dragInteractive = _ref.dragInteractive,
+    onDragPointerDown = _ref.onDragPointerDown,
+    onDragPointerMove = _ref.onDragPointerMove,
+    onDragPointerUp = _ref.onDragPointerUp,
+    onDragPointerCancel = _ref.onDragPointerCancel;
   if (value == null) return null;
   var label = locale ? value.locale(locale).format(timeFormat) : value.format(timeFormat);
   var isHorizontal = orientation === 'horizontal';
-  /** 以竖线/横线中心为 offsetPx，故定位到 offsetPx - 线宽/2 */
-  var lineOffset = offsetPx - (isHorizontal ? CURSOR_LINE_WIDTH_H / 2 : CURSOR_LINE_HEIGHT_V / 2);
+  /** 以指针水平/垂直中心为 offsetPx，故定位到 offsetPx - 锚宽(高)的一半 */
+  var lineOffset = offsetPx - (isHorizontal ? CURSOR_ANCHOR_WIDTH_H / 2 : CURSOR_LINE_HEIGHT_V / 2);
+  var positionStyle = fixedCenter ? style !== null && style !== void 0 ? style : {} : dragInteractive && isHorizontal ? _objectSpread(_objectSpread({}, style), {}, {
+    left: offsetPx,
+    transform: 'translateX(-50%)',
+    width: 36
+  }) : dragInteractive && !isHorizontal ? _objectSpread(_objectSpread({}, style), {}, {
+    top: offsetPx,
+    transform: 'translateX(-50%) translateY(-50%)',
+    height: 40
+  }) : _objectSpread(_objectSpread({}, style), {}, _defineProperty({}, isHorizontal ? 'left' : 'top', lineOffset));
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('pisell-time-navigator-cursor', "pisell-time-navigator-cursor--".concat(orientation), {
       'pisell-time-navigator-cursor--realtime': isRealtime
     }, {
       'pisell-time-navigator-cursor--fixed': fixedCenter
+    }, {
+      'pisell-time-navigator-cursor--draggable': dragInteractive
     }, className),
-    style: fixedCenter ? style : _objectSpread(_objectSpread({}, style), {}, _defineProperty({}, isHorizontal ? 'left' : 'top', lineOffset)),
+    style: positionStyle,
+    "aria-hidden": true,
+    onPointerDown: dragInteractive ? onDragPointerDown : undefined,
+    onPointerMove: dragInteractive ? onDragPointerMove : undefined,
+    onPointerUp: dragInteractive ? onDragPointerUp : undefined,
+    onPointerCancel: dragInteractive ? onDragPointerCancel : undefined
+  }, isHorizontal ? /*#__PURE__*/React.createElement("svg", {
+    className: "pisell-time-navigator-cursor-line pisell-time-navigator-cursor-line--token",
+    viewBox: "0 0 22 100",
+    preserveAspectRatio: "none",
+    focusable: "false",
     "aria-hidden": true
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M 11 0 L 18 11 L 18 100 L 4 100 L 4 11 Z"
+  })) : /*#__PURE__*/React.createElement("span", {
     className: "pisell-time-navigator-cursor-line"
   }), /*#__PURE__*/React.createElement("span", {
     className: "pisell-time-navigator-cursor-bubble"

package/es/components/pisellTimeNavigator/components/GestureLayer.d.ts

@@ -23,9 +23,11 @@ export interface GestureLayerProps {
     onPointerMove?: React.PointerEventHandler;
     onPointerUp?: React.PointerEventHandler;
     onPointerLeave?: React.PointerEventHandler;
+    /** 轴上任意指针按下（含惯性拖轴） */
+    onUserInteraction?: () => void;
     children: React.ReactNode;
 }
 /**
  * 交互层：点击刻度跳转、键盘左右/上下 + 回车
  */
-export declare function GestureLayer({ orientation, cellSizePx, axisStartMarginPx, offsetToTime, onSelectTime, isInDisabledRanges, snapToStep, stepMinutes, snapFn, scrollPosition, viewportSize, onPointerDown, onPointerMove, onPointerUp, onPointerLeave, children, }: GestureLayerProps): JSX.Element;
+export declare function GestureLayer({ orientation, cellSizePx, axisStartMarginPx, offsetToTime, onSelectTime, isInDisabledRanges, snapToStep, stepMinutes, snapFn, scrollPosition, viewportSize, onPointerDown, onPointerMove, onPointerUp, onPointerLeave, onUserInteraction, children, }: GestureLayerProps): React.JSX.Element;

package/es/components/pisellTimeNavigator/components/GestureLayer.js

@@ -18,9 +18,11 @@ export function GestureLayer(_ref) {
     onPointerMove = _ref.onPointerMove,
     onPointerUp = _ref.onPointerUp,
     onPointerLeave = _ref.onPointerLeave,
+    onUserInteraction = _ref.onUserInteraction,
     children = _ref.children;
   var isHorizontal = orientation === 'horizontal';
   var handleClick = useCallback(function (e) {
+    onUserInteraction === null || onUserInteraction === void 0 || onUserInteraction();
     var viewport = e.currentTarget.parentElement;
     if (!viewport) return;
     var vRect = viewport.getBoundingClientRect();
@@ -32,7 +34,7 @@ export function GestureLayer(_ref) {
     var candidate = snapToStep ? snapFn(t) : t;
     if (isInDisabledRanges(candidate)) return;
     onSelectTime(candidate);
-  }, [isHorizontal, axisStartMarginPx, offsetToTime, onSelectTime, isInDisabledRanges, snapToStep, snapFn]);
+  }, [isHorizontal, axisStartMarginPx, offsetToTime, onSelectTime, isInDisabledRanges, snapToStep, snapFn, onUserInteraction]);
   var handleKeyDown = useCallback(function (e) {
     var scrollContentCenter = orientation === 'horizontal' ? scrollPosition.scrollLeft + viewportSize.w / 2 : scrollPosition.scrollTop + viewportSize.h / 2;
     var centerOffset = Math.max(0, scrollContentCenter - axisStartMarginPx);
@@ -40,7 +42,10 @@ export function GestureLayer(_ref) {
     if (currentTime == null) return;
     if (e.key === 'Enter') {
       var candidate = snapToStep ? snapFn(currentTime) : currentTime;
-      if (!isInDisabledRanges(candidate)) onSelectTime(candidate);
+      if (!isInDisabledRanges(candidate)) {
+        onUserInteraction === null || onUserInteraction === void 0 || onUserInteraction();
+        onSelectTime(candidate);
+      }
       e.preventDefault();
       return;
     }
@@ -53,14 +58,18 @@ export function GestureLayer(_ref) {
     }
     e.preventDefault();
     var snapped = snapToStep ? snapFn(next) : next;
-    if (!isInDisabledRanges(snapped)) onSelectTime(snapped);
-  }, [orientation, axisStartMarginPx, offsetToTime, onSelectTime, isInDisabledRanges, snapToStep, snapFn, stepMinutes, scrollPosition.scrollLeft, scrollPosition.scrollTop, viewportSize.w, viewportSize.h]);
+    if (!isInDisabledRanges(snapped)) {
+      onUserInteraction === null || onUserInteraction === void 0 || onUserInteraction();
+      onSelectTime(snapped);
+    }
+  }, [orientation, axisStartMarginPx, offsetToTime, onSelectTime, isInDisabledRanges, snapToStep, snapFn, stepMinutes, scrollPosition.scrollLeft, scrollPosition.scrollTop, viewportSize.w, viewportSize.h, onUserInteraction]);
   var handlePointerDown = useCallback(function (e) {
+    onUserInteraction === null || onUserInteraction === void 0 || onUserInteraction();
     if (onPointerDown) {
       e.currentTarget.setPointerCapture(e.pointerId);
       onPointerDown(e);
     }
-  }, [onPointerDown]);
+  }, [onPointerDown, onUserInteraction]);
   var handlePointerUp = useCallback(function (e) {
     if (onPointerUp) {
       e.currentTarget.releasePointerCapture(e.pointerId);

package/es/components/pisellTimeNavigator/components/NowButton.d.ts

@@ -11,4 +11,4 @@ export interface NowButtonProps {
  * Now 按钮：固定入口，点击跳回当前时间并进入 Realtime
  * 横向：右侧，左箭头；竖向：底部，上箭头
  */
-export declare function NowButton({ orientation, onClick, style, className, renderCustom, }: NowButtonProps): JSX.Element;
+export declare function NowButton({ orientation, onClick, style, className, renderCustom, }: NowButtonProps): React.JSX.Element;

package/es/components/pisellTimeNavigator/components/ScaleLayer.d.ts

@@ -9,9 +9,14 @@ export interface ScaleLayerProps {
     locale?: string;
     style?: React.CSSProperties;
     className?: string;
+    /**
+     * 横向每格宽度（px），须与 useTimeAxis 的 cellSizePx 一致；
+     * 不传时样式表默认 82（axis-moves）；cursor-moves 压缩比例时必传
+     */
+    horizontalCellSizePx?: number;
 }
 /**
  * 刻度层：渲染时间刻度与标签
  * 横向：整点数字 + 小圆点；竖向：整点/半点数字 + 分割线
  */
-export declare function ScaleLayer({ orientation, ticks, stepMinutes, majorStepMinutes, timeFormat, locale, style, className, }: ScaleLayerProps): JSX.Element;
+export declare function ScaleLayer({ orientation, ticks, stepMinutes, majorStepMinutes, timeFormat, locale, style, className, horizontalCellSizePx, }: ScaleLayerProps): React.JSX.Element;

package/es/components/pisellTimeNavigator/components/ScaleLayer.js

@@ -1,3 +1,9 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React from 'react';
 import classNames from 'classnames';
 /**
@@ -12,7 +18,8 @@ export function ScaleLayer(_ref) {
     timeFormat = _ref.timeFormat,
     locale = _ref.locale,
     style = _ref.style,
-    className = _ref.className;
+    className = _ref.className,
+    horizontalCellSizePx = _ref.horizontalCellSizePx;
   var isHorizontal = orientation === 'horizontal';
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('pisell-time-navigator-scale', "pisell-time-navigator-scale--".concat(orientation), className),
@@ -22,13 +29,28 @@ export function ScaleLayer(_ref) {
     /** 横向整点只展示小时，非整点用 timeFormat；竖向沿用 timeFormat */
     var label = isHorizontal && isMajor ? locale ? tick.locale(locale).format('H') : tick.format('H') : locale ? tick.locale(locale).format(timeFormat) : tick.format(timeFormat);
     if (isHorizontal) {
+      var cw = horizontalCellSizePx != null && horizontalCellSizePx > 0 ? horizontalCellSizePx : undefined;
+      var compactPad = cw != null ? cw < 36 ? 2 : cw < 52 ? 6 : 10 : undefined;
       return /*#__PURE__*/React.createElement("div", {
         key: i,
         className: classNames('pisell-time-navigator-scale-cell', 'pisell-time-navigator-scale-cell--h', {
           'pisell-time-navigator-scale-cell--major': isMajor
-        })
+        }),
+        style: cw != null ? _objectSpread({
+          width: cw,
+          minWidth: cw,
+          maxWidth: cw,
+          flex: '0 0 auto',
+          boxSizing: 'border-box'
+        }, compactPad != null ? {
+          padding: compactPad
+        } : {}) : undefined
       }, isMajor && /*#__PURE__*/React.createElement("span", {
-        className: "pisell-time-navigator-scale-label"
+        className: "pisell-time-navigator-scale-label",
+        style: cw != null && cw < 48 ? {
+          fontSize: Math.max(10, Math.round(cw * 0.32)),
+          lineHeight: 1.15
+        } : undefined
       }, label), !isMajor && /*#__PURE__*/React.createElement("span", {
         className: "pisell-time-navigator-scale-dot",
         "aria-hidden": true

package/es/components/pisellTimeNavigator/types.d.ts

@@ -142,4 +142,19 @@ export interface PisellTimeNavigatorProps {
      * 自定义 Now 按钮内容（覆盖默认文案与图标时使用）
      */
     renderNowButton?: () => ReactNode;
+    /**
+     * 横向轴上与刻度槽位数一致的密度序列（任意正数，内部按最大值归一化折线高度）
+     */
+    densitySeries?: number[];
+    /**
+     * 未传 `densitySeries` 时按 `referenceDate` 拉取；日历日变更会重新请求，过期响应丢弃
+     */
+    loadDensity?: (params: {
+        referenceDate: Dayjs;
+        stepMinutes: number;
+    }) => Promise<number[]>;
+    /**
+     * 用户开始操作时间轴（拖轴、点刻度、键盘、拖指针等）时回调；用于上层关闭「跟随当前」等。
+     */
+    onUserInteraction?: () => void;
 }

package/es/components/pisellTimeNavigator/utils/index.d.ts

@@ -24,3 +24,7 @@ export declare function isInDisabledRanges(t: Dayjs, disabledRanges: TimeRangeOp
  * 在 [rangeStart, rangeEnd] 内按 stepMinutes 生成刻度时间列表（Dayjs）
  */
 export declare function getTicks(rangeStart: Dayjs, rangeEnd: Dayjs, stepMinutes: number): Dayjs[];
+/**
+ * 横向时间轴「格」数量，与 useTimeAxis 中 totalLengthPx 算法一致（含尾格）
+ */
+export declare function getHorizontalAxisSlotCount(range: TimeRangeOption | undefined, referenceDate: Dayjs, stepMinutes: number): number;

package/es/components/pisellTimeNavigator/utils/index.js

@@ -99,4 +99,18 @@ export function getTicks(rangeStart, rangeEnd, stepMinutes) {
     cur = cur.add(stepMinutes, 'minute');
   }
   return out;
+}
+
+/**
+ * 横向时间轴「格」数量，与 useTimeAxis 中 totalLengthPx 算法一致（含尾格）
+ */
+export function getHorizontalAxisSlotCount(range, referenceDate, stepMinutes) {
+  var _getRangeBounds3 = getRangeBounds(range, referenceDate),
+    _getRangeBounds4 = _slicedToArray(_getRangeBounds3, 2),
+    rangeStart = _getRangeBounds4[0],
+    rangeEnd = _getRangeBounds4[1];
+  var ticks = getTicks(rangeStart, rangeEnd, stepMinutes);
+  var lastTick = ticks.length > 0 ? ticks[ticks.length - 1] : null;
+  var needTailCell = lastTick != null && rangeEnd.isAfter(lastTick);
+  return ticks.length + (needTailCell ? 1 : 0);
 }

package/es/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+import type { PisellTimeRangeDisplayProps } from './types';
+import './PisellTimeRangeDisplay.less';
+/**
+ * PisellTimeRangeDisplay 组件
+ *
+ * @description
+ * 纯展示型时间区间组件，将 startAt / endAt 格式化为「时间区间 + 持续时间」。
+ * - 同一天：HH:mm-HH:mm，可选显示日期/星期
+ * - 跨天：起止日期时间
+ * - 持续时间：d h m s 格式
+ * - 字段顺序由 fieldOrder 控制，可将 duration 放在中间
+ *
+ * @example
+ * <PisellTimeRangeDisplay
+ *   startAt="2026-02-04 09:00"
+ *   endAt="2026-02-04 18:00"
+ * />
+ * // => "09:00-18:00" + "9h"
+ *
+ * <PisellTimeRangeDisplay
+ *   startAt={start}
+ *   endAt={end}
+ *   fields={{ fieldOrder: ['time', 'duration', 'date', 'weekday'] }}
+ *   showDateForSameDay
+ * />
+ */
+export declare const PisellTimeRangeDisplay: React.FC<PisellTimeRangeDisplayProps>;
+declare const _default: React.NamedExoticComponent<PisellTimeRangeDisplayProps>;
+export default _default;

package/es/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.stories.d.ts

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellTimeRangeDisplay } from './PisellTimeRangeDisplay';
+/**
+ * PisellTimeRangeDisplay 组件 Storybook
+ * 用于时间区间 + 持续时长的展示（同一天 / 跨天）
+ */
+declare const meta: Meta<typeof PisellTimeRangeDisplay>;
+export default meta;
+declare type Story = StoryObj<typeof PisellTimeRangeDisplay>;
+/**
+ * 默认：同一天时间区间 + 持续时长
+ */
+export declare const Default: Story;
+/**
+ * 同一天 + 显示日期与星期
+ */
+export declare const SameDayWithDate: Story;
+/**
+ * 跨天时间区间
+ */
+export declare const CrossDay: Story;
+/**
+ * 跨年
+ */
+export declare const CrossYear: Story;
+/**
+ * 持续时间在中间（默认 fieldOrder）
+ */
+export declare const DurationInMiddle: Story;
+/**
+ * 持续时长在前
+ */
+export declare const DurationFirst: Story;
+/**
+ * 持续时长显示秒
+ */
+export declare const DurationWithSeconds: Story;
+/**
+ * 仅时间区间 + 持续时长（不显示日期星期）
+ */
+export declare const TimeAndDurationOnly: Story;
+/**
+ * 12 小时制
+ */
+export declare const Time12Hour: Story;
+/**
+ * 中文（日期 + 持续时长「天/时/分/秒」i18n）
+ */
+export declare const LocaleZhCN: Story;
+/**
+ * 英文（日期 + 持续时长 d/h/m/s）
+ */
+export declare const LocaleEn: Story;
+/**
+ * 小宽度：容器较窄时按块换行
+ */
+export declare const NarrowWidth: Story;
+/**
+ * 自定义容器样式
+ */
+export declare const CustomContainerStyle: Story;

package/es/components/pisellTimeRangeDisplay/components/DateBlock.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { type Dayjs } from 'dayjs';
+import type { DateFormatConfig, TextStyleConfig } from '../types';
+export interface DateBlockProps {
+    /** 日期对象 */
+    date: Dayjs;
+    /** 日期格式配置（含 showRelativeDay：今天/昨天/明天） */
+    format?: DateFormatConfig;
+    /** 参考日期，用于相对日判定，默认 dayjs() */
+    referenceDate?: Dayjs;
+    /** 文本样式 */
+    style?: TextStyleConfig;
+    /** 自定义类名 */
+    className?: string;
+}
+/**
+ * 日期展示块（复用 PisellDateTimeDisplay 的 formatDate 与相对日逻辑）
+ */
+export declare const DateBlock: React.FC<DateBlockProps>;
+export default DateBlock;

package/es/components/pisellTimeRangeDisplay/components/DurationBlock.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { TextStyleConfig } from '../types';
+export interface DurationBlockProps {
+    /** 持续时间（毫秒） */
+    durationMs: number;
+    /** 是否显示秒 */
+    showSeconds?: boolean;
+    /** 语言代码，zh 时使用「天/时/分/秒」 */
+    locale?: string;
+    /** 文本样式 */
+    style?: TextStyleConfig;
+    /** 自定义类名 */
+    className?: string;
+}
+/**
+ * 持续时长展示块（d h m s 或 天/时/分/秒，按 locale i18n）
+ */
+export declare const DurationBlock: React.FC<DurationBlockProps>;
+export default DurationBlock;

package/es/components/pisellTimeRangeDisplay/components/TimeRangeBlock.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { type Dayjs } from 'dayjs';
+import type { TimeFormatConfig, DateFormatConfig, WeekdayFormatConfig, TextStyleConfig } from '../types';
+export interface TimeRangeBlockProps {
+    /** 开始时间 */
+    start: Dayjs;
+    /** 结束时间 */
+    end: Dayjs;
+    /** 是否同一天 */
+    isSameDay: boolean;
+    /** 时间格式配置 */
+    timeFormat?: TimeFormatConfig;
+    /** 日期格式配置（跨天时用于起止日期，含 showRelativeDay） */
+    dateFormat?: DateFormatConfig;
+    /** 星期格式配置（跨天时用于「Sat, 22 Jan」） */
+    weekdayFormat?: WeekdayFormatConfig;
+    /** 参考日期，用于相对日判定，默认 dayjs() */
+    referenceDate?: Dayjs;
+    /** 文本样式 */
+    style?: TextStyleConfig;
+    /** 自定义类名 */
+    className?: string;
+}
+/**
+ * 时间区间展示块
+ * - 同一天：HH:mm-HH:mm
+ * - 跨天：起止完整日期时间；若某端为相对日（今天/昨天/明天）则只显示「时间 相对日」，不显示星期+日期
+ */
+export declare const TimeRangeBlock: React.FC<TimeRangeBlockProps>;
+export default TimeRangeBlock;