feat: 新增储蓄罐存取款模态框，支持金额输入、快速选择、进度展示及账户余额校验。

src/App.tsx

@@ -4,6 +4,7 @@ import { router } from './router';
 
 import { ThemeProvider, PrivacyProvider, NotificationProvider, GuideProvider, useAutoTokenRefresh } from './hooks';
 import { SettingsProvider } from './contexts/SettingsContext';
+import { Toaster } from 'react-hot-toast';
 
 /**
  * App Content Component
@@ -28,6 +29,7 @@ function App() {
           <GuideProvider>
             <SettingsProvider>
               <AppContent />
+              <Toaster position="top-center" reverseOrder={false} />
             </SettingsProvider>
           </GuideProvider>
         </NotificationProvider>

src/components/budget/PiggyBankTransactionModal/PiggyBankTransactionModal.tsx

@@ -4,6 +4,7 @@
  */
 
 import React, { useState } from 'react';
+import toast from 'react-hot-toast';
 import type { PiggyBank, Account } from '../../../types';
 import { formatCurrency } from '../../../utils/format';
 import { Icon } from '@iconify/react';
@@ -28,7 +29,6 @@ export const PiggyBankTransactionModal: React.FC<PiggyBankTransactionModalProps>
 }) => {
   const [amount, setAmount] = useState<string>('');
   const [note, setNote] = useState<string>('');
-  const [error, setError] = useState<string>('');
 
   const isDeposit = type === 'deposit';
   const title = isDeposit ? '存入' : '取出';
@@ -38,7 +38,6 @@ export const PiggyBankTransactionModal: React.FC<PiggyBankTransactionModalProps>
   const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setAmount(value);
-    setError('');
   };
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -48,17 +47,17 @@ export const PiggyBankTransactionModal: React.FC<PiggyBankTransactionModalProps>
 
     // Validation
     if (!amount || isNaN(numAmount) || numAmount <= 0) {
-      setError('请输入有效的金额');
+      toast.error('请输入有效的金额');
       return;
     }
 
     if (!isDeposit && numAmount > piggyBank.currentAmount) {
-      setError('取出金额不能超过当前余额');
+      toast.error('取出金额不能超过当前余额');
       return;
     }
 
     if (isDeposit && linkedAccount && numAmount > linkedAccount.balance) {
-      setError(`账户余额不足 (可用: ${formatCurrency(linkedAccount.balance, linkedAccount.currency)})`);
+      toast.error(`账户余额不足 (可用: ${formatCurrency(linkedAccount.balance, linkedAccount.currency)})`);
       return;
     }
 
@@ -67,7 +66,6 @@ export const PiggyBankTransactionModal: React.FC<PiggyBankTransactionModalProps>
 
   const handleQuickAmount = (value: number) => {
     setAmount(value.toString());
-    setError('');
   };
 
   // Quick amount buttons
@@ -163,8 +161,7 @@ export const PiggyBankTransactionModal: React.FC<PiggyBankTransactionModalProps>
               id="amount"
               value={amount}
               onChange={handleAmountChange}
-              className={`piggy-bank-transaction-modal__input ${error ? 'piggy-bank-transaction-modal__input--error' : ''
-                }`}
+              className="piggy-bank-transaction-modal__input"
               placeholder="0.00"
               step="0.01"
               min="0"
@@ -172,7 +169,7 @@ export const PiggyBankTransactionModal: React.FC<PiggyBankTransactionModalProps>
               disabled={isLoading}
               autoFocus
             />
-            {error && <span className="piggy-bank-transaction-modal__error">{error}</span>}
+            {/* Error handled by toast */}
           </div>
 
           {linkedAccount ? (