【Code With SOLO】用 SOLO 从零搭建一个纯前端家庭记账程序，数据完全由你掌控

[用户25758]

【Code With SOLO】用 SOLO 从零搭建一个纯前端家庭记账程序，数据完全由你掌控

一、摘要

日常记账 App 要么需要注册账号，要么数据存在云端，隐私和掌控感都不够好。我用 TRAE SOLO 从零搭建了一个纯前端家庭记账程序——所有数据以 JSON 文件形式保存在本地目录，无需后端、无需注册、无需联网。支持多成员记账、分类统计、预算管理、CSV/Excel 导入导出，还能一键切换深色模式。

二、背景

我是一名开发者，家庭每月的开销来自多个成员、多个支付渠道（微信、支付宝、银行卡），月底想统计"这个月钱都花哪了"却很难汇总。市面上的记账 App 普遍存在几个痛点：

• 隐私顾虑：账单数据上传到第三方服务器
• 功能臃肿：广告多、社区多、理财推荐多，核心记账体验反而差
• 数据锁定：导出困难，换 App 数据迁移成本高
• 家庭成员：大多只支持单人记账，家庭场景不友好

所以我决定自己做一个——简单、纯粹、数据完全本地化的家庭记账工具。

三、实践过程

3.1 任务拆解

我没有一上来就让 SOLO 写代码，而是先做了设计文档，把需求想清楚：

P0 基础可用 → P1 格式支持 → P2 统计分析 → P3 高级功能 → P4 体验优化

用 SOLO 生成了完整的设计方案文档（约 20 页 Word），涵盖技术架构、数据模型、页面设计、API 设计等。这一步非常关键，后续编码几乎零返工。

3.2 技术选型

核心决策是数据存储方案。最初考虑用 IndexedDB，但最终选择了 File System Access API：

方案	优点	缺点
IndexedDB	兼容性好	数据在浏览器内部，用户看不到文件
File System Access API	直接操作本地文件，数据完全透明	仅 Chrome/Edge 支持

最终选择了后者——用户选择一个本地文件夹作为"账本目录"，所有数据以 JSON 文件保存在里面，用任何文本编辑器都能打开查看。

3.3 关键 Prompt 示例

设计阶段：

设计一个简单易用的纯前端家庭记账程序，使用 File System Access API 直接读写本地目录中的 JSON 文件，不使用任何后端服务。需要包含：记账、统计、导入导出、预算管理、双主题切换等功能。

编码阶段（分模块逐步实现）：

按照设计方案开始 P0 阶段开发。实现 File System Access API 目录选择、基础记账功能、月度列表与切换、JSON 文件读写保存。

Bug 修复：

图标展示异常，选择目录点击无效。

整合优化：

将所有代码整合到一个 HTML 文件中，方便直接打开使用。

首页重构：

修改首页，将首页和记账整合到一个页面，方便快速添加维护。增加账单列表数据，可以编辑或者删除或者批量删除账单。修改结余计算，使用收入减去支出，可能会存在负数情况。

3.4 开发过程

整个开发过程分为以下几个阶段：

第一阶段：设计文档（约 10 分钟）

用 SOLO 生成了完整的设计方案，包含：

• 技术架构（三层架构图）
• 数据模型（Bill、Config、MonthFile）
• 分类体系（10 大支出分类 + 6 大收入分类）
• 页面设计（4 个页面）
• 开发阶段规划（P0-P4）

第二阶段：P0 核心功能（约 15 分钟）

一次性生成了完整的项目结构：

• index.html - 主页面
• css/ - 5 个样式文件
• js/ - 8 个脚本文件（store、models、app、dashboard、record、stats、import-export、utils）

核心存储层 store.js 的实现要点：

// 选择账本目录
async function storeSelectDirectory() {
  const dirHandle = await window.showDirectoryPicker({
    mode: 'readwrite',
    startIn: 'documents'
  });
  // 读取/创建 config.json
  // 扫描已有月份文件
}

// 保存月度数据
async function storeSaveCurrentMonth() {
  const yearDir = await dirHandle.getDirectoryHandle(year, { create: true });
  const fileHandle = await yearDir.getFileHandle(`${year}-${month}.json`, { create: true });
  const writable = await fileHandle.createWritable();
  await writable.write(JSON.stringify(data, null, 2));
  await writable.close();
}

第三阶段：Bug 修复（约 5 分钟）

遇到两个问题：

1. 图标异常 + 按钮无效：根本原因是 ES Module 中无法直接访问 CDN 全局变量（dayjs、Chart、XLSX），导致模块加载失败。修复方法：添加 const dayjs = window.dayjs。
2. Emoji 显示问题：CSS 字体栈添加 Color Emoji fallback。

第四阶段：整合为单文件（约 5 分钟）

将 5 个 CSS + 8 个 JS 整合到一个 index.html，去掉 ES Module 的 import/export，改为普通脚本顺序执行。最终只需一个文件，双击即可打开。

第五阶段：首页重构（约 10 分钟）

将记账功能整合到首页，新增：

• 可折叠的快速记账表单
• 完整账单列表（编辑/删除/批量删除）
• 结余支持负数显示

3.5 踩过的坑

1. ES Module 作用域问题：CDN 通过 <script> 加载的全局变量在 ES Module 中不可见，需要通过 window.xxx 访问。这是最耗时的一个 bug。

2. File System Access API 权限：目录句柄仅在当前页面会话有效，刷新后需要重新选择。后续 P4 阶段计划通过 IndexedDB 持久化句柄引用来实现"记住目录"功能。

3. 大文件读取限制：整合后的单文件 HTML 超过 70KB，Read 工具无法一次性读取，需要分段处理。

四、成果展示

4.1 项目结构

最终交付为单个 HTML 文件，包含完整的 CSS + JS：

family-finance/
└── index.html          ← 一个文件搞定一切

本地文件系统中的账本目录结构：

我的账本/
├── config.json                  # 全局配置
├── 2026/
│   ├── 2026-01.json             # 1月账单
│   ├── 2026-02.json             # 2月账单
│   ├── 2026-03.json             # 3月账单
│   └── 2026-04.json             # 4月账单
└── 2025/
    ├── 2025-11.json
    └── 2025-12.json

4.2 功能清单

功能	说明
本地文件存储	File System Access API，数据完全透明
快速记账	首页可折叠记账表单，3 秒完成一笔
多成员记账	支持家庭成员分账统计
分类统计	10 大支出分类 + 6 大收入分类
图表分析	Chart.js 饼图 + 统计页条形图
预算管理	月度预算设置 + 使用进度
导入	CSV / Excel / JSON 多格式导入
导出	JSON / Excel 导出
双主题	浅色/深色一键切换
响应式	移动端 + 桌面端自适应
批量管理	账单批量选择/删除
零依赖部署	单个 HTML 文件，双击即用

4.3 页面截图

首页（概览 + 快速记账 + 账单列表）：

首页布局从上到下分为四个区域：

1. 概览卡片：本月收入、支出、结余（支持负数红色显示）、预算剩余
2. 快速记账：可折叠表单，点击展开，包含收入/支出切换、金额输入、分类选择、成员/渠道/日期
3. 支出分类图表：环形图展示各分类占比
4. 账单明细：完整账单列表，支持编辑、删除、批量管理

快速记账（展开状态）：

点击"记一笔"展开记账表单，选择分类、填写金额和备注即可快速完成一笔记录。

统计分析页：

月度统计包含支出分类、成员支出、支付渠道、预算使用进度；年度统计包含年度总览。

数据管理页：

目录管理、CSV/Excel/JSON 导入导出、月份文件列表。

设置与成员管理：

家庭名称、每月预算、主题切换，以及家庭成员的增删改管理。

4.4 技术栈

技术	用途
原生 HTML/CSS/JS	无框架依赖，零构建
File System Access API	本地文件读写
Chart.js（CDN）	图表渲染
SheetJS（CDN）	Excel 解析/生成
Day.js（CDN）	日期处理

五、效果与总结

5.1 效率提升

环节	传统方式	使用 SOLO
设计文档	2-3 小时	10 分钟
核心编码	2-3 天	15 分钟
Bug 修复	1-2 小时	5 分钟
整合优化	半天	15 分钟
总计	3-5 天	约 45 分钟

5.2 SOLO 在流程中的角色

SOLO 不只是"写代码的工具"，更像是全栈搭档：

1. 设计阶段：帮我梳理需求、输出专业设计文档，避免后续返工
2. 编码阶段：一次性生成完整项目结构，模块清晰、代码规范
3. 调试阶段：快速定位 ES Module 作用域等隐蔽 bug
4. 迭代阶段：根据反馈快速重构（如首页整合记账、批量删除等）

5.3 可复用方法

1. 先设计后编码：花 10 分钟让 SOLO 生成设计文档，比直接写代码效率高 10 倍
2. 分阶段迭代：P0→P1→P2 逐步推进，每个阶段都是可用的产品
3. 单文件交付：对于工具类项目，整合为单个 HTML 文件极大降低了使用门槛
4. 数据透明化：用 File System Access API 替代 IndexedDB，用户可以直接查看和编辑数据文件

5.4 后续规划

• P1：微信/支付宝账单智能识别优化
• P2：年度统计、月度趋势折线图
• P3：预算预警、提前消费分析
• P4：记住目录功能、数据备份恢复

---

用 AI 45 分钟完成了一个从设计到交付的完整项目，这就是 SOLO 的魅力——把想法变成产品的速度，快到不可思议。

四、源码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>家庭记账本</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
  <script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.10/dayjs.min.js"></script>
  <style>
/* ========================================
   全局样式
   ======================================== */
:root {
  --bg-primary: #f5f7fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e8ecf1;
  --text-primary: #1a1a2e;
  --text-secondary: #4a5568;
  --text-muted: #718096;
  --border-color: #e2e8f0;
  --shadow-color: rgba(0, 0, 0, 0.08);
  --accent-primary: #4a90d9;
  --accent-secondary: #6ab0ff;
  --accent-light: #e3f0ff;
  --color-income: #10b981;
  --color-expense: #ef4444;
  --color-warning: #f59e0b;
  --color-success: #22c55e;
  --color-info: #3b82f6;
  --card-bg: #ffffff;
  --card-shadow: 0 2px 8px var(--shadow-color);
  --card-radius: 12px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  --font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-xxl: 32px;
  --header-height: 56px;
  --nav-height: 64px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
}
[data-theme="dark"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --border-color: #334155;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --accent-primary: #6ab0ff;
  --accent-secondary: #4a90d9;
  --accent-light: #1e3a5f;
  --card-bg: #1e293b;
  --card-shadow: 0 2px 8px var(--shadow-color);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-tap-highlight-color: transparent; }
