Aether/frontend/src/components/ui/dialog/Dialog.vue

<template>
  <Teleport to="body">
    <div
      v-if="isOpen"
      class="fixed inset-0 overflow-y-auto"
      :style="{ zIndex: containerZIndex }"
    >
      <!-- 背景遮罩 -->
      <Transition
        enter-active-class="duration-200 ease-out"
        enter-from-class="opacity-0"
        enter-to-class="opacity-100"
        leave-active-class="duration-200 ease-in"
        leave-from-class="opacity-100"
        leave-to-class="opacity-0"
      >
        <div
          v-if="isOpen"
          class="fixed inset-0 bg-black/40 backdrop-blur-sm transition-opacity"
          :style="{ zIndex: backdropZIndex }"
          @click="handleClose"
        />
      </Transition>

      <div class="relative flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
        <!-- 对话框内容 -->
        <Transition
          enter-active-class="duration-300 ease-out"
          enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
          enter-to-class="opacity-100 translate-y-0 sm:scale-100"
          leave-active-class="duration-200 ease-in"
          leave-from-class="opacity-100 translate-y-0 sm:scale-100"
          leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
        >
          <div
            v-if="isOpen"
            class="relative transform rounded-lg bg-background text-left shadow-2xl transition-all sm:my-8 sm:w-full border border-border"
            :style="{ zIndex: contentZIndex }"
            :class="maxWidthClass"
            @click.stop
          >
            <!-- Header 区域：优先使用 slot，否则使用 title prop -->
            <slot name="header">
              <div
                v-if="title"
                class="border-b border-border px-6 py-4"
              >
                <div class="flex items-center gap-3">
                  <div
                    v-if="icon"
                    class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 flex-shrink-0"
                    :class="iconClass"
                  >
                    <component
                      :is="icon"
                      class="h-5 w-5 text-primary"
                    />
                  </div>
                  <div class="flex-1 min-w-0">
                    <h3 class="text-lg font-semibold text-foreground leading-tight">
                      {{ title }}
                    </h3>
                    <p
                      v-if="description"
                      class="text-xs text-muted-foreground"
                    >
                      {{ description }}
                    </p>
                  </div>
                </div>
              </div>
            </slot>

            <!-- 内容区域：统一添加 padding -->
            <div class="px-6 py-3">
              <slot />
            </div>

            <!-- Footer 区域：如果有 footer 插槽，自动添加样式 -->
            <div
              v-if="slots.footer"
              class="border-t border-border px-6 py-4 bg-muted/10 flex flex-row-reverse gap-3"
            >
              <slot name="footer" />
            </div>
          </div>
        </Transition>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { computed, useSlots, type Component } from 'vue'

// Props 定义
const props = defineProps<{
  open?: boolean
  modelValue?: boolean
  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl'
  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl'
  title?: string
  description?: string
  icon?: Component // Lucide icon component
  iconClass?: string // Custom icon color class
  zIndex?: number // Custom z-index for nested dialogs (default: 60)
}>()

// Emits 定义
const emit = defineEmits<{
  'update:open': [value: boolean]
  'update:modelValue': [value: boolean]
}>()

// 获取 slots 以便在模板中使用
const slots = useSlots()

// 统一处理 open 状态
const isOpen = computed(() => {
  if (props.modelValue === true) {
    return true
  }
  if (props.open === true) {
    return true
  }
  return false
})

// 统一处理关闭事件
function handleClose() {
  if (props.open !== undefined) {
    emit('update:open', false)
  }
  if (props.modelValue !== undefined) {
    emit('update:modelValue', false)
  }
}

const maxWidthClass = computed(() => {
  const sizeValue = props.maxWidth || props.size || 'md'
  const sizes = {
    sm: 'sm:max-w-sm',
    md: 'sm:max-w-md',
    lg: 'sm:max-w-lg',
    xl: 'sm:max-w-xl',
    '2xl': 'sm:max-w-2xl',
    '3xl': 'sm:max-w-3xl',
    '4xl': 'sm:max-w-4xl',
    '5xl': 'sm:max-w-5xl',
    '6xl': 'sm:max-w-6xl',
    '7xl': 'sm:max-w-7xl'
  }
  return sizes[sizeValue]
})

// Z-index computed values for nested dialogs support
const containerZIndex = computed(() => props.zIndex || 60)
const backdropZIndex = computed(() => props.zIndex || 60)
const contentZIndex = computed(() => (props.zIndex || 60) + 10)
</script>