mirror of
https://github.com/ZHANGTIANYAO1/teamspeak-music-bot.git
synced 2026-10-02 04:52:50 +08:00
feat(web): show current user + logout button in nav
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
1 parent
e2e888710a
commit
e148c1556e
1 file changed
+27
@@ -88,6 +88,13 @@
|
|||||||
<RouterLink to="/settings" class="settings-btn">
|
<RouterLink to="/settings" class="settings-btn">
|
||||||
<Icon icon="mdi:cog" />
|
<Icon icon="mdi:cog" />
|
||||||
</RouterLink>
|
</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>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
@@ -114,10 +121,19 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, ref, onMounted, onUnmounted, nextTick, reactive } from 'vue';
|
import { computed, ref, onMounted, onUnmounted, nextTick, reactive } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
import { Icon } from '@iconify/vue';
|
import { Icon } from '@iconify/vue';
|
||||||
import { usePlayerStore } from '../stores/player.js';
|
import { usePlayerStore } from '../stores/player.js';
|
||||||
|
import { useSession } from '../composables/useSession.js';
|
||||||
|
|
||||||
const store = usePlayerStore();
|
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 activeBot = computed(() => store.activeBot);
|
||||||
const dropdownOpen = ref(false);
|
const dropdownOpen = ref(false);
|
||||||
const selectorRef = ref<HTMLElement | null>(null);
|
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>
|
</style>
|
||||||
Reference in new issue
Block a user