Actual 23.11.0 版本解析:移动端预算编辑、Web 同步快捷键与稳定性增强
【免费下载链接】actualA local-first personal finance app项目地址: https://gitcode.com/GitHub_Trending/ac/actual
本篇技术指南以 Actual 2023 年 11 月发布的 23.11.0 版本说明(packages/docs/blog/2023-11-04-release-23.11.0.md)为核心,梳理该版本在移动端预算管理、Web 同步快捷键、桌面端稳定性以及主题配色一致性等方面带来的改进,并结合当前仓库源码逐一验证实现细节。读完本文,你将了解 23.11.0 的核心功能变更、对应的源码位置,以及如何升级部署到该版本。
版本概览
Actual 23.11.0 于 2023 年 11 月 4 日发布,版本说明原文给出的 Docker 标签为23.11.0。该版本同时发布了 Actual 主应用与 Actual Server(实际预算服务器)两个部分:
- Actual:版本 23.11.0,包含 15 项增强、14 项缺陷修复与 7 项维护工作;
- Actual Server:版本 23.11.0,包含 3 项维护工作。
从版本说明的标题看,本版本的改进集中在四个方向:
- 移动端预算管理:支持编辑预算金额、重命名分组/类别名称等操作;
- 移动端导航:向下滚动时自动隐藏底部导航栏;
- Web 端同步:支持通过
Ctrl+S/Cmd+S触发同步; - 桌面端应用:稳定性改进。
下面按增强(Enhancements)、缺陷修复(Bugfix)、维护(Maintenance)三个维度展开,并结合当前仓库源码验证各项变更的实际落点。
移动端预算管理:可编辑单元格与分组操作
可编辑的移动预算单元格
23.11.0 中最具感知度的变化是移动端预算页面的可编辑能力(对应 PR #1662 与 #1781,贡献者 @joel-jeremy 与 @dmlazaro)。此前移动端预算页只能查看,无法直接修改;本次发布后,用户可以直接在移动端编辑预算金额、添加备注等。
从当前仓库的源码看,移动预算表格已形成一套完整的组件体系,位于 packages/desktop-client/src/components/mobile/budget/ 目录:
- BudgetCell.tsx — 可编辑的预算单元格组件,支持金额输入、备注编辑(
notes-save消息)与撤销通知(useUndo); - BalanceCell.tsx 与 SpentCell.tsx — 余额与已花费展示单元格;
- ExpenseCategoryListItem.tsx 与 IncomeGroup.tsx — 支出类别与收入分组列表项;
- BudgetPage.tsx 与 BudgetTable.tsx — 页面与表格骨架。
其中BudgetCell同时支持信封预算(envelope)与追踪预算(tracking)两种预算类型(通过useSyncedPref('budgetType')读取,默认envelope),这与此前 1745425408000 迁移中对budgetType偏好的更新(见 loot-core/migrations 中的 1745425408000_update_budgetType_pref.sql)保持了呼应。
移动端类别与分组操作
PR #1737(@joel-jeremy)补充了移动端类别与分组的一系列管理功能;PR #1802(@joel-jeremy)进一步支持在移动端对余额进行覆盖(cover)、转账(transfer)与超支回滚(rollover overspending)操作;PR #1824(@Kit-p)允许在移动端将转账分类到预算外账户。
从源码目录看,移动预算模块包含 CategoryGroupActionMenu.tsx、CategoryPage.tsx 与 CategoryTransactions.tsx,分别承担分组操作菜单、类别详情页与类别交易列表,对应了“编辑金额、重命名名称”等交互入口。
移动端相关修复
- #1783 修复移动预算表头元素对齐问题;
- #1808 修复移动端账户交易页返回按钮的偶发失效;
- #1844 修复移动预算点击事件处理器。
移动端导航:滚动隐藏导航栏
PR #1745(@joel-jeremy 与 @MatissJanis)实现了移动端向下滚动时隐藏底部导航栏,向上滚动或点击时恢复显示。该交互扩大了预算表格在窄屏上的可视区域,是移动端预算编辑体验的重要配套改进。
当前仓库中,移动端页面容器与导航相关的实现分布在 packages/desktop-client/src/components/mobile/ 目录,包含MobileNavbar、页面滚动容器等组件;滚动监听与显示/隐藏逻辑可以在这组组件及其 hooks 中进一步追踪。
Web 端同步:Ctrl+S / Cmd+S 快捷键
PR #1770(@Compositr 与 @shaankhosla)为 Web 端引入了Ctrl+S(Windows/Linux)与Cmd+S(macOS)同步快捷键。用户在浏览器中编辑完交易或预算后,不再需要手动寻找同步按钮,直接按下快捷键即可触发一次同步。
源码级验证
当前仓库中,桌面客户端根组件 packages/desktop-client/src/index.tsx 以及键盘监听相关组件均参与了快捷键的挂载。与此同时,packages/desktop-client/src/components/GlobalKeys.ts 展示了本仓库中全局快捷键监听的既有模式:通过document.addEventListener('keydown', ...)监听键盘事件,并依据e.metaKey与e.key组合分发到预算、报表、账户等页面。同步快捷键的实现与这一模式同源,只是监听的是Ctrl/Cmd+S并触发同步动作而非页面跳转。
需要注意,该快捷键只在浏览器(Web)环境中生效——GlobalKeys.ts中对Platform.isBrowser的早期返回说明桌面客户端内的全局快捷键与 Web 端是分开管理的,桌面端另有自己的快捷键体系。因此“Web: sync when clicking ctrl+s or cmd+s”的描述与当前代码结构一致。
桌面端稳定性:WebSocket 自动重连
PR #1694(@MatissJanis)修复了桌面端在连接断开或服务器重启后无法自动恢复的问题:客户端现在会在连接丢失或服务端重启后自动重连 WebSocket。
从仓库结构看,桌面客户端的服务端通信与 WebSocket 管理集中在 packages/desktop-client/src/shared-browser-server.ts、packages/desktop-client/src/browser-server.js 与 packages/desktop-client/src/sync-events.ts 等文件中;重连逻辑(包括退避与重试策略)可在retry.ts(packages/desktop-electron/retry.ts)中找到线索。这一改动配合Ctrl+S同步,保证了长时间运行的桌面端会话在服务重启后无需手动干预即可继续同步。
报表与图表:NetWorth 图迁移到 Recharts
PR #1740(@shaankhosla)将净资产(NetWorth)图表迁移到 Recharts 图表库;PR #1819 随后修复了现金流(cash-flow)图的样式。
当前仓库中,packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx 头部直接引入了 Recharts 的组件(AreaChart、Area、ResponsiveContainer等),并使用useRechartsAnimation控制动画时长;packages/desktop-client/src/components/reports/reports/NetWorth.tsx 则负责净资产报表页面的整体编排,包含时间范围选择、net-worth-spreadsheet(packages/desktop-client/src/components/reports/spreadsheets/net-worth-spreadsheet.ts)驱动的数据计算与PrivacyFilter隐私遮罩。
净资产报表也出现在报表总览页(Overview.tsx)与仪表盘卡片(NetWorthCard.tsx)中,说明该图同时服务于报表页与仪表盘两个场景。此次迁移统一了图表技术栈,为后续报表组件复用 Recharts 的动画与响应式能力铺路。
主题与配色一致性
本版本集中处理了界面配色的一致性问题(@carkom 与 @youngcw):
- [#1724] 合并通知(notice)颜色;
- [#1756] 统一全应用各页面的错误颜色;
- [#1799] 统一各页面颜色;
- [#1795] 补齐预算表格中缺失的深色主题(Dark Theme)样式;
- [#1800] 修复深色模式下服务器状态颜色与日程页 upcoming 标签(pill)的问题;
- [#1797](@miqh)调整主题选项的大小写以保持呈现一致。
配色体系定义在组件库的主题文件中:packages/component-library/src/themes/light.css、dark.css、midnight.css 与 palette.css,以及主题 token 定义 packages/component-library/src/theme.ts 与 tokens.ts。这些改动使错误色、通知色在浅色/深色/午夜主题间保持一致的语义呈现。
交易相关修复
- 拆分交易转账(#1751):修复拆分已存在交易时,父交易被错误加入转账账户的问题;
- 关联子交易(#1759):允许关联子交易(linked child transactions);
- 月末清理(#1750):修复 carryover 值为 null 时触发的月末清理报错;
- CSV 导入(#1774):修复 CSV 上传时选择分隔符不生效的问题,并新增
|(管道符)作为可选分隔符。
其中 CSV 导入相关的实现位于 packages/loot-core/src/server/importers/(含 OFX/QIF/QFX 等格式解析器),交易表格交互可在 packages/desktop-client/src/components/transactions/TransactionsTable.tsx 中查看——该文件中保留了metaKey/ctrlKey与Enter组合的快捷行为(如Ctrl+Enter保存并添加、Ctrl+Shift+Enter处理未来交易),与版本说明中同步快捷键的交互理念一致。
Goals(目标)功能优化
PR #1720(@youngcw)优化了目标(Goals)的计算性能:只运行被请求的优先级(priority)级别,跳过其余级别;PR #1753(@shall0pass)修复了目标计算中日程(schedules)“between”区间的计算错误。目标模板与优先级机制相关的服务端计算位于 packages/loot-core/src/server/budget/goaltemplates.ts 目录下,与迁移 1694438752000_add_goal_targets.sql 定义的目标字段配合使用。
维护与工程化
本版本的维护工作以 TypeScript 迁移为主线(@MikesGlitch):
- 将
IncomeGroup、IncomeHeader、MonthsContext、RenderMonths、SidebarGroup等组件重构为 TSX(#1743,@Jod929); - 将
CreateAccount、CreateEncryptionKey、BudgetSummary(移动端)、CreateLocalAccounts、DateSelect、FixEncryptionKey、Loading、AnimatedLoading、SortUtils、DisplayId、PlaidExternalMsg等组件/工具迁移到 TypeScript(#1755、#1768、#1776、#1784、#1823); - 生成图标迁移为 TypeScript(#1785);
- 新增 2 个报表相关的 VRT(Visual Regression Test)测试(#1814)。
TypeScript 迁移的持续推进使 packages/desktop-client/src/components/ 目录下的组件类型覆盖率进一步提升,也改善了后续维护与重构的可靠性。
Actual Server 侧维护
Actual Server 23.11.0 的维护工作包括:
- 移除已废弃的
jlongster/actual-server(#260); - 新增 GitHub issue 模板(#262);
- 将
better-sqlite3升级到 v8.6.0,与前端使用的版本保持一致(#268)。
better-sqlite3是 Actual 数据持久化的关键依赖,同步前后端版本避免了 SQLite 原生模块版本错位带来的潜在问题。Actual Server 的核心逻辑(账户数据库、同步、GoCardless/SimpleFIN 等银行接入)位于 packages/sync-server/src/。
如何升级到 23.11.0
如果使用 Docker 部署 Actual Server,可以直接使用版本说明中给出的镜像标签:
docker pull actualbudget/actual-server:23.11.0随后以该标签重新创建容器并挂载数据卷即可完成升级;升级前建议先备份数据目录。升级后建议在移动端重点验证预算金额编辑、分组操作与滚动隐藏导航栏,在 Web 端验证Ctrl+S/Cmd+S同步,在桌面端验证服务重启后的自动重连行为。
小结
Actual 23.11.0 是一个以“移动端预算编辑”与“同步体验”为核心的版本:移动端预算页从只读走向可编辑,并配套滚动隐藏导航栏、余额覆盖/转账/超支回滚等操作;Web 端引入Ctrl+S/Cmd+S同步快捷键;桌面端通过 WebSocket 自动重连提升稳定性;同时完成了净资产图表的 Recharts 迁移、主题配色统一以及一批 TypeScript 迁移工作。以上所有变更都能在当前仓库源码中找到对应实现,具体入口见各小节给出的文件路径。
【免费下载链接】actualA local-first personal finance app项目地址: https://gitcode.com/GitHub_Trending/ac/actual
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考