Feat: add reset button to the right of input box

This commit is contained in:
yangdx
2025-04-02 23:40:16 +08:00
parent 7b1c946069
commit f9f588aa16

View File

@@ -8,7 +8,7 @@ import Input from '@/components/ui/Input'
import { controlButtonVariant } from '@/lib/constants' import { controlButtonVariant } from '@/lib/constants'
import { useSettingsStore } from '@/stores/settings' import { useSettingsStore } from '@/stores/settings'
import { SettingsIcon } from 'lucide-react' import { SettingsIcon, Undo2 } from 'lucide-react'
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
/** /**
@@ -44,13 +44,15 @@ const LabeledNumberInput = ({
onEditFinished, onEditFinished,
label, label,
min, min,
max max,
defaultValue
}: { }: {
value: number value: number
onEditFinished: (value: number) => void onEditFinished: (value: number) => void
label: string label: string
min: number min: number
max?: number max?: number
defaultValue?: number
}) => { }) => {
const [currentValue, setCurrentValue] = useState<number | null>(value) const [currentValue, setCurrentValue] = useState<number | null>(value)
@@ -81,6 +83,13 @@ const LabeledNumberInput = ({
} }
}, [value, currentValue, onEditFinished]) }, [value, currentValue, onEditFinished])
const handleReset = useCallback(() => {
if (defaultValue !== undefined && value !== defaultValue) {
setCurrentValue(defaultValue)
onEditFinished(defaultValue)
}
}, [defaultValue, value, onEditFinished])
return ( return (
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<label <label
@@ -89,6 +98,7 @@ const LabeledNumberInput = ({
> >
{label} {label}
</label> </label>
<div className="flex items-center gap-1">
<Input <Input
type="number" type="number"
value={currentValue === null ? '' : currentValue} value={currentValue === null ? '' : currentValue}
@@ -103,6 +113,19 @@ const LabeledNumberInput = ({
} }
}} }}
/> />
{defaultValue !== undefined && (
<Button
variant="ghost"
size="icon"
className="h-6 w-6 flex-shrink-0 hover:bg-muted text-muted-foreground hover:text-foreground"
onClick={handleReset}
type="button"
title="重置为默认值"
>
<Undo2 className="h-3.5 w-3.5" />
</Button>
)}
</div>
</div> </div>
) )
} }
@@ -273,6 +296,7 @@ export default function Settings() {
label={t('graphPanel.sideBar.settings.maxQueryDepth')} label={t('graphPanel.sideBar.settings.maxQueryDepth')}
min={1} min={1}
value={graphQueryMaxDepth} value={graphQueryMaxDepth}
defaultValue={3}
onEditFinished={setGraphQueryMaxDepth} onEditFinished={setGraphQueryMaxDepth}
/> />
<LabeledNumberInput <LabeledNumberInput
@@ -280,6 +304,7 @@ export default function Settings() {
min={1} min={1}
max={1000} max={1000}
value={graphMaxNodes} value={graphMaxNodes}
defaultValue={1000}
onEditFinished={setGraphMaxNodes} onEditFinished={setGraphMaxNodes}
/> />
<LabeledNumberInput <LabeledNumberInput
@@ -287,6 +312,7 @@ export default function Settings() {
min={1} min={1}
max={30} max={30}
value={graphLayoutMaxIterations} value={graphLayoutMaxIterations}
defaultValue={15}
onEditFinished={setGraphLayoutMaxIterations} onEditFinished={setGraphLayoutMaxIterations}
/> />
<Separator /> <Separator />