项目名称：密码混淆器（Password Mixer）

---

1. 项目简介

密码混淆器是一个基于 Web 的工具，用户只需记住一个原始密码，通过输入站点信息和简单的配置，即可为不同网站生成稳定、安全且互不相同的最终密码。

本项目采用前后端分离架构：

• 前端使用 Vue3（基于 Vite）。
• 后端使用 Node.js + Express。

---

2. 目标与特点

• 用户只需记住一个原始密码，即可生成多个网站的强密码。
• 最终密码长度可选：16–20 位。
• 可选是否包含特殊字符，以及部分自定义规则。
• 在相同输入（原始密码、用户名、站点名、长度、是否特殊字符、自定义规则）下，生成结果严格一致。
• 不存储用户数据，不记录敏感日志，高度重视安全性。
• 网站在手机和电脑浏览器上均有良好的体验，支持一键复制密码。

---

3. 整体架构

• 前端（frontend）

  • 技术栈：Vue3 + Vite。
  • 职责：提供表单输入、结果展示、复制功能和响应式布局。
  • 部署方式：构建为静态资源，通过 Nginx 或静态托管平台部署。

• 后端（backend）

  • 技术栈：Node.js + Express。
  • 职责：提供无状态 POST /api/generate 接口，只负责基于输入计算密码，不进行数据持久化。
  • 部署方式：常驻 Node 服务，通常由 Nginx 反向代理。

• 安全与通信

  • 前后端均通过 HTTPS 访问。
  • 后端启用安全 Header（Helmet 等）。
  • 接口无数据库，无用户账户体系，为纯计算型服务。

---

4. 目录结构设计（建议）

project-root/
  frontend/                 # 前端应用（Vue3）
    src/
      main.ts
      App.vue
      components/
        Layout.vue          # 响应式整体布局
        PasswordForm.vue    # 输入表单
        AdvancedSettings.vue# 高级自定义规则
        ResultPanel.vue     # 结果展示与复制
      services/
        api.ts              # 封装后端 API 调用
      styles/               # 全局样式 & 响应式样式
    vite.config.ts
    package.json

  backend/                  # 后端服务（Node.js + Express）
    src/
      index.ts              # 应用入口，挂载中间件和路由
      routes/
        password.ts         # POST /api/generate 路由
      services/
        passwordService.ts  # 核心密码生成服务
      utils/
        crypto.ts           # 哈希/派生工具封装
      config/
        security.ts         # Helmet、CORS 等安全配置
    package.json

  README.md                 # 项目说明（本文件）

---

5. 核心业务流程

1. 用户打开网站，在表单中输入：

   • 原始密码（必填，密码输入框）
   • 站点用户名（可选）
   • 站点名称（必填）
   • 密码长度（16–20，可选）
   • 是否包含特殊字符（可选）
   • 高级自定义规则（可选，见下）

2. 用户点击“生成密码”：

   • 前端进行基础校验（必填项、长度范围等）。
   • 前端调用后端 POST /api/generate 接口，将参数以 JSON 方式传递。

3. 后端接收请求，调用内部密码生成服务：

   • 根据输入构造种子字符串。
   • 使用安全哈希/派生算法生成哈希结果。
   • 按规则映射为指定长度的密码字符串。
   • 确保满足用户勾选的规则（如必须包含特殊字符等）。
   • 返回最终密码（不做任何存储）。

4. 前端接收响应：

   • 在结果面板中展示最终密码。
   • 用户可一键复制到剪贴板，填写到目标网站。

---

6. 后端设计

6.1 API 规格

• URL：POST /api/generate
• 请求体（JSON）示例：

{
  "masterPassword": "用户输入的原始密码",
  "username": "可选：该站点用户名",
  "site": "站点名称或域名",
  "length": 16,
  "useSpecial": true,
  "rules": {
    "requireUppercase": true,
    "requireLowercase": true,
    "requireDigit": true,
    "requireSpecial": true,
    "customSpecialChars": "!@#$%^&*"
  }
}

• 响应体示例：

{
  "password": "A9f!kL2pQx7@Z1m"
}

6.2 密码生成算法逻辑（概述）

1. 构造种子字符串

   seed = masterPassword + "|" + (username || "") + "|" + site
   

2. 加入应用级盐并进行哈希 / 派生

• 在后端代码中定义固定盐值，如 APP_SECRET_SALT（不暴露给前端）。

• 使用 PBKDF2 或 HMAC-SHA256：

  hash = HMAC_SHA256(seed, APP_SECRET_SALT)
  # 或
  hash = PBKDF2(seed, APP_SECRET_SALT, iterations, keyLength=32, digest='sha256')
  

