name: 财务工作台搭建 description: 构建/扩展纯前端单机版「财务工作台」Web 应用——涵盖资产负债表、利润表、现金流量表三大报表编制、财务指标分析、经营指标预算、关键指标(KPI)看板、勾稽关系校验。技术栈为原生 HTML/CSS/JS + localStorage（单机离线、无后端），并支持打包成单文件 HTML 在其他电脑直接打开。当用户需要搭建财务分析平台、做报表自动化看板、月度财务分析模板、预算执行跟踪、或类似的"数据存本机浏览器"的财务工具时使用本技能。 agent_created: true

财务工作台搭建

本技能用于构建或扩展一个纯前端、单机版、离线可用的财务工作台。最终交付物是一个可直接用浏览器打开的 HTML 应用，数据存于本机浏览器 localStorage，无需服务器、无需联网即可运行核心功能；亦可通过打包脚本生成单文件 HTML，方便在其它电脑直接双击打开。

何时使用

• 用户要"搭一个财务分析/报表/预算平台""做个月度财务分析看板""弄个预算执行跟踪工具"。
• 用户需要把三张主表（资产负债表、利润表、现金流量表）录入/导入后，自动出指标分析、杜邦分析、KPI 同比、勾稽校验。
• 用户要求成果"能在别的电脑打开""发给同事直接用""导出 Excel 不乱码""离线也能用"。
• 用户基于既有财务工作台做二次开发（新增指标、改行业基准、加模块、换风格）。

核心设计原则（务必遵守）

1. 纯前端 + localStorage：所有数据落在 localStorage（key 见 references/data-model.md）。不引后端、不引数据库。
2. 三大报表为单一数据源：资产负债表/利润表/现金流量表录入一次后，财务分析、KPI、预算、勾稽校验全部实时取数，绝不另存一份数值（避免口径不一致）。
3. 自动计算行用 calc 链声明：小计/合计/净利润等由 calc:[[key, sign], ...] 描述，引擎 FW.getVal 递归求值，不手动写公式。
4. 中国财务展示习惯：
5. 上升=红(.up)、下降=绿(.down)（与欧美相反）。
6. 负数以红色括号呈现 (1,234.56)，用 FW.fmtAmtNum/FW.fmt 而非 Math.abs 抹掉符号。
7. 减值损失（信用减值损失、资产减值损失、公允价值变动收益等）在利润表列于"加"项、损失以负号填列。
8. 金额默认单位万元，且保留正负号（首页经营现金净额应为负就显示负）。
9. 勾稽校验是质量闸门：未通过且未备注的勾稽项，会阻止"生成指标月报"。详见 references/data-model.md 的校验清单。
10. 离线优先：第三方库（SheetJS 导出 Excel、ECharts 图表）优先用本地文件，CDN 仅作降级；缺少图表库时界面照常显示，只是图表区提示"未加载"。

标准模块架构（6 大模块 + 工作台首页）

导航分组与页面 id（见 references/architecture.md 的 NAV 定义）：

文件结构（推荐）

项目根/
├── index.html              # 入口：引入 css + 各 js 模块（顺序见下），第三方库异步加载
├── css/style.css           # 全部样式（CSS 变量换肤：--brand/--up/--down/--warn/--red/--green）
├── js/
│   ├── utils.js            # FW.N/FW.fmt/FW.fmtAmt/FW.fmtAmtNum/FW.UNIT/FW.modal/FW.toast/期间工具
│   ├── defs.js             # 报表行定义、REPORTS、getVal 引擎、SYNONYMS、INDUSTRY_RANGES、DEFAULT_KPIS、DEFAULT_BUDGET_ROWS、DEMO 数据
│   ├── store.js            # localStorage 读写、期间数据、预算、导出/导入、loadDemo
│   ├── checks.js           # 勾稽校验 runChecks / refreshLight / 校验中心页
│   ├── reports.js          # renderReportPage（三大报表通用渲染+编辑）
│   ├── import.js           # Excel 导入向导、模板下载
│   ├── analysis.js         # INDICATORS 定义、calcIndicators、杜邦/雷达/趋势、分析页
│   ├── budget.js           # renderBudgetPage、budgetActual、budgetPrev
│   ├── kpi.js              # kpiValue、renderKpiPage、指标月报
│   ├── home.js             # renderHomePage、指标卡 kpiCard(含 prev)
│   ├── resize.js           # 表格列宽/行高拖拽
│   └── app.js              # 导航/期间管理/全局刷新/初始化
├── js/lib/xlsx.full.min.js # 本地 SheetJS（导出 Excel 必需，离线可用）
└── build_portable.js       # 打包脚本：生成单文件 HTML（见 scripts/build_portable.js 同源逻辑）

