English | 中文

LibraryAdmin

基于 Vue 3 + Element Plus 构建的现代化图书馆后台管理系统

---

功能特性

核心模块

模块	说明
通知公告	发布和管理图书馆通知公告，支持优先级（紧急/重要/普通）、搜索与批量删除
数据统计	可视化仪表盘，包含关键指标卡片、饼图/折线图、热门图书与活跃读者排行
图书管理	完整增删改查、状态跟踪（可借/借出）、搜索与批量操作
分类管理	树形分类表，支持展开/收起、父子层级嵌套
借阅管理	图书借出与归还、日期校验、逾期高亮、分页列表
罚款管理	逾期罚款跟踪，含统计卡片、批量缴纳、缴费状态筛选
读者管理	完整增删改查、批量导入（CSV/JSON）、批量删除、借阅历史含统计
操作日志	完整审计追踪，支持操作类型筛选、日期范围搜索、关键词查找
系统设置	图书馆信息配置、借阅规则设定、管理员账号与角色管理

交互亮点

• 深色模式 — 浅色/深色主题一键切换，偏好自动持久化
• 标签页导航 — 多标签页动态打开/关闭，首页标签固定在最左侧
• 响应式布局 — 适配桌面端、平板、手机端，移动端侧边栏抽屉式展开
• 撤销操作 — 删除操作支持撤销恢复，UndoBar 浮层提示
• 骨架屏加载 — 表格加载时展示骨架屏占位
• 微交互 — 按钮按下缩放、弹窗缩放淡入、图标旋转动画、hover 过渡
• 无障碍 — 尊重 prefers-reduced-motion 系统偏好，减少动画

---

技术栈

