New Interface (initial commit)

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

@@ -1,20 +1,38 @@
 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, Switch } from "@/components/base";
-import { TooltipIcon } from "@/components/base/base-tooltip-icon";
 import { entry_lightweight_mode } from "@/services/cmds";
 import { showNotice } from "@/services/noticeService";
 
+// Новые импорты
+import { DialogRef, Switch } from "@/components/base";
+import { TooltipIcon } from "@/components/base/base-tooltip-icon";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+
+// Наш переиспользуемый компонент для строки настроек
+const SettingRow = ({ label, extra, children }: { label: React.ReactNode; extra?: React.ReactNode; children?: React.ReactNode; }) => (
+    <div className="flex items-center justify-between py-3">
+        <div className="flex items-center gap-2">
+            <p className="text-sm font-medium">{label}</p>
+            {extra && <div className="text-muted-foreground">{extra}</div>}
+        </div>
+        <div>{children}</div>
+    </div>
+);
+
+
 export const LiteModeViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
   const { verge, patchVerge } = useVerge();
@@ -22,7 +40,7 @@ export const LiteModeViewer = forwardRef<DialogRef>((props, ref) => {
   const [open, setOpen] = useState(false);
   const [values, setValues] = useState({
     autoEnterLiteMode: false,
-    autoEnterLiteModeDelay: 10, // 默认10分钟
+    autoEnterLiteModeDelay: 10,
   });
 
   useImperativeHandle(ref, () => ({
@@ -43,103 +61,73 @@ export const LiteModeViewer = forwardRef<DialogRef>((props, ref) => {
         auto_light_weight_minutes: values.autoEnterLiteModeDelay,
       });
       setOpen(false);
+      showNotice("success", t("Saved Successfully"));
     } catch (err: any) {
       showNotice("error", err.message || err.toString());
     }
   });
 
   return (
-    <BaseDialog
-      open={open}
-      title={t("LightWeight 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 LightWeight Mode Now")} />
-          <Typography
-            variant="button"
-            sx={{
-              cursor: "pointer",
-              color: "primary.main",
-              "&:hover": { textDecoration: "underline" },
-            }}
-            onClick={async () => await entry_lightweight_mode()}
-          >
-            {t("Enable")}
-          </Typography>
-        </ListItem>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("LightWeight Mode Settings")}</DialogTitle>
+        </DialogHeader>
 
-        <ListItem sx={{ padding: "5px 2px" }}>
-          <ListItemText
-            primary={t("Auto Enter LightWeight Mode")}
-            sx={{ maxWidth: "fit-content" }}
-          />
-          <TooltipIcon
-            title={t("Auto Enter LightWeight Mode Info")}
-            sx={{ opacity: "0.7" }}
-          />
-          <Switch
-            edge="end"
-            checked={values.autoEnterLiteMode}
-            onChange={(_, c) =>
-              setValues((v) => ({ ...v, autoEnterLiteMode: c }))
-            }
-            sx={{ marginLeft: "auto" }}
-          />
-        </ListItem>
+        <div className="py-4 space-y-2">
+            <SettingRow label={t("Enter LightWeight Mode Now")}>
+                {/* --- НАЧАЛО ИЗМЕНЕНИЙ --- */}
+                {/* Меняем variant="link" на "outline" для вида кнопки */}
+                <Button variant="outline" size="sm" onClick={entry_lightweight_mode}>
+                    {t("Enable")}
+                </Button>
+                {/* --- КОНЕЦ ИЗМЕНЕНИЙ --- */}
+            </SettingRow>
 
-        {values.autoEnterLiteMode && (
-          <>
-            <ListItem sx={{ padding: "5px 2px" }}>
-              <ListItemText primary={t("Auto Enter LightWeight 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>
+            <SettingRow
+                label={t("Auto Enter LightWeight Mode")}
+                extra={<TooltipIcon tooltip={t("Auto Enter LightWeight Mode Info")} />}
+            >
+                <Switch
+                    checked={values.autoEnterLiteMode}
+                    onCheckedChange={(c) => setValues((v) => ({ ...v, autoEnterLiteMode: c }))}
+                />
+            </SettingRow>
 
-            <ListItem sx={{ padding: "5px 2px" }}>
-              <Typography
-                variant="body2"
-                color="text.secondary"
-                sx={{ fontStyle: "italic" }}
-              >
-                {t(
-                  "When closing the window, LightWeight Mode will be automatically activated after _n minutes",
-                  { n: values.autoEnterLiteModeDelay },
-                )}
-              </Typography>
-            </ListItem>
-          </>
-        )}
-      </List>
-    </BaseDialog>
+            {values.autoEnterLiteMode && (
+                <div className="pl-4">
+                    <SettingRow label={t("Auto Enter LightWeight Mode Delay")}>
+                        <div className="flex items-center gap-2">
+                            <Input
+                                type="number"
+                                className="w-24 h-8"
+                                value={values.autoEnterLiteModeDelay}
+                                onChange={(e) =>
+                                    setValues((v) => ({
+                                        ...v,
+                                        autoEnterLiteModeDelay: parseInt(e.target.value) || 1,
+                                    }))
+                                }
+                            />
+                            <span className="text-sm text-muted-foreground">{t("mins")}</span>
+                        </div>
+                    </SettingRow>
+
+                    <p className="text-xs text-muted-foreground italic mt-2">
+                        {t(
+                            "When closing the window, LightWeight Mode will be automatically activated after _n minutes",
+                            { n: values.autoEnterLiteModeDelay }
+                        )}
+                    </p>
+                </div>
+            )}
+        </div>
+
+        <DialogFooter>
+          <DialogClose asChild><Button type="button" variant="outline">{t("Cancel")}</Button></DialogClose>
+          <Button type="button" onClick={onSave}>{t("Save")}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 });