From 322faef3151da8aeb816f4aa4c60019411eea0e3 Mon Sep 17 00:00:00 2001
From: HuangSJ <huangpersimmonzzz@gmail.com>
Date: Mon, 30 Dec 2024 21:20:59 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E5=86=85?=
 =?UTF-8?q?=E7=BD=AE=E7=9A=84=E6=BB=9A=E5=8A=A8=E4=BA=8B=E4=BB=B6=EF=BC=8C?=
 =?UTF-8?q?=E4=B8=8A=E6=8A=A5=E9=95=BF=E9=A1=B5=E9=9D=A2=E7=9A=84=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E6=B7=B1=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/analytics/src/events/_keys.ts       |  1 +
 packages/analytics/src/events/page-scroll.ts | 39 ++++++++++++++++++++
 packages/analytics/test/main.ts              | 15 ++++++++
 packages/demo/src/view/TheText.vue           | 24 ++++++++++--
 4 files changed, 76 insertions(+), 3 deletions(-)
 create mode 100644 packages/analytics/src/events/page-scroll.ts

diff --git a/packages/analytics/src/events/_keys.ts b/packages/analytics/src/events/_keys.ts
index 5ca686b..ed4df7d 100644
--- a/packages/analytics/src/events/_keys.ts
+++ b/packages/analytics/src/events/_keys.ts
@@ -4,4 +4,5 @@ export const OpenEventKeys = {
   LCP: '$LCP',
   INP: '$INP',
   PageClick: '$PageClick',
+  PageScroll: '$PageScroll',
 };
diff --git a/packages/analytics/src/events/page-scroll.ts b/packages/analytics/src/events/page-scroll.ts
new file mode 100644
index 0000000..5368994
--- /dev/null
+++ b/packages/analytics/src/events/page-scroll.ts
@@ -0,0 +1,39 @@
+import { EventContent } from '../types';
+import { OpenEventKeys } from './_keys';
+
+function handleScroll() {
+  const scrollTop = window.scrollY; // 当前滚动位置
+  const windowHeight = window.innerHeight; // 窗口高度
+  const documentHeight = document.documentElement.scrollHeight; // 文档总高度
+
+  // 计算滚动深度百分比，保留两位小数
+  const scrollDepth = (((scrollTop + windowHeight) / documentHeight) * 100).toFixed(2);
+  return {
+    $url: window.location.href,
+    $scrollTop: scrollTop,
+    $windowHeight: windowHeight,
+    $documentHeight: documentHeight,
+    $scrollDepth: `${scrollDepth}%`,
+  };
+}
+
+export default {
+  event: OpenEventKeys.PageScroll,
+  collector: (onCollect: (data: EventContent, e: Event) => void, options?: { delay: Millisecond }) => {
+    const { delay = 800 } = options || {};
+    let debounceId = 0;
+    window.addEventListener(
+      'scroll',
+      (e) => {
+        clearTimeout(debounceId);
+        debounceId = globalThis.setTimeout(async () => {
+          const data = handleScroll();
+          onCollect?.(data, e);
+        }, delay);
+      },
+      {
+        capture: true,
+      }
+    );
+  },
+};
diff --git a/packages/analytics/test/main.ts b/packages/analytics/test/main.ts
index 2ccd9bc..0e1b765 100644
--- a/packages/analytics/test/main.ts
+++ b/packages/analytics/test/main.ts
@@ -58,6 +58,21 @@ oa.report(
   }
 );
 
+oa.report(
+  OpenEventKeys.PageScroll,
+  (e: Event) => {
+    return {
+      scrollDepth: '200%', // 覆盖默认值
+      isTrusted: e.isTrusted,
+    };
+  },
+  {
+    eventOptions: {
+      delay: 1000, // 指定点击防抖时间，不传默认800
+    },
+  }
+);
+
 btn1?.addEventListener('click', () => {
   // window.open('/');
   console.log('btn1 clicked');
diff --git a/packages/demo/src/view/TheText.vue b/packages/demo/src/view/TheText.vue
index 5254eee..b7bc8bf 100644
--- a/packages/demo/src/view/TheText.vue
+++ b/packages/demo/src/view/TheText.vue
@@ -1,6 +1,20 @@
 <script setup lang="ts">
-const list = ["display1", "display2", "display3", "display4", "h1", "h2", "h3", "text1", "text2", "tip1", "tip2"];
-const title = "Text";
+import { oa, OpenEventKeys } from '@/analytics';
+
+const list = ['display1', 'display2', 'display3', 'display4', 'h1', 'h2', 'h3', 'text1', 'text2', 'tip1', 'tip2'];
+const title = 'Text';
+
+oa.report(
+  OpenEventKeys.PageScroll,
+  (e: Event) => {
+    return {};
+  },
+  {
+    eventOptions: {
+      delay: 1000, // 指定点击防抖时间，不传默认800
+    },
+  }
+);
 </script>
 <template>
   <div class="page-demo">
@@ -8,4 +22,8 @@ const title = "Text";
     <div v-for="t in list" :key="t" :class="[`o-txt-${t}`]">{{ t }}</div>
   </div>
 </template>
-<style lang="scss"></style>
+<style lang="scss">
+.page-demo {
+  min-height: 2000px;
+}
+</style>
-- 
Gitee