35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import { useGraphStore } from "../../store/graphStore";
|
||
|
||
export function Toolbar() {
|
||
const { startCreatingNode, loading, refresh, setLayoutType, layoutType } =
|
||
useGraphStore();
|
||
|
||
const layouts = [{ type: "force" as const, label: "力导向", icon: "🕸️" }];
|
||
|
||
return (
|
||
<div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-2 flex items-center gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={startCreatingNode}
|
||
className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
|
||
disabled={loading}
|
||
>
|
||
<span>➕</span>
|
||
<span>添加节点</span>
|
||
</button>
|
||
|
||
<div className="w-px h-6 bg-gray-300 dark:bg-gray-600" />
|
||
|
||
<button
|
||
type="button"
|
||
onClick={refresh}
|
||
className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-700 rounded hover:bg-gray-200 dark:hover:bg-gray-600 disabled:opacity-50"
|
||
disabled={loading}
|
||
>
|
||
<span>🔄</span>
|
||
<span>刷新</span>
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|