Enhance simulation functionality and frontend components for improved user experience
- Updated the simulation API to include a new 'force' parameter, allowing users to restart simulations while cleaning up previous logs. - Enhanced the simulation status detail retrieval to include all actions and platform-specific actions for better monitoring. - Introduced a new SimulationRunView component to manage the simulation process, providing a clear interface for users to start and monitor simulations. - Improved the Step3Simulation component with detailed logging and progress indicators, ensuring users receive real-time updates during the simulation. - Added new API endpoints for retrieving simulation posts and actions, enhancing the overall functionality and user engagement.
This commit is contained in:
666ghj
@@ -108,3 +108,47 @@ export const getRunStatusDetail = (simulationId) => {
|
||||
return service.get(`/api/simulation/${simulationId}/run-status/detail`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取模拟中的帖子
|
||||
* @param {string} simulationId
|
||||
* @param {string} platform - 'reddit' | 'twitter'
|
||||
* @param {number} limit - 返回数量
|
||||
* @param {number} offset - 偏移量
|
||||
*/
|
||||
export const getSimulationPosts = (simulationId, platform = 'reddit', limit = 50, offset = 0) => {
|
||||
return service.get(`/api/simulation/${simulationId}/posts`, {
|
||||
params: { platform, limit, offset }
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取模拟时间线（按轮次汇总）
|
||||
* @param {string} simulationId
|
||||
* @param {number} startRound - 起始轮次
|
||||
* @param {number} endRound - 结束轮次
|
||||
*/
|
||||
export const getSimulationTimeline = (simulationId, startRound = 0, endRound = null) => {
|
||||
const params = { start_round: startRound }
|
||||
if (endRound !== null) {
|
||||
params.end_round = endRound
|
||||
}
|
||||
return service.get(`/api/simulation/${simulationId}/timeline`, { params })
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取Agent统计信息
|
||||
* @param {string} simulationId
|
||||
*/
|
||||
export const getAgentStats = (simulationId) => {
|
||||
return service.get(`/api/simulation/${simulationId}/agent-stats`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取模拟动作历史
|
||||
* @param {string} simulationId
|
||||
* @param {Object} params - { limit, offset, platform, agent_id, round_num }
|
||||
*/
|
||||
export const getSimulationActions = (simulationId, params = {}) => {
|
||||
return service.get(`/api/simulation/${simulationId}/actions`, { params })
|
||||
}
|
||||
|
||||
|
||||
1312
frontend/src/components/Step3Simulation.vue
Normal file
1312
frontend/src/components/Step3Simulation.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -2,6 +2,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'
|
||||
import SimulationRunView from '../views/SimulationRunView.vue'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
@@ -20,6 +21,12 @@ const routes = [
|
||||
name: 'Simulation',
|
||||
component: SimulationView,
|
||||
props: true
|
||||
},
|
||||
{
|
||||
path: '/simulation/:simulationId/start',
|
||||
name: 'SimulationRun',
|
||||
component: SimulationRunView,
|
||||
props: true
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
343
frontend/src/views/SimulationRunView.vue
Normal file
343
frontend/src/views/SimulationRunView.vue
Normal file
@@ -0,0 +1,343 @@
|
||||
<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 3/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="3"
|
||||
@refresh="refreshGraph"
|
||||
@toggle-maximize="toggleMaximize('graph')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Right Panel: Step3 开始模拟 -->
|
||||
<div class="panel-wrapper right" :style="rightPanelStyle">
|
||||
<Step3Simulation
|
||||
:simulationId="currentSimulationId"
|
||||
:maxRounds="maxRounds"
|
||||
: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 } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import GraphPanel from '../components/GraphPanel.vue'
|
||||
import Step3Simulation from '../components/Step3Simulation.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)
|
||||
// 直接在初始化时从 query 参数获取 maxRounds，确保子组件能立即获取到值
|
||||
const maxRounds = ref(route.query.maxRounds ? parseInt(route.query.maxRounds) : null)
|
||||
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 'Completed'
|
||||
return 'Running'
|
||||
})
|
||||
|
||||
// --- 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 > 200) {
|
||||
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 = () => {
|
||||
// 返回到 Step 2 (环境搭建)
|
||||
router.push({ name: 'Simulation', params: { simulationId: currentSimulationId.value } })
|
||||
}
|
||||
|
||||
const handleNextStep = () => {
|
||||
addLog('进入 Step 4: 报告生成')
|
||||
// TODO: 跳转到 Step 4 报告生成页面
|
||||
alert('Step 4: 报告生成 - 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('SimulationRunView 初始化')
|
||||
|
||||
// 记录 maxRounds 配置（值已在初始化时从 query 参数获取）
|
||||
if (maxRounds.value) {
|
||||
addLog(`自定义模拟轮数: ${maxRounds.value}`)
|
||||
}
|
||||
|
||||
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>
|
||||
@@ -155,14 +155,19 @@ const handleNextStep = (params = {}) => {
|
||||
addLog('使用自动配置的模拟轮数')
|
||||
}
|
||||
|
||||
// TODO: 调用 startSimulation API 并跳转到 Step 3
|
||||
// 可以在这里调用 /api/simulation/start 接口
|
||||
// const startParams = {
|
||||
// simulation_id: currentSimulationId.value,
|
||||
// ...(params.maxRounds && { max_rounds: params.maxRounds })
|
||||
// }
|
||||
// 构建路由参数
|
||||
const routeParams = {
|
||||
name: 'SimulationRun',
|
||||
params: { simulationId: currentSimulationId.value }
|
||||
}
|
||||
|
||||
alert(`Step 3: 开始模拟 - Coming soon...\n${params.maxRounds ? `轮数: ${params.maxRounds}` : '使用自动配置轮数'}`)
|
||||
// 如果有自定义轮数，通过 query 参数传递
|
||||
if (params.maxRounds) {
|
||||
routeParams.query = { maxRounds: params.maxRounds }
|
||||
}
|
||||
|
||||
// 跳转到 Step 3 页面
|
||||
router.push(routeParams)
|
||||
}
|
||||
|
||||
// --- Data Logic ---
|
||||
|
||||
Reference in New Issue
Block a user