From 4988199c35170cb99363bb70fe3f4de5d90061c0 Mon Sep 17 00:00:00 2001
From: Sunwuyuan <sun@wuyuan.dev>
Date: Sun, 30 Nov 2025 17:10:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BC=82=E6=AD=A5=E5=8A=A0=E8=BD=BD=20?=
 =?UTF-8?q?Clarity=EF=BC=8C=E4=BC=98=E5=8C=96=E5=88=9D=E5=A7=8B=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E9=80=9F=E5=BA=A6=E5=B9=B6=E9=9B=86=E6=88=90=E8=AE=BF?=
 =?UTF-8?q?=E5=AE=A2=E6=A0=87=E8=AF=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 10 +---------
 src/main.js | 30 +++++++++++++++++++++++++-----
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b18ee95..fbf1bf6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,21 +16,13 @@ import { onMounted } from "vue";
 import { useTheme } from "vuetify";
 import { getSetting } from "@/utils/settings";
 import RateLimitModal from "@/components/RateLimitModal.vue";
-import Clarity from "@microsoft/clarity";
-import { getVisitorId } from "@/utils/fingerprint";
 
 const theme = useTheme();
 
-onMounted(async () => {
+onMounted(() => {
   // 应用保存的主题设置
   const savedTheme = getSetting("theme.mode");
   theme.global.name.value = savedTheme;
-
-  const visitorId = await getVisitorId();
-  console.log("Visitor ID:", visitorId);
-  // Clarity 标识（保留在 App 层）
-  Clarity.identify(visitorId);
-  Clarity.setTag("fingerprintjs", visitorId);
 });
 </script>
 <style>
diff --git a/src/main.js b/src/main.js
index e70fa78..dcc2185 100644
--- a/src/main.js
+++ b/src/main.js
@@ -16,15 +16,12 @@ import GlobalMessage from '@/components/GlobalMessage.vue'
 
 // Composables
 import {createApp} from 'vue'
-import Clarity from '@microsoft/clarity';
-
-const projectId = "rhp8uqoc3l"
 //import TDesign from 'tdesign-vue-next'
 //import 'tdesign-vue-next/es/style/index.css'
 //import '@examaware-cs/player/dist/player.css'
 
-Clarity.init(projectId);
 import messageService from './utils/message';
+import { getVisitorId } from './utils/fingerprint';
 
 const app = createApp(App)
 
@@ -37,7 +34,30 @@ app.component('GlobalMessage', GlobalMessage)
 
 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 {
   const removeLoader = () => {
     document.body.classList.add('app-loaded');