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

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

src/components/Header.vue

@@ -13,16 +13,17 @@
           <img id="acct_mgmt_button" v-else  src="@/assets/icon-head-blue.svg" @mouseleave='isHeadHovered = false'
             width="32" height="32" @click="toggleIsAcctMenuOpen"
             class="cursor-pointer z-50" alt="user-head"
-          />       
+          />
       </div>
     </div>
   </div>
 </template>
 
-<script>
-import { ref, } from 'vue';
+<script setup>
+import { ref, onMounted, } from 'vue';
+import { useRoute } from 'vue-router';
 import { storeToRefs, } from 'pinia';
-import i18next from '@/i18n/i18n';
+import emitter from '@/utils/emitter';
 import { useLoginStore } from '@/stores/login';
 import { useAcctMgmtStore } from '@/stores/acctMgmt';
 import DspLogo from '@/components/icons/DspLogo.vue';
@@ -30,64 +31,44 @@ import { useAllMapDataStore } from '@/stores/allMapData';
 import { useConformanceStore } from '@/stores/conformance';
 import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
 
-export default {
-  data() {
-    return {
-      showMember: false,
-      i18next: i18next,
-    }
-  },
-  setup() {
-    const store = useLoginStore();
-    const { logOut } = store;
-    const allMapDataStore = useAllMapDataStore();
-    const conformanceStore = useConformanceStore();
-    const acctMgmtStore = useAcctMgmtStore();
-    const { tempFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
-    const { conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceFileName } = storeToRefs(conformanceStore);
-    const isHeadHovered = ref(false);
+const route = useRoute();
 
-    const toggleIsAcctMenuOpen = () => {
-      acctMgmtStore.toggleIsAcctMenuOpen();
-    }
+const store = useLoginStore();
+const { logOut } = store;
+const allMapDataStore = useAllMapDataStore();
+const conformanceStore = useConformanceStore();
+const acctMgmtStore = useAcctMgmtStore();
+const { tempFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
+const { conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceFileName } = storeToRefs(conformanceStore);
 
-    return { logOut, temporaryData, tempFilterId,
-      postRuleData, ruleData,
-      conformanceLogTempCheckId,
-      conformanceFilterTempCheckId,
-      allMapDataStore, conformanceStore,
-      conformanceFileName,
-      toggleIsAcctMenuOpen,
-      isHeadHovered,
-    };
-  },
-  components: {
-    DspLogo,
-  },
-  methods: {
-    /**
-     * 登出的行為
-     */
-    logOutButton() {
-      if ((this.$route.name === 'Map' || this.$route.name === 'CheckMap') && this.tempFilterId) {
-        // 傳給 Map，通知 Sidebar 要關閉。
-        this.$emitter.emit('leaveFilter', false);
-        leaveFilter(false, this.allMapDataStore.addFilterId, false, this.logOut)
-      } else if((this.$route.name === 'Conformance' || this.$route.name === 'CheckConformance')
-        && (this.conformanceLogTempCheckId || this.conformanceFilterTempCheckId)) {
-        leaveConformance(false, this.conformanceStore.addConformanceCreateCheckId, false, this.logOut)
-      } else {
-        this.logOut();
-      }
-    },
-  },
-  mounted() {
-    if (this.$route.name === 'Login' || this.$route.name === 'NotFound404') {
-      this.showMember = false
-    } else {
-      this.showMember = true;
-    }
+const isHeadHovered = ref(false);
+const showMember = ref(false);
+
+const toggleIsAcctMenuOpen = () => {
+  acctMgmtStore.toggleIsAcctMenuOpen();
+};
+
+/**
+ * 登出的行為
+ */
+function logOutButton() {
+  if ((route.name === 'Map' || route.name === 'CheckMap') && tempFilterId.value) {
+    // 傳給 Map，通知 Sidebar 要關閉。
+    emitter.emit('leaveFilter', false);
+    leaveFilter(false, allMapDataStore.addFilterId, false, logOut)
+  } else if((route.name === 'Conformance' || route.name === 'CheckConformance')
+    && (conformanceLogTempCheckId.value || conformanceFilterTempCheckId.value)) {
+    leaveConformance(false, conformanceStore.addConformanceCreateCheckId, false, logOut)
+  } else {
+    logOut();
   }
 }
 
+onMounted(() => {
+  if (route.name === 'Login' || route.name === 'NotFound404') {
+    showMember.value = false
+  } else {
+    showMember.value = true;
+  }
+});
 </script>