feat: 新增服务看板页面

实现 Dashboard 看板视图并将应用默认入口由调优改为看板,路由、侧边栏默认菜单与登录跳转同步调整;侧边栏增加导航失败高亮校正,布局与 ECharts 注册柱状图适配看板,补充两份回归脚本、设计走查记录与五张设计截图。
This commit is contained in:
caoxiaozhu
2026-07-11 14:49:37 +08:00
parent ddf47eb8fe
commit cc113db1aa
15 changed files with 1013 additions and 11 deletions

View File

@@ -158,3 +158,123 @@ The `type-check` script now uses project-reference mode (`vue-tsc -b --noEmit`)
Design-QA final result: passed
final result: passed
---
# Service Dashboard Design QA
## Evidence
- Source visual truth: `docs/superpowers/specs/assets/service-dashboard-approved-1440.png`
- Browser-rendered implementation: `docs/superpowers/specs/assets/service-dashboard-implementation-1440.png`
- Viewport: 1440 × 1024
- State: authenticated `admin` user on `/dashboard`; service dashboard navigation active; 7-day chart visible; four training tasks visible.
## Full-view comparison
The implementation preserves the approved composition: the product shell stays intact, the service dashboard is the active navigation item, the platform-health summary spans the top, the grouped training chart occupies the wide middle track, service health occupies the narrow track, and the training-task table spans the bottom. The three bar series, dual axes, dates, values, service counts, task names, statuses, progress, accuracy, and actions match the selected mock.
A separate focused crop was not required because both source and implementation evidence are full-resolution desktop captures at a readable scale; the chart labels, axis units, service rows, and every task-table column are legible in the full-view comparison.
## Required fidelity surfaces
- Fonts and typography: the existing Inter/system/PingFang stack is retained. Heading, section title, metric, table header, and muted-copy weights and sizes match the selected direction.
- Spacing and layout rhythm: 24px page padding, 14px section gaps, 10px panel radii, light separators, and the wide-chart/narrow-status grid preserve the selected hierarchy. The implementation uses the repository's 240px sidebar and 60px header exactly.
- Colors and visual tokens: white page canvas, `#f3f5f8` shell, indigo `#4f46e5`, green `#10b981`, amber `#f59e0b`, red `#ef4444`, and slate text are aligned with the source and current product tokens.
- Image and icon fidelity: the page contains no decorative raster imagery. The supplied product logo is preserved and existing Font Awesome icons are used consistently; no emoji, handcrafted SVG, placeholder image, or CSS illustration was introduced.
- Copy and content: dashboard title, health summary, chart legend and units, service states, task names, task status, model names, progress, accuracy, timestamps, and action labels match the approved design.
## Interaction and runtime checks
- Login with the existing `admin` credentials navigated to `/dashboard`, confirming the requested default entry behavior.
- ECharts rendered one canvas; hovering 07/10 exposed the tooltip values: training count 18, GPU count 7, and average accuracy 91%.
- “查看全部任务” navigated to `/fine-tune` and browser back restored `/dashboard`.
- The first “查看详情” action navigated to `/training-log/103942` and browser back restored `/dashboard`.
- Browser console errors: none.
- `npm run test:default-dashboard`: passed.
- `npm run test:dashboard`: passed.
- `npx vite build`: passed.
## Comparison history
### Iteration 1 — passed
No actionable P0/P1/P2 differences remain. The only intentional product constraint is that the sidebar active background follows the repository's current neutral active token instead of the slightly bluer tint produced by ImageGen; location, contrast, label, and active-state clarity remain equivalent.
## Validation gap
`npm run type-check` remains blocked by pre-existing TypeScript errors in the mock adapter, dataset mock typing, data-process list, evaluation tabs, and fine-tune views. No reported error points to `DashboardView.vue`, the ECharts registration, router defaults, login redirect, or dashboard regression scripts. The direct Vite production build succeeds.
Design-QA final result: passed
final result: passed
## Compact dashboard revision
- User annotation reference: `/var/folders/nk/yks07zp14wb4rv3jqq0pt_4h0000gn/T/codex-clipboard-43f63327-063f-47da-9e96-31b53cebc49d.png`
- Revised implementation screenshot: `docs/superpowers/specs/assets/service-dashboard-compact-1440.png`
- Viewport: 1440 × 1024
- State: authenticated dashboard, compact layout, redundant title/action row removed.
### Iteration 2 — passed
The annotated header row containing the duplicate “服务看板” title, subtitle, and “查看告警” action was removed entirely. Section gaps, overview height, health icon, metric type, chart height, service rows, task heading, and task rows were reduced by roughly 10%15%. The result preserves chart labels, dual-axis readability, service-state text, task progress, accuracy, and all task actions while bringing the primary content closer to the top of the page.
- ECharts tooltip remains functional after the height reduction and reports all three 07/10 series values.
- The revised page contains no browser console errors.
- The full-resolution comparison makes the removed annotation target and the compact replacement legible; no focused crop is necessary.
- `npm run test:dashboard`, `npm run test:default-dashboard`, and `npx vite build` pass.
Design-QA final result: passed
final result: passed
## One-screen dashboard revision
- User annotation reference: `/var/folders/nk/yks07zp14wb4rv3jqq0pt_4h0000gn/T/codex-clipboard-3c166ffc-7243-4e57-94fc-48949599c4f1.png`
- Revised implementation screenshot: `docs/superpowers/specs/assets/service-dashboard-one-screen-1440x768.png`
- Viewport: 1440 × 768
- State: authenticated dashboard with the desktop low-height compact rules active.
### Iteration 3 — passed
The platform-status block was reduced again, including its container padding, inner gap, health icon, status copy, metric labels, and metric values. The chart, service rows, task rows, and page-canvas padding now use a dedicated `max-height: 900px` desktop mode. The dashboard page canvas is constrained to the available application viewport so the outer content area does not introduce a vertical scrollbar.
Browser measurements at 1440 × 768:
- document overflow: false
- layout-content overflow: false
- page-canvas overflow: false
- dashboard overflow: false
- task section bottom: 653px within the 768px viewport
- ECharts tooltip: passed with all three series present
- 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
## Flexible middle-region revision
- User annotation reference: `/var/folders/nk/yks07zp14wb4rv3jqq0pt_4h0000gn/T/codex-clipboard-daf2bbae-baea-418d-9962-7d0e1a1c219b.png`
- Revised implementation screenshot: `docs/superpowers/specs/assets/service-dashboard-flex-middle-1440x900.png`
- Viewport: 1440 × 900
- State: authenticated dashboard with flexible middle-region growth.
### Iteration 4 — passed
The previous fixed-height middle row caused unused white space beneath the task table on taller screens. The dashboard now reserves compact intrinsic height for the platform summary and task table while allowing the chart/service row to consume all remaining viewport height. The ECharts canvas grows with that row, and the service-state rows distribute across the matching height.
Browser measurements:
- at 1440 × 768, chart height: 283px; no document, layout, canvas, or dashboard overflow
- at 1440 × 900, chart height: 415px; no document, layout, canvas, or dashboard overflow
- task table bottom at 1440 × 900: 868px within the 900px viewport
- ECharts tooltip: passed with all three series present
- 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