@uxda/appkit 4.2.93 → 4.2.95

package/src/shared/tracking/directives/track-click.ts

@@ -0,0 +1,142 @@
+/**
+ * 埋点点击指令
+ * 支持自定义点击内容埋点
+ */
+
+import type { App, Directive } from 'vue'
+import { trackingSDK } from '../tracking-sdk'
+
+// 指令值类型
+interface TrackClickValue {
+  event?: string // 事件名称
+  data?: Record<string, unknown> // 自定义数据
+  elementId?: string // 元素ID
+  elementText?: string // 元素文本
+  preventDefault?: boolean // 是否阻止默认行为
+}
+
+/**
+ * 获取元素信息
+ */
+function getElementInfo(el: HTMLElement): { id?: string; className?: string; text?: string } {
+  return {
+    id: el.id,
+    className: el.className,
+    text: (el.textContent || el.innerText || '').trim(),
+  }
+}
+
+/**
+ * 获取点击位置
+ */
+function getClickPosition(event: Event): { x: number; y: number } {
+  const e = event as MouseEvent | TouchEvent
+  if ('touches' in e && e.touches.length > 0) {
+    return {
+      x: e.touches[0].clientX,
+      y: e.touches[0].clientY,
+    }
+  } else if ('clientX' in e) {
+    return {
+      x: e.clientX,
+      y: e.clientY,
+    }
+  }
+  return { x: 0, y: 0 }
+}
+
+/**
+ * 绑定点击事件
+ */
+function bindClickEvent(el: HTMLElement, binding: any) {
+  // 先移除旧的事件监听器（必须使用相同的参数）
+  const oldHandler = (el as any).__trackClickHandler
+  const oldOptions = (el as any).__trackClickOptions
+  if (oldHandler) {
+    el.removeEventListener('click', oldHandler, oldOptions)
+    delete (el as any).__trackClickHandler
+    delete (el as any).__trackClickOptions
+  }
+
+  const value = binding.value as TrackClickValue | string
+
+  // 处理字符串类型的值
+  const config: TrackClickValue = typeof value === 'string' ? { event: value } : value || {}
+
+  const { data = {}, elementId, elementText, preventDefault = false } = config
+
+  // 获取元素信息
+  const elementInfo = getElementInfo(el)
+  const finalElementId = elementId || elementInfo.id
+  const finalElementClass = elementInfo.className
+  const finalElementText = elementText || elementInfo.text
+
+  // 点击事件处理
+  const handleClick = (clickEvent: Event) => {
+    if (preventDefault) {
+      clickEvent.preventDefault()
+    }
+
+    // 获取点击位置
+    const position = getClickPosition(clickEvent)
+
+    // 发送点击埋点
+    trackingSDK.trackClick(finalElementId || finalElementClass, finalElementText)
+
+    // 发送自定义事件埋点
+    if (config.event && config.event !== 'click') {
+      trackingSDK.trackCustom(config.event, {
+        elementId: finalElementId || finalElementClass,
+        elementText: finalElementText,
+        position,
+        ...data,
+      })
+    }
+  }
+
+  // 事件监听器选项
+  const eventOptions = { capture: true, passive: !preventDefault }
+
+  // 绑定事件（使用捕获阶段，确保能捕获到事件）
+  el.addEventListener('click', handleClick, eventOptions)
+
+  // 存储事件处理函数和选项，用于卸载时移除
+  ;(el as any).__trackClickHandler = handleClick
+  ;(el as any).__trackClickOptions = eventOptions
+}
+
+/**
+ * 埋点点击指令实现
+ */
+const trackClickDirective: Directive = {
+  mounted(el: HTMLElement, binding) {
+    // 使用 nextTick 确保 DOM 完全渲染后再绑定
+    setTimeout(() => {
+      bindClickEvent(el, binding)
+    }, 0)
+  },
+
+  updated(el: HTMLElement, binding) {
+    bindClickEvent(el, binding)
+  },
+
+  unmounted(el: HTMLElement) {
+    // 移除事件监听器
+    const handler = (el as any).__trackClickHandler
+    const options = (el as any).__trackClickOptions
+    if (handler) {
+      el.removeEventListener('click', handler, options)
+      delete (el as any).__trackClickHandler
+      delete (el as any).__trackClickOptions
+    }
+  },
+}
+
+/**
+ * 安装埋点点击指令
+ */
+export function installTrackClickDirective(app: App) {
+  app.directive('track-click', trackClickDirective)
+}
+
+export default trackClickDirective

package/src/shared/tracking/directives/track-page.ts

