这是一个基于 Next.js(TypeScript)、Tailwind CSS 和 Prisma 的开源本地密码管理应用,旨在演示一个完整的密码管理体验:用户认证、密码条目管理(增删改查)、分类与标签、密码生成器、导入/导出以及安全中心等功能。
- 用户认证:注册与登录。
- 密码条目管理:创建、编辑、删除、收藏、搜索与过滤(分类/标签)。
- 分类(Category)与标签(Tag)支持,用于组织密码条目。
- 密码生成器:内置密码生成器帮助创建高强度密码。
- 导入 / 导出:支持密码数据的导入与导出(CSV/JSON 等)。
- 安全中心:展示密码强度、不安全密码或过期提示等。
- Prisma + SQLite:使用 Prisma ORM 持久化数据。
src/app- Next.js 应用与页面(带内置 API 路由)。src/components- UI 组件与密码相关组件(列表、对话框、生成器等)。src/lib- 数据库连接与工具(例如db.ts使用 PrismaClient)。prisma- Prisma schema(包含用户、分类、标签、密码条目等模型)。server.ts- 自定义服务器入口(用于示例 Socket.IO / 自定义启动)。
下面示例基于 Windows + PowerShell。仓库中使用 npm(也可用 pnpm/yarn,按需调整命令)。
- 安装依赖
npm install- 设置环境变量
在项目根目录创建 .env,并至少设置:
DATABASE_URL="file:../db/dev.db"
# NODE_ENV=development
- 生成 Prisma 客户端并推送数据库模式
npx prisma generate
npm run db:push- 本地启动开发服务器
npm run dev主要模型定义在 prisma/schema.prisma:
User:用户,包含主密码的哈希与盐(passwordHash、salt)、提示等。PasswordEntry:密码条目(title、username、password(加密后)、website、notes、categoryId、tags 等)。Category:用于分类密码条目。Tag与PasswordTag:标签与多对多关系表。
当前默认使用 SQLite(provider = "sqlite")。生产可换成 PostgreSQL、MySQL 等,修改 DATABASE_URL 和 prisma/schema.prisma datasource 即可。
应用在 src/app/api 目录下提供 REST 风格的路由,主要包括:
api/auth/register- 用户注册api/auth/login- 登录api/passwords- 密码条目列表、创建(支持分页/筛选)api/passwords/[id]- 单条密码获取/更新/删除api/categories- 分类列表/管理api/tags- 标签列表/管理api/import- 导入密码数据api/export- 导出密码数据api/health- 健康检查
(具体实现请查看对应文件夹下的 route.ts)
- 请务必在生产环境中使用强随机密钥(例如
NEXTAUTH_SECRET或其它加密用 key)。 - 不要在代码库中提交
.env等包含密钥的文件。 - 若迁移到远端数据库,确保数据库文件/连接使用安全凭证和备份策略。
- 将敏感字段(例如密码)在数据库中加密/哈希,当前示例使用字段名如
passwordHash、salt来存储主密码的哈希信息,密码条目也为“加密后的密码”(请审查实现以满足你的安全需求)。
- 在 CI 中构建并运行迁移:
npm ci
npx prisma generate
npm run db:migrate
npm run build- 生产启动(示例):
NODE_ENV=production tsx server.ts对于托管平台:
- Vercel:将后端 API 路由作为 Serverless 函数部署,需移除自定义
server.ts并使用 Vercel 的运行环境。注意 Vercel 不持久化 SQLite 文件,生产请使用远程数据库(Postgres/MySQL)。 - Docker:可基于 Node 镜像构建自定义容器,运行
npm run build后用NODE_ENV=production启动server.ts或next start。
- UI 基于 shadcn(Radix + Tailwind)风格组件。
- 复杂组件(如密码列表)位于
src/components/password,可作为参考扩展或替换。 - 状态管理使用
zustand(见src/stores)。 - 异步数据请求示例使用原生 fetch 与 Next.js App Router 的 API 路由。
欢迎提交 Issue 与 PR。请遵循仓库的代码风格并在 PR 中说明变更。