@rxdrag/website-lib-react 0.0.3 → 0.0.6

package/package.json

@@ -1,10 +1,45 @@
 {
   "name": "@rxdrag/website-lib-react",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "type": "module",
+  "main": "dist/index.mjs",
   "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./index.ts"
+    },
+    "./ui": {
+      "types": "./src/ui.ts",
+      "default": "./ui.ts"
+    },
+    "./forms": {
+      "types": "./src/forms.ts",
+      "default": "./forms.ts"
+    },
+    "./media": {
+      "types": "./src/media.ts",
+      "default": "./media.ts"
+    },
+    "./richtext": {
+      "types": "./src/richtext.ts",
+      "default": "./richtext.ts"
+    },
+    "./video": {
+      "types": "./src/video.ts",
+      "default": "./video.ts"
+    }
+  },
   "files": [
-    "dist"
+    "dist",
+    "index.ts",
+    "ui.ts",
+    "forms.ts",
+    "media.ts",
+    "richtext.ts",
+    "video.ts",
+    "src"
   ],
   "keywords": [
     "react-component"
@@ -17,15 +52,15 @@
     "@types/react-dom": "^19.1.0",
     "eslint": "^9.39.2",
     "typescript": "^5",
-    "@rxdrag/tsconfig": "0.2.1",
-    "@rxdrag/eslint-config-custom": "0.2.13"
+    "@rxdrag/eslint-config-custom": "0.2.13",
+    "@rxdrag/tsconfig": "0.2.1"
   },
   "dependencies": {
     "@iconify/react": "^5.0.2",
     "clsx": "^2.1.0",
     "hls.js": "^1.6.13",
-    "@rxdrag/tiptap-preview": "0.0.3",
-    "@rxdrag/rxcms-models": "0.3.112"
+    "@rxdrag/rxcms-models": "0.3.115",
+    "@rxdrag/tiptap-preview": "0.0.3"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/richtext.ts

@@ -0,0 +1 @@
+export * from "./src/richtext";

package/src/components/Analytics/eventHandlers.ts

@@ -0,0 +1,173 @@
+// Analytics 事件处理函数
+import type { AnalyticsState, PageData } from './types';
+import { trackPageEvent, trackPageVisit } from './tracking';
+
+// 页面离开事件处理
+export function createPageLeaveHandler(
+  state: AnalyticsState,
+  pageData: PageData,
+  apiEndpoint: string,
+  debugLog: (...args: unknown[]) => void
+) {
+  return function handlePageLeave(eventSource?: string): void {
+    // 检查当前页面是否已经被跟踪离开
+    if (state.pageLeaveTracked) {
+      console.log(`Page leave already tracked, skipping (source: ${eventSource || 'unknown'})`);
+      return;
+    }
+
+    // 检查是否有页面访问记录，如果从来没有跟踪过任何页面则不发送离开事件
+    if (state.lastTrackTime === 0) {
+      console.log(`No page visit ever tracked, skipping page leave (source: ${eventSource || 'unknown'})`);
+      return;
+    }
+
+    console.log(`Page leaving, tracking pageLeave event (source: ${eventSource || 'unknown'})`);
+    state.pageLeaveTracked = true;
+    trackPageEvent("pageLeave", pageData, state, apiEndpoint, debugLog);
+  };
+}
+
+// Astro before-swap 事件处理
+export function createAstroBeforeSwapHandler(
+  handlePageLeave: (eventSource?: string) => void
+) {
+  return function handleAstroBeforeSwap(): void {
+    console.log("astro:before-swap triggered - page leaving");
+    handlePageLeave('astro:before-swap');
+  };
+}
+
+// Astro after-swap 事件处理
+export function createAstroAfterSwapHandler(
+  state: AnalyticsState,
+  pageData: PageData,
+  apiEndpoint: string,
+  debugLog: (...args: unknown[]) => void
+) {
+  return function handleAstroAfterSwap(): void {
+    console.log("astro:after-swap triggered");
+    state.isAstroEnvironment = true;
+
+    // 直接处理页面切换，不依赖 resetPageTracking
+    const newUrl = window.location.href;
+    if (newUrl !== state.currentPageUrl) {
+      console.log(
+        "URL changed in astro:after-swap from",
+        state.currentPageUrl,
+        "to",
+        newUrl
+      );
+
+      // 更新 referrer：页面切换时，referrer 是上一个页面
+      state.currentReferrer = state.currentPageUrl;
+      debugLog("Updated referrer to:", state.currentReferrer);
+
+      // 更新页面数据
+      // 更新页面状态
+      state.currentPageUrl = newUrl;
+      pageData.url = newUrl;
+      pageData.path = window.location.pathname;
+      pageData.start_time = Date.now();
+      state.pageLoadTime = Date.now();
+      state.isPageTracked = false; // 重置跟踪状态
+      // 注意：不重置 pageLeaveTracked，让它保持当前状态，避免影响离开事件
+      // 重置活跃时间追踪
+      state.activeTime = 0;
+      state.lastActiveTime = Date.now();
+      state.isPageVisible = !document.hidden;
+
+      // 直接发送统计
+      trackPageVisit(pageData, state, apiEndpoint, debugLog);
+      
+      // 新页面开始跟踪后，重置页面离开状态，为下次离开做准备
+      state.pageLeaveTracked = false;
+      
+      // 标记初始加载已处理，防止后续的初始加载事件重复处理
+      state.initialLoadHandled = true;
+    }
+  };
+}
+
+// 初始加载事件处理
+export function createInitialLoadHandler(
+  state: AnalyticsState,
+  pageData: PageData,
+  apiEndpoint: string,
+  debugLog: (...args: unknown[]) => void
+) {
+  return function handleInitialLoad(eventType: string): void {
+    console.log(
+      eventType + " triggered, isAstroEnvironment:",
+      state.isAstroEnvironment,
+      "initialLoadHandled:",
+      state.initialLoadHandled,
+      "isPageTracked:",
+      state.isPageTracked
+    );
+
+    // 如果初始加载已经处理过，跳过（可能是 astro:after-swap 已经处理了）
+    if (state.initialLoadHandled) {
+      console.log(`Skipping initial load - already handled (${eventType})`);
+      return;
+    }
+
+    // 如果页面已经被跟踪（可能是 astro:after-swap 已经处理了），跳过
+    if (state.isPageTracked) {
+      console.log(`Skipping initial load - page already tracked (${eventType})`);
+      return;
+    }
+
+    // 页面刷新或直接访问时，确保统计
+    state.initialLoadHandled = true;
+    console.log("Handling initial page load via", eventType);
+    trackPageVisit(pageData, state, apiEndpoint, debugLog);
+  };
+}
+
+// 页面可见性变化事件处理
+export function createVisibilityChangeHandler(state: AnalyticsState) {
+  return function handleVisibilityChange(): void {
+    const now = Date.now();
+
+    if (document.visibilityState === "visible") {
+      // 页面变为可见
+      console.log("Page became visible");
+      state.isPageVisible = true;
+      state.lastActiveTime = now;
+    } else {
+      // 页面变为隐藏
+      console.log("Page became hidden");
+      if (state.isPageVisible) {
+        // 更新活跃时间到隐藏前
+        state.activeTime += now - state.lastActiveTime;
+        console.log("Updated active time:", state.activeTime, "ms");
+      }
+      state.isPageVisible = false;
+    }
+  };
+}
+
+// 用户交互事件处理
+export function createUserInteractionHandler(state: AnalyticsState) {
+  return function handleUserInteraction(): void {
+    if (!state.isPageVisible || state.interactionThrottled) return;
+
+    const now = Date.now();
+    // 节流：最多每秒检查一次
+    if (now - state.lastInteractionTime < 1000) return;
+
+    state.lastInteractionTime = now;
+    state.interactionThrottled = true;
+
+    // 如果超过30秒没有交互，重置活跃时间计算
+    if (now - state.lastActiveTime > 30000) {
+      state.lastActiveTime = now;
+    }
+
+    // 解除节流
+    setTimeout(() => {
+      state.interactionThrottled = false;
+    }, 1000);
+  };
+}

package/src/components/Analytics/index.tsx

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+import type { AnalyticsProps } from './types';
+import AnalyticsSingleton from './singleton';
+
+export function Analytics({
+  apiEndpoint = "/api/track-visitor"
+}: AnalyticsProps) {
+  useEffect(() => {
+    // 获取单例实例并初始化
+    const analytics = AnalyticsSingleton.getInstance(apiEndpoint);
+    analytics.init();
+
+    // 组件卸载时不清理单例，让它继续工作
+    return () => {
+      // 不做任何清理，让单例继续工作
+    };
+  }, [apiEndpoint]);
+
+  // 组件不渲染任何可见内容
+  return null;
+}

package/src/components/Analytics/singleton.ts

@@ -0,0 +1,214 @@
+// Analytics 单例管理器
+import type { AnalyticsState, PageData } from './types';
+import { 
+  createDebugLogger, 
+  generateId, 
+  getVisitorId 
+} from './utils';
+import { trackPageEvent } from './tracking';
+
+class AnalyticsSingleton {
+  private static instance: AnalyticsSingleton | null = null;
+  private initialized = false;
+  private state: AnalyticsState;
+  private pageData: PageData;
+  private apiEndpoint: string;
+  private debugLog: (...args: any[]) => void;
+  private eventHandlers: Array<() => void> = [];
+
+  private constructor(apiEndpoint: string) {
+    this.apiEndpoint = apiEndpoint;
+    this.debugLog = createDebugLogger();
+    
+    // 初始化访客和会话信息
+    const visitorId = getVisitorId();
+    let sessionId = sessionStorage.getItem('session_id');
+    if (!sessionId) {
+      sessionId = generateId('s');
+      sessionStorage.setItem('session_id', sessionId);
+    }
+
+    // 页面信息
+    this.pageData = {
+      visitor_id: visitorId,
+      session_id: sessionId,
+      url: window.location.href,
+      path: window.location.pathname,
+      referrer: document.referrer || null,
+      user_agent: navigator.userAgent,
+      start_time: Date.now(),
+    };
+
+    // 状态管理
+    this.state = {
+      isPageTracked: false,
+      currentPageUrl: window.location.href,
+      pageLoadTime: Date.now(),
+      lastTrackTime: 0,
+      currentReferrer: document.referrer || null,
+      activeTime: 0,
+      lastActiveTime: Date.now(),
+      isPageVisible: !document.hidden,
+      requestQueue: [],
+      isRequestPending: false,
+      isAstroEnvironment: false,
+      pageLeaveTracked: false,
+      initialLoadHandled: false,
+      interactionThrottled: false,
+      lastInteractionTime: 0,
+    };
+
+  }
+
+  static getInstance(apiEndpoint = "/api/track-visitor"): AnalyticsSingleton {
+    if (!AnalyticsSingleton.instance) {
+      AnalyticsSingleton.instance = new AnalyticsSingleton(apiEndpoint);
+    }
+    return AnalyticsSingleton.instance;
+  }
+
+  static reset(): void {
+    if (AnalyticsSingleton.instance) {
+      AnalyticsSingleton.instance.cleanup();
+      AnalyticsSingleton.instance = null;
+    }
+  }
+
+  init(): void {
+    if (this.initialized) {
+      return;
+    }
+
+    this.initialized = true;
+    this.setupEventListeners();
+    this.handleInitialPageLoad();
+  }
+
+  private setupEventListeners(): void {
+    // 页面离开事件
+    const handlePageLeave = () => {
+      if (this.state.pageLeaveTracked || this.state.lastTrackTime === 0) {
+        return;
+      }
+
+      this.state.pageLeaveTracked = true;
+      trackPageEvent("pageLeave", this.pageData, this.state, this.apiEndpoint, this.debugLog);
+    };
+
+    // 页面离开事件监听器
+    const handleBeforeUnload = () => handlePageLeave();
+    const handlePageHide = () => handlePageLeave();
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    window.addEventListener('pagehide', handlePageHide);
+
+    // Astro 事件监听
+    const handleAstroBeforeSwap = () => {
+      handlePageLeave();
+    };
+
+    const handleAstroAfterSwap = () => {
+      this.state.isAstroEnvironment = true;
+
+      const newUrl = window.location.href;
+      if (newUrl !== this.state.currentPageUrl) {
+        // 更新 referrer：页面切换时，referrer 是上一个页面
+        this.state.currentReferrer = this.state.currentPageUrl;
+
+        // 更新页面状态
+        this.state.currentPageUrl = newUrl;
+        this.pageData.url = newUrl;
+        this.pageData.path = window.location.pathname;
+        this.pageData.start_time = Date.now();
+        this.state.pageLoadTime = Date.now();
+        this.state.isPageTracked = false;
+        this.state.pageLeaveTracked = false;
+        this.state.activeTime = 0;
+        this.state.lastActiveTime = Date.now();
+        this.state.isPageVisible = !document.hidden;
+
+        // 发送新页面统计
+        this.trackPageVisit();
+      }
+    };
+
+    document.addEventListener('astro:before-swap', handleAstroBeforeSwap);
+    document.addEventListener('astro:after-swap', handleAstroAfterSwap);
+
+    // 页面可见性变化
+    const handleVisibilityChange = () => {
+      const now = Date.now();
+      if (document.visibilityState === 'visible') {
+        this.state.isPageVisible = true;
+        this.state.lastActiveTime = now;
+      } else {
+        if (this.state.isPageVisible) {
+          this.state.activeTime += now - this.state.lastActiveTime;
+        }
+        this.state.isPageVisible = false;
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    // 用户交互事件
+    const handleUserInteraction = () => {
+      if (!this.state.isPageVisible || this.state.interactionThrottled) return;
+
+      const now = Date.now();
+      if (now - this.state.lastInteractionTime < 1000) return;
+
+      this.state.lastInteractionTime = now;
+      this.state.interactionThrottled = true;
+
+      if (now - this.state.lastActiveTime > 30000) {
+        this.state.lastActiveTime = now;
+      }
+
+      setTimeout(() => {
+        this.state.interactionThrottled = false;
+      }, 1000);
+    };
+
+    const interactionEvents = ['click', 'keydown', 'scroll'];
+    interactionEvents.forEach((event) => {
+      document.addEventListener(event, handleUserInteraction, {
+        passive: true,
+        capture: false,
+      });
+    });
+
+    // 保存事件处理器引用，用于清理
+    this.eventHandlers = [
+      () => window.removeEventListener('beforeunload', handleBeforeUnload),
+      () => window.removeEventListener('pagehide', handlePageHide),
+      () => document.removeEventListener('astro:before-swap', handleAstroBeforeSwap),
+      () => document.removeEventListener('astro:after-swap', handleAstroAfterSwap),
+      () => document.removeEventListener('visibilitychange', handleVisibilityChange),
+      ...interactionEvents.map(event => 
+        () => document.removeEventListener(event, handleUserInteraction)
+      )
+    ];
+  }
+
+  private handleInitialPageLoad(): void {
+    if (this.state.isPageTracked || this.state.initialLoadHandled) {
+      return;
+    }
+
+    this.state.initialLoadHandled = true;
+    this.trackPageVisit();
+  }
+
+  private trackPageVisit(): void {
+    trackPageEvent("pageView", this.pageData, this.state, this.apiEndpoint, this.debugLog);
+  }
+
+  cleanup(): void {
+    this.eventHandlers.forEach(cleanup => cleanup());
+    this.eventHandlers = [];
+    this.initialized = false;
+  }
+}
+
+export default AnalyticsSingleton;

package/src/components/Analytics/tracking.ts

@@ -0,0 +1,221 @@
+// Analytics 跟踪相关函数
+import type { AnalyticsState, PageData, TrackingData } from './types';
+import { 
+  getDeviceInfo, 
+  getPlatform, 
+  getBrowserLanguage, 
+  detectPageType,
+  getCookie 
+} from './utils';
+
+// 更新活跃时间
+export function updateActiveTime(state: AnalyticsState): void {
+  if (state.isPageVisible) {
+    const now = Date.now();
+    state.activeTime += now - state.lastActiveTime;
+    state.lastActiveTime = now;
+  }
+}
+
+// 重置页面跟踪（用于页面切换）
+export function resetPageTracking(state: AnalyticsState, pageData: PageData): void {
+  const newUrl = window.location.href;
+  // 只有当 URL 真正改变时才重置
+  if (newUrl !== state.currentPageUrl) {
+    state.currentPageUrl = newUrl;
+    pageData.start_time = Date.now();
+    state.pageLoadTime = Date.now();
+    state.isPageTracked = false;
+    // 重置活跃时间追踪
+    state.activeTime = 0;
+    state.lastActiveTime = Date.now();
+    state.isPageVisible = !document.hidden;
+  }
+}
+
+// 检查是否为真正的页面访问（简化版）
+export function isRealPageVisit(state: AnalyticsState): boolean {
+  const now = Date.now();
+
+  // 如果页面已经被跟踪过，则不是新访问
+  if (state.isPageTracked) {
+    return false;
+  }
+
+  // 检查是否在短时间内重复跟踪（全局防重复）
+  if (state.lastTrackTime > 0 && now - state.lastTrackTime < 1000) {
+    return false;
+  }
+
+  // 检查页面是否可见（避免在后台标签页中统计）
+  if (document.hidden || document.visibilityState === "hidden") {
+    return false;
+  }
+
+  return true;
+}
+
+// 处理队列中的下一个请求
+export function processQueue(state: AnalyticsState, apiEndpoint: string): void {
+  state.isRequestPending = false;
+
+  if (state.requestQueue.length > 0) {
+    const { data, eventType } = state.requestQueue.shift()!;
+    // 小延迟避免请求过于频繁
+    setTimeout(() => {
+      sendImmediately(data, eventType, state, apiEndpoint);
+    }, 100);
+  }
+}
+
+// 立即发送数据
+export function sendImmediately(
+  data: TrackingData, 
+  eventType: string, 
+  state: AnalyticsState, 
+  apiEndpoint: string
+): void {
+  state.isRequestPending = true;
+
+  fetch(apiEndpoint, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "X-Requested-With": "XMLHttpRequest",
+    },
+    body: JSON.stringify(data),
+    keepalive: true,
+  })
+    .then(() => {
+      if (eventType === "pageView") {
+        state.isPageTracked = true;
+        state.lastTrackTime = Date.now();
+        
+        // 更新全局状态（用于跨组件实例共享）
+        if (typeof window !== 'undefined') {
+          (window as any).__analyticsGlobalState = {
+            lastPageUrl: window.location.href,
+            lastTrackTime: Date.now(),
+          };
+        }
+      }
+
+      // 处理队列中的下一个请求
+      processQueue(state, apiEndpoint);
+    })
+    .catch(() => {
+      processQueue(state, apiEndpoint);
+    });
+}
+
+// 优化的网络请求函数
+export function sendTrackingData(
+  data: TrackingData, 
+  eventType: string, 
+  state: AnalyticsState, 
+  apiEndpoint: string
+): void {
+  // 对于 pageLeave 事件，立即发送（用户可能马上离开）
+  if (eventType === "pageLeave") {
+    sendImmediately(data, eventType, state, apiEndpoint);
+    return;
+  }
+
+  // 对于 pageView 事件，可以稍微延迟或批量处理
+  if (state.isRequestPending) {
+    // 如果有请求正在进行，加入队列
+    state.requestQueue.push({ data, eventType });
+    return;
+  }
+
+  sendImmediately(data, eventType, state, apiEndpoint);
+}
+
+// 创建跟踪数据
+export function createTrackingData(
+  pageData: PageData,
+  state: AnalyticsState,
+  eventType: string,
+  effectiveDuration: number
+): TrackingData {
+  return {
+    visitor_id: pageData.visitor_id,
+    session_id: pageData.session_id,
+    url: window.location.href,
+    path: window.location.pathname,
+    referrer: state.currentReferrer,
+    user_agent: pageData.user_agent,
+    duration_ms: effectiveDuration, // 使用活跃时间
+    timestamp: Date.now(),
+    type: eventType, // 添加事件类型
+    // 设备和平台信息
+    device: getDeviceInfo(),
+    platform: getPlatform(),
+    browser_language: getBrowserLanguage(),
+    // 页面信息
+    page_title: document.title || null,
+    // 屏幕信息
+    screen_width: screen.width,
+    screen_height: screen.height,
+    viewport_width: window.innerWidth,
+    viewport_height: window.innerHeight,
+    // 时区信息
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    // 是否新用户（简单判断：第一次访问该域名）
+    is_new_user:
+      !getCookie("visitor_id") ||
+      getCookie("visitor_id") === pageData.visitor_id,
+  };
+}
+
+// 发送访客数据（支持不同类型）
+export function trackPageEvent(
+  eventType: string,
+  pageData: PageData,
+  state: AnalyticsState,
+  apiEndpoint: string,
+  debugLog: (...args: any[]) => void
+): void {
+  // 对于 pageView 事件，检测页面类型
+  if (eventType === "pageView") {
+    eventType = detectPageType(eventType);
+    debugLog("Detected page type:", eventType);
+
+    // 检查是否为真正的页面访问
+    if (!isRealPageVisit(state)) {
+      return;
+    }
+  }
+
+  // 计算活跃时间
+  let effectiveDuration = 0;
+  if (eventType === "pageLeave") {
+    updateActiveTime(state); // 更新到当前时间
+    effectiveDuration = state.activeTime;
+  }
+
+  debugLog("Using referrer:", state.currentReferrer, "for event:", eventType);
+
+  const data = createTrackingData(pageData, state, eventType, effectiveDuration);
+
+  // 优化的网络请求处理
+  sendTrackingData(data, eventType, state, apiEndpoint);
+}
+
+// 兼容性函数，保持向后兼容
+export function trackPageVisit(
+  pageData: PageData,
+  state: AnalyticsState,
+  apiEndpoint: string,
+  debugLog: (...args: any[]) => void
+): void {
+  // 检查是否在短时间内（200ms）重复调用同一个 URL 的 pageView
+  const currentUrl = window.location.href;
+  const now = Date.now();
+  
+  if (state.isPageTracked && state.currentPageUrl === currentUrl && now - state.lastTrackTime < 200) {
+    return;
+  }
+  
+  trackPageEvent("pageView", pageData, state, apiEndpoint, debugLog);
+}