# 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.