purgatory/clash-verge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adjust setting page style

Browse Source
This commit is contained in:
GyDi 2022-08-06 03:48:03 +08:00
parent f3341f201f
commit 0891b5e7b7
No known key found for this signature in database
GPG Key ID: 1C95E0D3467B3084
5 changed files with 109 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/setting/mods/theme-mode-switch.tsx
View File

@ -15,7 +15,7 @@ const ThemeModeSwitch = (props: Props) => {
const modes = ["light", "dark", "system"] as const; const modes = ["light", "dark", "system"] as const;
return ( return (
<ButtonGroup size="small"> <ButtonGroup size="small" sx={{ my: "4px" }}>
{modes.map((mode) => ( {modes.map((mode) => (
<Button <Button
key={mode} key={mode}

44
src/components/setting/setting-clash.tsx
View File

@ -2,16 +2,16 @@ import useSWR, { useSWRConfig } from "swr";
import { useSetRecoilState } from "recoil"; import { useSetRecoilState } from "recoil";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { import {
ListItemText,
TextField, TextField,
Switch, Switch,
Select, Select,
MenuItem, MenuItem,
Typography, Typography,
Box, IconButton,
} from "@mui/material"; } from "@mui/material";
import { atomClashPort } from "@/services/states"; import { atomClashPort } from "@/services/states";
import { patchClashConfig } from "@/services/cmds"; import { ArrowForward } from "@mui/icons-material";
import { openWebUrl, patchClashConfig } from "@/services/cmds";
import { SettingList, SettingItem } from "./setting"; import { SettingList, SettingItem } from "./setting";
import { getClashConfig, getVersion, updateConfigs } from "@/services/api"; import { getClashConfig, getVersion, updateConfigs } from "@/services/api";
import Notice from "../base/base-notice"; import Notice from "../base/base-notice";
@ -68,8 +68,7 @@ const SettingClash = ({ onError }: Props) => {
return ( return (
<SettingList title={t("Clash Setting")}> <SettingList title={t("Clash Setting")}>
<SettingItem> <SettingItem label={t("Allow Lan")}>
<ListItemText primary={t("Allow Lan")} />
<GuardState <GuardState
value={allowLan ?? false} value={allowLan ?? false}
valueProps="checked" valueProps="checked"
@ -82,8 +81,7 @@ const SettingClash = ({ onError }: Props) => {
</GuardState> </GuardState>
</SettingItem> </SettingItem>
<SettingItem> <SettingItem label={t("IPv6")}>
<ListItemText primary={t("IPv6")} />
<GuardState <GuardState
value={ipv6 ?? false} value={ipv6 ?? false}
valueProps="checked" valueProps="checked"
@ -96,8 +94,7 @@ const SettingClash = ({ onError }: Props) => {
</GuardState> </GuardState>
</SettingItem> </SettingItem>
<SettingItem> <SettingItem label={t("Log Level")}>
<ListItemText primary={t("Log Level")} />
<GuardState <GuardState
value={logLevel ?? "info"} value={logLevel ?? "info"}
onCatch={onError} onCatch={onError}
@ -105,7 +102,7 @@ const SettingClash = ({ onError }: Props) => {
onChange={(e) => onChangeData({ "log-level": e })} onChange={(e) => onChangeData({ "log-level": e })}
onGuard={(e) => onUpdateData({ "log-level": e })} onGuard={(e) => onUpdateData({ "log-level": e })}
> >
<Select size="small" sx={{ width: 120 }}> <Select size="small" sx={{ width: 120, "> div": { py: "7.5px" } }}>
<MenuItem value="debug">Debug</MenuItem> <MenuItem value="debug">Debug</MenuItem>
<MenuItem value="info">Info</MenuItem> <MenuItem value="info">Info</MenuItem>
<MenuItem value="warning">Warning</MenuItem> <MenuItem value="warning">Warning</MenuItem>
@ -115,8 +112,7 @@ const SettingClash = ({ onError }: Props) => {
</GuardState> </GuardState>
</SettingItem> </SettingItem>
<SettingItem> <SettingItem label={t("Mixed Port")}>
<ListItemText primary={t("Mixed Port")} />
<GuardState <GuardState
value={mixedPort ?? 0} value={mixedPort ?? 0}
onCatch={onError} onCatch={onError}
@ -125,21 +121,23 @@ const SettingClash = ({ onError }: Props) => {
onGuard={onUpdatePort} onGuard={onUpdatePort}
waitTime={1000} waitTime={1000}
> >
<TextField autoComplete="off" size="small" sx={{ width: 120 }} /> <TextField
autoComplete="off"
size="small"
sx={{ width: 120, input: { py: "7.5px" } }}
/>
</GuardState> </GuardState>
</SettingItem> </SettingItem>
<SettingItem> <SettingItem label={t("Clash Core")} extra={<CoreSwitch />}>
<ListItemText <Typography sx={{ py: "7px" }}>{clashVer}</Typography>
primary={
<Box sx={{ display: "flex", alignItems: "center" }}>
<span style={{ marginRight: 4 }}>{t("Clash Core")}</span>
<CoreSwitch />
</Box>
}
/>
<Typography sx={{ py: 1 }}>{clashVer}</Typography>
</SettingItem> </SettingItem>
{/* <SettingItem label={t("Web UI")}>
<IconButton color="inherit" size="small" sx={{ my: "2px" }}>
<ArrowForward />
</IconButton>
</SettingItem> */}
</SettingList> </SettingList>
); );
}; };

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

@ -1,13 +1,7 @@
import useSWR, { useSWRConfig } from "swr"; import useSWR, { useSWRConfig } from "swr";
import { useState } from "react"; import { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { import { IconButton, Switch, TextField } from "@mui/material";
Box,
IconButton,
ListItemText,
Switch,
TextField,
} from "@mui/material";
import { ArrowForward, PrivacyTipRounded } from "@mui/icons-material"; import { ArrowForward, PrivacyTipRounded } from "@mui/icons-material";
import { import {
checkService, checkService,
@ -57,15 +51,7 @@ const SettingSystem = ({ onError }: Props) => {
return ( return (
<SettingList title={t("System Setting")}> <SettingList title={t("System Setting")}>
<SettingItem> <SettingItem label={t("Tun Mode")} extra={<ConfigViewer />}>
<ListItemText
primary={
<Box sx={{ display: "flex", alignItems: "center" }}>
<span style={{ marginRight: 4 }}>{t("Tun Mode")}</span>
<ConfigViewer />
</Box>
}
/>
<GuardState <GuardState
value={enable_tun_mode ?? false} value={enable_tun_mode ?? false}
valueProps="checked" valueProps="checked"
@ -79,24 +65,18 @@ const SettingSystem = ({ onError }: Props) => {
</SettingItem> </SettingItem>
{isWIN && ( {isWIN && (
<SettingItem> <SettingItem
<ListItemText label={t("Service Mode")}
primary={ extra={
<Box sx={{ display: "flex", alignItems: "center" }}> (serviceStatus === "active" || serviceStatus === "installed") && (
<span style={{ marginRight: 4 }}>{t("Service Mode")}</span> <PrivacyTipRounded
fontSize="small"
{(serviceStatus === "active" || style={{ cursor: "pointer", opacity: 0.75 }}
serviceStatus === "installed") && ( onClick={() => setServiceOpen(true)}
<PrivacyTipRounded />
fontSize="small" )
style={{ cursor: "pointer", opacity: 0.75 }} }
onClick={() => setServiceOpen(true)} >
/>
)}
</Box>
}
/>
{serviceStatus === "active" || serviceStatus === "installed" ? ( {serviceStatus === "active" || serviceStatus === "installed" ? (
<GuardState <GuardState
value={enable_service_mode ?? false} value={enable_service_mode ?? false}
@ -117,20 +97,19 @@ const SettingSystem = ({ onError }: Props) => {
<ArrowForward /> <ArrowForward />
</IconButton> </IconButton>
)} )}
{serviceOpen && (
<ServiceMode
open={serviceOpen}
enable={!!enable_service_mode}
onError={onError}
onClose={() => setServiceOpen(false)}
/>
)}
</SettingItem> </SettingItem>
)} )}
<SettingItem> {isWIN && (
<ListItemText primary={t("Auto Launch")} /> <ServiceMode
open={serviceOpen}
enable={!!enable_service_mode}
onError={onError}
onClose={() => setServiceOpen(false)}
/>
)}
<SettingItem label={t("Auto Launch")}>
<GuardState <GuardState
value={enable_auto_launch ?? false} value={enable_auto_launch ?? false}
valueProps="checked" valueProps="checked"
@ -143,8 +122,7 @@ const SettingSystem = ({ onError }: Props) => {
</GuardState> </GuardState>
</SettingItem> </SettingItem>
<SettingItem> <SettingItem label={t("Silent Start")}>
<ListItemText primary={t("Silent Start")} />
<GuardState <GuardState
value={enable_silent_start ?? false} value={enable_silent_start ?? false}
valueProps="checked" valueProps="checked"
@ -157,15 +135,7 @@ const SettingSystem = ({ onError }: Props) => {
</GuardState> </GuardState>
</SettingItem> </SettingItem>
<SettingItem> <SettingItem label={t("System Proxy")} extra={<SysproxyTooltip />}>
<ListItemText
primary={
<Box sx={{ display: "flex", alignItems: "center" }}>
<span style={{ marginRight: 4 }}>{t("System Proxy")}</span>
<SysproxyTooltip />
</Box>
}
/>
<GuardState <GuardState
value={enable_system_proxy ?? false} value={enable_system_proxy ?? false}
valueProps="checked" valueProps="checked"
@ -182,8 +152,7 @@ const SettingSystem = ({ onError }: Props) => {
</SettingItem> </SettingItem>
{enable_system_proxy && ( {enable_system_proxy && (
<SettingItem> <SettingItem label={t("Proxy Guard")}>
<ListItemText primary={t("Proxy Guard")} />
<GuardState <GuardState
value={enable_proxy_guard ?? false} value={enable_proxy_guard ?? false}
valueProps="checked" valueProps="checked"
@ -198,8 +167,7 @@ const SettingSystem = ({ onError }: Props) => {
)} )}
{enable_system_proxy && ( {enable_system_proxy && (
<SettingItem> <SettingItem label={t("Proxy Bypass")}>
<ListItemText primary={t("Proxy Bypass")} />
<GuardState <GuardState
value={system_proxy_bypass ?? ""} value={system_proxy_bypass ?? ""}
onCatch={onError} onCatch={onError}
@ -208,7 +176,11 @@ const SettingSystem = ({ onError }: Props) => {
onGuard={(e) => patchVergeConfig({ system_proxy_bypass: e })} onGuard={(e) => patchVergeConfig({ system_proxy_bypass: e })}
waitTime={1000} waitTime={1000}
> >
<TextField autoComplete="off" size="small" sx={{ width: 120 }} /> <TextField
autoComplete="off"
size="small"
sx={{ width: 120, input: { py: "7.5px" } }}
/>
</GuardState> </GuardState>
</SettingItem> </SettingItem>
)} )}

44
src/components/setting/setting-verge.tsx
View File

@ -3,7 +3,6 @@ import { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { import {
IconButton, IconButton,
ListItemText,
MenuItem, MenuItem,
Select, Select,
Switch, Switch,
@ -42,8 +41,7 @@ const SettingVerge = ({ onError }: Props) => {
return ( return (
<SettingList title={t("Verge Setting")}> <SettingList title={t("Verge Setting")}>
<SettingItem> <SettingItem label={t("Language")}>
<ListItemText primary={t("Language")} />
<GuardState <GuardState
value={language ?? "en"} value={language ?? "en"}
onCatch={onError} onCatch={onError}
@ -51,15 +49,14 @@ const SettingVerge = ({ onError }: Props) => {
onChange={(e) => onChangeData({ language: e })} onChange={(e) => onChangeData({ language: e })}
onGuard={(e) => patchVergeConfig({ language: e })} onGuard={(e) => patchVergeConfig({ language: e })}
> >
<Select size="small" sx={{ width: 100 }}> <Select size="small" sx={{ width: 100, "> div": { py: "7.5px" } }}>
<MenuItem value="zh">中文</MenuItem> <MenuItem value="zh">中文</MenuItem>
<MenuItem value="en">English</MenuItem> <MenuItem value="en">English</MenuItem>
</Select> </Select>
</GuardState> </GuardState>
</SettingItem> </SettingItem>
<SettingItem> <SettingItem label={t("Theme Mode")}>
<ListItemText primary={t("Theme Mode")} />
<GuardState <GuardState
value={theme_mode} value={theme_mode}
onCatch={onError} onCatch={onError}
@ -70,8 +67,7 @@ const SettingVerge = ({ onError }: Props) => {
</GuardState> </GuardState>
</SettingItem> </SettingItem>
<SettingItem> <SettingItem label={t("Theme Blur")}>
<ListItemText primary={t("Theme Blur")} />
<GuardState <GuardState
value={theme_blur ?? false} value={theme_blur ?? false}
valueProps="checked" valueProps="checked"
@ -84,8 +80,7 @@ const SettingVerge = ({ onError }: Props) => {
</GuardState> </GuardState>
</SettingItem> </SettingItem>
<SettingItem> <SettingItem label={t("Traffic Graph")}>
<ListItemText primary={t("Traffic Graph")} />
<GuardState <GuardState
value={traffic_graph ?? true} value={traffic_graph ?? true}
valueProps="checked" valueProps="checked"
@ -98,34 +93,41 @@ const SettingVerge = ({ onError }: Props) => {
</GuardState> </GuardState>
</SettingItem> </SettingItem>
<SettingItem> <SettingItem label={t("Theme Setting")}>
<ListItemText primary={t("Theme Setting")} />
<IconButton <IconButton
color="inherit" color="inherit"
size="small" size="small"
sx={{ my: "2px" }}
onClick={() => setThemeOpen(true)} onClick={() => setThemeOpen(true)}
> >
<ArrowForward /> <ArrowForward />
</IconButton> </IconButton>
</SettingItem> </SettingItem>
<SettingItem> <SettingItem label={t("Open App Dir")}>
<ListItemText primary={t("Open App Dir")} /> <IconButton
<IconButton color="inherit" size="small" onClick={openAppDir}> color="inherit"
size="small"
sx={{ my: "2px" }}
onClick={openAppDir}
>
<ArrowForward /> <ArrowForward />
</IconButton> </IconButton>
</SettingItem> </SettingItem>
<SettingItem> <SettingItem label={t("Open Logs Dir")}>
<ListItemText primary={t("Open Logs Dir")} /> <IconButton
<IconButton color="inherit" size="small" onClick={openLogsDir}> color="inherit"
size="small"
sx={{ my: "2px" }}
onClick={openLogsDir}
>
<ArrowForward /> <ArrowForward />
</IconButton> </IconButton>
</SettingItem> </SettingItem>
<SettingItem> <SettingItem label={t("Verge Version")}>
<ListItemText primary={t("Verge Version")} /> <Typography sx={{ py: "7px" }}>v{version}</Typography>
<Typography sx={{ py: "6px" }}>v{version}</Typography>
</SettingItem> </SettingItem>
<SettingTheme open={themeOpen} onClose={() => setThemeOpen(false)} /> <SettingTheme open={themeOpen} onClose={() => setThemeOpen(false)} />

36
src/components/setting/setting.tsx
View File

@ -1,10 +1,36 @@
import React from "react"; import React from "react";
import { List, ListItem, ListSubheader, styled } from "@mui/material"; import {
Box,
List,
ListItem,
ListItemText,
ListSubheader,
} from "@mui/material";
export const SettingItem = styled(ListItem)(() => ({ interface ItemProps {
paddingTop: 5, label: React.ReactNode;
paddingBottom: 5, extra?: React.ReactNode;
})); }
export const SettingItem: React.FC<ItemProps> = (props) => {
const { label, extra, children } = props;
const primary = !extra ? (
label
) : (
<Box sx={{ display: "flex", alignItems: "center" }}>
<span style={{ marginRight: 4 }}>{label}</span>
{extra}
</Box>
);
return (
<ListItem sx={{ pt: "5px", pb: "5px" }}>
<ListItemText primary={primary} />
{children}
</ListItem>
);
};
export const SettingList: React.FC<{ title: string }> = (props) => ( export const SettingList: React.FC<{ title: string }> = (props) => (
<List> <List>