1045 lines
37 KiB
TypeScript
1045 lines
37 KiB
TypeScript
import { useEffect, useMemo, useState } from "react";
|
|
import { useLockFn } from "ahooks";
|
|
import yaml from "js-yaml";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
DndContext,
|
|
closestCenter,
|
|
KeyboardSensor,
|
|
PointerSensor,
|
|
useSensor,
|
|
useSensors,
|
|
DragEndEvent,
|
|
} from "@dnd-kit/core";
|
|
import {
|
|
SortableContext,
|
|
sortableKeyboardCoordinates,
|
|
useSortable,
|
|
} from "@dnd-kit/sortable";
|
|
import { CSS } from "@dnd-kit/utilities";
|
|
import { Virtuoso } from "react-virtuoso";
|
|
import MonacoEditor from "react-monaco-editor";
|
|
import { useForm } from "react-hook-form";
|
|
|
|
import {
|
|
getNetworkInterfaces,
|
|
readProfileFile,
|
|
saveProfileFile,
|
|
} from "@/services/cmds";
|
|
import getSystem from "@/utils/get-system";
|
|
import { useThemeMode } from "@/services/states";
|
|
import { BaseSearchBox } from "../base/base-search-box";
|
|
import { showNotice } from "@/services/noticeService";
|
|
import { cn } from "@root/lib/utils";
|
|
|
|
// --- Компоненты shadcn/ui и иконки ---
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter,
|
|
DialogClose,
|
|
} from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@/components/ui/popover";
|
|
import {
|
|
Command,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
} from "@/components/ui/command";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormDescription,
|
|
} from "@/components/ui/form";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import {
|
|
Check,
|
|
ChevronsUpDown,
|
|
GripVertical,
|
|
Trash2,
|
|
Undo2,
|
|
ArrowDownToLine,
|
|
ArrowUpToLine,
|
|
} from "lucide-react";
|
|
|
|
// --- Вспомогательные функции, константы и валидаторы ---
|
|
const portValidator = (value: string): boolean =>
|
|
/^(?:[1-9]\d{0,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/.test(
|
|
value,
|
|
);
|
|
const ipv4CIDRValidator = (value: string): boolean =>
|
|
/^(?:(?:[1-9]?[0-9]|1[0-9][0-9]|2(?:[0-4][0-9]|5[0-5]))\.){3}(?:[1-9]?[0-9]|1[0-9][0-9]|2(?:[0-4][0-9]|5[0-5]))(?:\/(?:[12]?[0-9]|3[0-2]))?$/.test(
|
|
value,
|
|
);
|
|
const ipv6CIDRValidator = (value: string): boolean =>
|
|
/^([0-9a-fA-F]{1,4}(?::[0-9a-fA-F]{1,4}){7}|::|:(?::[0-9a-fA-F]{1,4}){1,6}|[0-9a-fA-F]{1,4}:(?::[0-9a-fA-F]{1,4}){1,5}|(?:[0-9a-fA-F]{1,4}:){2}(?::[0-9a-fA-F]{1,4}){1,4}|(?:[0-9a-fA-F]{1,4}:){3}(?::[0-9a-fA-F]{1,4}){1,3}|(?:[0-9a-fA-F]{1,4}:){4}(?::[0-9a-fA-F]{1,4}){1,2}|(?:[0-9a-fA-F]{1,4}:){5}:[0-9a-fA-F]{1,4}|(?:[0-9a-fA-F]{1,4}:){1,6}:)\/(?:12[0-8]|1[01][0-9]|[1-9]?[0-9])$/.test(
|
|
value,
|
|
);
|
|
const builtinProxyPolicies = ["DIRECT", "REJECT", "REJECT-DROP", "PASS"];
|
|
interface Props {
|
|
proxiesUid: string;
|
|
mergeUid: string;
|
|
profileUid: string;
|
|
property: string;
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onSave?: (prev?: string, curr?: string) => void;
|
|
}
|
|
|
|
// --- Новый компонент Combobox (одиночный выбор) ---
|
|
const Combobox = ({
|
|
options,
|
|
value,
|
|
onSelect,
|
|
placeholder,
|
|
}: {
|
|
options: string[];
|
|
value: string;
|
|
onSelect: (value: string) => void;
|
|
placeholder?: string;
|
|
}) => {
|
|
const [open, setOpen] = useState(false);
|
|
return (
|
|
<Popover open={open} onOpenChange={setOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={open}
|
|
className="w-full justify-between font-normal"
|
|
>
|
|
{value || placeholder || "Select..."}
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-[--radix-popover-trigger-width] p-0">
|
|
<Command>
|
|
<CommandInput placeholder="Search..." />
|
|
<CommandEmpty>No results found.</CommandEmpty>
|
|
<CommandList>
|
|
{options.map((option) => (
|
|
<CommandItem
|
|
key={option}
|
|
value={option}
|
|
onSelect={(currentValue) => {
|
|
onSelect(
|
|
options.find((opt) => opt.toLowerCase() === currentValue) ||
|
|
"",
|
|
);
|
|
setOpen(false);
|
|
}}
|
|
>
|
|
<Check
|
|
className={cn(
|
|
"mr-2 h-4 w-4",
|
|
value === option ? "opacity-100" : "opacity-0",
|
|
)}
|
|
/>
|
|
{option}
|
|
</CommandItem>
|
|
))}
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
};
|
|
|
|
// --- Новый компонент MultiSelectCombobox (множественный выбор) ---
|
|
const MultiSelectCombobox = ({
|
|
options,
|
|
value,
|
|
onChange,
|
|
placeholder,
|
|
}: {
|
|
options: string[];
|
|
value: string[];
|
|
onChange: (value: string[]) => void;
|
|
placeholder?: string;
|
|
}) => {
|
|
const [open, setOpen] = useState(false);
|
|
const selectedSet = new Set(value);
|
|
|
|
const handleSelect = (currentValue: string) => {
|
|
const newSet = new Set(selectedSet);
|
|
if (newSet.has(currentValue)) {
|
|
newSet.delete(currentValue);
|
|
} else {
|
|
newSet.add(currentValue);
|
|
}
|
|
onChange(Array.from(newSet));
|
|
};
|
|
|
|
return (
|
|
<Popover open={open} onOpenChange={setOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={open}
|
|
className="w-full justify-between font-normal h-auto min-h-10"
|
|
>
|
|
<div className="flex gap-1 flex-wrap">
|
|
{value && value.length > 0 ? (
|
|
value.map((item) => (
|
|
<Badge key={item} variant="secondary">
|
|
{item}
|
|
</Badge>
|
|
))
|
|
) : (
|
|
<span className="text-muted-foreground">
|
|
{placeholder || "Select..."}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-[--radix-popover-trigger-width] p-0">
|
|
<Command>
|
|
<CommandInput placeholder="Search..." />
|
|
<CommandEmpty>No results found.</CommandEmpty>
|
|
<CommandList>
|
|
{options.map((option) => (
|
|
<CommandItem
|
|
key={option}
|
|
value={option}
|
|
onSelect={() => handleSelect(option)}
|
|
className="cursor-pointer"
|
|
>
|
|
<Check
|
|
className={cn(
|
|
"mr-2 h-4 w-4",
|
|
selectedSet.has(option) ? "opacity-100" : "opacity-0",
|
|
)}
|
|
/>
|
|
{option}
|
|
</CommandItem>
|
|
))}
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
};
|
|
|
|
// --- Новый компонент для элемента списка групп ---
|
|
const EditorGroupItem = ({
|
|
type,
|
|
group,
|
|
onDelete,
|
|
id,
|
|
}: {
|
|
type: string;
|
|
group: IProxyGroupConfig;
|
|
onDelete: () => void;
|
|
id: string;
|
|
}) => {
|
|
const {
|
|
attributes,
|
|
listeners,
|
|
setNodeRef,
|
|
transform,
|
|
transition,
|
|
isDragging,
|
|
} = useSortable({ id });
|
|
const style = {
|
|
transform: CSS.Transform.toString(transform),
|
|
transition,
|
|
zIndex: isDragging ? 100 : undefined,
|
|
};
|
|
const isDelete = type === "delete";
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
style={style}
|
|
className="flex items-center p-2 mb-1 rounded-md bg-secondary"
|
|
{...attributes}
|
|
>
|
|
<div
|
|
{...listeners}
|
|
className="cursor-grab p-1 text-muted-foreground hover:bg-accent rounded-sm"
|
|
>
|
|
<GripVertical className="h-5 w-5" />
|
|
</div>
|
|
<p
|
|
className={`flex-1 truncate text-sm ${isDelete ? "line-through text-muted-foreground" : ""}`}
|
|
>
|
|
{group.name}
|
|
</p>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-7 w-7"
|
|
onClick={onDelete}
|
|
>
|
|
{isDelete ? (
|
|
<Undo2 className="h-4 w-4" />
|
|
) : (
|
|
<Trash2 className="h-4 w-4 text-destructive" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const GroupsEditorViewer = (props: Props) => {
|
|
const { mergeUid, proxiesUid, profileUid, property, open, onClose, onSave } =
|
|
props;
|
|
const { t } = useTranslation();
|
|
const themeMode = useThemeMode();
|
|
const [prevData, setPrevData] = useState("");
|
|
const [currData, setCurrData] = useState("");
|
|
const [visualization, setVisualization] = useState(true);
|
|
const [match, setMatch] = useState(() => (_: string) => true);
|
|
const [interfaceNameList, setInterfaceNameList] = useState<string[]>([]);
|
|
|
|
const form = useForm<IProxyGroupConfig>({
|
|
defaultValues: {
|
|
type: "select",
|
|
name: "",
|
|
interval: 300,
|
|
timeout: 5000,
|
|
"max-failed-times": 5,
|
|
lazy: true,
|
|
},
|
|
});
|
|
const { control, watch, handleSubmit, getValues } = form;
|
|
|
|
const [groupList, setGroupList] = useState<IProxyGroupConfig[]>([]);
|
|
const [proxyPolicyList, setProxyPolicyList] = useState<string[]>([]);
|
|
const [proxyProviderList, setProxyProviderList] = useState<string[]>([]);
|
|
const [prependSeq, setPrependSeq] = useState<IProxyGroupConfig[]>([]);
|
|
const [appendSeq, setAppendSeq] = useState<IProxyGroupConfig[]>([]);
|
|
const [deleteSeq, setDeleteSeq] = useState<string[]>([]);
|
|
|
|
const filteredPrependSeq = useMemo(
|
|
() => prependSeq.filter((group) => match(group.name)),
|
|
[prependSeq, match],
|
|
);
|
|
const filteredGroupList = useMemo(
|
|
() => groupList.filter((group) => match(group.name)),
|
|
[groupList, match],
|
|
);
|
|
const filteredAppendSeq = useMemo(
|
|
() => appendSeq.filter((group) => match(group.name)),
|
|
[appendSeq, match],
|
|
);
|
|
|
|
const sensors = useSensors(
|
|
useSensor(PointerSensor),
|
|
useSensor(KeyboardSensor, {
|
|
coordinateGetter: sortableKeyboardCoordinates,
|
|
}),
|
|
);
|
|
|
|
const reorder = (
|
|
list: IProxyGroupConfig[],
|
|
startIndex: number,
|
|
endIndex: number,
|
|
) => {
|
|
const result = Array.from(list);
|
|
const [removed] = result.splice(startIndex, 1);
|
|
result.splice(endIndex, 0, removed);
|
|
return result;
|
|
};
|
|
|
|
const onPrependDragEnd = async (event: DragEndEvent) => {
|
|
const { active, over } = event;
|
|
if (over && active.id !== over.id) {
|
|
let activeIndex = 0;
|
|
let overIndex = 0;
|
|
prependSeq.forEach((item, index) => {
|
|
if (item.name === active.id) activeIndex = index;
|
|
if (item.name === over.id) overIndex = index;
|
|
});
|
|
setPrependSeq(reorder(prependSeq, activeIndex, overIndex));
|
|
}
|
|
};
|
|
|
|
const onAppendDragEnd = async (event: DragEndEvent) => {
|
|
const { active, over } = event;
|
|
if (over && active.id !== over.id) {
|
|
let activeIndex = 0;
|
|
let overIndex = 0;
|
|
appendSeq.forEach((item, index) => {
|
|
if (item.name === active.id) activeIndex = index;
|
|
if (item.name === over.id) overIndex = index;
|
|
});
|
|
setAppendSeq(reorder(appendSeq, activeIndex, overIndex));
|
|
}
|
|
};
|
|
|
|
const fetchContent = async () => {
|
|
try {
|
|
let data = await readProfileFile(property);
|
|
let obj = yaml.load(data) as ISeqProfileConfig | null;
|
|
setPrependSeq(obj?.prepend || []);
|
|
setAppendSeq(obj?.append || []);
|
|
setDeleteSeq(obj?.delete || []);
|
|
setPrevData(data);
|
|
setCurrData(data);
|
|
} catch (error) {
|
|
console.error("Failed to fetch or parse content:", error);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (currData === "" || !visualization) return;
|
|
try {
|
|
let obj = yaml.load(currData) as {
|
|
prepend: [];
|
|
append: [];
|
|
delete: [];
|
|
} | null;
|
|
setPrependSeq(obj?.prepend || []);
|
|
setAppendSeq(obj?.append || []);
|
|
setDeleteSeq(obj?.delete || []);
|
|
} catch (e) {
|
|
/* Ignore parsing errors while typing */
|
|
}
|
|
}, [visualization, currData]);
|
|
|
|
useEffect(() => {
|
|
if (prependSeq && appendSeq && deleteSeq && visualization) {
|
|
const serialize = () => {
|
|
try {
|
|
setCurrData(
|
|
yaml.dump(
|
|
{ prepend: prependSeq, append: appendSeq, delete: deleteSeq },
|
|
{ forceQuotes: true },
|
|
),
|
|
);
|
|
} catch (e: any) {
|
|
showNotice("error", e?.message || e?.toString() || "YAML dump error");
|
|
}
|
|
};
|
|
if (window.requestIdleCallback) {
|
|
window.requestIdleCallback(serialize);
|
|
} else {
|
|
setTimeout(serialize, 0);
|
|
}
|
|
}
|
|
}, [prependSeq, appendSeq, deleteSeq, visualization]);
|
|
|
|
const fetchProxyPolicy = async () => {
|
|
try {
|
|
let data = await readProfileFile(profileUid);
|
|
let proxiesData = await readProfileFile(proxiesUid);
|
|
let originGroupsObj = yaml.load(data) as {
|
|
"proxy-groups": IProxyGroupConfig[];
|
|
} | null;
|
|
let originProxiesObj = yaml.load(data) as { proxies: [] } | null;
|
|
let originProxies = originProxiesObj?.proxies || [];
|
|
let moreProxiesObj = yaml.load(proxiesData) as ISeqProfileConfig | null;
|
|
let morePrependProxies = moreProxiesObj?.prepend || [];
|
|
let moreAppendProxies = moreProxiesObj?.append || [];
|
|
let moreDeleteProxies =
|
|
moreProxiesObj?.delete || ([] as string[] | { name: string }[]);
|
|
let proxies = morePrependProxies.concat(
|
|
originProxies.filter(
|
|
(proxy: any) =>
|
|
!moreDeleteProxies.some(
|
|
(del: any) => (del.name || del) === proxy.name,
|
|
),
|
|
),
|
|
moreAppendProxies,
|
|
);
|
|
|
|
setProxyPolicyList(
|
|
Array.from(
|
|
new Set(
|
|
builtinProxyPolicies.concat(
|
|
prependSeq.map((group) => group.name),
|
|
originGroupsObj?.["proxy-groups"]
|
|
.map((group) => group.name)
|
|
.filter((name) => !deleteSeq.includes(name)) || [],
|
|
appendSeq.map((group) => group.name),
|
|
proxies.map((proxy: any) => proxy.name),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
} catch (error) {
|
|
console.error("Failed to fetch proxy policy:", error);
|
|
}
|
|
};
|
|
|
|
const fetchProfile = async () => {
|
|
try {
|
|
let data = await readProfileFile(profileUid);
|
|
let mergeData = await readProfileFile(mergeUid);
|
|
let globalMergeData = await readProfileFile("Merge");
|
|
|
|
let originGroupsObj = yaml.load(data) as {
|
|
"proxy-groups": IProxyGroupConfig[];
|
|
} | null;
|
|
let originProviderObj = yaml.load(data) as {
|
|
"proxy-providers": {};
|
|
} | null;
|
|
let originProvider = originProviderObj?.["proxy-providers"] || {};
|
|
let moreProviderObj = yaml.load(mergeData) as {
|
|
"proxy-providers": {};
|
|
} | null;
|
|
let moreProvider = moreProviderObj?.["proxy-providers"] || {};
|
|
let globalProviderObj = yaml.load(globalMergeData) as {
|
|
"proxy-providers": {};
|
|
} | null;
|
|
let globalProvider = globalProviderObj?.["proxy-providers"] || {};
|
|
let provider = { ...originProvider, ...moreProvider, ...globalProvider };
|
|
|
|
setProxyProviderList(Object.keys(provider));
|
|
setGroupList(originGroupsObj?.["proxy-groups"] || []);
|
|
} catch (error) {
|
|
console.error("Failed to fetch profile:", error);
|
|
}
|
|
};
|
|
|
|
const getInterfaceNameList = async () => {
|
|
try {
|
|
let list = await getNetworkInterfaces();
|
|
setInterfaceNameList(list);
|
|
} catch (error) {
|
|
console.error("Failed to get network interfaces:", error);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchProxyPolicy();
|
|
}, [prependSeq, appendSeq, deleteSeq]);
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
fetchContent();
|
|
fetchProxyPolicy();
|
|
fetchProfile();
|
|
getInterfaceNameList();
|
|
}
|
|
}, [open]);
|
|
|
|
const validateGroup = () => {
|
|
let group = getValues();
|
|
if (group.name === "") {
|
|
throw new Error(t("Group Name Required"));
|
|
}
|
|
};
|
|
|
|
const handleSave = useLockFn(async () => {
|
|
try {
|
|
await saveProfileFile(property, currData);
|
|
showNotice("success", t("Saved Successfully"));
|
|
onSave?.(prevData, currData);
|
|
onClose();
|
|
} catch (err: any) {
|
|
showNotice("error", err.toString());
|
|
}
|
|
});
|
|
|
|
const groupType = watch("type");
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onClose}>
|
|
<DialogContent className="min-w-5xl h-[90vh] flex flex-col">
|
|
<DialogHeader>
|
|
<div className="flex justify-between items-center pr-8">
|
|
<DialogTitle>{t("Edit Groups")}</DialogTitle>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setVisualization((prev) => !prev)}
|
|
>
|
|
{visualization ? t("Advanced") : t("Visualization")}
|
|
</Button>
|
|
</div>
|
|
</DialogHeader>
|
|
|
|
<div className="flex-1 min-h-0 mt-4">
|
|
{visualization ? (
|
|
<Form {...form}>
|
|
<form className="h-full flex gap-4">
|
|
{/* Левая панель: Конструктор групп */}
|
|
<div className="w-1/2 flex flex-col border rounded-md p-4">
|
|
<h3 className="text-lg font-medium mb-4">Constructor</h3>
|
|
<Separator className="mb-4" />
|
|
<div className="space-y-3 overflow-y-auto p-1 -mr-3 ">
|
|
<FormField
|
|
control={control}
|
|
name="type"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t("Group Type")}</FormLabel>
|
|
<Select
|
|
onValueChange={field.onChange}
|
|
defaultValue={field.value}
|
|
>
|
|
<FormControl>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
</FormControl>
|
|
<SelectContent>
|
|
<SelectItem value="select">select</SelectItem>
|
|
<SelectItem value="url-test">url-test</SelectItem>
|
|
<SelectItem value="fallback">fallback</SelectItem>
|
|
<SelectItem value="load-balance">
|
|
load-balance
|
|
</SelectItem>
|
|
<SelectItem value="relay">relay</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={control}
|
|
name="name"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t("Group Name")}</FormLabel>
|
|
<FormControl>
|
|
<Input {...field} required />
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={control}
|
|
name="icon"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t("Proxy Group Icon")}</FormLabel>
|
|
<FormControl>
|
|
<Input {...field} />
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={control}
|
|
name="proxies"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t("Use Proxies")}</FormLabel>
|
|
<MultiSelectCombobox
|
|
options={proxyPolicyList}
|
|
value={field.value || []}
|
|
onChange={field.onChange}
|
|
placeholder={t("Select proxies...")}
|
|
/>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={control}
|
|
name="use"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t("Use Provider")}</FormLabel>
|
|
<MultiSelectCombobox
|
|
options={proxyProviderList}
|
|
value={field.value || []}
|
|
onChange={field.onChange}
|
|
placeholder={t("Select providers...")}
|
|
/>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
{(groupType === "url-test" || groupType === "fallback") && (
|
|
<>
|
|
<FormField
|
|
control={control}
|
|
name="url"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t("Health Check Url")}</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
placeholder="https://cp.cloudflare.com/generate_204"
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={control}
|
|
name="interval"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t("Interval")}</FormLabel>
|
|
<FormControl>
|
|
<div className="flex items-center gap-2">
|
|
<Input
|
|
type="number"
|
|
placeholder="300"
|
|
value={field.value}
|
|
onChange={(e) =>
|
|
field.onChange(
|
|
parseInt(e.target.value, 10) || 0,
|
|
)
|
|
}
|
|
/>
|
|
<span className="text-sm text-muted-foreground">
|
|
{t("seconds")}
|
|
</span>
|
|
</div>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={control}
|
|
name="timeout"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t("Timeout")}</FormLabel>
|
|
<FormControl>
|
|
<div className="flex items-center gap-2">
|
|
<Input
|
|
type="number"
|
|
placeholder="5000"
|
|
value={field.value}
|
|
onChange={(e) =>
|
|
field.onChange(
|
|
parseInt(e.target.value, 10) || 0,
|
|
)
|
|
}
|
|
/>
|
|
<span className="text-sm text-muted-foreground">
|
|
{t("millis")}
|
|
</span>
|
|
</div>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={control}
|
|
name="max-failed-times"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t("Max Failed Times")}</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type="number"
|
|
placeholder="5"
|
|
value={field.value}
|
|
onChange={(e) =>
|
|
field.onChange(
|
|
parseInt(e.target.value, 10) || 0,
|
|
)
|
|
}
|
|
/>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</>
|
|
)}
|
|
<FormField
|
|
control={control}
|
|
name="interface-name"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t("Interface Name")}</FormLabel>
|
|
<Combobox
|
|
options={interfaceNameList}
|
|
value={field.value}
|
|
onSelect={field.onChange}
|
|
/>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={control}
|
|
name="routing-mark"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t("Routing Mark")}</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type="number"
|
|
value={field.value}
|
|
onChange={(e) =>
|
|
field.onChange(
|
|
parseInt(e.target.value, 10) || 0,
|
|
)
|
|
}
|
|
/>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
{(groupType === "url-test" ||
|
|
groupType === "fallback" ||
|
|
groupType === "load-balance") && (
|
|
<>
|
|
<FormField
|
|
control={control}
|
|
name="lazy"
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
|
|
<FormLabel>{t("Lazy")}</FormLabel>
|
|
<FormControl>
|
|
<Switch
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={control}
|
|
name="disable-udp"
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
|
|
<FormLabel>{t("Disable UDP")}</FormLabel>
|
|
<FormControl>
|
|
<Switch
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</>
|
|
)}
|
|
<FormField
|
|
control={control}
|
|
name="hidden"
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
|
|
<FormLabel>{t("Hidden")}</FormLabel>
|
|
<FormControl>
|
|
<Switch
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-2 mt-auto pt-4">
|
|
<Button
|
|
type="button"
|
|
onClick={() => {
|
|
try {
|
|
validateGroup();
|
|
const newGroup = getValues();
|
|
if (
|
|
[...prependSeq, ...groupList, ...appendSeq].every(
|
|
(g) => g.name !== newGroup.name,
|
|
)
|
|
)
|
|
setPrependSeq([newGroup, ...prependSeq]);
|
|
else throw new Error(t("Group Name Already Exists"));
|
|
} catch (err: any) {
|
|
showNotice("error", err.message);
|
|
}
|
|
}}
|
|
>
|
|
<ArrowUpToLine className="mr-2 h-4 w-4" />
|
|
{t("Prepend Group")}
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
onClick={() => {
|
|
try {
|
|
validateGroup();
|
|
const newGroup = getValues();
|
|
if (
|
|
[...prependSeq, ...groupList, ...appendSeq].every(
|
|
(g) => g.name !== newGroup.name,
|
|
)
|
|
)
|
|
setAppendSeq([...appendSeq, newGroup]);
|
|
else throw new Error(t("Group Name Already Exists"));
|
|
} catch (err: any) {
|
|
showNotice("error", err.message);
|
|
}
|
|
}}
|
|
>
|
|
<ArrowDownToLine className="mr-2 h-4 w-4" />
|
|
{t("Append Group")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator orientation="vertical" />
|
|
|
|
<div className="w-1/2 flex flex-col">
|
|
<BaseSearchBox
|
|
onSearch={(matcher) => setMatch(() => matcher)}
|
|
/>
|
|
<div className="flex-1 min-h-0 mt-2 rounded-md border">
|
|
<Virtuoso
|
|
className="h-full"
|
|
totalCount={
|
|
filteredGroupList.length +
|
|
(filteredPrependSeq.length > 0 ? 1 : 0) +
|
|
(filteredAppendSeq.length > 0 ? 1 : 0)
|
|
}
|
|
itemContent={(index) => {
|
|
let shift = filteredPrependSeq.length > 0 ? 1 : 0;
|
|
if (filteredPrependSeq.length > 0 && index === 0) {
|
|
return (
|
|
<DndContext
|
|
sensors={sensors}
|
|
collisionDetection={closestCenter}
|
|
onDragEnd={onPrependDragEnd}
|
|
>
|
|
<SortableContext
|
|
items={filteredPrependSeq.map((x) => x.name)}
|
|
>
|
|
{filteredPrependSeq.map((item) => (
|
|
<EditorGroupItem
|
|
key={item.name}
|
|
id={item.name}
|
|
type="prepend"
|
|
group={item}
|
|
onDelete={() =>
|
|
setPrependSeq(
|
|
prependSeq.filter(
|
|
(v) => v.name !== item.name,
|
|
),
|
|
)
|
|
}
|
|
/>
|
|
))}
|
|
</SortableContext>
|
|
</DndContext>
|
|
);
|
|
} else if (index < filteredGroupList.length + shift) {
|
|
const newIndex = index - shift;
|
|
const currentGroup = filteredGroupList[newIndex];
|
|
return (
|
|
<EditorGroupItem
|
|
key={currentGroup.name}
|
|
id={currentGroup.name}
|
|
type={
|
|
deleteSeq.includes(currentGroup.name)
|
|
? "delete"
|
|
: "original"
|
|
}
|
|
group={currentGroup}
|
|
onDelete={() => {
|
|
if (deleteSeq.includes(currentGroup.name)) {
|
|
setDeleteSeq(
|
|
deleteSeq.filter(
|
|
(v) => v !== currentGroup.name,
|
|
),
|
|
);
|
|
} else {
|
|
setDeleteSeq((prev) => [
|
|
...prev,
|
|
currentGroup.name,
|
|
]);
|
|
}
|
|
}}
|
|
/>
|
|
);
|
|
} else {
|
|
return (
|
|
<DndContext
|
|
sensors={sensors}
|
|
collisionDetection={closestCenter}
|
|
onDragEnd={onAppendDragEnd}
|
|
>
|
|
<SortableContext
|
|
items={filteredAppendSeq.map((x) => x.name)}
|
|
>
|
|
{filteredAppendSeq.map((item) => (
|
|
<EditorGroupItem
|
|
key={item.name}
|
|
id={item.name}
|
|
type="append"
|
|
group={item}
|
|
onDelete={() =>
|
|
setAppendSeq(
|
|
appendSeq.filter(
|
|
(v) => v.name !== item.name,
|
|
),
|
|
)
|
|
}
|
|
/>
|
|
))}
|
|
</SortableContext>
|
|
</DndContext>
|
|
);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
) : (
|
|
<div className="h-full rounded-md border">
|
|
<MonacoEditor
|
|
height="100%"
|
|
language="yaml"
|
|
value={currData}
|
|
theme={themeMode === "light" ? "vs" : "vs-dark"}
|
|
options={{
|
|
tabSize: 2,
|
|
minimap: {
|
|
enabled: document.documentElement.clientWidth >= 1500,
|
|
},
|
|
mouseWheelZoom: true,
|
|
quickSuggestions: {
|
|
strings: true,
|
|
comments: true,
|
|
other: true,
|
|
},
|
|
padding: { top: 16 },
|
|
fontFamily: `Fira Code, JetBrains Mono, Roboto Mono, "Source Code Pro", Consolas, Menlo, Monaco, monospace, "Courier New", "Apple Color Emoji"${getSystem() === "windows" ? ", twemoji mozilla" : ""}`,
|
|
fontLigatures: false,
|
|
smoothScrolling: true,
|
|
}}
|
|
onChange={(value) => setCurrData(value)}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<DialogFooter className="mt-4">
|
|
<DialogClose asChild>
|
|
<Button type="button" variant="outline">
|
|
{t("Cancel")}
|
|
</Button>
|
|
</DialogClose>
|
|
<Button type="button" onClick={handleSubmit(handleSave)}>
|
|
{t("Save")}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|