From 74ce39fe73b551000b750ab005251ec5ee893922 Mon Sep 17 00:00:00 2001 From: amass <168062547@qq.com> Date: Mon, 19 Jun 2023 15:15:04 +0800 Subject: [PATCH] =?UTF-8?q?1.=E5=AE=9E=E7=8E=B0=E4=BE=A7=E8=BE=B9=E6=A0=8F?= =?UTF-8?q?=E5=85=B3=E9=97=AD=E6=89=93=E5=BC=80=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 2 +- src/AppBar.js | 6 +-- src/MainPage.js | 78 +++++++++++++++++++++++++++++++-------- src/MainPage.module.css | 7 ---- src/PlayerBar.module.css | 6 --- src/assets/close.png | Bin 0 -> 327 bytes src/assets/expand.png | Bin 0 -> 334 bytes 7 files changed, 65 insertions(+), 34 deletions(-) delete mode 100644 src/MainPage.module.css delete mode 100644 src/PlayerBar.module.css create mode 100644 src/assets/close.png create mode 100644 src/assets/expand.png diff --git a/src/App.js b/src/App.js index f563fdd..0ea7514 100644 --- a/src/App.js +++ b/src/App.js @@ -27,7 +27,7 @@ function App() { }); } return ( -
+
: } /> } /> diff --git a/src/AppBar.js b/src/AppBar.js index 3ddeae6..50565f6 100644 --- a/src/AppBar.js +++ b/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 theme.zIndex.drawer + 1 }} position="sticky" color='black'> + return theme.zIndex.drawer + 1 }} position="fixed" color='black'> @@ -70,7 +69,6 @@ export default function () { 退出 - diff --git a/src/MainPage.js b/src/MainPage.js index 28b72c6..9a7d1f4 100644 --- a/src/MainPage.js +++ b/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
+ + const onClick = () => { + setOpen(!open); + } + + return - - + + +
- +
-
+ } \ No newline at end of file diff --git a/src/MainPage.module.css b/src/MainPage.module.css deleted file mode 100644 index ea01386..0000000 --- a/src/MainPage.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.title { - background-color: burlywood; -} - -.mainBody { - background-color: #FAFAFA; -} \ No newline at end of file diff --git a/src/PlayerBar.module.css b/src/PlayerBar.module.css deleted file mode 100644 index f69ba0a..0000000 --- a/src/PlayerBar.module.css +++ /dev/null @@ -1,6 +0,0 @@ -.playerBar { - display: flex; - background-color: #E6EAEC; - height: 70px; - width: 100%; -} \ No newline at end of file diff --git a/src/assets/close.png b/src/assets/close.png new file mode 100644 index 0000000000000000000000000000000000000000..2f5668a4dc73947a162b30b69f5459d90c698163 GIT binary patch literal 327 zcmV-N0l5B&P)00001b5ch_0Itp) z=>Px$0ZBwbR7gwh)=LV)Fc1dd37*7_UZY3y1TFLg6)GM;L8YjxBCfT&?xim5Lhli& zkYFF_Owx3ht|uQee^M9*1HVW4_9nmrX6gulbMPud8)^cg5i+C#$Pfmg5EW2DxvmEwG z3UL&Wo2zxiIfvwQf#do50}k7z85FNKaLaOexPnwS*n4Z%AZw$EnX0gNNeU~|u*u1G z6ps6j+`m?feB7{2o`LHKPt9IN))p<%^iZ(1XPbh`gPD$p2e Zf?xhhA==kH$jATy002ovPDHLkV1ivugx&xE literal 0 HcmV?d00001 diff --git a/src/assets/expand.png b/src/assets/expand.png new file mode 100644 index 0000000000000000000000000000000000000000..723464136a16963a7274b9a23fc265aef79263e8 GIT binary patch literal 334 zcmV-U0kQsxP)00001b5ch_0Itp) z=>Px$2uVaiR7gwh*G&q7Koke?HwS6qrfBcZT1T|1kP7Mmk&q`4^aS20uc3?Fc#SX= zW*}{R^JPKldfw0RKTmi=vb?xGpbV$hC;^R!r1zq%>Is2F2V@Z4j4IfIR6#Bz3!;!H zC=6ksG{ggyp(dyeF_1Q-MpM_N!;bI-|0Sa!iXqMN&Ojz(3!=bpt$E4F7=)h