feat: improve app layout

neetbox.code-workspace

@@ -0,0 +1,11 @@
+{
+	"folders": [
+		{
+			"path": "."
+		},
+		{
+			"path": "neetbox/frontend"
+		}
+	],
+	"settings": {}
+}

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 (

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);
     });

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
   );
 }

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;
 }

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";

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>
     );

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>

neetbox/frontend/src/pages/console/sidebar.tsx

@@ -3,21 +3,23 @@ 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();
   const { data } = useAPI("/list", { refreshInterval: 5000 });
   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" }}>
             {args.itemElement}
           </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"]}