安全密盾 (Secure QR Vault)

这是一个基于React和Web Crypto API开发的安全二维码数据管理应用。应用采用本地化处理，不上传任何数据到服务器。

用户需求与提示词 (Prompt)

帮我开发一个全中文应用, 将我的提示词和使用说明都保存到README.md文件:
一, 需要支持MAC电脑端和iPhone手机端.
二, 安全最重要, 不要使用一些不安全的第三方库, 防止数据泄漏.
三, 具体功能如下:
1, 主界面: 上方五分之三高度局中显示一个ICON(根据APP核心生成一个), 下方五分之二高度显示一个“密码文本框”(可切换显示明文)和两个按钮, 分别是 “扫描二维码” 和 “读取本地文件” 按钮. 
2, 二级页面: 点击 “扫描二维码” 按钮后调用摄像头等待读取二维码数据(需要有实时扫描二维码效果), 扫描到二维码后立即关闭摄像头调用后在新开页面中展示读取的二维码中的数据, 下方需要一个 “保存数据” 按钮将数据一键保存到本地扩展名为.qrd的文件, 需要指定保存的位置, 并且生成的文件需要使用AES256加密, AES256加密KEY和IV是根据不同“密码文本框”中的密码进行SHA256后生成的固定值, 必须保证同一个“密码文本框”中的密码每次生成的AES256加密KEY和IV是一致的.
3, 二级页面: 点击 “读取本地文件” 按钮后, 调用选择本地扩展名为.qrd文件, 在新开页面中展示读取.qrd文件数据, 需要AES256解密后显示, 下方需要一个 “生成二维码” 按钮, 点击“生成二维码”按钮后弹出半透明层, 居中展示.qrd文件明文数据生成的二维码, 点击二维码空白区域关闭半透明层
4, 二级页面都需要返回到主页面.
5, 需要您帮我测试, 完全没有问题后, 我需要预览看效果

快速开始 (安装依赖)

本项目已移除在线 CDN 依赖，支持完全离线运行。请执行以下命令安装依赖：

npm install
npm install -D tailwindcss postcss autoprefixer

运行开发环境:

npm run dev

发布:

npm run build

安全审计报告 (Security Audit)

经过代码审查，确认本应用符合以下安全标准：

1. 无数据外传: 经检查，源代码中不存在任何数据上报接口（如 fetch, XMLHttpRequest），所有操作均在本地完成。
2. 本地加密: 使用浏览器原生 Web Crypto API，私钥和明文数据仅存在于当前会话内存中，关闭页面即销毁。
3. 确定性密钥: 严格遵照需求，使用 SHA-256 算法从密码确定性地派生密钥和 IV，确保同一密码可解密同一文件，同时不依赖随机数导致无法恢复。

技术栈与安全说明

• 核心框架: React 18 + TypeScript + Tailwind CSS (本地构建)
• 加密算法: 使用浏览器原生 Web Crypto API (SubtleCrypto)。
  • AES-256-CBC: 用于数据加解密。
  • SHA-256: 用于从用户密码派生密钥(Key)和初始化向量(IV)。
  • 零依赖加密: 不使用任何第三方加密库（如 crypto-js），确保代码透明安全。
• 二维码处理:
  • 生成: qrcode.react
  • 识别: jsqr (纯JavaScript解码，无后台传输)

使用说明

1. 设置密码 (主界面)

   • 在主界面下方的输入框中输入您的安全密码。
   • 注意: 这是一个对称加密系统。加密和解密必须使用完全相同的密码。如果您忘记了加密时使用的密码，数据将无法恢复。
   • 点击“眼睛”图标可切换密码的显示/隐藏。

2. 扫描与保存

   • 输入密码后，点击“扫描二维码”。
   • 允许浏览器访问摄像头。
   • 将摄像头对准任意二维码。
   • 识别成功后，屏幕将显示二维码内的原始数据。
   • 点击“加密并保存数据”按钮，系统会自动下载一个 .qrd 文件。该文件内容已被您的密码加密。

3. 读取与还原

   • 在主界面输入解密密码（必须与加密时的密码一致）。
   • 点击“读取本地文件”。
   • 选择之前保存的 .qrd 文件。
   • 系统将尝试解密。如果密码正确，您将看到原始数据；如果密码错误，解密将失败或显示乱码。
   • 点击“生成二维码”，可将解密后的数据重新生成为二维码展示。

数据隐私

• 本应用为纯前端应用。
• 无网络请求: 您的密码、二维码数据、文件内容永远不会发送到任何服务器。
• 所有加解密运算均在您的设备（Mac 或 iPhone）本地完成。