diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 446e039..89e6ca9 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { Layout, Menu, theme } from 'antd';
+import React, { useState } from 'react';
+import { Layout, Menu, theme, Button } from 'antd';
 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 DeviceManagement from './pages/DeviceManagement';
 import RackManagement from './pages/RackManagement';
@@ -12,6 +12,7 @@ import DeviceFieldManagement from './pages/DeviceFieldManagement';
 const { Content, Sider } = Layout;
 
 function App() {
+  const [collapsed, setCollapsed] = useState(false);
   const { 
     token: { colorBgContainer, borderRadiusLG }, 
   } = theme.useToken();
@@ -19,11 +20,47 @@ function App() {
   return (
     <Router>
       <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
               mode="inline"
               defaultSelectedKeys={['1']}
-              style={{ height: '100%', borderRight: 0 }}
+              style={{
+                height: 'calc(100% - 80px)', 
+                borderRight: 0,
+                backgroundColor: 'transparent'
+              }}
               items={[
                 {
                   key: '1',
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
index 79b8b4a..b711882 100644
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -17,13 +17,13 @@ import axios from 'axios';
 
 function Dashboard() {
   const [stats, setStats] = useState({
-    totalDevices: 0,
-    totalRacks: 0,
-    totalRooms: 0,
-    faultDevices: 0,
-    deviceGrowth: 2.5,  // 示例增长数据
-    faultTrend: -12.3   // 示例趋势数据
-  });
+      totalDevices: 0,
+      totalRacks: 0,
+      totalRooms: 0,
+      faultDevices: 0,
+      deviceGrowth: 2.5,  // 示例增长数据
+      faultTrend: -12.3   // 示例趋势数据
+    });
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -55,7 +55,10 @@ function Dashboard() {
           totalDevices,
           totalRacks,
           totalRooms,
-          faultDevices
+          faultDevices,
+          // 保留或更新趋势数据
+          deviceGrowth: stats.deviceGrowth || 0,
+          faultTrend: stats.faultTrend || 0
         });
       } catch (error) {
         message.error('获取统计数据失败');