page spy 离线模式

src/utils/commons.js

@@ -576,23 +576,44 @@ export const TagColorStyle = (tag, outerStyle = false) => {
  *
  */
 export const logWebsocket = (message, direction) => {
-  var open = indexedDB.open("LogWebsocketData", 1);
-
-  open.onupgradeneeded = function() {
-      var db = open.result;
-      var store = db.createObjectStore("LogStore", {keyPath: "id", autoIncrement: true});
-  };
-
-  open.onsuccess = function() {
-      var db = open.result;
-      var tx = db.transaction("LogStore", "readwrite");
-      var store = tx.objectStore("LogStore");
-
-      // Add a log
-      store.put({direction, message, date: (new Date()).toLocaleString(), });
-
-      tx.oncomplete = function() {
-          db.close();
-      };
+  var open = indexedDB.open('LogWebsocketData', 1)
+  open.onupgradeneeded = function () {
+    var db = open.result
+    var store = db.createObjectStore('LogStore', { keyPath: 'id', autoIncrement: true })
+  }
+  open.onsuccess = function () {
+    var db = open.result
+    var tx = db.transaction('LogStore', 'readwrite')
+    var store = tx.objectStore('LogStore')
+    store.put({ direction, message, date: new Date().toLocaleString() })
+    tx.oncomplete = function () {
+      db.close()
+    }
+  }
+};
+export const readWebsocketLog = () => {
+  let openRequest = indexedDB.open('LogWebsocketData')
+  openRequest.onsuccess = function (e) {
+    let db = e.target.result
+    let transaction = db.transaction('LogStore')
+    let store = transaction.objectStore('LogStore')
+    let request = store.getAll()
+    request.onsuccess = function (e) {
+      let data = e.target.result
+      console.log(data)
+    }
   }
 };
+export const clearWebsocketLog = () => {
+  let openRequest = indexedDB.open('LogWebsocketData')
+  openRequest.onerror = function (e) {}
+  openRequest.onsuccess = function (e) {
+    let db = e.target.result
+    let transaction = db.transaction('LogStore', 'readwrite')
+    let store = transaction.objectStore('LogStore')
+    // Clear the store
+    let clearRequest = store.clear()
+    clearRequest.onerror = function (e) {}
+    clearRequest.onsuccess = function (e) {}
+  }
+}

src/utils/pagespy.js

@@ -13,8 +13,8 @@ export const loadPageSpy = (title) => {
   Promise.all(PageSpySrc.map((src) => loadScript(src))).then(() => {
     // 注册插件
     PageSpy.registerPlugin(new DataHarborPlugin({ maximum: 10 * 1024 * 1024 }));
-    // PageSpy.registerPlugin(new RRWebPlugin());
+    PageSpy.registerPlugin(new RRWebPlugin());
     // 实例化 PageSpy
-    window.$pageSpy = new PageSpy({ api: 'page-spy.mycht.cn', project: 'Sales CRM', title: title + '(v' + BUILD_VERSION + ')', autoRender: false, offline: false, });
+    window.$pageSpy = new PageSpy({ api: 'page-spy.mycht.cn', project: 'Sales CRM', title: title + '(v' + BUILD_VERSION + ')', autoRender: false, offline: true, });
   });
 };

src/views/AuthApp.jsx

@@ -26,6 +26,7 @@ import '@/assets/App.css'
 import 'react-chat-elements/dist/main.css'
 import EmailFetch from './Conversations/Online/Components/EmailFetch'
 import FetchEmailWorker from './../workers/fetchEmailWorker?worker&url'
+import { clearWebsocketLog, readWebsocketLog } from '@/utils/commons'
 
 // const fetchEmailWorkerURL = new URL('/src/workers/fetchEmailWorker.js', import.meta.url);
 const fetchEmailWorker = new Worker(FetchEmailWorker, { type: 'module' });
@@ -95,9 +96,11 @@ function AuthApp() {
 
   const uploadLog = () => {
     sendNotify()
+    readWebsocketLog()
     if (window.$pageSpy) {
       window.$pageSpy.triggerPlugins('onOfflineLog', 'upload')
       messageApi.info('Success')
+      clearWebsocketLog()
     } else {
       messageApi.error('Failure')
     }