feat(codev): M5 phase 1 - mode demo factice + build local OK
This commit is contained in:
Jules Neny
367
pages/codev/demo.vue
Normal file
367
pages/codev/demo.vue
Normal file
@@ -0,0 +1,367 @@
|
||||
<template>
|
||||
<div class="codev-demo">
|
||||
|
||||
<header class="demo-header">
|
||||
<span class="demo-badge">DEMO</span>
|
||||
<h1>Co-developpement - exemple</h1>
|
||||
<p class="subtitle">10 personnes fictives. Clique sur un mode pour voir les matchs.</p>
|
||||
</header>
|
||||
|
||||
<ClientOnly>
|
||||
<CodevGraph
|
||||
:fiches="fiches"
|
||||
:matches="matches"
|
||||
:mode="mode"
|
||||
/>
|
||||
<template #fallback>
|
||||
<div class="graph-fallback">Chargement du graphe...</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
|
||||
<!-- Bandeau info mode actif -->
|
||||
<div v-if="mode !== 'none'" class="mode-banner">
|
||||
<span>
|
||||
Mode {{ MODE_LABELS[mode] }} actif -
|
||||
{{ matches.length }} connexion{{ matches.length !== 1 ? 's' : '' }} trouvee{{ matches.length !== 1 ? 's' : '' }}.
|
||||
</span>
|
||||
<button class="banner-clear" @click="setMode('none')" type="button">Effacer</button>
|
||||
</div>
|
||||
|
||||
<!-- 3 boutons matching identiques a carto.vue -->
|
||||
<div class="matching-controls">
|
||||
<button
|
||||
:class="{ active: mode === 'solution' }"
|
||||
style="--mode-color: #22c55e"
|
||||
@click="setMode('solution')"
|
||||
type="button"
|
||||
>
|
||||
Solution
|
||||
<span class="hint">besoin - offre</span>
|
||||
</button>
|
||||
<button
|
||||
:class="{ active: mode === 'alliance' }"
|
||||
style="--mode-color: #f97316"
|
||||
@click="setMode('alliance')"
|
||||
type="button"
|
||||
>
|
||||
Alliance
|
||||
<span class="hint">besoins partages</span>
|
||||
</button>
|
||||
<button
|
||||
:class="{ active: mode === 'surprise' }"
|
||||
style="--mode-color: #3b82f6"
|
||||
@click="setMode('surprise')"
|
||||
type="button"
|
||||
>
|
||||
Surprise
|
||||
<span class="hint">offres partagees</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="mode !== 'none'"
|
||||
class="reset"
|
||||
@click="setMode('none')"
|
||||
type="button"
|
||||
>
|
||||
Effacer
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { CodevFiche, CodevMatch } from '~/types/codev'
|
||||
import { computeMatches } from '~/utils/codev/matching'
|
||||
|
||||
// 10 fiches factices - hashtags alignes pour demontrer les 3 modes :
|
||||
//
|
||||
// Solution : Lea(besoin coaching) -> Maya(offre coaching)
|
||||
// Sami(besoin formation+vente) -> Ines(offre vente+formation)
|
||||
// Tom(besoin tiers-lieu) -> Zoe(offre facilitation+tiers-lieu)
|
||||
//
|
||||
// Alliance : Lea + Maya (hashtag coaching commun dans besoins)
|
||||
// Sami + Kenji (hashtag formation+vente dans besoins)
|
||||
// Tom + Zoe (hashtag tiers-lieu dans besoins)
|
||||
//
|
||||
// Surprise : Lea + Zoe (hashtag facilitation dans offres)
|
||||
// Tom + Roman (hashtag archi dans offres)
|
||||
|
||||
const FICHES_DEMO: CodevFiche[] = [
|
||||
{
|
||||
id: 1,
|
||||
nom: 'Lea',
|
||||
besoin: 'Structurer mon offre de coaching pour la lancer en septembre',
|
||||
offre: 'Animation de groupes, facilitation de cercles de parole',
|
||||
hashtags: ['coaching', 'facilitation'],
|
||||
created_at: '2026-05-08T10:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
nom: 'Sami',
|
||||
besoin: 'Comprendre comment vendre une formation en ligne',
|
||||
offre: 'Developpement web, sites Astro et Nuxt',
|
||||
hashtags: ['formation', 'vente'],
|
||||
created_at: '2026-05-08T10:01:00Z',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
nom: 'Ines',
|
||||
besoin: 'Aide pour la facilitation de mes ateliers ecriture',
|
||||
offre: 'Vente de formations en ligne, marketing direct',
|
||||
hashtags: ['vente', 'formation'],
|
||||
created_at: '2026-05-08T10:02:00Z',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
nom: 'Tom',
|
||||
besoin: 'Trouver un associe pour un projet de tiers-lieu',
|
||||
offre: 'Architecture eco-responsable, conception bioclimatique',
|
||||
hashtags: ['tiers-lieu', 'archi'],
|
||||
created_at: '2026-05-08T10:03:00Z',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
nom: 'Maya',
|
||||
besoin: 'Structurer mon offre de coaching freelance',
|
||||
offre: 'Coaching de carriere, accompagnement transition pro',
|
||||
hashtags: ['coaching', 'carriere'],
|
||||
created_at: '2026-05-08T10:04:00Z',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
nom: 'Kenji',
|
||||
besoin: 'Apprendre a vendre mes formations sans me sentir vendeur',
|
||||
offre: 'Photographie, direction artistique de projets editoriaux',
|
||||
hashtags: ['formation', 'vente'],
|
||||
created_at: '2026-05-08T10:05:00Z',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
nom: 'Zoe',
|
||||
besoin: 'Trouver des associes pour mon projet de tiers-lieu rural',
|
||||
offre: 'Animation et facilitation de collectifs, intelligence collective',
|
||||
hashtags: ['tiers-lieu', 'facilitation'],
|
||||
created_at: '2026-05-08T10:06:00Z',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
nom: 'Nael',
|
||||
besoin: 'Construire un site web pour ma formation',
|
||||
offre: 'Strategie marketing, lancement de produits digitaux',
|
||||
hashtags: ['web', 'strategie'],
|
||||
created_at: '2026-05-08T10:07:00Z',
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
nom: 'Eva',
|
||||
besoin: 'Lancer mon offre de coaching avec une page de vente',
|
||||
offre: 'Ecriture longue forme, articles essais et tribunes',
|
||||
hashtags: ['coaching', 'ecriture'],
|
||||
created_at: '2026-05-08T10:08:00Z',
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
nom: 'Roman',
|
||||
besoin: 'Ameliorer mes articles de blog sur la renovation',
|
||||
offre: 'Architecture, plans techniques pour renovation energetique',
|
||||
hashtags: ['archi', 'reno'],
|
||||
created_at: '2026-05-08T10:09:00Z',
|
||||
},
|
||||
]
|
||||
|
||||
const fiches = ref(FICHES_DEMO)
|
||||
const matches = ref<CodevMatch[]>([])
|
||||
const mode = ref<'none' | 'solution' | 'alliance' | 'surprise'>('none')
|
||||
|
||||
const MODE_LABELS: Record<string, string> = {
|
||||
solution: 'Solution',
|
||||
alliance: 'Alliance',
|
||||
surprise: 'Surprise',
|
||||
}
|
||||
|
||||
useHead({ title: 'Demo - Co-developpement' })
|
||||
|
||||
function setMode(newMode: typeof mode.value) {
|
||||
mode.value = newMode
|
||||
if (newMode === 'none') {
|
||||
matches.value = []
|
||||
} else {
|
||||
matches.value = computeMatches(fiches.value, newMode)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.codev-demo {
|
||||
min-height: 100vh;
|
||||
background: var(--nav-bg, #fafafa);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.25rem 1rem 2rem;
|
||||
gap: 1rem;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ── En-tete ── */
|
||||
|
||||
.demo-header {
|
||||
text-align: center;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.demo-badge {
|
||||
display: inline-block;
|
||||
background: #f97316;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.demo-header h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--nav-text, #1a1a2e);
|
||||
margin: 0 0 0.375rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 0.9rem;
|
||||
color: var(--nav-text-muted, #6b7280);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── Fallback ── */
|
||||
|
||||
.graph-fallback {
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
min-height: 320px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--nav-text-muted, #6b7280);
|
||||
font-size: 0.9rem;
|
||||
background: var(--nav-bg-alt, #f3f4f6);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* ── Bandeau mode actif ── */
|
||||
|
||||
.mode-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 0.875rem;
|
||||
background: #f0fdf4;
|
||||
border: 1px solid #bbf7d0;
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
color: #166534;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.banner-clear {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: #166534;
|
||||
background: transparent;
|
||||
border: 1px solid #166534;
|
||||
border-radius: 6px;
|
||||
padding: 0.2rem 0.6rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.banner-clear:hover {
|
||||
background: #166534;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ── Boutons matching ── */
|
||||
|
||||
.matching-controls {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(8px);
|
||||
border-top: 1px solid #e5e7eb;
|
||||
margin: 0 -1rem -2rem;
|
||||
}
|
||||
|
||||
.matching-controls button {
|
||||
flex: 1;
|
||||
padding: 12px 8px;
|
||||
border: 1px solid #d0d4dc;
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.matching-controls button .hint {
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.matching-controls button.active {
|
||||
background: var(--mode-color, #1B4436);
|
||||
color: white;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.matching-controls button.active .hint {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.matching-controls button.reset {
|
||||
flex: 0 0 auto;
|
||||
padding: 12px 16px;
|
||||
background: #f3f4f6;
|
||||
border-color: #d0d4dc;
|
||||
color: #374151;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.matching-controls button.reset:hover {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.matching-controls {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
margin: 0 -0.75rem -1.5rem;
|
||||
}
|
||||
|
||||
.matching-controls button.reset {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Mobile ── */
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.codev-demo {
|
||||
padding: 1rem 0.75rem 1.5rem;
|
||||
}
|
||||
|
||||
.demo-header h1 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user