diff --git a/package-lock.json b/package-lock.json
index 88dbf1c..2a97bc5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,13 @@
       "name": "echo-app",
       "version": "0.0.0",
       "dependencies": {
+        "@capacitor-community/sqlite": "^5.7.2",
+        "@capacitor/core": "^5.7.8",
         "@phosphor-icons/web": "^2.1.2",
+        "jeep-sqlite": "^2.7.1",
+        "pinia": "^2.1.7",
+        "pinia-plugin-persistedstate": "^3.2.0",
+        "uuid": "^11.0.2",
         "vue": "^3.5.24",
         "vue-router": "^4.6.3"
       },
@@ -79,6 +85,472 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@capacitor-community/sqlite": {
+      "version": "5.7.4",
+      "resolved": "https://registry.npmmirror.com/@capacitor-community/sqlite/-/sqlite-5.7.4.tgz",
+      "integrity": "sha512-cpeMuHid+KBa7F6La5tKuiQOxRljrwHS/HYgQNDtyMq1qWwOCY4tbmYshAE7j9qd/PvIkKU5+bQbaCBdgdspBg==",
+      "license": "MIT",
+      "dependencies": {
+        "jeep-sqlite": "^2.7.2"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "peerDependencies": {
+        "@capacitor/core": "^5.0.0"
+      }
+    },
+    "node_modules/@capacitor/core": {
+      "version": "5.7.8",
+      "resolved": "https://registry.npmmirror.com/@capacitor/core/-/core-5.7.8.tgz",
+      "integrity": "sha512-rrZcm/2vJM0WdWRQup1TUidbjQV9PfIadSkV4rAGLD7R6PuzZSMPGT0gmoZzCRlXkqrazrWWDkurei3ozU02FA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -168,6 +640,279 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.53.3.tgz",
+      "integrity": "sha512-mRSi+4cBjrRLoaal2PnqH82Wqyb+d3HsPUN/W+WslCXsZsyHa9ZeQQX/pQsZaVIWDkPcpV6jJ+3KLbTbgnwv8w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.53.3.tgz",
+      "integrity": "sha512-CbDGaMpdE9sh7sCmTrTUyllhrg65t6SwhjlMJsLr+J8YjFuPmCEjbBSx4Z/e4SmDyH3aB5hGaJUP2ltV/vcs4w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.34.9",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz",
+      "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.34.9",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz",
+      "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.53.3.tgz",
+      "integrity": "sha512-yMTrCrK92aGyi7GuDNtGn2sNW+Gdb4vErx4t3Gv/Tr+1zRb8ax4z8GWVRfr3Jw8zJWvpGHNpss3vVlbF58DZ4w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.53.3.tgz",
+      "integrity": "sha512-lMfF8X7QhdQzseM6XaX0vbno2m3hlyZFhwcndRMw8fbAGUGL3WFMBdK0hbUBIUYcEcMhVLr1SIamDeuLBnXS+Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.53.3.tgz",
+      "integrity": "sha512-k9oD15soC/Ln6d2Wv/JOFPzZXIAIFLp6B+i14KhxAfnq76ajt0EhYc5YPeX6W1xJkAdItcVT+JhKl1QZh44/qw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.53.3.tgz",
+      "integrity": "sha512-vTNlKq+N6CK/8UktsrFuc+/7NlEYVxgaEgRXVUVK258Z5ymho29skzW1sutgYjqNnquGwVUObAaxae8rZ6YMhg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.34.9",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz",
+      "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.34.9",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz",
+      "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.53.3.tgz",
+      "integrity": "sha512-JiuKcp2teLJwQ7vkJ95EwESWkNRFJD7TQgYmCnrPtlu50b4XvT5MOmurWNrCj3IFdyjBQ5p9vnrX4JM6I8OE7g==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.53.3.tgz",
+      "integrity": "sha512-EoGSa8nd6d3T7zLuqdojxC20oBfNT8nexBbB/rkxgKj5T5vhpAQKKnD+h3UkoMuTyXkP5jTjK/ccNRmQrPNDuw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.53.3.tgz",
+      "integrity": "sha512-4s+Wped2IHXHPnAEbIB0YWBv7SDohqxobiiPA1FIWZpX+w9o2i4LezzH/NkFUl8LRci/8udci6cLq+jJQlh+0g==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.53.3.tgz",
+      "integrity": "sha512-68k2g7+0vs2u9CxDt5ktXTngsxOQkSEV/xBbwlqYcUrAVh6P9EgMZvFsnHy4SEiUl46Xf0IObWVbMvPrr2gw8A==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.53.3.tgz",
+      "integrity": "sha512-VYsFMpULAz87ZW6BVYw3I6sWesGpsP9OPcyKe8ofdg9LHxSbRMd7zrVrr5xi/3kMZtpWL/wC+UIJWJYVX5uTKg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.34.9",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz",
+      "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.34.9",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz",
+      "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.53.3.tgz",
+      "integrity": "sha512-OueLAWgrNSPGAdUdIjSWXw+u/02BRTcnfw9PN41D2vq/JSEPnJnVuBgw18VkN8wcd4fjUs+jFHVM4t9+kBSNLw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.34.9",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz",
+      "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.53.3.tgz",
+      "integrity": "sha512-iah+THLcBJdpfZ1TstDFbKNznlzoxa8fmnFYK4V67HvmuNYkVdAywJSoteUszvBQ9/HqN2+9AZghbajMsFT+oA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@rollup/rollup-win32-x64-gnu": {
       "version": "4.53.3",
       "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.53.3.tgz",
@@ -182,6 +927,42 @@
         "win32"
       ]
     },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.34.9",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz",
+      "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@stencil/core": {
+      "version": "4.38.3",
+      "resolved": "https://registry.npmmirror.com/@stencil/core/-/core-4.38.3.tgz",
+      "integrity": "sha512-rSDzGUfi58X8K79ySjlM6KlY+mq7D+ittzgNAdYHcsXHc70sBpdatFhnbOg25uVDiMf7xRAH9slP38pPdXnZOQ==",
+      "license": "MIT",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=7.10.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-darwin-arm64": "4.34.9",
+        "@rollup/rollup-darwin-x64": "4.34.9",
+        "@rollup/rollup-linux-arm64-gnu": "4.34.9",
+        "@rollup/rollup-linux-arm64-musl": "4.34.9",
+        "@rollup/rollup-linux-x64-gnu": "4.34.9",
+        "@rollup/rollup-linux-x64-musl": "4.34.9",
+        "@rollup/rollup-win32-arm64-msvc": "4.34.9",
+        "@rollup/rollup-win32-x64-msvc": "4.34.9"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.8.tgz",
@@ -207,81 +988,53 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.5.24",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.5.24.tgz",
-      "integrity": "sha512-eDl5H57AOpNakGNAkFDH+y7kTqrQpJkZFXhWZQGyx/5Wh7B1uQYvcWkvZi11BDhscPgj8N7XV3oRwiPnx1Vrig==",
+      "version": "3.5.25",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.5.25.tgz",
+      "integrity": "sha512-vay5/oQJdsNHmliWoZfHPoVZZRmnSWhug0BYT34njkYTPqClh3DNWLkZNJBVSjsNMrg0CCrBfoKkjZQPM/QVUw==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.28.5",
-        "@vue/shared": "3.5.24",
+        "@vue/shared": "3.5.25",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.1"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.5.24",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.5.24.tgz",
-      "integrity": "sha512-1QHGAvs53gXkWdd3ZMGYuvQFXHW4ksKWPG8HP8/2BscrbZ0brw183q2oNWjMrSWImYLHxHrx1ItBQr50I/q2zw==",
+      "version": "3.5.25",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.5.25.tgz",
+      "integrity": "sha512-4We0OAcMZsKgYoGlMjzYvaoErltdFI2/25wqanuTu+S4gismOTRTBPi4IASOjxWdzIwrYSjnqONfKvuqkXzE2Q==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.5.24",
-        "@vue/shared": "3.5.24"
+        "@vue/compiler-core": "3.5.25",
+        "@vue/shared": "3.5.25"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.5.24",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.5.24.tgz",
-      "integrity": "sha512-8EG5YPRgmTB+YxYBM3VXy8zHD9SWHUJLIGPhDovo3Z8VOgvP+O7UP5vl0J4BBPWYD9vxtBabzW1EuEZ+Cqs14g==",
+      "version": "3.5.25",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.5.25.tgz",
+      "integrity": "sha512-PUgKp2rn8fFsI++lF2sO7gwO2d9Yj57Utr5yEsDf3GNaQcowCLKL7sf+LvVFvtJDXUp/03+dC6f2+LCv5aK1ag==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.28.5",
-        "@vue/compiler-core": "3.5.24",
-        "@vue/compiler-dom": "3.5.24",
-        "@vue/compiler-ssr": "3.5.24",
-        "@vue/shared": "3.5.24",
+        "@vue/compiler-core": "3.5.25",
+        "@vue/compiler-dom": "3.5.25",
+        "@vue/compiler-ssr": "3.5.25",
+        "@vue/shared": "3.5.25",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.21",
         "postcss": "^8.5.6",
         "source-map-js": "^1.2.1"
       }
     },
