为什么做这个工具Vibe Coding这个概念已经流行很久了现在coding怕是赶不上热乎的但是还是希望自己做点什么每个月买的GPT额度总不能浪费。做这个小工具最初是为了查看基金的盘中实时估值毕竟现在正规渠道下架了实时估值功能懂的都懂。以及我个人买的基金太多所以想做一个工具辅助自己管理持仓我还预设了几条投资纪律用来约束自己的操作尽量避免追涨杀跌、亏损后死扛等行为。另外我想学习理财虽然在大A折腾来折腾去很难赚到钱但我觉得理财是真有意思。关于页面设计开始我只想设计一个普通的基金管理工具。后来又想想能够查看盘中实时估值的软件并不少这个工具要靠什么支撑我每天打开并长期使用呢于是我决定把它做成一个海绵宝宝主题工具让它在视觉上多一点趣味性。不过在具体的页面设计中我没有大面积使用海绵宝宝的角色形象整体还是以简洁、清晰的元素为主。我个人觉得比较有趣的一点是这个工具尽量避免使用死板的功能按钮而是让角色和场景本身参与交互。比如蟹老板头上的对话框是“海底简报”的入口点击派大星的房子就会打开便签夹拖动小蜗则相当于拖动页面的横向滚动条。功能介绍盘中估值看板首页把我关心的信息放在一起今日预估收益、当前持有收益以及每只基金的盘中估值。基金可以按实时估值或持有收益排序想找涨跌比较明显的基金时会快一些。单只基金的详情页点进基金后可以看到持仓金额、累计收益、收益率和历史净值走势。走势图支持近1月、近3月、近1年和成立以来几个范围鼠标移上去时也可以看到当天净值和相对涨幅。右侧是辅助建议和昨日复盘。辅助建议只是根据我预先设好的规则给出提醒最终怎么操作还是由自己判断。交易页里则可以记录加仓、减仓、清仓和纠错流水。每日资讯和每日知识尽管我们每天都可以从很多渠道了解资讯但内容太多反而让人不知道该从哪里开始也很难静下心读完。因此我设计了每日资讯和每日知识两个模块只保留适合自己阅读的内容。每天打开后花一点时间就能看完学习这件事也更容易坚持。事件提醒和便签夹便签夹分为事件提醒和普通便签。基金相关的财报、重要日期可以放到本周日历里临时想到的事情或了解到的投资建议则直接记成便签。内容多了以后可以用关键词筛选。实现方式这个项目是我用Codex和Claude code完成的前者负责前端后者负责后端。前端使用 Vue 3 TypeScript Vite后端使用 Python FastAPI。前后端通过 API 交互基金、持仓、净值、交易流水、简报和便签都分成了独立接口。写在最后我不是程序员这个产品也远谈不上完美只是一个轻量的小工具它不会替我决定买卖只负责整理信息、提醒纪律也让每天看一眼持仓这件事变得有趣一点。本项目仅用于个人学习和持仓记录页面中的信息不构成任何投资建议。