增加了一些交互,解决了一些bug

coderwhy · coderwhy · commit f17b4b7e8a7c · 2020-08-18T20:48:23.000+08:00
diff --git a/src/assets/css/base.css b/src/assets/css/base.css
@@ -127,3 +127,8 @@ body, textarea, select, input, button {
   background-color: rgba(0, 0, 0, .5);
   color: #fff;
 }
+
+span:hover.link {
+  text-decoration: underline;
+  cursor: pointer;
+}
diff --git a/src/components/theme-header-rcm/index.js b/src/components/theme-header-rcm/index.js
@@ -1,23 +1,24 @@
 import React, {memo} from 'react';
 import PropTypes from "prop-types";
 
+import { Link } from 'react-router-dom';
 import {
   HeaderWrapper
 } from "./style";
 
 const HYThemeHeaderRCM = memo(function(props) {
-  const { title, keywords } = props;
+  const { title, keywords, moreLink, keywordClick } = props;
 
   return (
     <HeaderWrapper className="sprite_02">
       <div className="left">
         <h3 className="title">{title}</h3>
         <div className="keyword">
           {
-            keywords.map((item) => {
+            keywords.map((item, index) => {
               return (
                 <div className="item" key={item}>
-                  <a href="/todo">{item}</a>
+                  <span className="link" onClick={e => keywordClick(item)}>{item}</span>
                   <span className="divider">|</span>
                 </div>
               )
@@ -26,7 +27,7 @@ const HYThemeHeaderRCM = memo(function(props) {
         </div>
       </div>
       <div className="right">
-        <a href="todo">更多</a>
+        <Link to={moreLink}>更多</Link>
         <i className="icon sprite_02"></i>
       </div>
     </HeaderWrapper>
diff --git a/src/components/top-ranking/index.js b/src/components/top-ranking/index.js
@@ -1,63 +1,61 @@
 import React, { memo } from 'react';
 import { useDispatch } from 'react-redux';
 
+import { getSizeImage } from '@/utils/format-utils';
 import { getSongDetailAction } from '@/pages/player/store';
 
-import {
-  getSizeImage
-} from "@/utils/format-utils";
-
-import {
-  TopRankingWrapper
-} from "./style";
+import { TopRankingWrapper } from './style';
 
 export default memo(function HYTopRanking(props) {
   // props and state
   const { info } = props;
-  const tracks = (info.tracks && info.tracks.slice(0, 10)) || [];
+  const { tracks = [] } = info;
 
   // redux hooks
   const dispatch = useDispatch();
 
-  // handle code
-  const playItem = (id) => {
-    dispatch(getSongDetailAction(id));
-  };
+  // other handle
+  const playMusic = (item) => {
+    dispatch(getSongDetailAction(item.id));
+  }
 
   return (
     <TopRankingWrapper>
       <div className="header">
         <div className="image">
-          <img src={getSizeImage(info.coverImgUrl, 80)} alt="" />
-          <a href="/abc" className="image_cover">top</a>
+          <img src={getSizeImage(info.coverImgUrl)} alt="" />
+          <a href="/todo" className="image_cover">ranking</a>
         </div>
         <div className="info">
-          <h3>{info.name}</h3>
-          <div className="operate">
-            <a href="/play" className="sprite_02 btn play">播放</a>
-            <a href="/favor" className="sprite_02 btn favor">收藏</a>
+          <a href="/todo">{info.name}</a>
+          <div>
+            <button className="btn play sprite_02"></button>
+            <button className="btn favor sprite_02"></button>
           </div>
         </div>
       </div>
       <div className="list">
         {
-          tracks.map((item, index) => {
+          tracks.slice(0, 10).map((item, index) => {
             return (
               <div key={item.id} className="list-item">
                 <div className="rank">{index + 1}</div>
-                <div className="name">{item.name}</div>
-                <div className="operate">
-                  <button className="sprite_02 btn play" onClick={e => playItem(item.id)}></button>
-                  <button className="sprite_icon2 btn addto"></button>
-                  <button className="sprite_02 btn favor"></button>
+                <div className="info">
+                  <span className="name text-nowrap">{item.name}</span>
+                  <div className="operate">
+                    <button className="btn sprite_02 play" 
+                            onClick={e => playMusic(item)}></button>
+                    <button className="btn sprite_icon2 addto"></button>
+                    <button className="btn sprite_02 favor"></button>
+                  </div>
                 </div>
               </div>
             )
           })
         }
       </div>
       <div className="footer">
-        <a href="/abc">查看全部&gt;</a>
+        <a href="/todo">查看全部 &gt;</a>
       </div>
     </TopRankingWrapper>
   )
diff --git a/src/components/top-ranking/style.js b/src/components/top-ranking/style.js
@@ -23,12 +23,19 @@ export const TopRankingWrapper = styled.div`
     .info {
       margin: 5px 0 0 10px;
 
+      a {
+        font-size: 14px;
+        color: #333;
+        font-weight: 700;
+      }
+
       .btn {
         display: inline-block;
         text-indent: -9999px;
         width: 22px;
         height: 22px;
         margin: 8px 10px 0 0;
+        cursor: pointer;
       }
 
       .play {
@@ -59,39 +66,49 @@ export const TopRankingWrapper = styled.div`
         font-size: 16px;
       }
 
-      .name {
+      .info {
         color: #000;
-      }
-
-      .operate {
-        position: absolute;
+        width: 170px;
+        height: 17px;
+        line-height: 17px;
         display: flex;
-        align-items: center;
-        right: 0;
-        display: none;
-
-        .btn {
-          width: 17px;
-          height: 17px;
-          margin-right: 8px;
-          cursor: pointer;
-        }
+        justify-content: space-between;
 
-        .play {
-          background-position: -267px -268px;
+        .name {
+          flex: 1;
         }
 
-        .addto {
-          position: relative;
-          top: 2px;
-          background-position: 0 -700px;
-        }
-
-        .favor {
-          background-position: -297px -268px;
+        .operate {
+          display: flex;
+          align-items: center;
+          display: none;
+          width: 82px;
+
+          .btn {
+            width: 17px;
+            height: 17px;
+            margin-left: 8px;
+            cursor: pointer;
+          }
+
+          .play {
+            background-position: -267px -268px;
+          }
+
+          .addto {
+            position: relative;
+            top: 2px;
+            background-position: 0 -700px;
+          }
+
+          .favor {
+            background-position: -297px -268px;
+          }
         }
       }
 
+      
+
       &:hover {
         .operate {
           display: block;
diff --git a/src/pages/discover/c-pages/recommend/c-cpns/hot-recommend/index.js b/src/pages/discover/c-pages/recommend/c-cpns/hot-recommend/index.js
@@ -1,5 +1,6 @@
-import React, { useEffect, memo } from 'react';
+import React, { useEffect, memo, useCallback } from 'react';
 import { useDispatch, useSelector, shallowEqual } from "react-redux";
+import { useHistory } from 'react-router-dom';
 
 import {
   getRecommend
@@ -18,14 +19,22 @@ export default memo(function HYHotRecommend() {
     recommends: state.getIn(["recommend", "hotRecommends"])
   }), shallowEqual);
   const dispatch = useDispatch();
+  const history = useHistory();
 
   useEffect(() => {
     dispatch(getRecommend())
   }, [dispatch]);
 
+  const keywordClick = useCallback((keyword) => {
+    history.push({pathname: "/discover/songs", cat: keyword});
+  }, [history]);
+
   return (
     <RecommendWrapper>
-      <HYThemeHeaderRCM title="热门推荐" keywords={["华语", "流行", "摇滚", "民谣", "电子"]}/>
+      <HYThemeHeaderRCM title="热门推荐" 
+                        keywords={["华语", "流行", "摇滚", "民谣", "电子"]}
+                        moreLink="/discover/songs"
+                        keywordClick={keywordClick}/>
       <div className="recommend-list">
         {
           state.recommends.slice(0, 8).map((item, index) => {
diff --git a/src/pages/discover/c-pages/recommend/c-cpns/new-album/index.js b/src/pages/discover/c-pages/recommend/c-cpns/new-album/index.js
@@ -27,7 +27,7 @@ export default memo(function HYNewAlbum(props) {
 
   return (
     <AlbumWrapper>
-      <HYThemeHeaderRCM title="新碟上架" />
+      <HYThemeHeaderRCM title="新碟上架" moreLink="/discover/album"/>
       <div className="content">
         <div className="arrow arrow-left sprite_02" 
             onClick={e => carouselRef.current.prev()}></div>
diff --git a/src/pages/discover/c-pages/recommend/c-cpns/ranking-list/index.js b/src/pages/discover/c-pages/recommend/c-cpns/ranking-list/index.js
@@ -29,7 +29,7 @@ export default memo(function HYRankingList() {
 
   return (
     <RankingWrapper>
-      <HYThemeHeaderRCM title="榜单" />
+      <HYThemeHeaderRCM title="榜单" moreLink="/discover/ranking"/>
       <div className="tops">
         <HYTopRanking info={state.topUpList}/>
         <HYTopRanking info={state.topNewList}/>
diff --git a/src/pages/discover/c-pages/songs/c-cpns/songs-category/index.js b/src/pages/discover/c-pages/songs/c-cpns/songs-category/index.js
@@ -26,7 +26,7 @@ export default memo(function HYSongsCategory() {
     <CategoryWrapper>
       <div className="arrow sprite_icon"></div>
       <div className="all">
-        <a href="/#" onClick={e => selectCategory("全部")}>全部风格</a>
+        <span className="link" onClick={e => selectCategory("全部")}>全部风格</span>
       </div>
       <div className="category">
         {
@@ -42,7 +42,7 @@ export default memo(function HYSongsCategory() {
                     item.subs.map(sItem => {
                       return (
                         <div className="item" key={sItem.name}>
-                          <a href={() => false} onClick={e => selectCategory(sItem.name)}>{sItem.name}</a>
+                          <span className="link" onClick={e => selectCategory(sItem.name)}>{sItem.name}</span>
                           <span className="divider">|</span>
                         </div>
                       )
diff --git a/src/pages/discover/c-pages/songs/index.js b/src/pages/discover/c-pages/songs/index.js
@@ -1,9 +1,11 @@
 import React, { useEffect, memo } from 'react';
 import { useDispatch } from "react-redux";
+import { useLocation } from 'react-router-dom';
 
 import { 
   getCategory,
-  getSongList
+  getSongList,
+  changeCurrentCategoryAction
 } from "./store/actionCreators";
 
 import HYSongsHeader from "./c-cpns/songs-header";
@@ -15,6 +17,11 @@ import {
 export default memo(function HYSongs() {
   // redux
   const dispatch = useDispatch();
+  const cat = useLocation().cat;
+
+  useEffect(() => {
+    dispatch(changeCurrentCategoryAction(cat));
+  }, [dispatch, cat]);
 
   // hooks
   useEffect(() => {
diff --git a/src/pages/player/store/reducer.js b/src/pages/player/store/reducer.js
diff --git a/src/utils/lrc-parse.js b/src/utils/lrc-parse.js

Original file line number	Diff line number	Diff line change
`@@ -127,3 +127,8 @@ body, textarea, select, input, button {`
`127`	`127`	`background-color: rgba(0, 0, 0, .5);`
`128`	`128`	`color: #fff;`
`129`	`129`	`}`
	`130`	`+`
	`131`	`+span:hover.link {`
	`132`	`+ text-decoration: underline;`
	`133`	`+ cursor: pointer;`
	`134`	`+}`