Novault/Novault-Frontend-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化支出趋势图表和财务概览功能。

Browse Source
This commit is contained in:
admin
2026-01-26 09:47:34 +08:00
parent a4769bc610
commit 6de89918d7
2 changed files with 50 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/charts/SpendingTrendChart.tsx
View File

@@ -115,25 +115,21 @@ export const SpendingTrendChart: React.FC<SpendingTrendChartProps> = ({
};
return (
<div className="glass-card" style={{ padding: '1.5rem', marginTop: 'var(--spacing-xl)' }}>
<h3 style={{
margin: '0 0 1rem 0',
fontSize: '1.25rem',
color: 'var(--color-text)',
display: 'flex',
alignItems: 'center',
gap: '0.5rem'
}}>
<span style={{
width: '4px',
height: '20px',
background: 'var(--color-primary)',
borderRadius: '2px',
display: 'inline-block'
}} />
近7日支出趋势
</h3>
<ReactECharts option={option} style={{ height: '300px' }} />
<div style={{ width: '100%', height: '100%' }}>
<div className="section-header" style={{ marginBottom: '1rem', borderBottom: 'none', paddingBottom: 0 }}>
<h2 style={{
fontSize: '1.125rem',
fontWeight: 700,
margin: 0,
display: 'flex',
alignItems: 'center',
gap: '0.5rem',
color: 'var(--color-text)'
}}>
近7日支出趋势
</h2>
</div>
<ReactECharts option={option} style={{ height: '300px', width: '100%' }} />
</div>
);
};

73
src/pages/Home/Home.tsx
View File

@@ -260,46 +260,43 @@ function Home() {
return (
<div className="home-page">
<header className="home-header">
<header className="home-header">
<div className="home-greeting animate-slide-up">
<div className="greeting-top-row">
<div className="greeting-pill" onClick={() => setLedgerSelectorOpen(true)}>
{currentLedger && (
<>
<Icon icon="solar:notebook-minimalistic-bold-duotone" width="14" />
<span>{currentLedger.name}</span>
<Icon icon="solar:alt-arrow-down-bold" width="10" className="chevron-icon" />
</>
)}
</div>
<span className="home-date">{new Date().toLocaleDateString('zh-CN', { weekday: 'short', month: 'long', day: 'numeric' })}</span>
<div className="home-greeting animate-slide-up">
<div className="greeting-top-row">
<div className="greeting-pill" onClick={() => setLedgerSelectorOpen(true)}>
{currentLedger && (
<>
<Icon icon="solar:notebook-minimalistic-bold-duotone" width="14" />
<span>{currentLedger.name}</span>
<Icon icon="solar:alt-arrow-down-bold" width="10" className="chevron-icon" />
</>
)}
</div>
<h1 className="greeting-text">
{greeting}，<span className="greeting-highlight">保持节奏</span>
</h1>
<p className="greeting-insight animate-slide-up delay-100">
<Icon icon="solar:bell-bing-bold-duotone" width="16" className="insight-icon" />
{insight}
</p>
<span className="home-date">{new Date().toLocaleDateString('zh-CN', { weekday: 'short', month: 'long', day: 'numeric' })}</span>
</div>
<div className="header-actions animate-slide-up delay-200">
<button className="health-score-btn" onClick={() => setShowConfetti(true)}>
<div className="health-ring" style={{ '--score': `${healthScore}%`, '--color': 'var(--accent-success)' } as any}>
<svg viewBox="0 0 36 36">
<path className="ring-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
<path className="ring-fill" strokeDasharray={`${healthScore}, 100`} d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
</svg>
<span className="health-val">{healthScore}</span>
</div>
<span className="health-label">健康分</span>
</button>
<button className="quick-action-btn-small" onClick={handleQuickTransaction}>
<Icon icon="solar:add-circle-bold-duotone" width="20" />
<span>记一笔</span>
</button>
</div>
</header>
<h1 className="greeting-text">
{greeting}，<span className="greeting-highlight">保持节奏</span>
</h1>
<p className="greeting-insight animate-slide-up delay-100">
<Icon icon="solar:bell-bing-bold-duotone" width="16" className="insight-icon" />
{insight}
</p>
</div>
<div className="header-actions animate-slide-up delay-200">
<button className="health-score-btn" onClick={() => setShowConfetti(true)}>
<div className="health-ring" style={{ '--score': `${healthScore}%`, '--color': 'var(--accent-success)' } as any}>
<svg viewBox="0 0 36 36">
<path className="ring-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
<path className="ring-fill" strokeDasharray={`${healthScore}, 100`} d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
</svg>
<span className="health-val">{healthScore}</span>
</div>
<span className="health-label">健康分</span>
</button>
<button className="quick-action-btn-small" onClick={handleQuickTransaction}>
<Icon icon="solar:add-circle-bold-duotone" width="20" />
<span>记一笔</span>
</button>
</div>
</header>