e1521ef9c7
- Added axios as a dependency for handling HTTP requests. - Refactored the authentication logic by moving it to a new module structure. - Replaced the old auth store with a composable useAuth for better state management. - Created a new Login.vue component for the login page with improved UI. - Implemented an AuthService for handling authentication-related API calls. - Removed the old Login.vue and uth.ts files to clean up the codebase. - Updated router to use the new login component and auth composable. - Added interceptors to handle token management and error responses globally.
Estructura del Proyecto - GOLS Control Frontend
📁 Estructura de Carpetas
src/
├── App.vue # Componente raíz (cambia entre demos)
├── main.ts # Punto de entrada
├── MainLayout.vue # Layout principal con Sidebar + TopBar
├── ColorDemo.vue # Demo de personalización de colores
│
├── assets/ # Recursos estáticos
│ └── styles/
│ └── main.css # Estilos globales y variables CSS
│
├── components/ # Componentes globales
│ ├── layout/ # Componentes de layout
│ │ ├── TopBar.vue # Barra superior
│ │ ├── Sidebar.vue # Menú lateral
│ │ └── AppConfig.vue # Panel de configuración de colores
│ │
│ ├── shared/ # Componentes compartidos
│ │ └── KpiCard.vue # Tarjeta de KPI
│ │
│ ├── ui/ # Componentes UI reutilizables
│ │ └── (vacío por ahora)
│ │
│ └── Holos/ # (Legacy - se puede eliminar)
│ ├── AppTopbar.vue
│ └── AppConfig.vue
│
├── composables/ # Composables globales
│ └── useLayout.ts # Gestión de tema y colores
│
├── modules/ # Módulos de negocio
│ └── warehouse/ # Módulo de almacén
│ ├── components/
│ │ ├── WarehouseDashboard.vue # Dashboard principal
│ │ └── InventoryTable.vue # Tabla de inventario
│ │
│ ├── composables/
│ │ └── useWarehouse.ts # Lógica de negocio
│ │
│ ├── services/
│ │ └── warehouseService.ts # API del módulo
│ │
│ └── types/
│ └── warehouse.d.ts # Tipos TypeScript
│
├── services/ # Servicios globales
│ └── api.ts # Cliente HTTP base
│
└── types/ # Tipos globales
└── global.d.ts # Definiciones TypeScript globales
🎯 Convenciones
Módulos
Cada módulo sigue la estructura:
modules/[nombre-modulo]/
├── components/ # Componentes específicos del módulo
├── composables/ # Lógica de negocio del módulo
├── services/ # API calls del módulo
└── types/ # Types específicos del módulo
Componentes
- Layout: Componentes de estructura (TopBar, Sidebar, etc.)
- Shared: Componentes reutilizables entre módulos
- UI: Componentes de interfaz básicos
Composables
- Prefijo
use(ej:useWarehouse,useLayout) - Encapsulan lógica reutilizable
- Retornan estado reactivo y métodos
Services
- Manejan comunicaciones HTTP
- Retornan Promises
- Usan el cliente
api.tsbase
🚀 Uso
Ver Demo de Colores
// En App.vue
const currentView = ref<'color' | 'warehouse'>('color');
Ver Dashboard de Almacén
// En App.vue
const currentView = ref<'color' | 'warehouse'>('warehouse');
📦 Crear un Nuevo Módulo
- Crear estructura en
src/modules/[nombre]/ - Definir tipos en
types/[nombre].d.ts - Crear servicio en
services/[nombre]Service.ts - Crear composable en
composables/use[Nombre].ts - Crear componentes en
components/
🎨 Sistema de Colores
- Color primario: Azul (fijo)
- Colores de superficie: 5 opciones (slate, gray, zinc, neutral, stone)
- Modo oscuro: Activable desde TopBar
📝 Notas
- Los componentes de PrimeVue se auto-importan
- TypeScript configurado con strict mode
- Tailwind CSS v4 integrado
- Variables CSS personalizadas en
main.css