DashboardLayout.jsx 1.86 KB
Newer Older
wuhao's avatar
wuhao committed
1
import { Outlet, useModel } from "@umijs/max";
wuhao's avatar
wuhao committed
2
import { useEffect, useState } from "react";
wuhao's avatar
wuhao committed
3 4 5
// @mui
import { styled } from "@mui/material/styles";
import { Scrollbars } from "react-custom-scrollbars";
wuhao's avatar
wuhao committed
6
import io from "socket.io-client";
wuhao's avatar
wuhao committed
7 8 9
import Header from "./header";
import Nav from "./nav";

wuhao's avatar
wuhao committed
10 11
const socket = io(SOCKET_IO_URL, { query: { id: localStorage.getItem("ID") } });

wuhao's avatar
wuhao committed
12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
// ----------------------------------------------------------------------

const APP_BAR_MOBILE = 64;
const APP_BAR_DESKTOP = 64;

const StyledRoot = styled("div")({
  display: "flex",
  minHeight: "100%",
  overflow: "hidden",
});

const Main = styled("div")(({ theme }) => ({
  flexGrow: 1,
  overflow: "hidden",
  height: "100vh",
  paddingTop: APP_BAR_MOBILE + 24,
  paddingBottom: 0,
  [theme.breakpoints.up("lg")]: {
    paddingTop: APP_BAR_DESKTOP + 24,
    paddingLeft: 0,
    paddingRight: 0,
  },
}));

// ----------------------------------------------------------------------

export default function DashboardLayout() {
  const [open, setOpen] = useState(false);
wuhao's avatar
wuhao committed
40 41 42 43
  const {
    initialState: { menuNum },
    setInitialState,
  } = useModel("@@initialState");
wuhao's avatar
wuhao committed
44

wuhao's avatar
wuhao committed
45 46 47
  useEffect(() => {
    socket.connect();
    socket.on("message", (data) => {
wuhao's avatar
wuhao committed
48 49 50 51 52 53 54
      setInitialState((s) => ({
        ...s,
        menuNum: {
          ...s.menuNum,
          ...data?.param,
        },
      }));
wuhao's avatar
wuhao committed
55 56 57 58 59 60 61
    });

    return () => {
      // 关闭 WebSocket 连接
      socket.disconnect();
    };
  }, []);
wuhao's avatar
wuhao committed
62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
  return (
    <StyledRoot>
      <Header onOpenNav={() => setOpen(true)} />

      <Nav openNav={open} onCloseNav={() => setOpen(false)} />

      <Main>
        <Scrollbars
          thumbMinSize={10}
          autoHide
          style={{
            width: "100%",
            height: "100%",
          }}
          hideTracksWhenNotNeeded
        >
          <Outlet />
        </Scrollbars>
      </Main>
    </StyledRoot>
  );
}