perf: optimization

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

@@ -74,7 +74,7 @@
     }
     &--lyrice {
       flex: 1;
-      width: 76%;
+      width: 100%;
       overflow: hidden;
       &-contanier {
         padding: calc(50% + 50px) 10px;

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

@@ -9,7 +9,8 @@ import {
   ref,
   nextTick,
   onMounted,
-  onBeforeUnmount
+  onBeforeUnmount,
+  watch
 } from 'vue'
 import {
   NAMESPACED as LayoutNamespace,
@@ -40,6 +41,7 @@ export const PlayLyrice = defineComponent({
     const { visible } = toRefs(props)
     const disabled = ref(true)
     const contanier = ref()
+    const lyriceContanier = ref()
     const offset = ref(0)
     const transition = ref(visible.value)
 
@@ -81,6 +83,13 @@ export const PlayLyrice = defineComponent({
       }
     })
 
+    watch(lyrice, () => {
+      nextTick(() => {
+        // lyrice
+        console.log(lyriceContanier.value)
+      })
+    })
+
     const resize = debounce(() => {
       if (visible.value && screenSize.value !== Size.SM) {
         updateOffset()
@@ -143,7 +152,10 @@ export const PlayLyrice = defineComponent({
                         onStart={() => (disabled.value = true)}
                         onStop={() => (disabled.value = false)}
                       >
-                        <ul class={`${prefix}-right--lyrice-contanier`}>
+                        <ul
+                          class={`${prefix}-right--lyrice-contanier`}
+                          ref={lyriceContanier}
+                        >
                           {lyrice.value.map((item, i) => (
                             <div
                               class={classnams({

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

@@ -14,8 +14,7 @@ import {
   FooterState,
   Getter,
   Music,
-  FooterMutations,
-  LocalKey
+  FooterMutations
 } from '../../module'
 import { Table } from '@/components/table'
 import { formatTime, on, off, storage } from '@/utils/index'
@@ -56,7 +55,9 @@ const columns = [
   {
     width: 40,
     customRender: ({ text }: { text: SongsDetail }) => {
-      const { useMutations } = uesModuleStore<FooterState, Getter>(NAMESPACED)
+      const { useMutations, useState } = uesModuleStore<FooterState, Getter>(
+        NAMESPACED
+      )
 
       return (
         <div>
@@ -67,14 +68,9 @@ const columns = [
                 useMutations(FooterMutations.REMOVE_STACK, text.id)
               }
               if (text.type === 'history') {
-                const data = get(LocalKey.MUSIC_HISTORY, {
-                  parser: 'object'
-                })
-                if (data) {
-                  remove(data, (item: SongsDetail) => item.id === text.id)
-                  set(LocalKey.MUSIC_HISTORY, JSON.stringify(data))
-                  useMutations(FooterMutations.REMOVE_HISTORY, text.id)
-                }
+                const { musciHistory } = useState()
+                remove(musciHistory, (item: SongsDetail) => item.id === text.id)
+                useMutations(FooterMutations.REMOVE_HISTORY, text.id)
               }
             }}
           >

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

@@ -15,10 +15,10 @@ export const VolumeAndHistory = defineComponent({
     const draging = ref(false)
     const visible = ref(false)
 
-    const { useGetter, useMutations } = uesModuleStore<FooterState, Getter>(
+    const { useMutations, useState } = uesModuleStore<FooterState, Getter>(
       NAMESPACED
     )
-    const volume = useGetter('volume')
+    const { volume } = useState()
     const current = ref(volume * 100)
 
     const updateCurrent = (v: number) => {
@@ -30,7 +30,7 @@ export const VolumeAndHistory = defineComponent({
     }
 
     onMounted(() => {
-      const volume = useGetter('volume')
+      const { volume } = useState()
       volume &&
         useMutations(FooterMutations.SET_VOLUME, volume < 0 ? 0 : volume)
     })

src/pages/footer/sage.ts

@@ -1,23 +1,21 @@
 import { toRaw } from 'vue'
 import { ActionTree, MutationTree, GetterTree } from 'vuex'
-import { isNumber, timeTos, toFixed, storage } from '@/utils/index'
+import { isNumber, timeTos, toFixed } from '@/utils/index'
 import { getSongUrl, getSongDetail, getLyric } from './api/index'
-import { FooterState, LocalKey } from './state'
+import { FooterState } from './state'
 import { RootState } from '@/store/index'
 import { SongsDetail, SongsBase } from '@/interface'
 import cloneDeep from 'lodash/cloneDeep'
 import remove from 'lodash/remove'
 
-const { get, set } = storage()
-
 export const enum FooterActions {
   SET_MUSIC = 'SET_MUSIC_URL',
   SET_MUSIC_DEFAILT = 'SET_MUSIC_DEFAILT',
   SET_MUSIC_LYRICS = 'SET_MUSIC_LYRICS'
 }
 
 export const enum FooterMutations {
-  SET_MUSIC_URL = 'SET_MUSIC_URL',
+  SET_MUSIC_URL = 'SET_MUSIC_SINGLE_URL',
   PLAY_MUSIC = 'PLAY_MUSIC',
   PAUES_MUSIC = 'PAUES_MUSIC',
   ENDED_MUSIC = 'ENDED_MUSIC',
@@ -76,12 +74,6 @@ export const getters: GetterTree<FooterState, RootState> = {
       url: state.musicUrl
     }
   },
-  volume(state) {
-    const volume = get(LocalKey.VOLUME, {
-      parser: 'number'
-    })
-    return volume || state.audioElement?.volume
-  },
   musicLyrics(state) {
     const allDt = state.duration
     const tp1 = (state.musicLyricsOrigin || '').trim().split('\n')
@@ -219,7 +211,6 @@ export const mutations: MutationTree<FooterState> = {
           ...toRaw(music),
           type: 'history'
         })
-        set(LocalKey.MUSIC_HISTORY, JSON.stringify(toRaw(state.musciHistory)))
       }
       if (isRepeatStack) {
         state.musicStack.push({
@@ -260,7 +251,7 @@ export const mutations: MutationTree<FooterState> = {
   [FooterMutations.SET_VOLUME](state, volume: number) {
     if (state.audioElement) {
       state.audioElement.volume = volume
-      set(LocalKey.VOLUME, volume)
+      state.volume = volume
     }
   },
   [FooterMutations.VISIBLE_FLASH](state, visible: boolean) {

src/pages/footer/state.ts

@@ -1,9 +1,6 @@
 import { Artists, SongsDetail } from '@/interface/index'
 import { PostData } from './components/lyrice-float/electron-lyrice'
 import { Size } from '@/layout/module'
-import { storage } from '@/utils/index'
-
-const { get } = storage()
 
 export type Music = SongsDetail
 
@@ -17,11 +14,6 @@ export const enum PlayMode {
   TURN = 'turn'
 }
 
-export const enum LocalKey {
-  VOLUME = 'volume',
-  MUSIC_HISTORY = 'music_history'
-}
-
 export interface FooterState {
   // audio: AudioType
   playMode: PlayMode
@@ -38,19 +30,18 @@ export interface FooterState {
   visibleFlash: boolean
   electronLyrice: PostData
   duration: number
+  volume: number
 }
 
 export const state: FooterState = {
   // audio: new BackgroundAudio(),
   playMode: PlayMode.TURN,
   musicUrl: '',
   musicLyricsOrigin: '',
-  musciHistory:
-    ((get(LocalKey.MUSIC_HISTORY, {
-      parser: 'object'
-    }) as unknown) as SongsDetail[]) || [],
+  musciHistory: [],
   musicStack: [],
   currentTime: 0,
+  volume: 1,
   playing: false,
   canplay: false,
   audioElement: null,
@@ -73,7 +64,6 @@ export interface Getter {
   musicDetail: {
     url: string
   } & SongsDetail
-  volume: number
   musicLyrics: Lyrics[]
   musicDes: {
     author: Artists[]

src/store/index.ts

@@ -69,7 +69,12 @@ if (getNodeEnv() === 'development') {
 plugins.push(
   createPersistedState({
     key: 'RADISHES-VUEX',
-    paths: ['Auth.user', 'Header.themeColor']
+    paths: [
+      'Auth.user',
+      'Header.themeColor',
+      'Footer.musciHistory',
+      'Footer.volume'
+    ]
   })
 )