# Design QA: 21 天抗遗忘原理图

## Evidence

- Source curve truth: `/var/folders/yx/cq4gbk4x6w702x_slllw80mw0000gn/T/codex-clipboard-6e66d742-2284-4c3b-9e41-32ce655b6d0d.png` (2252 x 1452 px).
- Source module layout: `/var/folders/yx/cq4gbk4x6w702x_slllw80mw0000gn/T/TemporaryItems/NSIRD_screencaptureui_qEDcyG/截屏2026-08-10 22.18.48.png` (1008 x 514 px).
- Implementation route: `http://127.0.0.1:4202/pages/stu/stu_calendar`
- Full implementation screenshot: `/private/tmp/xiaoshu-anti-forget-background-mobile.png`
- Focused module screenshot: `/private/tmp/xiaoshu-anti-forget-background-hero.png`
- Viewport: 390 x 844 CSS px, device pixel ratio 1.
- Implementation dimensions: 390 x 844 px full view; 390 x 390 px focused module crop.
- State: authenticated student, August 2026 calendar, current date selected.
- Density normalization: both implementation captures are 1x. The source is a conceptual landscape diagram, so the focused comparison evaluates its curve relationships and hierarchy rather than pixel-identical proportions.

## Full-View Comparison

- The reference concept is contained inside the existing brand-green overview panel without changing the calendar, statistics, route, or task interactions.
- The enlarged chart preserves the mobile page hierarchy and introduces no horizontal overflow at 390 px.
- Calendar date selection was tested: selecting August 11 updated the detail heading to `8月11日周二`, and returning to August 10 restored the current selection.

## Focused Comparison

- The source module screenshot and focused implementation were opened together in one comparison input.
- The implementation reproduces the source's four essential relationships: a rapidly descending natural-forgetting curve, a rising long-term-memory curve, five increasingly spaced review curves, and vertical recovery from each intersection toward full retention.
- Twenty-one timeline nodes remain visible and animate sequentially; five review intersections have independent recovery animations.
- The chart now occupies the entire green overview as its background. The heading, completion score, curve labels, and statistics are overlaid within the same visual field; the previous inner chart frame has been removed.

## Findings

- No actionable P0, P1, or P2 differences remain.
- Typography: compact UI labels use the application's existing font stack and remain readable at the target viewport. Reference handwriting was intentionally not copied because this is an operational app chart.
- Spacing and layout: the chart fills the 390 px overview background, while the 390 px-tall module keeps the calendar immediately visible below it.
- Colors: source semantic roles are retained with brand-adjusted tokens: orange for forgetting/review decay, green for strengthened memory, and amber for review intersections.
- Image quality: the reference is recreated as responsive chart data rather than embedded as a raster image, preserving sharpness at mobile and desktop widths.
- Copy: labels use concise product language (`自然遗忘`, `长期记忆`, `复习1–5`) while preserving the reference meaning.

## Comparison History

1. Earlier implementation used a repeated sawtooth line. This did not express the source's simultaneous learning and forgetting curves.
2. Replaced the sawtooth with layered forgetting, learning, review-decay, and recovery paths; added five review intersections and a 21-day pulse timeline.
3. Post-fix evidence at 390 x 844 showed no overflow, preserved page hierarchy, and matched the reference's conceptual structure.
4. The graph was enlarged from a framed subpanel into the complete overview background; animation timing changed from a 3.8-second loop to a 12-second daily loop and a 15-second review-recovery loop.

## Follow-up Polish

- P3: Review labels are intentionally compact on 390 px screens; a future expanded chart modal could provide larger explanatory labels without making the calendar harder to reach.

final result: passed

---

# Design QA: 学习记录 AI 阅读入口

## Evidence

- Generated visual source: `/Users/mac/.codex/generated_images/019fc67f-8cbd-7212-818f-b47b09c6cf12/exec-6b9c4504-70be-4c93-bf0c-5fad48e3cdc8.png` (1774 x 887 px).
- Production asset: `/Users/mac/Desktop/编程项目/xiaoshu-angular/public/static/images/ai-reading-journey.png`.
- Implementation route: `http://127.0.0.1:4202/pages/his/his`.
- Mobile screenshot: `/private/tmp/xiaoshu-ai-reading-mobile.png` at 390 x 844 CSS px.
- Tablet screenshot: `/private/tmp/xiaoshu-ai-reading-tablet.png` at 768 x 1024 CSS px.
- Additional responsive check: 430 x 932 CSS px.
- State: authenticated student with a latest eligible learning record containing 30 words.

## Comparison

- The generated source and both implementation screenshots were inspected together in one comparison input.
- The illustration retains its intended left-side negative space and right-side learning-to-reading-to-grading story at both target sizes.
- The banner uses the existing green brand palette, 8 px container radius, restrained shadow, and the same 14 px page gutter as the calendar and record modules.
- The first viewport now explains the complete value chain: learned words, generated reading, completed answers, and AI grading.

## Behavior

- The primary CTA selects the newest learning record that contains a readable word list and sends its real `GeneralID` and words to the existing `/pages/iframe/index` workflow.
- Live verification used record `827482` with 30 words, reached the AI reading setup screen, and returned to `/pages/his/his` without changing the existing back-stack contract.
- The CTA is disabled with explanatory copy when no eligible learning record exists.

## Findings

- No horizontal overflow at 390, 430, or 768 px.
- CTA content fits inside its 44 px touch target without wrapping or clipping.
- Image loaded at its natural 1774 x 887 resolution and remained crisp after responsive cropping.
- No actionable P0, P1, or P2 visual differences remain.

final result: passed