From d0e71f2aa902d8c194b12442aa1474a6a1d59b6e Mon Sep 17 00:00:00 2001 From: Zzzz Date: Tue, 28 Apr 2026 20:15:47 +0800 Subject: [PATCH] uiux --- .../spec/frontend/component-guidelines.md | 17 +++- .../check.jsonl | 6 ++ .../implement.jsonl | 6 ++ .../04-28-sidebar-layout-management-ux/prd.md | 87 ++++++++++++++++++ .../task.json | 26 ++++++ .../webapp/WEB-INF/jsp/admin/users/manage.jsp | 15 ++-- src/main/webapp/WEB-INF/jsp/books/catalog.jsp | 8 +- src/main/webapp/WEB-INF/jsp/books/manage.jsp | 8 +- .../webapp/WEB-INF/jsp/common/header.jspf | 89 +++++++------------ src/main/webapp/WEB-INF/jsp/dashboard.jsp | 1 - .../webapp/WEB-INF/jsp/readers/manage.jsp | 25 ++++-- src/main/webapp/static/css/app.css | 63 ------------- 12 files changed, 206 insertions(+), 145 deletions(-) create mode 100644 .trellis/tasks/04-28-sidebar-layout-management-ux/check.jsonl create mode 100644 .trellis/tasks/04-28-sidebar-layout-management-ux/implement.jsonl create mode 100644 .trellis/tasks/04-28-sidebar-layout-management-ux/prd.md create mode 100644 .trellis/tasks/04-28-sidebar-layout-management-ux/task.json diff --git a/.trellis/spec/frontend/component-guidelines.md b/.trellis/spec/frontend/component-guidelines.md index 1f8afbe..1a5ae5d 100644 --- a/.trellis/spec/frontend/component-guidelines.md +++ b/.trellis/spec/frontend/component-guidelines.md @@ -18,8 +18,8 @@ the reusable UI units. sidebar, footer, pagination, and message banners. - 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. + and owns the dark sidebar, top utility bar, module navigation, global search, + user display, and logout link. - Any `.jspf` fragment that contains user-visible Simplified Chinese text must declare `<%@ page pageEncoding="UTF-8" %>` at the top. Do not rely only on the including JSP page or response `Content-Type`; Tomcat/Jasper can otherwise @@ -31,6 +31,19 @@ the reusable UI units. links stay inside `sessionScope.userRole == 'administrator'`; staff links stay inside `administrator or librarian`; reader-only links stay inside `sessionScope.userRole == 'reader'`. +- For active navigation in forwarded JSPs, derive the current location from the + public Servlet path before falling back to the JSP servlet path. Use exact + matches or slash-delimited prefixes; do not use broad `fn:contains` checks + against `requestURI`, because forwarded pages expose `/WEB-INF/jsp/...` paths + and can activate unrelated sidebar items. + + ```jsp + + + + + + ``` - Keep fragments presentation-focused. They should not open database connections or call DAOs. diff --git a/.trellis/tasks/04-28-sidebar-layout-management-ux/check.jsonl b/.trellis/tasks/04-28-sidebar-layout-management-ux/check.jsonl new file mode 100644 index 0000000..f921ee5 --- /dev/null +++ b/.trellis/tasks/04-28-sidebar-layout-management-ux/check.jsonl @@ -0,0 +1,6 @@ +{"file": ".trellis/spec/frontend/index.md", "reason": "Frontend stack and checklist for final review."} +{"file": ".trellis/spec/frontend/component-guidelines.md", "reason": "Check JSP fragments, role-conditioned navigation, Chinese copy, and reusable UI patterns."} +{"file": ".trellis/spec/frontend/state-management.md", "reason": "Check session/request state usage remains server-rendered and safe."} +{"file": ".trellis/spec/frontend/type-safety.md", "reason": "Check JSP/Servlet display contracts and safe EL/JSTL rendering."} +{"file": ".trellis/spec/frontend/quality-guidelines.md", "reason": "Check navigation, layout, accessibility, and JSP/CSS architecture quality."} +{"file": ".trellis/tasks/archive/2026-04/00-bootstrap-guidelines/research/project-requirements.md", "reason": "Check the change preserves the agreed JSP + Servlet + Tomcat stack."} diff --git a/.trellis/tasks/04-28-sidebar-layout-management-ux/implement.jsonl b/.trellis/tasks/04-28-sidebar-layout-management-ux/implement.jsonl new file mode 100644 index 0000000..a6fbd13 --- /dev/null +++ b/.trellis/tasks/04-28-sidebar-layout-management-ux/implement.jsonl @@ -0,0 +1,6 @@ +{"file": ".trellis/spec/frontend/index.md", "reason": "Frontend stack and checklist for JSP/CSS implementation."} +{"file": ".trellis/spec/frontend/component-guidelines.md", "reason": "Shared JSP fragment, role-conditioned navigation, Simplified Chinese copy, form, table, and CSS conventions."} +{"file": ".trellis/spec/frontend/state-management.md", "reason": "Server-rendered request/session state conventions while using session role data in navigation."} +{"file": ".trellis/spec/frontend/type-safety.md", "reason": "JSP/Servlet display contracts and safe EL/JSTL rendering constraints."} +{"file": ".trellis/spec/frontend/quality-guidelines.md", "reason": "Frontend verification expectations for navigation, layout, accessibility, and JSP/CSS boundaries."} +{"file": ".trellis/tasks/archive/2026-04/00-bootstrap-guidelines/research/project-requirements.md", "reason": "Project stack constraints for JSP, Servlet, MySQL, and Tomcat."} diff --git a/.trellis/tasks/04-28-sidebar-layout-management-ux/prd.md b/.trellis/tasks/04-28-sidebar-layout-management-ux/prd.md new file mode 100644 index 0000000..c1a6331 --- /dev/null +++ b/.trellis/tasks/04-28-sidebar-layout-management-ux/prd.md @@ -0,0 +1,87 @@ +# Sidebar Active State And Management UX Cleanup + +## Goal + +Fix several visible JSP/CSS navigation and layout issues in the authenticated library-management UI, and reduce confusion between reader profile management and user account management without changing the backend data model. + +## What I Already Know + +* The application is a Java 11 Maven WAR using JSP, Servlet, JSTL, CSS, and Tomcat. +* Authenticated navigation lives in `src/main/webapp/WEB-INF/jsp/common/header.jspf`. +* Sidebar active state currently uses `fn:contains(currentUri, ...)`, but rendered JSP paths can differ from public servlet paths after `RequestDispatcher.forward`. +* This explains reported false positives and false negatives: + * `/catalog` can render through `/WEB-INF/jsp/books/catalog.jsp`, causing the books nav item to look active. + * `/book-categories` renders through `/WEB-INF/jsp/books/categories.jsp`, causing books to look active while categories may not. + * `/reports` renders `reports/dashboard.jsp`, which can make dashboard/workbench look active. + * `/admin/system-logs` renders `maintenance/system-logs.jsp`, so the system log item may not activate. +* The catalog, book management, and reader management hero sections put eyebrow/title/body/actions directly under a flex container; pages that wrap text in a child `
` avoid the horizontal layout break. +* `dashboard.jsp` contains the small technical sentence the user wants removed. +* `ReaderManagementServlet` manages reader profiles/eligibility/contact/borrowing limits; `UserManagementServlet` manages login accounts/roles/active status. These are overlapping concepts to users but distinct backend workflows. + +## Requirements + +* Sidebar active state must be based on the original public servlet path, not the forwarded JSP path. +* Only the matching sidebar item should be active for catalog, books, book categories, reports, and system logs. +* Remove the sidebar "角色工作台" block. +* Remove the sidebar "工作台" nav item. +* Move "报表中心" to the top of the main module navigation for administrator/librarian roles. +* Fix the header/hero layout on catalog, book management, and reader management so eyebrow/title/description stay grouped vertically. +* Remove the dashboard sentence: `登录后进入 Dashboard，会话仅保存安全的 AuthenticatedUser 快照、角色代码与权限代码集合。` +* Reduce the perceived duplication between reader management and user management using conservative UI changes: + * Treat reader management as reader profile/borrowing eligibility management. + * Treat user management as account/role/login status management. + * Prefer clearer labels, descriptions, and cross-links over merging backend flows. + +## Acceptance Criteria + +* [x] Opening `/catalog` highlights only "馆藏检索". +* [x] Opening `/books` highlights only "图书管理". +* [x] Opening `/book-categories` highlights only "图书分类管理". +* [x] Opening `/reports` highlights only "报表中心" and does not highlight "工作台". +* [x] Opening `/admin/system-logs` highlights "系统日志". +* [x] The sidebar no longer displays the role workbench cards or a "工作台" nav item. +* [x] "报表中心" appears before catalog/books/readers/borrowing for administrator/librarian navigation. +* [x] Catalog, book management, and reader management hero copy is vertically grouped and does not lay out as separate horizontal items. +* [x] The dashboard technical session sentence is absent. +* [x] Reader/user management labels and descriptions make the distinction between reader profiles and user accounts clearer. +* [x] Maven verification passes or the closest available build command is reported. + +## Definition Of Done + +* Focused JSP/CSS changes only unless a backend change is required by verification. +* Existing Servlet/JSP rendering and JSTL escaping behavior remains intact. +* Maven build/test verification run where available. +* Trellis quality check completed before final response. + +## Technical Approach + +* In `header.jspf`, derive a `currentPath` from `requestScope['javax.servlet.forward.servlet_path']` with a fallback to `pageContext.request.servletPath`. +* Replace broad `fn:contains` checks with exact or prefix checks against public servlet paths. +* Reorder and trim sidebar markup according to the requested information architecture. +* Wrap catalog/book/reader hero text in a child `
` to match pages that already render correctly. +* Remove only the requested dashboard small text, leaving role-specific workbench headings and metrics intact. +* Use copy changes and cross-links to clarify reader profiles versus user accounts without changing controllers, entities, DAOs, or database schema. + +## Out Of Scope + +* Merging reader and user management into a single page. +* Changing authentication, authorization, database schema, or service-layer behavior. +* Redesigning the whole dashboard or adding new frontend libraries. + +## Technical Notes + +* Relevant frontend spec index: `.trellis/spec/frontend/index.md`. +* Relevant files inspected: + * `src/main/webapp/WEB-INF/jsp/common/header.jspf` + * `src/main/webapp/WEB-INF/jsp/dashboard.jsp` + * `src/main/webapp/WEB-INF/jsp/books/catalog.jsp` + * `src/main/webapp/WEB-INF/jsp/books/manage.jsp` + * `src/main/webapp/WEB-INF/jsp/books/categories.jsp` + * `src/main/webapp/WEB-INF/jsp/readers/manage.jsp` + * `src/main/webapp/WEB-INF/jsp/admin/users/manage.jsp` + * `src/main/webapp/static/css/app.css` +* Build command from README: `mvn clean package`; fallback path documented as `/home/sjy/.sdkman/candidates/maven/current/bin/mvn clean package` if `mvn` is not on `PATH`. +* Verification on 2026-04-28: + * `git diff --check` passed. + * Search for removed sidebar role/workbench and old active-state patterns returned no matches. + * `/home/sjy/.sdkman/candidates/maven/current/bin/mvn clean package` passed with `BUILD SUCCESS`. diff --git a/.trellis/tasks/04-28-sidebar-layout-management-ux/task.json b/.trellis/tasks/04-28-sidebar-layout-management-ux/task.json new file mode 100644 index 0000000..2165bee --- /dev/null +++ b/.trellis/tasks/04-28-sidebar-layout-management-ux/task.json @@ -0,0 +1,26 @@ +{ + "id": "sidebar-layout-management-ux", + "name": "sidebar-layout-management-ux", + "title": "修复侧边栏高亮与管理页布局优化", + "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": {} +} \ No newline at end of file diff --git a/src/main/webapp/WEB-INF/jsp/admin/users/manage.jsp b/src/main/webapp/WEB-INF/jsp/admin/users/manage.jsp index 00965bb..7fa3c27 100644 --- a/src/main/webapp/WEB-INF/jsp/admin/users/manage.jsp +++ b/src/main/webapp/WEB-INF/jsp/admin/users/manage.jsp @@ -6,7 +6,7 @@ - 用户管理 - MZH 图书馆 + 用户账户管理 - MZH 图书馆 @@ -14,11 +14,14 @@
-

系统管理

-

管理用户

-

创建、更新、停用和查看管理员、馆员与读者账户。

+

系统账户

+

用户账户与角色

+

维护登录账户、角色、密码和启用状态；读者联系方式、借阅上限和资格请在读者管理中处理。

+
+
+ 新增用户账户 + 读者档案
- 新增用户
@@ -32,7 +35,7 @@
-
+
diff --git a/src/main/webapp/WEB-INF/jsp/books/catalog.jsp b/src/main/webapp/WEB-INF/jsp/books/catalog.jsp index 061a0ed..9ce8745 100644 --- a/src/main/webapp/WEB-INF/jsp/books/catalog.jsp +++ b/src/main/webapp/WEB-INF/jsp/books/catalog.jsp @@ -13,9 +13,11 @@ <%@ include file="/WEB-INF/jsp/common/header.jspf" %>
-

馆藏

-

馆藏检索

-

按图书编号、书名、作者或分类检索馆藏。

+
+

馆藏

+

馆藏检索

+

按图书编号、书名、作者或分类检索馆藏。

+
diff --git a/src/main/webapp/WEB-INF/jsp/books/manage.jsp b/src/main/webapp/WEB-INF/jsp/books/manage.jsp index 5a87003..2f146c1 100644 --- a/src/main/webapp/WEB-INF/jsp/books/manage.jsp +++ b/src/main/webapp/WEB-INF/jsp/books/manage.jsp @@ -13,9 +13,11 @@ <%@ include file="/WEB-INF/jsp/common/header.jspf" %>
-

图书管理

-

管理图书

-

创建、更新、删除和查看馆藏记录的库存信息。

+
+

图书管理

+

管理图书

+

创建、更新、删除和查看馆藏记录的库存信息。

+
新增图书 分类 diff --git a/src/main/webapp/WEB-INF/jsp/common/header.jspf b/src/main/webapp/WEB-INF/jsp/common/header.jspf index 7500f14..e2e0e00 100644 --- a/src/main/webapp/WEB-INF/jsp/common/header.jspf +++ b/src/main/webapp/WEB-INF/jsp/common/header.jspf @@ -4,83 +4,56 @@
- + + + +
当前登录 diff --git a/src/main/webapp/WEB-INF/jsp/readers/manage.jsp b/src/main/webapp/WEB-INF/jsp/readers/manage.jsp index 29f86ef..c550eef 100644 --- a/src/main/webapp/WEB-INF/jsp/readers/manage.jsp +++ b/src/main/webapp/WEB-INF/jsp/readers/manage.jsp @@ -6,17 +6,24 @@ - 读者管理 - MZH 图书馆 + 读者档案 - MZH 图书馆 <%@ include file="/WEB-INF/jsp/common/header.jspf" %>
-

读者管理

-

管理读者

-

创建、更新和查看读者资格及联系方式记录。

- 新增读者 +
+

读者档案

+

读者档案与借阅资格

+

维护读者资料、联系方式、借阅上限和借阅资格；登录账户、角色和启用状态请在用户管理中处理。

+
+
+ 新增读者档案 + + 管理登录账户 + +
@@ -30,7 +37,7 @@
-
+
@@ -68,10 +75,10 @@
-

读者记录

+

读者档案

-

没有符合当前筛选条件的读者记录。

+

没有符合当前筛选条件的读者档案。
@@ -81,7 +88,7 @@ 读者编号 姓名 联系方式 - 关联账户 + 关联登录账户 借阅上限 状态 操作 diff --git a/src/main/webapp/static/css/app.css b/src/main/webapp/static/css/app.css index fb496e8..f6990ee 100644 --- a/src/main/webapp/static/css/app.css +++ b/src/main/webapp/static/css/app.css @@ -133,69 +133,6 @@ textarea { white-space: nowrap; } -.role-workbench { - display: grid; - gap: 8px; - margin-top: 22px; - padding: 0 0 16px; - border-bottom: 1px solid rgba(148, 163, 184, 0.14); -} - -.sidebar-section-title { - grid-column: 1 / -1; - margin: 0 0 10px; - padding: 0 12px; - color: #91a2bd; - font-size: 13px; - font-weight: 700; -} - -.role-chip { - min-height: 44px; - display: grid; - grid-template-columns: minmax(0, 1fr); - gap: 2px; - align-items: center; - padding: 9px 11px; - border-radius: 7px; - color: #ffffff; - text-decoration: none; - box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16); -} - -.role-chip-copy { - min-width: 0; - display: grid; - gap: 2px; -} - -.role-chip strong { - overflow: hidden; - line-height: 1.1; - text-overflow: ellipsis; - white-space: nowrap; -} - -.role-chip small { - overflow: hidden; - color: rgba(255, 255, 255, 0.82); - font-size: 11px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.role-chip-admin { - background: linear-gradient(135deg, #316cf4, #1f57d8); -} - -.role-chip-librarian { - background: linear-gradient(135deg, #4db7ad, #278f87); -} - -.role-chip-reader { - background: linear-gradient(135deg, #ffac48, #f08a24); -} - .side-nav { display: grid; gap: 6px;