独立开发｜从 0 到 1 做一个基金持仓记账与收益复盘网站（Node + Vue + ECharts）
前言
作为一名前端出身的全栈开发，我利用业余时间独立完成了一个基金持仓记账与收益复盘网站，前后端、数据抓取、可视化、部署全部由一个人完成。这篇文章记录整体架构和几个关键难点的实现思路，供同样想做个人项目的同学参考。
先说明边界：本站是个人开发的记账与数据展示工具，不提供任何投资建议，不荐股不荐基，数据仅供参考。
一、为什么做
持仓分散在多个平台、交易流水一多就算不清实际收益率、想复盘又翻不动历史数据——这些是我自己的真实痛点。与其继续用 Excel 凑，不如自己写一个。
二、功能概览（纯工具向）
- 持仓管理：多组合分账，记录成本、份额、市值，自动算收益率；
- 交易流水：买入/卖出/加仓/减仓/定投，全程可追溯；
- 收益复盘：历史收益曲线、收益日历；
- 行情可视化：指数走势、涨跌分布、板块资金流；
- AI 对话助手：接入大模型，做行情速览和问答（技术演示）。
三、技术架构
┌─────────────────────────────────────────┐
│ funds-front（Vue 2.7 + Vite + Pinia） │
│ 首页 / 广场 / AI 市场 / 管理后台 │
└──────────────┬──────────────────────────┘
│ HTTP / WebSocket / SSE
┌──────────────▼──────────────────────────┐
│ funds-server（Node.js + Express） │
│ routes / services / 定时任务 / AI 集成 │
└──────────────┬──────────────────────────┘
│
┌──────┴───────┐
│ SQLite(WAL) │ 腾讯云 COS + CDN
└──────────────┘
- 前端：Vue 2.7 + Vite 4 + Pinia，ECharts 6 可视化；大盘云图为独立 Next.js/React 子应用，iframe 嵌入。
- 后端：Node.js + Express + SQLite，手写 SQL，读写连接分离 + WAL，node-cron 定时任务，ws 长连接。
- 部署：Windows Server + PM2 + Nginx，PowerShell 一键部署。
四、关键技术难点
1. 行情数据源与接口协议还原
公开行情接口普遍带签名校验与设备指纹，直接抓取会被拦截。我梳理了签名算法、请求头与设备注册流程，还原了整条链路，稳定获取指数、涨跌分布与基金历史数据。出于合规考虑，具体算法与密钥不展开。
2. 实时推送：WebSocket + SSE 代理
- 单例 WebSocket 全站复用，心跳保活 + 指数退避重连；
- 用「连接世代号」解决重连时的新旧连接时序竞态；
- 第三方行情 SSE 流由后端建连后经 WebSocket 回推，前端统一收口。
3. 数据可视化
大盘分时用 ECharts Custom 系列绘制多空能量柱与悬浮信息层；板块资金流用 Treemap 展示；大盘云图是独立 React 子项目，自绘 treemap 热力图，更轻、可控性更强。
4. 本地数据安全与缓存
localStorage 用 AES 加密 + 完整性校验，防止通过 DevTools 篡改本地状态；大体量基金数据放 IndexedDB，避开 localStorage 容量上限并跨页复用。
5. AI 集成与代码沙箱
大模型 API 支持 SSE 流式输出；额外做了「AI 市场」，用 QuickJS（WASM）+ Pyodide（Python）在受限沙箱执行用户工具代码，配临时凭证域隔离与频控。
6. 静态资源：COS + CDN
头像、帖子图、背景图统一走腾讯云 COS，出站用自定义 CDN 域名；Nginx 对旧路径做 302 兜底，图片迁移对用户无感。
五、独立开发心得
先解决自己真实的痛点、别贪功能、部署自动化、守住个人项目的合规边界。无资质就不碰推荐与预测，踏实做工具才能走得远。
结语
从 0 到 1 一个人做完，欢迎体验交流：https://yjc.fund
免责声明：个人开发的记账与数据展示工具，数据来自公开渠道、仅供参考，不构成任何投资建议，投资有风险。
