503 lines
16 KiB
TypeScript
503 lines
16 KiB
TypeScript
import { ReactNode, useEffect, useMemo, useState, forwardRef } 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 { readProfileFile, saveProfileFile } from "@/services/cmds";
|
||
import getSystem from "@/utils/get-system";
|
||
import { useThemeMode } from "@/services/states";
|
||
import parseUri from "@/utils/uri-parser";
|
||
import { showNotice } from "@/services/noticeService";
|
||
|
||
// Компоненты
|
||
import { BaseSearchBox } from "../base/base-search-box";
|
||
import { Button } from "@/components/ui/button";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogFooter,
|
||
DialogClose,
|
||
} from "@/components/ui/dialog";
|
||
import { Textarea } from "@/components/ui/textarea";
|
||
import { Separator } from "@/components/ui/separator";
|
||
|
||
// Иконки
|
||
import {
|
||
GripVertical,
|
||
Trash2,
|
||
Undo2,
|
||
ArrowDownToLine,
|
||
ArrowUpToLine,
|
||
} from "lucide-react";
|
||
|
||
interface Props {
|
||
profileUid: string;
|
||
property: string;
|
||
open: boolean;
|
||
onClose: () => void;
|
||
onSave?: (prev?: string, curr?: string) => void;
|
||
}
|
||
|
||
// Новый, легковесный компонент для элемента списка, с поддержкой drag-and-drop
|
||
const EditorProxyItem = ({
|
||
p_type,
|
||
proxy,
|
||
onDelete,
|
||
id,
|
||
}: {
|
||
p_type: string;
|
||
proxy: IProxyConfig;
|
||
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 = p_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" : ""}`}
|
||
>
|
||
{proxy.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 ProxiesEditorViewer = (props: Props) => {
|
||
const { 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 [proxyUri, setProxyUri] = useState<string>("");
|
||
|
||
const [proxyList, setProxyList] = useState<IProxyConfig[]>([]);
|
||
const [prependSeq, setPrependSeq] = useState<IProxyConfig[]>([]);
|
||
const [appendSeq, setAppendSeq] = useState<IProxyConfig[]>([]);
|
||
const [deleteSeq, setDeleteSeq] = useState<string[]>([]);
|
||
|
||
const filteredPrependSeq = useMemo(
|
||
() => prependSeq.filter((proxy) => match(proxy.name)),
|
||
[prependSeq, match],
|
||
);
|
||
const filteredProxyList = useMemo(
|
||
() => proxyList.filter((proxy) => match(proxy.name)),
|
||
[proxyList, match],
|
||
);
|
||
const filteredAppendSeq = useMemo(
|
||
() => appendSeq.filter((proxy) => match(proxy.name)),
|
||
[appendSeq, match],
|
||
);
|
||
|
||
const sensors = useSensors(
|
||
useSensor(PointerSensor),
|
||
useSensor(KeyboardSensor, {
|
||
coordinateGetter: sortableKeyboardCoordinates,
|
||
}),
|
||
);
|
||
|
||
const reorder = (
|
||
list: IProxyConfig[],
|
||
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 handleParseAsync = (cb: (proxies: IProxyConfig[]) => void) => {
|
||
let proxies: IProxyConfig[] = [];
|
||
let names: string[] = [];
|
||
let uris = "";
|
||
try {
|
||
uris = atob(proxyUri);
|
||
} catch {
|
||
uris = proxyUri;
|
||
}
|
||
const lines = uris.trim().split("\n");
|
||
let idx = 0;
|
||
const batchSize = 50;
|
||
function parseBatch() {
|
||
const end = Math.min(idx + batchSize, lines.length);
|
||
for (; idx < end; idx++) {
|
||
const uri = lines[idx];
|
||
try {
|
||
let proxy = parseUri(uri.trim());
|
||
if (!names.includes(proxy.name)) {
|
||
proxies.push(proxy);
|
||
names.push(proxy.name);
|
||
}
|
||
} catch (err: any) {
|
||
// Ignore parse errors
|
||
}
|
||
}
|
||
if (idx < lines.length) {
|
||
setTimeout(parseBatch, 0);
|
||
} else {
|
||
cb(proxies);
|
||
}
|
||
}
|
||
parseBatch();
|
||
};
|
||
|
||
const fetchProfile = async () => {
|
||
let data = await readProfileFile(profileUid);
|
||
let originProxiesObj = yaml.load(data) as {
|
||
proxies: IProxyConfig[];
|
||
} | null;
|
||
setProxyList(originProxiesObj?.proxies || []);
|
||
};
|
||
|
||
const fetchContent = async () => {
|
||
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);
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (currData === "" || visualization !== true) return;
|
||
try {
|
||
let obj = yaml.load(currData) as {
|
||
prepend: [];
|
||
append: [];
|
||
delete: [];
|
||
} | null;
|
||
setPrependSeq(obj?.prepend || []);
|
||
setAppendSeq(obj?.append || []);
|
||
setDeleteSeq(obj?.delete || []);
|
||
} catch (e) {
|
||
console.error("Error parsing YAML in visualization mode:", e);
|
||
}
|
||
}, [visualization]);
|
||
|
||
useEffect(() => {
|
||
if (prependSeq && appendSeq && deleteSeq) {
|
||
const serialize = () => {
|
||
try {
|
||
setCurrData(
|
||
yaml.dump(
|
||
{ prepend: prependSeq, append: appendSeq, delete: deleteSeq },
|
||
{ forceQuotes: true },
|
||
),
|
||
);
|
||
} catch (e) {
|
||
console.error("Error dumping YAML:", e);
|
||
}
|
||
};
|
||
if (window.requestIdleCallback) {
|
||
window.requestIdleCallback(serialize);
|
||
} else {
|
||
setTimeout(serialize, 0);
|
||
}
|
||
}
|
||
}, [prependSeq, appendSeq, deleteSeq]);
|
||
|
||
useEffect(() => {
|
||
if (!open) return;
|
||
fetchContent();
|
||
fetchProfile();
|
||
}, [open]);
|
||
|
||
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());
|
||
}
|
||
});
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={onClose}>
|
||
<DialogContent className="lg:max-w-4xl h-[80vh] flex flex-col">
|
||
<DialogHeader>
|
||
<div className="flex justify-between items-center pr-8">
|
||
<DialogTitle>{t("Edit Proxies")}</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">
|
||
{visualization ? (
|
||
<div className="h-full flex gap-4">
|
||
<div className="w-1/3 flex flex-col gap-4">
|
||
<Textarea
|
||
placeholder={t("Use newlines for multiple uri")}
|
||
className="flex-1"
|
||
value={proxyUri}
|
||
onChange={(e) => setProxyUri(e.target.value)}
|
||
/>
|
||
<div className="flex flex-col gap-2">
|
||
<Button
|
||
onClick={() =>
|
||
handleParseAsync((proxies) =>
|
||
setPrependSeq((prev) => [...proxies, ...prev]),
|
||
)
|
||
}
|
||
>
|
||
<ArrowUpToLine className="mr-2 h-4 w-4" />
|
||
{t("Prepend Proxy")}
|
||
</Button>
|
||
<Button
|
||
onClick={() =>
|
||
handleParseAsync((proxies) =>
|
||
setAppendSeq((prev) => [...prev, ...proxies]),
|
||
)
|
||
}
|
||
>
|
||
<ArrowDownToLine className="mr-2 h-4 w-4" />
|
||
{t("Append Proxy")}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<Separator orientation="vertical" />
|
||
|
||
<div className="w-2/3 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={
|
||
filteredProxyList.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) => (
|
||
<EditorProxyItem
|
||
key={item.name}
|
||
id={item.name}
|
||
p_type="prepend"
|
||
proxy={item}
|
||
onDelete={() =>
|
||
setPrependSeq(
|
||
prependSeq.filter(
|
||
(v) => v.name !== item.name,
|
||
),
|
||
)
|
||
}
|
||
/>
|
||
))}
|
||
</SortableContext>
|
||
</DndContext>
|
||
);
|
||
} else if (index < filteredProxyList.length + shift) {
|
||
const newIndex = index - shift;
|
||
const currentProxy = filteredProxyList[newIndex];
|
||
return (
|
||
<EditorProxyItem
|
||
key={currentProxy.name}
|
||
id={currentProxy.name}
|
||
p_type={
|
||
deleteSeq.includes(currentProxy.name)
|
||
? "delete"
|
||
: "original"
|
||
}
|
||
proxy={currentProxy}
|
||
onDelete={() => {
|
||
if (deleteSeq.includes(currentProxy.name)) {
|
||
setDeleteSeq(
|
||
deleteSeq.filter(
|
||
(v) => v !== currentProxy.name,
|
||
),
|
||
);
|
||
} else {
|
||
setDeleteSeq((prev) => [
|
||
...prev,
|
||
currentProxy.name,
|
||
]);
|
||
}
|
||
}}
|
||
/>
|
||
);
|
||
} else {
|
||
return (
|
||
<DndContext
|
||
sensors={sensors}
|
||
collisionDetection={closestCenter}
|
||
onDragEnd={onAppendDragEnd}
|
||
>
|
||
<SortableContext
|
||
items={filteredAppendSeq.map((x) => x.name)}
|
||
>
|
||
{filteredAppendSeq.map((item) => (
|
||
<EditorProxyItem
|
||
key={item.name}
|
||
id={item.name}
|
||
p_type="append"
|
||
proxy={item}
|
||
onDelete={() =>
|
||
setAppendSeq(
|
||
appendSeq.filter(
|
||
(v) => v.name !== item.name,
|
||
),
|
||
)
|
||
}
|
||
/>
|
||
))}
|
||
</SortableContext>
|
||
</DndContext>
|
||
);
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<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={handleSave}>
|
||
{t("Save")}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
};
|