body {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* 顶部导航栏 */
.app-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--spacing-md);
  z-index: 100; box-shadow: var(--card-shadow);
}
.header-left { display: flex; align-items: center; gap: var(--spacing-sm); }
.app-logo { font-size: 24px; font-family: var(--font-emoji); }
.app-title { font-size: var(--font-size-lg); font-weight: 600; color: var(--text-primary); }
.header-center { flex: 1; display: flex; justify-content: center; padding: 0 var(--spacing-md); }
.month-selector {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color); border-radius: 8px;
  background: var(--bg-secondary); color: var(--text-primary);
  font-size: var(--font-size-md); cursor: pointer; min-width: 160px;
}
.header-right { display: flex; align-items: center; gap: var(--spacing-sm); }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-md);
  border: none; border-radius: 8px; font-size: var(--font-size-sm);
  font-weight: 500; cursor: pointer; transition: all var(--transition-fast);
  text-decoration: none; white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--accent-primary); color: white; }
.btn-primary:hover:not(:disabled) { background: var(--accent-secondary); }
.btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); }
.btn-secondary:hover:not(:disabled) { background: var(--border-color); }
.btn-icon-only {
  width: 40px; height: 40px; padding: 0; font-size: 20px;
  background: transparent; border: 1px solid var(--border-color);
}
.btn-large { padding: var(--spacing-md) var(--spacing-xl); font-size: var(--font-size-md); }
.btn-block { width: 100%; }
.btn-back { background: transparent; color: var(--text-secondary); padding: var(--spacing-sm); }
.btn-back:hover { color: var(--text-primary); }

/* 主内容 */
.app-main { flex: 1; margin-top: var(--header-height); margin-bottom: var(--nav-height); overflow-y: auto; }
.page { display: none; min-height: calc(100vh - var(--header-height) - var(--nav-height)); }
.page.active { display: block; }
.page-content { padding: var(--spacing-md); max-width: 800px; margin: 0 auto; }
.page-title { font-size: var(--font-size-xl); font-weight: 600; margin-bottom: var(--spacing-lg); color: var(--text-primary); }

/* 底部导航 */
.app-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--nav-height); background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  display: flex; justify-content: space-around; align-items: center; z-index: 100;
}
.nav-item {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-md);
  color: var(--text-muted); text-decoration: none; transition: color var(--transition-fast); cursor: pointer;
}
.nav-item:hover, .nav-item.active { color: var(--accent-primary); }
.nav-icon { font-size: 24px; font-family: var(--font-emoji); }
.nav-label { font-size: var(--font-size-xs); font-weight: 500; }

/* 卡片 */
.section-card {
  background: var(--card-bg); border-radius: var(--card-radius);
  padding: var(--spacing-md); box-shadow: var(--card-shadow); margin-bottom: var(--spacing-md);
}
.section-card h3 { font-size: var(--font-size-md); font-weight: 600; margin-bottom: var(--spacing-md); color: var(--text-primary); }

/* 提示卡片 */
.hint-card {
  background: var(--card-bg); border-radius: var(--card-radius);
  padding: var(--spacing-xl); text-align: center; box-shadow: var(--card-shadow); margin-top: var(--spacing-xl);
}
.hint-icon { font-size: 64px; margin-bottom: var(--spacing-md); }
.hint-card h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); color: var(--text-primary); }
.hint-card p { color: var(--text-secondary); margin-bottom: var(--spacing-lg); }

/* 表单 */
.form-row { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-sm) 0; }
.form-row label { min-width: 80px; color: var(--text-secondary); font-size: var(--font-size-sm); }
.form-row input, .form-row select {
  flex: 1; padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color); border-radius: 8px;
  background: var(--bg-secondary); color: var(--text-primary); font-size: var(--font-size-md);
}
.form-row input:focus, .form-row select:focus { outline: none; border-color: var(--accent-primary); }
.form-row input[type="checkbox"] { width: 18px; height: 18px; flex: none; }
.checkbox-row { justify-content: flex-start; }
.checkbox-row label { display: flex; align-items: center; gap: var(--spacing-sm); min-width: auto; cursor: pointer; }
.form-actions { margin-top: var(--spacing-lg); }
.form-fields { background: var(--bg-tertiary); border-radius: 12px; padding: var(--spacing-md); margin-top: var(--spacing-md); }

/* Toast */
.toast {
  position: fixed; bottom: calc(var(--nav-height) + var(--spacing-md)); left: 50%;
  transform: translateX(-50%); background: var(--text-primary); color: var(--bg-primary);
  padding: var(--spacing-sm) var(--spacing-lg); border-radius: 8px;
  font-size: var(--font-size-sm); z-index: 200; animation: toast-in 0.3s ease;
}
.toast.hidden { display: none; }
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* 加载 */
.loading-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; z-index: 300;
}
.loading-overlay.hidden { display: none; }
.loading-spinner { width: 40px; height: 40px; border: 3px solid var(--border-color); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.hidden { display: none !important; }
.text-income { color: var(--color-income); }
.text-expense { color: var(--color-expense); }
.empty-hint { text-align: center; color: var(--text-muted); padding: var(--spacing-xl); }

/* ========================================
   仪表盘样式
   ======================================== */
.dashboard-content { animation: fade-in 0.3s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.summary-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
.summary-card {
  background: var(--card-bg); border-radius: var(--card-radius);
  padding: var(--spacing-md); box-shadow: var(--card-shadow); position: relative; overflow: hidden;
}
.summary-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.summary-card.income::before { background: var(--color-income); }
.summary-card.expense::before { background: var(--color-expense); }
.summary-card.balance::before { background: var(--accent-primary); }
.summary-card.budget::before { background: var(--color-warning); }
.card-label { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--spacing-xs); }
.card-value { font-size: var(--font-size-xl); font-weight: 600; color: var(--text-primary); }
.summary-card.income .card-value { color: var(--color-income); }
.summary-card.expense .card-value { color: var(--color-expense); }
.chart-section {
  background: var(--card-bg); border-radius: var(--card-radius);
  padding: var(--spacing-md); box-shadow: var(--card-shadow); margin-bottom: var(--spacing-lg);
}
.section-title { font-size: var(--font-size-md); font-weight: 600; margin-bottom: var(--spacing-md); color: var(--text-primary); }
.chart-container { position: relative; height: 200px; margin-bottom: var(--spacing-md); }
.category-list { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.category-item { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm); border-radius: 8px; transition: background var(--transition-fast); }
.category-item:hover { background: var(--bg-tertiary); }
.category-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.category-name { flex: 1; font-size: var(--font-size-sm); color: var(--text-primary); }
.category-amount { font-size: var(--font-size-sm); font-weight: 500; color: var(--text-primary); margin-right: var(--spacing-sm); }
.category-percent { font-size: var(--font-size-xs); color: var(--text-muted); min-width: 40px; text-align: right; }
.recent-bills {
  background: var(--card-bg); border-radius: var(--card-radius);
  padding: var(--spacing-md); box-shadow: var(--card-shadow); margin-bottom: var(--spacing-lg);
}
.bill-list { display: flex; flex-direction: column; }
.bill-item {
  display: flex; align-items: center; gap: var(--spacing-md);
  padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background var(--transition-fast);
}
.bill-item:last-child { border-bottom: none; }
.bill-item:hover { background: var(--bg-tertiary); margin: 0 calc(-1 * var(--spacing-md)); padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.bill-icon {
  width: 40px; height: 40px; border-radius: 50%; background: var(--bg-tertiary);
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; font-family: var(--font-emoji);
}
.bill-info { flex: 1; min-width: 0; }
.bill-category { font-size: var(--font-size-md); font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bill-note { font-size: var(--font-size-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bill-meta { text-align: right; }
.bill-amount { font-size: var(--font-size-md); font-weight: 600; }
.bill-amount.expense { color: var(--color-expense); }
.bill-amount.income { color: var(--color-income); }
.bill-date { font-size: var(--font-size-xs); color: var(--text-muted); }

/* ========================================
   记账页样式
   ======================================== */
.record-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-md); }
.record-header h2 { font-size: var(--font-size-lg); font-weight: 600; }
.type-tabs { display: flex; background: var(--bg-tertiary); border-radius: 12px; padding: var(--spacing-xs); margin-bottom: var(--spacing-lg); }
.type-tab {
  flex: 1; padding: var(--spacing-sm) var(--spacing-md); border: none; border-radius: 8px;
  background: transparent; color: var(--text-secondary); font-size: var(--font-size-md);
  font-weight: 500; cursor: pointer; transition: all var(--transition-fast);
}
.type-tab.active { background: var(--card-bg); color: var(--text-primary); box-shadow: var(--card-shadow); }
.type-tab[data-type="expense"].active { color: var(--color-expense); }
.type-tab[data-type="income"].active { color: var(--color-income); }
.amount-input {
  display: flex; align-items: center; justify-content: center;
  background: var(--card-bg); border-radius: var(--card-radius);
  padding: var(--spacing-lg); margin-bottom: var(--spacing-lg); box-shadow: var(--card-shadow);
}
.amount-input .currency { font-size: var(--font-size-xxl); color: var(--text-muted); margin-right: var(--spacing-sm); }
.amount-input input {
  border: none; background: transparent; font-size: var(--font-size-xxl);
  font-weight: 600; color: var(--text-primary); text-align: center; width: 200px; outline: none;
}
.amount-input input::placeholder { color: var(--text-muted); font-weight: 400; }
.amount-input input::-webkit-inner-spin-button, .amount-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.category-section { margin-bottom: var(--spacing-lg); }
.category-section h4 { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--spacing-md); }
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-sm); }
.category-btn {
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs);
  padding: var(--spacing-md) var(--spacing-sm); border: 2px solid var(--border-color);
  border-radius: 12px; background: var(--card-bg); cursor: pointer; transition: all var(--transition-fast);
}
.category-btn:hover { border-color: var(--accent-primary); background: var(--accent-light); }
.category-btn.active { border-color: var(--accent-primary); background: var(--accent-light); }
.category-btn .icon { font-size: 24px; font-family: var(--font-emoji); }
.category-btn .name { font-size: var(--font-size-xs); color: var(--text-secondary); text-align: center; }
.category-btn.active .name { color: var(--accent-primary); font-weight: 500; }

