# 知识图谱前端

基于 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