feat(proxy): confirm before enabling chain proxy

Show the speed warning with explicit enable/keep-disabled actions, and add a close button to the empty chain panel.

src/pages/proxies.tsx

@@ -1,10 +1,10 @@
 import { LanOutlined, LanRounded, WarningRounded } from '@mui/icons-material'
-import { Box, Button, ButtonGroup } from '@mui/material'
+import { Box, Button, ButtonGroup, Typography } from '@mui/material'
 import { useLockFn } from 'ahooks'
 import { useCallback, useEffect, useReducer, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { BasePage, TooltipIcon } from '@/components/base'
+import { BaseDialog, BasePage, TooltipIcon } from '@/components/base'
 import { ProviderButton } from '@/components/proxy/provider-button'
 import { ProxyGroups } from '@/components/proxy/proxy-groups'
 import {
@@ -38,6 +38,7 @@ const ProxyPage = () => {
       return false
     }
   })
+  const [chainConfirmOpen, setChainConfirmOpen] = useState(false)
 
   const [chainConfigData, dispatchChainConfigData] = useReducer(
     (_: string | null, action: string | null) => action,
@@ -68,32 +69,34 @@ const ProxyPage = () => {
     }
   })
 
-  const onToggleChainMode = useLockFn(async () => {
-    const newChainMode = !isChainMode
+  const applyChainMode = (enabled: boolean) => {
+    setIsChainMode(enabled)
+    localStorage.setItem('proxy-chain-mode-enabled', enabled.toString())
+  }
 
-    if (!newChainMode) {
-      // 退出链式代理模式时，清除链式代理配置
-      try {
-        debugLog('Exiting chain mode, clearing chain configuration')
-        const result = await mutate(
-          () => updateProxyChainConfigInRuntime(null),
-          {
-            id: 'update-proxy-chain-runtime',
-            errorNotice: false,
-          },
-        )
-        if (!result.ok) return
-        debugLog('Chain configuration cleared successfully')
-      } catch (error) {
-        console.error('Failed to clear chain configuration:', error)
-        showNotice.error(error)
-        return
-      }
+  const onExitChainMode = useLockFn(async () => {
+    // 退出链式代理模式时，清除链式代理配置
+    try {
+      debugLog('Exiting chain mode, clearing chain configuration')
+      const result = await mutate(() => updateProxyChainConfigInRuntime(null), {
+        id: 'update-proxy-chain-runtime',
+        errorNotice: false,
+      })
+      if (!result.ok) return
+      debugLog('Chain configuration cleared successfully')
+    } catch (error) {
+      console.error('Failed to clear chain configuration:', error)
+      showNotice.error(error)
+      return
     }
-    setIsChainMode(newChainMode)
-    localStorage.setItem('proxy-chain-mode-enabled', newChainMode.toString())
+    applyChainMode(false)
   })
 
+  const onToggleChainMode = () => {
+    if (isChainMode) onExitChainMode().catch(() => {})
+    else setChainConfirmOpen(true)
+  }
+
   // 当开启链式代理模式时，获取配置数据
   useEffect(() => {
     if (!isChainMode) {
@@ -202,7 +205,23 @@ const ProxyPage = () => {
         mode={curMode ?? 'rule'}
         isChainMode={isChainMode}
         chainConfigData={chainConfigData}
+        onExitChainMode={onExitChainMode}
       />
+      <BaseDialog
+        open={chainConfirmOpen}
+        title={t('proxies.page.actions.toggleChain')}
+        okBtn={t('proxies.page.chain.confirmEnable')}
+        cancelBtn={t('proxies.page.chain.keepDisabled')}
+        contentSx={{ width: { xs: 320, sm: 420 } }}
+        onCancel={() => setChainConfirmOpen(false)}
+        onClose={() => setChainConfirmOpen(false)}
+        onOk={() => {
+          setChainConfirmOpen(false)
+          applyChainMode(true)
+        }}
+      >
+        <Typography variant="body2">{chainWarning}</Typography>
+      </BaseDialog>
     </BasePage>
   )
 }