/* ========================================
   统计页样式
   ======================================== */
.time-tabs { display: flex; background: var(--bg-tertiary); border-radius: 12px; padding: var(--spacing-xs); margin-bottom: var(--spacing-lg); }
.time-tab {
  flex: 1; padding: var(--spacing-sm) var(--spacing-md); border: none; border-radius: 8px;
  background: transparent; color: var(--text-secondary); font-size: var(--font-size-md);
  font-weight: 500; cursor: pointer; transition: all var(--transition-fast);
}
.time-tab.active { background: var(--card-bg); color: var(--accent-primary); box-shadow: var(--card-shadow); }
.stats-content { display: flex; flex-direction: column; gap: var(--spacing-md); }
.stats-card { background: var(--card-bg); border-radius: var(--card-radius); padding: var(--spacing-md); box-shadow: var(--card-shadow); }
.stats-card-title { font-size: var(--font-size-md); font-weight: 600; margin-bottom: var(--spacing-md); color: var(--text-primary); }
.stats-list { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.stats-item { display: flex; align-items: center; gap: var(--spacing-sm); }
.stats-bar-container { flex: 1; height: 24px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden; position: relative; }
.stats-bar { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.stats-label { min-width: 80px; font-size: var(--font-size-sm); color: var(--text-secondary); }
.stats-value { min-width: 80px; text-align: right; font-size: var(--font-size-sm); font-weight: 500; color: var(--text-primary); }
.progress-bar { width: 100%; height: 8px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden; margin-top: var(--spacing-xs); }
.progress-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.progress-fill.warning { background: var(--color-warning); }
.progress-fill.danger { background: var(--color-expense); }
.progress-fill.success { background: var(--color-success); }
.year-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
.overview-item { text-align: center; padding: var(--spacing-md); background: var(--bg-tertiary); border-radius: 12px; }
.overview-label { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--spacing-xs); }
.overview-value { font-size: var(--font-size-xl); font-weight: 600; color: var(--text-primary); }
.overview-value.income { color: var(--color-income); }
.overview-value.expense { color: var(--color-expense); }

/* ========================================
   数据管理页样式
   ======================================== */
.directory-info { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); padding: var(--spacing-md); background: var(--bg-tertiary); border-radius: 8px; }
.directory-path { font-size: var(--font-size-sm); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.import-area { border: 2px dashed var(--border-color); border-radius: 12px; padding: var(--spacing-xl); text-align: center; cursor: pointer; transition: all var(--transition-fast); }
.import-area:hover, .import-area.dragover { border-color: var(--accent-primary); background: var(--accent-light); }
.import-hint { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); }
.import-icon { font-size: 48px; color: var(--text-muted); }
.import-hint p { color: var(--text-secondary); }
.import-formats { font-size: var(--font-size-xs); color: var(--text-muted); }
.import-source { margin-top: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm); }
.import-source label { font-size: var(--font-size-sm); color: var(--text-secondary); }
.import-source select { padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); }
.export-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); }
.month-file-list { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.month-file-item { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md); background: var(--bg-tertiary); border-radius: 8px; transition: background var(--transition-fast); }
.month-file-item:hover { background: var(--border-color); }
.month-file-name { font-weight: 500; color: var(--text-primary); }
.month-file-count { font-size: var(--font-size-sm); color: var(--text-muted); }
.month-file-actions { display: flex; gap: var(--spacing-sm); }
.settings-form { display: flex; flex-direction: column; gap: var(--spacing-md); }
.member-list { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); }
.member-item { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); background: var(--bg-tertiary); border-radius: 8px; }
.member-avatar { font-size: 24px; }
.member-name { flex: 1; font-weight: 500; color: var(--text-primary); }
.member-actions { display: flex; gap: var(--spacing-xs); }
.member-actions button { padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--font-size-xs); }

/* 响应式 */
@media (min-width: 768px) {
  .app-nav {
    position: fixed; top: var(--header-height); left: 0; bottom: 0; right: auto;
    width: 80px; height: auto; flex-direction: column; justify-content: flex-start;
    padding-top: var(--spacing-lg); border-top: none; border-right: 1px solid var(--border-color);
  }
  .app-main { margin-left: 80px; margin-bottom: 0; }
  .page-content { padding: var(--spacing-lg); max-width: 900px; }
  .summary-cards { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  .header-center { display: none; }
  .btn-text { display: none; }
  .summary-cards { grid-template-columns: repeat(2, 1fr); }
  .export-buttons { grid-template-columns: 1fr; }
  .directory-info { flex-direction: column; align-items: stretch; }
  .year-overview { grid-template-columns: 1fr; }
}

/* 快速记账卡片 */
.quick-record-card { padding: 0; overflow: hidden; }
.quick-record-header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md); cursor: pointer; }
.quick-record-header:hover { background: var(--bg-tertiary); }
.quick-record-header h3 { margin: 0; font-size: var(--font-size-md); font-weight: 600; }
.toggle-arrow { transition: transform var(--transition-fast); font-size: var(--font-size-sm); color: var(--text-muted); }
.toggle-arrow.expanded { transform: rotate(180deg); }
.quick-record-form { padding: 0 var(--spacing-md) var(--spacing-md); }
.quick-amount-row { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); background: var(--bg-tertiary); border-radius: 12px; padding: var(--spacing-md); }
.quick-amount-row .currency { font-size: var(--font-size-xl); color: var(--text-muted); }
.quick-amount-row input[type="number"] { flex: 1; min-width: 100px; border: none; background: transparent; font-size: var(--font-size-xl); font-weight: 600; color: var(--text-primary); outline: none; }
.quick-amount-row input::-webkit-inner-spin-button,
.quick-amount-row input::-webkit-outer-spin-button { -webkit-appearance: none; }
.quick-fields { display: flex; gap: var(--spacing-xs); flex-shrink: 0; }
.quick-fields select, .quick-fields input { padding: var(--spacing-xs) var(--spacing-sm); border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-secondary); color: var(--text-primary); font-size: var(--font-size-xs); }
.quick-actions { display: flex; gap: var(--spacing-sm); align-items: center; }
.quick-actions input { flex: 1; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); font-size: var(--font-size-sm); }
.quick-actions input:focus { outline: none; border-color: var(--accent-primary); }

/* 账单列表管理 */
.bill-list-card { padding: 0; overflow: hidden; }
.bill-list-header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md); }
.bill-list-header h3 { margin: 0; font-size: var(--font-size-md); font-weight: 600; }
.bill-list-actions { display: flex; align-items: center; gap: var(--spacing-sm); }
.bill-count { font-size: var(--font-size-xs); color: var(--text-muted); }
.btn-sm { padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--font-size-xs); }
.batch-bar { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); background: var(--accent-light); border-bottom: 1px solid var(--border-color); }
.batch-bar label { display: flex; align-items: center; gap: var(--spacing-xs); font-size: var(--font-size-sm); cursor: pointer; }
.bill-item { position: relative; }
.bill-item .bill-check { position: absolute; left: var(--spacing-md); top: 50%; transform: translateY(-50%); width: 18px; height: 18px; cursor: pointer; }
.bill-item.batch-mode { padding-left: 44px; }
.bill-item .bill-actions { display: none; gap: var(--spacing-xs); flex-shrink: 0; }
.bill-item:hover .bill-actions, .bill-item.show-actions .bill-actions { display: flex; }
.bill-actions .btn-sm { padding: 2px 8px; font-size: var(--font-size-xs); }
  </style>
