From 2cb596f7af00257d42e01afe61fdfd17ea0966fb Mon Sep 17 00:00:00 2001
From: 12975 <1297598740@qq.com>
Date: Mon, 26 Jan 2026 01:56:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=BA=86=20PiggyBank?=
 =?UTF-8?q?Card=20=E7=BB=84=E4=BB=B6=E5=8F=8A=E5=85=B6=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BB=A5=E5=8F=8A=20TransactionForm=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../budget/PiggyBankCard/PiggyBankCard.css    | 521 +++++++++++-------
 .../budget/PiggyBankCard/PiggyBankCard.tsx    | 271 +++++----
 .../TransactionForm/TransactionForm.tsx       |  20 +-
 3 files changed, 506 insertions(+), 306 deletions(-)

diff --git a/src/components/budget/PiggyBankCard/PiggyBankCard.css b/src/components/budget/PiggyBankCard/PiggyBankCard.css
index df33dc5..d0fd7e4 100644
--- a/src/components/budget/PiggyBankCard/PiggyBankCard.css
+++ b/src/components/budget/PiggyBankCard/PiggyBankCard.css
@@ -1,20 +1,22 @@
 /**
  * PiggyBankCard Component - Premium Glassmorphism Style
+ * Enhanced with beautiful progress bar
  */
 
 .piggy-bank-card {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 1.25rem;
   padding: 1.5rem;
-  background: var(--glass-panel-bg);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 250, 245, 0.9) 100%);
   backdrop-filter: blur(12px);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-sm);
+  border: 1px solid rgba(249, 115, 22, 0.15);
+  border-radius: 20px;
+  box-shadow:
+    0 4px 20px rgba(249, 115, 22, 0.08),
+    0 2px 8px rgba(0, 0, 0, 0.04);
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   position: relative;
-  /* Removed overflow: hidden to allow dropdown menu to show */
 }
 
 .piggy-bank-card::before {
@@ -24,9 +26,8 @@
   left: 0;
   right: 0;
   height: 4px;
-  background: var(--color-accent);
-  opacity: 0.8;
-  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+  background: linear-gradient(90deg, #f97316 0%, #fb923c 50%, #fdba74 100%);
+  border-radius: 20px 20px 0 0;
 }
 
 .piggy-bank-card--clickable {
@@ -35,17 +36,19 @@
 
 .piggy-bank-card--clickable:hover {
   transform: translateY(-4px);
-  box-shadow: var(--shadow-lg), 0 0 20px rgba(249, 115, 22, 0.1);
+  box-shadow:
+    0 12px 40px rgba(249, 115, 22, 0.15),
+    0 4px 12px rgba(0, 0, 0, 0.08);
   border-color: rgba(249, 115, 22, 0.3);
 }
 
 .piggy-bank-card--completed {
-  background: linear-gradient(135deg, rgba(220, 252, 231, 0.5) 0%, rgba(240, 253, 244, 0.5) 100%);
-  border-color: rgba(34, 197, 94, 0.3);
+  background: linear-gradient(135deg, rgba(220, 252, 231, 0.9) 0%, rgba(240, 253, 244, 0.95) 100%);
+  border-color: rgba(34, 197, 94, 0.25);
 }
 
 .piggy-bank-card--completed::before {
-  background: var(--color-success);
+  background: linear-gradient(90deg, #22c55e 0%, #4ade80 50%, #86efac 100%);
 }
 
 /* Header */
@@ -66,19 +69,21 @@
 
 .piggy-bank-card__icon {
   flex-shrink: 0;
-  width: 3rem;
-  height: 3rem;
+  width: 3.5rem;
+  height: 3.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(249, 115, 22, 0.1);
-  border-radius: var(--radius-lg);
-  color: var(--color-accent);
+  background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(251, 146, 60, 0.1) 100%);
+  border-radius: 16px;
+  color: #f97316;
+  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.15);
 }
 
 .piggy-bank-card--completed .piggy-bank-card__icon {
-  background: rgba(34, 197, 94, 0.1);
-  color: var(--color-success);
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(74, 222, 128, 0.1) 100%);
+  color: #22c55e;
+  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
 }
 
 .piggy-bank-card__title-info {
@@ -88,14 +93,14 @@
 }
 
 .piggy-bank-card__name {
-  margin: 0 0 0.375rem 0;
-  font-size: 1.125rem;
+  margin: 0 0 0.5rem 0;
+  font-size: 1.25rem;
   font-weight: 700;
-  color: var(--color-text);
+  color: #1f2937;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  letter-spacing: -0.01em;
+  letter-spacing: -0.02em;
 }
 
 .piggy-bank-card__meta {
@@ -103,8 +108,8 @@
   align-items: center;
   gap: 0.5rem;
   flex-wrap: wrap;
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
+  font-size: 0.8125rem;
+  color: #6b7280;
 }
 
 .piggy-bank-card__meta-item {
@@ -114,170 +119,310 @@
 }
 
 .piggy-bank-card__meta-icon {
-  color: var(--color-text-muted);
+  color: #9ca3af;
 }
 
 .piggy-bank-card__type {
   font-weight: 600;
-  padding: 2px 8px;
-  background: rgba(99, 102, 241, 0.1);
-  color: var(--color-primary);
-  border-radius: var(--radius-full);
+  padding: 3px 10px;
+  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12) 0%, rgba(251, 146, 60, 0.08) 100%);
+  color: #ea580c;
+  border-radius: 20px;
+  font-size: 0.75rem;
 }
 
 .piggy-bank-card__separator {
-  color: var(--glass-border);
+  color: #d1d5db;
 }
 
 .piggy-bank-card__account {
-  color: var(--color-text-secondary);
+  color: #6b7280;
   font-weight: 500;
 }
 
