working version

frontend/src/components/EnvironmentDebug.vue

@@ -0,0 +1,62 @@
+<template>
+  <div v-if="showDebug" class="fixed bottom-4 right-4 bg-black bg-opacity-75 text-white p-3 rounded-lg text-xs font-mono z-50 max-w-xs">
+    <div class="flex items-center space-x-2 mb-2">
+      <span class="w-2 h-2 rounded-full" :class="environmentColor"></span>
+      <span class="font-bold">{{ environment.toUpperCase() }}</span>
+    </div>
+    <div class="space-y-1 text-gray-300">
+      <div>API: {{ apiUrl }}</div>
+      <div>App: {{ appUrl }}</div>
+      <div>Build: {{ buildTime }}</div>
+      <div>Router: {{ routerStatus }}</div>
+      <div class="text-yellow-400">VITE_API_URL: {{ viteApiUrl }}</div>
+      <div class="text-yellow-400">NODE_ENV: {{ nodeEnv }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, onMounted } from 'vue'
+
+const routerStatus = ref('Initializing...')
+
+// Utiliser directement les variables d'environnement Vite
+const environment = computed(() => import.meta.env.VITE_ENVIRONMENT || 'local')
+const apiUrl = computed(() => import.meta.env.VITE_API_URL || 'Non défini')
+const appUrl = computed(() => import.meta.env.VITE_APP_URL || 'Non défini')
+const viteApiUrl = computed(() => import.meta.env.VITE_API_URL || 'Non défini')
+const nodeEnv = computed(() => import.meta.env.NODE_ENV || 'Non défini')
+const buildTime = computed(() => new Date().toLocaleTimeString())
+
+const environmentColor = computed(() => {
+  switch (environment.value) {
+    case 'local': return 'bg-green-500'
+    case 'development': return 'bg-yellow-500'
+    case 'production': return 'bg-red-500'
+    default: return 'bg-gray-500'
+  }
+})
+
+const showDebug = computed(() => {
+  // Toujours afficher en développement, conditionnellement en production
+  return environment.value !== 'production' || import.meta.env.DEV
+})
+
+onMounted(() => {
+  // Attendre un peu que le router soit initialisé
+  setTimeout(() => {
+    routerStatus.value = 'Ready'
+  }, 300)
+  
+  // Debug des variables d'environnement
+  console.log('🔍 EnvironmentDebug - Variables d\'environnement:')
+  console.log('  VITE_ENVIRONMENT:', import.meta.env.VITE_ENVIRONMENT)
+  console.log('  VITE_API_URL:', import.meta.env.VITE_API_URL)
+  console.log('  VITE_APP_URL:', import.meta.env.VITE_APP_URL)
+  console.log('  NODE_ENV:', import.meta.env.NODE_ENV)
+})
+</script>
+
+<style scoped>
+/* Styles spécifiques au composant */
+</style>