125 lines
3.2 KiB
TypeScript
125 lines
3.2 KiB
TypeScript
import {
|
|
ArrowLeft,
|
|
Download,
|
|
Loader2,
|
|
Maximize2,
|
|
RefreshCw,
|
|
Scan,
|
|
Shuffle,
|
|
ZoomIn,
|
|
ZoomOut,
|
|
} from "lucide-react";
|
|
|
|
interface GraphHeaderProps {
|
|
nodeCount: number;
|
|
edgeCount: number;
|
|
totalNodes: number;
|
|
totalEdges: number;
|
|
refreshing: boolean;
|
|
onBack: () => void;
|
|
onRelayout: () => void;
|
|
onFitView: () => void;
|
|
onZoomIn: () => void;
|
|
onZoomOut: () => void;
|
|
onExport: () => void;
|
|
onFullscreen: () => void;
|
|
onRefresh: () => void;
|
|
}
|
|
|
|
export function GraphHeader(props: GraphHeaderProps) {
|
|
const filteredNodes =
|
|
props.nodeCount === props.totalNodes
|
|
? `${props.totalNodes}`
|
|
: `${props.nodeCount}/${props.totalNodes}`;
|
|
const filteredEdges =
|
|
props.edgeCount === props.totalEdges
|
|
? `${props.totalEdges}`
|
|
: `${props.edgeCount}/${props.totalEdges}`;
|
|
|
|
return (
|
|
<header className="kg-header">
|
|
<div className="kg-header-left">
|
|
<button type="button" className="kg-back" onClick={props.onBack}>
|
|
<ArrowLeft size={15} />
|
|
<span className="kg-button-text">返回</span>
|
|
</button>
|
|
<div className="kg-title-block">
|
|
<h1 className="kg-title">知识图谱</h1>
|
|
<span className="kg-subtitle">知识关系可视化</span>
|
|
</div>
|
|
<div className="kg-stat-pills">
|
|
<span className="kg-stat-pill">{filteredNodes} 个节点</span>
|
|
<span className="kg-stat-pill kg-stat-pill-violet">
|
|
{filteredEdges} 条关系
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="kg-header-actions">
|
|
<button
|
|
type="button"
|
|
className="kg-icon-button"
|
|
title="重新布局"
|
|
onClick={props.onRelayout}
|
|
>
|
|
<Shuffle size={15} />
|
|
<span className="kg-button-text">重新布局</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="kg-icon-button"
|
|
title="适应视图"
|
|
onClick={props.onFitView}
|
|
>
|
|
<Scan size={15} />
|
|
<span className="kg-button-text">适应视图</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="kg-icon-button"
|
|
title="放大"
|
|
onClick={props.onZoomIn}
|
|
>
|
|
<ZoomIn size={15} />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="kg-icon-button"
|
|
title="缩小"
|
|
onClick={props.onZoomOut}
|
|
>
|
|
<ZoomOut size={15} />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="kg-icon-button"
|
|
title="导出图片"
|
|
onClick={props.onExport}
|
|
>
|
|
<Download size={15} />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="kg-icon-button"
|
|
title="全屏"
|
|
onClick={props.onFullscreen}
|
|
>
|
|
<Maximize2 size={15} />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="kg-icon-button"
|
|
title="刷新图谱数据"
|
|
onClick={props.onRefresh}
|
|
disabled={props.refreshing}
|
|
>
|
|
{props.refreshing ? (
|
|
<Loader2 size={15} className="animate-spin" />
|
|
) : (
|
|
<RefreshCw size={15} />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|