Migrate all Vue components from Options API to <script setup>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/File/UploadModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog :visible="uploadModal" modal :style="{ width: '90vw', height: '90vh' }" :contentClass="contentClass" @update:visible="$emit('closeModal', $event)">
+  <Dialog :visible="uploadModal" modal :style="{ width: '90vw', height: '90vh' }" :contentClass="contentClass" @update:visible="emit('closeModal', $event)">
     <template #header>
       <div class="py-5">
       </div>
@@ -14,70 +14,61 @@
     </label>
   </Dialog>
 </template>
-<script>
-import IconUploarding from '../icons/IconUploarding.vue';
-import { uploadFailedFirst } from '@/module/alertModal.js'
+<script setup>
+import { onBeforeUnmount, } from 'vue';
 import { storeToRefs } from 'pinia';
+import IconUploarding from '../icons/IconUploarding.vue';
+import { uploadFailedFirst } from '@/module/alertModal.js';
 import { useFilesStore } from '@/stores/files';
 
-export default {
-  props: ['uploadModal'],
-  setup() {
-    const filesStore = useFilesStore();
-    const { uploadFileName } = storeToRefs(filesStore);
+defineProps(['uploadModal']);
+const emit = defineEmits(['closeModal']);
 
-    return { filesStore, uploadFileName }
-  },
-  data() {
-    return {
-      contentClass: 'h-full',
-    }
-  },
-  components: {
-    IconUploarding,
-  },
-  methods: {
-    /**
-     * 上傳的行為
-     * @param {event} event input 傳入的事件
-     */
-    async upload(event) {
-      const fileInput = document.getElementById('uploadFiles');
-      const target = event.target;
-      const formData = new FormData();
-      let uploadFile;
+const filesStore = useFilesStore();
+const { uploadFileName } = storeToRefs(filesStore);
 
-      // 判斷是否有檔案
-      if(target && target.files) {
-        uploadFile = target.files[0];
-      }
-      // 判斷檔案大小不可超過 90MB (90(MB)*1024(KB)*1024(Bytes)=94,371,840)
-      if(uploadFile.size >= 94371840) {
-        fileInput.value = '';
-        return uploadFailedFirst('size');
-      }
-      // 將檔案加進 formData，欄位一定要「csv」
-      formData.append('csv', uploadFile);
-      // 呼叫第一階段上傳 API
-      if(uploadFile) {
-        await this.filesStore.upload(formData);
-      }
-      if (uploadFile.name.endsWith('.csv')) {
-        this.uploadFileName = uploadFile.name.slice(0, -4);
-      } else {
-        // 處理錯誤或無效的文件格式
-        this.uploadFileName = ''; // 或者其他適合的錯誤處理方式
-      }
-      // 清除選擇文件
-      if(fileInput) {
-        fileInput.value = '';
-      }
-    }
-  },
-  beforeUnmount() {
-    this.$emit('closeModal', false);
+const contentClass = 'h-full';
+
+/**
+ * 上傳的行為
+ * @param {event} event input 傳入的事件
+ */
+async function upload(event) {
+  const fileInput = document.getElementById('uploadFiles');
+  const target = event.target;
+  const formData = new FormData();
+  let uploadFile;
+
+  // 判斷是否有檔案
+  if(target && target.files) {
+    uploadFile = target.files[0];
+  }
+  // 判斷檔案大小不可超過 90MB (90(MB)*1024(KB)*1024(Bytes)=94,371,840)
+  if(uploadFile.size >= 94371840) {
+    fileInput.value = '';
+    return uploadFailedFirst('size');
+  }
+  // 將檔案加進 formData，欄位一定要「csv」
+  formData.append('csv', uploadFile);
+  // 呼叫第一階段上傳 API
+  if(uploadFile) {
+    await filesStore.upload(formData);
+  }
+  if (uploadFile.name.endsWith('.csv')) {
+    uploadFileName.value = uploadFile.name.slice(0, -4);
+  } else {
+    // 處理錯誤或無效的文件格式
+    uploadFileName.value = ''; // 或者其他適合的錯誤處理方式
+  }
+  // 清除選擇文件
+  if(fileInput) {
+    fileInput.value = '';
   }
 }
+
+onBeforeUnmount(() => {
+  emit('closeModal', false);
+});
 </script>
 <style scoped>
 .loader-arrow-upward {