@hsu-react/ui 2.5.3 → 2.5.4

package/lib/components/Slider/index.js

@@ -21,25 +21,37 @@ const Slider = props => {
     ...sliderConfig
   } = props;
   const [_value, setValue] = (0, _react.useState)(value);
-  const [lastValue, setLastValue] = (0, _react.useState)(value);
-  (0, _react.useEffect)(() => {
-    if (_value !== lastValue) {
-      setLastValue(_value);
-      onChange?.(_value);
-    }
-  }, [lastValue, onChange, _value]);
+  // 最近一次通知出去的值，代替原来那个用 state 记账的写法
+  const notifiedRef = (0, _react.useRef)(value);
+
+  /**
+   * `onChange` 是「用户拖了滑块」这个**事件**的通知，不是从 state 推导出来的结果，
+   * 所以在事件处理里发，不在 effect 里发。详见 `Input/TextArea/index.tsx` 里那段
+   * 说明——旧写法（依赖数组里放 `onChange`、体内又调它、用 state 记「通知过没有」）
+   * 会让传内联箭头的消费方死循环。
+   */
+  const handleChange = next => {
+    setValue(next);
+    if (next === notifiedRef.current) return;
+    notifiedRef.current = next;
+    onChange?.(next);
+  };
+
+  // 外部值（`value` / `topValue`）变了才回写，不跟着通知走
   (0, _react.useEffect)(() => {
-    if ((topValue || value) !== lastValue) {
-      setValue(topValue || value);
+    const next = topValue || value;
+    if (next !== notifiedRef.current) {
+      notifiedRef.current = next;
+      setValue(next);
     }
-  }, [lastValue, topValue, value]);
+  }, [topValue, value]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Slider, {
     className: (0, _classnames.default)([_indexModule.default.slider, className]),
     tooltip: {
       open: false
     },
     value: _value,
-    onChange: setValue,
+    onChange: handleChange,
     ...sliderConfig
   });
 };

package/lib/components/Upload/_hooks/useUploadFileList.js

@@ -7,6 +7,7 @@ exports.useUploadFileList = useUploadFileList;
 var _react = require("react");
 var _hsuUtils = require("hsu-utils");
 var _utils = require("../_utils");
+var _useLatestRef = require("../../../hooks/useLatestRef");
 /**
  * Manage the upload file list state
  */
