feat: 初步集成PageSpy，设置内增加上传离线日志按钮

jinmao88 · jinmao88 · commit b8182b6c3013 · 2024-11-06T12:14:50.000+08:00
diff --git a/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue b/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
@@ -14,7 +14,7 @@ import type { SegmentedItem } from '@vben-core/shadcn-ui';
 
 import { computed, ref } from 'vue';
 
-import { Copy, RotateCw } from '@vben/icons';
+import { CloudUpload, Copy, RotateCw } from '@vben/icons';
 import { $t, loadLocaleMessages } from '@vben/locales';
 import {
   clearPreferencesCache,
@@ -30,7 +30,7 @@ import {
 } from '@vben-core/shadcn-ui';
 import { globalShareState } from '@vben-core/shared/global-state';
 
-import { useClipboard } from '@vueuse/core';
+import { useClipboard, useThrottleFn } from '@vueuse/core';
 
 import {
   Animation,
@@ -217,6 +217,18 @@ async function handleReset() {
   resetPreferences();
   await loadLocaleMessages(preferences.app.locale);
 }
+const harbor = computed(() => window.$harbor);
+// 防抖
+const handleUploadLog = useThrottleFn(() => {
+  if (!harbor.value) {
+    return;
+  }
+  harbor.value.onOfflineLog('upload');
+  message.copyPreferencesSuccess?.(
+    $t('preferences.logUploadSuccessTitle'),
+    $t('preferences.logUploadSuccess'),
+  );
+}, 5000);
 </script>
 
 <template>
@@ -228,6 +240,13 @@ async function handleReset() {
     >
       <template #extra>
         <div class="flex items-center">
+          <VbenIconButton
+            :disabled="!harbor"
+            :tooltip="$t('preferences.logUpload')"
+            class="relative"
+          >
+            <CloudUpload class="size-4" @click="handleUploadLog" />
+          </VbenIconButton>
           <VbenIconButton
             :disabled="!diffPreference"
             :tooltip="$t('preferences.resetTip')"
diff --git a/packages/locales/src/langs/en-US/preferences.json b/packages/locales/src/langs/en-US/preferences.json
@@ -28,6 +28,9 @@
   "copyPreferencesSuccessTitle": "Copy successful",
   "copyPreferencesSuccess": "Copy successful, please override in `src/preferences.ts` under app",
   "clearAndLogout": "Clear Cache & Logout",
+  "logUpload": "Upload Log",
+  "logUploadSuccess": "Log Upload Successful",
+  "logUploadSuccessTitle": "Upload Successful",
   "mode": "Mode",
   "general": "General",
   "language": "Language",
diff --git a/packages/locales/src/langs/zh-CN/preferences.json b/packages/locales/src/langs/zh-CN/preferences.json
@@ -28,6 +28,9 @@
   "copyPreferencesSuccessTitle": "复制成功",
   "copyPreferencesSuccess": "复制成功，请在 app 下的 `src/preferences.ts`内进行覆盖",
   "clearAndLogout": "清空缓存 & 退出登录",
+  "logUpload": "上传日志",
+  "logUploadSuccess": "离线日志上传成功",
+  "logUploadSuccessTitle": "上传成功",
   "mode": "模式",
   "general": "通用",
   "language": "语言",
diff --git a/playground/index.html b/playground/index.html
@@ -27,6 +27,35 @@
         })();
       }
     </script>
+    <!-- 可以使用自己的部署的PageSpy的sdk 修改引入的地址即可 -->
+    <!--  https://pagespy.mufei88.com 为vben测试sdk地址 -->
+    <script
+      crossorigin="anonymous"
+      src="https://pagespy.mufei88.com/page-spy/index.min.js"
+    ></script>
+    <script
+      crossorigin="anonymous"
+      src="https://pagespy.mufei88.com/plugin/data-harbor/index.min.js"
+    ></script>
+    <script
+      crossorigin="anonymous"
+      src="https://pagespy.mufei88.com/plugin/rrweb/index.min.js"
+    ></script>
+    <script>
+      window.$harbor = new DataHarborPlugin();
+      window.$rrweb = new RRWebPlugin();
+
+      [window.$harbor, window.$rrweb].forEach((p) => {
+        PageSpy.registerPlugin(p);
+      });
+      // 实例化的参数都是可选的
+      window.$pageSpy = new PageSpy({
+        project: '<%= VITE_APP_TITLE %>',
+        autoRender: false,
+        title: 'Vben Admin',
+      });
+      // 之后即可使用 PageSpy，前往 https://pagespy.mufei88.com 体验
+    </script>
   </head>
   <body>
     <div id="app"></div>
