Actual Budget 侧边栏设计大赛与导航重构：从社区投票到源码落地的全流程解析

Actual Budget 侧边栏设计大赛与导航重构：从社区投票到源码落地的全流程解析

【免费下载链接】actualA local-first personal finance app项目地址: https://gitcode.com/GitHub_Trending/ac/actual

Actual Budget（Actual，一款 local-first 的个人财务管理应用）在 2026 年夏天发起了一场面向社区开放的「侧边栏（sidenav）设计大赛」：先公开征集设计方案，再内部评审出决赛入围作品，最后由社区投票决定胜者，并把获胜设计真正落地到应用源码中。本文以 投票开启公告 为主线，结合 大赛公告 与 获奖公告，完整梳理本次大赛的规则、设计约束与投票流程，并对照仓库中侧边栏的现有实现与实验性重构代码，说明一场社区设计活动是如何一步步变成真实产品功能的。读完本文，你将了解 Actual 侧边栏的职责边界、导航项构成、账户列表的设计难点，以及新侧边栏在源码中的落地形态。

一、背景：为什么社区要重做侧边栏

侧边栏是 Actual Budget 中使用频率最高的界面区域之一：用户打开应用后第一眼看到的就是它，日常在预算（Budget）、报表（Reports）、计划（Schedules）和各个账户之间跳转也全靠它。按照大赛公告的说明，项目团队认为它"该被用心打磨了"，并且希望由社区来主导方向——于是发起了这场设计大赛。

大赛的核心承诺非常明确：

• 进入前 10 名的作品，作者可以获得免费的 Actual Budget 周边（SWAG）；
• 最终获胜的设计，会被真正实现并内置到应用里，随版本交付给所有用户。

从后续的获奖公告看，大赛最终由matt-fidd的设计获胜，且官方明确表示"会从每一份提交中汲取想法"——也就是说，投票选出的不仅是单个赢家，更是社区整体偏好的"导航观感画像"。

二、大赛流程与设计约束

本次大赛并非开放式的自由创作，而是在一组明确约束下进行的。根据大赛公告，参赛者必须考虑以下设计要点（官方强调这些是"约束条件"而非"检查清单"）：

从源码结构看，这些约束与当前侧边栏的实现是一一对应的（详见第三节），设计大赛本质上是在为这块高频区域征集"在既有职责不丢失前提下的全新视觉与交互方案"。

三、投票机制与时间线

投票开启公告公布了本次大赛的投票阶段安排：

1. 提交阶段：6 月 27 日开放提交，7 月 27 日截止。每位参与者可以提交任意多份设计，三份完全不同的方向也可以分别提交；规范的 Figma 文件欢迎但不强制，一份标注清晰的高保真图同样有效。
2. 内部短名单评审：截止后由维护者评审所有投稿，选出最多10 名决赛入围者。
3. 社区投票：决赛作品以 GitHub issue 形式公示，任何人可以通过对心仪的设计添加 👍 表情反应来投票，可以同时为多个设计投票。投票窗口持续一周，票数最高的设计获胜并进入开发。
4. 获奖落地：获胜设计会被实现进 Actual Budget（相关讨论也可在项目社区频道进行）。

需要说明的是，投票入口、讨论帖与 Discord 频道均为外部链接，本文不展开；在仓库内可验证的事实是：投票公告（2026-08-05-sidenav-voting-open.md）与获奖公告（2026-08-15-sidenav-design-winner.md）之间的时间间隔正好约为一周，与"投票持续一周"的规则吻合；获奖公告还提到，所有参与者都会获得免费周边，并已通过邮件通知细节。

四、现状对照：现有侧边栏的源码实现

要理解"重构"的目标，先看当前侧边栏在仓库中的真实实现。侧边栏组件位于packages/desktop-client/src/components/sidebar/目录，入口是 Sidebar.tsx，其渲染结构为：

SidebarShell ├── BudgetName（预算名称，含浮动切换按钮） ├── PrimaryButtons（主导航） ├── Accounts（账户列表） └── SecondaryButtons（如"添加账户"按钮）

其中 PrimaryButtons.tsx 定义了主导航项，与大赛公告中的"核心导航"要求完全对应：

• Budget→/budget
• Reports→/reports
• Schedules→/schedules
• More（展开项）→ 覆盖/payees、/rules、/bank-sync、/settings、/tools等次级页面

