refactor: restructuring

Refactor the module file of each page module to export a usable store

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

@@ -2,18 +2,19 @@ import { defineComponent, PropType, ref } from 'vue'
 import { Secondary } from '@/layout/secondary/secondary'
 import { MoreThen } from '@/components/more-then/index'
 import { Table } from '@/components-business/table'
-import { FormatSource, ListFormat, SongsBase } from '@/interface/index'
+import {
+  FormatSource,
+  ListFormat,
+  SongsBase,
+  FooterMutations,
+  DownloadActions
+} from '@/interface/index'
 import { formatTime, noop } from '@/utils/index'
 import { getSongUrl } from '@/api/index'
 import { RouterLink, useRouter } from 'vue-router'
 import { Button } from 'ant-design-vue'
 import { instance } from '@/components-business/fly/index'
-import {
-  useDownloadModule,
-  DownloadActions,
-  useFooterModule,
-  FooterMutations
-} from '@/modules/index'
+import { useDownloadModule, useFooterModule } from '@/modules/index'
 import { DailyCard } from '@/components-business/song-list/daily'
 import { PlayAll } from '@/components-business/button'
 import dayjs from 'dayjs'

src/interface/app.ts

@@ -1,5 +1,5 @@
 import { ComponentPublicInstance, App } from 'vue'
