From d6ec7b24ec3cea8a4eab065fa683fe8a0d5e9f40 Mon Sep 17 00:00:00 2001
From: mac <mac@Qiukais-m1-macPro.local>
Date: Tue, 16 Jun 2026 15:51:09 +0800
Subject: [PATCH] =?UTF-8?q?v2.0.4=20=E2=80=94=20=E6=9B=B2=E7=BA=BF?=
 =?UTF-8?q?=E5=9B=BE=E9=BB=98=E8=AE=A4=E6=8A=98=E5=8F=A0=E5=8F=AF=E5=B1=95?=
 =?UTF-8?q?=E5=BC=80=EF=BC=8C=E6=98=8E=E7=BB=86=E5=88=97=E8=A1=A8=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/app.js | 33 ++++++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/static/app.js b/static/app.js
index 8b4a1a2..5d96735 100644
--- a/static/app.js
+++ b/static/app.js
@@ -421,16 +421,43 @@ function renderProducts() {
 function renderFinance() {
   const rows = state.data.finance.map((x) => [x.month, x.category, money(x.amount), text(x.notes)]);
   document.querySelector("#finance").innerHTML = `<div class="grid gap-4">
-    ${card(`<h2 class="mb-4 text-lg font-bold">收入、毛利、成本/费用、净利月度曲线</h2><div style="position:relative;height:300px"><canvas id="financeChart2"></canvas></div>`, "p-5")}
+    ${card(`<div class="flex items-center justify-between cursor-pointer" onclick="toggleFinanceChart()"><h2 class="text-lg font-bold text-slate-700">收入、毛利、成本/费用、净利月度曲线</h2><i data-lucide="chevron-down" class="transition-transform rotate-90" id="financeChartIcon"></i></div><div id="financeChartWrap" class="hidden mt-4"><div style="position:relative;height:300px"><canvas id="financeChart2"></canvas></div></div>`, "p-5")}
     ${card(formHtml([
       { label: "日期", input: `<input name="month" type="date" required>` },
       { label: "类型", input: `<select name="category"><option>签单</option><option>确认收入</option><option>人力成本</option><option>费用</option><option>外部采购</option></select>` },
       { label: "金额/万", input: `<input name="amount" type="number" step="0.01" required>` },
       { label: "费用说明", input: `<input name="notes" placeholder="摘要说明">` },
     ], { handler: "createFinance", text: "新增明细" }), "p-4")}
-    ${card(`<div class="flex items-center justify-between cursor-pointer" onclick="document.querySelector('#finance-table').classList.toggle('hidden'); this.querySelector('i').classList.toggle('rotate-90')"><h3 class="font-bold text-slate-700">明细列表 <span class="text-slate-400 font-normal">(${state.data.finance.length})</span></h3><i data-lucide="chevron-down" class="transition-transform rotate-90"></i></div><div id="finance-table" class="hidden mt-3">${renderTable(["日期", "类型", "金额", "备注"], rows)}</div>`, "p-4")}
+    ${card(`<h3 class="font-bold text-slate-700 mb-3">明细列表 <span class="text-slate-400 font-normal">(${state.data.finance.length})</span></h3>${renderTable(["日期", "类型", "金额", "备注"], rows)}`, "p-4")}
   </div>`;
-  renderChartOn("financeChart2", state.data.financeMonthly);
+  if (window.lucide) window.lucide.createIcons();
+}
+window.toggleFinanceChart = () => {
+  const wrap = document.querySelector("#financeChartWrap");
+  const icon = document.querySelector("#financeChartIcon");
+  if (!wrap) return;
+  wrap.classList.toggle("hidden");
+  icon.classList.toggle("rotate-90");
+  if (!wrap.classList.contains("hidden") && !state.chart2) renderFinanceChart();
+};
+function renderFinanceChart() {
+  const { financeMonthly } = state.data;
+  const canvas = document.querySelector("#financeChart2");
+  if (!canvas || !window.Chart) return;
+  if (state.chart2) state.chart2.destroy();
+  state.chart2 = new Chart(canvas, {
+    type: "line",
+    data: {
+      labels: financeMonthly.map((x) => x.month),
+      datasets: [
+        { label: "收入", data: financeMonthly.map((x) => x.revenue), borderColor: "#2563eb", tension: 0.3 },
+        { label: "毛利", data: financeMonthly.map((x) => x.gross_profit), borderColor: "#059669", tension: 0.3 },
+        { label: "成本/费用", data: financeMonthly.map((x) => x.cost_expense), borderColor: "#d97706", tension: 0.3 },
+        { label: "净利", data: financeMonthly.map((x) => x.net_profit), borderColor: "#7c3aed", tension: 0.3 },
+      ],
+    },
+    options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: "bottom", labels: { boxWidth: 12, font: { size: 11 } } } }, scales: { x: { ticks: { font: { size: 11 } }, grid: { display: false } }, y: { ticks: { font: { size: 11 } } } } },
+  });
 }
 
 function renderChartOn(id, data) {