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