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:
115
README.md
115
README.md
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user