aegon-gen 1.0.0

package/src/directives/debounce copy.ts

@@ -0,0 +1,670 @@
+import { nextTick, type AppContext, type ComponentPublicInstance, type Directive, type DirectiveBinding } from 'vue'
+import { ElLoading } from 'element-plus'
+
+const DEBOUNCE_KEY = Symbol('vDebounce')
+const WATCH_KEY = Symbol('vDebounceWatch')
+const LOADING_INSTANCE_KEY = Symbol('vDebounceElLoading')
+const APP_CTX_KEY = Symbol('vDebounceAppContext')
+const LOCK_STATE_KEY = Symbol('vDebounceLockState')
+const RELEASE_TIMER_KEY = Symbol('vDebounceReleaseTimer')
+const REFRESH_GEN_KEY = Symbol('vDebounceRefreshGen')
+
+const INVOKING_FLAG = 'data-debounce-invoking'
+const LOADING_STYLE_ID = 'v-debounce-el-loading-style'
+
+type LoadingCloser = { close: () => void }
+type LoadingService = ((
+  options?: Record<string, unknown>,
+  context?: AppContext | null,
+) => LoadingCloser | undefined) & {
+  _context?: AppContext | null
+}
+
+let loadingService: LoadingService | null = null
+
+function resolveLoadingService(appContext?: AppContext | null): LoadingService {
+  if (loadingService) return loadingService
+
+  const service = ElLoading.service as LoadingService
+  service._context = service._context ?? appContext ?? null
+  loadingService = service
+  return service
+}
+
+export type DebounceHandler = (event: Event) => unknown | false
+
+/** 模式二配置；handler 可省略（与 @click 并用） */
+export interface DebounceLockConfig {
+  handler?: DebounceHandler
+  validate?: () => boolean | Promise<boolean>
+  form?: string
+  input?: string
+  pattern?: string | RegExp
+}
+
+export type DebounceBindingValue = DebounceHandler | DebounceLockConfig | undefined
+
+export type DebounceDirective = Directive<HTMLElement, DebounceBindingValue>
+export type DebounceDirectiveBinding = DirectiveBinding<DebounceBindingValue>
+
+interface DebounceBindingMeta {
+  listener: (event: Event) => void
+  event: string
+  binding: DebounceDirectiveBinding
+}
+
+const DEFAULT_WAIT_MS = 1000
+const DEFAULT_EVENT = 'click'
+
+function isElButton(el: HTMLElement): boolean {
+  return el.classList.contains('el-button')
+}
+
+/** 指令挂载点：原生 button 或 el-button 根节点 */
+function resolveButtonHost(el: HTMLElement): HTMLButtonElement {
+  if (el.tagName === 'BUTTON') return el as HTMLButtonElement
+  const nested = el.querySelector<HTMLButtonElement>('button.el-button')
+  return (nested ?? el) as HTMLButtonElement
+}
+
+function isButtonDisabled(btn: HTMLButtonElement): boolean {
+  return (
+    btn.disabled ||
+    btn.getAttribute('aria-disabled') === 'true' ||
+    btn.classList.contains('is-disabled')
+  )
+}
+
+function storeAppContext(el: HTMLElement, binding: DebounceDirectiveBinding) {
+  const inst = binding.instance as ComponentPublicInstance | null
+  ;(el as HTMLElement & { [APP_CTX_KEY]?: AppContext | null })[APP_CTX_KEY] =
+    inst?.$?.appContext ?? null
+}
+
+/** 使用主包 ElLoading（与 app.use(ElementPlus) 共用 appContext） */
+function prefetchLoadingModule(el: HTMLElement) {
+  const appContext = (el as HTMLElement & { [APP_CTX_KEY]?: AppContext | null })[APP_CTX_KEY]
+  resolveLoadingService(appContext)
+}
+
+function ensureLoadingStyles() {
+  if (typeof document === 'undefined') return
+
+  const css = `
+.el-button.v-debounce-btn-host,
+button.v-debounce-btn-host {
+  position: relative !important;
+  overflow: hidden !important;
+  box-sizing: border-box;
+}
+.el-button.v-debounce-btn-host {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 6px;
+}
+.v-debounce-el-loading-inline.el-loading-mask {
+  display: none !important;
+}
+.v-debounce-btn-label {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.v-debounce-btn-spinner {
+  position: static !important;
+  top: auto !important;
+  left: auto !important;
+  right: auto !important;
+  margin: 0 !important;
+  width: auto !important;
+  height: auto !important;
+  flex: 0 0 auto;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  text-align: center;
+}
+.v-debounce-btn-spinner .circular {
+  width: 14px;
+  height: 14px;
+  display: block;
+}
+.v-debounce-btn-spinner .path {
+  stroke: var(--app-btn-bg, #c53355);
+  stroke-width: 4;
+}
+`
+
+  const existing = document.getElementById(LOADING_STYLE_ID)
+  if (existing) {
+    existing.textContent = css
+    return
+  }
+
+  const style = document.createElement('style')
+  style.id = LOADING_STYLE_ID
+  style.textContent = css
+  document.head.appendChild(style)
+}
+
+function bumpRefreshGen(el: HTMLElement): number {
+  const host = resolveButtonHost(el)
+  const next = ((host as HTMLElement & { [REFRESH_GEN_KEY]?: number })[REFRESH_GEN_KEY] ?? 0) + 1
+  ;(host as HTMLElement & { [REFRESH_GEN_KEY]?: number })[REFRESH_GEN_KEY] = next
+  return next
+}
+
+function clearReleaseTimer(el: HTMLElement) {
+  const host = resolveButtonHost(el)
+  const timer = (host as HTMLElement & { [RELEASE_TIMER_KEY]?: number })[RELEASE_TIMER_KEY]
+  if (timer !== undefined) window.clearTimeout(timer)
+  delete (host as HTMLElement & { [RELEASE_TIMER_KEY]?: number })[RELEASE_TIMER_KEY]
+}
+
+function forceRemoveLoadingDom(btn: HTMLButtonElement) {
+  btn.querySelectorAll('.v-debounce-btn-spinner, .el-loading-mask.v-debounce-el-loading-inline').forEach(
+    (node) => node.remove(),
+  )
+}
+
+function setLockState(el: HTMLElement, locked: boolean) {
+  ;(el as HTMLElement & { [LOCK_STATE_KEY]?: boolean })[LOCK_STATE_KEY] = locked
+}
+
+function isLockActive(el: HTMLElement): boolean {
+  return !!(el as HTMLElement & { [LOCK_STATE_KEY]?: boolean })[LOCK_STATE_KEY]
+}
+
+function findButtonLabel(btn: HTMLButtonElement): HTMLElement | null {
+  const spanLabel = Array.from(btn.children).find(
+    (node): node is HTMLElement =>
+      node instanceof HTMLElement &&
+      node.tagName === 'SPAN' &&
+      !node.classList.contains('el-icon') &&
+      !node.classList.contains('v-debounce-btn-spinner'),
+  )
+  if (spanLabel) return spanLabel
+
+  if (btn.childNodes.length === 1 && btn.firstChild?.nodeType === Node.TEXT_NODE) {
+    const wrap = document.createElement('span')
+    wrap.className = 'v-debounce-btn-label'
+    wrap.textContent = btn.textContent
+    btn.textContent = ''
+    btn.appendChild(wrap)
+    return wrap
+  }
+
+  return null
+}
+
+/** 将 spinner 挪到文字 span 右侧，保持在按钮内部 */
+function formatInlineLoading(btn: HTMLButtonElement) {
+  const mask = btn.querySelector('.el-loading-mask.v-debounce-el-loading-inline')
+  const spinner =
+    (mask?.querySelector('.el-loading-spinner') as HTMLElement | null) ??
+    btn.querySelector('.v-debounce-btn-spinner')
+
+  if (!spinner) return
+
+  const label = findButtonLabel(btn)
+  if (!label) return
+
+  label.classList.add('v-debounce-btn-label')
+  spinner.classList.add('v-debounce-btn-spinner')
+  if (label.nextElementSibling !== spinner) {
+    label.insertAdjacentElement('afterend', spinner)
+  }
+
+  if (mask instanceof HTMLElement) mask.style.display = 'none'
+}
+
+async function showButtonLoading(el: HTMLElement) {
+  ensureLoadingStyles()
+  const btn = resolveButtonHost(el)
+  hideButtonLoading(el)
+
+  btn.classList.add('v-debounce-btn-host')
+  btn.setAttribute('aria-busy', 'true')
+
+  const appContext = (btn as HTMLElement & { [APP_CTX_KEY]?: AppContext | null })[APP_CTX_KEY]
+  const service = resolveLoadingService(appContext)
+  const instance = service(
+    {
+      target: btn,
+      lock: false,
+      background: 'transparent',
+      customClass: 'v-debounce-el-loading-inline',
+    },
+    appContext ?? service._context ?? undefined,
+  )
+
+  if (instance) {
+    ;(btn as HTMLElement & { [LOADING_INSTANCE_KEY]?: LoadingCloser })[LOADING_INSTANCE_KEY] = instance
+    formatInlineLoading(btn)
+  }
+}
+
+async function ensureButtonLoadingVisible(el: HTMLElement) {
+  if (!isLockActive(el)) return
+  const btn = resolveButtonHost(el)
+  if (btn.querySelector('.v-debounce-btn-spinner')) return
+
+  const mask = btn.querySelector('.el-loading-mask.v-debounce-el-loading-inline')
+  if (mask) {
+    formatInlineLoading(btn)
+    return
+  }
+
+  await showButtonLoading(el)
+}
+
+function scheduleLoadingRefresh(el: HTMLElement) {
+  const host = resolveButtonHost(el)
+  const gen = (host as HTMLElement & { [REFRESH_GEN_KEY]?: number })[REFRESH_GEN_KEY] ?? 0
+  void nextTick(() => {
+    if (!isLockActive(host)) return
+    if ((host as HTMLElement & { [REFRESH_GEN_KEY]?: number })[REFRESH_GEN_KEY] !== gen) return
+    if (host.querySelector('.v-debounce-btn-spinner')) {
+      formatInlineLoading(host)
+      return
+    }
+    void ensureButtonLoadingVisible(host)
+  })
+}
+
+function hideButtonLoading(el: HTMLElement) {
+  const btn = resolveButtonHost(el)
+  const instance = (btn as HTMLElement & { [LOADING_INSTANCE_KEY]?: LoadingCloser })[LOADING_INSTANCE_KEY]
+  try {
+    instance?.close()
+  } catch {
+    // spinner 可能被挪到文字旁，close 无法移除 DOM
+  }
+  delete (btn as HTMLElement & { [LOADING_INSTANCE_KEY]?: LoadingCloser })[LOADING_INSTANCE_KEY]
+  forceRemoveLoadingDom(btn)
+  btn.querySelectorAll('.v-debounce-btn-label').forEach((node) => {
+    node.classList.remove('v-debounce-btn-label')
+  })
+  btn.classList.remove('v-debounce-btn-host')
+  btn.removeAttribute('aria-busy')
+}
+
+function resolveWait(arg?: string): number {
+  if (arg && /^\d+$/.test(arg)) return Number(arg)
+  return DEFAULT_WAIT_MS
+}
+
+function resolveEvent(arg?: string): string {
+  if (arg && !/^\d+$/.test(arg)) return arg
+  return DEFAULT_EVENT
+}
+
+function isLockConfigObject(value: DebounceBindingValue): value is DebounceLockConfig {
+  return !!value && typeof value === 'object'
+}
+
+function resolveValidate(config?: DebounceLockConfig): (() => boolean | Promise<boolean>) | undefined {
+  if (!config) return undefined
+
+  const validators: Array<() => boolean | Promise<boolean>> = []
+
+  if (config.validate) validators.push(config.validate)
+
+  if (config.form) {
+    const formSelector = config.form
+    validators.push(() => {
+      const form = document.querySelector<HTMLFormElement>(formSelector)
+      if (!form) return false
+      const valid = form.checkValidity()
+      if (!valid) form.reportValidity()
+      return valid
+    })
+  }
+
+  if (config.input && config.pattern) {
+    const { input, pattern } = config
+    validators.push(() => {
+      const inputEl = document.querySelector<HTMLInputElement>(input)
+      if (!inputEl) return false
+      const re = pattern instanceof RegExp ? pattern : new RegExp(pattern)
+      const valid = re.test(inputEl.value)
+      if (!valid) inputEl.reportValidity?.()
+      return valid
+    })
+  }
+
+  if (!validators.length) return undefined
+
+  return async () => {
+    for (const run of validators) {
+      const ok = await Promise.resolve(run())
+      if (!ok) return false
+    }
+    return true
+  }
+}
+
+function parseBinding(binding: DebounceDirectiveBinding) {
+  const isLock = !!binding.modifiers.lock
+  const showLoading = !!binding.modifiers.loading
+  const wait = resolveWait(binding.arg)
+  const event = resolveEvent(binding.arg)
+
+  if (typeof binding.value === 'function') {
+    return { isLock, showLoading, wait, event, handler: binding.value, validate: undefined }
+  }
+
+  if (isLockConfigObject(binding.value)) {
+    return {
+      isLock,
+      showLoading,
+      wait,
+      event,
+      handler: binding.value.handler,
+      validate: resolveValidate(binding.value),
+    }
+  }
+
+  return { isLock, showLoading, wait, event, handler: undefined, validate: undefined }
+}
+
+function setLockDisabled(el: HTMLElement, locked: boolean) {
+  const btn = resolveButtonHost(el)
+  if (locked) {
+    if (!btn.dataset.debounceLocked) {
+      btn.dataset.debouncePrevDisabled = String(isButtonDisabled(btn))
+      btn.dataset.debouncePrevAriaDisabled = btn.getAttribute('aria-disabled') ?? ''
+    }
+    btn.dataset.debounceLocked = 'true'
+    btn.disabled = true
+    btn.setAttribute('aria-disabled', 'true')
+    btn.classList.add('is-disabled')
+    return
+  }
+
+  delete btn.dataset.debounceLocked
+  const prevDisabled = btn.dataset.debouncePrevDisabled === 'true'
+  btn.disabled = prevDisabled
+  const prevAria = btn.dataset.debouncePrevAriaDisabled
+  if (prevAria) btn.setAttribute('aria-disabled', prevAria)
+  else btn.removeAttribute('aria-disabled')
+  if (!prevDisabled) btn.classList.remove('is-disabled')
+  delete btn.dataset.debouncePrevDisabled
+  delete btn.dataset.debouncePrevAriaDisabled
+}
+
+async function setLockUi(el: HTMLElement, locked: boolean, showLoading: boolean, touchDisabled = true) {
+  if (touchDisabled) setLockDisabled(el, locked)
+  if (!showLoading) return
+  if (locked) {
+    await showButtonLoading(el)
+    scheduleLoadingRefresh(el)
+    return
+  }
+  hideButtonLoading(el)
+}
+
+function clearDisabledWatch(el: HTMLElement) {
+  const stop = (el as HTMLElement & { [WATCH_KEY]?: () => void })[WATCH_KEY]
+  stop?.()
+  delete (el as HTMLElement & { [WATCH_KEY]?: () => void })[WATCH_KEY]
+}
+
+function waitUntilButtonReleased(el: HTMLElement): Promise<void> {
+  clearDisabledWatch(el)
+  const btn = resolveButtonHost(el)
+
+  return new Promise((resolve) => {
+    let seenDisabled = isButtonDisabled(btn)
+    let settled = false
+
+    const finish = () => {
+      if (settled) return
+      settled = true
+      clearDisabledWatch(el)
+      resolve()
+    }
+
+    const syncState = () => {
+      if (isButtonDisabled(btn)) seenDisabled = true
+      if (seenDisabled && !isButtonDisabled(btn)) finish()
+    }
+
+    const observer = new MutationObserver(syncState)
+    observer.observe(btn, {
+      attributes: true,
+      attributeFilter: ['disabled', 'aria-disabled', 'class'],
+    })
+    ;(el as HTMLElement & { [WATCH_KEY]?: () => void })[WATCH_KEY] = () => {
+      observer.disconnect()
+    }
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        syncState()
+        if (!seenDisabled) window.setTimeout(finish, 32)
+      })
+    })
+
+    window.setTimeout(finish, 120_000)
+  })
+}
+
+async function runValidate(
+  validate: (() => boolean | Promise<boolean>) | undefined,
+): Promise<boolean> {
+  if (!validate) return true
+  try {
+    return await Promise.resolve(validate())
+  } catch {
+    return false
+  }
+}
+
+function shouldAbortHandler(result: unknown): boolean {
+  return result === false
+}
+
+function normalizeOnClick(handler: unknown): ((event: Event) => unknown) | undefined {
+  if (typeof handler === 'function') return handler as (event: Event) => unknown
+  if (Array.isArray(handler)) {
+    const fns = handler.filter((item) => typeof item === 'function') as Array<(event: Event) => unknown>
+    if (!fns.length) return undefined
+    return async (event: Event) => {
+      for (const fn of fns) await Promise.resolve(fn(event))
+    }
+  }
+  return undefined
+}
+
+function getVueOnClick(el: HTMLElement): ((event: Event) => unknown) | undefined {
+  const btn = resolveButtonHost(el)
+
+  if (isElButton(btn)) {
+    const parent = (
+      btn as unknown as {
+        __vueParentComponent?: {
+          props?: Record<string, unknown>
+          vnode?: { props?: Record<string, unknown> }
+        }
+      }
+    ).__vueParentComponent
+    const fromComponent =
+      normalizeOnClick(parent?.props?.onClick) ?? normalizeOnClick(parent?.vnode?.props?.onClick)
+    if (fromComponent) return fromComponent
+  }
+
+  const props = (btn as unknown as { __vnode?: { props?: Record<string, unknown> } }).__vnode?.props
+  return normalizeOnClick(props?.onClick)
+}
+
+async function invokeCompanionClick(el: HTMLElement, e: Event): Promise<'awaited' | 'dispatched'> {
+  const onClick = getVueOnClick(el)
+  if (onClick) {
+    await Promise.resolve(onClick(e))
+    return 'awaited'
+  }
+
+  el.setAttribute(INVOKING_FLAG, '1')
+  el.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+  el.removeAttribute(INVOKING_FLAG)
+  return 'dispatched'
+}
+
+async function runLockFlow(
+  el: HTMLElement,
+  e: Event,
+  showLoading: boolean,
+  wait: number,
+  handler: DebounceHandler | undefined,
+  validate: (() => boolean | Promise<boolean>) | undefined,
+  setLocked: (value: boolean) => void,
+) {
+  clearReleaseTimer(el)
+  bumpRefreshGen(el)
+  setLockState(el, true)
+  let releaseImmediately = false
+
+  const release = async (touchDisabled: boolean) => {
+    clearReleaseTimer(el)
+    bumpRefreshGen(el)
+    setLockState(el, false)
+    await setLockUi(el, false, showLoading, touchDisabled)
+    setLocked(false)
+  }
+
+  const touchDisabled = !!handler
+
+  try {
+    await setLockUi(el, true, showLoading, touchDisabled)
+
+    const passed = await runValidate(validate)
+    if (!passed) {
+      releaseImmediately = true
+      return
+    }
+
+    if (handler) {
+      const result = await Promise.resolve(handler(e))
+      if (shouldAbortHandler(result)) {
+        releaseImmediately = true
+        return
+      }
+      return
+    }
+
+    const mode = await invokeCompanionClick(el, e)
+    scheduleLoadingRefresh(el)
+    if (mode === 'dispatched') {
+      await waitUntilButtonReleased(el)
+    }
+  } catch {
+    // 事件异常结束，仍按 wait 延迟关闭 loading
+  } finally {
+    const host = resolveButtonHost(el)
+
+    if (releaseImmediately) {
+      void release(touchDisabled)
+      return
+    }
+
+    clearReleaseTimer(host)
+    ;(host as HTMLElement & { [RELEASE_TIMER_KEY]?: number })[RELEASE_TIMER_KEY] = window.setTimeout(
+      () => {
+        delete (host as HTMLElement & { [RELEASE_TIMER_KEY]?: number })[RELEASE_TIMER_KEY]
+        void release(touchDisabled)
+      },
+      wait,
+    )
+  }
+}
+
+/**
+ * v-debounce 两种模式：
+ * 1. 防重：v-debounce:800 @click="fn"
+ * 2. 锁定：v-debounce.lock.loading — 校验失败立即关 loading；事件结束后 delay(DEFAULT_WAIT_MS) 关闭
+ */
+export const vDebounce: DebounceDirective = {
+  mounted(el: HTMLElement, binding: DebounceDirectiveBinding) {
+    const host = resolveButtonHost(el)
+    storeAppContext(host, binding)
+    if (binding.modifiers.loading) prefetchLoadingModule(host)
+
+    let locked = false
+
+    const listener = (e: Event) => {
+      if (host.hasAttribute(INVOKING_FLAG)) return
+
+      const meta = (host as HTMLElement & { [DEBOUNCE_KEY]?: DebounceBindingMeta })[DEBOUNCE_KEY]
+      const currentBinding = meta?.binding ?? binding
+      const { isLock, showLoading, wait, handler, validate } = parseBinding(currentBinding)
+
+      if (locked) {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+        return
+      }
+
+      if (isLock) {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+        locked = true
+        void runLockFlow(host, e, showLoading, wait, handler, validate, (v) => {
+          locked = v
+        })
+        return
+      }
+
+      locked = true
+
+      if (handler) {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+        Promise.resolve(handler(e)).finally(() => {
+          window.setTimeout(() => {
+            locked = false
+          }, wait)
+        })
+        return
+      }
+
+      window.setTimeout(() => {
+        locked = false
+      }, wait)
+    }
+
+    const event = parseBinding(binding).event
+    host.addEventListener(event, listener, true)
+    ;(host as HTMLElement & { [DEBOUNCE_KEY]?: DebounceBindingMeta })[DEBOUNCE_KEY] = {
+      listener,
+      event,
+      binding,
+    }
+  },
+  updated(el: HTMLElement, binding: DebounceDirectiveBinding) {
+    const host = resolveButtonHost(el)
+    const meta = (host as HTMLElement & { [DEBOUNCE_KEY]?: DebounceBindingMeta })[DEBOUNCE_KEY]
+    if (meta) meta.binding = binding
+    storeAppContext(host, binding)
+    if (binding.modifiers.loading && isLockActive(host)) {
+      scheduleLoadingRefresh(host)
+    }
+  },
+  unmounted(el: HTMLElement) {
+    const host = resolveButtonHost(el)
+    setLockState(host, false)
+    clearReleaseTimer(host)
+    bumpRefreshGen(host)
+    const meta = (host as HTMLElement & { [DEBOUNCE_KEY]?: DebounceBindingMeta })[DEBOUNCE_KEY]
+    if (!meta) return
+    host.removeEventListener(meta.event, meta.listener, true)
+    clearDisabledWatch(host)
+    hideButtonLoading(host)
+    setLockDisabled(host, false)
+    delete (host as HTMLElement & { [DEBOUNCE_KEY]?: DebounceBindingMeta })[DEBOUNCE_KEY]
+  },
+}