407 lines
11 KiB
Vue
407 lines
11 KiB
Vue
<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>
|
|
|
|
<div class="codev-tabs">
|
|
<button :class="{ active: tab === 'carto' }" @click="tab = 'carto'" type="button">Carto</button>
|
|
<button :class="{ active: tab === 'annuaire' }" @click="tab = 'annuaire'" type="button">Annuaire</button>
|
|
</div>
|
|
|
|
<div v-if="tab === 'carto'">
|
|
<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>
|
|
|
|
<!-- Boutons matching -->
|
|
<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
|
|
v-if="mode !== 'none'"
|
|
class="reset"
|
|
@click="setMode('none')"
|
|
type="button"
|
|
>
|
|
Effacer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="tab === 'annuaire'" class="annuaire-wrap">
|
|
<div class="annuaire-scroll">
|
|
<table class="annuaire-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="col-nom">Prénom</th>
|
|
<th class="col-besoin">Besoin</th>
|
|
<th class="col-offre">Ce que j'offre</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="f in fiches" :key="f.id" class="annuaire-row">
|
|
<td class="col-nom">{{ f.nom }}</td>
|
|
<td class="col-besoin">{{ f.besoin }}</td>
|
|
<td class="col-offre">{{ f.offre }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { CodevFiche, CodevMatch } from '~/types/codev'
|
|
import { computeMatches } from '~/utils/codev/matching'
|
|
|
|
const tab = ref<'carto' | 'annuaire'>('carto')
|
|
|
|
// 10 fiches sans hashtags — textes enrichis pour que scoreDirect discrimine bien les 3 modes :
|
|
//
|
|
// Solution (scoreDirect besoinA vs offreB) :
|
|
// Sami(besoin vendre formation) -> Ines(offre vente formations) ✓
|
|
// Nael(besoin site web formation) -> Sami(offre developpement web) ✓
|
|
// Eva(besoin coaching vente) -> Ines(offre vente formations) ✓
|
|
// Tom(besoin tiers-lieu) -> Zoe(offre facilitation tiers-lieux) ✓
|
|
//
|
|
// Alliance (besoins similaires) :
|
|
// Lea + Maya (coaching, lancer, offre) ✓
|
|
// Tom + Zoe (tiers-lieu, co-creer) ✓
|
|
// Sami + Kenji (vendre, formations) ✓
|
|
//
|
|
// Surprise (offres similaires) :
|
|
// Lea + Zoe (facilitation, groupes) ✓
|
|
// Tom + Roman (architecture) ✓
|
|
// Ines + Nael (marketing, formations) ✓
|
|
|
|
const FICHES_DEMO: CodevFiche[] = [
|
|
{
|
|
id: 1, nom: 'Lea',
|
|
besoin: 'Structurer et lancer mon offre de coaching professionnel cet automne',
|
|
offre: 'Facilitation de groupes et animation de cercles de parole',
|
|
hashtags: [],
|
|
created_at: '2026-05-08T10:00:00Z',
|
|
},
|
|
{
|
|
id: 2, nom: 'Sami',
|
|
besoin: 'Vendre ma formation en ligne et attirer mes premiers clients',
|
|
offre: 'Developpement web sur mesure, creation de sites et applications',
|
|
hashtags: [],
|
|
created_at: '2026-05-08T10:01:00Z',
|
|
},
|
|
{
|
|
id: 3, nom: 'Ines',
|
|
besoin: 'Ameliorer la facilitation de mes ateliers collaboratifs',
|
|
offre: 'Vente de formations en ligne et marketing pour formateurs',
|
|
hashtags: [],
|
|
created_at: '2026-05-08T10:02:00Z',
|
|
},
|
|
{
|
|
id: 4, nom: 'Tom',
|
|
besoin: 'Trouver des associes pour co-creer un tiers-lieu rural',
|
|
offre: 'Architecture bioclimatique et eco-construction pour tiers-lieux',
|
|
hashtags: [],
|
|
created_at: '2026-05-08T10:03:00Z',
|
|
},
|
|
{
|
|
id: 5, nom: 'Maya',
|
|
besoin: 'Creer et lancer mon offre de coaching en transition professionnelle',
|
|
offre: 'Accompagnement coaching de carriere et transitions professionnelles',
|
|
hashtags: [],
|
|
created_at: '2026-05-08T10:04:00Z',
|
|
},
|
|
{
|
|
id: 6, nom: 'Kenji',
|
|
besoin: 'Apprendre a vendre mes formations sans pression commerciale',
|
|
offre: 'Photographie professionnelle et direction artistique editoriale',
|
|
hashtags: [],
|
|
created_at: '2026-05-08T10:05:00Z',
|
|
},
|
|
{
|
|
id: 7, nom: 'Zoe',
|
|
besoin: 'Co-creer un tiers-lieu avec des porteurs de projet alignes',
|
|
offre: 'Facilitation de collectifs et animation en intelligence collective',
|
|
hashtags: [],
|
|
created_at: '2026-05-08T10:06:00Z',
|
|
},
|
|
{
|
|
id: 8, nom: 'Nael',
|
|
besoin: 'Creer un site web pour presenter et vendre ma formation',
|
|
offre: 'Strategie marketing digital et lancement de produits en ligne',
|
|
hashtags: [],
|
|
created_at: '2026-05-08T10:07:00Z',
|
|
},
|
|
{
|
|
id: 9, nom: 'Eva',
|
|
besoin: 'Lancer mon coaching avec une page de vente qui convertit',
|
|
offre: 'Ecriture longue forme, articles de fond et tribunes editoriales',
|
|
hashtags: [],
|
|
created_at: '2026-05-08T10:08:00Z',
|
|
},
|
|
{
|
|
id: 10, nom: 'Roman',
|
|
besoin: 'Ecrire de meilleurs articles pour mon blog et ma newsletter',
|
|
offre: 'Architecture technique et plans pour renovation energetique',
|
|
hashtags: [],
|
|
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, 0.12)
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
|
|
/* ── Tabs ── */
|
|
|
|
.codev-tabs { display: flex; gap: 4px; background: #f3f4f6; border-radius: 10px; padding: 4px; }
|
|
.codev-tabs button { flex: 1; padding: 8px 4px; border: none; border-radius: 7px; background: transparent; font-size: 0.875rem; font-weight: 500; cursor: pointer; color: #6b7280; transition: all 0.15s; }
|
|
.codev-tabs button.active { background: white; color: #1a1a2e; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
|
|
|
|
/* ── Annuaire ── */
|
|
|
|
.annuaire-wrap { display: flex; flex-direction: column; gap: 8px; flex: 1; }
|
|
.annuaire-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e5e7eb; border-radius: 10px; }
|
|
.annuaire-table { width: 100%; border-collapse: collapse; min-width: 480px; }
|
|
.annuaire-table thead tr { background: #f9fafb; border-bottom: 2px solid #e5e7eb; }
|
|
.annuaire-table th { padding: 10px 14px; text-align: left; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; white-space: nowrap; }
|
|
.annuaire-table td { padding: 12px 14px; font-size: 0.875rem; color: #374151; vertical-align: top; border-bottom: 1px solid #f3f4f6; line-height: 1.5; }
|
|
.annuaire-row { transition: background 0.12s; }
|
|
.annuaire-row:hover { background: #f9fafb; }
|
|
.annuaire-row:last-child td { border-bottom: none; }
|
|
.col-nom { position: sticky; left: 0; z-index: 2; background: #ffffff; font-weight: 600; color: #1a1a2e !important; white-space: nowrap; min-width: 80px; border-right: 2px solid #e5e7eb; box-shadow: 2px 0 6px rgba(0,0,0,0.06); }
|
|
.annuaire-row:hover .col-nom { background: #f9fafb; }
|
|
thead tr .col-nom { background: #f9fafb; z-index: 3; }
|
|
.col-besoin { min-width: 200px; max-width: 260px; }
|
|
.col-offre { min-width: 200px; max-width: 260px; }
|
|
|
|
/* ── 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>
|