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

17
src/App.vue
View File

@@ -1,13 +1,28 @@
<script setup>
import { RouterView } from 'vue-router'
import { RouterView, useRoute } from 'vue-router'
import AppSidebar from './components/AppSidebar.vue'
const route = useRoute()
</script>
<template>
<!-- Login Layout (Full Screen) -->
<div v-if="route.name === 'login'" class="h-screen w-full">
<RouterView />
</div>
<!-- Main Layout (Sidebar + Content) -->
<div v-else class="flex h-screen bg-slate-900 text-slate-100 font-sans overflow-hidden">
<AppSidebar />
<div class="flex-1 h-full overflow-hidden relative">
<RouterView v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</RouterView>
</div>
</div>
</template>
<style>

89
src/components/AppSidebar.vue Normal file
View File

@@ -0,0 +1,89 @@
<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Button from 'primevue/button'
const router = useRouter()
const route = useRoute()
const handleLogout = () => {
localStorage.removeItem('auth_code')
router.push('/login')
}
// Check active route for styling
const isActive = (path) => {
// Exact match for home, startsWith for others
if (path === '/') return route.path === '/'
return route.path.startsWith(path)
}
const navItems = [
{ path: '/', icon: '🏠', tooltip: 'Home' },
{ path: '/assets', icon: '📂', tooltip: 'Assets' },
{ path: '/generation', icon: '🎨', tooltip: 'Image Generation' },
{ path: '/flexible-generation', icon: '🖌️', tooltip: 'Flexible Generation' },
{ path: '/characters', icon: '👥', tooltip: 'Characters' },
{ path: '/image-to-prompt', icon: '✨', tooltip: 'Image to Prompt' }
]
</script>
<template>
<div class="contents">
<!-- Sidebar (Desktop) -->
<nav
class="hidden md:flex glass-panel w-20 m-4 flex-col items-center py-6 rounded-3xl z-40 border border-white/5 bg-slate-900/50 backdrop-blur-md h-[calc(100vh-2rem)]">
<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 v-for="item in navItems" :key="item.path" :class="[
'w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300',
isActive(item.path)
? 'bg-white/10 text-slate-50 shadow-inner'
: 'text-slate-400 hover:bg-white/10 hover:text-slate-50'
]" @click="router.push(item.path)" v-tooltip.right="item.tooltip">
<span class="text-2xl">{{ item.icon }}</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>
<!-- Profile Avatar Placeholder -->
<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>
<!-- Mobile Bottom Nav -->
<nav
class="md:hidden fixed bottom-0 left-0 right-0 h-16 bg-slate-900/90 backdrop-blur-xl border-t border-white/10 z-50 flex justify-around items-center px-2">
<div v-for="item in navItems" :key="item.path" :class="[
'flex flex-col items-center gap-1 p-2 rounded-xl transition-all',
isActive(item.path)
? 'text-white bg-white/10 relative top-[-10px] shadow-lg shadow-violet-500/20 border border-violet-500/30'
: 'text-slate-400 hover:text-slate-200'
]" @click="router.push(item.path)">
<span class="text-xl">{{ item.icon }}</span>
</div>
</nav>
</div>
</template>
<style scoped>
.glass-panel {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
</style>

79
src/views/AssetsView.vue
View File

@@ -18,6 +18,7 @@ const toast = useToast()
const assets = ref<Asset[]>([])
const loading = ref(true)
const activeFilter = ref('all')
// @ts-ignore
const API_URL = import.meta.env.VITE_API_URL
const selectedAsset = ref<Asset | null>(null)
@@ -107,81 +108,13 @@ const formatDate = (dateString: string) => {
if (!dateString) return ''
return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(new Date(dateString))
}
const handleLogout = () => {
localStorage.removeItem('auth_code')
router.push('/login')
}
</script>
<template>
<div class="flex h-screen bg-slate-900 overflow-hidden">
<!-- Sidebar -->
<nav class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10">
<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 v-tooltip.right="'Assets'"
class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50">
<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>
<!-- 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>
<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>
<!-- Pagination
<div v-if="totalRecords > rows" class="mt-auto py-6">
<Paginator :first="first" :rows="rows" :totalRecords="totalRecords" @page="onPage" :template="{
default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'
}" class="!bg-transparent !border-none !p-0" :pt="{
root: { class: '!bg-transparent' },
pcPageButton: {
root: ({ context }) => ({
class: [
'!min-w-[40px] !h-10 !rounded-xl !border-none !transition-all !duration-300 !font-bold',
context.active ? '!bg-violet-600 !text-white !shadow-lg' : '!bg-white/5 !text-slate-400 hover:!bg-white/10 hover:!text-slate-50'
]
})
},
pcFirstPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
pcPreviousPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
pcNextPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
pcLastPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } }
}" />
</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">
<!-- Top Bar -->
<header class="flex justify-between items-end mb-8">
<div>
@@ -270,7 +203,7 @@ const handleLogout = () => {
}" />
</div>
</div>
</main>
</div>
<Dialog v-model:visible="isModalVisible" modal dismissableMask header="Asset View"
:style="{ width: '90vw', maxWidth: '800px' }" class="glass-panel rounded-2xl">

