设计系统

设计关键词

• 图书馆工作台
• 温润、安静、可信
• 深绿 + 米色
• 数据可扫读
• 克制的玻璃质感
• 管理后台与读者门户共用一套视觉语言

整体气质

• 专业克制
• 工具感
• 温和的人文感
• 后台管理系统
• 强营销感
• 夸张插画感

全局颜色

字体

• 英文与数字：Manrope
• 中文：Noto Sans SC
• 兜底：system-ui, sans-serif
• 标题：使用较紧凑字距，当前代码多处使用 letter-spacing: -.04em。
• 数据：使用较大字号和 font-variant-numeric: tabular-nums，便于扫读。

布局

• 侧边栏固定宽度：248px。
• 小屏侧边栏宽度：76px。
• 顶部 header 高度：100px；600px 以下为 86px。
• 主内容最大宽度：1500px。
• 页面主间距：约 18px 到 34px。
• 主要卡片圆角：18px。
• 控件圆角：10px。

组件规范

侧边栏

• 深绿背景，浅米色激活态。
• 品牌区包含 Notebook 图标、系统名和端类型。
• 菜单按角色显示，不在前端展示无权限入口。

卡片

• 使用 .glass-card：浅色半透明背景、细边框、柔和阴影。
• 适用于筛选区、数据面板、图书卡片、读者状态卡片。
• 避免在卡片内再套装饰性大卡片。

表格

• 表头背景 #e9e8e1。
• 行悬停背景 #f1f4ee。
• 重要状态使用 el-tag，操作列固定在右侧。
• 长文本使用 show-overflow-tooltip。

表单

• 搜索表单使用 inline 形式，移动端变为纵向。
• 弹窗表单使用 90px 或 100px label 宽度。
• 输入框背景为 #fffef9，聚焦时使用绿色描边。

按钮

• 主按钮使用系统主绿。
• 删除使用 danger。
• 缴费和归还可使用 success。
• 图书列表/卡片切换使用 radio button。

图表

• ECharts 使用线图、环形图、横向柱状图。
• tooltip 深绿背景，图表主色为 #1f6b50。
• 图表容器高度约 290px 到 300px。

动效

• 页面路由切换：180ms opacity + translateY。
• 按钮点击：轻微下压。
• prefers-reduced-motion 下禁用动效。
• .pulsing-glow 当前被全局禁用，保持克制。

禁止事项

• 不要把后台页面做成营销落地页。
• 不要使用过多渐变、发光、漂浮装饰。
• 不要破坏 Element Plus 表格、表单和分页的一致性。
• 不要让图书封面、表格操作列或长书名导致布局抖动。