shanxia2.0/miniprogram/components/app-env-badge/app-env-badge.vue

<template>
  <!-- 非生产环境常驻提醒，避免误把本机/测试包当生产上传 -->
  <view v-if="show" class="app-env-badge" :class="'app-env-badge--' + envKey" @click="onTap">
    <text class="app-env-badge__text">当前环境：{{ label }}（{{ envKey }}）· 点此查看</text>
  </view>
</template>

<script setup>
import { computed } from 'vue'
import {
  APP_ENV,
  CURRENT_ENV,
  IS_PRODUCTION,
  resolveApiBase,
  resolveWebOrigin
} from '@/config/env'

const show = computed(() => !IS_PRODUCTION)
const envKey = computed(() => APP_ENV || CURRENT_ENV.key || 'unknown')
const label = computed(() => CURRENT_ENV.label || envKey.value)

function onTap() {
  uni.showModal({
    title: '环境配置提醒',
    content: [
      `APP_ENV = ${envKey.value}（${label.value}）`,
      `API：${resolveApiBase()}`,
      `Web：${resolveWebOrigin()}`,
      '',
      '上传微信正式版前，请将 config/env.js 改为：',
      "export const APP_ENV = 'production'",
      '并执行：npm run release:check-api'
    ].join('\n'),
    showCancel: false,
    confirmText: '知道了'
  })
}
</script>

<style scoped>
.app-env-badge {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  text-align: center;
  box-sizing: border-box;
}
.app-env-badge--local {
  background: #dc2626;
}
.app-env-badge--test,
.app-env-badge--testLocalH5 {
  background: #d97706;
}
.app-env-badge__text {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
</style>