1.0 KiB
1.0 KiB
项目简介
本项目旨在创建一个用于条形码扫描的单页应用(SPA)。
核心需求
-
双标签页界面:
- 实时扫描页: 通过设备摄像头进行实时视频流扫描。
- 历史记录页: 展示和管理已扫描的条形码记录。
- 通过底部导航按钮在两个页面间切换。
-
实时扫描功能:
- 将摄像头视频流渲染到
<canvas>
元素上。 - 使用 Quagga2 解析视频流中的条形码。
- 在
<canvas>
上绘制方框,标示识别到的条形码位置。 - 点击方框可将条形码的值存入历史记录。
- 将摄像头视频流渲染到
-
历史记录功能:
- 使用
IndexedDB
在客户端持久化存储扫描记录。 - 每条记录可以添加自定义标签(tag)。
- 支持按标签筛选历史记录。
- 支持批量导出和删除历史记录。
- 使用
-
技术栈:
- 包管理器: pnpm
- 框架: React
- 样式: TailwindCSS
- 条码扫描: Quagga2
- 数据库: IndexedDB
- 平台: 基于 Web 的 SPA。