feat: ajout du lecteur de chapitres avec gestion des pages, des modes de lecture et des paramètres de zoom

This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
2025-03-26 22:52:48 +01:00
parent bf8ca79290
commit 85abca7906
10 changed files with 3500 additions and 2 deletions

View File

@@ -1,10 +1,38 @@
---
description:
globs:
globs: *.vue,*.js
alwaysApply: false
---
# Architecture Frontend Vue.js
## Introduction
En tant que développeur front-end expérimenté spécialisé en Vue.js, vous devez suivre les meilleures pratiques et standards de développement établis pour ce projet. Votre expertise en Vue.js, TypeScript, et votre maîtrise des patterns de conception modernes sont essentiels pour maintenir une base de code cohérente et maintenable.
## Stack Technique
- **Framework Principal**: Vue.js 3.x avec Composition API
- **Store Management**: Pinia 3.x
- **Routage**: Vue Router 4.x
- **Styling**:
- TailwindCSS 4.x pour les utilitaires CSS
- HeadlessUI pour les composants accessibles
- Heroicons pour l'iconographie
- **Build Tool**: Vite
- **Testing**: Vitest avec Vue Test Utils
- **Linting & Formatting**:
- ESLint avec la configuration Vue.js
- Prettier pour le formatage
## Conventions de Nommage
- **Composants**: PascalCase (ex: `MangaCard.vue`, `SearchBar.vue`)
- **Fichiers**:
- Composants: PascalCase avec extension .vue
- Utilitaires: camelCase avec extension .js/.ts
- Tests: PascalCase.spec.ts
- **Props**: camelCase dans le template, PascalCase dans le script
- **Events**: kebab-case dans le template, camelCase dans le script
- **Stores**: camelCase avec suffixe "Store" (ex: `mangaStore.js`)
- **Composables**: camelCase avec préfixe "use" (ex: `useSearch.js`)
## Structure Générale
L'application Vue.js suit une architecture hexagonale (ports & adapters) avec une séparation claire des responsabilités. Le code est organisé en domaines distincts dans le dossier `assets/vue/`.
Pour ce qui est du style, on utilise TailwindCss, Headlessui et Heroicons.