barcode-scanner.jeffthecoder.xyz/memory-bank/systemPatterns.md

系统模式

架构

• 前端架构: 单页应用（SPA），使用 React 构建，具有两个主要视图（页面）。
• 视图管理:
  • LiveScannerView: 实时扫描页面，负责摄像头访问和条形码检测。
  • HistoryView: 历史记录页面，负责展示和管理已保存的数据。
  • 使用 React 的条件渲染或一个轻量级的路由库来管理这两个视图之间的切换。
• 数据持久化:
  • IndexedDB: 用于在客户端存储用户的扫描历史、标签等信息。将创建一个 DBHelper 或类似的服务来封装数据库操作（增、删、改、查）。

组件模型

应用将由以下核心组件构成：

• App: 主组件，管理整体布局、当前激活的视图和底部导航栏的状态。
• BottomNav: 底部导航组件，用于在 LiveScannerView 和 HistoryView 之间切换。
• Scanner: 封装 Quagga2 逻辑，处理摄像头视频流，并在 canvas 上绘制结果。
• HistoryList: 显示保存在 IndexedDB 中的条形码列表。
• TagManager: 用于添加、删除和筛选标签的组件。

关键技术决策

• 状态管理:
  • 全局状态: 对于当前激活的视图（实时/历史），将使用 React Context 或一个简单的状态管理库来管理。
  • 本地状态: 组件内部状态（如表单输入）将使用 useState 和 useEffect。
• 样式: TailwindCSS 将用于快速、实用的样式设计，确保响应式布局。
• 条码扫描: Quagga2 因其在网络环境中的灵活性和易于集成而被选中。
• 数据库交互: 所有 IndexedDB 操作将被抽象到一个单独的模块中，以保持业务逻辑的清晰和可维护性。