feat: support the leaderboard to play songs directly

Rename State under pages to make the meaning more distinct

README.md

@@ -121,5 +121,6 @@ yarn bootstrap
 - [vue-cli-plugin-electron-builder](https://github.com/nklayman/vue-cli-plugin-electron-builder)
 - [vue-cli jsx](https://github.com/vuejs/jsx-next/blob/dev/packages/babel-plugin-jsx/README-zh_CN.md)
 - [nativescript vue 3 issues](https://github.com/nativescript-vue/nativescript-vue/issues/583)
+- [nativescript-vue](https://github.com/nativescript-vue/nativescript-vue)
 - [browser module](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/)
 - [dayjs](https://day.js.org/docs/zh-CN/installation/installation)

src/api/index.ts

@@ -1,5 +1,5 @@
 import { get } from '@/utils/http'
-import { SongsBase, SongsDetail } from '@/interface/index'
+import { SongsBase, SongsDetail, SongInteface } from '@/interface/index'
 
 export const getSongUrl = async (
   id: number | number[]
@@ -19,3 +19,15 @@ export const getSongDetail = async (
   })
   return data.songs
 }
+
+export const getPlayList = async (
+  id: number
+): Promise<SongInteface.SongState['playlist'][]> => {
+  const data = await get<{ playlist: SongInteface.SongState['playlist'][] }>(
+    '/api/playlist/detail',
+    {
+      id
+    }
+  )
+  return data.playlist
+}

src/interface/app.ts

@@ -19,5 +19,5 @@ export interface ElectronWindowEventMap extends WindowEventMap {
   restore: Event
 }
 
-export type AllMutations = FooterInteface.Mutations &
+export type AllMutations = FooterInteface.FooterMutations &
   FindMusicInteface.RecommendMutations

src/pages/footer/component/lyrice-embed/index.tsx

@@ -19,7 +19,7 @@ import {
   State as LayoutState,
   Size
 } from '@/layout/module'
-import { NAMESPACED, State, Getter } from '../../module'
+import { NAMESPACED, FooterState, Getter } from '../../module'
 import classnams from 'classnames'
 import { debounce } from 'lodash'
 import './index.less'
@@ -42,7 +42,9 @@ export const PlayLyrice = defineComponent({
     const offset = ref(0)
     const transition = ref(visible.value)
 
-    const { useState, useGetter } = uesModuleStore<State, Getter>(NAMESPACED)
+    const { useState, useGetter } = uesModuleStore<FooterState, Getter>(
+      NAMESPACED
+    )
     const LayoutModule = uesModuleStore<LayoutState>(LayoutNamespace)
 
     const { screenSize } = toRefs(LayoutModule.useState())

src/pages/footer/component/lyrice-float/browser-lyrice.tsx

@@ -5,7 +5,7 @@ import {
   NAMESPACED as LayoutNamespace,
   State as LayoutState
 } from '@/layout/module'
-import { NAMESPACED, State, Getter, Mutations } from '../../module'
+import { NAMESPACED, FooterState, Getter, FooterMutations } from '../../module'
 import { Platform } from '@/config/build'
 import LyriceFlash from './index'
 import { importIpc } from '@/electron/event/ipc-browser'
@@ -26,16 +26,17 @@ export const ipcUpdateLyrice = (type: UpdateType, payload?: unknown) => {
 export const BrowserLyriceFlash = defineComponent({
   name: 'BrowserLyriceFlash',
   setup() {
-    const { useState, useGetter, useMutations } = uesModuleStore<State, Getter>(
-      NAMESPACED
-    )
+    const { useState, useGetter, useMutations } = uesModuleStore<
+      FooterState,
+      Getter
+    >(NAMESPACED)
     const LayoutModule = uesModuleStore<LayoutState>(LayoutNamespace)
 
     const { currentTime, playing, visibleFlash } = toRefs(useState())
     const { screenSize } = toRefs(LayoutModule.useState())
 
     if (VUE_APP_PLATFORM === Platform.ELECTRON) {
-      useMutations(Mutations.VISIBLE_FLASH, true)
+      useMutations(FooterMutations.VISIBLE_FLASH, true)
     }
 
     const lyrice = computed(() =>

src/pages/footer/component/music-controller/index.tsx

@@ -5,10 +5,10 @@ import { Block } from '@/components/process-bar/block'
 import { ProgressBar } from '@/components/process-bar/index'
 import {
   NAMESPACED,
-  State,
+  FooterState,
   Getter,
-  Actions,
-  Mutations,
+  FooterActions,
+  FooterMutations,
   findMusicIndex,
   PlayMode
 } from '../../module'
@@ -34,7 +34,7 @@ export const MusicControl = defineComponent({
     const block = ref<Block[]>([])
 
     const { useState, useMutations, useGetter, useActions } = uesModuleStore<
-      State,
+      FooterState,
       Getter
     >(NAMESPACED)
 
@@ -77,10 +77,10 @@ export const MusicControl = defineComponent({
         }
         const nextMusic = musicStack.value[next]
 
-        await useActions(Actions.SET_MUSIC_LYRICS, nextMusic.id)
-        useMutations(Mutations.SET_MUSIC_URL, nextMusic)
-        useMutations(Mutations.PAUES_MUSIC)
-        useMutations(Mutations.PLAY_MUSIC)
+        await useActions(FooterActions.SET_MUSIC_LYRICS, nextMusic.id)
+        useMutations(FooterMutations.SET_MUSIC_URL, nextMusic)
+        useMutations(FooterMutations.PAUES_MUSIC)
+        useMutations(FooterMutations.PLAY_MUSIC)
       }
     }
 
@@ -93,15 +93,15 @@ export const MusicControl = defineComponent({
 
     const handlePlayPaues = () => {
       if (playing.value) {
-        useMutations(Mutations.PAUES_MUSIC)
+        useMutations(FooterMutations.PAUES_MUSIC)
       } else {
-        useMutations(Mutations.PLAY_MUSIC)
+        useMutations(FooterMutations.PLAY_MUSIC)
       }
     }
 
     const handleVisibleFlash = () => {
       if (VUE_APP_PLATFORM === Platform.BROWSER) {
-        useMutations(Mutations.VISIBLE_FLASH, !visibleFlash.value)
+        useMutations(FooterMutations.VISIBLE_FLASH, !visibleFlash.value)
       }
       if (VUE_APP_PLATFORM === Platform.ELECTRON) {
         importIpc()
@@ -123,12 +123,12 @@ export const MusicControl = defineComponent({
         (musicDetail.dt / 1000) * (indicatorX / indicatorW),
         6
       )
-      useMutations(Mutations.CURRENT_TIME, time)
+      useMutations(FooterMutations.CURRENT_TIME, time)
     }
 
     const loadedmetadata = () => {
       if (audioElement.value) {
-        useMutations(Mutations.SET_DURATION, audioElement.value.duration)
+        useMutations(FooterMutations.SET_DURATION, audioElement.value.duration)
       }
     }
 
@@ -148,7 +148,7 @@ export const MusicControl = defineComponent({
         if (width) {
           currentIndicator.value = width > 100 ? 100 : width
         }
-        useMutations(Mutations.UPDATE_CURRENT_TIME, time)
+        useMutations(FooterMutations.UPDATE_CURRENT_TIME, time)
       }
     }
 
@@ -173,7 +173,7 @@ export const MusicControl = defineComponent({
     }
 
     const ended = async () => {
-      useMutations(Mutations.ENDED_MUSIC)
+      useMutations(FooterMutations.ENDED_MUSIC)
       switchMusic(Direction.FORWARD)
     }
 
@@ -192,8 +192,8 @@ export const MusicControl = defineComponent({
           playingIcon.value = 'play'
         })
         audioElement.value.addEventListener('canplay', () => {
-          useMutations(Mutations.CAN_PLAY, true)
-          useMutations(Mutations.PLAY_MUSIC)
+          useMutations(FooterMutations.CAN_PLAY, true)
+          useMutations(FooterMutations.PLAY_MUSIC)
         })
       }
     })

src/pages/footer/component/volume-history/history.tsx

@@ -11,11 +11,11 @@ import {
 import { uesModuleStore } from '@/hooks/index'
 import {
   NAMESPACED,
-  State,
+  FooterState,
   Getter,
   Music,
-  Mutations,
-  Actions
+  FooterMutations,
+  FooterActions
 } from '../../module'
 import { Table } from '@/components/table'
 import { formatTime } from '@/utils/index'
@@ -68,15 +68,15 @@ export const MusicHistory = defineComponent({
     const isPlayListVisible = ref(true)
 
     const { useState, useActions, useMutations } = uesModuleStore<
-      State,
+      FooterState,
       Getter
     >(NAMESPACED)
 
     const { musicStack, musciHistory } = toRefs(useState())
 
     const handleDbClick = (item: Music) => {
-      useMutations(Mutations.PAUES_MUSIC)
-      useActions(Actions.SET_MUSIC, item.id)
+      useMutations(FooterMutations.PAUES_MUSIC)
+      useActions(FooterActions.SET_MUSIC, item.id)
     }
 
     const trigger = () => {

src/pages/footer/component/volume-history/index.tsx

@@ -2,7 +2,7 @@ import { defineComponent, onMounted, ref } from 'vue'
 import { ProgressBar as VolumeBar } from '@/components/process-bar/index'
 import { uesModuleStore } from '@/hooks/index'
 import { toFixed } from '@/utils/index'
-import { NAMESPACED, State, Getter, Mutations } from '../../module'
+import { NAMESPACED, FooterState, Getter, FooterMutations } from '../../module'
 import { AsyncComponent } from './history'
 import './index.less'
 
@@ -15,7 +15,7 @@ export const VolumeAndHistory = defineComponent({
     const draging = ref(false)
     const visible = ref(false)
 
-    const { useGetter, useMutations } = uesModuleStore<State, Getter>(
+    const { useGetter, useMutations } = uesModuleStore<FooterState, Getter>(
       NAMESPACED
     )
 
@@ -26,13 +26,14 @@ export const VolumeAndHistory = defineComponent({
       current.value = v
       const volume = toFixed(v / 100, 2)
       if (volume) {
-        useMutations(Mutations.SET_VOLUME, volume < 0 ? 0 : volume)
+        useMutations(FooterMutations.SET_VOLUME, volume < 0 ? 0 : volume)
       }
     }
 
     onMounted(() => {
       const volume = useGetter('volume')
-      volume && useMutations(Mutations.SET_VOLUME, volume < 0 ? 0 : volume)
+      volume &&
+        useMutations(FooterMutations.SET_VOLUME, volume < 0 ? 0 : volume)
     })
 
     const slots = {