@@ -0,0 +1,50 @@
+/**
+ * 埋点页面访问指令
+ * 支持页面访问埋点
+ */
+
+import type { App, Directive } from 'vue'
+import { trackingSDK } from '../tracking-sdk'
+
+// 指令值类型
+interface TrackPageValue {
+  pageTitle?: string // 页面标题
+  customData?: Record<string, unknown> // 自定义数据
+  trackStay?: boolean // 是否跟踪停留时间
+}
+
+/**
+ * 埋点页面访问指令实现
+ */
+const trackPageDirective: Directive = {
+  mounted(el: HTMLElement, binding) {
+    const value = binding.value as TrackPageValue | string
+
+    // 处理字符串类型的值
+    const config: TrackPageValue = typeof value === 'string' ? { pageTitle: value } : value || {}
+
+    const { pageTitle, customData = {}, trackStay = true } = config
+
+    // 记录页面访问
+    trackingSDK.trackPageView(pageTitle)
+
+    // 如果有自定义数据，发送自定义事件
+    if (Object.keys(customData).length > 0) {
+      trackingSDK.trackCustom('page_view_custom', customData)
+    }
+
+    // 如果启用停留时间跟踪，记录开始时间
+    if (trackStay) {
+      ;(el as any).__trackPageStartTime = Date.now()
+    }
+  },
+}
+
+/**
+ * 安装埋点页面访问指令
+ */
+export function installTrackPageDirective(app: App) {
+  app.directive('track-page', trackPageDirective)
+}
+
+export default trackPageDirective

package/src/shared/tracking/directives/track-scroll.ts

@@ -0,0 +1,116 @@
+/**
+ * 埋点滚动指令
+ * 支持滚动事件埋点
+ */
+
+import type { App, Directive } from 'vue'
+import { trackingSDK } from '../tracking-sdk'
+
+// 指令值类型
+interface TrackScrollValue {
+  threshold?: number // 滚动阈值（0-1）
+  data?: Record<string, unknown> // 自定义数据
+  trackDirection?: boolean // 是否跟踪滚动方向
+}
+
+/**
+ * 埋点滚动指令实现
+ */
+const trackScrollDirective: Directive = {
+  mounted(el: HTMLElement, binding) {
+    const value = binding.value as TrackScrollValue | boolean
+
+    // 处理布尔值或配置对象
+    const config: TrackScrollValue =
+      typeof value === 'boolean' ? { threshold: 0.5, trackDirection: value } : value || {}
+
+    const { threshold = 0.5, data = {}, trackDirection = false } = config
+
+    let hasTracked = false
+    let lastScrollTop = 0
+
+    const handleScroll = () => {
+      if (hasTracked) return
+
+      const rect = el.getBoundingClientRect()
+      const windowHeight = window.innerHeight
+      const elementTop = rect.top
+      const elementHeight = rect.height
+
+      // 计算元素可见比例
+      const visibleHeight = Math.min(elementHeight, windowHeight - Math.max(0, elementTop))
+      const visibleRatio = visibleHeight / elementHeight
+
+      if (visibleRatio >= threshold) {
+        hasTracked = true
+
+        // 获取滚动方向
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop
+        const scrollDirection = scrollTop > lastScrollTop ? 'down' : 'up'
+        lastScrollTop = scrollTop
+
+        trackingSDK.trackCustom('scroll_into_view', {
+          elementId: el.id,
+          visibleRatio,
+          scrollDirection: trackDirection ? scrollDirection : undefined,
+          scrollTop,
+          ...data,
+        })
+      }
+    }
+
+    // 使用 Intersection Observer 或 scroll 事件
+    if ('IntersectionObserver' in window) {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting && entry.intersectionRatio >= threshold) {
+              hasTracked = true
+              trackingSDK.trackCustom('scroll_into_view', {
+                elementId: el.id,
+                intersectionRatio: entry.intersectionRatio,
+                ...data,
+              })
+              observer.unobserve(el)
+            }
+          })
+        },
+        { threshold }
+      )
+
+      observer.observe(el)
+      ;(el as any).__scrollObserver = observer
+    } else {
+      // 降级到 scroll 事件
+      if (typeof window !== 'undefined') {
+        window.addEventListener('scroll', handleScroll, { passive: true })
+        ;(el as any).__scrollHandler = handleScroll
+      }
+    }
+  },
+
+  unmounted(el: HTMLElement) {
+    // 清理 Intersection Observer
+    const observer = (el as any).__scrollObserver
+    if (observer) {
+      observer.disconnect()
+      delete (el as any).__scrollObserver
+    }
+
+    // 清理 scroll 事件
+    const handler = (el as any).__scrollHandler
+    if (handler && typeof window !== 'undefined') {
+      window.removeEventListener('scroll', handler)
+      delete (el as any).__scrollHandler
+    }
+  },
+}
+
+/**
+ * 安装埋点滚动指令
+ */
+export function installTrackScrollDirective(app: App) {
+  app.directive('track-scroll', trackScrollDirective)
+}
+
+export default trackScrollDirective

package/src/shared/tracking/directives/track-search.ts

