@pisell/materials 6.11.42 → 6.11.44

package/es/components/pisellTimeNavigator/PisellTimeNavigator.js

@@ -25,24 +25,7 @@ import { locales } from '@pisell/utils';
 import pisellTimeNavigatorLocales from "./locales";
 import "./PisellTimeNavigator.less";
 import useEngineContext from "../../hooks/useEngineContext";
-
-/** 横向每格宽度（px），Figma 约 82；axis-moves 固定用此值，cursor-moves 时按视口压缩以看全 range */
-var CELL_SIZE_H = 82;
-/**
- * 横向「此刻」橙区目标宽度（px）：按 axis-moves 下一格多的比例换算，滚动轴与 cursor-moves 压格时同宽；
- * 不用压缩后的 cellSizePx，避免指针模式下渐变过窄。
- */
-var CURRENT_TIME_GRADIENT_WIDTH_H_PX = Math.round(CELL_SIZE_H * 1.7);
-/** 竖向每格高度（px） */
-var CELL_SIZE_V = 20;
-/** 横向「Now」按钮占位，避免刻度被挡 */
-var CURSOR_MOVES_NOW_RESERVE_PX = 56;
-/** cursor-moves 横向：轴与视口左右边距 */
-var CURSOR_MOVES_H_PADDING_PX = 8;
-/** cursor-moves 横向：每格最小宽度（再小刻度不可读） */
-var CURSOR_MOVES_MIN_CELL_PX = 8;
-/** 密度层高度：时间轴 48px 内留少量上下边距 */
-var DENSITY_LAYER_HEIGHT = 46;
+import { CELL_SIZE_H, CELL_SIZE_V, CURRENT_TIME_GRADIENT_WIDTH_H_PX, CURSOR_MOVES_H_PADDING_PX, CURSOR_MOVES_MIN_CELL_PX, CURSOR_MOVES_NOW_RESERVE_PX, DENSITY_LAYER_HEIGHT } from "./timeNavigatorConstants";
 
 /**
  * PisellTimeNavigator：可拖动的时间导航轴，时间范围内浏览、选择、控制
@@ -275,10 +258,75 @@ export function PisellTimeNavigator(props) {
 
   /** cursor-moves：拖指针时禁止程序性滚动抢焦点 */
   var cursorDragActiveRef = useRef(false);
+  /**
+   * 拖拽起点 + 缩放系数。
+   * `pxPerClient` 把 `clientX` 的屏幕 CSS 像素换算成轴内本地像素（offsetPx 的单位）。
+   * 没有变换时为 1；当祖先元素带有 `transform: scale(n)` 或浏览器在 iPad 等设备上对页面整体做了
+   * 视觉缩放时，`getBoundingClientRect().width / offsetWidth` 会反映出渲染缩放系数 n。
+   * 不做这层换算的话，手指走的屏幕距离会被原样累加到 offsetPx 上，但光标视觉位置经过 scale(n) 后
+   * 只走 n*delta，于是用户感知"拖了 10 小时但时间只走了 9 小时"（典型 9/10 ≈ 0.9 倍 scale）。
+   */
   var cursorDragBaseRef = useRef({
     startClient: 0,
-    startOffset: 0
+    startOffset: 0,
+    pxPerClient: 1
   });
