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

目录

一、痛点切入

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

预算总览工作台

成本中心树（独有组件）

编制草稿管理

执行监控

滚动预测

差异分析

统计报表

三、核心业务流程拆解

四、AI 智能引导实践

4.1 Prompt 输入

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

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

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

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

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

五、前后端架构与设计

5.1 后端技术栈

5.2 前端技术栈

5.3 视觉风格：Budget Analytics

5.4 独有视觉组件

六、总结与反思

一、痛点切入

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

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

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

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

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

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

我想了两天，决定用飞算 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 生成，灵魂人来把控。这套分工，在预算管控这种强业务逻辑的系统上，效率收益尤其明显。