From 4118933639db387c43189abae7c334cca7d09e3e Mon Sep 17 00:00:00 2001
From: lideming <me@yuuza.net>
Date: Wed, 29 Nov 2023 17:16:03 +0800
Subject: [PATCH] feat: improve app layout

---
 neetbox.code-workspace                        | 11 +++++
 neetbox/frontend/src/App.tsx                  | 42 +------------------
 neetbox/frontend/src/components/Footer.tsx    | 12 ------
 .../dashboard/project/logs/logs.tsx           |  2 +-
 .../src/components/layout/AppFooter.tsx       | 24 +++++++++++
 .../src/components/layout/AppHeader.tsx       | 28 +++++++++++++
 .../src/components/layout/AppLayout.tsx       | 15 +++++++
 neetbox/frontend/src/components/loading.tsx   | 13 +++++-
 .../frontend/src/components/logo.module.css   |  6 ++-
 neetbox/frontend/src/main.tsx                 |  2 +-
 neetbox/frontend/src/pages/console/index.tsx  |  6 ++-
 .../src/pages/console/proejctDashboard.tsx    |  2 +-
 .../frontend/src/pages/console/sidebar.tsx    |  6 ++-
 13 files changed, 107 insertions(+), 62 deletions(-)
 create mode 100644 neetbox.code-workspace
 delete mode 100644 neetbox/frontend/src/components/Footer.tsx
 create mode 100644 neetbox/frontend/src/components/layout/AppFooter.tsx
 create mode 100644 neetbox/frontend/src/components/layout/AppHeader.tsx
 create mode 100644 neetbox/frontend/src/components/layout/AppLayout.tsx

