feat: 新增账户卡片、表单、图表模态框和列表等账户管理组件,并定义相关样式和类型。
This commit is contained in:
@@ -129,6 +129,14 @@
|
|||||||
z-index: -1;
|
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 */
|
/* Header Section */
|
||||||
.account-card__header {
|
.account-card__header {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -28,6 +28,7 @@ const ACCOUNT_TYPE_LABELS: Record<AccountType, string> = {
|
|||||||
e_wallet: '电子钱包',
|
e_wallet: '电子钱包',
|
||||||
credit_line: '信用账户',
|
credit_line: '信用账户',
|
||||||
investment: '投资账户',
|
investment: '投资账户',
|
||||||
|
receivable: '应收账款',
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -40,6 +41,7 @@ const DEFAULT_ICONS: Record<AccountType, string> = {
|
|||||||
e_wallet: '📱',
|
e_wallet: '📱',
|
||||||
credit_line: '🏦',
|
credit_line: '🏦',
|
||||||
investment: '📈',
|
investment: '📈',
|
||||||
|
receivable: '🤝',
|
||||||
};
|
};
|
||||||
|
|
||||||
export const AccountCard: React.FC<AccountCardProps> = ({
|
export const AccountCard: React.FC<AccountCardProps> = ({
|
||||||
@@ -76,6 +78,7 @@ export const AccountCard: React.FC<AccountCardProps> = ({
|
|||||||
case 'e_wallet': return 'account-card--ewallet';
|
case 'e_wallet': return 'account-card--ewallet';
|
||||||
case 'investment': return 'account-card--investment';
|
case 'investment': return 'account-card--investment';
|
||||||
case 'credit_line': return 'account-card--loan';
|
case 'credit_line': return 'account-card--loan';
|
||||||
|
case 'receivable': return 'account-card--receivable';
|
||||||
default: return 'account-card--default';
|
default: return 'account-card--default';
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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: 'e_wallet', label: '支付宝/微信', icon: 'ri:smartphone-line', color: '#1677FF' },
|
||||||
{ value: 'credit_line', label: '花呗/白条', icon: 'solar:hand-money-bold-duotone', color: '#8B5CF6' },
|
{ value: 'credit_line', label: '花呗/白条', icon: 'solar:hand-money-bold-duotone', color: '#8B5CF6' },
|
||||||
{ value: 'investment', label: '股票/基金', icon: 'solar:graph-up-bold-duotone', color: '#F59E0B' },
|
{ value: 'investment', label: '股票/基金', icon: 'solar:graph-up-bold-duotone', color: '#F59E0B' },
|
||||||
|
{ value: 'receivable', label: '应收账款', icon: 'solar:hand-shake-bold-duotone', color: '#06B6D4' },
|
||||||
];
|
];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -18,6 +18,7 @@ const ACCOUNT_TYPE_COLORS: Record<AccountType, string> = {
|
|||||||
e_wallet: '#1677FF',
|
e_wallet: '#1677FF',
|
||||||
credit_line: '#8B5CF6',
|
credit_line: '#8B5CF6',
|
||||||
investment: '#F59E0B',
|
investment: '#F59E0B',
|
||||||
|
receivable: '#06B6D4',
|
||||||
};
|
};
|
||||||
|
|
||||||
const ACCOUNT_TYPE_LABELS: Record<AccountType, string> = {
|
const ACCOUNT_TYPE_LABELS: Record<AccountType, string> = {
|
||||||
@@ -27,6 +28,7 @@ const ACCOUNT_TYPE_LABELS: Record<AccountType, string> = {
|
|||||||
e_wallet: '第三方支付',
|
e_wallet: '第三方支付',
|
||||||
credit_line: '信用账户',
|
credit_line: '信用账户',
|
||||||
investment: '投资账户',
|
investment: '投资账户',
|
||||||
|
receivable: '应收账款',
|
||||||
};
|
};
|
||||||
|
|
||||||
export const AccountGraphModal: React.FC<AccountGraphModalProps> = ({ isOpen, onClose }) => {
|
export const AccountGraphModal: React.FC<AccountGraphModalProps> = ({ isOpen, onClose }) => {
|
||||||
|
|||||||
@@ -30,6 +30,7 @@ const ACCOUNT_TYPE_LABELS: Record<AccountType, string> = {
|
|||||||
e_wallet: '电子钱包',
|
e_wallet: '电子钱包',
|
||||||
credit_line: '信用账户',
|
credit_line: '信用账户',
|
||||||
investment: '投资账户',
|
investment: '投资账户',
|
||||||
|
receivable: '应收账款',
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -42,6 +43,7 @@ const ACCOUNT_TYPE_ORDER: AccountType[] = [
|
|||||||
'credit_card',
|
'credit_card',
|
||||||
'credit_line',
|
'credit_line',
|
||||||
'investment',
|
'investment',
|
||||||
|
'receivable',
|
||||||
];
|
];
|
||||||
|
|
||||||
export const AccountList: React.FC<AccountListProps> = ({
|
export const AccountList: React.FC<AccountListProps> = ({
|
||||||
|
|||||||
@@ -13,7 +13,8 @@ export type AccountType =
|
|||||||
| 'credit_card'
|
| 'credit_card'
|
||||||
| 'e_wallet'
|
| 'e_wallet'
|
||||||
| 'credit_line'
|
| 'credit_line'
|
||||||
| 'investment';
|
| 'investment'
|
||||||
|
| 'receivable';
|
||||||
|
|
||||||
// Frequency Types for recurring transactions
|
// Frequency Types for recurring transactions
|
||||||
export type FrequencyType = 'daily' | 'weekly' | 'monthly' | 'yearly';
|
export type FrequencyType = 'daily' | 'weekly' | 'monthly' | 'yearly';
|
||||||
|
|||||||
Reference in New Issue
Block a user