feat(router、config): 更新配置页面组件路径

将 FaceConfig、ImageConfig 和 MusicConfig 组件的导入路径从直接引用 `.vue` 文件改为引用 `index.vue`。

src/views/Config/Global/MusicConfig/index.vue

@@ -0,0 +1,117 @@
+<script setup lang='ts'>
+import type { IMusic } from '@/types/storeType'
+import localforage from 'localforage'
+import { storeToRefs } from 'pinia'
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import PageHeader from '@/components/PageHeader/index.vue'
+import useStore from '@/store'
+import { readFileData } from '@/utils/file'
+
+const { t } = useI18n()
+const audioUploadToast = ref(0) // 0是不显示，1是成功，2是失败,3是不是图片
+const audioDbStore = localforage.createInstance({
+  name: 'audioStore',
+})
+const globalConfig = useStore().globalConfig
+
+const { getMusicList: localMusicList } = storeToRefs(globalConfig)
+const limitType = ref('audio/*')
+const localMusicListValue = ref(localMusicList)
+async function play(item: IMusic) {
+  globalConfig.setCurrentMusic(item, false)
+}
+
+function deleteMusic(item: IMusic) {
+  globalConfig.removeMusic(item.id)
+  audioDbStore.removeItem(item.name)
+  // setTimeout(()=>{
+  //     localMusicListValue.value=localMusicList
+  // },100)
+}
+function resetMusic() {
+  globalConfig.resetMusicList()
+  audioDbStore.clear()
+}
+function deleteAll() {
+  globalConfig.clearMusicList()
+  audioDbStore.clear()
+}
+async function getMusicDbStore() {
+  const keys = await audioDbStore.keys()
+  if (keys.length > 0) {
+    audioDbStore.iterate((value: string, key: string) => {
+      globalConfig.addMusic({
+        id: key + new Date().getTime().toString(),
+        name: key,
+        url: 'Storage',
+      })
+    })
+  }
+}
+async function handleFileChange(e: Event) {
+  const isAudio = /audio*/.test(((e.target as HTMLInputElement).files as FileList)[0].type)
+  if (!isAudio) {
+    audioUploadToast.value = 3
+
+    return
+  }
+  const { dataUrl, fileName } = await readFileData(((e.target as HTMLInputElement).files as FileList)[0])
+  audioDbStore.setItem(`${new Date().getTime().toString()}+${fileName}`, dataUrl)
+    .then(() => {
+      audioUploadToast.value = 1
+      getMusicDbStore()
+    })
+    .catch(() => {
+      audioUploadToast.value = 2
+    })
+}
+
+onMounted(() => {
+  getMusicDbStore()
+})
+</script>
+
+<template>
+  <div>
+    <PageHeader title="音乐管理">
+      <template #buttons>
+        <div class="flex gap-3">
+          <button class="btn btn-primary btn-sm" @click="resetMusic">
+            {{ t('button.reset') }}
+          </button>
+          <label for="explore">
+            <input
+              id="explore" type="file" class="" style="display: none" :accept="limitType"
+              @change="handleFileChange"
+            >
+            <span class="btn btn-primary btn-sm">{{ t('button.upload') }}</span>
+          </label>
+          <button class="btn btn-error btn-sm" @click="deleteAll">
+            {{ t('button.allDelete') }}
+          </button>
+        </div>
+      </template>
+    </PageHeader>
+
+    <div>
+      <ul class="p-0">
+        <li v-for="item in localMusicListValue" :key="item.id" class="flex items-center gap-6 pb-2 mb-3">
+          <div class="mr-12 overflow-hidden w-72 whitespace-nowrap text-ellipsis" :title="item.name">
+            <a class="link hover:text-primary">{{ item.name }}</a>
+          </div>
+          <div class="flex gap-3">
+            <button class="btn btn-primary btn-xs" @click="play(item)">
+              {{ t('button.play') }}
+            </button>
+            <button class="btn btn-error btn-xs" @click="deleteMusic(item)">
+              {{ t('button.delete') }}
+            </button>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped></style>