From a942850e0ae9070f396517f7e8556ce06559347e Mon Sep 17 00:00:00 2001
From: yangxuexue <yangxuexue@xiaomi.com>
Date: Tue, 18 Jun 2024 17:46:39 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat(number-input):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=89=8D=E7=BC=80=E5=90=8E=E7=BC=80=E5=86=85=E5=AE=B9=E6=89=A9?=
 =?UTF-8?q?=E5=B1=95(#2906)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/number-input/src/NumberInput.tsx  |  3 ++-
 .../number-input/src/styles/number-input.scss | 16 +++++++++----
 .../ui/number-input/stories/addon.stories.tsx | 24 +++++++++++++++++++
 .../ui/number-input/stories/index.stories.tsx |  1 +
 4 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 packages/ui/number-input/stories/addon.stories.tsx

diff --git a/packages/ui/number-input/src/NumberInput.tsx b/packages/ui/number-input/src/NumberInput.tsx
index 5184e6990..730627075 100644
--- a/packages/ui/number-input/src/NumberInput.tsx
+++ b/packages/ui/number-input/src/NumberInput.tsx
@@ -11,7 +11,7 @@ const _prefix = getPrefixCls('number-input')
  * 数字输入框
  */
 export const NumberInput = forwardRef<HTMLDivElement | null, CounterProps>(
-  ({ prefixCls = _prefix, role = _role, ...rest }, ref) => {
+  ({ prefixCls = _prefix, role = _role, prefix, ...rest }, ref) => {
     const { rootProps, getInputProps, getMinusButtonProps, getPlusButtonProps } = useCounter({
       prefixCls,
       role,
@@ -20,6 +20,7 @@ export const NumberInput = forwardRef<HTMLDivElement | null, CounterProps>(
 
     return (
       <div ref={ref} {...rootProps}>
+        {prefix ? <span className={`${prefixCls}__prefix`}>{prefix}</span> : null}
         <input {...getInputProps()} />
         <div className={`${prefixCls}__suffix`}>
           <button {...getPlusButtonProps()}>
diff --git a/packages/ui/number-input/src/styles/number-input.scss b/packages/ui/number-input/src/styles/number-input.scss
index f7a93b4d2..333544b14 100644
--- a/packages/ui/number-input/src/styles/number-input.scss
+++ b/packages/ui/number-input/src/styles/number-input.scss
@@ -13,7 +13,7 @@ $prefix:  '#{$component-prefix}-number-input' !default;
   $input-error-shadow: 0 0 0 2px use-color-mode('danger', 100);
 
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   width: 100%;
   color: use-color('gray', 700);
   font-size: use-text-size('normal');
@@ -57,6 +57,7 @@ $prefix:  '#{$component-prefix}-number-input' !default;
   &__input {
     @include input-reset();
 
+    flex: 1;
     width: 100%;
     height: 100%;
     color: inherit;
@@ -68,10 +69,17 @@ $prefix:  '#{$component-prefix}-number-input' !default;
     }
   }
 
+  &__prefix {
+    display: inline-flex;
+    margin-left: 5px;
+    align-items: center;
+    flex-shrink: 0;
+    color: use-color('gray', 700);
+    font-size: inherit;
+    text-align: center;
+  }
+
   &__suffix {
-    position: absolute;
-    top: 0;
-    right: 0;
     box-sizing: border-box;
     height: 100%;
 
diff --git a/packages/ui/number-input/stories/addon.stories.tsx b/packages/ui/number-input/stories/addon.stories.tsx
new file mode 100644
index 000000000..2856cb885
--- /dev/null
+++ b/packages/ui/number-input/stories/addon.stories.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import NumberInput from '../src'
+import { AppStoreOutlined } from '@hi-ui/icons'
+
+/**
+ * @title 前缀后缀内容扩展
+ */
+export const Addon = () => {
+  return (
+    <>
+      <h1>NumberInput</h1>
+      <div className="NumberInput-addon__wrap">
+        <NumberInput
+          autoFocus
+          defaultValue={5}
+          min={1}
+          placeholder="请输入数字"
+          onChange={(v) => console.log('onChange', v)}
+          prefix={<AppStoreOutlined />}
+        />
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/number-input/stories/index.stories.tsx b/packages/ui/number-input/stories/index.stories.tsx
index 35f4e9693..d13fbeae2 100644
--- a/packages/ui/number-input/stories/index.stories.tsx
+++ b/packages/ui/number-input/stories/index.stories.tsx
@@ -9,6 +9,7 @@ export * from './step.stories'
 export * from './Wheel.stories'
 export * from './invalid.stories'
 export * from './formatter.stories'
+export * from './addon.stories'
 
 export default {
   title: 'Data Input/NumberInput',

From 44c3deea57b3af070fde494c7f1c4d417d4958a3 Mon Sep 17 00:00:00 2001
From: yangxuexue <yangxuexue@xiaomi.com>
Date: Tue, 18 Jun 2024 17:49:44 +0800
Subject: [PATCH 2/4] =?UTF-8?q?chore:=20=E7=94=9F=E6=88=90=E5=8F=98?=
 =?UTF-8?q?=E6=9B=B4=E8=AE=B0=E5=BD=95=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/dull-carrots-shout.md  | 5 +++++
 .changeset/soft-actors-perform.md | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 .changeset/dull-carrots-shout.md
 create mode 100644 .changeset/soft-actors-perform.md

diff --git a/.changeset/dull-carrots-shout.md b/.changeset/dull-carrots-shout.md
new file mode 100644
index 000000000..aad80f05a
--- /dev/null
+++ b/.changeset/dull-carrots-shout.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(number-input): 新增前缀后缀内容扩展
diff --git a/.changeset/soft-actors-perform.md b/.changeset/soft-actors-perform.md
new file mode 100644
index 000000000..f4a5a78c2
--- /dev/null
+++ b/.changeset/soft-actors-perform.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/number-input": minor
+---
+
+feat: 新增前缀后缀内容扩展

From ef992740cf40246362cb5048be80c841b0e5bb85 Mon Sep 17 00:00:00 2001
From: yangxuexue <yangxuexue@xiaomi.com>
Date: Wed, 19 Jun 2024 19:09:49 +0800
Subject: [PATCH 3/4] =?UTF-8?q?fix(number-input):=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E5=89=8D=E7=BC=80=E6=A0=B7=E5=BC=8F(#2906)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/number-input/src/styles/number-input.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/number-input/src/styles/number-input.scss b/packages/ui/number-input/src/styles/number-input.scss
index 333544b14..0fbe600cf 100644
--- a/packages/ui/number-input/src/styles/number-input.scss
+++ b/packages/ui/number-input/src/styles/number-input.scss
@@ -71,7 +71,7 @@ $prefix:  '#{$component-prefix}-number-input' !default;
 
   &__prefix {
     display: inline-flex;
-    margin-left: 5px;
+    margin-left: use-spacing(3);
     align-items: center;
     flex-shrink: 0;
     color: use-color('gray', 700);

From 3b2c83c0cdb0885d2083fd321237d273913472f9 Mon Sep 17 00:00:00 2001
From: yangxuexue <yangxuexue@xiaomi.com>
Date: Thu, 20 Jun 2024 11:46:17 +0800
Subject: [PATCH 4/4] =?UTF-8?q?fix(number-input):=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E5=89=8D=E7=BC=80=E5=B7=A6=E8=BE=B9=E8=B7=9D(#2906)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/number-input/src/styles/number-input.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/number-input/src/styles/number-input.scss b/packages/ui/number-input/src/styles/number-input.scss
index 0fbe600cf..646efc413 100644
--- a/packages/ui/number-input/src/styles/number-input.scss
+++ b/packages/ui/number-input/src/styles/number-input.scss
@@ -71,7 +71,7 @@ $prefix:  '#{$component-prefix}-number-input' !default;
 
   &__prefix {
     display: inline-flex;
-    margin-left: use-spacing(3);
+    margin-left: use-spacing(6);
     align-items: center;
     flex-shrink: 0;
     color: use-color('gray', 700);