+
+  /**
+   * 计算 viewportWrapRef 当前的渲染缩放系数（screenPx → 本地 px 倍率）。
+   * 若元素未挂载或宽度异常则返回 1，永不放大放小本意外的 delta。
+   */
+  var measureWrapPxPerClient = useCallback(function () {
+    var el = viewportWrapRef.current;
+    if (!el) return 1;
+    var rect = el.getBoundingClientRect();
+    var layout = isHorizontal ? el.offsetWidth : el.offsetHeight;
+    var rendered = isHorizontal ? rect.width : rect.height;
+    if (!layout || !rendered) return 1;
+    var scale = rendered / layout;
+    if (!Number.isFinite(scale) || scale <= 0.01) return 1;
+    return 1 / scale;
+  }, [isHorizontal]);
+  /**
+   * 指针气泡放大反馈：仅 down/up/cancel 各触发一次重渲染（move 事件不参与），
+   * 拖拽过程中不会引起轴体重排。
+   */
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isCursorDragging = _useState12[0],
+    setIsCursorDragging = _useState12[1];
+
+  /**
+   * 拖拽性能：受控模式下 onChange 会让父级（如 PisellReservation）整页重渲，
+   * 触控环境下尤其明显（手指仍按着但光标卡帧）。
+   *
+   * 解决策略 = 「视觉本地 + onChange 提交一次」：
+   * - 拖拽过程中只更新本地 dragVisualOffsetPx（轻量 state，仅本组件重渲），
+   *   光标和气泡跟着这个 offset 移动，跟手且廉价；
+   * - 不调用 onChange / setInternalValue，父级和兄弟组件完全不知道在拖；
+   * - 松手时清空本地 offset 并一次性 applyOffsetToNavigatorValue(_, true)，
+   *   走 snap → onChange → 父级 setState 的正常路径。React 18 自动批处理，
+   *   父级 valueProp 更新与本地 dragVisualOffsetPx 清零会合并成一次 render，
+   *   不会出现「松手 → 旧值 → 新值」的回闪。
+   *
+   * 同帧多次 move 用 rAF 再折叠一层，应对高频鼠标 / 高刷设备。
+   */
+  var _useState13 = useState(null),
+    _useState14 = _slicedToArray(_useState13, 2),
+    dragVisualOffsetPx = _useState14[0],
+    setDragVisualOffsetPx = _useState14[1];
+  var pendingDragOffsetRef = useRef(null);
+  var dragRafIdRef = useRef(null);
+  var cancelPendingDragFrame = useCallback(function () {
+    if (dragRafIdRef.current != null) {
+      cancelAnimationFrame(dragRafIdRef.current);
+      dragRafIdRef.current = null;
+    }
+    pendingDragOffsetRef.current = null;
+  }, []);
+  useEffect(function () {
+    return cancelPendingDragFrame;
+  }, [cancelPendingDragFrame]);
   var getScrollContainer = useCallback(function () {
     var _scrollRef$current$ge, _scrollRef$current, _scrollRef$current$ge2;
     return (_scrollRef$current$ge = (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || (_scrollRef$current$ge2 = _scrollRef$current.getScrollContainer) === null || _scrollRef$current$ge2 === void 0 ? void 0 : _scrollRef$current$ge2.call(_scrollRef$current)) !== null && _scrollRef$current$ge !== void 0 ? _scrollRef$current$ge : null;
@@ -448,6 +496,18 @@ export function PisellTimeNavigator(props) {
     });
   }, [referenceDayMs, isControlled, defaultValue]);
   var cursorOffsetPx = axis.timeToOffset(effectiveValue);
+
+  /**
+   * 拖拽视觉态：当用户正在拖动时，dragVisualOffsetPx 记录最新本地 offset，
+   * 光标和拖拽气泡都用 visualCursorOffsetPx / visualValue，本组件自己消化高频更新；
+   * 父级直到松手才会通过 onChange 收到一次最终值（带 snap）。
+   */
+  var visualCursorOffsetPx = dragVisualOffsetPx !== null && dragVisualOffsetPx !== void 0 ? dragVisualOffsetPx : cursorOffsetPx;
+  var visualValue = useMemo(function () {
+    var _axis$offsetToTimeCon;
+    if (dragVisualOffsetPx == null) return effectiveValue;
+    return (_axis$offsetToTimeCon = axis.offsetToTimeContinuous(dragVisualOffsetPx)) !== null && _axis$offsetToTimeCon !== void 0 ? _axis$offsetToTimeCon : effectiveValue;
+  }, [dragVisualOffsetPx, axis.offsetToTimeContinuous, effectiveValue]);
   /** 刻度「现在线」：真实系统时刻落在轴区间内时绘制（含跨日营业次日凌晨） */
   var wallAligned = dayjs().startOf('minute');
   var currentTimeInRange = !wallAligned.isBefore(axis.rangeStart) && !wallAligned.isAfter(axis.rangeEnd);
