aegon-lv97 1.0.0

package/gen-ai/common/directives/btnLoading.ts

@@ -0,0 +1,455 @@
+import { nextTick, type Directive, type DirectiveBinding } from 'vue'
+
+const BTN_LOADING_KEY = Symbol('vAiBtnLoading')
+const REFRESH_GEN_KEY = Symbol('vAiBtnLoadingRefreshGen')
+
+const LOADING_STYLE_ID = 'v-ai-btn-loading-style'
+const DEFAULT_MIN_LOCK_MS = 1000
+const DEFAULT_AUTO_CLOSE_MS = 30_000
+const HOST_ID_ATTR = 'data-v-ai-btn-loading-id'
+
+interface BtnLoadingSession {
+  id: string
+  host: HTMLButtonElement
+  startedAt: number
+  minLockMs: number
+  locked: boolean
+  closeRequested: boolean
+  closeRequestedAt?: number
+  releaseTimer?: number
+  autoCloseTimer?: number
+  guardTimer?: number
+  classObserver?: MutationObserver
+}
+
+interface BtnLoadingBindingMeta {
+  listener: (event: Event) => void
+  event: string
+  binding: DirectiveBinding
+}
+
+/** closeAiBtnLoading() 主动关闭；未调用时 DEFAULT_AUTO_CLOSE_MS 后自动关闭 */
+const activeSessions = new Map<string, BtnLoadingSession>()
+const hostToSessionId = new Map<HTMLButtonElement, string>()
+
+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 ensureHostId(host: HTMLButtonElement, id: string) {
+  host.setAttribute(HOST_ID_ATTR, id)
+}
+
+function getSessionById(id: string): BtnLoadingSession | undefined {
+  return activeSessions.get(id)
+}
+
+/** Vue 重渲染可能替换 button 节点，按 session id 重新绑定 DOM */
+function rebindSessionHost(session: BtnLoadingSession): HTMLButtonElement | null {
+  if (session.host.isConnected) {
+    ensureHostId(session.host, session.id)
+    hostToSessionId.set(session.host, session.id)
+    return session.host
+  }
+
+  const byAttr = document.querySelector<HTMLButtonElement>(
+    `[${HOST_ID_ATTR}="${CSS.escape(session.id)}"]`,
+  )
+  if (byAttr) {
+    session.host = byAttr
+    hostToSessionId.set(byAttr, session.id)
+    return byAttr
+  }
+
+  return null
+}
+
+function getSessionByHost(host: HTMLButtonElement): BtnLoadingSession | undefined {
+  const id = hostToSessionId.get(host) ?? host.getAttribute(HOST_ID_ATTR) ?? undefined
+  if (!id) return undefined
+
+  const session = getSessionById(id)
+  if (!session) return undefined
+
+  session.host = host
+  hostToSessionId.set(host, id)
+  return session
+}
+
+function findSessionForHost(host: HTMLButtonElement): BtnLoadingSession | undefined {
+  const direct = getSessionByHost(host)
+  if (direct) return direct
+
+  const id = host.getAttribute(HOST_ID_ATTR)
+  if (id) {
+    const session = getSessionById(id)
+    if (session) {
+      session.host = host
+      hostToSessionId.set(host, id)
+      return session
+    }
+  }
+
+  for (const session of activeSessions.values()) {
+    const rebound = rebindSessionHost(session)
+    if (rebound === host) return session
+  }
+
+  return undefined
+}
+
+function resolveCloseTargets(target?: HTMLElement | string): HTMLButtonElement[] {
+  if (target === undefined) {
+    return [...activeSessions.values()]
+      .map((session) => rebindSessionHost(session))
+      .filter((host): host is HTMLButtonElement => host !== null)
+  }
+  if (typeof target === 'string') {
+    return Array.from(document.querySelectorAll<HTMLElement>(target)).map((node) =>
+      resolveButtonHost(node),
+    )
+  }
+  return [resolveButtonHost(target)]
+}
+
+function resolveMinLockMs(arg?: string): number {
+  if (arg && /^\d+$/.test(arg)) return Number(arg)
+  return DEFAULT_MIN_LOCK_MS
+}
+
+function ensureLoadingStyles() {
+  if (typeof document === 'undefined') return
+
+  const css = `
+.el-button.v-ai-btn-loading-host,
+button.v-ai-btn-loading-host {
+  position: relative !important;
+  box-sizing: border-box;
+  cursor: not-allowed !important;
+}
+.el-button.v-ai-btn-loading-host {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+.el-button.v-ai-btn-loading-host::after,
+button.v-ai-btn-loading-host::after {
+  content: '';
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-left: 6px;
+  flex: 0 0 auto;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: v-ai-btn-loading-spin 0.75s linear infinite;
+  vertical-align: middle;
+  opacity: 1 !important;
+}
+@keyframes v-ai-btn-loading-spin {
+  to { transform: rotate(360deg); }
+}
+`
+
+  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(host: HTMLButtonElement): number {
+  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 applyLoadingVisual(host: HTMLButtonElement, sessionId: string) {
+  ensureLoadingStyles()
+  ensureHostId(host, sessionId)
+  host.classList.add('v-ai-btn-loading-host', 'is-disabled')
+  host.setAttribute('aria-busy', 'true')
+  host.setAttribute('aria-disabled', 'true')
+  host.dataset.aiBtnLoading = '1'
+}
+
+function clearLoadingVisual(host: HTMLButtonElement) {
+  host.classList.remove('v-ai-btn-loading-host', 'is-disabled')
+  host.removeAttribute('aria-busy')
+  host.removeAttribute('aria-disabled')
+  host.removeAttribute(HOST_ID_ATTR)
+  delete host.dataset.aiBtnLoading
+}
+
+function ensureLoadingVisual(session: BtnLoadingSession) {
+  if (!activeSessions.has(session.id)) return
+  // 已请求关闭则不再强行补回 class（避免与主动 clear 打架）
+  if (session.closeRequested) return
+
+  const host = rebindSessionHost(session)
+  if (!host) return
+
+  if (!host.classList.contains('v-ai-btn-loading-host')) {
+    applyLoadingVisual(host, session.id)
+  } else {
+    ensureHostId(host, session.id)
+  }
+}
+
+function startClassGuard(session: BtnLoadingSession) {
+  stopClassGuard(session)
+
+  const guard = () => {
+    if (!activeSessions.has(session.id)) return
+    ensureLoadingVisual(session)
+  }
+
+  const host = rebindSessionHost(session)
+  if (host) {
+    session.classObserver = new MutationObserver(guard)
+    session.classObserver.observe(host, { attributes: true, attributeFilter: ['class'] })
+  }
+
+  session.guardTimer = window.setInterval(guard, 120)
+}
+
+function stopClassGuard(session: BtnLoadingSession) {
+  session.classObserver?.disconnect()
+  delete session.classObserver
+  if (session.guardTimer !== undefined) {
+    window.clearInterval(session.guardTimer)
+    delete session.guardTimer
+  }
+}
+
+function scheduleLoadingRefresh(session: BtnLoadingSession) {
+  const host = rebindSessionHost(session)
+  if (!host) return
+
+  const gen = (host as HTMLElement & { [REFRESH_GEN_KEY]?: number })[REFRESH_GEN_KEY] ?? 0
+  void nextTick(() => {
+    if (!activeSessions.has(session.id)) return
+    if ((host as HTMLElement & { [REFRESH_GEN_KEY]?: number })[REFRESH_GEN_KEY] !== gen) return
+    ensureLoadingVisual(session)
+  })
+}
+
+function clearReleaseTimer(session: BtnLoadingSession) {
+  if (session.releaseTimer !== undefined) {
+    window.clearTimeout(session.releaseTimer)
+    session.releaseTimer = undefined
+  }
+}
+
+function clearAutoCloseTimer(session: BtnLoadingSession) {
+  if (session.autoCloseTimer !== undefined) {
+    window.clearTimeout(session.autoCloseTimer)
+    session.autoCloseTimer = undefined
+  }
+}
+
+function releaseSession(session: BtnLoadingSession) {
+  if (!activeSessions.has(session.id)) return
+
+  clearReleaseTimer(session)
+  clearAutoCloseTimer(session)
+  stopClassGuard(session)
+
+  const host = rebindSessionHost(session)
+  if (host) {
+    clearLoadingVisual(host)
+    hostToSessionId.delete(host)
+  }
+
+  activeSessions.delete(session.id)
+}
+
+/** closeAiBtnLoading() 或超时触发；从点击起至少 minLockMs 后才真正关闭 */
+function scheduleRelease(session: BtnLoadingSession) {
+  clearReleaseTimer(session)
+  const elapsed = Date.now() - session.startedAt
+  const remain = Math.max(0, session.minLockMs - elapsed)
+
+  session.releaseTimer = window.setTimeout(() => {
+    session.releaseTimer = undefined
+    session.locked = false
+    releaseSession(session)
+  }, remain)
+}
+
+/** 未调用 closeAiBtnLoading() 时，点击后 DEFAULT_AUTO_CLOSE_MS 自动关闭 */
+function scheduleAutoClose(session: BtnLoadingSession) {
+  clearAutoCloseTimer(session)
+  session.autoCloseTimer = window.setTimeout(() => {
+    session.autoCloseTimer = undefined
+    if (!activeSessions.has(session.id)) return
+    requestClose(session)
+  }, DEFAULT_AUTO_CLOSE_MS)
+}
+
+function requestClose(session: BtnLoadingSession) {
+  if (session.closeRequested) return
+  session.closeRequested = true
+  session.closeRequestedAt = Date.now()
+  clearAutoCloseTimer(session)
+  scheduleRelease(session)
+}
+
+function activateLoading(host: HTMLButtonElement, minLockMs: number) {
+  const existing = findSessionForHost(host)
+  if (existing?.locked && !existing.closeRequested) return
+
+  // 上一轮已请求关闭但尚未 release：先清掉，避免旧 releaseTimer 误杀新 session
+  if (existing) {
+    releaseSession(existing)
+  }
+
+  const id = `bl-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`
+  const session: BtnLoadingSession = {
+    id,
+    host,
+    startedAt: Date.now(),
+    minLockMs,
+    locked: true,
+    closeRequested: false,
+  }
+
+  activeSessions.set(id, session)
+  hostToSessionId.set(host, id)
+  bumpRefreshGen(host)
+  applyLoadingVisual(host, id)
+  startClassGuard(session)
+  scheduleLoadingRefresh(session)
+  scheduleAutoClose(session)
+}
+
+/** 请求关闭；未调用时 30s 后自动关闭；调用后至少再保持 minLockMs（默认 1s，从点击起算） */
+export function closeAiBtnLoading(target?: HTMLElement | string) {
+  if (target === undefined) {
+    ;[...activeSessions.values()].forEach((session) => {
+      requestClose(session)
+      const host = rebindSessionHost(session)
+      if (host) clearLoadingVisual(host)
+    })
+    return
+  }
+
+  const hosts = resolveCloseTargets(target)
+  const matched = new Set<BtnLoadingSession>()
+
+  for (const host of hosts) {
+    const session = findSessionForHost(host)
+    if (session) matched.add(session)
+  }
+
+  // DOM 重挂后 hostToSessionId 可能失联：按选择器兜底匹配仍存活的 session
+  if (typeof target === 'string') {
+    for (const session of activeSessions.values()) {
+      const host = rebindSessionHost(session)
+      if (host?.matches(target)) matched.add(session)
+    }
+  }
+
+  if (matched.size > 0) {
+    matched.forEach((session) => requestClose(session))
+  }
+
+  // 立即清样式：closeRequested 后 classGuard 不再补回，避免 session 失联时一直转圈
+  hosts.forEach((host) => clearLoadingVisual(host))
+}
+
+/** 是否存在未关闭的 loading（便于调试/测试） */
+export function hasActiveAiBtnLoading(target?: HTMLElement | string): boolean {
+  if (target === undefined) return activeSessions.size > 0
+
+  return resolveCloseTargets(target).some((host) => {
+    const session = findSessionForHost(host)
+    return !!session && !session.closeRequested
+  })
+}
+
+/**
+ * v-aiBtnLoading — 按钮 loading（与 v-aiDebounce 解耦）
+ * - v-aiBtnLoading              默认最短锁定 1s（session 释放；样式在 closeAiBtnLoading 时立即清除）
+ * - v-aiBtnLoading:1500         自定义最短毫秒
+ * - 未调用 closeAiBtnLoading()：30s 后自动关闭
+ * - closeAiBtnLoading()：立即去掉转圈样式，并请求释放 session
+ */
+export const vAiBtnLoading: Directive<HTMLElement> = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    const host = resolveButtonHost(el)
+    const event = binding.arg && !/^\d+$/.test(binding.arg) ? binding.arg : 'click'
+
+    const listener = (e: Event) => {
+      const meta = (el as HTMLElement & { [BTN_LOADING_KEY]?: BtnLoadingBindingMeta })[BTN_LOADING_KEY]
+      const currentBinding = meta?.binding ?? binding
+      const minLockMs = resolveMinLockMs(
+        currentBinding.arg && /^\d+$/.test(currentBinding.arg) ? currentBinding.arg : undefined,
+      )
+
+      const session = findSessionForHost(host)
+      if (session?.locked && !session.closeRequested) {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+        return
+      }
+
+      activateLoading(host, minLockMs)
+    }
+
+    host.addEventListener(event, listener, true)
+    ;(el as HTMLElement & { [BTN_LOADING_KEY]?: BtnLoadingBindingMeta })[BTN_LOADING_KEY] = {
+      listener,
+      event,
+      binding,
+    }
+
+    const existing = findSessionForHost(host)
+    if (existing && !existing.closeRequested) {
+      existing.host = host
+      hostToSessionId.set(host, existing.id)
+      ensureLoadingVisual(existing)
+      startClassGuard(existing)
+    }
+  },
+  updated(el: HTMLElement, binding: DirectiveBinding) {
+    const host = resolveButtonHost(el)
+    const meta = (el as HTMLElement & { [BTN_LOADING_KEY]?: BtnLoadingBindingMeta })[BTN_LOADING_KEY]
+    if (meta) meta.binding = binding
+
+    const session = findSessionForHost(host)
+    if (!session || session.closeRequested) return
+
+    session.host = host
+    hostToSessionId.set(host, session.id)
+    ensureLoadingVisual(session)
+    scheduleLoadingRefresh(session)
+  },
+  unmounted(el: HTMLElement) {
+    const host = resolveButtonHost(el)
+    const meta = (el as HTMLElement & { [BTN_LOADING_KEY]?: BtnLoadingBindingMeta })[BTN_LOADING_KEY]
+    if (meta) {
+      host.removeEventListener(meta.event, meta.listener, true)
+      delete (el as HTMLElement & { [BTN_LOADING_KEY]?: BtnLoadingBindingMeta })[BTN_LOADING_KEY]
+    }
+
+    const session = findSessionForHost(host)
+    if (!session) return
+
+    if (session.closeRequested) {
+      releaseSession(session)
+      return
+    }
+
+    stopClassGuard(session)
+    hostToSessionId.delete(host)
+  },
+}

