diff --git a/design-qa.md b/design-qa.md index c7bfb6c..46cdf43 100644 --- a/design-qa.md +++ b/design-qa.md @@ -278,3 +278,50 @@ Browser measurements: Design-QA final result: passed final result: passed + +## Narrow service-status revision + +- User request: make the right-hand service-status panel slightly narrower. +- Revised implementation screenshot: `docs/superpowers/specs/assets/service-dashboard-narrow-service-1440x900.png` +- Viewports: 1440 × 900 and 1440 × 768 +- State: authenticated dashboard with the service-status column reduced to approximately 30% of the middle row. + +### Iteration 5 — passed + +The middle grid now allocates `1.9fr` to the training chart and `0.82fr` to service status, with a 300px minimum width for the service panel. This gives the chart more horizontal space while keeping all service names, status badges, and instance counts fully visible. + +Browser measurements: + +- at 1440 × 900, chart width: 799px; service width: 345px; service share: 30.1% +- at 1440 × 768, chart width: 799px; service width: 345px +- clipped service cells: none at both tested viewports +- horizontal and vertical document overflow: none at both tested viewports +- browser console errors: none +- `npm run test:dashboard`, `npm run test:default-dashboard`, and `npx vite build`: passed + +Design-QA final result: passed + +final result: passed + +## Taller training-task revision + +- User request: increase the training-task region slightly and shorten the middle chart/service region. +- Source visual truth: `docs/superpowers/specs/assets/service-dashboard-narrow-service-1440x900.png` plus the current user annotation. +- Intended viewports: 1440 × 900 and 1440 × 768. +- State: authenticated dashboard with larger task heading and table rows. + +### Iteration 6 — blocked + +The task section now uses a taller heading and table rows in both standard and low-height desktop modes. Because the middle row is the only flexible region, the additional task height is taken directly from the chart/service row while preserving the one-screen layout contract in code. + +Verification evidence: + +- `npm run test:dashboard`: passed +- `npm run test:default-dashboard`: passed +- `npx vite build`: passed +- browser-rendered comparison: blocked because the in-app browser rejected the local preview URL under its URL security policy +- implementation screenshot: unavailable for this iteration + +Design-QA final result: blocked + +final result: blocked diff --git a/docs/superpowers/specs/assets/service-dashboard-narrow-service-1440x900.png b/docs/superpowers/specs/assets/service-dashboard-narrow-service-1440x900.png new file mode 100644 index 0000000..4902618 Binary files /dev/null and b/docs/superpowers/specs/assets/service-dashboard-narrow-service-1440x900.png differ diff --git a/frontend/scripts/regression-dashboard.mjs b/frontend/scripts/regression-dashboard.mjs index 15724a9..1c43f08 100644 --- a/frontend/scripts/regression-dashboard.mjs +++ b/frontend/scripts/regression-dashboard.mjs @@ -41,9 +41,13 @@ assert.doesNotMatch(dashboardSource, /class=["']dashboard-heading["']/, '服务 assert.doesNotMatch(dashboardSource, /查看告警/, '服务看板不应保留冗余的顶部告警按钮') assert.match(dashboardSource, /\.dashboard-view\s*\{[\s\S]*?gap:\s*10px;/, '服务看板应使用紧凑的区块间距') assert.match(dashboardSource, /\.dashboard-middle\s*\{[\s\S]*?flex:\s*1 1 auto;[\s\S]*?min-height:\s*0;/, '中间区域应弹性占满剩余高度') +assert.match(dashboardSource, /grid-template-columns:\s*minmax\(0,\s*1\.9fr\)\s*minmax\(300px,\s*0\.82fr\);/, '服务状态列应收窄,为训练图表释放更多宽度') assert.match(dashboardSource, /\.training-chart\s*\{[\s\S]*?flex:\s*1 1 auto;[\s\S]*?height:\s*auto;[\s\S]*?min-height:\s*230px;/, '训练统计图应随可用空间自动拉伸') assert.match(dashboardSource, /@media\s*\(max-height:\s*900px\)[\s\S]*?\.training-chart\s*\{[\s\S]*?min-height:\s*200px;/, '较矮桌面视口应保留图表最小可读高度') assert.match(dashboardSource, /\.service-table\s*\{[\s\S]*?grid-template-rows:[^;]*repeat\(4,\s*minmax\(48px,\s*1fr\)\)/, '服务状态行应随中间区域同步拉伸') +assert.match(dashboardSource, /\.tasks-heading\s*\{[\s\S]*?min-height:\s*32px;[\s\S]*?padding:\s*0 14px 10px;/, '训练任务标题区应适当加高') +assert.match(dashboardSource, /\.tasks-table\s*\{[\s\S]*?th,\s*td\s*\{[\s\S]*?height:\s*42px;[\s\S]*?th\s*\{[\s\S]*?height:\s*36px;/, '训练任务表格行应适当加高') +assert.match(dashboardSource, /@media\s*\(max-height:\s*900px\)[\s\S]*?\.tasks-heading\s*\{[\s\S]*?min-height:\s*28px;[\s\S]*?padding:\s*0 12px 8px;[\s\S]*?\.tasks-table\s*\{[\s\S]*?height:\s*36px;[\s\S]*?th\s*\{[\s\S]*?height:\s*32px;/, '低高度桌面视口也应提高训练任务占比') assert.match(mainLayoutSource, /\.layout-content:has\(\.dashboard-view\)[\s\S]*?overflow-y:\s*hidden;/, '服务看板容器应避免产生页面纵向滚动条') assert.match(mainLayoutSource, /\.page-canvas\s*\{[\s\S]*?flex:\s*1 1 auto;[\s\S]*?overflow:\s*hidden;/, '服务看板页面画布应约束在可用视口内') diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue index 419e75e..bd40f1f 100644 --- a/frontend/src/views/dashboard/DashboardView.vue +++ b/frontend/src/views/dashboard/DashboardView.vue @@ -428,7 +428,7 @@ function viewTask(task: DashboardTask) { .dashboard-middle { display: grid; - grid-template-columns: minmax(0, 1.65fr) minmax(330px, 0.95fr); + grid-template-columns: minmax(0, 1.9fr) minmax(300px, 0.82fr); flex: 1 1 auto; gap: 10px; min-height: 0; @@ -546,13 +546,13 @@ function viewTask(task: DashboardTask) { } .tasks-section { - padding: 10px 0 0; + padding: 12px 0 0; overflow: hidden; } .tasks-heading { - min-height: 30px; - padding: 0 14px 8px; + min-height: 32px; + padding: 0 14px 10px; } .tasks-table-wrap { @@ -569,7 +569,7 @@ function viewTask(task: DashboardTask) { th, td { - height: 38px; + height: 42px; padding: 6px 10px; border-top: 1px solid #eef2f7; text-align: left; @@ -578,7 +578,7 @@ function viewTask(task: DashboardTask) { } th { - height: 34px; + height: 36px; background: #f8fafc; color: #475569; font-weight: 600; @@ -703,23 +703,23 @@ function viewTask(task: DashboardTask) { } .tasks-section { - padding-top: 6px; + padding-top: 8px; } .tasks-heading { - min-height: 24px; - padding: 0 12px 6px; + min-height: 28px; + padding: 0 12px 8px; } .tasks-table { th, td { - height: 32px; + height: 36px; padding: 4px 8px; } th { - height: 30px; + height: 32px; } } }