mirrors/pikasTech-HWLAB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 统一CaseRun标签栏宽度

Browse Source
This commit is contained in:
root
2026-07-25 22:59:42 +02:00
parent 9925cfe7ae
commit 479591dab2
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/hwlab-cloud-web/src/components/caserun/CaseRunReviewPane.vue
+11 -9
View File
@@ -147,10 +147,10 @@ function toolDetail(row: CaseRunReviewTraceRow) {
<header class="review-tabs" role="tablist" aria-label="运行审查标签">
<button v-for="tab in tabs" :key="tab.id" type="button" role="tab" :aria-selected="activeTab === tab.id" @click="activeTab = tab.id">
<component :is="tab.icon" :size="15" aria-hidden="true" />
{{ tab.label }}
<span v-if="tab.id === 'trace'">{{ trace?.returnedRowCount ?? 0 }}</span>
<span v-else-if="tab.id === 'diff'">{{ diff?.files?.length ?? 0 }}</span>
<span v-else-if="tab.id === 'hardware'">{{ operations.length }}</span>
<span class="review-tab-label">{{ tab.label }}</span>
<span v-if="tab.id === 'trace'" class="review-tab-count">{{ trace?.returnedRowCount ?? 0 }}</span>
<span v-else-if="tab.id === 'diff'" class="review-tab-count">{{ diff?.files?.length ?? 0 }}</span>
<span v-else-if="tab.id === 'hardware'" class="review-tab-count">{{ operations.length }}</span>
</button>
<div class="review-source">
<span>{{ props.reviewSource === "analysis" ? "离线分析投影" : props.reviewSource === "capture" ? "Capture 记录" : "等待记录" }}</span>
@@ -266,11 +266,12 @@ function toolDetail(row: CaseRunReviewTraceRow) {
<style scoped>
.review-pane { display: grid; min-width: 0; min-height: 0; grid-template-rows: 42px minmax(0, 1fr); overflow: hidden; background: var(--console-surface-raised); }
.review-tabs { display: flex; min-width: 0; align-items: stretch; border-bottom: 1px solid var(--console-border); background: var(--console-surface-muted); }
.review-tabs button { display: inline-flex; min-width: 112px; align-items: center; justify-content: center; gap: 7px; border: 0; border-right: 1px solid var(--console-border); border-bottom: 2px solid transparent; background: transparent; padding: 0 14px; color: var(--console-graphite-600); font-size: 12px; cursor: pointer; }
.review-tabs { display: grid; min-width: 0; grid-template-columns: repeat(6, minmax(104px, 1fr)) minmax(140px, .85fr); align-items: stretch; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--console-border); background: var(--console-surface-muted); scrollbar-width: thin; }
.review-tabs button { display: inline-flex; min-width: 0; align-items: center; justify-content: center; gap: 6px; overflow: hidden; border: 0; border-right: 1px solid var(--console-border); border-bottom: 2px solid transparent; background: transparent; padding: 0 8px; color: var(--console-graphite-600); font-size: 12px; white-space: nowrap; cursor: pointer; }
.review-tabs button[aria-selected="true"] { border-bottom-color: var(--console-cyan-600); background: var(--console-surface-raised); color: var(--console-graphite-950); font-weight: 760; }
.review-tabs button > span { min-width: 20px; border-radius: 10px; background: var(--console-graphite-100); padding: 2px 5px; font-family: var(--console-font-mono); font-size: 9px; }
.review-source { display: grid; min-width: 0; align-content: center; gap: 1px; margin-left: auto; padding: 0 14px; text-align: right; }
.review-tab-label { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-tabs .review-tab-count { min-width: 20px; flex: 0 0 auto; border-radius: 10px; background: var(--console-graphite-100); padding: 2px 5px; font-family: var(--console-font-mono); font-size: 9px; }
.review-source { display: grid; min-width: 0; align-content: center; gap: 1px; padding: 0 12px; text-align: right; }
.review-source span { color: var(--console-graphite-500); font-size: 9px; }
.review-source code { max-width: 220px; overflow: hidden; color: var(--console-graphite-700); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.review-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; }
@@ -326,5 +327,6 @@ function toolDetail(row: CaseRunReviewTraceRow) {
.diff-review { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.hardware-review { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.hwpod-review { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
@media (max-width: 820px) { .review-source { display: none; } .review-tabs button { min-width: 0; flex: 1 1 0; padding-inline: 6px; }.overview-metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); }.overview-metadata > div:nth-child(n) { grid-column: auto; border-right: 1px solid var(--console-border); border-bottom: 1px solid var(--console-border); }.overview-metadata > div:nth-child(2n) { border-right: 0; }.overview-section-body { padding-left: 16px; }.task-context { grid-template-columns: 1fr; margin-left: -16px; }.task-context div { border-right: 0; border-bottom: 1px solid var(--console-border); } .trace-toolbar { grid-template-columns: 1fr auto; }.trace-search { grid-column: 1 / -1; }.trace-list summary { grid-template-columns: 24px 38px minmax(0, 1fr) 18px; }.trace-list time { display: none; }.trace-body { padding-left: 14px; }.trace-body::before { display: none; } }
@media (max-width: 1100px) { .review-tabs { grid-template-columns: repeat(6, minmax(104px, 1fr)); }.review-source { display: none; } }
@media (max-width: 820px) { .review-tabs button { padding-inline: 6px; }.overview-metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); }.overview-metadata > div:nth-child(n) { grid-column: auto; border-right: 1px solid var(--console-border); border-bottom: 1px solid var(--console-border); }.overview-metadata > div:nth-child(2n) { border-right: 0; }.overview-section-body { padding-left: 16px; }.task-context { grid-template-columns: 1fr; margin-left: -16px; }.task-context div { border-right: 0; border-bottom: 1px solid var(--console-border); } .trace-toolbar { grid-template-columns: 1fr auto; }.trace-search { grid-column: 1 / -1; }.trace-list summary { grid-template-columns: 24px 38px minmax(0, 1fr) 18px; }.trace-list time { display: none; }.trace-body { padding-left: 14px; }.trace-body::before { display: none; } }
</style>