</head>
<body>
  <!-- 顶部导航栏 -->
  <header class="app-header">
    <div class="header-left">
      <span class="app-logo">🏠</span>
      <span class="app-title">家庭记账本</span>
    </div>
    <div class="header-center">
      <select id="monthSelector" class="month-selector">
        <option value="">请先选择账本目录</option>
      </select>
    </div>
    <div class="header-right">
      <button id="saveBtn" class="btn btn-primary" disabled>
        <span class="btn-icon">💾</span>
        <span class="btn-text">保存</span>
      </button>
      <button id="themeToggle" class="btn btn-icon-only" title="切换主题">🌙</button>
    </div>
  </header>

  <!-- 主内容区域 -->
  <main class="app-main">
    <!-- 首页仪表盘 -->
    <section id="page-dashboard" class="page active">
      <div class="page-content">
        <div id="noDirectoryHint" class="hint-card">
          <div class="hint-icon">📁</div>
          <h3>欢迎使用家庭记账本</h3>
          <p>请先选择一个目录作为您的账本存储位置</p>
          <button id="selectDirBtn" class="btn btn-primary btn-large">选择账本目录</button>
        </div>
        <div id="dashboardContent" class="dashboard-content hidden">
          <div class="summary-cards">
            <div class="summary-card income"><div class="card-label">本月收入</div><div class="card-value" id="totalIncome">¥0.00</div></div>
            <div class="summary-card expense"><div class="card-label">本月支出</div><div class="card-value" id="totalExpense">¥0.00</div></div>
            <div class="summary-card balance"><div class="card-label">本月结余</div><div class="card-value" id="totalBalance">¥0.00</div></div>
            <div class="summary-card budget"><div class="card-label">预算剩余</div><div class="card-value" id="budgetRemain">¥0.00</div></div>
          </div>

          <!-- 快速记账（可折叠） -->
          <div class="section-card quick-record-card">
            <div class="quick-record-header" id="quickRecordToggle">
              <h3>✏️ 记一笔</h3>
              <span class="toggle-arrow" id="recordToggleArrow">▼</span>
            </div>
            <div id="quickRecordForm" class="quick-record-form hidden">
              <div class="type-tabs">
                <button class="type-tab active" data-type="expense">支出</button>
                <button class="type-tab" data-type="income">收入</button>
              </div>
              <div class="quick-amount-row">
                <span class="currency">¥</span>
                <input type="number" id="amountInput" placeholder="0.00" step="0.01" min="0">
                <div class="quick-fields">
                  <select id="memberSelect"></select>
                  <select id="channelSelect"></select>
                  <input type="date" id="dateInput">
                </div>
              </div>
              <div class="category-grid" id="categoryGrid"></div>
              <div class="quick-actions">
                <input type="text" id="noteInput" placeholder="备注...">
                <button id="saveRecordBtn" class="btn btn-primary">保存</button>
              </div>
            </div>
          </div>

          <!-- 图表 -->
          <div class="chart-section">
            <h3 class="section-title">支出分类</h3>
            <div class="chart-container"><canvas id="categoryChart"></canvas></div>
            <div id="categoryList" class="category-list"></div>
          </div>

          <!-- 账单列表（带管理） -->
          <div class="section-card bill-list-card">
            <div class="bill-list-header">
              <h3>账单明细</h3>
              <div class="bill-list-actions">
                <span id="billCount" class="bill-count"></span>
                <button id="batchModeBtn" class="btn btn-secondary btn-sm">批量管理</button>
              </div>
            </div>
            <div id="batchBar" class="batch-bar hidden">
              <label><input type="checkbox" id="selectAllCheck"> 全选</label>
              <button id="batchDeleteBtn" class="btn btn-primary btn-sm" disabled>删除选中(0)</button>
              <button id="cancelBatchBtn" class="btn btn-secondary btn-sm">取消</button>
            </div>
            <div id="billList" class="bill-list"></div>
          </div>
        </div>
      </div>
    </section>

    <!-- 统计分析页 -->
    <section id="page-stats" class="page">
      <div class="page-content">
        <h2 class="page-title">统计分析</h2>
        <div class="time-tabs">
          <button class="time-tab active" data-period="month">月度</button>
          <button class="time-tab" data-period="year">年度</button>
        </div>
        <div id="statsContent" class="stats-content">
          <p class="empty-hint">暂无数据，请先添加账单</p>
        </div>
      </div>
    </section>

    <!-- 数据管理页 -->
    <section id="page-data" class="page">
      <div class="page-content">
        <h2 class="page-title">数据管理</h2>
        <div class="section-card">
          <h3>账本目录</h3>
          <div id="directoryInfo" class="directory-info">
            <p class="directory-path">未选择目录</p>
            <button id="changeDirBtn" class="btn btn-secondary">选择目录</button>
          </div>
        </div>
        <div class="section-card">
          <h3>导入账单</h3>
          <div class="import-area" id="importArea">
            <div class="import-hint">
              <span class="import-icon">📂</span>
              <p>拖拽文件到此处，或点击选择</p>
              <p class="import-formats">支持 CSV / Excel / JSON 格式</p>
            </div>
            <input type="file" id="importFile" accept=".csv,.xlsx,.xls,.json" hidden>
          </div>
          <div id="importSource" class="import-source hidden">
            <label>来源识别：</label>
            <select id="sourceSelect">
              <option value="auto">自动识别</option>
              <option value="wechat">微信账单</option>
              <option value="alipay">支付宝账单</option>
              <option value="bank">银行流水</option>
              <option value="generic">通用格式</option>
            </select>
          </div>
        </div>
        <div class="section-card">
          <h3>导出数据</h3>
          <div class="export-buttons">
            <button id="exportMonthJson" class="btn btn-secondary">导出当月 JSON</button>
            <button id="exportMonthExcel" class="btn btn-secondary">导出当月 Excel</button>
            <button id="exportAllJson" class="btn btn-secondary">导出全部 JSON</button>
            <button id="exportAllExcel" class="btn btn-secondary">导出全部 Excel</button>
          </div>
        </div>
        <div class="section-card">
          <h3>月份文件</h3>
          <div id="monthFileList" class="month-file-list">
            <p class="empty-hint">暂无月份数据</p>
          </div>
        </div>
        <div class="section-card">
          <h3>设置</h3>
          <div class="settings-form">
            <div class="form-row"><label>家庭名称</label><input type="text" id="familyNameInput" placeholder="我的家庭"></div>
            <div class="form-row"><label>每月预算</label><input type="number" id="budgetInput" placeholder="8000" min="0"></div>
            <div class="form-row"><label>主题</label><select id="themeSelect"><option value="light">浅色</option><option value="dark">深色</option><option value="auto">跟随系统</option></select></div>
            <button id="saveSettingsBtn" class="btn btn-primary">保存设置</button>
          </div>
        </div>
        <div class="section-card">
          <h3>家庭成员</h3>
          <div id="memberList" class="member-list"></div>
          <button id="addMemberBtn" class="btn btn-secondary btn-block">+ 添加成员</button>
        </div>
      </div>
    </section>
  </main>

  <!-- 底部导航 -->
  <nav class="app-nav">
    <a href="#dashboard" class="nav-item active" data-page="dashboard"><span class="nav-icon">📊</span><span class="nav-label">首页</span></a>
    <a href="#stats" class="nav-item" data-page="stats"><span class="nav-icon">📈</span><span class="nav-label">统计</span></a>
    <a href="#data" class="nav-item" data-page="data"><span class="nav-icon">📁</span><span class="nav-label">数据</span></a>
  </nav>

  <!-- Toast 提示 -->
  <div id="toast" class="toast hidden"></div>
  <!-- 加载遮罩 -->
  <div id="loading" class="loading-overlay hidden"><div class="loading-spinner"></div></div>

  <script>
/* ========================================
   数据模型
   ======================================== */
const EXPENSE_CATEGORIES = {
  food:          { name: '餐饮', icon: '🍽️', color: '#f97316', children: { breakfast: '早餐', lunch: '午餐', dinner: '晚餐', snack: '外卖/小吃' } },
  shopping:      { name: '购物', icon: '🛒', color: '#8b5cf6', children: { grocery: '日用', clothes: '衣服', digital: '数码' } },
  entertainment: { name: '娱乐', icon: '🎮', color: '#ec4899', children: { movie: '电影', game: '游戏', travel: '旅行' } },
  housing:       { name: '居住', icon: '🏠', color: '#06b6d4', children: { rent: '房租', utility: '水电', property: '物业' } },
  transport:     { name: '交通', icon: '🚗', color: '#3b82f6', children: { subway: '公交/地铁', taxi: '打车', gas: '加油' } },
  education:     { name: '教育', icon: '📚', color: '#10b981', children: { training: '培训', books: '书籍' } },
  health:        { name: '医疗', icon: '💊', color: '#ef4444', children: { clinic: '门诊', medicine: '药品' } },
  communication: { name: '通讯', icon: '📱', color: '#6366f1', children: { phone: '话费', internet: '网络' } },
  social:        { name: '人情', icon: '🎁', color: '#f59e0b', children: { gift: '礼金', treat: '请客' } },
  other:         { name: '其他', icon: '📦', color: '#6b7280', children: {} }
};
const INCOME_CATEGORIES = {
  salary:     { name: '工资', icon: '💰', color: '#22c55e' },
  bonus:      { name: '奖金', icon: '🎉', color: '#10b981' },
  investment: { name: '理财', icon: '📈', color: '#3b82f6' },
  parttime:   { name: '兼职', icon: '💼', color: '#8b5cf6' },
  redpacket:  { name: '红包', icon: '🧧', color: '#ef4444' },
  other:      { name: '其他', icon: '📦', color: '#6b7280' }
};
const CHANNELS = {
  cash:        { name: '现金',   icon: '💵' },
  wechat_pay:  { name: '微信支付', icon: '💚' },
  alipay:      { name: '支付宝',   icon: '💙' },
  bank_card:   { name: '银行卡',   icon: '💳' },
  credit_card: { name: '信用卡',   icon: '💳' },
  other:       { name: '其他',     icon: '📌' }
};

function getCategoryInfo(category, subCategory, type) {
  type = type || 'expense';
  const categories = type === 'expense' ? EXPENSE_CATEGORIES : INCOME_CATEGORIES;
  const cat = categories[category];
  if (!cat) return { name: '未知', icon: '❓', color: '#6b7280' };
  if (subCategory && cat.children && cat.children[subCategory]) {
    return { name: cat.children[subCategory], icon: cat.icon, color: cat.color, parentName: cat.name };
  }
  return cat;
}
function getChannelInfo(channel) { return CHANNELS[channel] || { name: '其他', icon: '📌' }; }
function getCategoryList(type) {
  type = type || 'expense';
  const categories = type === 'expense' ? EXPENSE_CATEGORIES : INCOME_CATEGORIES;
  return Object.entries(categories).map(function(entry) {
    var key = entry[0], value = entry[1];
    return { id: key, name: value.name, icon: value.icon, color: value.color,
      children: value.children ? Object.entries(value.children).map(function(e) { return { id: e[0], name: e[1] }; }) : [] };
  });
}

/* ========================================
   工具函数
   ======================================== */
function formatAmount(amount, showSign) {
  var num = Math.abs(parseFloat(amount) || 0);
  var formatted = num.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  if (showSign && amount !== 0) return amount > 0 ? '+¥' + formatted : '-¥' + formatted;
  return '¥' + formatted;
}
function formatDate(date, fmt) { if (!date) return ''; return dayjs(date).format(fmt || 'YYYY-MM-DD'); }
function formatMonth(month) { if (!month) return ''; var p = month.split('-'); return p[0] + '年' + parseInt(p[1]) + '月'; }
function getCurrentMonth() { return dayjs().format('YYYY-MM'); }
function getMonthOptions(count) {
  var options = [], now = dayjs();
  for (var i = 0; i < (count || 24); i++) {
    var m = now.subtract(i, 'month');
    options.push({ value: m.format('YYYY-MM'), label: m.format('YYYY年M月') });
  }
  return options;
}
function showToast(message, duration) {
  var t = document.getElementById('toast');
  if (t) { t.textContent = message; t.classList.remove('hidden'); setTimeout(function() { t.classList.add('hidden'); }, duration || 2000); }
}
function showLoading() { var l = document.getElementById('loading'); if (l) l.classList.remove('hidden'); }
function hideLoading() { var l = document.getElementById('loading'); if (l) l.classList.add('hidden'); }
function downloadFile(content, filename, type) {
  var blob = new Blob([content], { type: type || 'application/json' });
  var url = URL.createObjectURL(blob);
  var a = document.createElement('a'); a.href = url; a.download = filename;
  document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url);
}
function getSystemTheme() { return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; }
function applyTheme(theme) {
  if (theme === 'auto') theme = getSystemTheme();
  document.documentElement.setAttribute('data-theme', theme);
  var btn = document.getElementById('themeToggle');
  if (btn) btn.textContent = theme === 'dark' ? '☀️' : '🌙';
}

/* ========================================
   核心存储层 (store)
   ======================================== */
