Yusaki/MiroFish
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove status bar from Step4Report component to streamline UI and improve layout. This change simplifies the report display by eliminating unnecessary elements, enhancing user experience and focus on content.

Browse source
This commit is contained in:
666ghj 2025-12-14 03:32:47 +08:00
parent 9be2c28a5d
commit 1db72dcd6b
1 changed files with 0 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

127
frontend/src/components/Step4Report.vue
View file

@ -1,41 +1,5 @@
<template>
<div class="report-panel">
<!-- Top Status Bar -->
<div class="status-bar">
<div class="status-left">
<div class="report-badge">
<svg class="badge-icon" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
<line x1="16" y1="13" x2="8" y2="13"></line>
<line x1="16" y1="17" x2="8" y2="17"></line>
</svg>
<span class="badge-text">Report Agent</span>
</div>
<div class="status-indicator" :class="statusClass">
<span class="dot"></span>
<span class="status-text">{{ statusText }}</span>
</div>
</div>
<div class="status-right">
<div class="stats-group" v-if="reportOutline">
<span class="stat-item">
<span class="stat-label">Sections</span>
<span class="stat-value mono">{{ completedSections }}/{{ totalSections }}</span>
</span>
<span class="stat-item">
<span class="stat-label">Tools</span>
<span class="stat-value mono">{{ totalToolCalls }}</span>
</span>
<span class="stat-item">
<span class="stat-label">Time</span>
<span class="stat-value mono">{{ formatElapsedTime }}</span>
</span>
</div>
</div>
</div>
<!-- Main Split Layout -->
<div class="main-split-layout">
<!-- LEFT PANEL: Progress & Content -->
@ -1183,97 +1147,6 @@ watch(() => props.reportId, (newId) => {
overflow: hidden;
}
/* Status Bar */
.status-bar {
background: #FFFFFF;
padding: 14px 24px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #E5E7EB;
flex-shrink: 0;
}
.status-left {
display: flex;
align-items: center;
gap: 16px;
}
.report-badge {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
border-radius: 20px;
color: #FFF;
}
.badge-icon {
flex-shrink: 0;
}
.badge-text {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.status-indicator {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #6B7280;
}
.status-indicator .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #D1D5DB;
}
.status-indicator.pending .dot { background: #9CA3AF; }
.status-indicator.processing .dot { background: #F59E0B; animation: pulse 1.2s infinite; }
.status-indicator.completed .dot { background: #10B981; }
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.1); }
}
.stats-group {
display: flex;
gap: 24px;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.stat-label {
font-size: 10px;
color: #9CA3AF;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.stat-value {
font-size: 14px;
font-weight: 600;
color: #374151;
}
.mono {
font-family: 'JetBrains Mono', 'SF Mono', monospace;
}
/* Main Split Layout */
.main-split-layout {
flex: 1;