printerCentral/app/components/layout/AppHeader.vue

<script setup lang="ts">
const queue = usePrintQueue()
const showHelp = ref(false)

// Ejemplos de sintaxis de variables (para mostrar en la ayuda)
const varExamples = {
  simple: '{{nombre}}',
  withLabel: '{{nombre:Etiqueta}}',
  withDefault: '{{nombre:Etiqueta:valor}}',
  example: '{{cliente:Nombre del cliente}}'
}
</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 class="flex items-center gap-3">
      <img src="/icon.png" alt="PrinterCentral" class="w-10 h-10 rounded-lg" />
      <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>

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

      <!-- Botón de ayuda -->
      <UButton
        icon="i-heroicons-information-circle"
        color="neutral"
        variant="ghost"
        size="sm"
        title="Ayuda"
        @click="showHelp = true"
      />

      <!-- Toggle Dark/Light mode -->
      <UColorModeButton />
    </div>
  </header>

  <!-- Modal de ayuda -->
  <UModal v-model:open="showHelp" title="Ayuda - PrinterCentral" description="Guía de uso de la aplicación" :ui="{ width: 'max-w-2xl' }">
    <template #body>
      <div class="space-y-6 text-sm">
        <!-- Introducción -->
        <section>
          <h3 class="font-semibold text-gray-900 dark:text-white mb-2">
            Acerca de PrinterCentral
          </h3>
          <p class="text-gray-600 dark:text-gray-400">
            PrinterCentral es una aplicación para controlar impresoras térmicas Epson compatibles con ePOS.
            Permite crear comandos de impresión, guardarlos como templates reutilizables y enviarlos a múltiples impresoras.
          </p>
        </section>

        <!-- Constructor de comandos -->
        <section>
          <h3 class="font-semibold text-gray-900 dark:text-white mb-2">
            Constructor de Comandos
          </h3>
          <p class="text-gray-600 dark:text-gray-400 mb-2">
            Crea comandos de impresión usando los diferentes tipos disponibles:
          </p>
          <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-1">
            <li><strong>Texto:</strong> Imprime texto con opciones de alineación, tamaño y estilo</li>
            <li><strong>Feed:</strong> Avanza el papel N líneas</li>
            <li><strong>Cortar:</strong> Corta el papel (completo o parcial)</li>
            <li><strong>Pulse:</strong> Activa el cajón de dinero</li>
            <li><strong>QR:</strong> Genera códigos QR</li>
            <li><strong>Barcode:</strong> Genera códigos de barras (EAN13, CODE128, etc.)</li>
          </ul>
        </section>

        <!-- Templates -->
        <section>
          <h3 class="font-semibold text-gray-900 dark:text-white mb-2">
            Templates
          </h3>
          <p class="text-gray-600 dark:text-gray-400 mb-2">
            Los templates permiten guardar secuencias de comandos para reutilizarlos.
            Guarda un template desde la cola de impresión usando el botón "Guardar template".
          </p>
          <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 mt-2">
            <h4 class="font-medium text-gray-900 dark:text-white mb-1">Variables en Templates</h4>
            <p class="text-gray-600 dark:text-gray-400 mb-2">
              Puedes usar variables en el texto para crear templates dinámicos:
            </p>
            <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-1 text-xs">
              <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">{{ varExamples.simple }}</code> - Variable simple</li>
              <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">{{ varExamples.withLabel }}</code> - Con etiqueta descriptiva</li>
              <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">{{ varExamples.withDefault }}</code> - Con etiqueta y valor por defecto</li>
            </ul>
            <p class="text-gray-500 dark:text-gray-500 mt-2 text-xs">
              Ejemplo: <code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">Cliente: {{ varExamples.example }}</code>
            </p>
          </div>
        </section>

        <!-- Impresoras -->
        <section>
          <h3 class="font-semibold text-gray-900 dark:text-white mb-2">
            Configuración de Impresoras
          </h3>
          <p class="text-gray-600 dark:text-gray-400 mb-2">
            Configura las impresoras desde el panel lateral (desktop) o desde la pestaña "Impresoras" (mobile).
          </p>
          <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-1">
            <li><strong>Nombre:</strong> Identificador para la impresora</li>
            <li><strong>IP:</strong> Dirección IP de la impresora en la red</li>
            <li><strong>Puerto:</strong> Puerto del servicio ePOS (default: 8008)</li>
            <li><strong>Device ID:</strong> Identificador del dispositivo (default: local_printer)</li>
          </ul>
          <p class="text-gray-500 dark:text-gray-500 mt-2 text-xs">
            La impresora marcada como "default" se selecciona automáticamente al iniciar.
          </p>
        </section>

        <!-- Cola de impresión -->
        <section>
          <h3 class="font-semibold text-gray-900 dark:text-white mb-2">
            Cola de Impresión
          </h3>
          <p class="text-gray-600 dark:text-gray-400">
            Los comandos se agregan a la cola antes de imprimir. Puedes reordenar, editar o eliminar comandos
            individuales. Cuando la cola esté lista, selecciona la impresora y presiona "Imprimir".
          </p>
        </section>
      </div>
    </template>

    <template #footer>
      <div class="flex justify-end">
        <UButton color="primary" @click="showHelp = false">
          Entendido
        </UButton>
      </div>
    </template>
  </UModal>
</template>