initial implementation

memory-bank/systemPatterns.md

@@ -0,0 +1,26 @@
+# 系统模式
+
+## 架构
+- **前端架构:** 单页应用（SPA），使用 React 构建，具有两个主要视图（页面）。
+- **视图管理:**
+    - **`LiveScannerView`:** 实时扫描页面，负责摄像头访问和条形码检测。
+    - **`HistoryView`:** 历史记录页面，负责展示和管理已保存的数据。
+    - 使用 React 的条件渲染或一个轻量级的路由库来管理这两个视图之间的切换。
+- **数据持久化:**
+    - **`IndexedDB`:** 用于在客户端存储用户的扫描历史、标签等信息。将创建一个 `DBHelper` 或类似的服务来封装数据库操作（增、删、改、查）。
+
+## 组件模型
+应用将由以下核心组件构成：
+- **`App`:** 主组件，管理整体布局、当前激活的视图和底部导航栏的状态。
+- **`BottomNav`:** 底部导航组件，用于在 `LiveScannerView` 和 `HistoryView` 之间切换。
+- **`Scanner`:** 封装 Quagga2 逻辑，处理摄像头视频流，并在 `canvas` 上绘制结果。
+- **`HistoryList`:** 显示保存在 IndexedDB 中的条形码列表。
+- **`TagManager`:** 用于添加、删除和筛选标签的组件。
+
+## 关键技术决策
+- **状态管理:**
+    - **全局状态:** 对于当前激活的视图（实时/历史），将使用 React Context 或一个简单的状态管理库来管理。
+    - **本地状态:** 组件内部状态（如表单输入）将使用 `useState` 和 `useEffect`。
+- **样式:** TailwindCSS 将用于快速、实用的样式设计，确保响应式布局。
+- **条码扫描:** Quagga2 因其在网络环境中的灵活性和易于集成而被选中。
+- **数据库交互:** 所有 IndexedDB 操作将被抽象到一个单独的模块中，以保持业务逻辑的清晰和可维护性。