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
-
- - 这里空空如也，添加些东西吧 -
-
- } else { - return hasLyric ? : -
- } -} - const RecordPlayer = ({ loading, empty, playerBarWidth, currentTime, hasLyric, currentLyric }) => { if (loading) { return } else { - return
- - -
+ if (empty) { + return `calc(100vh - 48px - 24px - 24px)`, + display: "flex", + flexDirection: "column", + alignItems: "center", + justifyContent: "center", + marginTop: (theme) => theme.spacing(3) + }} > + + 这里像我看不到你时的心情一样空空荡荡 + + } else { + return
+ + {hasLyric ? : +
} +
+ } } }; 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 = () => { diff --git a/src/PlayerBar.js b/src/PlayerBar.js index 8864be4..00ecf00 100644 --- a/src/PlayerBar.js +++ b/src/PlayerBar.js @@ -80,13 +80,14 @@ export default function ({ width, lyric, currentTime }) { return theme.mixins.dense.toolbar.height, backgroundColor: "#FAFAFA", }} > {recordList.length > 0 ? recordList.at(currentIndex).editName : "暂无内容"} diff --git a/src/assets/empty_hint.png b/src/assets/empty_hint.png index 9248aec..88f33fb 100644 Binary files a/src/assets/empty_hint.png and b/src/assets/empty_hint.png differ diff --git a/src/assets/empty_list.png b/src/assets/empty_list.png new file mode 100644 index 0000000..8674efb Binary files /dev/null and b/src/assets/empty_list.png differ diff --git a/src/business/request.js b/src/business/request.js index 7268dd3..c41d9f5 100644 --- a/src/business/request.js +++ b/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), diff --git a/src/components/RecordList.js b/src/components/RecordList.js index baea35e..1be0fcb 100644 --- a/src/components/RecordList.js +++ b/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
+ + 这里空空如也，添加些东西吧 +
; +}; -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,41 +34,45 @@ export default function ({ open, recordList, currentIndex }) { dispatch(setCurrentIndex(index)); dispatch(fetchRecord(accessToken, index, recordList.at(index))); } + return + + {recordList === undefined ? : recordList.map((item, index) => ( + + onSelected(event, index)}> + + {item.content.slice(0, 50) + '......'} +
+ + 更新于 {new Date(item.createTime).toLocaleString()} + + } /> + + + ))} + + +} + +export default function ({ open, recordList, currentIndex }) { return theme.mixins.drawer.width, flexShrink: 0, '& .MuiDrawer-paper': { - width: drawerWidth, + width: (theme) => theme.mixins.drawer.width, boxSizing: 'border-box', }, }} > - - - {recordList === undefined ? : recordList.map((item, index) => ( - - onSelected(event, index)}> - - {item.content.slice(0, 50) + '......'} -
- - 更新于 {new Date(item.createTime).toLocaleString()} - - } /> - - - ))} - - + {(recordList === undefined || recordList.length === 0) ? : } } \ No newline at end of file