238 lines
5.4 KiB
Markdown
238 lines
5.4 KiB
Markdown
# 个人理财计算器
|
||
|
||
一个现代化的理财产品管理和收益计算应用，支持用户认证、数据持久化和云端同步。
|
||
|
||
## 🌟 功能特性
|
||
|
||
- **用户认证**: 支持 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. 克隆项目
|
||
|
||
```bash
|
||
git clone <your-repo-url>
|
||
cd finance-calculator
|
||
```
|
||
|
||
### 2. 安装依赖
|
||
|
||
```bash
|
||
pnpm install
|
||
```
|
||
|
||
### 3. 环境变量配置
|
||
|
||
复制环境变量模板文件：
|
||
|
||
```bash
|
||
cp env.example .env.local
|
||
```
|
||
|
||
编辑 `.env.local` 文件，填入以下配置：
|
||
|
||
```env
|
||
# 数据库连接
|
||
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（推荐）：
|
||
|
||
```bash
|
||
docker run --name postgres-finance -e POSTGRES_PASSWORD=password -e POSTGRES_DB=finance_calculator -p 5432:5432 -d postgres:15
|
||
```
|
||
|
||
或手动安装 PostgreSQL。
|
||
|
||
#### 数据库迁移
|
||
|
||
```bash
|
||
# 生成 Prisma 客户端
|
||
pnpm db:generate
|
||
|
||
# 推送数据库结构
|
||
pnpm db:push
|
||
|
||
# 或者使用迁移（生产环境推荐）
|
||
pnpm db:migrate
|
||
```
|
||
|
||
### 5. Google OAuth 配置（可选）
|
||
|
||
1. 访问 [Google Cloud Console](https://console.cloud.google.com/)
|
||
2. 创建新项目或选择现有项目
|
||
3. 启用 Google+ API
|
||
4. 创建 OAuth 2.0 客户端 ID
|
||
5. 添加授权的重定向 URI：`http://localhost:3000/api/auth/callback/google`
|
||
|
||
### 6. SMTP 邮件配置
|
||
|
||
#### Gmail 配置示例：
|
||
|
||
1. 启用 2FA
|
||
2. 生成应用专用密码
|
||
3. 使用应用密码作为 `SMTP_PASS`
|
||
|
||
## 🚀 运行项目
|
||
|
||
### 开发模式
|
||
|
||
```bash
|
||
pnpm dev
|
||
```
|
||
|
||
访问 [http://localhost:3000](http://localhost:3000) 查看应用。
|
||
|
||
### 生产模式
|
||
|
||
```bash
|
||
pnpm build
|
||
pnpm start
|
||
```
|
||
|
||
## 📱 使用说明
|
||
|
||
### 登录
|
||
|
||
1. 访问应用首页
|
||
2. 点击右上角"登录"按钮
|
||
3. 选择登录方式：
|
||
- **Google 登录**: 直接使用 Google 账号
|
||
- **邮箱登录**: 输入邮箱接收登录链接
|
||
|
||
### 管理理财产品
|
||
|
||
1. **添加产品**：
|
||
- 输入本金
|
||
- 选择存入时间和截止时间
|
||
- 输入当前净值或年化利率（至少输入一个）
|
||
- 点击"添加产品"
|
||
|
||
2. **查看数据**：
|
||
- 产品列表显示所有理财产品
|
||
- 自动计算收益、日均收益、月均收益
|
||
- 显示实际年化利率
|
||
|
||
3. **删除产品**：
|
||
- 点击产品行最右侧的删除按钮
|
||
|
||
## 🔧 开发命令
|
||
|
||
```bash
|
||
# 开发模式
|
||
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
|
||
```
|
||
|
||
## 🤝 贡献指南
|
||
|
||
1. Fork 项目
|
||
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
|
||
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
|
||
4. 推送到分支 (`git push origin feature/AmazingFeature`)
|
||
5. 创建 Pull Request
|
||
|
||
## 📄 许可证
|
||
|
||
本项目采用 MIT 许可证。详见 [LICENSE](LICENSE) 文件。
|
||
|
||
## 🙋♂️ 常见问题
|
||
|
||
### Q: 登录后看不到数据？
|
||
A: 请检查数据库连接是否正常，确保已执行数据库迁移。
|
||
|
||
### Q: 邮箱登录收不到邮件？
|
||
A: 请检查 SMTP 配置是否正确，确认邮箱和应用密码设置。
|
||
|
||
### Q: Google 登录失败？
|
||
A: 请检查 Google OAuth 配置，确认客户端 ID 和密钥正确。
|
||
|
||
### Q: 计算结果不准确？
|
||
A: 计算基于365天年化，如有特殊需求可修改计算逻辑。
|
||
|
||
## 📞 支持
|
||
|
||
如有问题或建议，请通过以下方式联系：
|
||
|
||
- 创建 [Issue](../../issues)
|
||
- 发送邮件至 [your-email@example.com]
|
||
|
||
---
|
||
|
||
**享受您的理财计算之旅！** 💰📊 |