# Desktop App design QA

## Comparison target

- Source visual truth: `C:\Users\david\AppData\Local\Temp\codex-clipboard-72c4b101-58e8-44b0-81b4-01abc35a29e6.png`
- Implementation screenshot: `test-results/app-home.png`
- Full-view viewport: 420 × 820 CSS px at device scale factor 1; implementation image is 420 × 820 px.
- Source image: 144 × 343 px. It shows only a narrow icon rail, whereas the implementation contains the requested complete desktop workbench.
- State: logged-in light theme, default “全部” project scope, one pending task and one completed task.
- Interaction checks: default task board, task edit modal,资料 panel, AI panel, and profile dropdown. Console errors: none.

## Evidence

- Full implementation: `test-results/app-home.png`
- Focused icon-rail comparison: `test-results/design-qa-rail-comparison.png`
  - Left: the source’s 75 × 343 px rail crop.
  - Right: the implementation’s 58 × 820 px right rail, normalized to 75 × 343 px.

The focused comparison is intentionally rail-only because the source does not provide a full workbench layout. The implementation places the rail on the right as requested, rather than copying the source’s left placement.

## Findings

No actionable P0, P1, or P2 findings.

- Fonts and typography: the application uses the existing Inter / Microsoft YaHei stack. Small rail labels remain legible at the 420 px target width and task titles retain stronger hierarchy.
- Spacing and layout rhythm: the 48 px header, 46 px project strip, scrollable content column, and 58 px rail leave the task content unobscured. No horizontal overflow was observed.
- Colors and visual tokens: neutral rail, blue selection, green completion, and muted metadata provide equivalent compact navigation contrast to the source while preserving the product’s existing Arco blue token.
- Image and icon fidelity: the existing product icon is retained; all navigation controls use the installed Arco icon system. No placeholder or hand-drawn visual assets were introduced.
- Copy and content: project scope, task state, profile menu, and submenus use the requested Chinese product language.

## Follow-up polish

- [P3] The source has four tall unlabeled icon slots; the implementation has six compact labeled slots because it must expose the requested project views. If the list grows further, group secondary views under “更多”.

## Implementation checklist

- [x] Align desktop API fields and request payloads with `web_v1`.
- [x] Add theme toggle and user dropdown with profile editing and logout.
- [x] Add project scope strip with 全部, previous/next, and create controls.
- [x] Move project submenu navigation to the right rail.
- [x] Make pending and completed tasks the default editable content.
- [x] Verify primary panels and interaction states.

final result: passed