Aether/frontend/src/composables/useEscapeKey.ts

import { onMounted, onUnmounted, ref } from 'vue'

/**
 * ESC 键监听 Composable（简化版本，直接使用独立监听器）
 * 用于按 ESC 键关闭弹窗或其他可关闭的组件
 *
 * @param callback - 按 ESC 键时执行的回调函数
 * @param options - 配置选项
 */
export function useEscapeKey(
  callback: () => void,
  options: {
    /** 是否在输入框获得焦点时禁用 ESC 键，默认 true */
    disableOnInput?: boolean
    /** 是否只监听一次，默认 false */
    once?: boolean
  } = {}
) {
  const { disableOnInput = true, once = false } = options
  const isActive = ref(true)

  function handleKeyDown(event: KeyboardEvent) {
    // 只处理 ESC 键
    if (event.key !== 'Escape') return

    // 检查组件是否还活跃
    if (!isActive.value) return

    // 如果配置了在输入框获得焦点时禁用，则检查当前焦点元素
    if (disableOnInput) {
      const activeElement = document.activeElement
      const isInputElement = activeElement && (
        activeElement.tagName === 'INPUT' ||
        activeElement.tagName === 'TEXTAREA' ||
        activeElement.tagName === 'SELECT' ||
        activeElement.contentEditable === 'true' ||
        activeElement.getAttribute('role') === 'textbox' ||
        activeElement.getAttribute('role') === 'combobox'
      )

      // 如果焦点在输入框中，不处理 ESC 键
      if (isInputElement) return
    }

    // 执行回调
    callback()

    // 如果只监听一次，则移除监听器
    if (once) {
      removeEventListener()
    }
  }

  function addEventListener() {
    document.addEventListener('keydown', handleKeyDown)
  }

  function removeEventListener() {
    document.removeEventListener('keydown', handleKeyDown)
  }

  onMounted(() => {
    addEventListener()
  })

  onUnmounted(() => {
    isActive.value = false
    removeEventListener()
  })

  return {
    addEventListener,
    removeEventListener
  }
}