diff --git a/docker-compose.yml b/docker-compose.yml
index 5cfd58be..f2edd849 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -6,7 +6,7 @@ services:
       args:
         http_proxy: ${HTTP_PROXY:-}
         https_proxy: ${HTTPS_PROXY:-}
-    image: yuxi-api:0.1.0
+    image: yuxi-api:0.2.0.dev
     container_name: api-dev
     working_dir: /app
     volumes:
@@ -68,7 +68,7 @@ services:
       context: .
       dockerfile: docker/web.Dockerfile
       target: development
-    image: yuxi-web:0.1.0
+    image: yuxi-web:0.2.0.dev
     container_name: web-dev
     volumes:
       - ./web:/app
diff --git a/docker/web.Dockerfile b/docker/web.Dockerfile
index 766b4bf2..da6c99fb 100644
--- a/docker/web.Dockerfile
+++ b/docker/web.Dockerfile
@@ -1,21 +1,25 @@
 # 开发阶段
-FROM node:latest AS development
+FROM node:20-alpine AS development
 WORKDIR /app
 
-
 ARG http_proxy
 ARG https_proxy
-ENV http_proxy=$http_proxy \
-    https_proxy=$https_proxy \
-    TZ=Asia/Shanghai
+ENV TZ=Asia/Shanghai
 
-# 复制 package.json 和 package-lock.json（如果存在）
+
+# 只有当代理变量不为空时才设置代理
+RUN if [ -n "$http_proxy" ]; then echo "export http_proxy=$http_proxy" >> /etc/environment; fi
+RUN if [ -n "$https_proxy" ]; then echo "export https_proxy=$https_proxy" >> /etc/environment; fi
+
+# 安装 pnpm
+RUN npm install -g pnpm@latest
+
+# 复制 package.json 和 pnpm-lock.yaml
 COPY ./web/package*.json ./
+COPY ./web/pnpm-lock.yaml* ./
 
 # 安装依赖
-RUN npm install -g pnpm@latest-10
 RUN pnpm install
-# RUN npm install --registry http://mirrors.cloud.tencent.com/npm/ --verbose --force
 
 # 复制源代码
 COPY ./web .
@@ -26,15 +30,22 @@ EXPOSE 5173
 # 启动开发服务器的命令在 docker-compose 文件中定义
 
 # 生产阶段
-FROM node:latest AS build-stage
+FROM node:20-alpine AS build-stage
 WORKDIR /app
 
-COPY ./web/package*.json ./
-RUN npm install --force
-# RUN npm install --registry https://registry.npmmirror.com --force
+# 安装 pnpm
+RUN npm install -g pnpm@latest
 
+# 复制依赖文件
+COPY ./web/package*.json ./
+COPY ./web/pnpm-lock.yaml* ./
+
+# 安装依赖
+RUN pnpm install --frozen-lockfile
+
+# 复制源代码并构建
 COPY ./web .
-RUN npm run build
+RUN pnpm run build
 
 # 生产环境运行阶段
 FROM nginx:alpine AS production
diff --git a/server/routers/__init__.py b/server/routers/__init__.py
index 017bb2b5..b8f2c610 100644
--- a/server/routers/__init__.py
+++ b/server/routers/__init__.py
@@ -3,9 +3,11 @@ from server.routers.chat_router import chat
 from server.routers.data_router import data
 from server.routers.base_router import base
 from server.routers.auth_router import auth
+from server.routers.graph_router import graph
 
 router = APIRouter()
 router.include_router(base)
 router.include_router(chat)
 router.include_router(data)
 router.include_router(auth)
+router.include_router(graph)
diff --git a/server/routers/graph_router.py b/server/routers/graph_router.py
new file mode 100644
index 00000000..88972f42
--- /dev/null
+++ b/server/routers/graph_router.py
@@ -0,0 +1,258 @@
+import json
+import os
+import asyncio
+import traceback
+from typing import List, Dict, Any, Optional
+from fastapi import APIRouter, Query, HTTPException, Depends
+from server.utils.auth_middleware import get_admin_user
+from server.models.user_model import User
+
+from src import knowledge_base
+from src.utils.logging_config import logger
+
+graph = APIRouter()
+
+
+@graph.get("/graph/subgraph")
+async def get_subgraph(
+    db_id: str = Query(..., description="数据库ID"),
+    node_label: str = Query(..., description="节点标签或实体名称"),
+    max_depth: int = Query(2, description="最大深度", ge=1, le=5),
+    max_nodes: int = Query(100, description="最大节点数", ge=1, le=1000),
+    current_user: User = Depends(get_admin_user)
+):
+    """
+    使用 LightRAG 原生方法获取知识图谱子图
+    
+    Args:
+        db_id: LightRAG 数据库实例ID
+        node_label: 节点标签，用于查找起始节点，使用 "*" 获取全图
+        max_depth: 子图的最大深度
+        max_nodes: 返回的最大节点数量
+        
+    Returns:
+        包含节点和边的知识图谱数据
+    """
+    try:
+        logger.info(f"获取子图数据 - db_id: {db_id}, node_label: {node_label}, max_depth: {max_depth}, max_nodes: {max_nodes}")
+        
+        # 获取 LightRAG 实例
+        rag_instance = await knowledge_base._get_lightrag_instance(db_id)
+        if not rag_instance:
+            raise HTTPException(status_code=404, detail=f"数据库 {db_id} 不存在")
+        
+        # 使用 LightRAG 的原生 get_knowledge_graph 方法
+        knowledge_graph = await rag_instance.get_knowledge_graph(
+            node_label=node_label,
+            max_depth=max_depth,
+            max_nodes=max_nodes
+        )
+        
+        # 将 LightRAG 的 KnowledgeGraph 格式转换为前端需要的格式
+        nodes = []
+        for node in knowledge_graph.nodes:
+            nodes.append({
+                "id": node.id,
+                "labels": node.labels,
+                "entity_type": node.properties.get("entity_type", "unknown"),
+                "properties": node.properties
+            })
+        
+        edges = []
+        for edge in knowledge_graph.edges:
+            edges.append({
+                "id": edge.id,
+                "source": edge.source,
+                "target": edge.target,
+                "type": edge.type,
+                "properties": edge.properties
+            })
+        
+        result = {
+            "success": True,
+            "data": {
+                "nodes": nodes,
+                "edges": edges,
+                "is_truncated": knowledge_graph.is_truncated,
+                "total_nodes": len(nodes),
+                "total_edges": len(edges)
+            }
+        }
+        
+        logger.info(f"成功获取子图 - 节点数: {len(nodes)}, 边数: {len(edges)}")
+        return result
+        
+    except Exception as e:
+        logger.error(f"获取子图数据失败: {e}")
+        logger.error(f"Traceback: {traceback.format_exc()}")
+        raise HTTPException(status_code=500, detail=f"获取子图数据失败: {str(e)}")
+
+
+@graph.get("/graph/labels")
+async def get_graph_labels(
+    db_id: str = Query(..., description="数据库ID"),
+    current_user: User = Depends(get_admin_user)
+):
+    """
+    获取知识图谱中的所有标签
+    
+    Args:
+        db_id: LightRAG 数据库实例ID
+        
+    Returns:
+        图谱中所有可用的标签列表
+    """
+    try:
+        logger.info(f"获取图谱标签 - db_id: {db_id}")
+        
+        # 获取 LightRAG 实例
+        rag_instance = await knowledge_base._get_lightrag_instance(db_id)
+        if not rag_instance:
+            raise HTTPException(status_code=404, detail=f"数据库 {db_id} 不存在")
+        
+        # 使用 LightRAG 的原生方法获取所有标签
+        labels = await rag_instance.get_graph_labels()
+        
+        return {
+            "success": True,
+            "data": {
+                "labels": labels
+            }
+        }
+        
+    except Exception as e:
+        logger.error(f"获取图谱标签失败: {e}")
+        logger.error(f"Traceback: {traceback.format_exc()}")
+        raise HTTPException(status_code=500, detail=f"获取图谱标签失败: {str(e)}")
+
+
+@graph.get("/graph/databases")
+async def get_available_databases(
+    current_user: User = Depends(get_admin_user)
+):
+    """
+    获取所有可用的 LightRAG 数据库
+    
+    Returns:
+        可用的数据库列表
+    """
+    try:
+        databases = knowledge_base.get_databases()
+        return {
+            "success": True,
+            "data": databases
+        }
+        
+    except Exception as e:
+        logger.error(f"获取数据库列表失败: {e}")
+        raise HTTPException(status_code=500, detail=f"获取数据库列表失败: {str(e)}")
+
+
+# 保留原有的直接数据库查询方法作为备用（如果需要的话）
+@graph.get("/graph/nodes")
+async def get_graph_nodes_legacy(
+    db_id: str = Query(..., description="数据库ID"),
+    limit: int = Query(500, description="最大节点数量", ge=1, le=2000),
+    offset: int = Query(0, description="偏移量", ge=0),
+    entity_type: Optional[str] = Query(None, description="实体类型筛选"),
+    search: Optional[str] = Query(None, description="搜索关键词"),
+    current_user: User = Depends(get_admin_user)
+):
+    """
+    直接查询数据库获取节点数据（备用方法）
+    建议使用 /graph/subgraph 接口
+    """
+    try:
+        # 这里可以添加直接数据库查询的逻辑
+        # 但建议用户使用 get_subgraph 接口
+        return {
+            "success": False,
+            "message": "建议使用 /graph/subgraph 接口获取图谱数据",
+            "data": {
+                "nodes": [],
+                "total": 0
+            }
+        }
+        
+    except Exception as e:
+        logger.error(f"获取图节点数据失败: {e}")
+        raise HTTPException(status_code=500, detail=f"获取图节点数据失败: {str(e)}")
+
+
+@graph.get("/graph/edges")
+async def get_graph_edges_legacy(
+    db_id: str = Query(..., description="数据库ID"),
+    limit: int = Query(500, description="最大边数量", ge=1, le=2000),
+    offset: int = Query(0, description="偏移量", ge=0),
+    min_weight: Optional[float] = Query(None, description="最小权重筛选"),
+    current_user: User = Depends(get_admin_user)
+):
+    """
+    直接查询数据库获取边数据（备用方法）
+    建议使用 /graph/subgraph 接口
+    """
+    try:
+        # 这里可以添加直接数据库查询的逻辑
+        # 但建议用户使用 get_subgraph 接口
+        return {
+            "success": False,
+            "message": "建议使用 /graph/subgraph 接口获取图谱数据",
+            "data": {
+                "edges": [],
+                "total": 0
+            }
+        }
+        
+    except Exception as e:
+        logger.error(f"获取图边数据失败: {e}")
+        raise HTTPException(status_code=500, detail=f"获取图边数据失败: {str(e)}")
+
+
+@graph.get("/graph/stats")
+async def get_graph_stats(
+    db_id: str = Query(..., description="数据库ID"),
+    current_user: User = Depends(get_admin_user)
+):
+    """
+    获取知识图谱统计信息
+    """
+    try:
+        logger.info(f"获取图谱统计信息 - db_id: {db_id}")
+        
+        # 获取 LightRAG 实例
+        rag_instance = await knowledge_base._get_lightrag_instance(db_id)
+        if not rag_instance:
+            raise HTTPException(status_code=404, detail=f"数据库 {db_id} 不存在")
+        
+        # 通过获取全图来统计节点和边的数量
+        knowledge_graph = await rag_instance.get_knowledge_graph(
+            node_label="*",
+            max_depth=1,
+            max_nodes=10000  # 设置较大值以获取完整统计
+        )
+        
+        # 统计实体类型分布
+        entity_types = {}
+        for node in knowledge_graph.nodes:
+            entity_type = node.properties.get("entity_type", "unknown")
+            entity_types[entity_type] = entity_types.get(entity_type, 0) + 1
+        
+        entity_types_list = [
+            {"type": k, "count": v} 
+            for k, v in sorted(entity_types.items(), key=lambda x: x[1], reverse=True)
+        ]
+        
+        return {
+            "success": True,
+            "data": {
+                "total_nodes": len(knowledge_graph.nodes),
+                "total_edges": len(knowledge_graph.edges),
+                "entity_types": entity_types_list,
+                "is_truncated": knowledge_graph.is_truncated
+            }
+        }
+        
+    except Exception as e:
+        logger.error(f"获取图谱统计信息失败: {e}")
+        logger.error(f"Traceback: {traceback.format_exc()}")
+        raise HTTPException(status_code=500, detail=f"获取图谱统计信息失败: {str(e)}")
\ No newline at end of file
diff --git a/web/package.json b/web/package.json
index 02915579..bf91194a 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "yuxi-know-frontend",
-  "version": "0.0.0",
+  "version": "0.2.0.dev",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -14,6 +14,8 @@
   "dependencies": {
     "@ant-design/icons-vue": "^6.1.0",
     "@antv/g6": "^5.0.47",
+    "@sigma/edge-curve": "^3.1.0",
+    "@sigma/node-border": "^3.0.0",
     "@vueuse/core": "^13.2.0",
     "ant-design-vue": "^4.2.6",
     "axios": "^1.9.0",
@@ -21,6 +23,8 @@
     "dayjs": "^1.11.13",
     "echarts": "^5.6.0",
     "echarts-gl": "^2.0.9",
+    "graphology": "^0.26.0",
+    "graphology-generators": "^0.11.2",
     "highlight.js": "^11.11.1",
     "less": "^4.3.0",
     "lucide-vue-next": "^0.511.0",
@@ -28,6 +32,7 @@
     "marked-highlight": "^2.2.1",
     "md-editor-v3": "^5.5.1",
     "pinia": "^3.0.2",
+    "sigma": "^3.0.1",
     "vue": "^3.5.14",
     "vue-router": "^4.5.1"
   },
