web: sign out

Author: wuhan005

web/src/components/Header.vue

@@ -23,11 +23,13 @@
       Sandbox
     </t-menu-item>
     <template #operations>
-      <t-button variant="text" shape="square">
-        <template #icon>
-          <t-icon name="ellipsis"/>
-        </template>
-      </t-button>
+      <t-dropdown :options="[{ content: 'Sign Out', value: 'sign-out' }]" @click="onClickDropDown">
+        <t-button variant="text" shape="square">
+          <template #icon>
+            <t-icon name="ellipsis"/>
+          </template>
+        </t-button>
+      </t-dropdown>
     </template>
   </t-head-menu>
 </template>
@@ -36,14 +38,26 @@
 import {ref} from 'vue'
 import {useRoute, useRouter} from 'vue-router'
 import {MenuValue} from "tdesign-vue-next";
+import {DropdownOption} from "tdesign-vue-next";
+import {useAuthStore} from "@/store";
 
 const route = useRoute()
 const router = useRouter()
 const menuValue = ref(route.name)
+const authStore = useAuthStore()
 
 const onChange = (value: MenuValue) => {
   router.push({name: value.toString()})
 }
+
+const onClickDropDown = (dropdownItem: DropdownOption, context: { e: MouseEvent }) => {
+  switch (dropdownItem.value) {
+    case 'sign-out':
+      authStore.cleanToken()
+      router.push({name: 'signIn'})
+      break
+  }
+}
 </script>
 
 <style scoped lang="scss">