seeder-st2110-components 1.6.0 → 1.6.1

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var react = require('react');
+var React = require('react');
 var antd = require('antd');
 var jsxRuntime = require('react/jsx-runtime');
 var ahooks = require('ahooks');
@@ -80,7 +80,7 @@ const formatBytes = function (bytes) {
   const i = Math.floor(Math.log(bytes) / Math.log(k));
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
 };
-const UsageItem = /*#__PURE__*/react.memo(_ref => {
+const UsageItem = /*#__PURE__*/React.memo(_ref => {
   let {
     title,
     iconClass,
@@ -110,8 +110,8 @@ const UsageItem = /*#__PURE__*/react.memo(_ref => {
 var UsageItem$1 = UsageItem;
 
 const useHardwareWebSocket = socketUrl => {
-  const [systemStatus, setSystemStatus] = react.useState();
-  const handleMessage = react.useCallback(message => {
+  const [systemStatus, setSystemStatus] = React.useState();
+  const handleMessage = React.useCallback(message => {
     try {
       if (message) {
         setSystemStatus(prev => _objectSpread2(_objectSpread2({}, prev), message));
@@ -234,7 +234,7 @@ const useHardwareUsage = socketUrl => {
   const {
     ps_status
   } = useHardwareWebSocket$1(socketUrl);
-  return react.useMemo(() => {
+  return React.useMemo(() => {
     if (!ps_status || typeof ps_status !== 'object') return null;
     const statusItems = getItems(getDetail(ps_status));
     return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -266,7 +266,7 @@ const AuthorizationModal = _ref => {
   const {
     message
   } = antd.App.useApp();
-  const [code, setCode] = react.useState('');
+  const [code, setCode] = React.useState('');
   const {
     accredit_status: isActivated,
     message: statusMessage = 'Unactivated',
@@ -360,13 +360,13 @@ const useAuth = options => {
     autoShowModal = true
   } = options || {};
   const [messageApi, contextHolder] = antd.message.useMessage();
-  const [showModal, setShowModal] = react.useState(false); // 默认隐藏
-  const [authData, setAuthData] = react.useState(defaultAuthData);
-  const [isRegistered, setIsRegistered] = react.useState(false);
-  const [loading, setLoading] = react.useState(false);
-  const openModal = react.useCallback(() => setShowModal(true), []);
-  const closeModal = react.useCallback(() => setShowModal(false), []);
-  react.useEffect(() => {
+  const [showModal, setShowModal] = React.useState(false); // 默认隐藏
+  const [authData, setAuthData] = React.useState(defaultAuthData);
+  const [isRegistered, setIsRegistered] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+  const openModal = React.useCallback(() => setShowModal(true), []);
+  const closeModal = React.useCallback(() => setShowModal(false), []);
+  React.useEffect(() => {
     async function loadAuthInfo() {
       try {
         setLoading(true);
@@ -442,22 +442,22 @@ const useUpgrade = _ref => {
     uploadCompleteDelay = 3000,
     statusPollingInterval = 1000
   } = _ref;
-  const [isSpinning, setIsSpinning] = react.useState(false);
-  const [interval, setInterval] = react.useState(undefined); // 间隔时间，当设置值为 undefined 时会停止计时器
-  const inputRef = react.useRef(null);
-  const [currentStatus, setCurrentStatus] = react.useState('idle'); // 'idle' | 'uploading' | 'upgrading'
-  const isUploadCompleteRef = react.useRef(false); // 安装包上传是否完成
-  const [uploadProgress, setUploadProgress] = react.useState(0);
+  const [isSpinning, setIsSpinning] = React.useState(false);
+  const [interval, setInterval] = React.useState(undefined); // 间隔时间，当设置值为 undefined 时会停止计时器
+  const inputRef = React.useRef(null);
+  const [currentStatus, setCurrentStatus] = React.useState('idle'); // 'idle' | 'uploading' | 'upgrading'
+  const isUploadCompleteRef = React.useRef(false); // 安装包上传是否完成
+  const [uploadProgress, setUploadProgress] = React.useState(0);
 
   // 分别创建独立的取消令牌
-  const uploadCancelToken = react.useRef(axios.CancelToken.source());
-  const statusCancelToken = react.useRef(axios.CancelToken.source());
+  const uploadCancelToken = React.useRef(axios.CancelToken.source());
+  const statusCancelToken = React.useRef(axios.CancelToken.source());
   const showLoader = () => setIsSpinning(true);
   const hideLoader = () => setIsSpinning(false);
 
   // 构建菜单项 - 确保至少包含download和upload
   // 构建菜单项 - 最终完美版本
-  const finalMenuItems = react.useMemo(() => {
+  const finalMenuItems = React.useMemo(() => {
     const hasDownload = menuItems.some(item => item.key === 'download');
     const hasUpload = menuItems.some(item => item.key === 'upload');
     if (hasDownload && hasUpload) {
@@ -694,7 +694,7 @@ const useUpgrade = _ref => {
   ahooks.useInterval(fetchUpgradeStatus, interval);
 
   // 组件卸载时清理
-  react.useEffect(() => {
+  React.useEffect(() => {
     return () => {
       uploadCancelToken.current.cancel();
       statusCancelToken.current.cancel();
@@ -748,7 +748,7 @@ const useSystemOperations = function () {
   const {
     modal: AntdModal
   } = antd.App.useApp();
-  const doAction = react.useCallback(action => {
+  const doAction = React.useCallback(action => {
     try {
       AntdModal.confirm({
         icon: /*#__PURE__*/jsxRuntime.jsx(icons.ExclamationCircleFilled, {}),
@@ -772,14 +772,14 @@ const useSystemOperations = function () {
       console.error("".concat(action.toUpperCase(), " ERROR: "), error);
     }
   }, [AntdModal, confirmTitle, cancelText, okText, onPowerOff, onRestart]);
-  const getMenuItems = react.useCallback(() => [{
+  const getMenuItems = React.useCallback(() => [{
     key: "poweroff",
     label: "Power Off"
   }, {
     key: "restart",
     label: "Restart"
   }], []);
-  const handleMenuClick = react.useCallback(_ref => {
+  const handleMenuClick = React.useCallback(_ref => {
     let {
       key
     } = _ref;
@@ -881,15 +881,15 @@ const NetworkSettingsModal = _ref2 => {
     modal
   } = antd.App.useApp();
   const [form] = antd.Form.useForm();
-  const [st2110Interfaces, setSt2110Interfaces] = react.useState([]);
-  const [lanConfigs, setLanConfigs] = react.useState([]);
-  const [submitLoading, setSubmitLoading] = react.useState(false);
-  const [isInitialized, setIsInitialized] = react.useState(false);
-  const initializationStatus = react.useRef({
+  const [st2110Interfaces, setSt2110Interfaces] = React.useState([]);
+  const [lanConfigs, setLanConfigs] = React.useState([]);
+  const [submitLoading, setSubmitLoading] = React.useState(false);
+  const [isInitialized, setIsInitialized] = React.useState(false);
+  const initializationStatus = React.useRef({
     hasFetched: false,
     hasInitialized: false
   });
-  const preparedFieldConfig = react.useMemo(() => {
+  const preparedFieldConfig = React.useMemo(() => {
     const config = _objectSpread2({}, fieldConfig);
 
     // 确保LAN和QSFP的配置存在
@@ -907,7 +907,7 @@ const NetworkSettingsModal = _ref2 => {
     }
     return config;
   }, [fieldConfig, showNetmask, sections]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!open) return;
     const fetchData = async () => {
       if (initializationStatus.current.hasFetched) return;
@@ -954,7 +954,7 @@ const NetworkSettingsModal = _ref2 => {
   }, [open, getLanConfig, getSysConfig, sections]);
 
   // 当模态框关闭时重置状态
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!open) {
       setIsInitialized(false);
       setLanConfigs([]);
@@ -968,7 +968,7 @@ const NetworkSettingsModal = _ref2 => {
   }, [open, form]);
 
   // 动态初始值配置
-  const initialValues = react.useMemo(() => {
+  const initialValues = React.useMemo(() => {
     const values = {};
     if (sections.includes('LAN') && lanConfigs.length > 0) {
       values.LAN = lanConfigs.map(config => _objectSpread2({
@@ -993,13 +993,13 @@ const NetworkSettingsModal = _ref2 => {
   }, [lanConfigs, st2110Interfaces, sections, showNetmask]);
 
   // 当初始值准备好后设置表单值
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (isInitialized && !initializationStatus.current.hasInitialized) {
       form.setFieldsValue(initialValues);
       initializationStatus.current.hasInitialized = true;
     }
   }, [isInitialized, form, initialValues]);
-  const handleSuccess = react.useCallback(async function () {
+  const handleSuccess = React.useCallback(async function () {
     let {
       messageText = 'Success',
       isPopup = !!restart,
@@ -1039,7 +1039,7 @@ const NetworkSettingsModal = _ref2 => {
     }
     onClose();
   }, [message, modal, getSysConfig, restart, getConfig, sections, onClose]);
-  const handleSubmit = react.useCallback(async () => {
+  const handleSubmit = React.useCallback(async () => {
     setSubmitLoading(true);
     try {
       const values = await form.validateFields();
@@ -1150,7 +1150,7 @@ const NetworkSettingsModal = _ref2 => {
     })), restartRemark]
   }));
 };
-var NetworkSettingsModal$1 = /*#__PURE__*/react.memo(NetworkSettingsModal);
+var NetworkSettingsModal$1 = /*#__PURE__*/React.memo(NetworkSettingsModal);
 
 const defaultFieldConfigs = {
   clock_class: {
@@ -1276,12 +1276,12 @@ const PtpModal = _ref => {
     modalProps = {},
     formProps = {}
   } = _ref;
-  const [ptpStatus, setPtpStatus] = react.useState(null);
+  const [ptpStatus, setPtpStatus] = React.useState(null);
   const [form] = antd.Form.useForm();
   const {
     message
   } = antd.App.useApp();
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (open) {
       getPtpInfo().then(data => {
         if (data !== null && data !== void 0 && data[0]) {
@@ -1291,7 +1291,7 @@ const PtpModal = _ref => {
       });
     }
   }, [open, form, getPtpInfo]);
-  const ptpStatusArray = react.useMemo(() => {
+  const ptpStatusArray = React.useMemo(() => {
     if (!ptpStatus) return [];
     return convertPtpStatusToArray(ptpStatus, fieldConfigs, fieldOrder);
   }, [ptpStatus]);
@@ -1396,9 +1396,9 @@ const PtpModal = _ref => {
     }))
   }));
 };
-var PtpModal$1 = /*#__PURE__*/react.memo(PtpModal);
+var PtpModal$1 = /*#__PURE__*/React.memo(PtpModal);
 
-const LeftList = /*#__PURE__*/react.memo(_ref => {
+const LeftList = /*#__PURE__*/React.memo(_ref => {
   let {
     dataSource,
     selectedPresetId,
@@ -1515,7 +1515,7 @@ const SubmitButton = _ref2 => {
     })
   });
 };
-const RightDetailForm = /*#__PURE__*/react.memo(_ref3 => {
+const RightDetailForm = /*#__PURE__*/React.memo(_ref3 => {
   let {
     form,
     onSave,
@@ -1536,14 +1536,14 @@ const RightDetailForm = /*#__PURE__*/react.memo(_ref3 => {
     },
     presetChanged
   } = _ref3;
-  const [initialSelected, setInitialSelected] = react.useState([]);
+  const [initialSelected, setInitialSelected] = React.useState([]);
   const currentSelected = antd.Form.useWatch('category_list', form) || [];
 
   // 检查是否包含category_list字段
   const hasCategoryList = fields.category_list !== null && fields.category_list !== undefined;
 
   // 初始化 category_list 的选择状态
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (hasCategoryList) {
       const currentValue = form.getFieldValue('category_list') || [];
       setInitialSelected(currentValue);
@@ -1551,7 +1551,7 @@ const RightDetailForm = /*#__PURE__*/react.memo(_ref3 => {
   }, [presetChanged, form, hasCategoryList]); // 当presetChanged变化时更新
 
   // 动态生成 checkbox 选项
-  const checkboxOptions = react.useMemo(() => {
+  const checkboxOptions = React.useMemo(() => {
     if (!hasCategoryList) return [];
     return fields.category_list.options.map(category => {
       const isInitiallySelected = initialSelected.includes(category.name);
@@ -1694,17 +1694,17 @@ const Preset = _ref => {
     message: AntdMessage,
     modal: AntdModal
   } = antd.App.useApp();
-  const [presetList, setPresetList] = react.useState([]);
-  const [selectedPreset, setSelectedPreset] = react.useState(null);
-  const [loading, setLoading] = react.useState(false);
-  const [presetChanged, setPresetChanged] = react.useState(0);
+  const [presetList, setPresetList] = React.useState([]);
+  const [selectedPreset, setSelectedPreset] = React.useState(null);
+  const [loading, setLoading] = React.useState(false);
+  const [presetChanged, setPresetChanged] = React.useState(0);
   const [form] = antd.Form.useForm();
 
   // 获取预设列表
-  react.useEffect(() => {
+  React.useEffect(() => {
     fetchPresetList();
   }, []);
-  const fetchPresetList = react.useCallback(async () => {
+  const fetchPresetList = React.useCallback(async () => {
     try {
       const data = await getPresetList();
       const presets = (data === null || data === void 0 ? void 0 : data.preset_list) || data || [];
@@ -1713,12 +1713,12 @@ const Preset = _ref => {
       console.error('Failed to fetch preset list:', error);
     }
   }, [getPresetList]);
-  const handleSelectPreset = react.useCallback(preset => {
+  const handleSelectPreset = React.useCallback(preset => {
     setSelectedPreset(preset);
     form.setFieldsValue(preset);
     setPresetChanged(prev => prev + 1); // 触发react更新
   }, [form]);
-  const handleAddNew = react.useCallback(() => {
+  const handleAddNew = React.useCallback(() => {
     var _fields$category_list;
     const unsavedPreset = presetList.find(item => !item.id);
     if (unsavedPreset) {
@@ -1740,7 +1740,7 @@ const Preset = _ref => {
     setSelectedPreset(newPreset);
     form.setFieldsValue(newPreset);
   }, [form, presetList, AntdMessage]);
-  const handleRemove = react.useCallback(async () => {
+  const handleRemove = React.useCallback(async () => {
     if (!selectedPreset) return;
 
     // 检查是否为新建的未保存数据（无id）
@@ -1774,7 +1774,7 @@ const Preset = _ref => {
       console.error('Failed to delete preset:', error);
     }
   }, [selectedPreset, form, AntdModal, AntdMessage, fetchPresetList, texts]);
-  const handleLoadPreset = react.useCallback(async loadData => {
+  const handleLoadPreset = React.useCallback(async loadData => {
     if (!loadData) return;
 
     // 显示确认对话框
@@ -1826,7 +1826,7 @@ const Preset = _ref => {
       }
     });
   }, [loadPreset, texts, AntdMessage, AntdModal, onLoadSuccess, onLoadError]);
-  const handleSave = react.useCallback(async () => {
+  const handleSave = React.useCallback(async () => {
     setLoading(true);
     try {
       const values = await form.validateFields();
@@ -1913,9 +1913,9 @@ const Preset = _ref => {
     })
   });
 };
-var PresetModal = /*#__PURE__*/react.memo(Preset);
+var PresetModal = /*#__PURE__*/React.memo(Preset);
 
-const _excluded = ["menuItems", "onMenuClick", "downloadFiles", "upgradeExecute", "upgradeStatus", "acceptFileTypes", "uploadCompleteDelay", "statusPollingInterval", "children"];
+const _excluded$1 = ["menuItems", "onMenuClick", "downloadFiles", "upgradeExecute", "upgradeStatus", "acceptFileTypes", "uploadCompleteDelay", "statusPollingInterval", "children"];
 const UpgradeManager = _ref => {
   let {
       menuItems = [],
@@ -1928,7 +1928,7 @@ const UpgradeManager = _ref => {
       statusPollingInterval = 1000,
       children
     } = _ref,
-    dropdownProps = _objectWithoutProperties(_ref, _excluded);
+    dropdownProps = _objectWithoutProperties(_ref, _excluded$1);
   const [upgradeElement] = useUpgrade$1({
     menuItems,
     onMenuClick,
@@ -3323,7 +3323,9 @@ const CommonHeader = _ref => {
     getSocketUrl = defaultGetSocketUrl,
     logoProps = {},
     className = '',
-    style = {}
+    style = {},
+    // 新增插槽
+    leftContent // 左侧额外内容
   } = _ref;
   const [logo] = useSpaLogo$1(logoProps);
 
@@ -3353,7 +3355,7 @@ const CommonHeader = _ref => {
           },
           children: productInfo.version
         })]
-      })]
+      }), leftContent]
     }), /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
       align: "center",
       gap: 10,
@@ -3397,8 +3399,324 @@ CommonHeader.propTypes = {
 };
 var CommonHeader$1 = CommonHeader;
 
+const _excluded = ["value", "min", "max", "className", "disablePointerLock", "modifierKeys", "decimalPlaces", "onChange", "onDragStart", "onDragEnd", "style"];
+
+// 默认配置
+const DEFAULT_DECIMAL_PLACES = 2;
+
+// src/react/defaults-and-utils.ts
+// eslint-disable-next-line no-var
+var defaultModifiers = {
+  default: {
+    multiplier: 1,
+    sensitivity: 1
+  }
+  // ctrlKey: { multiplier: 1, sensitivity: 1 },
+  // shiftKey: { multiplier: 10, sensitivity: 0.5 },
+  // metaKey: { multiplier: 1, sensitivity: 1 },
+  // altKey: { multiplier: 1, sensitivity: 1 }
+};
+
+// multiplier: 控制每次鼠标移动时数值变化的基本单位 multiplier: 1- 鼠标移动1像素，值变化1 multiplier: 10- 鼠标移动1像素，值变化10
+// sensitivity: 控制数值变化的灵敏度 sensitivity: 1- 正常灵敏度 sensitivity: 0.5- 减半灵敏度，需要移动2像素才能产生正常1像素的效果
+
+// 修改 formatNumber 函数，强制显示1位小数
+function formatNumber(value) {
+  let decimalPlaces = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_DECIMAL_PLACES;
+  return new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: decimalPlaces,
+    maximumFractionDigits: decimalPlaces,
+    useGrouping: false
+  }).format(value);
+}
+function handleArrow(e, multiplier, value) {
+  if (e.key === "ArrowUp") {
+    return value + multiplier;
+  }
+  if (e.key === "ArrowDown") {
+    return value - multiplier;
+  }
+  return value;
+}
+
+// eslint-disable-next-line no-var
+var DragCursor = _ref => {
+  let {
+    cursorPosition
+  } = _ref;
+  return /* @__PURE__ */React.createElement("div", {
+    style: {
+      position: "fixed",
+      left: 0,
+      top: 0,
+      width: "100vw",
+      height: "100vh",
+      pointerEvents: "none"
+    }
+  }, /* @__PURE__ */React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    style: {
+      position: "absolute",
+      left: cursorPosition.x,
+      top: cursorPosition.y,
+      transform: "translate(-50%, -50%)",
+      pointerEvents: "none"
+    }
+  }, /* @__PURE__ */React.createElement("path", {
+    fill: "#000",
+    stroke: "#fff",
+    strokeLinejoin: "round",
+    d: "M6.5 9a.5.5 0 0 0-.8-.4l-4 3a.5.5 0 0 0 0 .8l4 3a.5.5 0 0 0 .8-.4v-1.5h11V15a.5.5 0 0 0 .8.4l4-3a.5.5 0 0 0 0-.8l-4-3a.5.5 0 0 0-.8.4v1.5h-11V9Z",
+    style: {
+      filter: "drop-shadow( 0px 2px 1px rgba(0, 0, 0, .35))"
+    }
+  })));
+};
+
+// eslint-disable-next-line no-var
+var noop = () => {};
+function DraggableNumberInput(_ref2) {
+  let {
+      value,
+      min,
+      max,
+      className = "",
+      disablePointerLock = false,
+      modifierKeys,
+      decimalPlaces = DEFAULT_DECIMAL_PLACES,
+      onChange = noop,
+      onDragStart = noop,
+      onDragEnd = noop,
+      style
+    } = _ref2,
+    restProps = _objectWithoutProperties(_ref2, _excluded);
+  const inputRef = React.useRef(null);
+  const [isMouseDown, setIsMouseDown] = React.useState(false);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [localValue, setLocalValue] = React.useState(() => formatNumber(value, decimalPlaces));
+  const [cursorPosition, setCursorPosition] = React.useState({
+    x: 0,
+    y: 0
+  });
+  const totalMovement = React.useRef(0);
+  const startValue = React.useRef(0);
+  const startX = React.useRef(0);
+  const currentMultiplier = React.useRef(1);
+
+  // === 新增：编辑状态跟踪 ===
+  const [isEditing, setIsEditing] = React.useState(false);
+  const lastExternalValueRef = React.useRef(value);
+
+  // 修改 formatNumber 调用，传入 decimalPlaces
+  const formatValue = React.useCallback(val => {
+    return formatNumber(val, decimalPlaces);
+  }, [decimalPlaces]);
+  const constrainedOnChange = React.useCallback(newValue => {
+    let constrainedValue = newValue;
+    if (typeof min === "number") {
+      constrainedValue = Math.max(min, constrainedValue);
+    }
+    if (typeof max === "number") {
+      constrainedValue = Math.min(max, constrainedValue);
+    }
+    onChange(constrainedValue);
+  }, [onChange, min, max]);
+  React.useEffect(() => {
+    // 只有当用户不在编辑状态，且外部值真正变化时才更新
+    if (!isEditing && lastExternalValueRef.current !== value) {
+      const formattedValue = formatValue(value);
+      setLocalValue(formattedValue);
+      lastExternalValueRef.current = value;
+    }
+  }, [value, formatValue, isEditing]);
+  const handleInputChange = e => {
+    const val = e.target.value;
+
+    // 标记为编辑状态
+    setIsEditing(true);
+    setLocalValue(val);
+
+    // 允许输入中间状态，不立即触发onChange
+    if (val === '' || val === '-' || val === '.' || val.endsWith('.')) {
+      return; // 输入中，不触发onChange
+    }
+    const num = parseFloat(val);
+    if (!isNaN(num)) {
+      constrainedOnChange(num);
+    }
+  };
+  const handleBlur = () => {
+    // 退出编辑状态
+    setIsEditing(false);
+    const num = parseFloat(localValue);
+    if (!isNaN(num)) {
+      // 根据 decimalPlaces 进行四舍五入
+      const precision = Math.pow(10, decimalPlaces);
+      const processedValue = Math.round(num * precision) / precision;
+      const formattedValue = formatValue(processedValue);
+
+      // 更新显示值
+      setLocalValue(formattedValue);
+      lastExternalValueRef.current = processedValue;
+      // 触发外部变化
+      constrainedOnChange(processedValue);
+    } else {
+      // 如果输入无效，重置为当前外部值
+      const formattedValue = formatValue(value);
+      setLocalValue(formattedValue);
+    }
+  };
+  const handleMouseDown = React.useCallback(e => {
+    if (!inputRef.current) return;
+    let x = 0,
+      y = 0;
+    if ("clientX" in e && "clientY" in e) {
+      [x, y] = [e.clientX, e.clientY];
+    }
+    if ("touches" in e) {
+      [x, y] = [e.touches[0].clientX, e.touches[0].clientY];
+    }
+    setIsMouseDown(true);
+    startX.current = x;
+    startValue.current = value;
+    totalMovement.current = 0;
+    setCursorPosition({
+      x,
+      y
+    });
+  }, [value, disablePointerLock]);
+  const updateDelta = React.useCallback(e => {
+    if (!isMouseDown) return;
+    applyMovement(totalMovement.current, e);
+  }, [isMouseDown]);
+  const getModifiers = React.useCallback(e => {
+    const mods = _objectSpread2(_objectSpread2({}, defaultModifiers), modifierKeys);
+    for (const key in mods) {
+      if (key !== "default" && e[key]) {
+        currentMultiplier.current = mods[key].multiplier;
+        return mods[key];
+      }
+    }
+    currentMultiplier.current = mods.default.multiplier;
+    return mods.default;
+  }, [modifierKeys]);
+  const applyMovement = React.useCallback((newMovement, e) => {
+    const {
+      sensitivity,
+      multiplier
+    } = getModifiers(e);
+    const delta = newMovement * sensitivity * multiplier;
+    let newValue = startValue.current + delta;
+    // 根据 decimalPlaces 进行精度控制
+    const precision = Math.pow(10, decimalPlaces);
+    newValue = Math.round(newValue * precision) / precision;
+    newValue = Object.is(newValue, -0) ? 0 : newValue;
+    constrainedOnChange(newValue);
+  }, [constrainedOnChange, getModifiers, decimalPlaces]);
+  const handleArrowKeyDown = e => {
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      e.preventDefault();
+      const {
+        multiplier
+      } = getModifiers(e);
+      const newValue = handleArrow(e, multiplier, value);
+      constrainedOnChange(newValue);
+    }
+  };
+  const handleModifierKeyDuringDrag = React.useCallback(e => {
+    if (e.key === "Shift" || e.key === "Control" || e.key === "Meta" || e.key === "Alt") {
+      updateDelta(e);
+    }
+  }, [updateDelta]);
+  const handleMouseMove = React.useCallback(e => {
+    if (!isMouseDown) return;
+    if ("touches" in e) {
+      e.preventDefault();
+    }
+    if (!disablePointerLock && document.pointerLockElement && !("touches" in e)) {
+      setCursorPosition(prev => {
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+        const x2 = (prev.x + e.movementX + width) % width;
+        const y = (prev.y + e.movementY + height) % height;
+        return {
+          x: x2,
+          y
+        };
+      });
+    }
+    const x = "touches" in e ? e.touches[0].clientX : e.clientX;
+    const newMovement = disablePointerLock || "touches" in e ? x - startX.current : totalMovement.current + e.movementX;
+    if (!isDragging && newMovement !== 0) {
+      if (!disablePointerLock && !("touches" in e)) {
+        var _inputRef$current, _inputRef$current$req;
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || (_inputRef$current$req = _inputRef$current.requestPointerLock) === null || _inputRef$current$req === void 0 || _inputRef$current$req.call(_inputRef$current);
+      }
+      setIsDragging(true);
+      document.addEventListener("keydown", handleModifierKeyDuringDrag);
+      document.addEventListener("keyup", handleModifierKeyDuringDrag);
+      onDragStart();
+    }
+    totalMovement.current = newMovement;
+    applyMovement(newMovement, e);
+  }, [isMouseDown, disablePointerLock, startX, isDragging, onDragStart, applyMovement]);
+  const handleMouseUp = React.useCallback(() => {
+    setIsMouseDown(false);
+    totalMovement.current = 0;
+    if (isDragging) {
+      setIsDragging(false);
+      document.removeEventListener("keydown", handleModifierKeyDuringDrag);
+      document.removeEventListener("keyup", handleModifierKeyDuringDrag);
+      onDragEnd();
+    }
+    if (document.pointerLockElement) {
+      document.exitPointerLock();
+    }
+  }, [isDragging, onDragEnd, disablePointerLock]);
+  React.useEffect(() => {
+    if (isMouseDown) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("touchmove", handleMouseMove, {
+        passive: false
+      });
+      document.addEventListener("mouseup", handleMouseUp);
+      document.addEventListener("touchend", handleMouseUp);
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        document.removeEventListener("touchmove", handleMouseMove);
+        document.removeEventListener("touchend", handleMouseUp);
+      };
+    }
+  }, [isMouseDown, handleMouseMove, handleMouseUp]);
+  return /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("input", _objectSpread2({
+    ref: inputRef,
+    type: "text",
+    inputMode: "numeric",
+    pattern: "-?[0-9]*\\.?[0-9]*",
+    value: localValue,
+    onChange: handleInputChange,
+    onBlur: handleBlur,
+    onMouseDown: handleMouseDown,
+    onTouchStart: handleMouseDown,
+    onKeyDown: handleArrowKeyDown,
+    className: "draggable-number-input ".concat(className, " ").concat(isDragging ? "dragging" : ""),
+    style: _objectSpread2(_objectSpread2({}, {
+      cursor: "ew-resize",
+      userSelect: "none",
+      caretColor: isDragging ? "transparent" : "initial"
+    }), style)
+  }, restProps)), isDragging && !disablePointerLock && /* @__PURE__ */React.createElement(DragCursor, {
+    cursorPosition
+  }));
+}
+
 exports.AuthorizationModal = AuthorizationModal$1;
 exports.CommonHeader = CommonHeader$1;
+exports.DraggableNumberInput = DraggableNumberInput;
 exports.NetworkSettingsModal = NetworkSettingsModal$1;
 exports.PresetModal = PresetModal;
 exports.PtpModal = PtpModal$1;