feat: 完善了一些mv入口。

README.md

@@ -18,11 +18,14 @@
   * 音乐列表
   * 评论区
 * 最新音乐
-* cd页
+* cd页 (2.0新增)
   * 歌词
   * 评论区
   * 推荐歌单
   * 推荐歌曲
+* mv页（3.0新增）
+  * 评论区
+  * 推荐mv  
 * 登录(网易云uid登录)
   * 获取用户信息
   * 获取收藏歌单

public/index.html

@@ -8,7 +8,7 @@
     <link
       rel="stylesheet"
       type="text/css"
-      href="//at.alicdn.com/t/font_777085_3k6inkwqzg.css"
+      href="//at.alicdn.com/t/font_777085_o3jdopcr36.css"
     />
     <!-- 百度统计 -->
     <script>

src/base/video-player.vue

@@ -22,7 +22,8 @@ export default {
         url: this.url,
         videoInit: true,
         lang: "zh-cn",
-        width: "100%"
+        width: "100%",
+        playbackRate: [0.5, 0.75, 1, 1.5, 2]
       })
     }
   },

src/components/comment.vue

@@ -75,6 +75,8 @@ export default {
 
     .comment-text {
       .username {
+        display: inline-block;
+        margin-right: 4px;
         color: $blue;
       }
 

src/components/player.vue

@@ -32,7 +32,14 @@
             </div>
           </div>
           <div class="right">
-            <p class="name">{{currentSong.name}}</p>
+            <div class="name-wrap">
+              <p class="name">{{currentSong.name}}</p>
+              <span
+                @click="onGoMv"
+                class="mv-tag"
+                v-if="currentSong.mvId"
+              >MV</span>
+            </div>
             <div class="desc">
               <div class="desc-item">
                 <span class="label">歌手：</span>
@@ -141,10 +148,9 @@
 </template>
 
 <script type="text/ecmascript-6">
-import { getLyric, getSimiSongs } from "@/api"
-import { getSimiPlaylists } from "@/api"
+import { getLyric, getSimiSongs, getSimiPlaylists } from "@/api"
 import lyricParser from "@/utils/lrcparse"
-import { debounce, isDef, createSong } from "@/utils"
+import { debounce, isDef, createSong, goMvWithCheck } from "@/utils"
 import Comments from "@/components/comments"
 import { mapState, mapMutations, mapActions } from "@/store/helper/music"
 
@@ -201,10 +207,18 @@ export default {
           id,
           name,
           artists,
+          mvid,
           album: { picUrl },
           duration
         } = song
-        return createSong({ id, name, artists, duration, img: picUrl })
+        return createSong({
+          id,
+          name,
+          artists,
+          duration,
+          img: picUrl,
+          mvId: mvid
+        })
       })
     },
     getPlayerShowCls() {
@@ -259,6 +273,10 @@ export default {
       this.startSong(song)
       this.addToPlaylist(song)
     },
+    onGoMv() {
+      this.setPlayerShow(false)
+      goMvWithCheck(this.currentSong.mvId)
+    },
     resizeScroller: debounce(function() {
       this.$refs.scroller.getScroller().refresh()
     }, 500),
@@ -473,11 +491,25 @@ $img-outer-d: 300px;
       .right {
         flex: 1;
         padding-top: 45px;
-
-        .name {
-          font-size: $font-size-title-lg;
-          color: var(--font-color-white);
+        .name-wrap {
+          display: flex;
+          align-items: center;
           margin-bottom: 16px;
+
+          .name {
+            font-size: $font-size-title-lg;
+            color: var(--font-color-white);
+          }
+
+          .mv-tag {
+            display: inline-block;
+            margin-left: 8px;
+            padding: 2px;
+            border: 1px solid currentColor;
+            border-radius: 2px;
+            color: $theme-color;
+            cursor: pointer;
+          }
         }
 
         .artists {

src/components/search.vue

@@ -88,12 +88,12 @@
 </template>
 
 <script type="text/ecmascript-6">
-import storage from 'good-storage'
+import storage from "good-storage"
 import { mapActions, mapMutations } from "@/store/helper/music"
 import { getSearchHot, getSearchSuggest } from "@/api"
 import { createSong, genArtistisText, debounce } from "@/utils"
 
-const SEARCH_HISTORY_KEY = '__search_history__'
+const SEARCH_HISTORY_KEY = "__search_history__"
 export default {
   async created() {
     const {
@@ -118,7 +118,7 @@ export default {
     onBlur() {
       this.searchPanelShow = false
     },
-    onInput: debounce(function (value) {
+    onInput: debounce(function(value) {
       if (!value.trim()) {
         return
       }
@@ -147,6 +147,7 @@ export default {
         name,
         artists,
         duration,
+        mvid,
         album: { id: albumId, name: albumName }
       } = item
       const song = createSong({
@@ -155,7 +156,8 @@ export default {
         artists,
         duration,
         albumId,
-        albumName
+        albumName,
+        mvId: mvid
       })
       this.startSong(song)
       this.addToPlaylist(song)
@@ -165,8 +167,12 @@ export default {
       this.$router.push(`/playlist/${id}`)
       this.searchPanelShow = false
     },
+    onClickMv(mv) {
+      const { id } = mv
+      this.$router.push(`/mv/${id}`)
+    },
     ...mapMutations(["setPlaylist"]),
-    ...mapActions(["startSong", 'addToPlaylist'])
+    ...mapActions(["startSong", "addToPlaylist"])
   },
   computed: {
     suggestShow() {
@@ -181,7 +187,7 @@ export default {
       return [
         {
           title: "单曲",
-          icon: 'music',
+          icon: "music",
           data: this.suggest.songs,
           renderName(song) {
             return `${song.name} - ${genArtistisText(song.artists)}`
@@ -190,13 +196,22 @@ export default {
         },
         {
           title: "歌单",
-          icon: 'playlist',
+          icon: "playlist",
           data: this.suggest.playlists,
           onClick: this.onClickPlaylist.bind(this)
+        },
+        {
+          title: "mv",
+          icon: "mv",
+          data: this.suggest.mvs,
+          renderName(mv) {
+            return `${mv.name} - ${genArtistisText(mv.artists)}`
+          },
+          onClick: this.onClickMv.bind(this)
         }
       ].filter(item => item.data && item.data.length)
     }
-  },
+  }
 }
 </script>
 

src/components/song-table.vue

@@ -2,7 +2,8 @@
 <script>
 import ElTable from "element-ui/lib/table"
 import { mapMutations, mapActions, mapState } from "@/store/helper/music"
-import { pad } from "@/utils"
+import { pad, notify, goMvWithCheck } from "@/utils"
+import { getMvDetail } from "@/api"
 
 export default {
   props: {
@@ -71,18 +72,35 @@ export default {
           label: "音乐标题",
           labelClassName: "title-th",
           className: "title-td",
-          scopedSlots: this.renderNameDesc
-            ? {
-                default: scope => {
-                  return (
-                    <div class="song-table-cell">
-                      {commonHighLightSlotScopes.default(scope)}
-                      {this.renderNameDesc(scope)}
-                    </div>
-                  )
-                }
+          scopedSlots: {
+            default: scope => {
+              const {
+                row: { mvId }
+              } = scope
+
+              const onGoMv = async e => {
+                e.stopPropagation()
+                goMvWithCheck(mvId)
               }
-            : commonHighLightSlotScopes
+
+              return (
+                <div class="song-table-cell">
+                  {commonHighLightSlotScopes.default(scope)}
+
+                  {mvId ? (
+                    <Icon
+                      class="mv-icon"
+                      onClick={onGoMv}
+                      type="mv"
+                      color="theme"
+                    />
+                  ) : null}
+
+                  {this.renderNameDesc ? this.renderNameDesc(scope) : null}
+                </div>
+              )
+            }
+          }
         },
         {
           prop: "artistsText",
@@ -244,6 +262,12 @@ function genPropsAndAttrs(rawAttrs, componentProps) {
 
   .song-table-cell {
     @include text-ellipsis;
+    display: flex;
+    align-items: center;
+
+    .mv-icon {
+      margin-left: 4px;
+    }
   }
 }
 </style>

src/layout/header.vue

@@ -5,7 +5,12 @@
         <div
           @click="onClickLogo"
           class="mac-button red"
-        ></div>
+        >
+          <Icon
+            :size="9"
+            type="home"
+          />
+        </div>
         <div
           @click="exitFullscreen"
           class="mac-button yellow"
@@ -58,7 +63,7 @@ import Theme from "@/components/theme"
 import Search from "@/components/search"
 import RoutesHistory from "@/components/routes-history"
 import { mapState, mapMutations } from "@/store/helper/music"
-import { requestFullScreen, exitFullscreen, isFullscreen } from '@/utils'
+import { requestFullScreen, exitFullscreen, isFullscreen } from "@/utils"
 
 export default {
   methods: {

src/page/discovery/new-songs.vue

@@ -50,12 +50,20 @@ export default {
         id,
         name,
         song: {
+          mvid,
           artists,
           album: { blurPicUrl },
           duration
         }
       } = song
-      return createSong({ id, name, img: blurPicUrl, artists, duration })
+      return createSong({
+        id,
+        name,
+        img: blurPicUrl,
+        artists,
+        duration,
+        mvId: mvid
+      })
     },
     onClickSong(song) {
       const nomalizedSong = this.nomalizeSong(song)

src/page/mv/index.vue

@@ -41,7 +41,7 @@
           :desc="`by ${simiMv.artistName}`"
           :key="simiMv.id"
           :name="simiMv.name"
-          @click="goMv(simiMv.id)"
+          @click="$utils.goMv(simiMv.id)"
           v-for="simiMv in simiMvs"
         >
           <template #img-wrap>
@@ -67,8 +67,6 @@ export default {
   mixins: [hideMenuMixin],
   props: ["id"],
   created() {
-    // 停止播放歌曲
-    this.setPlayingState(false)
     this.init()
   },
   data() {
@@ -101,10 +99,12 @@ export default {
 
       // 加载高清源
       this.$nextTick(() => {
-        this.$refs.video.player.emit(
-          "resourceReady",
-          genResource(this.mvDetail.brs)
-        )
+        const player = this.$refs.video.player
+        player.emit("resourceReady", genResource(this.mvDetail.brs))
+        player.on("play", () => {
+          // 停止播放歌曲
+          this.setPlayingState(false)
+        })
       })
     },
     goMv(id) {

src/page/playlist-detail/index.vue

@@ -91,12 +91,13 @@ export default {
     async genSonglist(playlist) {
       const trackIds = playlist.trackIds.map(({ id }) => id)
       const songDetails = await getSongDetail(trackIds.slice(0, MAX))
-      const songs = songDetails.songs.map(({ id, name, al, ar, dt }) =>
+      const songs = songDetails.songs.map(({ id, name, al, ar, mv, dt }) =>
         createSong({
           id,
           name,
           artists: ar,
           duration: dt,
+          mvId: mv,
           albumName: al.name,
           img: al.picUrl
         })