feat: 新增首页,提供账户概览、交易趋势、快速记账、AI记账和贡献图等功能。
This commit is contained in:
@@ -323,6 +323,16 @@
|
|||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 金额单位后缀样式 (万/亿) */
|
||||||
|
.card-value-suffix {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-left: 4px;
|
||||||
|
opacity: 0.9;
|
||||||
|
align-self: flex-end;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
/* Secondary Cards */
|
/* Secondary Cards */
|
||||||
.assets-card,
|
.assets-card,
|
||||||
.liabilities-card {
|
.liabilities-card {
|
||||||
|
|||||||
@@ -166,13 +166,47 @@ function Home() {
|
|||||||
const totalLiabilities = calculateTotalLiabilities(accounts);
|
const totalLiabilities = calculateTotalLiabilities(accounts);
|
||||||
const netWorth = totalAssets - totalLiabilities;
|
const netWorth = totalAssets - totalLiabilities;
|
||||||
|
|
||||||
|
// 标准金额格式化(带完整小数)
|
||||||
const formatCurrency = (amount: number): string => {
|
const formatCurrency = (amount: number): string => {
|
||||||
return new Intl.NumberFormat('zh-CN', {
|
return new Intl.NumberFormat('zh-CN', {
|
||||||
style: 'currency',
|
style: 'currency',
|
||||||
currency: 'CNY',
|
currency: 'CNY',
|
||||||
|
minimumFractionDigits: 0,
|
||||||
|
maximumFractionDigits: amount % 1 === 0 ? 0 : 2, // 整数不显示小数
|
||||||
}).format(amount);
|
}).format(amount);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 大数字简洁显示(用于净资产等主要展示)
|
||||||
|
const formatLargeNumber = (amount: number): { value: string; suffix: string } => {
|
||||||
|
const absAmount = Math.abs(amount);
|
||||||
|
const sign = amount < 0 ? '-' : '';
|
||||||
|
|
||||||
|
if (absAmount >= 100000000) {
|
||||||
|
// 亿
|
||||||
|
const value = absAmount / 100000000;
|
||||||
|
return {
|
||||||
|
value: sign + value.toLocaleString('zh-CN', { maximumFractionDigits: 2 }),
|
||||||
|
suffix: '亿'
|
||||||
|
};
|
||||||
|
} else if (absAmount >= 10000) {
|
||||||
|
// 万
|
||||||
|
const value = absAmount / 10000;
|
||||||
|
return {
|
||||||
|
value: sign + value.toLocaleString('zh-CN', { maximumFractionDigits: 2 }),
|
||||||
|
suffix: '万'
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
// 直接显示
|
||||||
|
return {
|
||||||
|
value: sign + absAmount.toLocaleString('zh-CN', {
|
||||||
|
minimumFractionDigits: 0,
|
||||||
|
maximumFractionDigits: absAmount % 1 === 0 ? 0 : 2
|
||||||
|
}),
|
||||||
|
suffix: ''
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// Lock body scroll when modal is open
|
// Lock body scroll when modal is open
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (showAccountForm) {
|
if (showAccountForm) {
|
||||||
@@ -367,9 +401,14 @@ function Home() {
|
|||||||
<div className="dashboard-card home-net-worth-card">
|
<div className="dashboard-card home-net-worth-card">
|
||||||
<div className="card-content">
|
<div className="card-content">
|
||||||
<span className="card-label">净资产</span>
|
<span className="card-label">净资产</span>
|
||||||
<div className="card-value-group">
|
<div className="card-value-group" title={`¥${netWorth.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}`}>
|
||||||
<span className="currency-symbol">¥</span>
|
<span className="currency-symbol">¥</span>
|
||||||
<span className="card-value-main privacy-mask">{formatCurrency(netWorth).replace(/[^0-9.,-]/g, '')}</span>
|
<span className="card-value-main privacy-mask">
|
||||||
|
{formatLargeNumber(netWorth).value}
|
||||||
|
</span>
|
||||||
|
{formatLargeNumber(netWorth).suffix && (
|
||||||
|
<span className="card-value-suffix">{formatLargeNumber(netWorth).suffix}</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="card-footer">
|
<div className="card-footer">
|
||||||
<span className="trend-neutral">总览所有账户</span>
|
<span className="trend-neutral">总览所有账户</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user