feat(v11-c): carte-o rendering refonte niveau/nature/statut + contextmenu positionne

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-11 15:13:46 +02:00
parent 1e1c56db2f
commit d8d3af28a0
4 changed files with 192 additions and 244 deletions
--- a/src/components/vue/CarteOContextMenu.vue
+++ b/src/components/vue/CarteOContextMenu.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted } from 'vue'
+
+interface CarteNode {
+  id: string
+  label: string
+  family?: string
+  nature?: 'essai' | 'projet'
+  statut?: 'gestation' | 'edite'
+  resume?: string | null
+  intention?: string
+}
+
+const props = defineProps<{
+  node: CarteNode | null
+  x: number
+  y: number
+}>()
+
+const emit = defineEmits<{ close: [] }>()
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape' && props.node) emit('close')
+}
+function onClickOutside(e: MouseEvent) {
+  const el = document.getElementById('carte-o-context-menu')
+  if (el && !el.contains(e.target as Node)) emit('close')
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', onKeydown)
+  setTimeout(() => window.addEventListener('click', onClickOutside), 50)
+})
+onUnmounted(() => {
+  window.removeEventListener('keydown', onKeydown)
+  window.removeEventListener('click', onClickOutside)
+})
+
+const naturLabel = computed(() => props.node?.nature === 'projet' ? 'Projet archi' : 'Essai politique')
+const naturColor = computed(() => props.node?.nature === 'projet' ? '#b45309' : '#1d4ed8')
+const texte = computed(() => props.node?.resume || props.node?.intention || 'En cours d\'ecriture.')
+</script>
+
+<template>
+  <div
+    v-if="node"
+    id="carte-o-context-menu"
+    class="context-menu"
+    :style="{ left: x + 'px', top: y + 'px' }"
+    role="dialog"
+    :aria-label="node.label"
+  >
+    <button class="close-btn" type="button" @click="emit('close')" aria-label="Fermer">x</button>
+    <span class="nature-badge" :style="{ backgroundColor: naturColor }">{{ naturLabel }}</span>
+    <h3 class="title" :style="{ fontWeight: node.statut === 'edite' ? 'bold' : 'normal' }">
+      {{ node.label }}
+    </h3>
+    <p class="resume">{{ texte }}</p>
+    <p v-if="node.statut === 'edite'" class="edite-badge">publie</p>
+  </div>
+</template>
+
+<style scoped>
+.context-menu {
+  position: absolute;
+  z-index: 1000;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 12px 14px;
+  width: 220px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+  font-size: 13px;
+}
+.close-btn {
+  position: absolute;
+  top: 6px;
+  right: 8px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #9ca3af;
+  font-size: 14px;
+  line-height: 1;
+  padding: 2px 4px;
+}
+.close-btn:hover { color: #374151; }
+.nature-badge {
+  display: inline-block;
+  padding: 2px 7px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  color: #fff;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  margin-bottom: 6px;
+  font-family: 'Courier New', Courier, monospace;
+}
+.title {
+  font-size: 14px;
+  color: #1f2937;
+  margin: 4px 0 6px 0;
+  line-height: 1.3;
+}
+.resume {
+  font-size: 12px;
+  color: #4b5563;
+  line-height: 1.5;
+  margin: 0;
+}
+.edite-badge {
+  margin-top: 8px;
+  font-size: 10px;
+  color: #059669;
+  font-family: 'Courier New', Courier, monospace;
+  font-weight: 600;
+}
+</style>