feat: 搜索框功能

package.json

@@ -11,6 +11,7 @@
     "axios": "^0.19.0",
     "core-js": "^2.6.5",
     "element-ui": "^2.10.1",
+    "good-storage": "^1.1.0",
     "vue": "^2.6.10",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1"

src/api/search.js

@@ -0,0 +1,5 @@
+import { request } from "@/utils/axios";
+
+export const getSearchHot = () => request.get('/search/hot')
+
+export const getSearchSuggest = (keywords) => request.get('/search/suggest', {params: { keywords } })

src/base/button.vue

@@ -0,0 +1,32 @@
+<template>
+  <div
+    @click="onClick"
+    class="n-button"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+export default {
+  methods: {
+    onClick(e) {
+      this.$emit('click', e)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.n-button {
+  display: inline-block;
+  padding: 5px 16px;
+  border: 1px solid var(--button-border-color);
+  border-radius: 2px;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--button-hover-bgcolor);
+  }
+}
+</style>

src/base/leave-hide.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+import { hasParent } from '@/utils/dom'
+
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    reserveDoms: {
+      type: Array
+    }
+  },
+  methods: {
+    clickEvent(e) {
+      const triggerElement = e.target
+      // 触发点击事件的dom是否是playlist的子节点
+      const firstChildElm = this.$slots.default[0].elm
+      if (!hasParent(
+        triggerElement,
+        this.reserveDoms
+          ? this.reserveDoms.concat(firstChildElm)
+          : firstChildElm
+      )) {
+        this.$emit('clickOutside')
+      }
+    },
+    bindClick() {
+      document.addEventListener('mousedown', this.clickEvent)
+    },
+    removeClick() {
+      document.removeEventListener('mousedown', this.clickEvent)
+    },
+  },
+  watch: {
+    show(newShow) {
+      setTimeout(() => {
+        if (newShow) {
+          this.bindClick()
+        } else {
+          this.removeClick()
+        }
+      }, 0);
+    }
+  },
+  beforeDestroy() {
+    this.removeClick()
+  },
+}
+</script>
+
+<style scoped>
+</style>

src/base/progress-bar.vue

