josedario87
bc02bc6bde
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 52s
- Crear THEME_SYSTEM.md como documento único y completo - Eliminar DEVELOPER_GUIDE.md y THEME_CUSTOMIZATION.md (desactualizados) - Actualizar README.md con referencia al nuevo documento - Incluye arquitectura, variables, reglas, ejemplos y troubleshooting - Documentación clara para usuarios y desarrolladores
114 lines
2.3 KiB
Markdown
114 lines
2.3 KiB
Markdown
# Analítica Núcleo Data Studio
|
|
|
|
Panel de administración y monitoreo empresarial para Núcleo Río Frío, construido con Nuxt 4, Vue 3 y Nuxt UI.
|
|
|
|
## Características Principales
|
|
|
|
- 🎨 **Sistema de Temas Personalizable** - Personaliza todos los colores de la interfaz
|
|
- 🔐 **Autenticación con Authentik** - SSO seguro con Authentik Proxy Outpost
|
|
- 📊 **Dashboards Interactivos** - Visualizaciones de datos con filtros dinámicos
|
|
- 🌙 **Dark Mode Optimizado** - Tema oscuro pensado para uso prolongado
|
|
- 🚀 **Performance** - Construido con Nuxt 4 y Vue 3 Composition API
|
|
- 📱 **Responsive** - Optimizado para desktop, tablet y móvil
|
|
|
|
## Sistema de Temas
|
|
|
|
Analítica Núcleo cuenta con un **sistema de temas completamente personalizable** que permite ajustar todos los colores de la interfaz en tiempo real.
|
|
|
|
### Características
|
|
|
|
- ✅ 8 variables de color personalizables
|
|
- ✅ 4 temas predefinidos: Café, Azul, Verde, Carbón
|
|
- ✅ Personalización individual con selector visual
|
|
- ✅ Persistencia en localStorage
|
|
- ✅ Exportar/importar temas en JSON
|
|
- ✅ Integración completa con Nuxt UI
|
|
|
|
### Para Usuarios
|
|
|
|
Accede a **Configuración** (`/settings`) para personalizar el tema de la aplicación.
|
|
|
|
### Para Desarrolladores
|
|
|
|
**REGLAS OBLIGATORIAS:**
|
|
- ✅ Usa **SIEMPRE** variables CSS (`--brand-*`)
|
|
- ✅ Usa clases utilitarias (`.brand-card`, `.brand-shell`, etc.)
|
|
- ❌ **NUNCA** uses colores hardcoded (`#ffffff`, etc.)
|
|
- ❌ **NUNCA** uses clases gray-scale (`bg-gray-900`, etc.)
|
|
|
|
📖 **Documentación completa:** [THEME_SYSTEM.md](./docs/THEME_SYSTEM.md)
|
|
|
|
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
|
|
|
## Setup
|
|
|
|
Make sure to install dependencies:
|
|
|
|
```bash
|
|
# npm
|
|
npm install
|
|
|
|
# pnpm
|
|
pnpm install
|
|
|
|
# yarn
|
|
yarn install
|
|
|
|
# bun
|
|
bun install
|
|
```
|
|
|
|
## Development Server
|
|
|
|
Start the development server on `http://localhost:3000`:
|
|
|
|
```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.
|