GRAPH_VIEW_FEATURE.md

# Graph View 功能说明

## 🎯 功能概述

在搜索界面中添加了 **Graph View** Tab，使用 ECharts 可视化搜索结果，以网络图的形式展示节点和它们之间的关系。

## ✨ 核心特性

### 1. **双视图模式**
- **List View（列表视图）**：传统的列表形式展示搜索结果
- **Graph View（网络图视图）**：以网络图形式展示节点和连接关系

### 2. **智能节点构建**
- **中心节点**：搜索结果作为中心节点（青色，较大）
- **相关节点**：通过向量相似度找到的相关节点（紫色，较小）
- **协作节点**：通过用户导航行为（transitions）找到的协作节点

### 3. **美观的视觉设计**
- 继承原有的深色科技风格
- 青色（cyan）表示中心节点
- 紫色（purple）表示相关节点
- 节点大小根据重要性动态调整
- 流畅的力导向布局动画

### 4. **交互功能**
- 节点可点击，跳转到详情页
- 鼠标悬停显示节点详细信息
- 支持拖拽和缩放
- 自动布局优化

## 🔧 技术实现

### 后端API

**端点**：`GET /api/search/graph?q={query}&max_nodes={max_nodes}`

**返回格式**：
```json
{
  "nodes": [
    {
      "id": "node_id",
      "name": "节点名称",
      "url": "节点URL",
      "content": "节点内容预览",
      "score": 0.85,
      "category": "text",
      "value": 85.0,
      "isCenter": true
    }
  ],
  "edges": [
    {
      "source": "source_node_id",
      "target": "target_node_id",
      "value": 0.75
    }
  ],
  "query": "搜索查询"
}
```

**实现逻辑**：
1. 获取搜索结果（最多10个中心节点）
2. 对每个中心节点：
   - 通过向量相似度查找相关节点（最多5个）
   - 通过协作过滤查找用户常访问的节点（最多3个）
3. 构建节点和边的数据结构
4. 优化节点标题提取（从URL或内容中智能提取）

### 前端实现

**技术栈**：
- **ECharts 5.4.3**：用于网络图可视化
- **Tailwind CSS**：样式设计
- **原生JavaScript**：交互逻辑

**关键函数**：
- `switchTab(view)`: 切换List View和Graph View
- `renderGraphView(query)`: 渲染网络图
- `performSearch()`: 搜索时自动准备两种视图的数据

## 📊 网络图配置

### 节点样式
- **中心节点**：
  - 颜色：`#06b6d4` (cyan)
  - 大小：40-100px（根据score动态调整）
  - 边框：`#0891b2`
  - 阴影：青色光晕效果

- **相关节点**：
  - 颜色：`#8b5cf6` (purple)
  - 大小：20-40px（根据相似度调整）
  - 边框：`#7c3aed`
  - 阴影：紫色光晕效果

### 边样式
- 颜色：`#475569` (slate)
- 宽度：根据关系强度动态调整（1-4px）
- 曲率：0.3（曲线连接）
- 透明度：0.6

### 布局算法
- **力导向布局（Force-Directed Layout）**：
  - 排斥力：200
  - 重力：0.1
  - 边长度：150
  - 支持布局动画

## 🎨 界面设计

### Tab导航
- 深色背景，透明效果
- 活跃Tab：青色高亮（`bg-cyan-500/20`, `border-cyan-500/50`）
- 非活跃Tab：灰色（`bg-slate-800/50`, `border-slate-700/50`）
- 图标：列表图标和网络图标

### 网络图容器
- 高度：700px
- 背景：半透明深色（`rgba(15, 23, 42, 0.5)`）
- 圆角：12px
- 边框：`rgba(148, 163, 184, 0.2)`

## 🔄 使用流程

1. **用户搜索**：输入查询词（如"TUM"）
2. **显示结果**：默认显示List View
3. **切换视图**：点击"Graph View" Tab
4. **查看网络图**：
   - 中心节点：搜索结果（如"TUM"）
   - 周围节点：相关主题（如"Computer Science", "Engineering"）
   - 连接线：表示节点之间的关系
5. **交互探索**：
   - 点击节点查看详情
   - 拖拽节点重新布局
   - 缩放查看局部或全局

## 📈 性能优化

1. **节点数量限制**：默认最多30个节点（可通过`max_nodes`参数调整）
2. **延迟加载**：只在切换到Graph View时才加载网络图数据
3. **缓存处理**：已加载的图表实例会被复用和销毁
4. **响应式布局**：窗口大小变化时自动调整图表尺寸

## 🚀 未来优化方向

1. **节点聚类**：自动识别和分组相似节点
2. **时间维度**：展示节点关系随时间的变化
3. **筛选功能**：允许用户筛选特定类型的节点或边
4. **导出功能**：支持导出网络图为图片或SVG
5. **3D视图**：可选的3D网络图视图

## 📝 代码位置

- **后端API**：`web_server.py` - `api_search_graph()`
- **前端HTML**：`static/index.html`
  - Tab导航：第194-209行
  - Graph容器：第219-221行
  - JavaScript逻辑：第725-899行

## 🎉 使用示例

搜索"TUM"时，网络图会显示：
- **中心**："TUM"
- **周围节点**："Computer Science", "Engineering", "Munich", "University", "Research" 等
- **连接关系**：展示这些概念之间的语义和导航关系

这种可视化方式让用户能够：
- 快速理解搜索结果之间的关系
- 发现相关的知识领域
- 以更直观的方式探索知识网络