Add GraphPanel and WorkbenchPanel components for enhanced visualization and interaction
- Introduced GraphPanel.vue for dynamic graph visualization, featuring real-time updates, node and edge detail panels, and loading states. - Added WorkbenchPanel.vue to manage ontology generation and graph building processes, including progress tracking and system logs. - Updated MainView.vue to integrate both panels, allowing users to switch between graph and workbench views seamlessly. - Enhanced styling across components for improved user experience and visual consistency.
This commit is contained in:
666ghj
parent
a661046779
commit
35da38e1c9
4 changed files with 1583 additions and 1 deletions
460
frontend/src/components/GraphPanel.vue
Normal file
460
frontend/src/components/GraphPanel.vue
Normal file
|
|
@ -0,0 +1,460 @@
|
|||
<template>
|
||||
<div class="graph-panel">
|
||||
<div class="panel-header">
|
||||
<!-- 顶部工具栏 (Internal Top Right) -->
|
||||
<div class="header-tools">
|
||||
<button class="tool-btn" @click="$emit('refresh')" :disabled="loading" title="刷新图谱">
|
||||
<span class="icon-refresh" :class="{ 'spinning': loading }">↻</span>
|
||||
</button>
|
||||
<button class="tool-btn" @click="$emit('toggle-maximize')" title="最大化/还原">
|
||||
<span class="icon-maximize">⤢</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="graph-container" ref="graphContainer">
|
||||
<!-- 图谱可视化 -->
|
||||
<div v-if="graphData" class="graph-view">
|
||||
<svg ref="graphSvg" class="graph-svg"></svg>
|
||||
|
||||
<!-- 构建中提示 -->
|
||||
<div v-if="currentPhase === 1" class="graph-building-hint">
|
||||
<span class="building-dot"></span>
|
||||
实时更新中...
|
||||
</div>
|
||||
|
||||
<!-- 节点/边详情面板 -->
|
||||
<div v-if="selectedItem" class="detail-panel">
|
||||
<div class="detail-panel-header">
|
||||
<span class="detail-title">{{ selectedItem.type === 'node' ? 'Node Details' : 'Relationship' }}</span>
|
||||
<button class="detail-close" @click="closeDetailPanel">×</button>
|
||||
</div>
|
||||
|
||||
<!-- 节点详情 -->
|
||||
<div v-if="selectedItem.type === 'node'" class="detail-content">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Name</span>
|
||||
<span class="detail-value highlight">{{ selectedItem.data.name }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Type</span>
|
||||
<span class="detail-badge" :style="{ background: selectedItem.color }">
|
||||
{{ selectedItem.entityType }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- Properties -->
|
||||
<div class="detail-section" v-if="selectedItem.data.attributes && Object.keys(selectedItem.data.attributes).length > 0">
|
||||
<span class="detail-label">Properties</span>
|
||||
<div class="properties-list">
|
||||
<div v-for="(value, key) in selectedItem.data.attributes" :key="key" class="property-item">
|
||||
<span class="property-key">{{ key }}:</span>
|
||||
<span class="property-value">{{ value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 边详情 -->
|
||||
<div v-else class="detail-content">
|
||||
<div class="edge-relation">
|
||||
<span class="edge-source">{{ selectedItem.data.source_name }}</span>
|
||||
<span class="edge-arrow">→</span>
|
||||
<span class="edge-type">{{ selectedItem.data.name || 'RELATED_TO' }}</span>
|
||||
<span class="edge-arrow">→</span>
|
||||
<span class="edge-target">{{ selectedItem.data.target_name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div v-else-if="loading" class="graph-state">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>图谱数据加载中...</p>
|
||||
</div>
|
||||
|
||||
<!-- 等待/空状态 -->
|
||||
<div v-else class="graph-state">
|
||||
<div class="empty-icon">❖</div>
|
||||
<p class="empty-text">等待本体生成...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部图例 (Bottom Left) -->
|
||||
<div v-if="graphData && entityTypes.length" class="graph-legend">
|
||||
<div class="legend-item" v-for="type in entityTypes" :key="type.name">
|
||||
<span class="legend-dot" :style="{ background: type.color }"></span>
|
||||
<span class="legend-label">{{ type.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch, nextTick, computed } from 'vue'
|
||||
import * as d3 from 'd3'
|
||||
|
||||
const props = defineProps({
|
||||
graphData: Object,
|
||||
loading: Boolean,
|
||||
currentPhase: Number
|
||||
})
|
||||
|
||||
const emit = defineEmits(['refresh', 'toggle-maximize'])
|
||||
|
||||
const graphContainer = ref(null)
|
||||
const graphSvg = ref(null)
|
||||
const selectedItem = ref(null)
|
||||
|
||||
// 计算实体类型用于图例
|
||||
const entityTypes = computed(() => {
|
||||
if (!props.graphData?.nodes) return []
|
||||
const typeMap = {}
|
||||
const colors = ['#FF6B35', '#004E89', '#7B2D8E', '#1A936F', '#C5283D', '#E9724C']
|
||||
|
||||
props.graphData.nodes.forEach(node => {
|
||||
const type = node.labels?.find(l => l !== 'Entity') || 'Entity'
|
||||
if (!typeMap[type]) {
|
||||
typeMap[type] = { name: type, count: 0, color: colors[Object.keys(typeMap).length % colors.length] }
|
||||
}
|
||||
typeMap[type].count++
|
||||
})
|
||||
return Object.values(typeMap)
|
||||
})
|
||||
|
||||
const closeDetailPanel = () => {
|
||||
selectedItem.value = null
|
||||
}
|
||||
|
||||
const renderGraph = () => {
|
||||
if (!graphSvg.value || !props.graphData) return
|
||||
|
||||
const container = graphContainer.value
|
||||
const width = container.clientWidth
|
||||
const height = container.clientHeight
|
||||
|
||||
const svg = d3.select(graphSvg.value)
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.attr('viewBox', `0 0 ${width} ${height}`)
|
||||
|
||||
svg.selectAll('*').remove()
|
||||
|
||||
const nodesData = props.graphData.nodes || []
|
||||
const edgesData = props.graphData.edges || []
|
||||
|
||||
if (nodesData.length === 0) return
|
||||
|
||||
// Prep data
|
||||
const nodeMap = {}
|
||||
nodesData.forEach(n => nodeMap[n.uuid] = n)
|
||||
|
||||
const nodes = nodesData.map(n => ({
|
||||
id: n.uuid,
|
||||
name: n.name || 'Unnamed',
|
||||
type: n.labels?.find(l => l !== 'Entity') || 'Entity',
|
||||
rawData: n
|
||||
}))
|
||||
|
||||
const nodeIds = new Set(nodes.map(n => n.id))
|
||||
const edges = edgesData
|
||||
.filter(e => nodeIds.has(e.source_node_uuid) && nodeIds.has(e.target_node_uuid))
|
||||
.map(e => ({
|
||||
source: e.source_node_uuid,
|
||||
target: e.target_node_uuid,
|
||||
type: e.fact_type || e.name || 'RELATED',
|
||||
rawData: {
|
||||
...e,
|
||||
source_name: nodeMap[e.source_node_uuid]?.name,
|
||||
target_name: nodeMap[e.target_node_uuid]?.name
|
||||
}
|
||||
}))
|
||||
|
||||
// Color scale
|
||||
const colorMap = {}
|
||||
entityTypes.value.forEach(t => colorMap[t.name] = t.color)
|
||||
const getColor = (type) => colorMap[type] || '#999'
|
||||
|
||||
// Simulation
|
||||
const simulation = d3.forceSimulation(nodes)
|
||||
.force('link', d3.forceLink(edges).id(d => d.id).distance(100))
|
||||
.force('charge', d3.forceManyBody().strength(-200))
|
||||
.force('center', d3.forceCenter(width / 2, height / 2))
|
||||
.force('collide', d3.forceCollide(30))
|
||||
|
||||
const g = svg.append('g')
|
||||
|
||||
// Zoom
|
||||
svg.call(d3.zoom().extent([[0, 0], [width, height]]).scaleExtent([0.1, 4]).on('zoom', (event) => {
|
||||
g.attr('transform', event.transform)
|
||||
}))
|
||||
|
||||
// Links
|
||||
const link = g.append('g').selectAll('line')
|
||||
.data(edges)
|
||||
.enter().append('line')
|
||||
.attr('stroke', '#E0E0E0')
|
||||
.attr('stroke-width', 1.5)
|
||||
|
||||
// Nodes
|
||||
const node = g.append('g').selectAll('circle')
|
||||
.data(nodes)
|
||||
.enter().append('circle')
|
||||
.attr('r', 8)
|
||||
.attr('fill', d => getColor(d.type))
|
||||
.attr('stroke', '#fff')
|
||||
.attr('stroke-width', 2)
|
||||
.style('cursor', 'pointer')
|
||||
.call(d3.drag()
|
||||
.on('start', (event, d) => {
|
||||
if (!event.active) simulation.alphaTarget(0.3).restart()
|
||||
d.fx = d.x
|
||||
d.fy = d.y
|
||||
})
|
||||
.on('drag', (event, d) => {
|
||||
d.fx = event.x
|
||||
d.fy = event.y
|
||||
})
|
||||
.on('end', (event, d) => {
|
||||
if (!event.active) simulation.alphaTarget(0)
|
||||
d.fx = null
|
||||
d.fy = null
|
||||
})
|
||||
)
|
||||
.on('click', (event, d) => {
|
||||
event.stopPropagation()
|
||||
selectedItem.value = {
|
||||
type: 'node',
|
||||
data: d.rawData,
|
||||
entityType: d.type,
|
||||
color: getColor(d.type)
|
||||
}
|
||||
})
|
||||
|
||||
// Labels
|
||||
const labels = g.append('g').selectAll('text')
|
||||
.data(nodes)
|
||||
.enter().append('text')
|
||||
.text(d => d.name.substring(0, 10))
|
||||
.attr('font-size', '10px')
|
||||
.attr('fill', '#666')
|
||||
.attr('dx', 12)
|
||||
.attr('dy', 4)
|
||||
|
||||
simulation.on('tick', () => {
|
||||
link
|
||||
.attr('x1', d => d.source.x)
|
||||
.attr('y1', d => d.source.y)
|
||||
.attr('x2', d => d.target.x)
|
||||
.attr('y2', d => d.target.y)
|
||||
|
||||
node
|
||||
.attr('cx', d => d.x)
|
||||
.attr('cy', d => d.y)
|
||||
|
||||
labels
|
||||
.attr('x', d => d.x)
|
||||
.attr('y', d => d.y)
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => props.graphData, () => {
|
||||
nextTick(renderGraph)
|
||||
}, { deep: true })
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', renderGraph)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.graph-panel {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FAFAFA;
|
||||
background-image: radial-gradient(#D0D0D0 1.5px, transparent 1.5px);
|
||||
background-size: 24px 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 16px;
|
||||
z-index: 10;
|
||||
pointer-events: none; /* Let clicks pass through to graph */
|
||||
}
|
||||
|
||||
.header-tools {
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tool-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid #E0E0E0;
|
||||
background: #FFF;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
|
||||
}
|
||||
|
||||
.tool-btn:hover {
|
||||
background: #F5F5F5;
|
||||
color: #000;
|
||||
border-color: #CCC;
|
||||
}
|
||||
|
||||
.icon-refresh.spinning {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
||||
|
||||
.graph-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.graph-view, .graph-svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.graph-state {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.graph-legend {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 24px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
background: rgba(255,255,255,0.9);
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #EAEAEA;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Detail Panel */
|
||||
.detail-panel {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
width: 280px;
|
||||
background: #FFF;
|
||||
border: 1px solid #EAEAEA;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
overflow: hidden;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.detail-panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 14px;
|
||||
background: #FAFAFA;
|
||||
border-bottom: 1px solid #EEE;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.detail-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
color: #999;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.detail-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 6px;
|
||||
color: #FFF;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.properties-list {
|
||||
margin-top: 8px;
|
||||
border-top: 1px dashed #EEE;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.property-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.property-key {
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
657
frontend/src/components/WorkbenchPanel.vue
Normal file
657
frontend/src/components/WorkbenchPanel.vue
Normal file
|
|
@ -0,0 +1,657 @@
|
|||
<template>
|
||||
<div class="workbench-panel">
|
||||
<div class="scroll-container">
|
||||
<!-- Step 01: Ontology -->
|
||||
<div class="step-card" :class="{ 'active': currentPhase === 0, 'completed': currentPhase > 0 }">
|
||||
<div class="card-header">
|
||||
<div class="step-info">
|
||||
<span class="step-num">01</span>
|
||||
<span class="step-title">本体生成</span>
|
||||
</div>
|
||||
<div class="step-status">
|
||||
<span v-if="currentPhase > 0" class="badge success">已完成</span>
|
||||
<span v-else-if="currentPhase === 0" class="badge processing">生成中</span>
|
||||
<span v-else class="badge pending">等待</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<p class="api-note">POST /api/graph/ontology/generate</p>
|
||||
<p class="description">
|
||||
上传文档后，LLM分析文档内容，自动生成适合舆论模拟的本体结构（实体类型 + 关系类型）。
|
||||
</p>
|
||||
|
||||
<!-- Loading / Progress -->
|
||||
<div v-if="currentPhase === 0 && ontologyProgress" class="progress-section">
|
||||
<div class="spinner-sm"></div>
|
||||
<span>{{ ontologyProgress.message || '正在分析文档...' }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Detail Overlay -->
|
||||
<div v-if="selectedOntologyItem" class="ontology-detail-overlay">
|
||||
<div class="detail-header">
|
||||
<div class="detail-title-group">
|
||||
<span class="detail-type-badge">{{ selectedOntologyItem.itemType === 'entity' ? 'ENTITY' : 'RELATION' }}</span>
|
||||
<span class="detail-name">{{ selectedOntologyItem.name }}</span>
|
||||
</div>
|
||||
<button class="close-btn" @click="selectedOntologyItem = null">×</button>
|
||||
</div>
|
||||
<div class="detail-body">
|
||||
<div class="detail-desc">{{ selectedOntologyItem.description }}</div>
|
||||
|
||||
<!-- Attributes -->
|
||||
<div class="detail-section" v-if="selectedOntologyItem.attributes?.length">
|
||||
<span class="section-label">ATTRIBUTES</span>
|
||||
<div class="attr-list">
|
||||
<div v-for="attr in selectedOntologyItem.attributes" :key="attr.name" class="attr-item">
|
||||
<span class="attr-name">{{ attr.name }}</span>
|
||||
<span class="attr-type">({{ attr.type }})</span>
|
||||
<span class="attr-desc">{{ attr.description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Examples (Entity) -->
|
||||
<div class="detail-section" v-if="selectedOntologyItem.examples?.length">
|
||||
<span class="section-label">EXAMPLES</span>
|
||||
<div class="example-list">
|
||||
<span v-for="ex in selectedOntologyItem.examples" :key="ex" class="example-tag">{{ ex }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Source/Target (Relation) -->
|
||||
<div class="detail-section" v-if="selectedOntologyItem.source_targets?.length">
|
||||
<span class="section-label">CONNECTIONS</span>
|
||||
<div class="conn-list">
|
||||
<div v-for="(conn, idx) in selectedOntologyItem.source_targets" :key="idx" class="conn-item">
|
||||
<span class="conn-node">{{ conn.source }}</span>
|
||||
<span class="conn-arrow">→</span>
|
||||
<span class="conn-node">{{ conn.target }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Generated Entity Tags -->
|
||||
<div v-if="projectData?.ontology?.entity_types" class="tags-container" :class="{ 'dimmed': selectedOntologyItem }">
|
||||
<span class="tag-label">GENERATED ENTITY TYPES</span>
|
||||
<div class="tags-list">
|
||||
<span
|
||||
v-for="entity in projectData.ontology.entity_types"
|
||||
:key="entity.name"
|
||||
class="entity-tag clickable"
|
||||
@click="selectOntologyItem(entity, 'entity')"
|
||||
>
|
||||
{{ entity.name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Generated Relation Tags -->
|
||||
<div v-if="projectData?.ontology?.edge_types" class="tags-container" :class="{ 'dimmed': selectedOntologyItem }">
|
||||
<span class="tag-label">GENERATED RELATION TYPES</span>
|
||||
<div class="tags-list">
|
||||
<span
|
||||
v-for="rel in projectData.ontology.edge_types"
|
||||
:key="rel.name"
|
||||
class="entity-tag clickable"
|
||||
@click="selectOntologyItem(rel, 'relation')"
|
||||
>
|
||||
{{ rel.name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 02: Graph Build -->
|
||||
<div class="step-card" :class="{ 'active': currentPhase === 1, 'completed': currentPhase > 1 }">
|
||||
<div class="card-header">
|
||||
<div class="step-info">
|
||||
<span class="step-num">02</span>
|
||||
<span class="step-title">图谱构建</span>
|
||||
</div>
|
||||
<div class="step-status">
|
||||
<span v-if="currentPhase > 1" class="badge success">已完成</span>
|
||||
<span v-else-if="currentPhase === 1" class="badge processing">{{ buildProgress?.progress || 0 }}%</span>
|
||||
<span v-else class="badge pending">等待</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<p class="api-note">POST /api/graph/build</p>
|
||||
<p class="description">
|
||||
基于生成的本体，将文档分块后调用 Zep API 构建知识图谱，提取实体和关系。
|
||||
</p>
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<span class="stat-value">{{ graphStats.nodes }}</span>
|
||||
<span class="stat-label">实体节点</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-value">{{ graphStats.edges }}</span>
|
||||
<span class="stat-label">关系边</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-value">{{ graphStats.types }}</span>
|
||||
<span class="stat-label">SCHEMA类型</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 03: Complete -->
|
||||
<div class="step-card" :class="{ 'active': currentPhase === 2, 'completed': currentPhase >= 2 }">
|
||||
<div class="card-header">
|
||||
<div class="step-info">
|
||||
<span class="step-num">03</span>
|
||||
<span class="step-title">构建完成</span>
|
||||
</div>
|
||||
<div class="step-status">
|
||||
<span v-if="currentPhase >= 2" class="badge accent">进行中</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<p class="description">图谱构建已完成，请进入下一步进行环境参数配置。</p>
|
||||
<button
|
||||
class="action-btn"
|
||||
:disabled="currentPhase < 2"
|
||||
@click="$emit('next-step')"
|
||||
>
|
||||
进入环境搭建 ➝
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Info / Logs -->
|
||||
<div class="system-logs">
|
||||
<div class="log-header">
|
||||
<span class="log-title">SYSTEM DASHBOARD</span>
|
||||
<span class="log-id">{{ projectData?.project_id || 'NO_PROJECT' }}</span>
|
||||
</div>
|
||||
<div class="log-content" ref="logContent">
|
||||
<div class="log-line" v-for="(log, idx) in systemLogs" :key="idx">
|
||||
<span class="log-time">{{ log.time }}</span>
|
||||
<span class="log-msg">{{ log.msg }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch, nextTick } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
currentPhase: { type: Number, default: 0 },
|
||||
projectData: Object,
|
||||
ontologyProgress: Object,
|
||||
buildProgress: Object,
|
||||
graphData: Object,
|
||||
systemLogs: { type: Array, default: () => [] }
|
||||
})
|
||||
|
||||
defineEmits(['next-step'])
|
||||
|
||||
const selectedOntologyItem = ref(null)
|
||||
const logContent = ref(null)
|
||||
|
||||
const selectOntologyItem = (item, type) => {
|
||||
selectedOntologyItem.value = { ...item, itemType: type }
|
||||
}
|
||||
|
||||
const graphStats = computed(() => {
|
||||
const nodes = props.graphData?.node_count || props.graphData?.nodes?.length || 0
|
||||
const edges = props.graphData?.edge_count || props.graphData?.edges?.length || 0
|
||||
const types = props.projectData?.ontology?.entity_types?.length || 0
|
||||
return { nodes, edges, types }
|
||||
})
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return '--:--:--'
|
||||
const d = new Date(dateStr)
|
||||
return d.toLocaleTimeString('en-US', { hour12: false }) + '.' + d.getMilliseconds()
|
||||
}
|
||||
|
||||
// Auto-scroll logs
|
||||
watch(() => props.systemLogs.length, () => {
|
||||
nextTick(() => {
|
||||
if (logContent.value) {
|
||||
logContent.value.scrollTop = logContent.value.scrollHeight
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.workbench-panel {
|
||||
height: 100%;
|
||||
background-color: #FAFAFA;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.step-card {
|
||||
background: #FFF;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
border: 1px solid #EAEAEA;
|
||||
transition: all 0.3s ease;
|
||||
position: relative; /* For absolute overlay */
|
||||
}
|
||||
|
||||
.step-card.active {
|
||||
border-color: #FF5722;
|
||||
box-shadow: 0 4px 12px rgba(255, 87, 34, 0.08);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.step-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.step-num {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #E0E0E0;
|
||||
}
|
||||
|
||||
.step-card.active .step-num,
|
||||
.step-card.completed .step-num {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 10px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.badge.success { background: #E8F5E9; color: #2E7D32; }
|
||||
.badge.processing { background: #FFF3E0; color: #EF6C00; }
|
||||
.badge.accent { background: #FF5722; color: #FFF; }
|
||||
.badge.pending { background: #F5F5F5; color: #999; }
|
||||
|
||||
.api-note {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* Step 01 Tags */
|
||||
.tags-container {
|
||||
margin-top: 12px;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.tags-container.dimmed {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tag-label {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
color: #AAA;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tags-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.entity-tag {
|
||||
background: #F5F5F5;
|
||||
border: 1px solid #EEE;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
color: #333;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.entity-tag.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.entity-tag.clickable:hover {
|
||||
background: #E0E0E0;
|
||||
border-color: #CCC;
|
||||
}
|
||||
|
||||
/* Ontology Detail Overlay */
|
||||
.ontology-detail-overlay {
|
||||
position: absolute;
|
||||
top: 60px; /* Below header roughly */
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 10;
|
||||
border: 1px solid #EAEAEA;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #EAEAEA;
|
||||
background: #FAFAFA;
|
||||
}
|
||||
|
||||
.detail-title-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.detail-type-badge {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
color: #FFF;
|
||||
background: #000;
|
||||
padding: 2px 6px;
|
||||
border-radius: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.detail-name {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.detail-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.detail-desc {
|
||||
font-size: 12px;
|
||||
color: #444;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px dashed #EAEAEA;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #AAA;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.attr-list, .conn-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.attr-item {
|
||||
font-size: 11px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
align-items: baseline;
|
||||
padding: 4px;
|
||||
background: #F9F9F9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.attr-name {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.attr-type {
|
||||
color: #999;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.attr-desc {
|
||||
color: #555;
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.example-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.example-tag {
|
||||
font-size: 11px;
|
||||
background: #FFF;
|
||||
border: 1px solid #E0E0E0;
|
||||
padding: 3px 8px;
|
||||
border-radius: 12px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.conn-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
padding: 6px;
|
||||
background: #F5F5F5;
|
||||
border-radius: 4px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.conn-node {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.conn-arrow {
|
||||
color: #BBB;
|
||||
}
|
||||
|
||||
/* Step 02 Stats */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 12px;
|
||||
background: #F9F9F9;
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 9px;
|
||||
color: #999;
|
||||
text-transform: uppercase;
|
||||
margin-top: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Step 03 Button */
|
||||
.action-btn {
|
||||
width: 100%;
|
||||
background: #000;
|
||||
color: #FFF;
|
||||
border: none;
|
||||
padding: 14px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover:not(:disabled) {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.action-btn:disabled {
|
||||
background: #CCC;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.progress-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 12px;
|
||||
color: #FF5722;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.spinner-sm {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid #FFCCBC;
|
||||
border-top-color: #FF5722;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* System Logs */
|
||||
.system-logs {
|
||||
background: #000;
|
||||
color: #DDD;
|
||||
padding: 16px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
border-top: 1px solid #222;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.log-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #333;
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.log-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
height: 80px; /* Approx 4 lines visible */
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb {
|
||||
background: #333;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.log-line {
|
||||
font-size: 11px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.log-time {
|
||||
color: #666;
|
||||
min-width: 75px;
|
||||
}
|
||||
|
||||
.log-msg {
|
||||
color: #CCC;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import Home from '../views/Home.vue'
|
||||
import Process from '../views/Process.vue'
|
||||
import Process from '../views/MainView.vue'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
|
|
|
|||
465
frontend/src/views/MainView.vue
Normal file
465
frontend/src/views/MainView.vue
Normal file
|
|
@ -0,0 +1,465 @@
|
|||
<template>
|
||||
<div class="main-view">
|
||||
<!-- Header -->
|
||||
<header class="app-header">
|
||||
<div class="header-left">
|
||||
<div class="brand" @click="router.push('/')">MIROFISH</div>
|
||||
</div>
|
||||
|
||||
<div class="header-center">
|
||||
<div class="view-switcher">
|
||||
<button
|
||||
v-for="mode in ['graph', 'split', 'workbench']"
|
||||
:key="mode"
|
||||
class="switch-btn"
|
||||
:class="{ active: viewMode === mode }"
|
||||
@click="viewMode = mode"
|
||||
>
|
||||
{{ mode.toUpperCase() }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<!-- Optional user info or status -->
|
||||
<span class="status-indicator" :class="statusClass">
|
||||
<span class="dot"></span>
|
||||
{{ statusText }}
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main class="content-area">
|
||||
<!-- Left Panel: Graph -->
|
||||
<div class="panel-wrapper left" :style="leftPanelStyle">
|
||||
<GraphPanel
|
||||
:graphData="graphData"
|
||||
:loading="graphLoading"
|
||||
:currentPhase="currentPhase"
|
||||
@refresh="refreshGraph"
|
||||
@toggle-maximize="toggleMaximize('graph')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Right Panel: Workbench -->
|
||||
<div class="panel-wrapper right" :style="rightPanelStyle">
|
||||
<WorkbenchPanel
|
||||
:currentPhase="currentPhase"
|
||||
:projectData="projectData"
|
||||
:ontologyProgress="ontologyProgress"
|
||||
:buildProgress="buildProgress"
|
||||
:graphData="graphData"
|
||||
:systemLogs="systemLogs"
|
||||
@next-step="handleNextStep"
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import GraphPanel from '../components/GraphPanel.vue'
|
||||
import WorkbenchPanel from '../components/WorkbenchPanel.vue'
|
||||
import { generateOntology, getProject, buildGraph, getTaskStatus, getGraphData } from '../api/graph'
|
||||
import { getPendingUpload, clearPendingUpload } from '../store/pendingUpload'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
// Layout State
|
||||
const viewMode = ref('split') // graph | split | workbench
|
||||
|
||||
// Data State
|
||||
const currentProjectId = ref(route.params.projectId)
|
||||
const loading = ref(false)
|
||||
const graphLoading = ref(false)
|
||||
const error = ref('')
|
||||
const projectData = ref(null)
|
||||
const graphData = ref(null)
|
||||
const currentPhase = ref(-1) // -1: Upload, 0: Ontology, 1: Build, 2: Complete
|
||||
const ontologyProgress = ref(null)
|
||||
const buildProgress = ref(null)
|
||||
const systemLogs = ref([])
|
||||
|
||||
// Polling timers
|
||||
let pollTimer = null
|
||||
let graphPollTimer = null
|
||||
|
||||
// --- Computed Layout Styles ---
|
||||
const leftPanelStyle = computed(() => {
|
||||
if (viewMode.value === 'graph') return { width: '100%', opacity: 1, transform: 'translateX(0)' }
|
||||
if (viewMode.value === 'workbench') return { width: '0%', opacity: 0, transform: 'translateX(-20px)' }
|
||||
return { width: '50%', opacity: 1, transform: 'translateX(0)' }
|
||||
})
|
||||
|
||||
const rightPanelStyle = computed(() => {
|
||||
if (viewMode.value === 'workbench') return { width: '100%', opacity: 1, transform: 'translateX(0)' }
|
||||
if (viewMode.value === 'graph') return { width: '0%', opacity: 0, transform: 'translateX(20px)' }
|
||||
return { width: '50%', opacity: 1, transform: 'translateX(0)' }
|
||||
})
|
||||
|
||||
// --- Status Computed ---
|
||||
const statusClass = computed(() => {
|
||||
if (error.value) return 'error'
|
||||
if (currentPhase.value >= 2) return 'completed'
|
||||
return 'processing'
|
||||
})
|
||||
|
||||
const statusText = computed(() => {
|
||||
if (error.value) return 'Error'
|
||||
if (currentPhase.value >= 2) return 'Ready'
|
||||
if (currentPhase.value === 1) return 'Building Graph'
|
||||
if (currentPhase.value === 0) return 'Generating Ontology'
|
||||
return 'Initializing'
|
||||
})
|
||||
|
||||
// --- Helpers ---
|
||||
const addLog = (msg) => {
|
||||
const time = new Date().toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' }) + '.' + new Date().getMilliseconds().toString().padStart(3, '0')
|
||||
systemLogs.value.push({ time, msg })
|
||||
// Keep last 100 logs
|
||||
if (systemLogs.value.length > 100) {
|
||||
systemLogs.value.shift()
|
||||
}
|
||||
}
|
||||
|
||||
// --- Layout Methods ---
|
||||
const toggleMaximize = (target) => {
|
||||
if (viewMode.value === target) {
|
||||
viewMode.value = 'split'
|
||||
} else {
|
||||
viewMode.value = target
|
||||
}
|
||||
}
|
||||
|
||||
const handleNextStep = () => {
|
||||
alert('Environment Setup coming soon...')
|
||||
}
|
||||
|
||||
// --- Data Logic ---
|
||||
|
||||
const initProject = async () => {
|
||||
addLog('Project view initialized.')
|
||||
if (currentProjectId.value === 'new') {
|
||||
await handleNewProject()
|
||||
} else {
|
||||
await loadProject()
|
||||
}
|
||||
}
|
||||
|
||||
const handleNewProject = async () => {
|
||||
const pending = getPendingUpload()
|
||||
if (!pending.isPending || pending.files.length === 0) {
|
||||
error.value = 'No pending files found.'
|
||||
addLog('Error: No pending files found for new project.')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
currentPhase.value = 0
|
||||
ontologyProgress.value = { message: 'Uploading and analyzing docs...' }
|
||||
addLog('Starting ontology generation: Uploading files...')
|
||||
|
||||
const formData = new FormData()
|
||||
pending.files.forEach(f => formData.append('files', f))
|
||||
formData.append('simulation_requirement', pending.simulationRequirement)
|
||||
|
||||
const res = await generateOntology(formData)
|
||||
if (res.success) {
|
||||
clearPendingUpload()
|
||||
currentProjectId.value = res.data.project_id
|
||||
projectData.value = res.data
|
||||
|
||||
router.replace({ name: 'Process', params: { projectId: res.data.project_id } })
|
||||
ontologyProgress.value = null
|
||||
addLog(`Ontology generated successfully for project ${res.data.project_id}`)
|
||||
await startBuildGraph()
|
||||
} else {
|
||||
error.value = res.error || 'Ontology generation failed'
|
||||
addLog(`Error generating ontology: ${error.value}`)
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = err.message
|
||||
addLog(`Exception in handleNewProject: ${err.message}`)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadProject = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
addLog(`Loading project ${currentProjectId.value}...`)
|
||||
const res = await getProject(currentProjectId.value)
|
||||
if (res.success) {
|
||||
projectData.value = res.data
|
||||
updatePhaseByStatus(res.data.status)
|
||||
addLog(`Project loaded. Status: ${res.data.status}`)
|
||||
|
||||
if (res.data.status === 'ontology_generated' && !res.data.graph_id) {
|
||||
await startBuildGraph()
|
||||
} else if (res.data.status === 'graph_building' && res.data.graph_build_task_id) {
|
||||
currentPhase.value = 1
|
||||
startPollingTask(res.data.graph_build_task_id)
|
||||
startGraphPolling()
|
||||
} else if (res.data.status === 'graph_completed' && res.data.graph_id) {
|
||||
currentPhase.value = 2
|
||||
await loadGraph(res.data.graph_id)
|
||||
}
|
||||
} else {
|
||||
error.value = res.error
|
||||
addLog(`Error loading project: ${res.error}`)
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = err.message
|
||||
addLog(`Exception in loadProject: ${err.message}`)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const updatePhaseByStatus = (status) => {
|
||||
switch (status) {
|
||||
case 'created':
|
||||
case 'ontology_generated': currentPhase.value = 0; break;
|
||||
case 'graph_building': currentPhase.value = 1; break;
|
||||
case 'graph_completed': currentPhase.value = 2; break;
|
||||
case 'failed': error.value = 'Project failed'; break;
|
||||
}
|
||||
}
|
||||
|
||||
const startBuildGraph = async () => {
|
||||
try {
|
||||
currentPhase.value = 1
|
||||
buildProgress.value = { progress: 0, message: 'Starting build...' }
|
||||
addLog('Initiating graph build...')
|
||||
|
||||
const res = await buildGraph({ project_id: currentProjectId.value })
|
||||
if (res.success) {
|
||||
addLog(`Graph build task started. Task ID: ${res.data.task_id}`)
|
||||
startGraphPolling()
|
||||
startPollingTask(res.data.task_id)
|
||||
} else {
|
||||
error.value = res.error
|
||||
addLog(`Error starting build: ${res.error}`)
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = err.message
|
||||
addLog(`Exception in startBuildGraph: ${err.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
const startGraphPolling = () => {
|
||||
addLog('Started polling for graph data...')
|
||||
fetchGraphData()
|
||||
graphPollTimer = setInterval(fetchGraphData, 10000)
|
||||
}
|
||||
|
||||
const fetchGraphData = async () => {
|
||||
try {
|
||||
// Refresh project info to check for graph_id
|
||||
const projRes = await getProject(currentProjectId.value)
|
||||
if (projRes.success && projRes.data.graph_id) {
|
||||
const gRes = await getGraphData(projRes.data.graph_id)
|
||||
if (gRes.success) {
|
||||
graphData.value = gRes.data
|
||||
const nodeCount = gRes.data.node_count || gRes.data.nodes?.length || 0
|
||||
const edgeCount = gRes.data.edge_count || gRes.data.edges?.length || 0
|
||||
addLog(`Graph data refreshed. Nodes: ${nodeCount}, Edges: ${edgeCount}`)
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn('Graph fetch error:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const startPollingTask = (taskId) => {
|
||||
pollTaskStatus(taskId)
|
||||
pollTimer = setInterval(() => pollTaskStatus(taskId), 2000)
|
||||
}
|
||||
|
||||
const pollTaskStatus = async (taskId) => {
|
||||
try {
|
||||
const res = await getTaskStatus(taskId)
|
||||
if (res.success) {
|
||||
const task = res.data
|
||||
|
||||
// Log progress message if it changed
|
||||
if (task.message && task.message !== buildProgress.value?.message) {
|
||||
addLog(task.message)
|
||||
}
|
||||
|
||||
buildProgress.value = { progress: task.progress || 0, message: task.message }
|
||||
|
||||
if (task.status === 'completed') {
|
||||
addLog('Graph build task completed.')
|
||||
stopPolling()
|
||||
stopGraphPolling() // Stop polling, do final load
|
||||
currentPhase.value = 2
|
||||
|
||||
// Final load
|
||||
const projRes = await getProject(currentProjectId.value)
|
||||
if (projRes.success && projRes.data.graph_id) {
|
||||
projectData.value = projRes.data
|
||||
await loadGraph(projRes.data.graph_id)
|
||||
}
|
||||
} else if (task.status === 'failed') {
|
||||
stopPolling()
|
||||
error.value = task.error
|
||||
addLog(`Graph build task failed: ${task.error}`)
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
const loadGraph = async (graphId) => {
|
||||
graphLoading.value = true
|
||||
addLog(`Loading full graph data: ${graphId}`)
|
||||
try {
|
||||
const res = await getGraphData(graphId)
|
||||
if (res.success) {
|
||||
graphData.value = res.data
|
||||
addLog('Graph data loaded successfully.')
|
||||
} else {
|
||||
addLog(`Failed to load graph data: ${res.error}`)
|
||||
}
|
||||
} catch (e) {
|
||||
addLog(`Exception loading graph: ${e.message}`)
|
||||
} finally {
|
||||
graphLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const refreshGraph = () => {
|
||||
if (projectData.value?.graph_id) {
|
||||
addLog('Manual graph refresh triggered.')
|
||||
loadGraph(projectData.value.graph_id)
|
||||
}
|
||||
}
|
||||
|
||||
const stopPolling = () => {
|
||||
if (pollTimer) {
|
||||
clearInterval(pollTimer)
|
||||
pollTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
const stopGraphPolling = () => {
|
||||
if (graphPollTimer) {
|
||||
clearInterval(graphPollTimer)
|
||||
graphPollTimer = null
|
||||
addLog('Graph polling stopped.')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initProject()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
stopPolling()
|
||||
stopGraphPolling()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.main-view {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #FFF;
|
||||
overflow: hidden;
|
||||
font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.app-header {
|
||||
height: 60px;
|
||||
border-bottom: 1px solid #EAEAEA;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
background: #FFF;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-weight: 800;
|
||||
font-size: 18px;
|
||||
letter-spacing: 1px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.view-switcher {
|
||||
display: flex;
|
||||
background: #F5F5F5;
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.switch-btn {
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 6px 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.switch-btn.active {
|
||||
background: #FFF;
|
||||
color: #000;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #CCC;
|
||||
}
|
||||
|
||||
.status-indicator.processing .dot { background: #FF5722; animation: pulse 1s infinite; }
|
||||
.status-indicator.completed .dot { background: #4CAF50; }
|
||||
.status-indicator.error .dot { background: #F44336; }
|
||||
|
||||
@keyframes pulse { 50% { opacity: 0.5; } }
|
||||
|
||||
/* Content */
|
||||
.content-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-wrapper {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease, transform 0.3s ease;
|
||||
will-change: width, opacity, transform;
|
||||
}
|
||||
|
||||
.panel-wrapper.left {
|
||||
border-right: 1px solid #EAEAEA;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue