# improve theme

czy21 · Mar 7, 2024 · b7b5a9a · b7b5a9a
1 parent d3361a4
commit b7b5a9a
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 35 deletions.
diff --git a/src/assets/less/Home.less b/src/assets/less/Home.less
@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  padding: 0;
+}
diff --git a/src/layout/Content.tsx b/src/layout/Content.tsx
@@ -3,13 +3,14 @@ import {Layout} from 'antd';
 import {useRoutes} from "react-router-dom";
 import routes from "@/route";
 
-const AntdContent = Layout.Content;
-
 const Content: React.FC = () => {
     return (
-        <AntdContent>
+        <Layout.Content
+        style={{
+            paddingBlock:"8px",
+        }}>
             {useRoutes(routes)}
-        </AntdContent>
+        </Layout.Content>
     )
 }
 

diff --git a/src/layout/Footer.tsx b/src/layout/Footer.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import {Layout} from "antd";
+
+
+const Footer: React.FC = () => {
+    return (
+        <Layout.Footer style={{textAlign: 'center'}}>
+            Ant Design ©{new Date().getFullYear()} Created by Ant UED
+        </Layout.Footer>
+    );
+}
+
+export default Footer
diff --git a/src/layout/Header.tsx b/src/layout/Header.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 
-import { Layout, Menu } from 'antd';
-import { Link } from "react-router-dom";
-import menus, { MenuModel } from "@/menu";
+import {Layout, Menu} from 'antd';
+import {Link} from "react-router-dom";
+import menus, {MenuModel} from "@/menu";
 
 
 function recursiveMenu(menus: MenuModel[], parentKey?: string) {
@@ -27,29 +27,32 @@ function recursiveMenu(menus: MenuModel[], parentKey?: string) {
             <Menu.Item key={key}>
                 {t.icon}
                 <span>{t.name}</span>
-                {t.path && <Link to={t.path} target={t.redirect ? "_blank" : ""} />}
+                {t.path && <Link to={t.path} target={t.redirect ? "_blank" : ""}/>}
             </Menu.Item>
         )
     })
 }
 
-export default class Header extends React.Component<any, any> {
-    render() {
-        return (
-            <Layout.Header
-                style={{
-                    position: 'sticky',
-                    top: 0,
-                    zIndex: 1,
-                    width: '100%',
-                    display: 'flex',
-                    alignItems: 'center',
-                }}
-            >
-                <Menu mode="horizontal" theme="dark">
-                    {recursiveMenu(menus)}
-                </Menu>
-            </Layout.Header>
-        )
-    }
-}
+const Header: React.FC = () => {
+    return (
+        <Layout.Header
+            style={{
+                position: 'sticky',
+                top: 0,
+                zIndex: 1,
+                width: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                background: "#ffffff",
+            }}
+        >
+            <Menu theme={"light"} mode="horizontal"
+                  style={{
+                      flex: 1, minWidth: 0,
+                  }}>
+                {recursiveMenu(menus)}
+            </Menu>
+        </Layout.Header>
+    )
+}
+export default Header
diff --git a/src/layout/Home.tsx b/src/layout/Home.tsx
@@ -1,16 +1,17 @@
+import '@/assets/less/Home.less'
 import React from "react";
 import {Layout} from 'antd';
 import Header from '@/layout/Header'
 import Content from '@/layout/Content'
+import Footer from '@/layout/Footer'
 
-const Home: React.FC<any> = (props: any) => {
+const Home: React.FC = () => {
     return (
-            <Layout>
-                <Header/>
-                <Layout className={"container"}>
-                    <Content/>
-                </Layout>
-            </Layout>
+        <Layout>
+            <Header/>
+            <Content/>
+            <Footer/>
+        </Layout>
     );
 }
 export default Home