dcjxb.microservice/docs/superpowers/plans/2026-05-13-report-header-center-outlook-compact.md

Report Header Center And Outlook Compact Layout Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Center the repeated report header middle column visually and make outlook report module one compact enough for the four analysis cards to fit on the first page.

Architecture: Keep report templates as the source of visual CSS and mirror critical header layout overrides inside DefaultPlaywrightPdfWorker so Chromium's native header template matches HTML previews. Tighten only outlook module-one card spacing and chart dimensions; do not change report data or achievement report body layout.

Tech Stack: HTML/CSS templates, Java renderer tests, Playwright Java PDF generation, PDFBox text extraction, JUnit 5, AssertJ.

---

File Map

• Modify abilities/exam-sprint/infrastructure/src/main/resources/templates/achievement-exam-sprint-report-template.html: header column widths.
• Modify abilities/exam-sprint/infrastructure/src/main/resources/templates/outlook-exam-sprint-report-template.html: header column widths and compact module-one card CSS.
• Modify abilities/exam-sprint/infrastructure/src/main/java/cn/yunzhixue/ability/center/examsprint/infrastructure/report/pdf/DefaultPlaywrightPdfWorker.java: native header template column-width override.
• Modify abilities/exam-sprint/infrastructure/src/test/java/cn/yunzhixue/ability/center/examsprint/infrastructure/report/rendering/achievement/ClasspathAchievementExamSprintReportRendererTest.java: header CSS assertions.
• Modify abilities/exam-sprint/infrastructure/src/test/java/cn/yunzhixue/ability/center/examsprint/infrastructure/report/rendering/outlook/ClasspathOutlookExamSprintReportRendererTest.java: header and compact card CSS assertions.
• Modify abilities/exam-sprint/infrastructure/src/test/java/cn/yunzhixue/ability/center/examsprint/infrastructure/report/pdf/PlaywrightExamSprintReportPdfGeneratorTest.java: PDF first-page module-one assertion.

Task 1: Header Centering CSS

• Write failing renderer assertions that .header-logo, .header-main, and .header-generated-at all use width: 33.3333% in both achievement and outlook templates.
• Run renderer tests and verify failure.
• Update both templates and PDF header override to force equal-width columns.
• Run renderer tests and verify pass.

Task 2: Outlook Module-One Compact Cards

• Write failing outlook renderer assertions for compact CSS: .analysis-table row spacing 10px, .card padding 14px, .card min-height 275px, .chart-box height 160px, and tighter .data-text line-height.
• Run outlook renderer test and verify failure.
• Update outlook template CSS only.
• Run outlook renderer test and verify pass.

Task 3: PDF First-Page Coverage

• Write failing PDF test that renders a complex outlook report and asserts page 1 text contains all four module-one card titles: 考纲词汇掌握情况, 真题试卷词汇掌握情况, 常考词汇掌握情况, 词频区间掌握度.
• Run the PDF test and verify failure before compact CSS.
• After Task 2 implementation, run the PDF test and verify pass.

Task 4: Verification

• Run mvn -pl abilities/exam-sprint/infrastructure -am test.
• Confirm BUILD SUCCESS and zero failures.
• Review diff for only intended layout, tests, and plan changes.