fix: improve InputNumber component step behavior and disabled state (#16044)

web/app/components/base/input-number/index.tsx

@@ -12,10 +12,11 @@ export type InputNumberProps = {
   max?: number
   min?: number
   defaultValue?: number
+  disabled?: boolean
 } & Omit<InputProps, 'value' | 'onChange' | 'size' | 'min' | 'max' | 'defaultValue'>
 
 export const InputNumber: FC<InputNumberProps> = (props) => {
-  const { unit, className, onChange, amount = 1, value, size = 'md', max, min, defaultValue, ...rest } = props
+  const { unit, className, onChange, amount = 1, value, size = 'md', max, min, defaultValue, disabled, ...rest } = props
 
   const isValidValue = (v: number) => {
     if (max && v > max)
@@ -26,6 +27,8 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
   }
 
   const inc = () => {
+    if (disabled) return
+
     if (value === undefined) {
       onChange(defaultValue)
       return
@@ -36,6 +39,8 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
     onChange(newValue)
   }
   const dec = () => {
+    if (disabled) return
+
     if (value === undefined) {
       onChange(defaultValue)
       return
@@ -54,6 +59,7 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
       value={value}
       max={max}
       min={min}
+      disabled={disabled}
       onChange={(e) => {
         if (e.target.value === '')
           onChange(undefined)
@@ -68,17 +74,30 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
       }}
       unit={unit}
     />
-    <div className='flex flex-col bg-components-input-bg-normal rounded-r-md border-l border-divider-subtle text-text-tertiary focus:shadow-xs'>
-      <button onClick={inc} className={classNames(
-        size === 'sm' ? 'pt-1' : 'pt-1.5',
-        'px-1.5 hover:bg-components-input-bg-hover',
-      )}>
+    <div className={classNames(
+      'flex flex-col bg-components-input-bg-normal rounded-r-md border-l border-divider-subtle text-text-tertiary focus:shadow-xs',
+      disabled && 'opacity-50 cursor-not-allowed',
+    )}>
+      <button
+        onClick={inc}
+        disabled={disabled}
+        className={classNames(
+          size === 'sm' ? 'pt-1' : 'pt-1.5',
+          'px-1.5 hover:bg-components-input-bg-hover',
+          disabled && 'cursor-not-allowed hover:bg-transparent',
+        )}
+      >
         <RiArrowUpSLine className='size-3' />
       </button>
-      <button onClick={dec} className={classNames(
-        size === 'sm' ? 'pb-1' : 'pb-1.5',
-        'px-1.5 hover:bg-components-input-bg-hover',
-      )}>
+      <button
+        onClick={dec}
+        disabled={disabled}
+        className={classNames(
+          size === 'sm' ? 'pb-1' : 'pb-1.5',
+          'px-1.5 hover:bg-components-input-bg-hover',
+          disabled && 'cursor-not-allowed hover:bg-transparent',
+        )}
+      >
         <RiArrowDownSLine className='size-3' />
       </button>
     </div>

web/app/components/base/param-item/index.tsx

@@ -53,6 +53,7 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
             min={min}
             max={max}
             step={step}
+            amount={step}
             size='sm'
             value={value}
             onChange={(value) => {