feat: support search all songs

src/api/search.ts

@@ -0,0 +1,53 @@
+import { get } from '@/utils/http'
+import { SearchSuggest, SearchType, Pagination } from '@/interface'
+
+interface SearchApiResult {
+  [SearchType.SONG]: {
+    songs: SearchSuggest['songs']
+    songCount: number
+  }
+  [SearchType.SONG_LIST]: {
+    playlists: SearchSuggest['playlists']
+    playlistCount: number
+  }
+  [SearchType.ALBUM]: {
+    albums: SearchSuggest['albums']
+    albumCount: number
+  }
+  [SearchType.ARTIST]: {
+    artists: SearchSuggest['artists']
+    artistCount: number
+  }
+  [SearchType.LYRICE]: {
+    songs: SearchSuggest['lyrice']
+    songCount: number
+  }
+}
+
+export const search = async <T extends keyof SearchApiResult>(
+  key: string,
+  type: T,
+  pagination: Pagination
+): Promise<SearchApiResult[T]> => {
+  const songs = await get<{
+    result: SearchApiResult[T]
+  }>('/api/search', {
+    keywords: key,
+    type: type,
+    ...pagination
+  })
+
+  return songs.result
+}
+
+export const searchSuggest = async (key: string): Promise<SearchSuggest> => {
+  const data = await get<{ result: SearchSuggest }>('/api/search/suggest', {
+    keywords: key
+  })
+  const songs = await search(key, SearchType.SONG, {
+    limit: 30,
+    offset: 0
+  })
+  data.result.songs = songs.songs
+  return data.result
+}

src/components-business/secondary-bar/index.tsx

@@ -1,5 +1,5 @@
-import { defineComponent, toRefs, PropType } from 'vue'
-import { RouterLink, RouteRecordRaw } from 'vue-router'
+import { defineComponent, toRefs, PropType, toRaw } from 'vue'
+import { RouterLink, RouteRecordRaw, useRoute } from 'vue-router'
 import './index.less'
 
 const prefix = 'secondary'
