Style: modify proxy pages

2024-11-15 19:22:26 +08:00 · 2024-06-07 10:32:27 +08:00 · 2024-06-07 10:32:27 +08:00 · 96e044566c
commit 96e044566c
parent 726ad84d7f
5 changed files with 107 additions and 69 deletions
--- a/src/components/setting/mods/sysproxy-viewer.tsx
+++ b/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;
  }
 `;
--- a/src/components/setting/mods/theme-viewer.tsx
+++ b/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}
--- a/src/components/setting/setting-system.tsx
+++ b/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
--- a/src/locales/en.json
+++ b/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",
--- a/src/locales/zh.json
+++ b/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": "托盘点击事件",