visual-buried-point-platform-h5 1.3.4

package/src/utils/db.ts

@@ -0,0 +1,172 @@
+const dbName = "puvtrackdata";
+const storeName = "puvPath";
+let db = null;
+// 初始化indexedDB且检查浏览器是否支持indexedDB API
+export function initDB() {
+  if ('indexedDB' in window) {
+    openDB();
+  } else {
+    console.log("browser doesn't support a stable version of IndexedDB");
+  }
+}
+/**
+ * 打开数据库
+ */
+function openDB(version = 1) {
+  const indexedDB = window.indexedDB
+  const request = indexedDB.open(dbName, version)
+  request.onsuccess = function (event: any) {
+    db = event.target.result // 数据库对象
+    console.log('onsuccess');
+  }
+  request.onerror = () => {
+    console.log('onerror');
+  }
+  request.onupgradeneeded = function (event: any) {
+    // 数据库创建或升级的时候会触发
+    console.log('onupgradeneeded');
+    db = event.target.result // 数据库对象
+    if (!db.objectStoreNames.contains(storeName)) {
+      db.createObjectStore(storeName, { autoIncrement: true }) // 创建表
+    }
+  }
+}
+
+/**
+ * 新增数据
+ * @param data 
+ */
+export async function addData(data) {
+  // 事务对象 指定表格名称和操作模式（"只读"或"读写"）
+  if (db) {
+    db.transaction([storeName], 'readwrite')
+      .objectStore(storeName) // 仓库对象
+      .add(data)
+  }
+}
+
+/**
+ * 通过游标读取数据
+ * @returns 
+ */
+export function cursorGetData() {
+  if (db) {
+    const list = []
+    const store = db.transaction(storeName, 'readwrite') // 事务
+      .objectStore(storeName) // 仓库对象
+    const request = store.openCursor() // 指针对象
+    return new Promise((resolve, reject) => {
+      request.onsuccess = function (e) {
+        const cursor = e.target.result
+        if (cursor) {
+          // 必须要检查
+          list.push(cursor.value)
+          cursor.continue() // 遍历了存储对象中的所有内容
+        } else {
+          resolve(list)
+        }
+      }
+      request.onerror = function (e) {
+        reject(e)
+      }
+    })
+  }
+}
+
+/**
+ * 通过索引读取数据
+ * @param indexName 
+ * @param indexValue 
+ * @returns 
+ */
+export function getDataByIndex(indexName, indexValue) {
+  const store = db.transaction(storeName, 'readwrite').objectStore(storeName)
+  const request = store.index(indexName).get(indexValue)
+  return new Promise((resolve, reject) => {
+    request.onerror = function (e) {
+      reject(e)
+    }
+    request.onsuccess = function (e) {
+      resolve(e.target.result)
+    }
+  })
+}
+
+/**
+ * 通过索引和游标查询记录
+ * @param indexName 
+ * @param indexValue 
+ * @returns 
+ */
+export function cursorGetDataByIndex(indexName, indexValue) {
+  const list = []
+  const store = db.transaction(storeName, 'readwrite').objectStore(storeName) // 仓库对象
+  const request = store.index(indexName) // 索引对象
+    .openCursor(IDBKeyRange.only(indexValue)) // 指针对象
+  return new Promise((resolve, reject) => {
+    request.onsuccess = function (e) {
+      const cursor = e.target.result
+      if (cursor) {
+        list.push(cursor.value)
+        cursor.continue() // 遍历了存储对象中的所有内容
+      } else {
+        resolve(list)
+      }
+    }
+    request.onerror = function (ev) {
+      reject(ev)
+    }
+  })
+}
+
+/**
+ * 删除数据
+ * @param id 
+ * @returns 
+ */
+export function deleteDB(id) {
+  const request = db.transaction([storeName], 'readwrite').objectStore(storeName).delete(id)
+  return new Promise((resolve, reject) => {
+    request.onsuccess = function (ev) {
+      resolve(ev)
+    }
+
+    request.onerror = function (ev) {
+      resolve(ev)
+    }
+  })
+}
+
+/**
+   * 删除数据库
+   */
+export function deleteDBAll(dbName) {
+  console.log(dbName)
+  const deleteRequest = window.indexedDB.deleteDatabase(dbName)
+  return new Promise((resolve, reject) => {
+    deleteRequest.onerror = function (event) {
+      console.log('删除失败')
+    }
+    deleteRequest.onsuccess = function (event) {
+      console.log('删除成功')
+    }
+  })
+}
+
+/**
+   * 关闭数据库
+   */
+export function closeDB(db) {
+  if (db) db.close()
+}
+
+export default {
+  openDB,
+  addData,
+  cursorGetData,
+  getDataByIndex,
+  cursorGetDataByIndex,
+  deleteDB,
+  deleteDBAll,
+  closeDB
+}

