56 lines
2.1 KiB
Vue
56 lines
2.1 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="/canvas"
|
|
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">Canvas</h3>
|
|
<p class="text-sm text-slate-400">Визуальное управление задачами</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">{{ completedTasks }} / {{ totalTasks }} выполнено</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">{{ achievements }} разблокировано</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { isAuthenticated } = useAuth()
|
|
const { stats: achievementStats, loadAchievements } = useAchievements()
|
|
|
|
const completedTasks = computed(() => achievementStats.value.completedTasks)
|
|
const totalTasks = computed(() => 3) // mock total from canvas
|
|
const achievements = computed(() => achievementStats.value.total)
|
|
|
|
onMounted(() => {
|
|
if (isAuthenticated.value) {
|
|
loadAchievements()
|
|
}
|
|
})
|
|
</script>
|