From e148c1556e320acbcf62b0decbca4d0a3a55de61 Mon Sep 17 00:00:00 2001
From: saopig1 <4x7sw862st@gmail.com>
Date: Wed, 27 May 2026 13:57:31 +0800
Subject: [PATCH] feat(web): show current user + logout button in nav

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/src/components/Navbar.vue | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/web/src/components/Navbar.vue b/web/src/components/Navbar.vue
index 1776d59..789e865 100644
--- a/web/src/components/Navbar.vue
+++ b/web/src/components/Navbar.vue
@@ -88,6 +88,13 @@
       <RouterLink to="/settings" class="settings-btn">
         <Icon icon="mdi:cog" />
       </RouterLink>
+
+      <div v-if="session.currentUser.value" class="nav-user">
+        <span class="nav-user-name">{{ session.currentUser.value.username }}</span>
+        <button class="nav-user-logout" @click="onLogout" title="退出">
+          <Icon icon="mdi:logout" />
+        </button>
+      </div>
     </div>
   </nav>
 
@@ -114,10 +121,19 @@
 
 <script setup lang="ts">
 import { computed, ref, onMounted, onUnmounted, nextTick, reactive } from 'vue';
+import { useRouter } from 'vue-router';
 import { Icon } from '@iconify/vue';
 import { usePlayerStore } from '../stores/player.js';
+import { useSession } from '../composables/useSession.js';
 
 const store = usePlayerStore();
+const session = useSession();
+const navRouter = useRouter();
+
+async function onLogout() {
+  await session.logout();
+  navRouter.replace({ name: 'login' });
+}
 const activeBot = computed(() => store.activeBot);
 const dropdownOpen = ref(false);
 const selectorRef = ref<HTMLElement | null>(null);
@@ -643,4 +659,15 @@ onUnmounted(() => {
     }
   }
 }
+
+.nav-user {
+  display: flex; align-items: center; gap: 8px; margin-left: 12px;
+  color: var(--text-secondary); font-size: 13px;
+}
+.nav-user-logout {
+  height: 28px; width: 28px; display: grid; place-items: center;
+  border: 0; background: transparent; color: var(--text-secondary); cursor: pointer;
+  border-radius: var(--radius-sm);
+  &:hover { background: var(--bg-secondary); color: var(--text-primary); }
+}
 </style>