前端风格更改

2026-04-28 16:40:13 +08:00
parent 3efcb394fb
commit 89b6dd1f85
10 changed files with 1453 additions and 334 deletions
@@ -16,8 +16,14 @@ the reusable UI units.

 - Use shared fragments for repeated layout pieces such as header, navigation,
  sidebar, footer, pagination, and message banners.
- Prefer `.jspf` includes or JSP tag files once the project chooses one
-  pattern; document the actual paths after implementation.
+- Use `.jspf` includes for the current JSP presentation layer. The authenticated
+  application frame lives in `src/main/webapp/WEB-INF/jsp/common/header.jspf`
+  and owns the dark sidebar, top utility bar, role workbench links, module
+  navigation, global search, user display, and logout link.
+- Preserve role-conditioned navigation in that shared frame: administrator-only
+  links stay inside `sessionScope.userRole == 'administrator'`; staff links stay
+  inside `administrator or librarian`; reader-only links stay inside
+  `sessionScope.userRole == 'reader'`.
 - Keep fragments presentation-focused. They should not open database
  connections or call DAOs.

@@ -0,0 +1,6 @@
+{"file": ".trellis/spec/frontend/index.md", "reason": "Frontend JSP/CSS stack and checklist for review."}
+{"file": ".trellis/spec/frontend/component-guidelines.md", "reason": "Review shared JSP fragments, forms, tables, navigation, and Chinese copy."}
+{"file": ".trellis/spec/frontend/quality-guidelines.md", "reason": "Review visual fidelity to image-first workflow and forbidden patterns."}
+{"file": ".trellis/spec/frontend/state-management.md", "reason": "Verify server-rendered state and existing data flow remain intact."}
+{"file": ".trellis/spec/frontend/type-safety.md", "reason": "Verify display contracts and validation handling remain safe."}
+{"file": ".trellis/tasks/04-28-frontend-reference-redesign/research/reference-dashboard-visual-notes.md", "reason": "Compare implementation against extracted visual requirements."}
@@ -0,0 +1,8 @@
+{"file": ".trellis/spec/frontend/index.md", "reason": "Frontend JSP/CSS stack and pre-development checklist for this redesign."}
+{"file": ".trellis/spec/frontend/directory-structure.md", "reason": "JSP and static asset organization constraints."}
+{"file": ".trellis/spec/frontend/component-guidelines.md", "reason": "Shared JSP fragment, form, table, navigation, and Chinese copy conventions."}
+{"file": ".trellis/spec/frontend/quality-guidelines.md", "reason": "Image-to-JSP restoration quality bar and forbidden patterns."}
+{"file": ".trellis/spec/frontend/hook-guidelines.md", "reason": "Confirms no React/Vue hook conventions should be introduced."}
+{"file": ".trellis/spec/frontend/state-management.md", "reason": "Server-rendered request/session/form state conventions to preserve."}
+{"file": ".trellis/spec/frontend/type-safety.md", "reason": "JSP/Servlet validation and JavaBean display contract constraints."}
+{"file": ".trellis/tasks/04-28-frontend-reference-redesign/research/reference-dashboard-visual-notes.md", "reason": "Visual requirements extracted from the provided reference image."}
@@ -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`.
@@ -0,0 +1,53 @@
+# Reference Dashboard Visual Notes
+
+## Source
+
+Reference image: `.trellis/tasks/04-28-frontend-reference-redesign/research/reference-dashboard.png`
+
+Original accessible path during planning: `/mnt/d/qq/聊天文件/2535624881/nt_qq/nt_data/Pic/2026-04/Ori/ab6d1035bac12c469acaffea0e6db1c8.png`
+
+## Overall Layout
+
+* Full application frame with a fixed-width dark navy sidebar on the left and a light gray workspace on the right.
+* Sidebar width is about 250 px in the reference. It contains the system name at top, role workbench buttons, module navigation links, and a compact menu icon near the bottom.
+* Main area has a white top bar with breadcrumb text on the left and search, notification, avatar, role label, and dropdown affordance on the right.
+* Content area uses a light gray page background with white cards, small border radius, subtle shadows, and dense spacing.
+
+## Palette And Typography
+
+* Sidebar: very dark navy gradient or solid dark blue-black.
+* Primary action blue: medium royal blue.
+* Secondary accent colors: teal, orange, purple, red, and green for icon/stat/status accents.
+* Cards: white with light gray borders and soft shadows.
+* Text: dark slate/near black for headings, gray for helper copy and metadata.
+* Typography is compact, Chinese UI oriented, and dashboard-like rather than marketing-like.
+
+## Dashboard Structure
+
+* Top hero panel starts with "管理员工作台" heading and short explanatory copy.
+* Four statistic cards in one row:
+  * 馆藏总量
+  * 在借数量
+  * 逾期数量
+  * 读者总数
+* Middle area:
+  * Left: 馆藏检索 form with two-column labels/inputs/select and blue search button plus reset button.
+  * Right: 热门图书排行 bar chart with blue vertical bars and small labels.
+* Table area:
+  * 借阅流通 recent records table.
+  * 逾期列表 pending overdue table.
+  * 图书管理 book list table.
+* Bottom/right shortcut tiles:
+  * 读者管理
+  * 报表中心
+  * 借阅流通
+  * 系统日志
+
+## Interaction And Reuse Targets
+
+* Preserve existing links and routes in navigation.
+* Sidebar active/hover states should use blue filled pills.
+* Role workbench entries should be prominent colored pills near the top of the sidebar.
+* Tables should be compact with subtle row separators and badge-like statuses.
+* Forms should use compact inputs with borders and clear focus states.
+* Existing JSP pages can reuse shared classes for panels, toolbar forms, tables, badges, action links, and cards.
@@ -0,0 +1,26 @@
+{
+  "id": "frontend-reference-redesign",
+  "name": "frontend-reference-redesign",
+  "title": "brainstorm: 仿照参考图重构前端",
+  "description": "",
+  "status": "in_progress",
+  "dev_type": null,
+  "scope": null,
+  "package": null,
+  "priority": "P2",
+  "creator": "Zzzz",
+  "assignee": "Zzzz",
+  "createdAt": "2026-04-28",
+  "completedAt": null,
+  "branch": null,
+  "base_branch": "master",
+  "worktree_path": null,
+  "commit": null,
+  "pr_url": null,
+  "subtasks": [],
+  "children": [],
+  "parent": null,
+  "relatedFiles": [],
+  "notes": "",
+  "meta": {}
+}