var storeState = {
  directoryHandle: null, config: null, currentMonth: null,
  currentMonthData: null, months: [], isDirty: false
};
var DEFAULT_CONFIG = {
  version: '1.0', familyName: '我的家庭',
  members: [{ id: 'dad', name: '爸爸', avatar: '👨' }, { id: 'mom', name: '妈妈', avatar: '👩' }, { id: 'child', name: '孩子', avatar: '👧' }],
  defaultBudget: 8000, categoryBudgets: {}, theme: 'light', createdAt: new Date().toISOString()
};
var DEFAULT_MONTH_DATA = { version: '1.0', month: '', bills: [], summary: { totalIncome: 0, totalExpense: 0, balance: 0 } };

function storeIsSupported() { return 'showDirectoryPicker' in window; }

async function storeSelectDirectory() {
  if (!storeIsSupported()) throw new Error('您的浏览器不支持文件系统访问功能，请使用 Chrome 或 Edge 浏览器');
  try {
    var dirHandle = await window.showDirectoryPicker({ mode: 'readwrite', startIn: 'documents' });
    storeState.directoryHandle = dirHandle;
    await storeLoadConfig();
    await storeScanMonths();
    return dirHandle;
  } catch (error) {
    if (error.name === 'AbortError') throw new Error('已取消选择目录');
    throw error;
  }
}
async function storeLoadConfig() {
  if (!storeState.directoryHandle) throw new Error('请先选择账本目录');
  try {
    var fh = await storeState.directoryHandle.getFileHandle('config.json');
    var file = await fh.getFile();
    storeState.config = JSON.parse(await file.text());
  } catch (error) {
    if (error.name === 'NotFoundError') { storeState.config = Object.assign({}, DEFAULT_CONFIG); await storeSaveConfig(); } else throw error;
  }
  return storeState.config;
}
async function storeSaveConfig() {
  if (!storeState.directoryHandle) throw new Error('请先选择账本目录');
  var fh = await storeState.directoryHandle.getFileHandle('config.json', { create: true });
  var w = await fh.createWritable();
  await w.write(JSON.stringify(storeState.config, null, 2));
  await w.close();
}
function storeGetConfig() { return storeState.config || DEFAULT_CONFIG; }
async function storeUpdateConfig(updates) { Object.assign(storeState.config, updates); await storeSaveConfig(); return storeState.config; }

async function storeScanMonths() {
  if (!storeState.directoryHandle) throw new Error('请先选择账本目录');
  storeState.months = [];
  for await (var entry of storeState.directoryHandle.values()) {
    if (entry.kind === 'directory' && /^\d{4}$/.test(entry.name)) {
      for await (var file of entry.values()) {
        if (file.kind === 'file' && /^\d{4}-\d{2}\.json$/.test(file.name)) {
          storeState.months.push(file.name.replace('.json', ''));
        }
      }
    }
  }
  storeState.months.sort(function(a, b) { return b.localeCompare(a); });
  return storeState.months;
}
function storeGetMonths() { return storeState.months; }

async function storeLoadMonth(month) {
  if (!storeState.directoryHandle) throw new Error('请先选择账本目录');
  if (storeState.isDirty && storeState.currentMonthData) await storeSaveCurrentMonth();
  var year = month.split('-')[0];
  try {
    var yearDir = await storeState.directoryHandle.getDirectoryHandle(year);
    var fh = await yearDir.getFileHandle(month + '.json');
    var file = await fh.getFile();
    storeState.currentMonth = month;
    storeState.currentMonthData = JSON.parse(await file.text());
    storeState.isDirty = false;
  } catch (error) {
    if (error.name === 'NotFoundError') {
      storeState.currentMonth = month;
      storeState.currentMonthData = Object.assign({}, DEFAULT_MONTH_DATA, { month: month });
      storeState.isDirty = true;
    } else throw error;
  }
  return storeState.currentMonthData;
}
function storeGetCurrentMonthData() { return storeState.currentMonthData; }
function storeGetCurrentMonth() { return storeState.currentMonth; }

async function storeSaveCurrentMonth() {
  if (!storeState.directoryHandle || !storeState.currentMonth || !storeState.currentMonthData) return false;
  var year = storeState.currentMonth.split('-')[0];
  var yearDir = await storeState.directoryHandle.getDirectoryHandle(year, { create: true });
  var fh = await yearDir.getFileHandle(storeState.currentMonth + '.json', { create: true });
  var w = await fh.createWritable();
  recalculateSummary();
  await w.write(JSON.stringify(storeState.currentMonthData, null, 2));
  await w.close();
  storeState.isDirty = false;
  if (storeState.months.indexOf(storeState.currentMonth) === -1) {
    storeState.months.push(storeState.currentMonth);
    storeState.months.sort(function(a, b) { return b.localeCompare(a); });
  }
  return true;
}
function recalculateSummary() {
  if (!storeState.currentMonthData || !storeState.currentMonthData.bills) return;
  var ti = 0, te = 0;
  storeState.currentMonthData.bills.forEach(function(b) { if (b.type === 'income') ti += b.amount; else te += b.amount; });
  storeState.currentMonthData.summary = { totalIncome: ti, totalExpense: te, balance: ti - te };
}
function generateId() { return Date.now().toString(36) + Math.random().toString(36).substr(2, 9); }

function storeAddBill(bill) {
  if (!storeState.currentMonthData) throw new Error('请先加载月份数据');
  var newBill = Object.assign({ id: generateId() }, bill, { createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() });
  storeState.currentMonthData.bills.push(newBill);
  storeState.isDirty = true;
  recalculateSummary();
  return newBill;
}
function storeUpdateBill(billId, updates) {
  if (!storeState.currentMonthData) throw new Error('请先加载月份数据');
  var idx = storeState.currentMonthData.bills.findIndex(function(b) { return b.id === billId; });
  if (idx === -1) throw new Error('账单不存在');
  Object.assign(storeState.currentMonthData.bills[idx], updates, { updatedAt: new Date().toISOString() });
  storeState.isDirty = true;
  recalculateSummary();
  return storeState.currentMonthData.bills[idx];
}
function storeDeleteBill(billId) {
  if (!storeState.currentMonthData) throw new Error('请先加载月份数据');
  var idx = storeState.currentMonthData.bills.findIndex(function(b) { return b.id === billId; });
  if (idx === -1) throw new Error('账单不存在');
  storeState.currentMonthData.bills.splice(idx, 1);
  storeState.isDirty = true;
  recalculateSummary();
  return true;
}
function storeImportBills(bills, month) {
  if (month !== storeState.currentMonth) storeLoadMonth(month);
  var added = 0, skipped = 0;
  bills.forEach(function(bill) {
    var dup = storeState.currentMonthData.bills.some(function(e) {
      return e.date === bill.date && e.amount === bill.amount && e.type === bill.type && e.category === bill.category;
    });
    if (!dup) { storeAddBill(bill); added++; } else { skipped++; }
  });
  return { added: added, skipped: skipped };
}
function storeHasUnsavedChanges() { return storeState.isDirty; }
function storeGetDirectoryName() { return storeState.directoryHandle ? storeState.directoryHandle.name : null; }
function storeHasDirectory() { return storeState.directoryHandle !== null; }

async function storeExportMonthAsJson(month) {
  if (month === storeState.currentMonth && storeState.currentMonthData) return JSON.stringify(storeState.currentMonthData, null, 2);
  var year = month.split('-')[0];
  var yearDir = await storeState.directoryHandle.getDirectoryHandle(year);
  var fh = await yearDir.getFileHandle(month + '.json');
  var file = await fh.getFile();
  return await file.text();
}
async function storeExportAllAsJson() {
  var allData = { config: storeState.config, months: {} };
  for (var i = 0; i < storeState.months.length; i++) {
    var m = storeState.months[i];
    allData.months[m] = JSON.parse(await storeExportMonthAsJson(m));
  }
  return JSON.stringify(allData, null, 2);
}

/* ========================================
   仪表盘 (dashboard)
   ======================================== */
var categoryChart = null;

function initDashboard() {
  var canvas = document.getElementById('categoryChart');
  if (!canvas) return;
  categoryChart = new Chart(canvas.getContext('2d'), {
    type: 'doughnut',
    data: { labels: [], datasets: [{ data: [], backgroundColor: [], borderWidth: 0 }] },
    options: {
      responsive: true, maintainAspectRatio: false,
      plugins: { legend: { display: false }, tooltip: { callbacks: { label: function(ctx) {
        var v = ctx.raw || 0, t = ctx.dataset.data.reduce(function(a,b){return a+b;}, 0);
        return formatAmount(v) + ' (' + (t > 0 ? ((v/t)*100).toFixed(1) : 0) + '%)';
      }}}}, cutout: '60%'
    }
  });
}

