72 lines
2.4 KiB
Vue
72 lines
2.4 KiB
Vue
<template>
|
|
<div class="min-h-[calc(100vh-3.5rem)] flex flex-col items-center justify-center p-4">
|
|
<div v-if="!isAuthenticated" class="text-center max-w-md">
|
|
<h1 class="text-4xl font-bold text-blue-400 mb-4">XFlow</h1>
|
|
<p class="text-slate-400 mb-8">Obsidian Canvas PWA. Управляй задачами визуально.</p>
|
|
<NuxtLink
|
|
to="/login"
|
|
class="inline-block px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition"
|
|
>
|
|
Войти
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<div v-else class="w-full max-w-6xl">
|
|
<h1 class="text-2xl font-bold mb-6">Dashboard</h1>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<NuxtLink
|
|
to="/canvases"
|
|
class="p-6 bg-slate-800 border border-slate-700 rounded-lg hover:border-blue-500 transition group"
|
|
>
|
|
<div class="text-3xl mb-2">🗺️</div>
|
|
<h3 class="font-semibold group-hover:text-blue-400 transition">Проекты</h3>
|
|
<p class="text-sm text-slate-400">{{ homeStats.canvases }} канвасов доступно</p>
|
|
</NuxtLink>
|
|
|
|
<div class="p-6 bg-slate-800 border border-slate-700 rounded-lg">
|
|
<div class="text-3xl mb-2">✅</div>
|
|
<h3 class="font-semibold">Задачи</h3>
|
|
<p class="text-sm text-slate-400">{{ homeStats.tasks.completed }} / {{ homeStats.tasks.total }} выполнено</p>
|
|
</div>
|
|
|
|
<div class="p-6 bg-slate-800 border border-slate-700 rounded-lg">
|
|
<div class="text-3xl mb-2">🏆</div>
|
|
<h3 class="font-semibold">Ачивки</h3>
|
|
<p class="text-sm text-slate-400">{{ homeStats.achievements }} разблокировано</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ClientOnly>
|
|
<InstallPWA />
|
|
</ClientOnly>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { isAuthenticated, token } = useAuth()
|
|
const homeStats = ref({
|
|
canvases: 0,
|
|
tasks: { total: 0, completed: 0 },
|
|
achievements: 0
|
|
})
|
|
const loadingStats = ref(true)
|
|
|
|
const fetchHomeStats = async () => {
|
|
if (!isAuthenticated.value) return
|
|
try {
|
|
const data = await $fetch('/api/user/stats', {
|
|
headers: { Authorization: `Bearer ${token.value}` }
|
|
})
|
|
homeStats.value = data.stats
|
|
} catch (e) {
|
|
console.error('Failed to load home stats', e)
|
|
} finally {
|
|
loadingStats.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchHomeStats()
|
|
})
|
|
</script>
|