diff --git a/src/components/layout/MainLayout.css b/src/components/layout/MainLayout.css
index 38e16dc..480bb70 100644
--- a/src/components/layout/MainLayout.css
+++ b/src/components/layout/MainLayout.css
@@ -5,6 +5,7 @@
   padding: 0 24px;
   background: #1890ff;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
 }
 
 .header-left {
@@ -17,6 +18,8 @@
   font-size: 20px;
   font-weight: bold;
   margin: 0;
+  margin-left: 16px;
+  transition: all 0.3s;
 }
 
 .header-right {
@@ -36,6 +39,7 @@
   padding: 24px;
   background: #f0f2f5;
   overflow: auto;
+  transition: all 0.3s;
 }
 
 .content-inner {
@@ -43,6 +47,24 @@
   padding: 24px;
   border-radius: 4px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+  transition: all 0.3s;
+}
+
+/* 深色模式样式 */
+body[data-theme="dark"] .content {
+  background: #141414;
+}
+
+body[data-theme="dark"] .content-inner {
+  background: #1f1f1f;
+  color: #f0f0f0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* 侧边栏折叠时的样式 */
+.collapsed .logo {
+  margin-left: 8px;
+  font-size: 16px;
 }
 
 /* 响应式设计 */
@@ -53,6 +75,7 @@
   
   .logo {
     font-size: 16px;
+    margin-left: 8px;
   }
   
   .header-search {
diff --git a/src/components/layout/MainLayout.jsx b/src/components/layout/MainLayout.jsx
index a5b3ce1..3555b87 100644
--- a/src/components/layout/MainLayout.jsx
+++ b/src/components/layout/MainLayout.jsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Layout, Menu, Button, Input, Avatar, Badge, Switch, ConfigProvider } from 'antd';
-import { SearchOutlined, BellOutlined, UserOutlined, MenuFoldOutlined, MenuUnfoldOutlined, HomeOutlined, BarChartOutlined, SafetyOutlined, SettingOutlined } from '@ant-design/icons';
+import { SearchOutlined, BellOutlined, UserOutlined, MenuFoldOutlined, MenuUnfoldOutlined, HomeOutlined, BarChartOutlined, SafetyOutlined, SettingOutlined, SunOutlined, MoonOutlined } from '@ant-design/icons';
 import { Link, useLocation } from 'react-router-dom';
 import './MainLayout.css';
 
@@ -9,11 +9,13 @@ const { Search } = Input;
 
 const MainLayout = ({ children }) => {
   const location = useLocation();
+  const [collapsed, setCollapsed] = useState(false);
+  const [darkMode, setDarkMode] = useState(false);
 
   const getSelectedKey = () => {
     const path = location.pathname;
     if (path === '/') return '1';
-    if (path === '/detail') return '2';
+    if (path.includes('/detail/')) return '2';
     if (path === '/risk-control') return '3';
     if (path === '/config') return '4';
     return '1';
@@ -28,7 +30,7 @@ const MainLayout = ({ children }) => {
     {
       key: '2',
       icon: <BarChartOutlined />,
-      label: <Link to="/detail">详情分析</Link>,
+      label: <Link to="/detail/AG">详情分析</Link>,
     },
     {
       key: '3',
@@ -42,19 +44,70 @@ const MainLayout = ({ children }) => {
     },
   ];
 
+  const toggleCollapse = () => {
+    setCollapsed(!collapsed);
+  };
+
+  const toggleDarkMode = () => {
+    const newDarkMode = !darkMode;
+    setDarkMode(newDarkMode);
+    document.body.setAttribute('data-theme', newDarkMode ? 'dark' : 'light');
+  };
+
+  // 初始化主题
+  React.useEffect(() => {
+    document.body.setAttribute('data-theme', darkMode ? 'dark' : 'light');
+  }, []);
+
   return (
-    <ConfigProvider theme={{ token: { colorScheme: 'light' } }}>
+    <ConfigProvider
+      theme={{
+        token: {
+          colorScheme: darkMode ? 'dark' : 'light',
+        },
+        algorithm: darkMode ? ConfigProvider.darkAlgorithm : ConfigProvider.defaultAlgorithm,
+      }}
+    >
       <Layout style={{ minHeight: '100vh' }}>
         <Header className="header">
           <div className="header-left">
+            <Button
+              type="text"
+              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+              onClick={toggleCollapse}
+              style={{
+                fontSize: '16px',
+                width: 64,
+                height: 64,
+              }}
+            />
             <h1 className="logo">AI期货分析系统</h1>
           </div>
           <div className="header-right">
+            <Switch
+              checkedChildren={<MoonOutlined />}
+              unCheckedChildren={<SunOutlined />}
+              checked={darkMode}
+              onChange={toggleDarkMode}
+              style={{ marginRight: 16 }}
+            />
+            <Badge count={4} style={{ marginRight: 16 }}>
+              <Button type="text" icon={<BellOutlined />} />
+            </Badge>
             <Avatar icon={<UserOutlined />} />
           </div>
         </Header>
         <Layout>
-          <Sider width={200} theme="light">
+          <Sider
+            width={200}
+            theme={darkMode ? 'dark' : 'light'}
+            collapsed={collapsed}
+            collapsedWidth={80}
+            trigger={null}
+            style={{
+              transition: 'width 0.3s',
+            }}
+          >
             <Menu
               mode="inline"
               selectedKeys={[getSelectedKey()]}