knowledge-graph-agent/frontend

知识图谱前端

基于 React + TypeScript + Vite 构建的知识图谱可视化前端应用。

技术栈

• 构建工具: Vite 8.0.3
• 框架: React 19.2.4 + TypeScript 5.9.3
• 图谱可视化: AntV G6 5.1.0
• 样式: Tailwind CSS 4.2.2
• UI组件: HeroUI 3.0.2
• HTTP客户端: Axios 1.14.0

快速开始

安装依赖

npm install

开发模式

npm run dev

访问 http://localhost:5173

构建生产版本

npm run build

预览生产构建

npm run preview

代码检查

npm run lint

项目结构

frontend/
├── src/
│   ├── components/          # 可复用组件
│   │   ├── GraphView/       # 图谱可视化组件
│   │   ├── SearchBar/       # 搜索栏组件
│   │   └── NodePanel/       # 节点详情面板
│   ├── pages/               # 页面组件
│   │   └── KnowledgeGraph.tsx
│   ├── services/            # API 服务
│   │   └── graphApi.ts
│   ├── types/               # TypeScript 类型定义
│   │   └── graph.ts
│   ├── utils/               # 工具函数
│   │   └── helpers.ts
│   ├── App.tsx              # 根组件
│   └── main.tsx             # 应用入口

功能特性

• ✅ 交互式知识图谱可视化
• ✅ 多种布局算法支持（force, circular, grid, radial）
• ✅ 节点搜索和高亮
• ✅ 节点详情面板
• ✅ 鼠标拖拽和缩放
• ✅ 节点悬停信息
• ✅ 响应式设计
• ✅ 预留API对接接口

API 配置

在 .env 文件中配置后端API地址：

VITE_API_BASE_URL=http://localhost:3000/api

开发说明

添加新组件

1. 在 src/components/ 创建组件文件夹
2. 导出组件并在需要的地方导入

添加新页面

1. 在 src/pages/ 创建页面组件
2. 在路由配置中添加路径

API对接

所有API请求通过 src/services/graphApi.ts 处理，支持：

• 获取图谱数据
• 搜索节点
• 获取节点详情
• 获取相关节点

ESLint 配置扩展

当前配置适用于开发环境，如需生产环境配置，可以启用类型检查规则：

参考原 Vite 模板中的 ESLint 配置说明。

注意事项

• 构建时会得到一个大bundle（约1.6MB），这是由于AntV G6库较大
• 考虑使用动态导入进行代码分割优化
• GraphView组件在数据量大时可能需要性能优化

许可证

MIT