优化列表加载交互

src/renderer/store/modules/songList.js

@@ -64,7 +64,9 @@ const actions = {
     // console.log(sortId)
     let key = `slist__${source}__${sortId}__${tabId}__${page}`
     if (state.list.list.length && state.list.key == key) return
-    return (cache.has(key) ? Promise.resolve(cache.get(key)) : music[source].songList.getList(sortId, tabId, page)).then(result => commit('setList', { result, key, page }))
+    if (cache.has(key)) return Promise.resolve(cache.get(key)).then(result => commit('setList', { result, key, page }))
+    commit('clearList')
+    return music[source].songList.getList(sortId, tabId, page).then(result => commit('setList', { result, key, page }))
   },
   getListDetail({ state, rootState, commit }, { id, page }) {
     let source = rootState.setting.songList.source
@@ -108,6 +110,10 @@ const mutations = {
   setTags(state, { tags, source }) {
     state.tags[source] = tags
   },
+  clearList(state) {
+    state.list.list = []
+    state.list.total = 0
+  },
   setList(state, { result, key, page }) {
     state.list.list = result.list
     state.list.total = result.total

src/renderer/views/SongList.vue

@@ -24,22 +24,27 @@
           material-select(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source")
         div(:class="$style.songListContent")
           transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
-            div.scroll(:class="$style.songList" v-if="sortId !== 'importSongList'" ref="dom_scrollContent")
+            div(:class="$style.songListContent" v-show="listData.list.length")
-              ul
+              transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
-                li(:class="$style.item" v-for="(item, index) in listData.list" @click="handleItemClick(index)")
+                div.scroll(:class="$style.songList" v-if="sortId !== 'importSongList'" ref="dom_scrollContent")
-                  div(:class="$style.left")
+                  ul
-                    img(:src="item.img")
+                    li(:class="$style.item" v-for="(item, index) in listData.list" @click="handleItemClick(index)")
-                  div(:class="$style.right" :src="item.img")
+                      div(:class="$style.left")
-                    h4(:title="item.name") {{item.name}}
+                        img(:src="item.img")
-                    p(:title="item.desc") {{item.desc}}
+                      div(:class="$style.right" :src="item.img")
-                li(:class="$style.item" style="cursor: default;" v-if="listData.list && listData.list.length && listData.list.length % 3 == 2")
+                        h4(:title="item.name") {{item.name}}
-              div(:class="$style.pagination")
+                        p(:title="item.desc") {{item.desc}}
-                material-pagination(:count="listData.total" :limit="listData.limit" :page="listData.page" @btn-click="handleToggleListPage")
+                    li(:class="$style.item" style="cursor: default;" v-if="listData.list && listData.list.length && listData.list.length % 3 == 2")
+                  div(:class="$style.pagination")
+                    material-pagination(:count="listData.total" :limit="listData.limit" :page="listData.page" @btn-click="handleToggleListPage")
+              transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
+                div(:class="$style.importSongListContent" v-show="sortId === 'importSongList'")
+                  material-search-input(v-model="importSongListText" @event="handleImportSongListEvent" big placeholder="输入歌单链接或歌单ID")
+                    svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve')
+                      use(xlink:href='#icon-right')
           transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
-            div(:class="$style.importSongListContent" v-show="sortId === 'importSongList'")
+            div(v-show="!listData.list.length" :class="$style.noitem")
-              material-search-input(v-model="importSongListText" @event="handleImportSongListEvent" big placeholder="输入歌单链接或歌单ID")
+              p 列表加载中...
-                svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve')
-                  use(xlink:href='#icon-right')
     material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
     material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
     material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false")
@@ -529,6 +534,23 @@ export default {
   // transform: translateX(-50%);
 }
 
+.noitem {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+
+  p {
+    font-size: 24px;
+    color: @color-theme_2-font-label;
+  }
+}
+
 each(@themes, {
   :global(#container.@{value}) {
     .song-list-header-middle {
@@ -541,6 +563,11 @@ each(@themes, {
         color: ~'@{color-@{value}-theme_2-font-label}';
       }
     }
+    .noitem {
+      p {
+        color: ~'@{color-@{value}-theme_2-font-label}';
+      }
+    }
   }
 })
 </style>