feat: lite mode settings

src/components/setting/mods/lite-mode-viewer.tsx

@@ -0,0 +1,144 @@
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { useLockFn } from "ahooks";
+import { useTranslation } from "react-i18next";
+import {
+  List,
+  ListItem,
+  ListItemText,
+  TextField,
+  Typography,
+  InputAdornment,
+} from "@mui/material";
+import { useVerge } from "@/hooks/use-verge";
+import { BaseDialog, DialogRef, Notice, Switch } from "@/components/base";
+import { TooltipIcon } from "@/components/base/base-tooltip-icon";
+
+export const LiteModeViewer = forwardRef<DialogRef>((props, ref) => {
+  const { t } = useTranslation();
+  const { verge, patchVerge } = useVerge();
+
+  const [open, setOpen] = useState(false);
+  const [values, setValues] = useState({
+    autoEnterLiteMode: false,
+    autoEnterLiteModeDelay: 10, // 默认10分钟
+  });
+
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      setOpen(true);
+      setValues({
+        autoEnterLiteMode: verge?.auto_enter_lite_mode ?? false,
+        autoEnterLiteModeDelay: verge?.auto_enter_lite_mode_delay ?? 10,
+      });
+    },
+    close: () => setOpen(false),
+  }));
+
+  const onEnterLiteMode = useLockFn(async () => {
+    try {
+      await patchVerge({ enable_lite_mode: true });
+      setOpen(false);
+    } catch (err: any) {
+      Notice.error(err.message || err.toString());
+    }
+  });
+
+  const onSave = useLockFn(async () => {
+    try {
+      await patchVerge({
+        auto_enter_lite_mode: values.autoEnterLiteMode,
+        auto_enter_lite_mode_delay: values.autoEnterLiteModeDelay,
+      });
+      setOpen(false);
+    } catch (err: any) {
+      Notice.error(err.message || err.toString());
+    }
+  });
+
+  return (
+    <BaseDialog
+      open={open}
+      title={t("Lite Mode Settings")}
+      contentSx={{ width: 450 }}
+      okBtn={t("Save")}
+      cancelBtn={t("Cancel")}
+      onClose={() => setOpen(false)}
+      onCancel={() => setOpen(false)}
+      onOk={onSave}
+    >
+      <List>
+        <ListItem sx={{ padding: "5px 2px" }}>
+          <ListItemText primary={t("Enter Lite Mode Now")} />
+          <Typography 
+            variant="button" 
+            sx={{ 
+              cursor: "pointer", 
+              color: "primary.main", 
+              "&:hover": { textDecoration: "underline" } 
+            }}
+            onClick={onEnterLiteMode}
+          >
+            {t("Enable")}
+          </Typography>
+        </ListItem>
+
+        <ListItem sx={{ padding: "5px 2px" }}>
+          <ListItemText
+            primary={t("Auto Enter Lite Mode")}
+            sx={{ maxWidth: "fit-content" }}
+          />
+          <TooltipIcon
+            title={t("Auto Enter Lite Mode Info")}
+            sx={{ opacity: "0.7" }}
+          />
+          <Switch
+            edge="end"
+            checked={values.autoEnterLiteMode}
+            onChange={(_, c) =>
+              setValues((v) => ({ ...v, autoEnterLiteMode: c }))
+            }
+            sx={{ marginLeft: "auto" }}
+          />
+        </ListItem>
+
+        {values.autoEnterLiteMode && (
+          <>
+            <ListItem sx={{ padding: "5px 2px" }}>
+              <ListItemText primary={t("Auto Enter Lite Mode Delay")} />
+              <TextField
+                autoComplete="off"
+                size="small"
+                type="number"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+                sx={{ width: 150 }}
+                value={values.autoEnterLiteModeDelay}
+                onChange={(e) =>
+                  setValues((v) => ({
+                    ...v,
+                    autoEnterLiteModeDelay: parseInt(e.target.value) || 1,
+                  }))
+                }
+                slotProps={{
+                  input: {
+                    endAdornment: (
+                      <InputAdornment position="end">{t("mins")}</InputAdornment>
+                    )
+                  }
+                }}
+              />
+            </ListItem>
+            
+            <ListItem sx={{ padding: "5px 2px" }}>
+              <Typography variant="body2" color="text.secondary" sx={{ fontStyle: "italic" }}>
+                {t("When closing the window, Lite Mode will be automatically activated after _n minutes", 
+                   { n: values.autoEnterLiteModeDelay })}
+              </Typography>
+            </ListItem>
+          </>
+        )}
+      </List>
+    </BaseDialog>
+  );
+}); 

src/components/setting/setting-verge-advanced.tsx