package/src/utils/getXPath.ts

@@ -0,0 +1,166 @@
+import { Config } from "../config";
+
+/**
+ * 获取节点selector路径
+ * 由于业务系统存在动态ID 固路径查找沿当前元素向上查找到body
+ */
+export function getPathSelector(e) {
+  try {
+    if (Config.isOpenCSSHash) {
+      return getJSDOMPathOld(e);
+    }
+    return getJSSelector(e);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+//获取被点击元素路径方法
+export function getPath(e) {
+  // window.event ? (window.event.cancelBubble = true) : e.stopPropagation(); //  阻止冒泡
+  let domPath = Array(),
+    domPathStr: string = "";
+  let domText = ""; //元素文本
+  if (e.innerText) {
+    domText = e.innerText;
+  } else {
+    domText = e.nodeName.toLocaleLowerCase();
+  }
+  //判断是否存在ID
+  if (e.id) {
+    domPath.unshift("#" + e.id);
+  } else {
+    //循环匹配元素
+    while (e.nodeName.toLowerCase() !== "html") {
+      if (e.id) {
+        //判断是否存在ID
+        domPath.unshift(e.tagName.toLocaleLowerCase() + "#" + e.id);
+        break;
+      } else if (e.tagName.toLocaleLowerCase() == "body") {
+        //判断是否是BODY元素
+        domPath.unshift(e.tagName.toLocaleLowerCase());
+      } else {
+        //遍历获取元素顺序
+        for (let i = 0; i < e.parentNode.childElementCount; i++) {
+          if (e.parentNode.children[i] == e) {
+            domPath.unshift(e.tagName.toLocaleLowerCase());
+          }
+        }
+      }
+      e = e.parentNode;
+    }
+  }
+  return domPath.join(" > ");
+}
+
+// 重构获取DOM元素路径
+export function getXPath(elm) {
+  try {
+    const allNodes = document.getElementsByTagName("*");
+    const segs = [];
+
+    for (; elm && elm.nodeType === 1; elm = elm.parentNode) {
+      if (elm.nodeName.toLowerCase() !== "html") {
+        let i = 1;
+        for (let sib = elm.previousSibling; sib; sib = sib.previousSibling) {
+          if (sib.localName === elm.localName) i++;
+        }
+
+        if (i === 1) {
+          if (elm.nextElementSibling) {
+            if (elm.nextElementSibling.localName !== elm.localName) {
+              segs.unshift(elm.localName.toLowerCase());
+            } else {
+              segs.unshift(elm.localName.toLowerCase() + "[" + i + "]");
+            }
+          } else {
+            segs.unshift(elm.localName.toLowerCase());
+          }
+        } else {
+          segs.unshift(elm.localName.toLowerCase() + "[" + i + "]");
+        }
+      }
+    }
+    return segs.length ? "/" + segs.join("/") : null;
+  } catch (err) {
+    return null;
+  }
+}
+
+/**
+ * 
+ * @param element 原生JS获取元素在DOM中的路径
+ * @returns DOM路径
+ */
+export function getJSDOMPathOld(e) {
+  let domPath = Array();
+  //循环匹配元素
+  while (e.nodeName.toLowerCase() !== "html") {
+    if (e.tagName.toLocaleLowerCase() == "body") {
+      //判断是否是BODY元素
+      domPath.unshift(e.tagName.toLocaleLowerCase());
+    } else {
+      //遍历获取元素顺序
+      for (let i = 0; i < e.parentNode.childElementCount; i++) {
+        if (e.parentNode.children[i] == e) {
+          domPath.unshift(
+            e.tagName.toLocaleLowerCase() + ":nth-child(" + (i + 1) + ")"
+          );
+        }
+      }
+    }
+    e = e.parentNode;
+  }
+  return domPath.join(" > ");
+}
+
+/**
+ * 
+ * @param element 原生JS获取元素selector 
+ * @returns 
+ */
+export function getJSSelector(element) {
+  var path = [];
+  while (element !== document && element.parentNode) {
+    var selector = element.tagName.toLowerCase();
+    if (element.id) {
+      selector += '#' + element.id;
+    } else if (element.className) {
+      var classes = Array.from(element.classList).join('.');
+      selector += '.' + classes;
+    }
+    path.unshift(selector);
+    element = element.parentNode;
+  }
+  return path.join(" > ");
+}
+
+/**
+ * .circle-active 
+ * @param element 元素
+ * @returns copy selector 路径
+ */
+export function getCopySelector(element) {
+  const path = [];
+  let currentElement = element;
+  while (currentElement !== document.documentElement) {
+    const selector = currentElement.tagName.toLowerCase();
+    const className = currentElement.className.trim();
+    const id = currentElement.id.trim();
+    if (id) {
+      // 如果元素有id，则使用id选择器
+      path.unshift(`#${id}`);
+      break;
+    } else if (className) {
+      // 如果元素有class，则使用class选择器
+      path.unshift(`.${className.replace(/\s+/g, '.')}`);
+    } else {
+      // 否则使用标签选择器
+      path.unshift(selector);
+    }
+    currentElement = currentElement.parentNode;
+  }
+  let copySeletor: string = path.join(" > ");
+  console.log("copySeletor: ", copySeletor);
+  return copySeletor;
+}

package/src/utils/index.ts

@@ -0,0 +1,69 @@
+import { Config } from "../config";
+import { getLocationHref, randomString } from "./tools";
+import { GlobalVal } from "../config/global";
+import { CommonMsg } from "../typings";
+
+export function getCommonMsg() {
+  let u = (navigator as any).connection;
+  let data: CommonMsg = {
+    t: "",
+    page: getPage(),
+    times: 1,
+    v: Config.appVersion,
+    token: Config.token,
+    e: Config.environment,
+    timestamp: new Date().getTime(),
+    uid: getUid(),
+    sid: GlobalVal.sid,
+    screen_resolution: screen.width + "x" + screen.height,
+    view_resolution: getScreen(),
+    network: u ? u.effectiveType : "",
+    language: getLang(),
+    sdk_version: "{{VERSION}}",
+    original_url: getLocationHref(),
+  };
+  return data;
+}
+
+// 获取页面
+function getPage(): string {
+  if (GlobalVal.page) return GlobalVal.page;
+  else {
+    return location.pathname.toLowerCase();
+  }
+}
+
+// 获取uid
+function getUid(): string {
+  let uid = localStorage.getItem("bombay_uid") || "";
+  if (!uid) {
+    uid = randomString();
+    localStorage.setItem("bombay_uid", uid);
+  }
+  return uid;
+}
+
+// 获得sid
+// TODO: 单页面
+// function getSid() {
+//   const date = new Date();
+//   let sid = sessionStorage.getItem('bombay_sid') || '';
+//   if (!sid) {
+//       sid = randomString();
+//       sessionStorage.setItem('bombay_sid', sid);
+//   }
+//   return sid;
+// }
+
+// 获取浏览器默认语言
+function getLang() {
+  var lang = navigator.language || (navigator as any).userLanguage; //常规浏览器语言和IE浏览器
+  lang = lang.substr(0, 2); //截取lang前2位字符
+  return lang;
+}
+
+function getScreen() {
+  let w = document.documentElement.clientWidth || document.body.clientWidth;
+  let h = document.documentElement.clientHeight || document.body.clientHeight;
+  return w + "x" + h;
+}