# 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: 排课中心筛选工具栏收紧

## Evidence

- Source visual truth: `/var/folders/yx/cq4gbk4x6w702x_slllw80mw0000gn/T/TemporaryItems/NSIRD_screencaptureui_SnOJSi/截屏2026-08-20 09.27.50.png`.
- Source dimensions: 2974 x 228 px toolbar crop captured from the existing desktop page.
- Implementation route: `http://127.0.0.1:54535/admin/schedule`.
- Implementation screenshot: `/Users/mac/.codex/visualizations/2026/08/18/01a0129d-4374-7200-b8f1-0c65ae6eebc9/schedule-search-audit/08-toolbar-after-refine.png`.
- Implementation viewport and dimensions: 1792 x 1064 CSS px at the browser capture density.
- State: authenticated operations administrator, day view, historical date `2024-07-20`, all coaches selected, latest-data shortcut visible.
- Density normalization: the source is a high-density focused toolbar crop while the implementation is a full-page browser capture. The same toolbar state was opened together for a focused structural comparison; pixel-identical scaling was not used because the requested result intentionally changes the source proportions.

## Full-View Comparison

- The shortened coach selector leaves a clear flexible gap before the latest-data shortcut and removes the visually dominant full-width dropdown.
- The toolbar remains a single row at the verified desktop viewport and preserves the existing page hierarchy, summary cards, and schedule lanes.
- The latest-data shortcut stays right-aligned and all existing interactions remain available.

## Focused Comparison

- The source crop and implementation screenshot were opened together in one comparison input.
- The day/week/list switcher, previous button, date input, next button, coach selector, and latest-data button now share a 44 px control height.
- The coach selector is capped at 360 px on wide screens, reduces to a flexible 340 px maximum below 1300 px, and becomes full-width below 700 px.

## Findings

- No actionable P0, P1, or P2 differences remain for the requested changes.
- Typography: existing application font, weight, labels, and hierarchy are preserved; no wrapping or truncation was introduced.
- Spacing and layout: the oversized coach-filter track was replaced with a bounded control while retaining 12 px toolbar gaps and bottom alignment.
- Colors and tokens: existing border, surface, focus, and brand-green tokens are unchanged.
- Image quality and assets: this toolbar contains no raster imagery or custom decorative assets; existing Lucide interface icons remain sharp.
- Copy and content: all operational labels and values are unchanged.

## Comparison History

1. Source finding: the coach dropdown consumed nearly all remaining horizontal space and the control heights appeared inconsistent.
2. Fix: added dedicated `coach-filter` and `latest-data` layout classes, capped the filter width, and normalized interactive controls to 44 px.
3. Post-fix evidence: the implementation screenshot shows a compact selector, consistent control heights, preserved right alignment, and no desktop overflow.

## Follow-up Polish

- No additional P3 changes are needed for this focused request.

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

---

# Design QA — 排课中心手机端

## 验证范围

- 页面：`/admin/schedule`
- 原始问题截图：`design-qa-mobile-source.png`
- 实现结果截图：`design-qa-mobile-implementation.png`
- 原始截图：1060 × 2070 px（按 2× 屏幕密度归一化为 530 × 1035 CSS px）
- 实现截图：530 × 1035 CSS px
- 页面状态：已登录、日视图、日期 2024-07-20
- 重点区域：首屏标题、操作按钮、筛选工具栏、提示条和运营数据卡片

## 对比与修正记录

### 第 1 轮

- P1：四项运营数据在手机端逐张纵向排列，首屏只能看到部分数据。
- P2：标题操作按钮与标题内容分列，视觉重心割裂，占用过多纵向空间。
- P2：日/周/列表、日期切换和筛选控件的换行关系不稳定，日期控件宽度不足。

修正：标题区改为单列内容与双列操作按钮；筛选工具栏改为明确的三列网格；日/周/列表与陪练筛选各自占整行；运营数据改为两列紧凑卡片，刷新时间独占整行。

### 第 2 轮

- 在 390 × 844 与 530 × 1035 两种手机视口复核，无横向页面溢出。
- 日/周视图切换可操作，按钮激活状态正常。
- 标题区按钮、日期箭头和筛选控件高度一致，触控区域不小于 40 px。
- 运营数据在首屏内完整呈现，排课泳道标题也能进入 530 px 宽设备首屏。
- 控制台错误：0。

## 忠实度与可用性检查

- 字体层级：通过；移动端标题和辅助文字已收紧，但保持原有品牌层级。
- 间距与布局：通过；首屏纵向空间明显缩短，组件间距一致。
- 颜色与状态：通过；沿用现有绿色主色、浅色背景和状态图例。
- 文案：通过；未改变任何业务文案。
- 图片质量：不适用；本次页面没有新增或修改位图资源。
- 交互：通过；日/周切换、日期导航、陪练筛选和操作按钮保持可用。
- 已知 P3：课程泳道仍允许内容区横向滚动，以保留密集排课卡片的可读宽度；页面主体本身无横向溢出。

final result: passed