1.修改空白页样式

This commit is contained in:
amass 2023-06-27 15:54:18 +08:00
parent 3e5ad994cd
commit f45f472e47
7 changed files with 88 additions and 61 deletions

View File

@ -25,6 +25,16 @@ const theme = createTheme({
main: "#222222", main: "#222222",
} }
}, },
mixins: {
drawer: {
width: 330,
},
dense: {
toolbar: {
height: 48, // 在 @mui/material/Toolbar/Toolbar.js 找到
},
},
},
}); });
function App() { function App() {

View File

@ -5,17 +5,18 @@ import RecordList from './components/RecordList';
import PlayerBar from './PlayerBar'; import PlayerBar from './PlayerBar';
import yzs from "./business/request.js"; import yzs from "./business/request.js";
import { setList, fetchRecord } from "./business/recorderSlice.js" import { setList, fetchRecord } from "./business/recorderSlice.js"
import { CssBaseline, Box, Typography } from '@mui/material';
import Backdrop from '@mui/material/Backdrop'; 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 CircularProgress from '@mui/material/CircularProgress';
import RecordLyrics from './RecordLyrics'; import RecordLyrics from './RecordLyrics';
import { styled } from '@mui/material/styles'; import { styled, useTheme } from '@mui/material/styles';
import expand from './assets/expand.png'; import expand from './assets/expand.png';
import close from './assets/close.png'; import close from './assets/close.png';
import empty_hint from './assets/empty_hint.png'; import empty_hint from './assets/empty_hint.png';
const drawerWidth = 240;
const lyricsBrowserStyle = { const lyricsBrowserStyle = {
marginTop: 16, marginTop: 16,
paddingBottom: 40, paddingBottom: 40,
@ -40,7 +41,7 @@ const ClickHanlde = styled('div', { shouldForwardProp: (prop) => prop !== 'open'
easing: theme.transitions.easing.easeOut, easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen, 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' })( const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
({ theme, open }) => ({ ({ theme, open }) => ({
backgroundColor: "#FAFAFA",
flex: 1, flex: 1,
paddingTop: 0, paddingTop: 0,
paddingLeft: theme.spacing(3), paddingLeft: theme.spacing(3),
paddingRight: theme.spacing(3), paddingRight: theme.spacing(3),
paddingBottom: theme.spacing(3), paddingBottom: theme.spacing(3),
marginTop: 48, marginTop: theme.mixins.dense.toolbar.height,
transition: theme.transitions.create('margin', { transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.sharp, easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen, duration: theme.transitions.duration.leavingScreen,
}), }),
marginLeft: `-${drawerWidth}px`, marginLeft: `-${theme.mixins.drawer.width}px`,
...(open && { ...(open && {
transition: theme.transitions.create('margin', { transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut, 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 }) => { const RecordPlayer = ({ loading, empty, playerBarWidth, currentTime, hasLyric, currentLyric }) => {
if (loading) { if (loading) {
return <Backdrop return <Backdrop
@ -102,15 +83,32 @@ const RecordPlayer = ({ loading, empty, playerBarWidth, currentTime, hasLyric, c
open > open >
<CircularProgress color="inherit" /> <CircularProgress color="inherit" />
</Backdrop> </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 { } else {
return <div> return <div>
<PlayerBar width={playerBarWidth} currentTime={currentTime} lyric={currentLyric} /> <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> </div>
} }
}
}; };
export default function () { export default function () {
const theme = useTheme();
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);
@ -144,12 +142,12 @@ export default function () {
const onClick = () => { const onClick = () => {
setOpen(!open); setOpen(!open);
setPlayerBarWidth(document.documentElement.clientWidth - 240 - 48); // 防止中途底部出现scrollbar setPlayerBarWidth(document.documentElement.clientWidth - theme.mixins.drawer.width - 48); // 防止中途底部出现scrollbar
} }
const handleResize = () => { const handleResize = () => {
// let scrollBarWidth = window.innerWidth - document.documentElement.clientWidth; // 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 = () => { const onTransitionEnd = () => {

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/assets/empty_list.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

View File

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

View File

@ -10,10 +10,23 @@ import Typography from '@mui/material/Typography';
import Toolbar from '@mui/material/Toolbar'; import Toolbar from '@mui/material/Toolbar';
import { setCurrentIndex, fetchRecord } from "../business/recorderSlice.js" import { setCurrentIndex, fetchRecord } from "../business/recorderSlice.js"
import AccessTimeFilledIcon from '@mui/icons-material/AccessTimeFilled'; 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 dispatch = useDispatch();
const accessToken = useSelector(state => state.user.accessToken); const accessToken = useSelector(state => state.user.accessToken);
const onSelected = (event, index) => { const onSelected = (event, index) => {
@ -21,21 +34,7 @@ export default function ({ open, recordList, currentIndex }) {
dispatch(setCurrentIndex(index)); dispatch(setCurrentIndex(index));
dispatch(fetchRecord(accessToken, index, recordList.at(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> <List>
{recordList === undefined ? <React.Fragment /> : recordList.map((item, index) => ( {recordList === undefined ? <React.Fragment /> : recordList.map((item, index) => (
<ListItem key={index} disablePadding> <ListItem key={index} disablePadding>
@ -57,5 +56,23 @@ export default function ({ open, recordList, currentIndex }) {
))} ))}
</List> </List>
</Box> </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> </Drawer>
} }