wecom_it_smart_desk/frontend-agent/src/App.vue

<!-- =============================================================================
// 企微IT智能服务台 — 坐席工作台根组件
// =============================================================================
// 说明：Vue3 应用的根组件，所有页面都渲染在这个组件内
// 使用 router-view 渲染当前路由对应的页面
// ============================================================================= -->

<template>
  <div class="app-container">
    <!-- 测试环境标识 - 右上角覆盖层，不占用布局 -->
    <div v-if="isTestEnv" class="test-env-badge">
      🔧 测试环境
    </div>
    <!-- 路由视图：显示当前路由对应的页面组件 -->
    <router-view />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// 检测是否为测试环境
const isTestEnv = computed(() => {
  return import.meta.env.MODE === 'development' ||
         window.location.hostname.includes('localhost') ||
         window.location.hostname.includes('127.0.0.1')
})
</script>

<style scoped>
.app-container {
  position: relative;
  min-height: 100vh;
}

.test-env-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 9999;
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa500 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  pointer-events: none;
}
</style>