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

This commit is contained in:
jinmao 2024-11-06 12:14:50 +08:00
parent 87e5b0522e
commit b8182b6c30
4 changed files with 56 additions and 2 deletions

View File

@ -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')"

View File

@ -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",

View File

@ -28,6 +28,9 @@
"copyPreferencesSuccessTitle": "复制成功",
"copyPreferencesSuccess": "复制成功,请在 app 下的 `src/preferences.ts`内进行覆盖",
"clearAndLogout": "清空缓存 & 退出登录",
"logUpload": "上传日志",
"logUploadSuccess": "离线日志上传成功",
"logUploadSuccessTitle": "上传成功",
"mode": "模式",
"general": "通用",
"language": "语言",

View File

@ -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>