Style: modify proxy pages

src/components/setting/mods/sysproxy-viewer.tsx

@@ -1,6 +1,8 @@
 import { forwardRef, useImperativeHandle, useState } from "react";
 import { useLockFn } from "ahooks";
 import { useTranslation } from "react-i18next";
+import { IconButton, Tooltip } from "@mui/material";
+import { InfoRounded } from "@mui/icons-material";
 import {
   Box,
   InputAdornment,
@@ -103,7 +105,7 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
     <BaseDialog
       open={open}
       title={t("System Proxy Setting")}
-      contentSx={{ width: 450, maxHeight: 300 }}
+      contentSx={{ width: 450, maxHeight: 565 }}
       okBtn={t("Save")}
       cancelBtn={t("Cancel")}
       onClose={() => setOpen(false)}
@@ -111,6 +113,39 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
       onOk={onSave}
     >
       <List>
+        <Box
+          sx={{
+            border: "1px solid #bbb",
+            borderRadius: "5px",
+            padding: "8px",
+          }}
+        >
+          <Typography variant="body1" sx={{ fontSize: "18px" }}>
+            {t("Current System Proxy")}
+          </Typography>
+          <FlexBox>
+            <Typography className="label">{t("Enable status")}</Typography>
+            <Typography className="value">
+              {value.pac
+                ? autoproxy?.enable
+                  ? t("Enabled")
+                  : t("Disabled")
+                : sysproxy?.enable
+                ? t("Enabled")
+                : t("Disabled")}
+            </Typography>
+          </FlexBox>
+          {!value.pac && (
+            <>
+              <FlexBox>
+                <Typography className="label">{t("Server Addr")}</Typography>
+                <Typography className="value">
+                  {sysproxy?.server ? sysproxy.server : t("Not available")}
+                </Typography>
+              </FlexBox>
+            </>
+          )}
+        </Box>
         <ListItem sx={{ padding: "5px 2px" }}>
           <ListItemText primary={t("Use PAC Mode")} />
           <Switch
@@ -120,8 +155,17 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
             onChange={(_, e) => setValue((v) => ({ ...v, pac: e }))}
           />
         </ListItem>
+
         <ListItem sx={{ padding: "5px 2px" }}>
           <ListItemText primary={t("Proxy Guard")} />
+          <Tooltip title={t("Proxy Guard Info")}>
+            <IconButton color="inherit" size="small">
+              <InfoRounded
+                fontSize="inherit"
+                style={{ cursor: "pointer", opacity: 0.75 }}
+              />
+            </IconButton>
+          </Tooltip>
           <Switch
             edge="end"
             disabled={!enabled}
@@ -148,15 +192,13 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
             }}
           />
         </ListItem>
+
         {!value.pac && (
           <>
-            <ListItem sx={{ padding: "5px 2px", alignItems: "start" }}>
-              <ListItemText
-                primary={t("Proxy Bypass")}
-                sx={{ padding: "3px 0" }}
-              />
-            </ListItem>
-            <ListItem sx={{ padding: "5px 2px" }}>
+            <FlexBox>
+              <Typography className="label">{t("Proxy Bypass")}</Typography>
+            </FlexBox>
+            <FlexBox>
               <TextField
                 disabled={!enabled}
                 size="small"
@@ -170,9 +212,24 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
                   setValue((v) => ({ ...v, bypass: e.target.value }))
                 }
               />
-            </ListItem>
+            </FlexBox>
+            <FlexBox>
+              <Typography className="label">{t("Bypass")}</Typography>
+            </FlexBox>
+            <FlexBox>
+              <TextField
+                disabled={true}
+                size="small"
+                autoComplete="off"
+                multiline
+                rows={4}
+                sx={{ width: "100%" }}
+                value={sysproxy?.bypass || "-"}
+              />
+            </FlexBox>
           </>
         )}
+
         {value.pac && (
           <>
             <ListItem sx={{ padding: "5px 2px", alignItems: "start" }}>
@@ -209,53 +266,14 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
             </ListItem>
           </>
         )}
-      </List>
-
-      <Box sx={{ mt: 2.5 }}>
-        <Typography variant="body1" sx={{ fontSize: "18px", mb: 1 }}>
-          {t("Current System Proxy")}
-        </Typography>
-
-        <FlexBox>
-          <Typography className="label">{t("Enable status")}</Typography>
-          <Typography className="value">
-            {value.pac
-              ? (!!autoproxy?.enable).toString()
-              : (!!sysproxy?.enable).toString()}
-          </Typography>
-        </FlexBox>
-        {!value.pac && (
-          <>
-            <FlexBox>
-              <Typography className="label">{t("Server Addr")}</Typography>
-              <Typography className="value">
-                {sysproxy?.server || "-"}
-              </Typography>
-            </FlexBox>
 
-            <FlexBox>
-              <Typography className="label">{t("Bypass")}</Typography>
-            </FlexBox>
-            <FlexBox>
-              <TextField
-                disabled={true}
-                size="small"
-                autoComplete="off"
-                multiline
-                rows={4}
-                sx={{ width: "100%" }}
-                value={sysproxy?.bypass || "-"}
-              />
-            </FlexBox>
-          </>
-        )}
         {value.pac && (
           <FlexBox>
             <Typography className="label">{t("PAC URL")}</Typography>
             <Typography className="value">{autoproxy?.url || "-"}</Typography>
           </FlexBox>
         )}