@@ -26,6 +26,17 @@ export const SecondaryBar = defineComponent({
   },
   setup(props) {
     const { nav, size } = toRefs(props)
+    const route = useRoute()
+
+    const renderPath = (url: string) => {
+      if (typeof url === 'string') {
+        return {
+          path: url,
+          query: toRaw(route.query)
+        }
+      }
+      return url
+    }
 
     return () => (
       <div class={`${prefix}-bar`}>
@@ -34,7 +45,7 @@ export const SecondaryBar = defineComponent({
             <RouterLink
               class={`${prefix}-bar-link ${prefix}-bar-link--${size.value}`}
               activeClass={`${prefix}-bar-link-active ${prefix}-bar-link-active--${size.value}`}
-              to={link.meta?.path}
+              to={renderPath(link.meta?.path)}
             >
               {link.meta?.name}
             </RouterLink>

src/components-business/table/index.less

@@ -1,13 +1,19 @@
 @prefix: ~'table';
 
 .@{prefix} {
-  display: block;
+  height: 100%;
+  overflow: auto;
   &-body {
     .ant-table-tbody > tr > td,
     .ant-table-thead > tr > th {
       padding: 12px 16px;
     }
   }
+  &-pagination {
+    display: flex;
+    justify-content: center;
+    padding: 10px 0;
+  }
   .row-music {
     cursor: pointer;
   }

src/components-business/table/index.tsx

@@ -1,27 +1,31 @@
-import { defineComponent, PropType, toRefs, ref, computed } from 'vue'
-import { Table as ATable } from 'ant-design-vue'
+import { defineComponent, PropType, toRefs, ref, computed, watch } from 'vue'
+import { Table as ATable, Pagination as APagination } from 'ant-design-vue'
 import {
   noop,
   formatTime,
   formatTimeToStandard,
-  formatSize
+  formatSize,
+  scrollAnmation
 } from '@/utils/index'
 import {
   SongsDetail,
   ListFormat,
   FooterMutations,
   DownloadActions,
   SongListColumnsType,
-  DownloadMutations
+  DownloadMutations,
+  Pagination
 } from '@/interface/index'
 import { useDownloadModule, useFooterModule } from '@/modules/index'
 import { useSubscribe } from '@/shared/subscribe'
 import { getMusicUrl } from '@/shared/music-shared'
 import { instance } from '@/components-business/fly/index'
+import { TweenMap } from '@/utils/tween'
 import './index.less'
 
 const prefix = 'table'
 
+const tween = TweenMap['Quad-easeOut']
 const columns = [
   {
     width: 40,
@@ -194,20 +198,31 @@ export const Table = defineComponent({
       type: Boolean as PropType<boolean>,
       default: true
     },
+    pagination: {
+      type: Object as PropType<Pagination>,
+      default: () => ({})
+    },
     onDblclick: {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       type: Function as PropType<(item: any) => void>,
       default: noop
     },
+    onChange: {
+      type: Function as PropType<(page: number, size: number) => void>,
+      default: noop
+    },
     rowClassName: {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       type: Function as PropType<(item: any) => void>,
       default: () => 'row-music'
     }
   },
-  emits: ['dblclick'],
+  emits: ['dblclick', 'change'],
   setup(props, { emit }) {
-    const { list, columnsTypes, showHeader, rowClassName } = toRefs(props)
+    const contanier = ref()
+    const { list, columnsTypes, showHeader, rowClassName, pagination } = toRefs(
+      props
+    )
 
     const renderColumns = computed(() => {
       const col: unknown[] = []
@@ -220,8 +235,26 @@ export const Table = defineComponent({
       return col
     })
 
+    const paginationChange = (page: number, size: number) => {
+      emit('change', page, size)
+    }
+
+    watch(list, () => {
+      if (contanier.value) {
+        const scrollContanier = contanier.value
+        const from = scrollContanier.scrollTop
+        scrollAnmation(from, 0, {
+          tween: tween,
+          duration: 200,
+          cb: n => {
+            contanier.value && (scrollContanier.scrollTop = n)
+          }
+        })
+      }
+    })
+
     return () => (
-      <div class={`${prefix}`}>
+      <div class={`${prefix}`} ref={contanier}>
         {/* <div class={`${prefix}-header`}></div> */}
         <div class={`${prefix}-body`}>
           <ATable
@@ -248,12 +281,19 @@ export const Table = defineComponent({
             }}
           />
         </div>
-        {/* <div class={`${prefix}-pagination`}>
-          <Pagination
-            v-model={[current.value, 'current']}
-            total={list.value.length}
-          />
-        </div> */}
+        {pagination.value.limit && (
+          <div class={`${prefix}-pagination`}>
+            <APagination
+              size="small"
+              pageSize={pagination.value.limit}
+              total={pagination.value.total}
+              current={pagination.value.offset}
+              // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+              // @ts-ignore
+              onChange={paginationChange}
+            />
+          </div>
+        )}
       </div>
     )
   }

src/interface/app.ts

@@ -12,6 +12,12 @@ export interface GlobalBase {
   name: string
 }
 
+export interface Pagination {
+  offset: number
+  limit: number
+  total?: number
+}
+
 export interface ElectronWindowEventMap extends WindowEventMap {
   maximize: Event
   unmaximize: Event

src/interface/index.ts

@@ -1,5 +1,6 @@
 export * from './http'
 export * from './app'
+export * from './utils'
 export * from './service/albums'
 export * from './service/artists'
 export * from './service/songs'

src/interface/service/songs.ts

@@ -1,8 +1,11 @@
 import { Artists } from './artists'
 import { GlobalBase } from '../app'
+import { Albums } from './albums'
 
 export interface Songs extends GlobalBase {
   artists: Artists[]
+  duration?: number
+  album?: Albums
 }
 
 export interface Song extends Songs {

src/pages/header/component/search.less

@@ -12,6 +12,14 @@ li.qq-song {
   &-popper {
     height: 240px;
     font-size: 13px;
+    .keyword {
+      font-weight: normal;
+      color: var(--primary-theme-text);
+    }
+    &-more {
+      padding: 10px 20px;
+      cursor: pointer;
+    }
     &-title {
       padding: 4px 10px;
       background-color: #e7e7e7;
@@ -29,10 +37,6 @@ li.qq-song {
         &:hover {
           background-color: #eaeaea;
         }
-        .keyword {
-          font-weight: normal;
-          color: var(--primary-theme-text);
-        }
       }
     }
     &-last {

src/pages/header/component/search.tsx

@@ -6,6 +6,13 @@ import { playMusic } from '@/shared/music-shared'
 import debounce from 'lodash/debounce'
 import './search.less'
 
+const enum SearchType {
+  SONGS = 'SONGS',
+  ARTISTS = 'ARTISTS',
+  ALBUMS = 'ALBUMS',
+  PLAYLISTS = 'PLAYLISTS'
+}
+
 const Option = defineComponent({
   name: 'Option',
   props: {
@@ -92,7 +99,7 @@ const Group = defineComponent({
 })
 
 export const Search = defineComponent({
-  name: 'Search',
+  name: 'SearchInput',
   components: {
     Option,
     Group
@@ -118,13 +125,6 @@ export const Search = defineComponent({
       }
     }, 200)
 
-    const enum SearchType {
-      SONGS = 'SONGS',
-      ARTISTS = 'ARTISTS',
-      ALBUMS = 'ALBUMS',
-      PLAYLISTS = 'PLAYLISTS'
-    }
-
     const handleSelect = async (type: SearchType, id: unknown) => {
       switch (type) {
         case SearchType.SONGS:
@@ -147,10 +147,22 @@ export const Search = defineComponent({
       }
     }
 
+    const handleSearchMore = () => {
+      router.push({
+        path: '/search/song',
+        query: {
+          words: words.value
+        }
+      })
+    }
+
     const Slot = {
       prefix: () => <icon icon="search" color="#ffffff61" size={18}></icon>,
       popper: () => (
         <div class="search-popper">
+          <div class="search-popper-more" onClick={handleSearchMore}>
+            搜"<strong class="keyword">{words.value}</strong>"相关的结果
+          </div>
           <div class="search-popper-title" v-show={state.searchSuggest.songs}>
             <icon icon="facebook" color="#333" size={14}></icon>单曲
           </div>