[feature] add log directive

src/iframe/publish.js

@@ -3,7 +3,9 @@ import App from '@/view/iframe/publish/publish.vue'
 
 import "ant-design-vue/dist/antd.css"; // or 'ant-design-vue/dist/antd.less'
 
-import {Button,message,Tooltip, Switch} from "ant-design-vue";
+import { Button, message, Tooltip, Switch } from "ant-design-vue";
+
+import AutoLog from '@/log-center/autoLog';
 
 message.config({
     top: `10px`,
@@ -17,7 +19,10 @@ app.use(Button);
 app.use(Tooltip);
 app.use(message);
 app.use(Switch);
+app.use(AutoLog);
+
 
 import CoutomSentry from "@/uilts/sentry.js"
 CoutomSentry.initVue(app)
 app.mount('#app');
+

src/log-center/autoLog/click.js

@@ -0,0 +1,30 @@
+// 点击埋点自定义属性
+
+import { reportLog } from '../logger';
+import { getTargetElementWhenClick } from '@/uilts/help';
+
+let clickDataMap = new Map();
+
+const clickHandle = (e) => { 
+    console.log(e)
+    const target = getTargetElementWhenClick(e);
+    const logData = clickDataMap.get(target?.denetClickLogkey);
+    return  logData && reportLog({
+        ...logData
+    })
+}
+
+const clickLog =  {
+    mounted: (el, binding) => { 
+        const { value } = binding;
+        el.denetClickLogkey = el.denetClickLogkey || Math.random().toString(36).slice(-6);
+        clickDataMap.set(el.denetClickLogkey, value);
+        el.addEventListener('click', clickHandle,true)
+    },
+    unmounted(el) { 
+        // remove EventListener
+        el.removeEventListener('click', clickHandle, true)
+    }
+}
+
+export default clickLog;

src/log-center/autoLog/index.js

@@ -0,0 +1,23 @@
+// 埋点插件
+
+import { showReportDialog } from '@sentry/vue';
+import clickLog from './click';
+import ShowLogObserver from './show';
+
+const AutoLog = {};
+
+AutoLog.install = (app) => { 
+    app.directive('click-log', clickLog);
+    app.directive('show-log', {
+        mounted(el, binding) {
+            // 加载阶段设置随机key标记当前元素
+            el.denetShowLogkey = el.denetShowLogkey || Math.random().toString(36).slice(-6);
+            ShowLogObserver.add(el, binding);
+        },
+        unmounted(el) {
+            ShowLogObserver.remove(el);
+        },
+    });
+}
+
+export default AutoLog;

src/log-center/autoLog/show.js

@@ -0,0 +1,48 @@
+import { reportLog } from '../logger';
+import { getActiveKeyAfterClick } from '@/uilts/help';
+
+// 每个窗口共享一个Observer实例
+class ShowLogObserver { 
+    constructor() { 
+        this._observe = null;
+        this.showLogMap = new Map();
+        this.init();
+    }
+
+    init() {
+        this._observe = new IntersectionObserver((entries, observer) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    this.report(entry);
+                    // logOnce  ===  '1' &&  曝光之后取消观察
+                    if (entry?.target?.getAttribute('logOnce') === '1') { 
+                        this.remove(entry.target);
+                    }
+                }
+            })
+        }, {
+            root: null,
+            rootMargin: '0px',
+            threshold: 1
+        })
+    }
+
+    remove(el) { 
+        this._observe.unobserve(el);
+        this.showLogMap.delete(el.denetShowLogkey);
+    }
+
+    add(el, binding) { 
+        this._observe.observe(el);
+        this.showLogMap.set(el.denetShowLogkey, binding.value)
+    }
+
+    report(el) { 
+        const logData = this.showLogMap.get(el?.target?.denetShowLogkey);
+        return  logData && reportLog({
+            ...logData
+        })
+    }
+}
+
+export default new ShowLogObserver();

src/uilts/help.js

@@ -98,6 +98,15 @@ export function getBit(value) {
   }
 }
 
+export function getTargetElementWhenClick(e) { 
+  const { target, path } = e;
+  let result = null;
+  if (Array.isArray(path) && path.length > 0) { 
+    result = path.find((item) => item.denetClickLogkey)
+  }
+  return result
+}
+
 export function getCookie(name) {
   var strcookie = document.cookie;//获取cookie字符串
   var arrcookie = strcookie.split("; ");//分割