对接上获取歌词接口。

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,11 +1,44 @@
-import './App.css';
+import { useEffect } from 'react';
-import { Routes, Route, Navigate } from 'react-router-dom'
+import { Routes, Route, Navigate, useNavigate } from 'react-router-dom'
+import { useSelector, useDispatch } from 'react-redux'
+import { setUdid, setAccessToken, setUserInfo, setSelectInfo } from "./business/userSlice.js"
 import { useCookies } from 'react-cookie';
 import LoginPage from './LoginPage';
 import MainPage from './MainPage';
+import yzs from "./business/request.js";
 
 function App() {
-  const [cookies] = useCookies(['accessToken']);
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const [cookies, setCookie, removeCookie] = useCookies(['accessToken']);
+  const udid = useSelector(state => state.user.udid)
+
+  const getIp = async () => {
+    const response = await fetch("https://ipapi.co/json/")
+    const data = await response.json()
+    dispatch(setUdid(data.ip));
+  }
+
+  // Run `getIP` function above just once when the page is rendered
+  useEffect(() => {
+    getIp()
+  }, [])
+
+  if (cookies.accessToken) {
+    dispatch(setAccessToken(cookies.accessToken));
+    yzs.get_user_info(udid, cookies.accessToken).then(info => {
+      dispatch(setUserInfo(info));
+      yzs.user_select(udid, cookies.accessToken).then(info => {
+        dispatch(setSelectInfo(info));
+      });
+    }).catch(error => {
+      console.log(error)
+      if (error.returnCode === "uc_0106") {
+        removeCookie("accessToken");
+        navigate("/login");
+      }
+    });
+  }
   return (
     <div className="App">
       <Routes>

src/AppBar.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSelector, useDispatch } from 'react-redux'
 import AppBar from '@mui/material/AppBar';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
@@ -7,14 +8,18 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import IconButton from '@mui/material/IconButton';
 import Toolbar from '@mui/material/Toolbar';
-import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
-
+import logo from './assets/logo.png';
-import AdbIcon from '@mui/icons-material/Adb';
+import styles from './AppBar.module.css';
-
+import { Stack, CssBaseline } from '@mui/material';
-const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
+import { useCookies } from 'react-cookie';
+import { useNavigate } from "react-router-dom";
 
 export default function () {
+    const avatarUrl = useSelector(state => state.user.avatarUrl);
+    const nickName = useSelector(state => state.user.nickName);
+    const [cookies, setCookie, removeCookie] = useCookies(['accessToken']);
+    const navigate = useNavigate();
     const [anchorElUser, setAnchorElUser] = React.useState(null);
     const handleOpenUserMenu = (event) => {
         setAnchorElUser(event.currentTarget);
@@ -23,18 +28,29 @@ export default function () {
         setAnchorElUser(null);
     };
 
+    const onLogout = () => {
+        removeCookie("accessToken");
+        handleCloseUserMenu();
+        navigate("/login");
+    }
 
-    return <AppBar sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }} position="sticky">
+
-        <Container maxWidth="xl">
+    return <AppBar sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }} position="sticky" color='black'>
-            <Toolbar disableGutters>
+        <CssBaseline />
-                <AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
+        <Container maxWidth={false} >
-                <Typography sx={{ flexGrow: 4 }}></Typography>
+            <Toolbar disableGutters variant="dense">
-                <Box sx={{ flexGrow: 1 }}>
+                <Stack direction="row" sx={{ flexGrow: 1 }}>
-                    <Tooltip title="Open settings">
+                    <img className={styles.titleIcon} src={logo} />
-                        <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                    <Typography variant='h6' sx={{ color: "#FFFFFF" }}>纽曼AI语记</Typography>
-                            <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
+                </Stack>
-                        </IconButton>
+                <Box sx={{
-                    </Tooltip>
+                    display: "flex",
+                    alignItems: "center",
+                }} >
+                    <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                        <Avatar alt={nickName} src={avatarUrl} />
+                    </IconButton>
+                    <Typography sx={{ color: "#FFFFFF", paddingLeft: 2 }}>{nickName}</Typography>
                     <Menu
                         sx={{ mt: '45px' }}
                         id="menu-appbar"
