edit account and logout feature

src/components/AccountMenu/AcctMenu.vue

@@ -21,7 +21,7 @@
         </li>
         <li id="btn_logout_in_menu"
           class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
-          items-center">
+          items-center" @click="onLogoutBtnClick">
             <span class="w-[24px] h-[24px] flex"><img src="@/assets/icon-logout.svg"></span>
             <span class="flex ml-[8px]">{{i18next.t("AcctMgmt.Logout")}}</span>
         </li>
@@ -30,20 +30,39 @@
 </template>
 
 <script>
-import { mapActions, mapState } from 'pinia';
+import { computed, } from 'vue';
+import { mapActions, mapState, storeToRefs } from 'pinia';
 import i18next from '@/i18n/i18n';
-import loginStore from '@/stores/login.js';
+import LoginStore from '@/stores/login.js';
 import AcctMgmtStore from '@/stores/acctMgmt';
+import AllMapDataStore from '@/stores/allMapData.js';
+import ConformanceStore from '@/stores/conformance.js';
+import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
 
 export default {
+  setup() {
+    const { logOut } = LoginStore();
+    const allMapDataStore = AllMapDataStore();
+    const conformanceStore = ConformanceStore();
+    const acctMgmtStore = AcctMgmtStore();
+    const { tempFilterId } = storeToRefs(allMapDataStore);
+    const { conformanceLogTempCheckId } = storeToRefs(conformanceStore);
+
+    const isAcctMenuOpen = computed(() => acctMgmtStore.isAcctMenuOpen);
+
+    return { logOut, tempFilterId,
+      conformanceLogTempCheckId,
+      allMapDataStore, conformanceStore,
+      isAcctMenuOpen,
+    };
+  },
   data() {
     return {
       i18next: i18next,
     }
   },
   computed: {
-    ...mapState(loginStore, ['userData']),
-    ...mapState(AcctMgmtStore, ['isAcctMenuOpen']),
+    ...mapState(LoginStore, ['userData']),
   },
   methods: {
     clickOtherPlacesThenCloseMenu(){
@@ -58,8 +77,21 @@ export default {
     },
     onBtnAcctMgmtClick(){
       this.$router.push({name: 'AcctAdmin'});
+      this.closeAcctMenu();
     },
-    ...mapActions(loginStore, ['getUserData']),
+    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(LoginStore, ['getUserData']),
     ...mapActions(AcctMgmtStore, ['closeAcctMenu']),
   },
   created() {

src/components/Header.vue

@@ -6,10 +6,6 @@
       </figure>
       <div class="flex justify-between items-center relative"
         v-show="showMember">
-        <!-- TODO: 換成人頭按鈕 帳號管理功能 -->
-        <button id="logout_btn" class="btn btn-sm btn-neutral mr-2" @click.prevent="logOutButton">
-          Logout
-        </button>
         <img id="acct_mgmt_button" src="@/assets/icon-head-black.svg" width="32" height="32" 
           class="cursor-pointer"  @click="onAcctHeadClick"
         />