133 lines
3.7 KiB
TypeScript
133 lines
3.7 KiB
TypeScript
import useSWR from "swr";
|
|
import { forwardRef, useImperativeHandle, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Checkbox, Divider, Stack, Tooltip, Typography } from "@mui/material";
|
|
import { InfoRounded } from "@mui/icons-material";
|
|
import { getRuntimeExists } from "@/services/cmds";
|
|
import {
|
|
HANDLE_FIELDS,
|
|
DEFAULT_FIELDS,
|
|
OTHERS_FIELDS,
|
|
} from "@/utils/clash-fields";
|
|
import { BaseDialog, DialogRef } from "@/components/base";
|
|
import { useProfiles } from "@/hooks/use-profiles";
|
|
import { Notice } from "@/components/base";
|
|
|
|
const fieldSorter = (a: string, b: string) => {
|
|
if (a.includes("-") === a.includes("-")) {
|
|
if (a.length === b.length) return a.localeCompare(b);
|
|
return a.length - b.length;
|
|
} else if (a.includes("-")) return 1;
|
|
else if (b.includes("-")) return -1;
|
|
return 0;
|
|
};
|
|
|
|
const otherFields = [...OTHERS_FIELDS].sort(fieldSorter);
|
|
const handleFields = [...HANDLE_FIELDS, ...DEFAULT_FIELDS].sort(fieldSorter);
|
|
|
|
export const ClashFieldViewer = forwardRef<DialogRef>((props, ref) => {
|
|
const { t } = useTranslation();
|
|
|
|
const { profiles = {}, patchProfiles } = useProfiles();
|
|
const { data: existsKeys = [], mutate: mutateExists } = useSWR(
|
|
"getRuntimeExists",
|
|
getRuntimeExists
|
|
);
|
|
|
|
const [open, setOpen] = useState(false);
|
|
const [selected, setSelected] = useState<string[]>([]);
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
open: () => {
|
|
mutateExists();
|
|
setSelected(profiles.valid || []);
|
|
setOpen(true);
|
|
},
|
|
close: () => setOpen(false),
|
|
}));
|
|
|
|
const handleChange = (item: string) => {
|
|
if (!item) return;
|
|
|
|
setSelected((old) =>
|
|
old.includes(item) ? old.filter((e) => e !== item) : [...old, item]
|
|
);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
setOpen(false);
|
|
|
|
const oldSet = new Set(profiles.valid || []);
|
|
const curSet = new Set(selected);
|
|
const joinSet = new Set(selected.concat([...oldSet]));
|
|
|
|
if (curSet.size === oldSet.size && curSet.size === joinSet.size) return;
|
|
|
|
try {
|
|
await patchProfiles({ valid: [...curSet] });
|
|
// Notice.success("Refresh clash config", 1000);
|
|
} catch (err: any) {
|
|
Notice.error(err?.message || err.toString());
|
|
}
|
|
};
|
|
|
|
return (
|
|
<BaseDialog
|
|
open={open}
|
|
title={t("Clash Field")}
|
|
contentSx={{
|
|
pb: 0,
|
|
width: 320,
|
|
height: 300,
|
|
overflowY: "auto",
|
|
userSelect: "text",
|
|
}}
|
|
okBtn={t("Save")}
|
|
cancelBtn={t("Back")}
|
|
onClose={() => setOpen(false)}
|
|
onCancel={() => setOpen(false)}
|
|
onOk={handleSave}
|
|
>
|
|
{otherFields.map((item) => {
|
|
const inSelect = selected.includes(item);
|
|
const inConfig = existsKeys.includes(item);
|
|
|
|
return (
|
|
<Stack key={item} mb={0.5} direction="row" alignItems="center">
|
|
<Checkbox
|
|
checked={inSelect}
|
|
size="small"
|
|
sx={{ p: 0.5 }}
|
|
onChange={() => handleChange(item)}
|
|
/>
|
|
<Typography width="100%">{item}</Typography>
|
|
|
|
{!inSelect && inConfig && <WarnIcon />}
|
|
</Stack>
|
|
);
|
|
})}
|
|
|
|
<Divider sx={{ my: 1 }}>
|
|
<Typography color="text.secondary" fontSize={14}>
|
|
Clash Verge Control Fields
|
|
</Typography>
|
|
</Divider>
|
|
|
|
{handleFields.map((item) => (
|
|
<Stack key={item} mb={0.5} direction="row" alignItems="center">
|
|
<Checkbox defaultChecked disabled size="small" sx={{ p: 0.5 }} />
|
|
<Typography>{item}</Typography>
|
|
</Stack>
|
|
))}
|
|
</BaseDialog>
|
|
);
|
|
});
|
|
|
|
function WarnIcon() {
|
|
return (
|
|
<Tooltip title="The field exists in the config but not enabled.">
|
|
<InfoRounded color="warning" sx={{ cursor: "pointer", opacity: 0.5 }} />
|
|
</Tooltip>
|
|
);
|
|
}
|