ai-char/ai-service-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: Extract sidebar navigation from individual views into a new AppSidebar component.

Browse Source
This commit is contained in:
xds
2026-02-07 15:04:12 +03:00
parent 7f8ce19cb1
commit 1b9fddd209
8 changed files with 774 additions and 948 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/views/ImageToPromptView.vue
View File

@@ -55,68 +55,13 @@ const copyToClipboard = () => {
navigator.clipboard.writeText(generatedPrompt.value)
}
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>
</div>
<div class="flex-1 flex flex-col gap-6 w-full items-center">
<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('/')" v-tooltip.right="'Home'">
<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('/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>
<!-- Flexible 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('/flexible-generation')" v-tooltip.right="'Flexible Generation'">
<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('/characters')" v-tooltip.right="'Characters'">
<span class="text-2xl">👥</span>
</div>
<!-- New Image to Prompt Item (Active) -->
<div 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"
v-tooltip.right="'Image to Prompt'">
<span class="text-2xl">✨</span>
</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">
<div class="flex flex-col h-full p-8 overflow-y-auto w-full text-slate-100">
<!-- Main Content (Sidebar removed) -->
<div class="flex-1 flex flex-col">
<header class="mb-8">
<h1 class="text-4xl font-bold m-0">Image to Prompt</h1>
<p class="mt-2 mb-0 text-slate-400">Transform your images into descriptive prompts</p>
@@ -160,11 +105,6 @@ const handleLogout = () => {
class="relative rounded-xl border-2 border-dashed border-white/20 flex flex-col items-center justify-center bg-white/5 hover:bg-white/10 transition-colors aspect-square text-slate-400 hover:text-white">
<span class="text-3xl mb-2">+</span>
<span class="text-xs font-bold text-center">Add<br>Image</span>
<!-- Input for just this square is handled by the main absolute input covering container,
but to make it intuitive when grid exists, we might need z-index adjustments or a specific label.
Actually, the big input covers everything. Let's make sure it doesn't block delete buttons.
Better approach: Input covers everything ONLY when empty. When not empty, input should specific 'Add' button or similar/
-->
</div>
</div>
@@ -238,6 +178,6 @@ const handleLogout = () => {
</div>
</div>
</div>
</main>
</div>
</div>
</template>