feat(game): 增加退出登录

packages/game/src/layouts/components/Avatar.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <el-popover
+      placement="bottom"
+      :width="130"
+      trigger="click"
+      :show-arrow="false"
+      popper-class="avatar-popover"
+    >
+      <template #reference>
+        <div class="avatar">
+          <span>{{ userStore.username }}</span>
+        </div>
+      </template>
+      <template #default>
+        <div class="menu">
+          <div v-if="isAdmin"><Apple width="20" />后台管理</div>
+          <div @click="logout"><CircleClose width="20" />退出账号</div>
+        </div>
+      </template>
+    </el-popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ElPopover } from 'element-plus'
+import { Apple, CircleClose } from '@element-plus/icons-vue'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useUserStore } from '@/store'
+
+const router = useRouter()
+const userStore = useUserStore()
+const isAdmin = computed(() => userStore.role === 1)
+
+// 退出登录
+const logout = () => {
+  localStorage.removeItem('token')
+  router.push('/login')
+}
+</script>
+
+<style scoped lang="less">
+.avatar {
+  cursor: pointer;
+}
+
+.menu {
+  width: 125px;
+  div {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 10px;
+
+    &:hover {
+      cursor: pointer;
+      background-color: #262335;
+    }
+  }
+}
+</style>
+<style>
+.avatar-popover {
+  background: #1e1c2b !important;
+}
+</style>

packages/game/src/layouts/components/NavHeader.vue

@@ -16,7 +16,7 @@
     </div>
 
     <div class="right">
-      <span>{{ userStore.username }}</span>
+      <Avatar />
       <span
         v-if="userStore.role === 1"
         class="admin"
@@ -35,6 +35,7 @@ import { CloseBold, Expand } from '@element-plus/icons-vue'
 import { ref } from 'vue'
 import NavSide from './NavSide.vue'
 import { useRouter } from 'vue-router'
+import Avatar from './Avatar.vue'
 
 const userStore = useUserStore()
 const router = useRouter()