98
src/views/CharacterDetailView.vue
View File

@@ -530,62 +530,15 @@ const handleGenerate = async () => {
}
}
const handleLogout = () => {
localStorage.removeItem('auth_code')
router.push('/login')
}
</script>
<template>
<div class="flex h-screen bg-slate-900 overflow-hidden text-slate-100">
<nav
class="glass-panel w-14 lg:w-20 m-2 lg:m-4 flex flex-col items-center py-4 lg:py-6 rounded-2xl lg:rounded-3xl z-10 border border-white/5">
<div class="mb-4 lg:mb-12 cursor-pointer" @click="goBack">
<div class="w-8 lg:w-10 h-8 lg:h-10 bg-white/10 rounded-lg lg:rounded-xl flex items-center justify-center font-bold text-white text-lg lg:text-xl transition-all duration-300 hover:bg-white/20"
v-tooltip.right="'Back'">
←
</div>
</div>
<div class="flex flex-col h-full p-6 overflow-y-auto w-full text-slate-100">
<!-- Main Content (Sidebar removed) -->
<div class="flex-1 flex flex-col gap-4">
<div class="flex-1 flex flex-col gap-4 lg:gap-6 w-full items-center">
<div class="w-10 lg:w-12 h-10 lg:h-12 flex items-center justify-center rounded-lg lg: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-xl lg:text-2xl">🏠</span>
</div>
<div class="w-10 lg:w-12 h-10 lg:h-12 flex items-center justify-center rounded-lg lg: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-xl lg:text-2xl">📂</span>
</div>
<!-- Image Generation -->
<div class="w-10 lg:w-12 h-10 lg:h-12 flex items-center justify-center rounded-lg lg: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-xl lg:text-2xl">🎨</span>
</div>
<!-- Flexible Generation -->
<div class="w-10 lg:w-12 h-10 lg:h-12 flex items-center justify-center rounded-lg lg: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-xl lg:text-2xl">🖌️</span>
</div>
<div class="w-10 lg:w-12 h-10 lg:h-12 flex items-center justify-center rounded-lg lg:rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50 shadow-inner"
@click="router.push('/')" v-tooltip.right="'Characters'">
<span class="text-xl lg:text-2xl">👥</span>
</div>
<div class="w-10 lg:w-12 h-10 lg:h-12 flex items-center justify-center rounded-lg lg: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-xl lg: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>
</nav>
<main v-if="!loading && character" class="flex-1 p-4 lg:p-6 overflow-y-auto flex flex-col gap-4">
<div v-if="!loading && character" class="flex-1 flex flex-col gap-4">
<header class="mb-0">
<Button label="Back" icon="pi pi-arrow-left" @click="goBack" text
class="text-slate-400 hover:text-slate-50 p-1" />
@@ -738,7 +691,8 @@ const handleLogout = () => {
<div class="flex flex-col gap-1.5 mt-auto pt-1.5 border-t border-white/5">
<div class="flex flex-col gap-2 mb-2">
<div class="flex items-center gap-2">
<Checkbox v-model="sendToTelegram" :binary="true" inputId="tg-check-char" />
<Checkbox v-model="sendToTelegram" :binary="true"
inputId="tg-check-char" />
<label for="tg-check-char"
class="text-[10px] text-slate-400 cursor-pointer select-none">Send
result to Telegram</label>
@@ -784,7 +738,8 @@ const handleLogout = () => {
:showValue="false" class="rounded-full overflow-hidden !bg-slate-800" :pt="{
value: { class: '!bg-gradient-to-r !from-violet-600 !to-cyan-500 !transition-all !duration-500' }
}" />
<span class="text-[10px] text-slate-500 font-mono">{{ generationProgress }}%</span>
<span class="text-[10px] text-slate-500 font-mono">{{ generationProgress
}}%</span>
</div>
<div v-else-if="generationError"
@@ -809,7 +764,8 @@ const handleLogout = () => {
<div class="flex gap-1">
<Button icon="pi pi-download" text class="hover:bg-white/10 p-1 text-xs"
@click="handleDownloadResults" title="Download results" />
<Button icon="pi pi-share-alt" text class="hover:bg-white/10 p-1 text-xs" />
<Button icon="pi pi-share-alt" text
class="hover:bg-white/10 p-1 text-xs" />
</div>
</div>
@@ -848,7 +804,8 @@ const handleLogout = () => {
<div v-if="generatedResult.execution_time"
class="bg-black/20 px-2 py-1 rounded text-[9px] text-slate-500 font-mono border border-white/5"
title="Total Execution Time">
<i class="pi pi-clock mr-1"></i>{{ generatedResult.execution_time.toFixed(2)
<i class="pi pi-clock mr-1"></i>{{
generatedResult.execution_time.toFixed(2)
}}s
</div>
<div v-if="generatedResult.api_execution_time"
@@ -874,7 +831,8 @@ const handleLogout = () => {
<div
class="w-full mt-6 pt-4 border-t border-white/5 flex flex-col max-h-[400px] relative z-10">
<div class="flex justify-between items-center mb-2 px-1">
<h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider">History
<h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider">
History
({{
historyTotal }})</h3>
<Button v-if="historyTotal > 0" icon="pi pi-refresh" text size="small"
@@ -903,7 +861,8 @@ const handleLogout = () => {
</div>
</div>
<div class="flex-1 min-w-0 flex flex-col items-start gap-0.5">
<p class="text-xs text-slate-300 truncate font-medium w-full text-left">
<p
class="text-xs text-slate-300 truncate font-medium w-full text-left">
{{
gen.prompt }}</p>
@@ -932,7 +891,8 @@ const handleLogout = () => {
class="pi pi-server mr-0.5"></i>{{
gen.api_execution_time_seconds.toFixed(1) }}s</span>
<span v-if="gen.token_usage" title="Tokens"><i
class="pi pi-bolt mr-0.5"></i>{{ gen.token_usage }}</span>
class="pi pi-bolt mr-0.5"></i>{{ gen.token_usage
}}</span>
</div>
<!-- Action Buttons -->
@@ -986,9 +946,9 @@ const handleLogout = () => {
<h2 class="text-2xl font-bold m-0">Linked Assets ({{ assetsTotalRecords }})</h2>
<div class="flex gap-3">
<Button v-if="isMultiSelectMode"
:label="`Use in Generation (${bulkSelectedAssetIds.length})`" icon="pi pi-bolt"
severity="success" :disabled="bulkSelectedAssetIds.length === 0"
@click="handleUseInGeneration"
:label="`Use in Generation (${bulkSelectedAssetIds.length})`"
icon="pi pi-bolt" severity="success"
:disabled="bulkSelectedAssetIds.length === 0" @click="handleUseInGeneration"
class="!py-2 !px-4 !text-sm font-bold rounded-xl transition-all shadow-lg shadow-green-500/20" />
<Button :icon="isMultiSelectMode ? 'pi pi-times' : 'pi pi-list-check'"
@@ -1075,7 +1035,7 @@ const handleLogout = () => {
</TabPanels>
</Tabs>
</main>
</div>
<div v-else-if="loading" class="flex-1 p-8 overflow-y-auto flex flex-col gap-8">
<Skeleton width="10rem" height="2rem" />
@@ -1099,7 +1059,8 @@ const handleLogout = () => {
:style="{ width: '90vw', maxWidth: '800px' }" class="glass-panel rounded-2xl">
<div v-if="selectedAsset" class="flex flex-col items-center">
<img :src="selectedAsset.link ? API_URL + selectedAsset.link : (selectedAsset.url ? API_URL + selectedAsset.url : 'https://via.placeholder.com/800')"
:alt="selectedAsset.name" class="max-w-full max-h-[70vh] rounded-xl object-contain shadow-2xl" />
:alt="selectedAsset.name"
class="max-w-full max-h-[70vh] rounded-xl object-contain shadow-2xl" />
<div class="mt-6 text-center">
<h2 class="text-2xl font-bold mb-2">{{ selectedAsset.name }}</h2>
<p class="text-slate-400">{{ selectedAsset.type }}</p>
@@ -1115,7 +1076,8 @@ const handleLogout = () => {
<div v-for="asset in allAssets" :key="asset.id" @click="toggleAssetSelection(asset)"
class="aspect-square rounded-xl overflow-hidden cursor-pointer relative border transition-all"
:class="selectedAssets.some(a => a.id === asset.id) ? 'border-violet-500 ring-2 ring-violet-500/20' : 'border-white/10 hover:border-white/30'">
<img :src="API_URL + asset.url + '?thumbnail=true'" class="w-full h-full object-cover" />
<img :src="API_URL + asset.url + '?thumbnail=true'"
class="w-full h-full object-cover" />
<div v-if="selectedAssets.some(a => a.id === asset.id)"
class="absolute inset-0 bg-violet-600/30 flex items-center justify-center">
<div class="bg-violet-600 rounded-full p-1 shadow-lg">
@@ -1132,14 +1094,16 @@ const handleLogout = () => {
<div class="mt-4 pt-4 border-t border-white/10 flex justify-between items-center text-slate-100">
<span class="text-sm text-slate-400">{{ selectedAssets.length }} selected</span>
<div class="flex gap-4 items-center">
<Paginator :first="modalAssetsFirst" :rows="modalAssetsRows" :totalRecords="modalAssetsTotal"
@page="onModalAssetsPage" class="!bg-transparent !border-none !p-0" />
<Paginator :first="modalAssetsFirst" :rows="modalAssetsRows"
:totalRecords="modalAssetsTotal" @page="onModalAssetsPage"
class="!bg-transparent !border-none !p-0" />
<Button label="Done" @click="isAssetSelectionVisible = false" class="!px-6" />
</div>
</div>
</div>
</Dialog>
</div>
</div>
</template>
<style scoped>
.p-tablist {

56
src/views/CharactersView.vue
View File

@@ -24,62 +24,11 @@ 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>
</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>
</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>
</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 text-slate-100">
<!-- Top Bar -->
<header class="flex justify-between items-end mb-8">
<div>
@@ -116,7 +65,6 @@ const handleLogout = () => {
</div>
</div>
</div>
</main>
</div>
</template>

97
src/views/FlexibleGenerationView.vue
View File

@@ -249,10 +249,7 @@ onMounted(() => {
})
// --- Sidebar Logic (Duplicated for now) ---
const handleLogout = () => {
localStorage.removeItem('auth_code')
router.push('/login')
}
// handleLogout removed - handled in AppSidebar
// Image Preview
const isImagePreviewVisible = ref(false)
@@ -330,56 +327,32 @@ const clearPrompt = () => {
previousPrompt.value = ''
}
const deleteGeneration = async (gen) => {
if (!gen) return
try {
// Optimistic update
historyGenerations.value = historyGenerations.value.filter(g => g.id !== gen.id)
historyTotal.value--
// Use deleteAsset since generations are essentially assets in this view's context,
// or we need a way to delete the generation record.
// The user said "delete asset", and these are likely linked.
// If gen has a result list, we delete the first asset.
if (gen.result_list && gen.result_list.length > 0) {
await dataService.deleteAsset(gen.result_list[0])
}
} catch (e) {
console.error('Failed to delete generation', e)
// Reload to restore state if failed
loadData()
}
}
</script>
<template>
<div class="flex h-screen bg-slate-900 overflow-hidden text-slate-100 font-sans">
<!-- Sidebar -->
<nav
class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10 border border-white/5 bg-slate-900/50 backdrop-blur-md">
<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>
<!-- Active State for Flexible Generation -->
<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="'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>
<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>
</div>
<div class="mt-auto">
<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">
<i class="pi pi-power-off"></i>
</div>
</div>
</nav>
<div class="flex flex-col h-full font-sans">
<!-- Sidebar and Mobile Nav removed (handled by App.vue) -->
<!-- Main Content -->
<main class="flex-1 relative flex flex-col h-full overflow-hidden">
@@ -397,10 +370,10 @@ const clearPrompt = () => {
</header>
<!-- Gallery Grid -->
<div class="flex-1 overflow-y-auto p-4 pb-32"> <!-- pb-32 to allow space for bottom panel -->
<div class="flex-1 overflow-y-auto p-4 pb-32 md:pb-32"> <!-- pb-32 to allow space for bottom panel -->
<div v-if="historyGenerations.length > 0"
class="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8 gap-1">
class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-2 md:gap-1">
<div v-for="gen in historyGenerations" :key="gen.id"
class="aspect-[9/16] relative group overflow-hidden bg-slate-800 transition-all duration-300">
@@ -419,7 +392,11 @@ const clearPrompt = () => {
<!-- Top Actions -->
<div
class="flex justify-end gap-1 translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200">
class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200">
<Button icon="pi pi-trash" v-tooltip.right="'Delete'"
class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white"
@click.stop="deleteGeneration(gen)" />
<Button icon="pi pi-pencil" v-tooltip.left="'Edit (Use Result)'"
class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
@click.stop="useResultAsAsset(gen)" />
@@ -451,7 +428,7 @@ const clearPrompt = () => {
<!-- Bottom Settings Panel -->
<transition name="slide-up">
<div v-if="isSettingsVisible"
class="absolute bottom-0 left-0 right-0 glass-panel border-t border-white/10 bg-slate-900/95 backdrop-blur-xl p-6 z-20 rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.5)] flex flex-col gap-4 max-h-[85vh] overflow-y-auto">
class="absolute bottom-0 left-0 right-0 glass-panel border-t border-white/10 bg-slate-900/95 backdrop-blur-xl p-6 z-[60] rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.5)] flex flex-col gap-4 max-h-[85vh] overflow-y-auto">
<!-- Handle / Close Button -->
<div class="w-full flex justify-center -mt-2 mb-2 cursor-pointer"
@@ -483,10 +460,11 @@ const clearPrompt = () => {
<Textarea v-model="prompt" rows="3" autoResize
placeholder="Describe what you want to create..."
class="w-full bg-slate-800 border-white/10 text-white rounded-xl p-3 focus:border-violet-500 focus:ring-1 focus:ring-violet-500/50 transition-all resize-none shadow-inner" />
</div>
<!-- Assets & Character Row -->
<div class="flex gap-4">
<div class="flex flex-col md:flex-row gap-4">
<div class="flex-1 flex flex-col gap-2">
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Character
(Optional)</label>
@@ -544,7 +522,8 @@ const clearPrompt = () => {
<div class="flex items-center gap-2">
<img :src="API_URL + slotProps.option.url + '?thumbnail=true'"
class="w-8 h-8 rounded object-cover border border-white/10" />
<span class="text-xs truncate max-w-[150px]">{{ slotProps.option.name ||
<span class="text-xs truncate max-w-[150px]">{{
slotProps.option.name ||
'Asset ' + slotProps.option.id.substring(0, 4) }}</span>
</div>
</template>
@@ -611,7 +590,7 @@ const clearPrompt = () => {
<!-- Toggle Button (when hidden) -->
<transition name="fade">
<div v-if="!isSettingsVisible" class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10">
<div v-if="!isSettingsVisible" class="absolute bottom-24 md:bottom-8 left-1/2 -translate-x-1/2 z-10">
<Button label="Open Controls" icon="pi pi-chevron-up" @click="isSettingsVisible = true" rounded
class="!bg-violet-600 !border-none !shadow-xl !font-bold shadow-violet-500/40 !px-6 !py-3" />
</div>
@@ -619,6 +598,8 @@ const clearPrompt = () => {
</main>
<!-- Image Preview Modal -->
<Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
:style="{ width: '90vw', maxWidth: '1000px', background: 'transparent', boxShadow: 'none' }"

58
src/views/ImageGenerationView.vue
View File

@@ -409,10 +409,7 @@ const copyToClipboard = () => {
// Implement if needed for prompt copying
}
const handleLogout = () => {
localStorage.removeItem('auth_code')
router.push('/login')
}
// --- Lifecycle ---
onMounted(() => {
@@ -421,50 +418,9 @@ onMounted(() => {
</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>
<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>
<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>
</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>
</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 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 Generation</h1>
<p class="mt-2 mb-0 text-slate-400">Create stunning visuals using your assets</p>
@@ -747,8 +703,8 @@ onMounted(() => {
</div>
</div>
</div>
</main>
</div>
</div>
<!-- Asset Selection Modal -->
<Dialog v-model:visible="isAssetModalVisible" modal header="Select Reference Assets"
:style="{ width: '80vw', maxWidth: '1000px' }" class="glass-panel rounded-2xl">
@@ -796,7 +752,7 @@ onMounted(() => {
</div>
</div>
</Dialog>
</div>
</template>
<style scoped>

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>