diff --git a/web/src/apis/graph_api.js b/web/src/apis/graph_api.js
new file mode 100644
index 00000000..0e490ca3
--- /dev/null
+++ b/web/src/apis/graph_api.js
@@ -0,0 +1,238 @@
+import { apiGet } from './base'
+
+/**
+ * 图数据API调用 - 基于LightRAG的新接口
+ */
+
+/**
+ * 获取所有可用的数据库
+ * @returns {Promise} - 数据库列表
+ */
+export const getAvailableDatabases = async () => {
+  return await apiGet('/api/graph/databases', {}, true)
+}
+
+/**
+ * 获取图标签列表
+ * @param {string} dbId - 数据库ID
+ * @returns {Promise} - 标签列表
+ */
+export const getGraphLabels = async (dbId) => {
+  if (!dbId) {
+    throw new Error('db_id is required')
+  }
+
+  const queryParams = new URLSearchParams({
+    db_id: dbId
+  })
+
+  return await apiGet(`/api/graph/labels?${queryParams.toString()}`, {}, true)
+}
+
+/**
+ * 获取子图数据 - 主要接口
+ * @param {Object} params - 查询参数
+ * @param {string} params.db_id - 数据库ID
+ * @param {string} params.node_label - 节点标签 (使用 "*" 获取全图)
+ * @param {number} params.max_depth - 最大深度
+ * @param {number} params.max_nodes - 最大节点数
+ * @returns {Promise} - 子图数据
+ */
+export const getSubgraph = async (params) => {
+  const { db_id, node_label = "*", max_depth = 2, max_nodes = 100 } = params
+
+  if (!db_id) {
+    throw new Error('db_id is required')
+  }
+
+  const queryParams = new URLSearchParams({
+    db_id: db_id,
+    node_label: node_label,
+    max_depth: max_depth.toString(),
+    max_nodes: max_nodes.toString()
+  })
+
+  return await apiGet(`/api/graph/subgraph?${queryParams.toString()}`, {}, true)
+}
+
+/**
+ * 获取图统计信息
+ * @param {string} dbId - 数据库ID
+ * @returns {Promise} - 统计数据
+ */
+export const getGraphStats = async (dbId) => {
+  if (!dbId) {
+    throw new Error('db_id is required')
+  }
+
+  const queryParams = new URLSearchParams({
+    db_id: dbId
+  })
+
+  return await apiGet(`/api/graph/stats?${queryParams.toString()}`, {}, true)
+}
+
+/**
+ * 获取完整图数据 - 使用新的子图接口
+ * @param {Object} params - 查询参数
+ * @param {string} params.db_id - 数据库ID
+ * @param {string} params.node_label - 节点标签筛选
+ * @param {number} params.max_nodes - 最大节点数
+ * @param {number} params.max_depth - 最大深度
+ * @returns {Promise} - 完整图数据
+ */
+export const getFullGraph = async (params = {}) => {
+  const { db_id, node_label = "*", max_nodes = 200, max_depth = 2 } = params
+
+  if (!db_id) {
+    throw new Error('db_id is required for graph operations')
+  }
+
+  try {
+    // 使用子图接口获取数据
+    const response = await getSubgraph({
+      db_id,
+      node_label,
+      max_nodes,
+      max_depth
+    })
+
+    if (!response.success) {
+      throw new Error('获取图数据失败')
+    }
+
+    return {
+      success: true,
+      data: {
+        nodes: response.data.nodes,
+        edges: response.data.edges,
+        is_truncated: response.data.is_truncated,
+        stats: {
+          total_nodes: response.data.total_nodes,
+          total_edges: response.data.total_edges,
+          displayed_nodes: response.data.nodes.length,
+          displayed_edges: response.data.edges.length
+        }
+      }
+    }
+  } catch (error) {
+    console.error('获取完整图数据失败:', error)
+    throw error
+  }
+}
+
+/**
+ * 根据特定标签获取子图
+ * @param {Object} params - 查询参数
+ * @param {string} params.db_id - 数据库ID
+ * @param {string} params.entity_type - 实体类型 
+ * @param {number} params.max_nodes - 最大节点数
+ * @param {number} params.max_depth - 最大深度
+ * @returns {Promise} - 子图数据
+ */
+export const getGraphByEntityType = async (params = {}) => {
+  const { db_id, entity_type, max_nodes = 100, max_depth = 2 } = params
+
+  if (!db_id) {
+    throw new Error('db_id is required')
+  }
+
+  return await getSubgraph({
+    db_id,
+    node_label: entity_type || "*",
+    max_nodes,
+    max_depth
+  })
+}
+
+/**
+ * 展开指定节点的邻居
+ * @param {Object} params - 查询参数  
+ * @param {string} params.db_id - 数据库ID
+ * @param {string} params.node_label - 节点标签
+ * @param {number} params.max_depth - 最大深度
+ * @param {number} params.max_nodes - 最大节点数
+ * @returns {Promise} - 邻居节点数据
+ */
+export const expandNodeNeighbors = async (params) => {
+  const { db_id, node_label, max_depth = 1, max_nodes = 50 } = params
+
+  if (!db_id || !node_label) {
+    throw new Error('db_id and node_label are required')
+  }
+
+  return await getSubgraph({
+    db_id,
+    node_label,
+    max_depth,
+    max_nodes
+  })
+}
+
+// ==================== 兼容性方法 ====================
+
+/**
+ * 获取图节点数据 (已弃用，建议使用 getSubgraph)
+ * @deprecated 请使用 getSubgraph 替代
+ */
+export const getGraphNodes = async (params = {}) => {
+  console.warn('getGraphNodes is deprecated, please use getSubgraph instead')
+  const { db_id } = params
+  if (!db_id) {
+    throw new Error('db_id is required. Please provide db_id parameter.')
+  }
+  return await getSubgraph({ ...params, node_label: "*" })
+}
+
+/**
+ * 获取图边数据 (已弃用，建议使用 getSubgraph)  
+ * @deprecated 请使用 getSubgraph 替代
+ */
+export const getGraphEdges = async (params = {}) => {
+  console.warn('getGraphEdges is deprecated, please use getSubgraph instead')
+  const { db_id } = params
+  if (!db_id) {
+    throw new Error('db_id is required. Please provide db_id parameter.')
+  }
+  return await getSubgraph({ ...params, node_label: "*" })
+}
+
+// ==================== 工具函数 ====================
+
+/**
+ * 根据实体类型获取颜色
+ * @param {string} entityType - 实体类型
+ * @returns {string} - 颜色值
+ */
+export const getEntityTypeColor = (entityType) => {
+  const colorMap = {
+    'person': '#FF6B6B',      // 红色 - 人物
+    'organization': '#4ECDC4', // 青色 - 组织
+    'location': '#45B7D1',    // 蓝色 - 地点
+    'geo': '#45B7D1',         // 蓝色 - 地理位置
+    'event': '#96CEB4',       // 绿色 - 事件
+    'category': '#FFEAA7',    // 黄色 - 分类
+    'equipment': '#DDA0DD',   // 紫色 - 设备
+    'athlete': '#FF7675',     // 红色 - 运动员
+    'record': '#FD79A8',      // 粉色 - 记录
+    'year': '#FDCB6E',        // 橙色 - 年份
+    'UNKNOWN': '#B2BEC3',     // 灰色 - 未知
+    'unknown': '#B2BEC3'      // 灰色 - 未知
+  }
+
+  return colorMap[entityType] || colorMap['unknown']
+}
+
+/**
+ * 根据权重计算边的粗细
+ * @param {number} weight - 权重值
+ * @param {number} minWeight - 最小权重
+ * @param {number} maxWeight - 最大权重  
+ * @returns {number} - 边的粗细
+ */
+export const calculateEdgeWidth = (weight, minWeight = 1, maxWeight = 10) => {
+  const minWidth = 1
+  const maxWidth = 5
+  const normalizedWeight = (weight - minWeight) / (maxWeight - minWeight)
+  return minWidth + normalizedWeight * (maxWidth - minWidth)
+}
\ No newline at end of file
diff --git a/web/src/assets/base.css b/web/src/assets/css/base.css
similarity index 100%
rename from web/src/assets/base.css
rename to web/src/assets/css/base.css
diff --git a/web/src/assets/main.css b/web/src/assets/css/main.css
similarity index 90%
rename from web/src/assets/main.css
rename to web/src/assets/css/main.css
index 7553fcab..d24ccb5c 100644
--- a/web/src/assets/main.css
+++ b/web/src/assets/css/main.css
@@ -1,4 +1,6 @@
 @import './base.css';
