ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Actual Budget 26.2.0 版本全解析:多仪表盘页面、自定义主题与预算分析报表实战指南

Actual Budget 26.2.0 版本全解析:多仪表盘页面、自定义主题与预算分析报表实战指南 Actual Budget 26.2.0 版本全解析多仪表盘页面、自定义主题与预算分析报表实战指南【免费下载链接】actualA local-first personal finance app项目地址: https://gitcode.com/GitHub_Trending/ac/actual本篇文章围绕 Actual本地优先的个人财务管理应用的 26.2.0 版本发布内容展开系统讲解该版本带来的三大核心能力支持多仪表盘Dashboard页面的报表模块、实验性的自定义主题Custom Themes功能、以及实验性的预算分析Budget Analysis报表同时覆盖该版本在报表、主题、移动端与数据导入等方面的增强与修复。读者读完可以掌握新版本的升级要点、各新功能的使用方式与配置细节并能结合仓库源码理解其底层实现。版本概览Actual 26.2.0Docker Tag26.2.0Versionv26.2.0于 2026-02-02 发布。根据 发布公告本版本包含以下值得关注的改进允许创建多个仪表盘页面Multiple dashboard pagesReports 页面的核心交互升级可在不同页面间切换并为每个页面配置不同的组件布局。实验性功能自定义主题Custom themes可安装社区主题或自行定义 CSS 变量覆盖默认主题颜色详细文档见 custom-themes.md。实验性功能预算分析报表Budget analysis report跟踪预算分类余额随时间变化的报表详细文档见 budget-analysis-report.md。其余变更涵盖多个方向的增强与 Bug 修复详见下文。多仪表盘页面Reports 模块的布局管理升级功能背景与使用方式26.2.0 之前的 Reports 页面只有一个固定的仪表盘。本版本引入了多个标签页/页面的概念PR #6411每个页面可以承载不同的组件widget布局例如你可以为日常监控和年终复盘分别建立独立页面。使用方式进入Reports页面在页面头部使用仪表盘选择器DashboardSelector在多个页面间切换。点击Add new widget按钮从菜单中添加各种组件卡片如现金流图、净资产图、交叉点、Age of Money、消费分析、预算分析、余额预测、Monte Carlo 分析、文本组件、摘要卡片、日历卡片、公式卡片、Sankey 卡片以及自定义报表等。点击Edit dashboard进入编辑模式可拖拽、缩放组件并调整布局完成后点击Finish editing dashboard保存。通过右上角菜单⋯可以对当前页面执行Reset to default重置为默认、Import导入、Export导出与Delete dashboard删除页面。上述交互可以在 Overview.tsx 中看到完整实现其中导出功能会将页面组件序列化为dashboard.jsonJSON 格式含version字段导入时支持 JSON 解析与校验错误提示。数据模型与迁移实现多页面功能在数据层通过两张表承载见 迁移脚本新建dashboard_pages表字段为id TEXT PRIMARY KEY、name TEXT、tombstone INTEGER DEFAULT 0在原有dashboard组件表上新增列dashboard_page_id TEXT迁移时自动创建一个名为Main的默认页面并把已有组件全部归属到该页面保证老用户升级后布局不丢失。对应的类型定义位于 dashboard.ts其中DashboardPageEntity由id、name、tombstone组成每个组件widget通过dashboard_page_id关联到某个页面并携带x、y、width、height等布局信息。服务端逻辑在 dashboard/app.ts 中例如createDashboardPage新建页面INSERT INTO dashboard_pagesdeleteDashboardPage删除页面前会校验——不允许删除最后一个页面SELECT count(*) ... WHERE tombstone 0后判断 1抛错删除时将该页面下所有组件一并 tombstonerenameDashboardPage重命名页面updateDashboard/updateDashboardWidget批量或单个更新组件布局与元数据。组件的最小宽高也有约定见 Overview.tsx自定义报表/文本/公式卡片最小高为 1 格Sankey 卡片最小高为 3 格公式卡片最小宽为 1 格自定义报表与文本卡片最小宽为 2 格其余组件最小宽为 3 格。桌面端使用 12 列栅格rowHeight: 100移动端则自动退化为单列纵向排列。实验性功能自定义主题Custom Themes自定义主题允许你通过安装社区主题或自行编写 CSS 变量来个性化 Actual 的外观。它是 26.2.0 引入的实验性功能PR #6612需要先在设置 → 高级设置 → 实验性功能中开启customThemesFeature Flag见 prefs.ts。实验性功能仍在积极开发中启用前强烈建议做好定期备份参见 experimental/index.md。从主题目录安装最简单的安装方式是从主题目录catalog选择进入设置 → 主题Settings → Themes在主题下拉框中选择Custom theme主题安装器会打开并展示目录中的可用主题点击任意主题即可立即安装。目录中的主题托管在 GitHub 上选择时会异步拉取26.2.0 中改为异步获取目录见 PR #6681。每个主题会展示一个颜色调色板预览6 种颜色组成的 3x2 网格取代早期版本的截图预览PR #6722并附带指向其源仓库的链接。直接粘贴 CSS 安装也可以不经过目录直接粘贴自定义 CSS进入设置 → 主题 → Custom theme滚动到 or paste CSS directly 区域将主题 CSS 粘贴到文本区域点击Apply。CSS 会先经过校验再安装若存在错误错误信息会显示在文本框下方。26.2.0 还修复了自定义 CSS 文本区域只能垂直调整大小的问题PR #6695并支持在设置中保存用户粘贴的 CSS 覆盖customCssOverride见 prefs.ts。主题格式与校验规则自定义主题必须以:root选择器 CSS 自定义属性变量的形式书写:root { --color-pageBackground: #1a1a1a; --color-pageText: #ffffff; --color-buttonPrimaryBackground: #007bff; /* ... 更多变量 ... */ }重要要求CSS 必须恰好包含一个:root { ... }除此之外不能有其它内容只允许以--开头的自定义属性Actual 使用--color-*系列变量进行主题化值可以是字面量颜色、长度等也可以是var(--custom-property-name)形式的变量引用用于复用已有主题变量不支持var(--name, value)这类带回退值的形式不允许出现其它选择器、at-rulesimport、media、keyframes等或嵌套块允许注释校验时会自动剔除。使用变量引用的示例:root { --color-pageBackground: #1a1a1a; --color-pageText: #ffffff; /* 复用另一个变量 */ --color-buttonPrimaryBackground: var(--color-pageTextLink); }完整校验规则安装或粘贴时都会执行必须恰好包含:root { ... }只允许--开头的自定义属性值只能为字面量或var(--name)不支持回退值不允许 at-rules不允许嵌套选择器或嵌套块:root块之外不允许任何内容。常用 CSS 变量速查自定义主题可以覆盖 Actual 内置主题light / dark / midnight中定义的任何 CSS 变量对应源码见light.tsdark.tsmidnight.ts常用变量分类如下页面颜色--color-pageBackground— 主页面背景--color-pageText— 主要文字颜色--color-pageTextSubdued— 次要/弱化文字--color-pageTextPositive— 正向/操作类文字--color-pageTextLink— 链接文字颜色表格颜色--color-tableBackground— 表格背景--color-tableText— 表格文字--color-tableBorder— 表格边框--color-tableRowBackgroundHover— 行悬停背景按钮颜色--color-buttonPrimaryBackground— 主按钮背景--color-buttonPrimaryText— 主按钮文字--color-buttonNormalBackground— 普通按钮背景--color-buttonNormalText— 普通按钮文字侧边栏颜色--color-sidebarBackground— 侧边栏背景--color-sidebarItemText— 侧边栏条目文字--color-sidebarItemTextSelected— 选中条目文字图表系列色影响所有自定义报表系列的配色柱状、折线、环形等--color-chartQual1~--color-chartQual926.2.0 还补充了若干与主题相关的变量与一致性改进新增sidebarBudgetName变量PR #6665、新增toBudgetPositive/toBudgetZero/toBudgetNegative三个预算页颜色变量PR #6754、统一了报表页PR #6672与预算页PR #6747的颜色使用并提升了预算页数字颜色的可读性与一致性PR #6764。完整变量清单可查阅上述三个内置主题源文件或参考一个现有主题。发布你的自定义主题若想让自己的主题进入官方目录需要理解 Actual 的主题托管机制在 GitHub 上新建一个仓库在仓库根目录main分支创建名为actual.css的文件将主题 CSS 写入该文件。示例仓库结构your-theme-repo/ └── actual.css # 你的主题 CSS示例actual.css:root { --color-pageBackground: #0d1117; --color-pageText: #c9d1d9; --color-pageTextSubdued: #8b949e; --color-buttonPrimaryBackground: #238636; --color-buttonPrimaryText: #ffffff; /* 添加你想自定义的所有其它变量 */ }之后主题就可以用owner/repo格式例如actualbudget/demo-theme在目录中被引用。目录数据维护在 customThemeCatalog.json每个条目包含name主题名称repoGitHub 仓库owner/repo格式colors6 个十六进制颜色值组成的数组用于调色板预览例如[#1a1a2e, #16213e, #0f3460, #e94560, #533483, #f1f1f1]mode主题模式如light26.2.0 发布时目录已收录多个社区主题包括 Demo Theme、Shades of Coffee、Miami Beach以及本版本新增的Black GoldPR #6688、Simple Dark 与 Okabe ItoPR #6696、1970 风格浅色主题PR #6730、灰色系浅色主题PR #6739等。主题开发建议从基础主题开始复制内置主题light、dark 或 midnight的 CSS 变量再修改想改的颜色增量测试做小改动并在应用内查看效果善用粘贴 CSS开发阶段用粘贴功能快速验证无需先托管到 GitHub检查变量名变量名必须与主题 key 完全一致区分大小写以--color-开头考虑可访问性确保文字与背景对比度足够。加入官方目录的流程按上述结构托管主题 → 在 Actual 仓库提交 issue 或 PR 申请加入目录 → 提供owner/repo格式的仓库名 → 提供 6 个代表色十六进制数组用于调色板预览。实验性功能预算分析报表Budget Analysis Report预算分析报表是一个财务规划工具用于跟踪预算分类余额随时间的变化PR #6137。它是实验性功能budgetAnalysisReportFeature Flag见 prefs.ts同样需要在设置 → 高级设置 → 实验性功能中启用启用后即可在 Reports 页面通过Add new widget → Budget analysis添加对应组件见 Overview.tsx 中budget-analysis-card的注册逻辑。报表内容它追踪四条独立的序列Budgeted预算额Spent实际支出Overspending Adjustment超支调整Balance累计余额报表数据直接取自预算页面因此只包含预算分类不含转账与预算外账户同时报表反映你的过滤视图——如果排除分类或修改日期范围报表会同步更新。分类结转规则对负数余额的影响分类的结转rollover设置会显著影响余额的计算若某分类启用了Rollover overspending超支结转负数余额会延续到后续月份若未启用该分类的负数余额会被清零并记录为Overspending Adjustment汇总后作为独立序列展示。显示选项Live / Static切换滚动窗口自动更新或固定日期范围Start / End选择起始与结束月份快捷范围1、3、6 个月、1 年、年初至今Year-to-date、去年年初至今Previous year-to-date、全部时间All time过滤器通过 Filter 按钮 → 选择Category来包含/排除分类生效的过滤器会以可编辑的标签chip形式展示图形类型通过头部图标在折线图Line与柱状图Bar之间切换显示/隐藏余额切换累计余额序列的显示。从类型定义dashboard.ts可以确认budget-analysis-card组件支持timeFrame时间范围、intervalDaily/Weekly/Monthly/Yearly、graphTypeLine/Bar、showBalance、balanceOnly、showHiddenCategories等元数据配置并且可以配合规则条件conditions/conditionsOp进一步筛选数据。快速排障没有数据检查所选月份中是否存在预算与交易并确认过滤器没有把数据全部排除余额看起来不对检查分类的结转设置与交易归类是否正确。版本其它亮点增强与修复一览值得关注的增强API 支持会话令牌认证PR #6540为 API 初始化增加 session token 认证选项提升认证灵活性。净资产卡片堆叠折线图PR #6603净资产卡片新增堆叠折线图选项对应NetWorthWidget.mode?: trend | stacked见 dashboard.ts。交叉点报表增强PR #6373、#6589、#6639可调整目标收入、新增投影类型projectionType?: hampel | median | mean、指定预期贡献额expectedContribution月度金额与费用调整系数expenseAdjustmentFactor等。交易备注查找与替换PR #6282支持正则表达式的查找替换模式。导入预览按解析后的日期降序排序PR #6543。平均目标模板增强PR #6711允许按百分比或固定金额调整预算额。分类计划指示器PR #6559尊重未来天数upcoming days length设置。货币支持扩充PR #6500新增捷克克朗CZK与匈牙利福林HUF。EXCEL 函数补充PR #6645新增 FIXED 函数。服务端偏好设置PR #6234提升用户设置跨设备的同步一致性。移动端交易列表性能优化PR #6755与移动端通知堆叠式 UX 改进PR #6551。时钟偏移友好报错PR #6789为时钟偏移问题增加用户友好错误提示。隐私脱敏兼容货币符号PR #6438、标签颜色选择器加入浅色PR #6448、公式卡片格式化优化PR #6493、表格统一样式PR #6697。关键修复预算列数字截断问题折叠下拉箭头PR #6459分类组重命名为已有名称被阻止PR #6499拆分交易取消拆分时不丢失父交易信息金额、备注等PR #6501跟踪预算类型下预算页加载崩溃PR #6538补足模板refill处理负数结转的问题PR #6566更改备注过滤器为 one of / not one of 时的崩溃PR #6567隐藏小数偏好下自动小数位行为PR #6572快捷键 E 设置为选中交易设定日期并与文档对齐PR #6573iOS 编辑预算金额时键盘突然隐藏PR #6583计划模板分类预算不足的回归PR #6610净资产计算中净支付/存款不准确PR #6675相同名称分类在报表中的渲染PR #6733报表拖拽排序PR #6763与交叉点报表缩放 bugPR #6821启用实验性货币支持时的对账问题PR #6824预算分析图表的余额折线与数据点可读性优化PR #6791桌面端日期选择器键盘导航PR #6808移动端报表页显示底部导航栏PR #6803。工程维护节选迁移 Inter 字体到fontsource-variable/interPR #6436移除 ESLint、全面迁移到 oxlint并启用新的导入排序规则PR #6584、#6560、#6636 等react-router 从 7.9.6 升级到 7.12.0PR #6608Electron 版本升级PR #6703组件库接入 Storybook 文档PR #6770GitHub Pages 部署迁移至 NetlifyPR #6822。升级与相关资源Docker 标签26.2.0发布版本号为v26.2.0版本发布说明2026-02-02-release-26-2-0.md自定义主题文档custom-themes.md预算分析报表文档budget-analysis-report.md实验性功能总览experimental/index.md主题目录数据customThemeCatalog.json。多仪表盘页面、自定义主题与预算分析报表构成了 26.2.0 的三大主题前者把 Reports 从单一仪表盘升级为可多页面管理的布局系统后两者则延续 Actual 以实验性功能快速迭代、社区共创的风格。升级到 v26.2.0 后建议先备份数据再开启实验性功能然后按本文步骤依次体验这三项能力。【免费下载链接】actualA local-first personal finance app项目地址: https://gitcode.com/GitHub_Trending/ac/actual创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表