feat: 看板细节优化与设计走查补充

DashboardView 调整窄屏布局与卡片展示，回归脚本补充断言，新增窄屏看板设计截图并更新视觉走查记录。

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

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;/, '服务看板页面画布应约束在可用视口内')
 

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;
     }
   }
 }