1.修改空白页样式

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() {

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 <div style={{
-            height: "calc(100vh - 298px)",
-            marginTop: 48,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-        }} >
-            <div>
-                <img style={{ maxWidth: "100%", marginBottom: 40, }} src={empty_hint} />
-                <Typography align='center' color="#929292">这里空空如也，添加些东西吧</Typography>
-            </div>
-        </div>
-    } else {
-        return hasLyric ? <RecordLyrics style={lyricsBrowserStyle} currentLyric={currentLyric} currentTime={currentTime} /> :
-            <div style={lyricsBrowserStyle}
-            />
-    }
-}
-
 const RecordPlayer = ({ loading, empty, playerBarWidth, currentTime, hasLyric, currentLyric }) => {
     if (loading) {
         return <Backdrop
@@ -102,15 +83,32 @@ const RecordPlayer = ({ loading, empty, playerBarWidth, currentTime, hasLyric, c
             open >
             <CircularProgress color="inherit" />
         </Backdrop>
+    } else {
+        if (empty) {
+            return <Paper sx={{
+                height: (theme) => `calc(100vh - 48px - 24px - 24px)`,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                marginTop: (theme) => theme.spacing(3)
+            }} >
+                <img style={{ maxWidth: "100%", marginBottom: 40, }} src={empty_hint} />
+                <Typography align='center' color="#929292">这里像我看不到你时的心情一样空空荡荡</Typography>
+            </Paper>
         } else {
             return <div>
                 <PlayerBar width={playerBarWidth} currentTime={currentTime} lyric={currentLyric} />
-            <LyricItem empty={empty} hasLyric={hasLyric} currentLyric={currentLyric} currentTime={currentTime} />
+                {hasLyric ? <RecordLyrics style={lyricsBrowserStyle} currentLyric={currentLyric} currentTime={currentTime} /> :
+                    <div style={lyricsBrowserStyle}
+                    />}
             </div>
         }
+    }
 };
 
 export default function () {
+    const theme = useTheme();
     const dispatch = useDispatch()
     const accessToken = useSelector(state => state.user.accessToken);
     const passportId = useSelector(state => state.user.passportId);
@@ -144,12 +142,12 @@ export default function () {
 
     const onClick = () => {
         setOpen(!open);
-        setPlayerBarWidth(document.documentElement.clientWidth - 240 - 48); // 防止中途底部出现scrollbar
+        setPlayerBarWidth(document.documentElement.clientWidth - theme.mixins.drawer.width - 48); // 防止中途底部出现scrollbar
     }
 
     const handleResize = () => {
         // let scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
-        setPlayerBarWidth(document.documentElement.clientWidth - (open ? 240 : 0) - 48);
+        setPlayerBarWidth(document.documentElement.clientWidth - (open ? theme.mixins.drawer.width : 0) - 48);
     }
 
     const onTransitionEnd = () => {

src/PlayerBar.js

@@ -80,13 +80,14 @@ export default function ({ width, lyric, currentTime }) {
 
     return <Stack sx={{
         position: "sticky",
-        top: 48,
+        top: (theme) => theme.mixins.dense.toolbar.height,
         backgroundColor: "#FAFAFA",
     }} >
         <Container disableGutters maxWidth={false} sx={{
             height: 60,
             display: "flex",
             alignItems: "center",
+            backgroundColor: "#FAFAFA",
         }}>
             <Typography variant="h6" sx={{ flexGrow: 1 }} >{recordList.length > 0 ? recordList.at(currentIndex).editName : "暂无内容"}</Typography>
             <IconButton onClick={onDownload}>

src/business/request.js

@@ -201,6 +201,7 @@ const yzs = {
         body.timestamp = Math.round(new Date().getTime() / 1000);
         body.userCell = userCell;
         body.phoneCode = phoneCode;
+        body.smsTemplateId = 316;   // 纽曼短信模板
         return fetch("/rest/v2/phone/login", {
             method: "POST",
             body: constructParameter(body),

src/components/RecordList.js

@@ -10,10 +10,23 @@ import Typography from '@mui/material/Typography';
 import Toolbar from '@mui/material/Toolbar';
 import { setCurrentIndex, fetchRecord } from "../business/recorderSlice.js"
 import AccessTimeFilledIcon from '@mui/icons-material/AccessTimeFilled';
+import empty_list from '../assets/empty_list.png';
 
-const drawerWidth = 240;
+const EmptyList = () => {
+    return <div style={{
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+    }}>
+        <img style={{ maxWidth: "100%", marginBottom: 40, }} src={empty_list} />
+        <Typography fontSize={14} align='center' color="#929292">这里空空如也，添加些东西吧</Typography>
+    </div>;
+};
 
-export default function ({ open, recordList, currentIndex }) {
+
+const ListContent = ({ recordList, currentIndex }) => {
     const dispatch = useDispatch();
     const accessToken = useSelector(state => state.user.accessToken);
     const onSelected = (event, index) => {
@@ -21,21 +34,7 @@ export default function ({ open, recordList, currentIndex }) {
         dispatch(setCurrentIndex(index));
         dispatch(fetchRecord(accessToken, index, recordList.at(index)));
     }
-    return <Drawer
+    return <Box sx={{ overflow: 'auto' }}>
-        variant="persistent"
-        anchor="left"
-        open={open}
-        sx={{
-            width: drawerWidth,
-            flexShrink: 0,
-            '& .MuiDrawer-paper': {
-                width: drawerWidth,
-                boxSizing: 'border-box',
-            },
-        }}
-    >
-        <Toolbar variant="dense" />
-        <Box sx={{ overflow: 'auto' }}>
         <List>
             {recordList === undefined ? <React.Fragment /> : recordList.map((item, index) => (
                 <ListItem key={index} disablePadding>
@@ -57,5 +56,23 @@ export default function ({ open, recordList, currentIndex }) {
             ))}
         </List>
     </Box>
+}
+
+export default function ({ open, recordList, currentIndex }) {
+    return <Drawer
+        variant="persistent"
+        anchor="left"
+        open={open}
+        sx={{
+            width: (theme) => theme.mixins.drawer.width,
+            flexShrink: 0,
+            '& .MuiDrawer-paper': {
+                width: (theme) => theme.mixins.drawer.width,
+                boxSizing: 'border-box',
+            },
+        }}
+    >
+        <Toolbar variant="dense" />
+        {(recordList === undefined || recordList.length === 0) ? <EmptyList /> : <ListContent recordList={recordList} currentIndex={currentIndex} />}
     </Drawer>
 }