前端

chore: record journal
chore(task): archive 04-28-remove-redundant-actions-add-cn-data
2026-04-28 22:08:36 +08:00 · 2026-04-28 21:38:08 +08:00 · 2026-04-28 21:38:04 +08:00 · 2026-04-28 21:35:26 +08:00 · 2026-04-28 20:57:31 +08:00 · 2026-04-28 20:16:59 +08:00
71 changed files with 3430 additions and 441 deletions
@@ -630,6 +630,14 @@ reports/dashboard.jsp <- ReportServlet <- ReportService <- ReportDao <- books/re
 - `users.username`: unique login identifier submitted by `LoginServlet`.
 - `users.password_hash`: PBKDF2 hash in
  `pbkdf2_sha256$iterations$saltBase64$hashBase64` format.
+- Local scaffold demo users must have documented, known initial passwords for
+  new deployments: `admin/admin123`, `librarian/librarian123`, and
+  `reader/reader123`. Their `schema.sql` hashes must verify through
+  `PasswordHasher.verify` and must be treated as local/demo-only credentials,
+  never production credentials.
+- `schema.sql` uses `INSERT IGNORE` for demo `users` rows. Replaying the schema
+  must not be assumed to reset existing account passwords; README reset
+  guidance must call this out explicitly.
 - `users.role_code`: foreign key to `roles.code`; supported scaffold values
  are `administrator`, `librarian`, and `reader`.
 - `users.active`: only rows with `active = 1` can authenticate.
@@ -144,3 +144,74 @@ the server-side exception.
  <c:out value="${log.resultStatusName}" />
 </span>
 ```
+
+## Scenario: Login Diagnostic Logging
+
+### 1. Scope / Trigger
+
+- Trigger: Windows deployment login failures need server-side diagnostics across
+  `LoginServlet -> AuthServiceImpl -> JdbcUserDao -> JdbcUtil` without changing
+  the generic user-facing login messages.
+
+### 2. Signatures
+
+- Servlet route: `POST /login` with `username`, `password`, and optional
+  same-application `redirect`.
+- Service signature: `AuthService.authenticate(String username, String password)`.
+- DAO signature: `UserDao.findActiveByUsername(String username)`.
+- DB config keys: `db.driver`, `db.url`, `db.username`, and `db.password`.
+
+### 3. Contracts
+
+- Login request logs may include remote address, context path, redirect presence,
+  username presence/length, sanitized username, and whether normalization changed
+  the username.
+- Authentication logs must distinguish missing required fields, active user not
+  found, password mismatch, service error, and success.
+- JDBC logs must confirm `db.properties` loading, required key resolution,
+  connection attempts, successful connections, and driver/connection failures.
+- Logs must never include raw passwords, password hashes, salts, database
+  passwords, or unredacted password-like JDBC URL parameters.
+
+### 4. Validation & Error Matrix
+
+- Missing username or password -> log missing-field category and return the
+  existing required-field message.
+- Unknown or inactive username -> log `active-user-not-found` and return the
+  existing invalid-credentials message.
+- Existing user with bad password -> log `password-mismatch` and return the
+  existing invalid-credentials message.
+- Missing DB config or JDBC failure -> log server-side details with credentials
+  redacted and return the existing service-unavailable message.
+
+### 5. Good/Base/Bad Cases
+
+- Good: a failed login shows whether the request reached the servlet, whether
+  the username was normalized, whether the active user row was found, and
+  whether password verification failed.
+- Base: successful login keeps logging user ID and role only.
+- Bad: a diagnostic log writes `password`, `password_hash`, salt, or a JDBC URL
+  containing `password=secret`.
+
+### 6. Tests Required
+
+- Run `mvn test` or the documented Maven path to compile Servlet, service, DAO,
+  and utility code.
+- Scan changed logs for password/hash/salt/database-password output before
+  finishing.
+- Keep `AuthServiceCheck` behavior expectations unchanged for required fields,
+  invalid credentials, success, permission checks, and DAO failure fallback.
+
+### 7. Wrong vs Correct
+
+#### Wrong
+
+```java
+LOGGER.info("Login failed password=" + password + " hash=" + user.getPasswordHash());
+```
+
+#### Correct
+
+```java
+LOGGER.info("Login failed reason=password-mismatch userId=" + user.getId());
+```
@@ -16,8 +16,34 @@ 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, 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
+  compile the fragment with a non-UTF-8 default and render mojibake.
+- JSP-rendered HTML responses must be served as `text/html;charset=UTF-8` by
+  the encoding filter or the JSP page directive. Request/response character
+  encoding alone is not enough for browsers to decode Simplified Chinese safely.
+- 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'`.
+- 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
+  <c:set var="currentPath" value="${requestScope['javax.servlet.forward.servlet_path']}" />
+  <c:if test="${empty currentPath}">
+      <c:set var="currentPath" value="${pageContext.request.servletPath}" />
+  </c:if>
+  <a class="${(currentPath == '/books' or fn:startsWith(currentPath, '/books/')) ? 'is-active' : ''}">
+  ```
 - Keep fragments presentation-focused. They should not open database
  connections or call DAOs.

@@ -45,6 +45,9 @@ image-first design and preserve the Servlet/JSP layered architecture.
 - Do not implement UI only from text descriptions when an approved image
  reference exists.
 - Do not put SQL, DAO calls, or business workflows in JSP pages.
+- Do not hard-code operational dashboard/report metrics, sample people, fixed
+  borrow dates, or fake table rows in JSP pages; use Servlet-provided request
+  attributes and empty states.
 - Do not rely only on browser validation for protected workflows.

 ---
@@ -36,6 +36,100 @@ changes the frontend architecture.

 ---

+## Scenario: Dashboard Workbench Request Contract
+
+### 1. Scope / Trigger
+
+- Trigger: the authenticated workbench spans Servlet request attributes,
+  service-derived report/catalog/borrowing data, and role-specific JSP display.
+- Route: `GET /dashboard`.
+- JSP path: `WEB-INF/jsp/dashboard.jsp`.
+
+### 2. Signatures
+
+- Servlet: `DashboardServlet.doGet(HttpServletRequest, HttpServletResponse)`.
+- Services used for page data:
+  - `BookService.listCategories()`.
+  - `BookService.searchBooks(new BookSearchCriteria())`.
+  - `ReaderService.searchReaders(new ReaderSearchCriteria())` for staff reader
+    totals.
+  - `ReportService.loadReportCenter(AuthenticatedUser actor)` for
+    administrator/librarian users.
+  - `BorrowingService.searchRecords(actor, new BorrowRecordSearchCriteria())`
+    for administrator/librarian users.
+- Request attributes:
+  - `currentUser: AuthenticatedUser`.
+  - `categories: List<BookCategory>`.
+  - `dashboardBooks: List<Book>`.
+  - `dashboardMetrics: List<DashboardMetric>`.
+  - `reportCenter: ReportCenter` for staff users when report loading succeeds.
+  - `dashboardBorrowRecords: List<BorrowRecord>` for staff users.
+  - `errorMessage: String` when a service returns a safe failure.
+
+### 3. Contracts
+
+- Workbench values must come from request attributes populated by the Servlet;
+  JSP must not embed operational sample rows, fixed dates, or fake totals.
+- Staff metrics use `ReportCenter` values derived from `books` and
+  `borrow_records`, plus reader totals from `ReaderService`; reader fallback
+  metrics may derive from `dashboardBooks`.
+- Popular ranking, overdue rows, and borrowing rows render only real service
+  results and show empty states when lists are empty.
+- Category filters render from `categories`, the same source used by catalog and
+  book-management pages.
+- Role-gated sections stay in JSP conditionals based on `sessionScope.userRole`;
+  staff-only data is not requested for reader users.
+
+### 4. Validation & Error Matrix
+
+- Category load failure -> `categories` is an empty list and `errorMessage` is
+  set.
+- Book search failure -> `dashboardBooks` is an empty list and `errorMessage`
+  is set.
+- Reader total load failure -> staff metrics fall back to another real
+  service-derived metric and `errorMessage` is set.
+- Staff report load failure -> report-backed sections show empty states and
+  `errorMessage` is set.
+- Staff borrowing search failure -> `dashboardBorrowRecords` is an empty list
+  and `errorMessage` is set.
+- Empty service result -> render a stable empty state, not hard-coded fallback
+  sample data.
+
+### 5. Good/Base/Bad Cases
+
+- Good: a librarian opens `/dashboard` and sees report-backed metrics, current
+  borrowing rows, overdue rows, popular ranking, and real book rows.
+- Base: no borrow records exist; the workbench keeps the layout and shows empty
+  states for ranking, borrowing, and overdue panels.
+- Bad: `dashboard.jsp` contains names, book IDs, 2024 dates, or counts that do
+  not come from request attributes.
+
+### 6. Tests Required
+
+- Run Maven compile/test for Servlet and JavaBean contract checks.
+- Run standalone service checks covering report, borrowing, catalog/book, and
+  permission policy behavior when available.
+- Scan `dashboard.jsp` for static sample names, fixed dates, and decorative
+  sample-only values after dashboard changes.
+- Verify staff and reader role conditionals still show only the intended
+  sections.
+
+### 7. Wrong vs Correct
+
+#### Wrong
+
+```text
+dashboard.jsp -> hard-coded metric "12,586" and fixed rows like "L20240521001"
+```
+
+#### Correct
+
+```text
+dashboard.jsp <- DashboardServlet <- ReportService/BookService/ReaderService/BorrowingService
+```
+
+---
+
 ## Page Scripts

 Small JavaScript can improve interaction, such as confirm dialogs or local form
@@ -33,7 +33,11 @@ rendering.
 ### 2. Signatures

 - Login form: `POST /login`.
- Request fields: `username`, `password`, and optional `redirect`.
+- Request fields consumed by `LoginServlet`: `username`, `password`, and
+  optional `redirect`.
+- Presentation-only login controls may submit auxiliary fields such as
+  `rememberUsername`; these must not participate in authentication or
+  authorization unless the Servlet/service contract is deliberately changed.
 - Login JSP request attributes: `errorMessage`, `username`, and `redirect`.
 - Dashboard/role JSP session attributes: `authenticatedUser`, `userRole`, and
  `userPermissions`.
@@ -47,6 +51,12 @@ rendering.
  attribute or session attribute.
 - `redirect` must be a same-application path beginning with one `/`; invalid
  values are ignored.
+- Login pages must not include a client-side role selector. The authenticated
+  role is determined by the `users.role_code` row returned through
+  `AuthService`, not by client-submitted form state.
+- Remember-me behavior may persist only the username in browser storage. It must
+  never persist passwords, password hashes, redirects, permission state, or
+  extend the server session.
 - JSPs render data with JSP EL/JSTL, not scriptlet Java.
 - JSPs may read safe session snapshots, but they must not call DAOs or inspect
  password hashes.
@@ -67,10 +77,12 @@ rendering.

 - Good: failed login keeps the escaped username and never redisplays the
  password.
+- Good: checking remember-me does not change the server-side authentication
+  decision.
 - Base: dashboard reads `sessionScope.authenticatedUser.displayName` and
  `sessionScope.userRole` only for display/navigation.
- Bad: JSP uses scriptlets, JDBC, or raw request parameters to decide
-  authentication.
+- Bad: JSP, JavaScript, or Servlet code trusts a client-submitted role field to
+  grant a role or stores the password in browser storage.

 ### 6. Tests Required

@@ -79,6 +91,8 @@ rendering.
  files.
 - Run service-level auth checks for required fields, invalid credentials,
  success, DAO fallback, and permission checks.
+- When login page scripts change, scan them to confirm only usernames can be
+  stored client-side and `password` is never persisted.
 - When Maven/Tomcat is available, run a Servlet/JSP compile or package check.

 ### 7. Wrong vs Correct
@@ -87,6 +101,7 @@ rendering.

 ```jsp
 <%-- JSP checks request.getParameter("password") or runs SQL directly. --%>
