From c43b83f10dde12a12fcc73cae6a163618b324cc7 Mon Sep 17 00:00:00 2001 From: 666ghj <670939375@qq.com> Date: Tue, 16 Dec 2025 19:05:37 +0800 Subject: [PATCH] Enhance Step5Interaction component with professional design updates and improved UI elements - Updated the action bar to a more professional design with enhanced layout and styling. - Introduced new utility classes for better typography and spacing. - Improved button styles for clarity and consistency, including updated labels for interaction buttons. - Enhanced dropdown menu design for better usability and visual appeal. - Adjusted CSS properties for improved responsiveness and overall user experience. --- frontend/src/components/Step5Interaction.vue | 198 +++++++++++++------ 1 file changed, 134 insertions(+), 64 deletions(-) diff --git a/frontend/src/components/Step5Interaction.vue b/frontend/src/components/Step5Interaction.vue index 0f15780..c585397 100644 --- a/frontend/src/components/Step5Interaction.vue +++ b/frontend/src/components/Step5Interaction.vue @@ -77,35 +77,40 @@
- +
-
+
+ Interactive Tools + {{ profiles.length }} agents available +
+
+
选择对话对象
-
-
+
@@ -754,6 +758,11 @@ watch(() => props.simulationId, (newId) => { overflow: hidden; } +/* Utility Classes */ +.mono { + font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Consolas', monospace; +} + /* Main Split Layout */ .main-split-layout { flex: 1; @@ -1089,74 +1098,110 @@ watch(() => props.simulationId, (newId) => { overflow: hidden; } -/* Action Bar */ +/* Action Bar - Professional Design */ .action-bar { display: flex; align-items: center; justify-content: space-between; - padding: 12px 20px; + padding: 14px 20px; border-bottom: 1px solid #E5E7EB; - background: #FAFAFA; - gap: 12px; + background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%); + gap: 16px; } -.action-bar-left { +.action-bar-header { + display: flex; + flex-direction: column; + gap: 2px; + min-width: 140px; +} + +.action-bar-title { + font-size: 13px; + font-weight: 600; + color: #1F2937; + letter-spacing: -0.01em; +} + +.action-bar-subtitle { + font-size: 11px; + color: #9CA3AF; +} + +.action-bar-subtitle.mono { + font-family: 'JetBrains Mono', 'SF Mono', monospace; +} + +.action-bar-tabs { display: flex; align-items: center; - gap: 8px; + gap: 6px; + flex: 1; + justify-content: flex-end; } -.action-bar-right { - display: flex; - align-items: center; -} - -.action-btn { +.tab-pill { display: flex; align-items: center; gap: 6px; padding: 8px 14px; - font-size: 13px; + font-size: 12px; font-weight: 500; - color: #4B5563; - background: #FFFFFF; - border: 1px solid #E5E7EB; - border-radius: 6px; + color: #6B7280; + background: #F3F4F6; + border: 1px solid transparent; + border-radius: 20px; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } -.action-btn:hover { - background: #F9FAFB; - border-color: #D1D5DB; +.tab-pill:hover { + background: #E5E7EB; + color: #374151; } -.action-btn.active { +.tab-pill.active { background: #1F2937; color: #FFFFFF; - border-color: #1F2937; + box-shadow: 0 2px 8px rgba(31, 41, 55, 0.15); } -.action-btn svg { +.tab-pill svg { flex-shrink: 0; + opacity: 0.7; } -.survey-btn { - background: #F0FDF4; - border-color: #86EFAC; - color: #166534; +.tab-pill.active svg { + opacity: 1; } -.survey-btn:hover { - background: #DCFCE7; - border-color: #4ADE80; +.tab-divider { + width: 1px; + height: 24px; + background: #E5E7EB; + margin: 0 6px; } -.survey-btn.active { - background: #166534; +.agent-pill { + min-width: 120px; + justify-content: space-between; +} + +.survey-pill { + background: #ECFDF5; + color: #047857; +} + +.survey-pill:hover { + background: #D1FAE5; + color: #065F46; +} + +.survey-pill.active { + background: #047857; color: #FFFFFF; - border-color: #166534; + box-shadow: 0 2px 8px rgba(4, 120, 87, 0.2); } /* Interaction Header */ @@ -1379,14 +1424,10 @@ watch(() => props.simulationId, (newId) => { position: relative; } -.agent-option { - min-width: 180px; - justify-content: flex-start; -} - .dropdown-arrow { - margin-left: auto; + margin-left: 4px; transition: transform 0.2s ease; + opacity: 0.6; } .dropdown-arrow.open { @@ -1395,30 +1436,50 @@ watch(() => props.simulationId, (newId) => { .dropdown-menu { position: absolute; - top: 100%; - left: 0; - right: 0; - margin-top: 4px; + top: calc(100% + 6px); + left: 50%; + transform: translateX(-50%); + min-width: 240px; background: #FFFFFF; border: 1px solid #E5E7EB; - border-radius: 8px; - box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); - max-height: 300px; + border-radius: 12px; + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06); + max-height: 320px; overflow-y: auto; z-index: 100; } +.dropdown-header { + padding: 12px 16px 8px; + font-size: 11px; + font-weight: 600; + color: #9CA3AF; + text-transform: uppercase; + letter-spacing: 0.05em; + border-bottom: 1px solid #F3F4F6; +} + .dropdown-item { display: flex; align-items: center; gap: 12px; - padding: 12px 16px; + padding: 10px 16px; cursor: pointer; - transition: background 0.15s ease; + transition: all 0.15s ease; + border-left: 3px solid transparent; } .dropdown-item:hover { background: #F9FAFB; + border-left-color: #1F2937; +} + +.dropdown-item:first-of-type { + margin-top: 4px; +} + +.dropdown-item:last-child { + margin-bottom: 4px; } .agent-avatar { @@ -1426,32 +1487,41 @@ watch(() => props.simulationId, (newId) => { height: 32px; min-width: 32px; min-height: 32px; - background: #1F2937; + background: linear-gradient(135deg, #1F2937 0%, #374151 100%); color: #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; - font-size: 13px; + font-size: 12px; font-weight: 600; flex-shrink: 0; + box-shadow: 0 2px 4px rgba(31, 41, 55, 0.1); } .agent-info { display: flex; flex-direction: column; gap: 2px; + flex: 1; + min-width: 0; } .agent-name { font-size: 13px; font-weight: 600; color: #1F2937; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .agent-role { font-size: 11px; color: #9CA3AF; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } /* Chat Messages */