「零安装、扫码枪即插即用」——用灵犀30分钟搭出一套校园图书管理系统

学校图书馆管理员跟我说：「我们书架上 2000 多本书，每天借还全靠手写登记本，找一本书要翻半天。」于是我用 灵犀 花了大约 30 分钟，搭了一套完整的图书管理系统——单文件，打开浏览器就能用，扫码枪插上 USB 直接扫，界面还挺好用。

这篇帖子把整个过程记下来，从思路到代码到实测，方便同类型的学校场景直接复用。

一、先看最终成果

系统包含 5 个模块，全部在一个 HTML 文件里：

• 🔐 登录页：密码登录，SHA-256 加密存储

• 📊 仪表盘：馆藏统计、借出率、逾期数、近 7 天借阅趋势、分类占比、热门 TOP5

• 📖 图书管理：增删改查、搜索/分类/状态筛选、分页、Excel 导入导出

• 📷 扫码借还：扫码枪即插即用，扫完自动弹出【借出/还书面板】

• 📤 借阅记录：借还历史、逾期高亮、导出

🔐 登录页

📊 仪表盘

📖 图书管理

📷 扫码借还（首页）

📷 扫码识别后弹出操作面板

📤 借阅记录

⚙️ 系统设置

二、为什么做成「单文件」，而不是搭后端

学校场景有几个现实约束：

1. 没有服务器：学校没有专门的 IT 运维，搭后端要装 Node/Python/MySQL，没人维护

2. 不能装软件：电脑是学校的公共机房或教师办公室，装东西要走审批

3. 要用扫码枪：管理员要求能扫条码快速借还，不是手动输书名

所以方案定了：一个 HTML 文件 + 一个 JS 库（离线 Excel 处理），用浏览器打开，数据存 localStorage。

扫码枪更简单——USB 连上之后它就是键盘模拟器，扫一下等于快速打了一串数字 + 回车，根本不需要写什么"扫码接口"。

三、灵犀 帮我做了什么

整个开发过程基本是我描述需求、灵犀 出代码、我验证截图、发现问题后反馈修改，几个来回就把主体功能做完了。具体来说：

第 1 轮：我说了需求清单（登录、图书管理、扫码借还、导入导出、统计），灵犀立即分析了工作区里已有的离线版 xlsx 库（之前做排座系统时存的），决定复用而不是重新装包，节省了依赖处理的时间。

第 2 轮：代码一次性写完主程序框架（HTML 结构 + CSS 样式 + JavaScript 逻辑），总共约 86KB。样式做了细节打磨——侧边导航栏渐变背景、统计卡片悬浮阴影、扫码页面的紫色渐变大 banner、弹窗动画等。

第 3 轮：E2E 自动化测试，用 Playwright 驱动无头浏览器跑完整用户流程——登录→图书管理→借书→扫码枪模拟→扫码还书→借阅记录→修改密码→导出 Excel→导入 Excel，22 项测试 21 项通过，0 个 JS 运行时错误。

整个过程不是"AI 帮我写代码然后我逐行审"，更像是：我把想做什么告诉它，它把能跑的东西交给我，我在界面上点点点验证。

四、几个关键设计细节

1. 扫码枪：零配置，即插即用

扫码枪不需要装驱动，它通过 USB HID 协议模拟键盘输入。在页面上把光标放在输入框里，扫码枪一扫，相当于快速打出条码数字 + Enter。

代码里的监听逻辑：

关键点是 60ms 这个阈值——扫码枪的输入间隔大约 10-30ms，人手输入至少 50ms 以上，所以能可靠区分。找到匹配的 ISBN 后，底部弹出面板显示书名、作者、可借册数，一个按钮搞定借出/还书。

2. Excel 导入：字段智能匹配

导入时支持三种方式：

• 自动识别表头：扫描前 8 行，匹配常见字段名（"书名""名称""题名"都认），支持中英文混合

• 兜底列序匹配：如果没有表头，按前 9 列对应 ISBN/书名/作者/出版社/分类/单价/总册数/位置/备注

• 重复 ISBN 处理：可选「跳过」保留原记录，或「覆盖更新」按差值调整可借册数

3. 离线图表：Canvas 手绘，零依赖

仪表盘的柱状图、饼图、条形图全部用 Canvas 原生 API 手绘，不引入 ECharts、Chart.js 等第三方库。好处是：文件只有一个 HTML，不存在 CDN 加载失败的问题，内网也能用。

4. 密码安全

虽然数据存在本地 localStorage（方便但不防君子），密码还是用了 SHA-256 哈希存储，不在明文里放密码：

五、3 步跑通

第 1 步：把文件放到电脑上

只需要两个文件：index.html + xlsx.full.min.js（离线 Excel 库，880KB），放在同一文件夹。

第 2 步：用浏览器打开

双击 index.html，或双击我做好的 启动图书管理系统.bat。推荐 Chrome 或 Edge。

第 3 步：登录体验

• 账号：admin

• 密码：123456（登录后可在「系统设置 → 修改密码」改）

系统自带 20 本示例图书，可以直接体验借书、扫码、导出。

六、导入导出格式

导入时用 Excel（.xlsx），字段顺序：

下载标准模板填写即可，也可以用「导出」功能导出一本现有书作为参考再编辑导入。

分类支持：文学、科幻、科学、历史、教育、艺术、计算机、商业、少儿、其他。

七、注意事项

• 数据存储在本机浏览器（localStorage），换电脑或清缓存前务必先在「系统设置 → 导出馆藏数据」备份

• 扫码枪驱动：不需要。扫码枪就是键盘模拟器，插上 USB 直接用

• 多人同时用：如果要在多台电脑上共享数据，需要引入数据库或云存储，当前版本是单机版

• ISBN 联网查询：扫描未收录的条码时，系统会调用 Open Library 免费接口自动查询书名、作者、出版社，需要网络连接

八、小结

这个系统最实用的场景是：学校图书馆有扫码枪、有电脑、但没有 IT 服务器。用浏览器打开就能用，扫码枪插上就能扫，管理员不需要装任何东西。

技术上不复杂，但把"零安装 + 扫码枪适配 + Excel 导入导出 + 密码保护"凑到一个文件里，做好交互细节（底部面板动画、逾期状态高亮、自动填入默认借阅天数、常用借阅人联想），还是花了不少功夫在打磨上的。

灵犀在这个过程里最帮得上忙的是：我把要什么说清楚，它把能跑的交给我，我只要截图验证、反馈问题就行。这种协作模式搭这种"轻应用"非常高效。

欢迎有类似场景的老师、同学参考，有问题欢迎交流。