<!--
 * @Date: 2025-03-20 20:36:36
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-21 15:37:45
 * @FilePath: /mlaj/src/components/ui/FrostedGlass.vue
 * @Description: 毛玻璃效果背景组件
-->
<template>
  <div
    :class="[
      `bg-white/${bgOpacity} backdrop-blur-${blurLevel} rounded-xl border border-white/30 shadow-lg`,
      className
    ]"
  >
    <slot></slot>
  </div>
</template>

<script setup>
defineProps({
  /**
   * 自定义类名
   */
  className: {
    type: String,
    default: ''
  },
  /**
   * 背景透明度 (0-100)
   */
  bgOpacity: {
    type: Number,
    default: 80,
    validator: (value) => value >= 0 && value <= 100
  },
  /**
   * 模糊等级
   * @values 'none', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'
   */
  blurLevel: {
    type: String,
    default: 'sm',
    validator: (value) => ['none', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'].includes(value)
  }
})
</script>