-.piggy-bank-card__amount-section {
+/* Progress Wrapper */
+.piggy-bank-card__progress-wrapper {
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
-  gap: 0.25rem;
-  padding-top: 0.25rem;
+  gap: 0.75rem;
 }
 
-.piggy-bank-card__target {
-  font-size: 1.25rem;
-  font-weight: 800;
-  color: var(--color-text);
-  font-family: 'Outfit', sans-serif;
-  letter-spacing: -0.02em;
-}
-
-.piggy-bank-card__status {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.125rem 0.5rem;
-  border-radius: var(--radius-full);
-  font-size: 0.6875rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.piggy-bank-card__status--completed {
-  background: rgba(34, 197, 94, 0.1);
-  color: var(--color-success);
-}
-
-/* Progress section */
-.piggy-bank-card__progress-section {
-  width: 100%;
-  padding: 0.25rem 0;
-}
-
-/* Footer */
-.piggy-bank-card__footer {
+.piggy-bank-card__progress-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 1rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--glass-border);
-  margin-top: 0.5rem;
 }
 
-.piggy-bank-card__stats {
+.piggy-bank-card__progress-amounts {
   display: flex;
-  gap: 1.5rem;
-  flex: 1;
-  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.25rem;
 }
 
-.piggy-bank-card__stat {
+.piggy-bank-card__current-amount {
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: #f97316;
+  font-family: 'Outfit', system-ui, sans-serif;
+  letter-spacing: -0.02em;
+}
+
+.piggy-bank-card--completed .piggy-bank-card__current-amount {
+  color: #22c55e;
+}
+
+.piggy-bank-card__amount-separator {
+  font-size: 1rem;
+  color: #9ca3af;
+  margin: 0 0.25rem;
+}
+
+.piggy-bank-card__target-amount {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #6b7280;
+  font-family: 'Outfit', system-ui, sans-serif;
+}
+
+.piggy-bank-card__progress-percentage {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #f97316;
+}
+
+.piggy-bank-card--completed .piggy-bank-card__progress-percentage {
+  color: #22c55e;
+}
+
+.piggy-bank-card__completed-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.75rem;
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(74, 222, 128, 0.1) 100%);
+  color: #16a34a;
+  border-radius: 20px;
+  font-size: 0.8125rem;
+  font-weight: 700;
+}
+
+/* Progress Track */
+.piggy-bank-card__progress-track {
+  position: relative;
+  height: 12px;
+  background: linear-gradient(90deg, rgba(249, 115, 22, 0.1) 0%, rgba(251, 146, 60, 0.05) 100%);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.piggy-bank-card--completed .piggy-bank-card__progress-track {
+  background: linear-gradient(90deg, rgba(34, 197, 94, 0.1) 0%, rgba(74, 222, 128, 0.05) 100%);
+}
+
+.piggy-bank-card__progress-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: linear-gradient(90deg, #f97316 0%, #fb923c 50%, #fdba74 100%);
+  border-radius: 12px;
+  transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
+  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
+}
+
+.piggy-bank-card__progress-fill--completed {
+  background: linear-gradient(90deg, #22c55e 0%, #4ade80 50%, #86efac 100%);
+  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
+}
+
+.piggy-bank-card__progress-glow {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 40px;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4));
+  animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.piggy-bank-card__progress-milestones {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+
+.piggy-bank-card__milestone {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 2px;
+  height: 6px;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 1px;
+}
+
+/* Stats Row */
+.piggy-bank-card__stats-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  background: rgba(249, 115, 22, 0.03);
+  border-radius: 12px;
+}
+
+.piggy-bank-card--completed .piggy-bank-card__stats-row {
+  background: rgba(34, 197, 94, 0.03);
+}
+
+.piggy-bank-card__stat-item {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.piggy-bank-card__stat-icon {
+  flex-shrink: 0;
+}
+
+.piggy-bank-card__stat-icon--saved {
+  color: #22c55e;
+}
+
+.piggy-bank-card__stat-icon--remaining {
+  color: #f97316;
+}
+
+.piggy-bank-card__stat-icon--days {
+  color: #6366f1;
+}
+
+.piggy-bank-card__stat-icon--overdue {
+  color: #ef4444;
+}
+
+.piggy-bank-card__stat-content {
   display: flex;
   flex-direction: column;
   gap: 0.125rem;
+  min-width: 0;
 }
 
 .piggy-bank-card__stat-label {
   font-size: 0.6875rem;
   font-weight: 600;
-  color: var(--color-text-secondary);
+  color: #9ca3af;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
 
 .piggy-bank-card__stat-value {
-  font-size: 1.125rem;
+  font-size: 0.9375rem;
   font-weight: 700;
-  color: var(--color-text);
-  font-family: 'Outfit', sans-serif;
+  color: #374151;
+  font-family: 'Outfit', system-ui, sans-serif;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.piggy-bank-card__stat-value--saved {
+  color: #16a34a;
+}
+
+.piggy-bank-card__stat-value--remaining {
+  color: #ea580c;
 }
 
 .piggy-bank-card__stat-value--positive {
-  color: var(--color-success);
+  color: #16a34a;
 }
 
 .piggy-bank-card__stat-value--negative {
-  color: var(--color-error);
+  color: #dc2626;
 }
 
-.piggy-bank-card__stat-value--small {
-  font-size: 0.875rem;
+.piggy-bank-card__stat-divider {
+  width: 1px;
+  height: 32px;
+  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.1), transparent);
+  flex-shrink: 0;
+}
+
+/* Footer / Actions */
+.piggy-bank-card__footer {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: 0.25rem;
-  color: var(--color-text-secondary);
-}
-
-/* Actions */
-.piggy-bank-card__actions {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  opacity: 0.8;
-  transition: opacity 0.2s;
-}
-
-.piggy-bank-card:hover .piggy-bank-card__actions {
-  opacity: 1;
+  gap: 1rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
 }
 
 .piggy-bank-card__quick-actions {
   display: flex;
-  gap: 0.5rem;
+  gap: 0.75rem;
 }
 
 .piggy-bank-card__action-btn {
-  background: var(--glass-bg);
-  border: 1px solid var(--glass-border);
-  padding: 0.5rem;
-  cursor: pointer;
-  border-radius: 50%;
-  font-size: 1rem;
-  transition: all 0.2s ease;
   display: flex;
   align-items: center;
-  justify-content: center;
-  color: var(--color-text-secondary);
-  width: 2rem;
-  height: 2rem;
+  gap: 0.5rem;
+  padding: 0.625rem 1rem;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: #6b7280;
 }
 
 .piggy-bank-card__action-btn:hover {
-  background: white;
-  transform: scale(1.1);
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-.piggy-bank-card__action-btn--deposit:hover {
-  color: var(--color-success);
-  border-color: var(--color-success);
+.piggy-bank-card__action-btn--deposit {
+  color: #16a34a;
+  border-color: rgba(34, 197, 94, 0.3);
   background: rgba(220, 252, 231, 0.5);
 }
 
+.piggy-bank-card__action-btn--deposit:hover {
+  background: rgba(220, 252, 231, 0.8);
+  border-color: #22c55e;
+}
+
+.piggy-bank-card__action-btn--withdraw {
+  color: #ea580c;
+  border-color: rgba(249, 115, 22, 0.3);
+  background: rgba(255, 237, 213, 0.5);
+}
+
 .piggy-bank-card__action-btn--withdraw:hover {
-  color: var(--color-warning);
-  border-color: var(--color-warning);
-  background: rgba(254, 243, 199, 0.5);
+  background: rgba(255, 237, 213, 0.8);
+  border-color: #f97316;
 }
 
 /* Menu */
@@ -288,10 +433,10 @@
 .piggy-bank-card__menu-btn {
   background: transparent;
   border: none;
-  padding: 0.25rem;
+  padding: 0.5rem;
   cursor: pointer;
-  border-radius: var(--radius-md);
-  color: var(--color-text-secondary);
+  border-radius: 8px;
+  color: #9ca3af;
   transition: all 0.2s ease;
   display: flex;
   align-items: center;
@@ -300,25 +445,34 @@
 
 .piggy-bank-card__menu-btn:hover {
   background: rgba(0, 0, 0, 0.05);
-  color: var(--color-text);
+  color: #374151;
 }
 
 .piggy-bank-card__menu-dropdown {
   position: absolute;
-  top: 100%;
+  bottom: 100%;
   right: 0;
-  margin-top: 0.5rem;
-  background: var(--glass-panel-bg);
-  backdrop-filter: blur(16px);
-  /* Strong blur for menu */
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-xl);
-  z-index: 10;
-  min-width: 150px;
+  margin-bottom: 0.5rem;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  z-index: 100;
+  min-width: 140px;
   overflow: hidden;
-  animation: scaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
-  transform-origin: top right;
+  animation: slideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .piggy-bank-card__menu-item {
@@ -333,86 +487,81 @@
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--color-text);
-  transition: background 0.2s ease;
+  color: #374151;
+  transition: background 0.15s ease;
 }
 
 .piggy-bank-card__menu-item:hover {
-  background: rgba(0, 0, 0, 0.05);
+  background: #f9fafb;
 }
 
 .piggy-bank-card__menu-item--danger {
-  color: var(--color-error);
+  color: #dc2626;
 }
 
 .piggy-bank-card__menu-item--danger:hover {
-  background: rgba(239, 68, 68, 0.1);
+  background: #fef2f2;
 }
 
 /* Mobile */
 @media (max-width: 768px) {
   .piggy-bank-card {
     padding: 1.25rem;
-  }
-
-  .piggy-bank-card__header {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0.75rem;
-  }
-
-  .piggy-bank-card__amount-section {
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 0.5rem;
-    border-bottom: 1px dashed var(--glass-border);
-    margin-bottom: 0.5rem;
+    gap: 1rem;
   }
 
   .piggy-bank-card__name {
     font-size: 1.125rem;
   }
 
-  .piggy-bank-card__target {
+  .piggy-bank-card__current-amount {
     font-size: 1.25rem;
   }
 
   .piggy-bank-card__icon {
-    width: 2.5rem;
-    height: 2.5rem;
+    width: 3rem;
+    height: 3rem;
   }
 
-  .piggy-bank-card__icon svg {
-    width: 1.25rem;
-    height: 1.25rem;
+  .piggy-bank-card__stats-row {
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    padding: 0.875rem;
+  }
+
+  .piggy-bank-card__stat-item {
+    flex: 1 1 calc(50% - 0.5rem);
+    min-width: 100px;
+  }
+
+  .piggy-bank-card__stat-divider {
+    display: none;
+  }
+
+  .piggy-bank-card__footer {
+    flex-wrap: wrap;
+  }
+
+  .piggy-bank-card__quick-actions {
+    flex: 1;
+  }
+
+  .piggy-bank-card__action-btn {
+    flex: 1;
+    justify-content: center;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.8125rem;
   }
 }
 
 @media (max-width: 480px) {
-  .piggy-bank-card {
-    gap: 0.75rem;
+  .piggy-bank-card__stat-item {
+    flex: 1 1 100%;
   }
 
-  .piggy-bank-card__stats {
-    gap: 1rem;
-  }
-
-  .piggy-bank-card__stat-value {
-    font-size: 1rem;
-  }
-
-  .piggy-bank-card__footer {
+  .piggy-bank-card__progress-header {
     flex-direction: column;
-    align-items: stretch;
-    gap: 0.75rem;
-  }
-
-  .piggy-bank-card__actions {
-    justify-content: space-between;
-    opacity: 1;
-    border-top: 1px dashed var(--glass-border);
-    padding-top: 0.75rem;
-    /* Move menu to right for consistency if needed, though flex container default is row */
+    align-items: flex-start;
+    gap: 0.5rem;
   }
 }
\ No newline at end of file
diff --git a/src/components/budget/PiggyBankCard/PiggyBankCard.tsx b/src/components/budget/PiggyBankCard/PiggyBankCard.tsx
index b23602f..74d4aa5 100644
--- a/src/components/budget/PiggyBankCard/PiggyBankCard.tsx
+++ b/src/components/budget/PiggyBankCard/PiggyBankCard.tsx
@@ -1,6 +1,7 @@
 /**
  * PiggyBankCard Component
  * Displays a single piggy bank (savings goal) with progress and actions
+ * Enhanced with beautiful progress bar and improved UI
  */
 
 import React, { useState } from 'react';
@@ -9,10 +10,8 @@ import { formatCurrency } from '../../../utils/format';
 import {
   getPiggyBankTypeLabel,
   calculateDaysRemaining,
-  estimateCompletionDate,
 } from '../../../services/piggyBankService';
 import { Icon } from '@iconify/react';
-import BudgetProgress from '../BudgetProgress/BudgetProgress';
 import './PiggyBankCard.css';
 
 interface PiggyBankCardProps {
@@ -37,13 +36,11 @@ export const PiggyBankCard: React.FC<PiggyBankCardProps> = ({
   const [showActions, setShowActions] = useState(false);
   const typeLabel = getPiggyBankTypeLabel(piggyBank.type);
   const remaining = piggyBank.targetAmount - piggyBank.currentAmount;
-  const isCompleted = piggyBank.progress >= 100;
+  const progress = piggyBank.targetAmount > 0
+    ? Math.min((piggyBank.currentAmount / piggyBank.targetAmount) * 100, 100)
+    : 0;
+  const isCompleted = progress >= 100;
   const daysRemaining = calculateDaysRemaining(piggyBank.targetDate);
-  const estimatedDate = estimateCompletionDate(
-    piggyBank.currentAmount,
-    piggyBank.targetAmount,
-    piggyBank.createdAt
-  );
 
   const handleClick = () => {
     onClick?.(piggyBank);
@@ -51,11 +48,13 @@ export const PiggyBankCard: React.FC<PiggyBankCardProps> = ({
 
   const handleEdit = (e: React.MouseEvent) => {
     e.stopPropagation();
+    setShowActions(false);
     onEdit?.(piggyBank);
   };
 
   const handleDelete = (e: React.MouseEvent) => {
     e.stopPropagation();
+    setShowActions(false);
     onDelete?.(piggyBank);
   };
 
@@ -74,10 +73,14 @@ export const PiggyBankCard: React.FC<PiggyBankCardProps> = ({
     setShowActions(!showActions);
   };
 
+  // Close menu when clicking outside
+  const handleBlur = () => {
+    setTimeout(() => setShowActions(false), 200);
+  };
+
   return (
     <div
-      className={`piggy-bank-card ${onClick ? 'piggy-bank-card--clickable' : ''} ${isCompleted ? 'piggy-bank-card--completed' : ''
-        }`}
+      className={`piggy-bank-card ${onClick ? 'piggy-bank-card--clickable' : ''} ${isCompleted ? 'piggy-bank-card--completed' : ''}`}
       onClick={handleClick}
       role={onClick ? 'button' : undefined}
       tabIndex={onClick ? 0 : undefined}
@@ -87,10 +90,15 @@ export const PiggyBankCard: React.FC<PiggyBankCardProps> = ({
         }
       }}
     >
+      {/* Header */}
       <div className="piggy-bank-card__header">
         <div className="piggy-bank-card__title-section">
           <div className="piggy-bank-card__icon">
-            <Icon icon="solar:safe-square-bold-duotone" width="24" className="text-accent" />
+            {isCompleted ? (
+              <Icon icon="solar:cup-star-bold-duotone" width="28" />
+            ) : (
+              <Icon icon="solar:piggy-bank-bold-duotone" width="28" />
+            )}
           </div>
           <div className="piggy-bank-card__title-info">
             <h3 className="piggy-bank-card__name">{piggyBank.name}</h3>
@@ -108,127 +116,156 @@ export const PiggyBankCard: React.FC<PiggyBankCardProps> = ({
             </div>
           </div>
         </div>
-        <div className="piggy-bank-card__amount-section">
-          <div className="piggy-bank-card__target">
-            {formatCurrency(piggyBank.targetAmount, 'CNY')}
+      </div>
+
+      {/* Beautiful Progress Section */}
+      <div className="piggy-bank-card__progress-wrapper">
+        <div className="piggy-bank-card__progress-header">
+          <div className="piggy-bank-card__progress-amounts">
+            <span className="piggy-bank-card__current-amount">
+              {formatCurrency(piggyBank.currentAmount, 'CNY')}
+            </span>
+            <span className="piggy-bank-card__amount-separator">/</span>
+            <span className="piggy-bank-card__target-amount">
+              {formatCurrency(piggyBank.targetAmount, 'CNY')}
+            </span>
+          </div>
+          <div className="piggy-bank-card__progress-percentage">
+            {isCompleted ? (
+              <span className="piggy-bank-card__completed-badge">
+                <Icon icon="solar:verified-check-bold" width="14" />
+                达成目标
+              </span>
+            ) : (
+              <span>{progress.toFixed(1)}%</span>
+            )}
+          </div>
+        </div>
+
+        {/* Progress Bar */}
+        <div className="piggy-bank-card__progress-track">
+          <div
+            className={`piggy-bank-card__progress-fill ${isCompleted ? 'piggy-bank-card__progress-fill--completed' : ''}`}
+            style={{ width: `${progress}%` }}
+          >
+            <div className="piggy-bank-card__progress-glow"></div>
+          </div>
+          {/* Milestone markers */}
+          <div className="piggy-bank-card__progress-milestones">
+            <div className="piggy-bank-card__milestone" style={{ left: '25%' }} />
+            <div className="piggy-bank-card__milestone" style={{ left: '50%' }} />
+            <div className="piggy-bank-card__milestone" style={{ left: '75%' }} />
           </div>
-          {isCompleted && (
-            <div className="piggy-bank-card__status piggy-bank-card__status--completed">
-              <Icon icon="solar:check-circle-bold-duotone" width="12" /> 已完成
-            </div>
-          )}
         </div>
       </div>
 
-      <div className="piggy-bank-card__progress-section">
-        <BudgetProgress
-          progress={piggyBank.progress}
-          spent={piggyBank.currentAmount}
-          total={piggyBank.targetAmount}
-          size="medium"
-        />
-      </div>
-
-      <div className="piggy-bank-card__footer">
-        <div className="piggy-bank-card__stats">
-          <div className="piggy-bank-card__stat">
-            <span className="piggy-bank-card__stat-label">已存</span>
-            <span className="piggy-bank-card__stat-value">
+      {/* Stats Row */}
+      <div className="piggy-bank-card__stats-row">
+        <div className="piggy-bank-card__stat-item">
+          <Icon icon="solar:wallet-money-bold-duotone" width="16" className="piggy-bank-card__stat-icon piggy-bank-card__stat-icon--saved" />
+          <div className="piggy-bank-card__stat-content">
+            <span className="piggy-bank-card__stat-label">已存入</span>
+            <span className="piggy-bank-card__stat-value piggy-bank-card__stat-value--saved">
               {formatCurrency(piggyBank.currentAmount, 'CNY')}
             </span>
           </div>
-          <div className="piggy-bank-card__stat">
-            <span className="piggy-bank-card__stat-label">
-              {isCompleted ? '超出' : '还需'}
-            </span>
-            <span
-              className={`piggy-bank-card__stat-value ${isCompleted ? 'piggy-bank-card__stat-value--positive' : ''
-                }`}
-            >
+        </div>
+
+        <div className="piggy-bank-card__stat-divider" />
+
+        <div className="piggy-bank-card__stat-item">
+          <Icon icon="solar:target-bold-duotone" width="16" className="piggy-bank-card__stat-icon piggy-bank-card__stat-icon--remaining" />
+          <div className="piggy-bank-card__stat-content">
+            <span className="piggy-bank-card__stat-label">{isCompleted ? '已超额' : '还需存'}</span>
+            <span className={`piggy-bank-card__stat-value ${isCompleted ? 'piggy-bank-card__stat-value--positive' : 'piggy-bank-card__stat-value--remaining'}`}>
               {formatCurrency(Math.abs(remaining), 'CNY')}
             </span>
           </div>
-          {daysRemaining !== null && (
-            <div className="piggy-bank-card__stat">
-              <span className="piggy-bank-card__stat-label">
-                {daysRemaining > 0 ? '剩余天数' : '已超期'}
-              </span>
-              <span
-                className={`piggy-bank-card__stat-value ${daysRemaining < 0 ? 'piggy-bank-card__stat-value--negative' : ''
-                  }`}
-              >
-                {Math.abs(daysRemaining)} 天
-              </span>
+        </div>
+
+        {daysRemaining !== null && (
+          <>
+            <div className="piggy-bank-card__stat-divider" />
+            <div className="piggy-bank-card__stat-item">
+              <Icon
+                icon={daysRemaining > 0 ? "solar:calendar-bold-duotone" : "solar:alarm-bold-duotone"}
+                width="16"
+                className={`piggy-bank-card__stat-icon ${daysRemaining > 0 ? 'piggy-bank-card__stat-icon--days' : 'piggy-bank-card__stat-icon--overdue'}`}
+              />
+              <div className="piggy-bank-card__stat-content">
+                <span className="piggy-bank-card__stat-label">
+                  {daysRemaining > 0 ? '剩余' : '已超期'}
+                </span>
+                <span className={`piggy-bank-card__stat-value ${daysRemaining < 0 ? 'piggy-bank-card__stat-value--negative' : ''}`}>
+                  {Math.abs(daysRemaining)} 天
+                </span>
+              </div>
             </div>
+          </>
+        )}
+      </div>
+
+      {/* Actions */}
+      <div className="piggy-bank-card__footer">
+        <div className="piggy-bank-card__quick-actions">
+          {onDeposit && (
+            <button
+              className="piggy-bank-card__action-btn piggy-bank-card__action-btn--deposit"
+              onClick={handleDeposit}
+              aria-label="存入"
+              title="存入"
+            >
+              <Icon icon="solar:add-circle-bold-duotone" width="18" />
+              <span>存入</span>
+            </button>
           )}
-          {!piggyBank.targetDate && estimatedDate && !isCompleted && (
-            <div className="piggy-bank-card__stat">
-              <span className="piggy-bank-card__stat-label">预计完成</span>
-              <span className="piggy-bank-card__stat-value piggy-bank-card__stat-value--small">
-                <Icon icon="solar:calendar-date-bold-duotone" width="12" className="inline-block mr-1" />
-                {estimatedDate}
-              </span>
-            </div>
+          {onWithdraw && (
+            <button
+              className="piggy-bank-card__action-btn piggy-bank-card__action-btn--withdraw"
+              onClick={handleWithdraw}
+              aria-label="取出"
+              title="取出"
+            >
+              <Icon icon="solar:minus-circle-bold-duotone" width="18" />
+              <span>取出</span>
+            </button>
           )}
         </div>
 
-        <div className="piggy-bank-card__actions">
-          {(onDeposit || onWithdraw) && (
-            <div className="piggy-bank-card__quick-actions">
-              {onDeposit && (
-                <button
-                  className="piggy-bank-card__action-btn piggy-bank-card__action-btn--deposit"
-                  onClick={handleDeposit}
-                  aria-label="存入"
-                  title="存入"
-                >
-                  <Icon icon="solar:graph-up-bold-duotone" width="16" />
-                </button>
-              )}
-              {onWithdraw && (
-                <button
-                  className="piggy-bank-card__action-btn piggy-bank-card__action-btn--withdraw"
-                  onClick={handleWithdraw}
-                  aria-label="取出"
-                  title="取出"
-                >
-                  <Icon icon="solar:graph-down-bold-duotone" width="16" />
-                </button>
-              )}
-            </div>
-          )}
-          {(onEdit || onDelete) && (
-            <div className="piggy-bank-card__menu">
-              <button
-                className="piggy-bank-card__menu-btn"
-                onClick={toggleActions}
-                aria-label="更多操作"
-              >
-                <Icon icon="solar:menu-dots-bold-duotone" width="16" />
-              </button>
-              {showActions && (
-                <div className="piggy-bank-card__menu-dropdown">
-                  {onEdit && (
-                    <button
-                      className="piggy-bank-card__menu-item"
-                      onClick={handleEdit}
-                    >
-                      <Icon icon="solar:pen-new-square-bold-duotone" width="14" /> 编辑
-                    </button>
-                  )}
-                  {onDelete && (
-                    <button
-                      className="piggy-bank-card__menu-item piggy-bank-card__menu-item--danger"
-                      onClick={handleDelete}
-                    >
-                      <Icon icon="solar:trash-bin-trash-bold-duotone" width="14" /> 删除
-                    </button>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
-        </div>
+        {(onEdit || onDelete) && (
+          <div className="piggy-bank-card__menu">
+            <button
+              className="piggy-bank-card__menu-btn"
+              onClick={toggleActions}
+              onBlur={handleBlur}
+              aria-label="更多操作"
+            >
+              <Icon icon="solar:menu-dots-bold" width="20" />
+            </button>
+            {showActions && (
+              <div className="piggy-bank-card__menu-dropdown">
+                {onEdit && (
+                  <button
+                    className="piggy-bank-card__menu-item"
+                    onClick={handleEdit}
+                  >
+                    <Icon icon="solar:pen-new-square-bold-duotone" width="16" />
+                    <span>编辑</span>
+                  </button>
+                )}
+                {onDelete && (
+                  <button
+                    className="piggy-bank-card__menu-item piggy-bank-card__menu-item--danger"
+                    onClick={handleDelete}
+                  >
+                    <Icon icon="solar:trash-bin-trash-bold-duotone" width="16" />
+                    <span>删除</span>
+                  </button>
+                )}
+              </div>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/components/transaction/TransactionForm/TransactionForm.tsx b/src/components/transaction/TransactionForm/TransactionForm.tsx
index 3cd0a86..f973137 100644
--- a/src/components/transaction/TransactionForm/TransactionForm.tsx
+++ b/src/components/transaction/TransactionForm/TransactionForm.tsx
@@ -375,7 +375,13 @@ export const TransactionForm: React.FC<TransactionFormProps> = ({
                 onClick={() => handleAccountChange(account.id)}
                 disabled={loading}
               >
-                <span className="transaction-form__account-icon">{account.icon}</span>
+                <span className="transaction-form__account-icon">
+                  {account.icon && account.icon.includes(':') ? (
+                    <Icon icon={account.icon} width="20" />
+                  ) : (
+                    account.icon || '💰'
+                  )}
+                </span>
                 <span className="transaction-form__account-name">{account.name}</span>
                 <span className="transaction-form__account-balance">
                   {getCurrencySymbol(account.currency)}
@@ -410,13 +416,21 @@ export const TransactionForm: React.FC<TransactionFormProps> = ({
         <div className="transaction-form__summary-row">
           <span className="transaction-form__summary-label">分类</span>
           <span className="transaction-form__summary-value">
-            {selectedCategory?.icon} {selectedCategory?.name || '未选择'}
+            {selectedCategory?.icon && selectedCategory.icon.includes(':') ? (
+              <Icon icon={selectedCategory.icon} width="16" style={{ marginRight: 4, verticalAlign: 'middle' }} />
+            ) : (
+              selectedCategory?.icon
+            )} {selectedCategory?.name || '未选择'}
           </span>
         </div>
         <div className="transaction-form__summary-row">
           <span className="transaction-form__summary-label">账户</span>
           <span className="transaction-form__summary-value">
-            {selectedAccount?.icon} {selectedAccount?.name || '未选择'}
+            {selectedAccount?.icon && selectedAccount.icon.includes(':') ? (
+              <Icon icon={selectedAccount.icon} width="16" style={{ marginRight: 4, verticalAlign: 'middle' }} />
+            ) : (
+              selectedAccount?.icon
+            )} {selectedAccount?.name || '未选择'}
           </span>
         </div>
       </div>