fix: mother board reactive problem

src/components/UploadCard.vue

@@ -6,26 +6,27 @@
     <!-- Input File -->
     <fieldset class="fieldset w-full">
       <legend class="fieldset-legend text-sm">选择或拖拽上传文件</legend>
-      <input
-        type="file"
-        ref="fileInput"
-        class="file-input w-full"
-        @change="handleFileChange"
-      />
+      <input type="file" ref="fileInput" class="file-input w-full" @change="handleFileChange" />
       <label class="fieldset-label">文件最大容量: {{ maxMemory }}MB</label>
     </fieldset>
 
     <!-- Upload Button -->
     <div class="card-actions w-full">
-      <button @click="handleClick" class="btn btn-primary grow">
-        {{ buttonText }}
+      <button @click="handleClick" class="btn btn-primary grow" :disabled="isUploading">
+        <div v-if="isUploading">
+          <span class="loading loading-spinner"></span>
+          下载中...
+        </div>
+        <div v-else>
+          {{ buttonText }}
+        </div>
       </button>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, useTemplateRef, onMounted } from "vue";
+import { computed, ref, useTemplateRef, onMounted } from "vue";
 import { useDialogStore } from "@/stores/dialog";
 import { isNull, isUndefined } from "lodash";
 
@@ -46,6 +47,7 @@ const emits = defineEmits<{
 
 const dialog = useDialogStore();
 
+const isUploading = ref(false);
 const buttonText = computed(() => {
   return isUndefined(props.downloadEvent) ? "上传" : "上传并下载";
 });
@@ -93,6 +95,7 @@ async function handleClick(event: Event): Promise<void> {
   }
 
   // Upload - 修改这里，传递bitstream.value而不是bitstream
+  isUploading.value = true;
   try {
     const ret = await props.uploadEvent(event, bitstream.value);
     if (isUndefined(props.downloadEvent)) {
@@ -117,6 +120,8 @@ async function handleClick(event: Event): Promise<void> {
     dialog.error("下载失败");
     console.error(e);
   }
+
+  isUploading.value = false;
 }
 </script>