# 公共组件

## EnvironmentBadge - 环境标识徽章

用于在非生产环境下显示当前环境标识的组件。

### 功能特性

- 自动检测当前环境类型
- 仅在非生产环境显示
- 支持开发环境和预发布环境的不同样式
- 固定定位在页面右上角

### 使用方法

```vue
<template>
  <div>
    <EnvironmentBadge />
    <!-- 其他内容 -->
  </div>
</template>

<script setup>
import EnvironmentBadge from '@/components/common/EnvironmentBadge.vue'
</script>
```

### 环境配置

组件会根据 `VITE_APP_ENV` 环境变量显示不同的标识：

- `development`: 显示红色"开发环境"徽章
- `staging`: 显示黄色"预发布"徽章  
- `production`: 不显示徽章

### 样式说明

- 使用固定定位，不会影响页面布局
- 具有较高的 z-index 确保始终在最上层
- 鼠标悬停时有透明度变化效果
