feat(layout): 重构页面布局与音乐播放组件

将 PlayMusic 组件迁移至 layout/RightButton 并重构成通用右下角按钮组件，
提取音乐播放逻辑到独立 hook `usePlayMusic`，优化模态框提示逻辑并统一滚动行为。

src/components/PlayMusic/index.vue

@@ -1,135 +0,0 @@
-<script setup lang='ts'>
-import useStore from '@/store'
-import localforage from 'localforage'
-import { storeToRefs } from 'pinia'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
-
-const { t } = useI18n()
-const router = useRouter()
-const route = useRoute()
-const audioDbStore = localforage.createInstance({
-  name: 'audioStore',
-})
-const audio = ref(new Audio())
-const settingRef = ref()
-// const audio = ref(new Audio())
-const globalConfig = useStore().globalConfig
-const { getMusicList: localMusicList, getCurrentMusic: currentMusic } = storeToRefs(globalConfig)
-// const localMusicListValue = ref(localMusicList)
-
-async function play(item: any) {
-  if (!item) {
-    return
-  }
-  // if (!audio.value.paused && !skip) {
-  //     audio.value.pause()
-
-  //     return
-  // }
-  let audioUrl = ''
-  if (!item.url) {
-    return
-  }
-  if (item.url === 'Storage') {
-    audioUrl = await audioDbStore.getItem(item.name) as string
-  }
-  else {
-    audioUrl = item.url
-  }
-  audio.value.pause()
-  audio.value.src = audioUrl
-  audio.value.play()
-}
-function playMusic(item: any, skip = false) {
-  if (!item) {
-    return
-  }
-  if (!currentMusic.value.paused && !skip) {
-    globalConfig.setCurrentMusic(item, true)
-
-    return
-  }
-  globalConfig.setCurrentMusic(item, false)
-}
-function nextPlay() {
-  // 播放下一首
-  if (localMusicList.value.length >= 1) {
-    let index = localMusicList.value.findIndex((item: any) => item.name === currentMusic.value.item.name)
-    index++
-    if (index >= localMusicList.value.length) {
-      index = 0
-    }
-    globalConfig.setCurrentMusic(localMusicList.value[index], false)
-  }
-}
-// 监听播放成后开始下一首
-function onPlayEnd() {
-  audio.value.addEventListener('ended', nextPlay)
-}
-
-function enterConfig() {
-  router.push('/log-lottery/config')
-}
-function enterHome() {
-  router.push('/log-lottery')
-}
-
-onMounted(() => {
-  globalConfig.setCurrentMusic(localMusicList.value[0], true)
-  onPlayEnd()
-  // 不使用空格控制audio
-})
-onUnmounted(() => {
-  audio.value.removeEventListener('ended', nextPlay)
-})
-watch(currentMusic, (val: any) => {
-  if (!val.paused && audio.value) {
-    play(val.item)
-  }
-  else {
-    audio.value.pause()
-  }
-}, { deep: true })
-</script>
-
-<template>
-  <div ref="settingRef" class="flex flex-col gap-3">
-    <div v-if="route.path.includes('/config')" class="tooltip tooltip-left" :data-tip="t('tooltip.toHome')">
-      <div
-        class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
-        @click="enterHome"
-      >
-        <svg-icon name="home" />
-      </div>
-    </div>
-    <div v-else class="tooltip tooltip-left" :data-tip="t('tooltip.settingConfiguration')">
-      <div
-        class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
-        @click="enterConfig"
-      >
-        <svg-icon name="setting" />
-      </div>
-    </div>
-
-    <div class="tooltip tooltip-left" :data-tip="currentMusic.item ? `${currentMusic.item.name}\n\r ${t('tooltip.nextSong')}` : t('tooltip.noSongPlay')">
-      <div
-        class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
-        @click="playMusic(currentMusic.item)" @click.right.prevent="nextPlay"
-      >
-        <svg-icon :name="currentMusic.paused ? 'play' : 'pause'" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang='scss' scoped>
-details {
-
-    // display: none;
-    summary {
-        display: none;
-    }
-}
-</style>

src/components/ToTop/index.vue

@@ -1,10 +1,10 @@
 <script setup lang='ts'>
-
+import { ChevronUp } from 'lucide-vue-next'
 </script>
 
 <template>
   <div class="fixed z-50 flex items-center justify-center w-10 h-10 rounded-full shadow-lg cursor-pointer right-12 bottom-12 bg-slate-700 hover:bg-slate-600">
-    <svg-icon name="toTop" />
+    <ChevronUp />
   </div>
 </template>