<script setup lang="ts">
const description =
  'CSS isolation: isolate 用于创建独立的层叠上下文，使元素内部的 z-index 值只在内部比较，不会影响外部元素的堆叠顺序';
</script>

<template>
  <div class="p-8 space-y-8" b="1px solid #e5e7eb" mt-4>
    <h1 class="text-2xl font-bold">CSS Isolation 演示</h1>
    <p class="mb-6">{{ description }}</p>

    <!-- 实际应用场景示例 -->
    <div class="mt-10 border rounded p-4 bg-gray-50">
      <h2 class="text-lg font-semibold mb-4">实际应用：模态框和下拉菜单</h2>

      <div class="grid grid-cols-2 gap-8">
        <!-- 左侧：问题演示 -->
        <div>
          <h3 class="font-medium mb-2">没有使用 isolate 的问题</h3>
          <div class="relative h-60 border border-dashed border-gray-300 bg-gray-100">
            <!-- 网站内容 -->
            <div class="p-2">
              <div class="bg-white p-2 mb-2">网站内容</div>

              <!-- 假设这是导航栏的下拉菜单 -->
              <div class="relative">
                <button class="bg-blue-500 text-white px-2 py-1 rounded">导航 ▼</button>
                <div class="absolute mt-1 bg-white shadow rounded p-2 border border-gray-200 z-50">下拉菜单 (z-50)</div>
              </div>
            </div>

            <!-- 假设这是模态框 -->
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center z-40">
              <div class="bg-white p-4 rounded shadow-lg w-36">
                模态框 (z-40)<br />
                <span class="text-red-500 text-xs">被下拉菜单覆盖了!</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧：解决方案 -->
        <div>
          <h3 class="font-medium mb-2">使用 isolate 解决问题</h3>
          <div class="relative h-60 border border-dashed border-gray-300 bg-gray-100">
            <!-- 网站内容 -->
            <div class="p-2">
              <div class="bg-white p-2 mb-2">网站内容</div>

              <!-- 使用 isolate 的下拉菜单 -->
              <div class="relative isolate">
                <button class="bg-blue-500 text-white px-2 py-1 rounded">导航 ▼</button>
                <div class="absolute mt-1 bg-white shadow rounded p-2 border border-gray-200 z-50">下拉菜单 (z-50)</div>
              </div>
            </div>

            <!-- 模态框 -->
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center z-40">
              <div class="bg-white p-4 rounded shadow-lg w-36">
                模态框 (z-40)<br />
                <span class="text-green-500 text-xs">正确显示在顶层!</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <p class="mt-4 text-sm">
        使用 isolate 后，导航菜单的 z-index 只在其容器内部起作用，
        不再与页面上的模态框比较。这样模态框可以正确显示在最上层， 而不需要使用极大的 z-index 值。
      </p>
    </div>
  </div>
</template>
