news 2026/7/20 17:09:31

WorthBase(家底)技术架构全解析:一款本地优先的个人财务 App

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
WorthBase(家底)技术架构全解析:一款本地优先的个人财务 App

文章目录

  • WorthBase(家底)技术架构全解析:一款本地优先的个人财务 App
    • 为什么做 WorthBase
    • 技术选型
      • 为什么选 SQLite 而不是 AsyncStorage?
      • 为什么选 Zustand 而不是 Redux?
    • 项目架构
    • 数据模型
    • 核心特性速览
    • 开源地址

WorthBase(家底)技术架构全解析:一款本地优先的个人财务 App

为什么做 WorthBase

市面上的个人财务 App 分两类:记账类和资产管理类。记账类关注"每笔花了多少钱",资产管理类关注"你有多少钱"。

我想要的是后者——不记流水,只做状态管理。回答三个核心问题:

  1. 我有多少钱— 多账户余额汇总
  2. 我的东西值多少— 实物资产估值 + 持有成本
  3. 净资产趋势如何— 历史折线图 + 目标预测

并且,所有数据只存在本地。不联网、不注册、不上云。

技术选型

层级技术选择理由
框架Expo SDK 55开发体验好,EAS 构建便捷
UIreact-native-paper (MD3)Material Design 3 开箱即用
图表react-native-svg自绘 SVG 图表,完全控制渲染
手势react-native-gesture-handler图表缩放/拖拽需要精确手势控制
状态Zustand轻量、简洁,适合中小项目
存储expo-sqlite本地 SQLite,支持事务和复杂查询
路由Expo Router文件系统路由,Tab 导航
图标lucide-react-native统一图标库,支持主题色

为什么选 SQLite 而不是 AsyncStorage?

财务数据有三个特点需要关系型数据库:

  1. 事务:导入数据时,要么全部成功,要么全部回滚
  2. 关联查询:余额快照要按账户 JOIN 查询最新值
  3. 聚合计算:净资产需要 SUM 所有账户余额

AsyncStorage 是 KV 存储,做这些很痛苦。SQLite 是正确选择。

为什么选 Zustand 而不是 Redux?

项目只有 3 个 store(account-store、asset-store、settings-store),每个 store 管理一个领域的数据。Zustand 的 API 极简——没有 action、reducer、middleware 的概念,直接setState。对 75 个文件的项目来说,Redux 太重了。

项目架构

app/ # Expo Router 页面(4 个 Tab + 设置) ├── _layout.tsx # 根布局:DB 初始化、自动备份、应用锁 ├── index.tsx # 总览 Dashboard:净资产、趋势图、持有成本 ├── accounts.tsx # 账户列表:余额管理、快照更新 ├── assets.tsx # 资产列表:实物资产 CRUD └── settings.tsx # 设置:主题、导出/导入、应用锁 src/ ├── engine/ # 纯计算逻辑(无 UI 依赖,可单测) │ ├── HoldingCostCalculator.ts # 持有成本编排器 │ ├── NetWorthCalculator.ts # 净资产 = 余额 + 估值 │ ├── ProjectionCalculator.ts # 线性回归预测目标达成日 │ ├── SettlementCalculator.ts # 卖出结算 │ ├── MaintenanceCalculator.ts # 维护费用分摊 │ ├── RecurringExpenseCalculator.ts # 经常性支出 │ ├── AmortizationRecommender.ts # 按资产分类推荐分摊方式 │ └── strategies/ # 4 种分摊策略(Strategy 模式) │ ├── db/ # 数据层(SQLite + Repository 模式) │ ├── schema.ts # 7 张表的 CREATE TABLE + 索引 │ ├── client.ts # SQLite 连接管理 │ ├── migrations.ts # 数据库迁移 │ └── *-repository.ts # 各表的 CRUD(7 个 Repository) │ ├── stores/ # Zustand 状态管理 │ ├── account-store.ts # 账户数据 + 余额更新 │ ├── asset-store.ts # 资产数据 + CRUD │ └── settings-store.ts # 用户设置 │ ├── services/ # 业务服务 │ ├── backup-service.ts # SQLite 文件级自动备份 │ ├── export-service.ts # JSON/CSV 导出 │ ├── import-service.ts # JSON 导入(ID 重映射 + 事务) │ └── auth-service.ts # 应用锁 │ ├── components/ # UI 组件 │ ├── ui/ # 基础组件(Button, Card, Chip, TextInput...) │ ├── InteractiveTrendChart.tsx # 趋势图(540 行,最复杂组件) │ ├── HoldingCostBreakdown.tsx # 持有成本明细 │ └── ... │ ├── theme/ # 主题系统 │ ├── colors.ts # 颜色定义 │ ├── tokens.ts # 间距、圆角、阴影 token │ ├── typography.ts # 字体定义 │ └── ThemeProvider.tsx # 主题上下文 + 暗色模式 │ └── types/ # TypeScript 类型 ├── enums.ts # 枚举(账户类型、资产分类、分摊方式等) └── models.ts # 数据模型接口

