# 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_LIT86c/截屏2026-08-20 12.44.07.png`.
- Source dimensions: 3052 × 384 px；内容为调整前的四张独立运营指标卡。
- Implementation route: `http://127.0.0.1:54535/admin/dashboard`.
- Desktop implementation screenshot: `/private/tmp/xiaoshu-dashboard-desktop.png`.
- Mobile implementation screenshot: `/private/tmp/xiaoshu-dashboard-mobile.png`.
- Focused implementation crop: `/private/tmp/xiaoshu-dashboard-summary-desktop.png`.
- Side-by-side comparison: `/private/tmp/xiaoshu-dashboard-comparison.png`.
- Viewports: 1440 × 900 CSS px and 390 × 844 CSS px, device pixel ratio 1.
- Focused implementation dimensions: 1082 × 94 px；桌面运营摘要实际 CSS 尺寸为 1082 × 94。
- State: authenticated operations manager, weekly trend selected, realtime scheduling source available.
- Density normalization: source crop resized to the focused implementation width and vertically centered；对比的是信息密度与层级，调整后结构按用户要求有意不再保持四卡布局。

## Full-View Comparison

- 调整前四张大卡片与折线图重复展示课程、学员、陪练和工资；调整后独立卡片区已移除，核心数据进入同一运营总览容器。
- 桌面端在 1128 px 主内容宽度内形成单行摘要；页面宽度与视口同为 1440 px，没有横向页面溢出。
- 手机端摘要为两列布局，页面宽度与视口同为 390 px；折线图保留 720 px 可滑动内容宽度，不挤压页面主体。

## Focused Comparison

- 对照图左侧为四张旧指标卡，右侧为新的紧凑运营摘要和趋势标题。
- 所选日期、排课节数、学员人数、在岗陪练和预估工资按照“日期上下文 → 当日业务 → 人力与成本”的顺序排列。
- 在岗陪练与工资仍保留可点击入口；课程与学员数字由当前折线点驱动，不再单独重复。

## Findings

- No actionable P0, P1, or P2 differences remain.
- Fonts and typography: 沿用管理后台现有中文字体栈与字重；数字、标签、辅助信息层级清晰，在 390 px 下无截断或非预期换行。
- Spacing and layout rhythm: 桌面摘要高度从四张 144 px 大卡片收敛为 94 px；手机端形成 1 个日期上下文区和 2 × 2 指标网格，间距与分隔线一致。
- Colors and visual tokens: 延续绿色排课、蓝色学员、琥珀陪练和玫红工资语义色；背景、边框、圆角和焦点色与现有后台一致。
- Image quality and asset fidelity: 本次无新增位图资产；箭头继续使用项目 Lucide 图标，折线保持矢量 SVG 清晰度。
- Copy and content: 标题改为“运营数据总览”，说明文案明确覆盖排课、学员、人力与工资；数据源状态和日期范围仍保留。
- Accessibility: 摘要链接具有业务化 aria-label；周/月/年可操作；折线点保留键盘焦点、左右键和 Enter/Space 操作。

## Interaction And Responsive Verification

- 周视图：7 个每日数据点，今日选择状态正确。
- 月视图：在线数据成功返回并切换。
- 年视图：在线数据按天返回 232 个数据点，可横向滑动。
- 在岗陪练和本月预估工资链接保持可导航。
- 桌面与手机控制台错误：0。
- 管理后台专项测试：124 项通过；工作台聚焦测试：3 项通过。

## Comparison History

1. Earlier state: 四张独立指标卡占据大量首屏空间，并与折线图中的课程和学员数据重复。
2. First fix: 删除独立指标卡，将五项摘要放入趋势容器顶部，并让课程、学员随选中数据点变化。
3. Visual review finding: 在岗陪练链接前出现一段多余引号文本。
4. Final fix: 清除模板中的多余文本，重新在 1440 × 900 和 390 × 844 捕获；无页面横向溢出、无控制台错误，摘要为预期四项业务指标加日期上下文。

## Follow-up Polish

- P3: 年视图包含较多每日数据点，当前通过横向滑动查看；未来可增加月份快速定位，但不影响本次运营总览目标。

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