234 lines
9.7 KiB
TypeScript
234 lines
9.7 KiB
TypeScript
import { useMemo, useRef, useState } from "react";
|
||
import { driverById } from "./catalog";
|
||
import { DriverIcon } from "./DriverIcon";
|
||
import {
|
||
DEFAULT_CONN_GROUP,
|
||
useWorkspaceStore,
|
||
type SavedConnection,
|
||
} from "./store";
|
||
|
||
function cx(...xs: Array<string | false | null | undefined>) {
|
||
return xs.filter(Boolean).join(" ");
|
||
}
|
||
|
||
type DropHint = { groupId: string; index: number } | null;
|
||
|
||
export function ConnectionSidebar({
|
||
onSelect,
|
||
onDelete,
|
||
}: {
|
||
onSelect: (id: string) => void;
|
||
onDelete: (id: string) => void;
|
||
}) {
|
||
const connections = useWorkspaceStore((s) => s.connections);
|
||
const groups = useWorkspaceStore((s) => s.connGroups);
|
||
const expanded = useWorkspaceStore((s) => s.expandedConnGroups);
|
||
const activeId = useWorkspaceStore((s) => s.activeConnectionId);
|
||
const addConnGroup = useWorkspaceStore((s) => s.addConnGroup);
|
||
const renameConnGroup = useWorkspaceStore((s) => s.renameConnGroup);
|
||
const removeConnGroup = useWorkspaceStore((s) => s.removeConnGroup);
|
||
const moveConnection = useWorkspaceStore((s) => s.moveConnection);
|
||
const toggleConnGroup = useWorkspaceStore((s) => s.toggleConnGroup);
|
||
const notify = useWorkspaceStore((s) => s.notify);
|
||
const editConnection = useWorkspaceStore((s) => s.editConnection);
|
||
|
||
const [dragId, setDragId] = useState<string | null>(null);
|
||
const [dropHint, setDropHint] = useState<DropHint>(null);
|
||
const dragIdRef = useRef<string | null>(null);
|
||
|
||
const byGroup = useMemo(() => {
|
||
const map = new Map<string, SavedConnection[]>();
|
||
for (const g of groups) map.set(g.id, []);
|
||
for (const c of connections) {
|
||
const gid = c.groupId || DEFAULT_CONN_GROUP;
|
||
if (!map.has(gid)) map.set(gid, []);
|
||
map.get(gid)!.push(c);
|
||
}
|
||
for (const list of map.values()) {
|
||
list.sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
|
||
}
|
||
return map;
|
||
}, [connections, groups]);
|
||
|
||
const onAddGroup = () => {
|
||
const name = window.prompt("分组名称", "新分组");
|
||
if (name == null) return;
|
||
const id = addConnGroup(name);
|
||
notify({ kind: "info", title: "分组", message: `已创建「${name.trim() || "新分组"}」`, mode: "toast" });
|
||
void id;
|
||
};
|
||
|
||
const onRenameGroup = (id: string, cur: string) => {
|
||
if (id === DEFAULT_CONN_GROUP) return;
|
||
const name = window.prompt("重命名分组", cur);
|
||
if (name == null || !name.trim()) return;
|
||
renameConnGroup(id, name);
|
||
};
|
||
|
||
const onRemoveGroup = (id: string, name: string) => {
|
||
if (id === DEFAULT_CONN_GROUP) return;
|
||
if (!window.confirm(`删除分组「${name}」？连接将移回默认。`)) return;
|
||
removeConnGroup(id);
|
||
};
|
||
|
||
const setDrop = (groupId: string, index: number) => {
|
||
const id = dragIdRef.current;
|
||
if (!id) return;
|
||
setDropHint({ groupId, index });
|
||
};
|
||
|
||
const commitDrop = () => {
|
||
const id = dragIdRef.current;
|
||
const hint = dropHint;
|
||
dragIdRef.current = null;
|
||
setDragId(null);
|
||
setDropHint(null);
|
||
if (!id || !hint) return;
|
||
moveConnection(id, hint.groupId, hint.index);
|
||
};
|
||
|
||
return (
|
||
<div className="flex max-h-[42%] min-h-[120px] flex-col border-b" style={{ borderColor: "var(--ops-border)" }}>
|
||
<div className="ops-section-label justify-between border-b">
|
||
<span>连接</span>
|
||
<button type="button" className="normal-case tracking-normal hover:underline" style={{ color: "var(--ops-accent)" }} onClick={onAddGroup} title="新建分组">
|
||
+ 分组
|
||
</button>
|
||
</div>
|
||
<div className="min-h-0 flex-1 overflow-auto p-1">
|
||
{connections.length === 0 && (
|
||
<div className="px-1.5 py-1 text-[11px]" style={{ color: "var(--ops-muted)" }}>
|
||
暂无连接
|
||
</div>
|
||
)}
|
||
{groups.map((g) => {
|
||
const list = byGroup.get(g.id) ?? [];
|
||
const open = expanded.includes(g.id);
|
||
return (
|
||
<div
|
||
key={g.id}
|
||
className="mb-0.5"
|
||
data-group-id={g.id}
|
||
onDragOver={(e) => {
|
||
if (!dragIdRef.current) return;
|
||
e.preventDefault();
|
||
setDrop(g.id, list.length);
|
||
}}
|
||
onDrop={(e) => {
|
||
e.preventDefault();
|
||
commitDrop();
|
||
}}
|
||
>
|
||
<div className="ops-tree-item group/g cursor-pointer" onClick={() => toggleConnGroup(g.id)}>
|
||
<span className="ops-tree-chevron w-3 shrink-0 text-center text-[10px] opacity-50">{open ? "▾" : "▸"}</span>
|
||
<span
|
||
className="mr-1 inline-block h-3 w-3 shrink-0 rounded-[2px] border"
|
||
style={{ borderColor: "var(--ops-muted)", background: "color-mix(in srgb, var(--ops-muted) 25%, transparent)" }}
|
||
aria-hidden
|
||
/>
|
||
<span className="min-w-0 flex-1 truncate font-medium">{g.name}</span>
|
||
<span className="text-[10px] opacity-40">{list.length}</span>
|
||
{g.id !== DEFAULT_CONN_GROUP && (
|
||
<span className="ml-1 hidden gap-0.5 group-hover/g:inline-flex" onClick={(e) => e.stopPropagation()}>
|
||
<button type="button" className="px-0.5 text-[10px] opacity-60 hover:opacity-100" title="重命名" onClick={() => onRenameGroup(g.id, g.name)}>
|
||
✎
|
||
</button>
|
||
<button type="button" className="px-0.5 text-[10px] opacity-60 hover:opacity-100" style={{ color: "var(--ops-danger)" }} title="删除分组" onClick={() => onRemoveGroup(g.id, g.name)}>
|
||
×
|
||
</button>
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{open && (
|
||
<div className="ml-1 border-l pl-0.5" style={{ borderColor: "var(--ops-border-soft)" }}>
|
||
{list.length === 0 && (
|
||
<div
|
||
className={cx("ops-drop-slot mx-0.5 my-0.5 rounded px-1.5 py-1 text-[10px]", dropHint?.groupId === g.id ? "ops-drop-slot-active" : "")}
|
||
style={{ color: "var(--ops-muted)" }}
|
||
onDragOver={(e) => {
|
||
e.preventDefault();
|
||
setDrop(g.id, 0);
|
||
}}
|
||
>
|
||
拖到此处
|
||
</div>
|
||
)}
|
||
{list.map((c, i) => (
|
||
<div key={c.id}>
|
||
{dropHint?.groupId === g.id && dropHint.index === i && <div className="ops-drop-line" />}
|
||
<div
|
||
className={cx(
|
||
"group flex items-center gap-0.5 rounded",
|
||
activeId === c.id ? "ops-tree-item-active" : "",
|
||
dragId === c.id ? "opacity-45" : "",
|
||
)}
|
||
draggable
|
||
onDragStart={(e) => {
|
||
dragIdRef.current = c.id;
|
||
setDragId(c.id);
|
||
e.dataTransfer.effectAllowed = "move";
|
||
e.dataTransfer.setData("text/plain", c.id);
|
||
}}
|
||
onDragEnd={() => {
|
||
dragIdRef.current = null;
|
||
setDragId(null);
|
||
setDropHint(null);
|
||
}}
|
||
onDragOver={(e) => {
|
||
if (!dragIdRef.current || dragIdRef.current === c.id) return;
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
||
const before = e.clientY < rect.top + rect.height / 2;
|
||
setDrop(g.id, before ? i : i + 1);
|
||
}}
|
||
onDrop={(e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
commitDrop();
|
||
}}
|
||
>
|
||
<button type="button" className="ops-tree-item min-w-0 flex-1" onClick={() => onSelect(c.id)}>
|
||
{c.color && (
|
||
<span className="h-3 w-1 shrink-0 rounded-sm" style={{ background: c.color }} />
|
||
)}
|
||
<DriverIcon driver={c.driver} size={14} />
|
||
<span className="min-w-0 truncate">
|
||
<span className="mr-1 text-[10px] opacity-50">{driverById(c.driver)?.name}</span>
|
||
{c.name}
|
||
</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="hidden px-0.5 text-[10px] opacity-50 group-hover:inline hover:opacity-100"
|
||
title="编辑"
|
||
onClick={() => editConnection(c)}
|
||
>
|
||
✎
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="mr-0.5 hidden px-1 text-[11px] opacity-50 group-hover:inline hover:opacity-100"
|
||
style={{ color: "var(--ops-danger)" }}
|
||
onClick={() => onDelete(c.id)}
|
||
title="删除连接"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
{dropHint?.groupId === g.id && dropHint.index === list.length && i === list.length - 1 && (
|
||
<div className="ops-drop-line" />
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|