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 { createRouter, createWebHistory } from 'vue-router'
|
||||||
import Home from '../views/Home.vue'
|
import Home from '../views/Home.vue'
|
||||||
import Process from '../views/Process.vue'
|
import Process from '../views/MainView.vue'
|
||||||
|
|
||||||
const routes = [
|
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