2FA 验证码器

制作一个单文件 HTML 2FA 验证码生成器（TOTP Authenticator），输入密钥后能生成实时刷新的 6 位动态验证码

制作一个单文件 HTML 2FA 验证码生成器（TOTP Authenticator），核心用途是**替代手机上的 Google Authenticator / Authy**——在桌面浏览器中直接生成 TOTP 动态验证码，免去掏手机的麻烦。 功能要求： 1. 密钥录入：支持手动输入 Base32 编码的 TOTP 密钥（Secret Key），输入时自动忽略空格和大小写差异 2. URI 解析：支持粘贴 `otpauth://totp/...` 格式的 URI，自动解析出账户名（issuer + account）和密钥等参数 3. TOTP 算法实现：在纯前端使用 Web Crypto API 实现 HMAC-SHA1 签名，按照 RFC 6238 标准计算 6 位动态验证码（默认 30 秒时间步长） 4. 实时倒计时：显示当前验证码剩余有效秒数的环形或条形进度条，每秒刷新，到期自动生成新验证码 5. 多账户管理：支持添加多个账户，以卡片列表形式展示，每个卡片显示账户名、当前验证码和倒计时 6. 一键复制：点击验证码或复制按钮即可复制到剪贴板，复制后有短暂的视觉反馈（如变色、打勾动画） 7. 数据持久化：使用 localStorage 保存所有已添加的账户和密钥，页面刷新后自动恢复 8. 账户编辑与删除：支持编辑账户名称、删除单个账户，删除前需二次确认 9. 搜索与过滤：当账户数量较多时，提供搜索框按名称快速筛选 10. 导入导出：支持将所有账户数据导出为加密或明文 JSON 文件，以及从 JSON 文件导入恢复 11. 验证码大字体展示：验证码数字使用大号等宽字体，中间加空格分组（如 `123 456`），方便快速阅读和输入 设计要求： - 整体风格简洁专业，深色主题为主（类似 1Password / Authy 的暗色风格） - 每个账户卡片需清晰展示：服务商图标占位（首字母头像）、账户名、6 位验证码、倒计时进度 - 倒计时进度条在剩余时间不足 5 秒时变为警告色（如红色/橙色），提示用户抓紧复制 - 移动端响应式布局，单列卡片堆叠，触控友好 - 添加账户的入口醒目但不喧宾夺主（如顶部固定的 + 按钮或 FAB 悬浮按钮）