feat(knowledge): 知识库 wiki/知识图谱重构，新增发布广场选择弹窗

- 知识库页拆分出 wiki 组件（侧边栏/目录树/Markdown 阅读器等） - 知识图谱页拆分出 knowledge-graph 组件并增强交互 - 新增发布广场选择弹窗 publish-square-picker-dialog - config.yaml 新增 MiniMax-M2.5 / Ling-flash-2.0 / DeepSeek-V4-Pro 模型 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-11 14:52:25 +08:00
1 parent f0aec4cd7f
commit e684de30bd
@@ -0,0 +1,147 @@
+import {
+  ArrowLeft,
+  Download,
+  Loader2,
+  Maximize2,
+  PanelLeft,
+  PanelRight,
+  RefreshCw,
+  Scan,
+  Shuffle,
+  ZoomIn,
+  ZoomOut,
+} from "lucide-react";
+
+interface GraphHeaderProps {
+  nodeCount: number;
+  edgeCount: number;
+  totalNodes: number;
+  totalEdges: number;
+  refreshing: boolean;
+  showSidebar: boolean;
+  showDetail: boolean;
+  onBack: () => void;
+  onRelayout: () => void;
+  onFitView: () => void;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  onExport: () => void;
+  onFullscreen: () => void;
+  onRefresh: () => void;
+  onToggleSidebar: () => void;
+  onToggleDetail: () => 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 className="kg-header-divider" />
+        <button
+          type="button"
+          className={`kg-icon-button${props.showSidebar ? " kg-icon-button-active" : ""}`}
+          title="筛选面板"
+          onClick={props.onToggleSidebar}
+        >
+          <PanelLeft size={15} />
+        </button>
+        <button
+          type="button"
+          className={`kg-icon-button${props.showDetail ? " kg-icon-button-active" : ""}`}
+          title="详情面板"
+          onClick={props.onToggleDetail}
+        >
+          <PanelRight size={15} />
+        </button>
+      </div>
+    </header>
+  );
+}