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
- <Input
93
- type="number"
94
- value={currentValue === null ? '' : currentValue}
95
- onChange={onValueChange}
96
- className="h-6 w-full min-w-0 pr-1"
97
- min={min}
98
- max={max}
99
- onBlur={onBlur}
100
- onKeyDown={(e) => {
101
- if (e.key === 'Enter') {
102
- onBlur()
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 />