feat: 完善环境标识配置

src/App.vue

@@ -1,5 +1,8 @@
 <template>
   <el-config-provider :locale="currentLocale">
+    <div class="environment-badge" :aria-label="`当前环境：${appEnvLabel}`">
+      {{ appEnvLabel }}
+    </div>
     <router-view />
     <ReDialog />
   </el-config-provider>
@@ -17,6 +20,27 @@ export default defineComponent({
     [ElConfigProvider.name]: ElConfigProvider,
     ReDialog
   },
+  data() {
+    const appEnv =
+      import.meta.env.VITE_APP_ENV ||
+      (import.meta.env.MODE === "development"
+        ? "local"
+        : import.meta.env.MODE === "production"
+          ? "production"
+          : "develop");
+    const defaultLabelMap = {
+      local: "本地环境",
+      develop: "测试环境",
+      production: "生产环境"
+    } as const;
+
+    return {
+      appEnvLabel:
+        import.meta.env.VITE_APP_ENV_LABEL ||
+        defaultLabelMap[appEnv as keyof typeof defaultLabelMap] ||
+        "本地环境"
+    };
+  },
   computed: {
     currentLocale() {
       return zhCn;
@@ -24,3 +48,28 @@ export default defineComponent({
   }
 });
 </script>
+
+<style scoped>
+.environment-badge {
+  position: fixed;
+  top: 72px;
+  right: 16px;
+  z-index: 1000;
+  padding: 8px 10px;
+  font-size: 12px;
+  font-weight: 750;
+  line-height: 1;
+  color: #fff;
+  letter-spacing: 0;
+  background: rgb(20 20 24 / 86%);
+  border-radius: 999px;
+  box-shadow: 0 10px 24px rgb(0 0 0 / 16%);
+}
+
+@media (width <= 768px) {
+  .environment-badge {
+    top: 16px;
+    right: 16px;
+  }
+}
+</style>

src/layout/components/lay-navbar/index.vue

@@ -9,8 +9,6 @@ import LaySidebarTopCollapse from "../lay-sidebar/components/SidebarTopCollapse.
 import LogoutCircleRLine from "~icons/ri/logout-circle-r-line";
 import Setting from "~icons/ri/settings-3-line";
 
-const appEnvLabel = import.meta.env.VITE_APP_ENV_LABEL || "生产环境";
-
 const {
   layout,
   device,
@@ -41,9 +39,6 @@ const {
     <LayNavMix v-if="layout === 'mix'" />
 
     <div v-if="layout === 'vertical'" class="vertical-header-right">
-      <span class="environment-badge" :title="`当前环境：${appEnvLabel}`">
-        {{ appEnvLabel }}
-      </span>
       <!-- 菜单搜索 -->
       <LaySearch id="header-search" />
       <!-- 全屏 -->
@@ -98,20 +93,6 @@ const {
     height: 48px;
     color: #000000d9;
 
-    .environment-badge {
-      padding: 5px 9px;
-      margin-right: 8px;
-      font-size: 12px;
-      font-weight: 700;
-      line-height: 1;
-      color: #ffffff;
-      letter-spacing: 0;
-      white-space: nowrap;
-      background: rgb(24 24 27 / 86%);
-      border-radius: 999px;
-      box-shadow: 0 8px 20px rgb(0 0 0 / 14%);
-    }
-
     .el-dropdown-link {
       display: flex;
       align-items: center;