293 lines
9.8 KiB
TypeScript
293 lines
9.8 KiB
TypeScript
"use client";
|
||
|
||
import { useDeferredValue, useState } from "react";
|
||
import { useFormStatus } from "react-dom";
|
||
|
||
import { deleteProxyGroupAction, saveProxyGroupAction } from "./actions";
|
||
|
||
type ProxyGroupNodeOption = {
|
||
slug: string;
|
||
label: string;
|
||
meta: string;
|
||
};
|
||
|
||
type ProxyGroupEditorProps = {
|
||
group?: {
|
||
id: string;
|
||
name: string;
|
||
memberSlugs: string[];
|
||
};
|
||
nodes: ProxyGroupNodeOption[];
|
||
};
|
||
|
||
function normalizeSelectedSlugs(initialSlugs: string[], nodes: ProxyGroupNodeOption[]) {
|
||
const availableSlugs = new Set(nodes.map((node) => node.slug));
|
||
const seen = new Set<string>();
|
||
|
||
return initialSlugs.filter((slug) => {
|
||
if (!availableSlugs.has(slug) || seen.has(slug)) {
|
||
return false;
|
||
}
|
||
|
||
seen.add(slug);
|
||
return true;
|
||
});
|
||
}
|
||
|
||
function SaveButton({ isEditing }: { isEditing: boolean }) {
|
||
const { pending } = useFormStatus();
|
||
|
||
return (
|
||
<button className={isEditing ? "ghost-button" : "primary-button"} type="submit" disabled={pending}>
|
||
{pending ? (isEditing ? "保存中..." : "创建中...") : isEditing ? "保存分组" : "新建分组"}
|
||
</button>
|
||
);
|
||
}
|
||
|
||
function DeleteButton() {
|
||
const { pending } = useFormStatus();
|
||
|
||
return (
|
||
<button className="danger-button" type="submit" disabled={pending}>
|
||
{pending ? "删除中..." : "删除分组"}
|
||
</button>
|
||
);
|
||
}
|
||
|
||
export function ProxyGroupEditor({ group, nodes }: ProxyGroupEditorProps) {
|
||
const isEditing = Boolean(group);
|
||
const [query, setQuery] = useState("");
|
||
const deferredQuery = useDeferredValue(query);
|
||
const [selectedSlugs, setSelectedSlugs] = useState(() =>
|
||
normalizeSelectedSlugs(group?.memberSlugs ?? [], nodes),
|
||
);
|
||
const selectedSlugSet = new Set(selectedSlugs);
|
||
const nodesBySlug = new Map(nodes.map((node) => [node.slug, node]));
|
||
const selectedNodes = selectedSlugs
|
||
.map((slug) => nodesBySlug.get(slug))
|
||
.filter((node): node is ProxyGroupNodeOption => Boolean(node));
|
||
const normalizedQuery = deferredQuery.trim().toLowerCase();
|
||
const remainingCount = nodes.length - selectedNodes.length;
|
||
const availableNodes = nodes.filter((node) => {
|
||
if (selectedSlugSet.has(node.slug)) {
|
||
return false;
|
||
}
|
||
|
||
if (!normalizedQuery) {
|
||
return true;
|
||
}
|
||
|
||
return [node.label, node.meta, node.slug].some((value) =>
|
||
value.toLowerCase().includes(normalizedQuery),
|
||
);
|
||
});
|
||
|
||
function addNode(slug: string) {
|
||
setSelectedSlugs((current) => {
|
||
if (current.includes(slug)) {
|
||
return current;
|
||
}
|
||
|
||
return [...current, slug];
|
||
});
|
||
}
|
||
|
||
function removeNode(slug: string) {
|
||
setSelectedSlugs((current) => current.filter((currentSlug) => currentSlug !== slug));
|
||
}
|
||
|
||
function moveNode(slug: string, direction: -1 | 1) {
|
||
setSelectedSlugs((current) => {
|
||
const index = current.indexOf(slug);
|
||
const nextIndex = index + direction;
|
||
|
||
if (index === -1 || nextIndex < 0 || nextIndex >= current.length) {
|
||
return current;
|
||
}
|
||
|
||
const next = [...current];
|
||
[next[index], next[nextIndex]] = [next[nextIndex], next[index]];
|
||
return next;
|
||
});
|
||
}
|
||
|
||
function addAllVisibleNodes() {
|
||
setSelectedSlugs((current) => {
|
||
const next = [...current];
|
||
const seen = new Set(current);
|
||
|
||
for (const node of availableNodes) {
|
||
if (seen.has(node.slug)) {
|
||
continue;
|
||
}
|
||
|
||
next.push(node.slug);
|
||
seen.add(node.slug);
|
||
}
|
||
|
||
return next;
|
||
});
|
||
}
|
||
|
||
function clearSelection() {
|
||
setSelectedSlugs([]);
|
||
}
|
||
|
||
return (
|
||
<article className="instruction-block proxy-group-card">
|
||
<form action={saveProxyGroupAction} className="stack-md">
|
||
{group ? <input type="hidden" name="id" value={group.id} /> : null}
|
||
<div className="section-title section-title--top">
|
||
<div className="stack-tight">
|
||
<h4 className="proxy-group-title">{isEditing ? group?.name : "新建分组"}</h4>
|
||
<p className="muted proxy-group-caption">右侧顺序就是最终写入 Clash 的节点顺序。</p>
|
||
</div>
|
||
<div className="badge-row badge-row--end">
|
||
<span className="status-pill status-pill--ink">已选 {selectedNodes.length}</span>
|
||
<span className="status-pill status-pill--warm">未加入 {remainingCount}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<label className="field">
|
||
<span>{isEditing ? "组名" : "新建分组名"}</span>
|
||
<input name="name" defaultValue={group?.name ?? ""} placeholder="ChatGPT" required />
|
||
</label>
|
||
|
||
<div className="proxy-group-builder">
|
||
<section className="proxy-group-panel">
|
||
<div className="proxy-group-panel__header">
|
||
<div className="stack-tight">
|
||
<strong>候选节点</strong>
|
||
<span className="muted">筛选后点击添加，新节点会追加到分组末尾。</span>
|
||
</div>
|
||
<div className="proxy-group-toolbar">
|
||
<label className="proxy-group-search">
|
||
<input
|
||
type="search"
|
||
value={query}
|
||
onChange={(event) => setQuery(event.target.value)}
|
||
onKeyDown={(event) => {
|
||
if (event.key === "Enter") {
|
||
event.preventDefault();
|
||
}
|
||
}}
|
||
placeholder="搜索节点名称 / slug"
|
||
/>
|
||
</label>
|
||
<button
|
||
className="ghost-button proxy-toolbar-button"
|
||
type="button"
|
||
onClick={addAllVisibleNodes}
|
||
disabled={availableNodes.length === 0}
|
||
>
|
||
{normalizedQuery ? "添加筛选结果" : "全部添加"}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{availableNodes.length > 0 ? (
|
||
<div className="proxy-node-grid">
|
||
{availableNodes.map((node) => (
|
||
<button
|
||
key={node.slug}
|
||
className="proxy-node-chip"
|
||
type="button"
|
||
onClick={() => addNode(node.slug)}
|
||
>
|
||
<span className="proxy-node-chip__copy">
|
||
<strong>{node.label}</strong>
|
||
<span>{node.meta}</span>
|
||
</span>
|
||
<span className="proxy-node-chip__action">添加</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<p className="muted proxy-group-empty">
|
||
{remainingCount === 0
|
||
? "所有可用节点都已加入当前分组。"
|
||
: "没有匹配当前筛选条件的节点。"}
|
||
</p>
|
||
)}
|
||
</section>
|
||
|
||
<section className="proxy-group-panel proxy-group-panel--selected">
|
||
<div className="proxy-group-panel__header">
|
||
<div className="stack-tight">
|
||
<strong>已选顺序</strong>
|
||
<span className="muted">上移和下移会直接改变最终输出顺序。</span>
|
||
</div>
|
||
<button
|
||
className="ghost-button proxy-toolbar-button"
|
||
type="button"
|
||
onClick={clearSelection}
|
||
disabled={selectedNodes.length === 0}
|
||
>
|
||
清空已选
|
||
</button>
|
||
</div>
|
||
|
||
{selectedNodes.length > 0 ? (
|
||
<ol className="proxy-sort-list">
|
||
{selectedNodes.map((node, index) => (
|
||
<li key={node.slug} className="proxy-sort-item">
|
||
<div className="proxy-sort-item__meta">
|
||
<span className="proxy-sort-item__index">{String(index + 1).padStart(2, "0")}</span>
|
||
<div className="stack-tight">
|
||
<strong>{node.label}</strong>
|
||
<span className="muted mono proxy-sort-item__sub">{node.meta}</span>
|
||
</div>
|
||
</div>
|
||
<div className="proxy-sort-item__actions">
|
||
<button
|
||
className="ghost-button proxy-sort-button"
|
||
type="button"
|
||
onClick={() => moveNode(node.slug, -1)}
|
||
disabled={index === 0}
|
||
>
|
||
上移
|
||
</button>
|
||
<button
|
||
className="ghost-button proxy-sort-button"
|
||
type="button"
|
||
onClick={() => moveNode(node.slug, 1)}
|
||
disabled={index === selectedNodes.length - 1}
|
||
>
|
||
下移
|
||
</button>
|
||
<button
|
||
className="danger-button proxy-sort-button"
|
||
type="button"
|
||
onClick={() => removeNode(node.slug)}
|
||
>
|
||
移除
|
||
</button>
|
||
</div>
|
||
<input type="hidden" name="member_slugs" value={node.slug} />
|
||
</li>
|
||
))}
|
||
</ol>
|
||
) : (
|
||
<p className="muted proxy-group-empty">
|
||
还没有选择节点。先从左侧添加，再在这里调整最终顺序。
|
||
</p>
|
||
)}
|
||
</section>
|
||
</div>
|
||
|
||
<div className="action-row">
|
||
<span className="muted">保存后会立即更新订阅模板里的 proxy-groups。</span>
|
||
<SaveButton isEditing={isEditing} />
|
||
</div>
|
||
</form>
|
||
|
||
{group ? (
|
||
<form action={deleteProxyGroupAction}>
|
||
<input type="hidden" name="id" value={group.id} />
|
||
<DeleteButton />
|
||
</form>
|
||
) : null}
|
||
</article>
|
||
);
|
||
}
|