mirror of
https://github.com/ZeroCatDev/Classworks.git
synced 2025-12-08 13:49:37 +00:00
feat: 异步加载 Clarity,优化初始加载速度并集成访客标识功能
This commit is contained in:
parent
5c111e198d
commit
4988199c35
10
src/App.vue
10
src/App.vue
@ -16,21 +16,13 @@ import { onMounted } from "vue";
|
|||||||
import { useTheme } from "vuetify";
|
import { useTheme } from "vuetify";
|
||||||
import { getSetting } from "@/utils/settings";
|
import { getSetting } from "@/utils/settings";
|
||||||
import RateLimitModal from "@/components/RateLimitModal.vue";
|
import RateLimitModal from "@/components/RateLimitModal.vue";
|
||||||
import Clarity from "@microsoft/clarity";
|
|
||||||
import { getVisitorId } from "@/utils/fingerprint";
|
|
||||||
|
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(() => {
|
||||||
// 应用保存的主题设置
|
// 应用保存的主题设置
|
||||||
const savedTheme = getSetting("theme.mode");
|
const savedTheme = getSetting("theme.mode");
|
||||||
theme.global.name.value = savedTheme;
|
theme.global.name.value = savedTheme;
|
||||||
|
|
||||||
const visitorId = await getVisitorId();
|
|
||||||
console.log("Visitor ID:", visitorId);
|
|
||||||
// Clarity 标识(保留在 App 层)
|
|
||||||
Clarity.identify(visitorId);
|
|
||||||
Clarity.setTag("fingerprintjs", visitorId);
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
30
src/main.js
30
src/main.js
@ -16,15 +16,12 @@ import GlobalMessage from '@/components/GlobalMessage.vue'
|
|||||||
|
|
||||||
// Composables
|
// Composables
|
||||||
import {createApp} from 'vue'
|
import {createApp} from 'vue'
|
||||||
import Clarity from '@microsoft/clarity';
|
|
||||||
|
|
||||||
const projectId = "rhp8uqoc3l"
|
|
||||||
//import TDesign from 'tdesign-vue-next'
|
//import TDesign from 'tdesign-vue-next'
|
||||||
//import 'tdesign-vue-next/es/style/index.css'
|
//import 'tdesign-vue-next/es/style/index.css'
|
||||||
//import '@examaware-cs/player/dist/player.css'
|
//import '@examaware-cs/player/dist/player.css'
|
||||||
|
|
||||||
Clarity.init(projectId);
|
|
||||||
import messageService from './utils/message';
|
import messageService from './utils/message';
|
||||||
|
import { getVisitorId } from './utils/fingerprint';
|
||||||
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
||||||
@ -37,7 +34,30 @@ app.component('GlobalMessage', GlobalMessage)
|
|||||||
|
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
|
||||||
// 移除首屏 CSS 加载覆盖层(在 Vue 挂载完成后)
|
// 异步加载 Clarity 以提升初始加载速度
|
||||||
|
if (document.readyState === 'complete') {
|
||||||
|
loadClarity();
|
||||||
|
} else {
|
||||||
|
window.addEventListener('load', loadClarity, { once: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadClarity() {
|
||||||
|
try {
|
||||||
|
const Clarity = (await import('@microsoft/clarity')).default;
|
||||||
|
const projectId = "rhp8uqoc3l";
|
||||||
|
Clarity.init(projectId);
|
||||||
|
|
||||||
|
// 获取并设置访客标识
|
||||||
|
const visitorId = await getVisitorId();
|
||||||
|
console.log('Visitor ID:', visitorId);
|
||||||
|
Clarity.identify(visitorId);
|
||||||
|
Clarity.setTag('fingerprintjs', visitorId);
|
||||||
|
} catch (error) {
|
||||||
|
console.warn('Clarity 加载或标识设置失败:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 移除首屏 CSS 加载覆盖层(在 Vue 挂载完成后)
|
||||||
try {
|
try {
|
||||||
const removeLoader = () => {
|
const removeLoader = () => {
|
||||||
document.body.classList.add('app-loaded');
|
document.body.classList.add('app-loaded');
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user