From 55824b4a873ae6a6b33666a2cf2f5547d838f5ec Mon Sep 17 00:00:00 2001 From: Link Date: Wed, 2 Dec 2020 17:35:11 +0800 Subject: [PATCH] feat: support the leaderboard to play songs directly Rename State under pages to make the meaning more distinct --- README.md | 1 + src/api/index.ts | 14 +++++- src/interface/app.ts | 2 +- .../footer/component/lyrice-embed/index.tsx | 6 ++- .../component/lyrice-float/browser-lyrice.tsx | 11 +++-- .../component/music-controller/index.tsx | 34 ++++++------- .../component/volume-history/history.tsx | 12 ++--- .../footer/component/volume-history/index.tsx | 9 ++-- src/pages/footer/sage.ts | 48 +++++++++---------- src/pages/footer/state.ts | 4 +- src/pages/footer/view/index.tsx | 2 +- src/pages/header/component/search.tsx | 10 ++-- src/pages/header/sage.ts | 6 +-- src/pages/header/state.ts | 4 +- .../news/children/top-list/view/index.tsx | 30 +++++++++++- src/pages/sidebar/module.ts | 0 src/pages/sidebar/sage.ts | 0 src/pages/song/api/index.ts | 13 ----- src/pages/song/sage.ts | 10 ++-- src/pages/song/state.ts | 4 +- src/pages/song/view/index.tsx | 10 ++-- src/store/index.ts | 2 +- 22 files changed, 131 insertions(+), 101 deletions(-) delete mode 100644 src/pages/sidebar/module.ts delete mode 100644 src/pages/sidebar/sage.ts diff --git a/README.md b/README.md index 82d22357..4ad26ed9 100644 --- a/README.md +++ b/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) diff --git a/src/api/index.ts b/src/api/index.ts index 16e12460..0e25fe6f 100644 --- a/src/api/index.ts +++ b/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 => { + const data = await get<{ playlist: SongInteface.SongState['playlist'][] }>( + '/api/playlist/detail', + { + id + } + ) + return data.playlist +} diff --git a/src/interface/app.ts b/src/interface/app.ts index 1b00e3e0..6c60aac3 100644 --- a/src/interface/app.ts +++ b/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 diff --git a/src/pages/footer/component/lyrice-embed/index.tsx b/src/pages/footer/component/lyrice-embed/index.tsx index 05e70a62..68e379e1 100644 --- a/src/pages/footer/component/lyrice-embed/index.tsx +++ b/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(NAMESPACED) + const { useState, useGetter } = uesModuleStore( + NAMESPACED + ) const LayoutModule = uesModuleStore(LayoutNamespace) const { screenSize } = toRefs(LayoutModule.useState()) diff --git a/src/pages/footer/component/lyrice-float/browser-lyrice.tsx b/src/pages/footer/component/lyrice-float/browser-lyrice.tsx index 99f1dda1..e9ec9348 100644 --- a/src/pages/footer/component/lyrice-float/browser-lyrice.tsx +++ b/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( - NAMESPACED - ) + const { useState, useGetter, useMutations } = uesModuleStore< + FooterState, + Getter + >(NAMESPACED) const LayoutModule = uesModuleStore(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(() => diff --git a/src/pages/footer/component/music-controller/index.tsx b/src/pages/footer/component/music-controller/index.tsx index 37b76503..6f2fd03b 100644 --- a/src/pages/footer/component/music-controller/index.tsx +++ b/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([]) 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) }) } }) diff --git a/src/pages/footer/component/volume-history/history.tsx b/src/pages/footer/component/volume-history/history.tsx index 0704235c..09895996 100644 --- a/src/pages/footer/component/volume-history/history.tsx +++ b/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 = () => { diff --git a/src/pages/footer/component/volume-history/index.tsx b/src/pages/footer/component/volume-history/index.tsx index bda7c6be..e37f1f0a 100644 --- a/src/pages/footer/component/volume-history/index.tsx +++ b/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( + const { useGetter, useMutations } = uesModuleStore( 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 = { diff --git a/src/pages/footer/sage.ts b/src/pages/footer/sage.ts index 90ee98d7..de518b36 100644 --- a/src/pages/footer/sage.ts +++ b/src/pages/footer/sage.ts @@ -2,20 +2,20 @@ import { toRaw } from 'vue' import { ActionTree, MutationTree, GetterTree } from 'vuex' import { isNumber, timeTos, toFixed, storage } from '@/utils/index' import { getSongUrl, getSongDetail, getLyric } from './api/index' -import { State, LocalKey } from './state' +import { FooterState, LocalKey } from './state' import { RootState } from '@/store/index' import { SongsDetail } from '@/interface' import { cloneDeep } from 'lodash' const { get, set } = storage() -export const enum Actions { +export const enum FooterActions { SET_MUSIC = 'SET_MUSIC_URL', SET_MUSIC_DEFAILT = 'SET_MUSIC_DEFAILT', SET_MUSIC_LYRICS = 'SET_MUSIC_LYRICS' } -export const enum Mutations { +export const enum FooterMutations { SET_MUSIC_URL = 'SET_MUSIC_URL', PLAY_MUSIC = 'PLAY_MUSIC', PAUES_MUSIC = 'PAUES_MUSIC', @@ -63,7 +63,7 @@ export const findMusicIndex = ( return contanier.findIndex(music => music.id === target.id) } -export const getters: GetterTree = { +export const getters: GetterTree = { musicDetail(state) { const base = cloneDeep(toRaw(state.music)) || {} return { @@ -139,8 +139,8 @@ export const getters: GetterTree = { } } -export const actions: ActionTree = { - async [Actions.SET_MUSIC]({ state, dispatch, commit }, id: number) { +export const actions: ActionTree = { + async [FooterActions.SET_MUSIC]({ state, dispatch, commit }, id: number) { const data = await getSongUrl(id) if (state.sourceElement && state.audioElement) { if (data.length) { @@ -148,20 +148,20 @@ export const actions: ActionTree = { data[0].url || `https://music.163.com/song/media/outer/url?id=${id}.mp3` state.musicUrl = url - commit(Mutations.CAN_PLAY, false) - await dispatch(Actions.SET_MUSIC_DEFAILT, id) - await dispatch(Actions.SET_MUSIC_LYRICS, id) - commit(Mutations.SET_MUSIC_URL, url) + commit(FooterMutations.CAN_PLAY, false) + await dispatch(FooterActions.SET_MUSIC_DEFAILT, id) + await dispatch(FooterActions.SET_MUSIC_LYRICS, id) + commit(FooterMutations.SET_MUSIC_URL, url) } } }, - async [Actions.SET_MUSIC_DEFAILT]({ state }, id: number | number[]) { + async [FooterActions.SET_MUSIC_DEFAILT]({ state }, id: number | number[]) { const data = await getSongDetail(id) if (data.length) { state.music = data[0] } }, - async [Actions.SET_MUSIC_LYRICS]({ state }, id: number) { + async [FooterActions.SET_MUSIC_LYRICS]({ state }, id: number) { try { const lyrics = await getLyric(id) state.musicLyricsOrigin = lyrics @@ -171,11 +171,11 @@ export const actions: ActionTree = { } } -export const mutations: MutationTree = { - [Mutations.SET_DURATION](state, duration: number) { +export const mutations: MutationTree = { + [FooterMutations.SET_DURATION](state, duration: number) { state.duration = duration }, - [Mutations.SET_PLAYLIST_TO_STACK](state, payload: SongsDetail[]) { + [FooterMutations.SET_PLAYLIST_TO_STACK](state, payload: SongsDetail[]) { payload.forEach(item => { const isExist = findMusicIndex(state.musicStack, item) === -1 if (isExist) { @@ -183,7 +183,7 @@ export const mutations: MutationTree = { } }) }, - [Mutations.SET_MUSIC_URL](state, payload: string | SongsDetail) { + [FooterMutations.SET_MUSIC_URL](state, payload: string | SongsDetail) { if (state.sourceElement && state.audioElement && state.music) { let music = toRaw(state.music) if (typeof payload === 'string') { @@ -206,41 +206,41 @@ export const mutations: MutationTree = { } } }, - [Mutations.PLAY_MUSIC](state) { + [FooterMutations.PLAY_MUSIC](state) { if (state.audioElement && !state.playing && state.canplay) { state.audioElement.play() state.playing = true } }, - [Mutations.PAUES_MUSIC](state) { + [FooterMutations.PAUES_MUSIC](state) { if (state.audioElement && state.playing && state.canplay) { state.audioElement.pause() state.playing = false } }, - [Mutations.ENDED_MUSIC](state) { + [FooterMutations.ENDED_MUSIC](state) { state.playing = false }, - [Mutations.CURRENT_TIME](state, time: number) { + [FooterMutations.CURRENT_TIME](state, time: number) { if (state.audioElement && isNumber(time)) { state.audioElement.currentTime = time } }, - [Mutations.UPDATE_CURRENT_TIME](state, time: number) { + [FooterMutations.UPDATE_CURRENT_TIME](state, time: number) { if (isNumber(time)) { state.currentTime = time } }, - [Mutations.CAN_PLAY](state, can: boolean) { + [FooterMutations.CAN_PLAY](state, can: boolean) { state.canplay = can }, - [Mutations.SET_VOLUME](state, volume: number) { + [FooterMutations.SET_VOLUME](state, volume: number) { if (state.audioElement) { state.audioElement.volume = volume set(LocalKey.VOLUME, volume) } }, - [Mutations.VISIBLE_FLASH](state, visible: boolean) { + [FooterMutations.VISIBLE_FLASH](state, visible: boolean) { state.visibleFlash = visible } } diff --git a/src/pages/footer/state.ts b/src/pages/footer/state.ts index 72846577..736caf69 100644 --- a/src/pages/footer/state.ts +++ b/src/pages/footer/state.ts @@ -22,7 +22,7 @@ export const enum LocalKey { MUSIC_HISTORY = 'music_history' } -export interface State { +export interface FooterState { // audio: AudioType playMode: PlayMode music?: SongsDetail @@ -40,7 +40,7 @@ export interface State { duration: number } -export const state: State = { +export const state: FooterState = { // audio: new BackgroundAudio(), playMode: PlayMode.TURN, musicUrl: '', diff --git a/src/pages/footer/view/index.tsx b/src/pages/footer/view/index.tsx index 2bab8b73..60047b09 100644 --- a/src/pages/footer/view/index.tsx +++ b/src/pages/footer/view/index.tsx @@ -5,7 +5,7 @@ import { MusicControl } from '../component/music-controller' import { VolumeAndHistory } from '../component/volume-history/index' import { NAMESPACED as FooterNamespace, - State as FooterState, + FooterState, Getter as FooterGetter } from '../module' import { diff --git a/src/pages/header/component/search.tsx b/src/pages/header/component/search.tsx index 99ff7ce7..9babcca8 100644 --- a/src/pages/header/component/search.tsx +++ b/src/pages/header/component/search.tsx @@ -2,12 +2,12 @@ import { defineComponent, ref, computed, toRefs, PropType } from 'vue' import { debounce } from 'lodash' import { Actions } from '../sage' import { uesModuleStore } from '@/hooks/index' -import { NAMESPACED, State } from '../module' +import { NAMESPACED, HeaderState } from '../module' import { FooterNameSpaced } from '@/modules/index' import { - State as FooterState, - Actions as FooterActions, - Mutations as FooterMutations + FooterState, + FooterActions, + FooterMutations } from '@/pages/footer/module' import './search.less' @@ -50,7 +50,7 @@ export const Search = defineComponent({ Option }, setup() { - const { useActions, useState } = uesModuleStore(NAMESPACED) + const { useActions, useState } = uesModuleStore(NAMESPACED) const footerStore = uesModuleStore(FooterNameSpaced) const words = ref('') diff --git a/src/pages/header/sage.ts b/src/pages/header/sage.ts index 0f40b53d..dda6a2a1 100644 --- a/src/pages/header/sage.ts +++ b/src/pages/header/sage.ts @@ -1,6 +1,6 @@ import { ActionTree, MutationTree } from 'vuex' import { searchSuggest } from './api/search' -import { State, SearchSuggest } from './state' +import { HeaderState, SearchSuggest } from './state' import { RootState } from '@/store/index' export const enum Actions { @@ -11,13 +11,13 @@ export const enum Mutations { SET_SEARCH_SUGGEST = 'SET_SEARCH_SUGGEST' } -export const actions: ActionTree = { +export const actions: ActionTree = { async [Actions.GET_SEARCH_SUGGEST]({ commit }, keywords: string) { const result = await searchSuggest(keywords) commit(Mutations.SET_SEARCH_SUGGEST, result) } } -export const mutations: MutationTree = { +export const mutations: MutationTree = { [Mutations.SET_SEARCH_SUGGEST](state, payload: SearchSuggest) { state.searchSuggest = payload } diff --git a/src/pages/header/state.ts b/src/pages/header/state.ts index 827f92a0..4124f2a6 100644 --- a/src/pages/header/state.ts +++ b/src/pages/header/state.ts @@ -7,10 +7,10 @@ export interface SearchSuggest { order?: string[] } -export interface State { +export interface HeaderState { searchSuggest: SearchSuggest } -export const state: State = { +export const state: HeaderState = { searchSuggest: {} } diff --git a/src/pages/news/children/top-list/view/index.tsx b/src/pages/news/children/top-list/view/index.tsx index cd3f4c7f..b39426b7 100644 --- a/src/pages/news/children/top-list/view/index.tsx +++ b/src/pages/news/children/top-list/view/index.tsx @@ -4,19 +4,42 @@ import { uesModuleStore } from '@/hooks/index' import { NAMESPACED, TopListState, TopListActions, Top } from '../module' import { ProvideInject } from '@/pages/news/constant' import { noop } from '@/utils/index' +import { SongsDetail } from '@/interface/index' +import { getPlayList } from '@/api/index' +import { + NAMESPACED as FooterNamespaced, + FooterMutations, + FooterActions, + FooterState +} from '@/pages/footer/module' import './index.less' export const TopList = defineComponent({ name: 'TopList', setup() { const { useState, useActions } = uesModuleStore(NAMESPACED) + const footer = uesModuleStore(FooterNamespaced) const { top } = toRefs(useState()) + const cacheSongListDetail = new Map() + const toPlaylistDetails = inject<(n?: Top) => void>( ProvideInject.TO_PLAYLIST_DETAILS, noop ) + const playMusic = async (songlistID: number, index: number) => { + footer.useMutations(FooterMutations.PAUES_MUSIC) + let songlist + if (cacheSongListDetail.has(songlistID)) { + songlist = cacheSongListDetail.get(songlistID) + } else { + songlist = await getPlayList(songlistID) + cacheSongListDetail.set(songlistID, songlist) + } + + footer.useActions(FooterActions.SET_MUSIC, songlist.tracks[index].id) + } const expan = computed(() => top.value.slice(0, 4)) const shrink = computed(() => top.value.slice(4)) @@ -34,8 +57,11 @@ export const TopList = defineComponent({ onClick={() => toPlaylistDetails(item)} >
- {item.tracks.map(song => ( -
+ {item.tracks.map((song, index) => ( +
playMusic(item.id, index)} + >
{song.first}
{song.second}
diff --git a/src/pages/sidebar/module.ts b/src/pages/sidebar/module.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/src/pages/sidebar/sage.ts b/src/pages/sidebar/sage.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/src/pages/song/api/index.ts b/src/pages/song/api/index.ts index 8c92ad26..e69de29b 100644 --- a/src/pages/song/api/index.ts +++ b/src/pages/song/api/index.ts @@ -1,13 +0,0 @@ -import { get } from '@/utils/http' -import {} from '@/interface/index' -import { State } from '../state' - -export const getPlayList = async (id: number): Promise => { - const data = await get<{ playlist: State['playlist'][] }>( - '/api/playlist/detail', - { - id - } - ) - return data.playlist -} diff --git a/src/pages/song/sage.ts b/src/pages/song/sage.ts index 9ec3ad65..eb17afd8 100644 --- a/src/pages/song/sage.ts +++ b/src/pages/song/sage.ts @@ -1,7 +1,7 @@ import { MutationTree, ActionTree } from 'vuex' -import { State } from './state' +import { SongState } from './state' import { RootState } from '@/store/index' -import { getPlayList } from './api/index' +import { getPlayList } from '@/api/index' export enum Actions { GET_PLAYLIST = 'GET_PLAYLIST' @@ -10,14 +10,14 @@ export enum Mutations { SET_PLAYLIST = 'SET_PLAYLIST' } -export const actions: ActionTree = { +export const actions: ActionTree = { async [Actions.GET_PLAYLIST]({ commit }, id: number) { const data = await getPlayList(id) commit(Mutations.SET_PLAYLIST, data) } } -export const mutations: MutationTree = { - [Mutations.SET_PLAYLIST](state, playlist: State['playlist']) { +export const mutations: MutationTree = { + [Mutations.SET_PLAYLIST](state, playlist: SongState['playlist']) { state.playlist = playlist } } diff --git a/src/pages/song/state.ts b/src/pages/song/state.ts index 48aa9186..5f6693c1 100644 --- a/src/pages/song/state.ts +++ b/src/pages/song/state.ts @@ -5,7 +5,7 @@ export type RequiredPartial = Merage, Partial> export type Tracks = SongsDetail -export interface State { +export interface SongState { playlist: RequiredPartial< { tracks: SongsDetail[] @@ -30,7 +30,7 @@ export interface State { > } -export const state: State = { +export const state: SongState = { playlist: { tracks: [], tags: [], diff --git a/src/pages/song/view/index.tsx b/src/pages/song/view/index.tsx index 6c62357b..92c3da47 100644 --- a/src/pages/song/view/index.tsx +++ b/src/pages/song/view/index.tsx @@ -1,15 +1,15 @@ import { defineComponent, toRaw, toRefs, watch } from 'vue' import { uesModuleStore, useRoute } from '@/hooks/index' -import { NAMESPACED, State, Actions, Tracks } from '../module' +import { NAMESPACED, SongState, Actions, Tracks } from '../module' import { Table } from '@/components/table' import { formatTime } from '@/utils/index' import { MoreThen } from '@/components/more-then/index' import dayjs from 'dayjs' import { FooterNameSpaced } from '@/modules/index' import { - State as FooterState, - Actions as FooterActions, - Mutations as FooterMutations + FooterState, + FooterActions, + FooterMutations } from '@/pages/footer/module' import { getSongUrl } from '@/api/index' import './index.less' @@ -57,7 +57,7 @@ export default defineComponent({ name: 'SongListDetails', setup() { const route = useRoute() - const { useActions, useState } = uesModuleStore(NAMESPACED) + const { useActions, useState } = uesModuleStore(NAMESPACED) const footerStore = uesModuleStore(FooterNameSpaced) useActions(Actions.GET_PLAYLIST, route.params.playlist) diff --git a/src/store/index.ts b/src/store/index.ts index 6740b2e0..6112b29a 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,6 +1,6 @@ import { createStore, MutationTree, createLogger } from 'vuex' import modules from '../modules/index' -import { Mutations as FooterMutations } from '@/pages/footer/module' +import { FooterMutations } from '@/pages/footer/module' import { AllMutations } from '@/interface/index' export const enum Mutations {