Enhance Step4Report component with section numbering and improved scroll behavior

- Added section numbering to the report sections for better clarity.
- Unified scroll behavior to reset to the top upon task completion, while scrolling to the bottom for ongoing tasks.
- Updated CSS styles for section numbers to improve visual consistency.
This commit is contained in:
666ghj 2025-12-16 23:41:05 +08:00
parent 99c1b199d5
commit e2b1a1554d

View file

@ -29,6 +29,7 @@
}"
>
<div class="section-header-row" @click="toggleSectionCollapse(idx)" :class="{ 'clickable': isSectionCompleted(idx + 1) }">
<span class="section-number">{{ String(idx + 1).padStart(2, '0') }}</span>
<h3 class="section-title">{{ section.title }}</h3>
<svg
v-if="isSectionCompleted(idx + 1)"
@ -2000,12 +2001,7 @@ const fetchAgentLog = async () => {
currentSectionIndex.value = null // loading
emit('update-status', 'completed')
stopPolling()
//
nextTick(() => {
if (rightPanel.value) {
rightPanel.value.scrollTop = 0
}
})
// nextTick
}
if (log.action === 'report_start') {
@ -2017,8 +2013,13 @@ const fetchAgentLog = async () => {
nextTick(() => {
if (rightPanel.value) {
//
if (isComplete.value) {
rightPanel.value.scrollTop = 0
} else {
rightPanel.value.scrollTop = rightPanel.value.scrollHeight
}
}
})
}
}
@ -2404,9 +2405,8 @@ watch(() => props.reportId, (newId) => {
.section-number {
font-family: 'JetBrains Mono', monospace;
font-size: 16px;
color: #E5E7EB; /* Very light gray for number initially */
color: #9CA3AF; /* 深灰色,不随状态变化 */
font-weight: 500;
transition: color 0.3s ease;
}
.section-title {
@ -2419,18 +2419,10 @@ watch(() => props.reportId, (newId) => {
}
/* States */
.report-section-item.is-pending .section-number {
color: #E5E7EB;
}
.report-section-item.is-pending .section-title {
color: #D1D5DB;
}
.report-section-item.is-active .section-number,
.report-section-item.is-completed .section-number {
color: #9CA3AF;
}
.report-section-item.is-active .section-title,
.report-section-item.is-completed .section-title {
color: #111827;