YG_FT/design-qa.md

Training Log Detail Design QA

Evidence

• Source visual truth: docs/superpowers/specs/assets/training-log-detail-option-2.png
• Implementation screenshot: docs/superpowers/specs/assets/training-log-detail-final-expanded-1440.png
• Collapsed implementation screenshot with global surface: docs/superpowers/specs/assets/training-log-detail-global-surface-1440-v2.png
• Normalized full-view comparison: docs/superpowers/specs/assets/training-log-detail-final-comparison-normalized.png
• Focused parameter comparison: docs/superpowers/specs/assets/training-log-detail-final-comparison-params.png
• White-canvas reference: docs/superpowers/specs/assets/page-white-canvas-reference.png
• White-canvas implementation: docs/superpowers/specs/assets/model-edit-white-page-canvas-final-1440.png
• White-canvas normalized comparison: docs/superpowers/specs/assets/page-white-canvas-comparison.png
• Training-log white-canvas screenshot: docs/superpowers/specs/assets/training-log-detail-white-page-canvas-1440.png
• Self-surface list screenshot: docs/superpowers/specs/assets/fine-tune-list-self-surface-final-1440.png
• Default-canvas detail screenshot: docs/superpowers/specs/assets/training-log-detail-default-canvas-final-1440.png
• Reference/detail comparison: docs/superpowers/specs/assets/page-surface-reference-detail-comparison.png
• Create-page duplicate-surface evidence: docs/superpowers/specs/assets/fine-tune-create-double-surface-before-1440.png
• Create-page single-surface evidence: docs/superpowers/specs/assets/fine-tune-create-single-surface-final-1440.png
• Route-transition flash reference: /var/folders/nk/yks07zp14wb4rv3jqq0pt_4h0000gn/T/codex-clipboard-ea775434-828f-4bca-9714-72887faa9af9.png
• Route-transition final detail frame: docs/superpowers/specs/assets/route-transition-detail-final.png
• Viewport: 1440 × 1024; comparison content normalized to 1200 × 800 after removing the existing 240px sidebar and 60px header from the implementation capture.
• State: finance-sft-001, completed, mock data loaded, training parameters expanded.

Full-view comparison

The implementation preserves the selected two-column hierarchy: task and dataset information occupy the wide left track, runtime facts use the narrow right rail, and training parameters continue as a full-width disclosure section. The selected mock omitted the product shell, so the comparison intentionally crops the existing sidebar and header rather than treating them as design drift.

The global product mode now uses two intentional surface modes. Form and detail routes render inside one #ffffff page canvas with 16px radius and 24px content padding. List routes that already own a white table/card surface render that surface directly on the #f3f5f8 application background, avoiding a redundant white layer.

Required fidelity surfaces

• Fonts and typography: Existing system font stack is preserved. Heading, label, value, and muted-copy hierarchy match the selected direction; output model uses body-level contrast after iteration 1, and all “未配置” values use #64748b on white after iteration 2.
• Spacing and layout rhythm: 24px main gap, 16px section gap, 12px surface radius, and light row separators match the selected composition. The existing application shell reduces usable content width, but normalized proportions remain aligned.
• Colors and tokens: Indigo accent, Slate text, success status, #f3f5f8 page background, and white content surfaces are consistent with the current product.
• Image and icon fidelity: The screen contains no raster imagery. Existing Font Awesome icons are retained to match the repository's icon system; no placeholder, emoji, CSS drawing, or handcrafted SVG was introduced.
• Copy and content: Task name, status, model, date, duration, dataset metadata, storage, SFT, LoRA, and missing-value copy match the selected design and actual mock data.

Interaction and responsive checks

• Parameter disclosure changed from aria-expanded="false" to true after activation, and the expanded content became visible.
• At 1000px viewport width, the overview changed to one column and the document had no horizontal overflow.
• At 700px viewport width, dataset metrics and parameter rows changed to one column and the document had no horizontal overflow.
• Browser console: no errors. One existing Element Plus el-link underline deprecation warning was emitted by the login flow and is unrelated to this page.

