From f9f588aa160ae2ade22a3cf3e41c67200140ceff Mon Sep 17 00:00:00 2001
From: yangdx <yangdx@znipower.com>
Date: Wed, 2 Apr 2025 23:40:16 +0800
Subject: [PATCH] Feat: add reset button to the right of input box

---
 .../src/components/graph/Settings.tsx         | 58 ++++++++++++++-----
 1 file changed, 42 insertions(+), 16 deletions(-)

diff --git a/lightrag_webui/src/components/graph/Settings.tsx b/lightrag_webui/src/components/graph/Settings.tsx
index f8b0e6cd..8c1ea652 100644
--- a/lightrag_webui/src/components/graph/Settings.tsx
+++ b/lightrag_webui/src/components/graph/Settings.tsx
@@ -8,7 +8,7 @@ import Input from '@/components/ui/Input'
 import { controlButtonVariant } from '@/lib/constants'
 import { useSettingsStore } from '@/stores/settings'
 
-import { SettingsIcon } from 'lucide-react'
+import { SettingsIcon, Undo2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next';
 
 /**
@@ -44,13 +44,15 @@ const LabeledNumberInput = ({
   onEditFinished,
   label,
   min,
-  max
+  max,
+  defaultValue
 }: {
   value: number
   onEditFinished: (value: number) => void
   label: string
   min: number
   max?: number
+  defaultValue?: number
 }) => {
   const [currentValue, setCurrentValue] = useState<number | null>(value)
 
@@ -81,6 +83,13 @@ const LabeledNumberInput = ({
     }
   }, [value, currentValue, onEditFinished])
 
+  const handleReset = useCallback(() => {
+    if (defaultValue !== undefined && value !== defaultValue) {
+      setCurrentValue(defaultValue)
+      onEditFinished(defaultValue)
+    }
+  }, [defaultValue, value, onEditFinished])
+
   return (
     <div className="flex flex-col gap-2">
       <label
@@ -89,20 +98,34 @@ const LabeledNumberInput = ({
       >
         {label}
       </label>
-      <Input
-        type="number"
-        value={currentValue === null ? '' : currentValue}
-        onChange={onValueChange}
-        className="h-6 w-full min-w-0 pr-1"
-        min={min}
-        max={max}
-        onBlur={onBlur}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            onBlur()
-          }
-        }}
-      />
+      <div className="flex items-center gap-1">
+        <Input
+          type="number"
+          value={currentValue === null ? '' : currentValue}
+          onChange={onValueChange}
+          className="h-6 w-full min-w-0 pr-1"
+          min={min}
+          max={max}
+          onBlur={onBlur}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              onBlur()
+            }
+          }}
+        />
+        {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>
   )
 }
@@ -273,6 +296,7 @@ export default function Settings() {
               label={t('graphPanel.sideBar.settings.maxQueryDepth')}
               min={1}
               value={graphQueryMaxDepth}
+              defaultValue={3}
               onEditFinished={setGraphQueryMaxDepth}
             />
             <LabeledNumberInput
@@ -280,6 +304,7 @@ export default function Settings() {
               min={1}
               max={1000}
               value={graphMaxNodes}
+              defaultValue={1000}
               onEditFinished={setGraphMaxNodes}
             />
             <LabeledNumberInput
@@ -287,6 +312,7 @@ export default function Settings() {
               min={1}
               max={30}
               value={graphLayoutMaxIterations}
+              defaultValue={15}
               onEditFinished={setGraphLayoutMaxIterations}
             />
             <Separator />