代码统计:75 个源文件,11,669 行代码,2,800+ 行测试。

数据模型

7 张表,覆盖完整的财务数据管理:

accounts ─────────────── 账户(8 种类型) └── balance_snapshots ── 余额快照(每次更新追加,不修改) assets ───────────────── 实物资产(8 种分类,4 种分摊方式) ├── recurring_expenses ─ 经常性支出(保险、停车费等) ├── maintenance_records─ 一次性维护(维修、保养) └── valuation_history ── 估值历史(可选开启追踪) settings ──────────────── 应用设置(KV 存储)

核心特性速览

特性实现方式相关文章
4 种持有成本分摊Strategy 模式 + 智能推荐持有成本深度解析
净资产趋势图SVG 自绘 + 手势缩放/拖拽 + 降采样趋势可视化深度解析
本地数据备份AppState 监听 + SQLite 文件复制本地优先架构
资产生命周期状态机(active → retired/sold)资产生命周期管理
多账户管理8 种类型 + 快照机制 + 负债支持多账户余额管理
主题系统Token 驱动 + 暗色模式设计系统

开源地址

🔗GitHub: github.com/callmebg/worthbase

如果觉得架构设计有参考价值,给个 Star。欢迎提 Issue 和 PR。


CSDN 标签:React NativeExpo架构设计开源移动开发
掘金话题:前端架构React Native开源

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/20 17:08:26

docker compose端口暴露才能外界访问(https为例子)

由于客户端升级了谷歌相关的sdk,要求请求都必须是https, 我其实ktor中已经监听了https的端口,却测试不行,最后发现:必须docker compose中声明下端口才行。

作者头像 李华
网站建设 2026/7/20 17:05:43

Drain3性能优化实践:内存控制与LRU缓存策略深度调优

Drain3性能优化实践:内存控制与LRU缓存策略深度调优 【免费下载链接】Drain3 A robust streaming log template miner based on the Drain algorithm 项目地址: https://gitcode.com/gh_mirrors/dr/Drain3 Drain3作为一个强大的流式日志模板挖掘工具&#xf…

作者头像 李华
网站建设 2026/7/20 17:05:40

Powerlevel10k:让你的终端从黑白到彩虹的魔法配置指南

Powerlevel10k:让你的终端从黑白到彩虹的魔法配置指南 【免费下载链接】powerlevel10k A Zsh theme 项目地址: https://gitcode.com/GitHub_Trending/po/powerlevel10k 还记得第一次打开终端时的感受吗?灰白的背景,单调的提示符&#…

作者头像 李华
网站建设 2026/7/20 17:05:16

MCSManager完整指南:5分钟快速搭建专业游戏服务器集群

MCSManager完整指南:5分钟快速搭建专业游戏服务器集群 【免费下载链接】MCSManager Quick deployment, distributed, multi-user, modern management panel for Minecraft and Steam game servers / 快速安装,分布式架构,多用户销售&#xff…

作者头像 李华
网站建设 2026/7/20 17:04:32

计算机毕业设计之新能源汽车电池回收处理平台设计与实现

该平台致力于解决新能源汽车废旧电池处理难题,通过科学、高效的回收处理方式,实现电池资源的最大化利用和环境保护的双重目标。该平台通过构建完善的回收网络,实现废旧电池的快速收集与转运。同时,采用先进的拆解技术和环保处理工…

作者头像 李华
网站建设 2026/7/20 17:01:15

Node.js 极简安装指南(Mac / Windows / Linux 通用,含国内镜像)

Node.js 极简安装指南(Mac / Windows / Linux 通用,含国内镜像) 新手别再直接下官网安装包了。用 nvm 管 Node 版本,一行命令切换,配合国内镜像,10 分钟搞定且不污染系统。本文覆盖三大平台,照着做即可。 1、一句话介绍 nvm / node / npm 是什么 node:JavaScript 在浏览…

作者头像 李华