Merge pull request #1435 from xmk23/smart_core

fix: optimize connections page performance and state management

src/main/config/override.ts

@@ -40,7 +40,7 @@ export async function addOverrideItem(item: Partial<IOverrideItem>): Promise<voi
   const config = await getOverrideConfig()
   const newItem = await createOverride(item)
   if (await getOverrideItem(item.id)) {
-    updateOverrideItem(newItem)
+    await updateOverrideItem(newItem)
   } else {
     config.items.push(newItem)
   }
@@ -84,7 +84,7 @@ export async function createOverride(item: Partial<IOverrideItem>): Promise<IOve
     }
     case 'local': {
       const data = item.file || ''
-      setOverride(id, newItem.ext, data)
+      await setOverride(id, newItem.ext, data)
       break
     }
   }

src/main/config/smartOverride.ts

@@ -339,30 +339,14 @@ export async function createSmartOverride(): Promise<void> {
       smartCollectorSize
     )
 
-    // 检查是否已存在 Smart 覆写配置
+    await addOverrideItem({
-    const existingOverride = await getOverrideItem(SMART_OVERRIDE_ID)
+      id: SMART_OVERRIDE_ID,
-
+      name: 'Smart Core Override',
-    if (existingOverride) {
+      type: 'local',
-      // 如果已存在，更新配置
+      ext: 'js',
-      await addOverrideItem({
+      global: true,
-        id: SMART_OVERRIDE_ID,
+      file: template
-        name: 'Smart Core Override',
+    })
-        type: 'local',
-        ext: 'js',
-        global: true,
-        file: template
-      })
-    } else {
-      // 如果不存在，创建新的覆写配置
-      await addOverrideItem({
-        id: SMART_OVERRIDE_ID,
-        name: 'Smart Core Override',
-        type: 'local',
-        ext: 'js',
-        global: true,
-        file: template
-      })
-    }
   } catch (error) {
     await overrideLogger.error('Failed to create Smart override', error)
     throw error

src/main/core/manager.ts

@@ -499,24 +499,7 @@ async function checkProfile(): Promise<void> {
 }
 
 export async function checkTunPermissions(): Promise<boolean> {
-  const { core = 'mihomo' } = await getAppConfig()
+  return checkMihomoCorePermissions()
-  const corePath = mihomoCorePath(core)
-
-  try {
-    if (process.platform === 'win32') {
-      return await checkAdminPrivileges()
-    }
-
-    if (process.platform === 'darwin' || process.platform === 'linux') {
-      const { stat } = await import('fs/promises')
-      const stats = await stat(corePath)
-      return (stats.mode & 0o4000) !== 0 && stats.uid === 0
-    }
-  } catch {
-    return false
-  }
-
-  return false
 }
 
 export async function grantTunPermissions(): Promise<void> {

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/main/index.ts

@@ -7,7 +7,7 @@ import { quitWithoutCore, startCore, stopCore, checkAdminRestartForTun, checkHig
 import { triggerSysProxy } from './sys/sysproxy'
 import icon from '../../resources/icon.png?asset'
 import { createTray, hideDockIcon, showDockIcon } from './resolve/tray'
-import { init, initBasic } from './utils/init'
+import { init, initBasic, safeShowErrorBox } from './utils/init'
 import { join } from 'path'
 import { initShortcut } from './resolve/shortcut'
 import { spawn, exec } from 'child_process'
@@ -23,24 +23,6 @@ import i18next from 'i18next'
 import { logger } from './utils/logger'
 import { initWebdavBackupScheduler } from './resolve/backup'
 
-// 错误处理
-function showSafeErrorBox(titleKey: string, message: string): void {
-  let title: string
-  try {
-    title = i18next.t(titleKey)
-    if (!title || title === titleKey) throw new Error('Translation not ready')
-  } catch {
-    const isZh = app.getLocale().startsWith('zh')
-    const fallbacks: Record<string, { zh: string; en: string }> = {
-      'common.error.initFailed': { zh: '应用初始化失败', en: 'Application initialization failed' },
-      'mihomo.error.coreStartFailed': { zh: '内核启动出错', en: 'Core start failed' },
-      'profiles.error.importFailed': { zh: '配置导入失败', en: 'Profile import failed' },
-      'common.error.adminRequired': { zh: '需要管理员权限', en: 'Administrator privileges required' }
-    }
-    title = fallbacks[titleKey] ? (isZh ? fallbacks[titleKey].zh : fallbacks[titleKey].en) : (isZh ? '错误' : 'Error')
-  }
-  dialog.showErrorBox(title, message)
-}
 
 async function fixUserDataPermissions(): Promise<void> {
   if (process.platform !== 'darwin') return
@@ -80,7 +62,7 @@ async function initApp(): Promise<void> {
 
 initApp()
   .catch((e) => {
-    showSafeErrorBox('common.error.initFailed', `${e}`)
+    safeShowErrorBox('common.error.initFailed', `${e}`)
     app.quit()
   })
 
@@ -150,7 +132,7 @@ async function checkHighPrivilegeCoreEarly(): Promise<void> {
           await restartAsAdmin(false)
           process.exit(0)
         } catch (error) {
-          showSafeErrorBox('common.error.adminRequired', `${error}`)
+          safeShowErrorBox('common.error.adminRequired', `${error}`)
           process.exit(1)
         }
       } else {
@@ -234,7 +216,7 @@ app.whenReady().then(async () => {
     }
     await initI18n({ lng: appConfig.language })
   } catch (e) {
-    showSafeErrorBox('common.error.initFailed', `${e}`)
+    safeShowErrorBox('common.error.initFailed', `${e}`)
     app.quit()
   }
 
@@ -247,7 +229,7 @@ app.whenReady().then(async () => {
       await checkAdminRestartForTun()
     })
   } catch (e) {
-    showSafeErrorBox('mihomo.error.coreStartFailed', `${e}`)
+    safeShowErrorBox('mihomo.error.coreStartFailed', `${e}`)
   }
   try {
     await startMonitor()
@@ -303,7 +285,7 @@ async function handleDeepLink(url: string): Promise<void> {
         new Notification({ title: i18next.t('profiles.notification.importSuccess') }).show()
         break
       } catch (e) {
-        showSafeErrorBox('profiles.error.importFailed', `${url}\n${e}`)
+        safeShowErrorBox('profiles.error.importFailed', `${url}\n${e}`)
       }
     }
   }

src/main/resolve/backup.ts

@@ -21,7 +21,13 @@ import i18next from 'i18next'
 
 let backupCronJob: Cron | null = null
 
-export async function webdavBackup(): Promise<boolean> {
+interface WebDAVContext {
+  client: ReturnType<Awaited<typeof import('webdav/dist/node/index.js')>['createClient']>
+  webdavDir: string
+  webdavMaxBackups: number
+}
+
+async function getWebDAVClient(): Promise<WebDAVContext> {
   const { createClient } = await import('webdav/dist/node/index.js')
   const {
     webdavUrl = '',
@@ -30,6 +36,17 @@ export async function webdavBackup(): Promise<boolean> {
     webdavDir = 'clash-party',
     webdavMaxBackups = 0
   } = await getAppConfig()
+
+  const client = createClient(webdavUrl, {
+    username: webdavUsername,
+    password: webdavPassword
+  })
+
+  return { client, webdavDir, webdavMaxBackups }
+}
+
+export async function webdavBackup(): Promise<boolean> {
+  const { client, webdavDir, webdavMaxBackups } = await getWebDAVClient()
   const zip = new AdmZip()
 
   zip.addLocalFile(appConfigPath())
@@ -44,10 +61,6 @@ export async function webdavBackup(): Promise<boolean> {
   const date = new Date()
   const zipFileName = `${process.platform}_${dayjs(date).format('YYYY-MM-DD_HH-mm-ss')}.zip`
 
-  const client = createClient(webdavUrl, {
-    username: webdavUsername,
-    password: webdavPassword
-  })
   try {
     await client.createDirectory(webdavDir)
   } catch {
@@ -92,36 +105,14 @@ export async function webdavBackup(): Promise<boolean> {
 }
 
 export async function webdavRestore(filename: string): Promise<void> {
-  const { createClient } = await import('webdav/dist/node/index.js')
+  const { client, webdavDir } = await getWebDAVClient()
-  const {
-    webdavUrl = '',
-    webdavUsername = '',
-    webdavPassword = '',
-    webdavDir = 'clash-party'
-  } = await getAppConfig()
-
-  const client = createClient(webdavUrl, {
-    username: webdavUsername,
-    password: webdavPassword
-  })
   const zipData = await client.getFileContents(`${webdavDir}/${filename}`)
   const zip = new AdmZip(zipData as Buffer)
   zip.extractAllTo(dataDir(), true)
 }
 
 export async function listWebdavBackups(): Promise<string[]> {
-  const { createClient } = await import('webdav/dist/node/index.js')
+  const { client, webdavDir } = await getWebDAVClient()
-  const {
-    webdavUrl = '',
-    webdavUsername = '',
-    webdavPassword = '',
-    webdavDir = 'clash-party'
-  } = await getAppConfig()
-
-  const client = createClient(webdavUrl, {
-    username: webdavUsername,
-    password: webdavPassword
-  })
   const files = await client.getDirectoryContents(webdavDir, { glob: '*.zip' })
   if (Array.isArray(files)) {
     return files.map((file) => file.basename)
@@ -131,18 +122,7 @@ export async function listWebdavBackups(): Promise<string[]> {
 }
 
 export async function webdavDelete(filename: string): Promise<void> {
-  const { createClient } = await import('webdav/dist/node/index.js')
+  const { client, webdavDir } = await getWebDAVClient()
-  const {
-    webdavUrl = '',
-    webdavUsername = '',
-    webdavPassword = '',
-    webdavDir = 'clash-party'
-  } = await getAppConfig()
-
-  const client = createClient(webdavUrl, {
-    username: webdavUsername,
-    password: webdavPassword
-  })
   await client.deleteFile(`${webdavDir}/${filename}`)
 }
 

src/main/utils/init.ts

@@ -42,7 +42,7 @@ import {
 } from '../config'
 import { app, dialog } from 'electron'
 import { startSSIDCheck } from '../sys/ssid'
-import i18next from '../../shared/i18n'
+import i18next, { resources } from '../../shared/i18n'
 import { initLogger } from './logger'
 
 let isInitBasicCompleted = false
@@ -54,11 +54,9 @@ export function safeShowErrorBox(titleKey: string, message: string): void {
     title = i18next.t(titleKey)
     if (!title || title === titleKey) throw new Error('Translation not ready')
   } catch {
-    const isZh = process.env.LANG?.startsWith('zh') || process.env.LC_ALL?.startsWith('zh')
+    const isZh = app.getLocale().startsWith('zh')
-    const fallbacks: Record<string, { zh: string; en: string }> = {
+    const lang = isZh ? resources['zh-CN'].translation : resources['en-US'].translation
-      'mihomo.error.coreStartFailed': { zh: '内核启动出错', en: 'Core start failed' }
+    title = lang[titleKey] || (isZh ? '错误' : 'Error')
-    }
-    title = fallbacks[titleKey] ? (isZh ? fallbacks[titleKey].zh : fallbacks[titleKey].en) : (isZh ? '错误' : 'Error')
   }
   dialog.showErrorBox(title, message)
 }

src/main/utils/template.ts

@@ -9,6 +9,7 @@ export const defaultConfig: IAppConfig = {
   appTheme: 'system',
   useWindowFrame: false,
   proxyInTray: true,
+  showCurrentProxyInTray: false,
   disableTrayIconColor: false,
   maxLogDays: 7,
   proxyCols: 'auto',

src/renderer/src/assets/main.css

@@ -147,4 +147,49 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
+}
+
+/* Toast */
+.toast-enter {
+  animation: toast-in 0.2s ease-out forwards;
+}
+
+.toast-exit {
+  animation: toast-out 0.15s ease-in forwards;
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes toast-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+}
+
+.toast-progress {
+  animation: progress-shrink linear forwards;
+  width: 100%;
+}
+
+@keyframes progress-shrink {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
 }

src/renderer/src/components/base/toast.tsx

@@ -0,0 +1,157 @@
+import React, { useEffect, useState, useCallback } from 'react'
+import { createPortal } from 'react-dom'
+import { IoCheckmark, IoClose, IoAlertSharp, IoInformationSharp } from 'react-icons/io5'
+
+type ToastType = 'success' | 'error' | 'warning' | 'info'
+
+interface ToastData {
+  id: string
+  type: ToastType
+  title?: string
+  message: string
+  duration?: number
+  exiting?: boolean
+}
+
+type ToastListener = (toasts: ToastData[]) => void
+
+let toasts: ToastData[] = []
+let listeners: ToastListener[] = []
+
+const notifyListeners = (): void => {
+  listeners.forEach((listener) => listener([...toasts]))
+}
+
+const addToast = (type: ToastType, message: string, title?: string, duration = 1500): void => {
+  const id = `${Date.now()}-${Math.random().toString(36).slice(2)}`
+  toasts = [...toasts.slice(-4), { id, type, message, title, duration }]
+  notifyListeners()
+}
+
+const markExiting = (id: string): void => {
+  toasts = toasts.map((t) => (t.id === id ? { ...t, exiting: true } : t))
+  notifyListeners()
+}
+
+const removeToast = (id: string): void => {
+  toasts = toasts.filter((t) => t.id !== id)
+  notifyListeners()
+}
+
+export const toast = {
+  success: (message: string, title?: string): void => addToast('success', message, title),
+  error: (message: string, title?: string): void => addToast('error', message, title, 1800),
+  warning: (message: string, title?: string): void => addToast('warning', message, title),
+  info: (message: string, title?: string): void => addToast('info', message, title)
+}
+
+const ToastItem: React.FC<{
+  data: ToastData
+  onRemove: (id: string) => void
+}> = ({ data, onRemove }) => {
+  useEffect(() => {
+    const duration = data.duration || 3500
+    const exitTimer = setTimeout(() => markExiting(data.id), duration - 200)
+    const removeTimer = setTimeout(() => onRemove(data.id), duration)
+    return () => {
+      clearTimeout(exitTimer)
+      clearTimeout(removeTimer)
+    }
+  }, [data.id, data.duration, onRemove])
+
+  const theme: Record<ToastType, { icon: React.ReactNode; bg: string; iconBg: string }> = {
+    success: {
+      icon: <IoCheckmark className="text-white text-sm" />,
+      bg: 'bg-content1',
+      iconBg: 'bg-success'
+    },
+    error: {
+      icon: <IoClose className="text-white text-sm" />,
+      bg: 'bg-content1', 
+      iconBg: 'bg-danger'
+    },
+    warning: {
+      icon: <IoAlertSharp className="text-white text-sm" />,
+      bg: 'bg-content1',
+      iconBg: 'bg-warning'
+    },
+    info: {
+      icon: <IoInformationSharp className="text-white text-sm" />,
+      bg: 'bg-content1',
+      iconBg: 'bg-primary'
+    }
+  }
+
+  const { icon, iconBg } = theme[data.type]
+  const duration = data.duration || 3500
+
+  return (
+    <div
+      className={`
+        relative overflow-hidden
+        flex items-center gap-3 p-3
+        bg-content1/80 rounded-large
+        shadow-large border border-default-200/50
+        backdrop-blur-xl backdrop-saturate-150
+        ${data.exiting ? 'toast-exit' : 'toast-enter'}
+      `}
+      style={{ width: 340 }}
+    >
+      <div className={`flex-shrink-0 w-7 h-7 ${iconBg} rounded-full flex items-center justify-center`}>
+        {icon}
+      </div>
+      <div className="flex-1 min-w-0">
+        {data.title && (
+          <p className="text-sm font-medium text-foreground">{data.title}</p>
+        )}
+        <p className="text-sm text-foreground-500 break-words select-text">
+          {data.message}
+        </p>
+      </div>
+      <button
+        onClick={() => {
+          markExiting(data.id)
+          setTimeout(() => onRemove(data.id), 150)
+        }}
+        className="flex-shrink-0 p-1 rounded-full hover:bg-default-200/60 transition-colors"
+      >
+        <IoClose className="text-base text-foreground-400" />
+      </button>
+      <div
+        className={`absolute bottom-0 left-0 h-[2px] ${iconBg} toast-progress`}
+        style={{ animationDuration: `${duration}ms` }}
+      />
+    </div>
+  )
+}
+
+export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [currentToasts, setCurrentToasts] = useState<ToastData[]>([])
+
+  const handleRemove = useCallback((id: string) => {
+    removeToast(id)
+  }, [])
+
+  useEffect(() => {
+    const listener: ToastListener = (newToasts) => setCurrentToasts(newToasts)
+    listeners.push(listener)
+    return () => {
+      listeners = listeners.filter((l) => l !== listener)
+    }
+  }, [])
+
+  return (
+    <>
+      {children}
+      {currentToasts.length > 0 &&
+        createPortal(
+          <div className="fixed top-[60px] right-4 z-[9999] flex flex-col gap-2">
+            {currentToasts.map((t) => (
+              <ToastItem key={t.id} data={t} onRemove={handleRemove} />
+            ))}
+          </div>,
+          document.body
+        )}
+    </>
+  )
+}

src/renderer/src/components/connections/connection-item.tsx

@@ -1,26 +1,19 @@
 import { Button, Card, CardFooter, CardHeader, Chip } from '@heroui/react'
 import { calcTraffic } from '@renderer/utils/calc'
 import dayjs from '@renderer/utils/dayjs'
-import React, { useEffect } from 'react'
+import React from 'react'
 import { CgClose, CgTrash } from 'react-icons/cg'
 
 interface Props {
   index: number
   info: IMihomoConnectionDetail
-  selected: IMihomoConnectionDetail | undefined
   setSelected: React.Dispatch<React.SetStateAction<IMihomoConnectionDetail | undefined>>
   setIsDetailModalOpen: React.Dispatch<React.SetStateAction<boolean>>
   close: (id: string) => void
 }
 
 const ConnectionItem: React.FC<Props> = (props) => {
-  const { index, info, close, selected, setSelected, setIsDetailModalOpen } = props
+  const { index, info, close, setSelected, setIsDetailModalOpen } = props
-
-  useEffect(() => {
-    if (selected?.id === info.id) {
-      setSelected(info)
-    }
-  }, [info])
 
   return (
     <div className={`px-2 pb-2 ${index === 0 ? 'pt-2' : ''}`}>
@@ -37,7 +30,7 @@ const ConnectionItem: React.FC<Props> = (props) => {
             <div className="w-full pr-12">
               <CardHeader className="pb-0 gap-1">
                 <Chip
-                  color={`${info.isActive ? 'primary' : 'danger'}`}
+                  color={info.isActive ? 'primary' : 'danger'}
                   size="sm"
                   radius="sm"
                   variant="dot"
@@ -84,7 +77,7 @@ const ConnectionItem: React.FC<Props> = (props) => {
           </div>
         </Card>
         <Button
-          color={`${info.isActive ? 'warning' : 'danger'}`}
+          color={info.isActive ? 'warning' : 'danger'}
           variant="light"
           isIconOnly
           className="absolute right-2 top-1/2 -translate-y-1/2"

src/renderer/src/components/logs/log-item.tsx

@@ -14,7 +14,7 @@ const LogItem: React.FC<IMihomoLogInfo & { index: number }> = (props) => {
       <Card>
         <CardHeader className="pb-0 pt-1">
           <div className={`mr-2 text-lg font-bold text-${colorMap[type]}`}>
-            {props.type.toUpperCase()}
+            {type.toUpperCase()}
           </div>
           <small className="text-foreground-500">{time}</small>
         </CardHeader>
@@ -24,4 +24,4 @@ const LogItem: React.FC<IMihomoLogInfo & { index: number }> = (props) => {
   )
 }
 
-export default LogItem
+export default React.memo(LogItem)

src/renderer/src/components/override/edit-file-modal.tsx

@@ -1,4 +1,5 @@
 import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button } from '@heroui/react'
+import { toast } from '@renderer/components/base/toast'
 import React, { useEffect, useState } from 'react'
 import { BaseEditor } from '../base/base-editor'
 import { getOverride, restartCore, setOverride } from '@renderer/utils/ipc'
@@ -58,7 +59,7 @@ const EditFileModal: React.FC<Props> = (props) => {
                 await restartCore()
                 onClose()
               } catch (e) {
-                alert(e)
+                toast.error(String(e))
               }
             }}
           >

src/renderer/src/components/override/override-item.tsx

@@ -8,6 +8,7 @@ import {
   DropdownMenu,
   DropdownTrigger
 } from '@heroui/react'
+import { toast } from '@renderer/components/base/toast'
 import { IoMdMore, IoMdRefresh } from 'react-icons/io'
 import dayjs from '@renderer/utils/dayjs'
 import React, { Key, useMemo, useState } from 'react'
@@ -197,7 +198,7 @@ const OverrideItem: React.FC<Props> = (props) => {
                         await addOverrideItem(info)
                         await restartCore()
                       } catch (e) {
-                        alert(e)
+                        toast.error(String(e))
                       } finally {
                         setUpdating(false)
                       }

src/renderer/src/components/profiles/edit-info-modal.tsx

@@ -13,6 +13,7 @@ import {
   DropdownMenu,
   DropdownItem
 } from '@heroui/react'
+import { toast } from '@renderer/components/base/toast'
 import React, { useState } from 'react'
 import SettingItem from '../base/base-setting-item'
 import { useOverrideConfig } from '@renderer/hooks/use-override-config'
@@ -49,7 +50,7 @@ const EditInfoModal: React.FC<Props> = (props) => {
       await restartCore()
       onClose()
     } catch (e) {
-      alert(e)
+      toast.error(String(e))
     }
   }
 

src/renderer/src/components/profiles/edit-rules-modal.tsx

@@ -22,6 +22,7 @@ import yaml from 'js-yaml'
 import { IoMdTrash, IoMdArrowUp, IoMdArrowDown, IoMdUndo } from 'react-icons/io'
 import { MdVerticalAlignTop, MdVerticalAlignBottom } from 'react-icons/md'
 import { platform } from '@renderer/utils/init'
+import { toast } from '@renderer/components/base/toast'
 
 interface Props {
   id: string
@@ -642,7 +643,7 @@ const EditRulesModal: React.FC<Props> = (props) => {
       await setRuleStr(id, ruleYaml);
       onClose();
     } catch (e) {
-      alert(t('profiles.editRules.saveError') + ': ' + (e instanceof Error ? e.message : String(e)));
+      toast.error(t('profiles.editRules.saveError') + ': ' + (e instanceof Error ? e.message : String(e)));
     }
   }, [prependRules, deletedRules, rules, appendRules, id, onClose, t])
 
@@ -688,7 +689,7 @@ const EditRulesModal: React.FC<Props> = (props) => {
     }
 
     if (newRule.type !== 'MATCH' && newRule.payload.trim() !== '' && !validateRulePayload(newRule.type, newRule.payload)) {
-      alert(t('profiles.editRules.invalidPayload') + ': ' + getRuleExample(newRule.type));
+      toast.error(t('profiles.editRules.invalidPayload') + ': ' + getRuleExample(newRule.type));
       return;
     }
 

src/renderer/src/components/resources/geo-data.tsx

@@ -1,4 +1,5 @@
 import { Button, Input, Switch, Tab, Tabs } from '@heroui/react'
+import { toast } from '@renderer/components/base/toast'
 import SettingCard from '@renderer/components/base/base-setting-card'
 import SettingItem from '@renderer/components/base/base-setting-item'
 import { useControledMihomoConfig } from '@renderer/hooks/use-controled-mihomo-config'
@@ -123,7 +124,7 @@ const GeoData: React.FC = () => {
                 await mihomoUpgradeGeo()
                 new Notification(t('resources.geoData.updateSuccess'))
               } catch (e) {
-                alert(e)
+                toast.error(String(e))
               } finally {
                 setUpdating(false)
               }

src/renderer/src/components/resources/proxy-provider.tsx

@@ -9,6 +9,7 @@ import useSWR from 'swr'
 import SettingCard from '../base/base-setting-card'
 import SettingItem from '../base/base-setting-item'
 import { Button, Chip } from '@heroui/react'
+import { toast } from '@renderer/components/base/toast'
 import { IoMdRefresh } from 'react-icons/io'
 import { CgLoadbarDoc } from 'react-icons/cg'
 import { MdEditDocument } from 'react-icons/md'
@@ -67,7 +68,7 @@ const ProxyProvider: React.FC = () => {
       await mihomoUpdateProxyProviders(name)
       mutate()
     } catch (e) {
-      alert(e)
+      toast.error(String(e))
     } finally {
       setUpdating((prev) => {
         prev[index] = false

src/renderer/src/components/resources/rule-provider.tsx

@@ -10,6 +10,7 @@ import useSWR from 'swr'
 import SettingCard from '../base/base-setting-card'
 import SettingItem from '../base/base-setting-item'
 import { Button, Chip } from '@heroui/react'
+import { toast } from '@renderer/components/base/toast'
 import { IoMdRefresh } from 'react-icons/io'
 import { CgLoadbarDoc } from 'react-icons/cg'
 import { MdEditDocument } from 'react-icons/md'
@@ -71,7 +72,7 @@ const RuleProvider: React.FC = () => {
       await mihomoUpdateRuleProviders(name)
       mutate()
     } catch (e) {
-      alert(e)
+      toast.error(String(e))
     } finally {
       setUpdating((prev) => {
         prev[index] = false

src/renderer/src/components/settings/actions.tsx

@@ -1,5 +1,6 @@
 import { Button, Tooltip } from '@heroui/react'
 import SettingCard from '../base/base-setting-card'
+import { toast } from '@renderer/components/base/toast'
 import SettingItem from '../base/base-setting-item'
 import {
   checkUpdate,
@@ -69,7 +70,7 @@ const Actions: React.FC = () => {
                   })
                 }
               } catch (e) {
-                alert(e)
+                toast.error(String(e))
               } finally {
                 setCheckingUpdate(false)
               }

src/renderer/src/components/settings/general-config.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import SettingCard from '../base/base-setting-card'
+import { toast } from '@renderer/components/base/toast'
 import SettingItem from '../base/base-setting-item'
 import { Button, Input, Select, SelectItem, Switch, Tab, Tabs, Tooltip } from '@heroui/react'
 import { BiCopy, BiSolidFileImport } from 'react-icons/bi'
@@ -105,7 +106,7 @@ const GeneralConfig: React.FC = () => {
               await patchAppConfig({ disableHardwareAcceleration: pendingHardwareAccelValue })
               await relaunchApp()
             } catch (e) {
-              alert(e)
+              toast.error(String(e))
               setIsRelaunching(false)
             }
           }}
@@ -151,7 +152,7 @@ const GeneralConfig: React.FC = () => {
                   await disableAutoRun()
                 }
               } catch (e) {
-                alert(e)
+                toast.error(String(e))
               } finally {
                 mutateEnable()
               }
@@ -248,7 +249,7 @@ const GeneralConfig: React.FC = () => {
                   envType: Array.from(v) as ('bash' | 'cmd' | 'powershell')[]
                 })
               } catch (e) {
-                alert(e)
+                toast.error(String(e))
               }
             }}
           >
@@ -413,7 +414,7 @@ const GeneralConfig: React.FC = () => {
                 await patchAppConfig({ useWindowFrame: v })
                 await relaunchApp()
               } catch (e) {
-                alert(e)
+                toast.error(String(e))
                 setIsRelaunching(false)
               }
             }, 1000)}
@@ -503,7 +504,7 @@ const GeneralConfig: React.FC = () => {
                     await fetchThemes()
                     setCustomThemes(await resolveThemes())
                   } catch (e) {
-                    alert(e)
+                    toast.error(String(e))
                   } finally {
                     setFetching(false)
                   }
@@ -523,7 +524,7 @@ const GeneralConfig: React.FC = () => {
                     await importThemes(files)
                     setCustomThemes(await resolveThemes())
                   } catch (e) {
-                    alert(e)
+                    toast.error(String(e))
                   }
                 }}
               >
