Book-management-system/.trellis/tasks/archive/2026-04/04-28-frontend-reference-redesign/research/reference-dashboard-visual-notes.md

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.