Comparison history

Iteration 1 — blocked

• [P2] The implementation added a visible “基础训练参数” heading that did not exist in the selected mock, creating extra vertical space.
• [P2] “暂未生成” was styled too faintly compared with the selected design.

Fixes:

• Removed the redundant visible base-parameter heading while retaining an accessible region label.
• Restored body-level contrast for “暂未生成”.

Post-fix evidence:

• docs/superpowers/specs/assets/training-log-detail-final-comparison-normalized.png
• docs/superpowers/specs/assets/training-log-detail-final-comparison-params.png

Iteration 2 — blocked

• [P2] “未配置” values used #94a3b8 on white, below WCAG AA contrast for 14px text.

Fix:

• Updated muted values to #64748b; the regression check now calculates the contrast ratio and requires at least 4.5:1.

Post-fix evidence:

• Browser computed color: rgb(100, 116, 139).
• Browser console: no errors.

Iteration 3 — passed

No actionable P0/P1/P2 differences remain. The retained P3 difference is that the generated mock does not include the real product sidebar/header; this is an intentional constraint because the existing shell is shared by every page.

Iteration 4 — clarified global page canvas, passed

• [P1] The earlier interpretation left the route content directly on the gray layout background and only made individual cards white. The clarified reference requires a single white page canvas behind every route.

Fixes:

• Split the shell and page tokens into --app-shell-bg: #f3f5f8 and --app-page-bg: #ffffff.
• Added one global .page-canvas around every route in MainLayout.vue.
• Added 16px outer gutter, 16px canvas radius, 24px canvas padding, and a subtle canvas shadow.
• Flattened a route-root PageCard to prevent a duplicate large card layer.

Post-fix evidence:

• docs/superpowers/specs/assets/page-white-canvas-comparison.png
• Browser computed canvas: white background, 16px radius, 24px padding; outer shell: rgb(243, 245, 248).
• Both the model-edit page and training-log page render inside the same global white canvas without horizontal overflow.

Iteration 5 — corrected list-page surface ownership, passed

• [P1] Applying the white page canvas to every route created a redundant layer on list pages because DataTablePage, model evaluation, and model management already provide their own white root card.

Fixes:

• Added explicit pageSurface: 'self' metadata to each self-surfaced list route: model tuning, model evaluation, model inference, model management, data processing, and dataset management.
• Added .page-canvas.is-self-surface to remove the outer canvas padding, radius, background, and shadow only for those routes.
• Preserved the default white canvas for training-log, create, edit, preview, chat, and result routes.

Post-fix evidence:

• docs/superpowers/specs/assets/fine-tune-list-self-surface-final-1440.png
• docs/superpowers/specs/assets/training-log-detail-default-canvas-final-1440.png
• docs/superpowers/specs/assets/page-surface-reference-detail-comparison.png
• Browser computed list state: transparent outer canvas, 0px padding/radius, no shadow; white 12px-radius list card on rgb(243, 245, 248) shell.
• Browser computed detail state: white outer canvas, 24px padding, 16px radius, subtle shadow.
• Both states have no horizontal overflow and no console errors at 1440 × 900.

Iteration 6 — flattened wrapped root PageCard, passed

• [P1] The training-task creation route wraps its root PageCard in .fine-tune-create. The earlier selector only matched a PageCard directly under .page-canvas, so this page retained a second white background, 12px radius, and card shadow.

Fixes:

• Added an explicit .page-card-host marker to the training-task creation route root; the layout flattens only a directly rendered root PageCard or a PageCard inside that explicit host.
• Root PageCard now uses a transparent background, 0px radius, no shadow, and no bottom margin while preserving its header/body layout.
• Kept the selector excluded from .is-self-surface, so list cards retain their own white background, 12px radius, and shadow.
• Rejected a generic one-level descendant selector because it would also match the training-log parameter card.

Post-fix evidence:

• docs/superpowers/specs/assets/fine-tune-create-double-surface-before-1440.png
• docs/superpowers/specs/assets/fine-tune-create-single-surface-final-1440.png
• Browser computed create-page root card: transparent background, 0px radius, no shadow; outer canvas remains white with 24px padding.
• Browser computed list-page card remains white with 12px radius and subtle shadow on a transparent outer canvas.
• Browser computed training-log parameter card remains white with 12px radius and subtle shadow, confirming that internal business cards are not flattened.
• Both pages have no horizontal overflow; create-page console has no errors.

Iteration 7 — removed page-level opacity transition, passed

• [P1] When navigating from a self-surface list to a default-canvas secondary page, route.meta.pageSurface changed immediately while the old list remained for the 150ms out-in leave animation. The result was a semi-transparent old list rendered inside the new white canvas.

Fixes:

• Removed the page-level Vue transition wrapper from MainLayout.vue.
• Removed the .fade-enter-* and .fade-leave-* opacity rules.
• Preserved local component animations such as dialogs, disclosures, and the selected-row batch bar.

Post-fix evidence:

• Source flash frame: /var/folders/nk/yks07zp14wb4rv3jqq0pt_4h0000gn/T/codex-clipboard-ea775434-828f-4bca-9714-72887faa9af9.png.
• Final detail frame: docs/superpowers/specs/assets/route-transition-detail-final.png.
• Immediate state after list → create: old list absent, route-root opacity 1, zero .fade-* transition elements, correct default canvas.
• Immediate state after create → list: old create page absent, route-root opacity 1, zero .fade-* transition elements, correct self-surface canvas.
• Immediate state after list → training log: old list absent, route-root opacity 1, zero .fade-* transition elements, correct default canvas.
• All three paths had no horizontal overflow; browser console had no errors.

Build evidence gap

The type-check script now uses project-reference mode (vue-tsc -b --noEmit) so it no longer reports a false pass. npm run type-check and npm run build remain blocked by pre-existing TypeScript errors in src/mock/adapter.ts, FineTuneCreateView.vue, and FineTuneListView.vue; no remaining error points to TrainingLogView.vue or the page-surface files. npx vite build succeeds, proving the updated UI bundles for production.

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

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

---

Dataset Version Actions Design QA

Evidence

• Source visual truth: /Users/caoxiaozhu/.codex/generated_images/019f5e2e-3bee-77f0-b285-89ef139db56c/exec-48a163b6-d4c9-4646-9199-135957c6e72e.png
• Historical-version implementation: /Users/caoxiaozhu/.codex/visualizations/2026/07/14/019f5e2e-3bee-77f0-b285-89ef139db56c/dataset-version-build/implementation-historical-version-final.png
• Delete-confirm implementation: /Users/caoxiaozhu/.codex/visualizations/2026/07/14/019f5e2e-3bee-77f0-b285-89ef139db56c/dataset-version-build/implementation-delete-confirm.png
• Full-view comparison: /Users/caoxiaozhu/.codex/visualizations/2026/07/14/019f5e2e-3bee-77f0-b285-89ef139db56c/dataset-version-build/comparison-full.png
• Focused version-control comparison: /Users/caoxiaozhu/.codex/visualizations/2026/07/14/019f5e2e-3bee-77f0-b285-89ef139db56c/dataset-version-build/comparison-version-controls-final.png
• Viewport: 1316 × 768 browser window; source crop normalized for the focused comparison.
• State: authenticated dataset detail, V3 current, V2 selected as a read-only historical version.

Full-view comparison

The existing product shell, dataset summary, version selector, read-only alert, file toolbar, and sample table remain unchanged. The former standalone primary action has been replaced by one compact rounded-square overflow button at the far right of the version-control row, matching the selected hierarchy.

Focused comparison and required fidelity surfaces