+@import './sigma.css';
+@import './shorts.css';
 
 :root {
   --header-height: 60px;
diff --git a/web/src/assets/css/shorts.css b/web/src/assets/css/shorts.css
new file mode 100644
index 00000000..49b1db5d
--- /dev/null
+++ b/web/src/assets/css/shorts.css
@@ -0,0 +1,46 @@
+.m-2 {
+  margin: 8px;
+}
+
+.mt-2 {
+  margin-top: 8px;
+}
+
+.mb-2 {
+  margin-bottom: 8px;
+}
+
+.ml-2 {
+  margin-left: 8px;
+}
+
+.mr-2 {
+  margin-right: 8px;
+}
+
+
+.m-3 {
+  margin: 12px;
+}
+
+.mt-3 {
+  margin-top: 12px;
+}
+
+.mb-3 {
+  margin-bottom: 12px;
+}
+
+.ml-3 {
+  margin-left: 12px;
+}
+
+.mr-3 {
+  margin-right: 12px;
+}
+
+
+.bn-1px {
+    position: relative;
+    bottom: -1px;
+}
\ No newline at end of file
diff --git a/web/src/assets/css/sigma.css b/web/src/assets/css/sigma.css
new file mode 100644
index 00000000..ec73888e
--- /dev/null
+++ b/web/src/assets/css/sigma.css
@@ -0,0 +1,88 @@
+/* Sigma.js 基础样式 */
+.sigma-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: #fafafa;
+}
+
+.sigma-container canvas {
+  outline: none;
+}
+
+/* 节点标签样式 */
+.sigma-labels {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* 高亮样式 */
+.node-highlighted {
+  stroke: #ff0000 !important;
+  stroke-width: 3px !important;
+}
+
+.edge-highlighted {
+  stroke: #ff0000 !important;
+  stroke-width: 3px !important;
+}
+
+/* 选中样式 */
+.node-selected {
+  stroke: #1890ff !important;
+  stroke-width: 4px !important;
+}
+
+.edge-selected {
+  stroke: #1890ff !important;
+  stroke-width: 4px !important;
+}
+
+/* 悬停样式 */
+.node-focused {
+  stroke: #52c41a !important;
+  stroke-width: 2px !important;
+}
+
+.edge-focused {
+  stroke: #52c41a !important;
+  stroke-width: 2px !important;
+}
+
+/* 加载动画 */
+.sigma-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+}
+
+/* 工具提示 */
+.sigma-tooltip {
+  position: absolute;
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  pointer-events: none;
+  z-index: 1000;
+  white-space: nowrap;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .sigma-container {
+    font-size: 10px;
+  }
+
+  .sigma-tooltip {
+    font-size: 10px;
+    padding: 6px 8px;
+  }
+}
\ No newline at end of file
diff --git a/web/src/components/AgentChatComponent.vue b/web/src/components/AgentChatComponent.vue
index ee30cc8c..35e42875 100644
--- a/web/src/components/AgentChatComponent.vue
+++ b/web/src/components/AgentChatComponent.vue
@@ -1317,7 +1317,7 @@ const mergeMessageChunk = (chunks) => {
 </script>
 
 <style lang="less" scoped>
-@import '@/assets/main.css';
+@import '@/assets/css/main.css';
 
 .chat-container {
   display: flex;
diff --git a/web/src/components/HeaderComponent.vue b/web/src/components/HeaderComponent.vue
index 2a44ccf8..33e7aa20 100644
--- a/web/src/components/HeaderComponent.vue
+++ b/web/src/components/HeaderComponent.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="header-container">
     <div class="header-content">
+      <div class="header-actions" v-if="$slots.left">
+        <slot name="left"></slot>
+      </div>
       <div class="header-title">
         <h1>{{ title }}</h1>
         <slot name="description">
@@ -48,9 +51,12 @@ const props = defineProps({
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 10px;
 }
 
 .header-title {
+  flex: 1;
+  width: 100%;
   font-size: 14px;
   color: rgba(0, 0, 0, 0.45);
 
diff --git a/web/src/components/KnowledgeGraphViewer.vue b/web/src/components/KnowledgeGraphViewer.vue
new file mode 100644
index 00000000..c84c7d89
--- /dev/null
+++ b/web/src/components/KnowledgeGraphViewer.vue
@@ -0,0 +1,1386 @@
+<template>
+  <div class="knowledge-graph-viewer">
+    <!-- 控制面板 -->
+    <div class="control-panel">
+      <div class="database-section">
+        <a-select
+          v-if="!hideDbSelector"
+          v-model:value="selectedDatabase"
+          placeholder="选择数据库"
+          style="width: 200px; margin-right: 8px"
+          :loading="loadingDatabases"
+          @change="onDatabaseChange"
+        >
+          <a-select-option 
+            v-for="db in availableDatabases" 
+            :key="db.db_id" 
+            :value="db.db_id"
+          >
+            {{ db.name }} ({{ db.row_count || 0 }} 文件)
+          </a-select-option>
+        </a-select>
+        
+        <a-select
+          v-model:value="selectedLabel"
+          placeholder="选择标签/实体类型"
+          style="width: 180px"
+          :loading="loadingLabels"
+          :disabled="!selectedDatabase"
+          allow-clear
+          show-search
+        >
+          <a-select-option value="*">所有节点</a-select-option>
+          <a-select-option
+            v-for="label in availableLabels"
+            :key="label"
+            :value="label"
+          >
+            {{ label }}
+          </a-select-option>
+        </a-select>
+      </div>
+
+      <div class="search-section">
+        <a-input-number
+          v-model:value="searchParams.max_nodes"
+          :min="10"
+          :max="1000"
+          :step="10"
+          addon-before="最大节点数"
+          style="width: 150px"
+        />
+        <a-input-number
+          v-model:value="searchParams.max_depth"
+          :min="1"
+          :max="5"
+          :step="1"
+          addon-before="最大深度"
+          style="width: 130px; margin-left: 8px"
+        />
+        <a-button
+          type="primary"
+          :loading="loading"
+          @click="loadGraphData"
+          :disabled="!selectedDatabase"
+          style="margin-left: 8px"
+        >
+          <SearchOutlined v-if="!loading" /> 加载图谱
+        </a-button>
+      </div>
+
+      <div class="filter-section">
+        <a-button
+          @click="loadFullGraph"
+          :loading="loading"
+          :disabled="!selectedDatabase"
+          style="margin-left: 8px"
+        >
+          <ReloadOutlined /> 刷新全图
+        </a-button>
+        <a-button
+          @click="clearGraph"
+          :disabled="!selectedDatabase"
+          style="margin-left: 8px"
+        >
+          <ClearOutlined /> 清空图谱
+        </a-button>
+      </div>
+
+      <div class="stats-section">
+        <a-tag color="blue">节点: {{ stats.displayed_nodes || 0 }}</a-tag>
+        <a-tag color="green">边: {{ stats.displayed_edges || 0 }}</a-tag>
+        <a-tag v-if="stats.is_truncated" color="red">已截断</a-tag>
+      </div>
+    </div>
+
+    <!-- Sigma.js图可视化容器 -->
+    <div
+      class="sigma-container"
+      ref="sigmaContainer"
+      :class="{ 'loading': loading }"
+    ></div>
+
+    <!-- 节点详情面板 -->
+    <div 
+      v-if="selectedNodeData" 
+      class="detail-panel node-panel"
+      :style="{ transform: `translate(${nodePanelPosition.x}px, ${nodePanelPosition.y}px)` }"
+      @mousedown="startDragPanel('node', $event)"
+    >
+      <div class="detail-header">
+        <div class="panel-type-indicator node-indicator"></div>
+        <h4>节点: {{ getNodeDisplayName(selectedNodeData) }}</h4>
+        <a-button type="text" size="small" @click="clearSelection">
+          <CloseOutlined />
+        </a-button>
+      </div>
+      <div class="detail-content">
+        <div class="detail-item">
+          <span class="detail-label">ID:</span>
+          <span class="detail-value">{{ selectedNodeData.id }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="detail-label">标签:</span>
+          <span class="detail-value">{{ selectedNodeData.labels?.join(', ') || 'N/A' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="detail-label">类型:</span>
+          <span class="detail-value">{{ selectedNodeData.entity_type }}</span>
+        </div>
+        <div v-if="selectedNodeData.properties?.description" class="detail-item">
+          <span class="detail-label">描述:</span>
+          <span class="detail-value">{{ selectedNodeData.properties.description }}</span>
+        </div>
+        <div class="detail-actions">
+          <a-button
+            type="primary"
+            size="small"
+            @click="expandNode(selectedNodeData.id)"
+            :loading="expanding"
+            :disabled="!selectedDatabase"
+          >
+            展开相邻节点
+          </a-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 边详情面板 -->
+    <div 
+      v-if="selectedEdgeData" 
+      class="detail-panel edge-panel"
+      :style="{ transform: `translate(${edgePanelPosition.x}px, ${edgePanelPosition.y}px)` }"
+      @mousedown="startDragPanel('edge', $event)"
+    >
+      <div class="detail-header">
+        <div class="panel-type-indicator edge-indicator"></div>
+        <h4>边: {{ getEdgeDisplayName(selectedEdgeData) }}</h4>
+        <a-button type="text" size="small" @click="clearSelection">
+          <CloseOutlined />
+        </a-button>
+      </div>
+      <div class="detail-content">
+        <div class="detail-item">
+          <span class="detail-label">ID:</span>
+          <span class="detail-value">{{ selectedEdgeData.id }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="detail-label">源节点:</span>
+          <span class="detail-value">{{ selectedEdgeData.source }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="detail-label">目标节点:</span>
+          <span class="detail-value">{{ selectedEdgeData.target }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="detail-label">类型:</span>
+          <span class="detail-value">{{ selectedEdgeData.type || 'DIRECTED' }}</span>
+        </div>
+        <div v-if="selectedEdgeData.properties?.weight" class="detail-item">
+          <span class="detail-label">权重:</span>
+          <span class="detail-value">{{ selectedEdgeData.properties.weight }}</span>
+        </div>
+        <div v-if="selectedEdgeData.properties?.keywords" class="detail-item">
+          <span class="detail-label">关键词:</span>
+          <span class="detail-value">{{ selectedEdgeData.properties.keywords }}</span>
+        </div>
+        <div v-if="selectedEdgeData.properties?.description" class="detail-item">
+          <span class="detail-label">描述:</span>
+          <span class="detail-value">{{ selectedEdgeData.properties.description }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="legend" v-if="entityTypes.length > 0">
+      <div class="legend-header">
+        <h4>实体类型</h4>
+      </div>
+      <div class="legend-content">
+        <div class="legend-item" v-for="type in entityTypes" :key="type.type">
+          <div
+            class="legend-color"
+            :style="{ backgroundColor: getEntityColor(type.type) }"
+          ></div>
+          <span>{{ type.type }} ({{ type.count }})</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 控制按钮 (简化版) -->
+    <div class="graph-controls">
+      <div class="control-group">
+        <a-button @click="zoomIn" size="small" type="text" class="control-btn">
+          <PlusOutlined />
+        </a-button>
+        <a-button @click="zoomOut" size="small" type="text" class="control-btn">
+          <MinusOutlined />
+        </a-button>
+        <a-button @click="resetCamera" size="small" type="text" class="control-btn" title="重置视图">
+          <HomeOutlined />
+        </a-button>
+      </div>
+    </div>
+
+    <!-- 加载遮罩 -->
+    <div v-if="loading" class="loading-overlay">
+      <div class="loading-content">
+        <a-spin size="large" />
+        <p>{{ loadingMessage }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onUnmounted, computed, watch, nextTick } from 'vue'
+import { message } from 'ant-design-vue'
+import { 
+  SearchOutlined, 
+  ReloadOutlined, 
+  ClearOutlined,
+  CloseOutlined, 
+  PlusOutlined, 
+  MinusOutlined, 
+  HomeOutlined 
+} from '@ant-design/icons-vue'
+import Sigma from 'sigma'
+import { NodeBorderProgram } from '@sigma/node-border'
+import EdgeCurveProgram, { EdgeCurvedArrowProgram } from '@sigma/edge-curve'
+import { EdgeArrowProgram } from 'sigma/rendering'
+
+import {
+  getAvailableDatabases,
+  getGraphLabels,
+  getSubgraph,
+  getFullGraph,
+  getGraphStats,
+  expandNodeNeighbors
+} from '@/apis/graph_api'
+import { useGraphStore } from '@/stores/graphStore'
+import '@/assets/css/sigma.css'
+
+// 定义 props
+const props = defineProps({
+  initialDatabaseId: {
+    type: String,
+    default: ''
+  },
+  hideDbSelector: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// 状态管理
+const graphStore = useGraphStore()
+
+// 响应式引用
+const loading = ref(false)
+const loadingDatabases = ref(false)
+const loadingLabels = ref(false)
+const expanding = ref(false)
+const sigmaContainer = ref(null)
+const layoutRunning = ref(false)
+const loadingMessage = ref('加载图数据中...')
+
+// 面板拖拽相关
+const nodePanelPosition = ref({ x: 16, y: 80 })
+const edgePanelPosition = ref({ x: 16, y: 370 })
+const dragging = ref({ active: false, type: '', startX: 0, startY: 0, initialX: 0, initialY: 0 })
+
+// 数据库相关状态
+const selectedDatabase = ref('')
+const availableDatabases = ref([])
+const selectedLabel = ref('*')
+const availableLabels = ref([])
+
+// Sigma实例
+let sigmaInstance = null
+let layoutWorker = null
+
+// 搜索和筛选参数
+const searchParams = reactive({
+  max_nodes: 200,
+  max_depth: 2
+})
+
+// 计算属性
+const entityTypes = computed(() => graphStore.entityTypes)
+const stats = computed(() => graphStore.stats)
+const selectedNodeData = computed(() => graphStore.selectedNodeData)
+const selectedEdgeData = computed(() => graphStore.selectedEdgeData)
+
+// 获取节点显示名称
+const getNodeDisplayName = (node) => {
+  if (node.properties?.entity_id) {
+    return node.properties.entity_id
+  }
+  if (node.labels && node.labels.length > 0) {
+    return node.labels[0]
+  }
+  return node.id || 'Unknown'
+}
+
+// 获取边显示名称
+const getEdgeDisplayName = (edge) => {
+  if (edge.properties?.keywords) {
+    return edge.properties.keywords
+  }
+  if (edge.properties?.description) {
+    return edge.properties.description.substring(0, 20) + '...'
+  }
+  return `${edge.source} -> ${edge.target}`
+}
+
+// 加载可用数据库
+const loadAvailableDatabases = async () => {
+  // 如果隐藏数据库选择器且有初始数据库ID，直接使用
+  if (props.hideDbSelector && props.initialDatabaseId) {
+    selectedDatabase.value = props.initialDatabaseId
+    await loadGraphLabels(selectedDatabase.value)
+    return
+  }
+  
+  loadingDatabases.value = true
+  try {
+    const response = await getAvailableDatabases()
+    if (response.success) {
+      availableDatabases.value = response.data.databases || []
+      
+      // 如果有初始数据库 ID，优先选择它
+      if (props.initialDatabaseId && availableDatabases.value.some(db => db.db_id === props.initialDatabaseId)) {
+        selectedDatabase.value = props.initialDatabaseId
+        await onDatabaseChange(selectedDatabase.value)
+      } else if (availableDatabases.value.length > 0 && !selectedDatabase.value) {
+        selectedDatabase.value = availableDatabases.value[0].db_id
+        await onDatabaseChange(selectedDatabase.value)
+      }
+    }
+  } catch (error) {
+    console.error('加载数据库列表失败:', error)
+    message.error('加载数据库列表失败: ' + error.message)
+  } finally {
+    loadingDatabases.value = false
+  }
+}
+
+// 加载图标签
+const loadGraphLabels = async (dbId) => {
+  if (!dbId) return
+  
+  loadingLabels.value = true
+  try {
+    const response = await getGraphLabels(dbId)
+    if (response.success) {
+      availableLabels.value = response.data.labels || []
+    }
+  } catch (error) {
+    console.error('加载图标签失败:', error)
+    availableLabels.value = []
+  } finally {
+    loadingLabels.value = false
+  }
+}
+
+// 数据库切换处理
+const onDatabaseChange = async (dbId) => {
+  if (!dbId) return
+  
+  selectedDatabase.value = dbId
+  selectedLabel.value = '*'
+  
+  // 清空当前图谱
+  clearGraph()
+  
+  // 加载新数据库的标签
+  await loadGraphLabels(dbId)
+  
+  message.info(`已切换到数据库: ${availableDatabases.value.find(db => db.db_id === dbId)?.name || dbId}`)
+}
+
+// Sigma.js配置
+const sigmaSettings = {
+  allowInvalidContainer: true,
+  defaultNodeType: 'default',
+  defaultEdgeType: 'curvedArrow',
+  renderEdgeLabels: true,
+  renderLabels: true,
+  enableEdgeEvents: true,
+  // 添加 passive event listener 配置以解决警告
+  enableCameraAPI: true,
+  touchActions: 'pan-y pinch-zoom',
+  eventBubbling: false,
+  edgeProgramClasses: {
+    arrow: EdgeArrowProgram,
+    curvedArrow: EdgeCurvedArrowProgram,
+    curved: EdgeCurveProgram
+  },
+  nodeProgramClasses: {
+    default: NodeBorderProgram
+  },
+  labelSize: 12,
+  edgeLabelSize: 10,
+  labelColor: {
+    color: '#000'
+  },
+  edgeLabelColor: {
+    color: '#666'
+  },
+  minEdgeThickness: 3, // 增加最小边厚度，提高点击性
+  maxEdgeThickness: 8, // 增加最大边厚度
+  // 添加边点击相关配置
+  edgeClickTolerance: 10, // 边点击容差，增加点击检测区域
+  edgeHoverTolerance: 8,  // 边悬停容差
+  zoomToSizeRatioFunction: (x) => x, // 确保缩放时边的厚度保持合理
+}
+
+// 初始化Sigma.js
+const initSigma = async () => {
+  if (!sigmaContainer.value || sigmaInstance) return
+
+  try {
+    sigmaInstance = new Sigma(
+      graphStore.sigmaGraph || graphStore.createSigmaGraph({ nodes: [], edges: [] }),
+      sigmaContainer.value,
+      sigmaSettings
+    )
+
+    // 保存实例到状态管理
+    graphStore.setSigmaInstance(sigmaInstance)
+
+    // 注册事件监听器
+    registerEvents()
+
+    console.log('Sigma.js 实例创建成功')
+  } catch (error) {
+    console.error('初始化Sigma.js失败:', error)
+    message.error('图可视化初始化失败')
+  }
+}
+
+// 拖拽状态
+const isDragging = ref(false)
+let draggedNode = null
+
+// 注册事件监听器
+const registerEvents = () => {
+  if (!sigmaInstance) return
+
+  // 节点点击事件
+  sigmaInstance.on('clickNode', ({ node }) => {
+    try {
+      const graph = sigmaInstance.getGraph()
+      if (graph.hasNode(node)) {
+        console.log('Clicked node:', node)
+        
+        // 立即设置选中节点，显示详情面板
+        graphStore.setSelectedNode(node, false) // 先不移动相机
+        
+        // 获取节点数据并确保设置成功
+        const nodeData = graph.getNodeAttributes(node)
+        console.log('Node data:', nodeData)
+        
+        // 延迟一点后再移动相机，确保详情面板已显示
+        setTimeout(() => {
+          if (graphStore.selectedNode === node) {
+            graphStore.moveToSelectedNode = true
+            graphStore.setSelectedNode(node, true) // 现在移动相机
+          }
+        }, 100)
+        
+      } else {
+        console.warn('Clicked node does not exist in graph:', node)
+      }
+    } catch (error) {
+      console.error('Error handling node click:', error)
+    }
+  })
+
+  // 节点悬停事件
+  sigmaInstance.on('enterNode', ({ node }) => {
+    if (!isDragging.value) {
+      try {
+        const graph = sigmaInstance.getGraph()
+        if (graph.hasNode(node)) {
+          graphStore.setFocusedNode(node)
+        }
+      } catch (error) {
+        console.error('Error handling node enter:', error)
+      }
+    }
+  })
+
+  sigmaInstance.on('leaveNode', () => {
+    if (!isDragging.value) {
+      graphStore.setFocusedNode(null)
+    }
+  })
+
+  // 边点击事件
+  sigmaInstance.on('clickEdge', ({ edge }) => {
+    try {
+      console.log('边被点击:', edge)
+      const graph = sigmaInstance.getGraph()
+      if (graph.hasEdge(edge)) {
+        graphStore.setSelectedEdge(edge)
+        const edgeData = graph.getEdgeAttributes(edge)
+        console.log('边数据:', edgeData)
+        message.success(`已选中边: ${edge}`)
+      } else {
+        console.warn('点击的边不存在于图中:', edge)
+      }
+    } catch (error) {
+      console.error('处理边点击事件时出错:', error)
+    }
+  })
+
+  // 添加边悬停事件以提高交互体验
+  sigmaInstance.on('enterEdge', ({ edge }) => {
+    if (!isDragging.value) {
+      try {
+        const graph = sigmaInstance.getGraph()
+        if (graph.hasEdge(edge)) {
+          // 高亮悬停的边
+          graph.setEdgeAttribute(edge, 'color', '#ff0000')
+          graph.setEdgeAttribute(edge, 'size', (graph.getEdgeAttribute(edge, 'size') || 1) * 1.5)
+          sigmaInstance.refresh()
+          console.log('悬停在边上:', edge)
+        }
+      } catch (error) {
+        console.error('处理边悬停事件时出错:', error)
+      }
+    }
+  })
+
+  sigmaInstance.on('leaveEdge', ({ edge }) => {
+    if (!isDragging.value) {
+      try {
+        const graph = sigmaInstance.getGraph()
+        if (graph.hasEdge(edge)) {
+          // 恢复边的原始样式
+          const originalData = graph.getEdgeAttribute(edge, 'originalData')
+          graph.setEdgeAttribute(edge, 'color', originalData?.color || '#666')
+          graph.setEdgeAttribute(edge, 'size', originalData?.size || 1)
+          sigmaInstance.refresh()
+        }
+      } catch (error) {
+        console.error('处理边离开事件时出错:', error)
+      }
+    }
+  })
+
+  // 画布点击事件
+  sigmaInstance.on('clickStage', () => {
+    graphStore.clearSelection()
+  })
+
+  // 拖拽支持
+  sigmaInstance.on('downNode', (e) => {
+    isDragging.value = true
+    draggedNode = e.node
+
+    // 高亮拖拽节点
+    const graph = sigmaInstance.getGraph()
+    graph.setNodeAttribute(draggedNode, 'highlighted', true)
+
+    // 停止布局
+    if (layoutWorker) {
+      layoutWorker.stop()
+    }
+  })
+
+  sigmaInstance.getMouseCaptor().on('mousemovebody', (e) => {
+    if (!isDragging.value || !draggedNode) return
+
+    // 获取新位置
+    const pos = sigmaInstance.viewportToGraph(e)
+
+    // 更新节点位置
+    const graph = sigmaInstance.getGraph()
+    graph.setNodeAttribute(draggedNode, 'x', pos.x)
+    graph.setNodeAttribute(draggedNode, 'y', pos.y)
+
+    // 阻止默认行为
+    e.preventSigmaDefault()
+    e.original.preventDefault()
+    e.original.stopPropagation()
+  })
+
+  sigmaInstance.getMouseCaptor().on('mouseup', () => {
+    if (draggedNode) {
+      const graph = sigmaInstance.getGraph()
+      graph.removeNodeAttribute(draggedNode, 'highlighted')
+    }
+    isDragging.value = false
+    draggedNode = null
+  })
+}
+
+// 加载图数据
+const loadGraphData = async () => {
+  if (!selectedDatabase.value) {
+    message.warning('请先选择数据库')
+    return
+  }
+
+  loading.value = true
+  loadingMessage.value = '加载图数据中...'
+  graphStore.setIsFetching(true)
+
+  try {
+    const [graphResponse, statsResponse] = await Promise.all([
+      getSubgraph({
+        db_id: selectedDatabase.value,
+        node_label: selectedLabel.value || '*',
+        max_depth: searchParams.max_depth,
+        max_nodes: searchParams.max_nodes
+      }),
+      getGraphStats(selectedDatabase.value)
+    ])
+
+    if (graphResponse.success && statsResponse.success) {
+      // 设置实体类型
+      graphStore.setEntityTypes(statsResponse.data.entity_types || [])
+
+      // 创建图数据
+      const rawGraph = graphStore.createGraphFromApiData(
+        graphResponse.data.nodes,
+        graphResponse.data.edges
+      )
+
+      // 设置图数据
+      graphStore.setRawGraph(rawGraph)
+      graphStore.stats = {
+        displayed_nodes: graphResponse.data.nodes.length,
+        displayed_edges: graphResponse.data.edges.length,
+        is_truncated: graphResponse.data.is_truncated
+      }
+
+      console.log('Raw graph created:', {
+        nodes: rawGraph.nodes.length,
+        edges: rawGraph.edges.length,
+        sampleNode: rawGraph.nodes[0],
+        sampleEdge: rawGraph.edges[0]
+      })
+
+      // 创建Sigma图
+      const sigmaGraph = graphStore.createSigmaGraph(rawGraph)
+      graphStore.setSigmaGraph(sigmaGraph)
+
+      // 应用布局
+      await applyLayout(sigmaGraph)
+
+      // 更新Sigma实例
+      if (sigmaInstance) {
+        sigmaInstance.setGraph(sigmaGraph)
+        sigmaInstance.refresh()
+      } else {
+        await nextTick()
+        await initSigma()
+      }
+
+      message.success(`加载成功：${rawGraph.nodes.length} 个节点，${rawGraph.edges.length} 条边${graphResponse.data.is_truncated ? ' (已截断)' : ''}`)
+    }
+  } catch (error) {
+    console.error('加载图数据失败:', error)
+    message.error('加载图数据失败: ' + error.message)
+  } finally {
+    loading.value = false
+    loadingMessage.value = '加载图数据中...'
+    graphStore.setIsFetching(false)
+  }
+}
+
+// 加载完整图数据
+const loadFullGraph = async () => {
+  selectedLabel.value = '*'
+  await loadGraphData()
+}
+
+// 清空图谱
+const clearGraph = () => {
+  if (sigmaInstance) {
+    const emptyGraph = graphStore.createSigmaGraph({ nodes: [], edges: [] })
+    sigmaInstance.setGraph(emptyGraph)
+    sigmaInstance.refresh()
+  }
+  graphStore.reset()
+}
+
+// 应用布局算法
+const applyLayout = async (graph) => {
+  return new Promise((resolve) => {
+    if (!graph || graph.order === 0) {
+      resolve()
+      return
+    }
+
+    loadingMessage.value = '计算布局中...'
+
+    // 简单的力导向布局
+    const nodes = graph.nodes()
+    const edges = graph.edges()
+
+    // 随机初始位置
+    nodes.forEach((node) => {
+      if (!graph.hasNodeAttribute(node, 'x')) {
+        graph.setNodeAttribute(node, 'x', Math.random() * 1000)
+      }
+      if (!graph.hasNodeAttribute(node, 'y')) {
+        graph.setNodeAttribute(node, 'y', Math.random() * 1000)
+      }
+    })
+
+    // 简单的力导向迭代
+    const iterations = 100
+    for (let i = 0; i < iterations; i++) {
+      // 斥力
+      for (let j = 0; j < nodes.length; j++) {
+        for (let k = j + 1; k < nodes.length; k++) {
+          const node1 = nodes[j]
+          const node2 = nodes[k]
+
+          const x1 = graph.getNodeAttribute(node1, 'x')
+          const y1 = graph.getNodeAttribute(node1, 'y')
+          const x2 = graph.getNodeAttribute(node2, 'x')
+          const y2 = graph.getNodeAttribute(node2, 'y')
+
+          const dx = x2 - x1
+          const dy = y2 - y1
+          const distance = Math.sqrt(dx * dx + dy * dy) || 1
+
+          const force = 1000 / (distance * distance)
+          const fx = (dx / distance) * force
+          const fy = (dy / distance) * force
+
+          graph.setNodeAttribute(node1, 'x', x1 - fx)
+          graph.setNodeAttribute(node1, 'y', y1 - fy)
+          graph.setNodeAttribute(node2, 'x', x2 + fx)
+          graph.setNodeAttribute(node2, 'y', y2 + fy)
+        }
+      }
+
+      // 引力
+      edges.forEach((edge) => {
+        const source = graph.source(edge)
+        const target = graph.target(edge)
+
+        const x1 = graph.getNodeAttribute(source, 'x')
+        const y1 = graph.getNodeAttribute(source, 'y')
+        const x2 = graph.getNodeAttribute(target, 'x')
+        const y2 = graph.getNodeAttribute(target, 'y')
+
+        const dx = x2 - x1
+        const dy = y2 - y1
+        const distance = Math.sqrt(dx * dx + dy * dy) || 1
+
+        const force = distance * 0.01
+        const fx = (dx / distance) * force
+        const fy = (dy / distance) * force
+
+        graph.setNodeAttribute(source, 'x', x1 + fx)
+        graph.setNodeAttribute(source, 'y', y1 + fy)
+        graph.setNodeAttribute(target, 'x', x2 - fx)
+        graph.setNodeAttribute(target, 'y', y2 - fy)
+      })
+    }
+
+    resolve()
+  })
+}
+
+// 展开节点
+const expandNode = async (nodeId) => {
+  if (!selectedDatabase.value) {
+    message.warning('请先选择数据库')
+    return
+  }
+
+  expanding.value = true
+  try {
+    const response = await expandNodeNeighbors({
+      db_id: selectedDatabase.value,
+      node_label: nodeId,
+      max_depth: 1,
+      max_nodes: 50
+    })
+
+    if (response.success) {
+      // 合并新数据的逻辑
+      const existingNodeIds = new Set(graphStore.rawGraph.nodes.map(n => n.id))
+      const existingEdgeIds = new Set(graphStore.rawGraph.edges.map(e => e.id))
+
+      const newNodes = response.data.nodes.filter(node => !existingNodeIds.has(node.id))
+      const newEdges = response.data.edges.filter(edge => !existingEdgeIds.has(edge.id))
+
+      if (newNodes.length > 0 || newEdges.length > 0) {
+        // 重新创建图数据
+        const allNodes = [...graphStore.rawGraph.nodes, ...newNodes]
+        const allEdges = [...graphStore.rawGraph.edges, ...newEdges]
+
+        const rawGraph = graphStore.createGraphFromApiData(allNodes, allEdges)
+        graphStore.setRawGraph(rawGraph)
+
+        const sigmaGraph = graphStore.createSigmaGraph(rawGraph)
+        graphStore.setSigmaGraph(sigmaGraph)
+
+        if (sigmaInstance) {
+          sigmaInstance.setGraph(sigmaGraph)
+          sigmaInstance.refresh()
+        }
+
+        message.success(`展开成功：新增 ${newNodes.length} 个节点，${newEdges.length} 条边`)
+      } else {
+        message.info('没有新的相邻节点')
+      }
+    }
+  } catch (error) {
+    console.error('展开节点失败:', error)
+    message.error('展开节点失败: ' + error.message)
+  } finally {
+    expanding.value = false
+  }
+}
+
+// 控制方法
+const zoomIn = () => {
+  if (sigmaInstance) {
+    const camera = sigmaInstance.getCamera()
+    camera.animatedZoom({ duration: 200 })
+  }
+}
+
+const zoomOut = () => {
+  if (sigmaInstance) {
+    const camera = sigmaInstance.getCamera()
+    camera.animatedUnzoom({ duration: 200 })
+  }
+}
+
+const resetCamera = () => {
+  if (sigmaInstance) {
+    try {
+      const camera = sigmaInstance.getCamera()
+      const graph = sigmaInstance.getGraph()
+      
+      // 如果图为空，直接重置
+      if (graph.order === 0) {
+        camera.animatedReset({ duration: 500 })
+        return
+      }
+      
+      // 计算图的边界以确保所有节点都可见
+      const nodes = graph.nodes()
+      if (nodes.length > 0) {
+        const bounds = { minX: Infinity, maxX: -Infinity, minY: Infinity, maxY: -Infinity }
+        
+        nodes.forEach(node => {
+          const attrs = graph.getNodeAttributes(node)
+          if (typeof attrs.x === 'number' && typeof attrs.y === 'number') {
+            bounds.minX = Math.min(bounds.minX, attrs.x)
+            bounds.maxX = Math.max(bounds.maxX, attrs.x)
+            bounds.minY = Math.min(bounds.minY, attrs.y)
+            bounds.maxY = Math.max(bounds.maxY, attrs.y)
+          }
+        })
+        
+        // 只有在边界有效时才使用fitBounds
+        if (isFinite(bounds.minX) && isFinite(bounds.maxX) && isFinite(bounds.minY) && isFinite(bounds.maxY)) {
+          const centerX = (bounds.minX + bounds.maxX) / 2
+          const centerY = (bounds.minY + bounds.maxY) / 2
+          const padding = 50
+          
+          camera.animate({
+            x: centerX,
+            y: centerY,
+            ratio: Math.max(
+              (bounds.maxX - bounds.minX + padding) / window.innerWidth,
+              (bounds.maxY - bounds.minY + padding) / window.innerHeight
+            ) || 1.0
+          }, { duration: 500 })
+        } else {
+          // 回退到默认重置
+          camera.animatedReset({ duration: 500 })
+        }
+      } else {
+        camera.animatedReset({ duration: 500 })
+      }
+      
+      console.log('Camera reset completed')
+      message.success('视图已重置')
+    } catch (error) {
+      console.error('Error resetting camera:', error)
+      // 强制重置
+      if (sigmaInstance) {
+        const camera = sigmaInstance.getCamera()
+        camera.setState({ x: 0, y: 0, ratio: 1.0 })
+        sigmaInstance.refresh()
+      }
+      message.info('视图已强制重置')
+    }
+  }
+}
+
+const toggleLayout = () => {
+  // 简单的布局切换
+  layoutRunning.value = !layoutRunning.value
+  if (layoutRunning.value && sigmaInstance) {
+    applyLayout(sigmaInstance.getGraph())
+  }
+}
+
+const clearSelection = () => {
+  graphStore.clearSelection()
+}
+
+const getEntityColor = (entityType) => {
+  return graphStore.getEntityColor(entityType)
+}
+
+// 面板拖拽功能
+const startDragPanel = (type, event) => {
+  event.preventDefault()
+  
+  if (!sigmaContainer.value) return
+  
+  const currentPosition = type === 'node' ? nodePanelPosition.value : edgePanelPosition.value
+  
+  // 获取容器位置，计算相对于容器的鼠标位置
+  const containerRect = sigmaContainer.value.getBoundingClientRect()
+  const relativeX = event.clientX - containerRect.left
+  const relativeY = event.clientY - containerRect.top
+  
+  dragging.value = {
+    active: true,
+    type: type,
+    startX: relativeX,
+    startY: relativeY,
+    initialX: currentPosition.x,
+    initialY: currentPosition.y
+  }
+  
+  document.addEventListener('mousemove', onDragPanel)
+  document.addEventListener('mouseup', stopDragPanel)
+}
+
+const onDragPanel = (event) => {
+  if (!dragging.value.active || !sigmaContainer.value) return
+  
+  // 获取容器位置和尺寸
+  const containerRect = sigmaContainer.value.getBoundingClientRect()
+  
+  // 计算当前鼠标相对于容器的位置
+  const currentRelativeX = event.clientX - containerRect.left
+  const currentRelativeY = event.clientY - containerRect.top
+  
+  // 计算拖拽偏移
+  const deltaX = currentRelativeX - dragging.value.startX
+  const deltaY = currentRelativeY - dragging.value.startY
+  
+  const maxX = containerRect.width - 320  // 面板宽度为300px + 一些边距
+  const maxY = containerRect.height - 200 // 面板高度约为200px
+  
+  const newPosition = {
+    x: Math.max(0, Math.min(maxX, dragging.value.initialX + deltaX)),
+    y: Math.max(0, Math.min(maxY, dragging.value.initialY + deltaY))
+  }
+  
+  if (dragging.value.type === 'node') {
+    nodePanelPosition.value = newPosition
+  } else {
+    edgePanelPosition.value = newPosition
+  }
+}
+
+const stopDragPanel = () => {
+  dragging.value.active = false
+  document.removeEventListener('mousemove', onDragPanel)
+  document.removeEventListener('mouseup', stopDragPanel)
+}
+
+// 生命周期
+onMounted(async () => {
+  await nextTick()
+  await loadAvailableDatabases()
+})
+
+onUnmounted(() => {
+  // 清理拖拽事件监听器
+  document.removeEventListener('mousemove', onDragPanel)
+  document.removeEventListener('mouseup', stopDragPanel)
+  
+  if (sigmaInstance) {
+    sigmaInstance.kill()
+    sigmaInstance = null
+  }
+  if (layoutWorker) {
+    layoutWorker.stop()
+  }
+  graphStore.reset()
+})
+
+// 监听选中节点数据变化，用于调试
+watch(() => graphStore.selectedNodeData, (nodeData) => {
+  console.log('Selected node data changed:', nodeData)
+})
+
+// 监听选中节点变化，移动相机
+watch(() => graphStore.selectedNode, (nodeId) => {
+  if (nodeId && graphStore.moveToSelectedNode && sigmaInstance) {
+    try {
+      const graph = sigmaInstance.getGraph()
+      
+      // 检查节点是否存在
+      if (!graph.hasNode(nodeId)) {
+        console.warn('Selected node does not exist in graph:', nodeId)
+        graphStore.moveToSelectedNode = false
+        return
+      }
+
+      const nodeAttributes = graph.getNodeAttributes(nodeId)
+      
+      // 检查节点属性是否有效
+      if (!nodeAttributes || typeof nodeAttributes.x !== 'number' || typeof nodeAttributes.y !== 'number') {
+        console.warn('Invalid node attributes for node:', nodeId, nodeAttributes)
+        graphStore.moveToSelectedNode = false
+        return
+      }
+
+      const camera = sigmaInstance.getCamera()
+      const currentState = camera.getState()
+      
+      console.log('Moving camera to node:', nodeId, { 
+        x: nodeAttributes.x, 
+        y: nodeAttributes.y,
+        currentRatio: currentState.ratio 
+      })
+      
+      // 计算合适的缩放比例，避免过度缩放
+      const currentRatio = currentState.ratio || 1.0
+      const targetRatio = Math.max(0.1, Math.min(currentRatio * 0.7, 0.6))
+      
+      // 验证节点位置是否有效
+      const isValidPosition = (
+        typeof nodeAttributes.x === 'number' && 
+        typeof nodeAttributes.y === 'number' &&
+        !isNaN(nodeAttributes.x) && 
+        !isNaN(nodeAttributes.y) &&
+        isFinite(nodeAttributes.x) && 
+        isFinite(nodeAttributes.y)
+      )
+      
+      if (!isValidPosition) {
+        console.warn('Invalid node position, skipping camera movement:', nodeAttributes)
+        return
+      }
+      
+      // 移动相机到节点位置，使用安全的缩放比例
+      camera.animate(
+        { 
+          x: nodeAttributes.x, 
+          y: nodeAttributes.y, 
+          ratio: targetRatio  // 使用计算出的安全缩放比例
+        },
+        { 
+          duration: 600  // 适中的动画时间
+        }
+      )
+    } catch (error) {
+      console.error('Error moving camera to selected node:', error)
+      // 如果相机移动失败，至少确保显示节点详情
+      if (nodeId) {
+        const graph = sigmaInstance.getGraph()
+        if (graph.hasNode(nodeId)) {
+          const nodeData = graph.getNodeAttributes(nodeId)
+          console.log('Fallback: showing node details without camera movement', nodeData)
+        }
+      }
+    } finally {
+      // 确保重置标志
+      graphStore.moveToSelectedNode = false
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.knowledge-graph-viewer {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #f5f5f5;
+}
+
+.control-panel {
+  background: white;
+  padding: 16px 0;
+  border-bottom: none;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  flex-wrap: wrap;
+  z-index: 1000;
+}
+
+.database-section,
+.search-section,
+.filter-section,
+.stats-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.stats-section {
+  margin-left: auto;
+}
+
+.sigma-container {
+  flex: 1;
+  background: white;
+  position: relative; /* 确保子元素可以相对于此容器定位 */
+  border: 1px solid var(--main-light-3);
+  border-radius: 8px;
+  overflow: hidden;
+
+  &.loading {
+    pointer-events: none;
+  }
+}
+
+.detail-panel {
+  position: absolute;
+  width: 300px;
+  background: white;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.2s ease;
+  cursor: move;
+  z-index: 1000;
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+  }
+
+  &.node-panel {
+    border-left: 4px solid #52c41a; // 绿色边框标识节点面板
+  }
+
+  &.edge-panel {
+    border-left: 4px solid #1890ff; // 蓝色边框标识边面板
+  }
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid #f0f0f0;
+  background: #fafafa;
+  border-radius: 8px 8px 0 0;
+
+  h4 {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    flex: 1;
+    color: #262626;
+  }
+}
+
+.panel-type-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+
+  &.node-indicator {
+    background: #52c41a;
+  }
+
+  &.edge-indicator {
+    background: #1890ff;
+  }
+}
+
+.detail-content {
+  padding: 16px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.detail-item {
+  display: flex;
+  margin-bottom: 12px;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.detail-label {
+  min-width: 60px;
+  font-weight: 600;
+  color: #595959;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+.detail-value {
+  color: #262626;
+  font-size: 12px;
+  word-break: break-word;
+  line-height: 1.4;
+}
+
+.detail-actions {
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.graph-controls {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  z-index: 1000;
+}
+
+.control-group {
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(8px);
+  border: 2px solid white;
+  border-radius: 20px;
+  padding: 4px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  display: flex;
+  gap: 2px;
+}
+
+.control-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: #595959;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: color-mix(in srgb, var(--main-color) 10%, transparent);
+    color: var(--main-color);
+  }
+}
+
+.legend {
+  position: absolute;
+  right: 16px;
+  top: 80px;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(8px);
+  border: 2px solid white;
+  border-radius: 8px;
+  width: 180px;
+  max-height: 300px;
+  z-index: 1000;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.legend-header {
+  background: #fafafa;
+  padding: 8px 12px;
+  border-bottom: 1px solid #f0f0f0;
+
+  h4 {
+    margin: 0;
+    font-size: 13px;
+    font-weight: 600;
+    color: #262626;
+  }
+}
+
+.legend-content {
+  padding: 8px 12px;
+  max-height: 240px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  
+  /* 自定义滚动条样式 */
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #d9d9d9;
+    border-radius: 2px;
+    
+    &:hover {
+      background: #bfbfbf;
+    }
+  }
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 6px;
+  margin: 2px 0;
+  border-radius: 4px;
+  font-size: 12px;
+  min-width: 0;
+  transition: background-color 0.2s ease;
+  
+  span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+    min-width: 0;
+    color: #595959;
+  }
+  
+  &:hover {
+    background-color: #f5f5f5;
+  }
+}
+
+.legend-color {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+}
+
+.loading-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+}
+
+.loading-content {
+  text-align: center;
+
+  p {
+    margin-top: 16px;
+    color: #666;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/layouts/AppLayout.vue b/web/src/layouts/AppLayout.vue
index 9555da41..619556fb 100644
--- a/web/src/layouts/AppLayout.vue
+++ b/web/src/layouts/AppLayout.vue
@@ -207,7 +207,7 @@ const mainList = [{
 </template>
 
 <style lang="less" scoped>
-@import '@/assets/main.css';
+@import '@/assets/css/main.css';
 
 :root {
   --header-width: 60px;
diff --git a/web/src/main.js b/web/src/main.js
index 59593b23..0249a8a6 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -6,7 +6,7 @@ import router from './router'
 
 import Antd from 'ant-design-vue';
 import 'ant-design-vue/dist/reset.css';
-import './assets/main.css'
+import '@/assets/css/main.css'
 
 const app = createApp(App)
 const pinia = createPinia()
diff --git a/web/src/stores/graphStore.js b/web/src/stores/graphStore.js
new file mode 100644
index 00000000..aa38968a
--- /dev/null
+++ b/web/src/stores/graphStore.js
@@ -0,0 +1,397 @@
+import { defineStore } from 'pinia'
+import { DirectedGraph } from 'graphology'
+
+export const useGraphStore = defineStore('graph', {
+  state: () => ({
+    // 选中和聚焦状态
+    selectedNode: null,
+    focusedNode: null,
+    selectedEdge: null,
+    focusedEdge: null,
+
+    // 图数据
+    rawGraph: null,
+    sigmaGraph: null,
+    sigmaInstance: null,
+
+    // 实体类型和颜色映射
+    entityTypes: [],
+    typeColorMap: new Map(),
+
+    // 加载状态
+    isFetching: false,
+    graphIsEmpty: false,
+
+    // 移动到选中节点的标志
+    moveToSelectedNode: false,
+
+    // 图统计信息
+    stats: {
+      total_nodes: 0,
+      total_edges: 0,
+      displayed_nodes: 0,
+      displayed_edges: 0
+    }
+  }),
+
+  getters: {
+    // 获取选中节点的详细信息
+    selectedNodeData: (state) => {
+      if (!state.selectedNode || !state.rawGraph) return null
+      return state.rawGraph.nodes.find(node => node.id === state.selectedNode)
+    },
+
+    // 获取选中边的详细信息
+    selectedEdgeData: (state) => {
+      if (!state.selectedEdge || !state.rawGraph) return null
+      // 首先尝试通过dynamicId匹配
+      let foundEdge = state.rawGraph.edges.find(edge => edge.dynamicId === state.selectedEdge)
+      if (foundEdge) return foundEdge
+      
+      // 如果没找到，尝试通过原始ID匹配
+      foundEdge = state.rawGraph.edges.find(edge => edge.id === state.selectedEdge)
+      if (foundEdge) return foundEdge
+      
+      // 最后尝试通过source->target格式匹配
+      const [source, target] = state.selectedEdge.split('->')
+      if (source && target) {
+        foundEdge = state.rawGraph.edges.find(edge => 
+          edge.source === source.trim() && edge.target === target.trim()
+        )
+      }
+      
+      return foundEdge || null
+    },
+
+    // 检查图是否为空
+    isGraphEmpty: (state) => {
+      return !state.rawGraph || state.rawGraph.nodes.length === 0
+    }
+  },
+
+  actions: {
+    // 设置Sigma实例
+    setSigmaInstance(instance) {
+      this.sigmaInstance = instance
+    },
+
+    // 节点选择和聚焦
+    setSelectedNode(nodeId, moveToNode = false) {
+      this.selectedNode = nodeId
+      this.moveToSelectedNode = moveToNode
+      // 如果选中节点，清除选中的边
+      if (nodeId) {
+        this.selectedEdge = null
+      }
+    },
+
+    setFocusedNode(nodeId) {
+      this.focusedNode = nodeId
+    },
+
+    setSelectedEdge(edgeId) {
+      this.selectedEdge = edgeId
+      // 如果选中边，清除选中的节点
+      if (edgeId) {
+        this.selectedNode = null
+      }
+    },
+
+    setFocusedEdge(edgeId) {
+      this.focusedEdge = edgeId
+    },
+
+    // 清除所有选择
+    clearSelection() {
+      this.selectedNode = null
+      this.focusedNode = null
+      this.selectedEdge = null
+      this.focusedEdge = null
+    },
+
+    // 设置加载状态
+    setIsFetching(isFetching) {
+      this.isFetching = isFetching
+    },
+
+    // 设置实体类型
+    setEntityTypes(types) {
+      this.entityTypes = types
+      this.updateTypeColorMap()
+    },
+
+    // 更新类型颜色映射
+    updateTypeColorMap() {
+      const colorPalette = [
+        '#FF6B6B', // 人物 - 红色
+        '#4ECDC4', // 组织 - 青色
+        '#45B7D1', // 地点 - 蓝色
+        '#96CEB4', // 事件 - 绿色
+        '#FFEAA7', // 分类 - 黄色
+        '#DDA0DD', // 设备 - 紫色
+        '#FF7675', // 运动员 - 红色
+        '#FD79A8', // 记录 - 粉色
+        '#FDCB6E', // 年份 - 橙色
+        '#B2BEC3'  // 未知 - 灰色
+      ]
+
+      const typeColorMap = new Map()
+      this.entityTypes.forEach((type, index) => {
+        const colorIndex = index % colorPalette.length
+        typeColorMap.set(type.type, colorPalette[colorIndex])
+      })
+
+      // 为特殊类型设置固定颜色
+      typeColorMap.set('person', '#FF6B6B')
+      typeColorMap.set('organization', '#4ECDC4')
+      typeColorMap.set('location', '#45B7D1')
+      typeColorMap.set('geo', '#45B7D1')
+      typeColorMap.set('event', '#96CEB4')
+      typeColorMap.set('category', '#FFEAA7')
+      typeColorMap.set('unknown', '#B2BEC3')
+
+      this.typeColorMap = typeColorMap
+    },
+
+    // 获取实体类型颜色
+    getEntityColor(entityType) {
+      return this.typeColorMap.get(entityType) || '#B2BEC3'
+    },
+
+    // 设置原始图数据
+    setRawGraph(rawGraph) {
+      this.rawGraph = rawGraph
+      this.graphIsEmpty = !rawGraph || rawGraph.nodes.length === 0
+      this.updateStats()
+    },
+
+    // 设置Sigma图数据
+    setSigmaGraph(sigmaGraph) {
+      this.sigmaGraph = sigmaGraph
+    },
+
+    // 更新统计信息
+    updateStats() {
+      if (this.rawGraph) {
+        this.stats = {
+          total_nodes: this.rawGraph.nodes.length,
+          total_edges: this.rawGraph.edges.length,
+          displayed_nodes: this.rawGraph.nodes.length,
+          displayed_edges: this.rawGraph.edges.length
+        }
+      }
+    },
+
+    // 从API数据创建图数据结构
+    createGraphFromApiData(nodesData, edgesData) {
+      const rawGraph = {
+        nodes: [],
+        edges: [],
+        nodeIdMap: {},
+        edgeIdMap: {},
+        edgeDynamicIdMap: {}
+      }
+
+      console.log('Processing nodes data:', nodesData)
+
+      // 处理节点数据
+      nodesData.forEach((node, index) => {
+        // 适配新的LightRAG API格式
+        const nodeId = String(node.id)
+        const labels = node.labels || [node.entity_type || 'unknown']
+        const entityType = node.entity_type || labels[0] || 'unknown'
+        
+        const processedNode = {
+          id: nodeId,
+          labels: Array.isArray(labels) ? labels.map(String) : [String(labels)],
+          entity_type: String(entityType),
+          properties: {
+            entity_id: String(node.properties?.entity_id || node.entity_id || nodeId),
+            entity_type: String(entityType),
+            description: String(node.properties?.description || node.description || ''),
+            file_path: String(node.properties?.file_path || node.file_path || ''),
+            ...(node.properties || {})
+          },
+          // Sigma.js需要的属性
+          size: this.calculateNodeSize(node),
+          x: Math.random() * 1000, // 随机初始位置
+          y: Math.random() * 1000,
+          color: this.getEntityColor(String(entityType)),
+          degree: 0 // 将在处理边时计算
+        }
+
+        rawGraph.nodes.push(processedNode)
+        rawGraph.nodeIdMap[nodeId] = index
+      })
+
+      // 计算节点度数
+      const nodeDegrees = {}
+      edgesData.forEach(edge => {
+        const sourceId = String(edge.source)
+        const targetId = String(edge.target)
+        nodeDegrees[sourceId] = (nodeDegrees[sourceId] || 0) + 1
+        nodeDegrees[targetId] = (nodeDegrees[targetId] || 0) + 1
+      })
+
+      // 更新节点度数和大小
+      rawGraph.nodes.forEach(node => {
+        node.degree = nodeDegrees[node.id] || 0
+        node.size = this.calculateNodeSize({ degree: node.degree })
+      })
+
+      console.log('Processing edges data:', edgesData)
+
+      // 处理边数据
+      edgesData.forEach((edge, index) => {
+        const sourceId = String(edge.source)
+        const targetId = String(edge.target)
+        const dynamicId = `${sourceId}-${targetId}-${index}`
+        
+        // 适配新的LightRAG API格式
+        const weight = Number(edge.properties?.weight || edge.weight || 1.0)
+        
+        const processedEdge = {
+          id: String(edge.id),
+          source: sourceId,
+          target: targetId,
+          type: edge.type || 'DIRECTED',
+          properties: {
+            weight: weight,
+            keywords: String(edge.properties?.keywords || edge.keywords || ''),
+            description: String(edge.properties?.description || edge.description || ''),
+            file_path: String(edge.properties?.file_path || edge.file_path || ''),
+            ...(edge.properties || {})
+          },
+          dynamicId: dynamicId,
+          // Sigma.js需要的属性
+          size: this.calculateEdgeSize(weight),
+          color: '#666',
+          originalWeight: weight
+        }
+
+        rawGraph.edges.push(processedEdge)
+        rawGraph.edgeIdMap[edge.id] = index
+        rawGraph.edgeDynamicIdMap[dynamicId] = index
+      })
+
+      return rawGraph
+    },
+
+    // 计算节点大小
+    calculateNodeSize(node) {
+      const baseSizeM = 15
+      const degree = node.degree || 0
+      return Math.min(baseSizeM + degree * 3, 40)
+    },
+
+    // 计算边大小
+    calculateEdgeSize(weight) {
+      const minSize = 3  // 与Sigma配置中的minEdgeThickness保持一致
+      const maxSize = 8  // 与Sigma配置中的maxEdgeThickness保持一致
+      const normalizedWeight = Math.max(0, Math.min(1, (weight - 1) / 9)) // 假设权重范围1-10
+      return minSize + normalizedWeight * (maxSize - minSize)
+    },
+
+    // 创建Sigma图实例
+    createSigmaGraph(rawGraph) {
+      console.log('开始创建Sigma图，节点数量:', rawGraph.nodes.length, '边数量:', rawGraph.edges.length)
+      const sigmaGraph = new DirectedGraph()
+
+      // 添加节点
+      rawGraph.nodes.forEach(node => {
+        // 确保所有属性都是正确的类型
+        const nodeAttributes = {
+          label: String(node.properties?.entity_id || node.id),
+          size: Number(node.size) || 15,
+          color: String(node.color) || '#B2BEC3',
+          x: Number(node.x) || Math.random() * 1000,
+          y: Number(node.y) || Math.random() * 1000,
+          // 保存原始数据引用
+          originalData: node
+        }
+
+        sigmaGraph.addNode(String(node.id), nodeAttributes)
+      })
+
+      console.log('节点添加完成，开始添加边...')
+
+      // 添加边
+      let edgeAddedCount = 0
+      let edgeSkippedCount = 0
+      rawGraph.edges.forEach((edge, index) => {
+        // 添加调试信息
+        if (index < 3) {
+          console.log('处理边 #' + index + ':', {
+            id: edge.id,
+            source: edge.source,
+            target: edge.target,
+            dynamicId: edge.dynamicId,
+            edgeObject: edge
+          })
+        }
+
+        if (sigmaGraph.hasNode(String(edge.source)) && sigmaGraph.hasNode(String(edge.target))) {
+          // 确保所有属性都是正确的类型
+          const edgeAttributes = {
+            size: Number(edge.size) || 1,
+            color: String(edge.color) || '#666',
+            label: String(edge.properties?.keywords || edge.properties?.description || ''),
+            originalWeight: Number(edge.originalWeight) || 1,
+            // 保存原始数据引用
+            originalData: edge
+          }
+
+          // 使用标准的 addEdge 方法：addEdge(edgeId, source, target, attributes)
+          try {
+            // 使用动态ID作为Sigma边ID，避免重复
+            const sigmaEdgeId = edge.dynamicId || `${edge.source}->${edge.target}`
+            
+            // 检查是否已存在相同的边
+            if (!sigmaGraph.hasEdge(sigmaEdgeId)) {
+              sigmaGraph.addEdgeWithKey(sigmaEdgeId, String(edge.source), String(edge.target), edgeAttributes)
+              edgeAddedCount++
+            } else {
+              edgeSkippedCount++
+            }
+          } catch (err) {
+            console.warn('添加边失败:', {
+              source: edge.source,
+              target: edge.target,
+              attributes: edgeAttributes,
+              error: err.message
+            })
+          }
+        } else {
+          console.warn('节点不存在，跳过边:', {
+            source: edge.source,
+            target: edge.target,
+            hasSource: sigmaGraph.hasNode(String(edge.source)),
+            hasTarget: sigmaGraph.hasNode(String(edge.target))
+          })
+        }
+      })
+
+      console.log(`边添加完成: 成功 ${edgeAddedCount}, 跳过 ${edgeSkippedCount}`)
+
+      return sigmaGraph
+    },
+
+    // 重置所有状态
+    reset() {
+      this.selectedNode = null
+      this.focusedNode = null
+      this.selectedEdge = null
+      this.focusedEdge = null
+      this.rawGraph = null
+      this.sigmaGraph = null
+      this.moveToSelectedNode = false
+      this.graphIsEmpty = false
+      this.stats = {
+        total_nodes: 0,
+        total_edges: 0,
+        displayed_nodes: 0,
+        displayed_edges: 0
+      }
+    }
+  }
+})
\ No newline at end of file
diff --git a/web/src/views/DataBaseInfoView.vue b/web/src/views/DataBaseInfoView.vue
index 64d647c0..6e068480 100644
--- a/web/src/views/DataBaseInfoView.vue
+++ b/web/src/views/DataBaseInfoView.vue
@@ -4,18 +4,13 @@
     :title="database.name || '数据库信息'"
     :loading="state.databaseLoading"
   >
-    <template #description>
-      <div class="database-info">
-        <a-tag color="blue" v-if="database.embed_model">{{ database.embed_model }}</a-tag>
-        <a-tag color="green" v-if="database.dimension">{{ database.dimension }}</a-tag>
-        <span class="row-count">{{ database.files ? Object.keys(database.files).length : 0 }} 文件 · {{ database.db_id }}</span>
-      </div>
+    <template #left>
+      <a-button type="text" @click="backToDatabase">
+        <LeftOutlined />
+      </a-button>
     </template>
     <template #actions>
-      <a-button type="primary" @click="backToDatabase">
-        <LeftOutlined /> 返回
-      </a-button>
-      <a-button type="primary" @click="showEditModal">
+      <a-button type="text" @click="showEditModal">
         <EditOutlined />
       </a-button>
     </template>
@@ -172,6 +167,12 @@
               </a-button>
             </div>
           </div>
+          <!-- 数据库信息 -->
+          <div class="database-info">
+            <a-tag color="blue" v-if="database.embed_model">{{ database.embed_model }}</a-tag>
+            <a-tag color="green" v-if="database.dimension">{{ database.dimension }}</a-tag>
+            <span class="row-count">{{ database.files ? Object.keys(database.files).length : 0 }} 文件 · {{ database.db_id }}</span>
+          </div>
 
           <a-table
             :columns="columns"
@@ -310,6 +311,17 @@
           </div>
         </div>
       </a-tab-pane>
+
+      <a-tab-pane key="knowledge-graph" force-render>
+        <template #tab><span><Waypoints size="14" class="mr-3 bn-1px" />知识图谱（开发中）</span></template>
+        <div class="knowledge-graph-container db-tab-container">
+          <KnowledgeGraphViewer 
+            :initial-database-id="databaseId" 
+            :hide-db-selector="true"
+          />
+        </div>
+      </a-tab-pane>
+
       <!-- <a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane> -->
        <template #rightExtra>
         <div class="auto-refresh-control">
@@ -323,13 +335,12 @@
 </template>
 
 <script setup>
-import { onMounted, reactive, ref, watch, toRaw, onUnmounted, computed } from 'vue';
+import { onMounted, reactive, ref, watch, toRaw, onUnmounted, computed, h } from 'vue';
 import { message, Modal } from 'ant-design-vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useConfigStore } from '@/stores/config'
 import { useUserStore } from '@/stores/user'
 import { knowledgeBaseApi } from '@/apis/admin_api'
-import HeaderComponent from '@/components/HeaderComponent.vue';
 import {
   ReadOutlined,
   LeftOutlined,
@@ -346,8 +357,12 @@ import {
   EditOutlined,
   PlusOutlined,
   SettingOutlined,
+  ApartmentOutlined,
 } from '@ant-design/icons-vue'
-import { h } from 'vue';
+import HeaderComponent from '@/components/HeaderComponent.vue';
+import KnowledgeGraphViewer from '@/components/KnowledgeGraphViewer.vue';
+import { Waypoints } from 'lucide-vue-next';
+
 
 
 const route = useRoute();
@@ -1026,6 +1041,11 @@ const toggleAutoRefresh = (checked) => {
   gap: 12px;
 }
 
+.knowledge-graph-container {
+  height: calc(100vh - 150px);
+  min-height: 600px;
+}
+
 .query-test-container {
   display: flex;
   flex-direction: row;
@@ -1628,6 +1648,17 @@ const toggleAutoRefresh = (checked) => {
   }
 }
 
+.knowledge-graph-container {
+  height: calc(100vh - 200px);
+  
+  :deep(.knowledge-graph-viewer) {
+    height: 100%;
+    
+    .sigma-container {
+      height: calc(100% - 80px);
+    }
+  }
+}
 
 </style>