年初预算靠拍脑袋，年中超了才知道？我用飞算 JavaAI 做了个预算编制与成本中心系统

一、痛点切入

我不知道你们的公司怎么做预算，反正我们之前是这样的——

每年十月，财务群发一封邮件："各部门请提交明年预算"。然后各部门负责人打开去年那张 Excel，把数字改一改就发回去了。你问为什么是这个数？"跟去年差不多，稍微涨了点"——这就是公式。

这还不是最要命的。更要命的是：年中根本不知道花超了没有。

六月份财务总监开会问 "市场部预算还剩多少"，市场总监说 "应该够吧"，财务说 "我看一下 Excel——好像超了"。全场沉默。

我当时就在那个会上。散会后我跟财务总监聊了一下，发现其实问题不复杂：

1. 预算编制靠 Excel 传来传去，版本管理全靠文件名后缀（v3_最终_不改了.xlsx）
2. 各成本中心的实际支出和预算完全脱钩，没人做实时对账
3. 滚动预测？不存在的。年中想调整预算只能拍第二次脑袋
4. 差异分析靠手工做，能做出三月份的数据已经算高效了

说白了，缺一个能实时看到各成本中心「预算、已用、预测、差异」四数联动的东西。

我想了两天，决定用飞算 JavaAI 自己搭一个。

二、成品先看：预算编制与成本中心管控台

先亮成品，再说过程。

预算总览工作台

登录进来第一眼是预算总览。顶部四个核心指标：年度总预算、已执行金额、滚动预测、待审草稿数。下方左侧是月度预算执行趋势图（预算线 vs 实际线 vs 预测线），右侧是实时预警列表——谁家的执行率超标了、谁的预算调整申请三天还没批，一目了然。底部是各成本中心预算编制草稿的状态列表。

成本中心树（独有组件）

这是这套系统的核心差异化组件。左侧是完整的组织架构树（集团 → 事业部 → 部门 → 科室，四个层级），点击任一节点，右侧立刻展示该中心的详细预算面板。

右侧面板顶部是「四数联动」卡片：预算、已用、预测、差异。四个数字联动展示，差异用红涨绿跌的中国股市惯例显示。中间是预算燃尽进度环——圈内百分比表示执行率，环的颜色随阈值变化（绿色 < 50%、琥珀色 50%-70%、红色 > 70%）。底部是月度执行趋势图。

编制草稿管理

所有预算编制草稿集中管理。支持按状态筛选（草稿/待审批/已通过/已驳回），点击「新建草稿」可以创建新的预算调整方案。每条草稿可以查看详细的预算科目明细（人员成本、办公费用、设备采购、外包服务等 8 个科目）。草稿状态可由预算专员提交转为「待审批」。

执行监控

各成本中心的预算执行情况以卡片网格呈现。每张卡片包含预算燃尽环形图和三个关键数字（已用/预算/预测），点击展开可查看该中心的科目级明细，每个科目的执行率用进度条可视化，超标科目自动标红。

滚动预测

按季度展示各成本中心的滚动预测数据。支持按季度筛选，每项预测显示预测金额和置信度（高置信度绿色、中置信度琥珀色、低置信度红色）。底部是 Q2-Q4 各中心预测趋势柱状对比图。

差异分析

选择成本中心后，展示该中心各科目的预算 vs 实际差异明细表。差异额用箭头表示（红涨绿跌），差异率和 50% 预警阈值虚线对标。底部是差异率分布柱状图，红色柱子代表超标科目。

统计报表

三合一报表页：月度执行趋势面积图、事业部预算 vs 已用对比柱状图、预算科目分布饼图。支持切换标签查看不同维度的数据可视化。

三、核心业务流程拆解

在动手写代码之前，我把整个预算管控业务的流转画了一遍。这张图帮我理清了核心角色、状态流转和数据链路：

整个流程的核心逻辑是：预算编制 → 审批通过 → 月度执行 → 差异分析 → 滚动预测 → 偏差预警 → 预算调整，形成一个完整的 PDCA 循环。

四、AI 智能引导实践

4.1 Prompt 输入

