refactor: frontend cleanup (#8447)

* docs(agents): add frontend liveness constraints Add six liveness rules to the frontend guardrails covering dead state, unused exposed surface, unreachable fallback paths, duplicate side effects per interaction, unreachable mounts and unbounded resource lifecycles. These target defect classes that the existing CI gates (knip, eslint, arch:check) cannot detect mechanically. * refactor(frontend): remove dead states, refs and unreachable branches Drop state that can only hold its initial value (profiles page disabled flag, traffic graph currentFPS), a write-only window controls ref with its unconsumed imperative handle, a no-op appendData ref method, an unreachable gradient branch, an invisible fadeIn shell, constant-true subexpressions in the system info card, an empty click handler and a pointless useMemo. * refactor(frontend): drop unused params, props and api surface Remove the never-read _revalidate argument of mutateVerge and its 16 call-site placeholders, seven never-passed props of the split chip editor, the unconsumed refreshDecorated context member, the now-orphaned toggleFullscreen control, the unused translate argument of the notice message handler, the reserved-but-unset ServiceConfig.timeout field and unreachable branches in parseNoticeExtras. * refactor(types): remove dead provider view types superseded by bindings Drop the handwritten IProxyProviderItem and IRuleProviderItem interfaces: IProxyProviderItem is a stale duplicate of the generated ProxyProviderView contract, and neither has any references left in the tree. Keep IProxyItem and IProxyGroupItem: IConfigData still declares 'proxy-groups'?: IProxyGroupItem[], which builds on IProxyItem. * fix(rules): refresh once per visibility trigger The mount effect fired refreshRules and refreshRuleProviders unconditionally and again under the page-visible flag, double-firing both queries on mount and on every hide-to-show transition. Gate the refresh on visibility once so each trigger performs exactly one revalidation. * fix(setting): write auto launch patch once per toggle GuardState applies the optimistic onChange write before onGuard runs, so repeating the same onChangeData patch inside the guard handler duplicated every cache write and subscriber notification for the auto launch switch. * fix(setting): build viewer form defaults from a single source sysproxy, misc and tunnels viewers duplicated their form default literals in useState and open(), and the two copies in misc-viewer had already diverged (app log max size, app log max count, auto log clean). Extract a buildInitialValues factory per viewer and unify on the open() values, which are the only ones users could ever see. * fix(setting): mount only reachable proxy control viewers ProxyControlSwitches unconditionally mounted both SysproxyViewer and TunViewer while its switch rows are mutually exclusive, so every instance carried a dialog that could never open, each firing getEmbeddedServerPort or a clash query subscription on mount. Mount each viewer under the same condition as the switch row that opens it. SettingSystem also mounted its own SysproxyViewer and TunViewer whose refs were never opened there; the reachable entries are the ProxyControlSwitches rows, so the dead pair is removed. Viewer mounts across the app drop from eight (setting-system: two own + two per instance, proxy-tun-card: two) to three (one per rendered switch variant). * fix(delay): write pending state once per node in batch checks checkListDelay pre-marked every node as checking, help() re-marked it when picked up and measureDelay marked it a third time on entry, so each batch run queued three identical pending updates per node. Keep the pre-mark (immediate feedback for queued nodes) and drop the redundant marks along the chain. * fix(services): make retries viable and align polling freshness window Share no abort signal across retry attempts: after a timeout abort the old signal stays dead and every later fetch rejects immediately, so retries only burned backoff time. Also drop the system state query's staleTime: the wrapper maps it to SWR's dedupingInterval, which swallowed every other 3s poll tick while it exceeded the interval. * refactor(traffic): drop unreachable inline monitor fallback The inline traffic monitor duplicated the worker's message loop, snapshot throttling and aging logic but only runs when Worker is undefined or its constructor throws, which no supported Tauri webview or browser hits. Keep the worker as the single implementation and remove the mode switch and the pending-message queue that could only ever buffer the init message. * refactor(shared): replace the traffic error boundary with ErrorBoundary TrafficErrorBoundary maintained a second boundary system beside BaseErrorBoundary: a report builder that only console.logged constants in the Tauri webview, an onError that re-logged what componentDidCatch already logged, and a fallback wrapper with a single consumer. Fold both mount points into react-error-boundary (the primitive behind BaseErrorBoundary) with local fallbacks that keep the panel styling, message text and retry reset, log each error once, and drop the retry attempt cap and the stack-details collapse along with it. * refactor(hooks): drop the write-only error channel and key-rotating refresh The mihomo ws subscription's next callback accepted an error half that baseNext silently discarded while traffic, memory and log consumers kept constructing fallback payloads for it. Refresh minted a fresh SWR key per call via a localStorage timestamp, abandoning old keys in the cache forever. Reduce next to its data half and reset the snapshot under a stable key instead. * refactor(hooks): trim dead surface from proxy selection Drop the connection-cleanup option nobody ever disabled (behavior now unconditional), the returned changeProxy no consumer called and the two one-caller argument adapters; both call sites use the shared select entry directly. * refactor(services): drop the bespoke retry engine from the query wrapper The custom onErrorRetry existed only to honor a function-form retryDelay, which exactly one caller (the app data provider) used for exponential backoff. Fall back to SWR's built-in error retry and express that caller's cadence with constant options.
2026-11-06 09:02:08 +08:00 · 2026-11-03 10:48:45 +00:00
parent 8039feb270
commit 40fd1d5012
47 changed files with 373 additions and 1067 deletions
@@ -22,23 +22,16 @@ interface BaseSplitChipEditorProps {
  error?: boolean
  helperText?: ReactNode
  placeholder?: string
-  rows?: number
  separator?: string
-  splitPattern?: RegExp
-  defaultMode?: BaseSplitChipEditorMode
-  showModeToggle?: boolean
  ariaLabel?: string
-  addLabel?: ReactNode
-  emptyLabel?: ReactNode
-  modeLabels?: Partial<Record<BaseSplitChipEditorMode, ReactNode>>
  renderHeader?: (modeToggle: ReactNode) => ReactNode
 }

 const DEFAULT_SPLIT_PATTERN = /[,\n;\r]+/

-const splitValue = (value: string, splitPattern: RegExp) =>
+const splitValue = (value: string) =>
  value
-    .split(splitPattern)
+    .split(DEFAULT_SPLIT_PATTERN)
    .map((item) => item.trim())
    .filter(Boolean)

@@ -49,35 +42,25 @@ export const BaseSplitChipEditor = ({
  error = false,
  helperText,
  placeholder,
-  rows = 4,
  separator = ',',
-  splitPattern = DEFAULT_SPLIT_PATTERN,
-  defaultMode = 'visual',
-  showModeToggle = true,
  ariaLabel,
-  addLabel,
-  emptyLabel,
-  modeLabels,
  renderHeader,
 }: BaseSplitChipEditorProps) => {
  const { t } = useTranslation()
-  const [mode, setMode] = useState<BaseSplitChipEditorMode>(defaultMode)
+  const [mode, setMode] = useState<BaseSplitChipEditorMode>('visual')
  const [draft, setDraft] = useState('')

  const resolvedLabels = useMemo(
    () => ({
-      visual: modeLabels?.visual ?? t('shared.editorModes.visualization'),
-      advanced: modeLabels?.advanced ?? t('shared.editorModes.advanced'),
-      add: addLabel ?? t('shared.actions.new'),
-      empty: emptyLabel ?? t('shared.statuses.empty'),
+      visual: t('shared.editorModes.visualization'),
+      advanced: t('shared.editorModes.advanced'),
+      add: t('shared.actions.new'),
+      empty: t('shared.statuses.empty'),
    }),
-    [t, modeLabels, addLabel, emptyLabel],
+    [t],
  )

-  const values = useMemo(
-    () => splitValue(value, splitPattern),
-    [value, splitPattern],
-  )
+  const values = useMemo(() => splitValue(value), [value])

  const items = useMemo(() => {
    const counts = new Map<string, number>()
@@ -92,7 +75,7 @@ export const BaseSplitChipEditor = ({
  }, [values])

  const handleAddDraft = () => {
-    const nextValues = splitValue(draft, splitPattern)
+    const nextValues = splitValue(draft)
    if (!nextValues.length) {
      return
    }
@@ -113,7 +96,7 @@ export const BaseSplitChipEditor = ({
  const resolvedAriaLabel =
    ariaLabel ?? (typeof toggleLabel === 'string' ? toggleLabel : undefined)

-  const modeToggle = showModeToggle ? (
+  const modeToggle = (
    <Tooltip title={toggleLabel}>
      <IconButton
        size="small"
@@ -128,7 +111,7 @@ export const BaseSplitChipEditor = ({
        <ToggleIcon fontSize="small" />
      </IconButton>
    </Tooltip>
-  ) : null
+  )

  return (
    <>
@@ -202,7 +185,7 @@ export const BaseSplitChipEditor = ({
          disabled={disabled}
          size="small"
          multiline
-          rows={rows}
+          rows={4}
          sx={{ width: '100%' }}
          value={value}
          helperText={helperText}
@@ -596,7 +596,7 @@ export const CurrentProxyCard = () => {
    [getProfileStorageKey],
  )

-  const { handleSelectChange } = useProxySelection({
+  const { select } = useProxySelection({
    onSuccess: () => {
      refreshProxy()
    },
@@ -766,15 +766,9 @@ export const CurrentProxyCard = () => {
      const previousProxy = selectedGroup.now
      const nextName = option.member.ref.name
      // The profile selection is the durable source across core restarts and run modes.
-      handleSelectChange(
-        selectedGroup.name,
-        previousProxy!,
-        selectedGroup.fixed!,
-      )({
-        target: { value: nextName },
-      })
+      select(selectedGroup.name, nextName, previousProxy!, selectedGroup.fixed!)
    },
-    [handleSelectChange, isDirectMode, selectedGroup, unsortedProxyOptions],
+    [isDirectMode, select, selectedGroup, unsortedProxyOptions],
  )

  const goToProxies = useCallback(() => {
@@ -14,7 +14,6 @@ import { useTranslation } from 'react-i18next'

 import { useTrafficGraphDataEnhanced } from '@/hooks/use-traffic-monitor'
 import { useVerge } from '@/hooks/use-verge'
-import { debugLog } from '@/utils/debug'
 import parseTraffic from '@/utils/parse-traffic'
 import {
  formatTrafficHourMinute,
@@ -23,14 +22,7 @@ import {
  isSameTrafficData,
 } from '@/utils/traffic-sampler'

-interface ITrafficItem {
-  up: number
-  down: number
-  timestamp?: number
-}
-
 export interface EnhancedCanvasTrafficGraphRef {
-  appendData: (data: ITrafficItem) => void
  toggleStyle: () => void
 }

@@ -142,7 +134,6 @@ export const EnhancedCanvasTrafficGraph = memo(
      [],
    )
    const debounceTimeoutRef = useRef<number | null>(null)
-    const [currentFPS, setCurrentFPS] = useState(GRAPH_CONFIG.targetFPS)

    const colors = useMemo(
      () => ({
@@ -183,8 +174,6 @@ export const EnhancedCanvasTrafficGraph = memo(
      if (displayData.length === 0) {
        lastDataTimestampRef.current = 0
        dataStaleRef.current = false
-        // eslint-disable-next-line @eslint-react/set-state-in-effect
-        setCurrentFPS(GRAPH_CONFIG.targetFPS)
        return
      }

@@ -200,18 +189,11 @@ export const EnhancedCanvasTrafficGraph = memo(
      }
    }, [displayData])

-    const handleFocusStateChange = useCallback(
-      (focused: boolean) => {
-        isWindowFocusedRef.current = focused
+    const handleFocusStateChange = useCallback((focused: boolean) => {
+      isWindowFocusedRef.current = focused

-        if (focused || !pause_render_traffic_stats_on_blur) {
-          setCurrentFPS(GRAPH_CONFIG.targetFPS)
-        }
-
-        scheduleDrawGraphRef.current()
-      },
-      [pause_render_traffic_stats_on_blur],
-    )
+      scheduleDrawGraphRef.current()
+    }, [])

    useEffect(() => {
      if (typeof window === 'undefined' || typeof document === 'undefined') {
@@ -684,19 +666,13 @@ export const EnhancedCanvasTrafficGraph = memo(
          ctx.beginPath()
          ctx.moveTo(getX(0), getY(0))

-          if (chartStyle === 'bezier') {
-            for (let i = 1; i < data.length; i++) {
-              const currentX = getX(i)
-              const currentY = getY(i)
-              const nextIndex = Math.min(i + 1, lastIndex)
-              const controlX = (currentX + getX(nextIndex)) / 2
-              const controlY = (currentY + getY(nextIndex)) / 2
-              ctx.quadraticCurveTo(currentX, currentY, controlX, controlY)
-            }
-          } else {
-            for (let i = 1; i < data.length; i++) {
-              ctx.lineTo(getX(i), getY(i))
-            }
+          for (let i = 1; i < data.length; i++) {
+            const currentX = getX(i)
+            const currentY = getY(i)
+            const nextIndex = Math.min(i + 1, lastIndex)
+            const controlX = (currentX + getX(nextIndex)) / 2
+            const controlY = (currentY + getY(nextIndex)) / 2
+            ctx.quadraticCurveTo(currentX, currentY, controlX, controlY)
          }

          ctx.lineTo(getX(lastIndex), height - padding.bottom)
@@ -984,21 +960,7 @@ export const EnhancedCanvasTrafficGraph = memo(
      setChartStyle((prev) => (prev === 'bezier' ? 'line' : 'bezier'))
    }, [])

-    const appendData = useCallback((data: ITrafficItem) => {
-      debugLog(
-        '[EnhancedCanvasTrafficGraphV2] appendData called (using global data):',
-        data,
-      )
-    }, [])
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        appendData,
-        toggleStyle,
-      }),
-      [appendData, toggleStyle],
-    )
+    useImperativeHandle(ref, () => ({ toggleStyle }), [toggleStyle])

    const getTimeRangeText = useCallback(() => {
      return t('home.components.traffic.patterns.minutes', {
@@ -1142,7 +1104,7 @@ export const EnhancedCanvasTrafficGraph = memo(
            {t('home.components.traffic.diagnostics', {
              points: displayData.length,
              compressed: samplerStats.compressedBufferSize,
-              fps: currentFPS,
+              fps: GRAPH_CONFIG.targetFPS,
            })}
          </Box>

@@ -3,10 +3,14 @@ import {
  ArrowUpwardRounded,
  CloudDownloadRounded,
  CloudUploadRounded,
+  ErrorOutlineRounded,
  LinkRounded,
  MemoryRounded,
 } from '@mui/icons-material'
 import {
+  Alert,
+  Box,
+  Button,
  Grid,
  PaletteColor,
  Paper,
@@ -15,9 +19,9 @@ import {
  useTheme,
 } from '@mui/material'
 import { ReactNode, memo, useMemo, useRef } from 'react'
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary'
 import { useTranslation } from 'react-i18next'

-import { TrafficErrorBoundary } from '@/components/shared/traffic-error-boundary'
 import { useConnectionSummaryData } from '@/hooks/use-connection-data'
 import { useMemoryData } from '@/hooks/use-memory-data'
 import { useTrafficData } from '@/hooks/use-traffic-data'
@@ -127,6 +131,50 @@ const CompactStatCard = memo(
 // 添加显示名称
 CompactStatCard.displayName = 'CompactStatCard'

+const fallbackSx = {
+  p: 2,
+  minHeight: 200,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  border: '1px dashed',
+  borderColor: 'error.main',
+  borderRadius: 2,
+  bgcolor: 'error.light',
+}
+
+const reloadPage = () => window.location.reload()
+
+const TrafficFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <Box sx={fallbackSx}>
+      <ErrorOutlineRounded color="error" sx={{ fontSize: 48, mb: 2 }} />
+      <Typography variant="h6" gutterBottom>
+        {t('shared.feedback.errors.trafficStats')}
+      </Typography>
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+        {t('shared.feedback.errors.trafficStatsDescription')}
+      </Typography>
+      <Alert severity="error" sx={{ mb: 2, maxWidth: 400 }}>
+        {error instanceof Error
+          ? error.message
+          : t('shared.feedback.errors.unknown')}
+      </Alert>
+      <Box sx={{ display: 'flex', gap: 1 }}>
+        <Button variant="contained" size="small" onClick={resetErrorBoundary}>
+          {t('shared.actions.retry')}
+        </Button>
+        <Button variant="outlined" size="small" onClick={reloadPage}>
+          {t('shared.actions.refreshPage')}
+        </Button>
+      </Box>
+    </Box>
+  )
+}
+
 export const EnhancedTrafficStats = () => {
  const { t } = useTranslation()
  const theme = useTheme()
@@ -254,10 +302,11 @@ export const EnhancedTrafficStats = () => {
  }, [t, parsedData, displayMemory])

  return (
-    <TrafficErrorBoundary
-      onError={(error, errorInfo) => {
-        console.error('[EnhancedTrafficStats] 组件错误:', error, errorInfo)
-      }}
+    <ErrorBoundary
+      FallbackComponent={TrafficFallback}
+      onError={(error, errorInfo) =>
+        console.error('[EnhancedTrafficStats]', error, errorInfo)
+      }
    >
      <Grid container spacing={1} columns={{ xs: 8, sm: 8, md: 12 }}>
        {trafficGraph && (
@@ -273,6 +322,6 @@ export const EnhancedTrafficStats = () => {
          </Grid>
        ))}
      </Grid>
-    </TrafficErrorBoundary>
+    </ErrorBoundary>
  )
 }
@@ -86,16 +86,11 @@ export const SystemInfoCard = () => {
  }, [verge, patchVerge])

  const handleRunningModeClick = useCallback(async () => {
-    if (isSidecarMode || (isAdminMode && isSidecarMode)) {
+    if (isSidecarMode) {
      await installServiceAndRestartCore()
      await mutateSystemState()
    }
-  }, [
-    isSidecarMode,
-    isAdminMode,
-    installServiceAndRestartCore,
-    mutateSystemState,
-  ])
+  }, [isSidecarMode, installServiceAndRestartCore, mutateSystemState])

  const onCheckUpdate = useLockFn(async () => {
    try {
@@ -122,18 +117,16 @@ export const SystemInfoCard = () => {

  const runningModeStyle = useMemo(
    () => ({
-      cursor:
-        isSidecarMode || (isAdminMode && isSidecarMode) ? 'pointer' : 'default',
-      textDecoration:
-        isSidecarMode || (isAdminMode && isSidecarMode) ? 'underline' : 'none',
+      cursor: isSidecarMode ? 'pointer' : 'default',
+      textDecoration: isSidecarMode ? 'underline' : 'none',
      display: 'flex',
      alignItems: 'center',
      gap: 0.5,
      '&:hover': {
-        opacity: isSidecarMode || (isAdminMode && isSidecarMode) ? 0.7 : 1,
+        opacity: isSidecarMode ? 0.7 : 1,
      },
    }),
-    [isSidecarMode, isAdminMode],
+    [isSidecarMode],
  )

  const getModeIcon = () => {
@@ -87,7 +87,7 @@ export const TestCard = () => {
        x.uid === uid ? { ...x, ...patch } : x,
      )

-      mutateVerge({ ...verge, test_list: newList }, false)
+      mutateVerge({ ...verge, test_list: newList })
    },
    [testList, verge, mutateVerge],
  )
@@ -96,7 +96,7 @@ export const TestCard = () => {
    (uid: string) => {
      const newList = testList.filter((x) => x.uid !== uid)
      patchVerge({ test_list: newList })
-      mutateVerge({ ...verge, test_list: newList }, false)
+      mutateVerge({ ...verge, test_list: newList })
    },
    [testList, verge, patchVerge, mutateVerge],
  )
@@ -129,7 +129,7 @@ export const TestCard = () => {
      newList.splice(newIndex, 0, removed)

      // 优化：先本地更新，再异步 patch，避免UI卡死
-      mutateVerge({ ...verge, test_list: newList }, false)
+      mutateVerge({ ...verge, test_list: newList })
      const patchFn = () => {
        try {
          patchVerge({ test_list: newList })
@@ -35,10 +35,7 @@ export const LayoutSidebar = (props: LayoutSidebarProps) => {

  const handleMenuOrderOptimisticUpdate = useCallback(
    (order: string[]) => {
-      mutateVerge(
-        (prev) => (prev ? { ...prev, menu_order: order } : prev),
-        false,
-      )
+      mutateVerge((prev) => (prev ? { ...prev, menu_order: order } : prev))
    },
    [mutateVerge],
  )
@@ -1,14 +1,15 @@
 import {
  ArrowDownwardRounded,
  ArrowUpwardRounded,
+  ErrorOutlineRounded,
  MemoryRounded,
 } from '@mui/icons-material'
 import type { BoxProps, SvgIconProps, TypographyProps } from '@mui/material'
 import { Box, Typography } from '@mui/material'
 import { useEffect, useRef } from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
 import { useTranslation } from 'react-i18next'

-import { LightweightTrafficErrorBoundary } from '@/components/shared/traffic-error-boundary'
 import { useMemoryData } from '@/hooks/use-memory-data'
 import { useTrafficData } from '@/hooks/use-traffic-data'
 import { useVerge } from '@/hooks/use-verge'
@@ -17,6 +18,30 @@ import parseTraffic from '@/utils/parse-traffic'

 import { TrafficGraph, type TrafficRef } from './traffic-graph'

+const unavailableSx = {
+  p: 1,
+  minHeight: 60,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  bgcolor: 'error.light',
+  borderRadius: 1,
+  color: 'error.contrastText',
+}
+
+const TrafficUnavailableFallback = () => {
+  const { t } = useTranslation()
+
+  return (
+    <Box sx={unavailableSx}>
+      <ErrorOutlineRounded sx={{ mr: 1, fontSize: 20 }} />
+      <Typography variant="caption">
+        {t('shared.feedback.errors.trafficUnavailable')}
+      </Typography>
+    </Box>
+  )
+}
+
 export const LayoutTraffic = () => {
  const { t } = useTranslation()
  const { verge } = useVerge()
@@ -75,7 +100,12 @@ export const LayoutTraffic = () => {
  }

  return (
-    <LightweightTrafficErrorBoundary>
+    <ErrorBoundary
+      FallbackComponent={TrafficUnavailableFallback}
+      onError={(error, errorInfo) =>
+        console.error('[LayoutTraffic]', error, errorInfo)
+      }
+    >
      <Box sx={{ position: 'relative' }}>
        {trafficGraph && pageVisible && (
          <div
@@ -130,7 +160,6 @@ export const LayoutTraffic = () => {
                cursor: 'auto',
              }}
              color={'disabled'}
-              onClick={async () => {}}
            >
              <MemoryRounded {...iconStyle} />
              <Typography {...valStyle}>{inuse}</Typography>
@@ -139,6 +168,6 @@ export const LayoutTraffic = () => {
          )}
        </Box>
      </Box>
-    </LightweightTrafficErrorBoundary>
+    </ErrorBoundary>
  )
 }
@@ -1,11 +1,6 @@
 import { Close, CropSquare, FilterNone, Minimize } from '@mui/icons-material'
 import { Box, IconButton } from '@mui/material'
-import {
-  forwardRef,
-  type PointerEvent,
-  useCallback,
-  useImperativeHandle,
-} from 'react'
+import { type PointerEvent, useCallback } from 'react'

 import { useWindowControls } from '@/hooks/use-window'
 import getSystem from '@/utils/get-system'
@@ -63,36 +58,9 @@ export const WindowResizeHandles = () => {
  )
 }

-export const WindowControls = forwardRef(function WindowControls(props, ref) {
+export const WindowControls = () => {
  const OS = getSystem()
-  const {
-    currentWindow,
-    maximized,
-    minimize,
-    close,
-    toggleFullscreen,
-    toggleMaximize,
-  } = useWindowControls()
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      currentWindow,
-      maximized,
-      minimize,
-      close,
-      toggleFullscreen,
-      toggleMaximize,
-    }),
-    [
-      currentWindow,
-      maximized,
-      minimize,
-      close,
-      toggleFullscreen,
-      toggleMaximize,
-    ],
-  )
+  const { maximized, minimize, close, toggleMaximize } = useWindowControls()

  // 通过前端对 tauri 窗口进行翻转全屏时会短暂地与系统图标重叠渲染。
  // 这可能是上游缺陷，保险起见跨平台以窗口的最大化翻转为准。
@@ -186,4 +154,4 @@ export const WindowControls = forwardRef(function WindowControls(props, ref) {
      )}
    </Box>
  )
-})
+}
@@ -462,7 +462,7 @@ function NormalProxyGroups(props: { mode: string }) {
    }
  }, [handleScroll])

-  const { handleProxyGroupChange } = useProxySelection({
+  const { select } = useProxySelection({
    onSuccess: () => {
      onProxies()
    },
@@ -477,9 +477,9 @@ function NormalProxyGroups(props: { mode: string }) {
      if (!['Selector', 'URLTest', 'Fallback'].includes(group.type)) return
      if (!isInteractableMember(member)) return

-      handleProxyGroupChange(group, { name: member.ref.name })
+      select(group.name, member.ref.name, group.now!, group.fixed!)
    },
-    [handleProxyGroupChange],
+    [select],
  )

  const handleLocation = useStableCallback((group: ProxyGroupView) => {
@@ -30,10 +30,8 @@ export const useProxyGroupHeaderLayout = () => {
      if (canceled || !operation.source || !operation.target) return

      const position = toolsOnLeft ? 'right' : 'left'
-      mutateVerge(
-        (prev) =>
-          prev ? { ...prev, proxy_group_tools_position: position } : prev,
-        false,
+      mutateVerge((prev) =>
+        prev ? { ...prev, proxy_group_tools_position: position } : prev,
      )
      try {
        await patchVerge({ proxy_group_tools_position: position })
@@ -114,17 +114,15 @@ export const BackupConfigViewer = memo(
            errorNotice: false,
          },
        )
-        await mutateVerge(
-          (current) =>
-            current
-              ? {
-                  ...current,
-                  webdav_url: trimmedUrl,
-                  webdav_username: trimmedUsername,
-                  webdav_password: data.password,
-                }
-              : current,
-          false,
+        await mutateVerge((current) =>
+          current
+            ? {
+                ...current,
+                webdav_url: trimmedUrl,
+                webdav_username: trimmedUsername,
+                webdav_password: data.password,
+              }
+            : current,
        )
        setWebdavStatus(signature, 'unknown')
        showNotice.success('settings.modals.backup.messages.webdavConfigSaved')
@@ -107,7 +107,7 @@ export const LayoutViewer = forwardRef<DialogRef>((_, ref) => {
    showNotice.error(err)
  }
  const onChangeData = (patch: Partial<IVergeConfig>) => {
-    mutateVerge({ ...verge, ...patch }, false)
+    mutateVerge({ ...verge, ...patch })
  }

  return (
@@ -15,44 +15,33 @@ import { BaseDialog, DialogRef, Switch, TooltipIcon } from '@/components/base'
 import { useVerge } from '@/hooks/use-verge'
 import { showNotice } from '@/services/notice-service'

+const buildInitialValues = (verge?: IVergeConfig | null) => ({
+  appLogLevel: verge?.app_log_level ?? 'warn',
+  appLogMaxSize: verge?.app_log_max_size ?? 128,
+  appLogMaxCount: verge?.app_log_max_count ?? 8,
+  autoCloseConnection: verge?.auto_close_connection ?? true,
+  autoCheckUpdate: verge?.auto_check_update ?? true,
+  enableBuiltinEnhanced: verge?.enable_builtin_enhanced ?? true,
+  proxyLayoutColumn: verge?.proxy_layout_column || 6,
+  enableAutoDelayDetection: verge?.enable_auto_delay_detection ?? false,
+  autoDelayDetectionIntervalMinutes:
+    verge?.auto_delay_detection_interval_minutes ?? 5,
+  defaultLatencyTest: verge?.default_latency_test || '',
+  autoLogClean: verge?.auto_log_clean || 0,
+  defaultLatencyTimeout: verge?.default_latency_timeout || 10000,
+})
+
 export const MiscViewer = forwardRef<DialogRef>((props, ref) => {
  const { t } = useTranslation()
  const { verge, patchVerge } = useVerge()

  const [open, setOpen] = useState(false)
-  const [values, setValues] = useState({
-    appLogLevel: 'warn',
-    appLogMaxSize: 8,
-    appLogMaxCount: 12,
-    autoCloseConnection: true,
-    autoCheckUpdate: true,
-    enableBuiltinEnhanced: true,
-    proxyLayoutColumn: 6,
-    enableAutoDelayDetection: false,
-    autoDelayDetectionIntervalMinutes: 5,
-    defaultLatencyTest: '',
-    autoLogClean: 2,
-    defaultLatencyTimeout: 10000,
-  })
+  const [values, setValues] = useState(() => buildInitialValues(null))

  useImperativeHandle(ref, () => ({
    open: () => {
      setOpen(true)
-      setValues({
-        appLogLevel: verge?.app_log_level ?? 'warn',
-        appLogMaxSize: verge?.app_log_max_size ?? 128,
-        appLogMaxCount: verge?.app_log_max_count ?? 8,
-        autoCloseConnection: verge?.auto_close_connection ?? true,
-        autoCheckUpdate: verge?.auto_check_update ?? true,
-        enableBuiltinEnhanced: verge?.enable_builtin_enhanced ?? true,
-        proxyLayoutColumn: verge?.proxy_layout_column || 6,
-        enableAutoDelayDetection: verge?.enable_auto_delay_detection ?? false,
-        autoDelayDetectionIntervalMinutes:
-          verge?.auto_delay_detection_interval_minutes ?? 5,
-        defaultLatencyTest: verge?.default_latency_test || '',
-        autoLogClean: verge?.auto_log_clean || 0,
-        defaultLatencyTimeout: verge?.default_latency_timeout || 10000,
-      })
+      setValues(buildInitialValues(verge))
    },
    close: () => setOpen(false),
  }))
@@ -87,6 +87,17 @@ const splitBypass = (value?: string) =>
    .map((item) => item.trim())
    .filter(Boolean)

+const buildInitialValues = (verge?: IVergeConfig | null) => ({
+  guard: verge?.enable_proxy_guard,
+  enable_bypass_check: verge?.enable_bypass_check ?? true,
+  bypass: verge?.system_proxy_bypass,
+  duration: verge?.proxy_guard_duration ?? 10,
+  use_default: verge?.use_default_bypass ?? true,
+  pac: verge?.proxy_auto_config,
+  pac_content: verge?.pac_file_content ?? DEFAULT_PAC,
+  proxy_host: verge?.proxy_host ?? '127.0.0.1',
+})
+
 export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
  const { t } = useTranslation()
  const systemName = getSystem()
@@ -116,16 +127,7 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
    proxy_host,
  } = verge ?? {}

-  const [value, setValue] = useState({
-    guard: enable_proxy_guard,
-    enable_bypass_check: enable_bypass_check ?? true,
-    bypass: system_proxy_bypass,
-    duration: proxy_guard_duration ?? 10,
-    use_default: use_default_bypass ?? true,
-    pac: proxy_auto_config,
-    pac_content: pac_file_content ?? DEFAULT_PAC,
-    proxy_host: proxy_host ?? '127.0.0.1',
-  })
+  const [value, setValue] = useState(() => buildInitialValues(null))
  const [embeddedServerPort, setEmbeddedServerPort] = useState<number | null>(
    null,
  )
@@ -192,16 +194,7 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
  useImperativeHandle(ref, () => ({
    open: () => {
      setOpen(true)
-      setValue({
-        guard: enable_proxy_guard,
-        enable_bypass_check: enable_bypass_check ?? true,
-        bypass: system_proxy_bypass,
-        duration: proxy_guard_duration ?? 10,
-        use_default: use_default_bypass ?? true,
-        pac: proxy_auto_config,
-        pac_content: pac_file_content ?? DEFAULT_PAC,
-        proxy_host: proxy_host ?? '127.0.0.1',
-      })
+      setValue(buildInitialValues(verge))
      fetchNetworkInterfaces()
    },
    close: () => setOpen(false),
@@ -339,7 +332,7 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
    Promise.resolve().then(async () => {
      try {
        if (Object.keys(patch).length > 0) {
-          mutateVerge({ ...verge, ...patch }, false)
+          mutateVerge({ ...verge, ...patch })
        }
        if (Object.keys(patch).length > 0) {
          await patchVerge(patch)
@@ -76,34 +76,28 @@ const proxyOptionToken = ({ memberIndex, member }: TunnelProxyOption) =>
    member.kind === 'node' ? member.node.recordId : member.ref.name
  }`

+const buildInitialValues = (): TunnelFormValues => ({
+  localAddr: '',
+  localPort: '',
+  targetAddr: '',
+  targetPort: '',
+  network: 'tcp+udp',
+  group: '',
+  proxy: null,
+})
+
 export const TunnelsViewer = forwardRef<TunnelsViewerRef>((_, ref) => {
  const { t } = useTranslation()
  const { clash, mutateClash, patchClash } = useClash()

  const [open, setOpen] = useState(false)
  const [expanded, setExpanded] = useState(false)
-  const [values, setValues] = useState<TunnelFormValues>({
-    localAddr: '',
-    localPort: '',
-    targetAddr: '',
-    targetPort: '',
-    network: 'tcp+udp',
-    group: '',
-    proxy: null,
-  })
+  const [values, setValues] = useState<TunnelFormValues>(buildInitialValues)
  const [draftTunnels, setDraftTunnels] = useState<TunnelEntry[]>([])

  useImperativeHandle(ref, () => ({
    open: () => {
-      setValues(() => ({
-        localAddr: '',
-        localPort: '',
-        targetAddr: '',
-        targetPort: '',
-        network: 'tcp+udp',
-        group: '',
-        proxy: null,
-      }))
+      setValues(buildInitialValues())
      setDraftTunnels(() => clash?.tunnels ?? [])
      setOpen(true)
      // 如果没有隧道，则自动展开
@@ -50,21 +50,21 @@ export function WebUIViewer({ ref }: { ref?: Ref<DialogRef> }) {

  const handleAdd = useLockFn(async (value: string) => {
    const newList = [...webUIList, value]
-    mutateVerge((old) => (old ? { ...old, web_ui_list: newList } : old), false)
+    mutateVerge((old) => (old ? { ...old, web_ui_list: newList } : old))
    await patchVerge({ web_ui_list: newList })
  })

  const handleChange = useLockFn(async (index: number, value?: string) => {
    const newList = [...webUIList]
    newList[index] = value ?? ''
-    mutateVerge((old) => (old ? { ...old, web_ui_list: newList } : old), false)
+    mutateVerge((old) => (old ? { ...old, web_ui_list: newList } : old))
    await patchVerge({ web_ui_list: newList })
  })

  const handleDelete = useLockFn(async (index: number) => {
    const newList = [...webUIList]
    newList.splice(index, 1)
-    mutateVerge((old) => (old ? { ...old, web_ui_list: newList } : old), false)
+    mutateVerge((old) => (old ? { ...old, web_ui_list: newList } : old))
    await patchVerge({ web_ui_list: newList })
  })

@@ -1,14 +1,12 @@
-import React, { useRef } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'

-import { DialogRef, Switch, TooltipIcon } from '@/components/base'
+import { Switch, TooltipIcon } from '@/components/base'
 import ProxyControlSwitches from '@/components/shared/proxy-control-switches'
 import { useVerge } from '@/hooks/use-verge'

 import { GuardState } from './mods/guard-state'
 import { SettingList, SettingItem } from './mods/setting-comp'
-import { SysproxyViewer } from './mods/sysproxy-viewer'
-import { TunViewer } from './mods/tun-viewer'

 interface Props {
  onError?: (err: Error) => void
@@ -21,22 +19,16 @@ const SettingSystem = ({ onError }: Props) => {

  const { enable_auto_launch, enable_silent_start } = verge ?? {}

-  const sysproxyRef = useRef<DialogRef>(null)
-  const tunRef = useRef<DialogRef>(null)
-
  const onSwitchFormat = (
    _e: React.ChangeEvent<HTMLInputElement>,
    value: boolean,
  ) => value
  const onChangeData = (patch: Partial<IVergeConfig>) => {
-    mutateVerge({ ...verge, ...patch }, false)
+    mutateVerge({ ...verge, ...patch })
  }

  return (
    <SettingList title={t('settings.sections.system.title')}>
-      <SysproxyViewer ref={sysproxyRef} />
-      <TunViewer ref={tunRef} />
-
      <ProxyControlSwitches
        label={t('settings.sections.system.toggles.tunMode')}
        onError={onError}
@@ -58,8 +50,6 @@ const SettingSystem = ({ onError }: Props) => {
          }}
          onGuard={async (e) => {
            try {
-              // 先触发UI更新立即看到反馈
-              onChangeData({ enable_auto_launch: e })
              await patchVerge({ enable_auto_launch: e })
              return Promise.resolve()
            } catch (error) {
@@ -72,7 +72,7 @@ const SettingVergeBasic = ({ onError }: Props) => {
  const backupRef = useRef<DialogRef>(null)

  const onChangeData = (patch: any) => {
-    mutateVerge({ ...verge, ...patch }, false)
+    mutateVerge({ ...verge, ...patch })
  }

  const onCopyClashEnv = useCallback(async () => {
@@ -163,7 +163,7 @@ const ProxyControlSwitches = ({
      })
      return false
    }
-    mutateVerge({ ...verge, enable_tun_mode: value }, false)
+    mutateVerge({ ...verge, enable_tun_mode: value })
    await patchVerge({ enable_tun_mode: value })
  }

@@ -229,8 +229,8 @@ const ProxyControlSwitches = ({
        />
      )}

-      <SysproxyViewer ref={sysproxyRef} />
-      <TunViewer ref={tunRef} />
+      {isSystemProxyMode && <SysproxyViewer ref={sysproxyRef} />}
+      {isTunMode && <TunViewer ref={tunRef} />}
    </Box>
  )
 }
@@ -1,301 +0,0 @@
-import {
-  ErrorOutlineRounded,
-  RefreshRounded,
-  BugReportRounded,
-} from '@mui/icons-material'
-import { Box, Typography, Button, Alert, Collapse } from '@mui/material'
-import React, { Component, ErrorInfo, ReactNode } from 'react'
-import { useTranslation } from 'react-i18next'
-
-interface Props {
-  children: ReactNode
-  fallbackComponent?: ReactNode
-  onError?: (error: Error, errorInfo: ErrorInfo) => void
-}
-
-interface State {
-  hasError: boolean
-  error: Error | null
-  errorInfo: ErrorInfo | null
-  showDetails: boolean
-}
-
-export class TrafficErrorBoundary extends Component<Props, State> {
-  private retryCount = 0
-  private maxRetries = 3
-
-  constructor(props: Props) {
-    super(props)
-    this.state = {
-      hasError: false,
-      error: null,
-      errorInfo: null,
-      showDetails: false,
-    }
-  }
-
-  static getDerivedStateFromError(error: Error): Partial<State> {
-    return { hasError: true, error }
-  }
-
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    console.error('[TrafficErrorBoundary] 捕获到组件错误:', error, errorInfo)
-
-    this.setState({
-      error,
-      errorInfo,
-    })
-
-    if (this.props.onError) {
-      this.props.onError(error, errorInfo)
-    }
-
-    this.reportError(error, errorInfo)
-  }
-
-  private reportError = (error: Error, errorInfo: ErrorInfo) => {
-    const errorReport = {
-      message: error.message,
-      stack: error.stack,
-      componentStack: errorInfo.componentStack,
-      timestamp: new Date().toISOString(),
-      userAgent: navigator.userAgent,
-      url: window.location.href,
-    }
-
-    console.error('[TrafficErrorBoundary] 错误报告:', errorReport)
-  }
-
-  private handleRetry = () => {
-    if (this.retryCount < this.maxRetries) {
-      this.retryCount++
-      console.log(
-        `[TrafficErrorBoundary] 尝试重试 (${this.retryCount}/${this.maxRetries})`,
-      )
-
-      this.setState({
-        hasError: false,
-        error: null,
-        errorInfo: null,
-        showDetails: false,
-      })
-    } else {
-      console.warn('[TrafficErrorBoundary] 已达到最大重试次数')
-    }
-  }
-
-  private handleRefresh = () => {
-    window.location.reload()
-  }
-
-  private toggleDetails = () => {
-    this.setState((prev) => ({ showDetails: !prev.showDetails }))
-  }
-
-  render() {
-    if (this.state.hasError) {
-      if (this.props.fallbackComponent) {
-        return this.props.fallbackComponent
-      }
-
-      return (
-        <TrafficErrorFallback
-          error={this.state.error}
-          errorInfo={this.state.errorInfo}
-          showDetails={this.state.showDetails}
-          canRetry={this.retryCount < this.maxRetries}
-          retryCount={this.retryCount}
-          maxRetries={this.maxRetries}
-          onRetry={this.handleRetry}
-          onRefresh={this.handleRefresh}
-          onToggleDetails={this.toggleDetails}
-        />
-      )
-    }
-
-    return this.props.children
-  }
-}
-
-interface TrafficErrorFallbackProps {
-  error: Error | null
-  errorInfo: ErrorInfo | null
-  showDetails: boolean
-  canRetry: boolean
-  retryCount: number
-  maxRetries: number
-  onRetry: () => void
-  onRefresh: () => void
-  onToggleDetails: () => void
-}
-
-const TrafficErrorFallback: React.FC<TrafficErrorFallbackProps> = ({
-  error,
-  errorInfo,
-  showDetails,
-  canRetry,
-  retryCount,
-  maxRetries,
-  onRetry,
-  onRefresh,
-  onToggleDetails,
-}) => {
-  const { t } = useTranslation()
-
-  return (
-    <Box
-      sx={{
-        p: 2,
-        minHeight: 200,
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        border: '1px dashed',
-        borderColor: 'error.main',
-        borderRadius: 2,
-        bgcolor: 'error.light',
-        color: 'error.contrastText',
-      }}
-    >
-      <ErrorOutlineRounded sx={{ fontSize: 48, mb: 2, color: 'error.main' }} />
-
-      <Typography variant="h6" gutterBottom>
-        {t('shared.feedback.errors.trafficStats')}
-      </Typography>
-
-      <Typography
-        variant="body2"
-        color="text.secondary"
-        sx={{ mb: 2, textAlign: 'center' }}
-      >
-        {t('shared.feedback.errors.trafficStatsDescription')}
-      </Typography>
-
-      <Alert severity="error" sx={{ mb: 2, maxWidth: 400 }}>
-        <Typography variant="body2">
-          <strong>{t('shared.feedback.errors.label')}:</strong>{' '}
-          {error instanceof Error
-            ? error.message
-            : t('shared.feedback.errors.unknown')}
-        </Typography>
-        {retryCount > 0 && (
-          <Typography variant="caption" sx={{ mt: 1, display: 'block' }}>
-            {t('shared.labels.retryAttempts')}: {retryCount}/{maxRetries}
-          </Typography>
-        )}
-      </Alert>
-
-      <Box sx={{ display: 'flex', gap: 1, mb: 2 }}>
-        {canRetry && (
-          <Button
-            variant="contained"
-            color="primary"
-            startIcon={<RefreshRounded />}
-            onClick={onRetry}
-            size="small"
-          >
-            {t('shared.actions.retry')}
-          </Button>
-        )}
-
-        <Button variant="outlined" onClick={onRefresh} size="small">
-          {t('shared.actions.refreshPage')}
-        </Button>
-
-        <Button
-          variant="text"
-          startIcon={<BugReportRounded />}
-          onClick={onToggleDetails}
-          size="small"
-        >
-          {showDetails
-            ? t('shared.actions.hideDetails')
-            : t('shared.actions.showDetails')}
-        </Button>
-      </Box>
-
-      <Collapse in={showDetails} sx={{ width: '100%', maxWidth: 600 }}>
-        <Box
-          sx={{
-            p: 2,
-            bgcolor: 'background.paper',
-            borderRadius: 1,
-            border: '1px solid',
-            borderColor: 'divider',
-          }}
-        >
-          <Typography variant="subtitle2" gutterBottom>
-            {t('shared.feedback.errors.details')}:
-          </Typography>
-          <Typography
-            variant="caption"
-            component="pre"
-            sx={{
-              whiteSpace: 'pre-wrap',
-              wordBreak: 'break-word',
-              fontFamily: 'monospace',
-              fontSize: '0.75rem',
-              color: 'text.secondary',
-            }}
-          >
-            {error?.stack}
-          </Typography>
-
-          {errorInfo?.componentStack && (
-            <>
-              <Typography variant="subtitle2" gutterBottom sx={{ mt: 2 }}>
-                {t('shared.feedback.errors.componentStack')}:
-              </Typography>
-              <Typography
-                variant="caption"
-                component="pre"
-                sx={{
-                  whiteSpace: 'pre-wrap',
-                  wordBreak: 'break-word',
-                  fontFamily: 'monospace',
-                  fontSize: '0.75rem',
-                  color: 'text.secondary',
-                }}
-              >
-                {errorInfo.componentStack}
-              </Typography>
-            </>
-          )}
-        </Box>
-      </Collapse>
-    </Box>
-  )
-}
-
-export const LightweightTrafficErrorBoundary: React.FC<{
-  children: ReactNode
-}> = ({ children }) => {
-  const { t } = useTranslation()
-
-  return (
-    <TrafficErrorBoundary
-      fallbackComponent={
-        <Box
-          sx={{
-            p: 1,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            minHeight: 60,
-            bgcolor: 'error.light',
-            borderRadius: 1,
-            color: 'error.contrastText',
-          }}
-        >
-          <ErrorOutlineRounded sx={{ mr: 1, fontSize: 20 }} />
-          <Typography variant="caption">
-            {t('shared.feedback.errors.trafficUnavailable')}
-          </Typography>
-        </Box>
-      }
-    >
-      {children}
-    </TrafficErrorBoundary>
-  )
-}