this.com = com} {...this.props} />;
38 | return (
39 | dom
40 | )
41 | }
42 | }
43 | return connect(mapStateToProps, mapDispatchToProps)(Alive)
44 | }
45 |
46 | export default KeepAlive;
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/components/Comment/Comment.jsx:
--------------------------------------------------------------------------------
1 | import { Link } from 'react-router-dom';
2 | import { LazyLoadImage } from 'react-lazy-load-image-component';
3 | import { Pagination, message } from 'antd';
4 | import { useState, useCallback } from 'react';
5 |
6 | function timeFormat(timeStamp) {
7 | const time = new Date(timeStamp);
8 | return time.getFullYear() + '年'
9 | + (time.getMonth() + 1) + '月'
10 | + time.getDate() + '日';
11 | }
12 |
13 | const Comment = (props) => {
14 | const { user, content, time, likedCount, beReplied } = props;
15 |
16 | return (
17 |
18 |
19 |
20 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | { user.nickname }
33 | ：{ content }
34 |
35 |
36 | {
37 | beReplied.length ?
38 |
39 | { beReplied[0].user.nickname }
40 | ：{ beReplied[0].content }
41 |
: null
42 | }
43 |
44 |
{ timeFormat(time) }
45 |
46 |
47 | ({ likedCount })
48 |
49 |
50 |
51 |
74 |
75 |
76 |
77 |
78 | 评论
79 |
80 |
81 | 共{ total }条评论
82 |
83 |
84 |
85 | {
86 | hotCmts.length > 0 ?
87 | <>
88 |
89 | 精彩评论
90 |
91 | {
92 | hotCmts.map(cmt => {
93 | return (
94 |
95 | )
96 | })
97 | }
98 |
99 | : null
100 | }
101 |
102 |
103 | {
104 | cmts.length > 0 ?
105 | <>
106 |
107 | 最新评论
108 |
109 | {
110 | cmts.map(cmt => {
111 | return (
112 |
113 | )
114 | })
115 | }
116 |
117 | : null
118 | }
119 |
120 | {
121 | cmts.length > 0 ?
122 |
: null
132 | }
133 |
134 |
135 |
12 |
13 |
14 |
15 |
16 | 播放
17 |
18 |
19 |
20 |
21 | 收藏
22 |
23 |
24 | 分享 { shareCount }
25 |
26 |
27 | 下载
28 |
29 |
30 | 评论 { commentCount }
31 |
32 |
33 |
10 |
{ title }
11 |
12 | {
13 | subs.map((item, i) => {
14 | return (
15 |
16 |
17 | { item.txt }
18 |
19 | {i < subs.length-1 ? | : null}
20 |
21 | )
22 | })
23 | }
24 |
25 |
7 |
8 |
9 |
10 | props.playFn(props.id)} className="icon-play f-fr">
11 |
12 | {props.playCount}
13 |
14 |
16 | {props.name}
17 |
18 | {props.children}
19 |
20 | )
21 | }
22 |
23 | export default CoverItem;
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/components/Footer/Footer.jsx:
--------------------------------------------------------------------------------
1 | import './index.scss';
2 | import { Fragment } from 'react';
3 |
4 | const links = ['服务条款', '隐私政策', '儿童隐私政策', '版权投诉指引', '意见反馈'];
5 | const copys = [
6 | {
7 | href: 'https://web-amped.music.163.com/',
8 | name: 'amped'
9 | },
10 | {
11 | href: 'https://music.163.com/st/userbasic#/auth',
12 | name: 'auth'
13 | },
14 | {
15 | href: 'https://music.163.com/musician/artist',
16 | name: 'musician'
17 | },
18 | {
19 | href: 'https://music.163.com/web/reward',
20 | name: 'reward'
21 | },
22 | {
23 | href: 'https://music.163.com/uservideo#/plan',
24 | name: 'cash'
25 | }
26 | ]
27 |
28 | const CopyItem = (props) => {
29 | const {name, href} = props;
30 | return (
31 |
32 |
33 |
34 |
35 | )
36 | }
37 |
38 | const Footer = () => {
39 | return (
40 |
41 |
42 |
43 |
80 |
81 | {
82 | copys.map(copy => {
83 | return (
84 |
85 | )
86 | })
87 | }
88 |
89 |
90 |
91 |
4 | {props.children}
5 |
6 | )
7 | }
8 |
9 | export default Main;
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import { Provider } from 'react-redux';
5 | import store from "./store";
6 | import 'antd/dist/antd.css';
7 | import '@assets/style/style.scss';
8 |
9 | const style = {
10 | height: 40,
11 | width: 40,
12 | lineHeight: '40px',
13 | borderRadius: 4,
14 | backgroundColor: '#1088e9',
15 | color: '#fff',
16 | textAlign: 'center',
17 | fontSize: 14,
18 | };
19 |
20 | ReactDOM.render(
21 |
22 |
23 |
24 |
25 | ,
26 | document.getElementById('root')
27 | );
28 |
29 |
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = onPerfEntry => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
7 | getLCP(onPerfEntry);
8 | getTTFB(onPerfEntry);
9 | });
10 | }
11 | };
12 |
13 | export default reportWebVitals;
14 |
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/router/generateRoute.js:
--------------------------------------------------------------------------------
1 | import { HashRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
2 | import { createRef } from 'react';
3 | export const routerRef = createRef();
4 |
5 | export const generateFn = (route, basePath="") => {
6 | return (
7 |
8 |
9 | {
10 | route.map(parentRoute => {
11 | let realPath = '', redirectPath = '';
12 | if (parentRoute.path.startsWith('/')) {
13 | realPath = parentRoute.path;
14 | } else {
15 | realPath = basePath + '/' + parentRoute.path;
16 | }
17 | if (parentRoute.redirect) {
18 | if (parentRoute.redirect.startsWith('/')) {
19 | redirectPath = parentRoute.redirect;
20 | } else {
21 | redirectPath = basePath + '/' + parentRoute.redirect;
22 | }
23 | }
24 | if (parentRoute.children) {
25 | return (
26 |
30 |
31 | {
32 | generateFn(parentRoute.children, parentRoute.path)
33 | }
34 |
35 |
36 | )
37 | } else {
38 | if (parentRoute.redirect) {
39 | return (
40 |
41 |
42 |
43 | )
44 | } else {
45 | return (
46 |
52 | )
53 | }
54 | }
55 | })
56 | }
57 |
58 |
59 | )
60 | }
61 |
62 |
63 | export default generateFn;
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/router/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | 路由配置
3 | */
4 |
5 | import { HashRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
6 | import AsyncComponent from '@/components/AsyncComponent';
7 | import generateFn from './generateRoute';
8 | import routerTable from './routerTable';
9 |
10 | const Home = AsyncComponent(() => import('@/views/Home/Home'));
11 | const Personal = AsyncComponent(() => import('@/views/Personal/Personal'));
12 |
13 |
14 | const routes = () => (
15 |
16 |
17 |
18 |
19 |
20 | {/* }>
21 | */}
22 |
23 |
24 | {
25 |
26 | }
27 |
28 |
29 |
30 |
31 |
32 | )
33 | const routes2 = generateFn(routerTable)
34 | // console.log(generateFn(routerTable))
35 | export default routes2;
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/router/modules/friend.js:
--------------------------------------------------------------------------------
1 | import AsyncComponent from '@/components/AsyncComponent';
2 | const Friend = AsyncComponent(() => import('@/views/Friend/Friend'));
3 |
4 | export default [
5 | {
6 | path: '/friend',
7 | component: Friend,
8 | name: 'Friend',
9 | },
10 | ]
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/router/modules/home.js:
--------------------------------------------------------------------------------
1 | import AsyncComponent from '@/components/AsyncComponent';
2 | const Home = AsyncComponent(() => import('@/views/Home/Home'));
3 |
4 | const TopList = AsyncComponent(() => import('@/views/Toplist/TopList'));
5 | const TopDetails = AsyncComponent(() => import('@/views/Toplist/Details'));
6 | const SingerList = AsyncComponent(() => import('@/views/Singer/SingerList'));
7 | const SingerCates = AsyncComponent(() => import('@/views/Singer/SingerCates'));
8 | const SingerMoreCates = AsyncComponent(() => import('@/views/Singer/SingerMoreCates'));
9 | const PlayList = AsyncComponent(() => import('@/views/Home/PlayList/PlayList'));
10 | const Disk = AsyncComponent(() => import('@/views/Disk/Disk'));
11 | const Radio = AsyncComponent(() => import('@/views/Radio/Radio'));
12 | const RadioCate = AsyncComponent(() => import('@/views/Radio/RadioCate'));
13 | const RadioDetails = AsyncComponent(() => import('@/views/Radio/RadioDetails'));
14 |
15 | export default [
16 | {
17 | path: '/',
18 | redirect: '/home',
19 | name: 'Home'
20 | },
21 | {
22 | path: '/home',
23 | component: Home,
24 | name: 'Home',
25 | },
26 | {
27 | path: '/home/toplist',
28 | component: TopList,
29 | name: 'TopList',
30 | children: [
31 | {
32 | path: ':id',
33 | component: TopDetails,
34 | name: 'TopDetails',
35 | }
36 | ]
37 | },
38 | {
39 | path: '/home/singer',
40 | component: SingerList,
41 | name: 'SingerList',
42 | children: [
43 | {
44 | path: 'cate/:path',
45 | component: SingerCates,
46 | name: 'SingerCates'
47 | },
48 | {
49 | path: 'cate/:area/:type',
50 | component: SingerMoreCates,
51 | name: 'SingerMoreCates'
52 | }
53 | ]
54 | },
55 | {
56 | path: '/home/playlist',
57 | component: PlayList,
58 | name: 'PlayList'
59 | },
60 | {
61 | path: '/home/disk',
62 | component: Disk,
63 | name: 'Disk'
64 | },
65 | {
66 | path: '/home/djradio',
67 | component: Radio,
68 | name: 'Radio'
69 | },
70 | {
71 | path: '/home/djradio/cate',
72 | component: RadioCate,
73 | name: 'RadioCate'
74 | },
75 | {
76 | path: '/home/djradio/details/:id',
77 | component: RadioDetails,
78 | name: 'RadioDetails'
79 | }
80 | ]
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/router/modules/my.js:
--------------------------------------------------------------------------------
1 | import AsyncComponent from '@/components/AsyncComponent';
2 | const Login = AsyncComponent(() => import('@/views/My/Login'));
3 | const MainPage = AsyncComponent(() => import('@/views/My/MainPage'));
4 | const MyMusic = AsyncComponent(() => import(('@/views/My/Music')));
5 | const MyArtist = AsyncComponent(() => import('@/views/My/MyArtist'));
6 | const MyMv = AsyncComponent(() => import('@/views/My/MV'));
7 | const MyDj = AsyncComponent(() => import('@/views/My/Dj'));
8 | const MyPlayList = AsyncComponent(() => import('@/views/My/PlayList'));
9 |
10 | export default [
11 | {
12 | path: '/my',
13 | redirect: '/my/music',
14 | name: 'MyProfile'
15 | },
16 | {
17 | path: '/my/login',
18 | component: Login,
19 | name: 'Login'
20 | },
21 | {
22 | path: '/user/main',
23 | component: MainPage,
24 | name: 'MyProfile'
25 | },
26 | {
27 | path: '/my/music',
28 | component: MyMusic,
29 | name: 'MyMusic',
30 | children: [
31 | {
32 | path: 'artist',
33 | component: MyArtist,
34 | name: 'MyArtist',
35 | },
36 | {
37 | path: 'mv',
38 | component: MyMv,
39 | name: 'MyMv',
40 | },
41 | {
42 | path: 'dj',
43 | component: MyDj,
44 | name: 'MyDj',
45 | },
46 | {
47 | path: 'playlist/:id',
48 | component: MyPlayList,
49 | name: 'MyPlayList',
50 | },
51 | ]
52 | }
53 | ]
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/router/modules/search.js:
--------------------------------------------------------------------------------
1 | import AsyncComponent from '@/components/AsyncComponent';
2 | const Search = AsyncComponent(() => import('@/views/Search/Search'));
3 |
4 | export default [
5 | {
6 | path: '/search/:kw',
7 | component: Search,
8 | name: 'Search'
9 | },
10 | ]
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/router/modules/singer.js:
--------------------------------------------------------------------------------
1 | import AsyncComponent from '@/components/AsyncComponent';
2 | const Singer = AsyncComponent(() => import('@/views/Singer/Singer'));
3 | const SingerSong = AsyncComponent(() => import('@/views/Singer/Song'));
4 | const SingerIntroduce = AsyncComponent(() => import('@/views/Singer/Introduce'));
5 | const SingerAlbum = AsyncComponent(() => import('@/views/Singer/Album'));
6 | const SingerMV = AsyncComponent(() => import('@/views/Singer/MV'));
7 |
8 | export default [
9 | {
10 | path: '/singer/:id',
11 | component: Singer,
12 | name: 'Singer',
13 | children: [
14 | {
15 | path: 'song',
16 | component: SingerSong,
17 | name: 'SingerSong',
18 | },
19 | {
20 | path: 'introduce',
21 | component: SingerIntroduce,
22 | name: 'SingerIntroduce',
23 | },
24 | {
25 | path: 'album',
26 | component: SingerAlbum,
27 | name: 'SingerAlbum'
28 | },
29 | {
30 | path: 'mv',
31 | component: SingerMV,
32 | name: 'SingerMV'
33 | }
34 | ]
35 | },
36 | ]
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/router/routerTable.js:
--------------------------------------------------------------------------------
1 | import { lazy, Suspense } from 'react';
2 | import AsyncComponent from '@/components/AsyncComponent';
3 | import homeRouter from './modules/home';
4 | import searchRouter from './modules/search';
5 | import singerRouter from './modules/singer';
6 | import myRouter from './modules/my';
7 | import friendRouter from './modules/friend';
8 |
9 | const Personal = AsyncComponent(() => import('@/views/Personal/Personal'));
10 | const Song = AsyncComponent(() => import('@/views/Song/Song'));
11 | const Video = AsyncComponent(() => import('@/views/Video/Video'));
12 | const Album = AsyncComponent(() => import('@/views/Album/Album'));
13 | const PlayList = AsyncComponent(() => import('@/views/Album/PlayList'));
14 |
15 |
16 |
17 | const routes = [
18 | ...homeRouter,
19 | ...searchRouter,
20 | ...singerRouter,
21 | ...myRouter,
22 | ...friendRouter,
23 | {
24 | path: '/song/:id',
25 | component: Song,
26 | name: 'Song'
27 | },
28 | {
29 | path: '/video/:id',
30 | component: Video,
31 | name: 'Video'
32 | },
33 | {
34 | path: '/album/:id',
35 | component: Album,
36 | name: 'Album'
37 | },
38 | {
39 | path: '/playlist/:id',
40 | component: PlayList,
41 | name: 'PlayList'
42 | },
43 |
44 | ]
45 |
46 | export default routes;
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/store/action-type.js:
--------------------------------------------------------------------------------
1 | export const SET_CURSONG = 'setCurSong';
2 | export const SET_USERINFO = 'setUserInfo';
3 | export const SET_HISTORY = 'setHistory';
4 | export const GET_SONGINFO = 'getSongInfo';
5 | export const SET_LOCK = 'setLock';
6 | export const SET_LOADING = 'playbarLoading';
7 | export const SET_SUB_NAV = 'setSubNav';
8 | export const SET_SEARCH_TAB = 'setSearchTab';
9 | export const SET_SEARCH_PAGE = 'setSearchPage';
10 | export const SET_SHOWLRC = 'setShowLrc';
11 | export const SET_SHOW_PLAYBAR = 'setShowPlaybar';
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/store/action.js:
--------------------------------------------------------------------------------
1 | import { SET_CURSONG,
2 | SET_USERINFO,
3 | SET_HISTORY,
4 | SET_LOCK,
5 | SET_LOADING,
6 | SET_SUB_NAV,
7 | SET_SEARCH_TAB,
8 | SET_SEARCH_PAGE } from "./action-type";
9 | import commonRequest from '@/api/common';
10 | import { mediaTimeFormat, artistsFormat } from '@/utils/utils';
11 | import store from './index'
12 |
13 | async function getSongById(defaultId) { //根据id获取歌曲信息
14 | const id = defaultId;
15 | const url = await commonRequest.getSongUrl(id);
16 | const lyc = await commonRequest.getLyric(id);
17 | const details = await commonRequest.getSongDetails(id);
18 | return { id, details, lyc, url };
19 | }
20 |
21 | export const setCurSong = (song) => {
22 | return {
23 | type: SET_CURSONG,
24 | song,
25 | }
26 | }
27 |
28 | export const setHistory = (history) => {
29 | return {
30 | type: SET_HISTORY,
31 | history,
32 | }
33 | }
34 |
35 | export const setUserInfo = (userInfo) => {
36 | return {
37 | type: SET_USERINFO,
38 | userInfo
39 | }
40 | }
41 |
42 | export const setLoadingPlaybar = (loading) => {
43 | return {
44 | type: SET_LOADING,
45 | loading,
46 | }
47 | }
48 |
49 | export const getSongInfo = (id) => {
50 | return async (dispatch, getState) => {
51 | dispatch(setLoadingPlaybar(true));
52 | const res = await getSongById(id);
53 | const { lyc, url, details } = res;
54 | dispatch(setLoadingPlaybar(false));
55 | const dispatchRes = dispatch(setCurSong({
56 | url,
57 | name: details.name,
58 | singer: artistsFormat(details.ar),
59 | singerId: details.ar[0].id,
60 | lyc: lyc,
61 | id,
62 | alblum: details.al,
63 | duration: mediaTimeFormat(details.dt / 1000),
64 | mv: details.mv
65 | }))
66 | return dispatchRes;
67 | }
68 | }
69 |
70 | export const setLock = (lock) => {
71 | return {
72 | type: SET_LOCK,
73 | lock
74 | }
75 | }
76 |
77 | export const setSubNav = (show) => {
78 | return {
79 | type: SET_SUB_NAV,
80 | show
81 | }
82 | }
83 |
84 | export const setSearchTab = (tab) => {
85 | return {
86 | type: SET_SEARCH_TAB,
87 | tab
88 | }
89 | }
90 |
91 | export const setSearchPage = (page) => {
92 | return {
93 | type: SET_SEARCH_PAGE,
94 | page
95 | }
96 | }
97 |
98 |
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/store/global-data.js:
--------------------------------------------------------------------------------
1 | import { SET_CURSONG,
2 | SET_HISTORY,
3 | SET_SHOWLRC,
4 | SET_LOCK,
5 | SET_LOADING,
6 | SET_SUB_NAV,
7 | SET_SEARCH_TAB,
8 | SET_SEARCH_PAGE,
9 | SET_SHOW_PLAYBAR } from "./action-type";
10 | import sessionStore from '@/utils/sessionStore';
11 |
12 | let initialData = {
13 | curSong: sessionStore.get('globalData').curSong || null, //当前歌曲
14 | keep: ['Home'],
15 | historyPlay: sessionStore.get('globalData').historyPlay || [], //历史播放记录
16 | lock: sessionStore.get('globalData').lock ?? true, //是否锁定播放栏
17 | showPlaybar: sessionStore.get('globalData').showPlaybar ?? true, //是否展示播放条
18 | loading: false, //歌曲加载状态
19 | showSubNav: true, //是否展示二级导航条
20 | searchTab: '1', //搜素类型默认为1
21 | searchPage: 1, //搜素页数默认为1
22 | showLrc: sessionStore.get('globalData').showLrc ?? false, //展示歌词面板
23 | }
24 |
25 | const globalReducer = (state = initialData, action) => {
26 | switch (action.type) {
27 | case SET_CURSONG:
28 | sessionStore.set('globalData', {
29 | ...state,
30 | curSong: action.song
31 | })
32 | return {
33 | ...state,
34 | curSong: action.song
35 | }
36 | case 'setKeep':
37 | let keeps = new Set(state.keep);
38 | keeps.add(action.name);
39 | /* sessionStore.set('globalData', {
40 | ...state,
41 | keep: [...keeps]
42 | }) */
43 | return {
44 | ...state,
45 | keep: [...keeps]
46 | }
47 | case SET_HISTORY:
48 | /*
49 | 此处踩坑😂,redux是对地址的比较
50 | 如果地址没变，即使值变了，UI也不会更新
51 | */
52 | sessionStore.set('globalData', {
53 | ...state,
54 | historyPlay: action.history
55 | })
56 | return {
57 | ...state,
58 | historyPlay: action.history
59 | }
60 | case SET_LOCK:
61 | sessionStore.set('globalData', {
62 | ...state,
63 | lock: action.lock
64 | })
65 | return {
66 | ...state,
67 | lock: action.lock
68 | }
69 | case SET_LOADING:
70 | return {
71 | ...state,
72 | loading: action.loading
73 | }
74 | case SET_SUB_NAV:
75 | return {
76 | ...state,
77 | showSubNav: action.show
78 | }
79 | case SET_SEARCH_TAB:
80 | return {
81 | ...state,
82 | searchTab: action.tab
83 | }
84 | case SET_SEARCH_PAGE:
85 | return {
86 | ...state,
87 | searchPage: action.page
88 | }
89 | case SET_SHOW_PLAYBAR:
90 | sessionStore.set('globalData', {
91 | ...state,
92 | showPlaybar: action.show
93 | })
94 | return {
95 | ...state,
96 | showPlaybar: action.show
97 | }
98 | case SET_SHOWLRC:
99 | sessionStore.set('globalData', {
100 | ...state,
101 | showLrc: action.show
102 | })
103 | return {
104 | ...state,
105 | showLrc: action.show
106 | }
107 | default:
108 | return state;
109 | }
110 | }
111 |
112 | export default globalReducer;
113 |
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/store/index.js:
--------------------------------------------------------------------------------
1 | import { createStore, combineReducers, applyMiddleware } from 'redux';
2 | import thunk from 'redux-thunk';
3 | import globalReducer from './global-data';
4 | import userReducer from '@/views/My/store';
5 | import homeReducer from '@/views/Home/store';
6 | import radioReducer from '@/views/Radio/store';
7 |
8 | const reducers = combineReducers({
9 | globalData: globalReducer,
10 | user: userReducer,
11 | homeData: homeReducer,
12 | radioData: radioReducer
13 | })
14 |
15 | const store = createStore(reducers, applyMiddleware(thunk));
16 |
17 | export default store;
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/store/user.js:
--------------------------------------------------------------------------------
1 | import { SET_USERINFO } from "./action-type";
2 |
3 | const initialData = {
4 | userInfo: {
5 | name: 'Jacky',
6 | age: 25,
7 | city: 'ChengDu'
8 | }
9 | }
10 |
11 | const userReducer = (state = initialData, action) => {
12 | switch (action.type) {
13 | case SET_USERINFO:
14 | return {
15 | ...state,
16 | userInfo: action.userInfo
17 | }
18 | default:
19 | return state;
20 | }
21 | }
22 |
23 | export default userReducer;
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/utils/eventBus.js:
--------------------------------------------------------------------------------
1 | class EventBus {
2 |
3 | listenObj = {}
4 |
5 | on(eventName, callback) {
6 | if (this.listenObj[eventName] === undefined) {
7 | this.listenObj[eventName] = [];
8 | }
9 | this.listenObj[eventName].push(callback);
10 | }
11 |
12 | emit(eventName, paramLists) {
13 | if (this.listenObj[eventName]) {
14 | this.listenObj[eventName].forEach(function(cb) {
15 | cb(paramLists);
16 | })
17 | }
18 | }
19 |
20 | off(eventName, callback) {
21 | if (this.listenObj[eventName]) {
22 | let idx = this.listenObj[eventName].findIndex(item => item === callback);
23 | this.listenObj[eventName].splice(idx, 1);
24 | }
25 | }
26 |
27 | once(eventName, callback) {
28 | const cb = (...arg) => {
29 | callback([...arg]);
30 | this.off(eventName, callback);
31 | }
32 | this.on(eventName, cb);
33 | }
34 | }
35 |
36 |
37 | export default new EventBus();
38 |
39 |
40 | /*
41 | eBus.on('xxx', (parmas) => {
42 |
43 | })
44 |
45 | eBus.emit('xxx', [1,2,3])
46 | */
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/utils/hooks.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | export const usePage = () => { //分页相关
4 | const [pageInfo, setPageInfo] = useState({
5 | total: 0,
6 | curPage: 1,
7 | });
8 |
9 | const [total, setTotal] = useState(0);
10 | const [curPage, setCurPage] = useState(1);
11 |
12 | return {total, setTotal, curPage, setCurPage};
13 | }
14 |
15 | export const useLoading = () => {
16 | const [loading, setLoading] = useState(true);
17 |
18 | const toggleLoad = (flag = true, timeout) => {
19 | if (typeof timeout === 'number') {
20 | setTimeout(setLoading(flag), timeout);
21 | } else {
22 | setLoading(flag);
23 | }
24 | }
25 |
26 | return { loading, toggleLoad }
27 | }
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/utils/localStore.js:
--------------------------------------------------------------------------------
1 | const localStore = {
2 | get(key) {
3 | try{
4 | let res = localStorage.getItem(key);
5 | if(res == null) {
6 | return {};
7 | }else {
8 | res = JSON.parse(res);
9 | return res;
10 | }
11 | }catch(e) {
12 | return {};
13 | }
14 | },
15 | set(key, val) {
16 | localStorage.setItem(key, JSON.stringify(val));
17 | },
18 | remove(key) {
19 | localStorage.removeItem(key);
20 | },
21 | clear() {
22 | localStorage.clear();
23 | }
24 | }
25 |
26 | export default localStore;
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/utils/methods/login.js:
--------------------------------------------------------------------------------
1 | import { render, unmountComponentAtNode } from 'react-dom';
2 |
3 | import { LoginModalCom } from '@/components/Login/LoginForm';
4 | import { createRef } from 'react';
5 | import store from '@/store';
6 | import loginApi from '@/api/login';
7 | import localStore from '@/utils/localStore';
8 | import { aesEncrypt } from '@/utils/pureFunctions';
9 |
10 | const isDev = process.env.NODE_ENV === 'development';
11 |
12 | function createModal() {
13 | if (instance) return;
14 | instance = document.createElement('div');
15 | render(, instance);
16 | document.body.appendChild(instance);
17 | }
18 |
19 | let instance,
20 | loginRef = createRef(); //实例
21 |
22 | export default {
23 | openLogin(jump = true) {
24 | // 1.查看是否已经创建了login实例
25 | createModal();
26 | // 2.调用实例show方法
27 | loginRef.current.show(true);
28 | loginRef.current.setJump(jump);
29 | },
30 | killLogin() {
31 | instance && unmountComponentAtNode(instance);
32 | loginRef = null;
33 | },
34 | logout(jump) {
35 | loginApi.logout().then(res => {
36 | if (!res) return;
37 | store.dispatch({type: 'setUserInfo', userInfo: {}});
38 | localStore.clear();
39 | jump && jump();
40 | })
41 | },
42 | login({phone, password}) {
43 | if (!isDev) {
44 | phone = aesEncrypt(phone);
45 | password = aesEncrypt(password);
46 | }
47 | return loginApi.login(phone, password).then(res => {
48 | if (res.error) return;
49 | // 登录成功后写入store里面
50 | store.dispatch({type: 'setUserInfo', userInfo: res});
51 | })
52 | }
53 | }
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/utils/pureFunctions.js:
--------------------------------------------------------------------------------
1 | import { areaList } from '@vant/area-data';
2 | import * as crypto from 'crypto';
3 | import { message, Modal } from 'antd';
4 | import sessionStore from './sessionStore';
5 |
6 | var key = '@(5h)-$3_if(*%#';
7 |
8 | export const areaFormat = (cityCode, type = 1) => { //根据城市编号获取地区
9 | /*
10 | cityCode 代表城市代码
11 | type 代表转换形式
12 | 1. 省 - 市
13 | 2. 省
14 | 3. 市
15 | */
16 | if (cityCode == null) {
17 | return '来自火星';
18 | }
19 | let provinceCode = ~~(cityCode / 1000) * 1000;
20 | // 510100 成都市
21 | // 510000 四川省
22 | let province = areaList.province_list[provinceCode],
23 | city = areaList.city_list[cityCode];
24 | switch (type) {
25 | case 1:
26 | return `${province} - ${city}`;
27 | case 2:
28 | return `${province}`;
29 | case 3:
30 | return `${city}`;
31 | }
32 | }
33 |
34 | export function aesEncrypt(data, key='g6@d5*&f8fe$s4ff8e') { //加密
35 | const cipher = crypto.createCipher('aes192', key);
36 | var crypted = cipher.update(data, 'utf8', 'hex');
37 | crypted += cipher.final('hex');
38 | return crypted;
39 | }
40 |
41 | export function downLoadImg(url, name) { //下载图片
42 | const aTag = document.createElement('a');
43 | aTag.setAttribute('href', url);
44 | aTag.setAttribute('download', name);
45 | document.body.append(aTag);
46 | aTag.click();
47 | document.body.removeChild(aTag);
48 | }
49 |
50 | // 下载服务器的MP3文件
51 | export const downloadMp3 = (filePath, name, showTips = true) => {
52 | const key = filePath;
53 | showTips && message.loading({ content: `《${name}》正在下载中...`, key })
54 | fetch(filePath).then(res => res.blob()).then(blob => {
55 | const a = document.createElement('a');
56 | document.body.appendChild(a)
57 | a.style.display = 'none';
58 | // 使用获取到的blob对象创建的url
59 | const url = window.URL.createObjectURL(blob);
60 | a.href = url;
61 | // 指定下载的文件名
62 | a.download = name;
63 | a.click();
64 | document.body.removeChild(a)
65 | // 移除blob对象的url
66 | window.URL.revokeObjectURL(url);
67 | showTips && message.success({ content: `《${name}》下载完成`, key })
68 | });
69 | }
70 |
71 | export function parseJson(jsonObj, path) {
72 | let target = JSON.parse(jsonObj),
73 | pathArr = path.split('.');
74 |
75 | while (pathArr.length) {
76 | let prop = pathArr.shift();
77 | target = target?.[prop];
78 | }
79 |
80 | return target;
81 | }
82 |
83 | export function enterTips() {
84 | const tag = sessionStore.get('enter');
85 | if (JSON.stringify(tag) === '{}') {
86 | Modal.info({
87 | width: 700,
88 | title: 'FBI Warning 郑重提示',
89 | content: (
90 |
103 | ),
104 | onOk() {
105 | sessionStore.set('enter', true);
106 | },
107 | });
108 | }
109 | }
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/utils/sessionStore.js:
--------------------------------------------------------------------------------
1 | const sessionStore = {
2 | get(key) {
3 | try{
4 | let res = sessionStorage.getItem(key);
5 | if(res == null) {
6 | return {};
7 | }else {
8 | res = JSON.parse(res);
9 | return res;
10 | }
11 | }catch(e) {
12 | return {};
13 | }
14 | },
15 | set(key, val) {
16 | sessionStorage.setItem(key, JSON.stringify(val));
17 | },
18 | remove(key) {
19 | sessionStorage.removeItem(key);
20 | },
21 | clear() {
22 | sessionStorage.clear();
23 | }
24 | }
25 |
26 | export default sessionStore;
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/Album/Album.jsx:
--------------------------------------------------------------------------------
1 | import AlbumTemp from '@/components/Album/AlbumTemp';
2 | import withAlbumWrap from '@/components/Album/AlbumContent';
3 | import albumApi from '@/api/album';
4 |
5 | const getInfo = async (id) => {
6 | const res = await albumApi.getAlbumInfo(id);
7 | return res;
8 | }
9 |
10 | const getCmts = async (id, limit = 20, offset = 0) => {
11 | const res = await albumApi.getAlbumCmt(id, limit, offset);
12 | return res;
13 | }
14 |
15 | const fns = {
16 | getInfo,
17 | getCmts
18 | }
19 |
20 | const Page = withAlbumWrap(AlbumTemp, fns, 'album');
21 |
22 | export default Page;
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/Album/PlayList.jsx:
--------------------------------------------------------------------------------
1 | import AlbumTemp from '@/components/Album/AlbumTemp';
2 | import withAlbumWrap from '@/components/Album/AlbumContent';
3 | import albumApi from '@/api/album';
4 |
5 | const getInfo = async (id) => {
6 | const res = await albumApi.getPlayListInfo(id);
7 | return res;
8 | }
9 |
10 | const getCmts = async (id, limit = 20, offset = 0) => {
11 | const res = await albumApi.getPlayListCmt(id, limit, offset);
12 | return res;
13 | }
14 |
15 | const fns = {
16 | getInfo,
17 | getCmts
18 | }
19 |
20 | const Page = withAlbumWrap(AlbumTemp, fns, 'playlist');
21 |
22 | export default Page;
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/Disk/Disk.jsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useState } from 'react';
2 | import { useHistory } from 'react-router-dom';
3 | import { Skeleton, Pagination } from 'antd';
4 |
5 | import Main from '@/components/Main';
6 | import NavTitle from '@/components/Common/NavTitle';
7 | import DiskWrap from './components/DiskWrap';
8 | import DiskItem from './components/DiskItem';
9 | import diskApi from '@/api/disk';
10 |
11 | const subs = [
12 | {
13 | txt: '全部',
14 | path: '/home/disk/'
15 | },
16 | {
17 | txt: '华语',
18 | path: '/home/disk/?area=ZH'
19 | },
20 | {
21 | txt: '欧美',
22 | path: '/home/disk/?area=EA'
23 | },
24 | {
25 | txt: '韩国',
26 | path: '/home/disk/?area=KR'
27 | },
28 | {
29 | txt: '日本',
30 | path: '/home/disk/?area=JP'
31 | }
32 | ]
33 |
34 | export default () => {
35 |
36 | // 热门新碟
37 | const [hotDisk, setHotDisk] = useState([]);
38 | const getNewDisk = useCallback(async () => {
39 | const res = await diskApi.getNewDisk();
40 | res && setHotDisk(res);
41 | }, [])
42 |
43 | // 全部新碟分类
44 | const [cateDisk, setCateDisk] = useState({
45 | albums: [],
46 | total: 0
47 | })
48 | const [curPage, setCurPage] = useState(1);
49 | const [area, setArea] = useState('ALL');
50 | const getNewDiskByCate = useCallback(async ({
51 | limit = 35,
52 | area = 'ALL',
53 | offset = 0
54 | } = {}) => {
55 | setCateDisk(prev => ({
56 | total: prev.total,
57 | albums: []
58 | }))
59 | const res = await diskApi.getNewDiskByCate({limit, area, offset});
60 | const { albums = [], total = 0 } = res;
61 | setCateDisk({ albums, total });
62 | }, [])
63 |
64 | const history = useHistory();
65 | const search = history.location.search;
66 | function pageChange(page, pageSize) { //分页改变
67 | setCurPage(page);
68 | history.replace({pathname: '/home/disk', search: `page=${page}&area=${area}`})
69 | }
70 |
71 | function watchPageChange(search) {
72 | const searchParams = new URLSearchParams(search);
73 | console.log(searchParams.get('page'));
74 | const nowPage = searchParams.get('page') ?? 1;
75 | const nowArea = searchParams.get('area') ?? 'ALL';
76 | setCurPage(+nowPage);
77 | setArea(nowArea);
78 | getNewDiskByCate({ offset: (nowPage - 1) * 35, area: nowArea});
79 | }
80 |
81 | useEffect(() => {
82 | getNewDisk();
83 | document.body.scrollTo(0, 0);
84 | }, [])
85 |
86 | useEffect(() => {
87 | watchPageChange(search);
88 | }, [search])
89 |
90 | return (
91 |
92 |
93 |
94 |
95 | {
96 | hotDisk.map(item => {
97 | return
98 | })
99 | }
100 |
101 |
102 |
103 |
104 |
105 | {
106 | cateDisk.albums.map(item => {
107 | return
108 | })
109 | }
110 |
111 |
121 |
122 |
123 | )
124 | }
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/Disk/components/DiskItem.jsx:
--------------------------------------------------------------------------------
1 | import { Link } from "react-router-dom";
2 | import { LazyLoadImage } from 'react-lazy-load-image-component';
3 |
4 | import { artistsFormat, playAlbum } from "@/utils/utils";
5 |
6 | export default (props) => {
7 |
8 | const {
9 | picUrl,
10 | name,
11 | artists,
12 | id
13 | } = props;
14 |
15 | return (
16 |
17 |
18 |
24 |
25 |
26 | playAlbum(id)}>
27 |
28 |
29 | {name}
30 |
31 |
32 |
33 | { artistsFormat(artists) }
34 |
35 |
36 |
37 | )
38 | }
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/Disk/components/DiskWrap.jsx:
--------------------------------------------------------------------------------
1 | export default ({children}) => {
2 | return (
3 |
6 | )
7 | }
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/Friend/Friend.jsx:
--------------------------------------------------------------------------------
1 | import Main from '@/components/Main';
2 | import UserInfo from '@/components/Aside/UserInfo';
3 | import friendApi from '@/api/friend';
4 | import { EventWrap, EventItem } from './components/Event';
5 |
6 | import { useCallback, useEffect, useState } from 'react';
7 | import { useHistory } from 'react-router-dom';
8 | import { useSelector } from 'react-redux';
9 | import { message } from 'antd';
10 |
11 | const Friend = () => {
12 |
13 | const [eventObj, setEvent] = useState({});
14 | const getEvents = useCallback(async () => {
15 | const res = await friendApi.getFriendEvent();
16 | setEvent({
17 | event: res.event,
18 | lasttime: res.lasttime,
19 | more: res.more
20 | })
21 | }, [])
22 |
23 | const userInfo = useSelector(state => state.user);
24 | const history = useHistory();
25 | useEffect(() => {
26 | if (Reflect.ownKeys(userInfo).length === 0) {
27 | message.warning('请先登录后查看朋友动态!')
28 | history.replace('/my/login');
29 | return;
30 | }
31 | getEvents();
32 | }, [])
33 |
34 | return (
35 |
36 |
37 |
38 |
39 |
40 | 动态
41 |
42 |
43 | {
44 | eventObj?.event?.map(item => {
45 | return
46 | })
47 | }
48 |
49 |
50 |
51 |
53 |
54 | {
55 | userInfo.token ?
56 | :
57 | null
58 | }
59 |
60 |
9 | { props.children }
10 |
11 | )
12 | }
13 |
14 | export const EventItem = ({info} = {}) => {
15 | const jsonObj = JSON.parse(info.json)
16 |
17 | function shareType() {
18 | if (jsonObj.song) {
19 | return '分享单曲';
20 | } else if (jsonObj.program) {
21 | return '分享节目';
22 | } else {
23 | return '';
24 | }
25 | }
26 |
27 | return (
28 |
29 |
30 |
31 |
32 |
33 |
35 |
36 | { info?.user?.nickname }
37 | { shareType() }
38 |
39 |
40 | {timeToYMD(info?.showTime)}
41 |
42 |
43 | { parseJson(info?.json, 'msg') }
44 |
45 | {
46 | parseJson(info?.json, 'song') ?? parseJson(info?.json, 'program') ?
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 | { parseJson(info?.json, 'song.name') ?? parseJson(info?.json, 'program.name')}
56 |
57 |
58 |
59 | {
60 | parseJson(info?.json, 'program.radio.category') ?
61 | { parseJson(info?.json, 'program.radio.category') }
62 | : null
63 | }
64 | { artistsFormat(parseJson(info?.json, 'song.artists') ?? []) || parseJson(info?.json, 'program.radio.name') }
65 |
66 |
67 |
: null
68 | }
69 |
70 | {
71 | info?.pics?.map(pic => {
72 | return (
73 | -
74 |
75 |
76 | )
77 | })
78 | }
79 |
80 |
41 |
42 |
43 |
44 |
45 |
46 | {
47 | cateLists.map(cate => {
48 | return (
49 |
50 |
51 | { cate.icon }
52 | { cate.title }
53 |
54 |
55 | {
56 | cate.sub.map(item => {
57 | return clickHanddler(item)} key={item} className="cate-item">{ item }
58 | })
59 | }
60 |
61 |
62 | )
63 | })
64 | }
65 |
66 |
74 |
75 |
76 | { listsInfo?.cat }
77 |
78 |
79 |
80 |
81 | 热门
82 |
83 |
92 | {
93 | playLists.map((item, i) => {
94 | return (
95 |
100 | )
101 | })
102 | }
103 |
104 |
113 |
114 |
115 | )
116 | }
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/Home/Swiper.jsx:
--------------------------------------------------------------------------------
1 | import { createRef, memo, useState } from 'react';
2 | import { Link } from 'react-router-dom';
3 | import { useEffect, useCallback } from 'react';
4 | import { useStore, useSelector } from 'react-redux';
5 |
6 | import { Carousel } from 'antd';
7 | import './index.scss';
8 | import homeAction from './store/action';
9 | import { homeApis } from '@/api/home';
10 |
11 | const NewDiskSwiper = (props) => {
12 | const { newDisk } = props;
13 | const swp = createRef(null);
14 | function changeSwiper(flag) {
15 | flag ? swp.current.next() : swp.current.prev()
16 | }
17 |
18 | const [newDiskData, setNewDiskData] = useState([]);
19 | const store = useStore();
20 | const _getNewDisk = useCallback(async () => {
21 | let res = await homeApis.getNewDisk({limit: 10});
22 | res = [[...res.slice(0,5)], [...res.slice(5,)]];
23 | setNewDiskData(res);
24 | store.dispatch(homeAction.setNewDisk(res));
25 | }, [])
26 |
27 | const newDiskDataOfStore = useSelector(state => state.homeData.newDisk)
28 | function getNewDiskOfStore() {
29 | console.log(newDiskDataOfStore);
30 | if (newDiskDataOfStore.length) {
31 | setNewDiskData(newDiskDataOfStore);
32 | return true;
33 | } else {
34 | return false;
35 | }
36 | }
37 |
38 | useEffect(() => {
39 | if (getNewDiskOfStore()) return;
40 | _getNewDisk();
41 | }, [])
42 |
43 | return (
44 |
45 |
changeSwiper(false)}
47 | className="click-flag pre s-bg s-bg-7 f-tdn"
48 | >
49 |
50 | {newDiskData.map((item, i) => {
51 | return (
52 |
75 | );
76 | })}
77 |
78 |
changeSwiper(true)}
80 | className="click-flag nxt s-bg s-bg-8 f-tdn"
81 | >
82 |
12 |
13 |
14 |
15 |
16 | { props.name }
17 |
18 |
19 |
20 | by
21 | { props.dj.nickname }
22 |
23 |
24 |
{ props.programCount }期
26 |
27 | )
28 | }
29 |
30 | const MyDj = () => {
31 |
32 | const [djList, setList] = useState([]);
33 | const [loading, setLoading] = useState(true);
34 | const getDjList = useCallback(async () => {
35 | setLoading(true);
36 | const res = await userApi.getSubscribeDj();
37 | setList(res);
38 | setTimeout(() => setLoading(false), 500);
39 | }, [])
40 |
41 | useEffect(() => {
42 | getDjList();
43 | }, [])
44 |
45 | return (
46 |
47 |
48 |
49 | 我订阅的电台
50 |
51 |
52 |
53 |
54 | {
55 | djList.map(item => {
56 | return (
57 |
58 | )
59 | })
60 | }
61 |
62 |
63 |
20 |
21 |
登录网易云音乐
22 | loginFun.openLogin(true)}>
23 |
24 |
26 |
27 |
28 | 我的视频
29 |
30 |
31 |
32 | {
33 | mv.map(item => {
34 | return
35 | })
36 | }
37 |
38 |
35 | { props.children }
36 |
37 |
38 | )
39 | }
40 |
41 | export default MyMusic;
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/My/MyArtist.jsx:
--------------------------------------------------------------------------------
1 | import { Link } from 'react-router-dom';
2 | import { useSelector } from 'react-redux';
3 | import { Skeleton } from 'antd';
4 | import { useCallback, useEffect, useState } from 'react';
5 |
6 | import userApi from '@/api/user';
7 |
8 | const SingerItem = ({
9 | img1v1Url = '',
10 | name = '',
11 | mvSize = 0,
12 | albumSize = 0,
13 | id = ''
14 | }) => {
15 | return (
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | { name }
25 |
26 |
{ albumSize }个专辑 { mvSize }个MV
27 |
28 |
53 |
54 |
55 | 我的歌手（{ artists.length }）
56 |
57 |
58 |
59 | {
60 | artists.map(item => {
61 | return
62 | })
63 | }
64 |
65 |
41 |
42 |
43 |
44 |
45 |
46 | { playListInfo.album?.name }
47 |
48 |
49 |
50 |
51 |
{ playListInfo.album?.creator?.nickname }
52 |
53 |
54 |
playList(id)}
56 | addHandler={() => replaceHistory(playListInfo.songs)}
57 | />
58 |
59 |
60 |
61 | 歌曲列表
62 |
63 |
{ playListInfo.album?.trackCount }首歌
64 |
65 | 播放：{ playListInfo.album?.playCount } 次
66 |
67 |
68 |
69 |
70 | {
71 | playListInfo.songs.map((song, i) => {
72 | return (
73 |
74 | )
75 | })
76 | }
77 |
78 |
79 |
15 |
16 |
17 |
18 |
19 |
{ props.name }
20 |
{ props.total }首
21 |
22 |
7 | this is Personal page
8 |
9 | )
10 | }
11 | }
12 |
13 | export default Personal;
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/Personal/index.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chensidi/react17-project/92fa757612ce81a226bdc0cc3dd4c3f2556c4706/NeteaseCloudPC/src/views/Personal/index.scss
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/Radio/Radio.jsx:
--------------------------------------------------------------------------------
1 | import Main from '@components/Main';
2 | import Category from './components/Category';
3 | import Recommend from './components/Recommend';
4 | import { withDjRecommend, RecommendTemp } from './components/TypeRecommend';
5 | import radioApi from "@api/radio";
6 |
7 | const types = [
8 | {
9 | title: '音乐推荐',
10 | id: 2
11 | },
12 | {
13 | title: '生活',
14 | id: 6
15 | },
16 | {
17 | title: '情感',
18 | id: 3
19 | },
20 | {
21 | title: '创作翻唱',
22 | id: 2001
23 | },
24 | {
25 | title: '知识',
26 | id: 11
27 | }
28 | ]
29 |
30 |
31 | const WrapTypeRecommend = withDjRecommend(RecommendTemp, radioApi.getRecommendByType, {
32 | limit: 4,
33 | })
34 |
35 | export default () => {
36 | return (
37 |
38 |
39 |
40 | {
41 | types.map((item) => {
42 | return
43 | })
44 | }
45 |
46 | )
47 | }
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/Radio/RadioCate.jsx:
--------------------------------------------------------------------------------
1 | import Main from '@/components/Main';
2 | import Category from './components/Category';
3 | import radioApi from '@/api/radio';
4 | import { withDjRecommend, RecommendTemp } from './components/TypeRecommend';
5 |
6 | import { useLocation, useHistory } from 'react-router-dom';
7 | import { useCallback, useEffect, useRef, useState } from 'react';
8 | import { Pagination } from 'antd';
9 | import { usePage } from '@/utils/hooks';
10 |
11 |
12 | function getSearchParam(str, k) {
13 | const s = new URLSearchParams(str);
14 | return s.get(k);
15 | }
16 |
17 | const WrapTypeRecommend = withDjRecommend(RecommendTemp, radioApi.getHotByType, {
18 | limit: 20,
19 | title: '电台排行榜',
20 | })
21 |
22 | const RadioCate = () => {
23 |
24 | const { search } = useLocation();
25 | const id = getSearchParam(search, 'id');
26 | const page = getSearchParam(search, 'page');
27 | const [sid, setId] = useState(id);
28 |
29 | const { total, setTotal, curPage, setCurPage } = usePage();
30 | const totalRef = useRef(setTotal);
31 |
32 | const history = useHistory();
33 | const change = (cur) => {
34 | setCurPage(cur);
35 | const search = new URLSearchParams('');
36 | search.set('id', id);
37 | search.set('page', cur);
38 | history.replace('/home/djradio/cate?' + search.toString())
39 | }
40 |
41 | useEffect(() => {
42 | setId(id);
43 | setCurPage(1);
44 | }, [id])
45 |
46 | useEffect(() => {
47 | page && setCurPage(+page);
48 | }, [page])
49 |
50 |
51 | return (
52 |
53 |
54 |
64 |
65 |
75 |
76 | )
77 | }
78 |
79 | export default RadioCate;
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/Radio/RadioDetails.jsx:
--------------------------------------------------------------------------------
1 | import Main from '@/components/Main';
2 | import Introduce from './components/Introduce';
3 | import RadioTable from './components/RadioTable';
4 | import radioApi from '@/api/radio';
5 | import { useEffect, useState, createContext } from 'react';
6 | import { useParams } from 'react-router';
7 |
8 | export const ApiCtx = createContext();
9 |
10 | export default function () {
11 |
12 | const [intr, setIntr] = useState({dj: {}});
13 | const getDetails = async () => { //电台介绍
14 | const res = await radioApi.getDetails(id);
15 | setIntr(res);
16 | }
17 |
18 | const [programList, setProgram] = useState([]);
19 | const [total, setTotal] = useState([]);
20 | const getProgram = async ({asc} = {}) => { //获取节目列表
21 | const res = await radioApi.getProgram(id, {asc});
22 | setProgram(res.programs)
23 | setTotal(res.count)
24 | }
25 |
26 | const { id } = useParams();
27 |
28 | useEffect(() => {
29 | document.body.scrollTo(0, 0)
30 | getDetails();
31 | getProgram();
32 | }, [])
33 |
34 | return (
35 |
36 |
46 |
47 | )
48 | }
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/Radio/components/Category.jsx:
--------------------------------------------------------------------------------
1 | import radioApi from '@api/radio';
2 |
3 | import { useEffect, useState } from 'react';
4 | import { Link, useLocation } from 'react-router-dom';
5 | import { useStore, useSelector } from 'react-redux';
6 |
7 |
8 | const CateItem = ({id, pic84x84IdUrl, name, on}) => {
9 | return (
10 |
14 | 
15 | { name }
16 |
17 | )
18 | }
19 |
20 | //Category
21 | export default () => {
22 |
23 | const [cateList, setCateLists] = useState([]);
24 | const store = useStore();
25 | const storeCates = useSelector(state => state.radioData.cates)
26 | const getCateList = async () => {
27 | console.log(storeCates)
28 | if (storeCates.length) {
29 | setCateLists(storeCates);
30 | } else {
31 | const res = await radioApi.getCateLists();
32 | setCateLists(res);
33 | store.dispatch({type: 'setCates', cates: res});
34 | }
35 | }
36 |
37 | const { search } = useLocation();
38 | const id = new URLSearchParams(search).get('id');
39 |
40 | useEffect(() => {
41 | getCateList();
42 | }, []);
43 |
44 | return (
45 |
46 | {
47 | cateList.map((cate) => {
48 | const on = cate.id == id;
49 | return (
50 |
51 | )
52 | })
53 | }
54 |
55 | )
56 | }
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/Radio/components/Introduce.jsx:
--------------------------------------------------------------------------------
1 | import { Link } from 'react-router-dom';
2 | import { Button } from 'antd';
3 |
4 | export default function(props) {
5 | console.log(props)
6 |
7 | const {
8 | picUrl,
9 | name,
10 | dj: {
11 | avatarUrl,
12 | nickname
13 | },
14 | category,
15 | desc
16 | } = props
17 |
18 | return (
19 |
20 |
21 |
22 |
23 |
25 |
26 |
27 |
28 |
29 |
30 | { name }
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | { nickname }
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | {category}
51 |
52 | { desc }
53 |
54 |
55 |
56 |
13 | |
14 |
15 |
16 | { serialNum }
17 |
18 | |
19 |
20 |
21 | { name }
22 |
23 |
24 |
25 |
26 |
27 |
28 | |
29 |
30 |
31 | 播放{ playTimesFormat(listenerCount) }
32 |
33 | |
34 |
35 |
36 | 赞 { likedCount }
37 |
38 | |
39 |
40 |
41 | { timeToYMD(createTime) }
42 |
43 | |
44 |
45 |
46 | { mediaTimeFormat(duration / 1000) }
47 |
48 | |
49 |
50 | )
51 | }
52 |
53 | export default function({list = [], total = 0}) {
54 |
55 | const { getProgram } = useContext(ApiCtx);
56 |
57 | const [sort, setSort] = useState(false); //默认降序
58 |
59 | const sortQuery = (flag) => {
60 | if (sort === flag) {
61 | return;
62 | }
63 | getProgram({asc: flag});
64 | setSort(flag);
65 | }
66 |
67 | return (
68 |
69 |
70 |
71 |
72 | 节目列表
73 |
74 |
75 |
76 | 共{ total }期
77 |
78 |
79 | sortQuery(false)}
82 | title="降序"
83 | />
84 | sortQuery(true)}
87 | title="升序"
88 | />
89 |
90 |
91 |
92 |
93 | {
94 | list.length > 0 && list.map((item, i) => )
95 | }
96 |
97 |
98 |
19 |
20 |
{ name }
21 |
{ rcmdtext ?? nickname }
22 |
65 | {rank.toString().padStart(2, 0)}
66 |
67 |
68 | 
69 |
70 |
{ name }
71 |
{ brand }
72 |
111 |
112 |
113 |
114 | {
115 | recommend.map((item, i) => {
116 | return
117 | })
118 | }
119 |
120 |
121 |
122 |
123 |
124 | {
125 | topList.map((item, i) => {
126 | return
127 | })
128 | }
129 |
130 |
131 |
17 |
18 |
24 |
25 |
26 |
27 |
28 | { name }
29 |
30 |
{ rcmdtext }
31 |
32 |
41 | {
42 | list.map(item => )
43 | }
44 |
45 |
46 | )
47 | }
48 |
49 | export function withDjRecommend(Wrap, fn, options) {
50 | return forwardRef(({title, params}, ref) => {
51 |
52 | const [list, setList] = useState([]);
53 | const { loading, toggleLoad } = useLoading();
54 | const getRecommend = async () => {
55 | toggleLoad(true);
56 | const res = await fn(params);
57 | if (res.djRadios) {
58 | setList(res.djRadios.slice(0, options.limit));
59 | ref.current(res.count);
60 | } else {
61 | setList(res.slice(0, options.limit));
62 | }
63 | toggleLoad(false, 200);
64 | }
65 |
66 | useEffect(() => {
67 | getRecommend();
68 | }, [params.id])
69 |
70 | return
71 |
72 |
73 | })
74 | }
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/Radio/store/index.js:
--------------------------------------------------------------------------------
1 | import initialState from './initialState';
2 | import sessionStore from '@/utils/sessionStore';
3 |
4 | const radioReducer = (state = initialState, action) => {
5 | switch (action.type) {
6 | case 'setCates':
7 | sessionStore.set('radioCates', action.cates)
8 | return {
9 | ...state,
10 | cates: action.cates
11 | }
12 | default:
13 | return {...state}
14 | }
15 | }
16 |
17 | export default radioReducer;
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/Radio/store/initialState.js:
--------------------------------------------------------------------------------
1 | import sessionStore from "@/utils/sessionStore";
2 |
3 | const initialState = {
4 | cates: sessionStore.get('radioCates') ?? []
5 | }
6 |
7 | export default initialState;
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/Singer/Album.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useCallback, useState, useContext } from 'react';
2 | import { useParams, Link, useLocation, useHistory } from 'react-router-dom';
3 | import { LazyLoadImage } from 'react-lazy-load-image-component'
4 | import { Pagination, message } from 'antd';
5 |
6 | import singerApi from '@/api/singer';
7 | import { timeToYMD, playAlbum } from '@/utils/utils';
8 | import { Intrs } from './Singer';
9 |
10 | const AlbumItem = (props) => {
11 | const {
12 | picUrl,
13 | name,
14 | publishTime,
15 | id
16 | } = props;
17 |
18 | return (
19 |
20 |
21 |
22 |
23 |
24 | playAlbum(id)}
28 | >
29 |
30 |
31 |
32 |
33 | { name }
34 |
35 |
36 |
37 | { timeToYMD(publishTime) }
38 |
39 |
40 | )
41 | }
42 |
43 | const Album = () => {
44 |
45 | const { albumSize } = useContext(Intrs);
46 | const location = useLocation();
47 | const history = useHistory();
48 |
49 | let { id } = useParams();
50 | const [lists, setLists] = useState([]);
51 | const [curPage, setCurPage] = useState(1);
52 |
53 | const getAlbum = useCallback(async (limit, offset) => {
54 | message.loading({
55 | content: '专辑获取中...',
56 | duration: 0,
57 | key: 'singerAlbum',
58 | style: {
59 | marginTop: '30vh',
60 | }
61 | });
62 | const res = await singerApi.getAlbum(id, limit, offset);
63 | setLists(res);
64 | message.destroy('singerAlbum')
65 | }, [])
66 |
67 | const pageChange = useCallback((page, pageSize) => {
68 | setCurPage(page);
69 | getAlbum(pageSize, (page - 1) * pageSize)
70 | history.replace(history.location.pathname + `?page=${page}`)
71 | }, [])
72 |
73 | const computedPage = useCallback(() => {
74 | return new Promise((resolve, reject) => {
75 | setTimeout(() => {
76 | const page = location.search.match(/\=(.+)$/)[1];
77 | setCurPage(Number(page));
78 | resolve(Number(page));
79 | })
80 | })
81 | })
82 |
83 | useEffect(async () => {
84 | const page = await computedPage();
85 | getAlbum(12, (page - 1) * 12);
86 | }, [])
87 |
88 | return (
89 | <>
90 |
91 | {
92 | lists.map(list => {
93 | return
94 | })
95 | }
96 |
97 |
106 |
107 | )
108 | }
109 |
110 | export default Album;
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/Singer/CateAside.jsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react';
2 | import { Link, useLocation } from 'react-router-dom';
3 |
4 | export const cateList = [
5 | {name: '推荐', val: '-1'},
6 | {name: '华语', val: 7},
7 | {name: '欧美', val: 96},
8 | {name: '日本', val: 8},
9 | {name: '韩国', val: 16},
10 | {name: '其他', val: 0}
11 | ];
12 |
13 | export const typeList = ['男歌手', '女歌手', '组合/其他'];
14 |
15 | const CateGroup = (props) => {
16 | const { title = '', list = [], idx } = props;
17 | const { pathname } = useLocation()
18 |
19 | return (
20 | 0 ? 'blk': ''}`}>
21 |
{ title }
22 |
23 | {
24 | list.map(cate => {
25 | return (
26 | -
27 | { cate.cate }
28 |
29 | )
30 | })
31 | }
32 |
33 |
86 |
87 | {
88 | asideCates.map((item, i) => {
89 | return (
90 |
91 | )
92 | })
93 | }
94 |
95 |
12 |
13 |
14 | {name}简介
15 |
16 |
17 | { briefDesc }
18 |
19 | {
20 | introduction.map(item => {
21 | return (
22 |
23 | { item.ti }
24 | { item.txt }
25 |
26 | )
27 | })
28 | }
29 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | { name }
25 |
26 |
27 | )
28 | }
29 |
30 | const SingerMV = () => {
31 | const location = useLocation();
32 | const history = useHistory();
33 | const { mvSize } = useContext(Intrs);
34 | const { id } = useParams();
35 | const [lists, setLists] = useState([]);
36 | const [curPage, setCurPage] = useState(1);
37 |
38 | const getMVs = useCallback(async (limit, offset) => {
39 | const res = await singerApi.getMv(id, limit, offset);
40 | setLists(res);
41 | }, [])
42 |
43 | const pageChange = useCallback((page, pageSize) => {
44 | setCurPage(page);
45 | getMVs(pageSize, (page - 1) * pageSize);
46 | history.replace(history.location.pathname + `?page=${page}`)
47 | }, [])
48 |
49 | const computedPage = useCallback(() => {
50 | return new Promise((resolve, reject) => {
51 | setTimeout(() => {
52 | const page = location.search.match(/\=(.+)$/)[1];
53 | setCurPage(Number(page));
54 | resolve(Number(page));
55 | })
56 | })
57 | })
58 |
59 | useEffect(async () => {
60 | const page = await computedPage();
61 | getMVs(12, 12 * (page - 1));
62 | }, [])
63 |
64 | return (
65 | <>
66 |
67 | {
68 | lists.map(item => {
69 | return
70 | })
71 | }
72 |
73 |
82 |
83 | )
84 | }
85 |
86 | export default SingerMV;
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/Singer/Singer.jsx:
--------------------------------------------------------------------------------
1 | import Main from '@/components/Main';
2 | import { Tabs } from 'antd';
3 | import { useCallback, useEffect, useState, createContext, memo, useRef } from 'react';
4 | import { useHistory, useParams, Link, useLocation } from 'react-router-dom';
5 |
6 | import singerApi from '@/api/singer';
7 |
8 | const { TabPane } = Tabs;
9 | const subRouter = [
10 | 'song',
11 | 'album',
12 | 'mv',
13 | 'introduce'
14 | ]
15 |
16 | export const Intrs = createContext({});
17 |
18 | const SimiItem = (props) => {
19 | const { img1v1Url, name, id } = props;
20 | return (
21 |
22 |
23 |
24 |
25 |
26 |
28 | { name }
29 |
30 |
31 | )
32 | }
33 |
34 | const Singer = memo((props) => {
35 |
36 | const history = useHistory();
37 | const location = useLocation();
38 | let { id } = useParams();
39 | const [info, setInfo] = useState({});
40 | const [intr, setIntr] = useState({});
41 | const [simi, setSimi] = useState([]);
42 | const infos = useRef();
43 | const [active, setActive] = useState('song');
44 |
45 | const tabChange = useCallback((key) => { //子页面跳转
46 | const path = key;
47 | history.replace(`/singer/${id}/${path}?page=1`);
48 | setActive(key);
49 | }, [id])
50 |
51 | const getSingerInfo = useCallback(async () => {
52 | const { artist={} } = await singerApi.getDetails(id);
53 | setInfo(artist);
54 | infos.current = artist;
55 | }, [id])
56 |
57 | const getSingerIntr = useCallback(async () => {
58 | const res = await singerApi.getIntr(id);
59 | setIntr({
60 | ...res,
61 | ...infos.current
62 | });
63 | }, [id])
64 |
65 | const getSimi = useCallback(async () => {
66 | const res = await singerApi.getSimi(id);
67 | setSimi(res.slice(0, 6));
68 | }, [id])
69 |
70 | const init = useCallback(() => {
71 | getSingerInfo(id);
72 | getSingerIntr(id);
73 | getSimi(id);
74 | if (location.pathname === `/singer/${id}`) {
75 | history.replace(`/singer/${id}/song?page=1`)
76 | }
77 | }, [id])
78 |
79 | useEffect(async () => { //默认初次跳转到歌手的歌曲子页
80 | init();
81 | const subPath = location.pathname.match(/\/([^\/]{1,})$/)[1];
82 | setActive(subRouter.includes(subPath) ? subPath : 'song');
83 | }, [id])
84 |
85 | return (
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 | { info.name }
94 |
95 |
96 | {info.name}
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 | { props.children }
115 |
116 |
117 |
118 |
120 |
121 |
122 | 相似歌手
123 |
124 |
125 | {
126 | simi.map(item => {
127 | return
128 | })
129 | }
130 |
131 |
132 |
37 |
38 |
39 |
40 |
41 | { title }
42 |
43 |
44 |
45 |
46 | {
47 | singerList.map(item => {
48 | return
49 | })
50 | }
51 |
52 |
53 |
54 |
55 |
9 |
15 |
16 | {/*
17 |
*/}
18 |
19 |
21 | { name }
22 |
23 |
24 |
25 |
26 |
27 | )
28 | }
29 |
30 | export default SingerItem;
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/Singer/SingerList.jsx:
--------------------------------------------------------------------------------
1 | import { Link, useHistory } from 'react-router-dom';
2 | import { useEffect } from 'react';
3 |
4 | import Main from '@/components/Main';
5 | import CateAside from './CateAside';
6 |
7 | const SingerList = (props) => {
8 |
9 | const history = useHistory();
10 |
11 | useEffect(() => {
12 | if (history.location.pathname.endsWith('/singer')) {
13 | history.replace('/home/singer/cate/recommend')
14 | }
15 | }, [])
16 |
17 | return (
18 |
19 |
20 | {
21 | props.children
22 | }
23 |
24 | )
25 | }
26 |
27 | export default SingerList;
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/Singer/SingerMoreCates.jsx:
--------------------------------------------------------------------------------
1 | import { Tabs } from 'antd';
2 | import { useCallback, useEffect, useState } from 'react';
3 | import { useParams } from 'react-router';
4 |
5 | import singerApi from '@/api/singer';
6 | import SingerItem from './SingerItem';
7 | import { cateList, typeList } from './CateAside';
8 |
9 | const { TabPane } = Tabs;
10 |
11 | function createCateList() {
12 | const list = [];
13 | for(let i = 65; i <= 90; i ++) {
14 | const item = {
15 | code: String.fromCharCode(i),
16 | name: String.fromCharCode(i)
17 | };
18 | list.push(item);
19 | }
20 | list.unshift({
21 | code: '',
22 | name: '全部'
23 | });
24 | return list;
25 | }
26 |
27 | const SingerMoreCates = () => {
28 |
29 | const { area, type } = useParams();
30 |
31 | const [cates, setCates] = useState(createCateList());
32 | const [initial, setInitial] = useState('');
33 | const [singerList, setSingers] = useState([]);
34 | const [title, setTitle] = useState('');
35 |
36 | const initialChange = useCallback((key) => {
37 | setInitial(key);
38 | }, [])
39 |
40 | const getSinger = useCallback(async () => {
41 | const res = await singerApi.getCateList({
42 | type,
43 | area,
44 | initial
45 | });
46 | setSingers(res.slice(0, 10));
47 | }, [area, type, initial])
48 |
49 | const getTitle = useCallback(() => {
50 | for (let i = 0; i < cateList.length; i ++) {
51 | if (cateList[i].val == area) {
52 | let types = typeList[type - 1];
53 | let title = `${cateList[i].name}${types}`;
54 | setTitle(title);
55 | }
56 | }
57 | }, [area, type])
58 |
59 | useEffect(() => {
60 | getSinger();
61 | getTitle();
62 | }, [area, type, initial])
63 |
64 | return (
65 |
66 |
67 |
68 |
69 |
70 | { title }
71 |
72 |
73 |
74 |
75 | {
76 | cates.map(cate => {
77 | return (
78 |
79 |
80 | )
81 | })
82 | }
83 |
84 |
85 |
86 |
87 | {
88 | singerList.map(item => {
89 | return
90 | })
91 | }
92 |
93 |
94 |
95 |
96 |
54 |
55 | {
56 | lists.map(item => {
57 | return
58 | })
59 | }
60 |
61 |
70 |
9 |
10 | 包含这首歌的歌单
11 |
12 |
13 |
14 | {
15 | lists.map(list => {
16 | return (
17 | -
18 |
19 |
20 |
21 |
22 |
24 |
25 |
26 | { list.name }
27 |
28 |
29 |
30 |
31 | by
32 |
33 |
34 | { list.creator.nickname }
35 |
36 |
37 |
39 | )
40 | })
41 | }
42 |
43 |
44 | )
45 | }
46 |
47 | export const SameSongs = (props) => {
48 | const {songs} = props;
49 | return (
50 | <>
51 |
52 | 相似歌曲
53 |
54 |
78 |
79 | )
80 | }
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/Toplist/AsideNav.jsx:
--------------------------------------------------------------------------------
1 | import { Link, useLocation } from 'react-router-dom';
2 | import { LazyLoadImage } from 'react-lazy-load-image-component';
3 | import { useContext, createContext } from 'react';
4 |
5 | const ActiveId = createContext();
6 | const ListItem = (props) => {
7 |
8 | const activeId = Number(useContext(ActiveId));
9 |
10 | const { coverImgUrl = '', name = '', updateFrequency = '', id = 0 } = props;
11 | return (
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | { name }
24 |
25 |
26 |
27 | { updateFrequency }
28 |
29 |
30 |
31 | )
32 | }
33 |
34 | const ListGroup = (props) => {
35 | const { title = '', list = [] } = props;
36 | return (
37 | <>
38 | { title }
39 |
40 | {
41 | list.map(item => {
42 | return
43 | })
44 | }
45 |
46 |
47 | )
48 | }
49 |
50 | const AsideNav = (props) => {
51 |
52 | const { specialLists = {}, globalLists = {} } = props;
53 | const { pathname } = useLocation();
54 | const tid = pathname.match(/toplist\/(.+)$/) && pathname.match(/toplist\/(.+)$/)[1];
55 |
56 | return (
57 |
65 | )
66 | }
67 |
68 | export default AsideNav;
--------------------------------------------------------------------------------
/NeteaseCloudPC/src/views/Toplist/Details.jsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useReducer, useState } from 'react';
2 | import { useLocation } from 'react-router-dom';
3 | import { Skeleton } from 'antd';
4 |
5 | import BtnTools from '@/components/Common/BtnTools';
6 | import toplistApi from '@/api/toplist';
7 | import { SongItem } from '@/views/Search/components';
8 | import { playList } from '@utils/utils';
9 | import { CommentWrap } from '@/components/Comment/Comment';
10 |
11 | const cmtsInit = {
12 | total: 0,
13 | hotCmts: [],
14 | cmts: []
15 | }
16 |
17 | const cmtsReducer = (state, action) => {
18 | switch (action.type) {
19 | case 'setTotal':
20 | return {
21 | ...state,
22 | total: action.total
23 | }
24 | case 'setHot':
25 | return {
26 | ...state,
27 | hotCmts: action.hot
28 | }
29 | case 'setCmts':
30 | return {
31 | ...state,
32 | cmts: action.cmts
33 | }
34 | default:
35 | return state;
36 | }
37 | }
38 |
39 | const TopDetails = () => {
40 |
41 | const location = useLocation();
42 | const id = location.pathname.match(/toplist\/(.+)$/)[1];
43 | const [details, setDetails] = useState({});
44 | const [loading, setLoading] = useState(false);
45 |
46 | const [cmtsObj, dispatch] = useReducer(cmtsReducer, cmtsInit);
47 |
48 | const getDetails = useCallback(async () => {
49 | setLoading(true);
50 | const res = await toplistApi.getTopDetails(id);
51 | setDetails(res);
52 | setLoading(false);
53 | document.querySelector('.m-back').click();
54 | }, [id])
55 |
56 | const playAlbumFn = useCallback(() => { //播放全部歌曲
57 | playList(id, details?.tracks);
58 | }, [details?.tracks, id])
59 |
60 | const getCmts = useCallback(async (limit, offset) => { //获取评论
61 | const res = await toplistApi.getCmts(id, limit, offset);
62 | dispatch({type: 'setTotal', total: res.total});
63 | res.hotComments && dispatch({type: 'setHot', hot: res.hotComments});
64 | dispatch({type: 'setCmts', cmts: res.comments});
65 | }, [id])
66 |
67 | const pageChange = useCallback((page, pageSize) => {
68 | getCmts(pageSize, (page -1) * pageSize)
69 | }, [])
70 |
71 | useEffect(async () => {
72 | await getDetails();
73 | await getCmts();
74 | }, [id])
75 |
76 | return (
77 |
78 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
{ details.name }
96 |
97 |
98 |
99 |
100 | { details.description }
101 |
102 |
107 |
108 |
109 |
110 |
111 |
112 | {
113 | details?.tracks?.map(item => {
114 | return
115 | })
116 | }
117 |
118 |
119 |
120 |
122 |
17 |
18 |
19 |
20 |
21 | { playTimesFormat(playTime) }
22 |
23 |
26 |
27 |
29 |
30 |
31 | { title }
32 |
33 |
34 |
{ mediaTimeFormat(durationms / 1000) }
35 |
36 | by { creator[0].userName }
37 |
38 |
48 | 相关推荐
49 |
50 |
51 | {
52 | relatedVdo.map(vdo => {
53 | return (
54 |
59 |
60 | )
61 | }
62 |
63 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react17-project
2 | 新版react重构网易云PC版
3 |
4 | 预览地址 [Jacky仿网易PC版](http://zhoup.top:7000/)
5 | > 访问该地址需要登录，用户名为`jacky`, 密码为`123456`
6 |
7 | > 本项目同时在GitHub和gitee上更新
8 | + github地址为
9 | + gitee地址为
10 |
11 | ## 说明
12 | 本人是音乐兼代码兼足球的忠实粉丝，平时不是写代码就去KTV，所以总是喜欢写一些与音乐或者足球的web应用，此前曾写过很多版本的music app, 比如vue2.x和react重构过移动端的仿网易云，也自己写后台node转发第三方的足球api，当然在此申明，**只是为了研究学习技术，绝不作为商业盈利！若有不法分子使用该程序谋利，后果自负**
13 |
14 | 这个网易云的web应用我从2019年初就开始陆续动工，先后有几个版本的，但是都不太满意，所以从去年9月18日，vue3.0正式发布了后，决定完整地再重构一次，终于历时几个月写了一个令我比较满意的移动端web应用，地址在[仿网易云APP vue3版](https://github.com/chensidi/vue3-project/tree/master/vue3NeteaseCloud), 预览地址为[Jacky 移动music](http://zhoup.top:7002/)，用户名密码同样，而这个PC端版本的则是采用最新的react重构，功能几乎与官网一样，这个项目是启动与2021新春前夕，并且在一直更新。
15 |
16 | 本项目依赖于`react17`和`antd`，将项目拉下来后，要先下载好后台，也就是网易云的nodeJS后台，它会提供一个与网易云官方一模一样的数据，然后把端口改为`5000`，然后下载本项目的依赖，启动即可。
17 |
18 | 本人是学友哥的忠实粉丝，绰号达州小歌神😏😂🤣
19 | 
20 | .png '预览')
21 | .png '预览')
22 | .png '预览')
23 |
24 | > 补充说明，本项目还有其他基于音乐后台的项目都依赖与这个下面这个nodejs后台，在此非常感谢这位大神数据支援。
25 |
26 | 网易云的后台地址为
27 |
28 | ## 功能清单
29 |
30 | + 首页展示，基本与官方保持一致，分为**顶部导航**, **轮播**,**热门推荐**,**新碟上架**, **榜单**等主要模块，这些模块某些暂未配上跳转链接。
31 | + 搜素功能，这是目前最丰富的一个功能，从导航栏输入搜素内容后，回车进入搜素也没面，可以得到**单曲**,**歌手**,**专辑**,**视频**,**歌词**,**歌单**,**主播**,**用户**一共8个类型，这是用antd的tabs展示的，内容与官方基本一致，但做了分页优化，官方目前只能搜出一页数据。目前单曲，专辑，视频三个板块已经配好链接可以点击进入，其他的待后面慢慢配置。
32 | + 播放功能，作为一个music为主题的应用，播放是最基本也是最重要的，本人作文学友粉丝，设置了用户进入后，默认配置了一首 **咖啡** 作为保底曲目，然后通过搜素功能或者其他模块，点击一首歌曲的icon就能play了，也支持添加到播放列表，然后操作就跟官方一样的，可以到专辑里面播放整张专辑的歌曲。
33 | + MV/视频功能，采用原生的video，实现与官方基本一致MV播放器，可以切换分辨率，音量，进度条等，但需要说明的是，由于接口并未返回视频的所有码率，所以视频没有切换分辨率功能，MV支持。
34 | + 歌手模块一共分为四大板块，包括歌曲，专辑，mv，歌手简介，并支持分页功能，同时会推荐相似歌手。
35 | + 还有更多功能在持续更新中...，欢迎issue。
--------------------------------------------------------------------------------