diff --git a/package.json b/package.json
index 2d10f74..da26af4 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,8 @@
     "@vue/cli-service": "^3.9.0",
     "babel-eslint": "^10.0.1",
     "babel-plugin-component": "^1.1.1",
+    "commitizen": "^4.0.3",
+    "cz-conventional-changelog": "^3.0.2",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
     "node-sass": "^4.12.0",
diff --git a/public/index.html b/public/index.html
index 30b2f36..3dab75d 100644
--- a/public/index.html
+++ b/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_ya9jkmeesko.css" />
+  <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_777085_l0yuumja9ml.css" />
   <title>vue-netease-muisc</title>
 </head>
 
diff --git a/src/components/mini-player.vue b/src/components/mini-player.vue
index 1682c35..ff4c2d6 100644
--- a/src/components/mini-player.vue
+++ b/src/components/mini-player.vue
@@ -1,19 +1,19 @@
 <template>
   <div
-    id="mini-player"
     class="mini-player"
+    id="mini-player"
   >
     <!-- 歌曲内容 -->
     <div class="song">
       <template v-if="hasCurrentSong">
         <div
-          class="img-wrap"
           @click="togglePlayerShow"
+          class="img-wrap"
         >
           <div class="mask"></div>
           <img
-            class="blur"
             :src="$utils.genImgUrl(currentSong.img, 80)"
+            class="blur"
           />
           <div class="player-control">
             <Icon
@@ -40,66 +40,90 @@
     <!-- 控制台 -->
     <div class="control">
       <Icon
-        class="icon"
-        type="prev"
         :size="24"
         @click="prev"
+        class="icon"
+        type="prev"
       />
       <div
         @click="togglePlaying"
         class="play-icon"
       >
         <Icon
-          :type="playIcon"
           :size="24"
+          :type="playIcon"
         />
       </div>
 
       <Icon
-        class="icon"
-        type="next"
         :size="24"
         @click="next"
+        class="icon"
+        type="next"
       />
     </div>
 
     <div class="mode">
-      <Icon
-        class="icon"
-        type="github"
-        @click="goGitHub"
-      />
+      <!-- 模式 -->
       <el-popover
+        :value="isPlayModePromptShow"
         placement="top"
+        trigger="manual"
         width="160"
+      >
+        <p>{{changePlayModeText}}</p>
+        <Icon
+          :size="20"
+          :type="modeIcon"
+          @click="onChangePlayMode"
+          class="mode-item"
+          slot="reference"
+        />
+      </el-popover>
+      <!-- 播放列表 -->
+      <el-popover
         :value="isPlaylistPromptShow"
+        placement="top"
         trigger="manual"
+        width="160"
       >
         <p>已更新歌单</p>
         <Icon
+          :size="20"
+          @click="togglePlaylistShow"
+          class="mode-item"
           slot="reference"
-          class="icon"
           type="playlist"
-          :size="18"
-          @click="togglePlaylistShow"
         />
       </el-popover>
       <!-- 音量 -->
-      <Volume :volume="volume" @volumeChange="onVolumeChange" />
+      <div class="mode-item">
+        <Volume
+          :volume="volume"
+          @volumeChange="onVolumeChange"
+        />
+      </div>
+      <!-- github -->
+      <Icon
+        :size="20"
+        @click="goGitHub"
+        class="mode-item"
+        type="github"
+      />
     </div>
     <div class="progress-bar-wrap">
       <ProgressBar
+        :disabled="!hasCurrentSong"
         :percent="playedPercent"
         @percentChange="onProgressChange"
-        :disabled="!hasCurrentSong"
       />
     </div>
     <audio
-      ref="audio"
       :src="currentSong.url"
       @canplay="ready"
       @ended="end"
       @timeupdate="updateTime"
+      ref="audio"
     ></audio>
   </div>
 </template>
@@ -109,12 +133,13 @@ import { mapState, mapMutations, mapGetters, mapActions } from "@/store/helper/m
 import ProgressBar from "@/base/progress-bar"
 import Volume from '@/base/volume'
 import Storage from 'good-storage'
