refactor: update Header component to include logout functionality

app/components/Header/index.vue

@@ -1,19 +1,44 @@
 <script setup lang="ts">
+import type { PopconfirmProps } from 'tdesign-vue-next'
+import { useStoreLogin } from '~/stores/useStoreLogin'
+
 const router = useRouter()
 function onClickLogo() {
   router.push('/')
 }
+const visiblePopConfirmLogout = ref(false)
+const onClickLogout: PopconfirmProps['onVisibleChange'] = function (val, context = {}) {
+  if (context && context.trigger === 'confirm') {
+    const storeLogin = useStoreLogin()
+    storeLogin.logout()
+    visiblePopConfirmLogout.value = false
+    router.push('/')
+  }
+  else {
+    visiblePopConfirmLogout.value = val
+  }
+}
 </script>
 
 <template>
-  <t-header class="flex justify-between items-center p-x-10px">
+  <t-header class="flex justify-between items-center p-x-10px h-full">
     <div class="flex items-center space-x-10px cursor-pointer" @click="onClickLogo">
       <img src="/icon-128x128.png" alt="Cloudflare R2" class="w-30px h-30px">
       <h1 class="text-base">
         Oh Cloudflare R2
       </h1>
     </div>
-
-    <SwitchTheme class="w-40px" />
+    <div class="flex justify-center items-center space-x-10px">
+      <t-popconfirm
+        :visible="visiblePopConfirmLogout"
+        theme="default"
+        placement="bottom"
+        content="Are you sure you want to logout?"
+        @visible-change="onClickLogout"
+      >
+        <Icon name="material-symbols:power-settings-circle" class="text-6" />
+      </t-popconfirm>
+      <SwitchTheme class="w-30px" />
+    </div>
   </t-header>
 </template>

package.json

@@ -26,6 +26,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^3.0.0",
     "@iconify-json/flat-color-icons": "^1.1.11",
+    "@iconify-json/material-symbols": "^1.2.0",
     "@iconify-json/typcn": "^1.1.10",
     "@pinia-plugin-persistedstate/nuxt": "^1.2.1",
     "@tdesign-vue-next/nuxt": "^0.1.3",