+<%-- JavaScript stores the password or LoginServlet trusts a submitted role. --%>
 ```

 #### Correct
@@ -0,0 +1,2 @@
+{"_example": "Fill with {\"file\": \"<path>\", \"reason\": \"<why>\"}. Put spec/research files only — no code paths. Run `python3 .trellis/scripts/get_context.py --mode packages` to list available specs. Delete this line once real entries are added."}
+{"file": ".trellis/spec/frontend/index.md", "reason": "Frontend JSP/CSS context for verifying the refreshed preview"}
@@ -0,0 +1,2 @@
+{"_example": "Fill with {\"file\": \"<path>\", \"reason\": \"<why>\"}. Put spec/research files only — no code paths. Run `python3 .trellis/scripts/get_context.py --mode packages` to list available specs. Delete this line once real entries are added."}
+{"file": ".trellis/spec/frontend/index.md", "reason": "Frontend JSP/CSS context for preview verification"}
@@ -0,0 +1,47 @@
+# Rebuild Current Frontend Preview
+
+## Goal
+
+Rebuild the current Java Web application and refresh the local Tomcat deployment so the user can view the latest frontend effect in the browser.
+
+## What I already know
+
+* The user asked to rebuild the program to inspect the new frontend.
+* The project is a Java 11 Maven WAR application.
+* Maven produces `target/library-management.war`.
+* Frontend JSP/CSS assets live under `src/main/webapp`.
+* Local Tomcat path recorded by prior work is `/home/sjy/apps/tomcat/apache-tomcat-9.0.117/apache-tomcat-9.0.117`.
+* The Tomcat context should be `/library-management`.
+
+## Requirements
+
+* Run a clean Maven package build.
+* Deploy the new WAR to the local Tomcat `webapps` directory.
+* Remove the expanded old deployment directory before restart so stale frontend assets are not reused.
+* Start or restart Tomcat.
+* Verify the frontend login URL is reachable.
+* Provide the local browser URL to the user.
+
+## Acceptance Criteria
+
+* [x] `mvn clean package` succeeds.
+* [x] `target/library-management.war` exists.
+* [x] Tomcat deployment is refreshed with the new WAR.
+* [x] `/library-management/login` returns HTTP 200.
+* [x] User receives the local preview URL.
+
+## Out of Scope
+
+* Source code changes.
+* New UI requirements or redesign decisions.
+* Database schema or seed data changes.
+
+## Technical Notes
+
+* Build command from README: `mvn clean package`; fallback Maven path: `/home/sjy/.sdkman/candidates/maven/current/bin/mvn clean package`.
+* Deployment target: `/home/sjy/apps/tomcat/apache-tomcat-9.0.117/apache-tomcat-9.0.117/webapps/library-management.war`.
+* Build completed at 2026-04-28 20:21 +0800.
+* Previous Tomcat deployment was moved to `/home/sjy/apps/tomcat/apache-tomcat-9.0.117/apache-tomcat-9.0.117/deploy-backups/_pre-preview-20260428-202206/`.
+* Tomcat is running in tmux session `mzh-library-tomcat`.
+* Verified `http://localhost:8080/library-management/login` returns `HTTP 200` with `Content-Type: text/html;charset=UTF-8`.
+* Verified demo login redirects to `/library-management/dashboard`, and the authenticated dashboard returns `HTTP 200`.
@@ -0,0 +1,26 @@
+{
+  "id": "04-28-rebuild-current-frontend-preview",
+  "name": "04-28-rebuild-current-frontend-preview",
+  "title": "rebuild current frontend preview",
+  "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": {}
+}
@@ -0,0 +1,4 @@
+{"_example": "Fill with {\"file\": \"<path>\", \"reason\": \"<why>\"}. Put spec/research files only — no code paths. Run `python3 .trellis/scripts/get_context.py --mode packages` to list available specs. Delete this line once real entries are added."}
+{"file": ".trellis/spec/frontend/index.md", "reason": "Frontend checklist for reviewing login page UI changes"}
+{"file": ".trellis/spec/frontend/type-safety.md", "reason": "Verify login form contract remains unchanged"}
+{"file": ".trellis/spec/frontend/quality-guidelines.md", "reason": "Verify UI layout quality after removal"}
@@ -0,0 +1,7 @@
+{"_example": "Fill with {\"file\": \"<path>\", \"reason\": \"<why>\"}. Put spec/research files only — no code paths. Run `python3 .trellis/scripts/get_context.py --mode packages` to list available specs. Delete this line once real entries are added."}
+{"file": ".trellis/spec/frontend/index.md", "reason": "Frontend JSP/CSS guidelines for login page UI changes"}
+{"file": ".trellis/spec/frontend/directory-structure.md", "reason": "JSP and static asset placement conventions"}
+{"file": ".trellis/spec/frontend/component-guidelines.md", "reason": "Form and page component conventions"}
+{"file": ".trellis/spec/frontend/state-management.md", "reason": "Server-rendered form state conventions"}
+{"file": ".trellis/spec/frontend/type-safety.md", "reason": "Login form request contract and loginRole behavior"}
+{"file": ".trellis/spec/frontend/quality-guidelines.md", "reason": "UI quality checks for JSP/CSS changes"}
@@ -0,0 +1,52 @@
+# 调整登录页登录选项与布局
+
+## Goal
+
+简化登录界面：移除登录身份单选项和标题旁的图书图标，并微调表单布局，让登录卡片在元素减少后仍保持居中、紧凑和视觉平衡。
+
+## What I Already Know
+
+* 用户要求删除登录界面中的“登录身份”选项。
+* 用户要求删除登录界面中的图书图标。
+* 登录页 JSP 位于 `src/main/webapp/WEB-INF/jsp/auth/login.jsp`。
+* 登录页样式位于 `src/main/webapp/static/css/app.css`。
+* 登录页脚本位于 `src/main/webapp/static/js/login.js`，当前主要处理记住用户名、密码显示切换和忘记密码提示。
+* 前端规范说明登录页不应包含客户端角色选择，认证后的角色由 `AuthService` 返回的用户角色决定。
+
+## Assumptions
+
+* “图书的图标”指登录页标题旁内联 SVG 的 `login-brand-mark`，不是背景插画 `static/images/library-login.svg`。
+* “微调布局”指因移除图标和登录身份单选后，调整标题区域、表单间距和卡片留白，不做整页视觉重设计。
+
+## Requirements
+
+* 移除登录页的登录身份单选区域，包括“登录身份”“管理员”“馆员”“读者”选项。
+* 移除登录页标题旁的图书图标。
+* 保留用户名、密码、记住我、忘记密码提示和登录提交功能。
+* 表单提交仍只依赖后端已消费的 `username`、`password`、可选 `redirect`，不改变认证/授权逻辑。
+* 调整登录页布局，使标题、副标题、输入框、选项行和按钮在桌面与移动端都保持合理间距。
+
+## Acceptance Criteria
+
+* [x] 登录页不再渲染“登录身份”文案和角色单选按钮。
+* [x] 登录页标题旁不再渲染图书 SVG 图标。
+* [x] 登录页在桌面和移动端没有明显空洞、错位或文本重叠。
+* [x] 用户名/密码登录表单仍可提交到 `POST /login`。
+* [x] 项目可通过 Maven 构建或等价检查。
+
+## Definition of Done
+
+* JSP/CSS 改动范围聚焦在登录页 UI。
+* Lint/typecheck/build 可用检查已运行；如无法运行，记录原因。
+* 不修改后端认证授权逻辑。
+
+## Out of Scope
+
+* 不重做整套登录页视觉风格。
+* 不修改用户角色、权限、认证服务或数据库。
+* 不删除登录页背景插画，除非代码检查证明它就是用户所指图标。
+
+## Technical Notes
+
+* 前端规范入口： `.trellis/spec/frontend/index.md`。
+* 相关规范： `.trellis/spec/frontend/type-safety.md` 中说明 `LoginServlet` 消费 `username`、`password` 和可选 `redirect`，登录角色不由客户端表单状态决定。
@@ -0,0 +1,26 @@
+{
+  "id": "login-page-simplify-layout",
+  "name": "login-page-simplify-layout",
+  "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": {}
+}
@@ -0,0 +1,6 @@
+{"file": ".trellis/spec/frontend/index.md", "reason": "Frontend checklist for reviewing JSP/CSS presentation changes."}
+{"file": ".trellis/spec/frontend/component-guidelines.md", "reason": "Verify shared frame role navigation and Simplified Chinese copy remain correct."}
+{"file": ".trellis/spec/frontend/quality-guidelines.md", "reason": "Verify layout, accessibility basics, and no obvious overlap/clipping."}
+{"file": ".trellis/spec/backend/index.md", "reason": "Verify encoding changes remain within Servlet/JSP architecture."}
+{"file": ".trellis/spec/backend/quality-guidelines.md", "reason": "Verify layer boundaries and Maven build/test expectations."}
+{"file": ".trellis/tasks/archive/2026-04/00-bootstrap-guidelines/research/project-requirements.md", "reason": "Confirm the change preserves the agreed JSP + Servlet + Tomcat stack."}
@@ -0,0 +1,7 @@
+{"file": ".trellis/spec/frontend/index.md", "reason": "Frontend JSP/CSS presentation conventions and checklist for authenticated UI work."}
+{"file": ".trellis/spec/frontend/directory-structure.md", "reason": "JSP fragment and static asset placement constraints."}
+{"file": ".trellis/spec/frontend/component-guidelines.md", "reason": "Shared header/sidebar fragment rules, role-conditioned navigation, and Simplified Chinese copy requirements."}
+{"file": ".trellis/spec/frontend/quality-guidelines.md", "reason": "UI quality checks for JSP/CSS layout, accessibility basics, and visual consistency."}
+{"file": ".trellis/spec/backend/index.md", "reason": "Servlet/JSP/Tomcat architecture context for the encoding filter change."}
+{"file": ".trellis/spec/backend/quality-guidelines.md", "reason": "Layer-boundary and Maven verification requirements for backend-adjacent changes."}
+{"file": ".trellis/tasks/archive/2026-04/00-bootstrap-guidelines/research/project-requirements.md", "reason": "Original project stack and presentation-layer requirements."}
@@ -0,0 +1,83 @@
+# Fix Frontend Encoding And Layout
+
+## Goal
+
+Fix the authenticated JSP frontend so Simplified Chinese text renders correctly in the browser, then refine the shared application frame and dashboard layout so navigation, role workbench links, search, user identity, and page content look coordinated at common desktop and mobile widths.
+
+## What I Already Know
+
+* The user wants to view the actual frontend UI after the frontend refactor.
+* The running Tomcat application appears to show the pre-refactor UI.
+* The project is a Java 11 Maven WAR application.
+* Maven produces `target/library-management.war`.
+* Frontend assets and JSPs live under `src/main/webapp`.
+* Local Tomcat path is `/home/sjy/apps/tomcat/apache-tomcat-9.0.117/apache-tomcat-9.0.117`.
+* Local MySQL is running at `127.0.0.1:3306`.
+* The user now sees severe mojibake such as `ä¹¦ å¾ä¹¦ç®¡çç³»ç»`, which is UTF-8 Chinese content being decoded as a non-UTF-8 encoding.
+* The visible broken area is the authenticated shell: sidebar brand, role workbench, module navigation, topbar search, notification, user pill, and role label.
+* JSP pages already declare `contentType="text/html;charset=UTF-8"` and `<meta charset="UTF-8">`; `CharacterEncodingFilter` currently sets request/response character encoding but does not force an HTML content type.
+* Follow-up user screenshot shows the authenticated shell still renders as ordinary document-flow text: the dark fixed sidebar is missing, the topbar is loose, and the dashboard metric cards collapse into a vertical text column. HTML and CSS endpoint checks alone are not sufficient.
+
+## Requirements
+
+* Ensure every JSP-rendered HTML response is explicitly served as UTF-8 so Chinese labels, placeholders, headings, and role names do not render as mojibake.
+* Preserve the JSP + Servlet + CSS stack; do not introduce a frontend framework.
+* Keep all user-facing JSP copy in Simplified Chinese.
+* Refine the shared authenticated frame in `header.jspf`/CSS:
+  * Sidebar brand and role workbench should be readable and not visually crowded.
+  * Navigation links should align consistently and avoid repeated glyph/text collisions.
+  * Topbar search, notification, user display, and role label should fit without overlap.
+* Refine dashboard layout in CSS so metric cards, search/ranking panels, tables, and shortcut cards have balanced spacing and degrade cleanly on narrower viewports.
+* Rebuild and redeploy the WAR to the local Tomcat instance after source changes.
+* Verify `/library-management/login` is reachable and a known login reaches `/library-management/dashboard`.
+* Verify the dashboard HTML/headers indicate UTF-8 and the rendered shell text is readable Chinese.
+* Verify the rendered page visually in a browser at desktop width:
+  * A dark fixed left sidebar must be visible.
+  * The topbar must start to the right of the sidebar and align search/user controls.
+  * Dashboard content must start below the topbar and to the right of the sidebar.
+  * Metrics must render as cards in a grid on desktop, not as plain vertical text.
+  * No overlapping, no unstyled header text, and no horizontal crowding at 1920px-wide desktop.
+
+## Acceptance Criteria
+
+* [x] `mvn clean package` succeeds after the frontend/encoding changes.
+* [x] Tomcat `webapps/library-management.war` is refreshed from `target/library-management.war`.
+* [x] Old expanded deployment directory is removed before restart.
+* [x] Tomcat listens on port `8080`.
+* [x] `/library-management/login` returns HTTP 200.
+* [x] `admin/admin123` login redirects to `/library-management/dashboard`.
+* [x] Authenticated dashboard response uses UTF-8 and no longer displays mojibake for Chinese UI text.
+* [ ] Sidebar, role chips, topbar search/actions, dashboard panels, and responsive layout avoid obvious overlap, clipping, duplicated visual noise, and unstyled document-flow rendering in an actual browser screenshot.
+
+## Definition Of Done
+
+* Encoding fix implemented in source.
+* Layout refinement implemented in JSP/CSS source.
+* Rebuild and deploy completed.
+* Verification results reported to the user.
+* No database schema changes or unrelated backend behavior changes.
+
+## Out Of Scope
+
+* Replacing the JSP/CSS frontend with React, Vue, or another SPA framework.
+* Changing database schema or seed data.
+* Committing build artifacts.
+* Reworking business workflows beyond what is needed to render the current pages correctly.
+
+## Technical Notes
+
+* Build command from README: `/home/sjy/.sdkman/candidates/maven/current/bin/mvn clean package` if `mvn` is unavailable.
+* Deployment target: `/home/sjy/apps/tomcat/apache-tomcat-9.0.117/apache-tomcat-9.0.117/webapps/library-management.war`.
+* Rebuild completed at 2026-04-28 16:55 +0800; deployed WAR size is 4,489,937 bytes.
+* Previous deployment was moved to `/home/sjy/apps/tomcat/apache-tomcat-9.0.117/apache-tomcat-9.0.117/deploy-backups/_pre-rebuild-20260428-1656/`.
+* Deployed `static/css/app.css` is byte-for-byte identical to `src/main/webapp/static/css/app.css`.
+* Likely impacted files from inspection:
+  * `src/main/java/com/mzh/library/filter/CharacterEncodingFilter.java`
+  * `src/main/webapp/WEB-INF/jsp/common/header.jspf`
+  * `src/main/webapp/WEB-INF/jsp/dashboard.jsp`
+  * `src/main/webapp/static/css/app.css`
+* Final verification completed at 2026-04-28 17:34 +0800:
+  * `/library-management/login` returns `200` with `Content-Type: text/html;charset=UTF-8`.
+  * `admin/admin123` login reaches `/library-management/dashboard` with UTF-8 content.
+  * Dashboard HTML contains readable Chinese markers including `图书管理系统`, `角色工作台`, `管理员工作台`, `馆藏检索`, `用户管理`, `系统日志`, and `退出登录`.
+* Follow-up visual regression reported after that verification: screenshot shows the authenticated shell unstyled at desktop width despite readable Chinese. Future verification must include a browser screenshot or equivalent computed-style/layout assertion, not only `curl`.
@@ -0,0 +1,26 @@
+{
+  "id": "04-28-rebuild-current-frontend",
+  "name": "04-28-rebuild-current-frontend",
+  "title": "rebuild and redeploy current frontend",
+  "description": "",
+  "status": "completed",
+  "dev_type": null,
+  "scope": null,
+  "package": null,
+  "priority": "P2",
+  "creator": "Zzzz",
+  "assignee": "Zzzz",
+  "createdAt": "2026-04-28",
+  "completedAt": "2026-04-28",
+  "branch": null,
+  "base_branch": "master",
+  "worktree_path": null,
+  "commit": null,
+  "pr_url": null,
+  "subtasks": [],
+  "children": [],
+  "parent": null,
+  "relatedFiles": [],
+  "notes": "",
+  "meta": {}
+}
@@ -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": "completed",
+  "dev_type": null,
+  "scope": null,
+  "package": null,
+  "priority": "P2",
+  "creator": "Zzzz",
+  "assignee": "Zzzz",
+  "createdAt": "2026-04-28",
+  "completedAt": "2026-04-28",
+  "branch": null,
+  "base_branch": "master",
+  "worktree_path": null,
+  "commit": null,
+  "pr_url": null,
+  "subtasks": [],
+  "children": [],
+  "parent": null,
+  "relatedFiles": [],
+  "notes": "",
+  "meta": {}
+}
@@ -0,0 +1,5 @@
+{"_example": "Fill with {\"file\": \"<path>\", \"reason\": \"<why>\"}. Put spec/research files only — no code paths. Run `python3 .trellis/scripts/get_context.py --mode packages` to list available specs. Delete this line once real entries are added."}
+{"file": ".trellis/spec/frontend/index.md", "reason": "Verify frontend work follows JSP/CSS conventions"}
+{"file": ".trellis/spec/frontend/quality-guidelines.md", "reason": "Verify responsive UI and simplified authenticated shell"}
+{"file": ".trellis/spec/backend/quality-guidelines.md", "reason": "Verify backend layering and no static data regressions"}
+{"file": ".trellis/spec/backend/database-guidelines.md", "reason": "Verify dashboard uses existing derived report data correctly"}
@@ -0,0 +1,8 @@
+{"_example": "Fill with {\"file\": \"<path>\", \"reason\": \"<why>\"}. Put spec/research files only — no code paths. Run `python3 .trellis/scripts/get_context.py --mode packages` to list available specs. Delete this line once real entries are added."}
+{"file": ".trellis/spec/frontend/index.md", "reason": "Frontend JSP/CSS conventions for authenticated shell and dashboard UI"}
+{"file": ".trellis/spec/backend/index.md", "reason": "Backend Servlet/service/DAO layering for dashboard real data"}
+{"file": ".trellis/spec/frontend/component-guidelines.md", "reason": "JSP fragments, cards, tables, and reusable presentation rules"}
+{"file": ".trellis/spec/frontend/state-management.md", "reason": "Server-rendered request/session state conventions"}
+{"file": ".trellis/spec/frontend/quality-guidelines.md", "reason": "UI quality checks for JSP/CSS changes"}
+{"file": ".trellis/spec/backend/database-guidelines.md", "reason": "Existing report data contracts and database-derived summary rules"}
+{"file": ".trellis/spec/backend/error-handling.md", "reason": "ServiceResult and servlet error handling conventions"}
@@ -0,0 +1,54 @@
+# Fix Frontend Workbench Display
+
+## Goal
+
+Make the authenticated workbench reflect real application data and simplify the navigation-heavy UI so it does not duplicate the sidebar.
+
+## What I Already Know
+
+- The user reported that the frontend workbench data does not match actual data.
+- The current `dashboard.jsp` hard-codes metric values, popular book ranking rows, borrowing rows, overdue rows, and book rows.
+- The workbench shortcut cards for 读者管理, 报表中心, 借阅流通, and 系统日志 duplicate links already present in the sidebar.
+- The UI uses circular single-character markers beside text in metrics, shortcut cards, sidebar links, role chips, and topbar user summary.
+- The sidebar is fixed on desktop, but responsive CSS changes `.app-sidebar` and `.app-topbar` to static layout under 960px, effectively removing the persistent sidebar behavior.
+- Existing report infrastructure already exposes actual inventory summary, borrowing summary, overdue rows, and popular books through `ReportService.loadReportCenter(...)`.
+
+## Assumptions
+
+- "UI text beside an unnecessary circle with one character" applies to decorative single-character icon circles in the authenticated shell and workbench, not to plain text labels or table status pills.
+- The workbench should reuse existing server-rendered JSP/Servlet patterns rather than introducing client-side state.
+- When a specific real data source does not yet exist, prefer showing an existing real metric over keeping a static fake metric.
+
+## Requirements
+
+- Replace hard-coded workbench summary metrics with real data.
+- Replace the hard-coded popular book ranking with real ranking data.
+- Replace hard-coded borrowing/overdue/book table samples with real data or remove the fake sample rows in favor of empty states.
+- Keep the workbench catalog search category selector populated from real categories.
+- Remove the workbench shortcut entry block containing 读者管理, 报表中心, 借阅流通, and 系统日志.
+- Remove the decorative circular single-character UI markers around text in the authenticated shell/workbench where they are not functionally necessary.
+- Ensure the sidebar cannot be hidden or collapsed by responsive layout rules.
+- Keep role-based visibility and permissions intact for administrator, librarian, and reader users.
+
+## Acceptance Criteria
+
+- [ ] Workbench metrics are rendered from request attributes populated by backend services, not hard-coded numbers.
+- [ ] Popular ranking and table content no longer contain static sample records such as 张晓明, 活着, 三体, or fixed 2024 dates unless those values come from the database.
+- [ ] The workbench no longer shows shortcut cards for 读者管理, 报表中心, 借阅流通, or 系统日志.
+- [ ] Decorative single-character circles next to UI text are removed or restyled as plain text/spacing without circular badges.
+- [ ] Sidebar remains visible and occupies its sidebar column across responsive breakpoints.
+- [ ] Existing navigation links still work and remain role-aware.
+- [ ] Project lint/type-check or the closest available Java build/test command passes.
+
+## Out Of Scope
+
+- Adding new major dashboard modules beyond the current workbench content.
+- Redesigning unrelated pages outside the shared authenticated shell and workbench.
+- Changing database schema unless necessary to replace static workbench data.
+
+## Technical Notes
+
+- Likely files: `src/main/java/com/mzh/library/controller/DashboardServlet.java`, `src/main/webapp/WEB-INF/jsp/dashboard.jsp`, `src/main/webapp/WEB-INF/jsp/common/header.jspf`, and `src/main/webapp/static/css/app.css`.
+- Existing actual report data: `ReportServiceImpl`, `JdbcReportDao`, `ReportCenter`, `InventorySummary`, `BorrowingSummary`, `OverdueReportRow`, and `PopularBookReportRow`.
+- Existing category/book patterns: `BookServiceImpl`, `JdbcBookDao`, and `BookCatalogServlet`.
+- Existing borrowing list pattern: `BorrowingServiceImpl.searchRecords(...)` and `BorrowingManagementServlet`.
@@ -0,0 +1,26 @@
+{
+  "id": "frontend-workbench-display-fix",
+  "name": "frontend-workbench-display-fix",
+  "title": "修复前端工作台展示",
+  "description": "",
+  "status": "completed",
+  "dev_type": null,
+  "scope": null,
+  "package": null,
+  "priority": "P2",
+  "creator": "Zzzz",
+  "assignee": "Zzzz",
+  "createdAt": "2026-04-28",
+  "completedAt": "2026-04-28",
+  "branch": null,
+  "base_branch": "master",
+  "worktree_path": null,
+  "commit": null,
+  "pr_url": null,
+  "subtasks": [],
+  "children": [],
+  "parent": null,
+  "relatedFiles": [],
+  "notes": "",
+  "meta": {}
+}
@@ -0,0 +1,7 @@
+{"file": ".trellis/spec/frontend/index.md", "reason": "Review JSP changes against presentation-layer conventions."}
+{"file": ".trellis/spec/frontend/component-guidelines.md", "reason": "Verify button/action removal keeps page composition and primary operations intact."}
+{"file": ".trellis/spec/frontend/state-management.md", "reason": "Ensure JSP changes do not alter request/session contracts."}
+{"file": ".trellis/spec/frontend/quality-guidelines.md", "reason": "Run UI-oriented quality review for removed redundant actions."}
+{"file": ".trellis/spec/backend/database-guidelines.md", "reason": "Review Chinese demo data against schema and seed-data conventions."}
+{"file": ".trellis/spec/backend/quality-guidelines.md", "reason": "Verify backend layer boundaries and checks for schema-only data changes."}
+{"file": ".trellis/spec/frontend/type-safety.md", "reason": "Verify the login JSP keeps the POST /login contract, request fields, and safe rendering behavior."}
@@ -0,0 +1,9 @@
+{"file": ".trellis/spec/frontend/index.md", "reason": "JSP presentation-layer conventions and required pre-development checklist for removing redundant page actions."}
+{"file": ".trellis/spec/frontend/directory-structure.md", "reason": "Location and ownership of JSP pages, shared fragments, and static assets."}
+{"file": ".trellis/spec/frontend/component-guidelines.md", "reason": "Rules for JSP fragments, forms, tables, buttons, and page composition."}
+{"file": ".trellis/spec/frontend/state-management.md", "reason": "Server-rendered request/session/form state constraints for JSP changes."}
+{"file": ".trellis/spec/frontend/type-safety.md", "reason": "JSP/Servlet display contracts and safe rendering expectations."}
+{"file": ".trellis/spec/frontend/quality-guidelines.md", "reason": "UI quality checks for JSP/CSS changes."}
+{"file": ".trellis/spec/backend/index.md", "reason": "Backend architecture overview for database initialization changes."}
+{"file": ".trellis/spec/backend/database-guidelines.md", "reason": "MySQL schema and seed-data conventions for readers, categories, and books."}
+{"file": ".trellis/spec/backend/quality-guidelines.md", "reason": "Layer-boundary and verification expectations for database-only backend changes."}
@@ -0,0 +1,70 @@
+# remove redundant page actions and add Chinese demo data
+
+## Goal
+
+精简已登录页面中与侧边栏重复的右侧跨模块跳转按钮，补充更贴近中文图书馆场景的演示图书与读者数据，并按参考截图重构真实可用的登录界面。
+
+## What I already know
+
+* 用户希望移除以下重复入口：报表中心右侧“借阅记录”；馆藏检索右侧“管理图书”；图书管理右侧“分类”“查看馆藏”；管理分类右侧“管理图书”；读者档案右侧“管理登录账户”；用户账户与角色右侧“读者档案”。
+* 侧边栏已经提供这些模块之间的跳转，因此页面标题栏和工具栏中的跨模块二级入口会显得重复。
+* “新增图书”“新增分类”“新增读者档案”“新增账户”等当前页面内的主要操作仍应保留。
+* 演示数据位于 `src/main/resources/db/schema.sql`，当前包含英文读者名、英文分类和英文图书。
+* 项目是 JSP + Servlet + MySQL 架构，前端页面在 `src/main/webapp/WEB-INF/jsp/`，数据库初始化脚本使用 `utf8mb4`。
+* 用户补充要求：仿照参考截图重构登录界面，必须是真实可用的登录表单，而不是静态展示页。
+* 参考截图特征：浅色模糊图书馆背景、居中的白色登录卡片、蓝色书本图标与“图书管理系统”标题、用户名/密码输入框图标、密码显隐按钮、身份单选项、记住我和忘记密码入口、蓝色主登录按钮。
+
+## Assumptions
+
+* 本任务只调整冗余跨模块按钮，不改变侧边栏导航、权限控制、Servlet 路由或业务流程。
+* 数据初始化仍使用 `INSERT IGNORE` / `ON DUPLICATE KEY UPDATE` 的现有风格，避免重复执行脚本破坏已有本地数据。
+* 中文演示数据可以替换或扩充现有英文样例，但登录测试账号用户名和密码保持不变。
+
+## Requirements
+
+* 报表中心页面不再显示跳转到借阅记录的右侧按钮。
+* 馆藏检索页面不再显示跳转到管理图书的右侧按钮。
+* 图书管理页面不再显示跳转到分类管理或馆藏检索的右侧按钮；保留新增图书入口。
+* 分类管理页面不再显示跳转到管理图书的右侧按钮；保留新增分类入口。
+* 读者档案页面不再显示跳转到管理登录账户的右侧按钮；保留新增读者档案入口。
+* 用户账户与角色页面不再显示跳转到读者档案的右侧按钮；保留新增账户入口。
+* 数据库初始化脚本加入中文图书分类、中文书名、中文作者和中文读者姓名。
+* 本地演示账号仍能用于登录验证。
+* 登录页按参考截图重构视觉，但保留现有 `POST /login`、`username`、`password`、`redirect`、错误提示和回填用户名等真实登录能力。
+* 登录页新增或保留真实可交互控件：密码显隐切换、登录身份单选项、记住我选项和忘记密码入口。
+* 登录身份选择不应破坏现有服务端认证；当前后端仍以账号密码和账号角色为准，前端角色选项仅作为登录意图提示或表单辅助字段。
+* 登录页需要在桌面和移动端保持可用，输入框、按钮和错误提示不能溢出或遮挡。
+
+## Acceptance Criteria
+
+* [x] 指定页面中的重复跨模块按钮被移除，侧边栏仍能导航到对应模块。
+* [x] 页面内新增操作按钮未被误删。
+* [x] `schema.sql` 包含多条中文图书数据和多条中文读者数据。
+* [x] 中文演示数据使用 `utf8mb4` 兼容的文本，不引入新表或迁移机制。
+* [x] 相关检查或可用的构建验证通过；若环境缺少 Maven，记录 fallback 验证。
+* [x] 登录页视觉接近参考截图，并使用真实表单提交到现有 `/login`。
+* [x] 密码显隐、记住我、身份单选项在浏览器中可交互且不破坏登录流程。
+* [x] 登录失败时继续显示服务端错误提示并保留用户名/redirect。
+* [x] 登录页在移动端和桌面端布局稳定，无文字或控件重叠。
+
+## Definition of Done
+
+* Tests/checks run where available.
+* Lint/typecheck/build status reported.
+* Specs reviewed for whether new conventions need recording.
+
+## Out of Scope
+
+* 不重设计侧边栏或整体视觉风格。
+* 不新增页面、权限、路由或服务层能力。
+* 不改变借阅记录、报表、用户账户或读者档案的业务逻辑。
+* 不实现真实找回密码流程；忘记密码入口可展示当前系统暂未开放或指向安全的占位交互。
+
+## Technical Notes
+
+* Likely JSP files: `src/main/webapp/WEB-INF/jsp/reports/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`.
+* Login files: `src/main/webapp/WEB-INF/jsp/auth/login.jsp`, `src/main/webapp/static/css/app.css`, and possibly small inline or static JavaScript for password visibility/remember-me interactions.
+* Data file: `src/main/resources/db/schema.sql`.
+* Relevant specs: frontend JSP/component/state/quality guidelines and backend database/quality guidelines.
+* Final verification: `git diff --check`, `node --check src/main/webapp/static/js/login.js`, JSP scriptlet/SQL/JDBC scans, removed-link scan, password persistence scan, and `/home/sjy/.sdkman/candidates/maven/current/bin/mvn clean package` passed.
+* Spec update decision: `.trellis/spec/frontend/type-safety.md` documents the new presentation-only login controls (`loginRole`, `rememberUsername`) and the username-only remember-me constraint.
@@ -0,0 +1,26 @@
+{
+  "id": "remove-redundant-actions-add-cn-data",
+  "name": "remove-redundant-actions-add-cn-data",
+  "title": "remove redundant page actions and add Chinese demo data",
+  "description": "",
+  "status": "completed",
+  "dev_type": null,
+  "scope": null,
+  "package": null,
+  "priority": "P2",
+  "creator": "Zzzz",
+  "assignee": "Zzzz",
+  "createdAt": "2026-04-28",
+  "completedAt": "2026-04-28",
+  "branch": null,
+  "base_branch": "master",
+  "worktree_path": null,
+  "commit": null,
+  "pr_url": null,
+  "subtasks": [],
+  "children": [],
+  "parent": null,
+  "relatedFiles": [],
+  "notes": "",
+  "meta": {}
+}
@@ -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."}
@@ -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."}
@@ -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 `<div>` 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 `<div>` 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`.
@@ -0,0 +1,26 @@
+{
+  "id": "sidebar-layout-management-ux",
+  "name": "sidebar-layout-management-ux",
+  "title": "修复侧边栏高亮与管理页布局优化",
+  "description": "",
+  "status": "completed",
+  "dev_type": null,
+  "scope": null,
+  "package": null,
+  "priority": "P2",
+  "creator": "Zzzz",
+  "assignee": "Zzzz",
+  "createdAt": "2026-04-28",
+  "completedAt": "2026-04-28",
+  "branch": null,
+  "base_branch": "master",
+  "worktree_path": null,
+  "commit": null,
+  "pr_url": null,
+  "subtasks": [],
+  "children": [],
+  "parent": null,
+  "relatedFiles": [],
+  "notes": "",
+  "meta": {}
+}
@@ -0,0 +1,4 @@
+{"file": ".trellis/spec/backend/index.md", "reason": "Check backend architecture boundaries for login diagnostics."}
+{"file": ".trellis/spec/backend/logging-guidelines.md", "reason": "Verify logs avoid passwords, hashes, salts, and credentials while remaining useful."}
+{"file": ".trellis/spec/backend/database-guidelines.md", "reason": "Verify login/authentication and database config contracts remain intact."}
+{"file": ".trellis/spec/backend/quality-guidelines.md", "reason": "Verify Maven checks and backend quality expectations."}
@@ -0,0 +1,4 @@
+{"file": ".trellis/spec/backend/index.md", "reason": "Backend Servlet/JSP/JDBC architecture context for login diagnostics."}
+{"file": ".trellis/spec/backend/logging-guidelines.md", "reason": "Logging safety rules, sensitive-data redaction, and diagnostic expectations."}
+{"file": ".trellis/spec/backend/database-guidelines.md", "reason": "Login/authentication and database configuration contracts."}
+{"file": ".trellis/spec/backend/quality-guidelines.md", "reason": "Backend quality and Maven verification requirements."}
@@ -0,0 +1,82 @@
+# Add Windows Login Diagnostic Logs
+
+## Goal
+
+Add safe server-side diagnostic logs to the login/authentication path so a Windows-built deployment that returns `用户名或密码不正确。` can be diagnosed without exposing passwords, password hashes, or database credentials.
+
+## What I Already Know
+
+* The previous frontend rebuild task is solved and has been archived.
+* On the Windows system build, login now reaches the invalid-credentials path: `用户名或密码不正确。`
+* The user believes the database connection is probably already working.
+* Existing login flow is `LoginServlet` -> `AuthServiceImpl` -> `JdbcUserDao.findActiveByUsername` -> `JdbcUtil`.
+* `AuthServiceImpl` currently logs only generic login failure/success/service-error messages.
+* Existing backend specs require login failures to keep the same generic user-facing message and to log server-side details for unavailable services.
+
+## Requirements
+
+* Add diagnostic logging around login POST handling, authentication lookup, password verification outcome, and database configuration/connection attempts.
+* Logs must help distinguish:
+  * request reached `LoginServlet`;
+  * username normalization changed the submitted username;
+  * active user row was not found;
+  * user row was found but password verification failed;
+  * database configuration was loaded and which JDBC URL/user key were used, with secrets redacted;
+  * JDBC driver/connection failures if they happen.
+* Do not log raw passwords, password hashes, salts, database passwords, or full sensitive config values.
+* Preserve the current user-facing Chinese error message and login behavior.
+* Keep the implementation in the existing Servlet + service + DAO + JDBC stack.
+* Prefer `java.util.logging` patterns already used in the project.
+* Document and seed explicit local/demo initial credentials so new deployments are not blocked by unrecoverable password hashes:
+  * `admin` / `admin123`
+  * `librarian` / `librarian123`
+  * `reader` / `reader123`
+* Make clear that these demo passwords are for local scaffold verification only and must be changed or removed before non-local/production use.
+
+## Acceptance Criteria
+
+* [x] Login failure logs identify whether the username was absent, not found, or found with password mismatch.
+* [x] Login request logs include safe request diagnostics such as remote address, context path, redirect presence, and submitted username length or sanitized username.
+* [x] Database logs confirm `db.properties` loading and JDBC connection attempts with password redacted.
+* [x] No log statement outputs a raw password, password hash, salt, or database password.
+* [x] Existing login success/failure behavior remains unchanged for users.
+* [x] `mvn test` or the closest available Maven verification command succeeds.
+* [x] README lists the local/demo initial login accounts and passwords with an explicit non-production warning.
+* [x] `schema.sql` seed user hashes verify against the documented demo passwords for new deployments.
+* [x] Existing deployments have a documented SQL reset path or warning explaining that `INSERT IGNORE` will not overwrite existing user rows.
+
+## Definition Of Done
+
+* Diagnostic logging implemented in source.
+* Maven verification run and results reported.
+* No database schema changes.
+* No unrelated frontend/layout changes.
+
+## Out Of Scope
+
+* Changing password hashing rules or seed user credentials.
+* Adding a new logging framework.
+* Changing database schema or production credentials.
+* Reworking the login UI.
+* Committing generated build artifacts.
+
+## Technical Notes
+
+* Likely impacted files:
+  * `src/main/java/com/mzh/library/controller/LoginServlet.java`
+  * `src/main/java/com/mzh/library/service/impl/AuthServiceImpl.java`
+  * `src/main/java/com/mzh/library/dao/impl/JdbcUserDao.java`
+  * `src/main/java/com/mzh/library/util/JdbcUtil.java`
+* Relevant specs:
+  * `.trellis/spec/backend/logging-guidelines.md`
+  * `.trellis/spec/backend/database-guidelines.md`
+  * `.trellis/spec/backend/quality-guidelines.md`
+* Verification completed at 2026-04-28 18:22 +0800:
+  * `/home/sjy/.sdkman/candidates/maven/current/bin/mvn test` passed with `BUILD SUCCESS`.
+  * `/home/sjy/.sdkman/candidates/maven/current/bin/mvn package` passed with `BUILD SUCCESS` and produced `target/library-management.war`.
+  * `git diff --check` passed.
+  * Sensitive logger scan only found boolean password state fields, `password=<redacted>`, and `password-mismatch` category labels.
+* Verification completed at 2026-04-28 18:33 +0800:
+  * `PasswordHasher.verify` returned `true` for `admin/admin123`, `librarian/librarian123`, and `reader/reader123` against the updated `schema.sql` PBKDF2 hashes.
+  * `/home/sjy/.sdkman/candidates/maven/current/bin/mvn verify` passed with `BUILD SUCCESS`.
+  * `git diff --check` passed.
@@ -0,0 +1,26 @@
+{
+  "id": "windows-login-diagnostic-logs",
+  "name": "windows-login-diagnostic-logs",
+  "title": "Add Windows login diagnostic logs",
+  "description": "",
+  "status": "completed",
+  "dev_type": null,
+  "scope": null,
+  "package": null,
+  "priority": "P2",
+  "creator": "Zzzz",
+  "assignee": "Zzzz",
+  "createdAt": "2026-04-28",
+  "completedAt": "2026-04-28",
+  "branch": null,
+  "base_branch": "master",
+  "worktree_path": null,
+  "commit": null,
+  "pr_url": null,
+  "subtasks": [],
+  "children": [],
+  "parent": null,
+  "relatedFiles": [],
+  "notes": "",
+  "meta": {}
+}
@@ -8,7 +8,7 @@

 <!-- @@@auto:current-status -->
 - **Active File**: `journal-1.md`
- **Total Sessions**: 10
+- **Total Sessions**: 15
 - **Last Active**: 2026-04-28
 <!-- @@@/auto:current-status -->

@@ -19,7 +19,7 @@
 <!-- @@@auto:active-documents -->
 | File | Lines | Status |
 |------|-------|--------|
-| `journal-1.md` | ~408 | Active |
+| `journal-1.md` | ~573 | Active |
 <!-- @@@/auto:active-documents -->

 ---
@@ -29,6 +29,11 @@
 <!-- @@@auto:session-history -->
 | # | Date | Title | Commits | Branch |
 |---|------|-------|---------|--------|
+| 15 | 2026-04-28 | 登录界面重构 | `8535b4804bc48e6f23d3107f1b34e0a16479e020` | `master` |
+| 14 | 2026-04-28 | Sidebar layout and management UX cleanup | `d0e71f2` | `master` |
+| 13 | 2026-04-28 | Frontend workbench display fix | `0a386b8` | `master` |
+| 12 | 2026-04-28 | Windows login diagnostics and demo credentials | `781ce46` | `master` |
+| 11 | 2026-04-28 | Frontend Reference Redesign | `89b6dd1` | `master` |
 | 10 | 2026-04-28 | 中文详细 README | `2d4a7e2` | `master` |
 | 9 | 2026-04-28 | Frontend Chinese UI | `ff044e6` | `master` |
 | 8 | 2026-04-27 | Core Function Gap Check | `d917a62` | `master` |
@@ -406,3 +406,168 @@ Localized JSP frontend UI and displayed backend messages to Simplified Chinese,
 ### Next Steps

 - None - task complete
+
+
+## Session 11: Frontend Reference Redesign
+
+**Date**: 2026-04-28
+**Task**: Frontend Reference Redesign
+**Branch**: `master`
+
+### Summary
+
+Refactored the JSP frontend to match the provided library dashboard reference image, including shared sidebar/topbar layout, dashboard panels, role-aware visibility fixes, Maven verification, and spec context updates.
+
+### Main Changes
+
+(Add details)
+
+### Git Commits
+
+| Hash | Message |
+|------|---------|
+| `89b6dd1` | (see git log) |
+
+### Testing
+
+- [OK] (Add test results)
+
+### Status
+
+[OK] **Completed**
+
+### Next Steps
+
+- None - task complete
+
+
+## Session 12: Windows login diagnostics and demo credentials
+
+**Date**: 2026-04-28
+**Task**: Windows login diagnostics and demo credentials
+**Branch**: `master`
+
+### Summary
+
+Added safe login/database diagnostic logs, documented local demo credentials, updated seed hashes, verified Maven build.
+
+### Main Changes
+
+(Add details)
+
+### Git Commits
+
+| Hash | Message |
+|------|---------|
+| `781ce46` | (see git log) |
+
+### Testing
+
+- [OK] (Add test results)
+
+### Status
+
+[OK] **Completed**
+
+### Next Steps
+
+- None - task complete
+
+
+## Session 13: Frontend workbench display fix
+
+**Date**: 2026-04-28
+**Task**: Frontend workbench display fix
+**Branch**: `master`
+
+### Summary
+
+Replaced hard-coded dashboard data with service-backed workbench data, simplified sidebar/workbench UI, kept sidebar persistent, updated frontend specs, and verified with Maven/service checks.
+
+### Main Changes
+
+(Add details)
+
+### Git Commits
+
+| Hash | Message |
+|------|---------|
+| `0a386b8` | (see git log) |
+
+### Testing
+
+- [OK] (Add test results)
+
+### Status
+
+[OK] **Completed**
+
+### Next Steps
+
+- None - task complete
+
+
+## Session 14: Sidebar layout and management UX cleanup
+
+**Date**: 2026-04-28
+**Task**: Sidebar layout and management UX cleanup
+**Branch**: `master`
+
+### Summary
+
+Fixed sidebar active-state routing and navigation order, corrected management page hero layouts, removed dashboard technical copy, clarified reader profile versus user account UI, updated frontend navigation spec, and verified Maven package build.
+
+### Main Changes
+
+(Add details)
+
+### Git Commits
+
+| Hash | Message |
+|------|---------|
+| `d0e71f2` | (see git log) |
+
+### Testing
+
+- [OK] (Add test results)
+
+### Status
+
+[OK] **Completed**
+
+### Next Steps
+
+- None - task complete
+
+
+## Session 15: 登录界面重构
+
+**Date**: 2026-04-28
+**Task**: 登录界面重构
+**Branch**: `master`
+
+### Summary
+
+按参考截图重构真实可用登录页，保留 /login 认证流程，补充登录辅助控件规范并完成 Trellis 质量检查。
+
+### Main Changes
+
+(Add details)
+
+### Git Commits
+
+| Hash | Message |
+|------|---------|
+| `8535b4804bc48e6f23d3107f1b34e0a16479e020` | (see git log) |
+
+### Testing
+
+- [OK] (Add test results)
+
+### Status
+
+[OK] **Completed**
+
+### Next Steps
+
+- None - task complete
@@ -109,7 +109,36 @@ src/main/resources/db/schema.sql
 mysql -u root -p < src/main/resources/db/schema.sql
 ```

