Actual Budget 侧边栏设计大赛与导航重构从社区投票到源码落地的全流程解析【免费下载链接】actualA local-first personal finance app项目地址: https://gitcode.com/GitHub_Trending/ac/actualActual BudgetActual一款 local-first 的个人财务管理应用在 2026 年夏天发起了一场面向社区开放的「侧边栏sidenav设计大赛」先公开征集设计方案再内部评审出决赛入围作品最后由社区投票决定胜者并把获胜设计真正落地到应用源码中。本文以 投票开启公告 为主线结合 大赛公告 与 获奖公告完整梳理本次大赛的规则、设计约束与投票流程并对照仓库中侧边栏的现有实现与实验性重构代码说明一场社区设计活动是如何一步步变成真实产品功能的。读完本文你将了解 Actual 侧边栏的职责边界、导航项构成、账户列表的设计难点以及新侧边栏在源码中的落地形态。一、背景为什么社区要重做侧边栏侧边栏是 Actual Budget 中使用频率最高的界面区域之一用户打开应用后第一眼看到的就是它日常在预算Budget、报表Reports、计划Schedules和各个账户之间跳转也全靠它。按照大赛公告的说明项目团队认为它该被用心打磨了并且希望由社区来主导方向——于是发起了这场设计大赛。大赛的核心承诺非常明确进入前 10 名的作品作者可以获得免费的 Actual Budget 周边SWAG最终获胜的设计会被真正实现并内置到应用里随版本交付给所有用户。从后续的获奖公告看大赛最终由matt-fidd的设计获胜且官方明确表示会从每一份提交中汲取想法——也就是说投票选出的不仅是单个赢家更是社区整体偏好的导航观感画像。二、大赛流程与设计约束本次大赛并非开放式的自由创作而是在一组明确约束下进行的。根据大赛公告参赛者必须考虑以下设计要点官方强调这些是约束条件而非检查清单约束维度具体要求核心导航能力侧边栏必须承载核心导航预算budget、报表reports、计划schedules、收款人payees、规则rules、设置settings、银行同步bank sync以及账户列表含已关闭账户账户列表的开放性账户数量差异极大有人只有 3 个有人有 30 个预算内on-budget与预算外off-budget账户必须可区分账户余额通常要内联展示银行同步状态也至关重要主题适配必须同时适配浅色、深色以及项目提供的其他颜色主题可访问性键盘导航、焦点状态、合理的颜色对比度AI 使用允许使用 AI 辅助设计从源码结构看这些约束与当前侧边栏的实现是一一对应的详见第三节设计大赛本质上是在为这块高频区域征集在既有职责不丢失前提下的全新视觉与交互方案。三、投票机制与时间线投票开启公告公布了本次大赛的投票阶段安排提交阶段6 月 27 日开放提交7 月 27 日截止。每位参与者可以提交任意多份设计三份完全不同的方向也可以分别提交规范的 Figma 文件欢迎但不强制一份标注清晰的高保真图同样有效。内部短名单评审截止后由维护者评审所有投稿选出最多10 名决赛入围者。社区投票决赛作品以 GitHub issue 形式公示任何人可以通过对心仪的设计添加 表情反应来投票可以同时为多个设计投票。投票窗口持续一周票数最高的设计获胜并进入开发。获奖落地获胜设计会被实现进 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→/budgetReports→/reportsSchedules→/schedulesMore展开项→ 覆盖/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全局偏好控制浮动模式与旧侧边栏保持一致的偏好体系根节点带有rolenavigation与aria-labelSidebar延续了大赛对可访问性的要求。在redesign/目录下还有一批针对账户区的新组件例如AccountsSection.tsx、AccountRow.tsx、ClosedSection.tsx已关闭账户分区、SyncDot.tsx/SyncStatusLine.tsx同步状态指示、SidebarBalance.tsx余额展示等。这一落地进度在仓库的发布说明草稿中也有明确记录add-new-sidebar-shell.md新增实验性的新侧边栏外壳包含重新设计的头部、导航与浅色主题支持作者正是大赛获胜者matt-fiddadd-new-sidebar-account-list.md在新侧边栏中重新设计账户列表加入可折叠的账户分组collapsible account groups、余额、净资产net worth与同步状态指示。这两条发布说明与大赛公告中账户列表开放、余额内联、同步状态关键的约束直接呼应可以推断获胜设计中的账户分组 余额 净资产 同步状态方案正是新侧边栏的核心增量。六、从社区活动到产品功能这场大赛的工程启示回顾整个事件本次侧边栏大赛为我们展示了一条完整的社区驱动产品迭代路径其中每一步都能在仓库中找到可验证的痕迹定义约束而非模板大赛公告只给出职责边界导航项、账户列表、主题、可访问性不限定视觉风格从而保证投稿的多样性公开投票与内部评审结合内部先筛出最多 10 名决赛者再由社区用 反应投票一周兼顾专业判断与用户偏好结果直接进入源码获胜者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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考