feat: 添加收入分配规则管理页面及账户、转账、交易、分配规则等相关组件的图标渲染

src/components/account/AccountCard/AccountCard.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 import type { Account, AccountType } from '../../../types';
 import { formatCurrency } from '../../../utils/format';
 import { Icon } from '@iconify/react';
+import { isIconifyIcon } from '../../../utils/iconUtils';
 import './AccountCard.css';
 
 interface AccountCardProps {
@@ -101,7 +102,9 @@ export const AccountCard: React.FC<AccountCardProps> = ({
 
       <div className="account-card__header">
         <div className="account-card__icon-wrapper">
-          <div className="account-card__icon">{icon}</div>
+          <div className="account-card__icon">
+            {isIconifyIcon(icon) ? <Icon icon={icon} width="24" /> : icon}
+          </div>
         </div>
         <div className="account-card__actions-overlay">
           {onEdit && (

src/components/account/TransferForm/TransferForm.tsx

@@ -6,6 +6,7 @@
 import React, { useState, useEffect } from 'react';
 import type { Account, TransferFormInput } from '../../../types';
 import { formatCurrency } from '../../../utils/format';
+import { getDisplayIcon } from '../../../utils/iconUtils';
 import './TransferForm.css';
 
 interface TransferFormProps {
@@ -136,7 +137,7 @@ export const TransferForm: React.FC<TransferFormProps> = ({
           <option value={0}>请选择转出账户</option>
           {accounts.map((account) => (
             <option key={account.id} value={account.id}>
-              {account.icon} {account.name} ({formatCurrency(account.balance, account.currency)})
+              {getDisplayIcon(account.icon)} {account.name} ({formatCurrency(account.balance, account.currency)})
             </option>
           ))}
         </select>
@@ -179,7 +180,7 @@ export const TransferForm: React.FC<TransferFormProps> = ({
           <option value={0}>请选择转入账户</option>
           {availableToAccounts.map((account) => (
             <option key={account.id} value={account.id}>
-              {account.icon} {account.name} ({formatCurrency(account.balance, account.currency)})
+              {getDisplayIcon(account.icon)} {account.name} ({formatCurrency(account.balance, account.currency)})
             </option>
           ))}
         </select>

src/components/budget/AllocationRuleForm/AllocationRuleForm.tsx

@@ -12,6 +12,7 @@ import type {
   AllocationTargetInput,
 } from '../../../services/allocationRuleService';
 import { getTargetTypeLabel } from '../../../services/allocationRuleService';
+import { getDisplayIcon } from '../../../utils/iconUtils';
 import './AllocationRuleForm.css';
 
 interface AllocationRuleFormProps {
@@ -283,7 +284,7 @@ export const AllocationRuleForm: React.FC<AllocationRuleFormProps> = ({
               <option value="">所有账户（任意账户收入都触发）</option>
               {accounts.map((account) => (
                 <option key={account.id} value={account.id}>
-                  {account.icon} {account.name}
+                  {getDisplayIcon(account.icon)} {account.name}
                 </option>
               ))}
             </select>
@@ -382,7 +383,7 @@ export const AllocationRuleForm: React.FC<AllocationRuleFormProps> = ({
                         ) : (
                           accounts.map((account) => (
                             <option key={account.id} value={account.id}>
-                              {account.icon} {account.name}
+                              {getDisplayIcon(account.icon)} {account.name}
                             </option>
                           ))
                         )

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: 1px solid rgba(249, 115, 22, 0.15);
-  border-radius: var(--radius-xl);
+  border-radius: 20px;
-  box-shadow: var(--shadow-sm);
+  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;
-  overflow: hidden;
 }
 
 .piggy-bank-card::before {
@@ -24,8 +26,8 @@
   left: 0;
   right: 0;
   height: 4px;
-  background: var(--color-accent);
+  background: linear-gradient(90deg, #f97316 0%, #fb923c 50%, #fdba74 100%);
-  opacity: 0.8;
+  border-radius: 20px 20px 0 0;
 }
 
 .piggy-bank-card--clickable {
@@ -34,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%);
+  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.3);
+  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 */
@@ -65,19 +69,21 @@
 
 .piggy-bank-card__icon {
   flex-shrink: 0;
-  width: 3rem;
+  width: 3.5rem;
-  height: 3rem;
+  height: 3.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(249, 115, 22, 0.1);
+  background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(251, 146, 60, 0.1) 100%);
-  border-radius: var(--radius-lg);
+  border-radius: 16px;
-  color: var(--color-accent);
+  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);
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(74, 222, 128, 0.1) 100%);
-  color: var(--color-success);
+  color: #22c55e;
+  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
 }
 
 .piggy-bank-card__title-info {
@@ -87,14 +93,14 @@
 }
 
 .piggy-bank-card__name {
-  margin: 0 0 0.375rem 0;
+  margin: 0 0 0.5rem 0;
-  font-size: 1.125rem;
+  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 {
@@ -102,8 +108,8 @@
   align-items: center;
   gap: 0.5rem;
   flex-wrap: wrap;
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
-  color: var(--color-text-secondary);
+  color: #6b7280;
 }
 
 .piggy-bank-card__meta-item {
@@ -113,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;
+  padding: 3px 10px;
-  background: rgba(99, 102, 241, 0.1);
+  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12) 0%, rgba(251, 146, 60, 0.08) 100%);
-  color: var(--color-primary);
+  color: #ea580c;
-  border-radius: var(--radius-full);
+  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.75rem;
-  gap: 0.25rem;
-  padding-top: 0.25rem;
 }
 
-.piggy-bank-card__target {
+.piggy-bank-card__progress-header {
-  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 {
   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;
+  align-items: baseline;
-  flex: 1;
+  gap: 0.25rem;
-  flex-wrap: wrap;
 }
 
-.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);
+  color: #374151;
-  font-family: 'Outfit', sans-serif;
+  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 {
+.piggy-bank-card__stat-divider {
-  font-size: 0.875rem;
+  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;
+  gap: 1rem;
-  color: var(--color-text-secondary);
+  padding-top: 0.75rem;
-}
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
-
-/* 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;
 }
 
 .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;
+  gap: 0.5rem;
-  color: var(--color-text-secondary);
+  padding: 0.625rem 1rem;
-  width: 2rem;
+  background: white;
-  height: 2rem;
+  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: translateY(-2px);
-  transform: scale(1.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
 }
 
-.piggy-bank-card__action-btn--deposit:hover {
+.piggy-bank-card__action-btn--deposit {
-  color: var(--color-success);
+  color: #16a34a;
-  border-color: var(--color-success);
+  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);
+  background: rgba(255, 237, 213, 0.8);
-  border-color: var(--color-warning);
+  border-color: #f97316;
-  background: rgba(254, 243, 199, 0.5);
 }
 
 /* Menu */
@@ -287,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);
+  border-radius: 8px;
-  color: var(--color-text-secondary);
+  color: #9ca3af;
   transition: all 0.2s ease;
   display: flex;
   align-items: center;
@@ -299,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;
+  margin-bottom: 0.5rem;
-  background: var(--glass-panel-bg);
+  background: white;
-  backdrop-filter: blur(16px);
+  border: 1px solid #e5e7eb;
-  /* Strong blur for menu */
+  border-radius: 12px;
-  border: 1px solid var(--glass-border);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
-  border-radius: var(--radius-lg);
+  z-index: 100;
-  box-shadow: var(--shadow-xl);
+  min-width: 140px;
-  z-index: 10;
-  min-width: 150px;
   overflow: hidden;
-  animation: scaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  animation: slideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
-  transform-origin: top right;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .piggy-bank-card__menu-item {
@@ -332,86 +487,81 @@
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--color-text);
+  color: #374151;
-  transition: background 0.2s ease;
+  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;
-  }
+    gap: 1rem;
-
-  .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;
   }
 
   .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;
+    width: 3rem;
-    height: 2.5rem;
+    height: 3rem;
   }
 
-  .piggy-bank-card__icon svg {
+  .piggy-bank-card__stats-row {
-    width: 1.25rem;
+    flex-wrap: wrap;
-    height: 1.25rem;
+    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 {
+  .piggy-bank-card__stat-item {
-    gap: 0.75rem;
+    flex: 1 1 100%;
   }
 
-  .piggy-bank-card__stats {
+  .piggy-bank-card__progress-header {
-    gap: 1rem;
-  }
-
-  .piggy-bank-card__stat-value {
-    font-size: 1rem;
-  }
-
-  .piggy-bank-card__footer {
     flex-direction: column;
-    align-items: stretch;
+    align-items: flex-start;
-    gap: 0.75rem;
+    gap: 0.5rem;
-  }
-
-  .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 */
   }
 }

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>
-          <div className="piggy-bank-card__target">
+
-            {formatCurrency(piggyBank.targetAmount, 'CNY')}
+      {/* 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">
+      {/* Stats Row */}
-        <BudgetProgress
+      <div className="piggy-bank-card__stats-row">
-          progress={piggyBank.progress}
+        <div className="piggy-bank-card__stat-item">
-          spent={piggyBank.currentAmount}
+          <Icon icon="solar:wallet-money-bold-duotone" width="16" className="piggy-bank-card__stat-icon piggy-bank-card__stat-icon--saved" />
-          total={piggyBank.targetAmount}
+          <div className="piggy-bank-card__stat-content">
-          size="medium"
+            <span className="piggy-bank-card__stat-label">已存入</span>
-        />
+            <span className="piggy-bank-card__stat-value piggy-bank-card__stat-value--saved">
-      </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">
               {formatCurrency(piggyBank.currentAmount, 'CNY')}
             </span>
           </div>
-          <div className="piggy-bank-card__stat">
+        </div>
-            <span className="piggy-bank-card__stat-label">
+
-              {isCompleted ? '超出' : '还需'}
+        <div className="piggy-bank-card__stat-divider" />
-            </span>
+
-            <span
+        <div className="piggy-bank-card__stat-item">
-              className={`piggy-bank-card__stat-value ${isCompleted ? 'piggy-bank-card__stat-value--positive' : ''
+          <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>
-            <div className="piggy-bank-card__stat">
+
-              <span className="piggy-bank-card__stat-label">
+        {daysRemaining !== null && (
-                {daysRemaining > 0 ? '剩余天数' : '已超期'}
+          <>
-              </span>
+            <div className="piggy-bank-card__stat-divider" />
-              <span
+            <div className="piggy-bank-card__stat-item">
-                className={`piggy-bank-card__stat-value ${daysRemaining < 0 ? 'piggy-bank-card__stat-value--negative' : ''
+              <Icon
-                  }`}
+                icon={daysRemaining > 0 ? "solar:calendar-bold-duotone" : "solar:alarm-bold-duotone"}
-              >
+                width="16"
-                {Math.abs(daysRemaining)} 天
+                className={`piggy-bank-card__stat-icon ${daysRemaining > 0 ? 'piggy-bank-card__stat-icon--days' : 'piggy-bank-card__stat-icon--overdue'}`}
-              </span>
+              />
+              <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 && (
+          {onWithdraw && (
-            <div className="piggy-bank-card__stat">
+            <button
-              <span className="piggy-bank-card__stat-label">预计完成</span>
+              className="piggy-bank-card__action-btn piggy-bank-card__action-btn--withdraw"
-              <span className="piggy-bank-card__stat-value piggy-bank-card__stat-value--small">
+              onClick={handleWithdraw}
-                <Icon icon="solar:calendar-date-bold-duotone" width="12" className="inline-block mr-1" />
+              aria-label="取出"
-                {estimatedDate}
+              title="取出"
-              </span>
+            >
-            </div>
+              <Icon icon="solar:minus-circle-bold-duotone" width="18" />
+              <span>取出</span>
+            </button>
           )}
         </div>
 
-        <div className="piggy-bank-card__actions">
+        {(onEdit || onDelete) && (
-          {(onDeposit || onWithdraw) && (
+          <div className="piggy-bank-card__menu">
-            <div className="piggy-bank-card__quick-actions">
+            <button
-              {onDeposit && (
+              className="piggy-bank-card__menu-btn"
-                <button
+              onClick={toggleActions}
-                  className="piggy-bank-card__action-btn piggy-bank-card__action-btn--deposit"
+              onBlur={handleBlur}
-                  onClick={handleDeposit}
+              aria-label="更多操作"
-                  aria-label="存入"
+            >
-                  title="存入"
+              <Icon icon="solar:menu-dots-bold" width="20" />
-                >
+            </button>
-                  <Icon icon="solar:graph-up-bold-duotone" width="16" />
+            {showActions && (
-                </button>
+              <div className="piggy-bank-card__menu-dropdown">
-              )}
+                {onEdit && (
-              {onWithdraw && (
+                  <button
-                <button
+                    className="piggy-bank-card__menu-item"
-                  className="piggy-bank-card__action-btn piggy-bank-card__action-btn--withdraw"
+                    onClick={handleEdit}
-                  onClick={handleWithdraw}
+                  >
-                  aria-label="取出"
+                    <Icon icon="solar:pen-new-square-bold-duotone" width="16" />
-                  title="取出"
+                    <span>编辑</span>
-                >
+                  </button>
-                  <Icon icon="solar:graph-down-bold-duotone" width="16" />
+                )}
-                </button>
+                {onDelete && (
-              )}
+                  <button
-            </div>
+                    className="piggy-bank-card__menu-item piggy-bank-card__menu-item--danger"
-          )}
+                    onClick={handleDelete}
-          {(onEdit || onDelete) && (
+                  >
-            <div className="piggy-bank-card__menu">
+                    <Icon icon="solar:trash-bin-trash-bold-duotone" width="16" />
-              <button
+                    <span>删除</span>
-                className="piggy-bank-card__menu-btn"
+                  </button>
-                onClick={toggleActions}
+                )}
-                aria-label="更多操作"
+              </div>
-              >
+            )}
-                <Icon icon="solar:menu-dots-bold-duotone" width="16" />
+          </div>
-              </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>
       </div>
     </div>
   );

src/components/transaction/RecurringTransactionForm/RecurringTransactionForm.tsx

@@ -21,6 +21,7 @@ import {
   calculateNextOccurrence,
 } from '../../../services/recurringTransactionService';
 import { Icon } from '@iconify/react';
+import { getDisplayIcon } from '../../../utils/iconUtils';
 import './RecurringTransactionForm.css';
 
 interface RecurringTransactionFormProps {
@@ -417,7 +418,7 @@ export const RecurringTransactionForm: React.FC<RecurringTransactionFormProps> =
               <option value={0}>请选择账户</option>
               {accounts.map((account) => (
                 <option key={account.id} value={account.id}>
-                  {account.icon} {account.name} ({getCurrencySymbol(account.currency)}
+                  {getDisplayIcon(account.icon)} {account.name} ({getCurrencySymbol(account.currency)}
                   {account.balance.toFixed(2)})
                 </option>
               ))}

src/components/transaction/TransactionFilter/TransactionFilter.tsx

@@ -9,6 +9,7 @@ import { Icon } from '@iconify/react';
 import type { Category, Account, TransactionType } from '../../../types';
 import { getCategories } from '../../../services/categoryService';
 import { getAccounts } from '../../../services/accountService';
+import { getDisplayIcon } from '../../../utils/iconUtils';
 import './TransactionFilter.css';
 
 export interface FilterValues {
@@ -256,8 +257,8 @@ export const TransactionFilter: React.FC<TransactionFilterProps> = ({
                 <button
                   key={option.value || 'all'}
                   className={`transaction-filter__type-btn ${(values.type || '') === option.value
-                      ? 'transaction-filter__type-btn--active'
+                    ? 'transaction-filter__type-btn--active'
-                      : ''
+                    : ''
                     }`}
                   onClick={() => handleChange('type', option.value as TransactionType | undefined)}
                 >
@@ -301,7 +302,7 @@ export const TransactionFilter: React.FC<TransactionFilterProps> = ({
               <option value="">全部账户</option>
               {accounts.map((account) => (
                 <option key={account.id} value={account.id}>
-                  {account.icon} {account.name}
+                  {getDisplayIcon(account.icon)} {account.name}
                 </option>
               ))}
             </select>

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>

src/components/transaction/TransactionItem/TransactionItem.tsx

@@ -7,6 +7,7 @@
 import React from 'react';
 import { Icon } from '@iconify/react';
 import type { Transaction, Category } from '../../../types';
+import { isIconifyIcon } from '../../../utils/iconUtils';
 import './TransactionItem.css';
 
 interface TransactionItemProps {
@@ -108,7 +109,11 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
     >
       {/* 图标 */}
       <div className={`transaction-item-icon ${transaction.type}`}>
-        <Icon icon={getCategoryIcon()} width={compact ? 18 : 22} />
+        {isIconifyIcon(getCategoryIcon()) ? (
+          <Icon icon={getCategoryIcon()} width={compact ? 18 : 22} />
+        ) : (
+          <span style={{ fontSize: compact ? 18 : 22 }}>{getCategoryIcon()}</span>
+        )}
       </div>
 
       {/* 主要信息 */}

src/pages/AllocationRules/AllocationRules.tsx

@@ -19,6 +19,7 @@ import {
 } from '../../services/allocationRuleService';
 import { getAccounts } from '../../services/accountService';
 import { getPiggyBanks } from '../../services/piggyBankService';
+import { getDisplayIcon } from '../../utils/iconUtils';
 import './AllocationRules.css';
 
 function AllocationRules() {
@@ -110,7 +111,7 @@ function AllocationRules() {
   const getTargetName = (targetType: string, targetId: number): string => {
     if (targetType === 'account') {
       const account = accounts.find((a) => a.id === targetId);
-      return account ? `${account.icon} ${account.name}` : '未知账户';
+      return account ? `${getDisplayIcon(account.icon)} ${account.name}` : '未知账户';
     } else {
       const piggyBank = piggyBanks.find((p) => p.id === targetId);
       return piggyBank ? `🐷 ${piggyBank.name}` : '未知存钱罐';

src/utils/iconUtils.ts

@@ -0,0 +1,45 @@
+/**
+ * Icon Utilities
+ * Helper functions for rendering account/category icons consistently
+ */
+
+/**
+ * Check if an icon string is an Iconify icon format (contains :)
+ */
+export function isIconifyIcon(icon: string | undefined | null): boolean {
+    return Boolean(icon && icon.includes(':'));
+}
+
+/**
+ * Get a display-safe icon string for use in contexts where React components can't be used
+ * (e.g., <option> elements in <select>)
+ * Returns emoji or empty string for iconify icons
+ */
+export function getDisplayIcon(icon: string | undefined | null): string {
+    if (!icon) return '';
+    // If it's an iconify icon, return empty string (can't display in <option>)
+    if (icon.includes(':')) return '';
+    // Otherwise return the icon (likely an emoji)
+    return icon;
+}
+
+/**
+ * Default account type icons
+ */
+export const ACCOUNT_TYPE_ICONS: Record<string, string> = {
+    bank: '🏦',
+    cash: '💵',
+    credit_card: '💳',
+    alipay: '📱',
+    wechat: '📱',
+    investment: '📈',
+    other: '💰',
+};
+
+/**
+ * Get a fallback icon for an account based on its type
+ */
+export function getAccountFallbackIcon(accountType?: string): string {
+    if (!accountType) return '💰';
+    return ACCOUNT_TYPE_ICONS[accountType] || '💰';
+}