# Overlay 组件

遮罩层组件，支持多层嵌套。

## 基本用法

```vue
<template>
  <Overlay :visible="showModal" @close="showModal = false">
    <div>内容</div>
  </Overlay>
</template>
```

## 多层嵌套

组件支持多层嵌套，会自动管理 z-index 层级：

```vue
<template>
  <!-- 第一层 Overlay -->
  <Overlay :visible="showFirstModal" @close="showFirstModal = false">
    <div>
      <h2>第一层弹窗</h2>
      <button @click="showSecondModal = true">打开第二层</button>

      <!-- 第二层 Overlay -->
      <Overlay :visible="showSecondModal" @close="showSecondModal = false">
        <div>
          <h2>第二层弹窗</h2>
          <button @click="showThirdModal = true">打开第三层</button>

          <!-- 第三层 Overlay -->
          <Overlay :visible="showThirdModal" @close="showThirdModal = false">
            <div>
              <h2>第三层弹窗</h2>
              <p>这是最顶层的弹窗</p>
            </div>
          </Overlay>
        </div>
      </Overlay>
    </div>
  </Overlay>
</template>

<script setup>
import { ref } from 'vue'

const showFirstModal = ref(false)
const showSecondModal = ref(false)
const showThirdModal = ref(false)
</script>
```

## 手动指定层级

如果需要手动控制层级，可以使用 `level` 或 `zIndex` 属性：

```vue
<template>
  <!-- 手动指定层级 -->
  <Overlay :visible="showModal" :level="5" @close="showModal = false">
    <div>内容</div>
  </Overlay>

  <!-- 或者直接指定 z-index -->
  <Overlay :visible="showModal" :z-index="2000" @close="showModal = false">
    <div>内容</div>
  </Overlay>
</template>
```

## 属性说明

| 属性       | 类型    | 默认值               | 说明                           |
| ---------- | ------- | -------------------- | ------------------------------ |
| visible    | boolean | false                | 是否显示遮罩                   |
| background | string  | 'rgba(0, 0, 0, 0.5)' | 遮罩背景色                     |
| zIndex     | number  | undefined            | 手动指定 z-index               |
| level      | number  | 0                    | 嵌套层级，用于自动计算 z-index |
| baseZIndex | number  | 1000                 | 基础 z-index 值                |
| clickable  | boolean | true                 | 是否可点击遮罩关闭             |
| animation  | string  | 'fade'               | 动画类型                       |
| duration   | number  | 300                  | 动画持续时间                   |

## 层级计算规则

- 如果没有手动指定 `zIndex`，组件会根据 `level` 自动计算：
  - 计算公式：`baseZIndex + level * 10`
  - 例如：baseZIndex=1000, level=1 → z-index=1010
- 嵌套时，子组件的 level 会自动递增
- 手动指定 `zIndex` 时，会忽略自动计算