From 99d12b483db08b39e6376368988faad3f0aa5a08 Mon Sep 17 00:00:00 2001 From: luocai Date: Mon, 5 Jun 2023 14:16:28 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E4=B8=BB=E7=95=8C=E9=9D=A2?= =?UTF-8?q?=E5=AE=9A=E4=BD=8D=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 10 ++--- src/App.test.js | 8 ---- src/AppBar.js | 76 ++++++++++++++++++------------------- src/MainPage.js | 19 +++++++++- src/MainPage.module.css | 3 ++ src/PlayerBar.js | 25 ++++++++++++ src/PlayerBar.module.css | 3 ++ src/RecordList.js | 60 +++++++++++++++++++---------- src/RecordLyrics.js | 66 ++++++++++++++++++++++++++++++++ src/RecordLyrics.module.css | 7 ++++ 10 files changed, 204 insertions(+), 73 deletions(-) delete mode 100644 src/App.test.js create mode 100644 src/MainPage.module.css create mode 100644 src/PlayerBar.js create mode 100644 src/PlayerBar.module.css create mode 100644 src/RecordLyrics.js create mode 100644 src/RecordLyrics.module.css diff --git a/src/App.js b/src/App.js index b9221f3..74c9d55 100644 --- a/src/App.js +++ b/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 (
- - } /> - } /> - + + } /> + } /> +
); } diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/AppBar.js b/src/AppBar.js index a42948a..fb01792 100644 --- a/src/AppBar.js +++ b/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 theme.zIndex.drawer + 1 }} position="fixed"> - - - - - - - - - - - - {settings.map((setting) => ( - - {setting} - - ))} - - - - - + return theme.zIndex.drawer + 1 }} position="sticky"> + + + + + + + + + + + + {settings.map((setting) => ( + + {setting} + + ))} + + + + + } \ No newline at end of file diff --git a/src/MainPage.js b/src/MainPage.js index 9c3ff7c..1d88019 100644 --- a/src/MainPage.js +++ b/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
+ -
+ + 2022-12-13 14:39_同传翻译 + + + + + + } \ No newline at end of file diff --git a/src/MainPage.module.css b/src/MainPage.module.css new file mode 100644 index 0000000..b7bf5ff --- /dev/null +++ b/src/MainPage.module.css @@ -0,0 +1,3 @@ +.title { + background-color: burlywood; +} \ No newline at end of file diff --git a/src/PlayerBar.js b/src/PlayerBar.js new file mode 100644 index 0000000..8d6f5ce --- /dev/null +++ b/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 + +
进度条
 + + + 速度 + + + + +} \ No newline at end of file diff --git a/src/PlayerBar.module.css b/src/PlayerBar.module.css new file mode 100644 index 0000000..7efc280 --- /dev/null +++ b/src/PlayerBar.module.css @@ -0,0 +1,3 @@ +.playerBar { + display: flex; +} \ No newline at end of file diff --git a/src/RecordList.js b/src/RecordList.js index d1e3b76..d868552 100644 --- a/src/RecordList.js +++ b/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 - {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - + {recordList.map((item, index) => ( + - - {index % 2 === 0 ? : } - - - - - ))} - - - {['All mail', 'Trash', 'Spam'].map((text, index) => ( - - - - {index % 2 === 0 ? : } - - + +
{item.content}
+
更新于 {item.time}
+ + } /> ))} diff --git a/src/RecordLyrics.js b/src/RecordLyrics.js new file mode 100644 index 0000000..197a45e --- /dev/null +++ b/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
+ {lyrics.map((lyric, index) => { + return
+ {lyric.original} + {lyric.translation} +
+ })} +
+} \ No newline at end of file diff --git a/src/RecordLyrics.module.css b/src/RecordLyrics.module.css new file mode 100644 index 0000000..71c0761 --- /dev/null +++ b/src/RecordLyrics.module.css @@ -0,0 +1,7 @@ +.lyricsBrowser { + padding-bottom: 40px; +} + +.lyricItem { + padding-bottom: 40px; +} \ No newline at end of file