refactor(ui): Rediseño completo de UI con Nuxt UI 4
- Nuevo layout responsivo mobile-first con tabs inferiores - Sidebar colapsable en desktop con cola de impresión - Sistema de templates reutilizables con localStorage - Soporte Dark/Light mode con UColorModeButton - Composables usePrintQueue y useTemplates para estado global - Componentes modulares: CommandBuilder, QuickActions, PrintQueue, QueueItem - Navegación por tabs: Constructor | Cola | Templates
This commit is contained in:
31
app/components/layout/AppHeader.vue
Normal file
31
app/components/layout/AppHeader.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
const queue = usePrintQueue()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950">
|
||||
<div>
|
||||
<h1 class="text-xl font-bold text-gray-900 dark:text-white">
|
||||
PrinterCentral
|
||||
</h1>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
Control de impresoras Epson ePOS
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Contador de cola (visible en desktop) -->
|
||||
<UBadge
|
||||
v-if="queue.operations.value.length > 0"
|
||||
color="primary"
|
||||
variant="subtle"
|
||||
class="hidden md:flex"
|
||||
>
|
||||
{{ queue.operations.value.length }} en cola
|
||||
</UBadge>
|
||||
|
||||
<!-- Toggle Dark/Light mode -->
|
||||
<UColorModeButton />
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
Reference in New Issue
Block a user