@@ -555,7 +556,7 @@ const GeneralConfig: React.FC = () => {
                 try {
                   await patchAppConfig({ customTheme: v.currentKey as string })
                 } catch (e) {
-                  alert(e)
+                  toast.error(String(e))
                 }
               }}
             >

src/renderer/src/components/settings/local-backup-config.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import SettingCard from '../base/base-setting-card'
+import { toast } from '@renderer/components/base/toast'
 import SettingItem from '../base/base-setting-item'
 import { Button, useDisclosure } from '@heroui/react'
 import { exportLocalBackup, importLocalBackup } from '@renderer/utils/ipc'
@@ -22,7 +23,7 @@ const LocalBackupConfig: React.FC = () => {
         })
       }
     } catch (e) {
-      alert(e)
+      toast.error(String(e))
     } finally {
       setExporting(false)
     }
@@ -38,7 +39,7 @@ const LocalBackupConfig: React.FC = () => {
         })
       }
     } catch (e) {
-      alert(t('common.error.importFailed', { error: e }))
+      toast.error(t('common.error.importFailed', { error: e }))
     } finally {
       setImporting(false)
       onClose()

src/renderer/src/components/settings/mihomo-config.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import SettingCard from '../base/base-setting-card'
+import { toast } from '@renderer/components/base/toast'
 import SettingItem from '../base/base-setting-item'
 import { Button, Input, Select, SelectItem, Switch, Tooltip } from '@heroui/react'
 import { useAppConfig } from '@renderer/hooks/use-app-config'
@@ -122,7 +123,7 @@ const MihomoConfig: React.FC = () => {
                   await navigator.clipboard.writeText(`${url}/raw/clash-party.yaml`)
                 }
               } catch (e) {
-                alert(e)
+                toast.error(String(e))
               }
             }}
           >
