78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
import useSWR from "swr";
|
|
import React, { useEffect } from "react";
|
|
import { useLockFn } from "ahooks";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Button } from "@/components/ui/button";
|
|
import { closeAllConnections, getClashConfig } from "@/services/api";
|
|
import { patchClashMode } from "@/services/cmds";
|
|
import { useVerge } from "@/hooks/use-verge";
|
|
import { ProxyGroups } from "@/components/proxy/proxy-groups";
|
|
import { ProviderButton } from "@/components/proxy/provider-button";
|
|
import { SidebarTrigger } from "@/components/ui/sidebar";
|
|
|
|
const ProxyPage = () => {
|
|
const { t } = useTranslation();
|
|
|
|
const { data: clashConfig, mutate: mutateClash } = useSWR(
|
|
"getClashConfig",
|
|
getClashConfig,
|
|
{
|
|
revalidateOnFocus: false,
|
|
revalidateIfStale: true,
|
|
},
|
|
);
|
|
|
|
const { verge } = useVerge();
|
|
const modeList = ["rule", "global", "direct"];
|
|
const curMode = clashConfig?.mode?.toLowerCase();
|
|
|
|
const onChangeMode = useLockFn(async (mode: string) => {
|
|
if (mode !== curMode && verge?.auto_close_connection) {
|
|
closeAllConnections();
|
|
}
|
|
await patchClashMode(mode);
|
|
mutateClash();
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (curMode && !modeList.includes(curMode)) {
|
|
onChangeMode("rule");
|
|
}
|
|
}, [curMode]);
|
|
|
|
return (
|
|
<div className="h-full flex flex-col">
|
|
<div className="p-4 pb-2 flex justify-between items-center">
|
|
<div className="w-10">
|
|
<SidebarTrigger />
|
|
</div>
|
|
<h2 className="text-2xl font-semibold tracking-tight">
|
|
{t("Proxies")}
|
|
</h2>
|
|
<div className="flex items-center space-x-2">
|
|
<ProviderButton />
|
|
<div className="flex items-center rounded-md border bg-muted p-0.5">
|
|
{modeList.map((mode) => (
|
|
<Button
|
|
key={mode}
|
|
variant={mode === curMode ? "default" : "ghost"}
|
|
size="sm"
|
|
onClick={() => onChangeMode(mode)}
|
|
className="capitalize px-3 py-1 h-auto"
|
|
>
|
|
{t(mode)}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto min-h-0 p-4">
|
|
<ProxyGroups mode={curMode!} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProxyPage;
|