-脚本内包含本地验证用的演示角色、权限、用户、读者、分类和图书数据。演示账户只用于本地脚手架验证；在非本地数据库中使用前应更换或删除这些数据。本文档不提供任何登录明文密码。
+脚本内包含本地验证用的演示角色、权限、用户、读者、分类和图书数据。演示账户只用于本地脚手架验证；在非本地数据库中使用前应更换或删除这些数据。
+
+本地/demo 初始登录账号如下。这些是应用登录账号，不是 MySQL 数据库账号：
+
+| 角色 | 用户名 | 初始密码 |
+| --- | --- | --- |
+| 管理员 | `admin` | `admin123` |
+| 馆员 | `librarian` | `librarian123` |
+| 读者 | `reader` | `reader123` |
+
+这些明文密码只用于新部署本地环境的首次验证。非本地或生产环境上线前，必须通过系统用户管理功能改密，或删除/替换这些演示账号。
+
+`schema.sql` 使用 `INSERT IGNORE INTO users` 写入演示账号。如果目标数据库里已经存在同名 `admin`、`librarian` 或 `reader` 行，重新执行脚本不会覆盖现有密码哈希。需要重置本地演示账号时，优先在系统用户管理功能中修改密码；如果无法登录，可在确认这是本地/demo 数据库后执行以下 SQL：
+
+```sql
+UPDATE users
+SET password_hash = 'pbkdf2_sha256$60000$Ren1B30RDysysnApRiFVaQ==$1XwzMHaALqC7dKffwjbQkilBedfAuiMOXbR/xTMr5+Y=',
+    active = 1
+WHERE username = 'admin';
+
+UPDATE users
+SET password_hash = 'pbkdf2_sha256$60000$PV/DJwZlMRm8vy0lKMAM4g==$+Aijfop3YoPp6HTePN5r4wG8N3qgxJE+yZHkTfzfbaw=',
+    active = 1
+WHERE username = 'librarian';
+
+UPDATE users
+SET password_hash = 'pbkdf2_sha256$60000$wBzxTIT4ep79hgEzYDV9aQ==$w3oO5iSKRSfG4++b4558yiTHy6Tz9BB2+wuV9UOAKhs=',
+    active = 1
+WHERE username = 'reader';
+```

 ## 本地配置