@@ -21,6 +21,7 @@ import { ThemeViewer } from "./mods/theme-viewer";
 import { LayoutViewer } from "./mods/layout-viewer";
 import { UpdateViewer } from "./mods/update-viewer";
 import { BackupViewer } from "./mods/backup-viewer";
+import { LiteModeViewer } from "./mods/lite-mode-viewer";
 import { TooltipIcon } from "@/components/base/base-tooltip-icon";
 import { ContentCopyRounded } from "@mui/icons-material";
 
@@ -39,6 +40,7 @@ const SettingVergeAdvanced = ({ onError }: Props) => {
   const layoutRef = useRef<DialogRef>(null);
   const updateRef = useRef<DialogRef>(null);
   const backupRef = useRef<DialogRef>(null);
+  const liteModeRef = useRef<DialogRef>(null);
 
   const onCheckUpdate = async () => {
     try {
@@ -67,6 +69,7 @@ const SettingVergeAdvanced = ({ onError }: Props) => {
       <LayoutViewer ref={layoutRef} />
       <UpdateViewer ref={updateRef} />
       <BackupViewer ref={backupRef} />
+      <LiteModeViewer ref={liteModeRef} />
 
       <SettingItem
         onClick={() => backupRef.current?.open()}
@@ -104,11 +107,11 @@ const SettingVergeAdvanced = ({ onError }: Props) => {
       <SettingItem onClick={openDevTools} label={t("Open Dev Tools")} />
 
       <SettingItem
-        label={t("Lite Mode")}
+        label={t("Lite Mode Settings")}
         extra={
           <TooltipIcon title={t("Lite Mode Info")} sx={{ opacity: "0.7" }} />
         }
-        onClick={() => patchVerge({ enable_lite_mode: true })}
+        onClick={() => liteModeRef.current?.open()}
       />
 
       <SettingItem

src/locales/en.json

@@ -453,6 +453,12 @@
   "Enable Tray Speed": "Enable Tray Speed",
   "Lite Mode": "Lightweight Mode",
   "Lite Mode Info": "Close the GUI and keep only the kernel running",
+  "Lite Mode Settings": "Lite Mode Settings",
+  "Enter Lite Mode Now": "Enter Lite Mode Now",
+  "Auto Enter Lite Mode": "Auto Enter Lite Mode",
+  "Auto Enter Lite Mode Info": "Enable to automatically activate Lite Mode after the window is closed for a period of time",
+  "Auto Enter Lite Mode Delay": "Auto Enter Lite Mode Delay",
+  "When closing the window, Lite Mode will be automatically activated after _n minutes": "When closing the window, Lite Mode will be automatically activated after {{n}} minutes",
   "Config Validation Failed": "Subscription configuration validation failed. Please check the subscription configuration file; modifications have been rolled back.",
   "Boot Config Validation Failed": "Boot subscription configuration validation failed. Started with the default configuration; please check the subscription configuration file.",
   "Core Change Config Validation Failed": "Configuration validation failed when switching the kernel. Started with the default configuration; please check the subscription configuration file.",

src/locales/zh.json

@@ -453,6 +453,12 @@
   "Enable Tray Speed": "启用托盘速率",
   "Lite Mode": "轻量模式",
   "Lite Mode Info": "关闭GUI界面，仅保留内核运行",
+  "Lite Mode Settings": "轻量模式设置",
+  "Enter Lite Mode Now": "立即进入轻量模式",
+  "Auto Enter Lite Mode": "自动进入轻量模式",
+  "Auto Enter Lite Mode Info": "启用后，将在窗口关闭一段时间后自动激活轻量模式",
+  "Auto Enter Lite Mode Delay": "自动进入轻量模式延迟",
+  "When closing the window, Lite Mode will be automatically activated after _n minutes": "关闭窗口后，轻量模式将在 {{n}} 分钟后自动激活",
   "Config Validation Failed": "订阅配置校验失败，请检查订阅配置文件，变更已撤销，错误详情：",
   "Boot Config Validation Failed": "启动订阅配置校验失败，已使用默认配置启动；请检查订阅配置文件，错误详情：",
   "Core Change Config Validation Failed": "切换内核时配置校验失败，已使用默认配置启动；请检查订阅配置文件，错误详情：",

src/services/types.d.ts

@@ -740,6 +740,8 @@ interface IVergeConfig {
   enable_tray_speed?: boolean;
   enable_tun_mode?: boolean;
   enable_lite_mode?: boolean;
+  auto_enter_lite_mode?: boolean;
+  auto_enter_lite_mode_delay?: number;
   enable_auto_launch?: boolean;
   enable_silent_start?: boolean;
   enable_system_proxy?: boolean;