@@ -0,0 +1,179 @@
+/**
+ * 埋点搜索指令
+ * 支持搜索行为埋点
+ */
+
+import type { App, Directive } from 'vue'
+import { trackingSDK } from '../tracking-sdk'
+import { debounce } from 'lodash-es'
+
+// 指令值类型
+interface TrackSearchValue {
+  event?: string // 事件名称
+  data?: Record<string, unknown> // 自定义数据
+  elementId?: string // 元素ID
+  trackInput?: boolean // 是否跟踪输入事件
+  trackSubmit?: boolean // 是否跟踪提交事件
+  debounceTime?: number // 防抖时间（毫秒）
+  minLength?: number // 最小搜索长度
+}
+
+/**
+ * 获取搜索元素信息
+ */
+function getSearchElementInfo(el: HTMLElement): {
+  id?: string
+  className?: string
+  placeholder?: string
+} {
+  let placeholder
+  if ((el as HTMLInputElement).placeholder) {
+    placeholder = (el as HTMLInputElement).placeholder
+  } else if (el.querySelector('input')) {
+    placeholder = (el.querySelector('input') as HTMLInputElement).placeholder
+  }
+
+  return {
+    id: el.id,
+    className: el.className,
+    placeholder: placeholder || '',
+  }
+}
+
+/**
+ * 埋点搜索指令实现
+ */
+const trackSearchDirective: Directive = {
+  mounted(el: HTMLElement, binding) {
+    const value = binding.value as TrackSearchValue | string
+
+    // 处理字符串类型的值
+    const config: TrackSearchValue = typeof value === 'string' ? { event: value } : value || {}
+
+    const {
+      event = 'search',
+      data = {},
+      elementId,
+      trackInput = true,
+      trackSubmit = true,
+      debounceTime = 500,
+      minLength = 1,
+    } = config
+
+    // 获取元素信息
+    const elementInfo = getSearchElementInfo(el)
+    const finalElementId = elementId || elementInfo.id
+    const finalElementClass = elementInfo.className
+
+    // 输入事件处理
+    const handleInput = (event: Event) => {
+      const target = event.target as HTMLInputElement
+      const searchValue = target.value.trim()
+
+      // 检查最小长度
+      if (searchValue.length < minLength) {
+        return
+      }
+
+      // 发送搜索输入埋点
+      trackingSDK.trackCustom('search_input', {
+        elementId: finalElementId || finalElementClass,
+        searchValue,
+        searchLength: searchValue.length,
+        placeholder: elementInfo.placeholder,
+        ...data,
+      })
+    }
+
+    // 提交事件处理
+    const handleSubmit = (event: Event) => {
+      const target = event.target as HTMLInputElement
+      const searchValue = target.value.trim()
+
+      // 检查最小长度
+      if (searchValue.length < minLength) {
+        return
+      }
+
+      // 发送搜索提交埋点
+      trackingSDK.trackCustom('search_submit', {
+        elementId: finalElementId || finalElementClass,
+        searchValue,
+        searchLength: searchValue.length,
+        placeholder: elementInfo.placeholder,
+        ...data,
+      })
+    }
+
+    // 创建防抖的输入处理函数
+    const debouncedHandleInput = debounce(handleInput, debounceTime || 500)
+
+    // 绑定事件
+    if (trackInput) {
+      el.addEventListener('input', debouncedHandleInput, { passive: true })
+      ;(el as any).__trackSearchInputHandler = debouncedHandleInput
+    }
+
+    if (trackSubmit) {
+      el.addEventListener('keydown', (event: KeyboardEvent) => {
+        if (event.key === 'Enter') {
+          handleSubmit(event)
+        }
+      })
+      ;(el as any).__trackSearchSubmitHandler = handleSubmit
+    }
+
+    // 如果是表单元素，也监听表单提交
+    const form = el.closest('form')
+    if (form && trackSubmit) {
+      form.addEventListener('submit', handleSubmit)
+      ;(el as any).__trackSearchFormHandler = handleSubmit
+    }
+  },
+
+  updated(el: HTMLElement, binding) {
+    // 更新时重新绑定
+    const inputHandler = (el as any).__trackSearchInputHandler
+
+    if (inputHandler) {
+      el.removeEventListener('input', inputHandler)
+      delete (el as any).__trackSearchInputHandler
+
+      trackSearchDirective.mounted?.(el, binding)
+    }
+  },
+
+  unmounted(el: HTMLElement) {
+    // 移除事件监听器
+    const inputHandler = (el as any).__trackSearchInputHandler
+    const submitHandler = (el as any).__trackSearchSubmitHandler
+    const formHandler = (el as any).__trackSearchFormHandler
+
+    if (inputHandler) {
+      el.removeEventListener('input', inputHandler)
+      delete (el as any).__trackSearchInputHandler
+    }
+
+    if (submitHandler) {
+      el.removeEventListener('submit', submitHandler)
+      delete (el as any).__trackSearchSubmitHandler
+    }
+
+    if (formHandler) {
+      const form = el.closest('form')
+      if (form) {
+        form.removeEventListener('submit', formHandler)
+      }
+      delete (el as any).__trackSearchFormHandler
+    }
+  },
+}
+
+/**
+ * 安装埋点搜索指令
+ */
+export function installTrackSearchDirective(app: App) {
+  app.directive('track-search', trackSearchDirective)
+}
+
+export default trackSearchDirective