06c212821a
- Updated README.md to reflect new project structure and conventions. - Refactored component imports and paths to align with new layout. - Removed legacy components (AppConfig.vue, AppTopbar.vue) and created new layout components (MainLayout.vue, Sidebar.vue, TopBar.vue). - Implemented warehouse module with components for inventory management (WarehouseDashboard.vue, InventoryTable.vue). - Added composables and services for warehouse logic and API interactions. - Introduced shared components (KpiCard.vue) for KPI display. - Enhanced API service for handling HTTP requests. - Defined TypeScript types for warehouse entities and global application types.
118 lines
3.8 KiB
Markdown
118 lines
3.8 KiB
Markdown
# 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.ts` base
|
|
|
|
## 🚀 Uso
|
|
|
|
### Ver Demo de Colores
|
|
```ts
|
|
// En App.vue
|
|
const currentView = ref<'color' | 'warehouse'>('color');
|
|
```
|
|
|
|
### Ver Dashboard de Almacén
|
|
```ts
|
|
// En App.vue
|
|
const currentView = ref<'color' | 'warehouse'>('warehouse');
|
|
```
|
|
|
|
## 📦 Crear un Nuevo Módulo
|
|
|
|
1. Crear estructura en `src/modules/[nombre]/`
|
|
2. Definir tipos en `types/[nombre].d.ts`
|
|
3. Crear servicio en `services/[nombre]Service.ts`
|
|
4. Crear composable en `composables/use[Nombre].ts`
|
|
5. 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`
|