<template>
  <div class="env-badge" :class="envClass" v-if="showBadge">
    <span>{{ envText }}</span>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { env } from '@/config/env'

const showBadge = computed(() => !env.isProduction)
const envClass = computed(() => ({
  'env-development': env.isDevelopment,
  'env-staging': env.isStaging
}))
const envText = computed(() => {
  if (env.isDevelopment) return '开发环境'
  if (env.isStaging) return '预发布'
  return ''
})
</script>

<style scoped>
.env-badge {
  position: fixed;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  z-index: 9999;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.env-development {
  background-color: #f56c6c;
}

.env-staging {
  background-color: #e6a23c;
}

.env-badge:hover {
  opacity: 0.8;
  cursor: pointer;
}
</style>
