77 lines
2.5 KiB
Vue
77 lines
2.5 KiB
Vue
<template>
|
|
<div class="chapter-page">
|
|
<div class="chapter-header">
|
|
<!-- Bouton de retour -->
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<button
|
|
@click="goBackToManga"
|
|
class="flex items-center gap-2 px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-white transition-colors duration-200"
|
|
:disabled="!currentChapter?.mangaId"
|
|
>
|
|
<ArrowLeftIcon class="h-5 w-5" />
|
|
<span class="text-sm font-medium">Retour au manga</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Titre du chapitre amélioré -->
|
|
<div class="chapter-title-section">
|
|
<h1 class="text-3xl md:text-4xl font-bold text-white leading-tight">
|
|
{{ currentChapter?.title || 'Chargement...' }}
|
|
</h1>
|
|
<div class="chapter-meta mt-3">
|
|
<span class="inline-flex items-center px-3 py-1 bg-blue-600 text-white text-sm font-semibold rounded-full">
|
|
Chapitre {{ currentChapter?.number }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reader-container">
|
|
<ChapterReader :chapter-id="chapterId" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ArrowLeftIcon } from '@heroicons/vue/24/outline';
|
|
import { computed } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useReaderStore } from '../../application/store/readerStore';
|
|
import ChapterReader from '../components/ChapterReader.vue';
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const store = useReaderStore();
|
|
|
|
const chapterId = computed(() => route.params.chapterId);
|
|
const currentChapter = computed(() => store.currentChapter);
|
|
|
|
const goBackToManga = () => {
|
|
if (currentChapter.value?.mangaId) {
|
|
router.push({ name: 'manga-details', params: { id: currentChapter.value.mangaId } });
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="postcss" scoped>
|
|
.chapter-page {
|
|
@apply w-full h-full flex flex-col;
|
|
}
|
|
|
|
.chapter-header {
|
|
@apply p-6 bg-gradient-to-b from-gray-800 to-gray-900 border-b border-gray-700 shadow-lg;
|
|
}
|
|
|
|
.chapter-title-section {
|
|
@apply space-y-2;
|
|
}
|
|
|
|
.chapter-meta {
|
|
@apply flex flex-wrap items-center gap-3;
|
|
}
|
|
|
|
.reader-container {
|
|
@apply flex-1 overflow-hidden;
|
|
}
|
|
</style>
|