先说结论
做这个工具的起因很简单——如果你看到信用卡账单 ¥3,200+，估计才会逐行排查，发现光流媒体 + AI 工具 + 云存储这几个「小钱」加起来可能就快 ¥1,500/月了。
订阅疲劳是真的，但更可怕的是你根本不知道那些「每月几美元」加起来是多少。
于是我花了点时间做了个免费工具站：Subscription Cost Calculator（订阅费用计算器），希望帮大家一键算清自己在订阅服务上的真实花费。
功能亮点
60+ 订阅服务，覆盖中英文市场
内置了85+ 主流订阅服务，涵盖：
| 品类 | 代表服务 |
|---|---|
| Streaming | Netflix、Disney+、爱奇艺、腾讯视频、B站 |
| AI Tools | ChatGPT Plus、Claude Pro、Midjourney、Kimi、豆包、DeepSeek |
| Cloud Storage | iCloud、Google One、百度网盘、阿里云盘 |
| Gaming | Xbox Game Pass、PS Plus、Switch Online |
| Music | Spotify、Apple Music、QQ音乐、网易云音乐 |
| Productivity | Notion、Figma、WPS、飞书、Obsidian |
| ... | 等等 |
中国用户友好：支持 Bilibili、腾讯视频、爱奇艺、优酷、芒果TV、Kimi、豆包、智谱清言、讯飞星火、DeepSeek、百度网盘、阿里云盘、夸克网盘、QQ音乐、网易云音乐、WPS、飞书、微信读书、得到 等主流平台。
智能费用汇总
勾选你的订阅服务后，自动计算：
日费— 每天花多少
月费— 每月固定支出
年费— 一年下来是多少（这个数字往往很「惊喜」）
5年/10年费— 长期视角看消费
可视化分析
品类分布图— 看看钱都流向了哪些品类
时间线柱状图— 月度/年度/5年/10年费用一目了然
智能洞察— 自动识别最贵的订阅服务，告诉你它占了总花费的百分比
自定义服务 & 价格编辑
如果你的订阅服务不在数据库里，可以手动添加。 如果你的订阅是家庭计划/学生折扣，也可以直接编辑价格。
一键分享卡片
计算结果可以导出为 PNG 图片，发朋友圈、发微博都行。
技术实现
技术栈
Next.js 15+React 19+TypeScript
Tailwind CSS 4— 原子化 CSS，快速迭代样式
Next.js App Router— 现代 React 服务端渲染架构
架构亮点
项目采用了清晰的目录结构：
src/ ├── app/ # Next.js App Router 页面 ├── components/ # UI 组件（calculator、layout、seo） ├── data/ # 服务数据库、i18n 配置 ├── hooks/ # 自定义 Hooks └── lib/ # 工具函数（计算逻辑、埋点等）
核心计算逻辑完全在浏览器端完成，不上传任何数据到服务器，隐私友好。
数据持久化
使用localStorage保存用户的选择，刷新页面不丢失。
使用场景
月底账单日
看到信用卡账单 ¥3,000+？ 打开计算器 → 勾选所有订阅 → 看到年费 ¥36,000 → 默默取消几个不常用的
考虑新订阅时
想订阅 Claude Pro？ 加入列表 → 看到每月订阅总费 ¥800+ → 犹豫了，觉得还是先取消一个再说
年度财务审计
年初想整理财务？ 全选服务 → 导出分享卡片 → 发朋友圈："我一年花了 ¥18,000 在订阅上"
Roadmap（下一步计划）
- 中英双语支持
- 多货币切换（USD/CNY/EUR/GBP）
- 暗色模式
- 消费泼冷水计算器（另一个工具）
- 订阅提醒功能（提醒你取消长期不用的订阅）
结语
这个工具完全免费，无需注册，即用即走。
如果你觉得有用，欢迎分享给朋友。
如果你有任何建议（比如想增加某个服务、想加某个功能），非常欢迎在评论区留言，我会认真看每一个反馈。
如果你有相关开发需求（无论是类似的工具站、还是其他 Web 应用），也可以通过以下方式联系我：
博客底部有联系方式
项目地址
网站：https://subcost.tools
Tags：#订阅服务 #费用计算器 #工具推荐 #Next.js #React #TypeScript #TailwindCSS #订阅疲劳 #理财工具
免责声明：本文提及的服务价格仅供参考，实际价格以各平台官方定价为准。
