xiaoshu-app/design-qa.md

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