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

This commit is contained in:
amass 2023-06-19 15:15:04 +08:00
parent 80b494b6b1
commit 74ce39fe73
7 changed files with 65 additions and 34 deletions

View File

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

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { useSelector, useDispatch } from 'react-redux' import { useSelector } from 'react-redux'
import AppBar from '@mui/material/AppBar'; import AppBar from '@mui/material/AppBar';
import Avatar from '@mui/material/Avatar'; import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
@ -34,8 +34,7 @@ export default function () {
navigate("/login"); 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 /> <CssBaseline />
<Container maxWidth={false} > <Container maxWidth={false} >
<Toolbar disableGutters variant="dense"> <Toolbar disableGutters variant="dense">
@ -70,7 +69,6 @@ export default function () {
<MenuItem onClick={onLogout}> <MenuItem onClick={onLogout}>
<Typography textAlign="center">退出</Typography> <Typography textAlign="center">退出</Typography>
</MenuItem> </MenuItem>
</Menu> </Menu>
</Box> </Box>
</Toolbar> </Toolbar>

View File

@ -1,15 +1,18 @@
import { useEffect } from 'react'; import { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux' import { useSelector, useDispatch } from 'react-redux'
import AppBar from './AppBar'; import AppBar from './AppBar';
import RecordList from './RecordList'; import RecordList from './RecordList';
import PlayerBar from './PlayerBar'; import PlayerBar from './PlayerBar';
import styles from './MainPage.module.css';
import store from './business/store'; import store from './business/store';
import yzs from "./business/request.js"; import yzs from "./business/request.js";
import { setList, setCurrentLyric, setCurrentBlob, setCurrentWaveData } from "./business/recorderSlice.js" import { setList, setCurrentLyric, setCurrentBlob, setCurrentWaveData } from "./business/recorderSlice.js"
import { CssBaseline, Box } from '@mui/material'; import { CssBaseline, Box } from '@mui/material';
import RecordLyrics from './RecordLyrics'; 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({ const theme = createTheme({
status: { status: {
@ -35,7 +38,7 @@ function fetchRecord(accessToken, record) {
yzs.download(accessToken, record.transResultUrl).then( yzs.download(accessToken, record.transResultUrl).then(
blob => blob.text() blob => blob.text()
).then(text => { ).then(text => {
console.log("type", record.type, text); // console.log("type", record.type, text);
let payload = record.type === 1 ? JSON.parse(text) : text; let payload = record.type === 1 ? JSON.parse(text) : text;
store.dispatch(setCurrentLyric(payload)); 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 () { export default function () {
const dispatch = useDispatch() const dispatch = useDispatch()
const accessToken = useSelector(state => state.user.accessToken); const accessToken = useSelector(state => state.user.accessToken);
const passportId = useSelector(state => state.user.passportId); const passportId = useSelector(state => state.user.passportId);
const currentTime = useSelector(state => state.recorder.currentTime); const currentTime = useSelector(state => state.recorder.currentTime);
const [open, setOpen] = useState(true);
useEffect(() => { useEffect(() => {
yzs.get_record_list(accessToken, passportId).then(list => { yzs.get_record_list(accessToken, passportId).then(list => {
dispatch(setList(list.result)); dispatch(setList(list.result));
@ -76,22 +123,21 @@ export default function () {
console.log("get list failed", error); console.log("get list failed", error);
}); });
}, [accessToken, passportId]); }, [accessToken, passportId]);
return <div className={styles.mainBody}>
const onClick = () => {
setOpen(!open);
}
return <Box sx={{ display: 'flex' }}>
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<CssBaseline /> <CssBaseline />
<AppBar /> <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} /> <PlayerBar currentTime={currentTime} />
<RecordLyrics currentTime={currentTime} /> <RecordLyrics currentTime={currentTime} />
</Box> </Main>
</ThemeProvider> </ThemeProvider>
</div > </Box >
} }

View File

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

View File

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

BIN
src/assets/close.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 327 B

BIN
src/assets/expand.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 334 B