96 lines
3.3 KiB
Vue
96 lines
3.3 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-slate-950">
|
|
<div class="max-w-6xl mx-auto p-6">
|
|
<h1 class="text-3xl font-bold text-slate-100 mb-6">Канвасы</h1>
|
|
|
|
<!-- Canvas Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<div v-for="canvas in canvases" :key="canvas.id"
|
|
class="bg-slate-900 border border-slate-700 rounded-xl p-6 hover:border-blue-500 transition-colors">
|
|
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-slate-100">{{ canvas.name }}</h3>
|
|
<p class="text-sm text-slate-400">{{ canvas.description }}</p>
|
|
</div>
|
|
<div class="text-xs text-slate-500">
|
|
{{ new Date(canvas.updatedAt).toLocaleDateString('ru-RU') }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<span class="px-2 py-1 bg-slate-800 text-slate-300 rounded text-xs">
|
|
{{ canvas.isPublic ? 'Публичный' : 'Личный' }}
|
|
</span>
|
|
<span class="px-2 py-1 bg-slate-800 text-slate-300 rounded text-xs">
|
|
{{ canvas.nodes?.length || 0 }} узлов
|
|
</span>
|
|
</div>
|
|
|
|
<NuxtLink :to="`/canvas/${canvas.id}`"
|
|
class="px-3 py-1 bg-blue-600 hover:bg-blue-500 text-white rounded text-sm transition-colors">
|
|
Открыть
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create New Canvas -->
|
|
<div class="bg-slate-900 border border-slate-700 rounded-xl p-6 border-dashed hover:border-blue-500 transition-colors">
|
|
<div class="flex flex-col items-center justify-center h-full min-h-[200px]">
|
|
<div class="text-4xl mb-4">+</div>
|
|
<h3 class="text-lg font-semibold text-slate-100 mb-2">Создать канвас</h3>
|
|
<p class="text-sm text-slate-400 text-center mb-4">
|
|
Создайте новую ментальную карту
|
|
</p>
|
|
<button @click="createNewCanvas"
|
|
class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded text-sm transition-colors">
|
|
Создать
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useAuth } from '~/composables/useAuth'
|
|
|
|
const auth = useAuth()
|
|
const router = useRouter()
|
|
|
|
// Mock canvases data - replace with actual API call
|
|
const canvases = ref([
|
|
{
|
|
id: 'xflow-project',
|
|
name: 'Обзор Проекта XFlow',
|
|
description: 'Основная ментальная карта проекта',
|
|
isPublic: true,
|
|
updatedAt: new Date().toISOString(),
|
|
nodes: 11
|
|
},
|
|
{
|
|
id: 'demo',
|
|
name: 'Демо канвас',
|
|
description: 'Пример ментальной карты',
|
|
isPublic: true,
|
|
updatedAt: new Date().toISOString(),
|
|
nodes: 5
|
|
}
|
|
])
|
|
|
|
const createNewCanvas = () => {
|
|
// Redirect to flow editor with new canvas
|
|
router.push('/canvas/new-canvas')
|
|
}
|
|
|
|
// Redirect to specific canvas if ID is provided
|
|
onMounted(() => {
|
|
if (auth.isAuthenticated.value) {
|
|
// Load user's canvases
|
|
console.log('Loading canvases for user:', auth.user.value?.email)
|
|
}
|
|
})
|
|
</script>
|