Skip to content

Frontend (Vue 3) ​

El frontend es una Single Page Application Vue 3 usando Pinia para gestión de estado y Vite como tooling.

Stack Tecnológico ​

CapaTecnología
FrameworkVue 3 (Composition API)
EstadoPinia
BuildVite
IconosLucide
Markdownmarked
YAMLjs-yaml
EnrutamientoBasado en componentes (cambio por sidebar)

Arquitectura de Componentes ​

App.vue
├── Header (selectores de contexto/namespace, herramientas)
├── CliToolsNotice
├── Sidebar (navegación de recursos, vistas cloud)
├── Contenido Principal
│   ├── ResourceTable (recursos K8s)
│   ├── EnvManagerView (perfiles de credenciales)
│   ├── GcpView (panel GCP)
│   └── AwsView (panel AWS)
├── ConsoleWorkspaceView (workspace dedicado de sesiones de Consola)
├── TerminalPanel (panel rápido de logs/exec/local/EC2 multi-tab)
├── PortForwardPanel
├── StatusBar
├── Modales
│   ├── DeleteModal
│   ├── ScaleModal
│   ├── YamlModal
│   ├── PortForwardModal
│   └── KubeconfigModal
└── ToastContainer

Stores Pinia ​

StoreArchivoPropósito
useKubeStorestores/useKubeStore.jsEstado K8s (contextos, namespaces, recursos)
usePortForwardStorestores/usePortForwardStore.jsGestión de port forwards
useTerminalStorestores/useTerminalStore.jsPestañas y salida de terminal
useAwsStorestores/useAwsStore.jsDatos y estado de servicios AWS
useGcpStorestores/useGcpStore.jsDatos y estado de servicios GCP