@@ -176,7 +177,7 @@ const MihomoConfig: React.FC = () => {
                 })
                 await restartCore()
               } catch (e) {
-                alert(e)
+                toast.error(String(e))
               }
             }}
           >
@@ -208,7 +209,7 @@ const MihomoConfig: React.FC = () => {
               await patchAppConfig({ diffWorkDir: v })
               await restartCore()
             } catch (e) {
-              alert(e)
+              toast.error(String(e))
             }
           }}
         />

src/renderer/src/components/settings/shortcut-config.tsx

@@ -1,5 +1,6 @@
 import { Button, Input } from '@heroui/react'
 import SettingCard from '../base/base-setting-card'
+import { toast } from '@renderer/components/base/toast'
 import SettingItem from '../base/base-setting-item'
 import { useAppConfig } from '@renderer/hooks/use-app-config'
 import React, { KeyboardEvent, useState } from 'react'
@@ -213,10 +214,10 @@ const ShortcutInput: React.FC<{
                 await patchAppConfig({ [action]: inputValue })
                 window.electron.ipcRenderer.send('updateTrayMenu')
               } else {
-                alert(t('common.error.shortcutRegistrationFailed'))
+                toast.error(t('common.error.shortcutRegistrationFailed'))
               }
             } catch (e) {
-              alert(t('common.error.shortcutRegistrationFailedWithError', { error: e }))
+              toast.error(t('common.error.shortcutRegistrationFailedWithError', { error: e }))
             }
           }}
         >

