layouts 重构

src/App.jsx

@@ -1,116 +1,10 @@
 import React, { useState } from 'react'
-import {
-  DesktopOutlined,
-  FileOutlined,
-  PieChartOutlined,
-  TeamOutlined,
-  UserOutlined,
-} from '@ant-design/icons'
-import { useRoutes } from 'react-router-dom'
-import routes from './router/index'
-import { Breadcrumb, Layout, Menu, theme } from 'antd'
-const { Header, Content, Footer, Sider } = Layout
+import BaseLayout from '@/layouts/Base'
 import Login from '@/views/Login'
-import { useRootStore } from '@/store'
-function getItem(label, key, icon, children) {
-  return {
-    key,
-    icon,
-    children,
-    label,
-  }
-}
-const items = [
-  getItem('Option 1', '1', <PieChartOutlined />),
-  getItem('Option 2', '2', <DesktopOutlined />),
-  getItem('User', 'sub1', <UserOutlined />, [
-    getItem('Tom', '3'),
-    getItem('Bill', '4'),
-    getItem('Alex', '5'),
-  ]),
-  getItem('Team', 'sub2', <TeamOutlined />, [
-    getItem('Team 1', '6'),
-    getItem('Team 2', '8'),
-  ]),
-  getItem('Files', '9', <FileOutlined />),
-]
+
 const App = () => {
-  const { countStore } = useRootStore()
-  const { count } = countStore
-  const [collapsed, setCollapsed] = useState(false)
-  const [isLogin, setIsLogin] = useState(true)
-  const {
-    token: { colorBgContainer },
-  } = theme.useToken()
-  return !isLogin ? (
-    <Login />
-  ) : (
-    <Layout
-      style={{
-        minHeight: '100vh',
-      }}
-    >
-      <Sider
-        collapsible
-        collapsed={collapsed}
-        onCollapse={value => setCollapsed(value)}
-      >
-        <div
-          style={{
-            textAlign: 'center',
-            padding: '20px 0',
-            color: '#fff',
-            fontSize: '18px',
-          }}
-        >
-          {count}
-        </div>
-        <Menu
-          theme='dark'
-          defaultSelectedKeys={['1']}
-          mode='inline'
-          items={items}
-        />
-      </Sider>
-      <Layout>
-        <Header
-          style={{
-            padding: 0,
-            background: colorBgContainer,
-          }}
-        />
-        <Content
-          style={{
-            margin: '0 16px',
-          }}
-        >
-          <Breadcrumb
-            style={{
-              margin: '16px 0',
-            }}
-          >
-            <Breadcrumb.Item>User</Breadcrumb.Item>
-            <Breadcrumb.Item>Bill</Breadcrumb.Item>
-          </Breadcrumb>
-          <div
-            style={{
-              padding: 24,
-              minHeight: 360,
-              background: colorBgContainer,
-            }}
-          >
-            {useRoutes(routes)}
-          </div>
-        </Content>
-        <Footer
-          style={{
-            textAlign: 'center',
-          }}
-        >
-          Ant Design ©2023 Created by Ant UED
-        </Footer>
-      </Layout>
-    </Layout>
-  )
+  const [isLogin, setIsLogin] = useState(false)
+
+  return !isLogin ? <Login /> : <BaseLayout />
 }
 export default App

src/layouts/Base.jsx

@@ -0,0 +1,115 @@
+import React, { useState } from 'react'
+import {
+  DesktopOutlined,
+  FileOutlined,
+  PieChartOutlined,
+  TeamOutlined,
+  UserOutlined,
+} from '@ant-design/icons'
+import { Breadcrumb, Layout, Menu, theme } from 'antd'
+import { useRoutes } from 'react-router-dom'
+import routes from '@/router/index'
+import { useRootStore } from '@/store'
+
+const { Header, Content, Footer, Sider } = Layout
+
+function getItem(label, key, icon, children) {
+  return {
+    key,
+    icon,
+    children,
+    label,
+  }
+}
+const items = [
+  getItem('Option 1', '1', <PieChartOutlined />),
+  getItem('Option 2', '2', <DesktopOutlined />),
+  getItem('User', 'sub1', <UserOutlined />, [
+    getItem('Tom', '3'),
+    getItem('Bill', '4'),
+    getItem('Alex', '5'),
+  ]),
+  getItem('Team', 'sub2', <TeamOutlined />, [
+    getItem('Team 1', '6'),
+    getItem('Team 2', '8'),
+  ]),
+  getItem('Files', '9', <FileOutlined />),
+]
+function BaseLayout() {
+  const { countStore } = useRootStore()
+  const { count } = countStore
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken()
+  const [collapsed, setCollapsed] = useState(false)
+  return (
+    <Layout
+      style={{
+        minHeight: '100vh',
+      }}
+    >
+      <Sider
+        collapsible
+        collapsed={collapsed}
+        onCollapse={value => setCollapsed(value)}
+      >
+        <div
+          style={{
+            textAlign: 'center',
+            padding: '20px 0',
+            color: '#fff',
+            fontSize: '18px',
+          }}
+        >
+          {count}
+        </div>
+        <Menu
+          theme='dark'
+          defaultSelectedKeys={['1']}
+          mode='inline'
+          items={items}
+        />
+      </Sider>
+      <Layout>
+        <Header
+          style={{
+            padding: 0,
+            background: colorBgContainer,
+          }}
+        />
+        <Content
+          style={{
+            margin: '0 16px',
+          }}
+        >
+          <Breadcrumb
+            style={{
+              margin: '16px 0',
+            }}
+          >
+            <Breadcrumb.Item>User</Breadcrumb.Item>
+            <Breadcrumb.Item>Bill</Breadcrumb.Item>
+          </Breadcrumb>
+          <div
+            style={{
+              padding: 24,
+              minHeight: 360,
+              background: colorBgContainer,
+            }}
+          >
+            {useRoutes(routes)}
+          </div>
+        </Content>
+        <Footer
+          style={{
+            textAlign: 'center',
+          }}
+        >
+          Ant Design ©2023 Created by Ant UED
+        </Footer>
+      </Layout>
+    </Layout>
+  )
+}
+
+export default BaseLayout