index.html 脚本加载顺序：utils → defs → store → checks → reports → import → analysis → budget → kpi → home → resize → app，再异步加载 echarts（CDN 降级）。

构建工作流

1. 脚手架：按上述结构建 index.html/css/style.css/js/*.js；或复制 assets/starter/ 骨架起步。
2. 数据模型：先定 defs.js（报表行、REPORTS、getVal、行业区间、KPI/预算默认、DEMO），再定 store.js（schema + 读写）。详细 schema 见 references/data-model.md。
3. 逐模块实现：报表编制(录入/导入) → 财务分析(指标引擎) → 预算 → KPI → 勾稽校验 → 首页。每加一个取数类模块，确保它从报表实时取数。
4. 本地化第三方库：把 SheetJS 放 js/lib/xlsx.full.min.js；ECharts 走 CDN 降级。
5. 打包便携版：用 scripts/build_portable.js（与本技能同源）把 CSS/JS 全部内联为单文件 HTML，存到桌面，其它电脑双击即用。常见坑（BOM、<script> 转义、ECharts 离线）见 references/packaging.md。
6. 验证：node --check 每个 js；用 new Function(code) 校验内联脚本语法；桌面打开核对三大报表勾稽平衡。

关键取数引擎（必须理解）

• FW.getVal(pd, rep, key, col)：rep∈{bs,pl,cf}，col 资产负债表用 e(期末)/b(年初)，利润表/现金流量表用 c(本期)/p(上年同期)。有 calc 的行自动递归求和；head 行（如"流动资产："）返回 0。
• 指标用声明式：FW.INDICATORS 每项含 calc(ctx) 与 trace(ctx)，引擎 calcIndicators(p) 同时算本期/上期并判定健康度 g/y/r。
• KPI 取值 FW.kpiValue(kpi, p, 'cur'|'prev')：src 形如 pl:yysr(报表) 或 ratio:zcfzl(分析指标，其中 yszts 映射到 yszl 周转天数)。
• 同比一律取报表内已有列（利润表/现金流量表用 p 列、资产负债表用 b 列），不要另读一个独立"上年期间"对象——这是早期踩过的坑（详见 packaging.md）。

中国财务合规要点（实现时勿遗漏）

• 利润表：减值损失、公允价值变动收益、投资收益、资产处置收益等均列于"加"项，损失以负号填列；营业利润/利润总额/净利润计算式中这些项符号按 calc 定义累加。
• 现金流量表：期末现金及现金等价物余额 为录入/导入行，校验 期末 = 期初 + 净增加额。
• 资产负债表：资产总计 = 负债合计 + 所有者权益合计（期末、年初两列都要平衡）；演示数据需用分位轧差配平（见 defs.js 的 buildDemoPeriods）。
• 比率类指标按"本期累计口径 ×12/月 数"年化（见 analysis.js 的 ctx.ann）。

打包为可移植单文件（其它电脑打开）

执行 scripts/build_portable.js（或项目内 build_portable.js），把 css/style.css、js/*.js、js/lib/xlsx.full.min.js 全部内联进一个 HTML，ECharts 仍走 CDN（离线时图表区提示）。输出文件用浏览器直接打开即可，数据存于该浏览器 localStorage。完整脚本与避坑清单见 references/packaging.md。

交付提示

• 给用户的最终文件建议命名为 财务工作台_便携版.html 并存到桌面，便于找到。
• 提醒用户：单文件在其它电脑首次打开（无本地数据）会自动载入演示数据让模板立即可用；要用自己的数据，点右上角「导入备份」选择导出的 JSON/Excel 覆盖即可。
• 提示用户按 Ctrl/Cmd + F5 强刷以绕过浏览器缓存。

参考资源

• references/architecture.md：完整导航/模块/初始化流程与页面渲染约定。
• references/data-model.md：localStorage schema、报表行与 REPORTS、getVal、INDUSTRY_RANGES、INDICATORS、KPI src、预算取数、勾稽校验清单、演示数据构建——二次开发前必读。
• references/packaging.md：单文件打包脚本说明 + 6 个真实踩坑与修复（符号、同比、乱码、离线、script 转义、BOM）。
• scripts/build_portable.js：可复用的单文件打包脚本（与本项目同源）。
• assets/starter/：最小可运行骨架（index.html + style.css 关键片段 + 模块 stub），用于从零起步或对照结构。

这个技能质量较高，文档写得非常详细扎实，从设计原则到技术细节都有清晰说明。它为搭建一个纯本地运行的财务工作台提供了完整方案，涵盖报表编制、财务分析、预算管理、指标看板等实用功能，还考虑了中国财务的特殊展示习惯。配套的打包工具可以把整个应用变成一个 HTML 文件，在其他电脑上直接双击使用，非常方便。稍有不足的是，技能中没有包含完整的代码实现，需要参考文档自行开发。