github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-01-23 01:30:26 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
View File

@ -14,7 +14,7 @@ import type { SegmentedItem } from '@vben-core/shadcn-ui';
import { computed, ref } from 'vue'; 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 { $t, loadLocaleMessages } from '@vben/locales';
import { import {
clearPreferencesCache, clearPreferencesCache,
@ -30,7 +30,7 @@ import {
} from '@vben-core/shadcn-ui'; } from '@vben-core/shadcn-ui';
import { globalShareState } from '@vben-core/shared/global-state'; import { globalShareState } from '@vben-core/shared/global-state';
import { useClipboard } from '@vueuse/core'; import { useClipboard, useThrottleFn } from '@vueuse/core';
import { import {
Animation, Animation,
@ -217,6 +217,18 @@ async function handleReset() {
resetPreferences(); resetPreferences();
await loadLocaleMessages(preferences.app.locale); 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> </script>
<template> <template>
@ -228,6 +240,13 @@ async function handleReset() {
> >
<template #extra> <template #extra>
<div class="flex items-center"> <div class="flex items-center">
<VbenIconButton
:disabled="!harbor"
:tooltip="$t('preferences.logUpload')"
class="relative"
>
<CloudUpload class="size-4" @click="handleUploadLog" />
</VbenIconButton>
<VbenIconButton <VbenIconButton
:disabled="!diffPreference" :disabled="!diffPreference"
:tooltip="$t('preferences.resetTip')" :tooltip="$t('preferences.resetTip')"

3
packages/locales/src/langs/en-US/preferences.json
View File

@ -28,6 +28,9 @@
"copyPreferencesSuccessTitle": "Copy successful", "copyPreferencesSuccessTitle": "Copy successful",
"copyPreferencesSuccess": "Copy successful, please override in `src/preferences.ts` under app", "copyPreferencesSuccess": "Copy successful, please override in `src/preferences.ts` under app",
"clearAndLogout": "Clear Cache & Logout", "clearAndLogout": "Clear Cache & Logout",
"logUpload": "Upload Log",
"logUploadSuccess": "Log Upload Successful",
"logUploadSuccessTitle": "Upload Successful",
"mode": "Mode", "mode": "Mode",
"general": "General", "general": "General",
"language": "Language", "language": "Language",

3
packages/locales/src/langs/zh-CN/preferences.json
View File

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

29
playground/index.html
View File

@ -27,6 +27,35 @@
})(); })();
} }
</script> </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> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>