deerflow-code/frontend-web/src/components/knowledge-graph/GraphFooter.tsx

import type { NodeKind } from "./graphTypes";
import { getEdgeInfo, NODE_KIND_META, NODE_KIND_ORDER } from "./graphUtils";

interface GraphFooterProps {
  nodeKindCounts: Map<NodeKind, number>;
  edgeLabels: string[];
  zoomLevel: number;
  selectedTitle: string | null;
  visibleNodes: number;
  visibleEdges: number;
}

export function GraphFooter(props: GraphFooterProps) {
  const kinds = NODE_KIND_ORDER.filter((k) => (props.nodeKindCounts.get(k) ?? 0) > 0);

  return (
    <footer className="kg-footer">
      <div className="kg-legend">
        {kinds.map((kind) => (
          <span key={kind} className="kg-legend-item">
            <span
              className="kg-legend-dot"
              style={{ background: NODE_KIND_META[kind].color }}
            />
            {NODE_KIND_META[kind].label}
          </span>
        ))}
        {props.edgeLabels.slice(0, 6).map((label) => {
          const info = getEdgeInfo(label);
          return (
            <span key={label} className="kg-legend-item">
              <span
                className="kg-legend-line"
                style={{
                  borderTopColor: info.color,
                  borderTopStyle: info.dashed ? "dashed" : "solid",
                }}
              />
              {info.zh}
            </span>
          );
        })}
      </div>
      <div className="kg-footer-status">
        {props.selectedTitle ? (
          <span className="kg-footer-selected" title={props.selectedTitle}>
            选中:{props.selectedTitle}
          </span>
        ) : null}
        <span>
          显示 {props.visibleNodes} 节点 · {props.visibleEdges} 关系
        </span>
        <span>缩放 {Math.round(props.zoomLevel * 100)}%</span>
      </div>
    </footer>
  );
}