70 lines
2.2 KiB
TypeScript
70 lines
2.2 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: '🕸️' },
|
|||
|
|
{ type: 'circular' as const, label: '圆形', icon: '⭕' },
|
|||
|
|
{ type: 'grid' 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 className="ml-2 flex items-center gap-1">
|
|||
|
|
{layouts.map((layout) => (
|
|||
|
|
<button
|
|||
|
|
key={layout.type}
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setLayoutType(layout.type)}
|
|||
|
|
className={`flex items-center gap-1.5 px-3 py-1.5 text-sm rounded transition-colors ${
|
|||
|
|
layoutType === layout.type
|
|||
|
|
? 'bg-blue-500 text-white'
|
|||
|
|
: 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
<span>{layout.icon}</span>
|
|||
|
|
<span>{layout.label}</span>
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="w-px h-6 bg-gray-300 dark:bg-gray-600 ml-2" />
|
|||
|
|
|
|||
|
|
<div className="text-xs text-gray-500 dark:text-gray-400 flex gap-3">
|
|||
|
|
<span>Ctrl+N 创建节点</span>
|
|||
|
|
<span>Ctrl+E 编辑节点</span>
|
|||
|
|
<span>Delete 删除</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|