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

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">