-import { VOLUME_KEY } from '@/utils/config'
+import { VOLUME_KEY, playModeMap } from '@/utils'
 
 export default {
   data() {
     return {
       songReady: false,
+      isPlayModePromptShow: false,
       volume: Storage.get(VOLUME_KEY, 1),
     }
   },
@@ -165,6 +190,24 @@ export default {
       this.audio.volume = percent
       Storage.set(VOLUME_KEY, percent)
     },
+    onChangePlayMode() {
+      const modeKeys = Object.keys(playModeMap)
+      const currentModeIndex = modeKeys.findIndex(key => playModeMap[key].code === this.playMode)
+      const nextIndex = (currentModeIndex + 1) % modeKeys.length
+      const nextModeKey = modeKeys[nextIndex]
+      const nextMode = playModeMap[nextModeKey]
+      this.setPlayMode(nextMode.code)
+      this.showPlayModePrompt()
+    },
+    showPlayModePrompt() {
+      this.isPlayModePromptShow = true
+      if (this.playModePromptTimer) {
+        clearTimeout(this.playModePromptTimer)
+      }
+      this.playModePromptTimer = setTimeout(() => {
+        this.isPlayModePromptShow = false
+      }, 1000);
+    },
     togglePlaylistShow() {
       this.setPlaylistShow(!this.isPlaylistShow)
     },
@@ -174,7 +217,7 @@ export default {
     goGitHub() {
       window.open('https://github.com/sl1673495/vue-netease-music')
     },
-    ...mapMutations(["setCurrentTime", "setPlayingState", "setPlaylistShow", "setPlayerShow"]),
+    ...mapMutations(["setCurrentTime", "setPlayingState", "setPlayMode", "setPlaylistShow", "setPlayerShow"]),
     ...mapActions(["startSong"])
   },
   watch: {
@@ -215,6 +258,15 @@ export default {
     playIcon() {
       return this.playing ? "pause" : "play"
     },
+    currentMode() {
+      return playModeMap[this.playMode]
+    },
+    modeIcon() {
+      return this.currentMode.icon
+    },
+    changePlayModeText() {
+      return `切换播放模式：${this.currentMode.name}`
+    },
     audio() {
       return this.$refs.audio
     },
@@ -226,7 +278,7 @@ export default {
     playControlIcon() {
       return this.isPlayerShow ? 'shrink' : 'open'
     },
-    ...mapState(["currentSong", "currentTime", "playing", "isPlaylistShow", "isPlaylistPromptShow", "isPlayerShow"]),
+    ...mapState(["currentSong", "currentTime", "playing", "playMode", "isPlaylistShow", "isPlaylistPromptShow", "isPlayerShow"]),
     ...mapGetters(["prevSong", "nextSong"])
   },
   components: {
@@ -355,7 +407,7 @@ export default {
     justify-content: flex-end;
     flex: 6;
 
-    .icon {
+    .mode-item {
       margin-right: 16px;
     }
   }
diff --git a/src/components/player.vue b/src/components/player.vue
index 27f2026..1ab9371 100644
--- a/src/components/player.vue
+++ b/src/components/player.vue
@@ -17,13 +17,13 @@
               src="@/assets/image/play-bar.png"
             />
             <div
-              ref="disc"
               class="img-outer-border"
+              ref="disc"
             >
               <div
-                ref="discRotate"
                 :class="{rotate: playing}"
                 class="img-outer"
+                ref="discRotate"
               >
                 <div class="img-wrap">
                   <img :src="$utils.genImgUrl(currentSong.img, 400)" />
@@ -32,9 +32,7 @@
             </div>
           </div>
           <div class="right">
-            <p class="name">
-              {{currentSong.name}}
-            </p>
+            <p class="name">{{currentSong.name}}</p>
             <div class="desc">
               <div class="desc-item">
                 <span class="label">歌手：</span>
@@ -44,33 +42,28 @@
             <div
               class="no-lyric"
               v-if="nolyric"
-            >
-              还没有歌词哦~
-            </div>
+            >还没有歌词哦~</div>
             <Scroller
-              v-else
-              ref="scroller"
-              class="lyric-wrap"
               :data="lyric"
-              @init="onInitScroller"
               :options="{disableTouch: true}"
+              @init="onInitScroller"
+              class="lyric-wrap"
+              ref="scroller"
+              v-else
             >
-
               <div>
                 <div
+                  :class="getActiveCls(index)"
                   :key="index"
-                  v-for="(l,index) in lyricWithTranslation"
                   class="lyric-item"
-                  :class="getActiveCls(index)"
                   ref="lyric"
+                  v-for="(l,index) in lyricWithTranslation"
                 >
                   <p
                     :key="contentIndex"
-                    v-for="(content, contentIndex) in l.contents"
                     class="lyric-text"
-                  >
-                    {{content}}
-                  </p>
+                    v-for="(content, contentIndex) in l.contents"
+                  >{{content}}</p>
                 </div>
               </div>
             </Scroller>
@@ -79,8 +72,8 @@
         <div class="bottom">
           <div class="left">
             <Comments
-              ref="comments"
               :id="currentSong.id"
+              ref="comments"
             />
           </div>
           <div
@@ -88,30 +81,28 @@
             v-if="simiPlaylists.concat(simiSongs).length"
           >
             <Loading
-              v-if="simiLoading"
               :loading="simiLoading"
+              v-if="simiLoading"
             />
             <div v-else>
               <div
                 class="simi-playlists"
                 v-if="simiPlaylists.length"
               >
-                <p class="title">
-                  包含这首歌的歌单
-                </p>
+                <p class="title">包含这首歌的歌单</p>
                 <Card
-                  v-for="simiPlaylist in simiPlaylists"
-                  :key="simiPlaylist.id"
                   :img="simiPlaylist.coverImgUrl"
+                  :key="simiPlaylist.id"
                   :name="simiPlaylist.name"
                   @click="onClickPlaylist(simiPlaylist.id)"
+                  v-for="simiPlaylist in simiPlaylists"
                 >
                   <template v-slot:desc>
                     <div class="desc">
                       <Icon
                         :size="12"
-                        type="play"
                         color="shallow"
+                        type="play"
                       />
                       <p class="count">{{$utils.formatNumber(simiPlaylist.playCount)}}</p>
                     </div>
@@ -122,16 +113,14 @@
                 class="simi-songs"
                 v-if="simiSongs.length"
               >
-                <p class="title">
-                  相似歌曲
-                </p>
+                <p class="title">相似歌曲</p>
                 <Card
-                  v-for="simiSong in simiSongs"
-                  :key="simiSong.id"
+                  :desc="simiSong.artistsText"
                   :img="simiSong.img"
+                  :key="simiSong.id"
                   :name="simiSong.name"
-                  :desc="simiSong.artistsText"
                   @click="onClickSong(simiSong)"
+                  v-for="simiSong in simiSongs"
                 >
                   <template v-slot:img-mask>
                     <PlayIcon class="play-icon" />
@@ -144,7 +133,6 @@
       </div>
     </div>
   </transition>
-
 </template>
 
 <script type="text/ecmascript-6">
@@ -277,10 +265,10 @@ export default {
     resizeScroller: debounce(function () {
       this.$refs.scroller.getScroller().refresh()
     }, 500),
-    addListener() {
+    addResizeListener() {
       window.addEventListener("resize", this.resizeScroller)
     },
-    removeListener() {
+    removeResizeListener() {
       window.removeEventListener("resize", this.resizeScroller)
     },
     ...mapMutations(["setPlayerShow"]),
@@ -334,12 +322,12 @@ export default {
       if (show) {
         // 歌词短期内不会变化 所以只拉取相似信息
         this.updateSimi()
-        this.addListener()
+        this.addResizeListener()
         this.$nextTick(() => {
           this.scrollToActiveLyric()
         })
       } else {
-        this.removeListener()
+        this.removeResizeListener()
       }
     },
     playing(newPlaying) {
@@ -411,7 +399,7 @@ $img-outer-d: 300px;
   z-index: $song-detail-z-index;
   overflow: hidden;
   overflow-y: auto;
-  transition: all 0.5s;
+  transition: transform 0.5s;
 
   &.hide {
     transform: translateY(100%);
diff --git a/src/components/search.vue b/src/components/search.vue
index 4e4fdc2..565b6b6 100644
--- a/src/components/search.vue
+++ b/src/components/search.vue
@@ -1,65 +1,60 @@
 <template>
   <div class="search">
     <el-input
-      ref="input"
+      @focus="onFocus"
+      @input="onInput"
       placeholder="搜索"
       prefix-icon="el-icon-search"
+      ref="input"
       v-model="searchKeyword"
-      @input="onInput"
-      @focus="onFocus"
-    >
-    </el-input>
+    ></el-input>
     <LeaveHide
       :reserveDoms="reserveDoms"
-      @clickOutside="searchPanelShow = false"
       :show="searchPanelShow"
+      @clickOutside="searchPanelShow = false"
     >
       <div
-        v-show="searchPanelShow"
         class="search-panel"
+        v-show="searchPanelShow"
       >
         <div
-          v-if="suggestShow"
           class="search-suggest"
+          v-if="suggestShow"
         >
           <div
             :key="index"
-            v-for="(normalizedSuggest, index) in normalizedSuggests"
             class="suggest-item"
+            v-for="(normalizedSuggest, index) in normalizedSuggests"
           >
-            <div class="title">
-              {{normalizedSuggest.title}}
-            </div>
+            <div class="title">{{normalizedSuggest.title}}</div>
             <ul class="list">
               <li
-                v-for="item in normalizedSuggest.data"
                 :key="item.id"
-                class="item"
                 @click="normalizedSuggest.onClick(item)"
+                class="item"
+                v-for="item in normalizedSuggest.data"
               >
                 <HighlightText
-                  :text="normalizedSuggest.renderName ? normalizedSuggest.renderName(item) : item.name"
                   :highlightText="searchKeyword"
+                  :text="normalizedSuggest.renderName ? normalizedSuggest.renderName(item) : item.name"
                 />
               </li>
             </ul>
           </div>
         </div>
         <div
-          v-else
           class="search-hots"
+          v-else
         >
           <div class="block">
             <p class="title">热门搜索</p>
             <div class="tags">
               <NButton
-                class="button"
                 :key="index"
-                v-for="(hot, index) in searchHots"
                 @click="onClickHot(hot)"
-              >
-                {{hot.first}}
-              </NButton>
+                class="button"
+                v-for="(hot, index) in searchHots"
+              >{{hot.first}}</NButton>
             </div>
           </div>
           <div class="block">
@@ -69,19 +64,15 @@
               v-if="searchHistorys.length"
             >
               <NButton
-                class="button"
                 :key="index"
+                class="button"
                 v-for="(history, index) in searchHistorys"
-              >
-                {{history.first}}
-              </NButton>
+              >{{history.first}}</NButton>
             </div>
             <div
               class="empty"
               v-else
-            >
-              暂无搜索历史
-            </div>
+            >暂无搜索历史</div>
           </div>
         </div>
       </div>
diff --git a/src/layout/header.vue b/src/layout/header.vue
index 498cace..09e5978 100644
--- a/src/layout/header.vue
+++ b/src/layout/header.vue
@@ -3,34 +3,33 @@
     <div class="left">
       <div class="buttons">
         <div
-          class="mac-button red"
           @click="onClickLogo"
-        >
-        </div>
+          class="mac-button red"
+        ></div>
         <div
-          class="mac-button yellow"
           @click="exitFullscreen"
+          class="mac-button yellow"
         >
           <Icon
-            type="minus"
             :size="9"
+            type="minus"
           />
         </div>
         <div
-          class="mac-button green"
           @click="fullscreen"
+          class="mac-button green"
         >
           <Icon
-            type="fullscreen"
             :size="9"
+            type="fullscreen"
           />
         </div>
       </div>
       <!-- 缩起播放器 -->
       <div
         @click="onClickDown"
-        v-if="isPlayerShow"
         class="shrink-player"
+        v-if="isPlayerShow"
       >
         <Icon
           :backdrop="true"
@@ -39,8 +38,8 @@
       </div>
       <!-- 路由记录器 -->
       <div
-        v-show="!isPlayerShow"
         class="history"
+        v-show="!isPlayerShow"
       >
         <RoutesHistory />
       </div>
diff --git a/src/store/modules/music/getters.js b/src/store/modules/music/getters.js
index 32990da..d0f77ea 100644
--- a/src/store/modules/music/getters.js
+++ b/src/store/modules/music/getters.js
@@ -1,25 +1,52 @@
+import { playModeMap } from '@/utils/config'
+
 export const currentIndex = (state) => {
   const { currentSong, playlist } = state
   return playlist.findIndex(({ id }) => id === currentSong.id)
 }
 
 export const nextSong = (state, getters) => {
-  const { playlist } = state
-  const index = genSequenceNextIndex()
+  const { playlist, playMode } = state
+  const nextStratMap = {
+    [playModeMap.sequence.code]: getSequenceNextIndex,
+    [playModeMap.loop.code]: getLoopNextIndex,
+    [playModeMap.random.code]: getRandomNextIndex
+  }
+  const getNextStrat = nextStratMap[playMode]
+  const index = getNextStrat()
+
   return playlist[index]
 
-  function genSequenceNextIndex() {
+  // 顺序
+  function getSequenceNextIndex() {
     let nextIndex = getters.currentIndex + 1
     if (nextIndex > playlist.length - 1) {
       nextIndex = 0
     }
     return nextIndex
   }
+
+  // 随机
+  function getRandomNextIndex() {
+    return getRandomIndex(playlist, getters.currentIndex)
+  }
+
+  // 单曲
+  function getLoopNextIndex() {
+    return getters.currentIndex
+  }
 }
 
 export const prevSong = (state, getters) => {
-  const { playlist } = state
-  const index = genSequencePrevIndex()
+  const { playlist, playMode } = state
+  const prevStratMap = {
+    [playModeMap.sequence.code]: genSequencePrevIndex,
+    [playModeMap.loop.code]: getLoopPrevIndex,
+    [playModeMap.random.code]: getRandomPrevIndex
+  }
+  const getPrevStrat = prevStratMap[playMode]
+  const index = getPrevStrat()
+
   return playlist[index]
 
   function genSequencePrevIndex() {
@@ -29,4 +56,20 @@ export const prevSong = (state, getters) => {
     }
     return prevIndex
   }
+
+  function getLoopPrevIndex() {
+    return getters.currentIndex
+  }
+
+  function getRandomPrevIndex() {
+    return getRandomIndex(playlist, getters.currentIndex)
+  }
+}
+
+function getRandomIndex(playlist, currentIndex) {
+  let index = Math.round(Math.random() * (playlist.length - 1))
+  if (index === currentIndex) {
+    index = getRandomIndex(playlist, currentIndex)
+  }
+  return index
 }
\ No newline at end of file
diff --git a/src/store/modules/music/mutations.js b/src/store/modules/music/mutations.js
index 4fbc3a8..f61bccf 100644
--- a/src/store/modules/music/mutations.js
+++ b/src/store/modules/music/mutations.js
@@ -9,6 +9,9 @@ export default {
   setPlayingState(state, playing) {
     state.playing = playing
   },
+  setPlayMode(state, mode) {
+    state.playMode = mode
+  },
   setPlaylistShow(state, show) {
     state.isPlaylistShow = show
   },
diff --git a/src/store/modules/music/state.js b/src/store/modules/music/state.js
index 1767ed0..4955391 100644
--- a/src/store/modules/music/state.js
+++ b/src/store/modules/music/state.js
@@ -1,5 +1,5 @@
 import storage from 'good-storage'
-import { PLAY_HISTORY_KEY } from '@/utils'
+import { PLAY_HISTORY_KEY, playModeMap } from '@/utils'
 
 export default {
   // 当前播放歌曲
@@ -8,6 +8,8 @@ export default {
   currentTime: 0,
   // 播放状态
   playing: false,
+  // 播放模式
+  playMode: playModeMap.sequence.code,
   // 播放列表显示
   isPlaylistShow: false,
   // 播放提示显示
@@ -18,4 +20,5 @@ export default {
   playlist: [],
   // 播放历史数据
   playHistory: storage.get(PLAY_HISTORY_KEY, []),
+
 }
diff --git a/src/utils/config.js b/src/utils/config.js
index 44a47c6..4e1b17f 100644
--- a/src/utils/config.js
+++ b/src/utils/config.js
@@ -1,7 +1,19 @@
-export const playMode = {
-  sequence: 0,
-  loop: 1,
-  random: 2
+export const playModeMap = {
+  sequence: {
+    code: 'sequence',
+    icon: 'sequence',
+    name: '顺序播放'
+  },
+  loop: {
+    code: 'loop',
+    icon: 'loop',
+    name: '单曲循环'
+  },
+  random: {
+    code: 'random',
+    icon: 'random',
+    name: '随机播放'
+  }
 }
 
 // 存储播放记录