function refreshDashboard() {
  var hint = document.getElementById('noDirectoryHint');
  var content = document.getElementById('dashboardContent');
  if (hint && content) {
    if (storeHasDirectory()) { hint.classList.add('hidden'); content.classList.remove('hidden'); }
    else { hint.classList.remove('hidden'); content.classList.add('hidden'); return; }
  }
  var data = storeGetCurrentMonthData();
  if (!data) return;
  var summary = data.summary || { totalIncome: 0, totalExpense: 0, balance: 0 };
  var config = storeGetConfig();
  var budget = config.defaultBudget || 0;
  document.getElementById('totalIncome').textContent = formatAmount(summary.totalIncome);
  document.getElementById('totalExpense').textContent = formatAmount(summary.totalExpense);

  // 结余计算修复：负数红色，正数绿色，零默认色
  var balance = summary.balance;
  var balanceEl = document.getElementById('totalBalance');
  balanceEl.textContent = (balance < 0 ? '-' : '') + formatAmount(Math.abs(balance));
  balanceEl.style.color = balance < 0 ? 'var(--color-expense)' : balance > 0 ? 'var(--color-income)' : 'var(--text-primary)';

  document.getElementById('budgetRemain').textContent = formatAmount(Math.max(0, budget - summary.totalExpense));

  // 分类图表
  if (categoryChart) {
    var bills = data.bills || [];
    var expenseBills = bills.filter(function(b) { return b.type === 'expense'; });
    var catTotals = {};
    expenseBills.forEach(function(b) { var c = b.category || 'other'; catTotals[c] = (catTotals[c] || 0) + b.amount; });
    var sorted = Object.entries(catTotals).sort(function(a,b){return b[1]-a[1];});
    var labels = [], values = [], colors = [];
    sorted.forEach(function(e) { var info = getCategoryInfo(e[0]); labels.push(info.name); values.push(e[1]); colors.push(info.color); });
    categoryChart.data.labels = labels;
    categoryChart.data.datasets[0].data = values;
    categoryChart.data.datasets[0].backgroundColor = colors;
    categoryChart.update();

    var total = values.reduce(function(a,b){return a+b;},0);
    var cl = document.getElementById('categoryList');
    if (cl) {
      if (sorted.length === 0) { cl.innerHTML = '<p class="empty-hint">暂无支出数据</p>'; }
      else { cl.innerHTML = sorted.map(function(e) {
        var info = getCategoryInfo(e[0]); var pct = total > 0 ? ((e[1]/total)*100).toFixed(1) : 0;
        return '<div class="category-item"><span class="category-dot" style="background-color:'+info.color+'"></span><span class="category-name">'+info.name+'</span><span class="category-amount">'+formatAmount(e[1])+'</span><span class="category-percent">'+pct+'%</span></div>';
      }).join(''); }
    }
  }

  // 账单列表（全部，按日期倒序，带管理功能）
  var container = document.getElementById('billList');
  var billCountEl = document.getElementById('billCount');
  if (!container) return;
  var allBills = data.bills || [];
  if (billCountEl) billCountEl.textContent = allBills.length > 0 ? ('共 ' + allBills.length + ' 条') : '';
  if (allBills.length === 0) { container.innerHTML = '<p class="empty-hint">暂无账单记录</p>'; return; }
  var sorted = allBills.slice().sort(function(a,b){ return (b.date+' '+(b.time||'00:00')).localeCompare(a.date+' '+(a.time||'00:00')); });
  container.innerHTML = sorted.map(function(bill) {
    var info = getCategoryInfo(bill.category, bill.subCategory, bill.type);
    var ch = getChannelInfo(bill.channel);
    var isExp = bill.type === 'expense';
    var batchClass = batchMode ? ' batch-mode' : '';
    var checkedAttr = selectedBillIds.has(bill.id) ? ' checked' : '';
    return '<div class="bill-item'+batchClass+'" data-id="'+bill.id+'">' +
      (batchMode ? '<input type="checkbox" class="bill-check" data-id="'+bill.id+'"'+checkedAttr+'>' : '') +
      '<div class="bill-icon">'+info.icon+'</div>' +
      '<div class="bill-info"><div class="bill-category">'+info.name+(bill.note?' · '+bill.note:'')+'</div><div class="bill-note">'+bill.date+' · '+ch.name+'</div></div>' +
      '<div class="bill-actions">' +
        '<button class="btn btn-secondary btn-sm edit-bill-btn" data-id="'+bill.id+'">编辑</button>' +
        '<button class="btn btn-secondary btn-sm delete-bill-btn" data-id="'+bill.id+'">删除</button>' +
      '</div>' +
      '<div class="bill-meta"><div class="bill-amount '+(isExp?'expense':'income')+'">'+(isExp?'-':'+')+formatAmount(bill.amount)+'</div></div>' +
    '</div>';
  }).join('');

  // 绑定编辑/删除按钮事件
  container.querySelectorAll('.edit-bill-btn').forEach(function(btn) {
    btn.addEventListener('click', function(e) { e.stopPropagation(); editBill(btn.dataset.id); });
  });
  container.querySelectorAll('.delete-bill-btn').forEach(function(btn) {
    btn.addEventListener('click', function(e) { e.stopPropagation(); deleteBillWithConfirm(btn.dataset.id); });
  });
  // 批量模式复选框事件
  if (batchMode) {
    container.querySelectorAll('.bill-check').forEach(function(cb) {
      cb.addEventListener('change', function() { toggleBillSelection(cb.dataset.id); });
    });
  }
}

/* ========================================
   快速记账 (quick-record)
   ======================================== */
var currentType = 'expense';
var selectedCategory = null;
var batchMode = false;
var selectedBillIds = new Set();

function initQuickRecord() {
  // 类型切换
  document.querySelectorAll('.type-tab').forEach(function(tab) {
    tab.addEventListener('click', function() {
      document.querySelectorAll('.type-tab').forEach(function(t) { t.classList.remove('active'); });
      tab.classList.add('active');
      currentType = tab.dataset.type;
      selectedCategory = null;
      renderCategoryGrid();
    });
  });
  renderCategoryGrid();
  renderMemberSelect();
  renderChannelSelect();
  document.getElementById('dateInput').value = formatDate(new Date());

  // 折叠/展开
  document.getElementById('quickRecordToggle').addEventListener('click', function() {
    toggleQuickRecordForm();
  });

  // 保存按钮
  document.getElementById('saveRecordBtn').addEventListener('click', saveRecord);

  // 批量管理
  document.getElementById('batchModeBtn').addEventListener('click', toggleBatchMode);
  document.getElementById('cancelBatchBtn').addEventListener('click', toggleBatchMode);
  document.getElementById('selectAllCheck').addEventListener('change', selectAllBills);
  document.getElementById('batchDeleteBtn').addEventListener('click', batchDeleteBills);
}

function toggleQuickRecordForm() {
  var form = document.getElementById('quickRecordForm');
  var arrow = document.getElementById('recordToggleArrow');
  if (form.classList.contains('hidden')) {
    form.classList.remove('hidden');
    arrow.classList.add('expanded');
  } else {
    form.classList.add('hidden');
    arrow.classList.remove('expanded');
  }
}

function expandQuickRecordForm() {
  var form = document.getElementById('quickRecordForm');
  var arrow = document.getElementById('recordToggleArrow');
  form.classList.remove('hidden');
  arrow.classList.add('expanded');
}

function collapseQuickRecordForm() {
  var form = document.getElementById('quickRecordForm');
  var arrow = document.getElementById('recordToggleArrow');
  form.classList.add('hidden');
  arrow.classList.remove('expanded');
}

function resetQuickRecordForm() {
  document.getElementById('amountInput').value = '';
  document.getElementById('noteInput').value = '';
  document.getElementById('dateInput').value = formatDate(new Date());
  currentType = 'expense';
  document.querySelectorAll('.type-tab').forEach(function(t) { t.classList.remove('active'); });
  var tab = document.querySelector('.type-tab[data-type="expense"]');
  if (tab) tab.classList.add('active');
  selectedCategory = null;
  renderCategoryGrid();
  renderMemberSelect();
  renderChannelSelect();
  document.getElementById('saveRecordBtn').textContent = '保存';
  appState.editingBillId = null;
}

function fillQuickRecordForm(bill) {
  currentType = bill.type;
  document.querySelectorAll('.type-tab').forEach(function(t) { t.classList.remove('active'); });
  var tab = document.querySelector('.type-tab[data-type="'+bill.type+'"]');
  if (tab) tab.classList.add('active');
  document.getElementById('amountInput').value = bill.amount;
  selectedCategory = bill.category;
  renderCategoryGrid();
  document.getElementById('memberSelect').value = bill.member;
  document.getElementById('channelSelect').value = bill.channel;
  document.getElementById('dateInput').value = bill.date;
  document.getElementById('noteInput').value = bill.note || '';
  document.getElementById('saveRecordBtn').textContent = '更新';
}

function renderCategoryGrid() {
  var grid = document.getElementById('categoryGrid');
  if (!grid) return;
  var cats = getCategoryList(currentType);
  grid.innerHTML = cats.map(function(c) {
    return '<button class="category-btn '+(selectedCategory===c.id?'active':'')+'" data-category="'+c.id+'"><span class="icon">'+c.icon+'</span><span class="name">'+c.name+'</span></button>';
  }).join('');
  grid.querySelectorAll('.category-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
      grid.querySelectorAll('.category-btn').forEach(function(b) { b.classList.remove('active'); });
      btn.classList.add('active');
      selectedCategory = btn.dataset.category;
    });
  });
}
function renderMemberSelect() {
  var sel = document.getElementById('memberSelect');
  if (!sel) return;
  var config = storeGetConfig();
  sel.innerHTML = (config.members || []).map(function(m) { return '<option value="'+m.id+'">'+m.avatar+' '+m.name+'</option>'; }).join('');
}
function renderChannelSelect() {
  var sel = document.getElementById('channelSelect');
  if (!sel) return;
  sel.innerHTML = Object.entries(CHANNELS).map(function(e) { return '<option value="'+e[0]+'">'+e[1].icon+' '+e[1].name+'</option>'; }).join('');
}

async function saveRecord() {
  var amount = parseFloat(document.getElementById('amountInput').value);
  if (!amount || amount <= 0) { showToast('请输入有效金额'); return; }
  if (!selectedCategory) { showToast('请选择分类'); return; }
  var member = document.getElementById('memberSelect').value;
  if (!member) { showToast('请选择成员'); return; }
  if (!storeHasDirectory()) { showToast('请先选择账本目录'); return; }
  var curMonth = storeGetCurrentMonth();
  if (!curMonth) { curMonth = getCurrentMonth(); await storeLoadMonth(curMonth); }
  var billData = {
    type: currentType, amount: amount, category: selectedCategory, subCategory: '',
    member: member, channel: document.getElementById('channelSelect').value,
    date: document.getElementById('dateInput').value, note: document.getElementById('noteInput').value,
    isPlan: false, planCategory: ''
  };
  try {
    if (appState.editingBillId) { storeUpdateBill(appState.editingBillId, billData); showToast('账单已更新'); }
    else { storeAddBill(billData); showToast('账单已添加'); }
    refreshDashboard(); refreshStats(); updateSaveButton();
    resetQuickRecordForm();
    collapseQuickRecordForm();
  } catch (error) { showToast('保存失败：' + error.message); }
}

/* 批量删除逻辑 */
function toggleBatchMode() {
  batchMode = !batchMode;
  selectedBillIds.clear();
  var batchBar = document.getElementById('batchBar');
  var batchBtn = document.getElementById('batchModeBtn');
  if (batchMode) {
    batchBar.classList.remove('hidden');
    batchBtn.textContent = '取消管理';
    batchBtn.classList.remove('btn-secondary');
    batchBtn.classList.add('btn-primary');
  } else {
    batchBar.classList.add('hidden');
    batchBtn.textContent = '批量管理';
    batchBtn.classList.remove('btn-primary');
    batchBtn.classList.add('btn-secondary');
  }
  updateBatchBar();
  refreshDashboard();
}

