前端风格更改

.trellis/tasks/04-28-frontend-reference-redesign/prd.md

@@ -0,0 +1,71 @@
+# brainstorm: Redesign Frontend From Reference Image
+
+## Goal
+
+Refactor the JSP/CSS frontend so the library-management application visually matches the provided dashboard reference as closely as practical while preserving existing Servlet/JSP behavior, routes, role-based navigation, forms, tables, and Simplified Chinese interface copy.
+
+## What I Already Know
+
+* The user wants the frontend rebuilt to imitate the attached reference image as closely as possible.
+* The reference image is a Chinese library management dashboard with a dark left sidebar, white top bar, dense white card panels, blue primary actions, rounded statistics cards, table sections, and operational shortcut tiles.
+* The application is a JSP + Servlet + Maven WAR project, not a React/Vue SPA.
+* Existing frontend files live under `src/main/webapp/WEB-INF/jsp/` with shared CSS in `src/main/webapp/static/css/app.css`.
+* Current shared header fragment is `src/main/webapp/WEB-INF/jsp/common/header.jspf`.
+* Existing pages include dashboard, login, catalog, book management, reader management, borrowing, reports, system logs, and user management JSPs.
+* Frontend spec requires image-first implementation and Simplified Chinese display copy.
+
+## Assumptions
+
+* "Frontend" means the shared visual system across JSP pages, with the dashboard receiving the closest match because the reference image is a dashboard screenshot.
+* The redesign should keep current endpoints, request parameter names, JSTL conditions, and server-rendered data contracts unchanged.
+* New CSS classes and JSP structure are allowed when they improve visual fidelity, but no new frontend framework should be introduced.
+* The reference image should be stored with the task for implementation/check agents.
+
+## Open Questions
+
+* Confirm scope: apply the reference style across the whole JSP frontend, not only the dashboard page.
+
+## Requirements
+
+* Build a left dark sidebar similar to the reference, including brand/title, role workbench buttons, module navigation, and compact footer/menu area.
+* Build a top utility bar similar to the reference, including breadcrumb/location text, search field, notification/avatar/user controls where appropriate.
+* Restyle the dashboard as a dense admin workspace with:
+  * Large white dashboard shell.
+  * Four metric cards with colored icon blocks and month-over-month text.
+  * Search/filter panel.
+  * Ranking/chart-like panel matching the screenshot's simple blue bar chart look.
+  * Recent borrowing table and overdue table.
+  * Book-management table.
+  * Shortcut cards for reader management, report center, borrowing circulation, and system logs.
+* Restyle shared tables, forms, buttons, badges, panels, empty states, and navigation so secondary pages feel consistent with the reference.
+* Preserve existing JSP/Servlet behavior and role-based visibility.
+* Keep user-visible copy in Simplified Chinese.
+* Keep responsive behavior usable on narrower screens.
+
+## Acceptance Criteria
+
+* [ ] Dashboard layout visibly matches the reference image's structure, spacing, palette, and density.
+* [ ] Shared navigation changes are reflected across existing JSP pages without breaking role-based links.
+* [ ] Existing forms and tables remain functional and readable after the redesign.
+* [ ] No React/Vue/SPA tooling is introduced.
+* [ ] Maven build succeeds.
+
+## Definition Of Done
+
+* Tests/build run where available.
+* JSP/CSS changes reviewed against frontend specs and the reference image.
+* Task context files are curated for implement/check agents.
+* Any reusable convention learned during the work is considered for spec update.
+
+## Out Of Scope
+
+* Backend behavior changes.
+* Database schema changes.
+* Replacing JSP with a JavaScript framework.
+* Exact live charting libraries unless needed; a CSS/HTML approximation is acceptable for this visual refactor.
+
+## Technical Notes
+
+* Reference image copied to `.trellis/tasks/04-28-frontend-reference-redesign/research/reference-dashboard.png`.
+* Visual notes are recorded in `.trellis/tasks/04-28-frontend-reference-redesign/research/reference-dashboard-visual-notes.md`.
+* Relevant spec index: `.trellis/spec/frontend/index.md`.