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:
parent
99c1b199d5
commit
e2b1a1554d
1 changed files with 9 additions and 17 deletions
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue