docs: 添加设计文档与视觉走查记录
视觉走查记录、设计方案规格（specs）、实施计划（plans）及配套截图资产，覆盖路由过渡、页面表层级、数据处理向导、训练日志重设计等改进项。
This commit is contained in:
caoxiaozhu
160
design-qa.md
Normal file
160
design-qa.md
Normal file
@@ -0,0 +1,160 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user