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