@@ -17,6 +18,10 @@ function useUploadFileList({
 }) {
   const [_fileList, setFilelist] = (0, _react.useState)([]);
   const [lastFileList, setLastFileList] = (0, _react.useState)([]);
+  const onChangeRef = (0, _useLatestRef.useLatestRef)(onChange);
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   (0, _react.useEffect)(() => {
     if (rmFile) {
       const file = _fileList.find(item => item.uid === rmFile);
@@ -24,14 +29,14 @@ function useUploadFileList({
       if (file) {
         setFilelist(filteredList);
         setTimeout(() => {
-          onChange?.({
+          onChangeRef.current?.({
             file,
             fileList: filteredList
           });
         }, 100);
       }
     }
-  }, [_fileList, onChange, rmFile]);
+  }, [_fileList, onChangeRef, rmFile]);
   (0, _react.useEffect)(() => {
     if (!_hsuUtils.Equal.ObjEqual(fileList ?? [], lastFileList)) {
       if (fileList?.length) {

package/lib/components/Upload/_hooks/useUploadOperations.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useUploadOperations = useUploadOperations;
 var _react = require("react");
 var _hsuUtils = require("hsu-utils");
+var _useLatestRef = require("../../../hooks/useLatestRef");
 /**
  * Manage upload and download operations
  */
@@ -19,6 +20,7 @@ function useUploadOperations({
     downloading: {},
     uploadingList: {}
   });
+  const onUploadingListRef = (0, _useLatestRef.useLatestRef)(onUploadingList);
 
   // Sync to the ref on update
   (0, _react.useEffect)(() => {
@@ -27,12 +29,15 @@ function useUploadOperations({
   (0, _react.useEffect)(() => {
     operationsRef.current.uploadingList = uploadingList;
   }, [uploadingList]);
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   (0, _react.useEffect)(() => {
     if (!_hsuUtils.Equal.ObjEqual(uploadingList, lastUploadList)) {
-      onUploadingList?.((0, _hsuUtils.deepCopy)(uploadingList));
+      onUploadingListRef.current?.((0, _hsuUtils.deepCopy)(uploadingList));
       setLastUploadList((0, _hsuUtils.deepCopy)(uploadingList));
     }
-  }, [uploadingList, lastUploadList, onUploadingList]);
+  }, [uploadingList, lastUploadList, onUploadingListRef]);
 
   // Cleanup function
   (0, _react.useEffect)(() => {

package/lib/hooks/useLatestRef.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+/**
+ * 把一个每次渲染都可能换引用的值（通常是回调 prop）装进一个**引用恒定**的 ref。
+ *
+ * 用途只有一个：让 effect 不必把回调放进依赖数组。
+ * 回调放进依赖数组、effect 体内又调它，是一条会让消费方死循环的写法——
+ * 消费方传内联箭头（`onChange={(v) => setX(v)}`，React 里最常见的写法）时
+ * 每次渲染都是新引用 → effect 重跑 → 调回调 → 父级 setState → 再渲染 →
+ * 又是新引用 …… 直到 React 抛 `Maximum update depth exceeded`。
+ *
+ * ```ts
+ * const onDoneRef = useLatestRef(onDone);
+ * useEffect(() => {
+ *   const t = setTimeout(() => onDoneRef.current?.(), 1000);
+ *   return () => clearTimeout(t);
+ * }, [onDoneRef]); // 只在挂载时跑一次，且永远调到最新的 onDone
+ * ```
+ *
+ * 注意：渲染期间就地赋值。React 官方对 ref 的约束是「不要在渲染中**读**可变值」，
+ * 写入最新的 props 是 useEffectEvent 落地前的通行做法（ahooks 的 `useLatest`、
+ * React 文档里的 `useEvent` polyfill 都是这么写的）。
+ */
+export declare function useLatestRef<T>(value: T): import("react").MutableRefObject<T>;
+export default useLatestRef;

package/lib/hooks/useLatestRef.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.useLatestRef = useLatestRef;
+var _react = require("react");
+/**
+ * 把一个每次渲染都可能换引用的值（通常是回调 prop）装进一个**引用恒定**的 ref。
+ *
+ * 用途只有一个：让 effect 不必把回调放进依赖数组。
+ * 回调放进依赖数组、effect 体内又调它，是一条会让消费方死循环的写法——
+ * 消费方传内联箭头（`onChange={(v) => setX(v)}`，React 里最常见的写法）时
+ * 每次渲染都是新引用 → effect 重跑 → 调回调 → 父级 setState → 再渲染 →
+ * 又是新引用 …… 直到 React 抛 `Maximum update depth exceeded`。
+ *
+ * ```ts
+ * const onDoneRef = useLatestRef(onDone);
+ * useEffect(() => {
+ *   const t = setTimeout(() => onDoneRef.current?.(), 1000);
+ *   return () => clearTimeout(t);
+ * }, [onDoneRef]); // 只在挂载时跑一次，且永远调到最新的 onDone
+ * ```
+ *
+ * 注意：渲染期间就地赋值。React 官方对 ref 的约束是「不要在渲染中**读**可变值」，
+ * 写入最新的 props 是 useEffectEvent 落地前的通行做法（ahooks 的 `useLatest`、
+ * React 文档里的 `useEvent` polyfill 都是这么写的）。
+ */
+function useLatestRef(value) {
+  const ref = (0, _react.useRef)(value);
+  ref.current = value;
+  return ref;
+}
+var _default = exports.default = useLatestRef;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",
@@ -42,7 +42,9 @@
     "docs:build": "dumi build",
     "docs:preview": "dumi preview",
     "build": "node scripts/clean-dist.cjs && node scripts/gen-tokens-scss.cjs && father build && node scripts/mark-cjs.cjs && node scripts/check-heavy-deps.cjs",
-    "prepublishOnly": "node scripts/clean-dist.cjs && node scripts/gen-tokens-scss.cjs --check && father build && node scripts/mark-cjs.cjs && node scripts/check-heavy-deps.cjs",
+    "prepublishOnly": "node scripts/clean-dist.cjs && node scripts/gen-tokens-scss.cjs --check && vitest run && father build && node scripts/mark-cjs.cjs && node scripts/check-heavy-deps.cjs",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "check:deps": "node scripts/check-heavy-deps.cjs",
     "tokens": "node scripts/gen-tokens-scss.cjs",
     "check:tokens": "node scripts/gen-tokens-scss.cjs --check"
@@ -115,6 +117,8 @@
   },
   "devDependencies": {
     "@ant-design/icons": "^6.3.2",
+    "@testing-library/dom": "^10",
+    "@testing-library/react": "^16",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.4",
     "@types/markdown-it": "^14.1.2",
@@ -126,6 +130,7 @@
     "antd": "6.5.4",
     "dumi": "^2.4.0",
     "father": "^4.5.0",
+    "jsdom": "^25",
     "mobx": "^6.12.3",
     "mobx-react-lite": "^4.0.7",
     "react": "^18.3.1",
@@ -134,7 +139,8 @@
     "react-router": "^6.23.1",
     "react-router-dom": "^6.23.1",
     "sass": "^1.101.0",
-    "typescript": "^5.4.5"
+    "typescript": "^5.4.5",
+    "vitest": "^2"
   },
   "peerDependenciesMeta": {
     "react-router": {

package/src/__tests__/setup.ts

@@ -0,0 +1,26 @@
+/**
+ * jsdom 没有 `matchMedia` / `ResizeObserver`，antd 与 rc-* 会直接调它们。
+ * 这里补齐，缺一个就整个测试文件起不来
+ */
+import "@testing-library/react";
+
+if (!window.matchMedia) {
+  window.matchMedia = ((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  })) as unknown as typeof window.matchMedia;
+}
+
+if (!(globalThis as { ResizeObserver?: unknown }).ResizeObserver) {
+  (globalThis as { ResizeObserver?: unknown }).ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };
+}

package/src/components/Chart/Bubble/index.tsx

@@ -12,6 +12,7 @@ import {
   defaultBubbleColorList,
   drawCircles,
 } from "../_utils/bubble";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 export interface BubbleDataItem {
   name: string;
@@ -370,6 +371,10 @@ const Bubble: React.FC<ChartBubbleProps> = (props) => {
     }
   }, [chartOption, data]);
 
+  const onChartRef = useLatestRef(onChart);
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   useEffect(() => {
     if (!chartRef.current) return;
@@ -382,7 +387,7 @@ const Bubble: React.FC<ChartBubbleProps> = (props) => {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
       // Call the onChart callback on first initialization
-      onChart?.(chart);
+      onChartRef.current?.(chart);
     }
 
     // Resize first so echarts picks up the correct container size, then apply the option
@@ -410,7 +415,7 @@ const Bubble: React.FC<ChartBubbleProps> = (props) => {
     containerSize.width,
     containerSize.height,
     handleResize,
-    onChart,
+    onChartRef,
     onClick,
   ]);
 

package/src/components/Chart/Common/index.tsx

@@ -3,6 +3,7 @@ import useContainerReady from "../_hooks/useContainerReady";
 import styles from "../index.module.scss";
 import { ChartCommonProps, ChartOptionType, ChartsOption } from "..";
 import * as echarts from "echarts";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 const Common: React.FC<ChartCommonProps> = (props) => {
   const { className, style, onChart, ...coreOption } = props;
@@ -31,6 +32,10 @@ const Common: React.FC<ChartCommonProps> = (props) => {
     chartInstanceRef.current?.resize();
   }, []);
 
+  const onChartRef = useLatestRef(onChart);
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   useEffect(() => {
     if (!chartRef.current || !containerReady) return;
@@ -46,7 +51,7 @@ const Common: React.FC<ChartCommonProps> = (props) => {
     chart.setOption(chartOption as ChartOptionType, true);
 
     // Chart-ready callback (can be used for legend auto-scroll, etc.)
-    onChart?.(chart);
+    onChartRef.current?.(chart);
 
     // Add resize listener
     window.addEventListener("resize", handleResize);
@@ -61,7 +66,7 @@ const Common: React.FC<ChartCommonProps> = (props) => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize, onChart,
+  }, [chartOption, handleResize, onChartRef,
     containerReady,
   ]);
 

package/src/components/Chart/Heatmap/index.tsx

@@ -9,6 +9,7 @@ import {
 } from "../_utils/heatmap";
 import { resolveChartChrome } from "../_utils/chartTheme";
 import useIsDark from "../../../hooks/useIsDark";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 export interface HeatmapDataItem {
   /** X-axis index or name */
@@ -266,6 +267,10 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
     chartInstanceRef.current?.resize();
   }, []);
 
+  const onChartRef = useLatestRef(onChart);
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   useEffect(() => {
     if (!chartRef.current || !containerReady) return;
@@ -276,7 +281,7 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
       // Call the onChart callback on first initialization
-      onChart?.(chart);
+      onChartRef.current?.(chart);
     }
 
     // Apply the option
@@ -304,7 +309,7 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
         chartInstanceRef.current?.off("click", onClick);
       }
     };
-  }, [chartOption, handleResize, onChart, onClick,
+  }, [chartOption, handleResize, onChartRef, onClick,
     containerReady,
   ]);
 

package/src/components/Chart/Pie/Pie3D/index.tsx

@@ -7,6 +7,7 @@ import { ChartCommonProps, ChartOptionType, ChartsOption } from "../..";
 import { useMouseOverHandler, useGlobalOutHandler } from "./_hooks";
 import { getPie3DOption } from "./_utils/option";
 import styles from "../../index.module.scss";
+import { useLatestRef } from "../../../../hooks/useLatestRef";
 
 export interface Pie3DDataItem {
   name: string;
@@ -170,6 +171,10 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
     { minHeight, maxHeight, yOffset, autoRotate }
   );
 
+  const onChartRef = useLatestRef(onChart);
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   useEffect(() => {
     if (!chartRef.current || !containerReady) return;
 
@@ -177,7 +182,7 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
     if (!chart) {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
-      onChart?.(chart);
+      onChartRef.current?.(chart);
     }
 
     chart.setOption(chartOption as ChartOptionType, true);
@@ -211,7 +216,7 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
     handleResize,
     handleMouseOver,
     handleGlobalOut,
-    onChart,
+    onChartRef,
     onClick,
     containerReady,
   ]);

package/src/components/Chart/Pie/index.tsx

@@ -13,6 +13,7 @@ import { autoScrollLegend } from "../chartUtils";
 
 import styles from "../index.module.scss";
 import ChartPie3D, { ChartPie3DProps } from "./Pie3D";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 export interface ChartPieProps extends ChartCommonProps {
   chartTitle?: string;
@@ -252,6 +253,10 @@ const ChartPie: ChartPieFC = (props) => {
     chartInstanceRef.current?.resize();
   }, []);
 
+  const onChartRef = useLatestRef(onChart);
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   useEffect(() => {
     if (!chartRef.current || !containerReady) return;
@@ -262,7 +267,7 @@ const ChartPie: ChartPieFC = (props) => {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
       // Call the onChart callback on first initialization
-      onChart?.(chart);
+      onChartRef.current?.(chart);
     }
 
     // Apply the option
@@ -315,7 +320,7 @@ const ChartPie: ChartPieFC = (props) => {
   }, [
     chartOption,
     handleResize,
-    onChart,
+    onChartRef,
     onClick,
     enableLegendAutoScroll,
     seriesData,

package/src/components/Chat/ChatInput/index.tsx

@@ -14,6 +14,7 @@ import {
 } from "./_components";
 import classNames from "classnames";
 import Button, { ButtonProps } from "../../Button";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 export type { AgentToggleConfig } from "./_components";
 
 export interface AgentConfig {
@@ -127,6 +128,10 @@ const ChatInput: React.FC<ChatInputProps> = (props) => {
   // Use external state or internal state
   const agentsState = isControlled ? externalAgentsState : internalAgentsState;
 
+  const onAgentsChangeRef = useLatestRef(onAgentsChange);
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // When the model switches, sync the agents state (only in uncontrolled mode)
   useEffect(() => {
     if (isControlled) return; // In controlled mode, state is managed externally
@@ -136,12 +141,12 @@ const ChatInput: React.FC<ChatInputProps> = (props) => {
     );
     if (currentModel?.agents && currentModel.agents.length > 0) {
       setInternalAgentsState(currentModel.agents);
-      onAgentsChange?.(currentModel.agents);
+      onAgentsChangeRef.current?.(currentModel.agents);
     }
   }, [
     modelConfig?.modelType,
     modelConfig?.modelList,
-    onAgentsChange,
+    onAgentsChangeRef,
     isControlled,
   ]);
 

package/src/components/Icon/index.tsx

@@ -8,6 +8,7 @@ import * as AntdIcons from "@ant-design/icons";
 import React, { useCallback, useEffect, useRef } from "react";
 import classNames from "classnames";
 import styles from "./index.module.scss";
+import { useLatestRef } from "../../hooks/useLatestRef";
 
 type AntdNamedIconComponent = React.ForwardRefExoticComponent<
   {
@@ -73,9 +74,13 @@ const Icon = React.forwardRef<HTMLSpanElement, IconProps>((props, forwardedRef)
     [forwardedRef]
   );
 
+  const onRefRef = useLatestRef(onRef);
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   useEffect(() => {
-    onRef?.(ref);
-  }, [onRef, ref]);
+    onRefRef.current?.(ref);
+  }, [onRefRef, ref]);
 
   const mergedStyle: React.CSSProperties = {
     color,

package/src/components/Input/Number/index.tsx

@@ -8,8 +8,8 @@ import { CloseCircleFilled } from "@ant-design/icons";
 
 import classNames from "classnames";
 import styles from "./index.module.scss";
-import { useDebounceEffect } from "ahooks";
 import type { InputNumberRef } from "../../../types/antd";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 export interface InputNumberProps extends Omit<
   AntdInputNumberProps,
@@ -44,6 +44,7 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
   // `getRef` keeps handing consumers an `HTMLInputElement` exactly as before.
   const ref = useRef<InputNumberRef>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
+  const getRefRef = useLatestRef(getRef);
 
   // On initialization, prefer value, then fall back to defaultValue
   const initialValue =
@@ -58,22 +59,21 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
         : "";
 
   const [_value, setValue] = useState<string>(initialValue);
-  const [lastValue, setLastValue] = useState<string>(initialValue);
   const prevValueRef = useRef<typeof value>(undefined);
+  // 最近一次通知出去的文本，代替原来那个用 state 记账的写法
+  const notifiedRef = useRef<string>(initialValue);
 
-  useDebounceEffect(
-    () => {
-      if (_value !== lastValue) {
-        setLastValue(_value);
-
-        onChange?.(_value);
-      }
-    },
-    [_value, lastValue, onChange],
-    {
-      wait: 10,
-    },
-  );
+  /**
+   * `onChange` 是「用户改了输入」这个**事件**的通知，不是从 state 推导出来的结果，
+   * 所以在事件处理里发，不在 effect 里发。详见 `TextArea/index.tsx` 里那段说明——
+   * 旧写法（依赖数组里放 `onChange`、体内又调它、用 state 记「通知过没有」）
+   * 会让传内联箭头的消费方死循环。
+   */
+  const notify = (next: string) => {
+    if (next === notifiedRef.current) return;
+    notifiedRef.current = next;
+    onChange?.(next);
+  };
 
   useEffect(() => {
     // Update internal state only when the external value prop actually changes
@@ -96,17 +96,18 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
         Number(value) === Number(_value);
 
       if (sameNumber) {
-        // 只同步「已提交值」，不动正在编辑的文本
-        setLastValue(_value);
+        // 只同步「已通知过的值」，不动正在编辑的文本
+        notifiedRef.current = _value;
       } else if (value !== undefined && value !== null) {
         const newValue =
           typeof value === "number" ? `${value}` : value?.toString();
+        // 外部把值改了，之前通知过什么就不作数了，重新以外部值为准
+        notifiedRef.current = newValue;
         setValue(newValue);
-        setLastValue(newValue);
       } else {
         // Clear only on initialization or when explicitly set to undefined/null externally
+        notifiedRef.current = "";
         setValue("");
-        setLastValue("");
       }
     }
     // `_value` 是刻意不进依赖的：这个 effect 只该在**外部** value 变化时跑，
@@ -114,15 +115,15 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
+  // 只在挂载时把 ref 交出去。`getRef` 进依赖数组同样会被内联箭头带着每次渲染重跑
   useEffect(() => {
-    getRef?.(ref.current);
-  }, [getRef]);
+    getRefRef.current?.(ref.current);
+  }, [getRefRef]);
 
   const handleClear = (e: React.MouseEvent) => {
     e.stopPropagation();
     setValue("");
-    setLastValue("");
-    onChange?.("");
+    notify("");
   };
 
   const showClear =
@@ -138,6 +139,7 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
             ? ""
             : (typeof e === "number" ? e : e || "").toString();
         setValue(newValue);
+        notify(newValue);
       }}
       className={classNames(styles.antdInput, className)}
       controls={false}