diff --git a/src/components/account/AccountCard/AccountCard.css b/src/components/account/AccountCard/AccountCard.css index 53eddf7..6cfa102 100644 --- a/src/components/account/AccountCard/AccountCard.css +++ b/src/components/account/AccountCard/AccountCard.css @@ -129,6 +129,14 @@ z-index: -1; } +.account-card--receivable::before { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(135deg, rgba(6, 182, 212, 0.05) 0%, rgba(34, 211, 238, 0.1) 100%); + z-index: -1; +} + /* Header Section */ .account-card__header { display: flex; diff --git a/src/components/account/AccountCard/AccountCard.tsx b/src/components/account/AccountCard/AccountCard.tsx index 588a302..93f0d00 100644 --- a/src/components/account/AccountCard/AccountCard.tsx +++ b/src/components/account/AccountCard/AccountCard.tsx @@ -28,6 +28,7 @@ const ACCOUNT_TYPE_LABELS: Record = { e_wallet: '电子钱包', credit_line: '信用账户', investment: '投资账户', + receivable: '应收账款', }; /** @@ -40,6 +41,7 @@ const DEFAULT_ICONS: Record = { e_wallet: '📱', credit_line: '🏦', investment: '📈', + receivable: '🤝', }; export const AccountCard: React.FC = ({ @@ -76,6 +78,7 @@ export const AccountCard: React.FC = ({ case 'e_wallet': return 'account-card--ewallet'; case 'investment': return 'account-card--investment'; case 'credit_line': return 'account-card--loan'; + case 'receivable': return 'account-card--receivable'; default: return 'account-card--default'; } }; diff --git a/src/components/account/AccountForm/AccountForm.tsx b/src/components/account/AccountForm/AccountForm.tsx index 50cf502..8987721 100644 --- a/src/components/account/AccountForm/AccountForm.tsx +++ b/src/components/account/AccountForm/AccountForm.tsx @@ -28,6 +28,7 @@ const ACCOUNT_TYPES: { value: AccountType; label: string; icon: string; color: s { value: 'e_wallet', label: '支付宝/微信', icon: 'ri:smartphone-line', color: '#1677FF' }, { value: 'credit_line', label: '花呗/白条', icon: 'solar:hand-money-bold-duotone', color: '#8B5CF6' }, { value: 'investment', label: '股票/基金', icon: 'solar:graph-up-bold-duotone', color: '#F59E0B' }, + { value: 'receivable', label: '应收账款', icon: 'solar:hand-shake-bold-duotone', color: '#06B6D4' }, ]; /** diff --git a/src/components/account/AccountGraphModal/AccountGraphModal.tsx b/src/components/account/AccountGraphModal/AccountGraphModal.tsx index 5038abe..ac35771 100644 --- a/src/components/account/AccountGraphModal/AccountGraphModal.tsx +++ b/src/components/account/AccountGraphModal/AccountGraphModal.tsx @@ -18,6 +18,7 @@ const ACCOUNT_TYPE_COLORS: Record = { e_wallet: '#1677FF', credit_line: '#8B5CF6', investment: '#F59E0B', + receivable: '#06B6D4', }; const ACCOUNT_TYPE_LABELS: Record = { @@ -27,6 +28,7 @@ const ACCOUNT_TYPE_LABELS: Record = { e_wallet: '第三方支付', credit_line: '信用账户', investment: '投资账户', + receivable: '应收账款', }; export const AccountGraphModal: React.FC = ({ isOpen, onClose }) => { diff --git a/src/components/account/AccountList/AccountList.tsx b/src/components/account/AccountList/AccountList.tsx index 7e755d5..3fcd380 100644 --- a/src/components/account/AccountList/AccountList.tsx +++ b/src/components/account/AccountList/AccountList.tsx @@ -30,6 +30,7 @@ const ACCOUNT_TYPE_LABELS: Record = { e_wallet: '电子钱包', credit_line: '信用账户', investment: '投资账户', + receivable: '应收账款', }; /** @@ -42,6 +43,7 @@ const ACCOUNT_TYPE_ORDER: AccountType[] = [ 'credit_card', 'credit_line', 'investment', + 'receivable', ]; export const AccountList: React.FC = ({ diff --git a/src/types/index.ts b/src/types/index.ts index a7627f7..65597be 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -13,7 +13,8 @@ export type AccountType = | 'credit_card' | 'e_wallet' | 'credit_line' - | 'investment'; + | 'investment' + | 'receivable'; // Frequency Types for recurring transactions export type FrequencyType = 'daily' | 'weekly' | 'monthly' | 'yearly';