feat: layouts auth/default e componentes AppSidebar/AppTopbar
This commit is contained in:
Junior
@@ -1,78 +1,5 @@
|
||||
<script setup>
|
||||
useHead({
|
||||
meta: [
|
||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
|
||||
],
|
||||
link: [
|
||||
{ rel: 'icon', href: '/favicon.ico' }
|
||||
],
|
||||
htmlAttrs: {
|
||||
lang: 'en'
|
||||
}
|
||||
})
|
||||
|
||||
const title = 'Nuxt Starter Template'
|
||||
const description = 'A production-ready starter template powered by Nuxt UI. Build beautiful, accessible, and performant applications in minutes, not hours.'
|
||||
|
||||
useSeoMeta({
|
||||
title,
|
||||
description,
|
||||
ogTitle: title,
|
||||
ogDescription: description,
|
||||
ogImage: 'https://ui.nuxt.com/assets/templates/nuxt/starter-light.png',
|
||||
twitterImage: 'https://ui.nuxt.com/assets/templates/nuxt/starter-light.png',
|
||||
twitterCard: 'summary_large_image'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UApp>
|
||||
<UHeader>
|
||||
<template #left>
|
||||
<NuxtLink to="/">
|
||||
<AppLogo class="w-auto h-6 shrink-0" />
|
||||
</NuxtLink>
|
||||
|
||||
<TemplateMenu />
|
||||
</template>
|
||||
|
||||
<template #right>
|
||||
<UColorModeButton />
|
||||
|
||||
<UButton
|
||||
to="https://github.com/nuxt-ui-templates/starter"
|
||||
target="_blank"
|
||||
icon="i-simple-icons-github"
|
||||
aria-label="GitHub"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
/>
|
||||
</template>
|
||||
</UHeader>
|
||||
|
||||
<UMain>
|
||||
<NuxtPage />
|
||||
</UMain>
|
||||
|
||||
<USeparator icon="i-simple-icons-nuxtdotjs" />
|
||||
|
||||
<UFooter>
|
||||
<template #left>
|
||||
<p class="text-sm text-muted">
|
||||
Built with Nuxt UI • © {{ new Date().getFullYear() }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #right>
|
||||
<UButton
|
||||
to="https://github.com/nuxt-ui-templates/starter"
|
||||
target="_blank"
|
||||
icon="i-simple-icons-github"
|
||||
aria-label="GitHub"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
/>
|
||||
</template>
|
||||
</UFooter>
|
||||
</UApp>
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
177
front-end/app/components/AppSidebar.vue
Normal file
177
front-end/app/components/AppSidebar.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<script setup lang="ts">
|
||||
import { editais } from '~/data/mock/editais'
|
||||
import { prazos } from '~/data/mock/prazos'
|
||||
import { documentos } from '~/data/mock/documentos'
|
||||
|
||||
const { user, logout } = useAuth()
|
||||
const route = useRoute()
|
||||
|
||||
const contagemPorStatus = computed(() => {
|
||||
const counts: Record<string, number> = {}
|
||||
for (const e of editais) {
|
||||
counts[e.status] = (counts[e.status] ?? 0) + 1
|
||||
}
|
||||
return counts
|
||||
})
|
||||
|
||||
const alertasPrazos = computed(() => prazos.filter(p => p.urgencia === 'critico' || p.urgencia === 'urgente').length)
|
||||
const docsVencendo = computed(() => documentos.filter(d => d.status === 'vencendo' || d.status === 'vencida').length)
|
||||
|
||||
const navItems = computed(() => [
|
||||
{
|
||||
label: '',
|
||||
items: [
|
||||
{ label: 'Dashboard', icon: 'i-heroicons-home', to: '/' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Oportunidades',
|
||||
items: [
|
||||
{ label: 'Todos os Editais', icon: 'i-heroicons-clipboard-document-list', to: '/oportunidades', badge: editais.length, badgeVariant: 'default' },
|
||||
{ label: 'Em Análise', icon: 'i-heroicons-magnifying-glass', to: '/oportunidades/em-analise', badge: contagemPorStatus.value.em_analise ?? 0, badgeVariant: 'default' },
|
||||
{ label: 'Elaborando Proposta', icon: 'i-heroicons-pencil-square', to: '/oportunidades/elaborando-proposta', badge: contagemPorStatus.value.elaborando_proposta ?? 0, badgeVariant: 'warning' },
|
||||
{ label: 'Participando', icon: 'i-heroicons-play', to: '/oportunidades/participando', badge: contagemPorStatus.value.participando ?? 0, badgeVariant: 'default' },
|
||||
{ label: 'Recurso', icon: 'i-heroicons-scale', to: '/oportunidades/recurso', badge: contagemPorStatus.value.recurso ?? 0, badgeVariant: 'warning' },
|
||||
{ label: 'Vencidas', icon: 'i-heroicons-trophy', to: '/oportunidades/vencidas', badge: contagemPorStatus.value.vencida ?? 0, badgeVariant: 'success' },
|
||||
{ label: 'Perdidas', icon: 'i-heroicons-x-circle', to: '/oportunidades/perdidas', badge: contagemPorStatus.value.perdida ?? 0, badgeVariant: 'neutral' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Pipeline',
|
||||
items: [
|
||||
{ label: 'Kanban de Processos', icon: 'i-heroicons-view-columns', to: '/pipeline' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Gestão',
|
||||
items: [
|
||||
{ label: 'Documentos', icon: 'i-heroicons-folder', to: '/gestao/documentos', badge: docsVencendo.value || undefined, badgeVariant: 'warning' },
|
||||
{ label: 'Prazos', icon: 'i-heroicons-clock', to: '/gestao/prazos', badge: alertasPrazos.value || undefined, badgeVariant: 'warning' },
|
||||
{ label: 'Órgãos Públicos', icon: 'i-heroicons-building-library', to: '/gestao/orgaos' },
|
||||
{ label: 'Concorrentes', icon: 'i-heroicons-building-office-2', to: '/gestao/concorrentes' },
|
||||
{ label: 'Contratos', icon: 'i-heroicons-document-text', to: '/gestao/contratos' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Inteligência',
|
||||
items: [
|
||||
{ label: 'Inteligência de Mercado', icon: 'i-heroicons-chart-bar', to: '/inteligencia' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Sistema',
|
||||
items: [
|
||||
{ label: 'Usuários', icon: 'i-heroicons-users', to: '/sistema/usuarios' },
|
||||
{ label: 'Configurações', icon: 'i-heroicons-cog-6-tooth', to: '/sistema/configuracoes' },
|
||||
],
|
||||
},
|
||||
])
|
||||
|
||||
function isActive(to: string) {
|
||||
return route.path === to
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="logo-icon">
|
||||
<UIcon name="i-heroicons-home" class="text-white w-4 h-4" />
|
||||
</div>
|
||||
<span class="logo-name">Licitatche</span>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<template v-for="group in navItems" :key="group.label">
|
||||
<p v-if="group.label" class="nav-label">{{ group.label }}</p>
|
||||
<NuxtLink
|
||||
v-for="item in group.items"
|
||||
:key="item.to"
|
||||
:to="item.to"
|
||||
class="nav-item"
|
||||
:class="{ active: isActive(item.to) }"
|
||||
>
|
||||
<UIcon :name="item.icon" class="nav-icon" />
|
||||
<span class="nav-text">{{ item.label }}</span>
|
||||
<UBadge
|
||||
v-if="item.badge"
|
||||
:label="String(item.badge)"
|
||||
variant="soft"
|
||||
:color="item.badgeVariant === 'warning' ? 'warning' : item.badgeVariant === 'success' ? 'success' : item.badgeVariant === 'neutral' ? 'neutral' : 'primary'"
|
||||
size="xs"
|
||||
/>
|
||||
</NuxtLink>
|
||||
<div v-if="group.label" class="nav-divider" />
|
||||
</template>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-row">
|
||||
<UAvatar :alt="user?.nome ?? 'A'" size="xs" />
|
||||
<div class="user-info">
|
||||
<p class="user-name">{{ user?.nome }}</p>
|
||||
<p class="user-role">{{ user?.papel }}</p>
|
||||
</div>
|
||||
<UButton icon="i-heroicons-arrow-right-on-rectangle" variant="ghost" color="neutral" size="xs" @click="logout" />
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sidebar {
|
||||
width: 232px;
|
||||
min-height: 100vh;
|
||||
background: #0f172a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.sidebar-logo {
|
||||
padding: 18px 14px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
border-bottom: 1px solid #1e293b;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0f172a;
|
||||
z-index: 1;
|
||||
}
|
||||
.logo-icon {
|
||||
width: 32px; height: 32px;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.logo-name { font-size: 14px; font-weight: 700; color: #f1f5f9; }
|
||||
.sidebar-nav { padding: 8px; flex: 1; }
|
||||
.nav-label {
|
||||
font-size: 9.5px; font-weight: 700; color: #475569;
|
||||
text-transform: uppercase; letter-spacing: 1px;
|
||||
padding: 8px 8px 3px;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 7px 8px; border-radius: 7px;
|
||||
color: #94a3b8; text-decoration: none;
|
||||
font-size: 12.5px; margin-bottom: 1px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.nav-item:hover { background: #1e293b; color: #e2e8f0; }
|
||||
.nav-item.active { background: #1e3a5f; color: #93c5fd; }
|
||||
.nav-icon { width: 15px; height: 15px; flex-shrink: 0; }
|
||||
.nav-text { flex: 1; }
|
||||
.nav-divider { height: 1px; background: #1e293b; margin: 4px 0; }
|
||||
.sidebar-footer {
|
||||
padding: 10px 8px;
|
||||
border-top: 1px solid #1e293b;
|
||||
position: sticky; bottom: 0; background: #0f172a;
|
||||
}
|
||||
.user-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; }
|
||||
.user-row:hover { background: #1e293b; }
|
||||
.user-info { flex: 1; }
|
||||
.user-name { font-size: 12px; font-weight: 600; color: #e2e8f0; }
|
||||
.user-role { font-size: 10.5px; color: #64748b; }
|
||||
</style>
|
||||
33
front-end/app/components/AppTopbar.vue
Normal file
33
front-end/app/components/AppTopbar.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
title: string
|
||||
breadcrumb?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="topbar">
|
||||
<div>
|
||||
<h1 class="topbar-title">{{ title }}</h1>
|
||||
<p v-if="breadcrumb" class="topbar-breadcrumb">{{ breadcrumb }}</p>
|
||||
</div>
|
||||
<div class="topbar-actions">
|
||||
<slot name="actions" />
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.topbar {
|
||||
background: white;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
padding: 13px 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.topbar-title { font-size: 16px; font-weight: 700; color: #0f172a; }
|
||||
.topbar-breadcrumb { font-size: 11px; color: #94a3b8; margin-top: 1px; }
|
||||
.topbar-actions { display: flex; gap: 8px; align-items: center; }
|
||||
</style>
|
||||
28
front-end/app/layouts/auth.vue
Normal file
28
front-end/app/layouts/auth.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="auth-layout">
|
||||
<div class="bg-circle bg-circle-1" />
|
||||
<div class="bg-circle bg-circle-2" />
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.auth-layout {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bg-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
pointer-events: none;
|
||||
}
|
||||
.bg-circle-1 { width: 400px; height: 400px; top: -100px; right: -100px; }
|
||||
.bg-circle-2 { width: 300px; height: 300px; bottom: -80px; left: -80px; }
|
||||
</style>
|
||||
23
front-end/app/layouts/default.vue
Normal file
23
front-end/app/layouts/default.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="app-layout">
|
||||
<AppSidebar />
|
||||
<div class="app-main">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app-layout {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
.app-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user