authenticator/memory-bank/techContext.md

技术背景 (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），以保持代码库的清晰和可扩展性。