Kerboul
cfa2eadec9
Some checks failed
Deploy XIP / deploy (push) Failing after 37s
Fonctionnel
- Backend messages : GET /api/messages/:id (detail) + recherche (q),
pagination par curseur (before/limit) avec enveloppe { items, nextCursor,
hasMore } ; le flux temps reel garde l'ancien format quand aucun parametre.
- Explorer (/explorer) : catalogue distant, recherche debouncee + annulable
(AbortController), filtre, defilement infini, etat garde (keep-alive).
- Details par id : /message/:id et /shop/p/:id (consomment route.params).
- Favoris (/favoris) : liste perso persistee en localStorage, notation
(note/rating/statut) via modale, refletee partout (bouton favori).
- Mes stats (/mes-stats) : agregats derives des favoris (note moyenne, top
pays/auteurs, statuts), auto-mis a jour, route gardee si liste vide.
- Routeur : pages secondaires en lazy-load + repli, garde beforeEnter.
Technique
- Slots : PrefSection (slot defaut + slot nomme) enveloppe les 5 sections
"Mes Persos" ; Modal (Teleport + slots).
- v-model custom : SearchBox (defineModel + debounce).
- Directive custom : v-click-outside.
- Tests Vitest : 25 tests (etat, fonctions, composants), ~86% du code metier.
- Retrait d'Ionic (inutilise). Script typecheck backend ; tsconfig @types/bun.
- Correctif type : garde stockLimit nullable dans l'achat (catalog.ts).
- README complet (URL, stack, run, tests, secrets, deploiement, mention IA).
56 lines
2.1 KiB
Vue
56 lines
2.1 KiB
Vue
<!-- Mes Persos › Fond du chat (image de fond personnalisée, viewer-side) -->
|
||
<template>
|
||
<PrefSection title="🖼️ Fond du chat">
|
||
<p class="pf-sub">URL d'une image (jpg, png, gif, webp…) ou laisse vide pour le fond par défaut.</p>
|
||
<div class="bg-row">
|
||
<input
|
||
v-model="bgDraft"
|
||
class="bg-input"
|
||
type="text"
|
||
placeholder="https://example.com/image.jpg"
|
||
@keydown.enter="applyBg"
|
||
/>
|
||
<button class="btn-apply" @click="applyBg" type="button">Appliquer</button>
|
||
<button v-if="prefs.chatBgUrl" class="btn-reset" @click="resetBg" type="button">✕ Retirer</button>
|
||
</div>
|
||
<div v-if="prefs.chatBgUrl" class="bg-preview" :style="{ backgroundImage: `url(${prefs.chatBgUrl})` }" />
|
||
</PrefSection>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, watch } from 'vue';
|
||
import { useCustomStyles } from '@/composables/useCustomStyles';
|
||
import PrefSection from '@/components/shop/PrefSection.vue';
|
||
|
||
const { prefs } = useCustomStyles();
|
||
|
||
const bgDraft = ref(prefs.chatBgUrl);
|
||
watch(() => prefs.chatBgUrl, (v) => { bgDraft.value = v; });
|
||
|
||
function applyBg(): void { prefs.chatBgUrl = bgDraft.value.trim(); }
|
||
function resetBg(): void { prefs.chatBgUrl = ''; bgDraft.value = ''; }
|
||
</script>
|
||
|
||
<style scoped>
|
||
.bg-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
|
||
.bg-input {
|
||
flex: 1; background: #141420; border: 1px solid #222234; border-radius: 6px;
|
||
color: #aaaacc; font-family: Arial, sans-serif; font-size: 12px; padding: 8px 12px; outline: none;
|
||
}
|
||
.bg-input:focus { border-color: #333355; }
|
||
.btn-apply {
|
||
background: #1a2a1a; border: 1px solid #33aa55; color: #44dd77;
|
||
font-size: 12px; font-weight: bold; padding: 7px 14px; border-radius: 14px; cursor: pointer;
|
||
}
|
||
.btn-apply:hover { background: #234a23; }
|
||
.btn-reset {
|
||
background: #2a1010; border: 1px solid #882222; color: #ff6655;
|
||
font-size: 11px; padding: 7px 12px; border-radius: 14px; cursor: pointer;
|
||
}
|
||
.btn-reset:hover { background: #3a1818; }
|
||
.bg-preview {
|
||
width: 100%; height: 80px; background-size: cover; background-position: center;
|
||
border-radius: 6px; border: 1px solid #222234;
|
||
}
|
||
</style>
|