feat: Agregar modal de ayuda en el header
Agrega un botón de información en la barra superior que abre un modal con documentación sobre: - Descripción general de PrinterCentral - Tipos de comandos disponibles (Texto, Feed, Cortar, Pulse, QR, Barcode) - Cómo usar templates y la sintaxis de variables - Configuración de impresoras - Funcionamiento de la cola de impresión
This commit is contained in:
@@ -1,5 +1,14 @@
|
||||
<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>
|
||||
@@ -24,8 +33,117 @@ const queue = usePrintQueue()
|
||||
{{ 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>
|
||||
|
||||
Reference in New Issue
Block a user