-    "node_modules/@vue/compiler-sfc/node_modules/postcss": {
-      "version": "8.5.6",
-      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.6.tgz",
-      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "nanoid": "^3.3.11",
-        "picocolors": "^1.1.1",
-        "source-map-js": "^1.2.1"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.5.24",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.5.24.tgz",
-      "integrity": "sha512-trOvMWNBMQ/odMRHW7Ae1CdfYx+7MuiQu62Jtu36gMLXcaoqKvAyh+P73sYG9ll+6jLB6QPovqoKGGZROzkFFg==",
+      "version": "3.5.25",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.5.25.tgz",
+      "integrity": "sha512-ritPSKLBcParnsKYi+GNtbdbrIE1mtuFEJ4U1sWeuOMlIziK5GtOL85t5RhsNy4uWIXPgk+OUdpnXiTdzn8o3A==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.24",
-        "@vue/shared": "3.5.24"
+        "@vue/compiler-dom": "3.5.25",
+        "@vue/shared": "3.5.25"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -291,53 +1044,53 @@
       "license": "MIT"
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.5.24",
-      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.5.24.tgz",
-      "integrity": "sha512-BM8kBhtlkkbnyl4q+HiF5R5BL0ycDPfihowulm02q3WYp2vxgPcJuZO866qa/0u3idbMntKEtVNuAUp5bw4teg==",
+      "version": "3.5.25",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.5.25.tgz",
+      "integrity": "sha512-5xfAypCQepv4Jog1U4zn8cZIcbKKFka3AgWHEFQeK65OW+Ys4XybP6z2kKgws4YB43KGpqp5D/K3go2UPPunLA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.5.24"
+        "@vue/shared": "3.5.25"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.5.24",
-      "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.5.24.tgz",
-      "integrity": "sha512-RYP/byyKDgNIqfX/gNb2PB55dJmM97jc9wyF3jK7QUInYKypK2exmZMNwnjueWwGceEkP6NChd3D2ZVEp9undQ==",
+      "version": "3.5.25",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.5.25.tgz",
+      "integrity": "sha512-Z751v203YWwYzy460bzsYQISDfPjHTl+6Zzwo/a3CsAf+0ccEjQ8c+0CdX1WsumRTHeywvyUFtW6KvNukT/smA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.24",
-        "@vue/shared": "3.5.24"
+        "@vue/reactivity": "3.5.25",
+        "@vue/shared": "3.5.25"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.5.24",
-      "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.5.24.tgz",
-      "integrity": "sha512-Z8ANhr/i0XIluonHVjbUkjvn+CyrxbXRIxR7wn7+X7xlcb7dJsfITZbkVOeJZdP8VZwfrWRsWdShH6pngMxRjw==",
+      "version": "3.5.25",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.5.25.tgz",
+      "integrity": "sha512-a4WrkYFbb19i9pjkz38zJBg8wa/rboNERq3+hRRb0dHiJh13c+6kAbgqCPfMaJ2gg4weWD3APZswASOfmKwamA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.24",
-        "@vue/runtime-core": "3.5.24",
-        "@vue/shared": "3.5.24",
+        "@vue/reactivity": "3.5.25",
+        "@vue/runtime-core": "3.5.25",
+        "@vue/shared": "3.5.25",
         "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.5.24",
-      "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.5.24.tgz",
-      "integrity": "sha512-Yh2j2Y4G/0/4z/xJ1Bad4mxaAk++C2v4kaa8oSYTMJBJ00/ndPuxCnWeot0/7/qafQFLh5pr6xeV6SdMcE/G1w==",
+      "version": "3.5.25",
+      "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.5.25.tgz",
+      "integrity": "sha512-UJaXR54vMG61i8XNIzTSf2Q7MOqZHpp8+x3XLGtE3+fL+nQd+k7O5+X3D/uWrnQXOdMw5VPih+Uremcw+u1woQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.5.24",
-        "@vue/shared": "3.5.24"
+        "@vue/compiler-ssr": "3.5.25",
+        "@vue/shared": "3.5.25"
       },
       "peerDependencies": {
-        "vue": "3.5.24"
+        "vue": "3.5.25"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.5.24",
-      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.5.24.tgz",
-      "integrity": "sha512-9cwHL2EsJBdi8NY22pngYYWzkTDhld6fAD6jlaeloNGciNSJL6bLpbxVgXl96X00Jtc6YWQv96YA/0sxex/k1A==",
+      "version": "3.5.25",
+      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.5.25.tgz",
+      "integrity": "sha512-AbOPdQQnAnzs58H2FrrDxYj/TJfmeS2jdfEEhgiKINy+bnOANmVizIEgq1r+C5zsbs6l1CCQxtcj71rwNQ4jWg==",
       "license": "MIT"
     },
     "node_modules/any-promise": {
@@ -361,19 +1114,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/anymatch/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmmirror.com/arg/-/arg-5.0.2.tgz",
@@ -382,9 +1122,9 @@
       "license": "MIT"
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.17",
-      "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.17.tgz",
-      "integrity": "sha512-/cpVNRLSfhOtcGflT13P2794gVSgmPgTR+erw5ifnMLZb0UnSlkK4tquLmkd3BhA+nLo5tX8Cu0upUsGKvKbmg==",
+      "version": "10.4.22",
+      "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.22.tgz",
+      "integrity": "sha512-ARe0v/t9gO28Bznv6GgqARmVqcWOV3mfgUPn9becPHMiD3o9BwlRgaeccZnwTpZ7Zwqrm+c1sUSsMxIzQzc8Xg==",
       "dev": true,
       "funding": [
         {
@@ -402,11 +1142,11 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.22.2",
-        "caniuse-lite": "^1.0.30001578",
-        "fraction.js": "^4.3.7",
+        "browserslist": "^4.27.0",
+        "caniuse-lite": "^1.0.30001754",
+        "fraction.js": "^5.3.4",
         "normalize-range": "^0.1.2",
-        "picocolors": "^1.0.0",
+        "picocolors": "^1.1.1",
         "postcss-value-parser": "^4.2.0"
       },
       "bin": {
@@ -455,6 +1195,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/browser-fs-access": {
+      "version": "0.35.0",
+      "resolved": "https://registry.npmmirror.com/browser-fs-access/-/browser-fs-access-0.35.0.tgz",
+      "integrity": "sha512-sLoadumpRfsjprP8XzVjpQc0jK8yqHBx0PtUTGYj2fftT+P/t+uyDAQdMgGAPKD011in/O+YYGh7fIs0oG/viw==",
+      "license": "Apache-2.0"
+    },
     "node_modules/browserslist": {
       "version": "4.28.0",
       "resolved": "https://registry.npmmirror.com/browserslist/-/browserslist-4.28.0.tgz",
@@ -500,9 +1246,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001756",
-      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001756.tgz",
-      "integrity": "sha512-4HnCNKbMLkLdhJz3TToeVWHSnfJvPaq6vu/eRP0Ahub/07n484XHhBF5AJoSGHdVrS8tKFauUQz8Bp9P7LVx7A==",
+      "version": "1.0.30001757",
+      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001757.tgz",
+      "integrity": "sha512-r0nnL/I28Zi/yjk1el6ilj27tKcdjLsNqAOZr0yVjWPrSQyHgKI2INaEWw21bAQSv2LXRt1XuCS/GomNpWOxsQ==",
       "dev": true,
       "funding": [
         {
@@ -568,6 +1314,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz",
@@ -602,9 +1354,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.259",
-      "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.259.tgz",
-      "integrity": "sha512-I+oLXgpEJzD6Cwuwt1gYjxsDmu/S/Kd41mmLA3O+/uH2pFRO/DvOjUyGozL8j3KeLV6WyZ7ssPwELMsXCcsJAQ==",
+      "version": "1.5.260",
+      "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.260.tgz",
+      "integrity": "sha512-ov8rBoOBhVawpzdre+Cmz4FB+y66Eqrk6Gwqd8NGxuhv99GQ8XqMAr351KEkOt7gukXWDg6gJWEMKgL2RLMPtA==",
       "dev": true,
       "license": "ISC"
     },
@@ -662,23 +1414,6 @@
         "@esbuild/win32-x64": "0.25.12"
       }
     },
-    "node_modules/esbuild/node_modules/@esbuild/win32-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
-      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.2.0.tgz",
@@ -735,24 +1470,6 @@
         "reusify": "^1.0.4"
       }
     },
-    "node_modules/fdir": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmmirror.com/fdir/-/fdir-6.5.0.tgz",
-      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "peerDependencies": {
-        "picomatch": "^3 || ^4"
-      },
-      "peerDependenciesMeta": {
-        "picomatch": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.1.1.tgz",
@@ -767,16 +1484,16 @@
       }
     },
     "node_modules/fraction.js": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmmirror.com/fraction.js/-/fraction.js-4.3.7.tgz",
-      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmmirror.com/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": "*"
       },
       "funding": {
-        "type": "patreon",
+        "type": "github",
         "url": "https://github.com/sponsors/rawify"
       }
     },
@@ -831,6 +1548,18 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -893,6 +1622,25 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
+    "node_modules/jeep-sqlite": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmmirror.com/jeep-sqlite/-/jeep-sqlite-2.8.0.tgz",
+      "integrity": "sha512-FWNUP6OAmrUHwiW7H1xH5YUQ8tN2O4l4psT1sLd7DQtHd5PfrA1nvNdeKPNj+wQBtu7elJa8WoUibTytNTaaCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@stencil/core": "^4.20.0",
+        "browser-fs-access": "^0.35.0",
+        "jszip": "^3.10.1",
+        "localforage": "^1.10.0",
+        "sql.js": "^1.11.0"
+      }
+    },
     "node_modules/jiti": {
       "version": "1.21.7",
       "resolved": "https://registry.npmmirror.com/jiti/-/jiti-1.21.7.tgz",
@@ -903,14 +1651,38 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmmirror.com/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lilconfig": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz",
-      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
       }
     },
     "node_modules/lines-and-columns": {
@@ -920,6 +1692,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/localforage": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmmirror.com/localforage/-/localforage-1.10.0.tgz",
+      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "lie": "3.1.1"
+      }
+    },
+    "node_modules/localforage/node_modules/lie": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/lie/-/lie-3.1.1.tgz",
+      "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.21.tgz",
@@ -953,19 +1743,6 @@
         "node": ">=8.6"
       }
     },
-    "node_modules/micromatch/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmmirror.com/mz/-/mz-2.7.0.tgz",
@@ -1043,6 +1820,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmmirror.com/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz",
@@ -1057,13 +1840,13 @@
       "license": "ISC"
     },
     "node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=12"
+        "node": ">=8.6"
       },
       "funding": {
         "url": "https://github.com/sponsors/jonschlinkert"
@@ -1079,6 +1862,37 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.3.1.tgz",
+      "integrity": "sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.4.4",
+        "vue": "^2.7.0 || ^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia-plugin-persistedstate": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmmirror.com/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.3.tgz",
+      "integrity": "sha512-Cm819WBj/s5K5DGw55EwbXDtx+EZzM0YR5AZbq9XE3u0xvXwvX2JnWoFpWIcdzISBHqy9H1UiSIUmXyXqWsQRQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "pinia": "^2.0.0"
+      }
+    },
     "node_modules/pirates": {
       "version": "4.0.7",
       "resolved": "https://registry.npmmirror.com/pirates/-/pirates-4.0.7.tgz",
@@ -1090,10 +1904,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.35",
-      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.35.tgz",
-      "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
-      "dev": true,
+      "version": "8.5.6",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "funding": [
         {
           "type": "opencollective",
@@ -1110,9 +1923,9 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -1163,9 +1976,9 @@
       }
     },
     "node_modules/postcss-load-config": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmmirror.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
-      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
       "dev": true,
       "funding": [
         {
@@ -1179,38 +1992,32 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "lilconfig": "^3.0.0",
-        "yaml": "^2.3.4"
+        "lilconfig": "^3.1.1"
       },
       "engines": {
-        "node": ">= 14"
+        "node": ">= 18"
       },
       "peerDependencies": {
+        "jiti": ">=1.21.0",
         "postcss": ">=8.0.9",
-        "ts-node": ">=9.0.0"
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
       },
       "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
         "postcss": {
           "optional": true
         },
-        "ts-node": {
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
           "optional": true
         }
       }
     },
-    "node_modules/postcss-load-config/node_modules/lilconfig": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antonk52"
-      }
-    },
     "node_modules/postcss-nested": {
       "version": "6.2.0",
       "resolved": "https://registry.npmmirror.com/postcss-nested/-/postcss-nested-6.2.0.tgz",
@@ -1258,6 +2065,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -1289,6 +2102,21 @@
         "pify": "^2.3.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
@@ -1302,19 +2130,6 @@
         "node": ">=8.10.0"
       }
     },