src/renderer/src/components/settings/substore-config.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import SettingCard from '@renderer/components/base/base-setting-card'
+import { toast } from '@renderer/components/base/toast'
 import SettingItem from '@renderer/components/base/base-setting-item'
 import { Button, Input, Switch } from '@heroui/react'
 import {
@@ -55,7 +56,7 @@ const SubStoreConfig: React.FC = () => {
                 await stopSubStoreBackendServer()
               }
             } catch (e) {
-              alert(e)
+              toast.error(String(e))
             }
           }}
         />
@@ -76,7 +77,7 @@ const SubStoreConfig: React.FC = () => {
                   await startSubStoreFrontendServer()
                   await startSubStoreBackendServer()
                 } catch (e) {
-                  alert(e)
+                  toast.error(String(e))
                 }
               }}
             />
@@ -94,7 +95,7 @@ const SubStoreConfig: React.FC = () => {
                     await startSubStoreBackendServer()
                   }
                 } catch (e) {
-                  alert(e)
+                  toast.error(String(e))
                 }
               }}
             />
@@ -123,7 +124,7 @@ const SubStoreConfig: React.FC = () => {
                       await patchAppConfig({ useProxyInSubStore: v })
                       await startSubStoreBackendServer()
                     } catch (e) {
-                      alert(e)
+                      toast.error(String(e))
                     }
                   }}
                 />
