开源记账 App 一个月迭代:从 v1.11 到 v2.2,暗黑模式、标签系统、预算管理全面升级

大家好,我是蜜蜂记账的作者。距离上次分享已经一个月了,这段时间疯狂迭代,发布了 24 个版本,被群友戏称为「日更博主」😂

今天来分享一下这一个月的更新内容和技术实现。

项目简介

蜜蜂记账是一款开源的个人记账 App,核心特点是数据自主可控------支持 iCloud、Supabase、WebDAV、S3 协议等多种云同步方案,数据完全掌握在用户自己手中。

一个月更新亮点

1. 暗黑模式

采用「纯黑背景 + 主题色边框」的设计方案:

  • OLED 友好,省电护眼
  • 所有页面、弹窗、键盘完全适配
  • 跟随系统或手动切换

技术实现

  • 使用 Design Token 系统统一管理颜色
  • BeeTokens.isDark(context) 判断当前模式
  • 动态颜色 getter 自动适配明暗主题

2. 标签系统

比分类更灵活的归类方式:

  • 支持多标签
  • 自定义颜色
  • 标签详情页统计

数据库设计

sql 复制代码
-- 标签表
CREATE TABLE tags (
  id INTEGER PRIMARY KEY,
  name TEXT NOT NULL,
  color TEXT,
  created_at DATETIME
);

-- 交易-标签关联表
CREATE TABLE transaction_tags (
  transaction_id INTEGER,
  tag_id INTEGER,
  PRIMARY KEY (transaction_id, tag_id)
);

3. 预算管理

  • 月度总预算
  • 分类预算
  • 实时进度追踪

4. 周期记账

固定收支自动记账:

dart 复制代码
enum RecurringPeriod {
  daily,   // 每日
  weekly,  // 每周
  monthly, // 每月
  yearly,  // 每年
}

5. iCloud 云同步

iOS 用户零配置即可使用:

  • 使用 CloudKit 原生 API
  • 增量同步,节省流量
  • 多设备自动同步

6. S3 协议支持

新增对 S3 协议的支持:

  • Cloudflare R2(推荐,10GB 免费)
  • AWS S3
  • MinIO(自建)

7. 账户独立改造(v2.0)

这是 2.0 版本最核心的改动:

  • 每个账户独立追踪余额
  • 账户间转账
  • 账户详情页

8. 二级分类

  • 支持父子分类结构
  • 可选平铺或层级模式

架构设计

Repository 模式

采用模块化 Repository 架构,支持无缝切换数据源:

bash 复制代码
lib/data/repositories/
├── base_repository.dart          # 抽象基类
├── local/                        # 本地实现(Drift)
│   ├── local_repository.dart
│   ├── local_ledger_repository.dart
│   └── ...
└── cloud/                        # 云端实现(Supabase)
    ├── cloud_repository.dart
    └── ...

状态管理

使用 Riverpod 进行状态管理:

dart 复制代码
// UI 层使用 Provider
final ledgers = ref.watch(ledgersProvider);

// Provider 内部调用 Repository
final repo = ref.watch(repositoryProvider);
final data = await repo.getAllLedgers();

下载体验

写在最后

一个月 24 个版本,确实有点肝。但开源项目最大的乐趣就是看到用户的反馈和社区的成长。

欢迎体验、提 Issue、贡献代码!

GitHub : github.com/TNT-Likely/...

相关推荐
风叶悠然3 分钟前
vue3中数据的pinia的使用
前端·javascript·数据库
李少兄16 分钟前
CSS clip-path:前端开发中的裁剪技术
前端·css
zhengxianyi51528 分钟前
使用码云gitee登录ruoyi-vue-pro——坑比较多
前端·vue.js·gitee·ruoyi-vue-pro优化·三方登陆
光影少年35 分钟前
React vs Next.js
前端·javascript·react.js
谢尔登37 分钟前
Vue3 响应式系统——ref 和 reactive
前端·javascript·vue.js
OEC小胖胖39 分钟前
16|总复习:把前 15 章串成一张 React 源码主线地图
前端·react.js·前端框架·react·开源库
董世昌4140 分钟前
HTTP协议中,GET和POST有什么区别?分别适用什么场景?
java·开发语言·前端
_OP_CHEN42 分钟前
【前端开发之HTML】(二)HTML 常见标签(上):从入门到实战,搞定网页基础排版!
前端·css·html·前端开发·网页开发·html标签
满栀5851 小时前
插件轮播图制作
开发语言·前端·javascript·jquery
切糕师学AI1 小时前
Vue 中的计算属性(computed)
前端·javascript·vue.js