加载新列表时清空当前列表

publish/changeLog.md

@@ -9,7 +9,7 @@
 
 - 优化木叶之村主题翻页器背景颜色
 - 优化各个主题音质标签颜色
-- 优化其他一些界面细节
+- 优化其他一些界面细节及用户交互效果
 
 ### 修复
 

src/renderer/components/material/SongList.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 div(:class="$style.songList")
-  transition(enter-active-class="animated fadeIn" leave-active-class="animated fadeOut")
-    div(v-if="list.length" :class="$style.list")
+  transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
+    div(v-show="list.length" :class="$style.list")
       div(:class="$style.thead")
         table
           thead
@@ -41,7 +41,8 @@ div(:class="$style.songList")
                 span(:class="$style.time") {{item.interval || '--/--'}}
         div(:class="$style.pagination")
           material-pagination(:count="total" :limit="limit" :page="page" @btn-click="handleTogglePage")
-    div(v-else :class="$style.noitem")
+  transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
+    div(v-show="!list.length" :class="$style.noitem")
       p(v-html="noItem")
   material-flow-btn(:show="isShowEditBtn && (source == 'kw' || !isAPITemp)" :remove-btn="false" @btn-click="handleFlowBtnClick")
 </template>
@@ -234,8 +235,11 @@ export default {
   // transform: translateX(-50%);
 }
 .noitem {
-  position: relative;
+  position: absolute;
+  top: 0;
+  left: 0;
   height: 100%;
+  width: 100%;
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;

src/renderer/store/modules/leaderboard.js

@@ -39,6 +39,7 @@ const actions = {
     let tabId = rootState.setting.leaderboard.tabId
     let key = `${source}${tabId}${page}}`
     if (state.list.length && state.key == key) return true
+    commit('clearList')
     return music[source].leaderboard.getList(tabId, page).then(result => commit('setList', { result, key }))
   },
 }
@@ -52,6 +53,10 @@ const mutations = {
     state.page = result.page
     state.key = key
   },
+  clearList(state) {
+    state.list = []
+    state.total = 0
+  },
 }
 
 export default {

src/renderer/views/SongList.vue

@@ -319,7 +319,7 @@ export default {
       })
     },
     parseImportSongListInputText() {
-      if (!/[?&:/]/.test(this.importSongListText)) return
+      if (!(/[?&:/]/.test(this.importSongListText))) return
       const text = this.importSongListText
       let regx
       switch (this.source) {