feat: clash meta core supports

src/components/setting/core-switch.tsx

@@ -0,0 +1,84 @@
+import useSWR, { useSWRConfig } from "swr";
+import { useState } from "react";
+import { useLockFn } from "ahooks";
+import { Menu, MenuItem } from "@mui/material";
+import { Settings } from "@mui/icons-material";
+import { changeClashCore, getVergeConfig } from "../../services/cmds";
+import getSystem from "../../utils/get-system";
+import Notice from "../base/base-notice";
+
+const OS = getSystem();
+
+const VALID_CORE = [
+  { name: "Clash", core: "clash" },
+  { name: "Clash Meta", core: "clash-meta" },
+];
+
+const CoreSwitch = () => {
+  const { mutate } = useSWRConfig();
+
+  const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
+
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+  const [position, setPosition] = useState({ left: 0, top: 0 });
+
+  const { clash_core = "clash" } = vergeConfig ?? {};
+
+  const onCoreChange = useLockFn(async (core: string) => {
+    if (core === clash_core) return;
+
+    try {
+      await changeClashCore(core);
+      mutate("getVergeConfig");
+      mutate("getClashConfig");
+      mutate("getVersion");
+      setAnchorEl(null);
+      Notice.success(`Successfully switch to ${core}`, 1000);
+    } catch (err: any) {
+      Notice.error(err?.message || err.toString());
+    }
+  });
+
+  return (
+    <>
+      <Settings
+        fontSize="small"
+        style={{ cursor: "pointer" }}
+        onClick={(event) => {
+          const { clientX, clientY } = event;
+          setPosition({ top: clientY, left: clientX });
+          setAnchorEl(event.currentTarget);
+        }}
+      />
+
+      <Menu
+        open={!!anchorEl}
+        anchorEl={anchorEl}
+        onClose={() => setAnchorEl(null)}
+        anchorPosition={position}
+        anchorReference="anchorPosition"
+        transitionDuration={225}
+        TransitionProps={
+          OS === "macos" ? { style: { transitionDuration: "225ms" } } : {}
+        }
+        onContextMenu={(e) => {
+          setAnchorEl(null);
+          e.preventDefault();
+        }}
+      >
+        {VALID_CORE.map((each) => (
+          <MenuItem
+            key={each.core}
+            sx={{ minWidth: 125 }}
+            selected={each.core === clash_core}
+            onClick={() => onCoreChange(each.core)}
+          >
+            {each.name}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+};
+
+export default CoreSwitch;

src/components/setting/setting-clash.tsx

@@ -8,6 +8,7 @@ import {
   Select,
   MenuItem,
   Typography,
+  Box,
 } from "@mui/material";
 import { ApiType } from "../../services/types";
 import { atomClashPort } from "../../services/states";
@@ -16,11 +17,14 @@ import { SettingList, SettingItem } from "./setting";
 import { getClashConfig, getVersion, updateConfigs } from "../../services/api";
 import Notice from "../base/base-notice";
 import GuardState from "./guard-state";
+import CoreSwitch from "./core-switch";
 
 interface Props {
   onError: (err: Error) => void;
 }
 
+const MULTI_CORE = !!import.meta.env.VITE_MULTI_CORE;
+
 const SettingClash = ({ onError }: Props) => {
   const { t } = useTranslation();
   const { mutate } = useSWRConfig();
@@ -54,7 +58,7 @@ const SettingClash = ({ onError }: Props) => {
     }
     await patchClashConfig({ "mixed-port": port });
     setGlobalClashPort(port);
-    Notice.success("Change Clash port successfully!");
+    Notice.success("Change Clash port successfully!", 1000);
 
     // update the config
     mutate("getClashConfig");
@@ -129,7 +133,18 @@ const SettingClash = ({ onError }: Props) => {
       </SettingItem>
 
       <SettingItem>
-        <ListItemText primary={t("Clash Core")} />
+        <ListItemText
+          primary={
+            MULTI_CORE ? (
+              <Box sx={{ display: "flex", alignItems: "center" }}>
+                <span style={{ marginRight: 4 }}>{t("Clash Core")}</span>
+                <CoreSwitch />
+              </Box>
+            ) : (
+              t("Clash Core")
+            )
+          }
+        />
         <Typography sx={{ py: 1 }}>{clashVer}</Typography>
       </SettingItem>
     </SettingList>

src/services/cmds.ts

@@ -86,6 +86,10 @@ export async function getSystemProxy() {
   return invoke<any>("get_sys_proxy");
 }
 
+export async function changeClashCore(clashCore: string) {
+  return invoke<any>("change_clash_core", { clashCore });
+}
+
 export async function restartSidecar() {
   return invoke<void>("restart_sidecar");
 }

src/services/types.ts

@@ -1,7 +1,7 @@
 /**
  * Some interface for clash api
  */
- export namespace ApiType {
+export namespace ApiType {
   export interface ConfigData {
     port: number;
     mode: string;
@@ -125,6 +125,7 @@ export namespace CmdType {
 
   export interface VergeConfig {
     language?: string;
+    clash_core?: string;
     theme_mode?: "light" | "dark";
     theme_blur?: boolean;
     traffic_graph?: boolean;