可以看到isActive数组通过location.pathname.startsWith(...)判断当前路由，从而高亮对应导航项——这正是"键盘导航与焦点状态"约束背后的路由驱动机制。

账户列表部分（Accounts.tsx 及 Account.tsx）负责渲染账户树、内联余额与同步状态；而Sidebar.tsx中通过useGlobalPref('floatingSidebar')控制侧边栏是否以"浮动"模式悬浮显示，这对应了"账户列表开放、状态信息内联"的产品诉求。

下面的两张截图分别是浅色与深色主题下当前侧边栏的真实形态，可以看到：导航项（Budget / Reports / Schedules / More）、账户分区（All accounts / On budget / Off budget）与余额、底部的"Add account"入口，均与大赛约束中列出的元素一一对应：

两张截图也直观印证了大赛中"必须适配浅色与深色主题"的约束——同一个侧边栏在两种主题下的内容层级完全一致，仅颜色变量随主题切换。

五、落地：实验性新侧边栏在源码中的形态

大赛获胜后，新侧边栏并不是停留在设计稿里，而是已经以实验性功能的形式出现在仓库中。在packages/desktop-client/src/components/sidebar/下存在一个独立的redesign/目录，其中 SidebarRedesign.tsx 是新侧边栏的骨架：

• 默认宽度为DEFAULT_SIDEBAR_WIDTH = 270；
• 结构为SidebarHeader（头部）→PrimaryNav（主导航）→ 分隔线 →AccountsSection（账户区）→SidebarFooter（底部）；
• 仍通过floatingSidebar全局偏好控制浮动模式，与旧侧边栏保持一致的偏好体系；
• 根节点带有role="navigation"与aria-label="Sidebar"，延续了大赛对可访问性的要求。

在redesign/目录下还有一批针对账户区的新组件，例如AccountsSection.tsx、AccountRow.tsx、ClosedSection.tsx（已关闭账户分区）、SyncDot.tsx/SyncStatusLine.tsx（同步状态指示）、SidebarBalance.tsx（余额展示）等。

这一落地进度在仓库的发布说明草稿中也有明确记录：

• add-new-sidebar-shell.md：新增实验性的新侧边栏外壳，包含重新设计的头部、导航与浅色主题支持（作者正是大赛获胜者matt-fidd）；
• add-new-sidebar-account-list.md：在新侧边栏中重新设计账户列表，加入可折叠的账户分组（collapsible account groups）、余额、净资产（net worth）与同步状态指示。

这两条发布说明与大赛公告中"账户列表开放、余额内联、同步状态关键"的约束直接呼应，可以推断：获胜设计中的"账户分组 + 余额 + 净资产 + 同步状态"方案正是新侧边栏的核心增量。

六、从社区活动到产品功能：这场大赛的工程启示

回顾整个事件，本次侧边栏大赛为我们展示了一条完整的"社区驱动产品迭代"路径，其中每一步都能在仓库中找到可验证的痕迹：

1. 定义约束而非模板：大赛公告只给出职责边界（导航项、账户列表、主题、可访问性），不限定视觉风格，从而保证投稿的多样性；
2. 公开投票与内部评审结合：内部先筛出最多 10 名决赛者，再由社区用 👍 反应投票一周，兼顾专业判断与用户偏好；
3. 结果直接进入源码：获胜者matt-fidd本人参与实现，实验性新侧边栏以redesign/目录形态落地，并进入发布说明草稿，最终随版本交付。

从获奖公告也可以读到官方对过程的坦诚预期：并非所有想法都会被采纳，实现过程中会有取舍与迭代，但每一轮反馈都会让最终交付的侧边栏更接近社区的集体期望——这正是一个由社区构建、为社区而建的开源项目最典型的成长方式。

如果你正在研究 Actual Budget 的界面架构，可以从 packages/desktop-client/src/components/sidebar/ 目录入手：旧侧边栏组件（Sidebar.tsx等）与新实验侧边栏（redesign/子目录）并存，二者的对照阅读可以清晰还原这次设计大赛从"投票"到"代码"的完整链路。

【免费下载链接】actualA local-first personal finance app项目地址: https://gitcode.com/GitHub_Trending/ac/actual