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

fix: restore CaseRun run history layout

Browse Source
This commit is contained in:
root
2026-07-25 05:47:55 +02:00
parent 6b92685c31
commit d77eb42c57
2 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/hwlab-cloud-web/scripts/caserun-review-ui-contract.test.ts
+2
View File
@@ -10,6 +10,8 @@ test("CaseRun uses the bounded three-tab review workspace", () => {
assert.doesNotMatch(view, /PageCommandBar/u);
assert.match(view, /<CaseRunReviewPane/u);
assert.match(view, /class="run-actions"/u);
assert.match(view, /:data-mode="sidebarTab"/u);
assert.match(view, /grid-template-rows: minmax\(0, 1fr\) 34px/u);
assert.match(view, /<StatusStrip[^>]*class="caserun-status-footer"/u);
assert.match(reviewPane, /label: "Trace"/u);
assert.match(reviewPane, /label: "Diff"/u);
web/hwlab-cloud-web/src/views/caserun/CaseRunView.vue
+13 -8
View File
@@ -83,7 +83,10 @@ onMounted(async () => {
await Promise.all([caserun.refreshCases(), caserun.refreshRuns()]);
if (!selectedCaseId.value) selectedCaseId.value = caserun.cases[0]?.caseId ?? "";
if (runId.value) await loadRun(runId.value);
pollTimer = setInterval(() => { if (caserun.shouldPoll) void caserun.refreshRun(); }, 5000);
pollTimer = setInterval(() => {
if (caserun.shouldPoll) void caserun.refreshRun();
if (caserun.runsError) void caserun.refreshRuns();
}, 5000);
});
onBeforeUnmount(() => { if (pollTimer !== null) clearInterval(pollTimer); });
@@ -165,7 +168,7 @@ function artifactSize(bytes?: number): string { return Number.isFinite(bytes) ?
<template>
<section class="caserun-page" id="caserun-page">
<div class="caserun-workspace">
<aside class="caserun-sidebar" aria-label="CaseRun 运行入口">
<aside class="caserun-sidebar" :data-mode="sidebarTab" aria-label="CaseRun 运行入口">
<header class="pane-heading"><div><span>运行入口</span><strong>{{ sidebarTab === "runs" ? "最近运行" : "可执行用例" }}</strong></div><b>{{ sidebarTab === "runs" ? caserun.runs.length : caserun.cases.length }}</b></header>
<div class="sidebar-tabs" role="tablist" aria-label="运行入口标签">
<button type="button" role="tab" :aria-selected="sidebarTab === 'runs'" @click="sidebarTab = 'runs'"><History :size="14" aria-hidden="true" />最近运行</button>
@@ -251,13 +254,15 @@ function artifactSize(bytes?: number): string { return Number.isFinite(bytes) ?
</template>
<style scoped>
.caserun-page { display: grid; height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr) 40px; overflow: hidden; color: var(--console-graphite-950); }
.caserun-page { display: grid; height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr) 34px; overflow: hidden; color: var(--console-graphite-950); }
.icon-button { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid var(--console-border); border-radius: 4px; background: var(--console-surface-raised); color: var(--console-graphite-600); cursor: pointer; }
.icon-button:hover { border-color: var(--console-cyan-400); color: var(--console-cyan-700); }
.caserun-origin { display: inline-flex; height: 30px; align-items: center; gap: 6px; border: 1px solid var(--console-border); border-radius: 4px; background: var(--console-surface-muted); padding: 0 8px; color: var(--console-cyan-700); font-family: var(--console-font-mono); font-size: 9px; }
.caserun-workspace { display: grid; min-height: 0; grid-template-columns: minmax(220px, 260px) minmax(480px, 1fr) minmax(260px, 300px); overflow: hidden; border-inline: 1px solid var(--console-border); background: var(--console-surface-raised); }
.caserun-sidebar, .caserun-inspector { display: grid; min-width: 0; min-height: 0; overflow: hidden; background: var(--console-surface-muted); }
.caserun-sidebar { grid-template-rows: 50px 42px minmax(0, 1fr) auto; border-right: 1px solid var(--console-border); }
.caserun-sidebar { border-right: 1px solid var(--console-border); }
.caserun-sidebar[data-mode="runs"] { grid-template-rows: 50px 42px auto minmax(0, 1fr); }
.caserun-sidebar[data-mode="cases"] { grid-template-rows: 50px 42px minmax(0, 1fr) auto; }
.caserun-inspector { grid-template-rows: 50px 39px minmax(0, 1fr) auto; border-left: 1px solid var(--console-border); }
.pane-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--console-border); padding: 8px 12px; }
.pane-heading > div { display: grid; gap: 2px; }
@@ -268,7 +273,7 @@ function artifactSize(bytes?: number): string { return Number.isFinite(bytes) ?
.sidebar-tabs button, .inspector-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--console-graphite-500); font-size: 10px; cursor: pointer; }
.sidebar-tabs button[aria-selected="true"], .inspector-tabs button[aria-selected="true"] { border-bottom-color: var(--console-cyan-600); background: var(--console-surface-raised); color: var(--console-graphite-900); font-weight: 760; }
.inspector-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
.run-lookup { display: grid; grid-column: 1 / -1; grid-template-columns: 15px minmax(0, 1fr) auto; align-items: center; gap: 6px; margin: 7px; border: 1px solid var(--console-border); border-radius: 4px; background: white; padding: 4px 4px 4px 8px; color: var(--console-graphite-500); }
.run-lookup { display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; align-items: center; gap: 6px; margin: 7px; border: 1px solid var(--console-border); border-radius: 4px; background: white; padding: 4px 4px 4px 8px; color: var(--console-graphite-500); }
.run-lookup input { min-width: 0; border: 0; outline: 0; font-family: var(--console-font-mono); font-size: 9px; }
.run-lookup button { border: 0; border-radius: 3px; background: var(--console-cyan-700); padding: 5px 7px; color: white; font-size: 9px; }
.run-list, .case-list { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 7px 7px; }
@@ -312,9 +317,9 @@ function artifactSize(bytes?: number): string { return Number.isFinite(bytes) ?
.event-details { margin-top: 14px; border-top: 1px solid var(--console-border); padding-top: 10px; }.event-details summary { color: var(--console-graphite-600); font-size: 10px; cursor: pointer; }.event-details ol { display: grid; margin: 8px 0 0; padding: 0; list-style: none; }.event-details li { display: grid; gap: 2px; border-bottom: 1px solid var(--console-border); padding: 7px 0; font-size: 9px; }.event-details time { color: var(--console-graphite-500); font-family: var(--console-font-mono); font-size: 8px; }
.pane-empty { padding: 18px 8px; color: var(--console-graphite-500); font-size: 10px; line-height: 1.5; }
.caserun-inspector footer { border-top: 1px solid var(--console-border); padding: 9px 12px; color: var(--console-graphite-500); font-size: 9px; line-height: 1.4; }
.caserun-status-footer { border-radius: 0 0 4px 4px; box-shadow: none; }
.caserun-status-footer :deep(.console-status-item) { min-height: 40px; padding: 4px 10px; }
.caserun-status-footer :deep(dt) { font-size: 8px; }.caserun-status-footer :deep(dd) { font-size: 11px; }
.caserun-status-footer { position: relative; z-index: 2; border-top: 1px solid var(--console-graphite-300); border-radius: 0 0 4px 4px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 76%); }
.caserun-status-footer :deep(.console-status-item) { min-height: 33px; padding: 2px 10px; }
.caserun-status-footer :deep(dt) { font-size: 7px; }.caserun-status-footer :deep(dd) { font-size: 10px; line-height: 1.05; }
@media (max-width: 1180px) { .caserun-workspace { grid-template-columns: 220px minmax(440px, 1fr) 260px; } }
@media (max-width: 860px) { .caserun-workspace { grid-template-columns: 190px minmax(0, 1fr); } .caserun-inspector { display: none; } .caserun-origin { display: none; } }
@media (max-width: 620px) { .caserun-page { grid-template-rows: minmax(0, 1fr) auto; } .caserun-workspace { display: flex; overflow-y: auto; flex-direction: column; } .caserun-sidebar { min-height: 240px; flex: 0 0 240px; border-right: 0; border-bottom: 1px solid var(--console-border); } .caserun-main { min-height: 620px; flex: 0 0 620px; }.run-heading { padding-inline: 9px; }.run-heading code { max-width: 48vw; }.caserun-status-footer { overflow-x: auto; }.caserun-status-footer :deep(.console-status-item) { min-width: 90px; } }