组件说明

全局布局组件

• 文件：frontend/src/views/layout/index.vue
• 组成：固定侧边栏、顶部标题区、用户下拉菜单、主内容区。
• 状态：读者端显示“读者服务台”，员工端显示“馆藏管理中心”。
• 注意：新增页面时要在路由 meta 中配置 title，否则顶部标题显示默认“概览”。

筛选卡片

• 类名：.filter-card.glass-card
• 用途：图书、读者、借阅记录、罚金、用户列表的筛选入口。
• 交互：搜索按钮触发查询；重置按钮清空条件并回到第一页。
• 响应式：760px 以下每个表单项宽度 100%。

数据表格

• 组件：el-table
• 用途：管理端列表、借阅明细、罚金账单、用户管理。
• 规范：操作列固定右侧；状态字段使用 el-tag；金额右对齐；长字段开启 tooltip。
• 加载：列表请求中使用 v-loading。

图书卡片

• 页面：图书管理、读者图书检索大厅。
• 内容：封面、状态标签、书名、作者、分类、价格或出版社、库存进度条、操作按钮。
• 注意：封面缺失时使用默认图书封面；书名过长需要截断。

弹窗表单

• 组件：el-dialog
• 页面：图书新增/编辑、读者新增/编辑、用户新增/编辑。
• 规范：提交按钮显示 loading；取消按钮只关闭弹窗；编辑时关键唯一字段禁用。

抽屉明细

• 组件：el-drawer
• 页面：读者管理中的借阅记录。
• 用途：在不离开读者列表的情况下查看历史借阅并办理归还。

统计卡片

• 页面：运营概览、我的借阅。
• 内容：指标名称、数值、辅助说明、图标。
• 规范：数值大字号，辅助信息小字号，保持紧凑。

图表面板

• 页面：运营概览。
• 组件：ECharts line、pie、bar。
• 交互：窗口 resize 时调用 chart.resize；组件卸载时 dispose。

登录通道切换

• 组件：el-segmented
• 页面：登录页。
• 状态：staff 员工通道、reader 读者通道。
• 行为：切换通道后恢复对应本地记住账号，清空密码并清除校验。