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

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.

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.

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:
- 读者管理
- 报表中心
- 借阅流通
- 系统日志

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.