Zzzz
54 lines
2.4 KiB
Markdown
54 lines
2.4 KiB
Markdown
# 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.
|