添加 debug 功能

package.json

@@ -26,6 +26,9 @@
     "ant-design-x-vue": "^1.3.2",
     "core-js": "^3.45.1",
     "eruda": "^3.4.3",
+    "eruda-features": "^2.1.0",
+    "eruda-monitor": "^1.1.2",
+    "eruda-timing": "^2.0.1",
     "markdown-it": "^14.1.0",
     "pinia": "^3.0.3",
     "pinia-plugin-persistedstate": "^4.5.0",

pnpm-lock.yaml

@@ -32,6 +32,15 @@ importers:
       eruda:
         specifier: ^3.4.3
         version: 3.4.3
+      eruda-features:
+        specifier: ^2.1.0
+        version: 2.1.0
+      eruda-monitor:
+        specifier: ^1.1.2
+        version: 1.1.2
+      eruda-timing:
+        specifier: ^2.0.1
+        version: 2.0.1
       markdown-it:
         specifier: ^14.1.0
         version: 14.1.0
@@ -1190,6 +1199,15 @@ packages:
   error-stack-parser-es@1.0.5:
     resolution: {integrity: sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==}
 
+  eruda-features@2.1.0:
+    resolution: {integrity: sha512-RKrI0GDZqeUGeRWPFodsIuxxCU9j0t1LqIe601cQ+ZLyxA4TH8VRRQWNZjvnT6O2XS7TnlXVh0xPD2eJTiXFzQ==}
+
+  eruda-monitor@1.1.2:
+    resolution: {integrity: sha512-mAwMp600gd+4HOnub6FbNmAqGNuadIQv03UyqCCPcpIBWjLj/62PRGr720lBJffQ5G6HKfRVanhslw6hfj+nbA==}
+
+  eruda-timing@2.0.1:
+    resolution: {integrity: sha512-68Cir2pjgw4kkamabhZMrn00uuGt9uTltAflzGQhr6yeG2nB+dRXFEn2whJGvwinBA9GKMpselsH529LNWKJIw==}
+
   eruda@3.4.3:
     resolution: {integrity: sha512-J2TsF4dXSspOXev5bJ6mljv0dRrxj21wklrDzbvPmYaEmVoC+2psylyRi70nUPFh1mTQfIBsSusUtAMZtUN+/w==}
 
@@ -3435,6 +3453,12 @@ snapshots:
 
   error-stack-parser-es@1.0.5: {}
 
+  eruda-features@2.1.0: {}
+
+  eruda-monitor@1.1.2: {}
+
+  eruda-timing@2.0.1: {}
+
   eruda@3.4.3: {}
 
   escalade@3.2.0: {}

src/loader/debug.ts

@@ -0,0 +1,19 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import { getURLSearchParams } from '@/tools';
+
+let loaded = false;
+export default async function debug(enabled = false) {
+  if (loaded) return;
+  if (enabled || getURLSearchParams().has('debug')) {
+    const { default: eruda } = await import('eruda');
+    const { default: erudaMonitor } = await import('eruda-monitor');
+    const { default: erudaFeatures } = await import('eruda-features');
+    const { default: erudaTiming } = await import('eruda-timing');
+    eruda.init();
+    eruda.add(erudaMonitor);
+    eruda.add(erudaFeatures);
+    eruda.add(erudaTiming);
+    loaded = true;
+  }
+}

src/loader/index.ts

@@ -1,8 +1,10 @@
 import { type Component, createApp } from 'vue';
 import router from '@/router';
 import pinia from '@/stores';
+import debug from './debug';
 
 export default async function loader(component: Component) {
+  await debug();
   const app = createApp(component);
   app.use(router);
   app.use(pinia);

src/modules/chat/components/Copyright.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useCounter } from '@vueuse/core';
+import debug from '@/loader/debug.ts';
+
+let timer: ReturnType<typeof setTimeout>;
+
+const { count, inc, reset } = useCounter();
+const handle = () => {
+  inc();
+  if (count.value >= 10) debug(true);
+  clearTimeout(timer);
+  timer = setTimeout(() => reset(0), 1000);
+};
+</script>
+
+<template>
+  <div class="copyright" @click="handle">杭州六智科技提供技术支持</div>
+</template>
+
+<style scoped lang="scss">
+.copyright {
+  padding: 8px 0 4px;
+  font-size: 12px;
+  text-align: center;
+  color: #999;
+  letter-spacing: 2px;
+}
+</style>

src/modules/chat/components/Messages.vue

@@ -3,6 +3,8 @@ import { useScroll } from '@vueuse/core';
 import { BubbleList } from 'ant-design-x-vue';
 import { useMessages } from '@/modules/chat/composables';
 
+import Copyright from './Copyright.vue';
+
 defineOptions({
   name: 'ChartMessages',
 });
@@ -31,7 +33,7 @@ const onClickMessage = (event: PointerEvent) => {
       <slot name="chat-footer">
         <component :is="sender"></component>
       </slot>
-      <div class="copyright">杭州六智科技提供技术支持</div>
+      <copyright />
     </footer>
   </div>
 </template>
@@ -85,12 +87,4 @@ $p: 12px;
     }
   }
 }
-
-.copyright {
-  padding: 8px 0 4px;
-  font-size: 12px;
-  text-align: center;
-  color: #999;
-  letter-spacing: 2px;
-}
 </style>