12.4 概念模块功能完善

src/composables/useAnalytics.js

@@ -0,0 +1,106 @@
+import { inject, onMounted, onUnmounted, getCurrentInstance } from 'vue'
+import analytics from '@/utils/posthog/index'
+import { EVENTS } from '@/constants/events'
+
+/**
+ * PostHog Analytics 组合式函数
+ *
+ * 使用方式：
+ * const { track, identify, trackPageView } = useAnalytics()
+ */
+export function useAnalytics() {
+  // 获取注入的实例（如果通过插件安装）
+  const injectedAnalytics = inject('analytics', analytics)
+
+  /**
+   * 追踪事件
+   */
+  const track = (eventName, properties = {}) => {
+    return injectedAnalytics.track(eventName, properties)
+  }
+
+  /**
+   * 用户标识
+   */
+  const identify = (userId, userProperties = {}) => {
+    return injectedAnalytics.identify(userId, userProperties)
+  }
+
+  /**
+   * 重置用户
+   */
+  const reset = () => {
+    return injectedAnalytics.reset()
+  }
+
+  /**
+   * 追踪页面浏览
+   */
+  const trackPageView = (pagePath, pageTitle = '', properties = {}) => {
+    return injectedAnalytics.trackPageView(pagePath, pageTitle, properties)
+  }
+
+  /**
+   * 追踪页面离开
+   */
+  const trackPageLeave = (pagePath, duration = 0, properties = {}) => {
+    return injectedAnalytics.trackPageLeave(pagePath, duration, properties)
+  }
+
+  /**
+   * 设置全局属性
+   */
+  const setSuperProperties = (properties) => {
+    return injectedAnalytics.setSuperProperties(properties)
+  }
+
+  /**
+   * 设置用户属性
+   */
+  const setUserProperties = (properties) => {
+    return injectedAnalytics.setUserProperties(properties)
+  }
+
+  /**
+   * 刷新事件队列
+   */
+  const flush = () => {
+    return injectedAnalytics.flush()
+  }
+
+  /**
+   * 获取当前用户ID
+   */
+  const getDistinctId = () => {
+    return injectedAnalytics.getDistinctId()
+  }
+
+  /**
+   * 获取会话ID
+   */
+  const getSessionId = () => {
+    return injectedAnalytics.getSessionId()
+  }
+
+  return {
+    // 核心方法
+    track,
+    identify,
+    reset,
+    trackPageView,
+    trackPageLeave,
+    setSuperProperties,
+    setUserProperties,
+    flush,
+    getDistinctId,
+    getSessionId,
+
+    // 事件常量
+    EVENTS,
+
+    // 原始实例（高级用途）
+    analytics: injectedAnalytics,
+  }
+}
+
+export default useAnalytics

src/composables/usePageTracking.js

@@ -0,0 +1,102 @@
+import { ref, onMounted, onUnmounted, inject } from 'vue'
+import pageTracker from '@/utils/posthog/page-tracker'
+import performanceTracker from '@/utils/posthog/performance-tracker'
+
+/**
+ * 页面追踪组合式函数
+ * 自动处理页面浏览、停留时长、滚动等
+ *
+ * 使用方式：
+ * const { onScroll, onRefresh, onLoadMore } = usePageTracking({
+ *   pagePath: '/pages/news/list',
+ *   pageTitle: '资讯列表',
+ * })
+ */
+export function usePageTracking(options = {}) {
+  const {
+    pagePath = '',
+    pageTitle = '',
+    pageQuery = {},
+    trackPerformance = true,
+  } = options
+
+  // 页面加载状态
+  const isLoaded = ref(false)
+  // 当前页码
+  const currentPage = ref(1)
+
+  // 页面进入
+  const onPageEnter = () => {
+    // 开始性能追踪
+    if (trackPerformance) {
+      performanceTracker.startPageLoad(pagePath)
+    }
+
+    // 页面浏览追踪
+    pageTracker.onPageEnter(pagePath, pageTitle, pageQuery)
+  }
+
+  // 页面加载完成
+  const onPageReady = () => {
+    isLoaded.value = true
+
+    // 结束性能追踪
+    if (trackPerformance) {
+      performanceTracker.endPageLoad(pagePath)
+    }
+  }
+
+  // 页面离开
+  const onPageLeave = () => {
+    pageTracker.onPageLeave()
+  }
+
+  // 页面滚动
+  const onScroll = (scrollInfo) => {
+    pageTracker.onPageScroll(scrollInfo)
+  }
+
+  // 下拉刷新
+  const onRefresh = () => {
+    pageTracker.onPullDownRefresh()
+    currentPage.value = 1
+  }
+
+  // 加载更多
+  const onLoadMore = () => {
+    currentPage.value++
+    pageTracker.onReachBottom(currentPage.value)
+  }
+
+  // 设置页面高度
+  const setPageHeight = (height) => {
+    pageTracker.setPageHeight(height)
+  }
+
+  // 获取停留时长
+  const getDuration = () => {
+    return pageTracker.getDuration()
+  }
+
+  return {
+    // 状态
+    isLoaded,
+    currentPage,
+
+    // 生命周期方法
+    onPageEnter,
+    onPageReady,
+    onPageLeave,
+
+    // 事件处理
+    onScroll,
+    onRefresh,
+    onLoadMore,
+
+    // 工具方法
+    setPageHeight,
+    getDuration,
+  }
+}
+
+export default usePageTracking

