Implement report generation features and UI enhancements

- Added a new API for generating reports, including functions to retrieve report status, agent logs, console logs, and report details.
- Enhanced the Step3Simulation component to manage report generation with loading indicators and improved user feedback during the process.
- Introduced a new Step4Report component to display report details and logs, providing a comprehensive view of the report generation workflow.
- Updated routing to include a dedicated report view, improving navigation and user experience in the application.

frontend/src/api/report.js

@@ -0,0 +1,43 @@
+import service, { requestWithRetry } from './index'
+
+/**
+ * 开始报告生成
+ * @param {Object} data - { simulation_id, force_regenerate? }
+ */
+export const generateReport = (data) => {
+  return requestWithRetry(() => service.post('/api/report/generate', data), 3, 1000)
+}
+
+/**
+ * 获取报告生成状态
+ * @param {string} reportId
+ */
+export const getReportStatus = (reportId) => {
+  return service.get(`/api/report/generate/status`, { params: { report_id: reportId } })
+}
+
+/**
+ * 获取 Agent 日志（增量）
+ * @param {string} reportId
+ * @param {number} fromLine - 从第几行开始获取
+ */
+export const getAgentLog = (reportId, fromLine = 0) => {
+  return service.get(`/api/report/${reportId}/agent-log`, { params: { from_line: fromLine } })
+}
+
+/**
+ * 获取控制台日志（增量）
+ * @param {string} reportId
+ * @param {number} fromLine - 从第几行开始获取
+ */
+export const getConsoleLog = (reportId, fromLine = 0) => {
+  return service.get(`/api/report/${reportId}/console-log`, { params: { from_line: fromLine } })
+}
+
+/**
+ * 获取报告详情
+ * @param {string} reportId
+ */
+export const getReport = (reportId) => {
+  return service.get(`/api/report/${reportId}`)
+}

frontend/src/components/Step3Simulation.vue

@@ -93,10 +93,12 @@
       <div class="action-controls">
         <button 
           class="action-btn primary"
-          :disabled="phase !== 2"
+          :disabled="phase !== 2 || isGeneratingReport"
           @click="handleNextStep"
         >
-          开始生成结果报告 <span class="arrow-icon">→</span>
+          <span v-if="isGeneratingReport" class="loading-spinner-small"></span>
+          {{ isGeneratingReport ? '启动中...' : '开始生成结果报告' }} 
+          <span v-if="!isGeneratingReport" class="arrow-icon">→</span>
         </button>
       </div>
     </div>
@@ -285,12 +287,14 @@
 
 <script setup>
 import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
 import { 
   startSimulation, 
   stopSimulation,
   getRunStatus, 
   getRunStatusDetail
 } from '../api/simulation'
