711774425b
- CLAUDE.md devient un index concis : contexte, stack, regles absolues numerotees, pointeurs vers les fichiers de regles detaillees via references @.claude/rules/*.md - Les conventions detaillees (architecture, backend, frontend, testing, naming, git, workflow) sont extraites dans .claude/rules/ pour rester chargees a la demande sans gonfler le context du CLAUDE.md principal - Ajoute la regle absolue "Ne jamais mentionner Claude/IA dans commits ou PR" (point 10) pour garder l'historique git signe par l'utilisateur
70 lines
3.1 KiB
Markdown
70 lines
3.1 KiB
Markdown
# Frontend — Regles Nuxt 4 / Vue 3 / @malio/layer-ui
|
|
|
|
## Base
|
|
|
|
- TypeScript strict
|
|
- 4 espaces d'indentation
|
|
- Commentaires (JSDoc, inline, bloc) **en francais** ; code (variables, types) en anglais
|
|
- Chaque module front = un layer Nuxt auto-detecte (`frontend/modules/*/nuxt.config.ts` minimal)
|
|
|
|
## Appels API
|
|
|
|
- Toujours `useApi()` — jamais `$fetch`, `ofetch`, `axios` en direct
|
|
- `useApi()` gere : cookies JWT, erreurs, toasts i18n, parsing Hydra
|
|
|
|
## Stores (Pinia)
|
|
|
|
- `useAuthStore` pour l'authentification
|
|
- `useUiStore` pour l'etat UI global (sidebar, modales, etc.)
|
|
- Composables avec state singleton (refs module-level) : exposer une fonction `reset*()` et la rappeler au logout (ex: `useSidebar().resetSidebar()`)
|
|
|
|
## Middlewares globaux
|
|
|
|
- `auth.global.ts` protege les routes + charge la sidebar apres login
|
|
- `modules.global.ts` redirige si la route demandee est dans `disabledRoutes`
|
|
|
|
## i18n et sidebar
|
|
|
|
- Labels de sidebar = cles i18n `sidebar.<module>.*`, jamais du texte brut
|
|
- Le layout `default.vue` applique `t()` sur les labels retournes par `/api/sidebar`
|
|
- Traductions dans `frontend/i18n/locales/`
|
|
|
|
## Composants formulaires — @malio/layer-ui obligatoire
|
|
|
|
Tout champ de formulaire / filtre doit utiliser les composants `Malio*` plutot que `<input>` / `<select>` bruts :
|
|
|
|
- `MalioInputText`, `MalioInputNumber`, `MalioInputAmount`, `MalioInputPassword`, `MalioInputTextArea`
|
|
- `MalioSelect`, `MalioSelectCheckbox`, `MalioCheckbox`, `MalioRadioButton`
|
|
- `MalioInputUpload`, `MalioTime`
|
|
- `MalioButton`, `MalioButtonIcon`
|
|
|
|
**Exceptions autorisees** (commenter un `// TODO` pour migrer quand la lib couvrira le cas) :
|
|
1. Type non couvert : `datetime-local`, `date`, color picker, file drag & drop
|
|
2. Bug connu bloquant (ex: `MalioSelect` avec options string) — documenter le bug en commentaire
|
|
|
|
Toute autre exception requiert validation avant merge.
|
|
|
|
## Tableaux de donnees — MalioDataTable obligatoire
|
|
|
|
Tout affichage LISTE tabulaire (donnees metier paginees, CRUD admin) doit passer par `MalioDataTable` :
|
|
- Pagination integree
|
|
- Slots `#header-*` pour filtres, `#cell-*` pour rendu custom
|
|
- Pas de `<table>` brut avec pagination custom
|
|
|
|
**Exception** : tableaux purement presentationnels non paginables (diff field/old/new, grille de comparaison, matrice RBAC d'admin, etc.) peuvent rester en `<table>` HTML brut.
|
|
|
|
## Etat des tableaux — pas de persistance URL
|
|
|
|
**Interdit** de persister l'etat d'un tableau (filtres, pagination, tri par colonne, selection, ligne active, scroll) dans la query string ou de le reinjecter depuis `route.query` au montage.
|
|
|
|
- L'etat vit uniquement dans le composant (`reactive`, `ref` locales)
|
|
- Seuls les deep links "de navigation metier" (ex: ouvrir un detail precis `/users/42`) sont dans l'URL
|
|
- Exceptions autorisees **sur demande explicite** de l'utilisateur
|
|
|
|
## Interdits
|
|
|
|
- `modules-loader.ts`, `.module.ts` — le scan des layers est automatique
|
|
- Hardcode de la sidebar cote front — elle vient de `/api/sidebar`
|
|
- Edition manuelle de `extends` dans `frontend/nuxt.config.ts` — les layers sont scannes
|
|
- Import d'un module front depuis un autre module — passer par `frontend/shared/`
|