@@ -144,7 +145,7 @@ const SubStoreConfig: React.FC = () => {
                           })
                           new Notification(t('common.notification.restartRequired'))
                         } else {
-                          alert(t('common.error.invalidCron'))
+                          toast.warning(t('common.error.invalidCron'))
                         }
                       }}
                     >
@@ -177,7 +178,7 @@ const SubStoreConfig: React.FC = () => {
                           })
                           new Notification(t('common.notification.restartRequired'))
                         } else {
-                          alert(t('common.error.invalidCron'))
+                          toast.warning(t('common.error.invalidCron'))
                         }
                       }}
                     >
@@ -210,7 +211,7 @@ const SubStoreConfig: React.FC = () => {
                           })
                           new Notification(t('common.notification.restartRequired'))
                         } else {
-                          alert(t('common.error.invalidCron'))
+                          toast.warning(t('common.error.invalidCron'))
                         }
                       }}
                     >

src/renderer/src/components/settings/webdav-config.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import SettingCard from '../base/base-setting-card'
+import { toast } from '@renderer/components/base/toast'
 import SettingItem from '../base/base-setting-item'
 import { Button, Input, Select, SelectItem } from '@heroui/react'
 import { listWebdavBackups, webdavBackup, reinitWebdavBackupScheduler } from '@renderer/utils/ipc'
@@ -47,7 +48,7 @@ const WebdavConfig: React.FC = () => {
         body: t('webdav.notification.backupSuccess.body')
       })
     } catch (e) {
-      alert(e)
+      toast.error(String(e))
     } finally {
       setBackuping(false)
     }
@@ -60,7 +61,7 @@ const WebdavConfig: React.FC = () => {
       setFilenames(filenames)
       setRestoreOpen(true)
     } catch (e) {
-      alert(t('common.error.getBackupListFailed', { error: e }))
+      toast.error(t('common.error.getBackupListFailed', { error: e }))
     } finally {
       setRestoring(false)
     }
@@ -156,7 +157,7 @@ const WebdavConfig: React.FC = () => {
                       new Notification(t('webdav.notification.cronUpdateFailed'))
                     }
                   } else {
-                    alert(t('common.error.invalidCron'))
+                    toast.warning(t('common.error.invalidCron'))
                   }
                 }}
               >

src/renderer/src/components/settings/webdav-restore-modal.tsx

@@ -1,4 +1,5 @@
 import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button } from '@heroui/react'
+import { toast } from '@renderer/components/base/toast'
 import { relaunchApp, webdavDelete, webdavRestore } from '@renderer/utils/ipc'
 import React, { useState } from 'react'
 import { MdDeleteForever } from 'react-icons/md'
@@ -43,7 +44,7 @@ const WebdavRestoreModal: React.FC<Props> = (props) => {
                       await webdavRestore(filename)
                       await relaunchApp()
                     } catch (e) {
-                      alert(t('common.error.restoreFailed', { error: e }))
+                      toast.error(t('common.error.restoreFailed', { error: e }))
                     } finally {
                       setRestoring(false)
                     }
@@ -61,7 +62,7 @@ const WebdavRestoreModal: React.FC<Props> = (props) => {
                       await webdavDelete(filename)
                       setFilenames(filenames.filter((name) => name !== filename))
                     } catch (e) {
-                      alert(t('common.error.deleteFailed', { error: e }))
+                      toast.error(t('common.error.deleteFailed', { error: e }))
                     }
                   }}
                 >

src/renderer/src/components/sider/dns-card.tsx

@@ -1,4 +1,5 @@
 import { Button, Card, CardBody, CardFooter, Tooltip } from '@heroui/react'
+import { toast } from '@renderer/components/base/toast'
 import { useControledMihomoConfig } from '@renderer/hooks/use-controled-mihomo-config'
 import BorderSwitch from '@renderer/components/base/border-swtich'
 import { LuServer } from 'react-icons/lu'
@@ -39,7 +40,7 @@ const DNSCard: React.FC<Props> = (props) => {
       await patchControledMihomoConfig({})
       await restartCore()
     } catch (e) {
-      alert(e)
+      toast.error(String(e))
     }
   }
 

src/renderer/src/components/sider/mihomo-core-card.tsx

@@ -1,4 +1,5 @@
 import { Button, Card, CardBody, CardFooter, Tooltip } from '@heroui/react'
+import { toast } from '@renderer/components/base/toast'
 import { calcTraffic } from '@renderer/utils/calc'
 import { mihomoVersion, restartCore } from '@renderer/utils/ipc'
 import React, { useEffect, useState } from 'react'
@@ -112,7 +113,7 @@ const MihomoCoreCard: React.FC<Props> = (props) => {
                   try {
                     await restartCore()
                   } catch (e) {
-                    alert(e)
+                    toast.error(String(e))
                   } finally {
                     mutate()
                   }

src/renderer/src/components/sider/sniff-card.tsx

@@ -1,4 +1,5 @@
 import { Button, Card, CardBody, CardFooter, Tooltip } from '@heroui/react'
+import { toast } from '@renderer/components/base/toast'
 import BorderSwitch from '@renderer/components/base/border-swtich'
 import { RiScan2Fill } from 'react-icons/ri'
 import { useLocation, useNavigate } from 'react-router-dom'
@@ -39,7 +40,7 @@ const SniffCard: React.FC<Props> = (props) => {
       await patchControledMihomoConfig({})
       await restartCore()
     } catch (e) {
-      alert(e)
+      toast.error(String(e))
     }
   }
 

src/renderer/src/components/sider/sysproxy-switcher.tsx

@@ -1,4 +1,5 @@
 import { Button, Card, CardBody, CardFooter, Tooltip } from '@heroui/react'
+import { toast } from '@renderer/components/base/toast'
 import BorderSwitch from '@renderer/components/base/border-swtich'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { useAppConfig } from '@renderer/hooks/use-app-config'
@@ -54,7 +55,7 @@ const SysproxySwitcher: React.FC<Props> = (props) => {
       await patchAppConfig({ sysProxy: { enable: previousState } })
       // 回滚图标
       updateTrayIconImmediate(previousState, tunEnabled)
-      alert(e)
+      toast.error(String(e))
     }
   }
 

src/renderer/src/components/updater/updater-modal.tsx

