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",
}
},
mixins: {
drawer: {
width: 330,
},
dense: {
toolbar: {
height: 48, // 在 @mui/material/Toolbar/Toolbar.js 找到
},
},
},
});
function App() {

View File

@ -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
@ -103,14 +84,31 @@ const RecordPlayer = ({ loading, empty, playerBarWidth, currentTime, hasLyric, c
<CircularProgress color="inherit" />
</Backdrop>
} else {
return <div>
<PlayerBar width={playerBarWidth} currentTime={currentTime} lyric={currentLyric} />
<LyricItem empty={empty} hasLyric={hasLyric} currentLyric={currentLyric} currentTime={currentTime} />
</div>
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} />
{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 = () => {

View File

@ -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}>

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.userCell = userCell;
body.phoneCode = phoneCode;
body.smsTemplateId = 316; // 纽曼短信模板
return fetch("/rest/v2/phone/login", {
method: "POST",
body: constructParameter(body),

View File

@ -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,41 +34,45 @@ export default function ({ open, recordList, currentIndex }) {
dispatch(setCurrentIndex(index));
dispatch(fetchRecord(accessToken, index, recordList.at(index)));
}
return <Box sx={{ overflow: 'auto' }}>
<List>
{recordList === undefined ? <React.Fragment /> : recordList.map((item, index) => (
<ListItem key={index} disablePadding>
<ListItemButton selected={currentIndex === index} onClick={(event) => onSelected(event, index)}>
<ListItemText primary={item.editName} sx={{ color: currentIndex === index ? "#FF595A" : "#000000" }} secondary={
<React.Fragment>
<Typography component="span" variant="body1"
sx={{
overflowWrap: "anywhere"
}}
>{item.content.slice(0, 50) + '......'}</Typography>
<br />
<AccessTimeFilledIcon sx={{ fontSize: 12 }} />
<Typography component="span" variant="body2"> 更新于 {new Date(item.createTime).toLocaleString()}</Typography>
</React.Fragment>
} />
</ListItemButton>
</ListItem>
))}
</List>
</Box>
}
export default function ({ open, recordList, currentIndex }) {
return <Drawer
variant="persistent"
anchor="left"
open={open}
sx={{
width: drawerWidth,
width: (theme) => theme.mixins.drawer.width,
flexShrink: 0,
'& .MuiDrawer-paper': {
width: drawerWidth,
width: (theme) => theme.mixins.drawer.width,
boxSizing: 'border-box',
},
}}
>
<Toolbar variant="dense" />
<Box sx={{ overflow: 'auto' }}>
<List>
{recordList === undefined ? <React.Fragment /> : recordList.map((item, index) => (
<ListItem key={index} disablePadding>
<ListItemButton selected={currentIndex === index} onClick={(event) => onSelected(event, index)}>
<ListItemText primary={item.editName} sx={{ color: currentIndex === index ? "#FF595A" : "#000000" }} secondary={
<React.Fragment>
<Typography component="span" variant="body1"
sx={{
overflowWrap: "anywhere"
}}
>{item.content.slice(0, 50) + '......'}</Typography>
<br />
<AccessTimeFilledIcon sx={{ fontSize: 12 }} />
<Typography component="span" variant="body2"> 更新于 {new Date(item.createTime).toLocaleString()}</Typography>
</React.Fragment>
} />
</ListItemButton>
</ListItem>
))}
</List>
</Box>
{(recordList === undefined || recordList.length === 0) ? <EmptyList /> : <ListContent recordList={recordList} currentIndex={currentIndex} />}
</Drawer>
}