前端风格更改

2026-04-28 16:40:13 +08:00
parent 3efcb394fb
commit 89b6dd1f85
10 changed files with 1453 additions and 334 deletions
@@ -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.