Implement interaction features in Step5Interaction component and add routing for interaction view
- Introduced the Step5Interaction component for user interaction with report agents and simulation profiles. - Added chat functionality to communicate with report agents and selected simulation agents. - Implemented a survey feature to gather responses from multiple agents. - Enhanced routing by adding a new InteractionView for seamless navigation to the interaction interface. - Updated the router configuration to include the new interaction route. - Improved UI elements and styles for better user experience in the interaction process.
This commit is contained in:
666ghj
parent
3b20672527
commit
70922a3525
6 changed files with 2339 additions and 0 deletions
|
|
@ -41,3 +41,11 @@ export const getConsoleLog = (reportId, fromLine = 0) => {
|
||||||
export const getReport = (reportId) => {
|
export const getReport = (reportId) => {
|
||||||
return service.get(`/api/report/${reportId}`)
|
return service.get(`/api/report/${reportId}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 与 Report Agent 对话
|
||||||
|
* @param {Object} data - { simulation_id, message, chat_history? }
|
||||||
|
*/
|
||||||
|
export const chatWithReport = (data) => {
|
||||||
|
return requestWithRetry(() => service.post('/api/report/chat', data), 3, 1000)
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -168,3 +168,11 @@ export const getEnvStatus = (data) => {
|
||||||
return service.post('/api/simulation/env-status', data)
|
return service.post('/api/simulation/env-status', data)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 批量采访 Agent
|
||||||
|
* @param {Object} data - { simulation_id, interviews: [{ agent_id, prompt }] }
|
||||||
|
*/
|
||||||
|
export const interviewAgents = (data) => {
|
||||||
|
return requestWithRetry(() => service.post('/api/simulation/interview/batch', data), 3, 1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -126,6 +126,15 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Next Step Button - 在完成后显示 -->
|
||||||
|
<button v-if="isComplete" class="next-step-btn" @click="goToInteraction">
|
||||||
|
<span>进入深度互动</span>
|
||||||
|
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||||
|
<polyline points="12 5 19 12 12 19"></polyline>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
<div class="workflow-divider"></div>
|
<div class="workflow-divider"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -383,8 +392,11 @@
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, watch, onMounted, onUnmounted, nextTick, h, reactive } from 'vue'
|
import { ref, computed, watch, onMounted, onUnmounted, nextTick, h, reactive } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
import { getAgentLog, getConsoleLog } from '../api/report'
|
import { getAgentLog, getConsoleLog } from '../api/report'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
reportId: String,
|
reportId: String,
|
||||||
simulationId: String,
|
simulationId: String,
|
||||||
|
|
@ -393,6 +405,13 @@ const props = defineProps({
|
||||||
|
|
||||||
const emit = defineEmits(['add-log', 'update-status'])
|
const emit = defineEmits(['add-log', 'update-status'])
|
||||||
|
|
||||||
|
// Navigation
|
||||||
|
const goToInteraction = () => {
|
||||||
|
if (props.reportId) {
|
||||||
|
router.push({ name: 'Interaction', params: { reportId: props.reportId } })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// State
|
// State
|
||||||
const agentLogs = ref([])
|
const agentLogs = ref([])
|
||||||
const consoleLogs = ref([])
|
const consoleLogs = ref([])
|
||||||
|
|
@ -3344,6 +3363,36 @@ watch(() => props.reportId, (newId) => {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.next-step-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
width: calc(100% - 40px);
|
||||||
|
margin: 4px 20px 0 20px;
|
||||||
|
padding: 14px 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: #1F2937;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-step-btn:hover {
|
||||||
|
background: #374151;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-step-btn svg {
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-step-btn:hover svg {
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
|
||||||
/* Workflow Empty */
|
/* Workflow Empty */
|
||||||
.workflow-empty {
|
.workflow-empty {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
1917
frontend/src/components/Step5Interaction.vue
Normal file
1917
frontend/src/components/Step5Interaction.vue
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -4,6 +4,7 @@ import Process from '../views/MainView.vue'
|
||||||
import SimulationView from '../views/SimulationView.vue'
|
import SimulationView from '../views/SimulationView.vue'
|
||||||
import SimulationRunView from '../views/SimulationRunView.vue'
|
import SimulationRunView from '../views/SimulationRunView.vue'
|
||||||
import ReportView from '../views/ReportView.vue'
|
import ReportView from '../views/ReportView.vue'
|
||||||
|
import InteractionView from '../views/InteractionView.vue'
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
|
|
@ -34,6 +35,12 @@ const routes = [
|
||||||
name: 'Report',
|
name: 'Report',
|
||||||
component: ReportView,
|
component: ReportView,
|
||||||
props: true
|
props: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/interaction/:reportId',
|
||||||
|
name: 'Interaction',
|
||||||
|
component: InteractionView,
|
||||||
|
props: true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
|
||||||
350
frontend/src/views/InteractionView.vue
Normal file
350
frontend/src/views/InteractionView.vue
Normal file
|
|
@ -0,0 +1,350 @@
|
||||||
|
<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 5/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="5"
|
||||||
|
:isSimulating="false"
|
||||||
|
@refresh="refreshGraph"
|
||||||
|
@toggle-maximize="toggleMaximize('graph')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right Panel: Step5 深度互动 -->
|
||||||
|
<div class="panel-wrapper right" :style="rightPanelStyle">
|
||||||
|
<Step5Interaction
|
||||||
|
: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 Step5Interaction from '../components/Step5Interaction.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('ready') // ready | 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'
|
||||||
|
if (currentStatus.value === 'processing') return 'Processing'
|
||||||
|
return 'Ready'
|
||||||
|
})
|
||||||
|
|
||||||
|
// --- 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('InteractionView 初始化')
|
||||||
|
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.ready .dot { background: #4CAF50; }
|
||||||
|
.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>
|
||||||
Loading…
Reference in a new issue