113 lines
2.5 KiB
Markdown
113 lines
2.5 KiB
Markdown
|
# 知识图谱前端
|
|||
|
|
|
|||
|
|
基于 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
|
|||
|
|
|
|||
|
|
## 快速开始
|
|||
|
|
|
|||
|
|
### 安装依赖
|
|||
|
|
```bash
|
|||
|
|
npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 开发模式
|
|||
|
|
```bash
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
访问 http://localhost:5173
|
|||
|
|
|
|||
|
|
### 构建生产版本
|
|||
|
|
```bash
|
|||
|
|
npm run build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 预览生产构建
|
|||
|
|
```bash
|
|||
|
|
npm run preview
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 代码检查
|
|||
|
|
```bash
|
|||
|
|
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地址：
|
|||
|
|
|
|||
|
|
```env
|
|||
|
|
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
|