Zzzz
72 lines
4.1 KiB
Markdown
72 lines
4.1 KiB
Markdown
# 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`.
|