@@ -327,9 +356,9 @@ Maven 当前将 WAR 产物命名为 `library-management.war`。Tomcat 通常会

 不可以。`src/main/resources/db.properties` 是本地私密配置，已经被 `.gitignore` 忽略。只应提交 `src/main/resources/db.properties.example`。

-### README 为什么不列出演示账号密码？
+### 重新执行 `schema.sql` 后演示账号密码为什么没变？

-数据库脚本包含本地验证用演示数据，但项目要求 README 不写入未经确认的默认登录明文密码，也不扩散任何凭据。需要本地调试时，请由维护者按当前数据库脚本和安全要求单独确认或重置账号。
+`schema.sql` 使用 `INSERT IGNORE INTO users` 写入本地/demo 账号。已有同名用户时，MySQL 会跳过插入，不会覆盖现有密码哈希。需要重置时，请参考“数据库初始化”里的本地/demo 账号说明；不要在非本地数据库中直接恢复这些演示密码。

 ## 维护提示

@@ -1,9 +1,37 @@
 package com.mzh.library.controller;

+import com.mzh.library.dao.impl.JdbcBookDao;
+import com.mzh.library.dao.impl.JdbcBorrowRecordDao;
+import com.mzh.library.dao.impl.JdbcReaderDao;
+import com.mzh.library.dao.impl.JdbcReportDao;
 import com.mzh.library.entity.AuthenticatedUser;
+import com.mzh.library.entity.Book;
+import com.mzh.library.entity.BookCategory;
+import com.mzh.library.entity.BookSearchCriteria;
+import com.mzh.library.entity.BookStatus;
+import com.mzh.library.entity.BorrowRecord;
+import com.mzh.library.entity.BorrowRecordSearchCriteria;
+import com.mzh.library.entity.BorrowingSummary;
+import com.mzh.library.entity.InventorySummary;
+import com.mzh.library.entity.Reader;
+import com.mzh.library.entity.ReaderSearchCriteria;
+import com.mzh.library.entity.ReportCenter;
+import com.mzh.library.entity.Role;
+import com.mzh.library.service.BookService;
+import com.mzh.library.service.BorrowingService;
+import com.mzh.library.service.ReaderService;
+import com.mzh.library.service.ReportService;
+import com.mzh.library.service.ServiceResult;
+import com.mzh.library.service.impl.BookServiceImpl;
+import com.mzh.library.service.impl.BorrowingServiceImpl;
+import com.mzh.library.service.impl.ReaderServiceImpl;
+import com.mzh.library.service.impl.ReportServiceImpl;
 import com.mzh.library.util.SessionAttributes;

 import java.io.IOException;
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;

 import javax.servlet.ServletException;
 import javax.servlet.http.HttpServlet;
@@ -14,13 +42,200 @@ import javax.servlet.http.HttpSession;
 public class DashboardServlet extends HttpServlet {
    private static final String DASHBOARD_JSP = "/WEB-INF/jsp/dashboard.jsp";

+    private BookService bookService;
+    private BorrowingService borrowingService;
+    private ReaderService readerService;
+    private ReportService reportService;
+
+    @Override
+    public void init() {
+        this.bookService = new BookServiceImpl(new JdbcBookDao());
+        this.borrowingService = new BorrowingServiceImpl(new JdbcBorrowRecordDao());
+        this.readerService = new ReaderServiceImpl(new JdbcReaderDao());
+        this.reportService = new ReportServiceImpl(new JdbcReportDao());
+    }
+
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
-        HttpSession session = request.getSession(false);
-        AuthenticatedUser user = session == null
-            ? null
-            : (AuthenticatedUser) session.getAttribute(SessionAttributes.AUTHENTICATED_USER);
+        AuthenticatedUser user = currentUser(request);
        request.setAttribute("currentUser", user);
+
+        ServiceResult<List<BookCategory>> categoryResult = bookService.listCategories();
+        request.setAttribute("categories", categoryResult.isSuccessful()
+            ? listOrEmpty(categoryResult.getData())
+            : Collections.emptyList());
+        if (!categoryResult.isSuccessful()) {
+            setErrorMessage(request, categoryResult.getMessage());
+        }
+
+        ServiceResult<List<Book>> bookResult = bookService.searchBooks(new BookSearchCriteria());
+        List<Book> dashboardBooks = bookResult.isSuccessful()
+            ? listOrEmpty(bookResult.getData())
+            : Collections.emptyList();
+        request.setAttribute("dashboardBooks", dashboardBooks);
+        if (!bookResult.isSuccessful()) {
+            setErrorMessage(request, bookResult.getMessage());
+        }
+
+        List<DashboardMetric> metrics = Collections.emptyList();
+        if (isStaff(user)) {
+            Integer readerTotal = null;
+            ServiceResult<List<Reader>> readerResult = readerService.searchReaders(new ReaderSearchCriteria());
+            if (readerResult.isSuccessful()) {
+                readerTotal = listOrEmpty(readerResult.getData()).size();
+            } else {
+                setErrorMessage(request, readerResult.getMessage());
+            }
+
+            ServiceResult<ReportCenter> reportResult = reportService.loadReportCenter(user);
+            if (reportResult.isSuccessful()) {
+                ReportCenter reportCenter = reportResult.getData();
+                request.setAttribute("reportCenter", reportCenter);
+                metrics = metricsFromReport(reportCenter, readerTotal);
+            } else {
+                setErrorMessage(request, reportResult.getMessage());
+            }
+
+            ServiceResult<List<BorrowRecord>> borrowResult =
+                borrowingService.searchRecords(user, new BorrowRecordSearchCriteria());
+            request.setAttribute("dashboardBorrowRecords", borrowResult.isSuccessful()
+                ? listOrEmpty(borrowResult.getData())
+                : Collections.emptyList());
+            if (!borrowResult.isSuccessful()) {
+                setErrorMessage(request, borrowResult.getMessage());
+            }
+        }
+
+        if (metrics.isEmpty() && bookResult.isSuccessful()) {
+            metrics = metricsFromBooks(dashboardBooks);
+        }
+        request.setAttribute("dashboardMetrics", metrics);
        request.getRequestDispatcher(DASHBOARD_JSP).forward(request, response);
    }
