实现主界面定位。

src/App.js

@@ -1,15 +1,15 @@
 import './App.css';
-import { Routes,Route, Redirect } from 'react-router-dom'
+import { Routes, Route, Redirect } from 'react-router-dom'
 import LoginPage from './LoginPage';
 import MainPage from './MainPage';
 
 function App() {
   return (
     <div className="App">
-   <Routes>
-    <Route exact path="/login" element={<LoginPage/>} />
-    <Route exact path="/main" element={<MainPage/>} />
-   </Routes>
+      <Routes>
+        <Route exact path="/login" element={<LoginPage />} />
+        <Route exact path="/" element={<MainPage />} />
+      </Routes>
     </div>
   );
 }

src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/AppBar.js

@@ -14,7 +14,7 @@ import AdbIcon from '@mui/icons-material/Adb';
 
 const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
 
-export default function(){
+export default function () {
     const [anchorElUser, setAnchorElUser] = React.useState(null);
     const handleOpenUserMenu = (event) => {
         setAnchorElUser(event.currentTarget);
@@ -24,41 +24,41 @@ export default function(){
     };
 
 
-    return <AppBar sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }} position="fixed">
-    <Container maxWidth="xl">
-        <Toolbar disableGutters>
-            <AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
-            <Typography sx={{ flexGrow: 4 }}></Typography>
-            <Box sx={{ flexGrow: 1 }}>
-                <Tooltip title="Open settings">
-                    <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
-                        <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
-                    </IconButton>
-                </Tooltip>
-                <Menu
-                    sx={{ mt: '45px' }}
-                    id="menu-appbar"
-                    anchorEl={anchorElUser}
-                    anchorOrigin={{
-                        vertical: 'top',
-                        horizontal: 'right',
-                    }}
-                    keepMounted
-                    transformOrigin={{
-                        vertical: 'top',
-                        horizontal: 'right',
-                    }}
-                    open={Boolean(anchorElUser)}
-                    onClose={handleCloseUserMenu}
-                >
-                    {settings.map((setting) => (
-                        <MenuItem key={setting} onClick={handleCloseUserMenu}>
-                            <Typography textAlign="center">{setting}</Typography>
-                        </MenuItem>
-                    ))}
-                </Menu>
-            </Box>
-        </Toolbar>
-    </Container>
-</AppBar>
+    return <AppBar sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }} position="sticky">
+        <Container maxWidth="xl">
+            <Toolbar disableGutters>
+                <AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
+                <Typography sx={{ flexGrow: 4 }}></Typography>
+                <Box sx={{ flexGrow: 1 }}>
+                    <Tooltip title="Open settings">
+                        <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                            <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
+                        </IconButton>
+                    </Tooltip>
+                    <Menu
+                        sx={{ mt: '45px' }}
+                        id="menu-appbar"
+                        anchorEl={anchorElUser}
+                        anchorOrigin={{
+                            vertical: 'top',
+                            horizontal: 'right',
+                        }}
+                        keepMounted
+                        transformOrigin={{
+                            vertical: 'top',
+                            horizontal: 'right',
+                        }}
+                        open={Boolean(anchorElUser)}
+                        onClose={handleCloseUserMenu}
+                    >
+                        {settings.map((setting) => (
+                            <MenuItem key={setting} onClick={handleCloseUserMenu}>
+                                <Typography textAlign="center">{setting}</Typography>
+                            </MenuItem>
+                        ))}
+                    </Menu>
+                </Box>
+            </Toolbar>
+        </Container>
+    </AppBar>
 }

src/MainPage.js

@@ -1,9 +1,26 @@
 import AppBar from './AppBar';
 import RecordList from './RecordList';
+import PlayerBar from './PlayerBar';
+import styles from './MainPage.module.css';
+import { CssBaseline, Box, Container, Typography } from '@mui/material';
+import RecordLyrics from './RecordLyrics';
 
 export default function () {
     return <div>
+        <CssBaseline />
         <AppBar />
         <RecordList />
-    </div>
+        <Box
+            component="main"
+            sx={{
+                width: `calc(100% - 240px)`, ml: `240px`
+            }}
+        >
+            <Typography>2022-12-13 14:39_同传翻译</Typography>
+            <PlayerBar />
+            <RecordLyrics />
+        </Box>
+
+
+    </div >
 }

src/MainPage.module.css

@@ -0,0 +1,3 @@
+.title {
+    background-color: burlywood;
+}

src/PlayerBar.js

