Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | 4x 4x 4x 4x 4x 4x 1x 1x | <script setup lang="ts">
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useI18n } from 'vue-i18n'
import { useAuthStore } from '@/stores/auth'
import { usePreferenceStore } from '@/stores/preference'
const auth = useAuthStore()
const preference = usePreferenceStore()
const { user } = storeToRefs(auth)
const { t } = useI18n()
const isHant = computed(() => preference.locale === 'zh-Hant')
function toggleLocale() {
preference.setLocale(isHant.value ? 'zh-Hans' : 'zh-Hant')
}
</script>
<template>
<div class="flex items-center gap-2">
<button
class="rounded-full bg-silver-100 px-2.5 py-1 text-xs font-medium text-silver-600 transition-colors hover:bg-silver-200"
@click="toggleLocale"
>
{{ isHant ? t('lang.zhHans') : t('lang.zhHant') }}
</button>
<div v-if="user" class="flex items-center gap-2">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-brand-600 text-sm font-medium text-white">
{{ user.name.slice(0, 1) }}
</div>
<span class="max-w-[7rem] truncate text-sm font-medium">{{ user.name }}</span>
<button
class="shrink-0 text-xs text-slate-400 transition-colors hover:text-slate-600"
@click="auth.logout()"
>{{ t('auth.logout') }}</button>
</div>
<button
v-else
class="rounded-full bg-brand-600 px-4 py-1.5 text-sm font-medium text-white transition-colors hover:bg-brand-700"
@click="auth.login()"
>
{{ t('auth.login') }}
</button>
</div>
</template> |