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 — 学生只读单词列表

• source screenshot: /var/folders/yx/cq4gbk4x6w702x_slllw80mw0000gn/T/TemporaryItems/NSIRD_screencaptureui_1C51Xy/截屏2026-09-04 18.04.48.png
• implementation screenshot: /Users/mac/Desktop/编程项目/xiaoshu-angular/docs/design-qa/student-readonly-word-list-after.jpg
• viewport: 564 CSS px wide mobile view（源图为 2× 像素密度；验收图为 1×）
• tested state: 学习记录 GeneralID=853921，30 个单词，学生账号只读模式
• visual check: 内容已收进独立白色卡片；左右各保留 14px 页面间距；顶部品牌色、圆角、边框、阴影和列表分隔线与移动端现有卡片规范一致；长释义不会越界。
• interaction check: 学习记录和伴学中心均可进入只读词库；页面不出现选词、播放、跟读或开始学习按钮；无下级单元的词库会直接打开只读单词列表。

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