-    "node_modules/readdirp/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.11.tgz",
@@ -1389,6 +2204,104 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rollup/node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.53.3.tgz",
+      "integrity": "sha512-Nr7SlQeqIBpOV6BHHGZgYBuSdanCXuw09hon14MGOLGmXAFYjx1wNvquVPmpZnl0tLjg25dEdr4IQ6GgyToCUA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/rollup/node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.53.3.tgz",
+      "integrity": "sha512-DZ8N4CSNfl965CmPktJ8oBnfYr3F8dTTNBQkRlffnUarJ2ohudQD17sZBa097J8xhQ26AwhHJ5mvUyQW8ddTsQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/rollup/node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.53.3.tgz",
+      "integrity": "sha512-RGrFLWgMhSxRs/EWJMIFM1O5Mzuz3Xy3/mnxJp/5cVhZ2XoCAxJnmNsEyeMJtpK+wu0FJFWz+QF4mjCA7AUQ3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/rollup/node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.53.3.tgz",
+      "integrity": "sha512-kASyvfBEWYPEwe0Qv4nfu6pNkITLTb32p4yTgzFCocHnJLAHs+9LjUu9ONIhvfT/5lv4YS5muBHyuV84epBo/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.53.3.tgz",
+      "integrity": "sha512-3EhFi1FU6YL8HTUJZ51imGJWEX//ajQPfqWLI3BQq4TlvHy4X0MOr5q3D2Zof/ka0d5FNdPwZXm3Yyib/UEd+w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.53.3.tgz",
+      "integrity": "sha512-eoROhjcc6HbZCJr+tvVT8X4fW3/5g/WkGvvmwz/88sDtSJzO7r/blvoBDgISDiCjDRZmHpwud7h+6Q9JxFwq1Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/rollup/node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.53.3.tgz",
+      "integrity": "sha512-GOFuKpsxR/whszbF/bzydebLiXIHSgsEUp6M0JI8dWvi+fFa1TD6YQa4aSZHtpmh2/uAlj/Dy+nmby3TJ3pkTw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/rollup/node_modules/@rollup/rollup-win32-x64-msvc": {
       "version": "4.53.3",
       "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.53.3.tgz",
@@ -1427,6 +2340,18 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1436,6 +2361,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sql.js": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmmirror.com/sql.js/-/sql.js-1.13.0.tgz",
+      "integrity": "sha512-RJbVP1HRDlUUXahJ7VMTcu9Rm1Nzw+EBpoPr94vnbD4LwR715F3CcxE2G2k45PewcaZ57pjetYa+LoSJLAASgA==",
+      "license": "MIT"
+    },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/sucrase": {
       "version": "3.35.1",
       "resolved": "https://registry.npmmirror.com/sucrase/-/sucrase-3.35.1.tgz",
@@ -1473,34 +2413,34 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-3.4.1.tgz",
-      "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==",
+      "version": "3.4.18",
+      "resolved": "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-3.4.18.tgz",
+      "integrity": "sha512-6A2rnmW5xZMdw11LYjhcI5846rt9pbLSabY5XPxo+XWdxwZaFEn47Go4NzFiHu9sNNmr/kXivP1vStfvMaK1GQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
-        "chokidar": "^3.5.3",
+        "chokidar": "^3.6.0",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
-        "fast-glob": "^3.3.0",
+        "fast-glob": "^3.3.2",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "jiti": "^1.19.1",
-        "lilconfig": "^2.1.0",
-        "micromatch": "^4.0.5",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
-        "picocolors": "^1.0.0",
-        "postcss": "^8.4.23",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
         "postcss-import": "^15.1.0",
         "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.1",
-        "postcss-nested": "^6.0.1",
-        "postcss-selector-parser": "^6.0.11",
-        "resolve": "^1.22.2",
-        "sucrase": "^3.32.0"
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
       },
       "bin": {
         "tailwind": "lib/cli.js",
@@ -1550,6 +2490,37 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmmirror.com/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -1570,6 +2541,12 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.4",
       "resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.1.4.tgz",
@@ -1605,9 +2582,21 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/uuid": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmmirror.com/uuid/-/uuid-11.1.0.tgz",
+      "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/esm/bin/uuid"
+      }
+    },
     "node_modules/vite": {
       "version": "7.2.4",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-7.2.4.tgz",
@@ -1683,46 +2672,48 @@
         }
       }
     },
-    "node_modules/vite/node_modules/postcss": {
-      "version": "8.5.6",
-      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.6.tgz",
-      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+    "node_modules/vite/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmmirror.com/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
       "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
       "license": "MIT",
-      "dependencies": {
-        "nanoid": "^3.3.11",
-        "picocolors": "^1.1.1",
-        "source-map-js": "^1.2.1"
-      },
       "engines": {
-        "node": "^10 || ^12 || >=14"
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
     "node_modules/vue": {
-      "version": "3.5.24",
-      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.5.24.tgz",
-      "integrity": "sha512-uTHDOpVQTMjcGgrqFPSb8iO2m1DUvo+WbGqoXQz8Y1CeBYQ0FXf2z1gLRaBtHjlRz7zZUBHxjVB5VTLzYkvftg==",
+      "version": "3.5.25",
+      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.5.25.tgz",
+      "integrity": "sha512-YLVdgv2K13WJ6n+kD5owehKtEXwdwXuj2TTyJMsO7pSeKw2bfRNZGjhB7YzrpbMYj5b5QsUebHpOqR3R3ziy/g==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.24",
-        "@vue/compiler-sfc": "3.5.24",
-        "@vue/runtime-dom": "3.5.24",
-        "@vue/server-renderer": "3.5.24",
-        "@vue/shared": "3.5.24"
+        "@vue/compiler-dom": "3.5.25",
+        "@vue/compiler-sfc": "3.5.25",
+        "@vue/runtime-dom": "3.5.25",
+        "@vue/server-renderer": "3.5.25",
+        "@vue/shared": "3.5.25"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -1733,6 +2724,32 @@
         }
       }
     },
+    "node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.6.3",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.6.3.tgz",
@@ -1747,19 +2764,6 @@
       "peerDependencies": {
         "vue": "^3.5.0"
       }
-    },
-    "node_modules/yaml": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmmirror.com/yaml/-/yaml-2.8.1.tgz",
-      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      }
     }
   }
 }
diff --git a/package.json b/package.json
index 657ee69..8083242 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@capacitor-community/sqlite": "^5.7.2",
+    "@capacitor/core": "^5.7.8",
     "@phosphor-icons/web": "^2.1.2",
+    "jeep-sqlite": "^2.7.1",
+    "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.0",
+    "uuid": "^11.0.2",
     "vue": "^3.5.24",
     "vue-router": "^4.6.3"
   },
diff --git a/src/App.vue b/src/App.vue
index 73a8b35..0a9dca8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,14 @@
 <script setup>
+import { onMounted } from 'vue'
 import { RouterView } from 'vue-router'
 import BottomDock from './components/BottomDock.vue'
+import { useTransactionStore } from './stores/transactions'
+
+const transactionStore = useTransactionStore()
+
+onMounted(() => {
+  transactionStore.ensureInitialized()
+})
 </script>
 
 <template>
diff --git a/src/composables/useTransactionEntry.js b/src/composables/useTransactionEntry.js
new file mode 100644
index 0000000..8c90219
--- /dev/null
+++ b/src/composables/useTransactionEntry.js
@@ -0,0 +1,124 @@
+import { ref } from 'vue'
+import { v4 as uuidv4 } from 'uuid'
+import { useTransactionStore } from '../stores/transactions'
+
+const CATEGORY_HINTS = [
+  { keywords: ['咖啡', '奶茶', '星巴克', 'luckin', 'coffee', 'familymart', '7-eleven'], category: 'Food' },
+  { keywords: ['健身', 'gym', '运动', '瑜伽'], category: 'Health' },
+  { keywords: ['滴滴', '打车', '出租', '地铁', '出行'], category: 'Transport' },
+  { keywords: ['超市', '盒马', 'sam', '山姆'], category: 'Groceries' },
+  { keywords: ['工资', 'salary', 'bonus', '收入'], category: 'Income' },
+]
+
+const inferCategory = (merchant) => {
+  const lower = merchant.toLowerCase()
+  const matched = CATEGORY_HINTS.find((hint) => hint.keywords.some((key) => lower.includes(key)))
+  if (matched) return matched.category
+  return 'Uncategorized'
+}
+
+const seedNotifications = () => [
+  {
+    id: uuidv4(),
+    channel: '支付宝',
+    text: '支付宝提醒：你向 瑞幸咖啡 支付 ¥18.00',
+    createdAt: new Date().toISOString(),
+  },
+  {
+    id: uuidv4(),
+    channel: '微信支付',
+    text: '微信支付：美团外卖 实付 ¥46.50 · 订单已送达',
+    createdAt: new Date(Date.now() - 1000 * 60 * 8).toISOString(),
+  },
+  {
+    id: uuidv4(),
+    channel: '支付宝',
+    text: '支付宝到账：工资收入 ¥12500.00，来自 Echo Studio',
+    createdAt: new Date(Date.now() - 1000 * 60 * 32).toISOString(),
+  },
+]
+
+const notifications = ref([])
+const processingId = ref('')
+let seeded = false
+
+const ensureSeeded = () => {
+  if (!seeded) {
+    notifications.value = seedNotifications()
+    seeded = true
+  }
+}
+
+export const useTransactionEntry = () => {
+  const transactionStore = useTransactionStore()
+  ensureSeeded()
+
+  const parseNotification = (text) => {
+    const amountMatch = text.match(/(?:¥|￥)\s?(-?\d+(?:\.\d{1,2})?)/)
+    const amount = amountMatch ? parseFloat(amountMatch[1]) : 0
+
+    let merchant = 'Unknown'
+    const merchantMatch = text.match(/向\s?([\u4e00-\u9fa5A-Za-z0-9\s&]+)/)
+    if (merchantMatch?.[1]) {
+      merchant = merchantMatch[1].trim()
+    } else if (text.includes('：')) {
+      merchant = text.split('：')[1]?.split(' ')[0]?.trim() || merchant
+    }
+
+    const isIncome = /收入|到账|received/i.test(text)
+    const normalizedAmount = isIncome ? Math.abs(amount) : -Math.abs(amount || 0)
+
+    return {
+      id: uuidv4(),
+      amount: normalizedAmount,
+      merchant,
+      category: inferCategory(merchant),
+      date: new Date().toISOString(),
+      note: text,
+      syncStatus: 'pending',
+    }
+  }
+
+  const removeNotification = (id) => {
+    notifications.value = notifications.value.filter((item) => item.id !== id)
+  }
+
+  const confirmNotification = async (id) => {
+    const target = notifications.value.find((item) => item.id === id)
+    if (!target || processingId.value) return
+    processingId.value = id
+    try {
+      await transactionStore.ensureInitialized()
+      const parsed = parseNotification(target.text)
+      await transactionStore.addTransaction(parsed)
+      removeNotification(id)
+    } finally {
+      processingId.value = ''
+    }
+  }
+
+  const dismissNotification = (id) => {
+    removeNotification(id)
+  }
+
+  const simulateNotification = (text) => {
+    notifications.value = [
+      {
+        id: uuidv4(),
+        channel: '模拟',
+        text,
+        createdAt: new Date().toISOString(),
+      },
+      ...notifications.value,
+    ]
+  }
+
+  return {
+    notifications,
+    processingId,
+    parseNotification,
+    confirmNotification,
+    dismissNotification,
+    simulateNotification,
+  }
+}
diff --git a/src/lib/sqlite.js b/src/lib/sqlite.js
new file mode 100644
index 0000000..3cc7828
--- /dev/null
+++ b/src/lib/sqlite.js
@@ -0,0 +1,82 @@
+import { Capacitor } from '@capacitor/core'
+import { CapacitorSQLite, SQLiteConnection } from '@capacitor-community/sqlite'
+import { defineCustomElements as defineJeep } from 'jeep-sqlite/loader'
+
+const DB_NAME = 'echo_local'
+const DB_VERSION = 1
+const TRANSACTION_TABLE_SQL = `
+  CREATE TABLE IF NOT EXISTS transactions (
+    id TEXT PRIMARY KEY NOT NULL,
+    amount REAL NOT NULL,
+    merchant TEXT NOT NULL,
+    category TEXT DEFAULT 'Uncategorized',
+    date TEXT NOT NULL,
+    note TEXT,
+    sync_status INTEGER DEFAULT 0
+  );
+`
+
+let sqliteConnection
+let db
+let initialized = false
+
+const ensureJeepElement = async () => {
+  if (!customElements.get('jeep-sqlite')) {
+    defineJeep(window)
+  }
+  if (!document.querySelector('jeep-sqlite')) {
+    const jeepEl = document.createElement('jeep-sqlite')
+    document.body.appendChild(jeepEl)
+  }
+  await CapacitorSQLite.initWebStore()
+}
+
+const prepareConnection = async () => {
+  if (!sqliteConnection) {
+    sqliteConnection = new SQLiteConnection(CapacitorSQLite)
+  }
+
+  if (Capacitor.getPlatform() === 'web') {
+    await ensureJeepElement()
+  }
+
+  const consistency = await sqliteConnection.checkConnectionsConsistency()
+  if (!consistency.result) {
+    await sqliteConnection.closeAllConnections()
+  }
+
+  const isConn = (await sqliteConnection.isConnection(DB_NAME, false)).result
+  if (isConn) {
+    db = await sqliteConnection.retrieveConnection(DB_NAME, false)
+  } else {
+    db = await sqliteConnection.createConnection(DB_NAME, false, 'no-encryption', DB_VERSION, false)
+  }
+
+  await db.open()
+  await db.execute(TRANSACTION_TABLE_SQL)
+  initialized = true
+}
+
+export const initSQLite = async () => {
+  if (!initialized) {
+    await prepareConnection()
+  }
+  return db
+}
+
+export const getDb = async () => {
+  if (!initialized) {
+    await initSQLite()
+  }
+  return db
+}
+
+export const closeSQLite = async () => {
+  if (db) {
+    await db.close()
+    db = null
+  }
+  initialized = false
+}
+
+export const databaseName = DB_NAME
diff --git a/src/main.js b/src/main.js
index 5234f73..913b149 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,8 +5,13 @@ import '@phosphor-icons/web/bold'
 import '@phosphor-icons/web/fill'
 import App from './App.vue'
 import router from './router'
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
-// 创建应用根实例并挂载路由
 const app = createApp(App)
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
+
 app.use(router)
