From 78c8c43699203048e3a3ae1a97ff2ad52ccb43a7 Mon Sep 17 00:00:00 2001 From: 666ghj <670939375@qq.com> Date: Tue, 16 Dec 2025 19:53:43 +0800 Subject: [PATCH] Add Report Agent Tools Card to Step5Interaction component --- frontend/src/components/Step5Interaction.vue | 267 ++++++++++++++++++- 1 file changed, 259 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/Step5Interaction.vue b/frontend/src/components/Step5Interaction.vue index 7957542..a062fcf 100644 --- a/frontend/src/components/Step5Interaction.vue +++ b/frontend/src/components/Step5Interaction.vue @@ -148,6 +148,73 @@
+ +
+
+
R
+
+
Report Agent - Chat
+
报告生成智能体的快速对话版本，可调用 4 种专业工具
+
+ +
+
+
+
+
+ + + +
+
+
InsightForge 深度归因
+
对齐现实世界种子数据与模拟环境状态，结合Global/Local Memory机制，提供跨时空的深度归因分析
+
+
+
+
+ + + + +
+
+
PanoramaSearch 全景追踪
+
基于图结构的广度遍历算法，重构事件传播路径，捕获全量信息流动的拓扑结构
+
+
+
+
+ + + +
+
+
QuickSearch 快速检索
+
基于 GraphRAG 的即时查询接口，优化索引效率，用于快速提取具体的节点属性与离散事实
+
+
+
+
+ + + + + +
+
+
InterviewSubAgent 虚拟访谈
+
自主式访谈，能够并行与模拟世界中个体进行多轮对话，采集非结构化的观点数据与心理状态
+
+
+
+
+
+
@@ -361,6 +428,7 @@ const showAgentDropdown = ref(false) const selectedAgent = ref(null) const selectedAgentIndex = ref(null) const showFullProfile = ref(true) +const showToolsDetail = ref(true) // Chat State const chatInput = ref('') @@ -471,11 +539,31 @@ const renderMarkdown = (content) => { html = html.replace(/^## (.+)$/gm, '

$1

') html = html.replace(/^# (.+)$/gm, '

$1

