本项目是一个贷款计算器和还贷模拟器 Web 应用,支持用户根据贷款金额、期限、利率和还款方式,计算并显示月还款金额、剩余贷款金额和未来还款计划。
不同于网上其他房贷计算器,本项目专门针对存量房贷开发了还贷模拟功能:可以多次调整利率或提前还款,模拟用户真实还款情况,并通过数据可视化帮助用户直观对比不同方案的差异。
v2.0 全面升级为 React + Shadcn/ui 现代技术栈。v2.7 新增组合贷款(商贷+公积金)、方案对比、还款模拟和机会成本分析。
所有计算在浏览器本地运行,数据存储在本地,不用担心数据泄露,请放心使用。
直接访问 loan.v2dl.net 即可使用,支持 PWA,可添加到手机/电脑桌面。
- 贷款计算 - 支持等额本息和等额本金两种还款方式
- 利率变更 - 模拟存量房贷利率调整,变更日期后的还款计划自动重算
- 提前还款 - 模拟提前还本金,支持减少月供或缩短年限两种模式
- 按天计息 - 变更当月支持按天计算利息差额
- 撤销操作 - 支持撤销最近一次变更操作
- Excel 导出 - 还款计划表和变更记录一键导出为 Excel 文件
- 数据分析 - 还款概览环形图、变更前后对比、利息节省分析、详细趋势图
- 多方案管理 - 保存、加载、切换多个贷款方案
- LPR 利率表 - 内置 5 年期 LPR 历史数据,支持基点偏移自动计算
- 自定义利率表 - 通用利率时间线管理,一次性批量设置利率变更
- 数据持久化 - 自动保存到浏览器本地,刷新不丢失
- 暗色主题 - 亮色/暗色/跟随系统三种模式
- 响应式设计 - 桌面端侧边导航 + 移动端底部 Tab,适配各种屏幕
- PWA 支持 - 可安装到桌面,离线可用
- 公积金贷款 - 新增公积金贷款类型,30/360 按天计息,自由还款方式
- 组合贷款 - 商贷 + 公积金组合为一组,合并计算合计月供/利息/本金
- 方案对比 - 多方案横向对比,图表点击截止日对比,当期指标和利率拆分
- 还款模拟 - 模拟提前还款和月供调整,智能分析自动推荐最优方案
- 机会成本分析 - 回本周期、流动性提示、投资对比曲线、关键节点标记
- 多格式导出 - 支持 Excel / CSV / Markdown / 剪贴板
- 变更还款日 - 首期按天精确计息
- 全部还清 - 一键全部还清,剩余本金按日期动态计算
- 利率表导入 - 利率变更支持从利率表一键导入
- 数据导入导出 - 支持跨设备同步贷款方案数据
- 生成还贷计划后,可按照时间先后顺序多次操作利率变更和提前还款。
- 本计算器按月计算,确保月份填写正确。
- 每次变更操作会刷新指定日期之后的所有数据。
- 变更操作当月生效,如当月数据与银行不一致,因变更当月银行按天计算利息,属于正常误差,仅影响当月。
- 一个月内不支持多次变更利率/提前还款,现实中通常也不存在此情况。
- 如发现数据异常,可重新生成还款计划表再次操作。
- React 19 + TypeScript 6 + Vite 8 - 现代 React 技术栈
- Shadcn/ui (Radix UI) - 可定制 UI 组件,内置无障碍
- Tailwind CSS 4 - 原子化样式
- Zustand - 轻量状态管理 + localStorage 持久化
- ECharts - 数据可视化(按需引入)
- pnpm - 严格依赖管理
- Biome - 统一代码检查与格式化
- Vitest + React Testing Library - 单元测试
- GitHub Actions - CI/CD 自动部署到 GitHub Pages
src/
├── app/ # 根组件、路由、providers
├── components/
│ ├── ui/ # Shadcn/ui 组件
│ ├── layout/ # 布局组件(Sidebar, BottomTabs, AppShell)
│ └── shared/ # 通用业务组件
├── features/
│ ├── calculator/ # 贷款计算主页面
│ ├── changes/ # 变更操作(利率变更、提前还款)
│ ├── charts/ # 数据可视化 + 分析页面
│ ├── compare/ # 方案对比页
│ ├── simulate/ # 还款模拟页(提前还款模拟、机会成本分析)
│ ├── rate-table/ # 利率表管理(自定义 + LPR + 公积金)
│ └── settings/ # 设置页面
├── core/
│ ├── calculator/ # 纯计算函数(含组合贷款合并计算)
│ ├── types/ # TypeScript 类型定义(含 LoanGroup)
│ └── utils/ # 格式化、验证工具
├── services/ # 导出服务(Excel、CSV、Markdown)
├── stores/ # Zustand 状态管理 + 存储适配器
├── hooks/ # 自定义 hooks(主题等)
└── styles/ # Tailwind 全局样式 + CSS 变量
用户输入 → React 组件 → Zustand Store → LoanCalculator 计算
→ Store 更新 → React 组件自动重渲染 + localStorage 持久化
- Node.js >= 22
- pnpm >= 10
pnpm install # 安装依赖
pnpm dev # 启动开发服务器
pnpm build # 生产构建
pnpm preview # 预览构建结果
pnpm type-check # TypeScript 类型检查
pnpm lint # Biome 代码检查
pnpm lint:fix # 自动修复
pnpm test # 运行测试
pnpm test:coverage # 运行测试并生成覆盖率报告通过 GitHub Actions 自动部署到 GitHub Pages。push 到 master 分支后自动执行类型检查、lint、测试和构建,然后部署到 loan.v2dl.net。
- 2.7.0 (2026-04-05) — 组合贷款(商贷+公积金);机会成本增强(回本周期、对比曲线)
- 2.6.0 (2026-04-02) — 还款模拟页(智能分析、机会成本分析)
- 2.5.0 (2026-03-31) — 方案对比页
- 2.4.0 (2026-03-31) — 变更还款日、全部还清、期限月数输入
- 2.3.0 (2026-03-30) — 多格式导出(CSV/Markdown/剪贴板)
- 2.2.0 (2026-03-30) — 公积金贷款、自由还款、30/360 按天计息
- 2.1.0 (2026-03-29) — 利率表管理、数据导入导出、echarts 懒加载
- 2.0.0 (2026-03-29) — React 全量重构;Dashboard UI;暗色主题;数据分析图表;LPR 利率表;多方案管理;数据持久化
- 0.8.0 (2026-03-29) — 提前还款变更方式(减少月供/缩短年限)
- 0.7.0 (2026-03-29) — 迁移 TypeScript + Vite 架构;新增按天计息、撤销、输入验证
- 0.6.1 (2025-01-13) — 首页显示版本号
- 0.6 (2025-01-13) — 新增变更记录展示与导出
- 0.5 (2025-01-13) — 新增变更记录展示,优化页面布局
- 0.4 (2025-01-12) — PWA 支持
- 0.3 (2025-01-12) — 部署 GitHub Pages,绑定域名
- 0.2 (2025-01-11) — 新增 Excel 导出
- 0.1 (2025-01-11) — 初版发布
完整记录见 CHANGELOG.md
CC BY-NC-SA 4.0 - 由 Tiger 开发
本项目禁止商业用途。个人学习、修改和分享需署名,且衍生作品须采用相同协议。
如有疑问或建议,欢迎提交 Issue