+app.use(pinia)
 app.mount('#app')
diff --git a/src/services/transactionService.js b/src/services/transactionService.js
new file mode 100644
index 0000000..267d506
--- /dev/null
+++ b/src/services/transactionService.js
@@ -0,0 +1,108 @@
+import { v4 as uuidv4 } from 'uuid'
+import { getDb } from '../lib/sqlite'
+
+const statusMap = {
+  pending: 0,
+  synced: 1,
+  error: 2,
+}
+
+const normalizeStatus = (value) => {
+  if (value === 1) return 'synced'
+  if (value === 2) return 'error'
+  return 'pending'
+}
+
+const mapRow = (row) => ({
+  id: row.id,
+  amount: Number(row.amount),
+  merchant: row.merchant,
+  category: row.category || 'Uncategorized',
+  date: row.date,
+  note: row.note || '',
+  syncStatus: normalizeStatus(row.sync_status),
+})
+
+export const fetchTransactions = async () => {
+  const db = await getDb()
+  const result = await db.query(
+    `
+      SELECT id, amount, merchant, category, date, note, sync_status
+      FROM transactions
+      ORDER BY date DESC
+    `,
+  )
+  return (result?.values || []).map(mapRow)
+}
+
+export const insertTransaction = async (payload) => {
+  const db = await getDb()
+  const id = payload.id || uuidv4()
+  const sanitized = {
+    merchant: payload.merchant?.trim() || 'Unknown',
+    category: payload.category?.trim() || 'Uncategorized',
+    note: payload.note?.trim() || '',
+    date: payload.date,
+    amount: Number(payload.amount),
+    syncStatus: statusMap[payload.syncStatus] ?? statusMap.pending,
+  }
+
+  await db.run(
+    `
+      INSERT INTO transactions (id, amount, merchant, category, date, note, sync_status)
+      VALUES (?, ?, ?, ?, ?, ?, ?)
+    `,
+    [
+      id,
+      sanitized.amount,
+      sanitized.merchant,
+      sanitized.category,
+      sanitized.date,
+      sanitized.note || null,
+      sanitized.syncStatus,
+    ],
+  )
+
+  return {
+    id,
+    ...sanitized,
+    syncStatus: payload.syncStatus || 'pending',
+  }
+}
+
+export const updateTransaction = async (payload) => {
+  const db = await getDb()
+  await db.run(
+    `
+      UPDATE transactions
+      SET amount = ?, merchant = ?, category = ?, date = ?, note = ?, sync_status = ?
+      WHERE id = ?
+    `,
+    [
+      Number(payload.amount),
+      payload.merchant?.trim() || 'Unknown',
+      payload.category?.trim() || 'Uncategorized',
+      payload.date,
+      payload.note?.trim() || null,
+      statusMap[payload.syncStatus] ?? statusMap.pending,
+      payload.id,
+    ],
+  )
+
+  const result = await db.query(
+    `
+      SELECT id, amount, merchant, category, date, note, sync_status
+      FROM transactions
+      WHERE id = ?
+    `,
+    [payload.id],
+  )
+
+  const updated = result?.values?.[0]
+  return updated ? mapRow(updated) : null
+}
+
+export const deleteTransaction = async (id) => {
+  const db = await getDb()
+  await db.run(`DELETE FROM transactions WHERE id = ?`, [id])
+}
diff --git a/src/stores/transactions.js b/src/stores/transactions.js
new file mode 100644
index 0000000..e1e43ff
--- /dev/null
+++ b/src/stores/transactions.js
@@ -0,0 +1,181 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import {
+  deleteTransaction,
+  fetchTransactions,
+  insertTransaction,
+  updateTransaction,
+} from '../services/transactionService'
+
+const toIsoDay = (value) => {
+  const date = value instanceof Date ? value : new Date(value)
+  return date.toISOString().split('T')[0]
+}
+
+const formatDayLabel = (dayKey) => {
+  const todayKey = toIsoDay(new Date())
+  const yesterdayKey = toIsoDay(new Date(Date.now() - 86400000))
+  if (dayKey === todayKey) return '今天'
+  if (dayKey === yesterdayKey) return '昨天'
+  const [y, m, d] = dayKey.split('-').map((part) => Number(part))
+  const localDate = new Date(y, m - 1, d)
+  return new Intl.DateTimeFormat('zh-CN', {
+    month: 'numeric',
+    day: 'numeric',
+    weekday: 'short',
+  }).format(localDate)
+}
+
+export const useTransactionStore = defineStore(
+  'transactions',
+  () => {
+    const transactions = ref([])
+    const initialized = ref(false)
+    const loading = ref(false)
+    const errorMessage = ref('')
+    const filters = ref({
+      category: 'all',
+      showOnlyToday: false,
+    })
+
+    const sortedTransactions = computed(() =>
+      [...transactions.value].sort((a, b) => new Date(b.date) - new Date(a.date)),
+    )
+
+    const todaysTransactions = computed(() => {
+      const todayKey = toIsoDay(new Date())
+      return sortedTransactions.value.filter((tx) => toIsoDay(tx.date) === todayKey)
+    })
+
+    const totalExpense = computed(() =>
+      sortedTransactions.value.reduce((sum, tx) => (tx.amount < 0 ? sum + tx.amount : sum), 0),
+    )
+
+    const totalIncome = computed(() =>
+      sortedTransactions.value.reduce((sum, tx) => (tx.amount > 0 ? sum + tx.amount : sum), 0),
+    )
+
+    const todaysExpense = computed(() =>
+      todaysTransactions.value.reduce((sum, tx) => (tx.amount < 0 ? sum + tx.amount : sum), 0),
+    )
+
+    const todaysIncome = computed(() =>
+      todaysTransactions.value.reduce((sum, tx) => (tx.amount > 0 ? sum + tx.amount : sum), 0),
+    )
+
+    const latestTransactions = computed(() => sortedTransactions.value.slice(0, 5))
+
+    const groupedTransactions = computed(() => {
+      const appliedCategory = filters.value.category
+      const showTodayOnly = filters.value.showOnlyToday
+      const groups = new Map()
+
+      sortedTransactions.value.forEach((tx) => {
+        if (appliedCategory !== 'all' && tx.category !== appliedCategory) return
+        if (showTodayOnly && toIsoDay(tx.date) !== toIsoDay(new Date())) return
+        const dayKey = toIsoDay(tx.date)
+        if (!groups.has(dayKey)) {
+          groups.set(dayKey, [])
+        }
+        groups.get(dayKey).push(tx)
+      })
+
+      return Array.from(groups.entries())
+        .sort((a, b) => new Date(b[0]) - new Date(a[0]))
+        .map(([dayKey, records]) => ({
+          dayKey,
+          label: formatDayLabel(dayKey),
+          totalExpense: records
+            .filter((tx) => tx.amount < 0)
+            .reduce((sum, tx) => sum + Math.abs(tx.amount), 0),
+          items: records,
+        }))
+    })
+
+    const hydrateTransactions = async () => {
+      loading.value = true
+      errorMessage.value = ''
+      try {
+        const rows = await fetchTransactions()
+        transactions.value = rows
+        initialized.value = true
+      } catch (err) {
+        errorMessage.value = err?.message || '无法加载本地账本'
+        throw err
+      } finally {
+        loading.value = false
+      }
+    }
+
+    const ensureInitialized = async () => {
+      if (!initialized.value && !loading.value) {
+        await hydrateTransactions()
+      }
+    }
+
+    const addTransaction = async (payload) => {
+      const normalized = {
+        ...payload,
+        date: payload.date ? new Date(payload.date).toISOString() : new Date().toISOString(),
+      }
+      const created = await insertTransaction(normalized)
+      transactions.value = [created, ...transactions.value]
+      return created
+    }
+
+    const editTransaction = async (payload) => {
+      const normalized = {
+        ...payload,
+        date: payload.date ? new Date(payload.date).toISOString() : new Date().toISOString(),
+      }
+      const updated = await updateTransaction(normalized)
+      if (updated) {
+        transactions.value = transactions.value.map((tx) => (tx.id === updated.id ? updated : tx))
+      }
+      return updated
+    }
+
+    const removeTransaction = async (id) => {
+      await deleteTransaction(id)
+      transactions.value = transactions.value.filter((tx) => tx.id !== id)
+    }
+
+    const upsertFromNotification = async (payload) => {
+      const existing = transactions.value.find((tx) => tx.id === payload.id)
+      if (existing) {
+        return editTransaction(payload)
+      }
+      return addTransaction(payload)
+    }
+
+    const findById = (id) => transactions.value.find((tx) => tx.id === id)
+
+    return {
+      transactions,
+      initialized,
+      loading,
+      errorMessage,
+      filters,
+      sortedTransactions,
+      groupedTransactions,
+      todaysTransactions,
+      todaysExpense,
+      todaysIncome,
+      totalExpense,
+      totalIncome,
+      latestTransactions,
+      hydrateTransactions,
+      ensureInitialized,
+      addTransaction,
+      editTransaction,
+      removeTransaction,
+      upsertFromNotification,
+      findById,
+    }
+  },
+  {
+    persist: {
+      paths: ['filters'],
+    },
+  },
+)
diff --git a/src/types/transaction.d.ts b/src/types/transaction.d.ts
new file mode 100644
index 0000000..5c0007a
--- /dev/null
+++ b/src/types/transaction.d.ts
@@ -0,0 +1,9 @@
+export interface Transaction {
+  id: string;
+  amount: number;
+  merchant: string;
+  category: string;
+  date: string;
+  note?: string;
+  syncStatus: 'pending' | 'synced' | 'error';
+}
diff --git a/src/views/AddEntryView.vue b/src/views/AddEntryView.vue
index 03a2e70..ff94f68 100644
--- a/src/views/AddEntryView.vue
+++ b/src/views/AddEntryView.vue
@@ -1,81 +1,243 @@
 <script setup>