@@ -563,32 +623,72 @@ export function PisellTimeNavigator(props) {
     cursorDragActiveRef.current = true;
     cursorDragBaseRef.current = {
       startClient: isHorizontal ? e.clientX : e.clientY,
-      startOffset: cursorOffsetPx
+      startOffset: cursorOffsetPx,
+      pxPerClient: measureWrapPxPerClient()
     };
     valueUpdatedByScrollRef.current = true;
+    setIsCursorDragging(true);
     e.currentTarget.setPointerCapture(e.pointerId);
-  }, [userInteractionLocked, isAxisMoves, isHorizontal, cursorOffsetPx, onUserInteraction]);
+  }, [userInteractionLocked, isAxisMoves, isHorizontal, cursorOffsetPx, onUserInteraction, measureWrapPxPerClient]);
   var handleCursorDragPointerMove = useCallback(function (e) {
     if (!cursorDragActiveRef.current) return;
     var client = isHorizontal ? e.clientX : e.clientY;
-    var delta = client - cursorDragBaseRef.current.startClient;
+    var screenDelta = client - cursorDragBaseRef.current.startClient;
+    /**
+     * 把 clientX 的屏幕 CSS 像素 delta 折算成轴本地像素。
+     * 没有 CSS 缩放时 pxPerClient=1；祖先有 transform: scale(0.9) 等情况下，
+     * 1 屏幕 px 对应 1/0.9 ≈ 1.11 本地 px，否则 offsetPx 走得不够，
+     * 表现为"光标跟不上手指、时间轴比手指走得近"。
+     */
+    var delta = screenDelta * (cursorDragBaseRef.current.pxPerClient || 1);
     var nextOff = cursorDragBaseRef.current.startOffset + delta;
-    applyOffsetToNavigatorValue(nextOff, false);
-  }, [isHorizontal, applyOffsetToNavigatorValue]);
+    /**
+     * rAF 节流 + 仅更新本地视觉 offset：
+     * - 不调用 onChange，避免父级（reservation 主页 / 楼层图 / 排程带等）
+     *   每帧重渲，触控环境下尤其明显；
+     * - 只更新本地 dragVisualOffsetPx，光标 + 拖拽气泡通过它定位，
+     *   再叠加 rAF 把同帧多次 move 合并成一次 setState。
+     * 真正提交 onChange 只发生在 pointerUp。
+     */
+    pendingDragOffsetRef.current = nextOff;
+    if (dragRafIdRef.current != null) return;
+    dragRafIdRef.current = requestAnimationFrame(function () {
+      dragRafIdRef.current = null;
+      var pending = pendingDragOffsetRef.current;
+      pendingDragOffsetRef.current = null;
+      if (pending == null) return;
+      if (!cursorDragActiveRef.current) return;
+      var maxO = Math.max(0, axis.totalLengthPx - 0.001);
+      var clamped = Math.max(0, Math.min(pending, maxO));
+      setDragVisualOffsetPx(clamped);
+    });
+  }, [isHorizontal, axis.totalLengthPx]);
   var handleCursorDragPointerUp = useCallback(function (e) {
     if (!cursorDragActiveRef.current) return;
     cursorDragActiveRef.current = false;
+    setIsCursorDragging(false);
     try {
       e.currentTarget.releasePointerCapture(e.pointerId);
     } catch (_unused) {
       /* already released */
     }
     var client = isHorizontal ? e.clientX : e.clientY;
-    var delta = client - cursorDragBaseRef.current.startClient;
+    var screenDelta = client - cursorDragBaseRef.current.startClient;
+    var delta = screenDelta * (cursorDragBaseRef.current.pxPerClient || 1);
     var nextOff = cursorDragBaseRef.current.startOffset + delta;
     valueUpdatedByScrollRef.current = false;
+    /**
+     * 松手时：
+     * 1) 取消未消费的 rAF 帧（已被最终 offset 取代）；
+     * 2) 清空本地视觉 offset 并 apply 最终值（snap=true）。
+     *    React 18 自动批处理：setDragVisualOffsetPx(null) 与父级响应
+     *    onChange 后回填的 valueProp 会合并成同一次渲染，不会出现
+     *    「松手 → 旧值 → 新值」的回闪。
+     */
+    cancelPendingDragFrame();
+    setDragVisualOffsetPx(null);
     applyOffsetToNavigatorValue(nextOff, true);
-  }, [isHorizontal, applyOffsetToNavigatorValue]);
+  }, [isHorizontal, applyOffsetToNavigatorValue, cancelPendingDragFrame]);
   var businessHoursPx = useMemo(function () {
     if (!businessHours) return undefined;
     var _getRangeBounds5 = getRangeBounds(businessHours, referenceDate),
@@ -648,6 +748,7 @@ export function PisellTimeNavigator(props) {
     cellSizePx: cellSizePx,
     axisStartMarginPx: isHorizontal ? axisStartMarginW : axisStartMarginH,
     offsetToTime: axis.offsetToTime,
+    offsetToTimeContinuous: axis.offsetToTimeContinuous,
     onSelectTime: handleSelectTime,
     isInDisabledRanges: isInDisabled,
     snapToStep: snapToStep,
@@ -754,18 +855,27 @@ export function PisellTimeNavigator(props) {
     "aria-hidden": true
   }), !isAxisMoves && /*#__PURE__*/React.createElement(CursorLayer, {
     orientation: orientation,
-    value: effectiveValue,
+    value: visualValue,
     timeFormat: timeFormat,
     locale: locale,
     isRealtime: realtime,
-    offsetPx: cursorOffsetPx,
+    offsetPx: visualCursorOffsetPx,
     style: cursorStyle,
     dragInteractive: !userInteractionLocked,
+    isDragging: isCursorDragging,
     onDragPointerDown: handleCursorDragPointerDown,
     onDragPointerMove: handleCursorDragPointerMove,
     onDragPointerUp: handleCursorDragPointerUp,
     onDragPointerCancel: handleCursorDragPointerUp
-  })))))), isAxisMoves && /*#__PURE__*/React.createElement("div", {
+  })))))), !isAxisMoves && isHorizontal && isCursorDragging && visualValue != null && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-time-navigator-drag-bubble-overlay",
+    "aria-hidden": true
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classNames('pisell-time-navigator-drag-bubble', realtime && 'pisell-time-navigator-drag-bubble--realtime'),
+    style: {
+      left: axisStartMarginW + visualCursorOffsetPx - scrollPosition.scrollLeft
+    }
+  }, locale ? visualValue.locale(locale).format(timeFormat) : visualValue.format(timeFormat))), isAxisMoves && /*#__PURE__*/React.createElement("div", {
     className: classNames('pisell-time-navigator-cursor-fixed', "pisell-time-navigator-cursor-fixed--".concat(orientation)),
     "aria-hidden": true
   }, /*#__PURE__*/React.createElement(CursorLayer, {

package/es/components/pisellTimeNavigator/PisellTimeNavigator.less

@@ -167,7 +167,7 @@
   z-index: 1;
 
   &--horizontal {
-    height: 30px;
+    height: 48px;
     align-items: center;
     flex-direction: row;
   }
@@ -193,21 +193,31 @@
     padding: 2px 4px;
     flex-direction: column;
     gap: 0;
-    /* 整点：点固定在格子水平中心、底部；非整点：点垂直居中 */
+    /**
+     * 设计调整：刻度点与时间数字整体靠下贴近底边（与上方 cursor 翻转后三角向下指刻度的视觉相呼应）。
+     * 整点：点贴底；label 用 absolute 抠到底部，不挤占 cell 内容流。
+     * 非整点：原本垂直居中的小点同样贴底，与整点点对齐成一条线。
+     *
+     * 父层 `.pisell-time-navigator-scale--horizontal` 用 `align-items: center` 把 cell 在
+     * 48px 高度内垂直居中，但 cell 自身只靠 padding 撑高 → cell 实际只有几像素，
+     * `bottom: 2px` 自然就贴在 cell 顶端附近（视觉上看像贴在轴的「中上」）。
+     * 这里显式 `align-self: stretch + height: 100%`，让 cell 占满 48px 全高，
+     * 再 absolute `bottom: 2px` 才会真正贴在轴的底边。
+     */
+    align-self: stretch;
+    height: 100%;
 
     .pisell-time-navigator-scale-dot {
       position: absolute;
       left: 50%;
-      bottom: 4px;
+      bottom: 14px;
       transform: translateX(-50%);
     }
 
-    /* 非整点仅有小点，垂直居中 */
-
     &:not(.pisell-time-navigator-scale-cell--major) .pisell-time-navigator-scale-dot {
-      top: 50%;
-      bottom: auto;
-      transform: translate(-50%, -50%);
+      top: auto;
+      bottom: 14px;
+      transform: translateX(-50%);
     }
   }
 
@@ -241,7 +251,21 @@
 }
 
 .pisell-time-navigator-scale-cell--h .pisell-time-navigator-scale-label {
+  /**
+   * 整点小时数字与 dot 同基线整体上抬：
+   * - `bottom: 14px` 与 dot 对齐，整点格的「数字 + 圆点」继续叠在同一基线上，
+   *   非整点格只有 dot，也落在同一条线上，整条轴的刻度基线保持齐平；
+   * - `left: 0; right: 0; width: 100%` + `text-align: center`（基类）实现水平居中，
+   *   保证数字几何中心对齐 cell 中心，与上方 cursor 三角指向的位置一致；
+   * - 与压缩格宽下的小字号配合，line-height 仅 1.15（见 ScaleLayer 内联样式），
+   *   不会撑破 48px 的 scale 区高度。
+   */
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 14px;
   width: 100%;
+  line-height: 1;
 }
 
 .pisell-time-navigator-scale-cell--v .pisell-time-navigator-scale-label {
@@ -350,17 +374,31 @@
   color: rgba(52, 64, 84, 0.55);
 }
 
+/**
+ * 横向 cursor 视觉翻转：原 path 三角朝上、长条向下，
+ * 新设计气泡置顶，对应三角朝下指刻度，长条向上承接气泡。
+ * 用 CSS scaleY(-1)（默认 transform-origin: center）整 SVG 翻转，避免改 path 数据。
+ */
+.pisell-time-navigator-cursor--horizontal .pisell-time-navigator-cursor-line--token {
+  transform: scaleY(-1);
+}
+
 .pisell-time-navigator-cursor--vertical .pisell-time-navigator-cursor-line {
   width: 100%;
   height: 2px;
   min-width: 0;
 }
 
-/* 真实「此刻」：与指针气泡同尺寸/行高，锚在轴内当前时刻，橙色底（与渐变/实时色一致） */
+/**
+ * 真实「此刻」气泡：与指针气泡保持一致贴顶，锚在轴内当前时刻，橙色底
+ * （与渐变/实时色一致）。`top: 0 !important` + `bottom: auto !important`
+ * 防止历史 `bottom: 2px` 默认样式或浏览器缓存把它拉回底部。
+ */
 .pisell-time-navigator-current-time-bubble {
   position: absolute;
   z-index: 1;
-  bottom: 2px;
+  top: 0 !important;
+  bottom: auto !important;
   left: 0;
   transform: translateX(-50%);
   padding: 2px 6px;
@@ -388,12 +426,87 @@
   white-space: nowrap;
 }
 
-/* 横向：时间气泡贴近轴带底边（48px 高区域底部） */
+/**
+ * 横向：时间气泡贴近轴带顶边（与翻转后的指针三角朝下相对应，气泡浮在轴顶）。
+ * - `top: 0 !important` + `bottom: auto !important` 锁死贴顶，避免历史 `bottom: 2px`
+ *   默认布局、外层 `cursor-bubble` 基类、或浏览器缓存的旧规则把气泡拉回底部；
+ * - 不使用 `translate(-100%)` 把气泡推出轴外，因为外层 ScrollView 是 `overflow: x`，
+ *   超出顶/底的气泡会被裁掉，必须留在 cursor 容器（= axis 高度 48px）内；
+ * - `transform-origin: bottom center` 让 dragging 态 scale 放大时锚点贴向气泡底部，
+ *   视觉上像「按住后被举起」，而不会向上下均匀膨胀挤到刻度。
+ */
 .pisell-time-navigator-cursor--horizontal .pisell-time-navigator-cursor-bubble {
-  top: auto;
-  bottom: 2px;
+  top: 0 !important;
+  bottom: auto !important;
   margin-top: 0;
   padding: 2px 6px;
+  transform-origin: bottom center;
+  transition: transform 140ms ease-out, box-shadow 140ms ease-out;
+}
+
+/**
+ * 拖拽时隐藏内嵌的小气泡：放大版气泡在 .pisell-time-navigator-drag-bubble-overlay
+ * 里独立渲染，可以自由突破 ScrollView 的 48px 上沿。这里若不隐藏，会出现两枚气泡
+ * 重叠（一枚被裁掉一截，一枚浮在上面）。
+ */
+.pisell-time-navigator-cursor--horizontal.pisell-time-navigator-cursor--dragging
+  .pisell-time-navigator-cursor-bubble {
+  visibility: hidden;
+}
+
+/**
+ * 拖拽气泡溢出层：sibling of scroll-host，逃出 PisellScrollView 的裁剪。
+ * height: 0 + overflow: visible 让 overlay 自身不占布局空间，内部气泡通过
+ * 负 top 自由浮在时间轴上沿之上；z-index 高于 cursor 和刻度，确保始终可见。
+ */
+.pisell-time-navigator-drag-bubble-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 0;
+  pointer-events: none;
+  overflow: visible;
+  z-index: 20;
+}
+
+/**
+ * 拖拽中的"放大气泡"：比内嵌气泡明显更大，下沿落在时间轴顶边附近、上沿浮出去。
+ * - top: -10px 让气泡上半部分溢出 .pisell-time-navigator 的边界（对应"超过时间轴范围"）；
+ * - transform-origin: bottom center 配合 scale-in 动画让气泡像被"举起"；
+ * - box-shadow 强化漂浮感，与平铺态形成层级对比。
+ */
+.pisell-time-navigator-drag-bubble {
+  position: absolute;
+  top: -10px;
+  transform: translateX(-50%);
+  padding: 6px 12px;
+  border-radius: 4px;
+  background: #344054;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 16px;
+  white-space: nowrap;
+  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.28),
+    0 2px 6px rgba(16, 24, 40, 0.16);
+  transform-origin: bottom center;
+  animation: pisell-time-navigator-drag-bubble-pop 140ms ease-out;
+}
+
+.pisell-time-navigator-drag-bubble--realtime {
+  background: #ff692e;
+}
+
+@keyframes pisell-time-navigator-drag-bubble-pop {
+  from {
+    transform: translateX(-50%) scale(0.85);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(-50%) scale(1);
+    opacity: 1;
+  }
 }
 
 /* 竖向：气泡在横线（cursor-line）垂直方向居中 */

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