我的初始 Prompt 是这样写的（在最新版飞算 JavaAI IDEA 插件窗口里）：

我需要一个企业预算编制与成本中心管理系统。前后端分离项目，核心功能包括：成本中心树形钻取、预算编制草稿管理、月度执行监控（含预算燃尽进度环）、滚动预测管理、预算 vs 实际差异分析（预警阈值）。成本中心按集团→事业部→部门→科室四级组织。需要登录注册和 8 个以上菜单页面。数据全部按真实业务构建，Vue 3 + Vite 前端。

4.2 智能引导第一步：确认需求

插件很快拆解出了核心实体和功能清单，我确认了几个要点：

• 成本中心要有四层树形结构，每个节点独立关联预算数据
• 四数联动（预算/已用/预测/差异）是核心展示逻辑
• 预算执行率用环形进度条直观展示，超阈值自动变色

4.3 智能引导第二步：接口设计

接口生成了 8个详细的接口方案。

4.4 智能引导第三步：表结构设计

插件生成的 DDL 设计了成本中心的闭包表（闭包表+邻接表混合），预算编制主表和科目明细表分开存储，月度执行数据按时间分片。这些设计对后续做滚动预测和趋势分析非常关键。

4.5 智能引导第四步：生成计划

插件列出了完整的生成计划：路由配置（8 个菜单 + 登录注册 + 404）、Pinia Store（auth/budget/costCenter）、数据层、7 个视图组件 + 4 个通用组件。

4.6 智能引导第五步：源码生成

100% 跑完，提示导出成功。整个工程骨架搭建完毕，剩下的就是我自己调整 内部数据量、打磨差异化视觉组件和文章配图。

五、前后端架构与设计

5.1 后端技术栈

5.2 前端技术栈

5.3 视觉风格：Budget Analytics

设计语言核心：靛蓝 + 琥珀 + 冷白底。

• 靛蓝 #312E81：主色，用于侧边栏、标题、图表预算线
• 琥珀 #D97706：强调色，用于标识、按钮、图表实际线
• 冷白底 #F8FAFC：背景，保持清爽通透
• 深靛蓝侧边栏 #1E1B4B，标题字体加粗，数字用等宽字体

差异化页面骨架是：左侧成本中心组织树 + 右侧预算详情面板 + 底部趋势图，这个三明治式布局是本系统的独有特征。

5.4 独有视觉组件

1. 成本中心树（TreeNode）：四层树形结构，每层节点显示该中心的预算金额和执行率百分比，执行率用颜色编码。支持展开/收起子节点和点击钻取。

2. 预算燃尽环（BudgetBurnDown）：内嵌于成本中心详情和执监控卡片中的 SVG 环形进度条。圆圈百分比 = 已用/预算，颜色三段式：绿（<50%）、琥珀（50%-70%）、红（>70%）。下方联动显示剩余预算、月均消耗和可用月数。

3. 四数联动卡片组：每个成本中心详情顶部的四个指标卡（预算/已用/预测/差异），四个数字从同一数据源拿到，点击任一节点瞬间联动刷新。

六、总结与反思

回头看这个项目，最让我有获得感的是两件事：

第一，预算管控的 PDCA 闭环终于能在屏幕上跑起来了。

从编制草稿到执行监控、从差异分析到滚动预测，整个链条是通的。财务总监再也不用在开会前催着要数据，自己打开系统就能看到全集团的预算执行全景。各成本中心负责人也能随时看到自己部门的剩余预算和可用月数，做决策的时候心里有底。

第二，飞算 JavaAI 帮我省掉的不是编码量，而是「从想法到落地」的验证周期。

如果用传统方式，光搭脚手架、配路由、写七个页面的 Vue 组件就得大半天。而 AI 在几分钟内完成了骨架生成，我只需要把精力放在调 内部数据、打磨树形钻取交互、设计预算燃尽环的视觉细节上——这些都是 AI 做不了、需要人对业务有深度理解的地方。

骨架 AI 生成，灵魂人来把控。这套分工，在预算管控这种强业务逻辑的系统上，效率收益尤其明显。