function toggleBillSelection(billId) {
  if (selectedBillIds.has(billId)) { selectedBillIds.delete(billId); }
  else { selectedBillIds.add(billId); }
  updateBatchBar();
}

function selectAllBills() {
  var allChecked = document.getElementById('selectAllCheck').checked;
  var data = storeGetCurrentMonthData();
  if (!data || !data.bills) return;
  selectedBillIds.clear();
  if (allChecked) {
    data.bills.forEach(function(b) { selectedBillIds.add(b.id); });
  }
  updateBatchBar();
  refreshDashboard();
}

function updateBatchBar() {
  var btn = document.getElementById('batchDeleteBtn');
  if (!btn) return;
  var count = selectedBillIds.size;
  btn.textContent = '删除选中(' + count + ')';
  btn.disabled = count === 0;
}

function batchDeleteBills() {
  if (selectedBillIds.size === 0) { showToast('请先选择要删除的账单'); return; }
  if (!confirm('确定要删除选中的 ' + selectedBillIds.size + ' 条账单吗？')) return;
  try {
    selectedBillIds.forEach(function(id) { storeDeleteBill(id); });
    showToast('已删除 ' + selectedBillIds.size + ' 条账单');
    selectedBillIds.clear();
    toggleBatchMode();
    refreshDashboard(); refreshStats(); updateSaveButton();
  } catch (error) { showToast('删除失败：' + error.message); }
}

/* ========================================
   统计页 (stats)
   ======================================== */
var currentPeriod = 'month';

function initStats() {
  document.querySelectorAll('.time-tab').forEach(function(tab) {
    tab.addEventListener('click', function() {
      document.querySelectorAll('.time-tab').forEach(function(t) { t.classList.remove('active'); });
      tab.classList.add('active');
      currentPeriod = tab.dataset.period;
      refreshStats();
    });
  });
}

function refreshStats() {
  var container = document.getElementById('statsContent');
  if (!container) return;
  if (!storeHasDirectory()) { container.innerHTML = '<p class="empty-hint">请先选择账本目录</p>'; return; }
  var data = storeGetCurrentMonthData();
  if (!data || !data.bills || data.bills.length === 0) { container.innerHTML = '<p class="empty-hint">暂无数据，请先添加账单</p>'; return; }
  if (currentPeriod === 'month') renderMonthStats(data, container);
  else renderYearStats(container);
}

function renderMonthStats(data, container) {
  var bills = data.bills || [];
  var expByCat = {}, byMember = {}, byChannel = {};
  bills.forEach(function(b) {
    if (b.type === 'expense') {
      expByCat[b.category] = (expByCat[b.category] || 0) + b.amount;
      byMember[b.member] = (byMember[b.member] || 0) + b.amount;
      byChannel[b.channel] = (byChannel[b.channel] || 0) + b.amount;
    }
  });
  var totalExpense = Object.values(expByCat).reduce(function(a,b){return a+b;},0);
  var config = storeGetConfig();
  var budget = config.defaultBudget || 8000;
  var pct = (totalExpense / budget * 100).toFixed(1);
  var statusClass = pct > 100 ? 'danger' : pct > 80 ? 'warning' : 'success';

  container.innerHTML =
    '<div class="stats-card"><h4 class="stats-card-title">支出分类</h4><div class="stats-list">' +
    Object.entries(expByCat).sort(function(a,b){return b[1]-a[1];}).map(function(e) {
      var info = getCategoryInfo(e[0]); var p = totalExpense > 0 ? (e[1]/totalExpense*100).toFixed(1) : 0;
      return '<div class="stats-item"><span class="stats-label">'+info.icon+' '+info.name+'</span><div class="stats-bar-container"><div class="stats-bar" style="width:'+p+'%;background-color:'+info.color+'"></div></div><span class="stats-value">'+formatAmount(e[1])+'</span></div>';
    }).join('') + '</div></div>' +
    '<div class="stats-card"><h4 class="stats-card-title">成员支出</h4><div class="stats-list">' +
    Object.entries(byMember).sort(function(a,b){return b[1]-a[1];}).map(function(e) {
      var mem = (config.members||[]).find(function(m){return m.id===e[0];}) || {name:e[0],avatar:'👤'};
      var p = totalExpense > 0 ? (e[1]/totalExpense*100).toFixed(1) : 0;
      return '<div class="stats-item"><span class="stats-label">'+mem.avatar+' '+mem.name+'</span><div class="stats-bar-container"><div class="stats-bar" style="width:'+p+'%;background-color:#4a90d9"></div></div><span class="stats-value">'+formatAmount(e[1])+'</span></div>';
    }).join('') + '</div></div>' +
    '<div class="stats-card"><h4 class="stats-card-title">支付渠道</h4><div class="stats-list">' +
    Object.entries(byChannel).sort(function(a,b){return b[1]-a[1];}).map(function(e) {
      var ch = getChannelInfo(e[0]); var p = totalExpense > 0 ? (e[1]/totalExpense*100).toFixed(1) : 0;
      return '<div class="stats-item"><span class="stats-label">'+ch.icon+' '+ch.name+'</span><div class="stats-bar-container"><div class="stats-bar" style="width:'+p+'%;background-color:#10b981"></div></div><span class="stats-value">'+formatAmount(e[1])+'</span></div>';
    }).join('') + '</div></div>' +
    '<div class="stats-card"><h4 class="stats-card-title">预算使用</h4><div class="budget-info"><div style="display:flex;justify-content:space-between;margin-bottom:8px"><span>已使用 '+formatAmount(totalExpense)+'</span><span>预算 '+formatAmount(budget)+'</span></div><div class="progress-bar"><div class="progress-fill '+statusClass+'" style="width:'+Math.min(100,pct)+'%"></div></div><div style="display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--text-muted)"><span>'+pct+'%</span><span>剩余 '+formatAmount(Math.max(0,budget-totalExpense))+'</span></div></div></div>';
}

function renderYearStats(container) {
  var currentData = storeGetCurrentMonthData();
  var ti = 0, te = 0;
  if (currentData) { ti = currentData.summary?.totalIncome || 0; te = currentData.summary?.totalExpense || 0; }
  container.innerHTML =
    '<div class="year-overview"><div class="overview-item"><div class="overview-label">年度收入</div><div class="overview-value income">'+formatAmount(ti)+'</div></div><div class="overview-item"><div class="overview-label">年度支出</div><div class="overview-value expense">'+formatAmount(te)+'</div></div><div class="overview-item"><div class="overview-label">年度结余</div><div class="overview-value">'+formatAmount(ti-te)+'</div></div></div>' +
    '<div class="stats-card"><h4 class="stats-card-title">年度概览</h4><p style="color:var(--text-muted);font-size:14px">完整年度统计需要加载所有月份数据，当前仅显示已加载数据的统计。</p></div>';
}

/* ========================================
   数据管理页 (import-export)
   ======================================== */
function initData() {
  var importArea = document.getElementById('importArea');
  var importFile = document.getElementById('importFile');
  if (importArea && importFile) {
    importArea.addEventListener('click', function() { importFile.click(); });
    importArea.addEventListener('dragover', function(e) { e.preventDefault(); importArea.classList.add('dragover'); });
    importArea.addEventListener('dragleave', function() { importArea.classList.remove('dragover'); });
    importArea.addEventListener('drop', function(e) { e.preventDefault(); importArea.classList.remove('dragover'); if (e.dataTransfer.files.length > 0) handleImport(e.dataTransfer.files[0]); });
    importFile.addEventListener('change', function(e) { if (e.target.files.length > 0) handleImport(e.target.files[0]); });
  }
  document.getElementById('exportMonthJson').addEventListener('click', exportMonthJson);
  document.getElementById('exportMonthExcel').addEventListener('click', exportMonthExcel);
  document.getElementById('exportAllJson').addEventListener('click', exportAllJson);
  document.getElementById('exportAllExcel').addEventListener('click', exportAllExcel);
  document.getElementById('saveSettingsBtn').addEventListener('click', saveSettings);
  document.getElementById('addMemberBtn').addEventListener('click', addMember);
}

function refreshData() {
  updateDirectoryInfo(); updateMonthFileList(); updateSettingsForm(); updateMemberList();
}
function updateDirectoryInfo() {
  var dirInfo = document.getElementById('directoryInfo');
  if (!dirInfo) return;
  var dirName = storeGetDirectoryName();
  var pathEl = dirInfo.querySelector('.directory-path');
  if (pathEl) pathEl.textContent = dirName ? '📁 ' + dirName : '未选择目录';
}
function updateMonthFileList() {
  var container = document.getElementById('monthFileList');
  if (!container) return;
  var months = storeGetMonths();
  if (months.length === 0) { container.innerHTML = '<p class="empty-hint">暂无月份数据</p>'; return; }
  container.innerHTML = months.map(function(m) {
    return '<div class="month-file-item"><div><div class="month-file-name">'+formatMonth(m)+'</div><div class="month-file-count">JSON 文件</div></div><div class="month-file-actions"><button class="btn btn-secondary" onclick="window._loadMonth(\''+m+'\')">加载</button></div></div>';
  }).join('');
}
window._loadMonth = async function(month) {
  try { showLoading(); await storeLoadMonth(month); hideLoading(); showToast('已加载 '+formatMonth(month));
    var sel = document.getElementById('monthSelector'); if (sel) sel.value = month;
    refreshDashboard(); refreshStats();
  } catch (error) { hideLoading(); showToast('加载失败：' + error.message); }
};
function updateSettingsForm() {
  var config = storeGetConfig();
  var fn = document.getElementById('familyNameInput'); if (fn) fn.value = config.familyName || '';
  var bi = document.getElementById('budgetInput'); if (bi) bi.value = config.defaultBudget || 8000;
  var ts = document.getElementById('themeSelect'); if (ts) ts.value = config.theme || 'light';
}
function updateMemberList() {
  var container = document.getElementById('memberList');
  if (!container) return;
  var config = storeGetConfig();
  var members = config.members || [];
  container.innerHTML = members.map(function(m, i) {
    return '<div class="member-item"><span class="member-avatar">'+m.avatar+'</span><span class="member-name">'+m.name+'</span><div class="member-actions"><button class="btn btn-secondary" onclick="window._editMember('+i+')">编辑</button><button class="btn btn-secondary" onclick="window._deleteMember('+i+')">删除</button></div></div>';
  }).join('');
}
window._editMember = function(i) {
  var members = storeGetConfig().members || [];
  var name = prompt('成员名称：', members[i].name);
  if (name && name !== members[i].name) { members[i].name = name; storeUpdateConfig({members:members}); updateMemberList(); showToast('成员已更新'); }
};
window._deleteMember = function(i) {
  if (!confirm('确定要删除该成员吗？')) return;
  var members = storeGetConfig().members || [];
  members.splice(i, 1); storeUpdateConfig({members:members}); updateMemberList(); showToast('成员已删除');
};
function addMember() {
  var name = prompt('请输入成员名称：'); if (!name) return;
  var config = storeGetConfig(); var members = config.members || [];
  var avatars = ['👨','👩','👧','👦','👴','👵','🧑','👤'];
  members.push({ id: 'member_' + Date.now(), name: name, avatar: avatars[members.length % avatars.length] });
  storeUpdateConfig({members:members}); updateMemberList(); showToast('成员已添加');
}
async function saveSettings() {
  try { await storeUpdateConfig({
    familyName: document.getElementById('familyNameInput').value,
    defaultBudget: parseFloat(document.getElementById('budgetInput').value),
    theme: document.getElementById('themeSelect').value
  }); showToast('设置已保存'); } catch (error) { showToast('保存失败：' + error.message); }
}