@@ -51,11 +67,10 @@ export default function () {
                         open={Boolean(anchorElUser)}
                         onClose={handleCloseUserMenu}
                     >
-                        {settings.map((setting) => (
+                        <MenuItem onClick={onLogout}>
-                            <MenuItem key={setting} onClick={handleCloseUserMenu}>
+                            <Typography textAlign="center">退出</Typography>
-                                <Typography textAlign="center">{setting}</Typography>
+                        </MenuItem>
-                            </MenuItem>
+
-                        ))}
                     </Menu>
                 </Box>
             </Toolbar>

src/AppBar.module.css

@@ -0,0 +1,5 @@
+.titleIcon {
+    width: 28px;
+    height: 30px;
+    margin-right: 24px;
+}

src/LoginPage.js

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react';
+import { useNavigate } from "react-router-dom";
 import Button from '@mui/material/Button';
 import yzs from "./business/request.js";
 import styles from './LoginPage.module.css';
 import { useSelector, useDispatch } from 'react-redux'
 import { setUdid, setFlushToken, setAccessToken, setUserInfo } from "./business/userSlice.js"
-import { setList } from "./business/recorderSlice.js"
+import logo from './assets/logo.png';
-import logo from './assets/logo.png'; // Tell webpack this JS file uses this image
 import { Container, Tab, Box } from '@mui/material';
 import TabPanel from '@mui/lab/TabPanel';
 import { TabList } from '@mui/lab';
@@ -32,6 +32,7 @@ const theme = createTheme({
 });
 
 export default function () {
+    const navigate = useNavigate();
     const [cookies, setCookie] = useCookies(['accessToken']);
     const [value, setValue] = useState("1");
     const account = useSelector(state => state.user.account)
@@ -48,18 +49,6 @@ export default function () {
 
     const dispatch = useDispatch()
 
-    const getIp = async () => {
-        // Connect ipapi.co with fetch()
-        const response = await fetch("https://ipapi.co/json/")
-        const data = await response.json()
-        // Set the IP address to the constant `ip`
-        dispatch(setUdid(data.ip));
-    }
-
-    // Run `getIP` function above just once when the page is rendered
-    useEffect(() => {
-        getIp()
-    }, [])
 
 
     const debug_test = () => {
@@ -77,11 +66,8 @@ export default function () {
                 setCookie("accessToken", token)
                 yzs.get_user_info(udid, token).then(info => {
                     dispatch(setUserInfo(info));
-                    let passportId = info.passportId;
                     yzs.user_select(udid, token).then(info => {
-                        yzs.get_record_list(token, passportId).then(list => {
+                        navigate("/");
-                            dispatch(setList(list.result));
-                        });
                     })
 
                 });

src/MainPage.js

@@ -1,26 +1,60 @@
+import { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux'
 import AppBar from './AppBar';
 import RecordList from './RecordList';
 import PlayerBar from './PlayerBar';
 import styles from './MainPage.module.css';
+import yzs from "./business/request.js";
+import { setList } from "./business/recorderSlice.js"
 import { CssBaseline, Box, Container, Typography } from '@mui/material';
 import RecordLyrics from './RecordLyrics';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+const theme = createTheme({
+    status: {
+        danger: '#e53e3e',
+    },
+    palette: {
+        primary: {
+            main: '#FF595A',
+            darker: '#FF595A',
+        },
+        neutral: {
+            main: '#64748B',
+            contrastText: '#fff',
+        },
+        black: {
+            main: "#222222",
+        }
+    },
+});
+
+
 
 export default function () {
+    const dispatch = useDispatch()
+    const accessToken = useSelector(state => state.user.accessToken);
+    const passportId = useSelector(state => state.user.passportId);
+    useEffect(() => {
+        yzs.get_record_list(accessToken, passportId).then(list => {
+            dispatch(setList(list.result));
+        });
+    }, [accessToken, passportId]);
     return <div>
-        <CssBaseline />
+        <ThemeProvider theme={theme}>
-        <AppBar />
+            <CssBaseline />
-        <RecordList />
+            <AppBar />
-        <Box
+            <RecordList />
-            component="main"
+            <Box
-            sx={{
+                component="main"
-                width: `calc(100% - 240px)`, ml: `240px`
+                sx={{
-            }}
+                    width: `calc(100% - 240px)`, ml: `240px`
-        >
+                }}
-            <Typography>2022-12-13 14:39_同传翻译</Typography>
+            >
-            <PlayerBar />
+                <Typography>2022-12-13 14:39_同传翻译</Typography>
-            <RecordLyrics />
+                <PlayerBar />
-        </Box>
+                <RecordLyrics />
-
+            </Box>
-
+        </ThemeProvider>
     </div >
 }

src/RecordList.js

@@ -1,46 +1,32 @@
 import React from 'react';
+import { useSelector, useDispatch } from 'react-redux'
 import Box from '@mui/material/Box';
 import Drawer from '@mui/material/Drawer';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 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 { CssBaseline } from '@mui/material';
+import { setCurrentIndex, setCurrentLyric } from "./business/recorderSlice.js"
+import yzs from "./business/request.js";
 
 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 () {
+    const dispatch = useDispatch();
+    const accessToken = useSelector(state => state.user.accessToken);
+    const currentIndex = useSelector(state => state.recorder.currentIndex);
+    const recordList = useSelector(state => state.recorder.list);
+    const onSelected = (event, index) => {
+        console.log("onSelected", index, recordList.at(index).transResultUrl)
+        yzs.download(accessToken, recordList.at(index).transResultUrl).then(
+            blob => blob.text()
+        ).then(text => {
+            console.log(text);
+            dispatch(setCurrentLyric(JSON.parse(text)));
+        });
+        dispatch(setCurrentIndex(index));
+    }
     return <Drawer
         variant="permanent"
         sx={{
@@ -52,13 +38,13 @@ export default function () {
         <Toolbar />
         <Box sx={{ overflow: 'auto' }}>
             <List>
-                {recordList.map((item, index) => (
+                {recordList === undefined ? <React.Fragment /> : recordList.map((item, index) => (
                     <ListItem key={index} disablePadding>
-                        <ListItemButton>
+                        <ListItemButton selected={currentIndex === index} onClick={(event) => onSelected(event, index)}>
-                            <ListItemText primary={item.title} secondary={
+                            <ListItemText primary={item.editName} secondary={
                                 <React.Fragment>
-                                    <div>{item.content}</div>
+                                    <div>{item.content.slice(0, 50) + '......'}</div>
-                                    <div>更新于 {item.time}</div>
+                                    <div>更新于 {new Date(item.createTime).toLocaleString()}</div>
                                 </React.Fragment>
                             } />
                         </ListItemButton>

src/RecordLyrics.js

@@ -1,64 +1,16 @@
 import { Typography } from "@mui/material";
 import styles from './RecordLyrics.module.css';
+import { useSelector, useDispatch } from 'react-redux'
 
-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 () {
+    const currentLyric = useSelector(state => state.recorder.currentLyric);
+
     return <div className={styles.lyricsBrowser}>
-        {lyrics.map((lyric, index) => {
+        {currentLyric.map((lyric, index) => {
             return <div className={styles.lyricItem}>
-                <Typography align="left">{lyric.original}</Typography>
+                <Typography align="left">{lyric.text}</Typography>
                 <Typography align="left">{lyric.translation}</Typography>
             </div>
         })}

src/business/recorderSlice.js

@@ -1,18 +1,26 @@
 import { createSlice } from '@reduxjs/toolkit'
 
 export const recorderSlice = createSlice({
-    name: 'user',
+    name: 'recorder',
     initialState: {
         list: [],
+        currentIndex: 0,
+        currentLyric: [],
     },
     reducers: {
         setList: (state, action) => {
             state.list = action.payload;
+        },
+        setCurrentIndex: (state, action) => {
+            state.currentIndex = action.payload;
+        },
+        setCurrentLyric: (state, action) => {
+            state.currentLyric = action.payload;
         }
     }
 })
 
 // Action creators are generated for each case reducer function
-export const { setList } = recorderSlice.actions
+export const { setCurrentIndex, setList, setCurrentLyric } = recorderSlice.actions
 
 export default recorderSlice.reducer

src/business/request.js

@@ -1,3 +1,5 @@
+import { json } from 'react-router-dom';
+
 const appKey = "k5hfiei5eevouvjohkapjaudpk2gakpaxha22fiy";
 const appSecret = "e65ffb25148b08207088148d5bce114d";
 
@@ -83,9 +85,8 @@ const yzs = {
             },
         }).then(response => response.json()).then((json) => {
             console.log(json);
+            if (json.returnCode != "uc_0000") throw json;
             return json.result;
-        }).catch(error => {
-            console.log(error);
         });
     },
     user_select: function (ip, accessToken) {
@@ -104,12 +105,9 @@ const yzs = {
                 'timestamp': timestamp,
                 'signature': sig,
             },
-        }).then(response => {
+        }).then(response => response.json()).then((json) => {
-            console.log(response);
-            response.text()
-        }).then((json) => {
             console.log(json)
-            return json;
+            return json.result;
         });
     },
 
@@ -117,7 +115,7 @@ const yzs = {
         let sha256 = require('sha256');
         let timestamp = new Date().getTime();
         let sig = appKey + timestamp.toString() + appSecret;
-        sig = sha256(sig).toUpperCase();;
+        sig = sha256(sig).toUpperCase();
 
 
         let url = `/api/app/app-voice-recorder/rest/v1/trans/info/list?accessToken=${encodeURIComponent(accessToken)}&passportId=${passportId}`;
@@ -129,12 +127,33 @@ const yzs = {
                 'timestamp': timestamp,
                 'signature': sig,
             },
-        }).then(response => response.json()
+        }).then(response => response.json()).then((json) => {
-        ).then((json) => {
             console.log(json)
             return json;
         });
     },
+    download: function (accessToken, url) {
+        let sha256 = require('sha256');
+        let timestamp = new Date().getTime();
+        let sig = appKey + timestamp.toString() + appSecret;
+        sig = sha256(sig).toUpperCase();
+
+        let body = {
+            url: url,
+            accessToken: accessToken,
+        };
+
+        return fetch("/api/app/app-voice-recorder/rest/v1/trans/info/download", {
+            method: "POST",
+            headers: {
+                'appKey': appKey,
+                'timestamp': timestamp,
+                'signature': sig,
+                'Content-Type': 'application/json; charset=utf-8',
+            },
+            body: JSON.stringify(body),
+        }).then(response => response.blob());
+    },
 
     login: function (udid, account, password) {
         let md5 = require('md5');

src/business/userSlice.js

@@ -9,6 +9,8 @@ export const userSlice = createSlice({
         passportId: 0,
         createTime: "",
         userName: "",
+        nickName: "",
+        avatarUrl: "",
         agreeAgreement: true,
         account: "13682423271",
         password: "yzs123456",
@@ -19,19 +21,19 @@ export const userSlice = createSlice({
             state.udid = action.payload;
         },
         setFlushToken: (state, token) => {
-            // Redux Toolkit allows us to write "mutating" logic in reducers. It
-            // doesn't actually mutate the state because it uses the Immer library,
-            // which detects changes to a "draft state" and produces a brand new
-            // immutable state based off those changes
             state.flushToken = token.payload;
         },
         setAccessToken: (state, token) => {
             state.accessToken = token.payload;
         },
-        setUserInfo: (state, info) => {
+        setUserInfo: (state, action) => {
-            state.passportId = info.payload.passportId
+            state.passportId = action.payload.passportId
-            state.createTime = info.payload.createTime
+            state.createTime = action.payload.createTime
-            state.userName = info.payload.userName
+            state.userName = action.payload.userName
+        },
+        setSelectInfo: (state, action) => {
+            state.nickName = action.payload.nickName;
+            state.avatarUrl = action.payload.avatarUrl;
         },
         setAccount: (state, action) => {
             state.account = action.payload;
@@ -46,6 +48,6 @@ export const userSlice = createSlice({
 })
 
 // Action creators are generated for each case reducer function
-export const { setUdid, setFlushToken, setAccessToken, setUserInfo, setAccount, setPassword, setVerificationCode } = userSlice.actions
+export const { setUdid, setFlushToken, setAccessToken, setUserInfo, setSelectInfo, setAccount, setPassword, setVerificationCode } = userSlice.actions
 
 export default userSlice.reducer

src/setupProxy.js

@@ -24,4 +24,15 @@ module.exports = function (app) {
             },
         })
     );
+    app.use(
+        '/api/app/app-voice-recorder/rest/v1/trans/info/download',
+        createProxyMiddleware({
+            target: 'http://ai-api.uat.hivoice.cn',
+            changeOrigin: true,
+            logger: console,
+            onProxyReq: (proxyReq, req, res) => {
+                proxyReq.setHeader('appKey', 'k5hfiei5eevouvjohkapjaudpk2gakpaxha22fiy');
+            },
+        })
+    );
 };