diff --git a/package-lock.json b/package-lock.json index 29d2d9b..dfde954 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 78e550e..04b36b3 100644 --- a/package.json +++ b/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", diff --git a/src/App.tsx b/src/App.tsx index 0d8b651..bc30088 100644 --- a/src/App.tsx +++ b/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() {
- -
+ + - - + +
- -
+ +
diff --git a/src/assets/icon_avatar.svg b/src/assets/icon_avatar.svg new file mode 100644 index 0000000..8ff2fc8 --- /dev/null +++ b/src/assets/icon_avatar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index b442417..353c4b7 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,3 +1,11 @@ +import Time from "./Time"; export default function Footer() { - return
AppFooter
-} \ No newline at end of file + return ( +
+

北京强研飞拓科技有限公司

+
+
+
+ ); +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index de35ae4..83b1c5e 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,3 +1,11 @@ +import icon_avatar from "../assets/icon_avatar.svg"; export default function Header() { - return
AppHeader
-} \ No newline at end of file + return ( +
+
+ +

Admin

+
+
+ ); +} diff --git a/src/components/Time.tsx b/src/components/Time.tsx new file mode 100644 index 0000000..753ce12 --- /dev/null +++ b/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}; +} diff --git a/src/index.css b/src/index.css index e53e993..54d47f6 100644 --- a/src/index.css +++ b/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; }