基本布局

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"cSpell.words": ["Sider"]
+}

src/App.tsx

@@ -1,18 +1,66 @@
-import React from 'react';
+import React from "react";
 
-import './App.scss';
-import { Outlet } from 'react-router';
+import "./App.scss";
+import { Outlet } from "react-router";
+import { Layout } from "antd";
+import { default as AppHeader} from "./components/Header";
+import { default as AppFooter} from "./components/Footer";
+import Menu from "./components/Menu";
+
+const { Header, Footer, Sider, Content } = Layout;
 
 function App() {
+	const headerStyle: React.CSSProperties = {
+		textAlign: "center",
+		color: "#fff",
+		height: 64,
+		paddingInline: 48,
+		lineHeight: "64px",
+		backgroundColor: "#4096ff",
+	};
+
+	const contentStyle: React.CSSProperties = {
+		textAlign: "center",
+		minHeight: 120,
+		lineHeight: "120px",
+		color: "#fff",
+		backgroundColor: "#0958d9",
+	};
+
+	const siderStyle: React.CSSProperties = {
+		textAlign: "center",
+		lineHeight: "100vh",
+		color: "#fff",
+		backgroundColor: "#3165D2",
+	};
+
+	const footerStyle: React.CSSProperties = {
+		textAlign: "center",
+		color: "#fff",
+		backgroundColor: "#4096ff",
+	};
+
+	const layoutStyle = {
+		overflow: "hidden",
+	};
 	return (
-    <div className="App">
-      APP
-      <aside>
-        SIDE
-      </aside>
-      <div>
+		<div className="">
+			<Layout style={layoutStyle}>
+				<Sider width="260px" style={siderStyle}>
+					<Menu />
+				</Sider>
+				<Layout>
+					<Header style={headerStyle}>
+            <AppHeader />
+          </Header>
+					<Content style={contentStyle}>
             <Outlet />
-      </div>
+          </Content>
+					<Footer style={footerStyle}>
+            <AppFooter />
+          </Footer>
+				</Layout>
+			</Layout>
 		</div>
 	);
 }

src/components/Footer.tsx

@@ -1,3 +1,3 @@
 export default function Footer() {
-    return <div>Footer</div>
+    return <div>AppFooter</div>
 }

src/components/Header.tsx

@@ -1,3 +1,3 @@
 export default function Header() {
-    return <div>Header</div>
+    return <div>AppHeader</div>
 }

src/components/Menu.tsx

@@ -0,0 +1,3 @@
+export default function Menu() {
+    return <div>Menu</div>
+}

src/pages/login/Login.tsx

@@ -18,7 +18,7 @@ export default function Login() {
 			className="bg-cover bg-center flex justify-center items-center h-[100vh]"
 			style={{ backgroundImage: `url(${img_bg})` }}>
 			<div
-				className="flex justify-center items-center px-[40px] pt-[28px] rounded-lg text-[#333] text-lg"
+				className="flex justify-center items-center px-[40px] pt-[28px] rounded-lg text-text text-lg"
 				style={{
 					background: "linear-gradient(180deg, rgba(250, 252, 255, 0.51) 0%, rgba(255, 255, 255, 0.52) 100%)",
 					backdropFilter: "blur(92px)",

tailwind.config.js

@@ -3,7 +3,7 @@ module.exports = {
 	content: ["./src/**/*.{js,jsx,ts,tsx}"],
 	theme: {
 		colors: {
-			primary: "#1989fa",
+			primary: "#3165D2",
 			white: "#FFF",
 			title: "#646566",
 			text: "#333",