重新构建路由和配置样式文件

app/components/layout/Layout.tsx

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import { Sidebar } from './Sidebar';
+import { Header } from './Header';
+import { Breadcrumb } from './Breadcrumb';
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+export function Layout({ children }: LayoutProps) {
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  
+  // 从本地存储中获取侧边栏状态
+  useEffect(() => {
+    const savedState = localStorage.getItem('sidebarCollapsed');
+    if (savedState) {
+      setSidebarCollapsed(savedState === 'true');
+    }
+  }, []);
+  
+  const toggleSidebar = () => {
+    const newState = !sidebarCollapsed;
+    setSidebarCollapsed(newState);
+    localStorage.setItem('sidebarCollapsed', String(newState));
+  };
+  
+  return (
+    <div className="layout-container">
+      <Sidebar 
+        collapsed={sidebarCollapsed} 
+        onToggle={toggleSidebar} 
+      />
+      
+      <div className={`main-content ${sidebarCollapsed ? 'sidebar-collapsed' : ''}`}>
+        {/* <Header username="系统管理员" /> */}
+        <div className="content-container">
+          <Breadcrumb className="px-6 pt-4" />
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}