style(import): aligner l'UI d'import sur le design system settings
- Layout max-width supprimé → pleine largeur disponible - Sections avec border-t et titres uppercase comme les settings - FileImportCard : card → row (divide-y, py-3, pas de shadow/border) - ImportResults : card → sections border-t inline dans la page - Inputs : padding explicite, border explicite, sans rounded - Suppression de tous les rounded-* sur la page (boutons, badges, images, zone upload)
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
parent
1477106459
commit
f72ae3cab9
@@ -1,50 +1,57 @@
|
||||
<template>
|
||||
<div class="flex flex-col h-full bg-gray-50 dark:bg-gray-900">
|
||||
<Toolbar v-if="store.hasFiles && !store.allFilesProcessed" :config="toolbarConfig" />
|
||||
<div class="flex flex-col h-full">
|
||||
<Toolbar :config="toolbarConfig" />
|
||||
|
||||
<div class="overflow-y-auto flex-1">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
|
||||
<div class="px-6 py-8">
|
||||
|
||||
<!-- Zone de dépôt -->
|
||||
<FileUpload
|
||||
v-if="!store.hasFiles"
|
||||
label="Importer des fichiers CBZ/CBR"
|
||||
accept=".cbz,.cbr"
|
||||
:multiple="true"
|
||||
description="Formats CBZ ou CBR uniquement"
|
||||
@files-selected="store.addFiles($event)"
|
||||
/>
|
||||
|
||||
<!-- Barre de progression -->
|
||||
<div v-if="store.hasFiles && !store.allFilesProcessed" class="flex items-center gap-3">
|
||||
<div class="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
|
||||
<div
|
||||
class="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
|
||||
:style="{ width: store.progressPercentage + '%' }"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400 shrink-0">
|
||||
{{ store.importedCount }}/{{ store.totalFiles }}
|
||||
<span v-if="store.errorCount > 0" class="text-red-500 ml-1">· {{ store.errorCount }} erreur(s)</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Liste des fichiers -->
|
||||
<div v-if="store.hasFiles && !store.allFilesProcessed" class="space-y-4">
|
||||
<FileImportCard
|
||||
v-for="file in store.files"
|
||||
:key="file.id"
|
||||
:file="file"
|
||||
:is-analyzing="store.analyzingFiles.has(file.id)"
|
||||
:is-importing="store.importingFiles.has(file.id)"
|
||||
@manga-selected="(manga) => store.setFileManga(file.id, manga)"
|
||||
@chapter-number-selected="(n) => store.setFileChapterNumber(file.id, n)"
|
||||
@volume-number-selected="(n) => store.setFileVolumeNumber(file.id, n)"
|
||||
@import-file="() => importSingleFile(file.id)"
|
||||
@retry-file="() => retryFile(file.id)"
|
||||
@remove-file="() => store.removeFile(file.id)"
|
||||
<section v-if="!store.hasFiles" class="border-t border-gray-200 dark:border-gray-700 pt-6">
|
||||
<h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">Fichiers</h2>
|
||||
<FileUpload
|
||||
label="Importer des fichiers CBZ/CBR"
|
||||
accept=".cbz,.cbr"
|
||||
:multiple="true"
|
||||
description="Formats CBZ ou CBR uniquement"
|
||||
@files-selected="store.addFiles($event)"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Fichiers en cours -->
|
||||
<template v-if="store.hasFiles && !store.allFilesProcessed">
|
||||
<section class="border-t border-gray-200 dark:border-gray-700 pt-6">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">
|
||||
{{ store.totalFiles }} fichier(s)
|
||||
</h2>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ store.importedCount }}/{{ store.totalFiles }}
|
||||
<span v-if="store.errorCount > 0" class="text-red-500 ml-1">· {{ store.errorCount }} erreur(s)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="bg-gray-200 dark:bg-gray-700 h-1.5 mb-4">
|
||||
<div
|
||||
class="bg-green-600 h-1.5 transition-all duration-300"
|
||||
:style="{ width: store.progressPercentage + '%' }"
|
||||
/>
|
||||
</div>
|
||||
<div class="divide-y divide-gray-100 dark:divide-gray-700/50">
|
||||
<FileImportCard
|
||||
v-for="file in store.files"
|
||||
:key="file.id"
|
||||
:file="file"
|
||||
:is-analyzing="store.analyzingFiles.has(file.id)"
|
||||
:is-importing="store.importingFiles.has(file.id)"
|
||||
@manga-selected="(manga) => store.setFileManga(file.id, manga)"
|
||||
@chapter-number-selected="(n) => store.setFileChapterNumber(file.id, n)"
|
||||
@volume-number-selected="(n) => store.setFileVolumeNumber(file.id, n)"
|
||||
@import-file="() => importSingleFile(file.id)"
|
||||
@retry-file="() => retryFile(file.id)"
|
||||
@remove-file="() => store.removeFile(file.id)"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<!-- Résultats -->
|
||||
<ImportResults v-if="store.allFilesProcessed" />
|
||||
@@ -66,7 +73,9 @@ import ImportResults from '../components/ImportResults.vue';
|
||||
const store = useNewImportStore();
|
||||
|
||||
const toolbarConfig = computed(() => ({
|
||||
leftSection: [],
|
||||
leftSection: [
|
||||
{ type: 'label', text: 'Import de bibliothèque', class: 'text-sm font-medium' },
|
||||
],
|
||||
rightSection: [
|
||||
...(store.analyzedFiles.length > 0 ? [{
|
||||
type: 'button',
|
||||
|
||||
Reference in New Issue
Block a user