feat: 优化支出趋势图表和财务概览功能。
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user