chore: add frontend/src/components/layout/Layout.tsx

2026-04-29 10:53:27 +08:00
parent e17041d542
commit 76f078c5b4
1 changed files with 71 additions and 0 deletions
@@ -0,0 +1,71 @@
+import React from 'react';
+import Sidebar from './Sidebar';
+import BottomTab from './BottomTab';
+import { useUiStore } from '../../stores';
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+/**
+ * 布局组件 - Layout
+ * 功能：定义应用整体布局结构，包含侧边导航栏、主内容区和底部标签栏
+ * 布局结构：
+ *   - Sidebar（左侧边栏）：桌面端固定显示，可折叠（宽度 240px / 64px）
+ *   - main（主内容区）：根据侧边栏状态动态调整左边距
+ *   - BottomTab（底部标签栏）：移动端底部导航，固定定位
+ * 响应式策略：
+ *   - 桌面端（≥768px）：显示侧边栏，主内容区留出左边距
+ *   - 移动端（<768px）：隐藏侧边栏，使用底部标签栏导航
+ */
+const Layout: React.FC<LayoutProps> = ({ children }) => {
+  // 从 UI 状态中获取侧边栏折叠状态，用于动态调整主内容区宽度
+  const { sidebarCollapsed } = useUiStore();
+
+  return (
+    <div className="app-layout">
+      <Sidebar />
+      <main 
+        className="main-content"
+        role="main"
+        style={{ 
+          marginLeft: sidebarCollapsed ? '64px' : '240px',
+          padding: '32px',
+          maxWidth: '1280px',
+          transition: 'margin-left 0.3s ease'
+        }}
+      >
+        {children}
+      </main>
+      <BottomTab />
+
+      <style>{`
+        .app-layout {
+          display: flex;
+          min-height: 100vh;
+        }
+
+        .main-content {
+          flex: 1;
+          padding-bottom: 88px;
+        }
+
+        @media (max-width: 767px) {
+          .main-content {
+            margin-left: 0 !important;
+            padding: 20px;
+            padding-bottom: 88px;
+          }
+        }
+
+        @media (min-width: 1440px) {
+          .main-content {
+            max-width: 1440px;
+          }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default Layout;