') html = html.replace(/^> (.+)$/gm, '
$1
') - html = html.replace(/^- (.+)$/gm, '
  • $1
    • ') - html = html.replace(/(
  • [\s\S]*?<\/li>)(\s*.*<\/li>)+/g, '
      $&
    ') - html = html.replace(/^\d+\. (.+)$/gm, '
  • $1
    • ') - html = html.replace(/(
  • .*<\/li>)+/g, '
      $&
    ') + + // 处理列表 - 支持子列表 + html = html.replace(/^(\s*)- (.+)$/gm, (match, indent, text) => { + const level = Math.floor(indent.length / 2) + return `
  • ${text}
    • ` + }) + html = html.replace(/^(\s*)(\d+)\. (.+)$/gm, (match, indent, num, text) => { + const level = Math.floor(indent.length / 2) + return `
  • ${text}
    • ` + }) + + // 包装无序列表 + html = html.replace(/(
  • ]*>.*?<\/li>\s*)+/g, '
      $&
    ') + // 包装有序列表 + html = html.replace(/(
  • ]*>.*?<\/li>\s*)+/g, '
      $&
    ') + + // 清理列表项之间的所有空白 + html = html.replace(/<\/li>\s+
  • \s+/g, '
      ') + html = html.replace(/
        \s+/g, '
          ') + // 清理列表结束标签前的空白 + html = html.replace(/\s+<\/ul>/g, '
    ') + html = html.replace(/\s+<\/ol>/g, '') + html = html.replace(/\*\*(.+?)\*\*/g, '$1') html = html.replace(/\*(.+?)\*/g, '$1') html = html.replace(/_(.+?)_/g, '$1') @@ -488,6 +576,9 @@ const renderMarkdown = (content) => { html = html.replace(/(<\/h[2-5]>)<\/p>/g, '$1') html = html.replace(/

    (|<\/ol>|<\/blockquote>|<\/pre>)<\/p>/g, '$1') + // 清理列表前后的
    标签 + html = html.replace(/
    (|<\/ol>)
    /g, '$1') return html } @@ -1286,6 +1377,158 @@ watch(() => props.simulationId, (newId) => { overflow: hidden; } +/* Report Agent Tools Card */ +.report-agent-tools-card { + border-bottom: 1px solid #E5E7EB; + background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%); +} + +.tools-card-header { + display: flex; + align-items: center; + gap: 12px; + padding: 14px 20px; +} + +.tools-card-avatar { + width: 44px; + height: 44px; + min-width: 44px; + min-height: 44px; + background: linear-gradient(135deg, #1F2937 0%, #374151 100%); + color: #FFFFFF; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + font-weight: 600; + flex-shrink: 0; + box-shadow: 0 2px 8px rgba(31, 41, 55, 0.2); +} + +.tools-card-info { + flex: 1; + min-width: 0; +} + +.tools-card-name { + font-size: 15px; + font-weight: 600; + color: #1F2937; + margin-bottom: 2px; +} + +.tools-card-subtitle { + font-size: 12px; + color: #6B7280; +} + +.tools-card-toggle { + width: 28px; + height: 28px; + background: #FFFFFF; + border: 1px solid #E5E7EB; + border-radius: 6px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: #6B7280; + transition: all 0.2s ease; + flex-shrink: 0; +} + +.tools-card-toggle:hover { + background: #F9FAFB; + border-color: #D1D5DB; +} + +.tools-card-toggle svg { + transition: transform 0.3s ease; +} + +.tools-card-toggle svg.is-expanded { + transform: rotate(180deg); +} + +.tools-card-body { + padding: 0 20px 16px 20px; +} + +.tools-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; +} + +.tool-item { + display: flex; + gap: 10px; + padding: 12px; + background: #FFFFFF; + border-radius: 10px; + border: 1px solid #E5E7EB; + transition: all 0.2s ease; +} + +.tool-item:hover { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); +} + +.tool-icon-wrapper { + width: 32px; + height: 32px; + min-width: 32px; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.tool-purple .tool-icon-wrapper { + background: rgba(139, 92, 246, 0.1); + color: #8B5CF6; +} + +.tool-blue .tool-icon-wrapper { + background: rgba(59, 130, 246, 0.1); + color: #3B82F6; +} + +.tool-orange .tool-icon-wrapper { + background: rgba(249, 115, 22, 0.1); + color: #F97316; +} + +.tool-green .tool-icon-wrapper { + background: rgba(34, 197, 94, 0.1); + color: #22C55E; +} + +.tool-content { + flex: 1; + min-width: 0; +} + +.tool-name { + font-size: 12px; + font-weight: 600; + color: #1F2937; + margin-bottom: 4px; +} + +.tool-desc { + font-size: 11px; + color: #6B7280; + line-height: 1.4; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + /* Agent Profile Card */ .agent-profile-card { border-bottom: 1px solid #E5E7EB; @@ -1653,10 +1896,10 @@ watch(() => props.simulationId, (newId) => { } .message-text { - padding: 12px 16px; + padding: 10px 14px; border-radius: 12px; font-size: 14px; - line-height: 1.6; + line-height: 1.5; } .chat-message.user .message-text { @@ -1671,11 +1914,19 @@ watch(() => props.simulationId, (newId) => { border-bottom-left-radius: 4px; } +.message-text :deep(.md-p) { + margin: 0; +} + +.message-text :deep(.md-p:last-child) { + margin-bottom: 0; +} + /* Typing Indicator */ .typing-indicator { display: flex; gap: 4px; - padding: 12px 16px; + padding: 10px 14px; background: #F3F4F6; border-radius: 12px; border-bottom-left-radius: 4px;