feat: 新增回退和前进功能、优化了icon组件的封装。

public/index.html

@@ -6,7 +6,7 @@
   <meta name="renderer" content="webkit" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
   <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-  <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_777085_r8nljnmozb.css" />
+  <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_777085_ya9jkmeesko.css" />
   <title>vue-netease-muisc</title>
 </head>
 

src/base/highlight-text.vue

@@ -0,0 +1,39 @@
+<script type="text/ecmascript-6">
+export default {
+  name: "HighlightText",
+  props: ['text', 'highlightText'],
+  methods: {
+    genHighlight() {
+      if (!this.highlightText) {
+        return <span>{this.text}</span>
+      }
+      const titleToMatch = this.text.toLowerCase()
+      const keyWord = this.highlightText.toLowerCase()
+      const matchIndex = titleToMatch.indexOf(keyWord);
+      const beforeStr = this.text.substr(0, matchIndex);
+      const afterStr = this.text.substr(matchIndex + keyWord.length);
+      const hitStr = this.text.substr(matchIndex, keyWord.length);
+      const titleSpan = matchIndex > -1 ? (
+        <span>
+          {beforeStr}
+          <span class="high-light-text">{hitStr}</span>
+          {afterStr}
+        </span>
+      ) : this.text;
+      return <span>{titleSpan}</span>;
+    },
+  },
+  components: {
+
+  },
+  render() {
+    return this.genHighlight()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.high-light-text {
+  color: $blue;
+}
+</style>

src/base/icon.vue

@@ -1,17 +1,27 @@
-<template>
-  <i
-    @click="onClick"
-    class="iconfont icon-component"
-    :class="getIconCls()"
-    :style="getIconStyle()"
-  />
-</template>
+
 
 <script type="text/ecmascript-6">
 import { toRem } from '@/utils'
 export default {
   name: "Icon",
-  props: ["size", "type", "color"],
+  props: {
+    size: {
+      type: Number,
+      default: 16
+    },
+    type: {
+      type: String,
+      required: true,
+    },
+    color: {
+      type: String,
+      default: '',
+    },
+    backdrop: {
+      type: Boolean,
+      default: false
+    }
+  },
   methods: {
     getIconCls() {
       let cls = `icon-${this.type}`
@@ -33,11 +43,42 @@ export default {
       }
       return retStyle
     }
+  },
+  render() {
+    const Icon = (
+      <i
+        on={{
+          click: this.onClick
+        }}
+        class={`iconfont icon-component ${this.getIconCls()}`}
+        style={this.getIconStyle()}
+      />
+    )
+    if (this.backdrop) {
+      const backDropSizeRatio = 1.56
+      const backDropSize = toRem(backDropSizeRatio * this.size)
+      return (
+        <span style={{ width: backDropSize, height: backDropSize }} class="backdrop">
+          {Icon}
+        </span>
+      )
+    }
+    return Icon
   }
 }
 </script>
 
 <style lang="scss">
+.backdrop {
+  display: inline-block;
+  @include flex-center;
+  border-radius: 50%;
+
+  &:hover {
+    background: var(--round-hover-bgcolor);
+  }
+}
+
 .icon-component {
   color: var(--font-color-white);
   cursor: pointer;

src/components/routes-history.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="routes-history">
+    <Icon
+      class="icon"
+      :backdrop="true"
+      type="back"
+      @click="back"
+    />
+    <Icon
+      :backdrop="true"
+      type="forward"
+      @click="forward"
+    />
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+
+export default {
+  methods: {
+    back() {
+      this.$router.back()
+    },
+    forward() {
+      this.$router.forward()
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.routes-history {
+  display: flex;
+  align-items: center;
+
+  .icon {
+    margin-right: 16px;
+  }
+}
+</style>

src/components/search.vue

@@ -37,7 +37,10 @@
                 class="item"
                 @click="normalizedSuggest.onClick(item)"
               >
-                {{normalizedSuggest.renderName ? normalizedSuggest.renderName(item) : item.name}}
+                <HighlightText
+                  :text="normalizedSuggest.renderName ? normalizedSuggest.renderName(item) : item.name"
+                  :highlightText="searchKeyword"
+                />
               </li>
             </ul>
           </div>

src/components/song-table.vue

@@ -13,17 +13,16 @@ export default {
       type: Array,
       default: () => []
     },
-    highLightText: {
+    highlightText: {
       type: String,
       default: '',
     }
   },
   data() {
     const commonHighLightSlotScopes = {
       default: (scope) => {
-        return (
-          <span>{this.genHighlight(scope.row[scope.column.property])}</span>
-        )
+        const text = scope.row[scope.column.property]
+        return <HighlightText text={text} highlightText={this.highlightText} />
       }
     }
     return {
@@ -106,25 +105,6 @@ export default {
         return 'song-active'
       }
     },
-    genHighlight(title = '') {
-      if (!this.highLightText) {
-        return title
-      }
-      const titleToMatch = title.toLowerCase()
-      const keyWord = this.highLightText.toLowerCase()
-      const matchIndex = titleToMatch.indexOf(keyWord);
-      const beforeStr = title.substr(0, matchIndex);
-      const afterStr = title.substr(matchIndex + keyWord.length);
-      const hitStr = title.substr(matchIndex, keyWord.length);
-      const titleSpan = matchIndex > -1 ? (
-        <span>
-          {beforeStr}
-          <span class="high-light-text">{hitStr}</span>
-          {afterStr}
-        </span>
-      ) : title;
-      return titleSpan;
-    },
     ...mapMutations(['setPlaylist']),
     ...mapActions(["startSong"])
   },

src/components/theme.vue

@@ -20,6 +20,7 @@
         </div>
       </div>
       <Icon
+        :backdrop="true"
         slot="reference"
         type="skin"
       />

src/layout/header.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="header">
     <div class="left">
-      <div
-        class="buttons"
-        @click="onClickLogo"
-      >
-        <div class="mac-button red">
+      <div class="buttons">
+        <div
+          class="mac-button red"
+          @click="onClickLogo"
+        >
         </div>
         <div
           class="mac-button yellow"
@@ -32,10 +32,17 @@
         v-if="isPlayerShow"
         class="shrink-player"
       >
-        <Icon type="down" />
+        <Icon
+          :backdrop="true"
+          type="down"
+        />
       </div>
-      <div class="actions">
-
+      <!-- 路由记录器 -->
+      <div
+        v-show="!isPlayerShow"
+        class="history"
+      >
+        <RoutesHistory />
       </div>
     </div>
     <div class="right">
@@ -50,6 +57,7 @@
 <script type="text/ecmascript-6">
 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'
 
@@ -77,7 +85,7 @@ export default {
   computed: {
     ...mapState(["isPlayerShow"])
   },
-  components: { Theme, Search }
+  components: { Theme, Search, RoutesHistory }
 }
 </script>
 
@@ -134,10 +142,14 @@ export default {
 
     .shrink-player {
       position: relative;
-      top: -3px;
+      top: -6px;
       margin-left: 16px;
     }
 
+    .history {
+      margin-left: 65px;
+    }
+
     .actions {
       margin-left: 70px;
     }

src/page/playlist-detail/index.vue

@@ -36,7 +36,7 @@
       v-show="activeTab === SONG_IDX"
       class="table"
       :songs="filteredSongs"
-      :highLightText="searchValue"
+      :highlightText="searchValue"
     />
     <div class="comments">
       <Comments

src/style/themes/variables-white.js

@@ -9,6 +9,9 @@ export default {
   ['--font-color-grey-shallow']: '#BEBEBE',
   ['--border']: '#f2f2f1',
   ['--scrollbar-color']: '#D0D0D0',
+  ['--round-hover-bgcolor']: '#EBEBEB',
+
+  //header
   ['--header-bgcolor']: '#F9F9F9',
 
   // menu

src/style/themes/variables.js

@@ -8,11 +8,10 @@ export default {
   ['--font-color-grey']: '#5C5C5C',
   ['--font-color-grey-shallow']: '#727272',
   ['--border']: '#3F3F3F',
-
   ['--scrollbar-color']: '#3a3a3a',
+  ['--round-hover-bgcolor']: '#373737',
 
   //header
-  ['--header-height']: '50px',
   ['--header-bgcolor']: '#252525',
 
   //menu