From 89492fd673a5b3b77ccfd5ba810febbd385a9b53 Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Tue, 3 Dec 2024 13:47:56 +0800
Subject: [PATCH 01/10] chore: temp save content

---
 src/packages/inputnumber/inputnumber.scss | 17 ++++++++---------
 src/styles/variables.scss                 |  8 ++++----
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/packages/inputnumber/inputnumber.scss b/src/packages/inputnumber/inputnumber.scss
index 50ac8b3fa7..be85cee8cb 100644
--- a/src/packages/inputnumber/inputnumber.scss
+++ b/src/packages/inputnumber/inputnumber.scss
@@ -2,7 +2,9 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-
+  background-color: $color-background;
+  border-radius: $inputnumber-input-border-radius;
+  overflow: hidden;
   &-minus,
   &-add {
     display: flex;
@@ -11,17 +13,15 @@
     width: $inputnumber-button-width;
     height: $inputnumber-button-height;
     background-color: $inputnumber-button-background-color;
-    border-radius: $inputnumber-button-border-radius;
+    .nut-icon {
+      --nut-icon-width: 20px;
+      --nut-icon-height: 20px;
+    }
+    background-color: yellow;
   }
 
   &-icon {
     color: $inputnumber-icon-color;
-    /*  #ifdef rn harmony  */
-    font-size: 14px;
-    /*  #endif  */
-    /*  #ifndef  rn harmony  */
-    font-size: $inputnumber-icon-size;
-    /*  #endif */
     cursor: pointer;
 
     &-disabled {
@@ -39,7 +39,6 @@
     text-align: center;
     outline: none;
     border: $inputnumber-input-border;
-    border-radius: $inputnumber-input-border-radius;
     margin: $inputnumber-input-margin;
     color: $inputnumber-input-font-color;
     background-color: $inputnumber-input-background-color;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 14c4db7ab1..f130fed52e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -613,7 +613,7 @@ $textarea-disabled-color: var(
 
 // inputnumber（✅）
 $inputnumber-input-width: var(--nutui-inputnumber-input-width, 60px) !default;
-$inputnumber-input-height: var(--nutui-inputnumber-input-height, 24px) !default;
+$inputnumber-input-height: var(--nutui-inputnumber-input-height, 20px) !default;
 $inputnumber-input-background-color: var(
   --nutui-inputnumber-input-background-color,
   $color-background
@@ -629,13 +629,13 @@ $inputnumber-input-font-size: var(
 $inputnumber-input-border: var(--nutui-inputnumber-input-border, 0) !default;
 $inputnumber-input-border-radius: var(
   --nutui-inputnumber-input-border-radius,
-  6px
+  4px
 ) !default;
 $inputnumber-input-margin: var(--nutui-inputnumber-input-margin, 0) !default;
-$inputnumber-button-width: var(--nutui-inputnumber-button-width, 14px) !default;
+$inputnumber-button-width: var(--nutui-inputnumber-button-width, 20px) !default;
 $inputnumber-button-height: var(
   --nutui-inputnumber-button-height,
-  24px
+  20px
 ) !default;
 $inputnumber-button-border-radius: var(
   --nutui-inputnumber-button-border-radius,

From 93a6c25a2e16d0733a3957262bb376a0005c7a8e Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Wed, 4 Dec 2024 10:11:15 +0800
Subject: [PATCH 02/10] feat(inputNumber): v14 multi-platform adaption

---
 src/packages/inputnumber/demos/h5/demo9.tsx   | 10 ++++----
 src/packages/inputnumber/demos/taro/demo9.tsx | 10 ++++----
 src/packages/inputnumber/inputnumber.scss     | 23 +++++++++++-------
 src/packages/inputnumber/inputnumber.taro.tsx | 24 +++++++++++++++----
 src/packages/inputnumber/inputnumber.tsx      |  8 +++++--
 src/styles/variables.scss                     |  4 ++--
 6 files changed, 52 insertions(+), 27 deletions(-)

diff --git a/src/packages/inputnumber/demos/h5/demo9.tsx b/src/packages/inputnumber/demos/h5/demo9.tsx
index 3b588261d4..a26ce7d150 100644
--- a/src/packages/inputnumber/demos/h5/demo9.tsx
+++ b/src/packages/inputnumber/demos/h5/demo9.tsx
@@ -12,9 +12,9 @@ const Demo9 = () => {
         <ConfigProvider theme={customTheme3}>
           <InputNumber
             className="format-width"
-            defaultValue={1000}
-            min={10}
-            max={15020}
+            defaultValue={5}
+            min={1}
+            max={10}
             formatter={(value) =>
               `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
             }
@@ -25,9 +25,9 @@ const Demo9 = () => {
         <ConfigProvider theme={customTheme3}>
           <InputNumber
             className="format-width"
-            defaultValue={100}
+            defaultValue={5}
             min={0}
-            max={100}
+            max={10}
             formatter={(value) => `${value}%`}
           />
         </ConfigProvider>
diff --git a/src/packages/inputnumber/demos/taro/demo9.tsx b/src/packages/inputnumber/demos/taro/demo9.tsx
index 9663a796ff..eaf8f16ea4 100644
--- a/src/packages/inputnumber/demos/taro/demo9.tsx
+++ b/src/packages/inputnumber/demos/taro/demo9.tsx
@@ -14,9 +14,9 @@ const Demo9 = () => {
         <ConfigProvider theme={customTheme3}>
           <InputNumber
             className="format-width"
-            defaultValue={1000}
-            min={10}
-            max={15020}
+            defaultValue={5}
+            min={1}
+            max={10}
             formatter={(value) =>
               `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
             }
@@ -27,9 +27,9 @@ const Demo9 = () => {
         <ConfigProvider theme={customTheme3}>
           <InputNumber
             className="format-width"
-            defaultValue={100}
+            defaultValue={1}
             min={0}
-            max={100}
+            max={10}
             formatter={(value) => `${value}%`}
           />
         </ConfigProvider>
diff --git a/src/packages/inputnumber/inputnumber.scss b/src/packages/inputnumber/inputnumber.scss
index be85cee8cb..1dee73b095 100644
--- a/src/packages/inputnumber/inputnumber.scss
+++ b/src/packages/inputnumber/inputnumber.scss
@@ -1,5 +1,8 @@
 .nut-inputnumber {
-  display: flex;
+  display: inline-flex;
+  max-width: calc(
+    2 * #{$inputnumber-input-margin} + 2 * #{$inputnumber-button-width} + 23px
+  );
   flex-direction: row;
   align-items: center;
   background-color: $color-background;
@@ -17,15 +20,14 @@
       --nut-icon-width: 20px;
       --nut-icon-height: 20px;
     }
-    background-color: yellow;
   }
 
   &-icon {
-    color: $inputnumber-icon-color;
+    color: $color-text;
     cursor: pointer;
 
     &-disabled {
-      color: $inputnumber-disabled-color;
+      color: $color-text-disabled;
       cursor: not-allowed;
     }
   }
@@ -34,16 +36,19 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    width: $inputnumber-input-width;
+    max-width: 23px;
+    min-width: 12px;
+    font-size: $inputnumber-input-font-size;
     height: $inputnumber-input-height;
     text-align: center;
     outline: none;
     border: $inputnumber-input-border;
-    margin: $inputnumber-input-margin;
-    color: $inputnumber-input-font-color;
+    margin-left: $inputnumber-input-margin;
+    margin-right: $inputnumber-input-margin;
+    color: $color-text;
     background-color: $inputnumber-input-background-color;
     &-disabled {
-      color: $inputnumber-disabled-color;
+      color: $color-text-disabled;
     }
     &::-webkit-outer-spin-button,
     &::-webkit-inner-spin-button {
@@ -52,7 +57,7 @@
   }
 
   &-input-disabled {
-    color: $inputnumber-disabled-color;
+    color: $color-text-disabled;
   }
 
   &-icon-minus {
diff --git a/src/packages/inputnumber/inputnumber.taro.tsx b/src/packages/inputnumber/inputnumber.taro.tsx
index 0e1bb46d87..4717a1e646 100644
--- a/src/packages/inputnumber/inputnumber.taro.tsx
+++ b/src/packages/inputnumber/inputnumber.taro.tsx
@@ -14,9 +14,10 @@ import {
   Text,
 } from '@tarojs/components'
 import { Minus, Plus } from '@nutui/icons-react-taro'
+import { createSelectorQuery } from '@tarojs/taro'
 import { usePropsValue } from '@/utils/use-props-value'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
-import { harmony, harmonyAndRn, rn } from '@/utils/platform-taro'
+import { harmonyAndRn, rn } from '@/utils/platform-taro'
 
 export interface InputNumberProps extends BasicComponent {
   value: number | string
@@ -92,10 +93,10 @@ export const InputNumber: FunctionComponent<
   }
   const isRnAndHarmony = harmonyAndRn()
   const isRn = rn()
-  const isHarmony = harmony()
   const classes = classNames(classPrefix, className)
   const [focused, setFocused] = useState(false)
   const inputRef = useRef<HTMLInputElement>(null)
+  const refRandomId = useRef(Math.random().toString(36).slice(-8))
   useEffect(() => {
     if (select && focused) {
       inputRef.current?.select?.()
@@ -142,7 +143,22 @@ export const InputNumber: FunctionComponent<
       setInputValue(format(shadowValue))
     }
   }, [focused, shadowValue])
-
+  useEffect(() => {
+    createSelectorQuery()
+      .select(`#root${refRandomId.current} .nut-inputnumber-input`)
+      .fields(
+        {
+          computedStyle: ['fontSize'],
+        },
+        (res) => {
+          if (!res) return
+          if (inputRef.current) {
+            inputRef.current.style.width = `${inputValue.length * parseInt(res.fontSize)}px`
+          }
+        }
+      )
+      .exec()
+  }, [inputValue])
   useEffect(() => {
     if (async) {
       setShadowValue(bound(Number(value), Number(min), Number(max)))
@@ -251,7 +267,7 @@ export const InputNumber: FunctionComponent<
   }
 
   return (
-    <View className={classes} style={style}>
+    <View className={classes} style={style} id={`root${refRandomId.current}`}>
       <View className={`${classPrefix}-minus`} onClick={handleReduce}>
         {isRnAndHarmony ? (
           <Text
diff --git a/src/packages/inputnumber/inputnumber.tsx b/src/packages/inputnumber/inputnumber.tsx
index 3c2463e62c..6fda799dcb 100644
--- a/src/packages/inputnumber/inputnumber.tsx
+++ b/src/packages/inputnumber/inputnumber.tsx
@@ -130,14 +130,17 @@ export const InputNumber: FunctionComponent<
       setInputValue(format(shadowValue))
     }
   }, [focused, shadowValue])
-
   useEffect(() => {
     if (async) {
       setShadowValue(bound(Number(value), Number(min), Number(max)))
       setInputValue(format(value))
     }
   }, [value])
-
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.style.width = `${inputValue.length * parseInt(window.getComputedStyle(inputRef.current).fontSize)}px`
+    }
+  }, [inputValue])
   const calcNextValue = (current: any, step: any, symbol: number) => {
     const dig = digits + 1
     return (
@@ -185,6 +188,7 @@ export const InputNumber: FunctionComponent<
     const val = Number(parseFloat(valueStr || '0').toFixed(digits))
     return Math.max(Number(min), Math.min(Number(max), val))
   }
+
   const handleValueChange = (
     valueStr: string | null,
     e: React.ChangeEvent<HTMLInputElement>
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index f130fed52e..12d560f68f 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -624,14 +624,14 @@ $inputnumber-input-font-color: var(
 ) !default;
 $inputnumber-input-font-size: var(
   --nutui-inputnumber-input-font-size,
-  14px
+  12px
 ) !default;
 $inputnumber-input-border: var(--nutui-inputnumber-input-border, 0) !default;
 $inputnumber-input-border-radius: var(
   --nutui-inputnumber-input-border-radius,
   4px
 ) !default;
-$inputnumber-input-margin: var(--nutui-inputnumber-input-margin, 0) !default;
+$inputnumber-input-margin: var(--nutui-inputnumber-input-margin, 2px) !default;
 $inputnumber-button-width: var(--nutui-inputnumber-button-width, 20px) !default;
 $inputnumber-button-height: var(
   --nutui-inputnumber-button-height,

From 33ac3d6afbc7499e1121dd2d31f4c365db5b530f Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Wed, 4 Dec 2024 10:42:53 +0800
Subject: [PATCH 03/10] feat(inputNumber): update docs and variables

---
 src/packages/inputnumber/doc.en-US.md |  14 +-
 src/packages/inputnumber/doc.md       |  14 +-
 src/packages/inputnumber/doc.taro.md  | 294 +++++++++++++-------------
 src/packages/inputnumber/doc.zh-TW.md | 292 +++++++++++++------------
 src/styles/variables.scss             |   5 -
 5 files changed, 303 insertions(+), 316 deletions(-)

diff --git a/src/packages/inputnumber/doc.en-US.md b/src/packages/inputnumber/doc.en-US.md
index beb3542914..659ad6e733 100644
--- a/src/packages/inputnumber/doc.en-US.md
+++ b/src/packages/inputnumber/doc.en-US.md
@@ -139,17 +139,15 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default Value |
 | --- | --- | --- |
-| \--nutui-inputnumber-input-width | The width of the input in the number input box | `40px` |
-| \--nutui-inputnumber-input-height | The height of the input in the number input box | `24px` |
+| \--nutui-inputnumber-input-height | The height of the input in the number input box | `20px` |
 | \--nutui-inputnumber-input-background-color | The background color of the input in the number input box | `$color-background` |
 | \--nutui-inputnumber-input-font-color | The font size color of the input in the number input box | `$color-title` |
-| \--nutui-inputnumber-input-font-size | The font size of the input in the number input box | `14px` |
+| \--nutui-inputnumber-input-font-size | The font size of the input in the number input box | `12px` |
 | \--nutui-inputnumber-input-border | The border value of the input in the number input box | `0` |
-| \--nutui-inputnumber-input-border-radius | The rounded corners of the input in the number input box | `6px` |
-| \--nutui-inputnumber-input-margin | The rounded corners of the input in the number input box | `0` |
-| \--nutui-inputnumber-button-width | The width of the left and right buttons of the number input box | `14px` |
-| \--nutui-inputnumber-button-height | The height of the left and right buttons of the number input box | `16px` |
-| \--nutui-inputnumber-button-border-radius | The rounded corners of the left and right buttons of the number input box | `30px` |
+| \--nutui-inputnumber-input-border-radius | The rounded corners of the input in the number input box | `4px` |
+| \--nutui-inputnumber-input-margin | The rounded corners of the input in the number input box | `2px` |
+| \--nutui-inputnumber-button-width | The width of the left and right buttons of the number input box | `20px` |
+| \--nutui-inputnumber-button-height | The height of the left and right buttons of the number input box | `20px` |
 | \--nutui-inputnumber-button-background-color | The background color of the left and right buttons of the number input box | `transparent` |
 | \--nutui-inputnumber-icon-color | The color of the icon in the number input box | `$color-text` |
 | \--nutui-inputnumber-icon-size | The size of the icon in the number input box | `8px` |
diff --git a/src/packages/inputnumber/doc.md b/src/packages/inputnumber/doc.md
index d2afd0b4d1..acfd992b4d 100644
--- a/src/packages/inputnumber/doc.md
+++ b/src/packages/inputnumber/doc.md
@@ -139,17 +139,15 @@ import { InputNumber } from '@nutui/nutui-react'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-inputnumber-input-width | 数字输入框中input的宽度 | `40px` |
-| \--nutui-inputnumber-input-height | 数字输入框中input的高度 | `24px` |
+| \--nutui-inputnumber-input-height | 数字输入框中input的高度 | `20px` |
 | \--nutui-inputnumber-input-background-color | 数字输入框中input的背景颜色 | `$color-background` |
 | \--nutui-inputnumber-input-font-color | 数字输入框中input的字号颜色 | `$color-title` |
-| \--nutui-inputnumber-input-font-size | 数字输入框中input的字号大小 | `14px` |
+| \--nutui-inputnumber-input-font-size | 数字输入框中input的字号大小 | `12px` |
 | \--nutui-inputnumber-input-border | 数字输入框中input的border值 | `0` |
-| \--nutui-inputnumber-input-border-radius | 数字输入框中input的圆角 | `6px` |
-| \--nutui-inputnumber-input-margin | 数字输入框中input的margin值 | `0` |
-| \--nutui-inputnumber-button-width | 数字输入框左右按钮的宽度 | `14px` |
-| \--nutui-inputnumber-button-height | 数字输入框左右按钮的高度 | `16px` |
-| \--nutui-inputnumber-button-border-radius | 数字输入框左右按钮的圆角 | `30px` |
+| \--nutui-inputnumber-input-border-radius | 数字输入框中input的圆角 | `4px` |
+| \--nutui-inputnumber-input-margin | 数字输入框中input的margin值 | `2px` |
+| \--nutui-inputnumber-button-width | 数字输入框左右按钮的宽度 | `20px` |
+| \--nutui-inputnumber-button-height | 数字输入框左右按钮的高度 | `20px` |
 | \--nutui-inputnumber-button-background-color | 数字输入框左右按钮的背景色 | `transparent` |
 | \--nutui-inputnumber-icon-color | 数字输入框中icon的颜色 | `$color-text` |
 | \--nutui-inputnumber-icon-size | 数字输入框中icon的大小 | `8px` |
diff --git a/src/packages/inputnumber/doc.taro.md b/src/packages/inputnumber/doc.taro.md
index fb9a619b1c..08797d564b 100644
--- a/src/packages/inputnumber/doc.taro.md
+++ b/src/packages/inputnumber/doc.taro.md
@@ -1,148 +1,146 @@
-# InputNumber 数字输入框
-
-通过点击按钮控制数字增减。
-
-## 引入
-
-```tsx
-import { InputNumber } from '@nutui/nutui-react-taro'
-```
-
-## 示例代码
-
-### 基础用法
-
-初始化一个默认值
-
-:::demo
-
-<CodeBlock src='taro/demo1.tsx'></CodeBlock>
-
-:::
-
-### 步长设置
-
-设置步长 `step` 5
-
-:::demo
-
-<CodeBlock src='taro/demo2.tsx'></CodeBlock>
-
-:::
-
-### 限制输入范围
-
-`min` 和 `max` 属性分别表示最小值和最大值
-
-:::demo
-
-<CodeBlock src='taro/demo3.tsx'></CodeBlock>
-
-:::
-
-### 禁用状态
-
-`disabled` 禁用状态下无法点击按钮或修改输入框。
-
-:::demo
-
-<CodeBlock src='taro/demo4.tsx'></CodeBlock>
-
-:::
-
-### 只读禁用输入框
-
-`readOnly` 设置只读禁用输入框输入行为
-
-:::demo
-
-<CodeBlock src='taro/demo5.tsx'></CodeBlock>
-
-:::
-
-### 设置按钮样式
-
-可使用`ConfigProvider`组件来设置按钮样式。
-
-:::demo
-
-<CodeBlock src='taro/demo6.tsx'></CodeBlock>
-
-:::
-
-### 支持小数点
-
-设置步长 `step` 0.1 `decimal-places` 小数保留1位
-
-:::demo
-
-<CodeBlock src='taro/demo7.tsx'></CodeBlock>
-
-:::
-
-### 支持异步修改
-
-通过 `change` 事件和 `model-value` 进行异步修改
-
-:::demo
-
-<CodeBlock src='taro/demo8.tsx'></CodeBlock>
-
-:::
-
-### 支持formatter
-
-:::demo
-
-<CodeBlock src='taro/demo9.tsx'></CodeBlock>
-
-:::
-
-## InputNumber
-
-### Props
-
-| 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| allowEmpty | 是否允许内容为空 | `boolean` | `false` |
-| defaultValue | 默认值 | `string` \| `number` | `0` |
-| value | 当前值，受控值 | `string` \| `number` | `-` |
-| min | 最小值限制 | `string` \| `number` | `1` |
-| max | 最大值限制 | `string` \| `number` | `9999` |
-| type | input 的类型 | `digit` \| `number` | `digit` |
-| step | 步长 | `string` \| `number` | `1` |
-| digits | 设置保留的小数位 | `string` \| `number` | `0` |
-| disabled | 禁用所有功能 | `boolean` | `false` |
-| readOnly | 只读状态禁用输入框操作行为 | `boolean` | `false` |
-| async | 支持异步修改 | `boolean` | `false` |
-| formatter | 指定输入框展示值的格式 | `function(value: number \| string): string` | `-` |
-| onPlus | 点击增加按钮时触发 | `(e: MouseEvent) => void` | `-` |
-| onMinus | 点击减少按钮时触发 | `(e: MouseEvent) => void` | `-` |
-| onOverlimit | 点击不可用的按钮时触发 | `(e: MouseEvent) => void` | `-` |
-| onChange | 值改变时触发 | `(param: string \| number, e: MouseEvent \| ChangeEvent<HTMLInputElement>) => void` | `-` |
-| onFocus | 输入框获得焦点时触发 | `(e: FocusEvent<HTMLInputElement>) => void` | `-` |
-| onBlur | 输入框失去焦点时触发 | `(e: ChangeEvent<HTMLInputElement>) => void` | `-` |
-
-## 主题定制
-
-### 样式变量
-
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
-
-| 名称 | 说明 | 默认值 |
-| --- | --- | --- |
-| \--nutui-inputnumber-input-width | 数字输入框中input的宽度 | `40px` |
-| \--nutui-inputnumber-input-height | 数字输入框中input的高度 | `24px` |
-| \--nutui-inputnumber-input-background-color | 数字输入框中input的背景颜色 | `$color-background` |
-| \--nutui-inputnumber-input-font-color | 数字输入框中input的字号颜色 | `$color-title` |
-| \--nutui-inputnumber-input-font-size | 数字输入框中input的字号大小 | `14px` |
-| \--nutui-inputnumber-input-border | 数字输入框中input的border值 | `0` |
-| \--nutui-inputnumber-input-border-radius | 数字输入框中input的圆角 | `6px` |
-| \--nutui-inputnumber-input-margin | 数字输入框中input的margin值 | `0` |
-| \--nutui-inputnumber-button-width | 数字输入框左右按钮的宽度 | `14px` |
-| \--nutui-inputnumber-button-height | 数字输入框左右按钮的高度 | `16px` |
-| \--nutui-inputnumber-button-border-radius | 数字输入框左右按钮的圆角 | `30px` |
-| \--nutui-inputnumber-button-background-color | 数字输入框左右按钮的背景色 | `transparent` |
-| \--nutui-inputnumber-icon-color | 数字输入框中icon的颜色 | `$color-text` |
-| \--nutui-inputnumber-icon-size | 数字输入框中icon的大小 | `8px` |
-| \--nutui-inputnumber-disabled-color | 数字输入框禁用色 | `$color-text-disabled` |
+# InputNumber 数字输入框
+
+通过点击按钮控制数字增减。
+
+## 引入
+
+```tsx
+import { InputNumber } from '@nutui/nutui-react-taro'
+```
+
+## 示例代码
+
+### 基础用法
+
+初始化一个默认值
+
+:::demo
+
+<CodeBlock src='taro/demo1.tsx'></CodeBlock>
+
+:::
+
+### 步长设置
+
+设置步长 `step` 5
+
+:::demo
+
+<CodeBlock src='taro/demo2.tsx'></CodeBlock>
+
+:::
+
+### 限制输入范围
+
+`min` 和 `max` 属性分别表示最小值和最大值
+
+:::demo
+
+<CodeBlock src='taro/demo3.tsx'></CodeBlock>
+
+:::
+
+### 禁用状态
+
+`disabled` 禁用状态下无法点击按钮或修改输入框。
+
+:::demo
+
+<CodeBlock src='taro/demo4.tsx'></CodeBlock>
+
+:::
+
+### 只读禁用输入框
+
+`readOnly` 设置只读禁用输入框输入行为
+
+:::demo
+
+<CodeBlock src='taro/demo5.tsx'></CodeBlock>
+
+:::
+
+### 设置按钮样式
+
+可使用`ConfigProvider`组件来设置按钮样式。
+
+:::demo
+
+<CodeBlock src='taro/demo6.tsx'></CodeBlock>
+
+:::
+
+### 支持小数点
+
+设置步长 `step` 0.1 `decimal-places` 小数保留1位
+
+:::demo
+
+<CodeBlock src='taro/demo7.tsx'></CodeBlock>
+
+:::
+
+### 支持异步修改
+
+通过 `change` 事件和 `model-value` 进行异步修改
+
+:::demo
+
+<CodeBlock src='taro/demo8.tsx'></CodeBlock>
+
+:::
+
+### 支持formatter
+
+:::demo
+
+<CodeBlock src='taro/demo9.tsx'></CodeBlock>
+
+:::
+
+## InputNumber
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| allowEmpty | 是否允许内容为空 | `boolean` | `false` |
+| defaultValue | 默认值 | `string` \| `number` | `0` |
+| value | 当前值，受控值 | `string` \| `number` | `-` |
+| min | 最小值限制 | `string` \| `number` | `1` |
+| max | 最大值限制 | `string` \| `number` | `9999` |
+| type | input 的类型 | `digit` \| `number` | `digit` |
+| step | 步长 | `string` \| `number` | `1` |
+| digits | 设置保留的小数位 | `string` \| `number` | `0` |
+| disabled | 禁用所有功能 | `boolean` | `false` |
+| readOnly | 只读状态禁用输入框操作行为 | `boolean` | `false` |
+| async | 支持异步修改 | `boolean` | `false` |
+| formatter | 指定输入框展示值的格式 | `function(value: number \| string): string` | `-` |
+| onPlus | 点击增加按钮时触发 | `(e: MouseEvent) => void` | `-` |
+| onMinus | 点击减少按钮时触发 | `(e: MouseEvent) => void` | `-` |
+| onOverlimit | 点击不可用的按钮时触发 | `(e: MouseEvent) => void` | `-` |
+| onChange | 值改变时触发 | `(param: string \| number, e: MouseEvent \| ChangeEvent<HTMLInputElement>) => void` | `-` |
+| onFocus | 输入框获得焦点时触发 | `(e: FocusEvent<HTMLInputElement>) => void` | `-` |
+| onBlur | 输入框失去焦点时触发 | `(e: ChangeEvent<HTMLInputElement>) => void` | `-` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-inputnumber-input-height | 数字输入框中input的高度 | `20px` |
+| \--nutui-inputnumber-input-background-color | 数字输入框中input的背景颜色 | `$color-background` |
+| \--nutui-inputnumber-input-font-color | 数字输入框中input的字号颜色 | `$color-title` |
+| \--nutui-inputnumber-input-font-size | 数字输入框中input的字号大小 | `12px` |
+| \--nutui-inputnumber-input-border | 数字输入框中input的border值 | `0` |
+| \--nutui-inputnumber-input-border-radius | 数字输入框中input的圆角 | `4px` |
+| \--nutui-inputnumber-input-margin | 数字输入框中input的margin值 | `2px` |
+| \--nutui-inputnumber-button-width | 数字输入框左右按钮的宽度 | `20px` |
+| \--nutui-inputnumber-button-height | 数字输入框左右按钮的高度 | `20px` |
+| \--nutui-inputnumber-button-background-color | 数字输入框左右按钮的背景色 | `transparent` |
+| \--nutui-inputnumber-icon-color | 数字输入框中icon的颜色 | `$color-text` |
+| \--nutui-inputnumber-icon-size | 数字输入框中icon的大小 | `8px` |
+| \--nutui-inputnumber-disabled-color | 数字输入框禁用色 | `$color-text-disabled` |
diff --git a/src/packages/inputnumber/doc.zh-TW.md b/src/packages/inputnumber/doc.zh-TW.md
index 5a1cb78e4c..d162b255b8 100644
--- a/src/packages/inputnumber/doc.zh-TW.md
+++ b/src/packages/inputnumber/doc.zh-TW.md
@@ -1,147 +1,145 @@
-# InputNumber 數字輸入框
-
-通過點擊按鈕控制數字增減。
-
-## 引入
-
-```tsx
-import { InputNumber } from '@nutui/nutui-react'
-```
-
-## 示例代碼
-
-### 基礎用法
-
-初始化一個默認值
-
-:::demo
-
-<CodeBlock src='h5/demo1.tsx'></CodeBlock>
-
-:::
-
-### 步長設置
-
-設置步長 `step` 5
-
-:::demo
-
-<CodeBlock src='h5/demo2.tsx'></CodeBlock>
-
-:::
-
-### 限制輸入範圍
-
-`min` 和 `max` 屬性分別錶示最小值和最大值
-
-:::demo
-
-<CodeBlock src='h5/demo3.tsx'></CodeBlock>
-
-:::
-
-### 禁用狀態
-
-`disabled` 禁用狀態下無法點擊按鈕或修改輸入框。
-
-:::demo
-
-<CodeBlock src='h5/demo4.tsx'></CodeBlock>
-
-:::
-
-### 只讀禁用輸入框
-
-`readOnly` 設置只讀禁用輸入框輸入行為
-
-:::demo
-
-<CodeBlock src='h5/demo5.tsx'></CodeBlock>
-
-:::
-
-### 設置按鈕樣式
-
-可使用`ConfigProvider`組件來設置按鈕樣式。
-
-:::demo
-
-<CodeBlock src='h5/demo6.tsx'></CodeBlock>
-
-:::
-
-### 支持小數點
-
-設置步長 `step` 0.1 `decimal-places` 小數保留1位
-
-:::demo
-
-<CodeBlock src='h5/demo7.tsx'></CodeBlock>
-
-:::
-
-### 支持異步修改
-
-通過 `change` 事件和 `model-value` 進行異步修改
-
-:::demo
-
-<CodeBlock src='h5/demo8.tsx'></CodeBlock>
-
-:::
-
-### 支持formatter
-
-:::demo
-
-<CodeBlock src='h5/demo9.tsx'></CodeBlock>
-
-:::
-
-## InputNumber
-
-### Props
-
-| 屬性 | 說明 | 類型 | 默認值 |
-| --- | --- | --- | --- |
-| allowEmpty | 是否允許內容為空 | `boolean` | `false` |
-| defaultValue | 默認值 | `string` \| `number` | `0` |
-| value | 當前值，受控值 | `string` \| `number` | `-` |
-| min | 最小值限制 | `string` \| `number` | `1` |
-| max | 最大值限制 | `string` \| `number` | `9999` |
-| step | 步長 | `string` \| `number` | `1` |
-| digits | 設置保留的小數位 | `string` \| `number` | `0` |
-| disabled | 禁用所有功能 | `boolean` | `false` |
-| readOnly | 只讀狀態禁用輸入框操作行為 | `boolean` | `false` |
-| async | 支持異步修改 | `boolean` | `false` |
-| formatter | 指定輸入框展示值的格式 | `function(value: number \| string): string` | `-` |
-| onPlus | 點擊增加按鈕時觸發 | `(e: MouseEvent) => void` | `-` |
-| onMinus | 點擊減少按鈕時觸發 | `(e: MouseEvent) => void` | `-` |
-| onOverlimit | 點擊不可用的按鈕時觸發 | `(e: MouseEvent) => void` | `-` |
-| onChange | 值改變時觸發 | `(param: string \| number, e: MouseEvent \| ChangeEvent<HTMLInputElement>) => void` | `-` |
-| onFocus | 輸入框獲得焦點時觸發 | `(e: FocusEvent<HTMLInputElement>) => void` | `-` |
-| onBlur | 輸入框失去焦點時觸發 | `(e: ChangeEvent<HTMLInputElement>) => void` | `-` |
-
-## 主題定制
-
-### 樣式變量
-
-組件提供了下列 CSS 變量，可用於自定義樣式，使用方法請參考 [ConfigProvider 組件](#/zh-CN/component/configprovider)。
-
-| 名稱 | 說明 | 默認值 |
-| --- | --- | --- |
-| \--nutui-inputnumber-input-width | 數字輸入框中input的寬度 | `40px` |
-| \--nutui-inputnumber-input-height | 數字輸入框中input的高度 | `24px` |
-| \--nutui-inputnumber-input-background-color | 數字輸入框中input的背景顏色 | `$color-background` |
-| \--nutui-inputnumber-input-font-color | 數字輸入框中input的字號顏色 | `$color-title` |
-| \--nutui-inputnumber-input-font-size | 數字輸入框中input的字號大小 | `14px` |
-| \--nutui-inputnumber-input-border | 數字輸入框中input的border值 | `0` |
-| \--nutui-inputnumber-input-border-radius | 數字輸入框中input的圓角 | `6px` |
-| \--nutui-inputnumber-input-margin | 數字輸入框中input的margin值 | `0` |
-| \--nutui-inputnumber-button-width | 數字輸入框左右按鈕的寬度 | `14px` |
-| \--nutui-inputnumber-button-height | 數字輸入框左右按鈕的高度 | `16px` |
-| \--nutui-inputnumber-button-border-radius | 數字輸入框左右按鈕的圓角 | `30px` |
-| \--nutui-inputnumber-button-background-color | 數字輸入框左右按鈕的背景色 | `transparent` |
-| \--nutui-inputnumber-icon-color | 數字輸入框中icon的顏色 | `$color-text` |
-| \--nutui-inputnumber-icon-size | 數字輸入框中icon的大小 | `8px` |
-| \--nutui-inputnumber-disabled-color | 數字輸入框禁用色 | `$color-text-disabled` |
+# InputNumber 數字輸入框
+
+通過點擊按鈕控制數字增減。
+
+## 引入
+
+```tsx
+import { InputNumber } from '@nutui/nutui-react'
+```
+
+## 示例代碼
+
+### 基礎用法
+
+初始化一個默認值
+
+:::demo
+
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
+
+:::
+
+### 步長設置
+
+設置步長 `step` 5
+
+:::demo
+
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
+
+:::
+
+### 限制輸入範圍
+
+`min` 和 `max` 屬性分別錶示最小值和最大值
+
+:::demo
+
+<CodeBlock src='h5/demo3.tsx'></CodeBlock>
+
+:::
+
+### 禁用狀態
+
+`disabled` 禁用狀態下無法點擊按鈕或修改輸入框。
+
+:::demo
+
+<CodeBlock src='h5/demo4.tsx'></CodeBlock>
+
+:::
+
+### 只讀禁用輸入框
+
+`readOnly` 設置只讀禁用輸入框輸入行為
+
+:::demo
+
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
+
+:::
+
+### 設置按鈕樣式
+
+可使用`ConfigProvider`組件來設置按鈕樣式。
+
+:::demo
+
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
+
+:::
+
+### 支持小數點
+
+設置步長 `step` 0.1 `decimal-places` 小數保留1位
+
+:::demo
+
+<CodeBlock src='h5/demo7.tsx'></CodeBlock>
+
+:::
+
+### 支持異步修改
+
+通過 `change` 事件和 `model-value` 進行異步修改
+
+:::demo
+
+<CodeBlock src='h5/demo8.tsx'></CodeBlock>
+
+:::
+
+### 支持formatter
+
+:::demo
+
+<CodeBlock src='h5/demo9.tsx'></CodeBlock>
+
+:::
+
+## InputNumber
+
+### Props
+
+| 屬性 | 說明 | 類型 | 默認值 |
+| --- | --- | --- | --- |
+| allowEmpty | 是否允許內容為空 | `boolean` | `false` |
+| defaultValue | 默認值 | `string` \| `number` | `0` |
+| value | 當前值，受控值 | `string` \| `number` | `-` |
+| min | 最小值限制 | `string` \| `number` | `1` |
+| max | 最大值限制 | `string` \| `number` | `9999` |
+| step | 步長 | `string` \| `number` | `1` |
+| digits | 設置保留的小數位 | `string` \| `number` | `0` |
+| disabled | 禁用所有功能 | `boolean` | `false` |
+| readOnly | 只讀狀態禁用輸入框操作行為 | `boolean` | `false` |
+| async | 支持異步修改 | `boolean` | `false` |
+| formatter | 指定輸入框展示值的格式 | `function(value: number \| string): string` | `-` |
+| onPlus | 點擊增加按鈕時觸發 | `(e: MouseEvent) => void` | `-` |
+| onMinus | 點擊減少按鈕時觸發 | `(e: MouseEvent) => void` | `-` |
+| onOverlimit | 點擊不可用的按鈕時觸發 | `(e: MouseEvent) => void` | `-` |
+| onChange | 值改變時觸發 | `(param: string \| number, e: MouseEvent \| ChangeEvent<HTMLInputElement>) => void` | `-` |
+| onFocus | 輸入框獲得焦點時觸發 | `(e: FocusEvent<HTMLInputElement>) => void` | `-` |
+| onBlur | 輸入框失去焦點時觸發 | `(e: ChangeEvent<HTMLInputElement>) => void` | `-` |
+
+## 主題定制
+
+### 樣式變量
+
+組件提供了下列 CSS 變量，可用於自定義樣式，使用方法請參考 [ConfigProvider 組件](#/zh-CN/component/configprovider)。
+
+| 名稱 | 說明 | 默認值 |
+| --- | --- | --- |
+| \--nutui-inputnumber-input-height | 數字輸入框中input的高度 | `20px` |
+| \--nutui-inputnumber-input-background-color | 數字輸入框中input的背景顏色 | `$color-background` |
+| \--nutui-inputnumber-input-font-color | 數字輸入框中input的字號顏色 | `$color-title` |
+| \--nutui-inputnumber-input-font-size | 數字輸入框中input的字號大小 | `12px` |
+| \--nutui-inputnumber-input-border | 數字輸入框中input的border值 | `0` |
+| \--nutui-inputnumber-input-border-radius | 數字輸入框中input的圓角 | `4px` |
+| \--nutui-inputnumber-input-margin | 數字輸入框中input的margin值 | `2px` |
+| \--nutui-inputnumber-button-width | 數字輸入框左右按鈕的寬度 | `20px` |
+| \--nutui-inputnumber-button-height | 數字輸入框左右按鈕的高度 | `20px` |
+| \--nutui-inputnumber-button-background-color | 數字輸入框左右按鈕的背景色 | `transparent` |
+| \--nutui-inputnumber-icon-color | 數字輸入框中icon的顏色 | `$color-text` |
+| \--nutui-inputnumber-icon-size | 數字輸入框中icon的大小 | `8px` |
+| \--nutui-inputnumber-disabled-color | 數字輸入框禁用色 | `$color-text-disabled` |
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 12d560f68f..83be060139 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -612,7 +612,6 @@ $textarea-disabled-color: var(
 ) !default;
 
 // inputnumber（✅）
-$inputnumber-input-width: var(--nutui-inputnumber-input-width, 60px) !default;
 $inputnumber-input-height: var(--nutui-inputnumber-input-height, 20px) !default;
 $inputnumber-input-background-color: var(
   --nutui-inputnumber-input-background-color,
@@ -637,10 +636,6 @@ $inputnumber-button-height: var(
   --nutui-inputnumber-button-height,
   20px
 ) !default;
-$inputnumber-button-border-radius: var(
-  --nutui-inputnumber-button-border-radius,
-  16px
-) !default;
 $inputnumber-button-background-color: var(
   --nutui-inputnumber-button-background-color,
   transparent

From ed09115d676a909a781624fb6e633bcb86d97acb Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Wed, 4 Dec 2024 14:54:19 +0800
Subject: [PATCH 04/10] fix: varaible and doc supplement

---
 src/packages/inputnumber/doc.en-US.md     | 2 ++
 src/packages/inputnumber/doc.md           | 2 ++
 src/packages/inputnumber/doc.taro.md      | 2 ++
 src/packages/inputnumber/doc.zh-TW.md     | 2 ++
 src/packages/inputnumber/inputnumber.scss | 6 +++---
 src/styles/variables.scss                 | 8 ++++++++
 6 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/packages/inputnumber/doc.en-US.md b/src/packages/inputnumber/doc.en-US.md
index 659ad6e733..274dc02dc5 100644
--- a/src/packages/inputnumber/doc.en-US.md
+++ b/src/packages/inputnumber/doc.en-US.md
@@ -139,6 +139,8 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default Value |
 | --- | --- | --- |
+| \--nutui-inputnumber-input-max-width | The maximum width of the input in the number input box | `23px` |
+| \--nutui-inputnumber-input-min-width | The minimum width of input in the number input box | `12px` |
 | \--nutui-inputnumber-input-height | The height of the input in the number input box | `20px` |
 | \--nutui-inputnumber-input-background-color | The background color of the input in the number input box | `$color-background` |
 | \--nutui-inputnumber-input-font-color | The font size color of the input in the number input box | `$color-title` |
diff --git a/src/packages/inputnumber/doc.md b/src/packages/inputnumber/doc.md
index acfd992b4d..eda5d42d0e 100644
--- a/src/packages/inputnumber/doc.md
+++ b/src/packages/inputnumber/doc.md
@@ -139,6 +139,8 @@ import { InputNumber } from '@nutui/nutui-react'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
+| \--nutui-inputnumber-input-max-width | 数字输入框中input的最大宽度 | `23px` |
+| \--nutui-inputnumber-input-min-width | 数字输入框中input的最小宽度 | `12px` |
 | \--nutui-inputnumber-input-height | 数字输入框中input的高度 | `20px` |
 | \--nutui-inputnumber-input-background-color | 数字输入框中input的背景颜色 | `$color-background` |
 | \--nutui-inputnumber-input-font-color | 数字输入框中input的字号颜色 | `$color-title` |
diff --git a/src/packages/inputnumber/doc.taro.md b/src/packages/inputnumber/doc.taro.md
index 08797d564b..d0918f76e9 100644
--- a/src/packages/inputnumber/doc.taro.md
+++ b/src/packages/inputnumber/doc.taro.md
@@ -131,6 +131,8 @@ import { InputNumber } from '@nutui/nutui-react-taro'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
+| \--nutui-inputnumber-input-max-width | 数字输入框中input的最大宽度 | `23px` |
+| \--nutui-inputnumber-input-min-width | 数字输入框中input的最小宽度 | `12px` |
 | \--nutui-inputnumber-input-height | 数字输入框中input的高度 | `20px` |
 | \--nutui-inputnumber-input-background-color | 数字输入框中input的背景颜色 | `$color-background` |
 | \--nutui-inputnumber-input-font-color | 数字输入框中input的字号颜色 | `$color-title` |
diff --git a/src/packages/inputnumber/doc.zh-TW.md b/src/packages/inputnumber/doc.zh-TW.md
index d162b255b8..3f55d786e9 100644
--- a/src/packages/inputnumber/doc.zh-TW.md
+++ b/src/packages/inputnumber/doc.zh-TW.md
@@ -130,6 +130,8 @@ import { InputNumber } from '@nutui/nutui-react'
 
 | 名稱 | 說明 | 默認值 |
 | --- | --- | --- |
+| \--nutui-inputnumber-input-max-width | 數字輸入框中input的最大寬度 | `23px` |
+| \--nutui-inputnumber-input-min-width | 數字輸入框中input的最小寬度 | `12px` |
 | \--nutui-inputnumber-input-height | 數字輸入框中input的高度 | `20px` |
 | \--nutui-inputnumber-input-background-color | 數字輸入框中input的背景顏色 | `$color-background` |
 | \--nutui-inputnumber-input-font-color | 數字輸入框中input的字號顏色 | `$color-title` |
diff --git a/src/packages/inputnumber/inputnumber.scss b/src/packages/inputnumber/inputnumber.scss
index 1dee73b095..0afe5554ef 100644
--- a/src/packages/inputnumber/inputnumber.scss
+++ b/src/packages/inputnumber/inputnumber.scss
@@ -1,7 +1,7 @@
 .nut-inputnumber {
   display: inline-flex;
   max-width: calc(
-    2 * #{$inputnumber-input-margin} + 2 * #{$inputnumber-button-width} + 23px
+    2 * #{$inputnumber-input-margin} + 2 * #{$inputnumber-button-width} + #{$inputnumber-input-max-width}
   );
   flex-direction: row;
   align-items: center;
@@ -36,8 +36,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    max-width: 23px;
-    min-width: 12px;
+    max-width: $inputnumber-input-max-width;
+    min-width: $inputnumber-input-min-width;
     font-size: $inputnumber-input-font-size;
     height: $inputnumber-input-height;
     text-align: center;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 83be060139..fb80497f58 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -612,6 +612,14 @@ $textarea-disabled-color: var(
 ) !default;
 
 // inputnumber（✅）
+$inputnumber-input-max-width: var(
+  --nutui-inputnumber-input-max-width,
+  23px
+) !default;
+$inputnumber-input-min-width: var(
+  --nutui-inputnumber-input-max-width,
+  12px
+) !default;
 $inputnumber-input-height: var(--nutui-inputnumber-input-height, 20px) !default;
 $inputnumber-input-background-color: var(
   --nutui-inputnumber-input-background-color,

From abe38040b6778b814ffe4bd427f7063420ef46e0 Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Wed, 4 Dec 2024 14:57:00 +0800
Subject: [PATCH 05/10] fix: varaible and doc supplement

---
 src/styles/variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index fb80497f58..7cc4cf6a02 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -631,7 +631,7 @@ $inputnumber-input-font-color: var(
 ) !default;
 $inputnumber-input-font-size: var(
   --nutui-inputnumber-input-font-size,
-  12px
+  $font-size-s
 ) !default;
 $inputnumber-input-border: var(--nutui-inputnumber-input-border, 0) !default;
 $inputnumber-input-border-radius: var(

From 4f1ca2d93b0faf918cb135b25462aad961ffb33d Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Wed, 4 Dec 2024 15:00:20 +0800
Subject: [PATCH 06/10] fix: varaible and doc supplement

---
 src/packages/inputnumber/demos/taro/demo3.tsx |  6 +++---
 src/packages/inputnumber/demos/taro/demo8.tsx | 14 +++-----------
 src/packages/inputnumber/demos/taro/demo9.tsx | 11 ++++++++---
 src/styles/variables.scss                     |  2 +-
 4 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/packages/inputnumber/demos/taro/demo3.tsx b/src/packages/inputnumber/demos/taro/demo3.tsx
index c2b9e279d6..3c2141c059 100644
--- a/src/packages/inputnumber/demos/taro/demo3.tsx
+++ b/src/packages/inputnumber/demos/taro/demo3.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Cell, InputNumber } from '@nutui/nutui-react-taro'
+import { Cell, InputNumber, Toast } from '@nutui/nutui-react-taro'
 
 const Demo3 = () => {
   const overlimit = () => {
@@ -28,14 +28,14 @@ const Demo3 = () => {
           onOverlimit={overlimit}
         />
       </Cell>
-      {/* <Toast
+      <Toast
         type={toastType}
         visible={show}
         content={toastMsg}
         onClose={() => {
           SetShow(false)
         }}
-      /> */}
+      />
     </>
   )
 }
diff --git a/src/packages/inputnumber/demos/taro/demo8.tsx b/src/packages/inputnumber/demos/taro/demo8.tsx
index 7cf28990c5..a308b3a3e8 100644
--- a/src/packages/inputnumber/demos/taro/demo8.tsx
+++ b/src/packages/inputnumber/demos/taro/demo8.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Cell, InputNumber } from '@nutui/nutui-react-taro'
+import { Cell, InputNumber, Toast } from '@nutui/nutui-react-taro'
 
 const Demo8 = () => {
   const [inputValue, setInputValue] = useState(0)
@@ -28,15 +28,7 @@ const Demo8 = () => {
       <Cell>
         <InputNumber value={inputValue} min="-6" onChange={onChange} async />
       </Cell>
-      {/* <Toast
-      <InputNumber
-        value={inputValue}
-        min={-6}
-        max={6}
-        onChange={onChange}
-        onOverlimit={overlimit}
-        async
-      />
+
       <Toast
         type={toastType}
         visible={show}
@@ -44,7 +36,7 @@ const Demo8 = () => {
         onClose={() => {
           SetShow(false)
         }}
-      /> */}
+      />
     </>
   )
 }
diff --git a/src/packages/inputnumber/demos/taro/demo9.tsx b/src/packages/inputnumber/demos/taro/demo9.tsx
index eaf8f16ea4..88d9de3298 100644
--- a/src/packages/inputnumber/demos/taro/demo9.tsx
+++ b/src/packages/inputnumber/demos/taro/demo9.tsx
@@ -1,5 +1,10 @@
 import React, { useState } from 'react'
-import { Cell, ConfigProvider, InputNumber } from '@nutui/nutui-react-taro'
+import {
+  Cell,
+  ConfigProvider,
+  InputNumber,
+  Toast,
+} from '@nutui/nutui-react-taro'
 
 const Demo9 = () => {
   const customTheme3 = {
@@ -34,14 +39,14 @@ const Demo9 = () => {
           />
         </ConfigProvider>
       </Cell>
-      {/* <Toast
+      <Toast
         type={toastType}
         visible={show}
         content={toastMsg}
         onClose={() => {
           SetShow(false)
         }}
-      /> */}
+      />
     </>
   )
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 7cc4cf6a02..da30ab08b3 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -617,7 +617,7 @@ $inputnumber-input-max-width: var(
   23px
 ) !default;
 $inputnumber-input-min-width: var(
-  --nutui-inputnumber-input-max-width,
+  --nutui-inputnumber-input-min-width,
   12px
 ) !default;
 $inputnumber-input-height: var(--nutui-inputnumber-input-height, 20px) !default;

From 4e78bd62c563de2c1184342b362926cb95116fac Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Thu, 5 Dec 2024 16:27:26 +0800
Subject: [PATCH 07/10] feat: cancel auto compute input-width

---
 src/packages/inputnumber/demos/h5/demo9.tsx   | 10 +++++-----
 src/packages/inputnumber/demos/taro/demo9.tsx | 19 ++++++++-----------
 src/packages/inputnumber/doc.en-US.md         |  3 +--
 src/packages/inputnumber/doc.md               |  3 +--
 src/packages/inputnumber/doc.taro.md          |  3 +--
 src/packages/inputnumber/doc.zh-TW.md         |  3 +--
 src/packages/inputnumber/inputnumber.scss     |  7 +++----
 src/packages/inputnumber/inputnumber.taro.tsx | 18 +-----------------
 src/packages/inputnumber/inputnumber.tsx      |  5 -----
 src/styles/variables.scss                     |  9 +--------
 10 files changed, 22 insertions(+), 58 deletions(-)

diff --git a/src/packages/inputnumber/demos/h5/demo9.tsx b/src/packages/inputnumber/demos/h5/demo9.tsx
index a26ce7d150..3b588261d4 100644
--- a/src/packages/inputnumber/demos/h5/demo9.tsx
+++ b/src/packages/inputnumber/demos/h5/demo9.tsx
@@ -12,9 +12,9 @@ const Demo9 = () => {
         <ConfigProvider theme={customTheme3}>
           <InputNumber
             className="format-width"
-            defaultValue={5}
-            min={1}
-            max={10}
+            defaultValue={1000}
+            min={10}
+            max={15020}
             formatter={(value) =>
               `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
             }
@@ -25,9 +25,9 @@ const Demo9 = () => {
         <ConfigProvider theme={customTheme3}>
           <InputNumber
             className="format-width"
-            defaultValue={5}
+            defaultValue={100}
             min={0}
-            max={10}
+            max={100}
             formatter={(value) => `${value}%`}
           />
         </ConfigProvider>
diff --git a/src/packages/inputnumber/demos/taro/demo9.tsx b/src/packages/inputnumber/demos/taro/demo9.tsx
index 88d9de3298..08ec94e19f 100644
--- a/src/packages/inputnumber/demos/taro/demo9.tsx
+++ b/src/packages/inputnumber/demos/taro/demo9.tsx
@@ -1,10 +1,6 @@
 import React, { useState } from 'react'
-import {
-  Cell,
-  ConfigProvider,
-  InputNumber,
-  Toast,
-} from '@nutui/nutui-react-taro'
+import { Cell, InputNumber, Toast } from '@nutui/nutui-react-taro'
+import ConfigProvider from '@/packages/configprovider'
 
 const Demo9 = () => {
   const customTheme3 = {
@@ -13,15 +9,16 @@ const Demo9 = () => {
   const [toastType, SetToastType] = useState('text')
   const [show, SetShow] = useState(false)
   const [toastMsg, SetToastMsg] = useState('')
+
   return (
     <>
       <Cell>
         <ConfigProvider theme={customTheme3}>
           <InputNumber
             className="format-width"
-            defaultValue={5}
-            min={1}
-            max={10}
+            defaultValue={1000}
+            min={10}
+            max={15020}
             formatter={(value) =>
               `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
             }
@@ -32,9 +29,9 @@ const Demo9 = () => {
         <ConfigProvider theme={customTheme3}>
           <InputNumber
             className="format-width"
-            defaultValue={1}
+            defaultValue={100}
             min={0}
-            max={10}
+            max={100}
             formatter={(value) => `${value}%`}
           />
         </ConfigProvider>
diff --git a/src/packages/inputnumber/doc.en-US.md b/src/packages/inputnumber/doc.en-US.md
index 274dc02dc5..11db95a975 100644
--- a/src/packages/inputnumber/doc.en-US.md
+++ b/src/packages/inputnumber/doc.en-US.md
@@ -139,8 +139,7 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default Value |
 | --- | --- | --- |
-| \--nutui-inputnumber-input-max-width | The maximum width of the input in the number input box | `23px` |
-| \--nutui-inputnumber-input-min-width | The minimum width of input in the number input box | `12px` |
+| \--nutui-inputnumber-input-width | The width of the input in the number input box | `23px` |
 | \--nutui-inputnumber-input-height | The height of the input in the number input box | `20px` |
 | \--nutui-inputnumber-input-background-color | The background color of the input in the number input box | `$color-background` |
 | \--nutui-inputnumber-input-font-color | The font size color of the input in the number input box | `$color-title` |
diff --git a/src/packages/inputnumber/doc.md b/src/packages/inputnumber/doc.md
index eda5d42d0e..b6785ddcbc 100644
--- a/src/packages/inputnumber/doc.md
+++ b/src/packages/inputnumber/doc.md
@@ -139,8 +139,7 @@ import { InputNumber } from '@nutui/nutui-react'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-inputnumber-input-max-width | 数字输入框中input的最大宽度 | `23px` |
-| \--nutui-inputnumber-input-min-width | 数字输入框中input的最小宽度 | `12px` |
+| \--nutui-inputnumber-input-width | 数字输入框中input的宽度 | `23px` |
 | \--nutui-inputnumber-input-height | 数字输入框中input的高度 | `20px` |
 | \--nutui-inputnumber-input-background-color | 数字输入框中input的背景颜色 | `$color-background` |
 | \--nutui-inputnumber-input-font-color | 数字输入框中input的字号颜色 | `$color-title` |
diff --git a/src/packages/inputnumber/doc.taro.md b/src/packages/inputnumber/doc.taro.md
index d0918f76e9..17fc719f7d 100644
--- a/src/packages/inputnumber/doc.taro.md
+++ b/src/packages/inputnumber/doc.taro.md
@@ -131,8 +131,7 @@ import { InputNumber } from '@nutui/nutui-react-taro'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-inputnumber-input-max-width | 数字输入框中input的最大宽度 | `23px` |
-| \--nutui-inputnumber-input-min-width | 数字输入框中input的最小宽度 | `12px` |
+| \--nutui-inputnumber-input-width | 数字输入框中input的宽度 | `23px` |
 | \--nutui-inputnumber-input-height | 数字输入框中input的高度 | `20px` |
 | \--nutui-inputnumber-input-background-color | 数字输入框中input的背景颜色 | `$color-background` |
 | \--nutui-inputnumber-input-font-color | 数字输入框中input的字号颜色 | `$color-title` |
diff --git a/src/packages/inputnumber/doc.zh-TW.md b/src/packages/inputnumber/doc.zh-TW.md
index 3f55d786e9..a75a3288ec 100644
--- a/src/packages/inputnumber/doc.zh-TW.md
+++ b/src/packages/inputnumber/doc.zh-TW.md
@@ -130,8 +130,7 @@ import { InputNumber } from '@nutui/nutui-react'
 
 | 名稱 | 說明 | 默認值 |
 | --- | --- | --- |
-| \--nutui-inputnumber-input-max-width | 數字輸入框中input的最大寬度 | `23px` |
-| \--nutui-inputnumber-input-min-width | 數字輸入框中input的最小寬度 | `12px` |
+| \--nutui-inputnumber-input-width | 數字輸入框中input的寬度 | `23px` |
 | \--nutui-inputnumber-input-height | 數字輸入框中input的高度 | `20px` |
 | \--nutui-inputnumber-input-background-color | 數字輸入框中input的背景顏色 | `$color-background` |
 | \--nutui-inputnumber-input-font-color | 數字輸入框中input的字號顏色 | `$color-title` |
diff --git a/src/packages/inputnumber/inputnumber.scss b/src/packages/inputnumber/inputnumber.scss
index 0afe5554ef..8942026e8a 100644
--- a/src/packages/inputnumber/inputnumber.scss
+++ b/src/packages/inputnumber/inputnumber.scss
@@ -1,7 +1,7 @@
 .nut-inputnumber {
   display: inline-flex;
-  max-width: calc(
-    2 * #{$inputnumber-input-margin} + 2 * #{$inputnumber-button-width} + #{$inputnumber-input-max-width}
+  width: calc(
+    2 * #{$inputnumber-input-margin} + 2 * #{$inputnumber-button-width} + #{$inputnumber-input-width}
   );
   flex-direction: row;
   align-items: center;
@@ -36,8 +36,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    max-width: $inputnumber-input-max-width;
-    min-width: $inputnumber-input-min-width;
+    width: $inputnumber-input-width;
     font-size: $inputnumber-input-font-size;
     height: $inputnumber-input-height;
     text-align: center;
diff --git a/src/packages/inputnumber/inputnumber.taro.tsx b/src/packages/inputnumber/inputnumber.taro.tsx
index 4717a1e646..e399b0280b 100644
--- a/src/packages/inputnumber/inputnumber.taro.tsx
+++ b/src/packages/inputnumber/inputnumber.taro.tsx
@@ -14,7 +14,6 @@ import {
   Text,
 } from '@tarojs/components'
 import { Minus, Plus } from '@nutui/icons-react-taro'
-import { createSelectorQuery } from '@tarojs/taro'
 import { usePropsValue } from '@/utils/use-props-value'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { harmonyAndRn, rn } from '@/utils/platform-taro'
@@ -143,22 +142,7 @@ export const InputNumber: FunctionComponent<
       setInputValue(format(shadowValue))
     }
   }, [focused, shadowValue])
-  useEffect(() => {
-    createSelectorQuery()
-      .select(`#root${refRandomId.current} .nut-inputnumber-input`)
-      .fields(
-        {
-          computedStyle: ['fontSize'],
-        },
-        (res) => {
-          if (!res) return
-          if (inputRef.current) {
-            inputRef.current.style.width = `${inputValue.length * parseInt(res.fontSize)}px`
-          }
-        }
-      )
-      .exec()
-  }, [inputValue])
+
   useEffect(() => {
     if (async) {
       setShadowValue(bound(Number(value), Number(min), Number(max)))
diff --git a/src/packages/inputnumber/inputnumber.tsx b/src/packages/inputnumber/inputnumber.tsx
index 6fda799dcb..7b8ce212bf 100644
--- a/src/packages/inputnumber/inputnumber.tsx
+++ b/src/packages/inputnumber/inputnumber.tsx
@@ -136,11 +136,6 @@ export const InputNumber: FunctionComponent<
       setInputValue(format(value))
     }
   }, [value])
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.style.width = `${inputValue.length * parseInt(window.getComputedStyle(inputRef.current).fontSize)}px`
-    }
-  }, [inputValue])
   const calcNextValue = (current: any, step: any, symbol: number) => {
     const dig = digits + 1
     return (
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index da30ab08b3..fed9a308da 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -612,14 +612,7 @@ $textarea-disabled-color: var(
 ) !default;
 
 // inputnumber（✅）
-$inputnumber-input-max-width: var(
-  --nutui-inputnumber-input-max-width,
-  23px
-) !default;
-$inputnumber-input-min-width: var(
-  --nutui-inputnumber-input-min-width,
-  12px
-) !default;
+$inputnumber-input-width: var(--nutui-inputnumber-input-width, 23px) !default;
 $inputnumber-input-height: var(--nutui-inputnumber-input-height, 20px) !default;
 $inputnumber-input-background-color: var(
   --nutui-inputnumber-input-background-color,

From 97901fd72961981e53f8b6590ca29757bc840bf1 Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Thu, 5 Dec 2024 16:54:01 +0800
Subject: [PATCH 08/10] fix: delete useless id

---
 src/packages/inputnumber/inputnumber.taro.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/packages/inputnumber/inputnumber.taro.tsx b/src/packages/inputnumber/inputnumber.taro.tsx
index e399b0280b..b51f984fe4 100644
--- a/src/packages/inputnumber/inputnumber.taro.tsx
+++ b/src/packages/inputnumber/inputnumber.taro.tsx
@@ -95,7 +95,6 @@ export const InputNumber: FunctionComponent<
   const classes = classNames(classPrefix, className)
   const [focused, setFocused] = useState(false)
   const inputRef = useRef<HTMLInputElement>(null)
-  const refRandomId = useRef(Math.random().toString(36).slice(-8))
   useEffect(() => {
     if (select && focused) {
       inputRef.current?.select?.()
@@ -251,7 +250,7 @@ export const InputNumber: FunctionComponent<
   }
 
   return (
-    <View className={classes} style={style} id={`root${refRandomId.current}`}>
+    <View className={classes} style={style}>
       <View className={`${classPrefix}-minus`} onClick={handleReduce}>
         {isRnAndHarmony ? (
           <Text

From 4236ddc3337964a830b5a07f7c08231cfb1536a7 Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Fri, 6 Dec 2024 18:00:15 +0800
Subject: [PATCH 09/10] fix: correct var value

---
 src/packages/inputnumber/doc.en-US.md | 2 +-
 src/packages/inputnumber/doc.md       | 2 +-
 src/packages/inputnumber/doc.taro.md  | 2 +-
 src/packages/inputnumber/doc.zh-TW.md | 2 +-
 src/styles/variables.scss             | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/packages/inputnumber/doc.en-US.md b/src/packages/inputnumber/doc.en-US.md
index 11db95a975..a72751f234 100644
--- a/src/packages/inputnumber/doc.en-US.md
+++ b/src/packages/inputnumber/doc.en-US.md
@@ -139,7 +139,7 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default Value |
 | --- | --- | --- |
-| \--nutui-inputnumber-input-width | The width of the input in the number input box | `23px` |
+| \--nutui-inputnumber-input-width | The width of the input in the number input box | `26px` |
 | \--nutui-inputnumber-input-height | The height of the input in the number input box | `20px` |
 | \--nutui-inputnumber-input-background-color | The background color of the input in the number input box | `$color-background` |
 | \--nutui-inputnumber-input-font-color | The font size color of the input in the number input box | `$color-title` |
diff --git a/src/packages/inputnumber/doc.md b/src/packages/inputnumber/doc.md
index b6785ddcbc..d386f6a65d 100644
--- a/src/packages/inputnumber/doc.md
+++ b/src/packages/inputnumber/doc.md
@@ -139,7 +139,7 @@ import { InputNumber } from '@nutui/nutui-react'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-inputnumber-input-width | 数字输入框中input的宽度 | `23px` |
+| \--nutui-inputnumber-input-width | 数字输入框中input的宽度 | `26px` |
 | \--nutui-inputnumber-input-height | 数字输入框中input的高度 | `20px` |
 | \--nutui-inputnumber-input-background-color | 数字输入框中input的背景颜色 | `$color-background` |
 | \--nutui-inputnumber-input-font-color | 数字输入框中input的字号颜色 | `$color-title` |
diff --git a/src/packages/inputnumber/doc.taro.md b/src/packages/inputnumber/doc.taro.md
index 17fc719f7d..73a361d0db 100644
--- a/src/packages/inputnumber/doc.taro.md
+++ b/src/packages/inputnumber/doc.taro.md
@@ -131,7 +131,7 @@ import { InputNumber } from '@nutui/nutui-react-taro'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-inputnumber-input-width | 数字输入框中input的宽度 | `23px` |
+| \--nutui-inputnumber-input-width | 数字输入框中input的宽度 | `26px` |
 | \--nutui-inputnumber-input-height | 数字输入框中input的高度 | `20px` |
 | \--nutui-inputnumber-input-background-color | 数字输入框中input的背景颜色 | `$color-background` |
 | \--nutui-inputnumber-input-font-color | 数字输入框中input的字号颜色 | `$color-title` |
diff --git a/src/packages/inputnumber/doc.zh-TW.md b/src/packages/inputnumber/doc.zh-TW.md
index a75a3288ec..be6ffb202d 100644
--- a/src/packages/inputnumber/doc.zh-TW.md
+++ b/src/packages/inputnumber/doc.zh-TW.md
@@ -130,7 +130,7 @@ import { InputNumber } from '@nutui/nutui-react'
 
 | 名稱 | 說明 | 默認值 |
 | --- | --- | --- |
-| \--nutui-inputnumber-input-width | 數字輸入框中input的寬度 | `23px` |
+| \--nutui-inputnumber-input-width | 數字輸入框中input的寬度 | `26px` |
 | \--nutui-inputnumber-input-height | 數字輸入框中input的高度 | `20px` |
 | \--nutui-inputnumber-input-background-color | 數字輸入框中input的背景顏色 | `$color-background` |
 | \--nutui-inputnumber-input-font-color | 數字輸入框中input的字號顏色 | `$color-title` |
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 4ddd1b07e2..c28d409028 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -614,7 +614,7 @@ $textarea-disabled-color: var(
 ) !default;
 
 // inputnumber（✅）
-$inputnumber-input-width: var(--nutui-inputnumber-input-width, 23px) !default;
+$inputnumber-input-width: var(--nutui-inputnumber-input-width, 26px) !default;
 $inputnumber-input-height: var(--nutui-inputnumber-input-height, 20px) !default;
 $inputnumber-input-background-color: var(
   --nutui-inputnumber-input-background-color,

From f2bd5159833730e5db45926345201f40ca828b3b Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Fri, 6 Dec 2024 18:07:00 +0800
Subject: [PATCH 10/10] fix: correct var value

---
 src/packages/inputnumber/doc.en-US.md | 2 +-
 src/packages/inputnumber/doc.md       | 2 +-
 src/packages/inputnumber/doc.taro.md  | 2 +-
 src/packages/inputnumber/doc.zh-TW.md | 2 +-
 src/styles/variables.scss             | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/packages/inputnumber/doc.en-US.md b/src/packages/inputnumber/doc.en-US.md
index a72751f234..7491ec24d3 100644
--- a/src/packages/inputnumber/doc.en-US.md
+++ b/src/packages/inputnumber/doc.en-US.md
@@ -146,7 +146,7 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-inputnumber-input-font-size | The font size of the input in the number input box | `12px` |
 | \--nutui-inputnumber-input-border | The border value of the input in the number input box | `0` |
 | \--nutui-inputnumber-input-border-radius | The rounded corners of the input in the number input box | `4px` |
-| \--nutui-inputnumber-input-margin | The rounded corners of the input in the number input box | `2px` |
+| \--nutui-inputnumber-input-margin | The rounded corners of the input in the number input box | `0px` |
 | \--nutui-inputnumber-button-width | The width of the left and right buttons of the number input box | `20px` |
 | \--nutui-inputnumber-button-height | The height of the left and right buttons of the number input box | `20px` |
 | \--nutui-inputnumber-button-background-color | The background color of the left and right buttons of the number input box | `transparent` |
diff --git a/src/packages/inputnumber/doc.md b/src/packages/inputnumber/doc.md
index d386f6a65d..a8f17a582e 100644
--- a/src/packages/inputnumber/doc.md
+++ b/src/packages/inputnumber/doc.md
@@ -146,7 +146,7 @@ import { InputNumber } from '@nutui/nutui-react'
 | \--nutui-inputnumber-input-font-size | 数字输入框中input的字号大小 | `12px` |
 | \--nutui-inputnumber-input-border | 数字输入框中input的border值 | `0` |
 | \--nutui-inputnumber-input-border-radius | 数字输入框中input的圆角 | `4px` |
-| \--nutui-inputnumber-input-margin | 数字输入框中input的margin值 | `2px` |
+| \--nutui-inputnumber-input-margin | 数字输入框中input的margin值 | `0px` |
 | \--nutui-inputnumber-button-width | 数字输入框左右按钮的宽度 | `20px` |
 | \--nutui-inputnumber-button-height | 数字输入框左右按钮的高度 | `20px` |
 | \--nutui-inputnumber-button-background-color | 数字输入框左右按钮的背景色 | `transparent` |
diff --git a/src/packages/inputnumber/doc.taro.md b/src/packages/inputnumber/doc.taro.md
index 73a361d0db..cec8fb8f7a 100644
--- a/src/packages/inputnumber/doc.taro.md
+++ b/src/packages/inputnumber/doc.taro.md
@@ -138,7 +138,7 @@ import { InputNumber } from '@nutui/nutui-react-taro'
 | \--nutui-inputnumber-input-font-size | 数字输入框中input的字号大小 | `12px` |
 | \--nutui-inputnumber-input-border | 数字输入框中input的border值 | `0` |
 | \--nutui-inputnumber-input-border-radius | 数字输入框中input的圆角 | `4px` |
-| \--nutui-inputnumber-input-margin | 数字输入框中input的margin值 | `2px` |
+| \--nutui-inputnumber-input-margin | 数字输入框中input的margin值 | `0px` |
 | \--nutui-inputnumber-button-width | 数字输入框左右按钮的宽度 | `20px` |
 | \--nutui-inputnumber-button-height | 数字输入框左右按钮的高度 | `20px` |
 | \--nutui-inputnumber-button-background-color | 数字输入框左右按钮的背景色 | `transparent` |
diff --git a/src/packages/inputnumber/doc.zh-TW.md b/src/packages/inputnumber/doc.zh-TW.md
index be6ffb202d..53efde519b 100644
--- a/src/packages/inputnumber/doc.zh-TW.md
+++ b/src/packages/inputnumber/doc.zh-TW.md
@@ -137,7 +137,7 @@ import { InputNumber } from '@nutui/nutui-react'
 | \--nutui-inputnumber-input-font-size | 數字輸入框中input的字號大小 | `12px` |
 | \--nutui-inputnumber-input-border | 數字輸入框中input的border值 | `0` |
 | \--nutui-inputnumber-input-border-radius | 數字輸入框中input的圓角 | `4px` |
-| \--nutui-inputnumber-input-margin | 數字輸入框中input的margin值 | `2px` |
+| \--nutui-inputnumber-input-margin | 數字輸入框中input的margin值 | `0px` |
 | \--nutui-inputnumber-button-width | 數字輸入框左右按鈕的寬度 | `20px` |
 | \--nutui-inputnumber-button-height | 數字輸入框左右按鈕的高度 | `20px` |
 | \--nutui-inputnumber-button-background-color | 數字輸入框左右按鈕的背景色 | `transparent` |
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index c28d409028..1e399e78a5 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -633,7 +633,7 @@ $inputnumber-input-border-radius: var(
   --nutui-inputnumber-input-border-radius,
   4px
 ) !default;
-$inputnumber-input-margin: var(--nutui-inputnumber-input-margin, 2px) !default;
+$inputnumber-input-margin: var(--nutui-inputnumber-input-margin, 0px) !default;
 $inputnumber-button-width: var(--nutui-inputnumber-button-width, 20px) !default;
 $inputnumber-button-height: var(
   --nutui-inputnumber-button-height,