vConsole

components/ExternalPlugins.js

@@ -28,6 +28,7 @@ const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
 const Busuanzi = dynamic(() => import('@/components/Busuanzi'), { ssr: false })
 const GoogleAdsense = dynamic(() => import('@/components/GoogleAdsense'), { ssr: false })
 const Messenger = dynamic(() => import('@/components/FacebookMessenger'), { ssr: false })
+const VConsole = dynamic(() => import('@/components/VConsole'), { ssr: false })
 
 /**
  * 各种第三方组件
@@ -52,6 +53,7 @@ const ExternalPlugin = (props) => {
           {JSON.parse(BLOG.FLUTTERINGRIBBON) && <FlutteringRibbon />}
           {JSON.parse(BLOG.COMMENT_TWIKOO_COUNT_ENABLE) && <TwikooCommentCounter {...props}/>}
           {JSON.parse(BLOG.RIBBON) && <Ribbon />}
+          <VConsole/>
       </>
 }
 

components/VConsole.js

@@ -0,0 +1,66 @@
+import { loadExternalResource } from '@/lib/utils'
+import { useEffect, useRef } from 'react'
+
+const VConsole = () => {
+  const clickCountRef = useRef(0) // 点击次数
+  const lastClickTimeRef = useRef() // 最近一次点击时间戳
+  const timerRef = useRef() // 定时器引用
+
+  const loadVConsole = async () => {
+    try {
+      const url = await loadExternalResource('https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js', 'js')
+      if (!url) {
+        return
+      }
+      const VConsole = window.VConsole
+      const vConsole = new VConsole()
+      return vConsole
+    } catch (error) {
+    }
+  }
+
+  useEffect(() => {
+    const clickListener = () => {
+      const now = Date.now()
+      // 只监听窗口中心的100x100像素范围内的单击事件
+      const centerX = window.innerWidth / 2
+      const centerY = window.innerHeight / 2
+      const range = 50
+      const inRange = (event.clientX >= centerX - range && event.clientX <= centerX + range) &&
+                        (event.clientY >= centerY - range && event.clientY <= centerY + range)
+
+      if (!inRange) {
+        return
+      }
+
+      // 如果在1秒内连续点击了8次
+      if (now - lastClickTimeRef.current < 1000 && clickCountRef.current + 1 === 8) {
+        loadVConsole()
+        clickCountRef.current = 0 // 重置计数器
+        clearTimeout(timerRef.current) // 清除定时器
+        window.removeEventListener('click', clickListener)
+      } else {
+        // 如果不满足条件，则重新设置时间戳和计数器
+        lastClickTimeRef.current = now
+        clickCountRef.current += 1
+        // 如果计数器不为0，则设置定时器
+        if (clickCountRef.current > 0) {
+          clearTimeout(timerRef.current)
+          timerRef.current = setTimeout(() => {
+            clickCountRef.current = 0
+          }, 1000)
+        }
+      }
+    }
+    // 监听窗口点击事件
+    window.addEventListener('click', clickListener)
+    return () => {
+      window.removeEventListener('click', clickListener)
+      clearTimeout(timerRef.current)
+    }
+  }, [])
+
+  return null
+}
+
+export default VConsole