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.

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.

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.

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.

Earlier implementation used a repeated sawtooth line. This did not express the source's simultaneous learning and forgetting curves.
Replaced the sawtooth with layered forgetting, learning, review-decay, and recovery paths; added five review intersections and a 21-day pulse timeline.
Post-fix evidence at 390 x 844 showed no overflow, preserved page hierarchy, and matched the reference's conceptual structure.
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.

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

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.

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.

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.

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