src/composables/useSearchTracking.js

@@ -0,0 +1,109 @@
+import { ref } from 'vue'
+import searchTracker from '@/utils/posthog/search-tracker'
+
+/**
+ * 搜索追踪组合式函数
+ *
+ * 使用方式：
+ * const {
+ *   onSearchFocus,
+ *   onSearch,
+ *   onSearchResult,
+ *   onResultClick,
+ * } = useSearchTracking()
+ */
+export function useSearchTracking() {
+  // 当前搜索关键词
+  const currentQuery = ref('')
+  // 搜索结果数量
+  const resultCount = ref(0)
+
+  /**
+   * 搜索框聚焦
+   */
+  const onSearchFocus = (pagePath = '') => {
+    searchTracker.onSearchFocus(pagePath)
+  }
+
+  /**
+   * 执行搜索
+   */
+  const onSearch = (params) => {
+    currentQuery.value = params.query || ''
+    searchTracker.onSearch(params)
+  }
+
+  /**
+   * 搜索结果返回
+   */
+  const onSearchResult = (result) => {
+    resultCount.value = result.total || result.list?.length || 0
+    searchTracker.onSearchResult(result)
+  }
+
+  /**
+   * 点击搜索结果
+   */
+  const onResultClick = (item, position) => {
+    searchTracker.onResultClick(item, position)
+  }
+
+  /**
+   * 点击搜索建议
+   */
+  const onSuggestionClick = (suggestion, position) => {
+    searchTracker.onSuggestionClick(suggestion, position)
+    currentQuery.value = suggestion
+  }
+
+  /**
+   * 点击热门搜索
+   */
+  const onHotSearchClick = (keyword, position) => {
+    searchTracker.onHotSearchClick(keyword, position)
+    currentQuery.value = keyword
+  }
+
+  /**
+   * 点击搜索历史
+   */
+  const onHistoryClick = (keyword, position) => {
+    searchTracker.onHistoryClick(keyword, position)
+    currentQuery.value = keyword
+  }
+
+  /**
+   * 清空搜索历史
+   */
+  const onHistoryClear = () => {
+    searchTracker.onHistoryClear()
+  }
+
+  /**
+   * 重置搜索状态
+   */
+  const reset = () => {
+    currentQuery.value = ''
+    resultCount.value = 0
+    searchTracker.reset()
+  }
+
+  return {
+    // 状态
+    currentQuery,
+    resultCount,
+
+    // 方法
+    onSearchFocus,
+    onSearch,
+    onSearchResult,
+    onResultClick,
+    onSuggestionClick,
+    onHotSearchClick,
+    onHistoryClick,
+    onHistoryClear,
+    reset,
+  }
+}
+
+export default useSearchTracking

src/composables/useUserTracking.js

@@ -0,0 +1,102 @@
+import { ref, computed } from 'vue'
+import userTracker from '@/utils/posthog/user-tracker'
+import analytics from '@/utils/posthog/index'
+
+/**
+ * 用户追踪组合式函数
+ *
+ * 使用方式：
+ * const {
+ *   isLoggedIn,
+ *   onLogin,
+ *   onLogout,
+ *   onFavorite,
+ * } = useUserTracking()
+ */
+export function useUserTracking() {
+  // 登录状态
+  const isLoggedIn = ref(false)
+  // 用户ID
+  const userId = ref('')
+
+  /**
+   * 用户登录
+   */
+  const onLogin = (params) => {
+    userTracker.onLogin(params)
+
+    if (params.success) {
+      isLoggedIn.value = true
+      userId.value = params.userId
+    }
+  }
+
+  /**
+   * 用户登出
+   */
+  const onLogout = () => {
+    userTracker.onLogout()
+    isLoggedIn.value = false
+    userId.value = ''
+  }
+
+  /**
+   * 微信授权
+   */
+  const onWechatAuth = (params) => {
+    userTracker.onWechatAuth(params)
+  }
+
+  /**
+   * 内容收藏
+   */
+  const onFavorite = (content) => {
+    userTracker.onFavorite(content)
+  }
+
+  /**
+   * 取消收藏
+   */
+  const onUnfavorite = (content) => {
+    userTracker.onUnfavorite(content)
+  }
+
+  /**
+   * 内容分享
+   */
+  const onShare = (params) => {
+    userTracker.onShare(params)
+  }
+
+  /**
+   * 内容点赞
+   */
+  const onLike = (content, isLike = true) => {
+    userTracker.onLike(content, isLike)
+  }
+
+  /**
+   * 获取当前用户ID
+   */
+  const getDistinctId = () => {
+    return analytics.getDistinctId()
+  }
+
+  return {
+    // 状态
+    isLoggedIn,
+    userId,
+
+    // 方法
+    onLogin,
+    onLogout,
+    onWechatAuth,
+    onFavorite,
+    onUnfavorite,
+    onShare,
+    onLike,
+    getDistinctId,
+  }
+}
+
+export default useUserTracking