企业官网建设流程全解析

基估宝是一款基于 Next.js 的基金实时估值工具，支持基金估值、持仓收益、交易记录与定投管理。它的默认数据保存在浏览器本地，本教程将带你一步步完成Supabase 云端同步配置，实现电脑与手机等多设备之间的自选基金、持仓、交易记录自动同步，彻底解决换设备数据丢失的痛点。

为什么基金数据需要云端同步？

基估宝采用「本地优先」的设计：你的基金列表、持仓份额、成本价、交易记录、定投计划、标签等全部存储在浏览器localStorage中（结构详见 doc/localStorage 数据结构.md）。

这带来一个常见问题：

• 📱换设备数据不跟随：手机添加的基金，电脑上看不到
• 🔄重装系统数据丢失：清缓存、换浏览器即清零
• 🆗无法安全备份：只能手动导出 JSON 文件

开启云端同步后，以上问题全部解决。登录同一账号，数据自动在多设备间保持一致。

云端同步三步配置指南

整个流程分三步：配置环境变量 → 初始化数据库 → 登录账号。下面逐一说明。

第一步：配置 Supabase 项目与环境变量

1. 注册并新建一个免费的 Supabase 项目；
2. 克隆项目到本地（仓库地址：https://gitcode.com/gh_mirrors/re/real-time-fund）；
3. 复制环境变量模板并填入你的项目信息：

cp env.example .env.local

只需填写两个核心变量（参考 env.example）：

这两个值会被 app/lib/supabase.js 读取并创建客户端；若未配置，应用会优雅降级为纯本地模式，登录与同步功能自动关闭，不影响正常使用。

第二步：执行 SQL 初始化数据库

云端同步依赖一张user_configs表，脚本已内置在 doc/supabase.sql 中。

执行步骤：

1. Supabase 控制台 →SQL Editor→New query
2. 复制 doc/supabase.sql 全部内容，粘贴后点击Run

该脚本会自动完成：

• ✅ 创建user_configs表（每人一条记录，data字段存储全量配置）
• ✅ 启用行级安全（RLS），保证用户只能读写自己的数据
• ✅ 创建全量/增量更新函数（update_user_config_full/update_user_config_partial）
• ✅ 开启 Realtime 变更监听

第三步：邮箱验证码登录，开启同步

登录功能由 app/components/LoginModal.jsx 实现，流程非常简单：

1. 点击页面右上角的头像图标→登录
2. 输入你的邮箱，点击「发送邮箱验证码」
3. 查收邮件，输入 6 位验证码，完成注册/登录

💡 首次登录时，系统会检测云端配置：若云端已有数据且与本地不一致，会弹出冲突提示框（app/components/CloudConfigModal.jsx），让你选择「保留本地覆盖云端」或「使用云端覆盖本地」；若云端为空，则询问是否将本地配置同步到云端。

登录成功后，用户菜单中会显示「同步于 MM-DD HH:mm」的时间戳，并支持一键手动同步（见 app/components/UserMenu.jsx）。

哪些数据会被同步到云端？

同步管理器（app/hooks/useSyncManager.js）会收集以下全部数据：

• 📊基金列表：代码、名称、净值、估值、添加时间
• ⭐自选基金与分组管理
• 💰持仓数据：份额、成本价（含分组持仓）
• 📝交易记录与待成交交易
• 🔁定投计划（日/周/双周/月周期）
• 🏷️标签、刷新频率等个性化设置
• 📅每日收益数据（用于收益日历）

多设备同步是如何工作的？

这是基估宝云端同步最有价值的部分，核心机制有三层：

1. 自动增量同步：任何数据修改（加基金、改持仓、记交易）都会标记为「脏数据」，2 秒防抖后仅将变化的字段上传云端，失败自动重试并回退全量同步；
2. 新设备拉取合并：在新设备上登录后，云端配置自动拉取并合并到本地；
3. 设备冲突保护：系统为每台设备生成唯一 ID（rtfDeviceId），当同一账号在多台设备同时写入时，会拦截并弹窗提示「账号已在其他设备登录」，由你确认用云端最新数据覆盖本地，避免互相覆盖造成数据丢失。

这种设计让你日常使用几乎「无感」：只管操作，同步自动完成。

可选项：进阶配置

• 邮箱验证码自定义：在 Supabase → Authentication → Email Templates 中修改邮件模板，用{{ .Token }}展示验证码；关闭Confirm email后无需再点确认链接（详见 README.md 的 Supabase 配置说明）
• GitHub 一键登录：设置NEXT_PUBLIC_IS_GITHUB_LOGIN=true并配置 OAuth 后，登录弹窗将出现 GitHub 登录按钮
• 关联板块数据：向fund_related、fund_secid表导入 doc/fund_tracking_targets.csv 与 doc/related_sector_secid.csv，基金卡片即可展示关联板块实时涨跌
• 云端函数：部署 doc/edgeFunction/analyze-fund.ts 可解锁 OCR 截图识别导入基金功能

常见问题

Q：不登录会影响实时估值吗？不会。估值、重仓股、行情等功能完全离线可用，登录只影响数据同步。

Q：同步数据安全吗？user_configs表启用了 Supabase 行级安全策略，auth.uid() = user_id确保你的数据只有你自己能访问。

Q：只想备份不想多设备用？可以。登录一次后数据即持续自动备份到云端，随时可导出。

总结

整套配置不到 5 分钟，换来的是基金数据在电脑、手机间的无缝流转。现在打开基估宝，点击右上角头像登录，开启你的多设备同步之旅吧！ 🚀