From f45f472e47fa4deb713c57a63c0681025b3ff38c Mon Sep 17 00:00:00 2001
From: amass <168062547@qq.com>
Date: Tue, 27 Jun 2023 15:54:18 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=BF=AE=E6=94=B9=E7=A9=BA=E7=99=BD=E9=A1=B5?=
=?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App.js | 10 +++++
src/MainPage.js | 66 ++++++++++++++++-----------------
src/PlayerBar.js | 3 +-
src/assets/empty_hint.png | Bin 27222 -> 16116 bytes
src/assets/empty_list.png | Bin 0 -> 8399 bytes
src/business/request.js | 1 +
src/components/RecordList.js | 69 ++++++++++++++++++++++-------------
7 files changed, 88 insertions(+), 61 deletions(-)
create mode 100644 src/assets/empty_list.png
diff --git a/src/App.js b/src/App.js
index 9b7cbe5..9d09259 100644
--- a/src/App.js
+++ b/src/App.js
@@ -25,6 +25,16 @@ const theme = createTheme({
main: "#222222",
}
},
+ mixins: {
+ drawer: {
+ width: 330,
+ },
+ dense: {
+ toolbar: {
+ height: 48, // 在 @mui/material/Toolbar/Toolbar.js 找到
+ },
+ },
+ },
});
function App() {
diff --git a/src/MainPage.js b/src/MainPage.js
index b55049c..9010d54 100644
--- a/src/MainPage.js
+++ b/src/MainPage.js
@@ -5,17 +5,18 @@ import RecordList from './components/RecordList';
import PlayerBar from './PlayerBar';
import yzs from "./business/request.js";
import { setList, fetchRecord } from "./business/recorderSlice.js"
-import { CssBaseline, Box, Typography } from '@mui/material';
import Backdrop from '@mui/material/Backdrop';
+import CssBaseline from '@mui/material/CssBaseline';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
import CircularProgress from '@mui/material/CircularProgress';
import RecordLyrics from './RecordLyrics';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
import expand from './assets/expand.png';
import close from './assets/close.png';
import empty_hint from './assets/empty_hint.png';
-const drawerWidth = 240;
-
const lyricsBrowserStyle = {
marginTop: 16,
paddingBottom: 40,
@@ -40,7 +41,7 @@ const ClickHanlde = styled('div', { shouldForwardProp: (prop) => prop !== 'open'
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
- left: drawerWidth - 18,
+ left: theme.mixins.drawer.width - 18,
}),
})
);
@@ -48,17 +49,18 @@ const ClickHanlde = styled('div', { shouldForwardProp: (prop) => prop !== 'open'
const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
({ theme, open }) => ({
+ backgroundColor: "#FAFAFA",
flex: 1,
paddingTop: 0,
paddingLeft: theme.spacing(3),
paddingRight: theme.spacing(3),
paddingBottom: theme.spacing(3),
- marginTop: 48,
+ marginTop: theme.mixins.dense.toolbar.height,
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
- marginLeft: `-${drawerWidth}px`,
+ marginLeft: `-${theme.mixins.drawer.width}px`,
...(open && {
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
@@ -69,27 +71,6 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
}),
);
-const LyricItem = ({ empty, hasLyric, currentLyric, currentTime }) => {
- if (empty) {
- return
-
-
-
这里空空如也，添加些东西吧
-
-