<!--
  LoadingOverlay.vue
  加载遮罩层组件
  用于显示加载状态的动画效果
-->
<template>
  <div
    v-if="isLoading"
    class="absolute inset-0 flex items-center justify-center bg-[#0b1120]/80 backdrop-blur-sm z-10"
  >
    <div class="flex flex-col items-center gap-4">
      <!-- 加载动画 -->
      <div class="relative">
        <div class="absolute inset-0 rounded-full border-2 border-cyan-500/30 animate-ping"></div>
        <div class="absolute inset-0 rounded-full border-2 border-cyan-500/50 animate-pulse"></div>
        <el-icon class="is-loading text-4xl text-cyan-400 relative z-10"><Loading /></el-icon>
      </div>
      <!-- 加载文本 -->
      <span class="text-cyan-400 font-mono tracking-[0.2em] text-sm animate-pulse">
        {{ text || 'SYSTEM LOADING...' }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * LoadingOverlay 组件
 * 显示加载状态的遮罩层，带有动画效果
 */
import { Loading } from '@element-plus/icons-vue';

// ============================================================
// Props 定义
// ============================================================

defineProps<{
  /** 是否显示加载状态 */
  isLoading: boolean
  /** 自定义加载文本 */
  text?: string
}>()
</script>