-import { FooterMutations, RecommendMutations } from '@/modules/index'
+import { FooterMutations, RecommendMutations } from '@/interface'
 
 export interface Music extends ComponentPublicInstance {
   $app: App

src/interface/index.ts

@@ -4,6 +4,7 @@ export * from './service/albums'
 export * from './service/artists'
 export * from './service/songs'
 export * from './service/avatar'
+export * from '@/layout/interface'
 export {
   RecommendMutations,
   RecommendState,
@@ -33,5 +34,16 @@ export {
   ArtistActions,
   ArtistMutations,
   Album,
-  Desc
+  Desc,
+  MainMutations,
+  MainState,
+  FooterMutations,
+  FooterState,
+  FooterGetter,
+  FooterActions,
+  PlayMode,
+  Lyrics,
+  DownloadState,
+  DownloadActions,
+  Downloaded
 } from '../pages/index'

src/layout/container.tsx

@@ -6,14 +6,13 @@ import {
   onMounted,
   watch
 } from 'vue'
+import { RecommendMutations, LayoutSize } from '@/interface/index'
 import classnames from 'classnames'
 import { Header } from '@/pages/header/view/index'
 import { Main } from '@/pages/main/view/index'
 import { Footer } from '@/pages/footer/view/index'
-import { useDrag, uesModuleStore } from '@/hooks/index'
-import { State, Size, NAMESPACED } from './module'
-import { RecommendNameSpaced } from '@/modules/index'
-import { RecommendMutations, RecommendState } from '@/interface/index'
+import { useDrag } from '@/hooks/index'
+import { useRecommendModule, useLayoutModule } from '@/modules/index'
 import { Platform } from '@/config/build'
 import './container.less'
 
@@ -28,13 +27,13 @@ export const Container = defineComponent({
     const container = ref()
     const target = ref()
 
-    const { useState } = uesModuleStore<State>(NAMESPACED)
-    const RecommendStore = uesModuleStore<RecommendState>(RecommendNameSpaced)
+    const { useState } = useLayoutModule()
+    const RecommendStore = useRecommendModule()
 
     const { screenSize } = toRefs(useState())
 
     watch(screenSize, v => {
-      if (v === Size.MD) {
+      if (v === LayoutSize.MD) {
         startDrag.value()
       } else {
         stopDrag.value()

src/layout/interface.ts

@@ -0,0 +1,14 @@
+export const enum LayoutSize {
+  SM = 'sm',
+  MD = 'md',
+  LG = 'lg'
+}
+
+export interface LayoutState {
+  screenSize: LayoutSize
+  rebackSize: LayoutSize
+}
+
+export const enum LayoutActions {
+  CHANGE_WINDOW_SIZE = 'CHANGE_WINDOW_SIZE'
+}

src/layout/module.ts

@@ -1,14 +1,15 @@
 import { state } from './state'
-import { actions, mutations } from './sage'
-export { LayoutActions } from './sage'
+import { mutations } from './sage'
+import { uesModuleStore } from '@/hooks/index'
+import { LayoutState } from '@/interface'
 
-export * from './state'
+export const LayoutNameSpaced = 'Layout'
 
-export const NAMESPACED = 'Layout'
+export const useLayoutModule = () =>
+  uesModuleStore<LayoutState>(LayoutNameSpaced)
 
 export default {
   namespaced: true,
   state,
-  actions,
   mutations
 }

src/layout/sage.ts

@@ -1,16 +1,8 @@
 import { MutationTree } from 'vuex'
-import { State, Size } from './state'
-export const enum LayoutActions {
-  CHANGE_WINDOW_SIZE = 'CHANGE_WINDOW_SIZE'
-}
-
-export interface Mutations {
-  [LayoutActions.CHANGE_WINDOW_SIZE]: (state: State, size: Size) => void
-}
+import { LayoutActions, LayoutState, LayoutSize } from '@/interface'
 
-export const actions = {}
-export const mutations: MutationTree<State> = {
-  [LayoutActions.CHANGE_WINDOW_SIZE](state, size: Size) {
+export const mutations: MutationTree<LayoutState> = {
+  [LayoutActions.CHANGE_WINDOW_SIZE](state, size: LayoutSize) {
     state.rebackSize = state.screenSize
     state.screenSize = size
   }

src/layout/state.ts

@@ -1,15 +1,6 @@
-export const enum Size {
-  SM = 'sm',
-  MD = 'md',
-  LG = 'lg'
-}
-
-export interface State {
-  screenSize: Size
-  rebackSize: Size
-}
+import { LayoutState, LayoutSize } from '@/interface'
 
-export const state: State = {
-  screenSize: Size.MD,
-  rebackSize: Size.MD
+export const state: LayoutState = {
+  screenSize: LayoutSize.MD,
+  rebackSize: LayoutSize.MD
 }

src/modules/index.ts

@@ -8,15 +8,15 @@ import {
   Artists,
   ArtistsNameSpaced
 } from '@/pages/news/children/module'
-import Layout, { NAMESPACED as LayoutNameSpaced } from '@/layout/module'
-import Header, { NAMESPACED as HeaderNameSpaced } from '@/pages/header/module'
+import Layout, { LayoutNameSpaced } from '@/layout/module'
+import Header, { HeaderNameSpaced } from '@/pages/header/module'
 import Footer, {
   FooterNameSpaced,
   useFooterModule
 } from '@/pages/footer/module'
-import Main, { NAMESPACED as MainNameSpaced } from '@/pages/main/module'
+import Main, { MainNameSpaced } from '@/pages/main/module'
 import Auth, { NAMESPACED as AuthNameSpaced } from '@/pages/auth/module'
-import Song, { NAMESPACED as SongNameSpaced } from '@/pages/list/module'
+import Song, { SongNameSpaced } from '@/pages/list/module'
 import Artist, { NAMESPACED as ArtistNameSpaced } from '@/pages/artist/module'
 import Download, {
   DownloadNameSpaced,
@@ -26,6 +26,10 @@ import Download, {
 export * from '@/pages/footer/module'
 export * from '@/pages/news/children/module'
 export * from '@/pages/download/module'
+export * from '@/pages/main/module'
+export * from '@/pages/header/module'
+export * from '@/pages/list/module'
+export * from '@/layout/module'
 
 export {
   useFooterModule,

src/pages/download/interface.ts

@@ -0,0 +1,14 @@
+import { SongsDetail } from '@/interface'
+
+export interface Downloaded extends SongsDetail {
+  time: string
+}
+
+export interface DownloadState {
+  downloaded: Downloaded[]
+}
+
+export const enum DownloadActions {
+  DOWNLOAD_MUSIC = 'DOWNLOAD_MUSIC'
+}
+export const enum DownloadMutations {}

src/pages/download/module.ts

@@ -1,9 +1,7 @@
 import { actions, mutations } from './sage'
-import { state, DownloadState } from './state'
+import { state } from './state'
 import { uesModuleStore } from '@/hooks/index'
-
-export { DownloadState } from './state'
-export { DownloadActions, DownloadMutations } from './sage'
+import { DownloadState } from '@/interface'
 
 export const DownloadNameSpaced = 'Download'
 

src/pages/download/sage.ts

@@ -1,15 +1,14 @@
 import { ActionTree } from 'vuex'
-import { SongsDetail, SongsBase } from '@/interface'
+import {
+  SongsDetail,
+  SongsBase,
+  DownloadState,
+  DownloadActions
+} from '@/interface'
 import { RootState } from '@/store/index'
-import { DownloadState } from './state'
 import { getSongUrl } from '@/api/index'
 import { download } from '@/utils/index'
 
-export const enum DownloadActions {
-  DOWNLOAD_MUSIC = 'DOWNLOAD_MUSIC'
-}
-export const enum DownloadMutations {}
-
 export const actions: ActionTree<DownloadState, RootState> = {
   async [DownloadActions.DOWNLOAD_MUSIC](_, song: SongsDetail) {
     const url = await getSongUrl<SongsBase[]>(song.id)

src/pages/download/state.ts

@@ -1,12 +1,4 @@
-import { SongsDetail } from '@/interface'
-
-export interface Downloaded extends SongsDetail {
-  time: string
-}
-
-export interface DownloadState {
-  downloaded: Downloaded[]
-}
+import { DownloadState } from '@/interface'
 
 export const state: DownloadState = {
   downloaded: []

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

@@ -12,16 +12,11 @@ import {
   onBeforeUnmount,
   watch
 } from 'vue'
-import {
-  NAMESPACED as LayoutNamespace,
-  State as LayoutState,
-  Size
-} from '@/layout/module'
 import { on, off, download, maxChildrenScollWidth } from '@/utils/index'
-import { uesModuleStore } from '@/hooks/index'
 import { TeleportToAny } from '@/components/teleport-layout/index'
-import { useFooterModule, FooterMutations } from '@/modules'
+import { useFooterModule, useLayoutModule } from '@/modules'
 import { Image } from '@/components/image'
+import { LayoutSize, FooterMutations } from '@/interface'
 import debounce from 'lodash/debounce'
 import classnams from 'classnames'
 import './index.less'
@@ -46,7 +41,7 @@ export const PlayLyrice = defineComponent({
     const offset = ref(0)
 
     const { useState, useGetter, useMutations } = useFooterModule()
-    const LayoutModule = uesModuleStore<LayoutState>(LayoutNamespace)
+    const LayoutModule = useLayoutModule()
 
     const { screenSize } = toRefs(LayoutModule.useState())
 
@@ -98,7 +93,7 @@ export const PlayLyrice = defineComponent({
     watch(lyrice, updateWidth)
 
     const resize = debounce(() => {
-      if (visible.value && screenSize.value !== Size.SM) {
+      if (visible.value && screenSize.value !== LayoutSize.SM) {
         updateOffset()
       }
     }, 100)

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

@@ -1,15 +1,10 @@
 import { defineComponent, computed, toRefs, watch, toRaw } from 'vue'
-import { uesModuleStore } from '@/hooks/index'
 import { toFixed } from '@/utils/index'
-import {
-  NAMESPACED as LayoutNamespace,
-  State as LayoutState
-} from '@/layout/module'
-import { useFooterModule, FooterMutations } from '@/modules'
+import { useFooterModule, useLayoutModule } from '@/modules'
 import { Platform } from '@/config/build'
-import LyriceFlash from './index'
 import { importIpc } from '@/electron/event/ipc-browser'
 import { LyriceAction, UpdateType } from '@/electron/event/action-types'
+import LyriceFlash from './index'
 import './index.less'
 
 const { VUE_APP_PLATFORM } = process.env
@@ -27,7 +22,7 @@ export const BrowserLyriceFlash = defineComponent({
   name: 'BrowserLyriceFlash',
   setup() {
     const { useState, useGetter } = useFooterModule()
-    const LayoutModule = uesModuleStore<LayoutState>(LayoutNamespace)
+    const LayoutModule = useLayoutModule()
 
     const { currentTime, playing, visibleFlash } = toRefs(useState())
     const { screenSize } = toRefs(LayoutModule.useState())

src/pages/footer/components/lyrice-float/electron-lyrice.tsx

@@ -1,7 +1,7 @@
 import { defineComponent, reactive } from 'vue'
 import LyriceFlash from './index'
-import { Size } from '@/layout/module'
-import { Lyrics } from '@/pages/footer/module'
+import { LayoutSize } from '@/interface'
+import { Lyrics } from '@/interface'
 import {
   MiddlewareView,
   LyriceAction,
@@ -14,7 +14,7 @@ import './electron-lyrice.less'
 import { ipcRenderer } from 'electron'
 
 export interface PostData {
-  screenSize: Size
+  screenSize: LayoutSize
   visibleFlash: boolean
   lyrice: Lyrics[]
   index: number
@@ -28,7 +28,7 @@ export default defineComponent({
   name: 'Lyrice',
   setup() {
     const postData: PostData = reactive({
-      screenSize: Size.SM,
+      screenSize: LayoutSize.SM,
       visibleFlash: true,
       lyrice: [
         {

src/pages/footer/components/lyrice-float/index.tsx

@@ -1,8 +1,7 @@
 import { defineComponent, toRefs, ref, onMounted, PropType } from 'vue'
 import { useDrag } from '@/hooks/index'
 import { TeleportToAny } from '@/components/teleport-layout/index'
-import { Size } from '@/layout/module'
-import { FooterGetter } from '@/pages/footer/module'
+import { LayoutSize, FooterGetter } from '@/interface'
 import { Platform } from '@/config/build'
 import classnames from 'classnames'
 import './index.less'
@@ -13,7 +12,7 @@ export const LyriceFlash = defineComponent({
   name: 'LyriceFlash',
   props: {
     screenSize: {
-      type: String as PropType<Size>,
+      type: String as PropType<LayoutSize>,
       required: true
     },
     visibleFlash: {

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

@@ -2,17 +2,12 @@ import { defineComponent, ref, toRefs, onMounted, computed, watch } from 'vue'
 import { toFixed, formatTime, sleep } from '@/utils/index'
 import { Block } from '@/components/process-bar/block'
 import { ProgressBar } from '@/components/process-bar/index'
-import {
-  useFooterModule,
-  FooterMutations,
-  findMusicIndex,
-  PlayMode,
-  FooterActions
-} from '@/modules'
-import './index.less'
+import { useFooterModule, findMusicIndex } from '@/modules'
+import { FooterActions, FooterMutations, PlayMode } from '@/interface'
 import { Platform } from '@/config/build'
 import { importIpc, importIpcOrigin } from '@/electron/event/ipc-browser'
 import { MiddlewareView, LyriceAction } from '@/electron/event/action-types'
+import './index.less'
 
 const prefix = 'music'
 const { VUE_APP_PLATFORM } = process.env