@pisell/materials 1.8.38 → 1.8.41

package/es/components/pisellSort/docs/PisellSort.md

@@ -3,8 +3,8 @@ nav:
   title: 组件
   order: 1
 group:
-  title: DataDisplay
-  order: 3
+  title: Data Entry
+  order: 1
 title: PisellSort
 order: 15
 category: pro
@@ -12,52 +12,36 @@ category: pro
 
 # PisellSort - 排序选择组件
 
-## 简介
+PisellSort 基于 Ant Design Form 封装，提供排序字段与排序方式的下拉选择，适用于列表、表格等需要排序能力的场景。
+
+## 何时使用
 
-PisellSort 是一个排序选择组件，基于 Ant Design Form 封装，提供了便捷的排序字段选择和排序方式配置功能。适用于列表、表格等需要排序功能的场景。
+- 列表/表格需要「按某字段升序/降序」的筛选入口
+- 需要与 Form 联动的排序字段（字段名可配置）
+- 需要支持多类型字段（数字、日期、字符串）的排序配置
 
 ## 特性
 
-- 🎯 **表单集成**: 基于 Ant Design Form 封装，支持表单联动
-- 🎨 **灵活配置**: 支持自定义排序字段和排序方式
-- 📱 **类型支持**: 支持日期、字符串、数字等多种数据类型排序
-- 🔄 **受控模式**: 支持完全受控的选中状态管理
-- ⚡ **轻量级**: 基于已有 Sort 组件封装，体积小巧
-- 🎭 **TypeScript**: 完整的 TypeScript 类型定义
+- 表单集成：基于 Ant Design Form，支持表单联动
+- 灵活配置：自定义排序字段列表与排序方式
+- 类型支持：支持 `date`、`string`、`number` 等类型
+- 受控模式：支持 `value` + `onChange` 受控
+- TypeScript：完整类型定义
 
 ## 基础用法
 
 ```tsx
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { PisellSort } from '@pisell/materials';
 
-const Demo = () => {
-  const [sortValue, setSortValue] = useState('price_asc');
-
-  const sortList = [
-    {
-      type: 'number',
-      label: '价格',
-      name: 'price',
-      isCustom: false,
-      columnKey: 'price',
-    },
-    {
-      type: 'date',
-      label: '创建时间',
-      name: 'created_at',
-      isCustom: false,
-      columnKey: 'created_at',
-    },
-    {
-      type: 'string',
-      label: '名称',
-      name: 'name',
-      isCustom: false,
-      columnKey: 'name',
-    },
-  ];
+const sortList = [
+  { type: 'number', label: '价格', name: 'price', isCustom: false, columnKey: 'price' },
+  { type: 'date', label: '创建时间', name: 'created_at', isCustom: false, columnKey: 'created_at' },
+  { type: 'string', label: '名称', name: 'name', isCustom: false, columnKey: 'name' },
+];
 
+export default () => {
+  const [sortValue, setSortValue] = useState<string>('price_asc');
   return (
     <PisellSort
       list={sortList}
@@ -69,36 +53,34 @@ const Demo = () => {
     />
   );
 };
-
-export default Demo;
 ```
 
 ## API
 
 ### PisellSort Props
 
-| 参数            | 说明               | 类型                                                               | 默认值       | 版本 |
+| 参数            | 说明               | 类型                                                               | 默认值       | 必填 |
 | --------------- | ------------------ | ------------------------------------------------------------------ | ------------ | ---- |
