feat(ui): mejorar la estructura y composición de RdxPageContent en patrones y sistema UI
This commit is contained in:
parent
9f303819b3
commit
c6de77897d
@ -71,6 +71,19 @@ AppMain
|
||||
└── footer opcional
|
||||
```
|
||||
|
||||
```text
|
||||
RdxPageFrame
|
||||
→ estructura y scroll
|
||||
|
||||
RdxPageContainer
|
||||
→ ancho y padding
|
||||
|
||||
RdxPageContent
|
||||
→ composición de los hijos principales
|
||||
```
|
||||
|
||||
Regla: Las Pages no deben reconstruir estas responsabilidades con wrappers HTML locales.
|
||||
|
||||
## 6. Identity y sesión
|
||||
|
||||
El runtime actual se compone en `apps/web/src/app.tsx`:
|
||||
|
||||
@ -36,18 +36,20 @@ El controller de página concentra URL, filtros, consulta, estados y navegación
|
||||
|
||||
```tsx
|
||||
<RdxPageFrame
|
||||
header={<RdxEditorHeader title={title} onBack={onBack} />}
|
||||
footer={<RdxEditorActionBar secondary={cancel} primary={submit} />}
|
||||
header={<RdxEditorHeader />}
|
||||
footer={<RdxEditorActionBar />}
|
||||
>
|
||||
<RdxPageContainer width="content">
|
||||
<RdxPageContent aside={aside}>
|
||||
{notice}
|
||||
<RdxPanel title={sectionTitle}>{fields}</RdxPanel>
|
||||
<RdxPageContent>
|
||||
{pageError ? <ErrorAlert /> : null}
|
||||
<Editor />
|
||||
</RdxPageContent>
|
||||
</RdxPageContainer>
|
||||
</RdxPageFrame>
|
||||
```
|
||||
|
||||
Los errores inline no definen su propio spacing estructural. Participan del spacing estándar de RdxPageContent igual que el resto de hijos principales.
|
||||
|
||||
Footer y aside son opcionales. `content` es adecuado para formularios focalizados; `full` para editores documentales amplios. Create y Update deben compartir geometría cuando solo cambian defaults, submit o navegación.
|
||||
|
||||
Loading y error bloqueante usan también `RdxPageFrame` y `RdxPageContainer`; no reconstruyen el viewport.
|
||||
|
||||
@ -144,6 +144,21 @@ Excepción: un detalle documental puede configurar el contenido del frame con `o
|
||||
- Tablas y editores de líneas conservan su layout funcional.
|
||||
- Evitar card dentro de card y sombras acumuladas.
|
||||
|
||||
### Composición del contenido principal
|
||||
|
||||
`RdxPageContent` es el compositor estructural de los hijos principales de una página.
|
||||
|
||||
Los avisos, errores inline, secciones y contenido funcional deben ser hijos directos cuando pertenezcan al mismo nivel visual.
|
||||
`RdxPanel` no es un wrapper genérico. Se usa únicamente cuando existe una sección con identidad visual o semántica propia.
|
||||
|
||||
```tsx
|
||||
<RdxPageContent>
|
||||
{error ? <ErrorAlert /> : null}
|
||||
<Editor />
|
||||
</RdxPageContent>
|
||||
```
|
||||
No deben introducirse wrappers adicionales únicamente para controlar gap, ancho, padding o centrado.
|
||||
|
||||
## 8. Responsive y accesibilidad
|
||||
|
||||
- Las columnas se apilan antes de producir overflow horizontal.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user