# 技术背景 (Tech Context)

## 1. 技术选型

- **构建与开发环境**:
  - **Vite**: 选择 Vite 作为构建工具，因为它提供了极速的冷启动、即时的热模块替换 (HMR) 和优化的构建输出。
  - **Node.js/npm**: 用于项目依赖管理和运行开发脚本。

- **前端框架**:
  - **React**: 使用 React (v18+) 构建用户界面。其组件化架构非常适合管理 TOTP 列表和独立的 UI 元素。
  - **React Hooks**: 将广泛使用 Hooks (如 `useState`, `useEffect`, `useCallback`) 来管理组件状态和生命周期。

- **样式**:
  - **Tailwind CSS**: 一个功能优先的 CSS 框架，可以快速构建现代化的界面而无需离开 HTML (或 JSX)。
  - **PostCSS**: 与 Tailwind CSS 配合使用，用于处理和转换 CSS。

- **状态管理**:
  - **React Context API**: 对于这个规模的项目，React 自带的 Context API 足以在组件间共享状态（例如 TOTP 列表），无需引入 Redux 或 MobX 等外部库。

- **数据持久化**:
  - **IndexedDB**: 选择 IndexedDB 是因为它为客户端提供了强大的结构化数据存储能力，远胜于 localStorage，非常适合存储包含多个字段的 TOTP 账户信息。
  - **`idb` 库**: 为了简化 IndexedDB 的操作，将使用 `idb` 这个轻量级库，它提供了基于 Promise 的简洁 API。

- **TOTP 逻辑**:
  - **`otpauth` 库**: 这是一个流行的、经过验证的库，用于生成和解析 TOTP/HOTP URL，并能计算出一次性密码。我们将用它来处理核心的 TOTP 算法。其 `OTP.parse(uri)` 方法可以直接将 `otpauth://` URI 解析为一个包含所有参数的对象，极大地简化了 URI 的导入功能开发。

- **语言**:
  - **TypeScript**: 推荐使用 TypeScript 来增强代码的健壮性和可维护性，提供类型安全。

## 2. 开发工作流

1.  **初始化**: 使用 `npm create vite@latest` 命令创建项目模板。
2.  **安装依赖**: 安装 React, Tailwind CSS, `idb`, `otpauth` 等核心依赖。
3.  **配置**:
    -   配置 `tailwind.config.js` 和 `postcss.config.js` 以启用 Tailwind CSS。
    -   配置 `tsconfig.json` 以获得最佳的 TypeScript 开发体验。
4.  **开发**: 运行 `npm run dev` 启动 Vite 开发服务器。
5.  **构建**: 运行 `npm run build` 将项目打包为静态文件，用于部署。

## 3. 关键技术决策

- **不使用后端**: 这是项目的核心原则。所有逻辑和数据都在客户端处理，确保用户数据的隐私和所有权。
- **优先选择原生 Web API**: 在可能的情况下，优先使用浏览器原生 API (如 IndexedDB, Crypto API)，仅在能显著简化开发时才引入第三方库。
- **模块化**: 代码将按功能进行模块化组织（例如，`services/idb.ts`, `hooks/useTotp.ts`, `components/TotpCard.tsx`），以保持代码库的清晰和可扩展性。