From 6de89918d7b61efbc66f491d66dc302e1c1cc474 Mon Sep 17 00:00:00 2001
From: admin <1297598740@qq.com>
Date: Mon, 26 Jan 2026 09:47:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=94=AF=E5=87=BA?=
 =?UTF-8?q?=E8=B6=8B=E5=8A=BF=E5=9B=BE=E8=A1=A8=E5=92=8C=E8=B4=A2=E5=8A=A1?=
 =?UTF-8?q?=E6=A6=82=E8=A7=88=E5=8A=9F=E8=83=BD=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/charts/SpendingTrendChart.tsx | 34 ++++-----
 src/pages/Home/Home.tsx                      | 73 ++++++++++----------
 2 files changed, 50 insertions(+), 57 deletions(-)

diff --git a/src/components/charts/SpendingTrendChart.tsx b/src/components/charts/SpendingTrendChart.tsx
index fb08c94..6ef5119 100644
--- a/src/components/charts/SpendingTrendChart.tsx
+++ b/src/components/charts/SpendingTrendChart.tsx
@@ -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>
     );
 };
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index cb92f24..d08cf42 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -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>