fix(web): 隔离Trace文件变动滚动边界

This commit is contained in:
root
2026-07-26 21:18:34 +02:00
parent 6e1099be0b
commit 5dd07ce30e
2 changed files with 24 additions and 8 deletions
@@ -72,10 +72,12 @@ test("CaseRun uses the bounded review workspace with an offline scoring tab", ()
assert.match(reviewPane, /class="trace-kind-filter"/u);
assert.match(reviewPane, /class="trace-search"/u);
assert.match(reviewPane, /<details :open="traceRowOpen\(row, index\)"/u);
assert.match(traceFileChanges, /aria-label="" tabindex="0"/u);
assert.match(traceFileChanges, /max-height: min\(360px, 52vh\)/u);
assert.match(traceFileChanges, /overflow: auto/u);
assert.match(traceFileChanges, /class="trace-file-changes" aria-label=""/u);
assert.match(traceFileChanges, /class="trace-file-changes-scroll" tabindex="0"/u);
assert.match(traceFileChanges, /\.trace-file-changes \{[\s\S]*overflow: hidden/u);
assert.match(traceFileChanges, /contain: layout paint/u);
assert.match(traceFileChanges, /isolation: isolate/u);
assert.match(traceFileChanges, /\.trace-file-changes-scroll \{[\s\S]*max-height: min\(360px, 52vh\)[\s\S]*overflow: auto/u);
assert.match(traceFileChanges, /scrollbar-gutter: stable/u);
assert.match(reviewPane, /<MessageMarkdown v-else-if="row\.bodyFormat === 'markdown'"/u);
assert.match(reviewPane, /traceToolSummary\(workbenchTraceRow\(row\)\)/u);
@@ -8,20 +8,34 @@ const files = computed(() => parseTraceDiffMarkdown(props.source));
</script>
<template>
<section class="trace-file-changes" aria-label="文件变动详情" tabindex="0">
<UnifiedDiffContent :files="files" compact />
<section class="trace-file-changes" aria-label="文件变动详情">
<div class="trace-file-changes-scroll" tabindex="0">
<UnifiedDiffContent :files="files" compact />
</div>
</section>
</template>
<style scoped>
.trace-file-changes {
display: block;
min-width: 0;
max-width: 100%;
overflow: hidden;
contain: layout paint;
isolation: isolate;
background: white;
}
.trace-file-changes-scroll {
position: relative;
z-index: 0;
display: block;
box-sizing: border-box;
max-height: min(360px, 52vh);
min-width: 0;
max-width: 100%;
overflow: auto;
contain: layout paint;
background: white;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
.trace-file-changes:focus-visible { outline: 2px solid var(--console-cyan-600); outline-offset: -2px; }
.trace-file-changes-scroll:focus-visible { outline: 2px solid var(--console-cyan-600); outline-offset: -2px; }
</style>