62808b974d
Backend: genesis_json sur Document, section_tag/inertia_preset/is_permanent_vote sur DocumentItem Frontend: 5 nouveaux composants pour vue detail document enrichie - GenesisBlock: sources, outils, synthese forum, contributeurs (depliable) - InertiaSlider: visualisation inertie 4 niveaux avec params formule G/M - MiniVoteBoard: tableau vote compact (barre seuil, pour/contre, participation) - EngagementCard: carte item enrichie integrant vote + inertie + actions - DocumentTuto: modal pedagogique vote permanent/inertie/seuils Seed et page [slug] enrichis pour exploiter les nouveaux champs Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
128 lines
3.8 KiB
Vue
128 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* DocumentTuto — Quick tutorial overlay explaining how the document works.
|
|
* Shows how permanent voting, inertia, counter-proposals, and thresholds work.
|
|
*/
|
|
const open = ref(false)
|
|
|
|
const steps = [
|
|
{
|
|
icon: 'i-lucide-infinity',
|
|
title: 'Vote permanent',
|
|
text: 'Chaque engagement est sous vote permanent. A tout moment, vous pouvez proposer une alternative ou voter pour/contre le texte en vigueur.',
|
|
},
|
|
{
|
|
icon: 'i-lucide-sliders-horizontal',
|
|
title: 'Inertie variable',
|
|
text: 'Les engagements fondamentaux ont une inertie standard (difficulte de remplacement moderee). Les annexes sont plus faciles a modifier. La formule et ses reglages sont tres proteges.',
|
|
},
|
|
{
|
|
icon: 'i-lucide-scale',
|
|
title: 'Seuil adaptatif',
|
|
text: 'La formule WoT adapte le seuil a la participation : peu de votants = quasi-unanimite requise ; beaucoup de votants = majorite simple suffit.',
|
|
},
|
|
{
|
|
icon: 'i-lucide-pen-line',
|
|
title: 'Contre-propositions',
|
|
text: 'Cliquez sur "Proposer une alternative" pour soumettre un texte de remplacement. Il sera soumis au vote et devra atteindre le seuil d\'adoption pour remplacer le texte en vigueur.',
|
|
},
|
|
{
|
|
icon: 'i-lucide-git-branch',
|
|
title: 'Depot automatique',
|
|
text: 'Quand une alternative est adoptee, le document officiel est mis a jour, ancre sur IPFS et on-chain, puis deploye dans les applications (Cesium, Gecko).',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<UButton
|
|
label="Comment ca marche ?"
|
|
icon="i-lucide-circle-help"
|
|
variant="ghost"
|
|
color="neutral"
|
|
size="sm"
|
|
@click="open = true"
|
|
/>
|
|
|
|
<UModal v-model:open="open" :ui="{ content: 'max-w-lg' }">
|
|
<template #content>
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-between mb-5">
|
|
<h2 class="text-lg font-bold" style="color: var(--mood-text)">
|
|
Comment ca marche ?
|
|
</h2>
|
|
<UButton
|
|
icon="i-lucide-x"
|
|
variant="ghost"
|
|
color="neutral"
|
|
size="xs"
|
|
@click="open = false"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-4">
|
|
<div
|
|
v-for="(step, idx) in steps"
|
|
:key="idx"
|
|
class="tuto-step"
|
|
>
|
|
<div class="tuto-step__icon">
|
|
<UIcon :name="step.icon" class="text-base" />
|
|
</div>
|
|
<div class="tuto-step__content">
|
|
<h4 class="text-sm font-bold" style="color: var(--mood-text)">
|
|
{{ step.title }}
|
|
</h4>
|
|
<p class="text-xs leading-relaxed" style="color: var(--mood-text-muted)">
|
|
{{ step.text }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5 pt-4 border-t" style="border-color: color-mix(in srgb, var(--mood-text) 8%, transparent)">
|
|
<p class="text-xs text-center" style="color: var(--mood-text-muted)">
|
|
Reference : formule g1vote —
|
|
<a
|
|
href="https://g1vote-view-237903.pages.duniter.org/"
|
|
target="_blank"
|
|
rel="noopener"
|
|
style="color: var(--mood-accent)"
|
|
>
|
|
g1vote-view
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UModal>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.tuto-step {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.tuto-step__icon {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
background: color-mix(in srgb, var(--mood-accent) 10%, transparent);
|
|
color: var(--mood-accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tuto-step__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125rem;
|
|
}
|
|
</style>
|