条码扫描器 PWA (人机协作项目)
这是一个作者为了练习与 AI 协作，而使用 AI 编写的渐进式 Web 应用 (PWA)。
在本项目中，作者负责提出需求、进行决策和提供指导，而 AI 助手 Cline 则根据指令完成具体的编码和文档撰写工作。这个项目旨在探索一种高效的人机协作模式。
项目简介
本项目是一个功能完整的条码扫描应用，旨在提供快速、便捷的条码扫描和管理体验，无需安装原生应用。它包含两个核心功能模块：
- 实时扫描: 通过设备摄像头实时捕捉和解析条码。
- 历史记录: 保存、查看、管理和导出扫描过的条码。
功能特性
- 实时扫描:
- 动态申请摄像头权限并渲染视频流。
- 支持从多个摄像头中选择。
- 使用 Quagga2 实时检测视频流中的条码。
- 在画面上高亮显示识别到的条码。
- 一键保存扫描结果到本地。
- 历史记录管理:
- 使用 IndexedDB 在浏览器端持久化存储数据。
- 为每条记录添加自定义标签。
- 支持按标签筛选记录。
- 支持批量选择、删除和导出 (CSV 格式) 记录。
- 简洁的 UI:
- 双标签页设计，通过底部导航栏轻松切换。
- 响应式布局，在桌面和移动设备上均有良好体验。
技术栈
- 框架: React
- 构建工具: Vite
- 样式: TailwindCSS
- 路由:
react-router-dom - 条码扫描:
Quagga2 - 客户端数据库:
IndexedDB(通过idb库简化操作) - 包管理器: pnpm
项目状态
已完成。
所有在项目初期定义的核心功能和高级功能均已实现。应用目前处于稳定状态，没有已知问题。