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

1 year ago · b8182b6c30
4 changed files with 56 additions and 2 deletions
--- 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')"
--- 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",
--- 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": "语言",
--- 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>