hhs
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 |