页面说明

登录页

• 路由：#/login
• 文件：frontend/src/views/login/index.vue
• 目标：提供员工与读者两种登录入口。
• 首屏：左侧深绿故事面板，标题“让每一本书，都清楚自己在哪里。”；右侧登录表单。
• 关键交互：员工通道使用用户名；读者通道使用 18 位身份证号；支持记住账号但不保存密码。

布局页

• 路由：/ 的父布局
• 文件：frontend/src/views/layout/index.vue
• 目标：统一侧边栏、顶部标题、用户信息和退出登录。
• 导航：按角色显示菜单。
• 可访问性：提供 skip-link 跳到主内容。

运营概览

• 路由：#/dashboard
• 文件：frontend/src/views/dashboard/index.vue
• 用户：管理员、操作员。
• 内容：馆藏总量、注册读者、在借图书、待结算金额、近 7 日借阅趋势、馆藏分布、借阅热度排行。
• 接口：/api/borrows/statistics、/api/borrows/charts。

图书管理

• 路由：#/books
• 文件：frontend/src/views/book/index.vue
• 用户：管理员、操作员。
• 筛选：ISBN、书名、作者、分类、状态。
• 展示：列表视图与卡片视图。
• 操作：新增图书、编辑资料、删除、上架、下架、上传封面。
• 字段：ISBN、书名、作者、出版社、分类、价格、可用册数、总册数、状态、简介、封面。

读者管理

• 路由：#/readers
• 文件：frontend/src/views/reader/index.vue
• 用户：管理员、操作员。
• 筛选：身份证号、姓名、手机号、状态。
• 操作：注册新读者、编辑档案、删除、查看借阅历史、办理归还。
• 字段：身份证号、姓名、性别、电话、住址、借书额度、状态、登录密码。

借还服务

• 路由：#/borrows
• 文件：frontend/src/views/borrow/index.vue
• 用户：管理员、操作员。
• Tab 1：图书借阅柜台，验证读者、检索图书、确认出借。
• Tab 2：在外借出记录，按读者身份证、ISBN、归还状态查询，办理还书。
• Tab 3：超期滞纳罚款，按身份证查询罚单，收取现金。

账号与权限

• 路由：#/users
• 文件：frontend/src/views/users/index.vue
• 用户：管理员。
• 筛选：用户名、真实姓名、账号状态。
• 操作：新增系统用户、修改、删除、启停。
• 保护：admin 账号不能删除，不能停用，角色不可被普通修改破坏。

图书检索大厅

• 路由：#/catalog
• 文件：frontend/src/views/reader-portal/books.vue
• 用户：自助读者。
• 内容：顶部欢迎横幅、图书检索筛选、图书卡片列表。
• 操作：申请自主借书。
• 限制：库存为 0 时禁用借阅。

我的借阅

• 路由：#/my-borrows
• 文件：frontend/src/views/reader-portal/history.vue
• 用户：自助读者。
• 内容：未归还图书、读者信用状态、待缴纳滞纳金。
• Tab 1：我的借阅记录，支持全部、在借中、已归还筛选和自助还书。
• Tab 2：滞纳金欠费中心，展示账单并支持一键模拟缴费。