songtianlun/finance-calculator

Fork 0

songtianlun 42b3c0950e Add login

2025-06-14 01:33:52 +08:00

5.4 KiB

Raw Permalink Blame History

个人理财计算器

一个现代化的理财产品管理和收益计算应用，支持用户认证、数据持久化和云端同步。

🌟 功能特性

用户认证: 支持 Google OAuth 和邮箱链接登录
理财产品管理: 添加、编辑、删除理财产品
自动计算:
- 收益计算
- 日均收益
- 月均收益
- 实际年化利率
数据持久化: 使用 PostgreSQL 数据库存储用户数据
响应式设计: 支持桌面和移动设备
现代化UI: 基于 Tailwind CSS 和 shadcn/ui 组件库

🛠️ 技术栈

前端: Next.js 15, React 19, TypeScript
认证: NextAuth.js v5
数据库: PostgreSQL + Prisma ORM
样式: Tailwind CSS
UI组件: shadcn/ui
图标: Lucide React
通知: Sonner

📦 安装配置

1. 克隆项目

git clone <your-repo-url>
cd finance-calculator

2. 安装依赖

pnpm install

3. 环境变量配置

复制环境变量模板文件：

cp env.example .env.local

编辑 .env.local 文件，填入以下配置：

# 数据库连接
DATABASE_URL="postgresql://username:password@localhost:5432/finance_calculator"

# NextAuth 配置
NEXTAUTH_SECRET="your-nextauth-secret-here"
NEXTAUTH_URL="http://localhost:3000"

# Google OAuth 配置（可选）
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

# SMTP 邮件配置
SMTP_HOST="smtp.gmail.com"
SMTP_PORT=587
SMTP_USER="your-email@gmail.com"
SMTP_PASS="your-app-password"
SMTP_FROM="your-email@gmail.com"

4. 数据库设置

PostgreSQL 安装

使用 Docker（推荐）：

docker run --name postgres-finance -e POSTGRES_PASSWORD=password -e POSTGRES_DB=finance_calculator -p 5432:5432 -d postgres:15

或手动安装 PostgreSQL。

数据库迁移

# 生成 Prisma 客户端
pnpm db:generate

# 推送数据库结构
pnpm db:push

# 或者使用迁移（生产环境推荐）
pnpm db:migrate

5. Google OAuth 配置（可选）

访问 Google Cloud Console
创建新项目或选择现有项目
启用 Google+ API
创建 OAuth 2.0 客户端 ID
添加授权的重定向 URI：http://localhost:3000/api/auth/callback/google

6. SMTP 邮件配置

Gmail 配置示例：

启用 2FA
生成应用专用密码
使用应用密码作为 SMTP_PASS

🚀 运行项目

开发模式

pnpm dev

访问 http://localhost:3000 查看应用。

生产模式

pnpm build
pnpm start

📱 使用说明

管理理财产品

添加产品：
- 输入本金
- 选择存入时间和截止时间
- 输入当前净值或年化利率（至少输入一个）
- 点击"添加产品"
查看数据：
- 产品列表显示所有理财产品
- 自动计算收益、日均收益、月均收益
- 显示实际年化利率
删除产品：
- 点击产品行最右侧的删除按钮

🔧 开发命令

# 开发模式
pnpm dev

# 构建
pnpm build

# 启动生产服务器
pnpm start

# 类型检查
pnpm lint

# 数据库相关
pnpm db:generate    # 生成 Prisma 客户端
pnpm db:push       # 推送数据库结构
pnpm db:migrate    # 运行数据库迁移

📁 项目结构

finance-calculator/
├── app/                    # Next.js App Router
│   ├── api/               # API 路由
│   ├── auth/              # 认证页面
│   ├── globals.css        # 全局样式
│   ├── layout.tsx         # 根布局
│   └── page.tsx           # 首页
├── components/            # React 组件
│   ├── auth/              # 认证相关组件
│   ├── providers/         # Context Providers
│   ├── ui/                # UI 组件库
│   └── finance-calculator.tsx
├── lib/                   # 工具库
│   ├── db.ts              # 数据库连接
│   └── utils.ts           # 工具函数
├── prisma/                # Prisma 配置
│   └── schema.prisma      # 数据库模式
├── types/                 # TypeScript 类型定义
├── auth.ts                # NextAuth 配置
└── package.json

🤝 贡献指南

Fork 项目
创建功能分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
创建 Pull Request

📄 许可证

本项目采用 MIT 许可证。详见 LICENSE 文件。

🙋‍♂️ 常见问题

Q: 登录后看不到数据？

A: 请检查数据库连接是否正常，确保已执行数据库迁移。

Q: 邮箱登录收不到邮件？

A: 请检查 SMTP 配置是否正确，确认邮箱和应用密码设置。

Q: Google 登录失败？

A: 请检查 Google OAuth 配置，确认客户端 ID 和密钥正确。

Q: 计算结果不准确？

A: 计算基于365天年化，如有特殊需求可修改计算逻辑。

📞 支持

如有问题或建议，请通过以下方式联系：

创建 Issue
发送邮件至 [your-email@example.com]

享受您的理财计算之旅！ 💰📊

5.4 KiB Raw Permalink Blame History Unescape Escape