@@ -93,7 +93,7 @@ export default {
     position: relative;
     top: 14px;
     height: 2px;
-    background: rgba(0, 0, 0, 0.3);
+    background: var(--progress-bgcolor);
 
     .progress {
       position: absolute;

src/components/mini-player.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="mini-player">
+  <div
+    id="mini-player"
+    class="mini-player"
+  >
     <!-- 歌曲内容 -->
     <div class="song">
       <template v-if="hasCurrentSong">
@@ -47,12 +50,22 @@
     </div>
 
     <div class="mode">
-      <Icon
-        class="icon"
-        type="playlist"
-        :size="18"
-        @click.native="togglePlaylistShow"
-      />
+      <el-popover
+        placement="top"
+        width="160"
+        :value="isPlaylistPromptShow"
+        trigger="manual"
+      >
+        <p>已加入歌单</p>
+        <Icon
+          slot="reference"
+          class="icon"
+          type="playlist"
+          :size="18"
+          @click.native="togglePlaylistShow"
+        />
+      </el-popover>
+
       <volume @volumeChange="onVolumeChange" />
     </div>
     <div
@@ -67,7 +80,7 @@
     <audio
       ref="audio"
       :src="currentSong.url"
-      @play="ready"
+      @canplay="ready"
       @ended="end"
       @timeupdate="updateTime"
     ></audio>
@@ -103,7 +116,9 @@ export default {
     },
     play() {
       if (this.songReady) {
-        this.audio.play()
+        this.audio.play().catch(() => {
+          this.setPlayingState(false)
+        })
       }
     },
     pause() {
@@ -145,19 +160,27 @@ export default {
       }
       if (oldSong) {
         if (newSong.id === oldSong.id) {
+          this.currentTime = 0
+          this.audio.currentTime = 0
+          this.play()
           return
         }
       }
+      this.songReady = false
       if (this.timer) {
         clearTimeout(this.timer)
       }
       this.timer = setTimeout(() => {
+        this.setPlayingState(true)
         this.play()
       }, 1000)
     },
     playing(newPlaying) {
+      if (!this.songReady) {
+        return
+      }
       this.$nextTick(() => {
-        newPlaying ? this.audio.play() : this.audio.pause()
+        newPlaying ? this.play() : this.pause()
       })
     }
   },
@@ -176,7 +199,7 @@ export default {
       const { durationSecond } = this.currentSong
       return Math.min(this.currentTime / durationSecond, 1)
     },
-    ...mapState(["currentSong", "playing", "isPlaylistShow"]),
+    ...mapState(["currentSong", "playing", "isPlaylistShow", "isPlaylistPromptShow"]),
     ...mapGetters(["prevSong", "nextSong"])
   },
   components: {

src/components/play-list-card.vue

@@ -56,7 +56,7 @@ export default {
       transition: all 0.3s;
 
       .desc {
-        color: var(--white);
+        color: $white;
         font-size: $font-size-sm;
       }
     }
@@ -68,7 +68,7 @@ export default {
       bottom: 4px;
       font-size: 24px;
       transition: all 0.3s;
-      color: var(--font-color-white);
+      color: $white;
     }
 
     &:hover {

src/components/playlist.vue

@@ -1,50 +1,73 @@
 <template>
-  <div
-    v-show="isPlaylistShow"
-    class="playlist"
+  <LeaveHide
+    @clickOutside="setPlaylistShow(false)"
+    :show="isPlaylistShow"
+    :reserveDoms="reserveDoms"
   >
-    <div class="header">
-      <p class="total">总共{{playlist.length}}首</p>
-    </div>
-    <template>
-      <div
-        v-if="playlist.length"
-        class="song-table-wrap"
-      >
-        <SongTable
-          :songs="playlist"
-          :hideColumns="['index', 'albumName']"
-        />
-      </div>
-      <div
-        class="empty"
-        v-else
-      >
-        你还没有添加任何歌曲
+    <div
+      ref="playlist"
+      v-show="isPlaylistShow"
+      class="playlist"
+    >
+      <div class="header">
+        <p class="total">总共{{playlist.length}}首</p>
       </div>
-    </template>
-  </div>
+      <template>
+        <div
+          v-if="playlist.length"
+          class="song-table-wrap"
+        >
+          <SongTable
+            :songs="playlist"
+            :hideColumns="['index', 'albumName']"
+          />
+        </div>
+        <div
+          class="empty"
+          v-else
+        >
+          你还没有添加任何歌曲
+        </div>
+      </template>
+    </div>
+  </LeaveHide>
+
 </template>
 
 <script type="text/ecmascript-6">
-import { mapState } from 'vuex'
+import { mapState, mapMutations } from 'vuex'
+import LeaveHide from '@/base/leave-hide'
 import SongTable from './song-table'
 export default {
+  mounted() {
+    // 点击需要保留播放器的dom
+    this.reserveDoms = [
+      this.$refs.playlist,
+      document.getElementById('mini-player'),
+      ...document.querySelectorAll('.el-loading-mask')
+    ]
+  },
   data() {
     return {
-
+      reserveDoms: null
     }
   },
+  methods: {
+    ...mapMutations(['setPlaylistShow'])
+  },
   computed: {
     ...mapState(['isPlaylistShow', 'playlist'])
   },
   components: {
-    SongTable
+    SongTable,
+    LeaveHide
   }
 }
 </script>
 
 <style lang="scss" scoped>
+@import "~@/style/element-overwrite.scss";
+
 .playlist {
   position: fixed;
   top: 0;
@@ -56,6 +79,7 @@ export default {
   background: var(--playlist-bgcolor);
   z-index: $playlist-z-index;
   @include box-shadow;
+  @include el-table-theme(var(--playlist-bgcolor));
 
   .header {
     padding: 16px 0;