EchoZenith/electricity-monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(dashboard): 优化图表容器样式并添加自适应 resize 逻辑

Browse Source 
1. 移除图表组件多余的 padding 样式
2. 重构空数据提示的布局和样式
3. 添加 ResizeObserver 监听容器尺寸变化，自动重绘图表
4. 整理部分样式代码缩进问题
This commit is contained in:
EchoZenith
2026-05-24 23:01:16 +08:00
parent f0b6f9e8dd
commit 24c237aade
1 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
client/src/pages/Dashboard.jsx
View File

@@ -15,8 +15,7 @@ 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-chart { height: 200px !important; }
.d-section-gap { margin-bottom: 24px !important; }
.d-container { padding: 16px !important; }
.d-body { padding: 12px !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>