侧边栏添加收起展开按钮,修复修复增长趋势显示NaN的问题

This commit is contained in:
zhang1106
2025-12-19 20:01:15 +08:00
parent cc76fd270b
commit a5f8b3cc97
2 changed files with 53 additions and 13 deletions
+42 -5
View File
@@ -1,7 +1,7 @@
import React from 'react'; import React, { useState } from 'react';
import { Layout, Menu, theme } from 'antd'; import { Layout, Menu, theme, Button } from 'antd';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { BarChartOutlined, DatabaseOutlined, CloudServerOutlined } from '@ant-design/icons'; import { BarChartOutlined, DatabaseOutlined, CloudServerOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
import Dashboard from './pages/Dashboard'; import Dashboard from './pages/Dashboard';
import DeviceManagement from './pages/DeviceManagement'; import DeviceManagement from './pages/DeviceManagement';
import RackManagement from './pages/RackManagement'; import RackManagement from './pages/RackManagement';
@@ -12,6 +12,7 @@ import DeviceFieldManagement from './pages/DeviceFieldManagement';
const { Content, Sider } = Layout; const { Content, Sider } = Layout;
function App() { function App() {
const [collapsed, setCollapsed] = useState(false);
const { const {
token: { colorBgContainer, borderRadiusLG }, token: { colorBgContainer, borderRadiusLG },
} = theme.useToken(); } = theme.useToken();
@@ -19,11 +20,47 @@ function App() {
return ( return (
<Router> <Router>
<Layout> <Layout>
<Sider width={200} style={{ backgroundColor: colorBgContainer }}> <Sider
width={200}
collapsedWidth={80}
collapsed={collapsed}
style={{
backgroundColor: colorBgContainer,
boxShadow: '2px 0 8px rgba(0,0,0,0.08)'
}}
>
{/* 自定义收起/展开按钮 */}
<div style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: 64,
borderBottom: '1px solid #f0f0f0',
marginBottom: 16
}}>
<Button
type="text"
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
onClick={() => setCollapsed(!collapsed)}
style={{
fontSize: 18,
padding: '8px',
borderRadius: 4,
transition: 'all 0.3s',
'&:hover': {
backgroundColor: '#e6f7ff'
}
}}
/>
</div>
<Menu <Menu
mode="inline" mode="inline"
defaultSelectedKeys={['1']} defaultSelectedKeys={['1']}
style={{ height: '100%', borderRight: 0 }} style={{
height: 'calc(100% - 80px)',
borderRight: 0,
backgroundColor: 'transparent'
}}
items={[ items={[
{ {
key: '1', key: '1',
+4 -1
View File
@@ -55,7 +55,10 @@ function Dashboard() {
totalDevices, totalDevices,
totalRacks, totalRacks,
totalRooms, totalRooms,
faultDevices faultDevices,
// 保留或更新趋势数据
deviceGrowth: stats.deviceGrowth || 0,
faultTrend: stats.faultTrend || 0
}); });
} catch (error) { } catch (error) {
message.error('获取统计数据失败'); message.error('获取统计数据失败');