chore: split dev and production deployment env

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

@@ -9,6 +9,8 @@ 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,
@@ -39,6 +41,9 @@ 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" />
       <!-- 全屏 -->
@@ -93,6 +98,20 @@ 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;