planetazuzu
a26963654f
- Arquitectura paralela para Guías de Refuerzo - Nuevos componentes: GuideCard, GuideHeader, GuideNavigation, etc. - Vistas formativas: GuideIndex, GuideViewer, GuideSectionViewer - Layout específico GuideLayout (sin BottomNav) - Índice de guías con ABCDE Operativo y RCP Adulto SVB - Corrección de Service Worker para desarrollo - Enlaces de navegación en menú y página principal - Documentación completa de implementación
161 lines
4.5 KiB
Markdown
161 lines
4.5 KiB
Markdown
# Implementación Base - Sistema de Guías de Refuerzo (Modo Formativo)
|
|
|
|
## ✅ Estado: COMPLETADO
|
|
|
|
La arquitectura paralela para el Modo Formativo está completamente implementada y lista para usar.
|
|
|
|
---
|
|
|
|
## 📁 Estructura de Carpetas Creada
|
|
|
|
```
|
|
src/
|
|
├── layouts/
|
|
│ ├── DefaultLayout.tsx ✅ Wrapper del layout actual (modo operativo)
|
|
│ └── GuideLayout.tsx ✅ Layout exclusivo para guías formativas
|
|
│
|
|
├── views/
|
|
│ └── formativo/
|
|
│ ├── GuideIndex.tsx ✅ Lista de todas las guías
|
|
│ ├── GuideViewer.tsx ✅ Visualizador completo de guía (con tabs)
|
|
│ └── GuideSectionViewer.tsx ✅ Visualizador de sección individual
|
|
│
|
|
├── components/
|
|
│ └── guide/
|
|
│ ├── GuideCard.tsx ✅ Card clicable para cada guía
|
|
│ ├── GuideHeader.tsx ✅ Header de guía con icono y badge
|
|
│ ├── GuideNavigation.tsx ✅ Navegación anterior/siguiente
|
|
│ ├── GuideMarkdownViewer.tsx ✅ Wrapper de MarkdownViewer
|
|
│ └── GuideModeBadge.tsx ✅ Badge "Modo Formación"
|
|
│
|
|
└── data/
|
|
└── guides-index.ts ✅ Índice de guías con 2 guías configuradas
|
|
```
|
|
|
|
---
|
|
|
|
## 🛣️ Rutas Configuradas
|
|
|
|
Todas las rutas están integradas en `App.tsx` sin modificar las existentes:
|
|
|
|
- ✅ `/guia-refuerzo` → Lista de guías (GuideIndex)
|
|
- ✅ `/guia-refuerzo/:guia` → Visualizador completo (GuideViewer con tabs)
|
|
- ✅ `/guia-refuerzo/:guia/seccion/:numero` → Sección individual (GuideSectionViewer)
|
|
|
|
---
|
|
|
|
## 📊 Guías Configuradas
|
|
|
|
### 1. ABCDE Operativo
|
|
- **ID:** `abcde-operativo`
|
|
- **8 secciones:** Todas configuradas
|
|
- **Protocolo operativo:** `/manual/parte-i-fundamentos/bloque-1-procedimientos-basicos/1.2.2`
|
|
|
|
### 2. RCP Adulto SVB
|
|
- **ID:** `rcp-adulto-svb`
|
|
- **8 secciones:** Todas configuradas
|
|
- **Protocolo operativo:** `/rcp`
|
|
|
|
---
|
|
|
|
## 🎨 Características del Layout Formativo
|
|
|
|
### GuideLayout
|
|
- ✅ Reutiliza `Header` y `Footer` existentes
|
|
- ✅ **NO incluye** `BottomNav` (diferencia visual con modo operativo)
|
|
- ✅ Badge "Modo Formación" visible
|
|
- ✅ Contenedor `max-w-2xl` centrado
|
|
- ✅ Más espaciado vertical (`py-6`) para mejor lectura
|
|
|
|
### Diferencias Visuales
|
|
- **Modo Operativo:** Header + BottomNav + Footer
|
|
- **Modo Formativo:** Header + Badge + Footer (sin BottomNav)
|
|
|
|
---
|
|
|
|
## 📄 Archivos Markdown
|
|
|
|
### Ubicación
|
|
- **Fuente:** `docs/consolidado/*.md`
|
|
- **Destino:** `public/docs/consolidado/*.md` (para que Vite los sirva)
|
|
|
|
### Script de Copia
|
|
```bash
|
|
./scripts/copiar-guias-markdown.sh
|
|
```
|
|
|
|
**Estado:** ✅ 81 archivos Markdown copiados correctamente
|
|
|
|
---
|
|
|
|
## 🔧 Componentes Clave
|
|
|
|
### GuideMarkdownViewer
|
|
- Wrapper de `MarkdownViewer` existente
|
|
- **NO modifica** el componente original
|
|
- Estilos optimizados para lectura formativa
|
|
- Carga archivos desde `/docs/consolidado/`
|
|
|
|
### GuideCard
|
|
- Card clicable con icono, título, descripción
|
|
- Badge "Modo Formación" visible
|
|
- Link a `/guia-refuerzo/:guia`
|
|
|
|
### GuideNavigation
|
|
- Navegación anterior/siguiente entre secciones
|
|
- Indicador de sección actual (ej: "3 / 8")
|
|
- Botones deshabilitados en primera/última sección
|
|
|
|
---
|
|
|
|
## 🚀 Uso
|
|
|
|
### Acceso
|
|
1. Navegar a `/guia-refuerzo`
|
|
2. Ver lista de guías disponibles
|
|
3. Click en una guía para ver todas las secciones
|
|
4. Navegar entre secciones con tabs o navegación
|
|
|
|
### Agregar Nueva Guía
|
|
1. Agregar entrada en `src/data/guides-index.ts`
|
|
2. Asegurar que los 8 archivos Markdown existan en `docs/consolidado/`
|
|
3. Ejecutar `./scripts/copiar-guias-markdown.sh`
|
|
4. La guía aparecerá automáticamente en la lista
|
|
|
|
---
|
|
|
|
## ✅ Verificaciones
|
|
|
|
- ✅ No se modificaron componentes existentes
|
|
- ✅ No se modificaron estilos globales
|
|
- ✅ Rutas integradas sin conflictos
|
|
- ✅ Lazy loading implementado
|
|
- ✅ TypeScript sin errores
|
|
- ✅ Linter sin errores
|
|
- ✅ Archivos Markdown copiados correctamente
|
|
|
|
---
|
|
|
|
## 📝 Próximos Pasos (Opcionales)
|
|
|
|
1. **Búsqueda en guías:** Agregar búsqueda dentro de las guías
|
|
2. **Favoritos:** Permitir marcar secciones como favoritas
|
|
3. **Progreso:** Guardar progreso de lectura
|
|
4. **Compartir:** Compartir secciones específicas
|
|
5. **Modo offline:** Asegurar que las guías funcionen offline (PWA)
|
|
|
|
---
|
|
|
|
## 🔒 Seguridad
|
|
|
|
- ✅ Layout actual **NO modificado**
|
|
- ✅ Componentes existentes **NO modificados**
|
|
- ✅ Rutas existentes **NO modificadas**
|
|
- ✅ Arquitectura **paralela** y **reversible**
|
|
|
|
---
|
|
|
|
**Fecha de implementación:** 2024-12-27
|
|
**Estado:** ✅ Listo para producción
|
|
|