3. 构造字符集

• 基础字符集：
  • 小写字母：a-z
  • 大写字母：A-Z
  • 数字：0-9
• 若 useSpecial = true，则额外加入特殊字符集合：
  • 默认值（例如）：!@#$%^&*()-_=+[]{};:,.?/
  • 若 rules.customSpecialChars 存在，则以用户指定为准。

4. 哈希映射到最终密码

• 将哈希结果视作字节或 16 进制字符串。

• 从头到尾依次取每一位/每几个字节：

  index = hashByte % charset.length
  passwordChar = charset[index]
  

• 循环取值，直到生成满足 length 指定长度的字符串。

5. 规则修正（保证字符种类）

• 根据 rules 中的要求（如 requireUppercase、requireDigit 等），检查生成的密码是否包含对应类型的字符。

• 若某类缺失，则使用额外的哈希位来确定要替换的下标：

  pos = hashExtraByte % length
  password[pos] = 从对应字符子集选出的字符
  

• 替换规则是确定性的，因此在相同输入下仍会生成相同结果。

6.3 安全策略

• 不存储：
  • 不接数据库，服务完全无状态。
  • 不存储请求参数，不打印包含原始密码的日志。
• 通信安全：
  • 后端必须在 HTTPS 环境下服务（通过反向代理实现）。
• 应用安全：
  • 使用 helmet 添加常见安全 Header（CSP、X-Frame-Options 等）。
  • 可选：配置简单的请求频率限制（Rate Limit），防止接口被恶意滥用。

---

7. 前端设计

7.1 页面结构

• Layout.vue

  • 负责整体布局：
    • PC：左右分栏或上下分区，左侧表单，右侧结果。
    • 移动端：竖向单列布局，表单和结果依次呈现。
  • 使用媒体查询或 UI 库实现响应式。

• PasswordForm.vue

  • 表单内容：
    • 原始密码：<input type="password">
    • 用户名：普通文本输入（可空）
    • 站点名称：普通文本输入
    • 密码长度：下拉框或滑块（16–20）
    • 是否包含特殊字符：开关 / 复选框
    • “高级设置”按钮：展开 AdvancedSettings 区域
  • 提交按钮：“生成密码”
  • 表单校验：
    • 原始密码、站点名称必填。
    • 长度在 16–20 间的整数。

• AdvancedSettings.vue

  • 自定义规则选项：
    • 是否必须包含大写字母/小写字母/数字/特殊字符。
    • 自定义特殊字符集合（文本输入）。
  • 将配置打包为 rules 对象传回父组件。

• ResultPanel.vue

  • 展示最终密码的只读输入框。
  • “复制”按钮：
    • 使用 navigator.clipboard.writeText(password) 实现一键复制。
    • 提供复制成功/失败的提示。

7.2 API 调用封装（services/api.ts）

export async function generatePassword(payload) {
  const res = await fetch('/api/generate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload),
  });
  if (!res.ok) {
    throw new Error('生成密码失败');
  }
  return res.json(); // { password: string }
}

• 前端组件通过调用该方法获取最终密码。

7.3 前端安全与隐私

• 使用密码输入框隐藏原始密码。
• 不在控制台打印用户输入。
• 不使用可疑第三方脚本，仅引入可信依赖。
• 在页面上明确说明：“本工具不存储任何原始密码和站点信息”。

---

8. 部署方案

1. 构建前端

   • 进入 frontend/ 目录运行：npm install && npm run build（或 yarn install && yarn build）。
   • 生成的静态资源（dist/）部署到 Nginx 或静态托管服务。

2. 部署后端

   • 进入 backend/ 目录安装依赖并构建（如使用 TypeScript，则打包为 JS）。
   • 启动 Node.js 服务，例如监听 http://localhost:3000。

3. Nginx 配置（示意）

   • 将 / 路由指向前端静态资源目录。
   • 将 /api 路由反向代理到 Node 后端服务。
   • 开启 HTTPS，配置基础安全 Header。

---

9. 后续扩展方向

• 支持本地纯前端模式：密码在浏览器本地计算，不依赖后端。
• 增加“算法模式”选择：如“简单模式（快）”与“安全模式（迭代次数更多）”。
• 增加国际化支持（多语言界面）。
• 提供导出/导入配置文件功能（只包含偏好和规则，不包含任何密码数据）。

---

如果你准备开始实现代码，可以优先按本 README 中的目录结构创建 frontend 与 backend 目录，再根据这里的设计补充具体实现。需要的话，我也可以帮你把关键文件的骨架（如 passwordService.ts、PasswordForm.vue 等）一起搭好。