From 24c237aadead2cb7c1bb3b38e82539c30f863fee Mon Sep 17 00:00:00 2001
From: EchoZenith <60392923+EchoZenith@users.noreply.github.com>
Date: Sun, 24 May 2026 23:01:16 +0800
Subject: [PATCH] =?UTF-8?q?style(dashboard):=20=E4=BC=98=E5=8C=96=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E5=AE=B9=E5=99=A8=E6=A0=B7=E5=BC=8F=E5=B9=B6=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E8=87=AA=E9=80=82=E5=BA=94=20resize=20=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 移除图表组件多余的 padding 样式
2. 重构空数据提示的布局和样式
3. 添加 ResizeObserver 监听容器尺寸变化，自动重绘图表
4. 整理部分样式代码缩进问题
---
 client/src/pages/Dashboard.jsx | 33 +++++++++++++++++++++------------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/client/src/pages/Dashboard.jsx b/client/src/pages/Dashboard.jsx
index 4f2543e..64a204a 100644
--- a/client/src/pages/Dashboard.jsx
+++ b/client/src/pages/Dashboard.jsx
@@ -15,9 +15,8 @@ const styles = `
   .d-stats-card { padding: 16px !important; }
   .d-stats-value { font-size: 28px !important; }
   .d-bottom { grid-template-columns: 1fr !important; gap: 12px !important; }
-  .d-chart { height: 200px !important; padding: 12px !important; }
-  .d-chart-empty { padding-top: 75px !important; }
-  .d-section-gap { margin-bottom: 24px !important; }
+  .d-chart { height: 200px !important; }
+   .d-section-gap { margin-bottom: 24px !important; }
   .d-container { padding: 16px !important; }
   .d-body { padding: 12px !important; }
   .d-trend-header { flex-direction: column !important; gap: 8px !important; }
@@ -45,6 +44,7 @@ export default function Dashboard({ onLogout }) {
   const hourlyInstance = useRef(null);
   const trendInstance = useRef(null);
   const intervalRef = useRef(null);
+  const chartContainerRef = useRef(null);
 
   const loadData = useCallback(async () => {
     try {
@@ -68,6 +68,17 @@ export default function Dashboard({ onLogout }) {
     };
   }, [loadData]);
 
+  useEffect(() => {
+    const container = chartContainerRef.current;
+    if (!container) return;
+    const ro = new ResizeObserver(() => {
+      hourlyInstance.current?.resize();
+      trendInstance.current?.resize();
+    });
+    ro.observe(container);
+    return () => ro.disconnect();
+  }, []);
+
   useEffect(() => {
     const today = dayjs().format('YYYY-MM-DD');
     setIsToday(chartDate === today);
@@ -325,7 +336,7 @@ export default function Dashboard({ onLogout }) {
   const todayCost = currentData?.todayCost ?? 0;
 
   return (
-    <div className="d-body" style={{ background: 'var(--bg-body)', minHeight: '100vh', padding: 20 }}>
+    <div className="d-body" ref={chartContainerRef} style={{ background: 'var(--bg-body)', minHeight: '100vh', padding: 20 }}>
       <style>{`${styles}
 body { margin: 0; }
 .d-container { border-radius: 12px !important; box-shadow: none !important; }
@@ -436,11 +447,10 @@ body { margin: 0; }
               style={{ width: 130 }}
             />
           </div>
-          <div className="d-chart" style={{ position: 'relative', height: 280, background: 'var(--bg-chart)', borderRadius: 8, padding: 20 }}>
+          <div className="d-chart" style={{ position: 'relative', height: 280, background: 'var(--bg-chart)', borderRadius: 8 }}>
             {(!isToday && (!dateRecords || dateRecords.length === 0)) || (isToday && (!currentData?.todayRecords || currentData.todayRecords.length === 0)) ? (
-              <div className="d-chart-empty" style={{ textAlign: 'center', paddingTop: 110, color: 'var(--text-tertiary)' }}>暂无数据</div>
-            ) : null}
-            <canvas ref={hourlyChartRef} />
+              <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-tertiary)' }}>暂无数据</div>
+            ) : <div style={{ padding: 20, height: '100%' }}><canvas ref={hourlyChartRef} /></div>}
           </div>
         </div>
 
@@ -471,11 +481,10 @@ body { margin: 0; }
               ))}
             </div>
           </div>
-          <div className="d-chart" style={{ position: 'relative', height: 280, background: 'var(--bg-chart)', borderRadius: 8, padding: 20 }}>
+          <div className="d-chart" style={{ position: 'relative', height: 280, background: 'var(--bg-chart)', borderRadius: 8 }}>
             {(!historyData?.dailyRecords || historyData.dailyRecords.length === 0) ? (
-              <div className="d-chart-empty" style={{ textAlign: 'center', paddingTop: 110, color: 'var(--text-tertiary)' }}>暂无历史数据</div>
-            ) : null}
-            <canvas ref={trendChartRef} />
+              <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-tertiary)' }}>暂无历史数据</div>
+            ) : <div style={{ padding: 20, height: '100%' }}><canvas ref={trendChartRef} /></div>}
           </div>
         </div>