@if (open()) {
  <div class="fixed inset-0 z-[var(--z-preview)] flex flex-col bg-black/90 animate-fade-in">
    <!-- 顶部栏 -->
    <div class="flex items-center justify-between px-4 py-3 text-white">
      <span class="text-sm font-medium tabular-nums">
        {{ current() + 1 }} / {{ images().length }}
      </span>
      <button
        type="button"
        class="flex h-10 w-10 items-center justify-center rounded-full bg-white/10 transition-colors active:bg-white/20"
        (click)="close()"
        aria-label="关闭预览"
      >
        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
      </button>
    </div>

    <!-- 图片区 -->
    <div
      class="flex flex-1 touch-none select-none items-center justify-center overflow-hidden px-6"
      (touchstart)="onTouchStart($event)"
      (touchend)="onTouchEnd($event)"
    >
      <img
        [src]="images()[current()]"
        alt="预览图片"
        class="max-h-full max-w-full object-contain"
        [style.transform]="'scale(' + scale() + ')'"
      />
    </div>

    <!-- 左右切换(桌面/悬停场景) -->
    @if (images().length > 1) {
      <button
        type="button"
        class="absolute left-2 top-1/2 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 text-white transition-colors active:bg-white/20"
        (click)="prev()"
        aria-label="上一张"
      >
        <i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
      </button>
      <button
        type="button"
        class="absolute right-2 top-1/2 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 text-white transition-colors active:bg-white/20"
        (click)="next()"
        aria-label="下一张"
      >
        <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
      </button>
    }

    <!-- 指示点 -->
    @if (images().length > 1) {
      <div class="flex items-center justify-center gap-1.5 py-5">
        @for (img of images(); track img; let i = $index) {
          <span
            class="h-1.5 rounded-full transition-all duration-300"
            [class.w-4]="i === current()"
            [class.w-1.5]="i !== current()"
            [class.bg-white]="i === current()"
            [class.bg-white/30]="i !== current()"
            aria-hidden="true"
          ></span>
        }
      </div>
    }
  </div>
}