@@ -13,6 +13,8 @@ export interface CursorLayerProps {
     className?: string;
     /** cursor-moves：允许拖指针改时间 */
     dragInteractive?: boolean;
+    /** 当前是否正处于拖拽（按下未抬起）：用于驱动气泡放大反馈样式 */
+    isDragging?: boolean;
     onDragPointerDown?: React.PointerEventHandler<HTMLDivElement>;
     onDragPointerMove?: React.PointerEventHandler<HTMLDivElement>;
     onDragPointerUp?: React.PointerEventHandler<HTMLDivElement>;
@@ -22,4 +24,4 @@ export interface CursorLayerProps {
  * 时间指示器层：横向为「顶三角 + 竖长方条」SVG，竖向为横线 + 时间气泡
  * 对齐基准为几何中心。Realtime 态 #FF692E，浏览态 #344054
  */
-export declare function CursorLayer({ orientation, value, timeFormat, locale, isRealtime, offsetPx, fixedCenter, style, className, dragInteractive, onDragPointerDown, onDragPointerMove, onDragPointerUp, onDragPointerCancel, }: CursorLayerProps): JSX.Element | null;
+export declare function CursorLayer({ orientation, value, timeFormat, locale, isRealtime, offsetPx, fixedCenter, style, className, dragInteractive, isDragging, onDragPointerDown, onDragPointerMove, onDragPointerUp, onDragPointerCancel, }: CursorLayerProps): JSX.Element | null;

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

@@ -28,6 +28,7 @@ export function CursorLayer(_ref) {
     style = _ref.style,
     className = _ref.className,
     dragInteractive = _ref.dragInteractive,
+    isDragging = _ref.isDragging,
     onDragPointerDown = _ref.onDragPointerDown,
     onDragPointerMove = _ref.onDragPointerMove,
     onDragPointerUp = _ref.onDragPointerUp,
@@ -53,6 +54,8 @@ export function CursorLayer(_ref) {
       'pisell-time-navigator-cursor--fixed': fixedCenter
     }, {
       'pisell-time-navigator-cursor--draggable': dragInteractive
+    }, {
+      'pisell-time-navigator-cursor--dragging': isDragging
     }, className),
     style: positionStyle,
     "aria-hidden": true,

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

@@ -5,7 +5,15 @@ export interface GestureLayerProps {
     cellSizePx: number;
     /** 轴在滚动内容中的起始边距（左/上），用于把「滚动内容坐标」转为「轴内偏移」（与 dot 对齐） */
     axisStartMarginPx: number;
+    /**
+     * 偏移 → 整点对齐的「最近 tick」时间。`snapToStep=true` 时点击 / 方向键吸到 step 网格上用。
+     */
     offsetToTime: (offset: number) => Dayjs | null;
+    /**
+     * 偏移 → 连续时间（不吸附）。`snapToStep=false` 时点击与方向键都走这条，
+     * 让用户点哪儿就跳到哪一秒，不再被 stepMinutes 强行回弹。
+     */
+    offsetToTimeContinuous: (offset: number) => Dayjs | null;
     onSelectTime: (t: Dayjs) => void;
     isInDisabledRanges: (t: Dayjs) => boolean;
     snapToStep: boolean;
@@ -30,4 +38,4 @@ export interface GestureLayerProps {
 /**
  * 交互层：点击刻度跳转、键盘左右/上下 + 回车
  */
-export declare function GestureLayer({ orientation, cellSizePx, axisStartMarginPx, offsetToTime, onSelectTime, isInDisabledRanges, snapToStep, stepMinutes, snapFn, scrollPosition, viewportSize, onPointerDown, onPointerMove, onPointerUp, onPointerLeave, onUserInteraction, children, }: GestureLayerProps): JSX.Element;
+export declare function GestureLayer({ orientation, cellSizePx, axisStartMarginPx, offsetToTime, offsetToTimeContinuous, onSelectTime, isInDisabledRanges, snapToStep, stepMinutes, snapFn, scrollPosition, viewportSize, onPointerDown, onPointerMove, onPointerUp, onPointerLeave, onUserInteraction, children, }: GestureLayerProps): JSX.Element;

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

@@ -7,6 +7,7 @@ export function GestureLayer(_ref) {
     cellSizePx = _ref.cellSizePx,
     axisStartMarginPx = _ref.axisStartMarginPx,
     offsetToTime = _ref.offsetToTime,
+    offsetToTimeContinuous = _ref.offsetToTimeContinuous,
     onSelectTime = _ref.onSelectTime,
     isInDisabledRanges = _ref.isInDisabledRanges,
     snapToStep = _ref.snapToStep,
@@ -29,16 +30,22 @@ export function GestureLayer(_ref) {
     var scroll = isHorizontal ? viewport.scrollLeft : viewport.scrollTop;
     var scrollContentPos = isHorizontal ? scroll + (e.clientX - vRect.left) : scroll + (e.clientY - vRect.top);
     var offset = Math.max(0, scrollContentPos - axisStartMarginPx);
-    var t = offsetToTime(offset);
+    /**
+     * snapToStep=false：点击直接跳到指针对应的连续时间，避免被 offsetToTime
+     * 内部的 Math.round 吸附到最近的 tick（会让点击在 6:50 落到 7:00 这种）；
+     * snapToStep=true：维持原有「吸到最近 step 网格」语义。
+     */
+    var t = snapToStep ? offsetToTime(offset) : offsetToTimeContinuous(offset);
     if (t == null) return;
     var candidate = snapToStep ? snapFn(t) : t;
     if (isInDisabledRanges(candidate)) return;
     onSelectTime(candidate);
-  }, [isHorizontal, axisStartMarginPx, offsetToTime, onSelectTime, isInDisabledRanges, snapToStep, snapFn, onUserInteraction]);
+  }, [isHorizontal, axisStartMarginPx, offsetToTime, offsetToTimeContinuous, 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);
-    var currentTime = offsetToTime(centerOffset);
+    // 方向键同样在 snapToStep=false 时走连续时间，否则键盘步进会被 round 吸回 tick
+    var currentTime = snapToStep ? offsetToTime(centerOffset) : offsetToTimeContinuous(centerOffset);
     if (currentTime == null) return;
     if (e.key === 'Enter') {
       var candidate = snapToStep ? snapFn(currentTime) : currentTime;
@@ -62,7 +69,7 @@ export function GestureLayer(_ref) {
       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]);
+  }, [orientation, axisStartMarginPx, offsetToTime, offsetToTimeContinuous, 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) {

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

@@ -0,0 +1,20 @@
+/**
+ * PisellTimeNavigator 布局与尺寸常量（与 Figma / 交互 spec 对齐）
+ */
+/** 横向每格宽度（px），Figma 约 82；axis-moves 固定用此值 */
+export declare const CELL_SIZE_H = 82;
+/**
+ * 横向「此刻」橙区目标宽度（px）：按 axis-moves 下一格多的比例换算；
+ * 滚动轴与 cursor-moves 压格时同宽。
+ */
+export declare const CURRENT_TIME_GRADIENT_WIDTH_H_PX: number;
+/** 竖向每格高度（px） */
+export declare const CELL_SIZE_V = 20;
+/** 横向「Now」按钮占位，避免刻度被挡 */
+export declare const CURSOR_MOVES_NOW_RESERVE_PX = 56;
+/** cursor-moves 横向：轴与视口左右边距 */
+export declare const CURSOR_MOVES_H_PADDING_PX = 8;
+/** cursor-moves 横向：每格最小宽度（再小刻度不可读） */
+export declare const CURSOR_MOVES_MIN_CELL_PX = 8;
+/** 密度层高度：时间轴 48px 内留少量上下边距 */
+export declare const DENSITY_LAYER_HEIGHT = 46;

package/es/components/pisellTimeNavigator/timeNavigatorConstants.js

@@ -0,0 +1,27 @@
+/**
+ * PisellTimeNavigator 布局与尺寸常量（与 Figma / 交互 spec 对齐）
+ */
+
+/** 横向每格宽度（px），Figma 约 82；axis-moves 固定用此值 */
+export var CELL_SIZE_H = 82;
+
+/**
+ * 横向「此刻」橙区目标宽度（px）：按 axis-moves 下一格多的比例换算；
+ * 滚动轴与 cursor-moves 压格时同宽。
+ */
+export var CURRENT_TIME_GRADIENT_WIDTH_H_PX = Math.round(CELL_SIZE_H * 1.7);
+
+/** 竖向每格高度（px） */
+export var CELL_SIZE_V = 20;
+
+/** 横向「Now」按钮占位，避免刻度被挡 */
+export var CURSOR_MOVES_NOW_RESERVE_PX = 56;
+
+/** cursor-moves 横向：轴与视口左右边距 */
+export var CURSOR_MOVES_H_PADDING_PX = 8;
+
+/** cursor-moves 横向：每格最小宽度（再小刻度不可读） */
+export var CURSOR_MOVES_MIN_CELL_PX = 8;
+
+/** 密度层高度：时间轴 48px 内留少量上下边距 */
+export var DENSITY_LAYER_HEIGHT = 46;

package/es/components/pisellTooltip/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TooltipPropsWithTitle } from 'antd/es/tooltip';
 import { PisellContextType } from "../pisell-config-provider/context";
 import './index.less';

package/es/components/productCard/components/Action/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import './index.less';
 declare const Action: ({ item, onAction }: any) => JSX.Element;
 export default Action;

package/es/components/productCard/components/AmountFooter/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 declare const Footer: ({ item, hideDivider, type, isOnlyTotal }: any) => JSX.Element;
 export default Footer;

package/es/components/productCard/components/MultiDay/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 declare const MultiDay: ({ dataSource, hideDivider }: any) => JSX.Element;
 export default MultiDay;

package/es/components/productCard/components/Note/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 declare const Note: (props: any) => JSX.Element | null;
 export default Note;

package/es/components/productCard/components/Packages/components/collapsibleList/utils.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const renderBundles: (item: any, hidePrice?: boolean, isShowPackageNote?: boolean) => JSX.Element;

package/es/components/productCard/components/Packages/components/options/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 declare const Options: ({ options, amountSymbol }: any) => JSX.Element | null;
 export default Options;

package/es/components/productCard/components/Packages/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 declare const Packages: ({ item, isShowPackageNote }: any) => JSX.Element | null;
 export default Packages;

package/es/components/productCard/components/Time/components/SelectResource/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 interface ResourceItem {
     id: string | number;

package/es/components/productCard/components/Time/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 declare const Time: ({ item, isShowHolder, onLike, isShowChangeResource, changeResource, changeHolder, isShowChangeHolder, holderMode, onAddHolder, isShowAddHolderButton, onClearHolder, onClearResource, }: any) => JSX.Element | null;
 export default Time;

package/es/components/qrcode/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const QRCode: (props: any) => JSX.Element;
 export default QRCode;

package/es/components/table/Actions/component/ColumnsSetting/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type ColumnsSettingProps = {
     value?: Record<string, any>[];
     onChange?: (val: Record<string, any>[]) => void;

package/es/components/table/Actions/component/ExportImport/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ExportImportType } from '../../../types';
 import './index.less';
 declare type ExportImportProps = {