fix: align backup ui and downloads
This commit is contained in:
282
pages/backup.vue
282
pages/backup.vue
@@ -23,6 +23,7 @@
|
||||
<BackupRun
|
||||
class="animate-fade-in-up"
|
||||
style="animation-delay: 180ms"
|
||||
@result="handleScriptResult"
|
||||
/>
|
||||
</section>
|
||||
|
||||
@@ -45,6 +46,47 @@
|
||||
:folder="selectedBackup"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section
|
||||
class="files-panel output-panel animate-fade-in-up"
|
||||
style="animation-delay: 300ms"
|
||||
aria-labelledby="backup-output-title"
|
||||
>
|
||||
<div class="files-panel-header">
|
||||
<div>
|
||||
<p class="section-kicker">Execution</p>
|
||||
<h2 id="backup-output-title" class="files-panel-title">Resultat du script</h2>
|
||||
</div>
|
||||
<span
|
||||
class="panel-badge"
|
||||
:class="{
|
||||
'panel-badge-idle': !scriptResult.label,
|
||||
'panel-badge-success': scriptResult.label && !scriptResult.isError,
|
||||
'panel-badge-error': scriptResult.isError
|
||||
}"
|
||||
>
|
||||
{{ scriptResult.label || "Pret" }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="!scriptResult.output"
|
||||
class="output-empty"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
<p class="output-empty-title">Aucune sortie disponible</p>
|
||||
<p class="output-empty-text">
|
||||
Lancez un script depuis le panneau de gauche pour afficher son retour ici.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre
|
||||
v-else
|
||||
class="output-console"
|
||||
:class="{ 'output-console-error': scriptResult.isError }"
|
||||
>{{ scriptResult.output }}</pre>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
@@ -57,7 +99,55 @@ import BackupRun from "~/components/BackupRun.vue"
|
||||
|
||||
definePageMeta({ layout: false })
|
||||
|
||||
type ScriptResult = {
|
||||
key: string | null
|
||||
label: string
|
||||
output: string
|
||||
isError: boolean
|
||||
downloadFolders: string[]
|
||||
}
|
||||
|
||||
const selectedBackup = ref<string | null>(null)
|
||||
const scriptResult = ref<ScriptResult>({
|
||||
key: null as string | null,
|
||||
label: "",
|
||||
output: "",
|
||||
isError: false,
|
||||
downloadFolders: []
|
||||
})
|
||||
|
||||
const fetchLatestBackup = async (folder: string) => {
|
||||
const files = await $fetch<string[]>(`/api/backups?folder=${encodeURIComponent(folder)}`)
|
||||
return files[0] || null
|
||||
}
|
||||
|
||||
const triggerDownload = (folder: string, file: string) => {
|
||||
const link = document.createElement("a")
|
||||
link.href = `/api/download?folder=${encodeURIComponent(folder)}&file=${encodeURIComponent(file)}`
|
||||
link.style.display = "none"
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
link.remove()
|
||||
}
|
||||
|
||||
const handleScriptResult = async (payload: ScriptResult) => {
|
||||
scriptResult.value = payload
|
||||
|
||||
if (payload.isError || payload.downloadFolders.length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
for (const folder of payload.downloadFolders) {
|
||||
try {
|
||||
const latestFile = await fetchLatestBackup(folder)
|
||||
if (latestFile) {
|
||||
triggerDownload(folder, latestFile)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Erreur telechargement automatique pour ${folder}:`, error)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -93,108 +183,6 @@ const selectedBackup = ref<string | null>(null)
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.selection-card {
|
||||
padding: 1.25rem;
|
||||
border-radius: 16px;
|
||||
background:
|
||||
linear-gradient(180deg, rgb(var(--m-secondary)), rgb(var(--m-tertiary)));
|
||||
}
|
||||
|
||||
.selection-label {
|
||||
margin: 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: rgb(var(--m-muted));
|
||||
}
|
||||
|
||||
.selection-value {
|
||||
margin: 0.65rem 0 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: rgb(var(--m-text));
|
||||
}
|
||||
|
||||
.selection-description {
|
||||
margin: 0.5rem 0 0;
|
||||
color: rgb(var(--m-muted));
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.intro-panel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
border-radius: 20px;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgb(var(--m-accent) / 0.12), transparent 28%),
|
||||
linear-gradient(180deg, rgb(var(--m-secondary)), rgb(var(--m-secondary) / 0.82));
|
||||
}
|
||||
|
||||
.intro-panel::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 1px solid rgb(var(--m-accent) / 0.08);
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.intro-title {
|
||||
margin: 0;
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(1.5rem, 2.2vw, 2rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
color: rgb(var(--m-text));
|
||||
}
|
||||
|
||||
.intro-description {
|
||||
max-width: 68ch;
|
||||
margin: 0.85rem 0 0;
|
||||
color: rgb(var(--m-muted));
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.workflow-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.workflow-step {
|
||||
padding: 1rem;
|
||||
border: 1px solid rgb(var(--m-accent) / 0.08);
|
||||
border-radius: 16px;
|
||||
background: rgb(var(--m-bg) / 0.24);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.workflow-index {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.75rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.16em;
|
||||
color: rgb(var(--m-accent));
|
||||
}
|
||||
|
||||
.workflow-title {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: rgb(var(--m-text));
|
||||
}
|
||||
|
||||
.workflow-text {
|
||||
margin: 0.45rem 0 0;
|
||||
color: rgb(var(--m-muted));
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 300px minmax(0, 1fr);
|
||||
@@ -217,6 +205,10 @@ const selectedBackup = ref<string | null>(null)
|
||||
border: 1px solid rgb(var(--m-accent) / 0.08);
|
||||
}
|
||||
|
||||
.output-panel {
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
.files-panel-header {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
@@ -243,10 +235,86 @@ const selectedBackup = ref<string | null>(null)
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.panel-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 999px;
|
||||
padding: 0.35rem 0.7rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.panel-badge-idle {
|
||||
color: rgb(var(--m-muted));
|
||||
background: rgb(var(--m-tertiary) / 0.45);
|
||||
border-color: rgb(var(--m-border) / 0.25);
|
||||
}
|
||||
|
||||
.panel-badge-success {
|
||||
color: rgb(var(--m-success));
|
||||
background: rgb(var(--m-success) / 0.08);
|
||||
border-color: rgb(var(--m-success) / 0.18);
|
||||
}
|
||||
|
||||
.panel-badge-error {
|
||||
color: rgb(var(--m-error));
|
||||
background: rgb(var(--m-error) / 0.08);
|
||||
border-color: rgb(var(--m-error) / 0.18);
|
||||
}
|
||||
|
||||
.output-empty {
|
||||
display: flex;
|
||||
min-height: 132px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-radius: 14px;
|
||||
border: 1px dashed rgb(var(--m-border) / 0.55);
|
||||
background: rgb(var(--m-tertiary) / 0.38);
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.output-empty-title {
|
||||
margin: 0;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: rgb(var(--m-text));
|
||||
}
|
||||
|
||||
.output-empty-text {
|
||||
margin: 0.5rem 0 0;
|
||||
max-width: 52ch;
|
||||
color: rgb(var(--m-muted));
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.output-console {
|
||||
margin: 0;
|
||||
min-height: 132px;
|
||||
overflow-x: auto;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgb(var(--m-border) / 0.3);
|
||||
background:
|
||||
linear-gradient(180deg, rgb(var(--m-bg) / 0.96), rgb(var(--m-secondary) / 0.92));
|
||||
padding: 1rem 1.1rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.7;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
color: rgb(var(--m-success));
|
||||
}
|
||||
|
||||
.output-console-error {
|
||||
color: rgb(var(--m-error));
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.dashboard-header,
|
||||
.dashboard-grid,
|
||||
.workflow-grid {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@@ -265,14 +333,8 @@ const selectedBackup = ref<string | null>(null)
|
||||
padding: 4.5rem 1.25rem 1.25rem;
|
||||
}
|
||||
|
||||
.intro-panel,
|
||||
.selection-card,
|
||||
.files-panel {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.workflow-grid {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user