完成单曲搜索,其他pr

src/components/Songlist.vue

@@ -185,7 +185,7 @@ export default {
   user-select: none;
 
   .trh{
-    background-color: #eee;
+    background-color: #f0f0f0;
     font-weight: 600;
     td{
       // background-color: red;

src/store/index.js

@@ -5,7 +5,7 @@ export default createStore({
     // appVersion: "0.0.1",
     // debugStr: "测试debug字符",
     showSongDetail: false, //是否显示歌曲详情
-    keywords: '', //查询关键字
+    keywords: "", //查询关键字
     settings: {
       currentRoute: "/discover/recommend", //当前路由
       songId: 0, //歌曲id
@@ -125,6 +125,25 @@ export default createStore({
         saveLoaclSettings(state.settings);
       }
     },
+    // 搜索历史
+    addSearchHistory(state, history) {
+      let h = state.settings.searchHistory.filter(
+        (item) => item != history
+      );
+      h.unshift(history);
+      state.settings.searchHistory = h;
+      saveLoaclSettings(state.settings);
+    },
+    removeSearchHistory(state, history) {
+      state.settings.searchHistory = state.settings.searchHistory.filter(
+        (item) => item != history
+      );
+      saveLoaclSettings(state.settings);
+    },
+    clearSearchHistory(state) {
+      state.settings.searchHistory = []
+      saveLoaclSettings(state.settings);
+    },
   },
   actions: {},
   modules: {},

src/views/SearchResult.vue

@@ -1,38 +1,44 @@
 <script setup>
-import { ref, onActivated, watch } from "vue";
+import { ref, onActivated, watch, onMounted } from "vue";
 import { searchResult } from "../network/search";
 import Songlist from "../components/Songlist.vue";
 import SongsList from "../components/SongsList.vue";
-import { useStore } from 'vuex';
+import { useStore } from "vuex";
+import { NPagination } from "naive-ui";
 
 const props = defineProps({
   type: String,
   keywords: String,
 });
 
-const store = useStore()
+const store = useStore();
 
 onActivated(() => {});
 
 const type = ref(props.type);
 const keywords = ref(props.keywords);
 const count = ref(0);
+const page = ref(1);
+const pageSize = ref(50);
 const things = ref("单曲");
 const songs = ref([]);
 
 watch(
-  () => [props.type, props.keywords],
+  () => [props.type, props.keywords, page.value, pageSize.value],
   ([t, k]) => {
-    search(t, k);
+    type.value = t;
+    keywords.value = k;
+    search();
   }
   // { immediate: true }
 );
 
-const search = (t, k) => {
-  type.value = t;
-  keywords.value = k;
+onMounted(() => {
+  search();
+});
 
-  switch (t) {
+const search = () => {
+  switch (type.value) {
     case "1":
     default:
       type.value = "1";
@@ -41,7 +47,12 @@ const search = (t, k) => {
   }
 
   if (keywords.value.length > 0) {
-    searchResult(k, 20, 0, t)
+    searchResult(
+      keywords.value,
+      pageSize.value,
+      (page.value - 1) * pageSize.value,
+      type.value
+    )
       .then((res) => {
         if (res.data.code == 200) {
           if (type.value == 1) {
@@ -58,13 +69,14 @@ const search = (t, k) => {
 };
 
 const selStyle = (t) => {
-  if(t == type.value){
-  const {primaryColor} = store.state.theme.themeOverrides.common
-  return {
-    color: primaryColor,
-    borderBottom: 'solid 2px ' +  primaryColor, 
-  }}
-}
+  if (t == type.value) {
+    const { primaryColor } = store.state.theme.themeOverrides.common;
+    return {
+      color: primaryColor,
+      borderBottom: "solid 2px " + primaryColor,
+    };
+  }
+};
 </script>
 
 <template>
@@ -78,9 +90,7 @@ const selStyle = (t) => {
       <div class="tabs">
         <div class="tab">
           <div class="btns">
-            <span class="caption" :style="selStyle('1')">
-              单曲
-            </span>
+            <span class="caption" :style="selStyle('1')"> 单曲 </span>
             <span class="caption" :style="selStyle('10')">
               专辑
             </span>
@@ -109,6 +119,12 @@ const selStyle = (t) => {
         <div class="panel" v-show="type == '100'"></div>
         <div class="panel" v-show="type == '1000'"></div>
       </div>
+      <div class="pager">
+        <NPagination
+          v-model:page="page"
+          :page-count="Math.ceil(count / pageSize)"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -146,12 +162,18 @@ export default {};
         //   border-bottom: solid 2px red;
         // }
       }
-      .bt{
+      .bt {
         margin-top: -2px;
         height: 2px;
         background-color: #f0f0f0;
       }
     }
   }
+
+  .pager{
+    margin: 18px;
+    display: flex;
+    justify-content: center;
+  }
 }
 </style>

src/views/common/Search.vue

@@ -17,6 +17,7 @@ const search = () => {
   if (keywords.value.length > 0){
     pubsub.publish("zp.toggleSearch");
     // elSearch.value.blur()
+    store.commit('addSearchHistory', keywords.value)
     router.push(`/search/1/${keywords.value}`);
   }
 };

src/views/common/Searching.vue

@@ -1,11 +1,13 @@
 <script setup>
 import { useStore } from "vuex";
+import { useRouter } from "vue-router";
 import { getHotDetail, searchSuggest } from "@/network/search.js";
 import { ref, onUnmounted } from "vue";
 import { NTag, NButton, NSpace } from "naive-ui";
 import pubsub from "pubsub-js";
 
 const store = useStore();
+const router = useRouter();
 
 //#region 热搜
 const hotSearch = ref([]);
@@ -68,7 +70,11 @@ onUnmounted(() => {
     >
       <div class="caption">
         <span class="txt">搜索历史</span>
-        <NButton round size="tiny" type="error">清除</NButton>
+        <NButton round size="tiny" type="error"
+          @click="()=>{
+            store.commit('clearSearchHistory')
+          }"
+        >清除</NButton>
       </div>
       <NSpace class="h-list" :size="[6, 6]">
         <NTag
@@ -77,6 +83,11 @@ onUnmounted(() => {
           round
           size="small"
           type="primary"
+          @close.stop="store.commit('removeSearchHistory', h)"
+          @click="()=>{
+            pubsub.publish('zp.toggleSearch');
+            router.push(`/search/1/${h}`);
+          }"
           >{{ h }}</NTag
         >
       </NSpace>
@@ -87,6 +98,11 @@ onUnmounted(() => {
         class="hot-list"
         v-for="(item, idx) in hotSearch"
         key="idx"
+        @click="()=>{
+            pubsub.publish('zp.toggleSearch');
+            store.commit('addSearchHistory', item.searchWord)
+            router.push(`/search/1/${item.searchWord}`);
+          }"
       >
         <div class="idx" :class="{ idxHot: item.iconType == 1 }">
           {{ idx + 1 }}
@@ -165,6 +181,9 @@ export default {};
       display: flex;
       align-items: center;
       color: #999;
+      &:hover{
+        background: #efefef;
+      }
       .idx {
         padding: 6px 12px;
         width: 30px;

src/views/common/SongCtrl.vue

@@ -98,7 +98,7 @@ const stop = async () => {
     store.commit("saveSettings", {
       songId: null,
     });
-    pubsub.publish('zp.hideSongInfo')
+    pubsub.publish("zp.hideSongInfo");
   }
 };
 
@@ -164,6 +164,10 @@ const favorite = () => {
   // console.log(audioEl.value.currentTime);
 };
 
+const removeCurrentSong = () => {
+  pubsub.publish('zp.removeCurrPlayingSong', { id: store.state.settings.songId })
+};
+
 let interval;
 watch(playing, (val, old) => {
   store.state.settings.playing = val;
@@ -268,13 +272,13 @@ onUnmounted(() => {
         </n-icon>
       </template>
     </n-button>
-    <!-- <n-button circle>
+    <n-button circle @click="removeCurrentSong">
       <template #icon>
         <n-icon>
           <TrashOutline />
         </n-icon>
       </template>
-    </n-button> -->
+    </n-button>
   </n-space>
 
   <!-- </div> -->

src/views/common/ZPlayingList.vue

@@ -47,6 +47,9 @@ const token = pubsub.subscribe("zp", (msg, data) => {
   switch (msg) {
     case "zp.togglePlaying":
       break;
+    case "zp.removeCurrPlayingSong":
+      removeCurrPlayingSong(data.id);
+      break;
   }
 });
 
@@ -127,15 +130,16 @@ const handleSelect = (key, id) => {
     case "nextToPlay":
       break;
     case "remove":
-      store.commit("removePlayingList", { id });
-      if (playingList.value.length > 0){
-        if (store.state.settings.songId == id)
-          pubsub.publish("zp.next");
-      }
-        else pubsub.publish("zp.stop");
+      removeCurrPlayingSong(id)
       break;
   }
 };
+const removeCurrPlayingSong = (id) => {
+  store.commit("removePlayingList", { id });
+  if (playingList.value.length > 0) {
+    if (store.state.settings.songId == id) pubsub.publish("zp.next");
+  } else pubsub.publish("zp.stop");
+};
 const handleClick = () => {
   // showDropdownRef.value = !showDropdownRef.value;
 };

src/views/discover/Recommend.vue

@@ -40,7 +40,7 @@
       >
         <n-grid-item
           v-for="(song, idx) in topSongs"
-          key="idx"
+          :key="song.id"
         >
           <div class="c2-list">
             <div class="play-btn">
@@ -110,7 +110,7 @@
       >
         <n-grid-item
           v-for="(mv, idx) in personalizedMV"
-          key="idx"
+          :key="mv.id"
         >
           <div class="mv-c2-list">
             <div class="play-mv">
@@ -170,7 +170,7 @@
         :cols="4"
         style="margin: 6px 0"
       >
-        <n-grid-item v-for="p in personalized">
+        <n-grid-item v-for="p in personalized" :key="p.id">
           <n-card
             title
             hoverable