kerboul
9dd72b9b2d
All checks were successful
Deploy XIP / deploy (push) Successful in 35s
- MesPersos.vue (347L) éclaté en 5 sous-composants autonomes sous shop/persos/ (BgPrefsSection, SendButtonPrefsSection, SendSkinPrefsSection, IpColorPrefsSection, PetsPrefsSection). MesPersos n'est plus qu'un wrapper. - CSS partagé des sections déplacé en classes globales .pf-* dans style.css (plus de duplication entre les sections). - ProductCard : metaJson typé via parseMeta<ProductMeta>(), suppression des casts `any` (find/designs) — comportement identique. - vue-tsc --noEmit : 0 erreur. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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>
|
||
<section class="pf-section">
|
||
<h2 class="pf-title">🖼️ Fond du chat</h2>
|
||
<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})` }" />
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, watch } from 'vue';
|
||
import { useCustomStyles } from '@/composables/useCustomStyles';
|
||
|
||
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>
|