feat: add state management for core switching, upgrading and restart functionality

UPDATELOG.md

@@ -48,6 +48,7 @@
  - 卸载服务的按钮
  - 添加了Zashboard的一键跳转URL
  - 使用操作系统默认的窗口管理器
+ - 切换、升级、重启内核的状态管理
 
 #### 优化了：
  - 系统代理 Bypass 设置

src/components/setting/mods/clash-core-viewer.tsx

@@ -11,8 +11,8 @@ import {
 } from "@mui/icons-material";
 import {
   Box,
-  Button,
   Chip,
+  CircularProgress,
   List,
   ListItemButton,
   ListItemText,
@@ -33,6 +33,8 @@ export const ClashCoreViewer = forwardRef<DialogRef>((props, ref) => {
 
   const [open, setOpen] = useState(false);
   const [upgrading, setUpgrading] = useState(false);
+  const [restarting, setRestarting] = useState(false);
+  const [changingCore, setChangingCore] = useState<string | null>(null);
 
   useImperativeHandle(ref, () => ({
     open: () => setOpen(true),
@@ -45,11 +47,13 @@ export const ClashCoreViewer = forwardRef<DialogRef>((props, ref) => {
     if (core === clash_core) return;
 
     try {
+      setChangingCore(core);
       closeAllConnections();
       const errorMsg = await changeClashCore(core);
       
       if (errorMsg) {
         showNotice('error', errorMsg);
+        setChangingCore(null);
         return;
       }
       
@@ -57,17 +61,22 @@ export const ClashCoreViewer = forwardRef<DialogRef>((props, ref) => {
       setTimeout(() => {
         mutate("getClashConfig");
         mutate("getVersion");
+        setChangingCore(null);
       }, 500);
     } catch (err: any) {
+      setChangingCore(null);
       showNotice('error', err.message || err.toString());
     }
   });
 
   const onRestart = useLockFn(async () => {
     try {
+      setRestarting(true);
       await restartCore();
       showNotice('success', t(`Clash Core Restarted`));
+      setRestarting(false);
     } catch (err: any) {
+      setRestarting(false);
       showNotice('error', err.message || err.toString());
     }
   });
@@ -97,19 +106,23 @@ export const ClashCoreViewer = forwardRef<DialogRef>((props, ref) => {
               startIcon={<SwitchAccessShortcutRounded />}
               loadingPosition="start"
               loading={upgrading}
+              disabled={restarting || changingCore !== null}
               sx={{ marginRight: "8px" }}
               onClick={onUpgrade}
             >
               {t("Upgrade")}
             </LoadingButton>
-            <Button
+            <LoadingButton
               variant="contained"
               size="small"
-              onClick={onRestart}
               startIcon={<RestartAltRounded />}
+              loadingPosition="start"
+              loading={restarting}
+              disabled={upgrading}
+              onClick={onRestart}
             >
               {t("Restart")}
-            </Button>
+            </LoadingButton>
           </Box>
         </Box>
       }
@@ -132,9 +145,14 @@ export const ClashCoreViewer = forwardRef<DialogRef>((props, ref) => {
             key={each.core}
             selected={each.core === clash_core}
             onClick={() => onCoreChange(each.core)}
+            disabled={changingCore !== null || restarting || upgrading}
           >
             <ListItemText primary={each.name} secondary={`/${each.core}`} />
-            <Chip label={t(`${each.chip}`)} size="small" />
+            {changingCore === each.core ? (
+              <CircularProgress size={20} sx={{ mr: 1 }} />
+            ) : (
+              <Chip label={t(`${each.chip}`)} size="small" />
+            )}
           </ListItemButton>
         ))}
       </List>