diff --git a/frontend/src/views/Process.vue b/frontend/src/views/Process.vue index dc954ff..01846e8 100644 --- a/frontend/src/views/Process.vue +++ b/frontend/src/views/Process.vue @@ -22,10 +22,16 @@ 实时知识图谱 -
- {{ graphData.node_count }} 节点 - | - {{ graphData.edge_count }} 关系 +
+ +
@@ -538,10 +544,20 @@ let graphPollTimer = null // 启动图谱数据轮询 const startGraphPolling = () => { - // 每 3 秒获取一次图谱数据 + // 立即获取一次 + fetchGraphData() + + // 每 10 秒自动获取一次图谱数据 graphPollTimer = setInterval(async () => { await fetchGraphData() - }, 3000) + }, 10000) +} + +// 手动刷新图谱 +const refreshGraph = async () => { + graphLoading.value = true + await fetchGraphData() + graphLoading.value = false } // 停止图谱数据轮询 @@ -613,10 +629,18 @@ const pollTaskStatus = async (taskId) => { console.log('Task status:', task.status, 'Progress:', task.progress) if (task.status === 'completed') { + console.log('✅ 图谱构建完成,正在加载完整数据...') + stopPolling() stopGraphPolling() currentPhase.value = 2 + // 更新进度显示为完成状态 + buildProgress.value = { + progress: 100, + message: '构建完成,正在加载图谱...' + } + // 重新加载项目数据获取 graph_id const projectResponse = await getProject(currentProjectId.value) if (projectResponse.success) { @@ -624,9 +648,14 @@ const pollTaskStatus = async (taskId) => { // 最终加载完整图谱数据 if (projectResponse.data.graph_id) { + console.log('📊 加载完整图谱:', projectResponse.data.graph_id) await loadGraph(projectResponse.data.graph_id) + console.log('✅ 图谱加载完成') } } + + // 清除进度显示 + buildProgress.value = null } else if (task.status === 'failed') { stopPolling() stopGraphPolling() @@ -992,6 +1021,42 @@ onUnmounted(() => { color: #ddd; } +.refresh-btn { + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + background: #F5F5F5; + border: 1px solid #E0E0E0; + cursor: pointer; + transition: all 0.2s; +} + +.refresh-btn:hover:not(:disabled) { + background: #FF6B35; + border-color: #FF6B35; + color: #fff; +} + +.refresh-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.refresh-icon { + font-size: 1rem; + line-height: 1; +} + +.refresh-icon.spinning { + animation: spin 1s linear infinite; +} + +@keyframes spin { + to { transform: rotate(360deg); } +} + /* 图谱容器 */ .graph-container { flex: 1;