feat: settings ui for database pre-preprocessing

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

@@ -0,0 +1,57 @@
+import { useState } from 'react'
+import type { FC, SetStateAction } from 'react'
+import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/react'
+import Input, { type InputProps } from '../input'
+import classNames from '@/utils/classnames'
+
+export type InputNumberProps = {
+  unit?: string
+  onChange: (value: number) => void
+  amount?: number
+  size?: 'sm' | 'md'
+} & Omit<InputProps, 'value' | 'onChange' | 'size'>
+
+export const InputNumber: FC<InputNumberProps> = (props) => {
+  const { unit, className, onChange, defaultValue = 0, amount = 1, size = 'sm', max, min, ...rest } = props
+  const [val, setVal] = useState<number>(defaultValue as number)
+  const update = (value: SetStateAction<number>) => {
+    const current = typeof value === 'function' ? value(val) : value as number
+    if (max && current >= (max as number))
+      return
+    if (min && current <= (min as number))
+      return
+    setVal(value)
+  }
+  const inc = () => update(val => val + amount)
+  const dec = () => update(val => val - amount)
+  return <div className='flex'>
+    <Input {...rest}
+      className={classNames('rounded-r-none', className)}
+      value={val}
+      max={max}
+      min={min}
+      onChange={(e) => {
+        const parsed = Number(e.target.value)
+        if (Number.isNaN(parsed))
+          return
+        setVal(parsed)
+        onChange(parsed)
+      }}
+    />
+    {unit && <div className='flex items-center bg-components-input-bg-normal text-[13px] text-text-placeholder pr-2'>{unit}</div>}
+    <div className='flex flex-col bg-components-input-bg-normal rounded-r-md border-l text-text-tertiary'>
+      <button onClick={inc} className={classNames(
+        size === 'sm' ? 'pt-1' : 'pt-1.5',
+        'px-1.5 hover:bg-components-input-bg-hover',
+      )}>
+        <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',
+      )}>
+        <RiArrowDownSLine className='size-3' />
+      </button>
+    </div>
+  </div>
+}

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

@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { InputNumber } from '../input-number'
 import Tooltip from '@/app/components/base/tooltip'
 import Slider from '@/app/components/base/slider'
 import Switch from '@/app/components/base/switch'
@@ -47,13 +48,20 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
       </div>
       <div className="mt-2 flex items-center">
         <div className="mr-4 flex shrink-0 items-center">
-          <input disabled={!enable} type="number" min={min} max={max} step={step} className="block w-[48px] h-7 text-xs leading-[18px] rounded-lg border-0 pl-1 pl py-1.5 bg-gray-50 text-gray-900  placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-primary-600 disabled:opacity-60" value={(value === null || value === undefined) ? '' : value} onChange={(e) => {
-            const value = parseFloat(e.target.value)
-            if (value < min || value > max)
-              return
+          <InputNumber
+            disabled={!enable}
+            type="number"
+            min={min}
+            max={max}
+            step={step}
+            size='sm'
+            onChange={(value) => {
+              if (value < min || value > max)
+                return
 
-            onChange(id, value)
-          }} />
+              onChange(id, value)
+            }}
+          />
         </div>
         <div className="flex items-center h-7 grow">
           <Slider