+
+    private AuthenticatedUser currentUser(HttpServletRequest request) {
+        HttpSession session = request.getSession(false);
+        Object value = session == null ? null : session.getAttribute(SessionAttributes.AUTHENTICATED_USER);
+        return value instanceof AuthenticatedUser ? (AuthenticatedUser) value : null;
+    }
+
+    private boolean isStaff(AuthenticatedUser user) {
+        return user != null && (user.getRole() == Role.ADMINISTRATOR || user.getRole() == Role.LIBRARIAN);
+    }
+
+    private <T> List<T> listOrEmpty(List<T> values) {
+        return values == null ? Collections.emptyList() : values;
+    }
+
+    private List<DashboardMetric> metricsFromReport(ReportCenter reportCenter, Integer readerTotal) {
+        if (reportCenter == null) {
+            return Collections.emptyList();
+        }
+        InventorySummary inventory = reportCenter.getInventorySummary();
+        BorrowingSummary borrowing = reportCenter.getBorrowingSummary();
+        List<DashboardMetric> metrics = new ArrayList<>();
+        metrics.add(new DashboardMetric("馆藏总册", valueOf(inventory, MetricField.TOTAL_COPIES), "册", "来自报表中心"));
+        metrics.add(new DashboardMetric("当前借出", valueOf(borrowing, MetricField.ACTIVE_LOANS), "册", "实时借阅记录"));
+        metrics.add(new DashboardMetric("逾期借阅", valueOf(borrowing, MetricField.OVERDUE_LOANS), "册", "需跟进记录"));
+        if (readerTotal == null) {
+            metrics.add(new DashboardMetric("可借册数", valueOf(inventory, MetricField.AVAILABLE_COPIES),
+                "册", "馆藏可借库存"));
+        } else {
+            metrics.add(new DashboardMetric("读者总数", readerTotal, "人", "实时读者档案"));
+        }
+        return metrics;
+    }
+
+    private List<DashboardMetric> metricsFromBooks(List<Book> books) {
+        int totalTitles = 0;
+        int totalCopies = 0;
+        int availableCopies = 0;
+        int unavailableOrEmptyTitles = 0;
+        for (Book book : books) {
+            totalTitles++;
+            totalCopies += book.getTotalCopies();
+            availableCopies += book.getAvailableCopies();
+            if (book.getStatus() != BookStatus.AVAILABLE || book.getAvailableCopies() <= 0) {
+                unavailableOrEmptyTitles++;
+            }
+        }
+
+        List<DashboardMetric> metrics = new ArrayList<>();
+        metrics.add(new DashboardMetric("图书种类", totalTitles, "种", "来自馆藏检索"));
+        metrics.add(new DashboardMetric("馆藏总册", totalCopies, "册", "来自馆藏检索"));
+        metrics.add(new DashboardMetric("可借册数", availableCopies, "册", "来自馆藏检索"));
+        metrics.add(new DashboardMetric("需关注馆藏", unavailableOrEmptyTitles, "种", "不可借或无库存"));
+        return metrics;
+    }
+
+    private int valueOf(InventorySummary summary, MetricField field) {
+        if (summary == null) {
+            return 0;
+        }
+        switch (field) {
+            case TOTAL_COPIES:
+                return summary.getTotalCopies();
+            case AVAILABLE_COPIES:
+                return summary.getAvailableCopies();
+            default:
+                return 0;
+        }
+    }
+
+    private int valueOf(BorrowingSummary summary, MetricField field) {
+        if (summary == null) {
+            return 0;
+        }
+        switch (field) {
+            case ACTIVE_LOANS:
+                return summary.getActiveLoans();
+            case OVERDUE_LOANS:
+                return summary.getOverdueLoans();
+            default:
+                return 0;
+        }
+    }
+
+    private void setErrorMessage(HttpServletRequest request, String message) {
+        if (message != null && !message.isEmpty() && request.getAttribute("errorMessage") == null) {
+            request.setAttribute("errorMessage", message);
+        }
+    }
+
+    private enum MetricField {
+        TOTAL_COPIES,
+        AVAILABLE_COPIES,
+        ACTIVE_LOANS,
+        OVERDUE_LOANS
+    }
+
+    public static final class DashboardMetric {
+        private final String label;
+        private final int value;
+        private final String unit;
+        private final String note;
+
+        private DashboardMetric(String label, int value, String unit, String note) {
+            this.label = label;
+            this.value = value;
+            this.unit = unit;
+            this.note = note;
+        }
+
+        public String getLabel() {
+            return label;
+        }
+
+        public int getValue() {
+            return value;
+        }
+
+        public String getUnit() {
+            return unit;
+        }
+
+        public String getNote() {
+            return note;
+        }
+    }
 }
@@ -8,6 +8,7 @@ import com.mzh.library.service.impl.AuthServiceImpl;
 import com.mzh.library.util.SessionAttributes;

 import java.io.IOException;
+import java.util.logging.Logger;

 import javax.servlet.ServletException;
 import javax.servlet.http.HttpServlet;