-| list            | 排序字段列表       | `SortItemProps[]`                                                  | `[]`         | -    |
-| value           | 当前选中的排序值   | `any`                                                              | -            | -    |
-| onChange        | 排序变化回调       | `(val: string, detail: MenuInfo) => void`                          | -            | -    |
-| name            | 表单字段名         | `string`                                                           | `'sort_key'` | -    |
-| button          | 自定义触发按钮     | `ReactNode`                                                        | -            | -    |
-| style           | 自定义样式         | `CSSProperties`                                                    | -            | -    |
-| placement       | 下拉菜单弹出位置   | `'bottom' \| 'bottomLeft' \| 'bottomRight' \| 'top' \| 'topLeft' \| 'topRight'` | -            | -    |
-| localPagination | 是否使用本地分页   | `boolean`                                                          | -            | -    |
+| list            | 排序字段列表       | `SortItemProps[]`                                                  | `[]`         | ❌   |
+| value           | 当前选中的排序值   | `string`                                                           | -            | ❌   |
+| onChange        | 排序变化回调       | `(val: string, detail: MenuInfo) => void`                          | -            | ❌   |
+| name            | 表单字段名         | `string`                                                           | `'sort_key'` | ❌   |
+| button          | 自定义触发按钮     | `ReactNode`                                                        | -            | ❌   |
+| style           | 自定义样式         | `CSSProperties`                                                    | -            | ❌   |
+| placement       | 下拉菜单弹出位置   | `'bottom' \| 'bottomLeft' \| 'bottomRight' \| 'top' \| 'topLeft' \| 'topRight'` | -            | ❌   |
+| localPagination | 是否使用本地分页   | `boolean`                                                          | -            | ❌   |
 
 ### SortItemProps
 
-```typescript
+```ts
 interface SortItemProps {
   type: 'date' | 'string' | 'number'; // 排序字段类型
-  label?: string; // 显示标签
-  name?: string | string[]; // 字段名称
-  isCustom: boolean; // 是否为自定义排序
-  columnKey?: string; // 列键值
-  localFilter?: boolean; // 是否本地过滤
-  isHidden?: boolean; // 是否隐藏
+  label?: string;                    // 显示标签
+  name?: string | string[];          // 字段名称
+  isCustom: boolean;                  // 是否为自定义排序
+  columnKey?: string;                 // 列键值
+  localFilter?: boolean;              // 是否本地过滤
+  isHidden?: boolean;                 // 是否隐藏
 }
 ```
 
@@ -107,95 +89,62 @@ interface SortItemProps {
 ### 自定义触发按钮
 
 ```tsx
+import React from 'react';
 import { Button } from 'antd';
 import { PisellSort } from '@pisell/materials';
 
 const sortList = [
-  {
-    type: 'number',
-    label: '价格',
-    name: 'price',
-    isCustom: false,
-    columnKey: 'price',
-  },
+  { type: 'number', label: '价格', name: 'price', isCustom: false, columnKey: 'price' },
 ];
 
-const Demo = () => {
-  return (
-    <PisellSort
-      list={sortList}
-      button={
-        <Button type="primary" icon={<SortAscendingOutlined />}>
-          排序
-        </Button>
-      }
-    />
-  );
-};
-
-export default Demo;
+export default () => (
+  <PisellSort
+    list={sortList}
+    button={<Button type="primary">排序</Button>}
+  />
+);
 ```
 
 ### 自定义下拉位置
 
 ```tsx
+import React from 'react';
 import { PisellSort } from '@pisell/materials';
 
 const sortList = [
-  {
-    type: 'number',
-    label: '价格',
-    name: 'price',
-    isCustom: false,
-    columnKey: 'price',
-  },
+  { type: 'number', label: '价格', name: 'price', isCustom: false, columnKey: 'price' },
 ];
 
-const Demo = () => {
-  return (
-    <PisellSort
-      list={sortList}
-      placement="topLeft"
-    />
-  );
-};
-
-export default Demo;
+export default () => (
+  <PisellSort list={sortList} placement="topLeft" />
+);
 ```
 
 ### 隐藏特定排序项
 
 ```tsx
