v2.0.4 — 曲线图默认折叠可展开，明细列表默认展示

static/app.js

@@ -230,7 +230,21 @@ window.submitTaskForm = async (event, projectId) => {
     alert("保存失败：" + error.message);
   }
 };
-window.createFinance = (event) => createResource(event, "finance");
+window.createFinance = async (event) => {
+  event.preventDefault();
+  const data = Object.fromEntries(new FormData(event.currentTarget).entries());
+  // Map form: month(date)→month(YYYY-MM), category→category, amount, tenant
+  data.month = data.month.substring(0, 7);
+  data.project_name = state.tenant;
+  data.tenant = state.tenant;
+  data.record_type = "revenue"; // default, will be adjusted by category
+  try {
+    await api("/api/finance", { method: "POST", body: JSON.stringify({ data }) });
+    await load();
+  } catch (error) {
+    alert("新增失败：" + error.message);
+  }
+};
 window.switchTab = switchTab;
 window.switchTenant = (tenant) => {
   state.tenant = tenant;
@@ -405,19 +419,45 @@ function renderProducts() {
 }
 
 function renderFinance() {
-  const rows = state.data.finance.map((x) => [x.month, badge(x.record_type === "revenue" ? "收入" : "成本/费用"), x.category, money(x.amount), x.occurred_date, text(x.notes)]);
+  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" required placeholder="YYYY-MM" pattern="\\d{4}-\\d{2}">` },
+      { label: "日期", input: `<input name="month" type="date" required>` },
-      { label: "类型", input: `<select name="record_type"><option value="revenue">收入</option><option value="cost_expense">成本/费用</option></select>` },
+      { label: "类型", input: `<select name="category"><option>签单</option><option>确认收入</option><option>人力成本</option><option>费用</option><option>外部采购</option></select>` },
-      { label: "分类", input: `<input name="category" required>` },
       { label: "金额/万", input: `<input name="amount" type="number" step="0.01" required>` },
-      { label: "发生日期", input: `<input name="occurred_date" type="date">` },
+      { label: "费用说明", input: `<input name="notes" placeholder="摘要说明">` },
     ], { handler: "createFinance", text: "新增明细" }), "p-4")}
-    ${renderTable(["月份", "类型", "分类", "金额", "发生日期", "备注"], rows)}
+    ${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) {