[perf] Refactor component

components/settings.tsx

@@ -5,16 +5,16 @@ import type { Mode } from "@/components/logic"
 
 interface SettingsPanelProps {
   mode: Mode
-  totalTasks: number | string
-  pickCount: number | string
-  rounds: number | string
+  totalTasks: number
+  pickCount: number
+  rounds: number
   allowRepeat: boolean
   singleAllowRepeat: boolean
   selectedRecords: { number: number; colorIndex: number }[]
   onModeChange: (v: Mode) => void
-  onTotalTasksChange: (v: number | string) => void
-  onPickCountChange: (v: number | string) => void
-  onRoundsChange: (v: number | string) => void
+  onTotalTasksChange: (v: number) => void
+  onPickCountChange: (v: number) => void
+  onRoundsChange: (v: number) => void
   onAllowRepeatChange: (v: boolean) => void
   onSingleAllowRepeatChange: (v: boolean) => void
   onRoll: () => void
@@ -29,18 +29,13 @@ function FieldRow({
   value,
   onChange,
   min = 1,
-  error,
 }: {
   label: string
   hint: string
-  value: number | string
-  onChange: (v: number | string) => void
+  value: number
+  onChange: (v: number) => void
   min?: number
-  error?: string
 }) {
-  const displayValue = value === "" ? "" : value
-  const hasError = error && value === ""
-  
   return (
     <div className="flex items-center justify-between gap-4">
       <div className="min-w-0">
@@ -49,13 +44,7 @@ function FieldRow({
       </div>
       <div className="flex items-center gap-0 border border-[#e2e6ea] flex-shrink-0">
         <button
-          onClick={() => {
-            if (displayValue === "") {
-              onChange(min)
-            } else {
-              onChange(Math.max(min, (value as number) - 1))
-            }
-          }}
+          onClick={() => onChange(Math.max(min, value - 1))}
           className="w-7 h-7 flex items-center justify-center text-[#8a95a1] hover:text-[#16191f] hover:bg-[#f1f3f5] transition-colors text-base leading-none"
           aria-label={`减少${label}`}
         >
@@ -63,33 +52,21 @@ function FieldRow({
         </button>
         <input
           type="number"
-          value={displayValue}
+          value={value}
           min={min}
           onChange={(e) => {
-            const inputValue = e.target.value
-            if (inputValue === "") {
-              onChange("")
-            } else {
-              const v = parseInt(inputValue, 10)
-              if (!isNaN(v)) onChange(v)
-            }
+            const v = parseInt(e.target.value, 10)
+            if (!isNaN(v)) onChange(v)
           }}
           className={cn(
             "w-12 h-7 text-center text-sm font-mono bg-[#f7f8fa]",
             "border-x border-[#e2e6ea]",
             "focus:outline-none focus:bg-[#ffffff]",
-            "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none",
-            hasError && "text-[#d92d20] border-[#d92d20]"
+            "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
           )}
         />
         <button
-          onClick={() => {
-            if (displayValue === "") {
-              onChange(min)
-            } else {
-              onChange((value as number) + 1)
-            }
-          }}
+          onClick={() => onChange(value + 1)}
           className="w-7 h-7 flex items-center justify-center text-[#8a95a1] hover:text-[#16191f] hover:bg-[#f1f3f5] transition-colors text-base leading-none"
           aria-label={`增加${label}`}
         >