-import { useRouter } from 'vue-router'
+import { computed, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useTransactionStore } from '../stores/transactions'
 
-// 这里将原来的底部弹窗拆分成独立页面，通过路由进入和返回
 const router = useRouter()
+const route = useRoute()
+const transactionStore = useTransactionStore()
 
-const handleClose = () => {
+const editingId = computed(() => route.query.id || '')
+const feedback = ref('')
+const saving = ref(false)
+
+const categories = ['Food', 'Transport', 'Health', 'Groceries', 'Income', 'Uncategorized']
+
+const toDatetimeLocal = (value) => {
+  const date = value ? new Date(value) : new Date()
+  const offset = date.getTimezoneOffset()
+  return new Date(date.getTime() - offset * 60000).toISOString().slice(0, 16)
+}
+
+const form = reactive({
+  type: 'expense',
+  amount: '',
+  merchant: '',
+  category: 'Food',
+  note: '',
+  date: toDatetimeLocal(),
+})
+
+const resetForm = () => {
+  form.type = 'expense'
+  form.amount = ''
+  form.merchant = ''
+  form.category = 'Food'
+  form.note = ''
+  form.date = toDatetimeLocal()
+}
+
+const hydrateForm = () => {
+  if (!editingId.value) {
+    resetForm()
+    return
+  }
+  const target = transactionStore.findById(editingId.value)
+  if (!target) {
+    resetForm()
+    return
+  }
+  form.type = target.amount >= 0 ? 'income' : 'expense'
+  form.amount = Math.abs(target.amount).toString()
+  form.merchant = target.merchant
+  form.category = target.category
+  form.note = target.note || ''
+  form.date = toDatetimeLocal(target.date)
+}
+
+watch(editingId, hydrateForm, { immediate: true })
+
+const closePanel = () => {
   router.back()
 }
+
+const validate = () => {
+  if (!form.merchant.trim()) {
+    feedback.value = '请输入商户或来源'
+    return false
+  }
+  const parsedAmount = Number(form.amount)
+  if (!Number.isFinite(parsedAmount) || parsedAmount <= 0) {
+    feedback.value = '请输入有效的金额'
+    return false
+  }
+  feedback.value = ''
+  return true
+}
+
+const submitForm = async () => {
+  if (!validate()) return
+  saving.value = true
+  try {
+    const amountNumber = Number(form.amount)
+    const normalizedAmount =
+      form.type === 'income' ? Math.abs(amountNumber) : -Math.abs(amountNumber)
+    const payload = {
+      id: editingId.value || undefined,
+      merchant: form.merchant.trim(),
+      category: form.category,
+      amount: normalizedAmount,
+      note: form.note?.trim(),
+      date: new Date(form.date).toISOString(),
+      syncStatus: 'pending',
+    }
+    if (editingId.value) {
+      await transactionStore.editTransaction(payload)
+    } else {
+      await transactionStore.addTransaction(payload)
+    }
+    closePanel()
+  } finally {
+    saving.value = false
+  }
+}
+
+const deleteEntry = async () => {
+  if (!editingId.value) return
+  const confirmed = window.confirm('确认删除该条记录吗？')
+  if (!confirmed) return
+  await transactionStore.removeTransaction(editingId.value)
+  closePanel()
+}
+
+transactionStore.ensureInitialized()
 </script>
 
 <template>
-  <!-- 保持与原弹窗一致的视觉：半透明遮罩 + 底部浮起卡片 -->
   <div class="absolute inset-0 z-50 flex flex-col justify-end bg-stone-900/30 backdrop-blur-sm">
     <div class="bg-white w-full rounded-t-[32px] p-6 pb-10 shadow-2xl">
-      <div class="w-12 h-1.5 bg-stone-200 rounded-full mx-auto mb-8" />
+      <div class="w-12 h-1.5 bg-stone-200 rounded-full mx-auto mb-6" />
 
-      <h3 class="text-xl font-extrabold text-stone-800 mb-6 px-2">
-        记录新生活
-      </h3>
+      <div class="flex items-center justify-between mb-6">
+        <div>
+          <p class="text-xs text-stone-400 font-bold uppercase tracking-widest">
+            {{ editingId ? '编辑记录' : '记录新消费' }}
+          </p>
+          <h3 class="text-xl font-extrabold text-stone-800">
+            {{ editingId ? '更新本地账本' : '快速入账' }}
+          </h3>
+        </div>
+        <button class="text-stone-400 text-sm font-bold" @click="closePanel">关闭</button>
+      </div>
 
-      <div class="grid grid-cols-2 gap-4">
+      <div class="flex items-center gap-2 mb-6 bg-stone-100 rounded-3xl p-1">
         <button
-          class="p-5 rounded-3xl bg-stone-50 border border-stone-100 flex flex-col items-center gap-3 active:bg-stone-100 transition group"
+          class="flex-1 py-2 rounded-2xl text-sm font-bold transition"
+          :class="
+            form.type === 'expense'
+              ? 'bg-white shadow text-rose-500'
+              : 'text-stone-400'
+          "
+          @click="form.type = 'expense'"
         >
-          <div
-            class="w-12 h-12 rounded-2xl bg-blue-100 text-blue-600 flex items-center justify-center group-hover:scale-110 transition"
-          >
-            <i class="ph-fill ph-pencil-simple text-2xl" />
-          </div>
-          <span class="text-sm font-bold text-stone-600">手动记账</span>
+          <i class="ph-bold ph-arrow-up-right" /> 支出
         </button>
-
         <button
-          class="p-5 rounded-3xl bg-stone-50 border border-stone-100 flex flex-col items-center gap-3 active:bg-stone-100 transition group"
+          class="flex-1 py-2 rounded-2xl text-sm font-bold transition"
+          :class="
+            form.type === 'income'
+              ? 'bg-white shadow text-emerald-500'
+              : 'text-stone-400'
+          "
+          @click="form.type = 'income'"
         >
-          <div
-            class="w-12 h-12 rounded-2xl bg-emerald-100 text-emerald-600 flex items-center justify-center group-hover:scale-110 transition"
-          >
-            <i class="ph-fill ph-receipt text-2xl" />
-          </div>
-          <span class="text-sm font-bold text-stone-600">扫描小票</span>
-        </button>
-
-        <button
-          class="col-span-2 p-6 rounded-3xl bg-gradient-to-r from-orange-50 to-red-50 border border-orange-100 flex items-center justify-between active:scale-[0.98] transition group relative overflow-hidden"
-        >
-          <div class="flex items-center gap-4 z-10">
-            <div
-              class="w-12 h-12 rounded-2xl bg-orange-500 text-white flex items-center justify-center shadow-lg shadow-orange-200 group-hover:rotate-12 transition"
-            >
-              <i class="ph-fill ph-camera text-2xl" />
-            </div>
-            <div class="text-left">
-              <span class="block text-base font-bold text-stone-800">
-                拍食物 AI 分析
-              </span>
-              <span class="text-xs text-stone-400 font-bold">
-                计算卡路里 &amp; 自动记账
-              </span>
-            </div>
-          </div>
-          <i class="ph-bold ph-arrow-right text-orange-300 z-10" />
-
-          <!-- 装饰圆形光晕 -->
-          <div
-            class="absolute right-0 bottom-0 w-32 h-32 bg-orange-100 rounded-full blur-2xl opacity-50 translate-x-10 translate-y-10"
-          />
+          <i class="ph-bold ph-arrow-down-left" /> 收入
         </button>
       </div>
 
+      <div class="space-y-4">
+        <label class="block">
+          <span class="text-xs font-bold text-stone-400">金额</span>
+          <div class="mt-2 flex items-center gap-2 rounded-2xl border border-stone-200 px-4 py-3">
+            <span class="text-stone-400 text-sm">¥</span>
+            <input
+              v-model="form.amount"
+              type="number"
+              inputmode="decimal"
+              step="0.01"
+              placeholder="0.00"
+              class="flex-1 bg-transparent text-2xl font-bold text-stone-800 focus:outline-none"
+            />
+          </div>
+        </label>
+
+        <label class="block">
+          <span class="text-xs font-bold text-stone-400">商户 / 来源</span>
+          <input
+            v-model="form.merchant"
+            class="mt-2 w-full rounded-2xl border border-stone-200 px-4 py-3 text-sm focus:outline-none focus:border-stone-400"
+            placeholder="如 Starbucks / 滴滴出行"
+          />
+        </label>
+
+        <div>
+          <span class="text-xs font-bold text-stone-400">分类</span>
+          <div class="mt-2 flex gap-2 overflow-x-auto hide-scrollbar pb-1">
+            <button
+              v-for="category in categories"
+              :key="category"
+              class="px-4 py-2 rounded-2xl text-xs font-bold border transition"
+              :class="
+                form.category === category
+                  ? 'bg-gradient-warm text-white border-transparent'
+                  : 'bg-stone-50 text-stone-500 border-stone-100'
+              "
+              @click="form.category = category"
+            >
+              {{ category }}
+            </button>
+          </div>
+        </div>
+
+        <label class="block">
+          <span class="text-xs font-bold text-stone-400">日期 / 时间</span>
+          <input
+            v-model="form.date"
+            type="datetime-local"
+            class="mt-2 w-full rounded-2xl border border-stone-200 px-4 py-3 text-sm focus:outline-none focus:border-stone-400"
+          />
+        </label>
+
+        <label class="block">
+          <span class="text-xs font-bold text-stone-400">备注</span>
+          <textarea
+            v-model="form.note"
+            rows="2"
+            class="mt-2 w-full rounded-2xl border border-stone-200 px-4 py-3 text-sm focus:outline-none focus:border-stone-400 resize-none"
+            placeholder="可记录口味、心情或健康状态"
+          />
+        </label>
+      </div>
+
+      <p v-if="feedback" class="text-xs text-rose-500 font-bold mt-3">
+        {{ feedback }}
+      </p>
+
       <button
-        class="mt-8 w-full py-4 rounded-2xl text-stone-400 text-sm font-bold hover:bg-stone-50 transition"
-        @click="handleClose"
+        class="mt-6 w-full py-4 rounded-2xl text-white font-bold bg-gradient-warm shadow-lg shadow-orange-200 active:scale-[0.99] transition disabled:opacity-60"
+        :disabled="saving"
+        @click="submitForm"
       >
-        关闭
+        {{ saving ? '保存中...' : editingId ? '保存修改' : '立即入账' }}
+      </button>
+
+      <button
+        v-if="editingId"
+        class="mt-3 w-full py-3 rounded-2xl text-sm font-bold text-rose-500 bg-rose-50 border border-rose-100"
+        @click="deleteEntry"
+      >
+        删除记录
       </button>
     </div>
   </div>
 </template>
-
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 1fac508..f402d67 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,209 +1,290 @@
 <script setup>
-import { ref } from 'vue'
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useTransactionStore } from '../stores/transactions'
+import { useTransactionEntry } from '../composables/useTransactionEntry'
 
