From d70bf6738e08e25403e292da31a448b3542ab4fa Mon Sep 17 00:00:00 2001
From: zilong <zilong.yang@gmail.com>
Date: Sat, 6 Nov 2021 12:07:41 +0800
Subject: [PATCH] fix bug

---
 src/App.vue                    | 12 ++++++--
 src/lib/useBackSnaps.js        | 15 +++++++---
 src/views/SearchResult.vue     | 55 ++++++++++++++++++++++++----------
 src/views/common/Search.vue    |  2 +-
 src/views/common/Searching.vue |  2 +-
 src/views/common/SongInfo.vue  |  4 +--
 6 files changed, 63 insertions(+), 27 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1b0dfd2..7d09e41 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -102,7 +102,7 @@ const token = pubsub.subscribe("zp", (msg, data) => {
 });
 
 //卸载组件
-onUnmounted(() => {
+onUnmounted(() => { 
   pubsub.unsubscribe(routeToken);
   pubsub.unsubscribe(token);
 });
@@ -130,6 +130,11 @@ const hideWins = (e) => {
     showSearch.value = false;
   }
 };
+
+const keyup = (e) => {
+  console.log(e);
+   
+}
 </script>
 
 <template>
@@ -152,9 +157,9 @@ const hideWins = (e) => {
           </div>
           <div id="main">
             <router-view v-slot="{ Component, route }">
-              <!-- <keep-alive exclude="FM,Friends"> -->
+              <keep-alive exclude="FM,Friends">
                 <component :is="Component" />
-              <!-- </keep-alive> -->
+              </keep-alive>
             </router-view>
             <!-- <router-view v-slot="{ Component, route }">
             <keep-alive v-if="route.meta.keepAlive">
@@ -211,6 +216,7 @@ body {
 }
 * {
   box-sizing: border-box;
+  // scroll-behavior: smooth;
 }
 
 .top-menu {
diff --git a/src/lib/useBackSnaps.js b/src/lib/useBackSnaps.js
index 954ccf9..dc45d86 100644
--- a/src/lib/useBackSnaps.js
+++ b/src/lib/useBackSnaps.js
@@ -4,7 +4,7 @@ import { useStore } from "vuex";
 //设置
 let config = {
   elName: "mainContent", //#元素名称
-  log: false, //是否显示log
+  log: true, //是否显示log
 };
 
 const backSnaps = []; //返回快照数组
@@ -25,9 +25,13 @@ export function cfg(cfg){
 export function useBackSnaps() {
   
   onActivated(() => {
+    if (config.log)
+      console.log("useBackSnaps: onActivated事件", backSnaps);
     restore();
   });
   onMounted(() => {
+    if (config.log)
+      console.log("useBackSnaps: onMounted", backSnaps);
     restore();
   });
 
@@ -60,10 +64,11 @@ export const saveBackSnaps = () => {
   //保存
   if (idx > -1) {
     const backSnap = {
-      idx,
+      _idx: idx,
       scrollTop: $content ? $content.scrollTop : 0,
     };
-    // console.log("路由afterEach: ", backSnap);
+    if (config.log)
+      console.log("useBackSnaps: 保存之前",backSnap, backSnaps)
     if (backSnaps.length < idx + 1) backSnaps.length = idx + 1;
     backSnaps[idx] = backSnaps[idx] ? {...backSnaps[idx], ...backSnap} : backSnap
     // backSnaps[idx] = backSnap;
@@ -81,8 +86,10 @@ export const saveSnap = (snap)=>{
     //   url: window.location.href,
     // };
     // // console.log("路由afterEach: ", backSnap);
+    if (config.log)
+      console.log("useBackSnaps: 保存当前页面",snap, backSnaps);
     if (backSnaps.length < idx + 1) backSnaps.length = idx + 1;
-    backSnaps[idx] = backSnaps[idx] ? {...backSnaps[idx], ...{other: snap}} : {other: snap}
+    backSnaps[idx] = backSnaps[idx] ? {...backSnaps[idx], ...snap} : {...snap}
     // backSnaps[idx] = backSnap;
     if (config.log)
       console.log("useBackSnaps: 保存当前页面", backSnaps);
diff --git a/src/views/SearchResult.vue b/src/views/SearchResult.vue
index 97fce82..446e800 100644
--- a/src/views/SearchResult.vue
+++ b/src/views/SearchResult.vue
@@ -32,9 +32,8 @@ const snap = {
     page: 1,
     pageSize: 50,
   },
-  ...getSnap()?.other,
+  ...getSnap(),
 };
-console.log(snap);
 
 const Songlist = defineAsyncComponent(() =>
   import("@/components/Songlist.vue")
@@ -72,6 +71,7 @@ watch(
   () => [props.keywords, type.value, page.value, pageSize.value],
   ([k, t]) => {
     keywords.value = k;
+    // console.log('Searching...', keywords.value, type.value, page.value, pageSize.value);
     search();
   }
   // { immediate: true }
@@ -81,9 +81,14 @@ onMounted(() => {
   search();
 });
 
-let firstTime = true;
+// let firstTime = true;
+// onActivated(()=>{
+//   console.log('actived---------');
+//   firstTime = true
+// })
 
 const search = () => {
+  // console.log('Searching...', keywords.value, type.value, page.value, pageSize.value);
   switch (type.value) {
     case 10:
       things.value = "专辑";
@@ -147,13 +152,10 @@ const search = () => {
           if (page.value > maxPage) page.value = maxPage;
           if (page.value < 1) page.value = 1;
 
-          if (firstTime) {
-            setTimeout(() => {
-              console.log(getScrollTop());
-              elWp.value.scrollTop = getScrollTop();
-            }, 100);
-            firstTime = false;
-          } else elWp.value.scrollTop = 0;
+          setTimeout(() => {
+            console.log(getScrollTop());
+            elWp.value.scrollTop = getScrollTop();
+          }, 50);
 
           saveSnap({
             type: type.value,
@@ -194,6 +196,11 @@ const click = () => {
   console.log(elWp.value.scrollTop);
   window.history.pushState(null, null);
 };
+
+const pageChange = (p) => {
+  page.value = p;
+  saveSnap({ scrollTop: 0 });
+};
 </script>
 
 <template>
@@ -231,35 +238,50 @@ const click = () => {
             <span
               class="caption"
               :style="selStyle('10')"
-              @click="type = 10;page=1;"
+              @click="
+                type = 10;
+                page = 1;
+              "
             >
               专辑
             </span>
             <span
               class="caption"
               :style="selStyle('1000')"
-              @click="type = 1000;page=1;"
+              @click="
+                type = 1000;
+                page = 1;
+              "
             >
               歌单
             </span>
             <span
               class="caption"
               :style="selStyle('1009')"
-              @click="type = 1009;page=1;"
+              @click="
+                type = 1009;
+                page = 1;
+              "
             >
               电台
             </span>
             <span
               class="caption"
               :style="selStyle('1004')"
-              @click="type = 1004;page=1;"
+              @click="
+                type = 1004;
+                page = 1;
+              "
             >
               MV
             </span>
             <span
               class="caption"
               :style="selStyle('1014')"
-              @click="type = 1014;page=1;"
+              @click="
+                type = 1014;
+                page = 1;
+              "
             >
               视频
             </span>
@@ -298,9 +320,10 @@ const click = () => {
         <div class="panel" v-show="type == 1000"></div>
       </div>
       <div class="pager">
-        <NPagination
+        <NPagination v-show="count>0"
           v-model:page="page"
           :page-count="Math.ceil(count / pageSize)"
+          :on-update:page="pageChange"
         />
       </div>
     </div>
diff --git a/src/views/common/Search.vue b/src/views/common/Search.vue
index 8d0a7c1..acbed15 100644
--- a/src/views/common/Search.vue
+++ b/src/views/common/Search.vue
@@ -14,7 +14,7 @@ const keywords = ref("");
 const elSearch = ref(null);
 
 const search = () => {
-  if (keywords.value.length > 0){
+  if (keywords.value.trim().length > 0){
     pubsub.publish("zp.toggleSearch");
     // elSearch.value.blur()
     store.commit('addSearchHistory', keywords.value)
diff --git a/src/views/common/Searching.vue b/src/views/common/Searching.vue
index 0b7eb13..88e4812 100644
--- a/src/views/common/Searching.vue
+++ b/src/views/common/Searching.vue
@@ -50,7 +50,7 @@ const keywords = ref("");
 const token = pubsub.subscribe("zp", (msg, data) => {
   switch (msg) {
     case "zp.searchInput":
-      keywords.value = data;
+      keywords.value = data.trim();
       suggest(keywords.value);
       break;
   }
diff --git a/src/views/common/SongInfo.vue b/src/views/common/SongInfo.vue
index ec372b5..3ff5493 100644
--- a/src/views/common/SongInfo.vue
+++ b/src/views/common/SongInfo.vue
@@ -211,14 +211,14 @@ export default {};
       align-items: center;
       .song-name {
         // flex: 1;
-        .text-el-line-normal();
+        .text-el-line();
       }
       .song-author {
         // flex: 1;
         margin-left: 4px;
         color: #aaa;
         font-size: 13px;
-        .text-el-line-normal();
+        .text-el-line();
       }
     }
     .song-time {