# 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.