feat: 音乐管理功能优化

src/components/FileUpload/index.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 import type { IFileData } from './type'
-import { FileImage, X } from 'lucide-vue-next'
+import { ListMusic, Upload, X } from 'lucide-vue-next'
 import { ref } from 'vue'
 import { readFileData } from '@/utils/file'
 
@@ -32,13 +32,15 @@ function removeFile() {
   <div class="w-full h-full flex flex-col items-center mt-6">
     <input
       id="file-upload"
+      :disabled="fileData !== null"
       type="file" class="w-full bg-red-400/50 max-h-52 cursor-pointer absolute" style="display: none;" :accept="limitType"
       @change="handleFileChange"
     >
-    <label for="file-upload" class="w-full h-52 cursor-pointer border-2 border-dashed flex items-center justify-center overflow-hidden">
-      <img v-if="fileData" class="w-full object-cover stroke-0" :src="fileData.dataUrl" alt="">
+    <label for="file-upload" :class="fileData ? 'cursor-not-allowed' : null" class="w-full h-52 cursor-pointer border-2 border-dashed flex items-center justify-center overflow-hidden">
+      <img v-if="fileData && fileData.type.includes('image')" class="w-full object-cover stroke-0" :src="fileData.dataUrl" alt="">
+      <ListMusic v-else-if="fileData && fileData.type.includes('audio')" class="w-2/3 h-2/3 stroke-1 text-gray-500/50" />
       <div v-else class="w-full h-full flex justify-center items-center flex-col gap-4">
-        <FileImage class="w-2/3 h-2/3 stroke-1 text-gray-500/50" />
+        <Upload class="w-2/3 h-2/3 stroke-1 text-gray-500/50" />
         <span class="btn btn-neutral">点击上传</span>
       </div>
     </label>