feat: improve admin experience and ignore local data
This commit is contained in:
@@ -0,0 +1,292 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user