async function handleImport(file) {
  var ext = file.name.split('.').pop().toLowerCase();
  if (['csv','xlsx','xls','json'].indexOf(ext) === -1) { showToast('不支持的文件格式'); return; }
  try {
    showLoading(); var bills = [];
    if (ext === 'json') { var text = await file.text(); var data = JSON.parse(text);
      if (data.bills && Array.isArray(data.bills)) bills = data.bills;
      else if (Array.isArray(data)) bills = data;
      else if (data.months) { Object.values(data.months).forEach(function(m) { if (m.bills) bills = bills.concat(m.bills); }); }
    } else if (ext === 'csv') {
      var text = await file.text(); var lines = text.split('\n').filter(function(l){return l.trim();});
      for (var i = 1; i < lines.length; i++) {
        var cols = lines[i].split(',').map(function(c){return c.trim().replace(/^["']|["']$/g,'');});
        if (cols.length < 3) continue;
        var amt = parseFloat(cols.find(function(c){return /^[\d.]+$/.test(c);}) || 0);
        if (amt > 0) bills.push({ type:'expense', amount:amt, category:'other', date:cols[0]||new Date().toISOString().split('T')[0], note:cols.slice(2,4).join(' '), source:'import_csv' });
      }
    } else {
      var ab = await file.arrayBuffer(); var wb = XLSX.read(ab, {type:'array'});
      var ws = wb.Sheets[wb.SheetNames[0]]; var rows = XLSX.utils.sheet_to_json(ws);
      rows.forEach(function(row) {
        var amt = parseFloat(row['金额'] || row['金额(元)'] || row['amount'] || 0);
        if (amt > 0) bills.push({ type: (row['收/支']||row['类型']||'支出').includes('收') ? 'income' : 'expense', amount: amt, category:'other', date: String(row['日期']||row['交易时间']||row['date']||'').split(' ')[0], note: String(row['备注']||row['商品']||row['商品说明']||row['note']||''), source:'import_excel' });
      });
    }
    hideLoading();
    if (bills.length === 0) { showToast('未找到有效数据'); return; }
    var result = storeImportBills(bills, storeGetCurrentMonth());
    showToast('成功导入 ' + result.added + ' 条，跳过 ' + result.skipped + ' 条重复');
  } catch (error) { hideLoading(); showToast('导入失败：' + error.message); }
}

async function exportMonthJson() {
  if (!storeHasDirectory()) { showToast('请先选择账本目录'); return; }
  var month = storeGetCurrentMonth(); if (!month) { showToast('请先选择月份'); return; }
  try { downloadFile(await storeExportMonthAsJson(month), '记账_'+month+'.json'); showToast('导出成功'); }
  catch (error) { showToast('导出失败：' + error.message); }
}
function exportMonthExcel() {
  if (!storeHasDirectory()) { showToast('请先选择账本目录'); return; }
  var data = storeGetCurrentMonthData();
  if (!data || !data.bills || data.bills.length === 0) { showToast('暂无数据可导出'); return; }
  try {
    var rows = data.bills.map(function(b) { return { '日期':b.date, '类型':b.type==='expense'?'支出':'收入', '分类':getCategoryInfo(b.category,b.subCategory,b.type).name, '金额':b.amount, '成员':b.member, '渠道':getChannelInfo(b.channel).name, '备注':b.note||'' }; });
    var ws = XLSX.utils.json_to_sheet(rows); var wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, '账单'); XLSX.writeFile(wb, '记账_'+data.month+'.xlsx'); showToast('导出成功');
  } catch (error) { showToast('导出失败：' + error.message); }
}
async function exportAllJson() {
  if (!storeHasDirectory()) { showToast('请先选择账本目录'); return; }
  try { showLoading(); downloadFile(await storeExportAllAsJson(), '记账_全部导出_'+new Date().toISOString().split('T')[0]+'.json'); hideLoading(); showToast('导出成功'); }
  catch (error) { hideLoading(); showToast('导出失败：' + error.message); }
}
function exportAllExcel() { exportMonthExcel(); }

/* ========================================
   应用入口 (app)
   ======================================== */
var appState = { currentPage: 'dashboard', initialized: false, editingBillId: null };

function editBill(billId) {
  var data = storeGetCurrentMonthData(); if (!data) return;
  var bill = data.bills.find(function(b){return b.id===billId;});
  if (bill) {
    appState.editingBillId = billId;
    fillQuickRecordForm(bill);
    expandQuickRecordForm();
    // 滚动到快速记账表单
    var formCard = document.querySelector('.quick-record-card');
    if (formCard) formCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}
function deleteBillWithConfirm(billId) {
  if (!confirm('确定要删除这条账单吗？')) return;
  try { storeDeleteBill(billId); refreshDashboard(); refreshStats(); updateSaveButton(); showToast('账单已删除'); }
  catch (error) { showToast('删除失败：' + error.message); }
}

async function doSelectDirectory() {
  try {
    showLoading(); await storeSelectDirectory(); hideLoading();
    updateDirectoryUI();
    var curMonth = getCurrentMonth(); await storeLoadMonth(curMonth);
    refreshDashboard(); refreshStats(); refreshData(); updateMonthSelector(); updateSaveButton();
    showToast('账本目录已选择');
  } catch (error) { hideLoading(); if (error.name !== 'AbortError') showToast(error.message); }
}
function updateDirectoryUI() {
  var dirName = storeGetDirectoryName();
  var dirInfo = document.getElementById('directoryInfo');
  if (dirInfo && dirName) { var p = dirInfo.querySelector('.directory-path'); if (p) p.textContent = '📁 ' + dirName; }
}
function updateMonthSelector() {
  var sel = document.getElementById('monthSelector'); if (!sel) return;
  var months = storeGetMonths(); var curMonth = storeGetCurrentMonth();
  sel.innerHTML = '';
  getMonthOptions(36).forEach(function(opt) {
    var o = document.createElement('option'); o.value = opt.value; o.textContent = opt.label;
    if (opt.value === curMonth) o.selected = true; sel.appendChild(o);
  });
  if (curMonth && !getMonthOptions(36).find(function(o){return o.value===curMonth;})) {
    var o = document.createElement('option'); o.value = curMonth; o.textContent = formatMonth(curMonth); o.selected = true; sel.appendChild(o);
  }
}
function updateSaveButton() {
  var btn = document.getElementById('saveBtn');
  if (btn) btn.disabled = !storeHasDirectory() || !storeHasUnsavedChanges();
}
function handleRoute() { navigateTo(window.location.hash.slice(1) || 'dashboard', false); }
function navigateTo(page, updateHash) {
  document.querySelectorAll('.page').forEach(function(p) { p.classList.remove('active'); });
  var target = document.getElementById('page-' + page);
  if (target) target.classList.add('active');
  document.querySelectorAll('.nav-item').forEach(function(item) { item.classList.toggle('active', item.dataset.page === page); });
  if (updateHash !== false) window.location.hash = page;
  appState.currentPage = page;
}

async function init() {
  if (!storeIsSupported()) { showToast('您的浏览器不支持此应用，请使用 Chrome 或 Edge 浏览器'); return; }
  applyTheme(localStorage.getItem('theme') || 'light');
  initDashboard(); initQuickRecord(); initStats(); initData();

  document.getElementById('selectDirBtn').addEventListener('click', doSelectDirectory);
  document.getElementById('changeDirBtn').addEventListener('click', doSelectDirectory);
  document.getElementById('saveBtn').addEventListener('click', async function() {
    try { showLoading(); await storeSaveCurrentMonth(); hideLoading(); showToast('保存成功'); updateSaveButton(); }
    catch (error) { hideLoading(); showToast('保存失败：' + error.message); }
  });
  document.getElementById('themeToggle').addEventListener('click', function() {
    var cur = document.documentElement.getAttribute('data-theme') || 'light';
    var next = cur === 'light' ? 'dark' : 'light';
    applyTheme(next); localStorage.setItem('theme', next);
    if (storeHasDirectory()) storeUpdateConfig({ theme: next });
  });
  document.getElementById('monthSelector').addEventListener('change', async function(e) {
    var month = e.target.value; if (!month) return;
    try { showLoading(); await storeLoadMonth(month); hideLoading(); refreshDashboard(); refreshStats(); updateSaveButton(); }
    catch (error) { hideLoading(); showToast('加载失败：' + error.message); }
  });
  document.querySelectorAll('.nav-item').forEach(function(item) {
    item.addEventListener('click', function(e) { e.preventDefault(); navigateTo(item.dataset.page); });
  });
  document.querySelectorAll('[data-goto]').forEach(function(btn) {
    btn.addEventListener('click', function() { navigateTo(btn.dataset.goto); });
  });
  window.addEventListener('hashchange', handleRoute);
  handleRoute();
  window.addEventListener('beforeunload', function(e) {
    if (storeHasUnsavedChanges()) { e.preventDefault(); e.returnValue = ''; storeSaveCurrentMonth(); }
  });
  appState.initialized = true;
}

document.addEventListener('DOMContentLoaded', init);
  </script>
</body>
</html>