-      </Box>
+      </List>
     </BaseDialog>
   );
 });
@@ -266,6 +284,6 @@ const FlexBox = styled("div")`
 
   .label {
     flex: none;
-    width: 85px;
+    //width: 85px;
   }
 `;

src/components/setting/mods/theme-viewer.tsx

@@ -81,7 +81,7 @@ export const ThemeViewer = forwardRef<DialogRef>((props, ref) => {
       title={t("Theme Setting")}
       okBtn={t("Save")}
       cancelBtn={t("Cancel")}
-      contentSx={{ width: 400, maxHeight: 300, overflow: "auto", pb: 0 }}
+      contentSx={{ width: 400, maxHeight: 505, overflow: "auto", pb: 0 }}
       onClose={() => setOpen(false)}
       onCancel={() => setOpen(false)}
       onOk={onSave}

src/components/setting/setting-system.tsx

@@ -123,16 +123,26 @@ const SettingSystem = ({ onError }: Props) => {
       <SettingItem
         label={t("System Proxy")}
         extra={
-          <IconButton
-            color="inherit"
-            size="small"
-            onClick={() => sysproxyRef.current?.open()}
-          >
-            <Settings
-              fontSize="inherit"
-              style={{ cursor: "pointer", opacity: 0.75 }}
-            />
-          </IconButton>
+          <>
+            <Tooltip title={t("System Proxy Info")} placement="top">
+              <IconButton color="inherit" size="small">
+                <InfoRounded
+                  fontSize="inherit"
+                  style={{ cursor: "pointer", opacity: 0.75 }}
+                />
+              </IconButton>
+            </Tooltip>
+            <IconButton
+              color="inherit"
+              size="small"
+              onClick={() => sysproxyRef.current?.open()}
+            >
+              <Settings
+                fontSize="inherit"
+                style={{ cursor: "pointer", opacity: 0.75 }}
+              />
+            </IconButton>
+          </>
         }
       >
         <GuardState

src/locales/en.json

@@ -115,19 +115,24 @@
   "Auto Launch": "Auto Launch",
   "Silent Start": "Silent Start",
   "System Proxy": "System Proxy",
+  "System Proxy Info": "Enable to modify the operating system's proxy settings. If enabling fails, modify the operating system's proxy settings manually",
   "System Proxy Setting": "System Proxy Setting",
   "Open UWP tool": "Open UWP tool",
   "Update GeoData": "Update GeoData",
   "Use PAC Mode": "Use PAC Mode",
-  "PAC URL": "PAC URL",
+  "PAC URL": "PAC URL: ",
   "PAC Script Content": "PAC Script Content",
   "Proxy Guard": "Proxy Guard",
+  "Proxy Guard Info": "Enable to prevent other software from modifying the operating system's proxy settings",
   "Guard Duration": "Guard Duration",
-  "Proxy Bypass": "Proxy Bypass",
+  "Proxy Bypass": "Proxy Bypass Settings:",
   "Current System Proxy": "Current System Proxy",
-  "Enable status": "Enable status",
-  "Server Addr": "Server Addr",
-  "Bypass": "Bypass",
+  "Enable status": "Enable Status:",
+  "Enabled": "Enabled",
+  "Disabled": "Disabled",
+  "Server Addr": "Server Addr:",
+  "Not available": "Not available",
+  "Bypass": "Bypass:",
   "Theme Mode": "Theme Mode",
   "Tray Click Event": "Tray Click Event",
   "Copy Env Type": "Copy Env Type",

src/locales/zh.json

@@ -115,18 +115,23 @@
   "Auto Launch": "开机自启",
   "Silent Start": "静默启动",
   "System Proxy": "系统代理",
+  "System Proxy Info": "打开此开关修改操作系统的代理设置，如果开启失败，可手动修改操作系统的代理设置",
   "System Proxy Setting": "系统代理设置",
   "Open UWP tool": "UWP 工具",
   "Update GeoData": "更新 GeoData",
   "Use PAC Mode": "使用PAC模式",
-  "PAC URL": "PAC 地址",
-  "PAC Script Content": "PAC 脚本内容",
+  "PAC URL": "PAC地址：",
+  "PAC Script Content": "PAC脚本内容",
   "Proxy Guard": "系统代理守卫",
+  "Proxy Guard Info": "开启以防止其他软件修改操作系统的代理设置",
   "Guard Duration": "代理守卫间隔",
-  "Proxy Bypass": "代理绕过",
+  "Proxy Bypass": "代理绕过设置：",
   "Current System Proxy": "当前系统代理",
   "Enable status": "开启状态：",
+  "Enabled": "成功",
+  "Disabled": "失败",
   "Server Addr": "服务地址：",
+  "Not available": "不可用",
   "Bypass": "当前绕过：",
   "Theme Mode": "主题模式",
   "Tray Click Event": "托盘点击事件",