-const notifications = ref([
-    { merchant: '支付宝 - 瑞幸咖啡', amount: '18.00', time: '14:30' }
-])
+const transactionStore = useTransactionStore()
+const { totalIncome, totalExpense, todaysIncome, todaysExpense, latestTransactions } =
+  storeToRefs(transactionStore)
+const { notifications, confirmNotification, dismissNotification, processingId } =
+  useTransactionEntry()
 
-const confirmNotif = (index) => {
-    notifications.value.splice(index, 1)
-    // In a real app, this would trigger a store action or API call
-    alert('已自动入账，并同步至 AI 饮食分析')
+const emit = defineEmits(['changeTab'])
+const monthlyBudget = 12000
+
+const currentDayLabel = computed(
+  () =>
+    new Intl.DateTimeFormat('zh-CN', {
+      month: 'long',
+      day: 'numeric',
+      weekday: 'long',
+    }).format(new Date()),
+)
+
+const budgetUsage = computed(() => {
+  const expense = Math.abs(totalExpense.value || 0)
+  if (!monthlyBudget) return 0
+  return Math.min(expense / monthlyBudget, 1)
+})
+
+const balance = computed(() => (totalIncome.value || 0) + (totalExpense.value || 0))
+const remainingBudget = computed(() =>
+  Math.max(monthlyBudget - Math.abs(totalExpense.value || 0), 0),
+)
+
+const todayIncomeValue = computed(() => todaysIncome.value || 0)
+const todayExpenseValue = computed(() => Math.abs(todaysExpense.value || 0))
+
+const formatCurrency = (value) => `¥ ${Math.abs(value || 0).toFixed(2)}`
+const formatAmount = (value) =>
+  `${value >= 0 ? '+' : '-'} ¥${Math.abs(value || 0).toFixed(2)}`
+const formatTime = (value) =>
+  new Intl.DateTimeFormat('zh-CN', { hour: '2-digit', minute: '2-digit' }).format(
+    new Date(value),
+  )
+
+const recentTransactions = computed(() => latestTransactions.value.slice(0, 4))
+
+const categoryMeta = {
+  Food: { icon: 'ph-bowl-food', bg: 'bg-orange-100', color: 'text-orange-600' },
+  Transport: { icon: 'ph-taxi', bg: 'bg-blue-100', color: 'text-blue-600' },
+  Health: { icon: 'ph-heartbeat', bg: 'bg-rose-100', color: 'text-rose-600' },
+  Groceries: { icon: 'ph-basket', bg: 'bg-amber-100', color: 'text-amber-600' },
+  Income: { icon: 'ph-wallet', bg: 'bg-emerald-100', color: 'text-emerald-600' },
+  Uncategorized: { icon: 'ph-note-pencil', bg: 'bg-stone-100', color: 'text-stone-500' },
+  default: { icon: 'ph-note-pencil', bg: 'bg-stone-100', color: 'text-stone-500' },
 }
 
-defineEmits(['changeTab'])
+const getCategoryMeta = (category) => categoryMeta[category] || categoryMeta.default
+
+transactionStore.ensureInitialized()
 </script>
 
 <template>
-    <div class="space-y-6 animate-fade-in pb-28">
-        <!-- Header -->
-        <div class="flex justify-between items-center">
-            <div>
-                <p class="text-xs text-stone-400 font-bold tracking-wider">HI, ALEX</p>
-                <h1 class="text-2xl font-extrabold text-stone-800">今日概览</h1>
-            </div>
-            <div class="w-10 h-10 rounded-full bg-orange-50 p-0.5 cursor-pointer border border-orange-100"
-                @click="$emit('changeTab', 'settings')">
-                <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" class="rounded-full" alt="User">
-            </div>
-        </div>
-
-        <!-- Asset Card -->
-        <div
-            class="w-full h-48 rounded-3xl bg-gradient-warm text-white p-6 shadow-xl shadow-orange-200/50 relative overflow-hidden group transition-all hover:shadow-orange-300/50">
-            <div class="absolute -right-10 -top-10 w-40 h-40 bg-white opacity-10 rounded-full blur-2xl"></div>
-            <div class="absolute left-0 bottom-0 w-full h-1/2 bg-gradient-to-t from-black/10 to-transparent"></div>
-
-            <div class="relative z-10 flex flex-col h-full justify-between">
-                <div>
-                    <div class="flex items-center justify-between">
-                        <p class="text-white/80 text-xs font-bold tracking-widest uppercase">本月结余</p>
-                        <button
-                            class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center backdrop-blur-md hover:bg-white/30 transition">
-                            <i class="ph-bold ph-eye"></i>
-                        </button>
-                    </div>
-                    <h2 class="text-4xl font-extrabold mt-2">¥ 4,285<span
-                            class="text-lg font-medium opacity-80">.00</span></h2>
-                </div>
-
-                <div class="flex gap-8">
-                    <div>
-                        <p class="text-white/70 text-xs mb-0.5 flex items-center gap-1"><i
-                                class="ph-bold ph-arrow-down-left"></i> 收入</p>
-                        <p class="font-bold text-lg">¥ 12,500</p>
-                    </div>
-                    <div>
-                        <p class="text-white/70 text-xs mb-0.5 flex items-center gap-1"><i
-                                class="ph-bold ph-arrow-up-right"></i> 支出</p>
-                        <p class="font-bold text-lg">¥ 8,215</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Budget Bar -->
-        <div class="bg-white rounded-2xl p-4 shadow-sm border border-stone-100">
-            <div class="flex justify-between items-center mb-2">
-                <span class="text-xs font-bold text-stone-500">本月预算</span>
-                <span class="text-xs font-bold text-stone-800">65%</span>
-            </div>
-            <div class="w-full bg-stone-100 rounded-full h-2.5 overflow-hidden">
-                <div class="bg-gradient-warm h-2.5 rounded-full" style="width: 65%"></div>
-            </div>
-            <div class="flex justify-between mt-2 text-[10px] text-stone-400">
-                <span>已用 ¥8,215</span>
-                <span>剩余 ¥4,285</span>
-            </div>
-        </div>
-
-        <!-- Weekly Trend Chart -->
-        <div class="bg-white rounded-3xl p-5 shadow-sm border border-stone-100">
-            <div class="flex justify-between items-center mb-4">
-                <h3 class="font-bold text-stone-700">支出趋势</h3>
-                <div class="flex gap-2">
-                    <span class="text-[10px] px-2 py-1 rounded-full bg-stone-100 text-stone-500 font-bold">周</span>
-                    <span class="text-[10px] px-2 py-1 rounded-full text-stone-400">月</span>
-                </div>
-            </div>
-            <div class="flex items-end justify-between h-24 gap-2">
-                <!-- Mon -->
-                <div class="flex flex-col items-center gap-1 flex-1">
-                    <div class="w-full bg-stone-100 rounded-t-md relative group h-full flex items-end overflow-hidden">
-                        <div class="w-full bg-orange-200 group-hover:bg-orange-300 transition-all h-[40%] rounded-t-md">
-                        </div>
-                    </div>
-                    <span class="text-[10px] text-stone-400 font-medium">一</span>
-                </div>
-                <!-- Tue -->
-                <div class="flex flex-col items-center gap-1 flex-1">
-                    <div class="w-full bg-stone-100 rounded-t-md relative group h-full flex items-end overflow-hidden">
-                        <div class="w-full bg-orange-200 group-hover:bg-orange-300 transition-all h-[60%] rounded-t-md">
-                        </div>
-                    </div>
-                    <span class="text-[10px] text-stone-400 font-medium">二</span>
-                </div>
-                <!-- Wed -->
-                <div class="flex flex-col items-center gap-1 flex-1">
-                    <div class="w-full bg-stone-100 rounded-t-md relative group h-full flex items-end overflow-hidden">
-                        <div class="w-full bg-orange-200 group-hover:bg-orange-300 transition-all h-[30%] rounded-t-md">
-                        </div>
-                    </div>
-                    <span class="text-[10px] text-stone-400 font-medium">三</span>
-                </div>
-                <!-- Thu (High) -->
-                <div class="flex flex-col items-center gap-1 flex-1">
-                    <div class="w-full bg-stone-100 rounded-t-md relative group h-full flex items-end overflow-hidden">
-                        <div
-                            class="w-full bg-gradient-warm transition-all h-[85%] rounded-t-md shadow-lg shadow-orange-200">
-                        </div>
-                    </div>
-                    <span class="text-[10px] text-stone-800 font-bold">四</span>
-                </div>
-                <!-- Fri -->
-                <div class="flex flex-col items-center gap-1 flex-1">
-                    <div class="w-full bg-stone-100 rounded-t-md relative group h-full flex items-end overflow-hidden">
-                        <div class="w-full bg-orange-200 group-hover:bg-orange-300 transition-all h-[50%] rounded-t-md">
-                        </div>
-                    </div>
-                    <span class="text-[10px] text-stone-400 font-medium">五</span>
-                </div>
-                <!-- Sat -->
-                <div class="flex flex-col items-center gap-1 flex-1">
-                    <div class="w-full bg-stone-100 rounded-t-md relative group h-full flex items-end overflow-hidden">
-                        <div class="w-full bg-orange-200 group-hover:bg-orange-300 transition-all h-[20%] rounded-t-md">
-                        </div>
-                    </div>
-                    <span class="text-[10px] text-stone-400 font-medium">六</span>
-                </div>
-                <!-- Sun -->
-                <div class="flex flex-col items-center gap-1 flex-1">
-                    <div class="w-full bg-stone-100 rounded-t-md relative group h-full flex items-end overflow-hidden">
-                        <div class="w-full bg-orange-200 group-hover:bg-orange-300 transition-all h-[35%] rounded-t-md">
-                        </div>
-                    </div>
-                    <span class="text-[10px] text-stone-400 font-medium">日</span>
-                </div>
-            </div>
-        </div>
-
-        <!-- Notifications -->
-        <div v-if="notifications.length > 0" class="space-y-3">
-            <div class="flex justify-between items-end">
-                <h3 class="font-bold text-lg text-stone-700">待确认</h3>
-                <span class="text-[10px] bg-orange-100 text-orange-600 px-2 py-1 rounded-full font-bold">自动捕获</span>
-            </div>
-
-            <div v-for="(notif, idx) in notifications" :key="idx"
-                class="glass-warm p-4 rounded-2xl flex items-center gap-4 shadow-sm">
-                <div
-                    class="w-12 h-12 rounded-2xl bg-[#1677FF] text-white flex items-center justify-center shadow-md shadow-blue-200">
-                    <i class="ph-fill ph-alipay-logo text-2xl"></i>
-                </div>
-                <div class="flex-1">
-                    <h4 class="font-bold text-stone-800">{{ notif.merchant }}</h4>
-                    <p class="text-xs text-stone-400">{{ notif.time }} · 自动识别</p>
-                </div>
-                <div class="text-right">
-                    <p class="font-bold text-stone-800">- ¥{{ notif.amount }}</p>
-                    <button @click="confirmNotif(idx)"
-                        class="mt-1.5 text-xs bg-gradient-warm text-white px-4 py-1.5 rounded-full font-bold active:scale-95 transition shadow-md shadow-orange-200">
-                        入账
-                    </button>
-                </div>
-            </div>
-        </div>
-
-        <!-- Feature Entries -->
-        <div class="grid grid-cols-2 gap-4">
-            <div class="bg-white p-5 rounded-3xl shadow-sm border border-stone-100 flex flex-col justify-between h-32 relative overflow-hidden group"
-                @click="$emit('changeTab', 'analysis')">
-                <div
-                    class="absolute right-[-10px] top-[-10px] w-20 h-20 bg-purple-50 rounded-full blur-xl group-hover:bg-purple-100 transition">
-                </div>
-                <div class="w-10 h-10 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center z-10">
-                    <i class="ph-fill ph-robot text-xl"></i>
-                </div>
-                <div class="z-10">
-                    <h4 class="font-bold text-stone-700">AI 顾问</h4>
-                    <p class="text-xs text-stone-400 mt-1">分析我的消费习惯</p>
-                </div>
-            </div>
-
-            <div
-                class="bg-white p-5 rounded-3xl shadow-sm border border-stone-100 flex flex-col justify-between h-32 relative overflow-hidden group">
-                <div
-                    class="absolute right-[-10px] top-[-10px] w-20 h-20 bg-emerald-50 rounded-full blur-xl group-hover:bg-emerald-100 transition">
-                </div>
-                <div
-                    class="w-10 h-10 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center z-10">
-                    <i class="ph-fill ph-carrot text-xl"></i>
-                </div>
-                <div class="z-10">
-                    <h4 class="font-bold text-stone-700">热量管理</h4>
-                    <p class="text-xs text-stone-400 mt-1">今日剩余 750 kcal</p>
-                </div>
-            </div>
-        </div>
+  <div class="space-y-6 animate-fade-in pb-28">
+    <div class="flex justify-between items-center">
+      <div>
+        <p class="text-xs text-stone-400 font-bold tracking-wider">
+          {{ currentDayLabel }}
+        </p>
+        <h1 class="text-2xl font-extrabold text-stone-800">今日概览</h1>
+      </div>
+      <div
+        class="w-10 h-10 rounded-full bg-orange-50 p-0.5 cursor-pointer border border-orange-100"
+        @click="emit('changeTab', 'settings')"
+      >
+        <img
+          src="https://api.dicebear.com/7.x/avataaars/svg?seed=Echo"
+          class="rounded-full"
+          alt="User"
+        />
+      </div>
     </div>
+
+    <div
+      class="w-full h-48 rounded-3xl bg-gradient-warm text-white p-6 shadow-xl shadow-orange-200/50 relative overflow-hidden group transition-all hover:shadow-orange-300/50"
+    >
+      <div class="absolute -right-10 -top-10 w-40 h-40 bg-white opacity-10 rounded-full blur-2xl" />
+      <div class="absolute left-0 bottom-0 w-full h-1/2 bg-gradient-to-t from-black/10 to-transparent" />
+
+      <div class="relative z-10 flex flex-col h-full justify-between">
+        <div>
+          <div class="flex items-center justify-between">
+            <p class="text-white/80 text-xs font-bold tracking-widest uppercase">本月结余</p>
+            <button
+              class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center backdrop-blur-md hover:bg-white/30 transition"
+            >
+              <i class="ph-bold ph-eye" />
+            </button>
+          </div>
+          <h2 class="text-4xl font-extrabold mt-2">
+            {{ formatCurrency(balance) }}
+          </h2>
+        </div>
+
+        <div class="flex gap-8">
+          <div>
+            <p class="text-white/70 text-xs mb-0.5 flex items-center gap-1">
+              <i class="ph-bold ph-arrow-down-left" /> 收入
+            </p>
+            <p class="font-bold text-lg">{{ formatCurrency(totalIncome) }}</p>
+          </div>
+          <div>
+            <p class="text-white/70 text-xs mb-0.5 flex items-center gap-1">
+              <i class="ph-bold ph-arrow-up-right" /> 支出
+            </p>
+            <p class="font-bold text-lg">{{ formatCurrency(Math.abs(totalExpense)) }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="bg-white rounded-2xl p-4 shadow-sm border border-stone-100">
+      <div class="flex justify-between items-center mb-2">
+        <span class="text-xs font-bold text-stone-500">本月预算</span>
+        <span class="text-xs font-bold text-stone-800">
+          {{ Math.round(budgetUsage * 100) }}%
+        </span>
+      </div>
+      <div class="w-full bg-stone-100 rounded-full h-2.5 overflow-hidden">
+        <div
+          class="bg-gradient-warm h-2.5 rounded-full transition-all duration-500"
+          :style="{ width: `${Math.round(budgetUsage * 100)}%` }"
+        />
+      </div>
+      <div class="flex justify-between mt-2 text-[10px] text-stone-400">
+        <span>已用 {{ formatCurrency(Math.abs(totalExpense)) }}</span>
+        <span>剩余 {{ formatCurrency(remainingBudget) }}</span>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="bg-white rounded-2xl p-4 border border-stone-100 shadow-sm">
+        <p class="text-xs text-stone-400 mb-2">今日收入</p>
+        <p class="text-xl font-bold text-emerald-600">{{ formatCurrency(todayIncomeValue) }}</p>
+      </div>
+      <div class="bg-white rounded-2xl p-4 border border-stone-100 shadow-sm">
+        <p class="text-xs text-stone-400 mb-2">今日支出</p>
+        <p class="text-xl font-bold text-rose-600">- {{ formatCurrency(todayExpenseValue) }}</p>
+      </div>
+    </div>
+
+    <div class="bg-white rounded-3xl p-5 shadow-sm border border-stone-100">
+      <div class="flex justify-between items-center mb-4">
+        <h3 class="font-bold text-stone-700">最新流水</h3>
+        <button
+          class="text-xs font-bold text-gradient-warm"
+          @click="emit('changeTab', 'list')"
+        >
+          查看全部
+        </button>
+      </div>
+      <div v-if="recentTransactions.length" class="space-y-4">
+        <div
+          v-for="tx in recentTransactions"
+          :key="tx.id"
+          class="flex items-center justify-between"
+        >
+          <div class="flex items-center gap-3">
+            <div
+              :class="[
+                'w-10 h-10 rounded-2xl flex items-center justify-center',
+                getCategoryMeta(tx.category).bg,
+                getCategoryMeta(tx.category).color,
+              ]"
+            >
+              <i :class="['ph-fill text-lg', getCategoryMeta(tx.category).icon]" />
+            </div>
+            <div>
+              <p class="font-bold text-stone-800 text-sm">{{ tx.merchant }}</p>
+              <p class="text-[11px] text-stone-400">
+                {{ formatTime(tx.date) }} · {{ tx.category }}
+              </p>
+            </div>
+          </div>
+          <span
+            :class="[
+              'text-sm font-bold',
+              tx.amount < 0 ? 'text-stone-800' : 'text-emerald-600',
+            ]"
+          >
+            {{ formatAmount(tx.amount) }}
+          </span>
+        </div>
+      </div>
+      <div v-else class="text-sm text-stone-400 text-center py-4">
+        还没有记录，快去添加第一笔消费吧～
+      </div>
+    </div>
+
+    <div class="space-y-3">
+      <div class="flex justify-between items-end">
+        <h3 class="font-bold text-lg text-stone-700">待确认通知</h3>
+        <span class="text-[10px] bg-orange-100 text-orange-600 px-2 py-1 rounded-full font-bold">
+          自动捕获
+        </span>
+      </div>
+
+      <div
+        v-if="notifications.length"
+        class="space-y-3"
+      >
+        <div
+          v-for="notif in notifications"
+          :key="notif.id"
+          class="glass-warm p-4 rounded-2xl flex items-center gap-4 shadow-sm"
+        >
+          <div
+            class="w-12 h-12 rounded-2xl bg-[#1677FF] text-white flex items-center justify-center shadow-md shadow-blue-200"
+          >
+            <i class="ph-fill ph-bell-ringing text-2xl" />
+          </div>
+          <div class="flex-1">
+            <h4 class="font-bold text-stone-800 text-sm">
+              {{ notif.channel }} · {{ formatTime(notif.createdAt) }}
+            </h4>
+            <p class="text-xs text-stone-400 leading-relaxed">
+              {{ notif.text }}
+            </p>
+          </div>
+          <div class="flex flex-col gap-2">
+            <button
+              class="text-xs bg-gradient-warm text-white px-4 py-1.5 rounded-full font-bold active:scale-95 transition shadow-md shadow-orange-200 disabled:opacity-60"
+              :disabled="processingId === notif.id"
+              @click="confirmNotification(notif.id)"
+            >
+              入账
+            </button>
+            <button
+              class="text-[11px] text-stone-400"
+              @click="dismissNotification(notif.id)"
+            >
+              忽略
+            </button>
+          </div>
+        </div>
+      </div>
+      <div v-else class="text-sm text-stone-400 text-center py-4 border border-dashed border-stone-100 rounded-2xl">
+        暂无新通知，享受慢生活 ☕️
+      </div>
+    </div>
+
+    <div class="grid grid-cols-2 gap-4">
+      <div
+        class="bg-white p-5 rounded-3xl shadow-sm border border-stone-100 flex flex-col justify-between h-32 relative overflow-hidden group"
+        @click="emit('changeTab', 'analysis')"
+      >
+        <div
+          class="absolute right-[-10px] top-[-10px] w-20 h-20 bg-purple-50 rounded-full blur-xl group-hover:bg-purple-100 transition"
+        />
+        <div
+          class="w-10 h-10 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center z-10"
+        >
+          <i class="ph-fill ph-robot text-xl" />
+        </div>
+        <div class="z-10">
+          <h4 class="font-bold text-stone-700">AI 顾问</h4>
+          <p class="text-xs text-stone-400 mt-1">分析我的消费习惯</p>
+        </div>
+      </div>
+
+      <div
+        class="bg-white p-5 rounded-3xl shadow-sm border border-stone-100 flex flex-col justify-between h-32 relative overflow-hidden group"
+      >
+        <div
+          class="absolute right-[-10px] top-[-10px] w-20 h-20 bg-emerald-50 rounded-full blur-xl group-hover:bg-emerald-100 transition"
+        />
+        <div
+          class="w-10 h-10 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center z-10"
+        >
+          <i class="ph-fill ph-carrot text-xl" />
+        </div>
+        <div class="z-10">
+          <h4 class="font-bold text-stone-700">热量管理</h4>
+          <p class="text-xs text-stone-400 mt-1">今日剩余 750 kcal</p>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
diff --git a/src/views/ListView.vue b/src/views/ListView.vue
index 19a5af3..7b7eabb 100644
--- a/src/views/ListView.vue
+++ b/src/views/ListView.vue
@@ -1,156 +1,184 @@
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { storeToRefs } from 'pinia'
+import { useTransactionStore } from '../stores/transactions'
 
