105 lines
3.6 KiB
Vue
105 lines
3.6 KiB
Vue
<template>
|
||
<div class="min-h-screen bg-slate-950">
|
||
<div class="max-w-4xl mx-auto p-6">
|
||
<!-- Profile Header -->
|
||
<div class="bg-slate-900 border border-slate-700 rounded-xl p-6 mb-6">
|
||
<div class="flex items-start gap-4">
|
||
<img :src="profile.avatar" :alt="profile.displayName"
|
||
class="w-20 h-20 rounded-full bg-slate-800" />
|
||
<div class="flex-1">
|
||
<h1 class="text-2xl font-bold text-slate-100">{{ profile.displayName }}</h1>
|
||
<p class="text-slate-400">{{ profile.email }}</p>
|
||
<p class="text-sm text-slate-500 mt-2">{{ profile.bio }}</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<div class="text-sm text-slate-500">Участник с</div>
|
||
<div class="text-slate-300">{{ new Date(profile.createdAt).toLocaleDateString('ru-RU') }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stats -->
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
||
<div class="bg-slate-900 border border-slate-700 rounded-xl p-4">
|
||
<div class="text-2xl font-bold text-blue-400">{{ stats.canvases }}</div>
|
||
<div class="text-sm text-slate-400">Канвасов</div>
|
||
</div>
|
||
<div class="bg-slate-900 border border-slate-700 rounded-xl p-4">
|
||
<div class="text-2xl font-bold text-green-400">{{ stats.nodes }}</div>
|
||
<div class="text-sm text-slate-400">Узлов создано</div>
|
||
</div>
|
||
<div class="bg-slate-900 border border-slate-700 rounded-xl p-4">
|
||
<div class="text-2xl font-bold text-purple-400">{{ stats.groups }}</div>
|
||
<div class="text-sm text-slate-400">Групп</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Recent Canvases -->
|
||
<div class="bg-slate-900 border border-slate-700 rounded-xl p-6">
|
||
<h2 class="text-xl font-semibold text-slate-100 mb-4">Последние канвасы</h2>
|
||
<div class="space-y-3">
|
||
<div v-for="canvas in recentCanvases" :key="canvas.id"
|
||
class="flex items-center justify-between p-3 bg-slate-800 rounded-lg">
|
||
<div>
|
||
<h3 class="font-medium text-slate-100">{{ canvas.name }}</h3>
|
||
<p class="text-sm text-slate-400">{{ canvas.description }}</p>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { useAuth } from '~/composables/useAuth'
|
||
|
||
const route = useRoute()
|
||
const auth = useAuth()
|
||
|
||
const userId = route.params.id
|
||
|
||
// Mock profile data - replace with actual API call
|
||
const profile = ref({
|
||
id: userId,
|
||
displayName: 'Пользователь XFlow',
|
||
email: 'user@example.com',
|
||
bio: 'Люблю создавать ментальные карты и организовывать идеи',
|
||
avatar: 'https://via.placeholder.com/80',
|
||
createdAt: new Date('2024-01-01').toISOString()
|
||
})
|
||
|
||
const stats = ref({
|
||
canvases: 12,
|
||
nodes: 156,
|
||
groups: 3
|
||
})
|
||
|
||
const recentCanvases = ref([
|
||
{
|
||
id: 'xflow-project',
|
||
name: 'Обзор Проекта XFlow',
|
||
description: 'Основная ментальная карта проекта'
|
||
},
|
||
{
|
||
id: 'demo',
|
||
name: 'Демо канвас',
|
||
description: 'Пример ментальной карты'
|
||
},
|
||
{
|
||
id: 'ideas',
|
||
name: 'Идеи 2024',
|
||
description: 'Сбор идей и мыслей'
|
||
}
|
||
])
|
||
|
||
onMounted(() => {
|
||
// Load profile data
|
||
console.log('Loading profile for user:', userId)
|
||
})
|
||
</script>
|