diff --git a/neetbox.code-workspace b/neetbox.code-workspace
new file mode 100644
index 00000000..1b17355a
--- /dev/null
+++ b/neetbox.code-workspace
@@ -0,0 +1,11 @@
+{
+	"folders": [
+		{
+			"path": "."
+		},
+		{
+			"path": "neetbox/frontend"
+		}
+	],
+	"settings": {}
+}
\ No newline at end of file
diff --git a/neetbox/frontend/src/App.tsx b/neetbox/frontend/src/App.tsx
index 5661e9bb..f77da0c7 100644
--- a/neetbox/frontend/src/App.tsx
+++ b/neetbox/frontend/src/App.tsx
@@ -1,43 +1,5 @@
-import { Layout, Button, Space, Typography } from "@douyinfe/semi-ui";
-import { Link, Outlet } from "react-router-dom";
-import SwitchColorMode from "./components/themeSwitcher";
-import "./styles/global.css";
-import FooterContent from "./components/Footer";
-
-const { Header, Footer, Content } = Layout;
-
-export default function AppLayout() {
-  return (
-    <Layout className="components-layout-demo" style={{ minHeight: "100vh" }}>
-      <Header
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          padding: "0 20px",
-        }}
-      >
-        <Typography.Title>
-          <Link to="/">NEET Center</Link>
-        </Typography.Title>
-        <div>
-          <Space>
-            <SwitchColorMode></SwitchColorMode>
-            <Link to="/login">
-              <Button disabled>Login</Button>
-            </Link>
-          </Space>
-        </div>
-      </Header>
-      <Layout>
-        <Content style={{ flex: "1" }}>
-          <Outlet />
-        </Content>
-      </Layout>
-      <Footer children={<FooterContent />} />
-    </Layout>
-  );
-}
+import { Button } from "@douyinfe/semi-ui";
+import { Link } from "react-router-dom";
 
 export function Home() {
   return (
diff --git a/neetbox/frontend/src/components/Footer.tsx b/neetbox/frontend/src/components/Footer.tsx
deleted file mode 100644
index 4809996a..00000000
--- a/neetbox/frontend/src/components/Footer.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-import Logo from "./logo";
-
-export default function FooterContent(): React.JSX.Element {
-  return (
-    <div style={{ textAlign: "center" }}>
-      <Logo styles={{ width: 50 }} withGlow={true} withLink={true} />
-      <br />
-      <div style={{ fontSize: 20 }}>© 2023 - 2023 Neet Design. All rights reserved.</div>
-    </div>
-  );
-}
diff --git a/neetbox/frontend/src/components/dashboard/project/logs/logs.tsx b/neetbox/frontend/src/components/dashboard/project/logs/logs.tsx
index 2ae31165..54df5ae3 100644
--- a/neetbox/frontend/src/components/dashboard/project/logs/logs.tsx
+++ b/neetbox/frontend/src/components/dashboard/project/logs/logs.tsx
@@ -12,7 +12,7 @@ function AutoScrolling({ style, children }: React.PropsWithChildren<{ style: Rea
   const [following, setFollowing] = useState(true);
   const [renderingElement, setRenderingElement] = useState(children);
   const [height, setHeight] = useState(0);
-  useEffect(() => {
+  useLayoutEffect(() => {
     const observer = new ResizeObserver(() => {
       setHeight(containerRef.current!.clientHeight);
     });
diff --git a/neetbox/frontend/src/components/layout/AppFooter.tsx b/neetbox/frontend/src/components/layout/AppFooter.tsx
new file mode 100644
index 00000000..a5370799
--- /dev/null
+++ b/neetbox/frontend/src/components/layout/AppFooter.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { Divider, Layout, Typography } from "@douyinfe/semi-ui";
+import Logo from "../logo";
+
+export default function AppFooter(): React.JSX.Element {
+  return (
+    <Layout.Footer
+      style={{
+        textAlign: "center",
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "column",
+        padding: "10px",
+        gap: "10px",
+      }}
+    >
+      <Divider />
+      <Logo styles={{ width: 50 }} withGlow={true} withLink={true} />
+      <Typography.Text type="tertiary" style={{ fontSize: 14 }}>
+        © 2023 - 2023 Neet Design. All rights reserved.
+      </Typography.Text>
+    </Layout.Footer>
+  );
+}
diff --git a/neetbox/frontend/src/components/layout/AppHeader.tsx b/neetbox/frontend/src/components/layout/AppHeader.tsx
new file mode 100644
index 00000000..71a72bbb
--- /dev/null
+++ b/neetbox/frontend/src/components/layout/AppHeader.tsx
@@ -0,0 +1,28 @@
+import { Typography, Space, Button, Layout } from "@douyinfe/semi-ui";
+import { Link } from "react-router-dom";
+import SwitchColorMode from "../themeSwitcher";
+
+export default function AppHeader() {
+  return (
+    <Layout.Header
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: "0 20px",
+      }}
+    >
+      <Typography.Title>
+        <Link to="/">NEET Center</Link>
+      </Typography.Title>
+      <div>
+        <Space>
+          <SwitchColorMode></SwitchColorMode>
+          <Link to="/login">
+            <Button disabled>Login</Button>
+          </Link>
+        </Space>
+      </div>
+    </Layout.Header>
+  );
+}
diff --git a/neetbox/frontend/src/components/layout/AppLayout.tsx b/neetbox/frontend/src/components/layout/AppLayout.tsx
new file mode 100644
index 00000000..4896ae9f
--- /dev/null
+++ b/neetbox/frontend/src/components/layout/AppLayout.tsx
@@ -0,0 +1,15 @@
+import { Layout } from "@douyinfe/semi-ui";
+import { Outlet } from "react-router-dom";
+import AppHeader from "./AppHeader";
+import "../../styles/global.css";
+
+export default function AppLayout() {
+  return (
+    <Layout style={{ height: "100vh" }}>
+      <AppHeader />
+      <Layout.Content style={{ flex: "1", overflow: "hidden" }}>
+        <Outlet />
+      </Layout.Content>
+    </Layout>
+  );
+}
diff --git a/neetbox/frontend/src/components/loading.tsx b/neetbox/frontend/src/components/loading.tsx
index 9bc307ae..0e3f547d 100644
--- a/neetbox/frontend/src/components/loading.tsx
+++ b/neetbox/frontend/src/components/loading.tsx
@@ -1,6 +1,15 @@
 import { Spin } from "@douyinfe/semi-ui";
+import { SpinSize } from "@douyinfe/semi-ui/lib/es/spin";
 
-export default function Loading({ width = "", height = "100px" }: { width?: string; height?: string }) {
+export default function Loading({
+  width = "",
+  height = "100px",
+  size = "middle",
+}: {
+  width?: string;
+  height?: string;
+  size?: SpinSize;
+}) {
   return (
     <div
       style={{
@@ -11,7 +20,7 @@ export default function Loading({ width = "", height = "100px" }: { width?: stri
         height,
       }}
     >
-      <Spin size="large" />
+      <Spin size={size} />
     </div>
   );
 }
diff --git a/neetbox/frontend/src/components/logo.module.css b/neetbox/frontend/src/components/logo.module.css
index 81e3bad2..bc036c0b 100644
--- a/neetbox/frontend/src/components/logo.module.css
+++ b/neetbox/frontend/src/components/logo.module.css
@@ -7,9 +7,13 @@ body[theme-mode="dark"] {
 }
 
 .neet-logo-glow {
-  transition: filter 0.3s ease-in-out;
+  transition:
+    filter 0.3s ease-in-out,
+    opacity 0.3s ease-in-out;
+  opacity: 0.7;
 }
 
 .neet-logo-glow:hover {
   filter: drop-shadow(0 0 0.55rem var(--logo-glow-color));
+  opacity: 1;
 }
diff --git a/neetbox/frontend/src/main.tsx b/neetbox/frontend/src/main.tsx
index accdd9e9..8caad2d3 100644
--- a/neetbox/frontend/src/main.tsx
+++ b/neetbox/frontend/src/main.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
-import AppLayout from "./App";
+import AppLayout from "./components/layout/AppLayout";
 import LoginPage from "./pages/login";
 import "./index.css";
 import Console, { consoleRoutes } from "./pages/console";
diff --git a/neetbox/frontend/src/pages/console/index.tsx b/neetbox/frontend/src/pages/console/index.tsx
index de587efe..8a7bc9dc 100644
--- a/neetbox/frontend/src/pages/console/index.tsx
+++ b/neetbox/frontend/src/pages/console/index.tsx
@@ -4,6 +4,7 @@ import { Outlet, RouteObject } from "react-router-dom";
 import ConsoleNavBar from "./sidebar";
 import Dashboard from "./proejctDashboard";
 import Overview from "./overview";
+import AppFooter from "../../components/layout/AppFooter";
 
 export function consoleRoutes(): RouteObject {
   return {
@@ -24,12 +25,13 @@ export default class Console extends Component {
   render() {
     const { Sider, Content } = Layout;
     return (
-      <Layout>
+      <Layout style={{ height: "100%" }}>
         <Sider style={{ background: "var(--semi-color-fill-2)" }}>
           <ConsoleNavBar />
         </Sider>
-        <Content>
+        <Content style={{ height: "100%", overflow: "auto" }}>
           <Outlet />
+          <AppFooter />
         </Content>
       </Layout>
     );
diff --git a/neetbox/frontend/src/pages/console/proejctDashboard.tsx b/neetbox/frontend/src/pages/console/proejctDashboard.tsx
index 0832a745..a88d7e0f 100644
--- a/neetbox/frontend/src/pages/console/proejctDashboard.tsx
+++ b/neetbox/frontend/src/pages/console/proejctDashboard.tsx
@@ -51,7 +51,7 @@ function ProjectDashboard() {
             <PlatformProps data={data.current.platform} />
           </>
         ) : (
-          <Loading />
+          <Loading size="large" />
         )}
       </div>
     </ProjectContext.Provider>
diff --git a/neetbox/frontend/src/pages/console/sidebar.tsx b/neetbox/frontend/src/pages/console/sidebar.tsx
index 7169d440..001807d0 100644
--- a/neetbox/frontend/src/pages/console/sidebar.tsx
+++ b/neetbox/frontend/src/pages/console/sidebar.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { IconStar, IconSetting } from "@douyinfe/semi-icons";
 import { Link, useLocation } from "react-router-dom";
 import { useAPI } from "../../services/api";
+import Loading from "../../components/loading";
 
 export default function ConsoleNavBar() {
   const location = useLocation();
@@ -10,6 +11,7 @@ export default function ConsoleNavBar() {
   return (
     <Nav
       renderWrapper={(args) => {
+        if (args.props.itemKey === "loading") return <Loading height="60px" />;
         if (!(args.props.itemKey as string).startsWith("/")) return args.itemElement;
         return (
           <Link to={args.props.itemKey as string} style={{ textDecoration: "none" }}>
@@ -17,7 +19,7 @@ export default function ConsoleNavBar() {
           </Link>
         );
       }}
-      bodyStyle={{ height: 320 }}
+      style={{ height: "100%", overflowY: "auto" }}
       items={[
         { itemKey: "/console/overview", text: "Overview", icon: <IconStar /> },
         {
@@ -27,7 +29,7 @@ export default function ConsoleNavBar() {
           items: data?.names.map((name: string) => ({
             text: name,
             itemKey: "/console/project/" + name,
-          })) ?? ["(loading...)"],
+          })) ?? [{ text: "", itemKey: "loading" }],
         },
       ]}
       defaultOpenKeys={["projects"]}