From 38eeb4a425e3546b655cf5b929a2c58094513a24 Mon Sep 17 00:00:00 2001
From: 12975 <1297598740@qq.com>
Date: Mon, 26 Jan 2026 02:02:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=94=B6=E5=85=A5?=
 =?UTF-8?q?=E5=88=86=E9=85=8D=E8=A7=84=E5=88=99=E7=AE=A1=E7=90=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=8F=8A=E8=B4=A6=E6=88=B7=E3=80=81=E8=BD=AC=E8=B4=A6?=
 =?UTF-8?q?=E3=80=81=E4=BA=A4=E6=98=93=E3=80=81=E5=88=86=E9=85=8D=E8=A7=84?=
 =?UTF-8?q?=E5=88=99=E7=AD=89=E7=9B=B8=E5=85=B3=E7=BB=84=E4=BB=B6=E7=9A=84?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../account/AccountCard/AccountCard.tsx       |  5 ++-
 .../account/TransferForm/TransferForm.tsx     |  5 ++-
 .../AllocationRuleForm/AllocationRuleForm.tsx |  5 ++-
 .../RecurringTransactionForm.tsx              |  3 +-
 .../TransactionFilter/TransactionFilter.tsx   |  7 +--
 .../TransactionItem/TransactionItem.tsx       | 13 ++++--
 src/pages/AllocationRules/AllocationRules.tsx |  3 +-
 src/utils/iconUtils.ts                        | 45 +++++++++++++++++++
 8 files changed, 72 insertions(+), 14 deletions(-)
 create mode 100644 src/utils/iconUtils.ts

diff --git a/src/components/account/AccountCard/AccountCard.tsx b/src/components/account/AccountCard/AccountCard.tsx
index 14ce7c2..ed684e8 100644
--- a/src/components/account/AccountCard/AccountCard.tsx
+++ b/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 && (
diff --git a/src/components/account/TransferForm/TransferForm.tsx b/src/components/account/TransferForm/TransferForm.tsx
index d3b6ead..9f676d0 100644
--- a/src/components/account/TransferForm/TransferForm.tsx
+++ b/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>
diff --git a/src/components/budget/AllocationRuleForm/AllocationRuleForm.tsx b/src/components/budget/AllocationRuleForm/AllocationRuleForm.tsx
index 87a8e67..f4e0fc4 100644
--- a/src/components/budget/AllocationRuleForm/AllocationRuleForm.tsx
+++ b/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>
                           ))
                         )
diff --git a/src/components/transaction/RecurringTransactionForm/RecurringTransactionForm.tsx b/src/components/transaction/RecurringTransactionForm/RecurringTransactionForm.tsx
index d484717..c74e269 100644
--- a/src/components/transaction/RecurringTransactionForm/RecurringTransactionForm.tsx
+++ b/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>
               ))}
diff --git a/src/components/transaction/TransactionFilter/TransactionFilter.tsx b/src/components/transaction/TransactionFilter/TransactionFilter.tsx
index 259172d..baac53e 100644
--- a/src/components/transaction/TransactionFilter/TransactionFilter.tsx
+++ b/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>
diff --git a/src/components/transaction/TransactionItem/TransactionItem.tsx b/src/components/transaction/TransactionItem/TransactionItem.tsx
index b962d96..bd2b560 100644
--- a/src/components/transaction/TransactionItem/TransactionItem.tsx
+++ b/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 {
@@ -102,13 +103,17 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
   };
 
   return (
-    <div 
+    <div
       className={`transaction-item ${transaction.type} ${compact ? 'compact' : ''} ${onClick ? 'clickable' : ''} ${selected ? 'selected' : ''}`}
       onClick={handleClick}
     >
       {/* 图标 */}
       <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>
 
       {/* 主要信息 */}
@@ -121,7 +126,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
             <span className="transaction-item-note">{transaction.note}</span>
           )}
         </div>
-        
+
         {showDate && (
           <div className="transaction-item-meta">
             <span className="transaction-item-date">
@@ -142,7 +147,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
           {transaction.type === 'income' ? '+' : transaction.type === 'expense' ? '-' : ''}
           {formatAmount(transaction.amount)}
         </span>
-        
+
         {/* 状态标签 */}
         {(transaction.reimbursementStatus !== 'none' || transaction.refundStatus !== 'none') && (
           <div className="transaction-item-badges">
diff --git a/src/pages/AllocationRules/AllocationRules.tsx b/src/pages/AllocationRules/AllocationRules.tsx
index 331e373..bb66314 100644
--- a/src/pages/AllocationRules/AllocationRules.tsx
+++ b/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}` : '未知存钱罐';
diff --git a/src/utils/iconUtils.ts b/src/utils/iconUtils.ts
new file mode 100644
index 0000000..70dcfc2
--- /dev/null
+++ b/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] || '💰';
+}