yangdx
commited on
Commit
·
79ea031
1
Parent(s):
8f4666d
Feat: add reset button to the right of input box
Browse files
lightrag_webui/src/components/graph/Settings.tsx
CHANGED
@@ -8,7 +8,7 @@ import Input from '@/components/ui/Input'
|
|
8 |
import { controlButtonVariant } from '@/lib/constants'
|
9 |
import { useSettingsStore } from '@/stores/settings'
|
10 |
|
11 |
-
import { SettingsIcon } from 'lucide-react'
|
12 |
import { useTranslation } from 'react-i18next';
|
13 |
|
14 |
/**
|
@@ -44,13 +44,15 @@ const LabeledNumberInput = ({
|
|
44 |
onEditFinished,
|
45 |
label,
|
46 |
min,
|
47 |
-
max
|
|
|
48 |
}: {
|
49 |
value: number
|
50 |
onEditFinished: (value: number) => void
|
51 |
label: string
|
52 |
min: number
|
53 |
max?: number
|
|
|
54 |
}) => {
|
55 |
const [currentValue, setCurrentValue] = useState<number | null>(value)
|
56 |
|
@@ -81,6 +83,13 @@ const LabeledNumberInput = ({
|
|
81 |
}
|
82 |
}, [value, currentValue, onEditFinished])
|
83 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
84 |
return (
|
85 |
<div className="flex flex-col gap-2">
|
86 |
<label
|
@@ -89,20 +98,34 @@ const LabeledNumberInput = ({
|
|
89 |
>
|
90 |
{label}
|
91 |
</label>
|
92 |
-
<
|
93 |
-
|
94 |
-
|
95 |
-
|
96 |
-
|
97 |
-
|
98 |
-
|
99 |
-
|
100 |
-
|
101 |
-
|
102 |
-
|
103 |
-
|
104 |
-
|
105 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
106 |
</div>
|
107 |
)
|
108 |
}
|
@@ -273,6 +296,7 @@ export default function Settings() {
|
|
273 |
label={t('graphPanel.sideBar.settings.maxQueryDepth')}
|
274 |
min={1}
|
275 |
value={graphQueryMaxDepth}
|
|
|
276 |
onEditFinished={setGraphQueryMaxDepth}
|
277 |
/>
|
278 |
<LabeledNumberInput
|
@@ -280,6 +304,7 @@ export default function Settings() {
|
|
280 |
min={1}
|
281 |
max={1000}
|
282 |
value={graphMaxNodes}
|
|
|
283 |
onEditFinished={setGraphMaxNodes}
|
284 |
/>
|
285 |
<LabeledNumberInput
|
@@ -287,6 +312,7 @@ export default function Settings() {
|
|
287 |
min={1}
|
288 |
max={30}
|
289 |
value={graphLayoutMaxIterations}
|
|
|
290 |
onEditFinished={setGraphLayoutMaxIterations}
|
291 |
/>
|
292 |
<Separator />
|
|
|
8 |
import { controlButtonVariant } from '@/lib/constants'
|
9 |
import { useSettingsStore } from '@/stores/settings'
|
10 |
|
11 |
+
import { SettingsIcon, Undo2 } from 'lucide-react'
|
12 |
import { useTranslation } from 'react-i18next';
|
13 |
|
14 |
/**
|
|
|
44 |
onEditFinished,
|
45 |
label,
|
46 |
min,
|
47 |
+
max,
|
48 |
+
defaultValue
|
49 |
}: {
|
50 |
value: number
|
51 |
onEditFinished: (value: number) => void
|
52 |
label: string
|
53 |
min: number
|
54 |
max?: number
|
55 |
+
defaultValue?: number
|
56 |
}) => {
|
57 |
const [currentValue, setCurrentValue] = useState<number | null>(value)
|
58 |
|
|
|
83 |
}
|
84 |
}, [value, currentValue, onEditFinished])
|
85 |
|
86 |
+
const handleReset = useCallback(() => {
|
87 |
+
if (defaultValue !== undefined && value !== defaultValue) {
|
88 |
+
setCurrentValue(defaultValue)
|
89 |
+
onEditFinished(defaultValue)
|
90 |
+
}
|
91 |
+
}, [defaultValue, value, onEditFinished])
|
92 |
+
|
93 |
return (
|
94 |
<div className="flex flex-col gap-2">
|
95 |
<label
|
|
|
98 |
>
|
99 |
{label}
|
100 |
</label>
|
101 |
+
<div className="flex items-center gap-1">
|
102 |
+
<Input
|
103 |
+
type="number"
|
104 |
+
value={currentValue === null ? '' : currentValue}
|
105 |
+
onChange={onValueChange}
|
106 |
+
className="h-6 w-full min-w-0 pr-1"
|
107 |
+
min={min}
|
108 |
+
max={max}
|
109 |
+
onBlur={onBlur}
|
110 |
+
onKeyDown={(e) => {
|
111 |
+
if (e.key === 'Enter') {
|
112 |
+
onBlur()
|
113 |
+
}
|
114 |
+
}}
|
115 |
+
/>
|
116 |
+
{defaultValue !== undefined && (
|
117 |
+
<Button
|
118 |
+
variant="ghost"
|
119 |
+
size="icon"
|
120 |
+
className="h-6 w-6 flex-shrink-0 hover:bg-muted text-muted-foreground hover:text-foreground"
|
121 |
+
onClick={handleReset}
|
122 |
+
type="button"
|
123 |
+
title="重置为默认值"
|
124 |
+
>
|
125 |
+
<Undo2 className="h-3.5 w-3.5" />
|
126 |
+
</Button>
|
127 |
+
)}
|
128 |
+
</div>
|
129 |
</div>
|
130 |
)
|
131 |
}
|
|
|
296 |
label={t('graphPanel.sideBar.settings.maxQueryDepth')}
|
297 |
min={1}
|
298 |
value={graphQueryMaxDepth}
|
299 |
+
defaultValue={3}
|
300 |
onEditFinished={setGraphQueryMaxDepth}
|
301 |
/>
|
302 |
<LabeledNumberInput
|
|
|
304 |
min={1}
|
305 |
max={1000}
|
306 |
value={graphMaxNodes}
|
307 |
+
defaultValue={1000}
|
308 |
onEditFinished={setGraphMaxNodes}
|
309 |
/>
|
310 |
<LabeledNumberInput
|
|
|
312 |
min={1}
|
313 |
max={30}
|
314 |
value={graphLayoutMaxIterations}
|
315 |
+
defaultValue={15}
|
316 |
onEditFinished={setGraphLayoutMaxIterations}
|
317 |
/>
|
318 |
<Separator />
|