@pisell/materials 1.8.41 → 1.8.43

package/lib/components/pisellTimeNavigator/PisellTimeNavigator.less

@@ -5,7 +5,7 @@
   width: 100%;
   min-width: 0; /* 在 flex 布局中允许收缩 */
   background: #fff;
-  border: 1px solid #f2f4f7;
+  // border: 1px solid #f2f4f7;
 
   /* 视口包裹层：限制宽度/高度，内部轴可滚动 */
 
@@ -167,7 +167,7 @@
   z-index: 1;
 
   &--horizontal {
-    height: 30px;
+    height: var(--pisell-time-nav-track-h, 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 {
@@ -285,7 +309,7 @@
 
   &--horizontal {
     top: 0;
-    height: 48px;
+    height: var(--pisell-time-nav-track-h, 48px);
     /** 与 CursorLayer CURSOR_ANCHOR_WIDTH_H / SVG 宽一致 */
     width: 22px;
   }
@@ -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/lib/components/pisellTimeNavigator/components/CursorLayer.js

@@ -15,9 +15,9 @@ const CURSOR_LINE_HEIGHT_V = 2;
 * 时间指示器层：横向为「顶三角 + 竖长方条」SVG，竖向为横线 + 时间气泡
 * 对齐基准为几何中心。Realtime 态 #FF692E，浏览态 #344054
 */
-function CursorLayer({ orientation, value, timeFormat, locale, isRealtime, offsetPx, fixedCenter, style, className, dragInteractive, onDragPointerDown, onDragPointerMove, onDragPointerUp, onDragPointerCancel }) {
+function CursorLayer({ orientation, value, timeFormat, formatTimeLabel, locale, isRealtime, offsetPx, fixedCenter, style, className, dragInteractive, isDragging, onDragPointerDown, onDragPointerMove, onDragPointerUp, onDragPointerCancel }) {
 	if (value == null) return null;
-	const label = locale ? value.locale(locale).format(timeFormat) : value.format(timeFormat);
+	const label = formatTimeLabel ? formatTimeLabel(value) : locale ? value.locale(locale).format(timeFormat) : value.format(timeFormat);
 	const isHorizontal = orientation === "horizontal";
 	/** 以指针水平/垂直中心为 offsetPx，故定位到 offsetPx - 锚宽(高)的一半 */
 	const lineOffset = offsetPx - (isHorizontal ? CURSOR_ANCHOR_WIDTH_H / 2 : CURSOR_LINE_HEIGHT_V / 2);
@@ -31,7 +31,7 @@ function CursorLayer({ orientation, value, timeFormat, locale, isRealtime, offse
 		height: 40
 	}) : require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, style), {}, { [isHorizontal ? "left" : "top"]: lineOffset });
 	return /* @__PURE__ */ react.default.createElement("div", {
-		className: (0, classnames.default)("pisell-time-navigator-cursor", `pisell-time-navigator-cursor--${orientation}`, { "pisell-time-navigator-cursor--realtime": isRealtime }, { "pisell-time-navigator-cursor--fixed": fixedCenter }, { "pisell-time-navigator-cursor--draggable": dragInteractive }, className),
+		className: (0, classnames.default)("pisell-time-navigator-cursor", `pisell-time-navigator-cursor--${orientation}`, { "pisell-time-navigator-cursor--realtime": isRealtime }, { "pisell-time-navigator-cursor--fixed": fixedCenter }, { "pisell-time-navigator-cursor--draggable": dragInteractive }, { "pisell-time-navigator-cursor--dragging": isDragging }, className),
 		style: positionStyle,
 		"aria-hidden": true,
 		onPointerDown: dragInteractive ? onDragPointerDown : void 0,

package/lib/components/pisellTimeNavigator/components/GestureLayer.js

@@ -5,7 +5,7 @@ react = require_runtime.__toESM(react);
 /**
 * 交互层：点击刻度跳转、键盘左右/上下 + 回车
 */
-function GestureLayer({ orientation, cellSizePx, axisStartMarginPx, offsetToTime, onSelectTime, isInDisabledRanges, snapToStep, stepMinutes, snapFn, scrollPosition, viewportSize, onPointerDown, onPointerMove, onPointerUp, onPointerLeave, onUserInteraction, children }) {
+function GestureLayer({ orientation, cellSizePx, axisStartMarginPx, offsetToTime, offsetToTimeContinuous, onSelectTime, isInDisabledRanges, snapToStep, stepMinutes, snapFn, scrollPosition, viewportSize, onPointerDown, onPointerMove, onPointerUp, onPointerLeave, onUserInteraction, children }) {
 	const isHorizontal = orientation === "horizontal";
 	const handleClick = (0, react.useCallback)((e) => {
 		onUserInteraction === null || onUserInteraction === void 0 || onUserInteraction();
@@ -14,7 +14,13 @@ function GestureLayer({ orientation, cellSizePx, axisStartMarginPx, offsetToTime
 		const vRect = viewport.getBoundingClientRect();
 		const scroll = isHorizontal ? viewport.scrollLeft : viewport.scrollTop;
 		const scrollContentPos = isHorizontal ? scroll + (e.clientX - vRect.left) : scroll + (e.clientY - vRect.top);
-		const t = offsetToTime(Math.max(0, scrollContentPos - axisStartMarginPx));
+		const offset = Math.max(0, scrollContentPos - axisStartMarginPx);
+		/**
+		* snapToStep=false：点击直接跳到指针对应的连续时间，避免被 offsetToTime
+		* 内部的 Math.round 吸附到最近的 tick（会让点击在 6:50 落到 7:00 这种）；
+		* snapToStep=true：维持原有「吸到最近 step 网格」语义。
+		*/
+		const t = snapToStep ? offsetToTime(offset) : offsetToTimeContinuous(offset);
 		if (t == null) return;
 		const candidate = snapToStep ? snapFn(t) : t;
 		if (isInDisabledRanges(candidate)) return;
@@ -23,6 +29,7 @@ function GestureLayer({ orientation, cellSizePx, axisStartMarginPx, offsetToTime
 		isHorizontal,
 		axisStartMarginPx,
 		offsetToTime,
+		offsetToTimeContinuous,
 		onSelectTime,
 		isInDisabledRanges,
 		snapToStep,
@@ -31,7 +38,8 @@ function GestureLayer({ orientation, cellSizePx, axisStartMarginPx, offsetToTime
 	]);
 	const handleKeyDown = (0, react.useCallback)((e) => {
 		const scrollContentCenter = orientation === "horizontal" ? scrollPosition.scrollLeft + viewportSize.w / 2 : scrollPosition.scrollTop + viewportSize.h / 2;
-		const currentTime = offsetToTime(Math.max(0, scrollContentCenter - axisStartMarginPx));
+		const centerOffset = Math.max(0, scrollContentCenter - axisStartMarginPx);
+		const currentTime = snapToStep ? offsetToTime(centerOffset) : offsetToTimeContinuous(centerOffset);
 		if (currentTime == null) return;
 		if (e.key === "Enter") {
 			const candidate = snapToStep ? snapFn(currentTime) : currentTime;
@@ -60,6 +68,7 @@ function GestureLayer({ orientation, cellSizePx, axisStartMarginPx, offsetToTime
 		orientation,
 		axisStartMarginPx,
 		offsetToTime,
+		offsetToTimeContinuous,
 		onSelectTime,
 		isInDisabledRanges,
 		snapToStep,

package/lib/components/pisellTimeNavigator/components/ScaleLayer.js

@@ -7,19 +7,39 @@ classnames = require_runtime.__toESM(classnames);
 //#region src/components/pisellTimeNavigator/components/ScaleLayer.tsx
 /**
 * 刻度层：渲染时间刻度与标签
-* 横向：整点数字 + 小圆点；竖向：整点/半点数字 + 分割线
+* - 横向：整点数字 + 小圆点；当 range 起止不在 step 网格上时，首尾两个格按时间比例**变窄**
+*   （宽度 = `widthMinutes / step × cellSize`），中间格保持整步宽并落在整点 / 半点等对齐位置上。
+* - 竖向：整点数字 + 分割线。
+*
+* 标签仅在「整点」（`tick.minute() === 0` 且秒为 0）时显示数字；非整点格只渲染圆点 / 分割线，
+* 配合变窄的 head/tail 让起止时刻在视觉上自然衔接到第一个 / 最后一个整点。
 */
-function ScaleLayer({ orientation, ticks, stepMinutes, majorStepMinutes, timeFormat, locale, style, className, horizontalCellSizePx }) {
+function ScaleLayer({ orientation, ticks, stepMinutes, majorStepMinutes, timeFormat, locale, style, className, horizontalCellSizePx, cellWidthsPx, leadingPaddingPx, trailingPaddingPx }) {
 	const isHorizontal = orientation === "horizontal";
 	return /* @__PURE__ */ react.default.createElement("div", {
 		className: (0, classnames.default)("pisell-time-navigator-scale", `pisell-time-navigator-scale--${orientation}`, className),
 		style
-	}, ticks.map((tick, i) => {
-		const isMajor = tick.minute() % majorStepMinutes === 0;
-		/** 横向整点只展示小时，非整点用 timeFormat；竖向沿用 timeFormat */
+	}, isHorizontal && leadingPaddingPx != null && leadingPaddingPx > 0 && /* @__PURE__ */ react.default.createElement("div", {
+		"aria-hidden": true,
+		style: {
+			width: leadingPaddingPx,
+			minWidth: leadingPaddingPx,
+			maxWidth: leadingPaddingPx,
+			flex: "0 0 auto"
+		}
+	}), ticks.map((tick, i) => {
+		const isMajor = tick.minute() === 0 && tick.second() === 0;
+		/**
+		* 横向整点只展示小时（如 `16`）；竖向 / 非整点（理论不会进 isMajor 分支）走 timeFormat。
+		*/
 		const label = isHorizontal && isMajor ? locale ? tick.locale(locale).format("H") : tick.format("H") : locale ? tick.locale(locale).format(timeFormat) : tick.format(timeFormat);
 		if (isHorizontal) {
-			const cw = horizontalCellSizePx != null && horizontalCellSizePx > 0 ? horizontalCellSizePx : void 0;
+			const baseCw = horizontalCellSizePx != null && horizontalCellSizePx > 0 ? horizontalCellSizePx : void 0;
+			/**
+			* 优先用调用方传入的 `cellWidthsPx[i]`（首尾 partial 格宽 < 整步），
+			* 退化为 baseCw（CSS 默认 54）以兼容旧调用路径。
+			*/
+			const cw = cellWidthsPx != null && cellWidthsPx[i] != null ? cellWidthsPx[i] : baseCw;
 			const compactPad = cw != null ? cw < 36 ? 2 : cw < 52 ? 6 : 10 : void 0;
 			return /* @__PURE__ */ react.default.createElement("div", {
 				key: i,
@@ -49,6 +69,14 @@ function ScaleLayer({ orientation, ticks, stepMinutes, majorStepMinutes, timeFor
 			className: "pisell-time-navigator-scale-divider",
 			"aria-hidden": true
 		}), isMajor && /* @__PURE__ */ react.default.createElement("span", { className: "pisell-time-navigator-scale-label" }, label));
+	}), isHorizontal && trailingPaddingPx != null && trailingPaddingPx > 0 && /* @__PURE__ */ react.default.createElement("div", {
+		"aria-hidden": true,
+		style: {
+			width: trailingPaddingPx,
+			minWidth: trailingPaddingPx,
+			maxWidth: trailingPaddingPx,
+			flex: "0 0 auto"
+		}
 	}));
 }
 //#endregion

package/lib/components/pisellTimeNavigator/docs/pisellTimeNavigator.$tab-dev.md

@@ -42,52 +42,41 @@ PisellTimeNavigator 是可拖动的时间导航轴组件，用于在指定时间
 ### 功能需求
 
 1. **时间数据**
-
-- value 为 dayjs 兼容值（Dayjs | string，string 交 dayjs 解析）；onChange 回传 Dayjs
-- 默认时间范围：单日 00:00–24:00；可配置营业时间（如 10:00–23:00）或 24 小时
+   - value 为 dayjs 兼容值（Dayjs | string，string 交 dayjs 解析）；onChange 回传 Dayjs
+   - 默认时间范围：单日 00:00–24:00；可配置营业时间（如 10:00–23:00）或 24 小时
 
 2. **当前时间与 Realtime**
-
-- 内置「Now」固定入口（Figma 右侧按钮：背景 #FFF4ED，文字 #FF692E，左箭头）
-- 点击 Now：时间轴回到当前系统时间并进入 Realtime 模式
-- Realtime 模式：value 自动跟随系统当前时间更新（需暴露，如 `realtime: boolean` 或通过 onChange 持续回传）
+   - 内置「Now」固定入口（Figma 右侧按钮：背景 #FFF4ED，文字 #FF692E，左箭头）
+   - 点击 Now：时间轴回到当前系统时间并进入 Realtime 模式
+   - Realtime 模式：value 自动跟随系统当前时间更新（需暴露，如 `realtime: boolean` 或通过 onChange 持续回传）
 
 3. **刻度与层级**
-
-- AxisViewport：固定高度（Figma 48px）、可横向滚动，用 PisellScrollView 包裹（lrArrows）
-- BackgroundLayer：背景区间（当前时间渐变、禁用时间段、营业时间范围、选中区间），仅视觉/限制选择
-- ScaleLayer：大刻度（整点）、小刻度（如 15min）、小时标签、跨天分隔线
-- CursorLayer：当前选中时间指示（竖线 + 时间气泡）；浏览态 #344054，Realtime 态 #FF692E
-- GestureLayer：拖动、点击跳转、惯性滑动（简单版）、键盘（左右 + 回车）、吸附
+   - AxisViewport：固定高度（Figma 48px）、可横向滚动，用 PisellScrollView 包裹（lrArrows）
+   - BackgroundLayer：背景区间（当前时间渐变、禁用时间段、营业时间范围、选中区间），仅视觉/限制选择
+   - ScaleLayer：大刻度（整点）、小刻度（如 15min）、小时标签、跨天分隔线
+   - CursorLayer：当前选中时间指示（竖线 + 时间气泡）；浏览态 #344054，Realtime 态 #FF692E
+   - GestureLayer：拖动、点击跳转、惯性滑动（简单版）、键盘（左右 + 回车）、吸附
 
 4. **模式**
-
-- **Axis Moves（默认）**：指示器固定视口中央，刻度移动
-- **Cursor Moves**：刻度固定，指示器在轴上移动
-- **横向（默认）/ 竖向**：竖向严格按 Figma 竖向节点（14226-21944、14226-22025）：时间从上到下递增、上下箭头区、每格 80px
-  高、横线指示器 + 气泡、Now 在底部
+   - **Axis Moves（默认）**：指示器固定视口中央，刻度移动
+   - **Cursor Moves**：刻度固定，指示器在轴上移动
+   - **横向（默认）/ 竖向**：竖向严格按 Figma 竖向节点（14226-21944、14226-22025）：时间从上到下递增、上下箭头区、每格 80px 高、横线指示器 + 气泡、Now 在底部
 
 5. **吸附与禁用**
-
-- 默认吸附到 step（整点、15min、30min 或自定义粒度）
-- 禁用时间段：可配置，禁止选中（点击/吸附到该区间无效）
+   - 默认吸附到 step（整点、15min、30min 或自定义粒度）
+   - 禁用时间段：可配置，禁止选中（点击/吸附到该区间无效）
 
 6. **交互**
-
-- 点击刻度跳转该时间；点击 Now 回到当前并进入 Realtime
-- 键盘：左右键步进、回车确认；支持 Tab 聚焦后操作
-- 惯性滚动：基于 pointer 速度估算 + requestAnimationFrame 衰减，首版可做简单版
+   - 点击刻度跳转该时间；点击 Now 回到当前并进入 Realtime
+   - 键盘：左右键步进、回车确认；支持 Tab 聚焦后操作
+   - 惯性滚动：基于 pointer 速度估算 + requestAnimationFrame 衰减，首版可做简单版
 
 7. **样式（严格按 Figma）**
-
-- **横向**：容器白底、边框 #F2F4F7、高 48px；左右箭头区 #EAECF0 左 71px / 右 35px；刻度约 82px/格，数字 18px Medium 黑色，小圆点
-  6px；当前时间渐变 to rgba(255,105,46,0.5)；指示器竖线 3px，气泡 10px 2px 圆角 2px；Now 按钮圆角 8px、阴影，位于右侧。
-- **竖向**：容器白底、边框 #F2F4F7、上下 padding 8px；上下箭头区 #EAECF0（旋转块 54×88–90px），占 54px 高；刻度每格 80px 高，时间
-  12px #333，分割线 #D0D5DD / 细分线 #E5E5E5 0.5px；指示器横线 2px，气泡 px 6px 圆角 4px；Now 按钮在底部、宽 48px、箭头向上。
+   - **横向**：容器白底、边框 #F2F4F7、高 48px；左右箭头区 #EAECF0 左 71px / 右 35px；刻度约 82px/格，数字 18px Medium 黑色，小圆点 6px；当前时间渐变 to rgba(255,105,46,0.5)；指示器竖线 3px，气泡 10px 2px 圆角 2px；Now 按钮圆角 8px、阴影，位于右侧。
+   - **竖向**：容器白底、边框 #F2F4F7、上下 padding 8px；上下箭头区 #EAECF0（旋转块 54×88–90px），占 54px 高；刻度每格 80px 高，时间 12px #333，分割线 #D0D5DD / 细分线 #E5E5E5 0.5px；指示器横线 2px，气泡 px 6px 圆角 4px；Now 按钮在底部、宽 48px、箭头向上。
 
 8. **多语言**
-
-- 所有文案（如「Now」、时间格式等）走 `locales.getText`，中英繁
+   - 所有文案（如「Now」、时间格式等）走 `locales.getText`，中英繁
 
 ---
 
@@ -143,12 +132,9 @@ pisellTimeNavigator/
 
 ### 组成部分与引用关系
 
-- **PisellTimeNavigator** 为根，内部使用 **PisellScrollView**（overflow="x"，scrollActionsConfig type="lrArrows"）包裹 *
-  *AxisViewport**。
-- **AxisViewport** 内自上而下/自左而右：BackgroundLayer → ScaleLayer → CursorLayer → GestureLayer（同层叠或按 z-index）；*
-  *NowButton** 绝对定位于右侧（Figma）。
-- 时间 ↔ 像素：由 range、step、容器宽度在 **useTimeAxis** 中算出 scale 与 tick 列表；拖动/点击时由像素反算时间并做 step 吸附与
-  disabledRanges 校验。
+- **PisellTimeNavigator** 为根，内部使用 **PisellScrollView**（overflow="x"，scrollActionsConfig type="lrArrows"）包裹 **AxisViewport**。
+- **AxisViewport** 内自上而下/自左而右：BackgroundLayer → ScaleLayer → CursorLayer → GestureLayer（同层叠或按 z-index）；**NowButton** 绝对定位于右侧（Figma）。
+- 时间 ↔ 像素：由 range、step、容器宽度在 **useTimeAxis** 中算出 scale 与 tick 列表；拖动/点击时由像素反算时间并做 step 吸附与 disabledRanges 校验。
 - **useRealtime**：当 realtime 为 true 时，用 setInterval(1000) 或 requestAnimationFrame 更新 value 并触发 onChange。
 - 键盘：在 GestureLayer 或根 div 上 onKeyDown，左右步进 step，回车可视为确认（或 no-op，依产品定）。
 
@@ -156,8 +142,7 @@ pisellTimeNavigator/
 
 **横向**：PisellScrollView overflow=x、lrArrows；AxisViewport 固定高度 48px；Now 按钮绝对定位右侧。
 
-**竖向**：PisellScrollView overflow=y、tbArrows；AxisViewport 固定宽度（Figma 54px + 内容）；刻度每格 80px 高；指示器为横线 +
-气泡；Now 按钮绝对定位底部。
+**竖向**：PisellScrollView overflow=y、tbArrows；AxisViewport 固定宽度（Figma 54px + 内容）；刻度每格 80px 高；指示器为横线 + 气泡；Now 按钮绝对定位底部。
 
 ```
 PisellTimeNavigator
@@ -177,8 +162,7 @@ PisellTimeNavigator
 1. **dayjs**：value、defaultValue、range、businessHours、disabledRanges 均用 dayjs 解析；内部统一 Dayjs，onChange 只回传 Dayjs。
 2. **受控/非受控**：仅支持受控（value + onChange）或非受控（defaultValue + onChange），不混用。
 3. **Figma**：颜色、尺寸、圆角、字体按设计稿常量写入 less 或 CSS 变量，不安装 Tailwind。
-4. **惯性滚动**：可选；实现为记录 pointermove 速度，pointerup 后 requestAnimationFrame 做指数衰减更新 scrollLeft，直至速度接近
-   0。
+4. **惯性滚动**：可选；实现为记录 pointermove 速度，pointerup 后 requestAnimationFrame 做指数衰减更新 scrollLeft，直至速度接近 0。
 5. **禁用区间**：点击或吸附得到候选时间后，若落在 disabledRanges 内则忽略或吸附到最近可用点。
 
 ---

package/lib/components/pisellTimeNavigator/docs/pisellTimeNavigator.$tab-test.md

@@ -105,11 +105,11 @@ category: pro
 
 ### 6.1 点击与吸附
 
-| 测试项              | 测试步骤    | 预期结果                      | 测试类型 |
-|------------------|---------|---------------------------|------|
-| 点击刻度             | 点击某刻度区域 | 选中时间吸附到 step，onChange 被调用 | 人工   |
-| snapToStep=true  | 点击非整刻度  | 吸附到最近 step                | 人工   |
-| snapToStep=false | 点击某位置   | 选中时间可为非整 step（若实现支持）      | 人工   |
+| 测试项                  | 测试步骤    | 预期结果                    | 测试类型 |
+|----------------------|---------|-------------------------|------|
+| 点击刻度                 | 点击某刻度区域 | onChange 被调用；默认不吸附，连续时间 | 人工   |
+| snapToStep=true      | 点击非整刻度  | 吸附到最近 step              | 人工   |
+| snapToStep=false（默认） | 点击某位置   | 选中时间为连续时间（非整 step）      | 人工   |
 
 ### 6.2 Now 按钮
 

package/lib/components/pisellTimeNavigator/hooks/useTimeAxis.js

@@ -3,43 +3,62 @@ const require_index = require("../utils/index.js");
 let react = require("react");
 //#region src/components/pisellTimeNavigator/hooks/useTimeAxis.ts
 /**
-* 时间轴刻度与时间↔像素换算
+* 时间轴刻度与时间↔像素换算。
+*
+* 格子拆分策略见 {@link getAxisCells}：当 `range.start` / `range.end` 不在 `stepMinutes` 网格上时，
+* 首尾出现宽度按时间比例缩小的 head/tail 格，中间格保持 step 整步并落在网格整点上。
+*
+* 时间→像素仍是线性映射 `dotOffsetPx + (t - rangeStart) / step × cellSize`，与 head/tail 是否存在无关：
+* `dotOffsetPx`（横向 = `cellSize/2`，竖向 = 0）为 rangeStart 在轴内的像素位置；轴两端各保留 `dotOffsetPx`
+* 留白以居中 rangeStart / rangeEnd。
 */
 function useTimeAxis(options) {
 	const { range, stepMinutes, referenceDate, orientation, cellSizePx } = options;
 	return (0, react.useMemo)(() => {
 		const [rangeStart, rangeEnd] = require_index.getRangeBounds(range, referenceDate);
-		const ticks = require_index.getTicks(rangeStart, rangeEnd, stepMinutes);
+		const safeStep = Math.max(1, stepMinutes);
+		const cells = require_index.getAxisCells(rangeStart, rangeEnd, safeStep);
+		const ticks = cells.map((c) => c.start);
+		const cellWidthsPx = cells.map((c) => c.widthMinutes / safeStep * cellSizePx);
+		const cellsTotalPx = cellWidthsPx.reduce((s, w) => s + w, 0);
 		/**
-		* 仅当范围结束晚于最后一个刻度时（如全天 23:59）才多一格尾段，使最后一刻可滚到视口中心。
-		* 自定义范围如 08:00–20:00 的最后一格已是 20:00，不再多一格。
+		* 横向：每格中心为「时间下面的点」，dotOffsetPx = cellSizePx/2，rangeStart / rangeEnd
+		* 在轴上分别留 cellSize/2 留白以便居中。
+		* 竖向：对齐整点上面的粗线（格顶），dotOffsetPx = 0，无两端留白。
 		*/
-		const lastTick = ticks.length > 0 ? ticks[ticks.length - 1] : null;
-		/** 横向：仅当范围结束晚于最后刻度时多一格尾段 */
-		const needTailCell = orientation === "horizontal" && lastTick != null && rangeEnd.isAfter(lastTick);
-		const effectiveTicks = orientation === "vertical" && lastTick != null && !rangeEnd.isAfter(lastTick) && ticks.length > 0 ? ticks.slice(0, -1) : ticks;
-		const rawTotalPx = orientation === "vertical" ? effectiveTicks.length * cellSizePx : (ticks.length + (needTailCell ? 1 : 0)) * cellSizePx;
+		const dotOffsetPx = orientation === "vertical" ? 0 : cellSizePx / 2;
+		const rawTotalPx = orientation === "horizontal" ? cellsTotalPx + cellSizePx : cellsTotalPx;
 		/** 防止异常 range/step 导致轴长爆炸（如竖向出现 33M 高度），上限约 2 天 15 分钟步进 */
 		const totalLengthPx = Math.min(rawTotalPx, 5e5);
-		/**
-		* 横向：每格中心为「时间下面的点」，dotOffsetPx = cellSizePx/2。
-		* 竖向：对齐整点上面的粗线（格顶），dotOffsetPx = 0。
-		*/
-		const dotOffsetPx = orientation === "vertical" ? 0 : cellSizePx / 2;
-		/** 最大偏移：竖向为最后一格顶；横向有尾格时为最后一格中心延伸，无尾格时为最后一格中心 */
-		const maxOffsetPx = orientation === "vertical" ? totalLengthPx : dotOffsetPx + (needTailCell ? ticks.length : Math.max(0, ticks.length - 1)) * cellSizePx;
+		/** rangeEnd 在轴上的像素位置；横向 = dotOffsetPx + cellsTotalPx，竖向 = cellsTotalPx */
+		const maxOffsetPx = orientation === "vertical" ? cellsTotalPx : dotOffsetPx + cellsTotalPx;
 		const timeToOffset = (t) => {
-			const px = dotOffsetPx + t.diff(rangeStart) / (60 * 1e3) / stepMinutes * cellSizePx;
+			const px = dotOffsetPx + t.diff(rangeStart) / (60 * 1e3) / safeStep * cellSizePx;
 			return Math.max(dotOffsetPx, Math.min(px, maxOffsetPx));
 		};
+		/**
+		* 吸附到最近的「格起点」：
+		* head/tail 长度可能小于 step 整步，传统的「按 cellSize 等分四舍五入」无法直接定位 tick；
+		* 这里按 ticks 实际像素位置线性扫描求最近邻，ticks 数组通常 ≤ ~200，开销可忽略。
+		*/
 		const offsetToTime = (offset) => {
-			const tick = effectiveTicks[Math.round((offset - dotOffsetPx) / cellSizePx)];
-			return tick !== null && tick !== void 0 ? tick : null;
+			if (ticks.length === 0) return null;
+			let bestIdx = 0;
+			let bestDist = Infinity;
+			for (let i = 0; i < ticks.length; i += 1) {
+				const px = timeToOffset(ticks[i]);
+				const d = Math.abs(px - offset);
+				if (d < bestDist) {
+					bestDist = d;
+					bestIdx = i;
+				}
+			}
+			return ticks[bestIdx];
 		};
 		/** 偏移对应连续时间；横向以格点为中心，竖向以格顶为基准 */
 		const offsetToTimeContinuous = (offset) => {
-			const minutesFromStart = (offset - dotOffsetPx) / cellSizePx * stepMinutes;
-			let t = rangeStart.add(minutesFromStart, "minute");
+			const minutesFromStart = (offset - dotOffsetPx) / cellSizePx * safeStep;
+			const t = rangeStart.add(minutesFromStart, "minute");
 			if (t.isBefore(rangeStart)) return rangeStart;
 			if (t.isAfter(rangeEnd)) return rangeEnd;
 			return t;
@@ -47,7 +66,8 @@ function useTimeAxis(options) {
 		return {
 			rangeStart,
 			rangeEnd,
-			ticks: effectiveTicks,
+			ticks,
+			cellWidthsPx,
 			timeToOffset,
 			offsetToTime,
 			offsetToTimeContinuous,

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

@@ -1,4 +1,4 @@
 import { CursorMode, PisellTimeNavigatorProps, TimeNavigatorOrientation, TimeNavigatorValue, TimeRangeOption } from "./types.js";
 import { PisellTimeNavigator } from "./PisellTimeNavigator.js";
-import { buildCalendarHourSlotsFromRange, getHorizontalAxisSlotCount, getRangeBounds } from "./utils/index.js";
+import { DEFAULT_CALENDAR_SLOT_STEP_MINUTES, buildCalendarHourSlotsFromRange, buildCalendarTimelineSlotStartsFromRange, getHorizontalAxisSlotCount, getRangeBounds, pickReferenceDateContainingNow } from "./utils/index.js";
 import { _default } from "./locales.js";

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

@@ -75,6 +75,16 @@ interface PisellTimeNavigatorProps {
    * @default 'horizontal'
    */
   orientation?: TimeNavigatorOrientation;
+  /**
+   * 横向且 `cursorMode === 'axis-moves'` 时，每个时间槽的像素宽度（格间距）。
+   * 不传则 **82**（`CELL_SIZE_H`）。`cursor-moves` 时格宽由视口压缩计算，本字段不生效。
+   */
+  horizontalAxisCellSizePx?: number;
+  /**
+   * 横向时间轴轨道高度（px）：滚动容器、轴、`scale`/`cursor` 层共用的高度。
+   * 仅 `orientation === 'horizontal'` 时生效；不传为 **48**（默认设计规格）。
+   */
+  horizontalTrackHeightPx?: number;
   /**
    * 营业时间范围（视觉高亮，可选限制选择范围）
    */
@@ -140,6 +150,11 @@ interface PisellTimeNavigatorProps {
    * @default 'HH:mm'
    */
   timeFormat?: string;
+  /**
+   * 自定义游标/拖拽气泡文案；不传则按 `timeFormat` 格式化 `value`。
+   * 预约跨日营业可传相对顶栏锚定日的「次日 HH:mm」。
+   */
+  formatTimeLabel?: (value: Dayjs) => string;
   /**
    * 自定义 Now 按钮内容（覆盖默认文案与图标时使用）
    */