@@ -1,12 +1,5 @@
-import {
+import { Button, Code, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@heroui/react'
-  Modal,
+import { toast } from '@renderer/components/base/toast'
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-  Button,
-  Code
-} from '@heroui/react'
 import ReactMarkdown from 'react-markdown'
 import React, { useState } from 'react'
 import { downloadAndInstallUpdate } from '@renderer/utils/ipc'
@@ -27,7 +20,7 @@ const UpdaterModal: React.FC<Props> = (props) => {
     try {
       await downloadAndInstallUpdate(version)
     } catch (e) {
-      alert(e)
+      toast.error(String(e))
     }
   }
 
@@ -82,7 +75,7 @@ const UpdaterModal: React.FC<Props> = (props) => {
                 await onUpdate()
                 onClose()
               } catch (e) {
-                alert(e)
+                toast.error(String(e))
               } finally {
                 setDownloading(false)
               }

src/renderer/src/hooks/use-app-config.tsx

@@ -1,4 +1,5 @@
 import React, { createContext, useContext, ReactNode } from 'react'
+import { toast } from '@renderer/components/base/toast'
 import useSWR from 'swr'
 import { getAppConfig, patchAppConfig as patch } from '@renderer/utils/ipc'
 
@@ -17,7 +18,7 @@ export const AppConfigProvider: React.FC<{ children: ReactNode }> = ({ children
     try {
       await patch(value)
     } catch (e) {
-      alert(e)
+      toast.error(String(e))
     } finally {
       mutateAppConfig()
     }

src/renderer/src/hooks/use-controled-mihomo-config.tsx

@@ -1,4 +1,5 @@
 import React, { createContext, useContext, ReactNode } from 'react'
+import { toast } from '@renderer/components/base/toast'
 import useSWR from 'swr'
 import { getControledMihomoConfig, patchControledMihomoConfig as patch } from '@renderer/utils/ipc'
 
@@ -22,7 +23,7 @@ export const ControledMihomoConfigProvider: React.FC<{ children: ReactNode }> =
     try {
       await patch(value)
     } catch (e) {
-      alert(e)
+      toast.error(String(e))
     } finally {
       mutateControledMihomoConfig()
     }

src/renderer/src/hooks/use-override-config.tsx

@@ -1,4 +1,5 @@
 import React, { createContext, useContext, ReactNode } from 'react'
+import { toast } from '@renderer/components/base/toast'
 import useSWR from 'swr'
 import {
   getOverrideConfig,
@@ -28,7 +29,7 @@ export const OverrideConfigProvider: React.FC<{ children: ReactNode }> = ({ chil
     try {
       await set(config)
     } catch (e) {
-      alert(e)
+      toast.error(String(e))
     } finally {
       mutateOverrideConfig()
     }
@@ -38,7 +39,7 @@ export const OverrideConfigProvider: React.FC<{ children: ReactNode }> = ({ chil
     try {
       await add(item)
     } catch (e) {
-      alert(e)
+      toast.error(String(e))
     } finally {
       mutateOverrideConfig()
     }
@@ -48,7 +49,7 @@ export const OverrideConfigProvider: React.FC<{ children: ReactNode }> = ({ chil
     try {
       await remove(id)
     } catch (e) {
-      alert(e)
+      toast.error(String(e))
     } finally {
       mutateOverrideConfig()
     }
@@ -58,7 +59,7 @@ export const OverrideConfigProvider: React.FC<{ children: ReactNode }> = ({ chil
     try {
       await update(item)
     } catch (e) {
-      alert(e)
+      toast.error(String(e))
     } finally {
       mutateOverrideConfig()
     }

src/renderer/src/hooks/use-profile-config.tsx

@@ -1,4 +1,5 @@
 import React, { createContext, ReactNode, useContext } from 'react'
+import { toast } from '@renderer/components/base/toast'
 import useSWR from 'swr'
 import {
   addProfileItem as add,
@@ -32,7 +33,7 @@ export const ProfileConfigProvider: React.FC<{ children: ReactNode }> = ({ child
     try {
       await set(config)
     } catch (e) {
-      alert(e)
+      toast.error(String(e))
     } finally {
       mutateProfileConfig()
       window.electron.ipcRenderer.send('updateTrayMenu')
@@ -43,7 +44,7 @@ export const ProfileConfigProvider: React.FC<{ children: ReactNode }> = ({ child
     try {
       await add(item)
     } catch (e) {
-      alert(e)
+      toast.error(String(e))
     } finally {
       mutateProfileConfig()
       window.electron.ipcRenderer.send('updateTrayMenu')
@@ -54,7 +55,7 @@ export const ProfileConfigProvider: React.FC<{ children: ReactNode }> = ({ child
     try {
       await remove(id)
     } catch (e) {
-      alert(e)
+      toast.error(String(e))
     } finally {
       mutateProfileConfig()
       window.electron.ipcRenderer.send('updateTrayMenu')
@@ -65,7 +66,7 @@ export const ProfileConfigProvider: React.FC<{ children: ReactNode }> = ({ child
     try {
       await update(item)
     } catch (e) {
-      alert(e)
+      toast.error(String(e))
     } finally {
       mutateProfileConfig()
       window.electron.ipcRenderer.send('updateTrayMenu')
@@ -107,7 +108,7 @@ export const ProfileConfigProvider: React.FC<{ children: ReactNode }> = ({ child
         if (errorMsg.includes('reply was never sent')) {
           setTimeout(() => mutateProfileConfig(), 1000)
         } else {
-          alert(`切换 Profile 失败: ${errorMsg}`)
+          toast.error(errorMsg, '切换配置失败')
           mutateProfileConfig()
         }
       } finally {

src/renderer/src/main.tsx

@@ -14,6 +14,7 @@ import { OverrideConfigProvider } from './hooks/use-override-config'
 import { ProfileConfigProvider } from './hooks/use-profile-config'
 import { RulesProvider } from './hooks/use-rules'
 import { GroupsProvider } from './hooks/use-groups'
+import { ToastProvider } from './components/base/toast'
 import './i18n'
 
 let F12Count = 0
@@ -53,7 +54,9 @@ init().then(() => {
                     <OverrideConfigProvider>
                       <GroupsProvider>
                         <RulesProvider>
-                          <App />
+                          <ToastProvider>
+                            <App />
+                          </ToastProvider>
                         </RulesProvider>
                       </GroupsProvider>
                     </OverrideConfigProvider>

src/renderer/src/pages/connections.tsx

@@ -1,6 +1,6 @@
 import BasePage from '@renderer/components/base/base-page'
 import { mihomoCloseAllConnections, mihomoCloseConnection } from '@renderer/utils/ipc'
-import { Key, useCallback, useEffect, useMemo, useState } from 'react'
+import { Key, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Badge, Button, Divider, Input, Select, SelectItem, Tab, Tabs } from '@heroui/react'
 import { calcTraffic } from '@renderer/utils/calc'
 import ConnectionItem from '@renderer/components/connections/connection-item'
@@ -48,6 +48,22 @@ const Connections: React.FC = () => {
   const [viewMode, setViewMode] = useState<'list' | 'table'>(connectionViewMode)
   const [visibleColumns, setVisibleColumns] = useState<Set<string>>(new Set(connectionTableColumns))
 
+  const activeConnectionsRef = useRef(activeConnections)
+  const allConnectionsRef = useRef(allConnections)
+  useEffect(() => {
+    activeConnectionsRef.current = activeConnections
+    allConnectionsRef.current = allConnections
+  }, [activeConnections, allConnections])
+
+  const selectedConnection = useMemo(() => {
+    if (!selected) return undefined
+    return (
+      activeConnections.find((c) => c.id === selected.id) ||
+      closedConnections.find((c) => c.id === selected.id) ||
+      selected
+    )
+  }, [selected, activeConnections, closedConnections])
+
   const handleColumnWidthChange = useCallback(async (widths: Record<string, number>) => {
     await patchAppConfig({ connectionTableColumnWidths: widths })
   }, [patchAppConfig])
@@ -98,71 +114,80 @@ const Connections: React.FC = () => {
 
   const closeAllConnections = useCallback((): void => {
     tab === 'active' ? mihomoCloseAllConnections() : trashAllClosedConnection()
-  }, [tab, closedConnections])
+  }, [tab])
 
   const closeConnection = useCallback((id: string): void => {
     tab === 'active' ? mihomoCloseConnection(id) : trashClosedConnection(id)
   }, [tab])
 
   const trashAllClosedConnection = (): void => {
-    const trashIds = closedConnections.map((conn) => conn.id)
+    setClosedConnections((closedConns) => {
-    setAllConnections((allConns) => allConns.filter((conn) => !trashIds.includes(conn.id)))
+      const trashIds = new Set(closedConns.map((conn) => conn.id))
-    setClosedConnections([])
+      setAllConnections((allConns) => {
-
+        const filtered = allConns.filter((conn) => !trashIds.has(conn.id))
-    cachedConnections = allConnections
+        cachedConnections = filtered
+        return filtered
+      })
+      return []
+    })
   }
 
   const trashClosedConnection = (id: string): void => {
-    setAllConnections((allConns) => allConns.filter((conn) => conn.id != id))
+    setAllConnections((allConns) => {
-    setClosedConnections((closedConns) => closedConns.filter((conn) => conn.id != id))
+      const filtered = allConns.filter((conn) => conn.id !== id)
-
+      cachedConnections = filtered
-    cachedConnections = allConnections
+      return filtered
+    })
+    setClosedConnections((closedConns) => closedConns.filter((conn) => conn.id !== id))
   }
 
   useEffect(() => {
-    if (isPaused) return
+    const handler = (_e: unknown, info: IMihomoConnectionsInfo): void => {
-    window.electron.ipcRenderer.on('mihomoConnections', (_e, info: IMihomoConnectionsInfo) => {
       setConnectionsInfo(info)
 
       if (!info.connections) return
-      const allConns = unionWith(activeConnections, allConnections, (a, b) => a.id === b.id)
+      const allConns = unionWith(
+        activeConnectionsRef.current,
+        allConnectionsRef.current,
+        (a, b) => a.id === b.id
+      )
 
+      const prevConnMap = new Map(activeConnectionsRef.current.map((c) => [c.id, c]))
       const activeConns = info.connections.map((conn) => {
-        const preConn = activeConnections.find((c) => c.id === conn.id)
+        const preConn = prevConnMap.get(conn.id)
-        const downloadSpeed = preConn ? conn.download - preConn.download : 0
-        const uploadSpeed = preConn ? conn.upload - preConn.upload : 0
         return {
           ...conn,
           isActive: true,
-          downloadSpeed: downloadSpeed,
+          downloadSpeed: preConn ? conn.download - preConn.download : 0,
-          uploadSpeed: uploadSpeed
+          uploadSpeed: preConn ? conn.upload - preConn.upload : 0
         }
       })
       const closedConns = differenceWith(allConns, activeConns, (a, b) => a.id === b.id).map(
-        (conn) => {
+        (conn) => ({
-          return {
+          ...conn,
-            ...conn,
+          isActive: false,
-            isActive: false,
+          downloadSpeed: 0,
-            downloadSpeed: 0,
+          uploadSpeed: 0
-            uploadSpeed: 0
+        })
-          }
-        }
       )
 
       setActiveConnections(activeConns)
       setClosedConnections(closedConns)
       setAllConnections(allConns.slice(-(activeConns.length + 200)))
+      cachedConnections = allConns
+    }
 
-      cachedConnections = allConnections
+    if (!isPaused) {
-    })
+      window.electron.ipcRenderer.on('mihomoConnections', handler)
+    }
 
     return (): void => {
       window.electron.ipcRenderer.removeAllListeners('mihomoConnections')
     }
-  }, [allConnections, activeConnections, closedConnections, isPaused])
+  }, [isPaused])
-  const togglePause = () => {
+  const togglePause = useCallback(() => {
-    setIsPaused(!isPaused)
+    setIsPaused((prev) => !prev)
-  }
+  }, [])
 
   return (
     <BasePage
@@ -182,7 +207,7 @@ const Connections: React.FC = () => {
             color="primary"
             variant="flat"
             showOutline={false}
-            content={`${filteredConnections.length}`}
+            content={filteredConnections.length}
           >
             <Button
               className="app-nodrag ml-1"
@@ -230,14 +255,14 @@ const Connections: React.FC = () => {
         </div>
       }
     >
-      {isDetailModalOpen && selected && (
+      {isDetailModalOpen && selectedConnection && (
-        <ConnectionDetailModal onClose={() => setIsDetailModalOpen(false)} connection={selected} />
+        <ConnectionDetailModal onClose={() => setIsDetailModalOpen(false)} connection={selectedConnection} />
       )}
       <div className="overflow-x-auto sticky top-0 z-40">
         <div className="flex p-2 gap-2">
           <Tabs
             size="sm"
-            color={`${tab === 'active' ? 'primary' : 'danger'}`}
+            color={tab === 'active' ? 'primary' : 'danger'}
             selectedKey={tab}
             variant="underlined"
             className="w-fit h-[32px]"
@@ -249,7 +274,7 @@ const Connections: React.FC = () => {
               key="active"
               title={
                 <Badge
-                  color={`${tab === 'active' ? 'primary' : 'default'}`}
+                  color={tab === 'active' ? 'primary' : 'default'}
                   size="sm"
                   shape="circle"
                   variant="flat"
@@ -264,7 +289,7 @@ const Connections: React.FC = () => {
               key="closed"
               title={
                 <Badge
-                  color={`${tab === 'closed' ? 'danger' : 'default'}`}
+                  color={tab === 'closed' ? 'danger' : 'default'}
                   size="sm"
                   shape="circle"
                   variant="flat"
@@ -339,7 +364,7 @@ const Connections: React.FC = () => {
                 size="sm"
                 className="w-[180px] min-w-[131px]"
                 aria-label={t('connections.orderBy')}
-                selectedKeys={new Set([connectionOrderBy])}
+                selectedKeys={[connectionOrderBy]}
                 disallowEmptySelection={true}
                 onSelectionChange={async (v) => {
                   await patchAppConfig({
@@ -362,7 +387,7 @@ const Connections: React.FC = () => {
                 size="sm"
                 isIconOnly
                 className="bg-content2"
-                onPress={async () => {
+                onPress={() => {
                   patchAppConfig({
                     connectionDirection: connectionDirection === 'asc' ? 'desc' : 'asc'
                   })
@@ -387,7 +412,6 @@ const Connections: React.FC = () => {
               <ConnectionItem
                 setSelected={setSelected}
                 setIsDetailModalOpen={setIsDetailModalOpen}
-                selected={selected}
                 close={closeConnection}
                 index={i}
                 key={connection.id}

src/renderer/src/pages/dns.tsx

@@ -1,5 +1,6 @@
 import { Button, Tab, Input, Switch, Tabs, Divider } from '@heroui/react'
 import BasePage from '@renderer/components/base/base-page'
+import { toast } from '@renderer/components/base/toast'
 import { MdDeleteForever } from 'react-icons/md'
 import SettingCard from '@renderer/components/base/base-setting-card'
 import SettingItem from '@renderer/components/base/base-setting-item'
@@ -145,7 +146,7 @@ const DNS: React.FC = () => {
         await restartCore()
       }
     } catch (e) {
-      alert(e)
+      toast.error(String(e))
     }
   }
 

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
-              <LogItem
+              index={i}
-                index={i}
+              time={log.time}
-                key={log.payload + i}
+              type={log.type}
-                time={log.time}
+              payload={log.payload}
-                type={log.type}
+            />
-                payload={log.payload}
+          )}
-              />
-            )
-          }}
         />
       </div>
     </BasePage>

src/renderer/src/pages/mihomo.tsx

@@ -1,5 +1,6 @@
 import { Button, Divider, Input, Select, SelectItem, Switch, Tooltip, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure, Spinner, Chip } from '@heroui/react'
 import BasePage from '@renderer/components/base/base-page'
+import { toast } from '@renderer/components/base/toast'
 import SettingCard from '@renderer/components/base/base-setting-card'
 import SettingItem from '@renderer/components/base/base-setting-item'
 import { useAppConfig } from '@renderer/hooks/use-app-config'
@@ -44,10 +45,6 @@ const Mihomo: React.FC = () => {
     smartCollectorSize = 100,
     maxLogDays = 7,
     sysProxy,
-    disableLoopbackDetector,
-    disableEmbedCA,
-    disableSystemCA,
-    skipSafePathCheck,
     showMixedPort,
     enableMixedPort = true,
     showSocksPort,
@@ -312,7 +309,7 @@ const Mihomo: React.FC = () => {
       if (errorMessage.includes('配置检查失败') || errorMessage.includes('Profile Check Failed')) {
         await showDetailedError(t('mihomo.error.profileCheckFailed'), errorMessage)
       } else {
-        alert(errorMessage)
+        toast.error(errorMessage)
       }
     } finally {
       PubSub.publish('mihomo-core-changed')
@@ -328,7 +325,7 @@ const Mihomo: React.FC = () => {
     } catch (error) {
       console.error('Failed to fetch tags:', error)
       setTags([])
-      alert(t('mihomo.error.fetchTagsFailed'))
+      toast.error(t('mihomo.error.fetchTagsFailed'))
     } finally {
       setLoadingTags(false)
     }
@@ -359,7 +356,7 @@ const Mihomo: React.FC = () => {
       new Notification(t('mihomo.coreUpgradeSuccess'))
     } catch (error) {
       console.error('Failed to install specific core:', error)
-      alert(t('mihomo.error.installCoreFailed'))
+      toast.error(t('mihomo.error.installCoreFailed'))
     } finally {
       setInstalling(false)
     }
@@ -497,7 +494,7 @@ const Mihomo: React.FC = () => {
                         if (typeof e === 'string' && e.includes('already using latest version')) {
                           new Notification(t('mihomo.alreadyLatestVersion'))
                         } else {
-                          alert(e)
+                          toast.error(String(e))
                         }
                       } finally {
                         setUpgrading(false)

src/renderer/src/pages/override.tsx

@@ -8,6 +8,7 @@ import {
   Input
 } from '@heroui/react'
 import BasePage from '@renderer/components/base/base-page'
+import { toast } from '@renderer/components/base/toast'
 import { getFilePath, readTextFile } from '@renderer/utils/ipc'
 import { useEffect, useRef, useState } from 'react'
 import { MdContentPaste } from 'react-icons/md'
@@ -75,18 +76,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 +106,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 +116,20 @@ const Override: React.FC = () => {
             setFileOver(false)
           }
         } else {
-          alert(t('override.unsupportedFileType'))
+          toast.warning(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)
     }
   }, [])
 
@@ -206,7 +223,7 @@ const Override: React.FC = () => {
                       })
                     }
                   } catch (e) {
-                    alert(e)
+                    toast.error(String(e))
                   }
                 } else if (key === 'new-yaml') {
                   await addOverrideItem({

src/renderer/src/pages/profiles.tsx

@@ -11,6 +11,7 @@ import {
   Tooltip
 } from '@heroui/react'
 import BasePage from '@renderer/components/base/base-page'
+import { toast } from '@renderer/components/base/toast'
 import ProfileItem from '@renderer/components/profiles/profile-item'
 import { useProfileConfig } from '@renderer/hooks/use-profile-config'
 import { useAppConfig } from '@renderer/hooks/use-app-config'
@@ -156,26 +157,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 +196,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)
+            toast.error(String(e))
           }
         } else {
-          alert(t('profiles.error.unsupportedFileType'))
+          toast.warning(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)
     }
   }, [])
 
@@ -329,7 +346,7 @@ const Profiles: React.FC = () => {
                         useProxy
                       })
                     } catch (e) {
-                      alert(e)
+                      toast.error(String(e))
                     } finally {
                       setSubStoreImporting(false)
                     }
@@ -350,7 +367,7 @@ const Profiles: React.FC = () => {
                         useProxy
                       })
                     } catch (e) {
-                      alert(e)
+                      toast.error(String(e))
                     } finally {
                       setSubStoreImporting(false)
                     }
@@ -382,7 +399,7 @@ const Profiles: React.FC = () => {
                         await addProfileItem({ name: fileName, type: 'local', file: content })
                       }
                     } catch (e) {
-                      alert(e)
+                      toast.error(String(e))
                     }
                   } else if (key === 'new') {
                     await addProfileItem({

src/renderer/src/pages/sniffer.tsx

@@ -1,5 +1,6 @@
 import { Button, Divider, Input, Switch } from '@heroui/react'
 import BasePage from '@renderer/components/base/base-page'
+import { toast } from '@renderer/components/base/toast'
 import SettingCard from '@renderer/components/base/base-setting-card'
 import SettingItem from '@renderer/components/base/base-setting-item'
 import { useControledMihomoConfig } from '@renderer/hooks/use-controled-mihomo-config'
@@ -70,7 +71,7 @@ const Sniffer: React.FC = () => {
         await restartCore()
       }
     } catch (e) {
-      alert(e)
+      toast.error(String(e))
     }
   }
 

src/renderer/src/pages/sysproxy.tsx

@@ -1,5 +1,6 @@
 import { Button, Input, Tab, Tabs } from '@heroui/react'
 import BasePage from '@renderer/components/base/base-page'
+import { toast } from '@renderer/components/base/toast'
 import SettingCard from '@renderer/components/base/base-setting-card'
 import SettingItem from '@renderer/components/base/base-setting-item'
 import PacEditorModal from '@renderer/components/sysproxy/pac-editor-modal'
@@ -105,7 +106,7 @@ const Sysproxy: React.FC = () => {
     } catch (e) {
       setValues({ ...values, enable: previousState })
       setChanged(true)
-      alert(e)
+      toast.error(String(e))
 
       await patchAppConfig({ sysProxy: { enable: false } })
     }

src/renderer/src/pages/tun.tsx

@@ -1,5 +1,6 @@
 import { Button, Input, Switch, Tab, Tabs } from '@heroui/react'
 import BasePage from '@renderer/components/base/base-page'
+import { toast } from '@renderer/components/base/toast'
 import SettingCard from '@renderer/components/base/base-setting-card'
 import SettingItem from '@renderer/components/base/base-setting-item'
 import { useControledMihomoConfig } from '@renderer/hooks/use-controled-mihomo-config'
@@ -112,7 +113,7 @@ const Tun: React.FC = () => {
                     new Notification(t('tun.notifications.firewallResetSuccess'))
                     await restartCore()
                   } catch (e) {
-                    alert(e)
+                    toast.error(String(e))
                   } finally {
                     setLoading(false)
                   }
@@ -133,7 +134,7 @@ const Tun: React.FC = () => {
                     new Notification(t('tun.notifications.coreAuthSuccess'))
                     await restartCore()
                   } catch (e) {
-                    alert(e)
+                    toast.error(String(e))
                   }
                 }}
               >

src/renderer/src/utils/ipc.ts

@@ -556,10 +556,3 @@ export async function getRuleStr(id: string): Promise<string> {
 export async function setRuleStr(id: string, str: string): Promise<void> {
   return ipcErrorWrapper(await window.electron.ipcRenderer.invoke('setRuleStr', id, str))
 }
-
-async function alert<T>(msg: T): Promise<void> {
-  const msgStr = typeof msg === 'string' ? msg : JSON.stringify(msg)
-  return await window.electron.ipcRenderer.invoke('alert', msgStr)
-}
-
-window.alert = alert