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

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

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