+import { generateReport } from '../api/report'
 
 const props = defineProps({
   simulationId: String,
@@ -306,7 +310,10 @@ const props = defineProps({
 
 const emit = defineEmits(['go-back', 'next-step', 'add-log', 'update-status'])
 
+const router = useRouter()
+
 // State
+const isGeneratingReport = ref(false)
 const phase = ref(0) // 0: 未开始, 1: 运行中, 2: 已完成
 const isStarting = ref(false)
 const isStopping = ref(false)
@@ -631,8 +638,40 @@ const formatActionTime = (timestamp) => {
   }
 }
 
-const handleNextStep = () => {
+const handleNextStep = async () => {
-  emit('next-step')
+  if (!props.simulationId) {
+    addLog('错误：缺少 simulationId')
+    return
+  }
+  
+  if (isGeneratingReport.value) {
+    addLog('报告生成请求已发送，请稍候...')
+    return
+  }
+  
+  isGeneratingReport.value = true
+  addLog('正在启动报告生成...')
+  
+  try {
+    const res = await generateReport({
+      simulation_id: props.simulationId,
+      force_regenerate: false
+    })
+    
+    if (res.success && res.data) {
+      const reportId = res.data.report_id
+      addLog(`✓ 报告生成任务已启动: ${reportId}`)
+      
+      // 跳转到报告页面
+      router.push({ name: 'Report', params: { reportId } })
+    } else {
+      addLog(`✗ 启动报告生成失败: ${res.error || '未知错误'}`)
+      isGeneratingReport.value = false
+    }
+  } catch (err) {
+    addLog(`✗ 启动报告生成异常: ${err.message}`)
+    isGeneratingReport.value = false
+  }
 }
 
 // Scroll log to bottom
@@ -1210,4 +1249,16 @@ onUnmounted(() => {
 .log-time { color: #555; min-width: 75px; }
 .log-msg { color: #BBB; word-break: break-all; }
 .mono { font-family: 'JetBrains Mono', monospace; }
+
+/* Loading spinner for button */
+.loading-spinner-small {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #FFF;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  margin-right: 6px;
+}
 </style>

frontend/src/router/index.js

@@ -3,6 +3,7 @@ import Home from '../views/Home.vue'
 import Process from '../views/MainView.vue'
 import SimulationView from '../views/SimulationView.vue'
 import SimulationRunView from '../views/SimulationRunView.vue'
+import ReportView from '../views/ReportView.vue'
 
 const routes = [
   {
@@ -27,6 +28,12 @@ const routes = [
     name: 'SimulationRun',
     component: SimulationRunView,
     props: true
+  },
+  {
+    path: '/report/:reportId',
+    name: 'Report',
+    component: ReportView,
+    props: true
   }
 ]
 

frontend/src/views/ReportView.vue

@@ -0,0 +1,348 @@
+<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 4/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="4"
+          :isSimulating="false"
+          @refresh="refreshGraph"
+          @toggle-maximize="toggleMaximize('graph')"
+        />
+      </div>
+
+      <!-- Right Panel: Step4 报告生成 -->
+      <div class="panel-wrapper right" :style="rightPanelStyle">
+        <Step4Report
+          :reportId="currentReportId"
+          :simulationId="simulationId"
+          :systemLogs="systemLogs"
+          @add-log="addLog"
+          @update-status="updateStatus"
+        />
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import GraphPanel from '../components/GraphPanel.vue'
+import Step4Report from '../components/Step4Report.vue'
+import { getProject, getGraphData } from '../api/graph'
+import { getSimulation } from '../api/simulation'
+import { getReport } from '../api/report'
+
+const route = useRoute()
+const router = useRouter()
+
+// Props
+const props = defineProps({
+  reportId: String
+})
+
+// Layout State - 默认切换到工作台视角
+const viewMode = ref('workbench')
+
+// Data State
+const currentReportId = ref(route.params.reportId)
+const simulationId = ref(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 'Generating'
+})
+
+// --- 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
+  }
+}
+
+// --- Data Logic ---
+const loadReportData = async () => {
+  try {
+    addLog(`加载报告数据: ${currentReportId.value}`)
+    
+    // 获取 report 信息以获取 simulation_id
+    const reportRes = await getReport(currentReportId.value)
+    if (reportRes.success && reportRes.data) {
+      const reportData = reportRes.data
+      simulationId.value = reportData.simulation_id
+      
+      if (simulationId.value) {
+        // 获取 simulation 信息
+        const simRes = await getSimulation(simulationId.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(`获取报告信息失败: ${reportRes.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)
+  }
+}
+
+// Watch route params
+watch(() => route.params.reportId, (newId) => {
+  if (newId && newId !== currentReportId.value) {
+    currentReportId.value = newId
+    loadReportData()
+  }
+}, { immediate: true })
+
+onMounted(() => {
+  addLog('ReportView 初始化')
+  loadReportData()
+})
+</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;
+  position: relative;
+}
+
+.header-center {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.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: #FF9800; 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>

frontend/src/views/SimulationRunView.vue

@@ -193,9 +193,9 @@ const handleGoBack = async () => {
 }
 
 const handleNextStep = () => {
+  // Step3Simulation 组件会直接处理报告生成和路由跳转
+  // 这个方法仅作为备用
   addLog('进入 Step 4: 报告生成')
-  // TODO: 跳转到 Step 4 报告生成页面
-  alert('Step 4: 报告生成 - Coming soon...')
 }
 
 // --- Data Logic ---