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:
2025-11-24 17:46:20 -06:00
parent f3c13b356b
commit 470ecef4f1
39 changed files with 16114 additions and 1856 deletions

115
README.md
View File

@@ -1,60 +1,75 @@
Printer Central (Epson ePOS)
# Nuxt Minimal Starter
Resumen
- Backend Node.js que envía comandos ePOS-Print vía SOAP a una impresora Epson configurada en HTTPS con certificado autofirmado.
- Frontend Vue 3 (Vite) con glassmorphism en escala de grises para escribir texto y activar funciones: alineación, fuente, tamaño, estilos, feed, corte, cajón, QR y código de barras. También permite componer un lote de operaciones genéricas.
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
Requisitos
- Node.js 18+ (probado con v22) y npm.
## Setup
Instalación y ejecución
1) Instalar dependencias:
npm install
Make sure to install dependencies:
2) Configurar destino (opcional, valores por defecto entre paréntesis):
export PRINTER_HOST=192.168.87.147 # IP/DNS de la impresora
export PRINTER_DEVICE_ID=matricial2 # DeviceId
export PRINTER_TIMEOUT_MS=60000 # Timeout ePOS
```bash
# npm
npm install
3) Desarrollo con hot reload (cliente + servidor):
npm run dev
# pnpm
pnpm install
- Frontend (Vite + Vue 3) en http://localhost:5173
- Proxy /api → http://localhost:3030 (Express)
- El servidor se recarga con nodemon al cambiar archivos en src/
# yarn
yarn install
4) Producción (build del cliente + servidor Express):
npm run build # genera assets en public/
npm start # sirve API y estáticos desde public/ (por defecto en :3030)
# bun
bun install
```
API principal
- POST /api/print
Body JSON: { operations: [ { op: string, ...attrs }, ... ] }
Construye el cuerpo de <epos-print> según las operaciones y lo envía dentro de un sobre SOAP a:
https://PRINTER_HOST/cgi-bin/epos/service.cgi?devid=PRINTER_DEVICE_ID&timeout=PRINTER_TIMEOUT_MS
## Development Server
Operaciones soportadas (clave op)
- text { value }
- textLang { lang }
- textAlign { align: left|center|right }
- textRotate { rotate: boolean }
- textLineSpace { linespc }
- textFont { font: font_a|font_b|... }
- textSmooth { smooth: boolean }
- textDouble { dw: boolean, dh: boolean }
- textSize { width: 1..8, height: 1..8 }
- textStyle { reverse?: boolean, ul?: boolean, em?: boolean, color?: color_1..color_4 }
- textPosition { x }
- textVPosition { y }
- feed {}
- feedUnit { unit }
- feedLine { line }
- feedPosition { pos }
- cut { type: no_feed|feed|reserve|no_feed_fullcut|feed_fullcut|reserve_fullcut }
- pulse { drawer?: drawer_1|drawer_2, time?: pulse_100|...|pulse_500 }
- barcode { data, type, hri, font, width, height }
- qrcode { data, model, level, size }
Start the development server on `http://localhost:3000`:
Notas
- El backend desactiva la verificación TLS (self-signed) únicamente para la conexión con la impresora.
- Si necesitas más funciones (logo/imágenes, páginas, líneas, etc.), se pueden añadir fácilmente replicando los métodos del ePOSBuilder oficial.
```bash
# npm
npm run dev
# pnpm
pnpm dev
# yarn
yarn dev
# bun
bun run dev
```
## Production
Build the application for production:
```bash
# npm
npm run build
# pnpm
pnpm build
# yarn
yarn build
# bun
bun run build
```
Locally preview production build:
```bash
# npm
npm run preview
# pnpm
pnpm preview
# yarn
yarn preview
# bun
bun run preview
```
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.