-// 按日期分组的交易列表（当前为纯前端 Mock 数据，后续会接 Pinia/SQLite）
-const groupedTransactions = ref([
-  {
-    date: '今天, 5月20日',
-    totalExpense: '42.50',
-    items: [
-      {
-        title: '全家便利店',
-        type: 'expense',
-        amount: '24.50',
-        time: '10:30',
-        icon: 'ph-coffee',
-        bg: 'bg-orange-100',
-        color: 'text-orange-600',
-        note: '早餐',
-      },
-      {
-        title: '滴滴出行',
-        type: 'expense',
-        amount: '18.00',
-        time: '09:15',
-        icon: 'ph-taxi',
-        bg: 'bg-blue-100',
-        color: 'text-blue-600',
-        note: '',
-      },
-    ],
-  },
-  {
-    date: '昨天, 5月19日',
-    totalExpense: '380.00',
-    items: [
-      {
-        title: '工资收入',
-        type: 'income',
-        amount: '12,500.00',
-        time: '18:00',
-        icon: 'ph-wallet',
-        bg: 'bg-emerald-100',
-        color: 'text-emerald-600',
-        note: '包含奖金',
-      },
-      {
-        title: '乐刻健身',
-        type: 'expense',
-        amount: '380.00',
-        time: '12:30',
-        icon: 'ph-barbell',
-        bg: 'bg-purple-100',
-        color: 'text-purple-600',
-        note: '月卡续费',
-      },
-    ],
-  },
-  {
-    date: '5月18日',
-    totalExpense: '120.00',
-    items: [
-      {
-        title: '山姆会员店',
-        type: 'expense',
-        amount: '120.00',
-        time: '15:40',
-        icon: 'ph-basket',
-        bg: 'bg-red-100',
-        color: 'text-red-600',
-        note: '零食采购',
-      },
-    ],
-  },
-])
+const router = useRouter()
+const transactionStore = useTransactionStore()
+const { groupedTransactions, filters, loading } = storeToRefs(transactionStore)
+const deletingId = ref('')
+
+const categoryChips = [
+  { label: '全部', value: 'all', icon: 'ph-asterisk' },
+  { label: '餐饮', value: 'Food', icon: 'ph-bowl-food' },
+  { label: '通勤', value: 'Transport', icon: 'ph-taxi' },
+  { label: '健康', value: 'Health', icon: 'ph-heartbeat' },
+  { label: '买菜', value: 'Groceries', icon: 'ph-basket' },
+  { label: '收入', value: 'Income', icon: 'ph-wallet' },
+  { label: '其他', value: 'Uncategorized', icon: 'ph-dots-three-outline' },
+]
+
+const setCategory = (value) => {
+  filters.value.category = value
+}
+
+const toggleTodayOnly = () => {
+  filters.value.showOnlyToday = !filters.value.showOnlyToday
+}
+
+const formatAmount = (value) =>
+  `${value >= 0 ? '+' : '-'} ¥${Math.abs(value || 0).toFixed(2)}`
+
+const formatTime = (value) =>
+  new Intl.DateTimeFormat('zh-CN', { hour: '2-digit', minute: '2-digit' }).format(
+    new Date(value),
+  )
+
+const handleEdit = (item) => {
+  router.push({ name: 'add', query: { id: item.id } })
+}
+
+const handleDelete = async (item) => {
+  if (deletingId.value) return
+  const confirmed = window.confirm('确认删除这条流水吗？')
+  if (!confirmed) return
+  deletingId.value = item.id
+  try {
+    await transactionStore.removeTransaction(item.id)
+  } finally {
+    deletingId.value = ''
+  }
+}
+
+const hasData = computed(() => groupedTransactions.value.length > 0)
+
+transactionStore.ensureInitialized()
 </script>
 
 <template>
