48 |
49 |
50 | ### 播放详情和搜索功能
51 | 
52 |
53 | ## 目录
54 |
55 | ```
56 | .
57 | ├── build // webpack配置文件
58 | ├── config // webpack的一些配置
59 | ├── dist // 已打包好的目录
60 | ├── koa // koa的一些配置
61 | ├── src // 源码
62 | │ ├── api // 接口管理
63 | │ ├── components // 功能性组件
64 | │ ├── js // 其他js
65 | │ ├── less // 样式文件less
66 | │ ├── pages // 页面级性组件
67 | │ ├── routes // react路由配置
68 | │ ├── store // redux配置
69 | │ ├── App.jsx // 根组件文件
70 | │ ├── main.js // 入口文件
71 | │ ├── static // 静态资源
72 | ├── img // 图片
73 | ├── data // json数据
74 | ├── index.html // 入口html文件
75 | .
76 | ```
77 |
78 | ## 其他说明
79 | 由于接口调用的是酷狗官方的接口，需要跨域，所以项目中使用了代理，配置在config目录和build目录下的dev-server.js中，注意**请不要频繁访问请求，很有可能被酷狗封死接口**
80 |
--------------------------------------------------------------------------------
/src/pages/player.tsx:
--------------------------------------------------------------------------------
1 | import { useDispatch, useSelector } from 'react-redux';
2 | import PlayDetail from './play-detail';
3 | import React, { useState, useRef } from 'react';
4 | import PlayOperate from '../components/play-operate';
5 | import { Toast } from 'antd-mobile';
6 | import { setAudio, setIsPlayed, playSong } from '@src/store/actions';
7 | import { RootState } from '@src/store';
8 | import { IPlaySongInfo } from '@src/types';
9 | import '../less/player.less';
10 | import { AudioEle } from '@src/types';
11 |
12 | const Player: React.FC = () => {
13 | const dispatch = useDispatch();
14 |
15 | const audioSrc = useSelector
156 |
168 | -
157 | {list.map((song, index) => {
158 | const listItemProps = {
159 | onPlay,
160 | song,
161 | index,
162 | active: view === type && index === curPlaySong.index && isPlayed,
163 | };
164 | return