134 lines
4.9 KiB
TypeScript
134 lines
4.9 KiB
TypeScript
import { forwardRef, useImperativeHandle, useState } from "react";
|
|
import { useLockFn } from "ahooks";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useVerge } from "@/hooks/use-verge";
|
|
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();
|
|
|
|
const [open, setOpen] = useState(false);
|
|
const [values, setValues] = useState({
|
|
autoEnterLiteMode: false,
|
|
autoEnterLiteModeDelay: 10,
|
|
});
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
open: () => {
|
|
setOpen(true);
|
|
setValues({
|
|
autoEnterLiteMode: verge?.enable_auto_light_weight_mode ?? false,
|
|
autoEnterLiteModeDelay: verge?.auto_light_weight_minutes ?? 10,
|
|
});
|
|
},
|
|
close: () => setOpen(false),
|
|
}));
|
|
|
|
const onSave = useLockFn(async () => {
|
|
try {
|
|
await patchVerge({
|
|
enable_auto_light_weight_mode: values.autoEnterLiteMode,
|
|
auto_light_weight_minutes: values.autoEnterLiteModeDelay,
|
|
});
|
|
setOpen(false);
|
|
showNotice("success", t("Saved Successfully"));
|
|
} catch (err: any) {
|
|
showNotice("error", err.message || err.toString());
|
|
}
|
|
});
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>{t("LightWeight Mode Settings")}</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
{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>
|
|
);
|
|
});
|