Refactor: Extract sidebar navigation from individual views into a new AppSidebar component.
This commit is contained in:
@@ -24,99 +24,47 @@ const goToDetail = (id) => {
|
||||
router.push({ name: 'character-detail', params: { id } })
|
||||
}
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('auth_code')
|
||||
router.push('/login')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-screen bg-slate-900 overflow-hidden text-slate-100">
|
||||
<!-- Sidebar -->
|
||||
<nav class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10 border border-white/5">
|
||||
<div class="mb-12">
|
||||
<div
|
||||
class="w-10 h-10 bg-gradient-to-br from-violet-600 to-cyan-500 rounded-xl flex items-center justify-center font-bold text-white text-xl shadow-lg shadow-violet-500/20">
|
||||
AI
|
||||
<div class="flex flex-col h-full p-8 overflow-y-auto text-slate-100">
|
||||
<!-- Top Bar -->
|
||||
<header class="flex justify-between items-end mb-8">
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold m-0">Characters</h1>
|
||||
<p class="mt-2 mb-0 text-slate-400">Manage your AI personas</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div v-for="i in 6" :key="i" class="glass-panel rounded-2xl p-6 flex items-center gap-6">
|
||||
<Skeleton shape="circle" size="5rem" />
|
||||
<div class="flex-1">
|
||||
<Skeleton class="mb-2" height="1.5rem" />
|
||||
<Skeleton height="1rem" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col gap-6 w-full items-center">
|
||||
<div v-tooltip.right="'Home'"
|
||||
class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50 shadow-inner">
|
||||
<span class="text-2xl">🏠</span>
|
||||
<!-- Characters Grid -->
|
||||
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div v-for="char in characters" :key="char.id"
|
||||
class="glass-panel rounded-2xl p-6 flex items-center gap-6 transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:bg-white/5 hover:border-white/10"
|
||||
@click="goToDetail(char.id)">
|
||||
<div class="w-20 h-20 rounded-full overflow-hidden flex-shrink-0 border-3 border-white/10">
|
||||
<img :src="API_URL + char.avatar_image || 'https://via.placeholder.com/150'" :alt="char.name"
|
||||
class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
|
||||
@click="router.push('/assets')" v-tooltip.right="'Assets'">
|
||||
<span class="text-2xl">📂</span>
|
||||
</div>
|
||||
<!-- Image Generation -->
|
||||
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
|
||||
@click="router.push('/generation')" v-tooltip.right="'Image Generation'">
|
||||
<span class="text-2xl">🎨</span>
|
||||
</div>
|
||||
<div v-tooltip.right="'Characters'"
|
||||
class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50">
|
||||
<span class="text-2xl">👥</span>
|
||||
</div>
|
||||
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
|
||||
@click="router.push('/image-to-prompt')" v-tooltip.right="'Image to Prompt'">
|
||||
<span class="text-2xl">✨</span>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<h3 class="m-0 mb-2 text-xl font-semibold">{{ char.name }}</h3>
|
||||
<p class="m-0 text-sm text-slate-400 line-clamp-2">
|
||||
{{ char.character_bio }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto flex flex-col items-center gap-4">
|
||||
<div @click="handleLogout"
|
||||
class="w-10 h-10 rounded-xl bg-red-500/10 text-red-400 flex items-center justify-center cursor-pointer hover:bg-red-500/20 transition-all font-bold"
|
||||
v-tooltip.right="'Logout'">
|
||||
<i class="pi pi-power-off"></i>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-full bg-slate-800 border-2 border-violet-600 flex items-center justify-center font-bold text-slate-50 cursor-pointer hover:scale-105 transition-all"
|
||||
title="Profile">
|
||||
U
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 p-8 overflow-y-auto flex flex-col">
|
||||
<!-- Top Bar -->
|
||||
<header class="flex justify-between items-end mb-8">
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold m-0">Characters</h1>
|
||||
<p class="mt-2 mb-0 text-slate-400">Manage your AI personas</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div v-for="i in 6" :key="i" class="glass-panel rounded-2xl p-6 flex items-center gap-6">
|
||||
<Skeleton shape="circle" size="5rem" />
|
||||
<div class="flex-1">
|
||||
<Skeleton class="mb-2" height="1.5rem" />
|
||||
<Skeleton height="1rem" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Characters Grid -->
|
||||
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div v-for="char in characters" :key="char.id"
|
||||
class="glass-panel rounded-2xl p-6 flex items-center gap-6 transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:bg-white/5 hover:border-white/10"
|
||||
@click="goToDetail(char.id)">
|
||||
<div class="w-20 h-20 rounded-full overflow-hidden flex-shrink-0 border-3 border-white/10">
|
||||
<img :src="API_URL + char.avatar_image || 'https://via.placeholder.com/150'" :alt="char.name"
|
||||
class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<h3 class="m-0 mb-2 text-xl font-semibold">{{ char.name }}</h3>
|
||||
<p class="m-0 text-sm text-slate-400 line-clamp-2">
|
||||
{{ char.character_bio }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user