调整header，footer样式

package-lock.json

@@ -33,6 +33,7 @@
         "classnames": "^2.5.1",
         "css-loader": "^6.5.1",
         "css-minimizer-webpack-plugin": "^3.2.0",
+        "dayjs": "^1.11.13",
         "dotenv": "^10.0.0",
         "dotenv-expand": "^5.1.0",
         "eslint": "^8.3.0",

package.json

@@ -28,6 +28,7 @@
     "classnames": "^2.5.1",
     "css-loader": "^6.5.1",
     "css-minimizer-webpack-plugin": "^3.2.0",
+    "dayjs": "^1.11.13",
     "dotenv": "^10.0.0",
     "dotenv-expand": "^5.1.0",
     "eslint": "^8.3.0",

src/App.tsx

@@ -3,20 +3,16 @@ import React from "react";
 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 { default as AppHeader } from "./components/Header";
+import { default as AppFooter } from "./components/Footer";
 import SideMenu from "./components/SideMenu";
 
 const { Header, Footer, Sider, Content } = Layout;
 
 function App() {
 	const headerStyle: React.CSSProperties = {
-		textAlign: "center",
-		color: "#fff",
 		height: 64,
-		paddingInline: 48,
-		lineHeight: "64px",
-		backgroundColor: "#4096ff",
+		padding: 0,
 	};
 
 	const contentStyle: React.CSSProperties = {
@@ -28,9 +24,8 @@ function App() {
 	};
 
 	const footerStyle: React.CSSProperties = {
-		textAlign: "center",
-		color: "#fff",
-		backgroundColor: "#4096ff",
+		height: 64,
+		padding: 0,
 	};
 
 	const layoutStyle = {
@@ -44,14 +39,14 @@ function App() {
 				</Sider>
 				<Layout>
 					<Header style={headerStyle}>
-            <AppHeader />
-          </Header>
+						<AppHeader />
+					</Header>
 					<Content style={contentStyle}>
-            <Outlet />
-          </Content>
+						<Outlet />
+					</Content>
 					<Footer style={footerStyle}>
-            <AppFooter />
-          </Footer>
+						<AppFooter />
+					</Footer>
 				</Layout>
 			</Layout>
 		</div>

src/assets/icon_avatar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="46" height="46" viewBox="0 0 46 46"><g><rect x="0" y="0" width="46" height="46" rx="23" fill="#3165D2" fill-opacity="1"/><g><path d="M33.176100000000005,29.9538C32.6493,28.7188,31.8849,27.597099999999998,30.9254,26.651C29.9687,25.702199999999998,28.8355,24.945700000000002,27.5883,24.4234C27.5771,24.4178,27.5659,24.415100000000002,27.5548,24.4095C29.2945,23.1658,30.4255,21.13995,30.4255,18.85427C30.4255,15.06784,27.3258,12,23.5,12C19.67423,12,16.57451,15.06784,16.57451,18.85427C16.57451,21.13995,17.70549,23.1658,19.44524,24.412300000000002C19.43407,24.4178,19.4229,24.4206,19.41173,24.426099999999998C18.16067,24.9485,17.03807,25.697499999999998,16.07465,26.6538C15.116,27.6006,14.35167,28.7221,13.823868000000001,29.9565C13.305356,31.165,13.0257107,32.4607,13.0000698301,33.773399999999995C12.999324489,33.8029,13.00455219,33.8322,13.015445,33.859700000000004C13.0263379,33.887100000000004,13.0426754,33.9122,13.063495,33.9333C13.0843146,33.9544,13.109195,33.971199999999996,13.13667,33.9827C13.164145,33.9941,13.193659,34,13.223473,34C13.223473,34,14.89899,34,14.89899,34C15.02186,34,15.1196,33.9033,15.122399999999999,33.784400000000005C15.17825,31.6508,16.04393,29.6525,17.57424,28.1379C19.15761,26.5709,21.26039,25.7085,23.5,25.7085C25.7396,25.7085,27.842399999999998,26.5709,29.4258,28.1379C30.9561,29.6525,31.8218,31.6508,31.8776,33.784400000000005C31.8804,33.906,31.9781,34,32.101,34C32.101,34,33.7765,34,33.7765,34C33.8063,34,33.835899999999995,33.9941,33.863299999999995,33.9827C33.8908,33.971199999999996,33.9157,33.9544,33.936499999999995,33.9333C33.957300000000004,33.9122,33.9737,33.887100000000004,33.9846,33.859700000000004C33.995400000000004,33.8322,34.000699999999995,33.8029,33.9999,33.773399999999995C33.972,32.4523,33.695499999999996,31.1671,33.176100000000005,29.9538C33.176100000000005,29.9538,33.176100000000005,29.9538,33.176100000000005,29.9538ZM23.5,23.608C22.21823,23.608,21.011850000000003,23.113300000000002,20.10428,22.2151C19.1967,21.31683,18.69684,20.12286,18.69684,18.85427C18.69684,17.58568,19.1967,16.39171,20.10428,15.49347C21.011850000000003,14.59523,22.21823,14.1005,23.5,14.1005C24.7818,14.1005,25.9881,14.59523,26.895699999999998,15.49347C27.8033,16.39171,28.3032,17.58568,28.3032,18.85427C28.3032,20.12286,27.8033,21.31683,26.895699999999998,22.2151C25.9881,23.113300000000002,24.7818,23.608,23.5,23.608Z" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>

src/components/Footer.tsx

@@ -1,3 +1,11 @@
+import Time from "./Time";
 export default function Footer() {
-    return <div>AppFooter</div>
-}
+	return (
+		<div className="bg-[--bgColor] h-full flex items-center text-base relative">
+			<p className="text-[#c8c8c8] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">北京强研飞拓科技有限公司</p>
+			<section className="ml-auto mr-8 flex items-center ">
+				<Time />
+			</section>
+		</div>
+	);
+}

src/components/Header.tsx

@@ -1,3 +1,11 @@
+import icon_avatar from "../assets/icon_avatar.svg";
 export default function Header() {
-    return <div>AppHeader</div>
-}
+	return (
+		<div className="bg-[--bgColor] h-full flex items-center">
+			<section className="ml-auto mr-8 flex items-center">
+				<img src={icon_avatar} alt="" className="h-8" />
+				<p className="text-base ml-2">Admin</p>
+			</section>
+		</div>
+	);
+}

src/components/Time.tsx

@@ -0,0 +1,17 @@
+import dayjs from "dayjs";
+import { useCallback, useEffect, useState } from "react";
+
+export default function Time({ format = "YYYY-MM-DD HH:mm" }: { format?: string }) {
+	const [time, setTime] = useState(dayjs().format(format));
+    
+	const updateClock = useCallback(() => {
+		setTime(dayjs().format(format));
+	}, [format]);
+
+	useEffect(() => {
+		const intervalId = setInterval(updateClock, 1000);
+		return () => clearInterval(intervalId);
+	}, [updateClock]);
+
+	return <>{time}</>;
+}

src/index.css

@@ -8,6 +8,8 @@ body {
 		"Droid Sans", "Helvetica Neue", sans-serif;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
+
+	background-color: #f6f7fb;
 }
 
 code {
@@ -16,4 +18,5 @@ code {
 
 :root {
 	--primaryColor: #3e63cb;
+	--bgColor: #f6f7fb;
 }