@@ -16,6 +17,7 @@ import javax.servlet.http.HttpServletResponse;
 import javax.servlet.http.HttpSession;

 public class LoginServlet extends HttpServlet {
+    private static final Logger LOGGER = Logger.getLogger(LoginServlet.class.getName());
    private static final String LOGIN_JSP = "/WEB-INF/jsp/auth/login.jsp";
    private static final String DASHBOARD_PATH = "/dashboard";
    private static final int SESSION_TIMEOUT_SECONDS = 30 * 60;
@@ -40,9 +42,13 @@ public class LoginServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
-        String username = trim(request.getParameter("username"));
+        String submittedUsername = request.getParameter("username");
+        String username = trim(submittedUsername);
        String password = request.getParameter("password");
-        String redirect = safeRedirect(request.getParameter("redirect"));
+        String submittedRedirect = request.getParameter("redirect");
+        String redirect = safeRedirect(submittedRedirect);
+
+        logLoginPost(request, submittedUsername, username, password, submittedRedirect, redirect);

        AuthenticationResult result = authService.authenticate(username, password);
        if (!result.isAuthenticated()) {
@@ -57,6 +63,26 @@ public class LoginServlet extends HttpServlet {
        response.sendRedirect(resolveRedirect(request, redirect));
    }

+    private void logLoginPost(
+        HttpServletRequest request,
+        String submittedUsername,
+        String username,
+        String password,
+        String submittedRedirect,
+        String redirect
+    ) {
+        LOGGER.info("Login POST reached"
+            + " remoteAddr=" + safeLogValue(request.getRemoteAddr())
+            + " contextPath=" + safeLogValue(request.getContextPath())
+            + " redirectSubmitted=" + !trim(submittedRedirect).isEmpty()
+            + " redirectAccepted=" + !redirect.isEmpty()
+            + " usernameSubmitted=" + (submittedUsername != null)
+            + " usernameLength=" + length(submittedUsername)
+            + " normalizedUsernameLength=" + username.length()
+            + " usernameNormalizedChanged=" + !username.equals(nullToEmpty(submittedUsername))
+            + " passwordSubmitted=" + (password != null));
+    }
+
    private boolean isAuthenticated(HttpServletRequest request) {
        HttpSession session = request.getSession(false);
        return session != null && session.getAttribute(SessionAttributes.AUTHENTICATED_USER) != null;
@@ -97,4 +123,29 @@ public class LoginServlet extends HttpServlet {
    private String trim(String value) {
        return value == null ? "" : value.trim();
    }
+
+    private int length(String value) {
+        return value == null ? 0 : value.length();
+    }
+
+    private String nullToEmpty(String value) {
+        return value == null ? "" : value;
+    }
+
+    private String safeLogValue(String value) {
+        if (value == null) {
+            return "";
+        }
+
+        StringBuilder builder = new StringBuilder();
+        int limit = Math.min(value.length(), 120);
+        for (int i = 0; i < limit; i++) {
+            char current = value.charAt(i);
+            builder.append(Character.isISOControl(current) ? '?' : current);
+        }
+        if (value.length() > limit) {
+            builder.append("...");
+        }
+        return builder.toString();
+    }
 }
@@ -18,8 +18,11 @@ import java.time.LocalDateTime;
 import java.util.ArrayList;
 import java.util.List;
 import java.util.Optional;
+import java.util.logging.Level;
+import java.util.logging.Logger;

 public class JdbcUserDao implements UserDao, UserAccountDao {
+    private static final Logger LOGGER = Logger.getLogger(JdbcUserDao.class.getName());
    private static final String USER_COLUMNS = ""
        + "id, username, password_hash, display_name, role_code, active, created_at, updated_at ";

@@ -48,18 +51,27 @@ public class JdbcUserDao implements UserDao, UserAccountDao {

    @Override
    public Optional<User> findActiveByUsername(String username) {
+        LOGGER.info("Active user lookup start username=" + safeLogValue(username)
+            + " usernameLength=" + length(username));
        try (Connection connection = JdbcUtil.getConnection();
             PreparedStatement statement = connection.prepareStatement(FIND_ACTIVE_BY_USERNAME)) {
            statement.setString(1, username);

            try (ResultSet resultSet = statement.executeQuery()) {
                if (!resultSet.next()) {
+                    LOGGER.info("Active user lookup result=not-found username=" + safeLogValue(username));
                    return Optional.empty();
                }

-                return Optional.of(mapUser(resultSet));
+                User user = mapUser(resultSet);
+                LOGGER.info("Active user lookup result=found"
+                    + " userId=" + user.getId()
+                    + " role=" + user.getRole().getCode()
+                    + " username=" + safeLogValue(username));
+                return Optional.of(user);
            }
        } catch (SQLException | IllegalArgumentException ex) {
+            LOGGER.log(Level.SEVERE, "Active user lookup failed username=" + safeLogValue(username), ex);
            throw new DaoException("Unable to load active user by username", ex);
        }
    }
@@ -205,4 +217,25 @@ public class JdbcUserDao implements UserDao, UserAccountDao {
    private LocalDateTime toLocalDateTime(Timestamp timestamp) {
        return timestamp == null ? null : timestamp.toLocalDateTime();
    }
+
+    private int length(String value) {
+        return value == null ? 0 : value.length();
+    }
+
+    private String safeLogValue(String value) {
+        if (value == null) {
+            return "";
+        }
+
+        StringBuilder builder = new StringBuilder();
+        int limit = Math.min(value.length(), 120);
+        for (int i = 0; i < limit; i++) {
+            char current = value.charAt(i);
+            builder.append(Character.isISOControl(current) ? '?' : current);
+        }
+        if (value.length() > limit) {
+            builder.append("...");
+        }
+        return builder.toString();
+    }
 }
@@ -8,6 +8,7 @@ import javax.servlet.FilterConfig;
 import javax.servlet.ServletException;
 import javax.servlet.ServletRequest;
 import javax.servlet.ServletResponse;
+import javax.servlet.http.HttpServletRequest;

 public class CharacterEncodingFilter implements Filter {
    private String encoding = "UTF-8";
@@ -25,6 +26,39 @@ public class CharacterEncodingFilter implements Filter {
        throws IOException, ServletException {
        request.setCharacterEncoding(encoding);
        response.setCharacterEncoding(encoding);
+        if (isHtmlRequest(request)) {
+            response.setContentType("text/html;charset=" + encoding);
+        }
        chain.doFilter(request, response);
    }
+
+    private boolean isHtmlRequest(ServletRequest request) {
+        if (!(request instanceof HttpServletRequest)) {
+            return true;
+        }
+
+        HttpServletRequest httpRequest = (HttpServletRequest) request;
+        String contextPath = httpRequest.getContextPath();
+        String requestUri = httpRequest.getRequestURI();
+        String path = requestUri.substring(contextPath.length());
+        return !path.startsWith("/static/")
+            && !path.equals("/favicon.ico")
+            && !hasStaticAssetExtension(path);
+    }
+
+    private boolean hasStaticAssetExtension(String path) {
+        String normalizedPath = path.toLowerCase();
+        return normalizedPath.endsWith(".css")
+            || normalizedPath.endsWith(".js")
+            || normalizedPath.endsWith(".png")
+            || normalizedPath.endsWith(".jpg")
+            || normalizedPath.endsWith(".jpeg")
+            || normalizedPath.endsWith(".gif")
+            || normalizedPath.endsWith(".svg")
+            || normalizedPath.endsWith(".ico")
+            || normalizedPath.endsWith(".woff")
+            || normalizedPath.endsWith(".woff2")
+            || normalizedPath.endsWith(".ttf")
+            || normalizedPath.endsWith(".map");
+    }
 }
@@ -36,24 +36,49 @@ public class AuthServiceImpl implements AuthService {
    @Override
    public AuthenticationResult authenticate(String username, String password) {
        String normalizedUsername = normalizeUsername(username);
-        if (normalizedUsername.isEmpty() || password == null || password.trim().isEmpty()) {
+        if (!normalizedUsername.equals(nullToEmpty(username))) {
+            LOGGER.info("Login username normalized"
+                + " usernameSubmitted=" + (username != null)
+                + " usernameLength=" + length(username)
+                + " normalizedUsernameLength=" + normalizedUsername.length()
+                + " normalizedUsername=" + safeLogValue(normalizedUsername));
+        }
+
+        boolean usernameMissing = normalizedUsername.isEmpty();
+        boolean passwordMissing = password == null || password.trim().isEmpty();
+        if (usernameMissing || passwordMissing) {
+            LOGGER.info("Login rejected reason=missing-required"
+                + " usernameSubmitted=" + (username != null)
+                + " usernameMissing=" + usernameMissing
+                + " passwordSubmitted=" + (password != null)
+                + " passwordMissing=" + passwordMissing);
            return AuthenticationResult.failure(REQUIRED_MESSAGE);
        }

        try {
+            LOGGER.info("Login lookup start username=" + safeLogValue(normalizedUsername));
            Optional<User> user = userDao.findActiveByUsername(normalizedUsername);
-            if (!user.isPresent() || !PasswordHasher.verify(password, user.get().getPasswordHash())) {
-                LOGGER.info("Login failed for username=" + normalizedUsername);
+            if (!user.isPresent()) {
+                LOGGER.info("Login failed reason=active-user-not-found username=" + safeLogValue(normalizedUsername));
                return AuthenticationResult.failure(INVALID_MESSAGE);
            }

-            User authenticated = user.get();
+            User candidate = user.get();
+            if (!PasswordHasher.verify(password, candidate.getPasswordHash())) {
+                LOGGER.info("Login failed reason=password-mismatch"
+                    + " userId=" + candidate.getId()
+                    + " role=" + candidate.getRole().getCode()
+                    + " username=" + safeLogValue(normalizedUsername));
+                return AuthenticationResult.failure(INVALID_MESSAGE);
+            }
+
+            User authenticated = candidate;
            Set<Permission> permissions = permissionPolicy.permissionsFor(authenticated.getRole());
            AuthenticatedUser sessionUser = AuthenticatedUser.from(authenticated, permissions);
            LOGGER.info("Login success userId=" + authenticated.getId() + " role=" + authenticated.getRole().getCode());
            return AuthenticationResult.success(sessionUser);
        } catch (DaoException | IllegalStateException ex) {
-            LOGGER.log(Level.SEVERE, "Login service error for username=" + normalizedUsername, ex);
+            LOGGER.log(Level.SEVERE, "Login service error for username=" + safeLogValue(normalizedUsername), ex);
            return AuthenticationResult.failure(UNAVAILABLE_MESSAGE);
        }
    }
@@ -66,4 +91,29 @@ public class AuthServiceImpl implements AuthService {
    private String normalizeUsername(String username) {
        return username == null ? "" : username.trim();
    }
+
+    private String nullToEmpty(String value) {
+        return value == null ? "" : value;
+    }
+
+    private int length(String value) {
+        return value == null ? 0 : value.length();
+    }
+
+    private String safeLogValue(String value) {
+        if (value == null) {
+            return "";
+        }
+
+        StringBuilder builder = new StringBuilder();
+        int limit = Math.min(value.length(), 120);
+        for (int i = 0; i < limit; i++) {
+            char current = value.charAt(i);
+            builder.append(Character.isISOControl(current) ? '?' : current);
+        }
+        if (value.length() > limit) {
+            builder.append("...");
+        }
+        return builder.toString();
+    }
 }
@@ -8,10 +8,17 @@ import java.sql.Connection;
 import java.sql.DriverManager;
 import java.sql.SQLException;
 import java.util.Properties;
+import java.util.logging.Level;
+import java.util.logging.Logger;

 public final class JdbcUtil {
+    private static final Logger LOGGER = Logger.getLogger(JdbcUtil.class.getName());
    private static final String CONFIG_FILE = "db.properties";
    private static final String DEFAULT_DRIVER = "com.mysql.cj.jdbc.Driver";
+    private static final String DRIVER_KEY = "db.driver";
+    private static final String URL_KEY = "db.url";
+    private static final String USERNAME_KEY = "db.username";
+    private static final String PASSWORD_KEY = "db.password";

    @FunctionalInterface
    public interface TransactionCallback<T> {
@@ -23,16 +30,42 @@ public final class JdbcUtil {

    public static Connection getConnection() {
        Properties properties = loadProperties();
-        String driver = properties.getProperty("db.driver", DEFAULT_DRIVER);
-        String url = required(properties, "db.url");
-        String username = required(properties, "db.username");
-        String password = required(properties, "db.password");
+        String driver = properties.getProperty(DRIVER_KEY, DEFAULT_DRIVER);
+        String url = required(properties, URL_KEY);
+        String username = required(properties, USERNAME_KEY);
+        String password = required(properties, PASSWORD_KEY);
+
+        LOGGER.info("Database connection configuration resolved"
+            + " file=" + CONFIG_FILE
+            + " driverKey=" + DRIVER_KEY
+            + " driver=" + safeLogValue(driver)
+            + " jdbcUrl=" + redactJdbcUrl(url)
+            + " usernameKey=" + USERNAME_KEY
+            + " usernameConfigured=" + !username.isEmpty()
+            + " password=<redacted>");
+        LOGGER.info("Database connection attempt"
+            + " driverKey=" + DRIVER_KEY
+            + " driver=" + safeLogValue(driver)
+            + " jdbcUrl=" + redactJdbcUrl(url)
+            + " usernameKey=" + USERNAME_KEY);

        try {
            Class.forName(driver);
-            return DriverManager.getConnection(url, username, password);
-        } catch (ClassNotFoundException | SQLException ex) {
+            Connection connection = DriverManager.getConnection(url, username, password);
+            LOGGER.info("Database connection established jdbcUrl=" + redactJdbcUrl(url)
+                + " usernameKey=" + USERNAME_KEY);
+            return connection;
+        } catch (ClassNotFoundException ex) {
+            LOGGER.log(Level.SEVERE, "JDBC driver unavailable driver=" + safeLogValue(driver)
+                + " jdbcUrl=" + redactJdbcUrl(url)
+                + " usernameKey=" + USERNAME_KEY, ex);
            throw new DaoException("Unable to open database connection", ex);
+        } catch (SQLException ex) {
+            SQLException safeException = safeSqlException(ex);
+            LOGGER.log(Level.SEVERE, "Database connection failed driver=" + safeLogValue(driver)
+                + " jdbcUrl=" + redactJdbcUrl(url)
+                + " usernameKey=" + USERNAME_KEY, safeException);
+            throw new DaoException("Unable to open database connection", safeException);
        }
    }

@@ -68,13 +101,20 @@ public final class JdbcUtil {
            .getContextClassLoader()
            .getResourceAsStream(CONFIG_FILE)) {
            if (inputStream == null) {
+                LOGGER.severe("Database configuration file not found file=" + CONFIG_FILE);
                throw new DaoException("Missing database configuration file: " + CONFIG_FILE, null);
            }

            Properties properties = new Properties();
            properties.load(inputStream);
+            LOGGER.info("Database configuration loaded file=" + CONFIG_FILE
+                + " driverConfigured=" + hasText(properties, DRIVER_KEY)
+                + " urlConfigured=" + hasText(properties, URL_KEY)
+                + " usernameConfigured=" + hasText(properties, USERNAME_KEY)
+                + " passwordConfigured=" + hasText(properties, PASSWORD_KEY));
            return properties;
        } catch (IOException ex) {
+            LOGGER.log(Level.SEVERE, "Unable to read database configuration file=" + CONFIG_FILE, ex);
            throw new DaoException("Unable to read database configuration", ex);
        }
    }
@@ -82,8 +122,55 @@ public final class JdbcUtil {
    private static String required(Properties properties, String key) {
        String value = properties.getProperty(key);
        if (value == null || value.trim().isEmpty()) {
+            LOGGER.severe("Missing database configuration value key=" + key);
            throw new DaoException("Missing database configuration value: " + key, null);
        }
        return value.trim();
    }
+
+    private static String redactJdbcUrl(String value) {
+        if (value == null) {
+            return "";
+        }
+        return safeLogValue(redactSensitive(value));
+    }
+
+    private static SQLException safeSqlException(SQLException ex) {
+        SQLException safeException = new SQLException(
+            safeLogValue(redactSensitive(ex.getMessage())),
+            ex.getSQLState(),
+            ex.getErrorCode()
+        );
+        safeException.setStackTrace(ex.getStackTrace());
+        return safeException;
+    }
+
+    private static String redactSensitive(String value) {
+        if (value == null) {
+            return "";
+        }
+        return value.replaceAll("(?i)(password|pwd|pass|secret|token)(\\s*[=:]\\s*)([^;&\\s]*)", "$1$2<redacted>");
+    }
+
+    private static boolean hasText(Properties properties, String key) {
+        String value = properties.getProperty(key);
+        return value != null && !value.trim().isEmpty();
+    }
+
+    private static String safeLogValue(String value) {
+        if (value == null) {
+            return "";
+        }
+
+        StringBuilder builder = new StringBuilder();
+        int limit = Math.min(value.length(), 240);
+        for (int i = 0; i < limit; i++) {
+            char current = value.charAt(i);
+            builder.append(Character.isISOControl(current) ? '?' : current);
+        }
+        if (value.length() > limit) {
+            builder.append("...");
+        }
+        return builder.toString();
+    }
 }
@@ -179,23 +179,33 @@ INSERT IGNORE INTO role_permissions (role_code, permission_code) VALUES
  ('reader', 'view_catalog'),
  ('reader', 'borrow_books');

-- Demo accounts for local scaffold verification only. Change or remove them
-- before using a non-local database.
+-- Demo accounts for local scaffold verification only:
+--   admin/admin123, librarian/librarian123, reader/reader123.
+-- Change or remove them before using a non-local database.
 INSERT IGNORE INTO users (username, password_hash, display_name, role_code, active) VALUES
-  ('admin', 'pbkdf2_sha256$60000$bXpoLWFkbWluLWRlbW8tc2FsdA==$RwBCvhf3Wsc0jemnHlir4mdNZF4ZhHjrfHx/b1Bera0=', 'System Administrator', 'administrator', 1),
-  ('librarian', 'pbkdf2_sha256$60000$bXpoLWxpYnJhcmlhbi1kZW1vLXNhbHQ=$StIdJGDRIiF4aCr+qKuwvob5sL3+6j1caF2sQNqFi78=', 'Library Staff', 'librarian', 1),
-  ('reader', 'pbkdf2_sha256$60000$bXpoLXJlYWRlci1kZW1vLXNhbHQ=$iaiZPGhaIQ+2R2o9UQRj6wsrmYSJ4efqS3jCzM/XU7g=', 'Demo Reader', 'reader', 1);
+  ('admin', 'pbkdf2_sha256$60000$Ren1B30RDysysnApRiFVaQ==$1XwzMHaALqC7dKffwjbQkilBedfAuiMOXbR/xTMr5+Y=', 'System Administrator', 'administrator', 1),
+  ('librarian', 'pbkdf2_sha256$60000$PV/DJwZlMRm8vy0lKMAM4g==$+Aijfop3YoPp6HTePN5r4wG8N3qgxJE+yZHkTfzfbaw=', 'Library Staff', 'librarian', 1),
+  ('reader', 'pbkdf2_sha256$60000$wBzxTIT4ep79hgEzYDV9aQ==$w3oO5iSKRSfG4++b4558yiTHy6Tz9BB2+wuV9UOAKhs=', 'Demo Reader', 'reader', 1);

 INSERT IGNORE INTO readers (reader_identifier, user_id, full_name, phone, email, status, max_borrow_count) VALUES
  ('RD-0001', (SELECT id FROM users WHERE username = 'reader'), 'Demo Reader', '13800000000',
    'reader@example.com', 'active', 5),
-  ('RD-0002', NULL, 'Suspended Reader', '13900000000', 'suspended.reader@example.com', 'suspended', 3);
+  ('RD-0002', NULL, 'Suspended Reader', '13900000000', 'suspended.reader@example.com', 'suspended', 3),
+  ('RD-0101', NULL, '张晓雨', '13600010001', 'zhang.xiaoyu@example.com', 'active', 6),
+  ('RD-0102', NULL, '李明远', '13600010002', 'li.mingyuan@example.com', 'active', 5),
+  ('RD-0103', NULL, '王思涵', '13600010003', 'wang.sihan@example.com', 'active', 4),
+  ('RD-0104', NULL, '赵晨', '13600010004', 'zhao.chen@example.com', 'suspended', 3);

 INSERT INTO book_categories (name, description) VALUES
  ('Computer Science', 'Programming, software engineering, and systems books'),
  ('Literature', 'Classic and modern literature'),
  ('History', 'World and regional history'),
-  ('Science', 'Natural science and popular science')
+  ('Science', 'Natural science and popular science'),
+  ('中国文学', '中国现当代文学、经典小说和散文作品'),
+  ('计算机技术', '程序设计、软件工程、数据库和信息技术图书'),
+  ('历史文化', '中国历史、世界历史和文化研究读物'),
+  ('自然科学', '数学、物理、生命科学和科普读物'),
+  ('社会科学', '社会学、管理学和公共事务读物')
 ON DUPLICATE KEY UPDATE
  description = VALUES(description);

@@ -207,4 +217,16 @@ INSERT IGNORE INTO books (book_identifier, title, author, category_id, total_cop
  ('BK-0003', 'Pride and Prejudice', 'Jane Austen',
    (SELECT id FROM book_categories WHERE name = 'Literature'), 3, 3, 'available'),
  ('BK-0004', 'A Brief History of Time', 'Stephen Hawking',
-    (SELECT id FROM book_categories WHERE name = 'Science'), 2, 1, 'available');
+    (SELECT id FROM book_categories WHERE name = 'Science'), 2, 1, 'available'),
+  ('BK-0101', '活着', '余华',
+    (SELECT id FROM book_categories WHERE name = '中国文学'), 6, 5, 'available'),
+  ('BK-0102', '平凡的世界', '路遥',
+    (SELECT id FROM book_categories WHERE name = '中国文学'), 5, 5, 'available'),
+  ('BK-0103', '深入理解Java虚拟机', '周志明',
+    (SELECT id FROM book_categories WHERE name = '计算机技术'), 4, 3, 'available'),
+  ('BK-0104', '中国通史', '吕思勉',
+    (SELECT id FROM book_categories WHERE name = '历史文化'), 3, 3, 'available'),
+  ('BK-0105', '乡土中国', '费孝通',
+    (SELECT id FROM book_categories WHERE name = '社会科学'), 4, 4, 'available'),
+  ('BK-0106', '科学史十五讲', '江晓原',
+    (SELECT id FROM book_categories WHERE name = '自然科学'), 3, 2, 'available');
@@ -7,7 +7,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><c:out value="${formTitle}" /> - MZH 图书馆</title>
-    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
 </head>
 <body>
 <%@ include file="/WEB-INF/jsp/common/header.jspf" %>
@@ -6,19 +6,21 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>用户管理 - MZH 图书馆</title>
-    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
+    <title>用户账户管理 - MZH 图书馆</title>
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
 </head>
 <body>
 <%@ include file="/WEB-INF/jsp/common/header.jspf" %>
 <main class="page-shell">
    <section class="dashboard-hero catalog-hero" aria-labelledby="manage-users-title">
        <div>
-            <p class="eyebrow">系统管理</p>
-            <h1 id="manage-users-title">管理用户</h1>
-            <p>创建、更新、停用和查看管理员、馆员与读者账户。</p>
+            <p class="eyebrow">系统账户</p>
+            <h1 id="manage-users-title">用户账户与角色</h1>
+            <p>维护登录账户、角色、密码和启用状态；读者联系方式、借阅上限和资格请在读者管理中处理。</p>
+        </div>
+        <div class="hero-actions">
+            <a class="button button-primary" href="${pageContext.request.contextPath}/admin/users/new">新增用户账户</a>
        </div>
-        <a class="button button-primary" href="${pageContext.request.contextPath}/admin/users/new">新增用户</a>
    </section>

    <c:if test="${not empty successMessage}">
@@ -32,7 +34,7 @@
        </div>
    </c:if>

-    <section class="toolbar-panel" aria-label="用户管理检索">
+    <section class="toolbar-panel" aria-label="用户账户检索">
        <form class="search-form" action="${pageContext.request.contextPath}/admin/users" method="get">
            <div class="search-field">
                <label for="keyword">关键词</label>
@@ -6,44 +6,92 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>登录 - MZH 图书馆</title>
-    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
+    <title>登录 - 图书管理系统</title>
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-login-redesign">
 </head>
 <body class="auth-page">
-<%@ include file="/WEB-INF/jsp/common/header.jspf" %>
 <main class="auth-shell">
    <section class="login-panel" aria-labelledby="login-title">
-        <div>
-            <p class="eyebrow">图书馆管理</p>
-            <h1 id="login-title">登录</h1>
+        <div class="login-card-head">
+            <h1 id="login-title">图书管理系统</h1>
+            <p class="login-subtitle">欢迎登录图书管理平台</p>
        </div>

        <c:if test="${not empty errorMessage}">
-            <div class="message message-error" role="alert">
+            <div class="message message-error login-error" role="alert">
                <c:out value="${errorMessage}" />
            </div>
        </c:if>

-        <form class="login-form" action="${pageContext.request.contextPath}/login" method="post" novalidate>
+        <form class="login-form" action="${pageContext.request.contextPath}/login" method="post" novalidate data-login-form>
            <input type="hidden" name="redirect" value="${fn:escapeXml(redirect)}">
-            <label for="username">用户名</label>
-            <input id="username"
+            <div class="login-field">
+                <label class="sr-only" for="username">用户名</label>
+                <div class="login-input-shell">
+                    <span class="login-input-icon" aria-hidden="true">
+                        <svg viewBox="0 0 24 24" focusable="false">
+                            <path d="M20 21a8 8 0 0 0-16 0" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/>
+                            <circle cx="12" cy="7.5" r="4" fill="none" stroke="currentColor" stroke-width="1.9"/>
+                        </svg>
+                    </span>
+                    <input class="login-control"
+                           id="username"
                           name="username"
                           type="text"
                           value="${fn:escapeXml(username)}"
                           autocomplete="username"
+                           placeholder="用户名"
                           required>
+                </div>
+            </div>

-            <label for="password">密码</label>
-            <input id="password"
+            <div class="login-field">
+                <label class="sr-only" for="password">密码</label>
+                <div class="login-input-shell login-password-shell">
+                    <span class="login-input-icon" aria-hidden="true">
+                        <svg viewBox="0 0 24 24" focusable="false">
+                            <rect x="5" y="10" width="14" height="10" rx="2" fill="none" stroke="currentColor" stroke-width="1.9"/>
+                            <path d="M8 10V7.5a4 4 0 0 1 8 0V10M12 14.5v2" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/>
+                        </svg>
+                    </span>
+                    <input class="login-control"
+                           id="password"
                           name="password"
                           type="password"
                           autocomplete="current-password"
+                           placeholder="密码"
                           required>
+                    <button class="password-toggle"
+                            type="button"
+                            aria-label="显示密码"
+                            aria-controls="password"
+                            aria-pressed="false"
+                            data-password-toggle>
+                        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+                            <path d="M2.8 12s3.3-5.5 9.2-5.5 9.2 5.5 9.2 5.5-3.3 5.5-9.2 5.5S2.8 12 2.8 12Z" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/>
+                            <circle cx="12" cy="12" r="2.8" fill="none" stroke="currentColor" stroke-width="1.9"/>
+                        </svg>
+                    </button>
+                </div>
+            </div>

-            <button class="button button-primary" type="submit">登录</button>
+            <div class="login-options-row">
+                <label class="login-check">
+                    <input type="checkbox" name="rememberUsername" value="true" data-remember-username>
+                    <span>记住我</span>
+                </label>
+                <button class="forgot-password-link" type="button" data-forgot-password>
+                    忘记密码?
+                </button>
+            </div>
+            <p class="login-help-message" id="password-help" tabindex="-1" hidden>
+                请联系系统管理员重置密码。
+            </p>
+
+            <button class="button button-primary login-submit" type="submit">登录</button>
        </form>
    </section>
 </main>
+<script src="${pageContext.request.contextPath}/static/js/login.js?v=20260428-login-redesign"></script>
 </body>
 </html>
@@ -6,7 +6,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>无权限 - MZH 图书馆</title>
-    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
 </head>
 <body>
 <%@ include file="/WEB-INF/jsp/common/header.jspf" %>
@@ -7,15 +7,17 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>馆藏检索 - MZH 图书馆</title>
-    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
 </head>
 <body>
 <%@ include file="/WEB-INF/jsp/common/header.jspf" %>
 <main class="page-shell">
    <section class="dashboard-hero catalog-hero" aria-labelledby="catalog-title">
+        <div>
            <p class="eyebrow">馆藏</p>
            <h1 id="catalog-title">馆藏检索</h1>
            <p>按图书编号、书名、作者或分类检索馆藏。</p>
+        </div>
    </section>

    <c:if test="${not empty errorMessage}">
@@ -58,9 +60,6 @@

            <button class="button button-primary" type="submit">检索</button>
            <a class="button button-secondary" href="${pageContext.request.contextPath}/catalog">清空</a>
-            <c:if test="${canManageBooks}">
-                <a class="button button-secondary" href="${pageContext.request.contextPath}/books">管理图书</a>
-            </c:if>
        </form>
    </section>

@@ -6,7 +6,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>分类管理 - MZH 图书馆</title>
-    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
 </head>
 <body>
 <%@ include file="/WEB-INF/jsp/common/header.jspf" %>
@@ -19,7 +19,6 @@
        </div>
        <div class="hero-actions">
            <a class="button button-primary" href="${pageContext.request.contextPath}/book-categories/new">新增分类</a>
-            <a class="button button-secondary" href="${pageContext.request.contextPath}/books">管理图书</a>
        </div>
    </section>

@@ -7,7 +7,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><c:out value="${formTitle}" /> - MZH 图书馆</title>
-    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
 </head>
 <body>
 <%@ include file="/WEB-INF/jsp/common/header.jspf" %>
@@ -7,7 +7,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><c:out value="${formTitle}" /> - MZH 图书馆</title>
-    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
 </head>
 <body>
 <%@ include file="/WEB-INF/jsp/common/header.jspf" %>
@@ -7,18 +7,19 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>图书管理 - MZH 图书馆</title>
-    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
 </head>
 <body>
 <%@ include file="/WEB-INF/jsp/common/header.jspf" %>
 <main class="page-shell">
    <section class="dashboard-hero catalog-hero" aria-labelledby="manage-title">
+        <div>
            <p class="eyebrow">图书管理</p>
            <h1 id="manage-title">管理图书</h1>
            <p>创建、更新、删除和查看馆藏记录的库存信息。</p>
+        </div>
        <div class="hero-actions">
            <a class="button button-primary" href="${pageContext.request.contextPath}/books/new">新增图书</a>
-            <a class="button button-secondary" href="${pageContext.request.contextPath}/book-categories">分类</a>
        </div>
    </section>

@@ -67,8 +68,6 @@

            <button class="button button-primary" type="submit">检索</button>
            <a class="button button-secondary" href="${pageContext.request.contextPath}/books">清空</a>
-            <a class="button button-secondary" href="${pageContext.request.contextPath}/catalog">查看馆藏</a>
-            <a class="button button-secondary" href="${pageContext.request.contextPath}/book-categories">分类</a>
        </form>
    </section>

@@ -7,7 +7,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>新增借阅 - MZH 图书馆</title>
-    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
 </head>
 <body>
 <%@ include file="/WEB-INF/jsp/common/header.jspf" %>
@@ -7,7 +7,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>借阅管理 - MZH 图书馆</title>
-    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
 </head>
 <body>
 <%@ include file="/WEB-INF/jsp/common/header.jspf" %>
@@ -1,31 +1,93 @@
+<%@ page pageEncoding="UTF-8" %>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
-<header class="app-header">
-    <a class="brand" href="${pageContext.request.contextPath}/dashboard">MZH 图书馆</a>
-    <c:if test="${not empty sessionScope.authenticatedUser}">
-        <nav class="top-nav" aria-label="主导航">
-            <a href="${pageContext.request.contextPath}/dashboard">控制台</a>
-            <a href="${pageContext.request.contextPath}/catalog">馆藏检索</a>
-            <c:if test="${sessionScope.userRole == 'administrator'}">
-                <a href="${pageContext.request.contextPath}/admin/home">管理</a>
-                <a href="${pageContext.request.contextPath}/admin/users">用户</a>
-                <a href="${pageContext.request.contextPath}/admin/system-logs">日志</a>
+<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
+<header class="app-header ${not empty sessionScope.authenticatedUser ? 'app-header-auth' : 'app-header-public'}">
+    <c:choose>
+        <c:when test="${not empty sessionScope.authenticatedUser}">
+            <c:set var="currentPath" value="${requestScope['javax.servlet.forward.servlet_path']}" />
+            <c:if test="${empty currentPath}">
+                <c:set var="currentPath" value="${pageContext.request.servletPath}" />
            </c:if>
+            <aside class="app-sidebar" aria-label="主导航">
+                <a class="sidebar-brand" href="${pageContext.request.contextPath}/dashboard">
+                    <span class="brand-text">图书管理系统</span>
+                </a>
+
+                <nav class="side-nav" aria-label="模块导航">
                    <c:if test="${sessionScope.userRole == 'administrator' or sessionScope.userRole == 'librarian'}">
-                <a href="${pageContext.request.contextPath}/librarian/home">馆员</a>
-                <a href="${pageContext.request.contextPath}/books">图书</a>
-                <a href="${pageContext.request.contextPath}/book-categories">分类</a>
-                <a href="${pageContext.request.contextPath}/readers">读者</a>
-                <a href="${pageContext.request.contextPath}/borrowing">借阅</a>
-                <a href="${pageContext.request.contextPath}/reports">报表</a>
+                        <a class="side-nav-link ${currentPath == '/reports' ? 'is-active' : ''}"
+                           href="${pageContext.request.contextPath}/reports">
+                            <span class="nav-text">报表中心</span>
+                        </a>
+                    </c:if>
+                    <a class="side-nav-link ${currentPath == '/catalog' ? 'is-active' : ''}"
+                       href="${pageContext.request.contextPath}/catalog">
+                        <span class="nav-text">馆藏检索</span>
+                    </a>
+                    <c:if test="${sessionScope.userRole == 'administrator' or sessionScope.userRole == 'librarian'}">
+                        <a class="side-nav-link ${(currentPath == '/books' or fn:startsWith(currentPath, '/books/')) ? 'is-active' : ''}"
+                           href="${pageContext.request.contextPath}/books">
+                            <span class="nav-text">图书管理</span>
+                        </a>
+                        <a class="side-nav-link ${(currentPath == '/book-categories' or fn:startsWith(currentPath, '/book-categories/')) ? 'is-active' : ''}"
+                           href="${pageContext.request.contextPath}/book-categories">
+                            <span class="nav-text">图书分类管理</span>
+                        </a>
+                        <a class="side-nav-link ${(currentPath == '/readers' or fn:startsWith(currentPath, '/readers/')) ? 'is-active' : ''}"
+                           href="${pageContext.request.contextPath}/readers">
+                            <span class="nav-text">读者档案</span>
+                        </a>
+                        <a class="side-nav-link ${(currentPath == '/borrowing' or fn:startsWith(currentPath, '/borrowing/')) ? 'is-active' : ''}"
+                           href="${pageContext.request.contextPath}/borrowing">
+                            <span class="nav-text">借阅流通</span>
+                        </a>
                    </c:if>
-            <a href="${pageContext.request.contextPath}/reader/home">读者中心</a>
                    <c:if test="${sessionScope.userRole == 'reader'}">
-                <a href="${pageContext.request.contextPath}/reader/loans">我的借阅</a>
+                        <a class="side-nav-link ${(currentPath == '/reader/loans' or fn:startsWith(currentPath, '/reader/loans/')) ? 'is-active' : ''}"
+                           href="${pageContext.request.contextPath}/reader/loans">
+                            <span class="nav-text">读者借阅历史</span>
+                        </a>
                    </c:if>
+                    <c:if test="${sessionScope.userRole == 'administrator'}">
+                        <a class="side-nav-link ${(currentPath == '/admin/users' or fn:startsWith(currentPath, '/admin/users/')) ? 'is-active' : ''}"
+                           href="${pageContext.request.contextPath}/admin/users">
+                            <span class="nav-text">用户账户</span>
+                        </a>
+                        <a class="side-nav-link ${(currentPath == '/admin/system-logs' or fn:startsWith(currentPath, '/admin/system-logs/')) ? 'is-active' : ''}"
+                           href="${pageContext.request.contextPath}/admin/system-logs">
+                            <span class="nav-text">系统日志</span>
+                        </a>
+                    </c:if>
+                </nav>
+
+                <div class="sidebar-footer">
+                    <a href="${pageContext.request.contextPath}/logout">退出登录</a>
+                </div>
+            </aside>
+
+            <div class="app-topbar">
+                <div class="breadcrumb">已登录 <span>/</span> 工作台</div>
+                <form class="global-search" action="${pageContext.request.contextPath}/catalog" method="get">
+                    <label class="sr-only" for="globalTitle">搜索图书、读者、功能</label>
+                    <input id="globalTitle" name="title" type="search" placeholder="搜索图书、读者、功能...">
+                    <button type="submit" aria-label="搜索">搜</button>
+                </form>
+                <div class="topbar-actions">
+                    <span class="user-summary">
+                        <span class="user-meta">
                            <span class="user-pill">
                                <c:out value="${sessionScope.authenticatedUser.displayName}" />
                            </span>
-            <a class="button button-secondary" href="${pageContext.request.contextPath}/logout">退出</a>
-        </nav>
-    </c:if>
+                            <span class="role-label">
+                                <c:out value="${sessionScope.authenticatedUser.role.displayName}" />
+                            </span>
+                        </span>
+                    </span>
+                </div>
+            </div>
+        </c:when>
+        <c:otherwise>
+            <a class="auth-brand" href="${pageContext.request.contextPath}/dashboard">MZH 图书馆</a>
+        </c:otherwise>
+    </c:choose>
 </header>
@@ -6,98 +6,270 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>控制台 - MZH 图书馆</title>
-    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
 </head>
 <body>
 <%@ include file="/WEB-INF/jsp/common/header.jspf" %>
-<main class="page-shell">
-    <section class="dashboard-hero" aria-labelledby="dashboard-title">
+<main class="page-shell dashboard-shell">
+    <section class="dashboard-hero dashboard-welcome" aria-labelledby="dashboard-title">
+        <div>
            <p class="eyebrow">
                <c:out value="${sessionScope.authenticatedUser.role.displayName}" />
            </p>
-        <h1 id="dashboard-title">控制台</h1>
-        <p>当前登录：<strong><c:out value="${sessionScope.authenticatedUser.displayName}" /></strong></p>
+            <h1 id="dashboard-title">
+                <c:choose>
+                    <c:when test="${sessionScope.userRole == 'administrator'}">管理员工作台</c:when>
+                    <c:when test="${sessionScope.userRole == 'librarian'}">馆员工作台</c:when>
+                    <c:otherwise>读者工作台</c:otherwise>
+                </c:choose>
+            </h1>
+        </div>
+        <div class="welcome-user">
+            <span>当前登录</span>
+            <strong><c:out value="${sessionScope.authenticatedUser.displayName}" /></strong>
+        </div>
    </section>

-    <section class="card-grid" aria-label="角色工作区">
-        <c:if test="${sessionScope.userRole == 'administrator'}">
-            <article class="workspace-card">
-                <h2>系统管理</h2>
-                <p>账户、角色、权限和系统维护入口。</p>
-                <a class="button button-secondary" href="${pageContext.request.contextPath}/admin/home">打开</a>
-            </article>
-
-            <article class="workspace-card">
-                <h2>用户管理</h2>
-                <p>创建、更新、停用和查看登录账户。</p>
-                <a class="button button-secondary" href="${pageContext.request.contextPath}/admin/users">打开</a>
-            </article>
-
-            <article class="workspace-card">
-                <h2>系统日志</h2>
-                <p>查看账户与维护操作的只读审计记录。</p>
-                <a class="button button-secondary" href="${pageContext.request.contextPath}/admin/system-logs">打开</a>
-            </article>
+    <c:if test="${not empty errorMessage}">
+        <p class="message message-error"><c:out value="${errorMessage}" /></p>
    </c:if>

+    <section class="dashboard-metrics" aria-label="核心指标">
+        <c:choose>
+            <c:when test="${empty dashboardMetrics}">
+                <article class="metric-card metric-card-empty">
+                    <div>
+                        <h2>核心指标</h2>
+                        <p class="metric-value">--</p>
+                        <p class="metric-trend">暂无可展示的实时数据。</p>
+                    </div>
+                </article>
+            </c:when>
+            <c:otherwise>
+                <c:forEach var="metric" items="${dashboardMetrics}">
+                    <article class="metric-card">
+                        <div>
+                            <h2><c:out value="${metric.label}" /></h2>
+                            <p class="metric-value">
+                                <c:out value="${metric.value}" />
+                                <small><c:out value="${metric.unit}" /></small>
+                            </p>
+                            <p class="metric-trend"><c:out value="${metric.note}" /></p>
+                        </div>
+                    </article>
+                </c:forEach>
+            </c:otherwise>
+        </c:choose>
+    </section>
+
+    <section class="dashboard-grid" aria-label="检索与排行">
+        <article class="dashboard-panel search-panel">
+            <h2>馆藏检索</h2>
+            <form class="dashboard-search-form" action="${pageContext.request.contextPath}/catalog" method="get">
+                <div class="search-field">
+                    <label for="dashIdentifier">图书编号</label>
+                    <input id="dashIdentifier" name="identifier" type="text" placeholder="请输入图书编号">
+                </div>
+                <div class="search-field">
+                    <label for="dashTitle">书名</label>
+                    <input id="dashTitle" name="title" type="text" placeholder="请输入书名">
+                </div>
+                <div class="search-field">
+                    <label for="dashAuthor">作者</label>
+                    <input id="dashAuthor" name="author" type="text" placeholder="请输入作者">
+                </div>
+                <div class="search-field">
+                    <label for="dashCategory">分类</label>
+                    <select id="dashCategory" name="categoryId">
+                        <option value="">全部分类</option>
+                        <c:forEach var="category" items="${categories}">
+                            <option value="${category.id}"><c:out value="${category.name}" /></option>
+                        </c:forEach>
+                    </select>
+                </div>
+                <div class="dashboard-form-actions">
+                    <button class="button button-primary" type="submit">搜索</button>
+                    <a class="button button-secondary" href="${pageContext.request.contextPath}/catalog">重置</a>
+                </div>
+            </form>
+        </article>
+
+        <article class="dashboard-panel ranking-panel">
+            <div class="panel-heading">
+                <h2>热门图书排行</h2>
+                <span>借阅次数TOP10</span>
+            </div>
+            <c:choose>
+                <c:when test="${empty reportCenter or empty reportCenter.popularBooks}">
+                    <p class="empty-state">暂无热门排行数据。</p>
+                </c:when>
+                <c:otherwise>
+                    <c:set var="rankingMax" value="${reportCenter.popularBooks[0].borrowCount}" />
+                    <div class="rank-chart" aria-label="热门图书排行柱状图">
+                        <c:forEach var="row" items="${reportCenter.popularBooks}" end="9">
+                            <div class="rank-item">
+                                <span class="rank-value"><c:out value="${row.borrowCount}" /></span>
+                                <span class="rank-bar"
+                                      style="--bar-height: ${rankingMax > 0 ? row.borrowCount * 100 / rankingMax : 0}%;"></span>
+                                <small><c:out value="${row.title}" /></small>
+                            </div>
+                        </c:forEach>
+                    </div>
+                </c:otherwise>
+            </c:choose>
+        </article>
+    </section>
+
    <c:if test="${sessionScope.userRole == 'administrator' or sessionScope.userRole == 'librarian'}">
-            <article class="workspace-card">
-                <h2>馆员工作台</h2>
-                <p>图书、读者、借阅、归还、续借和逾期处理入口。</p>
-                <a class="button button-secondary" href="${pageContext.request.contextPath}/librarian/home">打开</a>
+        <section class="dashboard-table-grid" aria-label="业务表格">
+            <article class="dashboard-panel table-panel-compact table-panel-wide">
+                <h2>借阅流通 <span>实时记录</span></h2>
+                <c:choose>
+                    <c:when test="${empty dashboardBorrowRecords}">
+                        <p class="empty-state">暂无借阅流通记录。</p>
+                    </c:when>
+                    <c:otherwise>
+                        <div class="table-scroll">
+                            <table class="data-table dashboard-data-table">
+                                <thead>
+                                <tr>
+                                    <th scope="col">流水号</th>
+                                    <th scope="col">读者姓名</th>
+                                    <th scope="col">图书编号</th>
+                                    <th scope="col">书名</th>
+                                    <th scope="col">借阅日期</th>
+                                    <th scope="col">应还日期</th>
+                                    <th scope="col">状态</th>
+                                    <th scope="col">库存联动</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <c:forEach var="record" items="${dashboardBorrowRecords}" end="4">
+                                    <tr>
+                                        <td>#<c:out value="${record.id}" /></td>
+                                        <td><c:out value="${record.readerName}" /></td>
+                                        <td><c:out value="${record.bookIdentifier}" /></td>
+                                        <td><c:out value="${record.bookTitle}" /></td>
+                                        <td><c:out value="${record.borrowedAtText}" /></td>
+                                        <td><c:out value="${record.dueAtText}" /></td>
+                                        <td>
+                                            <span class="status-pill status-${record.displayStatusCode}">
+                                                <c:out value="${record.displayStatusName}" />
+                                            </span>
+                                        </td>
+                                        <td>
+                                            <c:choose>
+                                                <c:when test="${record.displayStatusCode == 'returned'}">
+                                                    <span class="stock-return">库存已返还</span>
+                                                </c:when>
+                                                <c:otherwise>
+                                                    <span class="stock-plus">借出占用</span>
+                                                </c:otherwise>
+                                            </c:choose>
+                                        </td>
+                                    </tr>
+                                </c:forEach>
+                                </tbody>
+                            </table>
+                        </div>
+                    </c:otherwise>
+                </c:choose>
            </article>

-            <article class="workspace-card">
-                <h2>图书管理</h2>
-                <p>创建、更新、删除和查看图书库存记录。</p>
-                <a class="button button-secondary" href="${pageContext.request.contextPath}/books">打开</a>
+            <article class="dashboard-panel table-panel-compact">
+                <h2>逾期列表 <span>待处理</span></h2>
+                <c:choose>
+                    <c:when test="${empty reportCenter or empty reportCenter.overdueRows}">
+                        <p class="empty-state">当前没有逾期未还的借阅记录。</p>
+                    </c:when>
+                    <c:otherwise>
+                        <div class="table-scroll">
+                            <table class="data-table dashboard-data-table overdue-table">
+                                <thead>
+                                <tr>
+                                    <th scope="col">读者姓名</th>
+                                    <th scope="col">图书编号</th>
+                                    <th scope="col">书名</th>
+                                    <th scope="col">应还日期</th>
+                                    <th scope="col">逾期天数</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <c:forEach var="row" items="${reportCenter.overdueRows}" end="4">
+                                    <tr>
+                                        <td><c:out value="${row.readerName}" /></td>
+                                        <td><c:out value="${row.bookIdentifier}" /></td>
+                                        <td><c:out value="${row.bookTitle}" /></td>
+                                        <td><c:out value="${row.dueAtText}" /></td>
+                                        <td><span class="overdue-days"><c:out value="${row.overdueDays}" />天</span></td>
+                                    </tr>
+                                </c:forEach>
+                                </tbody>
+                            </table>
+                        </div>
+                    </c:otherwise>
+                </c:choose>
            </article>

-            <article class="workspace-card">
-                <h2>分类维护</h2>
-                <p>维护图书记录和检索筛选使用的馆藏分类。</p>
-                <a class="button button-secondary" href="${pageContext.request.contextPath}/book-categories">打开</a>
-            </article>
-
-            <article class="workspace-card">
-                <h2>读者管理</h2>
-                <p>创建、更新、停用和查看读者借阅资格记录。</p>
-                <a class="button button-secondary" href="${pageContext.request.contextPath}/readers">打开</a>
-            </article>
-
-            <article class="workspace-card">
-                <h2>借阅管理</h2>
-                <p>创建借阅、处理归还、续借有效记录并查看逾期项目。</p>
-                <a class="button button-secondary" href="${pageContext.request.contextPath}/borrowing">打开</a>
-            </article>
-
-            <article class="workspace-card">
-                <h2>报表中心</h2>
-                <p>查看库存状况、借阅统计、逾期记录和热门图书。</p>
-                <a class="button button-secondary" href="${pageContext.request.contextPath}/reports">打开</a>
+            <article class="dashboard-panel table-panel-compact table-panel-wide">
+                <div class="panel-heading">
+                    <h2>图书管理 <span>馆藏列表</span></h2>
+                    <a href="${pageContext.request.contextPath}/books">进入管理</a>
+                </div>
+                <c:choose>
+                    <c:when test="${empty dashboardBooks}">
+                        <p class="empty-state">暂无馆藏图书记录。</p>
+                    </c:when>
+                    <c:otherwise>
+                        <div class="table-scroll">
+                            <table class="data-table dashboard-data-table">
+                                <thead>
+                                <tr>
+                                    <th scope="col">图书编号</th>
+                                    <th scope="col">书名</th>
+                                    <th scope="col">作者</th>
+                                    <th scope="col">分类</th>
+                                    <th scope="col">库存状态</th>
+                                    <th scope="col">操作</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <c:forEach var="book" items="${dashboardBooks}" end="4">
+                                    <tr>
+                                        <td><c:out value="${book.identifier}" /></td>
+                                        <td><c:out value="${book.title}" /></td>
+                                        <td><c:out value="${book.author}" /></td>
+                                        <td><c:out value="${book.categoryName}" /></td>
+                                        <td>
+                                            <span class="status-pill status-${book.status.code}">
+                                                <c:out value="${book.status.displayName}" />
+                                                （<c:out value="${book.availableCopies}" />/<c:out value="${book.totalCopies}" />）
+                                            </span>
+                                        </td>
+                                        <td><a class="text-link" href="${pageContext.request.contextPath}/books">管理</a></td>
+                                    </tr>
+                                </c:forEach>
+                                </tbody>
+                            </table>
+                        </div>
+                    </c:otherwise>
+                </c:choose>
            </article>
+        </section>
    </c:if>

-        <article class="workspace-card">
-            <h2>馆藏检索</h2>
-            <p>按书名、作者、分类或图书编号检索图书。</p>
-            <a class="button button-secondary" href="${pageContext.request.contextPath}/catalog">检索</a>
-        </article>
-
-        <article class="workspace-card">
-            <h2>读者中心</h2>
-            <p>读者自助访问馆藏和借阅历史的入口。</p>
-            <a class="button button-secondary" href="${pageContext.request.contextPath}/reader/home">打开</a>
-        </article>
-
    <c:if test="${sessionScope.userRole == 'reader'}">
-            <article class="workspace-card">
-                <h2>我的借阅历史</h2>
-                <p>查看您的在借、已还和逾期借阅记录。</p>
-                <a class="button button-secondary" href="${pageContext.request.contextPath}/reader/loans">打开</a>
-            </article>
-        </c:if>
+        <section class="shortcut-grid reader-shortcut-grid" aria-label="读者快捷入口">
+            <a class="shortcut-card" href="${pageContext.request.contextPath}/reader/loans">
+                <strong>我的借阅</strong>
+                <small>查看在借、已还、续借次数和逾期状态</small>
+            </a>
+            <a class="shortcut-card" href="${pageContext.request.contextPath}/catalog">
+                <strong>馆藏检索</strong>
+                <small>按书名、作者、分类或图书编号查找馆藏</small>
+            </a>
        </section>
+    </c:if>
 </main>
 </body>
 </html>
@@ -7,7 +7,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>系统日志 - MZH 图书馆</title>
-    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
 </head>
 <body>
 <%@ include file="/WEB-INF/jsp/common/header.jspf" %>
@@ -6,7 +6,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>借阅历史 - MZH 图书馆</title>
-    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
 </head>
 <body>
 <%@ include file="/WEB-INF/jsp/common/header.jspf" %>
@@ -7,7 +7,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><c:out value="${formTitle}" /> - MZH 图书馆</title>
-    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
 </head>
 <body>
 <%@ include file="/WEB-INF/jsp/common/header.jspf" %>
@@ -6,17 +6,21 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>读者管理 - MZH 图书馆</title>
-    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
+    <title>读者档案 - MZH 图书馆</title>
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
 </head>
 <body>
 <%@ include file="/WEB-INF/jsp/common/header.jspf" %>
 <main class="page-shell">
    <section class="dashboard-hero catalog-hero" aria-labelledby="manage-readers-title">
-        <p class="eyebrow">读者管理</p>
-        <h1 id="manage-readers-title">管理读者</h1>
-        <p>创建、更新和查看读者资格及联系方式记录。</p>
-        <a class="button button-primary" href="${pageContext.request.contextPath}/readers/new">新增读者</a>
+        <div>
+            <p class="eyebrow">读者档案</p>
+            <h1 id="manage-readers-title">读者档案与借阅资格</h1>
+            <p>维护读者资料、联系方式、借阅上限和借阅资格；登录账户、角色和启用状态请在用户管理中处理。</p>
+        </div>
+        <div class="hero-actions">
+            <a class="button button-primary" href="${pageContext.request.contextPath}/readers/new">新增读者档案</a>
+        </div>
    </section>

    <c:if test="${not empty successMessage}">
@@ -30,7 +34,7 @@
        </div>
    </c:if>

-    <section class="toolbar-panel" aria-label="读者管理检索">
+    <section class="toolbar-panel" aria-label="读者档案检索">
        <form class="search-form" action="${pageContext.request.contextPath}/readers" method="get">
            <div class="search-field">
                <label for="identifier">读者编号</label>
@@ -68,10 +72,10 @@
    </section>

    <section class="table-panel" aria-labelledby="reader-results-title">
-        <h2 id="reader-results-title">读者记录</h2>
+        <h2 id="reader-results-title">读者档案</h2>
        <c:choose>
            <c:when test="${empty readers}">
-                <p class="empty-state">没有符合当前筛选条件的读者记录。</p>
+                <p class="empty-state">没有符合当前筛选条件的读者档案。</p>
            </c:when>
            <c:otherwise>
                <div class="table-scroll">
@@ -81,7 +85,7 @@
                            <th scope="col">读者编号</th>
                            <th scope="col">姓名</th>
                            <th scope="col">联系方式</th>
-                            <th scope="col">关联账户</th>
+                            <th scope="col">关联登录账户</th>
                            <th scope="col">借阅上限</th>
                            <th scope="col">状态</th>
                            <th scope="col">操作</th>
@@ -6,7 +6,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>报表 - MZH 图书馆</title>
-    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
 </head>
 <body>
 <%@ include file="/WEB-INF/jsp/common/header.jspf" %>
@@ -17,7 +17,6 @@
            <h1 id="reports-title">报表中心</h1>
            <p>查看馆藏库存、借阅状况、逾期借阅和热门图书。</p>
        </div>
-        <a class="button button-secondary" href="${pageContext.request.contextPath}/borrowing">借阅记录</a>
    </section>

    <c:if test="${not empty errorMessage}">
@@ -6,7 +6,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><c:out value="${areaName}" /> - MZH 图书馆</title>
-    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
 </head>
 <body>
 <%@ include file="/WEB-INF/jsp/common/header.jspf" %>
@@ -0,0 +1,65 @@
+(function () {
+    var form = document.querySelector("[data-login-form]");
+    var username = document.getElementById("username");
+    var password = document.getElementById("password");
+    var remember = document.querySelector("[data-remember-username]");
+    var toggle = document.querySelector("[data-password-toggle]");
+    var forgot = document.querySelector("[data-forgot-password]");
+    var passwordHelp = document.getElementById("password-help");
+    var storageKey = "mzh.library.login.username";
+
+    function readStoredUsername() {
+        try {
+            return window.localStorage.getItem(storageKey) || "";
+        } catch (ex) {
+            return "";
+        }
+    }
+
+    function writeStoredUsername(value) {
+        try {
+            if (value) {
+                window.localStorage.setItem(storageKey, value);
+            } else {
+                window.localStorage.removeItem(storageKey);
+            }
+        } catch (ex) {
+            // Storage may be disabled; login should still submit normally.
+        }
+    }
+
+    if (username && remember) {
+        var storedUsername = readStoredUsername();
+        if (storedUsername) {
+            remember.checked = true;
+            if (!username.value) {
+                username.value = storedUsername;
+            }
+        }
+    }
+
+    if (form && username && remember) {
+        form.addEventListener("submit", function () {
+            writeStoredUsername(remember.checked ? username.value.trim() : "");
+        });
+    }
+
+    if (toggle && password) {
+        toggle.addEventListener("click", function () {
+            var nextVisible = password.type !== "text";
+            password.type = nextVisible ? "text" : "password";
+            toggle.setAttribute("aria-pressed", String(nextVisible));
+            toggle.setAttribute("aria-label", nextVisible ? "隐藏密码" : "显示密码");
+            password.focus();
+        });
+    }
+
+    if (forgot && passwordHelp) {
+        forgot.addEventListener("click", function () {
+            passwordHelp.hidden = !passwordHelp.hidden;
+            if (!passwordHelp.hidden) {
+                passwordHelp.focus();
+            }
+        });
+    }
+}());
Author	SHA1	Message	Date
Zzzz	a37d37945b	前端	2026-04-28 22:08:36 +08:00
Zzzz	d1f32b9d52	chore: record journal	2026-04-28 21:38:08 +08:00
Zzzz	44b72d3959	chore(task): archive 04-28-remove-redundant-actions-add-cn-data	2026-04-28 21:38:04 +08:00
Zzzz	8535b4804b	登录界面	2026-04-28 21:35:26 +08:00
Zzzz	acbd873fbc	uiux	2026-04-28 20:57:31 +08:00
Zzzz	e8c46311b9	chore(task): archive 04-28-sidebar-layout-management-ux	2026-04-28 20:16:59 +08:00
Zzzz	da610644d7	chore: record journal	2026-04-28 20:16:51 +08:00
Zzzz	d0e71f2aa9	uiux	2026-04-28 20:15:47 +08:00
Zzzz	0face72b8d	chore: record journal	2026-04-28 19:28:24 +08:00
Zzzz	cc9636e48a	chore(task): archive 04-28-frontend-workbench-display-fix	2026-04-28 19:28:17 +08:00
Zzzz	0a386b81f9	前端优化	2026-04-28 19:26:08 +08:00
Zzzz	36db197e75	trellis元数据	2026-04-28 18:51:37 +08:00
Zzzz	781ce4697e	add logging	2026-04-28 18:37:26 +08:00
Zzzz	cc32c222a4	前端修复，日志功能加入	2026-04-28 18:26:28 +08:00
Zzzz	dc192e8223	trellis元数据更改	2026-04-28 16:42:32 +08:00
Zzzz	fdf0eba506	chore(task): archive 04-28-frontend-reference-redesign	2026-04-28 16:41:35 +08:00
Zzzz	89b6dd1f85	前端风格更改	2026-04-28 16:40:13 +08:00