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 強刷以繞過瀏覽器快取。

參考資源

更多技能請訪問小蔥技能站7w4.net。

• 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 檔案，在其他電腦上直接雙擊使用，非常方便。稍有不足的是，技能中沒有包含完整的程式碼實現，需要參考文件自行開發。