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">
|
<script setup lang="ts">
|
||||||
const queue = usePrintQueue()
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -24,8 +33,117 @@ const queue = usePrintQueue()
|
|||||||
{{ queue.operations.value.length }} en cola
|
{{ queue.operations.value.length }} en cola
|
||||||
</UBadge>
|
</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 -->
|
<!-- Toggle Dark/Light mode -->
|
||||||
<UColorModeButton />
|
<UColorModeButton />
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</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>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user