mirror/clash-verge-rev-lite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 11 Wiki Activity

added a setting to change the proxy mode controlled by a switch on the homepage

Browse Source
This commit is contained in:
coolcoala
2025-07-14 05:23:02 +03:00
parent b1e3283a24
commit eb1e4fe0c3
6 changed files with 428 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src-tauri/src/config/verge.rs
View File

@@ -74,6 +74,8 @@ pub struct IVerge {
/// enable dns settings - this controls whether dns_config.yaml is applied
pub enable_dns_settings: Option<bool>,
pub primary_action: Option<String>,
/// always use default bypass
pub use_default_bypass: Option<bool>,
@@ -401,6 +403,7 @@ impl IVerge {
enable_auto_light_weight_mode: Some(false),
auto_light_weight_minutes: Some(10),
enable_dns_settings: Some(false),
primary_action: Some("tun-mode".into()),
home_cards: None,
service_state: None,
..Self::default()
@@ -489,6 +492,7 @@ impl IVerge {
patch!(enable_auto_light_weight_mode);
patch!(auto_light_weight_minutes);
patch!(enable_dns_settings);
patch!(primary_action);
patch!(home_cards);
patch!(service_state);
}
@@ -584,6 +588,7 @@ pub struct IVergeResponse {
pub enable_auto_light_weight_mode: Option<bool>,
pub auto_light_weight_minutes: Option<u64>,
pub enable_dns_settings: Option<bool>,
pub primary_action: Option<String>,
pub home_cards: Option<serde_json::Value>,
pub enable_hover_jump_navigator: Option<bool>,
pub service_state: Option<crate::core::service::ServiceState>,
@@ -656,6 +661,7 @@ impl From<IVerge> for IVergeResponse {
enable_auto_light_weight_mode: verge.enable_auto_light_weight_mode,
auto_light_weight_minutes: verge.auto_light_weight_minutes,
enable_dns_settings: verge.enable_dns_settings,
primary_action: verge.primary_action,
home_cards: verge.home_cards,
enable_hover_jump_navigator: verge.enable_hover_jump_navigator,
service_state: verge.service_state,

304
src/components/setting/setting-system.tsx
View File

@@ -10,36 +10,94 @@ import { useVerge } from "@/hooks/use-verge";
import { useSystemProxyState } from "@/hooks/use-system-proxy-state"; // Ваш хук
import { useSystemState } from "@/hooks/use-system-state";
import { useServiceInstaller } from "@/hooks/useServiceInstaller";
import { uninstallService, restartCore, stopCore, invoke_uwp_tool } from "@/services/cmds";
import {
uninstallService,
restartCore,
stopCore,
invoke_uwp_tool,
} from "@/services/cmds";
import { showNotice } from "@/services/noticeService";
// Компоненты
import { DialogRef, Switch } from "@/components/base";
import { TooltipIcon } from "@/components/base/base-tooltip-icon";
import { Button } from "@/components/ui/button";
import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
import {
Tooltip,
TooltipProvider,
TooltipTrigger,
TooltipContent,
} from "@/components/ui/tooltip";
import { GuardState } from "./mods/guard-state";
// Иконки
import { Settings, PlayCircle, PauseCircle, AlertTriangle, Wrench, Trash2, Funnel, Monitor, Power, BellOff, Repeat } from "lucide-react";
import {
Settings,
PlayCircle,
PauseCircle,
AlertTriangle,
Wrench,
Trash2,
Funnel,
Monitor,
Power,
BellOff,
Repeat,
} from "lucide-react";
// Модальные окна
import { SysproxyViewer } from "./mods/sysproxy-viewer";
import { TunViewer } from "./mods/tun-viewer";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
const isWIN = getSystem() === "windows";
interface Props { onError?: (err: Error) => void; }
interface Props {
onError?: (err: Error) => void;
}
const SettingRow = ({ label, extra, children, onClick }: { label: React.ReactNode; extra?: React.ReactNode; children?: React.ReactNode; onClick?: () => void; }) => (
<div className={`flex items-center justify-between py-3 border-b border-border last:border-b-0 ${onClick ? 'cursor-pointer hover:bg-accent/50 -mx-3 px-3 rounded-md' : ''}`} onClick={onClick}>
<div className="flex items-center gap-2"><div className="text-sm font-medium">{label}</div>{extra && <div className="text-muted-foreground">{extra}</div>}</div>
<div>{children}</div>
const SettingRow = ({
label,
extra,
children,
onClick,
}: {
label: React.ReactNode;
extra?: React.ReactNode;
children?: React.ReactNode;
onClick?: () => void;
}) => (
<div
className={`flex items-center justify-between py-3 border-b border-border last:border-b-0 ${onClick ? "cursor-pointer hover:bg-accent/50 -mx-3 px-3 rounded-md" : ""}`}
onClick={onClick}
>
<div className="flex items-center gap-2">
<div className="text-sm font-medium">{label}</div>
{extra && <div className="text-muted-foreground">{extra}</div>}
</div>
<div>{children}</div>
</div>
);
const LabelWithIcon = ({ icon, text }: { icon: React.ElementType, text: string }) => {
const Icon = icon;
return ( <span className="flex items-center gap-3"><Icon className="h-4 w-4 text-muted-foreground" />{text}</span> );
const LabelWithIcon = ({
icon,
text,
}: {
icon: React.ElementType;
text: string;
}) => {
const Icon = icon;
return (
<span className="flex items-center gap-3">
<Icon className="h-4 w-4 text-muted-foreground" />
{text}
</span>
);
};
const SettingSystem = ({ onError }: Props) => {
@@ -59,41 +117,55 @@ const SettingSystem = ({ onError }: Props) => {
const sysproxyRef = useRef<DialogRef>(null);
const tunRef = useRef<DialogRef>(null);
const { enable_tun_mode, enable_auto_launch, enable_silent_start } = verge ?? {};
const { enable_tun_mode, enable_auto_launch, enable_silent_start } =
verge ?? {};
const onSwitchFormat = (val: boolean) => val;
const onChangeData = (patch: Partial<IVergeConfig>) => {
mutateVerge({ ...verge, ...patch }, false);
};
const handleServiceOperation = useLockFn(async ({ beforeMsg, action, actionMsg, successMsg }: { beforeMsg: string; action: () => Promise<void>; actionMsg: string; successMsg: string; }) => {
try {
showNotice("info", beforeMsg);
await stopCore();
showNotice("info", actionMsg);
await action();
showNotice("success", successMsg);
showNotice("info", t("Restarting Core..."));
await restartCore();
await mutateRunningMode();
} catch (err: any) {
showNotice("error", err.message || err.toString());
const handleServiceOperation = useLockFn(
async ({
beforeMsg,
action,
actionMsg,
successMsg,
}: {
beforeMsg: string;
action: () => Promise<void>;
actionMsg: string;
successMsg: string;
}) => {
try {
showNotice("info", t("Try running core as Sidecar..."));
showNotice("info", beforeMsg);
await stopCore();
showNotice("info", actionMsg);
await action();
showNotice("success", successMsg);
showNotice("info", t("Restarting Core..."));
await restartCore();
await mutateRunningMode();
} catch (e: any) {
showNotice("error", e?.message || e?.toString());
} catch (err: any) {
showNotice("error", err.message || err.toString());
try {
showNotice("info", t("Try running core as Sidecar..."));
await restartCore();
await mutateRunningMode();
} catch (e: any) {
showNotice("error", e?.message || e?.toString());
}
}
}
});
},
);
const onUninstallService = () => handleServiceOperation({
const onUninstallService = () =>
handleServiceOperation({
beforeMsg: t("Stopping Core..."),
action: uninstallService,
actionMsg: t("Uninstalling Service..."),
successMsg: t("Service Uninstalled Successfully"),
});
});
return (
<div>
@@ -106,10 +178,61 @@ const SettingSystem = ({ onError }: Props) => {
label={<LabelWithIcon icon={Funnel} text={t("Tun Mode")} />}
extra={
<div className="flex items-center gap-1">
<TooltipIcon tooltip={t("Tun Mode Info")} icon={<Settings className="h-4 w-4" />} onClick={() => tunRef.current?.open()} />
{!isTunAvailable && <TooltipProvider><Tooltip><TooltipTrigger><AlertTriangle className="h-4 w-4 text-amber-500" /></TooltipTrigger><TooltipContent><p>{t("TUN requires Service Mode or Admin Mode")}</p></TooltipContent></Tooltip></TooltipProvider>}
{!isServiceMode && !isAdminMode && <TooltipProvider><Tooltip><TooltipTrigger asChild><Button variant="outline" size="icon" className="h-7 w-7" onClick={installServiceAndRestartCore}><Wrench className="h-4 w-4" /></Button></TooltipTrigger><TooltipContent><p>{t("Install Service")}</p></TooltipContent></Tooltip></TooltipProvider>}
{isServiceMode && <TooltipProvider><Tooltip><TooltipTrigger asChild><Button variant="destructive" size="icon" className="h-7 w-7" onClick={onUninstallService}><Trash2 className="h-4 w-4" /></Button></TooltipTrigger><TooltipContent><p>{t("Uninstall Service")}</p></TooltipContent></Tooltip></TooltipProvider>}
<TooltipIcon
tooltip={t("Tun Mode Info")}
icon={<Settings className="h-4 w-4" />}
onClick={() => tunRef.current?.open()}
/>
{!isTunAvailable && (
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<AlertTriangle className="h-4 w-4 text-amber-500" />
</TooltipTrigger>
<TooltipContent>
<p>{t("TUN requires Service Mode or Admin Mode")}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
{!isServiceMode && !isAdminMode && (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
size="icon"
className="h-7 w-7"
onClick={installServiceAndRestartCore}
>
<Wrench className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>{t("Install Service")}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
{isServiceMode && (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="destructive"
size="icon"
className="h-7 w-7"
onClick={onUninstallService}
>
<Trash2 className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>{t("Uninstall Service")}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
</div>
}
>
@@ -119,7 +242,22 @@ const SettingSystem = ({ onError }: Props) => {
onChangeProps="onCheckedChange"
onFormat={onSwitchFormat}
onChange={(e) => onChangeData({ enable_tun_mode: e })}
onGuard={(e) => { if (!isTunAvailable) { showNotice("error", t("TUN requires Service Mode or Admin Mode")); return Promise.reject(new Error(t("TUN requires Service Mode or Admin Mode"))); } return patchVerge({ enable_tun_mode: e }); }}
onGuard={(e) => {
if (!isTunAvailable) {
showNotice(
"error",
t("TUN requires Service Mode or Admin Mode"),
);
return Promise.reject(
new Error(t("TUN requires Service Mode or Admin Mode")),
);
}
if (e) {
return patchVerge({ enable_tun_mode: true, enable_system_proxy: false });
} else {
return patchVerge({ enable_tun_mode: false });
}
}}
onCatch={onError}
>
<Switch disabled={!isTunAvailable} />
@@ -130,19 +268,54 @@ const SettingSystem = ({ onError }: Props) => {
label={<LabelWithIcon icon={Monitor} text={t("System Proxy")} />}
extra={
<div className="flex items-center gap-2">
<TooltipIcon tooltip={t("System Proxy Info")} icon={<Settings className="h-4 w-4" />} onClick={() => sysproxyRef.current?.open()} />
{systemProxyIndicator ? <PlayCircle className="h-5 w-5 text-green-500" /> : <PauseCircle className="h-5 w-5 text-red-500" />}
<TooltipIcon
tooltip={t("System Proxy Info")}
icon={<Settings className="h-4 w-4" />}
onClick={() => sysproxyRef.current?.open()}
/>
{systemProxyIndicator ? (
<PlayCircle className="h-5 w-5 text-green-500" />
) : (
<PauseCircle className="h-5 w-5 text-red-500" />
)}
</div>
}
>
<GuardState value={systemProxyActualState} valueProps="checked" onChangeProps="onCheckedChange" onFormat={onSwitchFormat} onGuard={(e) => toggleSystemProxy(e)} onCatch={onError}>
<GuardState
value={systemProxyActualState}
valueProps="checked"
onChangeProps="onCheckedChange"
onFormat={onSwitchFormat}
onGuard={(e) => {
if (e) {
patchVerge({ enable_tun_mode: false });
return toggleSystemProxy(true);
} else {
return toggleSystemProxy(false);
}
}}
onCatch={onError}
>
<Switch />
</GuardState>
</SettingRow>
<SettingRow
label={<LabelWithIcon icon={Power} text={t("Auto Launch")} />}
extra={isAdminMode && <TooltipProvider><Tooltip><TooltipTrigger><AlertTriangle className="h-4 w-4 text-amber-500" /></TooltipTrigger><TooltipContent><p>{t("Administrator mode may not support auto launch")}</p></TooltipContent></Tooltip></TooltipProvider>}
extra={
isAdminMode && (
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<AlertTriangle className="h-4 w-4 text-amber-500" />
</TooltipTrigger>
<TooltipContent>
<p>{t("Administrator mode may not support auto launch")}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)
}
>
<GuardState
value={enable_auto_launch ?? false}
@@ -150,14 +323,33 @@ const SettingSystem = ({ onError }: Props) => {
onChangeProps="onCheckedChange"
onFormat={onSwitchFormat}
onChange={(e) => onChangeData({ enable_auto_launch: e })}
onGuard={async (e) => { if (isAdminMode) { showNotice("info", t("Administrator mode may not support auto launch")); } try { onChangeData({ enable_auto_launch: e }); await patchVerge({ enable_auto_launch: e }); await mutate("getAutoLaunchStatus"); return Promise.resolve(); } catch (error) { onChangeData({ enable_auto_launch: !e }); return Promise.reject(error); } }}
onGuard={async (e) => {
if (isAdminMode) {
showNotice(
"info",
t("Administrator mode may not support auto launch"),
);
}
try {
onChangeData({ enable_auto_launch: e });
await patchVerge({ enable_auto_launch: e });
await mutate("getAutoLaunchStatus");
return Promise.resolve();
} catch (error) {
onChangeData({ enable_auto_launch: !e });
return Promise.reject(error);
}
}}
onCatch={onError}
>
<Switch />
</GuardState>
</SettingRow>
<SettingRow label={<LabelWithIcon icon={BellOff} text={t("Silent Start")} />} extra={<TooltipIcon tooltip={t("Silent Start Info")} />}>
<SettingRow
label={<LabelWithIcon icon={BellOff} text={t("Silent Start")} />}
extra={<TooltipIcon tooltip={t("Silent Start Info")} />}
>
<GuardState
value={enable_silent_start ?? false}
valueProps="checked"
@@ -170,6 +362,34 @@ const SettingSystem = ({ onError }: Props) => {
<Switch />
</GuardState>
</SettingRow>
<SettingRow
label={<LabelWithIcon icon={Repeat} text={t("Main Toggle Action")} />}
>
<GuardState
value={verge?.primary_action ?? "tun-mode"}
valueProps="value"
onChangeProps="onValueChange"
onFormat={(val) => val}
onGuard={(value) =>
patchVerge({
primary_action: value as "tun-mode" | "system-proxy",
})
}
onCatch={onError}
>
<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Select an action" />
</SelectTrigger>
<SelectContent>
<SelectItem value="tun-mode">{t("TUN Mode")}</SelectItem>
<SelectItem value="system-proxy">
{t("System Proxy")}
</SelectItem>
</SelectContent>
</Select>
</GuardState>
</SettingRow>
</div>
</div>
);

3
src/locales/en.json
View File

@@ -658,5 +658,6 @@
"Get Started": "Get Started",
"You don't have any profiles yet. Add your first one to begin.": "You don't have any profiles yet.\nAdd your first one to begin.",
"Show Advanced Settings": "Show Advanced Settings",
"Hide Advanced Settings": "Hide Advanced Settings"
"Hide Advanced Settings": "Hide Advanced Settings",
"Main Toggle Action": "Main Toggle Action"
}

3
src/locales/ru.json
View File

@@ -610,5 +610,6 @@
"Get Started": "Приступить к работе",
"You don't have any profiles yet. Add your first one to begin.": "У вас еще нет профилей.\nДобавьте свой первый профиль, чтобы начать.",
"Show Advanced Settings": "Показать дополнительные настройки",
"Hide Advanced Settings": "Скрыть дополнительные настройки"
"Hide Advanced Settings": "Скрыть дополнительные настройки",
"Main Toggle Action": "Действие главного переключателя"
}

241
src/pages/home.tsx
View File

@@ -1,55 +1,77 @@
import React, { useRef, useMemo, useCallback, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useLockFn } from 'ahooks';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';
import React, { useRef, useMemo, useCallback, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useLockFn } from "ahooks";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";
import { useProfiles } from '@/hooks/use-profiles';
import { ProfileViewer, ProfileViewerRef } from '@/components/profile/profile-viewer';
import { useProfiles } from "@/hooks/use-profiles";
import {
DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel,
DropdownMenuSeparator, DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
import { ChevronsUpDown, Check, PlusCircle, Menu, Wrench, AlertTriangle, Loader2 } from 'lucide-react';
import { useVerge } from '@/hooks/use-verge';
import { useSystemState } from '@/hooks/use-system-state';
import { useServiceInstaller } from '@/hooks/useServiceInstaller';
ProfileViewer,
ProfileViewerRef,
} from "@/components/profile/profile-viewer";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import {
ChevronsUpDown,
Check,
PlusCircle,
Menu,
Wrench,
AlertTriangle,
Loader2,
} from "lucide-react";
import { useVerge } from "@/hooks/use-verge";
import { useSystemState } from "@/hooks/use-system-state";
import { useServiceInstaller } from "@/hooks/useServiceInstaller";
import { Switch } from "@/components/ui/switch";
import { ProxySelectors } from '@/components/home/proxy-selectors';
import { ProxySelectors } from "@/components/home/proxy-selectors";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { closeAllConnections } from '@/services/api';
import { closeAllConnections } from "@/services/api";
const MinimalHomePage: React.FC = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const [isToggling, setIsToggling] = useState(false);
const { profiles, patchProfiles, activateSelected, mutateProfiles } = useProfiles();
const { profiles, patchProfiles, activateSelected, mutateProfiles } =
useProfiles();
const viewerRef = useRef<ProfileViewerRef>(null);
const profileItems = useMemo(() => {
const items = profiles && Array.isArray(profiles.items) ? profiles.items : [];
const items =
profiles && Array.isArray(profiles.items) ? profiles.items : [];
const allowedTypes = ["local", "remote"];
return items.filter((i: any) => i && allowedTypes.includes(i.type!));
}, [profiles]);
const currentProfileName = useMemo(() => {
return profileItems.find(p => p.uid === profiles?.current)?.name || profiles?.current;
return (
profileItems.find((p) => p.uid === profiles?.current)?.name ||
profiles?.current
);
}, [profileItems, profiles?.current]);
const activateProfile = useCallback(async (uid: string, notifySuccess: boolean) => {
try {
await patchProfiles({ current: uid });
await closeAllConnections();
await activateSelected();
if (notifySuccess) {
toast.success(t("Profile Switched"));
const activateProfile = useCallback(
async (uid: string, notifySuccess: boolean) => {
try {
await patchProfiles({ current: uid });
await closeAllConnections();
await activateSelected();
if (notifySuccess) {
toast.success(t("Profile Switched"));
}
} catch (err: any) {
toast.error(err.message || err.toString());
mutateProfiles();
}
} catch (err: any) {
toast.error(err.message || err.toString());
mutateProfiles();
}
}, [patchProfiles, activateSelected, mutateProfiles, t]);
},
[patchProfiles, activateSelected, mutateProfiles, t],
);
const handleProfileChange = useLockFn(async (uid: string) => {
if (profiles?.current === uid) return;
@@ -61,33 +83,55 @@ const MinimalHomePage: React.FC = () => {
const { installServiceAndRestartCore } = useServiceInstaller();
const isTunAvailable = isServiceMode || isAdminMode;
const isProxyEnabled = verge?.enable_system_proxy || verge?.enable_tun_mode;
const showTunAlert =
(verge?.primary_action ?? "tun-mode") === "tun-mode" && !isTunAvailable;
const handleToggleProxy = useLockFn(async () => {
const turningOn = !isProxyEnabled;
const primaryAction = verge?.primary_action || "tun-mode";
setIsToggling(true);
try {
if (turningOn) {
await patchVerge({ enable_tun_mode: true, enable_system_proxy: false });
toast.success(t('Proxy enabled'));
if (primaryAction === "tun-mode") {
if (!isTunAvailable) {
toast.error(t("TUN requires Service Mode or Admin Mode"));
setIsToggling(false);
return;
}
await patchVerge({
enable_tun_mode: true,
enable_system_proxy: false,
});
} else {
await patchVerge({
enable_system_proxy: true,
enable_tun_mode: false,
});
}
toast.success(t("Proxy enabled"));
} else {
await patchVerge({ enable_tun_mode: false, enable_system_proxy: false });
toast.success(t('Proxy disabled'));
await patchVerge({
enable_tun_mode: false,
enable_system_proxy: false,
});
toast.success(t("Proxy disabled"));
}
mutateVerge();
} catch (error: any) {
toast.error(t('Failed to toggle proxy'), { description: error.message });
toast.error(t("Failed to toggle proxy"), { description: error.message });
} finally {
setIsToggling(false);
}
});
const navMenuItems = [
{ label: 'Profiles', path: '/profile' },
{ label: 'Settings', path: '/settings' },
{ label: 'Logs', path: '/logs' },
{ label: 'Proxies', path: '/proxies' },
{ label: 'Connections', path: '/connections' },
{ label: 'Rules', path: '/rules' },
{ label: "Profiles", path: "/profile" },
{ label: "Settings", path: "/settings" },
{ label: "Logs", path: "/logs" },
{ label: "Proxies", path: "/proxies" },
{ label: "Connections", path: "/connections" },
{ label: "Rules", path: "/rules" },
];
return (
@@ -99,7 +143,10 @@ const MinimalHomePage: React.FC = () => {
<div className="flex-shrink-0">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="w-full max-w-[250px] sm:max-w-xs">
<Button
variant="outline"
className="w-full max-w-[250px] sm:max-w-xs"
>
<span className="truncate">{currentProfileName}</span>
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
@@ -108,15 +155,20 @@ const MinimalHomePage: React.FC = () => {
<DropdownMenuLabel>{t("Profiles")}</DropdownMenuLabel>
<DropdownMenuSeparator />
{profileItems.map((p) => (
<DropdownMenuItem key={p.uid} onSelect={() => handleProfileChange(p.uid)}>
<DropdownMenuItem
key={p.uid}
onSelect={() => handleProfileChange(p.uid)}
>
<span className="flex-1 truncate">{p.name}</span>
{profiles?.current === p.uid && <Check className="ml-4 h-4 w-4" />}
{profiles?.current === p.uid && (
<Check className="ml-4 h-4 w-4" />
)}
</DropdownMenuItem>
))}
<DropdownMenuSeparator />
<DropdownMenuItem onSelect={() => viewerRef.current?.create()}>
<PlusCircle className="mr-2 h-4 w-4" />
<span>{t("Add New Profile")}</span>
<span>{t("Add Profile")}</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
@@ -124,61 +176,74 @@ const MinimalHomePage: React.FC = () => {
)}
<div className="w-10">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
<Menu className="h-5 w-5" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>{t("Menu")}</DropdownMenuLabel>
<DropdownMenuSeparator />
{navMenuItems.map((item) => (
<DropdownMenuItem key={item.path} onSelect={() => navigate(item.path)}>
{t(item.label)}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
<Menu className="h-5 w-5" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>{t("Menu")}</DropdownMenuLabel>
<DropdownMenuSeparator />
{navMenuItems.map((item) => (
<DropdownMenuItem
key={item.path}
onSelect={() => navigate(item.path)}
>
{t(item.label)}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</div>
</header>
<div className="flex items-center justify-center flex-grow w-full">
<div className="flex flex-col items-center gap-8 pt-10">
<div className="text-center">
<h1 className="text-4xl mb-2 font-semibold" style={{ color: isProxyEnabled ? '#22c55e' : '#ef4444' }}>
{isProxyEnabled ? t('Connected') : t('Disconnected')}
<h1
className="text-4xl mb-2 font-semibold"
style={{ color: isProxyEnabled ? "#22c55e" : "#ef4444" }}
>
{isProxyEnabled ? t("Connected") : t("Disconnected")}
</h1>
<p className="h-6 text-sm text-muted-foreground transition-opacity duration-300">
{isToggling && (isProxyEnabled ? t('Disconnecting...') : t('Connecting...'))}
{isToggling &&
(isProxyEnabled ? t("Disconnecting...") : t("Connecting..."))}
</p>
</div>
<div className="scale-[7] my-16">
<Switch
disabled={!isTunAvailable || isToggling}
disabled={showTunAlert || isToggling}
checked={!!isProxyEnabled}
onCheckedChange={handleToggleProxy}
aria-label={t("Toggle Proxy")}
/>
</div>
{!isTunAvailable && (
{showTunAlert && (
<div className="w-full max-w-sm">
<Alert variant="destructive" className="flex flex-col items-center gap-2 text-center">
<AlertTriangle className="h-4 w-4" />
<AlertTitle>{t("Attention Required")}</AlertTitle>
<AlertDescription className="text-xs">
{t("TUN requires Service Mode or Admin Mode")}
</AlertDescription>
{!isServiceMode && !isAdminMode && (
<Button size="sm" className="mt-2" onClick={installServiceAndRestartCore}>
<Wrench className="mr-2 h-4 w-4" />
{t("Install Service")}
</Button>
)}
</Alert>
<Alert
variant="destructive"
className="flex flex-col items-center gap-2 text-center"
>
<AlertTriangle className="h-4 w-4" />
<AlertTitle>{t("Attention Required")}</AlertTitle>
<AlertDescription className="text-xs">
{t("TUN requires Service Mode or Admin Mode")}
</AlertDescription>
{!isServiceMode && !isAdminMode && (
<Button
size="sm"
className="mt-2"
onClick={installServiceAndRestartCore}
>
<Wrench className="mr-2 h-4 w-4" />
{t("Install Service")}
</Button>
)}
</Alert>
</div>
)}
@@ -190,15 +255,19 @@ const MinimalHomePage: React.FC = () => {
<PlusCircle className="h-4 w-4" />
<AlertTitle>{t("Get Started")}</AlertTitle>
<AlertDescription className="whitespace-pre-wrap">
{t("You don't have any profiles yet. Add your first one to begin.")}
{t(
"You don't have any profiles yet. Add your first one to begin.",
)}
</AlertDescription>
<Button className="mt-2" onClick={() => viewerRef.current?.create()}>
<Button
className="mt-2"
onClick={() => viewerRef.current?.create()}
>
{t("Add Profile")}
</Button>
</Alert>
)}
</div>
</div>
</div>

1
src/services/types.d.ts vendored
View File

@@ -748,6 +748,7 @@ interface IVergeConfig {
enable_system_proxy?: boolean;
enable_global_hotkey?: boolean;
enable_dns_settings?: boolean;
primary_action?: "tun-mode" | "system-proxy";
proxy_auto_config?: boolean;
pac_file_content?: string;
proxy_host?: string;