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