feat: adjust setting page style

src/components/setting/mods/theme-mode-switch.tsx

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

src/components/setting/setting-clash.tsx

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

src/components/setting/setting-system.tsx

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

src/components/setting/setting-verge.tsx

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

src/components/setting/setting.tsx

@@ -1,10 +1,36 @@
 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)(() => ({
-  paddingTop: 5,
-  paddingBottom: 5,
-}));
+interface ItemProps {
+  label: React.ReactNode;
+  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) => (
   <List>