技术	版本	说明
Vue	3.5+	渐进式 JavaScript 框架
Vite	8.0+	下一代前端构建工具
Element Plus	2.13+	Vue 3 组件库
Pinia	3.0+	Vue 状态管理库
Vue Router	5.0+	Vue 路由管理器（Hash 模式）
ECharts	6.0+	数据可视化图表库
Less	4.6+	CSS 预处理器
Axios	1.18+	HTTP 客户端 + 请求拦截器模拟后端，/api/* 请求直接返回 localStorage 数据

---

项目结构

library-admin/
├── .github/workflows/           # GitHub Actions CI/CD（自动部署到 Pages）
├── .vscode/                     # VS Code 编辑器配置
├── public/
│   ├── favicon.svg              # 浏览器标签图标
│   └── icons.svg                # SVG 图标集
├── src/
│   ├── api/
│   │   ├── client.ts            # Axios 实例 + mock 拦截器
│   │   ├── mock.ts              # Mock 后端（种子数据 + 全量 CRUD 路由）
│   │   ├── admins.ts            # 管理员 API
│   │   ├── announcements.ts     # 通知公告 API
│   │   ├── books.ts             # 图书 API
│   │   ├── borrows.ts           # 借阅 API
│   │   ├── categories.ts        # 分类 API
│   │   ├── fines.ts             # 罚款 API
│   │   ├── logs.ts              # 操作日志 API
│   │   ├── readers.ts           # 读者 API
│   │   └── settings.ts          # 系统设置 API
│   ├── assets/                  # 静态资源文件
│   ├── components/
│   │   ├── PaginationBox.vue    # 可复用分页组件
│   │   ├── StatCard.vue         # 统计卡片组件
│   │   ├── TableSkeleton.vue    # 表格加载骨架屏
│   │   └── UndoBar.vue          # 撤销操作提示条
│   ├── router/
│   │   └── index.js             # 路由定义与鉴权守卫
│   ├── stores/
│   │   ├── user.js              # 用户登录状态管理
│   │   └── theme.js             # 深色/浅色主题状态
│   ├── views/
│   │   ├── Login.vue            # 登录页面（渐变背景）
│   │   ├── 404.vue              # 404 未找到页面
│   │   ├── Layout.vue           # 主布局（顶栏、侧边栏、标签页）
│   │   ├── AnnouncementList.vue # 通知公告管理
│   │   ├── Dashboard.vue        # 数据统计首页
│   │   ├── BookList.vue         # 图书管理
│   │   ├── CategoryList.vue     # 分类树管理
│   │   ├── BorrowList.vue       # 借阅管理
│   │   ├── FineManagement.vue   # 罚款管理
│   │   ├── ReaderList.vue       # 读者管理
│   │   ├── ReaderBorrowHistory.vue  # 读者借阅历史
│   │   ├── OperationLog.vue     # 操作日志
│   │   ├── BasicSettings.vue    # 系统基本设置
│   │   └── AdminManagement.vue  # 管理员账号管理
│   ├── App.vue                  # 根组件（主题切换 + 页面过渡动画）
│   ├── main.js                  # 应用入口
│   └── style.css                # 全局样式与 CSS 变量
├── index.html                   # HTML 模板
├── package.json                 # 依赖配置
├── vite.config.js               # Vite 配置
└── README.md                    # 项目说明文档

---

快速开始

环境要求

• Node.js >= 18

安装依赖

npm install

开发模式运行

npm run dev
# → http://localhost:3000

构建生产版本

npm run build

预览生产版本

npm run preview

---

登录信息

用户名	密码	角色
admin	123456	超级管理员
librarian	123456	普通管理员
LEI	qiuyue@080701	超级管理员

提示： 系统使用 Axios 请求拦截器模拟后端，所有 /api/* 请求直接在请求层面短路返回 localStorage 数据，无 Service Worker 依赖。登录时验证用户名与密码，上表为预置种子账号。

---

界面截图

登录页面

双栏布局：左侧动画角色（眼球追踪鼠标交互）、右侧登录表单，支持密码显隐切换、表单验证与加载状态

通知公告（首页）

优先级筛选、统计条、卡片式/表格式布局、批量删除支持撤销

数据统计仪表盘

4 个统计卡片（馆藏总量、注册读者、总借阅数量、进行中借阅）、图书状态饼图、月度借阅趋势折线图（支持年份切换）、热门图书 TOP5 柱状图、读者借阅排行 TOP5、图书分类分布图

图书管理

搜索与分页、对话框表单增删改、父子分类标签展示

分类管理

树形表格支持展开收起、父子分类扁平搜索、批量删除

借阅管理

借出与归还流程、日期校验、逾期记录红色高亮

罚款管理

统计卡片（逾期数量、未缴/已缴金额）、批量缴纳、缴费状态筛选

读者管理

CSV/JSON 批量导入、借阅历史下钻（含统计卡片）

操作日志

按操作类型与日期范围筛选、分页审计追踪

系统设置

图书馆信息表单、借阅规则配置、管理员角色管理

深色模式

主题一键切换，偏好自动保存至 localStorage

移动端适配

移动端抽屉式侧边栏，表格横向滚动适配

---

功能清单

• 用户登录/登出（含路由守卫）
• 渐变背景登录页面（含表单验证）
• 通知公告管理（增删改查、优先级、批量操作）
• 图书 CRUD 操作（含父子分类标签）
• 分类树形管理（展开收起、扁平搜索）
• 借阅管理（借出/归还/日期校验）
• 借阅逾期高亮显示
• 罚款管理（统计卡片、批量缴纳）
• 读者 CRUD 操作
• 读者批量删除与批量导入（CSV/JSON）
• 读者借阅历史页面（含统计卡片）
• 操作日志（类型筛选、日期范围搜索）
• 系统设置（图书馆信息、借阅规则）
• 管理员管理（角色系统：超级/普通管理员）
• 数据统计仪表盘（ECharts 可视化）
• 表格分页（可复用 PaginationBox 组件）
• 深色模式切换（localStorage 持久化）
• 动态多标签页导航（首页标签固定）
• 软删除 + UndoBar 撤销提示
• 表格加载骨架屏
• 响应式布局（桌面端 / 平板 / 手机端）
• 自定义主题色（青色主色调）
• Dashboard 年份切换器（趋势图按年筛选）
• Dashboard 统计卡片与图表骨架屏加载
• 登录页动画角色（眼球追踪交互）
• 404 未找到页面
• 页面切换过渡动画（淡入淡出）
• 微交互（按钮缩放、图标旋转、弹窗动画）
• 减少动画偏好无障碍支持
• GitHub Actions 自动部署到 GitHub Pages
• localStorage Mock 数据持久化

---

部署

项目已配置 GitHub Pages 自动部署，通过 GitHub Actions 实现。
同时也部署在了 Vercel，推送到远程仓库自动部署。

配置说明

vite.config.js 中需配置正确的 base 路径：

export default defineConfig({
  base: process.env.VERCEL ? '/' : '/仓库名称/',
  // ...
})

.github/workflows/deploy.yml — 推送 main 分支时自动触发，使用 Vite 构建后部署至 GitHub Pages，同时自动部署到 Vercel。

手动部署

npm run build
# 将 dist/ 目录上传至任意静态网站托管服务即可