workbench.vue
1.65 KB
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<script setup lang="ts">
definePageMeta({
layout: false
})
const { t } = useAppI18n()
const toast = useToast()
const { logout } = useAuth()
const handleLogout = async () => {
logout()
await navigateTo('/login')
toast.add({
title: t('userMenu.logoutSuccessTitle'),
description: t('userMenu.logoutSuccessDescription'),
color: 'success'
})
}
</script>
<template>
<main class="min-h-screen bg-gradient-to-br from-default via-elevated/20 to-primary/10 px-4 py-8">
<div class="mx-auto max-w-md space-y-6">
<UCard class="shadow-sm ring-1 ring-default">
<template #header>
<div class="space-y-3">
<div class="flex items-start justify-between gap-3">
<UBadge color="primary" variant="soft" class="rounded-full">
{{ t('mobileWorkbench.badge') }}
</UBadge>
<UButton
size="sm"
color="neutral"
variant="soft"
icon="i-lucide-log-out"
:label="t('userMenu.logout')"
@click="handleLogout"
/>
</div>
<h1 class="text-2xl font-semibold text-highlighted">
{{ t('mobileWorkbench.title') }}
</h1>
<p class="text-sm leading-6 text-toned">
{{ t('mobileWorkbench.description') }}
</p>
</div>
</template>
<UButton
block
size="xl"
color="primary"
icon="i-lucide-factory"
:label="t('mobileWorkbench.actions.production')"
to="/m/production/sn-query"
/>
</UCard>
</div>
</main>
</template>