initial implementation

memory-bank/activeContext.md

@@ -0,0 +1,33 @@
+# 当前背景
+
+## 当前工作重点
+在核心功能完成后，本次工作重点是根据用户反馈优化 `LiveScannerPage` 的用户体验和稳定性。
+
+## 已完成的步骤
+1.  **项目初始化:**
+    -   已使用 pnpm 和 Vite 完成项目设置。
+    -   所有核心依赖项均已安装和配置。
+2.  **页面结构与 UI 框架:**
+    -   `LiveScannerPage` 和 `HistoryPage` 已创建。
+    -   `BottomNav` 组件已实现，并能正常导航。
+    -   `react-router-dom` 已配置为嵌套路由。
+3.  **实时扫描功能 (核心):**
+    -   已实现摄像头权限申请和视频流渲染。
+    -   已集成 Quagga2 进行条码检测和视觉反馈。
+    -   已实现保存最新扫描结果到数据库的功能。
+4.  **实时扫描功能 (优化):**
+    -   **摄像头选择:** 添加了摄像头下拉列表，启动时不再自动扫描。
+    -   **视频流修复:** 解决了视频流渲染黑屏的问题。
+    -   **UI 简化:** 选择摄像头后，下拉菜单变为固定的文本标签，简化了交互。
+    -   **结果管理:** 添加了“清空”按钮，用于清除缓存的扫描结果。
+5.  **历史记录功能:**
+    -   已使用 `idb` 设置 IndexedDB。
+    -   已实现记录的添加、查询和删除功能，并在页面上展示。
+
+## 后续步骤
+- **所有核心和高级功能均已完成。**
+
+## 当前的决策和考虑
+- **稳定性优先:** 为了解决设备兼容性问题，主动简化了摄像头切换逻辑，采用刷新页面重新选择的策略，以确保应用的稳定性。
+- **代码结构:** 当前的代码结构（`pages`, `components`, `db`）运行良好。
+- **功能完整性:** 项目已满足 `projectbrief.md` 中定义的所有核心和高级需求。

memory-bank/productContext.md

@@ -0,0 +1,18 @@
+# 产品背景
+
+## 问题陈述
+需要一种快速、基于网络的方式来扫描和管理条形码，而无需安装原生应用程序。这对于库存管理、个人物品追踪、价格查询或任何需要快速识别和记录产品信息的场景非常有用。
+
+## 用户体验目标
+- **简洁性与直观性:** 界面应分为两个明确的标签页：“实时扫描”和“历史记录”。用户可以轻松理解每个页面的功能。
+- **易用性:**
+    - 用户应能通过底部的导航按钮轻松切换页面。
+    - 在扫描页面，摄像头应自动启动，并提供清晰的扫描区域指示。
+    - 保存条形码应像点击屏幕上的识别框一样简单。
+- **响应性:** 应用应在各种设备和屏幕尺寸上良好运行，特别是在移动设备上。
+- **即时反馈:**
+    - 成功识别条形码后，应立即在视频流上用方框标出。
+    - 点击保存后，应有明确的提示告知用户操作成功。
+- **高效管理:**
+    - 在历史记录页面，用户可以轻松查看所有保存的条形码。
+    - 提供为记录添加标签、按标签筛选、批量删除和导出的功能，以方便管理。

memory-bank/progress.md

