搜索界面新增搜索状态的提示

publish/changeLog.md

@@ -1,9 +1,3 @@
-### 优化
+### 新增
 
-- 改进自动换源时的歌曲匹配
-
-### 修复
-
-- 修复某些情况下自动换源的时间过长时会终止换源自动切歌的问题
-- 修复自动换源导致的搜索列表每页变成10条数据的问题
-- 降级electron到9.3.3修复部分系统没有声音的问题
+- 搜索界面新增搜索状态的提示

src/renderer/lang/en-us/view/search.json

@@ -10,6 +10,7 @@
   "time": "Length",
   "lossless": "SQ",
   "high_quality": "HQ",
+  "loding_list": "Loading...",
   "no_item": "Search what I want to 😉",
   "hot_search": "Top Searches",
   "history_search": "History Searches",

src/renderer/lang/zh-cn/view/search.json

@@ -10,6 +10,7 @@
   "time": "时长",
   "lossless": "无损",
   "high_quality": "高品质",
+  "loding_list": "加载中...",
   "no_item": "搜我所想~~😉",
   "hot_search": "热门搜索",
   "history_search": "历史搜索",

src/renderer/lang/zh-tw/view/search.json

@@ -10,6 +10,7 @@
   "time": "時長",
   "lossless": "無損",
   "high_quality": "高品質",
+  "loding_list": "加載中...",
   "no_item": "搜我所想~~😉",
   "hot_search": "熱門搜索",
   "history_search": "歷史搜索",

src/renderer/store/modules/search.js

@@ -127,7 +127,7 @@ const actions = {
           }
         }))
       }
-      Promise.all(task).then(results => commit('setLists', { results, page }))
+      return Promise.all(task).then(results => commit('setLists', { results, page }))
     } else {
       return music[rootState.setting.search.searchSource].musicSearch.search(text, page, limit).catch(error => {
         console.log(error)

src/renderer/views/Search.vue

@@ -3,7 +3,8 @@
     //- transition
     div(:class="$style.header")
       material-tab(:class="$style.tab" :list="sources" align="left" item-key="id" item-name="name" v-model="searchSourceId")
-    div(v-if="listInfo.list.length" :class="$style.list")
+    div(:class="$style.main")
+      div(:class="$style.list" v-show="isLoading || listInfo.list.length")
         div(:class="$style.thead")
           table
             thead
@@ -37,7 +38,11 @@
                     @btn-click="handleListBtnClick")
           div(:class="$style.pagination")
             material-pagination(:max-page="listInfo.allPage" :limit="listInfo.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="isLoading" :class="$style.loading")
+          p {{$t('view.search.loding_list')}}
+      transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
+        div(v-show="!isLoading && !listInfo.list.length" :class="$style.noitem")
           div.scroll(:class="$style.noitemListContainer" v-if="setting.search.isShowHotSearch || setting.search.isShowHistorySearch")
             dl(:class="[$style.noitemList, $style.noitemHotSearchList]" v-if="setting.search.isShowHotSearch")
               dt(:class="$style.noitemListTitle") {{$t('view.search.hot_search')}}
@@ -51,12 +56,12 @@
               dd(:class="$style.noitemListItem" v-for="(item, index) in historyList" @contextmenu="removeHistory(index)" :key="index + item" @click="handleNoitemSearch(item)" :tips="$t('view.search.history_remove')") {{item}}
           div(v-else :class="$style.noitem_list")
             p {{$t('view.search.no_item')}}
+      material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
     material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
     material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectedData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
     //- material-flow-btn(:show="isShowEditBtn && (searchSourceId == 'all' || assertApiSupport(searchSourceId))" :remove-btn="false" @btn-click="handleFlowBtnClick")
     material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="handleListAddModalClose")
     material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectedData" @close="handleListAddMultipleModalClose")
-    material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
 </template>
 
 <script>
@@ -97,6 +102,7 @@ export default {
           y: 0,
         },
       },
+      isLoading: false,
     }
   },
   beforeRouteUpdate(to, from, next) {
@@ -148,6 +154,7 @@ export default {
     },
     searchSourceId(n) {
       if (n === this.setting.search.searchSource) return
+      if (this.text !== '') this.isLoading = true
       this.$nextTick(() => {
         this.page = 1
         this.handleSearch(this.text, this.page)
@@ -238,12 +245,14 @@ export default {
     },
     handleSearch(text, page) {
       if (text === '') return this.clearList()
-
+      this.isLoading = true
       this.search({ text, page, limit: this.listInfo.limit }).then(data => {
         this.page = page
         this.$nextTick(() => {
           scrollTo(this.$refs.dom_scrollContent, 0)
         })
+      }).finally(() => {
+        this.isLoading = false
       })
     },
     handleDoubleClick(event, index) {
@@ -504,6 +513,12 @@ export default {
 .header {
   flex: none;
 }
+.main {
+  flex: auto;
+  min-height: 0;
+  position: relative;
+  display: flex;
+}
 .list {
   // position: relative;
   height: 100%;
@@ -560,10 +575,30 @@ export default {
   // left: 50%;
   // transform: translateX(-50%);
 }
+.loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  background-color: @color-theme_2;
+
+  p {
+    font-size: 24px;
+    color: @color-theme_2-font-label;
+  }
+}
 .noitem {
-  flex: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
   overflow: hidden;
-  position: relative;
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
@@ -635,6 +670,9 @@ each(@themes, {
     .labelSource {
       color: ~'@{color-@{value}-theme}';
     }
+    .loading {
+      background-color: ~'@{color-@{value}-theme_2}';
+    }
     .noitem {
       p {
         color: ~'@{color-@{value}-theme_2-font-label}';