From c738d7edfbecec414a2774f7c9adb1087de7d16b Mon Sep 17 00:00:00 2001 From: 666ghj <670939375@qq.com> Date: Tue, 16 Dec 2025 18:36:15 +0800 Subject: [PATCH] Refactor Step5Interaction component to enhance user interaction and UI elements - Replaced tab switcher with a unified action bar for improved navigation and functionality. - Introduced an agent dropdown for selecting conversation targets, enhancing user experience. - Updated button labels for clarity and consistency in the interaction interface. - Adjusted CSS styles for better layout and responsiveness across components. - Reduced margin in Step4Report for a more compact design. --- frontend/src/components/Step4Report.vue | 2 +- frontend/src/components/Step5Interaction.vue | 437 +++++++++++++------ 2 files changed, 308 insertions(+), 131 deletions(-) diff --git a/frontend/src/components/Step4Report.vue b/frontend/src/components/Step4Report.vue index eadbd13..fdbdf19 100644 --- a/frontend/src/components/Step4Report.vue +++ b/frontend/src/components/Step4Report.vue @@ -2305,7 +2305,7 @@ watch(() => props.reportId, (newId) => { } .report-header-block { - margin-bottom: 50px; + margin-bottom: 30px; } .report-meta { diff --git a/frontend/src/components/Step5Interaction.vue b/frontend/src/components/Step5Interaction.vue index 068a8d3..dbdd2a6 100644 --- a/frontend/src/components/Step5Interaction.vue +++ b/frontend/src/components/Step5Interaction.vue @@ -77,21 +77,53 @@
- -
-
+ +
+
+
+ +
+
+
{{ (agent.username || 'A')[0] }}
+
+ {{ agent.username }} + {{ agent.profession || '未知职业' }} +
+
+
+
+
+
- -
-
对话对象
-
- -
- -
-
-
{{ (agent.username || 'A')[0] }}
-
- {{ agent.username }} - {{ agent.profession || '未知职业' }} -
-
+
+
+
+
简介
+

{{ selectedAgent.bio }}

+
+
+
兴趣领域
+
+ {{ topic }}
@@ -319,20 +336,6 @@
- - -
-
- INTERACTION LOG - {{ simulationId || 'NO_SIMULATION' }} -
-
-
- {{ log.time }} - {{ log.msg }} -
-
-
@@ -343,8 +346,7 @@ import { interviewAgents, getSimulationProfilesRealtime } from '../api/simulatio const props = defineProps({ reportId: String, - simulationId: String, - systemLogs: Array + simulationId: String }) const emit = defineEmits(['add-log', 'update-status']) @@ -355,6 +357,7 @@ const chatTarget = ref('report_agent') const showAgentDropdown = ref(false) const selectedAgent = ref(null) const selectedAgentIndex = ref(null) +const showFullProfile = ref(true) // Chat State const chatInput = ref('') @@ -384,7 +387,6 @@ const isSectionCompleted = (sectionIndex) => { // Refs const leftPanel = ref(null) const rightPanel = ref(null) -const logContent = ref(null) // Methods const addLog = (msg) => { @@ -409,6 +411,15 @@ const selectChatTarget = (target) => { } } +const selectReportAgentChat = () => { + activeTab.value = 'chat' + chatTarget.value = 'report_agent' + selectedAgent.value = null + selectedAgentIndex.value = null + showAgentDropdown.value = false + chatHistory.value = [] +} + const toggleAgentDropdown = () => { showAgentDropdown.value = !showAgentDropdown.value if (showAgentDropdown.value) { @@ -798,7 +809,7 @@ watch(() => props.simulationId, (newId) => { } .report-header-block { - margin-bottom: 50px; + margin-bottom: 30px; } .report-meta { @@ -1068,14 +1079,11 @@ watch(() => props.simulationId, (newId) => { @keyframes ripple { 0% { transform: scale(0.5); opacity: 1; } - 100% { transform: scale(1.5); opacity: 0; } + 100% { transform: scale(2); opacity: 0; } } .waiting-text { - font-size: 12px; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.08em; + font-size: 14px; } /* Right Panel - Interaction */ @@ -1087,6 +1095,76 @@ watch(() => props.simulationId, (newId) => { overflow: hidden; } +/* Action Bar */ +.action-bar { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 20px; + border-bottom: 1px solid #E5E7EB; + background: #FAFAFA; + gap: 12px; +} + +.action-bar-left { + display: flex; + align-items: center; + gap: 8px; +} + +.action-bar-right { + display: flex; + align-items: center; +} + +.action-btn { + display: flex; + align-items: center; + gap: 6px; + padding: 8px 14px; + font-size: 13px; + font-weight: 500; + color: #4B5563; + background: #FFFFFF; + border: 1px solid #E5E7EB; + border-radius: 6px; + cursor: pointer; + transition: all 0.2s ease; + white-space: nowrap; +} + +.action-btn:hover { + background: #F9FAFB; + border-color: #D1D5DB; +} + +.action-btn.active { + background: #1F2937; + color: #FFFFFF; + border-color: #1F2937; +} + +.action-btn svg { + flex-shrink: 0; +} + +.survey-btn { + background: #F0FDF4; + border-color: #86EFAC; + color: #166534; +} + +.survey-btn:hover { + background: #DCFCE7; + border-color: #4ADE80; +} + +.survey-btn.active { + background: #166534; + color: #FFFFFF; + border-color: #166534; +} + /* Interaction Header */ .interaction-header { padding: 16px 24px; @@ -1137,6 +1215,148 @@ watch(() => props.simulationId, (newId) => { overflow: hidden; } +/* Agent Profile Card */ +.agent-profile-card { + border-bottom: 1px solid #E5E7EB; + background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%); +} + +.profile-card-header { + display: flex; + align-items: center; + gap: 12px; + padding: 14px 20px; +} + +.profile-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); +} + +.profile-card-info { + flex: 1; + min-width: 0; +} + +.profile-card-name { + font-size: 15px; + font-weight: 600; + color: #1F2937; + margin-bottom: 2px; +} + +.profile-card-meta { + display: flex; + align-items: center; + gap: 8px; + font-size: 12px; + color: #6B7280; +} + +.profile-card-handle { + color: #9CA3AF; +} + +.profile-card-profession { + padding: 2px 8px; + background: #E5E7EB; + border-radius: 4px; + font-size: 11px; + font-weight: 500; +} + +.profile-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; +} + +.profile-card-toggle:hover { + background: #F9FAFB; + border-color: #D1D5DB; +} + +.profile-card-toggle svg { + transition: transform 0.3s ease; +} + +.profile-card-toggle svg.is-expanded { + transform: rotate(180deg); +} + +.profile-card-body { + padding: 0 20px 16px 20px; + display: flex; + flex-direction: column; + gap: 12px; +} + +.profile-card-label { + font-size: 11px; + font-weight: 600; + color: #9CA3AF; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 6px; +} + +.profile-card-bio { + background: #FFFFFF; + padding: 12px 14px; + border-radius: 8px; + border: 1px solid #E5E7EB; +} + +.profile-card-bio p { + margin: 0; + font-size: 13px; + line-height: 1.6; + color: #4B5563; +} + +.profile-card-topics { + background: #FFFFFF; + padding: 12px 14px; + border-radius: 8px; + border: 1px solid #E5E7EB; +} + +.profile-topics-list { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.profile-topic-tag { + padding: 4px 10px; + background: #F3F4F6; + color: #374151; + border-radius: 12px; + font-size: 12px; + font-weight: 500; +} + /* Target Selector */ .target-selector { padding: 16px 24px; @@ -1232,6 +1452,8 @@ watch(() => props.simulationId, (newId) => { .agent-avatar { width: 32px; height: 32px; + min-width: 32px; + min-height: 32px; background: #1F2937; color: #FFFFFF; border-radius: 50%; @@ -1240,6 +1462,7 @@ watch(() => props.simulationId, (newId) => { justify-content: center; font-size: 13px; font-weight: 600; + flex-shrink: 0; } .agent-info { @@ -1302,6 +1525,8 @@ watch(() => props.simulationId, (newId) => { .message-avatar { width: 36px; height: 36px; + min-width: 36px; + min-height: 36px; border-radius: 50%; display: flex; align-items: center; @@ -1482,7 +1707,7 @@ watch(() => props.simulationId, (newId) => { margin-bottom: 12px; } -.section-title { +.setup-section .section-header .section-title { font-size: 13px; font-weight: 600; color: #374151; @@ -1531,6 +1756,8 @@ watch(() => props.simulationId, (newId) => { .checkbox-avatar { width: 28px; height: 28px; + min-width: 28px; + min-height: 28px; background: #E5E7EB; color: #374151; border-radius: 50%; @@ -1731,6 +1958,8 @@ watch(() => props.simulationId, (newId) => { .result-avatar { width: 36px; height: 36px; + min-width: 36px; + min-height: 36px; background: #1F2937; color: #FFFFFF; border-radius: 50%; @@ -1739,6 +1968,7 @@ watch(() => props.simulationId, (newId) => { justify-content: center; font-size: 14px; font-weight: 600; + flex-shrink: 0; } .result-info { @@ -1781,61 +2011,6 @@ watch(() => props.simulationId, (newId) => { color: #374151; } -/* Console Logs */ -.console-logs { - background: #000; - color: #DDD; - padding: 16px; - font-family: 'JetBrains Mono', monospace; - border-top: 1px solid #222; - flex-shrink: 0; -} - -.log-header { - display: flex; - justify-content: space-between; - border-bottom: 1px solid #333; - padding-bottom: 8px; - margin-bottom: 8px; - font-size: 10px; - color: #666; -} - -.log-content { - display: flex; - flex-direction: column; - gap: 4px; - height: 80px; - overflow-y: auto; - padding-right: 4px; -} - -.log-content::-webkit-scrollbar { - width: 4px; -} - -.log-content::-webkit-scrollbar-thumb { - background: #333; - border-radius: 2px; -} - -.log-line { - font-size: 11px; - display: flex; - gap: 12px; - line-height: 1.5; -} - -.log-time { - color: #555; - min-width: 75px; -} - -.log-msg { - color: #BBB; - word-break: break-all; -} - /* Markdown Styles */ :deep(.md-p) { margin: 0 0 12px 0; @@ -1878,7 +2053,9 @@ watch(() => props.simulationId, (newId) => { margin: 6px 0; } -:deep(.md-quote) { +/* 聊天/问卷区域的引用样式 */ +.chat-messages :deep(.md-quote), +.result-answer :deep(.md-quote) { margin: 12px 0; padding: 12px 16px; background: #F9FAFB;