WorthBase（家底）技术架构全解析：一款本地优先的个人财务 App

文章目录WorthBase家底技术架构全解析一款本地优先的个人财务 App为什么做 WorthBase技术选型为什么选 SQLite 而不是 AsyncStorage为什么选 Zustand 而不是 Redux项目架构数据模型核心特性速览开源地址WorthBase家底技术架构全解析一款本地优先的个人财务 App为什么做 WorthBase市面上的个人财务 App 分两类记账类和资产管理类。记账类关注每笔花了多少钱资产管理类关注你有多少钱。我想要的是后者——不记流水只做状态管理。回答三个核心问题我有多少钱— 多账户余额汇总我的东西值多少— 实物资产估值 持有成本净资产趋势如何— 历史折线图 目标预测并且所有数据只存在本地。不联网、不注册、不上云。技术选型层级技术选择理由框架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财务数据有三个特点需要关系型数据库事务导入数据时要么全部成功要么全部回滚关联查询余额快照要按账户 JOIN 查询最新值聚合计算净资产需要 SUM 所有账户余额AsyncStorage 是 KV 存储做这些很痛苦。SQLite 是正确选择。为什么选 Zustand 而不是 Redux项目只有 3 个 storeaccount-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 # 各表的 CRUD7 个 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开源