@@ -0,0 +1,42 @@
+# 进展
+
+## 已完成的工作
+- **Memory Bank 初始化:** 所有核心 Memory Bank 文件都已创建。
+- **项目规划:**
+    - 与用户详细讨论并确定了项目需求。
+    - 确定了双标签页（实时/历史）的架构。
+    - 确定了使用 IndexedDB 进行数据持久化。
+    - 确定了使用 `idb` 和 `react-router-dom` 作为核心依赖。
+- **项目设置:**
+    - 使用 pnpm 和 Vite 初始化项目。
+    - 安装所有必需的依赖项。
+    - 配置 TailwindCSS。
+- **页面结构与 UI 框架:**
+    - 创建 `src/pages` 目录及 `LiveScannerPage` 和 `HistoryPage` 页面组件。
+    - 创建 `src/components/BottomNav.jsx` 组件。
+    - 在 `App.jsx` 中配置 `react-router-dom`，实现根路径 `/` (实时扫描) 和 `/history` (历史记录) 的路由。
+    - 实现 `BottomNav` 组件，使其能够在这两个页面之间导航。
+- **实时扫描功能:**
+    - **摄像头权限与渲染:** 申请摄像头访问权限并将实时视频流绘制到 `<video>` 元素上。
+    - **条码检测与反馈:** 将视频流提供给 Quagga2 进行处理，并将检测结果输出到浏览器控制台，同时在 `<canvas>` 上为检测到的条形码绘制边框。
+    - **交互实现:** 实现了一个保存按钮，用于将最新检测到的条形码存入数据库。
+- **实时扫描功能 (优化):**
+    - **摄像头选择:** 添加了下拉菜单，允许用户选择摄像头，避免了自动启动。
+    - **视频流修复:** 解决了视频渲染黑屏的问题，确保摄像头画面正常显示。
+    - **交互简化:** 锁定已选摄像头，避免了因设备切换导致的稳定性问题。
+    - **结果管理:** 添加了“清空”按钮，用于清除页面上的扫描结果列表。
+- **历史记录功能:**
+    - **数据库设置:** 使用 `idb` 库设置 IndexedDB 数据库和对象存储。
+    - **数据操作:** 实现了基本的增、删、查功能，并在历史记录页面展示。
+- **功能集成:**
+    - 将扫描功能与 IndexedDB 的保存功能成功连接。
+- **历史记录高级功能:**
+    - **标签管理:** 实现了为记录添加和更新标签的功能。
+    - **标签筛选:** 实现了按标签筛选历史记录的功能。
+    - **批量操作:** 实现了批量选择、删除和导出 (CSV) 记录的功能。
+
+## 待办事项
+- **所有功能已完成。**
+
+## 已知问题
+- 目前没有已知问题。

memory-bank/projectbrief.md

@@ -0,0 +1,29 @@
+# 项目简介
+
+本项目旨在创建一个用于条形码扫描的单页应用（SPA）。
+
+## 核心需求
+- **双标签页界面:**
+    - **实时扫描页:** 通过设备摄像头进行实时视频流扫描。
+    - **历史记录页:** 展示和管理已扫描的条形码记录。
+    - 通过底部导航按钮在两个页面间切换。
+
+- **实时扫描功能:**
+    - 将摄像头视频流渲染到 `<canvas>` 元素上。
+    - 使用 Quagga2 解析视频流中的条形码。
+    - 在 `<canvas>` 上绘制方框，标示识别到的条形码位置。
+    - 点击方框可将条形码的值存入历史记录。
+
+- **历史记录功能:**
+    - 使用 `IndexedDB` 在客户端持久化存储扫描记录。
+    - 每条记录可以添加自定义标签（tag）。
+    - 支持按标签筛选历史记录。
+    - 支持批量导出和删除历史记录。
+
+- **技术栈:**
+    - **包管理器:** pnpm
+    - **框架:** React
+    - **样式:** TailwindCSS
+    - **条码扫描:** Quagga2
+    - **数据库:** IndexedDB
+    - **平台:** 基于 Web 的 SPA。

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 操作将被抽象到一个单独的模块中，以保持业务逻辑的清晰和可维护性。

memory-bank/techContext.md

@@ -0,0 +1,26 @@
+# 技术背景
+
+## 技术栈
+- **pnpm:** 用于高效的依赖管理。
+- **React:** 用于构建用户界面的核心库。
+- **TailwindCSS:** 用于样式设计的 CSS 框架。
+- **Quagga2:** 用于从视频流中解码条形码的库。
+- **idb:** 一个轻量级的包装库，用于简化 IndexedDB 操作。
+- **react-router-dom:** 用于在应用内进行路由和视图管理。
+
+## 开发环境
+- **构建工具:** Vite 将被用作构建工具，因为它提供了快速的开发服务器和优化的构建过程。
+- **节点版本:** 建议使用最新的 LTS 版本的 Node.js。
+- **包管理:** pnpm 将用于安装和管理项目依赖。
+
+## 依赖
+- `react`
+- `react-dom`
+- `@vitejs/plugin-react`
+- `vite`
+- `tailwindcss`
+- `postcss`
+- `autoprefixer`
+- `@ericblade/quagga2`
+- `idb`
+- `react-router-dom`