@@ -0,0 +1,25 @@
+import { Grid, MenuItem, Select, FormControl, InputLabel, Button } from "@mui/material"
+import styles from './PlayerBar.module.css';
+
+export default function () {
+    return <Grid container>
+        <Grid item lg={1}> <Button>播放</Button> </Grid>
+        <Grid item lg={10}> <div>进度条</div></Grid>
+        <Grid item lg={1}>
+            <FormControl fullWidth>
+                <InputLabel id="demo-simple-select-label">速度</InputLabel>
+                <Select
+                    labelId="demo-simple-select-label"
+                    id="demo-simple-select"
+                    label="速度"
+                >
+                    <MenuItem value={10}>0.5X</MenuItem>
+                    <MenuItem value={20}>1.0X</MenuItem>
+                    <MenuItem value={30}>1.25X</MenuItem>
+                    <MenuItem value={30}>1.5X</MenuItem>
+                    <MenuItem value={30}>2.0X</MenuItem>
+                </Select>
+            </FormControl>
+        </Grid>
+    </Grid>
+}

src/PlayerBar.module.css

@@ -0,0 +1,3 @@
+.playerBar {
+    display: flex;
+}

src/RecordList.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import Box from '@mui/material/Box';
 import Drawer from '@mui/material/Drawer';
 import List from '@mui/material/List';
@@ -6,12 +7,39 @@ import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import Toolbar from '@mui/material/Toolbar';
-
-import InboxIcon from '@mui/icons-material/MoveToInbox';
-import MailIcon from '@mui/icons-material/Mail';
+import { CssBaseline } from '@mui/material';
 
 const drawerWidth = 240;
 
