1.实现侧边栏关闭打开。

src/App.js

@@ -27,7 +27,7 @@ function App() {
     });
   }
   return (
-    <div className="App">
+    <div>
       <Routes>
         <Route exact path="/" element={cookies.accessToken ? <MainPage /> : <Navigate to="/login" />} />
         <Route exact path="/login" element={<LoginPage />} />

src/AppBar.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useSelector, useDispatch } from 'react-redux'
+import { useSelector } from 'react-redux'
 import AppBar from '@mui/material/AppBar';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
@@ -34,8 +34,7 @@ export default function () {
         navigate("/login");
     }
 
-
+    return <AppBar sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }} position="fixed" color='black'>
-    return <AppBar sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }} position="sticky" color='black'>
         <CssBaseline />
         <Container maxWidth={false} >
             <Toolbar disableGutters variant="dense">
@@ -70,7 +69,6 @@ export default function () {
                         <MenuItem onClick={onLogout}>
                             <Typography textAlign="center">退出</Typography>
                         </MenuItem>
-
                     </Menu>
                 </Box>
             </Toolbar>

src/MainPage.js

@@ -1,15 +1,18 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux'
 import AppBar from './AppBar';
 import RecordList from './RecordList';
 import PlayerBar from './PlayerBar';
-import styles from './MainPage.module.css';
 import store from './business/store';
 import yzs from "./business/request.js";
 import { setList, setCurrentLyric, setCurrentBlob, setCurrentWaveData } from "./business/recorderSlice.js"
 import { CssBaseline, Box } from '@mui/material';
 import RecordLyrics from './RecordLyrics';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
+import expand from './assets/expand.png';
+import close from './assets/close.png';
+
+const drawerWidth = 240;
 
 const theme = createTheme({
     status: {
@@ -35,7 +38,7 @@ function fetchRecord(accessToken, record) {
     yzs.download(accessToken, record.transResultUrl).then(
         blob => blob.text()
     ).then(text => {
-        console.log("type", record.type, text);
+        // console.log("type", record.type, text);
         let payload = record.type === 1 ? JSON.parse(text) : text;
         store.dispatch(setCurrentLyric(payload));
     });
@@ -61,11 +64,55 @@ function fetchRecord(accessToken, record) {
     });
 }
 
+const ClickHanlde = styled('div', { shouldForwardProp: (prop) => prop !== 'open' })(
+    ({ theme, open }) => ({
+        width: 18,
+        height: 50,
+        backgroundImage: `url(${open ? close : expand})`,
+        position: "fixed",
+        top: "50%",
+        left: 0,
+        zIndex: theme.zIndex.drawer + 1,
+        transition: theme.transitions.create('left', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        ...(open && {
+            transition: theme.transitions.create('left', {
+                easing: theme.transitions.easing.easeOut,
+                duration: theme.transitions.duration.enteringScreen,
+            }),
+            left: drawerWidth - 18,
+        }),
+    })
+);
+
+
+const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
+    ({ theme, open }) => ({
+        flex: 1,
+        padding: theme.spacing(3),
+        transition: theme.transitions.create('margin', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        marginLeft: `-${drawerWidth}px`,
+        ...(open && {
+            transition: theme.transitions.create('margin', {
+                easing: theme.transitions.easing.easeOut,
+                duration: theme.transitions.duration.enteringScreen,
+            }),
+            marginLeft: 0,
+        }),
+    }),
+);
+
 export default function () {
     const dispatch = useDispatch()
     const accessToken = useSelector(state => state.user.accessToken);
     const passportId = useSelector(state => state.user.passportId);
     const currentTime = useSelector(state => state.recorder.currentTime);
+    const [open, setOpen] = useState(true);
     useEffect(() => {
         yzs.get_record_list(accessToken, passportId).then(list => {
             dispatch(setList(list.result));
@@ -76,22 +123,21 @@ export default function () {
             console.log("get list failed", error);
         });
     }, [accessToken, passportId]);
-    return <div className={styles.mainBody}>
+
+    const onClick = () => {
+        setOpen(!open);
+    }
+
+    return <Box sx={{ display: 'flex' }}>
         <ThemeProvider theme={theme}>
             <CssBaseline />
             <AppBar />
-            <RecordList fetchRecord={fetchRecord} />
+            <RecordList open={open} fetchRecord={fetchRecord} />
-            <Box
+            <ClickHanlde open={open} onClick={onClick} />
-                component="main"
+            <Main open={open}>
-                sx={{
-                    width: `calc(100% - 296px)`,
-                    ml: `272px`,
-                    mr: `24px`,
-                }}
-            >
                 <PlayerBar currentTime={currentTime} />
                 <RecordLyrics currentTime={currentTime} />
-            </Box>
+            </Main>
         </ThemeProvider>
-    </div >
+    </Box >
 }

src/MainPage.module.css

@@ -1,7 +0,0 @@
-.title {
-    background-color: burlywood;
-}
-
-.mainBody {
-    background-color: #FAFAFA;
-}

src/PlayerBar.module.css

@@ -1,6 +0,0 @@
-.playerBar {
-    display: flex;
-    background-color: #E6EAEC;
-    height: 70px;
-    width: 100%;
-}