Add simulation API and environment setup components
- Introduced simulation.js API for creating and managing simulations, including methods for creating, preparing, and retrieving simulation statuses. - Added Step1GraphBuild.vue and Step2EnvSetup.vue components to facilitate the graph building and environment setup processes, enhancing user interaction and workflow. - Updated MainView.vue to integrate new components and manage the simulation workflow, including step indicators and navigation between steps. - Created SimulationView.vue for displaying simulation details and managing the simulation environment, improving overall user experience and functionality.
This commit is contained in:
666ghj
parent
860677b104
commit
fc95cc6595
6 changed files with 1564 additions and 9 deletions
100
frontend/src/api/simulation.js
Normal file
100
frontend/src/api/simulation.js
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
import service, { requestWithRetry } from './index'
|
||||
|
||||
/**
|
||||
* 创建模拟
|
||||
* @param {Object} data - { project_id, graph_id?, enable_twitter?, enable_reddit? }
|
||||
*/
|
||||
export const createSimulation = (data) => {
|
||||
return requestWithRetry(() => service.post('/api/simulation/create', data), 3, 1000)
|
||||
}
|
||||
|
||||
/**
|
||||
* 准备模拟环境（异步任务）
|
||||
* @param {Object} data - { simulation_id, entity_types?, use_llm_for_profiles?, parallel_profile_count?, force_regenerate? }
|
||||
*/
|
||||
export const prepareSimulation = (data) => {
|
||||
return requestWithRetry(() => service.post('/api/simulation/prepare', data), 3, 1000)
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询准备任务进度
|
||||
* @param {Object} data - { task_id?, simulation_id? }
|
||||
*/
|
||||
export const getPrepareStatus = (data) => {
|
||||
return service.post('/api/simulation/prepare/status', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取模拟状态
|
||||
* @param {string} simulationId
|
||||
*/
|
||||
export const getSimulation = (simulationId) => {
|
||||
return service.get(`/api/simulation/${simulationId}`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取模拟的 Agent Profiles
|
||||
* @param {string} simulationId
|
||||
* @param {string} platform - 'reddit' | 'twitter'
|
||||
*/
|
||||
export const getSimulationProfiles = (simulationId, platform = 'reddit') => {
|
||||
return service.get(`/api/simulation/${simulationId}/profiles`, { params: { platform } })
|
||||
}
|
||||
|
||||
/**
|
||||
* 实时获取生成中的 Agent Profiles
|
||||
* @param {string} simulationId
|
||||
* @param {string} platform - 'reddit' | 'twitter'
|
||||
*/
|
||||
export const getSimulationProfilesRealtime = (simulationId, platform = 'reddit') => {
|
||||
return service.get(`/api/simulation/${simulationId}/profiles/realtime`, { params: { platform } })
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取模拟配置
|
||||
* @param {string} simulationId
|
||||
*/
|
||||
export const getSimulationConfig = (simulationId) => {
|
||||
return service.get(`/api/simulation/${simulationId}/config`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 列出所有模拟
|
||||
* @param {string} projectId - 可选，按项目ID过滤
|
||||
*/
|
||||
export const listSimulations = (projectId) => {
|
||||
const params = projectId ? { project_id: projectId } : {}
|
||||
return service.get('/api/simulation/list', { params })
|
||||
}
|
||||
|
||||
/**
|
||||
* 启动模拟
|
||||
* @param {Object} data - { simulation_id, platform?, max_rounds?, enable_graph_memory_update? }
|
||||
*/
|
||||
export const startSimulation = (data) => {
|
||||
return requestWithRetry(() => service.post('/api/simulation/start', data), 3, 1000)
|
||||
}
|
||||
|
||||
/**
|
||||
* 停止模拟
|
||||
* @param {Object} data - { simulation_id }
|
||||
*/
|
||||
export const stopSimulation = (data) => {
|
||||
return service.post('/api/simulation/stop', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取模拟运行实时状态
|
||||
* @param {string} simulationId
|
||||
*/
|
||||
export const getRunStatus = (simulationId) => {
|
||||
return service.get(`/api/simulation/${simulationId}/run-status`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取模拟运行详细状态（包含最近动作）
|
||||
* @param {string} simulationId
|
||||
*/
|
||||
export const getRunStatusDetail = (simulationId) => {
|
||||
return service.get(`/api/simulation/${simulationId}/run-status/detail`)
|
||||
}
|
||||
|
|
@ -159,10 +159,11 @@
|
|||
<p class="description">图谱构建已完成，请进入下一步进行模拟环境搭建</p>
|
||||
<button
|
||||
class="action-btn"
|
||||
:disabled="currentPhase < 2"
|
||||
@click="$emit('next-step')"
|
||||
:disabled="currentPhase < 2 || creatingSimulation"
|
||||
@click="handleEnterEnvSetup"
|
||||
>
|
||||
进入环境搭建 ➝
|
||||
<span v-if="creatingSimulation" class="spinner-sm"></span>
|
||||
{{ creatingSimulation ? '创建中...' : '进入环境搭建 ➝' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -186,6 +187,10 @@
|
|||
|
||||
<script setup>
|
||||
import { computed, ref, watch, nextTick } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { createSimulation } from '../api/simulation'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const props = defineProps({
|
||||
currentPhase: { type: Number, default: 0 },
|
||||
|
|
@ -200,6 +205,42 @@ defineEmits(['next-step'])
|
|||
|
||||
const selectedOntologyItem = ref(null)
|
||||
const logContent = ref(null)
|
||||
const creatingSimulation = ref(false)
|
||||
|
||||
// 进入环境搭建 - 创建 simulation 并跳转
|
||||
const handleEnterEnvSetup = async () => {
|
||||
if (!props.projectData?.project_id || !props.projectData?.graph_id) {
|
||||
console.error('缺少项目或图谱信息')
|
||||
return
|
||||
}
|
||||
|
||||
creatingSimulation.value = true
|
||||
|
||||
try {
|
||||
const res = await createSimulation({
|
||||
project_id: props.projectData.project_id,
|
||||
graph_id: props.projectData.graph_id,
|
||||
enable_twitter: true,
|
||||
enable_reddit: true
|
||||
})
|
||||
|
||||
if (res.success && res.data?.simulation_id) {
|
||||
// 跳转到 simulation 页面
|
||||
router.push({
|
||||
name: 'Simulation',
|
||||
params: { simulationId: res.data.simulation_id }
|
||||
})
|
||||
} else {
|
||||
console.error('创建模拟失败:', res.error)
|
||||
alert('创建模拟失败: ' + (res.error || '未知错误'))
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('创建模拟异常:', err)
|
||||
alert('创建模拟异常: ' + err.message)
|
||||
} finally {
|
||||
creatingSimulation.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const selectOntologyItem = (item, type) => {
|
||||
selectedOntologyItem.value = { ...item, itemType: type }
|
||||
1042
frontend/src/components/Step2EnvSetup.vue
Normal file
1042
frontend/src/components/Step2EnvSetup.vue
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,6 +1,7 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import Home from '../views/Home.vue'
|
||||
import Process from '../views/MainView.vue'
|
||||
import SimulationView from '../views/SimulationView.vue'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
|
|
@ -13,6 +14,12 @@ const routes = [
|
|||
name: 'Process',
|
||||
component: Process,
|
||||
props: true
|
||||
},
|
||||
{
|
||||
path: '/simulation/:simulationId',
|
||||
name: 'Simulation',
|
||||
component: SimulationView,
|
||||
props: true
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@
|
|||
|
||||
<div class="header-right">
|
||||
<div class="workflow-step">
|
||||
<span class="step-num">Step 1/5</span>
|
||||
<span class="step-name">图谱构建</span>
|
||||
<span class="step-num">Step {{ currentStep }}/5</span>
|
||||
<span class="step-name">{{ stepNames[currentStep - 1] }}</span>
|
||||
</div>
|
||||
<div class="step-divider"></div>
|
||||
<span class="status-indicator" :class="statusClass">
|
||||
|
|
@ -46,9 +46,11 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<!-- Right Panel: Workbench -->
|
||||
<!-- Right Panel: Step Components -->
|
||||
<div class="panel-wrapper right" :style="rightPanelStyle">
|
||||
<WorkbenchPanel
|
||||
<!-- Step 1: 图谱构建 -->
|
||||
<Step1GraphBuild
|
||||
v-if="currentStep === 1"
|
||||
:currentPhase="currentPhase"
|
||||
:projectData="projectData"
|
||||
:ontologyProgress="ontologyProgress"
|
||||
|
|
@ -57,6 +59,16 @@
|
|||
:systemLogs="systemLogs"
|
||||
@next-step="handleNextStep"
|
||||
/>
|
||||
<!-- Step 2: 环境搭建 -->
|
||||
<Step2EnvSetup
|
||||
v-else-if="currentStep === 2"
|
||||
:projectData="projectData"
|
||||
:graphData="graphData"
|
||||
:systemLogs="systemLogs"
|
||||
@go-back="handleGoBack"
|
||||
@next-step="handleNextStep"
|
||||
@add-log="addLog"
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
|
@ -66,7 +78,8 @@
|
|||
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 Step1GraphBuild from '../components/Step1GraphBuild.vue'
|
||||
import Step2EnvSetup from '../components/Step2EnvSetup.vue'
|
||||
import { generateOntology, getProject, buildGraph, getTaskStatus, getGraphData } from '../api/graph'
|
||||
import { getPendingUpload, clearPendingUpload } from '../store/pendingUpload'
|
||||
|
||||
|
|
@ -76,6 +89,10 @@ const router = useRouter()
|
|||
// Layout State
|
||||
const viewMode = ref('split') // graph | split | workbench
|
||||
|
||||
// Step State
|
||||
const currentStep = ref(1) // 1: 图谱构建, 2: 环境搭建, 3: 开始模拟, 4: 报告生成, 5: 深度互动
|
||||
const stepNames = ['图谱构建', '环境搭建', '开始模拟', '报告生成', '深度互动']
|
||||
|
||||
// Data State
|
||||
const currentProjectId = ref(route.params.projectId)
|
||||
const loading = ref(false)
|
||||
|
|
@ -140,7 +157,17 @@ const toggleMaximize = (target) => {
|
|||
}
|
||||
|
||||
const handleNextStep = () => {
|
||||
alert('Environment Setup coming soon...')
|
||||
if (currentStep.value < 5) {
|
||||
currentStep.value++
|
||||
addLog(`进入 Step ${currentStep.value}: ${stepNames[currentStep.value - 1]}`)
|
||||
}
|
||||
}
|
||||
|
||||
const handleGoBack = () => {
|
||||
if (currentStep.value > 1) {
|
||||
currentStep.value--
|
||||
addLog(`返回 Step ${currentStep.value}: ${stepNames[currentStep.value - 1]}`)
|
||||
}
|
||||
}
|
||||
|
||||
// --- Data Logic ---
|
||||
|
|
|
|||
338
frontend/src/views/SimulationView.vue
Normal file
338
frontend/src/views/SimulationView.vue
Normal file
|
|
@ -0,0 +1,338 @@
|
|||
<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"
|
||||
>
|
||||
{{ { graph: '图谱', split: '双栏', workbench: '工作台' }[mode] }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<div class="workflow-step">
|
||||
<span class="step-num">Step 2/5</span>
|
||||
<span class="step-name">环境搭建</span>
|
||||
</div>
|
||||
<div class="step-divider"></div>
|
||||
<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="2"
|
||||
@refresh="refreshGraph"
|
||||
@toggle-maximize="toggleMaximize('graph')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Right Panel: Step2 环境搭建 -->
|
||||
<div class="panel-wrapper right" :style="rightPanelStyle">
|
||||
<Step2EnvSetup
|
||||
:simulationId="currentSimulationId"
|
||||
:projectData="projectData"
|
||||
:graphData="graphData"
|
||||
:systemLogs="systemLogs"
|
||||
@go-back="handleGoBack"
|
||||
@next-step="handleNextStep"
|
||||
@add-log="addLog"
|
||||
@update-status="updateStatus"
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import GraphPanel from '../components/GraphPanel.vue'
|
||||
import Step2EnvSetup from '../components/Step2EnvSetup.vue'
|
||||
import { getProject, getGraphData } from '../api/graph'
|
||||
import { getSimulation } from '../api/simulation'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
simulationId: String
|
||||
})
|
||||
|
||||
// Layout State
|
||||
const viewMode = ref('split')
|
||||
|
||||
// Data State
|
||||
const currentSimulationId = ref(route.params.simulationId)
|
||||
const projectData = ref(null)
|
||||
const graphData = ref(null)
|
||||
const graphLoading = ref(false)
|
||||
const systemLogs = ref([])
|
||||
const currentStatus = ref('processing') // processing | completed | error
|
||||
|
||||
// --- 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(() => {
|
||||
return currentStatus.value
|
||||
})
|
||||
|
||||
const statusText = computed(() => {
|
||||
if (currentStatus.value === 'error') return 'Error'
|
||||
if (currentStatus.value === 'completed') return 'Ready'
|
||||
return 'Preparing'
|
||||
})
|
||||
|
||||
// --- 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 })
|
||||
if (systemLogs.value.length > 100) {
|
||||
systemLogs.value.shift()
|
||||
}
|
||||
}
|
||||
|
||||
const updateStatus = (status) => {
|
||||
currentStatus.value = status
|
||||
}
|
||||
|
||||
// --- Layout Methods ---
|
||||
const toggleMaximize = (target) => {
|
||||
if (viewMode.value === target) {
|
||||
viewMode.value = 'split'
|
||||
} else {
|
||||
viewMode.value = target
|
||||
}
|
||||
}
|
||||
|
||||
const handleGoBack = () => {
|
||||
// 返回到 process 页面
|
||||
if (projectData.value?.project_id) {
|
||||
router.push({ name: 'Process', params: { projectId: projectData.value.project_id } })
|
||||
} else {
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
|
||||
const handleNextStep = () => {
|
||||
addLog('进入 Step 3: 开始模拟')
|
||||
// TODO: 跳转到 Step 3
|
||||
alert('Step 3: 开始模拟 - Coming soon...')
|
||||
}
|
||||
|
||||
// --- Data Logic ---
|
||||
const loadSimulationData = async () => {
|
||||
try {
|
||||
addLog(`加载模拟数据: ${currentSimulationId.value}`)
|
||||
|
||||
// 获取 simulation 信息
|
||||
const simRes = await getSimulation(currentSimulationId.value)
|
||||
if (simRes.success && simRes.data) {
|
||||
const simData = simRes.data
|
||||
|
||||
// 获取 project 信息
|
||||
if (simData.project_id) {
|
||||
const projRes = await getProject(simData.project_id)
|
||||
if (projRes.success && projRes.data) {
|
||||
projectData.value = projRes.data
|
||||
addLog(`项目加载成功: ${projRes.data.project_id}`)
|
||||
|
||||
// 获取 graph 数据
|
||||
if (projRes.data.graph_id) {
|
||||
await loadGraph(projRes.data.graph_id)
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
addLog(`加载模拟数据失败: ${simRes.error || '未知错误'}`)
|
||||
}
|
||||
} catch (err) {
|
||||
addLog(`加载异常: ${err.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
const loadGraph = async (graphId) => {
|
||||
graphLoading.value = true
|
||||
try {
|
||||
const res = await getGraphData(graphId)
|
||||
if (res.success) {
|
||||
graphData.value = res.data
|
||||
addLog('图谱数据加载成功')
|
||||
}
|
||||
} catch (err) {
|
||||
addLog(`图谱加载失败: ${err.message}`)
|
||||
} finally {
|
||||
graphLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const refreshGraph = () => {
|
||||
if (projectData.value?.graph_id) {
|
||||
loadGraph(projectData.value.graph_id)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
addLog('SimulationView 初始化')
|
||||
loadSimulationData()
|
||||
})
|
||||
</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-family: 'JetBrains Mono', monospace;
|
||||
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);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.workflow-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.step-num {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-weight: 700;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.step-name {
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.step-divider {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background-color: #E0E0E0;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.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