+
+const recordList = [
+    {
+        title: "2022-12-14 14:39_同传翻译",
+        time: "2022-12-14 14:39",
+        content: "当面对重重困难，你感觉举步维艰的时候，回想你以前是如何坚持到底战胜困难的最后时刻的。这样，你就会发现你有能力克服每个障碍。"
+    },
+    {
+        title: "2022-12-14 14:39_同传翻译",
+        time: "2022-12-14 14:39",
+        content: "当面对重重困难，你感觉举步维艰的时候，回想你以前是如何坚持到底战胜困难的最后时刻的。这样，你就会发现你有能力克服每个障碍。"
+    },
+    {
+        title: "2022-12-14 14:39_同传翻译",
+        time: "2022-12-14 14:39",
+        content: "当面对重重困难，你感觉举步维艰的时候，回想你以前是如何坚持到底战胜困难的最后时刻的。这样，你就会发现你有能力克服每个障碍。"
+    },
+    {
+        title: "2022-12-14 14:39_同传翻译",
+        time: "2022-12-14 14:39",
+        content: "当面对重重困难，你感觉举步维艰的时候，回想你以前是如何坚持到底战胜困难的最后时刻的。这样，你就会发现你有能力克服每个障碍。"
+    },
+    {
+        title: "2022-12-14 14:39_同传翻译",
+        time: "2022-12-14 14:39",
+        content: "当面对重重困难，你感觉举步维艰的时候，回想你以前是如何坚持到底战胜困难的最后时刻的。这样，你就会发现你有能力克服每个障碍。"
+    },
+];
+
 export default function () {
     return <Drawer
         variant="permanent"
@@ -24,25 +52,15 @@ export default function () {
         <Toolbar />
         <Box sx={{ overflow: 'auto' }}>
             <List>
-                {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
-                    <ListItem key={text} disablePadding>
+                {recordList.map((item, index) => (
+                    <ListItem key={index} disablePadding>
                         <ListItemButton>
-                            <ListItemIcon>
-                                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-                            </ListItemIcon>
-                            <ListItemText primary={text} />
-                        </ListItemButton>
-                    </ListItem>
-                ))}
-            </List>
-            <List>
-                {['All mail', 'Trash', 'Spam'].map((text, index) => (
-                    <ListItem key={text} disablePadding>
-                        <ListItemButton>
-                            <ListItemIcon>
-                                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-                            </ListItemIcon>
-                            <ListItemText primary={text} />
+                            <ListItemText primary={item.title} secondary={
+                                <React.Fragment>
+                                    <div>{item.content}</div>
+                                    <div>更新于 {item.time}</div>
+                                </React.Fragment>
+                            } />
                         </ListItemButton>
                     </ListItem>
                 ))}

src/RecordLyrics.js

@@ -0,0 +1,66 @@
+import { Typography } from "@mui/material";
+import styles from './RecordLyrics.module.css';
+
+const lyrics = [
+    {
+        original: "当你身陷困境的时候（你有时会），回想你生命中快乐和幸福的时刻。回想它是如何使你快乐，你便有了走出困境的勇气。",
+        translation: "When times become difficult (and you know they sometimes will), remember a moment in your life that was filled with joy and happiness. Remember how it made you feel, and you will have the strength you need to get through any trial.",
+    },
+    {
+        original: "当面对重重困难，你感觉举步维艰的时候，回想你以前是如何坚持到底战胜困难的最后时刻的。这样，你就会发现你有能力克服每个障碍。",
+        translation: "When life throws you one more obstacle than you think you can handle, remember something you achieved through perseverance and by struggling to the end. In doing so, you'll find you have the ability to overcome each obstacle brought your way.",
+    },
+    {
+        original: "当你觉得精疲力尽的时候，暂时离开，让自己稍作休息。",
+        translation: "When you find yourself drained and depleted of energy, remember to find a place of sanctuary and rest.",
+    },
+    {
+        original: "当你身陷困境的时候（你有时会），回想你生命中快乐和幸福的时刻。回想它是如何使你快乐，你便有了走出困境的勇气。",
+        translation: "When times become difficult (and you know they sometimes will), remember a moment in your life that was filled with joy and happiness. Remember how it made you feel, and you will have the strength you need to get through any trial.",
+    },
+    {
+        original: "当面对重重困难，你感觉举步维艰的时候，回想你以前是如何坚持到底战胜困难的最后时刻的。这样，你就会发现你有能力克服每个障碍。",
+        translation: "When life throws you one more obstacle than you think you can handle, remember something you achieved through perseverance and by struggling to the end. In doing so, you'll find you have the ability to overcome each obstacle brought your way.",
+    },
+    {
+        original: "当你觉得精疲力尽的时候，暂时离开，让自己稍作休息。",
+        translation: "When you find yourself drained and depleted of energy, remember to find a place of sanctuary and rest.",
+    },
+
+    {
+        original: "当你身陷困境的时候（你有时会），回想你生命中快乐和幸福的时刻。回想它是如何使你快乐，你便有了走出困境的勇气。",
+        translation: "When times become difficult (and you know they sometimes will), remember a moment in your life that was filled with joy and happiness. Remember how it made you feel, and you will have the strength you need to get through any trial.",
+    },
+    {
+        original: "当面对重重困难，你感觉举步维艰的时候，回想你以前是如何坚持到底战胜困难的最后时刻的。这样，你就会发现你有能力克服每个障碍。",
+        translation: "When life throws you one more obstacle than you think you can handle, remember something you achieved through perseverance and by struggling to the end. In doing so, you'll find you have the ability to overcome each obstacle brought your way.",
+    },
+    {
+        original: "当你觉得精疲力尽的时候，暂时离开，让自己稍作休息。",
+        translation: "When you find yourself drained and depleted of energy, remember to find a place of sanctuary and rest.",
+    },
+    {
+        original: "当你身陷困境的时候（你有时会），回想你生命中快乐和幸福的时刻。回想它是如何使你快乐，你便有了走出困境的勇气。",
+        translation: "When times become difficult (and you know they sometimes will), remember a moment in your life that was filled with joy and happiness. Remember how it made you feel, and you will have the strength you need to get through any trial.",
+    },
+    {
+        original: "当面对重重困难，你感觉举步维艰的时候，回想你以前是如何坚持到底战胜困难的最后时刻的。这样，你就会发现你有能力克服每个障碍。",
+        translation: "When life throws you one more obstacle than you think you can handle, remember something you achieved through perseverance and by struggling to the end. In doing so, you'll find you have the ability to overcome each obstacle brought your way.",
+    },
+    {
+        original: "当你觉得精疲力尽的时候，暂时离开，让自己稍作休息。",
+        translation: "When you find yourself drained and depleted of energy, remember to find a place of sanctuary and rest.",
+    },
+];
+
+
+export default function () {
+    return <div className={styles.lyricsBrowser}>
+        {lyrics.map((lyric, index) => {
+            return <div className={styles.lyricItem}>
+                <Typography align="left">{lyric.original}</Typography>
+                <Typography align="left">{lyric.translation}</Typography>
+            </div>
+        })}
+    </div>
+}

src/RecordLyrics.module.css

@@ -0,0 +1,7 @@
+.lyricsBrowser {
+    padding-bottom: 40px;
+}
+
+.lyricItem {
+    padding-bottom: 40px;
+}