336 lines
9.0 KiB
Vue
336 lines
9.0 KiB
Vue
<template>
|
|
<!-- Renderiza apenas se modo suporte estiver ativo -->
|
|
<Teleport to="body">
|
|
<Transition name="support-slide">
|
|
<div v-if="store.isActive" class="support-banner">
|
|
<!-- Barra superior fixa -->
|
|
<div class="support-banner__bar">
|
|
<div class="support-banner__bar-left">
|
|
<span class="support-banner__pulse" />
|
|
<strong>MODO SUPORTE ATIVO</strong>
|
|
<span class="support-banner__tenant">tenant: {{ store.tenantId }}</span>
|
|
</div>
|
|
<div class="support-banner__bar-right">
|
|
<button class="support-banner__toggle" @click="panelOpen = !panelOpen">
|
|
<i :class="panelOpen ? 'pi pi-chevron-up' : 'pi pi-chevron-down'" />
|
|
{{ panelOpen ? 'Ocultar Logs' : 'Ver Logs' }}
|
|
<span v-if="store.errorLogs.length" class="support-banner__err-badge">
|
|
{{ store.errorLogs.length }} erro(s)
|
|
</span>
|
|
</button>
|
|
<button class="support-banner__clear" title="Limpar logs" @click="store.clearLogs()">
|
|
<i class="pi pi-trash" />
|
|
</button>
|
|
<button class="support-banner__close" title="Desativar suporte" @click="store.deactivate()">
|
|
<i class="pi pi-times" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Painel expansível de logs -->
|
|
<div v-if="panelOpen" class="support-banner__panel">
|
|
<!-- Filtros de nível -->
|
|
<div class="support-banner__filters">
|
|
<button
|
|
v-for="lvl in levels"
|
|
:key="lvl.value"
|
|
class="support-banner__filter-btn"
|
|
:class="{ 'support-banner__filter-btn--active': activeLevel === lvl.value }"
|
|
@click="activeLevel = activeLevel === lvl.value ? null : lvl.value"
|
|
>
|
|
{{ lvl.label }}
|
|
<span class="support-banner__filter-count">
|
|
{{ countByLevel(lvl.value) }}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Lista de logs -->
|
|
<div ref="logListRef" class="support-banner__logs">
|
|
<div v-if="filteredLogs.length === 0" class="support-banner__empty">
|
|
Nenhum log capturado ainda. Os eventos da agenda aparecerão aqui.
|
|
</div>
|
|
<div
|
|
v-for="log in filteredLogs"
|
|
:key="log.id"
|
|
class="support-banner__log-entry"
|
|
:class="`support-banner__log-entry--${log.level}`"
|
|
>
|
|
<span class="support-banner__log-time">{{ formatTime(log.timestamp) }}</span>
|
|
<span class="support-banner__log-level">{{ log.level }}</span>
|
|
<span class="support-banner__log-source">[{{ log.source }}]</span>
|
|
<span class="support-banner__log-msg">{{ log.message }}</span>
|
|
<button
|
|
v-if="log.data"
|
|
class="support-banner__log-expand"
|
|
@click="toggleData(log.id)"
|
|
>
|
|
{ }
|
|
</button>
|
|
<pre
|
|
v-if="log.data && expandedIds.has(log.id)"
|
|
class="support-banner__log-data"
|
|
>{{ JSON.stringify(log.data, null, 2) }}</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rodapé do painel -->
|
|
<div class="support-banner__footer">
|
|
<span>{{ store.logs.length }} entrada(s) total</span>
|
|
<span>·</span>
|
|
<span>{{ store.errorLogs.length }} erro(s)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { useSupportDebugStore } from '@/support/supportDebugStore'
|
|
|
|
const store = useSupportDebugStore()
|
|
|
|
const panelOpen = ref(false)
|
|
const activeLevel = ref(null)
|
|
const expandedIds = ref(new Set())
|
|
const logListRef = ref(null)
|
|
|
|
const levels = [
|
|
{ label: 'Eventos', value: 'event' },
|
|
{ label: 'API', value: 'api' },
|
|
{ label: 'Recorrência', value: 'recurrence' },
|
|
{ label: 'Guard', value: 'guard' },
|
|
{ label: 'Perf', value: 'perf' },
|
|
{ label: 'Erros', value: 'error' },
|
|
]
|
|
|
|
const filteredLogs = computed(() => {
|
|
const all = store.recentLogs
|
|
if (!activeLevel.value) return all
|
|
return all.filter(l => l.level === activeLevel.value)
|
|
})
|
|
|
|
function countByLevel (level) {
|
|
return store.logs.filter(l => l.level === level).length
|
|
}
|
|
|
|
function toggleData (id) {
|
|
const s = new Set(expandedIds.value)
|
|
if (s.has(id)) s.delete(id)
|
|
else s.add(id)
|
|
expandedIds.value = s
|
|
}
|
|
|
|
function formatTime (iso) {
|
|
return new Date(iso).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.support-banner {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 9999;
|
|
font-family: 'JetBrains Mono', 'Fira Code', monospace, sans-serif;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.support-banner__bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: #b45309;
|
|
color: #fff;
|
|
padding: 6px 16px;
|
|
gap: 12px;
|
|
}
|
|
|
|
.support-banner__bar-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.support-banner__bar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.support-banner__pulse {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #fcd34d;
|
|
animation: pulse 1.4s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.5; transform: scale(1.3); }
|
|
}
|
|
|
|
.support-banner__tenant {
|
|
font-weight: 400;
|
|
opacity: 0.75;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.support-banner__toggle,
|
|
.support-banner__clear,
|
|
.support-banner__close {
|
|
background: rgba(255,255,255,0.15);
|
|
border: none;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
padding: 3px 10px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
transition: background 0.15s;
|
|
}
|
|
.support-banner__toggle:hover,
|
|
.support-banner__clear:hover,
|
|
.support-banner__close:hover {
|
|
background: rgba(255,255,255,0.28);
|
|
}
|
|
|
|
.support-banner__err-badge {
|
|
background: #ef4444;
|
|
color: #fff;
|
|
border-radius: 10px;
|
|
padding: 0 7px;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Painel */
|
|
.support-banner__panel {
|
|
background: #0f172a;
|
|
border-top: 2px solid #b45309;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 360px;
|
|
}
|
|
|
|
.support-banner__filters {
|
|
display: flex;
|
|
gap: 6px;
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid #1e293b;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.support-banner__filter-btn {
|
|
background: #1e293b;
|
|
border: 1px solid #334155;
|
|
color: #94a3b8;
|
|
border-radius: 4px;
|
|
padding: 2px 10px;
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
transition: all 0.15s;
|
|
}
|
|
.support-banner__filter-btn--active {
|
|
background: #b45309;
|
|
border-color: #b45309;
|
|
color: #fff;
|
|
}
|
|
|
|
.support-banner__filter-count {
|
|
background: rgba(255,255,255,0.15);
|
|
border-radius: 8px;
|
|
padding: 0 5px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.support-banner__logs {
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.support-banner__empty {
|
|
color: #475569;
|
|
text-align: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.support-banner__log-entry {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 6px;
|
|
padding: 3px 12px;
|
|
border-bottom: 1px solid #1e293b;
|
|
transition: background 0.1s;
|
|
}
|
|
.support-banner__log-entry:hover { background: #1e293b; }
|
|
|
|
.support-banner__log-entry--error { border-left: 3px solid #ef4444; }
|
|
.support-banner__log-entry--api { border-left: 3px solid #3b82f6; }
|
|
.support-banner__log-entry--recurrence { border-left: 3px solid #8b5cf6; }
|
|
.support-banner__log-entry--guard { border-left: 3px solid #10b981; }
|
|
.support-banner__log-entry--perf { border-left: 3px solid #f59e0b; }
|
|
.support-banner__log-entry--event { border-left: 3px solid #64748b; }
|
|
|
|
.support-banner__log-time { color: #475569; font-size: 10px; flex-shrink: 0; }
|
|
.support-banner__log-level { color: #f59e0b; font-size: 10px; font-weight: 700; text-transform: uppercase; flex-shrink: 0; }
|
|
.support-banner__log-source { color: #7c3aed; font-size: 10px; flex-shrink: 0; }
|
|
.support-banner__log-msg { color: #e2e8f0; flex: 1; }
|
|
|
|
.support-banner__log-expand {
|
|
background: #1e293b;
|
|
border: 1px solid #334155;
|
|
color: #64748b;
|
|
border-radius: 3px;
|
|
padding: 0 5px;
|
|
cursor: pointer;
|
|
font-size: 10px;
|
|
font-family: monospace;
|
|
}
|
|
.support-banner__log-expand:hover { color: #e2e8f0; }
|
|
|
|
.support-banner__log-data {
|
|
width: 100%;
|
|
margin: 4px 0 0;
|
|
background: #0f172a;
|
|
border: 1px solid #1e293b;
|
|
color: #94a3b8;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
font-size: 10px;
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.support-banner__footer {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding: 4px 12px;
|
|
color: #475569;
|
|
font-size: 10px;
|
|
border-top: 1px solid #1e293b;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Transition */
|
|
.support-slide-enter-active,
|
|
.support-slide-leave-active { transition: transform 0.25s ease; }
|
|
.support-slide-enter-from,
|
|
.support-slide-leave-to { transform: translateY(100%); }
|
|
</style>
|