-  <div class="space-y-4 pb-10 animate-fade-in">
-    <!-- 顶部月份与统计卡片 -->
+  <div class="space-y-5 pb-10 animate-fade-in">
     <div class="sticky top-0 z-20 bg-warmOffwhite/95 backdrop-blur-sm py-2">
       <div class="flex justify-between items-center mb-4">
         <h2 class="text-2xl font-extrabold text-stone-800">账单明细</h2>
-        <div
-          class="flex items-center gap-2 bg-white border border-stone-100 px-3 py-1.5 rounded-full shadow-sm"
+        <button
+          class="flex items-center gap-2 bg-white border border-stone-100 px-3 py-1.5 rounded-full shadow-sm text-xs font-bold text-stone-500"
+          @click="router.push({ name: 'add' })"
         >
-          <span class="text-sm font-bold text-stone-600">2024年 5月</span>
-          <i class="ph-bold ph-caret-down text-xs text-stone-400" />
-        </div>
+          <i class="ph-bold ph-plus" /> 新增
+        </button>
       </div>
 
-      <!-- 汇总统计 -->
-      <div class="flex gap-4 overflow-x-auto hide-scrollbar pb-2">
-        <div
-          class="shrink-0 bg-stone-700 text-white px-5 py-3 rounded-2xl shadow-lg shadow-stone-200 flex flex-col justify-center min-w-[140px]"
+      <div class="flex gap-2 overflow-x-auto pb-2 hide-scrollbar">
+        <button
+          v-for="chip in categoryChips"
+          :key="chip.value"
+          class="px-3 py-1.5 rounded-full text-xs font-bold flex items-center gap-1 border transition"
+          :class="
+            filters.category === chip.value
+              ? 'bg-gradient-warm text-white border-transparent shadow-sm'
+              : 'bg-white text-stone-500 border-stone-100'
+          "
+          @click="setCategory(chip.value)"
         >
-          <span class="text-xs text-white/60 mb-1">总支出</span>
-          <span class="font-bold text-xl">¥ 8,215.40</span>
-        </div>
-        <div
-          class="shrink-0 bg-white text-stone-800 border border-stone-100 px-5 py-3 rounded-2xl flex flex-col justify-center min-w-[140px]"
+          <i :class="['text-sm', chip.icon]" />
+          {{ chip.label }}
+        </button>
+      </div>
+
+      <div class="flex items-center justify-between text-[11px] text-stone-400 font-bold px-1">
+        <span>长按一条记录可快速编辑</span>
+        <button
+          class="flex items-center gap-1 px-2 py-1 rounded-full border border-stone-200"
+          :class="filters.showOnlyToday ? 'bg-gradient-warm text-white border-transparent' : 'bg-white'"
+          @click="toggleTodayOnly"
         >
-          <span class="text-xs text-stone-400 mb-1">总收入</span>
-          <span class="font-bold text-xl text-emerald-500">+ ¥ 12,500</span>
-        </div>
+          <i class="ph-bold ph-sun-dim text-xs" />
+          今日
+        </button>
       </div>
     </div>
 
-    <!-- 按日期分组列表 -->
-    <div class="space-y-6 pb-10">
-      <div v-for="(group, gIndex) in groupedTransactions" :key="gIndex">
-        <div class="flex justify-between items-center mb-3 px-1">
-          <h4 class="text-sm font-bold text-stone-400">{{ group.date }}</h4>
-          <span class="text-xs text-stone-300 font-bold">支出 {{ group.totalExpense }}</span>
+    <div v-if="loading" class="text-center text-stone-400 py-10 text-sm">
+      正在同步本地账本...
+    </div>
+
+    <div v-else-if="hasData" class="space-y-6 pb-10">
+      <div
+        v-for="group in groupedTransactions"
+        :key="group.dayKey"
+        class="space-y-3"
+      >
+        <div class="flex justify-between items-center px-1">
+          <div>
+            <h4 class="text-sm font-bold text-stone-500">{{ group.label }}</h4>
+            <p class="text-[10px] text-stone-400">
+              支出 ¥{{ group.totalExpense.toFixed(2) }}
+            </p>
+          </div>
+          <span class="text-xs text-stone-300 font-bold">{{ group.dayKey }}</span>
         </div>
 
-        <div class="bg-white rounded-3xl p-1 shadow-sm border border-stone-50">
+        <div class="bg-white rounded-3xl p-1 shadow-sm border border-stone-50 divide-y divide-stone-50">
           <div
-            v-for="(item, iIndex) in group.items"
-            :key="iIndex"
-            class="flex items-center justify-between p-4 hover:bg-stone-50 rounded-2xl transition"
+            v-for="item in group.items"
+            :key="item.id"
+            class="flex items-center justify-between p-4 hover:bg-stone-50 rounded-2xl transition group"
+            @click="handleEdit(item)"
           >
             <div class="flex items-center gap-4">
               <div
-                :class="[
-                  'w-10 h-10 rounded-full flex items-center justify-center text-lg shrink-0',
-                  item.bg,
-                  item.color,
-                ]"
+                class="w-11 h-11 rounded-2xl bg-stone-100 flex items-center justify-center text-stone-500 group-active:scale-95 transition"
               >
-                <i :class="['ph-fill', item.icon]" />
+                <i
+                  :class="[
+                    'ph-bold text-lg',
+                    item.amount < 0 ? 'ph-arrow-up-right' : 'ph-arrow-down-left',
+                  ]"
+                />
               </div>
               <div>
                 <p class="font-bold text-stone-800 text-sm">
-                  {{ item.title }}
+                  {{ item.merchant }}
                 </p>
                 <p class="text-xs text-stone-400 mt-0.5">
-                  {{ item.time }}
-                  <span v-if="item.note" class="text-stone-300">| {{ item.note }}</span>
+                  {{ formatTime(item.date) }}
+                  <span v-if="item.category" class="text-stone-300">
+                    · {{ item.category }}
+                  </span>
+                  <span v-if="item.note" class="text-stone-300">
+                    · {{ item.note }}
+                  </span>
                 </p>
               </div>
             </div>
-            <span
-              :class="[
-                'font-bold text-base',
-                item.type === 'expense' ? 'text-stone-800' : 'text-emerald-500',
-              ]"
-            >
-              {{ item.type === 'expense' ? '-' : '+' }} {{ item.amount }}
-            </span>
+            <div class="text-right">
+              <p
+                :class="[
+                  'font-bold text-base',
+                  item.amount < 0 ? 'text-stone-800' : 'text-emerald-600',
+                ]"
+              >
+                {{ formatAmount(item.amount) }}
+              </p>
+              <button
+                class="text-[11px] text-stone-400 mt-1"
+                :disabled="deletingId === item.id"
+                @click.stop="handleDelete(item)"
+              >
+                {{ deletingId === item.id ? '删除中...' : '删除' }}
+              </button>
+            </div>
           </div>
         </div>
       </div>
     </div>
+
+    <div
+      v-else
+      class="py-12 text-center text-stone-400 text-sm border border-dashed border-stone-100 rounded-3xl"
+    >
+      暂无符合筛选条件的记录
+    </div>
   </div>
 </template>
-