Files
vf_react/src/layouts/Landing.js
2025-10-13 19:53:13 +08:00

98 lines
2.6 KiB
JavaScript
Executable File

// Chakra imports
import { Box, Stack } from "@chakra-ui/react";
import { ArgonLogoLight, ChakraLogoLight } from "components/Icons/Icons";
import MainPanel from "components/Layout/MainPanel";
import PanelContainer from "components/Layout/PanelContainer";
import PanelContent from "components/Layout/PanelContent";
import Sidebar from "components/Sidebar/Sidebar.js";
import { SidebarContext } from "contexts/SidebarContext";
import React, { useState, Suspense } from "react";
import { Route, Routes, Navigate } from "react-router-dom";
import routes from "routes.js";
import PageLoader from "components/Loading/PageLoader";
const Landing = () => {
const [toggleSidebar, setToggleSidebar] = useState(false);
const [sidebarWidth, setSidebarWidth] = useState(275);
const getRoutes = (routes) => {
return routes.map((route, key) => {
if (route.layout === "/landing") {
const Component = route.component;
return (
<Route
path={route.path}
element={
<Suspense fallback={<PageLoader message="加载中..." />}>
<Component />
</Suspense>
}
key={key}
/>
);
}
if (route.collapse) {
return getRoutes(route.items);
}
if (route.category) {
return getRoutes(route.items);
} else {
return null;
}
});
};
return (
<SidebarContext.Provider
value={{
sidebarWidth,
setSidebarWidth,
toggleSidebar,
setToggleSidebar,
}}
>
<Box minH="100vh" bg="linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)">
<Sidebar
routes={routes}
landing={true}
logo={
<Stack
direction="row"
spacing="12px"
align="center"
justify="center"
>
<ArgonLogoLight w="74px" h="27px" />
<Box w="1px" h="20px" bg={"white"} />
<ChakraLogoLight w="82px" h="21px" />
</Stack>
}
display="none"
/>
<MainPanel
w={{
base: "100%",
xl: `calc(100% - 275px)`,
}}
minH="100vh"
>
<PanelContent>
<PanelContainer>
<Routes>
{getRoutes(routes)}
<Route
path="/landing"
element={<Navigate to="/admin/dashboard/default" replace />}
/>
</Routes>
</PanelContainer>
</PanelContent>
</MainPanel>
</Box>
</SidebarContext.Provider>
);
};
export default Landing;