• Fonts and typography: existing system/PingFang stack, 13px labels, 12px metadata, and Element Plus menu text are preserved.
• Spacing and layout rhythm: the 40px overflow trigger aligns with the version selector and leaves the central status copy flexible; the 168px menu provides 40px action rows.
• Colors and visual tokens: the existing indigo primary token is used for the activate icon; the delete item and confirmation action use the danger token.
• Image and icon fidelity: no new raster assets are needed. Existing Font Awesome ellipsis, check-circle, and trash icons match the repository's icon system.
• Copy and content: the menu contains exactly “设为当前版本” and “删除版本”, separated visually; the confirmation names V2 and explains that current V3 is unaffected.

Interaction checks

• Created V2 and V3 through the real edit-and-save flow, then switched from current V3 to historical V2.
• Historical records became read-only and the overflow trigger appeared; current V3 showed no history-operation trigger.
• Opening the trigger exposed exactly two accessible menu items: “设为当前版本” and “删除版本”.
• Choosing “删除版本” opened the danger confirmation dialog; cancelling returned focus without deleting data.
• Actual deletion behavior, protected-version rejection, optimistic-lock handling, and non-reused version numbers are covered by test:dataset-preview.

Comparison history

Iteration 1 — blocked

• [P2] The overflow trigger was circular while the selected mock used a small rounded square.
• [P2] The menu did not explicitly lock its target width or primary-action icon color.

Fixes:

• Replaced the circular trigger with a 40px square and 10px radius.
• Set the menu minimum width to 168px, action height to 40px, and the activate icon to the product primary color.

Iteration 2 — passed

No actionable P0/P1/P2 differences remain. The desktop capture API does not retain the transient popup layer in screenshots, so the open-menu labels were additionally verified through the accessibility tree; exact popup shadow rendering remains a non-blocking P3 capture gap.

final result: passed

---

Login Page Responsive Design QA

Evidence

• Source visual truth: /Users/caoxiaozhu/.codex/generated_images/019f5f3f-f7e1-7e41-9605-ea307d9f09e6/exec-d376c603-0c47-45ad-86fd-3e99c1a95ec7.png
• Implementation route: http://localhost:6801/login
• Implementation screenshot: unavailable because the in-app browser runtime could not initialize in this session.
• Intended desktop viewport: 1536 × 1024.
• Intended laptop viewports: 1366 × 768 and 1280 × 720.
• State: unauthenticated login page, default username and password populated.

Static and automated evidence

• Added a 1440px width breakpoint that shifts the split from 58/42 to 55/45 and caps the form at 440px.
• Added a short-screen breakpoint for heights up to 820px that reduces title, form, input, footer, and panel spacing without hiding the left visual.
• Kept the single-column fallback at 900px and below.
• regression-login-layout.mjs: passed.
• regression-default-dashboard.mjs: passed.
• vue-tsc -b --noEmit: passed.
• Vite dev transform for LoginView.vue: HTTP 200.
• Production build: blocked by the pre-existing missing route component UserPermissionView.vue, outside the login-page change.

Required fidelity surfaces

• Fonts and typography: code uses the existing product font stack with laptop-specific display-size reductions; visual comparison remains unavailable.
• Spacing and layout rhythm: dedicated width and height media queries are present; rendered measurements remain unavailable.
• Colors and visual tokens: existing indigo tokens and the selected dark-purple visual asset are preserved.
• Image quality and asset fidelity: the generated login-hero-flow.png is used directly; the official logo.png is reused for the brand lockup.
• Copy and content: platform title, supporting copy, form labels, actions, and footer match the selected design.

Findings

• [P2] Browser-rendered laptop comparison unavailable Location: login page at 1366 × 768 and 1280 × 720. Evidence: the in-app browser runtime failed during initialization, so no implementation screenshot or side-by-side comparison could be captured. Impact: static checks cannot prove that all visible spacing and crop details match the selected design at laptop sizes. Fix: capture both laptop viewports in a working in-app browser session, compare them with the source, and resolve any remaining P0/P1/P2 differences.

Comparison history

Iteration 1 — blocked

• User reported that the initial implementation was optimized for large displays and did not compose well on laptop screens.
• Added explicit laptop-width and short-screen layout rules and passed targeted regression/type checks.
• Post-fix visual evidence remains unavailable because browser capture is blocked.

final result: blocked