package/gen-ai/common/directives/debounce.ts

@@ -0,0 +1,98 @@
+import type { Directive, DirectiveBinding } from 'vue'
+
+const DEBOUNCE_KEY = Symbol('vAiDebounce')
+
+/** 默认防重间隔 2s；v-aiDebounce:800 自定义毫秒 */
+const DEFAULT_WAIT_MS = 2000
+const DEFAULT_EVENT = 'click'
+
+export type DebounceHandler = (event: Event) => unknown
+export type DebounceBindingValue = DebounceHandler | undefined
+export type DebounceDirective = Directive<HTMLElement, DebounceBindingValue>
+export type DebounceDirectiveBinding = DirectiveBinding<DebounceBindingValue>
+
+interface DebounceBindingMeta {
+  listener: (event: Event) => void
+  event: string
+  binding: DebounceDirectiveBinding
+}
+
+function resolveButtonHost(el: HTMLElement): HTMLElement {
+  if (el.tagName === 'BUTTON') return el
+  const nested = el.querySelector<HTMLElement>('button.el-button')
+  return nested ?? el
+}
+
+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
+}
+
+/**
+ * v-aiDebounce — 纯点击防重，与 loading 解耦
+ * - v-aiDebounce @click="fn"           默认 2s
+ * - v-aiDebounce:800 @click="fn"       自定义间隔
+ * - v-aiDebounce:800="fn"              绑定 handler（拦截原生 @click）
+ */
+export const vAiDebounce: DebounceDirective = {
+  mounted(el: HTMLElement, binding: DebounceDirectiveBinding) {
+    const host = resolveButtonHost(el)
+    let locked = false
+
+    const listener = (e: Event) => {
+      const meta = (host as HTMLElement & { [DEBOUNCE_KEY]?: DebounceBindingMeta })[DEBOUNCE_KEY]
+      const currentBinding = meta?.binding ?? binding
+      const wait = resolveWait(currentBinding.arg)
+      const handler =
+        typeof currentBinding.value === 'function' ? currentBinding.value : undefined
+
+      if (locked) {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+        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 = resolveEvent(binding.arg)
+    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
+  },
+  unmounted(el: HTMLElement) {
+    const host = resolveButtonHost(el)
+    const meta = (host as HTMLElement & { [DEBOUNCE_KEY]?: DebounceBindingMeta })[DEBOUNCE_KEY]
+    if (!meta) return
+    host.removeEventListener(meta.event, meta.listener, true)
+    delete (host as HTMLElement & { [DEBOUNCE_KEY]?: DebounceBindingMeta })[DEBOUNCE_KEY]
+  },
+}

package/gen-ai/common/directives/index.ts

@@ -0,0 +1,30 @@
+import type { App, Directive } from 'vue'
+import { closeAiBtnLoading, vAiBtnLoading } from './btnLoading'
+import { vAiDebounce } from './debounce'
+
+/** GEN-AI 自定义指令（与全局 v-debounce / v-btnLoading 区分命名） */
+const directiveRegistry: ReadonlyArray<{
+  name: string
+  directive: Directive
+}> = [
+  { name: 'aiDebounce', directive: vAiDebounce as Directive },
+  { name: 'aiBtnLoading', directive: vAiBtnLoading },
+]
+
+export function registerGenAiDirectives(app: App) {
+  directiveRegistry.forEach(({ name, directive }) => {
+    app.directive(name, directive)
+  })
+
+  app.config.globalProperties.closeAiBtnLoading = closeAiBtnLoading
+  ;(globalThis as typeof globalThis & { closeAiBtnLoading: typeof closeAiBtnLoading }).closeAiBtnLoading =
+    closeAiBtnLoading
+}
+
+export {
+  vAiDebounce,
+  type DebounceBindingValue,
+  type DebounceDirective,
+  type DebounceHandler,
+} from './debounce'
+export { vAiBtnLoading, closeAiBtnLoading, hasActiveAiBtnLoading } from './btnLoading'