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

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

src/components/AccountMenu/AcctMenu.vue

@@ -9,7 +9,7 @@
           <!-- 這裡不使用迴圈是因為src值用變數的話會沒辦法顯示svg -->
         <li v-if="isAdmin" id="btn_acct_mgmt"
           class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
-          items-center" @click="onBtnAcctMgmtClick">          
+          items-center" @click="onBtnAcctMgmtClick">
             <span class="w-[24px] h-[24px] flex"><img src="@/assets/icon-crown.svg" alt="accountManagement"></span>
             <span class="flex ml-[8px]">{{i18next.t("AcctMgmt.acctMgmt")}}</span>
         </li>
@@ -29,110 +29,90 @@
     </div>
 </template>
 
-<script>
-import { computed, onMounted, ref, } from 'vue';
-import { mapActions, mapState, storeToRefs } from 'pinia';
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import { storeToRefs } from 'pinia';
 import i18next from '@/i18n/i18n';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { useLoginStore } from '@/stores/login';
 import { useAcctMgmtStore } from '@/stores/acctMgmt';
 import { useAllMapDataStore } from '@/stores/allMapData';
 import { useConformanceStore } from '@/stores/conformance';
 import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
+import emitter from '@/utils/emitter';
 
-export default {
-  setup() {
-    const { logOut } = useLoginStore();
-    const loginStore = useLoginStore();
-    const router = useRouter();
-    const allMapDataStore = useAllMapDataStore();
-    const conformanceStore = useConformanceStore();
-    const acctMgmtStore = useAcctMgmtStore();
-    const { tempFilterId } = storeToRefs(allMapDataStore);
-    const { conformanceLogTempCheckId } = storeToRefs(conformanceStore);
+const router = useRouter();
+const route = useRoute();
+const loginStore = useLoginStore();
+const allMapDataStore = useAllMapDataStore();
+const conformanceStore = useConformanceStore();
+const acctMgmtStore = useAcctMgmtStore();
 
-    const loginUserData = ref(null);
-    const currentViewingUserDetail = computed(() => acctMgmtStore.currentViewingUser.detail);
-    const isAdmin = ref(false);
+const { logOut } = loginStore;
+const { tempFilterId } = storeToRefs(allMapDataStore);
+const { conformanceLogTempCheckId, conformanceFilterTempCheckId } = storeToRefs(conformanceStore);
+const { userData } = storeToRefs(loginStore);
+const { isAcctMenuOpen } = storeToRefs(acctMgmtStore);
 
-    const getIsAdminValue = async () => {
-        await loginStore.getUserData();
-        loginUserData.value = loginStore.userData;
-        await acctMgmtStore.getUserDetail(loginUserData.value.username);
-        isAdmin.value = acctMgmtStore.currentViewingUser.is_admin;
-      };
-    
-    const onBtnMyAccountClick = async() => {
-      acctMgmtStore.closeAcctMenu();
-      await acctMgmtStore.getAllUserAccounts(); // in case we haven't fetched yet
-      await acctMgmtStore.setCurrentViewingUser(loginUserData.value.username);
-      await router.push('/my-account');
-    }
+const loginUserData = ref(null);
+const currentViewingUserDetail = computed(() => acctMgmtStore.currentViewingUser.detail);
+const isAdmin = ref(false);
 
-    onMounted(async () => { 
-        await getIsAdminValue();
-    });
-    
-    return {
-      logOut,
-      tempFilterId,
-      conformanceLogTempCheckId,
-      allMapDataStore,
-      conformanceStore,
-      isAdmin,
-      onBtnMyAccountClick,
-    };
-  },
-  data() {
-    return {
-      i18next: i18next,
-    }
-  },
-  computed: {
-    ...mapState(useLoginStore, ['userData']),
-    ...mapState(useAcctMgmtStore, ['isAcctMenuOpen']),
-  },
-  methods: {
-    clickOtherPlacesThenCloseMenu(){
-      const acctMgmtButton = document.getElementById('acct_mgmt_button');
-      const acctMgmtMenu = document.getElementById('account_menu');
-
-      document.addEventListener('click', (event) => {
-          if (!acctMgmtMenu.contains(event.target) && !acctMgmtButton.contains(event.target)) {
-            this.closeAcctMenu();
-          }
-      });
-    },
-    onBtnAcctMgmtClick(){
-      this.$router.push({name: 'AcctAdmin'});
-      this.closeAcctMenu();
-    },
-    onLogoutBtnClick(){
-      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();
-      }
-    },
-    ...mapActions(useLoginStore, ['getUserData']),
-    ...mapActions(useAcctMgmtStore, ['closeAcctMenu']),
-  },
-  created() {
-    this.getUserData();
-  },
-  mounted(){
-    this.clickOtherPlacesThenCloseMenu();
-  },
+const getIsAdminValue = async () => {
+  await loginStore.getUserData();
+  loginUserData.value = loginStore.userData;
+  await acctMgmtStore.getUserDetail(loginUserData.value.username);
+  isAdmin.value = acctMgmtStore.currentViewingUser.is_admin;
 };
+
+const onBtnMyAccountClick = async () => {
+  acctMgmtStore.closeAcctMenu();
+  await acctMgmtStore.getAllUserAccounts(); // in case we haven't fetched yet
+  await acctMgmtStore.setCurrentViewingUser(loginUserData.value.username);
+  await router.push('/my-account');
+};
+
+const clickOtherPlacesThenCloseMenu = () => {
+  const acctMgmtButton = document.getElementById('acct_mgmt_button');
+  const acctMgmtMenu = document.getElementById('account_menu');
+
+  document.addEventListener('click', (event) => {
+    if (acctMgmtMenu && acctMgmtButton && !acctMgmtMenu.contains(event.target) && !acctMgmtButton.contains(event.target)) {
+      acctMgmtStore.closeAcctMenu();
+    }
+  });
+};
+
+const onBtnAcctMgmtClick = () => {
+  router.push({name: 'AcctAdmin'});
+  acctMgmtStore.closeAcctMenu();
+};
+
+const onLogoutBtnClick = () => {
+  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();
+  }
+};
+
+// created
+loginStore.getUserData();
+
+// mounted
+onMounted(async () => {
+  await getIsAdminValue();
+  clickOtherPlacesThenCloseMenu();
+});
 </script>
 
 <style>
 #account_menu {
   z-index: 2147483648;
 }
-</style>
+</style>