+import React from 'react';
 import { PisellSort } from '@pisell/materials';
 
 const sortList = [
-  {
-    type: 'number',
-    label: '价格',
-    name: 'price',
-    isCustom: false,
-    columnKey: 'price',
-  },
+  { type: 'number', label: '价格', name: 'price', isCustom: false, columnKey: 'price' },
   {
     type: 'date',
     label: '创建时间',
     name: 'created_at',
     isCustom: false,
     columnKey: 'created_at',
-    isHidden: true, // 隐藏此项
+    isHidden: true,
   },
 ];
 
-const Demo = () => {
-  return <PisellSort list={sortList} />;
-};
-
-export default Demo;
+export default () => <PisellSort list={sortList} />;
 ```
 
 ### 本地排序模式
 
 ```tsx
+import React from 'react';
 import { PisellSort } from '@pisell/materials';
 
 const sortList = [
@@ -205,37 +154,24 @@ const sortList = [
     name: 'price',
     isCustom: false,
     columnKey: 'price',
-    localFilter: true, // 启用本地过滤
+    localFilter: true,
   },
 ];
 
-const Demo = () => {
-  return (
-    <PisellSort
-      list={sortList}
-      localPagination={true}
-    />
-  );
-};
-
-export default Demo;
+export default () => (
+  <PisellSort list={sortList} localPagination />
+);
 ```
 
 ## 注意事项
 
-1. **表单集成**: PisellSort 组件内部已集成 Form，使用时无需再包裹 Form 组件
-2. **字段名称**: 默认表单字段名为 `sort_key`，可通过 `name` 属性自定义
-3. **数据类型**: 不同的 `type` 类型会影响排序的行为，请根据实际数据类型选择
-4. **回调参数**: `onChange` 回调会返回排序值和详细的菜单信息，方便进行更复杂的处理
-
-## 设计指南
-
-详见 [设计文档](./PisellSort.$tab-design.md)
-
-## 开发指南
-
-详见 [开发文档](./PisellSort.$tab-dev.md)
+1. **表单集成**：组件内部已集成 Form，无需再包一层 Form
+2. **字段名称**：默认表单字段名为 `sort_key`，可通过 `name` 自定义
+3. **数据类型**：`list` 中每项的 `type`（`date` / `string` / `number`）会影响排序行为，需与实际数据一致
+4. **回调参数**：`onChange(val, detail)` 返回当前排序值与菜单详情，便于联动请求或表格排序
 
-## 测试指南
+## 相关文档
 
-详见 [测试文档](./PisellSort.$tab-test.md)
+- [设计文档](./PisellSort.$tab-design.md)
+- [开发文档](./PisellSort.$tab-dev.md)
+- [测试文档](./PisellSort.$tab-test.md)

package/es/components/pisellStatisticList/index.js

@@ -26,6 +26,7 @@ const PisellStatisticList = (props) => {
 		var _item$children;
 		const { isLink = false, link = "", onClick } = item;
 		return /* @__PURE__ */ React.createElement("div", {
+			key: index,
 			className: "pisell-lowcode-statistic-list-item",
 			style: {
 				background: backgroundColors[index % backgroundColors.length],

package/es/components/pisellTimeNavigator/PisellTimeNavigator.js

@@ -11,13 +11,29 @@ import { GestureLayer } from "./components/GestureLayer.js";
 import { NowButton } from "./components/NowButton.js";
 import { ScaleLayer } from "./components/ScaleLayer.js";
 import locales_default from "./locales.js";
-import { CURRENT_TIME_GRADIENT_WIDTH_H_PX } from "./timeNavigatorConstants.js";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { locales } from "@pisell/utils";
 import classNames from "classnames";
 import dayjs from "dayjs";
 import "./PisellTimeNavigator.less";
 //#region src/components/pisellTimeNavigator/PisellTimeNavigator.tsx
+/** 横向每格宽度（px），Figma 约 82；axis-moves 固定用此值，cursor-moves 时按视口压缩以看全 range */
+const CELL_SIZE_H = 82;
+/**
+* 横向「此刻」橙区目标宽度（px）：按 axis-moves 下一格多的比例换算，滚动轴与 cursor-moves 压格时同宽；
+* 不用压缩后的 cellSizePx，避免指针模式下渐变过窄。
+*/
+const CURRENT_TIME_GRADIENT_WIDTH_H_PX = Math.round(CELL_SIZE_H * 1.7);
+/** 竖向每格高度（px） */
+const CELL_SIZE_V = 20;
+/** 横向「Now」按钮占位，避免刻度被挡 */
+const CURSOR_MOVES_NOW_RESERVE_PX = 56;
+/** cursor-moves 横向：轴与视口左右边距 */
+const CURSOR_MOVES_H_PADDING_PX = 8;
+/** cursor-moves 横向：每格最小宽度（再小刻度不可读） */
+const CURSOR_MOVES_MIN_CELL_PX = 8;
+/** 密度层高度：时间轴 48px 内留少量上下边距 */
+const DENSITY_LAYER_HEIGHT = 46;
 /**
 * PisellTimeNavigator：可拖动的时间导航轴，时间范围内浏览、选择、控制
 */
@@ -40,29 +56,19 @@ function PisellTimeNavigator(props) {
 	const referenceDayKey = referenceDateFromProp != null ? referenceDateFromProp.format("YYYY-MM-DD") : dayjs().format("YYYY-MM-DD");
 	const [densityLoaded, setDensityLoaded] = useState();
 	const densityReqId = useRef(0);
-	/**
-	* 仅当日历锚定日或 step 变化时清空密度折线；`loadDensity` 回调因上游 deps 变引用而变时
-	* 保留上一帧数据直至新请求返回，避免预约页列表/高光周期性更新导致整轴「闪一下」。
-	*/
-	const densityAxisKeyRef = useRef(null);
 	const densityGradientId = useMemo(() => `pisell-time-density-fill-${Math.random().toString(36).slice(2, 8)}`, []);
 	useEffect(() => {
-		const axisKey = `${referenceDayKey}|${stepMinutes}`;
-		const axisKeyChanged = densityAxisKeyRef.current === null || densityAxisKeyRef.current !== axisKey;
 		if (densitySeriesProp !== void 0) {
-			densityAxisKeyRef.current = null;
 			setDensityLoaded(void 0);
 			return;
 		}
 		if (!loadDensityProp) {
-			densityAxisKeyRef.current = null;
 			setDensityLoaded(void 0);
 			return;
 		}
-		densityAxisKeyRef.current = axisKey;
 		const req = ++densityReqId.current;
 		let cancelled = false;
-		if (axisKeyChanged) setDensityLoaded(void 0);
+		setDensityLoaded(void 0);
 		loadDensityProp({
 			referenceDate: dayjs(referenceDayKey).startOf("day"),
 			stepMinutes
@@ -115,14 +121,14 @@ function PisellTimeNavigator(props) {
 	]);
 	/** cursor-moves + 横向：整段 range 压进一条可视区域，等比例缩小格宽 */
 	const cellSizePx = useMemo(() => {
-		if (!isHorizontal) return 20;
-		if (isAxisMoves) return 82;
+		if (!isHorizontal) return CELL_SIZE_V;
+		if (isAxisMoves) return CELL_SIZE_H;
 		const n = horizontalSlotCount;
-		if (n <= 0) return 82;
+		if (n <= 0) return CELL_SIZE_H;
 		const vpW = Math.max(1, viewportSize.w || 400);
-		const usable = Math.max(40, vpW - (showNowButton ? 56 : 0) - 16);
+		const usable = Math.max(40, vpW - (showNowButton ? CURSOR_MOVES_NOW_RESERVE_PX : 0) - CURSOR_MOVES_H_PADDING_PX * 2);
 		const raw = Math.floor(usable / n);
-		return Math.max(8, Math.min(82, raw));
+		return Math.max(CURSOR_MOVES_MIN_CELL_PX, Math.min(CELL_SIZE_H, raw));
 	}, [
 		isHorizontal,
 		isAxisMoves,
@@ -146,7 +152,7 @@ function PisellTimeNavigator(props) {
 		const maxV = Math.max(...slice, 0);
 		const minV = Math.min(...slice, 0);
 		const span = Math.max(1, maxV - minV);
-		const h = 46;
+		const h = DENSITY_LAYER_HEIGHT;
 		const points = slice.map((v, i) => {
 			const x = i * cellSizePx + cellSizePx / 2;
 			/** 映射到 [0,1]：最低值贴底，最高值接近顶部，基本吃满密度层高度 */
@@ -207,65 +213,10 @@ function PisellTimeNavigator(props) {
 	}, []);
 	/** cursor-moves：拖指针时禁止程序性滚动抢焦点 */
 	const 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）。
-	*/
 	const cursorDragBaseRef = useRef({
 		startClient: 0,
-		startOffset: 0,
-		pxPerClient: 1
+		startOffset: 0
 	});
-	/**
-	* 计算 viewportWrapRef 当前的渲染缩放系数（screenPx → 本地 px 倍率）。
-	* 若元素未挂载或宽度异常则返回 1，永不放大放小本意外的 delta。
-	*/
-	const measureWrapPxPerClient = useCallback(() => {
-		const el = viewportWrapRef.current;
-		if (!el) return 1;
-		const rect = el.getBoundingClientRect();
-		const layout = isHorizontal ? el.offsetWidth : el.offsetHeight;
-		const rendered = isHorizontal ? rect.width : rect.height;
-		if (!layout || !rendered) return 1;
-		const scale = rendered / layout;
-		if (!Number.isFinite(scale) || scale <= .01) return 1;
-		return 1 / scale;
-	}, [isHorizontal]);
-	/**
-	* 指针气泡放大反馈：仅 down/up/cancel 各触发一次重渲染（move 事件不参与），
-	* 拖拽过程中不会引起轴体重排。
-	*/
-	const [isCursorDragging, setIsCursorDragging] = useState(false);
-	/**
-	* 拖拽性能：受控模式下 onChange 会让父级（如 PisellReservation）整页重渲，
-	* 触控环境下尤其明显（手指仍按着但光标卡帧）。
-	*
-	* 解决策略 = 「视觉本地 + onChange 提交一次」：
-	* - 拖拽过程中只更新本地 dragVisualOffsetPx（轻量 state，仅本组件重渲），
-	*   光标和气泡跟着这个 offset 移动，跟手且廉价；
-	* - 不调用 onChange / setInternalValue，父级和兄弟组件完全不知道在拖；
-	* - 松手时清空本地 offset 并一次性 applyOffsetToNavigatorValue(_, true)，
-	*   走 snap → onChange → 父级 setState 的正常路径。React 18 自动批处理，
-	*   父级 valueProp 更新与本地 dragVisualOffsetPx 清零会合并成一次 render，
-	*   不会出现「松手 → 旧值 → 新值」的回闪。
-	*
-	* 同帧多次 move 用 rAF 再折叠一层，应对高频鼠标 / 高刷设备。
-	*/
-	const [dragVisualOffsetPx, setDragVisualOffsetPx] = useState(null);
-	const pendingDragOffsetRef = useRef(null);
-	const dragRafIdRef = useRef(null);
-	const cancelPendingDragFrame = useCallback(() => {
-		if (dragRafIdRef.current != null) {
-			cancelAnimationFrame(dragRafIdRef.current);
-			dragRafIdRef.current = null;
-		}
-		pendingDragOffsetRef.current = null;
-	}, []);
-	useEffect(() => cancelPendingDragFrame, [cancelPendingDragFrame]);
 	const getScrollContainer = useCallback(() => {
 		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;
@@ -283,7 +234,7 @@ function PisellTimeNavigator(props) {
 	const halfViewportH = effectiveViewportH / 2;
 	const dotOffsetPx = isHorizontal ? cellSizePx / 2 : 0;
 	/** cursor-moves 横向：左右小边距，整轴落在视口内；axis-moves 保持半屏留白可滚动 */
-	const axisStartMarginW = isHorizontal && !isAxisMoves ? 8 : Math.max(0, halfViewportW - dotOffsetPx);
+	const axisStartMarginW = isHorizontal && !isAxisMoves ? CURSOR_MOVES_H_PADDING_PX : Math.max(0, halfViewportW - dotOffsetPx);
 	const axisStartMarginH = Math.max(0, halfViewportH - dotOffsetPx);
 	/**
 	* 横向 axis-wrap：无 Now 时用 width:100% + minWidth:自然内容宽，铺满滚动视口；内容更长时仍可横向滚动。
@@ -305,7 +256,7 @@ function PisellTimeNavigator(props) {
 				minHeight
 			};
 		}
-		const natural = 8 + axis.totalLengthPx + 8;
+		const natural = CURSOR_MOVES_H_PADDING_PX + axis.totalLengthPx + CURSOR_MOVES_H_PADDING_PX;
 		if (!showNowButton) return {
 			width: "100%",
 			minWidth: natural,
@@ -456,21 +407,6 @@ function PisellTimeNavigator(props) {
 		defaultValue
 	]);
 	const cursorOffsetPx = axis.timeToOffset(effectiveValue);
-	/**
-	* 拖拽视觉态：当用户正在拖动时，dragVisualOffsetPx 记录最新本地 offset，
-	* 光标和拖拽气泡都用 visualCursorOffsetPx / visualValue，本组件自己消化高频更新；
-	* 父级直到松手才会通过 onChange 收到一次最终值（带 snap）。
-	*/
-	const visualCursorOffsetPx = dragVisualOffsetPx !== null && dragVisualOffsetPx !== void 0 ? dragVisualOffsetPx : cursorOffsetPx;
-	const visualValue = useMemo(() => {
-		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
-	]);
 	/** 刻度「现在线」：真实系统时刻落在轴区间内时绘制（含跨日营业次日凌晨） */
 	const wallAligned = dayjs().startOf("minute");
 	const currentTimeOffsetPx = !wallAligned.isBefore(axis.rangeStart) && !wallAligned.isAfter(axis.rangeEnd) ? axis.timeToOffset(wallAligned) : void 0;
@@ -608,75 +544,33 @@ function PisellTimeNavigator(props) {
 		cursorDragActiveRef.current = true;
 		cursorDragBaseRef.current = {
 			startClient: isHorizontal ? e.clientX : e.clientY,
-			startOffset: cursorOffsetPx,
-			pxPerClient: measureWrapPxPerClient()
+			startOffset: cursorOffsetPx
 		};
 		valueUpdatedByScrollRef.current = true;
-		setIsCursorDragging(true);
 		e.currentTarget.setPointerCapture(e.pointerId);
 	}, [
 		userInteractionLocked,
 		isAxisMoves,
 		isHorizontal,
 		cursorOffsetPx,
-		onUserInteraction,
-		measureWrapPxPerClient
+		onUserInteraction
 	]);
 	const handleCursorDragPointerMove = useCallback((e) => {
 		if (!cursorDragActiveRef.current) return;
-		/**
-		* 把 clientX 的屏幕 CSS 像素 delta 折算成轴本地像素。
-		* 没有 CSS 缩放时 pxPerClient=1；祖先有 transform: scale(0.9) 等情况下，
-		* 1 屏幕 px 对应 1/0.9 ≈ 1.11 本地 px，否则 offsetPx 走得不够，
-		* 表现为"光标跟不上手指、时间轴比手指走得近"。
-		*/
-		const delta = ((isHorizontal ? e.clientX : e.clientY) - cursorDragBaseRef.current.startClient) * (cursorDragBaseRef.current.pxPerClient || 1);
-		/**
-		* rAF 节流 + 仅更新本地视觉 offset：
-		* - 不调用 onChange，避免父级（reservation 主页 / 楼层图 / 排程带等）
-		*   每帧重渲，触控环境下尤其明显；
-		* - 只更新本地 dragVisualOffsetPx，光标 + 拖拽气泡通过它定位，
-		*   再叠加 rAF 把同帧多次 move 合并成一次 setState。
-		* 真正提交 onChange 只发生在 pointerUp。
-		*/
-		pendingDragOffsetRef.current = cursorDragBaseRef.current.startOffset + delta;
-		if (dragRafIdRef.current != null) return;
-		dragRafIdRef.current = requestAnimationFrame(() => {
-			dragRafIdRef.current = null;
-			const pending = pendingDragOffsetRef.current;
-			pendingDragOffsetRef.current = null;
-			if (pending == null) return;
-			if (!cursorDragActiveRef.current) return;
-			const maxO = Math.max(0, axis.totalLengthPx - .001);
-			setDragVisualOffsetPx(Math.max(0, Math.min(pending, maxO)));
-		});
-	}, [isHorizontal, axis.totalLengthPx]);
+		const delta = (isHorizontal ? e.clientX : e.clientY) - cursorDragBaseRef.current.startClient;
+		applyOffsetToNavigatorValue(cursorDragBaseRef.current.startOffset + delta, false);
+	}, [isHorizontal, applyOffsetToNavigatorValue]);
 	const handleCursorDragPointerUp = useCallback((e) => {
 		if (!cursorDragActiveRef.current) return;
 		cursorDragActiveRef.current = false;
-		setIsCursorDragging(false);
 		try {
 			e.currentTarget.releasePointerCapture(e.pointerId);
 		} catch (_unused) {}
-		const delta = ((isHorizontal ? e.clientX : e.clientY) - cursorDragBaseRef.current.startClient) * (cursorDragBaseRef.current.pxPerClient || 1);
+		const delta = (isHorizontal ? e.clientX : e.clientY) - cursorDragBaseRef.current.startClient;
 		const 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,
-		cancelPendingDragFrame
-	]);
+	}, [isHorizontal, applyOffsetToNavigatorValue]);
 	const businessHoursPx = useMemo(() => {
 		if (!businessHours) return void 0;
 		const [s, e] = getRangeBounds(businessHours, referenceDate);
@@ -731,7 +625,6 @@ function PisellTimeNavigator(props) {
 		cellSizePx,
 		axisStartMarginPx: isHorizontal ? axisStartMarginW : axisStartMarginH,
 		offsetToTime: axis.offsetToTime,
-		offsetToTimeContinuous: axis.offsetToTimeContinuous,
 		onSelectTime: handleSelectTime,
 		isInDisabledRanges: isInDisabled,
 		snapToStep,
@@ -829,25 +722,18 @@ function PisellTimeNavigator(props) {
 		"aria-hidden": true
 	}), !isAxisMoves && /* @__PURE__ */ React.createElement(CursorLayer, {
 		orientation,
-		value: visualValue,
+		value: effectiveValue,
 		timeFormat,
 		locale,
 		isRealtime: realtime,
-		offsetPx: visualCursorOffsetPx,
+		offsetPx: cursorOffsetPx,
 		style: cursorStyle,
 		dragInteractive: !userInteractionLocked,
-		isDragging: isCursorDragging,
 		onDragPointerDown: handleCursorDragPointerDown,
 		onDragPointerMove: handleCursorDragPointerMove,
 		onDragPointerUp: handleCursorDragPointerUp,
 		onDragPointerCancel: handleCursorDragPointerUp
-	})))))), !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", {
+	})))))), isAxisMoves && /* @__PURE__ */ React.createElement("div", {
 		className: classNames("pisell-time-navigator-cursor-fixed", `pisell-time-navigator-cursor-fixed--${orientation}`),
 		"aria-hidden": true
 	}, /* @__PURE__ */ React.createElement(CursorLayer, {