手把手教你用 React + Vite 打造一个“摸鱼神器”——实时基金估值助手 📈
作为一个资深“韭菜”，每天盯着基金净值波动是必修课。但频繁打开支付宝或天天基金不仅加载慢，在办公室这种公共场合还容易暴露“身价”（虽然可能是负的...）。
于是，我利用周末时间，用 React + Vite 写了一个轻量级的实时基金估值助手。它不仅支持实时查看估值，还贴心地加入了隐私模式和移动端适配，简直是上班摸鱼、下班理财的必备神器！
✨ 项目亮点
1. 🛡️ 隐私脱敏模式（摸鱼核心功能）
在办公室看基金，最怕被同事瞥见账户金额。本项目特别设计了“隐私模式”：
- 点击“小眼睛”图标，一键隐藏（
****）所有敏感金额（总市值、持仓成本、当日盈亏等）。 - 只保留涨跌幅百分比，让你心中有数，又不露富（或露贫）。
2. 📱 完美适配移动端
不仅支持 PC 端的大屏表格展示，还针对手机端进行了深度优化：
- PC 端：使用 Ant Design 的
Table组件，信息一目了然。 - 移动端：自动切换为卡片式布局（Card View），核心数据放大显示，操作更便捷。
3. ⚡ 实时数据 & 智能计算
- 数据源：接入天天基金/东财的实时估值接口。
- 智能导入：支持从其他软件导出的文本格式直接导入，自动反推计算“持有份额”和“持仓成本”。
4. 🔒 纯前端安全
- 所有持仓数据仅保存在浏览器的
localStorage中，不经过任何后端服务器，最大程度保障数据安全。
🛠️ 技术栈
本项目采用了目前前端社区最流行的现代技术栈：
- 构建工具: Vite - 极速启动，开发体验满分。
- 核心框架: React 18 - 配合 Hooks 进行状态管理。
- UI 组件库: Ant Design - 快速构建美观的界面。
- 语言: TypeScript - 类型安全，减少 Bug。
- 部署: Vercel - 零配置自动化部署 + 接口代理。
💻 核心实现细节
1. 解决跨域问题 (Proxy)
基金接口通常不支持直接跨域调用。在开发环境下，我们利用 Vite 的 server.proxy；在生产环境（Vercel）下，我们通过 vercel.json 配置 Rewrite 来解决：
// vercel.json
{
"rewrites": [
{
"source": "/api/fund/:match*",
"destination": "http://fundgz.1234567.com.cn/js/:match*"
}
]
}
2. 响应式布局切换
为了同时适应 PC 和移动端，我们在 FundTable 组件中监听屏幕宽度，动态切换渲染模式：
// 简化代码示例
const isMobile = useMediaQuery({ maxWidth: 768 });
return (
<>
{isMobile ? (
// 移动端：卡片列表
dataSource.map(fund => <FundCard fund={fund} />)
) : (
// PC端：表格
<Table columns={columns} dataSource={dataSource} />
)}
</>
);
3. 隐私脱敏逻辑
通过一个 showSensitive 状态控制显示内容。我们封装了一个简单的工具函数，当隐私模式开启时，将数字替换为 ****：
// 隐私显示辅助函数
const renderSensitive = (value: string | number) => {
if (!showSensitive) return '****';
return value;
};
// 在 UI 中使用
<div>总市值: {renderSensitive(totalMarketValue)}</div>
🚀 快速开始
如果你也想部署一个属于自己的基金助手，非常简单：
-
Clone 项目
git clone https://github.com/Leon200410/Real-time-fund.git -
安装依赖
npm install -
启动开发服务器
npm run dev -
构建部署 可以直接 fork 到你自己的 GitHub，然后连接 Vercel 即可自动部署。
📝 总结
这个项目虽然不大，但涵盖了前端开发的许多典型场景：接口跨域处理、响应式设计、本地持久化存储以及用户体验优化（如隐私模式）。
如果你觉得这个项目对你有帮助，欢迎来 GitHub 点个 Star ⭐️！
🔗 GitHub 地址: github.com/Leon200410/…
