Files
2025-06-06 18:18:31 +08:00

1.0 KiB
Raw Permalink Blame History

项目简介

本项目旨在创建一个用于条形码扫描的单页应用SPA

核心需求

  • 双标签页界面:

    • 实时扫描页: 通过设备摄像头进行实时视频流扫描。
    • 历史记录页: 展示和管理已扫描的条形码记录。
    • 通过底部导航按钮在两个页面间切换。
  • 实时扫描功能:

    • 将摄像头视频流渲染到 <canvas> 元素上。
    • 使用 Quagga2 解析视频流中的条形码。
    • <canvas> 上绘制方框,标示识别到的条形码位置。
    • 点击方框可将条形码的值存入历史记录。
  • 历史记录功能:

    • 使用 IndexedDB 在客户端持久化存储扫描记录。
    • 每条记录可以添加自定义标签tag
    • 支持按标签筛选历史记录。
    • 支持批量导出和删除历史记录。
  • 技术栈:

    • 包管理器: pnpm
    • 框架: React
    • 样式: TailwindCSS
    • 条码扫描: Quagga2
    • 数据库: IndexedDB
    • 平台: 基于 Web 的 SPA。