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