fix: add delay to WebSocket reconnection and improve event listener cleanup

src/main/core/mihomoApi.ts

@@ -278,7 +278,7 @@ const mihomoTraffic = async (): Promise<void> => {
   mihomoTrafficWs.onclose = (): void => {
     if (trafficRetry) {
       trafficRetry--
-      mihomoTraffic()
+      setTimeout(mihomoTraffic, 1000)
     }
   }
 
@@ -325,7 +325,7 @@ const mihomoMemory = async (): Promise<void> => {
   mihomoMemoryWs.onclose = (): void => {
     if (memoryRetry) {
       memoryRetry--
-      mihomoMemory()
+      setTimeout(mihomoMemory, 1000)
     }
   }
 
@@ -373,7 +373,7 @@ const mihomoLogs = async (): Promise<void> => {
   mihomoLogsWs.onclose = (): void => {
     if (logsRetry) {
       logsRetry--
-      mihomoLogs()
+      setTimeout(mihomoLogs, 1000)
     }
   }
 
@@ -419,7 +419,7 @@ const mihomoConnections = async (): Promise<void> => {
   mihomoConnectionsWs.onclose = (): void => {
     if (connectionsRetry) {
       connectionsRetry--
-      mihomoConnections()
+      setTimeout(mihomoConnections, 1000)
     }
   }
 

src/renderer/src/pages/logs.tsx

@@ -121,17 +121,14 @@ const Logs: React.FC = () => {
         <Virtuoso
           ref={virtuosoRef}
           data={filteredLogs}
-          itemContent={(i, log) => {
+          itemContent={(i, log) => (
-            return (
             <LogItem
               index={i}
-                key={log.payload + i}
               time={log.time}
               type={log.type}
               payload={log.payload}
             />
-            )
+          )}
-          }}
         />
       </div>
     </BasePage>

src/renderer/src/pages/override.tsx

@@ -75,18 +75,29 @@ const Override: React.FC = () => {
     }
   }
 
+  const addOverrideItemRef = useRef(addOverrideItem)
+  addOverrideItemRef.current = addOverrideItem
+
+  const tRef = useRef(t)
+  tRef.current = t
+
   useEffect(() => {
-    pageRef.current?.addEventListener('dragover', (e) => {
+    const element = pageRef.current
+    if (!element) return
+
+    const handleDragOver = (e: DragEvent): void => {
       e.preventDefault()
       e.stopPropagation()
       setFileOver(true)
-    })
+    }
-    pageRef.current?.addEventListener('dragleave', (e) => {
+
+    const handleDragLeave = (e: DragEvent): void => {
       e.preventDefault()
       e.stopPropagation()
       setFileOver(false)
-    })
+    }
-    pageRef.current?.addEventListener('drop', async (event) => {
+
+    const handleDrop = async (event: DragEvent): Promise<void> => {
       event.preventDefault()
       event.stopPropagation()
       if (event.dataTransfer?.files) {
@@ -94,7 +105,7 @@ const Override: React.FC = () => {
         if (file.name.endsWith('.js') || file.name.endsWith('.yaml')) {
           const content = await readTextFile((file as File & { path: string }).path)
           try {
-            await addOverrideItem({
+            await addOverrideItemRef.current({
               name: file.name,
               type: 'local',
               file: content,
@@ -104,15 +115,20 @@ const Override: React.FC = () => {
             setFileOver(false)
           }
         } else {
-          alert(t('override.unsupportedFileType'))
+          alert(tRef.current('override.unsupportedFileType'))
         }
       }
       setFileOver(false)
-    })
+    }
+
+    element.addEventListener('dragover', handleDragOver)
+    element.addEventListener('dragleave', handleDragLeave)
+    element.addEventListener('drop', handleDrop)
+
     return (): void => {
-      pageRef.current?.removeEventListener('dragover', () => {})
+      element.removeEventListener('dragover', handleDragOver)
-      pageRef.current?.removeEventListener('dragleave', () => {})
+      element.removeEventListener('dragleave', handleDragLeave)
-      pageRef.current?.removeEventListener('drop', () => {})
+      element.removeEventListener('drop', handleDrop)
     }
   }, [])
 

src/renderer/src/pages/profiles.tsx

@@ -156,26 +156,37 @@ const Profiles: React.FC = () => {
     }
   }
 
-  const handleInputKeyUp = useCallback(
+  const handleImportRef = useRef(handleImport)
-    (e: KeyboardEvent<HTMLInputElement>) => {
+  handleImportRef.current = handleImport
-      if (e.key !== 'Enter' || isUrlEmpty) return
+
-      handleImport()
+  const addProfileItemRef = useRef(addProfileItem)
-    },
+  addProfileItemRef.current = addProfileItem
-    [isUrlEmpty]
+
-  )
+  const tRef = useRef(t)
+  tRef.current = t
+
+  const handleInputKeyUp = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key !== 'Enter' || e.currentTarget.value.trim() === '') return
+    handleImportRef.current()
+  }, [])
 
   useEffect(() => {
-    pageRef.current?.addEventListener('dragover', (e) => {
+    const element = pageRef.current
+    if (!element) return
+
+    const handleDragOver = (e: DragEvent): void => {
       e.preventDefault()
       e.stopPropagation()
       setFileOver(true)
-    })
+    }
-    pageRef.current?.addEventListener('dragleave', (e) => {
+
+    const handleDragLeave = (e: DragEvent): void => {
       e.preventDefault()
       e.stopPropagation()
       setFileOver(false)
-    })
+    }
-    pageRef.current?.addEventListener('drop', async (event) => {
+
+    const handleDrop = async (event: DragEvent): Promise<void> => {
       event.preventDefault()
       event.stopPropagation()
       if (event.dataTransfer?.files) {
@@ -184,20 +195,25 @@ const Profiles: React.FC = () => {
           try {
             const path = window.api.webUtils.getPathForFile(file)
             const content = await readTextFile(path)
-            await addProfileItem({ name: file.name, type: 'local', file: content })
+            await addProfileItemRef.current({ name: file.name, type: 'local', file: content })
           } catch (e) {
             alert(e)
           }
         } else {
-          alert(t('profiles.error.unsupportedFileType'))
+          alert(tRef.current('profiles.error.unsupportedFileType'))
         }
       }
       setFileOver(false)
-    })
+    }
+
+    element.addEventListener('dragover', handleDragOver)
+    element.addEventListener('dragleave', handleDragLeave)
+    element.addEventListener('drop', handleDrop)
+
     return (): void => {
-      pageRef.current?.removeEventListener('dragover', () => {})
+      element.removeEventListener('dragover', handleDragOver)
-      pageRef.current?.removeEventListener('dragleave', () => {})
+      element.removeEventListener('dragleave', handleDragLeave)
-      pageRef.current?.removeEventListener('drop', () => {})
+      element.removeEventListener('drop', handleDrop)
     }
   }, [])